/* ============================================================
   어세스타 성장레터 에디터 — editor.css
   ============================================================ */

/* ---------- Design Tokens (CSS Custom Properties) ---------- */
:root {
  /* Surface */
  --bg: #f0f2f5;
  --surface: #fff;
  --surface-2: #f8f9fa;
  --surface-3: #f5f5f5;
  --border: #e0e0e0;
  --border-strong: #ccc;

  /* Text */
  --text: #222;
  --text-muted: #666;
  --text-subtle: #666;

  /* Brand / Accents */
  --brand: #1a237e;
  --brand-700: #0d1a6b;
  --accent-green: #43a047;
  --accent-green-700: #388e3c;
  --danger: #c0392b;
  --danger-700: #a5281a;
  --warning: #f39c12;
  --info: #1976d2;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.12);
}

/* ---------- Utility Classes ---------- */
.u-row { display: flex; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-gap-sm { gap: 4px; }
.u-gap-md { gap: 8px; }
.u-gap-lg { gap: 12px; }
.u-gap-xl { gap: 16px; }
.u-mt-sm { margin-top: 4px; }
.u-mt-md { margin-top: 8px; }
.u-mt-lg { margin-top: 12px; }
.u-flex-1 { flex: 1; }
.u-wrap { flex-wrap: wrap; }
.u-center { justify-content: center; align-items: center; }
.u-between { justify-content: space-between; }
.u-muted { color: var(--text-muted); }
.u-subtle { color: var(--text-subtle); }
.u-hidden { display: none !important; }

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Segoe UI', sans-serif;
  font-size: 14px;
  color: #222;
  background: #f0f2f5;
}

input, textarea, select, button {
  font-family: inherit;
}

/* ---------- App Shell (2-row grid: top-bar + main) ---------- */
#app {
  display: grid;
  grid-template-rows: 56px 1fr;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* ---------- Top Bar ---------- */
#top-bar {
  background: var(--brand);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  z-index: 100;
  flex-shrink: 0;
}

#top-bar .brand {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

#top-bar .subtitle {
  font-size: 12px;
  opacity: 0.7;
  white-space: nowrap;
  flex: 1;
}

#top-bar .actions {
  display: flex;
  gap: 22px;
  align-items: center;
  flex: 1;
  min-width: 0;
}

/* ---------- Current Project Indicator ---------- */
.cp-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 340px;
  padding: 5px 12px 5px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  flex-shrink: 0;
}
.cp-indicator:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.cp-indicator:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-indicator.cp-idle { opacity: 0.75; }
.cp-indicator .cp-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.cp-indicator .cp-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}
.cp-indicator .cp-name {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.cp-indicator .cp-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: rgba(255,255,255,0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-indicator .cp-sep { opacity: 0.5; }
.cp-status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.cp-status-badge.cp-s-draft     { background: #fde68a; color: #7c2d12; }
.cp-status-badge.cp-s-feedback  { background: #bfdbfe; color: #1e3a8a; }
.cp-status-badge.cp-s-final     { background: #bbf7d0; color: #14532d; }
.cp-status-badge.cp-s-sent      { background: #e5e7eb; color: #374151; }
.cp-indicator.cp-idle .cp-status-badge {
  background: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85);
}
.cp-indicator .cp-date { opacity: 0.85; }

/* ---------- Design Request Indicator (글로벌 디자인 요청 카운트) ---------- */
.dr-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 10px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  flex-shrink: 0;
  font-size: 12px;
  color: #fff;
}
.dr-indicator:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.4); }
.dr-indicator:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dr-indicator.dr-idle { opacity: 0.7; }
.dr-indicator.dr-active {
  background: #fff8e1;
  border-color: #f0c060;
  color: #7a5300;
  font-weight: 700;
}
.dr-indicator.dr-active .dr-caret { color: #b88600; }
.dr-indicator .dr-icon { font-size: 14px; line-height: 1; }
.dr-indicator .dr-text { white-space: nowrap; }
.dr-indicator .dr-caret { font-size: 10px; opacity: 0.7; }

.dr-panel {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  max-height: 480px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dr-panel.hidden { display: none; }
.dr-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #eee;
  font-size: 13px;
}
.dr-panel-count {
  font-size: 11.5px;
  font-weight: 700;
  color: #7a5300;
  background: #fff3d6;
  border: 1px solid #f0c060;
  border-radius: 99px;
  padding: 1px 8px;
}
.dr-panel-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  max-height: 360px;
}
.dr-panel-item {
  padding: 8px 14px;
  border-bottom: 1px dashed #eee;
  cursor: pointer;
  transition: background 0.1s;
}
.dr-panel-item:last-child { border-bottom: none; }
.dr-panel-item:hover { background: #fffaf0; }
.dr-panel-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #7a5300;
  font-weight: 700;
  margin-bottom: 3px;
}
.dr-panel-item-body {
  font-size: 12.5px;
  color: #333;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dr-panel-item-meta {
  font-size: 10.5px;
  color: #888;
  margin-top: 3px;
}
.dr-empty {
  padding: 18px 14px;
  text-align: center;
  color: #aaa;
  font-size: 12px;
}
/* 미해결 요청 시각 강조 (좌측 폼 슬롯 + 본문 image/table 블록) */
.img-field-row.has-pending-req,
.block-card.has-pending-req {
  border-left: 3px solid #f0c060;
  background: #fffaf0;
}
.block-card.has-pending-req { padding-left: 13px; }

/* 어노테이션 카드 점프 버튼 (image_request 카드 전용) */
.ann-btn-jump {
  background: #e3f2fd;
  border: 1px solid #90caf9;
  color: #1565c0;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.ann-btn-jump:hover { background: #bbdefb; }

/* ---------- Topbar Button Groups ---------- */
.btn-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.group-status { margin-left: auto; }
.group-user { gap: 8px; }

/* ---------- Autosave Indicator ---------- */
.save-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, opacity 0.2s;
  cursor: default;
}
.save-indicator.hidden { display: none; }
.save-indicator .si-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #bdbdbd;
  flex-shrink: 0;
  transition: background 0.2s;
}
.save-indicator[data-state="saving"] .si-dot {
  background: #64b5f6;
  animation: si-pulse 1s ease-in-out infinite;
}
.save-indicator[data-state="saved"] .si-dot  { background: #66bb6a; }
.save-indicator[data-state="error"] .si-dot  { background: #ef5350; }
.save-indicator[data-state="error"] {
  background: rgba(239,83,80,0.15);
  border-color: rgba(239,83,80,0.5);
  cursor: pointer;
}
.save-indicator[data-state="error"]:hover { background: rgba(239,83,80,0.25); }
@keyframes si-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

/* ---------- Legacy Topbar Separator (남은 마크업 호환) ---------- */
.topbar-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
  align-self: center;
}

/* ---------- Ghost Topbar Buttons (도움말·저장·메모·예시·PPTX) ---------- */
.tb-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.55);
  border-radius: 7px;
  padding: 5px 12px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.tb-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.15); border-color: #fff; }
.tb-ghost:focus-visible {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
  outline: 2px solid rgba(255,255,255,0.4);
  outline-offset: 2px;
}
.tb-ghost:active { background: rgba(255,255,255,0.22); }
.tb-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- Drafts Dropdown ---------- */
.drafts-dropdown-wrapper {
  position: relative;
  flex-shrink: 0;
}

#drafts-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 180px;
  z-index: 200;
  overflow: hidden;
  padding: 4px 0;
}
#drafts-dropdown.hidden { display: none; }

