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

/*
 * SAESOL CRM visual theme
 * --------------------------------------------------------------------------
 * 이 파일은 색상, 타이포그래피, 표면, 공통 컴포넌트의 최종 시각 기준이다.
 * 페이지별 CSS는 배치와 반응형 구조를 담당하고, 새로운 색상/그림자/폰트 크기는
 * 아래 토큰을 통해서만 추가한다.
 */

:root {
    --cw-font-sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;

    --cw-color-canvas: #f1f4fa;
    --cw-color-surface: #ffffff;
    --cw-color-surface-subtle: #f7f9fc;
    --cw-color-surface-muted: #eef2f8;
    --cw-color-sidebar: #202d66;
    --cw-color-sidebar-hover: #2a3978;
    --cw-color-sidebar-active: #4f68ed;

    --cw-color-text-strong: #13213f;
    --cw-color-text: #30415f;
    --cw-color-text-muted: #71809a;
    --cw-color-text-faint: #98a4b8;
    --cw-color-border: #e0e6f0;
    --cw-color-border-strong: #cfd8e6;

    --cw-color-primary: #4f68ed;
    --cw-color-primary-hover: #4058d8;
    --cw-color-primary-soft: #edf0ff;
    --cw-color-primary-border: #cfd6ff;
    --cw-color-success: #278a63;
    --cw-color-success-soft: #edf8f3;
    --cw-color-warning: #b87822;
    --cw-color-warning-soft: #fff7e9;
    --cw-color-danger: #d24f61;
    --cw-color-danger-soft: #fff1f3;

    --cw-radius-sm: 8px;
    --cw-radius-md: 12px;
    --cw-radius-lg: 16px;
    --cw-radius-xl: 20px;
    --cw-shadow-sm: 0 4px 12px rgba(32, 45, 102, 0.05);
    --cw-shadow-md: 0 10px 30px rgba(32, 45, 102, 0.08);
    --cw-shadow-lg: 0 20px 54px rgba(32, 45, 102, 0.14);
    --cw-focus-ring: 0 0 0 3px rgba(79, 104, 237, 0.15);

    /* 안양지사 고객 원장: 무채색 중심, 청색 액션과 녹색 완료 상태만 사용한다. */
    --cw-pipeline-canvas: #f3f5f7;
    --cw-pipeline-surface: #ffffff;
    --cw-pipeline-surface-subtle: #f8f9fb;
    --cw-pipeline-sidebar: #202a37;
    --cw-pipeline-sidebar-hover: #2a3543;
    --cw-pipeline-sidebar-text: #d8dee7;
    --cw-pipeline-sidebar-muted: #8f9aab;
    --cw-pipeline-accent: #315f9f;
    --cw-pipeline-accent-hover: #284f85;
    --cw-pipeline-accent-soft: #edf3fa;
    --cw-pipeline-text-strong: #1f2937;
    --cw-pipeline-text: #465160;
    --cw-pipeline-text-muted: #778290;
    --cw-pipeline-border: #dfe4ea;
    --cw-pipeline-border-strong: #cbd3dc;
    --cw-pipeline-success: #0a6e4a;
    --cw-pipeline-success-soft: #edf8f3;
    --cw-pipeline-success-border: #9edcc1;
    --cw-pipeline-warning: var(--cw-color-warning);
    --cw-pipeline-warning-soft: var(--cw-color-warning-soft);
    --cw-pipeline-danger: #b54747;
    --cw-pipeline-danger-soft: #fbf0f0;
    --cw-pipeline-overlay: rgba(31, 41, 55, 0.42);
    --cw-pipeline-shadow: 0 10px 28px rgba(31, 41, 55, 0.09);
    --cw-pipeline-focus: 0 0 0 3px rgba(49, 95, 159, 0.14);

    /* 기존 CSS 변수를 새 토큰에 연결한다. */
    --bg-base: var(--cw-color-canvas);
    --bg-panel: var(--cw-color-surface);
    --bg-soft: var(--cw-color-surface-subtle);
    --ink-strong: var(--cw-color-text-strong);
    --ink: var(--cw-color-text);
    --ink-soft: var(--cw-color-text-muted);
    --line: var(--cw-color-border);
    --brand: var(--cw-color-primary);
    --brand-deep: var(--cw-color-primary-hover);
    --shadow-sm: var(--cw-shadow-sm);
    --shadow-md: var(--cw-shadow-md);

    --bg: var(--cw-color-canvas);
    --surface: var(--cw-color-surface);
    --surface2: var(--cw-color-surface-subtle);
    --border: var(--cw-color-border);
    --border2: var(--cw-color-border-strong);
    --accent: var(--cw-color-primary);
    --accent2: var(--cw-color-primary-hover);
    --text: var(--cw-color-text-strong);
    --text2: var(--cw-color-text);
    --text3: var(--cw-color-text-muted);
    --danger: var(--cw-color-danger);
    --warn: var(--cw-color-warning);
    --success: var(--cw-color-success);
    --shadow: var(--cw-shadow-lg);
}

