/* 오늘의 일지 - 스킨
   각 스킨은 두 블록(밝은 모드, 어두운 모드)과 모양 블록으로 이루어집니다.
   선택자가 :root가 아니라 [data-skin][data-mode]인 이유: 설정 화면의 미리보기 칩도 같은 값을 쓰기 위해서입니다.
   새 스킨: look.js의 SKINS에 한 줄을 더하고, 아래 블록 세 개를 복사해 값을 바꾸세요.
   글자색 대비는 4.5:1 이상으로 맞춰 두었습니다. 새 값을 넣을 때도 확인하세요. */

/* ---------- 기본 (제도면) ---------- */
[data-skin="plain"] {
  --f-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 6px;
  --r-sm: 4px;
  --r-card: 2px;
  --shadow-card: none;
  --f-head: var(--f-sans);
  --bg-img: none;
}
[data-skin="plain"][data-mode="light"] {
  --paper: #F2F5F3;
  --surface: #FBFCFB;
  --ink: #16201D;
  --ink-2: #4A5753;
  --line: #CBD4D0;
  --rule: #16201D;
  --accent: #2447C8;
  --accent-ink: #FFFFFF;
  --accent-soft: #E6ECFB;
  --warn: #A24A12;
  --strong: #16201D;
  --strong-ink: #F2F5F3;
  color-scheme: light;
}
[data-skin="plain"][data-mode="dark"] {
  --paper: #0E1513;
  --surface: #151D1A;
  --ink: #E6EEEA;
  --ink-2: #9AA9A3;
  --line: #2B3733;
  --rule: #5B6B65;
  --accent: #8FA8FF;
  --accent-ink: #0E1513;
  --accent-soft: #1B2547;
  --warn: #E0955A;
  --strong: #E6EEEA;
  --strong-ink: #0E1513;
  color-scheme: dark;
}

/* ---------- 세련 (슬레이트) ---------- */
[data-skin="slate"] {
  --f-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 8px;
  --r-sm: 6px;
  --r-card: 12px;
  --shadow-card: 0 1px 2px rgba(28, 36, 48, .06), 0 6px 18px rgba(28, 36, 48, .05);
  --f-head: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
  --bg-img: none;
}
[data-skin="slate"][data-mode="light"] {
  --paper: #EEF1F5;
  --surface: #FFFFFF;
  --ink: #1C2430;
  --ink-2: #566170;
  --line: #DAE0E8;
  --rule: #C5CDD8;
  --accent: #34539F;
  --accent-ink: #FFFFFF;
  --accent-soft: #E8EDF8;
  --warn: #A04A14;
  --strong: #1C2430;
  --strong-ink: #FFFFFF;
  color-scheme: light;
}
[data-skin="slate"][data-mode="dark"] {
  --paper: #12161C;
  --surface: #1A2029;
  --ink: #E7EAF0;
  --ink-2: #9FAABA;
  --line: #2A3340;
  --rule: #3B4658;
  --accent: #97B0EE;
  --accent-ink: #12161C;
  --accent-soft: #202B47;
  --warn: #E5995C;
  --strong: #E7EAF0;
  --strong-ink: #12161C;
  color-scheme: dark;
}

/* ---------- 종이 (크림) ---------- */
[data-skin="cream"] {
  --f-sans: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 4px;
  --r-sm: 3px;
  --r-card: 4px;
  --shadow-card: 0 1px 0 rgba(90, 70, 40, .08), 0 3px 10px rgba(90, 70, 40, .06);
  --f-head: "Gowun Batang", "Nanum Myeongjo", "Batang", serif;
  --bg-img: none;
}
[data-skin="cream"][data-mode="light"] {
  --paper: #F5EEDF;
  --surface: #FFFBF2;
  --ink: #3A2F27;
  --ink-2: #6B5D50;
  --line: #E3D7C2;
  --rule: #CDBB9C;
  --accent: #2F6A4A;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3EFDF;
  --warn: #A5441C;
  --strong: #3A2F27;
  --strong-ink: #FFFBF2;
  color-scheme: light;
}
[data-skin="cream"][data-mode="dark"] {
  --paper: #1C1814;
  --surface: #262019;
  --ink: #EFE6D8;
  --ink-2: #B5A795;
  --line: #3B3329;
  --rule: #5B4F40;
  --accent: #9FD0AE;
  --accent-ink: #1C1814;
  --accent-soft: #26372C;
  --warn: #E79B6B;
  --strong: #EFE6D8;
  --strong-ink: #1C1814;
  color-scheme: dark;
}