.draft-menu-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-family: inherit;
  color: #333;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s;
}
.draft-menu-item:hover { background: #f5f6fd; color: var(--brand); }
.draft-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.draft-menu-item:disabled:hover { background: none; color: #333; }

.draft-menu-divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

/* ---------- Download Button ---------- */
#btn-download {
  background: var(--accent-green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
#btn-download:hover { background: #2e7d32; }
#btn-download:active { background: #1b5e20; }

/* ---------- Main Split (editor | handle | preview) ---------- */
#main-split {
  display: grid;
  grid-template-columns: var(--editor-w, 480px) 6px 1fr;
  overflow: hidden;
  height: 100%;
}

/* ---------- Split Handle (drag to resize editor panel) ---------- */
#split-handle {
  position: relative;
  background: transparent;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 5;
  transition: background 0.15s;
}
#split-handle::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #dde2ee;
  transition: background 0.15s, width 0.15s;
}
#split-handle:hover::before,
#split-handle.dragging::before { width: 4px; background: #9fa8da; }
#split-handle:focus-visible { outline: none; }
#split-handle:focus-visible::before { background: #3949ab; width: 4px; }
body.split-dragging { cursor: col-resize; user-select: none; }
body.split-dragging iframe { pointer-events: none; }
/* 메모/디자인 요청 카드 드래그 중 — iframe pointer 차단해 mousemove/up 끊김 방지 */
body.ann-dragging iframe { pointer-events: none; }
body.ann-dragging { user-select: none; cursor: grabbing; }

/* ---------- Editor Panel (left) ---------- */
#editor-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;   /* 이모지바 + 탭 + 본문 */
  background: #fff;
  border-right: 1px solid #dde2ee;
  overflow: hidden;
}

/* ---------- Emoji Bar ---------- */
#emoji-bar {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #f8f9ff;
  border-bottom: 1px solid #e8eaf6;
  flex-shrink: 0;
}
#btn-emoji-standalone {
  background: none;
  border: 1px solid #c5cae9;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #3949ab;
  transition: background 0.12s;
}
#btn-emoji-standalone:hover { background: #e8eaf6; }

/* ---------- Section Navigation ---------- */
#sec-nav {
  display: flex;
  flex-wrap: wrap;               /* 탭이 넘치면 다음 줄로 */
  align-items: center;
  gap: 3px;
  padding: 6px 10px;
  border-bottom: 1px solid #dde2ee;
  background: #f8f9ff;
  flex-shrink: 0;
}

.sec-tab {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;  /* 줄 간격 */
}

/* select도 field-input과 동일 스타일 */
select.field-input {
  appearance: auto;
  cursor: pointer;
}
.sec-tab:hover { background: #e8eaf6; color: var(--brand); }
.sec-tab.active {
  background: var(--brand);
  color: #fff;
}

/* ---------- Editor Body (scrollable) ---------- */
#editor-body {
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: #c5cae9 transparent;
}
#editor-body::-webkit-scrollbar { width: 5px; }
#editor-body::-webkit-scrollbar-thumb { background: #c5cae9; border-radius: 4px; }

/* ---------- Section Panels ---------- */
.sec-panel { display: block; }
.sec-panel.hidden { display: none; }

.sec-description {
  background: #e8f5e9;
  border-left: 3px solid var(--accent-green);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 12.5px;
  color: #2e7d32;
  margin-bottom: 18px;
  line-height: 1.6;
}

.sec-subsection-divider {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  border-top: 1px solid #dde3f0;
  padding-top: 18px;
  margin-top: 24px;
  margin-bottom: 14px;
}

.sec-label-sub {
  font-size: 13px;
  font-weight: 700;
  color: #444;
  margin: 0 0 6px;
}

/* ---------- Form Controls ---------- */
.field-group {
  margin-bottom: 16px;
}

.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
}

.field-hint {
  font-size: 11px;
  color: #666;
  font-weight: 400;
  margin-left: 6px;
}

.field-input {
  width: 100%;
  border: 1px solid #d0d5e8;
  border-radius: 7px;
  padding: 8px 11px;
  font-size: 13px;
  font-family: inherit;
  color: #222;
  background: #fafbff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.field-input:focus {
  border-color: #3949ab;
  box-shadow: 0 0 0 3px rgba(57,73,171,0.12);
  background: #fff;
}
.field-input::placeholder { color: #bbb; }

textarea.field-input {
  resize: vertical;
  min-height: 70px;
  line-height: 1.55;
}

/* ---------- Rich Text Editor ---------- */
.rich-editor {
  width: 100%;
  border: 1px solid #d0d5e8;
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  color: #222;
  background: #fafbff;
  min-height: 64px;
  outline: none;
  line-height: 1.6;
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: pre-wrap;
  word-break: break-word;
}
.rich-editor:focus {
  border-color: #3949ab;
  box-shadow: 0 0 0 3px rgba(57,73,171,0.12);
  background: #fff;
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
  white-space: pre-line; /* 멀티라인 data-placeholder(
) 정상 표시 */
}

/* 일정 콘텐츠 전용 — 본문 블록처럼 넉넉한 입력 영역 + 살짝 큰 글자.
 * 사용자가 라벨(일시/장소/대상/비용)+값을 자유롭게 편집하도록 한 영역에 통합. */
.schedule-content-editor {
  min-height: 200px;
  font-size: 14px;
  padding: 14px 16px;
}

/* 글머리 종류별 좌측 편집기 시각화 — `data-bullet` 속성에 맞춰 미리보기와 동일한
 * 모양으로 표시. 안 주면 브라우저 기본(disc, ●) 으로 모두 동일하게 보여 사용자가
 * dash/check 버튼 누른 결과를 확인할 수 없다. disc 는 브라우저 기본을 그대로 쓰고
 * 나머지 3종만 override. */
.rich-editor ul[data-bullet="dash"],
.rich-editor ul[data-bullet="check"] {
  list-style: none;
  padding-left: 1.2em;
}
.rich-editor ul[data-bullet="dash"] > li::before {
  content: "-";
  display: inline-block;
  width: 0.9em;
  margin-left: -0.9em;
  color: #222;
}
.rich-editor ul[data-bullet="check"] > li::before {
  content: "✓";
  display: inline-block;
  width: 1.2em;
  margin-left: -1.2em;
  color: #16a34a;
  font-weight: 700;
}
.rich-editor ul[data-bullet="circle"] {
  list-style-type: circle;
}

/* contenteditable 안 anchor — 일반 웹 하이퍼링크처럼 보이고 동작.
 * cursor:pointer 로 "클릭 가능" 시각 피드백. 클릭 시 캐럿 이동 대신 popover 가 떠서
 * [열기]/[편집]/[제거] 선택(editor.js _showLinkPopover). 사용자가 anchor 텍스트를
 * 직접 클릭해 캐럿을 박을 수 없게 되지만 — 편집은 popover 의 [편집] 버튼이 모달을 열어
 * URL·표시 텍스트 둘 다 변경 가능. */
.rich-editor a {
  color: #000cff;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.rich-editor a:hover {
  background: rgba(0, 12, 255, 0.08);
  border-radius: 2px;
}

/* 링크 액션 popover — anchor 클릭 시 그 아래 뜸 (Google Docs 식 mini 액션 바) */
#rich-link-popover {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid #d0d5e8;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  padding: 4px;
  display: none;
  font-family: 'Pretendard Variable', Pretendard, sans-serif;
}
#rich-link-popover.visible {
  display: flex;
  gap: 2px;
  align-items: center;
}
#rich-link-popover .rlp-url {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #555;
  padding: 4px 10px;
  font-size: 12px;
  border-right: 1px solid #e5e9f5;
  margin-right: 4px;
}
#rich-link-popover button {
  background: #fff;
  border: none;
  padding: 6px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  color: #303A83;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
}
#rich-link-popover button:hover {
  background: #EDF6FF;
}
#rich-link-popover button.rlp-remove {
  color: #c33;
}
#rich-link-popover button.rlp-remove:hover {
  background: #fef2f2;
}

