/* =========================================
   맑은 NOTIFICATIONS - Base CSS
   ========================================= */

:root {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --gnb-height: 64px;

    /* 브랜드 팔레트 */
    --color-sky: #4FC0FC;
    --color-sky-vivid: #027CFA;
    --color-sky-soft: #E5F4FE;
    --color-indigo: #6756ED;
}

* {
    font-family: 'Noto Sans KR', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: var(--gray-50);
    color: var(--gray-800);
}

/* =========================================
   레이아웃
   ========================================= */

.layout-default {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
}

/* 콘텐츠 영역 표준 너비 (모든 페이지 공통) */
.page-content > .container {
    max-width: 1320px;
}

/* 2단 콘텐츠 레이아웃: 메인 1fr + 우측 보조 360px (예: 미리보기/가이드 패널) */
.content-2col {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .content-2col {
        grid-template-columns: 1fr;
    }
    .content-2col > .content-2col-aside {
        order: -1;
        position: static !important;
    }
}

/* =========================================
   GNB
   ========================================= */

.gnb-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
    height: var(--gnb-height);
    display: flex;
    align-items: center;
}

.gnb-container {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 24px;
    max-width: 100%;
}

.gnb-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: 32px;
    flex-shrink: 0;
}

.gnb-logo-icon { width: 34px; height: 34px; flex-shrink: 0; }
.gnb-logo-text { font-size: 22px; font-weight: 900; color: var(--gray-700); letter-spacing: -1px; line-height: 1; }
.gnb-logo-sub { font-size: 20px; font-weight: 300; color: var(--gray-500); letter-spacing: -0.5px; line-height: 1; }
.gnb-logo:hover .gnb-logo-text { color: var(--gray-900); }
.gnb-logo:hover .gnb-logo-sub { color: var(--gray-600); }

.gnb-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
}

.gnb-nav {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    height: 100%;
    gap: 4px;
}

.gnb-nav-item { position: relative; height: 100%; display: flex; align-items: center; }

.gnb-nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-700);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
    height: 100%;
}

.gnb-nav-link:hover { color: var(--gray-900); }
.gnb-chevron { font-size: 10px; transition: transform 0.2s; }
.gnb-nav-item:hover .gnb-chevron { transform: rotate(180deg); }

.gnb-dropdown {
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 8px 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 1050;
}

.gnb-dropdown-title { font-weight: 600; color: var(--primary-color) !important; font-size: 14px; pointer-events: none; }

.gnb-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    font-size: 14px;
    color: var(--gray-600);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.gnb-dropdown-item:hover { background: var(--gray-50); color: var(--gray-900); }
.gnb-dropdown-divider { margin: 6px 16px; border-top: 1px dashed var(--gray-300); }

.gnb-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.gnb-btn-inquiry {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 18px;
    border-radius: 20px;
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    line-height: 1.6;
}
.gnb-btn-inquiry:hover { background: #d4ecfd; color: var(--color-sky-vivid); }

.gnb-login-link { font-size: 14px; font-weight: 500; color: var(--gray-700); text-decoration: none; padding: 6px 12px; }
.gnb-login-link:hover { color: var(--gray-900); }

.gnb-btn-signup { font-size: 13px; font-weight: 600; padding: 6px 20px; border-radius: 20px; background: var(--color-indigo); color: #fff; border: none; }
.gnb-btn-signup:hover { background: #5343d6; color: #fff; }

.gnb-btn-charge { font-size: 13px; font-weight: 600; padding: 6px 20px; border-radius: 20px; background: var(--color-sky-vivid); color: #fff; border: none; }
.gnb-btn-charge:hover { background: #0167d4; color: #fff; }

.gnb-user-dropdown { position: relative; }

.gnb-user-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
}

.gnb-user-btn:hover { background: var(--gray-50); border-color: var(--gray-300); }
.gnb-user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-sky);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
}
.gnb-user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gnb-user-menu { right: 0; left: auto; min-width: 220px; top: calc(100% + 4px); padding: 0; }

.gnb-credit-block { padding: 16px 20px 12px; }
.gnb-credit-label { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.gnb-credit-value { display: flex; align-items: center; gap: 6px; }
.gnb-credit-amount { font-size: 18px; font-weight: 700; color: var(--gray-900); letter-spacing: -0.3px; }
.gnb-credit-coin {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-indigo);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.gnb-credit-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-500);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-300);
    padding-bottom: 1px;
}
.gnb-credit-link:hover { color: var(--gray-700); border-color: var(--gray-500); }

.gnb-menu-icon { font-size: 16px; color: var(--color-indigo); margin-right: 10px; }
.gnb-user-menu .gnb-dropdown-item { padding: 10px 20px; font-size: 14px; color: var(--gray-700); }
.gnb-user-menu .gnb-dropdown-divider { margin: 0; border-top: 1px solid var(--gray-200); }

/* =========================================
   푸터 상단
   ========================================= */

.footer-upper {
    background-color: #000000;
    padding: 28px 0;
}

.footer-upper > .container,
.footer-lower > .container {
    max-width: 1600px;
    padding-left: 60px;
    padding-right: 60px;
}

.footer-upper-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 24px 40px;
}

.footer-brand-area {
    flex-shrink: 0;
    min-width: 200px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    margin-bottom: 6px;
}

.footer-logo-name { font-size: 18px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.footer-logo-msg { font-size: 16px; font-weight: 300; color: #b0b7bf; }
.footer-logo-link:hover .footer-logo-name { color: #f0f0f0; }
.footer-slogan { font-size: 13px; color: #b0b7bf; }

.footer-links-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 48px;
    padding-top: 6px;
    flex: 1;
    justify-content: flex-end;
}

.footer-link { font-size: 15px; color: #ffffff; text-decoration: none; white-space: nowrap; }
.footer-link:hover { color: #d4d8dc; text-decoration: underline; }

/* =========================================
   푸터 하단
   ========================================= */

.footer-lower {
    background-color: #000000;
    padding: 28px 0 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-lower-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 16px 60px;
}

.footer-company {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
    letter-spacing: -1px;
    min-width: 200px;
    flex-shrink: 0;
}
.footer-details { flex: 1; min-width: 0; }
.footer-info { font-size: 13px; color: #ffffff; line-height: 1.9; display: flex; flex-wrap: wrap; gap: 0 28px; }
.footer-info-item { white-space: nowrap; }
.footer-copy { font-size: 12px; color: #b0b7bf; margin-top: 8px; letter-spacing: 0.3px; }

/* =========================================
   에러 페이지
   ========================================= */

.error-page {
    min-height: 100vh;
    background-color: var(--gray-100);
    padding: 40px 20px;
    text-align: center;
}

.error-logo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.error-logo-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--gray-700);
    letter-spacing: -1px;
    line-height: 1;
}

.error-logo-sub {
    font-size: 20px;
    font-weight: 300;
    color: var(--gray-500);
    letter-spacing: -0.5px;
    line-height: 1;
}

.error-illustration {
    width: 340px;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #e8e0f0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.error-illustration-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.error-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
}

.error-description {
    font-size: 15px;
    color: var(--gray-500);
    line-height: 1.6;
}

.error-btn {
    min-width: 240px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background-color: var(--primary-color);
    border-radius: 30px;
    border: none;
}

.error-btn:hover {
    background-color: var(--primary-hover);
    color: #fff;
}

/* 점검 페이지 */

.inspection-main-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--gray-900);
}

.inspection-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: var(--gray-600);
}

.inspection-schedule {
    text-align: center;
}

.inspection-schedule-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.inspection-schedule-list {
    list-style: disc;
    padding-left: 20px;
    display: inline-block;
    text-align: left;
}

.inspection-schedule-list li {
    font-size: 14px;
    color: var(--gray-500);
    line-height: 1.8;
}

/* =========================================
   SMS 발송 페이지
   ========================================= */

.sms-send-page {
    background-color: var(--gray-100);
}

.sms-send-page .page-title {
    font-size: 22px;
    color: var(--gray-900);
}

.sms-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.sms-card-header {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.sms-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sms-toggle-btn {
    background: none;
    border: none;
    color: var(--color-sky-vivid);
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sms-toggle-btn i {
    font-size: 12px;
}

.sms-form-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
}

.sms-form-row + .sms-form-row {
    margin-top: 4px;
}

.sms-form-label {
    flex: 0 0 120px;
    padding-top: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

.sms-required {
    color: #ef4444;
    margin-left: 2px;
}

.sms-form-control {
    flex: 1;
    min-width: 0;
}

.sms-form-control-inline {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sms-template-name {
    font-size: 14px;
    color: var(--gray-800);
}

.sms-radio-group {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    min-height: 38px;
}

.sms-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    margin: 0;
}

.sms-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.sms-radio input[type="radio"]:disabled {
    cursor: not-allowed;
}

.sms-input,
.sms-textarea {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 12px;
    height: 40px;
}

.sms-textarea {
    height: auto;
    resize: vertical;
    min-height: 220px;
    padding: 12px;
}

.sms-input:focus,
.sms-textarea:focus,
.sms-input-select:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.sms-input-select {
    background-color: #fff;
    max-width: 360px;
}

.sms-input-datetime {
    max-width: 280px;
}

.sms-input-datetime:focus {
    border-color: var(--color-sky-vivid);
    border-width: 2px;
    padding: 7px 11px;
    box-shadow: 0 0 0 4px rgba(2, 124, 250, 0.18), 0 6px 16px rgba(15, 23, 42, 0.12);
}

.sms-help-text {
    font-size: 12px;
    color: var(--gray-500);
    margin: 6px 0 0;
    line-height: 1.6;
}

.sms-input-with-counter {
    position: relative;
}

.sms-input-with-counter .sms-input {
    padding-right: 140px;
}

.sms-byte-counter {
    font-size: 12px;
    color: var(--gray-500);
}

.sms-input-with-counter .sms-byte-counter {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.sms-textarea-wrap {
    position: relative;
}

.sms-byte-counter-textarea {
    position: absolute;
    right: 12px;
    bottom: 10px;
    text-align: right;
    line-height: 1.5;
    pointer-events: none;
}

.sms-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sms-btn-dark,
.sms-btn-dark-sm {
    background: #2c2c2c;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
}

.sms-btn-dark-sm {
    padding: 6px 18px;
    font-size: 13px;
}

.sms-btn-dark:hover,
.sms-btn-dark-sm:hover {
    background: #1a1a1a;
}

.sms-btn-dark-sm:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
}

.sms-btn-disabled {
    background: #f3b9b9;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
}

.sms-btn-disabled:disabled {
    background: #e7c1c1;
    cursor: not-allowed;
    opacity: 0.7;
}

.sms-btn-danger {
    background: #f37070;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 16px;
    cursor: pointer;
}

.sms-btn-danger:hover {
    background: #ef4444;
}

.sms-btn-danger:disabled {
    background: #f3b9b9;
    cursor: not-allowed;
}

.sms-template-vars {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 8px 16px;
    margin-bottom: 16px;
}

.sms-template-vars .sms-form-label {
    flex: 0 0 130px;
}

.sms-recipient-table-wrap {
    border-top: 1px solid var(--gray-200);
}

.sms-recipient-table {
    width: 100%;
    border-collapse: collapse;
}

.sms-recipient-table th,
.sms-recipient-table td {
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid var(--gray-200);
}

.sms-recipient-table thead {
    background: var(--gray-100);
}

.sms-recipient-table th {
    font-weight: 600;
    color: var(--gray-700);
}

.sms-recipient-table tbody tr:hover {
    background: var(--gray-50);
}

.sms-th-check {
    width: 60px;
}

.sms-th-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
}

.sms-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
}

.sms-empty-state-tall {
    padding: 120px 20px;
}

.sms-error-message {
    color: #ef4444;
    font-size: 13px;
    text-align: center;
    padding: 16px 0;
}

.sms-message-fields {
    min-width: 0;
}

.sms-preview-col {
    position: sticky;
    top: 80px;
}

.sms-phone {
    width: 320px;
    height: 640px;
    background: #fff;
    border: 2px solid var(--gray-300);
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.sms-phone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 14px;
    color: var(--gray-700);
}

.sms-phone-back {
    font-size: 16px;
}

.sms-phone-avatar {
    font-size: 28px;
    color: var(--color-sky-vivid);
}

.sms-phone-name {
    flex: 1;
    font-weight: 500;
    color: var(--gray-800);
    font-size: 14px;
}

.sms-phone-more {
    font-size: 16px;
    color: var(--gray-500);
}

.sms-phone-body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #fff;
}

.sms-phone-bubble {
    background: var(--gray-100);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.sms-phone-title {
    font-weight: 700;
    margin-bottom: 6px;
    font-size: 14px;
}

.sms-phone-empty {
    height: 36px;
    background: var(--gray-100);
    border-radius: 14px;
    margin: 8px 4px;
}

.sms-phone-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--gray-200);
    font-size: 16px;
    color: var(--gray-500);
}

.sms-phone-input-mock {
    flex: 1;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 18px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--gray-400);
}

.sms-phone-footer .bi-send-fill {
    color: var(--color-sky-vivid);
}

.sms-file-row {
    display: flex;
    gap: 8px;
}

.sms-file-display {
    flex: 1;
    background: #fff;
}

.sms-file-guide {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.8;
}

.sms-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.sms-btn-reset,
.sms-btn-submit {
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.sms-btn-reset {
    background: #2c2c2c;
    color: #fff;
}

.sms-btn-reset:hover {
    background: #1a1a1a;
}

.sms-btn-submit {
    background: #2563eb;
    color: #fff;
}

.sms-btn-submit:hover {
    background: #1d4ed8;
}

/* =========================================
   SMS 모달 (W400 / W480 / W800)
   ========================================= */

.sms-modal-w400 { max-width: 400px; }
.sms-modal-w480 { max-width: 480px; }
.sms-modal-w800 { max-width: 800px; }
.sms-modal-w1000 { max-width: 1000px; }

.sms-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    position: relative;
}

.sms-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    z-index: 10;
}

.sms-modal-close:hover {
    color: var(--gray-900);
}

.sms-modal-body {
    padding: 28px 32px 8px;
}

.sms-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 20px;
}

.sms-modal-title-sm {
    font-size: 15px;
    margin-bottom: 16px;
}

.sms-modal-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0 0 12px;
}

.sms-modal-bullet {
    list-style: disc;
    padding-left: 18px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.7;
}

.sms-modal-subhead {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 8px 0 6px;
}

.sms-modal-input {
    height: 40px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    width: 100%;
}

.sms-modal-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.sms-modal-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0 24px;
}

.sms-modal-form-label {
    flex: 0 0 90px;
    font-size: 14px;
    color: var(--gray-700);
    margin: 0;
}

.sms-modal-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.sms-modal-search {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.sms-modal-search input {
    height: 40px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 8px 40px 8px 12px;
    font-size: 14px;
}

.sms-modal-search input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.sms-modal-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 8px;
}

.sms-modal-count {
    font-size: 13px;
    color: var(--gray-600);
}

.sms-modal-count strong {
    color: var(--color-sky-vivid);
    font-weight: 700;
}

.sms-modal-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.sms-modal-table thead {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.sms-modal-table th {
    padding: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;
}

.sms-modal-table td {
    padding: 12px;
    font-size: 14px;
    color: var(--gray-800);
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
}

.sms-modal-table tbody tr:hover {
    background: #f1f9ff;
    cursor: pointer;
}

.sms-th-radio {
    width: 60px;
}

.sms-th-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.sms-modal-empty {
    padding: 40px 0;
    color: var(--gray-500);
    font-size: 13px;
    cursor: default !important;
}

.sms-modal-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 12px 0 4px;
}

.sms-page-btn {
    min-width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    font-size: 13px;
    color: var(--gray-600);
    cursor: pointer;
    padding: 0 8px;
}

.sms-page-btn:hover:not(:disabled):not(.active) {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.sms-page-btn.active {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
    color: #fff;
    font-weight: 600;
}

.sms-page-btn:disabled {
    color: var(--gray-300);
    cursor: not-allowed;
}

.sms-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px 32px 28px;
}

.sms-btn-modal-cancel,
.sms-btn-modal-confirm {
    height: 48px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}

.sms-btn-modal-cancel {
    background: #fff;
    color: var(--gray-700);
    border-color: var(--gray-300);
}

.sms-btn-modal-cancel:hover {
    background: var(--gray-50);
}

.sms-btn-modal-confirm {
    background: var(--color-sky);
    color: #fff;
    border-color: var(--color-sky);
}

.sms-btn-modal-confirm:hover {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
}

/* 초기화 컨펌 모달 */
.sms-modal-body-confirm {
    text-align: center;
    padding: 40px 32px 16px;
}

.sms-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 16px;
}

.sms-modal-confirm-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
}


@media (max-width: 768px) {
    .sms-card {
        padding: 20px 16px;
    }
    .sms-form-row {
        flex-direction: column;
        gap: 6px;
    }
    .sms-form-label {
        flex: 0 0 auto;
        padding-top: 0;
    }
    .sms-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   알림톡 발송 (Kakao Send) — sms-* 클래스 재사용
   ========================================= */

.kakao-send-page .sms-card-title {
    font-size: 15px;
}

.kakao-btn-submit {
    background: var(--color-sky-vivid);
}

.kakao-btn-submit:hover {
    background: #0263c8;
}

/* 발신 프로필 검색형 드롭다운 */
.kakao-profile-select {
    position: relative;
    max-width: 360px;
}

.kakao-profile-toggle {
    width: 100%;
    height: 40px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    text-align: left;
    font-size: 14px;
    color: var(--gray-800);
    position: relative;
    cursor: pointer;
}

.kakao-profile-select.is-open .kakao-profile-toggle,
.kakao-profile-toggle:focus {
    border-color: var(--color-sky);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.kakao-profile-toggle .bi-chevron-down {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 12px;
    transition: transform 0.15s ease;
}

.kakao-profile-select.is-open .kakao-profile-toggle .bi-chevron-down {
    transform: translateY(-50%) rotate(180deg);
}

.kakao-profile-placeholder {
    color: var(--gray-400);
}

.kakao-profile-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 100;
    overflow: hidden;
}

.kakao-profile-search {
    position: relative;
    padding: 10px;
    border-bottom: 1px solid var(--gray-100);
}

.kakao-profile-search input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 6px 12px 6px 32px;
    font-size: 13px;
}

.kakao-profile-search input:focus {
    outline: none;
    border-color: var(--color-sky);
}

.kakao-profile-search .bi-search {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 13px;
}

.kakao-profile-options {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 220px;
    overflow-y: auto;
}

.kakao-profile-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
}

.kakao-profile-option:hover {
    background: var(--color-sky-soft);
}

.kakao-profile-option.is-selected {
    color: var(--color-sky-vivid);
    font-weight: 500;
}

.kakao-profile-option .bi-check-lg {
    color: var(--color-sky-vivid);
    font-size: 14px;
}

.kakao-profile-empty {
    padding: 16px;
    text-align: center;
    color: var(--gray-500);
    font-size: 13px;
}

/* 메시지 설정 — 읽기 전용 라벨/값 행 */
.kakao-readonly-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    font-size: 14px;
}

.kakao-readonly-label {
    flex: 0 0 120px;
    color: var(--gray-800);
    font-weight: 500;
}

.kakao-readonly-value {
    color: var(--gray-700);
}

.kakao-readonly-textarea {
    background: var(--gray-50);
    color: var(--gray-700);
    cursor: default;
}

.kakao-readonly-textarea-sm {
    min-height: 90px;
}

/* 대표 링크 테이블 */
.kakao-link-table {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.kakao-link-table tr + tr td {
    border-top: 1px solid var(--gray-200);
}

.kakao-link-table .kakao-link-key {
    width: 100px;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 13px;
    padding: 10px 14px;
    border-right: 1px solid var(--gray-200);
}

.kakao-link-table .kakao-link-val {
    padding: 10px 14px;
    color: var(--color-sky-vivid);
    font-size: 13px;
    word-break: break-all;
}

/* 버튼 테이블 */
.kakao-button-table {
    width: 100%;
    border-collapse: collapse;
}

.kakao-button-table thead {
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.kakao-button-table th {
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700);
    text-align: center;
}

.kakao-button-table td {
    padding: 12px 10px;
    font-size: 13px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
}

.kakao-button-toggle-col {
    width: 40px;
    color: var(--gray-500);
    cursor: pointer;
}

.kakao-button-row {
    cursor: pointer;
}

.kakao-button-row:hover {
    background: var(--gray-50);
}

.kakao-button-detail-row td {
    background: #fff;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.kakao-button-detail {
    padding: 4px 0;
    color: var(--gray-600);
    font-size: 13px;
    line-height: 1.8;
}

.kakao-button-detail-row-line {
    display: flex;
    gap: 8px;
}

.kakao-button-detail-key {
    flex: 0 0 50px;
    color: var(--gray-700);
    font-weight: 500;
}

/* 카카오톡 휴대폰 미리보기 */
.kakao-preview-col {
    position: sticky;
    top: 80px;
}

.kakao-phone {
    width: 320px;
    height: 640px;
    background: #fff;
    border: 2px solid var(--gray-300);
    border-radius: 36px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.kakao-phone-modal {
    width: 280px;
    height: 540px;
    border-radius: 28px;
}

.kakao-phone-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 14px;
}

.kakao-phone-header .bi-chevron-left {
    font-size: 16px;
}

.kakao-phone-title {
    flex: 1;
    font-weight: 600;
    color: var(--gray-900);
    font-size: 15px;
}

.kakao-phone-header-actions {
    display: flex;
    gap: 12px;
    color: var(--gray-700);
    font-size: 16px;
}

.kakao-phone-body {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    background: #b1c5d4;
}

.kakao-chat-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.kakao-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #4FC0FC, #027CFA);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.kakao-chat-content {
    flex: 1;
    min-width: 0;
}

.kakao-chat-name {
    font-size: 12px;
    color: #fff;
    margin-bottom: 4px;
    font-weight: 500;
}

.kakao-chat-bubble {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.kakao-bubble-header {
    background: #fde35a;
    color: #2c2c2c;
    font-weight: 700;
    padding: 8px 14px;
    font-size: 13px;
}

.kakao-bubble-content {
    padding: 12px 14px;
    font-size: 12px;
    color: var(--gray-800);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.kakao-bubble-extra {
    padding: 0 14px 12px;
    font-size: 11px;
    color: var(--gray-600);
    line-height: 1.6;
    white-space: pre-wrap;
}

.kakao-bubble-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 10px 10px;
}

.kakao-bubble-btn {
    width: 100%;
    background: var(--gray-100);
    border: none;
    border-radius: 6px;
    padding: 8px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
}

.kakao-bubble-btn:hover {
    background: var(--gray-200);
}

.kakao-phone-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--gray-200);
    color: var(--gray-500);
    font-size: 16px;
}

.kakao-phone-footer .kakao-phone-input-mock {
    flex: 1;
    height: 28px;
    background: var(--gray-50);
    border-radius: 14px;
}

/* SMS 템플릿 선택 모달 — 좌 리스트 / 우 미리보기 */
.sms-modal-template .sms-modal-body {
    padding: 28px 32px 8px;
}

.sms-template-modal-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
}

.sms-template-modal-list .sms-modal-table tbody tr.is-active {
    background: var(--color-sky-soft);
}

.sms-template-modal-preview {
    display: flex;
    justify-content: center;
}

/* 템플릿 타입 탭 (SMS / LMS / MMS) */
.sms-template-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--gray-200);
    margin: 16px 0 20px;
}

.sms-template-tab {
    appearance: none;
    background: transparent;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-500);
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s;
}

.sms-template-tab:hover {
    color: var(--gray-800);
}

.sms-template-tab.is-active {
    color: var(--gray-900);
    font-weight: 700;
    border-bottom-color: var(--color-sky);
}

.sms-template-tab-sub {
    font-size: 13px;
    font-weight: 400;
    color: var(--gray-500);
    margin-left: 2px;
}

.sms-template-tab.is-active .sms-template-tab-sub {
    color: var(--gray-700);
}

/* 카드 그리드 (SMS / LMS) */
.sms-template-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    min-height: 360px;
    align-content: start;
}

.sms-template-card {
    border: 1px solid var(--color-sky);
    border-radius: 10px;
    padding: 16px 18px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 170px;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.sms-template-card:hover {
    box-shadow: 0 2px 8px rgba(2, 124, 250, 0.12);
}

.sms-template-card.is-active {
    border-color: var(--color-sky-vivid);
    background: var(--color-sky-soft);
    box-shadow: 0 2px 10px rgba(2, 124, 250, 0.18);
}

.sms-template-card-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.sms-template-card-text {
    flex: 1;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.sms-template-card-byte {
    font-size: 12px;
    color: var(--color-sky-vivid);
    text-align: right;
}

/* MMS 포토 카드 */
.sms-template-card-grid-photo {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.sms-template-photo-card {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s, border-color 0.15s;
}

.sms-template-photo-card:hover {
    box-shadow: 0 2px 8px rgba(2, 124, 250, 0.12);
}

.sms-template-photo-card.is-active {
    border-color: var(--color-sky-vivid);
    box-shadow: 0 2px 10px rgba(2, 124, 250, 0.18);
}

.sms-template-photo-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-900);
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
}

.sms-template-photo-thumb {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--gray-100);
}

.sms-template-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sms-template-card-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--gray-500);
    padding: 60px 0;
    font-size: 14px;
}

/* 모달 전용 휴대폰 미리보기 */
.sms-phone-modal {
    width: 260px;
    height: 520px;
    border-radius: 28px;
}

.sms-phone-modal .sms-phone-header {
    padding: 12px 14px;
}

.sms-phone-modal .sms-phone-body {
    padding: 12px;
}

.sms-phone-modal .sms-phone-footer {
    padding: 10px 12px;
}

.sms-phone-image {
    margin: 4px 0 8px;
    border-radius: 8px;
    overflow: hidden;
}

.sms-phone-image img {
    width: 100%;
    height: auto;
    display: block;
}

.sms-phone-placeholder {
    color: var(--gray-400);
    font-size: 13px;
    text-align: center;
    padding: 40px 12px;
}

