/** * theme-bridge.css * ─────────────────────────────────────────────── * 서브 페이지(guestbook, diary, monthly, archive, gallery, review)가 * 이미 쓰고 있는 --w80, --w40 같은 변수들을 * 공통 테마 시스템과 연결해주는 브릿지 파일. * * 각 페이지 에서 로 include. * ─────────────────────────────────────────────── */ /* ===== 기본(다크) 테마 — 기존 색상 그대로 ===== */ :root { /* 공통 테마 변수 */ --text-primary: rgba(255,255,255,1); --text-strong: rgba(255,255,255,0.90); --text-secondary: rgba(255,255,255,0.80); --text-muted: rgba(255,255,255,0.60); --text-soft: rgba(255,255,255,0.40); --text-faint: rgba(255,255,255,0.25); --text-ghost: rgba(255,255,255,0.15); --card-bg: rgba(0,0,0,0.22); --card-border: rgba(255,255,255,0.12); --card-blur: 14px; --card-saturate: 120%; --card-radius: 18px; --card-radius-sm: 12px; --card-shadow: 0 8px 28px rgba(61,42,30,0.22); --input-bg: rgba(255,255,255,0.10); --input-border: rgba(255,255,255,0.12); --input-focus: rgba(255,255,255,0.25); --btn-bg: rgba(255,255,255,0.18); --btn-border: rgba(255,255,255,0.25); --btn-hover: rgba(255,255,255,0.25); --divider: rgba(255,255,255,0.18); --row-bg: rgba(255,255,255,0.10); --row-hover: rgba(255,255,255,0.18); /* ── 서브 페이지 기존 변수 매핑 (호환성) ── */ /* 기존 페이지들은 --w80, --w40 같은 이름을 쓰고 있음 */ --w: var(--text-primary); --w80: var(--text-secondary); --w60: var(--text-muted); --w40: var(--text-soft); --w25: var(--text-faint); --w18: rgba(255,255,255,0.18); --w10: var(--input-bg); --white: var(--text-primary); --white80: var(--text-secondary); --white60: var(--text-muted); --white40: var(--text-soft); --white25: var(--text-faint); --white18: rgba(255,255,255,0.18); --white10: var(--input-bg); --bd: var(--card-border); --border: var(--card-border); --sh: 0 8px 32px rgba(0,0,0,0.35); --shadow: 0 8px 32px rgba(0,0,0,0.35); } /* ===== 라이트 테마 오버라이드 ===== */ body.theme-light { --text-primary: #3d2a1e; --text-strong: #4a3526; --text-secondary: #5a4131; --text-muted: #6b5044; --text-soft: #9d8478; --text-faint: #b9a598; --text-ghost: rgba(61,42,30,0.25); --card-bg: rgba(255,255,255,0.45); --card-border: rgba(61,42,30,0.15); --card-blur: 20px; --card-saturate: 140%; --card-radius: 18px; --card-radius-sm: 12px; --card-shadow: 0 6px 24px rgba(61,42,30,0.14); --input-bg: rgba(255,255,255,0.55); --input-border: rgba(61,42,30,0.15); --input-focus: rgba(61,42,30,0.35); --btn-bg: rgba(255,255,255,0.55); --btn-border: rgba(61,42,30,0.2); --btn-hover: rgba(255,255,255,0.75); --divider: rgba(61,42,30,0.15); --row-bg: rgba(255,255,255,0.35); --row-hover: rgba(255,255,255,0.55); /* ★ 서브 페이지가 자기 :root에 하드코딩한 변수들 강제 덮어쓰기 body.theme-light의 특이도가 :root보다 높아서 이김 */ --w: #3d2a1e; --w80: #5a4131; --w60: #6b5044; --w40: #9d8478; --w25: #b9a598; --w18: rgba(61,42,30,0.18); --w10: rgba(255,255,255,0.45); --white: #3d2a1e; --white80: #5a4131; --white60: #6b5044; --white40: #9d8478; --white25: #b9a598; --white18: rgba(61,42,30,0.18); --white10: rgba(255,255,255,0.45); --bd: rgba(61,42,30,0.15); --border: rgba(61,42,30,0.15); } /* ===== 서브 페이지 카드 ===== */ /* 기존 페이지들의 .card::before가 rgba(0,0,0,.22) 하드코딩되어 있는데, 이 파일이 나중에 로드되도록 하면 오버라이드 가능 */ body.theme-light .card::before { background: var(--card-bg) !important; backdrop-filter: saturate(var(--card-saturate)) blur(var(--card-blur)) !important; -webkit-backdrop-filter: saturate(var(--card-saturate)) blur(var(--card-blur)) !important; } /* 라이트 테마에서 기타 하드코딩 요소들 강제 오버라이드 */ body.theme-light .gb-entry, body.theme-light .post-row, body.theme-light .task-item, body.theme-light .goal-item, body.theme-light .day-col, body.theme-light .cat-chip, body.theme-light .img-preview-item, body.theme-light .gb-reply { color: var(--text-primary); } /* 테마 전환 부드럽게 */ body { transition: color 0.4s ease; } .card, .card::before, .ghost-inp, .btn, .gb-entry, .post-row { transition: background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; } /* ===== 라이트 테마 전용: 카드 그림자 옅게 ===== */ /* 밝은 배경에서 카드(THIS MONTH'S THEME, MONTHLY GOALS 등) 그림자가 너무 진해 보이는 문제 해결 */ body.theme-light .card { box-shadow: 0 4px 16px rgba(61,42,30,0.08) !important; } /* ═══════════════════════════════════════════ 프로필 페이지 전용 라이트 오버라이드 (CSS 변수 대신 하드코딩 rgba를 쓰고 있어서 별도 처리) ═══════════════════════════════════════════ */ body.theme-light { color: #3d2a1e; } body.theme-light .profile-name { color: #3d2a1e; } body.theme-light .profile-sub { color: rgba(61,42,30,0.5); } body.theme-light .profile-bio { color: rgba(61,42,30,0.75); } body.theme-light .section-label { color: rgba(61,42,30,0.45); } body.theme-light .closing-quote { color: rgba(61,42,30,0.5); } body.theme-light .like-word { color: rgba(61,42,30,0.65); } body.theme-light .like-word:hover { color: rgba(61,42,30,0.95); } body.theme-light .like-sep { color: rgba(61,42,30,0.22); } body.theme-light .divider-line { background: rgba(61,42,30,0.15); } body.theme-light .divider-dot { color: rgba(61,42,30,0.3); } body.theme-light .banner-link { border-color: rgba(61,42,30,0.12); } body.theme-light .banner-link:hover { border-color: rgba(61,42,30,0.3); box-shadow: 0 4px 12px rgba(61,42,30,0.15); } body.theme-light .banner-empty { border-color: rgba(61,42,30,0.18); color: rgba(61,42,30,0.25); }