/* ==========================================================================
   그로스잇 멤버스 — 2단계(앱 구성) 화면
   왼쪽 질문 · 오른쪽 폰. 폰은 붙여 둔다(고르는 즉시 바뀌는 것을 봐야 한다).

   ⚠ 폰은 390 + 테두리 20 = 410px 고정이다(phone.css). 줄이지 않는다.
     그래서 두 칸 배치는 질문 칸 최소 420px 를 더해 약 950px 부터 성립한다.
     그보다 좁으면 폰을 위로 올려 한 칸으로 쌓는다 — 폰을 아래로 내리면
     무엇을 고르고 있는지 화면에서 사라진다.
   ========================================================================== */

.bd-body { background: var(--bg-2); }

/* ⚠ 아래 여백을 .bd 에 두면 안 된다.
     그 90px 은 sticky 가 붙어 있는 칸(.bd__p) 바깥이라 문서만 90px 더 굴러가고,
     붙는 덩어리는 그만큼 먼저 풀려 페이지 끝에서 폰이 위로 밀려 올라간다
     (실측 1920x1080: top 146 이어야 하는데 95 로 떠올랐다).
     여백을 질문 칸 안에 넣으면 칸도 같이 길어져 굴러가는 만큼 붙어 있을 수 있다. */
.bd { padding: 0; }

/* ==========================================================================
   기본정보가 없을 때
   빌더는 브랜드명 없이는 그릴 것이 없다. 빈 화면을 보여주지 않고 되돌린다.
   ========================================================================== */
.bd-gate { padding: 90px 0 120px; }
.bd-gate__box {
  max-width: 560px;
  padding: 40px 36px 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}
.bd-gate__box p { margin: 14px 0 26px; color: var(--text-2); line-height: 1.7; }

/* ==========================================================================
   단계 줄
   ========================================================================== */
/* 상단바의 현재 단계.
   ⚠ 단계 칩은 화면 높이가 905px 이하면 붙임을 놓는다(폰 높이를 벌려는 의도된
     절충이다). 그래서 실측에서 scrollY 600 부터 '지금 5단계' 를 알 수 없었다.
     상단바는 늘 고정이므로 여기 두면 세로 공간을 한 px 도 쓰지 않는다.
   ⚠ 좁은 화면에서는 감춘다. 로고와 버튼 사이가 좁아 세 덩어리가 부딪힌다. */
