@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0a0b0f;
  --bg-elev: #12141a;
  --bg-card: #161922;
  --bg-hover: #1c202b;
  --border: #232836;
  --border-strong: #2e3446;
  --text: #e8eaf0;
  --text-dim: #9098a8;
  --text-subtle: #8b93a5; /* 50대 가독성 — #5e6676(대비 3:1)에서 승격 */
  --fs-hint: 13px;   /* 힌트·보조 설명 하한 (50대 기준) */
  --fs-label: 14px;  /* 입력 라벨 하한 */
  --accent: #a3ff5e;
  --accent-dim: #6b9a3d;
  --accent-glow: rgba(163, 255, 94, 0.15);
  --danger: #ff5e7a;
  --warning: #ffb547;
  --blue: #5eb3ff;
  --purple: #b57aff;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
}

body {
  font-family: 'Pretendard', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  font-feature-settings: "ss01", "ss02";
}

/* 배경 효과 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 10%, rgba(163, 255, 94, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(94, 179, 255, 0.04) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.app { position: relative; z-index: 1; display: flex; min-height: 100vh; }

/* 사이드바 */
.sidebar {
  width: 240px;
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.logo-mark {
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  overflow: hidden;
  box-shadow: none;
}

.logo-mark img {
  width: 112%;
  height: 112%;
  display: block;
  object-fit: cover;
  border: 0;
  outline: 0;
}

.logo-text {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.logo-text small {
  display: block;
  font-size: 10px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-section {
  font-size: 11px;
  color: var(--text-subtle);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 12px 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* 사이드바 생성 중 spinner — blogBusy/instaBusy true 일 때 nav-item 우측에 표시 */
#navHub {
  position: relative;
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.46);
  border-radius: 6px;
  background: rgba(163, 255, 94, 0.035);
  box-shadow: none;
}

#navHub:hover,
#navHub.active {
  border-color: rgba(163, 255, 94, 0.72);
  background: rgba(163, 255, 94, 0.08);
  box-shadow: none;
}

.nav-busy-spinner {
  margin-left: auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(163, 255, 94, 0.25);
  border-top-color: var(--accent);
  animation: nav-busy-spin 0.7s linear infinite;
  display: none;
  flex: none;
}
.nav-item.is-busy .nav-busy-spinner { display: inline-block; }
@keyframes nav-busy-spin { to { transform: rotate(360deg); } }

/* ─── INSTA(EASY) — 장수 칩 / 장별 기획 / 카드 그리드 / 미리보기 ─── */
.ie-wizard-page { display: none; }
.ie-wizard-page.active {
  display: grid;
  gap: 14px;
}

/* 방식 선택 — AI(유료) vs 내 이미지(무료). 비용이 한눈에 구분되게 */
.ie-mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ie-mode-card {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ie-mode-card:hover { border-color: var(--border-strong); }
.ie-mode-card.active {
  border-color: var(--accent);
  background: rgba(180, 240, 76, 0.06);
  box-shadow: 0 0 0 1px rgba(180, 240, 76, 0.25);
}
.ie-mode-title { font-size: 14.5px; font-weight: 800; }
.ie-mode-desc { font-size: 12px; color: var(--text-dim); }
.ie-mode-cost {
  align-self: flex-start;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  margin-top: 3px;
}
.ie-cost-paid { color: var(--warning); background: rgba(255, 181, 71, 0.12); border: 1px solid rgba(255, 181, 71, 0.35); }
.ie-cost-free { color: var(--accent); background: rgba(180, 240, 76, 0.1); border: 1px solid rgba(180, 240, 76, 0.35); }

/* 이미지 스타일 선택 (AI 모드) */
.ie-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ie-style-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ie-style-card:hover { border-color: var(--border-strong); }
.ie-style-card.active {
  border-color: var(--accent);
  background: rgba(180, 240, 76, 0.06);
}
.ie-style-card b { font-size: 12.5px; }
.ie-style-card.active b { color: var(--accent); }
.ie-style-card span:last-child { font-size: 10.5px; color: var(--text-subtle); }
.ie-style-emoji { font-size: 20px; }

/* 내 이미지 업로드 (무료 모드) */
.ie-upload-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ie-upload-drop:hover { border-color: var(--accent); background: rgba(180, 240, 76, 0.04); }
.ie-count-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ie-count-chip {
  min-width: 46px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ie-count-chip.active {
  border-color: rgba(163,255,94,0.5);
  background: rgba(163,255,94,0.12);
  color: var(--accent);
  font-weight: 800;
}
.ie-plan-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}
.ie-plan-no { font-size: 12px; font-weight: 700; color: var(--text-subtle); padding-top: 10px; }
.ie-plan-text { min-height: 52px; }
.ie-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.ie-card-cell { display: flex; flex-direction: column; gap: 6px; }
.ie-card-cell img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }
.ie-card-no { font-size: 11px; font-weight: 700; color: var(--text-subtle); }
.ie-card-empty {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-subtle);
  font-size: 12px;
}
.ie-preview-strip { display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.ie-preview-strip img { width: 100%; border-radius: 8px; border: 1px solid var(--border); }

/* 인스타 실물 미리보기 목업 — 실제 게시물처럼 좌우 넘김 + 캡션 */
.ig-mock {
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg);
}
.ig-mock-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
}
.ig-mock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f09433, #e6683c 45%, #dc2743 70%, #bc1888);
  color: #fff;
  font-weight: 900;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ig-mock-imgwrap { position: relative; }
.ig-mock-imgwrap img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ig-mock-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.88);
  color: #222;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.ig-mock-nav.prev { left: 8px; }
.ig-mock-nav.next { right: 8px; }
.ig-mock-nav:hover { background: #fff; }
.ig-mock-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 9px;
}
.ig-mock-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 0 2px;
}
.ig-mock-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.ig-mock-dots span.on { background: var(--blue); }
.ig-mock-caption {
  padding: 10px 12px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.6;
  word-break: break-word;
}
.ig-mock-caption b { color: var(--text); margin-right: 4px; }
.ig-mock-more { color: var(--text-subtle); cursor: pointer; }
.ig-mock-more:hover { color: var(--text); }

/* 3단계 게시 — 구분선 + 발행 완료 액션 바 */
.ie-pub-divider { height: 1px; background: var(--border); margin: 16px 0; }
.ie-publish-done { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* 발행 내역 레이어 팝업 — 넓은 모달 + 내부 스크롤 */
.pub-modal { width: min(780px, 94vw); }
.pub-modal-list { max-height: min(56vh, 520px); overflow-y: auto; padding-right: 4px; }

/* 상단 메뉴 소메뉴 (INSTA▾, ETC▾) — 호버/포커스 시 아래로 펼침 */
.nav-has-sub { position: relative; }
.nav-caret {
  margin-left: 2px;
  font-size: 9px;
  color: var(--text-subtle);
}
.nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 80;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 18px 48px rgba(0,0,0,0.4);
  display: none;
}
.nav-has-sub:hover .nav-submenu,
.nav-has-sub:focus-within .nav-submenu {
  display: grid;
  gap: 2px;
}
.nav-submenu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}
.nav-submenu button:hover {
  background: rgba(163,255,94,0.1);
  color: var(--accent);
}
.nav-submenu button em {
  margin-left: auto;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-subtle);
  background: var(--bg-hover);
  border-radius: 999px;
  padding: 2px 7px;
}

/* 사이드바 '준비 중' 배지 — X/SHORTS 처럼 아직 본격 작업 안 된 메뉴 표시 */
.nav-soon-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-subtle);
  letter-spacing: 0.02em;
}

.nav-item.active {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.2);
}

.nav-icon {
  display: none;
}

.nav-badge {
  margin-left: auto;
  background: var(--border);
  color: var(--text-dim);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}

.nav-item.active .nav-badge {
  background: rgba(163, 255, 94, 0.25);
  color: var(--accent);
}

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

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg);
  font-size: 12px;
}

.user-info { flex: 1; min-width: 0; }
.user-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-role {
  overflow: hidden;
  color: var(--text-subtle);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 메인 영역 */
.main {
  flex: 1;
  padding: 32px 40px;
  max-width: 1640px;
  width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 24px;
  flex-wrap: wrap;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-dim);
}

.section-trail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-subtle);
  letter-spacing: 0;
}

.section-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.section-trail strong {
  color: var(--accent);
  font-weight: 800;
}

.section-trail-sep {
  color: var(--text-dim);
}

.back-btn {
  min-height: 34px;
  padding: 7px 11px;
  border-color: var(--border-strong);
}

.back-btn .back-icon {
  font-size: 16px;
  line-height: 1;
}

.pilot-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 20px;
  margin-bottom: 24px;
}

.pilot-hero-main {
  border: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(22, 25, 34, 0.96), rgba(12, 14, 19, 0.96));
  border-radius: var(--radius-lg);
  padding: 28px;
}

.pilot-eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.pilot-title {
  font-size: 34px;
  line-height: 1.18;
  font-weight: 800;
  margin-bottom: 12px;
}

.pilot-desc {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 680px;
}

.pilot-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.pilot-module {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius);
  padding: 18px;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pilot-module.active {
  border-color: rgba(163, 255, 94, 0.42);
  box-shadow: 0 0 0 1px rgba(163, 255, 94, 0.08), 0 16px 44px rgba(163, 255, 94, 0.08);
}

.pilot-module-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pilot-module-icon {
  display: none;
}

.pilot-module.soon .pilot-module-icon {
  background: var(--bg-hover);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.pilot-status {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(163, 255, 94, 0.14);
  color: var(--accent);
}

.pilot-module.soon .pilot-status {
  background: var(--bg-hover);
  color: var(--text-subtle);
}

.pilot-module-name {
  font-size: 18px;
  font-weight: 800;
}

.pilot-module-copy {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.65;
  flex: 1;
}

.pilot-module-foot {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: auto;
}

.pilot-mini-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 18% 8%, rgba(163, 255, 94, 0.08), transparent 32%),
    var(--bg-card);
  padding: 22px;
  min-height: 100%;
}

.pilot-roadmap {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  position: relative;
}

.pilot-roadmap::before {
  content: '';
  position: absolute;
  left: 23px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(180deg, rgba(163, 255, 94, 0.34), rgba(163, 255, 94, 0.08));
}

.pilot-roadmap-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  position: relative;
  transition: border-color 0.16s, transform 0.16s, background 0.16s;
}

.pilot-roadmap-item:hover {
  transform: translateY(-1px);
  border-color: rgba(163, 255, 94, 0.28);
  background: rgba(163, 255, 94, 0.035);
}

.pilot-roadmap-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(163, 255, 94, 0.12);
  color: var(--accent);
  border: 1px solid rgba(163, 255, 94, 0.22);
  font-size: 12px;
  font-weight: 900;
  flex: 0 0 auto;
  box-shadow: 0 0 0 4px var(--bg-card);
  z-index: 1;
}

.pilot-roadmap-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.pilot-roadmap-copy {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

.pilot-roadmap-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.pilot-roadmap-chip {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 4px 7px;
}

.pilot-flow-action {
  margin-top: 18px;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
}

.pilot-flow-action-title {
  font-size: 12px;
  font-weight: 850;
  margin-bottom: 8px;
}

.pilot-flow-action .btn {
  width: 100%;
  justify-content: center;
}

.pilot-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}

.pilot-subnav .btn {
  min-height: 38px;
}

.product-empty {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.52fr);
  gap: 20px;
  align-items: stretch;
}

.product-empty-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-empty-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.product-empty-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
}

.product-empty-copy {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
  max-width: 720px;
}

.product-feature-list {
  display: grid;
  gap: 10px;
}

.product-feature {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
}

.product-feature strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.product-feature span {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.insta-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
  align-items: start;
}

.insta-panel {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.insta-panel-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.insta-panel-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.insta-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.insta-mode {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.insta-mode:hover {
  background: var(--bg-hover);
}

.insta-mode.active {
  border-color: rgba(163, 255, 94, 0.46);
  background: var(--accent-glow);
}

.insta-mode strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.insta-mode span {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.45;
}

.insta-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 18px;
}

.insta-chip {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.insta-chip.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.insta-preview-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
}

.insta-phone {
  border: 1px solid var(--border);
  background: #050609;
  border-radius: 26px;
  padding: 14px;
  min-height: 520px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.insta-phone-screen {
  background: #0f1117;
  border-radius: 18px;
  overflow: hidden;
  min-height: 492px;
  border: 1px solid rgba(255,255,255,0.06);
}

.insta-phone-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.insta-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6f91, #8e7dff);
}

.insta-handle {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.insta-post-visual {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg, rgba(163,255,94,0.2), rgba(94,179,255,0.16)),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,0.16), transparent 28%),
    #171a23;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.insta-phone-body {
  padding: 14px;
}

.insta-preview-caption {
  color: rgba(255,255,255,0.86);
  font-size: 12px;
  line-height: 1.58;
  white-space: pre-wrap;
}

.insta-output-stack {
  display: grid;
  gap: 12px;
}

.insta-output-card {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 15px;
}

.insta-output-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

.insta-output-card p,
.insta-output-card div {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.65;
}

.insta-command-center {
  display: grid;
  gap: 18px;
}

.insta-stepper {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.insta-step {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 700;
}

.insta-step-num {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  background: var(--bg-card);
}

.insta-step.active {
  color: var(--accent);
}

.insta-step.active .insta-step-num {
  background: var(--accent);
  border-color: var(--accent);
  /* 밝은 accent(라임) 위 흰 글자는 대비 1.2:1로 안 보임 — 어두운 배경색 글자로 */
  color: var(--bg);
}

.insta-step-arrow {
  color: var(--text-subtle);
}

/* Stepper 칸 — 위저드 모드: 도달한 단계는 클릭 가능, 아직 안 도달한 단계는 비활성 */
.insta-step.clickable {
  cursor: pointer;
  transition: color 120ms ease;
}
.insta-step.clickable:hover {
  color: var(--accent);
}
.insta-step.done {
  color: var(--text);
}
.insta-step.done .insta-step-num {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.insta-step.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* 위저드 페이지 — .active 하나만 보임 */
.insta-wizard-page { display: none; }
.insta-wizard-page.active {
  display: grid;
  gap: 14px;
}

/* 위저드 페이지 하단 액션 바 */
.insta-wizard-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 2px;
  flex-wrap: wrap;
}
.insta-wizard-actions .spacer { flex: 1; }
.insta-wizard-actions .btn {
  padding: 11px 18px;
  font-size: 14px;
}

/* 메뉴 공통 진행 단계 바 (BLOG·X·SHORTS 통일) */
.menu-stepper-bar {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* ===== TRENDCORE MARKETING 메인(홈) ===== */
.studio-hero {
  display: grid;
  grid-template-columns: minmax(420px, 0.9fr) minmax(520px, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 54px 4px 46px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 30px;
}
.studio-hero-copy {
  min-width: 0;
}
.studio-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 22px;
}
.studio-hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
}
.studio-hero-title {
  font-size: clamp(42px, 3.4vw, 58px);
  line-height: 1.14;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 18px;
  color: var(--text);
  word-break: keep-all;
}
.studio-hero-accent {
  background: linear-gradient(120deg, var(--accent), #6ed9ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.studio-hero-sub {
  font-size: 16px;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 0 26px;
  line-height: 1.6;
}
.studio-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.studio-hero-ops {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-top-color: rgba(0, 217, 255, 0.7);
  background: linear-gradient(145deg, rgba(0, 217, 255, 0.05), rgba(16, 20, 29, 0.94) 42%);
}
.studio-hero-ops-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 16px;
  color: var(--text-subtle);
  font: 700 11px/1.4 'JetBrains Mono', monospace;
}
.studio-hero-ops-head strong {
  color: var(--accent);
  font-size: 11px;
}
.studio-hero-channel {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 50px;
  padding: 0 14px;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px;
}
.studio-hero-channel-code {
  color: var(--text);
  font: 800 12px/1 'JetBrains Mono', monospace;
}
.studio-hero-channel b {
  color: #79e7c0;
  font: 700 10px/1 'JetBrains Mono', monospace;
}
.studio-hero-ops-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.18);
  color: var(--text-dim);
  font-size: 11px;
}
.studio-hero-ops-flow i {
  color: var(--accent);
  font-style: normal;
}
.studio-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 16px;
}
.studio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
#tab-dashboard .studio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.studio-card {
  position: relative;
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
.studio-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--card-accent, var(--accent));
  opacity: 0.9;
}
.studio-card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent, var(--accent));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}
.studio-card-product {
  min-height: 220px;
  background:
    linear-gradient(180deg, rgba(7, 10, 14, 0.08) 0%, rgba(10, 14, 20, 0.76) 48%, rgba(16, 20, 29, 0.98) 100%),
    var(--card-bg) center top / cover no-repeat,
    var(--bg-card);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 34%, var(--border));
}
.studio-card-product::before {
  height: 100%;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--card-accent, var(--accent)) 28%, transparent), rgba(24, 30, 39, 0) 46%),
    linear-gradient(180deg, var(--card-accent, var(--accent)), rgba(163, 255, 94, 0) 3px);
  opacity: 0.95;
  pointer-events: none;
}
.studio-card-product::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 8%, color-mix(in srgb, var(--card-accent, var(--accent)) 20%, transparent), transparent 28%),
    linear-gradient(180deg, transparent 0%, rgba(10, 14, 20, 0.88) 66%);
  pointer-events: none;
}
.studio-card-product > * {
  position: relative;
  z-index: 1;
}
.studio-card-product .studio-card-top {
  min-height: 74px;
  justify-content: flex-end;
  align-items: flex-start;
}
.studio-card-product .studio-card-status.on {
  color: #10210a;
  background: rgba(163, 255, 94, 0.92);
  box-shadow: 0 8px 22px rgba(163, 255, 94, 0.16);
}
.studio-card-product .studio-card-status.soon {
  color: rgba(230, 235, 245, 0.82);
  background: rgba(18, 23, 31, 0.78);
}
.studio-card-product .studio-card-desc {
  color: rgba(230, 235, 245, 0.86);
}
.studio-card-blogpilot { --card-bg: url("/static/assets/blogpilot-card-bg.webp"); }
.studio-card-instapilot { --card-bg: url("/static/assets/instapilot-card-bg.webp"); }
.studio-card-threadspilot { --card-bg: url("/static/assets/threadspilot-card-bg.webp"); }
.studio-card-gblogpilot { --card-bg: url("/static/assets/gblogpilot-card-bg.webp"); }
.studio-card-shortspilot { --card-bg: url("/static/assets/shortspilot-card-bg.webp"); }
.studio-card-templates { --card-bg: url("/static/assets/templates-card-bg.webp"); }
.studio-card-xpilot { --card-bg: url("/static/assets/xpilot-card-bg.webp"); }
.studio-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.studio-card-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: 18px;
  color: #0c0c0c;
  background: var(--card-accent, var(--accent));
}
.studio-card-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.studio-card-status.on {
  color: var(--accent);
  background: var(--accent-glow);
}
.studio-card-status.soon {
  color: var(--text-subtle);
  background: var(--bg-hover);
}
/* 준비 중 카드 — 전체 카드를 약간 흐리게 해서 '아직 클릭해봐야 placeholder' 임을 시각적으로 */
.studio-card.studio-card-soon {
  opacity: 0.62;
  filter: saturate(0.7);
}
.studio-card.studio-card-soon:hover {
  opacity: 0.82;
  filter: saturate(0.85);
}
.studio-card-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.studio-card-desc {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 18px;
  min-height: 42px;
}
.studio-card-go {
  font-size: 13px;
  font-weight: 700;
  color: var(--card-accent, var(--accent));
}
.studio-flow {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  padding: 18px 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.studio-flow-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dim);
}
.studio-flow-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.studio-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.studio-flow-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  background: var(--bg-elev);
}
.studio-flow-arrow {
  color: var(--text-subtle);
}

.insta-studio-grid {
  display: grid;
  /* 좌측: 메인 작업 영역(남는 폭 전부). 우측: 폰 미리보기 — 화면을 늘려도 380px 고정. */
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
  align-items: start;
}

.insta-main-flow,
.insta-side-flow {
  display: grid;
  gap: 14px;
  /* 슬라이드 탭처럼 폭 넓은 내용물이 있어도 옆 컬럼(미리보기)을 침범하지 않게 */
  min-width: 0;
}

.insta-main-flow .insta-wizard-page,
.insta-main-flow .insta-section-card {
  min-width: 0;
}

.insta-section-card {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 18px;
}

.insta-section-title {
  font-size: 16px;
  font-weight: 850;
  margin-bottom: 14px;
}

.insta-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.insta-ai-copy {
  min-height: 138px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: var(--bg);
  color: var(--text-dim);
  white-space: pre-wrap;
  line-height: 1.62;
}

