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

/* ── 기본 리셋 ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  color: #111827;
  background: #f3f4f6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── 반경 ── */
.r35 { border-radius: 35px !important; }
.r24 { border-radius: 24px !important; }
.r20 { border-radius: 20px !important; }
.r16 { border-radius: 16px !important; }
.r12 { border-radius: 12px !important; }
.r10 { border-radius: 10px !important; }
.r8  { border-radius: 8px  !important; }
.r5  { border-radius: 5px  !important; }

/* ── 카드 ── */
.card-shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
}
.card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

/* ── 모달 ── */
.modal-overlay {
  background: rgba(15,15,15,.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.modal-overlay .modal-content {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  width: 100%;
  margin: auto;
}
#dev-modal .modal-content {
  overflow: hidden;
  max-height: calc(100vh - 40px);
}

/* ── 애니메이션 ── */
.fade-in { animation: fadeIn .25s cubic-bezier(.2,.8,.3,1); }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast-show { opacity: 1 !important; transform: translate(-50%,0) !important; }

/* ── 프로그레스 바 ── */
.progress-bar {
  height: 6px;
  border-radius: 99px;
  background: #e5e7eb;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #3b82f6, #6366f1);
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* ── 심플 스크롤바 ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #CBD5E1; }
* { scrollbar-width: thin; scrollbar-color: #E2E8F0 transparent; }

/* ── 스크롤바 숨김 ── */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── 스켈레톤 ── */
.skeleton {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 사이드바 ── */
.sidebar-item {
  cursor: pointer;
  transition: all .12s ease;
}
.sidebar-item:hover { background: rgba(0,0,0,.04); }
.sidebar-item.active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  box-shadow: inset 3px 0 0 #3b82f6;
}

/* ── 배지 ── */
.badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.badge-approved  { background: #dcfce7; color: #15803d; }
.badge-rejected  { background: #fee2e2; color: #dc2626; }
.badge-withdrawn { background: #f3f4f6; color: #6b7280; }
.badge-pending   { background: #dbeafe; color: #1d4ed8; }

/* ── 업로드 존 ── */
.upload-zone { border: 2px dashed #d1d5db; cursor: pointer; transition: border-color .2s; }
.upload-zone:hover { border-color: #3b82f6; background: #eff6ff; }

/* ── 텍스트 줄임 ── */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 멘션 태그 ── */
.mention-tag {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 12px;
  cursor: default;
}

/* ════════════════════════════════════════
   마크다운 프로즈 (개발 프로젝트용)
   ════════════════════════════════════════ */
.prose {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #374151;
}

/* 제목 — 작게 유지 */
.prose h1 {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 1rem 0 0.4rem;
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.25rem;
}
.prose h2 {
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0.9rem 0 0.35rem;
  color: #1f2937;
}
.prose h3 {
  font-size: 0.825rem;
  font-weight: 700;
  margin: 0.75rem 0 0.3rem;
  color: #374151;
}

/* 단락 */
.prose p { margin-bottom: 0.7rem; }

/* 목록 */
.prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 0.7rem; }
.prose ol { list-style: decimal; padding-left: 1.4rem; margin-bottom: 0.7rem; }
.prose li { margin-bottom: 0.2rem; }

/* 강조 */
.prose strong { font-weight: 800; color: #111827; }
.prose em { font-style: italic; color: #6b7280; }

/* 인라인 코드 */
.prose code {
  background: #1e293b;
  color: #7dd3fc;
  padding: 0.1rem 0.45rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-family: 'Fira Code', 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
  font-weight: 500;
}

/* 코드 블록 — 핵심 ★ */
.prose pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1.1rem 1.25rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid #1e293b;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
  position: relative;
}
.prose pre::before {
  content: '';
  display: block;
  width: 52px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23ef4444'/%3E%3Ccircle cx='22' cy='5' r='4' fill='%23f59e0b'/%3E%3Ccircle cx='39' cy='5' r='4' fill='%2322c55e'/%3E%3C/svg%3E") no-repeat;
  margin-bottom: 10px;
  opacity: .7;
}
.prose pre code {
  background: transparent;
  color: #e2e8f0;
  padding: 0;
  font-size: 0.8rem;
  border-radius: 0;
  line-height: 1.65;
}

/* 코드 하이라이팅 색상 */
.prose pre .hljs-comment,
.prose pre .hljs-meta  { color: #64748b; font-style: italic; }
.prose pre .hljs-keyword,
.prose pre .hljs-selector-tag { color: #c084fc; }
.prose pre .hljs-string,
.prose pre .hljs-attr { color: #86efac; }
.prose pre .hljs-number,
.prose pre .hljs-literal { color: #f9a8d4; }
.prose pre .hljs-title,
.prose pre .hljs-name { color: #60a5fa; }
.prose pre .hljs-variable,
.prose pre .hljs-template-variable { color: #fcd34d; }
.prose pre .hljs-built_in { color: #34d399; }

/* 인용구 */
.prose blockquote {
  border-left: 3px solid #3b82f6;
  padding: 0.6rem 1rem;
  color: #6b7280;
  font-style: italic;
  background: #eff6ff;
  border-radius: 0 8px 8px 0;
  margin: 0.6rem 0;
}

/* 표 */
.prose table { width: 100%; border-collapse: collapse; margin-bottom: 0.75rem; font-size: 0.8rem; }
.prose th { background: #f8fafc; font-weight: 800; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; text-align: left; color: #374151; }
.prose td { padding: 0.45rem 0.75rem; border: 1px solid #e2e8f0; color: #4b5563; }
.prose tr:nth-child(even) { background: #f8fafc; }

/* 링크 */
.prose a { color: #3b82f6; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #1d4ed8; }

/* 구분선 */
.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 1rem 0; }

/* 이미지 */
.prose img { max-width: 100%; border-radius: 8px; margin: 0.5rem 0; }


/* ════════════════════════════════════════
   EasyMDE 에디터 커스텀
   ════════════════════════════════════════ */
.EasyMDEContainer { border-radius: 16px; overflow: hidden; border: 1px solid #e5e7eb; }
.EasyMDEContainer .CodeMirror {
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  min-height: 180px;
  background: #fafafa;
  color: #1e293b;
  border: none;
  padding: 12px;
}
.EasyMDEContainer .editor-toolbar {
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  border-top: none;
  border-left: none;
  border-right: none;
  padding: 6px 10px;
}
.EasyMDEContainer .editor-toolbar button {
  color: #6b7280;
  border-radius: 6px;
  width: 28px;
  height: 28px;
}
.EasyMDEContainer .editor-toolbar button:hover,
.EasyMDEContainer .editor-toolbar button.active {
  background: #e0e7ff;
  color: #4338ca;
  border: none;
}
.EasyMDEContainer .editor-toolbar i.separator { border-color: #e5e7eb; }

/* 미리보기 영역 */
.EasyMDEContainer .editor-preview {
  background: #fff;
  padding: 16px;
  font-family: 'Pretendard', sans-serif;
}
.EasyMDEContainer .editor-preview pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.8rem;
}
.EasyMDEContainer .editor-preview code {
  background: #1e293b;
  color: #7dd3fc;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ════════════════════════════════════════
   모바일 반응형
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
  #sidebar {
    position: fixed; left: 0; top: 0; z-index: 80;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    height: 100vh;
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.35); z-index: 79;
  }
  #sidebar-overlay.show { display: block; }
  #mobile-header { display: flex !important; }
}
@media (min-width: 1025px) {
  #mobile-header { display: none !important; }
  #sidebar-overlay { display: none !important; }
}
@media (max-width: 640px) {
  .modal-overlay .modal-content {
    border-radius: 20px !important;
    padding: 20px !important;
    max-width: 100% !important;
  }
  .modal-overlay .modal-content h2 { font-size: 1.15rem !important; }
  #content { padding: 12px !important; }
  .grid.grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
}

/* ════════════ 블록 에디터 ════════════ */
.dev-block { position: relative; display: flex; align-items: flex-start; gap: 6px; margin-bottom: 2px; }
.block-handle {
  position: absolute; left: -22px; top: 4px;
  cursor: grab; font-size: 14px; color: #d1d5db;
  opacity: 0; transition: opacity .15s;
  user-select: none;
}
.dev-block:hover .block-handle { opacity: 1; }

/* contenteditable placeholder */
.block-content:empty:before {
  content: attr(data-placeholder);
  color: #d1d5db; pointer-events: none;
  font-style: italic; font-size: 0.875rem;
}
.block-content:focus:empty:before { color: #e5e7eb; }

/* 코드 블록 */
.code-block-wrap {
  background: #0f172a;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #1e293b;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  width: 100%;
  margin: 4px 0;
}
.code-block-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px 4px;
  background: #0f172a;
}
.mac-dots { display: flex; gap: 6px; }
.mac-dots span { width: 10px; height: 10px; border-radius: 50%; }
.mac-dots span:nth-child(1) { background: #ef4444; }
.mac-dots span:nth-child(2) { background: #f59e0b; }
.mac-dots span:nth-child(3) { background: #22c55e; }
.code-block-textarea {
  width: 100%; background: transparent; border: none; outline: none;
  color: #e2e8f0; font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
  font-size: 0.8rem; line-height: 1.7; padding: 8px 14px 14px;
  resize: none; min-height: 80px; tab-size: 2;
}
.code-block-textarea::placeholder { color: #475569; }

/* 블록 타입별 스타일 */
.block-h1   { font-size: 1.75rem; font-weight: 900; color: #111827; line-height: 1.25; margin-top: 4px; border-bottom: 2px solid #e5e7eb; padding-bottom: 6px; }
.block-h2   { font-size: 1.3rem; font-weight: 800; color: #1f2937; line-height: 1.35; margin-top: 2px; }
.block-h3   { font-size: 1.05rem; font-weight: 700; color: #4f46e5; line-height: 1.5; }
.block-text { font-size: 0.875rem; color: #374151; line-height: 1.75; }
.block-bullet { font-size: 0.875rem; color: #374151; padding-left: 1.2rem; position: relative; }
.block-bullet:before { content: '•'; position: absolute; left: 0; color: #6b7280; }
.block-quote {
  font-size: 0.875rem; color: #6b7280; font-style: italic;
  border-left: 3px solid #a5b4fc; padding-left: 14px;
  background: #eef2ff; border-radius: 0 8px 8px 0; padding: 6px 14px; margin: 2px 0;
}
.block-divider { width: 100%; border: none; border-top: 2px solid #e5e7eb; margin: 8px 0; }

/* 저장 인디케이터 */
.block-save-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  transition: opacity .3s;
}

/* ════════════ 사이드바 완전 숨김 (데스크탑) ════════════ */
@media (min-width: 1025px) {
  #sidebar {
    transition: width .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, padding .28s ease;
    overflow: hidden;
  }
  /* 숨김: 폭을 0으로 접어 콘텐츠가 꽉 차게 */
  #sidebar.sidebar-hidden {
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    opacity: 0;
    pointer-events: none;
  }
  /* 내부 요소가 접히는 동안 비어져 나오지 않게 */
  #sidebar.sidebar-hidden > * {
    visibility: hidden;
  }
}

/* ════════════ 사이드바 숨김 시 본문 확장 ════════════ */
@media (min-width: 1025px) {
  /* 사이드바가 숨겨지면 body에 클래스를 달아 본문 폭 제한 해제 */
  body.sidebar-is-hidden #content > [id^="tab-"] {
    max-width: 100% !important;
  }
  /* 본문 좌우 여백도 살짝 더 줘서 꽉 찬 느낌 + 햄버거 버튼 안 가리게 */
  body.sidebar-is-hidden #content {
    padding-left: 4rem;
    padding-right: 2.5rem;
    transition: padding .28s ease;
  }
}

/* ═══════════════════════════════════════════════════════════════
   THEME SYSTEM
   ─────────────────────────────────────────────────────────────
   🌸 온기 오피스 (default) — html (no class added)
   ⚡ 전자 잉크              — html.theme-ink
═══════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  /* sidebar */
  --sb-bg:        linear-gradient(175deg, #7c3aed 0%, #4c1d95 100%);
  --sb-border:    rgba(255,255,255,.08);
  --sb-item:      rgba(255,255,255,.72);
  --sb-hover:     rgba(255,255,255,.1);
  --sb-act-bg:    rgba(255,255,255,.18);
  --sb-act-text:  #fff;
  --sb-act-shadow:none;
  --sb-divider:   rgba(255,255,255,.12);
  --sb-foot-bg:   rgba(255,255,255,.13);
  --sb-foot-bdr:  rgba(255,255,255,.1);
  --sb-btn-bg:    rgba(255,255,255,.1);
  --sb-btn-hover: rgba(255,255,255,.22);
  --sb-name:      #fff;
  --sb-email:     rgba(255,255,255,.55);
  /* layout */
  --body-bg:      #f0ecff;
  --content-bg:   #f0ecff;
  --grid-img:     none;
  --card-shadow:  0 2px 16px rgba(124,58,237,.08);
  --ham-bg:       #fff;
  --ham-bdr:      #e8e3ff;
  --ham-text:     #7c3aed;
}

html.theme-ink {
  --sb-bg:        #050e1b;
  --sb-border:    #0d2a3f;
  --sb-item:      #5a7a9a;
  --sb-hover:     rgba(255,255,255,.03);
  --sb-act-bg:    rgba(0,229,196,.1);
  --sb-act-text:  #00e5c4;
  --sb-act-shadow:inset 3px 0 0 rgba(0,229,196,.7);
  --sb-divider:   #0d2a3f;
  --sb-foot-bg:   #0d1e30;
  --sb-foot-bdr:  #0d2a3f;
  --sb-btn-bg:    rgba(13,30,48,.9);
  --sb-btn-hover: #152a40;
  --sb-name:      #afc8e0;
  --sb-email:     #3a6a8a;
  --body-bg:      #08111e;
  --content-bg:   #08111e;
  --grid-img:     linear-gradient(rgba(0,229,196,.028) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(0,229,196,.028) 1px, transparent 1px);
  --card-shadow:  none;
  --ham-bg:       #0d1e30;
  --ham-bdr:      #0d2a3f;
  --ham-text:     #5a7a9a;
}

/* ── Sidebar ── */
#sidebar {
  background: var(--sb-bg) !important;
  border-color: var(--sb-border) !important;
}
#sidebar .sidebar-item              { color: var(--sb-item) !important; }
#sidebar .sidebar-item i            { color: inherit !important; }
#sidebar .sidebar-item:hover        { background: var(--sb-hover) !important; color: var(--sb-act-text) !important; box-shadow: none !important; }
#sidebar .sidebar-item.active       { background: var(--sb-act-bg) !important; color: var(--sb-act-text) !important; box-shadow: var(--sb-act-shadow) !important; }
#sidebar .border-t                  { border-color: var(--sb-divider) !important; }

/* ── Sidebar user card ── */
.sidebar-user-card {
  background: var(--sb-foot-bg) !important;
  border-color: var(--sb-foot-bdr) !important;
  box-shadow: none !important;
}
#sidebar-name  { color: var(--sb-name)  !important; }
#sidebar-email { color: var(--sb-email) !important; }
.sidebar-user-card button {
  background-color: var(--sb-btn-bg) !important;
  border-color: var(--sb-foot-bdr) !important;
  color: var(--sb-item) !important;
}
.sidebar-user-card button:hover { background-color: var(--sb-btn-hover) !important; }

/* ── Theme segmented control — overrides .sidebar-user-card button defaults ── */
.sidebar-user-card .theme-seg-btn {
  background: transparent !important;
  border: none !important;
  color: var(--sb-item) !important;
}
.sidebar-user-card .theme-seg-btn.active {
  background: var(--sb-act-bg) !important;
  color: var(--sb-act-text) !important;
}
.sidebar-user-card .theme-seg-btn:hover:not(.active) {
  background: var(--sb-hover) !important;
  color: var(--sb-act-text) !important;
}

/* ── Body & main content ── */
body     { background: var(--body-bg)   !important; }
#content {
  background-color: var(--content-bg)   !important;
  background-image: var(--grid-img)     !important;
  background-size: 28px 28px            !important;
}

/* ── Floating hamburger button ── */
#sidebar-toggle-float {
  background-color: var(--ham-bg)  !important;
  border-color:     var(--ham-bdr) !important;
  color:            var(--ham-text) !important;
}

/* ── Card shadows ── */
#app .card-shadow,
#modal-root .card-shadow { box-shadow: var(--card-shadow) !important; }

/* ── Mobile header ── */
html.theme-ink #mobile-header {
  background-color: #050e1b !important;
  border-color: #0d2a3f !important;
}
html.theme-ink #mobile-header .text-gray-600 { color: #5a7a9a !important; }

/* ─────────────────────────────────────────────────────────────
   전자 잉크 — broad dark overrides
   Scoped to #app / #modal-root to leave the login screen intact.
───────────────────────────────────────────────────────────── */

/* Backgrounds */
html.theme-ink #app .bg-white,
html.theme-ink #modal-root .bg-white  { background-color: #0d1e30 !important; }
html.theme-ink #app .bg-gray-50       { background-color: #0a1626 !important; }
html.theme-ink #app .bg-gray-100,
html.theme-ink #app .bg-gray-200      { background-color: #0a1626 !important; }

/* Borders */
html.theme-ink #app .border-gray-100,
html.theme-ink #app .border-gray-200,
html.theme-ink #modal-root .border-gray-100,
html.theme-ink #modal-root .border-gray-200 { border-color: #0d2a3f !important; }
html.theme-ink #app .divide-gray-100 > * + *,
html.theme-ink #app .divide-gray-50  > * + * { border-color: #0d2a3f !important; }

/* Text */
html.theme-ink #app .text-gray-900,
html.theme-ink #app .text-gray-800,
html.theme-ink #modal-root .text-gray-900,
html.theme-ink #modal-root .text-gray-800 { color: #dce8f5 !important; }

html.theme-ink #app .text-gray-700,
html.theme-ink #modal-root .text-gray-700 { color: #afc8e0 !important; }

html.theme-ink #app .text-gray-600,
html.theme-ink #app .text-gray-500,
html.theme-ink #modal-root .text-gray-600,
html.theme-ink #modal-root .text-gray-500 { color: #5a7a9a !important; }

html.theme-ink #app .text-gray-400,
html.theme-ink #modal-root .text-gray-400 { color: #3a6a8a !important; }

/* Hover backgrounds */
html.theme-ink #app .hover\:bg-gray-50:hover,
html.theme-ink #app .hover\:bg-white:hover,
html.theme-ink #modal-root .hover\:bg-gray-50:hover { background-color: rgba(13,42,63,.55) !important; }
html.theme-ink #app .hover\:bg-gray-100:hover        { background-color: rgba(10,22,38,.85) !important; }

/* Inputs */
html.theme-ink #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.theme-ink #app select,
html.theme-ink #app textarea,
html.theme-ink #modal-root input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.theme-ink #modal-root select,
html.theme-ink #modal-root textarea {
  background-color: #08111e !important;
  border-color: #0d2a3f !important;
  color: #dce8f5 !important;
}
html.theme-ink #app input::placeholder,
html.theme-ink #modal-root input::placeholder { color: #3a6a8a !important; }

/* Toast */
html.theme-ink #toast-msg {
  background-color: #0d1e30 !important;
  border: 1px solid #0d2a3f !important;
}
/* ─────────────────────────────────────────────────────────────
   Dark mode — 블록 에디터 텍스트 가독성 (시안A 심해 팔레트)
───────────────────────────────────────────────────────────── */
html.theme-ink .block-h1   { color: #E5E9F5 !important; border-bottom-color: #2D3248 !important; }
html.theme-ink .block-h2   { color: #CDD5E8 !important; }
html.theme-ink .block-h3   { color: #818CF8 !important; }
html.theme-ink .block-text { color: #C5C9D8 !important; }
html.theme-ink .block-bullet { color: #C5C9D8 !important; }
html.theme-ink .block-bullet:before { color: #818CF8 !important; }
html.theme-ink .block-quote {
  color: #8B91A8 !important;
  background: rgba(99,102,241,0.08) !important;
  border-left-color: #6366F1 !important;
}
html.theme-ink .block-divider { border-top-color: #2D3248 !important; }
html.theme-ink .block-content:empty:before { color: #565C75 !important; }

/* ─────────────────────────────────────────────────────────────
   Dark mode — SW 개발 칸반 hover:bg-indigo 계열 (list view card selected)
───────────────────────────────────────────────────────────── */
html.theme-ink #app .bg-indigo-100  { background-color: rgba(99,102,241,0.18) !important; }
html.theme-ink #app .border-indigo-400 { border-color: #6366F1 !important; }
html.theme-ink #app .ring-2.ring-indigo-200 { --tw-ring-color: rgba(99,102,241,0.3); }
html.theme-ink #app .hover\:bg-indigo-50\/30:hover { background-color: rgba(99,102,241,0.07) !important; }
html.theme-ink #app .group-hover\:text-indigo-700 { color: #818CF8 !important; }
html.theme-ink #app .text-gray-800 { color: #EAEBF0 !important; }


/* ─────────────────────────────────────────────────────────────
   Theme toggle — segmented control container
───────────────────────────────────────────────────────────── */
.theme-seg {
  display: flex;
  background: var(--sb-btn-bg);
  border: 1px solid var(--sb-foot-bdr);
  border-radius: 14px;
  padding: 3px;
  gap: 3px;
  margin-bottom: 8px;
}
.theme-seg-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: 11px;
  border: none;
  background: transparent;
  color: var(--sb-item);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
  letter-spacing: .01em;
  white-space: nowrap;
}
.theme-seg-btn.active { background: var(--sb-act-bg); color: var(--sb-act-text); }
.theme-seg-btn i      { font-size: 12px; }
/* 다크모드 로고 시인성 — 흰색 pill 배경으로 원본 색상 유지 */
/* 다크모드 로고 시인성 — 흰색 pill 배경으로 원본 색상 유지 */
html.theme-ink #sidebar-logo {
  background: rgba(255,255,255,0.92);
  border-radius: 10px;
  padding: 4px 10px;
  box-sizing: content-box;
  max-width: calc(100% - 52px);
}
html.theme-ink #mobile-header img {
  background: rgba(255,255,255,0.92);
  border-radius: 8px;
  padding: 3px 8px;
  box-sizing: content-box;
}

/* 전사 업무 보드 가로 스크롤 */
.board-hscroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 #f1f5f9; }
.board-hscroll::-webkit-scrollbar { height: 6px; }
.board-hscroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 3px; }
.board-hscroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.board-hscroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ══════════════════════════════════════════
   다크모드 모달 내부 배경 보완
   (bg-white 외 gray-50, 컬러 카드 전체 커버)
══════════════════════════════════════════ */
html.theme-ink #modal-root .bg-gray-50,
html.theme-ink #modal-root .hover\:bg-gray-50:hover { background-color: #0a1626 !important; }

/* 리스트 헤더 컬러 배경 → 반투명 다크 틴트 */
html.theme-ink #modal-root .bg-blue-50    { background-color: rgba(37,99,235,.12)   !important; }
html.theme-ink #modal-root .bg-emerald-50 { background-color: rgba(16,185,129,.12)  !important; }
html.theme-ink #modal-root .bg-purple-50  { background-color: rgba(124,58,237,.12)  !important; }
html.theme-ink #modal-root .bg-amber-50   { background-color: rgba(245,158,11,.12)  !important; }
html.theme-ink #modal-root .bg-yellow-50  { background-color: rgba(234,179,8,.12)   !important; }
html.theme-ink #modal-root .bg-green-50   { background-color: rgba(34,197,94,.12)   !important; }
html.theme-ink #modal-root .bg-red-50     { background-color: rgba(239,68,68,.12)   !important; }
html.theme-ink #modal-root .bg-rose-50    { background-color: rgba(244,63,94,.12)   !important; }
html.theme-ink #modal-root .bg-teal-50    { background-color: rgba(20,184,166,.12)  !important; }

/* 컬러 배경의 border 도 다크 계열로 */
html.theme-ink #modal-root .border-blue-100,
html.theme-ink #modal-root .border-yellow-100,
html.theme-ink #modal-root .border-green-100,
html.theme-ink #modal-root .border-purple-100,
html.theme-ink #modal-root .border-emerald-100,
html.theme-ink #modal-root .border-amber-100,
html.theme-ink #modal-root .border-red-100    { border-color: rgba(255,255,255,.08) !important; }

/* 진행률 바 트랙 */
html.theme-ink #modal-root .bg-gray-200 { background-color: #1a3a55 !important; }

/* 분리선 */
html.theme-ink #modal-root .divide-y > * + * { border-top-color: #0d2a3f !important; }
html.theme-ink #modal-root .border-t          { border-top-color: #0d2a3f !important; }
html.theme-ink #modal-root .border-b          { border-bottom-color: #0d2a3f !important; }

/* ══════════════════════════════════════════
   다크모드 모달 텍스트 색상 보완
══════════════════════════════════════════ */
/* 닫기 버튼 hover:text-black → 흰색으로 */
html.theme-ink #modal-root .hover\:text-black:hover { color: #dce8f5 !important; }

/* 컬러 헤더/라벨 텍스트 — 다크 배경에서 가독성 확보 */
html.theme-ink #modal-root .text-blue-700    { color: #60a5fa !important; }
html.theme-ink #modal-root .text-emerald-700 { color: #34d399 !important; }
html.theme-ink #modal-root .text-purple-700  { color: #c084fc !important; }
html.theme-ink #modal-root .text-amber-700   { color: #fbbf24 !important; }
html.theme-ink #modal-root .text-yellow-700  { color: #fbbf24 !important; }
html.theme-ink #modal-root .text-green-700   { color: #4ade80 !important; }
html.theme-ink #modal-root .text-red-600     { color: #f87171 !important; }
html.theme-ink #modal-root .text-orange-600  { color: #fb923c !important; }
html.theme-ink #modal-root .text-teal-600    { color: #2dd4bf !important; }
html.theme-ink #modal-root .text-rose-600    { color: #fb7185 !important; }

/* 상태 뱃지 배경(bg-*-100) → 반투명 틴트 */
html.theme-ink #modal-root .bg-blue-100    { background-color: rgba(37,99,235,.18)  !important; }
html.theme-ink #modal-root .bg-green-100   { background-color: rgba(34,197,94,.18)  !important; }
html.theme-ink #modal-root .bg-yellow-100  { background-color: rgba(234,179,8,.18)  !important; }
html.theme-ink #modal-root .bg-purple-100  { background-color: rgba(124,58,237,.18) !important; }
html.theme-ink #modal-root .bg-emerald-100 { background-color: rgba(16,185,129,.18) !important; }
html.theme-ink #modal-root .bg-amber-100   { background-color: rgba(245,158,11,.18) !important; }
html.theme-ink #modal-root .bg-red-100     { background-color: rgba(239,68,68,.18)  !important; }
html.theme-ink #modal-root .bg-orange-100  { background-color: rgba(249,115,22,.18) !important; }
html.theme-ink #modal-root .bg-teal-100    { background-color: rgba(20,184,166,.18) !important; }
html.theme-ink #modal-root .bg-rose-100    { background-color: rgba(244,63,94,.18)  !important; }

/* ═══════════════════════════════════════════════════════════
   SW / HW 개발 전체 스플릿 레이아웃 + 상세 패널 다크모드 오버라이드
   근본 원인: #dev-split-layout / #hw2-split-layout 이 bg-white
   ═══════════════════════════════════════════════════════════ */

/* ── 메인 컨테이너 배경/테두리/그림자 ── */
html.theme-ink #dev-split-layout,
html.theme-ink #hw2-split-layout {
  background-color: #181B26 !important;
  border-color: #252A3A !important;
  box-shadow: none !important;
}

/* ── 내부 bg-white 요소 (섹션 카드, 입력칸, 버튼, 카드 등) ── */
html.theme-ink #dev-split-layout .bg-white,
html.theme-ink #hw2-split-layout .bg-white,
html.theme-ink #dev-detail-panel .bg-white,
html.theme-ink #dev-kb-detail-panel .bg-white,
html.theme-ink #hw2-detail-panel .bg-white,
html.theme-ink #hw2-kb-detail-panel .bg-white { background-color: #1D2138 !important; }

/* ── bg-gray-50 (섹션 헤더 hover 배경 등) ── */
html.theme-ink #dev-split-layout .bg-gray-50,
html.theme-ink #hw2-split-layout .bg-gray-50,
html.theme-ink #dev-detail-panel .bg-gray-50,
html.theme-ink #hw2-detail-panel .bg-gray-50 { background-color: #1E2235 !important; }

/* ── bg-gray-100 (미니탭 래퍼, 필터 배경 등) ── */
html.theme-ink #dev-split-layout .bg-gray-100,
html.theme-ink #hw2-split-layout .bg-gray-100,
html.theme-ink #dev-detail-panel .bg-gray-100,
html.theme-ink #dev-kb-detail-panel .bg-gray-100,
html.theme-ink #hw2-detail-panel .bg-gray-100,
html.theme-ink #hw2-kb-detail-panel .bg-gray-100 { background-color: #252A3A !important; }

/* ── border 컬러 ── */
html.theme-ink #dev-split-layout .border-gray-100,
html.theme-ink #hw2-split-layout .border-gray-100,
html.theme-ink #dev-detail-panel .border-gray-100,
html.theme-ink #dev-kb-detail-panel .border-gray-100,
html.theme-ink #hw2-detail-panel .border-gray-100,
html.theme-ink #hw2-kb-detail-panel .border-gray-100 { border-color: #252A3A !important; }

html.theme-ink #dev-split-layout .border-gray-200,
html.theme-ink #hw2-split-layout .border-gray-200,
html.theme-ink #dev-detail-panel .border-gray-200,
html.theme-ink #dev-kb-detail-panel .border-gray-200,
html.theme-ink #hw2-detail-panel .border-gray-200,
html.theme-ink #hw2-kb-detail-panel .border-gray-200 { border-color: #374151 !important; }

/* ── shadow ── */
html.theme-ink #dev-split-layout .shadow-sm,
html.theme-ink #hw2-split-layout .shadow-sm,
html.theme-ink #dev-detail-panel .shadow-sm,
html.theme-ink #dev-kb-detail-panel .shadow-sm,
html.theme-ink #hw2-detail-panel .shadow-sm,
html.theme-ink #hw2-kb-detail-panel .shadow-sm { box-shadow: none !important; }

/* ── 텍스트 색상 ── */
html.theme-ink #dev-split-layout .text-gray-700,
html.theme-ink #hw2-split-layout .text-gray-700,
html.theme-ink #dev-detail-panel .text-gray-700,
html.theme-ink #dev-kb-detail-panel .text-gray-700,
html.theme-ink #hw2-detail-panel .text-gray-700,
html.theme-ink #hw2-kb-detail-panel .text-gray-700 { color: #C0C8D8 !important; }

html.theme-ink #dev-split-layout .text-gray-600,
html.theme-ink #hw2-split-layout .text-gray-600 { color: #9CA3AF !important; }

html.theme-ink #dev-split-layout .text-gray-400,
html.theme-ink #hw2-split-layout .text-gray-400,
html.theme-ink #dev-detail-panel .text-gray-400,
html.theme-ink #dev-kb-detail-panel .text-gray-400,
html.theme-ink #hw2-detail-panel .text-gray-400,
html.theme-ink #hw2-kb-detail-panel .text-gray-400 { color: #6B7280 !important; }

/* ── hover 배경 ── */
html.theme-ink #dev-split-layout .hover\:bg-gray-50:hover,
html.theme-ink #hw2-split-layout .hover\:bg-gray-50:hover { background-color: rgba(255,255,255,.04) !important; }

html.theme-ink #dev-split-layout .hover\:bg-gray-50\/50:hover,
html.theme-ink #hw2-split-layout .hover\:bg-gray-50\/50:hover,
html.theme-ink #dev-detail-panel .hover\:bg-gray-50\/50:hover,
html.theme-ink #dev-kb-detail-panel .hover\:bg-gray-50\/50:hover,
html.theme-ink #hw2-detail-panel .hover\:bg-gray-50\/50:hover,
html.theme-ink #hw2-kb-detail-panel .hover\:bg-gray-50\/50:hover { background-color: rgba(255,255,255,.03) !important; }
html.theme-ink #modal-root .bg-gray-100    { background-color: rgba(255,255,255,.07) !important; }

/* ════════════════════════════════════════════════════════════════════
   모바일 반응형 확장 (max-width: 767px)
   ─ 데스크탑 / 태블릿(≥ 768px) UI 일체 변경 없음 ─
════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ─── 0. 전역 ─── */
  #content { padding: 8px !important; }
  #sidebar-toggle-float { display: none !important; }

  /* ─── 1. 탭 컨테이너: inline height 제거 → #content 스크롤로 처리 ─── */
  #tab-dev, #tab-hw2, #tab-hw,
  #tab-crm, #tab-cs,
  #tab-products, #tab-calendar,
  #tab-teamboard, #tab-teamcal {
    height: auto !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* ─── 2. SW/HW/마케팅 개발 스플릿 → 세로 스택 ─── */
  #dev-split-layout,
  #hw2-split-layout,
  #mktg-split-layout {
    flex-direction: column !important;
    overflow: visible !important;
    min-height: 0 !important;
    border-radius: 16px !important;
  }

  /* 왼쪽 프로젝트 목록: 전체폭, 최대 45vh */
  #dev-kanban-panel,
  #hw2-kanban-panel,
  #mktg-kanban-panel {
    width: 100% !important;
    max-height: 45vh !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex-shrink: 0 !important;
  }
  html.theme-ink #dev-kanban-panel,
  html.theme-ink #hw2-kanban-panel,
  html.theme-ink #mktg-kanban-panel {
    border-bottom-color: #252A3A !important;
  }

  /* 접기/펼치기 버튼: 모바일 불필요 */
  #dev-kanban-collapse-btn,
  #hw2-kanban-collapse-btn,
  #mktg-kanban-collapse-btn { display: none !important; }

  /* 오른쪽 상세 패널: 기본 숨김 (프로젝트 미선택 상태) */
  #dev-detail-panel,
  #hw2-detail-panel,
  #mktg-detail-panel {
    display: none !important;
    position: static !important;   /* JS의 absolute 덮어씀 */
    min-height: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  /* 카드 선택 시: .mob-detail-open 클래스로 상세 패널 표시 */
  #dev-split-layout.mob-detail-open #dev-detail-panel,
  #hw2-split-layout.mob-detail-open #hw2-detail-panel,
  #mktg-split-layout.mob-detail-open #mktg-detail-panel {
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    width: 100% !important;
    min-height: 55vh !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    z-index: auto !important;
  }
  /* 선택 시: 프로젝트 목록 높이 조정 */
  #dev-split-layout.mob-detail-open #dev-kanban-panel,
  #hw2-split-layout.mob-detail-open #hw2-kanban-panel,
  #mktg-split-layout.mob-detail-open #mktg-kanban-panel {
    max-height: 38vh !important;
  }

  /* ─── 3. 세부업무 칸반 미니보드: 가로 스크롤 ─── */
  [id^="dev-mini-board-"],
  [id^="hw2-mini-board-"],
  [id^="mktg-mini-board-"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 간트 내부 컨테이너: 가로 스크롤 */
  [id^="mgl-"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ─── 4. CS 칸반: 세로 스택 ─── */
  /* 두 번째 직계 자식 = 칸반 컬럼 컨테이너 */
  #tab-cs > div + div {
    flex-direction: column !important;
    overflow-x: hidden !important;
    gap: 12px !important;
    padding-bottom: 16px !important;
  }
  /* 각 컬럼 카드: 전체폭 */
  #tab-cs > div + div > div {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* ─── 5. CRM: KPI 2열 + 상세 패널 전체폭 ─── */
  .crm2-page-header { padding: 8px 10px 0 !important; }
  .crm2-followup-banner { padding: 6px 10px !important; flex-wrap: wrap !important; }
  .crm2-ftags { flex-wrap: wrap !important; }
  .crm2-summary-row {
    flex-wrap: wrap !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  .crm2-kpi-card {
    flex: 0 0 calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
  }
  .crm2-tab-row { padding: 0 8px !important; flex-wrap: wrap !important; }
  .crm2-tab-tools { width: 100% !important; padding-bottom: 6px !important; }
  .crm2-search-inp { width: 80px !important; }
  /* 상세 패널: 전체폭 슬라이드 */
  .crm2-detail-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  /* 상세 패널 내부: 좌우 → 상하 */
  .crm2-detail-body {
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .crm2-detail-left {
    border-right: none !important;
    border-bottom: 1.5px solid var(--bd);
  }
  .crm2-detail-right {
    width: 100% !important;
    min-width: 0 !important;
    border-left: none !important;
  }

  /* ─── 6. 모달: 전체폭 하단 시트 ─── */
  .modal-overlay {
    padding: 8px !important;
    align-items: flex-end !important;
  }
  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 24px 24px 16px 16px !important;
    overflow-y: auto !important;
    padding: 20px !important;
  }
  /* renderModalRoot 로 생성되는 모달의 내부 div */
  .modal-overlay > div > .bg-white {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* max-w-* 클래스 오버라이드 */
  .modal-overlay .max-w-5xl,
  .modal-overlay .max-w-4xl,
  .modal-overlay .max-w-3xl,
  .modal-overlay .max-w-2xl,
  .modal-overlay .max-w-xl,
  .modal-overlay .max-w-lg,
  .modal-overlay .max-w-md,
  .modal-overlay .max-w-sm {
    max-width: 100% !important;
    width: 100% !important;
  }
  /* CS 상세 모달: 좌우 분할 → 상하 */
  .modal-overlay .flex-col.md\:flex-row,
  .modal-overlay .flex.md\:flex-row { flex-direction: column !important; }

  /* ─── 7. 캘린더 탭: 이미 flex-col lg:flex-row로 처리됨 ─── */
  /* 컬럼 높이가 화면보다 커지지 않도록 */
  #tab-calendar [data-id="col-my-todo"],
  #tab-calendar [data-id="col-team-board"] {
    width: 100% !important;
    min-width: 0 !important;
    max-height: 75vh;
    min-height: 350px;
  }

  /* ─── 8. 팀보드: 보드뷰 가로 스크롤 ─── */
  #tab-teamboard,
  #tab-teamcal { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* ─── 9. 입력 필드: iOS 자동 줌 방지 (16px 미만 시 줌 발생) ─── */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"],
  textarea,
  select { font-size: 16px !important; }

  /* ─── 10. 홈 대시보드 그리드 ─── */
  #tab-home .grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
  #tab-home .grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* ─── 11. SW/HW 칸반 세부업무 슬라이드 패널: 92vw ─── */
  /* inline max-width:96vw → 더 넓게, backdrop 8%로 닫기 가능 유지 */
  #kb-detail-panel,
  #hw2-kb-detail-panel {
    width: 92vw !important;
    max-width: 92vw !important;
  }

  /* ─── 12. 다크모드 모바일 헤더 ─── */
  html.theme-ink #mobile-header {
    border-bottom-color: #1e293b !important;
  }
}