/* 망고페이 관리자 — 앱 스타일
   라이트 기본(:root) + 다크 오버라이드(body[data-dark-mode="1"] — EstreUI 다크 모드 규약, LTNC 와 같은 구조).
   외부 글꼴은 쓰지 않아요(CSP·공급망) — 운영체제 한글 글꼴 스택.
   숫자는 tabular-nums(자릿수 정렬), 포인트 색 = 망고 오렌지. */

/* ── 토큰 ── */
:root {
    --mpa-bg: #f5f6f8;
    --mpa-card: #ffffff;
    --mpa-text: #1d2128;
    --mpa-dim: #5d6470;
    --mpa-faint: #8a919c;
    --mpa-line: rgba(29, 33, 40, .10);
    --mpa-line-strong: rgba(29, 33, 40, .18);
    --mpa-soft: rgba(29, 33, 40, .05);
    --mpa-hover: rgba(255, 138, 0, .07);
    --mpa-accent: #a8500a;          /* 흰 배경 위 글자용 진한 망고(대비 AA) */
    --mpa-accent-fill: #ff8a00;     /* 채움·포인트 */
    --mpa-on-accent: #1d1206;
    --mpa-focus: #a8500a;           /* 포커스 링·활성 행 — 흰 카드 위 5.50:1 · 배경 위 5.09:1 (WCAG 1.4.11 의 3:1 이상) */
    --mpa-compare: #7a8494;
    --mpa-ok: #1a7d35;
    --mpa-warn: #8a5d00;
    --mpa-orange: #b35400;
    --mpa-crit: #c62828;            /* 글자·선용 빨강 */
    --mpa-crit-fill: #c62828;       /* 흰 글자를 올리는 채움 — 흰 글자 대비 5.62:1(AA 4.5 이상). 라이트·다크 같은 값 */
    --mpa-gray: #5d6470;
    --mpa-scrim: rgba(15, 18, 22, .45);
    --mpa-shadow: 0 12px 36px rgba(15, 18, 22, .14);
    --mpa-radius: 10px;             /* 카드·패널 — 과한 둥글림을 줄여요(2026-10-28 실화면 피드백) */
    --mpa-font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mpa-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "D2Coding", monospace;
}

body {
    --common-bg-color: #f5f6f8;   /* EstreUI 스플래시 배경 */
    color-scheme: light;
    font-family: var(--mpa-font);
    background-color: var(--mpa-bg);
    color: var(--mpa-text);
    -webkit-font-smoothing: antialiased;
}