@media (max-width: 1024px) {
    .sms-template-modal-grid {
        grid-template-columns: 1fr;
    }
    .sms-template-card-grid-photo {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sms-template-card-grid {
        grid-template-columns: 1fr;
    }
    .sms-template-card-grid-photo {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 템플릿 선택 모달 — 좌 리스트 / 우 미리보기 */
.kakao-modal-template .sms-modal-body {
    padding: 28px 32px 8px;
}

.kakao-template-modal-grid {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 24px;
}

.kakao-template-modal-list .sms-modal-table tbody tr.is-active {
    background: var(--color-sky-soft);
}

.kakao-template-modal-preview {
    display: flex;
    justify-content: center;
}

/* 수신자 선택 모달 — 좌 리스트 / 우 편집 패널 */
.kakao-modal-recipient .sms-modal-body {
    padding: 28px 32px 8px;
}

.kakao-recipient-modal-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
}

.kakao-recipient-modal-edit {
    border-left: 1px solid var(--gray-200);
    padding-left: 20px;
    max-height: 480px;
    overflow-y: auto;
}

.kakao-recipient-edit-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-500);
    font-size: 13px;
    text-align: center;
    gap: 8px;
}

.kakao-recipient-edit-empty .bi-info-circle {
    font-size: 20px;
    color: var(--color-sky-vivid);
}

.kakao-recipient-edit-help {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
    margin: 0 0 12px;
}

.kakao-recipient-edit-help .bi-info-circle {
    color: var(--color-sky-vivid);
}

.kakao-recipient-edit-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kakao-recipient-edit-item {
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--gray-200);
}

.kakao-recipient-edit-item:last-child {
    border-bottom: none;
}

.kakao-recipient-edit-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.kakao-recipient-edit-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.kakao-recipient-edit-label {
    flex: 0 0 80px;
    font-size: 13px;
    color: var(--gray-600);
}

.kakao-recipient-edit-value {
    font-size: 13px;
    color: var(--gray-800);
}

.kakao-recipient-edit-row .sms-modal-input {
    flex: 1;
    height: 36px;
    font-size: 13px;
}

.kakao-recipient-edit-row .sms-modal-input.is-error {
    border-color: #ef4444;
}

.kakao-recipient-edit-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    margin-left: 92px;
    font-size: 12px;
    color: #ef4444;
}

@media (max-width: 1024px) {
    .kakao-template-modal-grid,
    .kakao-recipient-modal-grid {
        grid-template-columns: 1fr;
    }
    .kakao-recipient-modal-edit {
        border-left: none;
        border-top: 1px solid var(--gray-200);
        padding-left: 0;
        padding-top: 16px;
    }
}

/* =========================================
   RCS 발송 (RCS Send)
   ========================================= */

.rcs-brand-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: center;
}

.rcs-brand-select {
    width: 100%;
}

.rcs-brand-number {
    width: 100%;
}

.rcs-purpose-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rcs-optout-select {
    min-width: 220px;
    max-width: 320px;
}

.rcs-type-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.rcs-expiry-select {
    max-width: 320px;
}

.rcs-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.rcs-button-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
}

.rcs-button-type-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
    font-size: 12px;
    font-weight: 500;
}

.rcs-button-name {
    flex: 1;
    color: var(--gray-800);
}

.rcs-button-remove {
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
}

.rcs-button-remove:hover {
    color: #ef4444;
}

.rcs-btn-add {
    align-self: flex-start;
}

/* RCS 휴대폰 미리보기 */
.rcs-preview-col {
    display: flex;
    justify-content: center;
}

.rcs-phone {
    width: 280px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    min-height: 480px;
}

.rcs-phone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
}

.rcs-phone-header .bi-chevron-left {
    color: var(--gray-700);
    font-size: 16px;
}

.rcs-phone-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #6366f1;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.rcs-phone-name {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

.rcs-phone-header .bi-three-dots-vertical {
    color: var(--gray-700);
    font-size: 16px;
}

.rcs-phone-sub {
    display: flex;
    justify-content: flex-end;
    padding: 6px 14px 0;
    background: #f8fafc;
}

.rcs-phone-web-tag {
    font-size: 11px;
    color: var(--gray-500);
}

.rcs-phone-body {
    flex: 1;
    padding: 12px 14px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-end;
}

.rcs-phone-optout {
    font-size: 11px;
    color: var(--gray-500);
}

.rcs-phone-bubble {
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--gray-200);
    align-self: flex-start;
}

.rcs-phone-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gray-900);
    white-space: pre-wrap;
    word-break: break-word;
}

.rcs-phone-buttons {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rcs-phone-btn {
    border: 1px solid var(--gray-200);
    background: #fff;
    color: #2563eb;
    font-size: 12px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: default;
    text-align: center;
}

.rcs-phone-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--gray-100);
    background: #fff;
}

.rcs-phone-footer .bi-plus {
    color: var(--gray-500);
    font-size: 18px;
}

.rcs-phone-input-mock {
    flex: 1;
    font-size: 12px;
    color: var(--gray-400);
    padding: 6px 10px;
    border-radius: 16px;
    background: var(--gray-100);
}

.rcs-phone-footer .bi-send-fill {
    color: #2563eb;
    font-size: 16px;
}

/* RCS 템플릿 모달 (좌측 리스트 + 우측 빈 미리보기) */
.rcs-modal-template .sms-modal-body {
    padding-bottom: 0;
}

.rcs-template-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
}

.rcs-template-modal-list .sms-modal-table tbody tr.is-active {
    background: #eff6ff;
}

.rcs-template-modal-preview {
    border-left: 1px solid var(--gray-100);
    padding-left: 24px;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rcs-template-modal-empty {
    color: var(--gray-500);
    font-size: 13px;
    text-align: center;
    margin: 0;
    padding: 0 20px;
    line-height: 1.6;
}

/* RCS 발송 유형 - 템플릿 잠금 시 텍스트 */
.rcs-type-static {
    font-size: 14px;
    color: var(--gray-900);
    padding: 6px 0;
}

/* RCS 미리보기 - 템플릿 잠금 시 안내 */
.rcs-preview-locked {
    color: var(--gray-500);
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
    margin: 0;
    padding: 24px 12px;
}

/* RCS 버튼 테이블 */
.rcs-buttons-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    background: #fff;
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
}

.rcs-buttons-table thead th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-200);
}

.rcs-buttons-table tbody td {
    font-size: 13px;
    color: var(--gray-800);
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.rcs-buttons-row-sub td {
    background: var(--gray-50);
    text-align: left;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
}

.rcs-buttons-value {
    padding-left: 16px !important;
}

.rcs-buttons-sort {
    width: 48px;
}

.rcs-buttons-sort-btn {
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.rcs-buttons-sort-btn:disabled {
    color: var(--gray-300);
    cursor: not-allowed;
}

.rcs-buttons-remove-cell {
    width: 60px;
}

@media (max-width: 1024px) {
    .rcs-brand-row,
    .rcs-type-row {
        grid-template-columns: 1fr;
    }
    .rcs-template-modal-grid {
        grid-template-columns: 1fr;
    }
    .rcs-template-modal-preview {
        border-left: none;
        border-top: 1px solid var(--gray-100);
        padding-left: 0;
        padding-top: 24px;
        min-height: 120px;
    }
}

/* =========================================
   RCS 포맷형 (LMS) — 메인 타이틀 / 본문
   ========================================= */
.rcs-fmt-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.rcs-fmt-main-logo {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rcs-fmt-main-sublabel {
    width: 50px;
    font-size: 14px;
    color: var(--gray-700);
}

.rcs-fmt-icon-picker {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rcs-fmt-icon-btn {
    width: 56px;
    height: 56px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-700);
    font-size: 26px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcs-fmt-icon-btn:hover {
    border-color: var(--color-sky);
}

.rcs-fmt-icon-btn.is-selected {
    border-color: var(--color-sky);
    color: var(--color-sky-vivid);
    box-shadow: 0 0 0 2px rgba(79, 192, 252, 0.15);
}

.rcs-fmt-main-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rcs-fmt-sub-label {
    width: 50px;
    font-size: 14px;
    color: var(--gray-700);
    flex-shrink: 0;
}

.rcs-fmt-main-title-row .sms-input-with-counter {
    flex: 1;
}

.rcs-fmt-bytes {
    font-size: 12px;
    color: var(--gray-500);
    margin-left: 4px;
    display: block;
    margin-top: 4px;
    font-weight: 400;
}

.rcs-fmt-body-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rcs-fmt-sub-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.rcs-fmt-sub-row .sms-input-with-counter,
.rcs-fmt-sub-row .sms-textarea-wrap {
    flex: 1;
}

.rcs-fmt-body-card {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
}

.rcs-fmt-body-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.rcs-fmt-body-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
}

.rcs-fmt-body-card-remove {
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    line-height: 1;
}

.rcs-fmt-body-card-remove:hover {
    color: #ef4444;
}

.rcs-fmt-body-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rcs-fmt-body-add {
    margin-top: 4px;
}

/* =========================================
   RCS 첨부 파일 (MMS / 캐러셀)
   ========================================= */
.rcs-attach-mode {
    display: flex;
    gap: 24px;
    margin-bottom: 8px;
}

.rcs-attach-input {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.rcs-attach-input .form-control {
    flex: 1;
    background: #fff;
}

.rcs-attach-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.rcs-attach-help {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.7;
}

/* =========================================
   RCS 슬라이드 탭 (캐러셀)
   ========================================= */
.rcs-slide-row .sms-form-label {
    visibility: hidden;
}

.rcs-slide-tabs {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-wrap: wrap;
}

.rcs-slide-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}

.rcs-slide-tab.is-active {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
    color: #fff;
}

.rcs-slide-tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0.7;
}

.rcs-slide-tab-remove:hover {
    opacity: 1;
}

.rcs-slide-tab-add {
    width: 36px;
    height: 36px;
    border: 1px dashed var(--gray-300);
    background: #fff;
    color: var(--gray-500);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rcs-slide-tab-add:hover {
    border-color: var(--color-sky);
    color: var(--color-sky-vivid);
}

/* =========================================
   RCS 미리보기 변형 (포맷형 / MMS / 캐러셀)
   ========================================= */
.rcs-phone-bubble-tight {
    max-width: 70%;
    padding: 8px 10px;
}

.rcs-phone-bubble-card-m {
    max-width: 92%;
}

.rcs-phone-fmt-tag {
    font-size: 11px;
    color: var(--gray-600);
    margin-bottom: 4px;
    align-self: flex-start;
}

/* 포맷형 — 기본형 (작은 카드) */
.rcs-phone-fmt-card {
    width: 86%;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.rcs-phone-fmt-card-inner {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 70px;
}

.rcs-phone-fmt-icon {
    font-size: 28px;
    color: var(--gray-700);
}

.rcs-phone-fmt-divider {
    height: 1px;
    background: var(--gray-300);
    width: 100%;
    margin-top: 4px;
}

/* 포맷형 — 기본형 타이틀 강조 (큰 카드) */
.rcs-phone-fmt-card-emphasis .rcs-phone-fmt-card-inner {
    min-height: 100px;
    padding: 20px;
}

.rcs-phone-fmt-emphasis-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rcs-phone-fmt-emphasis-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    flex: 1;
    word-break: break-word;
}

.rcs-phone-fmt-emphasis-icon {
    font-size: 22px;
    color: var(--gray-700);
    flex-shrink: 0;
}

/* MMS — 가로형/세로형 (이미지 영역) */
.rcs-phone-mms {
    width: 86%;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.rcs-phone-mms-image {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.rcs-phone-mms-horizontal .rcs-phone-mms-image {
    height: 30px;
    border-radius: 6px;
}

.rcs-phone-mms-vertical .rcs-phone-mms-image {
    height: 80px;
}

/* MMS — 캐러셀 */
.rcs-phone-carousel {
    width: 100%;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
}

.rcs-phone-carousel-track {
    display: flex;
    gap: 6px;
    overflow-x: auto;
}

.rcs-phone-carousel-card {
    flex-shrink: 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.rcs-phone-carousel-small .rcs-phone-carousel-card {
    width: 60px;
}

.rcs-phone-carousel-medium .rcs-phone-carousel-card {
    width: 90px;
}

.rcs-phone-carousel-image {
    width: 100%;
    background: #fff;
}

.rcs-phone-carousel-small .rcs-phone-carousel-image {
    height: 36px;
}

.rcs-phone-carousel-medium .rcs-phone-carousel-image {
    height: 60px;
}

/* =========================================
   이메일 템플릿 (Email Verify)
   ========================================= */

.email-template {
    background: #fff;
    min-height: 100vh;
    padding: 60px 20px;
    color: var(--gray-800);
}

.email-container {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.email-logo-box {
    width: 180px;
    height: 90px;
    margin: 0 auto 24px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--gray-700);
    background: #fff;
}

.email-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 28px;
    letter-spacing: -0.3px;
}

.email-divider {
    border: none;
    border-top: 1px solid var(--gray-800);
    margin: 0 0 36px;
}

.email-body {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}

.email-greeting {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 16px;
    letter-spacing: -0.3px;
}

.email-lead {
    font-size: 14px;
    color: var(--gray-500);
    margin: 0 0 32px;
}

.email-otp-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.email-otp-box {
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-sky);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-sky-vivid);
    background: #fff;
}

.email-otp-note {
    text-align: center;
    font-size: 12px;
    color: #ef4444;
    margin: 0 0 20px;
}

.email-info-banner {
    background: #E5F4FE;
    border-radius: 6px;
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--color-sky-vivid);
    line-height: 1.7;
    text-align: left;
}

.email-info-icon {
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

.email-info-banner strong {
    font-weight: 700;
}

.email-disclaimer {
    font-size: 14px;
    color: var(--gray-700);
    margin: 80px 0 32px;
}

.email-footer {
    font-size: 14px;
    color: var(--gray-700);
    margin-top: 16px;
}

@media (max-width: 768px) {
    .email-otp-box { width: 44px; height: 44px; font-size: 18px; }
    .email-otp-row { gap: 6px; }
    .email-template { padding: 32px 16px; }
}

/* =========================================
   회원가입 (Signup)
   ========================================= */

.signup-page {
    background-color: #fff;
    min-height: calc(100vh - var(--gnb-height));
}

.signup-title {
    font-size: 28px;
    color: var(--gray-900);
    margin: 0 0 28px;
    letter-spacing: -0.5px;
}

/* 스텝 인디케이터 */
.signup-stepper {
    list-style: none;
    padding: 0;
    margin: 0 0 56px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    align-items: stretch;
    position: relative;
}

.signup-step {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 14px 20px;
    color: var(--gray-500);
    position: relative;
}

.signup-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -12px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--gray-300);
}

.signup-step.active {
    background: var(--color-sky);
    color: #fff;
}

.signup-step-num {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.85;
    margin-bottom: 4px;
}

.signup-step-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* 섹션 공통 */
.signup-section {
    max-width: 1100px;
    margin: 0 auto;
}

.signup-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 16px;
}

.signup-form-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--gray-900);
    text-align: center;
    margin: 8px 0 12px;
    letter-spacing: -0.5px;
}

.signup-form-subtitle {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    text-align: center;
    margin: 32px 0 24px;
}

.signup-form-desc {
    font-size: 13px;
    color: var(--gray-500);
    line-height: 1.7;
    text-align: center;
    margin: 0 0 24px;
}

.signup-form-desc strong {
    color: var(--gray-700);
    font-weight: 700;
}

.signup-divider {
    border: none;
    border-top: 1px solid var(--gray-800);
    margin: 0 0 40px;
}

.signup-form-block {
    max-width: 560px;
    margin: 0 auto;
}

.signup-form-block-narrow {
    max-width: 460px;
    margin: 0 auto;
}

/* 폼 행 */
.signup-form-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 12px 0;
}

.signup-form-row-stack {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    padding: 10px 0;
}

.signup-form-label {
    flex: 0 0 130px;
    padding-top: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.signup-form-label-block {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.signup-form-control {
    flex: 1;
    min-width: 0;
}

.signup-form-value {
    font-size: 14px;
    color: var(--gray-700);
    padding-top: 9px;
}

/* 입력 */
.signup-input {
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 14px;
    padding: 8px 12px;
    height: 38px;
    width: 100%;
    background: #fff;
    color: var(--gray-800);
}

.signup-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
    outline: none;
}

.signup-input::placeholder {
    color: var(--gray-400);
}

.signup-input-wide { width: 100%; }
.signup-input-medium { max-width: 380px; }

/* 사업자번호 */
.signup-bizno-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.signup-input-bizno { width: 80px; text-align: center; }
.signup-input-bizno-last { width: 130px; text-align: center; }

.signup-bizno-dash {
    color: var(--gray-400);
    font-size: 14px;
}

/* 라디오 */
.signup-radio-group {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 38px;
}

.signup-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    margin: 0;
}

.signup-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

