/* Doing 테마 '책상 위 문서' (data-skin="desk", 기본값) — 기존 디자인은 data-skin="classic" 이면 이 파일이 아무것도 바꾸지 않음
 * 따뜻한 회색 책상 위에 면 종이(카드)가 놓인 느낌: 빛은 왼쪽 하나라 그림자는 모두 오른쪽 아래로.
 * 버튼 = 눌러 찍은 종이 카드, 선택 = 홈에 끼운 카드, 완료 = 비스듬히 찍힌 코랄 도장. 색은 토큰으로만.
 * 라이트/다크는 기존 data-theme 그대로 (desk 라이트 = A, desk 다크 = B, classic 라이트 = C, classic 다크 = D) */

/* ── 토큰: A 라이트 ───────────────────────── */
:root[data-skin="desk"] {
  --bg: oklch(94.3% 0.008 64);
  --side: oklch(97% 0.006 55); --side-2: oklch(91.5% 0.009 55); --side-text: oklch(21% 0.012 38); --side-muted: oklch(45% 0.013 45);
  --panel: oklch(94.5% 0.007 55); --surface: oklch(98.8% 0.0045 80); --surface-2: oklch(96.2% 0.006 62);
  --text: oklch(21% 0.012 38); --muted: oklch(45% 0.013 45); --faint: oklch(58% 0.012 50);
  --line: oklch(87% 0.009 55); --line-2: oklch(81% 0.011 55);
  --ink: oklch(22% 0.011 40); --ink-tx: oklch(96.5% 0.006 70);
  --accent: oklch(55.5% 0.15 33); --accent-tx: oklch(99% 0.004 80);
  --desk-paid: oklch(55.5% 0.15 33); --desk-coral: oklch(74% 0.125 30); --desk-focus: oklch(54% 0.17 30);
  --desk-shade: 32% 0.03 50; --desk-lit: 100% 0.005 80;
  --desk-edge: inset 0 1px 0 oklch(var(--desk-lit) / 0.9), inset 0 -1px 0 oklch(var(--desk-shade) / 0.07), 0 0 0 0.5px oklch(var(--desk-shade) / 0.22), 0 1px 0 oklch(var(--desk-shade) / 0.12);
  --desk-cast: 6px 5px 10px -6px oklch(var(--desk-shade) / 0.3);
  --desk-lift: 12px 10px 18px -8px oklch(var(--desk-shade) / 0.3);
  --desk-groove: inset 1px 1.5px 2px oklch(var(--desk-shade) / 0.16), inset -1px -1px 0 oklch(var(--desk-lit) / 0.9), 0 0 0 0.5px oklch(var(--desk-shade) / 0.2);
  --shadow: var(--desk-edge), var(--desk-cast);
  --shadow-lg: var(--desk-edge), 18px 22px 40px -16px oklch(var(--desk-shade) / 0.38);
  --r-lg: 16px; --r: 12px; --r-sm: 9px; --r-card: 10px; --r-tag: 7px;
  --paper: oklch(98.8% 0.0045 80); --paper-line: oklch(87% 0.009 55 / 0.7); --paper-edge: oklch(87% 0.009 55); --paper-tape: oklch(74% 0.125 30 / 0.25);
  --meeting-bg: oklch(22% 0.011 40); --meeting-tx: oklch(96.5% 0.006 70);
  --routine-bg: oklch(91.5% 0.009 55); --routine-tx: oklch(29% 0.013 40);
  --later-bg: oklch(92.5% 0.008 60); --later-tx: oklch(36% 0.012 45); --later-lane: oklch(95.5% 0.006 60);
  --hold-bg: oklch(91.5% 0.009 55); --hold-tx: oklch(36% 0.012 45); --hold-lane: oklch(95% 0.007 58);
}
/* ── 토큰: B 다크 ─────────────────────────── */
:root[data-skin="desk"][data-theme="dark"] {
  --bg: oklch(19% 0.01 40);
  --side: oklch(22% 0.011 40); --side-2: oklch(29% 0.012 44); --side-text: oklch(95% 0.006 70); --side-muted: oklch(74% 0.01 60);
  --panel: oklch(24.5% 0.011 42); --surface: oklch(26.5% 0.01 50); --surface-2: oklch(23.5% 0.01 45);
  --text: oklch(95% 0.006 70); --muted: oklch(74% 0.01 60); --faint: oklch(60% 0.01 55);
  --line: oklch(34% 0.01 50); --line-2: oklch(40% 0.011 50);
  --ink: oklch(93% 0.008 70); --ink-tx: oklch(20% 0.011 40);
  --accent: oklch(74% 0.125 30); --accent-tx: oklch(20% 0.011 40);
  --desk-paid: oklch(75% 0.13 33); --desk-coral: oklch(74% 0.125 30); --desk-focus: oklch(78% 0.14 30);
  --desk-shade: 5% 0.01 40; --desk-lit: 100% 0.005 80;
  --desk-edge: inset 0 1px 0 oklch(var(--desk-lit) / 0.07), inset 0 -1px 0 oklch(var(--desk-shade) / 0.4), 0 0 0 0.5px oklch(var(--desk-shade) / 0.7), 0 1px 0 oklch(var(--desk-shade) / 0.5);
  --desk-cast: 6px 5px 12px -6px oklch(var(--desk-shade) / 0.75);
  --desk-lift: 12px 10px 20px -8px oklch(var(--desk-shade) / 0.75);
  --desk-groove: inset 1px 1.5px 3px oklch(var(--desk-shade) / 0.6), inset -1px -1px 0 oklch(var(--desk-lit) / 0.05), 0 0 0 0.5px oklch(var(--desk-shade) / 0.6);
  --shadow-lg: var(--desk-edge), 18px 22px 40px -16px oklch(var(--desk-shade) / 0.8);
  --paper: oklch(26.5% 0.01 50); --paper-line: oklch(40% 0.011 50 / 0.6); --paper-edge: oklch(34% 0.01 50); --paper-tape: oklch(74% 0.125 30 / 0.3);
  --meeting-bg: oklch(93% 0.008 70); --meeting-tx: oklch(20% 0.011 40);
  --routine-bg: oklch(31% 0.012 45); --routine-tx: oklch(90% 0.008 65);
  --later-bg: oklch(30% 0.011 45); --later-tx: oklch(88% 0.008 65); --later-lane: oklch(23% 0.01 44);
  --hold-bg: oklch(31% 0.012 45); --hold-tx: oklch(88% 0.008 65); --hold-lane: oklch(23.5% 0.01 44);
}