body[data-dark-mode="1"] {
    --common-bg-color: #0f1115;
    --mpa-bg: #0f1115;
    --mpa-card: #181b21;
    --mpa-text: #e6e8eb;
    --mpa-dim: #a0a7b1;
    --mpa-faint: #7b828c;
    --mpa-line: rgba(230, 232, 235, .10);
    --mpa-line-strong: rgba(230, 232, 235, .20);
    --mpa-soft: rgba(230, 232, 235, .06);
    --mpa-hover: rgba(255, 159, 26, .10);
    --mpa-accent: #ffa733;
    --mpa-accent-fill: #ff9f1a;
    --mpa-on-accent: #1d1206;
    --mpa-compare: #8e98a8;
    --mpa-ok: #3ccf6e;
    --mpa-warn: #ffc046;
    --mpa-orange: #ffa340;
    --mpa-crit: #ff6b6b;            /* 어두운 배경 위 글자용(배경 대비 충분). 흰 글자를 올리는 채움에는 쓰지 않아요(2.78:1) */
    --mpa-crit-fill: #c62828;
    --mpa-focus: #ff8a00;           /* 어두운 카드 위 7.30:1 */
    --mpa-gray: #a0a7b1;
    --mpa-scrim: rgba(0, 0, 0, .6);
    --mpa-shadow: 0 18px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

main, main button, main input, main select, main textarea,
.mpa_auth, .mpa_palette, .mpa_modal, .mpa_bands, .mpa_toast, header#fixedTop, footer#fixedBottom, nav#mainMenu {
    font-family: var(--mpa-font);
}
.mpa_num, .mpa_grid td, .mpa_mini_table td { font-variant-numeric: tabular-nums; }
.mpa_mono { font-family: var(--mpa-mono); font-size: .92em; letter-spacing: -.2px; }
.mpa_dim { color: var(--mpa-dim); }
.mpa_accent { color: var(--mpa-accent); }
.mpa_spacer { flex: 1 1 auto; }
kbd {
    font-family: var(--mpa-mono); font-size: 11px; padding: 1px 5px; border-radius: 5px;
    border: 1px solid var(--mpa-line-strong); background: var(--mpa-soft); color: var(--mpa-dim);
}
[hidden] { display: none !important; }   /* 클래스의 display 가 hidden 속성을 이기지 않게 */
:focus-visible { outline: 2px solid var(--mpa-focus); outline-offset: 2px; }
a { color: inherit; }
.mpa_view a:not(.mpa_btn) { color: var(--mpa-text); text-decoration: none; }
.mpa_view a:not(.mpa_btn):hover { color: var(--mpa-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── 망고페이 로고 — 원본(vectors/mango_pay.svg)의 «Pay» 글자가 검정이라 다크 모드에서는 밝은 글자 사본(mango_pay_dark.svg)으로 바꿔 끼워요.
      로고가 «Mango Pay» 를 이미 담고 있어서 옆 글자는 «관리자» 만 둬요. ── */
.mpa_logo { display: inline-block; width: auto; flex: none; }
.mpa_logo_dark { display: none; }
body[data-dark-mode="1"] .mpa_logo_light { display: none; }
body[data-dark-mode="1"] .mpa_logo_dark { display: inline-block; }

/* ── 스플래시 ── */
.mpa_splash { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.mpa_splash .mpa_logo { width: min(52vw, 220px); height: auto; }
.mpa_splash span { font-weight: 700; color: var(--mpa-dim); letter-spacing: 2px; }

/* ── 앱바 ── */
#appbar .appbarLeft, #appbar .appbarCenter, #appbar .appbarRight { align-items: center; }
.mpa_brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 8px; border: 0; background: transparent; color: var(--mpa-text); cursor: pointer; }
#appbar .mpa_brand { padding: 4px 10px 4px 14px; }   /* EstreUI tp_tiled_btn 의 padding 0 을 이겨야 로고가 화면 왼쪽 끝에 붙지 않아요 */
.mpa_brand .mpa_logo { height: 34px; }
.mpa_brand_text {
    font-size: 15px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap; color: var(--mpa-dim);
    padding-left: 10px; border-left: 1px solid var(--mpa-line-strong); line-height: 18px;
}
.mpa_page_title { margin-left: 6px; font-weight: 700; color: var(--mpa-dim); white-space: nowrap; }
.mpa_search_trigger {
    display: inline-flex; align-items: center; gap: 8px;
    width: clamp(180px, 34vw, 460px); height: 36px; padding: 0 10px;
    border-radius: 10px; border: 1px solid var(--mpa-line-strong);
    background: var(--mpa-card); color: var(--mpa-faint); cursor: text; font-size: 13px;
}
.mpa_search_trigger:hover { border-color: var(--mpa-accent-fill); }
.mpa_search_icon { font-size: 16px; color: var(--mpa-dim); }
.mpa_search_hint { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpa_icon_btn {
    display: inline-flex; align-items: center; justify-content: center; position: relative;
    min-width: 36px; height: 36px; padding: 0 8px; border: 0; border-radius: 10px;
    background: transparent; color: var(--mpa-text); font-size: 18px; cursor: pointer;
}
.mpa_icon_btn:hover { background: var(--mpa-soft); }
.mpa_bell_badge {
    position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--mpa-crit-fill); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
}
.mpa_user_chip {
    font-size: 12px; color: var(--mpa-dim); padding: 4px 10px; border-radius: 6px;
    background: var(--mpa-soft); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
}
.mpa_user_chip:empty { display: none; }
@media (max-width: 720px) {
    .mpa_brand_text, .mpa_user_chip, .mpa_search_hint, .mpa_search_trigger kbd { display: none; }
    .mpa_search_trigger { width: 40px; justify-content: center; padding: 0; }
    .mpa_page_title { font-size: 15px; }
    .mpa_brand .mpa_logo { height: 28px; }
    #appbar .mpa_brand { padding: 4px 6px 4px 10px; }
}

/* ── 하단 탭(EstreUI rootbar) — 폭 1100px 이하 ── */
#rootbar .mpa_tab_icon { display: block; font-size: 17px; line-height: 1; }
#rootbar .mpa_tab_label { display: block; font-size: 11px; margin-top: 3px; font-weight: 600; }
#rootbar button[data-active="1"], #rootbar button[aria-current="page"] { color: var(--mpa-accent); }
/* EstreUI 세션 관리자(⋮ «열린 화면») — 이 앱에는 그 개념이 없어 숨겨요. section#more 는 EstreUI 가 참조하니 남겨 둬요 */
#rootbar [data-tab-id="more"], #rootbar .dummy_spacer { display: none !important; }

/* ── 데스크톱 좌측 고정 내비(폭 1101px 이상) — 하단 탭 대신. 아이콘 + 이름, 현재 위치 강조(aria-current) ── */
.mpa_sidenav { display: none; }
@media (min-width: 1101px) {
    :root { --mpa-rail-w: 96px; }
    footer#fixedBottom { display: none !important; }
    .mpa_sidenav:not([hidden]) {
        display: flex; flex-direction: column; gap: 4px; position: fixed; z-index: 115; left: 0; bottom: 0;
        top: var(--top-pad, 56px); width: var(--mpa-rail-w); box-sizing: border-box; overflow-y: auto;
        padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px) 0;
        background: var(--mpa-card); border-right: 1px solid var(--mpa-line);
    }
    /* 선택 항목은 왼쪽 강조 막대에 붙여 왼쪽 모서리를 각지게(왼쪽 끝까지 붙음), 오른쪽만 작게 둥글게 */
    .mpa_sidenav a {
        display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 0 8px 8px 0;
        color: var(--mpa-dim); text-decoration: none; font-size: 12px; font-weight: 700; text-align: center;
    }
    .mpa_sidenav a:hover { background: var(--mpa-hover); color: var(--mpa-text); }
    .mpa_sidenav a[aria-current="page"] {
        color: var(--mpa-accent); background: color-mix(in srgb, var(--mpa-accent-fill) 16%, transparent);
        box-shadow: inset 3px 0 0 var(--mpa-accent-fill);
    }
    .mpa_sidenav_icon { font-size: 20px; line-height: 1; }
    /* 내용 영역을 내비 폭만큼 오른쪽으로, 하단 탭이 없으니 아래 여백도 거둬요 */
    body.mpa_signed_in main#staticDoc { left: var(--mpa-rail-w); width: calc(100% - var(--mpa-rail-w)); --bottom-pad: var(--bottom-inset, 0px); }
    body.mpa_signed_in .mpa_fallback_root { padding-left: var(--mpa-rail-w); }
    .mpa_toast { bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); }
}
@media (min-width: 1440px) {
    :root { --mpa-rail-w: 168px; }
    .mpa_sidenav a { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 10px 12px; font-size: 14px; }
}

/* ── 메인 메뉴 ── */
.mpa_menu { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.mpa_menu_account { display: flex; align-items: center; gap: 10px; }
.mpa_menu_account img { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--mpa-line); }
.mpa_menu_account div { display: flex; flex-direction: column; }
.mpa_menu_role { font-size: 12px; color: var(--mpa-dim); }
.mpa_menu_nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--mpa-line); padding-top: 8px; }
.mpa_menu_item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--mpa-text);
    text-decoration: none; font-size: 15px; text-align: left; cursor: pointer;
}
.mpa_menu_item:hover { background: var(--mpa-hover); }
.mpa_menu_danger { color: var(--mpa-crit); }
.mpa_menu_note { font-size: 12px; color: var(--mpa-dim); line-height: 1.6; margin: 0; }
.mpa_menu_version { font-size: 11px; color: var(--mpa-faint); margin: 0; }