.insta-tag-cloud {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.insta-tag-cloud span {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
}

/* 해시태그 선택/후보 그룹 */
.insta-tag-group + .insta-tag-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.insta-tag-group-label {
  font-size: 11px;
  font-weight: 750;
  color: var(--text-subtle);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.insta-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  border: 1px solid transparent;
}

.insta-tag.selected {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.45);
}
.insta-tag.selected:hover {
  background: rgba(255, 94, 122, 0.10);
  color: var(--danger);
  border-color: rgba(255, 94, 122, 0.35);
}
.insta-tag.selected .insta-tag-x {
  font-size: 11px;
  opacity: 0.7;
}

.insta-tag.candidate {
  background: var(--bg);
  color: var(--text-dim);
  border-color: var(--border);
}
.insta-tag.candidate:hover {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.35);
}

/* 캡션 후킹/본문/CTA 분리 블록 */
.insta-caption-blocks {
  display: grid;
  gap: 10px;
}
.insta-caption-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--bg);
}
.insta-caption-block-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-subtle);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.insta-caption-block-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  outline: none;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  cursor: text;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.insta-caption-block-body:hover {
  background: rgba(163, 255, 94, 0.06);
  box-shadow: inset 0 0 0 1px rgba(163, 255, 94, 0.18);
}
.insta-caption-block-body:focus {
  background: rgba(163, 255, 94, 0.10);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* 이미지 스타일 선택 칩 */
.insta-style-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.insta-style-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease;
}
.insta-style-chip strong {
  font-size: 12px;
  font-weight: 800;
}
.insta-style-chip span {
  font-size: 10px;
  color: var(--text-subtle);
  line-height: 1.35;
}
.insta-style-chip:hover {
  border-color: rgba(163, 255, 94, 0.35);
}
.insta-style-chip.active {
  border-color: var(--accent);
  background: var(--accent-glow);
}
.insta-style-chip.active strong { color: var(--accent); }

/* 주제 추천 칩 — 클릭하면 예시 글이 #instaTopic/#instaSourceText에 자동 입력 */
.insta-topic-chip-row,
.blog-topic-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 14px;
}
.insta-topic-chip,
.blog-topic-chip {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.insta-topic-chip:hover,
.blog-topic-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.insta-topic-chip.just-used,
.blog-topic-chip.just-used {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.hub-topic-chip-row {
  align-items: stretch;
}
.hub-topic-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 260px;
  min-height: 48px;
  border-radius: 8px;
  text-align: left;
  line-height: 1.32;
}
.hub-topic-chip span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hub-topic-chip small,
.blog-topic-chip-empty {
  margin-top: 4px;
  color: var(--text-subtle);
  font-size: 10px;
  font-weight: 500;
}
.blog-topic-chip-empty {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
}
.insta-topic-chip-hint,
.blog-topic-chip-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-subtle);
  margin-left: 6px;
}

/* 이미지 비율 칩 — 작은 박스로 비율을 시각화. 기본 1:1 */
.insta-ratio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 6px;
}
.insta-ratio-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  min-width: 64px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.insta-ratio-chip .ratio-box {
  background: var(--bg-elev);
  border-radius: 3px;
  transition: background 120ms ease;
}
.insta-ratio-chip:hover {
  border-color: rgba(163, 255, 94, 0.4);
  color: var(--text);
}
.insta-ratio-chip.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}
.insta-ratio-chip.active .ratio-box {
  background: var(--accent);
}

/* ⚙ 추가 옵션 접힘 패널 — details/summary 다크 톤 */
.insta-advanced-panel {
  margin-top: 14px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.insta-advanced-panel > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.insta-advanced-panel > summary::-webkit-details-marker { display: none; }
.insta-advanced-panel > summary::after {
  content: '▾';
  font-size: 11px;
  color: var(--text-subtle);
  transition: transform 150ms ease;
}
.insta-advanced-panel[open] > summary::after { transform: rotate(180deg); }
.insta-advanced-panel-body {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
}

/* 이미지 프리뷰 (좌측 큰 슬롯) — 브랜드 톤 유지 */
.insta-image-preview {
  aspect-ratio: 1;
  max-width: 520px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 13px;
  overflow: hidden;
}

/* 큰 미리보기 폰 */
.insta-phone-large .insta-phone-screen {
  width: 100%;
  max-width: 360px;
}
.insta-phone-large .insta-post-visual {
  aspect-ratio: 1;
  height: auto;
  width: 100%;
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  text-align: center;
  background: var(--bg);
}
/* 2·3단계 실시간 미리보기 — 선택한 템플릿으로 현재 슬라이드를 렌더해서 표시 */
.insta-post-visual.has-live {
  padding: 0;
  aspect-ratio: auto;
  display: block;
}
.insta-live-preview { width: 100%; line-height: 0; }
.insta-live-preview svg { width: 100%; height: auto; display: block; }

/* ─────────────── 공용 확인 모달 + 중앙 진행 오버레이 ─────────────── */
.sns-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 13000;
  background: rgba(5, 6, 10, 0.62);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sns-modal {
  width: min(440px, 92vw);
  background: var(--bg-card);
  border: 1px solid rgba(180, 240, 76, 0.45);
  border-radius: 14px;
  padding: 22px;
  box-shadow:
    0 0 0 1px rgba(180, 240, 76, 0.12),
    0 0 60px rgba(180, 240, 76, 0.16),
    0 24px 60px rgba(0, 0, 0, 0.55);
  animation: pub-celebrate-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.sns-modal-title { font-size: 17px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.sns-modal-body p { margin: 0 0 8px; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }
.sns-modal-body b { color: var(--text); }
.sns-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
/* ─── 발행 성공 축하 모달 + 발행 내역 ─── */
.pub-celebrate {
  text-align: center;
  border: 1px solid rgba(180, 240, 76, 0.45);
  box-shadow: 0 0 0 1px rgba(180, 240, 76, 0.12), 0 0 60px rgba(180, 240, 76, 0.18), 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: pub-celebrate-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pub-celebrate-pop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pub-celebrate-emoji { font-size: 52px; line-height: 1; margin-bottom: 8px; animation: pub-celebrate-bounce 0.9s ease 0.2s 2; }
@keyframes pub-celebrate-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.pub-celebrate-title { font-size: 22px; font-weight: 900; color: var(--accent); margin-bottom: 8px; }
.pub-celebrate-desc { font-size: 13.5px; color: var(--text-dim); line-height: 1.7; margin: 0 0 16px; }
.pub-celebrate-topic { color: var(--text); font-weight: 700; }
.pub-celebrate-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.pub-celebrate-actions .btn { min-height: 40px; }

.pub-history-row {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 10px;
}
.pub-history-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex: none;
}
.pub-history-thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255,255,255,0.04); }
.pub-history-main { flex: 1; min-width: 0; }
.pub-history-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pub-history-date { font-size: 11.5px; color: var(--text-subtle); }
.pub-history-topic { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-history-kpis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pub-kpi-chip {
  font-size: 11.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(255,255,255,0.03);
}
.pub-kpi-empty { color: var(--text-subtle); border-style: dashed; }
.pub-kpi-at { font-size: 10.5px; color: var(--text-subtle); }
.pub-history-actions { display: flex; flex-direction: column; gap: 6px; flex: none; align-items: stretch; text-align: center; }

.sns-progress-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid rgba(180, 240, 76, 0.45);
  border-radius: 16px;
  padding: 30px 44px;
  box-shadow:
    0 0 0 1px rgba(180, 240, 76, 0.12),
    0 0 60px rgba(180, 240, 76, 0.16),
    0 24px 60px rgba(0, 0, 0, 0.55);
}
.sns-progress-ring {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 5px solid rgba(163, 255, 94, 0.15);
  border-top-color: var(--accent);
  animation: spin 1s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sns-progress-ring span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  animation: sns-counter-spin 1s linear infinite;
}
@keyframes sns-counter-spin { to { transform: rotate(-360deg); } }
.sns-progress-title { font-size: 15px; font-weight: 800; color: var(--text); }
.sns-progress-msg { font-size: 12.5px; color: var(--text-subtle); max-width: 340px; text-align: center; line-height: 1.55; }

/* 5단계 캡션 생성 중 시머 */
.insta-cap-loading {
  background: linear-gradient(100deg, rgba(255,255,255,0.04) 40%, rgba(163,255,94,0.10) 50%, rgba(255,255,255,0.04) 60%);
  background-size: 200% 100%;
  animation: hub-shimmer 1.4s ease infinite;
  border-radius: 6px;
  color: var(--text-subtle) !important;
}
.insta-phone-large .insta-phone-body {
  padding: 12px 14px 14px;
}
.insta-phone-large .insta-preview-caption {
  font-size: 12.5px;
  line-height: 1.55;
}
.insta-preview-tags {
  margin-top: 10px;
  font-size: 11px;
  color: rgba(94, 179, 255, 0.85);
  word-break: break-all;
  line-height: 1.5;
}

/* HUB 발행 이력 뱃지 (P8) — 이 소재가 어느 채널에 발행됐는지 */
.hub-pub-badge {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(163, 255, 94, 0.35);
}

/* THREADS·G-BLOG 3단계 위저드 + AI 3안 카드 */
.threads-wizard-page,
.gblog-wizard-page { display: none; }
.threads-wizard-page.active,
.gblog-wizard-page.active {
  display: grid;
  gap: 14px;
}
.threads-variant-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.threads-variant-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-family: inherit;
}
.threads-variant-card:hover { border-color: var(--border-strong); }
.threads-variant-card.sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.threads-variant-label { font-size: 11px; font-weight: 800; color: var(--accent); }
.threads-variant-text {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 180px;
  overflow: hidden;
}
.threads-variant-len { font-size: 11px; color: var(--text-subtle); margin-top: auto; }
.threads-variant-empty {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
}
.threads-variant-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(163, 255, 94, 0.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
  margin-right: 7px;
}
@media (max-width: 1100px) {
  .threads-variant-grid { grid-template-columns: 1fr; }
}

/* 우측 미리보기 카드 — 살짝 더 도드라지게 (실제 게시 전 핵심 영역) */
.insta-preview-card {
  border-color: rgba(163, 255, 94, 0.25);
  background: linear-gradient(180deg, rgba(163, 255, 94, 0.04), var(--bg-card) 60%);
}

.insta-card-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.insta-card-thumb {
  min-height: 132px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.28)),
    linear-gradient(135deg, rgba(163,255,94,0.18), rgba(94,179,255,0.16)),
    #dbeafe;
  display: flex;
  align-items: end;
  padding: 14px;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.insta-card-add {
  min-height: 132px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 32px;
}

.insta-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
}

.insta-calendar span {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.insta-calendar .muted {
  color: var(--text-subtle);
}

.insta-calendar .picked {
  background: var(--accent);
  color: #fff;
}

.insta-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.insta-metric strong {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  margin-bottom: 3px;
}

.insta-metric span {
  color: var(--text-subtle);
  font-size: 12px;
}

.x-preview-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1fr);
  gap: 16px;
}

.x-post-preview {
  border: 1px solid var(--border);
  background: #050609;
  border-radius: 18px;
  padding: 18px;
  min-height: 420px;
  color: #fff;
}

.x-post-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px;
}

.x-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--blue));
}

.x-name {
  font-size: 14px;
  font-weight: 800;
}

.x-handle {
  font-size: 12px;
  color: rgba(255,255,255,0.48);
}

.x-post-body {
  white-space: pre-wrap;
  font-size: 18px;
  line-height: 1.48;
  font-weight: 650;
  letter-spacing: 0;
  margin-bottom: 18px;
}

.x-post-meta,
.x-post-actions {
  color: rgba(255,255,255,0.5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}

.x-post-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 14px;
}

.x-iphone {
  width: min(100%, 330px);
  margin: 0 auto;
  border: 1px solid #222936;
  background: linear-gradient(180deg, #20242e, #121620);
  border-radius: 42px;
  padding: 11px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.35);
}

.x-iphone-screen {
  min-height: 640px;
  overflow: hidden;
  border-radius: 32px;
  background: #000;
  border: 1px solid rgba(255,255,255,0.08);
  color: #f7f9f9;
  display: flex;
  flex-direction: column;
}

.x-statusbar {
  height: 42px;
  padding: 12px 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
}

.x-phone-icons {
  display: inline-flex;
  gap: 6px;
  color: #fff;
  font-size: 11px;
}

.x-app-header {
  height: 44px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  align-items: center;
  border-bottom: 1px solid #202327;
}

.x-app-logo {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 19px;
  font-weight: 900;
}

.x-app-icon {
  color: #e7e9ea;
  font-size: 18px;
}

.x-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #202327;
  color: #71767b;
  font-size: 13px;
  font-weight: 800;
}

.x-tabs span {
  text-align: center;
  padding: 13px 0 11px;
  position: relative;
}

.x-tabs .active {
  color: #f7f9f9;
}

.x-tabs .active::after {
  content: '';
  position: absolute;
  left: 34%;
  right: 34%;
  bottom: 0;
  height: 4px;
  border-radius: 999px;
  background: #1d9bf0;
}

.x-tweet {
  padding: 15px 14px 14px;
  border-bottom: 1px solid #202327;
}

.x-post-head {
  align-items: flex-start;
  margin-bottom: 8px;
}

.x-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.x-author-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.x-name {
  font-size: 14px;
  line-height: 1.2;
}

.x-handle {
  color: #71767b;
  font-size: 13px;
  line-height: 1.2;
}

.x-more {
  margin-left: auto;
  color: #71767b;
  letter-spacing: 2px;
}

.x-post-body {
  margin-left: 53px;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.42;
  font-weight: 750;
}

.x-post-meta {
  margin-left: 53px;
  padding-bottom: 12px;
  color: #71767b;
  border-bottom: 1px solid #202327;
}

.x-post-actions {
  margin-left: 53px;
  border-top: 0;
  padding-top: 12px;
  color: #71767b;
  font-size: 12px;
}

.x-bottom-nav {
  margin-top: auto;
  height: 52px;
  border-top: 1px solid #202327;
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #e7e9ea;
  font-size: 19px;
}

.shorts-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.78fr) minmax(460px, 1.22fr);
  gap: 18px;
  align-items: start;
}

.shorts-panel {
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 22px;
}

.shorts-panel-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}

.shorts-panel-subtitle {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 18px;
}

.shorts-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.shorts-option {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.shorts-option:hover {
  background: var(--bg-hover);
}

.shorts-option.active {
  border-color: rgba(163, 255, 94, 0.46);
  background: var(--accent-glow);
}

.shorts-option strong {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
}

.shorts-option span {
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1.45;
}

.shorts-preview-layout {
  display: grid;
  grid-template-columns: minmax(230px, 0.62fr) minmax(0, 1fr);
  gap: 16px;
}

.shorts-phone {
  border: 1px solid var(--border);
  background: #050609;
  border-radius: 28px;
  padding: 14px;
  min-height: 580px;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28);
}

.shorts-screen {
  position: relative;
  overflow: hidden;
  min-height: 552px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 18%, rgba(163,255,94,0.28), transparent 30%),
    linear-gradient(180deg, #151822, #08090d 72%);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
}

.shorts-platform-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  background: rgba(0,0,0,0.38);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 7px 10px;
}

.shorts-visual-word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: rgba(255,255,255,0.96);
  font-size: 28px;
  line-height: 1.2;
  font-weight: 900;
}

.shorts-caption-preview {
  position: relative;
  color: #fff;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
  text-shadow: 0 2px 16px rgba(0,0,0,0.58);
  margin-bottom: 16px;
}

.shorts-meta-preview {
  position: relative;
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  line-height: 1.5;
}

.shorts-output-stack {
  display: grid;
  gap: 12px;
}

.shorts-output-card {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 15px;
}

.shorts-output-card strong {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

.shorts-output-card p,
.shorts-output-card div {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.65;
}

.shorts-scene-list {
  display: grid;
  gap: 8px;
}

.shorts-scene {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.shorts-scene-time {
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 800;
}

.header-actions { display: flex; gap: 8px; align-items: center; }
.page-header .header-actions { padding-right: 146px; }

/* 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  transition: all 0.15s;
  font-family: inherit;
}

.btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}

.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.btn-primary:hover {
  background: #b4ff75;
  border-color: #b4ff75;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
}

.btn-ghost:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.settings-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-chip:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
}
.settings-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 13px;
}

/* A/B 디자인 스위치 */
.design-switcher {
  position: fixed;
  bottom: 18px;
  right: 22px;
  top: auto;
  z-index: 1000;
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: rgba(18, 20, 26, 0.78);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
  opacity: 0.88;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.design-switcher:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.design-option {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  min-width: 48px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.design-option:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.design-option.active {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 10px 24px rgba(163, 255, 94, 0.22);
}

/* ================================
   B안: 밝고 밀도 높은 에디토리얼 대시보드
   - HTML/JS 기능은 그대로 유지하고 visual layer만 전환
   ================================ */
body.design-b {
  --bg: #f4f7fb;
  --bg-elev: rgba(255, 255, 255, 0.86);
  --bg-card: #ffffff;
  --bg-hover: #eef4fb;
  --border: #dde6f0;
  --border-strong: #c8d6e5;
  --text: #132033;
  --text-dim: #536275;
  --text-subtle: #8794a6;
  --accent: #0f766e;
  --accent-dim: #2dd4bf;
  --accent-glow: rgba(15, 118, 110, 0.10);
  --danger: #e54864;
  --warning: #b7791f;
  --blue: #2563eb;
  --purple: #7c3aed;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), transparent 34%),
    linear-gradient(225deg, rgba(37, 99, 235, 0.10), transparent 30%),
    var(--bg);
  color: var(--text);
}

body.design-b::before {
  background:
    linear-gradient(90deg, rgba(15, 118, 110, 0.07) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 118, 110, 0.05) 0 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent 70%);
}

body.design-b .app {
  min-height: 100vh;
}

body.design-b .sidebar {
  width: 268px;
  margin: 16px 0 16px 16px;
  height: calc(100vh - 32px);
  border: 1px solid rgba(221, 230, 240, 0.9);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 70px rgba(24, 42, 70, 0.12);
  backdrop-filter: blur(18px);
}

body.design-b .logo {
  border-bottom: 0;
  padding: 8px 10px 18px;
}

body.design-b .logo-mark,
body.design-b .user-avatar {
  background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%);
  color: #fff;
  border-radius: 12px;
}

body.design-b .logo-text small,
body.design-b .nav-section,
body.design-b .user-role {
  color: var(--text-subtle);
}

body.design-b .nav-item {
  color: var(--text-dim);
  border-radius: 14px;
  padding: 12px 14px;
}

body.design-b .nav-item:hover {
  background: #eef6f6;
  color: var(--text);
}

body.design-b .nav-item.active {
  background: #e5f4f2;
  color: var(--accent);
  border-color: rgba(15, 118, 110, 0.16);
  box-shadow: inset 4px 0 0 var(--accent);
}

body.design-b .nav-badge,
body.design-b .user-chip,
body.design-b .usage-counter {
  background: #f3f7fb !important;
  border-color: var(--border) !important;
}

body.design-b .main {
  max-width: none;
  padding: 28px 40px 44px;
}

body.design-b .page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  margin: -28px -40px 28px;
  padding: 26px 40px 20px;
  background: rgba(244, 247, 251, 0.78);
  border-bottom: 1px solid rgba(221, 230, 240, 0.62);
  backdrop-filter: blur(16px);
}

body.design-b .page-title {
  font-size: 32px;
  color: var(--text);
}

body.design-b .page-subtitle {
  color: var(--text-dim);
}

body.design-b .design-switcher {
  top: 22px;
  right: 28px;
  background: rgba(255, 255, 255, 0.86);
  border-color: var(--border);
  box-shadow: 0 14px 36px rgba(24, 42, 70, 0.13);
}

body.design-b .design-option {
  color: var(--text-dim);
}

body.design-b .design-option:hover {
  color: var(--text);
  background: #edf4fb;
}

body.design-b .design-option.active {
  background: var(--text);
  color: #fff;
  box-shadow: 0 10px 22px rgba(19, 32, 51, 0.18);
}

body.design-b .btn {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border-color: var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(24, 42, 70, 0.06);
}

body.design-b .btn:hover {
  background: #f8fbff;
  border-color: var(--border-strong);
}

body.design-b .btn-primary {
  background: linear-gradient(135deg, #0f766e, #2563eb);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(15, 118, 110, 0.20);
}

body.design-b .btn-primary:hover {
  background: linear-gradient(135deg, #115e59, #1d4ed8);
  color: #fff;
}

body.design-b .bento,
body.design-b .panel,
body.design-b .result-block,
body.design-b .pipeline,
body.design-b .history-table,
body.design-b .client-form,
body.design-b .stat-card,
body.design-b .client-card,
body.design-b .bulk-card,
body.design-b .calendar-shell,
body.design-b .modal-content {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(221, 230, 240, 0.9);
  box-shadow: 0 18px 45px rgba(24, 42, 70, 0.10);
}

body.design-b .bento,
body.design-b .panel,
body.design-b .result-block,
body.design-b .pipeline {
  border-radius: 22px;
}

body.design-b .bento-hero {
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.12), rgba(37, 99, 235, 0.10)),
    #ffffff;
}

body.design-b .bento-hero::before {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.20) 0%, transparent 70%);
}

