/* ═══════════════════════════════════════════════════
   공용 헤더 스타일 + 프론트 디자인 토큰 — 단일 진실원천
   쓰는 곳: pages/*.html(pages.css '앞'에 로드) + content/index.html(비구매자 헤더)
   마크업은 /global/site-nav.js (window.SiteNav.headerHtml).
   ★:root 토큰(--p-*)은 pages.css에서 이관해 왔다 — pages.css는 이 파일이 먼저
     로드된다는 전제로 var(--p-*)를 그대로 쓴다. 토큰 수정은 여기 한 곳에서만.
═══════════════════════════════════════════════════ */

/* ===== AnatoBase Front Pages — Design Tokens (pages.css에서 이관) ===== */
:root {
    --p-primary: #bb5d5d;
    --p-primary-hover: #a04d4d;
    --p-primary-light: rgba(187,93,93,.08);
    --p-text: #2d2a29;
    --p-text-light: #6b6562;
    --p-text-muted: #999;
    --p-bg: #ffffff;
    --p-bg-soft: #f8f7f6;
    --p-bg-card: #ffffff;
    --p-bg-hover: #f0eeed;
    --p-border: #e8e2df;
    --p-border-light: #f0ebe8;
    --p-accent: #5d7dbb;
    --p-accent-light: rgba(93,125,187,.08);
    --p-success: #5d9b6d;
    --p-warning: #c9a55d;
    --p-font: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --p-radius: 8px;
    --p-radius-sm: 6px;
    --p-radius-lg: 12px;
    --p-radius-xl: 16px;
    --p-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --p-shadow-md: 0 4px 24px rgba(0,0,0,.06);
    --p-shadow-lg: 0 8px 32px rgba(0,0,0,.10);
    --p-transition: .25s ease;
    --p-max-w: 1120px;
    --p-header-h: 48px;
}

/* ===== Header (pages.css에서 이관 — 규칙 원문 그대로) ===== */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    height:var(--p-header-h);
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border-bottom:1px solid transparent;
    transition:background .3s,border-color .3s,box-shadow .3s;
}
.site-header.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--p-border-light);box-shadow:var(--p-shadow-sm)}
.site-header .container{
    max-width:var(--p-max-w);margin:0 auto;padding:0 24px;
    display:grid;grid-template-columns:1fr auto 1fr;
    align-items:center;height:100%;
}
/* content처럼 pages.css 리셋이 없는 페이지 대비 — pages에선 무해(동일 결과) */
.site-header,.mobile-nav{font-family:var(--p-font);box-sizing:border-box}
.site-header *,.site-header *::before,.site-header *::after,
.mobile-nav *,.mobile-nav *::before,.mobile-nav *::after{box-sizing:border-box}
.site-header a,.mobile-nav a{text-decoration:none;color:inherit}
.site-header button{font:inherit;cursor:pointer;border:none;background:none}
.site-header img{display:block;max-width:100%}

.header-logo{display:flex;align-items:center;gap:2px;font-weight:800;font-size:.9375rem;letter-spacing:.03em}
.header-logo img{height:18px;width:auto}
.logo-eight{
    width:auto;height:20px;flex-shrink:0;
    color:var(--p-text);
}
.logo-text{display:inline-block}

/* Logo entrance animation */
.logo-eight.logo-animate{
    animation:logo-spin 2.6s cubic-bezier(.25,.46,.45,.94) both;
}
.logo-text.logo-text-animate{
    opacity:0;
    animation:logo-text-in .5s ease both;
    animation-delay:1.5s;
}
@keyframes logo-spin{
    0%{transform:translateX(32px) rotate(90deg) scale(.85);opacity:0}
    12%{transform:translateX(32px) rotate(90deg) scale(1);opacity:1}
    38%{transform:translateX(32px) rotate(90deg) scale(1)}
    75%{transform:translateX(0) rotate(-3deg) scale(1.02)}
    100%{transform:translateX(0) rotate(0) scale(1)}
}
@keyframes logo-text-in{
    from{opacity:0;transform:translateX(-8px);filter:blur(3px)}
    to{opacity:1;transform:translateX(0);filter:blur(0)}
}
.header-nav{display:flex;align-items:center;gap:32px}
.header-nav a{font-size:.875rem;font-weight:500;color:var(--p-text-light);transition:color var(--p-transition)}
.header-nav a:hover,.header-nav a.active{color:var(--p-text)}
.header-login{
    font-size:.875rem;font-weight:600;color:var(--p-text-light);
    transition:color var(--p-transition);padding:8px 4px;
    margin-left:auto;
}
.header-login:hover{color:var(--p-primary)}

/* Mobile menu button */
.menu-toggle{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--p-text);border-radius:2px;transition:var(--p-transition)}

/* Mobile nav overlay */
.mobile-nav{
    display:flex;position:fixed;top:var(--p-header-h);left:0;right:0;bottom:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
    z-index:99;padding:32px 16px;
    flex-direction:column;gap:8px;
    opacity:0;visibility:hidden;
    transition:opacity .3s ease,visibility .3s ease;
}
.mobile-nav.open{opacity:1;visibility:visible}
.mobile-nav a{
    font-size:1.125rem;font-weight:500;padding:14px 0;
    border-bottom:1px solid var(--p-border-light);color:var(--p-text-light);
    transition:color var(--p-transition),opacity .35s ease,transform .35s ease;
    opacity:0;transform:translateY(12px);
}
.mobile-nav.open a{opacity:1;transform:translateY(0)}
.mobile-nav.open a:nth-child(1){transition-delay:.04s}
.mobile-nav.open a:nth-child(2){transition-delay:.08s}
.mobile-nav.open a:nth-child(3){transition-delay:.12s}
.mobile-nav.open a:nth-child(4){transition-delay:.16s}
.mobile-nav.open a:nth-child(5){transition-delay:.2s}
.mobile-nav.open a:nth-child(6){transition-delay:.24s}
.mobile-nav a:hover,.mobile-nav a.active{color:var(--p-text)}
.mobile-nav .header-login{margin-left:0}

@media(max-width:768px){
    .header-nav{display:none}
    .site-header .header-login{display:none}
    .site-header .container{padding:0 16px}
    .menu-toggle{display:flex;grid-column:3;justify-self:end}
    .menu-toggle.open span:first-child{transform:rotate(45deg) translate(2.5px,2.5px)}
    .menu-toggle.open span:last-child{transform:rotate(-45deg) translate(2.5px,-2.5px)}
}