/*
 * 댕스카우트 스페이스 업주 포털 — MUI(Material UI) 모양을 평범한 CSS 로 옮긴 디자인 시스템.
 * 토큰은 MUI theme 이름을 따른다(palette.primary.main → --primary-main).
 * 클래스는 sa- 접두어 + MUI 컴포넌트 이름(.sa-card, .sa-btn--contained, .sa-chip ...).
 */
:root {
    /* palette */
    --primary-main: #5D351A;
    --primary-light: #8A5E40;
    --primary-dark: #3E2210;
    --primary-contrast: #FFFFFF;
    --primary-hover: rgba(93, 53, 26, .04);
    --primary-selected: rgba(93, 53, 26, .08);
    --primary-focus: rgba(93, 53, 26, .12);
    --primary-outline: rgba(93, 53, 26, .5);
    --secondary-main: #A36304;
    --secondary-selected: rgba(163, 99, 4, .1);

    --success-main: #2E7D32;
    --warning-main: #ED6C02;
    --error-main: #D32F2F;
    --info-main: #0288D1;
    /* MUI standard Alert 배경 · 글자 */
    --success-bg: #EDF7ED; --success-text: #1E4620;
    --warning-bg: #FFF4E5; --warning-text: #663C00;
    --error-bg: #FDEDED;   --error-text: #5F2120;
    --info-bg: #E5F6FD;    --info-text: #014361;

    --bg-default: #F5F6F8;
    --bg-paper: #FFFFFF;
    --text-primary: rgba(0, 0, 0, .87);
    --text-secondary: rgba(0, 0, 0, .6);
    --text-disabled: rgba(0, 0, 0, .38);
    --divider: rgba(0, 0, 0, .12);
    --action-hover: rgba(0, 0, 0, .04);
    --action-disabled-bg: rgba(0, 0, 0, .12);
    --outline-input: rgba(0, 0, 0, .23);

    /* shape · elevation (MUI shadows[n] 그대로) */
    --radius: 8px;
    --elev-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --elev-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    --elev-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    --elev-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    --elev-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    --elev-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);

    /* motion (MUI transitions) */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);

    --font: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    --drawer-w: 240px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: .00938em;
    color: var(--text-primary); background: var(--bg-default);
    -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--primary-main); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary-main); outline-offset: 2px; }
[hidden] { display: none !important; }
.sa-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 아이콘: Material Symbols Outlined */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
    font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none;
    display: inline-block; white-space: nowrap; direction: ltr; flex-shrink: 0;
    width: 1em; height: 1em; overflow: hidden;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
    user-select: none;
}
.sa-icon--fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sa-icon--sm { font-size: 20px; }

/* 타이포그래피 (MUI variant) */
.sa-h4 { font-size: 34px; font-weight: 400; line-height: 1.235; letter-spacing: .00735em; margin: 0; }
.sa-h5 { font-size: 24px; font-weight: 400; line-height: 1.334; margin: 0; }
.sa-h6 { font-size: 20px; font-weight: 500; line-height: 1.6; letter-spacing: .0075em; margin: 0; }
.sa-subtitle1 { font-size: 16px; font-weight: 400; line-height: 1.75; margin: 0; }
.sa-subtitle2 { font-size: 14px; font-weight: 500; line-height: 1.57; letter-spacing: .00714em; margin: 0; }
.sa-body1 { font-size: 16px; line-height: 1.5; margin: 0; }
.sa-body2 { font-size: 14px; line-height: 1.43; letter-spacing: .01071em; margin: 0; }
.sa-caption { font-size: 12px; line-height: 1.66; letter-spacing: .03333em; color: var(--text-secondary); margin: 0; }
.sa-text-secondary { color: var(--text-secondary); }
.sa-num { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }

/* ---------- 레이아웃: AppBar · Drawer ---------- */
.sa-layout { min-height: 100vh; }
.sa-appbar { display: none; }
.sa-drawer {
    position: fixed; inset: 0 auto 0 0; width: var(--drawer-w); z-index: 1200;
    display: flex; flex-direction: column; background: var(--bg-paper);
    border-right: 1px solid var(--divider); overflow-y: auto;
}
.sa-drawer__head { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; }
.sa-drawer__brand { min-width: 0; }
.sa-drawer__brand .sa-caption { display: block; }
.sa-drawer__store { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--text-primary); overflow-wrap: anywhere; }
.sa-divider { height: 1px; margin: 0; border: 0; background: var(--divider); }
.sa-backdrop {
    position: fixed; inset: 0; z-index: 1150; background: rgba(0, 0, 0, .5);
    opacity: 0; visibility: hidden; transition: opacity 225ms var(--ease), visibility 0s linear 225ms;
}
.sa-main { margin-left: var(--drawer-w); padding: 32px 32px 48px; }
.sa-container { max-width: 1040px; margin: 0 auto; }

/* 내비 List */
.sa-nav { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sa-nav__item {
    display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 8px 12px;
    border-radius: var(--radius); color: var(--text-primary); font-size: 14px; line-height: 1.43;
    transition: background-color 150ms var(--ease);
}
.sa-nav__item:focus-visible { outline-offset: -2px; }
.sa-nav__item:hover { background: var(--action-hover); text-decoration: none; }
.sa-nav__item .material-symbols-outlined { color: var(--text-secondary); font-size: 22px; }
.sa-nav__item.is-selected { background: var(--primary-selected); color: var(--primary-main); font-weight: 500; }
.sa-nav__item.is-selected .material-symbols-outlined { color: var(--primary-main); font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sa-nav__item.is-selected:hover { background: var(--primary-focus); }
.sa-nav .sa-divider { margin: 8px 4px; }

@media (max-width: 959px) {
    .sa-appbar {
        display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1100;
        min-height: 56px; padding: 0 8px 0 4px; background: var(--primary-main); color: var(--primary-contrast);
        box-shadow: var(--elev-4);
    }
    .sa-appbar .sa-iconbtn { color: inherit; }
    .sa-appbar .sa-iconbtn:hover { background: rgba(255, 255, 255, .12); }
    .sa-appbar__title { font-size: 18px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .sa-drawer {
        width: min(280px, 85vw); border-right: 0; box-shadow: var(--elev-24);
        transform: translateX(-105%); visibility: hidden;
        transition: transform 225ms var(--ease-out), visibility 0s linear 225ms;
    }
    .sa-layout.is-open .sa-drawer { transform: none; visibility: visible; transition: transform 225ms var(--ease-out), visibility 0s; }
    .sa-layout.is-open .sa-backdrop { opacity: 1; visibility: visible; transition: opacity 225ms var(--ease), visibility 0s; }
    .sa-main { margin-left: 0; padding: 16px 16px 40px; }
}

/* 페이지 머리 */
.sa-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sa-page-head__title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; }
.sa-page-head .sa-caption { flex-basis: 100%; margin-top: -8px; }
@media (max-width: 599px) { .sa-page-head { margin-bottom: 16px; } }

/* ---------- Paper · Card ---------- */
.sa-paper { background: var(--bg-paper); border-radius: var(--radius); box-shadow: var(--elev-1); }
.sa-paper--e2 { box-shadow: var(--elev-2); }
.sa-card { background: var(--bg-paper); border-radius: var(--radius); box-shadow: var(--elev-1); overflow: hidden; }
.sa-card + .sa-card, .sa-stack > * + * { margin-top: 16px; }
.sa-card__header { display: flex; align-items: center; gap: 16px; padding: 16px 16px 0; }
.sa-card__header .sa-h6 { font-size: 18px; }
.sa-card__content { padding: 16px; }
.sa-card__content:last-child { padding-bottom: 24px; }
.sa-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 8px 16px 16px; }
.sa-card__actions--start { justify-content: flex-start; padding-left: 8px; }
.sa-card--outlined { box-shadow: none; border: 1px solid var(--divider); }
.sa-card--error { box-shadow: none; border: 1px solid rgba(211, 47, 47, .5); }
.sa-grid { display: grid; gap: 16px; }
.sa-grid > .sa-card, .sa-report-tiles > .sa-card { margin-top: 0; }
.sa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 959px) { .sa-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sa-grid--2 { grid-template-columns: minmax(0, 1fr); } }
.sa-narrow { max-width: 560px; }
.sa-mt { margin-top: 16px; }
.sa-mt-lg { margin-top: 24px; }

