/* 디자인 토큰: 색, 간격, 모서리, 글꼴을 한곳에 둠. 대문과 내 메모 보기가 함께 씀.
   값을 바꾸면 두 화면이 같이 바뀜. 설명과 규칙은 docs/DESIGN.md */
:root {
  /* 색 (밝은 바탕: 맑은 흰색, 강조는 파란색) */
  --paper: #f6f8fb;
  --card: #ffffff;
  --ink: #18202c;
  --sub: #5a6578;
  --faint: #8a94a6; /* 날짜·기록 수처럼 가장 옅은 글자 */
  --line: #e1e7ef;
  --soft: #eaf1fb;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --bad: #d92d20;
  --flag-3: #d92d20; --flag-2: #b54708; --flag-1: #1570ef; /* 중요도 높음·보통·낮음 (확장·웹 같은 값, 2.126.1에 여기로. 메모 칸 content.js 는 같은 값을 옮겨 적음) */
  --memo: #2c4468; /* 목록 모양 '넉넉하게'의 메모 글: 제목(본문색)과 나눠 내가 쓴 글이 보이게 */
  --memo-line: #bfd3f2;
  --sel-bg: color-mix(in srgb, var(--accent) 10%, transparent); /* 고른 줄·카드를 덮는 바탕 (2.142.3). 네 색상 테마는 --accent 가 바뀌어 따라옴 */
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.06);

  /* 모서리 */
  --r-sm: 8px;
  --r-md: 12px;
  --r-pill: 999px;

  /* 간격 (4px 단위) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;
  --s-16: 64px;

  /* 글꼴 */
  --font: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --fs-sm: 0.92em;
  --fs-base: 16px;
  --fs-lg: 1.15em;
  --fs-h2: 1.4em;

  /* 글자 단계 (docs/DESIGN.md 18절): 모든 화면은 이 여섯 크기만 씀. 웹페이지 위 메모 칸은 px 로 옮겨 적음 */
  --t-head: 1.25rem;     /* 20px 화면 제목, 자세히 보기 제목 */
  --t-title: 1rem;       /* 16px 목록·카드 제목 */
  --t-read: 0.9375rem;   /* 15px 자세히 보기 메모 본문 */
  --t-body: 0.875rem;    /* 14px 미리보기, 덧붙임 */
  --t-label: 0.8125rem;  /* 13px 사이트 이름, 태그, 단추 글자 */
  --t-caption: 0.75rem;  /* 12px 날짜, 기록 수 */
  /* 대문 전용 (웹 소개 화면·탈퇴 화면만, docs/DESIGN.md 18-1) */
  --t-hero: clamp(2rem, 1.5rem + 2vw, 3rem); /* 32~48px 대문 첫 제목, 화면 폭에 따라 */
  --t-section: 1.5rem;   /* 24px 대문 구역 제목, 탈퇴 화면 제목 */
  --t-lead: 1.125rem;    /* 18px 대문 첫 소개 글 */
}

