/* =========================================================
   라이트메모 테마 시스템
   - 디자인 테마: data-app-theme = amber | things | bear | keep | notion | midnight | forest
   - 화면 모드:   data-theme     = (없음=시스템) | light | dark
   각 테마는 라이트 + 다크(시스템/수동) 세트를 정의.
   다크는 순검정 대신 살짝 색이 도는 딥그레이 + 선명한 액센트(2026 다크UI 기준).
   ========================================================= */

/* ---- 모드 무관 공통값 ---- */
:root { --radius: 16px; --important-dot: var(--accent); --danger: #e5544e; }

/* 공통 그림자(모드별) — 테마와 무관 */
:root {
  --shadow-sm: 0 1px 2px rgba(40,35,25,.06);
  --shadow: 0 2px 8px rgba(40,35,25,.07), 0 1px 2px rgba(40,35,25,.05);
  --shadow-lg: 0 10px 34px rgba(30,25,15,.16);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 12px rgba(0,0,0,.45); --shadow-lg: 0 14px 40px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 2px 12px rgba(0,0,0,.45); --shadow-lg: 0 14px 40px rgba(0,0,0,.6);
}

/* ===================== 앰버 (기본) · 따뜻한 종이 ===================== */
:root {
  --bg:#faf8f4; --surface:#fff; --surface-2:#f1ede5; --text:#211d17; --muted:#928979;
  --border:#ece6db; --border-strong:#ddd5c6;
  --accent:#e0972b; --accent-hover:#cf891f; --accent-soft:#fbf0d6; --accent-ink:#4a3510;
  --note-default:#fff; --note-yellow:#fef0c4; --note-green:#d9efd7; --note-blue:#d5e6f7; --note-pink:#f8dbe4; --note-purple:#e7dcf3;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#191510; --surface:#241f17; --surface-2:#2f281d; --text:#efe7d7; --muted:#a99e88;
  --border:#352d20; --border-strong:#43392a;
  --accent:#f4b74e; --accent-hover:#f7c366; --accent-soft:#3a2c14; --accent-ink:#1c1305;
  --note-default:#241f16; --note-yellow:#493f1e; --note-green:#26402a; --note-blue:#223b53; --note-pink:#472a38; --note-purple:#38304e;
}}
:root[data-theme="dark"]{
  --bg:#191510; --surface:#241f17; --surface-2:#2f281d; --text:#efe7d7; --muted:#a99e88;
  --border:#352d20; --border-strong:#43392a;
  --accent:#f4b74e; --accent-hover:#f7c366; --accent-soft:#3a2c14; --accent-ink:#1c1305;
  --note-default:#241f16; --note-yellow:#493f1e; --note-green:#26402a; --note-blue:#223b53; --note-pink:#472a38; --note-purple:#38304e;
}

/* ===================== 고요한 여백 · Things (차분한 블루) ===================== */
:root[data-app-theme="things"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#eef2f7; --text:#1a1c20; --muted:#878d97;
  --border:#eaeef3; --border-strong:#dce1e8;
  --accent:#297cf6; --accent-hover:#1a6ce8; --accent-soft:#e8f1fe; --accent-ink:#ffffff;
  --note-default:#f6f8fb; --note-yellow:#fff2cc; --note-green:#d8f2df; --note-blue:#dbeafe; --note-pink:#fbdcea; --note-purple:#e7e0fb;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="things"]:not([data-theme="light"]){
  --bg:#101319; --surface:#191d26; --surface-2:#232833; --text:#e6ecf5; --muted:#909aab;
  --border:#262c38; --border-strong:#333a49;
  --accent:#5b9cff; --accent-hover:#74acff; --accent-soft:#16233b; --accent-ink:#08121f;
  --note-default:#1b202a; --note-yellow:#40401f; --note-green:#1e3b2b; --note-blue:#1a3352; --note-pink:#43273a; --note-purple:#2c2b52;
}}
:root[data-app-theme="things"][data-theme="dark"]{
  --bg:#101319; --surface:#191d26; --surface-2:#232833; --text:#e6ecf5; --muted:#909aab;
  --border:#262c38; --border-strong:#333a49;
  --accent:#5b9cff; --accent-hover:#74acff; --accent-soft:#16233b; --accent-ink:#08121f;
  --note-default:#1b202a; --note-yellow:#40401f; --note-green:#1e3b2b; --note-blue:#1a3352; --note-pink:#43273a; --note-purple:#2c2b52;
}

