* { -webkit-font-smoothing: antialiased; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,128,0.28); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.nav-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 10px;
  color: inherit; text-decoration: none;
  transition: background-color 120ms ease;
}
.nav-link:hover { background-color: rgba(120,120,128,0.10); }
.nav-link.active { background-color: rgba(10,132,255,0.12); color: #0a84ff; font-weight: 600; }

.card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -12px rgba(0,0,0,0.08);
}
@media (prefers-color-scheme: dark) {
  .card { background: rgba(28,28,30,0.6); border-color: rgba(255,255,255,0.08); }
}

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.fade-in { animation: fadeIn 180ms ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }


/* Dashboard system */
.dashboard-page { --ui-border: rgba(0,0,0,0.08); --ui-muted: #737373; }
.dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:22px; }
.dashboard-summary { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--ui-border); border-radius:12px; background:rgba(255,255,255,.58); color:#737373; font-size:12.5px; white-space:nowrap; }
.dashboard-summary strong { color:#262626; font-size:13px; }
.summary-divider { width:1px; height:14px; background:rgba(0,0,0,.10); }

.dashboard-tabs { display:flex; gap:6px; margin-bottom:12px; padding:4px; width:max-content; max-width:100%; border:1px solid rgba(0,0,0,.07); border-radius:13px; background:rgba(255,255,255,.55); }
.dash-tab-btn { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:9px; color:#737373; font-size:12.5px; font-weight:600; transition:all 120ms ease; }
.dash-tab-btn:hover { background:rgba(0,0,0,.04); color:#404040; }
.dash-tab-btn.active { background:#171717; color:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); }
.dash-tab-count { min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; border-radius:999px; background:rgba(0,0,0,.06); font-size:11px; line-height:1; }
.dash-tab-btn.active .dash-tab-count { background:rgba(255,255,255,.18); color:#fff; }

.dashboard-toolbar { display:flex; align-items:center; gap:10px; min-height:42px; margin-bottom:12px; padding:7px 10px; border:1px solid rgba(0,0,0,.06); border-radius:12px; background:rgba(255,255,255,.46); }
.bulk-select-control { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12.5px; font-weight:500; color:#525252; }
.job-checkbox { width:15px; height:15px; accent-color:#171717; cursor:pointer; }
.selected-count { color:#a3a3a3; font-size:12px; }
.dashboard-toolbar-actions { display:flex; gap:7px; margin-left:auto; }
.bulk-action, .secondary-action, .danger-action { border-radius:9px; padding:6px 9px; font-size:12px; font-weight:600; transition:all 120ms ease; }
.bulk-action { border:1px solid rgba(0,0,0,.10); background:rgba(255,255,255,.65); color:#525252; }
.bulk-action:disabled { opacity:.35; cursor:not-allowed; }
.bulk-action.danger, .danger-action { border:1px solid rgba(239,68,68,.20); color:#dc2626; background:rgba(255,255,255,.55); }
.bulk-action.danger:not(:disabled):hover, .danger-action:hover { background:#fef2f2; border-color:rgba(239,68,68,.30); }
.bulk-action.subtle { background:transparent; }
.secondary-action { border:1px solid rgba(0,0,0,.10); color:#525252; background:rgba(255,255,255,.55); }
.secondary-action:hover { background:#f5f5f5; }

.job-card { padding:16px; transition:border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.job-card.selected { border-color:rgba(23,23,23,.24); box-shadow:0 0 0 2px rgba(23,23,23,.04), 0 8px 24px -12px rgba(0,0,0,.10); }
.job-card-row { display:flex; align-items:flex-start; gap:11px; }
.job-select-wrap { padding-top:3px; cursor:pointer; flex:none; }
.job-card-link { display:flex; align-items:center; justify-content:space-between; gap:18px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.job-card-link:hover .job-title { opacity:.72; }
.job-title-row { display:flex; align-items:center; gap:8px; min-width:0; margin-bottom:4px; }
.job-title { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:600; transition:opacity 120ms ease; }
.job-product { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#a3a3a3; font-size:12.5px; }
.job-meta { color:#737373; font-size:12px; }
.job-chevron { color:#d4d4d4; font-size:20px; line-height:1; }
.job-actions { display:flex; align-items:center; gap:7px; margin-top:12px; padding-left:26px; }

.job-progress { margin:14px 0 0 26px; }
.job-progress-meta { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; color:#737373; font-size:11.5px; }
.job-progress-meta strong { color:#404040; font-size:11.5px; }
.job-progress-track { width:100%; height:6px; overflow:hidden; border-radius:999px; background:#ededed; }
.job-progress-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,#171717,#525252); transition:width 450ms ease; }
.progress-attention { display:flex; align-items:center; gap:7px; margin:12px 0 0 26px; padding:8px 10px; border:1px solid #fde68a; border-radius:10px; background:#fffbeb; color:#a16207; font-size:11.5px; font-weight:600; }
.completed-note { display:flex; align-items:center; gap:6px; margin:12px 0 0 26px; color:#15803d; font-size:11.5px; font-weight:600; }
.dashboard-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:46px 24px; text-align:center; color:#a3a3a3; font-size:12.5px; }
.dashboard-empty strong { color:#525252; font-size:13px; }

@media (prefers-color-scheme: dark) {
  .dashboard-page { --ui-border: rgba(255,255,255,.10); --ui-muted: #a3a3a3; }
  .dashboard-summary, .dashboard-tabs, .dashboard-toolbar { background:rgba(38,38,38,.45); border-color:rgba(255,255,255,.08); }
  .dashboard-summary strong { color:#e5e5e5; }
  .summary-divider { background:rgba(255,255,255,.10); }
  .dash-tab-btn:hover { background:rgba(255,255,255,.06); color:#e5e5e5; }
  .dash-tab-btn.active { background:#fafafa; color:#171717; }
  .dash-tab-btn.active .dash-tab-count { background:rgba(0,0,0,.08); color:#171717; }
  .bulk-select-control { color:#d4d4d4; }
  .job-checkbox { accent-color:#fafafa; }
  .bulk-action, .secondary-action { border-color:rgba(255,255,255,.10); background:rgba(38,38,38,.50); color:#d4d4d4; }
  .secondary-action:hover { background:#262626; }
  .bulk-action.danger, .danger-action { background:rgba(38,38,38,.35); border-color:rgba(248,113,113,.20); color:#f87171; }
  .bulk-action.danger:not(:disabled):hover, .danger-action:hover { background:rgba(127,29,29,.25); }
  .job-card.selected { border-color:rgba(255,255,255,.24); box-shadow:0 0 0 2px rgba(255,255,255,.03), 0 8px 24px -12px rgba(0,0,0,.25); }
  .job-meta { color:#a3a3a3; }
  .job-chevron { color:#525252; }
  .job-progress-meta { color:#a3a3a3; }
  .job-progress-meta strong { color:#d4d4d4; }
  .job-progress-track { background:#262626; }
  .job-progress-fill { background:linear-gradient(90deg,#fafafa,#a3a3a3); }
  .progress-attention { border-color:rgba(245,158,11,.22); background:rgba(120,53,15,.20); color:#fbbf24; }
  .completed-note { color:#4ade80; }
  .dashboard-empty strong { color:#d4d4d4; }
}

@media (max-width: 760px) {
  .dashboard-heading { flex-direction:column; gap:12px; }
  .dashboard-summary { width:100%; justify-content:center; }
  .dashboard-tabs { width:100%; overflow-x:auto; }
  .dash-tab-btn { flex:1; justify-content:center; white-space:nowrap; }
  .dashboard-toolbar { flex-wrap:wrap; }
  .dashboard-toolbar-actions { width:100%; justify-content:flex-end; }
  .job-actions { padding-left:0; }
  .job-progress, .progress-attention, .completed-note { margin-left:0; }
}

/* Notifications inbox — 대시보드와 같은 tabs/toolbar/checkbox 클래스를 재사용해 시각적으로 통일한다 */
.notif-group-header { display:flex; align-items:flex-start; gap:10px; padding:14px 16px; }
.notif-group-select-spacer { width:15px; flex:none; }
.notif-expand-btn { display:flex; align-items:flex-start; gap:8px; flex:1; min-width:0; text-align:left; background:none; border:none; padding:0; cursor:pointer; color:inherit; font:inherit; }
.notif-caret { color:#a3a3a3; font-size:12px; line-height:1.6; flex:none; width:10px; }
.notif-group-title-wrap { min-width:0; flex:1; }
.notif-group-title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:2px; }
.notif-group-meta { color:#737373; font-size:12px; }
.notif-title-link { font-size:12px; color:#737373; text-decoration:underline; white-space:nowrap; padding-top:2px; }
.notif-title-link:hover { color:#404040; }
.notif-unread-badge, .notif-done-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; flex:none; }
.notif-unread-badge { background:#fffbeb; border:1px solid #fde68a; color:#a16207; }
.notif-done-badge { background:rgba(0,0,0,.04); color:#a3a3a3; font-weight:600; }

.notif-item-list { border-top:1px solid rgba(0,0,0,.06); padding:6px 16px 12px 41px; display:flex; flex-direction:column; gap:2px; }
.notif-item { display:flex; align-items:flex-start; gap:9px; padding:8px 4px; border-radius:8px; }
.notif-item.unread { background:rgba(251,191,36,.08); }
.notif-item.acked, .notif-item.log-only { opacity:.6; }
.notif-item-dot { width:15px; flex:none; text-align:center; color:#d4d4d4; font-size:16px; line-height:1.1; }
.notif-item-body { min-width:0; }
.notif-item-message { font-size:13px; line-height:1.4; }
.notif-item-meta { color:#a3a3a3; font-size:11px; margin-top:2px; }

@media (prefers-color-scheme: dark) {
  .notif-caret { color:#737373; }
  .notif-group-meta { color:#a3a3a3; }
  .notif-title-link { color:#a3a3a3; }
  .notif-title-link:hover { color:#e5e5e5; }
  .notif-unread-badge { background:rgba(120,53,15,.20); border-color:rgba(245,158,11,.22); color:#fbbf24; }
  .notif-done-badge { background:rgba(255,255,255,.06); color:#737373; }
  .notif-item-list { border-color:rgba(255,255,255,.08); }
  .notif-item.unread { background:rgba(251,191,36,.06); }
  .notif-item-dot { color:#525252; }
  .notif-item-meta { color:#737373; }
}

@media (max-width: 760px) {
  .notif-group-header { flex-wrap:wrap; }
  .notif-item-list { padding-left:16px; }
}

/* ==========================================================================
   COPY FACTORY — GLOBAL BRAND SYSTEM
   Mainboard(생동감 있는 cobalt blue 그래픽 포스터, LOCKED)와 Internal pages
   (deep navy/charcoal 워크스페이스)를 cobalt blue / cream / restrained orange /
   동일 타이포그래피로 잇는다. OS 다크모드에 흔들리지 않는다 (index.html의
   darkMode:'class' 설정과 짝을 이룸). 네임스페이스: mb-* = Mainboard 전용,
   나머지는 internal workspace 전용 — Mainboard 보호를 위해 서로 겹치지 않는다.
   ========================================================================== */

:root {
  /* Mainboard — vivid flat cobalt poster */
  --mb-cobalt: #2454ff;
  --mb-cream: #f5efdd;
  --mb-cream-2: #e8dec0;
  --mb-core: #14151a;
  --mb-orange: #ff7a1a;
  --mb-text: #f7f3e7;

  /* Internal workspace — deep navy/charcoal + cobalt + cream + orange + green */
  --cf-navy: #10131b;
  --cf-navy-2: #161a24;
  --cf-navy-3: #0b0d13;
  --cf-cobalt: #3b68ff;
  --cf-cobalt-hover: #2c4fe0;
  --cf-cobalt-ink: #b9c8ff;
  --cf-cobalt-soft: rgba(59,104,255,.16);
  --cf-cream: #f5efdd;
  --cf-cream-ink: #2a2410;
  --cf-on-navy: #f3f1ea;
  --cf-on-navy-soft: #a9aebd;
  --cf-on-navy-faint: #6f7586;
  --cf-line: rgba(243,241,234,.10);
  --cf-line-strong: rgba(243,241,234,.20);
  --cf-orange: #ff8a2b;
  --cf-orange-bg: rgba(255,138,43,.14);
  --cf-orange-line: rgba(255,138,43,.35);
  --cf-danger: #ff6452;
  --cf-danger-bg: rgba(255,100,82,.14);
  --cf-success: #35c778;

  --cf-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --cf-radius: 10px;
}

html, body {
  background: var(--cf-navy) !important;
  color: var(--cf-on-navy) !important;
  color-scheme: dark;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Pretendard, sans-serif !important;
  letter-spacing: -.01em;
}

.cf-shell { min-height: 100vh; background: var(--cf-navy); }
.cf-main { margin-left: 64px; min-height: 100vh; background: var(--cf-navy) !important; position: relative; }

/* ================= SIDEBAR — slim editorial rail, 기본 narrow, hover 시 확장 ================= */

.cf-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 64px; z-index: 60;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--cf-navy-2); border-right: 1px solid var(--cf-line);
  transition: width 200ms cubic-bezier(.4,0,.2,1);
}
.cf-sidebar:hover, .cf-sidebar:focus-within {
  width: 236px;
  box-shadow: 18px 0 44px -18px rgba(0,0,0,.6);
}

.cf-sidebar-brand { padding: 20px 17px 17px; border-bottom: 1px solid var(--cf-line); flex: none; }
.copy-factory-brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }

.cf-mark {
  width: 28px; height: 28px; flex: none;
  display: grid; place-items: center;
  color: var(--cf-cobalt-ink);
  border: 1px solid var(--cf-line-strong);
  border-radius: 8px;
  background: rgba(59,104,255,.14);
}

.cf-sidebar-name { opacity: 0; transition: opacity 120ms ease; font-weight: 700; font-size: 14px; white-space: nowrap; }
.cf-sidebar:hover .cf-sidebar-name, .cf-sidebar:focus-within .cf-sidebar-name { opacity: 1; }

.cf-sidebar-nav { flex: 1; padding: 14px 8px; display: flex; flex-direction: column; gap: 2px; }

.cf-sidebar-foot {
  margin-top: auto; padding: 14px 17px 18px; border-top: 1px solid var(--cf-line);
  color: var(--cf-on-navy-faint); font-size: 10.5px; white-space: nowrap;
  opacity: 0; transition: opacity 120ms ease;
}
.cf-sidebar:hover .cf-sidebar-foot, .cf-sidebar:focus-within .cf-sidebar-foot { opacity: 1; }

.nav-link {
  display: flex !important; align-items: center; gap: 14px;
  height: 40px; padding: 0 13px !important;
  border-radius: 8px !important;
  color: var(--cf-on-navy-soft) !important;
  font-size: 13px; font-weight: 600;
  white-space: nowrap; text-decoration: none;
}
.nav-link > span:first-child {
  flex: none; width: 18px; text-align: center; font-size: 15px;
  filter: grayscale(1) brightness(1.8); opacity: .55;
  transition: opacity 150ms ease;
}
.nav-link > span:last-child { opacity: 0; transition: opacity 120ms ease; }
.cf-sidebar:hover .nav-link > span:last-child, .cf-sidebar:focus-within .nav-link > span:last-child { opacity: 1; }

.nav-link:hover { background: rgba(243,241,234,.06) !important; color: var(--cf-on-navy) !important; }
.nav-link:hover > span:first-child { opacity: .9; }

.nav-link.active {
  background: var(--cf-cobalt-soft) !important;
  color: #fff !important;
  box-shadow: inset 3px 0 0 var(--cf-cobalt) !important;
}
.nav-link.active > span:first-child { opacity: 1; }

body.cf-mainboard .cf-sidebar { display: none; }
body.cf-mainboard .cf-main { margin-left: 0; }

/* ================= INTERNAL PAGES — deep navy/charcoal workspace ================= */

#view { max-width: 1180px; padding: 36px 44px 90px; margin: 0 auto; position: relative; z-index: 1; }

#view h1 {
  font-size: clamp(22px, 2.1vw, 28px) !important;
  font-weight: 680 !important;
  letter-spacing: -.02em !important;
  line-height: 1.18 !important;
  color: var(--cf-on-navy) !important;
}
#view h2 { color: var(--cf-on-navy); letter-spacing: -.01em; }
#view p.text-neutral-500,
#view .text-neutral-500,
#view .text-neutral-400 { color: var(--cf-on-navy-soft) !important; }
#view a.underline { text-decoration-color: var(--cf-line-strong); color: var(--cf-cobalt-ink); }

.card {
  background: var(--cf-navy-2) !important;
  border: 1px solid var(--cf-line-strong) !important;
  border-radius: var(--cf-radius) !important;
  box-shadow: none !important;
  color: var(--cf-on-navy) !important;
}
.badge { border-radius: 999px !important; }

#view button[class*="bg-neutral-900"] { background: var(--cf-cobalt) !important; border-color: var(--cf-cobalt) !important; color: #fff !important; }
#view button[class*="bg-neutral-900"]:hover { background: var(--cf-cobalt-hover) !important; }

/* ================= 작업 현황 / 알림함 공용 (탭/툴바/리스트) ================= */

.dashboard-summary { background: var(--cf-navy-2) !important; border-color: var(--cf-line-strong) !important; color: var(--cf-on-navy-soft) !important; border-radius: 999px !important; }
.dashboard-summary strong { color: var(--cf-on-navy) !important; }
.summary-divider { background: var(--cf-line-strong) !important; }

.dashboard-tabs {
  gap: 20px !important; width: 100% !important; padding: 0 !important;
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--cf-line-strong) !important; border-radius: 0 !important;
}
.dash-tab-btn { padding: 10px 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--cf-on-navy-faint) !important; border-bottom: 2px solid transparent; box-shadow: none !important; }
.dash-tab-btn:hover { background: transparent !important; color: var(--cf-on-navy) !important; }
.dash-tab-btn.active { color: var(--cf-on-navy) !important; border-bottom-color: var(--cf-cobalt) !important; background: transparent !important; }
.dash-tab-count { background: var(--cf-navy-3) !important; color: var(--cf-on-navy-soft) !important; }
.dash-tab-btn.active .dash-tab-count { background: var(--cf-cobalt) !important; color: #fff !important; }

.dashboard-toolbar { border: 0 !important; border-bottom: 1px solid var(--cf-line) !important; border-radius: 0 !important; background: transparent !important; }
.bulk-select-control { color: var(--cf-on-navy-soft) !important; }
.job-checkbox { accent-color: var(--cf-cobalt) !important; }
.selected-count { color: var(--cf-on-navy-faint) !important; }
.bulk-action, .secondary-action { border-color: var(--cf-line-strong) !important; background: var(--cf-navy-2) !important; color: var(--cf-on-navy-soft) !important; }
.bulk-action:hover, .secondary-action:hover { background: var(--cf-navy-3) !important; }
.bulk-action.danger, .danger-action { color: var(--cf-danger) !important; border-color: rgba(255,100,82,.3) !important; background: var(--cf-navy-2) !important; }
.bulk-action.danger:hover, .danger-action:hover { background: var(--cf-danger-bg) !important; }

.job-card { border: 0 !important; border-bottom: 1px solid var(--cf-line) !important; border-radius: 0 !important; background: transparent !important; padding: 15px 4px !important; box-shadow: none !important; }
.job-card:hover { background: rgba(243,241,234,.03) !important; }
.job-card.selected { background: var(--cf-cobalt-soft) !important; box-shadow: inset 2px 0 0 var(--cf-cobalt) !important; }
.job-title { color: var(--cf-on-navy) !important; }
.job-product { color: var(--cf-on-navy-faint) !important; }
.job-meta { color: var(--cf-on-navy-soft) !important; }
.job-chevron { color: var(--cf-on-navy-faint) !important; }

.job-progress-meta { color: var(--cf-on-navy-soft) !important; }
.job-progress-meta strong { color: var(--cf-on-navy) !important; }

/* Production rail — segmented process line, 단계명 + %가 함께 보임 */
.job-rail { display: flex; gap: 4px; margin-top: 8px; }
.job-rail-seg { flex: 1; min-width: 0; }
.job-rail-seg > i { display: block; height: 5px; border-radius: 3px; background: var(--cf-line-strong); }
.job-rail-seg.done > i { background: var(--cf-cobalt); }
.job-rail-seg.current > i { background: linear-gradient(90deg, var(--cf-cobalt), var(--cf-line-strong)); }
.job-rail-seg span {
  display: block; margin-top: 6px; font-size: 9px; font-weight: 700; letter-spacing: .03em;
  color: var(--cf-on-navy-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.job-rail-seg.current span, .job-rail-seg.done span { color: var(--cf-on-navy-soft); }

.progress-attention { border: 0 !important; border-left: 3px solid var(--cf-orange) !important; border-radius: 6px !important; background: var(--cf-orange-bg) !important; color: #ffd9ad !important; }
.completed-note { color: var(--cf-success) !important; }
.dashboard-empty { color: var(--cf-on-navy-faint) !important; }
.dashboard-empty strong { color: var(--cf-on-navy) !important; }

/* ================= 알림함 — SYSTEM SIGNAL (붉은 경고창 대신 절제된 orange signal) ================= */

.notif-group-header { border-bottom: 1px solid var(--cf-line) !important; }
.notif-group-title { color: var(--cf-on-navy); }
.notif-group-meta, .notif-item-meta { color: var(--cf-on-navy-faint) !important; }
.notif-title-link { color: var(--cf-cobalt-ink) !important; }
.notif-caret { color: var(--cf-on-navy-faint) !important; }

.notif-unread-badge { background: var(--cf-orange-bg) !important; border: 1px solid var(--cf-orange-line) !important; color: var(--cf-orange) !important; }
.notif-done-badge { background: var(--cf-navy-3) !important; border: 1px solid var(--cf-line) !important; color: var(--cf-on-navy-faint) !important; }

.notif-item-list { border-color: var(--cf-line) !important; }
.notif-item-dot { color: var(--cf-on-navy-faint) !important; }
.notif-item-message { color: var(--cf-on-navy); }
.notif-item.unread { background: var(--cf-orange-bg) !important; border-radius: 8px; }
.notif-item.unread .notif-item-message::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cf-orange); margin-right: 7px; vertical-align: middle;
}

/* ================= JOB DETAIL — brief(navy) / output(cream, "종이처럼 떠 보이게") ================= */

.jd-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; margin-top: 6px; }
.jd-brief, .jd-output { min-width: 0; }

.jd-output .card { background: var(--cf-cream) !important; border-color: rgba(42,36,16,.16) !important; color: var(--cf-cream-ink) !important; box-shadow: 0 14px 34px -20px rgba(0,0,0,.5) !important; }
.jd-output .copy-text { font-size: 14.5px; line-height: 1.55; }
#view .jd-output h2,
#view .jd-output .text-neutral-500,
#view .jd-output .text-neutral-400 { color: rgba(42,36,16,.58) !important; }
.jd-output .edit-btn, .jd-output .regen-btn { color: rgba(42,36,16,.55) !important; }
.jd-output .edit-btn:hover, .jd-output .regen-btn:hover { background: rgba(42,36,16,.08) !important; }
.jd-output .copy-edit-input { color: var(--cf-cream-ink) !important; border-color: rgba(42,36,16,.24) !important; background: rgba(255,255,255,.4) !important; }

/* ================= 폼 ================= */

#view input:not([type="checkbox"]):not([type="file"]),
#view select,
#view textarea {
  background: var(--cf-navy-2) !important;
  border: 1px solid var(--cf-line-strong) !important;
  border-radius: 9px !important;
  color: var(--cf-on-navy) !important;
  box-shadow: none !important;
}
#view input:focus, #view select:focus, #view textarea:focus { outline: none !important; border-color: var(--cf-cobalt) !important; }

/* ==========================================================================
   MAINBOARD — BRIEF INTAKE REACTOR (LOCKED)
   전용 mb-* 네임스페이스. 밝고 선명한 flat cobalt blue 포스터, sidebar 없음,
   KPI/대시보드 위젯 없음 — 오직 brief input + category interaction.
   ========================================================================== */

body.cf-mainboard .cf-main { background: var(--mb-cobalt) !important; }
body.cf-mainboard #view { max-width: none !important; padding: 0 !important; margin: 0 !important; min-height: 100vh; }
body.cf-mainboard #critical-banner:empty { display: none; }

.mb-stage { position: relative; min-height: 100vh; width: 100%; display: flex; flex-direction: column; overflow: hidden; }

.mb-kicker { display: flex; align-items: center; gap: 10px; padding: 24px 30px 0; color: var(--mb-text); }
.mb-kicker .cf-mark { color: var(--mb-text); border-color: rgba(247,243,231,.35); background: rgba(247,243,231,.1); }
.mb-kicker span:last-child { font: 700 12px/1 -apple-system, sans-serif; letter-spacing: .08em; }

.mb-copy {
  position: absolute; left: 6vw; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; z-index: 4; pointer-events: none;
}
.mb-copy div {
  font-size: clamp(38px, 5.6vw, 88px); font-weight: 800; letter-spacing: -.02em;
  line-height: .98; color: var(--mb-text);
}

.mb-reactor-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; justify-content: center; padding: 96px 16px 40px; position: relative; z-index: 3; }

.mb-reactor-circle { position: relative; width: min(50vw, 600px); aspect-ratio: 1 / 1; }
.mb-reactor {
  position: absolute; inset: 15%; cursor: pointer; border: 0; background: none; padding: 0;
  transition: filter 200ms ease;
}
.mb-reactor:focus-visible { outline: 2px solid var(--mb-cream); outline-offset: 6px; border-radius: 50%; }

.mb-reactor-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mb-petal-a, .mb-petal-b { transition: transform 260ms ease; }
.mb-petal-a { fill: var(--mb-cream); }
.mb-petal-b { fill: var(--mb-cream-2); }
.mb-reactor-petals { transform-origin: 300px 300px; transition: transform 260ms ease; }
.mb-reactor-ring { fill: none; stroke: var(--mb-orange); stroke-width: 5; transition: stroke 200ms ease; }
.mb-reactor-core {
  fill: var(--mb-core);
  transform-box: fill-box; transform-origin: center;
  animation: mbBreathe 6s ease-in-out infinite;
}
.mb-reactor-face circle, .mb-reactor-face rect { fill: var(--mb-cream); }
.mb-reactor-face circle { transform-box: fill-box; transform-origin: center; animation: mbBlink 6s ease-in-out infinite; }

@keyframes mbBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes mbBlink { 0%, 83.333% { transform: scaleY(1); } 91.667% { transform: scaleY(.12); } 100% { transform: scaleY(1); } }

.mb-reactor.mb-drag-active .mb-reactor-petals { transform: scale(1.06); }
.mb-reactor.mb-drag-active .mb-reactor-ring { stroke: var(--mb-cream); }
.mb-reactor.mb-intake .mb-reactor-core { animation: mbIntake 620ms ease; }
@keyframes mbIntake { 0% { transform: scale(1); } 42% { transform: scale(1.14); } 100% { transform: scale(1); } }

.mb-categories { position: absolute; inset: 0; pointer-events: none; }
.mb-cat { position: absolute; pointer-events: auto; transform: translate(-50%, -50%); text-decoration: none; }
.mb-cat-1 { left: 50%; top: 4%; }
.mb-cat-2 { left: 88%; top: 26%; }
.mb-cat-3 { left: 88%; top: 74%; }
.mb-cat-4 { left: 50%; top: 96%; }
.mb-cat-5 { left: 12%; top: 74%; }
.mb-cat-6 { left: 12%; top: 26%; }

.mb-cat span {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: rgba(20,21,26,.16); color: var(--mb-text);
  font: 600 12px/1 -apple-system, sans-serif; letter-spacing: .01em;
  white-space: nowrap;
  transition: transform 180ms ease, background-color 180ms ease, color 180ms ease;
}
.mb-cat:hover span, .mb-cat:focus-visible span {
  transform: scale(1.16);
  background: var(--mb-cream); color: var(--mb-cobalt);
}

.mb-reactor-label { text-align: center; color: var(--mb-text); }
.mb-reactor-label strong { display: block; font-size: 15px; font-weight: 700; }
.mb-reactor-label span { display: block; margin-top: 3px; font-size: 12px; color: rgba(247,243,231,.7); }

.mb-pick-btn {
  padding: 10px 22px; border-radius: 999px; border: 1px solid rgba(247,243,231,.4);
  background: rgba(247,243,231,.12); color: var(--mb-text);
  font: 700 12.5px/1 -apple-system, sans-serif; cursor: pointer;
  transition: all 150ms ease;
}
.mb-pick-btn:hover { background: var(--mb-cream); color: var(--mb-cobalt); border-color: var(--mb-cream); }

.mb-upload-msg { min-height: 20px; text-align: center; padding-bottom: 22px; font: 600 12px/1.4 -apple-system, sans-serif; color: rgba(247,243,231,.75); }
.mb-upload-msg.success { color: #eaffef; }
.mb-upload-msg.error { color: #ffe3da; }

/* ================= RESPONSIVE ================= */

@media (max-width: 980px) {
  .cf-sidebar { width: 60px; }
  .cf-sidebar:hover, .cf-sidebar:focus-within { width: 220px; }
  .cf-main { margin-left: 60px; }
  #view { padding: 32px 22px 70px; }
}

@media (max-width: 760px) {
  #view { padding: 26px 16px 56px; }
  .jd-grid { grid-template-columns: 1fr; }

  .mb-kicker { padding: 20px 20px 0; }
  .mb-copy { position: static; transform: none; padding: 22px 20px 0; text-align: left; }
  .mb-copy div { font-size: clamp(30px, 11vw, 44px); }
  .mb-reactor-wrap { padding: 18px 16px 30px; }
  .mb-reactor-circle { width: min(64vw, 280px); aspect-ratio: auto; height: auto; }
  .mb-reactor { position: static; inset: auto; width: min(64vw, 280px); aspect-ratio: 1 / 1; margin: 0 auto; }
  .mb-categories { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
  .mb-cat { position: static; transform: none; }
  .mb-cat span { display: block; text-align: center; }
}

/* 한글은 어절 단위로 끊기는 편이 읽기 좋다 (좁은 화면 배너/본문에서 특히). */
#critical-banner, #view { word-break: keep-all; }

@media (prefers-reduced-motion: reduce) {
  .mb-reactor-core, .mb-reactor-face circle { animation: none !important; }
}


/* ===== WORK STATUS FINAL — CREAM / COBALT / ORANGE ===== */
body.cf-workpage {
  --work-bg: #f7f3e8;
  --work-paper: #fffaf0;
  --work-ink: #111827;
  --work-muted: #71809a;
  --work-line: #e5dfd3;
  --work-blue: #1769ff;
  --work-blue-soft: #eaf3ff;
  --work-orange: #ff8a1f;
  --work-green: #159866;
  background: var(--work-bg) !important;
  color: var(--work-ink) !important;
  color-scheme: light;
}
body.cf-workpage .cf-shell,
body.cf-workpage .cf-main { background: var(--work-bg) !important; }
body.cf-workpage .cf-main { margin-left: 188px; }
body.cf-workpage #view { max-width: 1580px; padding: 30px 28px 64px; }

/* Sidebar: quiet ivory canvas, cobalt only as a signal */
body.cf-workpage .cf-sidebar {
  width: 188px; background: rgba(255,250,240,.94); border-right: 1px solid var(--work-line);
  box-shadow: none; color: var(--work-ink);
}
body.cf-workpage .cf-sidebar:hover,
body.cf-workpage .cf-sidebar:focus-within { width: 188px; box-shadow: none; }
body.cf-workpage .cf-sidebar-brand { padding: 24px 22px 20px; border-bottom: 0; }
body.cf-workpage .copy-factory-brand { color: var(--work-blue); }
body.cf-workpage .cf-mark { border: 0; background: transparent; color: var(--work-blue); width: 26px; height: 26px; }
body.cf-workpage .cf-sidebar-name { opacity: 1; color: var(--work-blue); font-size: 13px; letter-spacing: .09em; text-transform: uppercase; }
body.cf-workpage .cf-sidebar-nav { padding: 22px 10px; gap: 6px; }
body.cf-workpage .nav-link {
  height: 44px; padding: 0 14px !important; gap: 12px; border-radius: 8px !important;
  color: #172235 !important; font-size: 14px; font-weight: 650;
}
body.cf-workpage .nav-link > span:last-child { opacity: 1; }
body.cf-workpage .nav-glyph { width: 22px; height: 22px; display: grid; place-items: center; color: #101827; }
body.cf-workpage .nav-glyph svg { width: 19px; height: 19px; display: block; }
body.cf-workpage .nav-link:hover { background: #f0eee7 !important; color: var(--work-ink) !important; }
body.cf-workpage .nav-link.active { background: var(--work-blue-soft) !important; color: var(--work-blue) !important; box-shadow: inset 3px 0 0 var(--work-blue) !important; }
body.cf-workpage .nav-link.active .nav-glyph { color: var(--work-blue); }
body.cf-workpage .cf-sidebar-foot {
  opacity: 1; border-top: 0; color: #8792a4; font-size: 10px; line-height: 1.45; letter-spacing: .16em;
  padding: 18px 24px 28px;
}
body.cf-workpage .cf-sidebar-foot::before { content: "IDEAS IN.\A COPY OUT."; white-space: pre; }
body.cf-workpage .cf-sidebar-foot { font-size: 0; }
body.cf-workpage .cf-sidebar-foot::before { font-size: 10px; }

/* Notification becomes a small signal, not a giant bar */
body.cf-workpage #critical-banner { position: fixed; right: 28px; bottom: 24px; z-index: 80; }
body.cf-workpage #critical-banner > div {
  width: auto; max-width: 420px; border: 1px solid #ffd3a6 !important; border-radius: 12px;
  background: #fff6e8 !important; color: #9a5212 !important; box-shadow: 0 10px 28px rgba(49,42,31,.10);
  padding: 10px 14px !important;
}

.work-status-page { position: relative; color: var(--work-ink); }
.work-status-header { min-height: 150px; display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; position: relative; margin-bottom: 2px; overflow: hidden; }
.work-heading-copy { position: relative; z-index: 2; padding-top: 2px; }
.work-eyebrow { display: block; color: var(--work-blue); font-size: 13px; font-weight: 800; letter-spacing: .18em; margin-bottom: 8px; }
body.cf-workpage #view .work-heading-copy h1 { margin: 0 0 8px; color: var(--work-ink) !important; font-size: clamp(36px,3.2vw,48px) !important; line-height: .98 !important; font-weight: 820 !important; letter-spacing: -.045em !important; }
.work-heading-copy p { margin: 0; color: var(--work-muted) !important; font-size: 15.5px; line-height: 1.55; }
.work-header-motif { position: absolute; right: -42px; top: -66px; width: 500px; height: 250px; pointer-events: none; }
.work-flower { position: absolute; right: -14px; top: -36px; width: 286px; height: 270px; transform: rotate(7deg); }
.work-flower svg { width: 100%; height: 100%; display: block; overflow: visible; }
.work-microcopy { position: absolute; right: 292px; top: 92px; color: #8090aa; font-size: 12px; font-weight: 760; line-height: 1.45; letter-spacing: .18em; }
.work-microcopy i { display: block; width: 24px; height: 2px; background: var(--work-orange); margin-top: 10px; }

.work-status-controls { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 10px 0 18px; border-bottom: 1px solid var(--work-line); }
body.cf-workpage .dashboard-tabs { width: auto !important; display: flex; gap: 10px !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.cf-workpage .dash-tab-btn {
  min-height: 44px; padding: 0 18px !important; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--work-line) !important; border-radius: 999px !important; background: rgba(255,250,240,.72) !important;
  color: var(--work-ink) !important; font-size: 14px; font-weight: 700; box-shadow: none !important;
}
body.cf-workpage .dash-tab-btn.active { background: var(--work-blue) !important; color: #fff !important; border-color: var(--work-blue) !important; }
body.cf-workpage .dash-tab-count { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eef0f3 !important; color: #1d2636 !important; font-size: 13px; }
body.cf-workpage .dash-tab-btn.active .dash-tab-count { background: rgba(255,255,255,.22) !important; color: #fff !important; }
.work-filter-row { display: flex; align-items: center; gap: 10px; min-width: 420px; }
.work-search { position: relative; flex: 1; height: 46px; }
.work-search span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%) rotate(-14deg); color: var(--work-blue); font-size: 17px; line-height: 1; pointer-events: none; }
/* WORK SEARCH FINAL — 네이티브 search input 데코레이션(Chrome inset field)이
   커스텀 border 밑에 겹쳐 보여 "pill 안에 pill" 처럼 보이던 버그의 원인이었음.
   appearance:none으로 네이티브 렌더링을 완전히 제거해야 단일 border만 남는다. */
body.cf-workpage #view #work-search-input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 16px 0 42px !important;
  border: 1px solid #d7e4f5 !important;
  border-radius: 999px !important;
  background: #edf5ff !important;
  color: var(--work-ink) !important;
  font-size: 13.5px !important;
  line-height: normal !important;
  box-shadow: none !important;
}
body.cf-workpage #view #work-search-input::-webkit-search-decoration,
body.cf-workpage #view #work-search-input::-webkit-search-cancel-button,
body.cf-workpage #view #work-search-input::-webkit-search-results-button,
body.cf-workpage #view #work-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none !important;
  display: none !important;
}
body.cf-workpage #view #work-search-input::placeholder { color: #7b8ba2 !important; opacity: 1; }
body.cf-workpage #view #work-search-input:focus {
  outline: none !important;
  border-color: rgba(23,105,255,.4) !important;
  box-shadow: 0 0 0 4px rgba(23,105,255,.08) !important;
}
body.cf-workpage #view .work-source-filter { height: 44px; min-width: 132px; padding: 0 36px 0 15px; border: 1px solid var(--work-line) !important; border-radius: 999px !important; background: #fffdf8 !important; color: var(--work-ink) !important; font-size: 13px !important; box-shadow: none !important; }

.work-layout { display: grid; grid-template-columns: minmax(0,1fr) 176px; gap: 22px; align-items: start; padding-top: 0; }
.work-list-panel { min-width: 0; }
body.cf-workpage .dashboard-toolbar {
  min-height: 58px; margin: 0 !important; padding: 0 10px !important; display: flex; align-items: center; gap: 10px;
  border: 0 !important; border-bottom: 1px solid var(--work-line) !important; background: transparent !important;
}
body.cf-workpage .bulk-select-control { color: var(--work-ink) !important; font-size: 13.5px; font-weight: 680; }
body.cf-workpage .job-checkbox { width: 18px; height: 18px; accent-color: var(--work-blue) !important; }
body.cf-workpage .selected-count { color: var(--work-muted) !important; font-size: 13px; }
.work-sort-btn { margin-left: auto; color: #5d6c84; font-size: 13px; font-weight: 650; background: transparent; border: 0; cursor: pointer; }
body.cf-workpage .dashboard-toolbar-actions { margin-left: 0; }
body.cf-workpage .bulk-action { border-radius: 9px !important; background: #fff8ee !important; border: 1px solid var(--work-line) !important; color: #9b4d3f !important; font-size: 12.5px; }

.work-stage-legend { display: grid; grid-template-columns: 32px minmax(330px,1fr) 320px 112px 28px; gap: 14px; align-items: end; min-height: 36px; padding: 0 10px; }
.work-stage-legend > div { display: grid; grid-template-columns: repeat(5,1fr); color: #7b8ba2; font-size: 9px; font-weight: 760; letter-spacing: .03em; text-align: center; }
.work-stage-legend b { font-weight: inherit; }

.work-job-list { display: flex; flex-direction: column; gap: 4px; }
.work-row {
  min-height: 88px; display: grid; grid-template-columns: 32px minmax(0,1fr) 28px; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--work-line); border-radius: 15px; background: rgba(255,250,240,.58);
  transition: background-color .14s ease, border-color .14s ease, transform .14s ease;
}
.work-row:hover { background: #fffdf8; border-color: #d8d0c2; }
.work-row.selected { background: var(--work-blue-soft); border-color: #bfd7ff; }
.work-row[data-status="needs_attention"], .work-row[data-status="needs_review"], .work-row[data-status="failed"] { background: #edf5ff; }
.work-check { display: grid; place-items: center; }
.work-row-main { min-width: 0; display: grid; grid-template-columns: 64px minmax(280px,1fr) 320px 112px; gap: 14px; align-items: center; text-decoration: none; color: inherit; }
.work-mark { width: 64px; height: 64px; display: block; }
.work-mark svg { width: 64px; height: 64px; display: block; }
.work-row-copy { min-width: 0; display: block; }
.work-row-titleline { min-width: 0; display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.work-row-titleline strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--work-ink); font-size: 16px; font-weight: 760; letter-spacing: -.015em; }
.work-row-meta { display: block; color: #71809a; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-row-meta i { color: #c2c8d0; font-style: normal; padding: 0 5px; }
body.cf-workpage .badge { flex: none; padding: 4px 8px !important; border: 0 !important; border-radius: 6px !important; background: #dcebff !important; color: var(--work-blue) !important; font-size: 11.5px !important; font-weight: 760 !important; }
.work-row[data-status="needs_attention"] .badge,
.work-row[data-status="needs_review"] .badge,
.work-row[data-status="failed"] .badge { background: #fff0df !important; color: var(--work-orange) !important; }
.work-row[data-status="done"] .badge { background: #e5f7ef !important; color: var(--work-green) !important; }
.work-row[data-status="ignored"] .badge { background: #eceae5 !important; color: #5f6670 !important; }

.work-row-rail { min-width: 0; }
.work-mini-rail { position: relative; display: grid; grid-template-columns: repeat(5,1fr); align-items: center; height: 28px; }
.work-mini-rail::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 2px; transform: translateY(-50%); background: #ccd1d5; }
.work-mini-node { position: relative; z-index: 1; justify-self: center; width: 15px; height: 15px; border-radius: 50%; background: var(--work-bg); border: 2px solid #c7ccd1; }
.work-mini-node.done, .work-mini-node.current { background: var(--work-blue); border-color: var(--work-blue); }
.work-mini-node.current { box-shadow: 0 0 0 4px rgba(23,105,255,.10); }
.work-mini-rail.attention .work-mini-node.current { background: var(--work-bg); border: 3px solid var(--work-orange); box-shadow: 0 0 0 4px rgba(255,138,31,.12); }
.work-static-state { text-align: center; color: #71809a; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.work-row-progress strong { display: block; color: var(--work-ink); font-size: 23px; line-height: 1; font-weight: 820; letter-spacing: -.025em; }
.work-row-progress small { display: block; margin-top: 7px; color: #71809a; font-size: 12.5px; white-space: nowrap; }

.work-row-menu { position: relative; }
.work-row-menu summary { list-style: none; width: 28px; height: 38px; display: grid; place-items: center; border-radius: 8px; color: #152033; cursor: pointer; font-size: 23px; line-height: 1; }
.work-row-menu summary::-webkit-details-marker { display: none; }
.work-row-menu summary:hover { background: #ecebe7; }
.work-row-menu-pop { position: absolute; right: 0; top: 40px; z-index: 50; width: 170px; padding: 6px; border: 1px solid var(--work-line); border-radius: 11px; background: #fffdf8; box-shadow: 0 14px 34px rgba(45,38,28,.14); }
.work-row-menu-pop a, .work-row-menu-pop button { width: 100%; display: block; padding: 9px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--work-ink); text-align: left; font-size: 12.5px; cursor: pointer; text-decoration: none; }
.work-row-menu-pop a:hover, .work-row-menu-pop button:hover { background: #f2eee6; }
.work-row-menu-pop .danger { color: #b54138; }

.work-production-card {
  position: sticky; top: 24px; min-height: 620px; margin-top: 0; padding: 28px 22px 24px; border-radius: 22px;
  background: linear-gradient(180deg,#1769ff 0%,#1261ef 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between;
}
.work-production-title { font-size: 13px; line-height: 1.4; font-weight: 760; letter-spacing: .18em; }
.work-production-accent { display: block; width: 24px; height: 2px; background: var(--work-orange); margin-top: 16px; }
.work-production-stats { display: grid; gap: 22px; margin-top: 12px; }
.work-production-stats strong { display: block; font-size: 34px; line-height: 1; font-weight: 800; }
.work-production-stats span { display: block; margin-top: 4px; font-size: 12px; opacity: .9; }
.work-production-bottom { border-top: 1px solid rgba(255,255,255,.34); padding-top: 24px; }
.work-orbits { height: 62px; position: relative; margin-bottom: 22px; }
.work-orbits i { position: absolute; top: 4px; width: 54px; height: 54px; border-radius: 50%; }
.work-orbits i:first-child { left: 0; background: #fff5df; }
.work-orbits i:last-child { left: 33px; background: var(--work-orange); }
.work-production-bottom > span { display: block; font-size: 14px; font-weight: 760; line-height: 1.45; letter-spacing: .15em; }

body.cf-workpage .dashboard-empty { min-height: 240px; border: 1px dashed #d8d0c2; border-radius: 15px; background: rgba(255,250,240,.5); color: #7b8798 !important; }
body.cf-workpage .dashboard-empty strong { color: var(--work-ink) !important; font-size: 15px; }

@media (max-width: 1240px) {
  body.cf-workpage .cf-main { margin-left: 150px; }
  body.cf-workpage .cf-sidebar, body.cf-workpage .cf-sidebar:hover, body.cf-workpage .cf-sidebar:focus-within { width: 150px; }
  body.cf-workpage .cf-sidebar-name { display: inline; opacity: 1; font-size: 11px; }
  body.cf-workpage .nav-link > span:last-child { display: inline; opacity: 1; font-size: 12px; }
  body.cf-workpage .cf-sidebar-foot { display: block; }
  body.cf-workpage .cf-sidebar-brand { padding-left: 16px; padding-right: 12px; }
  body.cf-workpage .cf-sidebar-nav { padding-left: 8px; padding-right: 8px; }
  body.cf-workpage .nav-link { height: 42px; padding: 0 10px !important; justify-content: flex-start; gap: 8px; }
  body.cf-workpage #view { padding-left: 18px; padding-right: 18px; }
  .work-status-header { min-height: 142px; }
  .work-header-motif { right: -70px; transform: scale(.88); transform-origin: right top; }
  .work-status-controls { gap: 12px; }
  body.cf-workpage .dashboard-tabs { gap: 6px !important; }
  body.cf-workpage .dash-tab-btn { min-height: 40px; padding: 0 12px !important; gap: 7px; font-size: 12.5px; }
  body.cf-workpage .dash-tab-count { min-width: 24px; height: 24px; font-size: 12px; }
  .work-filter-row { min-width: 320px; }
  .work-search { height: 40px; }
  body.cf-workpage #view .work-source-filter { height: 40px; min-width: 112px; }
  .work-layout { grid-template-columns: minmax(0,1fr) 136px; gap: 14px; }
  .work-production-card { display: flex; min-height: 560px; padding: 22px 16px 20px; border-radius: 18px; }
  .work-production-stats { gap: 18px; }
  .work-production-stats strong { font-size: 28px; }
  .work-production-bottom > span { font-size: 12px; }
  .work-orbits { transform: scale(.82); transform-origin: left center; margin-bottom: 10px; }
  .work-row { min-height: 82px; padding-left: 8px; padding-right: 8px; }
  .work-row-main { grid-template-columns: 54px minmax(150px,1fr) minmax(180px,230px) 84px; gap: 10px; }
  .work-mark, .work-mark svg { width: 54px; height: 54px; }
  .work-row-titleline strong { font-size: 14px; }
  .work-row-meta { font-size: 11.5px; }
  .work-row-progress strong { font-size: 20px; }
  .work-row-progress small { font-size: 11px; }
  .work-stage-legend { grid-template-columns: 32px minmax(214px,1fr) minmax(180px,230px) 84px 28px; gap: 10px; }
  .work-stage-legend > div { font-size: 7.5px; }
}

@media (max-width: 760px) {
  body.cf-workpage .cf-main { margin-left: 72px; }
  body.cf-workpage .cf-sidebar, body.cf-workpage .cf-sidebar:hover, body.cf-workpage .cf-sidebar:focus-within { width: 72px; }
  body.cf-workpage .cf-sidebar-name, body.cf-workpage .nav-link > span:last-child, body.cf-workpage .cf-sidebar-foot { display: none; }
  body.cf-workpage .cf-sidebar-brand { padding-left: 22px; }
  body.cf-workpage .cf-sidebar-nav { padding-left: 10px; padding-right: 10px; }
  body.cf-workpage .nav-link { padding: 0 !important; justify-content: center; }
  body.cf-workpage #view { padding: 24px 16px 48px; }
  .work-layout { grid-template-columns: 1fr; }
  .work-production-card { display: none; }
  .work-status-header { min-height: 110px; }
  .work-header-motif { opacity: .35; right: -80px; }
  .work-status-controls { align-items: stretch; flex-direction: column; }
  body.cf-workpage .dashboard-tabs { width: 100% !important; overflow-x: auto; }
  .work-filter-row { min-width: 0; width: 100%; }
  .work-stage-legend { display: none; }
  .work-row { grid-template-columns: 28px minmax(0,1fr) 26px; }
  .work-row-main { grid-template-columns: 52px minmax(0,1fr) 84px; gap: 10px; }
  .work-mark, .work-mark svg { width: 52px; height: 52px; }
  .work-row-rail { display: none; }
  .work-row-titleline strong { font-size: 14px; }
  .work-row-progress strong { font-size: 20px; }
}


/* ===== CF FINAL INTERACTION PATCH V5 ===== */

/* WORK STATUS */
/* 기본은 아이콘 레일, hover 시 메뉴명이 펼쳐짐 */
@media (min-width: 981px) {
  body.cf-workpage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;
    transition:
      width .2s cubic-bezier(.4,0,.2,1),
      box-shadow .2s ease !important;
  }

  body.cf-workpage .cf-sidebar:hover,
  body.cf-workpage .cf-sidebar:focus-within {
    width: 210px !important;
    box-shadow: 18px 0 42px rgba(26,35,52,.12) !important;
  }

  body.cf-workpage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-workpage .cf-sidebar-name,
  body.cf-workpage .nav-link > span:last-child,
  body.cf-workpage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;
    transition: opacity .12s ease .04s !important;
  }

  body.cf-workpage .cf-sidebar:hover .cf-sidebar-name,
  body.cf-workpage .cf-sidebar:focus-within .cf-sidebar-name,
  body.cf-workpage .cf-sidebar:hover .nav-link > span:last-child,
  body.cf-workpage .cf-sidebar:focus-within .nav-link > span:last-child,
  body.cf-workpage .cf-sidebar:hover .cf-sidebar-foot,
  body.cf-workpage .cf-sidebar:focus-within .cf-sidebar-foot {
    opacity: 1 !important;
  }

  body.cf-workpage .cf-sidebar-nav {
    padding: 18px 8px !important;
    gap: 4px !important;
  }

  body.cf-workpage .nav-link {
    height: 46px !important;
    padding: 0 13px !important;
    gap: 15px !important;
    font-size: 14px !important;
  }

  body.cf-workpage .nav-glyph {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }
}

/* 확보된 폭만큼 작업 내용은 크게 */
body.cf-workpage #view {
  max-width: none !important;
  width: 100% !important;
  padding: 30px 34px 68px !important;
}

body.cf-workpage #view .work-heading-copy h1 {
  font-size: clamp(46px, 3.5vw, 56px) !important;
  line-height: .98 !important;
}

body.cf-workpage .work-heading-copy p {
  font-size: 17px !important;
}

body.cf-workpage .work-layout {
  grid-template-columns: minmax(0, 1fr) 166px !important;
  gap: 22px !important;
}

body.cf-workpage .work-row {
  min-height: 98px !important;
  padding: 11px !important;
}

body.cf-workpage .work-row-main {
  grid-template-columns: 68px minmax(320px, 1fr) 340px 120px !important;
  gap: 14px !important;
}

body.cf-workpage .work-mark,
body.cf-workpage .work-mark svg {
  width: 68px !important;
  height: 68px !important;
}

body.cf-workpage .work-row-titleline strong {
  font-size: 18px !important;
}

body.cf-workpage .work-row-meta {
  font-size: 13.5px !important;
}

body.cf-workpage .work-row-progress strong {
  font-size: 26px !important;
}

body.cf-workpage .work-stage-legend {
  grid-template-columns: 34px minmax(360px, 1fr) 340px 120px 28px !important;
  gap: 14px !important;
  min-height: 40px !important;
}

body.cf-workpage #critical-banner {
  right: 190px !important;
}


/* MAINBOARD */
/* 기존 8개 꽃잎 중 위 3개 + 아래 3개에 카테고리만 배치 */
@media (min-width: 761px) {

  body.cf-mainboard .mb-cat {
    width: 10%;
    height: 17.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7;
    transform-origin: center;
  }

  /* 위: 작업 현황 / 모아보기 + 왼쪽 알림함 */
  body.cf-mainboard .mb-cat-1 {
    left: 50%;
    top: 29%;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  body.cf-mainboard .mb-cat-2 {
    left: 64.85%;
    top: 35.15%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /* 아래 오른쪽: 보이스 프로필 */
  body.cf-mainboard .mb-cat-3 {
    left: 64.85%;
    top: 64.85%;
    transform: translate(-50%, -50%) rotate(135deg);
  }

  /* 아래 중앙: 브랜드 */
  body.cf-mainboard .mb-cat-4 {
    left: 50%;
    top: 71%;
    transform: translate(-50%, -50%) rotate(180deg);
  }

  /* 아래 왼쪽: 연동 소스 */
  body.cf-mainboard .mb-cat-5 {
    left: 35.15%;
    top: 64.85%;
    transform: translate(-50%, -50%) rotate(225deg);
  }

  /* 위 왼쪽: 알림함 */
  body.cf-mainboard .mb-cat-6 {
    left: 35.15%;
    top: 35.15%;
    transform: translate(-50%, -50%) rotate(315deg);
  }

  /* 기존 pill 디자인 제거하고 꽃잎 안의 텍스트로 */
  body.cf-mainboard .mb-cat span {
    width: 82px;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--mb-cobalt) !important;
    text-align: center;
    white-space: normal !important;
    word-break: keep-all;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -.02em !important;
    transition:
      font-size .18s ease,
      color .18s ease !important;
  }

  /* 텍스트 자체는 항상 똑바로 보이게 */
  body.cf-mainboard .mb-cat-1 span {
    transform: rotate(0deg) !important;
  }

  body.cf-mainboard .mb-cat-2 span {
    transform: rotate(-45deg) !important;
  }

  body.cf-mainboard .mb-cat-3 span {
    transform: rotate(-135deg) !important;
  }

  body.cf-mainboard .mb-cat-4 span {
    transform: rotate(-180deg) !important;
  }

  body.cf-mainboard .mb-cat-5 span {
    transform: rotate(-225deg) !important;
  }

  body.cf-mainboard .mb-cat-6 span {
    transform: rotate(-315deg) !important;
  }

  /* 실제 기존 꽃잎을 확대 */
  body.cf-mainboard .mb-petal-slot ellipse {
    transform-box: fill-box;
    transform-origin: center;
    transition:
      transform .2s cubic-bezier(.2,.8,.2,1),
      filter .2s ease;
  }

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-1:hover) .mb-petal-slot-1 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-1:focus-visible) .mb-petal-slot-1 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-2:hover) .mb-petal-slot-2 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-2:focus-visible) .mb-petal-slot-2 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-3:hover) .mb-petal-slot-4 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-3:focus-visible) .mb-petal-slot-4 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-4:hover) .mb-petal-slot-5 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-4:focus-visible) .mb-petal-slot-5 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-5:hover) .mb-petal-slot-6 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-5:focus-visible) .mb-petal-slot-6 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-6:hover) .mb-petal-slot-8 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-6:focus-visible) .mb-petal-slot-8 ellipse {
    transform: scale(1.18);
    filter: brightness(1.035);
  }

  body.cf-mainboard .mb-cat:hover span,
  body.cf-mainboard .mb-cat:focus-visible span {
    background: transparent !important;
    color: var(--mb-cobalt) !important;
    font-size: 12px !important;
  }
}

/* ===== END CF FINAL INTERACTION PATCH V5 ===== */

/* ===== MAINBOARD FINAL FLOWER V6 ===== */

@media (min-width: 761px) {

  /* 꽃 전체만 크게
     INPUT / PROCESS / OUTPUT, 업로드, 얼굴 구조는 그대로 */
  body.cf-mainboard .mb-reactor-circle {
    width: clamp(560px, 48vw, 720px) !important;
  }

  body.cf-mainboard .mb-reactor {
    inset: 4% !important;
  }

  body.cf-mainboard .mb-categories {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  /* 각 클릭 영역은 실제 꽃잎 방향과 일치 */
  body.cf-mainboard .mb-cat {
    position: absolute !important;
    width: 12.5% !important;
    height: 25% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    text-decoration: none !important;
    transform-origin: center !important;
    z-index: 8 !important;
    cursor: pointer !important;
  }

  /* 정확히 45도 간격 방사형 정렬 */

  /* 12시: WORK STATUS */
  body.cf-mainboard .mb-cat-1 {
    left: 50% !important;
    top: 22.4% !important;
    transform: translate(-50%,-50%) rotate(0deg) !important;
  }

  /* 1시30분: ARCHIVE */
  body.cf-mainboard .mb-cat-2 {
    left: 69.5% !important;
    top: 30.5% !important;
    transform: translate(-50%,-50%) rotate(45deg) !important;
  }

  /* 3시: FACTORY */
  body.cf-mainboard .mb-cat-3 {
    left: 77.6% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) rotate(90deg) !important;
  }

  /* 4시30분: VOICE PROFILE */
  body.cf-mainboard .mb-cat-4 {
    left: 69.5% !important;
    top: 69.5% !important;
    transform: translate(-50%,-50%) rotate(135deg) !important;
  }

  /* 6시: BRAND */
  body.cf-mainboard .mb-cat-5 {
    left: 50% !important;
    top: 77.6% !important;
    transform: translate(-50%,-50%) rotate(180deg) !important;
  }

  /* 7시30분: SOURCES */
  body.cf-mainboard .mb-cat-6 {
    left: 30.5% !important;
    top: 69.5% !important;
    transform: translate(-50%,-50%) rotate(225deg) !important;
  }

  /* 9시: COPY */
  body.cf-mainboard .mb-cat-7 {
    left: 22.4% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) rotate(270deg) !important;
  }

  /* 10시30분: ALERTS */
  body.cf-mainboard .mb-cat-8 {
    left: 30.5% !important;
    top: 30.5% !important;
    transform: translate(-50%,-50%) rotate(315deg) !important;
  }


  /* 꽃잎 안 영문 타이포 */
  body.cf-mainboard .mb-cat span {
    width: 88px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;

    color: var(--mb-cobalt) !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: keep-all !important;

    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Display",
      "Pretendard",
      sans-serif !important;

    font-size: 11.5px !important;
    font-weight: 800 !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;

    transition:
      transform 180ms ease,
      font-size 180ms ease !important;
  }

  /* 꽃잎은 돌아가지만 글자는 항상 수평 */
  body.cf-mainboard .mb-cat-1 span {
    transform: rotate(0deg) !important;
  }

  body.cf-mainboard .mb-cat-2 span {
    transform: rotate(-45deg) !important;
  }

  body.cf-mainboard .mb-cat-3 span {
    transform: rotate(-90deg) !important;
  }

  body.cf-mainboard .mb-cat-4 span {
    transform: rotate(-135deg) !important;
  }

  body.cf-mainboard .mb-cat-5 span {
    transform: rotate(-180deg) !important;
  }

  body.cf-mainboard .mb-cat-6 span {
    transform: rotate(-225deg) !important;
  }

  body.cf-mainboard .mb-cat-7 span {
    transform: rotate(-270deg) !important;
  }

  body.cf-mainboard .mb-cat-8 span {
    transform: rotate(-315deg) !important;
  }


  /* 원래 꽃잎 쉐입 그대로
     8개 유지 / rx 32 / ry 76
     폭과 둥근 끝 변경 없음 */
  body.cf-mainboard .mb-petal-slot ellipse {
    transform-box: fill-box !important;
    transform-origin: center !important;
    transform: scale(1) !important;

    transition:
      transform 190ms cubic-bezier(.2,.8,.2,1),
      filter 190ms ease !important;
  }


  /* 커서를 올린 꽃잎 하나만 확대 */
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-1:hover) .mb-petal-slot-1 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-2:hover) .mb-petal-slot-2 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-3:hover) .mb-petal-slot-3 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-4:hover) .mb-petal-slot-4 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-5:hover) .mb-petal-slot-5 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-6:hover) .mb-petal-slot-6 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-7:hover) .mb-petal-slot-7 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-8:hover) .mb-petal-slot-8 ellipse,

  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-1:focus-visible) .mb-petal-slot-1 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-2:focus-visible) .mb-petal-slot-2 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-3:focus-visible) .mb-petal-slot-3 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-4:focus-visible) .mb-petal-slot-4 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-5:focus-visible) .mb-petal-slot-5 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-6:focus-visible) .mb-petal-slot-6 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-7:focus-visible) .mb-petal-slot-7 ellipse,
  body.cf-mainboard .mb-reactor-circle:has(.mb-cat-8:focus-visible) .mb-petal-slot-8 ellipse {
    transform: scale(1.09) !important;
    filter: brightness(1.025) !important;
  }


  /* 예전 pill hover 제거 */
  body.cf-mainboard .mb-cat:hover span,
  body.cf-mainboard .mb-cat:focus-visible span {
    background: transparent !important;
    color: var(--mb-cobalt) !important;
  }
}

/* ===== END MAINBOARD FINAL FLOWER V6 ===== */

/* ===== MAINBOARD POSITION POLISH V7 ===== */

@media (min-width: 761px) {

  /*
   * 꽃잎 개수 / SVG ellipse shape / 중심 얼굴 수정 금지
   * 현재 꽃 전체만 크게 만들고 오른쪽으로 이동
   */
  body.cf-mainboard .mb-reactor-circle {
    width: clamp(650px, 55vw, 830px) !important;
    position: relative !important;
    left: clamp(55px, 6vw, 110px) !important;
  }

  /*
   * 꽃잎 내부 타이포
   * 기존 굵고 답답한 느낌 완화
   */
  body.cf-mainboard .mb-cat span {
    width: 82px !important;

    font-family:
      -apple-system,
      BlinkMacSystemFont,
      "SF Pro Text",
      "Pretendard",
      sans-serif !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    letter-spacing: -.025em !important;

    white-space: pre-line !important;
    word-break: keep-all !important;

    text-align: center !important;
    color: var(--mb-cobalt) !important;

    overflow: visible !important;
  }

  /*
   * 세로 꽃잎의 긴 라벨은 의도적으로 2줄
   */
  body.cf-mainboard .mb-cat-1 span,
  body.cf-mainboard .mb-cat-4 span {
    width: 68px !important;
  }

  /*
   * 좌우 COPY / FACTORY는 한 줄 유지
   */
  body.cf-mainboard .mb-cat-3 span,
  body.cf-mainboard .mb-cat-7 span {
    width: 90px !important;
    white-space: nowrap !important;
  }

  /*
   * 꽃잎 hover는 기존과 동일하게 얌전하게
   */
  body.cf-mainboard .mb-cat:hover span,
  body.cf-mainboard .mb-cat:focus-visible span {
    font-size: 12.5px !important;
  }
}

/* ===== END MAINBOARD POSITION POLISH V7 ===== */

/* ===== MAINBOARD FINAL POSITION V8 ===== */

@media (min-width: 761px) {

  /*
   * FINAL LOCK
   * 꽃 크기 / 꽃잎 8개 / 꽃잎 shape / typography 수정 금지
   * 전체 꽃 위치만 아래로 이동
   */
  body.cf-mainboard .mb-reactor-circle {
    top: 76px !important;
  }
}

/* ===== END MAINBOARD FINAL POSITION V8 ===== */

/* ===== WORK PROGRESS ANIMATION V2 CALM ===== */

body.cf-workpage .work-mini-rail {
  --cf-rail-fill: 0%;
  position: relative;
}

/* 페이지 진입 때 진행선만 한 번 채워짐 */
body.cf-workpage .work-mini-rail::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10%;
  top: 50%;
  width: var(--cf-rail-fill);
  height: 2px;

  background: var(--work-blue);
  border-radius: 999px;

  transform:
    translateY(-50%)
    scaleX(0);

  transform-origin: left center;
}

body.cf-workpage .work-row.cf-progress-animate .work-mini-rail::after {
  animation: cfCalmRailFill .46s cubic-bezier(.22,.72,.3,1) forwards;
  animation-delay: var(--cf-row-delay, 0ms);
}

@keyframes cfCalmRailFill {
  to {
    transform:
      translateY(-50%)
      scaleX(1);
  }
}

/* 점은 절대 움직이지 않음 */
body.cf-workpage .work-mini-node {
  animation: none !important;
  transition:
    box-shadow .16s ease,
    border-color .16s ease,
    background-color .16s ease !important;
}

/* 현재 단계는 정적인 아주 약한 halo만 */
body.cf-workpage .work-mini-node.current {
  transform: none !important;
  box-shadow:
    0 0 0 5px rgba(23,105,255,.16),
    0 0 0 10px rgba(23,105,255,.055) !important;
}

body.cf-workpage .work-mini-rail.attention .work-mini-node.current {
  box-shadow:
    0 0 0 5px rgba(255,138,31,.18),
    0 0 0 10px rgba(255,138,31,.06) !important;
}

/* hover로 rail이 움직이지 않게 */
body.cf-workpage .work-row:hover .work-mini-rail {
  transform: none !important;
  filter: none !important;
}

/* 퍼센트도 정적 */
body.cf-workpage .work-row-progress strong {
  animation: none !important;
}

/* 모션 최소화 설정 */
@media (prefers-reduced-motion: reduce) {
  body.cf-workpage .work-mini-rail::after {
    animation: none !important;
    transform:
      translateY(-50%)
      scaleX(1) !important;
  }
}

/* ===== END WORK PROGRESS ANIMATION V2 CALM ===== */

/* ===== COLLECTION PAGE V1 ===== */

body.cf-collectionpage {
  background: #f7f2e8;
}

body.cf-collectionpage .cf-main {
  background:
    #f7f2e8;
}

body.cf-collectionpage #view {
  max-width: none !important;
  width: 100% !important;

  padding:
    34px
    36px
    72px !important;
}


/* -------------------------
   sidebar
------------------------- */

@media (min-width: 981px) {

  body.cf-collectionpage
  .cf-sidebar {
    width: 64px !important;

    overflow: hidden !important;

    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-collectionpage
  .cf-sidebar:hover,

  body.cf-collectionpage
  .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(26,35,52,.10) !important;
  }

  body.cf-collectionpage
  .cf-main {
    margin-left:
      64px !important;
  }

  body.cf-collectionpage
  .cf-sidebar-name,

  body.cf-collectionpage
  .nav-link > span:last-child,

  body.cf-collectionpage
  .cf-sidebar-foot {
    opacity: 0 !important;

    white-space:
      nowrap !important;

    transition:
      opacity .13s ease !important;
  }

  body.cf-collectionpage
  .cf-sidebar:hover
  .cf-sidebar-name,

  body.cf-collectionpage
  .cf-sidebar:hover
  .nav-link > span:last-child,

  body.cf-collectionpage
  .cf-sidebar:hover
  .cf-sidebar-foot,

  body.cf-collectionpage
  .cf-sidebar:focus-within
  .cf-sidebar-name,

  body.cf-collectionpage
  .cf-sidebar:focus-within
  .nav-link > span:last-child,

  body.cf-collectionpage
  .cf-sidebar:focus-within
  .cf-sidebar-foot {
    opacity: 1 !important;
  }
}


/* -------------------------
   heading
------------------------- */

.collect-page {
  position: relative;

  color:
    #101827;
}

.collect-header {
  position: relative;

  min-height:
    150px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    flex-start;

  overflow:
    hidden;
}

.collect-eyebrow {
  margin-bottom:
    7px;

  color:
    #1769ff;

  font-size:
    13px;

  font-weight:
    800;

  letter-spacing:
    .16em;
}

.collect-heading h1 {
  margin:
    0;

  font-size:
    clamp(
      44px,
      3.5vw,
      54px
    );

  line-height:
    .98;

  font-weight:
    820;

  letter-spacing:
    -.055em;
}

.collect-heading p {
  margin-top:
    12px;

  color:
    #71839b;

  font-size:
    15px;

  line-height:
    1.55;
}


/* -------------------------
   top-right motif
------------------------- */

.collect-motif {
  position:
    absolute;

  width:
    230px;

  height:
    180px;

  right:
    -18px;

  top:
    -62px;
}

.collect-motif span {
  position:
    absolute;

  width:
    78px;

  height:
    126px;

  border-radius:
    50%;

  background:
    #1769ff;

  transform-origin:
    center bottom;
}

.collect-motif span:nth-child(1) {
  left:
    76px;

  top:
    5px;

  transform:
    rotate(0deg);
}

.collect-motif span:nth-child(2) {
  left:
    20px;

  top:
    47px;

  transform:
    rotate(-62deg);
}

.collect-motif span:nth-child(3) {
  right:
    13px;

  top:
    48px;

  transform:
    rotate(62deg);
}

.collect-motif i {
  position:
    absolute;

  width:
    62px;

  height:
    62px;

  left:
    84px;

  top:
    70px;

  border-radius:
    50%;

  background:
    #ff8a1f;
}


/* -------------------------
   controls
------------------------- */

.collect-control-panel {
  display:
    grid;

  grid-template-columns:
    minmax(260px,1fr)
    170px
    170px
    auto;

  gap:
    10px;

  align-items:
    center;

  margin:
    4px 0 16px;
}

.collect-search-wrap {
  position:
    relative;
}

.collect-search-icon {
  position:
    absolute;

  left:
    15px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    #1769ff;

  font-size:
    20px;

  pointer-events:
    none;
}

#collect-search {
  width:
    100%;

  height:
    46px;

  padding:
    0 16px 0 42px;

  border:
    1px solid
    #d8dfeb;

  border-radius:
    999px;

  outline:
    none;

  background:
    #eaf2ff;

  color:
    #101827;

  font-size:
    14px;

  transition:
    border-color .16s ease,
    box-shadow .16s ease;
}

#collect-search:focus {
  border-color:
    rgba(
      23,
      105,
      255,
      .45
    );

  box-shadow:
    0 0 0 4px
    rgba(
      23,
      105,
      255,
      .07
    );
}

.collect-select {
  height:
    46px;

  padding:
    0 16px;

  border:
    1px solid
    #ded8ca;

  border-radius:
    999px;

  background:
    #fbf8f1;

  color:
    #101827;

  font-size:
    13.5px;

  outline:
    none;
}

.collect-actions {
  display:
    flex;

  justify-content:
    flex-end;

  gap:
    7px;
}

.collect-btn {
  height:
    42px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 15px;

  border-radius:
    999px;

  font-size:
    12.5px;

  font-weight:
    700;

  white-space:
    nowrap;

  text-decoration:
    none;

  cursor:
    pointer;

  transition:
    transform .15s ease,
    background .15s ease,
    border-color .15s ease;
}

.collect-btn:hover {
  transform:
    translateY(-1px);
}

.collect-btn-primary {
  border:
    1px solid
    #1769ff;

  background:
    #1769ff;

  color:
    #fff;
}

.collect-btn-secondary {
  border:
    1px solid
    #ded8ca;

  background:
    transparent;

  color:
    #101827;
}


/* -------------------------
   summary pills
------------------------- */

.collect-summary {
  display:
    flex;

  gap:
    8px;

  margin-bottom:
    18px;

  padding-bottom:
    18px;

  border-bottom:
    1px solid
    #e2dccf;
}

.collect-summary-pill {
  min-width:
    118px;

  height:
    42px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    14px;

  padding:
    0 14px;

  border:
    1px solid
    #ded8ca;

  border-radius:
    999px;

  color:
    #5f718b;

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .08em;
}

.collect-summary-pill strong {
  color:
    #101827;

  font-size:
    15px;

  letter-spacing:
    0;
}

.collect-summary-pill.is-active {
  border-color:
    #1769ff;

  background:
    #1769ff;

  color:
    white;
}

.collect-summary-pill.is-active strong {
  color:
    white;
}

.collect-selected-pill {
  margin-left:
    auto;
}


/* -------------------------
   grid
------------------------- */

.collect-list-shell {
  min-height:
    280px;
}

.collect-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:
    12px;
}

.collect-card {
  position:
    relative;

  min-height:
    235px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    18px;

  border:
    1px solid
    #ded8ca;

  border-radius:
    17px;

  background:
    rgba(
      255,
      252,
      245,
      .62
    );

  cursor:
    pointer;

  overflow:
    hidden;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.collect-card:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(
      23,
      105,
      255,
      .28
    );

  box-shadow:
    0 12px 30px
    rgba(
      24,
      35,
      55,
      .055
    );
}

.collect-card.is-selected {
  background:
    rgba(
      238,
      245,
      255,
      .72
    );
}

.collect-card-top {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}

.collect-check {
  width:
    17px;

  height:
    17px;

  accent-color:
    #1769ff;
}

.collect-card-tags {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    5px;

  min-width:
    0;
}

.collect-channel,
.collect-slot {
  max-width:
    145px;

  padding:
    5px 8px;

  border-radius:
    999px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;

  font-size:
    9.5px;

  font-weight:
    800;

  letter-spacing:
    .04em;
}

.collect-channel {
  background:
    #1769ff;

  color:
    white;

  text-transform:
    uppercase;
}

.collect-slot {
  background:
    #ece7dc;

  color:
    #687991;
}

.collect-brand-name {
  margin-top:
    27px;

  color:
    #1769ff;

  font-size:
    11px;

  font-weight:
    800;

  letter-spacing:
    .05em;
}

.collect-copy-text {
  margin-top:
    9px;

  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    4;

  color:
    #111827;

  font-size:
    clamp(
      18px,
      1.35vw,
      22px
    );

  font-weight:
    750;

  line-height:
    1.34;

  letter-spacing:
    -.035em;
}

.collect-card-foot {
  margin-top:
    auto;

  padding-top:
    22px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  color:
    #8190a5;

  font-size:
    9.5px;

  font-weight:
    800;

  letter-spacing:
    .1em;
}

.collect-card-foot b {
  color:
    #ff8a1f;

  font-size:
    17px;

  font-weight:
    500;
}

.collect-empty,
.collect-loading {
  min-height:
    260px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    6px;

  border:
    1px dashed
    #d8d1c3;

  border-radius:
    18px;

  color:
    #8190a5;
}

.collect-empty strong {
  color:
    #101827;

  font-size:
    16px;
}


/* -------------------------
   responsive
------------------------- */

@media (max-width: 1280px) {

  .collect-control-panel {
    grid-template-columns:
      minmax(240px,1fr)
      150px
      150px;
  }

  .collect-actions {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;
  }

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

@media (max-width: 820px) {

  body.cf-collectionpage #view {
    padding:
      24px 18px 56px !important;
  }

  .collect-motif {
    opacity:
      .28;
  }

  .collect-control-panel {
    grid-template-columns:
      1fr;
  }

  .collect-actions {
    grid-column:
      auto;

    flex-wrap:
      wrap;
  }

  .collect-summary {
    overflow-x:
      auto;
  }

  .collect-selected-pill {
    margin-left:
      0;
  }

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

/* ===== END COLLECTION PAGE V1 ===== */

/* ===== ARCHIVE FINAL V2 ===== */


/* --------------------------------
   PAGE
-------------------------------- */

body.cf-collectionpage,
body.cf-collectionpage .cf-main {
  background: #f7f2e8 !important;
  color: #111827 !important;
}

body.cf-collectionpage #view {
  max-width: none !important;
  width: 100% !important;
  padding: 34px 38px 72px !important;
}


/* --------------------------------
   SIDEBAR
-------------------------------- */

body.cf-collectionpage .cf-sidebar {
  background: #faf6ed !important;
  border-right: 1px solid #e3dccf !important;
}

@media (min-width: 981px) {

  body.cf-collectionpage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;
    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-collectionpage .cf-sidebar:hover,
  body.cf-collectionpage .cf-sidebar:focus-within {
    width: 210px !important;
    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-collectionpage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-collectionpage .cf-sidebar-name,
  body.cf-collectionpage .nav-link > span:last-child,
  body.cf-collectionpage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;
    transition: opacity .13s ease !important;
  }

  body.cf-collectionpage .cf-sidebar:hover .cf-sidebar-name,
  body.cf-collectionpage .cf-sidebar:hover .nav-link > span:last-child,
  body.cf-collectionpage .cf-sidebar:hover .cf-sidebar-foot,
  body.cf-collectionpage .cf-sidebar:focus-within .cf-sidebar-name,
  body.cf-collectionpage .cf-sidebar:focus-within .nav-link > span:last-child,
  body.cf-collectionpage .cf-sidebar:focus-within .cf-sidebar-foot {
    opacity: 1 !important;
  }
}

body.cf-collectionpage .nav-link {
  color: #1b293d !important;
}

body.cf-collectionpage .nav-link.active {
  background: #e7f0ff !important;
  color: #1769ff !important;
}


/* --------------------------------
   NOTIFICATION
-------------------------------- */

/* TOAST FINAL — 위치/크기/내부 padding은 아래 통합 규칙(TOAST FINAL 섹션) 참고 */


/* --------------------------------
   HEADER
-------------------------------- */

body.cf-collectionpage .collect-header {
  min-height: 158px !important;
}

body.cf-collectionpage .collect-eyebrow {
  color: #1769ff !important;

  font-size: 13px !important;
  font-weight: 850 !important;

  letter-spacing: .17em !important;
}

body.cf-collectionpage .collect-heading h1 {
  color: #101827 !important;

  font-size:
    clamp(46px, 3.6vw, 56px) !important;

  font-weight: 830 !important;
  letter-spacing: -.055em !important;
}

body.cf-collectionpage .collect-heading p {
  color: #70829b !important;

  font-size: 15.5px !important;
}


/* --------------------------------
   MOTIF
-------------------------------- */

body.cf-collectionpage .collect-motif {
  right: -12px !important;
  top: -46px !important;

  width: 250px !important;
  height: 190px !important;
}

body.cf-collectionpage .collect-motif span {
  background: #1769ff !important;
}

body.cf-collectionpage .collect-motif i {
  background: #ff8a1f !important;
}


/* --------------------------------
   SEARCH / FILTER
-------------------------------- */

body.cf-collectionpage .collect-control-panel {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

body.cf-collectionpage #collect-search {
  height: 48px !important;

  border:
    1px solid #cfd9e8 !important;

  background: #edf4ff !important;

  color: #111827 !important;

  font-size: 14px !important;
}

body.cf-collectionpage #collect-search::placeholder {
  color: #8291a6 !important;
}

body.cf-collectionpage .collect-select {
  height: 48px !important;

  border:
    1px solid #ddd6c9 !important;

  background: #fffaf1 !important;

  color: #172033 !important;
}

body.cf-collectionpage .collect-btn-secondary {
  border:
    1px solid #d9d2c5 !important;

  background: #fffaf1 !important;

  color: #172033 !important;
}

body.cf-collectionpage .collect-btn-primary {
  border-color: #1769ff !important;
  background: #1769ff !important;
  color: white !important;
}


/* --------------------------------
   SUMMARY
-------------------------------- */

body.cf-collectionpage .collect-summary {
  border-bottom:
    1px solid #ded8cc !important;
}

body.cf-collectionpage .collect-summary-pill {
  border:
    1px solid #ddd6c9 !important;

  background: transparent !important;

  color: #6d7d93 !important;
}

body.cf-collectionpage .collect-summary-pill strong {
  color: #111827 !important;
}

body.cf-collectionpage .collect-summary-pill.is-active {
  border-color: #1769ff !important;
  background: #1769ff !important;
  color: white !important;
}

body.cf-collectionpage .collect-summary-pill.is-active strong {
  color: white !important;
}


/* --------------------------------
   COPY GRID
-------------------------------- */

body.cf-collectionpage .collect-grid {
  gap: 14px !important;
}

body.cf-collectionpage .collect-card {
  min-height: 238px !important;

  padding: 19px !important;

  border:
    1px solid #ded7c9 !important;

  border-radius: 17px !important;

  background:
    #fffaf1 !important;

  color: #111827 !important;

  box-shadow: none !important;
}

body.cf-collectionpage .collect-card:hover {
  transform: translateY(-2px) !important;

  border-color:
    rgba(23,105,255,.34) !important;

  box-shadow:
    0 12px 28px
    rgba(25,37,58,.055) !important;
}

body.cf-collectionpage .collect-card.is-selected {
  border-color:
    rgba(23,105,255,.62) !important;

  background:
    #f1f6ff !important;
}


/* --------------------------------
   CARD TYPOGRAPHY
-------------------------------- */

body.cf-collectionpage .collect-brand-name {
  color: #1769ff !important;

  font-size: 11px !important;
  font-weight: 850 !important;
}

body.cf-collectionpage .collect-copy-text {
  color: #111827 !important;

  font-size:
    clamp(18px,1.3vw,21px) !important;

  font-weight: 750 !important;

  line-height: 1.36 !important;

  letter-spacing: -.035em !important;
}

body.cf-collectionpage .collect-card-foot {
  color: #8594a8 !important;
}

body.cf-collectionpage .collect-card-foot b {
  color: #ff8a1f !important;
}


/* --------------------------------
   TAGS
-------------------------------- */

body.cf-collectionpage .collect-channel {
  background: #1769ff !important;
  color: white !important;
}

body.cf-collectionpage .collect-slot {
  background: #ece7dc !important;
  color: #65758c !important;
}


/* --------------------------------
   CHECKBOX
-------------------------------- */

body.cf-collectionpage .collect-check {
  accent-color: #1769ff !important;
}


/* --------------------------------
   EMPTY
-------------------------------- */

body.cf-collectionpage .collect-empty,
body.cf-collectionpage .collect-loading {
  border-color: #d9d2c5 !important;
  color: #8291a5 !important;
}


/* ===== END ARCHIVE FINAL V2 ===== */

/* ===== ARCHIVE LIST V3 ===== */


/* --------------------------------------------------
   force light archive controls
-------------------------------------------------- */

body.cf-collectionpage
input#collect-search {
  background:
    #edf4ff !important;

  border:
    1px solid #d0d9e7 !important;

  color:
    #111827 !important;

  -webkit-text-fill-color:
    #111827 !important;
}

body.cf-collectionpage
input#collect-search::placeholder {
  color:
    #8291a6 !important;

  -webkit-text-fill-color:
    #8291a6 !important;
}

body.cf-collectionpage
select.collect-select {
  background:
    #fffaf1 !important;

  border:
    1px solid #ddd6c8 !important;

  color:
    #111827 !important;

  -webkit-text-fill-color:
    #111827 !important;
}

body.cf-collectionpage
.collect-heading h1 {
  color:
    #111827 !important;

  opacity:
    1 !important;

  -webkit-text-fill-color:
    #111827 !important;
}


/* --------------------------------------------------
   LIST
-------------------------------------------------- */

body.cf-collectionpage
.collect-list-shell {
  min-height:
    320px;
}

body.cf-collectionpage
.collect-list-head {
  display:
    grid;

  grid-template-columns:
    34px
    142px
    190px
    minmax(0, 1fr)
    105px
    54px;

  gap:
    14px;

  align-items:
    center;

  min-height:
    38px;

  padding:
    0 12px;

  border-bottom:
    1px solid #d7d0c4;

  color:
    #8291a5;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .12em;
}

body.cf-collectionpage
.collect-archive-list {
  width:
    100%;
}

body.cf-collectionpage
.collect-row {
  display:
    grid;

  grid-template-columns:
    34px
    142px
    190px
    minmax(0, 1fr)
    105px
    54px;

  gap:
    14px;

  align-items:
    center;

  min-height:
    64px;

  padding:
    10px 12px;

  border-bottom:
    1px solid #ded8cd;

  background:
    transparent;

  transition:
    background-color .15s ease;
}

body.cf-collectionpage
.collect-row:hover {
  background:
    rgba(
      231,
      240,
      255,
      .55
    );
}

body.cf-collectionpage
.collect-row.is-selected {
  background:
    rgba(
      231,
      240,
      255,
      .78
    );
}


/* --------------------------------------------------
   CHECKBOX
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-check {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}

body.cf-collectionpage
.collect-check {
  width:
    17px !important;

  height:
    17px !important;

  accent-color:
    #1769ff !important;
}


/* --------------------------------------------------
   BRAND
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-brand {
  min-width:
    0;
}

body.cf-collectionpage
.collect-row-brand strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #1769ff;

  font-size:
    13px;

  font-weight:
    820;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* --------------------------------------------------
   TYPE
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-type {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  min-width:
    0;
}

body.cf-collectionpage
.collect-row-type
.collect-channel,

body.cf-collectionpage
.collect-row-type
.collect-slot {
  max-width:
    105px;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

body.cf-collectionpage
.collect-row-type
.collect-channel {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    #1769ff !important;

  color:
    white !important;

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    .035em;

  text-transform:
    uppercase;
}

body.cf-collectionpage
.collect-row-type
.collect-slot {
  padding:
    5px 8px;

  border-radius:
    999px;

  background:
    #ece7dc !important;

  color:
    #65758c !important;

  font-size:
    9px;

  font-weight:
    750;
}


/* --------------------------------------------------
   COPY CONTENT
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-copyarea {
  min-width:
    0;

  width:
    100%;

  padding:
    7px 0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #111827;

  text-align:
    left;

  cursor:
    pointer;
}

body.cf-collectionpage
.collect-row-preview {
  display:
    -webkit-box;

  overflow:
    hidden;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  color:
    #111827;

  font-size:
    13.5px;

  font-weight:
    600;

  line-height:
    1.4;

  letter-spacing:
    -.01em;
}

body.cf-collectionpage
.collect-row-full {
  display:
    none;

  color:
    #111827;

  font-size:
    13.5px;

  font-weight:
    600;

  line-height:
    1.4;

  letter-spacing:
    -.01em;

  white-space:
    pre-wrap;
}

body.cf-collectionpage
.collect-row.is-expanded {
  align-items:
    start;

  background:
    #fffaf1;
}

body.cf-collectionpage
.collect-row.is-expanded
.collect-row-preview {
  display:
    none;
}

body.cf-collectionpage
.collect-row.is-expanded
.collect-row-full {
  display:
    block;
}


/* --------------------------------------------------
   DATE
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-date {
  color:
    #8795a8;

  font-size:
    11px;

  font-variant-numeric:
    tabular-nums;

  text-align:
    right;

  white-space:
    nowrap;
}


/* --------------------------------------------------
   COPY BUTTON
-------------------------------------------------- */

body.cf-collectionpage
.collect-row-copy {
  width:
    50px;

  height:
    30px;

  border:
    1px solid #d9d2c5;

  border-radius:
    999px;

  background:
    transparent;

  color:
    #1769ff;

  font-size:
    8.5px;

  font-weight:
    850;

  letter-spacing:
    .06em;

  cursor:
    pointer;

  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease;
}

body.cf-collectionpage
.collect-row-copy:hover {
  border-color:
    #1769ff;

  background:
    #1769ff;

  color:
    white;
}


/* --------------------------------------------------
   remove old card language
-------------------------------------------------- */

body.cf-collectionpage
.collect-grid {
  display:
    block !important;
}

body.cf-collectionpage
.collect-card {
  display:
    none !important;
}


/* --------------------------------------------------
   responsive
-------------------------------------------------- */

@media (max-width: 1240px) {

  body.cf-collectionpage
  .collect-list-head,

  body.cf-collectionpage
  .collect-row {
    grid-template-columns:
      32px
      110px
      155px
      minmax(0, 1fr)
      50px;
  }

  body.cf-collectionpage
  .collect-list-head
  > :nth-child(5),

  body.cf-collectionpage
  .collect-row-date {
    display:
      none;
  }
}

@media (max-width: 840px) {

  body.cf-collectionpage
  .collect-list-head {
    display:
      none;
  }

  body.cf-collectionpage
  .collect-row {
    grid-template-columns:
      28px
      minmax(0,1fr)
      48px;

    gap:
      8px 12px;

    padding:
      15px 8px;
  }

  body.cf-collectionpage
  .collect-row-brand {
    grid-column:
      2;
  }

  body.cf-collectionpage
  .collect-row-type {
    grid-column:
      2;
  }

  body.cf-collectionpage
  .collect-row-copyarea {
    grid-column:
      2;

    grid-row:
      auto;
  }

  body.cf-collectionpage
  .collect-row-copy {
    grid-column:
      3;

    grid-row:
      1 / span 3;

    align-self:
      center;
  }
}


/* ===== END ARCHIVE LIST V3 ===== */

/* ===== ARCHIVE FINISH V4 ===== */


/* --------------------------------
   LIGHT CONTROLS
-------------------------------- */

body.cf-collectionpage #view #collect-search {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #edf4ff !important;
  background-color: #edf4ff !important;

  border: 1px solid #cfd9e8 !important;

  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;

  color-scheme: light !important;

  box-shadow: none !important;
}

body.cf-collectionpage #view #collect-search::placeholder {
  color: #8291a6 !important;
  -webkit-text-fill-color: #8291a6 !important;
  opacity: 1 !important;
}


body.cf-collectionpage #view #filter-brand,
body.cf-collectionpage #view #filter-channel,
body.cf-collectionpage #view select.collect-select {
  appearance: auto !important;
  -webkit-appearance: auto !important;

  background: #fffaf1 !important;
  background-color: #fffaf1 !important;

  border: 1px solid #ddd6c9 !important;

  color: #172033 !important;
  -webkit-text-fill-color: #172033 !important;

  color-scheme: light !important;

  box-shadow: none !important;
}

body.cf-collectionpage #view #filter-brand option,
body.cf-collectionpage #view #filter-channel option {
  background: #fffaf1 !important;
  color: #172033 !important;
}


/* focus */

body.cf-collectionpage #view #collect-search:focus,
body.cf-collectionpage #view #filter-brand:focus,
body.cf-collectionpage #view #filter-channel:focus {
  outline: none !important;

  border-color: rgba(23,105,255,.48) !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07) !important;
}


/* --------------------------------
   ARCHIVE MOTIF
-------------------------------- */

body.cf-collectionpage .collect-motif {
  width: 210px !important;
  height: 170px !important;

  right: 4px !important;
  top: -40px !important;

  opacity: 1 !important;

  transform: rotate(4deg);
}


/* 기존 세 꽃잎 */

body.cf-collectionpage .collect-motif span {
  width: 54px !important;
  height: 108px !important;

  border-radius: 55% 55% 48% 48% !important;

  background: #1769ff !important;
}


body.cf-collectionpage .collect-motif span:nth-child(1) {
  left: 78px !important;
  top: 4px !important;

  transform: rotate(0deg) !important;
}

body.cf-collectionpage .collect-motif span:nth-child(2) {
  left: 28px !important;
  top: 46px !important;

  transform: rotate(-58deg) !important;
}

body.cf-collectionpage .collect-motif span:nth-child(3) {
  right: 21px !important;
  top: 46px !important;

  transform: rotate(58deg) !important;
}


/* 네 번째 꽃잎 */

body.cf-collectionpage .collect-motif::before {
  content: "";

  position: absolute;

  left: 78px;
  top: 83px;

  width: 54px;
  height: 108px;

  border-radius: 55% 55% 48% 48%;

  background: #1769ff;

  transform: rotate(180deg);

  transform-origin: center;
}


/* orange core */

body.cf-collectionpage .collect-motif i {
  z-index: 3 !important;

  width: 58px !important;
  height: 58px !important;

  left: 76px !important;
  top: 62px !important;

  border-radius: 50% !important;

  background: #ff8a1f !important;
}


/* subtle orange orbit */

body.cf-collectionpage .collect-motif::after {
  content: "";

  position: absolute;

  left: 45px;
  top: 30px;

  width: 118px;
  height: 118px;

  border:
    2px solid
    rgba(255,138,31,.92);

  border-radius: 50%;

  z-index: 0;
}


/* --------------------------------
   HEADER CLEANUP
-------------------------------- */

body.cf-collectionpage .collect-header {
  min-height: 150px !important;
}

body.cf-collectionpage .collect-eyebrow {
  color: #1769ff !important;
}

body.cf-collectionpage .collect-heading h1 {
  color: #111827 !important;
  -webkit-text-fill-color: #111827 !important;
  opacity: 1 !important;
}


/* --------------------------------
   ARCHIVE LIST STAYS UNCHANGED
-------------------------------- */

body.cf-collectionpage .collect-row {
  background: transparent;
}

body.cf-collectionpage .collect-row:hover {
  background:
    rgba(231,240,255,.52);
}


/* ===== END ARCHIVE FINISH V4 ===== */

/* ===== ARCHIVE MOTIF FIX V5 ===== */

body.cf-collectionpage .collect-motif {
  position: absolute !important;

  width: 190px !important;
  height: 150px !important;

  right: -4px !important;
  top: -22px !important;

  transform: none !important;
  opacity: 1 !important;

  overflow: visible !important;
}


/* 공통 꽃잎 */
body.cf-collectionpage .collect-motif span,
body.cf-collectionpage .collect-motif::before {
  position: absolute !important;

  width: 42px !important;
  height: 92px !important;

  border-radius: 50% !important;

  background: #1769ff !important;

  transform-origin: 50% 100% !important;

  z-index: 1 !important;
}


/* 위 */
body.cf-collectionpage .collect-motif span:nth-child(1) {
  left: 74px !important;
  top: -18px !important;

  transform: rotate(0deg) !important;
}


/* 왼쪽 */
body.cf-collectionpage .collect-motif span:nth-child(2) {
  left: 27px !important;
  top: 28px !important;

  transform: rotate(-58deg) !important;
}


/* 오른쪽 */
body.cf-collectionpage .collect-motif span:nth-child(3) {
  left: 121px !important;
  top: 28px !important;

  transform: rotate(58deg) !important;
}


/* 아래 */
body.cf-collectionpage .collect-motif::before {
  content: "" !important;

  left: 74px !important;
  top: 66px !important;

  transform: rotate(180deg) !important;
}


/* 오렌지 중심 */
body.cf-collectionpage .collect-motif i {
  position: absolute !important;

  left: 68px !important;
  top: 43px !important;

  width: 54px !important;
  height: 54px !important;

  border-radius: 50% !important;

  background: #ff8a1f !important;

  z-index: 4 !important;
}


/* 얇은 오렌지 링 */
body.cf-collectionpage .collect-motif::after {
  content: "" !important;

  position: absolute !important;

  left: 48px !important;
  top: 23px !important;

  width: 92px !important;
  height: 92px !important;

  border: 2px solid #ff8a1f !important;
  border-radius: 50% !important;

  background: transparent !important;

  z-index: 3 !important;
}


/* ===== END ARCHIVE MOTIF FIX V5 ===== */

/* ===== ARCHIVE FINAL LOCK V7 ===== */

/* 페이지 우측 상단 flower motif family 통일 요구사항에 따라 다시 노출 */
body.cf-collectionpage .collect-motif {
  display: block !important;
}

/* --------------------------------
   ACTION BUTTONS
   기본은 전부 중립 / hover만 blue
-------------------------------- */

body.cf-collectionpage #copy-selected-btn,
body.cf-collectionpage #copy-all-btn,
body.cf-collectionpage #csv-link {
  height: 44px !important;

  padding: 0 17px !important;

  border: 1px solid #d8d2c7 !important;
  border-radius: 999px !important;

  background: #fffaf1 !important;

  color: #172033 !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  box-shadow: none !important;

  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .16s ease !important;
}

body.cf-collectionpage #copy-selected-btn:hover,
body.cf-collectionpage #copy-all-btn:hover,
body.cf-collectionpage #csv-link:hover {
  background: #edf4ff !important;

  border-color:
    rgba(23,105,255,.32) !important;

  color: #1769ff !important;

  transform: translateY(-1px) !important;
}

body.cf-collectionpage #copy-selected-btn:active,
body.cf-collectionpage #copy-all-btn:active,
body.cf-collectionpage #csv-link:active {
  background: #e3eeff !important;
  transform: translateY(0) !important;
}


/* --------------------------------
   ROW COPY
-------------------------------- */

body.cf-collectionpage .collect-row-copy {
  background: transparent !important;

  border:
    1px solid #d8d2c7 !important;

  color: #1769ff !important;
}

body.cf-collectionpage .collect-row-copy:hover {
  background: #edf4ff !important;

  border-color:
    rgba(23,105,255,.35) !important;

  color: #1769ff !important;
}


/* --------------------------------
   CHECKBOX
   기본 흰색 / 선택 시 cobalt
-------------------------------- */

body.cf-collectionpage .collect-check {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 18px !important;
  height: 18px !important;

  margin: 0 !important;

  border:
    1.5px solid #bdc9d8 !important;

  border-radius: 4px !important;

  background-color: #ffffff !important;

  cursor: pointer !important;

  transition:
    border-color .14s ease,
    background-color .14s ease,
    box-shadow .14s ease !important;
}

body.cf-collectionpage .collect-check:hover {
  border-color:
    rgba(23,105,255,.55) !important;
}

body.cf-collectionpage .collect-check:checked {
  border-color: #1769ff !important;

  background-color: #1769ff !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.7 10 11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
}

body.cf-collectionpage .collect-check:focus-visible {
  outline: none !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.09) !important;
}


/* --------------------------------
   ACTIVE SUMMARY
   ALL만 명확한 cobalt
-------------------------------- */

body.cf-collectionpage
.collect-summary-pill.is-active {
  background: #1769ff !important;
  border-color: #1769ff !important;
  color: #fff !important;
}

body.cf-collectionpage
.collect-summary-pill.is-active strong {
  color: #fff !important;
}


/* 비활성 summary */
body.cf-collectionpage
.collect-summary-pill:not(.is-active) {
  background: transparent !important;
  border-color: #ddd6c9 !important;
}


/* --------------------------------
   FINAL CLEANUP
-------------------------------- */

body.cf-collectionpage .collect-header {
  min-height: 150px !important;
  padding-right: 0 !important;
}

body.cf-collectionpage .collect-row {
  transition:
    background-color .14s ease !important;
}

body.cf-collectionpage .collect-row:hover {
  background:
    rgba(237,244,255,.58) !important;
}

/* ===== END ARCHIVE FINAL LOCK V7 ===== */

/* ===== ARCHIVE TYPOGRAPHY ALIGN V8 ===== */

/*
 * 내부 페이지 타이포 기준:
 * WORK STATUS와 동일한 font family / hierarchy 사용
 */

body.cf-collectionpage #view,
body.cf-collectionpage button,
body.cf-collectionpage input,
body.cf-collectionpage select {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Pretendard",
    "Segoe UI",
    sans-serif !important;
}


/* eyebrow */
body.cf-collectionpage .collect-eyebrow {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;

  color: #1769ff !important;
}


/* page headline
   WORK STATUS와 동일한 스케일 */
body.cf-collectionpage .collect-heading h1 {
  margin: 10px 0 0 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif !important;

  font-size:
    clamp(46px, 3.5vw, 56px) !important;

  font-weight: 820 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;

  color: #101827 !important;
}


/* intro body
   WORK STATUS 설명문과 동일 */
body.cf-collectionpage .collect-heading p {
  margin-top: 13px !important;

  font-size: 17px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  letter-spacing: -.018em !important;

  color: #71839b !important;
}


/* search / filter */
body.cf-collectionpage #collect-search,
body.cf-collectionpage .collect-select {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
}

body.cf-collectionpage .collect-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}


/* summary navigation */
body.cf-collectionpage .collect-summary-pill {
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

body.cf-collectionpage .collect-summary-pill strong {
  font-size: 15px !important;
  font-weight: 800 !important;
}


/* archive table header */
body.cf-collectionpage .collect-list-head {
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: .11em !important;
}


/* brand */
body.cf-collectionpage .collect-row-brand strong {
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.015em !important;
}


/* channel / slot */
body.cf-collectionpage .collect-row-type .collect-channel,
body.cf-collectionpage .collect-row-type .collect-slot {
  font-size: 9.5px !important;
  font-weight: 800 !important;
}


/* ARCHIVE FINAL: 스캔 가능한 일반 리스트 본문 크기로 축소 (기존 15.5px는
   pill 배경과 겹쳐 카드처럼 보였고, 축소된 지금도 row가 불필요하게 높았음) */
body.cf-collectionpage .collect-row-preview,
body.cf-collectionpage .collect-row-full {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  letter-spacing: -.01em !important;

  color: #111827 !important;
}


/* date */
body.cf-collectionpage .collect-row-date {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}


/* row copy button */
body.cf-collectionpage .collect-row-copy {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
}

/* ===== END ARCHIVE TYPOGRAPHY ALIGN V8 ===== */

/* ===== ARCHIVE HEADER MATCH WORK STATUS V9 ===== */

/* WORK STATUS와 동일한 실제 데스크톱 헤더 스케일 */
body.cf-collectionpage #view .collect-eyebrow {
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
  margin-bottom: 12px !important;
}

body.cf-collectionpage #view .collect-heading h1 {
  margin: 0 !important;

  font-size: 56px !important;
  font-weight: 820 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}

body.cf-collectionpage #view .collect-heading p {
  margin-top: 14px !important;

  font-size: 17px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  letter-spacing: -.018em !important;

  color: #71839b !important;
}

/* 헤더가 커진 만큼 공간 확보 */
body.cf-collectionpage #view .collect-header {
  min-height: 176px !important;
}

/* ===== END ARCHIVE HEADER MATCH WORK STATUS V9 ===== */

/* ===== JOB DETAIL V1 ===== */

body.cf-jobpage,
body.cf-jobpage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}

body.cf-jobpage #view {
  max-width: none !important;
  width: 100% !important;
  padding: 32px 36px 72px !important;
}

/* sidebar */
@media (min-width: 981px) {
  body.cf-jobpage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;
    transition: width .2s ease, box-shadow .2s ease !important;
  }

  body.cf-jobpage .cf-sidebar:hover,
  body.cf-jobpage .cf-sidebar:focus-within {
    width: 210px !important;
    box-shadow: 18px 0 42px rgba(22,32,48,.10) !important;
  }

  body.cf-jobpage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-jobpage .cf-sidebar-name,
  body.cf-jobpage .nav-link > span:last-child,
  body.cf-jobpage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;
    transition: opacity .13s ease !important;
  }

  body.cf-jobpage .cf-sidebar:hover .cf-sidebar-name,
  body.cf-jobpage .cf-sidebar:hover .nav-link > span:last-child,
  body.cf-jobpage .cf-sidebar:hover .cf-sidebar-foot {
    opacity: 1 !important;
  }
}

/* header */
body.cf-jobpage .jd-back {
  display: inline-block;
  margin-bottom: 26px;

  color: #71839b;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .06em;
  text-decoration: none;
}

body.cf-jobpage .jd-back:hover {
  color: #1769ff;
}

body.cf-jobpage .jd-eyebrow,
body.cf-jobpage .jd-section-kicker {
  color: #1769ff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .16em;
}

body.cf-jobpage .jd-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-top: 11px;
}

body.cf-jobpage .jd-title {
  margin: 0;

  color: #101827;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif;

  font-size: clamp(42px, 3.5vw, 56px);
  font-weight: 820;
  line-height: .98;
  letter-spacing: -.055em;
}

body.cf-jobpage .jd-meta {
  margin: 14px 0 22px;

  color: #71839b;

  font-size: 17px;
  line-height: 1.5;
}

/* progress */
body.cf-jobpage .job-progress {
  margin: 0 0 32px;
  padding: 18px 0 23px;

  border-top: 1px solid #ded8cc;
  border-bottom: 1px solid #ded8cc;
}

body.cf-jobpage .job-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 14px;

  color: #71839b;
  font-size: 12px;
}

body.cf-jobpage .job-progress-meta strong {
  color: #101827;
  font-size: 20px;
}

body.cf-jobpage .job-rail {
  display: flex;
}

body.cf-jobpage .job-rail-seg {
  position: relative;
  flex: 1;

  height: 26px;

  border-top: 2px solid #d1d7df;

  text-align: center;
}

body.cf-jobpage .job-rail-seg i {
  position: absolute;
  top: -7px;
  left: 50%;

  width: 12px;
  height: 12px;

  border: 2px solid #c7ced7;
  border-radius: 50%;

  background: #f7f2e8;

  transform: translateX(-50%);
}

body.cf-jobpage .job-rail-seg.done {
  border-color: #1769ff;
}

body.cf-jobpage .job-rail-seg.done i,
body.cf-jobpage .job-rail-seg.current i {
  border-color: #1769ff;
  background: #1769ff;
}

body.cf-jobpage .job-rail-seg.current i {
  box-shadow:
    0 0 0 5px rgba(23,105,255,.14),
    0 0 0 10px rgba(23,105,255,.045);
}

body.cf-jobpage .job-rail-seg span {
  display: block;

  margin-top: 10px;

  color: #8391a4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

/* main columns */
body.cf-jobpage .jd-grid {
  display: grid;
  grid-template-columns: minmax(360px,.82fr) minmax(0,1.45fr);
  gap: 28px;

  align-items: start;
}

body.cf-jobpage .jd-panel {
  padding: 23px;

  border: 1px solid #ddd6c9;
  border-radius: 18px;

  background: #fffaf1;
}

body.cf-jobpage .jd-section-title {
  margin: 9px 0 21px;

  color: #101827;
  font-size: 24px;
  font-weight: 780;
  letter-spacing: -.04em;
}

body.cf-jobpage .jd-brief-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px 24px;
}

body.cf-jobpage .jd-field {
  padding-bottom: 14px;
  border-bottom: 1px solid #e6e0d5;
}

body.cf-jobpage .jd-field-label {
  margin-bottom: 6px;

  color: #8291a5;

  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

body.cf-jobpage .jd-field-value {
  color: #172033;

  font-size: 14.5px;
  font-weight: 570;
  line-height: 1.45;
}

/* generated copy */
body.cf-jobpage .jd-output > .mb-6 {
  margin-bottom: 24px !important;
}

body.cf-jobpage .jd-output h2.text-\[13px\] {
  color: #1769ff !important;

  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .10em !important;
}

body.cf-jobpage .jd-output .card {
  padding: 15px 16px !important;

  border: 1px solid #ded8cc !important;
  border-radius: 14px !important;

  background: #fffaf1 !important;

  box-shadow: none !important;

  transition:
    border-color .14s ease,
    background-color .14s ease !important;
}

body.cf-jobpage .jd-output .card:hover {
  border-color: rgba(23,105,255,.30) !important;
  background: #f3f7ff !important;
}

body.cf-jobpage .jd-output .copy-text {
  color: #101827 !important;

  font-size: 15.5px !important;
  font-weight: 580 !important;
  line-height: 1.5 !important;
}

body.cf-jobpage .jd-output .edit-btn,
body.cf-jobpage .jd-output .regen-btn {
  border: 1px solid transparent;

  color: #71839b !important;

  transition:
    color .14s ease,
    background .14s ease !important;
}

body.cf-jobpage .jd-output .edit-btn:hover,
body.cf-jobpage .jd-output .regen-btn:hover {
  background: #e8f1ff !important;
  color: #1769ff !important;
}

/* footer actions */
body.cf-jobpage .jd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  margin-top: 30px;
  padding-top: 20px;

  border-top: 1px solid #ded8cc;
}

body.cf-jobpage .jd-actions button {
  min-height: 40px;

  padding: 0 15px !important;

  border: 1px solid #d8d2c7 !important;
  border-radius: 999px !important;

  background: #fffaf1 !important;

  color: #172033 !important;

  font-size: 12.5px !important;
  font-weight: 700 !important;

  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease !important;
}

body.cf-jobpage .jd-actions button:not(#delete-job-btn):hover {
  border-color: rgba(23,105,255,.32) !important;
  background: #edf4ff !important;
  color: #1769ff !important;
}

body.cf-jobpage #delete-job-btn {
  margin-left: auto !important;
  color: #c75b46 !important;
}

body.cf-jobpage #delete-job-btn:hover {
  border-color: rgba(199,91,70,.32) !important;
  background: #fff0ec !important;
}

/* TOAST FINAL — 통합 규칙(아래 TOAST FINAL 섹션) 참고 */

@media (max-width: 1050px) {
  body.cf-jobpage .jd-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body.cf-jobpage #view {
    padding: 24px 18px 58px !important;
  }

  body.cf-jobpage .jd-brief-fields {
    grid-template-columns: 1fr;
  }
}

/* ===== END JOB DETAIL V1 ===== */

/* ===== VOICE PROFILE V1 ===== */

body.cf-voicepage,
body.cf-voicepage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}

body.cf-voicepage #view {
  max-width: none !important;
  width: 100% !important;
  padding: 34px 38px 72px !important;
}


/* SIDEBAR */

@media (min-width: 981px) {

  body.cf-voicepage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;

    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-voicepage .cf-sidebar:hover,
  body.cf-voicepage .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-voicepage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-voicepage .cf-sidebar-name,
  body.cf-voicepage .nav-link > span:last-child,
  body.cf-voicepage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;

    transition:
      opacity .13s ease !important;
  }

  body.cf-voicepage .cf-sidebar:hover .cf-sidebar-name,
  body.cf-voicepage .cf-sidebar:hover .nav-link > span:last-child,
  body.cf-voicepage .cf-sidebar:hover .cf-sidebar-foot {
    opacity: 1 !important;
  }
}


/* TYPOGRAPHY */

.voice-page {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Pretendard",
    sans-serif;
}

.voice-header {
  min-height: 178px;
}

.voice-eyebrow {
  color: #1769ff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: .16em;
}

.voice-header h1,
.voice-detail-header h1 {
  margin: 12px 0 0;

  color: #101827;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif;

  font-size:
    clamp(46px,3.5vw,56px);

  font-weight: 820;
  line-height: .96;

  letter-spacing: -.055em;
}

.voice-header p,
.voice-detail-header p {
  margin-top: 14px;

  max-width: 760px;

  color: #71839b;

  font-size: 17px;
  line-height: 1.55;

  letter-spacing: -.018em;
}


/* CREATE */

.voice-create {
  display: grid;

  grid-template-columns:
    260px minmax(0,1fr);

  gap: 30px;

  align-items: center;

  padding: 23px 0;

  border-top:
    1px solid #ded8cc;

  border-bottom:
    1px solid #ded8cc;
}

.voice-create-copy span,
.voice-panel-head span {
  display: block;

  margin-bottom: 7px;

  color: #1769ff;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .12em;
}

.voice-create-copy strong {
  color: #101827;

  font-size: 18px;
  font-weight: 750;

  letter-spacing: -.025em;
}

.voice-create-form {
  display: flex;
  gap: 8px;
}

.voice-create-form input {
  flex: 1;

  height: 48px;

  padding: 0 17px;

  border:
    1px solid #cfd9e8;

  border-radius: 999px;

  outline: none;

  background: #edf4ff;

  color: #101827;

  font-size: 14px;
}

.voice-create-form input:focus {
  border-color:
    rgba(23,105,255,.46);

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07);
}

.voice-create-form button,
.voice-add-btn {
  min-width: 82px;

  border: 1px solid #d8d2c7;
  border-radius: 999px;

  background: #fffaf1;

  color: #172033;

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.voice-create-form button:hover,
.voice-add-btn:hover {
  border-color:
    rgba(23,105,255,.32);

  background: #edf4ff;

  color: #1769ff;
}


/* SECTION HEAD */

.voice-section-head {
  display: flex;

  align-items: center;
  justify-content: space-between;

  min-height: 76px;

  border-bottom:
    1px solid #ded8cc;
}

.voice-section-head > div {
  display: flex;

  align-items: center;

  gap: 11px;
}

.voice-section-head span {
  color: #71839b;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .12em;
}

.voice-section-head strong {
  color: #101827;

  font-size: 18px;
}

.voice-section-head p {
  color: #8291a5;

  font-size: 12px;
}


/* PROFILE GRID */

.voice-profile-grid {
  display: grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap: 14px;

  padding-top: 16px;
}

.voice-profile-card {
  position: relative;

  min-height: 230px;

  display: flex;
  flex-direction: column;

  padding: 21px;

  border:
    1px solid #ddd6c9;

  border-radius: 18px;

  background: #fffaf1;

  text-decoration: none;

  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease;
}

.voice-profile-card:hover {
  transform: translateY(-2px);

  border-color:
    rgba(23,105,255,.32);

  background: #f2f6ff;
}

.voice-card-index {
  color: #9aa6b7;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .1em;
}

.voice-card-status,
.voice-detail-status {
  position: absolute;

  top: 20px;
  right: 20px;

  padding: 6px 9px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .08em;
}

.voice-card-status.is-trained,
.voice-detail-status.is-trained {
  background: #e6f0ff;
  color: #1769ff;
}

.voice-card-status.is-stale,
.voice-detail-status.is-stale {
  background: #fff0df;
  color: #d87314;
}

.voice-card-status.is-new,
.voice-detail-status.is-new {
  background: #ece7dc;
  color: #65758c;
}

.voice-card-main {
  margin-top: 30px;
}

.voice-card-main h2 {
  margin: 0;

  color: #101827;

  font-size: 24px;
  font-weight: 780;

  letter-spacing: -.04em;
}

.voice-card-main p {
  margin-top: 11px;

  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  color: #71839b;

  font-size: 13px;
  line-height: 1.5;
}

.voice-card-foot {
  margin-top: auto;

  padding-top: 20px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  color: #8291a5;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .09em;
}

.voice-card-foot b {
  margin-left: 5px;

  color: #101827;

  font-size: 14px;
}

.voice-card-arrow {
  color: #ff8a1f;

  font-size: 18px;
}


/* EMPTY */

.voice-empty,
.voice-loading {
  min-height: 220px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px dashed #d8d1c4;

  border-radius: 18px;

  color: #8291a5;
}

.voice-empty strong {
  color: #101827;
}

.voice-empty-small {
  min-height: 110px;
}


/* DETAIL */

.voice-back {
  display: inline-block;

  margin-bottom: 26px;

  color: #71839b;

  font-size: 12px;
  font-weight: 750;

  letter-spacing: .06em;

  text-decoration: none;
}

.voice-back:hover {
  color: #1769ff;
}

.voice-detail-header {
  position: relative;

  min-height: 168px;
}

.voice-detail-status {
  top: 0;
  right: 0;
}

.voice-detail-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.25fr)
    minmax(320px,.75fr);

  gap: 16px;
}

.voice-summary-panel,
.voice-sample-add {
  padding: 23px;

  border:
    1px solid #ddd6c9;

  border-radius: 18px;

  background: #fffaf1;
}

.voice-panel-head {
  display: flex;

  justify-content: space-between;
  align-items: flex-start;
}

.voice-panel-head h2 {
  margin: 0;

  color: #101827;

  font-size: 23px;
  font-weight: 780;

  letter-spacing: -.04em;
}

.voice-summary-text {
  margin-top: 28px;

  color: #172033;

  font-size: 15.5px;
  font-weight: 540;

  line-height: 1.72;

  white-space: pre-wrap;
}

.voice-placeholder {
  color: #94a0b0;
}

.voice-soft-btn {
  height: 36px;

  padding: 0 13px;

  border:
    1px solid #d8d2c7;

  border-radius: 999px;

  background: transparent;

  color: #172033;

  font-size: 11.5px;
  font-weight: 750;

  cursor: pointer;
}

.voice-soft-btn:hover {
  background: #edf4ff;

  border-color:
    rgba(23,105,255,.32);

  color: #1769ff;
}

.voice-sample-add > p {
  margin: 20px 0 12px;

  color: #71839b;

  font-size: 12.5px;
  line-height: 1.5;
}

.voice-sample-add textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 14px;

  resize: vertical;

  border:
    1px solid #d8d2c7;

  border-radius: 13px;

  outline: none;

  background: #f7f2e8;

  color: #101827;

  font-family: inherit;

  font-size: 13.5px;
  line-height: 1.5;
}

.voice-sample-add textarea:focus {
  border-color:
    rgba(23,105,255,.45);

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07);
}

.voice-add-btn {
  width: 100%;
  height: 42px;

  margin-top: 9px;
}


/* SAMPLES */

.voice-samples {
  margin-top: 28px;
}

.voice-sample-row {
  display: grid;

  grid-template-columns:
    54px minmax(0,1fr);

  gap: 18px;

  padding: 19px 8px;

  border-bottom:
    1px solid #ded8cc;
}

.voice-sample-index {
  color: #1769ff;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .1em;
}

.voice-sample-row p {
  margin: 0;

  color: #172033;

  font-size: 14px;
  line-height: 1.58;

  white-space: pre-wrap;
}


/* DELETE */

.voice-danger-zone {
  margin-top: 32px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 20px;

  border-top:
    1px solid #ded8cc;

  color: #8291a5;

  font-size: 12px;
}

.voice-danger-zone button {
  height: 38px;

  padding: 0 14px;

  border:
    1px solid #e2c7bf;

  border-radius: 999px;

  background: transparent;

  color: #c35d48;

  font-size: 11.5px;
  font-weight: 750;

  cursor: pointer;
}

.voice-danger-zone button:hover {
  background: #fff0ec;
}


/* ALERT — TOAST FINAL 통합 규칙(아래 섹션) 참고 */


/* RESPONSIVE */

@media (max-width: 980px) {

  .voice-profile-grid,
  .voice-detail-grid {
    grid-template-columns: 1fr;
  }

  .voice-create {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {

  body.cf-voicepage #view {
    padding:
      24px 18px 58px !important;
  }

  .voice-create-form {
    flex-direction: column;
  }

  .voice-create-form button {
    height: 44px;
  }
}

/* ===== END VOICE PROFILE V1 ===== */

/* ===== VOICE PROFILE FINISH V2 ===== */

/* 전체 밝은 내부 페이지 시스템 */
body.cf-voicepage,
body.cf-voicepage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}


/* -------------------------------
   SIDEBAR
-------------------------------- */

body.cf-voicepage .cf-sidebar {
  background: #faf6ed !important;
  border-right: 1px solid #e3dccf !important;
}

body.cf-voicepage .nav-link {
  color: #1b293d !important;
}

body.cf-voicepage .nav-link.active {
  background: #e7f0ff !important;
  color: #1769ff !important;
}

body.cf-voicepage .nav-glyph {
  color: inherit !important;
}


/* -------------------------------
   HEADER
-------------------------------- */

body.cf-voicepage #view .voice-eyebrow {
  color: #1769ff !important;

  font-size: 14px !important;
  font-weight: 800 !important;

  letter-spacing: .16em !important;
}

body.cf-voicepage #view .voice-header h1,
body.cf-voicepage #view .voice-detail-header h1 {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  opacity: 1 !important;

  font-size: 56px !important;
  font-weight: 820 !important;
  line-height: .96 !important;

  letter-spacing: -.055em !important;
}

body.cf-voicepage #view .voice-header p,
body.cf-voicepage #view .voice-detail-header p {
  color: #71839b !important;

  font-size: 17px !important;
  font-weight: 450 !important;

  line-height: 1.55 !important;
}


