@import url("https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&display=swap"); /* ============================================================= 사주클럽 (saju.club) — 사이트 디자인 [ 핑크 · 아기자기 · 다크/라이트 토글 ] ------------------------------------------------------------- [톤 & 무드] 여성스럽고 아기자기한 분홍빛. 둥글둥글·폭신·상큼. 다크 : 깊은 자두빛 밤에 핑크·라벤더·민트가 은은히 발광 라이트: 파스텔 핑크크림, 몽글 방울 [테마 전환] 기본값은 다크. 로 전환한다. - 값이 없거나 "dark" → :root 의 다크 팔레트 - "light" → :root[data-sc-theme="light"] 오버라이드 전환은 /js/theme-toggle.js (헤더 햄버거 좌측 버튼) 가 하고, 선택은 localStorage('sc-theme') 에 저장된다. FOUC(첫 페인트 깜빡임) 방지: extend/saju.theme.php 가 에 인라인 스크립트를 넣어 body 그리기 전에 속성을 세팅한다. (theme/daisyui 는 수정 금지라 헤더 버튼도 JS 로 주입한다) 테마별로 바뀌는 값은 전부 CSS 변수로 뺐다 — 팔레트 두 블록만 바꾸면 된다. [백업] 먹빛 우주 = style.cosmos.css (롤백: cp css/style.cosmos.css css/style.css) [형태] 카드 1.75rem, 버튼 알약(pill). [타이포] 제목 Jua · 본문 Gowun Dodum. [규약] STYLE.md — 디자인은 이 파일에서만. theme/daisyui/ 는 수정 금지. inline style·!important 금지. prefers-reduced-motion 에서 모션 정지. ============================================================= */ :root { /* --- 공통(테마 무관) --- */ --font-cute: "Jua", "Gowun Dodum", sans-serif; --font-body: "Gowun Dodum", "Apple SD Gothic Neo", sans-serif; --radius-box: 1.75rem; --radius-field: 1.5rem; --radius-selector: 1rem; --border: 1px; --depth: 0; /* 파스텔 rgb (양 테마 공용) — 밝고 선명한 캔디 톤 */ --sc-pink: 255, 118, 186; --sc-rose: 255, 148, 138; --sc-mint: 118, 240, 212; --sc-lav: 196, 166, 255; /* =========== 다크 (기본) — 산뜻한 대비 + 캔디 액센트 =========== * 핵심(스크린샷 교훈): 카드가 배경에 묻히면 칙칙해진다. 배경은 깊고 깨끗하게, 카드는 "확실히 밝게" 띄워 명도 대비(elevation)를 크게 준다. 글자는 크리스프 화이트, 테두리는 선명한 핑크로 카드를 또렷하게. */ --color-primary: oklch(74% 0.21 352); /* 핫핑크 (버튼·강조) */ --color-primary-content: oklch(99% 0.01 352); --color-secondary: oklch(81% 0.15 30); /* 코랄피치 */ --color-secondary-content: oklch(25% 0.06 30); --color-accent: oklch(86% 0.16 178); /* 프레시 민트 */ --color-accent-content: oklch(26% 0.07 178); --color-neutral: oklch(50% 0.03 325); --color-neutral-content: oklch(99% 0.005 340); --color-base-100: oklch(36% 0.05 328); /* 확실히 밝게 띄운 카드 */ --color-base-200: oklch(17% 0.022 315); /* 깊고 깨끗한 배경 */ --color-base-300: oklch(52% 0.07 332); /* 선명한 보더 */ --color-base-content: oklch(98% 0.008 340); /* 크리스프 화이트 */ --color-info: oklch(82% 0.12 225); --color-success: oklch(85% 0.16 165); --color-warning: oklch(89% 0.14 88); --color-error: oklch(75% 0.20 18); --sc-bg: #15121c; --sc-body-image: radial-gradient(1100px 760px at 12% -10%, rgba(var(--sc-pink), 0.18), transparent 55%), radial-gradient(950px 700px at 108% 4%, rgba(var(--sc-lav), 0.15), transparent 55%), radial-gradient(900px 820px at 50% 120%, rgba(var(--sc-mint), 0.12), transparent 55%), linear-gradient(180deg, #1e1830 0%, #15121c 55%, #100d18 100%); --sc-card: rgba(66, 52, 80, 0.82); /* 불투명↑ · 배경보다 확실히 밝게 */ --sc-line: rgba(255, 132, 196, 0.5); /* 선명한 핑크 테두리 */ --sc-bar: rgba(24, 19, 32, 0.78); --sc-card-shadow: 0 18px 44px -16px rgba(0, 0, 0, 0.6), 0 0 30px -8px rgba(var(--sc-pink), 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06); --sc-hero-glow: 0.30; --sc-bubble-op: 0.9; --sc-bubble-sat: 1.25; } /* =========== 라이트 =========== */ :root[data-sc-theme="light"] { --color-primary: oklch(72% 0.15 355); --color-primary-content: oklch(99% 0.01 355); --color-secondary: oklch(83% 0.10 45); --color-secondary-content: oklch(40% 0.08 40); --color-accent: oklch(82% 0.13 170); --color-accent-content: oklch(38% 0.07 175); --color-neutral: oklch(55% 0.06 350); --color-neutral-content: oklch(99% 0.01 350); --color-base-100: oklch(99.2% 0.006 350); --color-base-200: oklch(97.5% 0.018 350); --color-base-300: oklch(93% 0.03 350); --color-base-content: oklch(42% 0.05 355); --color-info: oklch(80% 0.09 230); --color-success: oklch(82% 0.13 165); --color-warning: oklch(88% 0.12 85); --color-error: oklch(72% 0.16 20); --sc-bg: #fff2f7; --sc-body-image: radial-gradient(1000px 700px at 12% -8%, rgba(var(--sc-pink), 0.28), transparent 60%), radial-gradient(900px 650px at 108% 6%, rgba(var(--sc-lav), 0.26), transparent 60%), radial-gradient(900px 800px at 50% 116%, rgba(var(--sc-mint), 0.22), transparent 60%), linear-gradient(180deg, #fff4f8 0%, #fdeef6 55%, #f6f0ff 100%); --sc-card: rgba(255, 255, 255, 0.72); --sc-line: rgba(255, 141, 177, 0.28); --sc-bar: rgba(255, 255, 255, 0.78); --sc-card-shadow: 0 14px 34px -14px rgba(var(--sc-pink), 0.5), 0 4px 12px -6px rgba(var(--sc-lav), 0.4); --sc-hero-glow: 0.18; --sc-bubble-op: 0.85; --sc-bubble-sat: 1; } /* ============================================================= 배경 — 그라데이션 + 발광 보케 방울 + 물방울 무늬 ============================================================= */ body { font-family: var(--font-body); color: var(--color-base-content); background-color: var(--sc-bg); background-image: var(--sc-body-image); background-attachment: fixed; } body::before { content: ""; position: fixed; inset: -20% -10% -30%; z-index: 0; pointer-events: none; background-image: radial-gradient(closest-side circle at 18% 82%, rgba(var(--sc-pink), 0.42), transparent 100%), radial-gradient(closest-side circle at 80% 88%, rgba(var(--sc-lav), 0.34), transparent 100%), radial-gradient(closest-side circle at 44% 96%, rgba(var(--sc-rose), 0.32), transparent 100%), radial-gradient(closest-side circle at 90% 68%, rgba(var(--sc-mint), 0.26), transparent 100%), radial-gradient(closest-side circle at 8% 58%, rgba(var(--sc-lav), 0.24), transparent 100%); background-repeat: no-repeat; background-size: 48% 48%, 42% 42%, 36% 36%, 30% 30%, 26% 26%; filter: blur(16px) saturate(var(--sc-bubble-sat)); opacity: var(--sc-bubble-op); animation: sc-rise 26s ease-in-out infinite alternate; will-change: transform; } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(var(--sc-pink), 0.20) 1.4px, transparent 1.5px); background-size: 36px 36px; opacity: 0.55; animation: sc-twinkle 7s ease-in-out infinite alternate; } @keyframes sc-rise { from { transform: translateY(0) scale(1); } to { transform: translateY(-4%) scale(1.05); } } @keyframes sc-twinkle { from { opacity: 0.32; } to { opacity: 0.62; } } #site-header { z-index: 2; } #site-main, #site-footer { position: relative; z-index: 1; } /* ============================================================= 카드 · 바 — 글래스 + 핑크 그림자/발광 ============================================================= */ #site-main .card, #site-main .collapse, #site-main .stats { background-color: var(--sc-card); border: 1px solid var(--sc-line); box-shadow: var(--sc-card-shadow); backdrop-filter: blur(7px); } #site-main .stats .stat { border: none; box-shadow: none; background-color: transparent; } #site-header { background-color: var(--sc-bar); border-bottom: 1px solid var(--sc-line); backdrop-filter: blur(10px); } #site-footer { background-color: var(--sc-bar); border-top: 1px solid var(--sc-line); backdrop-filter: blur(10px); } /* ============================================================= 다크모드 토글 버튼 — JS 가 헤더 햄버거 좌측에 주입. 모바일에서만 노출(팝업 메뉴 옆). 데스크톱은 가로 메뉴라 숨김. ============================================================= */ #site-header .sc-theme-toggle { display: none; color: var(--color-base-content); } @media (max-width: 1023px) { #site-header .sc-theme-toggle { display: inline-flex; } } #site-header .sc-theme-toggle .fa { font-size: 1.1rem; } /* ============================================================= 타이포 · 버튼 ============================================================= */ #site-main h1, #site-main h2, #site-main h3, #site-main .card-title { font-family: var(--font-cute); font-weight: 400; letter-spacing: 0.01em; } #site-main .btn { font-family: var(--font-cute); font-weight: 400; border: none; } #site-main .btn-primary { box-shadow: 0 8px 22px -6px rgba(var(--sc-pink), 0.7), 0 0 16px -4px rgba(var(--sc-pink), 0.45); transition: transform 0.18s ease, box-shadow 0.18s ease; } #site-main .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(var(--sc-pink), 0.85), 0 0 22px -2px rgba(var(--sc-pink), 0.6); } #site-main .btn-primary:active { transform: translateY(0); } /* ============================================================= 랜딩 — 브랜드 · Hero · 소개 카드 ============================================================= */ #site-main > section:first-child { position: relative; overflow: hidden; background-image: radial-gradient(circle at 50% -10%, rgba(var(--sc-pink), var(--sc-hero-glow)), transparent 62%); } #site-main > section:first-child h1 { background-image: linear-gradient(135deg, #ffb0d2 0%, #ff8ab0 48%, #ffc09a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 16px rgba(var(--sc-pink), 0.5)); } #site-main #intro article.card { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } #site-main #intro article.card:hover { transform: translateY(-4px); border-color: rgba(var(--sc-pink), 0.6); box-shadow: var(--sc-card-shadow), 0 0 30px -6px rgba(var(--sc-pink), 0.45); } #site-main #intro article.card .text-primary { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 9999px; background: linear-gradient(135deg, rgba(var(--sc-pink), 0.26), rgba(var(--sc-lav), 0.24)); box-shadow: 0 0 20px -4px rgba(var(--sc-pink), 0.45); color: var(--color-primary); } /* ============================================================= 모션 최소화 존중 ============================================================= */ @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } #site-main .btn-primary, #site-main #intro article.card { transition: none; } #site-main .btn-primary:hover, #site-main #intro article.card:hover { transform: none; } } /* ── 로고: 루트 /logo.svg 사용 ── * 테마 head.php·tail.sub.php 는 /img/logo.png 를 로 렌더한다(테마 파일은 수정 금지). * → CSS content 로 표시 이미지만 SVG 로 교체(테마 재배포에도 안전). * 핫핑크(#f84b9e) 로고는 다크(기본)·라이트 헤더 바와 base-100 푸터 모두에서 대비 확보. */ /* head/tail(#site-header·#site-footer) 과 동일하게, 회원가입/로그인 폼 로고(img.logo)도 * 표시 이미지를 /logo.svg 로 교체한다(테마 파일 수정 없이 CSS content 로만). */ #site-header img[src$="/logo.png"], #site-footer img[src$="/logo.png"], img.logo[src$="/logo.png"] { content: url("/logo.svg"); } /* 폼 로고(img.logo) 크기 제약 — 테마 스킨 custom.css 의 .logo 규칙이 큰 주석 블록(4~60행) * 안이라 무효라서, 큰 배너 로고가 폼 카드에서 과대 표시됨 → 여기서 캡. * (푸터 .logo 는 컨테이너라 img.logo 로만 스코프해 영향 없음.) */ img.logo { max-width: 160px; height: auto; }