/*
 * 상생마켓 홈페이지 메인 페이지 스타일
 * 소스: 디자인 확정본 01-main-v11-pc.html의 <style> 블록(24~207행)을 그대로 이식.
 * 핵심 값(프라이머리 그린·기본 텍스트·최대 폭·헤더 높이·카드 라운드·포커스 색)만
 * CSS 변수로 뽑아 pm#406(반응형 대응)에서 손대기 쉽게 정리했다.
 * 그 외 색·간격·타이포는 확정본 수치를 그대로 유지한다(임의 변경 없음).
 */

:root {
  /* 브랜드 그린 */
  --color-primary: #2E7D32;
  --color-primary-hover: #256B29;
  --color-primary-active: #1B5E20;
  --color-focus: #79B67E;

  /* 텍스트 */
  --color-text: #1F2421;
  --color-text-muted: #6B736C;

  /* 레이아웃 */
  --max-width: 1180px;
  --header-height: 76px;
  --radius-card: 16px;
  --radius-btn: 12px;

  /* pm#406 반응형 브레이크포인트 참고값 — CSS 커스텀 속성은 미디어 쿼리 조건에는 쓸 수 없어
     @media (max-width:980px) 처럼 리터럴 값을 그대로 둔다. 값 변경 시 아래 두 개도 함께 맞출 것. */
  --bp-tablet: 980px;
  --bp-mobile: 620px;
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }
body { background: #fff }
html { scroll-behavior: smooth }
/* pm#406 코드리뷰 반영: html·body에 동시에 overflow-x를 걸면 body가 자체 스크롤 컨테이너가 되어
   sticky 헤더가 깨지고 body.style.overflow='hidden' 스크롤 잠금도 무효화된다 — 제거.
   가로 스크롤은 실제 오버플로 원인(닫힌 서랍의 fixed+transform 잔여 박스·이미지 min-width 등)을
   직접 없애는 방식으로 해결한다(아래 .drawer visibility, 서비스 소개 사진 min-width:0 참고). */

.pg {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.02em;
  word-break: keep-all;
}
.pg h1, .pg h2, .pg h3, .pg h4, .pg p { margin: 0 }
.pg a { color: var(--color-primary); text-decoration: none }
.pg a.btn-pri, .pg a.btn-onw { color: #fff }
.pg a.btn-onw { color: var(--color-primary-active) }
.pg button { white-space: nowrap }

/* 헤더 안쪽 컨테이너 — 원본 인라인 스타일(max-width:1180px;height:76px)을 변수로 정리 */
.hd-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── 섹션 리빌(.rv) — 화면 진입 시 아래→위로 떠오르며 노출 ── */
.pg.anim .rv { opacity: 0; transform: translateY(44px); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1) }
.pg.anim .rv.on { opacity: 1; transform: none }
@keyframes heroIn { to { opacity: 1; transform: none } }
.pg.anim .hero-l>* { opacity: 0; transform: translateY(26px); animation: heroIn .75s cubic-bezier(.22,1,.36,1) forwards }
.pg.anim .hero-l>*:nth-child(2) { animation-delay: .1s }
.pg.anim .hero-l>*:nth-child(3) { animation-delay: .2s }
.pg.anim .hero-l>*:nth-child(4) { animation-delay: .3s }
.pg.anim .hero-v { opacity: 0; animation: heroIn .9s .25s cubic-bezier(.22,1,.36,1) forwards }
@keyframes floatY { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-18px) } }
.hero-v img { animation: floatY 5.5s ease-in-out 1.6s infinite }
.steps-g .stepn { box-shadow: 0 0 0 7px #F5F8F5 }
.pg.anim .steps>.step, .pg.anim .band>.bandi { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1) }
.pg.anim .steps.on>.step, .pg.anim .band.on>.bandi { opacity: 1; transform: none }
.pg.anim .steps>.step:nth-child(2), .pg.anim .band>.bandi:nth-child(2) { transition-delay: .12s }
.pg.anim .steps>.step:nth-child(3), .pg.anim .band>.bandi:nth-child(3) { transition-delay: .24s }
.pg.anim .steps>.step:nth-child(4) { transition-delay: .36s }
.pg header { transition: box-shadow .3s ease }
.pg header.scrolled { box-shadow: 0 10px 28px rgba(20,40,26,.09) }

