/* ============================================================
   Melanoir Beauty — 공유 셸 (내비 + 푸터 + 토큰)
   landing/index.html(홈) 및 P1 하위 페이지가 공통으로 로드한다.
   ⚠️ 소스 오브 트루스: 내비·푸터 스타일은 이 파일에서만 수정한다.
   홈은 이 파일을 <style> 인라인보다 먼저 로드하므로, 페이지 고유
   스타일(홈의 섹션 등)은 뒤에서 자연히 우선한다.
   beauty/** 직접 편집 금지 — package-beauty.mjs 로만 배포.
   ============================================================ */
:root{
  --paper:#ffffff;--paper-2:#faf9f7;--ink:#12110f;--ink-2:#6c6860;--ink-3:#a7a29a;
  --line:rgba(18,17,15,.12);--line-soft:rgba(18,17,15,.07);
  --brown:#7a5c3c;--espresso:#2a2016;--pearl:#cfc9c0;
  --maxw:1180px;--ease:cubic-bezier(.19,1,.22,1);
}

/* BASE — 하위 페이지 공용 스켈레톤(홈 index.html 인라인과 동일 값). 홈은 이 뒤 인라인이 우선. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:"Noto Serif KR","Cormorant Garamond",serif;font-weight:300;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word;font-synthesis:none}
/* 한글(Noto Serif KR)은 진짜 이탤릭 페이스가 없어 브라우저가 기울임을 합성하는데, Windows에서 우측이 잘린다.
   font-synthesis:none으로 합성 기울임을 끈다 — 한글 강조(em·melanin-text)는 업라이트 gradient로,
   영문 Cormorant는 진짜 이탤릭 페이스(ital 로드)라 그대로 이탤릭 유지된다. */
