/* ============================================================
   에코스페이 반응형 홈페이지
   Figma: 에코스페이 반응형 홈페이지 / node 38:1841
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Pretendard Variable";
  src: url("fonts/PretendardVariable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Cafe24 Shiningstar";
  src: url("fonts/Cafe24Shiningstar-v2.0.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --green: #b2cf51;
  --lime: #dbff62;
  --olive: #87a700;
  --navy: #10192d;
  --footer: #1b2537;
  --brown: #2d2510;
  --card-green: #eff5ce;
  --card-blue: #dcf3f8;
  --card-cream: #fff8e6;
  --watermark: rgba(134, 134, 134, 0.1);
  --accent: #358f27;

  --sans: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  --pretendard: "Pretendard Variable", "Noto Sans KR", sans-serif;
  --script: "Cafe24 Shiningstar", "Noto Sans KR", cursive;
  --display: "Inter", "Noto Sans KR", sans-serif;

  --wrap: 1320px;
  --gutter: 24px;
  --section-pad: 100px;
  /* 카드 최소 310 + 박스 좌우 패딩 20x2 + 화면 좌우 여백 20x2 */
  --min-page: 390px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--navy);
  background: #fff;
  /* 카드 폭을 지키기 위한 최소 폭. 이보다 좁아지면 가로 스크롤이 생긴다.
     overflow-x: hidden을 두면 잘려 나가고 스크롤도 못 하므로 쓰지 않는다 */
  min-width: var(--min-page);
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Layout primitives ---------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}

.section {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}
.section--white { background: #fff; }
.section--green { background: var(--green); }

.row {
  display: flex;
  align-items: center;
  gap: 60px 185px;
  flex-wrap: wrap;
}
.row__text { width: 480px; flex: 0 0 auto; }
.row__media { flex: 1 1 400px; min-width: 0; max-width: 655px; }

.row__title {
  margin: 20px 0;
  font-size: clamp(28px, 3.1vw, 45px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.6px;
}
.row__desc { line-height: 1.4; }

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 8px 10px;
  border-radius: 99px;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.6px;
  color: #fff;
}
.tag--brown { background: var(--brown); }
.tag--navy  { background: var(--navy); }
.tag--black { background: #000; }

/* ---------- Layered image compositions ---------- */
.stack {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
}
.stack--flip { transform: scaleX(-1); }

.layer {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: var(--w);
  aspect-ratio: var(--iar);
}
img.layer { height: auto; object-fit: cover; }

.layer--rot {
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%) rotate(var(--rot));
}

.crop { position: relative; overflow: hidden; }
.layer.crop { position: absolute; }
.crop > img {
  position: absolute;
  left: var(--il, 0);
  top: var(--it, 0);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
  max-width: none;
}



/* 섹션별 컬럼 간격(디자인 값) */
.sec-earn .row     { column-gap: 185px; }
.sec-cash .row     { column-gap: 275px; }
.sec-accrual .row  { column-gap: 275px; row-gap: 30px; }
.sec-merchant .row { column-gap: 250px; }
.sec-mobility .row { column-gap: 275px; }

/* ---------- Watermark headlines ---------- */
.watermark {
  position: absolute;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(46px, 8.2vw, 160px);
  line-height: 1;
  color: var(--watermark);
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.watermark--earn     { left: 100%;   top: 10.24%; transform: translateX(-100%); }
.watermark--cash     { left: 100%;   top: 10.24%; transform: translateX(-100%); }
.watermark--accrual  { left: 2.08%;  top: 13.88%; font-size: clamp(44px, 7.8vw, 150px); }
.watermark--payment  { left: 2.08%;  top: 69.18%; font-size: clamp(44px, 7.8vw, 150px); }
.watermark--merchant { left: 100%;   top: 10.24%; transform: translateX(-100%); }
.watermark--mobility { left: 100%;   top: 10.24%; transform: translateX(-100%); }

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 80px;
  background: #fff;
  box-shadow: 0 10px 10px rgba(33, 35, 38, 0.1);
}
.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  width: min(100% - (var(--gutter) * 2), 1180px);
  margin-inline: auto;
}

.logo { position: relative; display: block; }
.logo img { position: absolute; }
.logo--header { width: 121px; height: 40px; }
/* 로고 이미지가 % 기준으로 배치돼 있어 padding을 주면 로고가 늘어난다.
   위아래 24px 여백은 margin으로 준다 */
