/* ---------- 헤더 / 내비 ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } /* ⚠️ 머리띠 높이는 **여기 한 곳**에서 정합니다. 아래 .mainnav .mn-link 의 height 가 이 값과 같아야 1차 메뉴의 밑줄이 머리띠 바닥에 붙습니다 — 두 값이 어긋나면 밑줄이 공중에 뜨거나 잘립니다. ⚠️ 66px 에서 84px 로 키웠습니다. 1차 메뉴가 넷에서 다섯으로 늘고 글자도 커졌는데, 66px 에서는 글자가 위아래로 꽉 껴 보였어요. */ .nav { display: flex; align-items: center; justify-content: flex-start; height: 84px; } /* 로고는 햄버거 바로 옆(좌측), 우측 영역은 오른쪽 끝으로 */ .header-right { margin-left: auto; } .brand { display: flex; align-items: center; gap: 11px; color: var(--heading); } .brand .logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-soft), var(--brand)); display: grid; place-items: center; font-size: 1.25rem; box-shadow: var(--shadow-sm); flex-shrink: 0; } /* 로고 이미지 확정 전 임시 자리 (이미지 넣으면 이 규칙 제거) */ .brand .logo-empty { background: var(--chip-bg); border: 1px dashed var(--brand-soft); box-shadow: none; } /* 업로드된 로고 이미지 */ .brand .logo-img { width: 54px; height: 54px; object-fit: contain; background: transparent; padding: 0; border: none; border-radius: 12px; /* 로고 배경이 투명이라 어두운 테마에서도 흰 사각형이 안 생겨요 */ } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-title { font-weight: 800; font-size: 1.3125rem; } .brand-sub { font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); letter-spacing: .02em; } .site-footer .brand-title { color: #fff; } .site-footer .brand-sub { color: #a9c4b4; } .site-footer .brand .logo-empty { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.08); } /* 그룹 컨텍스트 로고 (그 동물 페이지처럼) */ .brand .logo-group { background: linear-gradient(135deg, var(--brand-soft), var(--brand)); font-size: 1.375rem; border: none; } /* 헤더 오른쪽: 로그인/회원가입 + 검색 + 테마 */ .header-right { display: flex; align-items: center; gap: 12px; } .auth-link { font-weight: 700; font-size: 0.9375rem; color: var(--text); padding: 6px 4px; transition: color .15s; } .auth-link:hover { color: var(--brand); } .auth-signup { color: var(--brand); } .icon-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; font-size: 1rem; transition: border-color .15s, background .15s; color: var(--heading); /* 글자색을 정해두지 않으면 검정이 굳어 어두운 테마에서 안 보여요 */ } .icon-btn:hover { border-color: var(--brand-soft); background: var(--chip-bg); } /* 검색창 (돋보기 클릭 시 펼침) */ .search-box { display: none; padding: 0 0 14px; } .search-box.open { display: block; } .search-box input { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 0.9375rem; background: var(--surface); color: var(--text); } .search-box input:focus { outline: none; border-color: var(--brand); } /* 하단 가로 카테고리 바 */ .category-bar { border-top: 1px solid var(--line); background: var(--surface); } /* 메뉴는 본문(1160px)보다는 넓게, 그렇다고 화면 끝까지는 아니게. · 1160px 에 가두면 항목이 50px 넘쳐서 잘렸고, · 화면 폭을 다 쓰게 하면 '홈' 과 '업적' 이 양 끝에 딱 붙어 극단적이었어요. 항목이 들어갈 만큼(약 1,210px)만 넉넉히 주고 양옆 여백은 남깁니다. */ .category-bar > .container { max-width: 1320px; padding: 0 24px; } .cat-bar-inner { display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: thin; } /* ⚠️ 메뉴 항목은 절대 줄바꿈되면 안 됩니다. '식물 & 비바/테라리움' 은 가 아니라