/* -------------------------------
   NEW PROFILE INPUT
-------------------------------- */

body.cf-voicepage #view #new-profile-name {
  appearance: none !important;
  -webkit-appearance: none !important;

  height: 48px !important;

  background: #edf4ff !important;
  background-color: #edf4ff !important;

  border: 1px solid #cfd9e8 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  color-scheme: light !important;

  box-shadow: none !important;
}

body.cf-voicepage #view #new-profile-name::placeholder {
  color: #8291a6 !important;
  -webkit-text-fill-color: #8291a6 !important;

  opacity: 1 !important;
}

body.cf-voicepage #view #new-profile-name:focus {
  outline: none !important;

  border-color: rgba(23,105,255,.45) !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07) !important;
}


/* -------------------------------
   ADD BUTTON
-------------------------------- */

body.cf-voicepage #view #add-profile-btn {
  height: 48px !important;

  padding: 0 20px !important;

  border: 1px solid #d8d2c7 !important;
  border-radius: 999px !important;

  background: #fffaf1 !important;

  color: #172033 !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease !important;
}

body.cf-voicepage #view #add-profile-btn:hover {
  background: #edf4ff !important;

  border-color: rgba(23,105,255,.32) !important;

  color: #1769ff !important;
}


/* -------------------------------
   SECTION / EMPTY
-------------------------------- */