/* ---------- Button ---------- */
.sa-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; position: relative;
    min-width: 64px; min-height: 36px; padding: 6px 16px; border: 0; border-radius: var(--radius);
    font-size: 14px; font-weight: 500; line-height: 1.75; letter-spacing: .02857em; text-transform: none;
    background: transparent; color: var(--primary-main); cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease), border-color 250ms var(--ease), transform 100ms var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.sa-btn:hover { text-decoration: none; background: var(--primary-hover); }
.sa-btn:active:not(:disabled) { transform: scale(.98); }
.sa-btn .material-symbols-outlined { font-size: 20px; margin: 0 -2px; }
.sa-btn--contained { background: var(--primary-main); color: var(--primary-contrast); box-shadow: var(--elev-2); }
.sa-btn--contained:hover { background: var(--primary-dark); box-shadow: var(--elev-4); }
.sa-btn--contained:active:not(:disabled) { box-shadow: var(--elev-8); }
.sa-btn--outlined { border: 1px solid var(--primary-outline); padding: 5px 15px; }
.sa-btn--outlined:hover { border-color: var(--primary-main); background: var(--primary-hover); }
.sa-btn--large { min-height: 42px; padding: 8px 22px; font-size: 15px; }
.sa-btn--full { width: 100%; }
.sa-btn--error { color: var(--error-main); }
.sa-btn--error.sa-btn--contained { background: var(--error-main); color: #fff; }
.sa-btn--error.sa-btn--contained:hover { background: #C62828; }
.sa-btn:disabled, .sa-btn.is-disabled {
    color: var(--text-disabled); cursor: default; pointer-events: none; box-shadow: none;
}
.sa-btn--contained:disabled, .sa-btn--contained.is-disabled { background: var(--action-disabled-bg); color: var(--text-disabled); }
.sa-btn--outlined:disabled, .sa-btn--outlined.is-disabled { border-color: var(--action-disabled-bg); }
.sa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sa-actions > .sa-input { width: auto; }

/* IconButton */
.sa-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    transition: background-color 150ms var(--ease);
}
.sa-iconbtn:hover { background: var(--action-hover); text-decoration: none; }
.sa-iconbtn:active:not(:disabled) { background: rgba(0, 0, 0, .1); }
.sa-iconbtn--primary { color: var(--primary-main); }
.sa-iconbtn:disabled, .sa-iconbtn.is-disabled { color: var(--text-disabled); cursor: default; pointer-events: none; }

/* ---------- TextField (outlined, 고정 라벨) ---------- */
.sa-field { margin-bottom: 20px; }
.sa-field:last-child { margin-bottom: 0; }
.sa-field__label { display: block; font-size: 14px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.sa-field:focus-within .sa-field__label { color: var(--primary-main); }
.sa-input {
    display: flex; align-items: center; width: 100%; min-height: 48px;
    border: 1px solid var(--outline-input); border-radius: var(--radius); background: var(--bg-paper);
    transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.sa-input:hover { border-color: var(--text-primary); }
.sa-input:focus-within { border-color: var(--primary-main); box-shadow: inset 0 0 0 1px var(--primary-main); }
.sa-input input, .sa-input textarea, .sa-input select {
    flex: 1 1 auto; min-width: 0; width: 100%; padding: 12px 14px; border: 0; background: transparent;
    font-size: 16px; line-height: 1.5; outline: none; border-radius: var(--radius);
}
.sa-input textarea { resize: vertical; min-height: 112px; }
.sa-input select { appearance: none; padding-right: 36px; cursor: pointer; }
.sa-input--select { position: relative; }
.sa-input--select::after {
    content: ''; position: absolute; right: 14px; top: 50%; width: 0; height: 0; pointer-events: none;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-secondary); margin-top: -2px;
}
.sa-input--dense { min-height: 40px; }
.sa-input--dense input, .sa-input--dense select { padding-top: 7px; padding-bottom: 7px; font-size: 15px; }
.sa-input--readonly { background: var(--bg-default); }
.sa-input--readonly:hover { border-color: var(--outline-input); }
.sa-input__adorn { padding: 0 14px 0 4px; color: var(--text-secondary); font-size: 15px; white-space: nowrap; }
.sa-input__adorn--btn { padding: 0 4px; }
.sa-field__helper { display: flex; justify-content: space-between; gap: 12px; margin: 4px 14px 0; font-size: 12px; line-height: 1.66; letter-spacing: .03333em; color: var(--text-secondary); }
.sa-field__helper .sa-num { margin-left: auto; white-space: nowrap; }

/* ---------- Checkbox ---------- */
.sa-checkbox {
    appearance: none; -webkit-appearance: none; margin: 0; flex-shrink: 0; position: relative;
    width: 18px; height: 18px; border: 2px solid var(--text-secondary); border-radius: 2px; background: transparent;
    cursor: pointer; transition: background-color 120ms var(--ease), border-color 120ms var(--ease);
}
.sa-checkbox::after {
    content: ''; position: absolute; left: 4px; top: 0; width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transform-origin: 60% 60%;
    transition: transform 140ms var(--ease-out);
}
.sa-checkbox:checked { background: var(--primary-main); border-color: var(--primary-main); }
.sa-checkbox:checked::after { transform: rotate(45deg) scale(1); }
.sa-checkbox-hit { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; transition: background-color 150ms var(--ease); }

/* ---------- Switch ---------- */
.sa-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 0; cursor: pointer; }
.sa-switch-row__text { min-width: 0; }
.sa-switch-row__text > span { display: block; }
.sa-switch {
    appearance: none; -webkit-appearance: none; margin: 0 4px; flex-shrink: 0; position: relative; cursor: pointer;
    width: 36px; height: 14px; border-radius: 7px; background: rgba(0, 0, 0, .38);
    transition: background-color 150ms var(--ease);
}
.sa-switch::before {
    content: ''; position: absolute; top: 50%; left: -4px; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
    background: #FAFAFA; box-shadow: var(--elev-1); transition: transform 150ms var(--ease), background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.sa-switch:checked { background: rgba(93, 53, 26, .5); }
.sa-switch:checked::before { transform: translateX(20px); background: var(--primary-main); }
.sa-switch:hover::before { box-shadow: var(--elev-1), 0 0 0 10px var(--action-hover); }
.sa-switch:checked:hover::before { box-shadow: var(--elev-1), 0 0 0 10px var(--primary-hover); }
.sa-switch:focus-visible { outline: none; }
.sa-switch:focus-visible::before { box-shadow: var(--elev-1), 0 0 0 10px var(--primary-focus); outline: 2px solid var(--primary-main); outline-offset: 2px; }

/* ---------- Chip ---------- */
.sa-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 12px;
    border-radius: 16px; font-size: 13px; line-height: 1; letter-spacing: .01em; white-space: nowrap;
    background: rgba(0, 0, 0, .08); color: var(--text-primary); vertical-align: middle;
}
.sa-chip .material-symbols-outlined { font-size: 18px; margin-left: -4px; }
.sa-chip--sm { height: 24px; padding: 0 8px; font-size: 12px; }
.sa-chip--sm .material-symbols-outlined { font-size: 16px; margin-left: -2px; }
.sa-chip--outlined { background: transparent; border: 1px solid rgba(0, 0, 0, .23); }
.sa-chip--success { background: var(--success-main); color: #fff; }
.sa-chip--error { background: var(--error-main); color: #fff; }
.sa-chip--warning { background: var(--warning-main); color: #fff; }
.sa-chip--primary { background: var(--primary-main); color: #fff; }
.sa-chip--outlined.sa-chip--primary { background: transparent; color: var(--primary-main); border-color: var(--primary-outline); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Alert (standard) ---------- */
.sa-alert {
    display: flex; gap: 12px; padding: 6px 16px; border-radius: var(--radius);
    font-size: 14px; line-height: 1.43; letter-spacing: .01071em;
    background: var(--info-bg); color: var(--info-text);
}
.sa-alert > .material-symbols-outlined { box-sizing: content-box; font-size: 22px; padding: 7px 0; color: var(--info-main); }
.sa-alert__msg { padding: 8px 0; min-width: 0; }
.sa-alert__title { font-weight: 500; margin: 0 0 2px; font-size: 15px; }
.sa-alert--warning { background: var(--warning-bg); color: var(--warning-text); }
.sa-alert--warning > .material-symbols-outlined { color: var(--warning-main); }
.sa-alert--success { background: var(--success-bg); color: var(--success-text); }
.sa-alert--success > .material-symbols-outlined { color: var(--success-main); }
.sa-alert--error { background: var(--error-bg); color: var(--error-text); }
.sa-alert--error > .material-symbols-outlined { color: var(--error-main); }
.sa-alert + *, * + .sa-alert { margin-top: 16px; }
.sa-page-head + .sa-alert { margin-top: 0; }

/* ---------- Progress ---------- */
.sa-progress-linear { position: relative; height: 6px; border-radius: 3px; overflow: hidden; background: var(--primary-focus); }
.sa-progress-linear__bar { position: absolute; inset: 0 auto 0 0; background: var(--primary-main); border-radius: 3px; transition: width 400ms var(--ease); }
.sa-progress-linear--success .sa-progress-linear__bar { background: var(--success-main); }

/* ---------- Avatar ---------- */
.sa-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary-selected); color: var(--primary-main);
}
.sa-avatar--primary { background: var(--primary-main); color: #fff; }
.sa-avatar--secondary { background: var(--secondary-selected); color: var(--secondary-main); }
.sa-avatar--lg { width: 56px; height: 56px; }
.sa-avatar--lg .material-symbols-outlined { font-size: 30px; }

/* ---------- Table ---------- */
.sa-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sa-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.43; }
.sa-table th, .sa-table td { padding: 12px 16px; border-bottom: 1px solid rgba(224, 224, 224, 1); text-align: left; white-space: nowrap; vertical-align: middle; }
.sa-table th { font-weight: 500; color: var(--text-primary); background: var(--bg-paper); }
.sa-table tbody tr { transition: background-color 150ms var(--ease); }
.sa-table tbody tr:hover { background: var(--action-hover); }
.sa-table tbody tr:last-child td { border-bottom: 0; }
.sa-table td.is-wrap { white-space: normal; min-width: 140px; }

/* ---------- Empty state ---------- */
.sa-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px; text-align: center; color: var(--text-secondary); }
.sa-empty .material-symbols-outlined { font-size: 48px; color: var(--text-disabled); }

/* 날짜 이동 */
.sa-datebar { display: flex; align-items: center; gap: 4px; }
.sa-datebar form { margin: 0; width: auto; }
.sa-datebar input[type=date] { min-width: 150px; }
.sa-error { margin: 24px auto 0; color: var(--text-primary); }
.sa-error .material-symbols-outlined { color: var(--text-secondary); }
.sa-error .sa-btn .material-symbols-outlined { color: inherit; font-size: 20px; }

/* ---------- Snackbar ---------- */
.sa-snackbar {
    position: fixed; left: 50%; bottom: 24px; z-index: 1400; display: flex; align-items: center; gap: 8px;
    min-width: 288px; max-width: min(560px, calc(100vw - 32px)); padding: 6px 16px; border-radius: 4px;
    background: #323232; color: #fff; font-size: 14px; line-height: 1.43; box-shadow: var(--elev-6);
    transform: translate(-50%, 16px) scale(.96); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
}
.sa-snackbar.is-open { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s; }
.sa-snackbar .material-symbols-outlined { font-size: 20px; color: #81C784; }
.sa-snackbar__msg { padding: 8px 0; }
@media (max-width: 599px) { .sa-snackbar { min-width: 0; width: calc(100vw - 16px); bottom: 8px; } }

/* ---------- SweetAlert2 → MUI Dialog ---------- */
.swal2-container.swal2-backdrop-show { background: rgba(0, 0, 0, .5) !important; }
.swal2-popup.custom_swal_popup, .swal2-popup {
    width: min(400px, calc(100vw - 32px)) !important; padding: 24px 0 8px !important; border-radius: var(--radius) !important;
    box-shadow: var(--elev-24) !important; font-family: var(--font) !important; background: var(--bg-paper) !important;
}
.swal2-popup .swal2-icon { width: 48px !important; height: 48px !important; margin: 0 auto 8px !important; border-width: 3px !important; }
.swal2-popup .swal2-icon .swal2-icon-content { font-size: 30px !important; }
.swal2-popup .swal2-icon.swal2-warning { border-color: var(--warning-main) !important; color: var(--warning-main) !important; }
.swal2-popup .swal2-icon.swal2-error { border-color: var(--error-main) !important; }
.swal2-popup .swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--error-main) !important; width: 28px !important; top: 22px !important; left: 9px !important; height: 3px !important; }
.swal2-popup .swal2-icon.swal2-error [class$='right'] { right: 9px !important; left: auto !important; }
.swal2-popup .swal2-icon.swal2-success, .swal2-popup .swal2-icon.swal2-question, .swal2-popup .swal2-icon.swal2-info { transform: scale(.6); margin: -16px auto -8px !important; }
.swal2-popup .swal2-html-container {
    margin: 0 !important; padding: 8px 24px 12px !important; font-size: 16px !important; line-height: 1.5 !important;
    color: var(--text-secondary) !important; text-align: center !important; word-break: keep-all;
}
.swal2-popup .swal2-actions { width: 100%; justify-content: flex-end !important; margin: 8px 0 0 !important; padding: 0 8px !important; gap: 8px; }
.swal2-popup .swal2-actions button.swal2-styled, .swal2-popup .custom_alert_btn {
    margin: 0 !important; min-width: 64px; padding: 6px 12px !important; border-radius: var(--radius) !important;
    background: transparent !important; color: var(--primary-main) !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 500 !important; line-height: 1.75 !important; border: 0 !important; width: auto !important;
}
.swal2-popup .swal2-actions button.swal2-styled:hover { background: var(--primary-hover) !important; background-image: none !important; }
.swal2-popup .swal2-actions button.swal2-styled:focus-visible { outline: 2px solid var(--primary-main) !important; outline-offset: 0; }

/* 스피너(AxiosDirect 가 .layerPopup 을 켠다) → CircularProgress 모양 */
.layerPopup { background: rgba(255, 255, 255, .6) !important; }
.layerPopup .spinner { width: 40px !important; height: 40px !important; border: 4px solid var(--primary-focus) !important; border-top-color: var(--primary-main) !important; animation-duration: .8s !important; }

/* ---------- 로그인 ---------- */
.sa-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.sa-auth__paper { width: 100%; max-width: 400px; padding: 32px 24px 24px; }
.sa-auth__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 28px; text-align: center; }
.sa-auth__brand .sa-h6 { font-size: 20px; }
.sa-auth__foot { margin-top: 20px; text-align: center; }
@media (max-width: 599px) { .sa-auth { align-items: flex-start; padding-top: 48px; } .sa-auth__paper { padding: 28px 20px 20px; } }

/* ---------- 대시보드 통계 카드 ---------- */
.sa-stat { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.sa-stat__value { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 400; line-height: 1.1; color: var(--text-primary); }
.sa-stat__label { font-size: 14px; color: var(--text-secondary); line-height: 1.43; }
.sa-stat__sub { font-size: 12px; color: var(--text-secondary); }
@media (max-width: 599px) { .sa-stat { padding: 14px; gap: 10px; } .sa-stat__value { font-size: 28px; } }
.sa-progress-row { display: flex; align-items: center; gap: 16px; }
.sa-progress-row .sa-progress-linear { flex: 1 1 auto; }
.sa-progress-row .sa-num { font-size: 14px; color: var(--text-secondary); white-space: nowrap; }

/* ---------- 체크리스트 ---------- */
.sa-cert { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 32px; align-items: center; padding: 24px; }
.sa-ring { position: relative; width: 144px; height: 144px; }
.sa-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.sa-ring__track { stroke: var(--primary-focus); }
.sa-ring__bar { stroke: var(--primary-main); stroke-linecap: round; transition: stroke-dashoffset 500ms var(--ease), stroke 300ms var(--ease); }
.sa-ring.is-complete .sa-ring__bar { stroke: var(--success-main); }
.sa-ring.is-empty .sa-ring__bar { stroke-opacity: 0; }
.sa-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sa-ring__count { font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; font-size: 34px; line-height: 1.1; font-weight: 400; color: var(--text-primary); white-space: nowrap; letter-spacing: -.01em; }
.sa-ring__unit { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.sa-cert__body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sa-cert__lead { font-size: 18px; font-weight: 500; line-height: 1.45; margin: 0; }
.sa-cert__remain .sa-caption { margin-bottom: 6px; }
.sa-cert .sa-alert { margin-top: 0; }
@media (max-width: 599px) {
    .sa-cert { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 20px 16px; gap: 16px; }
    .sa-cert__body { align-items: center; }
    .sa-cert__remain .sa-chips { justify-content: center; }
    .sa-cert .sa-alert { text-align: left; }
    .sa-ring { width: 128px; height: 128px; }
}

.sa-list { list-style: none; margin: 0; padding: 8px 0; }
.sa-list-item {
    display: flex; align-items: center; gap: 16px; padding: 10px 8px 10px 16px; cursor: pointer;
    transition: background-color 150ms var(--ease); -webkit-tap-highlight-color: transparent;
}
.sa-list-item:hover { background: var(--action-hover); }
.sa-list-item:active { background: rgba(0, 0, 0, .08); }
.sa-list-item:has(.sa-checkbox:focus-visible) { outline: 2px solid var(--primary-main); outline-offset: -2px; }
.sa-list-item .sa-checkbox:focus-visible { outline: none; }
.sa-list-item__text { flex: 1 1 auto; min-width: 0; }
.sa-list-item__primary { display: block; font-size: 16px; line-height: 1.5; color: var(--text-primary); }
.sa-list-item__secondary { display: block; font-size: 14px; line-height: 1.43; color: var(--text-secondary); margin-top: 2px; }
.sa-list-item .sa-avatar { transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.sa-list-item.is-checked .sa-avatar { background: var(--primary-main); color: #fff; }
.sa-list-item.is-checked .sa-avatar .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.sa-list-item.is-checked .sa-checkbox-hit { background: transparent; }
.sa-list > li + li { border-top: 1px solid var(--divider); }
@media (max-width: 599px) { .sa-list-item { gap: 12px; padding-left: 12px; padding-right: 4px; } }

.sa-savebar {
    position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
    padding: 12px 16px; background: var(--bg-paper); border-top: 1px solid var(--divider);
}
.sa-savebar .sa-caption { margin-right: auto; }
.sa-savebar .sa-num { white-space: nowrap; }
body:has(.sa-savebar) .sa-snackbar { bottom: 84px; }
.sa-savebar.is-dirty { box-shadow: 0 -4px 12px rgba(0, 0, 0, .08); }
@media (max-width: 599px) {
    .sa-savebar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); gap: 12px; }
    .sa-savebar .sa-btn { flex-shrink: 0; }
}

/* ---------- QR ---------- */
.sa-qr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px; text-align: center; }
.sa-qr img { width: 220px; height: 220px; border: 1px solid var(--divider); border-radius: var(--radius); padding: 8px; background: #fff; }

/* ---------- 월간 보고서 ---------- */
.sa-report-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
@media (max-width: 599px) { .sa-report-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.rp_hbar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 14px; margin-bottom: 10px; color: var(--text-primary); }
.rp_hbar:last-child { margin-bottom: 0; }
.rp_hbar .track { height: 10px; background: var(--primary-selected); border-radius: 5px; overflow: hidden; }
.rp_hbar .fill { height: 100%; background: var(--primary-main); border-radius: 5px; min-width: 0; }
.rp_hbar .fill.secondary { background: var(--secondary-main); }
.rp_hbar .fill.allow { background: var(--success-main); }
.rp_hbar .fill.deny { background: var(--error-main); }
.rp_hbar .fill.pending { background: var(--warning-main); }
.rp_hbar .num { text-align: right; font-family: 'Roboto', sans-serif; font-variant-numeric: tabular-nums; }
.rp_hbar--wide { grid-template-columns: minmax(110px, 1.4fr) minmax(0, 1fr) 36px; }
.rp_vbars { display: flex; align-items: flex-end; gap: 2px; height: 140px; border-bottom: 1px solid var(--divider); }
.rp_vbars .col { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; }
.rp_vbars .col i { display: block; width: 100%; background: var(--primary-main); border-radius: 3px 3px 0 0; }
.rp_vbars .col.zero i { background: transparent; }
.rp_axis { display: flex; gap: 2px; font-size: 11px; color: var(--text-secondary); margin-top: 6px; font-family: 'Roboto', sans-serif; }
.rp_axis span { flex: 1 1 0; min-width: 0; text-align: center; overflow: visible; white-space: nowrap; }

/* ---------- 법규 ---------- */
.sa-law ul { margin: 0; padding-left: 20px; }
.sa-law li { font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.sa-law li + li { margin-top: 6px; }
.sa-law .sa-card__header .sa-h6 { font-size: 17px; line-height: 1.5; }

/* ---------- 인쇄 ---------- */
@media print {
    @page { size: A4 portrait; margin: 12mm; }
    .sa-drawer, .sa-appbar, .sa-backdrop, .sa-snackbar, .sa-print-hide { display: none !important; }
    .sa-main { margin: 0 !important; padding: 0 !important; }
    body { background: #fff; }
    .sa-card, .sa-paper { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; }
    .rp_vbars { height: 90px; }
    .sa-stat__value { font-size: 22px; }
}

/* ---------- 모션 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .layerPopup .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}

/* 좋아요 지표 — 하트는 브랜드 갈색이 아니라 공간 탭 하트와 같은 빨강 */
.sa-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 959px) {
  .sa-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-grid--5 > .sa-stat--like { grid-column: 1 / -1; }
}
.sa-like-color { color: #E0245E; }
.sa-avatar--like { background: rgba(224, 36, 94, .1); color: #E0245E; }
.sa-stat__sub { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; line-height: 1.66; color: var(--text-secondary); }
.sa-stat__sub .material-symbols-outlined { font-size: 16px; }

/* 월간 보고서 — 막대 안에 좋아요 고객 방문분을 아래(가로 막대는 왼쪽)부터 쌓는다 */
.rp_stack { position: relative; overflow: hidden; }
.rp_vbars .col i.rp_stack { display: flex; flex-direction: column; justify-content: flex-end; }
.rp_vbars .col i.rp_stack b { display: block; width: 100%; background: #E0245E; }
.rp_hbar .fill.rp_stack { display: flex; }
.rp_hbar .fill.rp_stack b { display: block; height: 100%; background: #E0245E; }
.rp_legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-secondary); }
.rp_legend span { display: inline-flex; align-items: center; gap: 6px; }
.rp_legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rp_legend__like { background: #E0245E; }
.rp_legend__rest { background: var(--primary-main); }
@media print { .rp_vbars .col i.rp_stack b, .rp_hbar .fill.rp_stack b, .rp_legend__like { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }