@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ===== antd v4 모양을 본뜬 디자인 토큰 (색상 · 테두리 · 모서리 반경 변수) ===== */
:root {
    --primary: #1890ff;
    --primary-hover: #40a9ff;
    --primary-active: #096dd9;
    --accent: #3887FE;
    --primary-dark: #032642;
    --text: rgba(0, 0, 0, 0.85);
    --text-secondary: rgba(0, 0, 0, 0.45);
    --border: #d9d9d9;
    --split: #f0f0f0;
    --bg: #f0f2f5;
    --card: #ffffff;
    --danger: #ff4d4f;
    --success: #52c41a;
    --warning: #faad14;
    --sider: #001529;
    --radius: 2px;
}

/* ===== 기본 요소: 박스 크기 계산, 본문 글꼴 · 색 · 배경, 제목 · 링크 · 코드 ===== */
* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Malgun Gothic', 'Apple SD Gothic Neo', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5715;
    color: var(--text);
    background: var(--bg);
}

h1 { font-size: 24px; font-weight: 600; margin: 0 0 20px; }
h2 { font-size: 20px; font-weight: 600; margin: 0 0 16px; }
h3 { font-size: 16px; font-weight: 600; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
code { background: #f5f5f5; padding: 1px 5px; border-radius: var(--radius); font-size: 85%; color: #c41d7f; }

/* ===== 레이아웃: 왼쪽에 고정된 어두운 사이드 메뉴(sider, 로그인했을 때만 보인다) ===== */
.sider {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
    background: var(--sider); color: rgba(255, 255, 255, 0.65);
    overflow-y: auto; z-index: 100; display: flex; flex-direction: column;
}
.sider .sider-logo { text-align: center; padding: 24px 12px; }
.sider .sider-logo img { height: 56px; width: auto; }
.sider .menu { list-style: none; margin: 0; padding: 0; flex: 1; }
.sider .menu li { margin: 0; }
.sider .menu a, .sider .menu button {
    display: block; width: 100%; text-align: left; background: none; border: none;
    color: rgba(255, 255, 255, 0.65); padding: 0 24px; height: 40px; line-height: 40px;
    font-size: 14px; font-family: inherit; cursor: pointer; transition: all .2s;
}
.sider .menu a:hover, .sider .menu button:hover { color: #fff; }
.sider .menu a.active, .sider .menu button.active { background: var(--primary); color: #fff; }
.sider .menu form { margin: 0; }

.sider ~ .container, .sider ~ .homebg { margin-left: 220px; }

.container { max-width: 1160px; margin: 0 auto; padding: 24px; }
/* 선택 적용(.centered): sms-web의 BaseTemplate처럼(고정 폭 콘텐츠, margin: 0 auto) sider 오른쪽 공간의 가운데에
   페이지 블록을 놓는다. 50% - 470px = 220px + (100% - 220px - 1160px) / 2. */
@media (min-width: 769px) {
    .sider ~ .container.centered { margin-left: max(220px, calc(50% - 470px)); }
}
/* 페이지 안의 가운데 정렬된 900px 열(sms-web BaseTemplate의 기본 콘텐츠 폭).
   페이지 헤더는 이 열의 왼쪽 가장자리에 맞춰 왼쪽 정렬을 유지한다. */
.content-col { max-width: 900px; margin: 0 auto; }

/* ===== 카드 ===== */
.card {
    background: var(--card); border-radius: var(--radius); border: 1px solid var(--split);
    padding: 24px; margin: 0 0 16px;
    box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12);
}

/* ===== 버튼 (antd) ===== */
.btn, .btn-ghost, .btn-danger {
    display: inline-flex; align-items: center; justify-content: center;
    height: 32px; padding: 4px 15px; font-size: 14px; border-radius: var(--radius);
    cursor: pointer; border: 1px solid var(--primary); transition: all .2s; line-height: 1.5;
    background: var(--primary); color: #fff; text-decoration: none;
}
.btn:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn:active { background: var(--primary-active); border-color: var(--primary-active); }
.btn-ghost { background: #fff; color: var(--text); border-color: var(--border); }
/* 흰 바탕을 유지한다: 그렇지 않으면 .btn:hover/:active가 ghost 버튼을 파란 글자 밑에 파란 배경으로 칠한다 */
.btn-ghost:hover { background: #fff; color: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost:active { background: #fff; color: var(--primary-active); border-color: var(--primary-active); }
/* `danger`를 준 antd 기본 버튼: 빨간 테두리 + 빨간 글자 */
.btn-ghost.danger { color: var(--danger); border-color: var(--danger); }
.btn-ghost.danger:hover { color: #ff7875; border-color: #ff7875; }
.btn-ghost.danger:active { color: #d9363e; border-color: #d9363e; }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #ff7875; border-color: #ff7875; color: #fff; }
.btn-danger:active { background: #d9363e; border-color: #d9363e; }
/* antd shape="round" (둥근 버튼) */
.btn.round { border-radius: 32px; }
.btn-link { background: none; border: none; color: inherit; cursor: pointer; font-size: 14px; padding: 0; }
.btn-link:hover { color: var(--primary); }
.btn[disabled], .btn-ghost[disabled] { opacity: .5; cursor: not-allowed; }

/* ===== 입력 컨트롤 (antd) ===== */
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel],
textarea, select {
    width: 100%; padding: 4px 11px; min-height: 32px; font-size: 14px; font-family: inherit;
    color: var(--text); background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius); transition: all .2s;
}
textarea { padding: 6px 11px; resize: vertical; line-height: 1.5715; }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--primary-hover);
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
}
input::placeholder, textarea::placeholder { color: #bfbfbf; }
/* antd 비활성(disabled) 입력 */
input:disabled, textarea:disabled, select:disabled { background: #f5f5f5; color: rgba(0, 0, 0, 0.25); cursor: not-allowed; }
/* 필수 <select>가 아직 숨겨진 안내 옵션("타입")에 머물러 있으면 antd처럼 흐린 색으로 보인다 */
select:invalid { color: #bfbfbf; }
select option { color: var(--text); }
/* [hidden]은 클래스가 지정한 어떤 display보다 우선한다 */
[hidden] { display: none !important; }

label { display: block; margin: 0 0 6px; }
.card > label, .card label { margin-top: 14px; color: var(--text); font-size: 14px; }
.card > label:first-of-type { margin-top: 0; }

/* /images/icons.svg에 모아 둔 antd 아이콘: <svg class="anticon"><use href="/images/icons.svg#home"/></svg> */
.anticon { display: inline-block; flex: none; width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; }

/* ===== antd size="large" (sms-web BaseForm의 기본값): 높이 40px 컨트롤에 16px 글자 ===== */
.size-lg input[type=text], .size-lg input[type=password], .size-lg input[type=number],
.size-lg input[type=email], .size-lg input[type=tel], .size-lg select {
    height: 40px; padding: 6.5px 11px; font-size: 16px;
}
.size-lg textarea { padding: 6.5px 11px; font-size: 16px; }
.size-lg .btn, .size-lg .btn-ghost, .size-lg .btn-danger { height: 40px; padding: 6.4px 15px; font-size: 16px; }

/* ===== 비밀번호 입력 + 입력값을 보이거나 숨기는 눈 버튼 (antd Input.Password. common.js의
   func.init.passwordToggle이 모든 비밀번호 입력을 .pw-field로 감싼다). 눈 버튼 자리가 .size-lg의 패딩으로
   없어지지 않도록 .size-lg보다 뒤에 둔다. ===== */
.pw-field { position: relative; display: block; }
.pw-field > input[type] { display: block; padding-right: 34px; }
.pw-toggle {
    position: absolute; top: 0; right: 0; bottom: 0; width: 34px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: rgba(0, 0, 0, 0.45); font-size: 14px; cursor: pointer; transition: color .3s;
}
.pw-toggle:hover { color: rgba(0, 0, 0, 0.85); }
.pw-toggle:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: -6px; }
.size-lg .pw-toggle { font-size: 16px; }
.form-row > .pw-field { flex: 1; min-width: 0; }

/* ===== 표 (antd) ===== */
table.tbl { width: 100%; border-collapse: collapse; margin-top: 12px; background: var(--card); font-size: 14px; }
table.tbl th, table.tbl td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--split); }
table.tbl th { background: #fafafa; font-weight: 500; color: var(--text); white-space: nowrap; }
table.tbl tbody tr:hover { background: #fafafa; }
table.tbl a { color: var(--primary); }

/* ===== 탭 (antd 밑줄형 탭) ===== */
.tabs { display: flex; gap: 0; margin: 0 0 16px; border-bottom: 1px solid var(--split); }
.tab {
    background: none; border: none; padding: 12px 16px; font-size: 14px; cursor: pointer;
    color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.tab:hover { color: var(--primary-hover); }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* ===== 페이지 이동 (antd Pagination) ===== */
.pager { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.pager button {
    min-width: 32px; height: 32px; background: #fff; border: 1px solid var(--border);
    color: var(--text); border-radius: var(--radius); cursor: pointer; padding: 0 8px;
}
.pager button:hover { color: var(--primary); border-color: var(--primary); }
.pager button.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pager button:disabled { opacity: .4; cursor: default; }

/* 공통 유틸리티: 양끝 정렬 행, 버튼 줄, 처리 결과 메시지(.ok / .error), 흐린 보조 글자 */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; align-items: center; }

.result { margin-top: 14px; min-height: 1.2em; }
.result.ok { color: var(--success); }
.result.error, .error { color: var(--danger); }
.muted { color: var(--text-secondary); }

/* ===== 첫 화면 / 로그인 히어로 영역 (sms-web Home을 따른다) ===== */
.homebg {
    min-height: 100vh;
    background: linear-gradient(-45deg, #000000, #f7f7f7, #000000, #f7f7f7, #000000);
    background-size: 400% 400%; animation: gradient 15s ease infinite;
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.homebg:before { content: ''; position: absolute; inset: 0; background: url(/back.png) center/cover no-repeat; opacity: .05; }
@keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.home-inner { position: relative; z-index: 1; width: 900px; max-width: 100%; padding: 40px 16px; text-align: center; }
.home-logo { height: 160px; width: auto; }
.home-title { color: #fff; font-weight: 700; font-size: 48px; margin: 32px 0; letter-spacing: -1px; }
.home-card { margin: 0 auto; max-width: 850px; text-align: left; }
.home-notice { margin-top: 16px; color: #fff; font-weight: 700; }
/* 로그인 후 제목 아래의 텔레그램 문의 문구 (sms-web Home: 위쪽 100px 여백) */
.home-telegram { margin-top: 100px; }
/* 로그인 카드 (sms-web Home): 가운데 제목, [캐럿 아이콘 | 아이디 + 비밀번호], 전체 폭 로그인 버튼, 회원가입 링크 */
.home-login h2 { text-align: center; }
.home-login-row { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.home-login-icon { flex: 0 0 25%; text-align: center; font-size: 60px; line-height: 1; color: var(--primary-dark); }
.home-login-fields { flex: 1; display: flex; flex-direction: column; gap: 24px; margin-top: 8px; }
.home-login-submit { width: 100%; }
.home-login-join { text-align: center; margin: 24px 0 0; }

/* ===== 페이지 머리 (아이콘 + 제목 + 설명 문구), sms-web 페이지 상단을 따른다 ===== */
.page-head { margin-bottom: 24px; }
.page-head-icon { font-size: 44px; color: var(--accent); margin-bottom: 10px; }
.page-head h1 { margin: 0 0 10px; }
.page-head p { margin: 2px 0; }
.page-head p.page-head-telegram { margin: 8px 0 10px; }

/* ===== 텔레그램 문의 문구 (fragments/layout :: telegram): 아이콘 + "문의사항: @아이디" ===== */
.tg-contact { display: inline-flex; align-items: center; gap: 10px; vertical-align: middle; }
.tg-contact img { flex: none; display: block; }

/* ===== 메시지 발송 페이지 (갤럭시 폰 목업 + 조작부) ===== */
.msg-layout { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.msg-phone-col { flex: 0 0 300px; display: flex; flex-direction: column; align-items: flex-start; }
.msg-pin { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; cursor: pointer; user-select: none; }
.msg-pin input { margin: 0; }
.msg-phone { position: relative; width: 300px; min-height: 600px; }
.msg-phone-img { position: absolute; top: 0; left: 0; width: 300px; user-select: none; pointer-events: none; }
/* 목업의 상태 표시줄 바로 아래에서 시작해 목업의 채팅 헤더(김가영)까지 가린다 */
.msg-phone-screen { position: absolute; top: 52px; left: 17px; width: 266px; }
.msg-phone-screen textarea {
    border: none; background: #fff; resize: none; height: 406px;
    box-shadow: none; border-radius: 0; font-size: 13px;
}
.msg-phone-screen textarea:focus { box-shadow: none; border: none; outline: none; }
.msg-phone-count { text-align: right; color: var(--text-secondary); font-size: 12px; margin-top: 4px; }
.msg-main { flex: 1 1 440px; min-width: 320px; }
.msg-count-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-count-row strong { color: var(--primary); font-size: 18px; }
/* 건수 아래: 보유 포인트, 굵은 감사 문구, 수신 번호 형식 안내 */
.msg-point-row { display: flex; justify-content: center; gap: 16px; margin-bottom: 4px; }
.msg-thanks { margin: 8px 0 16px; }
.msg-tel-hint { margin: -2px 0 8px; font-size: 13px; }
.msg-samples { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.msg-samples .btn { height: 28px; padding: 0 12px; }
.card-accent { height: 3px; background: var(--primary); margin: -24px -24px 20px; }
.btn.amount { background: var(--primary); }
/* 메시지 발송 페이지: 헤더와 레이아웃이 가운데 정렬된 한 블록을 이룬다(폰 300 + 간격 28 + 조작부 560).
   그래서 헤더와 "메시지 고정하기"는 폰의 왼쪽 가장자리에 맞춰지고, 조작부는 가운데 정렬된다. */
.msg-page .msg-wrap { max-width: 888px; margin: 0 auto; }
.msg-page .card label, .msg-page .card p { text-align: center; }
.msg-page .tabs, .msg-page .msg-count-row, .msg-page .msg-samples { justify-content: center; }
.msg-page .msg-count-row { flex-wrap: wrap; }
.msg-page .msg-main { flex: 0 1 560px; }
/* sms-web처럼 배치한 동작 버튼: [중복 제거 | 업로드], 3사 테스트, 발송 — 전체 폭의 알약 모양 버튼 */
.msg-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.msg-actions-pair { display: flex; gap: 8px; margin-bottom: 8px; }
.msg-actions-pair .btn { flex: 1 1 0; min-width: 0; }
.msg-actions > .btn { width: 100%; }
/* 현재 발송 현황 (sms-web MessageTrafficLight): antd dashboard 게이지 — 아래가 75° 비어 있는 원호, 가운데에 원활/보통/혼잡 */
.msg-traffic { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin-top: 16px; }
.traffic-gauge { position: relative; width: 120px; height: 120px; flex: none; }
.traffic-gauge svg { width: 120px; height: 120px; display: block; }
.traffic-gauge circle { fill: none; stroke-width: 7; stroke-linecap: round; }
.traffic-track { stroke: #f5f5f5; }
.traffic-bar { transition: stroke-dasharray .3s ease, stroke .3s ease; }
.traffic-word { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* 메시지 복사하기 (sms-web Message): 높이 500px 안에서 스크롤되는 카드 목록, 카드를 누르면 내용을 복사한다 */
.msg-copy { margin-top: 32px; }
.msg-copy h2 { font-size: 20px; }
.msg-copy-list { height: 500px; overflow-y: scroll; display: flex; flex-direction: column; gap: 20px; margin: 15px 0; }
.msg-copy-card {
    position: relative; flex: none; height: 200px; width: 100%; padding: 24px; text-align: left;
    background: var(--card); border: 1px solid var(--split); border-radius: var(--radius);
    font: inherit; color: var(--text); cursor: pointer; overflow: hidden; transition: box-shadow .2s;
}
.msg-copy-card:hover { box-shadow: 0 1px 2px -2px rgba(0,0,0,.16), 0 3px 6px 0 rgba(0,0,0,.12), 0 5px 12px 4px rgba(0,0,0,.09); }
.msg-copy-text { white-space: pre-wrap; word-break: break-all; }
.msg-copy-label { position: absolute; right: 20px; bottom: 20px; font-size: 12px; color: var(--text-secondary); }
.msg-copy-empty { padding: 40px 0; text-align: center; color: var(--text-secondary); }
.msg-actions .fa-file-excel { margin-right: 8px; }

/* ===== sms-web BaseTable 모양 (table.tbl.dark): 테두리 친 작은 셀, sider 색의 어두운 머리,
   줄무늬 행 — 발송 결과와 충전 현황 표에 쓴다 ===== */
table.tbl.dark { margin-top: 0; }
table.tbl.dark th, table.tbl.dark td { padding: 8px; border: 1px solid var(--split); }
table.tbl.dark th { background: var(--sider); color: #fff; border-color: rgba(255, 255, 255, 0.12); }
table.tbl.dark tbody tr:nth-child(2n) td { background: #f8f8f8; }
table.tbl.dark tbody tr:hover td { background: #fafafa; }
/* sms-web과 같은 충전 상태 색: 대기 회색, 수락 파랑, 거절 빨강 */
.status-ready { color: var(--text-secondary); }
.status-applied { color: var(--primary); }
.status-rejected { color: var(--danger); }
/* 필수 항목 표시 (antd) */
.req { color: var(--danger); margin-right: 4px; }

/* ===== 발송 내역 목록 (sms-web Message/List를 따른다) ===== */
.msglist-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
/* 고정 레이아웃: 내용 열이 폭을 정한 열들이 쓰고 남은 폭을 차지하므로 넘치는 내용을 자를 수 있다 */
.msglist-page table.tbl { table-layout: fixed; }
.msglist-page table.tbl tbody tr.selected td { background: #e6f7ff; }
/* 내용: 한 줄로 보이고(줄바꿈은 공백으로 보인다) 넘치면 "…"로 자른다. 복사 / 툴팁은 전체 내용을 그대로 쓴다 */
.msglist-page table.tbl td.content {
    text-align: center; color: cornflowerblue;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal;
}
.msglist-page .col-check { width: 48px; }
.msglist-page .col-check input { width: 16px; height: 16px; margin: 0; cursor: pointer; vertical-align: middle; }

/* ===== 입력란 옆에 놓는 라벨 (antd 가로 폼): "* 이름 : [________]" ===== */
.form-row { display: flex; align-items: center; margin-bottom: 24px; }
.card .form-row > .form-label { flex: 0 0 auto; margin: 0; white-space: nowrap; }
.form-row > .form-label::after { content: ':'; margin: 0 8px 0 2px; }
.form-row > input { flex: 1; min-width: 0; }
/* 가운데 제목이 있는 antd Divider: "──── 충전 현황 ────" */
.divider { display: flex; align-items: center; margin: 32px 0 16px; font-weight: 500; white-space: nowrap; }
/* --split이 아니라 --border를 쓴다: 여기서는 페이지 배경이 회색이다(sms-web은 흰색이었다) */
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.divider > span { padding: 0 16px; }

/* ===== 충전 페이지: 왼쪽에 금액, 오른쪽에 두 줄로 놓인 +금액 버튼 ===== */
.charge-money { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.charge-money .form-row { margin-bottom: 0; }
.charge-money .form-row > input { flex: 0 0 120px; }
.charge-amounts { display: flex; flex-direction: column; gap: 8px; }
.charge-amounts > div { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== 왼쪽 세로 탭 (antd Tabs type="card" tabPosition="left"), 예: 개인정보 페이지. 탭들이 열의 높이(최소
   400px)를 나눠 가지며, 선택된 탭은 흰 바탕에 파란 글자가 된다 ===== */
.side-tabs { display: flex; align-items: stretch; gap: 24px; min-height: 400px; }
.side-tab-list { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; }
.side-tab {
    flex: 1 1 0; display: flex; align-items: center; min-width: 120px; padding: 8px 16px;
    background: #fafafa; border: 1px solid var(--split); border-radius: var(--radius) 0 0 var(--radius);
    font: inherit; color: var(--text); text-align: left; cursor: pointer; transition: color .2s;
}
.side-tab:hover { color: var(--primary-hover); }
.side-tab.active { background: #fff; color: var(--primary); }
.side-tab-panels { flex: 1; min-width: 0; }
.side-tab-panels > .card { margin: 0; }

/* ===== 회원가입 (2열 카드) ===== */
.join-wrap { max-width: 860px; margin: 24px auto; }
.join-logo { text-align: center; margin-bottom: 20px; }
.join-logo img { height: 96px; width: auto; }
.join-card { padding: 0; overflow: hidden; }
.join-grid { display: grid; grid-template-columns: 1fr 1fr; }
.join-form { padding: 32px; }
.join-deco {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), var(--primary-dark)); color: #fff; padding: 32px; text-align: center;
}
.join-deco .big { font-size: 30px; font-weight: 800; margin-top: 8px; }
@media (max-width: 640px) { .join-grid { grid-template-columns: 1fr; } .join-deco { display: none; } }
.join-telegram { text-align: center; margin: 20px 0 0; }

/* 마이페이지 탭 패널 */
.panel { margin-top: 8px; }

/* ===== 모달 (antd 비슷한 모양): 아래 alert / confirm 대화상자가 쓰는 오버레이와 상자 ===== */
.modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
    z-index: 1000; align-items: flex-start; justify-content: center;
}
.modal-box {
    background: #fff; border-radius: var(--radius); width: 416px; max-width: calc(100% - 32px);
    margin-top: 100px; box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
}

/* ===== 대화상자와 알림이 함께 쓰는 상태 아이콘 (common.js의 func.ui.icon) ===== */
.ui-icon {
    flex: 0 0 22px; width: 22px; height: 22px;
    fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.ui-icon .dot { fill: currentColor; stroke: none; }
.ui-icon.warning { color: var(--warning); }
.ui-icon.info { color: var(--primary); }
.ui-icon.success { color: var(--success); }
.ui-icon.error { color: var(--danger); }

/* ===== 공용 alert / confirm 대화상자 (antd Modal.confirm 모양. common.js의 func.ui.alert / func.ui.confirm) ===== */
.dialog-overlay { display: flex; animation: dialog-fade .2s ease-out; }
.dialog-box { padding: 32px 32px 24px; animation: dialog-zoom .2s ease-out; }
.dialog-body { display: flex; align-items: flex-start; gap: 16px; }
.dialog-text { flex: 1; min-width: 0; }
.dialog-title { font-size: 16px; font-weight: 500; line-height: 1.4; margin-bottom: 8px; }
.dialog-content { white-space: pre-line; word-break: keep-all; overflow-wrap: anywhere; }
.dialog-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
@keyframes dialog-fade { from { opacity: 0; } }
@keyframes dialog-zoom { from { opacity: 0; transform: scale(.92); } }

/* ===== 제목 줄 · 닫기(X) · 확인 버튼이 있는 기본 팝업 (antd Modal 모양. common.js의 func.ui.modal) ===== */
.panel-modal-box { width: 520px; animation: dialog-zoom .2s ease-out; }
.panel-modal-head { position: relative; padding: 16px 56px 16px 24px; border-bottom: 1px solid var(--split); }
.panel-modal-title { font-size: 16px; font-weight: 500; line-height: 22px; }
.panel-modal-close {
    position: absolute; top: 0; right: 0; width: 56px; height: 56px; padding: 0;
    border: none; background: none; cursor: pointer; font-size: 22px; line-height: 56px; color: var(--text-secondary);
}
.panel-modal-close:hover { color: rgba(0, 0, 0, .75); }
.panel-modal-body { padding: 24px; word-break: keep-all; }
.panel-modal-foot { padding: 10px 16px; border-top: 1px solid var(--split); display: flex; justify-content: flex-end; gap: 8px; }
/* 공지 팝업 (common.js func.init.noticePopup): 작성일 + 관리자가 쓴 내용(HTML) */
.notice-date { font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; }
.notice-content { max-height: 60vh; overflow-y: auto; overflow-wrap: anywhere; }
.notice-content img { max-width: 100%; height: auto; }
/* 텔레그램 팝업: "텔레그램으로 문의하기 [아이콘] 텔레그램: @아이디" — 아이디 부분은 굵게 */
.panel-modal-body .tg-contact { gap: 4px; margin-left: 2px; }
.panel-modal-body .tg-contact-text { font-weight: 700; }

/* ===== 오른쪽 위 알림 (antd notification 모양. common.js의 func.ui.notify) — 오른쪽에서 밀려 들어온다 ===== */
.notify-host {
    position: fixed; top: 24px; right: 24px; z-index: 1010; width: 384px; max-width: calc(100vw - 48px);
    display: flex; flex-direction: column; gap: 16px; pointer-events: none;
}
.notify {
    position: relative; display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 48px 16px 24px; background: #fff; border-radius: var(--radius); pointer-events: auto;
    box-shadow: 0 3px 6px -4px rgba(0,0,0,.12), 0 6px 16px 0 rgba(0,0,0,.08), 0 9px 28px 8px rgba(0,0,0,.05);
    animation: notify-in .24s ease-out;
}
.notify.leaving { animation: notify-out .2s ease-in forwards; }
.notify .ui-icon { flex-basis: 24px; width: 24px; height: 24px; }
.notify-message { flex: 1; min-width: 0; font-size: 16px; line-height: 24px; word-break: keep-all; overflow-wrap: anywhere; }
.notify-close {
    position: absolute; top: 16px; right: 20px; width: 24px; height: 24px; padding: 0;
    border: none; background: none; cursor: pointer; font-size: 22px; line-height: 24px; color: var(--text-secondary);
}
.notify-close:hover { color: rgba(0, 0, 0, .67); }
@keyframes notify-in { from { opacity: 0; transform: translateX(calc(100% + 24px)); } }
@keyframes notify-out { to { opacity: 0; transform: translateX(calc(100% + 24px)); } }

/* ===== 서버 요청이 하나라도 진행되는 동안 창 맨 위를 따라 보이는 로딩바 (common.js func.ui.loadingBar):
   빠르게 차오르다가 끝 조금 앞에서 느려지고, 요청이 끝나면 끝까지 채운 뒤 서서히 사라진다 ===== */
.loading-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 3px; pointer-events: none; }
.loading-bar > div { width: 0; height: 100%; background: var(--primary); box-shadow: 0 0 8px var(--primary); opacity: 0; }
.loading-bar.running > div { width: 90%; opacity: 1; transition: width 10s cubic-bezier(.08, .82, .17, 1); }
.loading-bar.done > div { width: 100%; opacity: 0; transition: width .2s ease, opacity .3s ease .2s; }

/* 운영체제에서 동작 줄이기를 켠 사용자에게는 대화상자 · 알림 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce) {
    .dialog-overlay, .dialog-box, .panel-modal-box, .notify, .notify.leaving { animation: none; }
}

/* ===== 좁은 페이지 (sms-web BaseTemplate narrow, 예: 비밀번호 변경): 440px 열, 가운데 제목 ===== */
.narrow-col { max-width: 440px; margin: 0 auto; padding-top: 36px; }
.narrow-title { margin: 20px 0; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.35; }

/* table.tbl 셀: 클릭하면 복사되는 내용, 그리고 "아직 없음" 행 */
table.tbl td.content { text-align: left; white-space: pre-wrap; color: var(--primary); cursor: pointer; word-break: break-all; }
table.tbl td.empty { color: var(--text-secondary); padding: 16px; }

/* ===== 관리자 (sms-web AdminTemplate): #fafafa 페이지 위에 메뉴를 담은 어두운 상단 바,
   antd 카드 / 표 / 폼. 템플릿: admin/*.html과 fragments/admin.html ===== */
.admin-body { background: #fafafa; }
/* antd Layout.Header + Menu theme="dark" mode="horizontal" (상단 가로 메뉴) */
.admin-header { height: 64px; padding: 0 20px; background: var(--sider); overflow-x: auto; overflow-y: hidden; }
.admin-menu { display: flex; height: 100%; }
.admin-menu a {
    display: flex; align-items: center; gap: 10px; padding: 0 20px; white-space: nowrap;
    color: rgba(255, 255, 255, 0.65); font-size: 14px; transition: color .3s, background-color .3s;
}
.admin-menu a:hover, .admin-menu a.active { color: #fff; background: var(--primary); }
.admin-content { padding: 20px; }

/* antd Breadcrumb, 아래 페이지와 40px 띄운다 */
.breadcrumb { margin-bottom: 40px; color: rgba(0, 0, 0, 0.45); }
.breadcrumb a { color: rgba(0, 0, 0, 0.45); transition: color .3s; }
.breadcrumb a:hover { color: var(--primary-hover); }
.breadcrumb .sep { margin: 0 8px; }
.breadcrumb > :last-child { color: var(--text); }

/* 포인트관리 / 코드 관리: 페이지 옆에 밝은 antd Menu를 놓는 200px 칸(메뉴 180px + 간격 20px) */
.admin-split { display: flex; gap: 20px; }
.admin-split-main { flex: 1 1 auto; min-width: 0; }
.a-vmenu { flex: 0 0 180px; align-self: flex-start; margin: 0; padding: 0; list-style: none; border-right: 1px solid var(--split); }
.a-vmenu li { margin: 4px 0 8px; }
.a-vmenu li:last-child { margin-bottom: 4px; }
.a-vmenu a {
    display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
    color: var(--text); transition: color .3s, background-color .3s;
}
.a-vmenu a > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-vmenu a:hover { color: var(--primary); }
.a-vmenu a.active { color: var(--primary); background: #e6f7ff; }

/* antd Card (카드) */
.a-card { background: #fff; border: 1px solid var(--split); border-radius: var(--radius); }
.a-card-head {
    display: flex; align-items: center; min-height: 48px; padding: 0 24px;
    border-bottom: 1px solid var(--split); font-size: 16px; font-weight: 500; color: var(--text);
}
.a-card-title { flex: 1; padding: 16px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-card-body { padding: 24px; }
.a-stack > * + * { margin-top: 8px; }   /* antd Space direction="vertical" (세로로 쌓기) */
.mb-40 { margin-bottom: 40px; }

/* sms-web BaseText / BaseTitle (글자 색 · 제목 크기) */
.t-primary { color: var(--accent); }
.t-danger { color: #f5222d; }
.t-sub { color: #707070; }
.a-copy { color: var(--accent); cursor: pointer; }
.a-h3 { margin: 0 0 .5em; font-size: 24px; font-weight: 600; line-height: 1.35; }
.a-h4 { margin: 0 0 .5em; font-size: 20px; font-weight: 600; line-height: 1.4; }

/* antd Table: #fafafa 머리 아래 가운데 정렬된 열. .small = 8px 셀, .bordered = 모든 셀에 테두리 */
.a-table-scroll { overflow-x: auto; container-type: inline-size; }
/* 페이지보다 넓은 표(가로 스크롤)에서도 "데이터 없음"이 보이는 영역의 가운데에 머문다. antd의 sticky placeholder와
   같은 동작이다 (100cqw = 보이는 폭, 여기서 small bordered 셀의 8px 패딩과 1px 테두리를 뺀다) */
.a-table-scroll td.a-empty .a-empty-box { position: sticky; left: 0; width: calc(100cqw - 18px); }
table.a-table {
    width: 100%; border-collapse: separate; border-spacing: 0; background: #fff;
    font-size: 14px; text-align: center; color: var(--text);
}
table.a-table th, table.a-table td { padding: 16px; border-bottom: 1px solid var(--split); overflow-wrap: break-word; }
table.a-table th { position: relative; background: #fafafa; font-weight: 500; }
table.a-table tbody tr:hover > td { background: #fafafa; }
table.a-table.small th, table.a-table.small td { padding: 8px; }
table.a-table.bordered { border-top: 1px solid var(--split); border-left: 1px solid var(--split); }
table.a-table.bordered th, table.a-table.bordered td { border-right: 1px solid var(--split); }
/* 테두리 없는 표의 머리에도 열 제목 사이에 흐린 구분선을 둔다 */
table.a-table:not(.bordered) th:not(:last-child)::before {
    content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 1.6em;
    background: rgba(0, 0, 0, 0.06); transform: translateY(-50%);
}
/* `ellipsis` 열: 한 줄로 보이고 넘치면 "…"로 자른다 (이때 antd는 표를 fixed 레이아웃으로 그린다) */
table.a-table.fixed { table-layout: fixed; }
table.a-table td.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* sms-web BaseTable (.dark): primaryDark 색 머리에 흰 제목, 줄무늬 행 */
table.a-table.dark th { background: var(--primary-dark); color: #fff; }
table.a-table.dark tbody tr:nth-child(2n) > td { background: #f8f8f8; }
table.a-table.dark tbody tr:hover > td { background: #fafafa; }
/* 행이 없을 때: antd Empty (그림 + "데이터 없음"). 마우스를 올려도 밝아지지 않는다 */
table.a-table td.a-empty { color: rgba(0, 0, 0, 0.25); }
table.a-table tbody tr.a-placeholder:hover > td { background: #fff; }
.a-empty-box { margin: 32px 0; text-align: center; line-height: 1.5715; }
.a-empty-box svg { display: block; height: 40px; margin: 0 auto 8px; }
.a-empty-ellipse { fill: #f5f5f5; }
.a-empty-g { stroke: #d9d9d9; }
.a-empty-path { fill: #fafafa; }
.a-table-title { padding: 8px; background: #fff; }

/* antd Pagination, 표 아래에 오른쪽 정렬. .mini는 작은 표 아래에 쓴다 */
.a-pager { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.a-pager:empty { display: none; }
.a-pager button {
    min-width: 32px; height: 32px; padding: 0 6px; border: 1px solid var(--border); border-radius: var(--radius);
    background: #fff; color: var(--text); font: inherit; line-height: 30px; cursor: pointer; transition: all .3s;
}
.a-pager button:hover { border-color: var(--primary); color: var(--primary); }
.a-pager button.active { border-color: var(--primary); color: var(--primary); font-weight: 500; }
.a-pager button:disabled { border-color: var(--border); color: rgba(0, 0, 0, 0.25); cursor: not-allowed; }
.a-pager button.jump { border-color: transparent; color: rgba(0, 0, 0, 0.25); letter-spacing: 2px; }
.a-pager button.jump:hover { color: var(--primary); }
.a-pager .anticon { font-size: 12px; vertical-align: -1px; }
.a-pager.mini { gap: 0; }
.a-pager.mini button { min-width: 24px; height: 24px; line-height: 22px; }
.a-pager.mini button:not(.active) { border-color: transparent; background: transparent; }

/* antd Table 로딩 (Spin): 표와 그 페이지 이동이 흐려지고 가운데에서 점 네 개가 돈다
   (긴 표에서는 처음 400px 안의 가운데). 처음 불러올 때 common.js func.ui.spin이 표를 .a-spin으로 감싼다 */
.a-spin { position: relative; }
.a-spin > :not(.a-spin-dot) { transition: opacity .3s; }
.a-spin.spinning { min-height: 120px; }   /* 아직 행이 없는 표에서도 머리 아래에 공간을 둔다 */
.a-spin.spinning > :not(.a-spin-dot) { opacity: .3; user-select: none; pointer-events: none; }
.a-spin-dot { display: none; position: absolute; top: 0; left: 0; z-index: 4; width: 100%; height: 100%; max-height: 400px; }
.a-spin.spinning > .a-spin-dot { display: block; }
.a-spin-dot > span {
    position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px;
    transform: rotate(45deg); animation: a-spin-rotate 1.2s infinite linear;
}
.a-spin-dot i {
    position: absolute; width: 9px; height: 9px; border-radius: 100%; background: var(--primary);
    transform: scale(.75); opacity: .3; animation: a-spin-move 1s infinite linear alternate;
}
.a-spin-dot i:nth-child(1) { top: 0; left: 0; }
.a-spin-dot i:nth-child(2) { top: 0; right: 0; animation-delay: .4s; }
.a-spin-dot i:nth-child(3) { right: 0; bottom: 0; animation-delay: .8s; }
.a-spin-dot i:nth-child(4) { bottom: 0; left: 0; animation-delay: 1.2s; }
@keyframes a-spin-move { to { opacity: 1; } }
@keyframes a-spin-rotate { to { transform: rotate(405deg); } }

/* antd Form: 항목 사이 24px. "라벨 : 컨트롤" 행, 또는 라벨을 위에 두는 형태(.a-vlabel) */
.a-item { margin-bottom: 24px; }
.a-row { display: flex; align-items: flex-start; }
.a-label { flex: 0 0 auto; margin: 0; line-height: 32px; white-space: nowrap; color: var(--text); }
.a-label::after { content: ':'; margin: 0 8px 0 2px; }
.a-vlabel { display: block; margin: 0; padding: 0 0 8px; }
.a-label.required::before, .a-vlabel.required::before {
    content: '*'; margin-right: 4px; color: var(--danger); font-family: SimSun, sans-serif;
}
.a-control { flex: 1 1 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; min-height: 32px; }
.size-lg .a-label { line-height: 40px; }
.size-lg .a-control { min-height: 40px; }
/* labelCol={{ span: 4 }}: 폭 4/24의 오른쪽 정렬 라벨 열 */
.a-hform .a-label { flex: 0 0 16.666667%; max-width: 16.666667%; overflow: hidden; text-align: right; }
/* layout="inline" (항목을 한 줄에 나란히 놓는다) */
.a-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 16px; }
.a-inline > .a-row { margin-bottom: 0; }
input.w-200, select.w-200 { width: 200px; }
input.w-90 { width: 90px; }

/* Radio.Button으로 이뤄진 antd Radio.Group (input + label 쌍). .solid = buttonStyle="solid" */
.a-radio { display: inline-flex; }
.a-radio > input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
.a-radio > label {
    position: relative; display: inline-block; margin: 0; height: 32px; padding: 0 15px; line-height: 30px;
    background: #fff; border: 1px solid var(--border); border-left-width: 0; color: var(--text);
    cursor: pointer; user-select: none; transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s;
}
.a-radio > label:first-of-type { border-left-width: 1px; border-radius: var(--radius) 0 0 var(--radius); }
.a-radio > label:last-of-type { border-radius: 0 var(--radius) var(--radius) 0; }
.a-radio > label:hover { color: var(--primary); }
.a-radio > input:checked + label { z-index: 1; color: var(--primary); border-color: var(--primary); box-shadow: -1px 0 0 0 var(--primary); }
.a-radio > input:checked + label:first-of-type { box-shadow: none; }
.a-radio.solid > input:checked + label { color: #fff; background: var(--primary); }
.a-radio > input:focus-visible + label { box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.12); }
.size-lg .a-radio > label { height: 40px; line-height: 38px; font-size: 16px; }

/* 체크박스 위에 그린 antd Switch */
input.a-switch {
    appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 22px; margin: 0;
    border-radius: 100px; background: rgba(0, 0, 0, 0.25); cursor: pointer; transition: background-color .2s; vertical-align: middle;
}
input.a-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2); transition: left .2s;
}
input.a-switch:checked { background: var(--primary); }
input.a-switch:checked::after { left: 24px; }
input.a-switch:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); }

/* antd Tabs type="card" (카드형 탭) */
.a-tabs { display: flex; gap: 2px; margin: 0 0 16px; border-bottom: 1px solid var(--split); }
.a-tab {
    margin-bottom: -1px; padding: 8px 16px; background: #fafafa; border: 1px solid var(--split);
    border-radius: var(--radius) var(--radius) 0 0; font: inherit; color: var(--text); cursor: pointer;
    transition: color .3s, background-color .3s;
}
.a-tab:hover { color: var(--primary-hover); }
.a-tab.active { background: #fff; border-bottom-color: #fff; color: var(--primary); }

/* sms-web BaseDivider: 흐린 선, 또는 가운데 제목이 있는 선 */
.a-divider { display: flex; align-items: center; margin: 16px 0; white-space: nowrap; }
.a-divider::before, .a-divider::after { content: ''; flex: 1; border-top: 1px solid rgba(173, 169, 169, 0.4); }
.a-divider > span { padding: 0 1em; }
hr.a-line { margin: 24px 0; border: 0; border-top: 1px solid rgba(173, 169, 169, 0.4); }

/* 작은 버튼 (antd size="small")과 회원 찾기 카드의 검색 줄 */
.btn-sm { height: 24px; padding: 0 7px; font-size: 14px; }
.a-search { display: flex; align-items: flex-start; margin-bottom: 24px; }
.a-search > input[type] { flex: 1 1 auto; width: auto; min-width: 0; }
.a-search > .btn { flex: none; }
.a-btns { display: inline-flex; gap: 8px; justify-content: center; }

/* 발송모듈 관리: antd Tag (사용 중 / 선택됨), Alert (아직 저장된 설정 없음), 더 넓은 입력란, 그리고 .a-hform의
   컨트롤 아래에 줄 맞춰 놓는 버튼 */
.a-tag {
    display: inline-block; padding: 0 7px; font-size: 12px; line-height: 20px; white-space: nowrap;
    background: #fafafa; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.a-tag.green { color: #389e0d; background: #f6ffed; border-color: #b7eb8f; }
.a-alert {
    margin-bottom: 24px; padding: 8px 15px; line-height: 1.5715;
    background: #e6f7ff; border: 1px solid #91d5ff; border-radius: var(--radius);
}
.a-alert.warning { background: #fffbe6; border-color: #ffe58f; }
input.w-360, select.w-360 { width: 360px; max-width: 100%; }
.a-hform .a-offset { margin-left: 16.666667%; }

/* antd Row/Col 그리드: sm(576px)부터 3열, md(768px)부터 2열 */
.a-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.a-cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 767px) { .a-cols2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .a-cols3 { grid-template-columns: minmax(0, 1fr); } }

/* 어드민 대시보드: 카드 사이를 띄우고, 일별 · 주간별 · 월별 표를 각자 테두리 친 칸으로 나눈다
   (칸 머리는 파란 띠 + 왼쪽 강조선, 표 머리는 진하게). 칸들은 높이를 맞춘다 */
.dash.a-stack > * + * { margin-top: 20px; }
.dash .a-card-head { background: #fafafa; border-bottom-color: var(--border); }
.dash .a-card-title { font-size: 17px; font-weight: 600; }
.dash .a-card-title b { font-size: 20px; margin: 0 2px; }
.dash-panel { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff; }
.dash-panel-head {
    display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
    background: #e6f4ff; border-bottom: 1px solid #91caff; box-shadow: inset 3px 0 0 var(--primary);
    font-size: 15px; font-weight: 600; color: var(--primary-dark);
}
.dash-panel-note { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.dash-panel table.a-table th { background: #f5f5f5; color: var(--text); font-weight: 600; border-bottom-color: var(--border); }
.dash-panel table.a-table tbody tr:last-child > td { border-bottom: 0; }

/* ===== 대리점관리 (sms-web Agency: 흰 바탕의 BaseTemplate width="100%" — 위쪽 60px 공간 + 20px 패딩,
   페이지 옆 200px 메뉴 칸. 카드 / 표 / 폼은 위의 관리자 클래스를 쓴다) ===== */
.agency-body { background: #fff; }
.container.agency-page { max-width: none; padding: 80px 20px 20px; }
.agency-point-label { margin-right: 10px; }

/* ===== 반응형: 작은 화면에서는 sider가 상단 바로 바뀐다 ===== */
@media (max-width: 768px) {
    .sider { position: static; width: 100%; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
    .sider .sider-logo { padding: 10px 16px; }
    .sider .sider-logo img { height: 32px; }
    .sider .menu { display: flex; flex-wrap: wrap; flex: 1; }
    .sider .menu a, .sider .menu button { padding: 0 12px; height: 44px; line-height: 44px; }
    .sider ~ .container, .sider ~ .homebg { margin-left: 0; }
    .container { padding: 16px; }
    .narrow-col { padding-top: 0; }
    .container.agency-page { padding: 16px; }
    .admin-split { flex-direction: column; }
    .a-vmenu { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid var(--split); }
}