body.cf-voicepage .voice-section-head {
  border-color: #ded8cc !important;
}

body.cf-voicepage .voice-section-head span,
body.cf-voicepage .voice-section-head p {
  color: #8291a5 !important;
}

body.cf-voicepage .voice-section-head strong {
  color: #101827 !important;
}

body.cf-voicepage .voice-empty {
  background: transparent !important;

  border: 1px dashed #d8d1c4 !important;

  color: #8291a5 !important;
}

body.cf-voicepage .voice-empty strong {
  color: #101827 !important;
}


/* ===== END VOICE PROFILE FINISH V2 ===== */

/* ===== BRAND PAGE V1 ===== */

body.cf-brandpage,
body.cf-brandpage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}

body.cf-brandpage #view {
  max-width: none !important;
  width: 100% !important;

  padding:
    34px
    38px
    72px !important;
}


/* SIDEBAR */

body.cf-brandpage .cf-sidebar {
  background: #faf6ed !important;

  border-right:
    1px solid #e3dccf !important;
}


@media (min-width: 981px) {

  body.cf-brandpage .cf-sidebar {
    width: 64px !important;

    overflow: hidden !important;

    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-brandpage .cf-sidebar:hover,
  body.cf-brandpage .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-brandpage .cf-main {
    margin-left:
      64px !important;
  }

  body.cf-brandpage .cf-sidebar-name,
  body.cf-brandpage .nav-link > span:last-child,
  body.cf-brandpage .cf-sidebar-foot {
    opacity: 0 !important;

    white-space:
      nowrap !important;

    transition:
      opacity .13s ease !important;
  }

  body.cf-brandpage
  .cf-sidebar:hover
  .cf-sidebar-name,

  body.cf-brandpage
  .cf-sidebar:hover
  .nav-link > span:last-child,

  body.cf-brandpage
  .cf-sidebar:hover
  .cf-sidebar-foot {
    opacity: 1 !important;
  }
}


body.cf-brandpage .nav-link {
  color: #1b293d !important;
}

body.cf-brandpage .nav-link.active {
  background: #e7f0ff !important;

  color: #1769ff !important;
}


/* HEADER */

.brand-header {
  min-height: 176px;
}

.brand-eyebrow {
  color: #1769ff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: .16em;
}

.brand-header h1 {
  margin: 12px 0 0;

  color: #101827;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif;

  font-size: 56px;

  font-weight: 820;
  line-height: .96;

  letter-spacing: -.055em;
}

.brand-header p {
  margin-top: 14px;

  color: #71839b;

  font-size: 17px;
  font-weight: 450;

  line-height: 1.55;

  letter-spacing: -.018em;
}


/* TOOLBAR */

.brand-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  padding:
    19px 0;

  border-top:
    1px solid #ded8cc;

  border-bottom:
    1px solid #ded8cc;
}


