/* =====================================================================
 * 손글씨 노트(note_ui.js .ne-app) 테마 덮개 — 테마 4종 × 라이트·다크 (디자인팀 ui-designer, 2026-11-02)
 *   기준: note_ui.js / note_app.js / note_engine.js = 02_작업_v1.11.0d (version.js 표기는 아직 1.10.0)
 *   토큰: themes\nw-themes.css (html[data-nw-theme][data-nw-mode] 에 붙는 --bg --surface … )
 *
 * 넣는 법: index.html 에서 css/nw-themes.css 바로 다음에 <link rel="stylesheet" href="css/note-theme.css?v=…">
 *          (+ sw.js FILES 에 'css/note-theme.css'). 자세한 순서·JS 두 곳 수정: 메모테마_대응표.md 4절.
 * 켜지는 조건: <html data-nw-theme> 이 있을 때만. 없으면 아무것도 안 바꾼다 (노트 자체 색표 그대로 = 되돌림 안전).
 *
 * 무게(우선순위) — note_ui.js 는 실행 중에 <style id="ne-ui-css"> 를 head 맨 끝에 붙인다 (이 파일보다 뒤).
 *   그래서 :where() 를 쓰지 않고 html[data-nw-theme] 로 무게를 올린다.
 *   노트 쪽 가장 센 색 규칙  @media(prefers-color-scheme:dark) .ne-app:not([data-theme=light]):not([data-theme=dark])  = (0,3,0)
 *   이 파일의 색 규칙        html[data-nw-theme][data-nw-mode=M] .ne-app:not([data-theme=…])                         = (0,4,1)  → 이김
 *   박힌 색 풀기·테마 5 모양  html[data-nw-theme…] + 원래 선택자                                                         = 원래 + (0,1,1) 이상
 *
 * 밝기 규칙 (메모테마_대응표.md 2절)
 *   노트 설정 '기기 따라'(data-theme 없음) → 앱 밝기(data-nw-mode)를 따름  ← 기본, 앱에서 다크 고르면 노트도 다크
 *   노트에서 '밝게'/'어둡게'를 직접 고름  → 그 값. 앱 밝기와 같으면 테마 색, 반대면 노트 자체 색표(중립)를 쓴다
 *     (반대 밝기의 테마 토큰은 html 에 없으므로 복사하지 않는다 — 토큰 원본은 nw-themes.css 하나로 유지)
 *
 * 잉크·종이 (사용자의 기록 — 바꾸지 않음)
 *   - 종이는 엔진이 캔버스에 늘 흰색(#FFFFFF)으로 그린다 (note_engine drawPaper, 다크에서도). 이 파일은 종이·잉크 색을 건드리지 않는다.
 *     → 잉크는 언제나 흰 종이 위라서 다크에서도 그대로 보인다. 펜 색표(PEN_COLORS·HL_COLORS)·저장된 획 색 그대로.
 *   - 다크에서 '안 보이는' 곳은 종이 밖 UI 뿐: 진한 펜 색(검정·남색·갈색)의 동그라미 견본·현재 색 막대가 어두운 판 위에서 묻힘
 *     → 견본 둘레에 테 2px(--line-strong, 판 위 3:1 이상)를 둘러 '모양'으로 보이게 한다. 견본 색 자체는 그대로.
 *   - 종이 밖 책상(--ne-desk)만 테마 색으로 바꾼다 (엔진 setDesk 로 캔버스에 칠해짐).
 *   - 선택 올가미·손잡이 색은 흰 종이 위에 그려지므로 '종이 쪽 주색'(--ne-paper-accent, 라이트 주색) — JS 연결은 선택 사항.
 * ===================================================================== */