body.design-b .bento-hero-value {
  background: linear-gradient(135deg, #132033 0%, #0f766e 78%);
  -webkit-background-clip: text;
  background-clip: text;
}

body.design-b .bento-hero-unit,
body.design-b .result-body-text,
body.design-b .row-date,
body.design-b .client-category {
  color: var(--text-dim);
}

body.design-b .result-block-header,
body.design-b .table-header {
  background: #f5f8fc;
  border-bottom-color: var(--border);
}

body.design-b .form-input,
body.design-b .form-select,
body.design-b .form-textarea,
body.design-b .tag,
body.design-b .meta-chip,
body.design-b .pipe-step {
  background: #f8fbff;
  color: var(--text);
  border-color: var(--border);
}

body.design-b .form-input:focus,
body.design-b .form-select:focus,
body.design-b .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.10);
}

body.design-b .image-placeholder {
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.08), rgba(37, 99, 235, 0.06));
}

/* ================================
   C안: 화이트 그리드 / 라인 중심 / 아이콘 절제
   ================================ */
body.design-c {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f6f7f8;
  --border: #d9d9d9;
  --border-strong: #b9b9b9;
  --text: #111111;
  --text-dim: #454545;
  --text-subtle: #767676;
  --accent: #111111;
  --accent-dim: #666666;
  --accent-glow: rgba(17, 17, 17, 0.06);
  --danger: #c73737;
  --warning: #8a6200;
  --blue: #333333;
  --purple: #333333;
  background:
    linear-gradient(90deg, #eeeeee 1px, transparent 1px),
    linear-gradient(180deg, #eeeeee 1px, transparent 1px),
    #ffffff;
  background-size: 64px 64px;
  color: var(--text);
}

body.design-c::before {
  display: none;
}

body.design-c .app {
  min-height: 100vh;
}

body.design-c .sidebar {
  width: 272px;
  background: rgba(255, 255, 255, 0.96);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

body.design-c .logo {
  border-bottom: 1px solid var(--border);
}

body.design-c .logo-mark,
body.design-c .user-avatar,
body.design-c .bento-hero-icon,
body.design-c .client-logo,
body.design-c .row-icon,
body.design-c .category-icon,
body.design-c .category-rank-icon,
body.design-c .row-icon,
body.design-c [class*="icon"],
body.design-c [class*="badge"] {
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 4px;
}

body.design-c .nav-icon,
body.design-c .bento-hero-icon,
body.design-c .bento-mini-icon,
body.design-c .quality-icon,
body.design-c .usage-ico,
body.design-c .client-logo,
body.design-c .row-icon,
body.design-c .image-placeholder,
body.design-c [class*="emoji"],
body.design-c [class*="ico"],
body.design-c [class*="icon"] {
  filter: grayscale(1);
}

body.design-c .nav-section {
  color: var(--text-subtle);
  letter-spacing: 0.08em;
}

body.design-c .nav-item {
  border-radius: 8px;
  border: 0;
  color: var(--text-dim);
  padding: 10px 12px;
  gap: 13px;
}

body.design-c .nav-item:hover {
  background: #f6f7f8;
  color: var(--text);
}

body.design-c .nav-item.active {
  background: #f3f4f5;
  color: var(--text);
  box-shadow: none;
  font-weight: 700;
}

body.design-c .nav-badge,
body.design-c .usage-counter,
body.design-c .user-chip {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}

body.design-c .main {
  max-width: none;
  padding: 0 32px 40px;
}

body.design-c .page-header {
  position: sticky;
  top: 0;
  z-index: 30;
  margin: 0 -32px 24px;
  padding: 28px 32px 18px;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
}

body.design-c .page-title {
  font-size: 28px;
  color: var(--text);
}

body.design-c .page-subtitle,
body.design-c .panel-subtitle,
body.design-c .form-hint {
  color: var(--text-subtle);
}

body.design-c .design-switcher {
  background: rgba(255, 255, 255, 0.96);
  border-color: var(--border);
  border-radius: 0;
  box-shadow: none;
}

body.design-c .design-option {
  border-radius: 0;
  color: var(--text-dim);
}

body.design-c .design-option:hover {
  background: #f2f2f2;
  color: var(--text);
}

body.design-c .design-option.active {
  background: #111111;
  color: #ffffff;
  box-shadow: none;
}

body.design-c .btn {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: none;
}

body.design-c .btn:hover {
  background: #f7f7f7;
  border-color: var(--border-strong);
}

body.design-c .btn-primary {
  background: #111111;
  color: #ffffff;
  border-color: #111111;
}

body.design-c .btn-primary:hover {
  background: #333333;
  color: #ffffff;
}

body.design-c .bento-grid {
  grid-template-columns: minmax(420px, 1.55fr) repeat(2, minmax(220px, 0.75fr));
  gap: 0;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: #ffffff;
}

body.design-c .bento,
body.design-c .panel,
body.design-c .result-block,
body.design-c .pipeline,
body.design-c .history-table,
body.design-c .client-form,
body.design-c .stat-card,
body.design-c .client-card,
body.design-c .bulk-card,
body.design-c .calendar-shell,
body.design-c .modal-content,
body.design-c .topic-discovery {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

body.design-c .bento-grid .bento {
  border-top: 0;
  border-left: 0;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

body.design-c .bento:hover,
body.design-c .client-card:hover {
  transform: none;
  border-color: var(--border-strong);
}

body.design-c .bento-hero {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    #ffffff;
  background-size: 28px 28px;
}

body.design-c .bento-hero::before,
body.design-c .hero-orb,
body.design-c .floating-emoji,
body.design-c .achievement-popup {
  display: none !important;
}

body.design-c .bento-hero-value {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}

body.design-c .bento-hero-unit,
body.design-c .result-body-text,
body.design-c .row-date,
body.design-c .client-category {
  color: var(--text-dim);
}

body.design-c .sparkline-line {
  stroke: #111111;
}

body.design-c .sparkline-area {
  fill: rgba(17, 17, 17, 0.06);
}

body.design-c .result-block-header,
body.design-c .table-header {
  background: #fafafa;
  border-bottom-color: var(--border);
}

body.design-c .form-input,
body.design-c .form-select,
body.design-c .form-textarea,
body.design-c .tag,
body.design-c .meta-chip,
body.design-c .pipe-step,
body.design-c .image-card {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
}

body.design-c .form-input:focus,
body.design-c .form-select:focus,
body.design-c .form-textarea:focus {
  border-color: #111111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}

body.design-c .trend-pill,
body.design-c .status-pill,
body.design-c .persona-chip,
body.design-c .tone-preset,
body.design-c .depth-btn,
body.design-c .style-card {
  border-radius: 999px;
  background: #f7f7f7;
  border-color: var(--border);
  color: var(--text-dim);
}

body.design-c .trend-pill,
body.design-c .status-pill.published {
  color: var(--text);
}

body.design-c .category-bar-fill,
body.design-c .usage-bar-mini-fill,
body.design-c .q-metric-fill,
body.design-c .stage-fill {
  background: #111111 !important;
}

body.design-c [style*="#a3ff5e"],
body.design-c [style*="#5eb3ff"],
body.design-c [style*="#b57aff"],
body.design-c [style*="#ffb547"],
body.design-c [style*="#ff5e7a"],
body.design-c [style*="#6ed9ff"],
body.design-c [style*="#03c75a"] {
  filter: grayscale(1) contrast(1.1);
}

body.design-c .client-bars [style],
body.design-c #clientBars [style],
body.design-c .cal-legend [style] {
  filter: grayscale(1) contrast(1.1);
}

body.design-c .image-placeholder {
  background:
    linear-gradient(90deg, #eeeeee 1px, transparent 1px),
    linear-gradient(180deg, #eeeeee 1px, transparent 1px),
    #ffffff;
  background-size: 24px 24px;
}

body.design-c .toast {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* C안 전용 아이콘 시스템: 선형 심볼로 통일 */
body.design-c .nav-icon {
  font-size: 0;
  width: 21px;
  height: 21px;
  border: 0;
  border-radius: 0;
  flex: 0 0 21px;
  display: inline-block;
  background-color: currentColor !important;
  color: #24292f !important;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 21px 21px;
  mask-size: 21px 21px;
}

body.design-c .nav-icon::before {
  content: none !important;
}

body.design-c .nav-item[data-tab="dashboard"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="generate"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="bulk"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-9 14h8l-1 6 9-14h-8Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13 2-9 14h8l-1 6 9-14h-8Z'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="calendar"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="clients"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h5l2 3h11v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h3l2 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h5l2 3h11v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h3l2 4'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="history"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5M12 7v5l3 2'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="x"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l16 16M20 4 4 20'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l16 16M20 4 4 20'/%3E%3C/svg%3E");
}
body.design-c .nav-item[data-tab="settings"] .nav-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 1 1 4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1A2 2 0 1 1 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 .9-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 1 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.6.9h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1A2 2 0 1 1 4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9 1.7 1.7 0 0 0-1.6-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9l-.1-.1A2 2 0 1 1 7 4.2l.1.1a1.7 1.7 0 0 0 1.9.3h.1a1.7 1.7 0 0 0 .9-1.6V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1A2 2 0 1 1 19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9v.1a1.7 1.7 0 0 0 1.6.9h.1a2 2 0 1 1 0 4H21a1.7 1.7 0 0 0-1.6 1Z'/%3E%3C/svg%3E");
}

body.design-c .bento-hero-icon,
body.design-c .bento-mini-icon,
body.design-c .usage-ico,
body.design-c .quality-icon,
body.design-c .topic-head-icon,
body.design-c .guide-icon,
body.design-c .dna-alert-icon,
body.design-c .reference-zone-icon,
body.design-c .stage-character-emoji,
body.design-c .copy-btn-icon,
body.design-c .trend-metric-ico,
body.design-c .topic-item-icon,
body.design-c .bulk-item-icon,
body.design-c .achievement-icon {
  font-size: 0 !important;
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 3px !important;
}

body.design-c .bento-hero-icon::before,
body.design-c .bento-mini-icon::before,
body.design-c .usage-ico::before,
body.design-c .quality-icon::before,
body.design-c .topic-head-icon::before,
body.design-c .guide-icon::before,
body.design-c .dna-alert-icon::before,
body.design-c .reference-zone-icon::before,
body.design-c .stage-character-emoji::before,
body.design-c .copy-btn-icon::before,
body.design-c .trend-metric-ico::before,
body.design-c .topic-item-icon::before,
body.design-c .bulk-item-icon::before,
body.design-c .achievement-icon::before {
  font-size: 11px;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  color: #ffffff;
}

body.design-c .bento-hero-icon::before { content: "▥"; }
body.design-c .bento-mini-icon.time::before { content: "◷"; }
body.design-c .bento-mini-icon.clients::before { content: "□"; }
body.design-c .bento-mini-icon.cost::before { content: "$"; }
body.design-c .bento-mini-icon::before { content: "!"; }
body.design-c .usage-ico::before { content: "$"; }
body.design-c .quality-icon::before { content: "?"; }
body.design-c .topic-head-icon::before { content: "i"; }
body.design-c .guide-icon::before { content: "≡"; }
body.design-c .dna-alert-icon::before { content: "D"; }
body.design-c .reference-zone-icon::before { content: "↗"; }
body.design-c .stage-character-emoji::before { content: "•"; font-size: 16px; }
body.design-c .copy-btn-icon::before { content: "□"; }
body.design-c .trend-metric-ico::before { content: "—"; }
body.design-c .topic-item-icon::before { content: "◇"; }
body.design-c .bulk-item-icon::before { content: "B"; }
body.design-c .achievement-icon::before { content: "✓"; }

body.design-c .bento-head-icon,
body.design-c .refresh-icon,
body.design-c .collapse-icon {
  filter: grayscale(1);
  color: #111111 !important;
}

body.design-c .learned-tone-badge,
body.design-c .nav-badge,
body.design-c .status-pill,
body.design-c .trend-pill {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid var(--border) !important;
}

body.design-c .topic-idle > div:first-child {
  display: none !important;
}

/* C안: 추천 카드 / 이미지 스타일 / 예약 설정 색상 정리 */
body.design-c .suggested-topic-card,
body.design-c .trending-card,
body.design-c .topic-item,
body.design-c .sugg-skeleton-card,
body.design-c .style-preset,
body.design-c .tone-preset,
body.design-c .depth-btn,
body.design-c .persona-chip,
body.design-c .persona-chip-add,
body.design-c .dna-alert,
body.design-c .reference-zone,
body.design-c .reference-chip,
body.design-c .schedule-card,
body.design-c .depth-segment,
body.design-c .topic-idle,
body.design-c .topic-discovery {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

body.design-c .suggested-topic-card,
body.design-c .trending-card,
body.design-c .style-preset,
body.design-c .topic-item {
  border-radius: 10px !important;
}

body.design-c .suggested-topic-card:hover,
body.design-c .trending-card:hover,
body.design-c .style-preset:hover,
body.design-c .topic-item:hover {
  background: #f7f7f7 !important;
  border-color: var(--border-strong) !important;
  transform: none !important;
}

body.design-c .suggested-topic-card::before,
body.design-c .trending-card::before,
body.design-c .client-card::before,
body.design-c .sugg-skeleton-card::before {
  display: none !important;
}

body.design-c .sugg-cat-badge,
body.design-c .sugg-appeal,
body.design-c .sugg-appeal-high,
body.design-c .sugg-appeal-mid,
body.design-c .sugg-appeal-low,
body.design-c .sugg-seed,
body.design-c .trending-rank,
body.design-c .topic-item-source,
body.design-c .learned-tone-badge,
body.design-c .reference-chip,
body.design-c .status-pill,
body.design-c .cal-post-chip,
body.design-c .week-post-status,
body.design-c .sugg-tab,
body.design-c .suggest-tab,
body.design-c .suggest-tab-count {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}

body.design-c .sugg-cat-badge,
body.design-c .sugg-appeal,
body.design-c .trending-rank,
body.design-c .learned-tone-badge {
  border-radius: 999px !important;
}

body.design-c .sugg-meta,
body.design-c .sugg-row,
body.design-c .topic-item-meta,
body.design-c .style-preset-desc,
body.design-c .reference-zone-text,
body.design-c .dna-alert,
body.design-c #nextSlotPreview {
  background: #f7f7f7 !important;
  border-color: var(--border) !important;
  color: var(--text-dim) !important;
}

body.design-c .suggested-topic-card,
body.design-c .trending-card,
body.design-c .topic-item,
body.design-c .style-preset,
body.design-c .tone-preset,
body.design-c .depth-btn,
body.design-c .persona-chip,
body.design-c .reference-zone,
body.design-c .schedule-card {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.design-c .suggested-topic-card:hover,
body.design-c .trending-card:hover,
body.design-c .style-preset:hover,
body.design-c .tone-preset:hover,
body.design-c .depth-btn:hover,
body.design-c .persona-chip:hover,
body.design-c .reference-zone:hover {
  background: #fafafa !important;
  border-color: var(--border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

body.design-c .suggested-topic-card::before,
body.design-c .trending-card::before,
body.design-c .style-preset::before,
body.design-c .schedule-card::before {
  display: none !important;
}

body.design-c .sugg-seed,
body.design-c .sugg-meta,
body.design-c .sugg-row,
body.design-c .style-preset-desc,
body.design-c .dna-alert,
body.design-c #nextSlotPreview,
body.design-c .schedule-card [style*="background: var(--bg)"],
body.design-c .schedule-card [style*="background: rgba"] {
  background: #f7f7f7 !important;
}

body.design-c .sugg-keyword,
body.design-c .trending-keyword,
body.design-c .style-preset-name,
body.design-c .tone-name {
  color: var(--text) !important;
}

body.design-c .sugg-label,
body.design-c .form-label .required,
body.design-c .required,
body.design-c .sugg-foot,
body.design-c .sugg-foot-wrap,
body.design-c .trending-metric-ico,
body.design-c .trending-metric-value {
  color: var(--text-subtle) !important;
}

body.design-c .style-preset.active,
body.design-c .tone-preset.active,
body.design-c .depth-btn.active,
body.design-c .persona-chip.active,
body.design-c .topic-item.selected,
body.design-c .trending-card.selected {
  background: #f7f7f7 !important;
  border-color: #111111 !important;
  color: #111111 !important;
  box-shadow: inset 0 0 0 1px #111111 !important;
}

body.design-c .style-preset-emoji {
  background: #111111 !important;
  border: 1px solid #111111 !important;
  color: transparent !important;
  filter: none !important;
  opacity: 1;
  width: 18px !important;
  height: 18px !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

body.design-c .tone-emoji,
body.design-c .depth-emoji {
  display: none !important;
}

body.design-c .trending-cta,
body.design-c .suggested-topic-card .trending-cta {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.design-c .trending-cta:hover,
body.design-c .suggested-topic-card:hover .trending-cta {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

body.design-c .sugg-use-btn {
  background: rgba(163,255,94,0.12) !important;
  border: 1px solid rgba(163,255,94,0.35) !important;
  color: var(--accent) !important;
  box-shadow: none !important;
}

body.design-c .suggested-topic-card:hover .sugg-use-btn,
body.design-c .sugg-use-btn:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #101410 !important;
}

body.design-c .schedule-card,
body.design-c .schedule-card * {
  border-color: var(--border) !important;
}

body.design-c .schedule-card .form-input,
body.design-c .schedule-card input,
body.design-c .schedule-card button,
body.design-c #nextSlotPreview {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.design-c .schedule-card [style*="color: var(--accent)"],
body.design-c .schedule-card [style*="color: var(--warning)"],
body.design-c .schedule-card [style*="color: #"],
body.design-c .schedule-card [style*="rgba("] {
  color: var(--text-dim) !important;
  background: #ffffff !important;
  border-color: var(--border) !important;
}

body.design-c .schedule-card [style*="var(--accent)"],
body.design-c .schedule-card [style*="var(--warning)"],
body.design-c .schedule-card [style*="var(--success)"] {
  color: var(--text-dim) !important;
}

body.design-c .schedule-card strong,
body.design-c #nextSlotPreview strong,
body.design-c .week-summary-num {
  color: #111111 !important;
}

body.design-c .schedule-card > div:first-child span:first-child {
  display: none !important;
}

body.design-c input[type="range"],
body.design-c input[type="checkbox"] {
  accent-color: #111111;
}

body.design-c [style*="rgba(163,255,94"],
body.design-c [style*="rgba(163, 255, 94"],
body.design-c [style*="rgba(94,179,255"],
body.design-c [style*="rgba(94, 179, 255"],
body.design-c [style*="rgba(255,181,71"],
body.design-c [style*="rgba(255, 181, 71"],
body.design-c [style*="rgba(255,80,80"],
body.design-c [style*="rgba(255, 80, 80"],
body.design-c [style*="linear-gradient"] {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.design-c .stage-fill,
body.design-c .progress-fill,
body.design-c .usage-bar-mini-fill,
body.design-c .q-metric-fill,
body.design-c .category-bar-fill {
  background: #111111 !important;
  filter: none !important;
}

/* C안: 본문/카드/폼 아이콘도 outline 계열로 통일 */
body.design-c .bento-hero-icon,
body.design-c .bento-mini-icon,
body.design-c .usage-ico,
body.design-c .topic-head-icon,
body.design-c .guide-icon,
body.design-c .dna-alert-icon,
body.design-c .reference-zone-icon,
body.design-c .copy-btn-icon,
body.design-c .quality-icon,
body.design-c .bento-head-icon,
body.design-c .refresh-icon,
body.design-c .collapse-icon {
  font-size: 0 !important;
  width: 21px;
  height: 21px;
  min-width: 21px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: currentColor !important;
  background-image: none !important;
  color: #24292f !important;
  box-shadow: none !important;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 21px 21px;
  mask-size: 21px 21px;
}

body.design-c .bento-hero-icon::before,
body.design-c .bento-mini-icon::before,
body.design-c .usage-ico::before,
body.design-c .topic-head-icon::before,
body.design-c .guide-icon::before,
body.design-c .dna-alert-icon::before,
body.design-c .reference-zone-icon::before,
body.design-c .copy-btn-icon::before,
body.design-c .quality-icon::before,
body.design-c .bento-head-icon::before,
body.design-c .refresh-icon::before,
body.design-c .collapse-icon::before {
  content: none !important;
}

body.design-c .bento-hero-icon,
body.design-c .bento-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16V9M12 16V5M17 16v-4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M7 16V9M12 16V5M17 16v-4'/%3E%3C/svg%3E");
}

body.design-c .bento-mini-icon.time {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

body.design-c .bento-mini-icon.clients {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h5l2 3h11v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h3l2 4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h5l2 3h11v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z'/%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h3l2 4'/%3E%3C/svg%3E");
}

body.design-c .bento-mini-icon.cost,
body.design-c .usage-ico {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v12M15 9.5c-.7-1-1.8-1.5-3-1.5-1.7 0-3 1-3 2.3 0 3.2 6 1.5 6 4.7 0 1.3-1.3 2.3-3 2.3-1.3 0-2.5-.6-3.2-1.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6v12M15 9.5c-.7-1-1.8-1.5-3-1.5-1.7 0-3 1-3 2.3 0 3.2 6 1.5 6 4.7 0 1.3-1.3 2.3-3 2.3-1.3 0-2.5-.6-3.2-1.6'/%3E%3C/svg%3E");
}

body.design-c .bento-mini-icon:not(.time):not(.clients):not(.cost) {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 7-3 7h18s-3 0-3-7'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
}

body.design-c .topic-head-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M8.5 14.5A6 6 0 1 1 15.5 14c-.8.7-1.5 1.4-1.5 2.5h-4c0-1-.6-1.6-1.5-2Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 22h4M8.5 14.5A6 6 0 1 1 15.5 14c-.8.7-1.5 1.4-1.5 2.5h-4c0-1-.6-1.6-1.5-2Z'/%3E%3C/svg%3E");
}

body.design-c .refresh-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16M3 12a9 9 0 0 1 15-6.7L21 8M3 21v-5h5M21 3v5h-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-15 6.7L3 16M3 12a9 9 0 0 1 15-6.7L21 8M3 21v-5h5M21 3v5h-5'/%3E%3C/svg%3E");
}

body.design-c .collapse-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

body.design-c .guide-icon,
body.design-c .copy-btn-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
}

body.design-c .dna-alert-icon,
body.design-c .quality-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M8 5h8M8 19h8M7 8c4 0 6 2 10 2M7 16c4 0 6-2 10-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M8 5h8M8 19h8M7 8c4 0 6 2 10 2M7 16c4 0 6-2 10-2'/%3E%3C/svg%3E");
}

body.design-c .reference-zone-icon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.1.1l2-2a5 5 0 0 0-7.1-7.1l-1.1 1.1'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.1-.1l-2 2A5 5 0 0 0 12 20l1.1-1.1'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
  .design-switcher {
    top: 10px;
    right: 10px;
  }
  body.design-b .sidebar {
    margin: 0;
    width: 100%;
    height: auto;
    border-radius: 0;
  }
  body.design-b .page-header {
    position: static;
    margin: 0 0 20px;
    padding: 12px 0 0;
    background: transparent;
    border-bottom: 0;
  }
  body.design-c .sidebar {
    width: 100%;
    height: auto;
  }
  body.design-c .page-header {
    position: static;
    margin: 0 0 20px;
    padding: 12px 0 0;
    background: transparent;
    border-bottom: 0;
  }
  body.design-c .bento-grid {
    grid-template-columns: 1fr;
  }
  .pilot-hero,
  .pilot-stack,
  .product-empty,
  .insta-studio-grid,
  .insta-field-grid,
  .insta-card-strip,
  .insta-workspace,
  .insta-preview-layout,
  .x-preview-layout,
  .shorts-workspace,
  .shorts-preview-layout {
    grid-template-columns: 1fr;
  }
  .pilot-title {
    font-size: 26px;
  }
}

/* 탭 (숨김) */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s; }

.template-manager-page {
  margin-top: 18px;
}

.template-manager-page #cns-embed-admin {
  min-height: 420px;
}

/* Business Promotion Hub */
.hub-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 0 48px;
}
.hub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hub-profile-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 220px) minmax(180px, 220px);
  gap: 16px;
  align-items: end;
  margin: 4px 0 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.hub-profile-copy {
  display: grid;
  gap: 5px;
  align-self: center;
}
.hub-profile-copy strong {
  color: var(--text);
  font-size: 15px;
}
.hub-profile-copy span {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}
.hub-profile-bar label {
  display: grid;
  gap: 7px;
}
.hub-profile-bar label > span {
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 700;
}
.hub-profile-bar select {
  width: 100%;
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-deep);
  color: var(--text);
}
/* 새로고침 등 오래 걸리는 버튼 안에 넣는 회전 스피너 */
.hub-btn-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
.hub-subnav {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0;
}
.hub-subnav .hub-seed-toggle {
  margin-left: auto;
  min-height: 34px;
}
.hub-subnav button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.hub-subnav button:hover {
  border-color: rgba(163,255,94,0.34);
  color: var(--text);
}
.hub-subnav button.active {
  border-color: rgba(163,255,94,0.62);
  background: rgba(163,255,94,0.09);
  color: var(--accent);
  font-weight: 700;
}
.hub-status {
  margin: 18px 0;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  text-align: center;
}
/* 핵심 지표 스트립: KPI 5개를 한 줄로 + 운영 현황 토글 */
.hub-statbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.hub-kpi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  min-width: 0;
}
.hub-kpi-card {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hub-kpi-card span {
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.hub-kpi-card strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.hub-kpi-card small {
  color: var(--text-subtle);
  font-size: 10px;
  white-space: nowrap;
}
.hub-kpi-warn strong {
  color: var(--warning);
}
.hub-ops-toggle {
  flex-shrink: 0;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hub-ops-toggle:hover {
  border-color: rgba(163,255,94,0.34);
  color: var(--text);
}
.hub-ops-toggle[aria-expanded="true"] {
  border-color: rgba(163,255,94,0.62);
  background: rgba(163,255,94,0.09);
  color: var(--accent);
}
/* 운영 현황 패널: 기본 접힘, 토글로 펼침 */
.hub-ops-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}
.hub-ops-panel[hidden] {
  display: none;
}
.hub-ops-panel .hub-ops-wide {
  grid-column: 1 / -1;
}
.hub-ops-panel .hub-queue {
  margin-top: 12px;
}
.hub-source-monitor {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.hub-monitor-row {
  display: grid;
  grid-template-columns: 10px minmax(180px, 1fr) 96px 130px minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  background: rgba(0,0,0,0.12);
}
.hub-monitor-row strong {
  color: var(--text);
  font-size: 12px;
}
.hub-monitor-row span,
.hub-monitor-row small,
.hub-monitor-empty {
  color: var(--text-subtle);
  font-size: 11px;
}
.hub-monitor-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.hub-monitor-dot.is-failed {
  background: var(--warning);
}
/* 워크스페이스: 좌 소재 그리드 / 우 발행 사이드 */
.hub-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
  padding-top: 10px;
}
.hub-main {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.hub-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0;
}
.hub-tags span {
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
}
.hub-collector {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 130px auto;
  gap: 8px;
  align-items: center;
  margin-top: 14px;
}
.hub-collector input,
.hub-collector select {
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text);
  padding: 0 10px;
  font-size: 12px;
}
.hub-seed-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.hub-seed-toggle input {
  width: 14px;
  min-height: auto;
  accent-color: var(--accent);
}
.hub-auto-special {
  border-color: rgba(255, 183, 77, 0.58) !important;
  background: linear-gradient(135deg, rgba(255, 183, 77, 0.18), rgba(163, 255, 94, 0.14)) !important;
  color: #ffd58a !important;
  font-weight: 900 !important;
}
.hub-auto-special:hover {
  border-color: rgba(255, 213, 138, 0.9) !important;
  box-shadow: 0 0 0 3px rgba(255, 183, 77, 0.12);
}
.hub-auto-publish-panel {
  border-color: rgba(255, 183, 77, 0.24);
}
.hub-auto-publish-panel p {
  margin: 0 0 10px;
  color: var(--text-subtle);
  font-size: 11.5px;
  line-height: 1.55;
}
.hub-auto-delay {
  min-height: 36px;
  margin-bottom: 8px;
  font-size: 12px;
}
.hub-auto-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
}
.hub-auto-actions .btn {
  min-height: 36px;
  justify-content: center;
  font-size: 12px;
}
.hub-auto-count {
  margin: 8px 0;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
}
.hub-auto-count strong {
  color: var(--warning);
}
.hub-auto-list {
  display: grid;
  gap: 6px;
}
.hub-auto-empty,
.hub-auto-row {
  padding: 8px 9px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 7px;
  background: rgba(255,255,255,0.035);
}
.hub-auto-empty {
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1.45;
}
.hub-auto-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
}
.hub-auto-row span {
  color: var(--warning);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.hub-auto-row strong {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.35;
  word-break: keep-all;
}
.hub-auto-row em {
  grid-column: 2;
  color: var(--text-subtle);
  font-size: 10.5px;
  font-style: normal;
}
.hub-auto-row button {
  grid-column: 3;
  grid-row: 1 / span 2;
  min-height: 26px;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
  font-size: 10.5px;
  cursor: pointer;
}
.hub-auto-row.is-failed {
  border-color: rgba(255,94,122,0.45);
  background: rgba(255,94,122,0.06);
}
.hub-auto-row.is-failed em {
  color: var(--danger);
}
.hub-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hub-side-block {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
}
.hub-side-title {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}
.hub-ranking {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hub-rank-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.hub-rank-item span {
  color: var(--accent);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
}
.hub-rank-item strong {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.45;
  word-break: keep-all;
}
.hub-rank-item em {
  grid-column: 2;
  color: var(--text-subtle);
  font-size: 10.5px;
  font-style: normal;
}
.hub-queue {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.hub-queue div {
  padding: 12px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  text-align: center;
}
.hub-queue strong {
  display: block;
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
}
.hub-queue span {
  color: var(--text-subtle);
  font-size: 10.5px;
  font-weight: 500;
}
.hub-section {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.hub-section-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 14px;
}
.hub-section-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
}
.hub-section-head p {
  margin: 0;
  max-width: 620px;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.5;
}
.hub-card-grid {
  display: grid;
  /* 화면 폭에 따라 열 수 자동 조절 — 좁은 화면에서 카드가 비좁아지며 글자가 깨지던 문제 방지 */
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.hub-story-card {
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color 0.15s;
}
.hub-story-card:hover {
  border-color: rgba(163,255,94,0.4);
}
.hub-story-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* 첫 로드 대기용 카드 스켈레톤 */
.hub-skeleton-card {
  min-height: 260px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 60%);
  background-size: 200% 100%;
  animation: hub-shimmer 1.4s ease infinite;
}
@keyframes hub-shimmer { to { background-position: -200% 0; } }
.hub-story-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 600;
}
.hub-story-top b { margin-left: auto; color: var(--accent); font-weight: 800; white-space: nowrap; }
.hub-kind-pill {
  border: 1px solid transparent;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hub-kind-collected,
.hub-kind-official {
  background: var(--accent) !important;
  color: #101410 !important;
}
.hub-kind-news {
  border-color: rgba(94,179,255,0.35) !important;
  background: rgba(94,179,255,0.12) !important;
  color: #8fcbff !important;
}
.hub-kind-playbook {
  border-color: rgba(0,213,255,0.38) !important;
  background: rgba(0,213,255,0.1) !important;
  color: var(--cyan) !important;
}
.hub-kind-social {
  border-color: rgba(255,213,94,0.28) !important;
  background: rgba(255,213,94,0.09) !important;
  color: #ffd56a !important;
}
.hub-kind-seed {
  border-color: rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-subtle) !important;
}
.hub-status-collected {
  border-color: rgba(163,255,94,0.28) !important;
  background: rgba(163,255,94,0.1) !important;
  color: var(--accent) !important;
}
.hub-status-review_needed {
  border-color: rgba(255,170,94,0.35) !important;
  background: rgba(255,170,94,0.1) !important;
  color: #ffb36a !important;
}
.hub-status-published,
.hub-status-prepared_blog,
.hub-status-draft_created {
  border-color: rgba(163,255,94,0.3) !important;
  background: rgba(163,255,94,0.08) !important;
  color: var(--accent) !important;
}
.hub-status-held,
.hub-status-skipped,
.hub-status-duplicate {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.05) !important;
  color: var(--text-subtle) !important;
}

.hub-channel-menu {
  position: relative;
  display: inline-flex;
}
.hub-channel-popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 20;
  min-width: 178px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  box-shadow: 0 18px 48px rgba(0,0,0,0.32);
  display: none;
}
.hub-channel-menu:hover .hub-channel-popover,
.hub-channel-menu:focus-within .hub-channel-popover {
  display: grid;
  gap: 4px;
}
.hub-channel-popover button {
  width: 100%;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}
.hub-channel-popover button:hover {
  background: rgba(163,255,94,0.1);
  color: var(--accent);
}

.compact-channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.channel-checkline {
  align-self: end;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.channel-draft-body {
  min-height: 220px;
  line-height: 1.7;
}
.channel-preview-card {
  position: sticky;
  top: 88px;
}
.threads-preview {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #080a0d;
  padding: 16px;
}
.threads-preview-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.threads-preview-head strong {
  display: block;
  font-size: 13px;
}
.threads-preview-head span {
  color: var(--text-subtle);
  font-size: 11px;
}
.threads-preview p {
  white-space: pre-wrap;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.threads-preview-actions {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 11px;
  padding-top: 12px;
}
.channel-check-list {
  display: grid;
  gap: 8px;
}
.channel-check {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--text-dim);
  font-size: 12px;
}
.channel-check span {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 900;
}
.channel-check.ok span {
  background: rgba(163,255,94,0.14);
  color: var(--accent);
}
.channel-check.warn span {
  background: rgba(255,213,94,0.12);
  color: #ffd56a;
}
.channel-score {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 12px;
}
.channel-score strong {
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
}
.channel-score span,
.channel-status {
  color: var(--text-subtle);
  font-size: 12px;
}
.gblog-serp-card {
  border: 1px solid rgba(94,179,255,0.24);
  border-radius: 10px;
  background: rgba(255,255,255,0.035);
  padding: 16px;
}
.gblog-serp-card span {
  color: #8fcbff;
  font-size: 12px;
}
.gblog-serp-card h3 {
  margin: 8px 0;
  color: #b8d7ff;
  font-size: 18px;
  line-height: 1.35;
}
.gblog-serp-card p,
.gblog-first-paragraph {
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.6;
}
.gblog-first-paragraph {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
}
.hub-status-prepared_blog,
.hub-status-draft_created {
  border-color: rgba(94,179,255,0.35) !important;
  background: rgba(94,179,255,0.12) !important;
  color: #8fcbff !important;
}
.hub-status-published {
  border-color: rgba(70,220,150,0.35) !important;
  background: rgba(70,220,150,0.12) !important;
  color: #81e6ad !important;
}
.hub-status-held,
.hub-status-skipped,
.hub-status-duplicate {
  border-color: rgba(255,183,77,0.35) !important;
  background: rgba(255,183,77,0.12) !important;
  color: #ffd08a !important;
}
.hub-story-card h3 {
  margin: 12px 0 10px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.38;
  letter-spacing: 0;
  word-break: keep-all;
}
.hub-story-card p {
  margin: 0 0 10px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
  word-break: keep-all;
}
.hub-story-source {
  margin-top: auto;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 500;
}
.hub-story-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  margin-top: 12px;
}
/* 대표 버튼(블로그로 만들기)은 한 줄 전체 — 좁은 카드에서 글자가 단어 중간에 끊기던 문제 해결 */
.hub-story-actions > button:first-child {
  grid-column: 1 / -1;
  min-height: 36px;
  font-size: 12.5px;
}
.hub-story-actions > button,
.hub-story-actions .hub-more-trigger {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
}
.hub-more-menu {
  display: flex;
}
.hub-story-actions .hub-more-menu .hub-more-trigger {
  width: 100%;
  font-size: 16px;
  line-height: 1;
}
/* 더보기 팝오버는 카드 오른쪽 끝에 붙으므로 우측 기준으로 정렬 */
.hub-more-menu .hub-channel-popover {
  left: auto;
  right: 0;
}
.hub-story-actions > button,
.hub-story-actions .hub-more-trigger,
.hub-category-box button {
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.hub-story-actions > button:first-child {
  border-color: rgba(163,255,94,0.35);
  color: var(--accent);
  font-weight: 700;
}
.hub-related-link {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--text-dim);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
}
.hub-related-link:hover {
  color: var(--accent);
  border-color: rgba(163,255,94,0.34);
}
.hub-detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0,0,0,0.74);
  backdrop-filter: blur(10px);
}
.hub-detail-modal {
  width: min(1180px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  border: 1px solid rgba(163,255,94,0.22);
  border-radius: 10px;
  background: var(--bg-panel);
  box-shadow: 0 24px 90px rgba(0,0,0,0.55);
}
.hub-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border);
}
.hub-detail-header span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.hub-detail-header h2 {
  margin: 6px 0 8px;
  color: var(--text);
  font-size: 28px;
  line-height: 1.22;
  letter-spacing: 0;
}
.hub-detail-header p {
  margin: 0;
  color: var(--text-subtle);
  font-size: 12px;
}
.hub-detail-header button {
  min-width: 62px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}
