/* Figma 3D9bfmAtgPllPtglc9XczT 실측 토큰. 기존 benefit/assets/oy.css 토큰과 이름을 맞췄다. */
:root {
  --page-w: 480px;
  --ink: #222222;
  --ink-strong: #000000;
  --ink-neutral: #3a3a3a;
  --ink-alt: #666666;
  --line: #e2e2e2;
  --fill: #f5f5f5;
  --fill-strong: #e9e9e9;
  --fill-blue: #f2f5f6;
  --purple: #6c1be6;
  --purple-50: #f0e8fd;
  --green: #82dc28;
  --green-ink: #009632;
  --green-deep: #0d542b;
  --mint: #e6f8d3;
  --olive: #edf1cb;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--fill);
  color: var(--ink);
  /* 판정 필요: Figma는 Noto Sans KR. 외부 요청 0건 조건 때문에 웹폰트를 싣지 않고
     현행 oy.css:26과 같은 폴백 스택을 쓴다. */
  font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Segoe UI', Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  /* 롱프레스 저장·복사 콜아웃 차단. img 한정 — 본문 텍스트는 선택 가능해야 한다
     (복사 실패 시 "코드를 직접 선택해 복사" 폴백이 oy.js copyFail 카피에 있다).
     iOS는 touch-callout으로 막히고, Android Chrome은 oy.js의 contextmenu 차단이 받는다. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
h2,
p {
  margin: 0;
}

/* 모바일 1소스 디자인 — 데스크톱 폭에선 늘리지 않고 모바일 폭으로 가운데 고정.
   480px = 현행 최대 모바일 뷰포트(대형 폰 430~440) 위로 잡은 상한이라 실제 폰에서는
   항상 100%로 뷰포트를 꽉 채운다. 바깥 여백은 body의 --fill이 받는다. */
.page {
  max-width: var(--page-w);
  margin-inline: auto;
  background: #fff;
}

/* ── 히어로 ─────────────────────────────────────────── */
.hero {
  position: relative;
}
.hero-img {
  width: 100%;
  height: auto;
  /* 이미지 하단 4행(원본 1116~1119)이 탭바 배경(#222)보다 밝게 baked돼 경계에 얇은 선처럼
     보인다. 이미지 5장을 다시 export하는 대신 sticky 탭바가 그만큼 덮게 끌어올린다.
     3px = 원본 4행 × 최대 축소비(데스크톱 560/780). */
  margin-bottom: -3px;
}
.lang {
  position: absolute;
  top: 16px;
  left: 16px;
  /* 탭바(z-index 20)보다 위 — 펼친 목록이 탭바에 가리지 않게 */
  z-index: 30;
  /* Figma 정본: 닫힘/열림이 한 박스. 열리면 아래로 늘어난다(별도 팝업 아님). */
  display: flex;
  flex-direction: column;
  /* 폭은 고정하지 않고 내용에 맞춘다 — 닫힘은 현재 라벨, 열림은 목록 최장 라벨 기준.
     max-content 없이는 폭이 버튼만 보고 잡혀 열었을 때 긴 항목(简体中文)이 박스를 넘친다.
     Figma 정본 닫힘 박스 80x40(테두리 포함) = padding 10/14 + 행 20 - 테두리 2. */
  width: max-content;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid var(--ink-strong);
  border-radius: 20px;
}
.lang-btn,
.lang-opt {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  /* Figma 텍스트 행은 cap-trim 높이 20 (line-height 1.5의 24가 아니다) */
  line-height: 20px;
  letter-spacing: -0.32px;
  white-space: nowrap;
  cursor: pointer;
}
.lang-btn {
  display: flex;
  align-items: center;
  /* 캐럿은 박스 오른쪽 끝에 붙는다 — Figma 정본은 라벨 바로 뒤(gap 0) */
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
}
.lang-btn img {
  width: 20px;
  height: 20px;
}
.lang-menu {
  display: flex;
  flex-direction: column;
  /* 행 사이 20px 는 gap 이 아니라 각 항목의 상하 padding 10 이 만든다 → 빈틈 없이 전부 클릭 영역.
     목록 위 10 + 첫 항목 padding 10 = 버튼과 20 간격, 마지막 항목 padding 10 은 음수 마진으로 상쇄. */
  margin: 0 0 -10px;
  padding: 10px 0 0;
  list-style: none;
}
.lang-menu[hidden] {
  display: none;
}
.lang-opt {
  padding: 10px 0;
}
.lang-opt:focus-visible {
  outline: 2px solid var(--ink-strong);
  outline-offset: 2px;
}

/* ── 탭바 ───────────────────────────────────────────── */
.tabs {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  background: var(--ink);
}
.tab {
  position: relative;
  flex: 1;
  min-height: 60px;
  /* Figma 정본 탭 높이 60 = 12 + 2줄(36.4) + 12. 텍스트 노드 h=28은 cap-trim 값. */
  padding: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.28px;
  text-align: center;
}
.tab + .tab::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 20px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.3);
}
.tab.is-active {
  color: var(--green);
  font-weight: 700;
}
.tab.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 66px;
  height: 4px;
  transform: translateX(-50%);
  background: var(--green);
}