/* ── 바탕 · 포커스 · 선택 ──────────────────── */
:root[data-skin="desk"] body { background: var(--bg); }
:root[data-skin="desk"] ::selection { background: oklch(74% 0.125 30 / 0.28); color: var(--text); }
:root[data-skin="desk"] { scrollbar-color: var(--line-2) transparent; caret-color: var(--desk-focus); }
:root[data-skin="desk"] :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--desk-focus); outline-offset: 2px; }
:root[data-skin="desk"] input:focus, :root[data-skin="desk"] select:focus, :root[data-skin="desk"] textarea:focus { border-color: var(--desk-focus); }
:root[data-skin="desk"] input, :root[data-skin="desk"] select, :root[data-skin="desk"] textarea { background: var(--surface); border-color: var(--line-2); }
:root[data-skin="desk"] .de-code-b textarea { background: transparent; } /* 코드 칸: 색 입힌 글자(pre)가 투명 입력칸 뒤에 있음 — 칸 배경을 칠하면 코드가 가려짐 */

/* ── 메뉴(사이드바): 종이 한 장 ─────────────── */
:root[data-skin="desk"] .sidebar { background: var(--side); border-right: 0; box-shadow: var(--desk-edge), 4px 0 12px -10px oklch(var(--desk-shade) / 0.35); }
:root[data-skin="desk"] .nav-item { border-radius: var(--r-sm); }
:root[data-skin="desk"] .nav-item:hover { background: var(--side-2); }
:root[data-skin="desk"] .nav-item.on, :root[data-skin="desk"][data-theme="dark"] .nav-item.on { background: var(--surface); color: var(--text); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .nav-item .badge { border-radius: 999px; background: var(--ink); color: var(--ink-tx); }
:root[data-skin="desk"] .add-btn { background: var(--ink); color: var(--ink-tx); border-radius: var(--r); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .add-btn:hover { filter: none; transform: translateY(-1px); box-shadow: var(--desk-edge), var(--desk-lift); }
:root[data-skin="desk"] .user-box { background: var(--surface); box-shadow: var(--desk-edge), var(--desk-cast); border-radius: var(--r); }

/* ── 카드(패널) = 면 종이 ───────────────────── */
:root[data-skin="desk"] .card-panel,
:root[data-skin="desk"] .kpi,
:root[data-skin="desk"] .mini-kpis .mk,
:root[data-skin="desk"] .rcard, :root[data-skin="desk"] .card, :root[data-skin="desk"] .meet { background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .panel-title { font-weight: 700; letter-spacing: -0.01em; }
:root[data-skin="desk"] .main-title { font-weight: 700; letter-spacing: -0.03em; }
:root[data-skin="desk"] .mini-kpis .mk b, :root[data-skin="desk"] .kpi .kv { font-weight: 500; font-variant-numeric: tabular-nums; }
:root[data-skin="desk"] .notice-card { transform: rotate(-0.3deg); border-radius: var(--r); }

/* ── 버튼 = 눌러 찍은 종이 카드 ─────────────── */
:root[data-skin="desk"] .btn { background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--desk-edge), var(--desk-cast); transition: transform 150ms ease, box-shadow 150ms ease, color 150ms ease; }
:root[data-skin="desk"] .btn:hover { border-color: transparent; transform: translateY(-1px); box-shadow: var(--desk-edge), var(--desk-lift); }
:root[data-skin="desk"] .btn:active { transform: none; box-shadow: var(--desk-groove); }
:root[data-skin="desk"] .btn:disabled, :root[data-skin="desk"] .btn[disabled] { opacity: .45; transform: none; box-shadow: var(--desk-edge); cursor: not-allowed; }
:root[data-skin="desk"] .btn.dark, :root[data-skin="desk"][data-theme="dark"] .btn.dark,
:root[data-skin="desk"] .quick .go, :root[data-skin="desk"][data-theme="dark"] .quick .go { background: var(--ink); color: var(--ink-tx); border-color: var(--ink); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .btn.accent { background: var(--accent); color: var(--accent-tx); }
:root[data-skin="desk"] .btn.ghost { background: transparent; box-shadow: none; }
:root[data-skin="desk"] .btn.ghost:hover { background: var(--panel); transform: none; box-shadow: none; }
:root[data-skin="desk"] .btn.sm { border-radius: var(--r-sm); }
:root[data-skin="desk"] .icon-btn:hover { background: var(--panel); }

/* ── 고르기(세그먼트·탭) = 홈에 끼운 카드 ────── */
/* 묶음 틀(홈)은 세그먼트에만 얕게. 창 위 종류 탭·요일은 틀 없이 낱개 버튼 (기존 디자인과 같은 크기) */
:root[data-skin="desk"] .seg, :root[data-skin="desk"] .htabs, :root[data-skin="desk"] .cat-tabs, :root[data-skin="desk"] .status-seg { background: var(--panel); box-shadow: inset 0 1px 2px oklch(var(--desk-shade) / 0.12); border-radius: var(--r-sm); padding: 3px; }
:root[data-skin="desk"] .seg button { border-radius: 7px; }
:root[data-skin="desk"] .type-tabs button, :root[data-skin="desk"] .wd-pick button { background: var(--surface-2); border-radius: var(--r-sm); }
:root[data-skin="desk"] .type-tabs button:hover, :root[data-skin="desk"] .wd-pick button:hover { background: var(--panel); color: var(--text); }
:root[data-skin="desk"] .seg button.on, :root[data-skin="desk"][data-theme="dark"] .seg button.on,
:root[data-skin="desk"] .htab.on,
:root[data-skin="desk"] .cat-tabs button.ct.on, :root[data-skin="desk"][data-theme="dark"] .cat-tabs button.ct.on,
:root[data-skin="desk"] .type-tabs button.on, :root[data-skin="desk"][data-theme="dark"] .type-tabs button.on,
:root[data-skin="desk"] .status-seg button.on,
:root[data-skin="desk"] .wd-pick button.on, :root[data-skin="desk"][data-theme="dark"] .wd-pick button.on { background: var(--surface); color: var(--text); border-color: transparent; box-shadow: var(--desk-edge), 2px 2px 4px -2px oklch(var(--desk-shade) / 0.3); }
/* 요일·종류 탭은 틀이 없어 '켜짐'이 흰 종이만으로는 약함 → 진한 잉크로 (기존 디자인과 같은 구분) */
:root[data-skin="desk"] .type-tabs button.on, :root[data-skin="desk"][data-theme="dark"] .type-tabs button.on,
:root[data-skin="desk"] .wd-pick button.on, :root[data-skin="desk"][data-theme="dark"] .wd-pick button.on { background: var(--ink); color: var(--ink-tx); }

/* ── 칩 · 꼬리표: 둥근 알약 대신 작은 꼬리표 ──── */
:root[data-skin="desk"] .chip { border-radius: 999px; }
:root[data-skin="desk"] .tag { border-radius: var(--r-tag); }
:root[data-skin="desk"] .pill { border-radius: var(--r-tag); }

/* ── 업무 카드 = 색인 카드 ──────────────────── */
:root[data-skin="desk"] .task { border-radius: var(--r-card); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .task:hover { border-color: transparent; box-shadow: var(--desk-edge), var(--desk-lift); }
:root[data-skin="desk"] .lane { border-radius: var(--r); box-shadow: var(--desk-groove); }

/* ── 홈 일정: 색인 카드 + 완료 도장 ─────────── */
:root[data-skin="desk"] .sch { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .sch:hover { background: var(--surface); box-shadow: var(--desk-edge), var(--desk-lift); }
:root[data-skin="desk"] .sch.now { outline: 0; box-shadow: var(--desk-edge), var(--desk-lift), inset 3px 0 0 var(--desk-paid); }
:root[data-skin="desk"] .sch.done { opacity: .9; }
:root[data-skin="desk"] .sch.done .tt::after { content: "완료"; display: inline-block; margin-left: 10px; padding: 0 6px; border: 2px solid var(--desk-paid); border-radius: 5px; color: var(--desk-paid); font-size: 11px; font-weight: 800; line-height: 16px; text-decoration: none; transform: rotate(-5deg); vertical-align: 1px; }
:root[data-skin="desk"] .sch .tm { font-variant-numeric: tabular-nums; }
:root[data-skin="desk"] .stackbar { border-radius: var(--r-sm); box-shadow: var(--desk-groove); padding: 2px; gap: 2px; }
:root[data-skin="desk"] .stackbar span { border-radius: 6px; }
:root[data-skin="desk"] .stat-table tr[data-who]:hover td { background: var(--panel); }

/* ── 창(모달) · 팝오버 ─────────────────────── */
:root[data-skin="desk"] .modal { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
:root[data-skin="desk"] .modal-back { background: oklch(20% 0.012 40 / 0.36); }
:root[data-skin="desk"] .popover { border: 0; border-radius: var(--r); box-shadow: var(--shadow-lg); }

/* ── 안내(고양이 말풍선) · 홈 고양이 ────────── */
:root[data-skin="desk"] .cat-say .toast { background: var(--surface); border: 0; box-shadow: var(--desk-edge), var(--desk-lift); }
:root[data-skin="desk"] .cat-say .toast.alarm { background: var(--accent); color: var(--accent-tx); } /* 알림 말풍선: 흰 글자가 종이색 배경에 묻히지 않게 기존처럼 강조색 칸 */
:root[data-skin="desk"] .cat-say .toast.alarm button { color: var(--accent-tx) !important; }
:root[data-skin="desk"] .home-cat .thought, :root[data-skin="desk"] .home-cat .tb { background: var(--surface); border: 0; box-shadow: var(--desk-edge), var(--desk-cast); }

/* ── 바로가기 위젯 ─────────────────────────── */
:root[data-skin="desk"] .lk a { background: var(--surface); border: 0; border-radius: var(--r); box-shadow: var(--desk-edge), var(--desk-cast); }
:root[data-skin="desk"] .lk a:hover { box-shadow: var(--desk-edge), var(--desk-lift); }

@media (prefers-reduced-motion: reduce) {
  :root[data-skin="desk"] .btn, :root[data-skin="desk"] .add-btn { transition: none; }
  :root[data-skin="desk"] .btn:hover, :root[data-skin="desk"] .add-btn:hover { transform: none; }
}