/* 액션 버튼 */
.signup-actions {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.signup-actions-center { justify-content: center; }

.signup-btn {
    border: none;
    border-radius: 8px;
    padding: 12px 60px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    min-width: 200px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.signup-btn-lg {
    padding: 16px 70px;
    font-size: 16px;
    min-width: 240px;
}

.signup-btn-block { width: 100%; min-width: 0; }

.signup-btn-primary {
    background: var(--color-sky);
    color: #fff;
}
.signup-btn-primary:hover { background: var(--color-sky-vivid); color: #fff; }

.signup-btn-disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

.signup-btn-dark {
    background: #4F4F4F;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 0 18px;
    height: 38px;
    min-width: 110px;
    cursor: pointer;
    flex-shrink: 0;
}
.signup-btn-dark:hover:not(:disabled) { background: #2c2c2c; }
.signup-btn-dark:disabled { background: #888888; cursor: not-allowed; opacity: 0.7; }

.signup-btn-dark-solid {
    background: #4F4F4F;
    color: #fff;
}
.signup-btn-dark-solid:hover { background: #2c2c2c; color: #fff; }

.signup-btn-link-vivid {
    background: var(--color-sky-vivid);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.signup-btn-link-vivid:hover { background: #0167d4; color: #fff; }

.signup-btn-outline {
    background: #fff;
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
}
.signup-btn-outline:hover { background: var(--gray-50); }

.signup-btn-navy {
    background: #1E3A8A;
    color: #fff;
}
.signup-btn-navy:hover { background: #1E40AF; color: #fff; }

/* OTP */
.signup-row-with-action {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.signup-otp-row {
    display: flex;
    gap: 8px;
    flex: 1;
}

.signup-input-otp {
    width: 48px;
    height: 48px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 0;
}

.signup-btn-otp-confirm {
    height: 48px;
    min-width: 90px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.signup-btn-otp-confirm.is-active {
    background: #4F4F4F;
    color: #fff;
}
.signup-btn-otp-confirm.is-active:hover { background: #2c2c2c; }
.signup-btn-otp-confirm.is-disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
}

/* 비밀번호 매치 */
.signup-pw-confirm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 380px;
}

.signup-pw-match {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid var(--gray-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.signup-pw-match.is-match { color: #16a34a; border-color: #16a34a; }
.signup-pw-match.is-mismatch { color: #ef4444; border-color: #ef4444; }

/* 약관 동의 */
.signup-agree-box {
    background: #FBE8E6;
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
}

.signup-agree-all {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

.signup-agree-all input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.signup-agree-all-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.signup-agree-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.signup-agree-list > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.signup-agree-check {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin: 0;
    padding-left: 4px;
}

.signup-agree-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.signup-agree-trigger {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.signup-agree-trigger:hover .signup-agree-text { color: var(--gray-900); text-decoration: underline; }
.signup-agree-trigger:hover .signup-agree-chevron-icon { color: var(--gray-800); }

.signup-agree-required {
    font-size: 12px;
    font-weight: 700;
    min-width: 28px;
}
.signup-agree-required.is-required { color: #ef4444; }
.signup-agree-required.is-optional { color: var(--color-sky-vivid); }

.signup-agree-text {
    font-size: 13px;
    color: var(--gray-700);
    flex: 1;
}

.signup-agree-chevron-icon {
    color: var(--gray-500);
    font-size: 14px;
    margin-left: auto;
}

.signup-error-text {
    font-size: 12px;
    color: #ef4444;
    margin-top: 6px;
    line-height: 1.5;
}

/* 휴대폰 번호 */
.signup-phone-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.signup-input-prefix {
    width: 80px;
    flex-shrink: 0;
}
.signup-input-phone {
    width: 100px;
    text-align: center;
    flex-shrink: 0;
}

/* 인증된 번호 */
.signup-phone-done-box {
    text-align: center;
    margin: 60px 0 40px;
}

.signup-phone-done-label {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin-bottom: 24px;
}

.signup-phone-done-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.5px;
}

/* Step 1 - 서비스 흐름 */
.signup-flow {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.signup-flow-item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.signup-flow-card {
    flex: 1;
    background: #fff;
    border: 2px solid var(--color-sky);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.signup-flow-cap {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.signup-flow-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.3px;
}

.signup-flow-arrow {
    color: var(--gray-400);
    font-size: 14px;
    flex-shrink: 0;
}

/* Step 1 - 서비스 신청 서류 */
.signup-doc-table {
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-300);
}

.signup-doc-head,
.signup-doc-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr;
    gap: 24px;
    padding: 16px 24px;
}

.signup-doc-head {
    color: var(--gray-500);
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid var(--gray-200);
}

.signup-doc-row {
    padding: 28px 24px;
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.9;
}

/* Step 5 - 환영 */
.signup-section-welcome { text-align: center; }

.signup-welcome-title {
    font-size: 56px;
    font-weight: 900;
    color: var(--gray-900);
    margin: 32px 0 16px;
    letter-spacing: -1px;
}

.signup-welcome-desc {
    font-size: 16px;
    color: var(--gray-700);
    margin: 0 0 32px;
}

.signup-summary {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 24px 32px;
    max-width: 420px;
    margin: 0 auto 32px;
    text-align: left;
}

.signup-summary-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 6px 0;
}

.signup-summary-label {
    flex: 0 0 110px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.signup-summary-value {
    font-size: 14px;
    color: var(--gray-700);
}

.signup-welcome-note {
    font-size: 14px;
    color: var(--gray-700);
    margin: 0 0 32px;
}

/* 모달 - 알림 */
.signup-modal-w400 { max-width: 400px; }
.signup-modal-w800 { max-width: 800px; }

.signup-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.signup-modal-body-confirm {
    text-align: center;
    padding: 40px 32px 24px;
}

.signup-modal-icon-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(79, 192, 252, 0.15);
    color: var(--color-sky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 20px;
}

.signup-modal-confirm-text {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
    margin: 0;
}

.signup-modal-actions-single {
    padding: 0 24px 24px;
}

.signup-modal-actions-pair {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 24px 32px 36px;
}

.signup-modal-actions-pair .signup-btn {
    min-width: 200px;
    padding: 14px 20px;
}

/* 약관 모달 */
.signup-terms-modal-body {
    padding: 48px 56px 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.signup-terms-title {
    font-size: 36px;
    font-weight: 900;
    color: var(--gray-900);
    margin: 0 0 36px;
    letter-spacing: -1px;
    text-align: left;
}

.signup-terms-content {
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.8;
    text-align: left;
}

.signup-terms-content h3 {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 24px 0 8px;
}

.signup-terms-content ul {
    list-style: none;
    padding: 0 0 0 8px;
    margin: 0 0 4px;
}

.signup-terms-content li {
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.9;
    position: relative;
    padding-left: 16px;
}

.signup-terms-content li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid var(--gray-700);
    position: absolute;
    left: 2px;
    top: 11px;
}

.signup-btn-outline.signup-btn-terms {
    border-color: #1E3A8A;
    color: #1E3A8A;
}
.signup-btn-outline.signup-btn-terms:hover {
    background: #f5f7ff;
}

/* 반응형 */
@media (max-width: 1024px) {
    .signup-stepper { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .signup-step { padding: 10px 12px; }
    .signup-step-num { font-size: 11px; }
    .signup-step-label { font-size: 12px; }
    .signup-flow { flex-wrap: wrap; }
    .signup-flow-item { flex: 0 0 calc(50% - 12px); }
    .signup-flow-arrow { display: none; }
    .signup-doc-head,
    .signup-doc-row { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
}

@media (max-width: 768px) {
    .signup-stepper { grid-template-columns: 1fr; gap: 4px; margin-bottom: 32px; }
    .signup-step:not(:last-child)::after { display: none; }
    .signup-form-block { max-width: 100%; }
    .signup-row-with-action { flex-direction: column; }
    .signup-input-otp { width: 40px; height: 40px; }
    .signup-flow-item { flex: 1 1 100%; }
    .signup-modal-actions-pair { grid-template-columns: 1fr; }
    .signup-welcome-title { font-size: 40px; }
    .signup-phone-done-value { font-size: 28px; }
}

/* =========================================
   반응형
   ========================================= */

@media (max-width: 1199px) {
    .gnb-nav-wrap {
        display: none;
        position: absolute;
        top: var(--gnb-height);
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
        height: auto;
        z-index: 1040;
    }

    .gnb-nav-wrap.show { display: flex; }
    .gnb-nav { flex-direction: column; height: auto; gap: 0; }
    .gnb-nav-item { height: auto; flex-direction: column; }
    .gnb-nav-link { padding: 12px 16px; height: auto; }
    .gnb-dropdown { position: static; border: none; box-shadow: none; border-radius: 0; padding: 0 0 0 16px; }
    .gnb-actions { flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--gray-200); margin-top: 8px; }
    .gnb-user-menu { position: static; box-shadow: none; border: none; border-radius: 0; padding: 0 0 0 16px; }
}

@media (max-width: 1199px) {
    .footer-upper > .container,
    .footer-lower > .container {
        padding-left: 24px;
        padding-right: 24px;
    }
    .footer-upper-row { flex-wrap: wrap; }
    .footer-lower-row { flex-wrap: wrap; }
    .footer-links-area { justify-content: flex-start; gap: 12px 28px; }
}

@media (max-width: 768px) {
    .gnb-container { padding: 0 16px; }
    .footer-upper > .container,
    .footer-lower > .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    .footer-upper-row { flex-direction: column; }
    .footer-lower-row { flex-direction: column; gap: 12px; }
    .footer-company { min-width: 0; }
    .footer-brand-area { min-width: 0; }
    .footer-info { gap: 0 16px; }
    .footer-info-item { white-space: normal; }
}

/* =========================================
   인증(로그인/비밀번호 재설정) 페이지
   ========================================= */

.auth-page {
    min-height: 100vh;
    background: #fff;
    padding: 60px 20px 80px;
    display: flex;
    justify-content: center;
}

.auth-container {
    width: 100%;
    max-width: 460px;
    text-align: center;
}

.auth-container-wide {
    max-width: 560px;
}

.auth-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.auth-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.auth-desc {
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0 0 40px;
}

.auth-form {
    text-align: left;
    margin-top: 32px;
}

.auth-form-narrow {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.auth-form-row {
    margin-bottom: 20px;
}

.auth-form-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 8px;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-900);
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
}

.auth-input::placeholder {
    color: var(--gray-400);
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.auth-input.is-error {
    border-color: #ef4444;
    background: #fff5f5;
}

.auth-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.auth-input-with-icon {
    position: relative;
    display: block;
}

.auth-input-icon-right {
    padding-right: 44px;
}

.auth-input-with-icon-both {
    position: relative;
}

.auth-input-leading {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 16px;
    pointer-events: none;
}

.auth-input-icon-both {
    padding-left: 40px;
    padding-right: 44px;
}

.auth-input-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.auth-input-toggle:hover {
    color: var(--gray-600);
}

.auth-error-text {
    font-size: 12px;
    color: #ef4444;
    margin-top: 6px;
    line-height: 1.5;
}

.auth-help-text {
    font-size: 11px;
    color: var(--gray-500);
    margin-top: 8px;
}

.auth-pw-meter {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.auth-pw-meter-bar {
    flex: 1;
    height: 2px;
    background: var(--gray-300);
    border-radius: 2px;
}

.auth-pw-meter-bar.is-on {
    background: var(--color-sky-vivid);
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-900);
    font-weight: 700;
    margin: 8px 0 24px;
    cursor: pointer;
    user-select: none;
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-sky-vivid);
}

.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.auth-btn:disabled {
    background: var(--gray-300);
    color: var(--gray-500);
    cursor: not-allowed;
}

.auth-btn-block {
    width: 100%;
    min-height: 56px;
}

.auth-btn-mt-lg {
    margin-top: 28px;
}

.auth-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
}

.auth-btn-primary:hover:not(:disabled) {
    background: #0167d4;
}

.auth-btn-primary:disabled {
    background: #9bb8d6;
    color: #fff;
}

.auth-btn-dark {
    background: var(--gray-800);
    color: #fff;
    padding: 0 22px;
    height: 48px;
    flex-shrink: 0;
}

.auth-btn-dark:hover:not(:disabled) {
    background: var(--gray-900);
}

.auth-btn-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.auth-link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--gray-500);
}

.auth-link-row-back {
    margin-top: 24px;
}

.auth-link-text {
    color: var(--gray-500);
}

.auth-link-bold {
    color: var(--gray-900);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.auth-link-bold:hover {
    color: var(--color-sky-vivid);
}

.auth-link-back {
    color: var(--gray-500);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-link-back:hover {
    color: var(--gray-800);
}

/* 회원가입 박스 */
.auth-signup-box {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin-top: 36px;
    padding: 16px 20px;
    border: 1px solid var(--color-sky);
    border-radius: 6px;
    background: #fff;
    text-decoration: none;
    transition: background 0.15s;
}

.auth-signup-box:hover {
    background: var(--color-sky-soft);
}

.auth-signup-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.auth-signup-text {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auth-signup-text-sub {
    font-size: 11px;
    color: var(--gray-500);
}

.auth-signup-text-main {
    font-size: 16px;
    font-weight: 800;
    color: var(--color-sky-vivid);
}

/* 휴대폰 인증 */
.auth-row-with-action {
    display: flex;
    gap: 8px;
    align-items: center;
}

.auth-phone-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.auth-phone-dash {
    color: var(--gray-400);
    font-size: 12px;
}

.auth-input-prefix {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

.auth-input-phone {
    flex: 1;
    text-align: center;
    min-width: 0;
}

/* 모달 */
.auth-modal-w400 { max-width: 400px; }
.auth-modal-w480 { max-width: 480px; }

.auth-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    position: relative;
}

.auth-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--gray-500);
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.auth-modal-close:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.auth-modal-body-confirm {
    text-align: center;
    padding: 40px 32px 24px;
}

.auth-modal-icon-info {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(79, 192, 252, 0.15);
    color: var(--color-sky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    margin-bottom: 20px;
}

.auth-modal-icon-success {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #DBE7DA;
    color: #4F8753;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    line-height: 1;
    margin-bottom: 20px;
}

.auth-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.auth-modal-confirm-text {
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

.auth-modal-actions-single {
    padding: 0 24px 28px;
}

/* 이메일 템플릿 추가 클래스 (비밀번호 재설정용) */
.email-action {
    margin: 32px 0 24px;
}

.email-action-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    background: var(--color-sky);
    color: #fff;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    box-sizing: border-box;
}

.email-action-btn:hover {
    background: var(--color-sky-vivid);
    color: #fff;
}

.email-url-note {
    font-size: 12px;
    color: var(--gray-600);
    margin: 28px 0 12px;
    line-height: 1.6;
}

.email-url-box {
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--gray-700);
    background: #fff;
    word-break: break-all;
    line-height: 1.7;
}

.email-guide-box {
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 18px 22px;
    margin-top: 28px;
}

.email-guide-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 10px;
}

.email-guide-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.8;
}

@media (max-width: 768px) {
    .auth-page { padding: 32px 16px 60px; }
    .auth-title { font-size: 24px; }
    .auth-row-with-action { flex-direction: column; align-items: stretch; }
    .auth-btn-dark { width: 100%; }
    .auth-input-prefix { width: 70px; }
}

/* =========================================
   충전하기 (Credit Charge)
   ========================================= */

.charge-page { padding-bottom: 60px; }

.charge-title {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 32px;
}

.charge-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 1024px) {
    .charge-grid { grid-template-columns: 1fr; }
}

/* 카드 (좌·우 공통) */
.charge-card {
    background: #fff;
    border: 1px solid var(--color-divider, #DDDDDD);
    border-radius: 16px;
    padding: 32px 36px;
}

.charge-card-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 24px;
}

/* 코인 뱃지 (C) */
.charge-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-indigo);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}
.charge-coin-sm { width: 16px; height: 16px; font-size: 10px; }
.charge-coin-md { width: 18px; height: 18px; font-size: 11px; }

/* ============================
   좌측: 보유 크레딧 / 옵션 / 합계
   ============================ */
.charge-balance {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f1efff;
    border-radius: 12px;
    padding: 14px 18px;
}

.charge-balance-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.charge-balance-label {
    font-size: 14px;
    color: var(--gray-700);
    font-weight: 500;
}

.charge-balance-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-left: 4px;
}

.charge-balance-rate {
    margin-left: auto;
    font-size: 13px;
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.charge-divider {
    border: none;
    border-top: 1px solid var(--color-divider, #DDDDDD);
    margin: 20px 0;
}

.charge-options {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.charge-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-800);
    user-select: none;
}

.charge-option input[type="radio"] {
    accent-color: var(--color-indigo);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.charge-option-amount {
    min-width: 70px;
    font-weight: 500;
}

.charge-option-bonus {
    margin-left: 12px;
    font-size: 13px;
    color: var(--color-sky-vivid);
}

.charge-summary {
    text-align: center;
    margin-top: 32px;
}

.charge-summary-label {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.charge-summary-amount {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-sky-vivid);
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.charge-summary-unit {
    font-size: 22px;
    font-weight: 700;
    margin-left: 4px;
}

.charge-summary-vat {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* ============================
   우측: 결제카드 등록 / 안내 / 약관
   ============================ */
.charge-card-section { margin-bottom: 16px; }

.charge-section-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 14px;
}

/* 빈 카드 상태 */
.charge-card-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.charge-card-empty i { font-size: 14px; }

/* 카드 리스트 */
.charge-card-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 14px;
}

.charge-card-item {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
}

.charge-card-item input[type="radio"] {
    accent-color: var(--color-sky-vivid);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.charge-card-thumb {
    width: 64px;
    height: 40px;
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 4px 6px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6b7280, #374151);
}
.charge-card-thumb-master { background: linear-gradient(135deg, #6366f1, #1e1b4b); }
.charge-card-thumb-visa   { background: linear-gradient(135deg, #475569, #1e293b); }
.charge-card-thumb-brand  { letter-spacing: 0.5px; }
.charge-card-thumb-number { font-size: 6px; font-weight: 500; opacity: 0.8; }

.charge-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.charge-card-info-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
}

.charge-card-info-number {
    font-size: 13px;
    color: var(--gray-600);
}

/* 카드 추가 버튼 */
.charge-add-card {
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid var(--color-divider, #DDDDDD);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.charge-add-card:hover { background: var(--gray-50); }

.charge-error-text {
    margin: 8px 0 0;
    font-size: 12px;
    color: #E5484D;
}

/* 환불안내 박스 */
.charge-info-box {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 18px 20px;
    margin-top: 24px;
}

.charge-info-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: 10px;
}

.charge-info-list {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.7;
}

.charge-info-list li + li { margin-top: 4px; }

.charge-info-link {
    color: var(--gray-800);
    font-weight: 700;
    text-decoration: none;
}
.charge-info-link:hover { color: var(--color-sky-vivid); }

/* 약관 동의 */
.charge-terms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    color: var(--gray-700);
    cursor: pointer;
    user-select: none;
}

.charge-terms input[type="checkbox"] {
    accent-color: var(--color-sky-vivid);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.charge-terms.is-error {
    background: #fdecec;
    border-color: #E5484D;
}

/* 결제하기 버튼 */
.charge-pay-btn {
    width: 100%;
    height: 52px;
    margin-top: 18px;
    border: none;
    border-radius: 10px;
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}
.charge-pay-btn:hover:not(.is-disabled) { background: #0167d4; }
.charge-pay-btn.is-disabled {
    background: var(--gray-200);
    color: var(--gray-500);
    cursor: not-allowed;
}

/* ============================
   컨펌 / 카드추가 모달
   ============================ */
.charge-modal-w400 { max-width: 400px; }
.charge-modal-w480 { max-width: 480px; }

.charge-modal {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* 헤더 (W480 입력 모달용) */
.charge-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--color-divider, #DDDDDD);
}

.charge-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.charge-modal-close {
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
}
.charge-modal-close:hover { color: var(--gray-800); }

/* 카드 등록 폼 */
.charge-card-form {
    padding: 24px 28px 28px;
}

.charge-form-row + .charge-form-row {
    margin-top: 16px;
}

.charge-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.charge-form-col { min-width: 0; }

.charge-form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.charge-form-label-meta {
    font-weight: 400;
    color: var(--gray-500);
    margin-left: 4px;
}

.charge-form-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--color-divider, #DDDDDD);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--gray-800);
    background: #fff;
}

.charge-form-input::placeholder {
    color: var(--gray-400);
}

.charge-form-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.charge-form-input.is-error {
    border-color: #E5484D;
}
.charge-form-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}

.charge-form-input-half {
    width: 50%;
    min-width: 120px;
}

/* 카드 종류 라디오 */
.charge-radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
}

.charge-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    user-select: none;
}

.charge-radio input[type="radio"] {
    accent-color: var(--color-sky-vivid);
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

/* 카드번호 4분할 */
.charge-cardnum-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.charge-cardnum-input {
    text-align: center;
    letter-spacing: 1px;
    padding: 0 4px;
}

/* 유효기간 MM / YY */
.charge-expiry-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.charge-expiry-input {
    text-align: center;
    flex: 1;
    min-width: 0;
}

.charge-expiry-sep {
    color: var(--gray-400);
    font-weight: 600;
}

.charge-modal-btn-block {
    width: 100%;
    margin-top: 24px;
}

.charge-modal-body {
    text-align: center;
    padding: 40px 32px 24px;
}

.charge-modal-icon-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    color: var(--color-sky);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 14px;
}

.charge-modal-text {
    font-size: 15px;
    color: var(--gray-800);
    line-height: 1.6;
    margin: 0;
}

.charge-modal-actions-pair {
    display: flex;
    gap: 12px;
    padding: 0 24px 24px;
}

.charge-modal-btn {
    flex: 1;
    height: 48px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.charge-modal-btn-outline {
    background: #fff;
    border: 1px solid var(--color-sky-vivid);
    color: var(--color-sky-vivid);
}
.charge-modal-btn-outline:hover { background: var(--color-sky-soft); }

.charge-modal-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
}
.charge-modal-btn-primary:hover { background: #0167d4; }

/* =========================================
   충전 결과 페이지 (성공 / 실패)
   ========================================= */
.charge-result-page { padding-bottom: 60px; }

.charge-result-page > .container {
    max-width: 720px;
}

.charge-result-page > .container {
    text-align: center;
}

.charge-result-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: var(--color-sky);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin: 24px auto 16px;
}

.charge-result-icon-fail { color: var(--color-sky); }

.charge-result-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 36px;
}

/* 상세 박스 */
.charge-result-detail {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 28px 36px;
    text-align: left;
    margin: 0 auto 32px;
    max-width: 560px;
}

.charge-result-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
    font-size: 14px;
}

.charge-result-row + .charge-result-row { margin-top: 4px; }

.charge-result-label {
    flex: 0 0 110px;
    color: var(--gray-500);
    font-weight: 500;
}

.charge-result-value {
    color: var(--gray-800);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.charge-result-value-link {
    color: var(--color-sky-vivid);
    font-weight: 700;
}

.charge-result-value-danger {
    color: #E5484D;
    font-weight: 700;
}

.charge-result-meta {
    color: var(--gray-500);
    margin-left: 6px;
    font-size: 13px;
}

/* Before / After 비교 */
.charge-result-compare {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-divider, #DDDDDD);
    border-radius: 12px;
    padding: 18px 24px;
    max-width: 560px;
    margin: 0 auto 32px;
}

.charge-result-compare-cell {
    text-align: center;
}

.charge-result-compare-label {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 6px;
}

.charge-result-compare-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-800);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.charge-result-compare-value-after {
    color: var(--color-indigo);
}

.charge-result-compare-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-divider, #DDDDDD);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    margin: 0 auto;
}

/* 액션 버튼 */
.charge-result-actions {
    max-width: 560px;
    margin: 0 auto;
}

.charge-result-actions-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.charge-result-btn {
    height: 52px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    border: none;
}

.charge-result-btn-block { width: 100%; }

.charge-result-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
}
.charge-result-btn-primary:hover { background: #0167d4; }

.charge-result-btn-outline {
    background: #fff;
    border: 1px solid var(--color-sky-vivid);
    color: var(--color-sky-vivid);
}
.charge-result-btn-outline:hover { background: var(--color-sky-soft); }

.charge-result-empty {
    text-align: center;
    padding: 80px 16px;
}

@media (max-width: 768px) {
    .charge-card { padding: 24px 20px; }
    .charge-summary-amount { font-size: 26px; }
    .charge-result-detail { padding: 22px 20px; }
    .charge-result-row { gap: 12px; }
    .charge-result-label { flex-basis: 84px; font-size: 13px; }
}

/* =========================================
   문의하기 (Inquiry)
   ========================================= */

.inquiry-page {
    min-height: 100%;
}

/* 헤더 */
.inquiry-header {
    text-align: center;
    margin-bottom: 32px;
}

.inquiry-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}

.inquiry-subtitle {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray-600);
    margin: 0;
}

/* 폼 카드 */
.inquiry-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 48px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.inquiry-complete-card,
.inquiry-detail-card {
    max-width: 1080px;
    margin: 0 auto;
}

/* 필드 공통 */
.inquiry-field {
    padding: 24px 0;
    border-bottom: 1px solid transparent;
}

.inquiry-field + .inquiry-field {
    border-top: 1px solid var(--gray-100);
}

.inquiry-label {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 16px;
}

.inquiry-label-required::after {
    content: '*';
    color: #E5484D;
    margin-left: 4px;
}

.inquiry-label-meta {
    font-size: 14px;
    font-weight: 400;
    color: var(--gray-500);
    margin-left: 4px;
}

/* 라디오 행 */
.inquiry-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
}

.inquiry-radio {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.inquiry-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.inquiry-radio-mark {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    background: #fff;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.inquiry-radio input[type="radio"]:checked + .inquiry-radio-mark {
    border-color: var(--color-sky-vivid);
}

.inquiry-radio input[type="radio"]:checked + .inquiry-radio-mark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-sky-vivid);
}

.inquiry-radio-text {
    font-size: 15px;
    color: var(--gray-800);
}

/* 상품 유형 (Sub-types) */
.inquiry-subtype {
    margin-top: 20px;
    background: var(--gray-50);
    border-radius: 12px;
    padding: 20px 24px;
}

.inquiry-subtype-label {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.inquiry-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inquiry-chip {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}

.inquiry-chip:hover {
    border-color: var(--gray-300);
    color: var(--gray-900);
}

.inquiry-chip.is-active {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
    color: #fff;
    font-weight: 700;
}

/* 입력 */
.inquiry-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 14px;
    color: var(--gray-900);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.inquiry-input::placeholder {
    color: var(--gray-400);
}

.inquiry-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.inquiry-input.is-error {
    border-color: #E5484D;
}

.inquiry-error-text {
    margin: 8px 0 0;
    font-size: 13px;
    color: #E5484D;
}

/* 에디터 */
.inquiry-editor {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: border-color 0.15s;
}

.inquiry-editor:focus-within {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.inquiry-editor.is-error {
    border-color: #E5484D;
}

.inquiry-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    background: #fff;
}

.inquiry-editor-toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.inquiry-editor-toolbar-divider {
    width: 1px;
    height: 16px;
    background: var(--gray-200);
}

.inquiry-editor-toolbar-spacer {
    flex: 1;
}

.inquiry-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--gray-700);
    font-size: 14px;
    cursor: default;
}

.inquiry-tool:hover {
    background: var(--gray-100);
}

.inquiry-tool-disabled {
    color: var(--gray-300);
}

.inquiry-tool-disabled:hover {
    background: transparent;
}

.inquiry-tool-text {
    font-weight: 700;
    font-size: 13px;
}

.inquiry-editor-body {
    width: 100%;
    min-height: 320px;
    padding: 20px 24px;
    border: 0;
    background: var(--gray-50);
    color: var(--gray-800);
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
    font-family: inherit;
}

.inquiry-editor-body::placeholder {
    color: var(--gray-500);
    white-space: pre-wrap;
}

.inquiry-editor-body:focus {
    outline: none;
}

/* 첨부파일 */
.inquiry-file-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.inquiry-file-btn {
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 6px;
    background: var(--gray-200);
    color: var(--gray-800);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.inquiry-file-btn:hover {
    background: var(--gray-300);
}

.inquiry-file-hint {
    font-size: 13px;
    color: var(--gray-500);
}

.inquiry-file-list {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inquiry-file-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-700);
}

.inquiry-file-item .bi-paperclip {
    color: var(--gray-400);
}

.inquiry-file-name {
    color: var(--gray-700);
}

.inquiry-file-remove {
    width: 20px;
    height: 20px;
    border: 0;
    background: transparent;
    color: var(--gray-400);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.inquiry-file-remove:hover {
    color: var(--gray-700);
}

/* 제출 */
.inquiry-submit-row {
    padding-top: 32px;
}

.inquiry-submit-btn {
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 10px;
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: background 0.15s;
}

.inquiry-submit-btn:hover {
    background: #0167d4;
}

.inquiry-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 14px;
}

/* 파일 용량 초과 알림 모달 */
.inquiry-modal-w400 { max-width: 400px; }

.inquiry-alert {
    border: 0;
    border-radius: 14px;
    padding: 32px 24px 20px;
    background: #fff;
}

.inquiry-alert-body {
    text-align: center;
    margin-bottom: 20px;
}

.inquiry-alert-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}

.inquiry-alert-text {
    margin: 0;
    font-size: 15px;
    color: var(--gray-800);
    line-height: 1.5;
}

.inquiry-alert-btn {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--color-sky);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.inquiry-alert-btn:hover {
    background: var(--color-sky-vivid);
}

/* =========================================
   문의 완료 페이지
   ========================================= */

.inquiry-complete-card {
    text-align: center;
    padding: 56px 48px 48px;
}

.inquiry-complete-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #DCEBD7;
    color: #5A8A4F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    margin: 0 auto 28px;
}

.inquiry-complete-title {
    font-size: 30px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}

.inquiry-complete-desc {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0 0 32px;
}

.inquiry-complete-divider {
    border: 0;
    border-top: 1px solid var(--gray-300);
    max-width: 360px;
    margin: 0 auto 32px;
}

/* 문의 내용 박스 */
.inquiry-summary {
    text-align: left;
    background: var(--gray-50);
    border-radius: 12px;
    padding: 24px 28px;
    max-width: 800px;
    margin: 0 auto 32px;
}

.inquiry-summary-header {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}

.inquiry-summary-header-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.inquiry-summary-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.inquiry-summary-row {
    display: flex;
    align-items: center;
    gap: 24px;
    font-size: 14px;
}

.inquiry-summary-label {
    flex: 0 0 140px;
    color: var(--gray-600);
}

.inquiry-summary-value {
    color: var(--gray-800);
}

.inquiry-summary-row-title {
    margin-top: 4px;
}

.inquiry-summary-title-text {
    font-size: 14px;
    color: var(--gray-800);
    font-weight: 500;
}

.inquiry-summary-content {
    margin-top: 8px;
    padding: 4px 0;
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.inquiry-summary-files {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inquiry-summary-file {
    font-size: 13px;
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.inquiry-summary-file .bi-paperclip {
    color: var(--gray-400);
}

.inquiry-complete-guide {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 20px;
}

.inquiry-complete-btn {
    width: 100%;
    max-width: 600px;
    height: 56px;
    border: 1px solid var(--color-sky);
    border-radius: 10px;
    background: #fff;
    color: var(--color-sky-vivid);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background 0.15s;
}

.inquiry-complete-btn:hover {
    background: var(--color-sky-soft);
}

.inquiry-complete-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 13px;
}

/* 반응형 */
@media (max-width: 768px) {
    .inquiry-card {
        padding: 28px 20px;
        border-radius: 12px;
    }
    .inquiry-complete-card {
        padding: 40px 20px;
    }
    .inquiry-complete-title { font-size: 22px; }
    .inquiry-radio-row { gap: 18px; }
    .inquiry-label { font-size: 16px; }
    .inquiry-summary { padding: 20px 18px; }
    .inquiry-summary-row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .inquiry-summary-label { flex-basis: auto; font-size: 13px; }
    .inquiry-editor-body { min-height: 240px; padding: 16px; }
    .inquiry-submit-btn { height: 52px; font-size: 15px; }
}

/* =========================================
   문의 내역 - 리스트
   ========================================= */

.inquiries-card {
    padding: 32px 40px 40px;
}

/* 빈 상태 */
.inquiries-empty {
    text-align: center;
    padding: 120px 20px 140px;
}

.inquiries-empty-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    margin: 0 0 36px;
    letter-spacing: -0.3px;
}

.inquiries-empty-emoji {
    font-size: 22px;
    vertical-align: -2px;
}

.inquiries-empty-desc {
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.9;
    margin: 0;
}

/* 통계 */
.inquiries-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    padding: 20px 28px;
    margin-bottom: 32px;
}

.inquiries-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 12px;
    position: relative;
}

.inquiries-stat + .inquiries-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: var(--gray-100);
}

.inquiries-stat-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inquiries-stat-label {
    font-size: 13px;
    color: var(--gray-600);
}

.inquiries-stat-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
}

.inquiries-stat-value-pending {
    color: #E5484D;
}

.inquiries-stat-value-answering {
    color: #1F8A4C;
}

.inquiries-stat-value-complete {
    color: var(--gray-900);
}

.inquiries-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #fff;
    flex-shrink: 0;
}

.inquiries-stat-icon-pending {
    background: #F26D6D;
}

.inquiries-stat-icon-answering {
    background: #4DBE7A;
}

.inquiries-stat-icon-complete {
    background: var(--gray-800);
}

/* 검색 */
.inquiries-search-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    padding: 16px 4px 12px;
}

.inquiries-search {
    position: relative;
    width: 320px;
    max-width: 100%;
}

.inquiries-search-input {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 4px;
    border: 0;
    border-bottom: 1px solid var(--gray-300);
    background: transparent;
    font-size: 14px;
    color: var(--gray-800);
    outline: none;
    transition: border-color 0.15s;
}

.inquiries-search-input::placeholder {
    color: var(--gray-400);
}

.inquiries-search-input:focus {
    border-bottom-color: var(--color-sky-vivid);
}

.inquiries-search-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 16px;
    pointer-events: none;
}

/* 검색 결과 없음 */
.inquiries-no-result {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
    font-size: 14px;
}

/* 리스트 */
.inquiries-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.inquiries-item {
    padding: 24px 4px 22px;
    border-top: 1px solid var(--gray-200);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.inquiries-item:hover {
    background: var(--gray-50);
}

.inquiries-item:last-child {
    border-bottom: 1px solid var(--gray-200);
}

.inquiries-item-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.inquiries-item-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}

.inquiries-category {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-sky);
    flex-shrink: 0;
}

.inquiries-item-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.4;
    word-break: break-word;
}

.inquiries-item-preview {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inquiries-item-meta {
    display: flex;
    align-items: center;
    gap: 18px;
}

.inquiries-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-500);
}

.inquiries-meta-item i {
    font-size: 14px;
}

/* 상태 배지 */
.inq-status-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

.inq-status-pending {
    background: #FCE0E1;
    color: #C0303A;
}

.inq-status-answering {
    background: #DCEFE0;
    color: #1F8A4C;
}

.inq-status-complete {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* 더보기 */
.inquiries-more-btn {
    width: 100%;
    height: 52px;
    margin-top: 20px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: #fff;
    color: var(--gray-700);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
}

.inquiries-more-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.inquiries-more-btn i {
    font-size: 14px;
}

/* 3-dot 메뉴 */
.inq-menu-wrap {
    position: relative;
}

.inq-menu-btn {
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--gray-500);
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.inq-menu-btn:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.inq-menu-btn-sm {
    width: 24px;
    height: 24px;
    font-size: 14px;
}

.inq-menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 96px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.08);
    padding: 4px;
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.inq-menu-item {
    height: 36px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 13px;
    color: var(--gray-800);
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.inq-menu-item:hover {
    background: var(--color-sky-soft);
}

.inq-menu-item-danger {
    color: var(--color-sky-vivid);
}

/* 위험 알림 아이콘 (재사용) */
.inquiry-alert-icon-danger {
    background: #FCE0E1;
    color: #C0303A;
}

/* 컨펌 액션 */
.inq-confirm-actions {
    display: flex;
    gap: 8px;
}

.inq-btn {
    flex: 1;
    height: 44px;
    padding: 0 16px;
    border-radius: 8px;
    border: 0;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.inq-btn-primary {
    background: var(--color-sky);
    color: #fff;
}

.inq-btn-primary:hover:not(:disabled) {
    background: var(--color-sky-vivid);
}

.inq-btn-primary:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

.inq-btn-outline {
    background: #fff;
    border: 1px solid var(--color-sky);
    color: var(--color-sky-vivid);
}

.inq-btn-outline:hover {
    background: var(--color-sky-soft);
}

/* =========================================
   문의 내역 - 상세
   ========================================= */

.inquiry-detail-card {
    padding: 32px 40px 48px;
}

.inquiry-detail-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.inquiry-detail-title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.inquiry-detail-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--gray-900);
    letter-spacing: -0.3px;
}

