@import "tailwindcss";

@plugin "@tailwindcss/typography";

@theme {
  --font-sans: var(--font-geekble-malang);
  --font-mono: var(--font-geist-mono);
}

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html {
  scroll-padding-top: 8rem; /* 128px — 고정 헤더 높이 커버 */
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* 모바일 터치 하이라이트 제거 */
}

/* TipTap Editor Styles */
.ProseMirror {
  outline: none;
}

.ProseMirror p.is-editor-empty:first-child::before {
  color: #adb5bd;
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
}

/* Outliner Styling (Reflect Style) */
.ProseMirror ul,
.prose .ProseMirror ul {
  list-style-type: none !important;
  padding-left: 1.25rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  position: relative;
}

/* Vertical Guide Lines */
.ProseMirror ul ul::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background-color: #e2e8f0;
  /* Default guide color */
  transition: background-color 0.2s ease;
}

.ProseMirror ul ul:hover::before {
  background-color: #cbd5e1;
}

.ProseMirror li {
  position: relative;
  padding-left: 0.25rem !important;
}

/* Bullet Point (Reflect Dot) for Unordered Lists */
.ProseMirror ul>li::before,
.prose ul>li::before {
  content: "•";
  position: absolute;
  left: -1rem;
  top: 0;
  color: #94a3b8;
  font-size: 1.2rem;
  transition: color 0.1s ease, transform 0.1s ease;
  cursor: grab;
}

.ProseMirror ul>li:hover::before,
.prose ul>li:hover::before {
  color: #6366f1;
  /* Default Indigo */
  transform: scale(1.3);
}

[data-doc-type='daily'] .ProseMirror ul>li:hover::before,
[data-doc-type='daily'] .prose ul>li:hover::before {
  color: #10b981;
  /* Daily Emerald */
}

/* 
   PERFECT HIERARCHICAL NUMBERING (TC-8-12)
   Match Image 0 (Viewer) exactly in Image 1 (Editor)
*/

/* 1. Base List Reset and Spacing */
.ProseMirror ol,
.prose ol {
  list-style-type: none !important;
  counter-reset: wiki-ol !important;
  padding-left: 2.5rem !important;
  /* 번호박스 width(2.25rem) + 여백 */
  margin: 0 !important;
}

/* 2. Nested List Reset (Ensure counters chain correctly) */
.ProseMirror li>ol,
.prose li>ol {
  counter-reset: wiki-ol !important;
  margin-top: 0.15rem !important;
  margin-bottom: 0.15rem !important;
}

/* 3. List Item Branding and Counter */
.ProseMirror ol>li,
.prose ol>li {
  counter-increment: wiki-ol !important;
  position: relative !important;
  padding-left: 0.75rem !important;
  /* Space between dot and first character */
  min-height: 1.75rem;
}

/* 4. The Numbering Box (Absolute Parity) */
.ProseMirror ol>li::before,
.prose ol>li::before {
  content: counters(wiki-ol, ".") "." !important;
  position: absolute !important;
  left: -2.5rem !important;
  width: 2.25rem !important;
  top: 0 !important;
  line-height: 1.75rem !important;
  text-align: right;
  padding-right: 0.3rem;
  color: #6366f1 !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  letter-spacing: -0.04em;
  pointer-events: none;
  font-family: var(--font-mono), monospace;
  white-space: nowrap;
  /* overflow: visible (기본값) — 긴 번호가 잘리지 않도록 */
}

/* 레벨별 번호박스 확장: 깊어질수록 누적 indent 공간을 활용 */
/* Level 2-3: "1.1.1." 최대 6자 → 4.75rem 이면 충분 */
.ProseMirror ol ol>li::before,
.prose ol ol>li::before {
  left: -5rem !important;
  width: 4.75rem !important;
}

/* Level 4+: "1.1.1.1.1.1." 최대 12자 → 7.75rem 이면 충분 */
.ProseMirror ol ol ol ol>li::before,
.prose ol ol ol ol>li::before {
  left: -8rem !important;
  width: 7.75rem !important;
}

/* Level 3+: 숫자 색상 옅게 — 본문에 집중하도록 시각적 비중 감소 */
.ProseMirror ol ol ol>li::before,
.prose ol ol ol>li::before {
  color: #a5b4fc !important;
}

[data-doc-type='daily'] .ProseMirror ol>li::before,
[data-doc-type='daily'] .prose ol>li::before {
  color: #10b981 !important;
}

/* 데일리 노트 Level 3+: 동일하게 옅게 */
[data-doc-type='daily'] .ProseMirror ol ol ol>li::before,
[data-doc-type='daily'] .prose ol ol ol>li::before {
  color: #6ee7b7 !important;
}

