@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400&family=Inter:wght@500;700&family=Noto+Sans+KR:wght@500;700&display=swap');
/* The one nav stylesheet (2026-10-18, dad "NAV는 모든 페이지에 똑같아서 쉽게 구현이 되어야 할게 매번 문제가 되는군").
   Nav markup was already single-source (tools/sync_nav_footer.py) but each page carried its own nav CSS, so the
   magazine's wider gap moved the menu. sync_nav_footer.py links this file last in every page's <head>; selectors
   are tag-qualified so they outrank leftover page rules, and the variables live on the nav itself so a page's
   :root cannot change it. Guarded by health_checker/test_nav_identical_everywhere.py. */
nav.nav, div.mobile-menu, button.hamburger {
    --charcoal: #2C2C2C; --warm-gold: #8A6748; --soft-gray: #6B6B6B; --light-gray: #E8E4E0;
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans: 'Inter', 'Noto Sans KR', -apple-system, sans-serif;
    --safe-top: env(safe-area-inset-top, 0px);
    --mobile-menu-offset: calc(86px + var(--safe-top));
    box-sizing: border-box;
}
nav.nav *, div.mobile-menu * { box-sizing: border-box; }
nav.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: auto; height: auto; margin: 0;
    padding: calc(1.0rem + var(--safe-top)) 3rem 1.0rem;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(250, 248, 245, 0.92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.04);
    font-family: var(--font-sans); line-height: 1.7;
    /* a shared component sets its own text properties instead of inheriting the page's (2026-10-18: page letter-spacing
       and font-feature settings made the same footer text 248px wide on Home and 255px on the legal pages) */
    letter-spacing: normal; word-spacing: normal; font-weight: 400; font-style: normal; font-feature-settings: normal;
    font-variant: normal; font-kerning: auto; font-synthesis: weight style; text-transform: none; text-rendering: auto;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background 0.3s, box-shadow 0.3s;
}
nav.nav.scrolled {
    /* same height as unscrolled (dad 10-18 "스크롤을 아래로 내리고 올리고 할때 NAV 가 움직이지?"): it used to
       shrink 82->72px on scroll; only the background and shadow change now */
    padding: calc(1.0rem + var(--safe-top)) 3rem 1.0rem;
    background: rgba(250, 248, 245, 0.97);
    box-shadow: 0 2px 20px rgba(0,0,0,0.04);
}
nav.nav .nav-logo {
    white-space: nowrap; margin: 0; padding: 0; line-height: 1.7;
    font-family: var(--font-serif); font-size: 1.8rem; font-weight: 400;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--charcoal); text-decoration: none;
}
nav.nav .nav-logo span { color: var(--warm-gold); }
nav.nav .nav-links { display: flex; gap: clamp(0.9rem, 1.4vw, 1.8rem); align-items: center; white-space: nowrap; margin: 0; padding: 0; }
nav.nav .nav-links a {
    font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; line-height: 1.7;
    letter-spacing: 0.1em; text-transform: uppercase; margin: 0; padding: 0;
    color: var(--charcoal); position: relative; text-decoration: none;
}
nav.nav .nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--warm-gold); transition: width 0.3s ease;
}
nav.nav .nav-links a:hover, nav.nav .nav-links a.active { color: var(--warm-gold); }
nav.nav .nav-links a:hover::after, nav.nav .nav-links a.active::after { width: 100%; }
nav.nav .lang-pill, div.mobile-menu .lang-pill { display: inline-flex; border: 1.5px solid var(--warm-gold); border-radius: 8px; overflow: hidden; vertical-align: middle; margin: 0; }
nav.nav .lang-pill button, div.mobile-menu .lang-pill button { margin: 0; padding: 5px 12px; border: none; background: transparent; font-size: 0.8125rem; font-weight: 700; cursor: pointer; color: var(--soft-gray); font-family: inherit; letter-spacing: normal; text-transform: none; transition: all .2s; }
nav.nav .lang-pill button.active, div.mobile-menu .lang-pill button.active { background: var(--warm-gold); color: #fff; }
nav.nav .lang-pill button:hover:not(.active), div.mobile-menu .lang-pill button:hover:not(.active) { background: rgba(176,137,104,.12); }
div.mobile-menu .lang-pill { flex: 0 0 auto; min-height: 36px; align-items: stretch; }
div.mobile-menu .lang-pill button { min-height: auto; padding: 6px 14px; display: inline-flex; align-items: center; }
div.mobile-menu { display: none; position: fixed; top: var(--mobile-menu-offset); left: 0; right: 0; z-index: 110; background: rgba(250, 248, 245, 0.98); backdrop-filter: blur(12px); padding: 1rem 2rem 1.5rem; flex-direction: column; align-items: center; gap: 1.2rem; border-bottom: 1px solid rgba(0,0,0,0.08); max-height: calc(100dvh - var(--mobile-menu-offset)); overflow-y: auto; -webkit-overflow-scrolling: touch; }
div.mobile-menu.open { display: flex; }
div.mobile-menu a, div.mobile-menu > button { font-size: 0.9rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--charcoal); background: none; border: none; cursor: pointer; font-family: var(--font-sans); text-decoration: none; }
div.mobile-menu a.active, div.mobile-menu a:hover, div.mobile-menu > button:hover { color: var(--warm-gold); }
@media (min-width: 769px) { nav.nav button.hamburger { display: none; } }
@media (max-width: 768px) {
    nav.nav .nav-logo { font-size: 1.4rem; }
    nav.nav, nav.nav.scrolled { padding: calc(1rem + var(--safe-top)) 1.5rem 1rem; }
    nav.nav .nav-links { display: none !important; }
    nav.nav button.hamburger {
        display: flex; align-items: center; justify-content: center; overflow: visible;
        background: none; border: none; cursor: pointer; font-size: 0; color: var(--charcoal);
        padding: 0.15rem; margin: 0; line-height: 1.2; min-width: 2.75rem; min-height: 2.75rem;
    }
    nav.nav button.hamburger::before {
        content: ''; display: block; width: 18px; height: 2px; background: currentColor;
        border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
    }
    div.mobile-menu a, div.mobile-menu > button { min-height: 44px; padding: 0.45rem 0.8rem; display: flex; align-items: center; justify-content: center; }
}
/* Reserve the desktop scrollbar gutter from first paint on every page (was injected by js/nav-i18n.js on only 31
   pages, so posts without that script drew the whole nav 15px further left). */