.logo--big { width: 188px; height: 62px; margin: 24px 0; }
.logo .logo__a { inset: 0 75.84% 0.02% 0; width: 24.16%; height: 99.98%; }
.logo .logo__b { inset: 57.53% 0 0.78% 68.36%; width: 31.64%; height: 41.69%; }
.logo .logo__c { inset: 57.97% 36.74% 0.76% 25.64%; width: 37.62%; height: 41.27%; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  min-height: 989px;
  /* 왼쪽 여백을 .wrap과 똑같이 맞춰 hero__row 전체가 아래 섹션과 같은 세로선에서 시작한다 */
  padding: 100px 0 0 max(var(--gutter), (100% - var(--wrap)) / 2);
  background: #dfeab6 url("assets/imgFrame1430107318.jpg") center / cover no-repeat;
}
.hero__row {
  display: flex;
  align-items: center;
  gap: 40px 160px;
  flex-wrap: wrap;
  width: 100%;
  max-width: min(1545px, 80.5vw);
}
.hero__copy { width: 401px; flex: 0 0 auto; color: #000; }
.hero__title {
  font-size: clamp(28px, 3.1vw, 45px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -0.6px;
}
.hero__lead { margin-top: 20px; line-height: 1.4; }

.store-row { display: flex; gap: 16px; padding: 40px 0; }
.store-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 160px;
  height: 60px;
  border-radius: 99px;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.6px;
  color: var(--navy);
  box-shadow:
    rgba(0, 0, 0, 0.07) 0px 1px 1px,
    rgba(0, 0, 0, 0.07) 0px 2px 2px,
    rgba(0, 0, 0, 0.07) 0px 4px 4px,
    rgba(0, 0, 0, 0.07) 0px 8px 8px,
    rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.store-pill img { width: 24px; height: 24px; object-fit: contain; }

.hero__art {
  position: relative;
  flex: 1 1 600px;
  min-width: 0;
  max-width: 984px;
}
.hero__scene-box {
  position: relative;
  top: 45px;
  width: 100%;
  aspect-ratio: 984 / 841;
  margin-top: 35px;
  overflow: hidden;
}
.hero__scene {
  position: absolute;
  left: -39.53%;
  top: 0;
  width: 140.55%;
  height: 123.34%;
  max-width: none;
}
.hero__badges {
  position: absolute;
  left: 15.19%;
  top: 0;
  width: 33.13%;
  aspect-ratio: 326 / 260;
animation: badgesFloat 2.5s ease-in-out infinite;
}

@keyframes badgesFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }
}



/* --- circular badges --- */
.badge { position: absolute; aspect-ratio: 139 / 134; }
.badge > * { position: absolute; }
.badge__disc-top { inset: 5.22% 0 0 0; width: 100%; height: 94.78%; }
.badge__disc-bot { inset: 0 0 5.22% 0; width: 100%; height: 94.78%; }

.badge--recycle { left: 0; width: 42.64%; top: 50%; margin-top: 27px; transform: translateY(-50%); }
.badge--leaf    { left: 57.36%; width: 42.64%; top: 50%; margin-top: -63px; transform: translateY(-50%); }

.arw { overflow: visible; }
.arw img { position: absolute; inset: -13.64% 0 0 -13.64%; width: 113.64%; height: 113.64%; }
.arw--1 { inset: 23.13% 64.39% 68.66% 27.7%; }
.arw--2 { inset: 61.19% 64.39% 30.6% 27.7%; transform: scaleY(-1); }
.arw--3 { inset: 23.13% 27.7% 68.66% 64.39%; transform: scaleX(-1); }
.arw--4 { inset: 61.19% 27.7% 30.6% 64.39%; transform: rotate(180deg); }

