/* ── 말랑떡곰 디자인 토큰 ─────────────────────────
   쌀떡 크림 / 살구 / 팥 / 쑥 — 떡의 물성에서 가져온 팔레트 */
:root {
  --cream:   #FDF9F0;  /* 쌀떡 */
  --cream-2: #F7EEDF;  /* 콩고물 */
  --apricot: #F2A47E;  /* 살구 */
  --apricot-deep: #E4835A;  /* 도형·밑줄·그림자 등 장식 전용 — 텍스트에 쓰지 말 것 */
  --apricot-text: #A54D28; /* 텍스트 전용 진살구 — 흰 5.7:1, 콩고물 4.9:1 (WCAG AA) */
  --bean:    #4A342A;  /* 팥 — 본문 텍스트 */
  --mugwort: #9DB89A;  /* 쑥 — 보조 액센트 */
  --white:   #FFFFFF;
  /* 비정형 떡 라운드 — 스케일·코너 순서를 돌려가며 쓰는 3종 변주 */
  --squish-a: 30px 34px 28px 32px / 32px 28px 34px 30px;
  --squish-b: 26px 32px 34px 28px / 30px 34px 26px 32px;
  --squish-c: 34px 26px 30px 28px / 28px 32px 30px 34px;
  --squish-sm: 18px 22px 20px 24px / 22px 18px 24px 20px;
  --font-display: 'Jua', sans-serif;
  --font-body: 'Pretendard', sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* sticky 헤더에 앵커 타깃이 가리지 않게 — --header-h는 script.js가 실측 세팅 */
[id] { scroll-margin-top: calc(var(--header-h, 110px) + 16px); }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--bean);
  line-height: 1.65;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

/* ── 헤더: 로고 + 검색 + 문의 / 카테고리 바 ── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--bean) 8%, transparent);
  transition: box-shadow .3s ease;
}
.site-header.scrolled {
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(74, 52, 42, .06);
}
.header-main {
  display: flex; align-items: center; gap: clamp(12px, 3vw, 32px);
  padding: 12px clamp(20px, 5vw, 56px) 10px;
  max-width: 1180px; margin: 0 auto;
}
.logo {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--font-display); font-size: 1.35rem;
  color: var(--bean); text-decoration: none;
}
/* 스퀴시는 브랜드 시그니처 — 로고와 primary 버튼에만 */
.logo-bear { width: 34px; height: 34px; transition: transform .35s var(--spring); }
.logo:hover .logo-bear { transform: scale(1.12, .92); }
.nav-cta {
  flex-shrink: 0;
  background: var(--bean); color: var(--cream); text-decoration: none;
  font-size: .92rem; font-weight: 600;
  padding: 8px 20px; border-radius: 12px;
  transition: background .2s;
}
.nav-cta:hover { background: var(--apricot-deep); }
.cat-nav {
  display: flex; gap: clamp(2px, 1vw, 8px); align-items: center;
  flex: 1; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav a {
  color: var(--bean); text-decoration: none;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  padding: 6px 14px; border-radius: 10px;
  transition: background .2s, color .2s;
}
.cat-nav a:hover { background: var(--cream-2); }
.cat-nav a.cat-on { background: var(--bean); color: var(--cream); }

/* ── 히어로: 풀블리드 영상 배경 + 좌하단 텍스트 (tailark식 라운드 프레임) ── */
.hero {
  position: relative;
  margin: 10px clamp(10px, 1.2vw, 16px) 0;
  border-radius: clamp(1.75rem, 4vw, 3rem);
  overflow: hidden;
  min-height: clamp(520px, 82vh, 780px);
  display: flex; align-items: flex-end;
  text-align: left;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 50%; /* 곰을 오른쪽으로 밀어 좌측 텍스트 공간 확보 */
}
.hero-fallback { position: absolute; inset: 0; }
.hero-fallback[hidden] { display: none; }
.bears-svg { width: 100%; height: 100%; display: block; background: var(--cream); }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(253, 249, 240, .94) 0%, rgba(253, 249, 240, .6) 34%, rgba(253, 249, 240, 0) 62%),
    linear-gradient(to top, rgba(253, 249, 240, .88) 0%, rgba(253, 249, 240, 0) 46%);
}
.hero-content {
  position: relative;
  max-width: 600px;
  padding: clamp(80px, 12vh, 140px) clamp(24px, 5vw, 64px) clamp(36px, 7vh, 72px);
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 600; letter-spacing: .02em;
  color: var(--bean);
  border: 1.5px solid color-mix(in srgb, var(--bean) 15%, transparent);
  background: color-mix(in srgb, var(--white) 60%, transparent);
  border-radius: 999px; padding: 6px 16px;
  margin-bottom: 22px;
}
.badge-bear { width: 18px; height: 18px; flex-shrink: 0; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.8rem);
  line-height: 1.25; font-weight: 400;
}
.hero h1 em {
  font-style: normal; color: var(--apricot-text); /* 대형 텍스트도 크림 배경 3:1 미달이던 #E4835A 대체 */
  display: inline-block;
  animation: squish-word 3.5s ease-in-out infinite;
}
@keyframes squish-word {
  0%, 78%, 100% { transform: scale(1); }
  85% { transform: scale(1.08, .9); }
  92% { transform: scale(.96, 1.05); }
}
.hero-sub {
  margin: 16px 0 0; max-width: 30em;
  font-size: clamp(.98rem, 2vw, 1.1rem); color: color-mix(in srgb, var(--bean) 82%, transparent);
}
.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero .hero-actions { justify-content: flex-start; margin-top: 28px; }

