/* =========================================================
   NOBODY COFFEE — 가맹 1기 모집 랜딩페이지
   1. Fonts & Tokens
   2. Base
   3. Common components (container, section, title, button, chip, box, doodle, photo)
   4. Header
   5. Sections 1–9
   6. Footer
   7. Motion (reveal) & reduced motion
   8. Responsive (1024 / 760 / 640)

   옐로(--light) 사용처는 아래로 한정한다.
   CTA 버튼 · 히어로/문의 형광펜 · 타임라인·절차 진행선 · 활성 상태(타임라인 점, 절차 번호, 입력 포커스) · "11곳" 숫자
   ========================================================= */

/* ---------- 1. Fonts & Tokens ---------- */

/* 여기어때 잘난체 2: asset/fonts/ 에 파일을 넣으면 우선 적용, 없으면 잘난체(CDN)로 대체 */
@font-face {
  font-family: 'Jalnan2';
  src: url('asset/fonts/Jalnan2.woff2') format('woff2'),
       url('asset/fonts/Jalnan2.otf') format('opentype');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'yg-jalnan';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}
/* 원스토어 모바일고딕 타이틀 — 포인트 서체(--font-display).
   굵기가 하나뿐이라 100–900 전체를 이 파일로 받게 해서 가짜 볼드를 막는다 */