.hub-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.75fr);
  max-height: calc(92vh - 98px);
  overflow: auto;
}
.hub-detail-main,
.hub-detail-side {
  padding: 24px;
}
.hub-detail-main {
  border-right: 1px solid var(--border);
}
.hub-detail-section,
.hub-detail-box {
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.hub-detail-section h3,
.hub-detail-box h3 {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 900;
}
.hub-detail-section p,
.hub-detail-box p,
.hub-detail-section li {
  color: var(--text);
  font-size: 14px;
  line-height: 1.72;
  word-break: keep-all;
}
.hub-detail-section ul {
  margin: 0;
  padding-left: 18px;
}
.hub-detail-section li + li {
  margin-top: 8px;
}
.hub-detail-muted {
  color: var(--text-subtle) !important;
}
.hub-detail-box b {
  display: block;
  margin-bottom: 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.35;
}
.hub-detail-box small {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.55;
}
.hub-detail-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.hub-detail-actions button {
  min-height: 40px;
  border: 1px solid rgba(163,255,94,0.35);
  border-radius: 6px;
  background: rgba(163,255,94,0.12);
  color: var(--accent);
  font-weight: 900;
  cursor: pointer;
}
.hub-detail-actions button + button {
  border-color: var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
}
.hub-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.hub-category-box {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
}
.hub-category-box h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 15px;
  font-weight: 900;
}
.hub-category-box button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 8px 10px;
  text-align: left;
  line-height: 1.35;
}
.hub-source-table {
  display: grid;
  gap: 6px;
}
.hub-source-row {
  display: grid;
  grid-template-columns: 96px minmax(180px, 1fr) 150px 110px 70px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
}
.hub-source-head {
  min-height: 34px;
  background: transparent;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 700;
}
.hub-source-row strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.hub-source-row span {
  color: var(--text-dim);
  font-size: 11px;
}
.hub-source-row button {
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.hub-empty-small {
  color: var(--text-subtle);
  font-size: 12px;
}
@media (max-width: 1180px) {
  .hub-profile-bar { grid-template-columns: 1fr 1fr; }
  .hub-profile-copy { grid-column: 1 / -1; }
  .hub-workspace { grid-template-columns: 1fr; }
  .hub-ops-panel { grid-template-columns: 1fr; }
  .hub-card-grid, .hub-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-collector { grid-template-columns: 1fr 1fr; }
  .hub-monitor-row { grid-template-columns: 10px minmax(160px, 1fr) 92px; }
  .hub-monitor-row span:nth-of-type(2),
  .hub-monitor-row small { grid-column: 2 / -1; }
  .hub-source-row { grid-template-columns: 92px minmax(180px, 1fr) 140px; }
  .hub-source-row span:nth-child(4),
  .hub-source-row button { grid-column: auto; }
}
@media (max-width: 720px) {
  .hub-profile-bar { grid-template-columns: 1fr; padding: 14px; }
  .hub-profile-copy { grid-column: auto; }
  .hub-subnav { overflow-x: auto; padding-bottom: 4px; }
  .hub-subnav button { flex: 0 0 auto; }
  .hub-subnav .hub-seed-toggle { display: none; }
  .hub-section-head { align-items: flex-start; flex-direction: column; }
  .hub-statbar { flex-direction: column; align-items: flex-start; }
  .hub-collector { grid-template-columns: 1fr; }
  .hub-monitor-row { grid-template-columns: 10px 1fr; }
  .hub-detail-backdrop { padding: 12px; }
  .hub-detail-body { grid-template-columns: 1fr; }
  .hub-detail-main { border-right: 0; border-bottom: 1px solid var(--border); }
  .hub-detail-header h2 { font-size: 22px; }
  .hub-story-actions { grid-template-columns: 1fr; }
  .hub-source-row { grid-template-columns: 1fr; }
  .hub-source-head { display: none; }
  .hub-card-grid, .hub-category-grid { grid-template-columns: 1fr; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* 대시보드 - 통계 카드 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 0.03em;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: 'JetBrains Mono', monospace;
}

.stat-value small {
  font-size: 14px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-left: 4px;
}

.stat-trend {
  font-size: 11px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-trend.up { color: var(--accent); }
.stat-trend.neutral { color: var(--text-subtle); }

/* 클라이언트 카드 그리드 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.client-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

.client-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--client-color, var(--accent));
  opacity: 0.6;
}

.client-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.client-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.client-logo {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--client-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg);
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
}

.client-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 2px;
}

.client-category {
  font-size: 12px;
  color: var(--text-subtle);
}

.client-stats {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.client-stat {
  flex: 1;
}

.client-stat-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.client-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 14px;
}

.client-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 5px;
  box-shadow: 0 0 8px var(--accent);
}

/* 글 생성 페이지 — InstaPilot insta-studio-grid 와 동일한 좌-우 grid 패턴으로 통일.
   좌측: 입력 카드 stack / 우측: 추천 주제 sticky (INSTA 폰 미리보기 자리 대체). */
.generate-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.55fr);
  gap: 18px;
  align-items: start;
}
.generate-input-col,
.generate-side-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.generate-side-col {
  position: sticky;
  top: 16px;
}

/* 우측 sticky 의 '다음 단계' 액션 카드 — 페이지별 메인 액션을 우측 상단 같은 자리에 고정 */
.action-cta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.action-cta-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.action-cta-step {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.action-cta-step strong { color: var(--accent); }
.action-cta-main {
  width: 100%;
  justify-content: center;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 800;
}
.action-cta-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.action-cta-row .btn {
  flex: 1 1 auto;
  justify-content: center;
  padding: 9px 10px;
  font-size: 12px;
}
.action-cta-hint {
  font-size: 11px;
  color: var(--text-subtle);
  line-height: 1.5;
  text-align: center;
}

/* BLOG 페이지 2 (결과 수정) — INSTA 페이지 2 패턴 통일.
   좌: 결과 블록 stack / 우: 네이버 블로그 폰 미리보기 sticky */
.blog-result-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.55fr);
  gap: 18px;
  align-items: start;
}
.blog-result-main,
.blog-result-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.blog-result-side {
  position: sticky;
  top: 16px;
}