html {
    color-scheme: light;
}

body,
button,
input,
select,
textarea {
    font-family: var(--cw-font-sans);
}

button,
input,
select,
textarea {
    font-size: 14px;
}

::selection {
    background: rgba(79, 104, 237, 0.18);
    color: var(--cw-color-text-strong);
}

/* Login ------------------------------------------------------------------- */

body:has(.login-wrap) {
    overflow: auto;
    background: var(--cw-color-canvas);
    color: var(--cw-color-text-strong);
}

.login-wrap {
    min-height: 100vh;
    padding: 32px;
    background:
            radial-gradient(circle at 14% 16%, rgba(79, 104, 237, 0.09), transparent 28%),
            radial-gradient(circle at 88% 82%, rgba(96, 126, 244, 0.07), transparent 24%),
            var(--cw-color-canvas);
}

.login-panel {
    width: min(440px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: var(--cw-radius-xl);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-lg);
    backdrop-filter: none;
    font-family: var(--cw-font-sans);
}

.login-box {
    padding: 46px 40px 38px;
    background: var(--cw-color-surface);
}

.logo {
    gap: 14px;
    margin-bottom: 30px;
}

.logo-mark img {
    height: 72px;
    filter: none;
}

.login-title {
    color: var(--cw-color-text-strong);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
}

.input-label {
    margin-bottom: 8px;
    color: var(--cw-color-text);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.1px;
}

.input-group {
    margin-bottom: 18px;
}

.input-group input {
    height: 50px;
    padding: 0 15px;
    border: 1px solid var(--cw-color-border-strong);
    border-radius: var(--cw-radius-md);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-strong);
    font-size: 15px;
}

.input-group input::placeholder {
    color: var(--cw-color-text-faint);
}

.input-group input:focus {
    border-color: var(--cw-color-primary);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-focus-ring);
}

.login-btn {
    height: 50px;
    margin-top: 10px;
    border: 1px solid var(--cw-color-primary);
    border-radius: var(--cw-radius-md);
    background: var(--cw-color-primary);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(79, 104, 237, 0.2);
}

.login-btn:hover {
    transform: translateY(-1px);
    background: var(--cw-color-primary-hover);
    box-shadow: 0 12px 24px rgba(79, 104, 237, 0.24);
}

.login-error {
    color: var(--cw-color-danger);
    font-size: 13px;
}

.login-grid,
.login-orb,
.login-noise {
    display: none;
}