/* 스태거 페이드업 (뱃지 0s → h1 .1s → 서브 .2s → CTA .3s → 스테이지 .45s) */
.hero-enter {
  opacity: 0; transform: translateY(26px);
  animation: hero-up .8s var(--spring) var(--d, 0s) both;
}
@keyframes hero-up { to { opacity: 1; transform: none; } }

/* 곰 세 마리 강강술래: 링은 정회전, 곰은 역회전으로 늘 똑바로 */
.ring { transform-origin: 400px 245px; animation: orbit 26s linear infinite; }
.bear-counter { transform-box: fill-box; transform-origin: center; animation: orbit 26s linear infinite reverse; }
.bear-bob { animation: bob 2.2s ease-in-out infinite; }
.arm { fill: none; stroke: var(--apricot-deep); stroke-width: 10; stroke-linecap: round; }
.steam { animation: steam-fade 4.5s ease-in-out infinite; }
.st2 { animation-delay: 2.2s; }
@keyframes orbit { to { transform: rotate(1turn); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes steam-fade {
  0%, 100% { opacity: .15; transform: translateY(4px); }
  50%      { opacity: .5;  transform: translateY(-6px); }
}

/* ── 불편함 → 해결: 피처형 자동 순환 (ayushmxxn FeatureSteps 이식) ── */
.section.moments { padding-top: clamp(56px, 9vh, 88px); }
.feature-wrap {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.feature-item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 18px 6px;
  cursor: pointer;
  opacity: .35;
  transition: opacity .5s ease;
}
.feature-item.on { opacity: 1; }
.feature-item:focus-visible { outline: 3px solid var(--apricot-deep); outline-offset: 3px; border-radius: 12px; }
.feature-badge {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--bean) 22%, transparent);
  background: var(--cream-2);
  display: grid; place-items: center;
  transition: background .4s, border-color .4s, transform .4s var(--spring);
}
.feature-item.on .feature-badge {
  background: var(--apricot); border-color: var(--apricot-deep);
  transform: scale(1.1);
}
.paw { width: 22px; height: 22px; fill: color-mix(in srgb, var(--bean) 45%, transparent); transition: fill .4s; }
.feature-item.on .paw { fill: var(--bean); }
.feature-text h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 6px; }
.feature-text p { font-size: .95rem; color: color-mix(in srgb, var(--bean) 78%, transparent); }
.feature-link {
  display: inline-block; margin-top: 8px;
  font-weight: 700; font-size: .92rem; color: var(--apricot-text);
  text-decoration: none;
}
.feature-link:hover { text-decoration: underline; }
.feature-visual {
  border-radius: var(--squish-a);
  overflow: hidden; position: relative;
  aspect-ratio: 4 / 3;
  box-shadow: 0 18px 44px -18px rgba(74, 52, 42, .28);
}
.feature-visual img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .45s ease, transform .45s ease;
}
.feature-visual img.swap { opacity: 0; transform: translateY(26px); }
.feature-visual::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--cream) 50%, transparent), transparent 38%);
  pointer-events: none;
}
@media (max-width: 860px) {
  .feature-wrap { grid-template-columns: 1fr; }
  .feature-visual { order: -1; max-width: 500px; }
}

