/* ============================================================
ENDOLPHIN — 공통 상단 헤더 (site-header.css)
------------------------------------------------------------
⚠️ 전 페이지 헤더의 '단 하나의 기준' 파일입니다.
HOME · SOOP · YOUTUBE · SNS · COMMUNITY 가 모두 이 파일만 씁니다.
기준 디자인 = HOME (2026-08-27, HOME 값을 그대로 옮겨옴).
❌ 페이지별 CSS 에서 .nav / .nav-in / .nav-logo 를 다시 정의하지 마세요.
로고를 바꾸려면 반드시 이 파일 한 곳만 고칩니다.
✅ 마크업 (전 페이지 동일)
✅ 글꼴: 'Playfair Display' 700 — 각 페이지 구글폰트에 반드시 포함
✅ 색 토큰(--w-*)은 theme/hub-ui 또는 페이지 :root 에서 옵니다
============================================================ */
/* ── 헤더가 쓰는 색 토큰 ────────────────────────────────
HOME·hub-ui 에도 같은 값이 있지만, 하위 페이지(스타·라이브 등)는
hub-ui 를 안 불러서 여기서 한 번 더 정의합니다. 값은 완전히 동일. */
:root{
--w-bg:#fffdfa; --w-bg2:#fbf7f4; --w-card:#ffffff;
--w-line:#f0e9e4; --w-line2:#e4dbd5;
--w-ink:#2c2724; --w-ink2:#6b625c; --w-ink3:#a79d97;
--w-pink:#ff5f9e; --w-pink-d:#d63c78; --w-pink-s:#fff0f5;
}
html[data-theme="dark"]{
--w-bg:#12141f; --w-bg2:#171a28; --w-card:#1b1e2e;
--w-line:#2a2e44; --w-line2:#3a3f5c;
--w-ink:#eceaf5; --w-ink2:#a9a3bd; --w-ink3:#797390;
--w-pink:#ff7fb0; --w-pink-d:#ffa8c9; --w-pink-s:#2c2036;
}
/* ── 페이지마다 다른 body 여백 맞추기 ───────────────────
헤더는 화면 끝까지 이어져야 해서 body 여백만큼 밖으로 나갑니다.
기본값 = HOME (PC 좌우 20px·위 0 / 모바일 좌우 14px).
여백이 다른 페이지는 그 페이지에서 아래 3개만 알려주면 됩니다.
--page-pad-t (위) --page-pad-l (왼쪽) --page-pad-r (오른쪽)
※ body 여백을 바꾸는 미디어쿼리마다 같이 적어주세요. */
/* ══ 상단 Navigation ═══════════════════════════════════ */
/* 페이지마다 box-sizing 기본값이 달라서 헤더 안은 여기서 못박습니다
(안 그러면 min-height·아이콘 크기가 페이지마다 달라집니다) */
.nav, .nav *{ box-sizing:border-box; }
.nav{ position:sticky; top:0; z-index:80;
display:flex; align-items:center; gap:24px; min-height:68px;
/* 페이지마다 body 글꼴·줄높이가 달라서 헤더는 여기서 고정합니다
(HOME 값과 같으므로 HOME 은 그대로) */
font-family:'Pretendard','Malgun Gothic',sans-serif;
line-height:1.6; letter-spacing:normal; font-weight:400;
padding:13px 22px;
margin:calc(-1 * var(--page-pad-t,0px)) calc(-1 * var(--page-pad-r,20px))
var(--page-pad-t,0px) calc(-1 * var(--page-pad-l,20px));
background:rgba(255,253,250,.88);
border-bottom:1.5px solid var(--w-line);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
html[data-theme="dark"] .nav{ background:rgba(18,20,31,.88); }
.nav-in{ display:flex; align-items:center; gap:24px;
max-width:1200px; margin:0 auto; width:100%; }
.nav-logo{ display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.nav-logo b{ font-family:'Playfair Display',Georgia,serif; font-weight:700;
font-size:19px; color:var(--w-ink); letter-spacing:.4px; white-space:nowrap; }
.nav-menu{ display:flex; align-items:center; gap:4px; margin-left:14px; }
.nav-menu a{ padding:9px 15px; border-radius:999px;
font-size:15px; font-weight:700; color:var(--w-ink2);
letter-spacing:.4px; transition:.16s; }
.nav-menu a:hover{ color:var(--w-ink); background:var(--w-bg2); }
.nav-menu a.on{ color:var(--w-pink-d); background:transparent; position:relative; }
.nav-menu a.on::after{ content:""; position:absolute; left:15px; right:15px; bottom:2px;
height:2px; border-radius:2px; background:var(--w-pink); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-sns{ display:flex; gap:5px; }
.nav-sns a{ width:36px; height:36px; display:flex; align-items:center; justify-content:center;
border-radius:11px; font-size:16px; color:var(--w-ink3);
border:1.5px solid var(--w-line); background:var(--w-card); transition:.16s; }
.nav-sns a:hover{ color:var(--w-pink); border-color:var(--w-pink); transform:translateY(-2px); }
.nav-sns a.soon{ opacity:.45; cursor:default; }
.nav-sns a.soon:hover{ transform:none; color:var(--w-ink3); border-color:var(--w-line); }
#nav-live{ display:inline-flex; align-items:center; gap:6px;
padding:8px 14px; border-radius:999px;
font-size:12px; font-weight:900; letter-spacing:.6px;
color:var(--w-ink3); background:var(--w-bg2); border:1.5px solid var(--w-line); }
#nav-live[data-on="1"]{ color:#fff; border-color:transparent;
background:linear-gradient(135deg,#ff3d84,#ff7fb0); }
#nav-live[data-on="1"]::before{ content:""; width:6px; height:6px; border-radius:50%;
background:#fff; animation:hwBlink 1.3s infinite; }
@keyframes hwBlink{ 0%,100%{opacity:1} 50%{opacity:.2} }
/* ══ 태블릿 (≤900px) — 메뉴만 옆으로 밀림 ══════════════ */
@media (max-width:900px){
/* 태블릿 — 메뉴가 길어지면 '메뉴만' 옆으로 밀리게 합니다.
(예전엔 640px 규칙만 있어서 641~900 구간은 화면 전체가 밀렸어요) */
.nav{ gap:14px; padding:14px 16px; }
.nav-in{ gap:14px; }
.nav-menu{ min-width:0; margin-left:8px; overflow-x:auto; scrollbar-width:none; }
.nav-menu::-webkit-scrollbar{ display:none; }
.nav-menu a{ font-size:13.5px; padding:8px 11px; white-space:nowrap; }
.nav-right{ flex:0 0 auto; }
.nav-sns a{ width:32px; height:32px; font-size:14px; }
}
/* ══ 모바일 (≤640px) — 로고는 한 줄 유지, 메뉴만 아랫줄 ══ */
@media (max-width:640px){
/* 헤더는 [로고 · 테마단추] + [메뉴] 두 줄만. 로고는 HERO 제목과
경쟁하지 않게 작게. OFF·SNS 아이콘은 모바일에서만 감춥니다
(기능은 그대로 살아 있고, PC 에서는 계속 보입니다) */
.nav{ padding:7px 14px 6px; gap:6px; min-height:0; flex-wrap:wrap;
margin:calc(-1 * var(--page-pad-t,0px)) calc(-1 * var(--page-pad-r,14px))
var(--page-pad-t,0px) calc(-1 * var(--page-pad-l,14px)); }
.nav-in{ gap:6px; flex-wrap:wrap; }
.nav-logo b{ font-size:13.5px; letter-spacing:.2px; }
.nav-menu{ order:3; width:100%; margin-left:0; margin-top:1px;
overflow-x:auto; scrollbar-width:none; }
.nav-menu::-webkit-scrollbar{ display:none; }
.nav-menu a{ font-size:13px; padding:8px 11px; white-space:nowrap; }
.nav-right{ gap:6px; }
#nav-live{ display:none; }
.nav-sns{ display:none; }
}
/* 아직 주소가 없는 SNS 아이콘 */
.nav-sns a[data-soon]{ cursor:default; }
/* ── 헤더 SNS 아이콘 = 진짜 브랜드 마크 ─────────────────
links.js 가 이모지 자리에 ![]()
를 넣어줍니다.
마크가 없거나 파일이 안 열리면 원래 이모지로 되돌아갑니다. */
.nav-sns .nav-mk{ width:19px; height:19px; display:block; }
.nav-sns a{ display:inline-flex; align-items:center; justify-content:center; }
.nav-sns a.soon .nav-mk{ opacity:.45; filter:grayscale(.7); } /* 준비 중은 흐리게 */
.sns-ic .nav-mk{ width:22px; height:22px; display:block; }
/* ══ SOOP 로그인 (헤더 오른쪽) ══════════════════════════
로그인 전에는 [SOOP 로그인] 버튼,
로그인하면 프로필 사진 + 닉네임이 보입니다.
자리를 미리 잡아두지 않아서, 서버 답이 오기 전에는 아무것도
안 보입니다(화면이 덜컹거리지 않게). */
.luv-soop-auth{ display:none; align-items:center; gap:7px; }
.luv-soop-auth.on{ display:inline-flex; }
.ls-in{ display:inline-flex; align-items:center; gap:7px;
font-family:'Jua',sans-serif; font-size:13.5px; letter-spacing:.2px;
color:#fff; background:linear-gradient(135deg,#3d8bfd,#5aa9ff);
border:0; border-radius:999px; padding:8px 14px; cursor:pointer;
box-shadow:0 4px 12px rgba(61,139,253,.28); transition:.16s; }
.ls-in:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(61,139,253,.36); }
.ls-in i{ font-style:normal; font-size:14px; }
/* SOOP 공식 마크 — 파란 배경 위에 얹히므로 흰색으로 보이게 합니다 */
.ls-mk{ width:18px; height:18px; display:block; filter:brightness(0) invert(1); }
.ls-me{ display:inline-flex; align-items:center; gap:8px;
padding:5px 12px 5px 5px; border-radius:999px;
background:var(--w-card,#fff); border:1.5px solid var(--w-line,#f1e4ec); }
.ls-me img{ width:26px; height:26px; border-radius:50%; object-fit:cover;
background:var(--w-pink-s,#fdeef6); }
.ls-me b{ font-family:'Jua',sans-serif; font-weight:400; font-size:13.5px;
color:var(--w-ink,#3d2b35); max-width:120px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* PLAY 단추 — 로그인한 사람에게만 보입니다.
상단 메뉴(.nav-menu)가 아니라 오른쪽 칸에 두어, 모바일 좌우 스와이프
순서(HOME·SOOP·YOUTUBE·SNS·COMMUNITY)를 건드리지 않습니다. */
.ls-play{ display:inline-flex; align-items:center; gap:5px; text-decoration:none;
font-family:'Jua',sans-serif; font-size:13.5px; letter-spacing:.2px; color:#fff;
background:linear-gradient(135deg,#ff5f9e,#ff9ec4);
border-radius:999px; padding:8px 14px;
box-shadow:0 4px 12px rgba(255,95,158,.28); transition:.16s; }
.ls-play:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(255,95,158,.36); }
@media (max-width:520px){ .ls-play span{ display:none; } .ls-play{ padding:8px 11px; } }
/* ADMIN 단추 — 관리자에게만 보입니다.
⚠️ 이건 편의일 뿐 보안이 아닙니다. 진짜 방어는 서버에 있습니다
(/api/admin/* 이 users.role 을 직접 확인합니다).
서버가 관리자라고 답했을 때만 자바스크립트가 이 단추를 붙입니다. */
.ls-admin{ display:inline-flex; align-items:center; gap:5px; text-decoration:none;
font-family:'Jua',sans-serif; font-size:13.5px; letter-spacing:.2px; color:#fff;
background:linear-gradient(135deg,#6b5bd6,#8f7ce8);
border-radius:999px; padding:8px 14px;
box-shadow:0 4px 12px rgba(107,91,214,.28); transition:.16s; }
.ls-admin:hover{ transform:translateY(-1px); box-shadow:0 7px 18px rgba(107,91,214,.36); }
@media (max-width:520px){ .ls-admin span{ display:none; } .ls-admin{ padding:8px 11px; } }
/* 사진+이름 = MY PAGE 로 가는 링크. 모양은 예전 그대로입니다. */
.ls-go{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.ls-go:hover b{ color:var(--w-pink-d,#d63c78); }
.ls-out{ font-size:12px; color:var(--w-ink3,#a89aa2); background:none;
border:0; cursor:pointer; padding:2px 4px; font-family:inherit; }
.ls-out:hover{ color:var(--w-pink-d,#d63c78); text-decoration:underline; }
@media (max-width:900px){
.ls-in{ padding:7px 11px; font-size:12.5px; }
/* 좁을수록 이름을 줄여서 '나가기' 가 밀려나지 않게 합니다.
(예전엔 나가기를 아예 숨겼는데, 로그아웃할 방법이 안 보였습니다) */
.ls-me{ padding:4px 9px 4px 4px; gap:6px; }
.ls-me img{ width:24px; height:24px; }
.ls-me b{ max-width:64px; font-size:13px; }
.ls-out{ font-size:11.5px; padding:2px 2px; }
}
@media (max-width:400px){
.ls-me b{ max-width:46px; } /* 아주 좁으면 이름을 더 줄입니다 */
}
@media (max-width:520px){
.ls-in span{ display:none; } /* 아주 좁으면 마크만 */
.ls-in{ padding:8px 10px; }
}
/* ══ 좁은 화면에서 오른쪽 단추들이 겹치지 않게 ══════════════
실측(391px): 로고가 자리를 다 차지해 .nav-right 가 46px 로 눌리고,
그 안의 로그인 단추와 테마 단추가 34px 겹쳤습니다.
→ 오른쪽 묶음과 그 자식들은 절대 안 줄어들게 하고,
대신 로고 쪽이 양보하도록 바꿉니다. */
@media (max-width:900px){
.nav-right{ flex:0 0 auto; min-width:max-content; }
.nav-right > *{ flex:0 0 auto; }
.nav-logo{ min-width:0; flex:0 1 auto; overflow:hidden; }
.nav-logo b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* 테마 단추는 화면 오른쪽 위에 '고정'되어 있어서(position:fixed)
헤더 흐름에서 빠져 있습니다. 그래서 그냥 두면 로그인 단추가
그 밑으로 들어가 겹칩니다(실측 34px). 그만큼 자리를 비웁니다.
44px(단추) + 16px(오른쪽 여백) + 8px(사이) = 68px
640px 이하에서는 단추가 38px·여백 10px 로 줄어듭니다 → 56px */
@media (max-width:900px){
.luv-soop-auth{ margin-right:68px; }
}
@media (max-width:640px){
.luv-soop-auth{ margin-right:56px; }
}
/* ══════════════════════════════════════════════════════════
공통 상단 메뉴 드롭다운 (2026-09-09)
----------------------------------------------------------
만드는 쪽은 shared/site-menu.js 입니다. 여기는 모양만.
이 파일은 상단 머리띠가 있는 35개 페이지가 모두 이미 부르고 있어서,
HTML 을 한 개도 안 고치고 모양을 넣을 수 있었습니다.
⚠️ 패널(.sm-panel)은 .nav 직속이고 .nav-menu 바깥입니다.
안으로 옮기지 마세요 — swipe-nav.js 가 .nav-menu 안의 a[href] 를 세어
폰 좌우 스와이프의 이전/다음 페이지를 정합니다.
══════════════════════════════════════════════════════════ */
/* ── ▾ 단추 — 폰에서만 보입니다 ───────────────────────────
데스크톱은 마우스를 올리면 열리니 필요 없고,
기본이 display:none 이라 화면이 밀리지도 않습니다. */
.sm-caret{
display:none;
font-family:inherit; font-size:10px; line-height:1; cursor:pointer;
width:26px; height:26px; flex:0 0 auto; padding:0;
align-items:center; justify-content:center;
margin-left:-2px; border-radius:999px;
color:var(--w-ink3,#a89aa2); background:transparent;
border:1.5px solid var(--w-line,#f1e4ec);
transition:transform .16s, color .16s, border-color .16s;
}
.sm-caret:hover{ color:var(--w-pink-d,#d63c78); border-color:var(--w-pink,#ff6fa8); }
.sm-caret:focus-visible{ outline:3px solid var(--w-pink,#ff6fa8); outline-offset:2px; }
.sm-caret.sm-open{ color:#fff; border-color:transparent;
background:linear-gradient(135deg,#ff5f9e,#ff9ec4); }
.sm-caret.sm-open span{ display:inline-block; transform:rotate(180deg); }
/* 열려 있는 상위 항목 표시 (데스크톱) */
.nav-menu a.sm-open{ color:var(--w-pink-d,#d63c78); background:var(--w-bg2,#ffeef4); }
/* ── 패널 ────────────────────────────────────────────────
position:absolute 라 .nav 의 flex 흐름에서 빠집니다
→ 이 스크립트가 늦게 떠도 화면이 밀리지 않습니다. */
.sm-panel{
position:absolute; top:100%; left:0; z-index:90;
margin-top:6px; padding:14px;
min-width:210px; max-width:min(760px, calc(100vw - 24px));
border-radius:18px;
background:var(--w-card,#fff);
border:1.5px solid var(--w-line,#f1e4ec);
box-shadow:0 18px 44px rgba(214,138,164,.22), 0 2px 8px rgba(47,42,51,.06);
animation:smIn .16s ease-out;
}
.sm-panel[hidden]{ display:none !important; }
html[data-theme="dark"] .sm-panel{
background:var(--w-card,#1a1d2e); border-color:var(--w-line,#2b3049);
box-shadow:0 18px 44px rgba(0,0,0,.5);
}
@keyframes smIn{ from{ opacity:0; transform:translateY(-5px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .sm-panel{ animation:none; } }
/* 한 판 메가메뉴 (GAME) — 줄기를 옆으로 나란히 */
.sm-panel.is-mega{ display:grid; grid-template-columns:repeat(2,minmax(190px,1fr)); gap:6px 22px; }
.sm-head{
font-family:'Jua',sans-serif; font-weight:400; font-size:13px;
color:var(--w-pink-d,#d63c78);
padding:2px 10px 8px; margin-bottom:4px;
border-bottom:1.5px solid var(--w-line,#f1e4ec);
}
.sm-list{ list-style:none; margin:0; padding:0; }
.sm-list a{
display:block; padding:9px 11px; border-radius:11px;
text-decoration:none; color:var(--w-ink,#3d2b35); transition:.14s;
}
.sm-list a:hover{ background:var(--w-bg2,#ffeef4); color:var(--w-pink-d,#d63c78); }
.sm-list a:focus-visible{ outline:3px solid var(--w-pink,#ff6fa8); outline-offset:-2px; }
.sm-list a.is-here{ background:var(--w-bg2,#ffeef4); color:var(--w-pink-d,#d63c78); }
.sm-nm{ display:block; font-size:14px; font-weight:700; letter-spacing:-.1px; }
.sm-desc{ display:block; margin-top:2px; font-size:11.5px; color:var(--w-ink3,#a89aa2); }
.sm-list a:hover .sm-desc{ color:var(--w-pink-d,#d63c78); opacity:.75; }
/* ── 맨 위 '○○ 홈' 줄 ────────────────────────────────────
폰에서는 상위 글자를 눌러도 펼쳐지기만 하므로, 대표 페이지로 가는
길은 이 줄 하나뿐입니다. 그래서 조금 더 또렷하게 두고 아래와
가는 선으로 나눕니다. */
.sm-list a.is-home .sm-nm{ font-weight:800; color:var(--w-pink-d,#d63c78); }
.sm-list li:has(> a.is-home){ margin-bottom:4px; padding-bottom:4px;
border-bottom:1px solid var(--w-line,#f1e4ec); }
/* ── 바깥으로 나가는 링크 (유튜브 채널 · 인스타 계정) ──
새 탭으로 열립니다. 작은 화살표로 '여기서 나갑니다' 를 알립니다. */
.sm-ext{ font-style:normal; font-size:10px; margin-left:3px;
color:var(--w-ink3,#a89aa2); vertical-align:1px; }
.sm-list a:hover .sm-ext{ color:var(--w-pink-d,#d63c78); }
/* 화면에는 안 보이고 읽어주기만 하는 글 */
.sm-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* ── 폰 (≤900px) ─────────────────────────────────────────
hover 가 없으니 ▾ 단추로만 열고 닫습니다.
상위 글자를 누르면 예전처럼 그 페이지로 갑니다.
패널은 화면 좌우를 채우고, 길면 안에서 스크롤됩니다
(머리띠를 밀어내지 않아 레이아웃이 안 흔들립니다). */
/* ── 폰 : 상단 메뉴 오른쪽 '더 있어요' 힌트 ───────────────
.nav-menu 는 폰에서 가로로 스크롤됩니다. 오른쪽 끝에 옅은 그라데이션과
작은 › 를 얹어, 밀면 더 있다는 걸 알립니다.
⚠️ sticky 라 스크롤해도 오른쪽 끝에 붙어 있습니다.
⚠️ width:0 이라 메뉴 폭을 늘리지 않습니다 (그림은 ::after 가 넘겨 그립니다).
⚠️ pointer-events:none — 힌트가 메뉴 누르기를 가로막으면 안 됩니다.
⚠️ 끝까지 밀면 site-menu.js 가 data-more="0" 으로 바꿔 사라집니다. */
.nav-more{ display:none; }
@media (max-width:900px){
.nav-more{
display:block; position:sticky; right:0; flex:0 0 auto;
width:0; align-self:stretch; pointer-events:none;
opacity:0; transition:opacity .22s ease;
}
.nav-menu[data-more="1"] .nav-more{ opacity:1; }
/* ⚠️ ::after 가 아니라 ::before 입니다. ::after 는 자식(화살표)보다 뒤에
그려져서 › 를 덮어버립니다(처음에 그렇게 만들었다가 화살표가 사라졌습니다). */
.nav-more::before{
content:""; position:absolute; top:0; bottom:0; right:0; width:52px;
background:linear-gradient(90deg,
rgba(255,253,250,0) 0%, rgba(255,253,250,.92) 55%, #fffdfa 100%);
}
/* › 는 동그란 알약 안에 넣습니다.
⚠️ 머리띠 배경이 거의 흰색이라, 옅은 veil 만으로는 티가 안 납니다
(흰 바탕에 흰 그라데이션). 눈에 들어오는 건 이 분홍 › 입니다. */
.nav-more i{
position:absolute; right:0; top:50%; transform:translateY(-50%);
display:flex; align-items:center; justify-content:center;
width:20px; height:20px; border-radius:999px;
font-style:normal; font-size:13px; font-weight:900; line-height:1;
color:#fff; background:var(--w-pink,#ff6fa8);
box-shadow:0 1px 4px rgba(255,111,168,.45);
}
html[data-theme="dark"] .nav-more::before{
background:linear-gradient(90deg,
rgba(23,19,28,0) 0%, rgba(23,19,28,.92) 55%, #17131c 100%);
}
}
@media (prefers-reduced-motion:reduce){ .nav-more{ transition:none; } }
@media (max-width:900px){
.sm-caret{ display:inline-flex; }
.sm-panel{
left:12px !important; right:12px !important;
max-width:none; margin-top:8px;
max-height:min(64vh, 460px); overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
/* 메가메뉴도 폰에서는 한 열로 (줄기 제목이 구분선 역할) */
.sm-panel.is-mega{ grid-template-columns:1fr; gap:4px; }
.sm-panel.is-mega .sm-col + .sm-col{ margin-top:10px; }
.sm-list a{ padding:11px 12px; }
.sm-nm{ font-size:15px; }
}