.brand-search {
  position: relative;

  width:
    min(600px, 55%);
}


.brand-search > span {
  position: absolute;

  left: 17px;
  top: 50%;

  transform:
    translateY(-50%);

  color: #1769ff;

  font-size: 20px;
}


.brand-search input {
  width: 100%;
  height: 48px;

  box-sizing:
    border-box;

  padding:
    0 17px 0 44px;

  border:
    1px solid #cfd9e8;

  border-radius:
    999px;

  outline: none;

  background: #edf4ff;

  color: #101827;

  font-size: 14px;
}


.brand-search input::placeholder {
  color: #8291a6;
}


.brand-search input:focus {
  border-color:
    rgba(23,105,255,.45);

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07);
}


/* SUMMARY */

.brand-summary {
  display: flex;

  gap: 8px;
}


.brand-summary-pill {
  min-width: 120px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding:
    0 15px;

  border:
    1px solid #ddd6c9;

  border-radius:
    999px;

  color: #71839b;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .08em;
}


.brand-summary-pill strong {
  color: #101827;

  font-size: 16px;

  letter-spacing: 0;
}


.brand-summary-pill.is-active {
  border-color: #1769ff;

  background: #1769ff;

  color: white;
}


.brand-summary-pill.is-active strong {
  color: white;
}