.nav__step {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.nav__step__n { opacity: .62; font-weight: 700; }
@media (min-width: 760px) { .nav__step { display: inline-flex; } }

/* 단계 줄 — **상단바 안**에 산다.
   ⚠ 여기에 sticky·배경·테두리를 되돌리지 말 것. 상단바가 이미 고정이고
     배경도 가지고 있다. 되돌리면 머리가 다시 두 줄(138px)이 된다. */
.bd-steps {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  margin: 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bd-steps::-webkit-scrollbar { height: 0; }

/* ⚠ 좁은 화면에서 이 줄은 6개 칩을 224px 안에 담는다(실측 390px). 스크롤은
     되지만 **더 있다는 것을 알 수 없어** 칩이 잘린 것처럼 보였다(사용자 지적
     2026-09-13). 양 끝을 흐려 굴릴 수 있음을 보인다.
   ⚠ 상단바 안에 두는 것은 그대로 둔다. 아래에 따로 줄을 두면 머리가 138px 이
     되어 굴려도 안 사라진다(위 주석의 실측). 세로를 더 쓰지 않고 표시만 더한다.
   ⚠ 가운데 정렬을 푼다. 칩이 넘칠 때 `justify-content: center` 는 **왼쪽
     끝을 스크롤로 못 가게 잘라먹는다**(overflow 된 첫 칩에 닿을 수 없다). */
@media (max-width: 720px) {
  .bd-steps { justify-content: flex-start; margin: 0 10px; }
}

.bd-step {
  flex: none;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 6px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.bd-step i {
  font-style: normal;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 12px; font-weight: 800;
}
.bd-step em { font-style: normal; white-space: nowrap; }

.bd-step:hover { border-color: var(--brand); color: var(--brand); }
.bd-step.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.bd-step.is-on i { background: rgba(255, 255, 255, .24); color: #fff; }

.bd-step.is-done i { background: var(--brand); color: #fff; }
.bd-step.is-done.is-on i { background: rgba(255, 255, 255, .24); }

/* ==========================================================================
   두 칸
   ========================================================================== */
/* 통. ⚠ .wrap(1280px 잠금)을 쓰지 않는다 — 1920 에서 좌우 640px 을 버렸다.
   ⚠ 그렇다고 무제한은 아니다. 패널과 폰이 너무 멀어지면 눈이 왕복을 못 한다. */
.bd__w {
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 var(--side-pad);
}

/* 두 칸.
   ⚠ 왼쪽은 **위로만 잠근다**(최대 738px). 좁히면 안 된다 — 실측으로
     380px 은 +2,737px, 420px 은 +1,826px 이고 5단계 한 줄 표가 깨진다.
   ⚠ 오른쪽이 남는 폭을 전부 가져간다. 그 폭이 곧 폰 배율이 된다. */
.bd__in {
  display: grid;
  grid-template-columns: minmax(0, 738px) minmax(430px, 1fr);
  gap: 28px;
  align-items: start;
  padding-top: 20px;
}
/* ⚠ 칸을 **명시**한다. display:none 으로 패널을 빼면 폰이 격자의 첫 칸
   (접었을 때 0px)으로 밀려 들어가 오히려 좁아진다(실측 594 -> 0px). */
.bd__q { grid-column: 1; }
.bd__p { grid-column: 2; }

/* 패널을 접으면 폰이 화면을 다 쓴다(Figma 의 백슬래시 단축키와 같은 것). */
.bd__in.is-fold { grid-template-columns: 0 minmax(430px, 1fr); gap: 0; }
.bd__in.is-fold .bd__q { display: none; }
.bd__in > * { min-width: 0; }

/* ⚠ sticky 는 부모 상자 안에서만 움진다.
     .bd__in 이 align-items:start 이라 이 칸의 높이가 내용만큼(1100px)이어서
     움질 거리가 0px 이었다 — 그래서 주문을 굴려도 폰이 따라오지 않았다
     (실상: 폰칸 1100 - 덯어리 1100 = 0).
     stretch 로 줄을 채워 질문 칸 높이만큼 움질 수 있게 한다.
   ⚠ display 를 flex 로 두면 자식이 줄 높이만큼 늘어나 sticky 가 다시 멈춘다. block 이어야 한다. */
.bd__p { display: block; align-self: stretch; }

/* ---------- 캔버스 스테이지 ----------
   ⚠ 폰이 몸통 배경 위에 그냥 놓여 있었다. 한 단계 짙은 바닥 위에 올려야
     '떠 있는' 것으로 보인다. */
.bd-stage {
  position: sticky;
  border-radius: 20px;
  /* ⚠ 몸통과 **같은 색이면 스테이지로 안 보인다**(실측: 둘 다 rgb(247,247,250)).
     카드가 흰색이므로 스테이지는 한 단계 **짙어야** 폰이 떠 보인다. */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(108, 59, 143, .10), transparent 62%),
    #eceef4;
  box-shadow: inset 0 0 0 1px rgba(16, 16, 24, .07);
  padding: 22px 0 26px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  overflow: hidden;
}
/* ⚠ 배율은 **레이아웃 폭을 안 건드린다.** 폰 CSS 폭을 키우면 앱이 그 폭으로
   다시 레이아웃되어 줄바꿈이 실제 폰과 달라진다 — 미리보기로서 틀린 화면이 된다.
   transform 은 390px 레이아웃을 그대로 두고 **확대만** 한다. */
.bd-scale {
  transform: scale(var(--ph-scale, 1));
  transform-origin: top center;
  /* ⚠ transform 은 자리를 안 차지한다. 늘어난 만큼 아래를 밀어 줘야
     스테이지가 폰을 잘라 먹지 않는다(JS 가 --ph-lift 를 넣는다). */
  margin-bottom: var(--ph-lift, 0px);
}

/* 패널 접기 단추 */
.bd-fold {
  position: absolute; top: 10px; left: 10px; z-index: 5;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line); background: #fff;
  font: inherit; font-size: 13px; line-height: 1; color: var(--text-3);
  cursor: pointer;
}
.bd-fold:hover { border-color: var(--brand); color: var(--brand); }

/* 페이지 아래 여백은 질문 칸 안에 둔다(위 주석 참조) */
.bd__q { padding-bottom: 90px; }

/* ⚠ 단계 줄이 상단바 안으로 들어갔다. 더 이상 78px 을 더하지 않는다. */
.bd-sticky { position: sticky; top: calc(var(--nav-h) + 14px); }

/* ⚠ 옛 '낮은 화면이면 단계 줄의 붙임을 놓는다' 예외는 지웠다.
   단계 줄이 상단바 안으로 들어가 세로를 아예 안 먹는다. */

/* 두 칸이 성립하는 최소 폭 = 폰 410 + 질문 420 + 간격 52 + 좌우 패딩 64 = 946px.
   ⚠ 1100px 로 잡아 두면 노트북(1280·1024)에서 멀쩡한데도 한 칸으로 떨어진다. */
@media (max-width: 1190px) {
  /* 폰 430 + 패널 620(5단계 표 최소) + 간격 28 + 좌우 패딩 = 약 1,150px 이
     두 칸의 하한이다. 그 아래는 한 칸으로 떨어뜨린다. */
  .bd__in { grid-template-columns: 1fr; gap: 24px; }
  /* ⚠ 위에서 칸을 못 박아 뒀다(.bd__q=1 · .bd__p=2). 한 칸으로 떨어질 때
     그것을 **반드시 풀어야** 한다 — 안 풀면 폰이 없는 2번 칸으로 밀려
     격자가 통째로 무너진다(실측: 390px 에서 격자칸 0px · 가로 넘침 407/390). */
  .bd__q, .bd__p { grid-column: 1; }
  .bd-stage { border-radius: 16px; }
  /* 폰을 위로 — 아래로 내리면 무엇이 바뀌는지 안 보인다 */
  /* ⚠ justify-self:center 를 쓰지 말 것. 칸에 맞춰 늘어나는 대신
     **내용 크기**가 되어, 6단계의 긴 캡션이 칸(288px)보다 넓은 399px 을
     밀어내 문서가 가로로 넘쳤다(실측 320px 에서 360/320).
     칸은 늘리고, 폰은 스테이지 안에서 가운데로 둔다(.bd-stage 가 flex center). */
  .bd__p { order: -1; justify-self: stretch; }
  .bd-sticky { position: static; }
}

/* ==========================================================================
   질문 묶음
   ========================================================================== */
.bd-sec {
  padding: 34px 34px 30px;
  margin-bottom: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  /* 단계 줄에 가리지 않게 앵커 위치를 내린다 */
  scroll-margin-top: calc(var(--nav-h) + 86px);
}
.bd-sec__h { margin: 0 0 10px; }
.bd-sec__no { color: var(--brand); font-variant-numeric: tabular-nums; margin-right: 4px; }
.bd-sec__lead { margin: 0; color: var(--text-2); font-size: var(--fs-body); line-height: 1.7; }

/* 단계 이동 줄. **아래에 붙는다.**
   ⚠ 실측: 다섯 단계가 1,297~2,944px 이라 어느 것도 한 화면에 안 들어간다.
     맨 밑까지 굴려야 다음으로 갈 수 있었다.
   ⚠ .bd__p 가 display:block 이라 스크롤 주체는 **문서**다. 그래서 패널에
     overflow 를 주지 않고 sticky bottom 만으로 붙는다(패널에 스크롤을 주면
     오른쪽 폰의 sticky 가 같이 깨진다).
   ⚠ 배경을 반드시 채울 것 — 투명하면 밑에 깔린 컨트롤이 비쳐 글자가 겹쳐 보인다. */
.bd-sec__foot {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 30px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
/* ⚠ 마지막 줄이 띠 밑에 깔리지 않게 그만큼 비워 둔다. */
.bd__q { scroll-padding-bottom: 96px; }
/* ---------- 질문 한 덩어리 ---------- */
.bd-q {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.bd-q__h {
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}
.bd-q__d { margin: 0 0 16px; font-size: var(--fs-sm); line-height: 1.7; color: var(--label); }
.bd-q__d b { color: var(--text-2); font-weight: 700; }

/* 물음표. 설명은 여기 뒤로 숨는다.
   ⚠ 작게 두되 **누를 수 있어야 한다**(24x24). 12px 미만으로 내리지 말 것. */
.bd-why {
  flex: none; margin-left: 2px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit; font-size: 12px; font-weight: 800; line-height: 1;
  color: var(--text-3); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.bd-why:hover { border-color: var(--brand); color: var(--brand); }
.bd-why.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
.bd-why__sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* 펼친 설명. 제목 바로 아래에 얕은 상자로 둔다(본문처럼 보이면 다시 줄글이 된다). */
.bd-q__d--tip {
  margin: 2px 0 14px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--fs-xs);
  line-height: 1.65;
}

.bd-cnt {
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--brand-tint);
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 가드 문구 — 못 고르게 막는 대신 왜 안 되는지 알린다 */
/* 4단계 세 묶음 (가이드북 7·8·9장)
   ⚠ 열세 질문을 한 줄로 두면 5,570px 이다(화면 6.2개분, 실측).
   ⚠ 개수 배지를 반드시 함께 둔다. 접어 두고 개수를 안 보여주면 뒤에 더
     있다는 것을 모른 채 넘어간다. */
.bd-subtabs {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-2);
}
.bd-subtab {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -.02em;
  cursor: pointer;
}
.bd-subtab:hover { color: var(--text); }
.bd-subtab.is-on {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(16, 16, 24, .1);
}
.bd-subtab__n {
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--line);
  color: var(--text-2);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.bd-subtab.is-on .bd-subtab__n { background: var(--brand); color: #fff; }

/* 설명 문단이 너무 길면 눈이 줄을 놓친다.
   ⚠ 실측: 한 줄 668px / 14px 글꼴 = 약 48자. 읽기 좋은 값은 30~45자다.
     620px 로 묶으면 약 44자가 된다. 폼 칸은 줄이지 않는다(설명만 묶는다). */
.bd-q__d, .bd-sec__lead { max-width: 620px; }

.bd-hint {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: #fff8ec;
  border: 1px solid #f6dfb4;
  color: #8a5a06;
  font-size: var(--fs-sm);
  line-height: 1.6;
}
/* 확정 전 빈칸 안내. `.bd-hint` 안에 들어간다(같은 노랑 상자).
   ⚠ 단계 이름을 **누를 수 있게** 둔다. 무엇이 비었는지만 알려 주고 찾아가게
     하면 5단계 메뉴 열두 줄에서 그 줄을 사람이 눈으로 찾아야 한다. */
.bd-fixbad__h { display: block; font-weight: 800; margin-bottom: 8px; }
.bd-fixbad__g {
  display: block;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid #f0dcb8;
}
.bd-fixbad__g:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.bd-fixbad__s {
  display: inline-block;
  margin-bottom: 4px;
  padding: 5px 11px;
  border-radius: 99px;
  border: 1px solid #d9a94a;
  background: #fff;
  color: #8a5a06;
  font-size: var(--fs-xs);
  font-weight: 700;
  cursor: pointer;
}
.bd-fixbad__s:hover { background: #fdf1dc; }
.bd-fixbad__g em { display: block; font-style: normal; }

.bd-note--flat {
  margin-top: 14px;
  font-size: var(--fs-sm);
  color: var(--label);
  line-height: 1.65;
}

/* ==========================================================================
   입력 요소
   ========================================================================== */
/* ⚠ 글자 입력칸(.bd-input)은 **style.css** 에 있다. 여기로 되돌리지 말 것 —
   build.css 는 /builder 와 /v2 만 싣는데 /result 와 랜딩도 같은 클래스를 쓴다.
   그래서 화면정의서의 담당자·연락처 칸이 **브라우저 기본 모양**으로 나왔다
   (실측 2026-09-14: 420x54 여야 할 칸이 578x30, 패딩 0, 반경 0). */

/* ---------- 색 견본 ---------- */
.bd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bd-sw {
  width: 40px; height: 40px;
  border-radius: 11px;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(16, 16, 24, .12);
  transition: transform .16s var(--ease);
}
.bd-sw:hover { transform: translateY(-2px); }
.bd-sw.is-on::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 15px;
  border: 2px solid var(--text);
}

.bd-colorrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}
.bd-colorpick {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.bd-colorpick:hover { border-color: var(--brand); color: var(--brand); }
.bd-colorpick input {
  width: 26px; height: 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
.bd-colorpick input::-webkit-color-swatch-wrapper { padding: 0; }
.bd-colorpick input::-webkit-color-swatch { border: 1px solid rgba(16,16,24,.16); border-radius: 7px; }

/* 브랜드색 위 글자색을 무엇으로 썼는지 알려 준다 —
   노란 브랜드에 흰 글자를 올리면 안 읽히므로 자동으로 갈린다 */
.bd-onnote { font-size: var(--fs-xs); color: var(--label); }

/* ---------- 칩 (한 줄 택일) ---------- */
.bd-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.bd-chip {
  padding: 10px 17px;
  border: 1.5px solid var(--line);
  border-radius: 99px;
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.bd-chip:hover { border-color: var(--brand); color: var(--brand); }
.bd-chip.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }

/* ---------- 라디오 · 체크 줄 ---------- */
/* 보기 줄을 두 칸으로. 한 줄에 하나씩 쌓으면 스크롤이 길어진다.
   ⚠ 실측: 3단계 탭 후보 여덟 줄이 807px, 주문 유형 다섯 줄이 512px 였다.
     두 칸으로 묶으면 줄 수가 반이 된다.
   ⚠ `1fr` 은 `minmax(auto, 1fr)` 이라 줄어들지 않는 내용이 있으면 칸이
     화면 밖으로 밀린다. `min-width: 0` 을 반드시 함께 둔다(전에 카드 격자에서
     31장 중 15장이 잘린 적이 있다).
   ⚠ 좁은 화면에서는 한 칸으로 되돌린다. */
.bd-radios, .bd-checks {
  display: grid;
  /* ⚠ 창 폭 breakpoint 대신 **칸 폭 기준**으로 접는다. 이 칸은 폰을 뺀
     나머지라 창 폭과 따로 논다(1024px 창에서 424px 이다). */
  /* ⚠ minmax 의 최소값은 **칸이 그보다 좁아도 줄지 않는다.** 288px 칸에서
     290px 트랙이 칸을 밀어 문서가 넘쳤다(실측 320px 창에서 폼칸 311/288).
     min(290px, 100%) 이면 넓을 때 290px, 좁으면 칸에 맞춘다. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 10px;
}
.bd-radios > *, .bd-checks > * { min-width: 0; }
.bd-radio, .bd-check {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  /* ⚠ <button> 은 기본이 text-align:center 다. 안 적으면 설명 글이 가운데로 몰린다 */
  text-align: left;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color .18s ease, background-color .18s ease;
}
.bd-radio:hover, .bd-check:hover { border-color: var(--brand); }
/* ⚠ 고른 모양은 아래 " 고른 것 — 한 벌로" 블록이 정한다. 여기에 따로 쓰지 말 것 —
   두 곳이 되면 한쪽만 고쳐져 카드마다 다른 굵기가 된다. */

.bd-mark {
  width: 22px; height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--line);
  background: #fff;
  display: grid; place-items: center;
}
.bd-radio .bd-mark { border-radius: 50%; }
.bd-check .bd-mark { border-radius: 6px; }
.bd-mark::after { content: ""; opacity: 0; }
.bd-radio .bd-mark::after {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand);
}
.bd-check .bd-mark::after {
  width: 11px; height: 6px;
  border-left: 2.4px solid var(--brand);
  border-bottom: 2.4px solid var(--brand);
  transform: rotate(-45deg) translate(1px, -2px);
}
.is-on > .bd-mark { border-color: var(--brand); }
.is-on > .bd-mark::after { opacity: 1; }

.bd-opt__t {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -.02em;
}
.bd-opt__d {
  display: block;
  margin-top: 5px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--label);
}
.bd-opt__d b { color: var(--text-2); font-weight: 700; }

/* 못 고르는 칸 — 흐리게만 두지 않고 이유를 옆에 쓴다 */
.bd-check.is-blocked { background: var(--bg-2); }
.bd-check.is-blocked .bd-opt__t { color: var(--text-3); }

/* ==========================================================================
   홈 타입 카드 — 블록 순서를 작은 그림으로 보여준다
   ========================================================================== */
.bd-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.bd-cards > * { min-width: 0; }
@media (max-width: 620px) { .bd-cards { grid-template-columns: 1fr; } }

.bd-hcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ease);
}
.bd-hcard:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow); }