@font-face {
  font-family: 'OneStoreMobileGothicTitleFont';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* color — 키컬러는 옐로 1개 */
  --paper: #FFFBF0;
  --paper-deep: #F4EEDD;
  --ink: #1B1B1B;
  --ink-soft: #5A5650;
  --ink-faint: #9A958C;
  --light: #FFC93C;
  --bean: #3B1A0D;                         /* 로고 원두 브라운 — 로고 · 다크 섹션 형광펜 */
  --on-dark-soft: #BDB7AC;

  /* type */
  --font-display: 'OneStoreMobileGothicTitleFont', 'Jalnan2', 'yg-jalnan', 'Pretendard Variable', Pretendard, sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --fs-display: clamp(3rem, 6vw, 5.5rem);
  --fs-title: clamp(1.625rem, min(3.4vw, 5.4vh), 3rem);   /* 모든 섹션 타이틀 공통 — 한 화면 구성에 맞춰 화면 높이도 반영 */
  --fs-sub: clamp(1.125rem, 1.4vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.875rem;

  /* layout */
  --container: 120rem;                     /* 아주 큰 모니터에서만 제한 */
  --gutter: clamp(1.25rem, 3.125vw, 4rem);    /* 기준 화면 1840px → 57px */
  --grid-gap: clamp(1rem, 2.6vw, 3rem);    /* 기준 화면 1840px → 약 48px */
  --section-y: 7rem;                     /* 모든 섹션 상하여백 — 이 값 하나만 사용 (모바일은 아래 760px에서 한 값으로) */
  --header-h: 4rem;                        /* 기준 화면 64px */
  --logo-w: 6.5rem;                        /* 헤더 로고 목표 폭 (높이 약 39px) */
  --line: 2px solid var(--ink);
  /* 모서리 — 바깥 패널일수록 크게. 안쪽 요소는 '바깥 r − 안쪽 여백'으로 줄여 곡선이 겹쳐 보이게(동심원 보정) */
  --r-xs: 0.375rem;                        /* 작은 태그 · 테이프 · 패널 속 사진 */
  --r-sm: 0.75rem;                         /* 입력칸 · 작은 카드 */
  --r-md: 1rem;                            /* 카드 */
  --r-lg: 1.25rem;                         /* 패널 */
  --r-xl: 1.5rem;                          /* 말풍선 · 큰 사진 */

  /* 손그림 물결 밑줄 (잉크 / 다크 섹션용 종이색) */
  --wave-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 5 1, 15 1, 20 6 S 35 11, 40 6' fill='none' stroke='%231B1B1B' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --wave-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 12' preserveAspectRatio='none'%3E%3Cpath d='M0 6 C 5 1, 15 1, 20 6 S 35 11, 40 6' fill='none' stroke='%23FFFBF0' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");

  /* motion */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 2. Base ---------- */

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

/* 화면 배율 고정 — 크기는 모두 rem이고, PC에서는 1rem을 화면 크기에 비례시킨다.
   기준 화면 1840×832px에서 1rem = 16px. 폭(÷115)과 높이(÷52) 중 작은 쪽을 따라가서
   어떤 화면에서도 첫 화면 구도가 같은 비율로 보인다. 글자가 너무 작아지지 않도록 12px 하한 */
html {
  font-size: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
p { text-wrap: pretty; }

@media (min-width: 1025px) {
  html { font-size: max(12px, min(100vw / 115, 100vh / 52)); }
}

/* ---------- 3. Common ---------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--deep { background: var(--paper-deep); }
.section--dark { background: var(--ink); color: var(--paper); }

.display,
.sec-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: 1.12; }
.sec-title { font-size: var(--fs-title); line-height: 1.3; }

.sec-head { position: relative; margin-bottom: clamp(3rem, 5vw, 4.5rem); }
.sec-title { max-width: none; }   /* 타이틀 · 설명은 PC에서 한 줄 — 좁은 화면에서만 자연스럽게 줄바꿈 */
.sec-sub {
  margin-top: 1.25rem;
  font-size: var(--fs-sub);
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink-soft);
}
.section--dark .sec-sub { color: var(--on-dark-soft); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 형광펜 강조 — 히어로 · 문의 섹션에만 */
.hl {
  white-space: nowrap;
  padding: 0 0.06em;
  background-image: linear-gradient(var(--light), var(--light));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.38em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 다크 섹션: 옐로 위 흰 글씨 금지 → 글자 아래 굵은 밑줄로 */
.section--dark .hl {
  background-position: 0 100%;
  background-size: 100% 0.14em;
}

/* 박스 형광펜 — 다크 섹션 타이틀 강조. 원두 브라운이 왼쪽에서 쓱 그어진다 */
.mark {
  white-space: nowrap;
  margin: 0 0.06em;
  padding: 0 0.2em;
  background: linear-gradient(var(--bean), var(--bean)) no-repeat 0 55% / 100% 1.42em;   /* 모서리 없이, 글자 위아래로 살짝 여유 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 밝은 섹션용 — 같은 박스 형광펜을 라이트 옐로로 */
.mark--light { background-image: linear-gradient(var(--light), var(--light)); }
/* 어두운 섹션의 옐로 형광펜 — 글자는 잉크색으로 */
.section--dark .mark--light { color: var(--ink); }

/* 손그림 물결 밑줄 — 나머지 섹션 타이틀 강조 (잉크색) */
.ul {
  position: relative;
  white-space: nowrap;
}
.ul::after {
  content: '';
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: calc(50% + 0.56em);                   /* 원스토어 타이틀: 글자 아래 끝(중앙 +0.46em)보다 0.1em 아래 */
  height: 0.16em;
  background: var(--wave-ink) repeat-x 0 50% / 0.72em 100%;
  pointer-events: none;
}
.section--dark .ul::after { background-image: var(--wave-paper); }

/* 버튼 — CTA 한 종류만 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  height: 3.75rem;
  padding: 0 1.75rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 0.375rem 0.375rem 0 var(--ink); }
.section--dark .btn:hover { box-shadow: 0.375rem 0.375rem 0 var(--paper); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.section--dark .btn:focus-visible { outline-color: var(--paper); }
.btn__arrow {
  width: 2rem; height: 1rem;
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(0.25rem); }
.btn--sm { height: 2.375rem; padding: 0 1.25rem; font-size: 1rem; }
.btn--block { width: 100%; height: 4rem; }
/* 히어로 CTA — 원두 브라운 바탕 + 밝은 글자, 한 단계 작게 */
.btn.btn--bean {
  height: 3.25rem;
  padding: 0 1.5rem;
  background: var(--bean);
  color: var(--paper);
  font-size: 1.0625rem;
}

/* 칩 — 모두 테두리형(잉크 선 + 크림 배경), 살짝 회전 */
.num-chip,
.period {
  display: inline-block;
  border: var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
  transform: rotate(var(--rot, 0deg));
}
.num-chip {
  align-self: flex-start;
  padding: 0.25rem 0.875rem;
  font-size: var(--fs-label);
  line-height: 1.5;
}
.num-chip b { font-family: var(--font-mono); letter-spacing: 0.04em; }
.period {
  padding: 3px 0.75rem;
  font-size: var(--fs-label);
  line-height: 1.5;
}

/* 선 박스 그리드 — 선을 공유 */
.box-grid {
  display: grid;
  border-top: var(--line);
  border-left: var(--line);
}
.box-grid > li { border-right: var(--line); border-bottom: var(--line); }

/* 손그림 낙서 */
.doodle { display: block; overflow: visible; pointer-events: none; }
.doodle path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.section--dark .doodle path { stroke: var(--paper); }

/* 사진 */
.ph {
  position: relative;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--paper-deep);
}
.ph > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ph--dark { border-color: var(--paper); background: #2A2826; }

/* ---------- 4. Header ---------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 2px solid transparent;
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.header.is-scrolled,
.header.is-open {
  background: rgba(255, 251, 240, 0.94);
  -webkit-backdrop-filter: blur(0.75rem);
  backdrop-filter: blur(0.75rem);
  border-bottom-color: var(--ink);
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 100%;
}
.header__actions { display: flex; align-items: center; gap: 0.75rem; }
/* 로고 자리 — 실제 로고는 .wordmark 가 transform으로 여기에 들어온다 */
.header__slot {
  flex: none;
  width: var(--logo-w);
  height: 1px;
}
.btn--line { background: var(--paper); }
.logo {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.nav {
  position: relative;
  display: flex;
  gap: max(0px, calc(2.5rem - 32px));        /* 글자 사이 간격은 기존과 같게 (링크 좌우 패딩 16px × 2 만큼 뺌) */
}
.nav a {
  position: relative;
  z-index: 1;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  transition: color .2s var(--ease);
}
.nav a.is-current { font-weight: 700; }
.nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 호버 중에는 가리킨 메뉴만 진하게, 나머지는 살짝 흐리게 */
.nav.is-hovering a { color: var(--ink-soft); }
.nav.is-hovering a.is-hover { color: var(--ink); }
/* 위치·폭은 script.js가 정한다. 숨어 있다 나타날 때는 .is-placing으로 이동 없이 제자리에서 */
.nav-pill {
  position: absolute;
  top: 0; left: 0;
  z-index: 0;
  width: 0; height: 0;
  border-radius: 999px;
  background: rgba(27, 27, 27, 0.07);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    width 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity .2s var(--ease);
}
.nav-pill.is-on { opacity: 1; }
.nav-pill.is-placing { transition: opacity .2s var(--ease); }

/* 햄버거 — 모바일에서만 */
.menu-btn {
  display: none;
  position: relative;
  width: 2.375rem; height: 2.375rem;
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
}
.menu-btn__bar,
.menu-btn__bar::before,
.menu-btn__bar::after {
  position: absolute;
  left: 50%;
  width: 1.125rem; height: 2px;
  margin-left: -0.5625rem;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.menu-btn__bar { top: 50%; margin-top: -1px; }
.menu-btn__bar::before,
.menu-btn__bar::after { content: ''; left: 0; margin-left: 0; }
.menu-btn__bar::before { transform: translateY(-0.375rem); }
.menu-btn__bar::after { transform: translateY(0.375rem); }
.menu-btn[aria-expanded="true"] .menu-btn__bar { background: transparent; }
.menu-btn[aria-expanded="true"] .menu-btn__bar::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bar::after { transform: rotate(-45deg); }
.menu-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* ---------- 5-1. Hero ---------- */

/* 워드마크 — 헤더와 같은 레이어(z-index)의 fixed 요소.
   script.js 가 스크롤 진행도에 따라 transform(translate + scale)만 바꾼다 */
.wordmark {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: block;
  width: var(--wm-w, 0px);
  color: var(--ink);
  transform-origin: top left;
  will-change: transform;
  visibility: hidden;                          /* 위치 계산 전 깜빡임 방지 */
}
.wordmark.is-ready { visibility: visible; }
.wordmark.is-docking { transition: transform .35s var(--ease); }
.wordmark:focus-visible { outline: 3px solid var(--ink); outline-offset: 0.375rem; }
.wordmark__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark__ink { fill: var(--ink); fill-rule: evenodd; }
.wordmark__bean {
  fill: #3B1A0D;                                  /* 원두만 다크 브라운 */
  transform-box: fill-box;
  transform-origin: center;
  animation: bean-in 1s var(--ease-pop) .3s both;
}
/* 처음 로드할 때 한 번, 원두가 톡 떨어지듯 */
@keyframes bean-in {
  from { opacity: 0; transform: translateY(-18%) rotate(-24deg) scale(.6); }
  to { opacity: 1; transform: none; }
}

.hero {
  padding-top: calc(var(--header-h) + 0.5rem);   /* 사진이 헤더 바로 아래에서 시작 */
  padding-bottom: 1.5rem;
}
.hero__grid {
  /* 헤더 포함 첫 화면 안에 모두 들어오도록. 사진 높이 = 이 값 */
  --hero-h: calc(100vh - var(--header-h) - 2rem);
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
  column-gap: var(--grid-gap);
  min-height: var(--hero-h);
}
@supports (height: 100svh) {
  .hero__grid { --hero-h: calc(100svh - var(--header-h) - 2rem); }
}
/* 좌측: 사진과 같은 높이. 위 = 워드마크(사진 윗선), 아래 = 메시지 묶음(사진 하단에서 --gutter만큼) */
.hero__main {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vh, 120px);              /* 워드마크-헤드라인 최소 간격. 남는 공간은 margin-top: auto가 차지 */
}
.hero__copy {
  margin-top: auto;
  padding-bottom: var(--gutter);              /* 버튼 아래 → 사진 하단 = 화면 왼쪽 → 워드마크 */
}
/* 컬럼 폭에 꽉 차게. N 왼쪽의 둥근 여백(viewBox x≈6.7)이 헤드라인 글자의 왼쪽 여백과 거의 같아 따로 당기지 않는다 */
.hero__wm-spacer { width: 100%; aspect-ratio: 1023 / 381; }
.hero__chip {
  display: inline-block;
  margin-bottom: clamp(0.875rem, 1.4vw, 1.375rem);
  padding: 0.25rem 0.875rem;
  border: var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  word-spacing: -0.35em;                     /* Space Mono의 넓은 공백 보정 */
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 3.8vw, 76px);       /* 헤드라인 폭 ≈ 워드마크 폭의 90% */
  font-weight: normal;                        /* 한 굵기만 있는 서체라 가짜 볼드 방지 */
  line-height: 1.2;
  letter-spacing: -0.02em;
  word-break: keep-all;
  margin-bottom: 0.4em;                       /* 헤드라인 → 서브카피: 헤드라인 크기에 비례 */
}
.hero__lead {
  max-width: 34em;
  margin: 0 0 40px;
  color: #3F3B36;                             /* --ink-soft보다 한 단계 진하게 */
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}

/* 우측: 세로로 긴 대형 사진. 오른쪽 여백을 약 1vw까지 줄여 화면 끝에 붙인다 */
.hero__media {
  position: relative;
  min-height: 26.25rem;
  margin-right: calc(1vw - var(--gutter));
}
/* 사진 원본 비율이 행 높이를 밀어 올리지 않도록 칸에 맞춰 채운다 */
.hero__photo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--r-xl);
  background: var(--paper-deep);
}
/* 슬라이드: 모두 겹쳐 두고, 새 사진이 위로 올라와 왼쪽 → 오른쪽으로 펼쳐진다 */
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--x, 50%) 50%;
  opacity: 0;
}
.hero__slide.is-current { z-index: 1; opacity: 1; }
.hero__slide.is-prev { z-index: 1; opacity: 1; }
.hero__slide.is-entering {
  z-index: 2;
  opacity: 1;
  animation: hero-wipe 1.1s var(--ease) both;
}
.hero__slide.is-intro { animation: hero-zoom 1.2s var(--ease) both; }
@keyframes hero-zoom {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
@keyframes hero-wipe {
  from { clip-path: inset(0 100% 0 0); transform: scale(1.06); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); }
}

/* ---------- 5-2. 현실 공감 ---------- */

.worry { position: relative; overflow: hidden; }
.worry > .container { position: relative; }
/* 타이틀 크기는 '매장의 하루' 섹션과 같게 (아래 5-4의 .day__head 규칙과 함께 정의) */
.worry__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.worry__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0.5rem 0.75rem 3.5rem;           /* 아래로 걸친 일러스트 자리 */
}
.worry-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 15rem;
  padding: 1.5rem 2rem 1.75rem;
  border: var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  transition: transform .25s var(--ease);
}
/* li는 층을 만들지 않아서(z-index·transform 없음) 일러스트가 이웃 카드 위로 올라올 수 있다 */
.worry-item {
  position: relative;
  display: flex;
  margin-inline: -0.5rem;                          /* 이웃 카드와 살짝 겹치게 */
}
.worry-item > .worry-card { flex: 1; }
.worry-card { box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, .35); }
/* 쌓임 순서: 카드 1 < 2 > 3 < 4. 일러스트는 자기 카드 바로 위, 다음 카드 아래 → 살짝 가려져 입체감 */
.worry-item:nth-child(1) { --z: 10; }
.worry-item:nth-child(2) { --z: 30; }
.worry-item:nth-child(3) { --z: 20; }
.worry-item:nth-child(4) { --z: 40; }
.worry-item .worry-card { z-index: var(--z); }
.worry-item .worry-card__art { z-index: calc(var(--z) + 5); }
.worry-item:hover .worry-card { z-index: 50; box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .45); }
.worry-item:hover .worry-card__art { z-index: 55; }
.worry-card__title {
  margin: 1.25rem 0 0.625rem;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.4;
}
.worry-card p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); }
/* 카드 오른쪽 아래에 걸치는 일러스트 — 아래로 살짝 튀어나오고, 옆 카드에 조금 가린다 */
.worry-card__art {
  position: absolute;
  width: auto;
  margin-bottom: calc(var(--y, 0px) * -1);         /* 카드의 세로 어긋남(--y)을 따라간다 */
  pointer-events: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0.375rem 0.5rem rgba(0, 0, 0, .3));
  transition: translate .25s var(--ease);
}
.worry-item:hover .worry-card__art { translate: 0 -0.5rem; }
.worry-card__art--grind  { right: 1.25rem;  bottom: -1rem;    height: 7rem; }
.worry-card__art--cup    { right: 0.5rem;   bottom: -1rem;    height: 4.5rem; }
.worry-card__art--frappe { right: 1rem;     bottom: -0.75rem; height: 7.25rem; }
.worry-card__art--drip   { right: 1rem;     bottom: -0.875rem; height: 6.5rem; }
/* hover: 카드가 들리면서 일러스트도 흔들 · 폴짝 */
.worry-item:hover .worry-card__art.is-jiggle { animation: art-jiggle .7s var(--ease) both; }
.worry-item:hover .worry-card__art.is-hop    { animation: art-hop .6s var(--ease-pop) both; }
@keyframes art-jiggle {
  0%, 100% { rotate: 0deg; }
  20% { rotate: -9deg; }
  45% { rotate: 7deg; }
  70% { rotate: -4deg; }
}
@keyframes art-hop {
  0% { translate: 0 0; rotate: 0deg; }
  40% { translate: 0 calc(-0.5rem - 18%); rotate: -6deg; }
  70% { translate: 0 -0.5rem; rotate: 2deg; }
  100% { translate: 0 -0.5rem; rotate: 0deg; }
}
.worry__foot {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2.5rem;
  font-size: 1.375rem;
  font-weight: 700;
}
.doodle--curl { flex: none; width: 4.5rem; height: 3.5rem; margin-top: 0.625rem; }

