/* =============================================
   ASSO — Signature Mood Layer
   Minimal · Feminine · Romantic · Luxe
   
   ✦ 이 파일은 기존 style.css 위에 레이어로 얹힙니다
   ✦ 브랜드 무드를 담당하는 전용 파일
   ============================================= */

/* ─────────────────────────────────────────────
   01. PALETTE REFINEMENT
   더 따뜻하고 로맨틱한 tone-on-tone 팔레트 정제
───────────────────────────────────────────── */
:root {
  /* 로즈 시그니처 — 더 정밀하게 */
  --rose-blush:   #E8C8CC;   /* 매우 연한 블러시 */
  --rose-petal:   #D4A8B0;   /* 꽃잎 로즈 */
  --rose-mauve:   #B08090;   /* 뮤브 — 메인 포인트 */
  --rose-deep:    #8C5A66;   /* 딥 로즈 — 강조 */
  --rose-powder:  #F2E4E6;   /* 파우더 핑크 — 배경 터치 */

  /* 아이보리 정제 */
  --cream:        #FAF7F4;   /* 크림 화이트 */
  --parchment:    #F4EFE8;   /* 파치먼트 — 카드 배경 */

  /* 텍스트 정제 */
  --ink:          #1C1917;   /* 진한 잉크 블랙 */
  --ink-soft:     #3D3530;   /* 소프트 브라운블랙 */

  /* 무드 모션 */
  --mood-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --mood-slow:    0.8s;
  --mood-medium:  0.55s;
}

/* ─────────────────────────────────────────────
   02. TEXT SELECTION — 로즈 시그니처
───────────────────────────────────────────── */
::selection {
  background: var(--rose-blush);
  color: var(--rose-deep);
}
::-moz-selection {
  background: var(--rose-blush);
  color: var(--rose-deep);
}

/* ─────────────────────────────────────────────
   03. CUSTOM CURSOR
   기본: 작고 우아한 원형
   링크·버튼 hover: 로즈 필 + 확대
───────────────────────────────────────────── */
body { cursor: none; }

/* 커서 베이스 */
#asso-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition:
    width  0.3s var(--mood-ease),
    height 0.3s var(--mood-ease),
    background 0.3s ease,
    opacity 0.3s ease;
  will-change: transform;
  mix-blend-mode: multiply;
}

/* 커서 링 */
#asso-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(28, 25, 23, 0.25);
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width  0.5s var(--mood-ease),
    height 0.5s var(--mood-ease),
    border-color 0.4s ease,
    opacity 0.3s ease;
  will-change: transform;
}

/* hover 상태 */
body.cursor-hover #asso-cursor {
  width: 48px; height: 48px;
  background: var(--rose-petal);
  opacity: 0.55;
}
body.cursor-hover #asso-cursor-ring {
  width: 52px; height: 52px;
  border-color: transparent;
}

/* 클릭 상태 */
body.cursor-click #asso-cursor {
  width: 36px; height: 36px;
  background: var(--rose-mauve);
  opacity: 0.7;
}

/* 모바일에서 커서 숨김 */
@media (hover: none) {
  body { cursor: auto; }
  #asso-cursor,
  #asso-cursor-ring { display: none; }
}

/* ─────────────────────────────────────────────
   04. PAGE INTRO — 로고 페이드인 오버레이
   페이지 첫 진입 시 0.6초 동안 크림 오버레이
───────────────────────────────────────────── */
#asso-intro {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 0.7s var(--mood-ease);
}
#asso-intro .intro-logo {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: clamp(28px, 6vw, 52px);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.6s var(--mood-ease),
    transform 0.6s var(--mood-ease);
}
#asso-intro.is-visible .intro-logo {
  opacity: 1;
  transform: translateY(0);
}
#asso-intro.is-out {
  opacity: 0;
}