/* ── 화면 공통 ── */
.mpa_page { box-sizing: border-box; }
.mpa_view { padding: 16px clamp(12px, 2vw, 28px) 32px; max-width: 1800px; margin: 0 auto; box-sizing: border-box; }
.mpa_head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.mpa_head_title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.mpa_head h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.mpa_head_sub { font-size: 13px; color: var(--mpa-dim); }
.mpa_info { cursor: help; }
.mpa_loading, .mpa_empty { color: var(--mpa-dim); font-size: 14px; padding: 16px 4px; margin: 0; }
.mpa_error { padding: 14px; border-radius: 10px; background: color-mix(in srgb, var(--mpa-crit) 8%, transparent); color: var(--mpa-crit); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mpa_error p { margin: 0; }
.mpa_hint { font-size: 12px; color: var(--mpa-dim); margin: 6px 0 0; }
.mpa_more { font-size: 13px; color: var(--mpa-dim); }

/* ── 버튼·입력 ── */
.mpa_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    border: 1px solid var(--mpa-line-strong); background: var(--mpa-card); color: var(--mpa-text);
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.mpa_btn:hover { border-color: var(--mpa-accent-fill); }
.mpa_btn:disabled { opacity: .5; cursor: default; }
.mpa_btn_primary { background: var(--mpa-accent-fill); border-color: var(--mpa-accent-fill); color: var(--mpa-on-accent); }
.mpa_btn_primary:hover { filter: brightness(1.05); }
.mpa_btn_ghost { background: transparent; }
.mpa_btn_danger { background: var(--mpa-crit-fill); border-color: var(--mpa-crit-fill); color: #fff; }
.mpa_btn_block { width: 100%; height: 44px; font-size: 16px; }
.mpa_btn_sm { height: 30px; padding: 0 10px; font-size: 13px; }
.mpa_btn_xs { height: 24px; padding: 0 8px; font-size: 12px; border-radius: 7px; }
.mpa_field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mpa-dim); }
.mpa_field input, .mpa_field select {
    height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--mpa-line-strong);
    background: var(--mpa-card); color: var(--mpa-text); font-size: 14px; min-width: 0;
    font-variant-numeric: tabular-nums;
}
.mpa_field input:focus, .mpa_field select:focus { border-color: var(--mpa-focus); outline: none; box-shadow: 0 0 0 2px var(--mpa-focus); }
.mpa_field_inline { flex-direction: row; align-items: center; gap: 6px; }
.mpa_field_inline > span { white-space: nowrap; }
.mpa_field_grow { flex: 1 1 220px; }
.mpa_field_grow input { flex: 1 1 auto; width: 0; min-width: 120px; }   /* 입력칸 고유 폭(~180px)이 줄바꿈을 일으켜 태블릿에서 버튼이 한 줄 더 내려가던 것 */
.mpa_seg { display: inline-flex; border: 1px solid var(--mpa-line-strong); border-radius: 9px; overflow: hidden; }
.mpa_seg button { border: 0; background: transparent; color: var(--mpa-dim); padding: 0 12px; height: 32px; font-size: 13px; cursor: pointer; font-weight: 600; }
.mpa_seg button + button { border-left: 1px solid var(--mpa-line); }
.mpa_seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--mpa-accent-fill) 16%, transparent); color: var(--mpa-accent); }
.mpa_seg button:hover { color: var(--mpa-text); }

/* ── 상태 칩 (계약 §4-4 색) ── */
.mpa_chip {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 5px;
    font-size: 12px; font-weight: 700; white-space: nowrap; line-height: 1;
    color: var(--mpa-gray); background: color-mix(in srgb, var(--mpa-gray) 13%, transparent);
}
.mpa_chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mpa_chip[data-tone="green"] { color: var(--mpa-ok); background: color-mix(in srgb, var(--mpa-ok) 13%, transparent); }
.mpa_chip[data-tone="red"] { color: var(--mpa-crit); background: color-mix(in srgb, var(--mpa-crit) 13%, transparent); }
.mpa_chip[data-tone="orange"] { color: var(--mpa-orange); background: color-mix(in srgb, var(--mpa-orange) 15%, transparent); }
.mpa_chip[data-tone="accent"] { color: var(--mpa-accent); background: color-mix(in srgb, var(--mpa-accent-fill) 16%, transparent); }

