/* draftpad.css
 * ───────────────────────────────────────────────────────────────────
 * 바닐라 draftPad — 타이포그래피·색·레이아웃의 단일 원천(single source).
 *
 * 구성 (위 → 아래):
 *
 *   1. TOKENS         디자인 시스템 — 색, 타입, 모션, 셰이프, 레이아웃
 *   2. RESET + BASE   전역 타이포 규칙. 폼 컨트롤(textarea/input/button/
 *                     kbd 등)은 기본적으로 폰트 속성을 상속하지 않으므로
 *                     명시적으로 inherit 시켜 시스템 한 벌로 통일한다.
 *   3. SHELL          .dp 루트 + 메인 스크롤 영역
 *   4. TABS           상단 크롬 — 알약형 탭 + ⌘K 검색 버튼
 *   5. DOC + BLOCKS   제목, 블록 리스트, 드래그 핸들, 렌더 레이어,
 *                     불릿/구분선 표시, 블록 액션 버튼
 *   6. PALETTE        ⌘K 커맨드 팔레트
 *   7. DIALOG         확인 모달
 *
 * 컴포넌트 블록은 토큰만 참조한다. 시스템 외부에서 폰트/자간을 따로
 * 지정하지 않는다. 한글이 1순위 케이스 — 음수 letter-spacing, 넉넉한
 * 행간(1.78), `palt` 비례 자간 메트릭이 전역 규칙에 녹아 있다.
 * ─────────────────────────────────────────────────────────────────── */


/* ═══ 1. TOKENS ════════════════════════════════════════════════════ */

:root {
  /* ── 색 ─────────────────────────────────────────────────────────
   * 차가운 회색 종이. 약간의 블루 언더톤(~210°)으로 'modern off-white'
   * 느낌. 따뜻하거나 마닐라톤이 아닌 쪽. 잉크 컬러도 같은 방향으로
   * 살짝 시프트 — 본문도 순수 검정이 아니라 미세한 슬레이트. */
  --paper:        #ffffff;
  --shell:        #f4f6f8;

  --ink-1:        #14181d;                  /* 본문 강조, 제목 */
  --ink-2:        #2a2f36;                  /* 본문 */
  --ink-3:        #5f6772;                  /* 보조 */
  --ink-4:        #9ca3ad;                  /* 부수, placeholder */

  /* 톤 워시 — 흰 종이 위에서 쓰는 모든 회색 채움의 단일 출처.
   * hover/active/border 상태는 의미별로 워시를 골라 쓴다. */
  --wash-1:       rgba(20, 28, 40, 0.04);
  --wash-2:       rgba(20, 28, 40, 0.06);
  --wash-3:       rgba(20, 28, 40, 0.08);
  --wash-4:       rgba(20, 28, 40, 0.12);

  /* 시맨틱 별칭 — 컴포넌트는 raw 워시가 아닌 이 이름을 사용. */
  --line:         var(--wash-3);            /* 헤어라인 */
  --line-strong:  rgba(20, 28, 40, 0.18);   /* 본문 구분선 */
  --hover:        var(--wash-1);            /* 일반 호버 배경 */
  --pill:         var(--wash-2);            /* 활성 탭 채움 */
  --pill-text:    var(--ink-1);
  --mark:         rgba(56, 92, 168, 0.14);  /* 검색·셀렉션 하이라이트 */
  --scrim:        rgba(20, 28, 40, 0.18);   /* 모달 배경 */

  --shadow-soft:
    0 1px 0 rgba(20, 28, 40, 0.04),
    0 24px 60px rgba(20, 28, 40, 0.16),
    0 2px 8px rgba(20, 28, 40, 0.06);
  --shadow-float: 0 8px 24px rgba(20, 28, 40, 0.10);

  --danger:       #b3261e;
  --danger-hover: #8c1d17;

  /* ── 타입 ───────────────────────────────────────────────────────
   * 단일 패밀리(Noto Sans KR), weight로만 위계를 표현. 사이즈는 UI 스케일
   * (xs..md)과, 본문(16.5px)으로의 의도적 점프를 함께 갖는다 — Medium·
   * Notion에 가까운 읽기 사이즈. */
  --font-sans:    'Noto Sans KR', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  --fs-xs:        11px;                     /* 메타, 푸터 kbd */
  --fs-sm:        12px;                     /* 탭, 검색 버튼 */
  --fs-base:      13.5px;                   /* 기본 UI */
  --fs-md:        14.5px;                   /* 팔레트 입력 */
  --fs-body:      16.5px;                   /* 문서 본문 */
  --fs-h1:        32px;                     /* 문서 제목 */

  --lh-tight:     1;                        /* 버튼, 인라인 UI */
  --lh-snug:      1.4;                      /* 짧은 UI 텍스트 */
  --lh-prose:     1.78;                     /* 본문 */

  /* 트래킹 — 한글에 맞춰 음수, 사이즈가 커질수록 더 타이트하게. */
  --tr-ui:        -0.1px;
  --tr-body:      -0.15px;
  --tr-h1:        -0.8px;

  /* ── 셰이프 / 모션 ──────────────────────────────────────────── */
  --r-sm:         4px;
  --r-md:         6px;
  --r-lg:         10px;
  --r-pill:       999px;

  --t-fast:       .12s;
  --t-base:       .2s;

  /* ── 레이아웃 ───────────────────────────────────────────────────
   * 문서·탭의 좌우 거터는 뷰포트에 비례한다. 최소 40px로 좁은 화면에서
   * 글이 가장자리에 붙는 걸 막고, 최대 160px로 넓은 화면에서 페이지가
   * "여백의 바다"로 보이지 않게 캡한다. */
  --gutter-x:     clamp(40px, 8vw, 160px);
}