/* ─────────────────────────────────────────────
   05. SCROLL REVEAL — 더 느리고 우아하게
───────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.85s var(--mood-ease),
    transform 0.85s var(--mood-ease);
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 딜레이 유틸 */
.fade-up[data-delay="1"] { transition-delay: 0.1s; }
.fade-up[data-delay="2"] { transition-delay: 0.2s; }
.fade-up[data-delay="3"] { transition-delay: 0.3s; }
.fade-up[data-delay="4"] { transition-delay: 0.4s; }
.fade-up[data-delay="5"] { transition-delay: 0.5s; }

/* ─────────────────────────────────────────────
   06. TYPOGRAPHY MOOD
   세리프 이탤릭 + 자간으로 로맨틱 무드 강화
───────────────────────────────────────────── */

/* 섹션 타이틀 — 이탤릭 세리프 강화 */
.section-title-mood {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

/* 캡션·레이블 — 더 가볍게 */
.label-mood {
  font-family: 'Jost', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone-mid);
}

/* ─────────────────────────────────────────────
   07. LINK HOVER — rose shimmer underline
───────────────────────────────────────────── */
a.mood-link {
  position: relative;
  display: inline-block;
}
a.mood-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -1px;
  width: 0; height: 1px;
  background: linear-gradient(90deg, var(--rose-petal), var(--rose-mauve));
  transition: width 0.4s var(--mood-ease);
}
a.mood-link:hover::after { width: 100%; }

/* ─────────────────────────────────────────────
   08. PRODUCT CARD — hover 시 rose 오버레이 터치
───────────────────────────────────────────── */
.product-card {
  transition: transform 0.5s var(--mood-ease);
}
.product-card:hover {
  transform: translateY(-3px);
}
.product-card .product-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 60%,
    rgba(232, 200, 204, 0.12) 100%
  );
  opacity: 0;
  transition: opacity 0.5s var(--mood-ease);
  pointer-events: none;
}
.product-card:hover .product-img-wrap::after {
  opacity: 1;
}

/* ─────────────────────────────────────────────
   09. BUTTON MOOD — 로즈 글로우
───────────────────────────────────────────── */
.btn-mood {
  position: relative;
  overflow: hidden;
}
.btn-mood::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(232, 200, 204, 0) 0%,
    rgba(208, 168, 176, 0.18) 50%,
    rgba(232, 200, 204, 0) 100%
  );
  transform: translateX(-100%);
  transition: transform 0.6s var(--mood-ease);
}
.btn-mood:hover::before {
  transform: translateX(100%);
}

/* ─────────────────────────────────────────────
   10. SCROLLBAR — 로즈 시그니처
───────────────────────────────────────────── */
::-webkit-scrollbar { width: 2px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--rose-blush), var(--rose-petal));
  border-radius: 2px;
}

/* ─────────────────────────────────────────────
   11. FOOTER — 원래 스타일 유지
───────────────────────────────────────────── */

/* ─────────────────────────────────────────────
   12. ANNOUNCE BAR — hero·네비와 하나로 잇기

   전략:
   ① 띠배너 자체 색: 진한 다크 유지 (레이아웃 변경 없음)
   ② 띠배너 하단에 ::after 그라디언트 → 투명 네비로 스며듦
   ③ hero 패널 상단에 ::before 그라디언트 → 띠배너 색으로 이어짐
   ④ 텍스트: 로즈 블러시로 무드 통일
───────────────────────────────────────────── */

/* ── ① 띠배너 본체 ── */
.announce-bar {
  background: #1C1917 !important;
  /* 하단: 로즈 미세 구분선 */
  border-bottom: 1px solid rgba(176, 128, 144, 0.12) !important;
  /* 하단으로 다크 그림자 살짝 — 네비쪽으로 번짐 */
  box-shadow: 0 4px 20px rgba(22, 17, 14, 0.35) !important;
  /* 띠배너 안을 미세하게 따뜻하게 */
  position: relative;
}

