/* ============================================================ dodon-header.css — dodon 공통 헤더 (전체 정리본) ------------------------------------------------------------ · header.php와 짝. 에서 항상 마지막 로드 → 헤더 통일 · 색은 CSS 변수로. 대분류 hover/활성은 '현재 페이지 테마색' 사용 (--cat-accent/strong/weak 를 header.php가 .dh-nav에 인라인 주입 → 하위 상속) · 드롭다운/메뉴는 각진 형태, 아이콘 버튼만 원형 ============================================================ */ :root{ --dh-accent:#2F8F7B; /* 기본 포인트색(초록) */ --dh-accent-2:#23695A; /* 진한 포인트 */ --dh-accent-soft:#D6ECE6; /* 연한 포인트 */ --dh-ink:#243247; /* 기본 글자 */ --dh-muted:#61707A; /* 흐린 글자 */ --dh-line:#D8DDD8; /* 테두리/구분선 */ } /* ── 헤더 틀 ── */ .site-header.dh{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--dh-line); font-family:"Noto Sans KR", system-ui, sans-serif; } /* ── 상단: [로고] [검색] [아이콘] ── */ .dh-top{ display:grid; grid-template-columns:150px 1fr auto; gap:18px; align-items:center; padding:14px 0; } .dh-brand img{ height:30px; width:auto; display:block; } .dh-search{ display:flex; align-items:center; gap:8px; height:44px; padding:4px 4px 4px 16px; width:100%; max-width:640px; border:2px solid var(--dh-accent); border-radius:999px; background:#fff; } .dh-search input{ flex:1; border:0; outline:none; font-size:15px; background:transparent; min-width:80px; } .dh-search-btn{ flex-shrink:0; height:36px; padding:0 20px; border:0; border-radius:999px; background:var(--dh-accent); color:#fff; font-weight:800; cursor:pointer; } .dh-search-btn:hover{ background:var(--dh-accent-2); } .dh-actions{ display:flex; align-items:center; justify-content:flex-end; gap:10px; } /* 아이콘 버튼: 원형 (사람/장바구니) */ .dh-icon-btn{ width:42px; height:42px; border-radius:999px; border:1px solid var(--dh-line); background:#fff; color:var(--dh-ink); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; } .dh-icon-btn:hover{ border-color:var(--dh-accent); color:var(--dh-accent); } .dh-icon-btn svg{ width:20px; height:20px; } .dh-badge{ position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#e5484d; color:#fff; font-size:11px; font-weight:900; display:flex; align-items:center; justify-content:center; } /* 사람 드롭다운 (각짐) */ .dh-user{ position:relative; } .dh-user-menu{ position:absolute; top:calc(100% + 10px); right:0; min-width:200px; background:#fff; border:1px solid var(--dh-line); border-radius:0; box-shadow:0 16px 36px rgba(36,50,71,.14); padding:8px; display:none; z-index:200; } .dh-user.is-open .dh-user-menu{ display:block; } .dh-user-menu a{ display:block; padding:10px 12px; border-radius:0; font-weight:700; font-size:14px; color:var(--dh-ink); } .dh-user-menu a:hover{ background:var(--dh-accent-soft); color:var(--dh-accent-2); } .dh-user-title{ padding:10px 12px 6px; font-size:12px; font-weight:900; color:var(--dh-muted); } .dh-user-sep{ height:1px; background:var(--dh-line); margin:6px 8px; } /* ── 하단 nav ── .dh-nav 에 header.php가 --cat-accent/strong/weak, --line-accent 주입 (현재 페이지색) → 하위(.dh-cat-link 등)가 상속받아 hover/활성 색으로 씀 */ .dh-nav{ border-top:1px solid var(--dh-line); } /* 박스: 테두리 + 오른쪽 위 그라데이션 (박스 안에만 담김) */ .dh-nav-row{ display:flex; align-items:center; gap:12px; padding:10px 16px; /* 박스 안 여백 (조절 지점) */ position:relative; /* 위쪽 선 기준점 */ border:1px solid var(--dh-line); background: radial-gradient(90% 120% at 100% 0%, var(--cat-weak, var(--dh-accent-soft)) 0%, transparent 45%), #fff; } /* 위쪽 테마색 선: 박스 윗변 (컨테이너 폭만) */ .dh-nav-row::before{ content:""; position:absolute; top:-1px; left:-1px; right:-1px; height:4px; background:linear-gradient(90deg, var(--line-accent, var(--dh-accent)), color-mix(in srgb, var(--line-accent, var(--dh-accent)) 55%, #fff)); transition:background .2s; } /* ☰ 카테고리 버튼: PC에도 표시, 테마색 배경, 흰 아이콘 */ .dh-toggle{ display:flex; width:33px; height:33px; flex-shrink:0; border:0; border-radius:0; background:var(--cat-accent, var(--dh-accent)); color:#fff; align-items:center; justify-content:center; cursor:pointer; transition:background .2s; } .dh-toggle:hover{ background:var(--cat-strong, var(--dh-accent-2)); } .dh-toggle svg{ width:22px; height:22px; } /* 대분류바: 가로 나열 */ .dh-catbar{ display:flex; align-items:center; gap:0; flex:1; flex-wrap:nowrap; } .dh-cat{ position:relative; margin-right:6px; } /* 버튼 사이 간격 (조절 지점) */ /* 대분류 버튼: 각진 흰 박스 */ .dh-cat-link{ display:inline-flex; align-items:center; height:33px; padding:0 14px; /* 높이/여백 조절 지점 */ border:1px solid color-mix(in srgb, var(--dh-line) 82%, var(--dh-accent)); border-radius:0; background:rgba(255,255,255,.88); font-weight:900; font-size:13px; color:var(--dh-ink); white-space:nowrap; transition:background .16s, color .16s, border-color .16s, transform .16s, box-shadow .16s; } /* hover(비활성): 현재 페이지 연한색 */ .dh-cat:hover > .dh-cat-link:not(.is-active){ transform:translateY(-1px); background:var(--cat-weak, var(--dh-accent-soft)); border-color:var(--cat-accent, var(--dh-accent)); color:var(--dh-ink); box-shadow:0 6px 14px rgba(36,50,71,.06); } /* 활성(현재 보는 카테고리): 현재 페이지 진한색 + 흰 글자 */ .dh-cat-link.is-active{ background:var(--cat-accent, var(--dh-accent)); border-color:var(--cat-strong, var(--dh-accent-2)); color:#fff; box-shadow:0 6px 14px rgba(36,50,71,.14); } /* 맞춤결제: 글자만, 살짝 큼, hover 테마색 */ .dh-pay{ margin-left:auto; border:0; background:transparent; color:var(--dh-ink); font-weight:900; font-size:15px; /* 글자 크기 조절 지점 */ } .dh-pay:hover{ background:transparent; color:var(--cat-accent, var(--dh-accent)); transform:none; box-shadow:none; } /* 대분류 캐럿(▾): PC 숨김, 모바일/세로목록 아코디언용 */ .dh-cat-more{ display:none; border:0; background:transparent; cursor:pointer; color:var(--dh-muted); padding:4px; } .dh-cat-more svg{ width:16px; height:16px; } /* 중분류 드롭다운 (각짐) */ .dh-cat-drop{ position:absolute; top:calc(100% + 6px); left:0; min-width:200px; background:#fff; border:1px solid var(--dh-line); border-radius:0; box-shadow:0 16px 36px rgba(36,50,71,.12); padding:8px; display:none; z-index:200; } .dh-cat::after{ content:""; position:absolute; left:0; right:0; top:100%; height:8px; } /* hover 다리 */ .dh-cat:hover .dh-cat-drop{ display:block; } .dh-cat-drop a{ display:block; padding:9px 12px; border-radius:0; font-weight:600; font-size:13px; color:var(--dh-ink); white-space:nowrap; } .dh-cat-drop a:hover{ background:var(--cat-weak, var(--dh-accent-soft)); color:var(--dh-ink); } /* ============================================================ ☰ 클릭 → 세로 목록 오버레이 (PC/모바일 공통) 가로바(.dh-catbar)가 is-open이면 세로 패널로 변신해 아래로 뜸 ============================================================ */ .dh-catbar.is-open{ display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; left:16px; top:100%; /* 박스 아래 */ min-width:240px; background:#fff; border:1px solid var(--dh-line); box-shadow:0 16px 30px rgba(36,50,71,.14); padding:8px; z-index:200; max-height:calc(100vh - 160px); overflow-y:auto; } /* 세로 대분류: 박스 벗고 목록형 */ .dh-catbar.is-open .dh-cat{ border-bottom:1px solid var(--dh-line); margin-right:0; } .dh-catbar.is-open .dh-cat:last-of-type{ border-bottom:0; } .dh-catbar.is-open .dh-cat-link{ height:auto; padding:12px 14px; border:0; background:transparent; width:100%; } /* 세로 활성: 테마색 배경 + 흰 글자 (빈 칸 해결) */ .dh-catbar.is-open .dh-cat-link.is-active{ background:var(--cat-accent, var(--dh-accent)); color:#fff; } /* 세로 비활성 hover: 연한 테마색 */ .dh-catbar.is-open .dh-cat-link:not(.is-active):hover{ background:var(--cat-weak, var(--dh-accent-soft)); color:var(--dh-ink); transform:none; box-shadow:none; } /* 세로 캐럿(중분류 펼치기) */ .dh-catbar.is-open .dh-cat-more{ display:inline-flex; position:absolute; right:6px; top:8px; width:34px; height:34px; align-items:center; justify-content:center; } .dh-catbar.is-open .dh-cat-more.is-open svg{ transform:rotate(180deg); } /* 세로 중분류: 아코디언 (제자리 펼침) */ .dh-catbar.is-open .dh-cat-drop{ position:static; display:none; border:0; box-shadow:none; padding:0 0 8px 14px; min-width:0; } .dh-catbar.is-open .dh-cat-drop.is-open{ display:block; } .dh-catbar.is-open .dh-cat-drop a:hover{ background:var(--cat-weak, var(--dh-accent-soft)); color:var(--dh-ink); } /* 세로 맞춤결제 */ .dh-catbar.is-open .dh-pay{ margin-left:0; margin-top:8px; padding:12px 14px; justify-content:flex-start; } .dh-catbar.is-open::after{ display:none; } /* ============================================================ 모바일 (≤980px) ============================================================ */ @media (max-width:980px){ .dh-top{ grid-template-columns:120px 1fr auto; gap:10px; } .dh-search{ height:42px; } .dh-nav-row{ position:relative; } /* 가로바 숨김 → ☰로 세로 목록 (위 is-open 규칙 그대로 씀) */ .dh-catbar:not(.is-open){ display:none; } .dh-cat::after{ display:none; } } @media (max-width:560px){ .dh-brand img{ height:26px; } .dh-search-btn{ padding:0 14px; } }