.heading-editor {
  font-size: 16px;
  font-weight: 700;
  color: var(--brand);
  min-height: 42px;
}

.rich-toolbar-hint {
  font-size: 11px;
  color: #9fa8da;
  margin-bottom: 6px;
  padding: 4px 0;
}

/* ---------- Gallery Direct URL section ---------- */
.gallery-direct-url {
  margin-top: 12px;
  border-top: 1px solid #eee;
  padding-top: 10px;
}
.gallery-direct-url > summary {
  font-size: 13px;
  color: #3949ab;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  list-style: none;
}
.gallery-direct-url > summary::-webkit-details-marker { display: none; }
.gallery-direct-url > summary::before {
  content: '▸ ';
  display: inline-block;
  transition: transform 0.15s;
}
.gallery-direct-url[open] > summary::before { transform: rotate(90deg); }

/* ---------- Image Preview ---------- */
.img-preview {
  display: none;
  width: 100%;
  max-height: 160px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  margin-top: 8px;
  background: #f5f5f5;
}
.img-preview.visible { display: block; }

/* 이미지 미리보기 wrapper — 미해결 수정요청 오버레이 + 클릭 업로드용 */
.img-preview-wrap {
  position: relative;
  display: block;
  margin-top: 8px;
  line-height: 0;
  border-radius: 8px;
  /* 하이라이트가 자식 이미지의 둥근 모서리를 따라가도록 wrap에 적용 */
}
.img-preview-wrap > .img-preview,
.img-preview-wrap > .block-img-preview {
  margin-top: 0;
}
/* 미해결 수정요청 — 좌측 폼 패널 미리보기는 보조 표시 (메인 강조는 우측 미리보기 iframe) */
.img-preview-wrap.has-pending-req {
  box-shadow: 0 0 0 2px #f59e0b;
}
/* 클릭 가능한 미리보기 (디자이너 워크플로우: 이미지 클릭 = 새 이미지 업로드) */
.img-preview-wrap.is-clickable > .img-preview,
.img-preview-wrap.is-clickable > .block-img-preview {
  cursor: pointer;
  transition: filter 0.18s ease;
}
.img-preview-wrap.is-clickable:hover > .img-preview,
.img-preview-wrap.is-clickable:hover > .block-img-preview {
  filter: brightness(0.92);
}
/* hover 안내 라벨 — 이미지 우측 하단 코너 (다른 영역 침범 방지) */
.img-preview-wrap.is-clickable::after {
  content: "📁 교체";
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(26, 35, 126, 0.88);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.16s ease;
  white-space: nowrap;
  max-width: calc(100% - 16px);
}
.img-preview-wrap.is-clickable:hover::after { opacity: 1; }

/* ---------- Block Cards (body blocks) ---------- */
#body-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 40px;
}

#body-blocks:empty::after {
  content: "아직 본문 블록이 없습니다. 위의 버튼으로 블록을 추가하세요.";
  display: block;
  text-align: center;
  color: #bbb;
  font-size: 13px;
  padding: 32px 16px;
  border: 2px dashed #e0e4f0;
  border-radius: 10px;
  background: #fafbff;
}

.block-card {
  background: #fff;
  border: 1px solid #dde2ee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(26,35,126,0.05);
  transition: box-shadow 0.15s, border-color 0.15s;
}
.block-card:hover {
  box-shadow: 0 4px 14px rgba(26,35,126,0.1);
  border-color: #c5cae9;
}

/* seed 블록 (새 프로젝트 진입 시 자동 채워진 예시) — 점선 테두리 + 헤더에 배지로 구분.
   사용자가 한 번이라도 input 하면 createBlock 핸들러가 data-seed 를 제거 → 정상 상태로 복귀. */
.block-card[data-seed="true"] {
  border-style: dashed;
  border-color: #f59e0b;
  background: #fffdf6;
}
.block-card[data-seed="true"] .block-header::after {
  content: '예시 — 클릭해 수정하면 발송본에 반영, 그대로 두면 자동 제외';
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}
.block-card[data-seed="true"] .rich-editor {
  color: #9a8c5e;
  font-style: italic;
}

.block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #f5f6fd;
  border-bottom: 1px solid #edf0fb;
}

.block-body {
  padding: 12px;
}

/* Drag Handle */
.drag-handle {
  cursor: grab;
  color: #b0bec5;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
  user-select: none;
  flex-shrink: 0;
  letter-spacing: -1px;
}
.drag-handle:active { cursor: grabbing; }

.sortable-ghost {
  opacity: 0.35;
  background: #e8eaf6 !important;
}
.sortable-chosen {
  box-shadow: 0 6px 24px rgba(26,35,126,0.18) !important;
}

