/* 운영 콘솔 Metronic 스타일(2026-11-01) — Keenthemes Metronic 9.5 HTML demo10 의 실측값을 따라 다시 쓴 덮어쓰기 층.
   검은 사이드바 + 왼쪽이 둥근 흰 본문 판(1001px 이상), 카드 머리는 옅은 회색 면 + 진한 제목, 1px 옅은 테두리 카드(라운드 12) · 56px 카드 머리 · 40px 표 머리 · 34px 버튼(휴대폰 44) · 파랑 강조 하나 · 옅은 바탕 배지.
   운영 현황(아이콘 타일 · 30일 추이 · 이번 달 결제 하이라이트)과 설정 묶음 카드, 일별 추이 선 그래프(inc/ops_analytics.php)도 여기서 꾸민다.
   대시보드 하네스 원칙: 프레임은 무채색, 색은 데이터(상태 · 증감)에만, 장식 그라디언트 · 글로우 · 색 띠 제거, 강조는 크기로.
   마크업은 그대로 두고 맨 마지막에 불린다(ops/_boot.php body.ops-mt). 이 파일만 빼면 이전 모양으로 돌아간다. 모바일 우선, min-width 만 */
html body.ops-workspace.ops-mt{
  --oi:#09090B;--ob:#FFFFFF;--oc:#FFFFFF;--ol:#ECECEF;--os:#52525B;--om:#71717A;
  --oa:#2563EB;--oa-deep:#1D4ED8;--oa-soft:#EFF6FF;
  --ok:#15803D;--ok-soft:#F0FDF4;--ow:#A16207;--ow-soft:#FEFCE8;--od:#B91C1C;--od-soft:#FEF2F2;
  --mt-line:#ECECEF;--mt-line2:#E4E4E7;--mt-muted-bg:#F4F4F5;--mt-head-bg:#FAFAFA;--mt-side:#09090B;--mt-side-hover:#18181B;--mt-side-on:#27272A;
  --mt-radius:12px;--mt-r-sm:6px;--mt-shadow:0 1px 2px rgba(0,0,0,.05);
  background:#FFFFFF;color:var(--oi);font-family:Pretendard,ui-sans-serif,system-ui,-apple-system,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;letter-spacing:-.01em;
}