/* ── 증감 ── */
.mpa_delta { font-size: 12px; padding: 2px 8px; border-radius: 5px; background: var(--mpa-soft); color: var(--mpa-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mpa_delta[data-tone="good"] { color: var(--mpa-ok); background: color-mix(in srgb, var(--mpa-ok) 12%, transparent); }
.mpa_delta[data-tone="bad"] { color: var(--mpa-crit); background: color-mix(in srgb, var(--mpa-crit) 12%, transparent); }

/* ── 카드 ── */
.mpa_card { background: var(--mpa-card); border: 1px solid var(--mpa-line); border-radius: var(--mpa-radius); padding: 14px 16px; min-width: 0; }
.mpa_card + .mpa_card { margin-top: 12px; }
.mpa_card_head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.mpa_card_head h2 { margin: 0; font-size: 15px; font-weight: 800; flex: 1 1 auto; }
.mpa_card_head h2 small { font-weight: 500; color: var(--mpa-dim); font-size: 12px; margin-left: 6px; }

/* ── 오늘 운영판 ── */
.mpa_kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
@media (max-width: 1100px) { .mpa_kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .mpa_kpis { grid-template-columns: 1fr; } }
mpa-kpi-card { display: block; min-width: 0; }
.mpa_kpi_fallback { background: var(--mpa-card); border: 1px solid var(--mpa-line); border-radius: var(--mpa-radius); padding: 14px 16px; }
.mpa_kpi_label { font-size: 13px; font-weight: 600; color: var(--mpa-dim) !important; }
.mpa_kpi_value { display: block; font-size: 26px; font-weight: 800; margin-top: 4px; }
.mpa_kpi_subs { font-size: 13px; color: var(--mpa-dim); }
.mpa_kpi_deltas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mpa_dash_grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mpa_dash_grid .mpa_card + .mpa_card { margin-top: 0; }
.mpa_card_wide { grid-row: span 2; }
@media (max-width: 1100px) { .mpa_dash_grid { grid-template-columns: 1fr; } .mpa_card_wide { grid-row: auto; } }
.mpa_chart { width: 100%; min-height: 200px; }
/* 자동 새로고침 실패 띠 — «마지막 갱신 n분 전 · 연결 오류». 이전 숫자는 흐리게(지금 값이 아님) */
.mpa_stale {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--mpa-warn) 55%, transparent);
    background: color-mix(in srgb, var(--mpa-warn) 14%, var(--mpa-card)); color: var(--mpa-text); font-size: 14px;
}
.mpa_stale_icon { color: var(--mpa-warn); font-size: 16px; }
.mpa_stale_text { flex: 1 1 240px; }
.mpa_view[data-stale="1"] :is(.mpa_kpis, .mpa_dash_grid) { opacity: .62; }
.mpa_chart .uplot { font-family: var(--mpa-font); color: var(--mpa-text); }
.mpa_chart .u-legend { font-size: 12px; color: var(--mpa-dim); }
.mpa_attention { list-style: none; margin: 0; padding: 0; }
.mpa_attention li + li { border-top: 1px solid var(--mpa-line); }
.mpa_attention a {
    display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-radius: 8px;
    color: var(--mpa-text) !important; text-decoration: none !important;
}
.mpa_attention a:hover { background: var(--mpa-hover); }
.mpa_attention_dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mpa-gray); flex: none; }
.mpa_attention a[data-tone="red"] .mpa_attention_dot { background: var(--mpa-crit); }
.mpa_attention a[data-tone="orange"] .mpa_attention_dot { background: var(--mpa-orange); }
.mpa_attention a[data-tone="accent"] .mpa_attention_dot { background: var(--mpa-accent-fill); }
.mpa_attention_title { flex: 1; font-size: 14px; }
.mpa_attention b { font-size: 18px; }
.mpa_attention a[data-zero="1"] { color: var(--mpa-faint) !important; }
.mpa_attention a[data-zero="1"] .mpa_attention_dot { background: var(--mpa-line-strong); }
.mpa_attention_go { color: var(--mpa-faint); }

/* ── 작은 표 ── */
.mpa_mini_table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mpa_mini_table th { text-align: left; font-weight: 600; color: var(--mpa-dim); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--mpa-line); }
.mpa_mini_table td { padding: 7px 8px; border-bottom: 1px solid var(--mpa-line); }
.mpa_mini_table [data-align="right"] { text-align: right; }
.mpa_mini_table tr:last-child td { border-bottom: 0; }
.mpa_numlink { color: var(--mpa-text) !important; text-decoration: underline dotted var(--mpa-line-strong) !important; text-underline-offset: 3px; }
.mpa_numlink:hover { color: var(--mpa-accent) !important; text-decoration-color: currentColor !important; }