/* LIST */

.brand-section {
  margin-top: 17px;
}


.brand-list-head {
  display: grid;

  grid-template-columns:
    70px
    minmax(260px,1fr)
    160px
    110px;

  gap: 18px;

  align-items: center;

  min-height: 42px;

  padding:
    0 14px;

  border-bottom:
    1px solid #d8d1c5;

  color: #8291a5;

  font-size: 9.5px;
  font-weight: 850;

  letter-spacing: .12em;
}


.brand-row {
  display: grid;

  grid-template-columns:
    70px
    minmax(260px,1fr)
    160px
    110px;

  gap: 18px;

  align-items: center;

  min-height: 92px;

  padding:
    12px 14px;

  border-bottom:
    1px solid #ded8cc;

  transition:
    background-color .14s ease;
}


.brand-row:hover {
  background:
    rgba(237,244,255,.58);
}


.brand-index {
  color: #96a2b3;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .10em;
}


/* IDENTITY */

.brand-identity {
  display: flex;

  align-items: center;

  gap: 15px;

  min-width: 0;
}


.brand-mark {
  width: 48px;
  height: 48px;

  flex:
    0 0 48px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 14px;

  background: #1769ff;

  color: #fffaf1;

  font-size: 18px;
  font-weight: 820;
}


.brand-identity strong {
  overflow: hidden;

  color: #101827;

  font-size: 18px;
  font-weight: 760;

  letter-spacing: -.03em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* BRIEF COUNT */

.brand-briefs {
  display: flex;

  align-items: baseline;

  gap: 7px;
}


.brand-briefs strong {
  color: #101827;

  font-size: 24px;
  font-weight: 780;
}


.brand-briefs span {
  color: #8291a5;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .09em;
}


/* DELETE */

.brand-actions {
  display: flex;

  justify-content:
    flex-end;
}


.delete-brand-btn {
  height: 34px;

  padding:
    0 13px;

  border:
    1px solid #d8d2c7;

  border-radius:
    999px;

  background:
    transparent;

  color: #71839b;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .07em;

  cursor: pointer;

  transition:
    background .14s ease,
    border-color .14s ease,
    color .14s ease;
}


.delete-brand-btn:hover {
  border-color:
    rgba(198,84,63,.30);

  background: #fff0ec;

  color: #c6543f;
}


/* EMPTY */

.brand-empty {
  min-height: 260px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  border-bottom:
    1px solid #ded8cc;

  color: #8291a5;
}


.brand-empty strong {
  color: #101827;

  font-size: 16px;
}


.brand-empty span {
  font-size: 13px;
}


/* ALERT — TOAST FINAL 통합 규칙(아래 섹션) 참고 */


/* RESPONSIVE */

@media (max-width: 900px) {

  .brand-toolbar {
    align-items: stretch;

    flex-direction: column;
  }

  .brand-search {
    width: 100%;
  }

  .brand-summary {
    justify-content:
      flex-start;
  }

  .brand-list-head {
    display: none;
  }

  .brand-row {
    grid-template-columns:
      42px
      minmax(0,1fr)
      80px;

    gap: 12px;
  }

  .brand-index {
    display: none;
  }

  .brand-actions {
    grid-column: 3;
  }
}


/* ===== END BRAND PAGE V1 ===== */

/* ===== BRAND FINISH V2 ===== */

body.cf-brandpage,
body.cf-brandpage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}


