/* ==========================================================================
   그로스잇 멤버스 — 공통 스타일
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 스크롤로 앵커 이동할 때 sticky 헤더에 제목이 가리지 않게 */
  scroll-padding-top: calc(var(--nav-h) + 24px);
  overflow-x: clip;
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  word-break: keep-all;      /* 한글은 어절 단위로 줄바꿈 */
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* 격자 안의 내용이 안 줄어들어 칸이 화면 밖으로 밀리는 것을 막는다.
   1fr 은 minmax(auto,1fr) 이라 줄어들지 않는 내용이 있으면 그 열이 넓어진다. */
.grid > * { min-width: 0; }

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--side-pad);
}
/* ⚠ .wrap 과 max-width 를 같은 요소에 겹쳐 걸지 말 것.
   패딩이 안쪽으로 먹혀 글자폭이 사라진다. 폭을 좁히려면 자식 요소에 건다. */

/* ==========================================================================
   타이포 공통
   ========================================================================== */
.h-display { font-size: var(--fs-display); font-weight: 800; line-height: 1.18; letter-spacing: -.02em; }
.h1        { font-size: var(--fs-h1);      font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.h2        { font-size: var(--fs-h2);      font-weight: 700; line-height: 1.3;  letter-spacing: -.015em; }
.h3        { font-size: var(--fs-h3);      font-weight: 700; line-height: 1.4;  letter-spacing: -.01em; }
.lead      { font-size: var(--fs-lead);    font-weight: 400; line-height: 1.6;  color: var(--text-2); }
.accent    { color: var(--brand); }

/* ==========================================================================
   버튼
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-size: var(--fs-body);
  font-weight: 700;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease,
              border-color .18s ease, transform .18s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }

.btn--ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }

.btn--on-dark { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); }
.btn--on-dark:hover { border-color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); }

.btn--sm { padding: 10px 18px; font-size: var(--fs-sm); }
/* 헤더 CTA 가 접힌 상태.
   ⚠ **자리를 남기지 않는다.** 전에는 visibility:hidden 으로 투명하게만 두고
     자리를 남겼다("빼면 옆 단추들이 덜컥 움직인다"). 그 맞바꿈이 틀렸다 —
     덜컥임은 스크롤할 때 한 번이지만 **빈 구멍은 첫 화면에서 늘 보인다.**
     실측(2026-09-13): 보이는 끝 235 인데 칸은 374 까지라 139px 구멍이 남았고,
     그 탓에 [내 앱 현황 보기] 가 390px 화면의 **한가운데**(중심 183 · 화면
     중심 195)로 밀렸다. 1440px 에서는 오른쪽에 155px 구멍이 났다.
   ⚠ display:none 도 아니다. 그러면 정말로 덜컥인다.
     **폭을 접는다** — 0 으로 줄였다가 펴지므로 옆 단추가 미끄러지듯 움직인다.
   ⚠ 접은 폭만으로는 부족하다. flex 의 gap(28px)은 폭이 0 이어도 남으므로
     음수 여백으로 상쇄해야 구멍이 완전히 사라진다.
   ⚠ visibility:hidden 을 함께 둔다. 접힌 단추를 화면 낭독기가 읽으면 안 된다. */
.nav__cta {
  transition: opacity .2s var(--ease), transform .2s var(--ease),
              max-width .26s var(--ease), padding .26s var(--ease),
              margin-left .26s var(--ease), visibility .26s;
  max-width: 320px;
}
/* ⚠ 선택자에 `.nav` 를 하나 더 얹는다. 아래 `@media (max-width: 400px)` 의
   `.nav .btn--sm { padding-inline: 10px }` 이 같은 무게(0,2,0)에 **뒤에 있어**
   이긴다. 그래서 390px 에서는 접은 단추가 좌우 10px 씩 20px 로 남았다
   (실측: 현황 250..354 인데 칸은 374 까지). 무게를 올려 늘 이기게 한다. */
.nav .nav__cta.is-tuck {
  max-width: 0;
  padding-inline: 0;
  /* ⚠ 숫자를 적지 말 것. 이 단추가 든 묶음의 gap 과 **같은 값**이어야 하는데
     따로 적어 두었다가 묶음이 바뀌면서 갈라졌다(-28 vs 8). 변수로 묶는다. */
  margin-left: calc(var(--nav-actgap, 0px) * -1);
  border-inline-width: 0;
  overflow: hidden;
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
}
/* 현황을 보는 동안 헤더에 뜨는 라벨. 로고 옆에서 '지금 어느 화면인가' 를 말한다.
   ⚠ 로고와 **얇은 선 하나로** 가른다. 알약 배지로 두면 그 자체가 단추처럼
     보여 눌러 보게 된다. 이것은 상태 표시이지 갈 수 있는 곳이 아니다. */
.nav__tag {
  padding: 4px 0 4px 11px;
  border-left: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  white-space: nowrap;
}
@media (max-width: 720px) { .nav__tag { display: none; } }
.btn--lg { padding: 17px 34px; font-size: var(--fs-lead); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ==========================================================================
   상단바
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  /* ⚠ **.88 이었다.** 흐림이 도는 환경에서도 큰 글자가 뒤로 비쳐,
     굴리는 동안 `자주 묻는 질문` 이 로고를 뚫고 지나갔다(실측 2026-09-15).
     .96 이면 흐림이 없어도 안 비친다. */
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-2);
}
/* ⚠ 폰에서는 **불투명**하게 둔다. `backdrop-filter` 는 기기·브라우저에 따라
     안 먹는데, 그러면 88% 반투명만 남아 표 글자가 로고 뒤로 비쳐 **겹쳐 보인다**
     (사용자 지적 2026-09-13). 넓은 화면은 흐림이 도는 환경이라 그대로 둔다. */
@media (max-width: 720px) {
  .nav { background: #fff; }
}
.nav__in {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
}
/* 로고. 워드마크(growthit) + 제품 이름(멤버스).
   ⚠ 워드마크와 심볼을 **둘 다** 마크업에 두고 CSS 가 고른다. 좁은 화면에서
     워드마크(109px) + '멤버스'(45px) 는 [내 앱 현황 보기] · [앱 구성] 과
     한 줄에 못 선다(실측 390px: 쓸 수 있는 폭 358 · 단추 둘 243).
   ⚠ 원본은 654x120 이다. height 만 주고 width:auto 로 비율을 지킨다.
   ⚠ img 에는 전역 `display:block` 이 걸려 있어 세로 정렬은 부모의
     align-items:center 가 맡는다. */
.nav__logo { display: flex; align-items: center; gap: 8px; }
.nav__wm { height: 20px; width: auto; }
.nav__mk { display: none; }
.nav__pd {
  font-weight: 800; font-size: 17px; letter-spacing: -.02em;
  color: var(--text);
}
/* 로고 + 배지 한 덩어리.
   ⚠ 전에는 배지가 `.nav__in`(space-between)의 셋째 자식이라 **한가운데로
     밀렸다.** 실측 1440px: 로고 120..280 · 배지 528..655 · 첫 단추 891 —
     로고와 248px, 단추와 236px 이 비었다. 단추 사이는 이미 28px 이었으니
     진짜 구멍은 앞의 둘, 484px 이었다(사용자 지적 2026-09-14). */
/* ⚠ **줄어드는 쪽은 로고다.** `min-width: 0` 만으로는 안 줄어든다 —
   안의 워드마크가 `width: auto` 라 제 폭을 우긴다. `overflow: hidden` 까지
   있어야 밀릴 때 잘리고, 그래야 단추 위로 안 올라탄다. */
.nav__brand {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; flex: 0 1 auto; overflow: hidden;
}

.nav__menu { display: flex; align-items: center; gap: 26px; }
/* 단추 묶음만 따로 붙인다.
   ⚠ `.nav__menu` 의 gap 을 통째로 줄이면 **글자 메뉴가 문장처럼 붙는다.**
     링크는 26px, 단추는 8px 이 맞다. 그래서 묶음을 하나 더 판다. */
/* ⚠ 간격을 **변수로** 둔다. 접은 단추의 음수 여백이 이 값과 같아야 하는데,
   단추가 `.nav__menu`(gap 26) 에서 여기로 옮겨 왔을 때 여백만 -28px 로 남았다.
   20px 이 과하게 상쇄되어 **`#navStat` 이 부모를 20px, 화면을 4px 삐져나왔다**
   (실측 2026-09-14: 390px 과 320px 둘 다 문서 폭이 4px 넘쳤다). */
/* ⚠ **절대 안 줄어든다**(사용자 지시 2026-09-15). 여기가 밀리면 단추끼리
   겹치는 게 아니라 **로고가 단추 위에 그려진다** — 겹침은 문서 폭을 안 늘리므로
   `scrollWidth - clientWidth` 로는 0 으로 나온다(실측 430px: 넘침 0 인데
   `멤버스` 와 [내 앱 현황 보기] 가 26x28px 겹쳐 있었다).
   요소 쌍의 사각형을 교차시켜 봐야 잡힌다. */
.nav__acts {
  --nav-actgap: 8px;
  display: flex; align-items: center; gap: var(--nav-actgap);
  flex: none;
}
@media (min-width: 768px) { .nav__acts { --nav-actgap: 14px; } }
/* 보조 행동은 **글자**다. ⚠ 채운 단추로 되돌리지 말 것 — 옆의 보라 CTA 와
   무게가 같아져 어느 것이 주 행동인지 안 갈리고, 좁은 폭도 함께 먹는다. */
.nav__link {
  flex: none;
  padding: 6px 2px; border: 0; background: none;
  font: inherit; font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  white-space: nowrap; cursor: pointer;
  text-underline-offset: 4px;
  transition: color .15s ease;
}
.nav__link:hover { color: var(--text); text-decoration: underline; }
@media (min-width: 768px) { .nav__link { font-size: var(--fs-sm); } }

.nav__menu a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); transition: color .18s ease; }
.nav__menu a:hover { color: var(--text); }

/* 상단바 상태 점.
   ⚠ 2026-09-13 에 **글자 배지를 점으로 내렸다.** 전에는 버튼 안에
     '내 앱 현황 보기' + '요청 접수' 두 덩어리가 붙어 213px 이 됐고,
     라벨과 상태가 한 줄로 엉켜 무엇이 버튼 이름인지 안 읽혔다(실측).
   ⚠ 점은 **폭을 안 밀어낸다.** 값이 늦게 와도 버튼이 넘지 않는다
     (전에는 min-width 78px 로 자리를 미리 잡아야 했다).
   ⚠ 정확한 글자는 title 에 남긴다. 색만으로 판단하게 하지 않는다. */