.login-footer {
    color: var(--cw-color-text-muted);
    font-family: var(--cw-font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.8px;
}

/* Application shell ------------------------------------------------------- */

body.crm-layout {
    background: var(--cw-color-canvas);
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 14px;
    line-height: 1.55;
}

body.crm-layout .admin-layout {
    grid-template-columns: 228px minmax(0, 1fr);
    background: var(--cw-color-canvas);
}

body.crm-layout .sidebar {
    width: 228px;
    min-width: 228px;
    border: 0;
    background: var(--cw-color-sidebar);
    color: #ffffff;
}

body.crm-layout .sidebar-header {
    padding: 24px 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.crm-layout .sidebar-logo {
    color: #b9c6ff;
    font-family: var(--cw-font-sans);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

body.crm-layout .brand-link {
    color: #ffffff;
    font-size: 16px;
    font-weight: 800;
}

body.crm-layout .sidebar-sub {
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 13px;
}

body.crm-layout .sidebar-nav {
    padding: 12px 10px;
}

body.crm-layout .sidebar-menu-group__toggle {
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

body.crm-layout .sidebar-menu-group__toggle:hover,
body.crm-layout .sidebar-menu-group.is-open .sidebar-menu-group__toggle {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
}

body.crm-layout .sidebar-menu-group__toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.58);
    outline-offset: -2px;
}

body.crm-layout .sidebar-menu-group__chevron {
    color: rgba(255, 255, 255, 0.52);
    font-size: 15px;
}

body.crm-layout .sidebar-menu-group__items {
    padding-top: 2px;
    padding-bottom: 4px;
}

body.crm-layout .menu a.nav-btn {
    min-height: 42px;
    margin-bottom: 3px;
    padding: 10px 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
    font-weight: 600;
}

body.crm-layout .menu a.nav-btn.sidebar-submenu-btn {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
}

body.crm-layout .sidebar-menu-group.is-ungrouped a.nav-btn.sidebar-submenu-btn {
    min-height: 42px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 14px;
}

body.crm-layout .menu a.nav-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.crm-layout .menu a.nav-btn.active {
    border-color: transparent;
    background: var(--cw-color-sidebar-active);
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 8px 16px rgba(12, 20, 66, 0.22);
}

body.crm-layout .nav-dot {
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.38);
}

body.crm-layout .menu a.nav-btn.active .nav-dot {
    background: #ffffff;
}

body.crm-layout .nav-dot.unassigned {
    background: #ffb0ba;
    animation: none;
}

body.crm-layout .nav-count,
body.crm-layout .menu a.nav-btn.active .nav-count {
    min-width: 24px;
    padding: 2px 7px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    font-family: var(--cw-font-sans);
    font-size: 11px;
    text-align: center;
}

body.crm-layout .menu a.nav-btn.active .nav-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

body.crm-layout .sidebar-footer {
    padding: 16px 20px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.crm-layout .section-label {
    color: rgba(255, 255, 255, 0.48);
    font-family: var(--cw-font-sans);
    font-size: 11px;
    letter-spacing: 0.8px;
}

body.crm-layout .stat-label {
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
}

body.crm-layout .stat-label-danger {
    color: #ffc0c8;
}

body.crm-layout .stat-val,
body.crm-layout .stat-val-small {
    color: #ffffff;
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

body.crm-layout .stat-val-danger {
    color: #ffc0c8;
}

body.crm-layout .content {
    background: var(--cw-color-canvas);
}

body.crm-layout .topbar {
    min-height: 72px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--cw-color-border);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 1px 0 rgba(20, 35, 67, 0.02);
}

body.crm-layout .page-title,
body.crm-layout #page-title-text {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

body.crm-layout .topbar-right,
body.crm-layout .topbar-user-actions {
    gap: 8px;
}

body.crm-layout .topbar-label,
body.crm-layout .record-count,
body.crm-layout .crm-manager-topbar-meta {
    color: var(--cw-color-text-muted);
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

body.crm-layout .content-body {
    padding: 24px 28px 32px;
    background: var(--cw-color-canvas);
}

body.crm-layout .content-body::-webkit-scrollbar-thumb {
    background: #c7d0df;
}

.calendar-global-notification {
    border: 1px solid var(--cw-color-primary-border);
    border-radius: var(--cw-radius-md);
    background: var(--cw-color-surface);
    color: var(--cw-color-text-strong);
    box-shadow: var(--cw-shadow-md);
}

.calendar-global-notification:hover {
    border-color: var(--cw-color-primary);
    background: var(--cw-color-primary-soft);
}

.calendar-global-notification__meta,
.calendar-global-notification__action {
    color: var(--cw-color-primary);
}

/* Controls ---------------------------------------------------------------- */

.btn,
body.crm-layout .btn,
.action-btn,
.contract-card__button,
.cal-btn,
.period-btn,
.calendar-editor-toolbar__button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--cw-color-border-strong);
    border-radius: 10px;
    background: var(--cw-color-surface);
    color: var(--cw-color-text);
    font-family: var(--cw-font-sans);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
}

.btn:hover,
body.crm-layout .btn:hover,
.action-btn:hover,
.contract-card__button:hover,
.cal-btn:hover,
.period-btn:hover,
.calendar-editor-toolbar__button:hover {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary-hover);
    transform: none;
}

.btn-primary,
body.crm-layout .btn-primary,
.action-btn.primary,
.contract-card__button--primary,
.period-btn.active {
    border-color: var(--cw-color-primary);
    background: var(--cw-color-primary);
    color: #ffffff;
}

.btn-primary:hover,
body.crm-layout .btn-primary:hover,
.action-btn.primary:hover,
.contract-card__button--primary:hover,
.period-btn.active:hover {
    border-color: var(--cw-color-primary-hover);
    background: var(--cw-color-primary-hover);
    color: #ffffff;
}

.btn-secondary,
.btn-ghost,
body.crm-layout .btn-ghost {
    border-color: var(--cw-color-border-strong);
    background: var(--cw-color-surface);
    color: var(--cw-color-text);
}

.btn-danger,
.action-btn.danger {
    border-color: #f0c8ce;
    background: var(--cw-color-danger-soft);
    color: var(--cw-color-danger);
}

body.crm-layout .topbar-logout-btn,
body.crm-layout .topbar-logout-btn.btn-ghost {
    border-color: var(--cw-color-border-strong);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
    box-shadow: none;
}