/* ---------- 귀여움 (파스텔) ---------- */
[data-skin="candy"] {
  --r: 14px;
  --r-sm: 10px;
  --r-card: 22px;
  --shadow-card: 0 3px 0 var(--line);
  --f-head: "Jua", "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --bg-img: radial-gradient(var(--line) 1.3px, transparent 1.4px);
  --f-sans: "Gowun Dodum", "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --f-mono: var(--f-sans);
}
[data-skin="candy"][data-mode="light"] {
  --paper: #FFF2F6;
  --surface: #FFFFFF;
  --ink: #4A2F45;
  --ink-2: #7A5876;
  --line: #F2D4DF;
  --rule: #E8BBCC;
  --accent: #C22C6B;
  --accent-ink: #FFFFFF;
  --accent-soft: #FFE3EE;
  --warn: #A8501A;
  --strong: #C22C6B;
  --strong-ink: #FFFFFF;
  color-scheme: light;
}
[data-skin="candy"][data-mode="dark"] {
  --paper: #241823;
  --surface: #2F2030;
  --ink: #F7E6F0;
  --ink-2: #CDAEC3;
  --line: #47304B;
  --rule: #60446A;
  --accent: #FF8DB8;
  --accent-ink: #241823;
  --accent-soft: #4B2A42;
  --warn: #FFB074;
  --strong: #FF8DB8;
  --strong-ink: #241823;
  color-scheme: dark;
}

/* 스킨별 세부 손질 */
[data-skin="slate"] h1 { letter-spacing: -.01em; }
[data-skin="slate"] .tblock > div { padding: 12px 16px; }
[data-skin="slate"] .btn.gen, [data-skin="candy"] .btn.gen { background: var(--accent-soft); }
[data-skin="slate"] .tab[aria-selected="true"], [data-skin="cream"] .tab[aria-selected="true"] { border-bottom-width: 2px; }
[data-skin="cream"] textarea.entry { line-height: 1.9; }
[data-skin="cream"] .panel { border-style: solid; }
:root[data-skin="candy"] body { background-size: 24px 24px; }
[data-skin="candy"] .btn, [data-skin="candy"] .chip, [data-skin="candy"] .tagpill { font-weight: 400; }
[data-skin="candy"] .tab[aria-selected="true"] { border-bottom-color: var(--accent); border-bottom-width: 4px; border-radius: 2px; }
[data-skin="candy"] .card, [data-skin="candy"] .panel, [data-skin="candy"] .tblock { border-width: 2px; }
[data-skin="candy"] textarea.entry { line-height: 1.9; }
[data-skin="candy"] .cal-day.sel { border-radius: 50%; }
[data-skin="candy"] .seg button[aria-pressed="true"] { font-weight: 600; }

/* 설정 화면의 스킨 선택 칩 (고른 스킨의 값으로 칠해 미리 보여 줍니다) */
.skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.skin-opt { background-size: 24px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; text-align: left; min-height: 120px; padding: 14px; border: 2px solid var(--line); border-radius: var(--r-card); background: var(--paper); background-image: var(--bg-img); color: var(--ink); font: 400 14px/1.5 var(--f-sans); cursor: pointer; box-shadow: var(--shadow-card); }
.skin-opt:hover { border-color: var(--accent); }
.skin-opt[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.skin-opt .so-title { font: 600 18px/1.3 var(--f-head); }
.skin-opt .so-desc { color: var(--ink-2); font-size: 13px; }
.skin-opt .so-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: auto; }
.skin-opt .so-chip { padding: 2px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 500 12px/1.6 var(--f-sans); }
.skin-opt .so-btn { padding: 2px 10px; border-radius: var(--r); background: var(--strong); color: var(--strong-ink); font: 500 12px/1.6 var(--f-sans); }
.skin-opt .so-on { margin-left: auto; color: var(--accent); font: 600 12px var(--f-sans); }