/* ===================================================
   MAISON LUMIÈRE — Luxury Cosmetics Frontend CSS
   Mobile First Design
   =================================================== */

/* ── 디자인 토큰 ── */
:root {
  --color-black:    #0a0a0a;
  --color-dark:     #1a1a1a;
  --color-charcoal: #2d2d2d;
  --color-mid:      #6b6b6b;
  --color-light:    #b0b0b0;
  --color-border:   #e8e4df;
  --color-beige:    #f7f4f0;
  --color-cream:    #faf8f5;
  --color-white:    #ffffff;
  --color-gold:     #c9a96e;
  --color-gold-lt:  #e8d5b0;
  --color-rose:     #d4a5a5;
  --font-serif:  'Cormorant Garamond', Georgia, serif;
  --font-sans:   'Noto Sans KR', sans-serif;
  --font-en:     'Montserrat', sans-serif;
  --header-h: 60px;
  --topbar-h: 32px;
  --radius:   2px;
  --shadow:   0 4px 24px rgba(0,0,0,.08);
  --shadow-lg:0 12px 48px rgba(0,0,0,.14);
  --transition: .3s cubic-bezier(.4,0,.2,1);
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body { font-family: var(--font-sans); color: var(--color-dark); background: var(--color-white); line-height: 1.7; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ══════════════════════════════════════
   공통 — 모바일 기준 (기본값)
══════════════════════════════════════ */
.container { width: 100%; margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section--beige { background: var(--color-beige); }
.section-header { text-align: center; margin-bottom: 36px; }
.section-eyebrow {
  font-family: var(--font-en); font-size: .65rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 10px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 6vw, 3rem);
  font-weight: 400; color: var(--color-dark);
}
.section-more { text-align: center; margin-top: 36px; }

/* ── 버튼 ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 13px 24px;
  font-family: var(--font-en); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  transition: var(--transition); cursor: pointer;
}
.btn--primary { background: var(--color-dark); color: white; border: 1px solid var(--color-dark); }
.btn--primary:hover { background: var(--color-gold); border-color: var(--color-gold); }
.btn--ghost { border: 1px solid rgba(255,255,255,.5); color: white; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--outline { border: 1px solid var(--color-dark); color: var(--color-dark); }
.btn--outline:hover { background: var(--color-dark); color: white; }
.btn--white { background: white; color: var(--color-dark); }
.btn--white:hover { background: var(--color-gold); color: white; }

/* ── 탑바 ── */
.topbar {
  background: var(--color-dark); color: rgba(255,255,255,.7);
  font-family: var(--font-en); font-size: .6rem;
  letter-spacing: .1em; text-align: center;
  padding: 8px 16px; line-height: 1.5;
}

/* ── 헤더 ── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); padding: 0 20px;
}
.logo {
  font-family: var(--font-serif); font-size: .95rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-dark); line-height: 1.2;
}
.logo span { display: block; font-size: .55rem; letter-spacing: .3em; color: var(--color-gold); }
.gnb { display: none; }
.header__actions { display: flex; align-items: center; gap: 16px; }
.header__icon { color: var(--color-charcoal); transition: var(--transition); position: relative; }
.header__icon:hover { color: var(--color-gold); }
.cart-badge {
  position: absolute; top: -6px; right: -8px;
  width: 16px; height: 16px; background: var(--color-gold);
  border-radius: 50%; font-size: .55rem; color: white;
  display: flex; align-items: center; justify-content: center;
}
.hamburger { display: flex; flex-direction: column; gap: 5px; padding: 4px; cursor: pointer; }
.hamburger span { display: block; width: 22px; height: 1.5px; background: var(--color-dark); transition: var(--transition); }

/* ── 모바일 메뉴 ── */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: white; flex-direction: column;
  padding: 24px 24px 40px; overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 40px;
}
.mobile-menu__close {
  width: 36px; height: 36px; display: flex; align-items: center;
  justify-content: center; cursor: pointer;
  font-size: 1.4rem; color: var(--color-charcoal);
}
.mobile-menu__nav { display: flex; flex-direction: column; flex: 1; }
.mobile-menu__nav a {
  display: block; padding: 16px 0;
  font-family: var(--font-serif); font-size: 1.3rem;
  color: var(--color-dark); border-bottom: 1px solid var(--color-border);
  transition: var(--transition);
}
.mobile-menu__nav a:hover { color: var(--color-gold); padding-left: 8px; }
.mobile-menu__footer { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }

/* ── 히어로 ── */
.hero {
  position: relative; min-height: 72vh;
  display: flex; align-items: flex-end; overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #2d1b3d 40%, #1a2a3a 100%);
}
.hero__gradient {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(201,169,110,.15) 0%, transparent 60%),
              radial-gradient(ellipse at 20% 80%, rgba(212,165,165,.1) 0%, transparent 50%);
}
.hero__content {
  position: relative; z-index: 2;
  padding: 0 20px 48px; width: 100%;
}
.hero__eyebrow {
  font-family: var(--font-en); font-size: .65rem; font-weight: 500;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 16px;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 10vw, 6rem);
  font-weight: 300; line-height: 1.1; color: white; margin-bottom: 20px;
}
.hero__desc {
  font-size: .88rem; line-height: 1.9;
  color: rgba(255,255,255,.65); margin-bottom: 32px;
}
.hero__actions { display: flex; flex-direction: column; gap: 12px; }
.hero__scroll { display: none; }