body.crm-layout .topbar-logout-btn:hover,
body.crm-layout .topbar-logout-btn.btn-ghost:hover {
    border-color: #f0c8ce;
    background: var(--cw-color-danger-soft);
    color: var(--cw-color-danger);
}

.filter-select,
.search-box,
.assigned-contracts-search,
.guarantee-products-select,
.manager-performance-month,
.form-input,
.form-select,
.form-textarea,
.calendar-form-input,
.calendar-form-textarea,
.calendar-editor {
    min-height: 42px;
    border: 1px solid var(--cw-color-border-strong);
    border-radius: 10px;
    background: var(--cw-color-surface);
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 14px;
    box-shadow: none;
}

.filter-select:focus,
.search-box:focus,
.assigned-contracts-search:focus,
.guarantee-products-select:focus,
.manager-performance-month:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.calendar-form-input:focus,
.calendar-form-textarea:focus,
.calendar-editor:focus {
    outline: none;
    border-color: var(--cw-color-primary);
    box-shadow: var(--cw-focus-ring);
}

input::placeholder,
textarea::placeholder,
.search-box::placeholder,
.assigned-contracts-search::placeholder {
    color: var(--cw-color-text-faint);
}

.form-label,
.calendar-form-label,
.manager-performance-month-field {
    color: var(--cw-color-text);
    font-size: 13px;
    font-weight: 700;
}

.form-label.required::after,
.form-label-required-mark {
    color: var(--cw-color-danger);
}

/* Shared surfaces --------------------------------------------------------- */

.crm-view,
.crm-calendar-view,
.crm-manager-view,
.crm-manager-performance-view {
    color: var(--cw-color-text-strong);
}

.crm-page-toolbar,
.table-wrap,
.dist-panel,
.chart-card,
.calendar-grid,
.calendar-detail-panel,
.crm-manager-table-panel,
.crm-manager-form-card,
.manager-performance-chart-panel,
.manager-performance-table-panel,
.assigned-contracts-toolbar,
.feed-card,
.overview-bulk-table-panel,
.overview-bulk-side__panel {
    border: 1px solid var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-sm);
}

.crm-page-toolbar,
.table-toolbar,
.assigned-contracts-toolbar {
    padding: 14px 16px;
    background: var(--cw-color-surface);
}

.alert-banner,
.overview-alert-banner {
    padding: 13px 16px;
    border: 1px solid var(--cw-color-primary-border);
    border-radius: var(--cw-radius-md);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-text);
    box-shadow: none;
    font-size: 13px;
}

.overview-alert-banner__text strong,
.overview-alert-banner__text span,
.alert-banner strong {
    color: var(--cw-color-text);
}

.alert-dot {
    background: var(--cw-color-primary);
    animation: none;
}

.empty-state,
.calendar-empty-state,
.manager-performance-empty,
.crm-manager-empty,
.guarantee-products-empty {
    border-color: var(--cw-color-border-strong);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
    font-size: 14px;
}

/* Metrics and tables ------------------------------------------------------ */

.stats-strip,
#overview-page-root .stats-strip {
    gap: 14px;
}

.stat-card,
#overview-page-root .stat-card,
.manager-performance-card {
    padding: 18px 20px;
    border: 1px solid var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-sm);
}

.stat-card::before,
#overview-page-root .stat-card::before,
#overview-page-root .stat-card.danger::before,
#overview-page-root .stat-card.warn::before,
#overview-page-root .stat-card.success::before,
#overview-page-root .stat-card.purple::before {
    height: 3px;
    background: var(--cw-color-primary);
}

.stat-card-label,
#overview-page-root .stat-card-label,
.manager-performance-card__label {
    color: var(--cw-color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.stat-card-val,
#overview-page-root .stat-card-val,
#overview-page-root .stat-card.danger .stat-card-val,
#overview-page-root .stat-card.warn .stat-card-val,
#overview-page-root .stat-card.success .stat-card-val,
#overview-page-root .stat-card.purple .stat-card-val,
.manager-performance-card__value {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 26px;
    font-weight: 800;
}

.stat-card-sub,
#overview-page-root .stat-card-sub {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.dist-panel,
#overview-page-root .dist-panel {
    padding: 18px 20px;
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-sm);
}

.dist-panel-title,
#overview-page-root .dist-panel-title,
.chart-card-title,
.manager-performance-section-title,
.crm-manager-panel-title {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
    text-transform: none;
}

.dist-panel-title::before,
#overview-page-root .dist-panel-title::before,
.chart-card-title::before {
    background: var(--cw-color-primary);
}

