:root {
  --sidebar-width: 224px;
  --surface: #ffffff;
  --page: #f5f7fb;
  --ink: #161b25;
  --muted: #6b7280;
  --line: #e6eaf0;
  --brand: #2854f0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, "Noto Sans KR", "Segoe UI", sans-serif;
}

.login-shell { min-height: 100vh; place-items: center; background: #f3f4f6; }
.login-card { width: min(100%, 500px); border: 1px solid #dde1e6; border-radius: 12px; }
.login-card.shadow-lg { box-shadow: 0 4px 18px rgba(20, 28, 40, .06) !important; }
.login-card .brand-mark { background: #303843; border-radius: 8px; }
.brand-mark { width: 40px; height: 40px; display: inline-grid; place-items: center; color: white; background: var(--brand); border-radius: 12px; font-weight: 800; }
.app-logo { width: 125px; height: 40px; object-fit: contain; object-position: left center; }
.main-logo { width: 190px; height: 52px; object-fit: contain; object-position: left center; }
.login-card .form-control, .login-card .input-group-text { min-height: 48px; }
.login-brand { display: flex; flex-direction: row; align-items: center; gap: 18px; margin: 0 0 28px; text-align: left; }
.login-brand-logo { height: 70px; display: grid; place-items: center; flex: 0 0 220px; }
.login-brand .app-logo { width: 220px; height: 70px; object-position: left center; }
.login-brand h1 { display: block; margin: 0; color: #1d2735; font-size: 1.1rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.login-brand p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.support-info { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.support-info strong { grid-column: 1; grid-row: 1; color: var(--ink); }
.support-info b { color: var(--brand); font-size: 1rem; }
.support-info b { grid-column: 1; grid-row: 2; }
.support-info span:nth-of-type(1) { grid-column: 2; grid-row: 1; text-align: right; }
.support-info span:nth-of-type(2) { grid-column: 2; grid-row: 2; text-align: right; }
.internal-account-line { display: flex; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.internal-account-line span { min-width: 68px; color: var(--muted); }
.login-card #verification-request:disabled {
  background: #e9ecef;
  border-color: #d5d9de;
  color: #7a828c;
  cursor: not-allowed;
  opacity: 1;
}

.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; }
.side-nav { min-height: 100vh; background: #151922; color: #d7dce7; padding: 24px 14px; }
.side-nav .brand { padding: 0 12px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.side-nav .nav-link { color: #b8c0ce; border-radius: 10px; padding: 12px; margin: 4px 0; }
.side-nav .nav-link.active, .side-nav .nav-link:hover { background: #2a3448; color: white; }
.app-content { min-width: 0; }
.app-shell.menu-collapsed { grid-template-columns: minmax(0, 1fr); }
.menu-backdrop, .menu-close { display: none; }
.topbar { min-height: 68px; display: flex; align-items: center; gap: 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.workspace-tabs { display: flex; gap: 8px; flex: 1; min-width: 0; overflow-x: auto; padding: 8px 0; }
.workspace-tab { display: flex; flex-shrink: 0; align-items: center; border: 1px solid var(--line); border-radius: 8px; }
.workspace-tab.selected { border-color: var(--brand); background: #eef2ff; }
.workspace-tab .open-tab { background: transparent; white-space: nowrap; }
.tab-close { border: 0; background: transparent; padding: 6px 10px; border-radius: 6px; color: var(--muted); }
.tab-close:hover { background: #e1e7f5; color: var(--ink); }
.user-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; }
.user-menu { position: relative; }
.user-menu-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1050; min-width: 112px; padding: 5px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(15, 23, 42, .14); }
.open-tab { background: #eef2ff; color: #3349b9; border: 0; border-radius: 8px; padding: 8px 12px; font-size: .875rem; }
.page-body { padding: 32px; }
.info-card, .sms-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }

.sms-reference-layout { padding: 8px 0; }
/* 두 열의 높이를 맞춥니다. 왼쪽 메시지 입력칸이 늘어나 오른쪽(발송대상~발송 버튼) 높이와 같아집니다. */
/* 메시지 입력(왼쪽)은 440px로 고정하고, 남는 너비는 발송대상(오른쪽) 조건·목록이 씁니다.
   400px보다 좁으면 문구 삽입 칩 다섯 개가 한 줄에 들어가지 않으므로, 여유를 두어 440px로 둡니다.
   (440 + 간격 24 + 오른쪽 최소 420 + 본문 여백이 991px 안에 들어가므로, 그보다 좁은 화면은 아래 미디어쿼리로 위아래 배치) */
.sms-layout { display: grid; grid-template-columns: 440px minmax(420px, 1fr); gap: 24px; align-items: stretch; }
.sms-composer { display: flex; flex-direction: column; }
/* Bootstrap의 textarea.form-control 최소 높이보다 우선하도록 선택자를 한 단계 구체화합니다. 높이는 열 높이를 따르므로 크기 조절은 막습니다. */
.sms-composer .message-box { flex: 1 1 auto; min-height: 260px; resize: none; }
.message-box { min-height: 260px; resize: vertical; border-radius: 14px; border-color: var(--line); font-size: 1.05rem; padding: 20px; }
.message-box:focus { box-shadow: 0 0 0 .25rem rgba(40,84,240,.14); border-color: var(--brand); }
.byte-count { color: var(--brand); font-size: 1.2rem; font-weight: 800; }
/* 발송대상 그리드 높이 : 한 페이지의 행(--grid-rows)이 세로 스크롤 없이 모두 보이는 높이입니다.
   --grid-rows는 페이지 크기(10·15·30·50·100, 기본 10)이며 페이지 크기를 바꾸면 smsweb-sms.js가 바꿉니다. (applyRecipientGridRows)
   머리글 49px + 행 42px × 행 수 + 페이지 영역 42px + 테두리 4px. rowHeight·headerHeight를 바꾸면 함께 맞춥니다. */
.grid-host { --grid-rows: 10; height: calc(49px + 42px * var(--grid-rows) + 42px + 4px); overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.sms-send-button { min-height: 40px; }
/* SMS 메시지 입력 : 자주쓰는 문자·이모티콘·특수부호 칩 버튼 */
.sms-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.sms-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--page); color: var(--ink); font-size: .85rem; font-weight: 600; line-height: 1.2; transition: background .15s, border-color .15s, color .15s; }
.sms-chip .bi { color: var(--brand); font-size: .95rem; }
.sms-chip:hover { border-color: rgba(40,84,240,.45); background: rgba(40,84,240,.06); color: var(--brand); }
.sms-chip:focus-visible, .sms-action:focus-visible, .sms-sender-change:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(40,84,240,.25); }
/* 발신번호 줄 : 아이콘 · 라벨 · 번호 · [변경] */
.sms-sender-line { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); color: var(--muted); font-size: .9rem; }
.sms-sender-line .bi { color: var(--brand); }
.sms-sender-line strong { color: var(--ink); font-size: .95rem; letter-spacing: .02em; }
.sms-sender-change { margin-left: auto; padding: 3px 12px; border: 1px solid rgba(40,84,240,.35); border-radius: 999px; background: var(--surface); color: var(--brand); font-size: .8rem; font-weight: 700; }
.sms-sender-change:hover { background: var(--brand); color: #fff; }
/* 내 문자함 · 문자저장 · 초기화 */
.sms-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sms-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(22,27,37,.04); transition: background .15s, border-color .15s, color .15s; }
.sms-action .bi { color: var(--brand); font-size: 1.05rem; }
.sms-action:hover { border-color: rgba(40,84,240,.45); background: rgba(40,84,240,.05); color: var(--brand); }
/* 발송대상 조회 : 선택회원 조건 영역입니다. (회원별매출현황·SMS전송현황 탭은 삭제, 탭 막대 없음) 조건은 칸 너비에 맞춰 여러 열로 배치합니다. */
.sms-target-body { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--page); container-type: inline-size; }
.sms-target-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 8px 16px; align-items: center; }
.sms-target-field { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: .8rem; font-weight: 600; }
/* 기간(~)·값 + 이상/이하처럼 입력칸이 두 개인 조건은 두 칸 너비를 차지합니다. */
.sms-target-range { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sms-target-range .form-control { min-width: 0; }
.sms-target-range > .form-select { flex: 0 0 90px; }
/* 회원검색(옵션 + 검색어/기간)·기간검색(기간 + 유형 + 값 + 이상/이하)은 입력칸이 많아 한 줄 전체를 차지합니다. */
/* 입력칸이 좁아지면 날짜가 잘리지 않도록 다음 줄로 넘깁니다. 날짜 기간이 가장 넓고, 값 입력칸이 그다음입니다. */
.sms-target-period { flex-wrap: wrap; }
.sms-target-period > .form-select { flex: 0 0 120px; }
.sms-target-period > .form-control { flex: 1 1 90px; }
.sms-target-period > .sms-target-range { flex: 2 1 260px; }
.sms-target-range input[type="date"] { min-width: 0; flex: 1 1 0; }
/* 좁은 화면에서 한 열만 들어가면 범위 조건도 한 칸(한 줄)만 차지합니다. */
/* 체크박스 다중 선택 드롭다운 (smsweb-common-lists.js createCheckSelect) : 고른 항목이 길면 말줄임으로 표시합니다. */
.sms-check-select > .form-select { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sms-check-menu { min-width: 100%; max-height: 260px; overflow-y: auto; }
.sms-check-menu .form-check { margin: 0; padding: 4px 12px 4px 36px; font-weight: 500; }
/* 발송대상 그리드 : 오류메시지가 있어 발송할 수 없는 회원은 흐리게 표시하고 선택할 수 없습니다. */
.ag-row.sms-row-disabled { color: var(--muted); }
.sms-cell-error { color: #dc2626; font-weight: 600; }
/* 열 선택 팝업 : 열 이름 체크박스를 여러 열로 배치합니다. */
.sms-column-chooser { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 12px; text-align: left; }
/* 발송대상 제목 아래 줄 : 잔여 수량 배지(왼쪽)와 선택·사용 수량 배지(오른쪽)를 양 끝에 둡니다.
   선택이 1건 이상이면 선택 배지를 강조합니다. (.is-active) */
.sms-stats { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.sms-stat { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px rgba(22,27,37,.04); }
.sms-stat .bi { color: var(--brand); font-size: .95rem; }
.sms-stat strong { color: var(--ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
/* 잔여 수량 배지 안 "개" 뒤의 [충전] 버튼 : 배지 안에 들어가는 작은 알약 모양, 채운 색으로 동작 버튼임을 구분합니다. */
.sms-stat-remaining { padding-right: 5px; }
.sms-charge-button { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 10px; border: 1px solid #16a34a; border-radius: 999px; background: #16a34a; color: #fff; font-size: .78rem; font-weight: 700; line-height: 1.5; white-space: nowrap; transition: background .15s, border-color .15s; }
.sms-charge-button .bi { color: #fff; font-size: .8rem; }
.sms-charge-button:hover { background: #15803d; border-color: #15803d; }
.sms-charge-button:focus-visible { outline: none; box-shadow: 0 0 0 .2rem rgba(22,163,74,.3); }
.sms-stat-selected { transition: background .15s, border-color .15s, color .15s; }
.sms-stat-selected.is-active { border-color: var(--brand); background: var(--brand); color: rgba(255,255,255,.85); }
.sms-stat-selected.is-active .bi, .sms-stat-selected.is-active strong { color: #fff; }
/* 선택 배지 안 "건" 뒤의 사용 수량 : 구분선으로 나누고, 잔여 수량을 넘으면(is-over) 빨간 알약으로 강조합니다. */
.sms-usage { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 10px; border-left: 1px solid currentColor; }
.sms-usage.is-over { padding: 1px 10px; border: 0; border-radius: 999px; background: #dc2626; color: #fff; }
.sms-usage.is-over strong { color: #fff; }
/* 선택 팝업(SweetAlert2) : 문구는 세로 목록, 이모티콘·특수부호는 격자 버튼 */
.sms-picker-list { display: grid; gap: 8px; text-align: left; }
.sms-picker-list .btn { text-align: left; white-space: normal; }
.sms-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.sms-picker-grid .btn { min-height: 42px; padding: 4px; }
.sms-saved-grid { height: 280px; text-align: left; }
/* 메시지 byte 표시 : SMS/LMS 배지 + byte 수. 2,000 byte를 넘으면 빨간색 (smsweb-sms.js updateCounts) */
.sms-byte-info { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.sms-type-badge { padding: 1px 8px; border-radius: 999px; background: var(--page); border: 1px solid var(--line); color: var(--ink); font-size: .75rem; font-weight: 800; }
.sms-type-badge.is-lms { border-color: #f59f00; background: #fff4e6; color: #c25e00; }
.sms-byte-info.is-over, .sms-byte-info.is-over .byte-count { color: #dc2626; }
/* 발신번호 선택(등록 번호가 여러 개일 때) · 광고 문구 확인 · 잔여 수량 새로고침 */
.sms-sender-select { width: auto; min-width: 150px; }
.sms-refuse-check { font-size: .85rem; color: var(--muted); }
.sms-refresh-button { padding: 0 4px; border: 0; background: transparent; color: var(--muted); line-height: 1; }
.sms-refresh-button:hover { color: var(--brand); }
/* ---- 공통 팝업(SweetAlert2) : smsweb-common.js의 Swal.mixin이 모든 팝업에 아래 클래스를 붙입니다. ---- */
/* 둥근 모서리·여백을 맞추고, 아이콘을 줄여 제목·본문이 중심이 되게 합니다. 화면별 width 옵션은 그대로 적용됩니다. */
.sms-popup { padding: 28px 24px 22px; border-radius: 20px; font-family: inherit; }
.sms-popup .swal2-icon { margin: 4px auto 14px; font-size: .72rem; }
.sms-popup .swal2-close { width: 36px; height: 36px; margin: 10px 10px 0 0; border-radius: 10px; color: var(--muted); font-size: 1.8rem; }
.sms-popup .swal2-close:hover { background: var(--page); color: var(--ink); }
.sms-popup .swal2-close:focus { box-shadow: none; }
/* 제목·본문 : 한글 단어 중간에서 줄이 바뀌지 않게 합니다. */
.sms-popup-title { padding: 0; margin: 0 0 8px; color: var(--ink); font-size: 1.2rem; font-weight: 800; line-height: 1.45; word-break: keep-all; }
.sms-popup-body { margin: 0; padding: 0; color: var(--muted); font-size: .95rem; line-height: 1.65; word-break: keep-all; }
.sms-popup-body strong { color: var(--ink); }
/* 버튼 : 팝업 너비를 나눠 쓰는 같은 크기의 둥근 버튼. 취소(왼쪽)·확인(오른쪽) */
.sms-popup-actions { width: 100%; margin: 22px 0 0; padding: 0; gap: 8px; flex-wrap: nowrap; }
.sms-popup-button { flex: 1 1 0; min-height: 44px; margin: 0; border-radius: 12px; font-weight: 700; }
/* 취소 버튼 : 흰 팝업 위에서도 버튼으로 보이도록 옅은 회색을 채웁니다. */
.btn-light.sms-popup-button { border-color: #e3e7ee; background: #eef1f5; color: var(--ink); }
.btn-light.sms-popup-button:hover { border-color: #d5dbe4; background: #e3e7ee; }
.sms-popup-button:focus { box-shadow: none; }
.sms-popup-button:focus-visible { outline: 2px solid rgba(40,84,240,.45); outline-offset: 2px; }
.sms-popup-footer { margin: 16px 0 0; padding: 12px 0 0; color: var(--muted); font-size: .8rem; }
.sms-popup .swal2-validation-message { margin: 14px 0 0; border-radius: 10px; font-size: .85rem; }
/* 로딩(발송 중) 팝업 : 버튼 대신 로딩 표시만 있으므로 위 여백만 줍니다. */
.sms-popup .swal2-loader { margin: 6px auto 0; }

/* ---- 발송 차단·일시 제한·경고 안내 팝업 (smsweb-sms-guard.js, 설계 문서 7-1절 B) ---- */
/* 배치 : 아이콘 → 제목 → 한 줄 안내 → 정보 상자(사유 · 차단일/기간) → 고객센터 안내 → 확인 */
.sms-block-popup { padding: 32px 28px 24px; }
.sms-block-icon { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; font-size: 1.75rem; font-weight: 800; }
.sms-block-icon.is-block { background: #fde8e8; color: #c92a2a; }
.sms-block-icon.is-restrict { background: #fff4e6; color: #e8590c; }
.sms-block-title { margin: 0 0 8px; color: var(--ink); font-size: 1.3rem; font-weight: 800; line-height: 1.45; word-break: keep-all; }
.sms-block-text { margin: 0; color: var(--muted); line-height: 1.6; word-break: keep-all; }
/* 정보 상자 : 항목명(왼쪽 고정 너비) · 값(왼쪽 정렬) 줄을 구분선으로 나눕니다. 긴 사유도 값 칸 안에서 줄바꿈됩니다. */
.sms-block-box { margin: 18px 0 16px; padding: 4px 16px; border-radius: 14px; text-align: left; }
.sms-block-box.is-block { border: 1px solid #ffd8d8; background: #fff5f5; }
.sms-block-box.is-restrict { border: 1px solid #f0e4c8; background: #fbf7ee; }
.sms-block-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; padding: 11px 0; }
.sms-block-row + .sms-block-row { border-top: 1px dashed rgba(0,0,0,.08); }
.sms-block-row dt { font-size: .85rem; font-weight: 700; }
.sms-block-box.is-block dt { color: #c92a2a; }
.sms-block-box.is-restrict dt, .sms-block-arrow { color: #a57a2c; }
.sms-block-row dd { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.55; word-break: keep-all; }
.sms-block-row dd strong { font-size: 1.05rem; font-weight: 800; }
.sms-block-badge { margin-left: 8px; padding: 1px 8px; border: 1px solid #ffc9c9; border-radius: 8px; background: #fff; color: #c92a2a; font-size: .78rem; font-weight: 700; vertical-align: 1px; }
.sms-block-arrow { margin: 0 8px; }
.sms-block-help { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; word-break: keep-all; }
.sms-block-help strong { color: var(--ink); }
/* SMS 발송 버튼 사용 불가(등록 발신번호 없음·메시지 길이 초과·전송 중) : 회색으로 바꿔 누를 수 없음을 분명히 합니다. */
.sms-send-button:disabled { border-color: #adb5bd; background: #adb5bd; color: #fff; opacity: 1; cursor: not-allowed; }
.sms-send-disabled-reason { margin-top: 6px; color: #dc2626; font-size: .85rem; text-align: center; }
/* 차단으로 SMS 화면을 열지 않았을 때 팝업 뒤에 남는 본문 */
.sms-blocked-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 60vh; color: var(--muted); }
.sms-blocked-placeholder .bi { font-size: 2.5rem; }
/* 발신번호 변경 안내 팝업 : 안내 문단 · 변경 절차(회색 상자 안 번호 목록) */
.sms-sender-guide { text-align: left; font-size: 15px; line-height: 1.7; }
.sms-sender-guide h6 { margin: 20px 0 10px; font-weight: 700; }
.sms-sender-guide ol { margin: 0; padding: 16px 16px 16px 36px; border-radius: 8px; background: #f7f7f8; }
.sms-sender-guide a { font-weight: 700; }
/* SMS 발송 시간 : 즉시/예약 선택과 예약 일시 */
.sms-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.sms-reserve-input { width: auto; min-width: 210px; }
.ag-theme-quartz {
  --ag-border-color: #e1e6ed;
  --ag-header-background-color: #ffffff;
  --ag-row-border-color: #e8edf3;
  --ag-selected-row-background-color: #eaf2ff;
  --ag-row-hover-color: #f6f9fd;
  --ag-font-family: Inter, "Noto Sans KR", sans-serif;
  --ag-header-column-separator-display: block;
  --ag-header-column-separator-color: #dce3eb;
}

@media (max-width: 991px) {
  .app-shell { grid-template-columns: 1fr; }
  .side-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(var(--sidebar-width), 85vw);
    min-height: 100dvh;
    overflow-y: auto;
    padding: 16px 12px;
    z-index: 1045;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .16);
  }
  .menu-close { display: block; margin: 0 0 16px auto; }
  .app-shell:not(.menu-collapsed) > .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 1040;
  }
  .side-nav .brand { padding-bottom: 12px; }
  .page-body { padding: 20px; }
  .sms-layout { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; padding-top: 12px; }
  .workspace-tabs { order: 3; flex-basis: 100%; }
  .user-actions { margin-left: auto; }
}

/* SMS Web 화면의 색상·여백·카드 대비를 개선하는 테마 보정 영역입니다. */
:root {
  --page: #eef3f9;
  --surface: #ffffff;
  --ink: #1d2939;
  --muted: #667085;
  --line: #dbe4f0;
  --brand: #3159c8;
}

body { background: linear-gradient(135deg, #f5f8fc 0%, #edf2f8 100%); }
.login-shell { background: radial-gradient(circle at top left, #e7eeff, #f3f6fa 58%, #e8eff7); }
.login-card { border-color: #d7e1ee; border-radius: 18px; }
.login-card.shadow-lg { box-shadow: 0 18px 48px rgba(42, 61, 94, .13) !important; }
.side-nav { background: linear-gradient(180deg, #1f2b45 0%, #151d30 100%); box-shadow: 3px 0 18px rgba(16, 24, 40, .10); }
.side-nav .nav-link { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.side-nav .nav-link.active, .side-nav .nav-link:hover { background: linear-gradient(90deg, #3c62cb, #3159c8); box-shadow: 0 6px 14px rgba(29, 52, 117, .24); transform: translateX(2px); }
.topbar { box-shadow: 0 2px 10px rgba(35, 53, 84, .05); }
.open-tab { background: #e9efff; color: #284cae; font-weight: 700; }
.info-card, .sms-panel { border-color: #dce5f1; box-shadow: 0 8px 24px rgba(35, 53, 84, .06); }
.form-control, .form-select { border-color: #ccd8e7; }
.form-control:focus, .form-select:focus { border-color: #6686dd; box-shadow: 0 0 0 .25rem rgba(49, 89, 200, .14); }
.btn-primary { background: #3159c8; border-color: #3159c8; }
.btn-primary:hover, .btn-primary:focus { background: #2649ad; border-color: #2649ad; }

/* Ant Design Pro 서브 페이지를 참고한 Razor 공통 셸 스타일입니다. */
.pro-page { background: #f5f7fa; }
.pro-shell { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns .2s ease; }
.pro-shell.menu-collapsed { grid-template-columns: 64px minmax(0, 1fr); }
.pro-menu { position: relative; overflow: visible; background: #fff; border-right: 1px solid #edf0f5; color: #4b5565; min-height: 100vh; padding: 18px 12px; }
.pro-brand { align-items: center; color: #1f2937; display: flex; font-weight: 700; gap: 10px; height: 38px; padding: 0 8px; white-space: nowrap; }
.pro-brand img { height: 30px; max-width: 120px; object-fit: contain; }.pro-collapse-button { background: #fff; border: 1px solid #e7ebf0; border-radius: 50%; box-shadow: 0 2px 6px rgba(16, 24, 40, .10); color: #8a94a6; height: 26px; padding: 0; position: absolute; right: -13px; top: 68px; width: 26px; z-index: 10; }
.menu-collapsed .pro-menu { padding-left: 12px; padding-right: 12px; }.menu-collapsed .pro-brand { justify-content: center; padding: 0; }.menu-collapsed .pro-brand img { width: 30px; }.menu-collapsed .pro-brand span, .menu-collapsed .pro-nav-group, .menu-collapsed .pro-menu-footer { display: none; }.menu-collapsed .pro-nav a { font-size: 0; justify-content: center; padding-left: 0; padding-right: 0; }.menu-collapsed .pro-nav a i { font-size: 1rem; width: auto; }
.pro-nav { margin-top: 28px; }.pro-nav a { align-items: center; border-radius: 8px; color: #566070; display: flex; gap: 12px; margin: 4px 0; padding: 11px 12px; text-decoration: none; transition: background .15s ease, color .15s ease; }.pro-nav a:hover { background: #f2f6ff; color: #3159c8; }.pro-nav a.active { background: #e8efff; color: #3159c8; font-weight: 700; }.pro-nav i { font-style: normal; width: 16px; }.pro-nav-group { color: #98a1b1; font-size: .75rem; font-weight: 700; letter-spacing: .04em; margin: 24px 12px 8px; }.pro-menu-footer { bottom: 20px; color: #a1a9b6; font-size: .72rem; left: 24px; position: absolute; white-space: nowrap; }

/* 2·3뎁스 메뉴는 같은 .pro-nav-submenu 클래스를 중첩해 표현합니다. */
.pro-nav-submenu {
  margin-left: 0;
  padding-left: 24px;
  border-left: 0;
}
.pro-nav-submenu .pro-nav-submenu {
  margin-left: 0;
  padding-left: 24px;
}
.pro-nav-submenu a {
  font-size: .875rem;
  padding-bottom: 9px;
  padding-top: 9px;
}
.pro-nav-submenu a:hover {
  background: #f2f6ff;
  color: #3159c8;
}
.pro-nav-submenu a.active {
  background: #e8efff;
  color: #3159c8;
  font-weight: 700;
}
.menu-collapsed .pro-nav-submenu {
  display: none;
}
.pro-nav-toggle,
.pro-nav-leaf {
  appearance: none;
  font: inherit;
  text-align: left;
  width: 100%;
}
.pro-nav-toggle {
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(0, 0, 0, .88);
  cursor: pointer;
  display: flex;
  font-size: .875rem;
  justify-content: space-between;
  margin: 0;
  min-height: 40px;
  padding: 0 12px;
}
.pro-nav-chevron { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.pro-nav-toggle[aria-expanded="true"] .pro-nav-chevron { transform: rotate(180deg); }
.pro-nav-toggle:hover { background: #f5f5f5; }
.pro-nav-level-1 {
  font-weight: 400;
}
.pro-nav-level-2 {
  background: transparent;
}
.pro-nav-leaf {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: rgba(0, 0, 0, .88);
  cursor: pointer;
  display: flex;
  font-size: .875rem;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 40px;
  padding: 0 12px;
}
.pro-nav-leaf > i {
  align-items: center;
  display: inline-flex;
  flex: 0 0 16px;
  font-size: 16px;
  justify-content: center;
  line-height: 1;
  width: 16px;
}
.pro-nav-leaf:hover,
.pro-nav-leaf.active {
  background: #f5f5f5;
  color: rgba(0, 0, 0, .88);
}
.pro-nav-leaf.active {
  background: #e6f4ff;
  color: #1677ff;
  font-weight: 500;
}
/* 모든 메뉴는 Ant Design Pro와 같은 행 높이·선택 상태를 공유합니다. */
.pro-nav > a,
.pro-nav-toggle,
.pro-nav-leaf {
  min-height: 40px;
  border-radius: 6px;
}
.pro-nav > a,
.pro-nav-submenu a {
  margin: 0;
  padding: 0 12px;
}
.pro-nav > a:hover,
.pro-nav-submenu a:hover {
  background: #f5f5f5;
  color: rgba(0, 0, 0, .88);
}
.pro-nav > a.active,
.pro-nav-submenu a.active {
  background: #e6f4ff;
  color: #1677ff;
  font-weight: 500;
}
.menu-collapsed .pro-nav-toggle {
  display: none;
}
/* 아이콘은 같은 16px 칸을 쓰고, 선택 배경은 하위 메뉴 행 전체에 적용합니다. */
.pro-nav > a,
.pro-nav-submenu a,
.pro-nav-label {
  gap: 8px;
}
.pro-nav > a > i,
.pro-nav-submenu a > i,
.pro-nav-label > i {
  align-items: center;
  display: inline-flex;
  flex: 0 0 16px;
  font-size: 16px;
  justify-content: center;
  line-height: 1;
  width: 16px;
}
.pro-nav-label {
  align-items: center;
  display: inline-flex;
  min-width: 0;
}
.pro-nav-submenu,
.pro-nav-submenu .pro-nav-submenu {
  padding-left: 0;
}
.pro-nav-submenu > a {
  padding-left: 36px;
}
.pro-nav-submenu .pro-nav-submenu > a {
  padding-left: 60px;
}
/* 계층별 들여쓰기와 행 간격을 통일합니다. */
.pro-nav-menu-group + .pro-nav-menu-group {
  margin-top: 16px;
}
.pro-nav-item > a,
.pro-nav-item > .pro-nav-toggle {
  min-height: 40px;
}
.pro-nav-item > a {
  gap: 8px;
  margin: 0;
  padding: 0 12px;
}
.pro-nav-item > a:hover {
  background: #f5f5f5;
  color: rgba(0, 0, 0, .88);
}
.pro-nav-item > a.active {
  background: #e6f4ff;
  color: #1677ff;
  font-weight: 500;
}
.pro-nav-item > .pro-nav-leaf {
  padding: 0 12px;
}
.pro-nav-submenu > .pro-nav-leaf {
  padding-left: 36px;
}
.pro-nav-submenu > .pro-nav-leaf:hover,
.pro-nav-submenu > .pro-nav-leaf.active {
  background: #e6f4ff;
  color: #1677ff;
  font-weight: 500;
}
.pro-nav-submenu {
  padding-block: 4px;
}
.pro-nav-submenu > * + * {
  margin-top: 4px;
}
.pro-nav-submenu > .pro-nav-item > .pro-nav-toggle {
  padding-left: 36px;
}
.pro-nav-submenu .pro-nav-submenu > .pro-nav-leaf {
  padding-left: 60px;
}
/* 1레벨 링크와 부모 메뉴를 같은 Ant Design Pro 메뉴 행으로 보입니다. */
.pro-nav > a,
.pro-nav-item > .pro-nav-toggle,
.pro-nav-level-1 {
  min-height: 40px;
  margin: 0;
}
.pro-nav-item {
  position: relative;
}
/* 아이콘 메뉴에서는 부모 아이콘을 남기고, 하위 메뉴는 우측 팝오버로 표시합니다. */
.menu-collapsed .pro-nav-item > .pro-nav-toggle {
  display: flex;
  justify-content: center;
  padding: 0;
  width: 40px;
}
.menu-collapsed .pro-nav-menu-group > .pro-nav-item > .pro-nav-leaf {
  font-size: 0;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
.menu-collapsed .pro-nav-menu-group > .pro-nav-item > .pro-nav-leaf > i {
  font-size: 1rem;
}
.menu-collapsed .pro-nav-item > .pro-nav-toggle .pro-nav-label > span,
.menu-collapsed .pro-nav-item > .pro-nav-toggle .pro-nav-chevron {
  display: none;
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu {
  display: none;
  position: absolute;
  top: 0;
  left: 52px;
  z-index: 20;
  width: 196px;
  margin: 0;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .08), 0 3px 6px rgba(0, 0, 0, .12);
}
.menu-collapsed .pro-nav-item:hover > .pro-nav-submenu,
.menu-collapsed .pro-nav-item:focus-within > .pro-nav-submenu {
  display: block;
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu a {
  font-size: .875rem;
  justify-content: flex-start;
  padding-right: 12px;
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu .pro-nav-toggle {
  display: flex;
  font-size: .875rem;
  justify-content: flex-start;
  padding-left: 12px;
  width: 100%;
  white-space: nowrap;
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu .pro-nav-toggle .pro-nav-chevron {
  display: block;
  margin-left: auto;
  transform: rotate(-90deg);
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu > a {
  padding-left: 12px;
}
.menu-collapsed .pro-nav-item > .pro-nav-submenu > .pro-nav-leaf {
  font-size: .875rem;
  justify-content: flex-start;
  padding-left: 12px;
}
.menu-collapsed .pro-nav-submenu .pro-nav-item > .pro-nav-submenu {
  left: calc(100% + 8px);
  top: -8px;
}
.menu-collapsed .pro-nav-submenu .pro-nav-item:hover > .pro-nav-submenu,
.menu-collapsed .pro-nav-submenu .pro-nav-item:focus-within > .pro-nav-submenu {
  display: block;
}
.menu-collapsed .pro-nav-submenu .pro-nav-submenu > .pro-nav-leaf {
  padding-left: 12px;
  text-align: left;
}
.menu-collapsed .pro-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-collapsed .pro-nav-menu-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-collapsed .pro-nav-menu-group + .pro-nav-menu-group {
  margin-top: 0;
}
.menu-collapsed .pro-nav-menu-group > .pro-nav-item {
  height: 40px;
  width: 40px;
}
.pro-content { min-width: 0; }.pro-topbar { align-items: center; background: #fff; border-bottom: 1px solid #edf0f5; display: flex; height: 56px; padding: 0 24px; }.pro-icon-button { background: transparent; border: 0; color: #667085; font-size: 1.2rem; height: 34px; width: 34px; }.pro-topbar #menu-toggle { display: none; }.pro-breadcrumb { color: #98a1b1; font-size: .9rem; margin-left: 14px; }.pro-breadcrumb i { font-style: normal; margin: 0 8px; }.pro-breadcrumb strong { color: #303846; font-weight: 600; }.pro-user-actions { align-items: center; display: flex; gap: 12px; margin-left: auto; }.pro-user-button { align-items: center; background: transparent; border: 0; color: #667085; display: flex; gap: 8px; }.pro-avatar { align-items: center; background: #e8efff; border-radius: 50%; color: #3159c8; display: inline-flex; font-size: .72rem; font-weight: 700; height: 28px; justify-content: center; width: 28px; }.pro-main { padding: 28px 36px; }.pro-main .info-card, .pro-main .sms-panel { border-radius: 10px; box-shadow: none; }
/* 상단 멀티 탭 작업 영역입니다. 탭마다 iframe(?embed=1)으로 화면을 열어 상태를 유지합니다. (smsweb-workspace.js)
   본문 영역은 창 높이에 고정하고, 스크롤은 각 탭 화면(iframe) 안에서 합니다. */
.pro-shell .pro-content { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* 탭은 상단바(_Topbar) 한 줄 안에서 ☰ 버튼과 사용자 메뉴 사이를 채웁니다.
   상단바 아래쪽에 붙어 있고, 활성 탭은 본문 배경색으로 칠해 아래 화면과 이어져 보이게 합니다.
   탭이 많으면 가로 스크롤(마우스 휠로도 이동, smsweb-workspace.js)합니다. */
.pro-topbar { flex: 0 0 auto; gap: 8px; padding-left: 16px; }
.pro-tabs { display: flex; flex: 1 1 auto; align-self: stretch; align-items: flex-end; gap: 4px; min-width: 0; margin-bottom: -1px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pro-tabs::-webkit-scrollbar { display: none; }
.pro-tab { display: inline-flex; flex: 0 0 auto; align-items: center; height: 40px; background: #f1f4f8; border: 1px solid #e3e8ef; border-bottom-color: #edf0f5; border-radius: 8px 8px 0 0; color: #566070; font-size: .875rem; }
.pro-tab:hover { background: #e9edf3; }
.pro-tab.active { background: #f5f7fa; border-bottom-color: #f5f7fa; box-shadow: inset 0 2px 0 #3159c8; color: #3159c8; font-weight: 700; }
.pro-tab-label { height: 100%; padding: 0 6px 0 14px; background: transparent; border: 0; color: inherit; font: inherit; white-space: nowrap; }
.pro-tab-home .pro-tab-label { padding-right: 14px; }
.pro-tab-close { width: 20px; height: 20px; margin-right: 8px; padding: 0; background: transparent; border: 0; border-radius: 50%; color: #98a1b1; font-size: 1rem; line-height: 1; }
.pro-tab-close:hover { background: #dfe5ee; color: #303846; }
.pro-tab-label:focus-visible, .pro-tab-close:focus-visible { outline: 2px solid rgba(49, 89, 200, .5); outline-offset: -2px; border-radius: 6px; }
@media (max-width: 575px) { .pro-topbar { gap: 4px; padding-right: 12px; }.pro-user-name { display: none; } }
.pro-workspace { position: relative; flex: 1 1 auto; min-height: 0; background: #f5f7fa; }
.pro-workspace iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #f5f7fa; }
.pro-workspace iframe[hidden] { display: none; }
/* 탭 안(iframe)에 들어가는 화면 본문입니다. 메뉴·상단바 없이 본문만 표시합니다. */
.pro-embed { min-height: 100vh; }

.pro-menu-backdrop { display: none; }
/* 991px 이하: 메뉴는 기본으로 숨기고(본문이 전체 너비 사용), ☰ 버튼으로 본문 위에 펼칩니다. (smsweb-common.js) */
@media (max-width: 991px) { .pro-shell, .pro-shell.menu-collapsed { grid-template-columns: minmax(0, 1fr); }.pro-menu { position: fixed; top: 0; bottom: 0; left: 0; width: min(256px, 85vw); min-height: 100dvh; overflow-y: auto; z-index: 1045; transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s ease; }.pro-shell.menu-mobile-open .pro-menu { transform: none; visibility: visible; box-shadow: 6px 0 24px rgba(15, 23, 42, .18); }.pro-shell.menu-mobile-open .pro-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 1040; border: 0; padding: 0; background: rgba(15, 23, 42, .35); }.pro-collapse-button { display: none; }.pro-topbar #menu-toggle { align-items: center; display: inline-flex; justify-content: center; }.pro-menu { padding-top: 14px; }.pro-main { padding: 20px; }.pro-breadcrumb { display: none; } }

/* ---- SMS 발송 화면 차분한 색상 (요청 : 화면이 너무 밝음) ----
   흰색·연파랑이 넓게 깔려 눈이 부시던 것을 줄입니다. SMS 화면(.sms-reference-layout)에만 적용합니다.
   1) 바탕은 한 단계 진한 중립 회색, 메시지 입력·발송대상 두 영역은 흰 카드로 나눠 경계를 분명히 합니다.
   2) 조회 조건·칩·발신번호 줄의 연파랑 바탕을 중립 회색으로 바꿉니다.
   3) [충전]·선택 배지는 진한 색으로 채우지 않고 옅은 바탕 + 진한 글자로 바꿉니다. (경고용 빨강만 채운 색 유지)
   4) 보조 글자를 조금 진하게 해 대비를 높입니다. */
.pro-embed:has(.sms-reference-layout) { background: #e9ecf1; }
.sms-reference-layout { --muted: #5b6473; --line: #d9dee6; --soft: #f2f4f7; }
.sms-reference-layout .sms-composer,
.sms-reference-layout .sms-recipient-panel { padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
.sms-reference-layout .message-box { border-color: var(--line); background: #fcfcfd; }
/* 문구 삽입 칩(자주쓰는 문자·이모티콘·특수부호·수신자·메모)은 좁은 메시지 영역(최대 400px)에서도 한 줄로 둡니다.
   - 아이콘을 빼고 글자만 남겨 다섯 개가 한 줄에 들어가게 합니다.
   - 남는 너비는 칩들이 고르게 나눠 가져 줄 끝이 맞습니다.
   - 아주 좁은 화면에서 그래도 넘치면 줄바꿈 대신 가로로 밀어 볼 수 있게 합니다. (스크롤바는 숨김) */
.sms-reference-layout .sms-tools { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.sms-reference-layout .sms-tools::-webkit-scrollbar { display: none; }
.sms-reference-layout .sms-chip { flex: 1 0 auto; justify-content: center; padding: 5px 9px; font-size: .8rem; white-space: nowrap; }
.sms-reference-layout .sms-chip .bi { display: none; }
.sms-reference-layout .sms-chip,
.sms-reference-layout .sms-sender-line,
.sms-reference-layout .sms-type-badge:not(.is-lms) { background: var(--soft); }
.sms-reference-layout .sms-target-body { background: var(--soft); }
.sms-reference-layout .sms-stat,
.sms-reference-layout .sms-action { box-shadow: none; }
/* [충전] : 옅은 초록 바탕 + 진한 초록 글자 */
.sms-reference-layout .sms-charge-button { border-color: #b7dfc4; background: #ecf7f0; color: #1f7a3d; }
.sms-reference-layout .sms-charge-button .bi { color: #1f7a3d; }
.sms-reference-layout .sms-charge-button:hover { border-color: #1f7a3d; background: #dff1e6; }
/* 선택 배지(1건 이상) : 파랑으로 채우지 않고 옅은 파랑 바탕 + 파랑 테두리·글자 */
.sms-reference-layout .sms-stat-selected.is-active { border-color: #9fb3e6; background: #edf1fb; color: #3a4c7a; }
.sms-reference-layout .sms-stat-selected.is-active .bi,
.sms-reference-layout .sms-stat-selected.is-active strong { color: #2f4ea8; }
/* 발송대상 그리드 : 선택 행 색을 한 단계 낮춥니다. */
.sms-reference-layout .ag-theme-quartz { --ag-selected-row-background-color: #eef2fa; --ag-row-hover-color: #f5f7fa; --ag-header-background-color: #f7f8fa; }

/* 서버 생성 PNG를 실제 생성 크기(160x48)로 표시합니다. 로그인 입력창(min-height 48px)과 높이가 같습니다.
   이미지를 누르면 새 보안문자를 받습니다. (smsweb-login.js) */
.captcha-image { width: 160px; height: 48px; flex: 0 0 160px; object-fit: contain; border: 1px solid #dee2e6; border-radius: .375rem; background: #f1f3f5; cursor: pointer; }
.captcha-image:hover { border-color: #adb5bd; }
.captcha-image:focus-visible { outline: 3px solid rgba(49, 89, 200, .35); outline-offset: 1px; position: relative; z-index: 5; }
.captcha-image.captcha-busy { cursor: progress; opacity: .6; }
#captcha-input { min-width: 90px; }

/* ============================================================
   로그인 화면 (2026-10-06 정리, smsweb-login.js)
   배치 : 넓은 화면(768px 이상) = 왼쪽 안내(로고·소개·고객센터) | 오른쪽 입력
          좁은 화면 = 위 안내(로고만 간단히) · 아래 입력
   입력 : 매장 ID·아이디 한 줄 → 비밀번호 → 보안 인증 상자(이미지 보안문자·인증번호) → 로그인 → 매장 ID·아이디 저장
   위쪽 규칙(.login-shell·.login-card 등)을 이 블록이 덮어씁니다.
   ============================================================ */
.login-shell {
  min-height: 100vh;
  background:
    radial-gradient(900px 520px at 0% 0%, #dde7ff 0%, rgba(221, 231, 255, 0) 60%),
    radial-gradient(800px 480px at 100% 100%, #e1eefc 0%, rgba(225, 238, 252, 0) 55%),
    #f4f7fb;
}
.login-card {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: min(100%, 860px);
  border: 1px solid #dfe6f1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(31, 51, 92, .12);
}

/* 왼쪽 안내 */
.login-side {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 24px;
  background: linear-gradient(160deg, #2f56c4 0%, #3d68d8 55%, #4f86e6 100%);
  color: #fff;
}
.login-side-logo { display: inline-flex; align-self: flex-start; padding: 8px 14px; border-radius: 12px; background: #fff; box-shadow: 0 6px 16px rgba(16, 33, 82, .18); }
.login-side-logo .app-logo { width: 130px; height: 40px; }
.login-side h1 { margin: 22px 0 6px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.login-side-text { margin: 0 0 18px; color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.5; word-break: keep-all; }
.login-side-points { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; font-size: .88rem; }
.login-side-points li { display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .92); }
.login-side-points .bi { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .16); font-size: .85rem; }
.login-side-support { display: grid; gap: 1px; margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .2); }
.login-side-support span { color: rgba(255, 255, 255, .75); font-size: .78rem; }
.login-side-support b { font-size: 1.2rem; letter-spacing: .02em; }
.login-side-support small { color: rgba(255, 255, 255, .7); font-size: .76rem; }

/* 오른쪽 입력 */
.login-main { padding: 28px 32px 22px; background: #fff; }
.login-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.login-heading h2 { margin: 0; color: #1d2939; font-size: 1.25rem; font-weight: 700; }
.login-mode-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px 2px 6px; border-radius: 999px; background: #eaf0ff; color: #3159c8; font-size: .78rem; font-weight: 700; }
.login-form { display: grid; gap: 12px; }
.login-form .form-label { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; color: #344054; font-size: .85rem; font-weight: 600; }
/* 입력칸 아래 안내(보안문자 "숫자 6자리 입력 후 [인증요청]", 인증번호 남은 시간 등) : 잘 보이도록 글자를 키우고 진하게 합니다. */
.login-form .form-text { margin: 7px 0 3px; color: #475467; font-size: .86rem; font-weight: 500; line-height: 1.4; }
.login-form .form-text:empty { display: none; }
/* 남은 시간(초)·인증번호 받은 전화번호 : 인증번호 입력 남은 시간·보안문자 요청 제한 대기 시간을 빨간 굵은 글씨로 표시합니다. (안내 문구·팝업 공통) */
.login-countdown { color: #d92d20; font-weight: 700; }
/* 매장 ID·아이디 한 줄 (매장 ID 칸이 없으면 아이디만 전체 너비)
   매장 ID는 짧고 아이디는 최대 15자이므로 아이디 칸을 더 넓게(2 : 3) 두어 15자가 모두 보이게 합니다. */
.login-row { display: grid; grid-template-columns: 2fr 3fr; gap: 10px; }
.login-row.is-single { grid-template-columns: 1fr; }

/* 아이콘 입력칸 : 왼쪽 아이콘, 오른쪽 자물쇠(내부 로그인)·비밀번호 보기 버튼 */
.login-input { position: relative; }
.login-input > .bi:first-child { position: absolute; left: 13px; top: 50%; z-index: 5; transform: translateY(-50%); color: #98a2b3; font-size: .98rem; pointer-events: none; }
.login-card .login-input .form-control { min-height: 42px; padding-left: 38px; border-radius: 10px; font-size: .98rem; }
.login-input .form-control::placeholder { color: #b0b8c4; }
.login-input:focus-within > .bi:first-child { color: #3159c8; }
.login-input .form-control[readonly] { padding-right: 36px; background: #f2f4f8; color: #475467; cursor: default; }
.login-input .form-control[readonly]:focus { border-color: #ccd8e7; box-shadow: none; }
.login-lock { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: #98a2b3; font-size: .82rem; }
.login-card .login-input .form-control.has-eye { padding-right: 44px; }
.login-eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: #98a2b3; }
.login-eye:hover { background: #f2f4f8; color: #475467; }
.login-eye:focus-visible { outline: 3px solid rgba(49, 89, 200, .3); }

/* 보안 인증 상자 : 넓은 화면은 이미지 보안문자·인증번호를 한 줄에 나란히 둡니다. */
.login-verify-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid #e3eaf5; border-radius: 12px; background: #f7f9fe; }
.login-verify-box .form-label .bi { color: #3159c8; }
.login-card .login-verify-box .input-group > .form-control,
.login-card .login-verify-box .input-group > .btn { min-height: 42px; }
.login-verify-box .input-group > .form-control { min-width: 0; border-radius: 0 10px 10px 0; font-size: .95rem; }
.login-verify-box .input-group > .form-control:first-child { border-radius: 10px 0 0 10px; }
.login-verify-box .input-group > .btn { padding: 0 12px; border-radius: 0 10px 10px 0; background: #fff; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.login-verify-box .input-group > .btn:hover:not(:disabled) { background: #3159c8; color: #fff; }
.login-verify-box .captcha-image { width: 112px; height: 42px; flex: 0 0 112px; border-color: #ccd8e7; border-radius: 10px 0 0 10px; background: #fff; }
.login-verify-box .form-control:disabled { background: #eef1f6; }

/* 내부 로그인 캐시 데이터 안내 */
.login-note { display: flex; align-items: flex-start; gap: 7px; padding: 8px 11px; border-radius: 10px; background: #eef6f1; color: #2f6b4f; font-size: .82rem; line-height: 1.45; }

/* 로그인 버튼 */
.login-submit { min-height: 46px; margin-top: 2px; border: 0; border-radius: 11px; background: linear-gradient(90deg, #3159c8, #4a74e2); font-size: 1.05rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 8px 18px rgba(49, 89, 200, .24); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.login-submit:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 22px rgba(49, 89, 200, .28); }
.login-submit:active:not(:disabled) { transform: translateY(0); }
.login-submit:disabled { background: #a9b6d6; box-shadow: none; }

/* 매장 ID·아이디 저장 (로그인 버튼 아래) : 체크박스와 문구를 가운데 맞추고, 체크하면 파란색으로 표시합니다. */
.login-remember { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: -2px 0 0; padding: 4px 10px 4px 6px; min-height: auto; border-radius: 8px; color: #475467; font-size: .88rem; user-select: none; transition: background-color .15s ease; }
.login-remember:hover { background: #f2f5fb; }
.login-remember .form-check-input { float: none; flex: 0 0 auto; width: 1.15em; height: 1.15em; margin: 0; border: 1.5px solid #b8c2d3; border-radius: 5px; transition: background-color .15s ease, border-color .15s ease; }
.login-remember .form-check-input:checked { border-color: #3159c8; background-color: #3159c8; }
.login-remember .form-check-input:focus { border-color: #3159c8; box-shadow: 0 0 0 3px rgba(49, 89, 200, .18); }
.login-remember .form-check-input:checked + .form-check-label { color: #1d2939; }
.login-remember .form-check-input, .login-remember .form-check-label { cursor: pointer; }

/* 좁은 화면(767px 이하) : 위아래로 쌓고, 안내는 로고·제목만 한 줄로 줄입니다. */
@media (max-width: 767px) {
  .login-card { grid-template-columns: 1fr; width: min(100%, 460px); }
  .login-side { flex-direction: row; align-items: center; gap: 12px; padding: 16px 20px; }
  .login-side h1 { margin: 0; font-size: 1.05rem; }
  .login-side-logo { padding: 6px 10px; }
  .login-side-logo .app-logo { width: 100px; height: 30px; }
  .login-side-text, .login-side-points, .login-side-support { display: none; }
  .login-main { padding: 20px 20px 18px; }
  .login-verify-box { grid-template-columns: 1fr; }
  .login-verify-box .captcha-image { width: 140px; flex-basis: 140px; }
}
@media (max-width: 380px) {
  .login-row { grid-template-columns: 1fr; }
}

/* 발송대상 조회 조건 배치 : 라벨은 입력칸 왼쪽, 4열 격자로 4줄에 맞춥니다. (smsweb-sms.js searchField)
   is-wide(회원검색·기간검색)는 2칸, 버튼 줄(.sms-target-actions)은 결혼기념일 오른쪽 남은 칸을 모두 씁니다.
   조회 영역 너비(container)에 따라 1100px 이하 2열, 560px 이하 1열(라벨 위)로 바꿉니다. */
.sms-target-label { overflow: hidden; color: #4b5563; font-size: .8rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sms-target-grid .sms-target-field.is-wide { grid-column: span 2; }
.sms-target-actions { grid-column: 2 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sms-target-period { flex-wrap: nowrap; }
.sms-target-range.sms-target-period > .form-select { flex: 0 0 118px; }
.sms-target-range.sms-target-period > .form-control { flex: 1 1 70px; }
.sms-target-range.sms-target-period > .sms-target-range { flex: 2 1 220px; }
.sms-target-range > .form-select { flex: 0 0 76px; }
.sms-target-body .form-control-sm, .sms-target-body .form-select-sm { min-height: 32px; border-color: #d6dbe3; }
.sms-target-body .form-control-sm:focus, .sms-target-body .form-select-sm:focus { border-color: #8fa8e8; box-shadow: 0 0 0 3px rgba(49, 89, 200, .12); }
@container (max-width: 1100px) {
  .sms-target-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sms-target-actions { grid-column: 1 / -1; }
  .sms-target-period { flex-wrap: wrap; }
}
@container (max-width: 560px) {
  .sms-target-grid { grid-template-columns: minmax(0, 1fr); }
  .sms-target-grid .sms-target-field.is-wide { grid-column: auto; }
  .sms-target-field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* 단독 SMS 화면 상단 줄 : 로그인 직후처럼 SMS 화면이 셸(메뉴·상단바) 없이 열렸을 때만 그립니다. (smsweb-sms.js buildStandaloneHeader)
   왼쪽 로고 | 화면 제목, 오른쪽 매장 칩 + 사용자 버튼(이름). 로그아웃은 사용자 메뉴 안에 있고 확인 팝업 뒤 처리합니다.
   아래 본문 카드(.sms-composer · .sms-recipient-panel)와 같은 테두리·둥근 모서리·흰 바탕·그림자로 맞추고, 스크롤해도 위에 붙어 있습니다. */
.sms-standalone-header {
  position: sticky; top: 12px; z-index: 1020;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; margin-bottom: 16px; padding: 10px 20px;
  background: #fff; border: 1px solid #d9dee6; border-radius: 16px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.sms-standalone-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sms-standalone-logo { display: inline-flex; align-items: center; }
.sms-standalone-divider { width: 1px; height: 26px; background: #e2e6ec; }
.sms-standalone-title { display: inline-flex; align-items: center; gap: 8px; color: #1f2937; font-size: 1.02rem; font-weight: 700; white-space: nowrap; }
.sms-standalone-title .bi { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eef2fb; color: #3159c8; font-size: .95rem; }
.sms-standalone-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* 매장 칩 : 로그인 매장명 (누르는 기능 없음) */
.sms-store-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; padding: 6px 12px; border-radius: 999px; background: #f2f4f7; color: #4b5563; font-size: .82rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sms-store-chip .bi { color: #6b7280; }
/* 사용자 버튼 : 사람 아이콘 + 이름 + 펼침 표시. 누르면 메뉴(이름·사원·매장, 로그아웃)가 열립니다. */
.sms-user-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid #e3e7ee; border-radius: 999px;
  background: #fff; color: #1f2937; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.sms-user-button:hover { background: #f5f7fb; border-color: #d3d9e3; }
.sms-user-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(49, 89, 200, .25); }
.sms-user-button[aria-expanded="true"] { background: #eef2fb; border-color: #c9d4f0; }
.sms-user-icon { color: #3159c8; font-size: 1.15rem; line-height: 1; }
.sms-user-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; font-weight: 700; }
.sms-user-caret { color: #8a94a6; font-size: .72rem; transition: transform .15s; }
.sms-user-button[aria-expanded="true"] .sms-user-caret { transform: rotate(180deg); }
.sms-user-menu { min-width: 220px; padding: 6px; border: 1px solid #e6e9ef; border-radius: 12px; box-shadow: 0 12px 28px rgba(16, 24, 40, .12); }
.sms-user-menu-head { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 6px; }
.sms-user-menu-head strong { color: #1f2937; font-size: .95rem; }
.sms-user-menu-head span { color: #6b7280; font-size: .78rem; }
.sms-user-menu .dropdown-divider { margin: 4px 0; }
.sms-user-logout { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: #b42318; font-weight: 600; }
.sms-user-logout:hover, .sms-user-logout:focus { background: #fef3f2; color: #912018; }
/* 좁은 화면 : 매장 칩·제목을 숨기고 로고와 이름만 남깁니다. */
@media (max-width: 767px) { .sms-store-chip, .sms-standalone-divider, .sms-standalone-title { display: none; } }
@media (max-width: 575px) {
  .sms-standalone-header { top: 8px; min-height: 56px; padding: 8px 12px; border-radius: 12px; }
  .sms-standalone-logo .app-logo { width: 100px; height: 32px; }
  .sms-user-name { max-width: 100px; }
}