/* STANDARD 템플릿 (기본) — Figma 편집기 UI 느낌. 흰 패널 · 얇은 회색 선 · 둥근 모서리 · 촘촘한 글자(Pretendard) · 파란 강조.
   틀(배치 · 간격)은 그대로. 진행 바는 칸 나뉜 그대로(색만 부드럽게), 조직 색 위치도 그대로.
   설정 > 디자인의 기본값. <html data-skin="standard"> (db.js applyPrefs). 8BIT를 고르면 data-skin 없음.
   규칙은 :where()로 감싸 특이도를 올리지 않는다 → app.css의 완료 · 흐림 같은 상태 규칙이 그대로 이긴다.
   주의: .top 같은 조상에 backdrop-filter · transform · filter를 넣지 않는다 → 안의 설정 창(position: fixed)이 갇힌다. */

:root[data-skin="standard"] {
  --bar: var(--org-l, var(--fg));   /* 진행 바: 조직 색, 없으면 흑백 */
  --bg: #F5F5F5; --paper: #FFFFFF; --fg: #1E1E1E; --mid: #757575; --faint: #E6E6E6; --hover: #F0F0F0;
  --input: #F5F5F5; --track: #EBEBEB; --pill: #FFFFFF; --sub: #B3B3B3;
  /* 강조(포커스 · 체크 · 마우스 올린 테두리 · 칩) = 조직 색, 없으면 파랑 */
  --blue: var(--org-l, #0D99FF); --blue-ink: color-mix(in srgb, var(--blue) 80%, var(--fg)); --blue-bg: color-mix(in srgb, var(--blue) 12%, transparent); --red: #F24822;
  --bw: 1px; --line: #E6E6E6; --line-hi: color-mix(in srgb, var(--blue) 85%, var(--line));
  --org: var(--org-l, var(--blue)); --on-org: var(--on-org-l, #FFFFFF);
  --sh-card: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .02);
  --sh-pop: 0 0 0 .5px rgba(0, 0, 0, .18), 0 10px 24px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);
  --sh-pill: 0 1px 2px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .08);
  --pixel: "Pretendard Variable", Pretendard, Inter, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --body: "Pretendard Variable", Pretendard, Inter, -apple-system, "Apple SD Gothic Neo", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="standard"]:not([data-theme="light"]) {
    --bar: var(--org-d, var(--fg));
    --bg: #1E1E1E; --paper: #2C2C2C; --fg: #F5F5F5; --mid: #ACACAC; --faint: #444444; --hover: #383838;
    --input: #383838; --track: #383838; --pill: #555555; --sub: #6E6E6E;
    --blue: var(--org-d, #0C8CE9); --blue-ink: color-mix(in srgb, var(--blue) 75%, var(--fg)); --blue-bg: color-mix(in srgb, var(--blue) 20%, transparent);
    --line: #444444; --line-hi: color-mix(in srgb, var(--blue) 85%, var(--line));
    --org: var(--org-d, var(--blue)); --on-org: var(--on-org-d, #FFFFFF);
    --sh-card: 0 1px 3px rgba(0, 0, 0, .4); --sh-pop: 0 0 0 .5px rgba(0, 0, 0, .6), 0 10px 28px rgba(0, 0, 0, .5); --sh-pill: 0 1px 2px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-skin="standard"][data-theme="dark"] {
    --bar: var(--org-d, var(--fg));
  --bg: #1E1E1E; --paper: #2C2C2C; --fg: #F5F5F5; --mid: #ACACAC; --faint: #444444; --hover: #383838;
  --input: #383838; --track: #383838; --pill: #555555; --sub: #6E6E6E;
  --blue: var(--org-d, #0C8CE9); --blue-ink: color-mix(in srgb, var(--blue) 75%, var(--fg)); --blue-bg: color-mix(in srgb, var(--blue) 20%, transparent);
  --line: #444444; --line-hi: color-mix(in srgb, var(--blue) 85%, var(--line));
  --org: var(--org-d, var(--blue)); --on-org: var(--on-org-d, #FFFFFF);
  --sh-card: 0 1px 3px rgba(0, 0, 0, .4); --sh-pop: 0 0 0 .5px rgba(0, 0, 0, .6), 0 10px 28px rgba(0, 0, 0, .5); --sh-pill: 0 1px 2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* 촘촘한 글자: 기준 14px (rem도 같이 줄어든다) */
:root[data-skin="standard"] { font-size: 14px; }

/* ---- 모서리 */
:where(:root[data-skin="standard"]) .btn, :where(:root[data-skin="standard"]) .orgbtn, :where(:root[data-skin="standard"]) .tabs a, :where(:root[data-skin="standard"]) .iconbtn, :where(:root[data-skin="standard"]) .filters, :where(:root[data-skin="standard"]) .sw, :where(:root[data-skin="standard"]) .calitem, :where(:root[data-skin="standard"]) .pri, :where(:root[data-skin="standard"]) .note, :where(:root[data-skin="standard"]) .toast, :where(:root[data-skin="standard"]) .colorpick button, :where(:root[data-skin="standard"]) input[type=text], :where(:root[data-skin="standard"]) input[type=date], :where(:root[data-skin="standard"]) textarea, :where(:root[data-skin="standard"]) select { border-radius: 6px !important; }
:where(:root[data-skin="standard"]) .box, :where(:root[data-skin="standard"]) .proc, :where(:root[data-skin="standard"]) .pcard2, :where(:root[data-skin="standard"]) .mcard, :where(:root[data-skin="standard"]) .tpl, :where(:root[data-skin="standard"]) .statrow, :where(:root[data-skin="standard"]) .weekcal, :where(:root[data-skin="standard"]) .empty, :where(:root[data-skin="standard"]) .newcard, :where(:root[data-skin="standard"]) .newproc, :where(:root[data-skin="standard"]) .idea, :where(:root[data-skin="standard"]) .filepick { border-radius: 8px !important; }
:where(:root[data-skin="standard"]) .modal { border-radius: 12px !important; }
:where(:root[data-skin="standard"]) .filters button, :where(:root[data-skin="standard"]) .sw button, :where(:root[data-skin="standard"]) .filters .step { border-radius: 4px !important; }
:where(:root[data-skin="standard"]) .badge, :where(:root[data-skin="standard"]) .pin, :where(:root[data-skin="standard"]) .mkind, :where(:root[data-skin="standard"]) .doing, :where(:root[data-skin="standard"]) .pmmark, :where(:root[data-skin="standard"]) .collab-badge, :where(:root[data-skin="standard"]) .who .role, :where(:root[data-skin="standard"]) .preview-procs span, :where(:root[data-skin="standard"]) input[type=checkbox] { border-radius: 4px !important; }
:where(:root[data-skin="standard"]) .tag { border-radius: 50% !important; }
:where(:root[data-skin="standard"]) .seg i { border-radius: 0 !important; }
:where(:root[data-skin="standard"]) .proc, :where(:root[data-skin="standard"]) .statrow, :where(:root[data-skin="standard"]) .weekcal { overflow: hidden; }

/* ---- 글자 */
:where(:root[data-skin="standard"]) body { font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
:where(:root[data-skin="standard"]) h1, :where(:root[data-skin="standard"]) h2 { letter-spacing: -.01em; }
:where(:root[data-skin="standard"]) h1 { font-weight: 600; }
:where(:root[data-skin="standard"]) h2 { font-weight: 600; }
:where(:root[data-skin="standard"]) .ptitle { font-weight: 700; text-transform: none; letter-spacing: -.02em; font-size: 1.85rem; }
:where(:root[data-skin="standard"]) .ptitle small { font-size: .95rem; }
:where(:root[data-skin="standard"]) .px { letter-spacing: 0; }
:where(:root[data-skin="standard"]) .px.reg { font-weight: 600; }
:where(:root[data-skin="standard"]) .label { font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--mid); }
:where(:root[data-skin="standard"]) .proc-h .nm b { font-weight: 600; }
:where(:root[data-skin="standard"]) .task .st { font-size: 11px; }

/* ---- 상단 */
:where(:root[data-skin="standard"]) .top { background: var(--paper); border-bottom-width: 1px; }
:where(:root[data-skin="standard"]) .orgbtn { border-width: 1px; font-weight: 600; padding: 3px 10px; }
:where(:root[data-skin="standard"]) .tabs { gap: 2px; }
:where(:root[data-skin="standard"]) .tabs a { border: 0; padding: 5px 10px; color: var(--mid); font-weight: 500; }
:where(:root[data-skin="standard"]) .tabs a:not(.on):hover { background: var(--hover); color: var(--fg); }
:where(:root[data-skin="standard"]) .tabs a.on { background: color-mix(in srgb, var(--org) 14%, transparent); color: var(--fg); font-weight: 600; }
:where(:root[data-skin="standard"]) .iconbtn { border: 0; }
:where(:root[data-skin="standard"]) .iconbtn:hover { background: var(--hover); }

/* ---- 버튼 */
:where(:root[data-skin="standard"]) .btn { border: 1px solid var(--line); background: var(--paper); font-weight: 500; padding: 5px 12px; transition: background .12s, border-color .12s; }
:where(:root[data-skin="standard"]) .btn:hover { background: var(--hover); }
:where(:root[data-skin="standard"]) .btn:active { transform: none; }
:where(:root[data-skin="standard"]) .btn.sm { padding: 2px 8px; font-size: 12px; }
:where(:root[data-skin="standard"]) .btn.solid { background: var(--org); border-color: transparent; color: var(--on-org); box-shadow: none; font-weight: 600; }
:where(:root[data-skin="standard"]) .btn.solid:hover { background: var(--org); filter: brightness(.95); }
:where(:root[data-skin="standard"]) .btn.ghost { border-color: transparent; background: transparent; color: var(--mid); }
:where(:root[data-skin="standard"]) .btn.ghost:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
:where(:root[data-skin="standard"]) .btn.danger { background: var(--red); border-color: transparent; color: #FFFFFF; }
:where(:root[data-skin="standard"]) .btn.danger:hover { background: var(--red); filter: brightness(.94); }
:where(:root[data-skin="standard"]) .btn:disabled { opacity: .4; }

/* ---- 입력: 회색 바탕, 테두리는 마우스 · 포커스 때만 */
:where(:root[data-skin="standard"]) input[type=text], :where(:root[data-skin="standard"]) input[type=date], :where(:root[data-skin="standard"]) textarea, :where(:root[data-skin="standard"]) select { background: var(--paper); border: 1px solid var(--line); padding: 6px 10px; }
:where(:root[data-skin="standard"]) input[type=text]:hover, :where(:root[data-skin="standard"]) input[type=date]:hover, :where(:root[data-skin="standard"]) textarea:hover, :where(:root[data-skin="standard"]) select:hover { border-color: var(--line-hi); }
:where(:root[data-skin="standard"]) input[type=text]:focus, :where(:root[data-skin="standard"]) input[type=date]:focus, :where(:root[data-skin="standard"]) textarea:focus, :where(:root[data-skin="standard"]) select:focus { outline: none; border-color: var(--blue); background: var(--paper); }
:where(:root[data-skin="standard"]) input.bare { background: transparent; border: 1px solid transparent; border-radius: 6px !important; padding: 4px 6px; }
:where(:root[data-skin="standard"]) input.bare:hover { border-color: var(--line); }
:where(:root[data-skin="standard"]) input.bare:focus { border-color: var(--blue); }
:where(:root[data-skin="standard"]) :focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
:where(:root[data-skin="standard"]) input[type=checkbox] { border: 1px solid var(--sub); background: var(--paper); }
:where(:root[data-skin="standard"]) input[type=checkbox]:hover { border-color: var(--blue); }
:where(:root[data-skin="standard"]) input[type=checkbox]:checked { background: var(--blue); border-color: var(--blue); }
:where(:root[data-skin="standard"]) input[type=checkbox]:checked::after { width: 4px; height: 8px; background: none; border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* ---- 카드 · 패널 */
:where(:root[data-skin="standard"]) .box, :where(:root[data-skin="standard"]) .proc, :where(:root[data-skin="standard"]) .pcard2, :where(:root[data-skin="standard"]) .mcard, :where(:root[data-skin="standard"]) .tpl, :where(:root[data-skin="standard"]) .statrow, :where(:root[data-skin="standard"]) .weekcal { border: 1px solid var(--line); background: var(--paper); box-shadow: none; }
:where(:root[data-skin="standard"]) .pcard, :where(:root[data-skin="standard"]) .mcard { transition: box-shadow .15s, border-color .15s; }
:where(:root[data-skin="standard"]) .pcard:hover, :where(:root[data-skin="standard"]) .mcard:hover { transform: none; box-shadow: var(--sh-card); border-color: var(--line-hi); }
:where(:root[data-skin="standard"]) .mcard.pinned { box-shadow: inset 3px 0 0 var(--org); }
:where(:root[data-skin="standard"]) .tpl { border-width: 1px; }
:where(:root[data-skin="standard"]) .tpl:hover { border-color: var(--line-hi); }
:where(:root[data-skin="standard"]) .tpl.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
:where(:root[data-skin="standard"]) .proc-b, :where(:root[data-skin="standard"]) .rule { border-top-width: 1px; border-top-color: var(--line); }
:where(:root[data-skin="standard"]) .pcard2.finished { border-color: var(--line); }
:where(:root[data-skin="standard"]) .pcard2.finished .badge { background: var(--input); color: var(--mid); }
:where(:root[data-skin="standard"]) .newcard, :where(:root[data-skin="standard"]) .newproc, :where(:root[data-skin="standard"]) .empty, :where(:root[data-skin="standard"]) .filepick, :where(:root[data-skin="standard"]) .idea { border: 1px dashed var(--sub); }
:where(:root[data-skin="standard"]) .newcard:hover, :where(:root[data-skin="standard"]) .newproc:focus-within, :where(:root[data-skin="standard"]) .filepick:hover, :where(:root[data-skin="standard"]) .idea:hover { border-color: var(--blue); color: var(--blue-ink); border-style: solid; }
:where(:root[data-skin="standard"]) .note { border: 0; background: var(--blue-bg); padding: 10px 14px; }
:where(:root[data-skin="standard"]) .overlay { background: rgba(0, 0, 0, .28); }
:where(:root[data-skin="standard"]) .modal { border: 0; box-shadow: var(--sh-pop); background: var(--paper); padding: 20px; }
:where(:root[data-skin="standard"]) .toast { background: #1E1E1E; color: #FFFFFF; border: 0; box-shadow: var(--sh-pop); border-radius: 8px !important; }

/* ---- 목록 줄 */
:where(:root[data-skin="standard"]) .task { border-bottom-color: var(--line); }
:where(:root[data-skin="standard"]) .task.mine { box-shadow: inset 2px 0 0 var(--org); }
:where(:root[data-skin="standard"]) .task.compact.mine { box-shadow: none; }
:where(:root[data-skin="standard"]) .clrow, :where(:root[data-skin="standard"]) .logline, :where(:root[data-skin="standard"]) .mitem { border-bottom-color: var(--line); }
:where(:root[data-skin="standard"]) .due.late { color: var(--red); text-decoration: none; font-weight: 600; }
:where(:root[data-skin="standard"]) .pri { border: 1px solid var(--red); color: var(--red); }

/* ---- 칸 진행 바: 칸은 그대로, 둥글고 부드럽게 */
/* ---- 진행 바: 얇고 둥근 한 줄 (칸 사이는 1px 틈). 색 = --bar: 조직 색, 없으면 흑백. 완료 = 진하게, 진행 중 = 옅게, 할 일 = 회색 */
:where(:root[data-skin="standard"]) .seg { gap: 1px; height: 8px; border-radius: 999px !important; overflow: hidden; }
:where(:root[data-skin="standard"]) .seg.lg { height: 10px; gap: 1px; }
:where(:root[data-skin="standard"]) .seg.sm { height: 6px; }
:where(:root[data-skin="standard"]) .seg i { background: var(--faint); }
:where(:root[data-skin="standard"]) .seg i.d { background: var(--bar); }
:where(:root[data-skin="standard"]) .seg i.w { background: color-mix(in srgb, var(--bar) 35%, var(--paper)); }
:where(:root[data-skin="standard"]) .dim .seg i.d, :where(:root[data-skin="standard"]) .pcard2.finished .seg i.d { background: color-mix(in srgb, var(--mid) 60%, var(--paper)); }
:where(:root[data-skin="standard"]) .dim .seg i.w { background: color-mix(in srgb, var(--mid) 25%, var(--paper)); }
:where(:root[data-skin="standard"]) .legend span::before { border-radius: 2px; width: 10px; height: 6px; vertical-align: 1px; }
:where(:root[data-skin="standard"]) .legend .d::before { background: var(--bar); }
:where(:root[data-skin="standard"]) .legend .w::before { background: color-mix(in srgb, var(--bar) 35%, var(--paper)); }

/* ---- 칩 · 배지 */
:where(:root[data-skin="standard"]) .tag { border-width: 1.5px; font-family: var(--body); font-size: 10px; font-weight: 600; background: var(--paper); }
:where(:root[data-skin="standard"]) .badge { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0; background: var(--input); color: var(--fg); padding: 1px 6px; }
:where(:root[data-skin="standard"]) .pin { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 5px; }
:where(:root[data-skin="standard"]) .doing { border: 0; background: var(--blue-bg); color: var(--blue-ink); font-size: 11px; font-weight: 600; padding: 1px 6px; }
:where(:root[data-skin="standard"]) .mkind, :where(:root[data-skin="standard"]) .who .role, :where(:root[data-skin="standard"]) .collab-badge, :where(:root[data-skin="standard"]) .preview-procs span, :where(:root[data-skin="standard"]) .pmmark { border-color: var(--line); font-family: var(--body); letter-spacing: 0; }
:where(:root[data-skin="standard"]) .mkind, :where(:root[data-skin="standard"]) .who .role { font-size: 11px; padding: 0 6px; }

/* ---- 세그먼트 버튼 (필터 · 상태 전환): 회색 바탕 + 흰 알약 */
:where(:root[data-skin="standard"]) .filters, :where(:root[data-skin="standard"]) .sw { border: 0; background: var(--track); padding: 2px; gap: 2px; }
:where(:root[data-skin="standard"]) .filters button, :where(:root[data-skin="standard"]) .sw button, :where(:root[data-skin="standard"]) .filters .step { background: transparent; border: 0 !important; color: var(--mid); font-weight: 500; padding: 3px 10px; transition: background .12s, color .12s; }
:where(:root[data-skin="standard"]) .sw button { font-family: var(--body); font-size: 12px; }
:where(:root[data-skin="standard"]) .filters button:not(.on):hover, :where(:root[data-skin="standard"]) .sw button:not(.on):hover { color: var(--fg); }
:where(:root[data-skin="standard"]) .filters button.on, :where(:root[data-skin="standard"]) .sw button.on, :where(:root[data-skin="standard"]) .filters .step.on { background: var(--pill); color: var(--fg); font-weight: 600; box-shadow: var(--sh-pill); }

/* ---- 달력 · 숫자 칸 */
:where(:root[data-skin="standard"]) .calitem { border: 1px solid var(--line); background: var(--paper); }
:where(:root[data-skin="standard"]) .calitem:hover { border-color: var(--line-hi); background: var(--paper); }
:where(:root[data-skin="standard"]) .calday.today { background: var(--blue-bg); }
:where(:root[data-skin="standard"]) .statrow .stat b { font-weight: 700; }
:where(:root[data-skin="standard"]) .colorpick button { border: 1px solid var(--line); }
:where(:root[data-skin="standard"]) .colorpick button.on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }

@media (prefers-reduced-motion: reduce) { :where(:root[data-skin="standard"]) * { transition: none !important; } }

/* ---- 로딩 화면: 가는 선 위를 파란 막대가 오간다 (Figma 불러오기 느낌) */
:where(:root[data-skin="standard"]) .ld-logo { font-size: 1.4rem; }
:where(:root[data-skin="standard"]) .ld-bar { width: 140px; height: 3px; gap: 0; border-radius: 3px; background: var(--faint); overflow: hidden; position: relative; }
:where(:root[data-skin="standard"]) .ld-bar i { display: none; }
:where(:root[data-skin="standard"]) .ld-bar::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 3px; background: var(--blue); animation: ld-slide 1.1s ease-in-out infinite; }
@keyframes ld-slide { 0% { left: -40%; } 100% { left: 100%; } }
:where(:root[data-skin="standard"]) .ld-text { font-family: var(--body); font-size: 12px; }
:where(:root[data-skin="standard"]) .ld-text::after { content: none; }
@media (prefers-reduced-motion: reduce) { :where(:root[data-skin="standard"]) .ld-bar::before { animation: none; left: 30%; } }