/* ═══ 2. RESET + BASE ══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* 루트 타이포 — 모든 노드는 이 설정을 상속한다(명시적 오버라이드 외). */
html {
  font-family: var(--font-sans);
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'palt' 1;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;            /* 한글 단어 중간을 깨지 않음 */
  text-wrap: pretty;
  letter-spacing: var(--tr-ui);
  color: var(--ink-2);
  background: var(--paper);
}
body {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

/* 폼 컨트롤은 기본적으로 폰트 속성을 상속하지 않으므로, placeholder·
 * input·textarea·button·kbd가 모두 시스템 한 벌과 동일하게 보이도록
 * 명시적으로 inherit 시킨다. 컴포넌트별 오버라이드 없이도 통일된다. */
input, textarea, button, select, kbd {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-feature-settings: inherit;
  font-kerning: inherit;
  font-variant-ligatures: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  text-rendering: inherit;
}
button { background: none; border: none; padding: 0; cursor: pointer; }
input, textarea { background: transparent; border: none; outline: none; }
kbd { font-family: var(--font-mono); }
::placeholder { color: var(--ink-4); opacity: 1; letter-spacing: inherit; }
::selection { background: var(--mark); color: inherit; }


/* ═══ 3. SHELL ═════════════════════════════════════════════════════ */

.dp {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background: var(--paper);
  overflow: hidden;
}

.dp-main {
  flex: 1;
  background: var(--paper);
  overflow-y: auto;
  overflow-x: hidden;
}
.dp-main::-webkit-scrollbar { width: 10px; }
.dp-main::-webkit-scrollbar-thumb {
  background: var(--wash-3);
  border: 3px solid var(--paper);
  background-clip: padding-box;
  border-radius: 5px;
}
.dp-main::-webkit-scrollbar-thumb:hover {
  background: var(--wash-4);
  border: 3px solid var(--paper);
  background-clip: padding-box;
}


/* ═══ 4. TABS ══════════════════════════════════════════════════════
 * 유일한 상단 크롬: 알약형 탭(드래그로 순서 변경) + ⌘K 검색 버튼.
 * 탭 텍스트가 아래 본문 텍스트와 수직 정렬되도록, 탭 스트립의 좌우
 * padding은 gutter-x 에서 탭 자체의 12px 내부 padding을 뺀 값. 이렇게
 * 해야 첫 탭의 *글자*가 본문 제목의 x 좌표와 같은 선 위에 앉는다. */

.dp-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px calc(var(--gutter-x) - 12px) 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.dp-tabs-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.dp-tabs-row::-webkit-scrollbar { display: none; }

.dp-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  max-width: 220px;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-tight);
  color: var(--ink-3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dp-tab:hover { background: var(--hover); color: var(--ink-1); }
.dp-tab.is-active {
  background: var(--pill);
  color: var(--pill-text);
  font-weight: 500;
}
.dp-tab.is-active:hover { background: var(--wash-3); }
.dp-tab.is-dragging { opacity: 0.5; }

.dp-tab-name { overflow: hidden; text-overflow: ellipsis; }
.dp-tab input.dp-tab-rename {
  width: 8em;
  padding: 0;
  margin: 0;
}

/* 닫기 버튼 — 호버·활성 시 fade-in, 자체 호버 시 완전 불투명. */
.dp-tab-close {
  display: inline-flex;
  flex: none;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
  color: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--t-fast), background var(--t-fast);
}
.dp-tab-close svg { display: block; }
.dp-tab:hover .dp-tab-close,
.dp-tab.is-active .dp-tab-close { opacity: 0.5; }
.dp-tab-close:hover { background: var(--wash-3); opacity: 1; }

