/* ============================================================
   Pokerrito México — styles.css  v2 (실측 기반 정밀 교정)
   원본 pokerrito.com 데스크톱(1377px) 실측값 그대로.
   Tipografía: aktiv-grotesk (Adobe Fonts) → fallback Archivo.
   UI: Poppins.
   ============================================================ */

:root {
  /* Marca — 실측 */
  --green-header: #094928;  /* header/footer rgb(9,73,40) */
  --green-btn: #054824;     /* botones/headings rgb(5,72,36) */
  --green-mid: #0a5c30;
  --white: #ffffff;
  --black: #000000;

  /* Pasteles — 실측 */
  --cyan-pastel: #d8faff;   /* sección promo */
  --mint-pastel: #f0fff1;   /* best sellers */
  --peach-pastel: #ffe7d8;  /* newsletter */

  --announce-gray: #b7b7b7;

  /* Blobs decorativos (contact) — 실측 images-2.png */
  --blob-pink: #ffc9be;
  --blob-peach: #ffb17c;
  --blob-coral: #ff8f8a;

  --font-head: "aktiv-grotesk", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Poppins", "Helvetica Neue", Arial, sans-serif;

  --radius-pill: 300px;
  --pad-x: 3vw;            /* 41px @1377 */
  --pad-x-inner: 10.9vw;   /* 150px @1377 — páginas de menú */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* 타이포 스케일: 원본(Squarespace)은 화면폭 비례 — 1377px 실측값을 vw로 환산
   (68.9px@1377 = 5.0vw · 45.7 = 3.32vw · 35.8 = 2.6vw · 25.9 = 1.88vw · 12.7 = 0.922vw) */
body {
  font-family: var(--font-ui);
  font-size: clamp(11px, 0.922vw, 15px);
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 500;
}
h1 { font-size: clamp(36px, 5vw, 82px); line-height: 0.96; letter-spacing: -0.04em; }
h2 { font-size: clamp(26px, 3.32vw, 55px); line-height: 1.03; letter-spacing: -0.04em; }  /* 실측 -1.83/45.74 = -0.04em */
h3 { font-size: clamp(21px, 2.6vw, 43px); line-height: 1.06; letter-spacing: -0.03em; }
h4 { font-size: clamp(16px, 1.88vw, 31px); line-height: 1.08; letter-spacing: -0.04em; color: var(--green-btn); }  /* 실측 ls -1.036/25.9 = -0.04em */
p  { line-height: 1.6; }

.container { padding: 0 var(--pad-x); }           /* full-bleed 41px */
.container-inner { padding: 0 var(--pad-x-inner); } /* menú 150px */

/* ---------------- Announcement bar ---------------- */
.announce {
  background: var(--white);   /* 실측: 원본 안내바 = 흰색 */
  color: #111;
  text-align: center;
  font-size: clamp(11px, 0.922vw, 15px);
  line-height: 1.6;
  padding: 14px 48px;
  position: relative;
  z-index: 60;
}
.announce strong { font-weight: 600; }
.announce .announce-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; font-size: 0.95rem; cursor: pointer; color: #333;
}

/* ---------------- Header ---------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--green-header);
  color: var(--white);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 1.96vw var(--pad-x);   /* 실측: 상하 27px @1377 (헤더 총 ~111) */
}
.logo-img { height: clamp(32px, 3.34vw, 54px); width: auto; }   /* 실측 46 @1377 */
.logo-link { display: inline-block; }
.wordmark {
  font-family: var(--font-head);
  font-size: 1.85rem; letter-spacing: 0.05em; color: var(--white);
  text-transform: uppercase; font-weight: 700; white-space: nowrap;
}
.wordmark sup { font-size: 0.5rem; }

.main-nav { display: flex; align-items: center; gap: 15px; /* 실측 gap 15 */ }
.main-nav > li { position: relative; }
.main-nav a, .main-nav .nav-toplink {
  font-size: clamp(11px, 0.922vw, 15px); font-weight: 500; letter-spacing: 0.13px;
  white-space: nowrap;
  color: var(--white);
  background: none; border: 0; font-family: var(--font-ui); cursor: pointer;
  padding: 6px 0; display: inline-block;
}
.main-nav a:hover { opacity: 0.7; }

.dropdown .dropdown-panel {
  display: none;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  background: var(--green-header);
  min-width: 225px; padding: 10px 0; border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.dropdown:hover .dropdown-panel,
.dropdown:focus-within .dropdown-panel { display: block; }
.dropdown-panel a { display: block; padding: 8px 20px; white-space: nowrap; }

/* Order Now (header) — 실측 185x57, border 2px white, Poppins 14.35 */
.btn-header-order {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: clamp(12px, 1.042vw, 17px); font-weight: 500;
  letter-spacing: 0.29px; color: var(--white);
  background: transparent; border: 2px solid var(--white);
  border-radius: var(--radius-pill);
  padding: 1.16vw 3.5vw; white-space: nowrap;  /* 실측 16px/48px @1377 */
  transition: all .18s ease;
}
.btn-header-order:hover { background: var(--white); color: var(--green-header); }

/* Botón principal — 실측 220x74, verde #054824, aktiv 17.6 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: clamp(14px, 1.278vw, 21px); font-weight: 500; letter-spacing: 0.35px;
  border-radius: var(--radius-pill);
  height: clamp(54px, 5.374vw, 88px);      /* 실측 74 @1377 */
  min-width: clamp(160px, 15.98vw, 260px); /* 실측 220 @1377 */
  padding: 0 2vw;
  cursor: pointer; border: 0;
  transition: all .18s ease;
  white-space: nowrap;
}
.btn-solid-green { background: var(--green-btn); color: var(--white); }
.btn-solid-green:hover { background: var(--green-mid); }
.btn-outline-green {
  background: transparent; color: var(--green-btn);
  border: 2px solid var(--green-btn);
}
.btn-outline-green:hover { background: var(--green-btn); color: var(--white); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--white); margin: 6px 0; }