/* ---------- 5-3. 보이지 않는 점장 ---------- */

.manager { position: relative; overflow: clip; }
.manager > .container { position: relative; z-index: 1; width: 100%; }
/* 오른쪽 아래 은은한 로고 — 말풍선(종이 배경) 아래로 살짝 숨어 들어간다 */
.manager__logo {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--section-y) * 0.5);
  width: min(40vw, 46rem);
  height: auto;
  opacity: .06;
  pointer-events: none;
}
.manager__head { margin-bottom: clamp(1.5rem, 4.5vh, 3.25rem); }
.manager__head .sec-sub { margin-top: clamp(0.625rem, 1.6vh, 1.25rem); font-weight: 400; }

/* 좌: 캐릭터 | 우: 말풍선 4개를 대화처럼 세로로 — 꼬리는 모두 캐릭터(왼쪽)를 향하고, 들여쓰기를 지그재그로 */
.mgr-grid {
  display: grid;
  grid-template-columns: clamp(14rem, min(32vw, (100svh - var(--header-h) - 17rem) * 0.778), 34rem) minmax(0, 1fr);
  grid-template-areas: "fig stats";
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5.5rem);
}
.mgr-stats {
  grid-area: stats;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.75rem, 2vh, 1.25rem);
}

/* 캐릭터는 허리에서 잘린 이미지 — 섹션 아래 여백만큼 끌어내려, 잘린 선이 다음 섹션 시작선에 딱 닿게 */
.mgr-fig { grid-area: fig; position: relative; align-self: end; margin-bottom: calc(-1 * var(--section-y) - 2.4%); }   /* 2.4% = 이미지 아래 투명 여백(폭 기준) */
.mgr-fig img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