.inquiry-detail-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 4px;
}

.inquiry-detail-divider {
    border: 0;
    border-top: 1px solid var(--gray-200);
    margin: 20px 0 24px;
}

.inquiry-detail-info-text {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0 0 16px;
}

.inquiry-detail-body {
    background: var(--gray-200);
    border-radius: 8px;
    min-height: 360px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-500);
    font-size: 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.inquiry-detail-body-text {
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
}

/* 첨부파일 */
.inquiry-detail-files {
    display: flex;
    gap: 32px;
    margin-top: 20px;
    padding: 0 4px;
}

.inquiry-detail-files-label {
    font-size: 13px;
    color: var(--gray-700);
    flex-shrink: 0;
    padding-top: 2px;
}

.inquiry-detail-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inquiry-detail-file {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--gray-700);
}

.inquiry-detail-file-name {
    color: var(--gray-700);
}

.inquiry-detail-file-btn {
    width: 22px;
    height: 22px;
    border: 0;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.inquiry-detail-file-btn:hover {
    color: var(--gray-800);
}

/* 댓글 */
.inquiry-comments {
    margin-top: 8px;
}

.inquiry-comments-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 16px;
}

.inquiry-comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inquiry-comment {
    background: var(--gray-50);
    border-radius: 12px;
    padding: 18px 20px;
}

.inquiry-comment-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.inquiry-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
}

.inquiry-comment-avatar i {
    line-height: 1;
}

.inquiry-comment-body {
    flex: 1;
    min-width: 0;
}

.inquiry-comment-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.inquiry-comment-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-900);
}

.inquiry-comment-time {
    font-size: 12px;
    color: var(--gray-500);
}

.inquiry-comment-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.inquiry-comment-reply-btn {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
}

.inquiry-comment-reply-btn:hover {
    color: var(--gray-900);
    text-decoration: underline;
}

.inquiry-comment-text {
    margin: 0;
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.inquiry-comment-mention {
    color: var(--color-sky-vivid);
    font-weight: 600;
}

.inquiry-comment-textarea {
    width: 100%;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--gray-800);
    background: #fff;
    line-height: 1.6;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.inquiry-comment-textarea::placeholder {
    color: var(--gray-400);
}

.inquiry-comment-textarea:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.inquiry-comment-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.inquiry-comment-buttons .inq-btn {
    flex: 0 0 auto;
    min-width: 72px;
    height: 36px;
    font-size: 13px;
}

/* 답글 입력 */
.inquiry-reply-input {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--gray-200);
}

.inquiry-reply-input-body {
    flex: 1;
    min-width: 0;
}

.inquiry-reply-textarea {
    background: #fff;
}

/* 답글 목록 */
.inquiry-reply-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 14px 0 0 40px;
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inquiry-reply-item {
    background: #fff;
    border: 1px solid var(--gray-100);
    padding: 16px 18px;
}

/* 반응형 */
@media (max-width: 768px) {
    .inquiries-card,
    .inquiry-detail-card {
        padding: 24px 18px 28px;
    }
    .inquiries-stats {
        grid-template-columns: 1fr;
        padding: 12px 16px;
        gap: 10px;
    }
    .inquiries-stat {
        padding: 10px 6px;
    }
    .inquiries-stat + .inquiries-stat::before {
        display: none;
    }
    .inquiries-stat + .inquiries-stat {
        border-top: 1px solid var(--gray-100);
    }
    .inquiries-search {
        width: 100%;
    }
    .inquiries-empty {
        padding: 80px 16px 100px;
    }
    .inquiry-detail-body {
        min-height: 220px;
        padding: 20px;
    }
    .inquiry-detail-files {
        flex-direction: column;
        gap: 8px;
    }
    .inquiry-reply-list {
        padding-left: 16px;
    }
    .inquiry-comment {
        padding: 14px 14px;
    }
}

/* =========================================
   크레딧 관리 (Credit)
   ========================================= */

.credit-page { min-height: 100%; }

.credit-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 32px;
}

.credit-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
    letter-spacing: -0.3px;
}

/* ----- 요약 카드 ----- */
.credit-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 32px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 24px;
}

.credit-summary-left {
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 18px 20px;
}

.credit-summary-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-indigo);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    flex-shrink: 0;
}

.credit-summary-balance { flex: 1; min-width: 0; }

.credit-summary-balance-label {
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 4px;
    font-weight: 500;
}

.credit-summary-balance-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 24px;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.2;
}

.credit-charge-btn {
    flex-shrink: 0;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.credit-charge-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.credit-summary-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 8px;
}

.credit-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14px;
}

.credit-summary-row-label {
    color: var(--gray-700);
}

.credit-summary-row-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
}

/* ----- 필터 ----- */
.credit-filter {
    background: #fff;
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
    margin-bottom: 24px;
}

.credit-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.credit-filter-row + .credit-filter-row {
    margin-top: 12px;
}

.credit-filter-row-2nd {
    gap: 12px;
}

.credit-period-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.credit-period-btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.credit-period-btn:hover {
    background: var(--gray-50);
}

.credit-period-btn.is-active {
    background: var(--color-sky);
    border-color: var(--color-sky);
    color: #fff;
    font-weight: 600;
}

.credit-date-range {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.credit-date-input {
    position: relative;
    width: 160px;
}

.credit-date-input .credit-form-input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0 36px 0 12px;
    font-size: 13px;
    color: var(--gray-800);
    background: #fff;
}

.credit-date-input .credit-form-input::placeholder { color: var(--gray-400); }

.credit-date-input .credit-form-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.credit-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 14px;
    pointer-events: none;
}

.credit-date-sep {
    color: var(--gray-400);
    font-size: 14px;
}

.credit-search {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.credit-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 14px;
    pointer-events: none;
}

.credit-search-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--gray-200);
    border-radius: 24px;
    padding: 0 16px 0 38px;
    font-size: 13px;
    color: var(--gray-800);
    background: #fff;
}

.credit-search-input::placeholder { color: var(--gray-400); }

.credit-search-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.credit-select-wrap {
    position: relative;
    flex-shrink: 0;
}

.credit-select {
    appearance: none;
    -webkit-appearance: none;
    height: 40px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0 36px 0 14px;
    font-size: 13px;
    color: var(--gray-800);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path fill='%236b7280' d='M3.204 5h9.592L8 10.481z'/></svg>") no-repeat right 12px center;
    cursor: pointer;
    min-width: 120px;
}

.credit-select:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.credit-select-wrap-sm .credit-select-sm {
    height: 32px;
    min-width: 92px;
    font-size: 12px;
    padding: 0 30px 0 12px;
}

/* ----- 충전/사용 내역 카드 ----- */
.credit-history-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px 20px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04);
}

.credit-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.credit-history-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

/* ----- 테이블 ----- */
.credit-table-wrap {
    overflow-x: auto;
}

.credit-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: var(--gray-800);
}

.credit-table thead th {
    text-align: center;
    font-weight: 500;
    color: var(--gray-500);
    padding: 14px 12px;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
    white-space: nowrap;
}

.credit-table tbody td {
    text-align: center;
    padding: 16px 12px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-700);
    vertical-align: middle;
}

.credit-row {
    cursor: pointer;
    transition: background 0.15s;
}
.credit-row:hover { background: var(--gray-50); }

.credit-content-text {
    display: inline-block;
    margin-right: 8px;
}

.credit-receipt-btn {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-700);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.credit-receipt-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.credit-amount {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}

.credit-amount-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.credit-amount.is-positive { color: #F59E0B; }
.credit-amount.is-positive .credit-amount-icon i { color: #F59E0B; }

.credit-amount.is-negative { color: var(--color-sky-vivid); }
.credit-amount.is-negative .credit-amount-icon i { color: var(--color-sky-vivid); }

.credit-empty {
    padding: 60px 16px !important;
    color: var(--gray-500);
    font-size: 13px;
}

/* ----- 페이지네이션 ----- */
.credit-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 20px;
    padding: 12px 0;
}

.credit-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.credit-page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--gray-50);
    color: var(--gray-900);
}

.credit-page-btn:disabled {
    color: var(--gray-300);
    cursor: not-allowed;
    background: var(--gray-50);
}

.credit-page-btn.is-active {
    background: #fff;
    border-color: var(--gray-300);
    color: var(--gray-900);
    font-weight: 700;
}

/* ----- 영수증 모달 ----- */
.credit-receipt-body {
    padding: 20px 24px 24px;
}

.credit-receipt-placeholder {
    width: 100%;
    height: 160px;
    background: var(--gray-100);
    border-radius: 8px;
}

/* ----- 상세 모달 ----- */
.credit-detail-body {
    padding: 20px 24px 0;
}

.credit-detail-notice {
    background: var(--color-sky-soft);
    color: var(--gray-800);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.credit-detail-notice i {
    color: var(--color-sky-vivid);
    font-size: 15px;
    flex-shrink: 0;
}

.credit-detail-notice a {
    color: var(--color-sky-vivid);
    font-weight: 600;
    text-decoration: underline;
}

.credit-detail-list {
    margin: 0;
    border-top: 1px solid var(--gray-200);
}

.credit-detail-row {
    display: grid;
    grid-template-columns: 96px 1fr;
    align-items: center;
    border-bottom: 1px solid var(--gray-100);
    min-height: 44px;
}

.credit-detail-row dt {
    font-size: 13px;
    color: var(--gray-500);
    font-weight: 400;
    padding: 12px 0 12px 4px;
    margin: 0;
}

.credit-detail-row dd {
    font-size: 14px;
    color: var(--gray-800);
    padding: 12px 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.credit-detail-credit {
    font-weight: 600;
}
.credit-detail-credit.is-positive { color: #F59E0B; }
.credit-detail-credit.is-negative { color: var(--color-sky-vivid); }

.credit-detail-status { color: var(--gray-800); }

.credit-detail-cancel-link {
    background: none;
    border: none;
    padding: 0;
    color: #E5484D;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.credit-detail-footer {
    padding: 16px 24px 24px;
}

.credit-detail-confirm {
    width: 100%;
    background: var(--color-sky);
}
.credit-detail-confirm:hover { background: var(--color-sky-vivid); }

/* ----- Alert / Confirm 다이얼로그 ----- */
.credit-alert {
    border-radius: 12px;
    padding: 32px 24px 20px;
}

.credit-alert-body {
    text-align: center;
    margin-bottom: 20px;
}

.credit-alert-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--gray-300);
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 16px;
}

.credit-alert-text {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--gray-900);
    font-weight: 500;
    line-height: 1.5;
}

.credit-alert-desc {
    margin: 0;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.6;
}

.credit-alert-actions {
    padding: 0;
}

.credit-alert-btn {
    width: 100%;
    background: var(--color-sky);
}
.credit-alert-btn:hover { background: var(--color-sky-vivid); }

/* ----- 반응형 ----- */
@media (max-width: 1024px) {
    .credit-summary-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    .credit-summary-right { padding-right: 0; }
}

@media (max-width: 768px) {
    .credit-summary-left {
        flex-wrap: wrap;
    }
    .credit-charge-btn { width: 100%; }
    .credit-filter-row { flex-direction: column; align-items: stretch; }
    .credit-period-group { flex-wrap: wrap; }
    .credit-date-range { width: 100%; }
    .credit-date-input { flex: 1; width: auto; }
    .credit-history-card { padding: 18px 16px 16px; }
    .credit-table thead th,
    .credit-table tbody td {
        padding: 12px 8px;
        font-size: 12px;
    }
    .credit-detail-row {
        grid-template-columns: 80px 1fr;
    }
}

/* =========================================
   계정 관리 (account/settings)
   ========================================= */

.account-page { min-height: 100%; }

.account-header {
    text-align: center;
    margin-bottom: 32px;
}

.account-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px;
    letter-spacing: -0.3px;
}

.account-subtitle {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

/* ----- 메인 카드 ----- */
.account-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(17, 24, 39, 0.04);
    padding: 0 0 56px;
    overflow: hidden;
}

/* ----- 탭 ----- */
.account-tabs {
    display: flex;
    border-bottom: 1px solid var(--gray-200);
    padding: 0 8px;
    background: var(--gray-50);
}

.account-tab {
    flex: 1;
    height: 56px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.15s;
}

.account-tab:hover {
    color: var(--gray-700);
}

.account-tab.is-active {
    color: var(--gray-900);
    font-weight: 700;
    background: #fff;
}

.account-tab.is-active::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 2px;
    background: var(--color-sky);
    border-radius: 2px;
}

.account-tab-pane {
    padding: 56px 80px 0;
}

/* ----- 섹션 ----- */
.account-section + .account-section {
    margin-top: 48px;
}

.account-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 8px;
}

.account-section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.account-section-required {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700);
    margin-left: 4px;
}

.account-section-required-soft {
    color: var(--gray-500);
}

.account-section-help {
    font-size: 12px;
    color: var(--gray-500);
}

/* ----- 정보 행 ----- */
.account-info-list {
    padding: 8px 0;
}

.account-info-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 14px 0;
    align-items: center;
    font-size: 14px;
}

.account-info-list-form .account-info-row {
    padding: 12px 0;
}

.account-info-label {
    color: var(--gray-700);
    font-weight: 500;
}

.account-info-value {
    color: var(--gray-900);
}

.account-info-value-flex {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.account-info-text-muted {
    color: var(--gray-500);
}

.account-info-help {
    font-size: 12px;
    color: var(--gray-500);
    margin-left: 4px;
}

.account-required {
    color: #E5484D;
    margin-left: 2px;
}

/* ----- 토글 그룹 ----- */
.account-toggle-group {
    display: inline-flex;
    align-items: center;
    background: var(--gray-100);
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}

.account-toggle {
    height: 30px;
    padding: 0 16px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: 13px;
    font-weight: 500;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.account-toggle:hover {
    color: var(--gray-700);
}

.account-toggle.is-active {
    background: var(--color-sky);
    color: #fff;
    font-weight: 700;
}

/* ----- 버튼 ----- */
.account-btn-dark {
    background: #404040;
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 32px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.account-btn-dark:hover { background: #2d2d2d; }

.account-btn-dark-sm {
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
}

.account-btn-outline {
    background: #fff;
    border: 1px solid var(--gray-300);
    color: var(--gray-800);
    border-radius: 8px;
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.account-btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.account-btn-outline-sm {
    height: 32px;
    font-size: 12px;
}

.account-btn-danger {
    color: #E5484D;
    border-color: #f5c2c4;
}

.account-btn-danger:hover {
    background: #fff5f5;
    border-color: #E5484D;
}

.account-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 8px;
    height: 56px;
    padding: 0 32px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 480px;
}

.account-btn-primary:hover { background: #0167d4; }

.account-btn-primary:disabled {
    background: var(--gray-300);
    color: #fff;
    cursor: not-allowed;
}

.account-btn-primary-md {
    height: 48px;
    font-size: 14px;
    min-width: 360px;
}

.account-btn-primary-sm {
    height: 36px;
    padding: 0 16px;
    font-size: 12px;
    min-width: auto;
}

.account-btn-primary-block {
    width: 100%;
    min-width: 0;
}

/* ----- 폼 인풋 ----- */
.account-form-input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--gray-900);
    background: #fff;
}

.account-form-input::placeholder { color: var(--gray-400); }

.account-form-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.account-form-input:disabled {
    background: var(--gray-50);
    color: var(--gray-500);
}

.account-form-input.is-error {
    border-color: #E5484D;
}

.account-form-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.15);
}

.account-form-input-md { max-width: 320px; }
.account-form-input-xs { max-width: 100px; text-align: center; }

.account-phone-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.account-form-row + .account-form-row {
    margin-top: 24px;
}

.account-form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.account-form-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-form-aside {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.account-form-aside-help {
    font-size: 12px;
    color: var(--gray-500);
}

.account-form-aside-link {
    font-size: 12px;
    color: var(--gray-900);
    font-weight: 600;
    text-decoration: underline;
}

.account-form-error {
    color: #E5484D;
    font-size: 12px;
    margin: 6px 0 0;
}

.account-form-help {
    color: var(--gray-500);
    font-size: 12px;
    margin: 6px 0 0;
}

/* ----- 액션 영역 ----- */
.account-actions {
    margin-top: 56px;
    text-align: center;
}

.account-actions-tight {
    margin-top: 32px;
}

.account-actions-center {
    text-align: center;
}

.account-link-delete {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    color: var(--gray-700);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.account-link-delete:hover { color: var(--gray-900); }

/* ----- 결제 카드 관리 ----- */
.account-cards-wrap {
    padding: 24px 0 0;
    max-width: 720px;
    margin: 0 auto;
}

.account-card-list {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.account-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    transition: background 0.15s;
}

.account-card-row:hover { background: var(--gray-50); }

.account-card-radio {
    position: relative;
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.account-card-radio input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.account-card-radio-dot {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: #fff;
    position: relative;
    transition: border-color 0.15s;
}

.account-card-radio input[type="radio"]:checked + .account-card-radio-dot {
    border-color: var(--color-sky);
}

.account-card-radio input[type="radio"]:checked + .account-card-radio-dot::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-sky);
}

.account-card-image {
    width: 88px;
    height: 56px;
    border-radius: 8px;
    background: linear-gradient(135deg, #1f2a5a 0%, #3a4a8c 100%);
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 6px 8px;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.account-card-image.is-visa {
    background: linear-gradient(135deg, #6b3fbe 0%, #c25cce 100%);
}

.account-card-image-num {
    font-size: 8px;
    opacity: 0.9;
}

.account-card-image-brand {
    font-size: 9px;
    font-weight: 800;
}

.account-card-image-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #eb5424;
}

.account-card-info {
    flex: 1;
    min-width: 0;
}

.account-card-brand {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.account-card-num {
    font-size: 13px;
    color: var(--gray-500);
}

.account-card-delete {
    height: 32px;
    padding: 0 18px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-500);
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

.account-card-delete:hover {
    background: var(--gray-50);
    color: var(--gray-800);
}

.account-card-add {
    width: 100%;
    height: 44px;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    background: #fff;
    color: var(--gray-500);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.account-card-add:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.account-card-add i { margin-right: 4px; }

/* ----- 비밀번호 변경 ----- */
.account-password-form {
    max-width: 600px;
    margin: 32px auto 0;
    padding-top: 32px;
}

/* ----- 보안로그인 ----- */
.account-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
}

.account-security-row-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.account-security-row-desc {
    font-size: 12px;
    color: var(--gray-500);
}

.account-security-method-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

.account-security-method {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    position: relative;
}

.account-security-method:hover {
    border-color: var(--gray-300);
}

.account-security-method.is-active {
    border-color: var(--color-sky);
    background: var(--color-sky-soft);
}

.account-security-method input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.account-security-method-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: #fff;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.account-security-method.is-active .account-security-method-radio {
    border-color: var(--color-sky);
}

.account-security-method.is-active .account-security-method-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--color-sky);
}

.account-security-method-body { flex: 1; min-width: 0; }

.account-security-method-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
}

.account-security-method-title i { margin-right: 6px; color: var(--color-sky-vivid); }

.account-security-method-desc {
    font-size: 12px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.account-security-method-target {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--gray-200);
    flex-wrap: wrap;
}

.account-security-method-target-text {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
}

.account-security-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #16a34a;
    font-size: 12px;
    font-weight: 600;
}

.account-acl-block {
    padding: 16px 0;
    border-top: 1px solid var(--gray-100);
}

.account-acl-block:first-of-type {
    border-top: none;
}

.account-acl-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.account-acl-add {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.account-acl-add .account-form-input { flex: 1; }

.account-acl-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.account-acl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gray-50);
    border-radius: 8px;
    font-size: 13px;
    color: var(--gray-800);
}

.account-acl-item i {
    color: var(--gray-500);
}

.account-acl-text { flex: 1; }

.account-acl-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}

.account-acl-remove:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.account-acl-empty {
    margin: 0;
    padding: 12px 14px;
    background: var(--gray-50);
    border-radius: 8px;
    color: var(--gray-500);
    font-size: 12px;
    text-align: center;
}

/* ----- 계약 관리 ----- */
.account-contract-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    padding: 20px;
    margin-top: 16px;
}

.account-contract-card-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.account-contract-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--gray-200);
    color: var(--color-sky-vivid);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.account-contract-card-body { flex: 1; min-width: 200px; }

.account-contract-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 6px;
}

.account-contract-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--gray-500);
    flex-wrap: wrap;
}

.account-contract-card-name {
    color: var(--gray-600);
}

.account-contract-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-contract-card-hint {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--gray-500);
}

.account-contract-card-hint i { color: var(--color-sky-vivid); margin-right: 4px; }

.account-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
}

.account-status-badge.is-success {
    background: #dcfce7;
    color: #166534;
}

.account-status-badge.is-pending {
    background: #fef3c7;
    color: #92400e;
}

.account-upload-area {
    border: 2px dashed var(--gray-300);
    border-radius: 12px;
    padding: 36px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: #fff;
}

.account-upload-area:hover {
    border-color: var(--color-sky);
    background: var(--color-sky-soft);
}

.account-upload-area i {
    font-size: 32px;
    color: var(--gray-400);
    margin-bottom: 8px;
    display: block;
}

.account-upload-text {
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 4px;
}

.account-upload-link {
    color: var(--color-sky-vivid);
    font-weight: 600;
    text-decoration: underline;
}

.account-upload-help {
    font-size: 12px;
    color: var(--gray-500);
}

/* ----- 서브 페이지 (결제 이메일 변경) ----- */
.account-subpage {
    padding: 64px 80px 80px;
    max-width: 800px;
    margin: 0 auto;
}

.account-subpage-head {
    text-align: center;
    margin-bottom: 56px;
}

.account-subpage-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 8px;
}

.account-subpage-desc {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0;
}

.account-subpage-body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.account-subpage-actions {
    margin-top: 56px;
    text-align: center;
}

.account-inline-btn {
    height: 44px;
    padding: 0 18px;
    border-radius: 8px;
    border: none;
    background: #1d4ed8;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.15s;
}

.account-inline-btn:hover { background: #1e40af; }

.account-inline-btn:disabled {
    background: var(--gray-300);
    color: #fff;
    cursor: not-allowed;
}

.account-inline-btn-muted {
    background: var(--gray-300);
    color: #fff;
}

.account-inline-btn-muted:not(:disabled):hover {
    background: var(--gray-400);
}

.account-code-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.account-code-input {
    width: 44px;
    height: 44px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    background: #fff;
}

.account-code-input:focus {
    outline: none;
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

/* ----- 변경 완료 페이지 ----- */
.account-success {
    text-align: center;
    padding: 80px 40px 60px;
}

.account-success-icon {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(156, 163, 175, 0.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin-bottom: 24px;
}

.account-success-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 12px;
}

.account-success-desc {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0 0 36px;
}

.account-success-btn {
    max-width: 360px;
    width: 100%;
}

/* ----- 알림/컨펌 다이얼로그 ----- */
.account-alert {
    border-radius: 16px;
}

.account-alert-body {
    text-align: center;
    padding: 36px 24px 16px;
}

.account-alert-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 18px;
}

.account-alert-icon.is-info {
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
}

.account-alert-icon.is-success {
    background: #dcfce7;
    color: #16a34a;
}

.account-alert-icon.is-danger {
    background: #fee2e2;
    color: #dc2626;
}

.account-alert-text {
    font-size: 15px;
    color: var(--gray-900);
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

.account-alert-desc {
    font-size: 12px;
    color: var(--gray-500);
    line-height: 1.5;
    margin: 8px 0 0;
}

.account-alert-actions {
    padding: 8px 24px 24px;
}

.account-alert-btn {
    width: 100%;
    background: var(--color-sky) !important;
}

.account-alert-actions-pair {
    padding: 8px 24px 24px;
}

.account-alert-btn-cancel {
    background: #fff !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--gray-700) !important;
}

.account-alert-btn-cancel:hover { background: var(--gray-50) !important; }

.account-alert-btn-confirm {
    background: #1f3a8a !important;
}

.account-alert-btn-confirm:hover { background: #1e3878 !important; }

/* ----- 반응형 ----- */
@media (max-width: 1024px) {
    .account-tab-pane { padding: 40px 32px 0; }
    .account-subpage { padding: 40px 24px 60px; }
    .account-btn-primary { min-width: auto; width: 100%; max-width: 480px; }
    .account-btn-primary-md { min-width: auto; width: 100%; max-width: 360px; }
}

@media (max-width: 768px) {
    .account-tabs { overflow-x: auto; }
    .account-tab { min-width: 110px; }
    .account-tab-pane { padding: 32px 16px 0; }
    .account-info-row {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 0;
    }
    .account-info-list-form .account-info-row { padding: 10px 0; }
    .account-card-row { flex-wrap: wrap; gap: 10px; }
    .account-subpage { padding: 32px 16px 48px; }
    .account-form-input-row { flex-wrap: wrap; }
    .account-form-aside { width: 100%; text-align: left; flex-direction: row; gap: 6px; align-items: center; }
    .account-code-input { width: 38px; height: 40px; font-size: 14px; }
    .account-btn-primary,
    .account-btn-primary-md { width: 100%; min-width: 0; }
    .account-section-head { gap: 8px; }
}

/* =========================================
   복합(플로우) 발송 — sms-* / kakao-* 재사용 + flow-* 추가
   ========================================= */

.flow-send-page .sms-card-title {
    font-size: 15px;
}

/* 안내 카드 */
.flow-info-card {
    padding: 18px 28px;
}

.flow-info-list {
    margin: 0;
    padding-left: 20px;
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.7;
}

.flow-info-list li + li {
    margin-top: 2px;
}

.flow-info-list-modal {
    margin: 0 0 18px;
    color: var(--gray-700);
    font-size: 13px;
}

.flow-info-list-sub {
    margin: 0 0 16px;
    color: var(--gray-600);
    font-size: 13px;
    line-height: 1.7;
}

/* 플로우 선택 드롭다운 폭 */
.flow-flow-select {
    max-width: 480px;
    flex: 1;
}

/* 발송 순서 칩 */
.flow-channel-order {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}

.flow-channel-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-800);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--gray-200);
}

.flow-channel-chip i {
    font-size: 12px;
}