.ring { border: 3px solid var(--olive); }
.ring--1 { inset: 37.31% 45.32% 44.78% 45.32%; border-radius: 6.5px; }
.ring--2 { inset: 32.09% 39.57% 39.55% 39.57%; border-radius: 14.5px; }
.ring--3 { inset: 24.63% 33.81% 32.09% 33.81%; border-radius: 22.5px; }
.bar { inset: 42.54% 30.94% 48.51% 30.94%; background: #fff; }
.bar-line { inset: 47.01% 29.5% 52.99% 29.5%; }
.bar-line img { position: absolute; inset: -3px 0 0 0; width: 100%; }

.leaf-stem { inset: 54.19% 43.63% 23.88% 41.73%; border: 3px solid #000; border-radius: 4px; }
.leaf-mark { inset: 17.91% 24.12% 38.22% 23.02%; width: 52.86%; height: 43.87%; }

.hero__shadow {
  position: absolute;
  inset: 92.69% 69.94% 0 11.66%;
  width: 18.4%;
  height: auto;
}

/* ============================================================
   탄소중립포인트란?
   ============================================================ */
/* 녹색 바탕 위에 내용을 올릴 흰 박스.
   폭을 좌우 40px씩 키우고 같은 값을 안쪽 여백으로 돌려주면
   내용 영역은 기존 wrap 폭(1320px)을 그대로 유지한다 */
.sec-about .wrap {
  width: min(100% - 40px, calc(var(--wrap) + 120px));
  padding: 50px 60px;
  border-radius: 40px;
  background: #fff;
}

.about__head {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
}
.about__title {
  font-family: var(--pretendard);
  font-weight: 700;
  font-size: clamp(28px, 3.1vw, 45px);
  line-height: 1.2;
  letter-spacing: normal;
  color: #000;
}
.about__accent { color: var(--accent); }
/* 45px 기준 25px. em으로 두어야 좁은 화면에서 제목과 같이 줄어든다 */
.about__suffix { font-size: 0.556em; font-weight: 400; }
.about__text { display: flex; flex-direction: column; }
.about__body {
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.34;
  letter-spacing: normal;
  color: #000;
}
.about__body strong { color: var(--accent); }
.about__note {
  font-family: var(--pretendard);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 2.2;
  letter-spacing: normal;
  color: #939393;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}
.card {
  /* 405px에서 시작해 310px까지만 줄어든다.
     310px은 390px 휴대폰에서 가로 스크롤 없이 들어가는 최대 폭 */
  flex: 0 0 auto;
  width: 405px;
  min-width: 310px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 32px;
  border-radius: 40px;
  color: #000;
}
.card--green { background: var(--card-green); --num-bg: #cbe3b4; --num-fg: #217226; }
.card--blue  { background: var(--card-blue);  --num-bg: #bde6f5; --num-fg: #19678b; }
.card--cream { background: var(--card-cream); --num-bg: #fde8b7; --num-fg: #de8d18; }
.card__num {
  align-self: flex-start;
  padding: 5px 25px;
  border-radius: 999px;
  background: var(--num-bg);
  color: var(--num-fg);
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.6;
  letter-spacing: normal;
}
.card__title {
  font-family: var(--pretendard);
  font-weight: 600;
  font-size: clamp(26px, 2.4vw, 35px);
  line-height: 1.2;
  letter-spacing: normal;
}
.card__desc {
  margin-top: 1px;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.5;
  letter-spacing: normal;
}
.card__art {
  display: flex;
  justify-content: flex-end;
  height: 130px;
  margin-top: auto;
}
.card__art .crop { height: 100%; aspect-ratio: var(--iar); }

/* ============================================================
   GREEN MOBILITY
   ============================================================ */
.mobility__art {
  width: 100%;
  aspect-ratio: 1312 / 1199;
  object-fit: contain;
}

/* ============================================================
   POINT 03 — 적립 코인 배지
   ============================================================ */
.coin { container-type: inline-size; }
.coin > * { position: absolute; }
.coin__v1,
.coin__v2 {
  left: 50%; top: 50%;
  width: 70.71%; aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.coin__v2 { opacity: 0.5; mix-blend-mode: multiply; }
.coin__v3 { left: 50%; top: 21.54%; width: 35.31%; height: 35.31%; }
.coin__v4 { left: 28.35%; top: 28.35%; width: 45.90%; height: 45.90%; }
.coin__label {
  left: 37.66%; top: 44.10%; width: 24.87%;
  font-weight: 900;
  font-size: 7.31cqw;
  line-height: 1.4;
  letter-spacing: -0.3px;
  text-align: right;
  color: var(--green);
}

/* ============================================================
   CTA
   ============================================================ */
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 850px;
  padding: 100px 0;
  overflow: hidden;
  background: #4a4f3c;
}
.cta__bg {
  position: absolute;
  /* 1920px(디자인 폭)을 넘으면 더 키우지 않는다.
     계속 키우면 이미지가 세로로도 커져서 창 높이에 잘린다.
     위치도 그때부터는 가운데 기준으로 잡아 본문과 같이 움직인다 */
  left: max(1.77%, calc(50% - 926px));
  top: -10.4%;
  width: min(65.6%, 1259.878px);
  height: 114%;
  display: flex; align-items: center; justify-content: center;
}
.cta__bg-inner {
  position: relative;
  width: 93.77%; height: 90.28%;
  /* 배경이 비어 있는 투명 PNG라 잘라낼 필요가 없다.
     잘라내면 화면 비율에 따라 지구나 구름이 잘려 나간다 */
  overflow: visible;
  transform: rotate(-5.08deg);
}
.cta__bg-inner img {
  position: absolute;
  /* 폭만 지정하고 높이는 원본 비율(4096:2560)에서 끌어낸다.
     기준점은 디자인의 위치와 같아지도록 잡은 값 */
  width: 216.97%;
  height: auto;
  aspect-ratio: 4096 / 2560;
  left: 61.7%;
  top: 48.6%;
  transform: translate(-50%, -50%);
  max-width: none;
}
.cta__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }

.cta__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
  width: min(100% - (var(--gutter) * 2), 1130px);
  margin-inline: auto;
}

.cta__title {
  flex: 0 0 auto;
  width: 515px;
  word-break: keep-all;
  text-wrap: balance;
  font-size: clamp(28px, 3.1vw, 45px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: -0.6px;
  color: #fff;
}
.cta__line { display: block; white-space: nowrap; }
/* 마지막 줄은 오른쪽 끝에 맞춰 계단식 배치를 만든다 */
.cta__line--end { text-align: right; }
/* 손글씨체는 글자가 작고 기준선이 높아서 크기와 위치를 보정한다 */
.cta__script {
  font-family: var(--script);
  font-weight: 400;
  font-size: 1.62em;
  line-height: 1;
  color: var(--lime);
  position: relative;
  top: 0.05em;
  margin-inline: 0.04em;
}

.cta__phones {
  position: relative;
  flex: 0 0 auto;
  width: 555.95px;
  aspect-ratio: 555.95 / 711.64;
}
.cta__phone { position: absolute; display: flex; align-items: center; justify-content: center; }
.cta__phone > img {
  position: absolute;
  max-width: none;
}
.cta__phone--a {
  left: 34.95%; top: 44.13%;
  width: 58.89%; aspect-ratio: 327.388 / 596.853;
  transform: translate(-50%, -50%) rotate(-6.06deg);
  overflow: hidden;
}
.cta__phone--a > img { left: -62.92%; top: -8.13%; width: 229.7%; height: 112.49%; }
.cta__phone--b {
  left: 67.01%; top: 56.50%;
  width: 55.20%; aspect-ratio: 306.876 / 590.335;
  transform: translate(-50%, -50%) rotate(5.99deg);
  overflow: hidden;
}
.cta__phone--b > img { left: -73.18%; top: -8.7%; width: 245.44%; height: 113.92%; }

/* ============================================================
   앱 다운로드
   ============================================================ */
.download {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 540px;
  overflow: hidden;
  background-color: var(--footer);
  background-image: url("assets/download-bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 배경을 화면에 고정해 스크롤할 때 뒤 사진이 드러나는 효과.
   모바일 브라우저는 고정 배경을 제대로 못 그려서 넓은 화면에서만 켠다 */
@media (min-width: 1025px) {
  .download { background-attachment: fixed; }
}
.download__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--gutter);
}
.download__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.6px;
  text-align: center;
  color: #fff;
}
.download__brands {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.download__x { width: 30px; height: 30px; transform: scaleY(-1); }
.download__partner { width: 272px; height: 36px; object-fit: contain; }

.store-row--square { padding: 0; gap: 8px; }
.store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 180px;
  height: 60px;
  border-radius: 16px;
  background: #fff;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.6px;
  color: var(--navy);
}
.store-btn img { width: 24px; height: 24px; }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--footer);
  color: #fff;
  padding: 53px 0;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px 60px;
  flex-wrap: wrap;
  width: min(100% - (var(--gutter) * 2), 1000px);
  margin-inline: auto;
}
.footer__brand { display: flex; align-items: flex-start; gap: 60px; }
.footer__mark { width: 188px; height: 62px; margin-top: 41px; }
.footer__info { display: flex; flex-direction: column; gap: 15.5px; }
.footer__list { display: flex; flex-direction: column; gap: 6.5px; }
.footer__list li { font-size: 14px; line-height: 14px; letter-spacing: normal; }
.footer__copy { font-size: 14px; line-height: 16.8px; letter-spacing: normal; }
.footer__cs { text-align: right; }
.footer__cs p { font-size: 14px; line-height: 14px; letter-spacing: normal; }
.footer__cs-title { font-weight: 700; margin-bottom: 8px !important; }
.footer__cs p + p { margin-top: 4.8px; }

/* ============================================================
   Responsive
   ============================================================ */

/* 1440 이하: 섹션 여백 축소 */
@media (max-width: 1439px) {
  :root { --section-pad: 80px; }
  .row { gap: 48px 80px; }
  .hero__row { gap: 40px 80px; }
}

/* 1280 이하: 2단 구성을 세로로 전환 */
@media (max-width: 1279px) {
  .row,
  .hero__row { flex-direction: column; align-items: flex-start; }
  .row__text,
  .hero__copy { width: 100%; }
  /* 세로로 쌓이면 flex-basis가 '가로'가 아니라 '높이' 기준이 된다.
     그대로 두면 이미지 아래에 빈 공간이 생기므로 basis를 푼다 */
  .row__media,
  .hero__art { flex: 0 0 auto; width: 100%; max-width: 640px; align-self: center; }
  .row--media-first .row__media { order: 2; }
  .row--media-first .row__text { order: 1; }

  .hero__row { max-width: 100%; }
  .hero { min-height: 0; padding-top: 60px; }
  .hero__art { align-self: flex-end; }

  .cards { gap: 32px; }
  .about__head { margin-bottom: 40px; }

  .cta { min-height: 0; }
  /* 세로로 쌓이면 지구를 문구 뒤 배경으로 올린다.
     문구 세로 중앙이 217px, 가로는 화면 가운데에 지구가 오도록 잡은 값 */
  .cta__bg {
    left: 50%;
    top: 217px;
    height: auto;
    aspect-ratio: 1259.878 / 1039.164;
    transform: translate(-60.98%, -48.74%);
  }
  .cta__row { justify-content: center; }
  /* 폭을 글자 길이에 맞춰 줄인다.
     515px 고정이면 마지막 줄이 오른쪽 끝으로 멀리 밀려난다 */
  .cta__title { width: fit-content; max-width: 100%; }
  .cta__phones { width: min(100%, 555.95px); }

  .footer__brand { gap: 40px; }
}

/* 900 이하: 카드 1열, 워터마크 축소 */
@media (max-width: 899px) {
  :root { --section-pad: 56px; --gutter: 20px; }
  .cards { gap: 24px; }
  .hero { padding-top: 40px; }
  .hero__scene-box { margin-top: 16px; }
  .about__note { line-height: 1.8; }

  .watermark { font-size: clamp(40px, 11vw, 90px) !important; }
  .watermark--earn     { left: auto; right: 4%; top: 4%; transform: none; }
  .watermark--cash     { left: auto; right: 4%; top: 4%; transform: none; }
  .watermark--mobility { left: auto; right: 4%; top: 4%; transform: none; }
  .watermark--accrual  { left: 4%; top: 3%; }
  .watermark--payment  { left: 4%; top: auto; bottom: 3%; }
  .watermark--merchant { left: auto; right: 4%; top: 4%; transform: none; }

  .footer__inner { flex-direction: column; }
  .footer__cs { text-align: left; }
}

/* 640 이하: 모바일 */
@media (max-width: 639px) {
  :root { --section-pad: 44px; }
  body { font-size: 15px; }
  .hero { padding-top: 32px; padding-left: 0; }
  .hero__copy { padding-inline: var(--gutter); }
  .hero__art { align-self: center; }
  .hero__badges { width: 42%; left: 8%; }
  .badge--recycle { margin-top: 12px; }
  .badge--leaf { margin-top: -28px; }
  .store-row { flex-wrap: wrap; padding: 28px 0; }
  .store-pill { width: 148px; height: 54px; }

  /* 좁은 화면에서는 박스 여백을 줄여 카드에 폭을 더 내준다 */
  .sec-about .wrap { padding: 30px 20px; border-radius: 24px; }
  .card { padding: 28px 24px; border-radius: 28px; }
  .card__art { height: 104px; }

  /* 좁은 화면에서는 계단식 배치를 풀고 가운데로 모은다 */
  .cta__bg { top: 149px; }
  .cta__title {
    width: 100%;
    font-size: clamp(24px, 7.4vw, 34px);
    text-align: center;
  }
  .cta__line { display: inline; white-space: normal; }
  .cta__line--end { text-align: inherit; }
  .cta__phones { width: 100%; }

  .download__inner { padding: 0 var(--gutter); }
  .download__partner { width: min(100%, 272px); }
  .store-row--square { flex-wrap: wrap; justify-content: center; }
  .footer__brand { flex-direction: column; gap: 20px; }
  .footer__mark { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- 데스크톱: 제목은 디자인대로 줄바꿈 고정 ---------- */
@media (min-width: 1280px) {
  .hero__title, .row__title { white-space: nowrap; }
  .hero__copy { width: auto; min-width: 401px; }
  .row__text  { width: auto; min-width: 480px; }
}

/* 데스크톱 섹션 높이(디자인 850px) */
@media (min-width: 1280px) {
  .section { min-height: 850px; display: flex; flex-direction: column; justify-content: center; }
}