/* 테마 — 색만 갈아끼운다. 구조는 건드리지 않는다.
 * 쓰는 법: <html data-theme="이름">. 기본은 "jw"(파랑). 토큰 그대로(data-theme 없음)는 "sage"(이끼).
 * 새 테마는 아래 한 덩어리를 복사해 값만 바꾸면 된다.
 */

/* 0. 파랑 — 기본. 로고와 같은 jw.org 파랑(#4A6DA7) 주색에 맑은 회청색 바탕 */
[data-theme="jw"] {
  --canvas:#F4F6FA; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#1C2638; --muted:#5A657A; --faint:#778195; --ghost:#969EAF; --disabled:#C1C7D2;
  --line:#DAE0EA; --line-soft:#E8ECF3; --soft:#ECF0F7;
  --accent:#4A6DA7; --accent-ink:#35548A; --accent-soft:#E2E9F5;
  --bro:#4A6DA7; --bro-soft:#E2E9F5;
}

/* 1. 이끼 — 예전 기본. 차분한 녹회색 바탕에 짙은 초록 */
[data-theme="sage"] { }

/* 2. 종이 — 따뜻한 미색 바탕, 잉크빛 글자. 오래 봐도 편하다 */
[data-theme="paper"] {
  --canvas:#F7F4EC; --surface:#FFFDF7; --surface-2:#FAF7F0;
  --ink:#2A2620; --muted:#6B6355; --faint:#8A8173; --ghost:#A79E8F; --disabled:#CFC8BA;
  --line:#E2DCCD; --line-soft:#EDE8DB; --soft:#F0EBDE;
  --accent:#7A5230; --accent-ink:#5C3D22; --accent-soft:#F0E3D4;
  --good:#5B7B48; --good-soft:#E7EFDF; --good-ink:#47603A;
  --warn:#A8761C; --warn-soft:#F6EBD6; --warn-ink:#845C14;
  --danger:#A8433B; --danger-ink:#8E362F; --danger-soft:#F5E2DF; --danger-line:#E3C3BF;
  --bro:#4A6D8C; --sis:#A8433B; --bro-soft:#E3EAF1; --sis-soft:#F5E2DF;
}

/* 3. 바다 — 청록 바탕에 깊은 파랑 */
[data-theme="sea"] {
  --canvas:#F0F6F6; --surface:#FFFFFF; --surface-2:#F7FBFB;
  --ink:#122A2E; --muted:#4F6B70; --faint:#6E878C; --ghost:#8FA5A9; --disabled:#BACACC;
  --line:#CEDEDF; --line-soft:#E1ECEC; --soft:#E7F0F0;
  --accent:#12666E; --accent-ink:#0C4C52; --accent-soft:#D8EBEC;
  --good:#2F8F72; --good-soft:#DDF0E8; --good-ink:#26755D;
  --warn:#B07A1E; --warn-soft:#F7ECD8; --warn-ink:#8C6118;
  --danger:#C04A46; --danger-ink:#A33D3A; --danger-soft:#F8E3E2; --danger-line:#E8C4C2;
  --bro:#2C6E9E; --sis:#C04A46; --bro-soft:#DCEBF4; --sis-soft:#F8E3E2;
}

/* 4. 흙 — 테라코타. 따뜻하고 사람 냄새 나는 느낌 */
[data-theme="clay"] {
  --canvas:#F8F3EF; --surface:#FFFFFF; --surface-2:#FCF8F5;
  --ink:#2D2320; --muted:#6F5C55; --faint:#8D7970; --ghost:#AB988F; --disabled:#D0BFB8;
  --line:#E4D7D0; --line-soft:#EFE6E1; --soft:#F2E9E4;
  --accent:#A8553A; --accent-ink:#8A422C; --accent-soft:#F4E2DA;
  --good:#6B8F4E; --good-soft:#E9F0E0; --good-ink:#557040;
  --warn:#B5822A; --warn-soft:#F8EEDA; --warn-ink:#8F6620;
  --danger:#B23F3F; --danger-ink:#953434; --danger-soft:#F7E0E0; --danger-line:#E8C2C2;
  --bro:#4E6E96; --sis:#B23F3F; --bro-soft:#E2EAF3; --sis-soft:#F7E0E0;
}

/* 5. 안개 — 회색조. 색을 거의 쓰지 않아 글이 또렷하다 */
[data-theme="mist"] {
  --canvas:#F4F5F6; --surface:#FFFFFF; --surface-2:#FAFAFB;
  --ink:#1F2124; --muted:#5F656C; --faint:#7C838B; --ghost:#9AA1A9; --disabled:#C2C7CD;
  --line:#DCDFE3; --line-soft:#E9EBEE; --soft:#EFF1F3;
  --accent:#3D4752; --accent-ink:#2A323B; --accent-soft:#E3E6EA;
  --good:#4A7A57; --good-soft:#E3EDE6; --good-ink:#3B6345;
  --warn:#8A6A2E; --warn-soft:#F0E9DA; --warn-ink:#6E5424;
  --danger:#9E4741; --danger-ink:#853B36; --danger-soft:#F2E3E2; --danger-line:#DFC6C4;
  --bro:#41637F; --sis:#9E4741; --bro-soft:#E1E8ED; --sis-soft:#F2E3E2;
}

/* 6. 숲 — 짙은 녹색 주색. 구역·자연 느낌 */
[data-theme="forest"] {
  --canvas:#F3F6F1; --surface:#FFFFFF; --surface-2:#F9FBF8;
  --ink:#19241A; --muted:#556B56; --faint:#728672; --ghost:#94A594; --disabled:#BFCCBF;
  --line:#D4E0D3; --line-soft:#E6EDE5; --soft:#EAF0E9;
  --accent:#2C6B3F; --accent-ink:#21532F; --accent-soft:#DDEDE1;
  --good:#3F8F4A; --good-soft:#E3F1E4; --good-ink:#2E7A38;
  --warn:#9C7420; --warn-soft:#F4EDD9; --warn-ink:#7C5C19;
  --danger:#B04540; --danger-ink:#933A35; --danger-soft:#F6E2E1; --danger-line:#E4C4C2;
  --bro:#3A6491; --sis:#B04540; --bro-soft:#E0E8F1; --sis-soft:#F6E2E1;
}

/* 7. 자두 — 보라 주색. 다른 회중 시스템과 확실히 구분된다 */
[data-theme="plum"] {
  --canvas:#F6F4F7; --surface:#FFFFFF; --surface-2:#FBFAFC;
  --ink:#241E2A; --muted:#61566B; --faint:#7E7288; --ghost:#9B90A4; --disabled:#C6BDCC;
  --line:#DFD8E4; --line-soft:#EBE6EF; --soft:#F0ECF3;
  --accent:#6A4A8C; --accent-ink:#523770; --accent-soft:#E8DFF1;
  --good:#4B8460; --good-soft:#E2EFE7; --good-ink:#3B6B4C;
  --warn:#9E7325; --warn-soft:#F4EBD9; --warn-ink:#7E5B1D;
  --danger:#AF4560; --danger-ink:#933950; --danger-soft:#F7E1E7; --danger-line:#E7C3CE;
  --bro:#4A5F9E; --sis:#AF4560; --bro-soft:#E2E6F3; --sis-soft:#F7E1E7;
}

/* 8. 햇살 — 밝고 대비가 강하다. 야외에서 화면이 잘 보인다 */
[data-theme="sunlit"] {
  --canvas:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FA;
  --ink:#0E1116; --muted:#454C57; --faint:#626B78; --ghost:#828B99; --disabled:#AEB6C2;
  --line:#C8CFD9; --line-soft:#DFE4EB; --soft:#EEF1F5;
  --accent:#0B4FA0; --accent-ink:#073B7A; --accent-soft:#DCE8F8;
  --good:#1F7A38; --good-soft:#DDF0E1; --good-ink:#17612B;
  --warn:#9A6200; --warn-soft:#FBEDD4; --warn-ink:#7A4E00;
  --danger:#B3261E; --danger-ink:#961F19; --danger-soft:#FAE0DE; --danger-line:#EFC0BC;
  --bro:#1A5FA8; --sis:#B3261E; --bro-soft:#DCE8F8; --sis-soft:#FAE0DE;
}

/* 9. 이른 아침 — 아주 옅은 파랑. 부드럽고 조용하다 */
[data-theme="dawn"] {
  --canvas:#F4F6FA; --surface:#FFFFFF; --surface-2:#FAFBFD;
  --ink:#1B2230; --muted:#59637A; --faint:#767F94; --ghost:#949CAE; --disabled:#C0C6D2;
  --line:#D8DEE9; --line-soft:#E8ECF3; --soft:#EDF0F6;
  --accent:#3C5A94; --accent-ink:#2C4574; --accent-soft:#E0E7F4;
  --good:#3F8271; --good-soft:#E0EEEA; --good-ink:#326859;
  --warn:#9B7430; --warn-soft:#F4EBDB; --warn-ink:#7B5C25;
  --danger:#A94B4B; --danger-ink:#8E3E3E; --danger-soft:#F6E3E3; --danger-line:#E5C5C5;
  --bro:#3C5A94; --sis:#A94B4B; --bro-soft:#E0E7F4; --sis-soft:#F6E3E3;
}

/* 10. 먹 — 짙은 남색 주색에 흰 바탕. 인쇄물 같은 또렷함 */
[data-theme="ink"] {
  --canvas:#F5F6F8; --surface:#FFFFFF; --surface-2:#FAFBFC;
  --ink:#10141C; --muted:#4E5766; --faint:#6C7585; --ghost:#8B93A2; --disabled:#B8BEC9;
  --line:#D5DAE3; --line-soft:#E6EAF0; --soft:#ECEFF4;
  --accent:#1F3A6E; --accent-ink:#152A52; --accent-soft:#DDE4F1;
  --good:#2C7A55; --good-soft:#DEEFE7; --good-ink:#226143;
  --warn:#8F6A18; --warn-soft:#F3EAD6; --warn-ink:#725413;
  --danger:#9E3330; --danger-ink:#852A28; --danger-soft:#F5DEDD; --danger-line:#E3BEBC;
  --bro:#1F3A6E; --sis:#9E3330; --bro-soft:#DDE4F1; --sis-soft:#F5DEDD;
}

/* 11. 살구 — 부드러운 주황. 따뜻하고 눈에 잘 들어온다 */
[data-theme="apricot"] {
  --canvas:#FBF6F1; --surface:#FFFFFF; --surface-2:#FEFAF7;
  --ink:#2B221B; --muted:#6E5F51; --faint:#8C7C6C; --ghost:#A99A8A; --disabled:#CFC3B6;
  --line:#E8DCD0; --line-soft:#F2E9E1; --soft:#F5EDE5;
  --accent:#C06A2B; --accent-ink:#9C5220; --accent-soft:#F8E4D2;
  --good:#5E8A4B; --good-soft:#E6EFDF; --good-ink:#4A6E3B;
  --warn:#A8791B; --warn-soft:#F7EDD7; --warn-ink:#865F15;
  --danger:#AF4238; --danger-ink:#93372E; --danger-soft:#F7E0DD; --danger-line:#E7C2BE;
  --bro:#4C6C94; --sis:#AF4238; --bro-soft:#E1E9F2; --sis-soft:#F7E0DD;
}

/* 12. 호수 — 맑은 청록. 시원하고 가볍다 */
[data-theme="lagoon"] {
  --canvas:#F1F8F8; --surface:#FFFFFF; --surface-2:#F8FCFC;
  --ink:#10262A; --muted:#48676C; --faint:#688388; --ghost:#8AA1A5; --disabled:#B6C8CA;
  --line:#CFE1E2; --line-soft:#E3EEEF; --soft:#E8F2F2;
  --accent:#0E8089; --accent-ink:#0A626A; --accent-soft:#D5EDEF;
  --good:#2E8F63; --good-soft:#DCF0E6; --good-ink:#247450;
  --warn:#AD7C1D; --warn-soft:#F6EDD8; --warn-ink:#8A6217;
  --danger:#BC4741; --danger-ink:#9E3A35; --danger-soft:#F8E2E1; --danger-line:#E9C3C1;
  --bro:#2A6E96; --sis:#BC4741; --bro-soft:#DCEAF2; --sis-soft:#F8E2E1;
}

/* ─────────────────────────────────────────────────────────────
 * 어두운 모드 — 테마와 따로 논다. <html data-mode="dark">
 * 바탕·글자 같은 중립색을 한 번에 덮고, 테마마다 주색만 밝은 쪽으로 옮긴다.
 * ───────────────────────────────────────────────────────────── */