.flow-channel-chip.flow-channel-sms i { color: #10b981; }
.flow-channel-chip.flow-channel-kakao i { color: #fbbf24; }
.flow-channel-chip.flow-channel-email i { color: #6366f1; }
.flow-channel-chip.flow-channel-push i { color: #ef4444; }

.flow-channel-sep {
    color: var(--gray-400);
    font-size: 12px;
}

/* 메시지 설정 구분선 */
.flow-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 16px 0 20px;
}

/* ----- 플로우 생성 관리 통합 팝업 (목록/생성 동일 사이즈) ----- */
.flow-mgr-backdrop.modal {
    background: rgba(0, 0, 0, 0.45);
}

.flow-mgr-modal {
    max-width: 1200px;
    width: calc(100% - 32px);
    margin: 32px auto;
}

.flow-mgr-modal-content {
    position: relative;
    background: var(--gray-100);
    border: none;
    border-radius: 20px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    padding: 36px 40px 40px;
    overflow: hidden;
}

.flow-mgr-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--gray-500);
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.flow-mgr-close:hover {
    background: var(--gray-200);
    color: var(--gray-800);
}

.flow-mgr-title {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 28px;
}

.flow-mgr-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 0 4px 4px;
    margin: 0 -4px;
}

.flow-mgr-info-card {
    padding: 18px 28px;
    box-shadow: none;
}

.flow-mgr-list-card {
    padding: 24px 28px;
    box-shadow: none;
}

/* 목록 툴바 (흰 카드 내부, 플랫) */
.flow-manager-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.flow-manager-toolbar-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.flow-manager-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--gray-600);
}

.flow-manager-btn {
    height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: var(--gray-700);
}

.flow-manager-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.flow-manager-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
}

.flow-manager-btn-primary:hover:not(:disabled) {
    background: #0263c8;
}

.flow-manager-btn-soft {
    background: #f1f5f9;
    color: var(--gray-700);
}

.flow-manager-btn-soft:hover:not(:disabled) {
    background: #e2e8f0;
}

.flow-manager-btn-danger {
    background: #fde2e2;
    color: #c62a2a;
}

.flow-manager-btn-danger:hover:not(:disabled) {
    background: #f8c4c4;
}

.flow-manager-search {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
}

.flow-manager-search input {
    height: 32px;
    width: 220px;
    padding: 4px 32px 4px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 12px;
}

.flow-manager-search .sms-modal-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-500);
    padding: 0;
}

.flow-manager-refresh,
.flow-manager-page-nav {
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-700);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.flow-manager-refresh:hover,
.flow-manager-page-nav:hover:not(:disabled) {
    background: var(--gray-50);
}

.flow-manager-page-nav:disabled {
    color: var(--gray-400);
    cursor: not-allowed;
}

.flow-manager-total {
    color: var(--gray-700);
}

.flow-manager-total strong {
    color: var(--gray-900);
    font-weight: 600;
}

.flow-manager-table tbody tr:hover {
    background: var(--color-sky-soft);
}

.flow-manager-name-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
}

.flow-manager-name-link:hover {
    text-decoration: underline;
}

/* ----- 플로우 생성/수정 섹션 (흰 카드) ----- */
.flow-editor-section {
    padding: 22px 28px 26px;
    box-shadow: none;
}

.flow-editor-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--gray-200);
}

/* 하단 액션 (취소 / 저장하기 — 50:50 풀-너비) */
.flow-mgr-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

.flow-mgr-btn-cancel,
.flow-mgr-btn-save {
    height: 56px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.flow-mgr-btn-cancel {
    background: var(--gray-800);
    color: #fff;
}

.flow-mgr-btn-cancel:hover {
    background: var(--gray-900);
}

.flow-mgr-btn-save {
    background: var(--color-sky-vivid);
    color: #fff;
}

.flow-mgr-btn-save:hover {
    background: #0263c8;
}

.flow-input-with-counter {
    position: relative;
    max-width: 280px;
    flex: 0 0 auto;
}

.flow-input-with-counter .sms-input {
    width: 100%;
    padding-right: 50px;
}

.flow-input-counter {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--gray-500);
    pointer-events: none;
}

.flow-inline-error {
    margin-top: 6px;
}

/* 플로우 단계 테이블 */
.flow-editor-step-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.flow-editor-step-table thead th {
    background: var(--gray-100);
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    padding: 10px 8px;
    text-align: center;
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
}

.flow-editor-step-table tbody td {
    padding: 8px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.flow-step-handle-col {
    width: 36px;
    text-align: center;
}

.flow-step-handle {
    color: var(--gray-400);
    cursor: grab;
    font-size: 16px;
}

.flow-editor-step-row:active .flow-step-handle {
    cursor: grabbing;
}

.flow-step-order-col {
    width: 70px;
    text-align: center;
    font-weight: 500;
    color: var(--gray-800);
}

.flow-step-channel-col {
    width: 180px;
}

.flow-step-channel-col .sms-input {
    width: 100%;
    height: 36px;
    padding: 4px 32px 4px 10px;
    font-size: 13px;
}

.flow-step-action-col {
    width: 36px;
    text-align: center;
}

.flow-step-template {
    display: flex;
    align-items: center;
    gap: 6px;
}

.flow-step-template .sms-input {
    flex: 1;
    height: 36px;
    background: #fff;
    font-size: 13px;
}

.flow-step-template-btn {
    height: 36px;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
}

.flow-step-template-btn:hover:not(:disabled) {
    background: #0263c8;
}

.flow-step-template-btn:disabled {
    background: var(--gray-300);
    cursor: not-allowed;
}

.flow-step-remove {
    width: 28px;
    height: 28px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.flow-step-remove:hover:not(:disabled) {
    background: var(--gray-100);
}

.flow-step-remove:disabled {
    color: var(--gray-300);
    cursor: not-allowed;
}

.flow-step-add {
    width: 100%;
    height: 44px;
    margin-top: 8px;
    background: #fff;
    border: 1px dashed var(--gray-300);
    border-radius: 8px;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
}

.flow-step-add:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

@media (max-width: 1024px) {
    .flow-mgr-modal-content { padding: 28px 20px 32px; }
    .flow-mgr-info-card,
    .flow-mgr-list-card,
    .flow-editor-section { padding: 18px 20px; }
    .flow-manager-toolbar-left,
    .flow-manager-toolbar-right { width: 100%; }
    .flow-manager-search input { width: 100%; }
    .flow-channel-order { gap: 6px; }
    .flow-mgr-actions { grid-template-columns: 1fr; }
    .flow-mgr-btn-cancel,
    .flow-mgr-btn-save { height: 48px; }
}

/* =========================================
   PUSH 발송 (Push Send) — sms-* 클래스 재사용
   ========================================= */

.push-send-page .sms-card {
    padding: 20px 24px;
}

.push-send-page .sms-card-header {
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.push-send-page .sms-form-row {
    padding: 4px 0;
    gap: 12px;
}

.push-send-page .sms-form-row + .sms-form-row {
    margin-top: 2px;
}

.push-send-page .sms-form-label {
    flex: 0 0 110px;
    padding-top: 7px;
    font-size: 13px;
}

.push-send-page .sms-radio-group {
    min-height: 32px;
    gap: 24px;
}

.push-send-page .sms-input,
.push-send-page .sms-textarea {
    height: 36px;
    font-size: 13px;
}

.push-send-page .sms-textarea {
    height: auto;
    min-height: 140px;
}

.push-help-ico {
    color: var(--gray-400);
    font-size: 12px;
    margin-left: 4px;
    cursor: help;
}

.push-label-android,
.push-label-json {
    font-weight: 500;
}

.push-label-android { color: var(--gray-700); }
.push-label-json    { color: var(--color-sky-vivid); }

.push-input-sm {
    max-width: 180px;
}

.push-textarea {
    min-height: 140px;
}

.push-json-textarea {
    min-height: 280px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

/* 메시지 설정 내부의 상세 옵션 영역 */
.push-detail-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 12px 18px;
    margin-top: 6px;
}

.push-detail-card .sms-form-row {
    padding: 4px 0;
}

.push-detail-card .sms-form-label {
    flex: 0 0 120px;
    color: var(--gray-700);
}

.push-message-2col {
    grid-template-columns: 1fr 420px;
    gap: 24px;
}

@media (max-width: 1280px) {
    .push-message-2col {
        grid-template-columns: 1fr;
    }
}

/* + 추가 버튼 */
.push-add-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 32px;
}

.push-btn-add {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
    line-height: 1;
    height: 26px;
}

.push-btn-add:hover {
    background: #0263c8;
}

.push-btn-add i {
    font-size: 11px;
}

/* 추가된 항목 태그 */
.push-tag-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.push-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    font-size: 12px;
    color: var(--gray-700);
    padding: 3px 6px 3px 10px;
    height: 26px;
    max-width: 320px;
}

.push-tag-static > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}

.push-tag-edit,
.push-tag-remove {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--gray-500);
    cursor: pointer;
    line-height: 1;
    font-size: 12px;
}

.push-tag-edit:hover { color: var(--color-sky-vivid); }
.push-tag-remove:hover { color: #ef4444; }

/* =========================================
   PUSH 미리보기 (Android / iOS Lock Screen)
   ========================================= */

.push-preview-col {
    position: sticky;
    top: 80px;
    align-self: start;
}

.push-preview-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

.push-phone-wrap {
    width: 200px;
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.push-phone-label {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
}

/* 외곽 화이트 프레임 (단말기 케이스) */
.push-phone {
    position: relative;
    width: 200px;
    height: 400px;
    background: #fff;
    border-radius: 28px;
    padding: 8px;
    box-shadow:
        0 1px 0 rgba(0, 0, 0, 0.04),
        0 8px 24px rgba(15, 23, 42, 0.10),
        inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* 안쪽 다크 스크린 */
.push-phone-screen {
    position: relative;
    background: #0a0d12;
    border-radius: 22px;
    height: 100%;
    color: #fff;
    padding: 14px 10px 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Android 카메라 펀치홀 */
.push-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: #0a0d12;
    border-radius: 50%;
    z-index: 2;
}

/* iOS Dynamic Island */
.push-phone-island {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 18px;
    background: #0a0d12;
    border-radius: 12px;
    z-index: 2;
}

.push-phone-statusbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    color: #fff;
    padding: 0 6px;
    margin-bottom: 6px;
    height: 12px;
}

.push-phone-status-icons {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
}

.push-phone-time-sm {
    font-weight: 600;
}

/* 락스크린 시계 영역 */
.push-phone-clock {
    color: #fff;
    margin-top: 6px;
}

.push-phone-clock-android {
    text-align: left;
    padding: 0 6px;
}

.push-phone-clock-ios {
    text-align: center;
    margin-top: 16px;
}

.push-phone-time {
    font-size: 44px;
    font-weight: 300;
    letter-spacing: -1.5px;
    line-height: 1;
    color: #fff;
}

.push-phone-tagline {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    margin-top: 8px;
    line-height: 1.3;
}

.push-phone-sub {
    font-size: 8.5px;
    color: #aab1ba;
    margin-top: 3px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.push-phone-sub i {
    font-size: 9px;
    color: #c7c9cf;
}

.push-phone-date-ios {
    font-size: 11px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}

.push-phone-time-ios {
    font-size: 56px;
    letter-spacing: -2px;
}

/* 미들 스페이서 (락스크린 빈 공간) */
.push-phone-mid {
    flex: 1;
    min-height: 8px;
}

.push-phone-mid-android {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 4px;
}

.push-phone-faceid {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* 알림 카드 (공용) */
.push-notif-card {
    background: rgba(255, 255, 255, 0.96);
    color: #1a1d22;
    border-radius: 10px;
    padding: 7px 9px;
    margin: 8px 2px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.push-notif-card.is-empty {
    min-height: 38px;
}

.push-notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8.5px;
    color: var(--gray-600);
}

.push-notif-card .push-notif-body {
    margin-top: 3px;
}

.push-notif-app {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--gray-700);
}

.push-notif-app-ico {
    width: 11px;
    height: 11px;
    border-radius: 2px;
    background: var(--gray-300);
    flex: 0 0 11px;
}

.push-notif-app-ico-and { background: var(--gray-300); }
.push-notif-app-ico-ios { background: var(--gray-300); }

.push-notif-chevron { font-size: 10px; color: var(--gray-500); }
.push-notif-close   { font-size: 12px; color: var(--gray-500); cursor: pointer; }

.push-notif-body {
    font-size: 9.5px;
    color: var(--gray-900);
    line-height: 1.45;
    word-break: break-word;
}

.push-notif-title {
    font-weight: 700;
    margin-bottom: 1px;
    font-size: 10px;
    color: var(--gray-900);
}

.push-notif-text {
    font-size: 9.5px;
    color: var(--gray-700);
    white-space: pre-wrap;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* 하단 액션 (Android: 전화 / Swipe / 카메라) */
.push-phone-bottom-android {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 4px 2px;
}

.push-phone-bottom-ios {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 2px;
    margin-top: auto;
}

.push-phone-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: default;
}

.push-phone-unlock {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: #fff;
    font-weight: 500;
}

.push-preview-help {
    margin-top: 14px;
    font-size: 11px;
    color: var(--gray-500);
    line-height: 1.55;
    text-align: left;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.push-preview-help i {
    color: var(--color-sky-vivid);
    font-size: 13px;
    margin-top: 1px;
    flex: 0 0 auto;
}

/* =========================================
   PUSH 템플릿 선택 모달 (좌측 리스트 + 우측 미리보기)
   ========================================= */

.push-template-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.push-template-modal-list .sms-modal-table tbody tr.is-active {
    background: var(--color-sky-soft);
}

.push-template-modal-list .sms-modal-table th {
    text-align: center;
}

.push-template-modal-preview {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    min-height: 320px;
    padding: 16px;
}

.push-modal-preview-info .push-modal-preview-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--gray-900);
    margin-bottom: 6px;
}

.push-modal-preview-info .push-modal-preview-text {
    font-size: 13px;
    color: var(--gray-700);
    white-space: pre-wrap;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .push-preview-row {
        flex-direction: column;
        align-items: center;
    }
    .push-detail-card .sms-form-label {
        flex: 0 0 auto;
    }
    .push-template-modal-grid {
        grid-template-columns: 1fr;
    }
    .push-address-book-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   PUSH 직접입력 모달 — 토큰 추가 인터페이스
   ========================================= */

.push-recipient-input-modal .sms-modal-body {
    padding-bottom: 24px;
}

.push-token-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 8px 0;
}

.push-token-label {
    flex: 0 0 80px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    margin: 0;
}

.push-token-form {
    margin-top: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px;
}

.push-token-form .sms-modal-form-row + .sms-modal-form-row {
    margin-top: 8px;
}

.push-token-form-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-left: 88px;
}

.push-token-form-save,
.push-token-form-cancel {
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
}

.push-token-form-save {
    background: var(--color-sky-vivid, #027CFA);
    color: #fff;
}

.push-token-form-cancel {
    background: var(--gray-500, #6c757d);
    color: #fff;
}

.push-token-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.push-token-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
}

.push-token-item-type {
    flex: 0 0 auto;
    background: var(--color-sky-soft, #e8f4fe);
    color: var(--color-sky-vivid, #027CFA);
    font-weight: 600;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.push-token-item-value {
    flex: 1 1 auto;
    color: var(--gray-700);
    word-break: break-all;
}

/* =========================================
   PUSH 주소록(수신자 선택) 모달 — 좌/우 분할
   ========================================= */

.push-address-book-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.push-address-book-list .sms-modal-table tbody tr {
    cursor: pointer;
}

.push-address-book-list .sms-modal-table tbody tr.is-active {
    background: var(--color-sky-soft);
}

.push-token-cell {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.push-address-book-preview {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    min-height: 320px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.push-address-book-preview-empty {
    color: var(--gray-500);
    font-size: 14px;
}

.push-address-book-preview-info {
    width: 100%;
    align-self: flex-start;
}

.push-address-book-preview-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.push-address-book-preview-row {
    display: flex;
    gap: 12px;
    font-size: 13px;
    line-height: 1.6;
    margin-top: 6px;
}

.push-address-book-preview-key {
    flex: 0 0 70px;
    color: var(--gray-600);
    font-weight: 500;
}

.push-address-book-preview-val {
    flex: 1;
    color: var(--gray-800);
}

.push-address-book-preview-token {
    word-break: break-all;
}

/* =========================================
   발송 조회 (History) — sms-* 패턴 재사용
   ========================================= */

.history-page {
    padding-bottom: 60px;
}

.history-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: 0 0 48px;
}

.history-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.history-card + .history-card {
    margin-top: 20px;
}

/* ----- 검색 카드 ----- */

.history-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 0;
}

@media (max-width: 1024px) {
    .history-grid-2col {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

.history-col {
    min-width: 0;
}

.history-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
    min-height: 48px;
}

.history-form-row-full {
    padding-top: 12px;
}

.history-form-label {
    flex: 0 0 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    margin: 0;
}

.history-form-control {
    flex: 1;
    min-width: 0;
}

.history-input {
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
    padding: 8px 12px;
    height: 40px;
    background: #fff;
}

.history-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
    outline: none;
}

.history-input[disabled],
.history-input:disabled {
    background: var(--gray-50);
    color: var(--gray-400);
    cursor: not-allowed;
}

.history-radio-group {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    min-height: 40px;
}

.history-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    margin: 0;
}

.history-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.history-daterange {
    display: flex;
    align-items: center;
    gap: 8px;
}

.history-daterange .history-input {
    flex: 1;
    min-width: 0;
}

.history-daterange-sep {
    color: var(--gray-500);
    font-size: 14px;
}

.history-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 12px 0;
}

.history-detail-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}

.history-detail-label {
    flex: none;
    text-align: left;
}

.history-detail-value {
    min-width: 0;
}

.history-detail-value > .history-input {
    width: 100%;
}

.history-detail-pick {
    display: flex;
    gap: 8px;
}

.history-detail-pick .history-input {
    flex: 1;
    min-width: 0;
}

.history-btn-pick {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 16px;
    height: 40px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.history-btn-pick:hover {
    background: #0263c8;
}

@media (max-width: 1024px) {
    .history-detail-control {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ----- 검색/초기화 버튼 ----- */

.history-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.history-btn-reset,
.history-btn-search {
    border: none;
    border-radius: 8px;
    padding: 10px 36px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-width: 160px;
    height: 44px;
}

.history-btn-reset {
    background: #2c2c2c;
    color: #fff;
}

.history-btn-reset:hover {
    background: #1a1a1a;
}

.history-btn-search {
    background: #2563eb;
    color: #fff;
}

.history-btn-search:hover {
    background: #1d4ed8;
}

/* ----- 결과 툴바 ----- */

.history-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.history-toolbar-left,
.history-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.history-btn-ghost {
    background: #fff;
    color: var(--gray-500);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.history-btn-ghost:hover:not(:disabled) {
    background: var(--gray-50);
    color: var(--gray-700);
}

.history-btn-ghost:disabled {
    background: var(--gray-50);
    color: var(--gray-400);
    cursor: not-allowed;
}

.history-help-icon {
    font-size: 13px;
    color: var(--gray-400);
    cursor: help;
}

.history-extra-fields {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    flex-wrap: nowrap;
}

.history-extra-label {
    font-size: 13px;
    color: var(--gray-700);
    white-space: nowrap;
    flex-shrink: 0;
}

.history-btn-outline {
    background: #fff;
    color: var(--gray-800);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
}

.history-btn-outline:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.history-total {
    font-size: 13px;
    color: var(--gray-700);
    margin-left: 8px;
    white-space: nowrap;
}

.history-total::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--gray-300);
    margin-right: 12px;
    vertical-align: middle;
}

/* ----- 결과 테이블 ----- */

.history-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--gray-200);
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1100px;
}

.history-table thead {
    background: var(--gray-50);
}

.history-table th {
    padding: 12px 10px;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    text-align: center;
    white-space: nowrap;
}

.history-table td {
    padding: 12px 10px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
    vertical-align: middle;
}

.history-table tbody tr:hover {
    background: var(--gray-50);
}

.history-th-check {
    width: 40px;
}

.history-th-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-sky-vivid);
}

.history-id-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
    font-weight: 500;
}

.history-id-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

.history-truncate {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.history-empty {
    padding: 60px 20px !important;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
}

/* ----- 상태 뱃지 ----- */

.history-status {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
}

.history-status-success {
    background: #ecfdf5;
    color: #059669;
}

.history-status-failed {
    background: #fef2f2;
    color: #dc2626;
}

.history-status-cancelled {
    background: var(--gray-100);
    color: var(--gray-600);
}

.history-status-progress {
    background: #eff6ff;
    color: #2563eb;
}

.history-status-reserved {
    background: #fef3c7;
    color: #b45309;
}

.history-status-default {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* ----- 페이지네이션 ----- */

.history-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
}

.history-page-btn {
    min-width: 32px;
    height: 32px;
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    padding: 0 8px;
}

.history-page-btn:hover:not(:disabled):not(.active) {
    background: var(--gray-50);
    border-color: var(--gray-300);
}

.history-page-btn.active {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
    font-weight: 600;
}

.history-page-btn:disabled {
    background: var(--gray-50);
    color: var(--gray-300);
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .history-card {
        padding: 16px;
    }
    .history-form-row {
        flex-wrap: wrap;
    }
    .history-form-label {
        flex: 0 0 100%;
        margin-bottom: 4px;
    }
    .history-actions {
        flex-direction: column;
    }
    .history-btn-reset,
    .history-btn-search {
        width: 100%;
    }
    .history-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================
   발송 조회 모달 (일괄취소 / 다운로드 요청 / 다운로드 목록)
   sms-modal-* 구조 재사용 + 버튼/테이블 변형
   ========================================= */

.history-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 32px 28px;
}

.history-modal-actions-single {
    display: flex;
    justify-content: center;
    padding: 8px 32px 28px;
}

.history-modal-actions-end {
    display: flex;
    justify-content: flex-end;
    padding: 8px 32px 28px;
}

.history-modal-btn-cancel,
.history-modal-btn-confirm {
    height: 44px;
    min-width: 140px;
    border-radius: 8px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 24px;
}

.history-modal-btn-cancel {
    background: #6b7280;
    color: #fff;
}

.history-modal-btn-cancel:hover {
    background: #4b5563;
}

.history-modal-btn-confirm {
    background: #2563eb;
    color: #fff;
}

.history-modal-btn-confirm:hover {
    background: #1d4ed8;
}

.history-modal-text-sub {
    margin-top: 16px;
    color: var(--gray-600);
    font-size: 13px;
}

.history-modal-info {
    font-size: 13px;
    color: var(--gray-500);
    margin: 0 0 16px;
}

.history-modal-table th,
.history-modal-table td {
    text-align: center;
}

.history-modal-table tbody tr:hover {
    background: var(--gray-50);
    cursor: default;
}

.history-modal-id {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--gray-800);
    word-break: break-all;
    max-width: 220px;
}

.history-modal-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
    font-weight: 500;
}

.history-modal-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

.history-modal-status-text {
    font-size: 13px;
    color: var(--gray-500);
}

.history-modal-status-failed {
    color: #dc2626;
}

@media (max-width: 768px) {
    .history-modal-btn-cancel,
    .history-modal-btn-confirm {
        min-width: 0;
        flex: 1;
    }
    .history-modal-actions {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* =========================================
   Dropdown 공통 스타일 (HistoryDropdown / HistoryMultiDropdown)
   - Type B: In/H40 (폼 입력 영역) — 기본
   - Type A: Out/H36 (테이블·툴바) — .history-dd-h36 .history-dd-out
   - 메뉴 패널: 흰 배경 + 스카이블루 테두리, 항목 hover=회색, selected=옅은 스카이블루 + 스카이블루 글자
   ========================================= */

.history-dd {
    position: relative;
    width: 100%;
}

.history-dd-toggle {
    width: 100%;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    color: var(--gray-800);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 12px;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.history-dd-h40 .history-dd-toggle {
    height: 40px;
}

.history-dd-h36 .history-dd-toggle {
    height: 36px;
}

.history-dd-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-dd.is-empty .history-dd-value {
    color: var(--gray-400);
}

.history-dd-chevron {
    flex-shrink: 0;
    color: var(--gray-500);
    font-size: 12px;
}

/* Type B (In/H40) — Focus 상태: 스카이블루 테두리 */
.history-dd-h40.is-open .history-dd-toggle,
.history-dd-h40 .history-dd-toggle:focus-visible {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
    outline: none;
}

/* Disabled */
.history-dd.is-disabled .history-dd-toggle,
.history-dd-toggle:disabled {
    background: var(--gray-50);
    color: var(--gray-400);
    border-color: var(--gray-200);
    cursor: not-allowed;
}

.history-dd.is-disabled .history-dd-chevron,
.history-dd-toggle:disabled .history-dd-chevron {
    color: var(--gray-300);
}

/* Error */
.history-dd.is-error .history-dd-toggle {
    border-color: #ef4444;
}

.history-dd.is-error.is-open .history-dd-toggle,
.history-dd.is-error .history-dd-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Type A (Out Area / H36) — borderless, has-value/open 시 옅은 스카이블루 fill */
.history-dd-out .history-dd-toggle {
    background: transparent;
    border-color: transparent;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700);
    padding: 0 10px;
    min-width: 120px;
}

.history-dd-out .history-dd-toggle:hover {
    background: var(--gray-50);
}

.history-dd-out.is-active .history-dd-toggle,
.history-dd-out.is-open .history-dd-toggle {
    background: var(--color-sky-soft);
    color: var(--gray-800);
    border-color: transparent;
    box-shadow: none;
}

.history-dd-out.is-open .history-dd-toggle .history-dd-chevron,
.history-dd-out.is-active .history-dd-toggle .history-dd-chevron {
    color: var(--color-sky-vivid);
}

/* ----- 메뉴 패널 (공통) ----- */

.history-dd-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 100%;
    background: #fff;
    border: 1px solid var(--color-sky);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    z-index: 30;
    overflow: hidden;
}

.history-dd-search {
    position: relative;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gray-100);
}

.history-dd-search > .bi {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--gray-500);
}

.history-dd-search input {
    width: 100%;
    height: 32px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 10px 6px 30px;
    background: #fff;
}

.history-dd-search input:focus {
    border-color: var(--color-sky);
    outline: none;
    box-shadow: 0 0 0 2px rgba(79, 192, 252, 0.15);
}

.history-dd-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}

.history-dd-item {
    width: 100%;
    background: #fff;
    border: none;
    color: var(--gray-800);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.history-dd-item:hover {
    background: var(--gray-50);
}

.history-dd-item.is-active {
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
    font-weight: 500;
}

.history-dd-item.is-active:hover {
    background: var(--color-sky-soft);
}

.history-dd-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-dd-item-check {
    color: var(--color-sky-vivid);
    font-size: 14px;
    flex-shrink: 0;
}

/* 다중 선택 항목 (체크박스) */
.history-dd-item-multi {
    cursor: pointer;
    margin: 0;
}

.history-dd-item-multi input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-sky-vivid);
    margin: 0;
    flex-shrink: 0;
}

