:root {
    --admin-compat-page:#f5f7fb;
    --admin-compat-surface:#ffffff;
    --admin-compat-surface-2:#f8fafc;
    --admin-compat-line:#dbe3ee;
    --admin-compat-text:#172033;
    --admin-compat-muted:#64748b;
    --admin-compat-link:#1d4ed8;
}

body.admin-body { overflow-x:hidden; }
body.admin-body *, body.admin-body *::before, body.admin-body *::after { box-sizing:border-box; }
body.admin-body img, body.admin-body svg, body.admin-body canvas { max-width:100%; }
body.admin-body input, body.admin-body select, body.admin-body textarea, body.admin-body button { max-width:100%; }
body.admin-body .admin-table-scroll { width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; }
body.admin-body .admin-table-scroll > table { margin-bottom:0; }
body.admin-body .admin-mobile-card-grid { min-width:0 !important; }


/*
 * Mobile admin overview mode
 * - Dense admin screens keep a desktop-size canvas on touch devices.
 * - The member list uses a wider canvas so all 22 columns stay horizontally
 *   intact instead of being crushed into narrow, vertically broken cells.
 * - Users see the whole page first and can pinch-zoom into detail.
 */
html.admin-overview-mode,
html.admin-overview-mode body.admin-body {
    width:1600px !important;
    min-width:1600px !important;
}
html.admin-overview-mode.admin-overview-wide,
html.admin-overview-mode.admin-overview-wide body.admin-body {
    width:2600px !important;
    min-width:2600px !important;
}
html.admin-overview-mode body.admin-body { overflow-x:hidden !important; }
html.admin-overview-mode .container-header {
    width:100% !important;
    min-width:0 !important;
    overflow-x:visible !important;
}
html.admin-overview-mode .container-header ul {
    width:100% !important;
    min-width:0 !important;
    flex-wrap:wrap !important;
}
html.admin-overview-mode table.type01 {
    width:calc(100% - 30px) !important;
    max-width:calc(100% - 30px) !important;
    table-layout:auto !important;
}
html.admin-overview-mode table.type01 :where(th,td) {
    padding:6px 5px !important;
    white-space:normal;
    overflow-wrap:normal;
    word-break:keep-all;
    font-size:11px;
}
html.admin-overview-mode .admin-table-scroll {
    overflow-x:visible !important;
}
html.admin-overview-mode .admin-table-scroll > table {
    min-width:0 !important;
}

