/* v4 #build — "카톡 하듯 말하면, 옆 화면이 바로 바뀝니다."
   3판의 핀 스크럽·눈금 HUD·"배포됨" 도장은 09-10 사장 반려로 전부 없앴다.
   여기에는 ScrollTrigger 핀이 하나도 없다. 스크롤은 끝까지 그냥 흐른다.

   상태 규칙(제일 중요):
     · 기본값(= JS 가 아예 안 돌 때)은 **다 만들어진 마지막 모습**이다.
     · JS 가 켜졌을 때만(html.js) 첫 단계로 되돌리고, is-s1…is-s5 를 겹쳐 붙이며 되살린다.
     · 그래서 글이 사라질 수가 없다. 초안 화면 안 글자는 전부 SVG <text> 라
       폭에 따라 한쪽(큰 화면/작은 화면)이 숨어도 "사라진 글"로 세지 않는다.
   색·글꼴·간격은 tokens.css 변수만 쓴다. 새 hex 색 없음. */

.bd-build {
  position: relative;
  padding: var(--gap-32) 0 var(--gap-24);
}

.bd-head .sec-title { max-width: 16ch; }
.bd-head { margin-bottom: var(--gap-16); }

/* ============================================================
   판짜기 — 왼쪽 채팅 / 오른쪽 초안 화면(sticky, 핀 아님)
   ============================================================ */
.bd-layout { display: block; }

.bd-cap {
  margin-top: var(--gap-12);
  color: var(--faint);
  font-size: var(--t-small);
}

/* ── 채팅 ─────────────────────────────────────────────── */
.bd-turn { max-width: 30rem; }
.bd-turn + .bd-turn { margin-top: var(--gap-16); }

.bd-msg {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: var(--t-lead);
  line-height: 1.6;
  /* 5판 유리 질감: 반투명 바탕 + 뒤 흐리기, 윗변 1px 밝은 선, 아래 옅은 그림자 */
  border: 1px solid var(--glass-line);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-blur)) saturate(170%);
  box-shadow: inset 0 1px 0 var(--glass-top), 0 8px 20px var(--glass-shadow);
}
.bd-msg--you {
  margin-left: auto;
  border-bottom-right-radius: 5px;
  background: color-mix(in srgb, var(--accent-soft) 74%, transparent);
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
}
/* 뒤 흐리기를 못 하는 브라우저 / 폰: 흐리기 없이 반투명 유리로만 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .bd-msg { background: color-mix(in srgb, var(--surface) 92%, transparent); }
  .bd-msg--you { background: color-mix(in srgb, var(--accent-soft) 94%, transparent); }
}
@media (max-width: 720px) {
  /* 폰에서는 머리 메뉴만 뒤를 흐린다. 말풍선은 흐리기 없는 반투명 유리. */
  .bd-msg {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
  }
  .bd-msg--you { background: color-mix(in srgb, var(--accent-soft) 92%, transparent); }
}
.bd-msg--us {
  margin-top: var(--gap-3);
  border-bottom-left-radius: 5px;
}
.bd-who {
  display: block;
  font-size: var(--t-tiny);
  letter-spacing: .04em;
  color: var(--faint);
  margin-bottom: 2px;
}
.bd-msg--you .bd-who { text-align: right; }
.bd-when {
  display: block;
  margin-top: 5px;
  font-size: var(--t-tiny);
  color: var(--faint);
}

/* 지금 화면에 반영된 쌍만 살짝 도드라진다(숨기지 않는다 — 밝기만 달라진다) */
.bd-turn .bd-msg { transition: border-color .3s var(--ease), background-color .3s var(--ease); }
html.js .bd-turn.is-now .bd-msg--us { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }

/* ── 초안 화면 ────────────────────────────────────────── */
.bd-screen { width: 100%; }
.bd-svg { width: 100%; height: auto; overflow: visible; }

.bd-mini {
  margin-top: var(--gap-6);
  max-width: 26rem;
}
.bd-screen--main { display: none; }

