/* ============================================================
   MEOWLIFE 미오라이프 — 오행향수 앱 랜딩
   톤: 감성 웰니스(아이보리) + 향수존(블랙골드) + 오행 5색
   ============================================================ */

/* ---------- 폰트 ---------- */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
/* 마루 부리 (네이버 명조, 감성 헤딩) */
@font-face {
  font-family: 'MaruBuri';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/MaruBuri-Regular.woff') format('woff');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'MaruBuri';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/MaruBuri-Bold.woff') format('woff');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'MaruBuri';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/MaruBuri-SemiBold.woff') format('woff');
  font-weight: 600; font-display: swap;
}

/* ---------- 변수 ---------- */
:root {
  /* 웰니스 베이스 */
  --ivory:      #F7F2EA;
  --ivory-2:    #EFE7D9;
  --cream:      #FBF8F2;
  --paper:      #FFFFFF;
  --ink:        #2A2620;   /* 따뜻한 먹색 본문 */
  --ink-2:      #5B534A;
  --ink-3:      #8B8073;
  --line:       #E4DACB;

  /* 향수존 (블랙골드) */
  --noir:       #0D0B09;
  --noir-2:     #17130E;
  --gold:       #C9A24B;
  --gold-2:     #E3C878;
  --gold-soft:  #EFDFB8;

  /* FIRE / WATER */
  --fire:       #D24A24;
  --fire-2:     #F08A3C;
  --fire-glow:  #FFB566;
  --water:      #2E6E9E;
  --water-2:    #5AA6D6;
  --water-glow: #A9DCF2;

  /* 오행 5색 (목화토금수) */
  --wood:   #5B8C51;
  --fire5:  #C6512E;
  --earth:  #C9A24B;
  --metal:  #9AA0A6;
  --water5: #3A76A6;

  --maxw: 1180px;
  --r: 18px;
  --r-sm: 12px;
  --shadow: 0 24px 60px -28px rgba(42,38,32,.32);
  --shadow-gold: 0 30px 70px -30px rgba(0,0,0,.75);
  --ease: cubic-bezier(.22,.61,.36,1);

  --serif: 'MaruBuri', 'Pretendard Variable', serif;
  --sans: 'Pretendard Variable', -apple-system, sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.7;
  letter-spacing: -.01em;
  overflow-x: hidden;
  word-break: keep-all;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }

.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.serif { font-family:var(--serif); }
.center { text-align:center; }

/* 라벨(영문 소제목) */
.eyebrow {
  font-size:.78rem; font-weight:700; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3);
  display:inline-block; margin-bottom:14px;
}
.eyebrow.on-dark { color:var(--gold-2); }