/* 말풍선 — 사이트 공통 2px 잉크 선 스타일. 꼬리는 선 두 변만 있는 정사각형을 45° 돌려 왼쪽에 붙인다 */
.mgr-stat {
  position: relative;
  min-width: 0;
  max-width: 100%;
  margin-left: var(--x, 0);
  padding: clamp(1rem, 1.6vw, 1.375rem) clamp(1.25rem, 2vw, 1.75rem);
  border: var(--line);
  border-radius: var(--r-xl);
  background: var(--paper);
  transform-origin: 0 50%;
}
.mgr-stat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-0.5rem - 1px);
  width: 1rem;
  height: 1rem;
  margin-top: -0.5rem;
  border: var(--line);
  border-right-color: transparent;
  border-top-color: transparent;
  background: var(--paper);
  rotate: 45deg;
}
/* 지그재그 들여쓰기(열 폭 기준 %) — 똑같은 카드 4장이 줄 서 있지 않게, 오른쪽 빈 공간까지 고르게 */
.mgr-stat--tl { --x: 0%; }
.mgr-stat--bl { --x: 16%; }
.mgr-stat--tr { --x: 5%; }
.mgr-stat--br { --x: 22%; }
/* PC에선 한 줄로 */
.mgr-stat__say br { display: none; }

.mgr-stat__say {
  margin: 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.5rem);
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  word-break: keep-all;
}
.mgr-stat__meta {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink-faint);
}
.mgr-stat__meta b { font-weight: 700; color: var(--ink-soft); }
.mgr-stat__icon {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
  padding: 0.1875rem;
  border-radius: 50%;
  border: var(--line);
  background: var(--light);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 진입 모션: 캐릭터가 먼저 올라오고, 말풍선이 꼬리 쪽에서 0.1s 간격으로 살짝 부풀어 오른다 */
.js .mgr-fig { opacity: 0; translate: 0 1.5rem; transition: opacity .7s var(--ease), translate .8s var(--ease); }
.js .mgr-grid.is-in .mgr-fig { opacity: 1; translate: 0 0; }
.js .mgr-stat {
  opacity: 0;
  scale: .9;
  transition: opacity .45s var(--ease), scale .6s var(--ease);
  transition-delay: calc(.6s + var(--i, 0) * .1s);
}
.js .mgr-grid.is-in .mgr-stat { opacity: 1; scale: 1; }

/* ---------- 5-4. 매장의 하루 ---------- */
/* 스크롤 구간(.day__scroller) 동안 무대(.day__stage)가 화면에 붙어 있고,
   시계 아래 좌(본사, 어두운 관제 화면) · 우(점주, 밝고 한가한 화면) 두 단이 시간에 맞춰 함께 바뀐다 */

.day {
  --p: 0;
  background: color-mix(in srgb, var(--paper-deep) calc(var(--p) * 100%), var(--paper));
}
/* 타이틀 · 서브타이틀도 무대 안에 — 한 화면에 제목부터 두 단까지 다 보이게 크기를 화면 높이에 맞춘다 */
.day__head { flex: none; margin: 0; }
.day__head .sec-sub,
.worry__head .sec-sub { margin-top: clamp(0.375rem, 1.2vh, 0.875rem); font-size: clamp(0.9375rem, min(1.3vw, 2.2vh), 1.1875rem); }
.js .day__scroller { height: calc(var(--steps) * 62vh + 100vh); }
.js .day__stage {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}
.day__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 3vh, 2.25rem);
  height: 100%;
  padding-block: clamp(1.25rem, 4vh, 3rem);
}

/* 타이틀 | 시계 — 한 줄에. 눈금은 시간 글자 없이 얇은 선 하나로 */
.day__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
}
.day__clock {
  flex: none;
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(2.75rem, min(5.6vw, 9vh), 5.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.day__clock span { display: inline-block; }
.day__clock span.tick { animation: tick .45s var(--ease); }
@keyframes tick {
  from { opacity: 0; transform: translateY(0.875rem); }
  to { opacity: 1; transform: none; }
}
.day__ticks {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  height: 0.75rem;
}
.day-tick { position: relative; }
.day-tick span { display: none; }
/* 눈금 점 — 막대 위에 놓인다 */
.day-tick::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  translate: 0 -50%;
  transition: background-color .3s var(--ease), scale .3s var(--ease);
}
.day-tick.is-past::after, .day-tick.is-active::after { background: var(--light); }
.day-tick.is-active::after { scale: 1.35; }
.day__ticks-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  translate: 0 -50%;
}
.day__ticks-fill {
  display: block;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

/* 두 단 — 본사 | 점주. 상자 없이 '화면 + 캡션'만 */
.day__split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4.5rem);
}
.day-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 화면 — 본사: 매장 카메라 / 점주: 지금 하고 있는 일 아이콘 */
.day-panel__view {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.day-panel--hq .day-panel__view { background: #2A2A2A; }
.day-panel--hq .ph {
  position: absolute;
  inset: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.day-panel--hq .ph img { width: 100%; height: 100%; object-fit: cover; }
.day-panel--hq .ph.is-active { opacity: 1; }
.day-panel--owner .day-panel__view {
  background: var(--paper);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 12%, transparent);   /* 섹션 배경이 짙어져도 화면 경계가 보이게 */
}

/* 화면 왼쪽 위 칩 — 본사: LIVE 카메라 / 점주: 오늘 쓴 시간 */
.day-panel__chip {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgba(27, 27, 27, .72);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.5;
  white-space: nowrap;
}
.day-panel__live {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #FF5A3C;
  animation: live 1.6s ease-in-out infinite;
}
@keyframes live { 50% { opacity: .25; } }
.day__counter {
  background: var(--ink);
  font-family: var(--font-body);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.day__counter-value {
  color: var(--light);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
}
.day__counter-value.is-final { font-family: var(--font-body); font-weight: 800; }

.day-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(40%, 11rem);
  height: auto;
  max-height: 55%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity .45s var(--ease), translate .5s var(--ease);
}
.day-icon.is-active { opacity: 1; translate: 0 0; }
.day-icon * { vector-effect: non-scaling-stroke; }

/* 캡션 — 누가(작게) + 지금 하는 일(크게) */
.day-panel__who {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: clamp(1rem, 2.4vh, 1.5rem) 0 0.375rem;
  color: var(--ink-soft);
  font-size: var(--fs-label);
  font-weight: 600;
}
.day-panel__who::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ink);
}
.day-panel--owner .day-panel__who::before { background: var(--light); box-shadow: inset 0 0 0 2px var(--ink); }

/* 단계 문구 — 같은 칸에 겹쳐 두고 지금 시간 것만 보인다 (높이가 흔들리지 않게) */
/* 두 줄 높이로 고정 — 좌우 화면의 아래 끝선이 맞도록 */
.day-panel__steps {
  display: grid;
  font-size: clamp(1.0625rem, 1.4vw, 1.3125rem);
  line-height: 1.45;
  min-height: 2.9em;
}
.day-step { grid-area: 1 / 1; }
.js .day-step {
  opacity: 0;
  translate: 0 0.5rem;
  transition: opacity .4s var(--ease), translate .45s var(--ease);
  pointer-events: none;
}
.js .day-step.is-active { opacity: 1; translate: 0 0; pointer-events: auto; }
.day-step__text {
  margin: 0;
  font-weight: 700;
  word-break: keep-all;
}
.day-panel--owner .day-step__text { font-weight: 600; }


/* 매장의 하루 — 좁은 화면: 시계는 타이틀 아래, 두 단은 위아래로 */
@media (max-width: 760px) {
  .day__inner { gap: 1rem; }
  .day__top { flex-direction: column; align-items: flex-start; gap: 0.875rem; }
  .day__head .sec-sub { font-size: 0.875rem; line-height: 1.5; }
  .day__clock { font-size: clamp(2.25rem, 11vw, 2.75rem); }
  .day__split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem; }
  .day-panel__view { border-radius: var(--r-md); }
  .day-panel__chip { left: 0.625rem; top: 0.625rem; padding: 0.125rem 0.625rem; font-size: 0.75rem; }
  .day__counter { font-size: 0.8125rem; }
  .day__counter-value { font-size: 0.875rem; }
  .day-panel__who { margin: 0.625rem 0 0.25rem; }
  .day-panel__steps { font-size: 1rem; }
}

