/* ========================================================= 다크 페이지 테마 (dark.css) 피드백 2번 — 라미네이트 · 미백치료 · 일반진료 는 배경을 어두운색으로. 페이지 스텁에서 $pageTheme = 'dark' 를 지정하면 header.php 가 + 이 파일을 함께 붙입니다. 기존 라이트 규칙은 건드리지 않고 여기서만 덮어씁니다. ========================================================= */ body.theme-dark { /* detail.css 토큰 재정의 — 토큰을 쓰는 컴포넌트는 자동으로 따라옵니다 */ --d-bg: #0d1b2e; --d-bg-soft: #0d1b2e; --d-bg-gray: #16273a; --d-bg-panel: #16273a; --d-line: #24384f; --d-ghost: #232322; --d-tx-strong: #ffffff; --d-tx: rgba(255, 255, 255, .78); --d-tx-muted: rgba(255, 255, 255, .58); /* 포인트 색 — 라이트에서 쓰는 네이비(#3c526e)는 어두운 배경에서 묻히므로 브랜드 베이지 톤으로 올립니다(.hl · 카드 번호 · 활성 메뉴 등이 이 토큰을 씁니다) */ --d-blue: #d6ab9c; background: #0d1b2e; color: rgba(255, 255, 255, .78); } /* 히어로는 implant.css 에서 #101c2c 로 조금 더 어둡게 잡혀 있다. 다크 페이지의 기본 배경은 #0d1b2e 하나로 통일한다 — 스크롤로 히어로를 지나갈 때 배경이 미묘하게 밝아지는 단차가 보였다. */ body.theme-dark .whero { background: #0d1b2e; } /* ---------- 헤더: 스크롤 시 흰 배경 → 어두운 배경 ---------- */ body.theme-dark .site-header.is-scrolled { background: #0d1b2e; box-shadow: 0 2px 14px rgba(0, 0, 0, .5); } body.theme-dark .site-header.is-scrolled .site-header__inner, body.theme-dark .site-header.is-scrolled .utilnav__user { color: #fff; } body.theme-dark .site-header.is-scrolled .hamburger--header span { background: #fff; } /* 시안 260904 — 다크 바에서도 기본(2톤) 로고를 그대로 쓴다 */ body.theme-dark .site-header.is-scrolled .hsocial__btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); } /* SNS 아이콘은 원본이 흰색 SVG — 필터를 풀면 화이트가 된다 */ body.theme-dark .site-header.is-scrolled .hsocial__btn img { filter: none; } /* ---------- 브레드크럼 띠 ---------- */ body.theme-dark .page-nav { background: #0d1b2e; border-bottom-color: #24384f; } body.theme-dark .page-nav__current { color: #fff; } body.theme-dark .page-nav__group { color: rgba(255, 255, 255, .45); } body.theme-dark .page-nav__group:hover { color: rgba(255, 255, 255, .7); } body.theme-dark .page-nav__chev { filter: invert(1) brightness(1.6); } body.theme-dark .page-nav__menu, body.theme-dark .list-select__menu { background: #16273a; border-color: #24384f; } body.theme-dark .page-nav__menu-link { color: rgba(255, 255, 255, .72); } body.theme-dark .page-nav__menu-link:hover, body.theme-dark .list-select__menu button:hover { background: #24384f; color: #fff; } body.theme-dark .page-nav__menu-link.is-active, body.theme-dark .list-select__menu button.is-active { background: #16273a; color: var(--d-blue); } /* ---------- 섹션 공통 ---------- */ body.theme-dark .dsec--gray { background: var(--d-bg-soft); } body.theme-dark .dhead__title { color: #fff; } body.theme-dark .dhead__sub { color: rgba(255, 255, 255, .6); } body.theme-dark .dhead__eyebrow { color: rgba(255, 255, 255, .4); } /* ---------- 페이지 타이틀 / 리드 / 인사말 ---------- */ body.theme-dark .dptitle__t { color: #fff; } body.theme-dark .dptitle__p { color: rgba(255, 255, 255, .6); } body.theme-dark .dptitle__eyebrow { color: rgba(255, 255, 255, .4); } body.theme-dark .dgreet__t { color: #fff; } body.theme-dark .dgreet__p { color: rgba(255, 255, 255, .68); } body.theme-dark .dgreet__sign { color: #fff; } body.theme-dark .tc-lead-sub { color: #fff; } body.theme-dark .tc-lead-p { color: rgba(255, 255, 255, .62); } /* ---------- 카드 ---------- */ body.theme-dark .dcard { background: #16273a; border-color: #24384f; box-shadow: none; } body.theme-dark .dcard__t { color: #fff; } body.theme-dark .dcard__d { color: rgba(255, 255, 255, .6); } /* ---------- 원형 체크 — 어두운 배경에서도 흰 원 + 로즈골드 체크 + 검정 글씨 (260904) ---------- */ body.theme-dark .dcircle, body.theme-dark .dsec--gray .dcircle { background: #fff; border-color: #e4e7ea; color: #111; } body.theme-dark .dcircle__t { color: #111; } body.theme-dark .dcircle__ico, body.theme-dark .dcircle svg { color: #c1907e; } /* ---------- 스텝 ---------- */ body.theme-dark .dstep { background: #16273a; } body.theme-dark .dstep__t { color: #fff; } body.theme-dark .dstep__d { color: rgba(255, 255, 255, .58); } body.theme-dark .dstep--arrow::after { background: #16273a; color: rgba(255, 255, 255, .45); } /* ---------- 좌우 2단 밴드 ---------- */ body.theme-dark .dsplit--gray { background: #16273a; } body.theme-dark .dsplit--pink { background: #0d1b2e; } /* 갈색 배경 → 짙은 남색 통일 (260903) */ body.theme-dark .dsplit--pink .dsplit__t, body.theme-dark .dsplit--pink .dsplit__t2 { color: #fff; } body.theme-dark .dsplit__t, body.theme-dark .dsplit__t2 { color: #fff; } body.theme-dark .dsplit__p { color: rgba(255, 255, 255, .62); } body.theme-dark .dsplit__eyebrow { color: rgba(255, 255, 255, .4); } body.theme-dark .dsplit__callout small { color: rgba(255, 255, 255, .6); } /* ---------- 비교표 — 시안 260904 어두운 패널 한 덩어리 + 헤더/구분열 로즈골드 + 값은 흰 굵은 글씨, 구분선 없음 ---------- */ body.theme-dark .dvs { background: transparent; background-color: transparent; } body.theme-dark .dvs__tbl { background: #161f2e; border: 1px solid rgba(255, 255, 255, .18); border-radius: clamp(18px, 2.2vw, 28px); overflow: hidden; box-shadow: 0 0 0 5px rgba(255, 255, 255, .05), 0 26px 60px rgba(6, 14, 26, .35); } body.theme-dark .dvs__tbl th, body.theme-dark .dvs__tbl td { background: transparent; background-color: transparent; border-color: transparent; box-shadow: none; } body.theme-dark .dvs__tbl thead th, body.theme-dark .dvs__tbl thead th:nth-child(1), body.theme-dark .dvs__tbl thead th:nth-child(2), body.theme-dark .dvs__tbl thead th:nth-child(3) { color: #d6ab9c; font-weight: 700; } body.theme-dark .dvs__tbl tbody th { color: #d6ab9c; font-weight: 700; } body.theme-dark .dvs__tbl tbody td, body.theme-dark .dvs__tbl tbody td:first-child, body.theme-dark .dvs__tbl tbody td:last-child { color: #fff; font-weight: 700; } body.theme-dark .dvs__tbl tbody td::before { content: none; } /* ---------- 일반 비교표(tc-table) ---------- */ body.theme-dark .tc-table tbody th { background: #232322; color: #fff; } body.theme-dark .tc-table tbody td { color: rgba(255, 255, 255, .62); } body.theme-dark .tc-table th, body.theme-dark .tc-table td { border-color: #24384f; } /* ---------- 전후 케이스 ---------- */ body.theme-dark .dcase__col { background: #16273a; border-color: #24384f; box-shadow: none; } body.theme-dark .dcase__col--b .dcase__label { background: #232322; color: rgba(255, 255, 255, .5); } body.theme-dark .dcase__cap { color: rgba(255, 255, 255, .5); } /* ---------- 인용/쿼트 ---------- */ /* 라이트 변형(흰 베일 + 네이비 글자)을 어두운 베일 + 흰 글자로 뒤집습니다 */ body.theme-dark .dquote--light { background: #0d1b2e; } body.theme-dark .dquote--light .dquote__veil { background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .78) 46%, rgba(10, 10, 10, .88) 100%); } body.theme-dark .dquote--light .dquote__inner { color: #fff; } body.theme-dark .dquote--light .dquote__q { color: #fff; text-shadow: none; } body.theme-dark .dquote--light .dquote__p { color: rgba(255, 255, 255, .62); } /* ---------- 지그재그(일반진료) ---------- */ body.theme-dark .dzig__t { color: #fff; } body.theme-dark .dzig__p { color: rgba(255, 255, 255, .6); } body.theme-dark .dzig__media--fig { background: #16273a; } /* ---------- 프로세스(원형 스텝) ---------- */ body.theme-dark .proc__circle { background: #16273a; border-color: #33332f; } body.theme-dark .proc__num { color: rgba(255, 255, 255, .55); } body.theme-dark .proc__line { background: #24384f; } body.theme-dark .proc__t { color: #fff; } body.theme-dark .proc__d { color: rgba(255, 255, 255, .58); } /* ---------- 이미지 플레이스홀더 ---------- */ body.theme-dark .img-ph { background: #232322; border-color: #3a3a37; color: #8d8d86; } /* ---------- 푸터 ---------- */ /* 푸터 그라데이션은 page.css 의 공통 규칙(남색 → 포인트 블루)을 그대로 쓴다 (260904) */ /* 푸터는 시안 0910 p6 대로 밝은 버전과 '동일하게' 간다 — 테마별로 글자색을 따로 잡던 규칙을 걷어냈다. 어차피 글씨가 놓이는 바탕은 두 버전 모두 같은 베이비 블루 단색이다. */ /* ========================================================= UI 시안(0828) — 어두운 배경/박스 색 지정 ========================================================= */ body.theme-dark { --d-bg: #0d1b2e; --d-bg-soft: #0d1b2e; --d-bg-gray: #16273a; --d-bg-panel: #16273a; --d-line: #24384f; --d-ghost: #16273a; background: #0d1b2e; } body.theme-dark .dsec--dark { background: #0d1b2e; } /* 어두운 박스 — 테두리 + 상단 하이라이트 */ body.theme-dark .dcard, body.theme-dark .dcards--dark .dcard { background: #16273a; border: 1px solid #24384f; border-radius: 12px; position: relative; box-shadow: 0 14px 30px rgba(0, 0, 0, .35); } body.theme-dark .dcard::before { content: ''; position: absolute; left: 12px; right: 12px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); } /* 260904 시안 — 다크 페이지도 기본은 밝은 디폴트 바, 스크롤하면 다크 바로 전환. (전환 규칙은 위 '헤더: 스크롤 시' 블록에 있다) */ body.theme-dark .site-header.is-scrolled { box-shadow: 0 2px 14px rgba(0, 0, 0, .45); } /* 다크 페이지 배경 최종 통일 — 검정·갈색 계열이 남지 않도록 (260903) */ body.theme-dark .dsec, body.theme-dark .dsec--dark, body.theme-dark .dsec--gray, body.theme-dark .dsplit, body.theme-dark .dsplit--dark, body.theme-dark .dsplit--gray, body.theme-dark .dsplit--pink, body.theme-dark .dzig, body.theme-dark .dquote, body.theme-dark .dsteps, body.theme-dark .proc { background-color: #0d1b2e; } body.theme-dark .dcard, body.theme-dark .dstep { background-color: #16273a; } /* 마퀴·하단 밴드는 detail.css 에서 투명으로 두어 페이지 배경이 그대로 비치게 했다 — 여기서 같은 색을 한 번 더 칠할 이유가 없어졌다. */ body.theme-dark .bmarquee__item, body.theme-dark .bmarquee__sep { background-image: linear-gradient(90deg, #d6ab9c 0%, #7eadee 25%, #d6ab9c 50%, #7eadee 75%, #d6ab9c 100%); } /* 마퀴 — 다크 배경에서는 밝은 로즈골드 단색 (260906) */ body.theme-dark .bmarquee__item, body.theme-dark .bmarquee__sep { background-image: none; color: #d6ab9c; }