/* 네이버 블로그 폰 미리보기 카드 — INSTA 인스타 폰 미리보기와 시각 톤 일치, 단 가로형 (블로그 글) */
.naver-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.naver-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-subtle);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.naver-preview-head .nv-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, #00c73c, #03c75a);
}
.naver-preview-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.4;
  margin: 4px 0 2px;
}
.naver-preview-meta {
  font-size: 11px;
  color: var(--text-subtle);
  font-family: 'JetBrains Mono', monospace;
}
.naver-preview-image {
  aspect-ratio: 16/9;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-subtle);
  font-size: 12px;
  margin: 6px 0;
}
.naver-preview-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.7;
  white-space: pre-wrap;
  max-height: 240px;
  overflow: hidden;
  position: relative;
}
.naver-preview-body::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--bg-card));
  pointer-events: none;
}
.naver-preview-footer {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.naver-preview-footer .nv-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

/* BLOG 헤더 진입점 칩 — 옛 큰 그라데이션 박스 슬림화 (지식맵 / 단체 프로필) */
.blog-entry-chips {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.entry-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.entry-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.entry-chip-accent {
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.3);
}
.entry-chip-accent:hover {
  background: var(--accent-glow);
}
.entry-chip-purple {
  color: #c084fc;
  border-color: rgba(192, 132, 252, 0.3);
}
.entry-chip-purple:hover {
  background: rgba(192, 132, 252, 0.08);
  border-color: rgba(192, 132, 252, 0.6);
  color: #c084fc;
}

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.panel-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.panel-subtitle {
  font-size: var(--fs-hint, 13px);
  color: var(--text-subtle);
  margin-bottom: 20px;
}

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

.form-label {
  display: block;
  font-size: var(--fs-label, 14px);
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.form-label .required { color: var(--danger); }

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.form-textarea {
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
}

.form-hint {
  font-size: var(--fs-hint, 13px);
  color: var(--text-subtle);
  margin-top: 6px;
  line-height: 1.6;
}

/* 진행 단계 */
.pipeline {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 20px;
  display: none;
}

.pipeline.active { display: block; }

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

.pipeline-title {
  font-weight: 700;
  font-size: 14px;
}

.pipeline-keyword {
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  border: 1px solid var(--border);
}

.pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pipe-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: all 0.3s;
}

.pipe-step.done {
  border-color: var(--accent-dim);
  background: rgba(163, 255, 94, 0.04);
}

.pipe-step.active {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.pipe-step.pending {
  opacity: 0.5;
}

.pipe-indicator {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.pipe-step.done .pipe-indicator {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

.pipe-step.active .pipe-indicator {
  border-color: var(--accent);
  border-right-color: transparent;
  animation: spin 0.8s linear infinite;
}

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

.pipe-text { flex: 1; }

.pipe-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-subtle);
}

/* 결과 영역 */
.result-area {
  display: none;
  animation: fadeIn 0.4s;
}
.result-area.visible { display: block; }

.result-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.meta-chip {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.meta-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.meta-value {
  font-weight: 600;
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
}

.result-block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}

.result-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}

.result-block-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
}

.result-block-body {
  padding: 20px;
  font-size: 14px;
  line-height: 1.7;
}

.result-title {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

.result-body-text {
  color: var(--text-dim);
  white-space: pre-wrap;
}

.result-body-text strong { color: var(--text); }

/* 인라인 편집 블록 — 마우스 올렸을 때 수정 가능함을 살짝 표시, 포커스 시 강조 */
.editable-block {
  outline: none;
  cursor: text;
  border-radius: 6px;
  padding: 4px 6px;
  margin: -4px -6px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.editable-block:hover {
  background: rgba(163, 255, 94, 0.06);
  box-shadow: inset 0 0 0 1px rgba(163, 255, 94, 0.18);
}
.editable-block:focus {
  background: rgba(163, 255, 94, 0.10);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.tag-list.editable-block .tag { pointer-events: none; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 5px 11px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
}

/* 이미지 그리드 */
.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.image-card {
  aspect-ratio: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 11px;
  background:
    linear-gradient(135deg, rgba(163, 255, 94, 0.08) 0%, rgba(94, 179, 255, 0.05) 100%);
}

.image-placeholder svg { opacity: 0.4; }

.image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 50%);
  padding: 12px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-card:hover .image-overlay { opacity: 1; }

.image-prompt {
  font-size: 10px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  margin-right: 8px;
}

.image-dl {
  background: var(--accent);
  color: var(--bg);
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

/* 복사 버튼 상태 */
.copy-btn.copied {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* 히스토리 */
.history-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table-header {
  display: grid;
  grid-template-columns: 40px 2fr 1fr 120px 100px 80px;
  padding: 12px 20px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  gap: 16px;
}

.table-row {
  display: grid;
  grid-template-columns: 40px 2fr 1fr 120px 100px 80px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 16px;
  align-items: center;
  transition: background 0.15s;
}

.table-row:hover { background: var(--bg-hover); }
.table-row:last-child { border-bottom: none; }

.row-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--client-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
}

.row-title { font-weight: 500; }
.row-subtitle { font-size: 11px; color: var(--text-subtle); margin-top: 2px; }
.row-date { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  font-weight: 500;
}

.status-pill.published {
  background: rgba(163, 255, 94, 0.1);
  color: var(--accent);
}

.status-pill.draft {
  background: rgba(255, 181, 71, 0.1);
  color: var(--warning);
}

/* 클라이언트 편집 모달 느낌 */
.client-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 720px;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ================================
   🎨 Bento 대시보드
   ================================ */
.bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}

.bento {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}

.bento:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Hero KPI - 이번달 발행 */
.bento-hero {
  grid-row: span 2;
  background:
    radial-gradient(circle at 15% 20%, rgba(163, 255, 94, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(94, 179, 255, 0.08) 0%, transparent 50%),
    var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
}

.bento-hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(163, 255, 94, 0.15) 0%, transparent 70%);
  filter: blur(40px);
  animation: heroPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.bento-hero-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.bento-hero-icon {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent) 0%, #6ed9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--bg);
}

.bento-hero-value {
  font-size: 88px;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
  font-family: 'JetBrains Mono', monospace;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 8px 0;
}

.bento-hero-unit {
  font-size: 20px;
  color: var(--text-dim);
  font-weight: 500;
  margin-left: 6px;
  -webkit-text-fill-color: var(--text-dim);
}

.bento-hero-trend {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.trend-pill {
  background: rgba(163, 255, 94, 0.12);
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  border: 1px solid rgba(163, 255, 94, 0.2);
}

/* 스파크라인 */
.sparkline {
  width: 100%;
  height: 80px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.sparkline-area { fill: url(#sparkGrad); opacity: 0.6; }
.sparkline-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sparkline-dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent));
}

/* Mini Stat 카드 */
.bento-mini {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
  justify-content: space-between;
}

.bento-mini-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.bento-mini-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.bento-mini-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.bento-mini-icon.time {
  background: rgba(94, 179, 255, 0.12);
  border: 1px solid rgba(94, 179, 255, 0.2);
}

.bento-mini-icon.cost {
  background: rgba(181, 122, 255, 0.12);
  border: 1px solid rgba(181, 122, 255, 0.2);
}

.bento-mini-icon.clients {
  background: rgba(163, 255, 94, 0.12);
  border: 1px solid rgba(163, 255, 94, 0.2);
}

.bento-mini-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}

.bento-mini-value small {
  font-size: 14px;
  color: var(--text-subtle);
  font-weight: 500;
  margin-left: 2px;
}

.bento-mini-sub {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 2px;
}

/* 예산 사용 바 */
.budget-bar {
  width: 100%;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.budget-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--purple) 0%, #d19eff 100%);
  border-radius: 2px;
  animation: barGrow 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes barGrow {
  from { width: 0 !important; }
}

/* ================================
   클라이언트 활동 차트
   ================================ */
.bento-clients {
  grid-column: span 2;
  padding: 24px;
}

.bento-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.bento-head-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bento-head-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.bento-head-icon {
  font-size: 16px;
}

.bento-head-right {
  display: flex;
  gap: 6px;
}

.bento-tab {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.bento-tab.active {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.client-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.client-bar-row {
  display: grid;
  grid-template-columns: 28px 140px 1fr 60px;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 8px;
  transition: background 0.15s;
}

.client-bar-row:hover { background: var(--bg-hover); }

.client-bar-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--client-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 10px;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
}

.client-bar-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-bar-track {
  height: 10px;
  background: var(--bg);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}

.client-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--client-color), color-mix(in srgb, var(--client-color) 70%, white));
  border-radius: 5px;
  animation: barGrow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px color-mix(in srgb, var(--client-color) 50%, transparent);
}

.client-bar-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

/* ================================
   활동 피드 + 주간 차트
   ================================ */
.bento-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* 주간 바 차트 */
.week-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 140px;
  gap: 8px;
  margin-top: 12px;
  padding: 0 4px;
}

.week-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.week-bar-col {
  width: 100%;
  max-width: 32px;
  display: flex;
  flex-direction: column-reverse;
  gap: 1px;
  position: relative;
}

.week-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  animation: barRise 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom;
}

.week-bar:first-child { border-radius: 6px 6px 2px 2px; }
.week-bar:last-child { border-radius: 2px 2px 6px 6px; }

@keyframes barRise {
  from { transform: scaleY(0); }
}

.week-bar-wrap:hover .week-bar {
  filter: brightness(1.2);
}

.week-bar-total {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
  font-weight: 600;
  transition: color 0.15s;
}

.week-bar-wrap:hover .week-bar-total { color: var(--text); }

.week-bar-day {
  font-size: 10px;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
}

.week-bar-day.today {
  color: var(--accent);
  font-weight: 700;
}

/* 활동 피드 */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.activity-feed::-webkit-scrollbar { width: 4px; }
.activity-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.activity-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.activity-item:hover { background: var(--bg-hover); }

.activity-item::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 40px;
  bottom: -8px;
  width: 1px;
  background: var(--border);
  z-index: 0;
}

.activity-item:last-child::before { display: none; }

.activity-dot {
  width: 24px; height: 24px;
  border-radius: 8px;
  background: var(--item-color, var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px var(--bg-card);
}

.activity-body { flex: 1; min-width: 0; padding-top: 2px; }

.activity-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.activity-meta {
  font-size: 10px;
  color: var(--text-subtle);
  display: flex;
  gap: 6px;
  align-items: center;
}

.activity-time {
  font-family: 'JetBrains Mono', monospace;
}

/* 반응형 */
@media (max-width: 1200px) {
  .bento-grid { grid-template-columns: 1fr 1fr; }
  .bento-hero { grid-row: span 1; grid-column: span 2; }
  .bento-clients { grid-column: span 2; }
}

@media (max-width: 800px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-hero, .bento-clients { grid-column: span 1; }
  .bento-row-2 { grid-template-columns: 1fr; }
}

/* ================================
   💡 주제 자동 추천
   ================================ */
.topic-discovery {
  background: linear-gradient(135deg, rgba(163, 255, 94, 0.04) 0%, rgba(94, 179, 255, 0.03) 100%);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

.topic-discovery::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(163, 255, 94, 0.1) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.topic-discovery.collapsed { padding: 16px 24px; }

.topic-discovery.collapsed .topic-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
}

.topic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.topic-head-left { display: flex; align-items: center; gap: 12px; }

.topic-head-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, #6ed9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(163, 255, 94, 0.3);
}

.topic-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topic-subtitle {
  font-size: 11px;
  color: var(--text-subtle);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}

.topic-subtitle .live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

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

.topic-refresh {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  white-space: nowrap;
}

.topic-refresh:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.topic-refresh.refreshing .refresh-icon {
  animation: spin 0.8s linear infinite;
}

.topic-generate-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 800;
}

.topic-generate-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: var(--bg);
}

.topic-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  height: 32px;
  border-radius: 999px;
  transition: all 0.2s;
  font-family: inherit;
  white-space: nowrap;
}
.topic-collapse-btn:hover {
  background: rgba(163,255,94,0.08);
  border-color: rgba(163,255,94,0.4);
  color: var(--accent);
}
.topic-collapse-btn .collapse-icon {
  font-size: 11px;
  transition: transform 0.25s;
  display: inline-block;
}
.topic-discovery.collapsed .topic-collapse-btn .collapse-icon {
  transform: rotate(-180deg);
}
/* 접혔을 때 콘텐츠 영역 숨김 */
.topic-discovery.collapsed .topic-content { display: none; }
/* 접혔을 때 추천 영역 카드 자체 시각적으로 작아지게 */
.topic-discovery.collapsed { padding-bottom: 12px; }

.topic-content {
  max-height: 2000px;
  opacity: 1;
  margin-top: 20px;
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

/* 카테고리 탭 */
.topic-cat-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.topic-cat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  font-family: inherit;
  transition: all 0.15s;
}

.topic-cat-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.topic-cat-tab.active {
  background: var(--bg-card);
  color: var(--text);
  border-color: var(--border-strong);
}

.topic-cat-tab-icon { font-size: 14px; }

.topic-cat-count {
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  color: var(--text-subtle);
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
}

.topic-cat-tab.active .topic-cat-count {
  background: var(--accent-glow);
  color: var(--accent);
  border-color: rgba(163, 255, 94, 0.3);
}

/* 트렌딩 카드 */
.trending-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* === 탭 바 (5섹션 전환) === */
.suggest-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 8px;
  scrollbar-width: none;
}
.suggest-tabs::-webkit-scrollbar { display: none; }

.suggest-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.15s;
  letter-spacing: -0.005em;
}
.suggest-tab:hover {
  border-color: rgba(163,255,94,0.4);
  color: var(--text);
}
.suggest-tab.active {
  background: rgba(163,255,94,0.12);
  border-color: var(--accent);
  color: var(--accent);
}
.suggest-tab[data-kind="issue"].active {
  background: rgba(255,80,80,0.12);
  border-color: #ff7a7a;
  color: #ff7a7a;
}
.suggest-tab-count {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.suggest-tab.active .suggest-tab-count {
  background: rgba(163,255,94,0.2);
}
.suggest-tab[data-kind="issue"].active .suggest-tab-count {
  background: rgba(255,80,80,0.2);
}
.suggest-tab-skel {
  flex-shrink: 0;
  width: 120px;
  height: 32px;
  border-radius: 999px;
}

/* === 섹션 (탭 선택 시 활성된 것만 노출) === */
.suggest-sections-wrap {
  margin-top: 4px;
}
.suggest-section { display: none; }
.suggest-section.active { display: block; }
.suggest-section-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
  padding: 2px;
}
/* 추천 주제 2개·1개 모디파이어 — 좁은 우측 sticky 컬럼에서 카드 폭이 1/4로 짜그러지는 문제 해소 */
.suggest-section-grid.suggest-section-grid--two,
.suggest-section-grid.suggest-section-grid--one {
  grid-template-columns: 1fr;
}
.suggest-section-grid.suggest-section-grid--hub {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* 우측 sticky 영역(.generate-side-col) 안에서는 무조건 1-col stack */
.generate-side-col .suggest-section-grid {
  grid-template-columns: 1fr;
}
.suggest-section-grid > .suggested-topic-card {
  min-width: 0;
}
.suggest-section-grid > .sugg-skeleton-card {
  min-width: 0;
}
.suggest-section-grid::-webkit-scrollbar { height: 8px; }
.suggest-section-grid::-webkit-scrollbar-track { background: transparent; }
.suggest-section-grid::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}
.suggest-section-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(163,255,94,0.3);
}

@media (max-width: 1200px) {
  .suggest-section-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .suggest-section-grid {
    grid-template-columns: 1fr;
  }
}

/* === 추천 주제 후보 카드 (Gemini 기반, 3개 중 1개 선택) === */
.suggested-topic-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 16px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  min-height: 136px;
}
.suggested-topic-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.3), 0 0 22px rgba(163,255,94,0.15);
}
.suggested-topic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #5eb3ff);
  opacity: 0.6;
}
.suggested-topic-card:hover::before { opacity: 1; }