.dist-card,
#overview-page-root .dist-card,
.dist-status-item,
#overview-page-root .dist-status-item,
.crm-manager-db-pill,
.guarantee-products-summary__item {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
    box-shadow: none;
}

.dist-card-name,
.dist-status-value,
.crm-manager-db-pill strong,
.guarantee-products-summary__item strong {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

.dist-nums,
.dist-status-label,
.crm-manager-db-pill,
.guarantee-products-summary__item span {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.dist-bar-wrap {
    background: var(--cw-color-surface-muted);
}

.dist-bar.c0,
.dist-bar.c1,
.dist-bar.c2,
.dist-bar.c3 {
    background: var(--cw-color-primary);
}

.table-wrap {
    overflow: visible;
}

.table-toolbar {
    min-height: 64px;
    border-bottom: 1px solid var(--cw-color-border);
}

body.crm-layout table {
    color: var(--cw-color-text);
    background: var(--cw-color-surface);
}

body.crm-layout thead th,
.overview-bulk-table thead th {
    padding: 12px 14px;
    border-bottom: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
    font-family: var(--cw-font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body.crm-layout tbody tr {
    border-bottom: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface);
}

body.crm-layout tbody tr:hover {
    background: #f9faff;
}

body.crm-layout tbody tr.selected-row,
.crm-manager-row-active,
.overview-bulk-row.is-selected {
    background: var(--cw-color-primary-soft);
}

body.crm-layout tbody td,
.overview-bulk-table th,
.overview-bulk-table td {
    padding: 13px 14px;
    border-color: var(--cw-color-border);
    color: var(--cw-color-text);
    font-size: 14px;
}

.cell-name {
    color: var(--cw-color-text-strong);
    font-size: 14px;
}

.cell-company,
.cell-phone {
    color: var(--cw-color-text-muted);
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

.record-count,
.bulk-assign-wrap,
.overview-pagination-summary,
.crm-pagination-summary {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.overview-revenue-card,
.overview-revenue-card.has-value {
    border-color: var(--cw-color-border-strong);
    background: var(--cw-color-surface-subtle);
}

.overview-revenue-line {
    color: var(--cw-color-text);
    font-size: 13px;
}

.overview-revenue-order,
.overview-revenue-empty {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

/* Status, badges, inline actions ----------------------------------------- */

.badge,
.badge-route,
.badge-status-default,
.badge-status-계약자,
.badge-status-가망,
.badge-status-부재,
.badge-status-콜,
.calendar-badge {
    border: 1px solid var(--cw-color-border);
    border-radius: 999px;
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.manager-inline-select,
.manager-inline-select.unassigned,
.manager-inline-select.assigned,
.status-inline-select,
.status-inline-select.status-default,
.status-inline-select.status-closed,
.status-inline-select.status-call,
.status-inline-select.status-prospect,
.status-inline-select.status-absent,
.status-inline-select.status-meeting,
.status-inline-select.status-contracted {
    min-height: 36px;
    border: 1px solid var(--cw-color-border-strong);
    border-radius: 9px;
    background-color: var(--cw-color-surface-subtle);
    color: var(--cw-color-text);
    font-family: var(--cw-font-sans);
    font-size: 13px;
    font-weight: 700;
}

.manager-inline-select:focus,
.status-inline-select:focus {
    border-color: var(--cw-color-primary);
    box-shadow: var(--cw-focus-ring);
}

.action-btn {
    min-height: 34px;
    padding: 0 11px;
}

.row-check {
    accent-color: var(--cw-color-primary);
}

/* Modal and form surfaces ------------------------------------------------- */

.app-modal__backdrop,
.calendar-memo-modal__backdrop,
.overview-bulk-modal {
    background: rgba(19, 33, 63, 0.38);
    backdrop-filter: blur(3px);
}

.crm-custom-popup,
.calendar-memo-modal__panel,
.overview-bulk-modal__panel {
    border: 1px solid var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    color: var(--cw-color-text-strong);
    box-shadow: var(--cw-shadow-lg);
}

.crm-custom-popup__header,
.calendar-memo-modal__header,
.overview-bulk-modal__header {
    min-height: 64px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface);
}

.crm-custom-popup__title,
.calendar-memo-modal__title,
.overview-bulk-modal__title {
    color: var(--cw-color-text-strong);
    font-size: 18px;
    font-weight: 800;
}

.crm-custom-popup__close,
.overview-bulk-modal__close {
    border: 1px solid var(--cw-color-border);
    border-radius: 10px;
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
}

.crm-custom-popup__close:hover,
.overview-bulk-modal__close:hover {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary);
}

.crm-custom-popup__body,
.calendar-memo-modal__body,
.overview-bulk-modal__body {
    background: var(--cw-color-surface);
}

.crm-revenue-item,
.crm-file-upload-box,
.crm-file-upload-empty,
.crm-file-upload-item,
.customer-name-box,
.detail-item,
.bulk-item,
.calendar-editor-toolbar {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text);
}

.crm-file-upload-item {
    transition: border-color 0.16s ease, background-color 0.16s ease;
}

.crm-file-upload-item:hover {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
}

.crm-file-upload-item:hover .crm-file-upload-item__link,
.crm-file-upload-item:hover .crm-file-upload-item__name {
    color: var(--cw-color-text-strong);
}

.crm-revenue-item__badge,
.crm-revenue-item__badge--soft,
.crm-revenue-item__badge--faint,
.crm-revenue-item__badge--ghost {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary);
}

.crm-revenue-item__label,
.crm-file-upload-guide,
.crm-file-upload-selected__size,
.crm-file-upload-item__meta,
.detail-label,
.cn-sub,
.crm-helper-text {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.crm-file-upload-selected__item,
.upload-drop-zone {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
}

.crm-file-upload-selected__name,
.crm-file-upload-item__link,
.crm-file-upload-item__name,
.detail-val,
.cn-name {
    color: var(--cw-color-text-strong);
}

.crm-popup-error,
.error-message .error,
.crm-manager-error {
    color: var(--cw-color-danger);
    font-size: 13px;
}

.crm-popup-message {
    border-color: #f0c8ce;
    background: var(--cw-color-danger-soft);
    color: var(--cw-color-danger);
}

/* Contract cards ---------------------------------------------------------- */

.assigned-contracts-toolbar {
    margin-bottom: 18px;
}

.assigned-contracts-search {
    width: min(420px, 100%);
}

.assigned-contracts-feed {
    column-gap: 20px;
    row-gap: 24px;
}

.contract-card {
    border: 1px solid var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    color: var(--cw-color-text-strong);
    box-shadow: var(--cw-shadow-sm);
}

.contract-card--funding-active {
    border-color: var(--cw-color-primary-border);
    box-shadow: 0 0 0 2px rgba(79, 104, 237, 0.08), var(--cw-shadow-md);
    animation: none;
}

.contract-card__header,
.contract-card--funding-active .contract-card__header {
    min-height: 98px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface);
}

.contract-card__company {
    color: var(--cw-color-text-strong);
    font-size: 18px;
    font-weight: 800;
}

.contract-card__owner {
    color: var(--cw-color-text);
    font-size: 14px;
    font-weight: 700;
}

.contract-card__meta {
    gap: 2px;
    color: var(--cw-color-text-muted);
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

.contract-card__badge {
    height: 28px;
    border: 1px solid var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary-hover);
    font-size: 13px;
}

.contract-card__body {
    gap: 14px;
    padding: 16px 18px 18px;
}

.contract-card__section {
    gap: 7px;
}

.contract-card__section-title {
    gap: 6px;
    color: var(--cw-color-text-muted);
    font-size: 13px;
    font-weight: 700;
}

.contract-card__section-title::before {
    width: 4px;
    height: 12px;
    border-radius: 3px;
    background: #c8d1e0;
}

.contract-card__section-title::after {
    display: none;
}

.contract-card__grid {
    gap: 7px;
}

.contract-card__tile,
.contract-card__tile--revenue,
.contract-card__tile--deal,
.contract-card__asset,
.contract-card__fund,
.contract-card__memo,
.contract-card__funding-toggle {
    border: 1px solid var(--cw-color-border);
    border-radius: 9px;
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text);
}

.contract-card__tile,
.contract-card__asset {
    min-height: 54px;
    padding: 9px 10px;
}

.contract-card__tile span,
.contract-card__asset span {
    color: var(--cw-color-text-muted);
    font-size: 13px;
    font-weight: 600;
}

.contract-card__tile strong,
.contract-card__asset strong,
.contract-card__grid--two .contract-card__tile:nth-child(2) strong,
.contract-card__grid--startup .contract-card__tile:nth-child(2) strong,
.contract-card__grid--three .contract-card__tile strong,
.contract-card__tile--revenue strong,
.contract-card__tile--deal strong {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 14px;
    font-weight: 800;
}

.contract-card__asset strong {
    text-align: left;
}

.contract-card__fund,
.contract-card__funding-toggle,
.contract-card__memo {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
}

.contract-card__funding-toggle {
    color: var(--cw-color-text);
    animation: none;
}

.contract-card__funding-toggle-ui {
    border-color: var(--cw-color-border-strong);
    background: #dce3ee;
}

.contract-card__funding-toggle-ui::after {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(19, 33, 63, 0.22);
}

.contract-card__funding-toggle input:checked + .contract-card__funding-toggle-ui {
    border-color: var(--cw-color-primary);
    background: var(--cw-color-primary);
}

.contract-card__funding-toggle input:checked + .contract-card__funding-toggle-ui::after {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(19, 33, 63, 0.22);
}

.contract-card__memo {
    color: var(--cw-color-text);
    font-weight: 500;
}

.contract-card__memo::-webkit-scrollbar-thumb {
    background: #c8d1e0;
}

.contract-card__actions {
    gap: 8px;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface);
}

.contract-card__button {
    height: 38px;
}

/* Overview and bulk panels ------------------------------------------------ */

#overview-page-root .dist-panel,
#overview-page-root .dist-card,
#overview-page-root .dist-status-item {
    background-image: none;
}

