/* Prime Asset - Insure Elevate Style Design */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');

* {
  font-family: 'Geist', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  box-sizing: border-box;
}

:root {
  --background: hsl(210, 40%, 98%);
  --foreground: hsl(222, 47%, 11%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 47%, 11%);
  --primary: hsl(243, 75%, 59%);
  --primary-hover: hsl(243, 75%, 50%);
  --primary-light: hsl(243, 75%, 95%);
  --primary-glow: hsl(243, 75%, 70%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(215, 28%, 17%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(215, 20%, 96%);
  --muted-foreground: hsl(215, 16%, 47%);
  --accent: hsl(243, 75%, 95%);
  --accent-foreground: hsl(243, 75%, 40%);
  --border: hsl(215, 20%, 91%);
  --radius: 0.75rem;
  --shadow-card: 0 0 0 1px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-elevated: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-primary: 0 8px 24px rgba(99,102,241,0.25);
  --green: hsl(142, 71%, 45%);
  --green-light: hsl(142, 71%, 95%);
  --green-dark: hsl(142, 71%, 25%);
  --red: hsl(0, 84%, 60%);
  --red-light: hsl(0, 84%, 95%);
  --red-dark: hsl(0, 84%, 30%);
  --yellow: hsl(38, 92%, 50%);
  --yellow-light: hsl(38, 100%, 95%);
  --yellow-dark: hsl(38, 92%, 30%);
}

/* === PC 전용 고정 레이아웃 (2026-07-28) ===
   설계사 작업화면(index.html, body.pc-fixed)은 모니터 크기와 무관하게 1280px 고정 폭으로 렌더한다.
   화면이 좁으면 레이아웃이 바뀌는 대신 가로 스크롤이 생긴다.
   아래 @media 들은 전부 (max|min)-width: 0px 로 중화되어 있고, 원래 값은 각 줄 주석에 남겨두었다.
   모바일 대응은 별도 앱에서 담당한다. */
body.pc-fixed {
  min-width: 1280px;
}
/* 글 편집·메시지 팝업 창은 960px 로 열리므로 별도 고정 폭 (본 창과 동일하게 크기 무관 일정) */
body.pc-fixed.popup-mode {
  min-width: 960px;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* === Utility classes === */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
}

.gradient-dark {
  background: linear-gradient(135deg, #0f1729, #24224f);
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card-shadow {
  box-shadow: var(--shadow-card);
}

.elevated-shadow {
  box-shadow: var(--shadow-elevated);
}

.primary-shadow {
  box-shadow: var(--shadow-primary);
}

.inner-ring {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* === App Layout === */
#app:has(.left-sidebar) {
  display: flex;
  min-height: 100vh;
}

@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  #app:has(.left-sidebar) {
    flex-direction: column;
  }
}

/* === Left Sidebar === */
.left-sidebar {
  width: 240px;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
  background: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 50;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-header {
  padding: 20px 16px 12px;
  border-bottom: 1px solid var(--border);
}

.sidebar-logo {
  font-size: 20px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.5px;
  cursor: pointer;
  margin-bottom: 12px;
}

.sidebar-logo span {
  color: var(--primary);
}

.sidebar-229-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.3px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
  transition: opacity 0.15s;
}

.sidebar-229-link:hover {
  opacity: 0.9;
  color: white;
}

.sidebar-nav {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-section + .sidebar-section {
  margin-top: 14px;
}

.sidebar-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  opacity: 0.65;
  padding: 4px 14px;
  text-transform: uppercase;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  color: var(--muted-foreground);
}

.sidebar-item:hover {
  color: var(--foreground);
  background: rgba(0, 0, 0, 0.04);
}

.sidebar-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  color: var(--primary-foreground);
  box-shadow: var(--shadow-primary);
}

/* 새 글 알림 NEW 배지 — 눈에 띄는 빨간 배지, 우측 정렬 + 살짝 깜빡임 */
.sidebar-new-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1;
  color: #fff;
  background: #ef4444;
  border-radius: 9px;
  padding: 3px 6px;
  box-shadow: 0 1px 4px rgba(239, 68, 68, 0.5);
  animation: navNewPulse 1.6s ease-in-out infinite;
}
.sidebar-item.active .sidebar-new-badge {
  background: #fff;
  color: #dc2626;
  box-shadow: none;
}
@keyframes navNewPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: 0.85; }
}

.sidebar-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-item-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border);
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.sidebar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0f1729, #24224f);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.sidebar-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
}

.sidebar-user-role {
  font-size: 11px;
  color: var(--muted-foreground);
}

.sidebar-logout {
  width: 100%;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.sidebar-logout:hover {
  background: var(--muted);
  color: var(--foreground);
  border-color: #cbd5e1;
}

/* === Mobile Top Bar === */
.mobile-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  height: 56px;
  align-items: center;
  justify-content: space-between;
}

.mobile-topbar-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -0.5px;
  cursor: pointer;
}

.mobile-topbar-logo span {
  color: var(--primary);
}

/* Mobile hamburger */
.mobile-menu-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--foreground);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: 60;
}

.mobile-nav-overlay.open {
  display: block;
}

.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background: var(--card);
  z-index: 70;
  box-shadow: var(--shadow-elevated);
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.32, 1);
}

.mobile-nav-drawer.open {
  display: flex;
  transform: translateX(0);
}

.mobile-nav-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-nav-items {
  padding: 12px;
  flex: 1;
  overflow-y: auto;
}

.mobile-nav-items .sidebar-item {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 2px;
  font-size: 14px;
}

.mobile-nav-items .sidebar-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  color: white;
  box-shadow: var(--shadow-primary);
}

.mobile-nav-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}

/* === Main Content === */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 32px 24px;
  min-height: 100vh;
}

body.popup-mode .main-content {
  min-height: 100vh;
  padding: 20px;
}

body.popup-mode .messages-grid {
  grid-template-columns: 1fr;
}

body.popup-mode .messages-grid-right {
  position: static;
}

body.popup-mode #msg-preview-wrapper {
  max-width: 100%;
  margin: 0 auto;
}

.page-header {
  margin-bottom: 18px;
}

.page-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--foreground);
  margin: 0;
  letter-spacing: -0.5px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-top: 4px;
  font-weight: 400;
}

/* === Cards === */
.card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 16px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-elevated);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
}

/* === Summary Cards === */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

@media (min-width: 0px) /* PC고정: 원래 min-width 768px */ {
  .summary-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 0px) /* PC고정: 원래 min-width 1200px */ {
  .summary-cards {
    grid-template-columns: repeat(6, 1fr);
  }
}

.summary-card {
  background: var(--card);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
  border: none;
}

.summary-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

.summary-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.summary-card-icon svg {
  width: 20px;
  height: 20px;
}

.summary-card.blue .summary-card-icon { background: var(--primary-light); color: var(--primary); }
.summary-card.green .summary-card-icon { background: var(--green-light); color: var(--green); }
.summary-card.yellow .summary-card-icon { background: var(--yellow-light); color: var(--yellow); }
.summary-card.red .summary-card-icon { background: var(--red-light); color: var(--red); }

.summary-card-label {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 6px;
  font-weight: 500;
}

.summary-card-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: -1px;
  line-height: 1.2;
}

.summary-card-sub {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 6px;
  font-weight: 400;
}

/* Remove old left-border style */
.summary-card.blue,
.summary-card.green,
.summary-card.yellow,
.summary-card.red {
  border-left: none;
}

/* === Table === */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: transparent;
}

.data-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid hsl(215, 20%, 95%);
  color: var(--foreground);
}

.data-table tr:hover td {
  background-color: var(--accent);
}

.data-table tr:last-child td {
  border-bottom: none;
}

/* === Status Badge === */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
  border: none;
}

.status-badge.before {
  background: #4b5563;
  color: #fff;
}

.status-badge.ing {
  background: #ea580c;
  color: #fff;
  animation: badge-pulse 2s ease-in-out infinite;
}

.status-badge.signed {
  background: #1d4ed8;
  color: #fff;
}

.status-badge.done {
  background: #000;
  color: #fff;
}

.status-badge.new {
  background: var(--yellow-light);
  color: var(--yellow);
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.25); }
  50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0); }
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-glow));
  color: white;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--muted);
  border-color: #cbd5e1;
}

.btn-danger {
  background: var(--red);
  color: white;
}

.btn-danger:hover {
  opacity: 0.9;
}

.btn-success {
  background: var(--green);
  color: white;
}

.btn-success:hover {
  opacity: 0.9;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 10px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 15px;
  border-radius: 14px;
}

/* === Forms === */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  transition: all 0.2s ease;
  box-sizing: border-box;
  background: var(--muted);
  color: var(--foreground);
}

.form-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: var(--card);
}

.form-input::placeholder {
  color: #94a3b8;
}

textarea.form-input {
  resize: vertical;
  min-height: 80px;
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

/* === Modal === */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: var(--card);
  border-radius: 20px;
  padding: 28px;
  width: 90%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.16);
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.32, 1);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.3px;
}

.modal-close {
  background: var(--muted);
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted-foreground);
  padding: 6px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: var(--border);
  color: var(--foreground);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* === Search bar === */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.search-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 14px;
  background: var(--muted);
  color: var(--foreground);
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
  background: var(--card);
}

.search-input::placeholder {
  color: #94a3b8;
}

/* === Tabs === */
.tabs {
  display: flex;
  gap: 4px;
  background: var(--muted);
  padding: 4px;
  border-radius: 12px;
  margin-bottom: 22px;
}

.tab {
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s ease;
  border-bottom: none;
  margin-bottom: 0;
}

.tab:hover {
  color: var(--foreground);
}

.tab.active {
  background: var(--card);
  color: var(--foreground);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* === Mobile Preview === */
.mobile-preview-frame {
  width: 375px;
  height: 667px;
  border: 3px solid var(--foreground);
  border-radius: 40px;
  overflow: hidden;
  background: white;
  margin: 0 auto;
  box-shadow: var(--shadow-elevated), 0 0 0 8px var(--muted);
  position: relative;
}

.mobile-preview-frame::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: var(--foreground);
  border-radius: 0 0 16px 16px;
  z-index: 1;
}

.mobile-preview-content {
  padding: 40px 20px 20px;
  font-size: 14px;
  line-height: 1.6;
  overflow-y: auto;
  height: 100%;
}

/* === Alert boxes === */
.alert-box {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  margin-bottom: 12px;
  font-weight: 500;
  border: none;
}

.alert-info {
  background: var(--primary-light);
  color: var(--accent-foreground);
}

.alert-success {
  background: var(--green-light);
  color: var(--green-dark);
}

.alert-warning {
  background: var(--yellow-light);
  color: var(--yellow-dark);
}

.alert-error {
  background: var(--red-light);
  color: var(--red-dark);
}

/* === Toast === */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 200;
}

.toast {
  padding: 14px 22px;
  border-radius: 14px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  box-shadow: var(--shadow-elevated);
  animation: toastIn 0.4s cubic-bezier(0.16, 1, 0.32, 1);
}

.toast.success { background: var(--green); }
.toast.error { background: var(--red); }
.toast.info { background: var(--primary); }

@keyframes toastIn {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}

/* === Autosave indicator === */
.autosave-indicator {
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 4px;
}

.autosave-indicator.saved { color: var(--green); }

/* === Checkbox === */
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  border-radius: 4px;
}

/* === Tag chips === */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--primary-light);
  color: var(--primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.chip-remove {
  cursor: pointer;
  font-size: 14px;
  opacity: 0.7;
  display: flex;
  align-items: center;
}

.chip-remove:hover { opacity: 1; }

/* === Grid layouts === */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* === Consultation split layout === */
.consultation-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 24px;
  /* 넓은 화면에서 풀폭으로 퍼지지 않게 폭 제한 + 가운데 정렬 (간결한 느낌) */
  max-width: 1180px;
  margin: 0 auto;
}
/* 그리드 아이템이 내부 콘텐츠(예: Quill 툴바) 최소폭 때문에 넘쳐 옆 칸과 겹치는 것 방지 */
.consultation-layout > * {
  min-width: 0;
}

/* 제안서 에디터: 블록 추가 도크 (좌측 폼과 핸드폰 미리보기 사이, 스크롤 따라오는 sticky 팝업) */
.proposal-block-dock { display: none; }
.proposal-block-dock-inner {
  position: sticky;
  top: 24px;
  background: #faf5ff;
  border: 1.5px dashed #ddd6fe;
  border-radius: 12px;
  padding: 10px 7px;
  box-shadow: 0 6px 20px rgba(124,58,237,0.12);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.proposal-block-dock-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #7c3aed;
  margin-bottom: 10px;
}
.proposal-block-dock-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.proposal-block-dock-buttons .btn {
  width: 100%;
  justify-content: flex-start;
  font-size: 11px;
  padding: 6px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.3;
}
/* 넓은 화면: 3열(폼 / 도크 / 핸드폰) — 도크를 좁혀 본문 작성칸을 넓게 + 하단 인라인 블록버튼 숨김 */
@media (min-width: 0px) /* PC고정: 원래 min-width 1280px */ {
  .consultation-layout { grid-template-columns: 1fr 148px 420px; gap: 20px; max-width: 1340px; }
  .proposal-block-dock { display: block; }
  .block-add-inline { display: none; }
}

/* === 제안서 작성: 심플·간결 (카드 여백 축소) === */
body[data-page="consultation"] .card {
  padding: 13px 16px;
  margin-bottom: 10px;
}
body[data-page="consultation"] .card-title { font-size: 14px; }
body[data-page="consultation"] .form-group { margin-bottom: 12px; }
body[data-page="consultation"] .form-label { font-size: 12px; margin-bottom: 4px; }
body[data-page="consultation"] .form-input { padding: 8px 12px; font-size: 13px; }

.dashboard-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--border);
}

.dashboard-recent-item-info {
  flex: 1;
  min-width: 0;
}

.dashboard-recent-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Empty state === */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted-foreground);
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.empty-state-text {
  font-size: 15px;
  margin-bottom: 16px;
  font-weight: 500;
}

/* === Loading === */
.loading-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* === Login page === */
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0f1729, #24224f);
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -40%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.login-container::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 70%;
  height: 70%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.login-card {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 44px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 1;
}