.sugg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.sugg-cat-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  background: rgba(163,255,94,0.1);
  border: 1px solid rgba(163,255,94,0.25);
  border-radius: 5px;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.sugg-appeal {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.02em;
}
.sugg-appeal-high { background: rgba(255,80,80,0.12); border: 1px solid rgba(255,80,80,0.3); color: #ff7a7a; }
.sugg-appeal-mid  { background: rgba(255,181,71,0.12); border: 1px solid rgba(255,181,71,0.3); color: #ffb547; }
.sugg-appeal-low  { background: rgba(120,180,255,0.12); border: 1px solid rgba(120,180,255,0.3); color: #7eb3ff; }

.sugg-seed {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-bottom: 6px;
  opacity: 0.75;
  letter-spacing: 0.01em;
}
.sugg-keyword {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin-bottom: 12px;
  color: var(--text);
  min-height: 42px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.sugg-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  margin-bottom: 8px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}
.sugg-reason {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
  margin-top: auto;
  margin-bottom: 10px;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.sugg-source {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: -4px 0 10px;
  color: var(--text-subtle);
  font-size: 10.5px;
  line-height: 1.4;
}
.sugg-source a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}
.sugg-source a:hover { text-decoration: underline; }
.sugg-score {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(163,255,94,0.1);
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
}
.sugg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 10px;
}
.sugg-tags span {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
}
.hub-recommend-note {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(163,255,94,0.22);
  background: rgba(163,255,94,0.07);
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.sugg-use-btn {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(163,255,94,0.35);
  border-radius: 6px;
  background: rgba(163,255,94,0.12);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.suggested-topic-card:hover .sugg-use-btn,
.sugg-use-btn:hover {
  background: var(--accent);
  color: #101410;
}
.sugg-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px;
  background: rgba(0,0,0,0.18);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  flex: 1;
}
.sugg-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 11.5px;
  line-height: 1.5;
}
.sugg-label {
  color: var(--text);
  font-weight: 600;
  font-size: 10.5px;
}
.sugg-val { color: var(--text-dim); }

.sugg-foot-wrap {
  grid-column: 1 / -1;
  margin-top: 4px;
}
.sugg-foot {
  font-size: 10.5px;
  color: var(--text-dim);
  opacity: 0.6;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}

.topic-loading, .topic-error {
  grid-column: 1 / -1;
  padding: 32px 16px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: 12px;
}
.topic-error { color: #ff7a7a; }

/* === 스켈레톤 (로딩 중) === */
.sugg-skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
}
.sugg-skeleton-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), #5eb3ff);
  opacity: 0.4;
  animation: skel-bar-pulse 1.4s infinite ease-in-out;
}
@keyframes skel-bar-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.8; }
}
.skeleton-bar {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite linear;
  border-radius: 6px;
  display: block;
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel-row { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.skel-badge   { width: 70px;  height: 18px; }
.skel-badge-2 { width: 90px;  height: 18px; }
.skel-kw-1    { width: 90%;   height: 16px; margin-bottom: 7px; }
.skel-kw-2    { width: 60%;   height: 16px; margin-bottom: 12px; }
.skel-meta    { width: 100%;  height: 78px; margin-bottom: 12px; border-radius: 8px; }
.skel-button  { width: 100%;  height: 30px; border-radius: 8px; }

.sugg-skeleton-foot {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.sugg-skeleton-foot .skel-spin {
  width: 14px; height: 14px;
  border: 2px solid rgba(163,255,94,0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: skel-spin 0.8s linear infinite;
}
@keyframes skel-spin {
  to { transform: rotate(360deg); }
}


.trending-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}

.trending-card:hover {
  border-color: var(--trend-color, var(--accent));
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(163, 255, 94, 0.15);
}

.trending-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--trend-color, var(--accent));
  opacity: 0.8;
}

.trending-rank {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--trend-color, var(--accent));
  margin-bottom: 8px;
  padding: 3px 8px;
  background: rgba(163, 255, 94, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(163, 255, 94, 0.2);
  letter-spacing: 0.05em;
}

.trending-keyword {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  min-height: 40px;
}

.trending-metrics {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.trend-metric {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

.trend-metric-ico { width: 14px; font-size: 11px; text-align: center; }

.trend-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--text);
}

.trend-metric-value.up { color: var(--accent); }
.trend-metric-value.low { color: var(--accent); }
.trend-metric-value.mid { color: var(--warning); }
.trend-metric-value.high { color: var(--danger); }

.trending-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.trending-card:hover .trending-cta {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* 리스트형 토픽 */
.topic-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.topic-item {
  display: grid;
  grid-template-columns: 28px 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
}

.topic-item:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.topic-item-icon {
  width: 24px; height: 24px;
  border-radius: 7px;
  background: var(--bg-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 1px solid var(--border);
}

.topic-item-keyword {
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-item-search {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 8px;
  background: var(--bg);
  border-radius: 6px;
  border: 1px solid var(--border);
}

.topic-item-comp {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 600;
}

.topic-item-comp.low {
  background: rgba(163, 255, 94, 0.1);
  color: var(--accent);
  border: 1px solid rgba(163, 255, 94, 0.2);
}

.topic-item-comp.mid {
  background: rgba(255, 181, 71, 0.1);
  color: var(--warning);
  border: 1px solid rgba(255, 181, 71, 0.2);
}

.topic-item-comp.high {
  background: rgba(255, 94, 122, 0.1);
  color: var(--danger);
  border: 1px solid rgba(255, 94, 122, 0.2);
}

.topic-item-go {
  font-size: 12px;
  color: var(--text-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.topic-item:hover .topic-item-go {
  color: var(--accent);
  background: rgba(163, 255, 94, 0.1);
}

.topic-section { display: none; }
.topic-section.active { display: block; animation: fadeIn 0.25s; }

.topic-section-desc {
  font-size: 12px;
  color: var(--text-subtle);
  margin-bottom: 12px;
  padding: 0 4px;
}

/* 선택된 상태 */
.topic-item.selected, .trending-card.selected, .suggested-topic-card.selected {
  border-color: var(--accent) !important;
  background: rgba(163, 255, 94, 0.06) !important;
  animation: selectPulse 0.5s ease-out;
}

.selected-topic-note {
  display: none;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(163, 255, 94, 0.28);
  border-radius: var(--radius-sm);
  background: rgba(163, 255, 94, 0.07);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.selected-topic-note.show {
  display: block;
}

.selected-topic-note strong {
  display: block;
  color: var(--accent);
  font-size: 13px;
  margin-bottom: 2px;
}

@keyframes selectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

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

/* 토스트 — 화면 가운데의 작은 다크 필. 살짝 떠오르며 나타났다 사라진다 */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  bottom: auto;
  transform: translate(-50%, calc(-50% + 10px));
  background: rgba(22, 25, 34, 0.97);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 11px 18px 11px 12px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 250;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  max-width: min(560px, calc(100vw - 36px));
  justify-content: flex-start;
  backdrop-filter: blur(14px);
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.toast::before {
  content: '✓';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 900;
  font-size: 14px;
  margin-right: 0;
  flex-shrink: 0;
  animation: toastIconPop 0.5s ease-out;
}

@keyframes toastIconPop {
  0% { transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* 커스텀 아이콘 토스트 */
.toast.icon-custom::before {
  content: attr(data-icon);
  font-size: 22px;
}

/* 에러/경고 변형 */
.toast.toast-warning {
  border-color: var(--warning);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(255, 181, 71, 0.3);
}
.toast.toast-warning::before {
  background: linear-gradient(135deg, var(--warning) 0%, #ff9a47 100%);
  box-shadow: 0 4px 12px rgba(255,181,71,0.4);
}

.toast.toast-info {
  border-color: var(--blue);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    0 0 40px rgba(94, 179, 255, 0.3);
}
.toast.toast-info::before {
  background: linear-gradient(135deg, var(--blue) 0%, #8acaff 100%);
  box-shadow: 0 4px 12px rgba(94,179,255,0.4);
}

/* 프리미엄 토스트 — 발행 축하 모달(.pub-celebrate)과 같은 글로우 톤으로 통일 */
.toast {
  background: var(--bg-card);
  border: 1px solid rgba(180, 240, 76, 0.45);
  box-shadow:
    0 0 0 1px rgba(180, 240, 76, 0.12),
    0 0 44px rgba(180, 240, 76, 0.18),
    0 18px 50px rgba(0, 0, 0, 0.55);
}

.toast::before {
  content: '✓';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #d6ff8a 100%);
  color: var(--bg);
  font-weight: 900;
  font-size: 15px;
  box-shadow: 0 4px 14px rgba(180, 240, 76, 0.4);
}

.toast.icon-custom::before {
  content: attr(data-icon);
  font-size: 17px;
  background: rgba(180, 240, 76, 0.14);
  box-shadow: none;
}

.toast.toast-warning {
  border-color: rgba(255, 181, 71, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 181, 71, 0.12),
    0 0 44px rgba(255, 181, 71, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.55);
}
.toast.toast-warning::before {
  content: '!';
  background: linear-gradient(135deg, var(--warning) 0%, #ff9a47 100%);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(255, 181, 71, 0.4);
}

.toast.toast-info {
  border-color: rgba(94, 179, 255, 0.55);
  box-shadow:
    0 0 0 1px rgba(94, 179, 255, 0.12),
    0 0 44px rgba(94, 179, 255, 0.2),
    0 18px 50px rgba(0, 0, 0, 0.55);
}
.toast.toast-info::before {
  content: 'i';
  background: linear-gradient(135deg, var(--blue) 0%, #8acaff 100%);
  color: var(--bg);
  box-shadow: 0 4px 14px rgba(94, 179, 255, 0.4);
}

body.design-c .toast {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.14),
    0 0 0 1px rgba(255,255,255,0.8) inset !important;
}

body.design-c .toast::before {
  content: 'i' !important;
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
}

body.design-c .toast.toast-warning::before {
  content: '!' !important;
}

body.design-c .toast:not(.toast-info):not(.toast-warning)::before {
  content: '' !important;
}

body.design-c .toast-spark {
  display: none !important;
}

body.design-c .bulk-hero,
body.design-c .bulk-distribution,
body.design-c .bulk-stat-card,
body.design-c .bulk-item,
body.design-c .bulk-progress-wall {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.design-c .bulk-hero {
  padding: 28px 32px !important;
  overflow: visible !important;
}

body.design-c .bulk-hero::before,
body.design-c .bulk-hero::after,
body.design-c .bulk-item.processing::before {
  display: none !important;
}

body.design-c .bulk-hero-title,
body.design-c .bulk-stat-value,
body.design-c .bulk-dist-count,
body.design-c .bulk-progress-stats span:not(.bulk-progress-stat-label) {
  background: none !important;
  -webkit-text-fill-color: #111111 !important;
  color: #111111 !important;
}

body.design-c .bulk-hero-subtitle,
body.design-c .bulk-stat-label,
body.design-c .bulk-stat-sub,
body.design-c .bulk-dist-title,
body.design-c .bulk-item-client,
body.design-c .bulk-item-status,
body.design-c .bulk-progress-stat-label {
  color: var(--text-dim) !important;
}

body.design-c .bulk-input-group {
  gap: 12px !important;
}

body.design-c .bulk-kw-area {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

body.design-c .bulk-kw-area:focus {
  border-color: #111111 !important;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08) !important;
}

body.design-c .bulk-dist-row {
  border-bottom: 1px solid #eeeeee !important;
  padding: 2px 0 10px !important;
}

body.design-c .bulk-dist-row:last-child {
  border-bottom: 0 !important;
  padding-bottom: 2px !important;
}

body.design-c .bulk-dist-avatar,
body.design-c .bulk-item-icon {
  background: #f2f2f2 !important;
  border: 1px solid var(--border) !important;
  color: transparent !important;
  border-radius: 4px !important;
  font-size: 0 !important;
  position: relative;
  filter: none !important;
}

body.design-c .bulk-dist-avatar::before,
body.design-c .bulk-item-icon::before {
  content: '';
  width: 9px;
  height: 9px;
  background: #777777;
  border-radius: 2px;
  display: block;
}

body.design-c .bulk-dist-slider-wrap {
  background: #eeeeee !important;
  border-radius: 999px !important;
}

body.design-c .bulk-dist-slider-fill {
  background: #777777 !important;
  border-radius: 999px !important;
  filter: none !important;
}

body.design-c .bulk-adjust-btn {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: #111111 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

body.design-c .bulk-adjust-btn:hover {
  background: #111111 !important;
  border-color: #111111 !important;
  color: #ffffff !important;
}

body.design-c .bulk-cta {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #111111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.design-c .bulk-cta:hover {
  background: #ffffff !important;
  color: #111111 !important;
  box-shadow: none !important;
  transform: none !important;
}

body.design-c .bulk-item.processing,
body.design-c .bulk-item.done {
  border-color: var(--border) !important;
  background: #ffffff !important;
}

body.design-c .bulk-item-status.processing,
body.design-c .bulk-item-status.done,
body.design-c .bulk-item-status.waiting {
  background: #f7f7f7 !important;
  border: 1px solid var(--border) !important;
  color: var(--text-dim) !important;
}

body.design-c .client-logo,
body.design-c .row-icon,
body.design-c .activity-dot,
body.design-c .legend-dot {
  background: #111111 !important;
  border: 1px solid #111111 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  filter: none !important;
  position: relative;
  overflow: hidden;
}

body.design-c .client-logo::before,
body.design-c .row-icon::before,
body.design-c .activity-dot::before,
body.design-c .legend-dot::before {
  content: '';
  width: 9px;
  height: 9px;
  display: block;
  background: #ffffff;
  border-radius: 2px;
}

body.design-c .client-card:nth-child(2n) .client-logo::before,
body.design-c .table-row:nth-child(2n) .row-icon::before,
body.design-c .activity-item:nth-child(2n) .activity-dot::before,
body.design-c .legend-item:nth-child(2n) .legend-dot::before {
  width: 11px;
  height: 3px;
}

body.design-c .client-card:nth-child(3n) .client-logo::before,
body.design-c .table-row:nth-child(3n) .row-icon::before,
body.design-c .activity-item:nth-child(3n) .activity-dot::before,
body.design-c .legend-item:nth-child(3n) .legend-dot::before {
  width: 3px;
  height: 11px;
}

body.design-c .client-card:nth-child(4n) .client-logo::before,
body.design-c .table-row:nth-child(4n) .row-icon::before,
body.design-c .activity-item:nth-child(4n) .activity-dot::before,
body.design-c .legend-item:nth-child(4n) .legend-dot::before {
  width: 9px;
  height: 9px;
  background: transparent;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

body.design-c .legend-item span {
  color: var(--text-dim) !important;
}

body.design-c input.form-input[style*="font-size: 20px"] {
  background: #111111 !important;
  border-color: #111111 !important;
  color: transparent !important;
  text-indent: -999px !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}

.toast-spark {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  z-index: 249;
  opacity: 0;
  box-shadow: 0 0 10px var(--accent);
  display: none;
}

.toast-spark.animating {
  animation: sparkFly 0.8s ease-out forwards;
}

@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--spark-x), var(--spark-y)) scale(0.3);
  }
}

/* 작은 디바이스 */
@media (max-width: 1100px) {
  .generate-layout { grid-template-columns: 1fr; }
  /* 우측 sticky 컬럼이 단일 컬럼 layout 에서도 sticky 로 떠 있으면 본문 위에 겹쳐 거슬림 — 해제 */
  .generate-side-col { position: static; top: auto; }
  /* INSTA 위저드도 동일 패턴 — 우측 폰 미리보기가 좁은 viewport 에서는 본문 아래로 stack */
  .insta-studio-grid { grid-template-columns: 1fr; }
  /* BLOG 페이지 2 좌-우 grid 도 동일 처리 — 네이버 미리보기는 본문 아래로 stack, sticky 해제 */
  .blog-result-grid { grid-template-columns: 1fr; }
  .blog-result-side { position: static; top: auto; }
  .result-meta { grid-template-columns: repeat(2, 1fr); }
  .image-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 달력 */
.calendar-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.cal-nav-btn {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s;
  font-family: inherit;
}

.cal-nav-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.cal-title {
  font-size: 15px;
  font-weight: 700;
  padding: 0 12px;
  min-width: 130px;
  text-align: center;
  letter-spacing: -0.01em;
}

.cal-today-btn {
  padding: 0 14px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  height: 32px;
}
.cal-today-btn:hover { color: var(--accent); }

.cal-view-switch {
  display: flex;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  gap: 2px;
}

.cal-view-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: all 0.15s;
}

.cal-view-btn.active {
  background: var(--bg-hover);
  color: var(--text);
}

/* 월 통계 */
.cal-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.cal-summary-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

.cal-summary-label {
  font-size: 11px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.cal-summary-value {
  font-size: 22px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
}

/* 달력 그리드 */
.calendar-grid {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

.cal-weekday {
  padding: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cal-weekday.sun { color: #ff7a8a; }
.cal-weekday.sat { color: #7ab5ff; }

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  min-height: 110px;
  padding: 10px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  flex-direction: column;
}

.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: var(--bg-hover); }

.cal-day.other-month { opacity: 0.35; }

.cal-day.today {
  background: rgba(163, 255, 94, 0.04);
}
.cal-day.today .cal-day-num {
  background: var(--accent);
  color: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.cal-day-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
  align-self: flex-start;
}

.cal-day.sun .cal-day-num { color: #ff7a8a; }
.cal-day.sat .cal-day-num { color: #7ab5ff; }
.cal-day.today .cal-day-num { color: var(--bg); }

.cal-posts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.cal-post-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg);
  border-left: 2px solid var(--chip-color, var(--accent));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.cal-post-chip.scheduled {
  opacity: 0.7;
  border-left-style: dashed;
}

.cal-post-more {
  font-size: 10px;
  color: var(--text-subtle);
  padding: 2px 6px;
  font-weight: 500;
}

.cal-day-dots {
  display: flex;
  gap: 3px;
  margin-top: auto;
  padding-top: 4px;
  flex-wrap: wrap;
}

.cal-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dot-color);
}

/* 팝오버 */
.cal-popover {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  min-width: 280px;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  z-index: 50;
  display: none;
}
.cal-popover.show { display: block; animation: fadeIn 0.15s; }

.cal-popover-header {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-popover-close {
  background: transparent;
  border: none;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 16px;
  width: 20px; height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.cal-popover-close:hover { background: var(--bg-hover); color: var(--text); }

.cal-pop-item {
  display: flex;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.cal-pop-item:last-child { border-bottom: none; }

.cal-pop-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.cal-pop-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 3px;
}

.cal-pop-meta {
  font-size: 11px;
  color: var(--text-subtle);
}

/* 필터 */
.cal-filter-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s;
}
.legend-item:hover { background: var(--bg-hover); color: var(--text); }
.legend-item.inactive { opacity: 0.35; }

.legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}

.legend-item.active-filter {
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid rgba(163, 255, 94, 0.3);
}

.legend-clear {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-subtle);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.15s;
}
.legend-clear:hover { background: var(--bg-hover); color: var(--text); }

/* 주간 뷰 */
.week-view {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.week-header {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
}

.week-header-cell {
  padding: 14px 10px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid var(--border);
}
.week-header-cell:last-child { border-right: none; }
.week-header-cell.sun { color: #ff7a8a; }
.week-header-cell.sat { color: #7ab5ff; }

.week-header-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--text);
  margin-top: 4px;
  font-weight: 700;
}

.week-header-cell.today .week-header-date {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  padding: 2px 10px;
  border-radius: 12px;
}

.week-body {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  min-height: 480px;
}

.week-time-col {
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
}

.week-time-slot {
  height: 60px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-subtle);
  text-align: right;
}

.week-day-col {
  border-right: 1px solid var(--border);
  position: relative;
}
.week-day-col:last-child { border-right: none; }

.week-slot {
  height: 60px;
  border-bottom: 1px solid var(--border);
  padding: 4px 6px;
  position: relative;
}

.week-post {
  background: var(--bg);
  border-left: 3px solid var(--post-color);
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-bottom: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.week-post:hover {
  background: var(--bg-hover);
  transform: translateX(2px);
}
.week-post-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
  line-height: 1.3;
}
.week-post-client {
  font-size: 10px;
  color: var(--text-subtle);
}

/* 리스트 뷰 */
.list-view {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.list-group {
  border-bottom: 1px solid var(--border);
}
.list-group:last-child { border-bottom: none; }

.list-group-header {
  padding: 12px 20px;
  background: var(--bg-elev);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 0.02em;
}

.list-group-date {
  font-family: 'JetBrains Mono', monospace;
}

.list-group-count {
  font-size: 11px;
  color: var(--text-subtle);
  background: var(--bg);
  padding: 2px 8px;
  border-radius: 10px;
}

.list-item {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  align-items: center;
  cursor: pointer;
  transition: background 0.15s;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--bg-hover); }

.list-item-dot {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--item-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
}

.list-item-body { min-width: 0; }
.list-item-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-item-client {
  font-size: 11px;
  color: var(--text-subtle);
}

.list-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
}

/* 포스트 상세 모달 */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: none;
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.modal-backdrop.show { display: flex; animation: fadeIn 0.2s; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--bg-card);
  z-index: 1;
}

.modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.modal-client-badge {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--bg);
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.modal-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-subtitle {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 2px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 22px;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}
.modal-close:hover { background: var(--bg-hover); color: var(--text); }

.modal-body {
  padding: 24px;
}

.modal-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.modal-meta-cell {
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.modal-meta-cell-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.modal-meta-cell-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
}

.modal-section {
  margin-bottom: 20px;
}

.modal-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.modal-section-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--bg-card);
}

/* 주간 뷰 디테일 개선 */
.week-header-cell.today {
  background: rgba(163, 255, 94, 0.08);
  position: relative;
}
.week-header-cell.today::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}

.week-day-col.today {
  background: rgba(163, 255, 94, 0.03);
}

.week-now-line {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 2;
  pointer-events: none;
}
.week-now-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.week-now-line-label {
  position: absolute;
  left: 8px;
  top: -18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--accent);
}

.week-time-slot.now {
  color: var(--accent);
  font-weight: 700;
}

.week-post-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-subtle);
  margin-right: 4px;
}

.week-post-status {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.week-post.scheduled .week-post-status { background: var(--warning); }
.week-post .week-post-status { background: var(--accent); }

.week-summary {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  flex-wrap: wrap;
}

.week-summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
}

.week-summary-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}

/* 확인 다이얼로그 */
.confirm-dialog {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
}

.confirm-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.confirm-desc {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
}

.confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ================================
   게임화 파이프라인 스타일
   ================================ */

.stage-pipeline {
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(22,25,34,0.5) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin-bottom: 20px;
  display: none;
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

.stage-pipeline.active { display: block; animation: fadeIn 0.3s; }

/* 배경 글로우 효과 */
.stage-pipeline::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle at 30% 40%, rgba(163, 255, 94, 0.08) 0%, transparent 30%),
    radial-gradient(circle at 70% 60%, rgba(94, 179, 255, 0.06) 0%, transparent 30%);
  animation: bgPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes bgPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.1) rotate(10deg); opacity: 1; }
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.stage-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-subtle);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.stage-label span {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

.stage-skip {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-subtle);
  font-size: 11px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.stage-skip:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* AI 캐릭터 */
.stage-character {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent) 0%, #6ed9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 56px;
  position: relative;
  box-shadow:
    0 0 0 4px rgba(163, 255, 94, 0.1),
    0 0 40px rgba(163, 255, 94, 0.4),
    0 0 80px rgba(163, 255, 94, 0.2);
  animation: charFloat 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes charFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.stage-character::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.5;
  animation: charRing 2s ease-out infinite;
}

@keyframes charRing {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.stage-character-emoji {
  display: block;
  animation: emojiSwap 0.4s ease-out;
}

@keyframes emojiSwap {
  0% { transform: scale(0) rotate(-180deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(10deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* AI 말풍선 */
.stage-bubble-wrap {
  min-height: 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.stage-bubble {
  max-width: 480px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text);
  position: relative;
  animation: bubbleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  line-height: 1.5;
}

.stage-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--border-strong);
}

.stage-bubble::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--bg);
}

@keyframes bubbleIn {
  0% { opacity: 0; transform: translateY(-10px) scale(0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.stage-bubble.exiting {
  animation: bubbleOut 0.2s ease-in forwards;
}

@keyframes bubbleOut {
  to { opacity: 0; transform: translateY(10px); }
}

/* 타이핑 커서 */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: var(--accent);
  margin-left: 2px;
  animation: cursorBlink 0.8s step-end infinite;
  vertical-align: middle;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* 현재 스테이지 타이틀 */
.stage-current {
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 2;
  min-height: 22px;
}

/* 진행률 프로그레스 바 */
.stage-progress {
  max-width: 500px;
  margin: 0 auto 20px;
  position: relative;
  z-index: 2;
}

.stage-progress-bar {
  height: 8px;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--border);
}

.stage-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #6ed9ff 100%);
  border-radius: 4px;
  width: 0%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px var(--accent);
  position: relative;
}

.stage-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: progressShine 2s linear infinite;
}

@keyframes progressShine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.stage-percent {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 8px;
}

.stage-percent span {
  color: var(--accent);
  font-weight: 700;
  font-size: 13px;
}

/* 단계 인디케이터 (점 배열) */
.stage-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  position: relative;
  z-index: 2;
}

.stage-dot {
  width: 24px;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  transition: all 0.3s;
}

.stage-dot.done {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}

.stage-dot.active {
  background: var(--accent);
  animation: dotPulse 1s ease-in-out infinite;
  box-shadow: 0 0 12px var(--accent);
}

@keyframes dotPulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.8); }
}