/* ===================== 타이포 · Bear (세리프 · 레드) ===================== */
:root[data-app-theme="bear"]{
  --bg:#fbfaf6; --surface:#ffffff; --surface-2:#f2efe7; --text:#34363b; --muted:#8e877a;
  --border:#ece7db; --border-strong:#ddd5c6;
  --accent:#d7494c; --accent-hover:#c53e41; --accent-soft:#fbe9e9; --accent-ink:#ffffff;
  --note-default:#ffffff; --note-yellow:#fdf0c6; --note-green:#dcf0d6; --note-blue:#d9e8f7; --note-pink:#fadbe2; --note-purple:#e8def2;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="bear"]:not([data-theme="light"]){
  --bg:#1b1613; --surface:#26201d; --surface-2:#322a26; --text:#ede4d9; --muted:#a99e8d;
  --border:#382e28; --border-strong:#463a33;
  --accent:#ef5f62; --accent-hover:#f47a7c; --accent-soft:#3a201f; --accent-ink:#ffffff;
  --note-default:#29221c; --note-yellow:#4a3f22; --note-green:#26402b; --note-blue:#223a52; --note-pink:#4a2a34; --note-purple:#372f4b;
}}
:root[data-app-theme="bear"][data-theme="dark"]{
  --bg:#1b1613; --surface:#26201d; --surface-2:#322a26; --text:#ede4d9; --muted:#a99e8d;
  --border:#382e28; --border-strong:#463a33;
  --accent:#ef5f62; --accent-hover:#f47a7c; --accent-soft:#3a201f; --accent-ink:#ffffff;
  --note-default:#29221c; --note-yellow:#4a3f22; --note-green:#26402b; --note-blue:#223a52; --note-pink:#4a2a34; --note-purple:#372f4b;
}

/* ===================== 컬러 · Keep (알록달록 카드) ===================== */
:root[data-app-theme="keep"]{
  --bg:#f6f7f9; --surface:#ffffff; --surface-2:#eceef1; --text:#202124; --muted:#5f6368;
  --border:#e4e7ea; --border-strong:#d3d7db;
  --accent:#1a73e8; --accent-hover:#1667d1; --accent-soft:#e8f0fe; --accent-ink:#ffffff;
  --note-default:#ffffff; --note-yellow:#fff3b8; --note-green:#ccf2c9; --note-blue:#c3ddfd; --note-pink:#fdd0e0; --note-purple:#e6d6fb;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="keep"]:not([data-theme="light"]){
  --bg:#1b1c1f; --surface:#26282c; --surface-2:#32343a; --text:#e8eaed; --muted:#9aa0a6;
  --border:#33353b; --border-strong:#43464d;
  --accent:#8ab4f8; --accent-hover:#a5c6fa; --accent-soft:#23324a; --accent-ink:#12203a;
  --note-default:#26282c; --note-yellow:#514a1f; --note-green:#24432a; --note-blue:#223f5e; --note-pink:#4d2a3d; --note-purple:#362d55;
}}
:root[data-app-theme="keep"][data-theme="dark"]{
  --bg:#1b1c1f; --surface:#26282c; --surface-2:#32343a; --text:#e8eaed; --muted:#9aa0a6;
  --border:#33353b; --border-strong:#43464d;
  --accent:#8ab4f8; --accent-hover:#a5c6fa; --accent-soft:#23324a; --accent-ink:#12203a;
  --note-default:#26282c; --note-yellow:#514a1f; --note-green:#24432a; --note-blue:#223f5e; --note-pink:#4d2a3d; --note-purple:#362d55;
}

