:root {
 /* Hana Teal — Trust primary */
 --primary: #008485;
 --primary-dark: #006F70;
 --primary-darker: #005859;
 --primary-50: #E6F4F4;
 --primary-100: #C2E4E4;
 --primary-200: #8FCDCD;

 /* Semantic — restrained, financial-grade */
 --danger: #D14343;
 --danger-50: #FBECEC;
 --danger-100: #F4CFCF;
 --success: #00876A;
 --success-50: #E6F5F0;
 --success-100: #B9E1D2;
 --warning: #B07900;
 --warning-bg: #E5A500;
 --warning-50: #FBF3E0;
 --info: #2C6FBE;
 --info-50: #EAF1FA;

 /* Premium gold — for tier/commission accents only */
 --gold: #C9A961;
 --gold-50: #F8F2E3;

 /* Kakao (legacy preserved) */
 --kakao: #FAE100;

 /* Neutral — calm grays, refined for Hana */
 --gray-50: #F8FAFA;
 --gray-100: #F1F4F4;
 --gray-200: #E3E8E8;
 --gray-300: #B5BDBD;
 --gray-400: #8E9898;
 --gray-500: #5C6868;
 --gray-700: #2D3838;
 --gray-900: #0F1818;

 /* Surface & elevation */
 --surface: #FFFFFF;
 --surface-alt: #F8FAFA;
 --border: #E3E8E8;
 --border-strong: #C9D1D1;

 /* Shadows — subtle, financial-grade (no glow) */
 --shadow-xs: 0 1px 2px rgba(15,24,24,0.04);
 --shadow-sm: 0 1px 3px rgba(15,24,24,0.05), 0 1px 2px rgba(15,24,24,0.03);
 --shadow-md: 0 4px 12px rgba(15,24,24,0.06), 0 1px 3px rgba(15,24,24,0.04);
 --shadow-lg: 0 12px 32px rgba(15,24,24,0.08);

 /* Radii — slightly tighter than Toss */
 --r-sm: 6px;
 --r-md: 10px;
 --r-lg: 14px;
 --r-xl: 18px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
 font-family: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
 background: var(--gray-50);
 color: var(--gray-900);
 letter-spacing: -0.018em;
 font-feature-settings: 'tnum' on, 'ss03' on;
 height: 100%;
 font-size: 14px;
 -webkit-font-smoothing: antialiased;
 text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { letter-spacing: -0.025em; }
.tabular { font-variant-numeric: tabular-nums; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; border: none; background: none; }
input, textarea { outline: none; }

.layout { display: flex; height: 100vh; overflow: hidden; }

/* ============= 사이드바 ============= */
.sidebar {
 width: 244px;
 background: var(--surface);
 border-right: 1px solid var(--border);
 display: flex;
 flex-direction: column;
 flex-shrink: 0;
}
.logo { height: 64px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid var(--border); gap: 10px; }
.logo .brand-img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.logo .nm { font-size: 17px; font-weight: 800; letter-spacing: -0.035em; color: var(--gray-900); }
.logo .nm em { font-style: normal; color: var(--primary); }
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav-section { padding: 14px 14px 6px; font-size: 10px; font-weight: 800; color: var(--gray-300); letter-spacing: 0.08em; text-transform: uppercase; }
.nav-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 14px;
 border-radius: 10px;
 font-size: 13px;
 font-weight: 700;
 color: var(--gray-500);
 user-select: none;
 margin-bottom: 2px;
 transition: all 0.12s;
 position: relative;
}
.nav-item:hover { background: var(--gray-100); color: var(--gray-900); }
.nav-item.active { background: var(--primary-50); color: var(--primary); }
.nav-item .ic { width: 18px; height: 18px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-400); }
.nav-item.active .ic, .nav-item:hover .ic { color: var(--primary); }
.nav-item .ic svg { width: 16px; height: 16px; display: block; }
.widget-title .ic, .quick-link .ic, .qa-btn .ic, .icon-box .ic { display: inline-flex; align-items: center; justify-content: center; }
.widget-title .ic svg, .quick-link .ic svg, .qa-btn .ic svg, .icon-box .ic svg, .search-bar .ic svg { width: 14px; height: 14px; display: block; }
.search-bar .ic svg { width: 16px; height: 16px; }
.search-bar .ic { display: inline-flex; align-items: center; justify-content: center; }
.nav-item .count { margin-left: auto; font-size: 10px; font-weight: 800; background: var(--gray-200); color: var(--gray-500); padding: 2px 6px; border-radius: 999px; flex-shrink: 0; }
.nav-item.active .count { background: var(--primary); color: #fff; }

.user-card { padding: 12px; border-top: 1px solid var(--gray-100); }
.user-card.guest { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.user-card.guest .guest-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--gray-100); border: 1px dashed var(--gray-300); color: var(--gray-400); display: flex; align-items: center; justify-content: center; margin: 4px auto 2px; cursor: pointer; transition: all 0.12s; }
.user-card.guest .guest-avatar:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.user-card.guest .guest-avatar svg { width: 22px; height: 22px; }
.user-card.guest .guest-text { text-align: center; }
.user-card.guest .guest-text .t { font-size: 13px; font-weight: 800; color: var(--gray-900); letter-spacing: -0.02em; }
.user-card.guest .guest-text .s { font-size: 11px; font-weight: 600; color: var(--gray-400); margin-top: 2px; }
.user-card.guest .guest-actions { display: flex; gap: 6px; }
.user-card.guest .btn-signup { flex: 1; padding: 9px 0; border-radius: 10px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: -0.02em; transition: background 0.12s; }
.user-card.guest .btn-signup:hover { background: var(--primary-700); }
.user-card.guest .btn-login { flex: 1; padding: 9px 0; border-radius: 10px; background: var(--gray-50); color: var(--gray-700); font-size: 12px; font-weight: 700; border: 1px solid var(--border); transition: all 0.12s; }
.user-card.guest .btn-login:hover { background: var(--gray-100); color: var(--gray-900); }
.user-inner { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 14px; padding: 12px; }
.user-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.user-avatar { width: 36px; height: 36px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: 0; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08); }
.user-name { font-size: 12px; font-weight: 800; }
.user-org { font-size: 10px; font-weight: 600; color: var(--gray-400); }
.user-plan { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--gray-200); font-size: 11px; font-weight: 700; }