.overview-bulk-modal__panel,
.overview-bulk-table-panel {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-lg);
}

.overview-bulk-table-summary {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.overview-bulk-side__panel,
.overview-bulk-manager-card {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
}

.overview-bulk-manager-card:hover,
.overview-bulk-manager-card.is-selected {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
}

/* Dashboard, analysis, manager pages ------------------------------------- */

.manager-dashboard-hero {
    border: 1px solid var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-sm);
}

.manager-dashboard-hero__title {
    color: var(--cw-color-text-strong);
    font-size: 22px;
}

.manager-dashboard-hero__count {
    border: 1px solid var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-text);
    font-size: 13px;
}

.manager-dashboard-hero__count strong {
    color: var(--cw-color-primary);
    font-family: var(--cw-font-sans);
}

.manager-dashboard-card,
.manager-dashboard-card--unprocessed,
.manager-dashboard-card--first-call,
.manager-dashboard-card--prospect,
.manager-dashboard-card--non-prospect,
.manager-dashboard-card--absent,
.manager-dashboard-card--meeting,
.manager-dashboard-card--contracted,
.manager-dashboard-card--closed {
    border: 1px solid var(--cw-color-border);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-sm);
}

.manager-dashboard-card:hover {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    box-shadow: var(--cw-shadow-md);
    filter: none;
}