/* ---------- 5-5. 직영점 기록 ---------- */
/* 앞 섹션의 '걱정 01~04' 칩에 '기록 01~04' 칩으로 답한다. 페이지 공통 종이 카드(잉크 선 + 오프셋 그림자) 4장을 나란히.
   옐로는 타이틀 형광펜 · 눈썹 라벨의 점 · 99.2% 밑줄에만 */

.record__head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }


.rec-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 1.8vw, 1.75rem);
  /* 오프셋 그림자 · hover 이동이 잘리지 않게 여유 */
  padding: 0 0.5rem 0.5rem 0;
}
.rec-item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 2vw, 1.875rem);
  border: var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: 0.375rem 0.375rem 0 var(--ink);
  transition: transform .3s var(--ease-pop), box-shadow .3s var(--ease-pop);
}
.rec-item:hover { transform: translate(-3px, -3px); box-shadow: 0.5625rem 0.5625rem 0 var(--ink); }

/* 숫자 줄 높이를 맞춰, 99.2%가 조금 커도 아래 라벨들이 한 줄에 선다 */
.rec-item__num {
  display: flex;
  align-items: flex-end;
  height: clamp(3.5rem, 5.4vw, 5.25rem);
  margin-top: clamp(1rem, 2vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.rec-item__num small + span { margin-left: 0.2em; }
.rec-item__num small { margin-left: 0.08em; font-family: var(--font-body); font-size: 0.42em; font-weight: 800; letter-spacing: 0; }
.rec-item--key .rec-item__num { font-size: clamp(2.75rem, 4.4vw, 4.5rem); }
.rec-item__hl {
  padding: 0 0.08em;
  background: linear-gradient(var(--light), var(--light)) no-repeat 0 92% / 100% 0.32em;
}
.js .rec-item__hl { background-size: 0% 0.32em; transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .5s; }
.js .is-in .rec-item__hl { background-size: 100% 0.32em; }

/* 라벨 아래 옅은 점선 한 줄 — 카드 안을 숫자 / 설명으로 나눈다 */
.rec-item__label {
  margin-top: 1rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 22%, transparent);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 800;
  line-height: 1.4;
}
.rec-item__desc {
  margin-top: 0.875rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  word-break: keep-all;
}

.record__note {
  margin-top: 1.25rem;
  color: var(--ink-faint);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* 중간 폭: 설명 속 줄바꿈은 풀어서 칸 폭에 맞게 */
@media (max-width: 1200px) {
  .rec-item__desc br { display: none; }
}
/* 태블릿: 2 × 2 */
@media (max-width: 1024px) {
  .rec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rec-list { gap: 0.875rem; padding: 0 0.25rem 0.25rem 0; }
  .rec-item { padding: 1rem; border-radius: var(--r-md); box-shadow: 0.25rem 0.25rem 0 var(--ink); }
  .rec-item:hover { transform: none; box-shadow: 0.25rem 0.25rem 0 var(--ink); }
  .rec-item .num-chip { padding: 0.125rem 0.625rem; font-size: 0.875rem; }
  .rec-item__num { height: 2.75rem; margin-top: 0.75rem; font-size: clamp(1.625rem, 7vw, 2rem); }
  .rec-item--key .rec-item__num { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .rec-item__label { margin-top: 0.75rem; padding-bottom: 0.625rem; font-size: 1rem; }
  .rec-item__desc { margin-top: 0.625rem; font-size: 0.9375rem; }
}

/* ---------- 5-5b. 대표의 한마디 (별도 섹션) ---------- */

.founder {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: calc(var(--grid-gap) * 2);
  align-items: center;
  padding-inline: 2rem;
}
.polaroid {
  --rot: -4deg;
  position: relative;
  max-width: clamp(17.5rem, 26vw, 30rem);
  padding: 1rem 1rem 4rem;
  border: var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  box-shadow: 0.5rem 0.5rem 0 var(--ink);
  transform: rotate(var(--rot));
  transition: transform .3s var(--ease-pop);
}
.polaroid .ph { aspect-ratio: 1 / 1; border-radius: var(--r-xs); }   /* 바깥 r(1rem) − 여백(1rem) → 최소값 */
.polaroid__tape {
  position: absolute;
  top: -1.125rem;
  left: 50%;
  z-index: 2;
  width: 7rem;
  height: 2.125rem;
  margin-left: -3.5rem;
  border: var(--line);
  border-radius: var(--r-xs);
  background: var(--paper-deep);
  transform: rotate(5deg);
}
.founder__quote { position: relative; }
.founder__quote p {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.5vw, 2.25rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.005em;
}
.founder__quote p::before {
  content: '“';
  display: block;
  height: 0.62em;
  margin-bottom: 0.75rem;
  font-size: 4.2em;
  line-height: 1;
}
.founder__quote p::after { content: '”'; }
.founder__quote footer {
  margin-top: 1.75rem;
  color: var(--ink-soft);
  font-size: var(--fs-body);
  font-weight: 600;
}
.polaroid:hover,
.js .polaroid.is-in:hover { transform: rotate(0deg) translateY(-0.25rem); }

@media (max-width: 1024px) {
  .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--grid-gap) * 1.5); padding-inline: 0; }
}
@media (max-width: 760px) {
  .founder { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; justify-items: center; }
  .polaroid { max-width: min(18.75rem, 80%); }
}
@media (max-width: 640px) {
  .founder__quote p { font-size: 1.5rem; }
}

/* ---------- 5-6. 입지와 손익 구조 ---------- */
/* 좌(넓게): 입지 기준 3가지 체크리스트 | 우: '입지 검토 결과' 종이 카드. 운영비 5가지는 아래 작은 띠.
   체크 순서 — 항목 i는 --step × i 에 등장, 0.2초 뒤 체크. 마지막 체크가 끝나면 '권장' 도장 */

.loc {
  --step: .38s;
  --verdict: calc(var(--step) * 3 + .35s);
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 8fr);
  gap: calc(var(--grid-gap) * 1.75);
  align-items: start;
}
.block-title {
  padding-bottom: 0.875rem;
  border-bottom: var(--line);
  font-size: 1.375rem;
  font-weight: 800;
  line-height: 1.4;
}

/* 체크리스트 */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.2vw, 1.875rem) 0;
}
.check + .check { border-top: 2px dashed color-mix(in srgb, var(--ink) 20%, transparent); }
.check__box {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
}
.check__box svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check__title {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  font-weight: 800;
  line-height: 1.35;
}
.check__no { color: var(--ink-faint); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; }
.check__desc { margin-top: 0.5rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.6; word-break: keep-all; }

/* 동네 지도 — 페이지 공통 종이 카드 틀(잉크 선 + 오프셋 그림자) 안에 지도만. 왼쪽 열 높이에 맞춰 늘어나고,
   가로로 넓어지면 위쪽(핀 · 반경 · 큰길)을 기준으로 아래를 잘라 낸다 */