/* ── 사이드바(검정 · demo10) ── */
html body.ops-workspace.ops-mt .ops-sidebar{background:var(--mt-side);border-right:0;color:#D4D4D8}
html body.ops-workspace.ops-mt .ops-sidebar .ops-logo,html body.ops-workspace.ops-mt .ops-sidebar .ops-logo b{color:#FAFAFA}
html body.ops-workspace.ops-mt .ops-logo small{color:#A1A1AA}
html body.ops-workspace.ops-mt .ops-internal{background:var(--mt-side-on);color:#E4E4E7;border-radius:4px;font-weight:600}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav{padding:8px 12px 20px}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav :is(a,summary){min-height:44px;margin:2px 0;padding:0 10px;gap:10px;border-radius:var(--mt-r-sm);font-size:14px;line-height:1.45;color:#D4D4D8;font-weight:400;box-shadow:none;background:transparent}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav summary{font-weight:500}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav svg{color:#A1A1AA}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav :is(a,summary):hover{background:var(--mt-side-hover);color:#FAFAFA}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav a[aria-current]{background:var(--mt-side-on);color:#FFFFFF;font-weight:500;box-shadow:none}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav a[aria-current] svg,html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-group[data-active]>summary svg{color:#FAFAFA}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-group[data-active]>summary{color:#FFFFFF}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-chev{border-color:#71717A}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-kids{padding:2px 0 6px 28px}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-kids a{font-size:14px;color:#A1A1AA}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav-count{background:#3F3F46;color:#FAFAFA;font-weight:600}
html body.ops-workspace.ops-mt .ops-sidebar .ops-nav :focus-visible{outline:2px solid #60A5FA;outline-offset:-2px}
html body.ops-workspace.ops-mt .ops-sidebar-foot{border-top:1px solid #27272A}
html body.ops-workspace.ops-mt .ops-sidebar-foot a{color:#D4D4D8}
html body.ops-workspace.ops-mt .ops-sidebar-foot small{color:#A1A1AA}

/* ── 상단 바 ── */
html body.ops-workspace.ops-mt .ops-topbar{height:64px;background:#FFFFFF;z-index:30;border-bottom:1px solid var(--mt-line);box-shadow:none;backdrop-filter:none}
html body.ops-workspace.ops-mt .ops-breadcrumb{font-size:14px;color:var(--om)}
html body.ops-workspace.ops-mt .ops-breadcrumb b{color:var(--oi);font-weight:500}
html body.ops-workspace.ops-mt .ops-global-search{min-height:44px;border:1px solid var(--mt-line2);border-radius:var(--mt-r-sm);background:#FFFFFF}
html body.ops-workspace.ops-mt .ops-global-search:focus-within{border-color:var(--oa);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
html body.ops-workspace.ops-mt .ops-avatar{background:var(--mt-muted-bg);color:var(--oi);font-weight:600}
html body.ops-workspace.ops-mt .ops-me small{color:var(--om)}
html body.ops-workspace.ops-mt .ops-logout{min-width:44px;justify-content:center}   /* 글꼴 · 자간이 바뀌어 폭이 43px 로 줄었다(터치 44) */

/* ── 페이지 머리 ── */
html body.ops-workspace.ops-mt .owrap{padding:20px 16px 48px}
html body.ops-workspace.ops-mt .ohead{margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--mt-line);align-items:flex-end;gap:12px}
html body.ops-workspace.ops-mt .ops-eyebrow{display:none}
html body.ops-workspace.ops-mt .ohead h1{font-size:clamp(18px,1.6vw,20px);font-weight:600;line-height:1.4;letter-spacing:-.02em}
html body.ops-workspace.ops-mt .ohead p{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--om)}
html body.ops-workspace.ops-mt .ops-page-tools span{font-size:13px;color:var(--om)}

/* ── 카드 ── */
html body.ops-workspace.ops-mt .ocard{background:#FFFFFF;border:1px solid var(--mt-line);border-radius:var(--mt-radius);box-shadow:var(--mt-shadow);padding:16px}
html body.ops-workspace.ops-mt .ocard>.och:first-child{margin:-16px -16px 16px;padding:6px 16px;min-height:56px;align-items:center;border-bottom:1px solid var(--mt-line)}   /* 오른쪽 링크가 터치 44px 라 위아래 6 → 머리 56 으로 링크 유무와 관계없이 같다 */
html body.ops-workspace.ops-mt .och b{font-size:16px;font-weight:700;letter-spacing:-.025em;color:var(--oi)}
html body.ops-workspace.ops-mt .ocard>.och:first-child{background:var(--mt-muted-bg);border-radius:var(--mt-radius) var(--mt-radius) 0 0;border-bottom-color:var(--mt-line2)}   /* 머리는 옅은 회색 면 · 제목 700 — 흰 본문과 한눈에 구분(데모 원본보다 한 단계 진하게) */
html body.ops-workspace.ops-mt .och span,html body.ops-workspace.ops-mt .och a:not(.obtn){font-size:13px;color:var(--om)}
html body.ops-workspace.ops-mt .och a:not(.obtn){color:var(--oa);font-weight:500}
html body.ops-workspace.ops-mt .ogrid{gap:16px}

/* ── 숫자 카드(KPI) — 숫자가 주인공: 크게, 라벨 · 보조는 작고 옅게, 색 띠 · 그라디언트 없음 ── */
html body.ops-workspace.ops-mt .okpi{gap:16px}
html body.ops-workspace.ops-mt .ok:not(.obadge):not(.otip){padding:16px 20px;border:1px solid var(--mt-line);border-radius:var(--mt-radius);background:#FFFFFF;box-shadow:var(--mt-shadow)}
html body.ops-workspace.ops-mt .ok:not(.obadge):not(.otip):before{display:none}
html body.ops-workspace.ops-mt .ok:not(.obadge):not(.otip) span{font-size:13px;font-weight:500;color:var(--om);letter-spacing:-.01em}
html body.ops-workspace.ops-mt .ok:not(.obadge):not(.otip) b{margin-top:8px;font-family:inherit;font-size:clamp(24px,2vw,28px);font-weight:600;line-height:1.25;letter-spacing:-.03em;color:var(--oi);font-variant-numeric:tabular-nums}
html body.ops-workspace.ops-mt .ok:not(.obadge):not(.otip) small{margin-top:6px;font-size:13px;color:var(--om)}
html body.ops-workspace.ops-mt .ok.hot:not(.obadge):not(.otip),html body.ops-workspace.ops-mt .ok.bad:not(.obadge):not(.otip){background:#FFFFFF;border-color:var(--mt-line)}
html body.ops-workspace.ops-mt .ok.hot:not(.obadge):not(.otip) b{color:var(--oa-deep)}
html body.ops-workspace.ops-mt .ok.bad:not(.obadge):not(.otip) b{color:var(--od)}
html body.ops-workspace.ops-mt .ops-shortcuts a,html body.ops-workspace.ops-mt .ops-shortcuts>*{background:#FFFFFF;border:1px solid var(--mt-line);border-radius:var(--mt-radius);color:var(--oi);box-shadow:var(--mt-shadow)}
html body.ops-workspace.ops-mt .ops-shortcuts a:hover{border-color:var(--mt-line2);background:var(--mt-head-bg)}

/* ── 표 ── */
html body.ops-workspace.ops-mt .otw{border:1px solid var(--mt-line);border-radius:10px}
html body.ops-workspace.ops-mt .ot th{background:var(--mt-head-bg);color:var(--os);font-size:13px;font-weight:500;border-bottom:1px solid var(--mt-line)}
html body.ops-workspace.ops-mt .ot th:first-child,html body.ops-workspace.ops-mt .ot th:last-child{border-radius:0}
html body.ops-workspace.ops-mt .ot td{border-bottom:1px solid var(--mt-line);font-size:14px;color:var(--oi)}
html body.ops-workspace.ops-mt .ot tbody tr:hover td{background:#FAFAFA}
html body.ops-workspace.ops-mt .ot td small{color:var(--om)}
html body.ops-workspace.ops-mt .ot :is(th,td).n{font-family:inherit}
html body.ops-workspace.ops-mt .ops-table-hint{color:var(--om)}
/* 정렬 열 제목(서버 정렬 a · 한 쪽 표 button 같은 모양) — 위아래 화살표, 정렬된 쪽만 진하게. 휴대폰 터치 44 · 1024 이상은 머리 높이(40)에 맞춤 */
html body.ops-workspace.ops-mt .ot th .ot-sort{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0;border:0;background:none;font:inherit;line-height:1.3;color:inherit;text-align:inherit;cursor:pointer;white-space:normal;word-break:keep-all}
html body.ops-workspace.ops-mt .ot th.n .ot-sort{flex-direction:row-reverse}
html body.ops-workspace.ops-mt .ot th .ot-sort svg{display:block;flex:none;width:8px;height:11px}
html body.ops-workspace.ops-mt .ot th .ot-sort path{fill:#D4D4D8}
html body.ops-workspace.ops-mt .ot th .ot-sort:hover{color:var(--oi)}
html body.ops-workspace.ops-mt .ot th .ot-sort:hover path{fill:#A1A1AA}
html body.ops-workspace.ops-mt .ot th .ot-sort.is-asc path.up,html body.ops-workspace.ops-mt .ot th .ot-sort.is-desc path.down{fill:var(--oi)}
html body.ops-workspace.ops-mt .ot th[aria-sort=ascending],html body.ops-workspace.ops-mt .ot th[aria-sort=descending]{color:var(--oi)}
html body.ops-workspace.ops-mt .ot th .ot-sort:focus-visible{outline:2px solid var(--oa);outline-offset:2px;border-radius:4px}
/* 두 줄 칸 — 윗줄은 14px medium(이름 · 금액), 아랫줄(small)은 13px 옅은 글자로 바로 아래 */
html body.ops-workspace.ops-mt .ot td>b,html body.ops-workspace.ops-mt .ot td>a>b,html body.ops-workspace.ops-mt .ot td>a:first-child:not(.obtn){font-weight:500;color:var(--oi)}
html body.ops-workspace.ops-mt .ot td small{display:block;margin:2px 0 0;font-size:13px;line-height:1.45;font-weight:400;color:var(--om)}
html body.ops-workspace.ops-mt .ot td .obadge+small,html body.ops-workspace.ops-mt .ot td small+.obadge{margin-top:4px}

/* ── 버튼 · 입력 · 탭 · 배지 ── */
html body.ops-workspace.ops-mt .obtn{border-radius:var(--mt-r-sm);font-size:14px;font-weight:500;background:var(--oa);color:#FFFFFF;border:1px solid var(--oa);box-shadow:none}
html body.ops-workspace.ops-mt .obtn:hover{background:var(--oa-deep);border-color:var(--oa-deep);filter:none}
html body.ops-workspace.ops-mt .obtn:active{transform:none}
html body.ops-workspace.ops-mt .obtn.g{background:#FFFFFF;color:var(--oi);border:1px solid var(--mt-line2)}
html body.ops-workspace.ops-mt .obtn.g:hover{background:var(--mt-head-bg);border-color:#D4D4D8;color:var(--oi)}
html body.ops-workspace.ops-mt .obtn.red{background:var(--od-soft);color:var(--od);border-color:#FECACA}
html body.ops-workspace.ops-mt .obtn.sm{border-radius:var(--mt-r-sm);font-size:13px}
html body.ops-workspace.ops-mt .obtn:focus-visible,html body.ops-workspace.ops-mt .osel a:focus-visible{outline:2px solid var(--oa);outline-offset:2px}
html body.ops-workspace.ops-mt :is(.oform,.ops-form,.ops-inline,.setting-control) :is(input:not([type=checkbox]):not([type=radio]),select,textarea),html body.ops-workspace.ops-mt .oin{border:1px solid var(--mt-line2);border-radius:var(--mt-r-sm);background:#FFFFFF;box-shadow:none;color:var(--oi)}
html body.ops-workspace.ops-mt :is(.oform,.ops-form,.ops-inline,.setting-control) :is(input,select,textarea):focus{border-color:var(--oa);box-shadow:0 0 0 3px rgba(37,99,235,.12);outline:0}
html body.ops-workspace.ops-mt .listfilter{background:transparent;border:0;padding:0}
html body.ops-workspace.ops-mt .osel{background:var(--mt-muted-bg);border:0;border-radius:8px;padding:4px;gap:2px}
html body.ops-workspace.ops-mt .osel a{border:0;border-radius:var(--mt-r-sm);background:transparent;color:var(--os);font-size:14px;font-weight:500;box-shadow:none}
html body.ops-workspace.ops-mt .osel a:hover{color:var(--oi);background:transparent}
html body.ops-workspace.ops-mt .osel a.on{background:#FFFFFF;color:var(--oi);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.06)}
html body.ops-workspace.ops-mt .obadge{border-radius:4px;font-size:12px;font-weight:500;background:var(--mt-muted-bg);color:var(--os)}
html body.ops-workspace.ops-mt .obadge.ok{background:var(--ok-soft);color:var(--ok)}
html body.ops-workspace.ops-mt .obadge.warn{background:var(--ow-soft);color:var(--ow)}
html body.ops-workspace.ops-mt .obadge.bad,html body.ops-workspace.ops-mt .obadge.red{background:var(--od-soft);color:var(--od)}
html body.ops-workspace.ops-mt .otip{border-radius:10px;border:1px solid var(--mt-line);background:var(--mt-head-bg);color:var(--os)}
html body.ops-workspace.ops-mt .otip.warn{background:var(--ow-soft);border-color:#FDE68A;color:#713F12}
html body.ops-workspace.ops-mt .otip.ok{background:var(--ok-soft);border-color:#BBF7D0;color:#14532D}
html body.ops-workspace.ops-mt .oempty{border:1px dashed var(--mt-line2);border-radius:10px;background:var(--mt-head-bg);color:var(--om)}

/* 목록 찾기 줄(inc/list.php) — 바깥 칸 하나만 테두리, 찾기 버튼은 주 버튼 */
html body.ops-workspace.ops-mt .listfilter .lf-search,html body.ops-workspace.ops-mt .listfilter .lf-date{border:1px solid var(--mt-line2);border-radius:var(--mt-r-sm);background:#FFFFFF;box-shadow:none}
html body.ops-workspace.ops-mt .listfilter .lf-search:focus-within,html body.ops-workspace.ops-mt .listfilter .lf-date:focus-within{border-color:var(--oa);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
html body.ops-workspace.ops-mt .listfilter :is(.lf-search,.lf-date) input{border:0;box-shadow:none;background:transparent}
html body.ops-workspace.ops-mt .listfilter .btn{border-radius:var(--mt-r-sm);background:var(--oa);border:1px solid var(--oa);color:#FFFFFF;font-weight:500;box-shadow:none}
html body.ops-workspace.ops-mt .listfilter .btn.g{background:#FFFFFF;border-color:var(--mt-line2);color:var(--oi)}

/* 화면 안 바로가기(통계 .ops-section-nav · 설정 .settings-jump) — 옅은 테두리 링크, 굵기 · 색 절제 */
html body.ops-workspace.ops-mt :is(.ops-section-nav,.settings-jump) a{border:1px solid var(--mt-line2);border-radius:var(--mt-r-sm);background:#FFFFFF;color:var(--os);font-size:13px;font-weight:500;box-shadow:none}
html body.ops-workspace.ops-mt :is(.ops-section-nav,.settings-jump) a:hover{background:var(--mt-head-bg);color:var(--oi);border-color:#D4D4D8}

/* ── 데스크톱(demo10): 검정 바탕 위 왼쪽이 둥근 흰 본문 판 ── */
@media (min-width:1001px){
  html body.ops-workspace.ops-mt{background:var(--mt-side)}
  html body.ops-workspace.ops-mt::before{content:"";position:fixed;top:0;right:0;bottom:0;left:232px;z-index:0;background:#FFFFFF;border:1px solid var(--mt-line2);border-right:0;border-radius:var(--mt-radius) 0 0 var(--mt-radius);pointer-events:none}
  html body.ops-workspace.ops-mt .owrap,html body.ops-workspace.ops-mt>footer{position:relative;z-index:1}
  html body.ops-workspace.ops-mt .ops-topbar{position:sticky;z-index:30;height:64px;background:#FFFFFF;border-top-left-radius:var(--mt-radius)}   /* 본문(z 1)보다 위 — 스크롤 때 글자가 겹치지 않는다 */
  html body.ops-workspace.ops-mt .owrap{padding:24px 24px 48px}
}
@media (min-width:1024px){
  html body.ops-workspace.ops-mt .obtn,html body.ops-workspace.ops-mt .obtn.sm,html body.ops-workspace.ops-mt .listfilter .btn{min-height:34px;padding:0 12px}
  html body.ops-workspace.ops-mt table.ot td .ops-row-acts .obtn,html body.ops-workspace.ops-mt .ops-row-acts .obtn{min-height:34px;line-height:32px}
  html body.ops-workspace.ops-mt .ops-more>summary{min-height:34px;min-width:34px}
  html body.ops-workspace.ops-mt .listfilter :is(.lf-search,.lf-date){min-height:36px}
  html body.ops-workspace.ops-mt .ops-global-search{min-height:36px}
  html body.ops-workspace.ops-mt .osel a{min-height:34px;padding:0 12px}
  html body.ops-workspace.ops-mt .ot th{height:40px;padding:0 16px}
  html body.ops-workspace.ops-mt .ot th .ot-sort{min-height:40px}
  html body.ops-workspace.ops-mt .ot td{padding:12px 16px}
  html body.ops-workspace.ops-mt .ops-sidebar .ops-nav :is(a,summary){min-height:40px}
  html body.ops-workspace.ops-mt .ocard{padding:20px}
  html body.ops-workspace.ops-mt #ops-main{--ops-control-height:36px}
  html body.ops-workspace.ops-mt :is(.ops-section-nav,.settings-jump) a{min-height:32px;padding:0 10px}
  html body.ops-workspace.ops-mt #ops-main .setting-control .obtn{height:36px;min-height:36px}
  html body.ops-workspace.ops-mt #ops-main .setting-control :is(input,select){height:36px;min-height:36px}
  html body.ops-workspace.ops-mt .ocard>.och:first-child{margin:-20px -20px 20px;padding:6px 20px}
}
/* ── 운영 현황(Metronic 대시보드) — 아이콘 타일 2×2 + 30일 추이 / 이번 달 결제 하이라이트 + 지금 할 일 ── */
html body.ops-workspace.ops-mt .mt-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 16px}
html body.ops-workspace.ops-mt .mt-row>.ocard,html body.ops-workspace.ops-mt .mt-row>.okpi{margin:0;min-width:0}
html body.ops-workspace.ops-mt .mt-row>.okpi{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
html body.ops-workspace.ops-mt .ok.mt-tile{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:20px;min-width:0}
html body.ops-workspace.ops-mt .ok.mt-tile .mt-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 16px;border:1px solid var(--mt-line);border-radius:8px;background:var(--mt-head-bg);color:var(--os)}
html body.ops-workspace.ops-mt .mt-ico svg{display:block;width:20px;height:20px}
html body.ops-workspace.ops-mt .ok.mt-tile b{margin:auto 0 0;font-size:clamp(24px,2.2vw,30px);line-height:1.2;font-weight:600;overflow-wrap:anywhere}
html body.ops-workspace.ops-mt .ok.mt-tile .mt-lab{margin:6px 0 0;font-size:14px;line-height:1.45;font-weight:400;color:#3F3F46}
html body.ops-workspace.ops-mt .ok.mt-tile small{margin:2px 0 0;font-size:13px;line-height:1.45}
html body.ops-workspace.ops-mt a.ok.mt-tile:hover{border-color:#D4D4D8;box-shadow:0 2px 8px rgba(0,0,0,.05)}
html body.ops-workspace.ops-mt a.ok.mt-tile:focus-visible{outline:2px solid var(--oa);outline-offset:2px}
html body.ops-workspace.ops-mt .och span a{color:var(--oa);font-weight:500}
html body.ops-workspace.ops-mt .mt-hl-sum{display:grid;gap:4px;min-width:0}
html body.ops-workspace.ops-mt .mt-hl-sum>span,html body.ops-workspace.ops-mt .mt-hl-sum small{font-size:13px;line-height:1.45;color:var(--om)}
html body.ops-workspace.ops-mt .mt-hl-sum>div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
html body.ops-workspace.ops-mt .mt-hl-sum b{font-size:30px;line-height:1.2;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html body.ops-workspace.ops-mt .mt-hl-sum em{font-style:normal;font-size:16px;line-height:1.2;color:var(--om)}
html body.ops-workspace.ops-mt .mt-delta{display:inline-flex;align-items:center;height:20px;padding:0 6px;border:1px solid var(--mt-line2);border-radius:4px;background:var(--mt-head-bg);font-size:12px;line-height:1;font-weight:500;color:var(--os)}
html body.ops-workspace.ops-mt .mt-delta.up{border-color:#BBF7D0;background:var(--ok-soft);color:var(--ok)}
html body.ops-workspace.ops-mt .mt-delta.down{border-color:#FECACA;background:var(--od-soft);color:var(--od)}
html body.ops-workspace.ops-mt .mt-seg{display:flex;gap:4px;height:8px;margin:16px 0 0}
html body.ops-workspace.ops-mt .mt-seg i{display:block;flex:1 1 0;min-width:4px;border-radius:2px}
html body.ops-workspace.ops-mt .mt-seg.is-empty i{background:var(--mt-muted-bg)}
html body.ops-workspace.ops-mt .mt-hl-list{display:grid;gap:0;margin:16px 0 0;padding:0;list-style:none;border-top:1px solid var(--mt-line)}
html body.ops-workspace.ops-mt .mt-hl-list li{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(64px,auto);align-items:center;gap:12px;min-height:40px;border-bottom:1px solid var(--mt-line);font-size:14px;line-height:1.45}
html body.ops-workspace.ops-mt .mt-hl-list li>span{display:flex;align-items:center;gap:8px;min-width:0;color:#3F3F46}
html body.ops-workspace.ops-mt .mt-hl-list li>span i{flex:none;width:8px;height:8px;border-radius:50%}
html body.ops-workspace.ops-mt .mt-hl-list b{font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
html body.ops-workspace.ops-mt .mt-hl-list em{font-style:normal;font-size:13px;text-align:right;color:var(--om);white-space:nowrap}
html body.ops-workspace.ops-mt .mt-hl-list em.up{color:var(--ok)}
html body.ops-workspace.ops-mt .mt-hl-list em.down{color:var(--od)}
html body.ops-workspace.ops-mt .mt-hl-list .mt-hl-sub>span{color:var(--om)}
html body.ops-workspace.ops-mt .mt-note{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--om)}
html body.ops-workspace.ops-mt .mt-todo-list{display:grid;gap:0;margin:0 0 16px;padding:0;list-style:none}
html body.ops-workspace.ops-mt .mt-todo-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--mt-line)}
html body.ops-workspace.ops-mt .mt-todo-list li:first-child{padding-top:0}
html body.ops-workspace.ops-mt .mt-todo-list li>div{display:grid;gap:2px;min-width:0}
html body.ops-workspace.ops-mt .mt-todo-list b{font-size:14px;line-height:1.45;font-weight:500;overflow-wrap:anywhere}
html body.ops-workspace.ops-mt .mt-todo-list small{font-size:13px;line-height:1.5;color:var(--om);overflow-wrap:anywhere}
html body.ops-workspace.ops-mt .mt-todo-list .obadge{justify-self:start;white-space:nowrap}
html body.ops-workspace.ops-mt .mt-todo .ops-shortcuts{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
html body.ops-workspace.ops-mt .mt-todo .ops-shortcuts a{box-shadow:none;padding:12px 16px;min-height:44px}
html body.ops-workspace.ops-mt .mt-todo .ops-shortcuts span{font-size:12px;line-height:1.45}
html body.ops-workspace.ops-mt .mt-todo .ops-shortcuts b{font-size:13px;line-height:1.45;font-weight:500}
html body.ops-workspace.ops-mt .mt-trend .ops-chart-data{margin:8px 0 0}
html body.ops-workspace.ops-mt .mt-trend .ops-chart-data summary{display:flex;align-items:center;min-height:44px;padding:0;font-size:13px}

/* ── 일별 추이 선 그래프(Earnings 형) — 점선 눈금 · 2.5px 선 · 8% 면. 축 글자 · 날짜 점은 HTML(글자 크기 고정 · 가로 스크롤 없음) ── */
html body.ops-workspace.ops-mt .oa-chart{margin:0;min-width:0;overflow:visible}
html body.ops-workspace.ops-mt .oa-chart figcaption{display:flex;justify-content:space-between;gap:12px;font-size:13px;line-height:1.45;font-weight:500;color:var(--os)}
html body.ops-workspace.ops-mt .oa-chart figcaption span{font-weight:400;color:var(--om)}
html body.ops-workspace.ops-mt .oa-plot{display:grid;grid-template-columns:3.6em minmax(0,1fr);grid-template-rows:clamp(150px,22vw,200px) 20px;column-gap:10px;row-gap:8px;margin:16px 0 0;font-size:12px;line-height:1;color:var(--om);font-variant-numeric:tabular-nums}
html body.ops-workspace.ops-mt .oa-y,html body.ops-workspace.ops-mt .oa-box,html body.ops-workspace.ops-mt .oa-x{position:relative;min-width:0}
html body.ops-workspace.ops-mt .oa-y span{position:absolute;right:0;transform:translateY(50%);white-space:nowrap}
html body.ops-workspace.ops-mt .oa-x{grid-column:2}
html body.ops-workspace.ops-mt .oa-x span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
html body.ops-workspace.ops-mt .oa-x span.is-first{transform:none}
html body.ops-workspace.ops-mt .oa-x span.is-last{transform:translateX(-100%)}
html body.ops-workspace.ops-mt .oa-x span.is-sub{display:none}
html body.ops-workspace.ops-mt .oa-chart svg{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;margin:0;overflow:visible}
html body.ops-workspace.ops-mt .oa-grid{stroke:var(--mt-line2);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
html body.ops-workspace.ops-mt .oa-area{fill:var(--oa-c,var(--oa));opacity:.08}
html body.ops-workspace.ops-mt .oa-line{fill:none;stroke:var(--oa-c,var(--oa));stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
html body.ops-workspace.ops-mt .oa-pt{position:absolute;top:0;bottom:0;outline:0;cursor:default}
html body.ops-workspace.ops-mt .oa-pt::before{content:"";position:absolute;top:0;bottom:0;left:clamp(0px,var(--x),calc(100% - 1px));border-left:1px dashed #A1A1AA;opacity:0}
/* 점은 날짜 칸 바로 뒤 형제(.oa-dot) — 그래프 영역 안에서만 움직여 맨 끝 날짜 · 최댓값에서도 밖으로 나가지 않는다 */
html body.ops-workspace.ops-mt .oa-dot{position:absolute;left:clamp(5px,var(--x),calc(100% - 5px));top:clamp(5px,var(--y),calc(100% - 5px));width:10px;height:10px;margin:-5px 0 0 -5px;border:2.5px solid var(--oa-c,var(--oa));border-radius:50%;background:#FFFFFF;opacity:0;pointer-events:none}
html body.ops-workspace.ops-mt .oa-pt:is(:hover,:focus)+.oa-dot{opacity:1}
html body.ops-workspace.ops-mt .oa-pt:is(:hover,:focus)::before{opacity:1}
html body.ops-workspace.ops-mt .oa-pt:focus-visible{background:rgba(37,99,235,.06)}
html body.ops-workspace.ops-mt .oa-empty{margin:8px 0 0;padding:12px;border-radius:8px;background:var(--mt-head-bg);font-size:13px;line-height:1.5;text-align:center;color:var(--om)}

html body.ops-workspace.ops-mt .oa-track{height:8px;border-radius:2px;background:var(--mt-muted-bg)}
html body.ops-workspace.ops-mt .oa-track i{background:var(--oa);border-radius:2px}

/* ── 설정 묶음 카드(Account Home 형) ── */
html body.ops-workspace.ops-mt .mt-setgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin:0 0 20px}
html body.ops-workspace.ops-mt .mt-setcard{display:grid;grid-template-columns:40px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:14px;row-gap:2px;align-items:start;min-width:0;padding:16px;border:1px solid var(--mt-line);border-radius:var(--mt-radius);background:#FFFFFF;box-shadow:var(--mt-shadow);color:var(--oi)}
html body.ops-workspace.ops-mt .mt-setcard .mt-ico{grid-row:1/4;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mt-line);border-radius:8px;background:var(--mt-head-bg);color:var(--os)}
html body.ops-workspace.ops-mt .mt-setcard b{font-size:15px;line-height:1.45;font-weight:600;overflow-wrap:anywhere;word-break:keep-all}
html body.ops-workspace.ops-mt .mt-setdesc{font-size:13px;line-height:1.5;color:var(--om);overflow-wrap:anywhere}
html body.ops-workspace.ops-mt .mt-setcard small{align-self:end;margin:6px 0 0;font-size:13px;line-height:1.45;font-weight:500;color:var(--oa)}
html body.ops-workspace.ops-mt .mt-setcard:hover{border-color:#D4D4D8;box-shadow:0 2px 8px rgba(0,0,0,.05)}
html body.ops-workspace.ops-mt .mt-setcard:hover .mt-ico{color:var(--oa)}
html body.ops-workspace.ops-mt .mt-setcard:focus-visible{outline:2px solid var(--oa);outline-offset:2px}

@media (min-width:640px){
  html body.ops-workspace.ops-mt .oa-x span.is-sub{display:inline}
  html body.ops-workspace.ops-mt .mt-setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body.ops-workspace.ops-mt .mt-todo .ops-shortcuts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1024px){
  html body.ops-workspace.ops-mt .mt-row{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:20px;margin-bottom:20px}
  html body.ops-workspace.ops-mt .mt-row>.okpi{gap:20px}
  html body.ops-workspace.ops-mt .mt-setgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  html body.ops-workspace.ops-mt .mt-setcard{padding:20px}
}
@media (prefers-reduced-motion:reduce){html body.ops-workspace.ops-mt *{transition:none!important}}