/* 5. Neutralize Tailwind Default Marks (Fix for Image 1 "Stray Dots") */
.ProseMirror ol>li::marker,
.prose ol>li::marker {
  content: none !important;
}

/* 6. Ghost Item Prevention (Fix for Image 1 "Missing 1.1") 
   Only hide if truly empty OR strictly a Tiptap placeholder.
   Avoid complex :has selectors that might fail during live typing.
*/
.ProseMirror li:empty::before,
.prose li:empty::before,
.ProseMirror li[data-placeholder]::before,
.prose li[data-placeholder]::before {
  content: none !important;
}

/* 7. Text Block Consistency */
.ProseMirror li>p,
.prose li>p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.75rem !important;
  min-height: 1.75rem;
}

/* 8. Active Highlight (Premium UX) */
.ProseMirror li.ProseMirror-focused>p {
  background-color: rgba(99, 102, 241, 0.04);
  border-radius: 4px;
}

[data-doc-type='daily'] .ProseMirror li.ProseMirror-focused>p {
  background-color: rgba(16, 185, 129, 0.04);
}

/* Remove stray margin/padding */
.ProseMirror ul ul,
.ProseMirror ul ol,
.ProseMirror ol ul,
.ProseMirror ol ol {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.ProseMirror li,
.prose .ProseMirror li {
  margin-top: 0.1em !important;
  margin-bottom: 0.1em !important;
}

.ProseMirror h1 {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
}

.ProseMirror h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
}

.ProseMirror h3 {
  font-size: 1.17em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* WikiLink Style */
.wiki-link,
.wiki-link-node {
  color: #4f46e5 !important;
  /* Indigo 600 */
  text-decoration: none !important;
  background-color: #eef2ff !important;
  /* Indigo 50 */
  padding: 0.1rem 0.4rem !important;
  border-radius: 0.4rem !important;
  font-weight: 600 !important;
  border: 1px solid #e0e7ff !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 0.1rem !important;
}

.wiki-link-node {
  cursor: text !important;
  user-select: none !important;
  /* Ultimate protection: prevent mouse interactions entirely in editor */
  pointer-events: none !important;
}

/* Ensure ALL links in editor are non-clickable and show text cursor */
.reflect-editor .ProseMirror a {
  pointer-events: none !important;
  cursor: text !important;
  text-decoration: underline !important;
}

.wiki-link:hover,
.wiki-link-node:hover {
  background-color: #e0e7ff !important;
  border-color: #c7d2fe !important;
  text-decoration: none !important;
}

/* Ensure no standard underline from prose */
.prose a.wiki-link {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* Potential Wiki Link Decoration (Auto-Backlinking) */
.potential-wiki-link {
  border-bottom: 2px dashed #818cf8;
  background-color: rgba(129, 140, 248, 0.05);
  cursor: pointer;
  transition: all 0.2s ease;
}

.potential-wiki-link:hover {
  background-color: rgba(129, 140, 248, 0.15);
}

/* =========================================
   MOBILE INDENTATION OPTIMIZATION
   (Max Width: 640px) - InsuWiki/260211
   Revised based on Feedback (Tighter)
   ========================================= */
@media (max-width: 640px) {

  /* 1. Unordered List (UL) - Aggressive Reduction */
  .ProseMirror ul,
  .prose .ProseMirror ul {
    padding-left: 0.6rem !important;
    /* 0.75rem -> 0.6rem (~9.6px) */
  }

  .ProseMirror ul ul::before {
    left: -0.3rem !important;
    /* Guide line adjusted */
  }

  /* Bullet Position Adjustment */
  .ProseMirror ul>li::before,
  .prose ul>li::before {
    left: -0.6rem !important;
    /* -1rem -> -0.6rem */
  }

  /* 2. Ordered List (OL) - Compact Mode */
  .ProseMirror ol,
  .prose ol {
    padding-left: 0.8rem !important;
    /* 1.25rem -> 0.8rem (~12.8px) */
  }

  /* Compact Numbering Box */
  .ProseMirror ol>li::before,
  .prose ol>li::before {
    width: 2.5rem !important;
    /* Slightly wider for deep numbers like 1.1.1.1. */
    left: -2.6rem !important;
    /* Pull back to align with text start loosely */
    font-size: 0.7rem !important;
    /* Smaller font for numbers */
    padding-right: 0.2rem !important;
    /* Tighter padding */
    letter-spacing: -0.05em;
    /* Tighten numbers */
    white-space: nowrap;
  }
}