@media (min-width: 769px) { html { scrollbar-gutter: stable both-edges; } }

/* ── First paint = final state (2026-10-18 dad "한/영 선택도 메뉴 선택시 마다 깜빡이는데?") ──
   html[data-lang], html[data-new] and .nav-ready come from the kmuse-nav-boot script in <head>. */
nav.nav .nl-kr, div.mobile-menu .nl-kr { display: none; }
html[data-lang="kr"] nav.nav .nl-kr, html[data-lang="kr"] div.mobile-menu .nl-kr { display: inline; }
html[data-lang="kr"] nav.nav .nl-en, html[data-lang="kr"] div.mobile-menu .nl-en { display: none; }
/* Korean labels need more size than spaced capitals to read (dad 10-18 "한글에서의 메뉴가 너무 폰트가 작은거 아니야?") */
html[data-lang="kr"] nav.nav .nav-links a { font-size: 0.9rem; letter-spacing: 0.02em; }
html[data-lang="kr"] nav.nav .nav-links { gap: clamp(1.5rem, 2.2vw, 2.4rem); }  /* short Korean labels: room for centred New badges */
html[data-lang="kr"] div.mobile-menu a { font-size: 1rem; letter-spacing: 0.02em; }
/* the pill follows data-lang, not a class a script adds later; no fade */
html nav.nav .lang-pill button, html div.mobile-menu .lang-pill button { background: transparent !important; color: var(--soft-gray) !important; transition: none !important; }
html nav.nav .lang-pill button:hover, html div.mobile-menu .lang-pill button:hover { background: rgba(176,137,104,.12) !important; }
html[data-lang="en"] nav.nav .lang-pill button[data-lang="en"], html[data-lang="kr"] nav.nav .lang-pill button[data-lang="kr"],
html[data-lang="en"] div.mobile-menu .lang-pill button[data-lang="en"], html[data-lang="kr"] div.mobile-menu .lang-pill button[data-lang="kr"] { background: var(--warm-gold) !important; color: #fff !important; }
/* no underline/hover animation while the page is first drawn */
html:not(.nav-ready) nav.nav *, html:not(.nav-ready) nav.nav *::after, html:not(.nav-ready) nav.nav { transition: none !important; }
/* New badges are drawn from html[data-new]; the old script-inserted span is retired */
nav.nav .kmuse-new, div.mobile-menu .kmuse-new { display: none !important; }
html[data-new~="fashion"] nav.nav .nav-links a[href="/fashion"]::before,
html[data-new~="beauty"] nav.nav .nav-links a[href="/beauty"]::before,
html[data-new~="magazine"] nav.nav .nav-links a[href="/magazine/"]::before {
    content: 'New'; position: absolute; top: -1.3em; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0.05em 0.42em; border-radius: 999px;
    background: var(--warm-gold); color: #fff; font-size: 0.8125rem; letter-spacing: 0.08em; font-weight: 700;
    line-height: 1.4; text-transform: uppercase; pointer-events: none;
}
html[data-new~="fashion"] div.mobile-menu a[href="/fashion"]::after,
html[data-new~="beauty"] div.mobile-menu a[href="/beauty"]::after,
html[data-new~="magazine"] div.mobile-menu a[href="/magazine/"]::after {
    content: 'New'; display: inline-block; margin-left: 0.35em; vertical-align: middle; padding: 0.05em 0.42em;
    border-radius: 999px; background: var(--warm-gold); color: #fff; font-size: 0.8125rem; letter-spacing: 0.08em;
    font-weight: 700; line-height: 1.5; text-transform: uppercase; pointer-events: none;
}