/* 성취 배지 토스트 */
.achievement-toast {
  position: fixed;
  top: 100px;
  right: -400px;
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(22,25,34,0.95) 100%);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  min-width: 280px;
  max-width: 340px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(163,255,94,0.2);
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.achievement-toast.show { right: 24px; }

.achievement-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, #6ed9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(163,255,94,0.3);
}

.achievement-text {
  flex: 1;
  min-width: 0;
}

.achievement-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 2px;
}

.achievement-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.achievement-xp {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}

/* 컨페티 */
.confetti-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 12px;
  opacity: 0;
  animation: confettiFall 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}

/* C안: 생성/에러 진행 화면도 화이트 모던 톤으로 통일 */
body.design-c .stage-pipeline {
  background:
    linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    #ffffff !important;
  background-size: 24px 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 360px;
  padding: 36px 32px;
}

body.design-c .stage-pipeline::before {
  display: none !important;
}

body.design-c .stage-header {
  margin-bottom: 22px;
}

body.design-c .stage-label {
  color: var(--text-subtle) !important;
  letter-spacing: 0.18em;
}

body.design-c .stage-label span,
body.design-c .stage-percent span {
  color: #111111 !important;
}

body.design-c .stage-skip {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-dim) !important;
  box-shadow: none !important;
}

body.design-c .stage-skip:hover {
  background: #f7f7f7 !important;
  border-color: #111111 !important;
  color: #111111 !important;
}

body.design-c .stage-character {
  width: 96px;
  height: 96px;
  margin-bottom: 18px;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  animation: none !important;
}

body.design-c .stage-character::before {
  display: none !important;
}

body.design-c .stage-character-emoji {
  width: 14px;
  height: 22px;
  display: inline-block !important;
  background: #111111;
  border-radius: 4px;
  color: transparent !important;
  font-size: 0 !important;
  animation: none !important;
  position: relative;
}

body.design-c .stage-character-emoji::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 4px;
  transform: translateX(-50%);
  background: #ffffff;
  border-radius: 50%;
}

body.design-c .stage-current {
  color: #111111 !important;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}

body.design-c .stage-current::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: #111111;
  vertical-align: 1px;
}

body.design-c .stage-bubble-wrap {
  min-height: 72px;
  margin-bottom: 22px;
}

body.design-c .stage-bubble {
  width: min(560px, 100%);
  max-width: 560px;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  color: #111111 !important;
  padding: 14px 20px;
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

body.design-c .stage-bubble::before,
body.design-c .stage-bubble::after {
  display: none !important;
}

body.design-c .stage-progress {
  max-width: 560px;
}

body.design-c .stage-progress-bar {
  height: 7px;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body.design-c .stage-progress-fill {
  background: #111111 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

body.design-c .stage-progress-fill::after {
  display: none !important;
}

body.design-c .stage-percent {
  color: var(--text-dim) !important;
}

body.design-c .stage-dots {
  gap: 8px;
}

body.design-c .stage-dot {
  width: 24px;
  height: 5px;
  border-radius: 999px;
  background: #d9d9d9 !important;
  box-shadow: none !important;
  animation: none !important;
}

body.design-c .stage-dot.done,
body.design-c .stage-dot.active {
  background: #111111 !important;
  box-shadow: none !important;
}

body.design-c .stage-pipeline.error .stage-current::before {
  background: #111111;
}

/* 완성 토스트 (대형) */
.completion-toast {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(22,25,34,0.95) 100%);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 60px rgba(163,255,94,0.4);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.completion-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.completion-emoji {
  font-size: 56px;
  margin-bottom: 12px;
  animation: emojiSpin 1s ease-out;
}

@keyframes emojiSpin {
  0% { transform: scale(0) rotate(-360deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.completion-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.completion-stats {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--text-dim);
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 12px;
}

.completion-stat-num {
  color: var(--accent);
  font-weight: 700;
}

/* 카운터 애니메이션용 숫자 */
.counter-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* 결과 블록 스태거드 등장 */
.result-block.stagger-in {
  opacity: 0;
  animation: staggerIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes staggerIn {
  0% { opacity: 0; transform: translateY(30px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* 타이핑되는 본문 */
.typing-text {
  white-space: pre-wrap;
}

.typing-text.typing::after {
  content: '▊';
  color: var(--accent);
  animation: cursorBlink 0.6s step-end infinite;
}

/* ================================
   📋 발행 가이드 (Step by Step)
   ================================ */
.publish-guide {
  background: linear-gradient(135deg, rgba(163, 255, 94, 0.08) 0%, rgba(94, 179, 255, 0.05) 100%);
  border: 1px solid rgba(163, 255, 94, 0.25);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}

.publish-guide::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(163, 255, 94, 0.15) 0%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
}

.guide-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, #6ed9ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(163, 255, 94, 0.35);
  flex-shrink: 0;
  z-index: 1;
}

.guide-body {
  flex: 1;
  min-width: 0;
  z-index: 1;
}

.guide-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.guide-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}

.guide-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}

.guide-progress-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.guide-dots {
  display: flex;
  gap: 6px;
}

.guide-dot {
  width: 22px; height: 22px;
  border-radius: 8px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-subtle);
  transition: all 0.3s;
}

.guide-dot.done {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 10px rgba(163, 255, 94, 0.5);
  animation: dotCheck 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dotCheck {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ================================
   🔢 스텝 번호 배지
   ================================ */
.result-block {
  position: relative;
}

.result-block.with-step {
  padding-left: 0;
}

.result-block.with-step .result-block-header {
  padding-left: 78px;
  min-height: 64px;
  position: relative;
}

.step-badge {
  position: absolute;
  left: 16px;
  top: 32px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--step-color-from, var(--accent)) 0%, var(--step-color-to, #6ed9ff) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.05em;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.3),
    0 0 20px var(--step-glow, rgba(163, 255, 94, 0.3)),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
  transition: all 0.3s;
}

.step-badge.completed {
  background: linear-gradient(135deg, #4a7c3a 0%, #2e5c22 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.step-badge.completed::before {
  content: '✓';
  font-size: 22px;
  color: var(--accent);
}

.step-badge.completed .step-num { display: none; }

.result-block.with-step:hover .step-badge {
  transform: translateY(-50%) scale(1.05) rotate(-3deg);
}

.result-block.with-step.pulsing .step-badge {
  animation: stepPulse 2s ease-in-out infinite;
}

@keyframes stepPulse {
  0%, 100% {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3), 0 0 20px var(--step-glow, rgba(163, 255, 94, 0.3)), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), 0 0 40px var(--step-glow, rgba(163, 255, 94, 0.6)), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

/* ================================
   🎯 강조된 복사 버튼
   ================================ */
.copy-btn-strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  box-shadow:
    0 4px 12px rgba(163, 255, 94, 0.25),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.15s;
  position: relative;
  overflow: hidden;
}

.copy-btn-strong::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.copy-btn-strong:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 16px rgba(163, 255, 94, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  background: #b4ff75;
}

.copy-btn-strong:hover::before {
  left: 100%;
}

.copy-btn-strong:active {
  transform: translateY(0);
}

.copy-btn-strong.copied {
  background: #4a7c3a;
  color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.copy-btn-strong.copied::after {
  content: ' ✓';
  margin-left: 4px;
}

.copy-btn-icon {
  font-size: 15px;
}

/* 새로 생성된 첫 복사 버튼 펄스 효과 */
.copy-btn-strong.attention {
  animation: btnAttention 2s ease-in-out infinite;
}

@keyframes btnAttention {
  0%, 100% {
    box-shadow:
      0 4px 12px rgba(163, 255, 94, 0.25),
      0 0 0 0 rgba(163, 255, 94, 0.4),
      inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow:
      0 4px 12px rgba(163, 255, 94, 0.35),
      0 0 0 8px rgba(163, 255, 94, 0),
      inset 0 -2px 0 rgba(0, 0, 0, 0.1);
  }
}

/* 블록 완료 상태 */
.result-block.done {
  opacity: 0.75;
}

.result-block.done::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(74, 124, 58, 0.04) 0%, transparent 50%);
  pointer-events: none;
  border-radius: var(--radius);
}

/* ================================
   🎨 이미지 스타일 프리셋
   ================================ */
.style-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.style-preset {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.style-preset:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.style-preset.active {
  border-color: var(--accent);
  background: rgba(163, 255, 94, 0.06);
}

.style-preset-emoji {
  font-size: 24px;
  line-height: 1;
}

.style-preset-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
}

.style-preset-desc {
  font-size: 9px;
  color: var(--text-subtle);
  line-height: 1.2;
}

.style-preset.active .style-preset-name {
  color: var(--accent);
}

/* ================================
   네이버 발행 설정
   ================================ */
.publish-account-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 12px;
}

.publish-account-main {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.publish-state-dot {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  font-size: 15px;
  font-weight: 900;
}

.publish-account-card.connected {
  border-color: rgba(3, 199, 90, 0.38);
  background: rgba(3, 199, 90, 0.055);
}

.publish-account-card.connected .publish-state-dot {
  border-color: rgba(3, 199, 90, 0.4);
  background: rgba(3, 199, 90, 0.14);
  color: #03c75a;
}

.publish-account-card.pending {
  border-color: rgba(240, 78, 35, 0.38);
  background: rgba(240, 78, 35, 0.07);
}

.publish-account-card.pending .publish-state-dot {
  border-color: rgba(240, 78, 35, 0.42);
  background: rgba(240, 78, 35, 0.12);
  color: #f04e23;
}

.publish-account-title {
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
}

.publish-account-sub {
  margin-top: 3px;
  font-size: 11px;
  color: var(--text-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-status-line {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 750;
}

.publish-account-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.api-key-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.api-setting-note {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.publish-add-form {
  display: none;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}

.publish-add-form.show {
  display: grid;
  gap: 8px;
}

.result-action-row {
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
}

.result-action-row .btn {
  min-height: 42px;
}

.naver-publish-status {
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 750;
  overflow: hidden;
}

.publish-status-top {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.publish-status-top strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.publish-status-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: publishPulse 1.25s ease-out infinite;
  flex: 0 0 auto;
}

.naver-publish-status-done .publish-status-pulse,
.naver-publish-status-error .publish-status-pulse,
.naver-publish-status-info .publish-status-pulse {
  animation: none;
}

.publish-status-percent {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-subtle);
  font-size: 11px;
}

.publish-live-bar {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.publish-live-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5eb3ff, #a3ff5e);
  transition: width 0.25s ease;
}

.publish-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.publish-step-chip {
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-subtle);
  font-size: 11px;
  line-height: 1;
}

.publish-step-chip.active {
  border-color: rgba(94, 179, 255, 0.45);
  background: rgba(94, 179, 255, 0.12);
  color: #8fd0ff;
}

.publish-step-chip.done {
  border-color: rgba(163, 255, 94, 0.35);
  background: rgba(163, 255, 94, 0.12);
  color: var(--accent);
}

.publish-recovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.publish-recovery-btn {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.publish-recovery-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.09);
}

.publish-recovery-btn.primary {
  border-color: rgba(163, 255, 94, 0.4);
  background: rgba(163, 255, 94, 0.16);
  color: var(--accent);
}

@keyframes publishPulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 179, 255, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(94, 179, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 179, 255, 0); }
}

/* ================================
   업로드 이미지 순서 적용
   ================================ */
.user-image-zone {
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: 10px;
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.user-image-zone:hover,
.user-image-zone.dragging {
  border-color: var(--accent);
  background: var(--accent-glow);
}

.user-image-zone-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}

.user-image-zone-desc {
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-subtle);
}

.user-image-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.user-image-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-card);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.user-image-thumb {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--bg);
}

.user-image-info {
  min-width: 0;
  overflow: hidden;
}

.user-image-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-image-meta {
  font-size: 10px;
  color: var(--text-subtle);
  margin-top: 2px;
}

.user-image-actions {
  display: flex;
  gap: 4px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  padding-top: 6px;
}

.user-image-action {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  flex: 0 0 auto;
}

.user-image-action:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.user-image-action:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ================================
   🤖 AI 품질 평가
   ================================ */
.quality-panel {
  background: linear-gradient(135deg, rgba(94, 179, 255, 0.04) 0%, rgba(163, 255, 94, 0.04) 100%);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.quality-panel::before {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(94, 179, 255, 0.12) 0%, transparent 70%);
  filter: blur(25px);
  pointer-events: none;
}

.quality-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.quality-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.quality-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.quality-subtitle {
  font-size: 11px;
  color: var(--text-subtle);
  margin-top: 2px;
}

.quality-score-big {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

.quality-score-big .score-num {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quality-score-big .score-max {
  font-size: 14px;
  color: var(--text-subtle);
  font-weight: 500;
}

.quality-score-label {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

/* 5축 게이지 */
.quality-metrics {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

.quality-metric {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}

.q-metric-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  font-weight: 600;
}

.q-metric-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.q-metric-bar {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.q-metric-fill {
  height: 100%;
  border-radius: 2px;
  animation: qBarFill 1s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes qBarFill {
  from { width: 0 !important; }
}

.q-metric.excellent .q-metric-value { color: var(--accent); }
.q-metric.excellent .q-metric-fill { background: var(--accent); }
.q-metric.good .q-metric-value { color: var(--blue); }
.q-metric.good .q-metric-fill { background: var(--blue); }
.q-metric.fair .q-metric-value { color: var(--warning); }
.q-metric.fair .q-metric-fill { background: var(--warning); }

/* 개선 제안 */
.quality-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}

.q-suggest-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-subtle);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.q-suggest-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--suggest-color, var(--warning));
  font-size: 12px;
}

.q-suggest-icon {
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}

.q-suggest-body { flex: 1; }

.q-suggest-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--suggest-color, var(--warning));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.q-suggest-text {
  color: var(--text-dim);
  line-height: 1.5;
}

.q-suggest-text strong { color: var(--text); }

.quality-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  position: relative;
  z-index: 1;
}

.q-action-btn {
  flex: 1;
  padding: 8px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.q-action-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

.q-action-btn.primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.q-action-btn.primary:hover {
  background: #b4ff75;
  border-color: #b4ff75;
}

@media (max-width: 900px) {
  .quality-metrics { grid-template-columns: repeat(3, 1fr); }
}

/* ================================
   💳 사용 카운터 (헤더)
   ================================ */
.usage-counter {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-left: auto;
  font-size: 11px;
}

.usage-ico {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}

.usage-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.usage-label {
  font-size: 9px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.usage-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
}

.usage-value .used {
  color: var(--accent);
}

.usage-bar-mini {
  width: 50px;
  height: 4px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}

.usage-bar-mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--blue) 100%);
  border-radius: 2px;
  transition: width 0.4s;
}

/* 토스트 스타일 카운터 감소 효과 */
.usage-counter.decreasing .usage-value {
  animation: usageDecrease 0.6s ease-out;
}

@keyframes usageDecrease {
  0% { transform: scale(1); color: var(--text); }
  50% { transform: scale(1.2); color: var(--accent); }
  100% { transform: scale(1); }
}

/* ================================
   🎴 카테고리 카드 그리드 — 글 유형 선택
   ================================ */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.category-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
  font-family: inherit;
  color: var(--text);
}

.category-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.category-card.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}
.category-card.active .category-card-name { color: var(--accent); }

.category-card-emoji {
  font-size: 15px;
  line-height: 1;
}

.category-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.category-card-desc {
  display: none;   /* 미니멀 chip 모드 — 보조 설명 숨김 */
}

@media (max-width: 640px) {
  .category-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================================
   🎭 발행 주체 카드 — 카테고리 카드의 가로형 작은 변형
   ================================ */
.subject-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.subject-card {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
  font-family: inherit;
  color: var(--text);
}

.subject-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.subject-card.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
}
.subject-card.active .subject-card-name { color: var(--accent); }

.subject-card-emoji { font-size: 15px; line-height: 1; }
.subject-card-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }
.subject-card-desc { display: none; }    /* 미니멀 chip 모드 — 보조 설명은 title 속성으로 충분 */

/* ================================
   ⚙ 고급 설정 패널 (접힘 가능)
   ================================ */
.advanced-panel {
  margin-top: 4px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 0;
  background: transparent;
}

.advanced-panel > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}

.advanced-panel > summary::-webkit-details-marker { display: none; }
.advanced-panel > summary::after {
  content: '▾';
  font-size: 12px;
  color: var(--text-dim);
  transition: transform 0.25s;
  display: inline-block;
  flex-shrink: 0;
}
.advanced-panel[open] > summary::after { transform: rotate(-180deg); }

.advanced-panel > summary:hover {
  background: rgba(163,255,94,0.06);
  color: var(--accent);
}
.advanced-panel > summary:hover::after { color: var(--accent); }

.advanced-panel > .advanced-body {
  padding: 6px 14px 14px;
  border-top: 1px dashed var(--border);
  margin-top: 4px;
}

.advanced-panel .form-group { margin-top: 14px; }
.advanced-panel .form-group:first-child { margin-top: 0; }

/* ================================
   🎯 톤앤매너 프리셋
   ================================ */
.tone-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 4px;
}

.tone-preset {
  padding: 9px 10px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-family: inherit;
}

.tone-preset:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.tone-preset.active {
  border-color: var(--accent);
  background: rgba(163, 255, 94, 0.08);
}

.tone-preset.active .tone-name {
  color: var(--accent);
}

.tone-emoji {
  font-size: 14px;
}

.tone-name {
  font-weight: 600;
  color: var(--text);
  font-size: 11px;
}

/* ================================
   📚 콘텐츠 깊이 (세그먼트)
   ================================ */
.depth-segment {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 4px;
}