/* 회원현황 모바일: 22개 컬럼을 2600px 캔버스 안에 고정 배치하고, 예외적으로 넘칠 때만 가로 이동을 허용한다. */
html.admin-overview-mode.admin-overview-wide,
html.admin-overview-mode.admin-overview-wide body.admin-body {
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
}
html.admin-overview-mode.admin-overview-wide #member {
    width:2570px !important;
    min-width:2570px !important;
    max-width:2570px !important;
    table-layout:fixed !important;
}
html.admin-overview-mode.admin-overview-wide #member :where(th,td) {
    padding:6px 7px !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:keep-all !important;
    font-size:11px;
}
/* 총 2,525px: 좌우 margin 30px를 포함해 2,600px 모바일 캔버스 안에 전 컬럼이 들어온다. */
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(1)  { width:45px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(2)  { width:80px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(3)  { width:95px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(4)  { width:120px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(5)  { width:100px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(6)  { width:95px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(7)  { width:150px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(8)  { width:210px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(9)  { width:130px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(10) { width:190px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(11) { width:95px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(12) { width:95px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(13) { width:160px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(14) { width:75px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(15) { width:85px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(16) { width:160px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(17) { width:90px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(18) { width:85px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(19) { width:130px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(20) { width:95px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(21) { width:120px; }
html.admin-overview-mode.admin-overview-wide #member tr > :nth-child(22) { width:120px; }
html.admin-overview-mode.admin-overview-wide #member .payment-summary-cell {
    white-space:normal !important;
}
html.admin-overview-mode.admin-overview-wide #member .payment-summary-label {
    min-width:46px !important;
    white-space:nowrap !important;
}

body.darkmode.admin-body {
    --admin-compat-page:#08111f;
    --admin-compat-surface:#0f1b2d;
    --admin-compat-surface-2:#111f33;
    --admin-compat-line:#26364e;
    --admin-compat-text:#e5edf8;
    --admin-compat-muted:#94a3b8;
    --admin-compat-link:#93c5fd;
    background:var(--admin-compat-page) !important;
    color:var(--admin-compat-text) !important;
}
body.darkmode.admin-body :where(.bg-white,.bg-gray-50,.bg-gray-100,.bg-slate-50,.bg-blue-50,.table-summary,.odd-row,.even-row,.exception-card,.modal-content,.card,.panel) {
    background-color:var(--admin-compat-surface) !important;
    color:var(--admin-compat-text) !important;
    border-color:var(--admin-compat-line) !important;
}
body.darkmode.admin-body :where(.bg-blue-100,.hover\\:bg-blue-100:hover,.hover\\:bg-slate-50:hover) { background-color:#13294a !important; }
body.darkmode.admin-body :where(.text-gray-900,.text-gray-800,.text-gray-700,.text-slate-900,.text-slate-800,.text-slate-700) { color:var(--admin-compat-text) !important; }
body.darkmode.admin-body :where(.text-gray-600,.text-gray-500,.text-gray-400,.text-slate-600,.text-slate-500,.text-slate-400) { color:var(--admin-compat-muted) !important; }
body.darkmode.admin-body :where(h1,h2,h3,h4,h5,h6,p,span,div,td,th,label,summary) { border-color:var(--admin-compat-line); }
body.darkmode.admin-body :where(a:not(.admin-brand):not(.admin-shell__plain-link):not(.dq-button),a:visited:not(.admin-brand):not(.admin-shell__plain-link):not(.dq-button)) { color:var(--admin-compat-link); }
body.darkmode.admin-body :where(input,select,textarea) {
    color:var(--admin-compat-text) !important;
    background:#0b1728 !important;
    border-color:#334155 !important;
}
body.darkmode.admin-body :where(input,textarea)::placeholder { color:#64748b !important; opacity:1; }
body.darkmode.admin-body :where(table.type01,table.table,table:not(.dq-table):not(.abuse-table)) { color:var(--admin-compat-text); background:var(--admin-compat-surface); }
body.darkmode.admin-body :where(table.type01,table.table,table:not(.dq-table):not(.abuse-table)) :where(th,td) { color:inherit; border-color:var(--admin-compat-line) !important; }
body.darkmode.admin-body :where(table.type01,table.table,table:not(.dq-table):not(.abuse-table)) thead :where(th,td) { background:var(--admin-compat-surface-2) !important; color:#cbd5e1 !important; }
body.darkmode.admin-body :where(table.type01,table.table,table:not(.dq-table):not(.abuse-table)) tbody tr:hover { background:#13233a !important; }
body.darkmode.admin-body .exception-card { box-shadow:0 8px 24px rgba(0,0,0,.25) !important; }
body.darkmode.admin-body .modal { background:rgba(2,6,23,.72) !important; }
body.darkmode.admin-body .close { color:#cbd5e1 !important; }
body.darkmode.admin-body .highcharts-background { fill:#0f1b2d !important; }
body.darkmode.admin-body .highcharts-title,.darkmode .highcharts-subtitle,.darkmode .highcharts-axis-title,.darkmode .highcharts-axis-labels text,.darkmode .highcharts-legend-item text { fill:#cbd5e1 !important; color:#cbd5e1 !important; }
body.darkmode.admin-body .highcharts-grid-line { stroke:#26364e !important; }

@media (max-width:960px) {
    body.admin-responsive-page { width:100%; min-width:0 !important; }
    body.admin-responsive-page > :not(.admin-shell):not(.admin-drawer):not(.admin-drawer-backdrop):not(script):not(style) { max-width:100%; }
    body.admin-responsive-page .exception-grid { grid-template-columns:minmax(0,1fr) !important; gap:12px !important; padding:10px !important; }
    body.admin-responsive-page .exception-card { max-height:none !important; padding:14px !important; }
    body.admin-responsive-page .modal-content { width:calc(100% - 24px) !important; max-width:720px; margin:72px auto 20px !important; }
    body.admin-responsive-page .max-w-7xl { max-width:100% !important; }
    body.admin-responsive-page form { max-width:100%; }
    body.admin-responsive-page .admin-table-scroll { border-radius:10px; }
    body.admin-responsive-page .admin-table-scroll table { min-width:760px; }
    body.admin-responsive-page .admin-table-scroll::after { content:'좌우로 밀어 전체 항목을 확인할 수 있습니다.'; position:sticky; left:8px; display:inline-block; padding:5px 8px; color:var(--admin-compat-muted); font-size:10px; font-weight:700; }
}

@media (max-width:560px) {
    body.admin-responsive-page :where(h1,.text-2xl) { font-size:1.25rem !important; }
    body.admin-responsive-page :where(h2,.text-xl) { font-size:1.1rem !important; }
    body.admin-responsive-page input:not([type=checkbox]):not([type=radio]), body.admin-responsive-page select, body.admin-responsive-page textarea, body.admin-responsive-page button { min-height:42px; }
    body.admin-responsive-page .mgl20 { margin-left:10px !important; }
    body.admin-responsive-page .mgt30 { margin-top:18px !important; }
    body.admin-responsive-page .mgb30 { margin-bottom:18px !important; }
}


/* 2026-08 admin legacy dark/mobile compatibility */
html.admin-dark-preload { background:#08111f; color-scheme:dark; }
body.admin-body { background:var(--admin-compat-page); color:var(--admin-compat-text); }
body.admin-body :where(a,button,input,select,textarea,summary):focus-visible {
    outline:2px solid #60a5fa; outline-offset:2px;
}
body.darkmode.admin-body :where(.status-card,.page-monitor-shell,.page-monitor-kpi,.page-monitor-stream,.payment-summary-cell,.blocked-scroll,.ip-risk-panel) {
    background:var(--admin-compat-surface) !important;
    color:var(--admin-compat-text) !important;
    border-color:var(--admin-compat-line) !important;
}
body.darkmode.admin-body :where(.status-head,.page-monitor-stream-title,.page-monitor-head,.table-toolbar) {
    border-color:var(--admin-compat-line) !important;
}
body.darkmode.admin-body :where(.status-title,.page-monitor-title,.page-monitor-kpi .kpi-value,.monitor-member,.monitor-company) {
    color:var(--admin-compat-text) !important;
}
body.darkmode.admin-body :where(.status-badge,.payment-summary-label,.risk-note) {
    background:#17263b !important; color:#cbd5e1 !important; border-color:#334155 !important;
}
body.darkmode.admin-body .payment-summary-line { border-color:#26364e !important; }
body.darkmode.admin-body .payment-summary-value { color:#e5edf8 !important; }
body.darkmode.admin-body .payment-summary-line.count .payment-summary-value { color:#fb923c !important; }
body.darkmode.admin-body .payment-summary-line.recent .payment-summary-value { color:#34d399 !important; }
body.darkmode.admin-body .payment-summary-line.date .payment-summary-value { color:#94a3b8 !important; }
body.darkmode.admin-body .page-monitor-empty, body.darkmode.admin-body .monitor-empty { color:#94a3b8 !important; }

@media (prefers-reduced-motion: reduce) {
    body.admin-body *, body.admin-body *::before, body.admin-body *::after {
        animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;
    }
}