/* ===================== 모노 · Notion (흑백 미니멀) ===================== */
:root[data-app-theme="notion"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f3f0; --text:#37352f; --muted:#9b9a97;
  --border:#edece8; --border-strong:#e0ded9;
  --accent:#37352f; --accent-hover:#262521; --accent-soft:#edece8; --accent-ink:#ffffff;
  --important-dot:#d9730d;
  --note-default:#f7f6f3; --note-yellow:#faf3d9; --note-green:#e3efe0; --note-blue:#e0ebf3; --note-pink:#f6e2e8; --note-purple:#eae4f2;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="notion"]:not([data-theme="light"]){
  --bg:#1a1a19; --surface:#242422; --surface-2:#2e2d2a; --text:#eae8e3; --muted:#9a9894;
  --border:#323230; --border-strong:#3d3c39;
  --accent:#dedbd2; --accent-hover:#eeebe2; --accent-soft:#302f2c; --accent-ink:#26241f;
  --important-dot:#e8912f;
  --note-default:#26241f; --note-yellow:#423b24; --note-green:#26392a; --note-blue:#233647; --note-pink:#402a33; --note-purple:#312c41;
}}
:root[data-app-theme="notion"][data-theme="dark"]{
  --bg:#1a1a19; --surface:#242422; --surface-2:#2e2d2a; --text:#eae8e3; --muted:#9a9894;
  --border:#323230; --border-strong:#3d3c39;
  --accent:#dedbd2; --accent-hover:#eeebe2; --accent-soft:#302f2c; --accent-ink:#26241f;
  --important-dot:#e8912f;
  --note-default:#26241f; --note-yellow:#423b24; --note-green:#26392a; --note-blue:#233647; --note-pink:#402a33; --note-purple:#312c41;
}

/* ===================== 미드나잇 · Midnight (딥다크 · 바이올렛) ===================== */
:root[data-app-theme="midnight"]{
  --bg:#f7f8fc; --surface:#ffffff; --surface-2:#eef0f7; --text:#1c1d29; --muted:#8b8da0;
  --border:#e8eaf3; --border-strong:#d8dbe9;
  --accent:#6d5cff; --accent-hover:#5a48f5; --accent-soft:#ecebff; --accent-ink:#ffffff;
  --note-default:#f6f7fc; --note-yellow:#fdf1c6; --note-green:#d9f0e2; --note-blue:#dde6ff; --note-pink:#fbdcef; --note-purple:#e7e0ff;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="midnight"]:not([data-theme="light"]){
  --bg:#0d0e14; --surface:#161824; --surface-2:#1f2231; --text:#e7e7f2; --muted:#8b8ea6;
  --border:#232637; --border-strong:#313650;
  --accent:#8b7bff; --accent-hover:#a294ff; --accent-soft:#1c1b3a; --accent-ink:#0b0a1a;
  --note-default:#171a28; --note-yellow:#423d1f; --note-green:#1c3b30; --note-blue:#1e2c56; --note-pink:#3f2448; --note-purple:#2b2660;
}}
:root[data-app-theme="midnight"][data-theme="dark"]{
  --bg:#0d0e14; --surface:#161824; --surface-2:#1f2231; --text:#e7e7f2; --muted:#8b8ea6;
  --border:#232637; --border-strong:#313650;
  --accent:#8b7bff; --accent-hover:#a294ff; --accent-soft:#1c1b3a; --accent-ink:#0b0a1a;
  --note-default:#171a28; --note-yellow:#423d1f; --note-green:#1c3b30; --note-blue:#1e2c56; --note-pink:#3f2448; --note-purple:#2b2660;
}