/* HEADER */

body.cf-brandpage #view .brand-eyebrow {
  color: #1769ff !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  letter-spacing: .16em !important;
}

body.cf-brandpage #view .brand-header h1 {
  margin: 12px 0 0 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  opacity: 1 !important;

  font-size: 56px !important;
  font-weight: 820 !important;
  line-height: .96 !important;

  letter-spacing: -.055em !important;
}

body.cf-brandpage #view .brand-header p {
  margin-top: 14px !important;

  color: #71839b !important;

  font-size: 17px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;

  letter-spacing: -.018em !important;
}


/* SEARCH */

body.cf-brandpage #view #brand-search {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #edf4ff !important;
  background-color: #edf4ff !important;

  border: 1px solid #cfd9e8 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  color-scheme: light !important;

  box-shadow: none !important;
}

body.cf-brandpage #view #brand-search::placeholder {
  color: #8291a6 !important;
  -webkit-text-fill-color: #8291a6 !important;

  opacity: 1 !important;
}

body.cf-brandpage #view #brand-search:focus {
  outline: none !important;

  border-color: rgba(23,105,255,.45) !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07) !important;
}


/* SIDEBAR */

body.cf-brandpage .cf-sidebar {
  background: #faf6ed !important;
  border-right: 1px solid #e3dccf !important;
}

body.cf-brandpage .nav-link {
  color: #1b293d !important;
}

body.cf-brandpage .nav-link.active {
  background: #e7f0ff !important;
  color: #1769ff !important;
}


/*
 * 펼쳐진 사이드바가 헤더를 덮지 않도록
 * hover 시 main도 같이 밀어줌
 */
@media (min-width: 981px) {

  body.cf-brandpage .cf-main {
    margin-left: 64px !important;

    transition:
      margin-left .2s ease !important;
  }

  body.cf-brandpage .cf-sidebar:hover ~ .cf-main,
  body.cf-brandpage .cf-sidebar:focus-within ~ .cf-main {
    margin-left: 210px !important;
  }
}


/* LIST */

body.cf-brandpage .brand-row {
  color: #101827 !important;
}

body.cf-brandpage .brand-identity strong {
  color: #101827 !important;
}

body.cf-brandpage .brand-briefs strong {
  color: #101827 !important;
}

body.cf-brandpage .brand-row:hover {
  background:
    rgba(237,244,255,.58) !important;
}


/* SUMMARY */

body.cf-brandpage .brand-summary-pill {
  background: transparent !important;
  border-color: #ddd6c9 !important;
}

body.cf-brandpage .brand-summary-pill.is-active {
  background: #1769ff !important;
  border-color: #1769ff !important;
  color: white !important;
}


/* ===== END BRAND FINISH V2 ===== */

/* ===== SOURCES PAGE V1 ===== */

body.cf-sourcespage,
body.cf-sourcespage .cf-main {
  background: #f7f2e8 !important;
  color: #101827 !important;
}

body.cf-sourcespage #view {
  max-width: none !important;
  width: 100% !important;

  padding:
    34px 38px 72px !important;
}


/* SIDEBAR */

body.cf-sourcespage .cf-sidebar {
  background: #faf6ed !important;
  border-right: 1px solid #e3dccf !important;
}

@media (min-width: 981px) {

  body.cf-sourcespage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;

    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-sourcespage .cf-sidebar:hover,
  body.cf-sourcespage .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-sourcespage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-sourcespage .cf-sidebar-name,
  body.cf-sourcespage .nav-link > span:last-child,
  body.cf-sourcespage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;

    transition:
      opacity .13s ease !important;
  }

  body.cf-sourcespage
  .cf-sidebar:hover
  .cf-sidebar-name,

  body.cf-sourcespage
  .cf-sidebar:hover
  .nav-link > span:last-child,

  body.cf-sourcespage
  .cf-sidebar:hover
  .cf-sidebar-foot {
    opacity: 1 !important;
  }
}

body.cf-sourcespage .nav-link {
  color: #1b293d !important;
}

body.cf-sourcespage .nav-link.active {
  background: #e7f0ff !important;
  color: #1769ff !important;
}


/* HEADER */

.sources-header {
  min-height: 176px;
}

.sources-eyebrow {
  color: #1769ff;

  font-size: 14px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: .16em;
}

.sources-header h1 {
  margin: 12px 0 0;

  color: #101827;

  font-size: 56px;
  font-weight: 820;
  line-height: .96;

  letter-spacing: -.055em;
}

.sources-header p {
  margin-top: 14px;

  color: #71839b;

  font-size: 17px;
  font-weight: 450;

  line-height: 1.55;

  letter-spacing: -.018em;
}


/* DROP / ADD */

.sources-drop,
.sources-add {
  display: grid;

  grid-template-columns:
    250px minmax(0,1fr);

  gap: 30px;

  align-items: center;

  padding: 21px 0;

  border-top:
    1px solid #ded8cc;
}

.sources-add {
  border-bottom:
    1px solid #ded8cc;
}

.sources-block-copy > span {
  display: block;

  margin-bottom: 6px;

  color: #1769ff;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .12em;
}

.sources-block-copy strong {
  color: #101827;

  font-size: 18px;
  font-weight: 760;

  letter-spacing: -.025em;
}

.sources-block-copy p {
  margin: 7px 0 0;

  color: #8291a5;

  font-size: 12px;
  line-height: 1.45;
}


/* UPLOAD */

.sources-upload-zone {
  min-height: 78px;

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 0 20px;

  border:
    1px dashed #b8c9df;

  border-radius: 16px;

  background:
    #edf4ff;

  cursor: pointer;

  transition:
    border-color .15s ease,
    background .15s ease;
}

.sources-upload-zone:hover {
  border-color:
    #1769ff;

  background:
    #e6f0ff;
}

.sources-upload-plus {
  width: 38px;
  height: 38px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #1769ff;

  color: white;

  font-size: 24px;
}

.sources-upload-zone strong {
  display: block;

  color: #101827;

  font-size: 14px;
}

.sources-upload-zone small {
  color: #8291a5;

  font-size: 11px;
}


/* ADD FORM */

.sources-add-form {
  display: grid;

  grid-template-columns:
    180px
    minmax(260px,1fr)
    auto
    76px;

  gap: 9px;

  align-items: center;
}

.sources-add-form
input[type="text"] {
  height: 46px;

  box-sizing: border-box;

  padding: 0 15px;

  border:
    1px solid #cfd9e8;

  border-radius: 999px;

  outline: none;

  background: #edf4ff;

  color: #101827;

  font-size: 13px;
}

.sources-add-form
input[type="text"]:focus {
  border-color:
    rgba(23,105,255,.45);

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07);
}

.sources-recursive {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #65758c;

  font-size: 11px;

  white-space: nowrap;
}

.sources-recursive input {
  accent-color: #1769ff;
}

#add-source-btn {
  height: 44px;

  border:
    1px solid #d8d2c7;

  border-radius: 999px;

  background: #fffaf1;

  color: #172033;

  font-size: 12px;
  font-weight: 750;

  cursor: pointer;
}

#add-source-btn:hover {
  background: #edf4ff;
  color: #1769ff;
}


/* OVERVIEW */

.sources-overview {
  display: flex;

  gap: 8px;

  padding: 18px 0;

  border-bottom:
    1px solid #ded8cc;
}

.sources-pill {
  min-width: 122px;
  height: 42px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 14px;

  padding: 0 14px;

  border:
    1px solid #ddd6c9;

  border-radius: 999px;

  color: #71839b;

  font-size: 10px;
  font-weight: 850;

  letter-spacing: .08em;
}

.sources-pill strong {
  color: #101827;

  font-size: 16px;

  letter-spacing: 0;
}

.sources-pill.is-active {
  border-color: #1769ff;

  background: #1769ff;

  color: white;
}

.sources-pill.is-active strong {
  color: white;
}


/* LIST */

.sources-list-head,
.source-row {
  display: grid;

  grid-template-columns:
    110px
    190px
    minmax(250px,1fr)
    170px
    150px;

  gap: 18px;

  align-items: center;
}

.sources-list-head {
  min-height: 42px;

  padding: 0 12px;

  border-bottom:
    1px solid #d8d1c5;

  color: #8291a5;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .12em;
}

.source-row {
  min-height: 88px;

  padding: 12px;

  border-bottom:
    1px solid #ded8cc;

  transition:
    background .14s ease;
}

.source-row:hover {
  background:
    rgba(237,244,255,.58);
}


/* STATUS */

.source-status {
  display: flex;

  align-items: center;

  gap: 8px;
}

.source-status i {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #bfc7d2;
}

.source-status i.is-active {
  background: #1769ff;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.09);
}

.source-status span {
  color: #71839b;

  font-size: 9px;
  font-weight: 850;

  letter-spacing: .08em;
}

.source-name strong {
  color: #101827;

  font-size: 15px;
  font-weight: 720;
}

.source-path {
  overflow: hidden;

  color: #71839b;

  font-size: 12px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* TOGGLE */

.source-watch {
  display: flex;

  align-items: center;

  gap: 10px;
}

.source-watch small {
  color: #8291a5;

  font-size: 8.5px;
  font-weight: 800;

  letter-spacing: .06em;
}

.source-toggle {
  position: relative;

  width: 38px;
  height: 22px;

  display: inline-block;
}

.source-toggle input {
  display: none;
}

.source-toggle span {
  position: absolute;

  inset: 0;

  border-radius: 999px;

  background: #d8dde4;

  cursor: pointer;

  transition: background .15s ease;
}

.source-toggle span::after {
  content: "";

  position: absolute;

  width: 16px;
  height: 16px;

  left: 3px;
  top: 3px;

  border-radius: 50%;

  background: white;

  transition: transform .15s ease;
}

.source-toggle
input:checked + span {
  background: #1769ff;
}

.source-toggle
input:checked + span::after {
  transform: translateX(16px);
}


/* ACTIONS */

.source-actions {
  display: flex;

  justify-content: flex-end;

  gap: 6px;
}

.source-actions button {
  height: 32px;

  padding: 0 11px;

  border:
    1px solid #d8d2c7;

  border-radius: 999px;

  background: transparent;

  color: #65758c;

  font-size: 8.5px;
  font-weight: 850;

  letter-spacing: .06em;

  cursor: pointer;
}

.source-actions button:hover {
  background: #edf4ff;
  color: #1769ff;
}

.source-actions
.delete-source-btn:hover {
  background: #fff0ec;
  color: #c6543f;

  border-color:
    rgba(198,84,63,.30);
}

.test-source-btn.is-success {
  background: #e7f0ff !important;
  color: #1769ff !important;
}

.test-source-btn.is-fail {
  background: #fff0ec !important;
  color: #c6543f !important;
}


/* EMPTY */

.sources-empty {
  min-height: 220px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  color: #8291a5;
}

.sources-empty strong {
  color: #101827;

  font-size: 16px;
}


/* ALERT — TOAST FINAL 통합 규칙(아래 섹션) 참고 */


/* RESPONSIVE */

@media (max-width: 1050px) {

  .sources-drop,
  .sources-add {
    grid-template-columns: 1fr;
  }

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

  .sources-list-head {
    display: none;
  }

  .source-row {
    grid-template-columns:
      100px minmax(0,1fr) auto;

    gap: 12px;
  }

  .source-path {
    grid-column:
      2 / 4;
  }
}

/* ===== END SOURCES PAGE V1 ===== */

/* ===== SOURCES FINISH V2 ===== */


/* HEADER */
body.cf-sourcespage #view .sources-eyebrow {
  color: #1769ff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .16em !important;
}

body.cf-sourcespage #view .sources-header h1 {
  margin: 12px 0 0 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  opacity: 1 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif !important;

  font-size: 56px !important;
  font-weight: 820 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

body.cf-sourcespage #view .sources-header p {
  margin-top: 14px !important;

  color: #71839b !important;

  font-size: 17px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;
  letter-spacing: -.018em !important;
}


/* ADD SOURCE INPUTS */
body.cf-sourcespage #view #source-name,
body.cf-sourcespage #view #source-path {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: #edf4ff !important;
  background-color: #edf4ff !important;

  border: 1px solid #cfd9e8 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  color-scheme: light !important;

  box-shadow: none !important;
}

body.cf-sourcespage #view #source-name::placeholder,
body.cf-sourcespage #view #source-path::placeholder {
  color: #8291a6 !important;
  -webkit-text-fill-color: #8291a6 !important;
  opacity: 1 !important;
}

body.cf-sourcespage #view #source-name:focus,
body.cf-sourcespage #view #source-path:focus {
  outline: none !important;

  border-color:
    rgba(23,105,255,.45) !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07) !important;
}


/* ADD BUTTON */
body.cf-sourcespage #view #add-source-btn {
  background: #fffaf1 !important;
  color: #172033 !important;
  border-color: #d8d2c7 !important;
}

body.cf-sourcespage #view #add-source-btn:hover {
  background: #edf4ff !important;
  color: #1769ff !important;
  border-color: rgba(23,105,255,.32) !important;
}


/* ===== END SOURCES FINISH V2 ===== */

/* ===== ALERTS LIGHT SYSTEM V1 ===== */

body.cf-alertspage,
body.cf-alertspage .cf-main,
body.cf-alertspage #view {
  background: #f7f2e8 !important;
  color: #101827 !important;
}


/* 페이지 자체가 알림함이므로 전역 경고 배너 중복 제거 */
body.cf-alertspage #critical-banner {
  display: none !important;
}


/* CONTENT */

body.cf-alertspage #view {
  max-width: none !important;
  width: 100% !important;

  padding:
    34px 38px 72px !important;
}

body.cf-alertspage #view > * {
  background-color: transparent !important;
}


/* SIDEBAR */

body.cf-alertspage .cf-sidebar {
  background: #faf6ed !important;

  border-right:
    1px solid #e3dccf !important;
}

body.cf-alertspage .nav-link {
  color: #1b293d !important;
}

body.cf-alertspage .nav-link.active {
  background: #e7f0ff !important;
  color: #1769ff !important;
}


@media (min-width: 981px) {

  body.cf-alertspage .cf-sidebar {
    width: 64px !important;
    overflow: hidden !important;

    transition:
      width .2s ease,
      box-shadow .2s ease !important;
  }

  body.cf-alertspage .cf-sidebar:hover,
  body.cf-alertspage .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-alertspage .cf-main {
    margin-left: 64px !important;
  }

  body.cf-alertspage .cf-sidebar-name,
  body.cf-alertspage .nav-link > span:last-child,
  body.cf-alertspage .cf-sidebar-foot {
    opacity: 0 !important;
    white-space: nowrap !important;

    transition:
      opacity .13s ease !important;
  }

  body.cf-alertspage
  .cf-sidebar:hover
  .cf-sidebar-name,

  body.cf-alertspage
  .cf-sidebar:hover
  .nav-link > span:last-child,

  body.cf-alertspage
  .cf-sidebar:hover
  .cf-sidebar-foot {
    opacity: 1 !important;
  }
}


/* HEADER */

body.cf-alertspage #view h1 {
  margin:
    0 0 14px !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  opacity: 1 !important;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Pretendard",
    sans-serif !important;

  font-size: 56px !important;
  font-weight: 820 !important;

  line-height: .96 !important;
  letter-spacing: -.055em !important;
}

body.cf-alertspage #view h1::before {
  content: "ALERTS";

  display: block;

  margin-bottom: 12px;

  color: #1769ff;
  -webkit-text-fill-color: #1769ff;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: .16em;
}


/* 첫 설명문 */
body.cf-alertspage #view h1 + p {
  margin-top: 0 !important;
  margin-bottom: 30px !important;

  color: #71839b !important;

  font-size: 17px !important;
  font-weight: 450 !important;

  line-height: 1.55 !important;
  letter-spacing: -.018em !important;
}


/* OLD DARK UTILITY OVERRIDES */

body.cf-alertspage #view [class*="text-neutral-"] {
  color: #71839b !important;
}

body.cf-alertspage #view [class*="border-neutral-"] {
  border-color: #ded8cc !important;
}

body.cf-alertspage #view [class*="bg-neutral-"] {
  background-color: transparent !important;
}


/* 카드 / 그룹 */

body.cf-alertspage #view .card {
  background: #fffaf1 !important;

  border:
    1px solid #ddd6c9 !important;

  border-radius: 16px !important;

  box-shadow: none !important;

  color: #101827 !important;

  transition:
    background-color .14s ease,
    border-color .14s ease !important;
}

body.cf-alertspage #view .card:hover {
  background: #edf4ff !important;

  border-color:
    rgba(23,105,255,.26) !important;
}


/* 일반 텍스트 */

body.cf-alertspage #view strong,
body.cf-alertspage #view
[class*="font-medium"],
body.cf-alertspage #view
[class*="font-semibold"] {
  color: #101827 !important;
}


/* TABS */

body.cf-alertspage #view button,
body.cf-alertspage #view a {
  transition:
    color .14s ease,
    background-color .14s ease,
    border-color .14s ease !important;
}

body.cf-alertspage #view button {
  color: #65758c;
}

body.cf-alertspage #view button:hover {
  color: #1769ff !important;
}


/* 기존 active blue는 유지 */
body.cf-alertspage #view
[class*="text-blue-"],
body.cf-alertspage #view
[class*="border-blue-"] {
  color: #1769ff !important;
}