.history-dd-empty {
    padding: 20px 14px;
    text-align: center;
    color: var(--gray-400);
    font-size: 13px;
}

/* =========================================
   통계 페이지 (#/history/stats)
   - 검색 카드: history-card 재사용 (단일 컬럼 폼)
   - 차트 카드: 흰 배경 + 옅은 스카이블루 테두리
   - 테이블 카드: history-table 재사용 + 합계 행 강조
   ========================================= */

.stats-page {
    padding-bottom: 60px;
}

/* ----- 검색 카드: 채널/조회기간 컨트롤 너비 제한 ----- */
.stats-channel-control {
    max-width: 320px;
}

.stats-message-id-control {
    max-width: 420px;
}

.stats-message-id-control .history-input {
    width: 100%;
}

.stats-period {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.stats-period-preset {
    width: 110px;
    flex-shrink: 0;
}

.stats-period-input {
    flex: 0 1 220px;
    min-width: 180px;
}

.stats-period-input .history-input {
    width: 100%;
}

/* ----- 차트 카드 ----- */
.stats-chart-card {
    margin-top: 20px;
    background: #fff;
    border: 1.5px solid var(--color-sky);
    border-radius: 16px;
    padding: 24px 28px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.stats-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-sky-vivid);
    margin: 0 0 12px;
}

.stats-chart-wrap {
    position: relative;
    width: 100%;
    height: 360px;
}

/* ----- 테이블 카드 ----- */
.stats-table-card {
    margin-top: 20px;
}

.stats-table-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.stats-table {
    min-width: 0;
}

.stats-table th,
.stats-table td {
    text-align: center;
}

.stats-table-total td {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-900);
    border-top: 1px solid var(--gray-200);
}

.stats-table-total:hover td {
    background: var(--gray-50);
}

@media (max-width: 768px) {
    .stats-channel-control,
    .stats-message-id-control {
        max-width: none;
    }
    .stats-period {
        flex-direction: column;
        align-items: stretch;
    }
    .stats-period-preset,
    .stats-period-input {
        width: 100%;
        min-width: 0;
    }
    .stats-period .history-daterange-sep {
        display: none;
    }
    .stats-chart-card {
        padding: 16px;
    }
    .stats-chart-wrap {
        height: 280px;
    }
}

/* =========================================
   주소록 > 그룹 관리 (contacts/groups)
   - 카드 안 탭 + 그룹 목록 테이블 + 상세 패널 + 4개 모달
   - 색상 토큰: --color-sky / --color-sky-vivid / --color-sky-soft (Primary), 빨강은 history 빨강 톤 재사용
   ========================================= */

.groups-page {
    padding-bottom: 60px;
}

.groups-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: 0 0 48px;
}

.groups-card {
    padding: 28px 28px 16px;
}

.groups-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 24px;
}

/* ----- 탭 (언더라인 인디케이터) ----- */

.groups-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 16px;
}

.groups-detail-tabs {
    margin-bottom: 24px;
}

.groups-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    color: var(--gray-500);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}

.groups-tab:hover {
    color: var(--gray-700);
    text-decoration: none;
}

.groups-tab.is-active {
    color: var(--gray-900);
    font-weight: 700;
    background: var(--gray-50);
}

.groups-tab.is-active::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -1px;
    height: 3px;
    background: var(--color-sky);
    border-radius: 2px 2px 0 0;
}

/* ----- 툴바 ----- */

.groups-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.groups-toolbar-left,
.groups-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.groups-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.groups-btn-primary:hover {
    background: #1d4ed8;
}

.groups-btn-primary i {
    font-size: 14px;
}

.groups-btn-danger {
    background: #fca5a5;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    height: 36px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.groups-btn-danger:hover:not(:disabled) {
    background: #ef4444;
}

.groups-btn-danger:disabled {
    background: #fecaca;
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

.groups-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0 12px;
    height: 36px;
    font-size: 13px;
    cursor: pointer;
}

.groups-btn-outline:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.groups-btn-outline:disabled {
    background: var(--gray-50);
    color: var(--gray-400);
    cursor: not-allowed;
}

.groups-btn-outline i {
    font-size: 14px;
}

/* 검색 박스 */
.groups-search {
    position: relative;
    width: 280px;
    max-width: 100%;
}

.groups-search-input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    padding: 0 40px 0 12px;
    font-size: 13px;
    color: var(--gray-800);
    outline: none;
}

.groups-search-input::placeholder {
    color: var(--gray-400);
}

.groups-search-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
}

.groups-search-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 8px;
}

.groups-search-btn:hover {
    color: var(--gray-700);
}

.groups-pager {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.groups-pager-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 36px;
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
    cursor: pointer;
}

.groups-pager-btn:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.groups-pager-btn:disabled {
    background: var(--gray-50);
    color: var(--gray-300);
    cursor: not-allowed;
}

.groups-total {
    font-size: 13px;
    color: var(--gray-700);
    margin-left: 4px;
    white-space: nowrap;
}

.groups-total strong {
    color: var(--gray-900);
    font-weight: 700;
}

/* ----- 테이블 ----- */

.groups-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--gray-200);
    margin-top: 12px;
}

.groups-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.groups-table thead {
    background: var(--gray-50);
}

.groups-table th {
    padding: 12px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-200);
    text-align: center;
    white-space: nowrap;
}

.groups-table td {
    padding: 14px 10px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
    vertical-align: middle;
}

.groups-table tbody tr {
    cursor: pointer;
}

.groups-table tbody tr:hover {
    background: var(--color-sky-soft);
}

.groups-table tbody tr.is-selected {
    background: var(--color-sky-soft);
}

.groups-th-check {
    width: 48px;
}

.groups-th-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.groups-id {
    color: var(--color-sky-vivid);
    font-weight: 500;
}

.groups-empty {
    padding: 60px 20px !important;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
    cursor: default !important;
}

/* ----- 상세 패널 ----- */

.groups-detail {
    margin-top: 20px;
    padding: 24px 28px;
}

.groups-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.groups-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0;
}

.groups-detail-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.groups-detail-icon-btn {
    width: 28px;
    height: 28px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.groups-detail-icon-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.groups-detail-icon-btn.is-active {
    background: var(--gray-700);
    border-color: var(--gray-700);
}

.groups-detail-icon-btn.is-active .groups-detail-size-icon {
    background: #fff;
}

.groups-detail-size-icon {
    display: inline-block;
    background: var(--gray-500);
    border-radius: 1px;
}

.groups-detail-size-sm { width: 14px; height: 4px; }
.groups-detail-size-md { width: 14px; height: 8px; }
.groups-detail-size-lg { width: 14px; height: 12px; }

.groups-detail-close {
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    color: var(--gray-700);
    cursor: pointer;
    margin-left: 4px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.groups-detail-close:hover {
    color: var(--gray-900);
}

/* ----- 기본 정보 그리드 ----- */

.groups-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 48px;
    row-gap: 0;
    padding: 8px 0 12px;
}

@media (max-width: 1024px) {
    .groups-info-grid {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
}

.groups-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--gray-100);
}

.groups-info-label {
    flex: 0 0 100px;
    color: var(--gray-700);
    font-weight: 500;
}

.groups-info-sep {
    color: var(--gray-400);
    flex: 0 0 8px;
}

.groups-info-value {
    flex: 1;
    color: var(--gray-900);
    word-break: break-all;
}

.groups-info-btn {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    height: 28px;
}

.groups-info-btn:hover {
    background: #0263c8;
}

/* ----- 모달 (그룹 추가 / 이름 변경 / 삭제 / 연락처 추가) ----- */

.groups-modal-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0 24px;
}

.groups-modal-form-label {
    flex: 0 0 80px;
    font-size: 14px;
    color: var(--gray-700);
    margin: 0;
}

.groups-modal-form-control {
    flex: 1;
    position: relative;
}

.groups-modal-form-control .sms-modal-input {
    padding-right: 56px;
}

.groups-modal-counter {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--gray-500);
}

/* 모달 액션 — 동일한 회색/파랑 한 쌍 */
.groups-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 8px 32px 28px;
}

.groups-modal-btn-cancel,
.groups-modal-btn-confirm {
    height: 44px;
    min-width: 100px;
    border-radius: 6px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 24px;
}

.groups-modal-btn-cancel {
    background: var(--gray-500);
    color: #fff;
}

.groups-modal-btn-cancel:hover {
    background: var(--gray-600);
}

.groups-modal-btn-confirm {
    background: #2563eb;
    color: #fff;
}

.groups-modal-btn-confirm:hover:not(:disabled) {
    background: #1d4ed8;
}

.groups-modal-btn-confirm:disabled {
    background: #93c5fd;
    cursor: not-allowed;
}

/* 연락처 추가 모달 — 테이블 좌측 정렬 */
.groups-picker-table th,
.groups-picker-table td {
    text-align: center;
}

.groups-picker-table tbody tr:hover {
    background: var(--color-sky-soft);
    cursor: default;
}

@media (max-width: 768px) {
    .groups-card,
    .groups-detail {
        padding: 16px;
    }
    .groups-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .groups-toolbar-left,
    .groups-toolbar-right {
        flex-wrap: wrap;
    }
    .groups-search {
        width: 100%;
    }
    .groups-modal-btn-cancel,
    .groups-modal-btn-confirm {
        flex: 1;
        min-width: 0;
    }
}

/* =========================================
   주소록 > 연락처 관리
   ========================================= */

.contacts-page {
    padding-bottom: 60px;
}

.contacts-page-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--gray-900);
    text-align: center;
    margin: 0 0 48px;
}

.contacts-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 32px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.contacts-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 20px;
}

/* ----- 툴바 ----- */
.contacts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.contacts-toolbar-left,
.contacts-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.contacts-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contacts-btn-primary:hover {
    background: #0263c8;
}

.contacts-btn-soft {
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 36px;
}

.contacts-btn-soft-edit {
    background: #e8eaed;
    color: var(--gray-700);
}

.contacts-btn-soft-edit:hover:not(:disabled) {
    background: #dde0e3;
}

.contacts-btn-soft-delete {
    background: #f6c6c6;
    color: #b91c1c;
}

.contacts-btn-soft-delete:hover:not(:disabled) {
    background: #efb1b1;
}

.contacts-btn-soft:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.contacts-btn-ghost {
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contacts-btn-ghost:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.contacts-btn-ghost:disabled {
    color: var(--gray-400);
    background: var(--gray-50);
    cursor: not-allowed;
}

.contacts-search {
    position: relative;
    margin-left: 4px;
    width: 280px;
    max-width: 100%;
}

.contacts-search-input {
    width: 100%;
    height: 36px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 6px 36px 6px 12px;
    font-size: 13px;
    background: #fff;
}

.contacts-search-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
    outline: none;
}

.contacts-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
}

.contacts-total {
    font-size: 13px;
    color: var(--gray-700);
    margin-left: 4px;
    white-space: nowrap;
}

.contacts-total::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background: var(--gray-300);
    margin-right: 12px;
    vertical-align: middle;
}

.contacts-total strong {
    color: var(--color-sky-vivid);
    font-weight: 700;
}

/* ----- 테이블 ----- */
.contacts-table-wrap {
    overflow-x: auto;
    border-top: 1px solid var(--gray-200);
}

.contacts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 1100px;
}

.contacts-table thead {
    background: var(--gray-50);
}

.contacts-table th {
    padding: 12px 10px;
    font-weight: 600;
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    text-align: center;
    white-space: nowrap;
}

.contacts-table td {
    padding: 14px 10px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
    vertical-align: middle;
}

.contacts-table tbody tr:hover {
    background: var(--gray-50);
}

.contacts-th-check {
    width: 44px;
}

.contacts-th-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-sky-vivid);
}

.contacts-id-cell {
    color: var(--gray-700);
    font-family: monospace, 'Noto Sans KR';
}

.contacts-email-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
}

.contacts-email-link:hover {
    text-decoration: underline;
}

.contacts-token-badge {
    display: inline-block;
    min-width: 22px;
    padding: 2px 8px;
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.contacts-empty {
    padding: 60px 20px !important;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
}

/* ----- 모달 본문 ----- */
.contacts-modal-body {
    padding: 28px 32px 16px;
}

.contacts-modal-desc {
    font-size: 13px;
    color: var(--gray-600);
    margin: -8px 0 16px;
}

.contacts-modal-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 16px 0 20px;
}

.contacts-modal-info {
    font-size: 13px;
    color: var(--gray-600);
    margin: 0 0 12px;
}

.contacts-method-row {
    display: flex;
    align-items: center;
    gap: 24px;
}

.contacts-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    margin: 0;
}

.contacts-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.contacts-required {
    color: #dc2626;
    margin-left: 2px;
}

/* ----- 폼 ----- */
.contacts-form-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    min-height: 56px;
}

.contacts-form-row-token {
    align-items: flex-start;
}

.contacts-form-label {
    flex: 0 0 110px;
    font-size: 14px;
    color: var(--gray-700);
    margin: 0;
    padding-top: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.contacts-form-control {
    flex: 1;
    min-width: 0;
}

.contacts-help-icon {
    font-size: 13px;
    color: var(--gray-400);
    cursor: help;
}

.contacts-input {
    width: 100%;
    height: 40px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
    background: #fff;
}

.contacts-input:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 3px rgba(79, 192, 252, 0.15);
    outline: none;
}

.contacts-input-wrap {
    position: relative;
}

.contacts-input-wrap .contacts-input {
    padding-right: 56px;
}

.contacts-input-counter {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--gray-400);
}

/* ----- 토큰 ----- */
.contacts-btn-token-add {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contacts-btn-token-add:hover:not(:disabled) {
    background: #0263c8;
}

.contacts-btn-token-add:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.contacts-token-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contacts-token-card {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 8px 12px;
}

.contacts-token-summary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contacts-token-pill {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.contacts-token-text {
    flex: 1;
    font-size: 13px;
    color: var(--gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.contacts-token-icon-btn {
    background: none;
    border: none;
    color: var(--gray-500);
    cursor: pointer;
    padding: 4px 6px;
    font-size: 14px;
}

.contacts-token-icon-btn:hover {
    color: var(--gray-800);
}

.contacts-token-form {
    margin-top: 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 16px;
}

.contacts-token-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.contacts-token-label {
    flex: 0 0 110px;
    font-size: 13px;
    color: var(--gray-700);
    margin: 0;
}

.contacts-token-control {
    flex: 1;
    min-width: 0;
}

.contacts-token-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.contacts-btn-save {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 36px;
}

.contacts-btn-save:hover {
    background: #0263c8;
}

.contacts-btn-cancel-sm {
    background: #6b7280;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    height: 36px;
}

.contacts-btn-cancel-sm:hover {
    background: #4b5563;
}

/* ----- 파일 업로드 ----- */
.contacts-file-row {
    margin-bottom: 12px;
}

.contacts-btn-template {
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 36px;
}

.contacts-btn-template:hover {
    background: #0263c8;
}

.contacts-file-pick {
    display: flex;
    gap: 8px;
}

.contacts-file-name {
    flex: 1;
    background: #fff;
}

.contacts-btn-file {
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    height: 40px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.contacts-btn-file:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.contacts-file-hidden {
    display: none;
}

.contacts-file-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin: 8px 0 0;
}

/* ----- 모달 액션 ----- */
.contacts-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px 28px;
}

.contacts-modal-actions-single {
    display: flex;
    justify-content: center;
    padding: 16px 32px 28px;
}

.contacts-btn-modal-cancel,
.contacts-btn-modal-confirm {
    height: 44px;
    min-width: 120px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0 24px;
}

.contacts-btn-modal-cancel {
    background: #6b7280;
    color: #fff;
    border-color: #6b7280;
}

.contacts-btn-modal-cancel:hover {
    background: #4b5563;
    border-color: #4b5563;
}

.contacts-btn-modal-confirm {
    background: var(--color-sky-vivid);
    color: #fff;
    border-color: var(--color-sky-vivid);
}

.contacts-btn-modal-confirm:hover {
    background: #0263c8;
    border-color: #0263c8;
}

.contacts-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
}

.contacts-link:hover {
    text-decoration: underline;
}

.contacts-btn-download {
    height: 30px;
    padding: 0 14px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.contacts-btn-download:hover {
    background: var(--gray-50);
    border-color: var(--gray-300);
    color: var(--gray-900);
}

.contacts-download-status-text {
    color: var(--gray-500);
    font-size: 13px;
}

.contacts-download-id {
    word-break: break-all;
}

.contacts-download-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
}

.contacts-download-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background: #fff;
    color: var(--gray-700);
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.contacts-download-page-btn:hover:not(:disabled):not(.is-active) {
    background: var(--gray-50);
    color: var(--gray-900);
}

.contacts-download-page-btn:disabled {
    color: var(--gray-300);
    cursor: not-allowed;
    background: var(--gray-50);
}

.contacts-download-page-btn.is-active {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
    color: #fff;
    font-weight: 700;
}

@media (max-width: 1024px) {
    .contacts-toolbar {
        align-items: flex-start;
    }
    .contacts-search {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    .contacts-card {
        padding: 20px 16px;
    }
    .contacts-form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        min-height: auto;
    }
    .contacts-form-label {
        flex: none;
        padding-top: 0;
    }
    .contacts-token-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .contacts-token-label {
        flex: none;
    }
}

/* =========================================
   주소록 > 수신 거부 관리 (optout)
   ========================================= */

.optout-card {
    padding: 28px 32px 32px;
}

/* 탭 (계정관리와 동일한 height/font: account-tab 기본값 유지, 카드 너비 맞춤만 적용) */
.optout-tabs {
    margin: 0 -32px;
}

.optout-pane {
    padding-top: 20px;
}

/* 안내 텍스트 (불릿) */
.optout-help {
    list-style: disc;
    padding-left: 16px;
    margin: 0 0 16px;
    color: var(--gray-700);
    font-size: 12px;
    line-height: 1.6;
}

.optout-help ul {
    list-style: none;
    padding-left: 0;
    margin: 2px 0 0;
    color: var(--gray-600);
}

.optout-help ul > li::before {
    content: '- ';
    color: var(--gray-500);
    margin-right: 2px;
}

/* 메인 액션 (추가/해지) 줄: 아래 서브 툴바와 간격 좁게 */
.optout-toolbar-actions {
    margin-bottom: 8px;
}

.optout-subtoolbar {
    margin-bottom: 12px;
}

/* 필터 드롭다운 너비 */
.optout-filter-dd {
    width: 200px;
}

/* 결과 테이블 (optout은 컬럼 적음 → min-width 축소, 정렬) */
.optout-table {
    min-width: 0;
}

.optout-table th,
.optout-table td {
    text-align: center;
}

.optout-token-table th:first-child,
.optout-token-table td:first-child {
    width: 40%;
}

.optout-token-table th:nth-child(2),
.optout-token-table td:nth-child(2) {
    width: 30%;
}

/* 페이지네이션 */
.optout-pagination {
    margin-top: 12px;
}

/* ----- 추가 모달 ----- */
.optout-modal-help {
    margin-bottom: 18px;
}

.optout-modal-help ul {
    padding-left: 14px;
    margin-top: 4px;
}

/* 도메인/번호 선택 행: 라벨 폭 넓히고 세로 중앙 정렬 */
.optout-modal-row {
    padding: 6px 0;
    min-height: 0;
    align-items: center;
}

.optout-modal-row .contacts-form-label {
    flex: 0 0 140px;
    padding-top: 0;
}

/* 라디오 그룹 ↔ 다음 섹션 간격 */
.contacts-method-row + .optout-direct,
.contacts-method-row + .optout-file {
    margin-top: 16px;
}

.optout-add-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.optout-input-grow {
    flex: 1;
    min-width: 0;
}

/* 추가 버튼: 입력 높이(40px)와 정렬 */
.optout-add-row .contacts-btn-token-add {
    height: 40px;
    padding: 0 18px;
    flex-shrink: 0;
}

.optout-add-table {
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
}

.optout-add-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
    padding: 12px 10px;
    text-align: center;
}

.optout-add-table td {
    padding: 12px 10px;
    text-align: center;
}

.optout-add-table tbody tr:hover {
    background: transparent;
}

.optout-add-action-col {
    width: 80px;
    text-align: center;
}

@media (max-width: 768px) {
    .optout-card {
        padding: 20px 16px;
    }
    .optout-tabs {
        margin-left: -16px;
        margin-right: -16px;
    }
    .optout-filter-dd {
        width: 100%;
    }
}

/* =========================================
   발신 번호 관리 (sender/numbers)
   ========================================= */

.sender-info-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 24px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.8;
}

.sender-table {
    min-width: 900px;
}

.sender-status {
    font-weight: 500;
}

.sender-status-approved {
    color: var(--color-sky-vivid);
}

.sender-status-pending {
    color: var(--gray-600);
}

.sender-status-rejected {
    color: #dc2626;
}

.sender-pagination {
    padding-top: 20px;
}

/* ----- 동의 모달 ----- */
.sender-agree-body {
    padding: 28px 32px 16px;
}

.sender-agree-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 20px;
}

.sender-agree-box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 12px;
}

.sender-agree-text {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.7;
    margin: 0 0 12px;
}

.sender-agree-text-foot {
    margin: 12px 0 0;
}

.sender-agree-list {
    list-style: decimal;
    padding-left: 20px;
    margin: 0 0 0;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.7;
}

.sender-agree-list li {
    margin-bottom: 4px;
}

.sender-agree-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0 12px;
}

.sender-agree-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--gray-800);
    cursor: pointer;
    margin: 0;
}

.sender-agree-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-sky-vivid);
    cursor: pointer;
}

.sender-btn-next {
    height: 40px;
    min-width: 96px;
    border-radius: 6px;
    border: 1px solid var(--color-sky-vivid);
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 24px;
}

.sender-btn-next:hover:not(:disabled) {
    background: #0263c8;
    border-color: #0263c8;
}

.sender-btn-next:disabled {
    background: #b8d8ff;
    border-color: #b8d8ff;
    color: #fff;
    cursor: not-allowed;
}

/* ----- 등록 모달 ----- */
.sender-register-body {
    padding: 28px 32px 16px;
}

.sender-register-desc {
    font-size: 13px;
    color: var(--gray-600);
    margin: -8px 0 20px;
    line-height: 1.6;
}

.sender-form-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 12px 0;
}

.sender-form-row-docs {
    align-items: flex-start;
}

.sender-form-label {
    flex: 0 0 96px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin: 0;
    padding-top: 10px;
}

.sender-form-control {
    flex: 1;
    min-width: 0;
}

.sender-form-divider {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

.sender-num-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.sender-num-type {
    flex: 0 0 200px;
}

.sender-num-input {
    flex: 1;
    min-width: 0;
    height: 40px;
}

.sender-hint-list {
    list-style: disc;
    padding-left: 18px;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--gray-600);
    line-height: 1.7;
}

.sender-hint-list .sender-em {
    color: #dc2626;
    font-weight: 500;
}

.sender-doc-block + .sender-doc-block {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--gray-200);
}

.sender-doc-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 8px;
}

.sender-file-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sender-file-name {
    flex: 1;
    background: #fff;
}

.sender-file-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin: 6px 0 0;
}

.sender-guide-table {
    margin-bottom: 0;
}

.sender-guide-docs {
    text-align: left !important;
    color: var(--gray-700);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .sender-num-row {
        flex-direction: column;
        align-items: stretch;
    }
    .sender-num-type {
        flex: 0 0 auto;
    }
    .sender-form-row {
        flex-direction: column;
        gap: 8px;
    }
    .sender-form-label {
        flex: 0 0 auto;
        padding-top: 0;
    }
    .sender-agree-foot {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .sender-btn-next {
        width: 100%;
    }
}

/* =========================================
   PUSH 인증 관리 (sender/push-cert)
   ========================================= */

.push-cert-page .contacts-card {
    padding: 32px 36px 36px;
}

.push-cert-row {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 28px 0;
}

.push-cert-row-divider {
    border-top: 1px solid var(--gray-200);
}

.push-cert-row-label {
    flex: 0 0 140px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800);
    padding-top: 4px;
}

.push-cert-row-body {
    flex: 1;
    min-width: 0;
}

.push-cert-row-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.push-cert-row-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.push-cert-toggle-btn {
    background: none;
    border: none;
    color: var(--color-sky-vivid);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
}

.push-cert-toggle-btn:hover {
    color: #0263c8;
}

.push-cert-row-content {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 20px 24px 24px;
    background: #fff;
}

.push-cert-info-list {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 18px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.8;
}

.push-cert-info-list li {
    margin-bottom: 2px;
}

.push-cert-link {
    color: var(--color-sky-vivid);
    font-weight: 500;
    text-decoration: none;
}

.push-cert-link:hover {
    color: #0263c8;
    text-decoration: underline;
}

.push-cert-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.push-cert-toggle-label {
    font-size: 13px;
    color: var(--gray-700);
}

/* ----- 토글 스위치 (Active=Sky Blue) ----- */
.push-cert-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    margin: 0;
    cursor: pointer;
}

.push-cert-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.push-cert-switch-slider {
    position: absolute;
    inset: 0;
    background: var(--gray-300);
    border-radius: 20px;
    transition: background 0.18s ease;
}

.push-cert-switch-slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 0.18s ease;
}

.push-cert-switch input:checked + .push-cert-switch-slider {
    background: var(--color-sky);
}

.push-cert-switch input:checked + .push-cert-switch-slider::before {
    transform: translateX(16px);
}

.push-cert-switch input:disabled + .push-cert-switch-slider {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ----- 인증 입력 폼 ----- */
.push-cert-form {
    margin-top: 16px;
    padding: 18px 20px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
}

.push-cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 20px;
    margin-bottom: 14px;
}

.push-cert-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.push-cert-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-800);
    margin: 0;
}

.push-cert-field-label-block {
    display: block;
    margin: 8px 0 6px;
}

.push-cert-textarea {
    height: auto;
    min-height: 160px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 12.5px;
    line-height: 1.6;
    resize: vertical;
}

.push-cert-field-hint {
    font-size: 12px;
    color: var(--gray-500);
    margin: 8px 0 0;
}

.push-cert-file-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.push-cert-file-name {
    flex: 1;
    background: #fff;
}

/* ----- 액션 버튼 ----- */
.push-cert-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
}

.push-cert-btn-save {
    height: 36px;
    min-width: 64px;
    border-radius: 6px;
    border: none;
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 18px;
}

.push-cert-btn-save:hover {
    background: #0263c8;
}

.push-cert-btn-cancel {
    height: 36px;
    min-width: 64px;
    border-radius: 6px;
    border: none;
    background: var(--gray-500);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 18px;
}