/* ===================== 포레스트 · Forest (에메랄드 주얼) ===================== */
:root[data-app-theme="forest"]{
  --bg:#f6f9f6; --surface:#ffffff; --surface-2:#e9f0ea; --text:#1a231d; --muted:#7c8a80;
  --border:#e2ebe4; --border-strong:#d0ddd3;
  --accent:#059669; --accent-hover:#04815a; --accent-soft:#dcf2e8; --accent-ink:#ffffff;
  --note-default:#f6faf7; --note-yellow:#fbf2c8; --note-green:#cdefd8; --note-blue:#d7e8f5; --note-pink:#f8dbe6; --note-purple:#e5ddf3;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="forest"]:not([data-theme="light"]){
  --bg:#0e1411; --surface:#16201a; --surface-2:#1f2b23; --text:#e3ece6; --muted:#85978c;
  --border:#23302a; --border-strong:#314036;
  --accent:#34d399; --accent-hover:#52dda9; --accent-soft:#12312a; --accent-ink:#06231a;
  --note-default:#172119; --note-yellow:#40401f; --note-green:#1c3f2c; --note-blue:#21384f; --note-pink:#43293a; --note-purple:#322c4b;
}}
:root[data-app-theme="forest"][data-theme="dark"]{
  --bg:#0e1411; --surface:#16201a; --surface-2:#1f2b23; --text:#e3ece6; --muted:#85978c;
  --border:#23302a; --border-strong:#314036;
  --accent:#34d399; --accent-hover:#52dda9; --accent-soft:#12312a; --accent-ink:#06231a;
  --note-default:#172119; --note-yellow:#40401f; --note-green:#1c3f2c; --note-blue:#21384f; --note-pink:#43293a; --note-purple:#322c4b;
}

/* ===================== 블랙 · Black (순수 흑백 · OLED) ===================== */
:root[data-app-theme="black"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f2f2; --text:#111111; --muted:#8a8a8a;
  --border:#eaeaea; --border-strong:#dcdcdc;
  --accent:#111111; --accent-hover:#000000; --accent-soft:#ededed; --accent-ink:#ffffff;
  --note-default:#fafafa; --note-yellow:#fff2c2; --note-green:#d8f0d8; --note-blue:#d6e6fb; --note-pink:#fbd9e6; --note-purple:#e6ddf6;
}
@media (prefers-color-scheme: dark){ :root[data-app-theme="black"]:not([data-theme="light"]){
  --bg:#000000; --surface:#141414; --surface-2:#1f1f1f; --text:#ededed; --muted:#8f8f8f;
  --border:#262626; --border-strong:#363636;
  --accent:#ededed; --accent-hover:#ffffff; --accent-soft:#1e1e1e; --accent-ink:#111111;
  --note-default:#161616; --note-yellow:#40391c; --note-green:#1e3a28; --note-blue:#1c2e4a; --note-pink:#3e2536; --note-purple:#2c2846;
}}
:root[data-app-theme="black"][data-theme="dark"]{
  --bg:#000000; --surface:#141414; --surface-2:#1f1f1f; --text:#ededed; --muted:#8f8f8f;
  --border:#262626; --border-strong:#363636;
  --accent:#ededed; --accent-hover:#ffffff; --accent-soft:#1e1e1e; --accent-ink:#111111;
  --note-default:#161616; --note-yellow:#40391c; --note-green:#1e3a28; --note-blue:#1c2e4a; --note-pink:#3e2536; --note-purple:#2c2846;
}

/* =========================================================
   테마별 구조적 차이(색 외)
   ========================================================= */
.todo-title.important::before { background: var(--important-dot); }

/* 모노(Notion): 각진 체크박스 + FAB */
:root[data-app-theme="notion"] .todo-check,
:root[data-app-theme="notion"] .cl-box,
:root[data-app-theme="notion"] .mini-box,
:root[data-app-theme="notion"] .tk { border-radius: 6px; }
:root[data-app-theme="notion"] .fab { border-radius: 14px; }

/* 타이포(Bear): 세리프 제목 */
:root[data-app-theme="bear"] .brand,
:root[data-app-theme="bear"] .ed-title,
:root[data-app-theme="bear"] .note-card .n-title,
:root[data-app-theme="bear"] .ed-content h1,
:root[data-app-theme="bear"] .ed-content h2,
:root[data-app-theme="bear"] .login-card h1 { font-family: "Noto Serif KR", "Pretendard Variable", serif; }

/* 컬러(Keep): 메모 갤러리를 벽돌(masonry)로 */
:root[data-app-theme="keep"] .note-grid:not(.list) { display: block; columns: 158px; column-gap: 12px; }
:root[data-app-theme="keep"] .note-grid:not(.list) .note-card { break-inside: avoid; margin-bottom: 12px; }
:root[data-app-theme="keep"] .note-card { border-radius: 12px; }