/* ==========================================================================
   고른 것 — 한 벌로 (사용자 지시 2026-09-17)
   ⚠ **`box-shadow: inset` 으로 테두리를 그리지 말 것.** inset 그림자는 내용
     **뒤에** 그려지는데 시안 사진이 카드 모서리까지 꽉 차 있어 사진에 덮인다 —
     남는 것은 사진 아래 설명 칸뿐이라 화면에서는 **왼쪽 세로줄 하나**로 보였다
     (실측 2026-09-17 · /v2 홈 위젯: 고른 카드 316x473 · 사진 314x145 가 위 · 좌 · 우를
      덮었고, 정작 `border` 는 고르든 말든 1px #e5e7eb 회색 그대로였다).
   ⚠ 바깥 그림자로 둘레를 그린다. **자리를 안 밀기 때문이다** — 테두리를
     1.5px 에서 2px 로 올리면 카드마다 0.5px 씩 밀려 격자가 흔들린다.
   ⚠ 색은 **그로스잇 보라(`--brand`)** 다. 고객사 색을 쓰면 초록 고객사에서
     초록 폰과 초록 테두리가 붙어 도구와 앱이 구분되지 않는다.
   ⚠ **사진이 있는 카드에만 ✓ 뱃지를 붙인다.** 글자 줄(`.bd-radio` · `.bd-check`)은
     이미 왼쪽에 채워진 마크가 있어 두 번 말하는 셈이 된다. 칩(`.bd-c`)과
     토글(`.bd-tg`)도 이미 통째로 채워져 분명하다.
   ========================================================================== */
.bd-hcard, .bd-ph { position: relative; }

.bd-hcard.is-on,
.bd-ph.is-on img,
.bd-radio.is-on,
.bd-check.is-on {
  border-color: var(--brand);
  background: var(--brand-tint);
  box-shadow: 0 0 0 2px var(--brand), 0 0 0 5px var(--brand-ring);
}

/* ✓ 뱃지. ⚠ 흰 테를 두른다 — 사진 위에 얹히므로 어떤 사진에서도 읽혀야 한다.
   ⚠ 자리는 **오른쪽 위**다(사용자 지시). 그래서 확대(⤢) 단추를 왼쪽 위로
     옮겼다 — 둘 다 오른쪽 위면 겹친다(v2.css 참조). */
.bd-hcard.is-on::after,
.bd-ph.is-on::after {
  content: '✓';
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 900; line-height: 1;
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(16, 16, 24, .22);
}

/* 홈 타입 카드에 들어가는 시안 화면.
   ⚠ 예전에는 색 막대로 블록 순서만 그렸는데 "예시 이미지가 안 나온다" 는 말을 들었다.
     옆 폰이 브랜드 색이 반영된 살아 있는 판을 보여주므로 카드에는 시안 그대로를 둔다. */
.bd-hcard__img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
}

.bd-hcard__t { font-size: var(--fs-body); font-weight: 800; letter-spacing: -.02em; }
.bd-hcard__d { font-size: var(--fs-sm); line-height: 1.6; color: var(--label); }
.bd-hcard__pick {
  margin-top: auto;
  font-size: var(--fs-xs);
  font-weight: 800;
  color: var(--brand);
}

/* ==========================================================================
   폰 옆 · 위젯 상자
   ========================================================================== */