/* ---------------- Hero (home) ----------------
   실측: alto 746 @857vp(~87vh) · contenido izq x=41 · h1 ancho 533(2줄)
   · tag 19.3px aktiv w400 · botones 220x74 ambos verdes, gap 16 */
.hero {
  position: relative;
  /* 실측: 원본은 헤더가 히어로에 겹침 → 가시 높이 = 87vh − (안내바69+헤더~93) */
  min-height: calc(87vh - 162px);
  display: flex; align-items: center;
  background: #000;
  color: var(--white);
  overflow: hidden;
}
.hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.hero .hero-media video, .hero .hero-media img { object-fit: cover; width: 100%; height: 100%; }
.hero .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.18); z-index: 1; }
.hero .hero-content {
  position: relative; z-index: 2;
  padding: 151px 0 0;   /* 실측: h1 top = 히어로 가시영역 +219 (flex center 보정) */
  max-width: 580px;
}
.hero h1 { color: var(--white); max-width: 39vw; margin-bottom: 32px; font-weight: 500; } /* 실측 533/1377 */
.hero .hero-tag {
  font-family: var(--font-head);
  font-size: clamp(14px, 1.402vw, 23px); letter-spacing: 0.5px; font-weight: 400;
  text-transform: uppercase;
  margin: 16px 0 12px;
}
.hero .hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }  /* 실측 갭 ~10 */

/* ---------------- Banner interior (páginas de menú) ----------------
   실측: alto 566 · título DENTRO del banner, izq x=150, blanco 68.9 */
.page-banner {
  /* 실측: 원본 배너 566(메뉴)/538(스토리) − 헤더 겹침 163 = 가시 403/375 */
  position: relative; height: 403px; max-height: 60vh;
  display: flex; align-items: center;
  background: #000; color: var(--white);
  overflow: hidden;
}
/* 실측(x=8 경계 스캔 2026-07-02): 원본 dark→cyan 511, 헤더끝 178 → 솔리드 286 + 웨이브 */
.page-banner--story { height: 286px; align-items: flex-start; }
.page-banner--story h1 { padding-left: 14.8vw; margin-top: 137px; }  /* 실측 x=204, y=317(배너톱+137) */
.page-banner .hero-media { position: absolute; inset: 0; }
.page-banner .hero-media img { object-fit: cover; width: 100%; height: 100%; }
.page-banner .hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.28); }
.page-banner h1 { position: relative; z-index: 2; padding: 0 var(--pad-x-inner); font-weight: 500; margin-bottom: 63px; }  /* 실측 BYO·pokebowls: H1 top=317 (플렉스센터 348−31), fw500+strong */
.page-banner--story h1 { margin-bottom: 0; }  /* historia 1차 검증(±2px) 보존 */

/* ---------------- Secciones ---------------- */
.section { padding: 6.6vw 0; position: relative; }   /* 실측 90.88 @1377 */
.section-tight { padding: 3.3vw 0; }                 /* 실측 45.44 @1377 */
.section-cyan  { background: var(--cyan-pastel); }
.section-mint  { background: var(--mint-pastel); }
.section-peach { background: var(--peach-pastel); }
.section-white { background: var(--white); }
.section-green { background: var(--green-header); color: var(--white); }

.wave { display: block; width: 100%; height: 6vw; margin: -1px 0; }  /* 실측 --divider-height: 6vw */
.wave--overbanner { margin-top: calc(-6vw - 1px); position: relative; z-index: 3; background: transparent; }  /* 배너 하단을 파고드는 흰 웨이브 (실측 메뉴배너 has-section-divider) */

/* Split promo — 실측: texto x=96 w=479 / img x=768 w=386 h=598 */
.split {
  display: grid;
  grid-template-columns: 34.9vw 28vw;  /* 실측 480/386 @1377 → vw 비례 */
  justify-content: space-between;
  align-items: start;                   /* 실측: 이미지=패딩탑, 텍스트=+78px */
  padding-left: 7vw; padding-right: 16.2vw;  /* 실측: 텍스트 x=96, 이미지 우측여백 223 */
}
.split .split-text { margin-top: 5.66vw; }  /* 실측 78 @1377 */
.split .split-text h2 { margin: 0 0 18px; }
.split .split-text p { margin-bottom: 10px; }
.split .btn { margin-top: 8px; }
#promo-split { padding-bottom: 11.2vw; }    /* 실측: 섹션 총높이 888 매칭 */
#promo-split h2 { color: var(--green-btn); }  /* 실측: 프로모 타이틀 = 그린 */
.split .split-text p { font-size: 12.7px; line-height: 20.3px; margin-bottom: 16px; }
.split .split-img .card-img { aspect-ratio: 386/598; border-radius: 0; overflow: hidden; }
.split .btn { margin-top: 12px; }