.login-title {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--foreground);
  margin-bottom: 6px;
  letter-spacing: -0.5px;
}

.login-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 36px;
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* === Template preview === */
.template-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--card);
}

.template-card:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15);
}

.template-card.selected {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.15);
}

/* === Step indicator === */
.steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.step-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: var(--muted);
  color: var(--muted-foreground);
  transition: all 0.3s ease;
}

.step.active .step-circle {
  background: var(--primary);
  color: white;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.step.completed .step-circle {
  background: var(--green);
  color: white;
}

.step-label {
  font-size: 13px;
  color: var(--muted-foreground);
  font-weight: 500;
}

.step.active .step-label {
  color: var(--primary);
  font-weight: 600;
}

.step-line {
  width: 40px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
}

/* === Misc === */
a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-hover);
}

.main-content > * {
  animation: fadeInUp 0.3s ease;
}

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

::selection {
  background: rgba(99, 102, 241, 0.2);
  color: var(--foreground);
}

/* === Layout helper classes === */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* 대시보드 가운데 섹션: 캘린더(가변) + 오늘일정/공지 사이드(고정폭) */
.dash-mid-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 16px;
  margin-bottom: 16px;
  align-items: stretch;
  /* 캘린더 + 할일/공지 미들 섹션이 한 화면(뷰포트) 안에 담기도록 높이 제한.
     (위쪽 요약 스트립 + main-content 패딩 ~150px 제외) */
  height: calc(100vh - 150px);
  min-height: 480px;
}
/* 왼쪽 캘린더 카드: 내부를 세로 플렉스로 만들어 그리드가 남은 높이를 채우게 함 */
.dash-mid-grid > .card:first-child {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#dash-mini-calendar {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 셀이 캘린더 메뉴와 같은 높이(최소 120px)를 유지하므로, 카드보다 길어지면 위젯 안에서 스크롤 */
  overflow-y: auto;
}
#dash-mini-calendar .mini-cal-grid {
  flex: 1;
  min-height: 0;
}
#dash-mini-calendar .dash-week-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 0px) /* PC고정: 원래 max-width 1200px */ {
  .dash-mid-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 0px) /* PC고정: 원래 max-width 900px */ {
  .dash-mid-grid { grid-template-columns: 1fr; }
  /* 1열로 접히면 화면 높이 제한 해제: 두 카드가 자연스러운 높이로 쌓이도록 */
  .dash-mid-grid { height: auto; min-height: 0; }
  .dash-mid-grid > .card:first-child { overflow: visible; }
  /* 1열로 접히면 사이드 칸 높이를 직접 지정 (내부가 절대배치라 높이 필요) */
  .dash-side-col { height: 560px; }
}

/* 미니 캘린더(대시보드 월간): 캘린더 메뉴(.cal-grid / .cal-cell)와 셀 비율을 동일하게 맞춘다.
   - 열: 컨테이너를 꽉 채우는 7등분 (max-width 제한 없음 — 캘린더 페이지와 동일)
   - 행: minmax(120px, 1fr) → 카드 높이에 눌려 납작해지지 않고, 넘치면 위젯이 스크롤 */
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  width: 100%;
}
.mini-cal-cell {
  min-height: 0;
  padding: 4px 6px;   /* .cal-cell 과 동일 */
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  overflow: hidden;       /* 셀이 늘어나지 않고, 일정 많으면 내부 스크롤 */
  display: flex;
  flex-direction: column;
}
/* 토요일 열은 오른쪽 테두리 생략 (기존 동작 유지) */
.mini-cal-cell.is-sat { border-right: none; }
/* 일정 목록: 셀의 남은 높이를 채우고, 넘치면 셀 내부에서 스크롤 */
.mini-cal-events {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.mini-cal-events::-webkit-scrollbar { width: 4px; }
.mini-cal-events::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ===== 대시보드 미니 주간 뷰 ===== */
.dash-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.dash-week-col {
  /* aspect-ratio는 인라인으로 그 주가 속한 달의 줄 수에 맞춰 지정 (월간과 높이 동일) */
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background .12s;
  overflow: hidden;
}
.dash-week-col:hover { background: var(--muted); }
.dash-week-head {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 5px;
  border-bottom: 1px solid var(--border);
}
.dash-week-head.is-today { background: #F0F9FF; }
.dash-week-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 3px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
}
/* 모바일: 세로로 너무 길어지지 않게 aspect-ratio 해제 후 고정 높이 */
@media (max-width: 0px) /* PC고정: 원래 max-width 900px */ {
  .dash-week-col { aspect-ratio: auto !important; min-height: 96px; }
}

/* 대시보드 주간 뷰: 전체 캘린더와 동일한 시간 그리드(.calw)를 재사용하되 위젯 높이만 축소 */
/* 대시보드 미니 주간: 넉넉한 칸(고정 48px) + 남는 카드 공간에 맞춰 세로 스크롤 (07~19시 전부 스크롤로 접근, 잘림 없음) */
.dash-calw { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
.dash-calw .calw-scroll { flex: 1 1 0; min-height: 0; max-height: none; overflow-y: auto; padding: 8px 0; }
/* 1열(≤900px) auto높이 모드: flex 풀고 콘텐츠 높이로 쌓이게 → 07~19시 전체가 그대로 노출 */
@media (max-width: 0px) /* PC고정: 원래 max-width 900px */ {
  #dash-mini-calendar { flex: none; }
  .dash-calw { flex: none; }
  .dash-calw .calw-scroll { flex: none; overflow: visible; }
}

.messages-grid {
  display: grid;
  /* 좌: 입력 카드(세로 일렬) / 우: 알림톡 커스텀 미리보기 — 가운데 정렬 */
  grid-template-columns: minmax(0, 460px) 380px;
  justify-content: center;
  align-items: start;
  gap: 24px;
}

/* 입력 카드 3개(고객정보·알림유형선택·항목상세)를 세로 일렬로 */
.messages-form-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.messages-grid-right {
  position: sticky;
  top: 24px;
  align-self: start;
}

@media (max-width: 0px) /* PC고정: 원래 max-width 1280px */ {
  .messages-grid {
    grid-template-columns: 1fr;
  }

  .messages-grid-right {
    position: static;
  }
}

.page-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: start;
}

.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* === Responsive === */
@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  .left-sidebar {
    display: none;
  }

  .mobile-topbar {
    display: flex;
  }

  .main-content {
    padding: 20px 12px;
    min-height: calc(100vh - 56px);
  }

  .summary-cards {
    grid-template-columns: 1fr 1fr;
  }

  .consultation-layout {
    grid-template-columns: 1fr !important;
  }

  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }

  .modal {
    width: 95%;
    margin: 0 auto;
    padding: 20px;
  }

  /* Dashboard grid: stack vertically */
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  /* Dashboard recent items */
  .dashboard-recent-item {
    flex-wrap: wrap;
  }

  .dashboard-recent-item-actions {
    width: 100%;
    margin-top: 4px;
    padding-left: 44px;
  }

  /* Messages grid: stack vertically */
  .messages-grid {
    grid-template-columns: 1fr;
  }

  .messages-grid-right {
    position: static;
  }

  /* Page header: stack and wrap */
  .page-header-flex {
    flex-direction: column;
    gap: 12px;
  }

  /* Editor header: stack */
  .editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .editor-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  /* Page title size */
  .page-title {
    font-size: 20px;
  }

  /* Table responsive: horizontal scroll */
  .table-responsive {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .table-responsive .data-table {
    min-width: 640px;
  }

  /* Card padding reduction */
  .card {
    padding: 12px;
  }

  /* Search bar stack */
  .search-bar {
    flex-direction: column;
  }

  .search-bar select.form-input {
    width: 100%;
  }

  /* Buttons: full width on mobile */
  .page-header-flex .btn-primary,
  .page-header-flex .btn-secondary {
    width: 100%;
    justify-content: center;
  }

  /* Summary card value size */
  .summary-card-value {
    font-size: 20px;
  }

  /* Login card mobile */
  .login-card {
    padding: 28px 20px;
    margin: 0 16px;
  }

  /* Toast position */
  .toast-container {
    left: 12px;
    right: 12px;
    top: 12px;
  }

  .toast {
    font-size: 13px;
    padding: 12px 16px;
  }

  /* Step indicators */
  .steps {
    gap: 4px;
  }

  .step-label {
    display: none;
  }

  .step-line {
    width: 20px;
  }

  /* Modal responsive */
  .modal-footer {
    flex-direction: column;
  }

  .modal-footer .btn {
    width: 100%;
    justify-content: center;
  }

  /* Mobile preview frame */
  .mobile-preview-frame {
    width: 100%;
    max-width: 375px;
    height: auto;
    min-height: 500px;
  }

  /* Settings tab nav scroll */
  .settings-tab-nav {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .settings-tab-nav::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 0px) /* PC고정: 원래 max-width 480px */ {
  .summary-cards {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 16px 10px;
  }
}

@media (max-width: 0px) /* PC고정: 원래 max-width 1024px */ {
  .consultation-layout {
    grid-template-columns: 1fr !important;
  }

  .messages-grid {
    grid-template-columns: 1fr;
  }

  .messages-grid-right {
    position: static;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* === Customer List: Mobile Card View === */
.customer-card-mobile {
  display: none;
}

.customer-card-item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.customer-card-item:last-child {
  border-bottom: none;
}

.customer-card-item:active {
  background: var(--muted);
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.customer-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.customer-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #4338ca;
  flex-shrink: 0;
}

.customer-card-info {
  flex: 1;
  min-width: 0;
}

.customer-card-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
}

.customer-card-phone {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 1px;
}

.customer-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  padding-left: 50px;
  font-size: 12px;
  color: var(--muted-foreground);
}

.customer-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.customer-card-meta span::before {
  content: '';
  display: none;
}

.customer-card-meta span + span::before {
  content: '·';
  display: inline;
  margin-right: 0;
  color: var(--border);
}

.customer-card-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  padding-left: 50px;
}

@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  .customer-table-desktop {
    display: none;
  }

  .customer-card-mobile {
    display: block;
  }
}

/* 고객목록 PC 전용 와이드 레이아웃 - 관리 버튼이 한 줄에 들어가도록 */
@media (min-width: 0px) /* PC고정: 원래 min-width 1025px */ {
  .main-content:has(.customer-table-desktop) {
    max-width: 1720px;
  }
  .customer-table-desktop .data-table td:last-child > div {
    flex-wrap: nowrap;
    white-space: nowrap;
  }
}

/* === Info Page === */
.infopage-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.infopage-cat-filter-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  flex: 1;
  min-width: 0;
}
@media (max-width: 0px) /* PC고정: 원래 max-width 1024px */ {
  .infopage-cat-filter-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (max-width: 0px) /* PC고정: 원래 max-width 640px */ {
  .infopage-cat-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Info Page - Search & Advanced Filter */
.infopage-search-wrap {
  margin-bottom: 16px;
}
.infopage-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.infopage-search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}
.infopage-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.infopage-search-input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.infopage-search-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.infopage-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.infopage-search-clear:hover {
  background: #cbd5e1;
}
.infopage-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.infopage-filter-toggle:hover {
  border-color: #cbd5e1;
}
.infopage-filter-toggle.active {
  border-color: #3b82f6;
  color: #3b82f6;
  background: #eff6ff;
}
.infopage-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #3b82f6;
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.infopage-filter-reset {
  padding: 9px 14px;
  border: 1px solid #fecaca;
  border-radius: 10px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.infopage-filter-reset:hover {
  background: #fee2e2;
}
.infopage-filter-panel {
  margin-top: 10px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.infopage-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.infopage-filter-label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  width: 60px;
  flex-shrink: 0;
}
.infopage-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.infopage-filter-chip {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: white;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.infopage-filter-chip:hover {
  border-color: #cbd5e1;
}
.infopage-filter-chip.active {
  border-color: #3b82f6;
  background: #3b82f6;
  color: white;
}
.infopage-filter-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.infopage-filter-date {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  color: #475569;
  background: white;
}
.infopage-filter-date:focus {
  outline: none;
  border-color: #3b82f6;
}
@media (max-width: 0px) /* PC고정: 원래 max-width 640px */ {
  .infopage-filter-label {
    width: 100%;
  }
}

/* Hashtag input (editor) */
.tags-input-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: white;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.tags-input-wrap:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.tags-chips {
  display: contents;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 4px 10px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
}
.tag-chip button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: rgba(67,56,202,0.15);
  color: #4338ca;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.tag-chip button:hover {
  background: rgba(67,56,202,0.3);
}
.tags-input {
  flex: 1;
  min-width: 100px;
  border: none;
  outline: none;
  padding: 4px 2px;
  font-size: 13px;
  background: transparent;
}

/* Hashtag badges (cards/list/article) */
.tag-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.tag-badge {
  display: inline-block;
  padding: 2px 9px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.tag-badge:hover {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}
.tag-badge.active {
  background: #3b82f6;
  color: white;
  border-color: #3b82f6;
}

.infopage-view-toggle {
  display: flex;
  background: var(--muted);
  border-radius: 10px;
  padding: 3px;
}

.infopage-view-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.2s;
  background: transparent;
  color: var(--muted-foreground);
  box-shadow: none;
}

.infopage-view-btn.active {
  background: var(--card);
  color: var(--foreground);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Card View */
/* Category horizontal scroll sections */
.infopage-cat-section {
  margin-bottom: 24px;
}
.infopage-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.infopage-cat-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}
.infopage-cat-more {
  background: none;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s;
}
.infopage-cat-more:hover {
  background: var(--primary-light);
}
.infopage-hscroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.infopage-hscroll-wrap::-webkit-scrollbar {
  height: 4px;
}
.infopage-hscroll-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.infopage-hscroll {
  display: flex;
  gap: 14px;
}
.infopage-hscroll-card {
  flex-shrink: 0;
  width: 200px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  overflow: hidden;
}
.infopage-hscroll-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}
.infopage-hscroll-thumb {
  width: 100%;
  height: 112px;
  overflow: hidden;
  background: var(--muted);
}
.infopage-hscroll-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.infopage-hscroll-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.infopage-hscroll-title {
  padding: 10px 12px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.infopage-hscroll-desc {
  padding: 0 12px 10px;
  font-size: 11px;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.infopage-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.infopage-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}

.infopage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.infopage-card-thumb {
  width: 100%;
  padding-top: 56%;
  position: relative;
  overflow: hidden;
  background: #f1f5f9;
}

.infopage-card-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infopage-card-thumb-empty {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.infopage-card-thumb-empty span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 32px;
}

.infopage-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.infopage-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.4;
  margin-bottom: 6px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.infopage-card-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-bottom: 10px;
  line-height: 1.6;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.infopage-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 날짜+버튼이 카드 폭을 넘으면 잘리지 않고 줄바꿈 */
  flex-wrap: wrap;
  gap: 6px 8px;
}

.infopage-card-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
}