/* ── 필터 바 ── */
.mpa_filters { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 10px; background: var(--mpa-card); border: 1px solid var(--mpa-line); border-radius: var(--mpa-radius); }
.mpa_filter_group { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.mpa_filter_error { color: var(--mpa-crit); font-size: 13px; margin: 0; }
.mpa_filter_chip { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px 0 10px; border-radius: 6px; background: color-mix(in srgb, var(--mpa-accent-fill) 14%, transparent); color: var(--mpa-accent); font-size: 13px; font-weight: 600; }
.mpa_filter_chip button { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 15px; width: 22px; height: 22px; border-radius: 4px; }
.mpa_filter_chip button:hover { background: var(--mpa-soft); }

/* ── 결제 요약 띠(목록 위 칩 — 누르면 그 상태로 목록, 지금 걸린 상태는 강조) ── */
.mpa_sumband { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.mpa_sumband[data-state="loading"] .mpa_sumchip { opacity: .55; }
.mpa_sumband_msg { font-size: 13px; align-self: center; }
.mpa_sumband[data-state="error"] .mpa_sumband_msg { color: var(--mpa-crit); }
.mpa_sumchip {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 112px; padding: 8px 14px;
    border-radius: 8px; border: 1px solid var(--mpa-line); background: var(--mpa-card); color: var(--mpa-text);
    font: inherit; text-align: left; line-height: 1.25;
}
button.mpa_sumchip { cursor: pointer; }
button.mpa_sumchip:hover { border-color: var(--mpa-accent-fill); }
.mpa_sumchip[aria-pressed="true"] { border-color: var(--mpa-focus); box-shadow: inset 0 0 0 1px var(--mpa-focus); background: color-mix(in srgb, var(--mpa-accent-fill) 12%, var(--mpa-card)); }
/* 카드 타이틀 13.5px(종전 12px — 실화면에서 너무 작았음) · 숫자 18px 로 위계 유지 */
.mpa_sumchip_label { font-size: 13.5px; font-weight: 700; color: var(--mpa-dim); white-space: nowrap; }
.mpa_sumchip[aria-pressed="true"] .mpa_sumchip_label { color: var(--mpa-accent); }
.mpa_sumchip b { font-size: 18px; font-weight: 800; white-space: nowrap; letter-spacing: -.3px; }
.mpa_sumchip_amt { font-size: 12.5px; color: var(--mpa-dim); white-space: nowrap; }
.mpa_sumchip_static { background: var(--mpa-soft); }
.mpa_sumchip_static .mpa_sumchip_amt { font-size: 18px; font-weight: 800; color: var(--mpa-text); letter-spacing: -.3px; }
@media (max-width: 720px) {
    .mpa_sumband { gap: 6px; }
    .mpa_sumchip { min-width: 0; flex: 1 1 calc(33% - 6px); padding: 6px 9px; }
    .mpa_sumchip_label { font-size: 13px; }
    .mpa_sumchip b, .mpa_sumchip_static .mpa_sumchip_amt { font-size: 16px; }
}

/* ── 목록 표(MpaGrid) ── */
.mpa_grid_host { background: var(--mpa-card); border: 1px solid var(--mpa-line); border-radius: var(--mpa-radius); overflow: hidden; }
.mpa_grid_tools { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--mpa-line); position: relative; }
.mpa_grid_caption { font-size: 12px; color: var(--mpa-dim); font-weight: 600; }
.mpa_grid_spacer { flex: 1; }
.mpa_grid_cols_btn { height: 26px; font-size: 12px; }
.mpa_grid_cols_menu {
    position: absolute; right: 10px; top: 34px; z-index: 20; display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px; border-radius: 10px; background: var(--mpa-card); border: 1px solid var(--mpa-line-strong); box-shadow: var(--mpa-shadow);
    font-size: 13px; min-width: 160px;
}
.mpa_grid_cols_menu label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mpa_grid_scroll { overflow: auto; max-height: calc(100dvh - 300px); min-height: 160px; outline: none; }
.mpa_grid_scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--mpa-focus); }
.mpa_grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.mpa_grid th {
    position: sticky; top: 0; z-index: 2; background: var(--mpa-card);
    text-align: left; font-weight: 700; font-size: 12px; color: var(--mpa-dim);
    padding: 7px 10px; border-bottom: 1px solid var(--mpa-line-strong); white-space: nowrap; user-select: none;
}
.mpa_grid th[data-sort-key] { cursor: pointer; }
.mpa_grid th[data-sort-key]:hover { color: var(--mpa-text); }
.mpa_grid th[aria-sort="ascending"], .mpa_grid th[aria-sort="descending"] { color: var(--mpa-accent); }
.mpa_grid td { padding: 6px 10px; border-bottom: 1px solid var(--mpa-line); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.mpa_grid [data-align="right"] { text-align: right; }
/* 가맹점 목록: 데스크톱에서 열 폭을 고정해 가로 넘침 없이(긴 이름은 말줄임). 보조 열은 기본 숨김(«열» 메뉴). */
@media (min-width: 721px) { .mpa_store_grid .mpa_grid { table-layout: fixed; } }
.mpa_grid tbody tr { cursor: pointer; }
.mpa_grid tbody tr:hover td { background: var(--mpa-hover); }
/* 키보드 커서(활성 행) — 포커스 색 2px(라이트 #a8500a 5.5:1 · 다크 #ff8a00 7.3:1) */
.mpa_grid tbody tr[data-active="1"] td { box-shadow: inset 0 2px 0 var(--mpa-focus), inset 0 -2px 0 var(--mpa-focus); }
.mpa_grid tbody tr[data-active="1"] td:first-child { box-shadow: inset 4px 0 0 var(--mpa-focus), inset 0 2px 0 var(--mpa-focus), inset 0 -2px 0 var(--mpa-focus); }
.mpa_grid tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--mpa-accent-fill) 12%, transparent); }
.mpa_grid_state { padding: 28px 16px; text-align: center; color: var(--mpa-dim); font-size: 14px; }
.mpa_grid_state[data-kind="error"] { color: var(--mpa-crit); }
.mpa_grid_state[data-kind="refused"] { color: var(--mpa-warn); }
.mpa_grid_state p { margin: 0 0 10px; }
.mpa_grid_busy .mpa_grid tbody { opacity: .55; transition: opacity .15s; }
.mpa_pii { font-variant-numeric: tabular-nums; }
.mpa_pii[data-revealed="1"] .mpa_pii_val { background: color-mix(in srgb, var(--mpa-warn) 18%, transparent); padding: 0 4px; border-radius: 4px; }

/* 좁은 화면 — 목록을 카드형으로 */
@media (max-width: 720px) {
    .mpa_grid[data-card-mode="1"] thead { display: none; }
    .mpa_grid[data-card-mode="1"], .mpa_grid[data-card-mode="1"] tbody { display: block; }
    .mpa_grid[data-card-mode="1"] tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 12px; border-bottom: 1px solid var(--mpa-line); }
    .mpa_grid[data-card-mode="1"] td { display: block; border: 0; padding: 0; max-width: none; background: transparent !important; box-shadow: none !important; }
    .mpa_grid[data-card-mode="1"] td[data-mobile="title"] { order: 1; flex: 1 1 calc(100% - 140px); min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; }
    .mpa_grid[data-card-mode="1"] td[data-mobile="amount"] { order: 2; flex: 0 0 auto; margin-left: auto; font-weight: 800; font-size: 15px; }
    .mpa_grid[data-card-mode="1"] td[data-mobile="status"] { order: 3; flex: 0 0 auto; }
    .mpa_grid[data-card-mode="1"] td[data-mobile="meta"] { order: 4; flex: 0 1 auto; font-size: 12px; color: var(--mpa-dim); }
    .mpa_grid[data-card-mode="1"] td[data-mobile="meta"]::before { content: attr(data-label) " "; color: var(--mpa-faint); }
    .mpa_grid[data-card-mode="1"] td[data-mobile="hide"] { display: none; }
    .mpa_grid[data-card-mode="1"] tr[data-active="1"] { box-shadow: inset 4px 0 0 var(--mpa-focus); }
    .mpa_grid[data-card-mode="1"] tr[aria-selected="true"] { background: color-mix(in srgb, var(--mpa-accent-fill) 12%, transparent); }
    .mpa_grid_scroll { max-height: none; }
    .mpa_filters .mpa_field_inline { flex: 1 1 100%; }
    .mpa_filters .mpa_field_inline input, .mpa_filters .mpa_field_inline select { flex: 1; }
}

/* ── 페이지 넘김 ── */
.mpa_pager { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 10px 2px; font-size: 13px; color: var(--mpa-dim); }
.mpa_pager_info { flex: 1 1 auto; }
.mpa_pager_info b { color: var(--mpa-text); }
.mpa_pager_nav { display: inline-flex; align-items: center; gap: 4px; }
.mpa_pager_nav .mpa_btn { height: 30px; min-width: 32px; padding: 0 8px; }
.mpa_pager_size select { height: 30px; border-radius: 8px; border: 1px solid var(--mpa-line-strong); background: var(--mpa-card); color: var(--mpa-text); margin-left: 4px; }