/* Marquee */
/* 마퀴: 사인 곡선 textPath (실측: 글자가 물결 따라 출렁이며 흐름) */
.marquee-wave { overflow: hidden; margin: -3vw 0 9.2vw; }
.marquee-wave svg { display: block; width: 100%; height: auto; }
.marquee-wave .mq-text {
  font-family: var(--font-head); font-weight: 400;
  font-size: 114px;               /* viewBox 2400 기준 = 실측 65.57 @1377 */
  letter-spacing: -0.02em;
  fill: var(--black);
}

/* Best sellers — 실측: 3 col, img 424x416, gap 11, h4 verde +31px */
.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px;
}
.card { display: flex; flex-direction: column; }
.card .card-img { overflow: hidden; aspect-ratio: 424/416; }
.card h4 { margin-top: 31px; }
/* 실측: 카드 아래는 아코디언(카테고리 줄 + 체브론, 설명은 접힘) */
.acc { border-top: 1px solid #0a0a0a; margin-top: 24px; }
.acc + .acc { margin-top: 0; border-top: 0; }  /* 연속 아코디언은 붙여 쌓기 (원본 Bul Dog) */
.acc .acc-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 2px; cursor: pointer;
  border-bottom: 1px solid #0a0a0a;
  font-family: var(--font-ui); font-size: clamp(12px, 1.16vw, 19px); font-weight: 400;
}
.acc .acc-head .chev { transition: transform .2s ease; font-size: 0.85em; }
.acc.open .acc-head .chev { transform: rotate(180deg); }
.acc .acc-body { display: none; padding: 14px 2px 18px; font-size: clamp(11px, 0.922vw, 15px); line-height: 1.7; border-bottom: 1px solid #0a0a0a; }
.acc.open .acc-body { display: block; }
.acc.open .acc-head { border-bottom: 0; }
.card .card-price { font-family: var(--font-head); font-size: clamp(12px, 1.1vw, 18px); color: var(--green-btn); font-weight: 600; margin-top: 12px; }

/* ---------------- Páginas de menú ----------------
   실측: contenido x=150 · tiles 261px 4col gap 11 · nombres platillo 12.7 bold */
.menu-h1 {
  /* 실측 07-02(BYO·pokebowls): 인트로 헤딩 = H1 규격 68.88/1377=5vw, lh0.96, ls-0.04em, mb32 */
  font-size: clamp(36px, 5vw, 82px); line-height: 0.96; letter-spacing: -0.04em;
  font-weight: 500; margin: 0 0 32px;
  color: var(--green-btn);  /* 실측: 원본 인트로 헤딩 = accent 그린 (sqsrte-text-color--accent) */
}
/* 실측 07-02 (warm-pokerrito/torched): 인트로끝→그리드 51 · 이미지끝→이름 8 ·
   이름블록 54(=27+27) → 설명 lh20.3 · 텍스트끝→다음행 이미지 ~119 (가격줄 26 감안 row-gap 93) */
.menu-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 93px 11px;
  margin-top: 51px;
}
.menu-item { display: flex; flex-direction: column; }
.menu-item .menu-img { overflow: hidden; aspect-ratio: 1/1; }
.menu-item .menu-name { font-weight: 400; font-size: 19.3px; margin-top: 11px; margin-bottom: 27px; }  /* 실측 pokebowls 기준페이지 07-03: img끝→name 11px (종전 8) */
.menu-item .menu-desc { font-size: 12.7px; color: #000; line-height: 1.6; margin-top: 0; }  /* 실측 pokebowls: desc 검정 rgb(0,0,0) */
.menu-item .menu-price { font-family: var(--font-ui); color: var(--green-btn); font-weight: 600; font-size: 12.7px; margin-top: 6px; }
.menu-note { font-size: 12.7px; color: #333; margin: 24px 0 0; }  /* 사이즈 안내 등 소형 노트 (자체 카피) */

/* BYO — 실측 07-02 원본 /menu-buildyourown:
   타일 = 직사각 자연비(원형 아님!) w261, 기본비 261/183, Base 카테고리만 261/144
   라벨 h4 25.9 fw500 검정 ls-0.04em, 이미지 밑 11px · 행피치 272(=183+11+28+50)
   스텝헤딩 = H2 45.74 lh1.02 ls-0.04em, 그리드→다음스텝 갭 ~100 */
.ing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 11px; margin: 30px 0 0; }
.ing-grid--base { margin-top: 88px; }
.ing-grid--g70 { margin-top: 70px; }   /* 실측: Mix-Ins 그리드 헤딩→타일 70 */
.ing-grid--g109 { margin-top: 109px; } /* 실측: Toppings 그리드 헤딩→타일 109 */
.ing { text-align: center; }
.ing .ing-img { overflow: hidden; aspect-ratio: 261/183; margin-bottom: 11px; }
.ing-grid--base .ing .ing-img { aspect-ratio: 261/144; }  /* 실측: Base 사진만 261×144 (뒤에 둬야 .ing .ing-img를 이김) */
.ing h4 { font-size: 25.9px; color: var(--black); letter-spacing: -0.04em; }
.step-title { margin: 100px 0 0; font-size: 45.74px; line-height: 1.02; letter-spacing: -0.04em; }
.step-title:first-of-type { margin-top: 34px; }
.step-title--newsec { margin-top: 259px; }  /* 실측: 원본 섹션 분절(Proteins↔Mix-Ins) 라벨끝→헤딩 259 — .step-title 뒤 유지 */
.diet-legend { margin: 32px 0 102px; }  /* 실측: 레전드끝→그리드 갭 103 */
.diet-legend p { font-size: 12.7px; color: #333; margin: 0 0 18px; }

/* Placeholder de foto/video — etiqueta pequeña en esquina (no tapa contenido) */
.ph {
  position: relative;
  background: repeating-linear-gradient(45deg, #eef3ef, #eef3ef 12px, #e2ece5 12px, #e2ece5 24px);
  outline: 2px dashed #9dbfa9; outline-offset: -2px;
  width: 100%; height: 100%; min-height: 120px;
}
.ph::after {
  content: attr(data-label);
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(255,255,255,0.85); color: #35624a;
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 3px 8px; border-radius: 4px;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ph-dark { background: repeating-linear-gradient(45deg, #0e2418, #0e2418 14px, #0b1f14 14px, #0b1f14 28px); outline-color: #2f6247; }
.ph-dark::after { background: rgba(0,0,0,0.55); color: #8fc8a8; }

/* ---------------- Newsletter — 실측 ----------------
   input 280x66 cuadrado borde 1px rgba(0,0,0,.12) · botón outline verde pill 128x68 */
.newsletter { text-align: center; }
.newsletter h2 { font-size: clamp(22px, 2.6vw, 43px); margin-bottom: 1.24vw; }  /* 실측 35.8, gap 17 */
.newsletter p { font-weight: 400; font-size: clamp(11px, 0.922vw, 15px); margin-bottom: 3vw; }  /* 실측 w400, gap 41 */
.newsletter form { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }  /* 실측 gap 11 */
.newsletter input[type=email] {
  font-family: var(--font-ui); font-size: clamp(11px, 0.95vw, 15px);
  padding: 0 20px;
  height: clamp(48px, 4.79vw, 78px); width: clamp(220px, 20.33vw, 330px);  /* 실측 66×280 */
  border: 1px solid rgba(0,0,0,0.12); border-radius: 0;
  background: var(--white);
}
.newsletter button {
  font-family: var(--font-ui); font-size: clamp(12px, 1.16vw, 19px); font-weight: 500;
  height: clamp(50px, 4.94vw, 80px); min-width: clamp(100px, 9.3vw, 150px); padding: 0 26px;  /* 실측 68×128 */
  background: transparent; color: var(--green-btn);
  border: 2px solid var(--green-btn); border-radius: var(--radius-pill);
  cursor: pointer; transition: all .18s ease;
}
.newsletter button:hover { background: var(--green-btn); color: var(--white); }
#newsletter { padding-bottom: 1.8vw; }
.newsletter .privacy-note { margin-top: 3.6vw; font-size: clamp(10px, 0.87vw, 14px); color: #333; }  /* 실측 실존 */
.newsletter .newsletter-msg { margin-top: 12px; font-size: 12.7px; }
.newsletter .newsletter-msg:empty { display: none; }

/* ---------------- Nuestra Historia (실측 /our-story) ---------------- */
:root { --cream-story: #f2eadb; }  /* 실측 rgb(242,234,219) */
.section-cream-story { background: var(--cream-story); }

/* 인트로 (시안): 칼럼 x=204 w=968 — 심화실측 07-02: 본문 19.3/30.9, p 갭 16px */
.story-intro { padding-left: 14.8vw; max-width: calc(14.8vw + 70.3vw); }
.story-intro h2 { margin-bottom: 2.32vw; color: var(--green-btn); }  /* 실측 H2끝→p1 32px · 색=그린(h2 computed는 검정이나 내부 span이 그린 — 밴드육안 확정) */
.story-intro p { font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; margin-bottom: 1.16vw; }  /* 실측 mb 16px */

/* 미션 (피치): 이미지 좌 593² x=95 / 텍스트 우 x=742 w=485 — 심화실측 07-02 */
.story-mission {
  display: grid; grid-template-columns: 43.06vw 35.22vw;
  column-gap: 3.9vw; align-items: start;
  padding-left: 6.9vw;
}
.story-mission .m-img { aspect-ratio: 1/1; overflow: hidden; border-radius: 50%; }  /* 실측: 원형 크롭(원본 이미지에 베이크) */
.story-mission .m-text { margin-top: 1.89vw; }  /* 실측: 텍스트칼럼 = img top +26px */
.story-mission h2 { color: var(--green-btn); margin: 0 0 7.84vw; }  /* 실측: H2끝(1519)→p1(1627) 갭 108px */
.story-mission p { margin-bottom: 1.16vw; font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; color: var(--green-btn); }  /* 실측 19.3/30.9 그린 */

/* 커미트먼트 (크림): 텍스트 좌 x=149 w=539 / 이미지 우 x=742 — 심화실측 07-02: H2는 1행 좌컬럼 */
.story-commit { padding-left: 10.82vw; padding-right: 10.9vw; }
.story-commit h2 { color: var(--green-btn); margin-bottom: 4.65vw; }  /* 실측 H2끝(2316)→H4(2380) 64px */
.story-commit .commit-row p { color: var(--green-btn); }  /* 실측: 커밋 본문 = 그린 */
.commit-row {
  display: grid; grid-template-columns: 39.14vw 1fr;
  column-gap: 3.9vw; align-items: start;
  margin-bottom: 3.49vw;  /* 실측: row1끝(2625)→hr(2673) 48px */
}
.commit-row h4 { margin-bottom: 2.32vw; }  /* 실측 H4끝→p 32px */
.commit-row p { font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; }  /* 실측 19.3/30.9 */
/* 실측 07-02: 와이드 이미지 = 타원 아님, 두 원형 벤(겹침) 크롭 — 원본 img y = row top +18 */
.commit-row .c-img-wide {
  aspect-ratio: 485/325; overflow: hidden; margin-top: 1.31vw;
  -webkit-mask-image: radial-gradient(circle closest-side at 33.5% 50%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 66.5% 50%, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 33.5% 50%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 66.5% 50%, #000 99%, transparent 100%);
}
/* 실측 07-02: 정방 이미지 = 네 원형 클로버 크롭, 우측여백 54px(x 779..1174) */
.commit-row .c-img-sq {
  aspect-ratio: 1/1; max-width: 28.7vw; margin-left: auto; margin-right: 3.92vw; overflow: hidden;
  -webkit-mask-image: radial-gradient(circle closest-side at 31% 31%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 69% 31%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 31% 69%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 69% 69%, #000 99%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 31% 31%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 69% 31%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 31% 69%, #000 99%, transparent 100%), radial-gradient(circle closest-side at 69% 69%, #000 99%, transparent 100%);
}
.commit-hr { border: 0; border-top: 1px solid #444; margin: 0 0 4.94vw; }  /* 실측: hr(2674)→row2 img(2742) 68px */

/* 파트너십 (화이트): 같은 그리드, 헤딩·본문 검정 — 심화실측 07-02: H2도 좌컬럼 */
.story-partner { padding-left: 10.82vw; padding-right: 10.9vw; }
.story-partner h2 { margin-bottom: 4.65vw; color: var(--green-btn); }  /* 실측 갭 64px · 색=그린(computed 검정이나 렌더 그린 — 밴드육안 확정) */
/* 실측 07-02 밴드육안: 파트너 H4도 그린(전역 h4 그린 상속), 본문만 검정 */
.story-partner .p-img {
  aspect-ratio: 378/278; max-width: 27.5vw; margin-left: auto; margin-right: 3.92vw;  /* 실측 x 796..1174, 우측여백 54 */
  margin-top: 6.1vw;  /* 실측: img y = row top +84 */
  overflow: hidden;
}

/* ---------------- Prose ---------------- */
.prose { max-width: 780px; margin: 0 auto; }
.prose h2 { margin: 40px 0 18px; }
.prose h3 { margin: 34px 0 14px; color: var(--green-btn); }
.prose p { margin-bottom: 16px; font-size: 14.3px; }
.prose ul { list-style: disc; padding-left: 24px; margin-bottom: 16px; }
.prose ul li { margin-bottom: 10px; line-height: 1.6; font-size: 14.3px; }
.prose strong { font-weight: 600; }
.commit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; margin-top: 42px; }
.commit .commit-img { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 18px; }
.commit p { font-size: 14.3px; }

/* ---------------- Ubicaciones (formato espejo de /locations) ---------------- */
/* 실측: banner 566 + "Locate Nearby" h1 68.9 x=150 + locator + form 2col */
.giant {
  font-family: var(--font-head); font-weight: 500;
  font-size: 68.9px; line-height: 0.96; letter-spacing: -0.04em;
  margin-bottom: 10px;
}
.country-title { font-size: 35.8px; margin: 64px 0 8px; }
.country-sub { font-size: 12.7px; color: #333; margin-bottom: 26px; }
.loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 26px; }
.loc-tile { display: flex; flex-direction: column; }
.loc-tile .loc-img { overflow: hidden; aspect-ratio: 424/416; }
.loc-tile h4 { margin-top: 24px; }
.loc-tile .loc-meta { font-size: 12.7px; color: #222; line-height: 1.7; margin-top: 10px; }
.loc-tile .loc-links { margin-top: 10px; font-size: 12.7px; font-weight: 600; color: var(--green-btn); display: flex; gap: 14px; flex-wrap: wrap; }
.loc-tile .loc-links a { text-decoration: underline; text-underline-offset: 3px; }
.loc-grid-compact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 11px; margin-top: 26px; }
.loc-compact { border-top: 2px solid var(--green-btn); padding-top: 14px; }
.loc-compact .loc-name { font-weight: 600; font-size: 14.3px; }
.loc-compact .loc-city { font-size: 12.7px; color: #444; margin-top: 3px; }
.loc-compact a { font-size: 12.7px; color: var(--green-btn); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.map-embed { aspect-ratio: 16/7; overflow: hidden; margin: 36px 0 0; }

/* Formulario de contacto (실측: inputs gris claro cuadrados, submit outline pill) */
.contact-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  align-items: center; margin-top: 90px;
}
.contact-art { min-height: 460px; position: relative; }
.contact-art .blob {
  position: absolute; inset: 10% 15%;
  background: #f97d72; border-radius: 44% 56% 62% 38% / 52% 44% 56% 48%;
  transform: rotate(18deg);
}
.contact-form label { display: block; font-size: 14.3px; margin: 20px 0 7px; }
.contact-form label .req { color: #666; font-size: 12px; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea {
  width: 100%; font-family: var(--font-ui); font-size: 14px;
  background: #fafafa; border: 1px solid #111; border-radius: 0;   /* 실측 rgb(250,250,250) */
  padding: 10px 14px; height: 42px;   /* 실측 /contact: input h42 */
}
.contact-form textarea { height: 100px; resize: vertical; }  /* 실측 100 */
.form-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }  /* 실측 261+11+261=533 */
.form-check { display: flex; align-items: center; gap: 10px; font-size: 14.3px; margin-top: 10px; }
.btn-pill-outline {
  font-family: var(--font-ui); font-size: 16px; font-weight: 500;
  height: 57px; min-width: 161px; padding: 0 30px;   /* 실측 161×57 */
  background: transparent; color: var(--green-btn);
  border: 2px solid var(--green-btn); border-radius: var(--radius-pill);
  cursor: pointer; margin-top: 20px; transition: all .18s ease;
}
.btn-pill-outline:hover { background: var(--green-btn); color: var(--white); }

/* Contacto — 실측 /contact: 좌 424 / 우 533 / 갭 120 (콘텐츠폭 1077), 폼끝~푸터 187
   장식 blob(원본 images-2.png 재현): pink 경계상단 / peach 우측 폼 뒤 / coral 좌하단 */
.contact-cols { display: grid; grid-template-columns: 424fr 533fr; gap: 8.7vw; align-items: start; position: relative; z-index: 2; }
.contact-section { padding-bottom: 13.6vw; position: relative; overflow: hidden; }
.contact-info .giant { color: var(--green-btn); }   /* 실측 rgb(5,72,36) */
.contact-info p { font-size: 19.3px; margin-top: 26px; }
.contact-info a { color: var(--green-btn); text-decoration: underline; text-underline-offset: 3px; }
.form-check input[type=checkbox] { width: 16px; height: 16px; }
.contact-form label.sub { margin: 0 0 6px; font-size: 12.7px; }
.contact-form form > label:first-child { margin-top: 0; }   /* 실측: 폼 상단 = 섹션 콘텐츠 상단(674) */
.blob-deco { position: absolute; pointer-events: none; }
.page-banner--center h1 { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin-bottom: 0; }  /* contact/locations형: 원본 H1 y336·center 376 → mine 348·381 (Δ5) */
.page-banner--contact .wave-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 83px; margin: 0; z-index: 2; }
.page-banner--contact .blob-pink { bottom: -8px; left: 13.2vw; width: 24vw; height: 78px; z-index: 3;
  background: var(--blob-pink); border-radius: 48% 52% 44% 56% / 100% 100% 0% 0%; }
.contact-section .blob-peach { top: -8px; left: 59.8vw; width: 26.4vw; height: 415px; z-index: 0;
  background: var(--blob-peach); border-radius: 43% 57% 52% 48% / 46% 41% 59% 54%; }
.contact-section .blob-coral { top: 460px; left: 14.5vw; width: 27vw; height: 420px; z-index: 0;
  background: var(--blob-coral); border-radius: 55% 45% 48% 52% / 48% 55% 45% 52%; }

/* Tarjeta de Regalo — 실측 /giftcard: 배너 h414·pad 7vw·크림 #f2eadb·H2 45.7 green·본문 19.3 green·버튼 207×67 */
.page-banner--gift { height: 414px; }
.page-banner--gift h1 { padding: 0 7vw; }  /* 기본 flex+mb63 → H1 y290 = 원본 /giftcard 290 정확 */
.page-banner--gift .wave-overlay { position: absolute; bottom: 0; left: 0; width: 100%; height: 95px; margin: 0; z-index: 2; }
.container-gift { padding: 0 7vw; }
.gift-body h2 { color: var(--green-btn); margin: 63px 0 32px; }
.gift-body h2:first-child { margin-top: 0; }
.gift-body h2.mt-tight { margin-top: 32px; }
.gift-body p { font-size: 19.3px; color: var(--green-btn); }
.gift-body p + p { margin-top: 16px; }
.gift-terms { list-style: disc; padding-left: 40px; color: var(--green-btn); font-size: 19.3px; }
.gift-terms li { margin-bottom: 9px; line-height: 1.6; }
.gift-designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 26px 0 30px; }
.gift-designs .ph { height: 179px; min-height: 0; }  /* 실측 역산: 갤러리+멤버십 블록 = y1390~1929 (REVISAR: 디자인 이미지 대기) */
a.btn-pill-outline { display: inline-flex; align-items: center; justify-content: center; }
.btn-gift { height: 67px; min-width: 207px; }
.gift-body .gift-upper { margin-top: 10px; letter-spacing: 0.5px; }

/* ---------------- Footer — 실측: bg #094928, compacto 283px ---------------- */
/* 실측: 그린 푸터(283px) = 로고|링크|아이콘 한 줄 + 아래 흰색 서브푸터(도시링크, 회색) */
.site-footer {
  background: var(--green-header); color: var(--white);
  padding: 7.2vw 0 9.3vw; font-size: clamp(11px, 1.042vw, 17px);
}
.site-footer .logo-img { height: clamp(32px, 3.34vw, 54px); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: center; }
.footer-links { display: flex; gap: 1.67vw; flex-wrap: wrap; }  /* 실측 gap ~23 */
.footer-links a { font-size: clamp(11px, 1.042vw, 17px); }      /* 실측 14.35 */
.footer-links a:hover { opacity: 0.7; }
.footer-social { display: flex; gap: 8px; align-items: center; }  /* 실측 gap 8 */
.footer-social a { display: inline-flex; }
.footer-social svg { width: clamp(20px, 2.03vw, 33px); height: clamp(20px, 2.03vw, 33px); fill: var(--white); }  /* 실측 28 */
.footer-social a:hover svg { opacity: 0.7; }
/* 서브푸터: 흰 배경 · 회색 소형 텍스트 (실측: 그린 푸터 아래 별도 밴드) */
.subfooter {
  background: var(--white); color: #6f6f6f;
  padding: 2vw 0 1.6vw;
  font-size: clamp(9px, 0.73vw, 12px);
}
.subfooter h5 {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(9px, 0.73vw, 12px);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin: 0.9vw 0 0.4vw; color: #8a8a8a;
}
.subfooter p { line-height: 1.9; }
.subfooter a:hover { color: #222; }
.subfooter .footer-legal { margin-top: 1vw; opacity: 0.75; }

/* ---------------- Franquicias — 실측 2026-07-03 (원본 /franchise @1377) ----------------
   섹션열: 배너566(黑) → 시안863 → 피치779 → 크림702 → 화이트+블롭752 → 포토밴드283(黑) → 폼1486(白) → 푸터.
   H2 전부 그린(45.7) 센터 · 본문 19.3 · 컬럼 x96/w1186, 2단 533+119갭. */
:root {
  --blob-coral: #f97d72; --blob-orange: #faa55f; --blob-pink: #ffccc2; --blob-green: #3e7d55;
}
.franq-h2 { text-align: center; color: var(--green-btn); }
.franq-intro { padding: 6.1vw 6.97vw 7.6vw; }
.franq-intro h2 { text-align: center; color: var(--green-btn); margin-bottom: 2.3vw; }
.franq-intro h4 { text-align: center; color: var(--black); margin-bottom: 2.9vw; }
.franq-intro p { font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; margin-bottom: 1.16vw; }
.franq-badge { width: 12.7vw; height: 7.6vw; margin: 3.4vw auto 0; }

.franq-why { padding: 3.27vw 10.9vw 3.6vw 6.97vw; }  /* 실측: 우측여백 150(비대칭) */
.franq-why h2 { margin-bottom: 4.9vw; }
.franq-why-grid { display: grid; grid-template-columns: 34.8vw 38.7vw; column-gap: 8.64vw; align-items: start; }
.franq-why-grid ul, .franq-cols ul { list-style: disc; padding-left: 2.9vw; }
.franq-why-grid li, .franq-cols li, .franq-invest li {
  font-size: clamp(13px, 1.402vw, 23px); line-height: 1.6; margin-bottom: 0.95vw;
}
.franq-why-grid li, .franq-cols li { color: var(--green-btn); }
.franq-why-img { width: 38.7vw; height: 35.5vw; border-radius: 1.2vw; overflow: hidden; }  /* 실측 533×489 */

.franq-path { padding: 3.34vw 6.97vw 8.5vw; }
.franq-path h2 { margin-bottom: 4.6vw; }
.franq-cols { display: grid; grid-template-columns: 38.7vw 38.7vw; column-gap: 8.64vw; align-items: start; }
.franq-cols h4 { color: var(--green-btn); margin-bottom: 2.4vw; }

.franq-invest { position: relative; padding: 3.27vw 6.97vw 8vw; background: var(--white); overflow: hidden; }
.franq-invest > * { position: relative; z-index: 2; }
.franq-invest h2 { margin-bottom: 5vw; }
.franq-invest h4 { color: var(--black); margin-bottom: 1.6vw; }
.franq-invest ul { list-style: disc; padding-left: 2.9vw; margin-bottom: 1.7vw; }
.franq-invest li { color: var(--black); margin-bottom: 0.55vw; }
.franq-invest .franq-closing { text-align: center; font-size: clamp(14px, 1.402vw, 23px); margin-top: 2.7vw; }
.franq-blobs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.franq-photoband { position: relative; height: 14.2vw; background: var(--black); }
.franq-photoband .ph { position: absolute; inset: 0; }

.franq-form-sec { padding: 6.3vw 6.97vw 6.2vw; }
.franq-form-sec h2 { margin-bottom: 3vw; }
.franq-form-sec .franq-form-lead { text-align: center; font-size: clamp(14px, 1.402vw, 23px); margin-bottom: 1.2vw; }
.franq-form-sec .franq-form-note { text-align: center; font-size: clamp(10px, 0.922vw, 15px); }
.franq-form { width: 43.6vw; margin: 5.5vw auto 0; }  /* 실측 폼컬럼 600px 센터 */
.franq-form .f-label { font-size: clamp(11px, 1.042vw, 17px); margin: 1.9vw 0 0.6vw; }
.franq-form .f-label .req { color: #777; font-size: 0.85em; }
.franq-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1vw; }
.franq-form input[type="text"], .franq-form textarea {
  width: 100%; border: 1px solid #b9b9b9; border-radius: 2px; background: #fdfdfd;
  font-family: var(--font-ui); font-size: clamp(11px, 1.042vw, 17px); padding: 0.8vw;
}
.franq-form textarea { height: 5.8vw; resize: vertical; }
.franq-form .f-check { display: flex; align-items: center; gap: 0.7vw; margin-bottom: 1.1vw;
  font-size: clamp(11px, 1.042vw, 17px); }
.franq-form .f-check input { width: 1.1vw; height: 1.1vw; min-width: 13px; min-height: 13px; accent-color: var(--green-btn); }
.franq-send {
  display: inline-block; margin-top: 2.6vw; padding: 0 2.6vw; height: 4.14vw; line-height: 4.14vw;
  min-height: 44px; min-width: 10.6vw; text-align: center;
  border: 1px solid var(--green-btn); border-radius: var(--radius-pill);
  background: transparent; color: var(--green-btn); font-family: var(--font-ui);
  font-size: clamp(12px, 1.16vw, 19px); cursor: pointer;
}
.franq-send:hover { background: var(--green-btn); color: var(--white); }

@media (max-width: 799px) {
  .franq-why-grid, .franq-cols { grid-template-columns: 1fr; }
  .franq-why-img { width: 100%; height: 64vw; }
  .franq-form { width: 86vw; }
  .franq-form textarea { height: 20vw; }
  .franq-photoband { height: 22vw; }
  .franq-badge { width: 30vw; height: 18vw; }
}


/* ---------------- Recompensas — 실측 2026-07-03 (원본 /reward @1377, 총 3312) ----------------
   배너566 → 피치 단일 2328 (전부 좌정렬 그린) → 푸터(플랫 컷). H1 x=96(6.97vw). */
.page-banner--rec h1 { padding-left: 6.97vw; }
.page-banner--franq h1 { padding-left: 14.8vw; }  /* 실측 franchise H1 x=204 */
.rec-body { padding: 6.5vw 6.97vw; color: var(--green-btn); }
.rec-body h3 { color: var(--green-btn); margin: 2.9vw 0 2.3vw; }
.rec-body h3:first-child { margin-top: 0; }
.rec-body p { font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; margin-bottom: 1.16vw; color: var(--green-btn); }
.rec-list { list-style: disc; padding-left: 2.9vw; margin-bottom: 1.4vw; }
.rec-list li { font-size: clamp(14px, 1.402vw, 23px); line-height: 1.6; margin-bottom: 0.65vw; color: var(--green-btn); }
.rec-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15vw; height: 4.87vw; min-height: 48px; padding: 0 2.2vw;
  margin: 1.4vw 0 1.8vw;
  border: 2px solid var(--green-btn); border-radius: var(--radius-pill);
  color: var(--green-btn); background: transparent;
  font-family: var(--font-ui); font-size: clamp(12px, 1.16vw, 19px);
}
.rec-btn:hover { background: var(--green-btn); color: var(--white); }
@media (max-width: 799px) {
  .rec-btn { min-width: 40vw; height: 12vw; }
}

/* ---------------- Responsive ---------------- */
/* 원본 데스크톱 레이아웃은 ~800px까지 유지 (실측: 958px에서도 풀 내비) */
@media (max-width: 799px) {
  h1 { font-size: 46px; }
  h2 { font-size: 34px; }
  .hero h1 { max-width: 100%; }
  .main-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--green-header);
    flex-direction: column; align-items: flex-start;
    padding: 20px 6vw 30px; gap: 6px;
  }
  .main-nav.open { display: flex; }
  .dropdown .dropdown-panel { position: static; transform: none; display: block; box-shadow: none; padding-left: 16px; }
  .nav-toggle { display: block; }
  .header-order { display: none; }
  .split { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .contact-cols, .contact-split { grid-template-columns: 1fr; }
  .contact-cols .giant { font-size: 46px; }
  .cards { grid-template-columns: 1fr; gap: 40px; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 12px; }
  .ing-grid { grid-template-columns: repeat(2, 1fr); }
  .commit-grid { grid-template-columns: 1fr; }
  .page-banner { height: 44vh; }
  .btn { height: 62px; min-width: 190px; font-size: 16px; }
  body { font-size: 13.5px; }
  .menu-item .menu-name, .menu-item .menu-desc, .card .card-desc { font-size: 13.5px; }
}