.infopage-card-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* List View */
.infopage-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

/* ===== 리스트 뷰 — 마스터/디테일(좌측 카테고리 · 우측 글) ===== */
.infopage-list.infopage-list-split {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.infopage-list-side {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.infopage-list-side-title {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 10px 6px;
}
.infopage-list-side-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: all 0.15s;
  width: 100%;
}
.infopage-list-side-item:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.infopage-list-side-item.infopage-list-side-active {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #1e40af;
  font-weight: 700;
}
.infopage-list-side-item.infopage-list-side-active .infopage-list-side-icon {
  color: #2563eb;
}
.infopage-list-side-icon {
  flex-shrink: 0;
  color: #94a3b8;
}
.infopage-list-side-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.infopage-list-side-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #64748b;
  min-width: 24px;
  text-align: center;
}
.infopage-list-side-active .infopage-list-side-count {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}
/* 즐겨찾기/공유 글 활성 색상 */
.infopage-list-side-fav.infopage-list-side-active {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #b45309;
}
.infopage-list-side-fav.infopage-list-side-active .infopage-list-side-icon {
  color: #f59e0b;
  fill: #f59e0b;
}
.infopage-list-side-fav.infopage-list-side-active .infopage-list-side-count {
  background: #f59e0b;
  border-color: #f59e0b;
}
.infopage-list-side-shared.infopage-list-side-active {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  color: #0369a1;
}
.infopage-list-side-shared.infopage-list-side-active .infopage-list-side-icon {
  color: #0284c7;
}
.infopage-list-side-shared.infopage-list-side-active .infopage-list-side-count {
  background: #0284c7;
  border-color: #0284c7;
}
.infopage-list-side-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 6px 4px;
}

.infopage-list-detail {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.infopage-list-detail-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, #f8fafc, #ffffff);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.infopage-list-detail-title {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.3px;
}
.infopage-list-detail-count {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  background: #eff6ff;
  color: #2563eb;
  border-radius: 12px;
}
.infopage-list-detail-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 20px;
}
.infopage-list-detail-items .infopage-list-detail-empty {
  grid-column: 1 / -1;
  padding: 40px 20px;
}
.infopage-list-detail-items .infopage-list-item {
  border-bottom: 1px solid hsl(215, 20%, 97%);
}
.infopage-list-detail-items .infopage-list-item:last-child {
  border-bottom: none;
}
.infopage-list-detail-cat-section {
  border-bottom: 1px solid var(--border);
}
.infopage-list-detail-cat-section:last-child {
  border-bottom: none;
}
.infopage-list-detail-cat-header {
  padding: 12px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.infopage-list-detail-cat-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.infopage-list-detail-cat-count {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}
.infopage-list-detail-empty {
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  .infopage-list.infopage-list-split {
    grid-template-columns: 1fr;
  }
  .infopage-list-side {
    position: static;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
  }
  .infopage-list-side-title { display: none; }
  .infopage-list-side-divider { display: none; }
  .infopage-list-side-item {
    flex: 0 0 auto;
    width: auto;
    padding: 6px 12px;
    font-size: 12px;
  }
}

.infopage-list-cat-section {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.infopage-list-cat-section-header {
  padding: 12px 16px;
  background: var(--muted);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.infopage-list-cat-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.infopage-list-cat-section-count {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
}

.infopage-list-cat-grid {
  display: flex;
  flex-direction: column;
}

.infopage-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid hsl(215, 20%, 97%);
  transition: background 0.15s;
}

.infopage-list-cat-grid .infopage-list-item:last-child {
  border-bottom: none;
}

.infopage-list-item:hover {
  background: var(--muted);
}

.infopage-list-thumb {
  width: 120px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
}

.infopage-list-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.infopage-list-thumb-empty {
  background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
  display: flex;
  align-items: center;
  justify-content: center;
}

.infopage-list-thumb-empty span {
  font-size: 28px;
}

.infopage-list-content {
  flex: 1;
  /* 너무 좁아지면 버튼 줄이 아래로 내려가도록 최소 폭 확보 */
  min-width: min(240px, 100%);
}

.infopage-list-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.infopage-list-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.5;
}

.infopage-list-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
  justify-content: flex-end;
}

.infopage-list-link {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ── 매거진형 항목 (전체 보기 / 이번달 보험이슈 스타일) ── */
.infopage-mag-item {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.infopage-mag-item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 14px rgba(67, 56, 202, 0.08);
  transform: translateY(-1px);
}
.infopage-mag-thumb {
  width: 112px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #f1f5f9;
}
.infopage-mag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 썸네일 전체가 잘리지 않고 다 보이도록 */
  display: block;
}
.infopage-mag-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.infopage-mag-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.infopage-mag-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.infopage-mag-cat {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  color: #4338ca;
  border: 1px solid #c7d2fe;
  white-space: nowrap;
}
.infopage-mag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.infopage-mag-badge-blog {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.infopage-mag-badge-shared {
  background: #f0f9ff;
  color: #0284c7;
  border: 1px solid #bae6fd;
}
.infopage-mag-date {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  flex-shrink: 0;
}
.infopage-mag-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.4;
  letter-spacing: -0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.infopage-mag-desc {
  font-size: 13px;
  color: var(--muted-foreground);
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.infopage-mag-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.infopage-mag-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.infopage-mag-tag {
  font-size: 11px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px 7px;
}
.infopage-mag-foot .infopage-list-actions {
  margin-left: auto;
}

@media (max-width: 0px) /* PC고정: 원래 max-width 860px */ {
  .infopage-list-detail-items {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 0px) /* PC고정: 원래 max-width 640px */ {
  .infopage-list-detail-items {
    padding: 12px;
    gap: 10px;
  }
  .infopage-mag-item {
    padding: 12px 14px;
    gap: 10px;
  }
  .infopage-mag-thumb {
    width: 84px;
    height: 64px;
  }
  .infopage-mag-title { font-size: 14px; }
}

/* Info Page Mobile */
@media (max-width: 0px) /* PC고정: 원래 max-width 1024px */ {
  .infopage-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .infopage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  .infopage-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .infopage-card {
    flex-direction: row;
    border-radius: 14px;
  }

  .infopage-card-thumb {
    width: 110px;
    min-width: 110px;
    padding-top: 0;
    height: auto;
    min-height: 110px;
  }

  .infopage-card-body {
    padding: 12px 14px;
  }

  .infopage-card-title {
    font-size: 14px;
    -webkit-line-clamp: 2;
    margin-bottom: 4px;
  }

  .infopage-card-desc {
    font-size: 12px;
    margin-bottom: 8px;
    -webkit-line-clamp: 2;
  }

  .infopage-card-footer {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* List view mobile */
  .infopage-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .infopage-list-cat-section-header {
    padding: 12px 14px;
  }

  .infopage-list-item {
    padding: 14px 16px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .infopage-list-content {
    flex: 1;
    min-width: 100%;
  }

  .infopage-list-title {
    white-space: normal;
    font-size: 14px;
    line-height: 1.4;
  }

  .infopage-list-desc {
    white-space: normal;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .infopage-list-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  /* Page header actions */
  .infopage-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 0px) /* PC고정: 원래 max-width 480px */ {
  .infopage-card {
    flex-direction: column;
  }

  .infopage-card-thumb {
    width: 100%;
    min-width: unset;
    padding-top: 50%;
    min-height: unset;
  }

  .infopage-list-actions {
    padding-left: 0;
  }

  .infopage-list-content {
    min-width: 0;
  }
}

/* === Quill Editor 커스텀 === */
.ql-toolbar.ql-snow {
  border-radius: 8px 8px 0 0;
  border-color: #e2e8f0;
  background: #f8fafc;
}
/* 보험정보 글 작성 — 본문 헤더(툴바)가 길어진 본문 스크롤 시에도 보이도록 상단 고정.
   (제안서 본문 편집 팝업 body.popup-mode 은 제외) */
body:not(.popup-mode) .ql-toolbar.ql-snow {
  position: sticky;
  top: 0;
  z-index: 20;
}
@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  /* 모바일 상단바(.mobile-topbar, 56px) 아래에 고정 */
  body:not(.popup-mode) .ql-toolbar.ql-snow {
    top: 56px;
  }
}

/* 보험정보 글 보기 — 뒤로가기(목록으로) 버튼 툴바가 본문 스크롤 시에도 상단에 따라오도록 고정 */
body:not(.popup-mode) .info-article-toolbar {
  position: sticky;
  top: 0;
  z-index: 25;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 0px) /* PC고정: 원래 max-width 768px */ {
  /* 모바일 상단바(.mobile-topbar, 56px) 아래에 고정 */
  body:not(.popup-mode) .info-article-toolbar {
    top: 56px;
  }
}
.ql-container.ql-snow {
  border-radius: 0 0 8px 8px;
  border-color: #e2e8f0;
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 16px;
  background: #d1d5db;
}

/* ===== 글쓰기 본문 에디터 포커스 표시 =====
   전역 *:focus-visible 의 보라색 아웃라인(2px solid var(--primary))이 에디터 박스 바깥에 뜨는 대신,
   박스를 감싸는 테두리 자체를 진한 회색으로 바꿔 표시한다. (툴바+본문을 한 덩어리로) */
.ql-editor:focus,
.ql-editor:focus-visible {
  outline: none;
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow,
.article-quill-wrapper {
  transition: border-color 0.15s;
}
.ql-container.ql-snow:focus-within,
.ql-toolbar.ql-snow:has(+ .ql-container.ql-snow:focus-within),
.article-quill-wrapper:focus-within {
  border-color: #94a3b8;
}

/* 공지사항 작성 contenteditable 플레이스홀더 */
#ann-content:empty:before {
  content: attr(data-placeholder);
  color: var(--muted-foreground);
  pointer-events: none;
}
#ann-content img {
  max-width: 100%;
  height: auto;
}
/* 본문 글꼴 통일 — 전역 *{font-family:Geist}가 본문 내부 p/h 등에 직접 적용되는 것을 덮어써,
   에디터·미리보기·발행본(proposal.html)이 모두 Pretendard로 같은 위치에서 줄바꿈되게 한다 (작성한 그대로). */
.ql-editor, .ql-editor *,
.article-content, .article-content * {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* 단, 제안서 본문 블록은 앱 기본 글꼴(다른 블록들과 동일)로 통일.
   본문 블록 에디터(.article-quill-wrapper)·미리보기·발행본이 모두 같은 스택을 써야
   줄바꿈 위치와 주석 박스 좌표가 어긋나지 않는다. (블로그 글쓰기 에디터는 위 규칙 유지) */
.article-quill-wrapper .ql-editor, .article-quill-wrapper .ql-editor *,
.proposal-article-body, .proposal-article-body * {
  font-family: 'Geist', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

/* 발행 화면(.article-body)과 동일한 본문 레이아웃을 유지해야
   annotation-box의 절대좌표가 같은 콘텐츠 위치를 가리킴 */
.ql-editor {
  min-height: 600px;
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  word-break: keep-all;
  max-width: 340px; /* 텍스트 영역 300px (좌우 패딩 20px) — 모바일 폭에 맞춰 작성 */
  margin: 0 auto;
  padding: 32px 20px 80px;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.04);
}
/* 보험정보 글 작성/보기는 네이버 블로그처럼 본문 폭을 넓게.
   단, 제안서 본문 블록 "글 편집"은 같은 #article-editor 를 팝업(body.popup-mode)으로
   재사용하므로 popup-mode 에서는 제외 → 제안서 본문(모바일 폭 340px)은 그대로 유지.
   (제안서 발행 본문 .proposal-article-body 도 미적용) */
/* 박스 좌표(절대 px)가 에디터·보기에서 같은 위치를 가리키려면 본문 폭이 동일해야 한다.
   → 에디터 본문을 고정폭(720px, 블로그형) 컬럼으로 두고, 보기 화면도 같은 텍스트영역 폭으로 맞춘다. */
body:not(.popup-mode) #article-editor .ql-editor {
  max-width: none;
  width: 100%;
  overflow-wrap: anywhere;
  box-shadow: none;
}
/* 제안서 본문 "큰 화면으로 편집" 팝업: 흰 작성칸이 회색 배경을 덮고 화면 전체로 꽉 차게 */
body.popup-mode #article-editor .ql-editor {
  max-width: none;
  width: 100%;
  overflow-wrap: anywhere;
  box-shadow: none;
}
/* 팝업 글쓰기 화면 전체를 흰색으로 (가장자리 회색 페이지 배경까지 완전 제거) */
body.popup-mode[data-page="article-write"],
body.popup-mode[data-page="article-write"] #app,
body.popup-mode[data-page="article-write"] .main-content {
  background: #fff !important;
}
body.popup-mode[data-page="article-write"] .main-content {
  padding: 12px 16px !important;
}
/* 작성 카드의 테두리·그림자 제거 → 흰 배경과 경계 없이 매끈하게 */
body.popup-mode[data-page="article-write"] .card {
  box-shadow: none !important;
  border: none !important;
  background: #fff !important;
}
body.popup-mode #article-editor.ql-container.ql-snow,
body.popup-mode #article-editor .ql-toolbar.ql-snow {
  background: #fff;
}
/* 제안서 인라인 본문 에디터: 회색 컨테이너 배경(#d1d5db) 제거 + 흰 작성칸이 폭 전체를 채우게 */
.article-quill-wrapper .ql-container.ql-snow {
  background: #fff;
}
.article-quill-wrapper .ql-editor {
  max-width: none;
  box-shadow: none;
  /* 기본 글자 크기를 발행본/미리보기 본문(.proposal-article-body = 14px)과 똑같이 맞춘다.
     예전엔 편집칸만 18px 이라, 툴바에서 크기를 고르면
       - 18px 를 고르면 기본과 같아서 편집칸에서는 아무 변화가 없고(미리보기에서만 커짐)
       - 16px 를 고르면 편집칸에서는 오히려 작아 보였다.
     기준을 같게 맞추면 어떤 px 를 골라도 편집칸과 미리보기가 똑같이 변한다. */
  font-size: 14px;
  line-height: 1.5;
}
/* 편집칸의 사진도 미리보기·발행본과 같은 배치(블록·가운데·위아래 4px)로 보여준다.
   → 편집칸에서 눈에 보이는 사진 영역이 곧 미리보기에서 빨간 박스가 얹히는 영역이 된다. */
.article-quill-wrapper .ql-editor img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 4px auto;
  border-radius: 8px;
}
/* 사진 위에 마우스를 올리면 "빨간 박스를 그릴 수 있는 영역"이 눈에 보인다 */
.article-quill-wrapper .ql-editor img:hover {
  outline: 2px dashed rgba(59, 130, 246, 0.45);
  outline-offset: 1px;
}
/* 제안서 본문 블록: 글이 길어져 텍스트 박스가 화면보다 커지면
   글자 서식 툴바가 "이 박스 안에서만" 상단에 붙어 따라온다.
   - 박스 위쪽이 아직 보일 때: 원래 자리에 그대로 (안 움직임)
   - 박스가 화면 위로 올라갈 때: 화면 상단에 붙어서 따라옴
   - 박스 아래로 더 스크롤하면: 박스와 함께 위로 사라짐 (sticky 기본 동작)
   ※ 블록 제목줄(본문 블록 헤더)은 고정하지 않는다. */
.article-quill-wrapper .ql-toolbar.ql-snow {
  border-radius: 0;
  border-top: none;
  border-left: none;
  border-right: none;
}
body:not(.popup-mode) .article-quill-wrapper .ql-toolbar.ql-snow {
  box-shadow: 0 4px 10px -6px rgba(15, 23, 42, 0.25);
}
/* 게시판(상담 Q&A·영업 화법·이번달 보험이슈) + 보험 상담 사례 + 공지사항 글쓰기 에디터:
   기본 .ql-editor(340px 가운데정렬 + 회색 컨테이너 양옆 공백)를 폭 전체로 꽉 채우고
   경계 없이 흰 배경으로 만든다. */
#board-f-content-editor.ql-container.ql-snow,
#ic-content-editor.ql-container.ql-snow,
#ann-content-editor.ql-container.ql-snow {
  background: #fff;
}
#board-f-content-editor .ql-editor,
#ic-content-editor .ql-editor,
#ann-content-editor .ql-editor {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 20px;
  box-shadow: none;
  overflow-wrap: anywhere;
  min-height: 320px;
}
body.popup-mode #article-editor .annotation-layer {
  max-width: none;
  width: calc(100% - 40px);
}
/* 에디터 주석 박스 레이어를 본문 텍스트 영역(720 - 좌우패딩 40 = 680px)과 정확히 일치시킨다.
   레이어는 .ql-container(카드 폭) 기준 가운데 정렬이므로, 넓은 화면에선 680px로 고정하고
   좁은 화면에선 (컨테이너 - 40px)로 줄여 가운데 정렬된 에디터 텍스트 컬럼과 겹치게 한다. */