body.lock{overflow:hidden;height:100vh}
::selection{background:rgba(122,92,60,.16);color:var(--ink)}
a{color:inherit}
.en{font-family:"Cormorant Garamond","Noto Serif KR",serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.eyebrow{font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.36em;text-transform:uppercase;color:var(--ink-2)}
/* background-clip:text 는 글리프가 패딩 박스 밖으로 나가면 잘린다(특히 Windows 이탤릭 오블리크).
   페인트 영역을 패딩으로 넓히고, 수평 자간은 네거티브 마진으로 원복(인라인 수직 패딩은 레이아웃 무영향). */
.melanin-text{background:linear-gradient(96deg,var(--brown),var(--espresso) 60%,#0f0b07);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.08em .12em .06em .06em;margin-right:-.12em;margin-left:-.06em}
/* 한글 줄바꿈 품질: 헤드라인은 줄 균형, 본문은 고아줄(위도우) 방지. keep-all과 함께 어색한 줄바꿈 완화 */
h1,h2,h3{text-wrap:balance}
p,li,figcaption,blockquote{text-wrap:pretty}

.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;z-index:60;background:linear-gradient(90deg,#b9b2a6,#d9d3c8 40%,#e7dfe9 55%,#d9d3c8 70%,#b9b2a6)}

.loader{position:fixed;inset:0;z-index:120;background:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px}
.loader .lname{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(28px,6vw,64px);letter-spacing:.05em;overflow:hidden;line-height:1.4;height:1.4em;color:var(--ink)}
.loader .lname span{display:inline-block;transform:translateY(115%)}
.loader .lbar{width:min(56vw,260px);height:1px;background:var(--line);position:relative;overflow:hidden}
.loader .lbar i{position:absolute;inset:0;transform:scaleX(0);transform-origin:0;background:linear-gradient(90deg,var(--brown),var(--espresso))}
.loader .lpct{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.3em;color:var(--ink-3)}

section{position:relative;z-index:2;padding:clamp(110px,15vh,180px) 0}
.alt{background:var(--paper-2)}
.kicker-row{display:flex;align-items:baseline;gap:20px;margin-bottom:46px}
.kicker-row .no{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:16px;color:var(--brown)}
.line-h{height:1px;background:var(--line);flex:1}

.btn-ink{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--ink);text-decoration:none;border-radius:100px;padding:14px 30px;position:relative;overflow:hidden;display:inline-flex}
.btn-ink span{position:relative;z-index:1;transition:color .4s}
.btn-ink::before{content:"";position:absolute;inset:0;background:linear-gradient(96deg,var(--brown),var(--espresso));transform:translateY(101%);transition:transform .5s var(--ease)}
.btn-ink:hover::before{transform:translateY(0)}
.btn-line{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:5px;transition:color .3s,border-color .3s}
.btn-line:hover{color:var(--ink);border-color:var(--brown)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media(max-width:900px){.wrap{padding:0 24px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* NAV — #nav 로 스코프(footer의 <nav class="foot-links"> 등 다른 nav 오염 방지) */
#nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:26px 40px;transition:transform .5s var(--ease),background .5s,padding .5s,border-color .5s;border-bottom:1px solid transparent}
#nav.hide{transform:translateY(-100%)}
#nav.solid{background:rgba(255,255,255,.78);backdrop-filter:blur(16px);padding:16px 40px;border-color:var(--line-soft)}
.lock-up{display:flex;flex-direction:column;line-height:1.05;text-decoration:none}
.lock-up b{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:21px;letter-spacing:.3em;text-transform:uppercase;padding-left:.3em}
.lock-up span{font-family:"Inter",sans-serif;font-size:8.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;padding-left:.34em}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-family:"Inter",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .3s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.nav-home{color:var(--ink-3)}
.nav-links a.nav-home:hover{color:var(--ink)}
/* KO/EN 언어 스위처 — P1: melanoir-lang.js 패턴 배선. 현재는 자리(placeholder) */
.lang-switch{display:inline-flex;align-items:center;gap:5px}
.lang-switch .lang-opt{font-family:"Inter",sans-serif;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);background:none;border:0;padding:2px 3px;cursor:pointer;transition:color .3s;line-height:1}
.lang-switch .lang-opt.is-active{color:var(--ink)}
.lang-switch .lang-sep{color:var(--ink-3);font-size:10px}
.mag{border:1px solid var(--line);border-radius:100px;padding:11px 22px;position:relative;overflow:hidden;transition:color .4s,border-color .4s;white-space:nowrap;flex:none}
.mag span{position:relative;z-index:1}
.mag::before{content:"";position:absolute;inset:0;z-index:0;background:var(--ink);transform:translateY(101%);transition:transform .5s var(--ease)}
.mag:hover{color:#fff;border-color:var(--ink)}
.mag:hover::before{transform:translateY(0)}
/* 항목이 늘어 760px에선 이미 비좁음 → 페이지 레이아웃 브레이크(900px)에서 보조 항목 접기(CTA만 유지) */
@media(max-width:900px){.nav-links a:not(.mag),.nav-links .lang-switch{display:none}}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:56px 0 44px;position:relative;z-index:2}
.foot-word{font-family:"Cormorant Garamond",serif;font-weight:300;font-size:clamp(52px,14vw,180px);line-height:.9;letter-spacing:.03em;color:transparent;-webkit-text-stroke:1px rgba(18,17,15,.14);text-align:center;margin-bottom:40px}
footer .row{display:flex;flex-wrap:wrap;gap:20px 28px;align-items:center;justify-content:space-between}
footer .fl{display:flex;flex-direction:column;line-height:1.2}
footer .fl b{font-family:"Cormorant Garamond",serif;font-size:17px;letter-spacing:.24em;text-transform:uppercase}
footer .fl span{font-family:"Inter",sans-serif;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.foot-links a{font-family:"Inter",sans-serif;font-size:10.5px;letter-spacing:.1em;color:var(--ink-2);text-decoration:none;transition:color .3s}
.foot-links a:hover{color:var(--ink)}
footer small{font-family:"Inter",sans-serif;font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);max-width:470px;text-align:right}