/* ══════════════════════════════════════════════════════════════════ team-themes.css — 팀별 UI 테마 로 전환한다. 팀장이 팀 관리에서 고른 값이 teams.theme에 저장되고, 그 팀을 보는 모든 사람에게 적용된다. 구조 1) 각 테마는 씨앗 색 4개(--t-*)만 선언한다. 2) 공통 블록이 그 씨앗에서 theme.css의 --c-* 를 전부 만들어 낸다. 그래서 테마를 추가할 때 색을 20개씩 적을 필요가 없다. 3) 실제 화면 오버라이드(.bg-white 등)는 theme.css의 .skin-on 규칙이 그대로 쓴다. 여기서는 변수만 바꾸고, 강조색만 따로 손댄다. 테마 목록(허용 id)은 public/js/teamThemes.js 한 곳에만 있다. ══════════════════════════════════════════════════════════════════ */ /* ── 1. 테마별 씨앗 색 ──────────────────────────────────────────── --t-key : 강조색 (버튼·링크·활성 탭) --t-tint : 화면 바탕에 깔리는 옅은 색 --t-ink : 사이드바처럼 짙게 깔리는 색 --t-sky : 본문 하늘색 (일러스트 뒤에 깔린다) */ [data-team-theme="mint"] { --t-key:#0d9488; --t-tint:#f0fdfa; --t-ink:#0f2f2c; --t-sky:#b8ece4; } [data-team-theme="coral"] { --t-key:#e2614a; --t-tint:#fff6f3; --t-ink:#3a1f19; --t-sky:#ffd9cd; } [data-team-theme="grape"] { --t-key:#7c5cf0; --t-tint:#f7f5ff; --t-ink:#261c40; --t-sky:#ded5ff; } [data-team-theme="slate"] { --t-key:#475569; --t-tint:#f6f8fa; --t-ink:#1b2430; --t-sky:#dbe3ec; } [data-team-theme="forest"] { --t-key:#4e9c63; --t-tint:#f3faf0; --t-ink:#1e3b2a; --t-sky:#bfe6f2; --t-art:url('../img/themes/forest.svg'); --t-sun:url('../img/themes/forest-sun.svg'); } [data-team-theme="ocean"] { --t-key:#2f95be; --t-tint:#f1fafd; --t-ink:#10303f; --t-sky:#cdeefa; --t-art:url('../img/themes/ocean.svg'); --t-sun:url('../img/themes/ocean-sun.svg'); } [data-team-theme="sakura"] { --t-key:#d8608c; --t-tint:#fff5f8; --t-ink:#40202d; --t-sky:#ffe7f0; --t-art:url('../img/themes/sakura.svg'); --t-sun:url('../img/themes/sakura-sun.svg'); } [data-team-theme="night"] { --t-key:#6b7ae8; --t-tint:#f4f5fe; --t-ink:#131833; --t-sky:#232a52; --t-art:url('../img/themes/night.svg'); --t-sun:url('../img/themes/night-sun.svg'); } /* ── 2. 씨앗 색 → theme.css 변수 (라이트) ─────────────────────── */ [data-team-theme]:not([data-team-theme="default"]) { --c-bg-base: var(--t-tint); --c-bg-surface: #ffffff; --c-bg-surface2: color-mix(in srgb, var(--t-key) 7%, #ffffff); --c-bg-surface3: color-mix(in srgb, var(--t-key) 16%, #ffffff); --c-bg-surface3-hov: color-mix(in srgb, var(--t-key) 28%, #ffffff); --c-bg-sidebar: var(--t-ink); --c-bg-sidebar-hov: color-mix(in srgb, var(--t-ink) 78%, var(--t-key)); --c-bg-sidebar-act: color-mix(in srgb, var(--t-ink) 68%, var(--t-key)); --c-sidebar-divide: color-mix(in srgb, var(--t-ink) 80%, #ffffff 0%); --c-text-sidebar: color-mix(in srgb, var(--t-tint) 88%, var(--t-key)); --c-text-primary: color-mix(in srgb, var(--t-ink) 88%, #000000); --c-text-secondary: color-mix(in srgb, var(--t-ink) 68%, #ffffff); --c-text-muted: color-mix(in srgb, var(--t-ink) 42%, #ffffff); --c-border: color-mix(in srgb, var(--t-key) 16%, #ffffff); --c-border-input: color-mix(in srgb, var(--t-key) 26%, #ffffff); --c-divide: color-mix(in srgb, var(--t-key) 11%, #ffffff); --c-input-bg: #ffffff; --c-input-ro-bg: color-mix(in srgb, var(--t-key) 9%, #ffffff); --c-input-ro-text: color-mix(in srgb, var(--t-ink) 55%, #ffffff); --c-thead-bg: color-mix(in srgb, var(--t-key) 10%, #ffffff); --c-menu-bg: #ffffff; --c-menu-border: color-mix(in srgb, var(--t-key) 18%, #ffffff); --c-menu-hov: color-mix(in srgb, var(--t-key) 10%, #ffffff); --c-accent: var(--t-key); --c-accent-text: var(--t-key); --c-accent-soft: color-mix(in srgb, var(--t-key) 14%, #ffffff); --c-shadow: 0 4px 10px -3px color-mix(in srgb, var(--t-ink) 22%, transparent), 0 2px 4px -2px color-mix(in srgb, var(--t-ink) 14%, transparent); } /* ── 3. 다크 모드와 겹칠 때 — 팀 색은 유지하되 바탕을 어둡게 ──── */ [data-theme="dark"][data-team-theme]:not([data-team-theme="default"]) { --c-bg-base: color-mix(in srgb, var(--t-ink) 72%, #000000); --c-bg-surface: color-mix(in srgb, var(--t-ink) 88%, #ffffff 4%); --c-bg-surface2: color-mix(in srgb, var(--t-ink) 74%, #ffffff 9%); --c-bg-surface3: color-mix(in srgb, var(--t-ink) 62%, #ffffff 16%); --c-bg-surface3-hov: color-mix(in srgb, var(--t-ink) 48%, #ffffff 24%); --c-bg-sidebar: color-mix(in srgb, var(--t-ink) 86%, #000000); --c-bg-sidebar-hov: color-mix(in srgb, var(--t-ink) 70%, var(--t-key)); --c-bg-sidebar-act: color-mix(in srgb, var(--t-ink) 62%, var(--t-key)); --c-sidebar-divide: color-mix(in srgb, var(--t-ink) 70%, #000000); --c-text-sidebar: color-mix(in srgb, #ffffff 80%, var(--t-key)); --c-text-primary: color-mix(in srgb, #ffffff 92%, var(--t-key)); --c-text-secondary: color-mix(in srgb, #ffffff 62%, var(--t-key)); --c-text-muted: color-mix(in srgb, #ffffff 42%, var(--t-key)); --c-border: color-mix(in srgb, var(--t-ink) 58%, #ffffff 16%); --c-border-input: color-mix(in srgb, var(--t-ink) 46%, #ffffff 24%); --c-divide: color-mix(in srgb, var(--t-ink) 62%, #ffffff 12%); --c-input-bg: color-mix(in srgb, var(--t-ink) 84%, #ffffff 6%); --c-input-ro-bg: color-mix(in srgb, var(--t-ink) 70%, #ffffff 12%); --c-input-ro-text: color-mix(in srgb, #ffffff 58%, var(--t-key)); --c-thead-bg: color-mix(in srgb, var(--t-ink) 80%, #ffffff 6%); --c-menu-bg: color-mix(in srgb, var(--t-ink) 82%, #ffffff 5%); --c-menu-border: color-mix(in srgb, var(--t-ink) 56%, #ffffff 16%); --c-menu-hov: color-mix(in srgb, var(--t-ink) 66%, #ffffff 12%); --c-accent: color-mix(in srgb, var(--t-key) 82%, #ffffff); --c-accent-text: color-mix(in srgb, var(--t-key) 62%, #ffffff); --c-accent-soft: color-mix(in srgb, var(--t-key) 30%, var(--t-ink)); } /* ── 4. 강조색을 파란색 유틸리티에 연결 ─────────────────────────── 화면 전체가 Tailwind의 blue-500/600으로 칠해져 있어, 이 유틸리티들을 강조색 변수로 돌려야 테마가 버튼·링크·탭까지 닿는다. 기본값(--c-accent)은 지금과 같은 파란색이라 다크 모드 모습은 그대로다. */ .skin-on .bg-blue-600, .skin-on .bg-blue-500 { background-color: var(--c-accent) !important; } .skin-on .hover\:bg-blue-700:hover, .skin-on .hover\:bg-blue-600:hover { background-color: color-mix(in srgb, var(--c-accent) 84%, #000) !important; } .skin-on .text-blue-600, .skin-on .text-blue-500, .skin-on .hover\:text-blue-600:hover { color: var(--c-accent-text) !important; } .skin-on .border-blue-600, .skin-on .border-blue-500 { border-color: var(--c-accent) !important; } .skin-on .bg-blue-50, .skin-on .bg-blue-100 { background-color: var(--c-accent-soft) !important; } .skin-on .ring-blue-500 { --tw-ring-color: var(--c-accent) !important; } .skin-on .focus\:ring-blue-500:focus { --tw-ring-color: var(--c-accent) !important; } .skin-on .focus\:border-blue-500:focus { border-color: var(--c-accent) !important; } .skin-on .focus\:ring-blue-300:focus, .skin-on .focus\:ring-blue-400:focus { --tw-ring-color: color-mix(in srgb, var(--c-accent) 55%, transparent) !important; } .skin-on .ring-blue-300, .skin-on .ring-blue-400 { --tw-ring-color: color-mix(in srgb, var(--c-accent) 60%, transparent) !important; } .skin-on .border-blue-400, .skin-on .focus\:border-blue-400:focus { border-color: var(--c-accent) !important; } .skin-on .hover\:bg-blue-50:hover { background-color: var(--c-accent-soft) !important; } .skin-on .text-blue-400 { color: var(--c-accent-text) !important; } .skin-on .text-blue-700, .skin-on .text-blue-800, .skin-on .hover\:text-blue-700:hover, .skin-on .hover\:text-blue-800:hover { color: color-mix(in srgb, var(--c-accent-text) 78%, #000) !important; } .skin-on .text-indigo-500, .skin-on .ring-indigo-400 { color: var(--c-accent-text); --tw-ring-color: var(--c-accent); } /* 로그인 화면 머리 그라데이션도 테마 색으로 */ .skin-on .bg-gradient-to-r.from-blue-600 { background-image: linear-gradient(to right, var(--c-accent), color-mix(in srgb, var(--c-accent) 70%, #7c3aed)) !important; } /* ── 6. 테마 고르는 화면 ─────────────────────────────────────────── */ .team-theme-card { position: relative; border: 2px solid var(--c-border, #e5e7eb); border-radius: .75rem; overflow: hidden; background: var(--c-bg-surface, #fff); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; } .team-theme-card:hover { transform: translateY(-2px); box-shadow: var(--c-shadow, 0 4px 10px rgb(0 0 0 / .08)); } .team-theme-card.selected { border-color: var(--c-accent, #2563eb); } .team-theme-card.selected::after { content: '\f00c'; /* Font Awesome 체크 */ font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: .4rem; right: .5rem; font-size: .7rem; color: #fff; background: var(--c-accent, #2563eb); width: 1.3rem; height: 1.3rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 카드 위쪽 미리보기 — 그 테마의 하늘색 + 일러스트를 그대로 축소해 보여준다 */ .team-theme-preview { height: 3.6rem; background-repeat: no-repeat, repeat-x; background-position: right .3rem bottom, right bottom; background-size: auto 100%, auto 100%; position: relative; } /* 일러스트가 없는 단색 테마는 강조색 띠로 대신한다 */ .team-theme-preview .solid-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1.1rem; } .team-theme-body { padding: .55rem .7rem .65rem; } .team-theme-name { font-size: .82rem; font-weight: 700; color: var(--c-text-primary, #111827); } .team-theme-desc { font-size: .68rem; color: var(--c-text-muted, #9ca3af); margin-top: .1rem; } /* ── 7. 본문(메인 화면) ───────────────────────────────────────────── 사이드바만 물들면 본문이 "기본 화면 위에 띠만 얹은" 모양이 된다. 그래서 본문에도 같은 분위기를 입힌다. · 바탕 : 위에서 아래로 번지는 하늘색 → 틴트 · 카드 : 테마색 윗선 + 옅게 물든 면 + 테마색 테두리 · 바닥 : 화면 맨 아래에 지형이 깔린다 기본 테마에는 아무것도 걸리지 않도록 모두 팀 테마 선택자 안에 둔다. */ [data-team-theme]:not([data-team-theme="default"]) { --t-wash: 42%; --t-ground-veil: 5%; } [data-theme="dark"][data-team-theme]:not([data-team-theme="default"]) { --t-wash: 16%; --t-ground-veil: 50%; } /* 바탕 — .skin-on 의 !important 배경색보다 앞서도록 id 로 건다 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent { background-color: var(--c-bg-base) !important; } /* 카드 — 큰 흰 카드(bg-white rounded-xl)만. 안쪽 입력칸·뱃지는 건드리지 않는다 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent .bg-white.rounded-xl { background-color: color-mix(in srgb, var(--t-key) 3%, var(--c-bg-surface)) !important; /* 두꺼운 윗선 대신 테마색이 살짝 섞인 1px 테두리 — 공통 패널 스타일(panels.css)과 같은 모양을 유지한다 */ border: 1px solid color-mix(in srgb, var(--c-accent) 20%, var(--c-border)); } /* 카드 안 구분선·머리줄도 테마색 쪽으로 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent .border-b, [data-team-theme]:not([data-team-theme="default"]) #mainContent .border-t { border-color: var(--c-border) !important; } /* 페이지 제목 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent h2 { color: var(--c-text-primary) !important; } /* 입력칸 포커스 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent input:focus, [data-team-theme]:not([data-team-theme="default"]) #mainContent select:focus, [data-team-theme]:not([data-team-theme="default"]) #mainContent textarea:focus { outline: none; border-color: var(--c-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 22%, transparent); } /* 표 머리 — 카드 윗선 바로 아래에서 테마색이 이어지게 */ [data-team-theme]:not([data-team-theme="default"]) #mainContent thead th { color: var(--c-text-secondary); } /* 바닥 — 지형은 스크롤되는 본문 끝이 아니라 "보이는 화면의 맨 아래"에 붙인다. background-attachment: fixed 는 위치 기준이 뷰포트라, 카드가 짧아도 항상 화면 바닥에 깔린다. 카드 뒤에 깔리므로 맨 아래 내용이 가려지지 않게 padding-bottom 으로 그만큼 비워 둔다. 일러스트가 없는 단색 테마는 강조색이 옅게 깔린다. */ [data-team-theme]:not([data-team-theme="default"]) { --t-ground-h: 7.5rem; } @media (max-width: 640px) { [data-team-theme]:not([data-team-theme="default"]) { --t-ground-h: 5rem; } } [data-team-theme]:not([data-team-theme="default"]) #mainContent { padding-bottom: var(--t-ground-h); background-image: linear-gradient(color-mix(in srgb, var(--c-bg-base) var(--t-ground-veil), transparent), color-mix(in srgb, var(--c-bg-base) var(--t-ground-veil), transparent)), var(--t-art, linear-gradient(to top, color-mix(in srgb, var(--t-key) 22%, transparent), transparent)), linear-gradient(to bottom, color-mix(in srgb, var(--t-sky) var(--t-wash), var(--c-bg-base)) 0, var(--c-bg-base) 420px); background-repeat: no-repeat, repeat-x, no-repeat; background-attachment: fixed, fixed, scroll; background-position: left bottom, right bottom, left top; background-size: 100% var(--t-ground-h), auto var(--t-ground-h), 100% 100%; }