.loc-map {
  position: relative;
  align-self: stretch;
  min-height: 22rem;
  margin: 0;
  overflow: hidden;
  border: var(--line);
  border-radius: var(--r-lg);
  background: #F8F1E1;
  box-shadow: 0.375rem 0.375rem 0 var(--ink);
}
.loc-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-road { fill: #FFFBF0; }
.m-block { fill: #EFE6D2; }
.m-bldg { fill: #E2D6BC; stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 1; }
.m-park { fill: #E6E2C4; }
.m-path { fill: none; stroke: #FFFBF0; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 7; }
.m-tree { fill: #D5D0A8; }
.m-lane { fill: none; stroke: #E9DCBC; stroke-width: 2; stroke-dasharray: 10 8; }
.m-cross { fill: #EDE3CB; }
.m-other { fill: #FFFBF0; stroke: var(--ink-faint); stroke-width: 2.5; }
.m-target { fill: var(--light); stroke: var(--ink); stroke-width: 2; }
.m-radius {
  fill: color-mix(in srgb, var(--light) 16%, transparent);
  stroke: var(--ink);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  transform-box: fill-box;
  transform-origin: center;
}
.m-tag rect { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.m-tag text { fill: var(--ink); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.m-shadow { fill: color-mix(in srgb, var(--ink) 25%, transparent); transform-box: fill-box; transform-origin: center; }
.m-pin path { fill: var(--ink); }
.m-pin circle { fill: var(--light); }
.m-pin, .m-pin-drop { transform-box: fill-box; transform-origin: 50% 100%; }

/* 핀이 그 자리를 가리키듯 동동 — 뜰 때 그림자는 작고 옅어진다 */
@keyframes pin-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes shadow-bob { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .65; opacity: .55; } }
.m-pin { animation: pin-bob 2.2s ease-in-out infinite; }
.m-shadow { animation: shadow-bob 2.2s ease-in-out infinite; }

/* 운영비 5가지 — 보조 정보. 옅은 띠 한 줄 */
.cost-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.125rem 1.5rem;
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.cost-strip__title { font-size: 1rem; font-weight: 800; }
.cost-strip__list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.cost-strip__list li { display: flex; align-items: baseline; gap: 0.375rem; font-size: 1rem; font-weight: 600; }
.cost-strip__list .label { color: var(--ink-faint); font-size: 0.875rem; }
.cost-strip__desc { margin-left: auto; color: var(--ink-soft); font-size: 0.9375rem; }

/* ── 체크 순서 애니메이션 (JS가 있을 때만 처음 상태를 비워 둔다) ── */
.js .loc .check {
  opacity: 0;
  translate: 0 0.75rem;
  transition: opacity .4s var(--ease), translate .4s var(--ease);
  transition-delay: calc(var(--step) * var(--i));
}
.js .loc .check__title { color: var(--ink-faint); transition: color .3s var(--ease) calc(var(--step) * var(--i) + .2s); }
.js .loc .check__box { transition: background-color .25s var(--ease) calc(var(--step) * var(--i) + .2s); }
.js .loc .check__box path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset .3s var(--ease) calc(var(--step) * var(--i) + .2s);
}
.js .loc.is-in .check { opacity: 1; translate: none; }
.js .loc.is-in .check__title { color: var(--ink); }
.js .loc.is-in .check__box { background: var(--light); }
.js .loc.is-in .check__box path { stroke-dashoffset: 0; }

/* 지도 — 반경 원이 퍼지고, 마지막 체크가 끝나면 핀이 떨어져 꽂힌다 */
.js .loc .m-radius { scale: .3; opacity: 0; transition: scale .9s var(--ease) .1s, opacity .4s var(--ease) .1s; }
.js .loc.is-in .m-radius { scale: 1; opacity: 1; }
.js .loc .m-pin-drop { opacity: 0; translate: 0 -40px; transition: opacity .2s var(--ease) var(--verdict), translate .55s var(--ease-pop) var(--verdict); }
.js .loc.is-in .m-pin-drop { opacity: 1; translate: none; }

/* ---------- 5-7. 가맹 절차 ---------- */

.steps { position: relative; }
.steps__track {
  position: absolute;
  top: 1.4375rem;
  left: 1.75rem;
  width: 80%;
  height: 0.625rem;
  border: var(--line);
  border-radius: 999px;
  background: var(--paper);
  overflow: hidden;
}
.steps__fill {
  display: block;
  height: 100%;
  background: var(--light);
  transform: scaleX(0);
  transform-origin: left;
}
.steps__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.step { padding-right: var(--grid-gap); }
.step__num {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  transition: background-color .3s var(--ease), transform .3s var(--ease-pop);
}
.step.is-on .step__num { background: var(--light); transform: scale(1.08); }
.step__name { margin: 1.75rem 0 0.625rem; font-size: 1.375rem; font-weight: 800; line-height: 1.4; }
.step__desc { color: var(--ink-soft); }
.period { margin-top: 1.25rem; }
/* 05 번호(왼쪽 80% + 반지름 1.75rem) 바로 위 가운데 — 낙서 폭이 번호와 같아서 left: 80%면 중심이 맞는다 */
.doodle--burst {
  position: absolute;
  top: -2.375rem;
  left: 80%;
  width: 3.5rem; height: 3.5rem;
}
/* 05가 켜지는 순간 톡 — 짧게 그려지며 살짝 튀어나온다 */
.js .doodle--burst { opacity: 0; scale: .5; transform-origin: 50% 100%; }
.js .steps .doodle--burst path { transition: stroke-dashoffset .35s var(--ease); }   /* 공통 낙서 지연(.45s)보다 우선 */
.js .doodle--burst.is-in { opacity: 1; scale: 1; transition: opacity .15s var(--ease), scale .5s var(--ease-pop); }

/* ---------- 5-8. FAQ ---------- */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: calc(var(--grid-gap) * 1.5);
  align-items: start;
}
.faq__grid .sec-head { margin-bottom: 0; }
/* 타이틀 아래 장식 풍선 (모바일에서는 타이틀 오른쪽에 한 줄로) */
.faq__balloon {
  display: block;
  width: auto;
  height: clamp(5.5rem, 7vw, 8rem);
  margin-top: clamp(1.5rem, 2.4vw, 2.5rem);
  transform: rotate(-6deg);
}
.accordion { border: var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.acc-item + .acc-item { border-top: var(--line); }
.acc-item h3 { margin: 0; font-size: inherit; }
.acc-q {
  display: flex;
  align-items: flex-start;                    /* 두 줄이 되어도 풍선·아이콘은 첫 줄 기준 */
  gap: 1.5rem;
  width: 100%;
  padding: 1.625rem 2rem;
  border: 0;
  background: var(--paper);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.acc-q:hover { background: var(--paper-deep); }
.acc-q:focus-visible { outline: 3px solid var(--ink); outline-offset: -0.3125rem; }
.acc-text { flex: 1; min-width: 0; }
.acc-icon {
  position: relative;
  flex: none;
  width: 1.375rem; height: 1.375rem;
  margin-top: calc((1.5em - 1.375rem) / 2);
  transition: transform .3s var(--ease);
}
.acc-icon::before,
.acc-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2.5px;
  margin-top: -1.25px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease);
}
.acc-icon::after { transform: rotate(90deg); }
.is-open .acc-icon { transform: rotate(180deg); }
.is-open .acc-icon::after { transform: rotate(0deg); }
.acc-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease);
}
.acc-a > div { overflow: hidden; }
.acc-a p { padding: 0 2rem 1.75rem; max-width: 40em; color: var(--ink-soft); }
.is-open .acc-a { grid-template-rows: 1fr; }

/* ---------- 5-9. 가맹 상담 문의 ---------- */

.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--grid-gap) * 2);
  align-items: start;
}
.contact__intro .sec-head { margin-bottom: 3rem; }
.contact__media { position: relative; }
.contact__media .ph { aspect-ratio: 4 / 3; transform: rotate(-1.5deg); }
.doodle--to-form {
  position: absolute;
  top: -2.75rem;
  right: -5.75rem;
  width: 7.25rem; height: 4.25rem;
}

.form { display: grid; gap: 1.75rem; }
.field label {
  display: block;
  margin-bottom: 0.625rem;
  font-size: 1rem;
  font-weight: 700;
}
.optional { color: var(--on-dark-soft); font-size: var(--fs-label); font-weight: 500; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 1rem 1.125rem;
  border: 2px solid var(--paper);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--paper);
  font-size: var(--fs-body);
  line-height: 1.5;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 8.25rem; }
.field input::placeholder,
.field textarea::placeholder { color: #8E887E; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--light);
  box-shadow: 0.25rem 0.25rem 0 var(--light);
}
.field.is-invalid input { border-color: var(--light); }
.field__error {
  min-height: 0;
  color: var(--light);
  font-size: var(--fs-label);
  font-weight: 600;
}
.field.is-invalid .field__error { margin-top: 0.5rem; }
.form .btn { margin-top: 0.75rem; }

.form-done {
  padding: 3.5rem 3rem;
  border: 2px solid var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0.375rem 0.375rem 0 var(--paper);
}
.form-done:focus { outline: none; }
.form-done p { font-size: 1.5rem; font-weight: 700; line-height: 1.6; }

/* ---------- 6. Footer ---------- */

.footer {
  padding: 3rem 0;
  border-top: 2px solid var(--paper);
  background: var(--ink);
  color: var(--paper);
}
.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer__contact { color: var(--on-dark-soft); font-size: 1rem; }
.footer__copy { color: var(--on-dark-soft); font-family: var(--font-mono); font-size: var(--fs-label); }

/* ---------- 7. Motion ---------- */

/* 기본 리빌 */
.js [data-reveal=""] {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .6s var(--ease) var(--d, 0s), transform .6s var(--ease) var(--d, 0s);
}
.js [data-reveal=""].is-in { opacity: 1; transform: none; }

/* 튕기며 회전 (스티커 · 폴라로이드 · 11곳 박스) */
.js [data-reveal="pop"] {
  opacity: 0;
  transform: scale(.85) rotate(calc(var(--rot, 0deg) - 10deg));
  transition: opacity .3s var(--ease), transform .6s var(--ease-pop);
}
.js [data-reveal="pop"].is-in { opacity: 1; transform: rotate(var(--rot, 0deg)); }

/* 칩 — 부모가 나타날 때 튕기며 붙기 */
@keyframes chip-pop {
  from { opacity: 0; transform: scale(.6) rotate(calc(var(--rot, 0deg) - 14deg)); }
  to { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}
.js [data-reveal] .num-chip,
.js .step .period { opacity: 0; }
.js .is-in .num-chip { animation: chip-pop .6s var(--ease-pop) .25s both; }
.js .step.is-on .period { animation: chip-pop .6s var(--ease-pop) .1s both; }

/* 순차 등장 (박스 그리드) */
.js [data-reveal="stagger"] > * {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .6s var(--ease), transform .6s var(--ease), background-color .2s var(--ease);
}
.js [data-reveal="stagger"].is-in > * { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > :nth-child(2) { transition-delay: .08s; }
.js [data-reveal="stagger"] > :nth-child(3) { transition-delay: .16s; }
.js [data-reveal="stagger"] > :nth-child(4) { transition-delay: .24s; }

/* 걱정 카드 — 테이블 위로 던져지듯 */
.js [data-reveal="drop"] > .worry-item > .worry-card {
  opacity: 0;
  transform: translateY(calc(var(--y, 0px) - 7.5rem)) rotate(calc(var(--r) - 12deg));
  transition: opacity .3s var(--ease), transform .75s var(--ease-pop);
}
.js [data-reveal="drop"].is-in > .worry-item > .worry-card { opacity: 1; transform: translateY(var(--y, 0px)) rotate(var(--r)); }
.js [data-reveal="drop"] > :nth-child(2) > .worry-card { transition-delay: .14s; }
.js [data-reveal="drop"] > :nth-child(3) > .worry-card { transition-delay: .28s; }
.js [data-reveal="drop"] > :nth-child(4) > .worry-card { transition-delay: .42s; }
/* 일러스트는 카드가 내려앉은 뒤 톡 튀어나온다 */
.js [data-reveal="drop"] .worry-card__art {
  opacity: 0;
  transform: scale(.4);
  transition: opacity .25s var(--ease), transform .6s var(--ease-pop);
  transition-delay: .6s;
}
.js [data-reveal="drop"].is-in .worry-card__art { opacity: 1; transform: none; }
.js [data-reveal="drop"] > :nth-child(2) .worry-card__art { transition-delay: .74s; }
.js [data-reveal="drop"] > :nth-child(3) .worry-card__art { transition-delay: .88s; }
.js [data-reveal="drop"] > :nth-child(4) .worry-card__art { transition-delay: 1.02s; }
.worry-item:hover > .worry-card,
.js [data-reveal="drop"].is-in > .worry-item:hover > .worry-card { transform: translateY(calc(var(--y, 0px) - 0.5rem)) rotate(0deg); }

/* 등장 후 hover 반응에 지연이 남지 않도록 */
.js .is-settled,
.js .is-settled > *,
.js .is-settled .worry-card,
.js .is-settled .worry-card__art { transition-delay: 0s !important; }

/* 형광펜 · 물결 밑줄 · 낙서가 그려지듯 */
.js .hl {
  background-size: 0% 0.38em;
  transition: background-size .8s var(--ease) .35s;
}
.js .is-in .hl { background-size: 100% 0.38em; }
.js .section--dark .hl { background-size: 0% 0.14em; }
.js .section--dark .is-in .hl { background-size: 100% 0.14em; }

.js .ul::after {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .8s var(--ease) .35s;
}
.js .is-in .ul::after { clip-path: inset(0 0 0 0); }
/* 형광펜: 타이틀이 화면 위쪽으로 올라왔을 때 따로 그어진다 (script.js 3) */
.js .mark {
  background-size: 0% 1.42em;
  transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .15s;
}
.js .mark.is-drawn { background-size: 100% 1.42em; }
/* 어두운 섹션: 형광펜이 그어지기 전엔 밝은 글자, 다 칠해지면 잉크색으로 */
.js .section--dark .mark--light { color: var(--paper); transition: background-size .9s cubic-bezier(.65, 0, .35, 1) .15s, color .25s var(--ease) .75s; }
.js .section--dark .mark--light.is-drawn { color: var(--ink); }

.js .doodle path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--ease) .45s;
}
.js .is-in .doodle path,
.js .doodle.is-in path { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- 8. Responsive ---------- */

@media (max-width: 1024px) {
  :root { --header-h: 3.75rem; }

  .nav { gap: max(0px, calc(1.75rem - 32px)); }
  .nav a { font-size: 0.9375rem; }

  .worry__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.5rem; padding-inline: 1.5rem; }
  .worry-item { margin-inline: -0.625rem; }
  .worry-item:nth-child(odd) { --y: 0px !important; }
  .worry-item:nth-child(even) { --y: 1.75rem !important; }





  .loc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--grid-gap) * 1.25); }
  .cost-strip__desc { margin-left: 0; }

  .step { padding-right: 1rem; }
  .step__name { font-size: 1.25rem; }

  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
  .faq__grid .sec-head { display: flex; align-items: center; gap: 1rem; }
  .faq__balloon { height: calc(var(--fs-title) * 1.6); margin-top: 0; }

  .contact__grid { gap: calc(var(--grid-gap) * 1.5); }
  .doodle--to-form { display: none; }
}