/* ── 이용자 후기: 수직 마퀴 컬럼 (efferd testimonials-columns 이식) ── */
.voices-wrap {
  display: flex; justify-content: center; gap: 24px;
  max-height: 600px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 22%, black 78%, transparent);
}
.voice-col { width: min(320px, 100%); }
.voice-track {
  display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px;
  animation: voices-scroll var(--dur, 28s) linear infinite;
  will-change: transform;
}
.voices-wrap:hover .voice-track { animation-play-state: paused; }
@keyframes voices-scroll { to { transform: translateY(-50%); } }
.voice {
  background: var(--white);
  border-radius: var(--squish-sm);
  padding: 24px 22px;
  box-shadow: 0 2px 14px rgba(74, 52, 42, .07);
}
.voice blockquote { font-size: .93rem; line-height: 1.7; }
.voice figcaption { margin-top: 12px; font-size: .8rem; font-weight: 600; color: var(--apricot-text); }
@media (max-width: 1023px) { .vc-3 { display: none; } }
@media (max-width: 767px) { .vc-2 { display: none; } }
/* ── 버튼 ── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: .98rem;
  padding: 13px 28px; border: none; border-radius: 14px;
  transition: background .2s, color .2s, box-shadow .2s, transform .3s var(--spring);
}
.btn:focus-visible { outline: 3px solid var(--apricot-deep); outline-offset: 3px; }
.btn-primary {
  background: var(--apricot); color: var(--bean);
  box-shadow: 0 4px 0 var(--apricot-deep);
}
/* 스퀴시는 primary에만 */
.btn-primary:hover { background: var(--apricot-deep); color: var(--white); box-shadow: 0 2px 0 var(--bean); transform: scale(1.06, .94); }
.btn-primary:active { transform: scale(.94, 1.04); }
.btn-ghost {
  background: transparent; color: var(--bean);
  border: 2px solid var(--bean); padding: 11px 26px;
}
.btn-ghost:hover { background: var(--bean); color: var(--cream); }
.btn-soon { background: var(--cream-2); color: color-mix(in srgb, var(--bean) 55%, transparent); cursor: default; }
.btn-sm { padding: 9px 18px; font-size: .88rem; border-radius: 10px; }
.btn-ghost.btn-sm { padding: 7px 16px; }

/* ── 섹션 공통 ── */
.section { padding: clamp(56px, 9vh, 96px) clamp(20px, 6vw, 72px); max-width: 1180px; margin: 0 auto; }
.section-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 4vw, 2.3rem); text-align: center;
}
.section-sub {
  text-align: center; margin: 10px auto 42px; max-width: 36em;
  color: color-mix(in srgb, var(--bean) 72%, transparent);
}

/* ── 상품: 콩고물색 풀블리드 밴드 + 3묶음 그리드 ── */
.band { background: var(--cream-2); }