/* ── ② 띠배너 하단 → 투명(네비)으로 페이드 ── */
/* 네비가 투명이라 사진이 보이는데, 띠배너 그림자로 경계를 지움  */
.announce-bar::after {
  content: '';
  position: absolute;
  bottom: -16px;        /* 띠배너 바깥 아래로 살짝 넘어감 */
  left: 0; right: 0;
  height: 16px;
  background: linear-gradient(
    180deg,
    rgba(22, 17, 14, 0.22) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 105;         /* announce-bar z-index(110) 아래, 네비(200) 아래 */
}

/* ── ③ hero 패널 상단 그라디언트 — 띠배너 색과 연결 ── */
/* 홈 전용: 좌측 패널 상단을 어둡게 → 띠배너 다크와 이어짐 */
[data-page="home"] .hero-panel-left::before,
[data-page="home"] .hero-panel-right::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 180px;
  background: linear-gradient(
    180deg,
    rgba(22, 17, 14, 0.55) 0%,    /* 띠배너 색(#1C1917)과 매치 */
    rgba(22, 17, 14, 0.18) 45%,
    transparent 100%
  );
  z-index: 2;
  pointer-events: none;
}

/* ── ④ 텍스트 ── */
.announce-item {
  color: rgba(232, 200, 204, 0.82) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
}

/* ─────────────────────────────────────────────
   13. HERO SECTION — grain texture overlay
   고급스러운 필름 그레인 느낌
───────────────────────────────────────────── */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* ─────────────────────────────────────────────
   14. NAV LOGO — hover 시 미묘한 로즈
───────────────────────────────────────────── */
.nav-logo a {
  transition: color 0.4s ease !important;
}
.nav-logo a:hover {
  color: var(--rose-mauve) !important;
}

/* ─────────────────────────────────────────────
   15. INPUT FOCUS — rose glow
───────────────────────────────────────────── */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--rose-petal) !important;
  box-shadow: 0 0 0 3px rgba(232, 200, 204, 0.2) !important;
}

/* ─────────────────────────────────────────────
   16. CATEGORY / FILTER TABS — 로즈 포인트
───────────────────────────────────────────── */
.category-tab,
.filter-tab,
.tab-btn {
  position: relative;
  transition:
    color    var(--mood-medium) var(--mood-ease),
    opacity  var(--mood-medium) var(--mood-ease);
}
.category-tab::after,
.filter-tab::after,
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100%;
  height: 1px;
  background: var(--rose-mauve);
  transition: transform 0.35s var(--mood-ease);
  transform-origin: center;
}
.category-tab:hover::after,
.filter-tab:hover::after,
.tab-btn:hover::after,
.category-tab.active::after,
.filter-tab.active::after,
.tab-btn.active::after {
  transform: translateX(-50%) scaleX(1);
}
.category-tab.active,
.filter-tab.active,
.tab-btn.active {
  color: var(--rose-deep) !important;
}

/* ─────────────────────────────────────────────
   17. DIVIDER — 로즈 ✦ 시그니처 구분선
───────────────────────────────────────────── */
.mood-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 auto;
  opacity: 0.55;
}
.mood-divider::before,
.mood-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--rose-petal) 40%,
    var(--rose-petal) 60%,
    transparent
  );
}
.mood-divider-icon {
  font-size: 9px;
  color: var(--rose-mauve);
  letter-spacing: 0.2em;
}

/* 기존 hr 태그 — 섬세한 로즈 라인으로 */
hr {
  border: none;
  border-top: 1px solid rgba(208, 168, 176, 0.2);
  margin: 2rem 0;
}