@media (max-width: 760px) {
  :root { --section-y: 4.5rem; }     /* 모바일 섹션 상하여백 — 한 값 */



  .worry__cards { grid-template-columns: minmax(0, 1fr); padding: 0 0.5rem 1rem; row-gap: 0; }
  .worry-item { margin: 0 0 -0.75rem; }
  .worry-card { min-height: 0; padding: 1.375rem 1.5rem 1.5rem; }
  .worry-item:nth-child(n) { --y: 0px !important; }
  .worry-item:nth-child(odd) { margin-right: 1.125rem; }
  .worry-item:nth-child(even) { margin-left: 1.125rem; }
  .worry-card__title { font-size: 1.1875rem; margin-top: 1rem; }
  /* 한 줄 카드: 글이 일러스트에 가리지 않게 오른쪽을 비워 둔다 */
  .worry-card { padding-right: 6.5rem; }
  .worry-card__art { right: -0.5rem; bottom: -0.875rem; height: 5rem; }
  .worry-card__art--cup { right: -0.75rem; bottom: -0.75rem; height: 3.5rem; }
  .worry__foot { margin-top: 3rem; font-size: 1.25rem; }





  .loc { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .check { gap: 1rem; }
  .check__box { width: 2rem; height: 2rem; }
  .check__desc { font-size: 1rem; }
  .loc-map { min-height: 0; aspect-ratio: 10 / 9; box-shadow: 0.25rem 0.25rem 0 var(--ink); }
  .cost-strip { flex-direction: column; align-items: flex-start; padding: 1.125rem 1.25rem; }
  .cost-strip__list { gap: 0.375rem 1.125rem; }

  .steps__track { top: 0; left: 1.4375rem; width: 0.625rem; height: 100%; }
  .steps__fill { transform: scaleY(0); transform-origin: top; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .step {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1.25rem;
    padding: 0;
  }
  .step__num { grid-row: span 3; }
  .step__name { margin: 0.625rem 0 0.25rem; }
  .step .period { justify-self: start; margin-top: 0.75rem; grid-column: 2; }
  .doodle--burst { display: none; }

  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* 헤더 · 히어로 — 768px 이하 */
/* 점장 — 좁은 화면에선 캐릭터를 위에, 말풍선 2×2를 그 아래 (윗줄 꼬리만 캐릭터를 향해 위로) — 한 화면 안에 */
@media (max-width: 760px) {
  .manager__head { margin-bottom: 1rem; }
  .manager__head .sec-sub { margin-top: 0.5rem; font-size: 0.875rem; }
  .mgr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "tl tr" "bl br" "fig fig";
    column-gap: 0.625rem;
    row-gap: 0.625rem;
  }
  .mgr-fig { width: min(42%, calc((100svh - var(--header-h) - 30rem) * 0.778), 12rem); min-width: 6.5rem; justify-self: center; margin-top: 1rem; margin-bottom: calc(-1 * var(--section-y) - 2.4%); }
  .mgr-stat { padding: 0.75rem 0.75rem 0.625rem; border-radius: var(--r-md); }
  .mgr-stats { display: contents; }
  .manager__logo { display: none; }
  .mgr-stat--tl { grid-area: tl; }
  .mgr-stat--bl { grid-area: bl; }
  .mgr-stat--tr { grid-area: tr; }
  .mgr-stat--br { grid-area: br; }
  .mgr-stat--tl, .mgr-stat--bl, .mgr-stat--tr, .mgr-stat--br { width: 100%; margin-left: 0; translate: none; align-self: stretch; justify-self: stretch; transform-origin: 50% 0; }
  .mgr-stat__say br { display: inline; }
  .mgr-stat::after { display: none; }
  /* 아래줄 말풍선 꼬리가 아래 캐릭터를 향한다 */
  .mgr-stat--bl::after, .mgr-stat--br::after {
    display: block;
    top: auto;
    bottom: calc(-0.4375rem - 1px);
    margin-top: 0;
    left: auto;
    right: auto;
    width: 0.75rem;
    height: 0.75rem;
    border-color: transparent var(--ink) var(--ink) transparent;
  }
  .mgr-stat--bl::after { right: 1.5rem; }
  .mgr-stat--br::after { left: 1.5rem; }
  .mgr-stat__say { font-size: 0.8125rem; line-height: 1.5; text-wrap: pretty; }
  .mgr-stat__meta { margin-top: 0.5rem; font-size: 0.6875rem; gap: 0.3125rem; }
  .mgr-stat__icon { width: 1.25rem; height: 1.25rem; }
}

@media (max-width: 768px) {
  :root { --logo-w: 5.25rem; }
  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.5rem;
    border-bottom: var(--line);
    background: var(--paper);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
  }
  .nav a {
    padding: 1rem 0;
    border-bottom: var(--line);
    border-radius: 0;
    font-size: 1.125rem;
  }
  .nav-pill { display: none; }
  .nav a:last-child { border-bottom: 0; }
  .menu-btn { display: block; }

  .hero__grid { display: block; min-height: 0; }
  .hero__main { padding-top: 0; gap: 1.5rem; }
  .hero__copy { margin-top: 0; padding-bottom: 0; }
  .hero__title { font-size: clamp(2.25rem, 2.4vw, 4rem); }   /* 모바일 헤드라인 크기는 기존 유지 */
  .hero__lead { font-size: 17px; }
  .hero__media { margin-top: 2rem; }
  .hero__wm-spacer { width: 100%; }        /* 768px 이하는 화면 폭에 꽉 차게 */
  .hero__media { min-height: 0; }
  .hero__photo { position: relative; inset: auto; height: 60vh; height: 60svh; min-height: 20rem; }
  .hero__media { margin-right: 0; }
}

@media (max-width: 640px) {
  :root { --header-h: 3.5rem; --fs-title: clamp(1.5rem, 6.4vw, 1.75rem); }

  .logo { font-size: 1.125rem; }
  .btn.btn--sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.9375rem; }
  .menu-btn { width: 2.5rem; height: 2.5rem; }

  .btn { height: 3.5rem; font-size: 1.0625rem; }
  .btn.btn--bean { height: 3.125rem; font-size: 1rem; }

  .worry-card { padding: 1.25rem 5.25rem 1.375rem 1.25rem; }
  .worry-item:nth-child(odd) { margin-right: 0.625rem; }
  .worry-item:nth-child(even) { margin-left: 0.625rem; }
  .worry__foot { font-size: 1.125rem; }
  .doodle--curl { width: 3.25rem; height: 2.5rem; }




  .block-title { font-size: 1.25rem; }

  .acc-q { padding: 1.375rem 1.25rem; font-size: 1.125rem; gap: 1rem; }
  .acc-a p { padding: 0 1.25rem 1.5rem; }

  .form-done { padding: 2.5rem 1.5rem; }
  .form-done p { font-size: 1.25rem; }
}