.nav__dot {
  display: inline-block; flex: none;
  width: 7px; height: 7px; margin-right: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  vertical-align: 1px;
}
.nav__dot.is-running { background: #b9ffdf; }
.nav__dot.is-done { background: #6ee7b7; }
/* 아직 값이 안 왔을 때. 점을 흰자위에서 더 죽인다(깜빡이지 않는다). */
.nav__dot.is-load { background: rgba(255, 255, 255, .3); }
/* 보조 버튼(흰 바탕)에 얘힐 때 */
.btn--ghost .nav__dot { background: var(--text-3); }
.btn--ghost .nav__dot.is-running { background: var(--brand); }
.btn--ghost .nav__dot.is-done { background: #12b886; }

@media (max-width: 900px) { .nav__menu a { display: none; } }

/* 좁은 화면의 상단바.
   ⚠ 실측(2026-09-12, 현황 버튼 켠 상태): 줄 1 · 겹침 0 · 넘침 0 이라
     **깨지지는 않았다.** 다만 320px 에서 단추 둘이 폭의 67% 를 먹고
     로고는 'M' 만 남아 숨이 막힌다.
   ⚠ 그래서 감추는 것은 [앱 구성 시작하기] 다. 이미 의뢰한 고객사에게는
     끝난 일이고, 그분들이 쓸 것은 [내 앱 현황 보기] 하나다.
   ⚠ 의뢰 전(has-stat 없음)에는 절대 감추지 말 것 — 그것이 유일한 입구다. */
@media (max-width: 640px) {
  body.has-stat .nav [data-start] { display: none; }
}

/* 아주 좁은 화면 — 워드마크를 심볼로 갈아 버튼 자리를 만든다.
   실측 320px: 로고 117 + 버튼 둘 257 = 374 > 288(쓸 수 있는 폭) → 문서 356/320.
   ⚠ 버튼을 감추지 말 것. 그것이 이 화면에서 할 일이다.
   ⚠ 로고를 통째로 없애지 않는다. 어느 서비스인지 알 수 없게 된다. */
/* ⚠ 경계가 **400px 이었다.** 그래서 401~460 구간이 무방비였다 —
     로고는 아직 풀사이즈(160px)인데 단추가 밀려 들어와 겹쳤다
     (실측 430px: `멤버스` ↔ [내 앱 현황 보기] 26x28px).
   ⚠ 지금은 **640px** 이다(사용자 지시의 `sm:` 과 같은 값). 워드마크
     `growthit`(109px)만 감추고 심볼 + `멤버스` 는 남긴다 — 160 → 73px 이라
     87px 이 열린다. 로고를 통째로 없애면 어느 서비스인지 알 수 없게 된다. */
@media (max-width: 640px) {
  .nav__wm { display: none; }
  .nav__mk { display: block; }
  .nav__pd { font-size: 15px; }
}
/* 320px 대에서는 제품명까지 뗀다. 심볼 하나면 알아본다. */
@media (max-width: 380px) {
  .nav__pd { display: none; }
  .nav__menu--tight { gap: 6px; }
  .nav .btn--sm { padding-inline: 10px; }
}

/* ==========================================================================
   히어로 (다크)
   ========================================================================== */
.hero {
  position: relative;
  background: var(--dark);
  color: #fff;
  /* ⚠ 위 64px 은 좁았다. 실측(2026-09-13): 헤더 하단 68px 바로 아래 64px 에서
     A·B·C 탭이 시작해 폰이 헤더에 붙어 보였다(탭 top 132). 92px 으로 벌린다.
     ⚠ 정렬로는 못 고친다. `.hero__in` 은 이미 align-items: center 이고,
       폰 칸(646px)이 글 칸(414px)보다 커서 **히어로 높이를 폰이 정한다.**
       그래서 가운데 정렬로 움직이는 것은 글뿐이고 폰은 1px 도 안 움직인다.
       실효가 있는 것은 이 padding 하나다. */
  padding: 92px 0 64px;

  /* ⚠ **폰이 화면 밖으로 잘렸다**(실측 2026-09-16 · 1440x900: 폰 바닥 965 /
     화면 900 — 65px 이 잘렸다). 폰을 9:18.5 로 키운 뒤로 히어로가 1,045px 이라
     화면(900 - nav 56 = 844)보다 201px 크다.
     ⚠ **폰을 줄이지 않는다** — 실제 폰 비율은 사용자 지시다. 대신 세로가
       모자란 화면에서만 위아래 여백을 깎는다. 92+64=156 → 48+32=80 이면
       76px 이 열려 잘림이 사라진다.
     ⚠ 위를 0 으로 만들지 말 것. 92px 은 A·B·C 탭이 헤더에 붙어 보이던 것을
       고친 값이다(2026-09-13). 44px 이 그 아래 한계다.
     ⚠ 아래는 8px 까지 깎는다. 히어로는 검정이고 다음 절은 흰색이라
       경계가 선명해, 여백이 얇아도 붙어 보이지 않는다.
     ⚠ **768px 짜리 화면에는 애초에 안 들어간다** — 폰 674 + 탭 40 + 여백이
       쓸 수 있는 높이(768 - nav 56 = 712)를 넘는다. 거기서는 굴려 보는 것이
       맞다(히어로는 원래 굴리는 자리다). 폰을 더 줄여 맞추지 말 것 —
       실제 폰 비율은 사용자 지시다. */
  @media (max-height: 940px) { padding: 44px 0 8px; }
  overflow: hidden;
  isolation: isolate;
}
/* 배경 광원.
   ⚠ **가운데 위에 두지 말 것.** 제목은 왼쪽, 폰은 오른쪽인데 빛이 한가운데면
     **아무것도 없는 자리가 가장 밝다**(실측 2026-09-15: 1440px 에서 빛 중심이
     x=720, 제목은 120~800, 폰은 990~1366 — 빛이 둘 사이의 빈 곳에 있었다).
     폰 뒤로 옮긴다 — 주인공 뒤에서 받쳐 주는 것이 광원의 일이다.
   ⚠ 세기도 낮춘다(.42 → .28). 폰 상단바가 이미 채도 84% 보라라,
     그 뒤가 밝으면 **보라 위에 보라**가 되어 탁해 보인다(사용자 지적).
   ⚠ 좁은 화면에서는 폰이 아래로 내려가므로 가운데로 되돌린다. */
.hero::before {
  content: "";
  position: absolute; inset: -18% -6% auto auto;
  z-index: -1;
  width: 900px; height: 620px;
  background: radial-gradient(closest-side, rgba(99, 91, 255, .28), transparent 72%);
  pointer-events: none;
}
@media (max-width: 960px) {
  .hero::before {
    inset: -24% 0 auto 50%;
    transform: translateX(-50%);
    width: 760px; height: 520px;
  }
}
/* 왼쪽 글 · 오른쪽 폰 목업.
   "화면으로 정하세요" 라는 카피 옆에 실제 화면이 나란히 놓여야 말이 선다.
   ⚠ 세로로 쌓일 때 목업이 CTA 위로 오면 첫 화면에서 시작 버튼이 사라진다 —
     .hero__text 가 DOM 에서 먼저이므로 쌓이면 글·CTA 가 위에 온다. */
/* 폰이 390 + 테두리 20 = 410px 이라 오른쪽 칸을 거기에 맞춘다.
   글자 칸은 1200 - 410 - 56 = 734px 로 아직 넉넉하다. */
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 410px;
  gap: 56px;
  align-items: center;
}
.hero__text { max-width: 700px; }

/* ⚠ 여기 있던 `position: sticky` + `align-self: start` 를 뺐다(2026-09-13).
     주석이 스스로 "움직일 자리가 0px 이다 · 지금은 아무 일도 하지 않는다" 고
     적어 둔 규칙이었다. 폰 칸(646px)이 글 칸(414px)보다 커서 히어로 높이를
     폰이 정하기 때문에 붙을 자리가 없다.
   ⚠ 그런데 아무 일도 안 하면서 `align-self: start` 로 `.hero__in` 의
     align-items: center 를 **덮어쓰고 있었다.** 글이 폰보다 길어지는 날
     (3단계 카드를 히어로로 옮기는 등) 폰만 위로 붙어 조용히 어긋난다.
     되살리려면 그때 다시 재고 넣을 것. 지금은 빼는 것이 맞다. */
.hero__art {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

/* 히어로의 폰은 맛보기라 낮게 세운다(빌더에서는 더 크다) */
/* ⚠ .ph--hero 한 마디로는 phone.css 의 @media .ph 규칙(같은 명시도, 더 뒤)에 진다.
     .ph.ph--hero 로 한 단계 올려야 히어로 폰 높이가 유지된다. */
/* 히어로 폰은 **실제 폰 비율**이다(사용자 지시 2026-09-15).
   ⚠ 전에는 390 x 520 = **9 : 12.0** 이었다. 가로로 퍼지고 세로가 눌려
     폰으로 안 보였고, 추천 상품 줄과 하단 탭이 화면 밖으로 밀려 잘렸다.
     지금은 360 x 740 = **9 : 18.5** 다(요청한 720~740 의 위끝).
   ⚠ 폭을 360 으로 좁힌 것은 사용자 지시다. `phone.css` 의 기본은 390 이고
     거기에는 "폭이 390 이어야 글자 크기와 여백이 실제 앱과 같게 보인다" 는
     이유가 적혀 있다 — 그 규칙은 **빌더 · 어드민에 그대로 남는다.**
     여기만 다르다(랜딩은 보여 주는 자리, 빌더는 일하는 자리).
   ⚠ 세로가 짧은 화면에서는 **가로 · 세로를 함께** 줄인다. 높이만 줄이면
     다시 눌린 폰이 된다.
   ⚠ 비율은 **19.5 : 9** 다(사용자 결정 2026-09-17). 2026-09-15 에는 9 : 18.5
     (360 x 740)였는데, 그보다 길쭉한 것이 요즘 플래그십의 실제 비율이다.
     높이는 `--ph-ratio`(phone.css)가 곱해 준다 — 여기서 따로 적지 말 것.
   ⚠ 안쪽은 이미 구른다(`.ap-scroll` 이 `overflow-y:auto` + 스크롤바 감춤).
     잘려 보이던 것은 스크롤이 없어서가 아니라 **틀이 낮아서**였다. */
.ph.ph--hero {
  --ph-w: 360px;
  /* 베젤 8px · 바깥 곡률 40px (사용자 지시). 안쪽은 40 - 8 = 32px 이라야
     테두리 두께가 모서리에서도 고르다. */
  /* `--ph-bez` 로 둔다. `.ph` 의 기본 10px 을 여기서 덮는 값이고,
     상태바 가운데 닫기 X(`.ph-x`)가 이 값만큼 아래에서 시작한다. */
  --ph-bez: 8px;
  width: calc(var(--ph-w) + var(--ph-bez) * 2);
  padding: var(--ph-bez);
  border-radius: 40px;
  /* ⚠ 흰 테두리는 `.ph--light`(phone.css)가 맡는다 — 현황 화면의 폰과
     **같은 옷**이어야 해서 한 곳에 뒀다(2026-09-18).
   ⚠ 여기서는 **어두운 바탕 위의 그림자**만 덮어쓴다. 히어로는 검은 배경이라
     흰 바탕용 그림자로는 폰이 떠 보이지 않는다. */
  box-shadow:
    0 24px 56px rgba(0, 0, 0, .5),
    0 0 0 1px rgba(255, 255, 255, .5);
}
.ph.ph--hero .ph__screen { border-radius: 32px; }
/* ⚠ 경계를 **820px** 로 잡는다. 900 으로 두면 1440x900 노트북(가장 흔한
   크기다)에서 폰이 320 으로 줄어 요청한 360 이 안 나온다(실측 2026-09-15).
   900 에서는 폰 아래가 화면 밖으로 4px 나가는데, 히어로는 원래 굴려 보는
   자리라 그것이 문제가 아니다 — 눌린 폰으로 보이는 것이 문제였다. */
@media (max-height: 820px) {
  .ph.ph--hero { --ph-w: 320px; }
}

/* 홈 타입 고르개 — 알약 셋이 아니라 **세그먼트 컨트롤 하나**다(2026-09-13).
   ⚠ 따로 떨어진 단추 셋은 "여럿을 눌러도 된다" 로 읽힌다. 안은 **하나만**
     고른다. 한 틀에 담아 묶으면 그 규칙이 모양으로 보인다.
   ⚠ 틀은 어둠 위에 약간 떠있는 정도로만 둔다. 필터를 진하게 주면 틀이 폰보다
     먼저 눈에 들어온다 — 주인공은 폰이다. */
.hero__tabs {
  display: inline-flex; align-self: center; gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(12, 12, 18, .55);
  backdrop-filter: saturate(140%) blur(6px);
}
.hero__tab {
  padding: 7px 16px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .62);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: background-color .18s ease, color .18s ease;
}
.hero__tab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
/* 고른 안은 확실하게 들어올린다 — 흰 알약 + 그림자. */
.hero__tab.is-on {
  background: #fff; color: var(--dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.hero__tab.is-on:hover { background: #fff; color: var(--dark); }
/* 폰 아래 설명. 맨몸 두 줄로 두면 덜렁거린다. 안 이름은 알약으로 감싸고
   설명은 그 아래 한 단 흐리게 둔다. */
.hero__art-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.5;
  text-align: center;
}
/* ⚠ 밝은 회색 알약(bg-slate-100 같은 것)을 쓰지 말 것. 여기는 **어두운 배경**이라
     흰 알약이 폰보다 튄다. 캡션은 폰을 설명하는 부속이지 주인공이 아니다.
     반투명으로 띄워 어둠 위에 얹는다. */
.hero__art-pill {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92);
  font-weight: 700;
  white-space: nowrap;
}
.hero__art-sub { color: rgba(255, 255, 255, .52); }

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; gap: 40px; }
  .hero__art { align-items: center; }
}
/* 같은 페이지 아래로 내려가는 링크. 단추가 아니라 안내다. */
.hero__more {
  align-self: center;
  padding: 8px 6px; margin-left: 4px;
  font-size: var(--fs-sm); font-weight: 600;
  color: rgba(255, 255, 255, .55);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(255, 255, 255, .25);
}
.hero__more:hover { color: #fff; }

.hero__title { margin: 0 0 20px; color: #fff; }
/* 제목 둘째 줄.
   ⚠ **같은 수법을 두 번 쓰지 않는다**(2026-09-16). 여기도 보라, 맨 아래
     마무리 CTA 의 `우리 브랜드 앱을` 도 보라였다 — 처음엔 강조인데 두 번째는
     되풀이다. 여기는 밝은 인디고로 **아주 살짝만** 갈라 두고, 진짜 보라는
     아래 CTA 단추가 맡는다.
   ⚠ 흰 글자로 되돌리지 말 것. 두 줄이 완전히 같으면 어디서 끊어 읽는지가
     사라진다 — 구분은 남기되 세기만 낮춘다. */
.hero__title em { font-style: normal; color: var(--brand-soft); }
.hero__sub { font-size: var(--fs-lead); line-height: 1.7; color: rgba(255,255,255,.72); }
/* 부제 전체가 .72 라 강조가 안 산다 — 강조만 흰색으로 올린다 */
.hero__sub strong { color: #fff; font-weight: 700; }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px; }

/* ── 이어서 하실 분의 묶음 ──
   ⚠ **용도로 묶는다. 위젯 모양으로 묶지 않는다.** 전에는 [이어서 하기] 가 위
     줄에, 설명이 두 줄 아래, [처음부터 새로] 가 그 아래에 흩어져 있었고
     신규용 [가이드 보기] 가 그 사이에 끼어 있었다. 실측(390px) 폭이
     191·161·76·358·358 이라 세로 선이 하나도 안 섰다.
   ⚠ 테두리를 아주 옅게 둔다. 진하면 바로 위 보라 단추와 눈을 다툰다
     (2026-09-13 에 한 번 상자를 걷어낸 이유가 그것이다). 지금은 상자가
     '다른 사람용' 임을 가르는 일을 하므로 필요하되, 소리는 낮춘다. */
/* 이어서 하기 — **가로 한 줄**이다(사용자 지시 2026-09-15).
   ⚠ 전에는 설명 두 줄 + 큰 단추라 상자가 뚱뚱했다. 이것은 **다시 온 사람**
     에게만 보이는 줄이고, 그 사람은 무엇을 눌러야 하는지 이미 안다 —
     설명을 길게 할 자리가 아니다.
   ⚠ 좁아지면 접힌다. 한 줄을 고집하면 390px 에서 글이 잘리거나 넘친다. */
.hero__saved {
  margin-top: 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  max-width: 560px;
}
.hero__saved-t {
  margin: 0; min-width: 0;
  font-size: var(--fs-xs); line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hero__saved-r { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; }
/* ⚠ 미니 단추다. `.btn--lg` 를 되돌리지 말 것 — 그것 하나가 상자 높이의
   절반이었다. 다시 온 사람은 이 줄을 찾으러 온 것이라 크게 만들 까닭이 없다. */
.hero__resume {
  flex: none;
  padding: 6px 12px; border: 0; border-radius: 8px;
  background: var(--brand); color: #fff;
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; cursor: pointer;
  transition: filter .15s ease;
}
.hero__resume:hover { filter: brightness(1.12); }
/* ⚠ 되돌릴 수 없는 길이라 **단추로 만들지 않는다.** 다만 밑줄 글자만 두면
     손으로 못 누른다(전 실측 70x21). 누를 자리를 넓혀 둔다. */
.hero__reset {
  flex: none;
  padding: 4px 2px; border-radius: 6px;
  font-size: 11px; font-weight: 600;
  color: rgba(255, 255, 255, .45);
  text-decoration: underline; text-underline-offset: 3px;
  white-space: nowrap;
}
.hero__reset:hover { color: rgba(255, 255, 255, .85); }
.hero__reset:hover { color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .08); }
/* ⚠ 단추 밑 설명은 문장이 아니라 **각주**다. 부제(.72)보다 한 단 낮춰
     은은하게 둔다. 여기가 밝으면 보라 단추와 눈을 다투게 된다. */
.hero__note {
  margin-top: 20px;
  font-size: var(--fs-xs); line-height: 1.6;
  color: rgba(255, 255, 255, .42);
}

@media (max-width: 768px) { .hero { padding: 64px 0 68px; } }

/* 좁은 화면의 히어로 단추.
   ⚠ **주 단추를 칸 폭에 맞춘다.** 실측(390px, 고치기 전) 폭이 191·161·76 이라
     왼쪽 끝은 맞는데 오른쪽 끝이 다 달랐다. 한 덩어리로 안 읽히는 주된 이유였다.
     손가락 표적도 191 → 358 로 넓어진다.
   ⚠ [가이드 보기] 는 늘리지 않는다. 그것은 단추가 아니라 안내 링크다 —
     늘리면 단추 셋이 된다. 주 단추 아래 가운데에 둔다.
   ⚠ 상자 안에서는 [이어서 하기] 만 늘리고 [처음부터 새로] 는 그대로 둔다.
     둘을 같은 폭으로 만들면 되돌릴 수 없는 길이 같은 무게로 보인다. */
@media (max-width: 560px) {
  .hero__cta { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .hero__more { align-self: center; margin-left: 0; }
  /* ⚠ 좁으면 **두 줄로 접는다.** 한 줄을 고집하면 글이 잘린다.
     단추를 100% 로 늘리지 말 것 — 미니 단추가 다시 뚱뚱해진다. */
  .hero__saved { max-width: none; }
  .hero__saved-t { white-space: normal; }
  .hero__saved-r { gap: 10px; margin-left: auto; }
}

/* ==========================================================================
   진행 순서 (스텝)
   ========================================================================== */
/* 히어로 → 이 섹션 → 이용 안내가 바로 이어지도록 상하를 좁힌다.
   ⚠ --section-y(120px)를 그대로 쓰면 검정 히어로와 이 섹션 사이가 120px,
     이 섹션과 '이용 안내' 사이가 240px 로 벌어졌다.
     아래 20px + .guide 위 20px = 40px 로 붙인다(요구: 30~40px). */
/* ⚠ 히어로(다크)와 **간격 0px** 으로 맞닿아 있었다(실측). 숨 쉴 자리를 준다.
   ⚠ margin-top 이 아니라 padding-top 을 키운다 — .steps 는 자기 배경
     (--bg-2)을 가지고 있어서 margin 을 주면 다크와 이 배경 사이에
     **몸통 배경이 흰 띠로 드러난다.** 이음매가 생기는 편이 더 나쁘다. */
.steps { padding: 72px 0 20px; background: var(--bg-2); }
@media (max-width: 768px) { .steps { padding-top: 48px; } }
/* 640px 이면 안내문 끝의 '다룹니다.' 한 단어가 둘째 줄로 떨어졌다 */
.steps__head { max-width: 780px; margin-bottom: 26px; }
.steps__head .h2 { margin: 0 0 12px; }

/* 가로 한 줄 스텝 바(사용자 지시 2026-09-14).
   ⚠ 화살표 칸은 **내용만큼만** 차지한다(`auto`). `1fr` 로 두면 세 칸이
     화살표에 밀려 좁아진다.
   ⚠ 좁아지면 화살표를 감추고 세로로 쌓는다 — 세로에서 오른쪽 화살표는
     방향이 거짓말이 된다. */
.steps__list {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 10px;
  margin: 0; padding: 0;
  list-style: none;
}
.step__arrow {
  display: grid; place-items: center;
  color: var(--text-3); font-size: 15px;
  user-select: none;
}
@media (max-width: 860px) {
  .steps__list { grid-template-columns: 1fr; gap: 8px; }
  .step__arrow { display: none; }
}

/* 한 칸은 **가로 한 줄**이다: [번호] 제목 · 설명 [시점].
   ⚠ 한때 세로 카드였고 "설명 문장 51~60자를 지킨다" 고 적어 두었다.
     사용자가 2026-09-14 에 **가로 한 줄로 압축**하라고 다시 지시했다 —
     긴 나열은 안내서 2장에 그대로 있고, 랜딩은 "여기서 무엇을 하나" 만
     알면 되는 자리다. 실측: 절 491px → 아래 배치로 절반 아래.
   ⚠ 안쪽 여백을 더 깎지 말 것. 12px 아래로 내리면 번호(26px)가 칸에 닿는다. */
/* ⚠ 여백과 그림자를 보강한다(사용자 지시 2026-09-16). 셋이 한 줄로 서는
   일정 표시라, 카드가 얇으면 "한눈에 일정" 이 안 읽힌다.
   ⚠ hover 에 보라 테두리를 쓰지 않는다 — 이것은 **읽는 것**이지 누르는 것이
   아니다(안에 링크가 따로 없다). 그림자만 살짝 둔다. */
.step {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid rgba(226, 232, 240, .8);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 16, 24, .04), 0 4px 12px rgba(16, 16, 24, .03);
  transition: box-shadow .18s ease;
}
.step:hover { box-shadow: 0 1px 3px rgba(16, 16, 24, .06), 0 8px 20px rgba(16, 16, 24, .05); }
.step__num {
  flex: none;
  display: grid; place-items: center;
  width: 26px; height: 26px; margin: 0;
  border-radius: 8px;
  /* ⚠ **회색이다**(2026-09-16). 셋이 나란히 선 번호라 보라면 그 줄이
     통째로 보라 띠가 된다. 순서는 숫자가 이미 말한다. */
  background: var(--bg-2); color: var(--text-2);
  font-size: 13px; font-weight: 800;
}
/* ⚠ `min-width: 0` 이 없으면 설명이 안 줄어 칸이 문서를 밀어낸다. */
.step__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.step__title {
  margin: 0;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ⚠ **한 줄로 못 박지 않는다.** `white-space: nowrap` + 말줄임이었는데,
   320px 에서 칸이 120~158px 뿐이라 " 스탬프 판 개수 · 멤버십 등급 · 쿠폰 정책" 이
   43px, " 앱을 눌러보고 화면정의서 생성" 이 36px 잘렸다(실측 2026-09-18,
   아이폰 SE 1세대). 말줄임은 **긴 이름 하나**를 다룰 때 쓰는 것이고, 이건
   가운뎃점으로 이어 붙인 **목록**이라 뒤가 잘리면 항목이 통째로 사라진다.
 ⚠ 넓은 화면에서는 한 줄에 들어가므로 아무것도 달라지지 않는다.
   `keep-all` 은 한글이 낱자로 끊기는 것을 막는다. */
.step__desc {
  font-size: var(--fs-xs); color: var(--text-3);
  line-height: 1.45; word-break: keep-all;
}
.step__who {
  flex: none;
  display: inline-block; margin: 0;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-3);
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
/* ⚠ **여기만 보라를 남긴다.** 셋 중 누가 하는 일인지가 이 구역의 요점이고,
   칩 하나라 시끄럽지 않다. 개수를 줄인다는 것은 0 으로 만든다는 뜻이 아니라
   **꼭 필요한 데만 남긴다**는 뜻이다. */
.step__who[data-who="고객사"] { background: var(--brand-tint); color: var(--brand); }

/* ⚠ 좁은 화면용 재배치 규칙을 **걷어냈다**(2026-09-14).
   카드가 이미 가로 한 줄(`display: flex`)이라 그대로 좁아지기만 하면 된다.
   옛 규칙은 `grid-template-areas` 로 번호 · 제목 · 설명 · 시점을 두 줄로
   다시 세웠는데, 새 배치와 겹쳐 **좁은 화면에서만 두 줄이 됐다.**
   ⚠ 목록의 세로 전환은 `.steps__list` 의 860px 쿼리가 맡는다. */

/* ==========================================================================
   가이드북 — 목차 + 본문
   ========================================================================== */
.guide { padding: 20px 0 var(--section-y); }
.guide__head { max-width: 680px; margin-bottom: 30px; }
.guide__head .h2 { margin: 0 0 12px; }

.guide__body {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  align-items: start;
}
/* 목차와 본문 사이 구분선.
   ⚠ .toc 는 sticky 라 거기에 border-right 를 걸면 목차 높이만큼만 그려진다.
     격자 컨테이너에 가상요소로 그어야 본문 끝까지 내려간다.
   ⚠ 1024 이하에서는 목차가 가로 줄로 바뀌므로 이 선을 그리지 않는다. */
@media (min-width: 1025px) {
  .guide__body { position: relative; }
  .guide__body::before {
    content: "";
    position: absolute;
    left: 260px; top: 0; bottom: 0;
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }
  .toc { padding-right: 24px; }
}
/* ⚠ grid 자식의 기본값은 min-width:auto 라 '줄어들지 않는 내용'(가로 목차 줄,
   min-width 를 준 표)이 있으면 그 칸이 콘텐츠 크기만큼 부풀어 문서를 통째로
   밀어낸다. 실측: 390px 화면에서 가로 스크롤 +1080px. 이 한 줄로 막는다. */
.guide__body > * { min-width: 0; }
@media (max-width: 1024px) { .guide__body { grid-template-columns: 1fr; gap: 32px; } }

/* --- 목차 --- */
.toc { position: sticky; top: calc(var(--nav-h) + 28px); }
.toc__title {
  margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.toc__list { display: flex; flex-direction: column; gap: 2px; }
.toc__link {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 12px; border-radius: 8px;
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
  transition: background-color .16s ease, color .16s ease;
}
.toc__link:hover { background: var(--bg-2); color: var(--text); }
/* 활성 표시 — 옅은 배경만으로는 약해서 왼쪽에 굵은 막대를 더한다.
   ⚠ border-left 를 쓰면 글자가 3px 밀려 활성/비활성 줄이 어긋난다.
     box-shadow inset 으로 그려 자리를 차지하지 않게 한다. */
.toc__link.is-active {
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand);
}
.toc__num { flex: none; font-variant-numeric: tabular-nums; opacity: .7; }

/* 태블릿 이하 — 목차를 가로로 눕히고 스크롤 */
@media (max-width: 1024px) {
  .toc { position: static; }
  .toc__list {
    flex-direction: row; flex-wrap: nowrap;
    gap: 8px; overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }
  .toc__link { flex: none; border: 1px solid var(--line); white-space: nowrap; }
  .toc__link.is-active { border-color: var(--brand); }
}

/* --- 본문 --- */
/* ⚠ 접힌 목록이라 간격이 넓으면 줄 수보다 여백이 더 길어진다 */
.chapters { display: flex; flex-direction: column; gap: 12px; }
.chapters--acc { gap: 7px; }

.chapter {
  padding: 38px 40px 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
@media (max-width: 768px) { .chapter { padding: 26px 20px 28px; } }

/* 목차를 눌러 이동하면 붙어 있는 상단바(68px) 아래로 장이 파고든다.
   ⚠ margin-top 을 주는 것은 해법이 아니다 — 여백만 늘고 파고드는 것은 그대로다.
     scroll-margin-top 이 앵커가 멈출 자리를 내려 준다.
     빌더 화면에는 있었는데(build.css) 가이드북에는 없어서 05장 표의 윗줄이 잘렸다. */
.chapter { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* 제목 앞 번호 — 'CHAPTER 01' 대신 숫자만 둔다. 제목과 같은 줄이라
   display:inline-block · margin-bottom 을 쓰면 줄 높이가 어긋난다. */
.chapter__num {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}
.chapter__title { margin-bottom: 18px; }

/* --- 장 접기 (모든 폭) -------------------------------------------------
   ⚠ 여닫기는 **CSS 가 정한다.** JS 는 감싸기만 하고 .is-open 을 붙인다 —
     그래서 화면 폭이 바뀌어도 DOM 을 다시 짜지 않는다.
   ⚠ **데스크톱에서도 접는다**(2026-09-13 사용자 요청). 이 자리에는 그전까지
     "데스크톱에서는 접지 않는다 · 옆에 목차가 붙어 있어 지금이 읽기 좋다" 고
     적혀 있었다. 다시 재 보니 1440px 에서 문서가 **15,750px = 화면 17장** 이었다.
     목차는 길을 알려 줄 뿐 그 길이를 줄여 주지는 않는다.
   ⚠ 접힌 글자는 Ctrl+F 로 안 찾힐다. 그래서 [모두 펼치기]는 **모든 폭에서**
     보여야 한다(769px 이상에서 숨기던 규칙을 같이 지웠다). */
.chapter__tg {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.chapter__cv { display: none; }

/* 접힌 목록에서는 **제목이 목록 줄**이지 장 제목이 아니다(사용자 지시 2026-09-14).
   ⚠ 펼친 뒤의 제목(30px)을 그대로 두면 접힌 열세 줄이 전부 30px 이라
     한 화면에 여덟 장밖에 안 들어온다(실측 1440x900: 줄 75px · 목록 1,196px).
   ⚠ **펼친 장의 제목은 안 건드린다.** 여기 규칙은 `.chapters--acc` 안쪽,
     즉 **누르는 줄**에만 건다. 본문을 열면 원래 크기로 읽는다. */
.chapters--acc .chapter { padding: 0; }
.chapters--acc .chapter__title {
  margin: 0;
  font-size: 16px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.45;
}
.chapters--acc .chapter__num { margin-right: 6px; font-size: 13px; font-weight: 800; }
.chapters--acc .chapter__tg {
  padding: 12px 16px;
  align-items: center;
  cursor: pointer;
  border-radius: var(--radius);
}
/* ⚠ 열면 제목이 **본문 제목으로 돌아온다.** 접힌 줄과 같은 크기로 두면
   무엇이 제목이고 무엇이 본문인지 갈리지 않는다. */
/* 펼친 장의 제목 = **대분류**(사용자 지시 2026-09-15).
   18px · 700 · slate-900 · 아래 16px. ⚠ 접힌 줄(16px)은 건드리지 않는다 —
   그것은 2026-09-14 에 목록 줄로 줄여 둔 것이고 여기와 다른 자리다. */
.chapters--acc .chapter.is-open .chapter__title {
  font-size: 18px; font-weight: 700; color: #0f172a;
  margin-bottom: 16px;
}
.chapters--acc .chapter.is-open .chapter__num { font-size: 16px; }
.chapters--acc .chapter.is-open .chapter__tg { border-radius: var(--radius) var(--radius) 0 0; }
.chapters--acc .chapter__tg:hover { background: var(--bg-2); }

/* 꺾쇠. 이것이 없으면 '누르면 열린다' 를 알 수 없다. */
.chapters--acc .chapter__cv {
  display: block; flex: none; margin-left: auto;
  /* ⚠ 제목이 30 → 16px 로 줄었으니 꺾쇠도 함께 줄인다. 안 줄이면 혼자 크다. */
  width: 7px; height: 7px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s var(--ease);
}
.chapters--acc .chapter.is-open .chapter__cv {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--brand);
}

.chapters--acc .chapter__body { display: none; padding: 0 20px 26px; }
.chapters--acc .chapter.is-open .chapter__body { display: block; }
/* 제목과 본문 사이를 가르는 줄. 열렸을 때만 있어야 한다. */
.chapters--acc .chapter.is-open .chapter__body { border-top: 1px solid var(--line); padding-top: 22px; }
.chapters--acc .chapter.is-open { border-color: var(--text-3); }

/* 첫 소제목의 윗줄은 이미 위에서 갈랐으니 겹치지 않게 */
.chapters--acc .chapter__body > .chapter__sub:first-child {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* 모두 펼치기 — ⚠ 접힌 글자는 Ctrl+F 로 안 찾힌다. 빠져나갈 길을 둔다. */
.chapters__all {
  /* ⚠ `.chapters` 안의 첫 칸이다(guide.js). 간격은 부모의 gap 이 맡는다 —
     margin-bottom 을 더하면 첫 장과만 더 벌어진다. */
  align-self: flex-start;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  cursor: pointer;
}
.chapters__all:hover { border-color: var(--text-3); color: var(--text); }
.chapters__all.is-on { border-color: var(--brand); color: var(--brand); }

/* ⚠ 인쇄는 접힌 것을 펴야 한다. 안 펴면 13장이 제목 열세 줄로 찍힌다. */
@media print {
  .chapters--acc .chapter__body { display: block !important; }
  .chapters__all, .chapter__cv { display: none !important; }
}
/* 본문. ⚠ 줄간격을 **1.8** 로 넓힌다(사용자 지시: leading-relaxed 이상).
   `body` 가 1.65 라 그대로 두면 한글 안내문으로는 빡빡하다.
   ⚠ 글꼴은 `body` 의 `--font`(맨 앞이 "Pretendard Variable")를 물려받는다 —
     여기에 다시 적지 않는다(두 곳이 되면 한쪽만 고쳐진다). */
.chapter p { color: var(--text-2); line-height: 1.8; }
.chapter p + p { margin-top: 14px; }
.chapter .list li { line-height: 1.8; }
.chapter strong { color: var(--text); font-weight: 700; }

/* 소제목 = **중분류**(사용자 지시 2026-09-15).
   ⚠ 전에는 21px 이라 장 제목(20px)보다 **컸다.** 위계가 뒤집혀 어디가
     장이고 어디가 그 안의 묶음인지 안 갈렸다. 14px 로 내리고 무게와 색을
     올려 **이름표**로 읽히게 한다(본문 16px 보다 작지만 더 굵고 짙다).
   ⚠ 윗줄은 남긴다. 05 장처럼 묶음이 여럿인 장에서 줄이 없으면 본문이
     통째로 이어져 보인다. 다만 여백은 34/24 → 24/8 로 줄인다. */
.chapter__sub {
  margin: 24px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  color: #1e293b;
}
.chapter__sub:first-of-type { margin-top: 24px; }

/* 목록 */
.list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.list li {
  position: relative;
  padding-left: 22px;
  color: var(--text-2);
}
.list li::before {
  content: ""; position: absolute; left: 4px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: .55;
}
.list b { color: var(--text); font-weight: 700; }

/* 블록 카드 격자 (메인 화면 블록 소개 등) */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px; margin-top: 18px;
}
.card-mini {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.card-mini__t { font-size: var(--fs-sm); font-weight: 700; margin-bottom: 5px; }
.card-mini__d { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; }

/* 안내 박스 */
/* 안내 상자.
   ⚠ **글자를 보라로 칠하지 않는다**(2026-09-16). 이것은 **읽는 글**이지
     강조가 아니다. 전에는 상자 전체가 보라 글자라, 서너 줄이 통째로
     보라 덩어리였다(실측 2026-09-15: 이 상자 하나가 보라 요소 5개를 냈다).
   ⚠ 바탕의 옅은 틴트는 남긴다 — 그것이 '여기는 본문과 다른 말' 을 이미 말한다.
   ⚠ 아이콘만 보라로 둔다. 상자가 무엇인지 짚어 주는 한 글자다. */
.note {
  display: flex; gap: 12px;
  margin-top: 20px; padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  font-size: var(--fs-sm); color: var(--text-2);
}
.note b { color: var(--text); font-weight: 700; }
.note__icon { flex: none; font-weight: 800; color: var(--brand); }
.note--warn { background: #fff7e8; color: #8a5a00; }

/* 표 — 좁은 화면에서 가로 스크롤 (본문이 밀려나지 않게) */
/* 표.
   ⚠ 세로줄은 원래 없다(border-bottom 만 쓴다). 여기서 더 한 것은 셋이다 —
     머리와 몸을 가르는 줄을 굵게, 줄무늬 배경, 숫자 칸 우측 정렬.
   ⚠ 줄무늬와 줄눈을 **둘 다 진하게** 두면 시끄럽다. 줄눈을 더 옅게 낮췄다.
   ⚠ 숫자 정렬은 CSS 로 못 고른다. guide.js 가 **그 열이 전부 숫자일 때만**
     .table__n 을 붙인다(섞인 열을 오른쪽으로 밀면 더 못 읽는다). */
.table-scroll {
  margin-top: 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); min-width: 460px;
}
.table th, .table td {
  padding: 12px 16px; text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.table th {
  font-weight: 700; color: var(--text-2); font-size: var(--fs-xs);
  background: var(--bg-2);
  letter-spacing: .02em;
  border-bottom: 1px solid var(--line);   /* 머리와 몸의 경계는 한 단계 진하게 */
  white-space: nowrap;
}
.table td { color: var(--text-2); }
/* 줄무늬. 홀수/짝수는 머리를 뺀 tbody 기준이라야 한다. */
.table tbody tr:nth-child(even) { background: var(--bg); }
.table tbody tr:last-child td { border-bottom: 0; }
/* 첫 칸은 그 줄의 이름이다. 조금 진하게 둬야 줄이 눈으로 이어진다. */
.table tbody td:first-child { color: var(--text); font-weight: 600; }
/* 숫자 칸. ⚠ tabular-nums 가 없으면 자릿수가 다를 때 소수점이 어긋난다. */
.table .table__n { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
  .table th, .table td { padding: 10px 12px; }
}

/* 첫 열(모듈명)과 끝 열(관리자 설정)이 두 줄로 떨어지지 않게 붙잡는다.
   고정 width 로는 안 됐다 — 글자가 칸보다 길면 width 를 무시하고 줄바꿈한다.
   ⚠ .table 전체에 걸지 말 것: 설명이 긴 열을 가진 표가 가로로 터진다.
     그래서 사용 모듈 표에만 .table--fit 을 붙였다. */
.table--fit th:first-child,  .table--fit td:first-child,
.table--fit th:last-child,   .table--fit td:last-child { white-space: nowrap; }
.table--fit th:last-child,   .table--fit td:last-child { width: 1%; }

/* 흐름 표시 */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.flow__item {
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 600;
}
.flow__arrow { color: var(--text-3); font-size: var(--fs-sm); }
.flow__item--end { background: var(--brand); border-color: var(--brand); color: #fff; }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: 0; margin-top: 20px; }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item:first-child { border-top: 1px solid var(--line-2); }
.faq__q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 2px; text-align: left;
  font-size: var(--fs-body); font-weight: 700;
}
/* 여닫는 표시.
   ⚠ **45도 돌리지 말 것.** `+` 를 45도 돌리면 `×` 가 되는데, 사용자 화면에서
     그것이 "지우기" 로 읽혔다(실측 2026-09-15). 여는 것과 지우는 것은
     다른 일이다. 글자를 `+` ↔ `−` 로 바꾼다.
   ⚠ 회색이다. 다섯 항목에 보라 `+` 가 다섯 개면 그것만 눈에 띈다. */
.faq__mark {
  flex: none; color: var(--text-3);
  font-size: 20px; line-height: 1.3;
  font-size: 0;   /* 원래 글자(+)를 감추고 ::before 로 그린다 */
  transition: color .16s ease;
}
.faq__mark::before { content: '+'; font-size: 20px; }
.faq__item.is-open .faq__mark::before { content: '\2212'; }   /* − 빼기표 */
.faq__q:hover .faq__mark { color: var(--text); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 2px 20px; font-size: var(--fs-sm); }

/* ==========================================================================
   마무리 CTA (다크)
   ========================================================================== */
.cta {
  padding: var(--section-y) 0;
  background: var(--dark-2);
  color: #fff;
  text-align: center;
}
.cta .h1 { color: #fff; }
.cta .h1 em { font-style: normal; color: var(--brand-soft); }
.cta__sub { margin: 16px auto 34px; max-width: 560px; color: rgba(255,255,255,.66); }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   푸터
   ========================================================================== */
.footer { padding: 40px 0; border-top: 1px solid var(--line); background: #fff; }
.footer__in {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}
.footer p { font-size: var(--fs-xs); color: var(--text-3); }

/* ==========================================================================
   기본정보 입력 모달
   ========================================================================== */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(12,12,18,.6); backdrop-filter: blur(3px); }
.modal__dialog {
  position: relative;
  width: 100%; max-width: 520px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 34px 34px 30px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  animation: modal-in .26s var(--ease) both;
}
@media (max-width: 480px) { .modal__dialog { padding: 26px 20px 24px; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 9px;
  font-size: 22px; line-height: 1; color: var(--text-3);
  transition: background-color .16s ease, color .16s ease;
}
.modal__close:hover { background: var(--bg-2); color: var(--text); }
.modal__title { margin-bottom: 6px; }
.modal__desc { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field__label { display: block; margin-bottom: 7px; font-size: var(--fs-sm); font-weight: 700; }
.field__label .req { color: var(--brand); margin-left: 3px; }
.field__hint { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); }
.field input, .field select {
  width: 100%; padding: 13px 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field input::placeholder { color: #b9bcc4; }
.field input:focus, .field select:focus {
  outline: 0; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(106,80,240,.14);
}
.field.is-error input, .field.is-error select { border-color: var(--danger); }
.field__error { margin-top: 6px; font-size: var(--fs-xs); color: var(--danger); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }

/* 뺀 항목을 언제 묻는지 알려 준다 — 안 적으면 '왜 안 물어보지' 가 된다 */
.modal__later {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: var(--text-2);
}
.modal__later b { color: var(--text); font-weight: 700; }

.modal__foot { margin-top: 24px; }
.modal__foot .btn { width: 100%; }
.modal__agree {
  margin-top: 14px;
  font-size: var(--fs-xs); color: var(--text-3); line-height: 1.6; text-align: center;
}

/* ==========================================================================
   8주 킥오프 타임라인
   왼쪽에 세로선을 긋고 주차 배지를 그 위에 얹는다.
   [data-here] = 이 도구에서 진행하는 구간(1~2주) — 퍼플로 구분한다.
   ========================================================================== */
.timeline {
  position: relative;
  margin-top: 22px;
  padding-left: 4px;
}
/* 세로선 — 배지 중심(28px)에 맞춘다. 마지막 항목 아래로는 내려가지 않게 잘라 둔다. */
.timeline::before {
  content: "";
  position: absolute;
  left: 31px; top: 14px; bottom: 22px;
  width: 2px;
  background: var(--line);
}

.tl {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 10px 0 18px;
}
.tl__week {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 28px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid var(--line);
  font-size: var(--fs-xs); font-weight: 800; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.tl[data-here] .tl__week { background: var(--brand); border-color: var(--brand); color: #fff; }

.tl__title { font-size: var(--fs-body); font-weight: 700; margin-bottom: 4px; }
.tl[data-here] .tl__title { color: var(--brand); }
.tl__desc { font-size: var(--fs-sm); color: var(--text-2); }
.tl__desc b, .tl__title b { color: var(--text); font-weight: 700; }
.tl[data-here] .tl__title b { color: var(--brand); }

@media (max-width: 480px) {
  .timeline::before { left: 25px; }
  .tl { grid-template-columns: 44px 1fr; gap: 12px; }
  .tl__week { width: 44px; }
}

/* ==========================================================================
   선택지 카드 (.opts / .opt)
   홈 타입 · 위젯 · 사용 모듈 · 주문 유형 · 스탬프 · 등급 — '안(案)' 하나에 카드 하나.

   ⚠ 비교 슬라이드 한 장을 통째로 넣지 말 것.
     1920px 짜리 가로 슬라이드에 안이 3~4개 들어 있어, 본문(약 828px)에 넣으면
     폰 하나가 160px 로 줄어 안에 글씨가 안 읽힌다. 그러면 눌러서 크게 보는 수밖에
     없어진다. 안별로 잘라 카드로 놓으면 한 칸당 폰 하나라 그대로 읽힌다.
   ========================================================================== */
/* ---------- 화면 예시 접는 상자 ----------
   ⚠ 긴 장의 높이는 **설명글이 아니라 스크린샷**이다(실측: ch5 2,933px 중
     격자가 2,288px = 78%). 설명글은 26~53px 짜리라 다 지워도 안 짧아진다.
   ⚠ 그림을 지우지 않고 접는다. 바로 위 표에 같은 내용이 글로 다 있고
     실제 화면은 2단계(앱 구성)에서 눌러 가며 본다. */
.shots {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.shots__h {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px;
  cursor: pointer; list-style: none;
  border-radius: 12px;
}
.shots__h::-webkit-details-marker { display: none; }
.shots__h:hover { background: var(--bg-2); }
.shots[open] .shots__h { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.shots__t { font-size: var(--fs-body); font-weight: 800; flex: none; }
.shots__n {
  flex: none; padding: 2px 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-3);
  font-size: var(--fs-xs); font-weight: 700;
}
/* 무엇이 들어 있는지 적는다. 모르면 펼칠지 말지를 정할 수 없다. */
.shots__d {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-xs); color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shots__cv {
  flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.shots[open] .shots__cv {
  transform: rotate(-135deg) translate(-2px, -2px);
  border-color: var(--brand);
}
.shots > .opts { margin: 14px 16px 16px; }
@media (max-width: 768px) {
  .shots__d { display: none; }          /* 좁으면 제목만 */
  .shots > .opts { margin: 12px 12px 14px; }
}
/* ⚠ 인쇄는 guide.js 의 beforeprint 가 편다(CSS 로는 못 편다). 모양만 지운다. */
@media print {
  .shots { border: 0; background: none; }
  .shots__h { padding: 0; border: 0 !important; }
  .shots__n, .shots__cv, .shots__d { display: none; }
  .shots > .opts { margin-inline: 0; }
}

.opts {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  /* align-items 를 start 로 두면 카드 키가 제각각이라 바닥선이 어긋난다.
     stretch(기본)로 두고 카드를 세로 flex 로 만들어 바닥을 맞춘다. */
}
.opts > * { min-width: 0; }

.opts[data-n="2"] { grid-template-columns: repeat(2, 1fr); }
.opts[data-n="3"] { grid-template-columns: repeat(3, 1fr); }
/* 4개를 한 줄에 놓으면 칸이 190px 로 줄어 다시 안 읽힌다 — 2x2 로 놓는다 */
.opts[data-n="4"] { grid-template-columns: repeat(2, 1fr); }
/* ⚠ 4칸 한 줄로 늘리지 말 것. 본문 왼쪽에 목차 260px + 간격 48px 이 있어
     1440px 에서도 칸이 191px 로 줄어든다(원래 주석의 190px 이 그것이다).
     2x2 · --shot-h 660px 이면 그림이 303x628 로 그려져 좌우 회색이 31px 뿐이다. */

@media (max-width: 768px) {
  .opts[data-n] { grid-template-columns: 1fr; }
}

.opt {
  display: flex;
  flex-direction: column;   /* 설명 줄 수가 달라도 카드 바닥선이 맞도록 */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s var(--ease);
}
.opt:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* 이미지 칸 높이는 격자마다 --shot-h 로 못 박는다.
   원본 비율이 제각각(0.39 ~ 2.31)이라 height:auto 로 두면 카드마다 그림 크기와
   위아래 선이 다 어긋난다. contain 이라 잘리지도 늘어나지도 않는다. */
.opt img {
  width: 100%;
  height: var(--shot-h, 560px);
  object-fit: contain;
  object-position: center;
  padding: 16px;
  /* 회색을 아주 옅게 — 진하면 그림 칸만 '카드' 로 읽히고 아래 설명이 밖으로 떠 보인다 */
  background: var(--line-2);
  border-bottom: 1px solid var(--line);
}
/* 한 줄에 하나뿐인 모바일에서는 맞출 상대가 없으므로 원래 비율로 크게 보여준다 */
@media (max-width: 768px) {
  .opt img { height: auto; padding: 12px; }
}

.opt figcaption { flex: 1 1 auto; padding: 16px 18px 18px; }

/* 회색 그림 칸과 흰 설명 칸이 나뉘어 있어 이름이 카드 밖에 떠 있는 것처럼 보인다.
   알약으로 감싸면 카드 안의 라벨로 읽힌다(고객사 지적). */
/* 'A안' 과 이름을 **하나의 알약**으로 묶는다.
   전에는 'A안' 만 큰 맨글자, 이름만 작은 알약이라 둘이 따로 놀았고,
   회색 그림 칸 아래 흰 칸에 글자만 떠 있는 것처럼 보였다(고객사 지적). */
.opt__name {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  margin: 0 0 10px;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -.01em;
}
.opt__name span {
  margin: 0;
  padding: 0;
  background: none;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.opt__desc { font-size: var(--fs-sm); color: var(--text-2); }
.opt__desc b { color: var(--text); font-weight: 700; }

/* ==========================================================================
   접근성 — 모션 최소화
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   다른 브랜드 사례 (.tally / .cases / .case) + 브랜드 화면 모달 (.bmodal)
   실제 운영 중인 앱들이 무엇을 골랐는지 보여주는 자리.
   카드는 글자로만 짜고, 실제 앱 화면은 눌렀을 때 모달에서 보여준다.
   ========================================================================== */
.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.tally__item {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}
.tally__n {
  flex: none;
  font-size: 34px; font-weight: 800; line-height: 1;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.tally__l { font-size: var(--fs-sm); font-weight: 700; line-height: 1.4; }
@media (max-width: 560px) {
  .tally { grid-template-columns: 1fr; }
  .tally__item { padding: 14px 16px; }
}

/* ---------- 브랜드 카드 (누르면 화면이 열린다) ---------- */
/* ⚠ **여섯 장이 두 줄이다**(사용자 지시 2026-09-17). 묶음마다 줄을 따로
   쓰면 3 + 2 + 1 이라 **석 줄**이 되고, 마지막 줄은 한 장뿐이라 오른쪽이
   통째로 빈다. 묶음을 3칸 격자 위에 올려 **A안(2칸) 옆에 C안(1칸)** 이
   들어가게 하면 딱 두 줄이다.
   ⚠ 칸 수는 마크업이 `--cg` 로 알려 준다(그 묶음의 곳 수와 같다).
     **바깥 격자와 안쪽 격자가 같은 값을 써야** 카드 폭이 줄마다 같아진다.
   ⚠ 두 격자의 `gap` 도 같아야 한다. 다르면 2칸짜리 묶음의 카드가
     3칸짜리보다 넓어져 두 줄이 어긋난 것처럼 보인다.
   ⚠ `auto-fit` 을 쓰지 말 것. 빈 칸을 접어서 1곳짜리 묶음(C안)이면 그 한
     장이 줄 전체로 늘어나 혼자 커 보인다.
   ⚠ 칸은 **세로로 살짝 길게** 둔다. 안에 " 등급 · 화면 · 실제 앱 화면 보기" 가
     세 줄로 쌓이므로 가로로 퍼지면 오른쪽이 비어 보인다. */
.casegroups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 12px;
}
/* ⚠ 묶음을 **세로 흐름**으로 둔다. 한 줄을 같이 쓰는 A안(2칸)과 C안(1칸)은
   격자가 키를 맞춰 주는데, 그 키가 안쪽 카드까지 내려가야 바닥선이 맞는다
   (실측 2026-09-17: 안 맞추면 우지커피만 187px 이고 옆 둘은 210px 이다). */
.casegroup { grid-column: span var(--cg, 3); min-width: 0; display: flex; flex-direction: column; }
.cases {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cg, 3), minmax(0, 1fr));
  gap: 12px;
}
.cases > * { min-width: 0; }
/* ⚠ 경계를 **860px** 로 잡는다. 1100 으로 두면 흔한 노트북 폭에서 두 줄이
   풀려 석 줄이 된다(실측 1100px · 900px 둘 다 넉 줄이었다). 860 에서도 칸이
   243px 라 카드 안 세 줄이 무너지지 않는다.
   그 아래는 묶음을 한 줄씩 따로 세운다 — 3칸 격자를 그대로 두면 2칸짜리
   묶음이 화면보다 넓어진다. */
@media (max-width: 860px) {
  .casegroups { grid-template-columns: 1fr; gap: 26px; }
  .casegroup { grid-column: 1 / -1; }
  .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) { .cases { grid-template-columns: 1fr; } }

.case {
  position: relative;
  display: flex;
  flex-direction: column;          /* 설명 줄 수가 달라도 바닥선이 맞도록 */
  width: 100%;
  /* ⚠ 셋이 한 줄로 서므로 여백을 조인다. 20/22 그대로면 글자 칸이 좁아져
     등급 이름이 줄마다 끊긴다. */
  padding: 15px 15px 14px;
  padding-left: 18px;              /* 좌측 띠(3px) 만큼 안으로 */
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;                /* 좌측 띠가 라운드에 맞춰 깎이게 */
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ease);
}
/* 브랜드 색은 왼쪽 띠로만 쓴다 — 카드 전체를 물들이면 여섯 장이 서로 싸운다.
   border-left 로 두면 모서리 곡선을 따라 띠가 휘어 뭉툭해진다. */
.case::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--bc, var(--brand));
}
.case:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.case:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.case__head { display: flex; align-items: center; gap: 9px; }
.case__dot {
  flex: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bc, var(--brand));
}
.case__name { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em; }

/* ---------- 타입별 묶음 ----------
   배지에 타입별 색을 주면 카드 한 장에 색 체계가 둘이 된다
   (왼쪽 띠·점 = 브랜드, 배지 = 타입). 보는 사람이 매번 되짚어야 한다.
   색을 늘리지 않고 '묶어서 세우는' 것으로 같은 목적을 달성한다. */
/* 묶음 사이 여백은 `.casegroups` 의 gap 이 맡는다 — margin 으로 두면
   같은 줄에 선 묶음(A안 · C안)만 아래로 밀린다. */
.casegroup__label {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 12px;
  font-size: var(--fs-body); font-weight: 800; letter-spacing: -.01em;
}
.casegroup__tone { font-size: var(--fs-sm); font-weight: 600; color: var(--label); }
.casegroup__n {
  /* 라벨 옆에 붙인다 — margin-left:auto 로 밀면 1200px 건너편에 떨어져
     라벨과 관계없는 숫자처럼 보인다 */
  padding: 3px 10px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2);   /* 모노톤 */
  font-size: var(--fs-xs); font-weight: 700;
}

.case__spec { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.case__spec > span { display: flex; gap: 12px; }
.case__spec i {
  flex: none; width: 48px; padding-top: 2px;
  font-style: normal;
  font-size: var(--fs-xs); font-weight: 700;
  color: var(--label);            /* 라벨은 쿨그레이 */
}
.case__spec em {
  font-style: normal;
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text);              /* 값은 확실히 진하게 — 위계를 벌린다 */
}
/* 확인하지 못한 값은 값처럼 읽히지 않게 눌러 둔다 */
.case__spec .case__na {
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-2);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: var(--fs-xs);
}

.case__more {
  display: flex; align-items: center; gap: 5px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);   /* 정보와 동작을 가른다 */
  font-size: var(--fs-sm); font-weight: 700; color: var(--brand);
}
.case__more::after {
  content: "→";
  display: inline-block;
  transition: transform .2s var(--ease);
}
.case:hover .case__more::after { transform: translateX(3px); }

@media (max-width: 400px) {
  .case__spec > span { flex-direction: column; gap: 2px; }
  .case__spec i { width: auto; }
}

/* ==========================================================================
   브랜드 화면 모달
   사진은 모달을 열 때 만들어 붙인다 — 18장을 페이지 열 때 다 받으면 무겁다.
   ========================================================================== */
.bmodal { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px; }
.bmodal__backdrop { position: absolute; inset: 0; background: rgba(12,12,18,.62); backdrop-filter: blur(6px); }
.bmodal__panel {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1200px;
  max-height: calc(100dvh - 48px);
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: modal-in .26s var(--ease) both;
}
@media (max-width: 768px) { .bmodal { padding: 0; } .bmodal__panel { max-width: none; max-height: 100dvh; border-radius: 0; } }

.bmodal__bar {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.bmodal__dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.bmodal__name { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.01em; }
.bmodal__type {
  padding: 4px 11px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-2);   /* 카드 쪽과 같은 모노톤 */
  font-size: var(--fs-xs); font-weight: 700;
}
.bmodal__close {
  margin-left: auto; flex: none;
  width: 36px; height: 36px; border-radius: 10px;
  font-size: 24px; line-height: 1; color: var(--text-3);
  transition: background-color .16s ease, color .16s ease;
}
.bmodal__close:hover { background: var(--bg-2); color: var(--text); }

.bmodal__body { flex: 1 1 auto; overflow-y: auto; padding: 22px; }
.bmodal__note { margin-top: 18px; font-size: var(--fs-xs); color: var(--text-3); }

/* ---------- 화면 세 장 ---------- */
.bshots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
.bshots > * { min-width: 0; }
@media (max-width: 1100px) { .bshots { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .bshots { grid-template-columns: 1fr; } }

.bshot {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
/* 원본 비율이 다르므로(정면 0.48 · 스토어 소개 0.56) 높이를 못 박아 줄을 맞춘다 */
/* 24장 전부 407x840(비율 0.48) 로 잘라 두었지만, 칸 폭이 달라져도 줄이 맞도록
   높이를 못 박고 contain 으로 넣는다 */
.bshot img {
  width: 100%; height: 520px;
  object-fit: contain;
  padding: 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
}
@media (max-width: 1100px) { .bshot img { height: 560px; } }
@media (max-width: 700px)  { .bshot img { height: auto; } }

.bshot figcaption { flex: 1 1 auto; padding: 14px 16px 16px; }
.bshot__t { font-size: var(--fs-body); font-weight: 800; margin-bottom: 6px; }
.bshot__t span {
  display: inline-block; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--bg-2); color: var(--text-3);
  font-size: var(--fs-xs); font-weight: 700; vertical-align: middle;
}
.bshot__d { font-size: var(--fs-sm); color: var(--text-2); }
.bshot__d b { color: var(--text); font-weight: 700; }

/* ==========================================================================
   정하셔야 하는 것 (랜딩의 안내 입구)
   ⚠ 전에는 이 자리에 13장이 통째로 있었다. 지금은 **입구만** 둔다.
   ⚠ 카드는 넷뿐이다. 늘리지 말 것 — 가이드북 2장의 1~2주차 항목이 근거다.
   ========================================================================== */
/* ⚠ 바로 위(.steps)의 보라 안내 박스와 맞닿는다. 실측: 그 박스 끝에서
     이 구역의 제목까지 **140px** 이 비었다. 맞닿는 면을 더 줄인다. */
.brief {
  padding: calc(var(--section-y) * .66) 0 calc(var(--section-y) * .7);
  background: var(--bg-2);
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.brief__head { max-width: 620px; margin-bottom: 26px; }
/* 작은 머리글. ⚠ 제목 위 한 줄은 '지금 어느 구역인가' 를 말한다. */
.brief__eyebrow {
  margin: 0 0 10px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em;
  /* ⚠ **회색이다**(2026-09-16). 이것은 "지금 어느 구역인가" 를 말하는
     라벨이지 누를 것이 아니다. 보라는 **누를 것**에만 남긴다 —
     사용자가 "보라가 너무 많다" 고 한 것이 이런 작은 것들이 모인 결과였다
     (실측 2026-09-15: 보라를 쓰는 요소 33개). */
  color: var(--text-3); text-transform: uppercase;
}
.brief__head .h2 { margin-bottom: 12px; }

/* ⚠ auto-fill 이다. auto-fit 이면 한 장만 남은 줄에서 그 장이 통째로 늘어난다. */
/* 네 장. ⚠ **좁으면 가로로 넘긴다**(사용자 지시 2026-09-15).
     세로로 쌓으면 카드 넷이 화면 세로를 통째로 먹어, 아래에 무엇이 더 있는지
     모른 채 한참 굴려야 했다.
   ⚠ 카드 폭을 `85vw` 로 못 박아 **한 장 하고 조금** 보이게 한다.
     딱 한 장만 보이면 옆으로 넘길 수 있다는 것을 모른다.
   ⚠ 스크롤바는 감춘다. 보이면 폰 화면에서 카드 아래가 지저분하다.
   ⚠ 넓은 화면(768px 이상)에서는 **격자로 되돌린다** — 가로 스크롤은
     마우스로 다루기 나쁘고, 넷이 한 줄에 들어가는 폭에서는 넘길 까닭이 없다. */
.brief__top {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: none;
  /* ⚠ `.wrap` 의 좌우 여백 밖으로 내보내 **화면 끝까지** 굴린다.
     안에 가두면 카드가 여백에서 잘려 반쯤 보인다. */
  margin-inline: calc(var(--side-pad) * -1);
  padding-inline: var(--side-pad);
  scroll-padding-inline: var(--side-pad);
}
.brief__top::-webkit-scrollbar { width: 0; height: 0; }
.brief__top > .bcard { flex: none; width: 200px; max-width: 70vw; scroll-snap-align: center; }
/* ⚠ 넷을 한 줄에 두려면 **768px 이 필요하다.** 560 으로 내렸다가
     640px 에서 알약이 140px 이 되어 '스탬프 정책' 과 '멤버십 등급' 이
     **잘렸다**(실측 2026-09-15). 넘침은 0 이라 폭 계산으로는 안 잡힌다 —
     제목의 `scrollWidth > clientWidth` 를 재야 잡힌다.
   ⚠ 한 알약에 필요한 폭은 번호 20 + 제목 84 + 화살표 14 + 여백 52 = 약 170px.
     넷이면 170x4 + 간격 42 = 722px + 좌우 여백이다. */
@media (min-width: 768px) {
  .brief__top {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    padding-bottom: 0;
    margin-inline: 0; padding-inline: 0;
  }
  .brief__top > .bcard { width: auto; max-width: none; }
}
/* 폰에서는 **두 줄 x 두 칸**이다. ⚠ 가로 스크롤로 두지 않는다 —
   알약은 짧아서 넷이 두 줄에 다 보이고, 그러면 굴릴 까닭이 없다. */
@media (max-width: 767px) {
  .brief__top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    padding-bottom: 0;
    margin-inline: 0; padding-inline: 0;
  }
  .brief__top > .bcard { width: auto; max-width: none; padding: 13px 12px; gap: 7px; }
  .bcard__t { font-size: 13.5px; }
}
/* ⚠ **320px 대에서는 한 칸이다.** 2칸이면 알약이 139px 인데, 거기에
   번호 + 제목 + 화살표를 넣으면 '스탬프 정책' 과 '멤버십 등급' 이 잘린다
   (실측 2026-09-15). 넷이 세로로 쌓이지만 한 줄짜리라 높이가 크지 않다. */
@media (max-width: 360px) {
  .brief__top { grid-template-columns: minmax(0, 1fr); }
  .bcard__t { font-size: 14.5px; }
}
/* 한 줄 알약.
   ⚠ 전에는 세로로 쌓인 카드라 **208px** 이었다. 설명이 서너 줄 들어 있었는데,
     이 구역은 **입구**지 읽는 자리가 아니다 — 무엇을 정하는지는 눌러서 본다
     (사용자 지시 2026-09-15: 208 → 56px).
   ⚠ 그래도 **알약으로 둔다.** 아래 "나머지 아홉 장" 은 글자 줄인데, 둘이
     같은 모양이면 "앞의 넷이 앱의 뼈대" 라는 무게가 사라진다.
   ⚠ 화살표를 절대 위치로 되돌리지 말 것. 한 줄이 된 지금은 흐름 안에서
     `margin-left:auto` 로 오른쪽 끝에 서는 편이 맞다. */
/* ⚠ **눌리는 카드로 보여야 한다**(사용자 지시 2026-09-16). 전에는 흰 바탕에
     1px 테두리라 글자 묶음처럼 보였다. 가만히 있을 때는 아주 옅게 가라앉히고,
     손을 올리면 **흰 바탕으로 떠오른다** — 가라앉음과 떠오름의 차이가 곧
     "누를 수 있다" 는 신호다.
   ⚠ `transform` 으로 띄우지 않는다. 넷이 나란히 있어 하나만 올라가면
     줄이 흔들려 보인다(어드민 카드에서 같은 판단을 했다). */
.bcard {
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 18px 17px;
  background: rgba(248, 250, 252, .6);
  border: 1px solid rgba(226, 232, 240, .8);
  border-radius: 16px;
  transition: background .18s ease, border-color .18s ease, box-shadow .22s var(--ease);
}
.bcard:hover {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 3px rgba(16, 16, 24, .07), 0 6px 16px rgba(16, 16, 24, .05);
}
/* 첫 줄 — 번호 · 제목 · 화살표. ⚠ 화살표는 여기 오른쪽 끝이다.
   설명 줄 옆에 두면 설명 길이마다 자리가 달라져 넷이 안 맞는다. */
.bcard__h { display: flex; align-items: center; gap: 9px; }
.bcard:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.bcard__n {
  flex: none;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .02em;
  /* ⚠ **회색이다**(2026-09-16). 번호는 순서를 말할 뿐이다.
     보라로 칠하면 넷이 나란히 서서 눈이 거기부터 간다. */
  color: var(--text-3); font-variant-numeric: tabular-nums;
}
/* ⚠ 제목이 **줄어드는 쪽**이다. `min-width: 0` 이 없으면 넷이 한 줄에
   안 들어갈 때 칸을 밀어내 격자가 어긋난다. */
.bcard__t {
  min-width: 0; margin: 0;
  font-size: 15px; font-weight: 800; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 설명. ⚠ **한 줄이다.** 처음에는 서너 줄이라 카드가 208px 이었고, 그 다음엔
   통째로 빼서 무엇을 정하는 자리인지 알 수 없게 됐다(사용자 지적). 지금이 그 사이다.
   ⚠ 두 줄까지만 흐르게 두고 그 아래는 자른다 — 좁은 폭에서 한 장만 길어지면
     넷의 높이가 어긋나 격자가 흐트러진다. `nowrap` 으로 못 박지 않는 것은,
     320px 에서는 글자가 거의 안 보이게 되기 때문이다. */
.bcard__d {
  font-size: var(--fs-xs); line-height: 1.55; color: var(--text-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
}
.bcard__go {
  flex: none; margin-left: auto;
  font-size: var(--fs-sm); font-weight: 800; color: var(--text-3);
  transition: color .18s ease, transform .22s var(--ease);
}
/* ⚠ 넷의 높이를 맞춘다. 설명이 한 줄인 것과 두 줄인 것이 섞이면
   격자가 흐트러져 보인다 — `align-items: stretch`(격자 기본)에 맡긴다. */
.brief__top > .bcard { height: 100%; }
.bcard:hover .bcard__go { color: var(--brand); transform: translateX(3px); }

/* 나머지 아홉 장 — 제목만. 위의 넷과 무게를 갈라야 한다. */
.brief__rest { margin-top: 40px; }
.brief__resth {
  margin: 0 0 12px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
}
/* ⚠ 아홉 장이므로 **3열로 못 박는다.** auto-fill 로 두면 1200px 에서 5열이 되어
     둘째 줄에 네 칸이 빈다(실측 2026-09-13). 칸 수가 내용 수와 안 맞으면
     격자가 흐트러져 보인다. */
.brief__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px 14px;
  max-width: 820px;
}
/* ⚠ 뱃지가 된 뒤로는 **격자가 아니라 흐르는 줄**이다(2026-09-16).
   3열 격자에 두면 짧은 칩 옆이 휑하게 빈다 — 제목 길이가 제각각이기 때문이다. */
.brief__grid {
  display: flex; flex-wrap: wrap; gap: 8px;
  grid-template-columns: none;
}
/* ⚠ **뱃지로 정돈한다**(사용자 지시 2026-09-16). 전에는 글자만 덩그러니
     격자에 놓여 "누를 수 있는 것" 으로 안 읽혔다. 칩 모양이면 손이 간다.
   ⚠ 위의 넷(2주 알약)보다 **작고 흐려야** 한다. 같은 무게면
     "앞의 넷이 앱의 뼈대" 라는 위계가 사라진다. */
.brief__grid a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; margin-left: 0;
  border-radius: 10px;
  background: rgba(241, 245, 249, .8);
  font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
  white-space: nowrap;
  transition: background-color .16s ease, color .16s ease;
}
.brief__grid a span {
  flex: none;
  font-weight: 800; color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.brief__grid a:hover { background: rgba(226, 232, 240, .9); color: var(--text); }

/* ==========================================================================
   자주 묻는 질문 (랜딩 · 대표 다섯)
   ⚠ 문항은 js/faq-data.js 한 곳에 있다. 여기서 다시 적지 말 것.
   ========================================================================== */
/* ⚠ 위의 .brief 와 잇달아 있어 사이 여백이 두 배가 된다(120 + 120).
     위쪽만 줄인다 — 아래는 마무리 CTA 와의 사이라 그대로 둔다. */
/* ⚠ 위(.brief)와 맞닿아 실측 **175px**(96 + 79)이 비었다. */
.qa { padding: calc(var(--section-y) * .55) 0 var(--section-y); }
/* ⚠ 목록과 **같은 폭**으로 묶는다. 안 묶으면 [전체 보기] 가 1320 까지 가서
     820 에서 끝나는 목록과 따로 논다. */
.qa__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  max-width: 820px;
  margin-bottom: 24px;
}
.qa__all {
  /* ⚠ 평소엔 **회색**, 손을 올리면 보라다. 누를 수 있다는 것은 커서와
     화살표가 말한다 — 가만히 있을 때까지 색을 쓸 일은 아니다. */
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
  transition: transform .18s var(--ease), color .16s ease;
}
.qa__all:hover { text-decoration: underline; text-underline-offset: 4px; }
/* ⚠ 랜딩의 FAQ 는 **얇아야** 한다. 카드로 만들면 위의 격자와 무게를 다툰다.
     줄 사이 선 하나로만 가른다. */
.qa__list { max-width: 820px; border-top: 1px solid var(--line); }
.qa .faq__item { border-bottom: 1px solid var(--line); }

/* ==========================================================================
   현황을 보는 동안의 상단바 위계
   ⚠ 이 화면의 주 행동은 **나가기가 아니다.** 현황을 보러 온 자리다.
     그래서 셋 다 채움 단추로 두지 않는다(검정 주 단추 제안을 안 받은 이유다 —
     브랜드 색이 그로스잇 보라인데 주 단추만 검정이면 색이 둘이 된다).
       [이용 안내로]      밑줄 링크  ← 가장 낮게
       [앱 구성 이어하기]  테두리
       [화면정의서 보기]   테두리 + 한 단 진하게
   ========================================================================== */
/* 현황을 보는 동안 #navStat 은 '이용 안내로' 가 된다(status.js open). */
.nav__acts .btn.is-back {
  border-color: transparent;
  background: transparent;
  color: var(--text-3);
  padding-inline: 8px;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line);
}
.nav__acts .btn.is-back:hover { color: var(--text); text-decoration-color: var(--text-3); }
/* 화면정의서는 이 자리에서 가장 쓸모 있는 길이라 한 단 진하게 둔다. */
#navDoc { border-color: var(--text-3); color: var(--text); font-weight: 700; }
#navDoc:hover { border-color: var(--brand); color: var(--brand); }

/* ==========================================================================
   글자 입력칸 — **모든 페이지가 함께 쓴다.**
   ⚠ build.css 에 두지 말 것. 그 파일은 /builder 와 /v2 만 싣는데
     /result(담당자·연락처)와 랜딩(간편 조회)도 이 클래스를 쓴다.
     사본을 만들지도 말 것 — 미세하게 달라져 화면마다 칸 모양이 갈린다.
   ========================================================================== */
.bd-input {
  width: 100%;
  max-width: 420px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bd-input::placeholder { color: var(--text-3, #9aa0ab); font-weight: 500; }
.bd-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, .14);
}
.bd-input--sub { margin-top: 12px; max-width: 320px; }
.bd-input--hex { max-width: 108px; text-transform: lowercase; font-variant-numeric: tabular-nums; }