/* ============================================================ 방수119 (5my.kr) — 사이트 디자인 CSS (테마 daisyui 가 order 10 으로 맨 마지막에 자동 로드 — STYLE.md 규약) [디자인 컨셉 기록 — 필수 유지] - 톤 & 무드 : Y2K 에스테틱 · 2000년대 초 테크 노스탤지어. 버블검 파스텔(소프트핑크·베이비블루·민트·라벤더) 팔레트, 반투명 글래스모피즘 컨테이너, 통통한 3D 글로시 버튼, 둥근 산세리프 타이포(Jua/Gowun Dodum). - 주조색 : primary 소프트핑크 oklch(80% 0.10 350) - 보조색 : secondary 베이비블루 oklch(82% 0.08 240) accent 민트그린 oklch(87% 0.09 165) neutral 라벤더 oklch(80% 0.08 300) - 배경 : 핑크→블루→민트 고정(fixed) 파스텔 그라데이션 위에 반투명 유리(base-100 55% + blur) 카드 - 라운드 : 카드 1.5rem, 버튼·입력 1rem (버블 라운드) / 보더 1px - 타이포 : 제목 'Jua'(둥근 볼드), 본문 'Gowun Dodum' - 유의 : 텍스트 대비 확보를 위해 본문 텍스트는 짙은 톤(*-content), 파스텔 원색은 배경·장식에만 사용 ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Jua&family=Gowun+Dodum&display=swap'); :root { /* 색 (시맨틱) — 버블검 파스텔 */ --color-primary: oklch(80% 0.10 350); /* 소프트핑크 */ --color-primary-content: oklch(34% 0.12 350); --color-secondary: oklch(82% 0.08 240); /* 베이비블루 */ --color-secondary-content: oklch(32% 0.10 255); --color-accent: oklch(87% 0.09 165); /* 민트그린 */ --color-accent-content: oklch(30% 0.08 170); --color-neutral: oklch(82% 0.07 300); /* 라벤더 */ --color-neutral-content: oklch(30% 0.10 300); --color-base-100: oklch(99% 0.008 330); --color-base-200: oklch(95.5% 0.02 320); --color-base-300: oklch(89% 0.035 315); --color-base-content: oklch(32% 0.06 320); /* 형태 — Y2K 버블 라운드 */ --radius-box: 1.5rem; --radius-field: 1rem; --radius-selector: 1rem; --border: 1px; --depth: 1; /* 버튼 입체감 */ } /* ---- 타이포: 둥근 산세리프 ---- */ body { font-family: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; } h1, h2, h3, .card-title, .stat-value, .btn { font-family: 'Jua', 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif; letter-spacing: 0.01em; } /* ---- 전체 배경: 파스텔 그라데이션 (고정) ---- */ .drawer-content { background: linear-gradient(160deg, color-mix(in oklab, var(--color-primary) 45%, white) 0%, color-mix(in oklab, var(--color-secondary) 40%, white) 45%, color-mix(in oklab, var(--color-accent) 45%, white) 100%) fixed; } /* ---- 헤더: 반투명 유리 ---- */ #site-header { background-color: color-mix(in oklab, var(--color-base-100) 60%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in oklab, white 55%, transparent); } /* ---- 글래스모피즘 컨테이너 (흰 표면 카드·통계·게시판 목록) ---- */ #site-main .card.bg-base-100, #site-main .stats { background-color: color-mix(in oklab, var(--color-base-100) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in oklab, white 65%, transparent); box-shadow: 0 8px 32px color-mix(in oklab, var(--color-neutral) 30%, transparent); } /* 라벤더(neutral) 카드도 반투명 유리 톤으로 */ #site-main .card.bg-neutral { background-color: color-mix(in oklab, var(--color-neutral) 65%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid color-mix(in oklab, white 50%, transparent); box-shadow: 0 8px 32px color-mix(in oklab, var(--color-neutral) 35%, transparent); } /* ---- 통통한 3D 글로시 버튼 ---- */ #site-main .btn, #site-header .btn, #site-footer .btn, #site-drawer .btn { background-image: linear-gradient(180deg, color-mix(in oklab, white 75%, transparent) 0%, color-mix(in oklab, white 15%, transparent) 48%, transparent 52%, color-mix(in oklab, white 25%, transparent) 100%); border: 1px solid color-mix(in oklab, white 60%, transparent); box-shadow: 0 4px 0 color-mix(in oklab, var(--color-base-content) 22%, transparent), 0 6px 14px color-mix(in oklab, var(--color-neutral) 35%, transparent), inset 0 1px 0 color-mix(in oklab, white 80%, transparent); text-shadow: 0 1px 0 color-mix(in oklab, white 55%, transparent); transition: transform 0.1s ease, box-shadow 0.1s ease; } #site-main .btn:active, #site-header .btn:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in oklab, var(--color-base-content) 22%, transparent), 0 3px 8px color-mix(in oklab, var(--color-neutral) 30%, transparent); } /* ghost/링크 버튼은 입체효과 제외 */ #site-main .btn-ghost, #site-header .btn-ghost, #site-drawer .btn-ghost { background-image: none; border-color: transparent; box-shadow: none; text-shadow: none; } /* ---- 파스텔 원색 텍스트의 대비 보정 (아이콘·수치 등) ---- */ #site-main .text-primary { color: color-mix(in oklab, var(--color-primary) 45%, var(--color-primary-content)); } #site-main .text-secondary { color: color-mix(in oklab, var(--color-secondary) 45%, var(--color-secondary-content)); } #site-main .stat-value.text-primary { color: color-mix(in oklab, var(--color-primary) 40%, var(--color-primary-content)); } /* ---- 뱃지: 캔디 글로스 ---- */ #site-main .badge { background-image: linear-gradient(180deg, color-mix(in oklab, white 55%, transparent), transparent 60%); border: 1px solid color-mix(in oklab, white 55%, transparent); box-shadow: 0 2px 8px color-mix(in oklab, var(--color-neutral) 30%, transparent); } /* ---- 푸터: 반투명 유리 ---- */ #site-footer { background-color: color-mix(in oklab, var(--color-base-100) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in oklab, white 55%, transparent); } /* --------------------------------------------------------------------------- * 사이트 푸터 (#site-footer) — Y2K 버블검 파스텔 / 글래스 * 회사정보·정책링크·카피라이트가 tail.sub.php 마크업으로 들어온다. * ------------------------------------------------------------------------- */ #site-footer { position: relative; background-color: color-mix(in oklab, var(--color-base-100) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid color-mix(in oklab, white 55%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, white 80%, transparent); } /* 상단 파스텔 그라디언트 리본 */ #site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-neutral)); opacity: .85; } /* 회사명 — 둥근 볼드(Jua) + 버블 파스텔 그라디언트 텍스트 */ #site-footer address p:first-child { font-family: 'Jua', sans-serif; font-size: 1.05rem; background: linear-gradient(100deg, var(--color-primary), var(--color-secondary) 55%, var(--color-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* 정책 링크 — 통통한 알약 hover */ #site-footer nav a { border-radius: 999px; padding: .15rem .6rem; transition: background-color .2s ease, color .2s ease; } #site-footer nav a:hover { background-color: color-mix(in oklab, var(--color-primary) 32%, transparent); color: var(--color-primary-content); text-decoration: none; } /* 로고(브랜드) 텍스트 — h1 과 동일한 폰트(Jua) */ .site-brand { font-family: 'Jua', 'Gowun Dodum', 'Apple SD Gothic Neo', sans-serif; }