body:not(.popup-mode) #article-editor .annotation-layer {
  max-width: none;
  width: calc(100% - 40px);
}
/* 보기 본문도 에디터 텍스트 영역과 동일한 680px 폭으로 고정 → 박스 위치 일치 */
.article-content.info-article-content {
  width: 100%;
  max-width: 840px;
}
.ql-editor p {
  margin: 0 0 10px;
}
.ql-editor h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 36px 0 16px;
  color: #1a1a1a;
}
.ql-editor h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 14px;
  color: #1a1a1a;
}
.ql-editor h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: #1a1a1a;
}
.ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.ql-editor blockquote {
  border-left: 4px solid #6366f1;
  background: #f0f0ff;
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  color: #475569;
  font-style: italic;
  line-height: 1.8;
}
.ql-editor ul, .ql-editor ol {
  padding-left: 28px;
  margin-bottom: 18px;
}
.ql-editor ul { list-style: disc outside; }
.ql-editor ol { list-style: decimal outside; }
.ql-editor li {
  margin-bottom: 8px;
  display: list-item;
}
.ql-editor a {
  color: #6366f1;
  text-decoration: underline;
}
.ql-editor strong {
  font-weight: 700;
  color: #1e293b;
}

/* Quill 정렬 클래스 — 글 본문(article-content/proposal-article-body)에서도 적용 */
.article-content .ql-align-center,
.proposal-article-body .ql-align-center { text-align: center; }
.article-content .ql-align-right,
.proposal-article-body .ql-align-right { text-align: right; }
.article-content .ql-align-justify,
.proposal-article-body .ql-align-justify { text-align: justify; }

/* 빨간 네모 박스 강조 (인라인, 레거시 - Quill 에디터 + 글 보기 공통) */
.ql-editor .ql-highlight-box,
.article-content .ql-highlight-box,
.article-body .ql-highlight-box {
  display: inline-block;
  padding: 2px 8px;
  border: 2px solid #ef4444;
  border-radius: 4px;
  background: #fef2f2;
  color: #b91c1c;
  font-weight: 600;
  line-height: 1.4;
}

/* === 자유 위치 빨간 박스 annotation === */
.ql-container.ql-snow {
  position: relative;
}
/* 박스 좌표 = ql-editor의 padding 안쪽 텍스트 영역 좌상단 기준
   발행 본문도 동일한 텍스트 영역 너비로 정렬해야 위치 일치 */
.article-content {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
}
/* 에디터의 padding 안쪽 텍스트 영역에 정확히 맞춤 (32px top, 80px bottom, 20px L/R) */
.annotation-layer {
  position: absolute;
  top: 32px;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 300px;
  pointer-events: none;
  z-index: 5;
}
.annotation-layer .annotation-box {
  pointer-events: auto;
}
.annotation-layer .annotation-box,
.article-content .annotation-box,
.article-body .annotation-box,
.proposal-article-body .annotation-box {
  border: 2.5px solid #ef4444;
  border-radius: 4px;
  background: rgba(239, 68, 68, 0.04);
  box-sizing: border-box;
}
.annotation-layer .annotation-box.selected {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}
.annotation-layer .annotation-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #ef4444;
  border-radius: 50%;
  display: none;
  z-index: 1;
}
.annotation-layer .annotation-box.selected .annotation-handle {
  display: block;
}
.annotation-layer .annotation-handle-nw { top: -7px; left: -7px; cursor: nw-resize; }
.annotation-layer .annotation-handle-ne { top: -7px; right: -7px; cursor: ne-resize; }
.annotation-layer .annotation-handle-sw { bottom: -7px; left: -7px; cursor: sw-resize; }
.annotation-layer .annotation-handle-se { bottom: -7px; right: -7px; cursor: se-resize; }
.annotation-layer .annotation-delete {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #fff;
  display: none;
  user-select: none;
  z-index: 2;
}
.annotation-layer .annotation-box.selected .annotation-delete {
  display: block;
}
/* 발행된 글 보기에서는 핸들/삭제버튼 절대 숨김 */
.article-content .annotation-handle,
.article-content .annotation-delete,
.article-body .annotation-handle,
.article-body .annotation-delete,
.proposal-article-body .annotation-handle,
.proposal-article-body .annotation-delete {
  display: none !important;
}

/* 제안서 article 블록 본문은 에디터와 동일한 680px 폭을 유지하고 wrap에서 scale → 박스 좌표 그대로 */
.proposal-article-body-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.proposal-article-body {
  width: 300px;
  margin: 0 auto;
  position: relative;
  display: flow-root;
  transform-origin: top left;
  /* 본문 영역을 벗어난 빨간 박스는 잘라낸다 (초과분은 미리보기/발행에서 안 보이게) */
  overflow: hidden;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
/* 미리보기 본문은 .article-content(16px)와 클래스를 공유하므로, 에디터(.ql-editor)·발행본과
   동일한 18px/680px로 렌더되도록 특이도를 높여 글자 크기를 고정 (가독성·줄바꿈 일치) */
.article-content.proposal-article-body {
  font-size: 14px;
  line-height: 1.5;
}
/* 본문 블록 '작게' 단계 — 제목 드롭다운의 '본문' 바로 아래 한 단계 (h4를 작은 본문으로 사용).
   '본문'(p)의 크기·굵기는 그대로 두고, 이 단계만 0.8배로 렌더 (에디터/미리보기/발행본 동일 비율) */
.ql-editor h4,
.article-content h4,
.proposal-article-body h4 {
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 2px;
}
/* 제목 드롭다운 한글 라벨 (Quill 기본 Heading N / Normal 대체) */
.ql-toolbar .ql-picker.ql-header .ql-picker-label::before,
.ql-toolbar .ql-picker.ql-header .ql-picker-item::before { content: '본문'; }
.ql-toolbar .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-toolbar .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: '제목 1'; }
.ql-toolbar .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-toolbar .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: '제목 2'; }
.ql-toolbar .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-toolbar .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: '제목 3'; }
.ql-toolbar .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-toolbar .ql-picker.ql-header .ql-picker-item[data-value="4"]::before { content: '작게'; font-size: 0.85em; }
/* === 제안서 본문 간격: 블로그처럼 글-글 / 글-이미지 간격을 자연스럽게 좁힘
   (.proposal-article-body 한정 → 독립 블로그 글 보기(.article-content)는 영향 없음) === */
.proposal-article-body p {
  margin: 0 0 2px;
}
/* 이미지: 위아래 여백을 최소화해 글과 거의 붙게 (블로그 느낌)
   발행본(proposal.html)과 같은 배치(블록·가운데·8px 라운드)로 맞춰 미리보기와 발행본이 어긋나지 않게 한다.
   ※ 아래쪽 .article-content img (margin 24px·그림자)보다 뒤에 오지 않으므로 특이도를 높여 둔다. */
.article-content.proposal-article-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 4px auto;
  border-radius: 8px;
  box-shadow: none;
}
/* 이미지만 들어있는 문단은 추가 여백 제거 (p 여백 + img 여백 이중 간격 방지) */
.proposal-article-body p:has(> img) {
  margin: 0;
}
/* 빨간 박스의 기준이 되는 "사진 영역" 래퍼.
   래퍼가 사진 크기에 딱 맞아야(fit-content) 저장된 %좌표가 사진 위 같은 지점을 가리킨다.
   (래퍼가 본문 폭 전체면, 사진이 본문보다 좁을 때 박스가 옆으로 밀리고 커진다) */
.proposal-article-body .ann-img-wrap {
  position: relative;
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 4px auto;
  line-height: 0;
}
.proposal-article-body .ann-img-wrap > img {
  margin: 0;
  display: block;
}
.proposal-article-body p:has(> .ann-img-wrap) {
  margin: 0;
}
/* 빈 줄(엔터로 만든 공백 문단)은 "한 줄" 높이 그대로 → 엔터 친 개수만큼 간격이 생긴다 */
.proposal-article-body p:has(> br:only-child) {
  margin: 0;
}
/* 본문 맨 앞/맨 뒤의 빈 줄은 완전히 제거 → 제목·이미지와 바로 붙음 */
.proposal-article-body > p:first-child:has(> br:only-child),
.proposal-article-body > p:last-child:has(> br:only-child) {
  display: none;
}
/* 소제목 위쪽 여백 축소 (블로그 느낌) */
.proposal-article-body h1 { margin: 18px 0 8px; }
.proposal-article-body h2 { margin: 16px 0 8px; }
.proposal-article-body h3 { margin: 14px 0 6px; }
.proposal-article-body ul,
.proposal-article-body ol { margin-bottom: 10px; }
.proposal-article-body li { margin-bottom: 4px; }
.proposal-article-body blockquote { margin: 14px 0; }
/* 본문 첫 요소의 위쪽 여백 제거 → 제목/이미지와 자연스럽게 연결 */
.proposal-article-body > *:first-child { margin-top: 0; }
/* 빨간 박스를 그릴 수 있는 "사진 영역" 표시 (그리기 모드 / 박스 선택 시)
   → 편집칸에서 이 파란 점선 안이 곧 미리보기·발행본에서 박스가 얹히는 기준 영역 */
.annotation-layer .annotation-img-hint {
  position: absolute;
  z-index: 9;
  border: 2px dashed #3b82f6;
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.06);
  box-sizing: border-box;
  pointer-events: none;
}
.annotation-layer .annotation-img-hint-label {
  position: absolute;
  top: 5px;
  left: 5px;
  max-width: calc(100% - 10px);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.92);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 그리기 모드 오버레이 (layer 위에 깔림) */
.annotation-draw-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
  z-index: 10;
  background: rgba(239, 68, 68, 0.03);
  pointer-events: auto;
}
/* 제안서 인라인 본문 블록 + 상담사례·게시판·공지사항 블로그형 에디터:
   빨간 박스 레이어가 작성칸(ql-editor) 전체를 덮게 해 사진 어디에나 박스를 그릴 수 있도록
   (기본 레이어의 상/하 인셋·고정폭 제거) */
.article-quill-wrapper .ql-container { position: relative; }
.article-quill-wrapper .annotation-layer,
#ic-content-editor .annotation-layer,
#board-f-content-editor .annotation-layer,
#ann-content-editor .annotation-layer {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
}
.ql-toolbar .ql-box-draw.ql-active svg rect {
  stroke: #b91c1c;
}

/* === 글 보기 스타일 (.article-content는 in-app, .article-body는 public blog)
   annotation-box 좌표가 같은 위치를 가리키도록 .ql-editor와 본문 레이아웃을 동일하게 유지
   display: flow-root → 첫 자식의 margin-top이 collapse되어 박스가 아래로 밀리는 현상 차단 */