/* ─────────────────────────────────────────────
   18. BADGE / CHIP — 로즈 파우더 배경
───────────────────────────────────────────── */
.badge-new,
.badge-sale,
.product-badge {
  background: var(--rose-powder) !important;
  color: var(--rose-deep) !important;
  border: none !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 8px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ─────────────────────────────────────────────
   19. PRICE — 강조 색상 로즈
───────────────────────────────────────────── */
.price-sale,
.product-price-sale,
.sale-price {
  color: var(--rose-deep) !important;
}

/* ─────────────────────────────────────────────
   20. SECTION LABEL — 상단 레이블 장식
   .section-eyebrow 클래스 사용
───────────────────────────────────────────── */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Jost', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rose-mauve);
  margin-bottom: 14px;
}
.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--rose-petal);
  opacity: 0.7;
}

/* ─────────────────────────────────────────────
   21. TOAST — 로즈 포인트
───────────────────────────────────────────── */
#toastMsg {
  background: var(--ink) !important;
  color: var(--rose-blush) !important;
  border-left: 2px solid var(--rose-mauve) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em !important;
  border-radius: 2px !important;
}

/* ─────────────────────────────────────────────
   22. LEGAL / POLICY PAGES — 따뜻한 타이포
───────────────────────────────────────────── */
.legal-page h1,
.legal-page h2,
.policy-page h1,
.policy-page h2 {
  font-family: 'EB Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}
.legal-page,
.policy-page {
  background: var(--cream);
}
.back-link {
  color: var(--rose-mauve) !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
}
.back-link:hover {
  color: var(--rose-deep) !important;
}

/* ─────────────────────────────────────────────
   23. PRODUCT IMG — 부드러운 로드 효과
───────────────────────────────────────────── */
.product-img,
.product-card img {
  transition:
    transform 0.7s var(--mood-ease),
    filter    0.5s ease;
  filter: saturate(0.92);
}
.product-card:hover .product-img,
.product-card:hover img {
  transform: scale(1.035);
  filter: saturate(1.05);
}

/* ─────────────────────────────────────────────
   24. MOBILE — 커서 관련 body 스타일 보정
───────────────────────────────────────────── */
@media (hover: none) {
  body { cursor: auto !important; }
}
@media (max-width: 767px) {
  #asso-intro .intro-logo { font-size: 28px; }
}

/* ═════════════════════════════════════════════
   25. PRODUCT CARD — 정제된 무드
═════════════════════════════════════════════ */

/* 카드 전체 배경: 크림으로 */
.product-card {
  background: var(--cream) !important;
}
.product-card-img {
  background: var(--parchment) !important;
}
.best-card,
.best-card-img {
  background: var(--cream) !important;
}

/* 뱃지: 파우더 로즈 계열로 */
.badge-new {
  background: var(--ink) !important;
  color: var(--rose-blush) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  border-radius: 0 !important;
}
.badge-sale {
  background: var(--rose-powder) !important;
  color: var(--rose-deep) !important;
  border: 1px solid rgba(176, 128, 144, 0.3) !important;
  font-family: 'Jost', sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: 0.2em !important;
  border-radius: 0 !important;
}

/* Quick add 버튼 — 로즈 무드 */
.quick-add {
  background: rgba(242, 228, 230, 0.97) !important;
  border-top: 1px solid rgba(176, 128, 144, 0.18) !important;
}
.quick-add button {
  border-color: var(--rose-mauve) !important;
  color: var(--rose-deep) !important;
  letter-spacing: 0.28em !important;
}
.quick-add button:hover {
  background: var(--rose-mauve) !important;
  color: var(--cream) !important;
}

/* 상품명: 이탤릭 세리프 유지, 컬러 정제 */
.product-name {
  color: var(--ink-soft) !important;
}
.product-card:hover .product-name {
  opacity: 0.45 !important;
}

/* 가격: 세일가 로즈 */
.product-price .sale,
.best-sale {
  color: var(--rose-deep) !important;
}

/* 스와치 */
.swatch {
  border-color: rgba(176, 128, 144, 0.2) !important;
}

/* ═════════════════════════════════════════════
   26. NAV — 로고 & 링크 디테일
═════════════════════════════════════════════ */

/* 로고: 더 우아하게 — 자간 살짝 넓히고 이탤릭 강조 */
.nav-logo a {
  font-family: 'Libre Baskerville', Georgia, serif !important;
  font-style: italic !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  transition: color 0.35s ease, opacity 0.35s ease !important;
}
.nav-logo a:hover {
  color: var(--rose-mauve) !important;
  opacity: 0.85;
}

/* nav 링크: hover 시 로즈 언더라인 슬라이드인 */
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--rose-petal);
  transition: width 0.35s var(--mood-ease);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* hero 위 투명 상태: 로고 흰색 유지하되 hover는 로즈 블러시 */