/* ── 섹션 공통 ──────────────────────────────────────── */
.sec {
  padding: 80px 16px 0;
}
/* 혜택1은 하단 여백 0(다음 섹션의 상단 80이 간격을 만든다), 혜택2만 68 —
   Figma 정본 12304:55181 h=811.875 / 12770:14596 h=1867.875 실측. */
#sec-global {
  padding-bottom: 68px;
}
/* ponytail: 콘텐츠 폭 상한은 .page(데스크톱 560px)가 잡는다.
   여기선 중앙 정렬만 — 모바일에서 뷰포트에 맞춰 늘어나야 한다. */
.sec > * {
  margin-left: auto;
  margin-right: auto;
}
.badge {
  width: max-content;
  padding: 12px 14px;
  background: var(--green);
  border: 1px solid var(--ink);
  border-radius: 500px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.32px;
}
.copy {
  margin-top: 32px;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.44px;
  text-align: center;
}
.copy b {
  font-weight: 700;
}

.thumb {
  margin-top: 40px;
  width: calc(100% - 8px);
  aspect-ratio: 16 / 9;
  border-radius: 20px;
  overflow: hidden;
}
.thumb-mint {
  background: var(--mint);
}
.thumb-olive {
  background: var(--olive);
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bullets {
  margin-top: 48px;
  width: calc(100% - 8px);
  display: grid;
  gap: 20px;
}
.bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-neutral);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.32px;
}
.bullets li img {
  width: 22px;
  height: 22px;
  flex: none;
}
/* 1행 그룹 내부 gap은 12 — .bullets gap(20)에서 8을 되돌린다. */
.store-li {
  margin-top: -8px;
  padding-left: 34px;
  display: block;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--mint);
  color: var(--green-deep);
  font-size: 15px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: -0.3px;
}
.bullets .store-btn img {
  width: 8px;
  height: 16px;
}

.cta {
  margin-top: 48px;
  width: max-content;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
}
.cta img {
  width: 22px;
  height: 22px;
}
.cta-outline {
  background: var(--purple-50);
  border: 1px solid var(--purple);
  color: var(--purple);
}
.cta-mall {
  background: var(--mint);
  border: 1px solid var(--green-ink);
  color: var(--green-ink);
}
/* 혜택2 Btn set — 앱 CTA + 글로벌몰 CTA */
.btnset {
  margin-top: 48px;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.btnset .cta {
  margin-top: 0;
}
.cta-green {
  width: 100%;
  height: 64px;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--green);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -0.34px;
}

/* ── 아코디언 ───────────────────────────────────────── */
.acc {
  padding: 24px 16px;
  background: var(--fill);
  border-radius: 12px;
}
.acc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  /* 모바일 탭 시 뜨는 기본 하이라이트(프레스드 색) 제거 */
  -webkit-tap-highlight-color: transparent;
}
.acc-ico,
.acc-chev {
  width: 20px;
  height: 20px;
  flex: none;
}
.acc-chev {
  transition: transform 0.2s;
}
.acc.is-open .acc-chev {
  transform: rotate(180deg);
}
.acc-title {
  flex: 1;
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.34px;
}
/* 0fr → 1fr 보간으로 높이를 애니메이션한다. 미지원 브라우저에선 즉시 열림. */
.acc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}
.acc.is-open .acc-wrap {
  grid-template-rows: 1fr;
}
.acc-wrap > * {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .acc-wrap,
  .acc-chev {
    transition: none;
  }
}