.manager-dashboard-card::before {
    display: none;
}

.manager-dashboard-card__label,
.manager-dashboard-card__meta {
    color: var(--cw-color-text-muted);
}

.manager-dashboard-card__value {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
}

.manager-performance-card,
.manager-performance-card.success,
.manager-performance-card.purple,
.manager-performance-card.warn {
    background: var(--cw-color-surface);
}

.route-analysis-shell,
.route-analysis-summary,
.route-analysis-toolbar {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface);
    color: var(--cw-color-text);
    box-shadow: var(--cw-shadow-sm);
}

.route-analysis-empty {
    background: var(--cw-color-surface-subtle);
    color: var(--cw-color-text-muted);
}

.crm-manager-message {
    border-color: #cfe7dc;
    background: var(--cw-color-success-soft);
    color: var(--cw-color-success);
    font-size: 13px;
}

.crm-manager-db-total,
.crm-manager-panel-subtitle {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.crm-manager-db-total strong,
.crm-manager-db-pill strong,
.manager-performance-number,
.manager-performance-rate,
.guarantee-products-code,
.guarantee-products-date {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
}

.guarantee-products-code,
.guarantee-products-date,
.guarantee-products-text,
.guarantee-products-subtext {
    font-size: 13px;
}

/* Calendar and feed ------------------------------------------------------- */

.cal-days {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
}

.cal-day-header {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.cal-cell {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface);
}

.cal-cell:hover,
.cal-cell.is-selected {
    background: var(--cw-color-primary-soft);
}

.cal-cell.is-selected {
    box-shadow: inset 0 0 0 1px var(--cw-color-primary-border);
}

.cal-cell-num {
    color: var(--cw-color-text-strong);
    font-family: var(--cw-font-sans);
    font-size: 13px;
}

.cal-cell.today .cal-cell-num {
    background: var(--cw-color-primary);
    color: #ffffff;
}

.cal-event {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary-hover);
    font-size: 13px;
}

.calendar-memo-card {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
}

.calendar-memo-card.is-unread,
.calendar-memo-card.is-important,
.cal-cell.has-unread {
    border-color: #ead7b5;
    box-shadow: inset 3px 0 0 var(--cw-color-warning);
}

.calendar-memo-card__title {
    color: var(--cw-color-text-strong);
    font-size: 14px;
}