/* Block type select */
.block-type-select {
  flex: 1;
  border: 1px solid #d0d5e8;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: inherit;
  color: #333;
  background: #fff;
  cursor: pointer;
  outline: none;
}
.block-type-select:focus { border-color: #3949ab; }

/* Block delete button */
.block-delete {
  background: none;
  border: none;
  color: #ef5350;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: background 0.12s;
}
.block-delete:hover { background: #ffebee; }

/* Block design request chip (image/table 블록 헤더) */
.block-design-req {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: #fff8e1;
  border: 1px solid #f0c060;
  color: #7a5300;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.block-design-req:hover { background: #ffe9a8; border-color: #d99c20; }
/* 표 블록 — 이미지로 교체 (#4) */
.block-table-to-img {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e0f2fe;
  border: 1px solid #7dd3fc;
  color: #075985;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.block-table-to-img:hover { background: #bae6fd; border-color: #0284c7; }
.block-table-to-img.pulse-attention {
  animation: pulse-attention-anim 0.6s ease-in-out 0s 4 alternate;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.4);
}
@keyframes pulse-attention-anim {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.block-design-req-badge {
  display: inline-block;
  min-width: 14px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d32f2f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

/* Separator visual */
.sep-visual {
  height: 2px;
  background: linear-gradient(90deg, #e8eaf6, #9fa8da, #e8eaf6);
  border-radius: 2px;
  margin: 8px 0;
}

/* Coming soon block */
.coming-soon-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 8px;
}

/* Image block */
.block-img-preview {
  display: none;
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e0e4f0;
  margin-top: 8px;
  background: #f5f5f5;
}
.block-img-preview.visible { display: block; }

/* ---------- Add Block Buttons ---------- */
/* sec-body 안에서 sticky로 고정 — 스크롤 시 라벨 자동 압축
 * #editor-body의 padding-top(20px)을 음수 top/margin으로 상쇄해
 * sec-nav(상단 탭) 바로 아래에 딱 붙도록 한다. */
.add-block-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.add-block-row {
  position: sticky;
  top: -20px;
  z-index: 12;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 28px 20px 8px;          /* top 28 = 보충(20) + 실제여백(8) */
  margin: -20px -20px 14px;        /* 좌우/위로 20px 확장 */
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
/* sticky가 engaged 된 상태 — 라벨 즉시 숨김(애니메이션 X) */
.add-block-row.is-stuck {
  flex-wrap: nowrap;
  padding: 8px 20px;               /* stuck 상태에선 위쪽이 sec-nav에 딱 붙으니 padding 균형 */
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid #e0e4f0;
}
.add-block-row.is-stuck::-webkit-scrollbar { height: 4px; }
.add-block-row.is-stuck::-webkit-scrollbar-thumb { background: #c5cae9; border-radius: 2px; }
.add-block-row.is-stuck .add-block-chip {
  padding: 6px 9px;
  gap: 0;
}
.add-block-row.is-stuck .add-block-chip .abc-label {
  display: none;                   /* 즉시 사라짐 — reflow 비용 큰 width transition 제거 */
}

/* 본문 블록 추가 칩 (icon + 한글 라벨) */
.add-block-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1.5px solid #c5cae9;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #3949ab;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s;
  font-family: inherit;
  line-height: 1.2;
  flex: 0 0 auto;
}
.add-block-chip .abc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  min-width: 16px;
}
.add-block-chip .abc-label {
  white-space: nowrap;
}
.add-block-chip:hover {
  background: #e8eaf6;
  border-color: #3949ab;
}
.add-block-chip:active {
  background: #c5cae9;
  transform: translateY(1px);
}
.add-block-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
/* 핵심 3개 강조 (소제목/표/단락) */
.add-block-chip.is-primary {
  background: #e8eaf6;
  border-color: #5c6bc0;
  color: #1a237e;
}
.add-block-chip.is-primary:hover {
  background: #c5cae9;
  border-color: #3949ab;
}

/* ---------- Growth Points ---------- */
#growth-points-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  min-height: 20px;
}

.point-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fafbff;
  border: 1px solid #dde2ee;
  border-radius: 8px;
  padding: 6px 8px;
  transition: box-shadow 0.12s;
}
.point-row:hover { box-shadow: 0 2px 8px rgba(26,35,126,0.08); }

.point-row .drag-handle { color: #9fa8da; font-size: 14px; }

.gp-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #222;
  outline: none;
  min-width: 0;
  line-height: 1.5;
  min-height: 20px;
  white-space: pre-wrap;
  word-break: break-word;
}
.gp-input::placeholder { color: #bbb; }
.gp-input[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: #bbb;
  pointer-events: none;
}

.gp-delete {
  background: none;
  border: none;
  color: #ef9a9a;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 5px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
.gp-delete:hover { color: #ef5350; background: #ffebee; }

.add-gp-btn {
  background: #fff;
  border: 1.5px dashed #9fa8da;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #5c6bc0;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background 0.14s;
}
.add-gp-btn:hover { background: #e8eaf6; }

/* ---------- Preview Panel (right) ---------- */
#preview-panel {
  display: grid;
  grid-template-rows: 44px 1fr;
  overflow: hidden;
  background: #e9ecef;
}

#preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: #fff;
  border-bottom: 1px solid #dde2ee;
  flex-shrink: 0;
}

.view-btn {
  background: transparent;
  border: 1.5px solid #d0d5e8;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.14s;
}
.view-btn:hover { border-color: #3949ab; color: #3949ab; }
.view-btn.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

#preview-version-toggle {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.preview-ver-btn {
  background: transparent;
  border: 1.5px solid #d0d5e8;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.14s;
}
.preview-ver-btn:hover { border-color: #00796b; color: #00796b; }
.preview-ver-btn.active {
  background: #00796b;
  border-color: #00796b;
  color: #fff;
}

#preview-label {
  margin-left: auto;
  font-size: 12px;
  color: #9e9e9e;
  display: flex;
  align-items: center;
  gap: 5px;
}

#status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ccc;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.2s;
}
#status-dot.updating {
  background: #fb8c00;
  animation: pulse 1s infinite;
}
#status-dot.ok { background: var(--accent-green); animation: none; }
#status-dot.error { background: #ef5350; animation: none; }

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

#preview-container {
  position: relative;
  overflow: auto;
  background: #e9ecef;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 16px;
}

#preview-frame {
  background: #fff;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.14);
  height: auto;
  min-height: calc(100vh - 56px - 44px - 32px);
  transition: max-width 0.3s ease;
}

/* Mobile preview mode */
#preview-frame.mobile-mode {
  max-width: 375px !important;
}

/* ---------- Image Request Button + Badge (Batch 5 / 디자이너 노티) ---------- */
.btn-img-request {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff8e1;
  border: 1.5px solid #f0c060;
  border-radius: 6px;
  color: #7a5300;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.14s, border-color 0.14s;
}
.btn-img-request:hover {
  background: #ffe9a8;
  border-color: #d99c20;
}
.img-req-badge {
  display: inline-block;
  min-width: 14px;
  padding: 0 5px;
  border-radius: 999px;
  background: #d32f2f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}


/* ---------- Floating Text Toolbar ---------- */
#float-toolbar {
  position: fixed;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 2px;
  background: #263238;
  border-radius: 8px;
  padding: 5px 7px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  pointer-events: auto;
}
#float-toolbar.visible { display: flex; }

.toolbar-btn {
  background: transparent;
  border: none;
  color: #eceff1;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s;
  line-height: 1;
}
.toolbar-btn:hover { background: rgba(255,255,255,0.15); }
.toolbar-btn.active { background: rgba(255,255,255,0.22); color: #80cbc4; }

.toolbar-btn[data-cmd="italic"] { font-style: italic; }
.toolbar-btn[data-cmd="underline"] { text-decoration: underline; }

.toolbar-sep {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.2);
  margin: 0 3px;
}

.toolbar-size-select {
  background: transparent;
  color: #eceff1;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 5px;
  padding: 3px 4px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
.toolbar-size-select option { color: #222; }

/* ---------- Floating toolbar arrow ---------- */
#float-toolbar::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: #263238 transparent transparent;
}

/* ---------- Emoji Picker Panel ---------- */
#emoji-picker-panel {
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.16);
  padding: 10px;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
#emoji-picker-panel.hidden { display: none; }

.emoji-cat-label {
  font-size: 10px;
  font-weight: 600;
  color: #666;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 2px 2px;
  display: block;
}
.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 6px;
}
.emoji-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}
.emoji-btn:hover { background: #f0f2f5; }

/* 검색 input — 즐겨찾기와 전체 사이에 고정 위치 */
.emoji-search-wrap {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 6px 0 4px;
  margin: 4px 0 0;
  border-bottom: 1px solid #f0f0f0;
  z-index: 1;
}
.emoji-search {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  font-size: 13px;
  border: 1px solid #d0d4dc;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
.emoji-search:focus { border-color: #3949ab; }

/* ---------- Utility ---------- */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }

/* Small textarea variant */
textarea.field-input.small { min-height: 52px; font-size: 12.5px; }

/* Section sub-label (e.g. "optional") */
.opt-badge {
  font-size: 10px;
  background: #e8eaf6;
  color: #5c6bc0;
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 5px;
}

/* Scrollbar for editor-body */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c5cae9; border-radius: 4px; }

/* ---------- PPTX Upload Button (sizing override; 톤은 .tb-ghost) ---------- */
#btn-upload-pptx { font-weight: 600; }

/* ---------- Filled Section Tab Indicator ---------- */
.sec-tab.filled::after {
  content: '·';
  color: var(--accent-green);
  font-size: 20px;
  line-height: 1;
  margin-left: 2px;
  vertical-align: middle;
}

/* ---------- Shortcut Cheatsheet ---------- */
.shortcut-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 6px;
}
.shortcut-table td {
  padding: 8px 6px;
  font-size: 13px;
  color: #444;
  border-bottom: 1px solid #eee;
}
.shortcut-table td:first-child {
  white-space: nowrap;
  width: 40%;
}
.shortcut-table kbd {
  display: inline-block;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 11.5px;
  color: #333;
  background: #f3f4fa;
  border: 1px solid #d0d5e8;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  margin: 0 1px;
  min-width: 18px;
  text-align: center;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  max-width: 540px;
  width: 90%;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}