.article-content {
  font-family: 'Pretendard Variable', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  word-break: keep-all;
  overflow-wrap: anywhere;
  display: flow-root;
}
.article-content p {
  margin: 0 0 10px;
}
.article-content h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 36px 0 16px;
  color: #1a1a1a;
}
.article-content h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 32px 0 14px;
  color: #1a1a1a;
}
.article-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 12px;
  color: #1a1a1a;
}
.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.article-content blockquote {
  border-left: 4px solid #6366f1;
  background: #f0f0ff;
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  color: #475569;
  font-style: italic;
  line-height: 1.8;
}
.article-content ul, .article-content ol {
  padding-left: 28px;
  margin-bottom: 18px;
}
.article-content ul {
  list-style: disc outside;
}
.article-content ol {
  list-style: decimal outside;
}
.article-content li {
  margin-bottom: 8px;
  display: list-item;
}
.article-content a {
  color: #6366f1;
  text-decoration: underline;
}
.article-content strong {
  font-weight: 700;
  color: #1e293b;
}

/* Legacy sidebar support */
.sidebar { display: none; }

/* ============ CALENDAR ============ */
.cal-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  align-items: stretch;
}
.cal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.cal-nav-btn {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
}
.cal-nav-btn:hover { background: var(--border); }
.cal-today-btn { margin-left: auto; font-size: 12px; padding: 5px 12px; }
.cal-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cal-year { font-size: 14px; color: var(--muted-foreground); font-weight: 500; }
.cal-month { font-size: 20px; font-weight: 700; color: var(--foreground); }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.cal-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  padding: 8px 0;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cal-weekday.sun { color: #EF4444; }
.cal-weekday.sat { color: #3B82F6; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.cal-cell {
  min-height: 120px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  overflow: hidden;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--muted); }