/* ---------- 0. 반대 밝기를 노트에서 직접 고른 경우의 새 이름 기본값 (노트 자체 색표와 짝) ---------- */
html[data-nw-theme] .ne-app{
  --ne-accent-fg:var(--ne-accent);--ne-fill:var(--ne-accent);--ne-fill-edge:var(--ne-accent);--ne-on-fill:#FFFFFF;
  --ne-ok:#15803D;--ne-warn:#A16207;--ne-on-danger:#FFFFFF;--ne-focus:var(--ne-accent);--ne-scrim:rgba(15,23,42,.42);
}
html[data-nw-theme] .ne-app[data-theme="light"]{
  --ne-accent-fg:#1D4ED8;--ne-swr:#868B94;      /* 노트 자체 색표 보강: 연한 파랑 위 글자 4.5:1 · 견본 테 3:1 (원래 4.36 · 1.5) */
}
html[data-nw-theme] .ne-app[data-theme="dark"]{
  --ne-on-fill:#0B1430;--ne-ok:#4ADE80;--ne-warn:#FBBF24;--ne-on-danger:#2A0B0B;--ne-scrim:rgba(0,0,0,.6);
  --ne-swr:#7A828E;                             /* 원래 rgba(255,255,255,.32) = 2.9:1 → 3:1 이상 */
}

/* ---------- 1. 색 대응 (노트 밝기 = 앱 밝기일 때) — 토큰 이름만 잇는다, 값은 nw-themes.css ---------- */
html[data-nw-theme][data-nw-mode="light"] .ne-app:not([data-theme="dark"]),
html[data-nw-theme][data-nw-mode="dark"] .ne-app:not([data-theme="light"]){
  --ne-bg:var(--bg);
  --ne-surface:var(--surface);
  --ne-surface-2:var(--surface2);
  --ne-line:var(--line);
  --ne-text:var(--text);
  --ne-sub:var(--text2);
  --ne-accent:var(--pri);
  --ne-accent-soft:var(--side-on);          /* 1·2·4 = --pri-soft 와 같은 값, 5 = 안전 노랑 */
  --ne-accent-fg:var(--side-on-fg);         /* 눌린 단추 글자·아이콘 (연한 주색 바탕 위) */
  --ne-danger:var(--red);
  --ne-on-danger:var(--on-red);
  --ne-fill:var(--fill);--ne-fill-edge:var(--fill-edge);--ne-on-fill:var(--on-fill);
  --ne-ok:var(--ok);--ne-warn:var(--orange);
  --ne-focus:var(--focus);
  --ne-scrim:var(--scrim);
  --ne-shadow:var(--shadow);
  --ne-glass:var(--surface);
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  html[data-nw-theme][data-nw-mode="light"] .ne-app:not([data-theme="dark"]),
  html[data-nw-theme][data-nw-mode="dark"] .ne-app:not([data-theme="light"]){--ne-glass:color-mix(in srgb,var(--surface) 94%,transparent)}
}
/* 밝기별 — 책상·견본 테·color-scheme */
html[data-nw-theme][data-nw-mode="light"] .ne-app:not([data-theme="dark"]){
  --ne-desk:var(--surface2);                /* 흰 종이 둘레 (1 #EEECE7 · 2 #EBEFF7 · 4 #F2E4D0) */
  --ne-swr:var(--line-strong);              /* 노랑 형광펜·흰색 같은 밝은 견본이 흰 판에 묻히지 않게 (판 위 3:1 이상) */
  color-scheme:light;
}
html[data-nw-theme][data-nw-mode="dark"] .ne-app:not([data-theme="light"]){
  --ne-desk:var(--bg);                      /* 가장 어두운 바탕 → 흰 종이 경계가 뚜렷 */
  --ne-swr:var(--line-strong);              /* 진한 잉크 견본이 어두운 판에 묻히지 않게 (판 위 3:1 이상) */
  color-scheme:dark;
}
/* 테마 5 라이트: 흰 종이와 책상 경계를 더 뚜렷하게 */
html[data-nw-theme="5"][data-nw-mode="light"] .ne-app:not([data-theme="dark"]){--ne-desk:var(--line2)}