.bd-wgbox {
  margin-top: 16px;
  max-width: 420px;
  padding: 16px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
}
.bd-wgbox__h {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.bd-wgbox__in { display: flex; justify-content: center; }
/* 앱 아이콘 상자는 제목 줄 없이 아이콘과 이름만 담는다 */
.bd-wgbox--icon { display: block; padding: 16px 18px; }

/* ==========================================================================
   저장 표시
   ========================================================================== */

@media (max-width: 768px) {
  .bd-sec { padding: 26px 20px 24px; }
  .bd-steps { padding-top: 10px; padding-bottom: 10px; }
  .bd-sticky { position: static; }
}

/* ---------- 저장 알림 (토스트) ----------
   ⚠ 헤더에 글자로 두었더니 [이용 안내] 와 [처음부터] 사이가 휑했다.
   ⚠ 오른쪽에 폰이 sticky 로 붙어 있어 **우측 하단에 두면 겹친다.**
     질문 칸 왼쪽 아래에 띄운다.
   ⚠ 뱃지(항상 떠 있는 상태 표시)로 두지 않았다. 방금 들어와 아무것도 안 한
     사람에게도 '저장됨' 이 보여 사실과 어긋난다. 바뀐 순간에만 뜬다. */
.bd-toast {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: 320px;
  padding: 10px 16px;
  border-radius: 99px;
  background: var(--text);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(16, 16, 24, .22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.bd-toast.is-show { opacity: 1; transform: translateY(0); }
.bd-toast.is-err { background: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .bd-toast { transition: opacity .01s; transform: none; }
  .bd-toast.is-show { transform: none; }
}

/* ---------- 하단 탭 순서 (3단계) ----------
   ⚠ 자리마다 드롭다운을 두지 않았다. 고른 자리의 주문 유형을 나중에 끄면
     그 칸을 어떻게 할지 규칙이 없어진다(비우면 이상하고 채우면 고른 게 사라진다).
     켠 것으로 자동으로 채우고 **순서만** 바꾼다. */
.bd-order { display: grid; gap: 8px; }

.bd-ord {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.bd-ord__n { font-weight: 700; }
/* 탭에 들어가는지 전체메뉴로 밀렸는지 알려 준다 */
.bd-ord__w {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
/* ⚠ 손으로 누르는 자리다. 30x30 은 폰에서 못 누른다(실측). */
.bd-ord__b {
  width: 34px;
  height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.bd-ord__b:disabled { opacity: .3; cursor: default; }
.bd-ord__b:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }

/* 전체메뉴로 밀린 줄 — 지우지 않고 흐리게 둔다(왜 안 보이는지 알아야 한다) */
.bd-ord.is-off { background: var(--bg-2); }
.bd-ord.is-off .bd-ord__n { color: var(--text-2); }

/* ---------- 탭 이름 입력칸 (패스 · 직접 입력) ----------
   ⚠ 가이드북 10장: 패스를 쓰는 세 곳이 모두 이름에 브랜드명을 붙였다
     (영패스 · 그린패스 · 에그패스). 고정 문구로 두면 그 관찰을 못 살린다. */
.bd-sub:empty { display: none; }
.bd-sub { display: grid; gap: 10px; margin-top: 12px; }

/* 홈 칸은 고를 수 없다 — 지우지 않고 회색으로 둔다(왜 고정인지 보여야 한다) */
.bd-ord.is-fixed { background: var(--bg-2); }
.bd-ord.is-fixed .bd-ord__n { color: var(--text-2); }

/* ---------- 3단계: 칸 이름 짓기 ----------
   ⚠ 이 줄 안에 <input> 이 있다. 값이 바뀔 때마다 부모를 다시 그리면
     노드가 새로 생겨 포커스가 빠지고 **한글 조합이 끊긴다**
     (실측: '메뉴 추천' 을 치면 '뉴메' 가 됐다). build.js 의 paintTabOrder 참조. */
.bd-ord--name .bd-ord__n { flex: none; width: 104px; }
.bd-ord__in {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 7px 10px;
  font-size: var(--fs-sm);
}
.bd-q__sub {
  margin: 26px 0 6px;
  font-size: var(--fs-body);
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- 폼 바닥 이동 버튼 ----------
   ⚠ '이용 안내로 돌아가기' 만 있었는데, 한창 고르는 중에 바깥으로 나가라는
     버튼이 바닥에 있으면 흐름이 끊긴다. 이전/다음이 제자리다. */
.bd-nav { display: flex; gap: 10px; align-items: center; }
.bd-nav .btn--primary { margin-left: auto; }

@media (max-width: 560px) {
  .bd-nav { flex-direction: column; align-items: stretch; }
  .bd-nav .btn--primary { margin-left: 0; }
}

/* ---------- 6단계 확정 줄 ----------
   ⚠ 1~5단계와 달리 주 단추를 **늘려서** 강조한다(사용자 지시 2026-09-13).
     다른 단계의 [다음] 은 내용 폭인데 여기만 넓어지는 것은 의도된 차이다 —
     마지막 걸음이고 되돌아갈 일이 거의 없다.
   ⚠ 힌트가 같은 flex 안에 있으므로 전폭(flex-basis 100%)으로 올려 두 단추
     위에 한 줄로 눕힌다. 안 그러면 단추 옆에 끼어 줄을 밀어낸다. */
.bd-nav--fix { flex-wrap: wrap; gap: 12px; }
.bd-nav--fix .bd-hint { flex: 1 1 100%; margin: 0; }
.bd-nav--fix [data-go] { flex: none; }
.bd-nav--fix .btn--primary { flex: 1 1 auto; margin-left: 0; }
/* ⚠ 두 단추의 높이를 **못 박는다.** min-height 만으로는 안 맞았다(실측 56 / 54).
     .btn--ghost 에는 1.5px 테두리가 있고 .btn--primary 에는 없어서, 같은 패딩인데
     테두리 두께만큼 어긋난다. 높이를 고정하고 세로 패딩을 0 으로 둔다
     (.btn 이 inline-flex + align-items:center 라 글자는 그대로 가운데 선다). */
.bd-nav--fix .btn { height: 56px; padding-block: 0; }

/* ⚠ 좁은 화면에서 `.bd-nav` 가 **세로 플렉스**가 된다. 거기에 `flex: 1 1 100%` 를
     주면 100% 가 **높이 기준**이 되어 단추가 눌린다(실측 390px: 확정 단추가
     316×25px 로 찌부러졌다. [← 이전]은 56px 인데 주 행동이 절반도 안 됐다).
   ⚠ 세로로 설 때는 주 행동이 **위**다. 다섯 단계를 거쳐 온 사람에게 마지막
     화면의 첫 단추는 '되돌아가기' 가 아니다. order 로 올린다. */
@media (max-width: 560px) {
  .bd-nav--fix .btn { flex: none; width: 100%; height: 56px; }
  .bd-nav--fix .btn--primary { order: -1; }
  .bd-nav--fix .bd-hint { order: -2; }
}

/* 확정 설명. 회색 카드를 푼 자리에 본문 문단으로 남는다. */
.bd-fix__d {
  margin: 30px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--text-2);
}

/* 한 줄에 놓는 라디오 (판 개수 · 유효기간처럼 짧은 것) */
.bd-radios--row { display: flex; flex-wrap: wrap; gap: 10px; }
.bd-radios--row > * { flex: 1 1 200px; }

/* 등급 조건 칸의 단위 */
.bd-ord__u { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2); }

/* ---------- 빌더 상단바 ----------
   ⚠ .nav__menu 는 가이드북과 공용이다. 그쪽은 링크 네 개 + 버튼이라 gap 28px 이
     맞고, 여기서 공용 값을 줄이면 가이드북 상단 메뉴가 뭉개진다.
     빌더는 [이용 안내][처음부터] 둘뿐이라 이 클래스로만 좁힌다. */
.nav__menu--tight { gap: 8px; margin-left: auto; }
.nav__menu--tight a { padding: 0 6px; }

/* ---------- 등급 조건 행 ----------
   ⚠ 세 칸을 **격자로** 잡는다. 전에는 flex 라 1등급 행만 글자가 오른쪽 끝으로
     밀려(left 547) 아래 행들의 단위(left 559)와 어긋났다. 실측으로 잡은 자리다.
   ⚠ 인풋이 420px 이었다. 여섯 자리 숫자에 420px 은 과해서 빈 상자 세 개가
     이어져 지저분했다. 180px 로 줄이고 단위를 숫자 바로 옆에 붙인다. */
.bd-ord--cond {
  display: grid;
  /* ⚠ 180px 을 못 박아 두어 390px 에서 5px 넘쳤다(기존 결함).
      로 두면 넓을 때는 180px 그대로고 좁을 때만 줄어든다. */
  grid-template-columns: 104px minmax(0, 180px) auto;
  align-items: center;
  gap: 10px;
}
.bd-ord--cond .bd-ord__in { width: 100%; }
.bd-ord--cond .bd-ord__u { justify-self: start; }

/* 1등급은 값을 받지 않는다. 인풋 자리에 이유를 넣어 줄을 맞춘다. */
.bd-ord__fix {
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px dashed var(--line);
  font-size: var(--fs-sm);
  color: var(--text-2);
  text-align: center;
}

/* ==========================================================================
   5단계 상품 (가이드북 11장)
   ⚠ 줄 안에 <input> 이 있다. 값이 바뀔 때마다 부모를 다시 그리면 노드가 새로
     생겨 한글 조합이 끊긴다. build.js 의 paintItems(force) 참조.
   ========================================================================== */
.bd-add {
  margin-top: 10px;
  padding: 10px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.bd-add:hover { border-color: var(--brand); color: var(--brand); }

.bd-items { display: grid; gap: 12px; }

.bd-sel {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  font: inherit;
  font-size: var(--fs-sm);
}

/* 접힌 사진 프리셋 버튼.
   ⚠ 고른 사진을 버튼 안에 그대로 보여준다. 감추기만 하면 무엇을 골랐는지
     모른 채 넘어간다(개수 배지를 함께 둔 것과 같은 이유다). */
.bd-phbtn {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.bd-phbtn:hover { border-color: var(--text-3); color: var(--text); }
.bd-phbtn.is-on { border-color: var(--brand); color: var(--brand); }
.bd-phbtn img {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 사진 프리셋 — 실제 사진은 4주차 수급자료다 */
.bd-item__ph { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-ph { position: relative; cursor: pointer; }
.bd-ph input { position: absolute; opacity: 0; pointer-events: none; }
.bd-ph img {
  width: 52px; height: 52px;
  border-radius: 9px;
  object-fit: cover;
  border: 2px solid transparent;
  display: block;
}
.bd-ph.is-on img { border-color: var(--brand); }

.bd-picks { display: flex; gap: 8px; flex-wrap: wrap; }
.bd-pick {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.bd-pick.is-on { background: var(--brand-08, #f2efff); border-color: var(--brand); color: var(--brand); }
.bd-pick.is-blocked { opacity: .45; }

.bd-opts { display: grid; gap: 6px; }
.bd-optrow {
  display: flex; gap: 10px; align-items: baseline;
  padding: 9px 12px;
  border-radius: 9px;
  background: var(--bg-2);
  font-size: var(--fs-xs);
}
.bd-optrow b { flex: none; min-width: 120px; font-weight: 700; }
.bd-optrow span { color: var(--text-2); }
.bd-optrow i { font-style: normal; margin-left: 3px; font-size: 12px; color: var(--text-3); }
.bd-optrow--none { color: var(--text-3); }

@media (max-width: 560px) {
}

/* ---------- 옵션 편집기 (5단계) ----------
   ⚠ 프리셋 금액이 코드에 박혀 있어 고객사가 못 고치던 자리다.
   ⚠ 한 메뉴만 펼친다. 전부 펼치면 입력칸이 100개 가까이 되어 느려지고
     다시 그릴 때 한글 입력이 깨질 위험이 커진다. */
.bd-og {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.bd-og.is-open { border-color: var(--brand); }

.bd-oh {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 13px;
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.bd-oh b { flex: none; min-width: 116px; font-size: var(--fs-sm); font-weight: 700; }
.bd-oh span { flex: 1 1 auto; font-size: var(--fs-xs); color: var(--text-2); }
.bd-oh i { font-style: normal; margin-left: 3px; font-size: 12px; color: var(--text-3); }
.bd-oh em {
  flex: none; font-style: normal;
  font-size: var(--fs-xs); font-weight: 700; color: var(--brand);
}

.bd-ob { padding: 4px 13px 13px; border-top: 1px solid var(--line); }
.bd-ov { padding: 11px 0; }
.bd-ov + .bd-ov { border-top: 1px dashed var(--line); }
.bd-ov__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.bd-ov__h b { font-size: var(--fs-sm); font-weight: 700; }
.bd-ov__h span { font-size: var(--fs-xs); color: var(--text-3); }
.bd-ov__t {
  margin-left: auto;
  flex: none;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
}
.bd-ov__t.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.bd-ovr { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.bd-ovr > .bd-input:first-child { flex: 1 1 auto; min-width: 0; }
.bd-ovr__p { flex: none; width: 84px; text-align: right; }
.bd-ovr__u { flex: none; font-size: var(--fs-xs); font-weight: 700; color: var(--text-2); }
.bd-ov--add .bd-sel { width: 100%; margin-bottom: 6px; }

.bd-add--sm { margin-top: 4px; padding: 7px 12px; font-size: var(--fs-xs); }

/* ==========================================================================
   6단계 확인 (가이드북 12장)
   ⚠ 요약과 중요도는 summary.js 한 곳에서 만든다. /result 가 같은 것을 읽는다.
   ========================================================================== */
.bd-sim { margin: 0; padding-left: 22px; display: grid; gap: 7px; }
.bd-sim li { font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2); }
.bd-sim li b { color: var(--text); }

/* 선택 내역 */
/* 선택 내역은 **읽기만 하는 표**다. 두 칸으로 묶어 세로를 줄인다.
   ⚠ 실측: 다섯 묶음 1,609px (04 혜택 하나가 571px). 한 칸씩 쌓으면
     6단계가 3,953px 로 가장 긴 단계가 된다.
   ⚠ `masonry` 는 아직 못 쓴다. 묶음 높이가 제각각이라 `align-content: start`
     로 위쪽에 붙이고 각 칸이 제 높이만큼만 차지하게 둔다.
   ⚠ `1fr` 은 `minmax(auto, 1fr)` 이다. `min-width: 0` 을 반드시 함께 둔다. */
/* ⚠ 격자였다. 2026-09-13 에 **2단 흐름**으로 바꿨다.
     격자는 같은 줄의 키를 큰 쪽에 맞춘다. 03 주문(228px)과 04 혜택(657px)이
     한 줄에 서면서 **429px 이 통째로 비었다**(그 줄 높이의 65%). 1024px 에서도
     385px(65%)로 같았다. 05 상품이 그 구멍 아래에서 시작하니 혼자 떨어져
     보였는데, 원인은 05 가 아니라 위였다.
   ⚠ `columns` 는 줄에 묶이지 않아 짧은 단에 이어 붙는다. 다만 `grid-column` 이
     안 먹으므로 메뉴 목록이 붙는 05 는 **단 바깥**에 둔다(build.js 가 가른다).
   ⚠ `break-inside: avoid` 가 없으면 카드가 단 경계에서 두 동강 난다. */
.bd-sum { display: block; }
/* ⚠ `.bd-sum__c`(2단 흐름)는 2026-09-28 에 걷었다. 6단계 선택 내역을 격자에서
   2단으로 바꿨다가 다시 되돌린 자리이고, 그 뒤로 **코드에서 이 이름을 붙이는
   곳이 한 곳도 없었다.** 되살릴 일이 생기면 그때 다시 적는다 — 쓰지 않는 규칙을
   남겨 두면 다음 사람이 " 여기가 2단이구나" 로 읽고 엉뚱한 자리를 뒤진다. */
.bd-sum > * { min-width: 0; }
/* 05 는 단 바깥이라 자연히 전폭이다. 단 묶음과 간격만 맞춘다. */
.bd-sumg--wide { margin-top: 0; }
/* ⚠ 누르면 폰이 그 자리를 짚는다(2026-09-17). 누를 수 있다는 것이
   보여야 누른다 — 손 모양과 옅은 테두리로만 알린다. 이 화면의 주 행동은
   확정이지 둘러보기가 아니라서 세게 꾸미지 않는다. */
.bd-sumg[data-spot] { cursor: pointer; }
.bd-sumg[data-spot]:hover { border-color: var(--brand-soft); }
.bd-sumg {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
}
.bd-sumg__h {
  display: block;
  padding: 10px 13px;
  background: var(--bg-2);
  font-size: var(--fs-sm);
  font-weight: 800;
}
.bd-sumr {
  display: flex;
  gap: 12px;
  padding: 9px 13px;
  font-size: var(--fs-xs);
  border-top: 1px solid var(--line);
}
.bd-sumr__k { flex: none; width: 148px; color: var(--text-2); }
.bd-sumr__v { flex: 1 1 auto; min-width: 0; font-weight: 700; }

/* 등록 메뉴 목록.
   ⚠ 세로로 쌓으면 카드가 길어지기만 하고 옆이 빈다. 전폭이 된 김에 가로로 편다.
   ⚠ auto-fill 이다. auto-fit 이면 메뉴가 한두 개일 때 그 칸이 줄 전체로
     늘어나 '메뉴 하나가 화면을 가로지르는' 모양이 된다. */
.bd-sumi {
  padding: 8px 13px 12px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 2px 14px;
}
.bd-sumi > * { min-width: 0; }
.bd-sumi__r {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 0; font-size: var(--fs-xs);
}
.bd-sumi__r b {
  flex: 1 1 auto; min-width: 0; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-sumi__r span { flex: none; color: var(--text-2); }

/* 카테고리·등록 메뉴 줄도 전폭 카드에서는 나란히 둔다(세로 길이를 줄인다) */
@media (min-width: 861px) {
  .bd-sumg--wide .bd-sumr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 12px; }
}

/* 기능별 중요도 */
.bd-prio { display: grid; gap: 6px; }
.bd-prio__g {
  margin: 12px 0 2px;
  font-size: var(--fs-sm);
  font-weight: 800;
}
.bd-prio__g:first-child { margin-top: 0; }
.bd-prior {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.bd-prior__t { flex: 1 1 auto; min-width: 0; }
.bd-prior__t b { display: block; font-size: var(--fs-sm); font-weight: 700; }
.bd-prior__t em {
  display: block;
  font-style: normal;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-3);
}
/* ⚠ 세 단추가 각각 테두리를 두른 낱개였다. 고르지 않은 둘은 흰 바탕에 회색
     테두리로 **서로 똑같이** 보였고, 고른 것이 '보통' 이나 '낮음' 이면
     `--bg-2` 채움이라 안 고른 것과 구분이 거의 안 됐다(사용자 지적 2026-09-13).
     셋을 **한 세그먼트 상자**로 묶고, 고른 것만 색으로 채워 세운다.
   ⚠ 세 단계가 **같은 무게면 안 된다.** 높음은 브랜드색, 보통은 먹색,
     낮음은 흐린 회색. 색의 세기가 곧 중요도의 세기로 읽혀야 한다. */
.bd-prior__b {
  flex: none;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-2);
}
.bd-pb {
  min-width: 52px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--label);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.bd-pb:hover { background: rgba(255, 255, 255, .75); color: var(--text); }
.bd-pb.is-high,
.bd-pb.is-mid,
.bd-pb.is-low { color: #fff; font-weight: 700; box-shadow: 0 1px 2px rgba(16, 16, 24, .14); }
.bd-pb.is-high { background: var(--brand); }
.bd-pb.is-mid { background: var(--text); }
.bd-pb.is-low { background: var(--text-3); }
/* 고른 것 위에서는 hover 로 바탕이 날아가면 안 된다 */
.bd-pb.is-high:hover { background: var(--brand-hover); color: #fff; }
.bd-pb.is-mid:hover { background: var(--black); color: #fff; }
.bd-pb.is-low:hover { background: var(--label); color: #fff; }
.bd-pb:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.btn--lg { padding: 14px 24px; font-size: var(--fs-body); }

/* ---------- 확정 블록 ----------
   ⚠ 위의 묶음들과 같은 모양(윗줄 하나)이라 **읽는 것과 누르는 것의 경계**가
     없었다. 여기는 되돌리기 어려운 걸음이라 눈에 띄게 갈라 놓는다.
   ⚠ 색만 바꾸지 않고 여백도 벌린다 — 바로 위 묶음과 붙어 있으면
     '중요도의 일부' 로 읽힌다. */
.bd-q--fix {
  margin-top: 38px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-2);
}
.bd-q--fix .bd-q__h { margin-bottom: 8px; }
.bd-q--fix .bd-q__d { margin-bottom: 18px; }
@media (max-width: 640px) { .bd-q--fix { padding: 20px 16px; } }

@media (max-width: 640px) {
  .bd-prior { flex-wrap: wrap; }
  .bd-prior__b { width: 100%; }
  .bd-pb { flex: 1 1 0; }
  .bd-sumr { flex-direction: column; gap: 3px; }
  .bd-sumr__k { width: auto; }
}

/* ==========================================================================
   5단계 — 태그 칩 · 한 줄 표 행
   ⚠ 실측(2026-09-12): 메뉴 여섯 개가 1,440px = 메뉴당 240px(세 줄)이었다.
     한 줄로 눕혀 한 화면에 들어오게 한다.
   ========================================================================== */

/* ---------- 카테고리 태그 칩 ---------- */
.bd-tagrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* ⚠ **.bd-order 에 걸지 말 것.** 그 클래스는 탭 순서 · 등급 이름 · 등급 조건도
   쓴다 — 여기 맞추려고 display:contents 를 걸었더니 그 셋의 gap:8px 격자가
   통째로 날아갔다(실측 2026-09-13). 카테고리 전용 클래스를 따로 쓴다.
   ⚠ contents 인 이유: #fCats 자신은 상자를 만들지 않아야 칩과 [+ 추가] 가
   같은 줄에서 함께 줄바꿈된다. */
.bd-tags { display: contents; }
.bd-tag {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 5px 4px 5px 11px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
}
.bd-tag:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
/* ⚠ 칩 안의 입력칸이다. 테두리를 지우고 size 로 글자 수에 맞춘다 —
   고정폭이면 '커피' 와 '디저트' 칩이 같은 크기라 태그로 안 보인다. */
.bd-tag__in {
  min-width: 2ch; padding: 0; border: 0; background: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text);
}
.bd-tag__in:focus { outline: none; }
.bd-tag__x {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 0; background: none;
  font: inherit; font-size: 13px; line-height: 1; color: var(--text-3);
  cursor: pointer;
}
.bd-tag__x:hover { background: var(--bg-2); color: #c0392b; }
/* '+ 추가' 는 칩과 같은 줄 끝에 칩 모양으로 */
.bd-add--chip {
  width: auto; margin: 0;
  padding: 6px 13px; border-radius: 999px;
  border: 1px dashed var(--line);
  font-size: var(--fs-sm);
}

/* ---------- 메뉴 한 줄 표 ---------- */
/* [썸네일 40] [메뉴명 1fr] [대표가 92] [카테고리 104] [옵션세트 116] [지우기 28] */
.bd-items { display: flex; flex-direction: column; gap: 4px; }
.bd-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 92px 104px 116px 28px;
  align-items: center; gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent; border-radius: 10px;
}
.bd-row:hover { border-color: var(--line); background: var(--bg); }
.bd-row:focus-within { border-color: var(--brand); background: #fff; }
/* 머리줄. 어느 칸이 무엇인지 한 번만 적는다. */
.bd-row--head {
  padding-bottom: 2px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
}
.bd-row--head:hover { border-color: transparent; background: none; }

/* 썸네일이 곧 사진 고르는 단추 */
.bd-row .bd-phbtn {
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); overflow: hidden; cursor: pointer;
  display: block;
}
.bd-row .bd-phbtn img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ⚠ '사진' 글자는 한 줄 표에서는 자리가 없다. 화면 낭독기에만 남긴다. */
.bd-row .bd-phbtn > span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.bd-row .bd-phbtn.is-on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }

/* 이름 + 한줄설명. ⚠ 한줄설명을 빼지 않았다 — 폰 화면이 그 값을 쓴다. */
.bd-row__t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.bd-row__n, .bd-row__d {
  width: 100%; min-width: 0; padding: 2px 4px;
  border: 1px solid transparent; border-radius: 6px; background: none;
  font: inherit;
}
.bd-row__n { font-size: var(--fs-sm); font-weight: 700; }
.bd-row__d { font-size: var(--fs-xs); color: var(--text-2); }
.bd-row__n:hover, .bd-row__d:hover { border-color: var(--line); }
.bd-row__n:focus, .bd-row__d:focus { border-color: var(--brand); background: #fff; outline: none; }
.bd-row__d::placeholder { color: var(--text-3); }

.bd-row__p { display: flex; align-items: center; gap: 3px; min-width: 0; }
.bd-row__pi {
  width: 100%; min-width: 0; padding: 5px 7px; text-align: right;
  border: 1px solid var(--line); border-radius: 7px;
  /* ⚠ 자릿수가 달라도 소수점이 안 어긋나게 */
  font: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.bd-row__pi:focus { border-color: var(--brand); outline: none; }
.bd-row__p em { flex: none; font-style: normal; font-size: var(--fs-xs); color: var(--text-3); }

.bd-row__s {
  width: 100%; min-width: 0; padding: 5px 6px;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; font: inherit; font-size: var(--fs-xs);
}
.bd-row__s:focus { border-color: var(--brand); outline: none; }

.bd-row__x {
  width: 28px; height: 28px; border-radius: 7px;
  border: 0; background: none;
  font: inherit; font-size: 15px; line-height: 1; color: var(--text-3);
  cursor: pointer;
}
.bd-row__x:hover { background: #fdecea; color: #c0392b; }

/* 사진 고르는 줄은 그 행 아래에 통째로 깔린다 */
.bd-row .bd-item__ph { grid-column: 1 / -1; margin-top: 6px; }
.bd-row.is-phopen { border-color: var(--line); background: var(--bg); }

/* ⚠ 좁아지면 여섯 칸이 안 들어간다. 두 단으로 접는다.
     [사진] [메뉴명 · 한줄설명            ] [×]
     [대표가      ] [카테고리] [옵션 세트    ]

   ⚠ **고정 칸을 늘어놓지 말 것.** 예전에는 `40px minmax(0,1fr) 92px 28px`
     이었는데, 쓸 수 있는 폭이 그 합보다 좁으면 `1fr` 이 **0 으로 풀린다.**
     실측 2026-09-17 · `/v2` 390px(카드 안이라 324px 뿐): 열이
     `38 0 80 88 98 24` 가 되어 **대표가 칸이 0px**(금액이 통째로 안 보인다),
     이름 칸은 86px 이라 한줄설명이 83px 넘쳐 잘렸다(사용자 지적:
     " 메뉴 소개가 짤리고 금액도 짤려서 안 보여").
   ⚠ 그리고 둘째 줄의 **옵션 세트가 지우기 칸(28px)에 들어가** 있었다
     (실측 `/builder` 390px: 세트 select 폭 28px — 글자가 한 자도 안 보인다).
     지우기는 첫 줄 오른쪽 끝인데 둘째 줄의 넷째 칸도 같은 자리다.
   ⚠ 그래서 가운데 셋을 `minmax(0, 1fr)` 로 **나눠 준다.** 어떤 폭에서도
     고르게 갈리고, 0 으로 풀리는 칸이 없다.
   ⚠ 둘째 줄은 **사진 칸까지 써서 왼쪽 끝부터** 시작한다. 사진은 첫 줄에만
     두면 되고, 그만큼 대표가 칸이 넓어진다(78 → 124px).
   ⚠ 셋을 **똑같이 나누지 않는다.** 대표가는 일곱 자리(9,999,999)면 충분한데
     카테고리 이름은 열 자까지 받는다 — 똑같이 주면 카테고리만 잘린다
     (실측 2026-09-17 · 390px: " 스페셜베이커리" 79px 이 43px 칸에서 36px 잘렸다).
     첫 칸을 조금 덜어 가운데에 얹는다(.85 / 1.15 / 1).
   ⚠ 이름 칸은 셋을 통째로 걸치므로 이 비율에 상관없이 같은 폭이다. */
@media (max-width: 760px) {
  .bd-row--head { display: none; }
  .bd-row {
    grid-template-columns:
      40px minmax(0, .85fr) minmax(0, 1.15fr) minmax(0, 1fr) 24px;
    gap: 6px; padding: 8px;
    border-color: var(--line);
  }
  .bd-row .bd-phbtn { grid-column: 1; grid-row: 1; align-self: start; }
  .bd-row__t { grid-column: 2 / 5; grid-row: 1; }
  .bd-row__x { grid-column: 5; grid-row: 1; align-self: start; }
  .bd-row__p { grid-column: 1 / 3; grid-row: 2; }
  .bd-row__s:nth-of-type(1) { grid-column: 3; grid-row: 2; }
  .bd-row__s:nth-of-type(2) { grid-column: 4 / 6; grid-row: 2; }
  /* ⚠ 좌우 여백을 2px 씩 조인다. 여기서는 글자 한 자가 아쉽다 —
     `select` 는 넘치면 말없이 잘라 무슨 값인지 알 수 없게 된다. */
  .bd-row__s { padding-left: 4px; padding-right: 4px; }
}

/* ⚠ 빌더 폰의 높이는 **build.js fitPhone 이 정한다**(화면에 맞춘 값, 최대 844).
   여기에 고정값을 되돌리지 말 것 — 844 로 못 박았더니 낮은 화면에서 배율이
   0.85 로 깎여 폰이 410 -> 349px 로 **작아졌다**(실측 1440x950).
   ⚠ 캡션이 세로를 82px 먹고 있었다. 두 줄로 묶어 그만큼 폰에 넘긴다. */
.bd .ph-cap {
  /* ⚠ 고정 420px 은 좁은 칸을 밀어낸다. 칸보다 커지지 않게 묶는다. */
  /* ⚠ 420px 으로 좁혔더니 한 줄이던 안내가 **두 줄**이 되어 오히려 세로를 더
     먹었다(실측 caps). 스테이지 폭을 다 쓰게 열어 둔다 — 한 줄로 끝나면
     아래 두 줄 묶음(line-clamp)은 애초에 걸리지 않는다. */
  max-width: min(560px, 100%);
  font-size: var(--fs-xs);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ⚠ 위 `-webkit-box` 가 phone.css 의 `display: flex` 를 **덮는다.** 넓은 화면에서는
     두 줄로 묶여 괜찮지만, 좁은 화면에서는 알약 둘과 안내 글이 같은 줄에 겹쳐
     글자가 알약 위로 올라탔다(실측 390px: 알약 16~262 · 안내 16~358, y 차이 6px).
   ⚠ 좁을 때는 묶지 않는다. 알약 한 줄 · 안내 한 줄로 세운다.
     `-webkit-line-clamp` 를 끄려면 display 를 되돌려야 한다 — clamp 만 풀면
     여전히 -webkit-box 라 flex 가 안 산다. */
@media (max-width: 560px) {
  .bd .ph-cap {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
    -webkit-line-clamp: none;
    overflow: visible;
  }
}

/* ⚠ 빌더 상단바를 낮춘다. 단계 칩이 그 안에 들어갔지만 칩 높이가 32px 이라
   58px 이면 충분하다. 여기서 줄인 10px 이 그대로 폰 높이가 된다. */
.bd-body { --nav-h: 58px; }

/* ==========================================================================
   1단계 — 인스펙터 행 (라벨 : 컨트롤)
   ⚠ 설문지처럼 보이던 원인은 폭이 아니라 [제목]→[설명]→[컨트롤]이 세로로
     쌓이는 것이었다. 라벨을 왼쪽에 붙여 한 줄로 맞문다.
   ⚠ **1단계에만** 건다. 3·4·5 단계는 다중 선택과 표라서 1:1 이 성립하지 않는다.
   ========================================================================== */
.bd-q--row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: start;
  gap: 10px 18px;
  margin-top: 16px;
  padding-top: 16px;
}
.bd-q--row > * { grid-column: 2; }
.bd-q--row .bd-q__h {
  grid-column: 1; grid-row: 1;
  margin: 6px 0 0;
  font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
  letter-spacing: 0;
}
/* 물음표는 라벨 칸 안에서 오른쪽에 붙는다 */
.bd-q--row .bd-q__h .bd-why { margin-left: auto; }
.bd-q--row .bd-input { width: 100%; }

/* 색: 견본 + 픽커 + 헥스를 한 줄로 */
.bd-q--row .bd-swatches { margin: 0; }
.bd-q--row .bd-colorrow { margin-top: 8px; }

/* 업종: 2열 격자 카드 */
.bd-q--row #fIndustry {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.bd-chip--card {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* 앱명: 가로 세그먼트 */
#fAppName {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
#fAppName .bd-radio {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 6px;
  border: 0; background: #fff;
  font: inherit; cursor: pointer;
  min-width: 0;
}
#fAppName .bd-radio + .bd-radio { border-left: 1px solid var(--line); }
#fAppName .bd-radio b {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* 예시 이름. ⚠ 무엇이 되는지 안 보이면 고를 수 없다. */
#fAppName .bd-radio em {
  font-style: normal; font-size: 11px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
#fAppName .bd-radio:hover { background: var(--bg-2); }
/* ⚠ 앱명은 **카드가 아니라 세그먼트**다. 네 칸이 한 상자 안에 붙어 있고
   상자가 모서리를 자르므로(`overflow: hidden`) 둘레가 그려질 자리가 없다 —
   실측 2026-09-17: 카드 왼쪽 212 · 상자 왼쪽 211 이라 5px 둘레가 잘렸다.
   여기서는 **칸을 통째로 채우는 것**이 고른 표시다. 위 " 한 벌" 을 끈다. */
#fAppName .bd-radio.is-on {
  background: var(--brand);
  border-color: transparent;
  box-shadow: none;
}
#fAppName .bd-radio.is-on b, #fAppName .bd-radio.is-on em { color: #fff; }

/* ⚠ 패널이 좁아지면 라벨을 위로 올린다. 118px 을 떼면 컨트롤이 못 들어간다. */
@media (max-width: 1190px) {
  .bd-q--row { grid-template-columns: 1fr; gap: 6px; }
  .bd-q--row > *, .bd-q--row .bd-q__h { grid-column: 1; }
  #fAppName { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fAppName .bd-radio:nth-child(3) { border-left: 0; }
  #fAppName .bd-radio:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ==========================================================================
   3단계 — 칩 · 한 줄 토글 · 슬롯 프리뷰
   ⚠ 실측(2026-09-13): 3단계 2,510px 중 #fTabs 567 · #fOrderTypes 450 ·
     #fMid 245 · #fCoupon 129 였다. 카드마다 설명 줄이 깔려 있던 것이 원인이다.
   ⚠ 클래스(bd-check·bd-radio)와 data-v 는 그대로다. 여기서 바꾸는 것은 모양뿐 —
     배선과 setOn 이 그 이름으로 찾는다.
   ========================================================================== */

/* ---------- 칩 ---------- */
.bd-checks--tight, #fTabs, #fMid, #fCoupon {
  display: flex; flex-wrap: wrap; gap: 7px;
}
.bd-c {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff;
  font: inherit; font-size: var(--fs-sm); font-weight: 700; color: var(--text-2);
  white-space: nowrap; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
/* 켜짐 표시. ⚠ 색만으로 가르지 않는다 — 체크 자국을 함께 둔다. */
.bd-c__m {
  flex: none; width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  position: relative;
}
.bd-c:hover { border-color: var(--text-3); color: var(--text); }
.bd-c.is-on { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.bd-c.is-on .bd-c__m { border-color: var(--brand); background: var(--brand); }
.bd-c.is-on .bd-c__m::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 3px; height: 7px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
/* 세 칸을 다 골랐을 때. ⚠ 막지 않는다 — 눌리게 두고 왜 안 되는지 알린다. */
.bd-c.is-blocked { opacity: .45; }

/* ---------- 한 줄 토글 (주문 유형) ---------- */
#fOrderTypes { display: flex; flex-direction: column; gap: 0; }
.bd-tg {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 11px 4px;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: none; font: inherit; text-align: left; cursor: pointer;
}
.bd-tg:last-child { border-bottom: 0; }
.bd-tg__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bd-tg__t b { font-size: var(--fs-sm); font-weight: 700; color: var(--text); }
/* ⚠ 설명을 지우지 않았다. 픽업과 예약의 차이를 모르면 고를 수 없다. */
.bd-tg__t em {
  font-style: normal; font-size: var(--fs-xs); font-weight: 400; color: var(--text-3);
  line-height: 1.5;
}
/* ⚠ 토글 줄은 `.bd-check` 도 함께 달고 있어서 `.bd-check.is-on` 의
     **보라 채움 + 테두리**를 물려받고 있었다. 줄 목록 한가운데에 보라 상자가
     스티커처럼 얹혀, 켠 것이 '선택된 카드' 로 읽혔다(사용자 지적 2026-09-13).
     줄 목록은 줄로 읽혀야 한다. 채움을 걷고 **아주 옅은 바탕 + 왼쪽 결**로
     바꾼다. 무엇이 켜졌는지는 스위치가 말한다. */
/* ⚠ 토글 줄은 **카드가 아니라 목록 줄**이다. 사진이 없어 왼쪽 세로 막대가
   가려지지 않고, 오른쪽 스위치가 이미 채워져 있어 고른 것이 분명하다 —
   여기에는 둘레도 ✓ 뱃지도 두지 않는다.
   ⚠ 바탕색이 **옛 보라(#6a50f0)** 로 남아 있었다. 2026-09-15 에 브랜드를
     #4338ca 로 낮췄는데 이 한 줄이 따라오지 않아, 같은 화면에 보라가 둘이었다. */
.bd-tg.is-on {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(67, 56, 202, .07), rgba(67, 56, 202, 0) 38%);
  box-shadow: inset 2px 0 0 var(--brand);
  border-radius: 0;
}
.bd-tg.is-on .bd-tg__t b { color: var(--brand); }

/* 스위치.
   ⚠ 23px 짜리 작은 알약이었다. 줄 높이가 60px 인데 스위치만 작아 장난감처럼
     보였다. 26px 로 키우고 층을 넣는다.
   ⚠ 끈 상태에 안쪽 그림자를 준다. 평평한 회색은 '꺼짐' 이 아니라 '비활성' 으로
     읽힌다. 파인 자리에 손잡이가 놓여 있어야 누를 것으로 보인다. */
.bd-tg__s {
  flex: none; position: relative;
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--line);
  box-shadow: inset 0 1px 2px rgba(16, 16, 24, .16);
  transition: background-color .22s ease, box-shadow .22s ease;
}
.bd-tg__s::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 1px rgba(16, 16, 24, .10), 0 2px 6px rgba(16, 16, 24, .22);
  /* ⚠ left 가 아니라 transform 으로 옮긴다. left 를 애니메이션하면 레이아웃이
     매 프레임 다시 계산된다. width 도 함께 움직여야 하므로 둘 다 적는다. */
  transition: transform .26s var(--ease), width .18s var(--ease);
}
.bd-tg.is-on .bd-tg__s {
  background: var(--brand);
  box-shadow: inset 0 1px 2px rgba(16, 16, 24, .18), 0 0 0 1px rgba(67, 56, 202, .25);
}
.bd-tg.is-on .bd-tg__s::after { transform: translateX(20px); }
/* 누르는 동안 손잡이가 늘어난다. 물리적인 반응이 있어야 눌린 것을 안다. */
.bd-tg:active .bd-tg__s::after { width: 25px; }
.bd-tg.is-on:active .bd-tg__s::after { width: 25px; transform: translateX(15px); }
.bd-tg:hover .bd-tg__s { background: var(--text-3); }
.bd-tg.is-on:hover .bd-tg__s { background: var(--brand-hover); }
/* ⚠ 손가락에는 hover 가 없다. 키보드로 오는 사람에게는 테두리가 유일한 표시다. */
.bd-tg:focus-visible { outline: none; }
.bd-tg:focus-visible .bd-tg__s { box-shadow: 0 0 0 3px rgba(67, 56, 202, .35); }

/* ---------- 다섯 칸 슬롯 프리뷰 ----------
   ⚠ 이름 줄만 있으면 **폰 하단이 어떻게 되는지** 머리로 조립해야 한다. */
.bd-slots {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin: 12px 0 14px;
  padding: 9px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-2);
}
.bd-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; padding: 8px 4px;
  border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.bd-slot b {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-slot em { font-style: normal; font-size: 11px; color: var(--text-3); }
.bd-slot.is-fixed { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.bd-slot.is-fixed b { color: var(--text-2); }
.bd-slot.is-mid { background: var(--brand); box-shadow: none; }
.bd-slot.is-mid b, .bd-slot.is-mid em { color: #fff; }
/* ⚠ 빈 칸을 감추지 않는다. 몇 칸이 남았는지 보여야 고를 수 있다. */
.bd-slot.is-empty { background: transparent; box-shadow: inset 0 0 0 1px dashed var(--line); border: 1px dashed var(--line); }
.bd-slot.is-empty b { color: var(--text-3); font-weight: 400; }

@media (max-width: 560px) {
  .bd-slots { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding: 7px; }
  .bd-slot { padding: 6px 2px; }
  .bd-slot em { display: none; }
}

/* ==========================================================================
   4단계 — 칩 + 고른 것의 설명 · 사진 접기
   ⚠ 실측(2026-09-13): 4단계 2,035px 중 #fStampMode 670(사진 3장) ·
     #fStampGift 200 · #fStampBasis 129 · #fStampSize 106 · #fStampLife 106.
   ⚠ 서브 탭(스탬프·등급·쿠폰)은 이미 분기한다. 여기서 손대지 않는다.
   ========================================================================== */

/* ---------- 칩 줄 + 고른 것의 설명 ---------- */
#fStampSize, #fStampBasis, #fStampGift, #fStampLife,
#fTierBasis, #fTierGift, #fCouponCh, #fCouponLife, #fCouponPos, #fCoupon {
  display: flex; flex-wrap: wrap; gap: 7px;
}
/* ⚠ 설명은 **지금 고른 것 하나만** 적는다. 카드마다 깔면 두 개짜리 질문도
   129px 이 된다. 지우지는 않는다 — 결제금 기준과 상품 기준의 차이를
   모르면 고를 수 없다. */
.bd-cs__d {
  flex-basis: 100%;
  margin: 2px 0 0;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-3);
}
.bd-cs__d:empty { display: none; }
.bd-cs__d b { color: var(--text-2); font-weight: 700; }

/* ---------- 시행 기준 카드 (사진 없이) ---------- */
.bd-hcard--flat { display: flex; flex-direction: column; gap: 3px; }
.bd-hcard--flat .bd-hcard__img { display: none; }

/* ---------- 화면 예시 접기 ---------- */
.bd-shots {
  margin-top: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
}
.bd-shots__h {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; cursor: pointer; list-style: none; border-radius: 12px;
  font-size: var(--fs-sm); font-weight: 800;
}
.bd-shots__h::-webkit-details-marker { display: none; }
.bd-shots__h:hover { background: var(--bg-2); }
.bd-shots[open] .bd-shots__h { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.bd-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;
}
/* 무엇이 들어 있는지 적는다. 모르면 펼칠지 말지를 정할 수 없다. */
.bd-shots__d {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-xs); font-weight: 400; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bd-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;
}
.bd-shots[open] .bd-shots__cv {
  transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--brand);
}
.bd-shots__b {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; padding: 12px 14px 14px;
}
.bd-shot { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bd-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2);
}
.bd-shot figcaption { font-size: var(--fs-xs); font-weight: 700; text-align: center; color: var(--text-2); }
@media (max-width: 560px) {
  .bd-shots__b { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* ⚠ 좁으면 부제를 뺀다. 말줄임으로 남겨 두면 "A안 · 전사 · B안 ..." 이
     한 글자도 안 읽히는 채로 자리만 먹는다. */
  .bd-shots__d { display: none; }
}

/* ⚠ 인쇄는 없다(빌더는 인쇄 대상이 아니다). 접은 채로 둔다. */

/* ==========================================================================
   폰 -> 패널 점프
   ⚠ 폰을 그냥 누르면 점프하게 만들지 않았다. 폰 안의 거의 모든 것에
     data-act(미리보기 조작)가 붙어 있어 무엇을 눌렀는지 갈리지 않는다.
     손을 올렸을 때만 나오는 배지를 눌러 옮긴다.
   ========================================================================== */
.bd-jump {
  position: absolute; z-index: 30;
  transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px;
  border: 0; background: var(--text); color: #fff;
  font: inherit; font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap; cursor: pointer;
  box-shadow: 0 4px 14px rgba(16, 16, 24, .28);
}
.bd-jump:hover { background: var(--brand); }
/* ⚠ 손가락으로는 hover 가 없다. 좁은 화면에서는 아예 안 띄운다 —
   있지도 않은 것을 찾게 만들면 안 된다. */
@media (hover: none), (max-width: 1190px) { .bd-jump { display: none !important; } }

/* 옮겨 온 자리를 잠깐 깜빡인다. ⚠ 안 깜빡이면 어디로 왔는지 모른다. */
.bd-q.is-flash {
  animation: bdflash 1.4s var(--ease);
  border-radius: 12px;
}
@keyframes bdflash {
  0%, 100% { background: transparent; box-shadow: none; }
  15%, 55% { background: var(--brand-tint); box-shadow: 0 0 0 10px var(--brand-tint); }
}
@media (prefers-reduced-motion: reduce) { .bd-q.is-flash { animation: none; } }

/* ==========================================================================
   6단계 정돈 (2026-09-14)
   ⚠ 실측: 6단계 5,244px 중 중요도 1,896 + 선택 내역 1,081 = 2,977px(57%).
     사진은 한 장도 없었다. 줄일 곳은 이 둘이었다.
   ========================================================================== */

/* 선택 내역을 다섯 칸 격자로. ⚠ `auto-fit` 은 하나 남은 칸을 줄 전체로 늘린다. */
.bd-sum {
  display: grid;
  /* ⚠ 좁은 묶음이 **넷**이라 3열이 되면 한 칸이 빈다(실측 2026-09-14:
     창 900px 에서 격자칸 766px · 3열 · 남은 자리 519px). 최소 폭 250px 이면
     실제로 쓰이는 폭(246~766px)에서 **1열 아니면 2열**만 나와 구멍이 안 생긴다.
     넷은 2열·4열에 딱 나뉜다.
     ⚠ `grid-column: auto / -1` 로 마지막 묶음을 늘리는 방법은 쓰지 말 것 —
       2열에서 그 묶음이 **새 줄로 밀려** 구멍이 오히려 커졌다(실측: 340px).
     ⚠ 창 폭이 아니라 **이 칸의 폭**으로 갈린다. 옆에 폰이 있어 창 폭과 따로 논다. */
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 12px;
  /* ⚠ `start` 로 두면 짧은 묶음 아래가 허옇게 뜬다. 늘려서 카드로 보이게 한다. */
  align-items: stretch;
}
.bd-sum > * { min-width: 0; }
/* 메뉴 목록이 붙는 묶음(05)은 전폭이라야 가로로 편다. */
.bd-sumg--wide { grid-column: 1 / -1; margin-top: 0; }

/* 묶음 머리에 [수정] 을 붙인다. ⚠ 여기서 바로 고치지 않는다 — 그 단계로 데려간다. */
.bd-sumg__hd {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.bd-sumg__hd .bd-sumg__h {
  flex: 1 1 auto; min-width: 0;
  background: none; border-bottom: 0;
}
.bd-sumg__go {
  flex: none; margin-right: 9px;
  padding: 4px 9px; border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-3);
}
.bd-sumg__go:hover { border-color: var(--brand); color: var(--brand); }

/* 중요도를 한 줄로. ⚠ 이름과 단추 사이를 점선으로 이어 어느 줄인지 놓치지 않게. */
.bd-prior--slim { padding: 7px 12px; gap: 10px; }
.bd-prior--slim .bd-prior__t {
  display: flex; align-items: center; gap: 8px;
  overflow: hidden; white-space: nowrap;
}
.bd-prior--slim .bd-prior__t b {
  display: inline; flex: none;
  overflow: hidden; text-overflow: ellipsis;
}
.bd-prior--slim .bd-prior__t::after {
  content: ''; flex: 1 1 auto;
  height: 0; border-bottom: 1px dotted var(--line);
}
/* ⚠ 한 줄 행에서는 단추도 함께 얇아져야 한 줄이 된다. 실측: 그대로 두니 57px. */
.bd-prior--slim .bd-pb { padding: 5px 10px; font-size: var(--fs-xs); }

/* ==========================================================================
   로고 (미리보기용 · 2026-09-15 사용자 지시)
   ⚠ 두 자리다 — 상단바 워드마크 · 하단 탭 가운데 심볼. 심볼은 **선택**이다.
     워드마크는 가로로 길어서 원형 버튼에 넣으면 실처럼 보인다.
   ⚠ 미리보기 칸에 **체크무늬**를 깐다. 투명 배경인지 아닌지가 그것으로
     드러난다 — JPG 를 올리면 흰 네모가 그대로 보인다.
   ========================================================================== */
.bd-q__opt {
  margin-left: 6px; padding: 1px 7px; border-radius: 6px;
  background: var(--bg-2); color: var(--text-3);
  font-style: normal; font-size: 11px; font-weight: 700; vertical-align: middle;
}
.bd-logos { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.bd-logo { flex: 1 1 200px; min-width: 0; }
.bd-logo__cap {
  display: block; margin-bottom: 7px;
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
}
.bd-logo__cap em {
  margin-left: 4px; font-style: normal; font-weight: 600; color: var(--text-3);
}
.bd-logo__drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; height: 96px; padding: 10px;
  border: 1.5px dashed var(--line); border-radius: 12px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.bd-logo__drop:hover { border-color: var(--brand); background: var(--brand-tint); }
.bd-logo.has .bd-logo__drop {
  border-style: solid; border-color: var(--line);
  /* ⚠ 체크무늬 — 투명 배경인지 눈으로 보인다. */
  background:
    linear-gradient(45deg, #eceef2 25%, transparent 25%, transparent 75%, #eceef2 75%),
    linear-gradient(45deg, #eceef2 25%, transparent 25%, transparent 75%, #eceef2 75%), #fff;
  background-size: 12px 12px;
  background-position: 0 0, 6px 6px;
}
.bd-logo__view { display: none; }
.bd-logo.has .bd-logo__view { display: block; max-width: 100%; }
.bd-logo__view img { max-width: 100%; max-height: 56px; width: auto; display: block; }
.bd-logo__pick {
  font-size: var(--fs-xs); font-weight: 700; color: var(--text-2);
}
.bd-logo.has .bd-logo__pick { font-size: 11px; color: var(--text-3); }
.bd-logo__x {
  margin-top: 7px; padding: 4px 9px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
  font: inherit; font-size: 11px; font-weight: 700; color: var(--text-3);
  cursor: pointer;
}
.bd-logo__x:hover { border-color: #f3c4bd; color: #c0392b; }
/* ⚠ 경고는 **빨강이 아니라 주황**이다. 못 쓰는 파일(빨강)과 "이렇게 하면
   더 낫다"(주황)를 가른다. */
.bd-hint.is-bad { color: #c0392b; }

/* ==========================================================================
   기능마다 부족한 점을 적는다 (2026-09-28 · 사용자 지시)
   6단계 기능별 중요도 줄 안이다. **여기가 적는 자리**이고 화면정의서는
   읽기만 한다 — 문서를 만들어 놓고 코멘트를 다는 것은 순서가 거꾸로다.
   ⚠ 비어 있으면 아무것도 안 보인다. 여는 단추 하나만 조용히 둔다.
   ========================================================================== */

/* ⚠ 줄이 **접힐 수 있어야** 코멘트 칸이 아래로 내려간다. 넓은 화면에서는
   접힐 일이 없으니 지금 모양은 그대로다(입력칸만 width:100% 로 떨어진다). */
.bd-prior { flex-wrap: wrap; }

/* 여는 단추. ⚠ 중요도 단추(.bd-pb)보다 **작고 연하다.** 같은 무게로 두면
   열여섯 줄에서 단추가 먼저 읽혀 중요도를 매기는 화면이 아니게 된다. */
.bd-cmtb {
  flex: none; padding: 4px 9px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--text-3, #8a8a8f);
  font: inherit; font-size: var(--fs-xs); font-weight: 600;
  white-space: nowrap; cursor: pointer;
}
.bd-cmtb:hover {
  border-color: var(--line); color: var(--text); background: rgba(255, 255, 255, .75);
}
.bd-cmtb:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
/* 적힌 말이 있으면 짙어진다. 이것이 " 알림" 이다. */
.bd-cmtb.has-note {
  border-color: var(--brand); color: var(--brand);
  background: var(--brand-tint, #f5f0ff);
}
.bd-cmtb.is-on { border-color: var(--line); color: var(--text); }
/* 느낌표. ⚠ 동그라미에 담는다. ! 만 두면 문장 부호로 읽힌다. */
.bd-cmtb__x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; margin-right: 4px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-style: normal; font-size: 10px; font-weight: 700; line-height: 1;
}

/* 펼친 칸. ⚠ `width: 100%` 로 **줄 전체**를 쓴다. 중요도 단추 옆에 끼우면
   좁은 화면에서 이름과 단추가 함께 눌린다. */
/* ⚠ `width: 100%` 만으로는 모자란다. 이 줄은 flex 라 다른 조각과 한 줄을
   나눠 쓰다 420px 로 눌렸다(줄 668px · 실측 2026-09-28). `flex: 0 0 100%` 로
   **제 줄을 차지하게** 못 박는다. */
.bd-cmt { flex: 0 0 100%; width: 100%; margin-top: 2px; }
/* ⚠ `.bd-input` 은 `max-width: 420px` 다(style.css · 모든 화면이 함께 쓴다).
   그것 때문에 줄이 668px 여도 칸이 420px 에서 멈췄다. **공용 규칙은 건드리지
   않고** 이 칸만 푼다 — 저기를 고치면 빌더의 모든 입력칸이 늘어난다. */
.bd-cmt__t {
  display: block; width: 100%; max-width: none;
  min-height: 56px; resize: vertical;
  font-size: var(--fs-sm); line-height: 1.6;
}
.bd-cmt__n {
  display: block; margin-top: 4px;
  font-size: var(--fs-xs); color: var(--text-3, #8a8a8f);
}