.dp-tab-add {
  display: inline-flex;
  flex: none;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  color: var(--ink-4);
  border-radius: 50%;
  transition: background var(--t-fast), color var(--t-fast);
}
.dp-tab-add svg { display: block; }
.dp-tab-add:hover { background: var(--hover); color: var(--ink-1); }

.dp-search-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 11px;
  margin-left: 8px;
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dp-search-btn:hover {
  color: var(--ink-1);
  background: var(--hover);
  border-color: var(--wash-4);
}
.dp-search-btn svg { opacity: 0.55; display: block; }
.dp-search-btn kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: 0.2px;
  color: var(--ink-3);
  background: var(--wash-1);
  border-radius: var(--r-sm);
}

/* sync 상태 버튼 — 검색 버튼 옆에 둠 */
.dp-sync-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 6px;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.dp-sync-btn:hover { background: var(--hover); color: var(--ink-1); }
.dp-sync-btn svg { opacity: 0.55; display: block; }
.dp-sync-btn.is-synced { color: var(--ink-2); }
.dp-sync-btn.is-synced svg { opacity: 0.85; }
.dp-sync-btn.is-connecting svg { opacity: 0.55; animation: dpPulse 1.4s ease-in-out infinite; }
.dp-sync-btn.is-offline svg { opacity: 0.4; }
@keyframes dpPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.85; }
}


/* ═══ 5. DOC + BLOCKS ══════════════════════════════════════════════ */

.dp-doc {
  width: 100%;
  padding: 56px var(--gutter-x) 240px;
}
.dp-doc-title {
  margin: 0 0 6px;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: var(--tr-h1);
  color: var(--ink-1);
  text-wrap: balance;
}
.dp-doc-title:empty::before {
  content: attr(data-placeholder);
  color: var(--ink-4);
}

