/* kindme landing
   시안(body.png 3600px)은 1200px 기준 3배 이미지. 모든 치수는 시안 실측 ÷ 3 이고,
   데스크톱에서는 --u(=화면폭/1200)로 곱해 어떤 폭에서도 시안 비율 그대로 보이게 한다. */
/* 영문 글꼴: Whyte Inktrap (시안 영문). 한글은 글리프가 없어 Pretendard 로 자동 대체 */
@font-face { font-family: "Whyte Inktrap"; src: url("../assets/fonts/WhyteInktrap-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte Inktrap"; src: url("../assets/fonts/WhyteInktrap-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte Inktrap"; src: url("../assets/fonts/WhyteInktrap-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte Inktrap"; src: url("../assets/fonts/WhyteInktrap-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Whyte Inktrap"; src: url("../assets/fonts/WhyteInktrap-Black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --u: min(calc(100vw / 1200), 1.6px);
  --yellow: #ffea4f;
  --butter: #fffed4;
  --cream: #fffff8;
  --orange: #ff9051;
  --red: #ff5e3a;
  --ink: #111;
  --text: #333;
  --dark: #2b2523;
  --muted: #8f8580;
  --line: 1px solid #000;
  --gutter: calc(49 * var(--u));
  --header-h: calc(43 * var(--u));
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --font-en: "Whyte Inktrap", var(--font);
}
/* 시안에서 영문으로 쓰인 곳 */
.hero__tagline, .marquee__item, .title, .quote p, .page-head h1 { font-family: var(--font-en); }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  padding-top: var(--header-h);
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, button { touch-action: manipulation; }
button { font: inherit; color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 알약 버튼 — contact / SHOP / 카카오 / 메일 공통. 호버 시 #FF9051 */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .3em;
  border: 1.5px solid #000; border-radius: 999px;
  background: #fff; font-weight: 700; white-space: nowrap; cursor: pointer;
  user-select: none; -webkit-user-select: none;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.pill--yellow { background: var(--yellow); }
.pill:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  /* 주황으로 바뀌면서 살짝 커진다 */
  .pill:hover { background: var(--orange); transform: scale(1.06); }
}
/* 누르는 순간은 살짝 작아진다(호버 규칙보다 뒤에 둬야 이김) */
.pill:active { transform: scale(0.97); }

/* ---------- 1. 내비 (항상 고정) ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--butter);
  border-bottom: var(--line);
}
.header__logo { margin-left: calc(-3 * var(--u)); }
.header__logo img { width: calc(83 * var(--u)); }
.header__nav { display: flex; align-items: center; }
.header__link { font-weight: 700; font-size: max(12px, calc(15 * var(--u))); letter-spacing: .06em; margin-right: calc(38 * var(--u)); }
.header__link + .header__link { margin-right: calc(40 * var(--u)); }
.header__buy {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(66 * var(--u)); height: calc(23 * var(--u)); min-height: 22px; min-width: 60px;
  border: var(--line); border-radius: 999px;
  background: var(--red); color: #fff; font-weight: 700; font-size: max(11px, calc(11.5 * var(--u)));
  transition: transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .header__link:hover { text-decoration: underline; text-underline-offset: 5px; }
  .header__buy:hover { transform: scale(1.06); }
}
.header__buy:active { transform: scale(0.97); }

/* ---------- 2. 히어로 ---------- */
/* 히어로 사진(2_a~e, 1800×1320) 비율 그대로 → 사진이 잘리지 않는다. 글 칸은 그 높이를 따라간다 */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: var(--line); }
.hero__slider { aspect-ratio: 1800 / 1320; }
.hero__text {
  position: relative;
  background: var(--yellow);
  border-right: var(--line);
  padding: calc(56 * var(--u)) var(--gutter) 0;
}
.hero__tagline { margin: 0; font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.05em; line-height: 1.15; }
.hero__desc { margin: calc(27 * var(--u)) 0 0; font-size: max(11px, calc(13 * var(--u))); line-height: calc(20 * var(--u)); color: var(--text); }
.hero__logo { position: absolute; left: calc(47 * var(--u)); bottom: calc(41 * var(--u)); width: calc(507 * var(--u)); }

.slider { position: relative; overflow: hidden; background: #eee; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.slider.is-dragging { cursor: grabbing; }
.slider__track { display: flex; height: 100%; will-change: transform; }
.slider__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; pointer-events: none; }
.slider__dots { position: absolute; left: 50%; bottom: calc(10 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(6 * var(--u)); }
.slider__dots button {
  width: max(8px, calc(9 * var(--u))); height: max(8px, calc(9 * var(--u))); padding: 0; border-radius: 50%;
  border: 1px solid #000; background: #fff; cursor: pointer;
  transition: background-color 200ms ease;
}
.slider__dots button.is-active { background: #000; }

/* ---------- 3. 스토리 ---------- */
.story { padding: calc(121 * var(--u)) var(--gutter) calc(109 * var(--u)); }
.story__inner { width: min(100%, calc(400 * var(--u))); margin: 0 auto; }
.story h2 { margin: 0; font-size: calc(40 * var(--u)); line-height: 1.2; letter-spacing: -.035em; font-weight: 800; white-space: nowrap; }
.story__row { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(16 * var(--u)); margin-top: calc(22 * var(--u)); }
.story p { margin: 0; font-size: max(11px, calc(13 * var(--u))); line-height: calc(20 * var(--u)); color: var(--text); }
.story__row img { width: calc(55 * var(--u)); margin-right: calc(-11 * var(--u)); flex: none; }

/* ---------- 4. 노란 띠 (왼쪽 → 오른쪽 무한) ---------- */
.marquee { overflow: hidden; height: calc(52 * var(--u)); background: var(--yellow); border-top: var(--line); border-bottom: var(--line); display: flex; align-items: center; }
.marquee__track { display: flex; width: max-content; animation: marquee-right 55s linear infinite; }
.marquee__item { display: flex; align-items: center; white-space: nowrap; font-size: calc(17.5 * var(--u)); font-weight: 300; letter-spacing: -.02em; }
.marquee__item img { width: calc(30 * var(--u)); margin: 0 calc(50 * var(--u)) 0 calc(37 * var(--u)); }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* ---------- 섹션 제목 ---------- */
.title { margin: 0; font-weight: 700; letter-spacing: 0; line-height: 1.1; }
.title--center { text-align: center; }

/* ---------- 5. 우리가 만드는 것들 ---------- */
.products { padding: calc(53 * var(--u)) 0 calc(43 * var(--u)); overflow: hidden; }
.products .title { font-weight: 800; letter-spacing: -.03em; font-size: calc(26 * var(--u)); padding: 0 var(--gutter); margin-bottom: calc(50 * var(--u)); }
.carousel { position: relative; padding: 0 var(--gutter); }
.carousel__viewport { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.carousel.is-dragging .carousel__viewport { cursor: grabbing; }
.carousel__track { display: flex; gap: calc(17 * var(--u)); will-change: transform; }
.product-card { position: relative; flex: 0 0 calc(310 * var(--u)); container-type: inline-size; }
.product-card img { width: 100%; border-radius: 2.57cqw; -webkit-user-drag: none; pointer-events: none; }
/* 테두리와 글 칸 윗선은 이미지에서 지우고 CSS 1px 로 그린다: 다른 섹션의 선과 같은 굵기로 화면 크기와 무관하게 유지. 글 칸은 카드 높이의 31.93% */
.product-card::before, .product-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border: var(--line); border-radius: 2.57cqw; pointer-events: none; }
.product-card::before { top: 0; }
.product-card::after { top: 68.07%; }
/* 시안 속 SHOP 버튼 자리(카드 933×1350 기준 x672 y1232 198×73)에 실제 버튼. 포스터 카드만 3px 왼쪽 */
.product-card .pill {
  position: absolute; left: 72.03%; top: 91.26%; width: 21.22%; height: 5.41%;
  z-index: 1; font-size: 3.75cqw; border-width: 1px; letter-spacing: -.01em;
}
.product-card .pill[href*="11293349940"] { left: 71.7%; }
.carousel__btn {
  position: absolute; top: calc(183 * var(--u)); z-index: 2;
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); min-width: 32px; min-height: 32px;
  transform: translate(-50%, -50%);
  border: 0; border-radius: 50%;
  background: rgba(255, 254, 228, .92); box-shadow: 0 1px 6px rgba(0, 0, 0, .12);
  display: grid; place-items: center; cursor: pointer;
  transition: opacity 200ms ease, transform 160ms var(--ease-out);
}
.carousel__btn svg { width: 42%; height: 42%; }
.carousel__btn:active { transform: translate(-50%, -50%) scale(0.94); }
.carousel__btn:disabled { opacity: .35; cursor: default; }
.carousel__btn--prev { left: var(--gutter); }
.carousel__btn--next { left: calc(100% - var(--gutter)); }

/* ---------- 6. EVENT ---------- */
.event { background: var(--yellow); border-top: var(--line); border-bottom: var(--line); padding: calc(41 * var(--u)) var(--gutter) calc(88 * var(--u)); }
.event .title { font-size: calc(40 * var(--u)); margin-bottom: calc(43 * var(--u)); }
/* 시안 실측: 카드 1069×861(테두리 포함, 3600px 기준), 카드 사이 49px → 16.3u */
.event__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16.3 * var(--u)); align-items: start; }
/* 카드 이미지와 호버 이미지(6_a, 6_b 1070×861)가 같은 칸을 정확히 채워 테두리·모서리가 겹친다 */
.event-card { position: relative; display: block; aspect-ratio: 1069 / 861; min-height: 0; }
.event-card img { display: block; width: 100%; }
.event-card__hover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 200ms ease; }
.event-card:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.event-card:focus-visible .event-card__hover { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .event-card:hover .event-card__hover { opacity: 1; }
}
/* coming soon 캐릭터 발·그림자는 카드 아래로 삐져나온다: 카드는 다른 카드와 같은 1069×861 로 두고, 넘친 부분(1069×70)만 따로 아래에 붙인다 */
.event-card__overflow { position: absolute; left: 0; top: 100%; width: 100%; pointer-events: none; }

/* ---------- 7. Our Values ---------- */
.values { padding: calc(89 * var(--u)) var(--gutter) calc(79 * var(--u)); }
.values .title { font-size: calc(40 * var(--u)); margin-bottom: calc(29 * var(--u)); }
.values__grid { display: grid; grid-template-columns: repeat(2, minmax(0, calc(187 * var(--u)))); justify-content: center; column-gap: calc(40 * var(--u)); row-gap: calc(26 * var(--u)); }
.value { margin: 0; text-align: center; }
.value img { width: 100%; }
.value figcaption { margin-top: calc(24 * var(--u)); font-size: max(11px, calc(13 * var(--u))); font-weight: 500; letter-spacing: -.02em; line-height: calc(20 * var(--u)); }

/* ---------- 8. Join Us ---------- */
.join { padding: 0 var(--gutter); }
.join__box {
  background: var(--yellow); border: var(--line); border-radius: calc(9 * var(--u));
  padding: calc(41 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u)); text-align: center;
}
.join .title { font-size: calc(40 * var(--u)); margin-top: calc(-2 * var(--u)); }
.join p { margin: calc(10 * var(--u)) 0 0; font-size: max(11px, calc(13 * var(--u))); line-height: calc(20 * var(--u)); color: var(--text); }
.join .pill { margin-top: calc(16 * var(--u)); width: calc(87 * var(--u)); height: calc(33 * var(--u)); min-width: 80px; min-height: 30px; font-size: max(12px, calc(13 * var(--u))); }
/* 캔 궤도: 상자 좌우 끝까지 쓰고 그 밖은 잘라, 오른쪽으로 나간 캔이 왼쪽에서 다시 들어온다. 위아래 20u 는 흔들림 여유 */
.join__cans { position: relative; aspect-ratio: 1100 / 335; margin: calc(34 * var(--u)) calc(-20 * var(--u)) 0; overflow: hidden; }
/* 위치는 캔 폭 기준이라 화면이 달라져도 비율이 유지된다. 움직임은 main.js, 아래는 시안의 첫 배치 */
.join__can { position: absolute; left: 50%; top: 50%; width: 13.79%; }
.join__can:nth-child(1) { transform: translate(-50%, -50%) translateX(-247%) scale(.534); }
.join__can:nth-child(2) { transform: translate(-50%, -50%) translateX(-145.8%) scale(.738); }
.join__can:nth-child(3) { transform: translate(-50%, -50%); }
.join__can:nth-child(4) { transform: translate(-50%, -50%) translateX(145.8%) scale(.738); }
.join__can:nth-child(5) { transform: translate(-50%, -50%) translateX(247%) scale(.534); }
.join__can img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
/* who's next 캔이 가운데에 멈춰 있을 때만 살짝 커지며 흔들린다 */
.join__can.is-shaking img { animation: can-shake 1.4s ease-in-out; }
@keyframes can-shake {
  0%, 100% { transform: scale(1) rotate(0); }
  14% { transform: scale(1.06) rotate(-3deg); }
  28% { transform: scale(1.06) rotate(3deg); }
  42% { transform: scale(1.06) rotate(-2.5deg); }
  56% { transform: scale(1.05) rotate(2deg); }
  72% { transform: scale(1.03) rotate(-1deg); }
}

/* ---------- 9. People With Us (좌 ↔ 우 무한 왕복) ---------- */
.people { padding-top: calc(88 * var(--u)); }
.people .title { font-size: calc(40 * var(--u)); margin-bottom: calc(54 * var(--u)); }
/* 10_a 격자를 그대로 재현: 13열 × 2줄, 칸 비율 966.7 : 996(선 포함). 선은 다른 섹션과 같은 1px */
.reviews {
  --rh: calc(567 * var(--u) / 2);
  --cw: calc(var(--rh) * 966.7 / 996);
  overflow: hidden; border-top: var(--line); border-bottom: var(--line);
  cursor: grab; touch-action: pan-y; /* 가로 드래그는 스크립트가, 세로 스크롤은 브라우저가 */
}
.reviews.is-dragging { cursor: grabbing; }
.reviews.is-dragging, .reviews.is-dragging * { user-select: none; -webkit-user-select: none; }
.review-photo img { -webkit-user-drag: none; }
/* 칸 크기를 정수 px 로 맞춰 1px 선이 픽셀 사이에 걸려 번지거나 굵어지지 않게 한다 */
@supports (width: round(1.5px, 1px)) {
  .reviews { --rh: round(down, calc(567 * var(--u) / 2), 1px); --cw: round(calc(var(--rh) * 966.7 / 996), 1px); }
}
/* 왕복 움직임은 main.js 가 1px 단위로 움직인다(소수점 이동으로 선이 흐려지지 않게) */
.reviews__track {
  display: grid; width: max-content;
  grid-template-columns: repeat(13, var(--cw));
  grid-template-rows: repeat(2, var(--rh));
  will-change: transform;
}
.review, .review-photo { position: relative; margin: 0; min-width: 0; overflow: hidden; border-left: var(--line); }
.reviews__track > :nth-child(-n + 13) { border-bottom: var(--line); }
.review-photo { background: var(--yellow); }
.review-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
/* 글 크기·간격은 칸 폭 기준(cqw)이라 어느 화면에서도 원본 이미지와 같은 비율로 줄바꿈된다 */
/* 칸 자신의 여백은 cqw 로 못 쓰므로 % (= 칸 폭 기준) */
.review { container-type: inline-size; background: var(--yellow); padding: 7.4% 3% 0 5%; }
.review h3 { margin: 0; font-size: 6.4cqw; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); }
.review p { margin: 0; font-size: 3.75cqw; font-weight: 500; line-height: 1.52; letter-spacing: -.02em; color: #4d4732; }
.review h3 + p { margin-top: 5.6cqw; }
.review p + p { margin-top: 1.52em; }

/* ---------- 10. 브랜드 메세지 ---------- */
/* 노란 나비가 아래 판매처 그림 위까지 내려오므로 잘리지 않게 위에 쌓는다 */
.quote { position: relative; z-index: 1; height: calc(299 * var(--u)); padding: calc(203.5 * var(--u)) var(--gutter) 0; text-align: center; }
.quote p { position: relative; z-index: 1; margin: 0 auto; max-width: calc(460 * var(--u)); font-size: calc(25.3 * var(--u)); font-weight: 500; line-height: 1.22; letter-spacing: -.01em; color: #222; }
.quote__fly { position: absolute; animation: flutter 3.6s ease-in-out infinite; }
/* 판매처 그림의 나비처럼 화면 폭(vw)에 비례시켜 넓은 화면에서도 크기를 맞춘다. 쌍 나비는 커져도 글과 겹치지 않게 아랫변을 고정 */
.quote__fly--pair { width: 6.028vw; left: calc(50% + 186.67 * var(--u)); top: calc(214.67 * var(--u) - 4.139vw); }
.quote__fly--single { width: 3.694vw; left: 20.472vw; top: calc(279 * var(--u)); animation-delay: -1.4s; }
@keyframes flutter { 50% { transform: translate(4px, -8px) rotate(-5deg); } }

/* ---------- 11. 캐릭터 판매처 ---------- */
/* 그림 높이가 소수점이면 푸터와의 경계에 뒤 배경색이 한 줄 비친다: 푸터가 1px 겹쳐 덮는다 */
.stores { position: relative; margin-bottom: -1px; }
.stores > picture, .stores > picture img { display: block; width: 100%; }
/* 초록 나비: 위치는 stores.jpg(시안 x0 y13350 3600×1108) 기준 %. 위 나비들과 박자가 겹치지 않게 시작을 늦춘다 */
.stores > .stores__fly { left: 78.972%; top: -1.986%; width: 4.361%; animation-delay: -2.4s; }
/* 보라·분홍 나비: 평소엔 가만히 있고 꽃으로 모일 때만 살랑거린다(main.js). 위치는 stores.jpg 기준 */
.stores > .stores__fly-still { position: absolute; }
.stores > .stores__fly-still--purple { left: 28.861%; top: 24.91%; width: 4.778%; }
.stores > .stores__fly-still--pink { left: 66.861%; top: 51.444%; width: 5%; }
/* 꽃으로 모이기: transform 은 살랑거림이 쓰므로 이동은 translate 속성으로 따로 준다 */
[data-fly] { pointer-events: none; transition: translate 900ms var(--ease-in-out); }
.stores > [data-fly] { z-index: 2; }
/* 화분+꽃+손을 투명 PNG 로 분리해 그림 위 같은 자리에 올린다. 위치는 stores.jpg 기준 %.
   커져도 뒤 그림의 화분을 덮으므로 빈틈이 생기지 않는다 */
.stores__pot { position: absolute; top: 38.989%; height: 43.77%; display: block; transform-origin: 50% 88%; transition: transform 280ms var(--ease-out); }
.stores__pot--naver { left: 35.361%; width: 11.222%; }
.stores__pot--coupang { left: 54.944%; width: 10.583%; }
.stores__pot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -webkit-user-drag: none; }
/* 글자·밑줄이 흰색인 층 */
.stores__pot-text { opacity: 0; transition: opacity 200ms ease; }
.stores__pot:focus-visible { outline: 3px solid #000; outline-offset: 2px; }
.stores__pot:focus-visible { transform: scale(1.05); }
.stores__pot:focus-visible .stores__pot-text { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .stores__pot:hover { transform: scale(1.05); }
  .stores__pot:hover .stores__pot-text { opacity: 1; }
}

/* ---------- 12. 푸터 ---------- */
/* 시안: 로고는 윗선에서 42u 아래. 메인은 판매처 그림 아래에 어두운 바닥(32.3u)이 이미 있어서 9.7u, 서브 페이지는 42u + 윗선 */
.footer { position: relative; background: var(--dark); color: var(--muted); padding: calc(9.7 * var(--u)) var(--gutter) calc(32.5 * var(--u)); }
.footer--page { padding-top: calc(42 * var(--u)); border-top: var(--line); }
.footer__logo { width: calc(123 * var(--u)); }
.footer__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: calc(26.3 * var(--u)); }
/* 두 칸 정렬: 신고번호가 주소 첫 글자에 맞는다. 점은 첫 줄만 보이고 둘째 줄은 자리만 차지 */
.footer__info { display: grid; grid-template-columns: max-content max-content; justify-content: start; margin: calc(-.7 * var(--u)) 0 0; font-style: normal; font-size: calc(8.2 * var(--u)); line-height: calc(11.7 * var(--u)); }
.footer__info span:nth-child(2n)::before { content: "·"; margin: 0 calc(7 * var(--u)); }
.footer__info span:nth-child(4)::before { visibility: hidden; }
.footer__info span:nth-child(5) { grid-column: 1 / -1; }
/* SNS 4개는 '푸터 로고.png'(1278×275) 를 항목별로 잘라 배치. 시안: 왼쪽 열은 11u 안쪽, 두 줄 간격 21u, 오른쪽 끝은 그대로 */
.footer__social { --sns-row2: calc(21 * var(--u)); --sns-left: calc(11 * var(--u)); position: relative; flex: none; margin-top: calc(-1 * var(--u)); width: calc(201.8 * var(--u)); height: calc(34.1 * var(--u)); }
.footer__sns { position: absolute; display: block; height: calc(13.1 * var(--u)); transition: opacity 160ms ease; }
.footer__sns img { display: block; width: 100%; height: 100%; }
.footer__sns--instagram { left: var(--sns-left); top: 0; width: calc(556 / 1278 * 100%); }
.footer__sns--threads { left: calc(823 / 1278 * 100%); top: 0; width: calc(452 / 1278 * 100%); }
.footer__sns--blog { left: var(--sns-left); top: var(--sns-row2); width: calc(583 / 1278 * 100%); }
.footer__sns--kakao { left: calc(817 / 1278 * 100%); top: var(--sns-row2); width: calc(379 / 1278 * 100%); }
.footer__sns:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .footer__sns:hover { opacity: .7; }
}