/* 섹션 공통 */
section { position:relative; }
.sec-pad { padding:100px 0; }
.sec-title {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.7rem, 4.4vw, 2.7rem); line-height:1.35;
  letter-spacing:-.02em; color:var(--ink);
}
.sec-title.on-dark { color:#F4ECDD; }
.sec-lead {
  margin-top:20px; font-size:1.06rem; color:var(--ink-2); line-height:1.9;
}

/* ============================================================
   헤더
   ============================================================ */
.hdr {
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 32px;
  background:rgba(13,11,9,.0);
  transition:background .4s var(--ease), padding .4s var(--ease), box-shadow .4s;
}
.hdr.scrolled {
  background:rgba(251,248,242,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(228,218,203,.9);
  padding:12px 32px;
}
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; letter-spacing:.02em; color:#F4ECDD; transition:color .4s; }
.hdr.scrolled .logo { color:var(--ink); }
.logo svg { width:30px; height:30px; }
.gnb { display:flex; align-items:center; gap:30px; }
.gnb a { font-size:.94rem; font-weight:600; color:rgba(244,236,221,.82); transition:color .3s; }
.gnb a:hover { color:var(--gold-2); }
.hdr.scrolled .gnb a { color:var(--ink-2); }
.hdr.scrolled .gnb a:hover { color:var(--fire); }
.btn-nav {
  padding:10px 22px; border-radius:999px;
  background:var(--gold-soft); color:#2A1F0C; font-weight:700; font-size:.9rem;
  transition:transform .3s var(--ease), background .3s, box-shadow .3s;
  box-shadow:0 6px 18px -6px rgba(201,162,75,.7);
}
.btn-nav:hover { transform:translateY(-2px); background:var(--gold-2); }
.burger { display:none; flex-direction:column; gap:5px; padding:8px; }
.burger span { width:24px; height:2px; background:#F4ECDD; border-radius:2px; transition:.3s; }
.hdr.scrolled .burger span { background:var(--ink); }

/* 모바일 메뉴 */
.mnav {
  position:fixed; inset:0; z-index:99; background:rgba(13,11,9,.97);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
  overflow-y:auto; padding:80px 20px 40px;
}
.mnav.open { opacity:1; pointer-events:auto; }
.mnav a { font-family:var(--serif); font-size:1.5rem; color:#F4ECDD; padding:12px 0; font-weight:600; }
.mnav a:hover { color:var(--gold-2); }
.mnav .btn-nav { margin-top:20px; font-family:var(--sans); font-size:1rem; }

/* ============================================================
   드롭다운 네비 (멀티페이지 종합기업형)
   ============================================================ */
.gnb .has-sub { position:relative; }
.gnb .has-sub > a::after {
  content:''; display:inline-block; width:6px; height:6px; margin-left:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translateY(-2px); opacity:.7;
}
.gnb .submenu {
  position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(10px);
  min-width:200px; padding:12px; margin-top:14px;
  background:rgba(251,248,242,.98); backdrop-filter:blur(14px);
  border-radius:16px; box-shadow:0 24px 60px -24px rgba(42,38,32,.4);
  border:1px solid var(--line);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease);
  display:flex; flex-direction:column; gap:2px;
}
/* 호버 빈틈 브리지 */
.gnb .has-sub::before {
  content:''; position:absolute; top:100%; left:0; right:0; height:20px;
}
.gnb .has-sub:hover .submenu,
.gnb .has-sub:focus-within .submenu {
  opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.gnb .submenu a {
  display:block; padding:11px 16px; border-radius:10px;
  font-size:.9rem; font-weight:600; color:var(--ink-2) !important;
  white-space:nowrap; transition:background .2s, color .2s;
}
.gnb .submenu a:hover { background:var(--ivory-2); color:var(--fire) !important; }
.gnb .submenu a .en { display:block; font-size:.72rem; color:var(--ink-3); font-weight:500; letter-spacing:.06em; }
.gnb .gnb-cta { color:var(--gold-2) !important; font-weight:700; }
.hdr.scrolled .gnb .gnb-cta { color:var(--fire) !important; }

/* 모바일 아코디언 (드롭다운 펼침) */
.mnav .m-group { width:100%; max-width:340px; text-align:center; }
.mnav .m-head {
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--serif); font-size:1.4rem; color:#F4ECDD; padding:14px 0;
  cursor:pointer; font-weight:600;
}
.mnav .m-head .caret { width:8px; height:8px; border-right:2px solid var(--gold-2); border-bottom:2px solid var(--gold-2); transform:rotate(45deg); transition:transform .3s; }
.mnav .m-group.open .m-head .caret { transform:rotate(-135deg); }
.mnav .m-sub { max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.mnav .m-group.open .m-sub { max-height:400px; }
.mnav .m-sub a { font-family:var(--sans); font-size:1rem; color:rgba(244,236,221,.72); padding:9px 0; }

/* ============================================================
   우측 플로팅 버튼
   ============================================================ */
.floating {
  position:fixed; right:22px; bottom:100px; z-index:90;
  display:flex; flex-direction:column; gap:12px;
}
.floating button {
  width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--cream);
  display:grid; place-items:center; box-shadow:0 12px 30px -10px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), background .3s;
}
.floating button:hover { transform:translateY(-3px) scale(1.05); }
.floating button.gold { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2A1F0C; }
.floating button svg { width:22px; height:22px; }
.floating .totop { opacity:0; pointer-events:none; transition:opacity .3s; }
.floating .totop.show { opacity:1; pointer-events:auto; }

/* 모바일 하단 CTA 바 */
.mcta {
  position:fixed; left:0; right:0; bottom:0; z-index:88;
  display:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(13,11,9,.94); backdrop-filter:blur(12px);
  border-top:1px solid rgba(201,162,75,.25);
}
.mcta .btn { width:100%; }

/* ============================================================
   카피 복사 (자기확신 문구)
   ============================================================ */
.affirm-card {
  position:relative; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 32px; margin-bottom:16px;
  border-left:3px solid var(--gold);
}
.affirm-card .q { font-family:var(--serif); font-size:1.25rem; line-height:1.7; color:var(--ink); }
.affirm-card .copy-btn {
  position:absolute; top:20px; right:20px;
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:999px; font-size:.82rem; font-weight:600;
  background:var(--ivory-2); color:var(--ink-2); transition:background .3s, color .3s;
}
.affirm-card .copy-btn:hover { background:var(--gold-soft); color:#2A1F0C; }
.affirm-card .copy-btn svg { width:15px; height:15px; }

/* 페이지 상단 여백 (고정헤더 아래) */
.page-top { padding-top:120px; }
/* 서브페이지 히어로(간이) */
.subhero {
  background:radial-gradient(120% 100% at 50% 0%,#1c1712,var(--noir));
  color:#F0E8DA; padding:160px 0 80px; text-align:center; position:relative; overflow:hidden;
}
.subhero .eyebrow { color:var(--gold-2); }
.subhero h1 { font-family:var(--serif); font-size:clamp(2rem,5vw,3.2rem); line-height:1.3; color:#F6EEDF; }
.subhero p { margin-top:18px; color:rgba(240,232,218,.8); font-size:1.06rem; line-height:1.9; max-width:640px; margin-left:auto; margin-right:auto; }
.subhero .crumb { font-size:.8rem; color:rgba(240,232,218,.5); margin-bottom:16px; letter-spacing:.1em; }
.subhero .crumb a { color:var(--gold-2); }

/* ============================================================
   버튼
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:16px 30px; border-radius:999px; font-weight:700; font-size:1rem;
  transition:transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
  white-space:nowrap;
}
.btn svg { width:19px; height:19px; }
.btn-primary { background:var(--ink); color:var(--cream); box-shadow:0 14px 32px -14px rgba(42,38,32,.7); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 20px 40px -14px rgba(42,38,32,.85); }
.btn-gold { background:linear-gradient(135deg,var(--gold-2),var(--gold)); color:#2A1F0C; box-shadow:0 16px 34px -14px rgba(201,162,75,.8); }
.btn-gold:hover { transform:translateY(-3px); box-shadow:0 24px 48px -14px rgba(201,162,75,.95); }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-outline:hover { border-color:var(--ink); transform:translateY(-3px); }
.btn-outline.on-dark { color:#F4ECDD; border-color:rgba(244,236,221,.3); }
.btn-outline.on-dark:hover { border-color:var(--gold-2); color:var(--gold-2); }
.btn-ghost { color:var(--ink-2); font-weight:600; font-size:.95rem; gap:7px; padding:12px 4px; }
.btn-ghost:hover { color:var(--fire); }
.btn-ghost.on-dark { color:var(--gold-soft); }

/* 스토어 배지 버튼 */
.stores { display:flex; gap:12px; flex-wrap:wrap; }
.store-btn {
  display:inline-flex; align-items:center; gap:11px;
  padding:11px 20px; border-radius:14px; background:var(--ink); color:var(--cream);
  transition:transform .3s var(--ease), box-shadow .3s;
  box-shadow:0 10px 26px -14px rgba(0,0,0,.6);
}
.store-btn:hover { transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(0,0,0,.7); }
.store-btn svg { width:26px; height:26px; flex:none; }
.store-btn .s-sub { font-size:.62rem; opacity:.72; line-height:1; letter-spacing:.04em; }
.store-btn .s-main { font-size:1.02rem; font-weight:700; line-height:1.2; }
.store-btn.soon { opacity:.55; }
.store-btn.soon .s-main::after { content:' · 준비중'; font-size:.62rem; font-weight:600; opacity:.8; }

/* CTA 반복 버튼 강조 애니메이션 */
.pulse { position:relative; }
.pulse::after {
  content:''; position:absolute; inset:0; border-radius:inherit;
  box-shadow:0 0 0 0 rgba(201,162,75,.5); animation:pulse 2.6s infinite;
}
@keyframes pulse { 70%{ box-shadow:0 0 0 16px rgba(201,162,75,0);} 100%{box-shadow:0 0 0 0 rgba(201,162,75,0);} }

/* ============================================================
   1. 히어로
   ============================================================ */
.hero {
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  background:var(--noir);
  overflow:hidden;
  padding:120px 0 70px;
}
.hero__bg { position:absolute; inset:0; z-index:0; }
.hero__bg img, .hero__bg video { width:100%; height:100%; object-fit:cover; object-position:center center; opacity:.9; }
.hero__bg::after {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 12% 40%, rgba(13,11,9,.94) 0%, rgba(13,11,9,.55) 46%, rgba(13,11,9,.15) 75%),
    linear-gradient(180deg, rgba(13,11,9,.5), rgba(13,11,9,0) 30%);
}
.hero .wrap { position:relative; z-index:1; }
.hero__inner { max-width:660px; }
/* 브랜드라인 — 장식 라인 동반 */
.hero .brandline {
  display:inline-flex; align-items:center; gap:16px;
  font-size:.82rem; font-weight:800; letter-spacing:.42em; color:var(--gold-2);
  text-transform:uppercase; margin-bottom:30px;
}
.hero .brandline::before {
  content:''; width:44px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2));
}
/* 헤드라인 — 대형 + 골드 그라디언트 강조 + 미묘한 글로우 */
.hero h1 {
  font-family:var(--serif); font-weight:700;
  font-size:clamp(2.6rem, 7vw, 4.6rem); line-height:1.22;
  color:#F8F1E4; letter-spacing:-.025em;
  text-shadow:0 2px 40px rgba(0,0,0,.5);
}
.hero h1 .accent {
  background:linear-gradient(120deg, var(--gold-2) 20%, var(--fire-glow) 55%, var(--gold-2));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  animation:goldshine 6s linear infinite;
}
@keyframes goldshine { to { background-position:200% center; } }
.hero__sub {
  margin-top:28px; font-size:1.1rem; line-height:2; color:rgba(240,232,218,.8);
  max-width:530px;
  padding-left:22px; border-left:2px solid rgba(201,162,75,.35);
}
.hero__sub strong { color:var(--gold-soft); font-weight:600; }
.hero__cta { margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__share { margin-top:20px; }
/* 히어로 진입 스태거 (배경 위 콘텐츠 등장) */
.hero .reveal { opacity:0; transform:translateY(26px); animation:heroIn 1s var(--ease) forwards; }
.hero .reveal.d1 { animation-delay:.15s; } .hero .reveal.d2 { animation-delay:.3s; }
.hero .reveal.d3 { animation-delay:.5s; } .hero .reveal.d4 { animation-delay:.68s; }
@keyframes heroIn { to { opacity:1; transform:none; } }

/* 히어로 향수 라벨 — 중선(화면 정중앙) 기준 양옆 배경박스 (병 위치 무관, 항상 고정) */
.hero__tags { position:absolute; inset:0; z-index:2; pointer-events:none; }

.hero__tag {
  position:absolute; bottom:7%; text-align:center; padding:12px 20px;
  pointer-events:auto;
  backdrop-filter:blur(7px) brightness(1.3) saturate(1.1);
  background:rgba(20,16,12,.34);
  animation:tagFloat 1s var(--ease) both;
}
.hero__tag.fire {
  left:5%;
  border-radius:14px 4px 4px 14px;
  border:1px solid rgba(255,181,102,.28);
  background:linear-gradient(120deg, rgba(210,74,36,.24), rgba(20,16,12,.34));
  animation-delay:.9s;
}
.hero__tag.water {
  right:5%;
  border-radius:14px;
  border:1px solid rgba(169,220,242,.28);
  background:linear-gradient(240deg, rgba(46,110,158,.26), rgba(12,16,20,.34));
  animation-delay:1.05s;
}
.hero__tag.fire { border-radius:14px; }
@keyframes tagFloat { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
.hero__tag .brand {
  font-size:.6rem; letter-spacing:.32em; font-weight:800;
  color:var(--gold-2); margin-bottom:4px;
}
.hero__tag .slogan {
  font-size:.5rem; letter-spacing:.24em; color:rgba(240,232,218,.6);
  margin-bottom:8px; text-transform:uppercase;
}
.hero__tag .rule { width:24px; height:1px; margin:0 auto 8px; opacity:.6; }
.hero__tag.fire  .rule { background:var(--fire-glow); }
.hero__tag.water .rule { background:var(--water-glow); }
.hero__tag .name {
  font-family:var(--serif); font-size:1.1rem; font-weight:700; letter-spacing:.1em;
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.hero__tag.fire  .name { color:var(--fire-glow); }
.hero__tag.water .name { color:var(--water-glow); }
.hero__tag .ko { display:block; font-size:.68rem; color:rgba(240,232,218,.78); margin-top:5px; letter-spacing:.06em; }

.scroll-hint {
  position:absolute; left:50%; bottom:28px; transform:translateX(-50%);
  z-index:1; color:rgba(240,232,218,.55); font-size:.72rem; letter-spacing:.2em;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-hint::after { content:''; width:1px; height:36px; background:linear-gradient(rgba(240,232,218,.5),transparent); animation:scrolldn 2s infinite; }
@keyframes scrolldn { 0%{transform:scaleY(0);transform-origin:top;} 50%{transform:scaleY(1);transform-origin:top;} 51%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }

/* ============================================================
   2. 공감 영역
   ============================================================ */
.empathy { background:var(--cream); }
.empathy .wrap { max-width:820px; text-align:center; }
/* 블록은 화면 중앙, 텍스트는 왼쪽정렬(첫 글자 열맞춤) */
.empathy .lines { margin-top:40px; display:inline-block; text-align:left; }
.empathy .lines p {
  font-family:var(--serif); font-size:clamp(1.15rem,2.6vw,1.5rem); line-height:2.1;
  color:var(--ink-2); margin-bottom:26px;
}
.empathy .close {
  margin-top:44px; font-size:1.1rem; color:var(--ink); font-weight:600; line-height:1.9;
  display:inline-block; text-align:left;
}

/* ============================================================
   3. 앱 소개 + 기능
   ============================================================ */
.appsec { background:var(--ivory); }
.appsec__head { max-width:760px; margin:0 auto 60px; text-align:center; }
.feat-grid {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
}
.feat {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 28px; transition:transform .4s var(--ease), box-shadow .4s;
}
.feat:hover { transform:translateY(-6px); box-shadow:var(--shadow); }
.feat__ic {
  width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--ivory-2),var(--cream)); margin-bottom:20px;
}
.feat__ic svg { width:28px; height:28px; stroke:var(--fire); }
.feat h3 { font-size:1.18rem; font-weight:700; margin-bottom:10px; }
.feat p { font-size:.96rem; color:var(--ink-2); line-height:1.8; }
.appsec .cta-row { margin-top:48px; text-align:center; }

/* ============================================================
   4. 향이 삶을 바꾸는 방식 (감성 다크)
   ============================================================ */
.philosophy {
  background:radial-gradient(120% 100% at 70% 0%, #1c1712, var(--noir));
  color:#F0E8DA; position:relative; overflow:hidden;
}
.philosophy::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(50% 50% at 80% 60%, rgba(201,162,75,.14), transparent 70%);
}
.philosophy .wrap { max-width:780px; text-align:center; position:relative; }
.philosophy .lines p {
  font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.4rem); line-height:2.1;
  color:rgba(240,232,218,.86); margin-bottom:24px;
}
.philosophy .highlight {
  margin-top:40px; font-family:var(--serif); font-size:clamp(1.3rem,3vw,1.8rem);
  color:var(--gold-2); line-height:1.7; font-weight:600;
}
.philosophy .brand-sign { margin-top:30px; letter-spacing:.3em; font-weight:800; color:var(--gold-soft); font-size:.9rem; }

/* ============================================================
   5. 오행 5색
   ============================================================ */
/* 오행 섹션 — 채도낮춘 주역/태극/한자 배경 패턴 위에 이미지 카드 */
.ohaeng {
  position:relative; overflow:hidden;
  background:#0D0B09;
}
.ohaeng::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:url('../images/ohaeng/section-bg.jpg') center/cover;
  opacity:.5;
}
.ohaeng::after {
  content:''; position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 90% at 50% 40%, transparent, rgba(13,11,9,.7));
}
.ohaeng .wrap { position:relative; z-index:1; }
.ohaeng__head { text-align:center; max-width:720px; margin:0 auto 56px; }
.ohaeng__head .eyebrow { color:var(--gold-2); }
.ohaeng__head .sec-title { color:#F4ECDD; }
.ohaeng__head .sec-lead { color:rgba(240,232,218,.78); }
.five {
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.el {
  border-radius:var(--r); overflow:hidden; position:relative;
  aspect-ratio:2/3; min-height:0;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .5s var(--ease), box-shadow .5s;
}
.el img { width:100%; height:100%; object-fit:cover; display:block; }
.el:hover { transform:translateY(-10px); box-shadow:0 32px 64px -24px rgba(0,0,0,.85); }
.el .cap {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 14px; text-align:center;
  background:linear-gradient(0deg, rgba(13,11,9,.9), transparent);
}
.el .cap .kw { display:block; font-size:.72rem; color:var(--gold-2); font-weight:600; letter-spacing:.04em; margin-bottom:5px; }
.el .cap .desc { display:block; font-size:.8rem; line-height:1.5; color:rgba(255,255,255,.9); }
.ohaeng .note { text-align:center; margin-top:44px; color:rgba(240,232,218,.72); font-size:1rem; line-height:1.9; max-width:640px; margin-left:auto; margin-right:auto; }

/* ============================================================
   6. 평생향 / 보조향 / 조후향
   ============================================================ */
.scents { background:var(--ivory); }
.scents__head { text-align:center; max-width:720px; margin:0 auto 56px; }
.scent-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.scard {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:38px 32px; position:relative; overflow:hidden;
}
.scard__badge { font-family:var(--serif); font-size:1.35rem; font-weight:700; margin-bottom:6px; }
.scard__tag { font-size:.8rem; color:var(--ink-3); letter-spacing:.1em; margin-bottom:20px; }
.scard p { color:var(--ink-2); font-size:.98rem; line-height:1.85; margin-bottom:14px; }
.scard.pri { border-top:3px solid var(--earth); }
.scard.aux { border-top:3px solid var(--fire); }
.scard.jo  { border-top:3px solid var(--water); }
.scard .quote {
  font-family:var(--serif); color:var(--ink); font-size:1.02rem; font-style:italic;
  border-left:3px solid var(--gold); padding-left:16px; margin:6px 0;
}
.scents .cta-row { text-align:center; margin-top:44px; }

/* ============================================================
   7. 추천 방식
   ============================================================ */
.method { background:var(--cream); }
.method__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.method__copy h2 { margin-bottom:24px; }
.method__cards { display:flex; flex-direction:column; gap:16px; }
.mcard {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:24px 26px; display:flex; gap:18px; align-items:flex-start;
}
.mcard .num { font-family:var(--serif); font-size:1.5rem; color:var(--gold); font-weight:700; flex:none; width:34px; }
.mcard h4 { font-size:1.06rem; margin-bottom:5px; }
.mcard p { font-size:.93rem; color:var(--ink-2); line-height:1.7; }
.method .disclaimer {
  grid-column:1/-1; margin-top:20px; background:var(--ivory-2); border-radius:var(--r-sm);
  padding:22px 26px; font-size:.92rem; color:var(--ink-2); line-height:1.8;
}
.method .disclaimer b { color:var(--ink); }

/* ============================================================
   8. 현재 출시 향수 (FIRE / WATER) — 블랙골드
   ============================================================ */
.products { background:var(--noir); color:#F0E8DA; }
.products__head { text-align:center; max-width:640px; margin:0 auto 64px; }
.prod {
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-radius:24px; overflow:hidden;
  box-shadow:var(--shadow-gold); margin-bottom:36px; min-height:520px;
}
.prod__vis { position:relative; overflow:hidden; }
.prod__vis img { width:100%; height:100%; object-fit:cover; }
.prod__vis::after { content:''; position:absolute; inset:0; }
.prod__body { padding:56px 50px; display:flex; flex-direction:column; justify-content:center; }
.prod.fire  { background:linear-gradient(150deg,#2A1409,#140A06); }
.prod.fire .prod__vis::after  { background:linear-gradient(90deg,transparent 55%, #140A06); }
.prod.water { background:linear-gradient(150deg,#0A1622,#060C13); }
.prod.water .prod__vis::after { background:linear-gradient(270deg,transparent 55%, #060C13); }
.prod.water .prod__body { order:-1; }
.prod.water .prod__vis::after { background:linear-gradient(90deg,transparent 55%,#060C13); }
.prod__name { font-family:var(--serif); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:700; letter-spacing:.02em; }
.prod.fire  .prod__name { color:var(--fire-glow); }
.prod.water .prod__name { color:var(--water-glow); }
.prod__tagline { font-size:1.1rem; margin:10px 0 6px; color:#F0E8DA; font-weight:600; }
.prod__keywords { font-size:.85rem; letter-spacing:.2em; color:rgba(240,232,218,.6); margin-bottom:24px; }
.prod__desc { font-size:1rem; line-height:1.9; color:rgba(240,232,218,.82); margin-bottom:26px; }
.prod__mood { margin-bottom:24px; }
.prod__mood .lbl { font-size:.72rem; letter-spacing:.24em; color:var(--gold-2); margin-bottom:10px; }
.prod__mood .notes { display:flex; gap:8px; flex-wrap:wrap; }
.prod__mood .notes span {
  padding:6px 14px; border-radius:999px; font-size:.82rem;
  border:1px solid rgba(240,232,218,.22); color:rgba(240,232,218,.9);
}
.prod__when { list-style:none; margin-bottom:28px; }
.prod__when li { font-size:.92rem; color:rgba(240,232,218,.78); padding:5px 0 5px 22px; position:relative; }
.prod__when li::before { content:''; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:50%; }
.prod.fire  .prod__when li::before { background:var(--fire-glow); }
.prod.water .prod__when li::before { background:var(--water-glow); }

/* ============================================================
   9. 이렇게 사용해 보세요
   ============================================================ */
.howuse { background:var(--cream); }
.howuse__grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.howuse__mantras { display:flex; flex-direction:column; gap:16px; margin:8px 0 28px; }
.mantra {
  font-family:var(--serif); font-size:1.15rem; color:var(--ink); line-height:1.6;
  padding:18px 24px; background:var(--paper); border-radius:var(--r-sm);
  border-left:3px solid var(--gold); box-shadow:0 8px 24px -18px rgba(0,0,0,.3);
}
.howuse p { color:var(--ink-2); line-height:1.9; }

/* ============================================================
   10. STEP 프로세스
   ============================================================ */
.steps { background:var(--ivory); }
.steps__head { text-align:center; max-width:680px; margin:0 auto 60px; }
.step-track { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.step {
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:26px 18px; text-align:center; position:relative;
}
.step .n {
  font-size:.72rem; font-weight:800; letter-spacing:.1em; color:var(--gold);
  background:var(--ivory-2); border-radius:999px; padding:4px 12px; display:inline-block; margin-bottom:14px;
}
.step p { font-size:.88rem; color:var(--ink-2); line-height:1.6; }
.steps .cta-row { text-align:center; margin-top:48px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   11. 추천 결과 분기
   ============================================================ */
.routing { background:var(--cream); }
.routing__head { text-align:center; max-width:680px; margin:0 auto 52px; }
.routing__head .sec-lead { margin-top:16px; }
.route-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.route {
  border-radius:var(--r); padding:26px 24px; border:1px solid var(--line);
  background:var(--paper); display:flex; align-items:center; gap:16px;
}
.route .rdot { width:44px; height:44px; border-radius:12px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:.8rem; }
.route.r-fire  .rdot { background:linear-gradient(135deg,var(--fire-2),var(--fire)); }
.route.r-water .rdot { background:linear-gradient(135deg,var(--water-2),var(--water)); }
.route.r-soon  .rdot { background:linear-gradient(135deg,#B9BEC4,#8A9096); }
.route h4 { font-size:1rem; margin-bottom:3px; }
.route p { font-size:.85rem; color:var(--ink-2); line-height:1.5; }
.route .avail { font-size:.72rem; font-weight:700; color:var(--wood); }
.route.r-soon .avail { color:var(--ink-3); }

/* ============================================================
   12. 선물하기
   ============================================================ */
.gift {
  background:linear-gradient(160deg,#241812,#140C08); color:#F0E8DA; overflow:hidden; position:relative;
}
.gift::before { content:''; position:absolute; top:-30%; right:-10%; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(201,162,75,.16),transparent 70%); }
.gift__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; }
.gift__flow { display:flex; flex-direction:column; gap:10px; }
.gift__step { display:flex; align-items:center; gap:14px; font-size:.95rem; color:rgba(240,232,218,.85); }
.gift__step .gn { width:26px; height:26px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-2); font-size:.78rem; font-weight:700; display:grid; place-items:center; flex:none; }
.gift .share-quote {
  font-family:var(--serif); font-size:1.15rem; color:var(--gold-soft); line-height:1.8;
  border-left:3px solid var(--gold); padding-left:18px; margin:26px 0;
}

/* ============================================================
   13. 출시 예정
   ============================================================ */
.upcoming { background:var(--ivory); }
.upcoming__head { text-align:center; max-width:640px; margin:0 auto 52px; }
.up-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* 배경이미지 풀블리드 + 좌상단 볼드 영문 + 우하단 설명 */
.up {
  position:relative; border-radius:var(--r); overflow:hidden;
  min-height:340px; padding:26px;
  display:flex; flex-direction:column; justify-content:space-between;
  color:#fff; isolation:isolate;
  transition:transform .5s var(--ease), box-shadow .5s;
}
.up:hover { transform:translateY(-8px); box-shadow:var(--shadow); }
.up::before {
  content:''; position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
  transition:transform 1s var(--ease);
}
.up:hover::before { transform:scale(1.06); }
.up::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,8,6,.28) 0%, rgba(10,8,6,.15) 40%, rgba(10,8,6,.72) 100%);
}
.up.wood::before   { background-image:url('../images/ohaeng/wood.jpg'); }
.up.earth1::before { background-image:url('../images/ohaeng/dry-earth.jpg'); }
.up.earth2::before { background-image:url('../images/ohaeng/wet-earth.jpg'); }
.up.metal::before  { background-image:url('../images/ohaeng/metal.jpg'); }
/* 좌상단: 큼지막한 볼드 영문 */
.up .en {
  font-weight:800; letter-spacing:.02em; line-height:1.05;
  font-size:clamp(1.5rem,3.2vw,2rem); text-align:left;
  text-shadow:0 2px 12px rgba(0,0,0,.5); align-self:flex-start;
}
/* 우하단: 설명 + 출시예정 */
.up .btm { text-align:right; align-self:flex-end; }
.up p {
  font-size:.95rem; color:rgba(255,255,255,.94); margin:0 0 12px;
  line-height:1.5; font-weight:500; text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.up .soon {
  font-size:.72rem; font-weight:700; letter-spacing:.1em; color:#2A1F0C;
  background:var(--gold-soft); border-radius:999px; padding:5px 13px; display:inline-block;
}
.upcoming .cta-row { text-align:center; margin-top:44px; }

/* ============================================================
   14~15. 브랜드 메시지
   ============================================================ */
.wish {
  background:radial-gradient(120% 100% at 50% 0%,#1c1712,var(--noir)); color:#F0E8DA;
  text-align:center; position:relative; overflow:hidden;
}
.wish .wrap { max-width:760px; position:relative; }
.wish .lines p { font-family:var(--serif); font-size:clamp(1.1rem,2.4vw,1.35rem); line-height:2.1; color:rgba(240,232,218,.84); margin-bottom:22px; }
.mantra-final {
  margin-top:56px; padding-top:48px; border-top:1px solid rgba(201,162,75,.2);
}
.mantra-final .eyebrow { color:var(--gold-2); }
.mantra-final .m {
  font-family:var(--serif); font-size:clamp(1.4rem,3.4vw,2rem); color:var(--gold-2);
  line-height:1.7; margin:16px 0; font-weight:600;
}
.mantra-final .end { margin-top:30px; color:#F0E8DA; font-size:1.1rem; }
.mantra-final .sign { margin-top:26px; letter-spacing:.36em; font-weight:800; font-size:1.05rem; color:var(--gold-soft); }

/* ============================================================
   16. 마지막 CTA
   ============================================================ */
.finalcta { background:linear-gradient(180deg,var(--cream),var(--ivory)); text-align:center; }
.finalcta h2 { font-family:var(--serif); font-size:clamp(1.8rem,4.4vw,2.8rem); line-height:1.35; margin-bottom:20px; }
.finalcta p { color:var(--ink-2); font-size:1.06rem; line-height:1.9; max-width:560px; margin:0 auto 36px; }
.finalcta .cta-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; align-items:center; }
.finalcta .stores { justify-content:center; margin-top:22px; }

/* ============================================================
   17. 푸터
   ============================================================ */
.ftr { background:var(--noir); color:rgba(240,232,218,.7); padding:64px 0 40px; }
.ftr__top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; margin-bottom:40px; }
.ftr__brand { max-width:280px; }
.ftr__brand .logo { color:#F4ECDD; margin-bottom:16px; }
.ftr__brand p { font-size:.9rem; line-height:1.7; color:rgba(240,232,218,.55); }
.ftr__info { font-size:.86rem; line-height:1.9; color:rgba(240,232,218,.62); }
.ftr__info b { color:rgba(240,232,218,.85); font-weight:600; }
.ftr__links { display:flex; flex-direction:column; gap:10px; }
.ftr__links a { font-size:.9rem; color:rgba(240,232,218,.7); transition:color .3s; }
.ftr__links a:hover { color:var(--gold-2); }
.ftr__bottom {
  border-top:1px solid rgba(240,232,218,.12); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; align-items:center;
  font-size:.8rem; color:rgba(240,232,218,.45);
}
.ftr__bottom .credit { letter-spacing:.1em; }
.ftr__bottom .credit b { color:var(--gold-soft); font-weight:700; }

/* ============================================================
   토스트 / 모달 (알림신청)
   ============================================================ */
.toast {
  position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--cream); padding:14px 26px; border-radius:999px;
  font-size:.92rem; font-weight:600; box-shadow:var(--shadow); z-index:200;
  opacity:0; pointer-events:none; transition:.4s var(--ease);
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

.modal-bg {
  position:fixed; inset:0; z-index:150; background:rgba(13,11,9,.7); backdrop-filter:blur(6px);
  display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition:.35s;
}
.modal-bg.open { opacity:1; pointer-events:auto; }
.modal {
  background:var(--cream); border-radius:24px; max-width:440px; width:100%; padding:40px 36px;
  transform:translateY(20px) scale(.98); transition:.4s var(--ease); box-shadow:var(--shadow-gold);
}
.modal-bg.open .modal { transform:none; }
.modal h3 { font-family:var(--serif); font-size:1.4rem; margin-bottom:8px; }
.modal p { color:var(--ink-2); font-size:.95rem; margin-bottom:24px; line-height:1.7; }
.modal .field { margin-bottom:16px; }
.modal label { display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; }
.modal input, .modal select {
  width:100%; min-width:0; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px;
  font-family:inherit; font-size:1rem; background:var(--paper); color:var(--ink);
}
.modal input:focus, .modal select:focus { outline:none; border-color:var(--gold); }
.modal .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.modal .btn { width:100%; margin-top:8px; }
.modal .close { position:absolute; }
.modal .agree { display:flex; gap:9px; align-items:flex-start; font-size:.82rem; color:var(--ink-2); margin-bottom:18px; line-height:1.5; }
.modal .agree input { width:auto; margin-top:3px; }

/* ============================================================
   리빌 애니메이션
   ============================================================ */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }
.reveal.d5 { transition-delay:.4s; }

/* 스크롤 진행선 (상단 골드 2px) */
body::before {
  content:''; position:fixed; top:0; left:0; z-index:300;
  width:var(--scroll-p,0%); height:2px;
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  transition:width .1s linear;
}

/* 감성 문구 골드 전환 (highlight / 최종 만트라) */
.philosophy .highlight.in,
.mantra-final .m.in {
  animation:affirmIn 1.6s var(--ease) both;
}
@keyframes affirmIn {
  from { opacity:0; transform:translateY(14px); }
  to { opacity:1; transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1024px) {
  .feat-grid { grid-template-columns:repeat(2,1fr); }
  .step-track { grid-template-columns:repeat(3,1fr); }
  .up-grid { grid-template-columns:repeat(2,1fr); }
  .route-grid { grid-template-columns:repeat(2,1fr); }
  .hero__tags { display:none; }
}
@media (max-width:820px) {
  .gnb { display:none; }
  .burger { display:flex; }
  .mcta { display:block; }
  .floating { bottom:88px; right:16px; }
  .floating button { width:46px; height:46px; }
  .sec-pad { padding:72px 0; }
  .method__grid, .howuse__grid, .gift__grid { grid-template-columns:1fr; gap:36px; }
  .prod { grid-template-columns:1fr; min-height:0; }
  .prod__vis { min-height:300px; max-width:100%; }
  .prod__vis img { max-width:100%; }
  .prod.water .prod__body { order:0; }
  .prod.fire .prod__vis::after,
  .prod.water .prod__vis::after { background:linear-gradient(180deg,transparent 55%,rgba(20,10,6,.9)); }
  .prod.water .prod__vis::after { background:linear-gradient(180deg,transparent 55%,rgba(6,12,19,.9)); }
  .prod__body { padding:40px 32px; min-width:0; }
  .five { grid-template-columns:repeat(2,1fr); }
  .scent-cards { grid-template-columns:1fr; }
  .feat-grid { grid-template-columns:1fr; }
}
@media (max-width:520px) {
  .wrap { padding:0 18px; }
  .hdr { padding:14px 18px; }
  .hdr.scrolled { padding:10px 18px; }
  .sec-pad { padding:60px 0; }
  .step-track { grid-template-columns:repeat(2,1fr); }
  .up-grid { grid-template-columns:1fr; }
  .route-grid { grid-template-columns:1fr; }
  .five { grid-template-columns:1fr; }
  .el { min-height:auto; padding:26px 22px; flex-direction:row; align-items:center; text-align:left; gap:18px; }
  .el .glyph { margin:0; font-size:1.8rem; }
  .hero__cta { flex-direction:column; align-items:stretch; }
  .hero__cta .btn { width:100%; }
  .modal .row { grid-template-columns:1fr; }
  .ftr__top { flex-direction:column; }
}
@media (max-width:400px) {
  .step-track { grid-template-columns:1fr; }
}
@media (max-width:360px) {
  .prod__mood .notes span { font-size:.76rem; padding:5px 11px; }
  .btn { padding:14px 22px; font-size:.94rem; }
  .prod__body { padding:32px 22px; }
  .prod__name { font-size:1.7rem; }
  .wrap { padding:0 14px; }
}