/* ── 브랜드 스트립 ── */
.brand-strip {
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-border);
  padding: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.brand-strip__inner {
  display: flex; align-items: center; gap: 0;
  white-space: nowrap; padding: 0 20px;
}
.brand-item {
  font-family: var(--font-en); font-size: .62rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--color-mid); padding: 6px 14px; flex-shrink: 0;
  transition: var(--transition);
}
.brand-item:hover { color: var(--color-dark); }
.brand-divider { width: 1px; height: 14px; background: var(--color-border); flex-shrink: 0; }

/* ── 상품 그리드 ── */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product-card { cursor: pointer; }
.product-card__img {
  aspect-ratio: 3/4; position: relative; overflow: hidden;
  background: var(--color-beige); margin-bottom: 12px;
}
.product-card__img--1 { background: linear-gradient(145deg, #f0e6d3, #e8d5c4); }
.product-card__img--2 { background: linear-gradient(145deg, #e8e0f0, #d4c8e8); }
.product-card__img--3 { background: linear-gradient(145deg, #d4e8e0, #c4d8d0); }
.product-card__img--4 { background: linear-gradient(145deg, #2d2d2d, #1a1a1a); }
.product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.product-card:hover .product-card__img img { transform: scale(1.04); }
.product-card__img:has(img)::before { display: none; }
.product-card__img::before {
  content: '✦'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); font-size: 2.5rem;
  color: rgba(255,255,255,.2); pointer-events: none;
}
.product-card__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px; background: var(--color-dark); color: white;
  font-family: var(--font-en); font-size: .55rem; font-weight: 600; letter-spacing: .08em;
}
.product-card__badge--best { background: var(--color-gold); }
.product-card__badge--limited { background: #8b0000; }
.product-card__actions {
  position: absolute; bottom: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; transform: translateX(8px); transition: var(--transition);
}
.product-card:hover .product-card__actions { opacity: 1; transform: translateX(0); }
.product-card__wish, .product-card__cart {
  width: 34px; height: 34px; background: white; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); color: var(--color-dark);
  transition: var(--transition);
}
.product-card__wish:hover, .product-card__cart:hover { background: var(--color-gold); color: white; }
.product-card__brand {
  font-family: var(--font-en); font-size: .58rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-gold); margin-bottom: 4px;
}
.product-card__name {
  font-family: var(--font-serif); font-size: .95rem;
  font-weight: 500; color: var(--color-dark);
  margin-bottom: 6px; line-height: 1.3;
}
.product-card__rating { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.stars { color: var(--color-gold); font-size: .8rem; }
.review-count { font-size: .7rem; color: var(--color-mid); }
.product-card__price { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.price-original { font-size: .78rem; color: var(--color-light); text-decoration: line-through; }
.price-sale { font-size: .9rem; font-weight: 500; color: var(--color-dark); }
.price-discount { font-size: .7rem; color: #c0392b; font-weight: 600; }

/* ── 카테고리 그리드 ── */
.category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.category-card {
  aspect-ratio: 3/4; display: flex; align-items: flex-end;
  overflow: hidden; position: relative; cursor: pointer;
}
.category-card--1 { background: linear-gradient(160deg, #e8d5c4, #c4a882); }
.category-card--2 { background: linear-gradient(160deg, #d4c8e8, #a89cc4); }
.category-card--3 { background: linear-gradient(160deg, #2d2d2d, #1a1a1a); }
.category-card--4 { background: linear-gradient(160deg, #c4d8d0, #8ab0a8); }
.category-card__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .6s ease;
}
.category-card:hover .category-card__bg { transform: scale(1.05); }
.category-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 55%);
  transition: var(--transition);
}
.category-card:hover::before { background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 65%); }
.category-card__inner { position: relative; z-index: 1; padding: 16px; color: white; }
.category-card__inner h3 { font-family: var(--font-en); font-size: .6rem; letter-spacing: .18em; margin-bottom: 4px; }
.category-card__inner p { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 400; margin-bottom: 4px; }
.category-card__inner span { font-family: var(--font-en); font-size: .6rem; letter-spacing: .08em; color: rgba(255,255,255,.6); }

/* ── 배너 ── */
.banner { background: linear-gradient(135deg, #2d1b3d 0%, #1a2a3a 100%); padding: 56px 20px; }
.banner__inner { width: 100%; }
.banner__eyebrow { font-family: var(--font-en); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 14px; }
.banner__title { font-family: var(--font-serif); font-size: clamp(1.8rem, 7vw, 4.5rem); font-weight: 300; color: white; margin-bottom: 16px; line-height: 1.15; }
.banner__desc { font-size: .88rem; color: rgba(255,255,255,.55); line-height: 1.9; margin-bottom: 32px; }
.banner__actions { display: flex; flex-direction: column; gap: 12px; }

/* ── 리뷰 그리드 ── */
.review-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.review-card { background: white; padding: 24px 20px; border: 1px solid var(--color-border); }
.review-card__stars { color: var(--color-gold); font-size: .9rem; margin-bottom: 14px; }
.review-card__text { font-family: var(--font-serif); font-size: .95rem; line-height: 1.8; color: var(--color-charcoal); margin-bottom: 20px; font-style: italic; }
.review-card__author { display: flex; align-items: center; gap: 12px; }
.review-card__avatar { width: 36px; height: 36px; background: var(--color-beige); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1rem; color: var(--color-gold); flex-shrink: 0; }
.review-card__author strong { display: block; font-size: .85rem; margin-bottom: 2px; }
.review-card__author span { font-size: .72rem; color: var(--color-mid); }

/* ── 뉴스레터 ── */
.newsletter { background: var(--color-dark); padding: 56px 20px; text-align: center; }
.newsletter__inner { max-width: 100%; margin: 0 auto; }
.newsletter__eyebrow { font-family: var(--font-en); font-size: .65rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 14px; }
.newsletter__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 6vw, 2.8rem); font-weight: 300; color: white; margin-bottom: 14px; }
.newsletter__desc { font-size: .88rem; color: rgba(255,255,255,.5); margin-bottom: 32px; line-height: 1.8; }
.newsletter__form { display: flex; flex-direction: column; max-width: 460px; margin: 0 auto; }
.newsletter__form input { padding: 14px 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-bottom: none; color: white; font-family: var(--font-sans); font-size: .85rem; outline: none; }
.newsletter__form input::placeholder { color: rgba(255,255,255,.3); }
.newsletter__form button { padding: 14px 28px; background: var(--color-gold); color: white; font-family: var(--font-en); font-size: .7rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transition: var(--transition); cursor: pointer; border: none; }
.newsletter__form button:hover { background: #b8924a; }

/* ── 푸터 ── */
.footer { background: var(--color-black); color: rgba(255,255,255,.6); }
.footer__top { padding: 48px 20px 36px; display: flex; flex-direction: column; gap: 36px; }
.footer__logo { font-family: var(--font-serif); font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: white; line-height: 1.2; margin-bottom: 16px; }
.footer__logo span { font-size: .6rem; letter-spacing: .3em; color: var(--color-gold); }
.footer__brand p { font-size: .82rem; line-height: 1.9; margin-bottom: 24px; }
.footer__social { display: flex; gap: 16px; }
.footer__social a { color: rgba(255,255,255,.4); transition: var(--transition); }
.footer__social a:hover { color: var(--color-gold); }
.footer__links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.footer__col h4 { font-family: var(--font-en); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: white; margin-bottom: 16px; }
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a { font-size: .82rem; transition: var(--transition); }
.footer__col a:hover { color: var(--color-gold); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-family: var(--font-en); font-size: .62rem; letter-spacing: .08em; }
.footer__legal { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.footer__legal a:hover { color: var(--color-gold); }

/* ── 스크롤 애니메이션 ── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.fade-up.is-visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════
   반응형 — 태블릿 (640px 이상)
══════════════════════════════════════ */
@media (min-width: 640px) {
  :root { --header-h: 64px; }
  .container { padding: 0 28px; }
  .section { padding: 72px 0; }
  .section-header { margin-bottom: 44px; }
  .hero { min-height: 78vh; align-items: center; }
  .hero__content { padding: 0 28px; }
  .hero__actions { flex-direction: row; }
  .banner__actions { flex-direction: row; }
  .product-grid { gap: 20px; }
  .category-grid { gap: 16px; }
  .review-grid { grid-template-columns: repeat(2, 1fr); }
  .newsletter__form { flex-direction: row; }
  .newsletter__form input { flex: 1; border-bottom: 1px solid rgba(255,255,255,.15); border-right: none; }
  .footer__links { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════
   반응형 — 데스크탑 (1024px 이상)
══════════════════════════════════════ */
@media (min-width: 1024px) {
  :root { --header-h: 72px; --topbar-h: 36px; }
  html { font-size: 16px; }
  .container { max-width: 1280px; padding: 0 40px; }
  .section { padding: 100px 0; }
  .section-header { margin-bottom: 60px; }
  .section-more { margin-top: 52px; }

  /* 헤더 */
  .header__inner { padding: 0 40px; }
  .gnb { display: flex; align-items: center; gap: 36px; }
  .gnb a {
    font-family: var(--font-en); font-size: .7rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-charcoal); position: relative; padding-bottom: 2px;
    transition: var(--transition);
  }
  .gnb a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: var(--transition); }
  .gnb a:hover::after { width: 100%; }
  .hamburger { display: none; }

  /* 히어로 */
  .hero { min-height: 92vh; }
  .hero__content { padding: 0 40px; max-width: 680px; }
  .hero__desc { max-width: 480px; }
  .hero__scroll {
    display: flex; position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
    flex-direction: column; align-items: center; gap: 12px;
    font-family: var(--font-en); font-size: .6rem; letter-spacing: .2em;
    color: rgba(255,255,255,.4); z-index: 2;
  }
  .hero__scroll-line {
    width: 1px; height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
    animation: scrollLine 2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%,100% { opacity:.4; transform:scaleY(1); }
    50% { opacity:1; transform:scaleY(1.2); }
  }

  /* 브랜드 스트립 */
  .brand-strip { padding: 24px 40px; }
  .brand-strip__inner { justify-content: center; padding: 0; }
  .brand-item { padding: 8px 36px; }

  /* 상품/카테고리/리뷰 그리드 */
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .category-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .review-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .review-card { padding: 36px; }

  /* 배너 */
  .banner { padding: 100px 40px; }
  .banner__inner { max-width: 1280px; margin: 0 auto; }
  .banner__desc { max-width: 480px; }

  /* 뉴스레터 */
  .newsletter { padding: 100px 40px; }
  .newsletter__inner { max-width: 560px; }

  /* 푸터 */
  .footer__top { max-width: 1280px; margin: 0 auto; padding: 80px 40px 60px; flex-direction: row; gap: 80px; }
  .footer__brand { flex: 0 0 280px; }
  .footer__links { flex: 1; }
  .footer__bottom { max-width: 1280px; margin: 0 auto; padding: 24px 40px; flex-direction: row; gap: 0; }
  .footer__legal { justify-content: flex-start; }
}