/* ============= 메인 ============= */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.main-header {
 height: 64px;
 background: var(--surface);
 border-bottom: 1px solid var(--border);
 display: flex;
 align-items: center;
 padding: 0 28px;
 gap: 16px;
 flex-shrink: 0;
}
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.crumbs .now { font-weight: 800; }
.crumbs .sep { color: var(--gray-300); }
.search-bar {
 flex: 1;
 max-width: 480px;
 position: relative;
 margin-left: auto;
}
.search-bar input {
 width: 100%;
 background: var(--gray-100);
 border: 1px solid transparent;
 border-radius: 10px;
 padding: 9px 12px 9px 36px;
 font-size: 13px;
 font-weight: 600;
 color: var(--gray-900);
}
.search-bar input:focus { background: #fff; border-color: var(--primary); }
.search-bar input::placeholder { color: var(--gray-400); font-weight: 500; }
.search-bar .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.search-bar .kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 700; color: var(--gray-400); background: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--gray-200); pointer-events: none; }

.header-actions { display: flex; gap: 8px; }
.icon-btn { width: 38px; height: 38px; background: var(--gray-100); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 15px; position: relative; }
.icon-btn:hover { background: var(--gray-200); }
.icon-btn .dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; background: var(--danger); border-radius: 50%; border: 1.5px solid #fff; }

.main-content { flex: 1; overflow-y: auto; padding-bottom: 60px; }
.pane { display: none; padding: 24px 28px; max-width: 1500px; margin: 0 auto; }
.pane.active { display: block; }
.pane-head { margin-bottom: 20px; }
.pane-head h1 { font-size: 22px; font-weight: 800; }
.pane-head .desc { font-size: 13px; color: var(--gray-400); margin-top: 4px; font-weight: 500; }
.tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 5px; letter-spacing: 0.02em; margin-bottom: 6px; }
.tag-summary { background: var(--gray-100); color: var(--gray-500); }
.tag-before { background: var(--danger-50); color: var(--danger); }
.tag-after { background: var(--primary-50); color: var(--primary); }
.tag-compare { background: var(--warning-50); color: var(--warning); }
.tag-report { background: var(--success-50); color: var(--success); }

/* ============= 공통 컴포넌트 ============= */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 800; transition: all 0.15s; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-dark { background: var(--gray-900); color: #fff; }
.btn-dark:hover { background: var(--gray-700); }
.btn-kakao { background: var(--kakao); color: #391B1B; }
.btn-kakao:hover { background: #F0D700; }
.btn-ghost { background: var(--gray-100); color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-200); }
.btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }

.chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 800; }
.chip-up { background: var(--success-50); color: var(--success); }
.chip-down { background: var(--danger-50); color: var(--danger); }
.chip-new { background: var(--primary-50); color: var(--primary); }
.chip-flat { background: var(--gray-100); color: var(--gray-500); }
.chip-warning { background: var(--warning-50); color: var(--warning); }

.card { background: var(--surface); border-radius: var(--r-lg); padding: 22px; border: 1px solid var(--border); box-shadow: var(--shadow-xs); }

/* ============= 위젯 (대시보드) ============= */
.dash-greet { margin-bottom: 24px; }
.dash-greet h1 { font-size: 24px; font-weight: 800; }
.dash-greet p { font-size: 13px; color: var(--gray-400); margin-top: 4px; font-weight: 600; }
.dash-greet .today { font-size: 12px; color: var(--gray-400); font-weight: 700; }

/* 그리드 */
.dash-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 1100px) {
 .span-3, .span-4, .span-5 { grid-column: span 6; }
 .span-7, .span-8 { grid-column: span 12; }
}
@media (max-width: 700px) {
 .span-3, .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
}

.widget {
 background: var(--surface);
 border-radius: var(--r-lg);
 padding: 20px 22px;
 border: 1px solid var(--border);
 box-shadow: var(--shadow-xs);
 display: flex;
 flex-direction: column;
}
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.widget-title { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 6px; color: var(--gray-700); }
.widget-title .ic { font-size: 14px; }
.widget-action { font-size: 11px; font-weight: 800; color: var(--primary); display: inline-flex; align-items: center; gap: 2px; }
.widget-action:hover { text-decoration: underline; }