.dp-blocks {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ── block row ────────────────────────────────────────────────────
 * 각 블록은 [거터 | 본문] 구조다. 거터는 드래그 핸들이 들어가는 자리이며
 * 음수 마진으로 본문 영역 바깥에 위치시킨다. 그렇게 해야 본문의 좌측
 * 시작선이 제목·‘새 블록’ 버튼과 정확히 같은 x로 정렬되고, 핸들은
 * 레이아웃을 흔들지 않으면서 호버에 따라 페이드 인/아웃 한다. */
.dp-block {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 1px 0;
  border-radius: 4px;
}
.dp-block.is-dragging .dp-block-body { opacity: 0.4; }
.dp-block.is-floating { z-index: 30; pointer-events: none; }
.dp-block.is-floating .dp-block-body {
  background: var(--paper);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  opacity: 1;
}

.dp-gutter {
  width: 28px;
  flex: none;
  display: flex;
  justify-content: flex-start;
  /* 한글(Noto Sans KR) 글리프는 라틴 cap-line보다 em-box에서 더 아래에
   * 앉는다. top 기준 strict 정렬이면 핸들 점들이 위로 떠 보이므로,
   * 첫 줄 글자의 광학 중심으로 살짝 내린다. */
  align-items: flex-start;
  padding-top: 10px;
  margin-left: -28px;
}
.dp-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  line-height: 0;
  color: var(--ink-4);
  background: transparent;
  border-radius: var(--r-sm);
  cursor: grab;
  opacity: 0;
  touch-action: none;
  transition: opacity var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.dp-handle:hover { background: var(--wash-1); color: var(--ink-2); }
.dp-handle:active { cursor: grabbing; }
.dp-block:hover .dp-handle { opacity: 1; }

/* ── block body ─────────────────────────────────────────────────── */
.dp-block-body {
  flex: 1;
  position: relative;
  min-width: 0;
  padding: 4px 0;
  border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.dp-block-body textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  resize: none;
  overflow: hidden;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  letter-spacing: var(--tr-body);
  word-spacing: 0.02em;
}

/* ── 렌더 레이어 ──────────────────────────────────────────────────
 * 블록이 마크업('-', '*', '--', '---')을 포함하고 포커스를 잃으면,
 * textarea는 흐름에 그대로 남아 본문 높이를 결정하되 visibility:hidden
 * 처리하고, 그 위에 prettified output을 그리는 렌더 레이어를 얹는다.
 * 렌더 영역을 클릭하면 textarea로 포커스가 이동하며 raw 텍스트로
 * 돌아간다. */
.dp-block-body textarea.is-rendered { visibility: hidden; }
.dp-block-render {
  position: absolute;
  top: 4px;        /* .dp-block-body padding-top과 일치 */
  left: 0;
  right: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  letter-spacing: var(--tr-body);
  word-spacing: 0.02em;
  color: var(--ink-1);
  cursor: text;
  pointer-events: auto;
}
.dp-block-render .dp-line {
  white-space: pre-wrap;
  word-break: break-word;
}
/* 불릿: '- foo'를 '• foo'로 표시하되, 본문 글자 시작 x는 textarea와
 * 동일하게 유지한다. 렌더↔편집을 오갈 때 줄이 좌우로 흔들리지 않도록.
 * 불릿(점)은 '- ' 두 글자가 차지하던 자리를 채운다. */
.dp-block-render .dp-li {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  text-indent: 0;
}
.dp-block-render .dp-li-dot {
  display: inline-block;
  width: 1ch;
  margin-right: 0.35ch;
  text-align: left;
  color: inherit;
}
/* 구분선: '-', '--', '---' 모두 같은 얇은 한 줄로 그린다. dash 개수는
 * 단지 입력 편의일 뿐. 구분선 줄은 한 line-height만큼의 세로 공간을
 * 차지해야, 여전히 리터럴 dash를 갖고 있는 textarea와 렌더 레이어의
 * 줄 위치가 어긋나지 않는다. */
.dp-block-render .dp-rule {
  display: flex;
  align-items: center;
  height: calc(var(--fs-body) * var(--lh-prose));
}
.dp-block-render .dp-rule::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line-strong);
}

/* ── 블록 액션 ────────────────────────────────────────────────────
 * 첫 줄 우측 가장자리에 떠 있는 아이콘 전용 버튼들(복사·잘라내기).
 * 테두리·그림자 없음. 대신 흰→투명 가로 그라디언트로 본문 텍스트가
 * 아이콘 아래로 흘러도 자연스럽게 페이드되어 가독성을 잃지 않는다.
 *
 * 표시 조건:
 *   - 커서가 블록의 우측 1/3 영역(.is-hot) → 표시
 *   - 입력 중(포커스)에는 숨김 — 사용자가 입력 중 거슬리지 않게
 */
.dp-block-actions {
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  height: calc(var(--fs-body) * var(--lh-prose) + 8px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-left: 40px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.94) 32%,
    rgba(255, 255, 255, 1)    60%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast);
}
.dp-block.is-hot:not(:focus-within) .dp-block-actions {
  opacity: 1;
  pointer-events: auto;
}
.dp-block-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 0;
  color: var(--ink-3);
  background: transparent;
  border-radius: var(--r-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.dp-block-action svg { display: block; }
.dp-block-action:hover,
.dp-block-action.is-flash {
  color: var(--ink-1);
  background: var(--wash-1);
}

/* ── 새 블록 버튼 ─────────────────────────────────────────────────
 * 빈 블록 한 칸과 동일한 시각 높이를 갖도록 min-height + line-height를
 * 맞췄다. 그래야 호버 배경이 placeholder 블록과 같은 세로 영역을
 * 채운다. 좌측 음수 마진으로 '+' 아이콘이 위쪽 거터의 핸들 컬럼과
 * 같은 x에 오도록 한다. */
.dp-add-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0 -6px;
  padding: 4px 10px;
  min-height: calc(var(--fs-body) * var(--lh-prose) + 8px);
  font-size: var(--fs-base);
  line-height: var(--lh-tight);
  color: var(--ink-4);
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast);
}
.dp-add-block svg { display: block; }
.dp-add-block > span:not([class]) { line-height: var(--lh-tight); }
.dp-add-block:hover { background: var(--hover); color: var(--ink-1); }