/* ACTION BUTTON */

body.cf-alertspage #view
button[class*="border"] {
  min-height: 34px;

  border-color: #d8d2c7 !important;

  border-radius: 999px !important;

  background: #fffaf1 !important;

  color: #65758c !important;
}

body.cf-alertspage #view
button[class*="border"]:hover {
  background: #edf4ff !important;

  border-color:
    rgba(23,105,255,.32) !important;

  color: #1769ff !important;
}


/* CHECKBOX */

body.cf-alertspage #view
input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 18px !important;
  height: 18px !important;

  border:
    1.5px solid #bdc9d8 !important;

  border-radius: 4px !important;

  background: #fff !important;

  cursor: pointer;
}

body.cf-alertspage #view
input[type="checkbox"]:checked {
  border-color: #1769ff !important;

  background-color: #1769ff !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.7 10 11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* 숫자 badge */

body.cf-alertspage #view
[class*="rounded-full"] {
  border-color: #ddd6c9;
}


/* 미확인 상태 orange 유지 */

body.cf-alertspage #view
[class*="orange"] {
  color: #d87314 !important;
}


/* 구분선 */

body.cf-alertspage #view hr {
  border-color: #ded8cc !important;
}


/* ===== END ALERTS LIGHT SYSTEM V1 ===== */

/* ===== ALERTS FINAL CONTRAST V2 ===== */

/* 남아 있는 dark-theme surface 제거 */
body.cf-alertspage #view [class*="bg-neutral-950"],
body.cf-alertspage #view [class*="bg-neutral-900"],
body.cf-alertspage #view [class*="bg-neutral-800"],
body.cf-alertspage #view [class*="bg-zinc-950"],
body.cf-alertspage #view [class*="bg-zinc-900"],
body.cf-alertspage #view [class*="bg-slate-950"],
body.cf-alertspage #view [class*="bg-slate-900"] {
  background: #fffaf1 !important;
  background-color: #fffaf1 !important;
}


/* 핵심 텍스트는 확실하게 검정 */
body.cf-alertspage #view [class*="text-neutral-50"],
body.cf-alertspage #view [class*="text-neutral-100"],
body.cf-alertspage #view [class*="text-neutral-200"],
body.cf-alertspage #view [class*="text-neutral-300"],
body.cf-alertspage #view [class*="text-zinc-100"],
body.cf-alertspage #view [class*="text-zinc-200"],
body.cf-alertspage #view [class*="text-white"] {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}


/* blue badge 내부 흰 글씨는 유지 */
body.cf-alertspage #view [class*="bg-blue"].text-white,
body.cf-alertspage #view [class*="bg-blue"] .text-white,
body.cf-alertspage #view [class*="bg-blue"] [class*="text-white"] {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}


/* 보조 텍스트 */
body.cf-alertspage #view [class*="text-neutral-400"],
body.cf-alertspage #view [class*="text-neutral-500"],
body.cf-alertspage #view [class*="text-neutral-600"] {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}


/* 활성 탭 */
body.cf-alertspage #view button[class*="border-blue"],
body.cf-alertspage #view button[class*="text-blue"] {
  color: #1769ff !important;
  -webkit-text-fill-color: #1769ff !important;
}


/* 상단 count / neutral badges */
body.cf-alertspage #view span[class*="bg-neutral"],
body.cf-alertspage #view span[class*="bg-zinc"] {
  background: #ebe7de !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}


/* 알림 그룹 제목 */
body.cf-alertspage #view .card [class*="font-medium"],
body.cf-alertspage #view .card [class*="font-semibold"],
body.cf-alertspage #view .card strong {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  opacity: 1 !important;
}


/* 선택 전 비활성 액션 */
body.cf-alertspage #view button:disabled {
  opacity: 1 !important;

  background: #f0ece4 !important;

  border-color: #e0d9cd !important;

  color: #a0a9b5 !important;
  -webkit-text-fill-color: #a0a9b5 !important;

  cursor: default !important;
}


/* 상단 요약 pill도 라이트 시스템으로 */
body.cf-alertspage #view [class*="rounded-full"][class*="border"] {
  border-color: #ddd6c9 !important;
}


/* orange unread badge는 그대로 */
body.cf-alertspage #view [class*="orange"] {
  color: #d87314 !important;
  -webkit-text-fill-color: #d87314 !important;
}

/* ===== END ALERTS FINAL CONTRAST V2 ===== */

/* ===== ALERTS MICRO FINAL V3 ===== */

/* 우측 상단 요약: 검정 pill 제거 */
body.cf-alertspage #view .dashboard-summary {
  background: transparent !important;
  color: #71839b !important;

  border: 1px solid #ddd6c9 !important;
  border-radius: 999px !important;

  box-shadow: none !important;
}

body.cf-alertspage #view .dashboard-summary * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}


/* 탭 가독성 */
body.cf-alertspage #view .dash-tab-btn {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
  opacity: 1 !important;
}

body.cf-alertspage #view .dash-tab-btn > span:first-child {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  opacity: 1 !important;
}

body.cf-alertspage #view .dash-tab-btn.active {
  color: #1769ff !important;
  -webkit-text-fill-color: #1769ff !important;
  opacity: 1 !important;

  border-color: #1769ff !important;
}


/* 알림 카드 본문 가독성 */
body.cf-alertspage #view .card {
  color: #101827 !important;
}

body.cf-alertspage #view .card [class*="opacity-"] {
  opacity: 1 !important;
}

body.cf-alertspage #view .card [class*="font-medium"],
body.cf-alertspage #view .card [class*="font-semibold"],
body.cf-alertspage #view .card strong {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  opacity: 1 !important;
}


/* 날짜/보조정보는 다시 muted */
body.cf-alertspage #view .card [class*="text-neutral-"],
body.cf-alertspage #view .card [class*="text-slate-"],
body.cf-alertspage #view .card [class*="text-zinc-"] {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}


/* attention은 orange */
body.cf-alertspage #view .card [class*="orange"] {
  color: #d87314 !important;
  -webkit-text-fill-color: #d87314 !important;
}


/* ===== END ALERTS MICRO FINAL V3 ===== */



/* ===== COPY FACTORY INTERNAL DESIGN SYSTEM V1 ===== */


/* =========================================================
   0. TOKENS
   Mainboard에는 적용되지 않는다
========================================================= */

body.cf-internal {
  --cf-bg: #f7f2e8;
  --cf-surface: #fffaf1;

  --cf-blue: #1769ff;
  --cf-blue-soft: #edf4ff;
  --cf-blue-hover: #e7f0ff;

  --cf-orange: #ff8a1f;

  --cf-ink: #101827;
  --cf-text: #172033;
  --cf-muted: #71839b;
  --cf-faint: #8291a5;

  --cf-line: #ded8cc;
  --cf-line-strong: #d2cabd;

  --cf-danger: #c6543f;
  --cf-danger-soft: #fff0ec;

  --cf-radius-sm: 10px;
  --cf-radius-md: 14px;
  --cf-radius-lg: 18px;
  --cf-radius-pill: 999px;

  --cf-control-h: 46px;

  --cf-motion-fast: 150ms;
  --cf-motion-page: 280ms;

  background: var(--cf-bg) !important;
  color: var(--cf-ink) !important;
}


/* =========================================================
   1. TYPOGRAPHY
========================================================= */

body.cf-internal,
body.cf-internal button,
body.cf-internal input,
body.cf-internal textarea,
body.cf-internal select {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Pretendard",
    "Segoe UI",
    sans-serif !important;
}


/* PAGE EYEBROW */

body.cf-internal :is(
  .collect-eyebrow,
  .voice-eyebrow,
  .brand-eyebrow,
  .sources-eyebrow,
  .jd-eyebrow
) {
  color: var(--cf-blue) !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  letter-spacing: .16em !important;
}


/* INDEX PAGE HEADLINE */

body.cf-internal :is(
  .dashboard-heading,
  .collect-heading,
  .voice-header,
  .brand-header,
  .sources-header
) h1,
body.cf-alertspage #view h1 {
  color: var(--cf-ink) !important;
  -webkit-text-fill-color: var(--cf-ink) !important;

  font-size: 56px !important;
  font-weight: 820 !important;
  line-height: .96 !important;

  letter-spacing: -.055em !important;

  opacity: 1 !important;
}


/* DETAIL PAGE HEADLINE */

body.cf-internal .jd-title,
body.cf-internal .voice-detail-header h1 {
  color: var(--cf-ink) !important;

  font-size: 48px !important;
  font-weight: 820 !important;
  line-height: 1 !important;

  letter-spacing: -.05em !important;
}


/* PAGE DESCRIPTION */

body.cf-internal :is(
  .dashboard-heading,
  .collect-heading,
  .voice-header,
  .brand-header,
  .sources-header,
  .voice-detail-header
) > p,
body.cf-alertspage #view h1 + p {
  color: var(--cf-muted) !important;

  font-size: 17px !important;
  font-weight: 450 !important;
  line-height: 1.55 !important;

  letter-spacing: -.018em !important;
}


/* SECTION KICKER */

body.cf-internal :is(
  .jd-section-kicker,
  .voice-panel-head > div > span,
  .voice-create-copy > span,
  .sources-block-copy > span
) {
  color: var(--cf-blue) !important;

  font-size: 10px !important;
  font-weight: 850 !important;

  letter-spacing: .12em !important;
}


/* =========================================================
   2. SIDEBAR
========================================================= */

body.cf-internal .cf-sidebar {
  background: #faf6ed !important;

  border-right:
    1px solid #e3dccf !important;
}

body.cf-internal .nav-link {
  color: #1b293d !important;

  border-radius: 10px !important;

  transition:
    color var(--cf-motion-fast) ease,
    background-color var(--cf-motion-fast) ease !important;
}

body.cf-internal .nav-link:hover {
  background:
    rgba(237,244,255,.68) !important;

  color: var(--cf-blue) !important;
}

body.cf-internal .nav-link.active {
  background: var(--cf-blue-hover) !important;
  color: var(--cf-blue) !important;
}


@media (min-width: 981px) {

  body.cf-internal .cf-sidebar {
    width: 64px !important;

    overflow: hidden !important;

    transition:
      width 200ms ease,
      box-shadow 200ms ease !important;
  }

  body.cf-internal .cf-sidebar:hover,
  body.cf-internal .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 42px
      rgba(22,32,48,.10) !important;
  }

  body.cf-internal .cf-main {
    margin-left: 64px !important;
  }

  body.cf-internal :is(
    .cf-sidebar-name,
    .cf-sidebar-foot
  ),
  body.cf-internal .nav-link > span:last-child {
    opacity: 0 !important;

    white-space: nowrap !important;

    transition:
      opacity 130ms ease !important;
  }

  body.cf-internal
  .cf-sidebar:hover
  :is(.cf-sidebar-name,.cf-sidebar-foot),

  body.cf-internal
  .cf-sidebar:hover
  .nav-link > span:last-child,

  body.cf-internal
  .cf-sidebar:focus-within
  .nav-link > span:last-child {
    opacity: 1 !important;
  }
}


/* =========================================================
   3. INPUT / SEARCH / SELECT
========================================================= */

body.cf-internal #view input:is(
  [type="text"],
  [type="search"]
),
body.cf-internal #view select {
  min-height: var(--cf-control-h) !important;

  box-sizing: border-box !important;

  border:
    1px solid #cfd9e8 !important;

  border-radius:
    var(--cf-radius-pill) !important;

  background:
    var(--cf-blue-soft) !important;

  color:
    var(--cf-ink) !important;

  -webkit-text-fill-color:
    var(--cf-ink) !important;

  box-shadow: none !important;

  font-size: 14px !important;

  transition:
    border-color var(--cf-motion-fast) ease,
    box-shadow var(--cf-motion-fast) ease,
    background-color var(--cf-motion-fast) ease !important;
}


body.cf-internal #view input:is(
  [type="text"],
  [type="search"]
)::placeholder,
body.cf-internal #view textarea::placeholder {
  color: #8291a6 !important;
  -webkit-text-fill-color: #8291a6 !important;

  opacity: 1 !important;
}


body.cf-internal #view input:is(
  [type="text"],
  [type="search"]
):focus,
body.cf-internal #view select:focus,
body.cf-internal #view textarea:focus {
  outline: none !important;

  border-color:
    rgba(23,105,255,.45) !important;

  box-shadow:
    0 0 0 4px
    rgba(23,105,255,.07) !important;
}


body.cf-internal #view textarea {
  box-sizing: border-box !important;

  border:
    1px solid #d8d2c7 !important;

  border-radius:
    var(--cf-radius-md) !important;

  background:
    var(--cf-surface) !important;

  color:
    var(--cf-ink) !important;

  font-size: 14px !important;
  line-height: 1.55 !important;
}


/* =========================================================
   4. CHECKBOX
========================================================= */

body.cf-internal #view
input[type="checkbox"]:not(.source-enabled) {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 18px !important;
  height: 18px !important;

  flex: 0 0 18px !important;

  border:
    1.5px solid #bdc9d8 !important;

  border-radius: 4px !important;

  background: #fff !important;

  cursor: pointer !important;

  transition:
    border-color var(--cf-motion-fast) ease,
    background-color var(--cf-motion-fast) ease,
    box-shadow var(--cf-motion-fast) ease !important;
}


body.cf-internal #view
input[type="checkbox"]:not(.source-enabled):hover {
  border-color:
    rgba(23,105,255,.55) !important;
}


body.cf-internal #view
input[type="checkbox"]:not(.source-enabled):checked {
  border-color:
    var(--cf-blue) !important;

  background-color:
    var(--cf-blue) !important;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2 5.7 10 11 4.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    center !important;
}


/* =========================================================
   5. BUTTON SYSTEM
========================================================= */

/* .collect-row-copyarea(아카이브 카피 텍스트) / .notif-expand-btn(알림 row 제목)는
   일반 button이 아니라 row 안의 순수 텍스트 트리거이므로 pill 처리에서 제외한다.
   제외 안 하면 이 규칙의 !important가 각 페이지의 transparent 리셋을 덮어써서
   "pill 안에 pill"처럼 보이는 이중 surface 버그가 생긴다. */
body.cf-internal #view button:not(.dash-tab-btn):not(.collect-row-copyarea):not(.notif-expand-btn) {
  border:
    1px solid #d8d2c7 !important;

  border-radius:
    var(--cf-radius-pill) !important;

  background:
    var(--cf-surface) !important;

  color:
    var(--cf-text) !important;

  box-shadow:
    none !important;

  transition:
    background-color var(--cf-motion-fast) ease,
    border-color var(--cf-motion-fast) ease,
    color var(--cf-motion-fast) ease,
    transform var(--cf-motion-fast) ease !important;
}


body.cf-internal #view
button:not(.dash-tab-btn):not(.collect-row-copyarea):not(.notif-expand-btn):not(:disabled):hover {
  border-color:
    rgba(23,105,255,.32) !important;

  background:
    var(--cf-blue-soft) !important;

  color:
    var(--cf-blue) !important;
}


body.cf-internal #view
button:not(.dash-tab-btn):not(.collect-row-copyarea):not(.notif-expand-btn):not(:disabled):active {
  transform:
    translateY(1px) !important;
}


body.cf-internal #view button:disabled {
  border-color:
    #e0d9cd !important;

  background:
    #f0ece4 !important;

  color:
    #a0a9b5 !important;

  opacity: 1 !important;

  cursor: default !important;
}


/* DELETE 계열 */

body.cf-internal #view :is(
  .delete-brand-btn,
  .delete-source-btn,
  #delete-job-btn,
  #delete-profile-btn
):hover {
  border-color:
    rgba(198,84,63,.30) !important;

  background:
    var(--cf-danger-soft) !important;

  color:
    var(--cf-danger) !important;
}


/* =========================================================
   6. TABS
========================================================= */

body.cf-internal #view .dash-tab-btn {
  min-height: 42px !important;

  padding:
    0 17px !important;

  border:
    1px solid #ddd6c9 !important;

  border-radius:
    var(--cf-radius-pill) !important;

  background:
    transparent !important;

  color:
    var(--cf-text) !important;

  font-size:
    13px !important;

  font-weight:
    750 !important;

  transition:
    background-color var(--cf-motion-fast) ease,
    border-color var(--cf-motion-fast) ease,
    color var(--cf-motion-fast) ease !important;
}


body.cf-internal #view .dash-tab-btn:hover {
  background:
    var(--cf-blue-soft) !important;

  color:
    var(--cf-blue) !important;
}


body.cf-internal #view .dash-tab-btn.active {
  border-color:
    var(--cf-blue) !important;

  background:
    var(--cf-blue) !important;

  color:
    white !important;

  -webkit-text-fill-color:
    white !important;
}


body.cf-internal #view
.dash-tab-btn.active * {
  color:
    white !important;

  -webkit-text-fill-color:
    white !important;
}


/* =========================================================
   7. SUMMARY / FILTER PILLS
========================================================= */

body.cf-internal #view :is(
  .collect-summary-pill,
  .brand-summary-pill,
  .sources-pill
) {
  min-height: 42px !important;

  padding:
    0 15px !important;

  border:
    1px solid #ddd6c9 !important;

  border-radius:
    var(--cf-radius-pill) !important;

  background:
    transparent !important;

  color:
    var(--cf-muted) !important;
}


body.cf-internal #view :is(
  .collect-summary-pill,
  .brand-summary-pill,
  .sources-pill
).is-active {
  border-color:
    var(--cf-blue) !important;

  background:
    var(--cf-blue) !important;

  color:
    white !important;
}


body.cf-internal #view :is(
  .collect-summary-pill,
  .brand-summary-pill,
  .sources-pill
).is-active * {
  color:
    white !important;
}


/* =========================================================
   8. CARDS / PANELS
========================================================= */

body.cf-internal #view :is(
  .card,
  .jd-panel,
  .voice-profile-card,
  .voice-summary-panel,
  .voice-sample-add
) {
  border:
    1px solid var(--cf-line) !important;

  border-radius:
    var(--cf-radius-lg) !important;

  background:
    var(--cf-surface) !important;

  box-shadow:
    none !important;
}


/* =========================================================
   9. LIST HEADER
========================================================= */

body.cf-internal #view :is(
  .collect-list-head,
  .brand-list-head,
  .sources-list-head
) {
  min-height: 42px !important;

  border-color:
    var(--cf-line-strong) !important;

  color:
    var(--cf-faint) !important;

  font-size:
    9.5px !important;

  font-weight:
    850 !important;

  letter-spacing:
    .11em !important;
}


/* =========================================================
   10. LIST ROWS
========================================================= */

body.cf-internal #view :is(
  .collect-row,
  .brand-row,
  .source-row,
  .voice-sample-row,
  .job-card
) {
  border-color:
    var(--cf-line) !important;

  transition:
    background-color var(--cf-motion-fast) ease,
    border-color var(--cf-motion-fast) ease !important;
}


body.cf-internal #view :is(
  .collect-row,
  .brand-row,
  .source-row,
  .voice-sample-row,
  .job-card
):hover {
  background:
    rgba(237,244,255,.58) !important;

  border-color:
    rgba(23,105,255,.22) !important;
}


/* =========================================================
   11. BADGES
========================================================= */

body.cf-internal #view :is(
  .badge,
  .voice-card-status,
  .voice-detail-status
) {
  min-height: 24px !important;

  display: inline-flex !important;

  align-items: center !important;

  padding:
    0 9px !important;

  border-radius:
    var(--cf-radius-pill) !important;

  font-size:
    10px !important;

  font-weight:
    800 !important;

  letter-spacing:
    .04em !important;
}


/* =========================================================
   12. EMPTY / LOADING
========================================================= */

body.cf-internal #view :is(
  .dashboard-empty,
  .voice-empty,
  .voice-loading,
  .brand-empty,
  .sources-empty
) {
  min-height: 210px !important;

  color:
    var(--cf-faint) !important;

  background:
    transparent !important;
}


body.cf-internal #view :is(
  .dashboard-empty,
  .voice-empty,
  .brand-empty,
  .sources-empty
) strong {
  color:
    var(--cf-ink) !important;

  font-size:
    16px !important;

  font-weight:
    720 !important;
}


/* =========================================================
   13. FOCUS
========================================================= */

body.cf-internal #view
:is(button,a,input,select,textarea):focus-visible {
  outline:
    2px solid var(--cf-blue) !important;

  outline-offset:
    3px !important;
}


/* =========================================================
   15. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.cf-internal #view > * {
    animation:
      none !important;
  }

  body.cf-internal *,
  body.cf-internal *::before,
  body.cf-internal *::after {
    transition-duration:
      0.01ms !important;
  }
}


/* =========================================================
   16. MOBILE
========================================================= */

@media (max-width: 980px) {

  body.cf-internal #view {
    padding-left:
      18px !important;

    padding-right:
      18px !important;
  }

  body.cf-internal :is(
    .dashboard-heading,
    .collect-heading,
    .voice-header,
    .brand-header,
    .sources-header
  ) h1,
  body.cf-alertspage #view h1 {
    font-size:
      42px !important;
  }
}


/* ===== END COPY FACTORY INTERNAL DESIGN SYSTEM V1 ===== */\n

/* ===== COPY FACTORY SLIDE MOTION V2 ===== */


/* =========================================================
   INTERNAL PAGE ROUTE MOTION
   모든 내부 페이지 동일
========================================================= */

body.cf-internal #view > *,
body.cf-internal #view > .fade-in {
  animation:
    cf-page-slide-in
    340ms
    cubic-bezier(.22,.72,.24,1)
    both !important;
}


@keyframes cf-page-slide-in {

  0% {
    opacity: 0;
    transform: translateX(-22px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* =========================================================
   SIDEBAR / MAIN CONTENT
========================================================= */

body.cf-internal .cf-main {
  margin-left: 64px !important;

  transition:
    margin-left 200ms ease !important;
}


body.cf-internal .cf-sidebar {
  transition:
    width 200ms ease,
    box-shadow 200ms ease !important;
}


/* 사이드바 hover 확장은 overlay 방식이다 (box-shadow로 떠오름).
   main content의 margin-left를 hover 시 같이 밀면 페이지마다
   레이아웃이 흔들리므로 절대 이동시키지 않는다. */

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  body.cf-internal #view > *,
  body.cf-internal #view > .fade-in {
    animation: none !important;
  }

  body.cf-internal .cf-main,
  body.cf-internal .cf-sidebar {
    transition: none !important;
  }
}


/* ===== END COPY FACTORY SLIDE MOTION V2 ===== */


/* ===== ALERTS REPAIR FINAL ===== */

/* 알림 그룹은 다시 off-white */
body.cf-alertspage #view .dashboard-page .card {
  background: #fffaf1 !important;
  background-color: #fffaf1 !important;

  border: 1px solid #ded8cc !important;
  box-shadow: none !important;

  color: #101827 !important;
}


/* 남아 있는 blue selected surface 제거 */
body.cf-alertspage #view .dashboard-page .card[class*="bg-blue"],
body.cf-alertspage #view .dashboard-page .card[class*="border-blue"] {
  background: #fffaf1 !important;
  background-color: #fffaf1 !important;

  border-color: #ded8cc !important;
}


/* 카드 안 핵심 텍스트 전부 우선 복구 */
body.cf-alertspage #view .dashboard-page .card *,
body.cf-alertspage #view .notif-item-list * {
  opacity: 1 !important;
}


/* 기존 dark-theme 흰 글씨 → 검정 */
body.cf-alertspage #view .dashboard-page .card [class*="text-white"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-50"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-100"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-200"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-300"],
body.cf-alertspage #view .dashboard-page .card [class*="text-zinc-"],
body.cf-alertspage #view .dashboard-page .card strong {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}


/* 보조 정보만 muted */
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-400"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-500"],
body.cf-alertspage #view .dashboard-page .card [class*="text-neutral-600"],
body.cf-alertspage #view .dashboard-page .card [class*="text-slate-400"],
body.cf-alertspage #view .dashboard-page .card [class*="text-slate-500"] {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}


/* unread / attention은 orange 유지 */
body.cf-alertspage #view .dashboard-page .card [class*="orange"],
body.cf-alertspage #view .dashboard-page .card [class*="amber"] {
  color: #d87314 !important;
  -webkit-text-fill-color: #d87314 !important;
}