.widget-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 12px 8px;
 border-bottom: 1px solid var(--border);
 cursor: pointer;
 transition: background 0.12s;
 border-radius: 8px;
 margin: 0 -8px;
}
.widget-row:hover { background: var(--gray-50); }
.widget-row:last-child { border-bottom: none; }
.widget-row .left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.widget-row .icon-box { width: 32px; height: 32px; background: var(--gray-100); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; flex-shrink: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.widget-row .info { min-width: 0; flex: 1; }
.widget-row .info .t { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-row .info .s { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.widget-row .right { font-size: 11px; font-weight: 700; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; margin-left: 8px; }

.kpi-row { display: flex; gap: 10px; margin-bottom: 14px; }
.mini-kpi { flex: 1; padding: 10px 12px; background: var(--gray-50); border-radius: 10px; }
.mini-kpi .l { font-size: 10px; font-weight: 800; color: var(--gray-400); }
.mini-kpi .v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 2px; }

/* 큐릭 액세스 (DB 바로가기) */
.quick-link {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 10px 12px;
 border-radius: 10px;
 background: var(--gray-50);
 margin-bottom: 6px;
 font-weight: 700;
 font-size: 13px;
 color: var(--gray-700);
 cursor: pointer;
 transition: all 0.12s;
}
.quick-link:hover { background: var(--primary-50); color: var(--primary); }
.quick-link .ic { font-size: 16px; }
.quick-link .arrow { margin-left: auto; color: var(--gray-300); }
.quick-link:hover .arrow { color: var(--primary); }

/* 청구 도넛 */
.donut-wrap { position: relative; display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.donut-wrap canvas { max-width: 180px; max-height: 180px; }
.donut-center { position: absolute; text-align: center; }
.donut-center .lb { font-size: 10px; font-weight: 800; color: var(--gray-400); }
.donut-center .vl { font-size: 22px; font-weight: 800; color: var(--success); }
.donut-legend { display: flex; gap: 14px; justify-content: center; margin-top: 8px; }
.donut-legend .li { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.donut-legend .dot { width: 8px; height: 8px; border-radius: 50%; }

/* Birthday/만기 - customer-aligned */
.alert-row { padding: 12px 0; border-bottom: 1px solid var(--gray-100); display: flex; align-items: center; gap: 12px; }
.alert-row:last-child { border-bottom: none; padding-bottom: 4px; }
.alert-row .icon-emo { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.alert-row .icon-emo.bday { background: #FFF4E5; }
.alert-row .icon-emo.expire { background: var(--danger-50); }
.alert-row .icon-emo.renew { background: var(--primary-50); }
.alert-row .icon-emo.meet { background: var(--primary-50); }
.alert-row .icon-emo.claim { background: var(--warning-50); }
.alert-row .icon-emo.contract { background: var(--success-50); }
.alert-row .icon-emo.call { background: #EDF1FF; }
.alert-row .info { flex: 1; min-width: 0; }
.alert-row .info .t { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.02em; }
.alert-row .info .s { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-row .day-pill { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; padding: 6px 8px; border-radius: 10px; background: var(--gray-50); border: 1px solid var(--border); flex-shrink: 0; line-height: 1; }
.alert-row .day-pill .d-num { font-size: 13px; font-weight: 800; color: var(--gray-900); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.alert-row .day-pill .d-lbl { font-size: 9px; font-weight: 700; color: var(--gray-400); margin-top: 2px; letter-spacing: 0.02em; }
.alert-row.urgent .day-pill { background: var(--danger-50); border-color: transparent; }
.alert-row.urgent .day-pill .d-num { color: var(--danger); }
.alert-row.urgent .day-pill .d-lbl { color: var(--danger); opacity: 0.7; }

/* 뉴스 */
.news-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.news-row:last-child { border-bottom: none; }
.news-row .src { font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 4px; background: var(--gray-100); color: var(--gray-500); height: fit-content; flex-shrink: 0; }
.news-row .title { font-size: 12px; font-weight: 700; line-height: 1.4; flex: 1; color: var(--gray-700); }
.news-row .title:hover { color: var(--primary); }
.news-row .time { font-size: 10px; color: var(--gray-400); font-weight: 600; flex-shrink: 0; }

/* 고지의무 빠른조회 */
.quick-form { display: flex; gap: 8px; margin-bottom: 14px; }
.quick-form input { flex: 1; background: var(--gray-50); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.quick-form input:focus { background: #fff; border-color: var(--primary); }
.quick-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); margin: 0 4px 4px 0; cursor: pointer; }
.quick-tag:hover { background: var(--primary); color: #fff; }

/* RP 모음 */
.rp-card { padding: 12px; border-radius: 10px; background: var(--gray-50); margin-bottom: 8px; cursor: pointer; transition: all 0.12s; }
.rp-card:hover { background: var(--primary-50); }
.rp-card .scn { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.rp-card .meta { display: flex; gap: 8px; font-size: 10px; font-weight: 700; color: var(--gray-400); }
.rp-card .meta .tag-sm { padding: 2px 5px; border-radius: 4px; background: #fff; }

/* 영업 콘텐츠 */
.shorts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.short-item { aspect-ratio: 9/16; background: linear-gradient(135deg, #ddd, #aaa); border-radius: 10px; position: relative; overflow: hidden; cursor: pointer; }
.short-item .src { position: absolute; top: 8px; left: 8px; font-size: 10px; font-weight: 800; padding: 3px 6px; border-radius: 4px; background: rgba(0,0,0,0.6); color: #fff; }
.short-item .play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 36px; height: 36px; background: rgba(255,255,255,0.95); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.short-item .meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); color: #fff; font-size: 11px; font-weight: 700; }
.short-item.s1 { background: linear-gradient(135deg, #FF5247, #FF8A66); }
.short-item.s2 { background: linear-gradient(135deg, #00C896, #6EE7C5); }
.short-item.s3 { background: linear-gradient(135deg, #008485, #8FCDCD); }
.short-item.s4 { background: linear-gradient(135deg, #8B6915, #C9A961); }
.short-item.img-real { background-size: cover; background-position: center; background-repeat: no-repeat; }
.short-item.img-real .meta { background: linear-gradient(transparent, rgba(0,0,0,0.85)); }

/* 습관 */
.habit-grid { display: grid; grid-template-columns: 100px repeat(7, 1fr); gap: 6px; }
.habit-grid .hcell { font-size: 11px; font-weight: 700; text-align: center; padding: 6px; }
.habit-grid .htop { color: var(--gray-400); }
.habit-grid .hlabel { text-align: left; padding: 8px 0; font-weight: 800; color: var(--gray-700); display: flex; align-items: center; gap: 6px; }
.habit-grid .hbox { aspect-ratio: 1; border-radius: 6px; background: var(--gray-100); cursor: pointer; }
.habit-grid .hbox.done { background: var(--success); }
.habit-grid .hbox.missed { background: var(--danger-50); }

/* 캘린더 */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--gray-100); border-radius: 12px; overflow: hidden; }
.cal-cell { background: #fff; padding: 8px; min-height: 80px; font-size: 11px; }
.cal-cell.head { background: var(--gray-50); text-align: center; font-weight: 800; padding: 8px 0; color: var(--gray-500); min-height: auto; }
.cal-cell.today { background: var(--primary-50); }
.cal-cell.weekend .num { color: var(--danger); }
.cal-cell .num { font-weight: 800; font-size: 12px; }
.cal-cell .ev { font-size: 10px; padding: 2px 4px; border-radius: 3px; margin-top: 4px; font-weight: 700; cursor: pointer; }
.cal-cell .ev.meet { background: var(--primary-50); color: var(--primary); }
.cal-cell .ev.contract { background: var(--success-50); color: var(--success); }
.cal-cell .ev.claim { background: var(--warning-50); color: var(--warning); }

/* 큰 월간 캘린더 */
.cal-big { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--gray-100); border-radius: 12px; overflow: hidden; }
.cal-big .ch { background: var(--gray-50); text-align: center; font-size: 11px; font-weight: 800; color: var(--gray-500); padding: 10px 0; letter-spacing: 0.04em; }
.cal-big .ch.sun { color: var(--danger); }
.cal-big .ch.sat { color: var(--primary); }
.cal-big .cd { background: #fff; min-height: 110px; padding: 7px 6px; font-size: 11px; position: relative; cursor: pointer; transition: background 0.12s; overflow: hidden; }
.cal-big .cd:hover { background: var(--gray-50); }
.cal-big .cd.outside { background: #fbfbfc; color: var(--gray-300); }
.cal-big .cd.outside .num { color: var(--gray-300); font-weight: 600; }
.cal-big .cd.today { background: var(--primary-50); }
.cal-big .cd.today .num { background: var(--primary); color: #fff; box-shadow: 0 2px 6px rgba(0,132,133,0.30); }
.cal-big .cd .num { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 50%; font-weight: 800; font-size: 11px; margin-bottom: 4px; color: var(--gray-700); }
.cal-big .cd.sun .num { color: var(--danger); }
.cal-big .cd.sat .num { color: var(--primary); }
.cal-big .cd.today.sun .num, .cal-big .cd.today.sat .num { color: #fff; }
.cal-ev { display: block; font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.cal-ev.meet { background: var(--primary-50); color: var(--primary); }
.cal-ev.contract { background: var(--success-50); color: var(--success); }
.cal-ev.claim { background: var(--warning-50); color: var(--warning); }
.cal-ev.bday { background: #FFEAF6; color: #C025A0; }
.cal-ev.expire { background: var(--danger-50); color: var(--danger); }
.cal-ev.renew { background: #EEE9FF; color: #5B3FD0; }
.cal-more { font-size: 9px; color: var(--gray-400); font-weight: 800; padding: 2px 5px; }
@media (max-width: 768px) {
 .cal-big .cd { min-height: 70px; padding: 4px; }
 .cal-big .cd .num { min-width: 18px; height: 18px; font-size: 10px; }
 .cal-ev { font-size: 9px; padding: 1px 3px; }
}

/* 요금제 페이지 */
.pricing-page-wrap { max-width: 1000px; margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0 48px; }
.plan-card { background: #fff; border: 2px solid var(--gray-200); border-radius: 24px; padding: 32px 28px; position: relative; transition: all 0.2s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.06); }
.plan-card.pro { border-color: var(--primary); background: linear-gradient(180deg, #fff 60%, var(--primary-50) 100%); box-shadow: 0 12px 32px rgba(0,132,133,0.12); }
.recommend-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 16px; border-radius: 999px; letter-spacing: 0.04em; }
.plan-card h3 { font-size: 22px; font-weight: 800; }
.plan-desc { font-size: 13px; color: var(--gray-400); font-weight: 600; margin-top: 6px; }
.plan-price { margin: 20px 0; display: flex; align-items: baseline; gap: 3px; }
.plan-price .num { font-size: 42px; font-weight: 800; letter-spacing: -0.04em; }
.plan-price .unit { font-size: 16px; font-weight: 700; color: var(--gray-500); margin-left: 2px; }
.plan-price .period { font-size: 13px; color: var(--gray-400); font-weight: 600; margin-left: 4px; }
.plan-features { list-style: none; padding: 0; margin: 20px 0; }
.plan-features li { padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; font-weight: 600; display: flex; align-items: flex-start; gap: 8px; }
.plan-features li:last-child { border-bottom: none; }
.plan-features li.incl { color: var(--gray-700); }
.plan-features li.incl::before { content: '✓'; color: var(--success); font-weight: 800; flex-shrink: 0; }
.plan-features li.incl strong { color: var(--gray-900); font-weight: 800; }
.plan-features li.excl { color: var(--gray-300); }
.plan-features li.excl::before { content: '×'; color: var(--gray-300); font-weight: 800; flex-shrink: 0; }
.plan-card .btn-plan { width: 100%; padding: 14px; font-size: 14px; font-weight: 800; border-radius: 12px; margin-top: 16px; }
.pricing-faq { background: #fff; border-radius: 16px; padding: 24px; }
.pricing-faq h3 { font-size: 16px; font-weight: 800; margin-bottom: 12px; }
.pricing-faq details { padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.pricing-faq details:last-child { border-bottom: none; }
.pricing-faq summary { font-size: 13px; font-weight: 700; cursor: pointer; color: var(--gray-700); display: flex; justify-content: space-between; align-items: center; }
.pricing-faq summary::after { content: '⌄'; color: var(--gray-400); font-weight: 800; transition: transform 0.2s; }
.pricing-faq details[open] summary::after { transform: rotate(180deg); }
.pricing-faq p { font-size: 13px; color: var(--gray-500); font-weight: 500; line-height: 1.6; margin-top: 10px; padding-left: 4px; }

/* ============= Phase 3 v8 추가 ============= */
/* 조직 브레드크럼 (헤더 좌측) */
.org-bc { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--gray-400); }
.org-bc .lvl { padding: 3px 7px; border-radius: 5px; background: var(--gray-100); transition: all 0.15s; cursor: pointer; }
.org-bc .lvl:hover { background: var(--primary-50); color: var(--primary); }
.org-bc .lvl.you { background: var(--primary); color: #fff; }
.org-bc .sep { color: var(--gray-300); font-weight: 400; }

/* 퀵 액션바 (헤더 우측) */
.qa-bar { display: flex; gap: 6px; align-items: center; }
.qa-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; background: var(--gray-100); border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--gray-700); transition: all 0.12s; white-space: nowrap; flex-shrink: 0; }
.qa-bar { flex-shrink: 0; }
.search-bar { min-width: 0; }
@media (max-width: 1180px) { .org-bc { display: none; } }
@media (max-width: 920px) { .qa-btn span:not(.ic) { display: none; } .qa-btn { padding: 8px 10px; } }
.qa-btn:hover { background: var(--primary-50); color: var(--primary); transform: translateY(-1px); }
.qa-btn.primary { background: var(--primary); color: #fff; }
.qa-btn.primary:hover { background: var(--primary-dark); color: #fff; }
.qa-btn .ic { font-size: 13px; }

/* DayDrawer (날짜 클릭 시 우측 슬라이드 패널) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 1500; backdrop-filter: blur(3px); }
.drawer-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw; background: #fff; box-shadow: -8px 0 32px rgba(0,0,0,0.12); z-index: 1501; transform: translateX(100%); transition: transform 0.25s; overflow-y: auto; }
.drawer-panel.open { transform: translateX(0); }
.drawer-head { padding: 20px 24px; border-bottom: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }
.drawer-head .date-big { font-size: 22px; font-weight: 800; }
.drawer-head .date-sub { font-size: 12px; color: var(--gray-400); font-weight: 600; margin-top: 2px; }
.drawer-body { padding: 20px 24px; }
.drawer-section { margin-bottom: 24px; }
.drawer-section h4 { font-size: 12px; font-weight: 800; color: var(--gray-500); margin-bottom: 10px; letter-spacing: 0.04em; }
.drawer-event { display: flex; gap: 10px; padding: 10px 12px; background: var(--gray-50); border-radius: 10px; margin-bottom: 6px; align-items: center; }
.drawer-event .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.drawer-event .text { font-size: 13px; font-weight: 700; flex: 1; }
.drawer-event.meet .dot { background: var(--primary); }
.drawer-event.contract .dot { background: var(--success); }
.drawer-event.claim .dot { background: var(--warning-bg); }
.drawer-event.bday .dot { background: #C025A0; }
.drawer-event.expire .dot { background: var(--danger); }
.drawer-event.renew .dot { background: #5B3FD0; }
.drawer-event .src-badge { font-size: 9px; font-weight: 800; padding: 2px 5px; border-radius: 3px; background: var(--primary-50); color: var(--primary); }

/* SLLM 신뢰도 배지 */
.sllm-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--gray-900); color: #fff; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; }
.sllm-badge .pulse { width: 6px; height: 6px; background: #6EE7C5; border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* 권한 게이트 잠금 */
.gate-lock { position: relative; }
.gate-lock::before { content: '' attr(data-required) ' 이상 권한 필요'; position: absolute; inset: 0; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--gray-500); z-index: 10; border-radius: inherit; backdrop-filter: blur(2px); }

/* 사이드바 사용량 미터 */
.usage-meter { padding: 10px 12px; margin-top: 8px; background: var(--gray-50); border-radius: 10px; }
.usage-meter .lb { font-size: 10px; font-weight: 800; color: var(--gray-400); margin-bottom: 4px; }
.usage-meter .bar { height: 5px; background: var(--gray-200); border-radius: 999px; overflow: hidden; margin: 4px 0; }
.usage-meter .fill { height: 100%; background: var(--primary); border-radius: 999px; }
.usage-meter .nm { font-size: 10px; font-weight: 700; color: var(--gray-500); }

/* 동기화 펄스 토스트 */
.sync-toast { position: fixed; bottom: 24px; right: 24px; background: var(--gray-900); color: #fff; padding: 12px 18px; border-radius: 12px; font-size: 13px; font-weight: 700; box-shadow: 0 8px 32px rgba(0,0,0,0.2); z-index: 2500; display: flex; align-items: center; gap: 8px; transform: translateY(120%); opacity: 0; transition: all 0.3s; }
.sync-toast.show { transform: translateY(0); opacity: 1; }
.sync-toast .ic { font-size: 16px; }

/* 플랜 변경 차액 미리보기 */
.proration-box { background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: 12px; padding: 14px 16px; margin: 16px 0; font-size: 12px; font-weight: 700; color: var(--gray-700); }
.proration-box .amt { font-size: 18px; font-weight: 800; color: var(--primary); }

/* 온프레미스 모드 인디케이터 (사이드바 상단) */
.onprem-bar { padding: 8px 12px; margin: 0 12px 8px; background: var(--gray-900); color: #fff; border-radius: 10px; font-size: 10px; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.onprem-bar .led { width: 6px; height: 6px; background: #00C896; border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }

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


/* ============= 보장분석 (기존 v2) ============= */
.cov-kyc {
 background: #fff;
 border-bottom: 1px solid var(--gray-100);
 padding: 12px 28px;
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 align-items: center;
 position: sticky;
 top: 0;
 z-index: 30;
}
.cov-kyc-field { display: flex; align-items: center; gap: 6px; }
.cov-kyc-field label { font-size: 11px; font-weight: 800; color: var(--gray-400); white-space: nowrap; letter-spacing: 0.02em; }
.cov-kyc-field input, .cov-kyc-field select { background: var(--gray-50); border: 1px solid transparent; border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 700; color: var(--gray-900); }
.cov-kyc-field input:focus, .cov-kyc-field select:focus { border-color: var(--primary); background: #fff; }
.cov-tabs { background: #fff; border-bottom: 1px solid var(--gray-100); padding: 0 28px; display: flex; gap: 2px; overflow-x: auto; }
.cov-tab { padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--gray-400); border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; margin-bottom: -1px; }
.cov-tab:hover { color: var(--gray-500); }
.cov-tab.active { color: var(--gray-900); border-bottom-color: var(--gray-900); }
.cov-tab.active.tb-before { color: var(--danger); border-bottom-color: var(--danger); }
.cov-tab.active.tb-after { color: var(--primary); border-bottom-color: var(--primary); }
.cov-tab.active.tb-report { color: var(--success); border-bottom-color: var(--success); }
.cov-pane { display: none; padding: 24px 28px; }
.cov-pane.active { display: block; }
.cov-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.cov-pane-head h2 { font-size: 20px; font-weight: 800; }
.cov-pane-head .dsc { font-size: 12px; color: var(--gray-400); margin-top: 4px; font-weight: 600; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi { background: #fff; border-radius: 14px; padding: 16px 18px; border-left: 4px solid var(--gray-200); box-shadow: 0 1px 4px rgba(0,0,0,0.03); }
.kpi.k-before { border-left-color: var(--danger); }
.kpi.k-after { border-left-color: var(--primary); }
.kpi.k-warning { border-left-color: var(--warning-bg); }
.kpi.k-success { border-left-color: var(--success); }
.kpi-label { font-size: 11px; font-weight: 800; color: var(--gray-400); margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 800; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 11px; font-weight: 600; color: var(--gray-400); margin-top: 4px; }

/* 보장표 */
.policy-table-card { background: #fff; border-radius: 14px; border: 1px solid var(--gray-200); overflow: hidden; }
.policy-scroll { overflow-x: auto; }
.policy-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.policy-table th, .policy-table td { padding: 0; vertical-align: middle; }
.policy-table thead th { background: var(--gray-50); border-bottom: 2px solid var(--gray-200); padding: 10px 14px; font-size: 11px; font-weight: 800; color: var(--gray-500); text-align: right; white-space: nowrap; vertical-align: top; }
.policy-table thead th.col-label { text-align: left; padding-left: 20px; min-width: 200px; }
.policy-table thead th.col-sum { text-align: right; min-width: 120px; }
.policy-table thead th.col-insurer { text-align: center; min-width: 180px; padding: 8px; }
.policy-table.before thead th.col-insurer { background: var(--danger-50); }
.policy-table.after thead th.col-insurer { background: var(--primary-50); }
.insurer-head { display: flex; flex-direction: column; gap: 4px; }
.insurer-head .row1 { display: flex; gap: 4px; }
.insurer-head input { flex: 1; background: #fff; border: 1px solid transparent; border-radius: 8px; padding: 6px 9px; font-size: 12px; font-weight: 800; text-align: left; width: 100%; min-width: 0; }
.insurer-head input.product { font-size: 11px; font-weight: 700; color: var(--gray-500); }
.insurer-head input:focus { border-color: var(--primary); }
.insurer-head input::placeholder { color: var(--gray-300); font-weight: 600; }
.del-btn { width: 26px; height: 26px; background: rgba(255,255,255,0.6); border-radius: 6px; color: var(--gray-300); font-size: 14px; flex-shrink: 0; }
.del-btn:hover { color: var(--danger); background: #fff; }

.policy-table tbody tr.group td { background: var(--gray-100); padding: 7px 20px; text-align: left; font-size: 11px; font-weight: 800; color: var(--gray-500); letter-spacing: 0.04em; }
.policy-table tbody tr.item td { border-bottom: 1px solid var(--gray-100); }
.policy-table tbody tr.item:last-child td { border-bottom: none; }
.policy-table tbody td.label-cell { text-align: left; padding: 9px 20px; font-size: 13px; font-weight: 700; color: var(--gray-700); background: #fff; position: sticky; left: 0; z-index: 5; white-space: nowrap; }
.policy-table tbody td.label-cell .unit { font-size: 10px; color: var(--gray-300); margin-left: 4px; font-weight: 500; }
.policy-table tbody td.sum-cell { padding: 6px 14px; text-align: right; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--gray-50); }
.policy-table.before tbody td.sum-cell { color: var(--danger); }
.policy-table.after tbody td.sum-cell { color: var(--primary); }
.policy-table tbody td.value-cell { padding: 4px 6px; }
.policy-table tbody td.value-cell input { width: 100%; background: transparent; border: 1px solid transparent; padding: 7px 9px; border-radius: 7px; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.policy-table tbody td.value-cell input:hover { background: var(--gray-50); }
.policy-table tbody td.value-cell input:focus { border-color: var(--primary); background: #fff; }
.policy-table tbody td.value-cell input::placeholder { color: var(--gray-300); font-weight: 500; }

/* 비교표 */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table thead th { background: var(--gray-50); padding: 10px 14px; font-size: 11px; font-weight: 800; color: var(--gray-400); text-align: left; white-space: nowrap; }
.compare-table thead th.right { text-align: right; }
.compare-table thead th.center { text-align: center; }
.compare-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--gray-100); }
.compare-table tbody td.right { text-align: right; font-variant-numeric: tabular-nums; }
.compare-table tbody td.label { font-weight: 700; font-size: 13px; }
.compare-table tbody td.cat { font-size: 11px; font-weight: 800; color: var(--gray-400); }
.compare-table tbody tr.up td { background: rgba(0, 135, 90, 0.04); }
.compare-table tbody tr.down td { background: rgba(227, 38, 54, 0.04); }
.progress { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.progress .track { flex: 1; height: 5px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.progress .fill { height: 100%; transition: width 0.3s; border-radius: 999px; }
.progress .pct { width: 36px; text-align: right; font-size: 11px; font-weight: 800; }

/* 매핑 */
.mapping { display: grid; grid-template-columns: 1fr 50px 1fr; gap: 14px; margin-bottom: 12px; }
.mapping-side { border-radius: 14px; padding: 16px; }
.mapping-side.b { background: var(--danger-50); border: 1px solid var(--danger-100); }
.mapping-side.a { background: var(--primary-50); border: 1px solid var(--primary-100); }
.mapping-side h4 { font-size: 11px; font-weight: 800; margin-bottom: 8px; }
.mapping-side.b h4 { color: var(--danger); }
.mapping-side.a h4 { color: var(--primary); }
.mapping-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
.mapping-row:last-of-type { border-bottom: none; }
.mapping-row .nm { font-size: 13px; font-weight: 800; }
.mapping-row .pd { font-size: 11px; font-weight: 600; color: var(--gray-400); margin-top: 2px; }
.mapping-row .pr { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mapping-total { display: flex; justify-content: space-between; padding-top: 10px; margin-top: 4px; border-top: 2px solid; font-weight: 800; }
.mapping-side.b .mapping-total { border-top-color: var(--danger); color: var(--danger); }
.mapping-side.a .mapping-total { border-top-color: var(--primary); color: var(--primary); }
.mapping-arrow { display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 22px; font-weight: 800; }

/* 시나리오 */
.scenario { background: #fff; border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; }
.scenario-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gray-100); }
.scenario-icon { width: 32px; height: 32px; background: var(--gray-100); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.scenario-name { font-size: 14px; font-weight: 800; }
.scenario-tag { margin-left: auto; font-size: 10px; font-weight: 800; padding: 3px 7px; background: var(--gray-100); color: var(--gray-500); border-radius: 4px; }
.scenario-grid { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 8px; margin-bottom: 10px; }
.scenario-box { padding: 12px 14px; border-radius: 11px; }
.scenario-box.b { background: var(--danger-50); border: 1px solid var(--danger-100); }
.scenario-box.a { background: var(--success-50); border: 1px solid var(--success-100); }
.scenario-box .lb { font-size: 10px; font-weight: 800; margin-bottom: 4px; }
.scenario-box.b .lb { color: var(--danger); }
.scenario-box.a .lb { color: var(--success); }
.scenario-box .am { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.scenario-box.b .am { color: var(--danger); }
.scenario-box.a .am { color: var(--success); }
.scenario-box .bd { font-size: 11px; color: var(--gray-500); font-weight: 600; margin-top: 4px; line-height: 1.4; }
.scenario-arrow { display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 800; font-size: 18px; }
.scenario-evid { background: var(--primary-50); border-radius: 9px; padding: 9px 12px; font-size: 11px; color: var(--gray-500); font-weight: 600; line-height: 1.5; }
.scenario-evid strong { color: var(--gray-900); font-weight: 800; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.summary-card { padding: 0; overflow: hidden; }
.summary-card .head { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--gray-100); }
.summary-card.b .head { background: var(--danger-50); }
.summary-card.a .head { background: var(--primary-50); }
.summary-card .ht { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 5px; }
.summary-card.b .ht { background: var(--danger); color: #fff; }
.summary-card.a .ht { background: var(--primary); color: #fff; }
.summary-card .hn { font-size: 14px; font-weight: 800; }
.summary-card table { width: 100%; border-collapse: collapse; }
.summary-card thead th { padding: 9px 16px; text-align: left; background: var(--gray-50); font-size: 11px; font-weight: 800; color: var(--gray-400); }
.summary-card thead th.right { text-align: right; }
.summary-card tbody td { padding: 11px 16px; border-bottom: 1px solid var(--gray-100); }
.summary-card tbody td.right { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.summary-card tbody tr:last-child td { border-bottom: none; }
.summary-card tbody tr.total td { font-weight: 800; padding: 13px 16px; font-size: 13px; }
.summary-card.b tbody tr.total { background: var(--danger-50); color: var(--danger); }
.summary-card.a tbody tr.total { background: var(--primary-50); color: var(--primary); }
.summary-card .ins-name { font-weight: 800; font-size: 13px; }
.summary-card .ins-prod { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; }

/* 리포트 표지 */
.report-cover { position: relative; background: var(--primary-dark); color: #fff; padding: 36px 32px; border-radius: var(--r-xl); overflow: hidden; }
.report-cover::after { content: ''; position: absolute; left: -40px; bottom: -40px; width: 160px; height: 160px; background: rgba(255,255,255,0.04); border-radius: 50%; }
.report-cover::before { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.report-cover .brand { font-size: 11px; font-weight: 800; opacity: 0.9; margin-bottom: 8px; letter-spacing: 0.06em; position: relative; z-index: 1; }
.report-cover .title { font-size: 24px; font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; }
.report-cover .meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; opacity: 0.95; margin-bottom: 18px; position: relative; z-index: 1; }
.report-cover .headline-box { background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); border-radius: 12px; padding: 14px 18px; position: relative; z-index: 1; }
.report-cover .hl-label { font-size: 11px; font-weight: 800; opacity: 0.9; margin-bottom: 4px; }
.report-cover .hl-text { font-size: 15px; font-weight: 700; line-height: 1.5; }
.report-cover .hl-red { color: #FFB3B0; font-weight: 800; }
.report-cover .hl-grn { color: #6EE7C5; font-weight: 800; }

/* AI 사고분석 */
.analyzer-tabs { display: flex; gap: 8px; margin-bottom: 20px; }
.analyzer-tab { padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--gray-200); cursor: pointer; flex: 1; transition: all 0.15s; }
.analyzer-tab:hover { border-color: var(--primary); }
.analyzer-tab.active { background: var(--primary-50); border-color: var(--primary); }
.analyzer-tab .ic { font-size: 24px; margin-bottom: 8px; }
.analyzer-tab .nm { font-size: 14px; font-weight: 800; }
.analyzer-tab .dsc { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; }
.analyzer-tab.active .nm { color: var(--primary); }

.analyzer-form { background: #fff; border-radius: 14px; padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field label { font-size: 11px; font-weight: 800; color: var(--gray-500); }
.form-field input, .form-field select, .form-field textarea { background: var(--gray-50); border: 1px solid transparent; border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 700; color: var(--gray-900); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { background: #fff; border-color: var(--primary); }

.result-section { margin-top: 16px; }
.result-card { background: #fff; border-radius: 14px; padding: 18px 20px; margin-bottom: 10px; border-left: 4px solid var(--gray-200); }
.result-card.warn { border-left-color: var(--warning-bg); }
.result-card.danger { border-left-color: var(--danger); }
.result-card.success { border-left-color: var(--success); }
.result-card .head { font-size: 14px; font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.result-card .body { font-size: 13px; color: var(--gray-500); line-height: 1.6; }
.result-card .body strong { color: var(--gray-900); font-weight: 800; }

/* 고객관리 테이블 */
.history-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; }
.history-table thead th { padding: 12px 16px; background: var(--gray-50); text-align: left; font-size: 11px; font-weight: 800; color: var(--gray-400); }
.history-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.history-table tbody tr:hover { background: var(--gray-50); cursor: pointer; }
.history-table tbody tr:last-child td { border-bottom: none; }

/* 자료실 */
.resource-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: #fff; padding: 4px; border-radius: 10px; width: fit-content; }
.resource-tab { padding: 8px 14px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--gray-500); cursor: pointer; }
.resource-tab.active { background: var(--gray-900); color: #fff; }
.resource-tab:hover:not(.active) { background: var(--gray-100); }

.alert-box { background: var(--warning-50); border-left: 4px solid var(--warning-bg); border-radius: 10px; padding: 12px 16px; margin: 12px 0; display: flex; gap: 10px; }
.alert-box .ic { font-size: 18px; }
.alert-box .tt { font-size: 13px; font-weight: 800; color: var(--warning); margin-bottom: 4px; }
.alert-box .bd { font-size: 12px; color: var(--warning); font-weight: 600; line-height: 1.5; }

/* ============= 모달 ============= */
.modal-overlay {
 position: fixed; top: 0; left: 0; right: 0; bottom: 0;
 background: rgba(0,0,0,0.45);
 z-index: 2000;
 display: flex; align-items: center; justify-content: center;
 padding: 16px;
 backdrop-filter: blur(4px);
}
.modal-box {
 background: #fff;
 border-radius: 20px;
 width: 100%;
 max-width: 560px;
 max-height: 90vh;
 overflow-y: auto;
 box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-head {
 padding: 18px 22px;
 border-bottom: 1px solid var(--gray-100);
 display: flex; justify-content: space-between; align-items: center;
}
.modal-head h3 { font-size: 17px; font-weight: 800; }
.modal-close {
 width: 30px; height: 30px;
 background: var(--gray-100);
 border-radius: 50%;
 font-size: 16px;
 color: var(--gray-500);
 display: inline-flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--gray-200); color: var(--gray-900); }
.modal-body { padding: 22px; }
.modal-foot {
 padding: 14px 22px;
 border-top: 1px solid var(--gray-100);
 display: flex; gap: 8px; justify-content: flex-end;
}
.claim-list-mini { max-height: 200px; overflow-y: auto; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--gray-100); }
.claim-list-mini .item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 12px; }
.claim-list-mini .item:hover { background: var(--gray-50); }
.claim-list-mini .l { display: flex; flex-direction: column; }
.claim-list-mini .l .nm { font-weight: 800; font-size: 12px; }
.claim-list-mini .l .sb { font-size: 10px; color: var(--gray-400); font-weight: 600; margin-top: 2px; }
.claim-list-mini .r { font-weight: 800; font-variant-numeric: tabular-nums; }


/* ============= Phase 4 v9 추가 ============= */
/* AI 챗 페이지 — Grok-style */
.ai-shell { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background: var(--gray-50); }
.ai-shell.empty { justify-content: center; align-items: center; padding: 32px 24px; }
.ai-shell.empty .ai-msgs { display: none; }
.ai-shell.chat .ai-hero { display: none; }
.ai-shell.chat { padding: 0; }

.ai-hero { display: flex; flex-direction: column; align-items: center; gap: 28px; width: 100%; max-width: 760px; }
.ai-logo-row { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.ai-logo-mark { width: 48px; height: 48px; border-radius: 14px; background: var(--gray-900); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,0.10); }
.ai-logo-mark svg { width: 28px; height: 28px; }
.ai-logo-text { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--gray-900); line-height: 1; }
.ai-logo-text .accent { color: var(--primary); font-weight: 800; }
.ai-hero-sub { font-size: 14px; color: var(--gray-500); font-weight: 500; margin-top: -16px; letter-spacing: -0.01em; }

.ai-pill {
 width: 100%;
 background: var(--surface);
 border: 1px solid var(--border);
 border-radius: 32px;
 padding: 16px 16px 16px 26px;
 display: flex;
 align-items: center;
 gap: 10px;
 box-shadow: 0 2px 8px rgba(0,0,0,0.04);
 transition: border-color 0.15s, box-shadow 0.15s;
}
.ai-pill:focus-within { border-color: var(--gray-300); box-shadow: 0 6px 24px rgba(0,0,0,0.08); }
.ai-pill input {
 flex: 1; min-width: 0;
 background: transparent; border: none;
 font-size: 16px; font-weight: 500;
 color: var(--gray-900); padding: 6px 0;
 outline: none;
 letter-spacing: -0.01em;
}
.ai-pill input::placeholder { color: var(--gray-400); font-weight: 500; }
.ai-pill .send-orb {
 width: 42px; height: 42px; flex-shrink: 0;
 border-radius: 50%;
 background: var(--gray-900); color: #fff;
 display: inline-flex; align-items: center; justify-content: center;
 transition: transform 0.15s, background 0.15s;
}
.ai-pill .send-orb:hover { background: var(--primary); transform: scale(1.04); }
.ai-pill .send-orb svg { width: 18px; height: 18px; }

.ai-suggested-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.ai-suggested-pills button {
 font-size: 12px; font-weight: 600; padding: 8px 14px;
 background: var(--surface); border: 1px solid var(--border);
 border-radius: 999px; color: var(--gray-600);
 transition: all 0.12s;
}
.ai-suggested-pills button:hover { border-color: var(--primary-100); color: var(--primary); background: var(--primary-50); }

.ai-foot-note { font-size: 11px; color: var(--gray-400); font-weight: 500; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ai-foot-note .led { width: 6px; height: 6px; background: var(--success); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite; }

/* Chat mode */
.ai-shell.chat .ai-msgs { flex: 1; overflow-y: auto; padding: 32px 24px; max-width: 760px; margin: 0 auto; width: 100%; }
.ai-shell.chat .ai-input-wrap { padding: 12px 24px 24px; max-width: 760px; margin: 0 auto; width: 100%; }
.ai-empty { display: none; }

.ai-msg { margin-bottom: 18px; display: flex; gap: 10px; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user .bub { background: var(--gray-900); color: #fff; max-width: 75%; padding: 12px 16px; border-radius: 18px 18px 4px 18px; font-size: 14px; font-weight: 500; line-height: 1.55; }
.ai-msg.assistant .av { width: 30px; height: 30px; border-radius: 8px; background: var(--gray-900); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-msg.assistant .av svg { width: 16px; height: 16px; }
.ai-msg.assistant .body { flex: 1; max-width: 80%; }
.ai-msg.assistant .bub { background: transparent; padding: 4px 0; font-size: 14px; color: var(--gray-900); line-height: 1.65; white-space: pre-line; font-weight: 500; }
.ai-msg.assistant .meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ai-source { font-size: 11px; font-weight: 700; padding: 4px 9px; background: var(--surface); border: 1px solid var(--border); color: var(--gray-600); border-radius: 999px; cursor: pointer; }
.ai-source:hover { background: var(--primary-50); color: var(--primary); border-color: var(--primary-100); }
.ai-loading { display: flex; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; color: var(--gray-400); font-weight: 500; }
.ai-loading .dot { width: 6px; height: 6px; background: var(--gray-400); border-radius: 50%; animation: bounce 1.4s ease-in-out infinite; }
.ai-loading .dot:nth-child(2) { animation-delay: 0.2s; }
.ai-loading .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }verflow: hidden; }
@keyframes bounce { 0%,80%,100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }

/* 검색 드롭다운 */
.search-bar { position: relative; }
.search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--gray-100); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.08); max-height: 480px; overflow-y: auto; z-index: 100; }
.search-dropdown .sd-section { padding: 10px 0; }
.search-dropdown .sd-title { padding: 6px 16px; font-size: 10px; font-weight: 800; color: var(--gray-300); letter-spacing: 0.06em; text-transform: uppercase; }
.search-dropdown .sd-item { padding: 10px 16px; cursor: pointer; display: flex; gap: 10px; align-items: center; transition: background 0.12s; }
.search-dropdown .sd-item:hover { background: var(--gray-50); }
.search-dropdown .sd-icon { width: 28px; height: 28px; border-radius: 8px; background: var(--gray-100); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.search-dropdown .sd-text { flex: 1; min-width: 0; }
.search-dropdown .sd-text .nm { font-size: 13px; font-weight: 800; }
.search-dropdown .sd-text .sn { font-size: 11px; color: var(--gray-400); font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-dropdown .sd-conf { font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 4px; background: var(--gray-900); color: #fff; flex-shrink: 0; }

/* 카톡 큐 패널 (헤더 우측 드롭다운) */
.kq-counter { position: relative; }
.kq-counter .badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--danger); color: #fff; font-size: 9px; font-weight: 800; border-radius: 999px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.kq-panel { position: fixed; top: 60px; right: 24px; width: 380px; max-height: 520px; background: #fff; border: 1px solid var(--gray-100); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.12); z-index: 1100; display: none; flex-direction: column; overflow: hidden; }
.kq-panel.open { display: flex; }
.kq-panel header { padding: 14px 18px; border-bottom: 1px solid var(--gray-100); display: flex; justify-content: space-between; align-items: center; }
.kq-panel header h4 { font-size: 14px; font-weight: 800; }
.kq-list { overflow-y: auto; flex: 1; }
.kq-item { padding: 12px 18px; border-bottom: 1px solid var(--gray-50); display: flex; gap: 10px; align-items: flex-start; }
.kq-item:last-child { border-bottom: none; }
.kq-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.kq-status-dot.pending { background: var(--gray-300); }
.kq-status-dot.sending { background: var(--warning-bg); animation: pulse 1.2s ease-in-out infinite; }
.kq-status-dot.success { background: var(--success); }
.kq-status-dot.failed { background: var(--danger); }
.kq-item .info { flex: 1; min-width: 0; }
.kq-item .info .who { font-size: 12px; font-weight: 800; }
.kq-item .info .msg { font-size: 11px; color: var(--gray-500); font-weight: 600; margin-top: 2px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kq-item .info .meta { font-size: 10px; color: var(--gray-400); font-weight: 700; margin-top: 4px; }
.kq-retry { font-size: 10px; font-weight: 800; color: var(--primary); padding: 3px 8px; border-radius: 5px; background: var(--primary-50); flex-shrink: 0; }
.kq-retry:hover { background: var(--primary); color: #fff; }
.kq-empty { padding: 32px 16px; text-align: center; font-size: 12px; color: var(--gray-400); font-weight: 700; }

/* 반응형 */
@media (max-width: 900px) {
 .sidebar { display: none; }
 .pane { padding: 16px; }
 .search-bar { display: none; }
 .crumbs { font-size: 12px; }
 .two-col, .scenario-grid { grid-template-columns: 1fr; }
 .mapping { grid-template-columns: 1fr; }
 .mapping-arrow { transform: rotate(90deg); }
 .scenario-arrow { transform: rotate(90deg); }
 .analyzer-tabs { flex-direction: column; }
}