/* 움직임 최소화 설정 시 리빌·패럴랙스·부유 애니메이션 전부 비활성 */
@media (prefers-reduced-motion: reduce) {
  .pg.anim .hero-l>*, .pg.anim .hero-v { opacity: 1; transform: none; animation: none }
  .hero-v img { animation: none }
  .pg.anim .steps>.step, .pg.anim .band>.bandi { opacity: 1; transform: none; transition: none }
  .pg.anim .rv { opacity: 1; transform: none; transition: none }
  html { scroll-behavior: auto }
}

/* ── pm#406: 980px 이하 햄버거 버튼 — 기본은 숨김, PC 화면 회귀 없음 ── */
.hamburger {
  display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; padding: 0;
}
.hamburger span { display: block; width: 20px; height: 2px; background: var(--color-text); border-radius: 2px }

/* ── pm#406: 오른쪽에서 밀려 나오는 서랍 메뉴 ──
   z-index는 확정본 수치(서랍 99/100 < 모달 110)를 그대로 따른다 — 드로어와 모달은 동시에 열리는
   경로가 없어 순서 자체가 시각적으로 드러나지는 않지만, 값을 확정본과 맞춰 둔다(main.js 주석 참고). */
.drawer-bg { position: fixed; inset: 0; z-index: 99; background: rgba(20,30,22,.45); display: none }
.drawer-bg.on { display: block }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; width: 290px; max-width: 85vw;
  background: #fff; box-shadow: -16px 0 48px rgba(20,40,26,.18);
  transform: translateX(102%);
  /* 닫힌 상태에선 visibility:hidden으로 포커스·스크린리더 접근을 완전히 차단한다(코드리뷰 Critical #3) —
     닫힘 애니메이션 동안은 계속 보여야 하므로 visibility 전환에만 .3s 지연을 준다(열릴 때는 지연 없음). */
  visibility: hidden;
  transition: transform .3s cubic-bezier(.22,1,.36,1), visibility 0s .3s;
  display: flex; flex-direction: column; padding: 24px; overflow-y: auto;
}
.drawer.on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.22,1,.36,1), visibility 0s }
.drawer a.mlink { display: block; font-size: 17px; font-weight: 700; color: var(--color-text); padding: 15px 4px; border-bottom: 1px solid #EFF2EF }
.drawer a.mlink:hover, .drawer a.mlink:active { color: var(--color-primary) }
/* pm#406: 서랍 슬라이드 모션도 움직임 최소화 설정을 따른다 — 즉시 열림/닫힘(visibility 지연도 함께 제거).
   반드시 .drawer 기본 선언(transition:.3s) 이후에 와야 한다 — 동일 특이성에서는 소스 순서가
   media 쿼리 여부와 무관하게 우선하므로, 위쪽의 공용 reduced-motion 블록에 두면 기본 규칙에 덮여 무시된다. */
@media (prefers-reduced-motion: reduce) {
  .drawer { transition: none }
}

/* pm#406: 마무리 CTA 버튼 그룹 폭 — 확정본 인라인 width:250px를 클래스로 이전(620px에서 폭 100% 전환 목적) */
.cta-actions { width: 250px }

/* pm#406: 헤더 오른쪽 버튼 그룹 — 원래 인라인 style="display:flex;..."로 박혀 있던 것을 클래스로 이전했다.
   인라인 스타일은 미디어 쿼리보다 우선순위가 높아 980px 이하에서 .hd-actions{display:none}이 먹히지
   않는 문제가 있었다(실측으로 발견) — 반드시 인라인이 아닌 클래스 규칙으로 둬야 숨김이 정상 동작한다. */
.hd-actions { display: flex; align-items: center; gap: 10px }

/* pm#406: 상점프로그램 카드 버튼 그룹 — 원래 인라인 style="...flex-wrap:wrap"이 박혀 있어
   620px에서 .program-actions{flex-wrap:nowrap} 오버라이드가 먹히지 않던 문제(코드리뷰 #9) —
   인라인 flex-wrap을 제거하고 클래스 기본값으로 이전했다(PC 동작은 동일하게 유지). */
.program-actions { flex-wrap: wrap }

/* pm#406: #program은 <section>이 아닌 <div>라 section[id]{scroll-margin-top} 규칙이 적용되지
   않아 원래 인라인 scroll-margin-top:96px로 보정돼 있었다 — !important 없이 620px에서 오버라이드할
   수 있도록 인라인을 걷어내고 여기 클래스 규칙으로 옮겼다(코드리뷰 #13, 값은 기존과 동일해 회귀 없음). */
#program { scroll-margin-top: 96px }

.pg :focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 8px }
.skip { position: absolute; left: -9999px; top: 0 }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--color-primary); color: #fff; padding: 11px 18px; border-radius: var(--radius-btn); font-size: 14.5px; font-weight: 800 }
/* 상단 고정 헤더 높이만큼 앵커 위치 보정 */
section[id] { scroll-margin-top: 96px }