.push-cert-btn-cancel:hover {
    background: var(--gray-600);
}

@media (max-width: 1024px) {
    .push-cert-row {
        flex-direction: column;
        gap: 12px;
        padding: 24px 0;
    }
    .push-cert-row-label {
        flex: 0 0 auto;
        padding-top: 0;
    }
    .push-cert-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .push-cert-page .contacts-card {
        padding: 24px 18px;
    }
    .push-cert-row-content {
        padding: 16px 14px 18px;
    }
    .push-cert-form {
        padding: 14px 12px;
    }
    .push-cert-file-row {
        flex-wrap: wrap;
    }
    .push-cert-file-name {
        flex-basis: 100%;
    }
}

/* =========================================
   발신 정보 > 브랜드 관리 (sender/brands)
   레이아웃은 contacts-page / contacts-card / sender-info-list 공통 클래스 재사용
   ========================================= */

.brands-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}

.brands-btn-dark {
    background: #404040;
    color: #fff;
    border: none;
    border-radius: 6px;
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brands-btn-dark:hover {
    background: #2d2d2d;
}

.brands-list-section + .brands-detail {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--gray-200);
}

.brands-list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--gray-200);
}

.brands-list-head-inner {
    border-top: none;
    padding-top: 0;
}

.brands-company {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
}

.brands-list-pager {
    display: flex;
    align-items: center;
    gap: 6px;
}

.brands-page-btn {
    background: #fff;
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.brands-page-btn:hover:not(:disabled) {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.brands-page-btn:disabled {
    color: var(--gray-400);
    background: var(--gray-50);
    cursor: not-allowed;
}

.brands-page-info {
    font-size: 12px;
    color: var(--gray-700);
    margin-left: 6px;
    white-space: nowrap;
}

.brands-page-info strong {
    color: var(--gray-900);
    font-weight: 700;
}

.brands-table-wrap {
    overflow-x: auto;
}

.brands-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.brands-table thead tr {
    border-top: 1px solid var(--gray-200);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.brands-table th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600);
    text-align: center;
    white-space: nowrap;
}

.brands-table td {
    padding: 14px 16px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    text-align: center;
    vertical-align: middle;
}

.brands-table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}

.brands-table tbody tr:hover {
    background: #f7f9fc;
}

.brands-table tbody tr.is-selected {
    background: #EFEAFE;
}

.brands-status {
    color: var(--color-sky-vivid);
    font-weight: 500;
}

.brands-empty {
    padding: 60px 20px !important;
    text-align: center;
    color: var(--gray-500);
    font-size: 14px;
    cursor: default !important;
}

/* ----- 선택 브랜드 상세 ----- */
.brands-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.brands-detail-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
}

.brands-detail-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.brands-detail-icon {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    color: var(--gray-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.brands-detail-icon:hover {
    color: var(--gray-900);
    background: var(--gray-100);
}

.brands-detail-icon.is-active {
    color: var(--color-sky-vivid);
    background: var(--color-sky-soft);
}

.brands-detail-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 0;
}

.brands-detail-tab {
    height: 40px;
    border: none;
    background: transparent;
    color: var(--gray-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 16px;
    position: relative;
}

.brands-detail-tab.is-active {
    color: var(--color-sky-vivid);
    font-weight: 700;
}

.brands-detail-tab.is-active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: var(--color-sky-vivid);
    border-radius: 2px;
}

@media (max-width: 768px) {
    .brands-list-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .brands-table {
        min-width: 720px;
    }
}

/* =========================================
   도메인 관리 (sender/domains)
   ========================================= */

.domains-table {
    min-width: 720px;
}

/* ----- 도메인 등록 모달 폼 ----- */
.domains-form-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 8px 0 16px;
}

.domains-form-label {
    flex: 0 0 84px;
    font-size: 13px;
    color: var(--gray-800);
    margin: 0;
    padding-top: 10px;
}

.domains-form-control {
    flex: 1;
    min-width: 0;
}

.domains-verify-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.domains-verify-input {
    flex: 1;
    min-width: 0;
    height: 40px;
}

.domains-verify-btn {
    height: 40px;
    min-width: 64px;
    padding: 0 16px;
    border: 1px solid var(--color-sky-vivid);
    background: var(--color-sky-vivid);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}

.domains-verify-btn:hover:not(:disabled) {
    background: #0263c8;
    border-color: #0263c8;
}

.domains-verify-btn:disabled {
    background: #b8d8ff;
    border-color: #b8d8ff;
    cursor: not-allowed;
}

.domains-form-msg {
    font-size: 12px;
    margin: 8px 0 0;
}

.domains-form-msg-error {
    color: #dc2626;
}

.domains-form-msg-success {
    color: var(--color-sky-vivid);
}

/* ----- DKIM 설정 모달 ----- */
.domains-dkim-body {
    padding: 28px 32px 16px;
}

.domains-dkim-card {
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 22px 24px;
    background: #fff;
}

.domains-dkim-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 10px;
}

.domains-dkim-desc {
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.7;
    margin: 0 0 18px;
}

.domains-dkim-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0 0 8px;
}

.domains-dkim-steps {
    list-style: decimal;
    padding-left: 20px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--gray-700);
    line-height: 1.7;
}

.domains-dkim-steps li {
    margin-bottom: 2px;
}

.domains-dkim-field {
    margin-bottom: 16px;
}

.domains-dkim-field-label {
    font-size: 13px;
    color: var(--gray-800);
    margin-bottom: 6px;
}

.domains-dkim-bullet {
    color: var(--gray-700);
    margin-right: 4px;
}

.domains-dkim-value-box {
    position: relative;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 14px 80px 14px 16px;
    min-height: 48px;
}

.domains-dkim-value {
    font-family: 'Consolas', 'Menlo', 'Courier New', monospace;
    font-size: 13px;
    color: var(--gray-800);
    word-break: break-all;
    line-height: 1.6;
}

.domains-dkim-value-long {
    line-height: 1.7;
}

.domains-dkim-copy-btn {
    position: absolute;
    right: 12px;
    bottom: 10px;
    height: 28px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
}

.domains-dkim-copy-btn:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.domains-dkim-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600);
    margin-top: 8px;
}

.domains-dkim-note i {
    font-size: 14px;
    color: var(--gray-500);
}

.domains-dkim-verify-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 4px 0;
}

.domains-dkim-verify-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    height: 30px;
    padding: 0 14px;
    border-radius: 6px;
    background: var(--color-sky-soft);
    color: var(--color-indigo);
    font-size: 13px;
    font-weight: 600;
}

.domains-dkim-verify-check {
    color: #16a34a;
    font-size: 16px;
    font-weight: 700;
    margin-left: 2px;
}

.domains-dkim-verify-text {
    font-size: 13px;
    color: var(--gray-700);
}

.domains-dkim-verify-text.is-verified {
    color: var(--gray-800);
}

.domains-dkim-enable-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--gray-200);
}

.domains-dkim-enable-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

.domains-dkim-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-500);
    font-size: 12px;
    cursor: help;
    margin-right: 8px;
}

@media (max-width: 768px) {
    .domains-form-row {
        flex-direction: column;
        gap: 8px;
    }
    .domains-form-label {
        flex: 0 0 auto;
        padding-top: 0;
    }
    .domains-verify-row {
        flex-direction: column;
        align-items: stretch;
    }
    .domains-verify-btn {
        width: 100%;
    }
    .domains-dkim-body {
        padding: 24px 20px 12px;
    }
    .domains-dkim-card {
        padding: 18px 16px;
    }
}

/* =========================================
   080 수신 거부 번호 관리 (sender/optout-080)
   ========================================= */

.sender-em-danger {
    color: #dc2626;
    font-weight: 500;
}

.sender-optout080-table {
    min-width: 1000px;
}

.sender-optout080-form-row {
    padding-top: 4px;
}

.sender-optout080-form-row .contacts-form-label {
    flex: 0 0 64px;
}

/* =========================================
   발신 프로필 관리 (sender/profiles)
   ========================================= */

.profiles-page {
    padding-bottom: 60px;
}

/* ----- 안내 리스트 ----- */
.profiles-info-list {
    margin-bottom: 20px;
}

.profiles-info-list > li {
    margin-bottom: 6px;
}

.profiles-info-sublist {
    list-style: none;
    padding-left: 0;
    margin: 4px 0 4px;
    font-size: 13px;
    color: var(--gray-600);
    line-height: 1.7;
}

.profiles-info-sublist li {
    position: relative;
    padding-left: 12px;
}

.profiles-info-sublist li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--gray-500);
}

.profiles-text-em {
    color: #dc2626;
    font-weight: 500;
}

.profiles-link-em {
    color: #dc2626;
    text-decoration: none;
    font-weight: 500;
}

.profiles-link-em:hover {
    text-decoration: underline;
    color: #b91c1c;
}

/* ----- 툴바 ----- */
.profiles-search {
    width: 280px;
    max-width: 100%;
    margin-left: 4px;
}

.profiles-page-btn {
    padding: 6px 10px !important;
    font-size: 12px !important;
    color: var(--gray-600) !important;
}

.profiles-page-btn:disabled {
    color: var(--gray-300) !important;
}

/* ----- 테이블 ----- */
.profiles-table {
    min-width: 1100px;
}

.profiles-key-cell {
    font-family: monospace, 'Noto Sans KR';
    color: var(--gray-700);
    word-break: break-all;
}

/* ----- 등록 모달 ----- */
/* 카테고리 대분류 드롭다운(10항목)이 모달 하단을 넘어 펼쳐지므로 overflow를 풀어줌
   .sms-modal의 둥근 모서리는 자체 배경에 적용되어 자식이 모서리까지 채우지 않아 시각적 영향 없음 */
.profiles-register-modal {
    overflow: visible;
}

.profiles-modal-hint {
    margin: -8px 0 16px;
}

.profiles-category-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.profiles-category-row .history-dd-menu {
    max-height: min(320px, 60vh);
}

/* ----- 토큰 영역 ----- */
.profiles-token-row {
    align-items: center;
}

.profiles-token-request {
    display: flex;
    align-items: center;
}

.profiles-btn-token-request {
    height: 40px;
    min-width: 96px;
    border-radius: 6px;
    border: 1px solid var(--color-sky);
    background: var(--color-sky);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0 24px;
}

.profiles-btn-token-request:hover:not(:disabled) {
    background: var(--color-sky-vivid);
    border-color: var(--color-sky-vivid);
}

.profiles-btn-token-request:disabled {
    background: #b8e2fb;
    border-color: #b8e2fb;
    color: #fff;
    cursor: not-allowed;
}

.profiles-token-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profiles-token-input {
    width: 200px;
    flex: 0 0 200px;
    letter-spacing: 4px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.profiles-token-hint {
    font-size: 12px;
    color: var(--gray-500);
    flex-basis: 100%;
}

/* ----- 그룹 관리 모달 ----- */
.profiles-group-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.profiles-group-input {
    flex: 1;
    min-width: 0;
    height: 36px;
    font-size: 13px;
}

.profiles-group-table-wrap {
    border-top: 1px solid var(--gray-200);
}

.profiles-group-table-wrap .contacts-table {
    min-width: auto;
}

@media (max-width: 1024px) {
    .profiles-search {
        width: 100%;
        margin-left: 0;
    }
    .profiles-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .profiles-category-row {
        grid-template-columns: 1fr;
    }
    .profiles-token-input-row {
        flex-direction: column;
        align-items: stretch;
    }
    .profiles-token-input {
        flex: none;
        width: 100%;
    }
}

/* =========================================
   문자 메시지 템플릿 (Manage SMS Template)
   ========================================= */

.tpl-sms-page {
    background-color: var(--gray-100);
    min-height: calc(100vh - var(--gnb-height));
}

.tpl-sms-page .page-title {
    font-size: 22px;
    color: var(--gray-900);
}

/* 카드 헤더: 좌측 타이틀 + 우측 버튼 */
.tpl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tpl-btn-sample {
    background: #404040;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 14px;
    cursor: pointer;
    transition: background 0.15s;
}

.tpl-btn-sample:hover {
    background: #1f1f1f;
}

/* 툴바 */
.tpl-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.tpl-toolbar-divider {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: var(--gray-200);
    margin: 0 4px;
}

.tpl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    border: none;
    border-radius: 6px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.tpl-btn i.bi {
    font-size: 12px;
}

.tpl-btn-primary {
    background: var(--color-sky-vivid);
    color: #fff;
}

.tpl-btn-primary:hover:not(:disabled) {
    background: #0167d4;
}

.tpl-btn-primary:disabled {
    background: #b6dbff;
    color: #fff;
    cursor: not-allowed;
}

.tpl-btn-light {
    background: var(--gray-200);
    color: var(--gray-600);
}

.tpl-btn-light:hover:not(:disabled) {
    background: var(--gray-300);
}

.tpl-btn-light:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

.tpl-btn-dark {
    background: #4f4f4f;
    color: #fff;
}

.tpl-btn-dark:hover:not(:disabled) {
    background: #2c2c2c;
}

.tpl-btn-dark:disabled {
    background: var(--gray-200);
    color: var(--gray-400);
    cursor: not-allowed;
}

.tpl-btn-danger {
    background: #ef4444;
    color: #fff;
}

.tpl-btn-danger:hover:not(:disabled) {
    background: #dc2626;
}

.tpl-btn-danger:disabled {
    background: #f3b9b9;
    color: #fff;
    cursor: not-allowed;
}

/* 검색 박스 */
.tpl-search {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 240px;
    max-width: 360px;
    margin-left: auto;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.tpl-search input.form-control {
    flex: 1;
    border: none;
    border-radius: 0;
    height: 34px;
    font-size: 13px;
    box-shadow: none;
}

.tpl-search input.form-control:focus {
    box-shadow: none;
}

.tpl-search-btn {
    border: none;
    border-left: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    width: 40px;
    cursor: pointer;
}

.tpl-search-btn:hover {
    background: var(--gray-50);
}

/* 트리 + 상세 영역 */
.tpl-explorer {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 0;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;
    min-height: 420px;
}

.tpl-tree {
    background: #fff;
    border-right: 1px solid var(--gray-200);
    padding: 16px 12px;
    overflow-y: auto;
}

.tpl-tree-root,
.tpl-tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tpl-tree-children {
    padding-left: 18px;
    border-left: 1px dashed var(--gray-300);
    margin-left: 10px;
}

.tpl-tree-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: default;
    user-select: none;
    font-size: 13px;
    color: var(--gray-800);
}

.tpl-tree-node.tpl-tree-leaf {
    cursor: pointer;
}

.tpl-tree-node.tpl-tree-leaf:hover {
    background: var(--gray-50);
}

.tpl-tree-node.active {
    background: var(--color-sky-soft);
}

.tpl-tree-toggle {
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--gray-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.tpl-tree-toggle i {
    font-size: 13px;
}

.tpl-tree-spacer {
    width: 18px;
    flex-shrink: 0;
}

.tpl-tree-icon {
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-700);
}

.tpl-tree-icon .bi-folder-fill {
    color: var(--gray-700);
}

.tpl-tree-icon .text-primary {
    color: var(--color-sky-vivid) !important;
}

.tpl-tree-label {
    flex: 1;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1.4;
}

.tpl-tree-label-root {
    font-weight: 500;
}

.tpl-tree-label-root.active,
.tpl-tree-label-active {
    color: var(--color-sky-vivid);
    font-weight: 500;
}

/* 상세 패널 */
.tpl-detail {
    background: #fff;
    padding: 24px 28px;
    overflow-y: auto;
}

.tpl-detail-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
    color: var(--gray-500);
    font-size: 14px;
}

.tpl-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 16px;
}

.tpl-detail-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 20px;
}

.tpl-detail-tab {
    background: transparent;
    border: 1px solid var(--gray-200);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    margin-bottom: -1px;
}

.tpl-detail-tab.active {
    background: #fff;
    color: var(--color-sky-vivid);
    border-color: var(--gray-200);
    border-bottom: 1px solid #fff;
}

.tpl-detail-info {
    margin: 0;
    padding: 0;
}

.tpl-detail-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    font-size: 13px;
}

.tpl-detail-label {
    flex: 0 0 140px;
    color: var(--gray-600);
    font-weight: 500;
    margin: 0;
}

.tpl-detail-value {
    flex: 1;
    color: var(--gray-800);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpl-btn-detail-confirm {
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    padding: 4px 14px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
}

.tpl-btn-detail-confirm:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}

.tpl-btn-detail-confirm:disabled {
    background: var(--gray-100);
    color: var(--gray-400);
    border-color: var(--gray-200);
    cursor: not-allowed;
}

/* 상세 패널 - 기본 정보 2단 레이아웃 */
.tpl-detail-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
}

.tpl-detail-2col .tpl-detail-info {
    margin: 0;
}

/* 상세 패널 - 생성 이력 탭 */
.tpl-detail-history {
    padding-top: 4px;
}

.tpl-detail-history-notice {
    list-style: disc;
    padding-left: 20px;
    margin: 0 0 20px;
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.7;
}

.tpl-detail-history-notice li + li {
    margin-top: 4px;
}

.tpl-detail-history-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
}

.tpl-detail-history-link:hover {
    text-decoration: underline;
}

.tpl-detail-history-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-200);
    font-size: 13px;
}

.tpl-detail-history-table thead th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    text-align: center;
    padding: 12px 8px;
    border-bottom: 1px solid var(--gray-200);
    white-space: nowrap;
}

.tpl-detail-history-table tbody td {
    padding: 14px 8px;
    text-align: center;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
}

.tpl-detail-history-status {
    font-weight: 500;
}

.tpl-kakao-status-text-request {
    color: #b45309;
}

.tpl-kakao-status-text-review {
    color: var(--color-sky-vivid);
}

.tpl-kakao-status-text-approved {
    color: #047857;
}

.tpl-kakao-status-text-rejected {
    color: #b91c1c;
}

.tpl-detail-history-pagination {
    margin-top: 20px;
}

/* 등록/수정 액션 바 */
.tpl-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

.tpl-btn-cancel,
.tpl-btn-save {
    border: none;
    border-radius: 10px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

.tpl-btn-cancel {
    background: #2c2c2c;
    color: #fff;
}

.tpl-btn-cancel:hover {
    background: #1a1a1a;
}

.tpl-btn-save {
    background: var(--color-sky-vivid);
    color: #fff;
}

.tpl-btn-save:hover {
    background: #0167d4;
}

/* 모달 폼 */
.tpl-modal-form-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.tpl-modal-form-row + .tpl-modal-form-row {
    margin-top: 4px;
}

.tpl-modal-form-label {
    flex: 0 0 100px;
    font-size: 13px;
    color: var(--gray-700);
    margin: 0;
}

.tpl-modal-form-value {
    flex: 1;
    font-size: 13px;
    color: var(--gray-800);
}

.tpl-modal-input-wrap {
    flex: 1;
}

/* 템플릿 상세 보기 모달 */
.tpl-detail-modal-info {
    margin: 0;
    padding: 0;
}

.tpl-detail-modal-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
}

.tpl-detail-modal-row dt {
    flex: 0 0 100px;
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
    margin: 0;
    padding-top: 6px;
}

.tpl-detail-modal-row dd {
    flex: 1;
    margin: 0;
    font-size: 13px;
    color: var(--gray-800);
}

.tpl-detail-modal-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.tpl-detail-modal-box-content {
    min-height: 220px;
}

/* 단일 확인 버튼 모달 */
.tpl-modal-confirm-only {
    grid-column: 1 / -1;
}

.sms-modal-actions:has(.tpl-modal-confirm-only) {
    grid-template-columns: 1fr;
}

/* 알림 모달의 정보 아이콘 (초록 체크) */
.tpl-alert-icon-info {
    border-color: #10b981;
    color: #10b981;
}

/* 삭제 확인 보조 텍스트 */
.tpl-delete-sub {
    color: var(--gray-500);
    font-size: 12px;
}

/* 반응형 */
@media (max-width: 1024px) {
    .tpl-explorer {
        grid-template-columns: 1fr;
    }
    .tpl-tree {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }
    .tpl-search {
        margin-left: 0;
        max-width: none;
    }
}

@media (max-width: 768px) {
    .tpl-toolbar {
        gap: 6px;
    }
    .tpl-btn {
        padding: 0 10px;
        font-size: 12px;
    }
    .tpl-toolbar-divider {
        display: none;
    }
    .tpl-form-actions {
        grid-template-columns: 1fr;
    }
    .tpl-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .tpl-detail-label {
        flex: 0 0 auto;
    }
    .tpl-detail-2col {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .tpl-detail-history-table thead,
    .tpl-detail-history-table tbody td {
        font-size: 12px;
    }
}

/* =====================================================
   카카오톡 템플릿 페이지
   ===================================================== */

/* 필터 줄 (발신 프로필 / 템플릿 상태 / 검색) */
.tpl-kakao-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 0 16px;
    border-top: 1px dashed var(--gray-200);
    margin-top: -8px;
}

.tpl-kakao-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tpl-kakao-filter-label {
    font-size: 13px;
    color: var(--gray-700);
    font-weight: 500;
    white-space: nowrap;
}

.tpl-kakao-filter-select {
    height: 36px;
    min-width: 140px;
    font-size: 13px;
    border-color: var(--gray-300);
}

.tpl-kakao-filter-select:focus {
    box-shadow: none;
    border-color: var(--color-sky-vivid);
}

.tpl-kakao-filter-divider {
    display: inline-block;
    width: 1px;
    height: 18px;
    background: var(--gray-200);
}

.tpl-kakao-search {
    margin-left: auto;
    max-width: 360px;
    flex: 1;
}

/* 템플릿 상태 배지 */
.tpl-kakao-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

.tpl-kakao-status-request {
    background: #fef3c7;
    color: #b45309;
}

.tpl-kakao-status-review {
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
}

.tpl-kakao-status-approved {
    background: #d1fae5;
    color: #047857;
}

.tpl-kakao-status-rejected {
    background: #fee2e2;
    color: #b91c1c;
}

/* 등록 폼: 발신 프로필 라디오 + 셀렉트 한 줄 */
.tpl-kakao-profile-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.tpl-kakao-profile-select {
    min-width: 240px;
    flex: 1;
    max-width: 320px;
}

/* 카테고리 대분류/중분류 */
.tpl-kakao-cat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* 라디오 그룹 wide (4지선다) */
.sms-radio-group.sms-radio-group-wide {
    flex-wrap: wrap;
    gap: 24px;
}

/* 추가 버튼 */
.tpl-kakao-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #404040;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.tpl-kakao-add-btn:hover {
    background: #1f1f1f;
}

.tpl-kakao-add-btn .bi {
    font-size: 11px;
}

/* 미니 테이블 (대표 링크 / 버튼 / 바로 연결) */
.tpl-kakao-mini-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    overflow: hidden;
    font-size: 13px;
    background: #fff;
}

.tpl-kakao-mini-table th,
.tpl-kakao-mini-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-800);
    vertical-align: middle;
}

.tpl-kakao-mini-table tr:last-child th,
.tpl-kakao-mini-table tr:last-child td {
    border-bottom: none;
}

.tpl-kakao-mini-table th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 500;
    width: 110px;
}

.tpl-kakao-list-table thead th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 500;
    width: auto;
    text-align: center;
    border-bottom: 1px solid var(--gray-200);
}

.tpl-kakao-th-narrow {
    width: 32px;
}

.tpl-kakao-th-actions {
    width: 90px;
    text-align: center;
}

.tpl-kakao-td-handle {
    text-align: center;
    color: var(--gray-400);
    cursor: grab;
}

.tpl-kakao-mini-actions {
    text-align: center;
    white-space: nowrap;
    width: 90px;
}

.tpl-kakao-icon-btn {
    background: transparent;
    border: none;
    color: var(--gray-600);
    padding: 2px 6px;
    cursor: pointer;
    transition: color 0.15s;
}

.tpl-kakao-icon-btn:hover {
    color: var(--color-sky-vivid);
}

/* ===== 카카오톡 폰 미리보기 ===== */
.tpl-kakao-preview-col {
    display: flex;
    justify-content: center;
}

.tpl-kakao-phone {
    width: 320px;
    height: 600px;
    background: #fff;
    border-radius: 32px;
    border: 8px solid #1a1a1a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.tpl-kakao-phone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: #b2c7d9;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.tpl-kakao-phone-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
}

.tpl-kakao-phone-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.tpl-kakao-phone-body {
    flex: 1;
    background: #b2c7d9;
    padding: 16px 12px;
    overflow-y: auto;
}

.tpl-kakao-msg-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.tpl-kakao-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #2c5dd2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.tpl-kakao-msg-wrap {
    flex: 1;
    min-width: 0;
}

.tpl-kakao-sender {
    font-size: 11px;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.tpl-kakao-bubble {
    background: #fff;
    border-radius: 4px 16px 16px 16px;
    overflow: hidden;
    font-size: 12px;
    color: #1a1a1a;
    line-height: 1.5;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.tpl-kakao-bubble-header {
    background: #fee500;
    color: #1a1a1a;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 700;
}

.tpl-kakao-bubble-image {
    height: 100px;
    background: var(--gray-100);
    color: var(--gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.tpl-kakao-bubble-highlight {
    padding: 12px 14px 4px;
}

.tpl-kakao-bubble-subtitle {
    font-size: 11px;
    color: var(--gray-500);
    margin-bottom: 2px;
}

.tpl-kakao-bubble-title {
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.tpl-kakao-bubble-content {
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.tpl-kakao-bubble-extra {
    padding: 10px 14px;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    border-top: 1px solid var(--gray-100);
}

.tpl-kakao-bubble-itemlist {
    padding: 8px 14px 12px;
    border-top: 1px solid var(--gray-100);
}

.tpl-kakao-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
}

.tpl-kakao-item-label {
    color: var(--gray-600);
}

.tpl-kakao-item-value {
    color: #1a1a1a;
    font-weight: 500;
}

.tpl-kakao-bubble-channel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fee500;
    color: #1a1a1a;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 600;
    border-top: 1px solid #f5d800;
}

.tpl-kakao-bubble-channel .bi {
    font-size: 14px;
    color: #5a3d1a;
}

.tpl-kakao-bubble-buttons {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--gray-100);
    border-top: 1px solid var(--gray-100);
}

.tpl-kakao-bubble-btn {
    background: #fff;
    border: none;
    padding: 9px 14px;
    font-size: 12px;
    color: #1a1a1a;
    cursor: pointer;
    text-align: center;
}

.tpl-kakao-bubble-btn:hover {
    background: var(--gray-50);
}

.tpl-kakao-bubble-quicks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border-top: 1px solid var(--gray-100);
}

.tpl-kakao-quick-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    color: var(--gray-700);
    background: #fff;
}

.tpl-kakao-phone-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff;
    border-top: 1px solid var(--gray-100);
    color: var(--gray-500);
    font-size: 16px;
    flex-shrink: 0;
}