.toast-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}
.toast-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-success { background: #1b5e20; color: #fff; }
.toast-info    { background: var(--brand); color: #fff; }
.toast-error   { background: #b71c1c; color: #fff; }

/* ---------- Image Field Row (URL + 미리보기 버튼) ---------- */
.img-field-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.img-field-row .field-input { flex: 1; }

.btn-img-preview {
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid #9fa8da;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #3949ab;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.btn-img-preview:hover { background: #e8eaf6; }

.img-upload-notice {
  font-size: 11px;
  color: #9e9e9e;
  margin-top: 5px;
  line-height: 1.5;
}

/* ---------- 자동 생성 필드 플래시 ---------- */
@keyframes autoFillFlash {
  0%   { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(26,35,126,0.18); }
  100% { border-color: #dde2ee; box-shadow: none; }
}
.field-auto-filled {
  animation: autoFillFlash 1.5s ease-out forwards;
}

/* ---------- 디자인 버전 토글 ---------- */
.version-toggle {
  display: flex;
  gap: 0;
  border: 1.5px solid #d0d5e8;
  border-radius: 8px;
  overflow: hidden;
}
.version-btn {
  flex: 1;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  background: #f8f9fc;
  color: #666;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.version-btn + .version-btn {
  border-left: 1.5px solid #d0d5e8;
}
.version-btn.active {
  background: #303A83;
  color: #fff;
  font-weight: 600;
}
.version-btn:not(.active):hover {
  background: #eef0f8;
}

/* ---------- 최근 이미지 버튼 ---------- */
.btn-img-recent {
  flex-shrink: 0;
  background: #f5f6fa;
  border: 1px solid #dde2ee;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.14s;
  line-height: 1;
}
.btn-img-recent:hover { background: #e8eaf6; }

/* ---------- Field Detail Hint (URL 설명 등) ---------- */
.field-detail-hint {
  font-size: 11px;
  color: #757575;
  margin-top: 5px;
  line-height: 1.6;
}

/* ---------- Subsection Divider (교육 & 일정 구분선) ---------- */
.subsec-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  margin: 24px 0 18px;
}
.subsec-divider::before,
.subsec-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dde2ee;
}
.subsec-divider::before { flex: 0 0 0; }

/* ---------- sec-edu optional-extras 접힘 ---------- */
.optional-extras {
  border: 1px solid #e8eaf6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #fafafa;
}
.optional-extras summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  list-style: none;
  user-select: none;
}
.optional-extras summary::-webkit-details-marker { display: none; }
.optional-extras[open] summary { color: var(--brand); }

/* ---------- 고급 디자인 편집 접힘 (신청버튼/피드백버튼) ---------- */
.advanced-design {
  border: 1px solid #ffe0b2;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 14px;
  background: #fff8f0;
}
.advanced-design summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #e65100;
  list-style: none;
  user-select: none;
}
.advanced-design summary::-webkit-details-marker { display: none; }
.advanced-design[open] summary { color: #bf360c; }
.advanced-design input[type="color"] {
  padding: 2px;
  cursor: pointer;
}

/* ---------- 임시 이미지 URL 경고 ---------- */
.temp-url {
  border-color: #fb8c00 !important;
  background: #fff8f0 !important;
}
.temp-url-warning {
  font-size: 11px;
  color: #e65100;
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 5px;
  padding: 5px 10px;
  margin-top: 6px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Restore Banner ---------- */
#restore-banner {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: 13px;
  color: #664d03;
}
#restore-banner.hidden { display: none; }
#restore-banner span { flex: 1; }
#btn-restore {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#btn-restore:hover { background: #283593; }
#btn-restore-dismiss {
  background: transparent;
  color: #664d03;
  border: 1px solid #ffc107;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
#btn-restore-dismiss:hover { background: #fff0b0; }

/* ---------- Undo/Redo Buttons ---------- */
.btn-icon-action {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 7px;
  padding: 6px 10px;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.14s, border-color 0.14s, opacity 0.14s;
  line-height: 1;
}
.btn-icon-action:hover:not(:disabled) { background: rgba(255,255,255,0.18); border-color: #fff; }
.btn-icon-action:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Completion Badge ---------- */
.completion-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.completion-badge.complete { background: var(--accent-green); color: #fff; }
.completion-badge.incomplete { background: rgba(255,255,255,0.18); color: #fff; }

/* ---------- Required Field ---------- */
.field-label.required::after {
  content: ' *';
  color: #ef5350;
  font-weight: 700;
}
.field-required-empty {
  border-color: #ef5350 !important;
  box-shadow: 0 0 0 3px rgba(239,83,80,0.15) !important;
}
@keyframes field-highlight-fade {
  0%   { box-shadow: 0 0 0 3px rgba(255,152,0,0.7); border-color: #fb8c00; }
  60%  { box-shadow: 0 0 0 3px rgba(255,152,0,0.4); border-color: #fb8c00; }
  100% { box-shadow: none; border-color: inherit; }
}
.field-navigate-highlight {
  animation: field-highlight-fade 1.8s ease forwards;
}

/* ---------- Validation Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.modal-title {
  font-size: 16px;
  font-weight: 700;
  color: #b71c1c;
  margin-bottom: 10px;
}
.modal-desc {
  font-size: 13px;
  color: #444;
  margin-bottom: 10px;
}
.modal-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 13px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.8;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn-modal-continue {
  background: #fff;
  border: 1.5px solid #9fa8da;
  color: #3949ab;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.btn-modal-continue:hover { background: #e8eaf6; }
.btn-modal-cancel, .btn-modal-primary {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.14s;
}
.btn-modal-cancel:hover, .btn-modal-primary:hover { background: #283593; }

/* ---------- Example File List ---------- */
.example-file-item {
  list-style: none;
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.example-file-item:hover {
  background: #e8eaf6;
  color: var(--brand);
}

/* ---------- Highlight Block (in editor) ---------- */
.highlight-editor {
  background: #EDF6FF !important;
  border-color: #90caf9 !important;
  border-radius: 20px !important;
  min-height: 80px;
}
.highlight-editor:focus {
  border-color: #42a5f5 !important;
  box-shadow: 0 0 0 3px rgba(66,165,245,0.2) !important;
}

/* ---------- Quote Block (in editor) ---------- */
.quote-editor {
  border-left: 4px solid var(--brand) !important;
  border-radius: 0 7px 7px 0 !important;
  padding-left: 16px !important;
  font-style: italic;
  background: #f8f9ff !important;
}

/* ---------- Tab Status Dots ---------- */
.sec-tab {
  position: relative;
}

.tab-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background 0.2s;
}

.sec-tab.active .tab-dot { opacity: 0.85; }

.tab-dot.complete {
  background: #69f0ae;
}

.tab-dot.partial {
  background: #ffd740;
}

/* ---------- Completeness Popover ---------- */
#completeness-popover {
  position: fixed;
  z-index: 99980;
  background: #fff;
  border: 1px solid #e0e4f0;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  padding: 14px 16px;
  min-width: 270px;
  max-width: 340px;
  font-size: 13px;
}
#completeness-popover.hidden { display: none; }

.popover-title {
  font-size: 12px;
  font-weight: 700;
  color: #b71c1c;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #fce4e4;
}

.popover-all-done {
  color: #2e7d32;
  font-weight: 600;
  font-size: 13px;
  margin: 0;
}

.popover-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  color: #333;
  font-size: 12px;
  border-bottom: 1px solid #f5f5f5;
}
.popover-item:last-child { border-bottom: none; }
.popover-item span { flex: 1; }
.popover-item button {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s;
}
.popover-item button:hover { background: #283593; }

/* ---------- Save Toast (우측 하단) ---------- */
#save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: #263238;
  color: #eceff1;
  padding: 9px 15px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
#save-toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Completion Badge (clickable) ---------- */
.completion-badge {
  cursor: pointer;
  position: relative;
}
.completion-badge:hover {
  filter: brightness(1.15);
}

/* ---------- Completeness Popover ---------- */
#completeness-popover {
  position: fixed;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 260px;
  z-index: 300;
  padding: 8px 0;
  font-size: 13px;
}
#completeness-popover.hidden { display: none; }

.popover-title {
  font-size: 12px;
  font-weight: 700;
  color: #555;
  padding: 4px 16px 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 4px;
}

.popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  cursor: default;
  transition: background 0.12s;
}
.popover-item.done { color: #999; }
.popover-item.missing {
  color: var(--brand);
  font-weight: 500;
  cursor: pointer;
}
.popover-item.missing:hover { background: #f5f6fd; }

.popover-icon { flex-shrink: 0; font-size: 13px; }
.popover-label { flex: 1; }
.popover-tab {
  font-size: 11px;
  color: #9fa8da;
  white-space: nowrap;
  margin-left: auto;
}

.popover-all-done {
  padding: 12px 16px;
  color: var(--accent-green);
  font-weight: 600;
  font-size: 13px;
}

.field-navigate-highlight {
  border-color: #ff9800 !important;
  box-shadow: 0 0 0 3px rgba(255,152,0,0.25) !important;
  transition: border-color 0.1s, box-shadow 0.1s;
}

/* ---------- Button Block Preview (in editor) ---------- */
.block-btn-preview {
  margin-top: 10px;
  text-align: center;
  padding: 6px 0;
}
.block-btn-demo {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  pointer-events: none;
}

/* ---------- Table Block ---------- */
.block-table-toolbar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.btn-table-ctrl {
  font-size: 12px; padding: 3px 9px; border: 1px solid #ccc;
  border-radius: 4px; background: #f5f5f5; cursor: pointer; color: #333;
}
.btn-table-ctrl:hover { background: #e0e0e0; }
.block-table-grid { width: 100%; border-collapse: collapse; font-size: 13px; }
.block-table-grid td { padding: 2px; }
.block-table-cell {
  width: 100%; padding: 5px 7px; border: 1px solid #ccc;
  border-radius: 3px; font-size: 13px; box-sizing: border-box;
}
.block-table-cell:focus { outline: none; border-color: #90caf9; }
.table-header-row .block-table-cell { background: #e8eaf6; font-weight: 600; }

/* 셀 선택 시각화 — 클릭/Shift+클릭으로 사각 범위 선택 (병합/나누기용) */
.block-table-grid td.selected { background: rgba(92, 107, 192, 0.15); outline: 2px solid #5c6bc0; outline-offset: -2px; }
.block-table-grid td.selected.anchor { outline-color: #3f51b5; outline-width: 2px; }
.table-toolbar-sep { display: inline-block; width: 1px; height: 18px; background: #d0d0d0; align-self: center; margin: 0 2px; }

/* ---------- Field Flash (미리보기 클릭 → 왼쪽 필드 하이라이트) ---------- */
@keyframes field-flash {
  0%   { background-color: transparent; }
  25%  { background-color: #e8eaf6; }
  100% { background-color: transparent; }
}
.field-flash {
  animation: field-flash 1.2s ease;
  outline: 2px solid #3949ab !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Block Type Badge ---------- */
.block-type-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1.5px solid;
  font-size: 13px;
  flex-shrink: 0;
}

/* ---------- Block Highlighted (body block navigate) ---------- */
.block-card.block-highlighted {
  box-shadow: 0 0 0 3px var(--accent-green), 0 4px 20px rgba(67,160,71,0.2) !important;
  border-color: var(--accent-green) !important;
  transition: box-shadow 0.2s, border-color 0.2s;
}

/* ---------- Tutorial System ---------- */
#btn-tutorial {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* 섹션 드래그 핸들 */
.sec-drag-handle {
  float: right;
  margin-left: 6px;
  color: #bbb;
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  user-select: none;
}
.sec-drag-handle:active { cursor: grabbing; }
#sec-sortable-zone .sortable-ghost {
  opacity: 0.4;
  background: #e8eaf6;
  border-radius: 6px;
}

#btn-tutorial:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
#btn-tutorial.active {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffb300;
}

/* Tutorial mode: annotated elements get help cursor + left highlight on hover */
.tutorial-mode [data-tutorial] { cursor: help; }
.tutorial-mode [data-tutorial]:hover {
  border-left: 3px solid #3949ab;
  padding-left: 6px;
  transition: border-left 0.12s, padding-left 0.12s;
}

/* Tooltip card */
#tutorial-tooltip {
  position: fixed;
  z-index: 3000;
  width: 300px;
  max-width: calc(50vw - 20px);
  background: #fff;
  border: 1.5px solid #c5cae9;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(26,35,126,0.15);
  pointer-events: auto;
}
#tutorial-tooltip.hidden { display: none; }

.tt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.tt-icon  { font-size: 18px; flex-shrink: 0; }
.tt-title { font-size: 14px; color: var(--brand); }

.tt-desc {
  font-size: 12px;
  color: #444;
  line-height: 1.65;
  margin: 0;
}

.tt-img {
  margin-top: 10px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  display: block;
}

/* ── 유저 정보 & 역할 배지 ───────────────────────────────── */
.user-info {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
}
.user-info.hidden { display: none; }

#user-name {
  font-weight: 600;
  color: #fff;
}

.role-badge {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.role-marketer { background: #e8f5e9; color: #2e7d32; }
.role-designer { background: #e3f2fd; color: #1565c0; }
.role-author   { background: #fff3e0; color: #e65100; }

.btn-logout {
  font-size: 11px;
  padding: 3px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  color: #666;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-logout:hover { background: #f0f0f0; }

/* ── 로그인 모달 ───────────────────────────────────────── */
#login-modal {
  z-index: 9999;
}
#login-error {
  min-height: 18px;
}

/* ── 메모 토글 버튼 (비활성 강조) ─────────────────────────── */
#btn-feedback-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 유저 그룹 내 로그아웃 위치 조정 ────────────────── */
.group-user .user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 드래프트 카드 (새 메모 작성) ────────────────────── */
.annotation-card.draft {
  background: #fff;
  border-color: #5c6bc0;
}
.annotation-card.draft .ann-card-header {
  background: #e8eaf6;
  border-bottom-color: #5c6bc0;
}
.ann-draft-section {
  width: 100%;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #ddd;
  border-radius: 6px;
  margin-bottom: 6px;
  background: #fff;
  font-family: inherit;
  color: #555;
  box-sizing: border-box;
}
/* 디자인 요청 드래프트 카드 안내문 */
.ann-draft-hint {
  font-size: 11.5px;
  color: #7a5300;
  background: #fff8e1;
  border: 1px solid #f0c060;
  border-radius: 6px;
  padding: 4px 7px;
  margin-bottom: 6px;
  line-height: 1.4;
}
/* image_request 드래프트 카드 톤 */
.annotation-card.draft[data-draft-kind="image_request"] {
  border-color: #f0c060;
}
.annotation-card.draft[data-draft-kind="image_request"] .ann-card-header {
  background: #fff8e1;
  border-bottom-color: #f0c060;
}
.ann-draft-input,
.ann-edit-input {
  width: 100%;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  resize: none;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 72px;
}
.ann-draft-input:focus,
.ann-edit-input:focus {
  outline: none;
  border-color: #5c6bc0;
}
.ann-draft-actions,
.ann-edit-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
}
.ann-btn-draft-submit,
.ann-btn-edit-save {
  padding: 4px 12px;
  background: #5c6bc0;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.ann-btn-draft-submit:hover,
.ann-btn-edit-save:hover { background: #3f51b5; }
.ann-btn-edit-cancel {
  padding: 4px 10px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #666;
}
.ann-btn-edit-cancel:hover { background: #f5f5f5; }
.ann-time-edited {
  font-size: 10px;
  color: #aaa;
  font-style: italic;
}

/* ── Annotations Overlay ─────────────────────────────── */
#annotations-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* height는 updatePreview load 핸들러에서 iframe 높이에 맞게 동적 설정 */
  pointer-events: none;
  z-index: 10;
}

/* ── Annotation Card ──────────────────────────────────── */
.annotation-card {
  position: absolute;
  pointer-events: auto;
  width: 300px;
  background: #fffde7;
  border: 1px solid var(--ann-border-color, #f9a825);
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  font-size: 13px;
  font-family: inherit;
  user-select: none;
  transition: box-shadow 0.15s;
  z-index: 11;
}
.annotation-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.22); }
.annotation-card.dragging {
  box-shadow: 0 10px 32px rgba(0,0,0,0.30);
  opacity: 0.92;
  z-index: 100;
}

.ann-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* 컨트롤이 안 들어가면 자동으로 다음 줄로 */
  gap: 5px 4px;
  padding: 6px 8px;
  background: var(--ann-header-bg, #fff9c4);
  border-bottom: 1px solid var(--ann-border-color, #f9a825);
  border-radius: 8px 8px 0 0;
  cursor: grab;
  box-sizing: border-box;
  max-width: 100%;
}
.annotation-card.dragging .ann-card-header { cursor: grabbing; }

/* 역할별 색상은 JS에서 CSS 커스텀 프로퍼티로 설정:
   --ann-header-bg, --ann-border-color */

.ann-drag-handle {
  color: #bbb;
  font-size: 14px;
  flex-shrink: 0;
}
.ann-author {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  flex: 1;
  min-width: 0;          /* flex shrink 활성화 — 긴 작가명도 ellipsis 처리되어 wrap 트리거 가능 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ann-section-tag {
  background: #e8eaf6;
  color: #3949ab;
  border-radius: 8px;
  font-size: 10px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* image_request 카드는 노란 톤으로 구분 */
.ann-kind-tag {
  border-radius: 8px;
  font-size: 10px;
  padding: 1px 6px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}
.ann-kind-tag.ann-kind-image {
  background: #f59e0b;
  color: #fff;
  border: 1px solid #d97706;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
}
/* 디자인 요청 카드 — 일반 메모와 한눈에 구분되는 강한 시각 톤 */
.annotation-card[data-kind="image_request"] {
  border: 2px solid #f59e0b;
  background: #fffbeb;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.18);
}
/* 좌측 노란 띠 — 디자인 요청임을 즉시 인지 */
.annotation-card[data-kind="image_request"]::before {
  content: "🎨 디자인 요청";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  padding: 2px 8px;
  border-radius: 6px 6px 0 0;
  text-align: left;
  line-height: 1.4;
  pointer-events: none;
}
.annotation-card[data-kind="image_request"] .ann-card-header {
  margin-top: 18px;            /* 상단 라벨 띠 만큼 여백 */
  background: #fef3c7;
  border-bottom: 1px solid #fcd34d;
}
.annotation-card[data-kind="image_request"] .ann-author {
  color: #78350f;
  font-weight: 700;
}
.ann-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;        /* 컨트롤은 항상 우측 끝 */
}
/* 디자인 요청 카드는 버튼이 많아 헤더 첫 줄을 벗어나기 쉬움 → 두 번째 줄에 우측 정렬 */
.annotation-card[data-kind="image_request"] .ann-controls {
  flex-basis: 100%;
  justify-content: flex-end;
  margin-left: 0;
  padding-top: 2px;
  border-top: 1px dashed rgba(0,0,0,0.06);
  margin-top: 2px;
}
.ann-btn-status,
.ann-btn-edit,
.ann-btn-delete,
.ann-btn-collapse {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px;
  color: #666;
  line-height: 1;
}
.ann-btn-status {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 11px;
  transition: filter 0.15s;
}
.ann-btn-status:hover   { filter: brightness(0.88); }
.ann-btn-edit:hover     { background: #e3f2fd; color: #1565c0; }
.ann-btn-delete:hover   { background: #ffcdd2; color: #c62828; }
.ann-btn-collapse:hover { background: #e0e0e0; }

/* status badge colours */
.ann-status-open    { background: #fee2e2; color: #b91c1c; }
.ann-status-fix     { background: #fef3c7; color: #92400e; }
.ann-status-discuss { background: #dbeafe; color: #1e40af; }
.ann-status-done    { background: #dcfce7; color: #166534; }

/* reply section */
.ann-replies { border-top: 1px solid rgba(0,0,0,0.08); padding: 6px 10px 4px; }
.ann-btn-replies-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #666;
  padding: 0;
}
.ann-btn-replies-toggle:hover { color: #444; }
.ann-replies-list { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; }
.ann-reply {
  background: rgba(0,0,0,0.04);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
}
.ann-reply-meta { font-size: 10px; color: #666; margin-bottom: 2px; }
.ann-reply-compose { display: flex; gap: 4px; margin-top: 4px; }
.ann-reply-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 12px;
  resize: none;
  min-height: 28px;
}
.ann-btn-reply-send {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.ann-btn-reply-send:hover { background: #2563eb; }

.ann-card-body {
  padding: 8px 10px;
  overflow: hidden;
  max-height: 2000px;
  transition: max-height 0.25s ease, padding 0.2s ease;
}
.ann-body-text {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-bottom: 4px;
}
.ann-reply-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.ann-time {
  font-size: 10px;
  color: #aaa;
}

/* ── 메모 첨부 예시 이미지 — 카드 본문 / 드래프트 입력 영역 공통 ─────── */
.ann-attach-strip,
.ann-draft-attach-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.ann-attach-strip:empty,
.ann-draft-attach-strip:empty { display: none; }

.ann-attach-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #d0d0d0;
  cursor: zoom-in;
  background: #f5f5f5;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.ann-attach-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.ann-draft-thumb-wrap { position: relative; }
.ann-draft-thumb-wrap .ann-attach-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}
.ann-draft-thumb-wrap .ann-attach-remove:hover { background: #c0392b; }

.ann-btn-draft-attach {
  background: #f1f3f5;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  color: #495057;
  margin-right: auto; /* 제출 버튼은 오른쪽, 첨부 버튼은 왼쪽 */
}
.ann-btn-draft-attach:hover:not(:disabled) { background: #e9ecef; }
.ann-btn-draft-attach:disabled { opacity: 0.5; cursor: not-allowed; }

/* 라이트박스 — body 직속, fixed overlay */
.ann-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.ann-lightbox.open { display: flex; }
.ann-lightbox-img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  background: #fff;
}
.ann-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.9);
  color: #222;
  font-size: 18px;
  cursor: pointer;
  line-height: 38px;
  padding: 0;
}
.ann-lightbox-close:hover { background: #fff; }

/* 접힌 상태 */
.annotation-card.collapsed .ann-card-body {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.annotation-card.collapsed .ann-card-header {
  border-bottom: none;
  border-radius: 8px;
}

/* 완료(resolved) 상태 — 역할 색상보다 우선 적용 */
.annotation-card.resolved {
  --ann-header-bg: #eeeeee !important;
  --ann-border-color: #bdbdbd !important;
  background: #f5f5f5;
  opacity: 0.75;
}
.annotation-card.resolved .ann-card-header {
  border-bottom-color: #bdbdbd;
}
.annotation-card.resolved .ann-author::before {
  content: '✓ ';
  color: var(--accent-green);
  font-weight: 700;
}
.annotation-card.resolved .ann-body-text {
  color: #9e9e9e;
  text-decoration: line-through;
}

/* ── 저장 드롭다운: 최근 auto-save 항목 ─────────────────── */
.dm-autosave-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.dm-autosave-item:hover { background: #f5f5f5; }
.dm-autosave-time {
  font-size: 11px;
  color: #aaa;
  white-space: nowrap;
}

/* ── 버전 히스토리 모달 ──────────────────────────────────── */
.version-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
}
.version-item:last-child { border-bottom: none; }
.version-item-icon { font-size: 16px; flex-shrink: 0; }
.version-item-info { flex: 1; min-width: 0; }
.version-item-label {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.version-item-meta {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.version-section-title {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 12px 4px;
}
.version-section-divider {
  border: none;
  border-top: 1px solid #eee;
  margin: 4px 0;
}
.btn-version-restore {
  padding: 4px 10px;
  font-size: 12px;
  background: #f0f4ff;
  color: #3f51b5;
  border: 1px solid #c5cae9;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-version-restore:hover { background: #e3e8ff; }

/* ── 프로젝트 선택 화면 (로그인 후) ─────────────────────────────── */
.project-select-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.project-select-card:hover { background: #f8f9ff; border-color: #9fa8da; }
.psc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.psc-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--brand);
}
.psc-status {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.psc-status.active  { background: #e8f5e9; color: #2e7d32; }
.psc-status.ended   { background: #fce4ec; color: #b71c1c; }
.psc-status.planned { background: #f5f5f5; color: #757575; }

/* 프로젝트 진행 상태 배지 (초안제출/피드백/최종/발송완료) */
.psc-status-badge {
  font-size: 13px;
  padding: 5px 13px;
  border-radius: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
  border: 1px solid transparent;
  line-height: 1.3;
}
.psc-status-draft    { background: #f3f4f6; color: #374151; border-color: #e5e7eb; }
.psc-status-feedback { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.psc-status-final    { background: #d1fae5; color: #065f46; border-color: #a7f3d0; }
.psc-status-sent     { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }

/* 메타 행: 라벨-값 구조로 가독성 개선 */
.psc-meta {
  font-size: 14px;
  color: #444;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  line-height: 1.6;
  margin-top: 4px;
}
.pm-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
}
.pm-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8a8f96;
}
.pm-value { color: #222; font-weight: 600; font-size: 14px; }
.psc-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.btn-psc-load {
  padding: 6px 18px;
  background: var(--brand);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-psc-load:hover   { background: #283593; }
.btn-psc-load:disabled { background: #9fa8da; cursor: default; }
.btn-psc-edit {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #bbb;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #555;
}
.btn-psc-edit:hover { background: #f5f5f5; }
.btn-psc-delete {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid #e0b4b4;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #b91c1c;
  margin-right: auto;  /* 왼쪽 정렬 (수정/편집 시작과 분리) */
}
.btn-psc-delete:hover { background: #fef2f2; border-color: #fca5a5; }

/* 발송완료 프로젝트 그룹 (접힘) */
.psc-sent-group {
  list-style: none;
  margin-top: 12px;
}
.psc-sent-details {
  border: 1px dashed #d0d0d0;
  border-radius: 8px;
  background: #fafbfc;
}
.psc-sent-summary {
  cursor: pointer;
  padding: 10px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #555;
  user-select: none;
}
.psc-sent-summary::-webkit-details-marker { display: none; }
.psc-sent-chevron {
  display: inline-block;
  font-size: 11px;
  color: #888;
  transition: transform 0.15s;
  width: 10px;
}
.psc-sent-details[open] .psc-sent-chevron { transform: rotate(90deg); }
.psc-sent-title { font-weight: 600; color: #333; }
.psc-sent-hint {
  margin-left: auto;
  font-size: 11.5px;
  color: #888;
}
.psc-sent-details[open] .psc-sent-hint::after  { content: '접기'; }
.psc-sent-details:not([open]) .psc-sent-hint::after { content: '펼치기'; }
.psc-sent-list { padding: 0 12px 12px !important; }
.psc-sent-list .project-select-card {
  margin-bottom: 6px;
  opacity: 0.82;
}
.psc-sent-list .project-select-card:last-child { margin-bottom: 0; }

/* 프로젝트 카드 상태 배지 클릭 가능 (마케터) */
.psc-status-badge.psc-status-clickable {
  cursor: pointer;
  font-family: inherit;
  line-height: 1.3;
}
.psc-status-badge.psc-status-clickable::after {
  content: '▾';
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.65;
}
.psc-status-badge.psc-status-clickable:hover { filter: brightness(0.94); }

/* 상태 변경 팝업 (카드 배지에서 열림) */
.cp-status-popup {
  position: absolute;
  z-index: 100000;  /* .modal-overlay(99990) 위로 */
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14), 0 2px 6px rgba(0,0,0,0.08);
  padding: 6px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cp-status-popup-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #9aa0a6;
  text-transform: uppercase;
  padding: 4px 8px 6px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 2px;
}
.cp-status-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
}
.cp-status-opt:hover:not(:disabled) { background: #f5f5f7; }
.cp-status-opt:disabled { cursor: default; opacity: 0.75; }
.cp-status-opt.is-current { background: #f0f4ff; }
.cp-status-check {
  font-size: 10.5px;
  color: #666;
  font-weight: 600;
}

/* ── 이미지 URL 잠금 상태 ───────────────────────────────────── */
.img-url-locked input[type="url"] {
  background: #f0f4ff;
  color: #3949ab;
  cursor: default;
}
.btn-img-unlock {
  display: none;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 12px;
  background: #fff3e0;
  border: 1px solid #ffb74d;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s;
}
.img-url-locked .btn-img-unlock { display: inline-flex; align-items: center; gap: 2px; }
.btn-img-unlock:hover { background: #ffe0b2; }

/* ── 이미지 갤러리 ──────────────────────────────────────────── */
.btn-img-gallery {
  padding: 4px 8px;
  font-size: 14px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 6px;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.btn-img-gallery:hover { background: #e8f0fe; }

.gallery-tab {
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.gallery-tab.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.gallery-item {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.gallery-item:hover { border-color: #8BB3FF; }
.gallery-item-delete {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 1;
}
.gallery-item:hover .gallery-item-delete { display: flex; }

/* ── 글자색 팔레트 ─────────────────────────────────────────── */
#color-palette-panel {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  gap: 6px;
  z-index: 10000;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  white-space: nowrap;
}
.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s, transform .1s;
}
.color-swatch:hover {
  border-color: var(--brand);
  transform: scale(1.15);
}
.color-swatch-custom {
  background: linear-gradient(135deg, #f00 0%, #ff0 20%, #0f0 40%, #0ff 60%, #00f 80%, #f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.color-swatch-custom span {
  font-size: 12px;
  color: #fff;
  text-shadow: 0 0 3px rgba(0,0,0,.8);
  pointer-events: none;
  z-index: 1;
}
.color-swatch-custom input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
}

/* ---------- Onboarding Modal ---------- */
.onboarding-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.onboarding-steps li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.ob-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.onboarding-steps li strong { font-size: 14px; display: block; margin-bottom: 4px; }
.onboarding-steps li p { font-size: 13px; color: #555; margin: 0; line-height: 1.6; }
.ob-step-img {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
}


/* ──────────────────────────────────────────────
 * 디자이너 read-only 모드
 *  - 편집 UI(폼·툴바·CTA)는 잠금
 *  - 미리보기·메모·디자인 요청은 그대로 동작
 * ────────────────────────────────────────────── */
body.role-readonly .left-panel input,
body.role-readonly .left-panel textarea,
body.role-readonly .left-panel select,
body.role-readonly .left-panel [contenteditable="true"],
body.role-readonly #btn-drafts-menu,
body.role-readonly #btn-download,
body.role-readonly #btn-send-sample,
body.role-readonly #btn-upload-pptx,
body.role-readonly #btn-examples,
body.role-readonly .block-card .block-header button {
  pointer-events: none !important;
  opacity: 0.55 !important;
  user-select: text;
}
body.role-readonly .left-panel [contenteditable="true"]::after {
  content: '🔒 디자이너는 보기 전용';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 10px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  pointer-events: none;
}