/* ── 목록 + 우측 상세 패널 ── */
.mpa_split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.mpa_split_main { min-width: 0; }
@media (min-width: 1101px) {
    .mpa_split[data-panel="1"] { grid-template-columns: minmax(0, 1fr) minmax(380px, 38%); }
    .mpa_split_wide[data-panel="1"] { grid-template-columns: minmax(0, 1fr) minmax(420px, 46%); }
    .mpa_panel {
        position: sticky; top: calc(var(--top-pad, 60px) + 8px);
        max-height: calc(100dvh - var(--top-pad, 60px) - var(--bottom-pad, 60px) - 24px); overflow: auto;
    }
}
.mpa_panel { background: var(--mpa-card); border: 1px solid var(--mpa-line); border-radius: var(--mpa-radius); box-shadow: var(--mpa-shadow); }
@media (max-width: 1100px) {
    /* 좁은 화면 — 패널을 전체 화면 시트로(목록은 뒤에 그대로 남아 닫으면 제자리) */
    .mpa_panel {
        position: fixed; inset: 0; z-index: 900; border-radius: 0; border: 0; overflow: auto;
        overscroll-behavior: contain;   /* 시트 끝까지 굴려도 뒤 목록이 따라 움직이지 않게(배경 스크롤 잠금) */
        padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 레이어 순서 — 시트는 main#staticDoc 안에 있고, EstreUI 의 «body > main{position:fixed}» 때문에 staticDoc 이 독립된
       쌓임 영역이에요. 그래서 시트의 z-index 900 은 그 안에서만 통하고, 바깥의 앱바(header#fixedTop 130)·상단 스와이프
       띠(section#panelTrigger 135)·하단 탭(footer#fixedBottom 110)이 시트를 덮었어요(✕ 를 누르면 앱바의 로고가 눌려 운영판으로
       이동). 시트가 열린 동안에는 staticDoc 자체를 그 셋보다 위(140)로 올려요. 알림 띠(1200)·검색(1500)·확인창(1800)·
       로그인(2000)·토스트(2100)는 여전히 시트 위예요. */
    body.mpa_sheet_open main#staticDoc { z-index: 140; }
}
.mpa_panel_head { position: sticky; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--mpa-card); border-bottom: 1px solid var(--mpa-line); }
.mpa_panel_head h2 { margin: 0 0 2px; font-size: 16px; font-weight: 800; }
.mpa_panel_head > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.mpa_panel_close { width: 34px; padding: 0; flex: none; }
.mpa_panel_body { padding: 12px 16px 20px; }
.mpa_panel_body section { padding: 12px 0; border-top: 1px solid var(--mpa-line); }
.mpa_panel_body h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--mpa-dim); }
.mpa_panel_body h3 small { font-weight: 500; }
.mpa_panel_foot { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--mpa-line); }
.mpa_panel > .mpa_loading, .mpa_panel > .mpa_error { margin: 14px; }
.mpa_hero { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0 14px; }
.mpa_hero_amount { font-size: 28px; font-weight: 800; letter-spacing: -.5px; }
.mpa_hero_title { font-size: 20px; font-weight: 800; }
.mpa_hero_meta { flex: 1 1 100%; font-size: 13px; color: var(--mpa-dim); }
.mpa_dl { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 13px; }
.mpa_dl dt { color: var(--mpa-dim); }
.mpa_dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.mpa_timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--mpa-line-strong); }
.mpa_timeline li { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; font-size: 13px; }
.mpa_timeline li::before { content: ""; position: absolute; left: -20px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--mpa-card); border: 2px solid var(--mpa-accent-fill); }
.mpa_kpi_row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-bottom: 12px; }
.mpa_kpi_mini { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--mpa-soft); min-width: 0; }
.mpa_kpi_mini > span { font-size: 12px; color: var(--mpa-dim); font-weight: 600; }
.mpa_kpi_mini > a { font-size: 18px; font-weight: 800; }
.mpa_kpi_mini small { font-size: 12px; }
.mpa_kpi_main { background: color-mix(in srgb, var(--mpa-accent-fill) 10%, var(--mpa-soft)); }
.mpa_kpi_main > a { font-size: 20px; }
.mpa_kpi_mini small .mpa_numlink { white-space: nowrap; }
@media (max-width: 480px) { .mpa_kpi_row { grid-template-columns: 1fr; } }

/* ── 목록 화면 고정 배치(결제·가맹점 — staticDoc.html 의 article.mpa_page_fill) ──
   종전에는 페이지(article)도 굴러가고 목록(.mpa_grid_scroll, max-height 100dvh-300px)도 굴러가서 스크롤이 두 겹이었어요.
   이제 화면 높이에 맞춰: 머리·필터·요약 띠·표 머리는 그 자리, 목록 본문만 굴러가고, 페이지 바는 맨 아래, 우측 상세 패널은 자체 스크롤.
   좁은 화면(≤720px, 카드형 목록)·낮은 화면(높이 <560px)은 고정할 자리가 모자라서 반대로 «목록을 다 펼치고 페이지 스크롤 하나» —
   페이지 바만 하단 탭 위에 붙여 둬요. */