/* 어두운 화면: 기기 설정이 어두우면 따름. data-theme="dark" 로 직접 정할 수도 있음 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1522;
    --card: #172030;
    --ink: #e8eef7;
    --sub: #98a4b8;
    --faint: #6f7b90;
    --line: #2a3548;
    --soft: #1b2638;
    --accent: #6ea8ff;
    --accent-ink: #0f1522;
    --bad: #f97066;
    --flag-3: #f97066; --flag-2: #fdb022; --flag-1: #6ea8ff;
    --memo: #b9cbe6;
    --memo-line: #34507a;
    --sel-bg: color-mix(in srgb, var(--accent) 20%, transparent); /* 어두운 바탕에서는 진하게 */
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --paper: #0f1522;
  --card: #172030;
  --ink: #e8eef7;
  --sub: #98a4b8;
  --faint: #6f7b90;
  --line: #2a3548;
  --soft: #1b2638;
  --accent: #6ea8ff;
  --accent-ink: #0f1522;
  --bad: #f97066;
  --flag-3: #f97066; --flag-2: #fdb022; --flag-1: #6ea8ff;
  --memo: #b9cbe6;
  --memo-line: #34507a;
  --sel-bg: color-mix(in srgb, var(--accent) 20%, transparent);
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* THEME_PALETTES_START — 문서·격리된 메모 화면의 팔레트는 같은 값을 사용함. */
:root[data-palette="neutral"],
.root[data-palette="neutral"],
.card[data-palette="neutral"] {
  --text-primary: #1d1d1f;
  --text-secondary: #515156;
  --text-muted: #626268;
  --accent: #3f617e;
  --accent-hover: #294c69;
  --accent-ink: #ffffff;
  --focus-border: #738494;
  --surface: #f5f5f7;
  --surface-raised: #ffffff;
  --chip-text: #365773;
  --badge-bg: #e8e8ed;
  --badge-text: #515156;
  --border: rgba(29, 29, 31, .12);
  --chip-bg: rgba(63,97,126, .06);
  --chip-border: rgba(63,97,126, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
:root[data-palette="neutral"]:not([data-theme="light"]),
.root[data-palette="neutral"]:not([data-theme="light"]),
.card[data-palette="neutral"]:not([data-theme="light"]) {
  --text-primary: #f5f5f7;
  --text-secondary: #c7c7cc;
  --text-muted: #a1a1a9;
  --accent: #a3b8cb;
  --accent-hover: #c2d0dc;
  --accent-ink: #161618;
  --focus-border: #8295a6;
  --surface: #161618;
  --surface-raised: #232326;
  --chip-text: #b1c2d2;
  --badge-bg: #38383d;
  --badge-text: #d2d2d7;
  --border: rgba(245, 245, 247, .12);
  --chip-bg: rgba(163,184,203, .08);
  --chip-border: rgba(163,184,203, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
}
:root[data-palette="neutral"][data-theme="dark"],
.root[data-palette="neutral"][data-theme="dark"],
.card[data-palette="neutral"][data-theme="dark"] {
  --text-primary: #f5f5f7;
  --text-secondary: #c7c7cc;
  --text-muted: #a1a1a9;
  --accent: #a3b8cb;
  --accent-hover: #c2d0dc;
  --accent-ink: #161618;
  --focus-border: #8295a6;
  --surface: #161618;
  --surface-raised: #232326;
  --chip-text: #b1c2d2;
  --badge-bg: #38383d;
  --badge-text: #d2d2d7;
  --border: rgba(245, 245, 247, .12);
  --chip-bg: rgba(163,184,203, .08);
  --chip-border: rgba(163,184,203, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
:root[data-palette="slate"],
.root[data-palette="slate"],
.card[data-palette="slate"] {
  --text-primary: #202e3a;
  --text-secondary: #4e6070;
  --text-muted: #5d6e7d;
  --accent: #365d7b;
  --accent-hover: #244862;
  --accent-ink: #ffffff;
  --focus-border: #72899c;
  --surface: #eef2f6;
  --surface-raised: #fbfcfe;
  --chip-text: #365d7b;
  --badge-bg: #dfe7ef;
  --badge-text: #4a6174;
  --border: rgba(54,93,123, .14);
  --chip-bg: rgba(54,93,123, .06);
  --chip-border: rgba(54,93,123, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
:root[data-palette="slate"]:not([data-theme="light"]),
.root[data-palette="slate"]:not([data-theme="light"]),
.card[data-palette="slate"]:not([data-theme="light"]) {
  --text-primary: #edf2f7;
  --text-secondary: #c1cbd5;
  --text-muted: #a0afbe;
  --accent: #a1c2df;
  --accent-hover: #c4d9eb;
  --accent-ink: #151d26;
  --focus-border: #7e9ab2;
  --surface: #151d26;
  --surface-raised: #202b36;
  --chip-text: #b2cde4;
  --badge-bg: #354453;
  --badge-text: #d2dce5;
  --border: rgba(161,194,223, .14);
  --chip-bg: rgba(161,194,223, .08);
  --chip-border: rgba(161,194,223, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
}
:root[data-palette="slate"][data-theme="dark"],
.root[data-palette="slate"][data-theme="dark"],
.card[data-palette="slate"][data-theme="dark"] {
  --text-primary: #edf2f7;
  --text-secondary: #c1cbd5;
  --text-muted: #a0afbe;
  --accent: #a1c2df;
  --accent-hover: #c4d9eb;
  --accent-ink: #151d26;
  --focus-border: #7e9ab2;
  --surface: #151d26;
  --surface-raised: #202b36;
  --chip-text: #b2cde4;
  --badge-bg: #354453;
  --badge-text: #d2dce5;
  --border: rgba(161,194,223, .14);
  --chip-bg: rgba(161,194,223, .08);
  --chip-border: rgba(161,194,223, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
:root[data-palette="stone"],
.root[data-palette="stone"],
.card[data-palette="stone"] {
  --text-primary: #332d25;
  --text-secondary: #665b4d;
  --text-muted: #746757;
  --accent: #7a5b3a;
  --accent-hover: #604528;
  --accent-ink: #ffffff;
  --focus-border: #96826b;
  --surface: #f3efe8;
  --surface-raised: #fffdf8;
  --chip-text: #775c40;
  --badge-bg: #e8e0d4;
  --badge-text: #655747;
  --border: rgba(122,91,58, .14);
  --chip-bg: rgba(122,91,58, .06);
  --chip-border: rgba(122,91,58, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
:root[data-palette="stone"]:not([data-theme="light"]),
.root[data-palette="stone"]:not([data-theme="light"]),
.card[data-palette="stone"]:not([data-theme="light"]) {
  --text-primary: #f1ede7;
  --text-secondary: #cdc5bb;
  --text-muted: #b3a89b;
  --accent: #c6b79f;
  --accent-hover: #dfd1bb;
  --accent-ink: #211e1b;
  --focus-border: #a39887;
  --surface: #211e1b;
  --surface-raised: #2d2925;
  --chip-text: #d4c4ab;
  --badge-bg: #464038;
  --badge-text: #ded4c5;
  --border: rgba(198,183,159, .14);
  --chip-bg: rgba(198,183,159, .08);
  --chip-border: rgba(198,183,159, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
}
:root[data-palette="stone"][data-theme="dark"],
.root[data-palette="stone"][data-theme="dark"],
.card[data-palette="stone"][data-theme="dark"] {
  --text-primary: #f1ede7;
  --text-secondary: #cdc5bb;
  --text-muted: #b3a89b;
  --accent: #c6b79f;
  --accent-hover: #dfd1bb;
  --accent-ink: #211e1b;
  --focus-border: #a39887;
  --surface: #211e1b;
  --surface-raised: #2d2925;
  --chip-text: #d4c4ab;
  --badge-bg: #464038;
  --badge-text: #ded4c5;
  --border: rgba(198,183,159, .14);
  --chip-bg: rgba(198,183,159, .08);
  --chip-border: rgba(198,183,159, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
:root[data-palette="sage"],
.root[data-palette="sage"],
.card[data-palette="sage"] {
  --text-primary: #25362c;
  --text-secondary: #52665a;
  --text-muted: #5d6f62;
  --accent: #416851;
  --accent-hover: #2d503b;
  --accent-ink: #ffffff;
  --focus-border: #7b9282;
  --surface: #edf2ed;
  --surface-raised: #fbfdf9;
  --chip-text: #416851;
  --badge-bg: #dfe8de;
  --badge-text: #4f6555;
  --border: rgba(65,104,81, .14);
  --chip-bg: rgba(65,104,81, .06);
  --chip-border: rgba(65,104,81, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .04);
}
@media (prefers-color-scheme: dark) {
:root[data-palette="sage"]:not([data-theme="light"]),
.root[data-palette="sage"]:not([data-theme="light"]),
.card[data-palette="sage"]:not([data-theme="light"]) {
  --text-primary: #eef3ef;
  --text-secondary: #c3cec6;
  --text-muted: #a4b5aa;
  --accent: #acc8b5;
  --accent-hover: #cce0d2;
  --accent-ink: #17201c;
  --focus-border: #829f8e;
  --surface: #17201c;
  --surface-raised: #232f29;
  --chip-text: #bdd5c4;
  --badge-bg: #384a3f;
  --badge-text: #d2dfd5;
  --border: rgba(172,200,181, .14);
  --chip-bg: rgba(172,200,181, .08);
  --chip-border: rgba(172,200,181, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
}
:root[data-palette="sage"][data-theme="dark"],
.root[data-palette="sage"][data-theme="dark"],
.card[data-palette="sage"][data-theme="dark"] {
  --text-primary: #eef3ef;
  --text-secondary: #c3cec6;
  --text-muted: #a4b5aa;
  --accent: #acc8b5;
  --accent-hover: #cce0d2;
  --accent-ink: #17201c;
  --focus-border: #829f8e;
  --surface: #17201c;
  --surface-raised: #232f29;
  --chip-text: #bdd5c4;
  --badge-bg: #384a3f;
  --badge-text: #d2dfd5;
  --border: rgba(172,200,181, .14);
  --chip-bg: rgba(172,200,181, .08);
  --chip-border: rgba(172,200,181, .24);
  --shadow: 0 2px 8px rgba(0, 0, 0, .16);
}
/* 기존 화면의 색 이름을 선택한 팔레트에 연결함. */
:root[data-palette], .root[data-palette], .card[data-palette] {
  --ink: var(--text-primary); --sub: var(--text-secondary);
  --muted: var(--text-secondary); --faint: var(--text-muted);
  --line: var(--border); --soft: var(--chip-bg);
  --card: var(--surface-raised); --panel: var(--surface);
  --memo: var(--text-secondary); --memo-line: var(--chip-border);
  --note: var(--surface-raised);
}
:root[data-palette], .card[data-palette] { --paper: var(--surface); --bg: var(--surface); }
.root[data-palette] { --paper: var(--surface-raised); --bg: var(--surface-raised); }
/* THEME_PALETTES_END */