.btn {
  border: 0; font-family: inherit; cursor: pointer; letter-spacing: -.02em; border-radius: var(--radius-btn);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .24s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px) scale(.994) }
.btn-pri { background: var(--color-primary); color: #fff; font-weight: 800 }
.btn-pri:hover { background: var(--color-primary-hover); box-shadow: 0 9px 20px rgba(20,40,26,.22); transform: translateY(-1px) }
.btn-pri:active { background: var(--color-primary-active); box-shadow: 0 3px 8px rgba(20,40,26,.2) }
.btn-sec { background: #fff; color: var(--color-text); border: 1.5px solid #DCE2DC; font-weight: 700 }
.btn-sec:hover { border-color: var(--color-primary); color: var(--color-primary); background: #F4FAF5; transform: translateY(-1px) }
.btn-sec:active { background: #E8F3E9 }
.btn-dark { background: var(--color-text); color: #fff; font-weight: 800 }
.btn-dark:hover { background: #333B35; box-shadow: 0 9px 20px rgba(20,40,26,.24); transform: translateY(-1px) }
.btn-onw { background: #fff; color: var(--color-primary-active); font-weight: 800 }
.btn-onw:hover { background: #EDF6EE; box-shadow: 0 9px 20px rgba(0,0,0,.18); transform: translateY(-1px) }
.btn-ghw { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); font-weight: 700 }
.btn-ghw:hover { background: rgba(255,255,255,.14); border-color: #fff; transform: translateY(-1px) }

/* ── 상단 탭: 현재 보고 있는 섹션이 표시된다 ── */
.nav { display: flex; align-items: center; gap: 30px; white-space: nowrap }
.nav a { position: relative; font-size: 15.5px; font-weight: 700; color: #3E4741; padding: 7px 1px; transition: color .2s ease }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .26s cubic-bezier(.22,1,.36,1) }
.nav a:hover { color: var(--color-text) }
.nav a:hover::after { transform: scaleX(1) }
.nav a.cur { color: var(--color-primary) }
.nav a.cur::after { transform: scaleX(1) }

/* ── 서브페이지 공통(policy·download·guide) ──
   원래 policy.css에만 있던 규칙인데 pm#591로 다운로드·이용 가이드 페이지가 같은 패턴을 쓰게 되어
   main.css로 올렸다. 세 페이지가 한 정의를 공유해야 한쪽만 바뀌는 사고가 없다. */

/* 서브페이지는 기획서 §6.5 확정대로 햄버거를 두지 않는다 — 980px 이하에서 로고 옆에 이 링크만 노출 */
.home-link { display: none; font-size: 14px; font-weight: 700; color: #3E4741; padding: 10px 4px }
.home-link:hover { color: var(--color-primary) }

/* 알약형 탭 — policy는 문서 탭(button), download는 시작 안내 앵커(a)로 같은 모양을 쓴다 */
.dnav { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px }
.dtab {
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--color-text-muted);
  background: #fff; border: 1.5px solid #E3E8E3; border-radius: 100px; cursor: pointer;
  padding: 11px 20px; letter-spacing: -.02em; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
/* <a>로 쓰는 쪽(download)에서 padding이 버튼과 같게 먹도록 — <button>은 기본값으로 이미 동일하다 */
a.dtab { display: inline-flex; align-items: center }
.dtab:hover { color: var(--color-text); border-color: #CFE3D3; background: #F7FAF7 }
/* 지금 보고 있는 문서·섹션 탭은 초록으로 채워진다(기획서 §6.4) */
.dtab.cur { color: #fff; font-weight: 800; border-color: var(--color-primary); background: var(--color-primary) }
.pg a.dtab.cur { color: #fff }

/* 980px 이하에서 감추는 유틸 — 05 헤더의 "상점프로그램 다운로드"처럼
   모바일에서는 히어로 CTA가 같은 역할을 대신하는 버튼에 쓴다 */
@media (max-width: 980px) {
  .home-link { display: inline-flex; align-items: center }
  .hide-m { display: none }
}

/* pm#591: 앱이 아직 스토어에 공개되지 않은 동안의 표기.
   links.js 값이 비어 main.js가 aria-disabled를 붙인 상태에서만 배지가 뜬다 —
   스토어 주소를 채우는 순간 배지도 함께 사라지므로 별도 해제 작업이 필요 없다. */
.pg [data-link][data-soon][aria-disabled="true"] { flex-wrap: wrap; cursor: default; opacity: .72 }
.pg [data-link][data-soon][aria-disabled="true"]::after {
  content: '출시 준비 중';
  font-size: 11px; font-weight: 700; letter-spacing: -.01em;
  background: rgba(255,255,255,.18); border-radius: 100px; padding: 3px 8px;
}

.sbadge {
  display: flex; align-items: center; gap: 12px; border: 1.5px solid #E3E8E3; border-radius: var(--radius-btn); padding: 12px 22px; background: #fff; cursor: pointer; font-family: inherit; color: inherit;
  transition: border-color .2s ease, box-shadow .24s ease, transform .12s ease;
}
.sbadge:hover { border-color: #CFE3D3; box-shadow: 0 10px 24px rgba(20,40,26,.1); transform: translateY(-2px) }
.sbadge .sb1 { font-size: 10.5px; color: var(--color-text-muted); font-weight: 700; text-align: left }
.sbadge .sb2 { font-size: 17px; font-weight: 800; text-align: left }

.dlwrap .dlqr { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; z-index: 60 }
.dlwrap:hover .dlqr, .dlwrap:focus-within .dlqr { opacity: 1; visibility: visible; transform: translateY(0) }

.sec { max-width: var(--max-width); margin: 0 auto; padding-left: 32px; padding-right: 32px }
.eb { font-size: 13px; font-weight: 800; color: var(--color-primary); letter-spacing: .04em }
.h-lg { font-size: clamp(30px,3.5vw,42px); font-weight: 800; letter-spacing: -.045em; line-height: 1.22; text-wrap: balance }
.h-md { font-size: clamp(26px,2.6vw,32px); font-weight: 800; letter-spacing: -.04em; line-height: 1.28; text-wrap: balance }
.h-sm { font-size: 24px; font-weight: 800; letter-spacing: -.035em; line-height: 1.32; text-wrap: balance }
.lead { font-size: 16.5px; color: var(--color-text-muted); line-height: 1.8; text-wrap: pretty }
.pill { display: inline-block; background: #F1F8F2; border: 1px solid #D5E5D7; color: var(--color-primary); font-size: 13px; font-weight: 800; padding: 7px 14px; border-radius: 100px }

.card { border: 1px solid #E3E8E3; border-radius: var(--radius-card); transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease }
.card:hover { box-shadow: 0 14px 34px rgba(20,40,26,.1); transform: translateY(-3px); border-color: #CFE3D3 }

.grain { position: relative }
.photo { border-radius: var(--radius-card); object-fit: cover; width: 100%; display: block }
.grain::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.05'/></svg>");
}

.ilist { border-top: 1px solid #EFF2EF }
.irow { display: flex; gap: 22px; align-items: baseline; padding: 18px 6px; border-bottom: 1px solid #EFF2EF; transition: background-color .24s ease }
.irow:hover { background: #F7FAF7 }
.iname { flex: 0 0 130px; font-size: 18px; font-weight: 800; letter-spacing: -.035em; transition: color .22s ease, transform .22s ease }
.irow:hover .iname { color: var(--color-primary); transform: translateX(4px) }
.idesc { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.7 }

.ilist2 { border-top: 1px solid #EFF2EF; margin-top: 28px }
.ilist2 .irow { align-items: center }
.ilist2 .irow img { width: 34px; height: 34px; object-fit: contain; flex: none }
.ilist2 .iname { flex: 0 0 170px }

.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; margin-top: 38px; position: relative }
.steps::before {
  content: ''; position: absolute; left: calc((100% - 66px)/8 + 30px); right: calc((100% - 66px)/8 + 30px); top: 18px; height: 2px;
  background: repeating-linear-gradient(90deg,#C4DBC7 0 6px,transparent 6px 12px);
}
.step { text-align: center; position: relative }
.stepn {
  width: 38px; height: 38px; border-radius: 100px; background: var(--color-primary); color: #fff; font-size: 15px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; margin: 0 auto; box-shadow: 0 0 0 7px #fff;
}
.stept { font-size: 17.5px; font-weight: 800; letter-spacing: -.035em; margin-top: 16px }
.pg p.stepd { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.75; margin: 7px auto 0; max-width: 210px }
.ftl { display: flex; flex-direction: column; gap: 6px; margin-top: 10px }
.ftl a { font-size: 14px; color: var(--color-text-muted); font-weight: 400 }
.ftl a:hover { color: var(--color-primary) }

.band { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 32px; border-top: 2px solid var(--color-text) }
.bandi { padding: 28px 32px 26px; border-right: 1px solid #EFF2EF }
.bandi:first-child { padding-left: 0 }
.bandi:last-child { border-right: 0; padding-right: 0 }
.bandt { font-size: 18px; font-weight: 800; letter-spacing: -.035em; margin-top: 18px }
.pg p.bandd { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.8; margin-top: 9px }

.wrow {
  display: flex; gap: 14px; align-items: flex-start; padding: 19px 0 19px 22px; border-left: 2px solid #E3E8E3;
  transition: border-color .26s ease, padding-left .26s ease;
}
.wrow:hover { border-left-color: var(--color-primary); padding-left: 28px }
.wrow i {
  display: flex; width: 20px; height: 20px; border-radius: 100px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 800;
  align-items: center; justify-content: center; flex: none; font-style: normal; margin-top: 3px;
}
.wrow b { font-size: 16px; font-weight: 800 }
.wrow span { font-size: 14.5px; color: var(--color-text-muted) }
.wrow ul { margin: 7px 0 0; padding-left: 17px; font-size: 14.5px; color: var(--color-text-muted); line-height: 1.95 }

.xrow { display: flex; gap: 20px; padding: 20px 26px; border-bottom: 1px solid #EAEEEA; font-size: 16px; transition: background-color .22s ease }
.xrow:last-child { border-bottom: 0 }
.xrow:hover { background: #F7FAF7 }
.xrow .xn { width: 190px; flex: none; font-weight: 800; display: flex; align-items: center; gap: 10px }
.xrow .xd { color: var(--color-text-muted) }

.cgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 26px; border-top: 1px solid #EFF2EF }
.crow { padding: 22px 4px; border-bottom: 1px solid #EFF2EF }
.clab { font-size: 12.5px; font-weight: 800; color: #8A928B; letter-spacing: .03em }
.cval { font-size: 18px; font-weight: 800; letter-spacing: -.035em; margin-top: 7px }
.cdesc { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.7; margin-top: 5px }

.chk { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: #3E4741; line-height: 1.6 }
.chk i { display: flex; width: 19px; height: 19px; border-radius: 100px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 800; align-items: center; justify-content: center; flex: none; font-style: normal; margin-top: 2px }

.faq { border-bottom: 1px solid #EFF2EF }
.faq summary { list-style: none; cursor: pointer; padding: 22px 4px; font-size: 17px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .2s ease }
.faq summary:hover { color: var(--color-primary) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; color: var(--color-primary); font-size: 22px; font-weight: 800; flex: none }
.faq[open] summary::after { content: '\2212' }
.faq p { padding: 0 4px 22px; font-size: 15.5px; color: var(--color-text-muted); line-height: 1.9 }

.nrow { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 6px; border-bottom: 1px solid #EFF2EF; transition: background-color .22s ease, padding-left .22s ease }
.nrow:hover { background: #F7FAF7; padding-left: 12px }
.nrow .nt { font-size: 16.5px; font-weight: 700 }
.nrow .nd { font-size: 14px; color: var(--color-text-muted); flex: none }

/* 입점 문의 팝업 — z-index는 확정본 수치(110)를 그대로 따른다(서랍 99/100보다 위) */
.modal-bg { position: fixed; inset: 0; z-index: 110; background: rgba(20,30,22,.45); display: none; align-items: center; justify-content: center; padding: 24px }
.modal-bg.on { display: flex }
.modal { background: #fff; border-radius: 20px; padding: 44px 46px 40px; max-width: 460px; width: 100%; box-shadow: 0 24px 64px rgba(20,40,26,.25); position: relative; overflow: hidden }
.modal::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 5px; background: var(--color-primary) }
.modal .mx { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; background: none; cursor: pointer; font-size: 22px; color: var(--color-text-muted); border-radius: 8px; line-height: 1 }
.modal .mx:hover { color: var(--color-text); background: #F1F4F1 }
.mtel { display: block; font-size: clamp(34px,5vw,42px); font-weight: 800; letter-spacing: -.03em; color: var(--color-primary); line-height: 1.1; margin-top: 8px }
.pg a.mtel { color: var(--color-primary) }
.pg a.mtel:hover { color: var(--color-primary-active) }

/* pm#406(반응형): 980px 이하 — 태블릿+폰 공통 "모바일 UI 모드".
   기획서 §6.5가 명시한 4가지(햄버거 서랍·QR 감춤·온이 감춤·입점문의 바텀시트)도
   handoff-spec.html §4의 브레이크포인트(980px에서 내비 숨김)에 맞춰 이 지점에서 함께 전환한다. */
@media (max-width: 980px) {
  .steps { grid-template-columns: repeat(2,1fr); gap: 30px 22px }
  .steps::before { display: none }
  .band { grid-template-columns: 1fr }
  .bandi { border-right: 0; border-bottom: 1px solid #EFF2EF; padding: 22px 0 }
  .bandi:last-child { border-bottom: 0 }
  .cgrid { grid-template-columns: 1fr; column-gap: 0 }
  .xrow { flex-direction: column; gap: 6px }
  .xrow .xn { width: auto }
  .nav { display: none }
  .hd-actions { display: none }
  .hamburger { display: flex }
  /* 폰에서는 자기 화면의 QR을 찍을 수 없다 — 스토어 버튼만 남긴다(기획서 §6.5) */
  .hero-qr { display: none }
  /* 온누리 캐릭터(온이)는 PC 전용(기획서 §6.5) */
  .onni-figure { display: none }
  /* 입점 문의 팝업 → 하단 바텀시트 전환(내용·JS 로직은 동일, 전환은 CSS만으로) —
     값은 mobile 목업(01-main-v11-mobile.html)의 확정 수치를 그대로 따른다(코드리뷰 #4·#5·#14). */
  .modal-bg { align-items: flex-end; padding: 0 }
  .modal {
    border-radius: 20px 20px 0 0; max-width: 480px; width: 100%; padding: 36px 24px 40px;
    /* 가로 모드 등 세로 공간이 좁은 환경에서 시트가 화면 위로 잘려 접근 불가능해지지 않도록 자체 스크롤 부여 */
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto;
  }
  /* 닫기 버튼도 확정본 폭 목업 값(44×44 터치 타깃)으로 키운다 */
  .modal .mx { width: 44px; height: 44px; top: 16px; right: 14px }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr }
  .irow { flex-direction: column; gap: 5px }
  .iname { flex: none }

  /* 헤더·섹션 여백 — mobile 목업(01-main-v11-mobile.html) 값으로 정밀 대응 */
  .hd-inner { height: 60px; padding: 0 20px }
  /* 헤더 로고도 목업 값(32px)으로 축소 — .hd-inner 안의 이미지는 로고 하나뿐이라 안전하게 특정된다 */
  .hd-inner img { height: 32px }
  .sec { padding-left: 20px; padding-right: 20px }
  /* 헤더가 낮아진 만큼 앵커 이동 시 위쪽 여백도 줄인다(스크롤 잠금·서랍과 무관, 앵커 스크롤 보정) */
  section[id] { scroll-margin-top: 76px }
  /* #program은 위쪽에서 인라인 대신 클래스 규칙(96px)으로 옮겨 뒀으므로 !important 없이 그대로 오버라이드된다 */
  #program { scroll-margin-top: 76px }

  /* 제목·리드 폰트 — 클래스 기반이라 인라인 스타일과 충돌 없이 안전하게 축소 가능 */
  .eb { font-size: 12.5px }
  .h-lg { font-size: 28px }
  .h-md { font-size: 24px }
  .h-sm { font-size: 22px }
  .lead { font-size: 15px }

  /* 히어로 — 좌우 배치가 위아래로 쌓인 뒤 텍스트를 중앙 정렬(이미지 DOM 순서는 유지) */
  .hero-l { text-align: center }
  #hero-download { justify-content: center }

  /* 이용 방법·입점 안내 스텝 — 1열에서는 아이콘+텍스트를 좌측 정렬 가로 배치로(mobile 목업 237행 대조) */
  .step { display: flex; gap: 16px; align-items: flex-start; text-align: left }
  /* flex row 안에서 번호 원이 찌그러지지 않도록 flex:none 고정(코드리뷰 #6, 확정본에도 있는 값) */
  .stepn { width: 34px; height: 34px; font-size: 14px; margin: 0; flex: none }
  .stept { font-size: 16.5px }
  .pg p.stepd { margin: 4px 0 0; max-width: none; text-align: left }

  /* 마무리 CTA·상점프로그램 버튼 그룹 — 세로 쌓기 + 버튼 폭 100%(mobile 목업 236·256행 대조) */
  .cta-actions { width: 100% }
  .cta-actions .btn { width: 100% }
  .program-actions { flex-direction: column; flex-wrap: nowrap }
  .program-actions .btn { width: 100% }
}