[data-mode="dark"] {
  --canvas:#14181C; --surface:#1C2229; --surface-2:#222932;
  --ink:#E8EDF2; --muted:#9BA7B4; --faint:#7D8894; --ghost:#69737E; --disabled:#4A535D;
  --line:#2E3742; --line-soft:#262E37; --soft:#232B34;
  --accent:#6FA8DC; --accent-ink:#8FBEE8; --accent-soft:#233444;
  --good:#6FBF73; --good-soft:#1F3324; --good-ink:#8FD193;
  --warn:#D6A44A; --warn-soft:#332B1B; --warn-ink:#E6BC6E;
  --danger:#E07A72; --danger-ink:#EC958E; --danger-soft:#33211F; --danger-line:#4A2E2B;
  --bro:#6FA8DC; --sis:#E07A72; --bro-soft:#233444; --sis-soft:#33211F;
  color-scheme: dark;
}
[data-theme="jw"][data-mode="dark"]    { --accent:#82A3DA; --accent-ink:#A0BAE5; --accent-soft:#233149; --bro:#82A3DA; --bro-soft:#233149; }
[data-theme="paper"][data-mode="dark"]  { --canvas:#1A1713; --surface:#232019; --surface-2:#2A261E; --line:#3A352B; --line-soft:#302B22; --soft:#2C281F; --accent:#D3A472; --accent-ink:#E2B989; --accent-soft:#33291F; }
[data-theme="sea"][data-mode="dark"]    { --canvas:#101A1C; --surface:#182427; --accent:#57B8BF; --accent-ink:#76C9CF; --accent-soft:#17302F; }
[data-theme="clay"][data-mode="dark"]   { --canvas:#1B1614; --surface:#241D1A; --accent:#D9836A; --accent-ink:#E59B85; --accent-soft:#33221C; }
[data-theme="mist"][data-mode="dark"]   { --accent:#9AA6B4; --accent-ink:#B4BEC9; --accent-soft:#272C32; }
[data-theme="forest"][data-mode="dark"] { --canvas:#121711; --surface:#1A211A; --accent:#68B87C; --accent-ink:#88CC99; --accent-soft:#1D2E22; }
[data-theme="plum"][data-mode="dark"]   { --canvas:#181320; --surface:#211A2B; --accent:#B18FD6; --accent-ink:#C6ACE3; --accent-soft:#2C2238; }
[data-theme="sunlit"][data-mode="dark"] { --accent:#7FB4F2; --accent-ink:#9DC8F7; --accent-soft:#1D2B3D; }
[data-theme="dawn"][data-mode="dark"]   { --canvas:#131720; --surface:#1B2130; --accent:#8CA6DE; --accent-ink:#A9BEE9; --accent-soft:#232C41; }
[data-theme="ink"][data-mode="dark"]    { --accent:#7C9FD8; --accent-ink:#9BB7E4; --accent-soft:#1F2A3E; }
[data-theme="apricot"][data-mode="dark"]{ --canvas:#1A1512; --surface:#231C17; --accent:#E0925A; --accent-ink:#EBA976; --accent-soft:#33241A; }
[data-theme="lagoon"][data-mode="dark"] { --canvas:#101B1C; --surface:#182527; --accent:#4CC3CC; --accent-ink:#6FD3DA; --accent-soft:#163234; }

/* 자동 — 기기 설정을 따른다 */
@media (prefers-color-scheme: dark) {
  [data-mode="auto"] {
    --canvas:#14181C; --surface:#1C2229; --surface-2:#222932;
    --ink:#E8EDF2; --muted:#9BA7B4; --faint:#7D8894; --ghost:#69737E; --disabled:#4A535D;
    --line:#2E3742; --line-soft:#262E37; --soft:#232B34;
    --accent:#6FA8DC; --accent-ink:#8FBEE8; --accent-soft:#233444;
    --good:#6FBF73; --good-soft:#1F3324; --good-ink:#8FD193;
    --warn:#D6A44A; --warn-soft:#332B1B; --warn-ink:#E6BC6E;
    --danger:#E07A72; --danger-ink:#EC958E; --danger-soft:#33211F; --danger-line:#4A2E2B;
    --bro:#6FA8DC; --sis:#E07A72; --bro-soft:#233444; --sis-soft:#33211F;
    color-scheme: dark;
  }
}

/* ─────────────────────────────────────────────────────────────
 * 글꼴 — <html data-font="...">. 값만 바꾸면 화면 전체가 따라간다.
 * 한글과 키릴이 한 문장에 섞이므로 둘 다 되는 글꼴을 앞에 둔다.
 * ───────────────────────────────────────────────────────────── */
[data-font="pretendard"] {
  /* 프리텐다드에는 키릴이 없어 Noto Sans 로 받친다 */
  --font-ui: "Pretendard Variable", Pretendard, "Noto Sans", "Apple SD Gothic Neo", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-font="system"] {
  --font-ui: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}