.acc-body {
  padding: 0 8px;
  display: grid;
  /* Figma 실측: 행 피치 32px = line-height 25 + gap 7 */
  gap: 7px;
}
/* 헤더와의 간격은 클리핑되는 박스 *안쪽*에 둔다.
   .acc-body에 padding/margin을 주면 접혔을 때도 그만큼 높이가 남는다.
   Figma 실측 24px은 cap-trim 프레임 기준(헤더 프레임 bottom 44 → 본문 첫 글자
   cap-top 68). 브라우저 li는 line-height 25 / font-size 16의 half-leading
   8.5px가 글자 위에 더 붙으므로 24 - 8.5 ≒ 14로 상쇄한다. */
.acc-body > li:first-child {
  margin-top: 14px;
}
.acc-body li {
  color: var(--ink-alt);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -0.32px;
}
.acc-row {
  display: flex;
  gap: 4px;
}
.acc-dash {
  width: 6px;
  flex: none;
}
/* 혜택2 대상 국가 — "* 라벨" + 목록 2단 */
.acc-pair {
  display: grid;
  gap: 7px;
}
.acc-label {
  color: var(--ink-neutral);
  font-weight: 600;
}
.acc-star {
  margin-right: 4px;
}
.acc-list {
  /* 라벨 별표 폭만큼 들여쓰기 (Figma 실측 11px) */
  padding-left: 11px;
}
.acc-body .acc-note {
  font-size: 14px;
  line-height: 22px;
}

/* ── 혜택2 대상국가 그룹 ────────────────────────────── */
.group {
  margin-top: 48px;
  padding: 24px 20px;
  background: var(--fill-blue);
  border-radius: 20px;
  display: grid;
  gap: 20px;
}
.group .acc {
  background: #fff;
}
.group-note,
.group-instant {
  display: flex;
  align-items: center;
  gap: 8px;
}
.group-note {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
.group-instant {
  padding: 0 12px;
  color: var(--purple);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.34px;
}
.group-note img,
.group-instant img {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ── 쿠폰 사용 방법 ─────────────────────────────────── */
.howto {
  margin-top: 48px;
  padding: 28px 20px 32px;
  background: var(--fill-blue);
  border-radius: 20px;
  display: grid;
  gap: 32px;
}
.howto-title {
  color: var(--ink-strong);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
.howto-steps {
  display: grid;
  gap: 32px;
}
.howto-steps li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.step-main {
  display: grid;
  justify-items: start;
  gap: 16px;
}
.step-badge {
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--purple-50);
  color: var(--purple);
  font-size: 13px;
  font-weight: 500;
  line-height: 13px;
}
/* Figma는 텍스트 박스를 cap 높이로 trim해 잰다 — 16/1.5 기준 위아래 4px씩.
   그만큼 빼야 배지↔본문 gap(16)이 Figma와 같은 시각 간격이 된다. */
.step-text {
  display: block;
  margin-block: -4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
}
.step-thumb {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  flex: none;
}
.howto-steps b {
  font-weight: 700;
}

/* ── 쿠폰 카드 (variant) ────────────────────────────── */
.coupon {
  margin-top: 48px;
  padding: 29px 0;
  background: var(--mint);
  border: 1px solid var(--ink);
  border-radius: 12px;
  display: grid;
  justify-items: center;
}
.coupon-label {
  color: var(--ink-neutral);
  font-size: 16px;
  letter-spacing: -0.32px;
}
.coupon-code {
  margin-top: 15px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 2.24px;
  /* 쿠폰코드는 줄바꿈 금지 (기존 f567b21 이슈 재발 방지) */
  white-space: nowrap;
}
.coupon-sample {
  margin-left: 8px;
  color: var(--purple);
  font-size: 12px;
  letter-spacing: 0;
  vertical-align: middle;
}
.coupon-btn {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--ink);
  border-radius: 100px;
  color: var(--green);
  font-size: 16px;
  font-weight: 600;
}
.coupon-btn img {
  width: 18px;
  height: 18px;
}

/* ── 바코드 카드 (variant) ─────────────────────────── */
.bc-card {
  margin-top: 40px;
  padding: 24px 12px 12px;
  background: var(--mint);
  border-radius: 20px;
  cursor: pointer;
}
.bc-sub {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.32px;
  text-align: center;
}
.bc-thumb {
  position: relative;
  margin-top: 16px;
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bc-band {
  flex: none;
  height: 12.5%;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  color: var(--green);
  background: var(--ink);
  font-size: 10px;
  font-weight: 600;
}
/* 같은 문자열 두 벌을 이어 흘려 이음새를 없앤다. */
.bc-band span {
  flex: none;
  animation: oy-marquee 30s linear infinite;
}
@keyframes oy-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bc-band span {
    animation: none;
  }
}
/* 올리브영 제공 원본 PNG(200x114, 바 전용 — 번호 인쇄 없음)를 그대로 쓴다.
   비율을 깨면 바 폭이 왜곡돼 스캔이 안 되므로 contain으로 맞춘다. */
.bc-img {
  flex: 1;
  width: calc(100% - 32px);
  margin: 12px auto;
  min-height: 0;
  object-fit: contain;
}
.bc-zoom {
  position: absolute;
  /* 썸네일은 aspect-ratio로 폭에 따라 커진다. 경고띠(12.5%)와 겹치지 않게
     Figma 비율(31 / 187.875)을 %로 고정 — px로 두면 넓은 화면에서 띠를 침범한다. */
  top: 16.5%;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 4px;
  background: #fff;
  border: 0.667px solid var(--line);
  border-radius: 166px;
  display: grid;
  place-items: center;
}
.bc-zoom img {
  width: 14.67px;
  height: 14.67px;
}

/* ── 유의사항 ───────────────────────────────────────── */
.notice {
  margin-top: 0;
  padding: 48px 20px 140px;
  background: var(--fill-strong);
  display: grid;
  gap: 28px;
}
.notice-group {
  display: grid;
  gap: 20px;
}
.notice-title {
  font-size: 16px;
  font-weight: 500;
}
.notice ul {
  display: grid;
  gap: 8px;
}
.notice li {
  display: flex;
  gap: 8px;
  color: var(--ink-neutral);
  font-size: 14px;
  line-height: 1.56;
  letter-spacing: -0.28px;
}
.notice-dash {
  flex: none;
}
/* variant는 하단 고정 CTA가 없어 여백을 줄인다. */
.is-variant .notice {
  padding-bottom: 60px;
}

/* ── 하단 고정 CTA ──────────────────────────────────── */
.bottom {
  position: fixed;
  /* .page와 같은 컬럼에 붙는다 — left/right:0이면 데스크톱에서 화면 폭만큼 늘어난다. */
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, var(--page-w));
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 12px;
  /* 하단 여백은 10px 고정(사용자 지정). env(safe-area-inset-bottom)를 안 쓴다 —
     앱 웹뷰가 이미 하단 인셋을 잡아 준다는 전제. Figma Action Area는 32px. */
  padding: 20px 20px 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 16px);
}
.bottom-share {
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--purple-50);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.bottom-share img {
  width: 20px;
  height: 20px;
}
.bottom-cta {
  flex: 1;
  height: 52px;
  background: var(--purple);
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  display: grid;
  place-items: center;
}