@media (min-width: 721px) and (min-height: 560px) {
    main#staticDoc > section > div.container > article.fwvs.mpa_page_fill:not(.mpa_fill_off) { overflow: hidden; }
    .mpa_page_fill:not(.mpa_fill_off) > .mpa_view { height: 100%; display: flex; flex-direction: column; padding-bottom: 8px; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_view > :is(.mpa_head, .mpa_filters, .mpa_sumband) { flex: none; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_split { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_split_main { display: flex; flex-direction: column; min-height: 0; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_grid_host { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_grid_tools { flex: none; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_grid_scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
    .mpa_page_fill:not(.mpa_fill_off) .mpa_pager { flex: none; padding-bottom: 2px; }
}
@media (min-width: 1101px) and (min-height: 560px) {
    .mpa_page_fill:not(.mpa_fill_off) .mpa_panel { position: relative; top: auto; height: 100%; max-height: none; min-height: 0; overflow: auto; overscroll-behavior: contain; }
}
/* 펼침 방식 — 좁은·낮은 화면(미디어)이거나, 고정 배치로는 목록이 200px 도 안 남을 때(mpa-app.js fitPageFill 이 mpa_fill_off 를 붙임 —
   필터·요약 띠가 여러 줄로 접히는 폭 ≈720~900px 에서 목록 높이가 0 까지 줄던 것) */
@media (max-width: 720px), (max-height: 559px) {
    .mpa_page_fill .mpa_grid_scroll { max-height: none; min-height: 0; }
    .mpa_page_fill .mpa_pager {
        position: sticky; bottom: 0; z-index: 4; margin: 0 -2px; padding: 8px 4px;   /* 스크롤 영역(article)의 아래 여백 = 하단 탭 높이라 0 이면 탭 바로 위 */
        background: var(--mpa-bg); border-top: 1px solid var(--mpa-line); gap: 6px 10px;
    }
}
.mpa_page_fill.mpa_fill_off .mpa_grid_scroll { max-height: none; min-height: 0; }
.mpa_page_fill.mpa_fill_off .mpa_pager {
    position: sticky; bottom: 0; z-index: 4; margin: 0 -2px; padding: 8px 4px;
    background: var(--mpa-bg); border-top: 1px solid var(--mpa-line); gap: 6px 10px;
}

/* ── 기기·보안 ── */
.mpa_approvals_card { border-color: color-mix(in srgb, var(--mpa-accent-fill) 45%, var(--mpa-line)); }
.mpa_warn_line { font-size: 13px; color: var(--mpa-orange); margin: 0 0 8px; }
.mpa_approval_item { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--mpa-line); }
.mpa_approval_item[data-expired="1"] { opacity: .5; }
.mpa_approval_info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; min-width: 0; font-size: 13px; }
.mpa_approval_info b { font-size: 15px; }
.mpa_approval_label { font-size: 12px; color: var(--mpa-dim); overflow-wrap: anywhere; }
.mpa_phish_line {
    font-size: 13px; margin: 0 0 8px; padding: 8px 10px; border-radius: 8px;
    background: color-mix(in srgb, var(--mpa-warn) 12%, transparent); color: var(--mpa-text);
}
.mpa_ua { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mpa_code_input { width: 9.5ch; font-family: var(--mpa-mono) !important; font-size: 18px !important; letter-spacing: 4px; text-align: center; }
.mpa_approval_btns { display: flex; gap: 6px; }
.mpa_approval_err { flex: 1 1 100%; margin: 0; color: var(--mpa-crit); font-size: 13px; }
.mpa_device_list { list-style: none; margin: 0; padding: 0; }
.mpa_device_list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--mpa-line); }
.mpa_device_list li:first-child { border-top: 0; }
.mpa_device_list li[data-revoked="1"] { opacity: .55; }
.mpa_device_main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1 1 100%; }
.mpa_device_meta { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12px; flex: 1 1 auto; }
.mpa_device_actions { margin-left: auto; }
.mpa_danger_zone { border-color: color-mix(in srgb, var(--mpa-crit) 35%, var(--mpa-line)); }
.mpa_danger_zone p { font-size: 13px; color: var(--mpa-dim); margin: 0 0 10px; }
.mpa_keys td { padding: 8px; }

/* ── 로그인 · 승인 대기 ── */
.mpa_auth {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow: auto; background: var(--mpa-bg);
    background-image: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--mpa-accent-fill) 14%, transparent), transparent 45%);
}
.mpa_auth[hidden] { display: none; }
.mpa_auth_card {
    width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px;
    padding: 28px 26px; border-radius: 12px; background: var(--mpa-card); border: 1px solid var(--mpa-line); box-shadow: var(--mpa-shadow);
}
.mpa_auth_brand { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.mpa_auth_brand .mpa_logo { height: 40px; }
.mpa_auth_brand .mpa_app_icon { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--mpa-line); flex: none; }
.mpa_auth_card:not(.mpa_approval) .mpa_auth_brand > div { padding-left: 12px; border-left: 1px solid var(--mpa-line-strong); }
.mpa_auth_brand div { display: flex; flex-direction: column; }
.mpa_auth_brand strong { font-size: 19px; font-weight: 800; }
.mpa_auth_brand span { font-size: 13px; color: var(--mpa-dim); }
.mpa_auth_card .mpa_field input { height: 44px; font-size: 16px; }
.mpa_auth_msg { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: var(--mpa-soft); }
.mpa_auth_msg[data-tone="warn"] { background: color-mix(in srgb, var(--mpa-warn) 14%, transparent); color: var(--mpa-warn); }
.mpa_auth_msg[data-tone="error"] { background: color-mix(in srgb, var(--mpa-crit) 12%, transparent); color: var(--mpa-crit); }
.mpa_auth_error { margin: 0; color: var(--mpa-crit); font-size: 13px; }
.mpa_auth_note { margin: 0; font-size: 12px; color: var(--mpa-dim); line-height: 1.6; }
.mpa_auth_more summary { cursor: pointer; font-size: 13px; color: var(--mpa-dim); }
.mpa_auth_more .mpa_field { margin-top: 8px; }
.mpa_approval { width: min(480px, 100%); text-align: center; }
.mpa_approval .mpa_auth_brand { text-align: left; }
.mpa_approval_lead { margin: 0; font-size: 14px; line-height: 1.6; }
.mpa_approval_code { display: flex; justify-content: center; gap: clamp(6px, 2vw, 12px); margin: 8px 0; }
.mpa_approval_code span {
    width: clamp(40px, 12vw, 58px); height: clamp(56px, 16vw, 76px); display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: color-mix(in srgb, var(--mpa-accent-fill) 12%, var(--mpa-card));
    border: 1px solid color-mix(in srgb, var(--mpa-accent-fill) 45%, transparent);
    font-family: var(--mpa-mono); font-size: clamp(30px, 9vw, 44px); font-weight: 800; color: var(--mpa-text);
}
.mpa_approval_timer { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--mpa-dim); }
.mpa_approval_left { font-size: 20px; font-weight: 800; color: var(--mpa-text); }
.mpa_approval_timer[data-urgent="1"] .mpa_approval_left { color: var(--mpa-crit); }
.mpa_approval_bar { flex: 1 1 100%; height: 6px; border-radius: 3px; background: var(--mpa-soft); overflow: hidden; }
.mpa_approval_bar i { display: block; height: 100%; width: 100%; background: var(--mpa-accent-fill); transition: width .25s linear; }
.mpa_approval_status { margin: 0; font-size: 14px; color: var(--mpa-dim); }
.mpa_approval_actions { display: flex; justify-content: center; }
body.mpa_auth_open { overflow: hidden; }