.tpl-kakao-phone-input {
    flex: 1;
    height: 24px;
    border-radius: 12px;
    background: var(--gray-100);
}

/* =====================================================
   샘플 템플릿 모달 (메시지 유형 탭 + 강조 필터 + 좌 카드/우 미리보기)
   ===================================================== */

/* 강조 유형 필터 (탭 아래) */
.tpl-kakao-sample-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -8px 0 16px;
}

.tpl-kakao-sample-filter-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
    flex-shrink: 0;
}

.tpl-kakao-sample-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tpl-kakao-sample-chip {
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s;
}

.tpl-kakao-sample-chip:hover {
    border-color: var(--color-sky);
    color: var(--gray-900);
}

.tpl-kakao-sample-chip.is-active {
    background: var(--color-sky-vivid);
    color: #fff;
    border-color: var(--color-sky-vivid);
    font-weight: 500;
}

/* 샘플 카드 그리드 (3열, 카카오 전용) */
.tpl-kakao-sample-grid {
    grid-template-columns: repeat(3, 1fr);
}

.tpl-kakao-sample-card {
    min-height: 150px;
}

.tpl-kakao-sample-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: auto;
}

.tpl-kakao-sample-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--gray-100);
    color: var(--gray-700);
    line-height: 1.5;
}

.tpl-kakao-sample-tag-accent {
    background: var(--color-sky-soft);
    color: var(--color-sky-vivid);
}

/* 모달 내 카카오톡 미리보기 (소형 폰) */
.tpl-kakao-phone-modal {
    width: 260px;
    height: 520px;
    border-radius: 28px;
    border-width: 6px;
}

.tpl-kakao-phone-modal .tpl-kakao-phone-header {
    padding: 10px 14px;
    font-size: 13px;
}

.tpl-kakao-phone-modal .tpl-kakao-phone-title {
    font-size: 13px;
}

.tpl-kakao-phone-modal .tpl-kakao-phone-body {
    padding: 12px 10px;
}

.tpl-kakao-phone-modal .tpl-kakao-phone-footer {
    padding: 8px 12px;
}

.tpl-kakao-phone-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-500);
    font-size: 13px;
    text-align: center;
    line-height: 1.6;
}

/* =====================================================
   강조 유형 sub-section (강조표기형/이미지형/아이템 리스트형)
   ===================================================== */

/* sms-form-label(120px) + gap(16px) = 136px → form-control 좌측 라인에 정렬 */
.tpl-kakao-emphasis-block {
    padding-left: 136px;
    padding-bottom: 4px;
}

.tpl-kakao-emphasis-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
}

.tpl-kakao-emphasis-row + .tpl-kakao-emphasis-row {
    margin-top: 4px;
}

.tpl-kakao-emphasis-label {
    flex: 0 0 130px;
    padding-top: 9px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
}

.tpl-kakao-emphasis-control {
    flex: 1;
    min-width: 0;
}

.tpl-kakao-emphasis-notice {
    margin: 0 0 8px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--gray-700);
}

/* 이미지 출처 라디오 (직접 업로드 / 등록된 파일 선택) */
.tpl-kakao-image-source {
    margin-bottom: 8px;
}

/* 파일 선택 버튼 사이즈 통일 */
.tpl-kakao-file-btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* 아이템 하이라이트 - 중첩 폼 블록 */
.tpl-kakao-highlight-block {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 16px 20px;
}

.tpl-kakao-highlight-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
}

.tpl-kakao-highlight-row + .tpl-kakao-highlight-row {
    margin-top: 4px;
}

.tpl-kakao-highlight-label {
    flex: 0 0 70px;
    padding-top: 9px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-700);
}

.tpl-kakao-highlight-control {
    flex: 1;
    min-width: 0;
}

/* 아이템 리스트 모달 테이블 */
.tpl-item-modal-add {
    margin-bottom: 12px;
}

.tpl-item-modal-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--gray-300);
    border-bottom: 1px solid var(--gray-200);
    font-size: 13px;
}

.tpl-item-modal-table thead th {
    background: var(--gray-50);
    color: var(--gray-700);
    font-weight: 600;
    text-align: center;
    padding: 10px 8px;
    border-bottom: 1px solid var(--gray-200);
}

.tpl-item-modal-table tbody td {
    padding: 10px 8px;
    color: var(--gray-800);
    border-bottom: 1px solid var(--gray-100);
    vertical-align: middle;
}

.tpl-item-th-order,
.tpl-item-td-order {
    width: 56px;
    text-align: center;
    color: var(--gray-700);
    font-weight: 500;
}

.tpl-item-th-name {
    width: 220px;
}

.tpl-item-th-action,
.tpl-item-td-action {
    width: 56px;
    text-align: center;
}

.tpl-item-input-wrap {
    width: 100%;
}

.tpl-item-summary-row {
    background: var(--gray-50);
}

.tpl-item-summary-row .tpl-item-td-order {
    background: var(--gray-100);
}

/* 반응형 */
@media (max-width: 1024px) {
    .tpl-kakao-filters {
        flex-direction: column;
        align-items: flex-start;
    }
    .tpl-kakao-filter-divider {
        display: none;
    }
    .tpl-kakao-search {
        margin-left: 0;
        max-width: none;
        width: 100%;
    }
    .tpl-kakao-cat-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .tpl-kakao-phone {
        width: 100%;
        max-width: 320px;
    }
    .tpl-kakao-profile-row {
        flex-direction: column;
        align-items: stretch;
    }
    .tpl-kakao-profile-select {
        max-width: none;
    }
    .tpl-kakao-emphasis-block {
        padding-left: 0;
    }
    .tpl-kakao-emphasis-row {
        flex-direction: column;
        gap: 6px;
    }
    .tpl-kakao-emphasis-label {
        flex: 0 0 auto;
        padding-top: 0;
    }
    .tpl-kakao-sample-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1024px) {
    .tpl-kakao-sample-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =====================================================
   이메일 템플릿 페이지
   ===================================================== */

/* 상세 정보 2열 그리드 (등록/수정 일시, 발송 목적 등) */
.tpl-email-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
}

@media (max-width: 1024px) {
    .tpl-email-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* 등록/수정 폼 2단 (메인 + 미리보기) */
.tpl-email-2col {
    grid-template-columns: 1fr 420px;
}

@media (max-width: 1024px) {
    .tpl-email-2col {
        grid-template-columns: 1fr;
    }
}

.tpl-email-textarea-wrap {
    position: relative;
}

.tpl-email-textarea {
    min-height: 320px;
    resize: vertical;
}

/* 미리보기 컬럼 */
.tpl-email-preview-col {
    align-self: stretch;
}

.tpl-email-preview {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 480px;
    overflow: hidden;
}

.tpl-email-preview-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

.tpl-email-preview-meta {
    display: flex;
    gap: 8px;
    font-size: 12px;
    color: var(--gray-700);
    line-height: 1.6;
}

.tpl-email-preview-meta + .tpl-email-preview-meta {
    margin-top: 4px;
}

.tpl-email-preview-meta-label {
    flex: 0 0 56px;
    font-weight: 500;
    color: var(--gray-600);
}

.tpl-email-preview-meta-value {
    flex: 1;
    color: var(--gray-800);
    word-break: break-all;
    min-height: 18px;
}

.tpl-email-preview-body {
    flex: 1;
    padding: 20px;
    background: #fff;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tpl-email-preview-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    word-break: break-word;
}

.tpl-email-preview-text {
    font-size: 12px;
    color: var(--gray-800);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

.tpl-email-preview-html {
    font-size: 12px;
    color: var(--gray-800);
    line-height: 1.7;
    word-break: break-word;
}

.tpl-email-preview-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--gray-100);
    background: #fff;
    display: flex;
    justify-content: flex-end;
}

.tpl-email-preview-toggle {
    display: inline-flex;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    overflow: hidden;
}

.tpl-email-preview-toggle-btn {
    background: #fff;
    border: none;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    min-width: 48px;
}

.tpl-email-preview-toggle-btn + .tpl-email-preview-toggle-btn {
    border-left: 1px solid var(--gray-300);
}

.tpl-email-preview-toggle-btn.active {
    background: var(--color-sky-vivid);
    color: #fff;
}

/* 샘플 템플릿 모달 - 좌 카드 / 우 이메일 미리보기 */
.tpl-email-sample-grid {
    grid-template-columns: 1fr 320px;
}

.tpl-email-sample-card-grid {
    grid-template-columns: repeat(2, 1fr);
    min-height: 420px;
}

.tpl-email-sample-card {
    min-height: 130px;
}

.tpl-email-sample-card-meta {
    font-size: 12px;
    color: var(--color-sky-vivid);
    text-align: right;
}

.tpl-email-sample-preview {
    align-items: stretch;
    justify-content: stretch;
}

.tpl-email-sample-preview-card {
    width: 100%;
    min-height: 480px;
}

.tpl-email-sample-preview-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-400);
    font-size: 13px;
    text-align: center;
    padding: 40px 16px;
}

@media (max-width: 1024px) {
    .tpl-email-sample-grid {
        grid-template-columns: 1fr;
    }
    .tpl-email-sample-preview-card {
        min-height: 360px;
    }
}

@media (max-width: 768px) {
    .tpl-email-sample-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 광고용 알림 모달 - 수신 거부 옵션 */
.tpl-email-ad-section-title {
    margin: 20px 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.tpl-email-ad-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
}

.tpl-email-ad-option + .tpl-email-ad-option {
    border-top: 1px dashed var(--gray-200);
    margin-top: 4px;
    padding-top: 12px;
}

.tpl-email-ad-option-radio {
    flex: 0 0 140px;
    align-self: flex-start;
    margin-top: 6px;
}

.tpl-email-ad-option-text {
    flex: 1;
    min-height: 56px;
    font-size: 12px;
    background: var(--gray-50);
}

.tpl-email-ad-option-text:disabled {
    background: var(--gray-100);
    color: var(--gray-500);
}

.tpl-email-ad-option-help {
    margin-left: 4px;
    color: var(--gray-400);
    font-size: 13px;
    cursor: help;
}

.tpl-email-ad-option-inline {
    align-items: center;
}

/* 빈 상태 (PUSH 미등록) */
.tpl-detail-empty-multiline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

/* =====================================================
   PUSH 템플릿 페이지
   ===================================================== */

/* PUSH 등록/수정 폼 — 좌(메인) + 우(폰 미리보기) */
.tpl-push-2col {
    grid-template-columns: 1fr 540px;
}

@media (max-width: 1280px) {
    .tpl-push-2col {
        grid-template-columns: 1fr 420px;
    }
}

@media (max-width: 1024px) {
    .tpl-push-2col {
        grid-template-columns: 1fr;
    }
}

/* 입력 유형 sub-row (HTML스타일 등) */
.tpl-push-subrow {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--gray-50);
    border-radius: 8px;
}

.tpl-push-subrow .sms-form-row {
    padding: 6px 0;
}

.tpl-push-subrow .sms-form-label {
    flex: 0 0 110px;
    padding-top: 8px;
    font-size: 13px;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tpl-push-help-icon {
    color: var(--gray-400);
    font-size: 13px;
    cursor: help;
}

/* + 추가 버튼 (PUSH 항목 줄) */
.tpl-push-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-sky-vivid);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    height: 32px;
}

.tpl-push-add-btn:hover {
    background: #0167d4;
}

.tpl-push-add-btn .bi {
    font-size: 11px;
}

/* 추가된 항목 칩 */
.tpl-push-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.tpl-push-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-sky-soft);
    color: var(--gray-800);
    border: 1px solid #b9deff;
    border-radius: 999px;
    padding: 4px 10px 4px 12px;
    font-size: 12px;
}

.tpl-push-item-chip-remove {
    background: transparent;
    border: none;
    color: var(--gray-500);
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.tpl-push-item-chip-remove:hover {
    color: var(--gray-800);
}

/* 라디오 그룹 wide (라디오 + 라디오 + ...) */
.sms-radio-group.tpl-push-radio-fixed > .sms-radio {
    min-width: 80px;
}

/* PUSH 폼 라벨 가벼운 스타일 */
.tpl-push-page .sms-form-label {
    flex: 0 0 110px;
    font-size: 13px;
    color: var(--gray-700);
    padding-top: 9px;
}

/* 폰 미리보기 컨테이너 */
.tpl-push-preview-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.tpl-push-preview-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.tpl-push-phone {
    width: 240px;
    border-radius: 32px;
    overflow: hidden;
    background: #000;
    color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    position: relative;
    aspect-ratio: 9 / 18;
}

.tpl-push-phone-label {
    position: absolute;
    top: -22px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-700);
}

.tpl-push-phone-statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 0;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.tpl-push-phone-time {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.1;
    padding: 6px 14px 4px;
}

.tpl-push-phone-time-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.7);
    padding: 0 14px 8px;
}

.tpl-push-phone-notif {
    margin: 8px 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--gray-900);
    border-radius: 8px;
    font-size: 10px;
    line-height: 1.4;
}

.tpl-push-phone-notif-app {
    font-size: 9px;
    color: var(--gray-500);
    margin-bottom: 2px;
}

.tpl-push-phone-notif-title {
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2px;
    word-break: break-word;
}

.tpl-push-phone-notif-content {
    color: var(--gray-700);
    word-break: break-word;
}

.tpl-push-phone-notif-empty {
    color: var(--gray-400);
    font-style: italic;
}

.tpl-push-phone-bottom {
    margin-top: auto;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.tpl-push-phone-bottom .bi {
    background: rgba(255, 255, 255, 0.08);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tpl-push-preview-help {
    text-align: center;
    color: var(--gray-500);
    font-size: 11px;
    line-height: 1.6;
    padding: 0 8px;
}

/* PUSH 서브 모달 폼 행 */
.tpl-push-modal-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 0;
}

.tpl-push-modal-row + .tpl-push-modal-row {
    margin-top: 4px;
}

.tpl-push-modal-label {
    flex: 0 0 100px;
    font-size: 13px;
    color: var(--gray-700);
}

.tpl-push-modal-value {
    flex: 1;
}

.tpl-push-modal-value .form-control,
.tpl-push-modal-value .form-select {
    height: 40px;
    font-size: 13px;
}

.tpl-push-modal-value .form-control:focus,
.tpl-push-modal-value .form-select:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 0.15rem rgba(79, 192, 252, 0.2);
}

/* PUSH 빈 상태 (템플릿 미등록) */
.tpl-push-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 360px;
    color: var(--gray-500);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

/* =====================================================
   상세 설정 페이지
   ===================================================== */

.tpl-settings-page {
    background-color: var(--gray-100);
    min-height: calc(100vh - var(--gnb-height));
}

.tpl-settings-page .page-title {
    font-size: 22px;
    color: var(--gray-900);
}

/* 탭 바 */
.tpl-settings-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--gray-200);
    margin: -8px -28px 28px;
    padding: 0 28px;
    background: #fff;
}

.tpl-settings-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.tpl-settings-tab:hover {
    color: var(--gray-900);
}

.tpl-settings-tab.active {
    color: var(--gray-900);
    font-weight: 700;
    border-bottom-color: var(--color-sky);
}

/* 설정 섹션 그리드: 좌측 카테고리 라벨 + 우측 콘텐츠 */
.tpl-settings-section {
    display: grid;
    grid-template-columns: 140px 1fr;
    column-gap: 24px;
    padding: 28px 0;
    border-top: 1px solid var(--gray-100);
}

.tpl-settings-section:first-of-type {
    border-top: none;
    padding-top: 8px;
}

.tpl-settings-section-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-900);
    padding-top: 4px;
}

.tpl-settings-section-body {
    min-width: 0;
}

.tpl-settings-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 6px;
}

.tpl-settings-section-desc {
    font-size: 13px;
    color: var(--gray-600);
    margin: 0 0 12px;
}

.tpl-settings-toggle-link {
    background: none;
    border: none;
    color: var(--color-sky-vivid);
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tpl-settings-toggle-link .bi {
    font-size: 11px;
}

/* 설정 박스 (회색 배경 박스에 폼이 들어가는 영역) */
.tpl-settings-box {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: 8px;
    padding: 20px 24px;
    margin-top: 8px;
}

/* 박스 안의 단일 안내 문구 */
.tpl-settings-note {
    margin: 0 0 16px;
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.7;
}

/* 치환자 토큰 (인라인 코드) */
.tpl-settings-token {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
    padding: 1px 6px;
    font-family: 'Menlo', 'Consolas', monospace;
    font-size: 12px;
    color: var(--color-sky-vivid);
}

/* 텍스트영역 (광고성 재동의 내용) */
.tpl-settings-textarea {
    font-size: 13px;
    line-height: 1.6;
    resize: vertical;
}

.tpl-settings-textarea:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 0.15rem rgba(79, 192, 252, 0.2);
}

/* 라벨이 textarea 등 키 큰 입력과 함께일 때 정렬 */
.tpl-settings-row-top {
    align-items: flex-start;
}

.tpl-settings-row-top > .tpl-settings-row-label {
    padding-top: 8px;
}

.tpl-settings-bullet {
    margin: 0 0 16px;
    padding-left: 18px;
    color: var(--gray-700);
    font-size: 13px;
    line-height: 1.7;
}

.tpl-settings-bullet ul {
    margin: 4px 0;
    padding-left: 18px;
    color: var(--gray-600);
}

/* 설정 폼 행 */
.tpl-settings-row {
    display: grid;
    grid-template-columns: 120px 320px;
    align-items: center;
    column-gap: 16px;
    padding: 6px 0;
}

.tpl-settings-row-label {
    font-size: 13px;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tpl-settings-row-help-icon {
    color: var(--gray-400);
    font-size: 13px;
    cursor: help;
}

.tpl-settings-row-control .form-select,
.tpl-settings-row-control .form-control {
    height: 38px;
    font-size: 13px;
}

.tpl-settings-row-control .form-select:focus,
.tpl-settings-row-control .form-control:focus {
    border-color: var(--color-sky);
    box-shadow: 0 0 0 0.15rem rgba(79, 192, 252, 0.2);
}

/* 시간 범위 (시작 ~ 끝) */
.tpl-settings-time-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tpl-settings-time-range-sep {
    color: var(--gray-500);
    font-size: 13px;
}

/* 발송 허용 국가 (multi-tag) */
.tpl-settings-tag-input {
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    min-height: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    width: 100%;
}

.tpl-settings-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gray-100);
    color: var(--gray-800);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 12px;
}

.tpl-settings-tag-remove {
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 11px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
}

.tpl-settings-tag-remove:hover {
    color: var(--gray-800);
}

.tpl-settings-row-control-wide {
    grid-column: 2 / -1;
    grid-template-columns: 1fr;
}

.tpl-settings-row-wide {
    grid-template-columns: 120px 1fr;
}

/* 섹션 내 저장/취소 (작은) */
.tpl-settings-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.tpl-settings-btn-save,
.tpl-settings-btn-cancel {
    height: 32px;
    border: none;
    border-radius: 4px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.tpl-settings-btn-save {
    background: var(--color-sky-vivid);
    color: #fff;
}

.tpl-settings-btn-save:hover {
    background: #0167d4;
}

.tpl-settings-btn-cancel {
    background: var(--gray-300);
    color: var(--gray-700);
}

.tpl-settings-btn-cancel:hover {
    background: var(--gray-400);
    color: #fff;
}

/* 대체 문자 설정 (단일 줄, 우측 링크) */
.tpl-settings-inline-link {
    color: var(--color-sky-vivid);
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* 페이지 하단 액션 (전체 저장/취소) */
.tpl-settings-page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

@media (max-width: 1024px) {
    .tpl-settings-section {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .tpl-settings-row {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
}

@media (max-width: 768px) {
    .tpl-settings-tabs {
        flex-wrap: wrap;
        margin: -8px -16px 20px;
        padding: 0 16px;
    }
    .tpl-settings-tab {
        padding: 12px 16px;
        font-size: 13px;
    }
    .tpl-settings-page-actions {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   이메일 발송 페이지 (예외: 표준 1320px 해제, 가변 너비)
   ========================================= */

.page-content > .container.email-send-container {
    max-width: 100%;
    padding-left: 32px;
    padding-right: 32px;
}

/* 메시지 설정 2단: 좌측 폼 + 우측 미리보기 */
.email-content-grid {
    display: grid;
    grid-template-columns: minmax(560px, 720px) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .email-content-grid {
        grid-template-columns: 1fr;
    }
}

.sms-message-fields {
    min-width: 0;
}

.email-textarea {
    min-height: 320px;
    resize: vertical;
}

.email-static-value {
    font-size: 14px;
    color: var(--gray-800);
    padding: 8px 0;
    line-height: 1.5;
    word-break: break-all;
}

/* 미리보기 컬럼/카드 */
.email-preview-col {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.email-preview-card {
    background: #fff;
    border-radius: 6px;
    border: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 480px;
    overflow: hidden;
    position: relative;
}

.email-preview-subject {
    padding: 20px 24px 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.4;
    word-break: break-word;
}

.email-preview-meta {
    padding: 12px 24px 20px;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
}

.email-preview-meta-row {
    display: flex;
    gap: 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gray-700);
}

.email-preview-meta-row + .email-preview-meta-row {
    margin-top: 4px;
}

.email-preview-meta-label {
    flex: 0 0 80px;
    color: var(--gray-600);
    font-weight: 400;
}

.email-preview-meta-value {
    flex: 1;
    color: var(--gray-800);
    word-break: break-all;
    min-height: 18px;
}

.email-preview-body {
    flex: 1;
    background: #fff;
    overflow: auto;
    min-height: 240px;
    position: relative;
}

.email-preview-iframe {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border: 0;
    display: block;
    background: #fff;
}

.email-preview-text {
    margin: 0;
    padding: 20px 24px;
    font-size: 13px;
    color: var(--gray-800);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    background: #fff;
}

/* 텍스트/HTML 토글 (카드 우측 하단 고정) */
.email-preview-toggle {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: inline-flex;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.email-toggle-btn {
    background: #fff;
    border: none;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    min-width: 52px;
}

.email-toggle-btn + .email-toggle-btn {
    border-left: 1px solid var(--gray-300);
}

.email-toggle-btn.active {
    background: var(--color-sky-vivid);
    color: #fff;
}

/* 템플릿 선택 모달 (W1200, 좌측 리스트 + 우측 미리보기) */
.email-modal-template {
    max-width: 1200px;
}

.email-modal-template .sms-modal-body {
    padding: 28px 32px 8px;
}

.email-template-modal-grid {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .email-template-modal-grid {
        grid-template-columns: 1fr;
    }
}

.email-template-modal-list {
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.email-template-modal-list .sms-modal-search-row {
    margin-bottom: 12px;
}

.email-template-modal-list .sms-modal-search {
    max-width: none;
}

.email-template-modal-list .sms-modal-table {
    margin-bottom: 0;
    flex: 1;
}

.email-template-modal-list .sms-modal-table tbody tr.is-active {
    background: var(--color-sky-soft);
}

.email-template-modal-list .sms-modal-table tbody tr.is-active td {
    color: var(--gray-900);
    font-weight: 500;
}

.email-template-modal-list .sms-modal-pagination {
    margin-top: auto;
    padding-top: 12px;
}

.email-template-modal-preview {
    background: var(--gray-50);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

.email-template-modal-preview .email-preview-card {
    min-height: 0;
}

/* 템플릿 모달 액션: 우측 정렬 */
.email-modal-template .sms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 32px 24px;
}

.email-modal-template .sms-btn-modal-cancel,
.email-modal-template .sms-btn-modal-confirm {
    min-width: 96px;
    flex: 0 0 auto;
}

/* 주소록 모달: 이메일 좌측 정렬 */
.sms-modal-table td.email-address-cell {
    text-align: left;
}

/* 광고용 알림 모달 */
.email-modal-ad .sms-modal-body {
    padding: 28px 32px 16px;
}

.email-ad-bullet {
    list-style: disc;
    padding-left: 22px;
    margin: 4px 0 8px;
    font-size: 13px;
    color: var(--color-sky-vivid);
    line-height: 1.9;
}

.email-ad-divider {
    margin: 16px 0 20px;
    border: 0;
    border-top: 1px solid var(--gray-200);
    opacity: 1;
}

.email-ad-section-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-900);
}

.email-ad-option {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 0;
}

.email-ad-option + .email-ad-option {
    margin-top: 4px;
}

.email-ad-option-radio {
    flex: 0 0 140px;
    align-self: flex-start;
    margin-top: 8px;
    gap: 6px;
}

.email-ad-option-text {
    flex: 1;
    min-height: 64px;
    font-size: 13px;
    color: var(--gray-700);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    padding: 12px;
    line-height: 1.6;
    resize: vertical;
}

.email-ad-option-text[readonly] {
    background: var(--gray-50);
    color: var(--gray-700);
}

.email-ad-option-text:disabled {
    background: var(--gray-100);
    color: var(--gray-500);
}

.email-ad-option-help {
    color: var(--gray-400);
    font-size: 14px;
    cursor: help;
}

.email-ad-option-inline {
    align-items: center;
    padding: 12px 0 4px;
}

/* 광고용 모달 액션: 우측 정렬 */
.email-modal-ad .sms-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 32px 24px;
}

.email-modal-ad .sms-btn-modal-cancel,
.email-modal-ad .sms-btn-modal-confirm {
    min-width: 96px;
    flex: 0 0 auto;
}

/* =========================================
   페이지 목록(pagelists)
   ========================================= */

.pagelists-total-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    padding: 8px 18px;
    min-width: 88px;
}

.pagelists-total-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--gray-900);
    line-height: 1.1;
}

.pagelists-total-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-top: 2px;
}

.pagelists-table {
    font-size: 13px;
}

.pagelists-table thead th {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
}

.pagelists-table .pl-col-cat {
    width: 140px;
}

.pagelists-table .pl-col-title {
    width: 200px;
}

.pagelists-table .pl-col-url {
    width: 320px;
}

.pagelists-table .pl-col-design {
    width: 70px;
    text-align: center;
}

.pagelists-table .pl-col-pub {
    width: 200px;
}

.pagelists-table .pl-col-mgmt {
    width: 90px;
    text-align: center;
}

.pagelists-url-link {
    color: var(--color-sky-vivid);
    text-decoration: none;
    font-size: 12px;
    word-break: break-all;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.pagelists-url-link:hover {
    text-decoration: underline;
}

@media (max-width: 1024px) {
    .pagelists-table {
        min-width: 1100px;
    }
}