/* ── 토스트 ─────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  z-index: 40;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 12px 16px;
  background: rgba(34, 34, 34, 0.92);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

/* ── 바코드 전체화면 모달 ───────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
}
/* 가로로 눕힌 좌표계: 폭·높이를 뒤집은 박스를 회전시킨다. */
.modal-rot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  padding: 0 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/* Figma 바코드 영역은 562x198이지만 원본 PNG는 200x114(비율 1.75)라 그 틀을 꽉
   채우면 바 폭이 왜곡된다. 비율을 지킨 채 회전 컨텍스트의 세로 여유
   (=뷰포트 폭에서 경고띠 35 + 여백)까지 키워 스캔 가능한 크기를 확보한다. */
.modal-bc {
  width: 100%;
  max-width: 562px;
  height: auto;
  max-height: calc(100vw - 60px);
  object-fit: contain;
}
/* 200px 원본을 2.5배로 늘리므로 보간을 끈다 — 번진 경계는 스캐너가 못 읽는다. */
.bc-img,
.modal-bc {
  image-rendering: pixelated;
}
/* 카드 썸네일의 .bc-band 마퀴 구조를 그대로 쓰고 치수만 Figma(12509:4999) 실측으로 덮는다. */
.modal-band {
  width: 100%;
  max-width: 562px;
  height: 35px;
  padding: 0 20px;
  font-size: 16px;
}
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  background: var(--fill);
  border-radius: 600px;
  display: grid;
  place-items: center;
}
.modal-close img {
  width: 28.8px;
  height: 28.8px;
}

/* ── variant 전용 요소 ────────────────────────────────
   빌드 없이 한 파일로 두 화면을 서빙한다. 기본 숨김이라 JS 실행 전 깜빡임이 없다.
   variant 화면에서는 JS가 이 클래스를 떼서 각 요소의 원래 display로 되돌린다
   (`display: revert`로는 .cta의 flex를 복원할 수 없다). */
.variant-only {
  display: none;
}