/* ---------- 13. FAQ / 14. CONTACT ---------- */
.page-head { padding: calc(54 * var(--u)) var(--gutter) 0; }
.page-head h1 { margin: 0; font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: 0; line-height: 1.21; }
.faq { margin-top: calc(31 * var(--u)); background: var(--butter); border-top: var(--line); }
/* 시안: 칸 높이 150u. 답이 여러 줄이면 둘째 줄부터 "A." 다음에 맞춘다 */
.faq__item { min-height: calc(150 * var(--u)); border-bottom: var(--line); padding: calc(26 * var(--u)) var(--gutter) calc(19 * var(--u)); }
.faq__item:last-child { min-height: calc(149 * var(--u)); border-bottom: 0; }
.faq__item h2 { margin: 0; font-size: max(14px, calc(16 * var(--u))); font-weight: 700; letter-spacing: -.02em; }
.faq__item p { margin: calc(13 * var(--u)) 0 0; padding-left: 1.3em; text-indent: -1.3em; font-size: max(12px, calc(13.5 * var(--u))); line-height: max(20px, calc(24 * var(--u))); color: var(--text); }

/* 시안: 푸터가 603u 에서 시작 → 헤더 43 + 제목 영역(54 + 48) + 문단 위 여백(14, 섹션 밖으로 겹침) 을 뺀 444u */
.contact { position: relative; min-height: calc(493 * var(--u)); padding: 0 var(--gutter) calc(60 * var(--u)); }
.contact p { margin: calc(12 * var(--u)) 0 0; font-size: max(12px, calc(14 * var(--u))); line-height: calc(24 * var(--u)); color: var(--text); }
.contact__actions { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)) calc(14 * var(--u)); margin-top: calc(43 * var(--u)); }
.contact__actions .pill { height: calc(33 * var(--u)); min-height: 32px; padding: 0 calc(14 * var(--u)); font-size: max(13px, calc(14 * var(--u))); }
.contact__art { position: absolute; right: calc(46.3 * var(--u)); top: calc(70 * var(--u)); width: calc(347 * var(--u)); }