.cal-cell-other { opacity: .35; }
.cal-today { background: #F0F9FF; }
.cal-selected { background: #EFF6FF; box-shadow: inset 0 0 0 2px var(--primary); border-radius: 0; }
.cal-dragover { background: #DBEAFE !important; }

/* 캘린더: 넓은 화면에서 월간 그리드를 화면 높이에 꽉 차게 채워 하단 여백 제거 */
@media (min-width: 0px) /* PC고정: 원래 min-width 1025px */ {
  body[data-page="calendar"] .main-content {
    display: flex;
    flex-direction: column;
  }
  body[data-page="calendar"] .cal-layout {
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-page="calendar"] .cal-main {
    display: flex;
    min-height: 0;
  }
  body[data-page="calendar"] .cal-main > .card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  body[data-page="calendar"] .cal-grid {
    flex: 1 1 auto;
    grid-auto-rows: minmax(120px, 1fr);
  }
}

.cal-date-num {
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  margin-bottom: 2px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.cal-date-today {
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}
.cal-dots {
  display: flex;
  gap: 3px;
  margin-bottom: 2px;
  padding-left: 2px;
}
.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: none;
}

.cal-items-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cal-item-preview {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
  transition: opacity .15s;
}
.cal-item-preview:hover { opacity: .8; }
.cal-item-time {
  font-weight: 600;
  margin-right: 3px;
  font-size: 10px;
}
.cal-todo-preview {
  background: #FFF7ED;
  color: #C2410C;
  border-left: 3px solid #F97316;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-todo-check {
  width: 10px;
  height: 10px;
  border: 1.5px solid #F97316;
  border-radius: 3px;
  flex-shrink: 0;
}
.cal-item-more {
  font-size: 10px;
  color: var(--muted-foreground);
  padding: 1px 5px;
  cursor: pointer;
}

/* Calendar sidebar panel */
/* 사이드바 셀 자체는 높이를 차지하지 않게 하여(내부는 절대배치),
   행 높이를 달력 박스가 결정하도록 함 → 사이드바 내용이 길어져도 늘어나지 않음 */
.cal-sidebar { position: relative; }
.cal-sidebar-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
/* 우측 일정 / 할 일 메모 박스를 동일한 높이(반반)로 나눠 달력 박스 높이에 맞춤.
   내용이 많으면 박스가 길어지지 않고 박스 안에서 스크롤됨 */
.cal-date-panel,
.cal-undated-panel {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.cal-date-panel .cal-panel-section,
.cal-undated-panel .cal-panel-section {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.cal-panel-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.cal-panel-date {
  font-size: 16px;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}
.cal-panel-section {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}
.cal-panel-section:last-of-type { border-bottom: none; }
.cal-panel-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cal-panel-count {
  background: var(--muted);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.cal-panel-empty {
  font-size: 13px;
  color: var(--muted-foreground);
  text-align: center;
  padding: 12px 0;
}

.cal-panel-event {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform .15s;
}
.cal-panel-event:hover { transform: translateX(2px); }
.cal-panel-event-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cal-panel-event-cat {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.cal-panel-event-time {
  font-size: 11px;
  color: var(--muted-foreground);
  font-weight: 500;
}
.cal-panel-event-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
}
.cal-panel-event-customer {
  font-size: 12px;
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* Todos in panel */
.cal-panel-todo {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.cal-panel-todo:last-of-type { border-bottom: none; }
.cal-panel-todo.completed .cal-todo-text {
  text-decoration: line-through;
  color: var(--muted-foreground);
}
.cal-todo-label {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: pointer;
  font-size: 13px;
}
.cal-todo-label input[type="checkbox"] { display: none; }
.cal-todo-checkbox {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.cal-todo-label input:checked + .cal-todo-checkbox {
  background: var(--primary);
  border-color: var(--primary);
}
.cal-todo-label input:checked + .cal-todo-checkbox::after {
  content: '';
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -2px;
}
.cal-todo-text { color: var(--foreground); }
.cal-todo-priority {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}
.cal-todo-priority.high { color: #DC2626; background: #FEF2F2; }
.cal-todo-del {
  background: none;
  border: none;
  color: var(--muted-foreground);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: all .15s;
}
.cal-panel-todo:hover .cal-todo-del { opacity: 1; }
.cal-todo-del:hover { background: #FEE2E2; color: #DC2626; }

/* Quick todo input */
.cal-quick-todo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.cal-quick-input {
  flex: 1;
  min-width: 0;
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--muted);
  outline: none;
  transition: border-color .15s;
}
.cal-quick-input:focus {
  border-color: var(--primary);
  border-style: solid;
  background: var(--card);
}
.cal-quick-priority {
  width: 70px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  font-size: 12px;
  background: var(--card);
}

/* Calendar panel actions */
.cal-panel-actions {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
}

/* Color picker */
.cal-color-picker {
  display: flex;
  gap: 8px;
}
.cal-color-opt { cursor: pointer; }
.cal-color-opt input { display: none; }
.cal-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
  border: 2px solid transparent;
  transition: all .15s;
}
.cal-color-opt input:checked + .cal-color-swatch {
  border-color: var(--foreground);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px var(--card);
}

/* ====== 월간/주간 뷰 토글 ====== */
.cal-view-toggle {
  display: inline-flex;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  margin-left: 8px;
}
.cal-view-btn {
  border: none;
  background: transparent;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-foreground);
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s;
}
.cal-view-btn:hover { color: var(--foreground); }
.cal-view-btn.active {
  background: var(--card);
  color: var(--primary);
  box-shadow: 0 1px 3px rgba(15,23,42,0.12);
}

/* ====== 주간 뷰 (시간 그리드) ====== */
.calw { display: flex; flex-direction: column; }
.calw-head {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.calw-gutter-head { border-right: 1px solid var(--border); }
.calw-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 0;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.calw-dayhead:last-child { border-right: none; }
.calw-dayhead:hover { background: var(--muted); }
.calw-dayhead.is-selected { background: #EFF6FF; }
.calw-dayname { font-size: 11px; font-weight: 600; color: var(--muted-foreground); }
.calw-dayhead.sun .calw-dayname { color: #EF4444; }
.calw-dayhead.sat .calw-dayname { color: #3B82F6; }
.calw-daynum {
  font-size: 15px;
  font-weight: 600;
  color: var(--foreground);
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.calw-daynum.is-today { background: var(--primary); color: #fff; }

.calw-allday {
  display: grid;
  grid-template-columns: 56px repeat(7, 1fr);
  border-bottom: 2px solid var(--border);
  min-height: 30px;
  max-height: 96px;
  overflow-y: auto;
}
.calw-gutter-label {
  border-right: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted-foreground);
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
}
.calw-allday-col {
  border-right: 1px solid var(--border);
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 24px;
}
.calw-allday-col:last-child { border-right: none; }
.calw-allday-chip {
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  line-height: 1.4;
}
.calw-allday-chip:hover { opacity: .8; }
.calw-todo-chip {
  background: #FFF7ED;
  color: #C2410C;
  border-left: 3px solid #F97316;
  display: flex; align-items: center; gap: 4px;
}

.calw-scroll {
  max-height: 620px;
  overflow-y: auto;
  padding-top: 9px;      /* 첫 시간 라벨(07:00)이 상단에서 잘리지 않도록 여백 */
  padding-bottom: 10px;  /* 마지막 시간 라벨(19:00)이 하단에서 잘리지 않도록 여백 */
}
.calw-body {
  display: grid;
  grid-template-columns: 56px 1fr;
  position: relative;
}
.calw-times { border-right: 1px solid var(--border); }
.calw-hour {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.calw-hour span {
  position: absolute;
  top: -7px;
  right: 6px;
  font-size: 10px;
  color: var(--muted-foreground);
  background: var(--card);
  padding: 0 2px;
}
.calw-cols {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-repeat: repeat;
}
.calw-daycol {
  position: relative;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.calw-daycol:last-child { border-right: none; }
.calw-daycol:hover { background: rgba(99,102,241,0.03); }
.calw-event {
  position: absolute;
  left: 2px;
  right: 2px;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(15,23,42,0.1);
  transition: opacity .15s;
}
.calw-event:hover { opacity: .85; }
.calw-event-time { display: block; font-weight: 600; font-size: 10px; }
.calw-event-title {
  display: block;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile responsive */
@media (max-width: 0px) /* PC고정: 원래 max-width 1024px */ {
  .cal-layout {
    grid-template-columns: 1fr;
  }
  .cal-sidebar { position: static; }
  /* 모바일: 절대배치/반반 분할 해제, 내용 높이대로 쌓이도록 복원 */
  .cal-sidebar-inner { position: static; display: block; }
  .cal-date-panel,
  .cal-undated-panel { flex: none; display: block; }
  .cal-date-panel .cal-panel-section,
  .cal-undated-panel .cal-panel-section { overflow-y: visible; min-height: 0; }
  .cal-cell { min-height: 70px; }
  .cal-items-container { display: none; }
  .cal-dot { display: block; }
}
@media (max-width: 0px) /* PC고정: 원래 max-width 640px */ {
  .cal-cell { min-height: 50px; padding: 2px 3px; }
  .cal-date-num { font-size: 11px; width: 20px; height: 20px; }
  .cal-header { padding: 12px 14px; flex-wrap: wrap; }
  .cal-month { font-size: 16px; }
  .cal-view-toggle { margin-left: auto; }
  .cal-today-btn { margin-left: 0; }
  /* 주간 뷰: 모바일에서 시간 거터 축소 */
  .calw-head,
  .calw-allday,
  .calw-body { grid-template-columns: 40px repeat(7, 1fr); }
  .calw-body { grid-template-columns: 40px 1fr; }
  .calw-daynum { font-size: 13px; width: 24px; height: 24px; }
  .calw-event { font-size: 10px; padding: 1px 3px; }
  .calw-scroll { max-height: 460px; }
}

/* ====== Coverage Analysis Page ====== */
.ca-layout { display: flex; gap: 24px; align-items: flex-start; }
.ca-input-panel { flex: 1.2; min-width: 0; }
.ca-report-panel { flex: 1; position: sticky; top: 20px; min-width: 0; }

/* Report card */
.ca-report-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  padding: 28px;
  overflow: hidden;
}
.ca-report-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f1f5f9;
}
.ca-report-logo {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.ca-report-logo span { color: var(--primary); }
.ca-report-title {
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.ca-report-sub {
  font-size: 13px;
  color: #94a3b8;
  font-weight: 500;
}

/* Basic info grid (input) */
.ca-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.ca-info-col { display: flex; flex-direction: column; gap: 10px; }
.ca-col-header { text-align: center; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.ca-col-before { background: var(--muted); color: var(--muted-foreground); }
.ca-col-after { background: #eff6ff; color: #2563eb; }
.ca-form-group { display: flex; flex-direction: column; gap: 4px; }
.ca-form-group label { font-size: 12px; color: var(--muted-foreground); font-weight: 600; }
.ca-select { font-size: 13px !important; padding: 10px 12px !important; border-radius: 8px !important; }
.ca-input-unit { position: relative; }
.ca-input-unit::after { content: '만'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); font-size: 12px; pointer-events: none; }
.ca-unit-won::after { content: '원'; }
.ca-btn-add { width: 100%; padding: 12px; background: #e0e7ff; color: #1e40af; border: 1.5px dashed #93c5fd; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ca-btn-add:hover { background: #c7d2fe; border-color: #6366f1; }

/* Coverage categories (input) */
.ca-macro-title { font-size: 14px; font-weight: 800; color: #1e40af; margin: 20px 0 10px 0; padding-left: 10px; border-left: 3px solid #3b82f6; letter-spacing: -0.3px; }
.ca-cat-group { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: white; }
.ca-cat-header { display: flex; align-items: center; padding: 12px 14px; background: #fafafa; cursor: pointer; user-select: none; transition: background 0.2s; gap: 10px; }
.ca-cat-header:hover { background: #eff6ff; }
.ca-cat-check { width: 16px; height: 16px; cursor: pointer; accent-color: #3b82f6; flex-shrink: 0; }
.ca-cat-title { flex: 1; font-size: 14px; font-weight: 700; color: #374151; }
.ca-toggle-icon { color: var(--muted-foreground); transition: transform 0.3s; }
.ca-cat-body { display: none; padding: 14px; border-top: 1px solid var(--border); }
.ca-cat-group.open .ca-cat-body { display: block; }
.ca-cat-group.open .ca-toggle-icon { transform: rotate(180deg); }
.ca-cat-group.open .ca-cat-header { background: #eff6ff; }
.ca-cat-group.open .ca-cat-title { color: #1e40af; }
.ca-item-row { display: grid; grid-template-columns: 130px repeat(2, 1fr); gap: 10px; align-items: center; margin-bottom: 8px; }
.ca-item-name { font-size: 13px; color: var(--foreground); font-weight: 600; }
.ca-coverage-input { font-size: 13px !important; padding: 9px 28px 9px 10px !important; border-radius: 8px !important; }

/* Report: info badges */
.ca-info-badges { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; background: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; }
.ca-badge-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ca-badge { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 44px; text-align: center; }
.ca-badge-before { background: #e5e7eb; color: #4b5563; }
.ca-badge-after { background: #3b82f6; color: white; }
.ca-badge-text { font-weight: 600; color: var(--foreground); letter-spacing: -0.3px; }

/* Report: premium card */
.ca-prem-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
}
.ca-prem-card-title { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 14px; letter-spacing: 0.5px; text-transform: uppercase; }
.ca-prem-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-prem-row-left { display: flex; align-items: center; gap: 6px; width: 48px; flex-shrink: 0; }
.ca-prem-row-label { font-size: 12px; font-weight: 700; color: #64748b; }
.ca-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ca-dot-gray { background: #cbd5e1; }
.ca-dot-blue { background: #3b82f6; }
.ca-prem-row-center { flex: 1; }
.ca-prem-row-bar-wrap { height: 24px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.ca-prem-row-bar { height: 100%; border-radius: 6px; transition: width 0.5s cubic-bezier(.4,0,.2,1); min-width: 2px; }
.ca-prem-row-right { font-size: 14px; font-weight: 800; color: #0f172a; min-width: 78px; text-align: right; white-space: nowrap; }
.ca-val-accent { color: #2563eb !important; }
.ca-prem-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
}

/* Report: overview stats */
.ca-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.ca-stat-box { text-align: center; padding: 12px 8px; border-radius: 12px; border: 1px solid #e2e8f0; }
.ca-stat-num { font-size: 22px; font-weight: 900; line-height: 1.2; }
.ca-stat-label { font-size: 11px; font-weight: 600; color: #64748b; margin-top: 2px; }
.ca-stat-up { background: #eff6ff; border-color: #bfdbfe; }
.ca-stat-up .ca-stat-num { color: #1d4ed8; }
.ca-stat-same { background: #f8fafc; }
.ca-stat-same .ca-stat-num { color: #64748b; }
.ca-stat-down { background: #fef2f2; border-color: #fecaca; }
.ca-stat-down .ca-stat-num { color: #dc2626; }
.ca-stat-new { background: #f0fdf4; border-color: #bbf7d0; }
.ca-stat-new .ca-stat-num { color: #16a34a; }

/* Report: legend */
.ca-legend { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 0 4px; }
.ca-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #94a3b8; }

/* Report: macro section */
.ca-macro-section { margin-bottom: 20px; }
.ca-macro-section-title {
  font-size: 13px;
  font-weight: 800;
  color: #475569;
  padding: 8px 14px;
  background: #f1f5f9;
  border-radius: 10px;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Report: category card */
.ca-cat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.ca-cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.ca-cat-card-name { letter-spacing: 0.3px; }
.ca-cat-summary { font-size: 11px; font-weight: 600; color: #93c5fd; }
.ca-cat-card-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 13px; }

/* Report: bar comparison item */
.ca-bar-item { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.ca-bar-item:last-child { border-bottom: none; }
.ca-bar-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ca-bar-item-name { font-size: 13px; font-weight: 700; color: #334155; }
/* Diff chips */
.ca-chip {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.ca-chip-up { background: #dbeafe; color: #1d4ed8; }
.ca-chip-down { background: #fee2e2; color: #dc2626; }
.ca-chip-new { background: #dcfce7; color: #16a34a; }

/* Bar pair */
.ca-bar-pair { display: flex; flex-direction: column; gap: 3px; }
.ca-bar-line { display: flex; align-items: center; gap: 8px; }
.ca-bar-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; width: 32px; text-align: center; flex-shrink: 0; }
.ca-bar-tag-gray { background: #e2e8f0; color: #64748b; }
.ca-bar-tag-blue { background: #dbeafe; color: #2563eb; }
.ca-bar-track { flex: 1; height: 22px; background: #f1f5f9; border-radius: 6px; overflow: hidden; position: relative; }
.ca-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s cubic-bezier(.4,0,.2,1); min-width: 0; display: flex; align-items: center; justify-content: flex-end; overflow: hidden; }
.ca-bar-gray { background: linear-gradient(90deg, #e2e8f0, #cbd5e1); }
.ca-bar-blue { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.ca-bar-val-inside { font-size: 10px; font-weight: 700; color: white; padding-right: 6px; text-shadow: 0 1px 2px rgba(0,0,0,0.2); white-space: nowrap; }
.ca-bar-gray .ca-bar-val-inside { color: #475569; text-shadow: none; }
.ca-bar-val-outside { font-size: 12px; font-weight: 700; color: #475569; min-width: 50px; text-align: right; white-space: nowrap; }
.ca-bar-val-empty { color: #cbd5e1; font-weight: 600; font-style: italic; }

/* Macro section */
.ca-macro-chips { display: flex; gap: 6px; }
.ca-macro-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.ca-macro-chip-up { background: #dbeafe; color: #1d4ed8; }

/* Report: empty state */
.ca-empty-report {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
}
.ca-empty-report p { font-size: 14px; line-height: 1.6; margin-top: 12px; }

/* Share button */
.ca-share-btn {
  width: 100%;
  background: linear-gradient(135deg, #059669, #10b981);
  color: white;
  border: none;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}
.ca-share-btn:hover { background: linear-gradient(135deg, #047857, #059669); transform: translateY(-1px); }

/* ========== Coverage Analysis: Excel-style input layout ========== */
.ca-xls-section {
  background: white;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  margin-bottom: 16px;
}
.ca-xls-section-title {
  font-size: 15px;
  font-weight: 800;
  color: #1f2937;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}
.ca-xls-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
}
.ca-xls-icon-gray { background: linear-gradient(135deg, #f1f5f9, #e2e8f0); }
.ca-xls-icon-blue { background: linear-gradient(135deg, #dbeafe, #bfdbfe); }
.ca-xls-section-hint {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 2px;
}
.ca-xls-wrap {
  overflow-x: auto;
  border: 1px solid #c9ced4;
  border-radius: 4px;
  background: white;
}
.ca-xls-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  color: #1f2937;
  table-layout: auto;
}
.ca-xls-table th,
.ca-xls-table td {
  border-right: 1px solid #d8dde2;
  border-bottom: 1px solid #d8dde2;
  padding: 0;
  background: white;
  vertical-align: middle;
}
.ca-xls-table th:last-child,
.ca-xls-table td:last-child {
  border-right: none;
}
.ca-xls-table tbody tr:last-child > td,
.ca-xls-table tbody tr:last-child > th {
  border-bottom: none;
}

/* Column header cells (thead) */
.ca-xls-table thead th {
  font-weight: 700;
  padding: 9px 10px;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: -0.2px;
}
.ca-xls-th-label-col,
.ca-xls-th-cat-col,
.ca-xls-th-name-col {
  background: #e5e7eb !important;
  color: #1f2937;
}
.ca-xls-th-label-col { min-width: 90px; }
.ca-xls-th-cat-col { min-width: 42px; width: 42px; }
.ca-xls-th-name-col { min-width: 160px; text-align: left !important; padding-left: 14px !important; }
.ca-xls-th-before {
  background: #f3f4f6 !important;
  color: #374151;
  min-width: 120px;
}
.ca-xls-th-after {
  background: #dbeafe !important;
  color: #1e40af !important;
  position: relative;
  min-width: 120px;
}
.ca-xls-col-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 18px;
  height: 18px;
  line-height: 16px;
  cursor: pointer;
  color: #94a3b8;
  font-size: 15px;
  font-weight: 400;
  border-radius: 3px;
  text-align: center;
  user-select: none;
}
.ca-xls-col-close:hover { color: #ef4444; background: rgba(239,68,68,0.1); }

/* Field-label cells (basic info first column = TH inside tbody) */
.ca-xls-table tbody th.ca-xls-th-label {
  background: #fafbfc !important;
  color: #4b5563;
  font-weight: 600;
  padding: 0 14px !important;
  text-align: left;
  white-space: nowrap;
  font-size: 12px;
}

/* Input/select cells */
.ca-xls-table td { height: 34px; padding: 0; }
.ca-xls-input-shell {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
  transition: background 0.12s;
}
.ca-xls-input-shell:focus-within { background: #fef9c3; }
.ca-xls-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 4px;
  font-size: 12px;
  outline: none;
  min-width: 0;
  font-family: inherit;
  color: #1f2937;
  width: 100%;
}
.ca-xls-input-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ca-xls-input::placeholder { color: #cbd5e1; font-weight: 400; }
.ca-xls-unit {
  font-size: 11px;
  color: #6e7681;
  padding-left: 4px;
  flex-shrink: 0;
}
.ca-xls-select {
  width: 100%;
  border: none;
  background-color: transparent;
  padding: 8px 22px 8px 8px;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  color: #1f2937;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  font-family: inherit;
}
.ca-xls-select:focus { background-color: #fef9c3; }

/* Category toggle rows */
.ca-xls-cat-row > td {
  background: #f8fafc;
  cursor: pointer;
  padding: 9px 14px;
  font-weight: 700;
  color: #334155;
  user-select: none;
  transition: background 0.12s;
}
.ca-xls-cat-row:hover > td { background: #eef2f7; }
.ca-xls-cat-row.open > td {
  background: #e0ecfa;
  color: #1e40af;
}
.ca-xls-cat-toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
  margin-right: 8px;
  color: #64748b;
  font-size: 10px;
  width: 10px;
}
.ca-xls-cat-row.open .ca-xls-cat-toggle-icon {
  transform: rotate(90deg);
  color: #1e40af;
}
.ca-xls-cat-check {
  margin: 0 8px 0 0;
  vertical-align: middle;
  accent-color: #3b82f6;
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.ca-xls-cat-name { font-size: 13px; vertical-align: middle; }
.ca-xls-cat-count {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 10px;
  vertical-align: middle;
}
.ca-xls-cat-row.open .ca-xls-cat-count { color: #60a5fa; }

/* Item rows (hidden when category collapsed) */
.ca-xls-item-row { display: none; }
.ca-xls-item-row.show { display: table-row; }
.ca-xls-cat-spacer {
  background: #fafbfc !important;
}
.ca-xls-item-name {
  background: white;
  padding: 7px 12px !important;
  color: #374151;
  font-weight: 500;
  font-size: 12px;
}

/* ========== 보장 진단 블록 (에디터 카드) ========== */
.cd-blk-wrap { display: flex; flex-direction: column; gap: 14px; }
.cd-blk-customer { display: flex; flex-direction: column; gap: 8px; }
.cd-blk-customer-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.cd-blk-auto-hint { font-size: 10px; font-weight: 500; color: #94a3b8; margin-left: 6px; }
.cd-blk-sync-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid #c7d2fe; background: #eef2ff; color: #4338ca;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all 0.15s;
}
.cd-blk-sync-btn:hover { background: #e0e7ff; border-color: #818cf8; }
.cd-blk-sync-stale { background: linear-gradient(135deg, #fef3c7, #fde68a); border-color: #fbbf24; color: #92400e; animation: cdBlkPulse 2s ease-in-out infinite; }
.cd-blk-sync-stale:hover { background: linear-gradient(135deg, #fde68a, #fcd34d); }
@keyframes cdBlkPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,0.4); } 50% { box-shadow: 0 0 0 4px rgba(251,191,36,0); } }
.cd-blk-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cd-blk-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd-blk-label { font-size: 11px; font-weight: 600; color: #64748b; }

.cd-blk-filters-section {}
.cd-blk-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-blk-filter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: 1px solid #e2e8f0; background: white;
  border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #475569; transition: all 0.15s;
}
.cd-blk-filter:hover { background: #f8fafc; border-color: #cbd5e1; }
.cd-blk-filter-on { background: linear-gradient(135deg, #047857, #059669); color: white; border-color: #047857; box-shadow: 0 2px 6px rgba(5,150,105,0.25); }

.cd-blk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cd-blk-card {
  border: 1px solid #e2e8f0; border-radius: 12px; background: white;
  cursor: pointer; overflow: hidden; transition: all 0.15s;
  position: relative;
}
.cd-blk-card:hover { border-color: var(--cdc, #047857); box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.cd-blk-dimmed { opacity: 0.45; }
.cd-blk-cardhead { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #f1f5f9; }
.cd-blk-cardhead-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cd-blk-emoji { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; font-size: 14px; flex-shrink: 0; }
.cd-blk-catname { font-size: 13px; font-weight: 700; color: #1e293b; }
.cd-blk-catbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 11px; font-weight: 700; color: white; }
.cd-blk-catedit { font-size: 11px; font-weight: 600; color: #94a3b8; }
.cd-blk-itembody { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; }
.cd-blk-itemline { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; color: #475569; }
.cd-blk-itemline-on { color: #1e293b; font-weight: 600; }
.cd-blk-itemname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-blk-itembadge { display: inline-flex; align-items: center; justify-content: center; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; color: white; }
.cd-blk-itemslash { font-size: 10px; color: #cbd5e1; font-weight: 500; }

.cd-blk-summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0; border-radius: 10px;
  font-size: 13px; color: #047857; font-weight: 600;
}
.cd-blk-summary-icon { font-size: 16px; }
.cd-blk-summary-text strong { color: #064e3b; font-weight: 800; font-size: 14px; }

/* ========== 보장 진단 카테고리 선택 모달 ========== */
.cd-mod-wrap { display: flex; flex-direction: column; gap: 14px; }
.cd-mod-cathead { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 10px; }
.cd-mod-cathead-title { font-size: 16px; font-weight: 800; color: #0f172a; }
.cd-mod-cathead-sub { font-size: 12px; color: #64748b; margin-top: 2px; }
.cd-mod-items { display: flex; flex-direction: column; gap: 12px; }
.cd-mod-item { border: 1px solid #e2e8f0; border-radius: 12px; padding: 14px; background: #fafbfc; transition: opacity 0.2s; }
.cd-mod-item-dim { opacity: 0.55; }
.cd-mod-itemhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cd-mod-itemname { font-size: 14px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-mod-irrelevant { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; }
.cd-mod-allbtn { padding: 4px 10px; background: white; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer; font-size: 11px; font-weight: 700; color: #475569; }
.cd-mod-allbtn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.cd-mod-itemdesc { font-size: 12px; color: #64748b; margin-top: 4px; }
.cd-mod-tip { display: flex; gap: 8px; padding: 10px 12px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 8px; margin: 10px 0; }
.cd-mod-tipicon { flex-shrink: 0; font-size: 12px; font-weight: 700; color: #92400e; }
.cd-mod-tiptext { font-size: 12px; color: #78350f; line-height: 1.65; }
.cd-mod-kw { color: #b45309; }
.cd-mod-subs { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-mod-sub {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border: 1.5px solid #e2e8f0; background: white;
  border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #475569; transition: all 0.12s; user-select: none;
}
.cd-mod-sub:hover { border-color: var(--cdc, #047857); color: var(--cdc, #047857); }
.cd-mod-sub-on { background: var(--cdc, #047857) !important; border-color: var(--cdc, #047857) !important; color: white !important; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.cd-mod-sub-check svg { display: block; }

/* ========== 보장 분석 비교 블록 (에디터 카드) ========== */
.ca-blk-wrap { display: flex; flex-direction: column; gap: 12px; }
.ca-blk-section { display: flex; flex-direction: column; gap: 10px; }
.ca-blk-section-title { font-size: 13px; font-weight: 800; color: #1f2937; display: flex; align-items: center; gap: 7px; letter-spacing: -0.2px; }
.ca-blk-add-rec {
  width: 100%; padding: 10px; background: #e0e7ff; color: #1e40af;
  border: 1.5px dashed #93c5fd; border-radius: 10px; font-weight: 700;
  font-size: 12px; cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.ca-blk-add-rec:hover { background: #c7d2fe; border-color: #6366f1; }

/* ========== 보장 분석 리포트 (미리보기/공유 공통) ========== */
.ca-rep { display: flex; flex-direction: column; gap: 14px; font-family: inherit; }
.ca-rep-header { text-align: center; padding: 18px 16px; background: linear-gradient(135deg, #1e40af, #3b82f6); color: white; border-radius: 12px; }
.ca-rep-logo { font-size: 18px; font-weight: 900; letter-spacing: -0.5px; margin-bottom: 4px; }
.ca-rep-logo span { color: #fbbf24; }
.ca-rep-title { font-size: 17px; font-weight: 800; letter-spacing: -0.3px; }
.ca-rep-sub { font-size: 12px; opacity: 0.92; margin-top: 4px; }
.ca-rep-badges { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; }
.ca-rep-badge-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ca-rep-badge { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; flex-shrink: 0; min-width: 44px; text-align: center; }
.ca-rep-badge-b { background: #e5e7eb; color: #4b5563; }
.ca-rep-badge-a { background: #3b82f6; color: white; }
.ca-rep-badge-text { font-weight: 600; color: #1f2937; letter-spacing: -0.3px; }
.ca-rep-prem { background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px; }
.ca-rep-prem-title { font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.ca-rep-prem-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ca-rep-prem-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ca-rep-prem-label { font-size: 12px; font-weight: 700; color: #64748b; width: 36px; flex-shrink: 0; }
.ca-rep-prem-bar-wrap { flex: 1; height: 22px; background: #e2e8f0; border-radius: 6px; overflow: hidden; }
.ca-rep-prem-bar { height: 100%; border-radius: 6px; transition: width 0.5s cubic-bezier(.4,0,.2,1); min-width: 2px; }
.ca-rep-prem-bar-gray { background: linear-gradient(90deg, #e2e8f0, #cbd5e1); }
.ca-rep-prem-bar-blue { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.ca-rep-prem-val { font-size: 13px; font-weight: 800; color: #0f172a; min-width: 78px; text-align: right; white-space: nowrap; }
.ca-rep-prem-val-blue { color: #2563eb; }
.ca-rep-prem-result { margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; text-align: center; }
.ca-rep-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ca-rep-stat { text-align: center; padding: 12px 8px; border-radius: 12px; border: 1px solid #e2e8f0; }
.ca-rep-stat-num { font-size: 22px; font-weight: 900; line-height: 1.2; }
.ca-rep-stat-label { font-size: 11px; font-weight: 600; color: #64748b; margin-top: 2px; }
.ca-rep-stat-up { background: #eff6ff; border-color: #bfdbfe; }
.ca-rep-stat-up .ca-rep-stat-num { color: #1d4ed8; }
.ca-rep-stat-same { background: #f8fafc; }
.ca-rep-stat-same .ca-rep-stat-num { color: #64748b; }
.ca-rep-stat-down { background: #fef2f2; border-color: #fecaca; }
.ca-rep-stat-down .ca-rep-stat-num { color: #dc2626; }
.ca-rep-stat-new { background: #f0fdf4; border-color: #bbf7d0; }
.ca-rep-stat-new .ca-rep-stat-num { color: #16a34a; }
.ca-rep-legend { display: flex; align-items: center; gap: 16px; padding: 0 4px; }
.ca-rep-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #94a3b8; }
.ca-rep-macro { display: flex; flex-direction: column; gap: 10px; }
.ca-rep-macro-title { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(135deg, #eff6ff, #dbeafe); border-radius: 10px; font-size: 13px; font-weight: 800; color: #1e40af; letter-spacing: -0.3px; }
.ca-rep-macro-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #dbeafe; color: #1d4ed8; }
.ca-rep-cat { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: white; }
.ca-rep-cat-head { padding: 10px 14px; background: #f8fafc; font-size: 13px; font-weight: 800; color: #1e293b; display: flex; align-items: center; justify-content: space-between; }
.ca-rep-cat-summary { font-size: 11px; font-weight: 600; color: #2563eb; }
.ca-rep-item { padding: 12px 14px; border-top: 1px solid #f1f5f9; }
.ca-rep-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ca-rep-item-name { font-size: 13px; font-weight: 700; color: #334155; }
.ca-rep-chip { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.ca-rep-chip-up { background: #dbeafe; color: #1d4ed8; }
.ca-rep-chip-down { background: #fee2e2; color: #dc2626; }
.ca-rep-chip-new { background: #dcfce7; color: #16a34a; }
.ca-rep-bars { display: flex; flex-direction: column; gap: 3px; }
.ca-rep-bar-line { display: flex; align-items: center; gap: 8px; }
.ca-rep-bar-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; width: 32px; text-align: center; flex-shrink: 0; }
.ca-rep-bar-tag-g { background: #e2e8f0; color: #64748b; }
.ca-rep-bar-tag-b { background: #dbeafe; color: #2563eb; }
.ca-rep-bar-track { flex: 1; height: 20px; background: #f1f5f9; border-radius: 6px; overflow: hidden; position: relative; }
.ca-rep-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s cubic-bezier(.4,0,.2,1); min-width: 0; }
.ca-rep-bar-fill-g { background: linear-gradient(90deg, #e2e8f0, #cbd5e1); }
.ca-rep-bar-fill-b { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.ca-rep-bar-val { font-size: 12px; font-weight: 700; color: #475569; min-width: 50px; text-align: right; white-space: nowrap; }
.ca-rep-bar-val-b { color: #2563eb; }
.ca-rep-bar-val-empty { color: #cbd5e1; font-weight: 600; font-style: italic; }
.ca-rep-empty { padding: 32px 20px; text-align: center; color: #94a3b8; font-size: 13px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; line-height: 1.7; }

/* ========== 보장 진단 리포트 (미리보기/공유) ========== */
.cd-rep { display: flex; flex-direction: column; gap: 14px; }
.cd-rep-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: linear-gradient(135deg, #047857, #10b981); color: white; border-radius: 12px; }
.cd-rep-shield { font-size: 24px; }
.cd-rep-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }
.cd-rep-sub { font-size: 11px; opacity: 0.92; margin-top: 2px; }
.cd-rep-summary { display: flex; gap: 8px; flex-wrap: wrap; }
.cd-rep-sumcard { flex: 1; min-width: 130px; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.cd-rep-sumcard-blue { background: linear-gradient(135deg, #eff6ff, #dbeafe); border-color: #bfdbfe; }
.cd-rep-sumcard-green { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: #bbf7d0; }
.cd-rep-sumcard-pink { background: linear-gradient(135deg, #fdf2f8, #fce7f3); border-color: #fbcfe8; flex: 0 0 auto; min-width: 90px; }
.cd-rep-sumlabel { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #6366f1; margin-bottom: 4px; letter-spacing: 0.5px; }
.cd-rep-sumcard-green .cd-rep-sumlabel { color: #16a34a; }
.cd-rep-sumcard-pink .cd-rep-sumlabel { color: #db2777; }
.cd-rep-sumvalue { font-size: 14px; font-weight: 800; color: #1e40af; line-height: 1.3; }
.cd-rep-sumvalue-sm { font-size: 12px; font-weight: 600; color: #15803d; line-height: 1.4; }
.cd-rep-sumvalue-big { font-size: 22px; font-weight: 900; color: #be185d; line-height: 1.2; }
.cd-rep-sumvalue-unit { font-size: 11px; font-weight: 600; }
.cd-rep-cat { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.cd-rep-cathead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f8fafc; }
.cd-rep-catemoji { font-size: 16px; }
.cd-rep-catname { font-size: 14px; font-weight: 800; color: #1e293b; letter-spacing: -0.2px; }
.cd-rep-item { padding: 12px 14px; border-top: 1px dashed #e2e8f0; }
.cd-rep-itemname { font-size: 13px; font-weight: 700; color: #0f172a; margin-bottom: 6px; }
.cd-rep-itemdesc { font-size: 12px; color: #64748b; font-weight: 500; }
.cd-rep-tip { padding: 8px 12px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 6px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.cd-rep-tipicon { font-size: 10px; font-weight: 700; color: #92400e; }
.cd-rep-tiptext { font-size: 12px; color: #78350f; line-height: 1.6; white-space: pre-wrap; }
.cd-rep-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-rep-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600;
}

/* Responsive */
@media (max-width: 0px) /* PC고정: 원래 max-width 1024px */ {
  .ca-layout { flex-direction: column; }
  .ca-report-panel { position: static; }
}
@media (max-width: 0px) /* PC고정: 원래 max-width 640px */ {
  .ca-info-grid { grid-template-columns: 1fr; }
  .ca-item-row { grid-template-columns: 1fr; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
  .ca-report-card { padding: 16px; }
  .ca-bar-item { padding: 10px 12px; }
  .ca-xls-section { padding: 14px; }
  .cd-blk-grid { grid-template-columns: 1fr; }
  .cd-rep-summary { flex-direction: column; }
  .cd-rep-sumcard { min-width: 0; }
}

/* ========== Design B: Premium Magazine — Block/Section Overrides ========== */
/* 미리보기 mockup 및 공유 페이지에서 동일하게 적용 */

.design-b { background: #faf8f4; }

/* 카드/박스: rounded → sharp (border-radius 14-22 → 2-4) */
.design-b div[style*="border-radius:14px"],
.design-b div[style*="border-radius: 14px"],
.design-b div[style*="border-radius:12px"],
.design-b div[style*="border-radius: 12px"],
.design-b div[style*="border-radius:10px"],
.design-b div[style*="border-radius: 10px"],
.design-b div[style*="border-radius:16px"],
.design-b div[style*="border-radius: 16px"],
.design-b div[style*="border-radius:20px"],
.design-b div[style*="border-radius: 20px"],
.design-b div[style*="border-radius:22px"],
.design-b div[style*="border-radius: 22px"] {
  border-radius: 3px !important;
}

/* 가운데 둥근 아이콘만 동그라미 유지 (다른 라운드 박스만 sharp) */
.design-b div[style*="width:28px"][style*="height:28px"][style*="border-radius:50%"],
.design-b div[style*="width: 28px"][style*="height: 28px"][style*="border-radius: 50%"] {
  border-radius: 4px !important;
  background: #f7f0d8 !important;
}
.design-b div[style*="border-radius:50%"][style*="width:28px"] svg,
.design-b div[style*="border-radius:50%"][style*="width: 28px"] svg {
  stroke: #d4af37 !important;
}

/* 보라/블루 배경 → 매거진 베이지 */
.design-b div[style*="background:#eef2ff"],
.design-b div[style*="background: #eef2ff"],
.design-b div[style*="background:#e0e7ff"],
.design-b div[style*="background: #e0e7ff"],
.design-b div[style*="background:#f5f3ff"],
.design-b div[style*="background: #f5f3ff"],
.design-b div[style*="background:#ede9fe"],
.design-b div[style*="background: #ede9fe"],
.design-b div[style*="background:#f0f0ff"],
.design-b div[style*="background: #f0f0ff"] {
  background: #f7f0d8 !important;
}

/* 보라/블루 테두리 → 매거진 베이지 */
.design-b div[style*="border:1px solid #e0e7ff"],
.design-b div[style*="border:1px solid #c7d2fe"],
.design-b div[style*="border:1px solid #ddd6fe"],
.design-b div[style*="border:1px solid #e2e8f0"],
.design-b div[style*="border: 1px solid #e0e7ff"],
.design-b div[style*="border: 1px solid #c7d2fe"],
.design-b div[style*="border: 1px solid #ddd6fe"],
.design-b div[style*="border: 1px solid #e2e8f0"] {
  border-color: #e8e2d6 !important;
}

/* 카드 그림자 제거 (매거진은 평평) */
.design-b div[style*="box-shadow"] {
  box-shadow: none !important;
}

/* 흰색 카드: 매거진은 살짝 베이지 톤 + 상단 골드 라인 */
.design-b div[style*="background:white"][style*="border:1px solid"],
.design-b div[style*="background: white"][style*="border:1px solid"],
.design-b div[style*="background:#ffffff"][style*="border:1px solid"] {
  background: #ffffff !important;
  border: 1px solid #e8e2d6 !important;
  position: relative;
}

/* 보라/인디고 텍스트 → 골드 */
.design-b div[style*="color:#6366f1"],
.design-b div[style*="color: #6366f1"],
.design-b div[style*="color:#4f46e5"],
.design-b div[style*="color: #4f46e5"],
.design-b div[style*="color:#4338ca"],
.design-b div[style*="color: #4338ca"],
.design-b div[style*="color:#7c3aed"],
.design-b div[style*="color: #7c3aed"],
.design-b span[style*="color:#6366f1"],
.design-b span[style*="color: #6366f1"],
.design-b span[style*="color:#4f46e5"],
.design-b span[style*="color: #4f46e5"] {
  color: #d4af37 !important;
}

/* 강조 박스(좌측 보더): 보라 → 골드 */
.design-b div[style*="border-left:3px solid #6366f1"],
.design-b div[style*="border-left: 3px solid #6366f1"],
.design-b div[style*="border-left:3px solid #4f46e5"],
.design-b div[style*="border-left:3px solid #f59e0b"] {
  border-left-color: #d4af37 !important;
}

/* 카카오톡/연락 버튼은 그대로 두고, 일반 텍스트/링크 버튼만 매거진 톤 */
.design-b a[style*="background:#3b82f6"],
.design-b a[style*="background: #3b82f6"] {
  background: #d4af37 !important;
  color: #1a1a2e !important;
}

/* 노란/주황 메모 배지 → 골드 */
.design-b div[style*="background:#fef3c7"],
.design-b div[style*="background: #fef3c7"],
.design-b div[style*="background:#fde68a"],
.design-b div[style*="background: #fde68a"],
.design-b div[style*="background:#fffbeb"],
.design-b div[style*="background: #fffbeb"] {
  background: #f7f0d8 !important;
}

/* 그라데이션 노랑 → 골드 그라데이션 */
.design-b div[style*="linear-gradient(135deg,#fef3c7,#fde68a)"],
.design-b div[style*="linear-gradient(135deg, #fef3c7, #fde68a)"] {
  background: linear-gradient(135deg, #f7f0d8, #ede0b8) !important;
}

/* 그라데이션 인디고 → 골드 */
.design-b div[style*="linear-gradient(135deg,#0f172a"],
.design-b div[style*="linear-gradient(135deg, #0f172a"] {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
}

/* 텍스트 블록 / 일반 콘텐츠 글자색 - 짙은 차콜 */
.design-b div[style*="color:#1e293b"],
.design-b div[style*="color: #1e293b"] {
  color: #2c2c2c !important;
}

/* 텍스트 회색 톤 → 따뜻한 회색 */
.design-b div[style*="color:#64748b"],
.design-b div[style*="color: #64748b"],
.design-b div[style*="color:#94a3b8"],
.design-b div[style*="color: #94a3b8"] {
  color: #8b7e6a !important;
}

/* 보라/블루 그라데이션 배경 → 베이지 */
.design-b div[style*="linear-gradient(135deg,#eef2ff,#e0e7ff)"],
.design-b div[style*="linear-gradient(135deg, #eef2ff, #e0e7ff)"],
.design-b div[style*="linear-gradient(135deg,#e0e7ff,#c7d2fe)"],
.design-b div[style*="linear-gradient(135deg,#fafafe,#eef2ff)"],
.design-b div[style*="linear-gradient(135deg,#ede9fe,#ddd6fe)"] {
  background: linear-gradient(135deg, #ffffff, #faf8f4) !important;
}

/* 구분선 블록 — 골드 그라데이션 */
.design-b div[style*="border-top:1.5px solid #e2e8f0"],
.design-b div[style*="border-top: 1.5px solid #e2e8f0"] {
  border: none !important;
  height: 1px !important;
  background: linear-gradient(90deg, #d4af37 30%, transparent 100%) !important;
  margin: 16px 0 !important;
}

/* article 블록 - 카테고리 배지 골드 */
.design-b .proposal-article-category {
  background: #f7f0d8 !important;
  color: #d4af37 !important;
  border-color: #e8d898 !important;
}

/* article 블록 태그 - 매거진 톤 */
.design-b .proposal-article-tags span {
  background: #faf8f4 !important;
  color: #8b7e6a !important;
}

/* ===== Design B: 섹션 간격 (자동 번호 매기기 제거) ===== */
/* 미리보기 mockup 및 공유 페이지 공통 */
.design-b .b-section {
  position: relative;
  margin-bottom: 32px;
}
/* 구분선 블록: 위아래 여백 확보 + 진한 색으로 명확하게 구분 */
.prop-divider { border-top: 2px solid #94a3b8; margin: 14px 0; }
.design-b .prop-divider { margin: -18px 0 14px; border-top-color: #c9ba94; }

/* ===== Design B: 보장 분석 비교 리포트(.ca-rep) 매거진 톤 ===== */
.design-b .ca-rep-header { background: linear-gradient(135deg, #1a1a2e, #2c2c4a) !important; border-radius: 3px !important; }
.design-b .ca-rep-logo span { color: #d4af37 !important; }
.design-b .ca-rep-badges { background: #faf8f4 !important; border-color: #e8e2d6 !important; border-radius: 3px !important; }
.design-b .ca-rep-badge-a { background: #d4af37 !important; color: #1a1a2e !important; }
.design-b .ca-rep-badge-b { background: #e8e2d6 !important; color: #2c2c2c !important; }
.design-b .ca-rep-badge-text { color: #2c2c2c !important; }
.design-b .ca-rep-prem { background: #ffffff !important; border-color: #e8e2d6 !important; border-radius: 3px !important; }
.design-b .ca-rep-prem-title { color: #8b7e6a !important; }
.design-b .ca-rep-prem-label { color: #8b7e6a !important; }
.design-b .ca-rep-prem-bar-wrap { background: #f0ebe0 !important; border-radius: 3px !important; }
.design-b .ca-rep-prem-bar { border-radius: 3px !important; }
.design-b .ca-rep-prem-bar-gray { background: linear-gradient(90deg, #e8e2d6, #c9bfa6) !important; }
.design-b .ca-rep-prem-bar-blue { background: linear-gradient(90deg, #f4e4a6, #d4af37) !important; }
.design-b .ca-rep-prem-val { color: #2c2c2c !important; }
.design-b .ca-rep-prem-val-blue { color: #8b6914 !important; }
.design-b .ca-rep-prem-result { border-radius: 3px !important; }
.design-b .ca-rep-stat { border-color: #e8e2d6 !important; border-radius: 3px !important; }
.design-b .ca-rep-stat-up { background: #fffbeb !important; border-color: #fde68a !important; }
.design-b .ca-rep-stat-up .ca-rep-stat-num { color: #8b6914 !important; }
.design-b .ca-rep-stat-same { background: #faf8f4 !important; }
.design-b .ca-rep-stat-same .ca-rep-stat-num { color: #8b7e6a !important; }
.design-b .ca-rep-stat-down { background: #fdf2f8 !important; border-color: #f5d0d0 !important; }
.design-b .ca-rep-stat-new { background: #f7f0d8 !important; border-color: #e8d898 !important; }
.design-b .ca-rep-stat-new .ca-rep-stat-num { color: #8b6914 !important; }
.design-b .ca-rep-stat-label { color: #8b7e6a !important; }
.design-b .ca-rep-legend-item { color: #8b7e6a !important; }
.design-b .ca-rep-macro-title { background: linear-gradient(135deg, #faf8f4, #f7f0d8) !important; color: #2c2c2c !important; border-radius: 3px !important; border-left: 3px solid #d4af37; padding-left: 14px !important; }
.design-b .ca-rep-macro-chip { background: #f7f0d8 !important; color: #8b6914 !important; border-radius: 3px !important; }
.design-b .ca-rep-cat { border-color: #e8e2d6 !important; border-radius: 3px !important; }
.design-b .ca-rep-cat-head { background: #faf8f4 !important; color: #2c2c2c !important; }
.design-b .ca-rep-cat-summary { color: #8b6914 !important; }
.design-b .ca-rep-item { border-top-color: #efe9dc !important; }
.design-b .ca-rep-item-name { color: #2c2c2c !important; }
.design-b .ca-rep-chip { border-radius: 3px !important; }
.design-b .ca-rep-chip-up { background: #f7f0d8 !important; color: #8b6914 !important; }
.design-b .ca-rep-chip-down { background: #fde6e6 !important; color: #b45a5a !important; }
.design-b .ca-rep-chip-new { background: #ede4c6 !important; color: #8b6914 !important; }
.design-b .ca-rep-bar-tag { border-radius: 3px !important; }
.design-b .ca-rep-bar-tag-g { background: #efe9dc !important; color: #8b7e6a !important; }
.design-b .ca-rep-bar-tag-b { background: #f7f0d8 !important; color: #8b6914 !important; }
.design-b .ca-rep-bar-track { background: #f5f0e5 !important; border-radius: 3px !important; }
.design-b .ca-rep-bar-fill { border-radius: 3px !important; }
.design-b .ca-rep-bar-fill-g { background: linear-gradient(90deg, #e8e2d6, #c9bfa6) !important; }
.design-b .ca-rep-bar-fill-b { background: linear-gradient(90deg, #f4e4a6, #d4af37) !important; }
.design-b .ca-rep-bar-val { color: #2c2c2c !important; }
.design-b .ca-rep-bar-val-b { color: #8b6914 !important; }
.design-b .ca-rep-bar-val-empty { color: #c9bfa6 !important; }
.design-b .ca-rep-empty { background: #faf8f4 !important; border-color: #e8e2d6 !important; color: #8b7e6a !important; border-radius: 3px !important; }

/* ===== Design B: 보장 진단 리포트(.cd-rep) 매거진 톤 ===== */
.design-b .cd-rep-header { background: linear-gradient(135deg, #1a1a2e, #2c2c4a) !important; border-radius: 3px !important; }
.design-b .cd-rep-sub { color: rgba(244, 228, 166, 0.9) !important; opacity: 1 !important; }
.design-b .cd-rep-sumcard { border-radius: 3px !important; }
.design-b .cd-rep-sumcard-blue { background: #faf8f4 !important; border-color: #e8e2d6 !important; }
.design-b .cd-rep-sumcard-blue .cd-rep-sumlabel { color: #8b6914 !important; }
.design-b .cd-rep-sumcard-blue .cd-rep-sumvalue { color: #2c2c2c !important; }
.design-b .cd-rep-sumcard-green { background: #f7f0d8 !important; border-color: #e8d898 !important; }
.design-b .cd-rep-sumcard-green .cd-rep-sumlabel { color: #8b6914 !important; }
.design-b .cd-rep-sumcard-green .cd-rep-sumvalue-sm { color: #8b6914 !important; }
.design-b .cd-rep-sumcard-pink { background: #fffbeb !important; border-color: #fde68a !important; }
.design-b .cd-rep-sumcard-pink .cd-rep-sumlabel { color: #8b6914 !important; }
.design-b .cd-rep-sumcard-pink .cd-rep-sumvalue-big { color: #8b6914 !important; }
.design-b .cd-rep-cat { border-color: #e8e2d6 !important; border-radius: 3px !important; }
.design-b .cd-rep-cathead { background: #faf8f4 !important; }
.design-b .cd-rep-catname { color: #2c2c2c !important; }
.design-b .cd-rep-item { border-top-color: #efe9dc !important; }
.design-b .cd-rep-itemname { color: #2c2c2c !important; }
.design-b .cd-rep-itemdesc { color: #8b7e6a !important; }
.design-b .cd-rep-tip { background: #f7f0d8 !important; border-left-color: #d4af37 !important; border-radius: 0 3px 3px 0 !important; }
.design-b .cd-rep-tipicon { color: #8b6914 !important; }
.design-b .cd-rep-tiptext { color: #5c4e2f !important; }
.design-b .cd-rep-chip { border-radius: 3px !important; }

/* ===== 제안서 미리보기 스크롤 등장 효과 ===== */
.prev-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); }
.prev-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .prev-reveal { opacity: 1; transform: none; transition: none; } }


/* 고객용 페이지(body.pc-fixed 아님)는 좁은 화면에서 2열 폼을 1열로 — PC고정 중화에서 제외 */
@media (max-width: 768px) {
  body:not(.pc-fixed) .grid-2,
  body:not(.pc-fixed) .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   글자 크기(size) 드롭다운 — 드래그로 선택한 "구간만" 크기가 바뀐다.
   (제목(header)/정렬(align)은 줄 단위 포맷이라 그 행 전체가 바뀜)
   Quill 기본 CSS는 small/large/huge 라벨만 정의하므로 px 목록용 라벨을 직접 넣는다.
   ===================================================================== */
.ql-snow .ql-picker.ql-size { width: 68px; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: attr(data-value); }
.ql-snow .ql-picker.ql-size .ql-picker-label:not([data-value])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item:not([data-value])::before { content: '기본'; }
.ql-snow .ql-picker.ql-size .ql-picker-options { max-height: 320px; overflow-y: auto; }

/* =====================================================================
   제안서 텍스트 블록(텍스트 / 글 제목 / 글 본문) 인라인 서식 에디터
   전역 .ql-editor(모바일 폭 340px · min-height 600px · 18px)를
   작은 입력칸 크기로 되돌린다.
   ===================================================================== */
.tb-quill-wrapper .ql-container.ql-snow { border: none; background: #fff; }
.tb-quill-wrapper .ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 3px 4px;
  background: #fafbfc;
}
.tb-quill-wrapper .ql-toolbar.ql-snow button { width: 24px; height: 22px; padding: 2px 3px; }
.tb-quill-wrapper .ql-editor {
  min-height: inherit;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.7;
  color: #334155;
  overflow-wrap: anywhere;
}
.tb-quill-wrapper .ql-editor p { margin: 0 0 2px; }
.tb-quill-wrapper .ql-editor.ql-blank::before {
  left: 11px; right: 11px;
  font-style: normal;
  color: var(--muted-foreground);
}
/* 텍스트 블록도 제안서 본문 블록과 같은 앱 기본 글꼴 */
.tb-quill-wrapper .ql-editor, .tb-quill-wrapper .ql-editor *,
.prop-text-rich, .prop-text-rich * {
  font-family: 'Geist', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* 출력(미리보기/발행본): Quill이 만든 <p> 간격을 원래 텍스트 블록과 같게 */
.prop-text-rich p { margin: 0; }
.prop-text-rich p + p { margin-top: 2px; }
.prop-text-rich img { max-width: 100%; height: auto; }