.bundle-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: stretch;
}
.card {
  background: var(--white);
  border-radius: var(--squish-a);
  padding: 30px 28px 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  box-shadow: 0 2px 14px rgba(74, 52, 42, .06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(74, 52, 42, .1);
}
.bundle:nth-child(1) { border-radius: var(--squish-a); }
.bundle:nth-child(2) { border-radius: var(--squish-b); }
.bundle:nth-child(3) { border-radius: var(--squish-c); }

/* 묶음 비주얼: 단색 배경 + 곰 일러스트 SVG */
.bundle-art {
  width: 100%; aspect-ratio: 16 / 9;
  display: grid; place-items: center;
  padding: 8px;
  border-radius: 20px 24px 22px 18px / 22px 18px 24px 20px;
  margin-bottom: 6px;
}
.bundle-art svg { width: 100%; height: 100%; }
.art-photo  { background: #FBE3D4; }
.art-saju   { background: #E3E4F0; }
.art-magnet { background: #FCEFD8; }

.tag {
  font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  color: var(--apricot-text);
  background: color-mix(in srgb, var(--apricot) 18%, transparent);
  padding: 4px 12px; border-radius: 8px;
}
.tag-mini {
  font-size: .62rem; padding: 2px 7px; border-radius: 6px;
  background: color-mix(in srgb, var(--mugwort) 32%, transparent);
  color: var(--bean); letter-spacing: .04em;
  vertical-align: middle;
}
.bundle-name {
  font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3vw, 1.6rem); line-height: 1.35;
}
.bundle-copy {
  font-size: .93rem;
  color: color-mix(in srgb, var(--bean) 75%, transparent);
}
.bundle-items { list-style: none; margin-top: auto; width: 100%; }
.bundle-item {
  padding: 16px 0 4px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
.bundle-item + .bundle-item {
  border-top: 1px dashed color-mix(in srgb, var(--bean) 14%, transparent);
  margin-top: 10px; padding-top: 18px;
}
.item-name { font-weight: 700; font-size: 1.15rem; line-height: 1.4; }
.item-desc { font-size: .93rem; color: color-mix(in srgb, var(--bean) 72%, transparent); }
.price { font-weight: 700; font-size: 1.02rem; }
.price-free { color: var(--apricot-text); }
.price.soon { color: color-mix(in srgb, var(--bean) 50%, transparent); font-weight: 500; }

/* 다음 떡시루: 카드가 아니라 낮은 스트립 */
.bundle-next {
  grid-column: 1 / -1;
  display: flex; flex-direction: row; align-items: center; gap: 24px;
  background: var(--cream);
  border: 1.5px dashed color-mix(in srgb, var(--bean) 18%, transparent);
  border-radius: var(--squish-sm);
  box-shadow: none;
  padding: 20px 26px;
  flex-wrap: wrap;
}
.bundle-next:hover { transform: none; box-shadow: none; }
.strip-art { width: 76px; flex-shrink: 0; }
.strip-art svg { width: 100%; height: auto; display: block; }
.strip-title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin-bottom: 8px; }
.strip-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.strip-chips li {
  font-size: .82rem; font-weight: 600;
  background: var(--cream-2);
  color: color-mix(in srgb, var(--bean) 78%, transparent);
  padding: 5px 12px; border-radius: 8px;
}

/* ── 검색 결과 없음 ── */
.grid-empty {
  margin-top: 34px; text-align: center;
  font-size: .95rem; color: color-mix(in srgb, var(--bean) 65%, transparent);
}

/* ── 브랜드 이야기: 좌측 텍스트 + 우측 일러스트 2단 ── */
.story-grid {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  margin-bottom: 52px;
}
.story .section-title { text-align: left; }
.story-intro {
  margin-top: 18px;
  font-size: clamp(.98rem, 2vw, 1.05rem); line-height: 1.85;
  color: color-mix(in srgb, var(--bean) 82%, transparent);
}
.story-intro + .story-intro { margin-top: 14px; }
.story-art svg { width: 100%; height: auto; display: block; }
.mission {
  font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.2rem, 3.2vw, 1.65rem); line-height: 1.65;
  margin: 32px 0 0;
  color: var(--bean);
}
.mission::before {
  content: ""; display: block;
  width: 56px; height: 5px; margin: 0 0 18px;
  background: var(--apricot); border-radius: 999px;
}
.principles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px; text-align: left;
}
.principle {
  background: var(--white);
  padding: 26px 24px;
}
.principle:nth-child(3n+1) { border-radius: var(--squish-sm); }
.principle:nth-child(3n+2) { border-radius: 22px 18px 24px 20px / 18px 24px 20px 26px; }
.principle:nth-child(3n)   { border-radius: 20px 24px 18px 22px / 24px 20px 26px 18px; }
.principle h4 { font-weight: 700; font-size: 1.05rem; line-height: 1.45; margin-bottom: 8px; color: var(--apricot-text); }
.principle p { font-size: .93rem; color: color-mix(in srgb, var(--bean) 78%, transparent); }

/* ── 문의 ── */
.contact { text-align: center; }

/* ── 푸터 ── */
.site-footer {
  background: var(--bean); color: color-mix(in srgb, var(--cream) 78%, transparent);
  text-align: center; padding: 44px 20px 52px;
  font-size: .82rem; line-height: 1.9;
}
.footer-brand {
  font-weight: 700; letter-spacing: .02em;
  font-size: 1.1rem; color: var(--cream);
  margin-bottom: 14px;
}
.footer-brand span { font-size: .8rem; opacity: .7; font-weight: 400; }
.footer-fine { margin-top: 14px; font-size: .76rem; opacity: .75; }

/* ── 준비 중 토스트 ── */
#toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  background: var(--bean); color: var(--cream);
  padding: 12px 22px; border-radius: 14px;
  font-size: .92rem; z-index: 100;
  max-width: min(90vw, 520px); text-align: center;
  box-shadow: 0 6px 18px rgba(74, 52, 42, .25);
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* ── 스크롤 리빌 (형제 인덱스 스태거) ── */
.reveal { opacity: 0; }
.reveal.in {
  animation: rise .6s var(--spring) calc(var(--i, 0) * 70ms) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ── 모션 최소화 존중 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal, .reveal.in { opacity: 1; transform: none; }
  .hero-enter { opacity: 1; transform: none; }
}

/* ── 반응형 ── */
@media (max-width: 960px) {
  .bundle-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-art { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .header-main { flex-wrap: wrap; gap: 8px 10px; padding-bottom: 8px; }
  .logo { order: 1; }
  .nav-cta { order: 2; margin-left: auto; }
  .cat-nav { order: 3; flex-basis: 100%; }
  /* ── 모바일 히어로: 오버레이 → 세로 스택 (영상 위 / 크림 배경 텍스트 아래·중앙정렬) ── */
  .hero {
    /* 데스크톱 오버레이 규칙 무력화: min-height·align-items·overflow·radius·text-align 해제 */
    min-height: auto;
    margin: 8px 8px 0;
    padding: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    border-radius: 0; /* 라운드는 영상·크림 각각에 부여 */
  }
  /* 영상·폴백을 흐름 안(static)으로 되돌려 16:9 프레임 안에 곰 세 가족 전체 노출 */
  .hero-video,
  .hero-fallback {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center; /* 오버레이 크롭용 62%/42% 무의미화 */
    border-radius: var(--squish-a);
    overflow: hidden;
    margin: 0; /* .hero 좌우 margin(8px)이 이미 프레임 여백 역할 */
  }
  .bears-svg { border-radius: var(--squish-a); }
  .hero-scrim { display: none; } /* 텍스트가 영상 위가 아니므로 스크림 숨김 */
  .hero-content {
    max-width: none;
    padding: 28px 22px 8px;
    text-align: center;
  }
  /* 데스크톱 `.hero .hero-actions{justify-content:flex-start}`(특이성 0,2,0)를
     동일 특이성 + 미디어쿼리 후순위로 확실히 덮음 */
  .hero .hero-actions { justify-content: center; }
  .card { padding: 24px 22px 26px; }
  .bundle-next { flex-direction: column; align-items: flex-start; padding: 20px 22px; }
  .hero-sub br { display: none; }
}