.hero > .site-header .nav-logo a:hover {
  color: var(--rose-blush) !important;
}
/* hero 위 nav 링크 언더라인 색도 밝게 */
.hero > .site-header .nav-link::after {
  background: rgba(232, 200, 204, 0.7);
}

/* ═════════════════════════════════════════════
   27. SECTION RHYTHM — 여백·분위기 전환
═════════════════════════════════════════════ */

/* BEST 섹션: 흰 배경 → 따뜻한 크림으로 */
.best-section {
  background: var(--cream) !important;
}

/* best-card: 배경 크림으로 통일 */
.best-card,
.best-card-img {
  background: var(--cream) !important;
}

/* SS26 Editorial: 더 따뜻하고 넓은 여백 */
.ss26-editorial {
  background: var(--parchment) !important;
}

/* section-divider: 로즈 틴트 라인으로 */
.section-divider {
  height: 1px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--rose-petal) 30%,
    var(--rose-petal) 70%,
    transparent 100%
  ) !important;
  opacity: 0.25 !important;
  margin: 0 !important;
}

/* Community 섹션: 크림 배경 */
.community-section {
  background: var(--cream) !important;
}

/* FAQ 구분선 정제 */
.faq-group {
  border-top-color: rgba(176, 128, 144, 0.15) !important;
}
.faq-group:last-of-type {
  border-bottom-color: rgba(176, 128, 144, 0.15) !important;
}
.faq-item {
  border-bottom-color: rgba(176, 128, 144, 0.08) !important;
}
/* FAQ 질문 텍스트 */
.faq-q span {
  font-family: 'EB Garamond', Georgia, serif !important;
  font-size: 15px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ink-soft) !important;
}
/* community-contact-btn: 로즈 포인트 */
.community-contact-btn {
  border-color: var(--rose-mauve) !important;
  color: var(--rose-mauve) !important;
  letter-spacing: 0.2em !important;
}
.community-contact-btn:hover {
  background: var(--rose-mauve) !important;
  color: var(--cream) !important;
}

/* With ASSO 섹션 */
.with-asso-section {
  background: var(--parchment) !important;
}

/* Newsletter 섹션 */
section:has(.newsletter-section) {
  background: var(--ink) !important;
  border-top: none !important;
}
.newsletter-section h2 {
  color: var(--cream) !important;
}
.newsletter-section p {
  color: rgba(232, 200, 204, 0.55) !important;
}
.newsletter-section .eyebrow {
  color: var(--rose-petal) !important;
}
.newsletter-form {
  border-color: rgba(232, 200, 204, 0.2) !important;
}
.newsletter-form input {
  color: var(--cream) !important;
}
.newsletter-form input::placeholder {
  color: rgba(232, 200, 204, 0.35) !important;
}

/* 28. FOOTER — css/footer.css 에서 관리 */

/* ═════════════════════════════════════════════
   29. NEWSLETTER 버튼 — 무드 통일
═════════════════════════════════════════════ */
.newsletter-form button {
  background: var(--rose-mauve) !important;
  color: var(--cream) !important;
  border: none !important;
  font-family: 'Jost', sans-serif !important;
  letter-spacing: 0.26em !important;
  transition: background 0.3s ease !important;
}
.newsletter-form button:hover {
  background: var(--rose-deep) !important;
}