/* 메일 복사 토스트 */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60;
  padding: 10px 18px; border-radius: 999px;
  background: var(--dark); color: #fff; font-size: 14px; font-weight: 600;
  transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); transition-duration: 220ms; transition-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .marquee__track, .quote__fly, .join__can.is-shaking img { animation: none; }
  .stores__pot { transition: none; }
  .slider__track { transition: none !important; }
}

/* ---------- 태블릿 · 모바일: 1024px 미만은 1u = 1px 로 고정하고 쌓는다 ---------- */
@media (max-width: 1023px) {
  :root { --u: 1px; --gutter: 20px; --header-h: 52px; }
  .header__logo img { width: 92px; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero__slider { order: -1; border-bottom: var(--line); }
  .hero__text { border-right: 0; padding: 40px var(--gutter) 36px; }
  .hero__logo { position: static; width: min(100%, 507px); margin: 48px 0 0 -4px; }
  .story { padding: 96px var(--gutter); }
  .story h2 { font-size: 30px; }
  .story__row img { width: 41px; margin-right: 0; }
  .product-card { flex-basis: min(310px, 72vw); }
  .event__grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; gap: 20px; }
  .values__grid { column-gap: 16px; }
  /* 좁은 화면은 캔을 키워 3개만 보이게 하고 나머지는 양옆으로 돌아 들어온다 */
  .join__cans { aspect-ratio: 100 / 54; }
  .join__can { width: 24%; }
  .reviews { --rh: 190px; --cw: 184px; }
  .quote { height: auto; padding: 140px var(--gutter) 56px; }
  .quote__fly--pair { left: auto; right: 12px; top: 56px; width: 6.03vw; }
  /* 나비는 모두 화면 폭 비율로(시안 기준) */
  .quote__fly--single { left: 16px; top: auto; bottom: 8px; width: 3.69vw; }
  /* 화분이 작아져도 손가락으로 누르기 쉽게 누르는 영역만 넓힌다 */
  .stores__pot::after { content: ""; position: absolute; inset: -14px; }
  .faq__item { min-height: 0; }
  .footer { padding-top: 24px; padding-bottom: 32px; }
  .footer--page { padding-top: 40px; }
  /* 시안의 8.2u 는 폰에서 읽기 어려워 키운다 */
  .footer__info { margin-top: 0; font-size: 12px; line-height: 20px; }
  .footer__social { --sns-left: 0px; }
  .footer__row { flex-direction: column; align-items: flex-start; }
  .contact { min-height: 0; }
  .contact__art { position: static; width: min(70%, 300px); margin: 48px 0 0 auto; }
}
@media (max-width: 560px) {
  .header__link { font-size: 13px; margin-right: 14px; }
  .header__link + .header__link { margin-right: 14px; }
  .hero__desc br, .quote p br { display: none; }
  /* 마지막 줄에 한 단어만 남지 않게 줄 길이를 고르게, 단어 중간에서 끊지 않게 */
  .hero__desc { word-break: keep-all; text-wrap: balance; }
  /* 폰 Join Us: 글 2줄 유지 */
  .join__box { padding: 34px 16px 32px; }
  .join p { margin-top: 20px; font-size: 11px; line-height: 17px; }
  .join .pill { margin-top: 32px; }
  .join__cans { margin: 32px -16px 0; }
  /* 폰 판매처: 캐릭터·화분·나비·덤불을 모두 2.6배로. 위치는 stores-m(시안 x1124 y13520 1385×938, 덤불은 화분 뒤로 옮김) 기준 % */
  .quote__fly--pair { right: 35px; top: 89px; width: 15.67vw; }
  .quote__fly--single { left: 17.6vw; top: 250px; bottom: auto; width: 9.6vw; }
  /* 나비가 살랑거려도 화면이 옆으로 밀리지 않게(위아래는 그대로 보임) */
  .stores { overflow-x: clip; }
  .stores > .stores__fly { left: 78.35%; top: -6.8%; width: 11.34%; }
  .stores > .stores__fly-still--purple { left: 6.5%; top: 6.9%; width: 12.42%; }
  .stores > .stores__fly-still--pink { left: 86.8%; top: 31.4%; width: 13%; }
  .stores__pot { top: 27.93%; height: 51.7%; }
  .stores__pot--naver { left: 10.76%; width: 29.17%; }
  .stores__pot--coupang { left: 61.66%; width: 27.51%; }
  /* 폰 스토리: 글 3줄을 유지하고 오른쪽 아래에 스마일. 제목 폭에 맞춰 왼쪽 정렬 */
  .story { padding: 125px var(--gutter) 142px; }
  .story__inner { width: min(100%, 305px); margin: 0; }
  .story h2 { line-height: 35px; }
  .story__row { gap: 8px; margin-top: 19px; }
  .story p { font-size: 10px; line-height: 17px; white-space: nowrap; }
  .story__row img { width: 36px; }
  .footer__info { display: block; }
  .footer__info span { display: block; }
  .footer__info span:nth-child(2n)::before { content: none; }
}