.dp-empty {
  padding: 60px 20px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--ink-4);
}


/* ═══ 6. PALETTE (⌘K) ══════════════════════════════════════════════ */

.dp-palette-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dp-palette {
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100% - 40px));
  background: var(--paper);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.dp-palette-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.dp-palette-input > span { display: inline-flex; line-height: 0; }
.dp-palette-input svg { flex: none; display: block; color: var(--ink-4); }
.dp-palette-input input {
  flex: 1;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-1);
}

.dp-palette-results {
  max-height: 360px;
  padding: 6px;
  overflow-y: auto;
}
.dp-palette-row {
  display: block;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border-radius: 7px;
}
.dp-palette-row.is-sel { background: var(--wash-1); }
.dp-palette-tab {
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ink-4);
}
.dp-palette-snip {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-2);
}
.dp-palette-snip mark {
  padding: 1px 2px;
  background: var(--mark);
  color: inherit;
  border-radius: 2px;
}
.dp-palette-empty {
  padding: 28px;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--ink-4);
}
.dp-palette-foot {
  display: flex;
  gap: 18px;
  padding: 9px 16px;
  font-size: var(--fs-xs);
  color: var(--ink-4);
  border-top: 1px solid var(--line);
}
.dp-palette-foot span { display: inline-flex; align-items: center; gap: 2px; }
.dp-palette-foot kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  min-height: 16px;
  margin-right: 4px;
  padding: 2px 5px;
  font-size: 10.5px;
  line-height: 1;
  color: var(--ink-3);
  background: var(--wash-2);
  border-radius: var(--r-sm);
}
.dp-palette-foot kbd svg { display: block; }


/* ═══ 7. CONFIRM DIALOG ════════════════════════════════════════════
 * 팔레트와 같은 백드롭 패밀리(scrim + blur)를 사용해 모달 시각 언어를
 * 통일한다. 카드는 더 좁고 수직 가운데 정렬. 백드롭 클릭, Esc, 양 버튼
 * 클릭으로 닫힌다. */

.dp-dlg-bg {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--scrim);
  backdrop-filter: blur(2px);
  animation: npFade .12s ease-out;
}
.dp-dlg {
  width: min(380px, calc(100% - 40px));
  padding: 22px 22px 16px;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}
.dp-dlg-title {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
.dp-dlg-body {
  margin-bottom: 20px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--ink-3);
}
.dp-dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.dp-dlg-btn {
  padding: 7px 14px;
  font-size: var(--fs-base);
  color: var(--ink-2);
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.dp-dlg-btn:hover { background: var(--hover); color: var(--ink-1); }
.dp-dlg-btn:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; }
.dp-dlg-btn.is-primary {
  background: var(--ink-1);
  color: var(--paper);
}
.dp-dlg-btn.is-primary:hover { background: #1a1916; color: var(--paper); }
.dp-dlg-btn.is-primary.is-danger { background: var(--danger); }
.dp-dlg-btn.is-primary.is-danger:hover { background: var(--danger-hover); }
.dp-dlg-btn.is-danger { color: var(--danger); }
.dp-dlg-btn.is-danger:hover { background: var(--danger); color: var(--paper); }

/* sync 모달 입력 */
.dp-dlg-sync { width: min(440px, calc(100% - 40px)); }
.dp-sync-help {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-3);
}
.dp-sync-label {
  display: block;
  margin-bottom: 12px;
}
.dp-sync-label > span {
  display: block;
  margin-bottom: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.dp-sync-input {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-1);
  background: var(--wash-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.dp-sync-input:focus {
  outline: none;
  border-color: var(--ink-3);
  background: var(--paper);
}
.dp-sync-reason {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--wash-2);
  border-radius: var(--r-md);
}
.dp-sync-advanced-row {
  margin-top: -4px;
  text-align: right;
}
.dp-sync-advanced {
  background: none;
  border: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.dp-sync-advanced:hover { color: var(--ink-1); background: var(--wash-2); }

/* 화면 잠금 — 로그인 모델: synced 가 아니면 본문 가림 */
.dp.is-locked .dp-main,
.dp.is-locked .dp-tabs-row,
.dp.is-locked .dp-search-btn { visibility: hidden; }

/* 강제 모달 — 배경 dimming 강화 + 클릭 무시 */
.dp-dlg-bg.is-forced { background: rgba(0,0,0,0.5); }

@keyframes npFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}