/* 큰 화면: 두 칸. 오른쪽 초안 화면만 sticky 로 붙는다(핀 아님 — 페이지는 계속 흐른다). */
@media (min-width: 960px) {
  .bd-layout {
    display: grid;
    grid-template-columns: minmax(0, 27rem) minmax(0, 1fr);
    gap: var(--gap-16);
    align-items: start;
  }
  .bd-chat { padding-bottom: 6vh; }
  .bd-turn + .bd-turn { margin-top: 17vh; }
  .bd-mini { display: none; }
  .bd-screen--main { display: block; }
  .bd-side {
    position: sticky;
    top: 88px;               /* 머리 높이(≈62px) + 24px */
  }
}

/* ============================================================
   그리는 색 — 두 벌: 처음(수수한 회색) / 산뜻하게 바꾼 뒤
   ============================================================ */
.bd-win-body { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.bd-win-bar  { fill: var(--surface-2); }
.bd-win-dot  { fill: var(--faint); opacity: .55; }
.bd-win-url  { fill: var(--bg); }
.bd-t-url {
  font-family: var(--font-mono); font-size: 11px; fill: var(--faint);
}
.bd-t-logo  { font-family: var(--font-sans); font-size: 13px; font-weight: 700; fill: var(--text); }
.bd-t-hero  { font-family: var(--font-sans); font-size: 21px; font-weight: 700; fill: var(--text); }
.bd-t-herosub { font-family: var(--font-sans); font-size: 12px; fill: var(--muted); }
.bd-t-card  { font-family: var(--font-sans); font-size: 14px; font-weight: 700; fill: var(--text); }
.bd-t-phone { font-family: var(--font-sans); font-size: 12px; fill: var(--muted); text-anchor: middle; }

.bd-nav       { fill: var(--accent-soft); }
.bd-navpill   { fill: var(--accent); opacity: .7; }
.bd-hero      { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.5; }
.bd-herobar   { fill: var(--accent); }
.bd-intro     { fill: var(--surface-2); }
.bd-introline { fill: var(--faint); opacity: .55; }
.bd-introline-1 { fill: var(--accent); opacity: .6; }
.bd-card-box  { fill: var(--surface-2); stroke: color-mix(in srgb, var(--accent) 35%, transparent); stroke-width: 1.5; }
.bd-cardline  { fill: var(--faint); opacity: .5; }
.bd-mappin    { fill: var(--accent); }

.bd-phone-body  { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.bd-phone-notch { fill: var(--faint); opacity: .5; }
.bd-phone-nav   { fill: var(--accent-soft); }
.bd-phone-hero  { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1.2; }
.bd-phone-row   { fill: var(--surface-2); }

/* 마지막 모습(기본값): 사진 칸 크고, 색 산뜻하고, 칸 두 개 들어와 있고, 폰 화면도 옆에 있다 */
.bd-doc   { transform: translateX(0); }
.bd-page  { opacity: 1; }
.bd-hero  { transform: scaleY(1.6667); }
.bd-below { transform: translateY(60px); }
.bd-card  { opacity: 1; transform: translateX(0); }
.bd-phone { opacity: 1; transform: translateX(0); }

/* SVG 요소는 transform-box 를 잡아 줘야 자기 상자 기준으로 움직인다 */
.bd-doc, .bd-page, .bd-hero, .bd-below, .bd-card, .bd-phone {
  transform-box: fill-box;
}
.bd-hero { transform-origin: 50% 0; }
.bd-doc, .bd-page, .bd-below, .bd-card, .bd-phone { transform-origin: 50% 50%; }

/* ============================================================
   JS 가 켜졌을 때만 첫 단계로 되돌린다 (CONTRACT §5)
   ============================================================ */
html.js .bd-screen .bd-doc   { transform: translateX(70px); }
html.js .bd-screen .bd-page  { opacity: 0; }
html.js .bd-screen .bd-hero  { transform: scaleY(1); }
html.js .bd-screen .bd-below { transform: translateY(0); }
html.js .bd-screen .bd-card  { opacity: 0; transform: translateX(26px); }
html.js .bd-screen .bd-phone { opacity: 0; transform: translateX(26px); }

/* 처음 색(수수한 회색) */
html.js .bd-screen .bd-nav       { fill: var(--surface-2); }
html.js .bd-screen .bd-navpill   { fill: var(--faint); opacity: .45; }
html.js .bd-screen .bd-hero      { fill: var(--surface-2); stroke: var(--border); }
html.js .bd-screen .bd-herobar   { fill: var(--faint); opacity: .5; }
html.js .bd-screen .bd-t-logo    { fill: var(--muted); }
html.js .bd-screen .bd-introline-1 { fill: var(--faint); opacity: .55; }
html.js .bd-screen .bd-card-box  { stroke: var(--border); }
html.js .bd-screen .bd-mappin    { fill: var(--faint); opacity: .6; }
html.js .bd-screen .bd-phone-nav  { fill: var(--surface-2); }
html.js .bd-screen .bd-phone-hero { fill: var(--surface-2); stroke: var(--border); }

/* ── 단계별로 되살린다. 클래스는 겹쳐 붙는다(is-s1 … is-s5) ── */
/* ① 초안 화면이 생긴다 */
html.js .bd-screen.is-s1 .bd-page { opacity: 1; }
/* ② 사진 칸이 커진다 */
html.js .bd-screen.is-s2 .bd-hero  { transform: scaleY(1.6667); }
html.js .bd-screen.is-s2 .bd-below { transform: translateY(60px); }
/* ③ 색이 번진다 */
html.js .bd-screen.is-s3 .bd-nav       { fill: var(--accent-soft); }
html.js .bd-screen.is-s3 .bd-navpill   { fill: var(--accent); opacity: .7; }
html.js .bd-screen.is-s3 .bd-hero      { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
html.js .bd-screen.is-s3 .bd-herobar   { fill: var(--accent); opacity: 1; }
html.js .bd-screen.is-s3 .bd-t-logo    { fill: var(--text); }
html.js .bd-screen.is-s3 .bd-introline-1 { fill: var(--accent); opacity: .6; }
html.js .bd-screen.is-s3 .bd-card-box  { stroke: color-mix(in srgb, var(--accent) 35%, transparent); }
html.js .bd-screen.is-s3 .bd-mappin    { fill: var(--accent); opacity: 1; }
html.js .bd-screen.is-s3 .bd-phone-nav  { fill: var(--accent-soft); }
html.js .bd-screen.is-s3 .bd-phone-hero { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 45%, transparent); }
/* ④ 칸 두 개가 밀려 들어온다 */
html.js .bd-screen.is-s4 .bd-card { opacity: 1; transform: translateX(0); }
/* ⑤ 폰 화면이 옆에 하나 더 생기고, 창은 자리를 내주며 왼쪽으로 붙는다 */
html.js .bd-screen.is-s5 .bd-doc   { transform: translateX(0); }
html.js .bd-screen.is-s5 .bd-phone { opacity: 1; transform: translateX(0); }

/* ── 바뀌는 데 걸리는 시간: 전부 0.4초 안 ── */
html.js .bd-doc, html.js .bd-page, html.js .bd-hero, html.js .bd-below,
html.js .bd-card, html.js .bd-phone {
  transition: transform .34s var(--ease-out), opacity .28s var(--ease);
}
html.js .bd-nav, html.js .bd-navpill, html.js .bd-hero, html.js .bd-herobar,
html.js .bd-t-logo, html.js .bd-introline-1, html.js .bd-card-box, html.js .bd-mappin,
html.js .bd-phone-nav, html.js .bd-phone-hero {
  transition: fill .34s var(--ease), stroke .34s var(--ease),
              opacity .28s var(--ease), transform .34s var(--ease-out);
}

/* 움직임 줄이기: base.css 가 이미 모든 transition 을 0 으로 만든다.
   build.js 는 이때 단계를 전부 켜서(마지막 모습) 그대로 세워 둔다. */