/* hover는 아주 약하게만 */
body.cf-alertspage #view .dashboard-page .card:hover {
  background: #fdf8ef !important;
  border-color: #cfd9e8 !important;
}


/* 활성 탭은 cobalt */
body.cf-alertspage #view .dash-tab-btn.active {
  background: #1769ff !important;
  border-color: #1769ff !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.cf-alertspage #view .dash-tab-btn.active * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}


/* ===== END ALERTS REPAIR FINAL ===== */

/* ===== INTERNAL PAGE HERO (word + rule + motif) =====
   WORK STATUS 우측 상단의 "INPUT./PROCESS./OUTPUT." + 주황 밑줄 + flower 구조를
   하나의 공통 컴포넌트로 일반화한다. 각 내부 페이지는 그 역할을 나타내는
   영어 단어 1개 + 짧은 주황 rule + 심볼(cf-motif-svg)을 이 구조로 배치한다. */

body.cf-internal .voice-header,
body.cf-internal .voice-detail-header,
body.cf-internal .brand-header,
body.cf-internal .sources-header,
body.cf-alertspage #view .dashboard-heading,
body.cf-jobpage .job-detail-page {
  position: relative;
}

.cf-page-hero {
  position: absolute;
  right: 2px;
  top: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: none;
  z-index: 0;
}

.cf-page-hero-word {
  color: #8090aa;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .2em;
  line-height: 1;
  white-space: nowrap;
}

.cf-page-hero-rule {
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 9px;
  background: #ff8a1f;
}

.cf-page-motif {
  width: 132px;
  height: 100px;
}

.cf-page-motif .cf-motif-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* ARCHIVE: 다른 페이지 심볼 패밀리(70~85px대)와 크기를 맞춤 —
   기본값(132x100)은 headline보다 존재감이 커서 "꽃처럼 크다"는 지적의 원인이었음 */
body.cf-collectionpage .collect-header .cf-page-motif {
  width: 80px;
  height: 60px;
}

/* 알림함: 상단 요약 pill(확인 필요/전체 건수) 아래로 내려서 겹치지 않게 */
body.cf-alertspage #view .dashboard-heading .cf-page-hero {
  top: 46px;
}
body.cf-alertspage #view .dashboard-heading .cf-page-motif {
  width: 104px;
  height: 80px;
}

/* Job Detail: 상태뱃지/제목 줄과 겹치지 않도록 살짝 작게 */
body.cf-jobpage .job-detail-page .cf-page-motif {
  width: 116px;
  height: 90px;
}

/* Voice Profile Detail: 상태 배지(우측 상단 NEW/TRAINED 등)와 겹치지 않도록 그 아래로 */
body.cf-internal .voice-detail-header .cf-page-hero {
  top: 36px;
}
body.cf-internal .voice-detail-header .cf-page-motif {
  width: 104px;
  height: 82px;
}

@media (max-width: 980px) {
  .cf-page-hero { display: none; }
}

/* ===== END INTERNAL PAGE HERO ===== */

/* ===== JOB DETAIL — CANDIDATE TAG PALETTE FIX =====
   renderCandidates()가 내보내는 Tailwind 색상(amber/indigo/neutral) 배지는
   cobalt/orange/cream/near-black 4색 체계와 어긋나므로(특히 indigo는 "AI" 표시에
   금지된 보라색 계열) Job Detail 안에서만 팔레트에 맞게 재정의한다. */

body.cf-jobpage .jd-output .badge {
  border-radius: 999px !important;
  font-weight: 750 !important;
  border: 1px solid transparent !important;
}

body.cf-jobpage .jd-output .badge[class*="indigo"] {
  background: #e7f0ff !important;
  color: #1769ff !important;
}

body.cf-jobpage .jd-output .badge[class*="amber"] {
  background: #fff1e0 !important;
  color: #d87314 !important;
}

body.cf-jobpage .jd-output .badge[class*="neutral"] {
  background: #ece7db !important;
  color: #71839b !important;
}

/* ===== END JOB DETAIL — CANDIDATE TAG PALETTE FIX ===== */

/* ===== ALERTS — LEAKED DARK-NAVY TOKEN REPAIR =====
   상단 GLOBAL BRAND SYSTEM(다크 navy) 시절에 만들어진 unscoped 규칙
   (.notif-group-title 등)이 var(--cf-on-navy) 같은 "다크 배경용" 값을
   그대로 물려주고 있어 cream 배경 위에서 제목이 거의 안 보이고,
   그룹 구분선/완료 뱃지가 깨져 보이는 문제를 여기서 확정 복구한다. */

body.cf-alertspage #view .notif-group-header {
  border-bottom: 1px solid #ded8cc !important;
}

body.cf-alertspage #view .notif-group-title,
body.cf-alertspage #view .notif-group-title span {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  font-weight: 700 !important;
}

body.cf-alertspage #view .notif-group-meta,
body.cf-alertspage #view .notif-item-meta,
body.cf-alertspage #view .notif-caret {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}

body.cf-alertspage #view .notif-title-link {
  color: #1769ff !important;
  -webkit-text-fill-color: #1769ff !important;
  text-decoration: none !important;
}

body.cf-alertspage #view .notif-title-link:hover {
  text-decoration: underline !important;
}

body.cf-alertspage #view .notif-unread-badge {
  background: #fff1e0 !important;
  border: 1px solid rgba(216,115,20,.30) !important;
  color: #d87314 !important;
  -webkit-text-fill-color: #d87314 !important;
}

body.cf-alertspage #view .notif-done-badge {
  background: #ece7db !important;
  border: 1px solid #ded8cc !important;
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}

body.cf-alertspage #view .notif-item.unread {
  background: rgba(216,115,20,.08) !important;
}

body.cf-alertspage #view .notif-item-message {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
}

body.cf-alertspage #view .notif-item-dot {
  color: #b8b0a0 !important;
}

body.cf-alertspage #view .bulk-select-control {
  color: #172033 !important;
}

body.cf-alertspage #view .selected-count {
  color: #71839b !important;
}

/* ===== END ALERTS — LEAKED DARK-NAVY TOKEN REPAIR ===== */

/* ===== ALERTS — ROW HIERARCHY POLISH =====
   WORK STATUS의 row 밀도/타이포 위계에 맞춰 알림 그룹 row를 더 읽기 쉽게 정리. */

body.cf-alertspage #view .notif-group {
  border-radius: 16px !important;
  transition: border-color .14s ease, background-color .14s ease;
}

body.cf-alertspage #view .notif-group-header {
  padding: 18px 20px !important;
  gap: 14px !important;
}

body.cf-alertspage #view .notif-group-title {
  font-size: 15px !important;
  font-weight: 720 !important;
  letter-spacing: -.01em !important;
}

body.cf-alertspage #view .notif-group-meta {
  font-size: 12.5px !important;
  margin-top: 3px !important;
}

body.cf-alertspage #view .notif-unread-badge,
body.cf-alertspage #view .notif-done-badge {
  height: 26px !important;
  padding: 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: .01em !important;
}

body.cf-alertspage #view .notif-group:has(.notif-unread-badge) {
  box-shadow: inset 3px 0 0 #ff8a1f !important;
}

body.cf-alertspage #view .job-checkbox {
  width: 18px !important;
  height: 18px !important;
}

body.cf-alertspage #view .notif-title-link {
  font-size: 12.5px !important;
  font-weight: 650 !important;
}

/* ===== END ALERTS — ROW HIERARCHY POLISH ===== */

/* ===== GLOBAL h2 LEAK REPAIR =====
   `#view h2 { color: var(--cf-on-navy) }` (다크 navy 시절 규칙, ID 선택자라
   특이도가 높다)가 순서와 무관하게 Job Detail의 섹션 제목, Voice Profile
   카드/패널의 h2 제목들을 근접-흰색으로 강제해 cream 배경에서 안 보이게
   만들고 있었다. cf-internal(라이트) 페이지 안에서만 확정 복구한다. */

body.cf-internal #view h2:not([class*="text-neutral-"]):not([class*="text-slate-"]) {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  opacity: 1 !important;
}

body.cf-internal #view h2[class*="text-neutral-"],
body.cf-internal #view h2[class*="text-slate-"] {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
  opacity: 1 !important;
}

/* ===== END GLOBAL h2 LEAK REPAIR ===== */

/* ===== LEGACY DARK-NAVY TOKEN NEUTRALIZATION =====
   초기 "GLOBAL BRAND SYSTEM"은 internal 워크스페이스를 deep navy로 설계했고,
   그 시절 --cf-navy* / --cf-on-navy* / --cf-cobalt*(구) / --cf-cream* 토큰이
   .card, .dashboard-*, .job-*, .notif-*, #view h1/h2 등 수십 곳에 scope 없이
   박혀 있다. 이후 cream/cobalt/orange 라이트 시스템으로 방향이 바뀌면서 페이지별로
   하나씩 하드코딩 override를 덧붙여왔지만(=넘친 override), 놓친 지점은 계속
   "다크 텍스트가 밝은 배경 위에서 안 보이는" 형태로 발견된다.
   근본 수정: cf-internal(라이트) 스코프 안에서 이 구(舊) 토큰들의 실제 값 자체를
   현재 cream 시스템 값으로 재정의한다. var()로 참조하는 모든 leftover 규칙이
   이 시점부터 자동으로 올바른 색을 쓰게 된다 — 개별 override를 계속 추가할 필요가 없다. */

body.cf-internal {
  --cf-navy: var(--cf-bg);
  --cf-navy-2: var(--cf-surface);
  --cf-navy-3: #ece7db;
  --cf-cobalt: var(--cf-blue);
  --cf-cobalt-hover: #2c4fe0;
  --cf-cobalt-ink: var(--cf-blue);
  --cf-cobalt-soft: var(--cf-blue-soft);
  --cf-cream: var(--cf-surface);
  --cf-cream-ink: var(--cf-ink);
  --cf-on-navy: var(--cf-ink);
  --cf-on-navy-soft: #3d4a5e;
  --cf-on-navy-faint: var(--cf-muted);
}

/* ===== END LEGACY DARK-NAVY TOKEN NEUTRALIZATION ===== */

/* ===== INTERNAL MICRO POLISH FINAL ===== */

/* 1. sidebar 펼침 시 본문 가림 방지 */
@media (min-width: 981px) {
  body.cf-internal .cf-main {
    margin-left: 64px !important;
    transition: margin-left 200ms ease !important;
  }

  body.cf-internal .cf-sidebar:hover ~ .cf-main,
  body.cf-internal .cf-sidebar:focus-within ~ .cf-main {
    margin-left: 210px !important;
  }
}


/* 2. 우측 상단 페이지 그래픽 family 크기 통일 */
body.cf-internal #view :is(
  .archive-graphic,
  .voice-graphic,
  .brand-graphic,
  .sources-graphic,
  .alerts-graphic,
  .job-detail-graphic,
  .page-symbol,
  .page-graphic
) {
  width: 112px !important;
  height: 112px !important;
  max-width: 112px !important;
  max-height: 112px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 112px !important;
}


/* 내부 SVG가 박스를 벗어나지 않도록 */
body.cf-internal #view :is(
  .archive-graphic,
  .voice-graphic,
  .brand-graphic,
  .sources-graphic,
  .alerts-graphic,
  .job-detail-graphic,
  .page-symbol,
  .page-graphic
) svg {
  max-width: 100% !important;
  max-height: 100% !important;
  overflow: visible !important;
}


/* 3. Alerts 미세 정돈 */
body.cf-alertspage #view .dashboard-page {
  --alert-gap: 14px;
}

body.cf-alertspage #view .dash-tabs {
  margin-bottom: 14px !important;
}

body.cf-alertspage #view .card {
  min-height: 76px !important;
}

body.cf-alertspage #view .card strong,
body.cf-alertspage #view .card [class*="font-semibold"],
body.cf-alertspage #view .card [class*="font-medium"] {
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  line-height: 1.35 !important;
}

body.cf-alertspage #view .card [class*="text-neutral-4"],
body.cf-alertspage #view .card [class*="text-neutral-5"],
body.cf-alertspage #view .card [class*="text-slate-4"],
body.cf-alertspage #view .card [class*="text-slate-5"] {
  color: #71839b !important;
  -webkit-text-fill-color: #71839b !important;
}


/* 4. 페이지 헤더 우측 영역 정렬 */
body.cf-internal #view :is(
  .collect-header,
  .voice-header,
  .brand-header,
  .sources-header
) {
  align-items: flex-start !important;
}


/* 5. 기존 왼쪽→오른쪽 route motion 유지 */
body.cf-internal #view > .fade-in {
  will-change: transform, opacity;
}


/* ===== END INTERNAL MICRO POLISH FINAL ===== */

/* ===== TOAST FINAL (bottom-right 확인 필요 알림) =====
   ARCHIVE/JOB DETAIL/VOICE/BRAND/SOURCES 5개 페이지가 위치/보더/배경을 각자
   중복 정의하고 있던 것을 하나로 통합. 컨테이너만 줄이는 것으로는 부족했던
   이유: 내부 div가 app.js에서 top 배너용 Tailwind 클래스(px-8 py-2.5 text-[13px])를
   그대로 쓰고 있어 fixed toast로 바뀐 뒤에도 padding/폰트가 커서 리스트 내용을
   많이 가렸음 — 내부 div도 함께 컴팩트하게 재정의한다.
   WORK STATUS(body.cf-workpage)와 ALERTS(숨김 처리)는 이 통합 대상에서 제외. */
body.cf-collectionpage #critical-banner,
body.cf-jobpage #critical-banner,
body.cf-voicepage #critical-banner,
body.cf-brandpage #critical-banner,
body.cf-sourcespage #critical-banner {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: 20px !important;
  bottom: 20px !important;

  width: auto !important;
  max-width: 320px !important;

  border: 1px solid rgba(255,138,31,.42) !important;
  border-radius: 12px !important;
  background: rgba(255,249,237,.97) !important;
  color: #9b5717 !important;
  box-shadow: 0 10px 24px rgba(26,35,52,.10) !important;
  z-index: 100 !important;
}

body.cf-collectionpage #critical-banner > div,
body.cf-jobpage #critical-banner > div,
body.cf-voicepage #critical-banner > div,
body.cf-brandpage #critical-banner > div,
body.cf-sourcespage #critical-banner > div {
  padding: 9px 12px !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  line-height: 1.4 !important;
}

/* ===== END TOAST FINAL ===== */

/* ===== PRE AUTOMATION UI FIX FINAL ===== */


/* =========================================================
   1. 탭 / 구분선 / 툴바 간격
   선이 pill이나 control에 달라붙어 보이지 않게
========================================================= */

body.cf-workpage #view .dashboard-tabs,
body.cf-alertspage #view .dashboard-tabs {
  position: relative !important;

  display: flex !important;
  align-items: center !important;

  padding-bottom: 16px !important;
  margin-bottom: 0 !important;

  border-bottom: 1px solid #ddd6c9 !important;
}


/* 탭 자체는 선에서 확실히 떨어짐 */
body.cf-workpage #view .dash-tab-btn,
body.cf-alertspage #view .dash-tab-btn {
  margin-bottom: 0 !important;
}


/* 툴바 위/아래 breathing room */
body.cf-workpage #view .dashboard-toolbar,
body.cf-alertspage #view .dashboard-toolbar {
  min-height: 64px !important;

  box-sizing: border-box !important;

  padding-top: 12px !important;
  padding-bottom: 12px !important;

  margin-top: 0 !important;

  display: flex !important;
  align-items: center !important;

  border-bottom: 1px solid #ddd6c9 !important;
}


/* =========================================================
   2. SIDEBAR — Copy Factory 글씨 가독성
========================================================= */

body.cf-internal .cf-sidebar-name,
body.cf-internal .cf-sidebar-name *,
body.cf-internal .cf-sidebar > div:first-child span:last-child {
  color: #1769ff !important;
  -webkit-text-fill-color: #1769ff !important;

  opacity: 1 !important;

  font-weight: 780 !important;
}


/* =========================================================
   3. SIDEBAR 펼침 시 오른쪽 콘텐츠 밀림/잘림 방지
   sidebar는 overlay 확장, main width는 고정
========================================================= */

@media (min-width: 981px) {

  body.cf-internal .cf-sidebar {
    width: 64px !important;

    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;

    z-index: 100 !important;

    overflow: hidden !important;

    transition:
      width 200ms ease,
      box-shadow 200ms ease !important;
  }

  body.cf-internal .cf-sidebar:hover,
  body.cf-internal .cf-sidebar:focus-within {
    width: 210px !important;

    box-shadow:
      18px 0 38px rgba(16,24,39,.10) !important;
  }


  /*
    중요:
    sidebar가 펼쳐져도 main을 오른쪽으로 밀지 않는다.
    그래서 Production Rail / 오른쪽 controls가 화면 밖으로 안 밀림.
  */
  body.cf-internal .cf-main,
  body.cf-internal .cf-sidebar:hover ~ .cf-main,
  body.cf-internal .cf-sidebar:focus-within ~ .cf-main {
    margin-left: 64px !important;

    width: calc(100% - 64px) !important;
    max-width: none !important;

    transition: none !important;
  }
}


/* =========================================================
   4. WORK STATUS '최신순' SORT SELECT
========================================================= */

/*
  최신순은 dashboard toolbar action 영역 안의 select만 타겟.
  상단 '전체 소스' select는 건드리지 않는다.
*/
body.cf-workpage #view .dashboard-toolbar-actions select {
  -webkit-appearance: none !important;
  appearance: none !important;

  width: auto !important;
  min-width: 82px !important;
  height: 36px !important;
  min-height: 36px !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  padding:
    0 30px
    0 12px !important;

  border:
    1px solid #d8d2c7 !important;

  border-radius:
    999px !important;

  background-color:
    #fffaf1 !important;

  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 d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23101827' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;

  background-repeat:
    no-repeat !important;

  background-position:
    right 10px center !important;

  color:
    #101827 !important;

  -webkit-text-fill-color:
    #101827 !important;

  font-size:
    12px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;

  box-shadow:
    none !important;

  vertical-align:
    middle !important;

  cursor:
    pointer !important;
}


/* focus 때 크기/정렬 흔들리지 않음 */
body.cf-workpage #view .dashboard-toolbar-actions select:focus {
  outline: none !important;

  border-color:
    #1769ff !important;

  box-shadow:
    0 0 0 3px rgba(23,105,255,.08) !important;
}


/* 최신순과 선택 삭제 버튼 baseline 통일 */
body.cf-workpage #view .dashboard-toolbar-actions {
  display: flex !important;

  align-items: center !important;

  gap: 10px !important;
}


body.cf-workpage #view .dashboard-toolbar-actions button {
  min-height: 36px !important;

  box-sizing: border-box !important;
}


/* =========================================================
   5. 좁은 데스크톱에서도 우측 clipping 방어
========================================================= */

@media (min-width: 981px) and (max-width: 1280px) {

  body.cf-internal .cf-main {
    overflow-x: hidden !important;
  }

}


/* ===== END PRE AUTOMATION UI FIX FINAL ===== */

/* ===== SIDEBAR BRAND LABEL FINAL ===== */

/* 접힌 상태: Copy Factory 글자는 완전히 숨김 */
@media (min-width: 981px) {
  body.cf-internal .cf-sidebar .cf-sidebar-name,
  body.cf-internal .cf-sidebar .cf-sidebar-name *,
  body.cf-internal .cf-sidebar > div:first-child span:last-child {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    color: #1769ff !important;
    -webkit-text-fill-color: #1769ff !important;

    white-space: nowrap !important;

    transition:
      opacity 130ms ease,
      visibility 130ms ease !important;
  }

  /* 펼쳤을 때만 Copy Factory 전체 표시 */
  body.cf-internal .cf-sidebar:hover .cf-sidebar-name,
  body.cf-internal .cf-sidebar:hover .cf-sidebar-name *,
  body.cf-internal .cf-sidebar:hover > div:first-child span:last-child,
  body.cf-internal .cf-sidebar:focus-within .cf-sidebar-name,
  body.cf-internal .cf-sidebar:focus-within .cf-sidebar-name *,
  body.cf-internal .cf-sidebar:focus-within > div:first-child span:last-child {
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ===== END SIDEBAR BRAND LABEL FINAL ===== */

/* ===== WORK SORT BUTTON FINAL ===== */

/* 작업현황 '최신순/오래된순' 버튼 하나만 */
body.cf-workpage #work-sort-btn {
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;

  box-sizing: border-box !important;

  width: auto !important;
  min-width: 76px !important;
  height: 34px !important;
  min-height: 34px !important;

  margin: 0 !important;
  padding: 0 10px 0 12px !important;

  border: 1px solid #d8d2c7 !important;
  border-radius: 11px !important;

  background: #fffaf1 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;

  box-shadow: none !important;
  vertical-align: middle !important;
  cursor: pointer !important;
}

body.cf-workpage #work-sort-btn > span {
  display: inline-block !important;
  margin: 0 !important;

  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;

  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  transform: translateY(-1px) !important;
}

body.cf-workpage #work-sort-btn:hover {
  border-color: #bfc9d8 !important;
}

body.cf-workpage #work-sort-btn:focus-visible {
  outline: none !important;
  border-color: #1769ff !important;
  box-shadow: 0 0 0 3px rgba(23,105,255,.08) !important;
}

/* ===== END WORK SORT BUTTON FINAL ===== */

/* ===== THREE ALIGNMENT VISUAL FINAL ===== */


/* ------------------------------------------------------------
   1. ARCHIVE COLUMN HEADER

   레퍼런스처럼:
   위 divider
          ↓
       LABEL
          ↑
   아래 divider

   동일한 위/아래 여백.
   가로 column 위치는 절대 변경하지 않음.
------------------------------------------------------------- */

body.cf-collectionpage #view .cf-final-archive-columns {
  box-sizing: border-box !important;

  height: 76px !important;
  min-height: 76px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  align-items: center !important;
}

body.cf-collectionpage #view .cf-final-archive-columns > * {
  box-sizing: border-box !important;

  height: 100% !important;

  display: flex !important;
  align-items: center !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  line-height: 1 !important;

  transform: none !important;
}


/* ------------------------------------------------------------
   2. BRAND COLUMN HEADER

   Archive와 완전히 동일한 vertical rhythm.
   기존 NO. / BRAND / BRIEFS / ACTION의 가로 위치와
   grid-template은 건드리지 않음.
------------------------------------------------------------- */

body.cf-brandpage #view .cf-final-brand-columns {
  box-sizing: border-box !important;

  height: 76px !important;
  min-height: 76px !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  align-items: center !important;
}

body.cf-brandpage #view .cf-final-brand-columns > * {
  box-sizing: border-box !important;

  height: 100% !important;

  display: flex !important;
  align-items: center !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;

  line-height: 1 !important;

  transform: none !important;
}


/* ------------------------------------------------------------
   3. WORK STATUS STAGE LABELS

   아래 work-mini-rail은 수정하지 않는다.

   node 16px 기준:
   첫 node center = 8px
   마지막 node center = width - 8px

   그 사이를 정확히 4등분해서
   다섯 label center를 node center와 일치시킨다.
------------------------------------------------------------- */

body.cf-workpage #view .cf-final-work-stages {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
}


/* 기존 label style을 여기에서만 재정의 */
body.cf-workpage #view .cf-final-work-stages > * {
  position: absolute !important;

  top: 50% !important;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translate(-50%, -50%) !important;

  color: #667a96 !important;
  -webkit-text-fill-color: #667a96 !important;

  font-size: 10.5px !important;
  font-weight: 800 !important;

  line-height: 1 !important;
  letter-spacing: .035em !important;

  text-align: center !important;
  white-space: nowrap !important;
}


/* 5개의 실제 16px node 중심좌표와 동일 */
body.cf-workpage #view .cf-final-work-stages > *:nth-child(1) {
  left: 8px !important;
}

body.cf-workpage #view .cf-final-work-stages > *:nth-child(2) {
  left: calc(25% + 4px) !important;
}

body.cf-workpage #view .cf-final-work-stages > *:nth-child(3) {
  left: 50% !important;
}

body.cf-workpage #view .cf-final-work-stages > *:nth-child(4) {
  left: calc(75% - 4px) !important;
}

body.cf-workpage #view .cf-final-work-stages > *:nth-child(5) {
  left: calc(100% - 8px) !important;
}


/* ===== END THREE ALIGNMENT VISUAL FINAL ===== */