/* 종이 쪽 주색 (흰 종이 위 올가미·손잡이용, 밝기와 상관없이 라이트 주색 — 흰 바탕 4.5:1 이상) */
html[data-nw-theme="1"] .ne-app{--ne-paper-accent:#13706A}
html[data-nw-theme="2"] .ne-app{--ne-paper-accent:#2B45BD}
html[data-nw-theme="4"] .ne-app{--ne-paper-accent:#AF3C21}
html[data-nw-theme="5"] .ne-app{--ne-paper-accent:#6B4E00}   /* 검정 잉크와 헷갈리지 않게 진한 호박 (nw-themes --nw-accent 와 같음) */

/* ---------- 2. 박힌 색 풀기 (note_ui.js·note_app.js 가 직접 쓴 색) ---------- */
html[data-nw-theme] .ne-app :focus-visible{outline-color:var(--ne-focus)}
html[data-nw-theme] .ne-app .ne-btn.ne-pri,
html[data-nw-theme] .ne-app .ne-sb.ne-send,
html[data-nw-theme] .ne-app .nwn-go{background:var(--ne-fill);border-color:var(--ne-fill-edge);color:var(--ne-on-fill)}   /* #2563EB / #FFF */
html[data-nw-theme] .ne-app .ne-btn.ne-del{color:var(--ne-on-danger)}                                    /* #FFF */
html[data-nw-theme] .ne-app .ne-save::before{background:var(--ne-ok)}                                    /* #22A06B */
html[data-nw-theme] .ne-app .ne-save[data-state=dirty]::before{background:var(--ne-warn)}                 /* #D29B00 */
html[data-nw-theme] .ne-app .ne-save[data-state=saving]::before{background:var(--ne-accent)}
html[data-nw-theme] .ne-app .ne-save[data-state=error]::before{background:var(--ne-danger)}
html[data-nw-theme] .ne-app .ne-mi .ne-st.ne-done{color:var(--ne-ok)}                                    /* #16A34A */
html[data-nw-theme] .ne-app .ne-modal{background:var(--ne-scrim)}                                         /* rgba(15,23,42,.42) */
html[data-nw-theme] .ne-app .ne-toast{background:var(--ne-text);color:var(--ne-surface)}                  /* #111827 / #FFF — 다크에선 밝은 알림 */
html[data-nw-theme] .ne-app .ne-title:focus{border-color:var(--ne-accent)}

/* 눌린(고른) 상태: 연한 주색 바탕 + 진한 주색 글자 (테마 5 는 노랑 바탕 + 검정) */
html[data-nw-theme] .ne-app .ne-b[aria-pressed=true],html[data-nw-theme] .ne-app .ne-b.ne-on,
html[data-nw-theme] .ne-app .ne-chip[aria-pressed=true],html[data-nw-theme] .ne-app .ne-wd[aria-pressed=true],
html[data-nw-theme] .ne-app .ne-pp[aria-pressed=true]{color:var(--ne-accent-fg)}
html[data-nw-theme] .ne-app .ne-badge,html[data-nw-theme] .ne-app .ne-mi .ne-ic{color:var(--ne-accent-fg)}

/* 색 견본: 테(--ne-swr)를 2px 로 — 어떤 판 위에서도 동그라미 모양이 보이게. 고른 견본은 안쪽 테 + 바깥 주색 고리 */
html[data-nw-theme] .ne-app .ne-sw,html[data-nw-theme] .ne-app .ne-qc i,html[data-nw-theme] .ne-app .ne-custom{box-shadow:inset 0 0 0 2px var(--ne-swr)}
html[data-nw-theme] .ne-app .ne-sw[aria-pressed=true],html[data-nw-theme] .ne-app .ne-qc.ne-on i{
  box-shadow:inset 0 0 0 2px var(--ne-swr),0 0 0 2px var(--ne-surface),0 0 0 4px var(--ne-accent)}
html[data-nw-theme] .ne-app .ne-cbar{box-shadow:0 0 0 1.5px var(--ne-swr)}

/* 모양: 판은 카드 반지름, 단추는 단추 반지름 (앱과 같은 모양 언어) */
html[data-nw-theme] .ne-app .ne-tb,html[data-nw-theme] .ne-app .ne-pop,html[data-nw-theme] .ne-app .ne-menu,
html[data-nw-theme] .ne-app .ne-dlg,html[data-nw-theme] .ne-app .ne-selbar,html[data-nw-theme] .nwn-card{border-radius:var(--radius-card)}
html[data-nw-theme] .ne-app .ne-b,html[data-nw-theme] .ne-app .ne-hb,html[data-nw-theme] .ne-app .ne-chip,html[data-nw-theme] .ne-app .ne-wd,
html[data-nw-theme] .ne-app .ne-pp,html[data-nw-theme] .ne-app .ne-btn,html[data-nw-theme] .ne-app .ne-sb,
html[data-nw-theme] .ne-app .ne-mi,html[data-nw-theme] .ne-app .nwn-go,html[data-nw-theme] .nwn-sm{border-radius:var(--radius-btn)}
html[data-nw-theme] .ne-app .ne-save,html[data-nw-theme] .ne-app .ne-badge{border-radius:var(--radius-chip)}

/* ---------- 3. 테마 5 햇빛 고대비 — 굵은 선 · 큰 글자 · 큰 누름 칸 (색 밝기와 상관없이) ---------- */
html[data-nw-theme="5"] .ne-app .ne-i{stroke-width:2.3}
html[data-nw-theme="5"] .ne-app :focus-visible{outline-width:3px;outline-offset:2px}
html[data-nw-theme="5"] .ne-app .ne-top{border-bottom-width:2px}
html[data-nw-theme="5"] .ne-app .ne-tb,html[data-nw-theme="5"] .ne-app .ne-pop,html[data-nw-theme="5"] .ne-app .ne-menu,
html[data-nw-theme="5"] .ne-app .ne-selbar,html[data-nw-theme="5"] .ne-app .ne-chip,html[data-nw-theme="5"] .ne-app .ne-wd,
html[data-nw-theme="5"] .ne-app .ne-pp,html[data-nw-theme="5"] .ne-app .ne-btn,html[data-nw-theme="5"] .ne-app .ne-save,
html[data-nw-theme="5"] .ne-app .ne-prev,html[data-nw-theme="5"] .nwn-sm,html[data-nw-theme="5"] .nwn-card{border-width:2px}
html[data-nw-theme="5"] .ne-app .ne-dlg{border:2px solid var(--ne-line)}
html[data-nw-theme="5"] .ne-app .ne-sep{width:2px}
html[data-nw-theme="5"] .ne-app .ne-mhr{height:2px}
/* 고른 단추: 노랑 바탕 + 검정 테 2px (색만이 아니라 테 모양으로도 '골랐음') */
html[data-nw-theme="5"] .ne-app .ne-b[aria-pressed=true],html[data-nw-theme="5"] .ne-app .ne-b.ne-on{box-shadow:inset 0 0 0 2px var(--ne-accent-fg)}
html[data-nw-theme="5"] .ne-app .ne-chip[aria-pressed=true],html[data-nw-theme="5"] .ne-app .ne-wd[aria-pressed=true],
html[data-nw-theme="5"] .ne-app .ne-pp[aria-pressed=true]{border-color:var(--ne-accent-fg)}
html[data-nw-theme="5"] .ne-app .ne-cbar{height:4px;bottom:4px}
/* 글자: 앱 테마 5 처럼 한 단계 크게 */
html[data-nw-theme="5"] .ne-app .ne-title{font-size:17px}
html[data-nw-theme="5"] .ne-app .ne-badge{font-size:13px}
html[data-nw-theme="5"] .ne-app .ne-save{font-size:13.5px}
html[data-nw-theme="5"] .ne-app .ne-hb .ne-t,html[data-nw-theme="5"] .ne-app .ne-sb{font-size:14px}
html[data-nw-theme="5"] .ne-app .ne-lb,html[data-nw-theme="5"] .ne-app .ne-mh small,html[data-nw-theme="5"] .ne-app .ne-mi span.ne-d,
html[data-nw-theme="5"] .ne-app .ne-pp{font-size:13px}
html[data-nw-theme="5"] .ne-app .ne-chip{font-size:14px;height:40px}
html[data-nw-theme="5"] .ne-app .ne-ph,html[data-nw-theme="5"] .ne-app .ne-mi b{font-size:15px}
/* 누름 칸: 막대 단추 44px (폰 40 → 44), 견본 36px */
html[data-nw-theme="5"] .ne-app .ne-b,html[data-nw-theme="5"] .ne-app.ne-phone .ne-b{width:44px;height:44px}
html[data-nw-theme="5"] .ne-app .ne-hb{height:42px;min-width:42px}
html[data-nw-theme="5"] .ne-app .ne-sw,html[data-nw-theme="5"] .ne-app .ne-custom{width:36px;height:36px}
html[data-nw-theme="5"] .ne-app .ne-wd{width:44px;height:44px}
/* 사용 불가 아이콘: .35 는 흐려서 안 보임 → 테마 흐림값 */
html[data-nw-theme="5"] .ne-app .ne-b:disabled,html[data-nw-theme="5"] .ne-app .ne-hb:disabled{opacity:var(--dis-op)}