.depth-btn {
  padding: 8px 6px;
  background: transparent;
  border: none;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.depth-btn:hover {
  color: var(--text);
  background: var(--bg-hover);
}

.depth-btn.active {
  background: var(--accent);
  color: var(--bg);
}

.depth-btn.active .depth-sub {
  color: rgba(0, 0, 0, 0.6);
}

.depth-emoji { font-size: 14px; }
.depth-label { font-size: 11px; font-weight: 700; }
.depth-sub { font-size: 9px; color: var(--text-subtle); }

/* ================================
   👥 페르소나 프리셋
   ================================ */
.persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.persona-chip {
  padding: 6px 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  color: var(--text-dim);
}

.persona-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.persona-chip.active {
  background: var(--blue);
  color: white;
  border-color: var(--blue);
}

.persona-chip-add {
  padding: 6px 10px;
  background: transparent;
  border: 1.5px dashed var(--border);
  border-radius: 18px;
  font-size: 11px;
  color: var(--text-subtle);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}

.persona-chip-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* AI 추천 페르소나 칩 — 일반 칩과 시각 차별화 */
.persona-ai-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 4px 10px;
  background: linear-gradient(135deg, rgba(163,255,94,0.15), rgba(94,179,255,0.15));
  border: 1px solid rgba(163,255,94,0.35);
  border-radius: 18px;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-right: 2px;
}
.persona-chip.ai-suggested {
  border-color: rgba(163,255,94,0.35);
  color: var(--text);
  background: rgba(163,255,94,0.04);
}
.persona-chip.ai-suggested:hover {
  border-color: var(--accent);
  background: rgba(163,255,94,0.10);
}
.persona-chip.ai-suggested.active {
  background: linear-gradient(135deg, var(--accent), #6ed9ff);
  color: #1a1a1a;
  border-color: var(--accent);
}

/* ================================
   🧬 클라이언트 DNA 알림
   ================================ */
.dna-alert {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(163, 255, 94, 0.08) 0%, rgba(94, 179, 255, 0.05) 100%);
  border: 1px solid rgba(163, 255, 94, 0.2);
  border-radius: 10px;
  margin-top: 10px;
  animation: fadeIn 0.3s;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.dna-alert.show { display: flex; }

.dna-alert-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.dna-alert strong { color: var(--accent); }

/* ================================
   🎨 레퍼런스 업로드
   ================================ */
.reference-zone {
  margin-top: 6px;
  padding: 12px;
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}

.reference-zone:hover {
  border-color: var(--accent);
  background: rgba(163, 255, 94, 0.03);
}

.reference-zone-icon {
  font-size: 20px;
  margin-bottom: 4px;
  opacity: 0.7;
}

.reference-zone-text {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}

.reference-zone-text strong {
  color: var(--accent);
}

.reference-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(163, 255, 94, 0.08);
  border: 1px solid rgba(163, 255, 94, 0.25);
  border-radius: 8px;
  margin: 4px 3px 0 0;
  font-size: 11px;
  color: var(--accent);
  animation: fadeIn 0.3s;
}

.reference-chip-close {
  cursor: pointer;
  opacity: 0.6;
  font-size: 12px;
}
.reference-chip-close:hover { opacity: 1; }

/* ================================
   📊 성과 기반 톤 학습 배지
   ================================ */
.learned-tone-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  background: linear-gradient(135deg, rgba(181, 122, 255, 0.1) 0%, rgba(94, 179, 255, 0.08) 100%);
  border: 1px solid rgba(181, 122, 255, 0.3);
  border-radius: 8px;
  font-size: 10px;
  color: var(--purple);
  font-weight: 600;
  margin-left: 8px;
}

/* ================================
   🔢 대량 생성 (Bulk Mode)
   ================================ */
.bulk-hero {
  background:
    radial-gradient(circle at 10% 10%, rgba(163, 255, 94, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(94, 179, 255, 0.06) 0%, transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 28px 32px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.bulk-hero-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--text) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bulk-hero-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 20px;
}

.bulk-input-group {
  display: grid;
  grid-template-columns: 1fr 160px 160px;
  gap: 10px;
  margin-bottom: 16px;
}

.bulk-kw-area {
  min-height: 120px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  line-height: 1.6;
}

.bulk-kw-area:focus {
  outline: none;
  border-color: var(--accent);
}

.bulk-stat-card {
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-align: center;
}

.bulk-stat-label {
  font-size: 10px;
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.bulk-stat-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.bulk-stat-sub {
  font-size: 10px;
  color: var(--text-subtle);
  margin-top: 4px;
}

/* 대량 배분 그리드 */
.bulk-distribution {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.bulk-dist-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.bulk-dist-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bulk-dist-row {
  display: grid;
  grid-template-columns: 28px 140px 1fr 80px 80px;
  gap: 12px;
  align-items: center;
}

.bulk-dist-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--client-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
}

.bulk-dist-name {
  font-size: 12px;
  font-weight: 500;
}

.bulk-dist-slider-wrap {
  position: relative;
  height: 6px;
  background: var(--bg-card);
  border-radius: 3px;
}

.bulk-dist-slider-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--client-color);
  transition: width 0.3s;
}

.bulk-dist-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.bulk-dist-adjust {
  display: flex;
  gap: 2px;
  justify-content: flex-end;
}

.bulk-adjust-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.15s;
}

.bulk-adjust-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
  border-color: var(--border-strong);
}

/* 대량 생성 CTA */
.bulk-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--accent) 0%, #7dcf3f 100%);
  color: var(--bg);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border: none;
  font-family: inherit;
  width: 100%;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 6px 16px rgba(163, 255, 94, 0.3);
}

.bulk-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(163, 255, 94, 0.4);
}

/* 대량 진행 상태 */
.bulk-progress-wall {
  display: none;
  margin-top: 24px;
}
.bulk-progress-wall.active { display: block; animation: fadeIn 0.3s; }

.bulk-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.bulk-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.bulk-item.processing {
  border-color: var(--accent);
}

.bulk-item.processing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(163, 255, 94, 0.08), transparent);
  animation: progressShine 1.5s linear infinite;
  pointer-events: none;
}

.bulk-item.done {
  opacity: 0.85;
}

.bulk-item-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--client-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  flex-shrink: 0;
}

.bulk-item-body {
  flex: 1;
  min-width: 0;
}

.bulk-item-title {
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bulk-item-client {
  font-size: 10px;
  color: var(--text-subtle);
}

.bulk-item-status {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  flex-shrink: 0;
}

.bulk-item-status.waiting {
  background: var(--bg);
  color: var(--text-subtle);
  border: 1px solid var(--border);
}

.bulk-item-status.processing {
  background: rgba(163, 255, 94, 0.12);
  color: var(--accent);
}

.bulk-item-status.done {
  background: rgba(74, 124, 58, 0.15);
  color: var(--accent);
}

.bulk-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.bulk-progress-title {
  font-size: 14px;
  font-weight: 700;
}

.bulk-progress-stats {
  display: flex;
  gap: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.bulk-progress-stat-label {
  color: var(--text-subtle);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}

/* SNSPilot top navigation */
.app,
body.design-b .app,
body.design-c .app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar,
body.design-b .sidebar,
body.design-c .sidebar {
  width: 100%;
  height: auto;
  min-height: 72px;
  position: sticky;
  top: 0;
  z-index: 900;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-right: 0;
  border-bottom: 1px solid var(--border);
  background: rgba(18, 20, 26, 0.92);
  backdrop-filter: blur(16px);
}

body.design-b .sidebar,
body.design-c .sidebar {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.92);
}

.logo,
body.design-b .logo,
body.design-c .logo {
  padding: 0 18px 0 0;
  margin: 0 14px 0 0;
  border-bottom: 0;
  border-right: 1px solid var(--border);
  flex: 0 0 auto;
}

.nav-section {
  display: none;
}

.nav-item,
body.design-b .nav-item,
body.design-c .nav-item {
  width: auto;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 999px;
}

body.design-b .nav-item.active,
body.design-c .nav-item.active {
  box-shadow: none;
}

.nav-icon {
  width: 16px;
  height: 16px;
}

.sidebar-footer,
body.design-b .sidebar-footer,
body.design-c .sidebar-footer {
  margin-top: 0;
  margin-left: auto;
  padding-top: 0;
  border-top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.usage-counter,
body.design-b .usage-counter,
body.design-c .usage-counter {
  min-width: 176px;
}

.user-chip,
body.design-b .user-chip,
body.design-c .user-chip {
  min-width: 168px;
  max-width: 210px;
}

.main,
body.design-b .main,
body.design-c .main {
  width: 100%;
  max-width: none;
  padding: 28px 40px 44px;
}

body.design-b .page-header,
body.design-c .page-header {
  margin: -28px -40px 28px;
  padding: 22px 40px 18px;
}

.page-header .header-actions {
  padding-right: 146px;
}

/* B안 정리: 그리드 없는 밝은 배경, 높은 대비, 배경 없는 아이콘 */
body.design-b {
  --bg: #ffffff;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #f6f8fb;
  --border: #d8dee8;
  --border-strong: #b9c4d2;
  --text: #111827;
  --text-dim: #4b5563;
  --text-subtle: #6b7280;
  --accent: #f04e23;
  --accent-dim: #c93f1b;
  --accent-glow: rgba(240, 78, 35, 0.08);
  --blue: #2563eb;
  --purple: #6d28d9;
  background: #ffffff !important;
  color: var(--text);
}

body.design-b::before {
  display: none !important;
}

body.design-b .sidebar {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom-color: var(--border);
  backdrop-filter: blur(12px);
}

body.design-b .page-header {
  background: #ffffff !important;
  border-bottom-color: var(--border);
  backdrop-filter: none;
}

body.design-b .page-title,
body.design-b .pilot-title,
body.design-b .pilot-module-name,
body.design-b .bento-head-title,
body.design-b .pilot-roadmap-title {
  color: var(--text) !important;
}

body.design-b .page-subtitle,
body.design-b .pilot-desc,
body.design-b .pilot-module-copy,
body.design-b .pilot-roadmap-copy {
  color: var(--text-dim) !important;
}

body.design-b .pilot-hero-main {
  background: #ffffff !important;
  border-color: var(--border);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
}

body.design-b .pilot-mini-panel,
body.design-b .pilot-module {
  background: #ffffff !important;
  border-color: var(--border);
  box-shadow: 0 12px 28px rgba(17, 24, 39, 0.06);
}

body.design-b .pilot-module.active {
  border-color: var(--border);
}

body.design-b .pilot-eyebrow {
  color: var(--accent);
}

body.design-b .nav-icon,
body.design-b .pilot-module-icon,
body.design-b .bento-head-icon,
body.design-b .usage-ico,
body.design-b .logo-mark,
body.design-b .user-avatar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
  border-radius: 0 !important;
}

body.design-b .logo-mark,
body.design-b .user-avatar {
  border: 1px solid var(--border-strong) !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  font-weight: 900;
}

body.design-b .logo-mark,
body.design-c .logo-mark {
  border: 0 !important;
  background: transparent !important;
}

body.design-b .nav-icon {
  display: none !important;
}

body.design-b .pilot-module-icon,
body.design-b .bento-head-icon,
body.design-b .usage-ico {
  width: auto;
  height: auto;
  min-width: 0;
  font-weight: 900;
  font-family: 'JetBrains Mono', monospace;
}

body.design-b .nav-item {
  color: var(--text-dim);
  border: 1px solid transparent;
}

body.design-b .nav-item.active {
  background: #fff4ef !important;
  border-color: var(--border);
  color: var(--text);
}

body.design-b .btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
  box-shadow: none;
}

body.design-b .btn-primary:hover {
  background: var(--accent-dim) !important;
  border-color: var(--accent-dim) !important;
}

body.design-b .pilot-status,
body.design-b .learned-tone-badge,
body.design-b .status-pill,
body.design-b .sugg-badge,
body.design-b .trending-rank {
  background: #f6f7f9 !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

body.design-b .nav-item.active .nav-icon,
body.design-b .pilot-eyebrow,
body.design-b .usage-value .used {
  color: var(--accent) !important;
}

body.design-b .pilot-module.active:hover,
body.design-b .pilot-module:hover {
  border-color: var(--border-strong);
}

body.design-b .btn,
body.design-b .usage-counter,
body.design-b .user-chip {
  box-shadow: none !important;
}

/* C안도 같은 기준으로 정리: 그리드 제거, 배경 없는 선형 아이콘, 본문 대비 강화 */
body.design-c {
  background: #ffffff !important;
}

body.design-c::before {
  display: none !important;
}

body.design-c .pilot-hero-main {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.design-c .pilot-mini-panel,
body.design-c .pilot-module {
  background: #ffffff !important;
  border-color: var(--border) !important;
  box-shadow: none !important;
}

body.design-c .pilot-module.active {
  border-color: var(--border) !important;
}

body.design-c .pilot-title,
body.design-c .pilot-module-name,
body.design-c .bento-head-title,
body.design-c .pilot-roadmap-title {
  color: var(--text) !important;
}

body.design-c .pilot-desc,
body.design-c .pilot-module-copy,
body.design-c .pilot-roadmap-copy {
  color: var(--text-dim) !important;
}

body.design-c .logo-mark,
body.design-c .user-avatar,
body.design-c .nav-icon,
body.design-c .pilot-module-icon,
body.design-c .bento-head-icon,
body.design-c .usage-ico {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--text) !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 900;
  font-size: 16px !important;
}

body.design-c .logo-mark,
body.design-c .user-avatar {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

body.design-c .logo-mark,
body.design-b .logo-mark {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.design-c .nav-icon::before,
body.design-c .pilot-module-icon::before,
body.design-c .bento-head-icon::before,
body.design-c .usage-ico::before {
  content: none !important;
}

body.design-c .nav-icon {
  display: none !important;
}

body.design-c .btn-primary {
  background: #f04e23 !important;
  color: #ffffff !important;
  border-color: #f04e23 !important;
}

body.design-c .btn-primary:hover {
  background: #c93f1b !important;
  border-color: #c93f1b !important;
}

body.design-c .pilot-status,
body.design-c .learned-tone-badge,
body.design-c .status-pill,
body.design-c .sugg-badge,
body.design-c .trending-rank {
  background: #f6f7f9 !important;
  border-color: #e5e7eb !important;
  color: #374151 !important;
}

body.design-c .pilot-module:hover,
body.design-c .pilot-module.active:hover {
  border-color: var(--border-strong) !important;
}

@media (max-width: 1180px) {
  .studio-hero {
    grid-template-columns: minmax(380px, 0.9fr) minmax(420px, 1.1fr);
    gap: 34px;
  }
  #tab-dashboard .studio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .sidebar,
  body.design-b .sidebar,
  body.design-c .sidebar {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
  }

  .logo,
  body.design-b .logo,
  body.design-c .logo {
    width: 100%;
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
  }

  .sidebar-footer {
    width: 100%;
    margin-left: 0;
  }

  .usage-counter {
    flex: 1;
  }

  .main,
  body.design-b .main,
  body.design-c .main {
    padding: 22px 18px 36px;
  }

  body.design-b .page-header,
  body.design-c .page-header {
    margin: -22px -18px 22px;
    padding: 18px;
  }

  .page-header .header-actions {
    padding-right: 0;
  }

  .studio-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 38px 0 34px;
  }
}

@media (max-width: 640px) {
  .sidebar,
  body.design-b .sidebar,
  body.design-c .sidebar {
    gap: 5px;
    padding: 9px 12px 10px;
  }
  .logo,
  body.design-b .logo,
  body.design-c .logo {
    min-height: 38px;
    margin-bottom: 2px;
  }
  .nav-item,
  body.design-b .nav-item,
  body.design-c .nav-item {
    padding: 8px 10px;
    font-size: 12px;
  }
  .sidebar-footer,
  body.design-b .sidebar-footer,
  body.design-c .sidebar-footer {
    gap: 8px;
    padding-top: 3px;
  }
  .sidebar-footer .settings-chip,
  .sidebar-footer .usage-counter,
  .sidebar-footer .user-chip {
    height: 44px;
  }
  .studio-hero-title {
    font-size: clamp(36px, 11vw, 48px);
  }
  .studio-hero-ops {
    padding: 16px;
  }
  .studio-hero-channel {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    padding: 8px 6px;
  }
  .studio-hero-channel b {
    display: none;
  }
  .studio-hero-ops-flow {
    flex-wrap: wrap;
  }
  #tab-dashboard .studio-grid {
    grid-template-columns: 1fr;
  }
}

.blog-route-panel {
  border-color: rgba(163, 255, 94, 0.28);
  background: linear-gradient(180deg, rgba(163, 255, 94, 0.045), rgba(255, 255, 255, 0.018));
}

.blog-route-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
}

.blog-route-status strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.blog-route-status em {
  min-width: 0;
  color: var(--text-subtle);
  font-size: 11px;
  font-style: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  box-shadow: 0 0 0 3px rgba(255, 181, 71, 0.12);
  flex: 0 0 auto;
}

.blog-route-status.connected {
  border-color: rgba(163, 255, 94, 0.34);
  background: rgba(163, 255, 94, 0.075);
}

.blog-route-status.connected .route-state-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(163, 255, 94, 0.14);
}

.blog-route-status.disconnected {
  border-color: rgba(255, 181, 71, 0.28);
}

.channel-account-card {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 14px;
  align-items: center;
}

.channel-account-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.channel-account-row .form-select,
.channel-account-row .form-input {
  min-width: 0;
  flex: 1;
}

.channel-account-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.channel-account-hint {
  margin: -2px 0 0;
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .channel-account-card {
    grid-template-columns: 1fr;
  }

  .channel-account-row {
    align-items: stretch;
    flex-direction: column;
  }
}

/* ================================
   상단 우측 3요소(계정 연결 설정·포인트/사용료 카드·프로필) 높이·구조 통일
   ================================ */
.sidebar-footer .settings-chip,
.sidebar-footer .usage-counter,
.sidebar-footer .user-chip {
  height: 52px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
  margin: 0;
  padding: 0 14px;
}
.sidebar-footer .user-chip {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.sidebar-footer .user-chip:hover {
  border-color: var(--accent);
  background: var(--bg-hover, var(--bg-card));
}
.user-caret {
  color: var(--text-subtle);
  font-size: 10px;
  margin-left: 2px;
}
.sidebar-footer .usage-counter.points-mode { cursor: pointer; }
.sidebar-footer .usage-counter.points-mode:hover { border-color: var(--accent); }

/* ================================
   스켈레톤 로딩 (헤더 위젯 — 확인 전 빈자리 대신 뼈대 표시)
   ================================ */
.skel {
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  border-radius: 6px;
}
.skel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: skel-slide 1.2s infinite;
}
@keyframes skel-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .skel::after { animation: none; }
}
.skel-line { height: 10px; margin: 3px 0; }
.usage-ico.skel { width: 22px; height: 22px; background: var(--bg-elev); }

/* ================================
   마이페이지 탭 (본체 내부 — 상단 메뉴바 유지)
   ================================ */
#tab-mypage .mp-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 16px;
  align-items: start;
}
#tab-mypage .mp-col { display: flex; flex-direction: column; gap: 16px; }
#tab-mypage .mp-balance {
  font-size: 34px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 10px;
}
#tab-mypage .mp-charge-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 10px; }
#tab-mypage .mp-charge-row button {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--accent);
  font-family: inherit;
  transition: all 0.15s;
}
#tab-mypage .mp-charge-row button:hover { border-color: var(--accent); background: var(--accent-glow); }
#tab-mypage .mp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#tab-mypage .mp-table th,
#tab-mypage .mp-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--border); }
#tab-mypage .mp-table th { color: var(--text-subtle); font-weight: 600; font-size: 12px; }
#tab-mypage .mp-table tr:last-child td { border-bottom: none; }
#tab-mypage .mp-table td { font-variant-numeric: tabular-nums; }
#tab-mypage .mp-plus { color: var(--accent); font-weight: 700; }
#tab-mypage .mp-minus { color: #ff8080; font-weight: 700; }
#tab-mypage .mp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}
#tab-mypage .mp-row:last-of-type { border-bottom: none; }
#tab-mypage .mp-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
}
#tab-mypage .mp-input:focus { outline: none; border-color: var(--accent); }
.mp-conn-badge { font-size: 12px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.mp-conn-badge.on { background: var(--accent-glow); color: var(--accent); }
.mp-conn-badge.off { background: var(--bg-elev); color: var(--text-subtle); border: 1px solid var(--border); }
.mp-btn-mini {
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: #ff8080;
  font-family: inherit;
}
.mp-btn-mini:hover { border-color: #ff8080; }
@media (max-width: 900px) {
  #tab-mypage .mp-grid { grid-template-columns: 1fr; }
}

/* ================================
   생성 중단 — 크고 중앙에 (50~60대 가독성)
   ================================ */
.stage-stop-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 22px;
}
.stage-stop-big {
  font-family: inherit; cursor: pointer;
  font-size: 16px; font-weight: 800;
  padding: 14px 40px; border-radius: 14px;
  color: #ff8080;
  background: rgba(255, 128, 128, 0.08);
  border: 1.5px solid rgba(255, 128, 128, 0.55);
  transition: all 0.15s;
}
.stage-stop-big:hover {
  background: rgba(255, 128, 128, 0.16);
  border-color: #ff8080;
}
.stage-stop-hint { font-size: 12.5px; color: var(--text-subtle); }

/* 멈춤/실패 후 선택 패널 */
.stage-choice {
  margin-top: 22px; padding: 22px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
}
.stage-choice-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.stage-choice-desc { font-size: 14px; color: var(--text-dim); margin-bottom: 18px; }
.stage-choice-btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.stage-choice-btns button {
  font-family: inherit; cursor: pointer;
  font-size: 15px; font-weight: 800;
  padding: 14px 24px; border-radius: 14px;
  flex: 1 1 200px; max-width: 280px;
}
.stage-choice-again {
  color: #0a0b0f; background: var(--accent); border: none;
}
.stage-choice-again:hover { filter: brightness(1.08); }
.stage-choice-reset {
  color: var(--text); background: var(--bg-elev);
  border: 1px solid var(--border);
}
.stage-choice-reset:hover { border-color: #ff8080; color: #ff8080; }