.calendar-memo-card__writer,
.calendar-detail-panel__meta {
    color: var(--cw-color-text-muted);
    font-size: 13px;
}

.calendar-memo-card__content {
    color: var(--cw-color-text);
    font-size: 14px;
}

.calendar-badge,
.calendar-badge--important,
.cal-event.is-unread,
.cal-event.is-important {
    border-color: #ead7b5;
    background: var(--cw-color-warning-soft);
    color: var(--cw-color-warning);
}

.calendar-editor-toolbar {
    border-color: var(--cw-color-border-strong);
    background: var(--cw-color-surface-subtle);
}

.feed-card {
    border-left: 3px solid var(--cw-color-primary);
}

.feed-card.type-계약자 {
    border-left-color: var(--cw-color-primary);
}

.feed-card:hover {
    background: var(--cw-color-primary-soft);
}

.feed-name {
    color: var(--cw-color-text-strong);
}

.feed-name-sub {
    color: var(--cw-color-primary);
}

.feed-meta,
.feed-memo {
    color: var(--cw-color-text-muted);
}

.feed-memo {
    border-color: var(--cw-color-border);
    background: var(--cw-color-surface-subtle);
    font-size: 14px;
}

/* Pagination -------------------------------------------------------------- */

.crm-page-link,
.overview-page-link {
    min-width: 38px;
    height: 38px;
    border: 1px solid var(--cw-color-border-strong);
    border-radius: 10px;
    background: var(--cw-color-surface);
    color: var(--cw-color-text-muted);
    font-size: 13px;
    box-shadow: none;
}

.crm-page-link:hover,
.overview-page-link:hover {
    border-color: var(--cw-color-primary-border);
    background: var(--cw-color-primary-soft);
    color: var(--cw-color-primary-hover);
    transform: none;
}

.crm-page-link.is-active,
.overview-page-link.is-active {
    border-color: var(--cw-color-primary);
    background: var(--cw-color-primary);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(79, 104, 237, 0.18);
}

.crm-page-link.is-disabled,
.overview-page-link.is-disabled {
    color: var(--cw-color-text-faint);
}

/* Loading and media utilities -------------------------------------------- */

.guarantee-products-loading,
.lightbox {
    background: rgba(19, 33, 63, 0.42);
}

.guarantee-products-loading__panel {
    border-color: var(--cw-color-border);
    border-radius: var(--cw-radius-lg);
    background: var(--cw-color-surface);
    box-shadow: var(--cw-shadow-lg);
}

.guarantee-products-loading__spinner {
    border-color: var(--cw-color-primary-border);
    border-top-color: var(--cw-color-primary);
}

.guarantee-products-loading__title {
    color: var(--cw-color-text-strong);
}

.guarantee-products-loading__text {
    color: var(--cw-color-text-muted);
}

/* Shared state and form utilities ---------------------------------------- */
.is-hidden {
    display: none !important;
}

.crm-checkbox-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--cw-color-text);
    font-size: 13px;
}

.crm-checkbox-field input {
    accent-color: var(--cw-color-primary);
}

.crm-customer-summary-meta,
.crm-file-upload-guide {
    margin-top: 4px;
    color: var(--cw-color-text-muted);
    font-size: 12px;
}

.crm-revenue-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crm-revenue-input {
    margin: 0;
}

.form-grid--single {
    grid-template-columns: 1fr;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
    body.crm-layout .admin-layout {
        grid-template-columns: 204px minmax(0, 1fr);
    }

    body.crm-layout .sidebar {
        width: 204px;
        min-width: 204px;
    }

    body.crm-layout .content-body {
        padding: 20px;
    }
}

@media (max-width: 760px) {
    body.crm-layout .admin-layout {
        grid-template-columns: 1fr;
    }

    body.crm-layout .sidebar {
        position: relative;
        width: 100%;
        min-width: 0;
        height: auto;
        max-height: 44vh;
    }

    body.crm-layout .content {
        height: auto;
        min-height: 100vh;
    }

    body.crm-layout .topbar {
        min-height: 64px;
        padding: 12px 16px;
    }

    body.crm-layout .content-body {
        padding: 16px;
    }

    .stats-strip,
    #overview-page-root .stats-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .login-wrap {
        padding: 18px;
    }

    .login-box {
        padding: 34px 24px 28px;
    }

    .login-footer {
        display: none;
    }
}

@media (max-width: 520px) {
    .stats-strip,
    #overview-page-root .stats-strip {
        grid-template-columns: 1fr;
    }

    .contract-card__grid--startup,
    .contract-card__grid--three {
        grid-template-columns: 1fr;
    }
}