/* ---------- 테마 변수 (라이트/다크) ---------- 실제 색상 값은 여기(:root)와 다크 오버라이드 두 곳에만 있고, 나머지 스타일시트 전체는 이 변수만 참조한다 - 다크 모드 지원을 켜면서 하드코딩된 색을 개별로 다 뜯어고치는 대신, 변수 하나만 바꾸면 그 변수를 쓰는 모든 곳이 한 번에 따라오게 하기 위해서다(이미 스타일시트 전역에 var(--color-*)가 300곳 넘게 쓰이고 있어 이 구조로 가는 게 자연스러웠다). 테마 적용 우선순위: (1) 사용자가 명시적으로 고른 테마(:root[data-theme])가 최우선 - 라이트를 명시적으로 골랐으면 OS가 다크여도 라이트를 쓴다. (2) 명시적 선택이 없으면 OS 설정 (prefers-color-scheme)을 따른다. 실제 적용/저장/토글 UI는 js/theme.js가 담당하고, 화면이 밝았다가 어두워지는 깜빡임(FOUC)을 막기 위해 각 HTML의 인라인 스크립트가 CSS보다 먼저 data-theme을 심어둔다. */ :root { --color-bg: #f2f1f6; --color-surface: #ffffff; --color-border: #e5e7f0; --color-text: #201f2c; --color-text-muted: #6b7086; --color-primary: #3a3552; --color-primary-dark: #2b273f; --color-primary-hover: #2b273f; --color-primary-soft: #eceaf3; --color-pending: #b45309; --color-pending-bg: #fef3c7; --color-progress: #1d4ed8; --color-progress-bg: #dbeafe; --color-completed: #15803d; --color-completed-bg: #dcfce7; --color-cancelled: #6b7280; --color-cancelled-bg: #eceef2; --color-danger: #b91c1c; --color-danger-bg: #fef2f2; --color-danger-border: #fecaca; --color-input-bg: #fbfbfe; --color-auth-gradient: linear-gradient(160deg, #eef0fd 0%, #f5f6fb 45%, #ffffff 100%); --radius-md: 10px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(20, 23, 45, 0.04), 0 4px 12px rgba(20, 23, 45, 0.06); } /* 다크 값은 두 군데에 똑같이 적어둔다: media query 쪽은 "명시적 선택이 없을 때 OS 설정을 따르는" 기본 동작, [data-theme="dark"] 쪽은 "사용자가 직접 골랐을 때" - 두 선택자를 CSS 하나로 합칠 방법이 없어 부득이하게 값을 중복시켰다(변경 시 두 곳 다 고쳐야 함). :not([data-theme="light"])는 OS는 다크인데 사용자가 라이트를 명시적으로 고른 경우 media query 쪽이 이기지 않게 막는다 */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-bg: #16161c; --color-surface: #1f1f27; --color-border: #34343f; --color-text: #eeedf6; --color-text-muted: #a2a1b2; --color-primary: #7266dd; --color-primary-dark: #c1b8f2; --color-primary-hover: #5b4ecb; --color-primary-soft: #2b2740; --color-pending: #f5ad42; --color-pending-bg: #3a2c14; --color-progress: #6ea3ff; --color-progress-bg: #182a4a; --color-completed: #52dd8e; --color-completed-bg: #113322; --color-cancelled: #9fa1b0; --color-cancelled-bg: #2b2b34; --color-danger: #f2837e; --color-danger-bg: #3c1a1a; --color-danger-border: #5c2727; --color-input-bg: #26262f; --color-auth-gradient: linear-gradient(160deg, #1d1d27 0%, #17171e 45%, #101013 100%); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4); } } :root[data-theme="dark"] { --color-bg: #16161c; --color-surface: #1f1f27; --color-border: #34343f; --color-text: #eeedf6; --color-text-muted: #a2a1b2; --color-primary: #7266dd; --color-primary-dark: #c1b8f2; --color-primary-hover: #5b4ecb; --color-primary-soft: #2b2740; --color-pending: #f5ad42; --color-pending-bg: #3a2c14; --color-progress: #6ea3ff; --color-progress-bg: #182a4a; --color-completed: #52dd8e; --color-completed-bg: #113322; --color-cancelled: #9fa1b0; --color-cancelled-bg: #2b2b34; --color-danger: #f2837e; --color-danger-bg: #3c1a1a; --color-danger-border: #5c2727; --color-input-bg: #26262f; --color-auth-gradient: linear-gradient(160deg, #1d1d27 0%, #17171e 45%, #101013 100%); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } body { margin: 0; font-family: "Pretendard", "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); -webkit-font-smoothing: antialiased; } /* 명언 배너 + 로그아웃 버튼을 한 줄에 배치하는 바 - 배경/구분선은 여기로 옮기고, quote-banner 자체는 텍스트 스타일만 갖는다(quotes.js 가 innerHTML 로 통째로 갈아끼우는 대상은 quote-banner 뿐이라, 로그아웃 버튼은 형제 요소로 둬야 정시마다 다시 그릴 때 사라지지 않는다) */ .quote-bar { display: flex; align-items: center; gap: 16px; background: var(--color-primary-soft); border-bottom: 1px solid var(--color-border); padding-right: 20px; } /* 사이드바 접기/펼치기 토글(js/sidebar.js) - .sidebar-brand-row 안에서 "Schedule Manager" 로고 오른쪽 끝에 배치된다. Claude 앱의 사이드바 토글 아이콘과 같은 느낌으로 테두리 없는 아이콘 버튼 스타일을 쓴다 */ .sidebar-toggle-btn { flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 7px; background: transparent; color: var(--color-text-muted); cursor: pointer; } .sidebar-toggle-btn svg { width: 18px; height: 18px; } .sidebar-toggle-btn:hover { background: rgba(58, 53, 82, 0.09); color: var(--color-primary-dark); } .quote-banner { flex: 1; min-width: 0; padding: 10px 24px; text-align: center; font-size: 13px; line-height: 1.5; } .quote-banner:empty { display: none; } /* quote-banner가 비어서(:empty) 접히면 flex:1로 공간을 채워주던 요소가 사라져 뒤따르는 아이콘/버튼들이 기본 정렬(flex-start)대로 왼쪽 끝(0,0)에 붙어버린다 - 예전엔 #logout-btn 하나만 margin-left:auto를 줬는데, 그 앞에 테마 토글 버튼이 새로 생기면서(리포트/설정 페이지는 quotes.js를 안 불러와 배너가 항상 비어있음) 그 버튼만 왼쪽 위에 뜨는 문제가 생겼다 - #logout-btn을 못박는 대신, "비어있는 quote-banner 바로 다음에 오는 요소가 뭐든" 그 요소에 margin-left:auto를 주면 로그아웃 앞에 아이콘이 몇 개든 항상 오른쪽 끝 무리 전체가 통째로 붙는다(명언이 있는 페이지는 :empty가 매치되지 않아 이 규칙 자체가 적용되지 않고, quote-banner의 flex:1이 그대로 같은 효과를 낸다) */ .quote-banner:empty + * { margin-left: auto; } .quote-banner .quote-text { color: var(--color-text); font-style: italic; } .quote-banner .quote-author { margin-left: 8px; color: var(--color-text-muted); } a { color: inherit; text-decoration: none; } /* color: inherit가 없으면 브라우저 기본 버튼 글자색(다크 모드와 무관한 시스템 색, 대체로 검정)이 그대로 남아 - .achievement-headline처럼 자기 색을 따로 안 정하고 부모(