/* ── 전역 검색 팔레트 ── */
.mpa_palette { position: fixed; inset: 0; z-index: 1500; }
.mpa_palette[hidden] { display: none; }
.mpa_palette_scrim { position: absolute; inset: 0; background: var(--mpa-scrim); }
.mpa_palette_box {
    position: relative; margin: min(12vh, 100px) auto 0; width: min(680px, calc(100% - 24px)); max-height: 70vh;
    display: flex; flex-direction: column; border-radius: 14px; background: var(--mpa-card); box-shadow: var(--mpa-shadow); overflow: hidden;
}
.mpa_palette_input { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--mpa-line); font-size: 18px; color: var(--mpa-dim); }
.mpa_palette_input input { flex: 1; border: 0; outline: none; background: transparent; color: var(--mpa-text); font-size: 17px; min-width: 0; }
.mpa_palette_hint { margin: 0; padding: 6px 14px; font-size: 12px; color: var(--mpa-faint); border-bottom: 1px solid var(--mpa-line); }
.mpa_palette_list { overflow: auto; padding: 6px; }
.mpa_palette_state { margin: 0; padding: 18px 10px; text-align: center; color: var(--mpa-dim); font-size: 14px; }
.mpa_palette_state:is([data-kind="phone"], [data-kind="badnum"]) { color: var(--mpa-warn); }
.mpa_palette_group h3 { margin: 8px 8px 4px; font-size: 11px; font-weight: 800; color: var(--mpa-faint); letter-spacing: .5px; }
.mpa_palette_item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 10px; border-radius: 0 8px 8px 0;
    color: var(--mpa-text); text-decoration: none; font-size: 14px;
}
.mpa_palette_item[aria-selected="true"], .mpa_palette_item:hover { background: var(--mpa-hover); box-shadow: inset 3px 0 0 var(--mpa-accent-fill); }
@media (max-width: 720px) { .mpa_palette_box { margin-top: 8px; max-height: calc(100dvh - 16px); } }

/* ── 상단 알림 띠 ── */
.mpa_bands { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + var(--appbar-height, 56px) + 6px); /* 앱바(검색·메뉴·벨) 밑으로 */ z-index: 1200; display: flex; flex-direction: column; gap: 6px; width: min(760px, calc(100% - 16px)); pointer-events: none; }
.mpa_band {
    pointer-events: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 12px; border-radius: 10px; font-size: 14px; box-shadow: var(--mpa-shadow);
    background: var(--mpa-card); border: 1px solid var(--mpa-line-strong);
}
.mpa_band[data-tone="accent"] { border-color: var(--mpa-accent-fill); background: color-mix(in srgb, var(--mpa-accent-fill) 14%, var(--mpa-card)); }
.mpa_band_text { flex: 1 1 240px; }
.mpa_band_actions { display: flex; gap: 6px; }
.mpa_band_close { border: 0; background: transparent; color: var(--mpa-dim); cursor: pointer; font-size: 14px; width: 26px; height: 26px; border-radius: 6px; }
.mpa_band_close:hover { background: var(--mpa-soft); }

/* ── 토스트 ── */
.mpa_toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 2100; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; width: min(560px, calc(100% - 24px)); }
.mpa_toast_item {
    padding: 10px 16px; border-radius: 12px; font-size: 14px; color: #fff; background: rgba(29, 33, 40, .92);
    box-shadow: var(--mpa-shadow); transition: opacity .3s, transform .3s; text-align: center;
}
body[data-dark-mode="1"] .mpa_toast_item { background: rgba(240, 242, 245, .95); color: #1d2128; }
.mpa_toast_item[data-tone="error"] { background: var(--mpa-crit-fill); color: #fff; }
.mpa_toast_item[data-tone="warn"] { background: #7a4f00; color: #fff; }
.mpa_toast_item[data-out="1"] { opacity: 0; transform: translateY(6px); }

/* ── 확인창 ── */
.mpa_modal { position: fixed; inset: 0; z-index: 1800; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mpa_modal_scrim { position: absolute; inset: 0; background: var(--mpa-scrim); }
.mpa_modal_box { position: relative; width: min(440px, 100%); padding: 20px 22px; border-radius: 12px; background: var(--mpa-card); box-shadow: var(--mpa-shadow); }
.mpa_modal_box h2 { margin: 0 0 8px; font-size: 17px; font-weight: 800; }
.mpa_modal_body { font-size: 14px; line-height: 1.6; color: var(--mpa-dim); }
.mpa_modal_actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ── 목업 표시 ── */
.mpa_mock_tag {
    position: fixed; left: 8px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); z-index: 2200; pointer-events: none;
    padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: repeating-linear-gradient(45deg, #ffcf33, #ffcf33 8px, #1d2128 8px, #1d2128 16px); color: #fff;
    text-shadow: 0 0 3px #000;
}
.mpa_noscript { padding: 24px; text-align: center; }

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* EstreUI 림이 못 떴을 때의 대체 자리(mpa-app.js fallbackView) — 평소에는 생기지 않아요 */
.mpa_fallback_root { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }