/* ★★ **줄 간격은 다섯 층뿐입니다** (저쪽 지시 2026-09-11 — 「크기마다 하나」).
 *   1(로고) · 1.2(큰 제목) · 1.4(중간 제목) · 1.5 · 1.7(본문).
 *   그전에는 열두 가지가 섞여 화면에서 **줄 간격이 스물일곱 가지**로 나왔습니다. */
/* ★★ **자간 규칙** (저쪽 지시 2026-09-11 · 시안 C)
 *   본문 자간은 **0(normal)**. 마이너스로 좁히는 것은 **40px 이상 큰 제목에만**.
 *   한글은 받침이 있어서 좁히면 글자가 붙어 보입니다.
 *   ★ 그전에는 본문에 -0.26px · 0.28px · -0.19px · -0.32px 가 섞여 있었습니다. */
/* 새 입구와 진행 화면. (F 문서)
 *
 * 손님 대부분이 휴대폰으로 옵니다. 폰 기준으로 짓고 넓어질 때만 늘립니다.
 * 결과물 밑판과 같은 이름표를 씁니다 — 나중에 색을 바꿀 때 한 자리만 고치게.
 */
/* ── Makebee (2026-09-09, 사이트 화면 교체) ──────────────
 *
 * ★ 값은 시안 C 그대로입니다 —
 *   `docs/본보기/Makebee시안/3-시안C/시안C.html` 의 `:root`.
 *
 * ★★ **이름은 옛 이름을 그대로 씁니다** (`--fg`·`--muted`·`--accent` …).
 *   아래 규칙 수백 줄이 그 이름을 쓰고 있어서, 이름을 바꾸면 그 전부를
 *   손대야 합니다. **값만 갈아 끼웁니다.**
 *   시안 C 이름(`--ink`·`--honey` …)도 같이 둡니다 — 새로 쓴 규칙이 씁니다.
 *
 * ★★★ **강조색은 이제 파랑 한 톤 `#4A62C8` 입니다** (사장님 결정, 2026-09-12).
 *   주황(`#D9603A`) → 꿀색 → 카카오 노랑 → **파랑** 순으로 왔습니다.
 *   사장님이 시안 D 히어로를 보시고 **번짐을 「가」(옅은 파랑)로, 로고에서도
 *   노랑을 빼기로** 하셨습니다. 그래서 사이트 전체가 **흰 바탕 · 회색 ·
 *   짙은 검정 단추 · 파랑 한 톤** 한 결이 됩니다.
 *   ★ `#4A62C8` 은 번짐 「가」의 끝 색 `#86A0EE` 와 **같은 색상각(226도)**을
 *     눌러 흰 바탕에서 읽히게 한 값입니다. 흰 바탕에서 대비 6 이 넘어
 *     **채움으로도 글자로도** 씁니다 — 노랑처럼 「글자용을 따로」 둘 필요가 없습니다.
 *   ★★ **노랑은 카카오 단추에만** 남습니다 (`--kakao`). 앞서 정한
 *     「노랑 넷 자리(로고 · 만들기 시작 · 카카오 · 요금 추천 알약)」는 폐기됐습니다.
 *   ★ 이름(`--honey`·`--honey-ink`)은 **그대로 둡니다** — 수십 자리가 이 이름을
 *     쓰고 있어 바꾸면 그 전부를 손대야 합니다. **값만 갈아 끼웁니다.**
 *     (이 저장소가 `--fg`·`--accent` 를 그렇게 해 온 그대로입니다.)
 */
:root {
  /* 시안 C 이름 */
  --ink:        oklch(22% 0.01 90);
  --ink-soft:   oklch(48% 0.012 90);
  --ink-faint:  oklch(65% 0.01 90);
  --border:     oklch(89% 0.006 80);
  --white:      oklch(100% 0 0);
  --honey:      #4A62C8;              /* ★ 강조 — **파랑 한 톤**. 채우는 자리 */
  --honey-ink:  #3A4FA8;              /* ★ 같은 파랑의 **글자용**(조금 더 짙게) */
  --bg-soft:    oklch(96% 0.004 80);
  --bg-soft2:   oklch(93% 0.005 80);

  /* 옛 이름 — 같은 값을 가리킵니다 */
  /* ★★ 바탕은 **순백 #FFFFFF** 입니다 (저쪽 지시 ④, 2026-09-12).
     `oklch(99% 0.002 90)` 는 살짝 따뜻한 크림빛이라 사장님 화면에서 `#FCFCFA` 로 찍혔고,
     Attio(#FFFFFF)·기준문서(흰 바탕)와 어긋났습니다. 번짐 덮개도 이 값을 씁니다. */
  --bg:         #ffffff;               /* 화면 바탕 */
  --card:       var(--white);          /* 카드 */
  --surface:    var(--bg-soft);        /* 칩 · 자판 */
  --bubble:     var(--bg-soft);        /* 답 말풍선 */
  --fg:         var(--ink);            /* 본문 */
  --menu:       var(--ink-soft);       /* 메뉴 · 진행 줄 */
  --soft:       var(--ink-soft);       /* 보조 */
  --muted:      var(--ink-faint);      /* 라벨 · 흐린 글자 */
  --line:       var(--border);         /* 입력창 테두리 */
  --line-soft:  var(--border);         /* 구분선 */
  --line-faint: oklch(93% 0.004 80);   /* 카드 안 옅은 선 */
  --accent:     var(--honey);          /* 강조 — 파랑 한 톤 */
  --accent-fg:  #ffffff;               /* ★ 파랑 위 글자는 **흰색**입니다 (노랑 때는 검정이었습니다) */
  --btn:        var(--ink);
  --warn:       oklch(50% 0.14 45);    /* 주의 — 빨강을 쓰지 않습니다 */
  --ok:         oklch(55% 0.15 145);

  /* 카카오는 **우리 토큰 밖**입니다. 남의 서비스 색이고 심사가 요구합니다. */
  --kakao:      #FEE500;
  /* ★ 주요 단추(무료로 시작하기 · 요금 · 보관함 · 작업창)의 짙은 검정.
     저쪽 지시 2026-09-11 — 노랑은 넷 자리에만. */
  --단추검정:   #202124;
  --kakao-ink:  #191919;
  /* ★ 로고 벌의 줄무늬 — 몸통이 검정이라 **바탕색으로 뚫습니다** */
  /* ══ 로고 전용 색 — **사이트 색 규칙 밖**입니다 (사장님 결정, 2026-09-12) ══
   *
   * 사장님 — 「**로고는 원래 것 그대로, 노랑 그대로.** 「노랑 뺀 짙은 검정 ·
   *   검은 바탕에선 흰 벌」은 **취소.** 로고는 **상표**라서 사이트 색 규칙에서 뺍니다.
   *   사이트에 노랑을 안 쓴다는 것은 **단추 · 알약 · 강조 같은 옷의 색**을 두고 한 말입니다.」
   *
   * ★★★ 그래서 `--honey`(지금 파랑 #4A62C8)를 **안 씁니다.** 그것은 옷 색이고,
   *   로고는 상표라 따로 둡니다. 옷 색을 또 바꿔도 로고는 안 흔들립니다.
   * ★★ 값은 **옛 쪽 원본 그대로**입니다 —
   *   `public/ddukddak_theme.css:47-48` 의 `--honey: #FEE500` · `--honey-ink: #6E5600`.
   *   벌에서 노랑인 자리는 **날개 채움 둘 + 줄무늬 셋**이고(`public/p.html:216`),
   *   「bee」 글자는 그 노랑의 **진한 쪽**입니다.
   * ★ `--벌줄` 은 앞판에서 흰색이었습니다 — 몸통이 검정이라 줄무늬로 바탕을 뚫던 값인데,
   *   노랑을 되살리니 **줄무늬가 곧 노랑**입니다.
   */
  --로고노랑:     #FEE500;              /* 벌 날개 채움 · 줄무늬 */
  --로고노랑진한: #6E5600;              /* 「bee」 글자 — 밝은 노랑은 흰 바탕에서 안 읽힙니다 */
  /* ★★★ **검정으로 바꿨습니다** (2026-09-14, ■32절 ③ · 사장님 결정).
       옛 값: #241E19 (진한 갈색 · 옛 쪽 원본). 로그인 쪽이 먼저 검정이 되어
       **두 자리가 달랐습니다** — 이 한 줄로 둘을 맞춥니다.
     ★★ **모양 값은 여기 한 곳**입니다. 다른 자리에 색을 박지 않습니다.
     ★ **노랑은 그대로입니다** — 벌 날개·줄무늬와 「bee」는 안 건드립니다. */
  --로고먹:       #101112;              /* 벌 몸통 · 「Make」 */
  --벌줄:       var(--로고노랑);
}

* { box-sizing: border-box; }

html {
  /* ★★ 시안 D 와 **같은 차례**입니다 (2026-09-12) — 시안 원본의 body 가
     `'Pretendard Variable', Pretendard, -apple-system, sans-serif` 입니다.
     `new.html` 이 jsdelivr 에서 진짜로 싣습니다. 못 받으면 아래로 떨어집니다. */
  font-family: "Pretendard Variable", "Pretendard", system-ui, -apple-system,
               "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.7;
  /* ★ 한글은 낱말 단위로 줄을 바꿉니다.
     안 주면 「말 한 줄이면 만 / 들어 드립니다」처럼 낱말 중간에서 끊깁니다.
     2026-09-04 에 저쪽이 화면을 보고 짚었습니다. */
  word-break: keep-all;
  overflow-wrap: break-word;   /* 다만 긴 주소는 넘치지 않게 끊습니다 */
}
.숨김 { display: none !important; }
.흐림 { color: var(--muted); }

/* ── 칸 나눔 ──────────────────────────────────────────
 *
 * 시안: PC 는 사이드바 256 + 본문. 만드는 중에는 사이드바 256 + 대화 600 + 미리보기.
 * 폰은 사이드바가 덮개로 열립니다.
 */
/* ★ 옛 규칙입니다 — 옆칸이 있던 시절 것. `min-height` 를 걷었습니다 (2026-09-10).
     아래 516줄에서 걷었는데 **여기 것이 살아남아** 히어로가 계속 첫 화면을
     꽉 채웠습니다. 같은 이름이 두 곳에 있으면 둘 다 봐야 합니다. */
.판 { display: flex; }

.옆칸 {
  width: 256px; flex: none; background: var(--surface);
  padding: 28px 20px; display: flex; flex-direction: column; gap: 6px;
}
.옆칸 .로고 { margin: 0 14px 32px; }
.새로 {
  padding: 14px 16px; border-radius: 16px; background: var(--btn);
  color: #fff; font-size: 15px; font-weight: 600; text-decoration: none;
}
.메뉴 {
  padding: 14px 16px; border-radius: 16px; font-size: 15px;
  color: var(--menu); text-decoration: none;
}
.메뉴:hover { background: rgba(36,30,25,.05); color: var(--fg); }
.남은것 {
  margin-top: auto; padding: 14px 16px; font-size: 13px;
  color: var(--muted); line-height: 1.7; white-space: pre-line;
}
.오른쪽 { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 폰 — 사이드바를 덮개로 */
.옆칸스위치 { position: absolute; opacity: 0; pointer-events: none; }
.옆칸덮개 { display: none; }
@media (max-width: 899px) {
  .옆칸 {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(36,30,25,.18);
  }
  .옆칸스위치:checked ~ .판 .옆칸 { transform: none; }
  .옆칸스위치:checked ~ .판 .옆칸덮개 {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(36,30,25,.28);
  }
}
@media (min-width: 900px) {
  .햄버거, .폰로고 { display: none !important; }
}

/* ── 꼭대기 ───────────────────────────────────────────── */
/* ★★ 여기 있던 `padding: 22px 24px` 를 걷었습니다 (2026-09-12).
   아래 `.머리기둥` 이 높이 64px 을 쥐는데, 이 padding 이 위아래로 45px 을 더해
   **머리가 109px** 이 됐습니다 — 재서 알았습니다. 안쪽 여백은 기둥이 냅니다. */
/* ★★ `display:flex` 이면 안쪽 기둥이 **flex 아이템**이 되어 `max-width` + `margin:auto`
   가 안 먹고 **내용 폭만큼만** 차지합니다 — 로고·메뉴·단추가 가운데로 뭉쳤습니다
   (찍어서 보고 알았습니다). `block` 으로 두면 기둥이 제 폭을 쥡니다. */
.꼭대기 {
  display: block;
}
.로고 {
  display: flex; align-items: center; gap: 7px;
  font-weight: 800; font-size: 17px; color: var(--fg);
  text-decoration: none; letter-spacing: normal;
}
.로고 .점 { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; }
.햄버거 {
  width: 26px; display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; flex: none;
}
.햄버거 span { height: 2px; background: var(--fg); border-radius: 2px; }
.윗단추 {
  margin-left: auto; font-size: 15px; color: var(--muted);
  text-decoration: none; padding: 7px 12px; border-radius: 10px;
}
.윗단추:hover { background: var(--surface); color: var(--fg); }

/* ── 처음 화면 ────────────────────────────────────────
 * 시안: 인사말이 가운데. 만든 것 목록은 여기 안 둡니다 — 사이드바 보관함에서만.
 */
.감 { flex: 1; display: flex; align-items: center; justify-content: center;
      padding: 0 24px 40px; }
.가운데 { width: 100%; max-width: 660px; }

.약속 {
  font-size: 26px; font-weight: 800; letter-spacing: normal;
  line-height: 1.4; margin: 0 0 32px; text-align: left;
}
.뒷받침 { display: none; }   /* 폰은 시안에 뒷받침 줄이 없습니다 */

.입력틀 { position: relative; margin-bottom: 20px; }
.입력창 {
  width: 100%; border: 1.5px solid var(--line); border-radius: 20px;
  padding: 18px 56px 18px 20px; background: var(--card);
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--fg);
  resize: none; outline: none; min-height: 58px; max-height: 220px;
  transition: border-color .15s;
}
.입력틀:focus-within .입력창 { border-color: var(--btn); }
.입력창::placeholder { color: var(--muted); }
.글자수 { position: absolute; right: 60px; bottom: -18px; font-size: 13px; color: var(--muted); }
.보내기 {
  position: absolute; right: 9px; top: 9px;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: var(--btn); color: var(--accent-fg);
  font: inherit; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* ★ 옛 따뜻한 회색 `#D8CFC4` 를 뺐습니다 — 색 한 벌 밖입니다 (2026-09-12) */
.보내기:disabled { background: var(--bg-soft2); color: var(--ink-faint); cursor: default; }

.예시 { margin-top: 0; }
.예시목록 {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.예시목록 button {
  width: 100%; text-align: left; cursor: pointer; border: 0;
  border-radius: 16px; background: var(--card); color: var(--fg);
  font: inherit; font-size: 15px; line-height: 1.5; padding: 14px 18px;
}
.예시목록 button:hover { box-shadow: 0 2px 10px rgba(36,30,25,.08); }

@media (min-width: 900px) {
  .감 { padding: 0 64px 40px; }
  .약속 { font-size: 40px; letter-spacing: -0.03em; line-height: 1.2;
          margin-bottom: 12px; text-align: center; }
  .뒷받침 { display: block; font-size: 17px; color: var(--soft);
            text-align: center; line-height: 1.7; margin: 0 0 36px; }
  .입력창 { border-radius: 22px; padding: 22px 68px 22px 24px; font-size: 17px; }
  .보내기 { right: 11px; top: 11px; width: 48px; height: 48px; font-size: 19px; }
  .입력틀 { margin-bottom: 24px; }
  .예시목록 { flex-direction: row; flex-wrap: wrap; gap: 10px; justify-content: center; }
  .예시목록 li { flex: 0 0 auto; }
  .예시목록 button { border-radius: 999px; padding: 13px 20px; font-size: 15px; width: auto; }
}

/* ── 진행 · 결과 ─────────────────────────────────────
 * 시안: 대화 600 + 미리보기 나머지. 폰은 대화만.
 */
.진행판 { flex: 1; display: flex; min-width: 0; }
/* ★★ `min-width:0` 이 있어야 합니다. (2026-09-07)
 *   flex 아이템의 기본값은 `min-width:auto` 라 **안에 든 것보다 작아지지 않습니다.**
 *   모델의 긴 한 줄(줄바꿈 없는 문장·`pre` 안의 코드)이 들어오면 대화칸이 600px 을
 *   밀고 커지고, 그만큼 **미리보기 칸이 눌려** 「시작 전 안내」 글자가 세로로 섰습니다.
 *   가로 넘침은 안에서 접습니다 — 판 전체가 옆으로 밀리면 안 됩니다. */
.대화칸 { width: 100%; min-width: 0; padding: 24px; overflow: auto; overflow-x: hidden; }
.대화칸 * { max-width: 100%; }
.미리보기칸 { display: none; }
/* ★★ 갈림점이 1200 입니다 — 900 이 아닙니다. (2026-09-07)
 *   옆 차림표가 256px 을 먼저 먹습니다. 화면이 958px 이면 진행판에 702px 만
 *   남고, 대화칸이 600 을 고집하니 **미리보기 칸이 102px** 이 됩니다.
 *   그 폭에서는 「시작 전 안내」 글자가 한 자씩 세로로 섰습니다.
 *   256 + 600 + 340(미리보기 최소) = 1196 → 1200 으로 잡습니다.
 *   그 아래는 대화 한 칸입니다. 좁은 미리보기는 없느니만 못합니다.
 *   `flex` 를 `0 1 600px` 로 둬서, 어중간한 폭에서도 대화칸이 양보합니다. */
@media (min-width: 1200px) {
  /* ★★ **왼쪽 대화 35% · 오른쪽 미리보기 65%** 입니다 (저쪽 지시 ①, 2026-09-12) —
     **랜딩 큰 창과 같은 모양**입니다. 손님이 랜딩에서 본 그 창이 여기서 진짜로 돕니다.
     ★ 그전에는 대화가 600px 고정이라, 화면이 넓어질수록 대화만 좁아 보이고
       비율이 화면마다 달랐습니다.
     ★ 다만 **대화칸이 너무 좁아지지 않게** 360px 을 밑돌지 않습니다 —
       35% 가 360 아래면 글이 한 자씩 세로로 섭니다(2026-09-07 에 겪은 자리). */
  .대화칸 { flex: 0 1 35%; min-width: 360px; padding: 36px 40px; }
  .미리보기칸 {
    display: flex; flex: 1 1 65%; min-width: 0; flex-direction: column; gap: 28px;
    padding: 36px 40px 36px 0; overflow: auto;
  }
}
.미리이름 { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.미리빈칸 {
  border-radius: 20px; height: 230px; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 16px; font-size: 13px; color: var(--muted);
  /* ★★ **옛 뚝딱 색(살구·겨자 결)을 뺐습니다** (저쪽 지시 ④, 2026-09-12) —
     `#EFE9E1`·`#F7F2EB` 는 옛 따뜻한 바탕이라 색 한 벌(흰 바탕·회색·파랑) 밖입니다.
     찍은 사진에서 작업창 빗금 칸만 누렇게 떠 보였습니다. 회색 결로 바꿉니다. */
  background: repeating-linear-gradient(135deg,
    oklch(94% 0.003 250), oklch(94% 0.003 250) 8px,
    oklch(97% 0.002 250) 8px, oklch(97% 0.002 250) 16px);
}
.미리빈칸.짧게 { height: 150px; }
.미리보기칸 img { width: 100%; border-radius: 20px; display: block; }

/* ★ 다 된 결과물을 미리보기 칸에서 바로 굴립니다. (2026-09-07)
     칸 높이를 꽉 채워야 「진짜 화면」으로 보입니다 — 낮으면 썸네일처럼 보여서
     손님이 또 새 탭을 엽니다. */
.미리한칸.굴러가는 { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.미리틀칸 {
  flex: 1; min-height: 420px; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); background: #fff;
}
.미리틀칸 iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.미리새탭 {
  margin-top: 10px; font-size: 13px; color: var(--muted);
  text-decoration: underline; align-self: flex-start;
}
.미리답 {
  white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.7;
  border-radius: 20px; padding: 18px; background: #fff;
  border: 1px solid var(--line); max-height: 70vh; overflow: auto;
}

@media (min-width: 640px) {
  .약속 { font-size: 26px; }
  .예시목록 { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ── 진행 화면 ────────────────────────────────────────── */
.지금뭐하나 {
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 20px;
}
/* ★ 「이 화면을 떠나지 마세요」도 **색 한 벌 안**입니다 —
   `--warn`(주황)이면 작업창에서 그 한 줄만 튀어 보입니다.
   경고가 아니라 **알려 드리는 말**이라 회색 테두리로 충분합니다. */
.떠나지마 {
  margin-left: auto; font-size: 13px; color: var(--ink-soft);
  border: 1px solid var(--border); background: var(--white);
  border-radius: 999px; padding: 2px 10px;
}

.줄들 { display: flex; flex-direction: column; gap: 2px; }

/* 모델의 말 — 다듬지 않고 그대로 흘립니다 (F 1-1절 다섯째) */
.말 {
  white-space: pre-wrap; word-break: break-word;
  font-size: 17px; margin: 14px 0;
}
.말.첫마디 { font-size: 17px; }

/* 도구 한 줄 */
.걸음 {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 15px; color: var(--muted);
  padding: 5px 0;
}
.걸음 .표시 { width: 16px; flex: none; text-align: center; line-height: 1.7; }
.걸음.도는중 .표시 { animation: 돌기 1s linear infinite; }
@keyframes 돌기 { to { transform: rotate(360deg); } }
.걸음.됨 .표시 { color: var(--ok); }
.걸음.탈 .표시 { color: var(--warn); }
.걸음.탈 .글 { color: var(--warn); }
.걸음 .글 { flex: 1; }
.걸음 .때 { font-size: 13px; color: #a1a1aa; flex: none; font-variant-numeric: tabular-nums; }

/* 펼치면 원문. 안 펼쳐도 「펼쳐진다」는 것 자체가 숨기는 게 없다는 신호입니다. */
.자세히 { margin: 2px 0 8px 25px; }
.자세히 summary { font-size: 13px; color: #a1a1aa; cursor: pointer; }
.자세히 pre {
  white-space: pre-wrap; word-break: break-word;
  background: var(--surface); border-radius: 8px;
  font-size: 13px; padding: 10px 12px; margin: 6px 0 0;
  max-height: 340px; overflow: auto;
}

/* 찍은 화면 — 「열어보고 드립니다」의 증거는 이것뿐입니다 */
.그림들 { display: flex; gap: 8px; margin: 6px 0 10px 25px; flex-wrap: wrap; }
.그림들 img {
  height: 120px; width: auto; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: 8px;
  object-fit: cover; object-position: top;
}

.큰그림 {
  position: fixed; inset: 0; z-index: 50; cursor: zoom-out;
  background: rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.큰그림 img { max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ── 결과 카드 ────────────────────────────────────────── */
/* 결과 카드 — 흰 면, 테두리 없음 (시안). */
.결과 {
  background: var(--card); border: 0; border-radius: 24px;
  padding: 24px; margin-top: 24px;
}
.결과 h2 { font-size: 22px; font-weight: 800; letter-spacing: normal; }
.결과 .단추들 { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.결과 .단추 {
  /* ★ 단추는 **검정**입니다 (2026-09-06, 시안).
   *   주황(--accent)은 로고 점·진행 중 줄·공개 토글에만 씁니다.
   *   여기에 주황을 쓰면 화면에 강조가 둘이 되어 어디를 봐야 할지 흐려집니다. */
  border: 0; border-radius: 14px; cursor: pointer; text-decoration: none;
  /* ★★ 글자색은 **흰색**입니다. (2026-09-09)
       여기 `--accent-fg` 가 들어 있었는데 그건 **꿀색 위 글자**용(= 검정)이라,
       검은 단추 위에 검은 글씨가 되어 **글자가 아예 안 보였습니다.**
       「이어서 만들기」가 이 단추입니다 — 만들다 멈췄을 때 손님이 제일 필요한
       단추인데, 그때 검은 네모만 보였습니다. */
  background: var(--btn); color: var(--white);
  font: inherit; font-size: 15px; font-weight: 600; padding: 15px 32px;
}
.결과 .단추.덜 {
  background: transparent; color: var(--soft); border: 0;
  font-weight: 400; padding: 15px 8px;
}
.결과 .보고 { white-space: pre-wrap; font-size: 15px; margin: 0; }
.결과 .바뀐것 {
  font-size: 15px; margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line); color: var(--muted);
}
.띠 {
  /* 빨강을 쓰지 않습니다 (시안). 모래·주황 쪽으로. */
  background: #FBF0E9; border: 0; color: var(--warn);
  border-radius: 14px; padding: 12px 16px; font-size: 15px; margin-bottom: 14px;
}

/* 「확인 못 한 것이 있어요」 — 열어보기 상한에 걸려 완화로 나갈 때만 (2026-09-05).
   경고가 아니라 알림입니다. 결과물은 멀쩡할 수도 있고, 손님이 「그것만 다시 봐줘」
   하시면 되는 자리라 붉은색이 아니라 모래색으로 둡니다. */
/* ★ 되돌리기 띠 (■58절 ④). 「확인 못 한 것」과 같은 결이되 **노랑이 아니라 회색**입니다 —
   탈이 난 것이 아니라 **고를 수 있는 것**이라서, 빨간불처럼 보이면 안 됩니다. */
.결과 .되돌리기띠 {
  margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg-soft);
}
.결과 .되돌리기띠 .보고 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.결과 .되돌리기띠 .판단추 { margin: 0; }

.결과 .확인못함 {
  margin: 12px 0 0; padding: 10px 14px;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}
.결과 .확인못함 .보고 { font-size: 15px; font-weight: 700; color: #92400e; }
.결과 .확인못함 ul { margin: 6px 0 0; padding-left: 18px; }
.결과 .확인못함 li { font-size: 15px; color: #92400e; line-height: 1.7; }

/* 공개 켜고 끄기 (B-1, 2026-09-05).
   결과 카드 안에 조용히 앉습니다 — 경고가 아니라 손님이 정하는 자리입니다. */
/* 공개하기 토글 (2026-09-06, 시안). 켜졌을 때만 주황입니다. */
.공개제목 { font-size: 15px; color: var(--fg); }
.공개설명 { font-size: 13px; color: var(--muted); margin-top: 3px; }
.공개스위치 {
  width: 46px; height: 27px; border: 0; border-radius: 999px; flex: none;
  background: var(--bg-soft2); position: relative; cursor: pointer; padding: 0;
  transition: background .18s;
}
.공개스위치.켜짐 { background: var(--accent); }
.공개스위치 i {
  position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
  border-radius: 50%; background: #fff; transition: left .18s;
}
.공개스위치.켜짐 i { left: 22px; }
.공개스위치:disabled { opacity: .6; cursor: default; }

.결과 .공개칸 {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.결과 .공개칸 .보고 { font-size: 15px; color: var(--muted); flex: 1 1 240px; }

/* 관리 접힘 (B-2, 2026-09-05).
   이름·설명·주소·비밀번호·휴지통. 접어 둡니다 —
   만들자마자 보여야 하는 것은 결과물이지 설정이 아닙니다. */
.결과 .관리 { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.결과 .관리 > summary {
  cursor: pointer; font-size: 15px; font-weight: 700; color: var(--muted);
  list-style: none; padding: 6px 0; min-height: 32px;
}
.결과 .관리 > summary::-webkit-details-marker { display: none; }
.결과 .관리 > summary::before { content: "⚙ "; }
.결과 .관리속 { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.결과 .관리줄 {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 8px; align-items: center;
}
.결과 .관리줄 label { font-size: 15px; color: var(--muted); }
.결과 .관리줄 input {
  width: 100%; min-height: 40px; padding: 0 12px; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.결과 .관리줄 input:focus { outline: none; border-color: var(--ink); }
.결과 .관리도움 { font-size: 13px; color: var(--muted); }
/* ★ 문 번호 줄만 칸이 넷입니다 (이름·설명·번호칸·바꾸기).
     3열 격자에 넷을 넣으면 단추가 다음 줄로 떨어집니다. (2026-09-08) */
.결과 .관리줄.문번호줄 { grid-template-columns: 96px 1fr 92px auto; }
.결과 .문번호칸 {
  text-align: center; font-weight: 700; font-size: 17px;
  letter-spacing: normal; font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  /* 폰에서는 설명을 아래로 내리고 번호와 단추를 나란히 둡니다. */
  .결과 .관리줄.문번호줄 { grid-template-columns: 1fr 92px auto; }
  .결과 .관리줄.문번호줄 .관리도움 { grid-column: 1 / -1; order: 3; }
}
.결과 .단추.위험 { color: #b91c1c; border-color: #fecaca; }
.결과 .관리말 { font-size: 15px; margin: 4px 0 0; min-height: 20px; }
.결과 .관리말.됨 { color: #166534; }
.결과 .관리말.탈 { color: #b91c1c; }

/* 이어 말하기 칩 (B-4, 2026-09-05).
   보고 아래에 눌러서 이어 말할 것 한둘. 누르면 입력칸에 채워질 뿐,
   보내기를 누르셔야 크레딧이 나갑니다. */
.결과 .칩들 { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.결과 .칩 {
  min-height: 40px; padding: 0 14px; font-size: 15px; font-weight: 700;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface-alt, #f7f7f8); color: var(--ink); cursor: pointer;
}
.결과 .칩:hover { border-color: var(--ink); }

/* 「이번 건 몇 크레딧」 (C, 2026-09-05).
   진행 줄 맨 위에 조용히 한 줄. 경고가 아니라 알려드리는 것입니다. */
.크레딧줄 {
  font-size: 13px; color: var(--muted); margin: 0 0 10px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--surface-alt, #f7f7f8);
}

/* 만든 사진 — 찍은 화면과 나란히 두되 조금 크게 보입니다.
   손님이 값을 낸 것이라 작게 흘려보내면 안 됩니다. */
.그림들.만든사진 img { max-height: 200px; }

/* 폰에서는 이름표를 위로 올립니다 — 96px 를 떼면 입력칸이 너무 좁습니다. */
@media (max-width: 480px) {
  .결과 .관리줄 { grid-template-columns: 1fr auto; }
  .결과 .관리줄 label { grid-column: 1 / -1; margin-bottom: -4px; }
}

/* 다 되면 진행 줄은 접습니다 */
.과정 { margin-top: 20px; }
/* ★ 「다 됐어요 · 4분 6초 · 자세히 ▾」 한 줄 (2026-09-09, 저쪽 지시) */
.과정 > summary {
  font-size: 15px; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; gap: 7px; padding: 8px 0;
  list-style: none;
}
.과정 > summary::-webkit-details-marker { display: none; }
.과정 > summary b { color: var(--ink); font-weight: 700; }
.과정 > summary .점 { color: var(--ink-faint); }
.과정 > summary .걸린 { color: var(--ink-faint); }
.과정 > summary .자세히말 { color: var(--ink-faint); }
.과정 > summary .자세히말::after { content: " ▾"; }
.과정[open] > summary .자세히말::after { content: " ▴"; }

/* 답 아래 「전체 복사」 (2026-09-06)
   답은 손님이 다른 데 붙여 쓰는 것이라, 긴 글이면 단추를 하나 둡니다. */
.답복사줄 {
  display: flex;
  justify-content: flex-start;
  margin: 6px 0 2px;
}

/* 「이어서 하기」 — 값이 정해지기 전에는 안 보입니다 (2026-09-06) */
.칩.굵은칩 {
  font-weight: 800;
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

/* 고치기 입력칸 아래 값 어림 (2026-09-06). 넷리파이 쪽 theme.css 와 같은 값. */
.값미리 { font-size: 13px; color: var(--muted); margin-top: 6px; }
.값미리:empty { display: none; }

/* 진행 줄 아래 절·부품 이름 (2026-09-06) · 폰의 「묶였어요」 한 줄 */
.절이름줄 { font-size: 13px; color: var(--muted); margin: 2px 0 8px 25px; line-height: 1.5; }
.묶임알림 { font-size: 13px; color: var(--muted); margin: 6px 0 6px 25px; }

/* 「확인 중이에요」·「고쳤어요」 띠 (2026-09-06). 빨강을 안 씁니다. */
.확인중띠 { background: #FBF5EE; color: var(--warn); }
.고침띠   { background: #F1F5F0; color: #4F7A55; }

/* ══════════════════════════════════════════════════════════════
   Makebee 화면 (2026-09-09, 사이트 화면 교체 ②③④)

   시안 `docs/본보기/Makebee시안/3-시안C/시안C.html` 에서 옮겼습니다.
   위의 옛 규칙은 그대로 둡니다 — 입력창·말풍선·진행 줄·미리보기가
   거기 있고, 그 이름들을 여기서도 씁니다.
   ══════════════════════════════════════════════════════════════ */

/* ── 판과 위 메뉴 ─────────────────────────────────────── */
/* ★★ `min-height: 100dvh` 를 걷었습니다. (2026-09-10)
     이것이 있으면 히어로가 **늘 첫 화면을 꽉 채워**, 카드를 아무리 줄여도
     결과물 띠가 화면 밖에 남습니다. 카드를 769→204 로 줄였는데도 띠 자리가
     906px 에서 꿈쩍 안 해서 재다가 찾았습니다.
     사장님이 「첫 화면에 띠가 걸치게」라 하셨으니 이 고정이 그 반대입니다.
     ★ 작업창(`.진행판`)은 제 높이를 따로 잡으니 여기와 무관합니다. */
.판 { display: block; background: var(--bg); }

/* ★★ 옛 `.감` 이 `display:flex` 라 랜딩 전체가 **flex item** 이 됐고,
 *   `min-width:auto` 때문에 소개칸이 **내용 폭(3,212px)만큼 늘어났습니다.**
 *   띠가 `width:max-content` 라 그 폭을 그대로 밀어낸 것입니다 —
 *   `.띠겉` 의 `overflow:hidden` 은 자기 폭이 이미 3,212 라 자를 것이 없었습니다.
 *   랜딩은 위에서 아래로 쌓는 화면이라 **블록**이 맞습니다. */
#처음.감 { display: block; }
#처음 > * { min-width: 0; }

/* ★★ 옛 `.보내기` 가 **42px 동그라미**라 「만들기 시작」 다섯 글자가
 *   검은 원 안에 갇혀 **안 보였습니다.** 옛 화면은 화살표 하나였습니다.
 *   시안 C 는 글자가 든 알약이라 폭을 풀어 줍니다.
 *   (진행 화면의 동그란 보내기는 `.동그란보내기` 로 따로 있습니다.) */
/* ★★ 「만들기 시작」은 **짙은 검정**입니다 (저쪽 지시 ④, 2026-09-12).
   강조색이 파랑이 되면서 이 단추가 파랑으로 나왔는데, 저쪽이 검정으로 못박았습니다 —
   강조색은 **아주 조금만** 쓰는 것이고 주요 단추는 검정입니다. */
.히어로 .보내기, .아래입력틀 .보내기 {
  position: static; width: auto; height: auto;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--단추검정); color: #fff;
  font-size: 17px; font-weight: 700; white-space: nowrap;
}
.히어로 .보내기:disabled, .아래입력틀 .보내기:disabled {
  background: var(--bg-soft2); color: var(--ink-faint);
}
/* 알약 단추가 들어가려면 입력틀이 가로로 늘어서야 합니다. */
/* ★★ `.기능입력틀` 도 여기에 넣습니다 — 안 넣었더니 flex 가 안 먹어
   **단추가 칸 밖 아래로 떨어졌습니다**(찍어서 보고 알았습니다).
   같은 모양이어야 하는 것은 **같은 규칙**에 둡니다. */
.히어로 .입력틀, .아래입력틀, .기능입력틀 {
  position: relative; display: flex; align-items: center; gap: 12px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 8px 8px 26px;
}
.히어로 .입력창, .아래입력틀 .입력창, .기능입력틀 .입력창 {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 17px; color: var(--ink); padding: 0; min-height: 32px; resize: none;
}

/* 예시 칩 — 시안 C 는 **한 줄에 셋**, 회색 테두리입니다.
   ★ 옛 규칙이 `.예시목록 button { width: 100% }` 이고, 그것을 푸는 규칙은
     `@media (min-width: 900px)` 안에 있습니다. 히어로 칩칸은 **559px** 이라
     그 미디어 쿼리에 안 걸려 칩이 274px 씩 늘어나 **2·1 로 접혔습니다.**
     칸 폭이 아니라 창 폭으로 갈리는 규칙이라 못 보고 지나칠 자리입니다. */
/* ★★ `display: flex` 를 **명시해야** 합니다. 안 쓰면 어딘가의
     `display: grid; grid-template-columns: repeat(2, …)` 가 이겨
     칩이 **2칸 격자**로 274px 씩 늘어납니다.
     `flex-direction` 만 주면 grid 에서는 아무 뜻이 없습니다. */
.히어로 .예시목록 { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px;
                    grid-template-columns: none; }
.히어로 .예시목록 li { list-style: none; flex: 0 0 auto; }
.히어로 .예시목록 button, .히어로 .예시목록 li > * {
  width: auto; text-align: center;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  color: var(--ink-soft); font-size: 15px; font-weight: 500; cursor: pointer;
  box-shadow: none;
}

/* ══ 머리 — **안쪽을 기둥 폭에** 넣습니다 (저쪽 지시 ③, 2026-09-12) ══════
 *
 * ★★★ 사장님이 1900px 화면에서 보시고 짚어 주셨습니다 —
 *   우리는 로고가 **화면 왼쪽 끝(x≈19)**, 단추가 **오른쪽 끝(x≈1875)** 에 붙어
 *   작업창과 줄이 안 맞았습니다.
 *
 * ★ Attio 를 **세 폭에서 재 보니**(`docs/Attio-세폭-잰값.json`) —
 *   1440: 안쪽 20~1416 · 1680: 140~1536 · 1920: 260~1656.
 *   **안쪽 폭이 셋 다 1396px 로 같습니다.** 화면이 넓어져도 안쪽은 그대로이고
 *   양옆 여백만 늡니다. 그래서 `max-width` + `margin:auto` 로 짓습니다.
 * ★ 머리 높이는 Attio **64px**(잰 116px 에서 알림 띠 52px 을 뺀 값)입니다.
 */
.꼭대기 {
  position: sticky; top: 0; z-index: 20;
  padding: 0;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.꼭대기 > * { min-width: 0; }
/* 안쪽을 감싸는 기둥 — 작업창과 **같은 폭**입니다 */
.머리기둥 {
  max-width: 1396px; margin: 0 auto; padding: 0 24px;
  /* ★ Attio 머리는 **64px** 입니다. `min-height` 만 주면 안쪽 것들이 밀어
     109px 이 됐습니다 — `height` 로 못박고 넘치는 것은 안 보이게 합니다.
     로고 벌은 글자 위로 튀어나오는데 `overflow` 를 막으면 잘리니,
     벌에는 자리를 안 주고(`position:absolute`) 띄웁니다. */
  height: 64px;
  display: flex; align-items: center; gap: 16px;
}
/* ★ 메뉴 글자는 Attio 와 같이 **16px · 굵기 500** 입니다 (재서 맞췄습니다) */
.머리말 { font-size: 16px; font-weight: 500; }
/* ★★ 로고 락업 (2026-09-10, 시안 값) ────────────────────
     「Makebee」를 다 쓰고 **벌이 마지막 e 바로 위**에 앉습니다.
     시안은 42px 글자에 벌 51×40 · right 5px · top -31px · -6도입니다.
     헤더는 그보다 작아야 하니 **같은 비율로** 줄입니다 (0.62배). */
.꼭대기 .로고 {
  position: relative; display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink);
}
.로고글자 {
  font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-weight: 800; letter-spacing: normal; color: var(--로고먹);
  font-size: 26px; line-height: 1;
}
/* ★★★ **노랑을 되살렸습니다** (사장님 결정, 2026-09-12 저녁 — 앞 결정을 뒤집으셨습니다).
   「로고는 원래 것 그대로, 노랑 그대로. 로고는 **상표**라서 사이트 색 규칙에서 뺍니다.」
   ★ 「bee」는 **밝은 노랑이 아니라 진한 쪽**입니다 — `#FEE500` 글자는 흰 바탕에서
     읽히지 않습니다. 옛 쪽도 `.mbk-bee { color: var(--honey-ink) }` 로 그렇게 했습니다. */
/* ★★★ **「bee」도 검은색**입니다 (사장님, 2026-09-13).
     「벌은 흰색과 검은색으로 단순하게 하고, 「bee」 글자도 검은색으로 해 주세요.」
   ★ 그전 값(`--로고노랑진한`)은 2026-09-12 저녁에 되살린 것인데,
     **나중 말이 앞 말을 덮습니다.** 지우지 않고 갈아 끼웁니다. */
.로고bee { color: var(--로고먹); }
/* ★★ 벌 **몸통**은 먹이고 **줄무늬와 날개**가 노랑입니다.
   `currentColor` 가 몸통 색이고, 줄무늬는 `--벌줄`(=노랑)로 그 위를 뚫습니다.
   ★ 검은 절 위에서는 몸통을 흰색으로 바꿉니다 — **노랑은 그대로 둡니다.**
     노랑까지 흰색으로 바꾸면 벌이 아니라 흰 덩어리가 됩니다. */
.꼭대기 .벌 { color: var(--로고먹); }
/* 검은 바탕(검은 절 · 어두운 머리)에서 — 몸통만 희게, **노랑은 그대로** */
.검은바탕 .벌, .검은절 .벌 { color: #ffffff; }
.검은바탕 .로고글자, .검은절 .로고글자 { color: #ffffff; }
.검은바탕 .로고bee, .검은절 .로고bee { color: var(--로고노랑); }
/* ★ `right` 를 음수로 둡니다 — 시안 값(5px)을 그대로 줄여 넣었더니
     벌이 마지막 e 보다 **12px 왼쪽**에 앉았습니다(재서 봤습니다).
     저쪽이 「마지막 e 바로 위」라 했으니 그 글자 가운데에 맞춥니다. */
/* ★★★ **벌이 글자 왼쪽에 나란히 섭니다** (사장님, 2026-09-13).
     「attio.com 처럼 글자 왼쪽에 나란히 놓아 주세요.」
   ★ 그전에는 `position:absolute` 로 **마지막 e 위에 얹혀** 있었습니다.
     띄워 두느라 헤더 높이를 `height` 로 못박아야 했는데, 이제 줄 안에 서니
     그 까닭이 없어졌습니다. 높이(65px)는 **그대로 둡니다** - 짜임은 시안 그대로. */
.꼭대기 .벌 {
  position: static; width: 30px; height: 24px;
  transform: rotate(-6deg); flex-shrink: 0;
  /* ★★★ **사장님이 고르신 값** (2026-09-13, ■24절 ②) — 넉 장을 나란히 보시고
       「거의 붙입니다」로 정하셨습니다. **보이는 사이 2px** 입니다.
     ★ `margin-right` 는 -4px 인데 벌이 **-6도 기울어** 오른쪽에 빈 자리가 생겨,
       눈에 보이는 사이는 2px 이 됩니다. 그래서 **여백 값과 보이는 값이 다릅니다** —
       고칠 때는 `node loop/23-로고사이-나란히.mjs` 로 **재서** 봅니다. */
  margin-right: -4px;
}
/* 랜딩 큰 자리(발·푸터 등)에서는 같은 비율로 키웁니다. */
.로고.큰 .로고글자 { font-size: 40px; }
.로고.큰 .벌 { right: -13px; top: -31px; width: 51px; height: 40px; }

/* ★ 발 로고 (2026-09-10). 머리 것을 그대로 떠서 쓰되 작게 놓습니다. */
.발로고 {
  position: relative; display: inline-flex; align-items: center;
  text-decoration: none; color: var(--ink); margin-right: 6px;
}
.발로고 .로고글자 { font-size: 19px; }
.발로고 .벌 {
  position: absolute; right: -6px; top: -14px; width: 24px; height: 19px;
  transform: rotate(-24deg);
}

/* ★★ 이름 메뉴 — 로그인하시면 「로그인·무료로 시작하기」 자리에 옵니다. (2026-09-10) */
.이름메뉴 { position: relative; }
.이름단추 { gap: 5px; cursor: pointer; font-family: inherit; }
.이름서랍 {
  position: absolute; top: calc(100% + 6px); right: 0; width: 172px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 32px -14px oklch(20% 0.01 90 / 0.22);
  padding: 8px; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease; z-index: 40;
}
/* ★★★ **`:hover` 를 걷었습니다.** (2026-09-11, 저쪽 지시 ⑥)
   마우스가 살짝만 벗어나도 닫혀서, 메뉴로 내려오는 길에 사라졌습니다.
   이제 단추의 `aria-expanded="true"` 일 때만 열립니다 — `new.js` 가 켜고 끕니다. */
.이름메뉴 .이름단추[aria-expanded="true"] + .이름서랍 {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* 서랍 맨 위 — 누구로 들어와 있나 */
.서랍머리 { padding: 8px 12px 6px; }
.서랍아이디 { font-size: 15px; font-weight: 700; color: var(--ink); }
.서랍메일 {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.이름서랍 a, .이름서랍 button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 8px; border: 0; background: none;
  font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer;
  font-family: inherit;
}
.이름서랍 a:hover, .이름서랍 button:hover { background: var(--bg-soft); }
.진행중 .이름메뉴 { display: none; }

/* ★ 헤더 메뉴 (시안 값) ─────────────────────────────── */
.머리메뉴 { display: flex; align-items: center; gap: 28px; margin-left: 40px; }
.머리갈래 { position: relative; }
.머리말 {
  font-size: 15px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer; display: flex; align-items: center; gap: 4px;
  padding: 8px 0; background: none; border: 0; text-decoration: none;
  font-family: inherit;
}
.머리말:hover { color: var(--ink); }
.꺾쇠 { font-size: 13px; }
.머리서랍 {
  position: absolute; top: 100%; left: 0; width: 200px;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 16px 32px -14px oklch(20% 0.01 90 / 0.22);
  padding: 8px; opacity: 0; transform: translateY(-6px); pointer-events: none;
  /* ★★★ **닫혔을 때 탭이 안 걸리게 합니다** (2026-09-13, ■21절 ③).
   *   `opacity: 0` 만으로는 **자리를 차지하고 탭 순서에 남습니다** —
   *   키보드로 다니는 손님이 **안 보이는 단추 18개**를 밟았습니다(폭마다).
   *   마우스는 `pointer-events: none` 으로 이미 막혀 있었습니다.
   * ★ `visibility: hidden` 이면 그 안 요소가 **탭에서 빠집니다.**
   *   단추(`.머리말`)는 **서랍 밖**이라 키보드 길은 살아 있습니다 —
   *   단추에 탭 → `:focus-within` → 서랍이 열리고 → 그다음 탭으로 안에 들어갑니다.
   * ★ `transition` 에 `visibility` 를 넣어 **닫힐 때 240ms 뒤에** 사라지게 합니다.
   *   안 넣으면 사라지는 순간 서랍이 툭 없어져 보입니다. */
  visibility: hidden;
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms ease; z-index: 30;
}
/* ══ 여는 것은 **올려놓기**, 닫는 것은 **늦춰서** ═════════════════════
 *
 * ★★★ 사장님 (2026-09-12) — 「헤더바에 마우스 올려놓고 밑에 목록 쪽으로 내려도
 *   안 사라지고, **우리는 클릭하는 방식이라 마우스 밑으로 내리려고 하면 사라지잖아**」
 *
 * ★ 무엇이 문제였나. 여는 것은 이미 `:hover` 였는데, 넓은 서랍이
 *   `position: fixed; top: 64px` 이라 **메뉴 글자 아래(≈44px)와 서랍 위(64px) 사이에
 *   20px 틈**이 생겼습니다. 그 틈은 `.머리갈래` 밖이라 지나가는 순간 닫힙니다.
 *   마우스는 곧게 못 내려오니 **거의 늘 닫혔습니다.**
 *
 * ★★ Attio 를 재 보니 틈이 **23px 인데도 안 닫힙니다**
 *   (`docs/Attio-부드러움과올려놓기.json` — 틈에서도열림=true · 서랍안=true).
 *   순수 `:hover` 로는 안 되는 값입니다. **닫기를 늦추는 것**입니다.
 *
 * ★ 그래서 여닫는 것을 `.열림` 한 칸으로 옮기고, `new.js` 가
 *   **들어오면 곧바로 열고 · 나가면 220ms 기다렸다 닫습니다.**
 * ★ `:focus-within` 은 그대로 둡니다 — 키보드로 다니는 분께는 그것이 유일한 길이고,
 *   JS 가 어떤 까닭으로 안 돌아도 메뉴가 통째로 죽지 않습니다. */
.머리갈래.열림 .머리서랍,
.머리갈래:focus-within .머리서랍 {
  opacity: 1; transform: translateY(0); pointer-events: auto;
  visibility: visible;            /* ★ 열릴 때 탭이 들어옵니다 */
}
/* ★ 넓은 서랍은 **가로 가운데 맞추기**를 잃지 않아야 합니다 —
   위 규칙이 `translateY(0)` 으로 덮어써서 왼쪽으로 쏠린 적이 있습니다. */
.머리갈래.열림 .머리서랍.서랍넓게,
.머리갈래:focus-within .머리서랍.서랍넓게 { transform: translateX(-50%); }
/* ★★ 그리고 **틈에 보이지 않는 다리**를 놓습니다 — 늦춰 닫기와 둘 다 둡니다.
   늦추기만 두면 220ms 안에 못 내려온 분이 놓치고, 다리만 두면 비스듬히
   내려올 때 다리를 벗어납니다. 둘을 겹쳐야 어느 쪽으로 와도 안 닫힙니다.
   ★ `pointer-events` 를 살려 두어야 다리 노릇을 합니다. 눈에는 안 보입니다. */
.머리갈래.열림::after {
  content: ""; position: absolute; left: -24px; right: -24px;
  top: 100%; height: 26px;
}
.머리서랍 a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 15px; color: var(--ink); text-decoration: none;
}
.머리서랍 a:hover { background: var(--bg-soft); }
/* 작업창에서는 메뉴와 시작하기를 감춥니다 — 그 자리는 판 이름 것입니다. */
.진행중 .머리메뉴, .진행중 #시작하기칸 { display: none; }
@media (max-width: 900px) { .머리메뉴 { display: none; } }

.판머리 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.판이름 {
  border: none; background: none; padding: 2px 4px; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 700; color: var(--ink);
  border-radius: 6px; max-width: 40vw;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.판이름:hover { background: var(--bg-soft); }
.저장됨 { font-size: 13px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.저장됨::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--honey); }

.윗오른쪽 { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.내보내기칸 { display: flex; align-items: center; gap: 10px; }
.윗단추 {
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--ink);
  font-size: 15px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none;
}
/* ★★ **주요 단추는 짙은 검정입니다** (저쪽 지시 2026-09-11 · 시안 C).
   노랑은 **넷 자리에만** — 로고 bee·벌 · 「만들기 시작」 · 「카카오로 시작하기」 ·
   요금 추천 알약. 「무료로 시작하기」는 그 넷이 아닙니다.
   ★ 그전에는 여기가 노랑이라 **머리에 노랑이 둘**이었습니다(로고와 이 단추). */
.윗단추.채움 { border: none; background: var(--단추검정); color: var(--white); font-weight: 700; }
/* ★ 폰에서 「무료로 시작하기」가 **두 줄로 접혀** 머리가 두꺼워졌습니다.
     (2026-09-10, 랜딩 캡처를 눈으로 보다 찾음)
     글자를 줄이지 않고 여백만 좁힙니다 — 말을 줄이면 무엇을 누르는지 흐려집니다. */
@media (max-width: 430px) {
  /* ★★★ 2026-09-12 — **15px 넘침을 고쳤습니다** (저쪽 ■7절 ②).
   * 390 에서 재 보니 `.윗오른쪽` 이 **195px** 인데 들어갈 자리는 **187px** 이라
   * 8px 모자랐고, 화면 밖으로 **15px** 나갔습니다.
   *
   * ★★ **글자는 안 줄입니다.** 「무료로 시작하기」를 「시작하기」로 줄이면
   *   무엇을 누르는지 흐려집니다 — 여백만 좁힙니다(CLAUDE.md 의 그 규칙).
   * ★ 줄인 곳 셋 — 기둥 옆 여백 24 → **16**(32px 벎) · 단추 안 여백 13 → **11** ·
   *   로고와 단추 사이 16 → **10**. 높이는 **44px 그대로** 둡니다(폰에서 누르는 것). */
  .머리기둥 { padding: 0 16px; gap: 10px; }
  .꼭대기 .윗단추 { padding: 0 11px; font-size: 13px; white-space: nowrap; }
  .꼭대기 .윗오른쪽 { gap: 6px; }

}

/* ══════════════════════════════════════════════════════════════
 * 계정 이름은 **말줄임합니다** (2026-09-13, 비상 ②)
 *
 * ★★★ 로그인하면 헤더 오른쪽(`.윗오른쪽`)이 **250px** 이 되어 폰 390 에서
 *   **88px** 넘쳤습니다 — `#이름글` 이 계정 이름을 **그대로** 보이기 때문입니다.
 *   시험 계정 이메일이 길어서 드러났지만, **진짜 손님도 이름이 길면 똑같이 넘칩니다.**
 *   `max-width` 도 말줄임도 없었습니다.
 *
 * ★★ `body { overflow-x: clip }` 은 **헤더를 못 자릅니다** — 폰에서 `.꼭대기` 가
 *   `position: fixed` 라 잘리는 칸 바깥에 섭니다. 헤더는 **제 폭을 스스로 지켜야** 합니다.
 * ★ 글자를 깎는 것이 아니라 **넘칠 때만** 「…」로 줄입니다. 짧은 이름은 그대로 다 보입니다.
 * ══════════════════════════════════════════════════════════════ */
.이름단추 #이름글, .이름단추 .이름글 {
  display: inline-block; max-width: 14ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  vertical-align: bottom;
}
@media (max-width: 430px) {
  .이름단추 #이름글, .이름단추 .이름글 { max-width: 8ch; }
}

/* ★★ 나눔 단추 (2026-09-09, 저쪽 지시) ─────────────────
   카카오 노랑은 **저쪽이 정한 값**이라 우리 토큰을 안 씁니다 —
   손님이 카톡 단추로 알아보는 색이라 바꾸면 못 알아봅니다. */
.윗단추.카톡 {
  border: none; background: #FEE500; color: #191600; font-weight: 700;
  gap: 7px;
}
.윗단추.카톡:hover { background: #F5DC00; }
/* 말풍선 — 둥근 네모 몸에 아래 왼쪽 꼬리. 마스크로 원을 그렸더니
   그냥 **동그라미**로 보였습니다(2026-09-09 캡처에서 확인). 모양으로 짓습니다. */
.말풍선 {
  position: relative; width: 16px; height: 13px; flex-shrink: 0;
  background: #191600; border-radius: 4px;
}
.말풍선::after {
  content: ""; position: absolute; left: 3px; bottom: -3px;
  width: 0; height: 0;
  border-left: 5px solid #191600;
  border-bottom: 4px solid transparent;
}
.나눔묶음 { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.나눔귀띔 { font-size: 13px; color: var(--ink-faint); padding-left: 2px; }

/* 다 되면 이 칸이 **결과 카드 안**으로 옮겨 옵니다. 그때 옷을 갈아입습니다 —
   머리 오른쪽 구석과 카드 안은 자리 값이 다릅니다. */
.결과 .내보내기칸 {
  margin: 14px 0 4px; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════
 * 히어로 — **시안 D 를 그대로 옮긴 것** (2026-09-12, 저쪽 ■10절 ②)
 *
 * ★★★ 값은 전부 시안의 `heroFrame(w, p, …)` 에서 가져왔습니다.
 *   짐작한 것이 한 곳도 없습니다 (`docs/시안D-옮기기-센것.md` 에 표로 적었습니다).
 *
 * ★★ 앞판은 **Attio 를 직접 재서** 지은 것이라 값이 다릅니다 —
 *   큰 창 줄어듦 4.1% → **38%**, 펼치는 구간 100px → **1440에서 60 · 1920에서 180**.
 *   저쪽 지시: 「옮길 때는 **시안이 원본**입니다. 우리 결정과 다르면 시안을 따르고,
 *   부딪히는 자리는 적어만 두십시오.」
 *
 * ★ `--진행` 은 0~1 입니다. `new.js` 가 폭에 맞는 구간으로 셈해 넣습니다.
 * ══════════════════════════════════════════════════════════════ */

/* 시안 값: hdr 108 · 절 높이 PC 900 · 1920 1040 · 폰 1000 */
.히어로.히어로D {
  --머리높이: 108px;
  /* ══ 무대 높이 — **Design 식 그대로** (2026-09-13, ■17절) ══
   *   Design: `innerH = max(H, T1 + round(winH × 0.71) + 96)`
   *     T1 = 화면 높이 × 0.60 · winH = 75vw × 0.573 · 배율 끝값 0.71
   *     → `60vh + (75 × 0.573 × 0.71)vw + 96px` = `60vh + 30.52vw + 96px`
   *
   * ★★ 이 값이 **붙박이 구간**을 정합니다. 앞서 `900px + 60` 고정이라
   *   걸음 150~300 에서 창이 **멎어 있었습니다**(Design 은 그때 1:1 로 올라갑니다).
   *   Design 1880: 150 → 538 · 200 → 488 · 300 → 388
   *   우리  1880: 150 → 588 · 200 → 588 · 300 → 577   ← 멎어 있었습니다
   *   재서 찾았습니다. 옛 값은 지우지 않고 여기 적어 둡니다: `height: calc(900px + var(--펼침))`.
   */
  --펼침: 60px;                 /* 1440 기준. 1920 은 아래에서 180 */
  /* ★★★ **붙박이 구간을 정하는 것은 이 둘의 차이**입니다 (2026-09-13, ■17절).
   *   Design: 무대(sticky) 높이 = `innerH`, 절 높이 = `innerH + 100`
   *   → 붙박이가 **딱 100px** 돌고 풀립니다. 그 뒤로는 쪽과 1:1 로 올라갑니다.
   *   우리는 절 높이만 고치고 무대 높이가 791px 고정이라 **467px** 이나 붙박였고,
   *   걸음 150~300 에서 창이 **멎어 있었습니다.** 재서 찾았습니다. */
  /* ★★★ **Design 새 판 그대로** (2026-09-13, ■29절 ⑦ · 사장님 「design 대로 옮겨」).
   *   `heroH = T1 + endH + 150`  — **창 밑 150px 까지** 배경이 이어집니다.
   *     T1   = 화면 높이 × 0.60
   *     endH = (75vw × 0.573) × 끝배율        ← `--끝배율` 은 `new.js` 가 넣습니다
   *   75 × 0.573 = **42.975vw**.
   * ★ 재서 찾은 것 — 우리 배경이 창 아랫변보다 **먼저** 끝났습니다
   *   (1440 −58 · 1880 −105). Design 은 **+148**. 사장님이 짚으신 그 자리입니다.
   * ★ 옛 값은 지우지 않고 적어 둡니다: `max(100vh, calc(60vh + 30.52vw + 96px))`. */
  --끝배율: 0.8;                /* `new.js` 가 폭마다 다시 넣습니다. 없을 때의 값 */
  --무대: max(100vh, calc(60vh + 42.975vw * var(--끝배율) + 150px));
  /* ★ 옆 창 자리는 **다 펼친 뒤의 큰 창**을 기준으로 잡습니다 (Design 식) */
  --끝폭: calc(75vw * var(--끝배율));
  --왼끝: calc((100vw - var(--끝폭)) / 2);
  --옆폭1: max(150px, 11vw);
  --옆폭2: max(160px, 12.2vw);
  /* ★★ **위에 알림띠(44)+헤더(64)=108 이 있습니다.** Design 파일에는 그 위가 없어
   *   `절 = 무대 + 100` 이면 딱 100px 붙박입니다. 우리는 절이 108 아래에서 시작해
   *   그대로 두면 **208px** 붙박였습니다(재서 찾았습니다 — 150·200 에서 창이 멎었습니다).
   *   그래서 **108 을 뺍니다**: 108 + (무대 + 100 − 108) − (무대 − 109) − 109 = **100**. */
  /* ★★★ **붙박이 구간도 Design 식**입니다 (2026-09-13, ■29절 ⑦).
   *   Design: `pageH = heroH + thr` — 붙박이가 **thr 만큼** 돌고 풀립니다.
   *     thr = max(60, 60 + (W − 1440) × 0.25) → 1440 **60** · 1880 **170** · 폰 100
   *   `--구간` 은 `new.js` 가 폭을 재서 넣습니다.
   * ★ 앞서는 **100px 고정**이라 1440 에서 걸음 100 일 때 창이 아직 안 올라가
   *   시안보다 **40px 아래**에 있었습니다 (시안 500 · 우리 540 — 재서 잡았습니다).
   * ★ 옛 값은 지우지 않고 적어 둡니다: `+ 100px`. */
  height: calc(var(--무대) + var(--구간, 60px) - 108px);
  position: relative; display: block; padding: 0;
  /* ★★★ **화면 끝까지 폅니다.** 부모(`.판`)의 여백 때문에 무대가
     왼 64 · 폭 1312 로 좁아져, 옆 창이 시안(33px)보다 **64px 안쪽**에 섰고
     오른쪽 창은 화면 밖으로 31px 나갔습니다 — 재서 찾았습니다.
     시안의 `s1L = 폭 × 33/1440` 은 **화면 폭** 기준입니다. */
  max-width: none; width: 100vw;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* ★★★ 무대는 **헤더 아래(109px)에 붙습니다.** `top: 0` 이면 스크롤할 때
   무대가 헤더와 **같이 올라가** 큰 창 끝자리가 시안(140)이 아니라 80 이 됐습니다 —
   재서 찾았습니다. 시안은 세 장을 각각 틀에 그려 헤더가 늘 위에 있습니다. */
.히어로D .무대 {
  /* ★ 무대 높이 = 절 높이 − 100 − 헤더(109). 그래야 붙박이가 딱 100px 입니다 */
  position: sticky; top: 109px; height: calc(var(--무대) - 109px);
  overflow: hidden; display: block;
}

/* ══ 바탕 — **위에서 아래로 흰색 → 옅은 회색** (2026-09-12, ■11절 ④) ══
 *
 * 저쪽 — 「Attio 는 위에서 아래로 흰색 → 옅은 **파랑**으로 번집니다
 *   (위 #FFFFFF · 가운데 #DCE4FA · 아래 #C5D2FB 언저리).
 *   사장님은 같은 결을 **회색으로** 원하십니다. **파랑기 없이** 흰색에서 옅은 회색으로.
 *   **창이 그 위에 흰색으로 떠서 도드라지는 것이 핵심**입니다.
 *   회색 값은 **우리 회색 열둘에서** 고르십시오. **새 색을 만들지 마십시오.**」
 *
 * ★ Attio 의 세 자리를 회색 열둘로 옮긴 것 —
 *     위 `#FFFFFF` → **#ffffff** (그대로)
 *     가운데 `#DCE4FA` → **#e4e7ec** (열둘 중 넷째)
 *     아래 `#C5D2FB` → **#cad0d9** (열둘 중 다섯째)
 *   셋 다 **이미 쓰는 색**입니다. 새로 만든 것이 없습니다.
 * ★ 시안의 「회색 타원 하나」는 아래쪽만 옅게 깔려 **거의 흰색**이었습니다 —
 *   창이 안 도드라졌습니다. 사장님이 보시고 짚으셨습니다.
 */
.히어로D .히어로바탕 {
  /* ★★★ **`bottom: 0` 으로 되돌렸습니다** (2026-09-13, ■29절 ⑦).
   *
   *   28절 ⑤ 에서 배경을 창 아래까지 늘리려고 높이를
   *   `calc(507px + var(--창폭) * 0.573 - var(--머리높이) + 24px)` 로 바꾸고
   *   `--창폭` 을 조상으로 올렸습니다. **그 둘이 큰 창을 키워 옆 창과 겹치게 했습니다.**
   *   사장님이 캡처로 짚어 주셨고, 히어로는 Design 으로 넘어갔습니다.
   *
   * ★ 배경이 창 아래에서 끊기는 것은 **아직 안 고쳤습니다** — Design 것을 옮기며 봅니다.
   *   그때 잰 값은 적어 둡니다: 1440 에서 **160px**, 1880 에서 **214px** 이 배경 밖.
   * ★ 못 쓰게 된 계산식도 지우지 않고 여기 남깁니다 — 다시 필요할 수 있습니다. */
  /* ★★ **꼭대기부터** 칠합니다 (2026-09-13, ■29절 ⑦).
       앞서는 `top: var(--머리높이)` 라 배경 윗변이 **217 에 멎어** 있었습니다
       (무대가 109 에서 시작 + 머리높이 108). Design 은 **0 에서** 시작합니다.
       옛 값: `top: var(--머리높이)`. */
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: linear-gradient(to bottom, #ffffff 0%, #e4e7ec 58%, #cad0d9 100%);
  pointer-events: none; z-index: 0;
}

/* ── 글 ─────────────────────────────────────────────
   시안: top = hdr + 72 · 투명도 = 1 − 진행 · 가운데 · 클릭 안 받음 */
.히어로D .히어로글 {
  /* ★ 무대가 **헤더 아래(109px)에서 시작**합니다 — 재서 알았습니다.
     시안의 `titleT = hdr + 72` 는 **틀 맨 위 기준**이라, 우리는 hdr 를 빼고 72 만 씁니다.
     안 빼면 제목이 109px 아래에 섭니다(첫 판에서 그랬습니다). */
  position: absolute; left: 0; right: 0; top: 72px;
  /* ★ Design: 제목은 **앞 절반**에 사라지며 **60px 위로** 갑니다 —
     `titleOp = 1 − E(min(1, p×2))` · `titleY = −60 × E(min(1, p×2))`.
     `--제목진행` 은 `new.js` 가 넣습니다(굽이를 먹인 값). */
  opacity: calc(1 - var(--제목진행, 0));
  transform: translateY(calc(-60px * var(--제목진행, 0)));
  z-index: 4; pointer-events: none;
  padding: 0 12.5vw;            /* 시안 pad = 폭 × 0.125 */
  text-align: center; display: flex; flex-direction: column; align-items: center;
}
/* ★ 입력칸과 배지는 눌려야 합니다 — 글 전체가 pointer-events:none 이라 되돌립니다 */
.히어로D .입력틀, .히어로D .히어로배지 { pointer-events: auto; }

.히어로D .히어로배지 {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border: 1px solid #e4e7ec; border-radius: 999px; background: #fff;
  font-size: 15px; line-height: 1.5; color: #3b3f46;
}
.히어로D .배지NEW { font-family: "JetBrains Mono", ui-monospace, monospace;
                    font-size: 13px; line-height: 1.5; color: #75777c; }
.히어로D .배지화살 { color: #98a0ab; }

/* 시안: h1 64px / 1.05 · 자간 −0.02em · 굵기 600 · 둘째 줄 #75777c */
.히어로D .약속 {
  margin-top: 24px; font-size: 64px; line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 600; color: #101112;
}
.히어로D .약속둘째 { color: #75777c; }
.히어로D .뒷받침 { margin-top: 24px; font-size: 19px; line-height: 1.4; color: #3b3f46; }

/* 시안: 입력칸 폭 704 · 높이 56 · 테두리 #cad0d9 · 둥글기 12 */
.히어로D .입력틀 {
  margin-top: 24px; width: 704px; max-width: 100%; height: 56px;
  background: #fff; border: 1px solid #cad0d9; border-radius: 12px;
  display: flex; align-items: center; padding: 0 8px 0 20px; text-align: left;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 6px 16px rgba(16,17,18,.06);
}
.히어로D .입력창 {
  /* ★★★ **글자 윗부분이 잘리고 있었습니다** (2026-09-13, 사장님 —
   *   「테두리가 아니고 입력칸 모서리가 아니고요 **글씨가 잘리잖아요 안에**」).
   *
   *   재 보니 — 칸 높이 **32px** · 줄 높이 **25.5px**(17 × 1.5) · `overflow: hidden`.
   *   한글은 글꼴 상자보다 **위아래로 더 나갑니다**(「달」의 ㄷ 윗획, 「빛」의 ㅂ).
   *   줄 높이로 자르면 그 윗부분이 깎입니다.
   *
   * ★★ **`scrollHeight` 로는 안 잡힙니다** — 저쪽 말대로 「재는 법으로는 안 잡히는」 것입니다.
   *   넘침 0 · 쪼개진 줄 0 으로 여러 판 통과했는데 **글자는 깎이고 있었습니다.**
   *   사장님이 확대해 보고 두 번 짚어 주셔서 잡았습니다.
   *
   * ★ 고친 것 — 줄 높이를 **1.8** 로 올리고(25.5 → 30.6) 칸 높이를 그만큼 둡니다.
   *   글자 크기는 **안 바꿉니다** — 시안 값 17px 그대로입니다.
   * ★ 옛 값은 지우지 않고 적어 둡니다: `line-height: 1.5`. */
  /* ★★★ **왼쪽 첫 획이 `overflow: hidden` 에 깎이고 있었습니다.**
   *   칸 왼쪽 경계와 글자 시작이 **같은 자리**라, 「달」의 ㄷ 왼쪽 세로획처럼
   *   경계에 딱 붙는 획이 안티에일리어싱 한 픽셀까지 잘렸습니다.
   *   8배로 찍어 보고서야 보였습니다 — **숫자로는 안 잡힙니다.**
   * ★ 칸에 왼쪽 **3px** 을 주고, 틀의 왼쪽 여백을 그만큼 줄입니다(20 → 17).
   *   **글자가 서는 자리는 그대로**입니다 — 숨 쉴 자리만 생깁니다. */
  /* ★ 줄 높이는 **시안 값 1.5 그대로**입니다. 1.8 로 올려 봤지만 8배로 찍어 보니
       달라지는 것이 없어 되돌렸습니다 — 시안 값을 까닭 없이 바꾸지 않습니다.
     ★ 대신 **위아래로 숨 쉴 자리**를 둡니다(칸 높이 34 · 줄 25.5). 빠듯하면
       한글 윗획이 `overflow: hidden` 에 깎일 자리가 생깁니다.
     ★ 왼쪽 3px 도 남깁니다 — 글자가 서는 자리는 **20px 그대로**로 맞췄습니다. */
  flex: 1; font-size: 17px; line-height: 1.5; color: #101112;
  border: 0; outline: 0; background: transparent; resize: none;
  padding: 3px 0 3px 3px; margin-left: -3px;
  white-space: nowrap; overflow: hidden;
  min-height: 34px; box-sizing: border-box;
}
/* 시안의 마이크 — 지름 40(폰 44) 검은 동그라미 */
.히어로D .마이크단추 {
  width: 40px; height: 40px; border-radius: 50%; background: #202124; border: 0;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  cursor: pointer; padding: 0;
}
.히어로D .마이크몸 { width: 7px; height: 12px; border-radius: 4px; background: #fff; display: block; }
/* ★★★ 「만들기 시작」을 **되살렸습니다** (사장님 결정, 2026-09-12, ■11절 ⑤).
     「엔터만으로는 **폰에서 손님이 어떻게 시작하는지 모르고**, 「3초 안에 뭘 하는
     곳인지」도 단추가 있어야 보입니다.」
   ★ 자리는 **입력칸 안 오른쪽, 마이크 옆**입니다 — 칸 밖에 큰 단추로 붙이면
     시안 결이 흐트러집니다(지시).
   ★ 이것은 **시안과 일부러 다르게 한 것**입니다 — `docs/시안D-일부러다르게.md`. */
.히어로D .보내기 {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 40px; padding: 0 16px; margin-right: 6px;
  border: 0; border-radius: 10px; background: #202124; color: #fff;
  font-size: 15px; line-height: 1.5; white-space: nowrap; cursor: pointer;
}
.히어로D .보내기:disabled { background: #cad0d9; cursor: default; }
.히어로D .글자수 { display: none; }
@media (max-width: 860px) {
  /* 폰에서 누르는 것은 44px 이상 */
  .히어로D .보내기 { height: 44px; padding: 0 14px; }
}
.히어로D .크레딧안내 { margin-top: 12px; font-size: 15px; line-height: 1.5; color: #646b76; }

/* ── 창들 ───────────────────────────────────────── */
.히어로D .창들 { position: static; }

/* 큰 창 — 시안: 폭 75% · 높이 폭×0.573 · 위 544 → 140 · scale 1 → 0.62 */
/* ══ 큰 창 — **Design 의 새 움직임 파일 그대로** (2026-09-12, ■12절) ══
 *
 * ★★★ 사장님이 Design 에 「Attio 랑 다르다」고 다시 시키셔서 나온 값입니다.
 *   사장님 — 「**너무 잘나왔어 속도고 위치고 크기고**」. 그대로 옮깁니다.
 *
 *   Design 의 `renderVals()` 에서 읽은 것 —
 *     · `T1 = Math.round(H * 0.245)`  ← 화면 높이의 **24.5%**. 앞서는 440 고정이었습니다
 *     · `winS = 1 - 0.29 * eW`        ← **75% → 53%** (주석: Attio 1000/1886)
 *     · `transform-origin: 50% 0`     ← 위 가운데. 우리와 같습니다
 *     · `T0 = 616` · 폭 `W × 0.75` · 높이 `winW × 0.573` — 그대로입니다
 *
 * ★★ **앞서 제가 넣은 Attio 4.1% 는 뺍니다.** 사장님이 「안 작아진다」고 하셔서
 *   제가 실측으로 4.1% 를 넣었는데, Design 이 **0.29(29%)** 로 냈습니다.
 *   저쪽 지시 — 「다르면 **Design 것을 따르십시오**」.
 * ★ 무대가 헤더(109) 아래라 세로에서 109 를 뺍니다.
 */
.히어로D .가운데창 {
  /* ══════════════════════════════════════════════════════════════
   * ★★★ **Design 이 고친 것을 그대로 옮겼습니다** (2026-09-13, ■17절)
   *   `Makebee D 히어로-움직임.dc.html` (2026-09-13 판 · 23,844자)
   *   — 소스에서 베끼지 않고 **진짜 브라우저로 열어 스크롤해 재서** 옮겼습니다.
   *
   * ★ 저쪽이 짚은 덫 — 「Design 파일의 `scale` 이 미리보기 액자용이라 진짜 브라우저에서
   *   늘 1 인 일이 앞서 있었습니다」 → **이번엔 진짜입니다.**
   *   1880 에서 창 높이가 810 → 575 로 줄었습니다(×0.710). 재서 확인했습니다.
   *
   * ── Design 이 고친 것 ──────────────────────────────────
   *   끝나는 자리 T1  화면 높이의 **60%**   (우리가 정했던 값: 24.5%)
   *   옆창1 윗변      화면 높이의 **51%**   (우리가 정했던 값: 15%)
   *   옆창2 윗변      **51% + 330px**       (우리가 정했던 값: 65%)
   *   옆창3 윗변      화면 높이의 **64%**   (우리가 정했던 값: 28%)
   *   ★ 저쪽 지시: 「우리가 앞서 정한 값과 다르면 **Design 것을 따르십시오.**
   *     지우지 말고 나란히 적어 두십시오.」 — 옛 값은 위에 적었습니다.
   *
   * ── 그대로인 것 ────────────────────────────────────────
   *   시작 자리 616 · 배율 1 → 0.71 · 창 폭 75vw · 높이 폭×0.573
   *   옆창 폭 10.5vw · 가로 7.4 / 9.3 / 82.7vw · 시차 0.25 / 0.40 / 0.55
   *   따라오기 τ=400ms · 곡선 cubic-bezier(.45, 0, .15, 1)
   *
   * ★★ Design 이 **아래가 잘리게** 두었습니다 — 파일 주석 그대로:
   *   「아래가 잘려 있고, **계속 내리면 밑에서 올라와요**」.
   *   Attio 도 같습니다(100px 자리에서 아랫변이 화면의 121%).
   *   저쪽 ④ 의 「창 아랫변이 화면 높이보다 작은가」와 **부딪히는 자리**라
   *   고치지 않고 보고에 적어 물었습니다.
   *
   * ★ 무대가 헤더(109) 아래에서 시작하므로 세로에서 **109 를 뺍니다.**
   * ══════════════════════════════════════════════════════════════ */
  position: absolute; left: 12.5vw;
  /* ★★★ `--창폭` 은 **여기(가운데창 자신)에** 둡니다 — 2026-09-13 에 조상
       (`.히어로.히어로D`)으로 올렸다가 **큰 창이 커져 옆 창과 겹쳤습니다.**
       사장님이 캡처로 짚어 주셨고, ■29절 ⑦ 에서 되돌렸습니다.
     ★ 옮기기 전에 **옮겨도 되는 값인지** 먼저 재야 했습니다. */
  --창폭: 75vw;
  width: var(--창폭); height: calc(var(--창폭) * 0.573);
  /* ★★★ **T0 도 Design 식으로** (2026-09-13, ■29절 ⑦).
   *   Design: `T0 = max(titleTop + titleH + 130, H × 0.585)`
   *     1100 위 — titleTop 180 · titleH 280 → **max(590px, 58.5vh)**
   *     768~1100 — titleTop 164 · titleH 270 → **max(564px, 58.5vh)** (아래 미디어 쿼리)
   *   열어서 잰 값과 맞습니다 — 1440·1880 에서 590 · 959 에서 564.
   * ★ 옛 값은 지우지 않고 적어 둡니다: `616px` 고정. */
  /* ★★★ **입력칸과 큰 창 사이를 130px 로** (2026-09-13, 사장님 — 「입력창하고
   *   큰 작업창 사이 조금 더 띄워줘」).
   *   Design 식이 노리는 값이 `입력칸 밑 + 130` 인데, 우리 제목·입력칸 높이가
   *   Design 계산과 달라 실제로는 **106px** 이었습니다(재서 잡았습니다).
   *   우리 입력칸 아랫변이 **484** 라 `484 + 130 = 614` 로 둡니다.
   * ★ 옛 값은 지우지 않고 적어 둡니다: `max(590px, 58.5vh)` (사이 106). */
  --T0: max(614px, 58.5vh);
  top: calc((var(--T0) - 109px) - var(--진행) * (var(--T0) - 60vh));
  /* 1 → 0.71 */
  /* ★★★ **줄어드는 양을 Attio 결로 낮춥니다** (2026-09-13, ■28절 ④).
   *
   *   사장님 — 「큰 창 아래가 **화면 중간에서 끝나** 흰 여백이 넓게 남습니다.」
   *
   *   재 보니 까닭은 **창이 줄어드는 양**이었습니다 —
   *     우리 1440: 619 → 450 → 440 (걸음 0·300·600)
   *     Attio 1440: 619 → **619 → 619**  (안 줄어듭니다)
   *     우리 1880: 808 → 588 → 575 · Attio 1880: 797 → **797 → 797**
   *   Attio 는 창 높이를 **그대로 두고 위로만** 올립니다. 우리만 29% 줄여서
   *   그만큼 **아래가 비었습니다**(걸음 600 에서 우리 420 · Attio 301 — **119px 더**).
   *
   * ★★ 0.29 는 **시안(Design 파일)을 잰 값**이지 Attio 를 잰 값이 아니었습니다.
   *   CLAUDE.md 에 이미 적혀 있습니다 — 「큰 창이 줄어드는 양: 제가 잰 것 36% ·
   *   **진짜 4.1%(`matrix(0.958624)`)**」. 그 값으로 맞춥니다.
   * ★ 옛 값은 지우지 않고 여기 적어 둡니다: `scale(calc(1 - 0.29 * var(--진행, 0)))`. */
  /* ★★★ **끝 배율은 Design 값**입니다 (2026-09-13, ■29절 ⑦).
   *   Design: `endR = lerp(W, 768, 1100, 0.80, 0.60)` · `endS = endR / 0.75`
   *     → 1100 위 **0.80** · 959 **0.913** · 768 **1.067**
   *   `--끝배율` 은 `new.js` 가 폭을 재서 넣습니다 — CSS 의 `calc` 로는
   *   `vw` 에서 무차원 수를 못 만듭니다.
   * ★ 우리가 재서 적어 둔 값은 **0.959**(Attio 실측 `matrix(0.958624)`)였습니다.
   *   사장님이 「design 대로 옮겨」라 하셔서 Design 값으로 갑니다. 지우지 않고 적어 둡니다.
   * ★ 그 앞의 옛 값도 그대로 둡니다: `scale(calc(1 - 0.29 * var(--진행, 0)))`. */
  /* ★ 끌어 옮긴 양(`--끌X/Y`)을 **앞에** 둡니다 — 뒤에 두면 scale 이 그 값까지 줄입니다. */
  transform: translate(var(--끌X, 0px), var(--끌Y, 0px))
             scale(calc(1 - (1 - var(--끝배율, 0.8)) * var(--진행, 0)));
  transform-origin: 50% 0;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.08);
  z-index: 3; display: flex; flex-direction: column; text-align: left;
}
.히어로D .판머리줄 {
  height: 40px; flex: none; display: flex; align-items: center; gap: 6px;
  padding: 0 14px; border-bottom: 1px solid #e4e7ec; background: #fafafb;
}
.히어로D .판점 { width: 10px; height: 10px; border-radius: 50%; background: #e4e7ec; }
.히어로D .판주소 {
  margin: 0 auto; font-size: 13px; line-height: 1.5; color: #646b76;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 6px; padding: 2px 12px;
}
/* 시안: 속은 35fr 65fr */
.히어로D .판속 { flex: 1; display: grid; grid-template-columns: 35fr 65fr; min-height: 0; }
.히어로D .판왼쪽 {
  padding: 16px; border-right: 1px solid #e4e7ec;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.히어로D .칸이름 { font-size: 13px; line-height: 1.5; color: #98a0ab; margin: 0; }
.히어로D .흉내내말 {
  background: #f3f4f6; border-radius: 12px; padding: 10px 14px;
  font-size: 15px; line-height: 1.5; color: #101112;
}
.히어로D .걸음상자 {
  border: 1px solid #e4e7ec; border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px;
}
.히어로D .걸음줄 {
  display: flex; gap: 10px; align-items: center; font-size: 15px; line-height: 1.5;
  color: #98a0ab;
}
.히어로D .걸음표 {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1.5; background: transparent;
  border: 1px solid #cad0d9; color: #fff;
}
/* 끝난 걸음 — 검게 채우고 체크 */
.히어로D .걸음줄.됨 { color: #101112; }
.히어로D .걸음줄.됨 .걸음표 { background: #202124; border: 0; }
.히어로D .걸음줄.됨 .걸음표::after { content: "\2713"; }
/* 지금 걸음 — 테두리만 굵게 */
.히어로D .걸음줄.지금 { color: #101112; }
.히어로D .걸음줄.지금 .걸음표 { border: 2px solid #101112; }

.히어로D .시계줄 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.5; color: #646b76; margin: 0;
}
.히어로D .시계 { font-family: "JetBrains Mono", ui-monospace, monospace; }
.히어로D .다되면 {
  margin-top: auto; border-top: 1px dashed #cad0d9; padding-top: 12px; display: grid; gap: 8px;
}
.히어로D .단추둘 { display: flex; gap: 8px; }
.히어로D .히어로고치기, .히어로D .히어로올리기 {
  flex: 1; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1.5; cursor: pointer;
}
.히어로D .히어로고치기 { border: 1px solid #e4e7ec; background: #fff; color: #242629; }
/* 시안은 아직 못 누르는 꼴(#cad0d9)로 그렸습니다 — 다 되면 검게 만듭니다 */
.히어로D .히어로올리기 { border: 0; background: #cad0d9; color: #fff; }
.히어로D .히어로올리기.다됨 { background: #202124; }

.히어로D .판오른쪽 { background: #f3f4f6; padding: 20px; min-width: 0; overflow: hidden; }

/* 작업창 속 결과물 — ★ 시안이 **코드로 그린 것 그대로**입니다.
   저쪽 지시 ②: 「진짜 캡처로 바꾸지 마십시오.」 */
.히어로D .카페미리 {
  background: #FBF6EE; border: 1px solid #e4e7ec; border-radius: 10px; overflow: hidden;
  height: 100%; font-size: 13px; line-height: 1.5;
}
.히어로D .카페머리 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #E8DCC8; background: #FBF6EE;
}
.히어로D .카페이름 { font-weight: 600; color: #3D2B1F; font-size: 15px; line-height: 1.5; }
.히어로D .카페메뉴 { display: flex; gap: 12px; color: #7A6350; }
.히어로D .카페예약 { background: #3D2B1F; color: #FBF6EE; border-radius: 999px; padding: 1px 10px; }
.히어로D .카페띠 {
  padding: 18px 16px 14px;
  background: linear-gradient(135deg, #F2C9B0, #E8A87C 55%, #D98E64); color: #3D2B1F;
}
.히어로D .카페큰말 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.히어로D .카페작은말 { margin-top: 4px; color: #5C4636; }
.히어로D .카페칸셋 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 16px 0; }
.히어로D .카페칸둘 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px; }
.히어로D .카페칸둘.아래 { padding: 0 16px 14px; }
.히어로D .카페칸 { border-radius: 8px; padding: 10px; }
.히어로D .카페칸 .칸제목 { font-weight: 600; }
.히어로D .카페칸.초록 { background: #DCE8D5; color: #2F4A2B; } .히어로D .카페칸.초록 .칸값 { color: #5A7355; }
.히어로D .카페칸.노랑 { background: #F6E3A1; color: #5A4A12; } .히어로D .카페칸.노랑 .칸값 { color: #85712C; }
.히어로D .카페칸.보라 { background: #E3D5EE; color: #4A3A5C; } .히어로D .카페칸.보라 .칸값 { color: #6F5C85; }
.히어로D .카페칸.파랑 { background: #CFE3EA; color: #24485A; } .히어로D .카페칸.파랑 .칸값 { color: #4F7285; }
.히어로D .카페칸.분홍 { background: #F3D6D6; color: #6A2F2F; } .히어로D .카페칸.분홍 .칸값 { color: #9A5555; }
.히어로D .카페칸.모래 { background: #EADFD0; color: #4A3A2A; } .히어로D .카페칸.모래 .칸값 { color: #7A6350; }
.히어로D .카페칸.청록 { background: #D9E6E1; color: #2C4A42; } .히어로D .카페칸.청록 .칸값 { color: #587A70; }
.히어로D .카페발 {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; border-top: 1px solid #E8DCC8; color: #7A6350;
}
.히어로D .카페전화 { background: #3D2B1F; color: #FBF6EE; border-radius: 999px; padding: 1px 10px; }

/* ── 옆 창 셋 ─────────────────────────────────────
   시안: 폭 = 화면 폭 × 0.222 · 투명도 = 진행 그대로 ·
         왼쪽 둘은 x −160 → 0, 오른쪽 하나는 +160 → 0.
   시안 자리: s1L = 폭×33/1440 (= 2.29vw) · s1T = hdr+60 ·
              s2T = hdr+310 · s3L = 폭 − sideW − 폭×33/1440 · s3T = hdr+110 */
/* ★★★ 옆 창 폭을 **11.8vw** 로 줄였습니다 (2026-09-12, 사장님 ㉡ · Attio 실측).
     시안은 0.222 였는데 **Attio 를 1880 에서 100px 자리에서 재니 0.117~0.119**,
     곧 **절반**이었습니다. 큰 창 폭의 **18~19%** 입니다(우리는 48% 였습니다).
   ★ 사장님 — 「옆 창이 커서 **헤더 아래 빈자리까지 올라와 있고**, 조금만 더 내리면
     **위쪽이 잘려 안 보입니다.** Attio 는 옆 창이 큰 창보다 **확실히 작고**,
     **큰 창 윗변보다 아래에서 시작**합니다.」
   ★★ 「시안은 한 걸음짜리 그림이라 중간을 모릅니다. **실측을 따르십시오.**」(지시) */
/* ══ 옆 창 — **Design 값 그대로** ══
 * `sideW = W × 0.17` · 틈 `sGap = 35`
 * `sL = pad − sGap − sideW` (왼) · `sRL = pad + winW + sGap` (오른)
 * `s1T = T1 + 40` · `s2T = T1 + 40 + 214 + 24` · `s3T = T1 + 80`
 *   → **셋 다 큰 창 끝자리(T1 440)보다 아래**입니다 (사장님 ㉡ 그대로).
 * 시차 — `q(d) = E((p − d) / 0.45)`, `d` 는 **0.25 · 0.40 · 0.55**
 *   → 옆 창 셋이 **한꺼번에 안 튀고 조금씩 늦게** 뜹니다.
 * 옆으로 미는 양 — `∓120 × (1 − q)`
 */
.히어로D .옆창 {
  /* ★ 사장님이 좋다 하신 판의 폭으로 되돌렸습니다 — Design 값 **W × 0.105**.
     Attio 실측 11.8vw 는 지우지 않고 여기 적어 둡니다(그 판에서 옆 창이 커 보였습니다). */
  /* ★★★ **좁아져도 안 줄입니다 — Attio 결입니다** (2026-09-13, ■28절 ①).
   *   `10.5vw` 만 두었더니 900px 화면에서 옆 창이 **94px** 까지 줄어
   *   속 글자가 「오늘 / 얼 / 마 / 벌 / 었 / 어 / 요?」처럼 **세로로 쪼개졌습니다**
   *   (900 에서 쪼개진 줄 **38개**).
   *
   * ★★ Attio 를 열 폭에서 재 보니 **옆 창 크기를 안 줄입니다** —
   *   768 에서도 폭이 **360px** 이고, 대신 **가운데로 모여 겹치고** 화면 밖은 잘립니다.
   *   (`docs/28-attio-폭마다.json`)
   *   우리는 **비례로 줄여서** 눌렸습니다. 그것이 글자가 쪼개진 까닭입니다.
   *
   * ★ 그래서 **시안 1440 의 폭(151px)을 바닥**으로 둡니다. 1440 위로는 여태대로 `10.5vw`.
   *   넘치는 것은 `body { overflow-x: clip }` 이 잘라 냅니다 — 가로 막대는 안 생깁니다.
   * ★ **폭마다 따로 맞춘 것이 아닙니다** — `max()` 한 줄이라 안 잰 폭에서도 맞습니다. */
  /* ★★★ **Design 새 판 값** (2026-09-13, ■29절 ⑦) — `max(150px, 11vw)`.
       옛 값은 지우지 않고 적어 둡니다: `max(10.5vw, 151px)`. 거의 같습니다. */
  position: absolute; width: var(--옆폭1);
  /* ★ 투명도와 옆으로 미는 양은 **`new.js` 가 창마다 따로** 넣습니다 —
     Design 이 셋에 **시차**(0.25 · 0.40 · 0.55)를 두기 때문입니다. 한 식으로는 못 씁니다.
     ★★ 이 두 줄이 **한 번 통째로 빠졌습니다** — 블록을 새로 쓰면서 나머지를 잃었고,
       옆 창이 처음부터 또렷하게 보였습니다. 눌러 보고 잡았습니다. */
  opacity: var(--옆창투명, 0);
  /* ★ Design 새 판 — 옆으로 미는 양이 **∓40**(옛 ∓120)이고
       **배율 .92 → 1** 이 새로 들어왔습니다. 살짝 커지며 들어옵니다. */
  /* ★ 옆 창은 **자기 끌린 양 + 큰 창 끌린 양**을 같이 받습니다 (Design 식 그대로 —
       `s1X = −40 × (1 − q) + dg[1].x + dg[0].x`). 큰 창을 끌면 옆 창도 따라갑니다. */
  transform: translate(calc(var(--옆창밀기, 0px) + var(--끌X, 0px) + var(--큰끌X, 0px)),
                       calc(var(--끌Y, 0px) + var(--큰끌Y, 0px)))
             scale(var(--옆창배율, 0.92));
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.1);
  z-index: 4; text-align: left;
}
/* ★★★ 옆 창은 **큰 창과 겹치면 안 됩니다** (사장님 ㉡ — 「마감 보고 카드가
   큰 창 뒤에 가려 글자가 안 보입니다. Attio 는 옆 창 셋이 다 읽힙니다」).

   ★ 큰 창은 다 펼친 자리에서 폭 75% × 0.62 = **화면의 46.5%** 이고 가운데 섭니다 —
     곧 왼쪽 끝이 화면의 **26.75%**, 오른쪽 끝이 **73.25%** 입니다.
   ★ 옆 창 폭이 22.2% 이므로, 왼쪽 옆 창은 **2.29% ~ 24.49%** 에 서면
     큰 창까지 **2.26%(1440 에서 33px)** 가 남습니다. 안 겹칩니다.
   ★★ **중간 걸음에서도 안 겹쳐야** 합니다. 큰 창은 진행 0 에서 75% 라
     왼쪽 끝이 12.5% 까지 내려옵니다 — 그때 옆 창이 보이면 겹칩니다.
     그래서 **옆 창은 큰 창이 거의 다 줄어든 뒤에 뜹니다**(아래 투명도). */
/* ★ 자리는 **큰 창에서 거꾸로 셉니다** — 틈 30px 을 지키려면 그래야 합니다.
     큰 창은 다 펼친 자리에서 폭 `75vw × 0.62 = 46.5vw`, 가운데니까
     왼쪽 끝이 **26.75vw**, 오른쪽 끝이 **73.25vw** 입니다.
     · 왼쪽 옆 창: 오른쪽 끝 = 26.75vw − 30px → left = 26.75vw − 30px − 11.8vw
     · 오른쪽 옆 창: left = 73.25vw + 30px
   ★★ **윗변은 큰 창 윗변보다 아래**입니다 (사장님 지시).
     큰 창은 무대 기준 **331px**(=440−109) 이므로 그보다 아래에 둡니다.
     Attio 는 36~91px 아래였습니다 — 우리는 **36 · 300 · 70** 으로 둡니다. */
/* ★ 자리는 Design 셈 그대로입니다 (무대가 헤더 109 아래라 세로에서 109 를 뺍니다) —
     왼: `12.5vw − 35px − 17vw` = `-4.5vw − 35px`  ← 화면 왼쪽 밖으로 걸칩니다
     오: `12.5vw + 75vw + 35px` = `87.5vw + 35px`   ← 오른쪽 밖으로 걸칩니다
   ★★ **밖으로 걸치는 것이 맞습니다** — Attio 도 그렇습니다. 다 보이게 안으로 들이면
     큰 창에 가려 되레 안 보입니다.
   ★ 투명도와 옆으로 미는 양은 `new.js` 가 창마다 따로 넣습니다(시차). */
/* ★★ **Design 의 새 값**입니다 (2026-09-12) — 앞서와 다릅니다.
     옆 창 폭  `W × 0.105`   (앞서 0.17 이었습니다 — 사장님 「옆 창이 너무 크다」)
     왼1 `W × 0.074` · 왼2 `W × 0.093` · 오른 `W × 0.827`
     위1 `H × 0.15` · 위2 `H × 0.65` · 위3 `H × 0.28`
   ★ 세로는 **화면 높이에 딸린 값**으로 바뀌었습니다(앞서는 px 고정).
     무대가 헤더(109) 아래라 109 를 뺍니다.
   ★ 투명도와 옆으로 미는 양은 `new.js` 가 창마다 따로 넣습니다(시차 0.25 · 0.40 · 0.55). */
/* ══ 옆 창 셋 — **Design 이 고친 자리**입니다 (2026-09-13, ■17절) ══
 *
 * ★ 진짜로 열어 재서 옮겼습니다 — 1880 에서 501 / 622 / 628 (화면 980).
 *     옆창1  화면 높이의 **51%**        (우리가 정했던 값: 15%)
 *     옆창2  **51% + 330px**            (우리가 정했던 값: 65%)
 *     옆창3  화면 높이의 **64%**        (우리가 정했던 값: 28%)
 *   저쪽 지시대로 **Design 것을 따릅니다.** 옛 값은 지우지 않고 위에 적었습니다.
 *
 * ★ 가로는 그대로입니다 — 7.4 / 9.3 / 82.7vw (Design 도 같습니다).
 *   앞 판에서 큰 창에 딸리게 했던 것은 **되돌렸습니다** — Design 은 고정입니다.
 * ★ 무대가 헤더(109) 아래라 세로에서 109 를 뺍니다.
 */
/* ★★★ **Design 새 판 — 다 펼친 큰 창을 기준으로 잡습니다** (2026-09-13, ■29절 ⑦).
 *   열어서 잰 값과 식이 딱 맞습니다 (걸음 600) —
 *     1440  #1 왼 45 위 −70 · #2 왼 87 위 365 · #3 왼 1237 위 32
 *     1880  #1 왼 84 · #2 왼 122 · #3 왼 1589
 * ★ 높이 상한 **150 / 240 / 280** 이 새로 들어왔습니다 — 우리 것은 492 / 234 / 483 으로
 *   길어서 큰 창 밑변보다 아래까지 내려왔습니다.
 * ★ 옛 값은 지우지 않고 적어 둡니다:
 *     `.옆창1 { left: 7.4vw; top: calc(51vh - 109px) }`
 *     `.옆창2 { left: 9.3vw; top: calc(51vh - 109px + 330px) }`
 *     `.옆창3 { left: 82.7vw; top: calc(64vh - 109px) }`
 * ★ `transform-origin` 도 시안 그대로 — 왼쪽 둘은 오른쪽 끝, 오른쪽 하나는 왼쪽 끝에서 커집니다. */
/* ★ 끌 수 있는 것은 **손 모양**으로 알립니다. `new.js` 가 `.끌수있음` 을 붙입니다. */
.히어로D .끌수있음 { cursor: grab; touch-action: none; }
.히어로D .끄는중 { cursor: grabbing; user-select: none; }

.히어로D .옆창1 {
  width: var(--옆폭1); max-height: 150px;
  left: max(16px, calc(var(--왼끝) - 85px - var(--옆폭1)));
  top: calc(60vh - 70px - 109px);
  transform-origin: 100% 50%;
}
.히어로D .옆창2 {
  /* ★ Design 식 그대로 — `min(240, max(120, T1 + endH − s2T − 12))`.
       큰 창 밑변보다 **위에서 끝나게** 잡는 식입니다.
       1440 → 120 · 1880 → 240. 고정 240 으로 두면 1440 에서 큰 창 밑으로 내려갑니다. */
  width: var(--옆폭2);
  max-height: min(240px, max(120px, calc(42.975vw * var(--끝배율) - 377px)));
  left: max(16px, calc(var(--왼끝) - 25px - var(--옆폭2)));
  top: calc(60vh + 365px - 109px);
  transform-origin: 100% 50%;
}
.히어로D .옆창3 {
  width: var(--옆폭1); max-height: 280px;
  left: min(calc(100vw - 16px - var(--옆폭1)), calc(var(--왼끝) + var(--끝폭) + 85px));
  top: calc(60vh + 32px - 109px);
  transform-origin: 0 50%;
}

.히어로D .옆창머리 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid #e4e7ec;
  font-size: 13px; line-height: 1.5; color: #646b76;
}
.히어로D .옆창표 { background: #f3f4f6; color: #646b76; border-radius: 999px; padding: 1px 8px; }
.히어로D .들어갈것 { font-size: 13px; line-height: 1.6; color: #646b76; }
.히어로D .찍을자리 { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #98a0ab; }

/* ── 1920 ─────────────────────────────────────── */
/* ★★★ **여기가 위 값을 덮고 있었습니다** (2026-09-13, ■17절).
 *   1800 넘는 폭에서 절 1220 · 무대 931 로 못박혀, 붙박이가 **180px** 돌았습니다.
 *   그래서 걸음 150~300 에서 창이 **멎어 있었고** Design 과 갈렸습니다.
 *   Design 은 폭에 따로 값을 두지 않습니다 — `innerH` 한 식이 세 폭을 다 냅니다.
 *   그래서 이 덮개를 **걷습니다.** 옛 값은 지우지 않고 여기 적어 둡니다:
 *     `--펼침: 180px` · `height: calc(1040px + 180px)` · `.무대 { height: calc(1040px - 109px) }`
 *   ★ 「옛 규칙이 시안을 덮는 자리는 그 자리에서 고치십시오」 — 사장님이 두신 예외입니다.
 */

/* ── 폰 390 ────────────────────────────────────
   시안: 옆 창 없음 · 큰 창 크기 그대로(scale 1) ·
         제목이 **먼저** 사라지고 그 뒤에 창이 올라옴 */
@media (max-width: 599px) {
  .히어로.히어로D { height: calc(1000px + var(--펼침)); }
  .히어로D .무대 { height: calc(1000px - 109px); }
  .히어로D .옆창 { display: none; }
  .히어로D .히어로글 {
    top: 36px; padding: 0 16px;
    opacity: max(0, calc(1 - 2 * var(--진행)));     /* 제목이 먼저 사라집니다 */
  }
  .히어로D .약속 { margin-top: 16px; font-size: 40px; line-height: 1.12; }
  .히어로D .뒷받침 { margin-top: 16px; font-size: 17px; line-height: 1.5; }
  .히어로D .입력틀 { margin-top: 16px; width: calc(100vw - 32px); }
  .히어로D .마이크단추 { width: 44px; height: 44px; }   /* 폰에서 누르는 것은 44 이상 */
  .히어로D .가운데창 {
    --창폭: calc(100vw - 32px);
    left: 16px; transform: none; height: 560px;
    /* 폰은 진행 0.5 부터 움직입니다 — 제목이 사라진 뒤입니다(시안 pw 식) */
    top: calc(369px - max(0, (var(--진행) - .5) * 2) * 338px);   /* 478−109 */
  }
  .히어로D .판속 { grid-template-columns: 1fr; }
  .히어로D .판오른쪽 { padding: 12px; }
}

.히어로D .창속 { padding: 14px 16px; font-size: 13px; color: var(--ink-soft); }

/* ══ 옆 창 셋의 **살아 움직이는 속** — Design 인라인 값 그대로 (2026-09-12) ══
 *
 * ★ 값은 Design 의 `Makebee D 히어로-움직임.dc.html` 에서 한 줄씩 읽어 옮겼습니다.
 *   짐작으로 정한 것이 없습니다.
 * ★ `.히어로D` 안에서만 걸어, 다른 화면의 같은 이름과 안 부딪힙니다.
 */
.히어로D .옆창1 .창속 { padding: 12px 14px; display: grid; gap: 8px;
                        font-size: 15px; line-height: 1.5; }
.히어로D .옆창1 .쪽지 { justify-self: start; background: #fff; border: 1px solid #e4e7ec;
                        border-radius: 12px 12px 12px 2px; padding: 8px 12px;
                        color: #101112; max-width: 92%; transition: opacity .4s; }
.히어로D .옆창1 .쪽지.내쪽지 { justify-self: end; background: #f3f4f6; border: 0;
                               border-radius: 12px 12px 2px 12px; }

/* 마감 보고 — 검은 창 */
.히어로D .옆창2 { background: #101010; color: #fff; border: 0;
                  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.18); }
.히어로D .옆창2 .옆창머리 { border-bottom: 1px solid rgba(255,255,255,.12);
                            color: #98a0ab; gap: 8px; }
.히어로D .옆창2 .옆창머리표 { font-family: "JetBrains Mono", ui-monospace, monospace; }
.히어로D .옆창2 .창속 { padding: 12px 14px; font-size: 15px; line-height: 1.5;
                        color: #cad0d9; display: grid; gap: 6px; }
.히어로D .마감줄 { display: flex; justify-content: space-between; gap: 8px;
                   border-bottom: 1px dashed rgba(255,255,255,.14); padding-bottom: 6px; }
.히어로D .마감이름 { color: #98a0ab; }
.히어로D .마감값 { color: #fff; text-align: right; }

/* 주문 — 새것이 위로 쌓입니다 */
.히어로D .옆창3 .창속 { padding: 12px 14px; display: grid; gap: 6px;
                        font-size: 15px; line-height: 1.5; color: #242629; }
.히어로D .옆창3 .주문줄 { display: grid; gap: 4px; border: 1px solid #e4e7ec;
                          border-radius: 8px; padding: 8px 10px; background: #fff;
                          justify-content: initial; }
.히어로D .주문무엇 { color: #101112; }
.히어로D .주문아래 { display: flex; justify-content: space-between; align-items: center;
                     font-size: 13px; line-height: 1.5; color: #646b76; }
.히어로D .주문때 { font-family: "JetBrains Mono", ui-monospace, monospace; }
.히어로D .주문표 { background: #202124; color: #fff; border-radius: 6px; padding: 0 8px; }
.히어로D .옆창점 { width: 8px; height: 8px; border-radius: 50%;
                   background: #202124; display: inline-block; }

/* 「진짜 화면을 찍어 넣을 자리」 — 시안이 **작은 글씨 한 줄**로만 남겼습니다 */
.히어로D .옆창 .찍을자리 { font-size: 13px; line-height: 1.5; color: #98a0ab;
                           margin: 0; padding: 0; border: 0; background: none; text-align: left; }
.창이름 { margin-left: 6px; font-size: 13px; color: var(--ink-faint); }
.쪽지 { max-width: 86%; padding: 8px 11px; border-radius: 12px;
        background: var(--bg-soft); color: var(--ink); line-height: 1.5; }
.쪽지 + .쪽지 { margin-top: 8px; }
/* ★ 히어로와 기능 쪽 어디에도 **노랑은 없습니다.** 카톡처럼 보이는 창도 예외가 아닙니다. */
.내쪽지 { margin-left: auto; }
.히어로D .검은창속 { padding: 14px 16px; font-size: 12.5px; line-height: 1.6;
                     color: #e8eaee; font-family: ui-monospace, Menlo, Consolas, monospace; }
.히어로D .검은줄 { margin-top: 8px; color: #8b9099; }
.히어로D .검은줄.띄움 { margin-top: 14px; color: #e8eaee; }
/* ★ 검은 창의 `›` 도 **노랑빛을 뺐습니다** — 검은 바탕 위에서 노랑으로 읽힙니다. */
.히어로D .꺾쇠 { color: #9aa0a8; }
.주문줄 { display: flex; justify-content: space-between; gap: 10px; font-size: 15px;
          padding: 9px 0; border-bottom: 1px dashed var(--border); color: var(--ink); }
.주문줄.끝줄 { border-bottom: 0; }
.때 { color: var(--ink-faint); }

/* 가운데 큰 창 — 진짜 판이 들어갑니다.
   ★★ `.히어로판` 의 `max-width: 940px` 를 **이깁니다** — 그 값 탓에 창이
     화면 폭의 65.3% 로 나왔습니다(재서 알았습니다). 시안 D 는 **73.5%** 입니다. */
/* ★★ 여기도 **비율**입니다 — 이 규칙이 뒤에 있어 위의 75% 를 이겼고,
   그래서 1920px 화면에서 55.1% 로 나왔습니다(재서 알았습니다). */
/* ★ 옛 규칙입니다 — 시안 D 에서는 `.가운데창` 이 폭을 정합니다.
     폰에서 이것이 `width: min(75vw,…)` 로 덮어써 큰 창이 화면 밖(-161)으로
     나갔습니다 — 재서 찾았습니다. **지우지 않고 시안 값에 맞춥니다.** */
.히어로D .가운데창.히어로판 { width: var(--창폭); max-width: none; margin: 0; }
.히어로D .가운데창 .판속, .히어로D .가운데창 .진짜판속 { height: calc(100% - 44px); }
/* ★★★ 큰 창 속은 **왼쪽 대화 35% · 오른쪽 미리보기 65%** 입니다 —
   우리 작업창의 실제 모양 그대로이고, 창 폭 **전체**를 씁니다.
   ★ 한때 틀 하나만 넣고 격자를 껐더니 판이 가운데 몰려 **양옆이 비어** 보였습니다
     (사장님 「옆이 빈다」, 2026-09-12). 격자를 되살리고 **칸마다 꽉** 채웁니다. */
.히어로D .가운데창 .진짜판속 {
  display: grid; grid-template-columns: 35% 65%; height: calc(100% - 44px);
  background: var(--white);
}
.히어로D .가운데창 .판오른쪽 { position: relative; background: var(--bg-soft2); }
/* 미리보기 칸을 **꽉** 채웁니다 — 칸 사이 여백만 둡니다 */
.히어로D .가운데창 .진짜판틀 { width: 100%; height: 100%; max-width: none; margin: 0; }

/* 왼쪽 대화 칸 — 걸음 일곱 */
.히어로D .가운데창 .판왼쪽 { gap: 0; padding: 18px 18px 16px; overflow: hidden; }
.칸이름 { margin: 0; font-size: 13px; color: var(--ink-faint); }
.칸이름.걸린때 { margin-top: auto; }
.히어로D .흉내내말 { max-width: 100%; margin: 8px 0 4px; }
/* ★ 14px 을 쓰면 **글자 크기 층이 하나 늘어납니다**(그물이 9가지로 셌습니다).
   있는 층(15px)으로 맞춥니다. */
.걸음줄 { margin-top: 9px; font-size: 15px; line-height: 1.5;
          padding-left: 20px; position: relative; }
.걸음줄::before { position: absolute; left: 0; top: 0; }
.걸음줄.됨 { color: var(--ink-soft); }
.걸음줄.됨::before { content: "✓"; color: #4a8a5c; }
.걸음줄.지금 { color: var(--ink); font-weight: 600; }
.걸음줄.지금::before { content: "·"; }
.걸음줄.남음 { color: var(--ink-faint); }
.걸음줄.남음::before { content: "·"; }

/* 예시 칩 · 말로 하기 · 시작 카드 — 히어로 **아래** 한 줄 */
.히어로밑 {
  max-width: 1280px; margin: 0 auto; padding: 8px 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.히어로밑 .시작카드 { width: 100%; max-width: 420px; }
.히어로밑 .예시목록 { justify-content: center; }

/* ★★ 움직임 줄이기 — **처음부터 펼친 채** 보여 드립니다. */
@media (prefers-reduced-motion: reduce) {
  .히어로.히어로D { height: auto; }
  .히어로D .무대 { position: static; height: auto; }
  .히어로D .창들 { transform: none; }
  .히어로D .히어로글 { transform: none; opacity: 1; }
  .히어로D .가운데창 { transform: translateX(-50%) scale(.7); }
  .히어로D .옆창 { opacity: 1; }
}

/* ══ 히어로 D — 폰 ═══════════════════════════════════════
 * ★★ **폰에서는 창이 작아지지 않습니다.** 가운데 창이 작아지는 까닭은
 *   **옆 창 셋이 들어올 자리를 만들려는 것**인데 폰에는 옆 창이 없습니다.
 *   줄기만 하고 얻는 것이 없어 글자만 안 읽힙니다 — 목업에서 354px 이
 *   227px(64%)까지 줄고 있었고, 사장님이 PDF 를 보시고 짚어 주셨습니다.
 *   **올라오는 움직임만** 남깁니다.
 */
@media (max-width: 860px) {
  /* ★ 폰도 같은 결 — 여유는 화면의 3분의 1 남짓입니다 */
  .히어로.히어로D { height: calc(100vh + 260px); }
  .히어로D .기둥 { padding: 28px 18px 0; }
  .히어로D .창들 { height: 430px; margin-top: 40px;
                   transform: translateY(calc(var(--진행) * -150px)); }
  /* ★ 여기도 `.히어로판` 을 붙여야 위의 `min(1058px, …)` 를 이깁니다 */
  .히어로D .가운데창.히어로판 { width: calc(100vw - 36px); max-width: none;
                                 height: 400px; border-radius: 14px;
                                 transform: translateX(-50%); }
  /* ★ 폰에서는 왼쪽 대화 칸을 접고 **만들어진 것만** 보여 줍니다 —
     두 칸이면 글자가 안 읽힙니다. */
  .히어로D .가운데창 .진짜판속 { grid-template-columns: 1fr; }
  .히어로D .가운데창 .판왼쪽 { display: none; }
  .히어로D .옆창1, .히어로D .옆창2, .히어로D .옆창3 { display: none; }
  .번짐 { top: -200px; width: 760px; height: 760px; }
  /* ★ 폰 제목 **34px** — 기본값 `clamp(40px, …)` 이면 360폭에서 **다섯 줄**이
     되고 「가게」 같은 두 글자 줄이 생깁니다. 목업에서 재서 고른 값입니다.
     ★★ 선택자를 `.히어로.히어로D` 로 **붙여 씁니다** — `.히어로D .약속` 만으로는
       뒤에 나오는 `.히어로 .약속` 과 특이도가 같아서 **뒤엣것에 집니다.**
       한 번 그렇게 써서 폰이 계속 다섯 줄이었습니다. */
  /* ★ 폰 제목 **32px**. 목업(34px · 시스템 글꼴)은 두 줄인데 새 쪽은 **세 줄**입니다 —
     Pretendard 가 더 넓고 굵기도 800 이라 「가게 홈페이지가 나와요.」가
     324px 에 안 들어갑니다. 30px 까지 내려도 세 줄이라 **여기서 멈췄습니다** —
     더 줄이면 제목이 작아집니다.
     ★ 잣대는 「**한 글자만 떨어지는 줄 0**」이고 그건 지켜집니다 — 「나와요.」는 세 글자입니다. */
  /* ★ 줄 간격은 **다섯 층뿐**입니다(1 · 1.2 · 1.4 · 1.5 · 1.7) — 1.18 을 썼다가
     그물이 「일곱 가지」로 셌습니다. 층 안으로 맞춥니다. */
  .히어로.히어로D .약속 { font-size: 32px; letter-spacing: -.5px; line-height: 1.2; }
  .히어로.히어로D .뒷받침 { font-size: 16px; }
  .히어로.히어로D .영문받침 { font-size: 15px; }
  .히어로밑 { padding: 8px 18px 0; }
}

/* ── 히어로 ───────────────────────────────────────────── */
/* ★★ 히어로 (2026-09-10, 시안 값) ─────────────────────
     두 칸(글 + 폰)에서 **가운데 한 칸**으로 바꿨습니다.
     한글이 맨 위 제일 큰 글자, 영문이 그 아래 작은 줄 —
     사장님이 「영어로 나온다, 한글로 해줘」로 정하신 순서입니다. */
.히어로 {
  max-width: 1280px; margin: 0 auto; padding: 32px 24px 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
}
.히어로글 { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.히어로 .약속 {
  margin: 0; font-size: clamp(40px, 6vw, 64px); line-height: 1.2;
  font-weight: 800; letter-spacing: normal;
  /* ★ 920 이면 세 줄이 되어 255px 을 먹습니다. 넓혀 **두 줄**로 만들면
       첫 화면에 결과물 띠가 걸칩니다 — 사장님이 짚으신 자리입니다. */
  max-width: 1180px;
}
/* ★★ 2026-09-10 — **영문이 맨 위**로 다시 갔습니다 (사장님 지시).
     그래서 옷도 서로 바꿔 입습니다 —
       `.영문약속`  Baloo 2, 72px, 먹빛   (h1 자리)
       `.한글받침`  Pretendard, 28px, 보조 (설명 줄 자리)
     ★ 이름은 옛것(`.약속`·`.뒷받침`)을 그대로 둡니다 — 다른 규칙 여럿이
       그 이름을 쓰고 있어서, 이름을 바꾸면 그 전부를 손대야 합니다. */
.히어로 .약속.영문약속 {
  font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-size: clamp(40px, 6vw, 64px); font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.2; color: var(--ink);
}
.히어로 .뒷받침 {
  display: block; margin: 0;
  font-size: clamp(19px, 2.2vw, 26px); font-weight: 600; color: var(--ink-soft);
  max-width: 900px;
}
/* ★★ 입력칸 **둘을 같은 폭**으로 둡니다 (저쪽 지시 ①, 2026-09-12).
   잣대는 **큰 작업창 폭(1058px)의 3분의 2** — `1058 × 2/3 ≒ 704px` 입니다.
   히어로와 맨 아래 마무리 입력칸이 **한 기둥**으로 서야 합니다.
   폰은 그대로 폭을 꽉 씁니다. */
.히어로 .입력틀 { width: 100%; max-width: 704px; margin: 4px 0 0; }
.히어로 .예시 { width: 100%; }

/* ★★ 히어로 작업창 (2026-09-10) ─────────────────────────
     사장님 「너무 크다」 · 「그냥 대화창 같다」.
     그전에는 캡처 한 장을 1.62 비율로 걸어 **769px** 였고, 그래서
     결과물 띠가 첫 화면에서 658px 아래에 있었습니다.
     이제 DOM 으로 지어 **높이를 우리가 정합니다** — 띠 윗부분이 걸치게. */
.히어로판 {
  width: 100%; max-width: 940px; margin: 14px auto 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 48px -26px oklch(20% 0.01 90 / 0.26);
  text-align: left;
}
.판머리줄 {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--ink);
}
.판점 { width: 8px; height: 8px; border-radius: 50%; background: var(--bg-soft2); }
.판이름흉내 { margin-left: 8px; font-weight: 700; }
.판저장 { color: var(--ink-faint); font-size: 13px; }

/* 작업창과 같은 짜임 — 왼쪽 35% 대화, 오른쪽 65% 미리보기 */
/* ★ 높이를 우리가 정합니다 — 「첫 화면에 띠가 걸치게」가 잣대입니다.
     900 창에서 띠가 보이는 값으로 재서 맞췄습니다. */
.판속 { display: grid; grid-template-columns: 35% 65%; height: 238px; }
.판왼쪽 {
  display: flex; flex-direction: column; gap: 7px;
  padding: 14px 16px; border-right: 1px solid oklch(84% 0.006 80);
  min-width: 0;
}
.흉내단계 { display: flex; align-items: center; gap: 7px; }
.흉내동글 {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--bg-soft2); color: var(--ink-faint);
}
.흉내이름 { font-size: 13px; color: var(--ink-faint); white-space: nowrap; }
/* ★ 셋을 **겹쳐** 놓습니다. 나란히 두면 안 보이는 것도 자리를 먹어
     글이 오른쪽으로 밀리고 줄이 갈립니다 (2026-09-10 캡처에서 봤습니다). */
.흉내걸림 {
  position: relative; height: 16px; margin: 2px 0 0;
  font-size: 13px; color: var(--ink-faint);
}
.흉내걸림 > span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.흉내말 { margin-top: auto; display: flex; justify-content: flex-end; }
/* ★ 손님이 적은 말풍선 — **옅은 회색**입니다. 노랑은 넷 자리에만 씁니다
   (로고 bee·벌 · 「만들기 시작」 · 「카카오로 시작하기」 · 요금 추천 알약). */
.흉내내말 {
  max-width: 92%; padding: 7px 11px; border-radius: 12px;
  background: var(--bg-soft2); color: var(--ink);
  font-size: 13px; line-height: 1.5; word-break: keep-all;
}
.흉내칩 { display: flex; gap: 5px; flex-wrap: wrap; }
.흉내칩 span {
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-soft);
}
.판오른쪽 { display: flex; flex-direction: column; background: var(--bg-soft2); min-width: 0; }
.흉내미리위 { padding: 8px 14px; border-bottom: 1px solid var(--border); flex: none; }
.흉내주소 {
  display: inline-block; background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--ink-soft);
}
.흉내미리속 {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.흉내빈말 { margin: 0; padding: 0 20px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.흉내막대 { display: flex; flex-direction: column; gap: 8px; width: 62%; }
.흉내막대 i {
  height: 9px; border-radius: 999px; background: var(--bg-soft);
  border: 1px solid var(--border); display: block;
}
.흉내막대 i:nth-child(1) { width: 100%; }
.흉내막대 i:nth-child(2) { width: 78%; }
.흉내막대 i:nth-child(3) { width: 55%; }
.흉내미리속 img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ── 세 컷 — 4초마다 (2026-09-10) ───────────────────────
     한 장씩 갈아 끼우지 않고 **같은 작업창 안의 것들이** 켜지고 꺼집니다.
     그래야 「여기서 이렇게 만들어지는구나」가 보입니다. */
.컷1만, .컷2만, .컷3만 { opacity: 0; animation: 컷보이기 12s infinite; }
.컷1만 { animation-delay: 0s; }
.컷2만 { animation-delay: 4s; }
.컷3만 { animation-delay: 8s; }
@keyframes 컷보이기 { 0%,1% { opacity: 0; } 3%,31% { opacity: 1; } 33%,100% { opacity: 0; } }
/* 미리보기 속은 셋이 겹쳐 놓입니다 */
.흉내미리속 > .컷1만, .흉내미리속 > .컷2만, .흉내미리속 > .컷3만 {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.흉내미리속 > .흉내막대 { flex-direction: column; }
.흉내주소 > span { position: absolute; }
.흉내주소 { position: relative; min-width: 118px; height: 15px; }
/* 걸음 동그라미가 컷마다 켜집니다 */
/* ★★ 한 요소에 애니메이션 **하나만** 겁니다.
     `.컷2지금 .컷3끝` 처럼 둘을 같이 걸었더니 뒤엣것이 앞엣것을 덮어
     컷2 에서 ③이 안 켜졌습니다 — 캡처에서 잡았습니다.
     그래서 걸음마다 **제 이름의 애니메이션 하나**를 씁니다. */
.흉내동글 { animation: 12s infinite; }
.흉내동글.걸음1, .흉내동글.걸음2 { animation-name: 걸음_둘째부터끝; }
.흉내동글.걸음3 { animation-name: 걸음_둘째지금셋째끝; }
.흉내동글.걸음4 { animation-name: 걸음_셋째만끝; }
@keyframes 걸음_둘째부터끝 {
  0%,32% { background: var(--bg-soft2); color: var(--ink-faint); }
  34%,100% { background: var(--ink); color: var(--white); }
}
@keyframes 걸음_둘째지금셋째끝 {
  0%,32% { background: var(--bg-soft2); color: var(--ink-faint); }
  /* ★ 걸음 표시는 **회색·검정**입니다 — 노랑은 넷 자리에만 씁니다. */
  34%,64% { background: var(--bg-soft2); color: var(--ink); }
  66%,100% { background: var(--ink); color: var(--white); }
}
@keyframes 걸음_셋째만끝 {
  0%,64% { background: var(--bg-soft2); color: var(--ink-faint); }
  66%,100% { background: var(--ink); color: var(--white); }
}
/* ★ 움직임 줄이기면 ③ 하나로 멈춥니다 (저쪽 지시). */
@media (prefers-reduced-motion: reduce) {
  .컷1만, .컷2만 { animation: none; opacity: 0; }
  .컷3만 { animation: none; opacity: 1; }
  .흉내동글 { animation: none; background: var(--ink); color: var(--white); }
}
@media (max-width: 860px) {
  .판속 { grid-template-columns: 1fr; height: auto; }
  .판왼쪽 { border-right: 0; border-bottom: 1px solid var(--border); }
  .판오른쪽 { height: 190px; }
}

/* ★★ 기능 페이지 다섯 (2026-09-10, 시안 화면 4·5·6·7·8) ──────
     랜딩의 `.절` 옷을 그대로 물려받습니다 — 같은 결로 읽혀야 합니다. */
.기능쪽 { align-items: flex-start; padding-top: 0; }
.가운데넓게 { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.기능머리 { padding: 72px 0 8px; text-align: center; }
.기능머리 .절라벨 { margin-bottom: 12px; }
.기능제목 {
  margin: 0 0 14px; font-size: clamp(40px, 5vw, 64px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.2;
}
.기능설명 { margin: 0; font-size: clamp(17px, 2vw, 23px); font-weight: 600; color: var(--ink-soft); }
/* ★ 2026-09-10: 영문이 h1 로 맨 위, 한글 제목이 그 아래입니다 (사장님 지시). */
.기능제목.영문약속 {
  font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  letter-spacing: -0.01em; line-height: 1.2;
}
.기능제목.한글제목 {
  /* ★ 40px 아래라 자간은 0 입니다 — 부모(.기능제목)의 마이너스를 끊습니다. */
  letter-spacing: normal;
  font-size: clamp(22px, 2.8vw, 40px); font-weight: 700; color: var(--ink-soft);
  margin: 0 0 12px;
}
/* 옛 이름. 기능 페이지에서는 이제 안 쓰지만 다른 데서 부를 수 있어 남깁니다. */
.기능영문 {
  margin: 14px 0 0; font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-size: 19px; font-weight: 600; color: var(--ink-faint);
}
.가운데글 { text-align: center; margin: 0 auto 24px; }
.큰단추 { min-height: 52px; padding: 0 28px; font-size: 17px; }
.마무리절 .큰단추 { display: inline-flex; }
.마무리절 { text-align: center; }
/* 마무리 단추는 가운데입니다 — 인라인이라 글 흐름에 밀려 오른쪽으로 갔습니다. */
.마무리절 .큰단추 { margin: 8px auto 0; }

/* 결과물 보기 — 걸음 셋 */
.세컷절 { margin-top: 96px; }
.세컷들 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.한컷그림 {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; aspect-ratio: 1.24; display: flex; align-items: center; justify-content: center;
}
.한컷그림 img { width: 100%; height: 100%; object-fit: fill; display: block; }
.빈작업창.작음 { font-size: 15px; padding: 12px 18px; }
.컷번호 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; margin: 18px 0 10px;
  border: 1px solid var(--border); font-size: 15px; color: var(--ink-faint);
}
.컷제목 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.컷설명 { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 860px) {
  .세컷들 { grid-template-columns: 1fr; }
  .기능머리 { padding-top: 48px; }
}

/* ★★ 사장님 화면 절 — **흰 바탕**입니다 (시안 C 확정, 2026-09-11).
   C 는 **흰 바탕만** 쓰고 색 판을 두지 않습니다. 그전에는 이 절이 통째로
   꿀빛이라 랜딩에서 **제일 큰 노랑 덩어리**였습니다.
   가르는 것은 색이 아니라 **옅은 회색 바탕과 위아래 여백**입니다. */
.사장님절 { margin-top: 130px; background: var(--bg-soft); padding: 90px 24px; }
.사장님속 { max-width: 1280px; margin: 0 auto; text-align: center; }
.사장님절 .꿀글 { color: var(--ink-faint); }
.사장님절 .가운데제목 { margin: 10px 0 12px; }
.사장님절 .절설명 { max-width: none; margin: 0 auto 40px; }
.사장님카드들 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.사장님카드 { margin: 0; }
.사장님카드 img {
  width: 100%; aspect-ratio: 1.208; object-fit: fill; display: block;
  border-radius: 16px; background: var(--white);
  box-shadow: 0 20px 44px -18px oklch(20% 0.01 90 / 0.25);
}
.사장님카드 figcaption {
  margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--ink-soft);
}
@media (max-width: 860px) {
  .사장님카드들 { grid-template-columns: 1fr; }
  .사장님절 { padding: 64px 20px; margin-top: 64px; }
}

.히어로그림 { display: flex; justify-content: center; }
.폰틀 {
  width: 250px; border-radius: 34px; border: 8px solid var(--ink); background: var(--ink);
  overflow: hidden; box-shadow: 0 30px 60px -20px oklch(20% 0.01 90 / 0.35);
}
.폰귀 { height: 18px; display: flex; align-items: center; justify-content: center; }
.폰귀 span { width: 44px; height: 4px; border-radius: 2px; background: var(--ink-soft); }
.폰틀 img { width: 100%; height: 480px; object-fit: cover; object-position: top center; display: block; }

/* ── 결과물 띠 — 랜딩의 주인공 ────────────────────────── */
@keyframes 띠흐름 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ★ 띠 윗부분이 **첫 화면에 걸쳐야** 합니다 (2026-09-10, 사장님).
     100px 이면 900 창에서 띠가 210px 아래에 있어 안 보였습니다. */
/* ★ 띠 이름줄 윗부분이 **첫 화면에 걸쳐야** 합니다 (2026-09-10, 사장님).
     100px 이던 것을 줄이고 히어로도 같이 조여 900 창에서 걸치게 맞췄습니다.
     `loop/.히어로재기` 로 재면서 맞춘 값이라 눈대중이 아닙니다. */
.띠절 { margin-top: 40px; }
.띠이름 {
  max-width: 1120px; margin: 0 auto; padding: 0 24px 20px;
  font-size: 15px; font-weight: 700; color: var(--ink-faint); letter-spacing: normal;
}
.띠겉 { overflow: hidden; padding: 8px 0; }
.띠 { display: flex; gap: 20px; width: max-content; animation: 띠흐름 34s linear infinite; }
.띠 img {
  height: 330px; object-fit: cover; object-position: top center;
  background: var(--white); border-radius: 16px; border: 1px solid var(--border); flex-shrink: 0;
}
.띠 img.세로 { width: 250px; }
.띠 img.가로 { width: 500px; }

/* ── 절 셋 ────────────────────────────────────────────── */
.절 {
  max-width: 1120px; margin: 110px auto 0; padding: 0 24px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center;
}
.절.뒤집기 { grid-template-columns: 1.2fr 0.8fr; }
.절글 { display: flex; flex-direction: column; gap: 14px; }
.절라벨 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-faint); }
/* ★ 시안 층 — 절 제목 52px (2026-09-10). 28px 이던 것을 올렸습니다.
     아임웹 조사에서 「전문적으로 보이는 것」의 절반이 글자 위계였습니다. */
.절제목 { margin: 0; font-size: clamp(26px, 4.2vw, 52px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.절설명 { margin: 0; font-size: clamp(17px, 2vw, 23px); font-weight: 600; color: var(--ink-soft); line-height: 1.7; max-width: 560px; }

.브라우저틀 {
  border-radius: 14px; border: 1px solid var(--border); overflow: hidden;
  box-shadow: 0 20px 44px -18px oklch(20% 0.01 90 / 0.25); background: var(--white);
}
.브라우저머리 {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
}
.점셋 { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.주소줄 {
  margin-left: 8px; flex: 1; font-size: 13px; color: var(--ink-faint);
  background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px;
}
.브라우저틀 img { width: 100%; height: 340px; object-fit: cover; object-position: top center; display: block; }

/* ★★ `cover` 를 걷었습니다. (2026-09-10)
     높이를 320px 로 못박고 `cover` 를 걸면 **CSS 가 크롭을 정합니다** —
     기능 페이지 첫 절에서 화면 캡처 둘이 좌우로 잘려 나갔습니다.
     우리 캡처는 칸 비율에 맞춰 **미리 잘라** 올린 것이라 그대로 넣으면 됩니다.
     (「그림이 잘렸으면 CSS 인지 내 파일인지부터 가른다」 — CLAUDE.md) */
.절그림 img {
  width: 100%; height: auto; object-fit: contain;
  background: var(--white); border-radius: 18px; border: 1px solid var(--border);
  box-shadow: 0 20px 44px -18px oklch(20% 0.01 90 / 0.25); display: block;
}
.절그림.둘 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start;
}
.절그림.둘 img { border-radius: 16px; }

/* ── 이렇게 됩니다 ────────────────────────────────────── */
.어떻게절 { max-width: 1120px; margin: 120px auto 0; padding: 0 24px; }
.가운데제목 { margin: 0 0 48px; font-size: clamp(26px, 3.7vw, 52px); font-weight: 800; letter-spacing: -0.02em; text-align: center; }
.세컷 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
/* ★ 이름을 `과정컷` 으로 갈랐습니다 (2026-09-10).
     `.컷` 은 히어로가 쓰던 이름이라 `position:absolute` 가 걸려
     이 절의 셋이 한 자리에 포개졌습니다. 흔한 이름은 부딪힙니다. */
.과정컷 { display: flex; flex-direction: column; gap: 14px; }
/* 숫자를 꿀색으로 채우지 않습니다 — 강조색을 늘리지 않으려고요. */
.컷번호 {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; color: var(--ink-soft);
}
.과정컷 h4 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: normal; }
.과정컷 p { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* ── 요금 ─────────────────────────────────────────────── */
.요금절 { max-width: 1120px; margin: 120px auto 0; padding: 0 24px; }
.값주석 { margin: 0 0 8px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.요금절 .가운데제목 { margin-bottom: 40px; }
.요금들 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.요금칸 {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: 18px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px;
}
.많이 {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-size: 13px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 14px; white-space: nowrap;
}
.요금이름 { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.요금값 { font-size: 26px; font-weight: 800; letter-spacing: normal; }
/* ★★ 「부가세 별도」는 **값 옆에 작게** 답니다 (2026-09-11, 저쪽 지시 ⑦).
   값보다 크면 값이 안 읽히고, 없으면 받는 돈이 달라 보입니다.
   ★ 줄을 안 바꿉니다 — 값과 **한 덩이**로 읽혀야 「이 값에 붙는 말」이 됩니다. */
.요금값 .부가세 {
  margin-left: 6px; font-size: 13px; font-weight: 600;
  color: var(--muted, #8a8681); letter-spacing: 0; white-space: nowrap;
}
/* ★ 실제 내는 값. 어르신 손님이 결제 화면에서 놀라지 않게 **여기서 미리** 보여 드립니다. */
.요금덧작게.실제값 { color: var(--ink-soft, #55514c); font-weight: 700; }
.요금덧 { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
/* ★★ 크레딧 숫자는 **뒤로 물립니다** (2026-09-10, 저쪽 지시 3).
 *   손님은 「크레딧 100개」가 무슨 뜻인지 모르십니다. 그리고 저쪽(base44)과
 *   **크레딧 눈금이 달라서** 숫자를 앞에 내면 우리가 두세 배 비싸 보입니다
 *   (저쪽 100은 앱 뒤집기 25~30번, 우리 100은 앱 열 개쯤).
 *   그래도 **안 지우지는 않습니다** — 마이페이지와 작업창에 그 숫자가 뜼니다. */
.요금덧작게 { font-size: 13px; color: var(--ink-faint); margin-top: 2px; }
/* ★ 요금 카드 설명 (2026-09-10, 저쪽 지시 2).
     카드 높이를 맞춥니다 — 셋이 들쭉날쭉하면 고르기 어렵습니다. */
.요금들 { align-items: stretch; }
.요금줄들 {
  list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-faint);
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.요금줄들 li { font-size: 15px; line-height: 1.5; color: var(--ink-soft); padding-left: 18px; position: relative; }
/* ★★ 옛 노랑 점을 **껐습니다** (2026-09-12). 새 규칙이 ✓ 를 쓰는데
   이 점이 그 위에 겹쳐 노랑이 하나 더 보였습니다.
   ★ `::before` 는 `querySelectorAll` 로 안 잡혀 **그물이 못 봅니다** —
     찍어서 눈으로 보고 알았습니다. 색을 셀 때 못 보는 자리입니다. */
.요금줄들 li::before {
  content: "✓"; position: absolute; left: 0; top: 12px;
  width: auto; height: auto; border-radius: 0; background: none;
  color: var(--ink-soft);
}
.요금줄들 b { color: var(--ink); font-weight: 700; }
/* 가운데 칸만 살짝 도드라지게 — 「많이 쓰십니다」가 붙은 자리입니다. */
.요금칸.고른칸 { border-color: var(--ink-faint); }
/* ★ 자세한 견주기 (2026-09-10, 사장님 지시).
     접어 둡니다 — 처음 보시는 분께는 카드 셋이 먼저이고,
     자세히 보고 싶은 분만 펴시면 됩니다. */
.요금자세히 { max-width: 900px; margin: 28px auto 0; }
.요금자세히 > summary {
  list-style: none; cursor: pointer; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--honey-ink);
  padding: 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--white);
}
.요금자세히 > summary::-webkit-details-marker { display: none; }
.요금자세히 > summary::after { content: " ▾"; }
.요금자세히[open] > summary::after { content: " ▴"; }
.요금자세히 > summary:hover { border-color: var(--ink-faint); }
/* 표는 좁은 화면에서 제 칸 안에서만 굴러갑니다 — 쪽 전체가 옆으로 밀리면 안 됩니다. */
.요금표겉 { overflow-x: auto; margin: 22px 0 0; }
.요금표 { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.요금표 th, .요금표 td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line-faint); }
.요금표 thead th { font-size: 13px; font-weight: 700; color: var(--ink-faint); border-bottom: 1px solid var(--border); }
.요금표 tbody td:first-child { color: var(--ink-soft); }
.요금표 td.O { color: var(--honey-ink); font-weight: 700; }
.요금표 td.X { color: var(--ink-faint); }
.요금표 .ss { display: block; font-size: 13px; color: var(--ink-faint); font-weight: 400; }
.요금소제목 { margin: 34px 0 14px; font-size: 17px; font-weight: 700; text-align: center; }
.만들것들 { display: flex; flex-direction: column; gap: 12px; }
.만들묶음 {
  display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line-faint);
}
.만들이름 { font-size: 15px; font-weight: 700; color: var(--ink); }
.만들목록 { font-size: 15px; line-height: 1.7; color: var(--ink-soft); }
.요금뒤에 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.요금뒤에 li { font-size: 15px; line-height: 1.7; color: var(--ink-soft); padding-left: 18px; position: relative; }
.요금뒤에 li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--honey);
}
.요금뒤에 b, .만들묶음 b { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .만들묶음 { grid-template-columns: 1fr; gap: 4px; }
  .요금표 { font-size: 13px; }
}

.요금밑줄 {
  margin: 22px auto 0; max-width: 720px; text-align: center;
  font-size: 15px; line-height: 1.7; color: var(--ink-faint);
}
.요금밑줄 a { color: var(--honey-ink); font-weight: 600; }
@media (max-width: 860px) { .요금줄들 li { font-size: 15px; } }

/* ── 마무리와 발 ──────────────────────────────────────── */
.마무리절 {
  max-width: 1120px; margin: 120px auto 0; padding: 0 24px 110px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.아래입력틀 { width: 100%; max-width: 704px; margin-top: 14px; }   /* ★ 히어로와 같은 704px */

.발 {
  border-top: 1px solid var(--border); padding: 28px 24px;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-faint);
}
.발 b { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.발 a { color: var(--ink-faint); text-decoration: none; }
.발 a:hover { color: var(--ink); text-decoration: underline; }
.발 .아직 { color: var(--border); }

/* ── 내 판 카드 격자 (로그인 뒤) ──────────────────────── */
/* ★ 랜딩의 「내가 만든 것」 격자는 2026-09-11 에 걷혔습니다 (저쪽 지시 ⑨).
   아래 넷은 **안 쓰이지만 지우지 않습니다** — 보관함 카드(⑩)가 같은 결로 쓸 것이라
   그때 여기서 옮겨 갑니다. 다 쓰고 나면 그때 걷습니다. */
.내판칸 { max-width: 1120px; margin: 64px auto 0; padding: 0 24px; }
.내판격자 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
/* ★ 내 판 카드 (2026-09-10) — 그전에는 격자를 채우는 코드가 아예 없었습니다. */
/* ══ C — 랜딩 장점 펼치기 (2026-09-10, 저쪽 지시) ══════════════
 *
 * ★★ 움직임은 **절마다 달라야 합니다.** 다 같으면 배경이 되고,
 *   배경이 되면 아무도 안 봅니다. 속도도 다르게 둡니다.
 *   그리고 「움직이면 가벼워진다」는 잣대는 폐기됐습니다 (저쪽, 2026-09-10).
 *
 * ★ 움직임을 끄고 보시는 분(`prefers-reduced-motion`)에게는 **끝 모습**을
 *   바로 보여 드립니다 — 안 그러면 글자가 영영 투명한 채입니다.
 */

/* ── C-1 한 줄 넷 — 왼쪽부터 차례로 들어옵니다 ─────────── */
.한줄넷 {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px;
}
.한줄넷 li {
  font-size: 15px; color: var(--ink-soft); white-space: nowrap;
  opacity: 0; transform: translateY(6px);
  animation: 한줄들어옴 .5s cubic-bezier(.2,.7,.3,1) var(--늦게, 0s) forwards;
}
.한줄넷 li b { color: var(--ink); font-weight: 700; }
/* 낱말 사이 가운뎃점. 마지막 것 뒤에는 안 붙입니다. */
.한줄넷 li + li::before {
  content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-faint); vertical-align: middle; margin-right: 22px;
}
@keyframes 한줄들어옴 { to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  /* 폰에서는 넷을 한 줄에 못 넣습니다. 가운뎃점을 빼고 둘씩 놓습니다. */
  .한줄넷 { gap: 8px 16px; }
  .한줄넷 li { font-size: 13px; }
  .한줄넷 li + li::before { display: none; }
}

/* ── C-4 결과물 절마다 한 줄 ──────────────────────────── */
.절한줄 {
  margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--honey-ink);
}
.사장님절 .절한줄 { margin-top: 8px; }

/* ── C-5 머리 서랍 가름선 ─────────────────────────────── */
.서랍선 { display: block; height: 1px; margin: 6px 10px; background: var(--border); }


/* ── C-2 「사장님이 하실 게 없어요」 ─────────────────────
     값은 시안(MakebeeC.dc.html)을 **열어서 잰 것**입니다.
     ★ 기둥이 다르면 px 을 그대로 못 옮깁니다 — 시안 기둥은 1280,
       우리 절은 1120 이라 칸 비(0.85 : 1.15)와 gap 만 옮기고
       글자는 clamp 로 둡니다(시안도 clamp 였습니다). */
.없앰절 { margin-top: 130px; padding: 0 24px; }
.없앰속 {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 48px; align-items: center;
}
.없앰글 { display: flex; flex-direction: column; gap: 16px; }
.없앰받침 { margin: 0; font-size: clamp(19px, 2vw, 23px); font-weight: 600; color: var(--ink-soft); }
.없앰글 .절설명 { max-width: 420px; line-height: 1.7; }
.지움목록 { list-style: none; margin: 0; padding: 12px 0; display: flex; flex-direction: column; gap: 22px; }
.지움줄 {
  position: relative; display: inline-block; width: fit-content;
  font-size: clamp(19px, 2.1vw, 23px); font-weight: 700;
  animation: 지움글 6s ease var(--늦게, 0s) infinite;
}
/* 선은 글자 위를 왼쪽에서 오른쪽으로 그어집니다. */
.지움선 {
  position: absolute; left: 0; bottom: 48%; height: 2px; width: 0;
  background: var(--honey-ink);
  animation: 지움선긋기 6s ease var(--늦게, 0s) infinite;
}
@keyframes 지움선긋기 { 0% { width: 0 } 15%, 78% { width: 100% } 100% { width: 0 } }
@keyframes 지움글 {
  0%, 12%   { color: var(--ink); opacity: 1 }
  25%, 70%  { color: var(--ink-faint); opacity: .45 }
  90%, 100% { color: var(--ink); opacity: 1 }
}
@media (max-width: 860px) {
  .없앰절 { margin-top: 90px; }
  .없앰속 { grid-template-columns: 1fr; gap: 30px; }
  .지움목록 { gap: 16px; }
  .지움줄 { font-size: 19px; }
}

/* ── C-3 「말만 하면 다 합니다」 ─────────────────────────
     ★ 앞 절이 좌우 2단이라 여기는 **3단 카드**입니다.
       그리고 카드마다 움직임이 다릅니다 — 다 같으면 배경이 됩니다. */
.말만절 { margin-top: 130px; background: var(--bg-soft); padding: 100px 24px; }
.말만속 { max-width: 1120px; margin: 0 auto; }
.말만머리 { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.말만카드들 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.말만카드 {
  background: var(--white); border: 1px solid var(--border); border-radius: 20px;
  padding: 28px; display: flex; flex-direction: column; gap: 16px; min-height: 260px;
}
.말만라벨 { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
/* 말풍선 — 왼쪽 아래 모서리만 각져서 「말한 것」으로 읽힙니다. */
.말풍선칸 {
  background: var(--bg-soft2); border-radius: 16px 16px 16px 4px;
  padding: 12px 16px; font-size: 15px; align-self: flex-start; line-height: 1.5;
}
.말만글 { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* 첫 장 — 생각하는 점 셋 (1.2초) */
.생각점 { display: flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 8px; }
.생각점 span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint);
  animation: 생각점튐 1.2s ease var(--늦게, 0s) infinite;
}
@keyframes 생각점튐 {
  0%, 80%, 100% { transform: scale(1); opacity: .35 }
  40%           { transform: scale(1.35); opacity: 1 }
}

/* 둘째 장 — 체크가 하나씩 다시 들어옵니다 (5초) */
.체크줄 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.체크줄 li {
  font-size: 15px; color: var(--ink);
  animation: 체크들어옴 5s ease var(--늦게, 0s) infinite;
}
.체크줄 li::before { content: "✓ "; color: var(--honey-ink); font-weight: 700; }
/* ★ 기본이 **보임**입니다. 사라졌다 나타나게 하면 처음 여신 분이 빈 카드를 봅니다. */
@keyframes 체크들어옴 {
  0%, 12%, 100% { opacity: 1; transform: translateX(0) }
  4%            { opacity: .15; transform: translateX(-8px) }
}

/* 셋째 장 — 알림이 퍼지고 말풍선이 툭 (4.5초) */
.알림점 {
  position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: var(--honey-ink); align-self: flex-start; margin: 4px 0 0 4px;
}
.알림점 .퍼짐 {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--honey-ink);
  animation: 알림퍼짐 4.5s ease 0s infinite;
}
@keyframes 알림퍼짐 {
  0%        { transform: scale(.9); opacity: .55 }
  75%, 100% { transform: scale(1.9); opacity: 0 }
}
.말풍선칸.툭 { animation: 말풍선툭 4.5s ease 0s infinite; }
@keyframes 말풍선툭 {
  0%, 15%, 100% { opacity: 1; transform: translateY(0) scale(1) }
  5%            { opacity: .3; transform: translateY(6px) scale(.98) }
}
@media (max-width: 860px) {
  .말만절 { margin-top: 90px; padding: 64px 20px; }
  .말만머리 { margin-bottom: 30px; }
  .말만카드들 { grid-template-columns: 1fr; gap: 16px; }
  .말만카드 { min-height: 0; padding: 22px; }
}

/* ★ 절 제목 큰 판 — 두 새 절이 같이 씁니다. */
.절제목.큰 { font-size: clamp(26px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }

/* ★★ 움직임을 끄고 보시는 분께는 **끝 모습**을 바로 보여 드립니다.
     안 그러면 지움선이 영영 0폭이고 점이 영영 흐립니다. */
@media (prefers-reduced-motion: reduce) {
  .한줄넷 li, .지움줄, .지움선, .생각점 span, .체크줄 li, .알림점 .퍼짐, .말풍선칸.툭 {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .지움선 { width: 100%; }
  .알림점 .퍼짐 { opacity: .35; }
}

/* ★ A-8 빈 상태 (2026-09-10). 판이 하나도 없는 손님이 보시는 자리.
     격자 한가운데 한 줄. 격자가 `auto-fill` 이라 `grid-column: 1/-1` 로
     한 줄을 통째로 씁니다 — 안 그러면 240px 칸 하나에 갇혀 줄이 접힙니다. */
.내판빈말 {
  grid-column: 1 / -1; margin: 0; padding: 40px 0 48px;
  text-align: center; font-size: 17px; color: var(--ink-faint);
}
.내판카드 {
  /* ★ `position: relative` 는 **고치기 단추의 자리 기준**입니다 (2026-09-10).
       없으면 단추가 절 전체를 기준으로 떠서 엉뚱한 데 붙습니다. */
  display: block; position: relative; text-decoration: none; color: var(--ink);
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--white);
}

/* ★★ 고치기 단추 — 표지 **위 오른쪽**에 얹습니다. (2026-09-10, 저쪽 지시 4)
 *
 * ★ 늘 보입니다. 마우스를 올려야 나타나게 하면 **폰에서는 영영 못 봅니다** —
 *   손가락에는 hover 가 없습니다. 우리 손님 절반이 폰입니다.
 * ★ 표지 위에 얹히니 **바탕을 깔아** 어떤 사진 위에서도 글자가 읽히게 합니다. */
.내판고치기 {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  padding: 6px 12px; border-radius: 999px; border: 1px solid oklch(100% 0 0 / 0.5);
  background: oklch(20% 0.01 90 / 0.62); color: var(--white);
  font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
  backdrop-filter: blur(3px);
}
.내판고치기:hover { background: oklch(20% 0.01 90 / 0.82); }
.내판카드:hover { border-color: var(--ink-faint); }
.내판카드 img, .내판빈표지 {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center;
  display: block; background: var(--bg-soft2);
}
.내판이름 {
  display: block; padding: 12px 14px; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.내판 {
  position: relative; background: var(--white); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px;
}
.내판 .이름 { font-size: 17px; font-weight: 700; }
.내판 .때 { font-size: 13px; color: var(--ink-faint); }
.내판 .더보기 {
  position: absolute; top: 12px; right: 12px;
  border: none; background: none; cursor: pointer; font-size: 19px; color: var(--ink-faint);
  padding: 4px 8px; border-radius: 6px;
}
.내판 .더보기:hover { background: var(--bg-soft); }

/* 로그인 뒤에는 소개 절들을 감춥니다. 이미 아는 손님입니다. */
/* ★★ 로그인 뒤 랜딩 (2026-09-10) — 규칙은 있었는데 **아무도 `.로그인뒤` 를
     안 붙이고** 있었습니다. 이제 붙이니 값도 지금 짜임에 맞춰 고칩니다.
     소개 절을 감추고, 제목을 줄이고, 작업창 카드도 걷어
     **입력칸이 위로** 오게 합니다. 그 자리에 「내가 만든 것」 격자가 옵니다. */
.로그인뒤 .소개칸 { display: none; }
/* ★★★ **비상 고침 (2026-09-13) — 시안 D 히어로에서는 끕니다.**
 *
 *   사장님 — 「로그인하니까 랜딩페이지에 바로 밑에 옆에 작은 창들은 보이는데,
 *   **큰 작업창은 안 보인다.**」
 *
 *   까닭은 **이름이 가리키는 것이 달라진 것**입니다. 이 네 줄은 2026-09-10 에
 *   **옛 짜임**을 보고 지었습니다 — 그때 `.히어로판` 은 옛 작업창 **카드**였고,
 *   로그인한 손님에게는 그 카드를 걷어 입력칸을 위로 올리는 것이 맞았습니다.
 *   그런데 ■12절에서 시안 D 로 히어로를 새로 지으면서 `.히어로판` 이
 *   **히어로의 큰 작업창(`가운데창`)** 이 됐습니다. 규칙은 그대로인데 **집는 것이 바뀌어**
 *   로그인하면 히어로의 주인공이 통째로 사라졌습니다.
 *   옆 창 셋은 `.옆창` 이라 안 걸렸습니다 — 그래서 「작은 것은 보이는데 큰 것만 없다」였습니다.
 *
 * ★★ **지우지 않고 범위만 좁힙니다.** 값은 한 글자도 안 건드렸습니다 —
 *   옛 짜임이 남아 있으면 거기서는 그대로 돕니다.
 * ★★ 「같은 이름을 두 번 만들면 조용히 사라진다」의 사촌입니다. 거기서는 **키**가 겹쳤고,
 *   여기서는 **클래스 이름이 옮겨 갔습니다.** 둘 다 **탈이 안 나서** 더 나쁩니다 —
 *   로그인해야만 보이는 자리라 그물이 한 번도 못 봤습니다.
 * ★ 그래서 `27-로그인한채로-확인.mjs` 를 놓았습니다. 앞으로 판마다 로그인 전·후를 둘 다 봅니다. */
.로그인뒤 .히어로:not(.히어로D) { padding-top: 40px; }
.로그인뒤 .히어로:not(.히어로D) .약속 { font-size: clamp(26px, 3.4vw, 40px); }
.로그인뒤 .히어로:not(.히어로D) .뒷받침 { display: none; }
/* ★ 시안 D 의 큰 창은 `창 가운데창 히어로판` 입니다. 옛 것은 `가운데창` 이 없습니다 */
.로그인뒤 .히어로판:not(.가운데창) { display: none; }

/* ── 작업창 ───────────────────────────────────────────── */
.진행판 { display: grid; grid-template-columns: 35% 65%; height: calc(100dvh - 81px); }
/* ★ `min-width: 0` 이 없으면 grid 칸이 **안쪽 것의 폭**을 따라 벌어져,
     남은 크레딧과 보내기 단추가 오른쪽으로 잘려 나갔습니다.
     `#처음` 이 flex 라 소개칸이 3,212px 로 늘어난 것과 **같은 자리**입니다. */
/* ★★ 옛 규칙(223줄)이 `width: 600px; flex: 0 1 600px` 을 걸어 두고 있었습니다 —
     옆칸 256px 이 있던 시절의 값입니다. 그래서 grid 가 504px 을 줘도
     대화칸이 600 을 고집해 **남은 크레딧과 보내기 단추가 잘려 나갔습니다.**
     이제 옆칸이 없고 폭은 grid 가 정합니다. */
.진행판 .대화칸 {
  display: flex; flex-direction: column; min-height: 0;
  width: auto; flex: initial; min-width: 0;
  padding: 0; overflow: hidden;
  /* ★ 대화칸은 **흰 종이**입니다. 오른쪽 미리보기는 한 톤 눌러서
       두 칸이 색으로 갈리게 합니다 (아래 `.미리보기칸`). 선 하나로는
       흰색·회백 사이라 안 보였습니다 — 저쪽 지적 (2026-09-09). */
  background: var(--white);
  border-right: 1px solid oklch(84% 0.006 80);
}
/* ★ 대화칸 패딩을 0 으로 바꾸면서 **안쪽에 안 줬습니다.**
   말풍선이 왼쪽으로 잘려 나갔습니다 — 옛 패딩(36px 40px)이 하던 일입니다.
   이제 스크롤이 이 칸에서 나야 하니 패딩은 **안쪽 줄칸**에 줍니다. */
/* ★ 굴림은 **바깥 칸**이 맡습니다 — 줄들·접기·결과가 한 자리에서 같이 구릅니다. */
.진행판 .대화속 { flex: 1; min-height: 0; overflow-y: auto; }
.진행판 #줄들 { padding: 20px 28px 0; }
.진행판 #결과 { padding: 8px 28px 16px; }
/* 접기는 굴림칸의 직계라 여백을 따로 줍니다 — 안 주면 「다 됐어요」가
   왼쪽으로 잘려 나갑니다 (2026-09-09 캡처에서 봤습니다). */
.진행판 .과정 { padding: 0 28px; }
.대화칸 > * { min-width: 0; }
.미리보기칸 { min-width: 0; }

/* 진행 단계는 만드는 동안만. 다 만들면 접히고 그 자리에 고치기 칩이 옵니다. */
.진행단계 { padding: 24px 28px 20px; border-bottom: 1px solid var(--border); }
.단계줄 { display: flex; align-items: center; }
.단계 { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 56px; flex: 1; }
.동그라미 {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--bg-soft2); color: var(--ink-faint);
}
.단계이름 { font-size: 13px; color: var(--ink-faint); text-align: center; white-space: nowrap; }
.단계.끝난 .동그라미 { background: var(--ink); color: var(--white); }
.단계.끝난 .단계이름 { color: var(--ink-soft); }
.단계.지금 .동그라미 { background: var(--honey); color: var(--ink); }
.단계.지금 .단계이름 { color: var(--ink); font-weight: 600; }

.다됨 .진행단계 { display: none; }
/* ★ D — 고치기 칩 위 한 줄 (2026-09-10).
     단추 셋만 있으면 눌러도 되는 것인지 모르십니다. */
.칩안내 { margin: 14px 28px 0; font-size: 13px; color: var(--ink-faint); }

.고치기칩 { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 28px 8px; }
.고치기칩 button {
  min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white); color: var(--ink-soft);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.고치기칩 button:hover { border-color: var(--ink-faint); color: var(--ink); }
/* 되돌리기는 말풍선 안에 있어야 어느 고치기로 돌아가는지 압니다. */
.이전으로 {
  border: none; background: none; padding: 0 4px; cursor: pointer;
  font-size: 13px; color: var(--ink-faint); align-self: flex-end;
}
.이전으로:hover { color: var(--ink); text-decoration: underline; }

.이어칸 { margin-top: auto; padding: 12px 28px 24px; border-top: 1px solid var(--border); }
.남은것줄 { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.남은것 { font-size: 13px; color: var(--ink-faint); }
.이어틀 {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 6px 6px 20px;
}
.동그란보내기 {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--honey); color: var(--accent-fg);
  font-size: 19px; font-weight: 700; cursor: pointer; flex-shrink: 0;
}

/* ★★ 미리보기 칸을 **한 톤 더 눌렀습니다.** (2026-09-09, 저쪽 지적)
     `--bg-soft`(96%)는 흰 대화칸과 4% 차이라 경계가 안 보였습니다.
     여기는 「손님 것이 뜨는 자리」라 종이가 아니라 **판** 처럼 보여야 합니다. */
.미리보기칸 { display: flex; flex-direction: column; background: var(--bg-soft2); min-height: 0; }
.미리위 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.미리주소 {
  background: var(--white); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; font-size: 15px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.기기토글 {
  display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 4px;
}
.기기단추 {
  min-height: 32px; padding: 0 16px; border-radius: 999px; border: none;
  background: transparent; color: var(--ink-soft);
  font-size: 13px; font-weight: 700; cursor: pointer;
}
.기기단추.켜짐 { background: var(--ink); color: var(--white); }
.미리보기칸.폰으로 .미리한칸 { max-width: 340px; margin: 0 auto; }

.사장님칸 { padding: 12px 28px 20px; border-top: 1px solid var(--border); }

/* 손님이 친 말. 모델 말(`.말`)은 왼쪽, 이건 **오른쪽**입니다. */
.내말줄 { display: flex; justify-content: flex-end; margin: 4px 0 10px; }
.내말 {
  margin: 0; max-width: 85%; padding: 12px 16px; border-radius: 16px;
  background: var(--honey); color: var(--accent-fg);
  font-size: 15px; line-height: 1.5; word-break: keep-all;
}

/* ── 나타남 (스크롤하면 떠오름) ───────────────────────── */
.나타남 { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.나타남.보임 { opacity: 1; transform: translateY(0); }
.움직임끔 .나타남 { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .나타남 { opacity: 1; transform: none; transition: none; }
  .띠 { animation: none; }
}

/* ══ 폰 (720px 아래) ══════════════════════════════════════
   ★ 시안을 PC 폭만 그렸다가 폰에서 무너진 자리입니다 —
     제목이 「홈페이지 / 도,」로 네 줄, 요금이 「월 19,900 / 원」으로 갈라졌습니다.
   ★★ 띠 타일은 **높이만 줄이면 안 됩니다.** 폭도 줄여야 창에 들어갑니다. */
@media (max-width: 720px) {
  .히어로, .절, .절.뒤집기, .세컷, .요금들, .절그림.둘 {
    grid-template-columns: 1fr !important; gap: 32px !important;
  }
  .히어로 { padding-top: 56px; }
  /* ★ 폰에서도 히어로 제목은 **큽니다** (시안 C — 폰 390 에서 40px).
     그전에는 28px 이라 첫 화면에서 제목이 안 눌렸습니다. */
  .히어로 .약속 { font-size: 40px; line-height: 1.2; }
  /* 폰으로 보는 손님에게 폰 그림을 보이면 화면 안에 화면이 겹칩니다. */
  .히어로그림 { display: none; }
  .절, .어떻게절, .요금절, .마무리절 { margin-top: 64px; }
  .요금칸 { padding: 24px 20px; }
  .띠 img { height: 260px; }
  .띠 img.세로 { width: 180px; }
  .띠 img.가로 { width: 320px; }
  .브라우저틀 img { height: 220px; }
  .절그림 img { height: 240px; }
  .진행판 { grid-template-columns: 1fr; height: auto; }
  .대화칸 { border-right: none; }
  .꼭대기 { padding: 14px 16px; gap: 10px; }
  .판이름 { max-width: 32vw; }

  /* ★ 폰에서는 입력칸과 단추를 **세로로** 쌓습니다.
     가로로 두면 단추가 자리를 먹어 「예: 우리 가게」까지만 보입니다. */
  .히어로 .입력틀, .아래입력틀 {
    flex-direction: column; align-items: stretch; gap: 10px;
    border-radius: 22px; padding: 14px;
  }
  .히어로 .입력창, .아래입력틀 .입력창, .기능입력틀 .입력창 { padding: 0 8px; }
  .히어로 .보내기, .아래입력틀 .보내기 { width: 100%; }
  .히어로 .예시목록 { flex-direction: column; align-items: stretch; }
  .히어로 .예시목록 button, .히어로 .예시목록 li > * { width: 100%; text-align: center; }
}


/* ★★ **폰에서는 큰 제목도 40px 아래로 줄어듭니다** — 그때 마이너스 자간을 끕니다.
   「자간을 좁히는 것은 40px 이상 큰 제목에만」이 규칙이고, 폰에서 26px 이 된 제목에
   `-0.02em`(= -0.52px)이 그대로 남아 있었습니다. (2026-09-11) */
@media (max-width: 860px) {
  .절제목, .절제목.큰, .가운데제목, .기능제목 { letter-spacing: normal; }
}


/* ★★ **히어로 제목 — 한글이 크고 영문이 작습니다** (시안 C 확정, 2026-09-11).
 *
 *   ★ 2026-09-10 에 사장님이 「영문을 맨 위 큰 글씨로」 하셨는데,
 *     **시안 C 가 그것을 덮습니다** — 사장님이 C 를 고르실 때 보신 화면이
 *     한글이 크고 영문이 작은 그림이었고, 대조표 첫 줄
 *     「제목은 한글이 앞, 영문은 작게」도 ○ 였습니다.
 *     **되돌리시려면 말씀 한 줄이면 됩니다.**
 *
 *   시안 C 의 결 — 첫 줄은 짙은 검정, 둘째 줄은 옅은 회색, 영문은 그 아래 작게. */
.히어로 .약속.한글약속 { color: var(--ink); }
.히어로 .약속.한글약속 .약속둘째 { color: var(--ink-soft); }
.영문받침 {
  margin: 0; font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-size: 17px; font-weight: 800; color: var(--ink-faint);
  letter-spacing: normal; line-height: 1.5;
}
@media (max-width: 860px) {
  .영문받침 { font-size: 15px; }
}


/* ★★ 「말로 하기」 — 입력칸 왼쪽 아래에 붙는 작은 단추 (시안 C).
   ★ 노랑이 아닙니다 — 노랑은 넷 자리에만. 점만 짙은 검정입니다. */
/* ★ 처음에는 입력칸 아래에 **띄워** 두었는데(`position:absolute; bottom:-46px`)
   예시 칩 줄과 **겹쳤습니다.** 찍어서 눈으로 보고 알았습니다 —
   「찍은 뒤에는 열어 본다」의 그 자리입니다. 이제 자기 줄에 흐르게 둡니다. */
.말로하기 {
  margin: 14px auto 0;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.말로하기:hover { background: var(--bg-soft2); }
.말로하기.듣는중 { border-color: var(--ink); }
.말로하기점 {
  width: 14px; height: 18px; border-radius: 7px; background: var(--ink); flex: none;
}
.말로하기.듣는중 .말로하기점 { animation: 말로하기숨 1s ease-in-out infinite; }
@keyframes 말로하기숨 { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 860px) {
  .말로하기 { margin-top: 12px; }
}


/* ★★ **폰 첫 화면 손보기** (2026-09-11, 찍어서 눈으로 보고 고쳤습니다)
 *
 *   ① 제목이 **다섯 줄**로 늘어져 첫 화면을 다 먹었습니다.
 *      낱말 단위로 끊고(`keep-all`) 좌우 여백을 줄여 **두세 줄**로 만듭니다.
 *   ② 입력칸 글자가 **「만들기 시작」 단추에 가렸습니다** — 단추가 칸 안에
 *      겹쳐 앉아 있었습니다. 폰에서는 단추를 **아래 제 줄**로 내립니다.
 */
@media (max-width: 430px) {
  .히어로 { padding-left: 12px; padding-right: 12px; }
  .히어로 .약속 { word-break: keep-all; }
  .입력틀 { display: block; }
  .입력창 { padding-bottom: 12px; }
  .보내기 { position: static; width: 100%; margin-top: 10px; }
}


/* ══ 주요기능 서랍 — 다섯 묶음 31칸 (시안 C, 2026-09-11) ══════════
 *
 * ★ 시안 C 의 결 — 넓은 흰 판에 묶음이 가로로 서고, 칸마다
 *   **아이콘 · 이름 · 한 줄 설명**. 오른쪽에 좁은 칸 하나(「더 알아보기」).
 * ★ **노랑은 여기 없습니다** — 준비 중 알약도 옅은 회색입니다.
 */
/* ★★★ **화면 기준으로 가운데에 둡니다.**
   `left:50%` 만 주면 기준이 `.머리갈래`(헤더 왼쪽 끝의 작은 상자)라서
   서랍 가운데가 그 단추에 맞춰지고 **오른쪽이 화면 밖으로 나갑니다** —
   1440 에서 65px, 1280·1100 에서 **177px** 이 잘려 「더 알아보기」 칸이
   반쯤 보였습니다(재서 알았습니다). `fixed` 로 바꾸면 기준이 화면이 됩니다. */
.머리서랍.서랍넓게 {
  /* ★★★ **헤더 아래에서 시작합니다** (2026-09-13, ■28절 ③).
   *
   *   사장님 — 「마우스를 올리면 서랍이 **「만든 것들」과 옆 메뉴를 덮습니다.**」
   *
   *   재 보니 헤더 아래가 **109px**(알림 띠 44 + 흰 바 65)인데 서랍이 **64px** 에서
   *   시작해 **45px 이 헤더 안**으로 들어와 있었습니다. 그래서 메뉴 **넷**을 덮었고
   *   959 폭에서는 **여섯**을 덮었습니다.
   *
   * ★★ Attio 를 재니 **틈이 0** 입니다 — 헤더 아래(116)에서 서랍이 **딱** 시작합니다.
   *   (`docs/28-서랍자리.json` — 1440·1880 둘 다 116/116)
   *   그래서 우리도 **109** 로 맞춥니다. 덮는 것이 아니라 **이어지는** 것입니다.
   *
   * ★ 여는 것이 끊길 걱정은 없습니다 — `new.js` 가 **나가면 220ms 기다렸다 닫습니다.**
   *   Attio 도 틈 0 인데 안 닫힙니다(그쪽도 늦춰 닫습니다).
   * ★★ **알림 띠를 닫으면 헤더가 65 가 됩니다.** `body.띠닫힘` 으로 같이 올립니다 —
   *   고정 px 하나만 두면 띠를 닫은 손님에게 서랍이 **44px 떠** 보입니다. */
  position: fixed; top: 109px;
  left: 50%; transform: translateX(-50%);
  width: min(1280px, calc(100vw - 48px));
  padding: 22px; border-radius: 18px;
  /* ★ 31칸이라 세로가 깁니다 — **화면 안에 들어오게** 하고 넘치면 서랍만 굴립니다.
       안 그러면 아래 묶음이 화면 밖으로 나가 못 누릅니다. */
  max-height: calc(100vh - 96px); overflow-y: auto;
}
/* ★ 알림 띠를 닫으면 헤더가 **65px** 이 됩니다 — 서랍도 같이 올라갑니다 */
.띠닫힘 .머리서랍.서랍넓게 { top: 65px; }

.서랍묶음들 {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) 172px; gap: 2px 14px;
  align-items: start;
}
.묶음제목 {
  margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--ink-faint);
  letter-spacing: normal;
}
.서랍칸 {
  display: flex; gap: 10px; align-items: flex-start;
  width: 100%; padding: 6px 8px; border: none; background: none;
  border-radius: 10px; text-align: left; text-decoration: none; cursor: pointer;
  font: inherit; color: inherit;
}
.서랍칸:hover { background: var(--bg-soft2); }
.칸그림 {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 8px; background: var(--bg-soft2); color: var(--ink-soft);
}
.칸그림 svg { width: 16px; height: 16px; }
.칸글 { display: block; min-width: 0; }
.칸이름 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.칸설명 { display: block; font-size: 13px; color: var(--ink-faint); line-height: 1.5;
           word-break: keep-all; }
/* ★ 준비 중 — **작고 옅은 회색 알약 하나**. 크게 쓰거나 흐리게 막지 않습니다. */
.준비중알약 {
  flex: none; padding: 1px 7px; border-radius: 999px;
  background: var(--bg-soft2); color: var(--ink-faint);
  font-size: 13px; font-weight: 600;
}
.서랍옆칸 {
  padding-left: 18px; border-left: 1px solid var(--border); align-self: stretch;
}
.옆칸줄 {
  display: block; padding: 8px 10px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.옆칸줄:hover { background: var(--bg-soft2); }

/* 만든 것들 — 셋 */
.머리서랍.서랍셋 { width: 320px; padding: 12px; border-radius: 16px; }

@media (max-width: 1100px) {
  .서랍묶음들 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .서랍옆칸 { grid-column: 1 / -1; padding-left: 0; border-left: none;
              border-top: 1px solid var(--border); padding-top: 12px; }
}
@media (max-width: 860px) {
  .머리서랍.서랍넓게 { width: 100%; left: 0; transform: none; padding: 16px; }
  .서랍묶음들 { grid-template-columns: 1fr; }
  /* ★ 폰에서 누르는 것은 44px 이상입니다. */
  .서랍칸, .옆칸줄 { min-height: 44px; align-items: center; }
}


/* ══ 히어로 2단 · 「바로 시작해 보세요」 카드 (시안 C, 2026-09-11) ══ */
.히어로.히어로2단 {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px;
  align-items: start; max-width: 1280px; margin: 0 auto; text-align: left;
}
.히어로2단 .히어로글 { align-items: flex-start; text-align: left; }
.히어로2단 .약속, .히어로2단 .뒷받침, .히어로2단 .영문받침 { text-align: left; }
.히어로2단 .한줄넷 { justify-content: flex-start; }
.히어로2단 .말로하기 { margin-left: 0; }
/* 결과물 판(작업창)은 **두 칸을 다 쓰고 입력칸 아래**에 반듯하게 놓입니다.
   ★ 클래스는 `.히어로판` 입니다 — 이름을 짐작해 `.히어로작업창` 이라 썼다가
     안 먹어서 왼쪽 칸에만 갇혔습니다. **이름은 쓰는 그것에서 읽습니다.** */
.히어로2단 > .히어로판 { grid-column: 1 / -1; width: 100%; }
/* 예시 칩과 약속 줄도 왼쪽에 맞춥니다 */
.히어로2단 .예시목록 { justify-content: flex-start; }
.히어로2단 .예시 { width: 100%; }

.시작카드 {
  border: 1px solid var(--border); border-radius: 18px; background: var(--white);
  padding: 22px; text-align: center;
}
.시작카드제목 { margin: 0 0 14px; font-size: 19px; font-weight: 800; color: var(--ink); }
/* ★★ **노랑 넷 자리 가운데 하나** — 카카오 단추입니다. 글자는 짙은 검정. */
.카카오단추 {
  width: 100%; min-height: 52px; border: none; border-radius: 12px;
  background: var(--kakao); color: var(--ink);
  font-size: 17px; font-weight: 800; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.카카오말풍선 {
  width: 18px; height: 16px; border-radius: 8px 8px 8px 3px; background: var(--ink); flex: none;
}
.시작카드밑 { margin: 12px 0 0; font-size: 15px; color: var(--ink-faint); }

@media (max-width: 1100px) {
  .히어로.히어로2단 { grid-template-columns: 1fr; gap: 28px; }
  .시작카드 { max-width: 420px; }
}


/* ★ 준비 중 쪽지 — **조용한 한 줄**입니다. 알림창을 띄우지 않습니다. */
.알림쪽지 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 8px 8px 44px; padding: 8px 10px;
  border-radius: 10px; background: var(--bg-soft2);
}
.쪽지말 { font-size: 13px; color: var(--ink-soft); }
.쪽지단추 {
  min-height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.쪽지단추:hover { background: var(--bg-soft2); }
@media (max-width: 860px) { .쪽지단추 { min-height: 44px; } }


/* ══ 폰 메뉴 — 햄버거와 전체 화면 (2026-09-11, 저쪽 지시 ②) ══════════
 *
 * ★★ 900px 아래에서 `.머리메뉴` 가 숨겨져 **주요기능을 열 길이 없었습니다.**
 *   이제 햄버거 하나가 **전체 화면 메뉴**를 엽니다 (시안 C 폰 그림대로).
 * ★ 누르는 것은 모두 **44px 이상**입니다.
 */
.폰메뉴단추 {
  /* ★ 크기를 안 적으면 브라우저 기본값 13.3333px 이 됩니다 — 층 밖입니다. */
  font-size: 13px;
  display: none; margin-left: auto; width: 44px; height: 44px;
  border: none; background: none; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.햄버거줄 { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); }
@media (max-width: 900px) {
  .폰메뉴단추 { display: flex; }
}

.폰메뉴 {
  position: fixed; inset: 0; z-index: 80; background: var(--white);
  overflow-y: auto; padding: 16px 16px 40px;
}
.폰메뉴[hidden] { display: none; }
.폰메뉴머리 { display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
.폰메뉴닫기 {
  width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink);
}
/* 다섯 묶음은 **접힌 목록**입니다 — 한 화면에 31칸을 다 펴면 못 찾습니다. */
.폰묶음 { border-top: 1px solid var(--border); }
.폰묶음머리 {
  width: 100%; min-height: 56px; padding: 0 4px; border: none; background: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 19px; font-weight: 700; color: var(--ink); cursor: pointer;
}
/* ★ 폰 메뉴 꺾쇠도 **Attio 결 쉐브론 그림**입니다 (2026-09-13).
     펴면 180도 돌아 위를 봅니다 — 그전에는 「▾」/「▴」 글자를 갈아 끼웠습니다. */
.폰묶음꺾쇠 { width: 18px; height: 18px; display: block; flex: none;
  color: var(--ink-faint); transition: transform 160ms ease; }
.폰묶음[data-열림="예"] .폰묶음꺾쇠 { transform: rotate(180deg); }
.폰묶음속 { padding-bottom: 8px; }
.폰묶음[data-열림="아니오"] .폰묶음속 { display: none; }
.폰칸 {
  display: flex; align-items: flex-start; gap: 12px;
  width: 100%; min-height: 56px; padding: 8px 4px;
  border: none; background: none; text-align: left; text-decoration: none;
  color: inherit; font: inherit; cursor: pointer;
}
/* ★ 그림 자리 — PC 서랍의 `.칸그림` 과 **같은 결**입니다(둥근 회색 네모 안 16px).
 *   폰은 손가락이 닿는 줄이라 네모를 28px 로 조금 키웠습니다. */
.폰칸그림 {
  flex: none; width: 28px; height: 28px; margin-top: 2px;
  display: grid; place-items: center;
  border-radius: 8px; background: var(--bg-soft2);
}
.폰칸그림 svg { width: 16px; height: 16px; }
.폰칸글 { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.폰칸이름 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 17px; font-weight: 600; color: var(--ink);
}
.폰칸설명 { font-size: 15px; color: var(--ink-faint); }
.폰메뉴밑 { margin-top: 24px; display: grid; gap: 10px; }
.폰메뉴밑 .카카오단추 { width: 100%; }
.폰메뉴줄 {
  display: flex; align-items: center; min-height: 52px; padding: 0 4px;
  font-size: 17px; font-weight: 600; color: var(--ink); text-decoration: none;
}


/* ══ 진짜 결과물 틀 (2026-09-11, 저쪽 지시 ①) ══════════════════════
 *
 * ★ 작업창 흉내를 빼고 **실제로 나간 판**을 그대로 보입니다.
 *   주소 줄도 그 판의 진짜 주소입니다 — 지어낸 「makebee.kr/행복분식」이 아닙니다.
 */
.히어로판.진짜판 {
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  background: var(--white); box-shadow: 0 20px 44px -24px oklch(20% 0.01 90 / 0.22);
}
.진짜판 .판머리줄 {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
}
.판주소 {
  margin-left: 12px; padding: 4px 12px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--border);
  font-size: 13px; color: var(--ink-faint);
}
.진짜판속 { position: relative; height: 520px; background: var(--bg-soft); }
/* ★ 판이 자기 폭(가운데 정렬)으로 그려져 넓은 틀에서는 **왼쪽으로 치우쳐** 보입니다.
   `p.html` 을 못 건드리니(손님 결과물) **틀 쪽을 판에 맞춥니다** — 가운데에 두고
   폭을 좁혀 꽉 차 보이게 합니다. 찍어서 눈으로 보고 고쳤습니다. */
.진짜판틀 { width: min(100%, 900px); height: 100%; border: 0; display: block;
            margin: 0 auto; background: var(--white); }
.판기다림 {
  position: absolute; inset: 0; display: grid; place-items: center;
  margin: 0; font-size: 15px; color: var(--ink-faint); pointer-events: none;
}
.진짜판속.왔음 .판기다림 { display: none; }
@media (max-width: 860px) {
  .진짜판속 { height: 420px; }
  .판주소 { margin-left: 6px; font-size: 13px; }
}


/* ══ 요금 — 시안 C 카드 셋 (2026-09-12, 저쪽 지시 ②) ══════════════
 * ★ 노랑은 **추천 알약 하나뿐**입니다 (사장님 결정). 카드 테두리와 단추는 검정.
 */
.요금카드들 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  max-width: 1280px; margin: 40px auto 0;
}
.요금카드 {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 18px; background: var(--white);
  padding: 26px;
}
.요금카드.추천카드 { border: 2px solid var(--ink); }
.요금이름 {
  margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 19px; font-weight: 800; color: var(--ink);
}
/* ★★ **여기만 노랑입니다** — 사장님 결정 (2026-09-11). */
/* ★★ 요금 「추천」 알약도 **파랑 한 톤**입니다 (저쪽 지시 ②, 2026-09-12).
   2026-09-11 에 사장님이 「스탠다드 위 추천을 노란색으로」 하셨는데,
   색을 한 벌로 모으면서 **그 예외가 없어졌습니다.** 파랑 위 글자는 흰색입니다. */
.추천알약 {
  padding: 2px 10px; border-radius: 999px;
  background: var(--honey); color: #fff;
  font-size: 13px; font-weight: 700;
}
.요금한줄 { margin: 6px 0 0; font-size: 15px; color: var(--ink-faint); }
.요금값 { margin: 18px 0 0; font-size: 26px; font-weight: 800; color: var(--ink); }
.요금밑 { margin: 8px 0 0; font-size: 13px; color: var(--ink-faint); }
.요금줄들 {
  list-style: none; margin: 20px 0 0; padding: 0;
  border-top: 1px dashed var(--border);
}
.요금줄들 li {
  padding: 12px 0 12px 24px; border-bottom: 1px dashed var(--border);
  font-size: 15px; color: var(--ink); position: relative;
}
.요금줄들 li::before {
  content: "✓"; position: absolute; left: 0; top: 12px; color: var(--ink-soft);
}
.요금단추 {
  margin-top: auto; padding-top: 22px;
}
.요금단추 {
  display: block; min-height: 52px; line-height: 52px; margin-top: 22px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  text-align: center; text-decoration: none;
  font-size: 17px; font-weight: 700; color: var(--ink);
}
.요금단추.짙게 { background: var(--단추검정); color: var(--white); border-color: var(--단추검정); }
.요금물음들 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  max-width: 1280px; margin: 44px auto 0;
  padding-top: 32px; border-top: 1px solid var(--border);
}
.요금물음 .물음 { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--ink); }
.요금물음 .답 { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }
.제목둘째 { color: var(--ink-soft); }
@media (max-width: 900px) {
  .요금카드들, .요금물음들 { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════════════
 * 곁방 둘 — 보관함(`/new/library`) · 마이페이지(`/new/me`)  2026-09-12
 * ══════════════════════════════════════════════════════════════
 *
 * ★ 색은 기준문서 3-6-1 한 벌입니다 — 흰 바탕 · 회색 · 짙은 검정 단추 ·
 *   강조색 파랑 한 톤 `var(--honey)`. **노랑은 카카오 단추에만.**
 *   옛 뚝딱 색(짙은 갈색 · 겨자 · 올리브)은 한 곳도 안 씁니다.
 * ★ 글자 크기와 줄 간격은 **있는 층 안에서만** 씁니다 —
 *   층(52 · 26 · 23 · 19 · 17 · 15 · 13px, 1 · 1.2 · 1.5 · 1.7)을 늘리지 않습니다.
 */
/* ★★★ **`hidden` 이 `display:flex`·`grid` 에 집니다.**
   `hidden` 은 `display:none` 과 같은 힘(요소 기본값)이라, 규칙에서 `display` 를
   주면 **그 규칙이 이깁니다.** 설정 칸과 이전 판 목록이 **처음부터 펼쳐진 채**
   찍혔고, 사진을 열어 보고 알았습니다. 곁방에서 숨기는 것은 여기서 한 번에 막습니다. */
[hidden] { display: none !important; }

.곁방 { padding: 24px 24px 80px; }
.홈으로 {
  display: inline-block; margin-bottom: 18px;
  font-size: 15px; color: var(--ink-soft); text-decoration: none;
}
.홈으로:hover { color: var(--ink); }
.곁방머리 {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.곁방제목 { margin: 0; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.곁방밑 { margin: 6px 0 0; font-size: 15px; color: var(--ink-soft); }
.채운단추 {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: none; border-radius: 999px; background: var(--단추검정); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.빈단추 {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.빈단추:hover { background: var(--bg-soft); }

/* ── 보관함 줄: 거르개 · 찾기 · 보기 바꾸기 ───────────────── */
.보관함줄 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.거르개칩들 { display: flex; gap: 8px; flex-wrap: wrap; }
.거르개칩 {
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 15px; color: var(--ink-soft); cursor: pointer;
}
.거르개칩:hover { background: var(--bg-soft); }
/* ★ 고른 칩은 **짙은 검정**입니다 — 강조색은 아주 조금만 씁니다 */
.거르개칩.지금 { background: var(--단추검정); border-color: var(--단추검정); color: #fff; font-weight: 700; }
.칩수 { color: inherit; opacity: .65; }
.보관함오른쪽 { display: flex; align-items: center; gap: 10px; }
.찾기 input {
  min-height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 15px; color: var(--ink); width: 200px;
}
.보기바꾸기 { display: flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.보기단추 {
  min-height: 38px; padding: 0 16px; border: none; background: var(--white);
  font-size: 15px; color: var(--ink-soft); cursor: pointer;
}
.보기단추.지금 { background: var(--bg-soft2); color: var(--ink); font-weight: 700; }

/* ── 카드 ─────────────────────────────────────────────── */
.판카드들 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 18px; align-items: start; }
.판카드 {
  border: 1px solid var(--border); border-radius: 16px; background: var(--white);
  overflow: hidden; display: flex; flex-direction: column;
}
/* ★★ 표지가 **하얗게 비는 까닭**은 20KB 아래 빈 그림입니다.
   그림을 못 믿을 때는 **글자로 된 표지**를 그립니다 — 회색 빈 칸을 두면
   손님 눈에는 고장으로 보입니다. 빈 그림 0 을 이렇게 지킵니다. */
.판표지 {
  position: relative; height: 140px; background: var(--bg-soft);
  border-bottom: 1px solid var(--border); overflow: hidden;
}
/* ★ 진짜 판 모습. 위쪽을 보여 줍니다 — 아래는 대개 발과 여백입니다. */
.판표지그림 { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* ★ 그림이 없거나 깨졌을 때만 글자 표지가 나옵니다 */
.글자표지속 { display: none; }
.판표지칸.그림없음 .판표지그림 { display: none; }
.판표지칸.그림없음 .글자표지속 {
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  height: 100%; padding: 0 18px;
}
.표지이름 { font-size: 17px; font-weight: 700; color: var(--ink); }
.표지줄 { display: block; height: 7px; border-radius: 4px; background: var(--bg-soft2); width: 78%; }
.표지줄.짧 { width: 46%; }
.판카드속 { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; }
.판카드머리 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.판이름 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.판설명 { margin: 0; font-size: 15px; color: var(--ink-soft); }
.판때 { margin: 0; font-size: 13px; color: var(--ink-faint); }
/* 종류 점 — 다섯 갈래를 **회색 밝기**로 가릅니다. 색을 늘리지 않습니다. */
.종류점 { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block;
          background: var(--ink-faint); }
.종류점.homepage { background: var(--honey); }
.종류점.app { background: var(--단추검정); }
.종류점.doc { background: var(--ink-faint); }
.종류점.table { background: var(--border); border: 1px solid var(--ink-faint); }
.딱지들 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.딱지 {
  font-size: 13px; padding: 3px 9px; border-radius: 999px;
  background: var(--bg-soft2); color: var(--ink-soft);
}
.딱지.잠김 { border: 1px solid var(--border); background: var(--white); }
.딱지.도는중 { background: var(--honey); color: #fff; font-weight: 600; }
.판단추들 { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.판단추 {
  min-height: 38px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 15px; color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.판단추:hover { background: var(--bg-soft); }
.판단추.채움 { background: var(--단추검정); border-color: var(--단추검정); color: #fff; font-weight: 700; }
.판단추.지우기 { color: var(--ink-soft); }
.판설정 { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--bg-soft2);
          display: flex; flex-direction: column; gap: 4px; }
.설정줄 {
  min-height: 38px; padding: 0 10px; border: none; background: none; border-radius: 8px;
  font-size: 15px; color: var(--ink); text-align: left; cursor: pointer;
}
.설정줄:hover { background: var(--white); }
.이전판단추 {
  margin-top: 10px; min-height: 38px; padding: 0; border: none; background: none;
  font-size: 15px; color: var(--honey-ink); text-align: left; cursor: pointer; font-weight: 600;
}
.이전판들 { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.이전판들 li {
  display: flex; align-items: center; gap: 8px; padding: 8px 0;
  border-top: 1px dashed var(--border); font-size: 15px; color: var(--ink-soft);
}
.이전판때 { font-size: 13px; color: var(--ink-faint); flex: none; }
.작은단추 {
  margin-left: auto; min-height: 32px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 13px; color: var(--ink); cursor: pointer;
}

/* ── 목록 보기 (Attio 변경기록 결) ────────────────────────
   한 줄에 **날짜 / 제목과 한 줄 설명 / 종류 점**, 줄 사이는 **점선**입니다. */
.판목록 { border-top: 1px dashed var(--border); }
.판줄 {
  display: grid; grid-template-columns: 120px 1fr 140px; gap: 16px; align-items: baseline;
  padding: 16px 4px; border-bottom: 1px dashed var(--border);
}
.줄때 { font-size: 13px; color: var(--ink-faint); }
.줄속 { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.줄속 b { font-size: 17px; font-weight: 700; color: var(--ink); }
.줄설명 { font-size: 15px; color: var(--ink-soft); }
.줄종류 { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-soft); }
.휴지통줄 { margin-top: 22px; font-size: 15px; color: var(--ink-faint); }
.휴지통줄 a { color: var(--ink-soft); }

/* ── 마이페이지 ───────────────────────────────────────── */
.곁방칸 {
  border: 1px solid var(--border); border-radius: 16px; background: var(--white);
  padding: 20px 22px; margin-bottom: 16px;
}
.칸제목 { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.요금제줄 { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.요금제이름 { margin: 0; font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.크레딧줄 { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.크레딧수 { margin: 0 0 8px; font-size: 19px; color: var(--ink-soft); }
.크레딧수 b { font-size: 26px; font-weight: 800; color: var(--ink); }
.크레딧말 { font-size: 15px; }
/* ★ 막대는 **끝이 있을 때만** 그립니다 — 「무제한」에는 막대가 없습니다. */
.크레딧막대 { height: 8px; border-radius: 999px; background: var(--bg-soft2); overflow: hidden; }
.크레딧막대 i { display: block; height: 100%; background: var(--honey); border-radius: 999px; }
.줄표 { margin: 0; }
.줄표 .표줄 {
  display: grid; grid-template-columns: 140px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line-faint);
}
.줄표 .표줄:last-child { border-bottom: 0; }
.줄표 dt { font-size: 15px; color: var(--ink-faint); margin: 0; }
.줄표 dd { font-size: 15px; color: var(--ink); margin: 0; }
/* ★ 곁방 안 링크는 **우리 색**입니다 — 브라우저 기본 파랑 밑줄이 나오면
   사이트 색 한 벌이 깨집니다(찍어서 보고 알았습니다). */
.곁방 a:not(.채운단추):not(.빈단추):not(.판단추):not(.홈으로) {
  color: var(--honey-ink); text-decoration: none;
}
.곁방 a:not(.채운단추):not(.빈단추):not(.판단추):not(.홈으로):hover { text-decoration: underline; }
.복사줄 { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.복사칸 {
  flex: 1 1 260px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft);
  font-size: 15px; color: var(--ink-soft);
}
.곁방목록 { margin: 0; padding: 0; list-style: none; }
.곁방목록 li { border-bottom: 1px solid var(--line-faint); }
.곁방목록 li:last-child { border-bottom: 0; }
.곁방목록 a, .목록단추 {
  display: flex; align-items: center; min-height: 48px; width: 100%;
  font-size: 15px; color: var(--ink); text-decoration: none;
  /* ★ `padding: 0` 을 안 주면 단추만 기본 패딩이 붙어 **글자가 어긋납니다** */
  border: none; background: none; cursor: pointer; text-align: left; padding: 0; margin: 0;
}
/* 목록 안 링크는 위 규칙(강조색)을 따르지 않습니다 — 한 줄짜리 메뉴입니다 */
.곁방 .곁방목록 a { color: var(--ink); }
.곁방목록 a:hover, .목록단추:hover { color: var(--honey-ink); }

@media (max-width: 860px) {
  .곁방 { padding: 18px 18px 64px; }
  .판카드들 { grid-template-columns: 1fr; }
  .보관함줄 { align-items: stretch; }
  .보관함오른쪽 { flex-direction: column; align-items: stretch; }
  .찾기 input { width: 100%; }
  /* ★ 폰에서 목록은 **두 줄**로 접습니다 — 세 칸이면 글자가 안 읽힙니다. */
  .판줄 { grid-template-columns: 1fr; gap: 6px; }
  .거르개칩, .보기단추 { min-height: 44px; }
}


/* ══ 오른쪽 아래 문의 단추 — 새 쪽 모든 화면 (2026-09-12) ══════════
 * ★ 색은 3-6-1 한 벌입니다. 강조색은 **아주 조금만** — 단추는 짙은 검정입니다.
 * ★ 누르는 것은 44px 이상입니다.
 */
.문의단추 {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border: none; border-radius: 999px;
  background: var(--단추검정); color: #fff; cursor: pointer;
  font-size: 15px; font-weight: 700;
  box-shadow: 0 10px 24px -8px oklch(20% 0.01 90 / .34);
}
.문의단추:hover { background: #000; }
/* ★★★ 「? 문의」를 **말풍선**으로 (2026-09-14, ■32절 ④ · 사장님 결정).
   옛 것: 반투명 동그라미 안에 `?` 글자. `?` 는 도움말로 읽혀 결이 달랐습니다.
   ★ 동그란 바탕을 **뺐습니다** — 말풍선 자체가 모양이라 뒤에 또 동그라미를 두면 겹칩니다. */
.문의그림 {
  width: 20px; height: 20px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.문의그림 svg { width: 20px; height: 20px; display: block; }
/* 옛 이름도 남겨 둡니다 — 어딘가에서 아직 쓰고 있으면 모양이 안 깨지게 */
.문의물음표 {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18); font-size: 13px; font-weight: 700;
}
.문의창 {
  position: fixed; right: 20px; bottom: 80px; z-index: 71;
  width: min(340px, calc(100vw - 32px));
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 48px -18px oklch(20% 0.01 90 / .28);
  padding: 18px;
}
.문의창머리 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.문의창제목 { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.문의닫기 {
  width: 32px; height: 32px; border: none; background: none; cursor: pointer;
  font-size: 15px; color: var(--ink-faint); border-radius: 8px;
}
.문의닫기:hover { background: var(--bg-soft); }
.문의폼 { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.문의줄 { display: flex; flex-direction: column; gap: 4px; }
.문의이름표 { font-size: 13px; color: var(--ink-faint); }
.문의줄 input, .문의줄 textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--white);
  font-size: 15px; color: var(--ink); font-family: inherit; line-height: 1.5;
}
.문의줄 textarea { min-height: 72px; resize: vertical; }
.문의줄 input:focus, .문의줄 textarea:focus { outline: 2px solid var(--honey); outline-offset: 1px; }
.문의밑 { margin: 0; font-size: 13px; color: var(--ink-faint); }
.문의보내기 { justify-content: center; width: 100%; }
.문의답 { margin: 0; font-size: 15px; color: var(--ink-soft); }
.문의답.잘못 { color: #b3261e; }
@media (max-width: 860px) {
  .문의단추 { right: 14px; bottom: 14px; }
  .문의창 { right: 14px; bottom: 74px; }
  /* ★ 폰에서는 글자를 접고 물음표만 — 화면이 좁습니다 */
  .문의말 { display: none; }
  .문의단추 { padding: 0 14px; }
}


/* ══════════════════════════════════════════════════════════════
 * 기능 쪽 **새 옷** — 뼈대는 일곱 쪽이 같습니다 (2026-09-12)
 * ══════════════════════════════════════════════════════════════
 * ★ 색은 3-6-1 한 벌. 글자 크기와 줄 간격은 **있는 층 안에서만** 씁니다.
 */
.기능쪽D { padding: 40px 0 80px; }
.기능머리D {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center; padding: 20px 24px 8px;
}
/* 작은 테두리 알약 */
.알약 {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--white);
  font-size: 13px; color: var(--ink-soft);
}
/* ★ 큰 **두 빛깔** 제목 — 첫 줄은 짙은 먹, 둘째 줄부터 옅은 회색.
   랜딩 제목과 같은 결입니다. `<br>` 이 없으면 한 빛깔로 보입니다. */
.큰제목D {
  margin: 0; max-width: 900px;
  font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.2;
  letter-spacing: -1px; color: var(--ink); word-break: keep-all;
}
.부제D {
  margin: 0; max-width: 760px;
  font-size: 19px; color: var(--ink-soft); word-break: keep-all;
}
/* 입력칸 — 랜딩과 **같은 704px**. 위아래가 한 기둥으로 서야 합니다. */
.기능입력틀 { width: 100%; max-width: 704px; margin: 10px 0 0; }
.기능입력창 { cursor: pointer; }
/* ★ 이 칸은 **읽기 전용**입니다 — 누르면 랜딩으로 갑니다.
   기능 쪽에서 바로 만들기를 걸면 길이 둘이 되고, 한쪽만 고치는 날이 옵니다.
   ★★ `.보내기` 만 쓰면 **동그란 작은 단추**(작업창 것)가 먹어 글자가 겹칩니다 —
     찍어서 보고 알았습니다. 랜딩과 같은 **알약**으로 그립니다. */
.기능입력틀 .보내기 {
  position: static; width: auto; height: auto;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--단추검정); color: #fff; border: none;
  font-size: 17px; font-weight: 700; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}

/* ── 큰 우리 화면 하나 ─────────────────────────────────── */
.큰화면절 { padding: 28px 24px 8px; }
.큰보임창 {
  max-width: 1058px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 16px; background: var(--white);
  overflow: hidden; box-shadow: 0 24px 48px -26px oklch(20% 0.01 90 / .26);
}
.큰보임속 { padding: 22px 24px 26px; }
.보임가게머리 { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.보임아래 {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
}
.미리단추 {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border-radius: 12px; background: var(--단추검정); color: #fff;
  font-size: 15px; font-weight: 700;
}
.보임두칸 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.보임칸 { min-width: 0; }
.큰수 { margin: 6px 0 12px; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.큰수 .원 { font-size: 17px; font-weight: 700; margin-left: 2px; }
.스위치줄 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px dashed var(--border); font-size: 15px; color: var(--ink);
}
/* ★ 스위치는 **실제로 도는 것**입니다 — 품절 토글은 지금 손님 화면에 바로 먹습니다. */
.스위치 {
  width: 38px; height: 22px; border-radius: 999px; background: var(--bg-soft2);
  position: relative; flex: none; border: 1px solid var(--border);
}
.스위치::after {
  content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.스위치.켬 { background: var(--honey); border-color: var(--honey); }
.스위치.켬::after { left: auto; right: 3px; }
.보임안내문 { max-width: 560px; margin: 0 auto; text-align: center; padding: 24px 0 30px; }
.안내문제목 { margin: 0 0 16px; font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.안내문줄 { margin: 0 0 8px; font-size: 17px; color: var(--ink); line-height: 1.7; }
.안내문줄.옅게 { margin-top: 18px; font-size: 15px; color: var(--ink-faint); }
.보임대화 { display: flex; flex-direction: column; gap: 8px; }
.보임격자 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.보임쪽지 {
  padding: 18px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-soft); font-size: 15px; color: var(--ink-soft); text-align: center;
}
.칸이름.띄움 { margin-top: 14px; }
.주문줄.끝줄 { border-bottom: 0; }

/* ── 석 칸 격자 ────────────────────────────────────────── */
.석칸절 { padding: 44px 24px 8px; }
.석칸들 { max-width: 1058px; margin: 0 auto; display: grid;
          grid-template-columns: repeat(3, 1fr); gap: 22px; }
.석칸 { min-width: 0; }
.석칸제목 { margin: 6px 0 6px; font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.5; }
.석칸설명 { margin: 0; font-size: 15px; color: var(--ink-soft); line-height: 1.7; }

/* 기능 쪽 「큰 우리 화면」이 쓰는 조각 — 히어로 것과 같은 모양입니다 */
.가게이름 { font-size: 23px; font-weight: 800; color: var(--ink); line-height: 1.2; margin: 0; }
.가게한줄 { margin: 5px 0 0; font-size: 15px; color: var(--ink-soft); }
.영업중 {
  flex: none; font-size: 13px; font-weight: 600; color: #2f6b40;
  background: #eaf3ec; border: 1px solid #d3e6d8; border-radius: 999px; padding: 5px 10px;
}
.메뉴칸 { margin-top: 16px; }
.주소 { margin: 5px 0 0; font-size: 15px; color: var(--ink-soft); }

/* ── 기능 쪽 이어보기 ──────────────────────────────────── */
.이어보기절 { padding: 52px 24px 8px; }
.작은가운데 { font-size: 23px; }
.이어칸들 {
  max-width: 1058px; margin: 18px auto 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.이어칸 {
  display: flex; flex-direction: column; gap: 5px; padding: 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--white);
  text-decoration: none; color: var(--ink);
}
.이어칸:hover { background: var(--bg-soft); }
/* ★ 지금 보고 계신 쪽은 **옅은 회색**이고 누를 수 없습니다 */
.이어칸.지금쪽 { background: var(--bg-soft2); color: var(--ink-faint); cursor: default; }
.이어칸.지금쪽:hover { background: var(--bg-soft2); }
.이어번호 { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.이어이름 { font-size: 17px; font-weight: 700; }
.이어말 { font-size: 15px; color: var(--ink-soft); }
.이어칸.지금쪽 .이어이름, .이어칸.지금쪽 .이어말 { color: var(--ink-faint); }

@media (max-width: 860px) {
  .기능쪽D { padding: 24px 0 64px; }
  .기능머리D { padding: 12px 18px 4px; }
  .큰제목D { font-size: 30px; letter-spacing: -.5px; }
  .부제D { font-size: 17px; }
  .큰화면절, .석칸절, .이어보기절 { padding-left: 18px; padding-right: 18px; }
  .보임두칸, .석칸들 { grid-template-columns: 1fr; }
  .보임격자 { grid-template-columns: 1fr 1fr; }
  .이어칸들 { grid-template-columns: 1fr; }
  .큰보임속 { padding: 16px 16px 20px; }
}


/* ══════════════════════════════════════════════════════════════
 * 히어로 창 **속**이 움직입니다 (2026-09-12, 사장님 지적)
 * ══════════════════════════════════════════════════════════════
 *
 * 사장님 — 「히어로에 작업창, 옆에 작업창 작게 나오는 것들도 **안에서
 *   실시간으로 어떻게 만들어지는지 움직임이 있어.**」
 *
 * ★★ attio.com 을 열어 재 보니 **비디오가 아니라 CSS 움직임**이었습니다
 *   (`docs/Attio-창속움직임.json`) —
 *   · `pipeline-radar-bob` 3.8 / 4.15 / 4.5초 — 옆 카드가 **서로 다른 박자로** 떠오르내림
 *   · `pipeline-radar-ring-outer/inner` 3.6초 — 고리가 퍼짐
 *   · 큰 창은 질문 → 「Thinking」 → **답이 한 줄씩 쌓임** (4초 사이에 채워졌습니다)
 *
 * ★ 그래서 우리도 셋을 넣습니다 —
 *   ① 걸음이 **하나씩 켜집니다** (✓ 가 차례로)
 *   ② 미리보기의 **아직 안 된 칸**이 깜빡입니다
 *   ③ 옆 창 셋이 **서로 다른 박자로** 떠오르내립니다
 *
 * ★★ 움직임 줄이기를 켠 분께는 **전부 멈추고 다 켜진 모습**을 보여 드립니다.
 */

/* ① 걸음이 하나씩 켜집니다 — `--걸음` 이 1 → 7 로 오릅니다 */
@keyframes 걸음차례 {
  0%, 100% { --걸음: 1; }
  14% { --걸음: 2; } 28% { --걸음: 3; } 42% { --걸음: 4; }
  56% { --걸음: 5; } 70% { --걸음: 6; } 84% { --걸음: 7; }
}
@property --걸음 { syntax: "<integer>"; inherits: true; initial-value: 7; }
.히어로D .판왼쪽 { animation: 걸음차례 14s linear infinite; }
/* 아직 안 온 걸음은 옅게, 지금 걸음은 진하게 */
.히어로D .걸음줄 { transition: color .4s ease, opacity .4s ease; }

/* ② 미리보기에서 **아직 안 된 칸**이 깜빡입니다 */
@keyframes 만드는중 {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
.만드는칸 {
  margin-top: 14px; padding: 22px 16px; border: 1px dashed var(--border);
  border-radius: 12px; text-align: center; font-size: 15px; color: var(--ink-faint);
  animation: 만드는중 1.8s ease-in-out infinite;
}
.만드는칸 .도는점 {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--honey); margin-right: 8px; vertical-align: middle;
}

/* ③ 옆 창이 **서로 다른 박자로** 떠오르내립니다 — Attio 의 `bob` 결 */
/* ★★★ **`transform` 이 아니라 `translate` 를 씁니다** (2026-09-13, ■29절 ⑦).
 *
 *   사장님 — 「작은 작업창들은 안 움직여져」. 끌어도 꿈쩍 안 했습니다.
 *
 *   까닭은 이 키프레임이었습니다. 애니메이션이 `transform` 을 잡으면
 *   **규칙에 적힌 `transform` 을 통째로 덮습니다** — 끌린 양(`--끌X/Y`)도,
 *   들어올 때 미끄러지는 양(`--옆창밀기`)도, 배율(`--옆창배율`)도 **전부 무효**였습니다.
 *   끌기만 안 된 것이 아니라 **옆 창이 들어오는 움직임도 안 돌고 있었습니다.**
 *
 * ★ `translate` 는 **따로 쌓이는 속성**이라 `transform` 과 부딪히지 않습니다.
 *   (브라우저가 translate → rotate → scale → transform 순으로 겹칩니다)
 * ★ 옛 값은 지우지 않고 적어 둡니다: `transform: translateY(0)` / `translateY(-9px)`. */
@keyframes 떠오름 {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}
.히어로D .옆창1 { animation: 떠오름 3.8s ease-in-out infinite; }
.히어로D .옆창2 { animation: 떠오름 4.15s ease-in-out infinite; }
.히어로D .옆창3 { animation: 떠오름 4.5s ease-in-out infinite; }

/* 옆 창 속에서도 한 줄이 **새로 들어옵니다** */
@keyframes 새줄 {
  0%, 8% { opacity: 0; transform: translateY(6px); }
  16%, 92% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}
.새로옴 { animation: 새줄 6s ease-in-out infinite; }
.새로옴.늦게 { animation-delay: 2s; }
.새로옴.더늦게 { animation-delay: 4s; }

/* ★★ 움직임 줄이기 — **전부 멈추고 다 켜진 모습** */
@media (prefers-reduced-motion: reduce) {
  .히어로D .판왼쪽, .히어로D .옆창1, .히어로D .옆창2, .히어로D .옆창3,
  .만드는칸, .새로옴 { animation: none !important; }
  .새로옴 { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════
 * 옆 창 **각각의 속**이 실시간으로 움직입니다 (2026-09-12, 사장님 지적)
 * ══════════════════════════════════════════════════════════════
 *
 * 사장님 — 「그리고 **각각** 작업창 안에 있는 내용들이 실시간으로 움직이잖아」
 *
 * ★ 앞판에서 넣은 것은 **큰 창 왼쪽 걸음**과 **옆 창이 떠오르내리는 것** 둘뿐이었습니다.
 *   창 셋의 **속**은 멈춘 그림이었습니다.
 * ★★ 그래서 셋이 저마다 다른 일을 합니다 —
 *   · 옆창1 카카오톡 — 물음 → **입력 중 점 셋** → 답이 쓱 들어옵니다
 *   · 옆창2 검은 창  — 줄이 **한 줄씩 쌓이고** 끝에 **커서가 깜빡입니다**
 *   · 옆창3 사장님 화면 — **새 주문이 맨 위로 들어오고** 맨 아래가 빠집니다
 * ★ 박자를 일부러 어긋냅니다(2.4 / 1.9 / 3.1초). 같은 박자면 셋이 한 덩이로
 *   깜빡여 기계처럼 보입니다 — Attio 도 3.8 / 4.15 / 4.5 로 어긋나 있었습니다.
 */

/* 새로 들어오는 줄 — 아래에서 쓱 */
@keyframes 쓱들어옴 {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.히어로D .들어옴 { animation: 쓱들어옴 .42s cubic-bezier(.2,.7,.3,1) both; }

/* 빠지는 줄 — 위로 접히며 */
@keyframes 접혀나감 {
  from { opacity: .6; max-height: 60px; }
  to   { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0; }
}
.히어로D .나감 { animation: 접혀나감 .34s ease both; overflow: hidden; }

/* 「입력 중」 점 셋 — 카카오톡 결 */
.입력중 { display: inline-flex; align-items: center; gap: 4px; padding: 2px 0; }
.입력중 i {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
  opacity: .35; animation: 점깜빡 1.2s ease-in-out infinite;
}
.입력중 i:nth-child(2) { animation-delay: .16s; }
.입력중 i:nth-child(3) { animation-delay: .32s; }
@keyframes 점깜빡 { 0%,100% { opacity: .25; transform: translateY(0); }
                    50% { opacity: 1; transform: translateY(-2px); } }

/* 검은 창 끝의 커서 */
.깜빡커서 {
  display: inline-block; width: 7px; height: 13px; margin-left: 3px;
  background: #7fd1a0; vertical-align: -2px; animation: 커서깜빡 1.05s step-end infinite;
}
@keyframes 커서깜빡 { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* ★★ 움직임 줄이기 — **전부 멈추고 다 쌓인 모습**을 보여 드립니다.
   멈춘 채로 반쯤 그려진 화면을 두면 「고장난 것」으로 보입니다. */
@media (prefers-reduced-motion: reduce) {
  .히어로D .들어옴, .히어로D .나감, .입력중 i, .깜빡커서 { animation: none !important; }
  .히어로D .들어옴 { opacity: 1; transform: none; }
  .입력중 { display: none; }
  .깜빡커서 { opacity: 1; }
}

/* 「올리기」를 눌렀을 때 잠깐 반응 — 아직 하는 일은 안 지었습니다(■10절 ④) */
.히어로D .히어로올리기.눌림 { transform: scale(.97); }

/* ══ 알림 띠 — 시안 D (2026-09-12, 저쪽 ■10절 ③) ═══════════════
 * 시안 값: 높이 44 · 바탕 #101010 · 흰 글자 15px · 가운데 · 닫기 ✕ 오른쪽 32x32
 * ★ 알림 띠(44) + 헤더(64) = 108 — 히어로의 `--머리높이` 와 같습니다.
 */
.알림띠 {
  height: 44px; background: #101010; color: #fff;
  /* ★★ **가운데 모으기를 뗐습니다** (2026-09-13, ■29절 ①) — 소식이 여럿이라
       왼쪽으로 흐릅니다. 옛 값: `justify-content: center`.
       움직임 줄이기를 켜신 분에게는 아래에서 **다시 가운데**로 모읍니다. */
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; line-height: 1.5; position: relative; overflow: hidden;
}
.알림띠.닫힘 { display: none; }

/* ★ 겉이 잘라 냅니다. `min-width: 0` 이 없으면 flex 칸이 안 줄어 ✕ 를 밀어냅니다. */
.알림띠겉 { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* ★★ 두 벌을 이어 붙여 놓고 `-50%` 까지 밀면 **첫 벌 끝 = 둘째 벌 시작**이라
     되감기는 자리가 안 보입니다. 결과물 띠(`@keyframes 띠흐름`)와 같은 수법입니다. */
.알림띠흐름 {
  display: flex; width: max-content; align-items: center;
  animation: 알림띠흐름 48s linear infinite;
}
@keyframes 알림띠흐름 { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ★ `white-space: nowrap` — 폰에서 한 소식이 두 줄로 쪼개지면 44px 띠를 넘칩니다. */
.알림띠글 {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 28px; white-space: nowrap; flex: 0 0 auto;
}
.알림띠화살 { color: #98a0ab; }
/* ★ 꼬리표 `[NEW]` · `[UP]` — **시안 D 의 변경기록 카드가 쓰는 꼴 그대로**입니다
     (JetBrains Mono 13px · 흐린 회색). 우리가 새로 지은 꼴이 아닙니다.
     앞서는 소식마다 「새로 생겼어요」를 붙였는데, 1440 에서 여섯이 한 화면에 들어와
     같은 말이 여섯 번 서는 것을 찍어 보고 바꿨습니다. */
.알림띠꼬리 {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5; color: #98a0ab; letter-spacing: 0;
}

/* ★★ ✕ 를 **줄 안**으로 옮겼습니다 — 오른쪽 끝에 섭니다.
     옛 값: `position: absolute; right: 12.5vw; top: 6px` (넓은 화면에서 한참 안쪽).
     줄 안에 두면 흐르는 글이 ✕ 밑으로 안 지나갑니다 — 겉이 그 앞에서 잘라 냅니다. */
.알림띠닫기 {
  position: static; flex: 0 0 auto; margin-right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: transparent; border: 0; cursor: pointer; font-size: 14px;
}
@media (max-width: 599px) {
  /* ★ 폰은 소식 사이를 좁혀 한 화면에 한 소식이 온전히 들어오게 합니다 */
  .알림띠글 { padding: 0 16px; }
  .알림띠닫기 { margin-right: 4px; }
}

/* ★★★ 움직임 줄이기 — **멈추고 첫 소식만** 보입니다 (저쪽 지시).
     흐름을 끄기만 하면 여섯이 한 줄에 늘어서 잘립니다. 첫 하나만 두고 가운데로 모읍니다. */
@media (prefers-reduced-motion: reduce) {
  .알림띠 { justify-content: center; }
  .알림띠겉 { flex: 0 1 auto; }
  .알림띠흐름 { animation: none; transform: none; }
  /* ★★ **한 겹이 끼었습니다** (2026-09-14, ■38절 ②). 소식을 `.알림띠묶음` 으로
   *   감싸면서 `>`(직계 자식)가 아무것도 안 잡게 됐고, 움직임 줄이기에서
   *   **여섯이 다 보였습니다.** 묶음까지 내려가서 잡습니다.
   * ★ 보이는 것은 **NEW 꼬리 하나 + 첫 소식 하나**입니다. */
  .알림띠흐름 .알림띠묶음 + .알림띠묶음 { display: none; }
  .알림띠흐름 .알림띠사이 { display: none; }
  /* ★ `:first-of-type` 은 **NEW 꼬리**를 집습니다 — 묶음 안 첫 `<span>` 이 그것이라
   *   `.알림띠글:first-of-type` 은 아무것도 안 맞고 **소식이 통째로 사라졌습니다**(0개).
   *   CSS 로 「형제 중 첫 이 클래스」를 집을 수 없어, **첫 것 뒤의 것들**을 숨깁니다. */
  .알림띠흐름 .알림띠글 ~ .알림띠글 { display: none; }
  /* ★★ ✕ 만 띄웁니다 — 안 그러면 가운데로 모은 글 **바로 옆**에 붙어
       화면 오른쪽 끝에서 69 · 346 · 586px 이나 안쪽에 섰습니다(재서 잡았습니다).
       글은 가운데(시안 D 대로), ✕ 는 오른쪽 끝 — 둘 다 지킵니다. */
  .알림띠닫기 { position: absolute; right: 12px; top: 6px; margin-right: 0; }
}

/* ★ 폰에서 헤더가 **93px** 이었습니다 — 위아래 패딩 14px 이 더해져서입니다.
   시안 D 는 어느 폭에서나 **64px** 입니다(알림 띠 44 + 헤더 64 = 108).
   재서 찾았습니다 (2026-09-12, 저쪽 ■10절 ③). */
@media (max-width: 599px) {
  .꼭대기 { padding-top: 0; padding-bottom: 0; }
}

/* ══ 시안 D 와 **나란히 놓고 보니 달랐던 넷** (2026-09-12, 저쪽 ■10절 ⑤) ══
 * ★★★ 숫자는 다 맞았는데 **결이 달랐습니다.** 찍어서 눈으로 보고 찾았습니다 —
 *   「숫자가 맞아도 나란히 놓고 봐야 합니다」(CLAUDE.md).
 */

/* ㉠ 제목·부제가 **우리 쪽이 굵었습니다.** 옛 `.약속 { font-weight: 800 }` 이
     뒤에서 이기고 있었습니다. 시안은 **600** 입니다. */
.히어로D .약속 { font-weight: 600; }
.히어로D .뒷받침 { font-weight: 500; }

/* ㉢ 걸음줄에 **체크가 두 개** 그려졌습니다. 옛 `.걸음줄::before` 가
     `✓` 와 `·` 를 따로 그리고 있었습니다 — 시안은 동그라미 안에 하나뿐입니다.
     ★ 옛 규칙은 **안 지웁니다** — 진행 화면(`#진행`)이 같은 클래스를 씁니다.
       히어로 안에서만 끕니다. */
.히어로D .걸음줄 { padding-left: 0; }
.히어로D .걸음줄::before { content: none !important; }

/* ㉡ 마감 보고 옆창은 **검은 창**입니다 — 시안 값 `#101010`.
     나란히 놓고 보니 우리 것만 흰 창이었습니다. */
.히어로D .옆창2 {
  background: #101010; color: #fff; border: 0;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.18);
}
.히어로D .옆창2 .옆창머리 { border-bottom: 1px solid rgba(255,255,255,.12); color: #98a0ab; }
.히어로D .옆창2 .옆창머리 span:first-child { font-family: "JetBrains Mono", ui-monospace, monospace; }
.히어로D .옆창2 .창속 { padding: 14px; font-size: 15px; line-height: 1.5; color: #cad0d9; display: grid; gap: 6px; }
.히어로D .옆창2 .칸이름 { color: #fff; font-weight: 600; font-size: 15px; }
.히어로D .옆창2 .들어갈것 { color: #cad0d9; font-size: 15px; }
.히어로D .옆창2 .찍을자리 { color: #98a0ab; }

/* 옆창 1·3 속도 시안 값으로 */
.히어로D .옆창1 .창속, .히어로D .옆창3 .창속 {
  padding: 12px 14px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5;
}
.히어로D .옆창3 .칸이름 { font-size: 15px; color: #101112; font-weight: 600; }
.히어로D .옆창3 .들어갈것 { font-size: 15px; color: #242629; }

/* ㉢ 알림 띠는 헤더와 **같이 붙박입니다.** 안 그러면 스크롤하자마자 사라져
     시안(늘 위에 있음)과 달라집니다 — 나란히 찍어 보고 알았습니다.
   ★ 헤더가 `position: sticky; top: 0` 이라, 띠를 그 **위**에 붙이려면
     띠도 sticky 로 두고 헤더를 띠 높이(44)만큼 내립니다. */
.알림띠 { position: sticky; top: 0; z-index: 21; }
.알림띠.닫힘 ~ .꼭대기 { top: 0; }
.꼭대기 { top: 44px; }
/* 띠를 닫으면 무대도 44 올라갑니다 */
.히어로D .무대 { top: 109px; }
body.띠닫힘 .꼭대기 { top: 0; }
body.띠닫힘 .히어로D .무대 { top: 65px; }

/* ══════════════════════════════════════════════════════════════
 * ★★★ 시안 D — 폰과 움직임 줄이기. **파일 맨 끝**에 둡니다 (2026-09-12, ■10절 ②)
 *
 * 까닭: 앞쪽에 두었더니 **옛 `@media (max-width: 860px)` 블록이 뒤에 있어 이겼습니다.**
 *   폰에서 큰 창이 `translateX(-50%)` 로 되돌아가 화면 밖(-161)으로 나갔습니다 —
 *   재서 찾았습니다. 옛 블록은 **안 지웁니다**(기능 쪽이 같은 조각을 씁니다).
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  /* 시안: 폰은 옆 창 없이 **크기 그대로**, 제목이 먼저 사라진 뒤 창이 올라옵니다 */
  .히어로.히어로D { height: calc(1000px + var(--펼침)); }
  .히어로D .무대 { height: calc(1000px - 109px); }
  .히어로D .창들 { height: auto; margin-top: 0; transform: none; }
  .히어로D .옆창1, .히어로D .옆창2, .히어로D .옆창3 { display: none; }
  .히어로D .히어로글 {
    top: 36px; padding: 0 16px;
    opacity: max(0, calc(1 - 2 * var(--진행)));
  }
  .히어로D .약속 { margin-top: 16px; font-size: 40px; line-height: 1.12; }
  .히어로D .뒷받침 { margin-top: 16px; font-size: 17px; line-height: 1.5; }
  .히어로D .입력틀 { margin-top: 16px; width: calc(100vw - 32px); }
  .히어로D .마이크단추 { width: 44px; height: 44px; }   /* 폰에서 누르는 것은 44 이상 */
  .히어로D .가운데창,
  .히어로D .가운데창.히어로판 {
    --창폭: calc(100vw - 32px);
    width: var(--창폭); max-width: none; height: 560px;
    left: 16px; transform: none;      /* ★ 폰은 안 줄어듭니다(시안) */
    top: calc(369px - max(0, (var(--진행) - .5) * 2) * 338px);   /* 478−109 */
    border-radius: 12px; margin: 0;
  }
  .히어로D .판속 { grid-template-columns: 1fr; }
  /* ★ 왼쪽 칸을 **안 접습니다** — 시안은 폰에서도 걸음과 시계를 보입니다 */
  .히어로D .판왼쪽 { display: flex; padding: 16px; border-right: 0; border-bottom: 1px solid #e4e7ec; }
  .히어로D .판오른쪽 { padding: 12px; }
}

/* 움직임 줄이기 — 시안: **멈추고 다 펼칩니다** */
@media (prefers-reduced-motion: reduce) {
  .히어로D .가운데창 { transform: translateX(-50%) scale(.62); }
  .히어로D .옆창 { opacity: 1; }
  .히어로D .히어로글 { opacity: 0; }
}

/* ★ 옛 규칙 둘이 폰에서 「만들기 시작」에 `width: 100%` 를 줘서
     **단추가 입력칸을 꽉 채우고 마이크가 밀렸습니다**(328px) — 눌러 보고 찾았습니다.
     `.히어로 .보내기`(606줄) · `@media 430px`(2216줄) · `@media 860px`(2145줄) 셋입니다.
   ★ **지우지 않고** 시안 D 에서만 끕니다 — 랜딩 아래 입력틀이 같은 조각을 씁니다. */
.히어로D .보내기,
.히어로.히어로D .보내기 {
  position: static; width: auto; min-height: 0; height: 40px;
  padding: 0 16px; margin: 0 6px 0 0; border-radius: 10px;
  background: #202124; color: #fff;
  font-size: 15px; font-weight: 500; white-space: nowrap; flex: none;
}
@media (max-width: 860px) {
  .히어로D .보내기,
  .히어로.히어로D .보내기 {
    width: auto; height: 44px; padding: 0 14px; margin-top: 0;
  }
}

/* ★ 폰에서 단추가 **322px** 로 칸을 거의 채웠습니다. `flex: 0 0 auto` 인데도
     `width` 가 계산상 322 로 나와, 어느 옛 규칙이 이기는지 쫓기보다
     **`fit-content` 로 못박습니다** — 글자만큼만 차지합니다. */
.히어로D .보내기 { width: fit-content !important; }

/* ══ 입력칸 안 오른쪽 **단추 둘** — 사장님 지시 (2026-09-12, ■11절 ⑤) ══
 *
 * 「왼쪽이 마이크, 오른쪽이 시작 화살표입니다. 둘이 나란히 붙습니다.
 *  둘 다 같은 크기 · 같은 둥글기입니다(40px · 폰 44px 이상, 둥글기는 시안 단추 값).
 *  시작 단추: 속을 채운 짙은 검정 #202124, 안에 흰 위쪽 화살표.
 *  마이크 단추: 속이 빈 흰 바탕에 옅은 테두리, 안에 검정 마이크 모양.
 *  둘 사이 틈은 8px 안팎으로 맞춰 **한 짝으로** 보이게.」
 *
 * ★ 둥글기 10px 은 **시안 단추 값**입니다(시안 머리글: 「카드 12px · 단추 10px」).
 * ★ 시안에는 없는 자리입니다 — `docs/시안D-일부러다르게.md` 에 적었습니다.
 */
.히어로D .단추짝 { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.히어로D .칸단추 {
  width: 40px; height: 40px; flex: none; padding: 0;
  border-radius: 10px;                 /* 시안 단추 값 */
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.히어로D .칸그림 { width: 20px; height: 20px; display: block; }
/* ★★★ **둘 다 흰 바탕 · 검은 그림 · 같은 테두리** (사장님, 2026-09-12).
     「지금 화살표가 `#202124` 채움이라 **흰 입력칸 안에 검은 덩어리가 들어가 튑니다.**
      둘 다 흰 바탕에 검은 그림으로. **테두리도 둘이 같게** 하십시오 —
      하나만 테두리가 있으면 또 짝이 안 맞습니다.」
   ★ 크기 · 둥글기 · 틈 8px 은 **그대로**입니다. */
.히어로D .칸단추.마이크단추,
.히어로D .칸단추.시작단추 {
  background: #fff; border: 1px solid #e4e7ec; color: #202124;
}
.히어로D .칸단추.시작단추:disabled { color: #cad0d9; border-color: #f3f4f6; cursor: default; }
/* ★ 마이크를 숨겨도 자리가 안 흐트러집니다 — 짝이 flex 라 시작만 남아 오른쪽에 섭니다 */
.히어로D .칸단추[hidden] { display: none; }
@media (max-width: 860px) {
  /* 폰에서 누르는 것은 44px 이상 */
  .히어로D .칸단추 { width: 44px; height: 44px; }
}
/* ★ 옛 `.보내기` 규칙(글자 단추)은 이제 안 씁니다 — 그림 단추가 됐습니다.
     지우지 않고 시안 D 안에서만 끕니다. */
.히어로D .보내기 { width: 44px; min-height: 0; margin: 0; font-size: 0; }
.히어로D .칸단추.시작단추 { width: 40px !important; }
@media (max-width: 860px) { .히어로D .칸단추.시작단추 { width: 44px !important; } }

/* ★ 폰에서 **입력칸과 단추가 세로로 쌓였습니다** — 옛 규칙이 `.입력틀` 에
     `flex-direction: column` 과 패딩 14px 을 주고 있었습니다(재서 찾았습니다).
     시안 값으로 못박습니다: 한 줄(row) · 패딩 `0 8px 0 20px`. */
.히어로D .입력틀 {
  flex-direction: row !important; flex-wrap: nowrap !important;
  padding: 0 8px 0 20px !important; align-items: center;
}
@media (max-width: 860px) {
  .히어로D .입력틀 { padding: 0 8px 0 16px !important; }
}

/* ══ 시안 D 절 여덟 — **통째로 덮은 것**의 바깥 폭만 풉니다 (2026-09-12, ⑥) ══
 * ★ 시안은 **1440 고정 틀**에 그렸습니다. 안쪽 값은 한 줄도 안 건드리고
 *   바깥만 가운데로 세워 넓은 화면에서 한쪽에 몰리지 않게 합니다.
 * ★ 인라인 스타일이라 **우리 옛 CSS 가 안 닿습니다** — 그것이 이 방식의 값입니다.
 */
/* ★★★ **화면 폭까지 폅니다.** 부모(`.판`)의 여백 때문에 절이 **1312px** 로
   좁아졌고, 좁으니 글이 더 줄바꿈돼 **높이가 시안보다 최대 378px 컸습니다** —
   재서 찾았습니다. 히어로에서 무대가 1312 였던 것과 **같은 자리**입니다. */
/* 시안 D 의 절 틀 — **1442 고정 · 가운데** 입니다 (2026-09-12, ■11절 ⑥).
 *
 * ★★★ 앞서 `width: 100vw` 로 폈다가 **1440 에서만 우연히 같고** 1920 에서는
 *   우리 절이 1920 까지 퍼져 시안(1442)과 어긋났습니다.
 *   시안은 넓은 화면에서도 **1442 로 묶고 가운데**에 둡니다 — 그대로 따릅니다.
 * ★ 화면이 1442 보다 좁으면 화면 폭까지만 (폰 390 이 여기에 듭니다).
 * ★ 바깥 폭만 풀어 줍니다. 절 안쪽 값은 한 줄도 안 건드립니다.
 */
.D절들 {
  width: min(100vw, 1442px); max-width: none;
  /* ★★ 부모(`main.감`)의 좌우 패딩(PC 64 · 폰 24)을 **벗어납니다.**
     `margin: auto` 만 두면 그 패딩 안에서 가운데를 잡아 절이 64px 밀리고
     오른쪽이 화면 밖으로 넘쳤습니다(검은 절 왼쪽에 흰 띠가 남았습니다).
     `50%` 는 부모 **속폭**의 절반이라 좁은 화면에서는 음수가 되어 패딩을 지웁니다. */
  margin-left: calc(50% - min(50vw, 721px));
  margin-right: calc(50% - min(50vw, 721px));
}
.D절 { width: 100%; margin: 0; }
/* 시안은 1440 고정 틀에 그렸습니다 — 안쪽은 그대로 두고 넘치지만 않게 합니다 */
/* ★★ `max-width: 100%` 를 **안 겁니다** (2026-09-12).
 *   우리가 더한 것이고 시안에는 없습니다. 폰 390 에서 절 안쪽이 눌려
 *   제목이 **한 글자씩 세로로 쪼개졌습니다** — 시안보다 더 나쁜 모습이었습니다.
 *   시안 D 는 **폰을 안 그렸습니다**(1440 고정 틀이라 폰에서 옆으로 넘칩니다).
 *   우리가 여기서 새로 지으면 「마음대로 예시를 만드는」 것이 되니,
 *   **시안과 같은 상태로 두고** 「고칠 목록」에 적었습니다. */

/* ★★★ 시안 절 안은 **content-box** 입니다 (2026-09-12, ■11절 ⑥ · 그 자리에서 고친 예외).
 *
 *   우리 맨 위에  가 있어서, 시안이 타일에 걸어 둔
 *   `min-height: 160px` 이 **패딩을 포함한 값**으로 읽혔습니다.
 *   시안(content-box)에서는 160 + 위아래 패딩 60 = **220**,
 *   우리(border-box)에서는 속이 163 이라 그냥 **163** — 아홉 칸이 격자 stretch 로
 *   다 같이 낮아져 **타일 절이 173px 작았습니다.**
 *
 *   이것이 「옛 규칙이 시안을 덮는 자리」입니다.  규칙은 **안 건드리고**,
 *   시안 마크업이 든  안에서만 시안 전제로 되돌립니다.
 *   ★ 히어로 D 는 우리가 손으로 옮긴 것이라 border-box 그대로 둡니다.
 */
.D절들, .D절들 * { box-sizing: content-box; }

/* ★ 글 끊기도 시안 전제로 — 우리 body 는 `word-break: keep-all` 이고
     시안은 `normal` 입니다. 어절이 긴 줄에서 감기는 자리가 달라집니다. */
.D절들 { word-break: normal; line-height: normal; }


/* ══════════════════════════════════════════════════════════════
 * ★★★ **폰 랜딩** — 시안 D 「Makebee D 폰」으로 덮은 것입니다
 *   (2026-09-13, ■15절 ⑤ · 사장님 「폰 시안은 짜임만 옮겨」)
 *
 * ★ 위 `.D절들` 주석의 「시안 D 는 폰을 안 그렸습니다」는 **이제 옛말**입니다.
 *   폰 시안이 나와서 **폭 860 아래는 폰 시안이 통째로 맡습니다.**
 *   `.D절들`(1440 전제)은 폰에서 **안 보입니다** — 옆으로 넘치던 자리가 사라집니다.
 *
 * ★ 절 이름(`data-D절`)이 PC 것과 **같습니다.** 나란히 놓고 견주기 위해서입니다.
 * ★ 시안 안쪽은 랜딩 절·곁방과 **같은 결**로 둡니다 — content-box · word-break normal.
 * ══════════════════════════════════════════════════════════════ */
.D폰 { display: none; }
.D폰, .D폰 * { box-sizing: content-box; }
.D폰 { word-break: normal; line-height: normal; }

@media (max-width: 860px) {
  /* PC 것을 재웁니다 — 히어로의 움직임(스크롤 따라오기)도 같이 멈춥니다 */
  .히어로.히어로D, .D절들 { display: none !important; }

  .D폰 {
    display: block;
    /* ★ 시안이 **390 고정**으로 그린 것이라 그대로 둡니다.
       `min(100vw, 390px)` 로 묶어도 안쪽 값이 390 전제라 눌려서 쪼개집니다 —
       곁방·랜딩 절에서 두 번 겪은 자리입니다. 390 보다 좁은 폰은 「고칠 목록」에 적었습니다. */
    width: 390px;
    /* 부모(`main.감`)의 좌우 패딩(폰 24)을 벗어납니다 */
    margin-left: calc(50% - 195px);
    margin-right: calc(50% - 195px);
  }
  .D폰히어로, .D폰절 { width: 100%; margin: 0; }

  /* 폰 히어로의 **진짜 입력칸** — 겉은 시안 것 그대로이고 여기서는 누를 것만 봅니다.
     ★ 누를 것은 44px 이상이어야 합니다(폰 잣대). 시안 동그라미가 44 라 그대로 맞습니다. */
  .폰입력틀 { cursor: text; }
  .폰입력창 { min-height: 24px; }
}


/* ══════════════════════════════════════════════════════════════
 * ★★★ **폰 곁방 · 폰 기능 쪽** — 같은 잣대(폭 860)로 갈립니다
 *   (2026-09-13, ■15절 ⑤)
 *
 * ★ 곁방은 서버가 **두 벌**을 냅니다. 폭에 따라 `side-data.js` 가 안 쓰는 쪽을
 *   **DOM 에서 덜어냅니다** — 여기 숨기기는 덜어내기 전 한 순간을 위한 것입니다.
 *   (배관의 `querySelector` 가 첫째만 집어서 숨기기만으로는 안 됩니다)
 * ★ 기능 쪽은 값 배관이 없어 **숨기기로 충분합니다.**
 * ══════════════════════════════════════════════════════════════ */
.D폰곁방, .D폰기능쪽 { display: none; }

@media (max-width: 860px) {
  /* PC 한 벌을 재우고 폰 한 벌을 세웁니다 */
  .D곁방:not(.D폰곁방), .D기능쪽:not(.D폰기능쪽) { display: none !important; }
  /* ★★ **클래스 둘로 겨눕니다.** `.D폰곁방` 하나로는 뒤에 있는 `.D곁방 { width: 1440px }`
       와 힘이 같아 **뒤엣것이 이깁니다** — 폰에서 1440 그대로라 525px 넘쳤습니다.
       규칙 자리를 옮기는 대신 힘을 올렸습니다. 옮기면 다음에 또 갈립니다. */
  .D곁방.D폰곁방, .D기능쪽.D폰기능쪽 {
    display: block;
    /* 시안이 **390 고정**으로 그린 것이라 그대로 둡니다 — 랜딩 폰과 같은 규칙 */
    width: 390px;
    margin-left: calc(50% - 195px);
    margin-right: calc(50% - 195px);
  }

  /* ★★ **가로로 미는 칸을 걷었습니다** (2026-09-13).
       PC 큰 화면을 폰에 넣고 미는 칸에 담았더니, 그 안 제목이 **가운데 정렬**이라
       1440 폭의 가운데(720px)에 앉아 **첫 화면에서 통째로 안 보였습니다.**
       넘침 0 · 쪼개짐 0 으로 숫자는 다 맞았고, **찍어서 눈으로 보고** 알았습니다.
       지금은 폰 시안 짜임 그대로(제목칸이 큰 화면 밖) 짜서 밀 것이 없습니다. */
}


/* ══ 곁방 — **시안 D 를 통째로 덮은 것**입니다 (2026-09-12, ■12절 ⑤) ══
 *
 * ★ 랜딩 절(`.D절들`)과 **같은 규칙**입니다 — 시안은 1440 고정 틀이라
 *   넓은 화면에서도 1440 으로 묶고 가운데에 둡니다.
 * ★ 부모(`main.감`)의 좌우 패딩(PC 64 · 폰 24)을 **벗어납니다.**
 * ★ 시안 마크업 안은 **content-box** 입니다 — 우리 `* { box-sizing: border-box }` 가
 *   시안의 `min-height` 를 덮지 않게. 랜딩 절에서 타일이 173px 낮았던 그 자리입니다.
 * ★ 글 끊기도 시안 전제(`normal`)로 — 우리 body 는 `keep-all` 입니다.
 */
.D곁방 {
  /* ★★ **1440 고정**입니다 — `min(100vw, 1440px)` 로 두었더니 폰 390 에서
     칸이 눌려 **글자가 한 줄에 한 글자씩 세로로 쪼개졌습니다.**
     랜딩 절에서 겪은 것과 같은 자리입니다(그때는 `max-width:100%` 를 뺐습니다).
     시안은 **1440 전제로 그린 것**이라, 좁은 화면에서는 **옆으로 넘치게** 두는 것이
     시안과 같은 상태입니다. 눌러서 쪼개는 것보다 낫습니다.
     ★ 시안 곁방에 폰 화면이 있는데 아직 안 뽑았습니다 — 「고칠 목록」에 적었습니다. */
  width: 1440px; max-width: none;
  margin-left: calc(50% - 720px);
  margin-right: calc(50% - 720px);
  word-break: normal; line-height: normal;
}
.D곁방, .D곁방 * { box-sizing: content-box; }


/* ══════════════════════════════════════════════════════════════
 * 작업창 — **시안 D 곁방 값 그대로** (2026-09-12, ■12절)
 *
 * ★★★ 사장님 — 「①번으로 해」. 마크업을 통째로 갈아 끼우면 `make.js` 가 찾는
 *   자리가 사라져 만들기가 멈추므로, **시안 구조로 새로 짜되 부품 열일곱을
 *   하나도 안 잃고** 심었습니다. 이 규칙들이 그 구조에 시안 옷을 입힙니다.
 *
 * ★ 값은 시안의 인라인 스타일에서 한 줄씩 읽어 옮겼습니다 —
 *   겉 `grid 35fr 65fr` · 왼쪽 흰 바탕 패딩 `20px 90px` ·
 *   오른쪽 회색 `#f3f4f6` 패딩 20 · 브라우저 틀 둥글기 12 · 단추 둥글기 10.
 * ★ `.작업창D` 안에서만 걸어, 옛 규칙과 다른 화면에 안 닿습니다.
 * ══════════════════════════════════════════════════════════════ */
.진행판.작업창D {
  display: grid; grid-template-columns: 35fr 65fr;
  gap: 0; align-items: stretch;
  width: min(100vw, 1440px);
  margin-left: calc(50% - min(50vw, 720px));
  margin-right: calc(50% - min(50vw, 720px));
  min-height: 760px;                    /* 시안 본문 높이 */
}
.작업창D .작업왼쪽 {
  display: flex; flex-direction: column; gap: 14px;
  /* ★★★ **양옆 90px 이 못박혀 있었습니다** (2026-09-14, ■38절).
   *   시안은 1440 기준이라 왼쪽 칸이 504px 이고 90px 이 맞았습니다. 그런데
   *   화면이 961 이면 왼쪽이 336 이라 **180px 을 먹고 156px 만 남습니다** —
   *   글자가 「다 / 됐어요 / 8초」로 세로로 섰습니다.
   * ★ 사장님이 짚으신 「폭이 못박혀 잘린다」의 **형제**입니다.
   *   비례로 안 줄이고 **바닥(16)을 두고** 넓어지면 90 까지 갑니다. */
  padding: 20px clamp(16px, 5vw, 90px); background: #fff; min-width: 0;
}
.작업창D .작업오른쪽 {
  padding: 20px; background: #f3f4f6; min-width: 0;
  display: flex; flex-direction: column; gap: 12px;
}

/* 적은 한 줄 — 시안의 회색 상자 */
.작업창D .적은한줄이름 { font-size: 13px; line-height: 1.5; color: #98a0ab; margin: 0; }
.작업창D .적은한줄 {
  padding: 12px 16px; background: #f3f4f6; border-radius: 12px;
  font-size: 15px; line-height: 1.5; color: #101112;
}
.작업창D .적은한줄:empty { display: none; }

/* 걸음 넷 — 시안은 테두리 있는 한 칸에 모읍니다 */
.작업창D .진행단계 {
  display: grid; gap: 10px; padding: 14px 16px;
  border: 1px solid #e4e7ec; border-radius: 12px;
}
/* ★★★ **다 만들면 걸음을 감춥니다** (2026-09-14, ■38절 · 사장님 지적).
 *   위 한 줄이 2471줄의 `.다됨 .진행단계 { display: none }` 을 **덮고 있었습니다** —
 *   둘 다 클래스 둘이라 무게가 같고, **뒤에 나온 이것이 이깁니다.**
 *   그래서 다 만든 뒤에도 걸음이 왼쪽 칸의 **38%(313px)** 를 먹고
 *   정작 대화는 **5%(38px)** 만 남았습니다. 33절에 시안 D 로 새로 짜며
 *   옛 규칙을 안 보고 붙인 자리입니다.
 * ★ 「뒤에 나온 본문이 표를 이긴다」의 CSS 판입니다. */
.다됨 .작업창D .진행단계,
.작업창D .다됨 .진행단계,
.다됨.작업창D .진행단계 { display: none !important; }
.작업창D .단계줄 { display: grid; gap: 10px; }
.작업창D .단계 { display: flex; align-items: center; gap: 10px;
                 font-size: 15px; line-height: 1.5; color: #98a0ab; }
.작업창D .동그라미 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid #cad0d9; background: transparent;
  font-size: 11px; color: #98a0ab; flex: none;
}
.작업창D .단계.됨 { color: #101112; }
.작업창D .단계.됨 .동그라미 { background: #202124; border-color: #202124; color: #fff; }
.작업창D .단계.지금 .동그라미 { border: 2px solid #101112; }
.작업창D .지금뭐하나 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0; font-size: 13px; line-height: 1.5; color: #646b76;
}
.작업창D .작업시계 { font-family: "JetBrains Mono", ui-monospace, monospace; color: #101112; }

/* 왼쪽 아래 — 단추 둘과 입력칸 */
.작업창D .작업아래 { margin-top: auto; display: grid; gap: 12px; }
.작업창D .작업단추줄 { display: flex; gap: 8px; }
.작업창D .작업단추 {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 1; height: 40px; border-radius: 10px; font-size: 15px;
  font-family: inherit; cursor: pointer;
  border: 1px solid #e4e7ec; background: #fff; color: #101112;
}
/* ★ 「올리기」는 **다 되기 전에는 눌리지 않는 꼴**입니다 — 시안 값 #cad0d9 */
.작업창D .올리기단추 { background: #cad0d9; border-color: #cad0d9; color: #fff; }
.작업창D .올리기단추:disabled { cursor: default; }
.작업창D .진행판.다됨 .올리기단추,
.작업창D.다됨 .올리기단추 { background: #202124; border-color: #202124; color: #fff; }

/* 미리보기 — 브라우저 틀 */
.작업창D .미리틀 {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: #fff; border-radius: 12px; overflow: hidden;
  border: 1px solid #e4e7ec;
}
.작업창D .미리위 {
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 38px; background: #fafafb;
  border-bottom: 1px solid #e4e7ec; flex: none;
}
.작업창D .판점 { width: 10px; height: 10px; border-radius: 50%;
                 background: #e4e7ec; display: inline-block; flex: none; }
.작업창D .미리주소 {
  margin: 0 auto; padding: 2px 12px; background: #fff;
  border: 1px solid #e4e7ec; border-radius: 6px;
  font-size: 13px; line-height: 1.5; color: #646b76;
}
.작업창D .기기토글 { display: flex; gap: 4px; flex: none; }
.작업창D .미리한칸 { flex: 1; min-height: 0; display: flex; }
.작업창D .미리빈칸 {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #98a0ab; font-size: 15px; line-height: 1.5; text-align: center; padding: 24px;
}

/* 폰 — 시안은 한 칸으로 내려옵니다 */
@media (max-width: 860px) {
  .진행판.작업창D { grid-template-columns: 1fr; min-height: 0; }
  .작업창D .작업왼쪽 { padding: 16px; }
  .작업창D .작업오른쪽 { padding: 12px; }
  /* ★★ **미리보기가 위, 대화가 아래**입니다 — 폰 시안 D 의 차례 그대로
       (2026-09-13, ■15절 ⑤). 우리는 PC 차례(왼쪽=대화 → 오른쪽=미리보기)가
       그대로 내려와 **반대**였습니다. 자리만 바꿉니다 — 마크업은 안 건드립니다.
     ★ 손님이 폰에서 먼저 볼 것은 **만들어진 화면**입니다. 대화는 그 아래에서 잇습니다. */
  .작업창D .작업오른쪽 { order: 1; }
  .작업창D .작업왼쪽  { order: 2; }
}


/* ══ 작업창 — **옛 규칙이 시안을 덮던 자리 셋** (2026-09-12, 그 자리에서 고친 예외) ══
 *
 * ★ 재서 찾았습니다 (`_이긴것` 그물) — 잣대를 하나씩 물어 **어느 규칙이 이기는지** 봤습니다.
 * ★ 셋 다 **`.작업창D` 안에서만** 껐습니다. 옛 규칙은 **지우지 않았습니다** —
 *   랜딩과 기능 쪽이 같은 이름을 씁니다.
 */

/* ① 미리보기가 **빗금**이었습니다 — `.미리빈칸` 의 repeating-linear-gradient.
      시안은 **흰 바탕에 회색 글자 한 줄**입니다. */
.작업창D .미리빈칸 {
  background: #fff;
  color: #98a0ab;
}

/* ② 손님 말풍선이 **노란 덩어리**였습니다 — `.내말` 의 `background: var(--honey)`.
      시안은 **옅은 회색 상자**(#f3f4f6)에 검은 글씨입니다. */
.작업창D .내말 {
  background: #f3f4f6; color: #101112;
  border-radius: 12px; padding: 12px 16px; max-width: 92%;
}
.작업창D .내말줄 { margin: 0 0 10px; }

/* ③ 걸음 넷이 **세로로 벌어져** 보였습니다 — 동그라미와 글 사이가 멀어서입니다.
      시안은 한 줄에 붙고 줄 사이가 10px 입니다. */
.작업창D .단계 { justify-content: flex-start; }
.작업창D .단계이름 { flex: 1; min-width: 0; text-align: left; }


/* ══ 기능 쪽 — **시안 D 를 덮은 것** (2026-09-13, ■13절 ③) ══
 * ★ 곁방(`.D곁방`)·랜딩 절(`.D절들`)과 **같은 규칙**입니다 —
 *   시안은 1440 고정 틀이라 넓은 화면에서도 1440 으로 묶고 가운데에 둡니다.
 * ★ 부모(`main.감`) 좌우 패딩을 벗어나고, 시안 마크업 안은 **content-box** 입니다.
 */
.D기능쪽 {
  /* ★★ **1440 고정**입니다 — `min(100vw, 1440px)` 로 두었더니 폰 390 에서
     칸이 눌려 **글자가 한 줄에 한 글자씩 세로로 쪼개졌습니다.**
     랜딩 절에서 겪은 것과 같은 자리입니다(그때는 `max-width:100%` 를 뺐습니다).
     시안은 **1440 전제로 그린 것**이라, 좁은 화면에서는 **옆으로 넘치게** 두는 것이
     시안과 같은 상태입니다. 눌러서 쪼개는 것보다 낫습니다.
     ★ 시안 곁방에 폰 화면이 있는데 아직 안 뽑았습니다 — 「고칠 목록」에 적었습니다. */
  width: 1440px; max-width: none;
  margin-left: calc(50% - 720px);
  margin-right: calc(50% - 720px);
  word-break: normal; line-height: normal;
}
.D기능쪽, .D기능쪽 * { box-sizing: content-box; }


/* ══════════════════════════════════════════════════════════════
 * 왼쪽 붙박이 목록 — **사장님이 정하신 대로** (2026-09-13, ■14절 ②)
 *
 * ★★★ 사장님 —
 *   · 화면 **세로 가운데쯤**에 붙어 조용히 따라옵니다
 *   · 절이 다 끝나면 같이 떨어져 나갑니다
 *   · 지금 절만 진한 검정, 나머지는 흐린 회색
 *   · **네모 테두리를 치지 마십시오**
 *   · 왼쪽 얇은 세로줄이 절이 바뀌면 **부드럽게** 옮겨 갑니다
 *   · 폰 390 에서는 숨깁니다
 *
 * ★★ **재서 알았습니다** (`node loop/붙박이목록-재기.mjs`) —
 *   시안은 `sticky; top: 96px` 이라 **화면 위쪽**에 붙고 아래가 텅 빕니다.
 *   사장님이 「세로 가운데쯤」이라 하셨으니 **사장님 것을 따릅니다**(저쪽 지시 그대로).
 *   시안 값 96 은 지우지 않고 여기 적어 둡니다.
 *
 * ★★ 「네모」의 정체 — 마우스를 올리면 **`<a>` 의 기본 밑줄**이 나옵니다.
 *   테두리도 outline 도 아니었습니다. **재서** 알았습니다(캡처로 확인).
 *
 * ★ 색·굵기·세로줄 값은 **시안 그대로**입니다 —
 *   지금 것 `#101112` 굵기 600 · 왼테 `2px #101112`
 *   나머지 `#98a0ab` 굵기 500 · 왼테 `2px transparent`
 *   목록 겉의 세로줄 `1px #e4e7ec`
 * ══════════════════════════════════════════════════════════════ */

/* 목록을 화면 **세로 가운데**에 — 목록 높이가 248 이라 그 절반을 뺍니다 */
.D절[data-D절="왼쪽붙박이-절다섯"] [style*="sticky"] {
  top: calc(50vh - 124px) !important;
}

/* ★ 마우스를 올려도 **밑줄이 안 나옵니다**. 네모도 안 칩니다 */
.D절[data-D절="왼쪽붙박이-절다섯"] a {
  text-decoration: none;
}
.D절[data-D절="왼쪽붙박이-절다섯"] a:hover,
.D절[data-D절="왼쪽붙박이-절다섯"] a:focus,
.D절[data-D절="왼쪽붙박이-절다섯"] a:focus-visible {
  text-decoration: none;
  border-color: inherit;      /* 왼쪽 세로줄만 남깁니다 */
  outline: none;
  box-shadow: none;
  background: none;
}
/* 눈으로 못 보는 분을 위해 — 키보드로 올 때는 **왼쪽 줄이 진해집니다** */
.D절[data-D절="왼쪽붙박이-절다섯"] a:focus-visible {
  border-left-color: #98a0ab !important;
}

/* ★ 세로줄과 글자색이 **부드럽게** 옮겨 갑니다 */
.D절[data-D절="왼쪽붙박이-절다섯"] a {
  transition: border-left-color .28s ease, color .28s ease, font-weight .28s ease;
}

/* ★ 폰에서는 **숨깁니다** — 시안이 1440 전제라 폰에서 자리가 없습니다 */
@media (max-width: 860px) {
  .D절[data-D절="왼쪽붙박이-절다섯"] [style*="sticky"] { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
 * ★★★ **주요기능 서랍 — 왼쪽 묶음 여섯 · 오른쪽 칸** (2026-09-13, ■18절 ⑤)
 *   Design 이 고친 것을 그대로 옮겼습니다.
 *
 *   앞서는 여섯 묶음이 **가로로 다 펼쳐져** 화면을 거의 덮었고 아래쪽 칸이 잘렸습니다.
 *   이제 왼쪽에 이름만 세로로 서고, 마우스를 올린 묶음의 칸들이 오른쪽에 나옵니다.
 *
 *   · **120ms 머물러야** 바뀝니다(지나치는 묶음은 무시 — 깜빡임 0) … `new.js`
 *   · 바뀔 때 오른쪽이 **150ms ease-out** 으로 사라졌다 나타납니다
 *   · 열자마자 **첫 묶음**이 골라져 있습니다
 *   · 칸 수와 「준비 중」 알약은 **그대로**입니다 — 마크업을 안 건드렸습니다
 * ══════════════════════════════════════════════════════════════ */
/* ★★ 치수는 **Design 시안을 열어 재서** 옮겼습니다 —
     서랍 **880x382** · 왼쪽 목록 **220** · 오른쪽 **658** · 칸은 **2열 307px, 틈 4/12**.
   ★ 처음엔 폭을 안 묶어 1280x766 이 됐고 **오른쪽이 텅 비었습니다** —
     칸이 한 줄로만 서서 세로로 길어졌기 때문입니다. 찍어서 눈으로 보고 잡았습니다. */
.머리서랍.서랍넓게 { width: 880px; max-width: calc(100vw - 32px); }
.머리서랍.서랍넓게 .서랍묶음들 {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
/* 오른쪽 칸 — **2열** (Design 실측 307px · 틈 4/12) */
.머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나="1"].서랍묶음 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 12px;
  align-content: start;
}
/* 묶음 제목은 오른쪽 맨 위에 **한 줄 통째로** */
.머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나="1"] .묶음제목 { grid-column: 1 / -1; }
/* 왼쪽 — 묶음 이름 여섯만 */
.서랍옆목록 {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 8px 8px 0; border-right: 1px solid #e4e7ec;
  align-self: stretch;
}
.서랍옆줄 {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: inherit; font-size: 15px; line-height: 1.5;
  color: #646b76; font-weight: 500;
  padding: 10px 14px; border-radius: 10px;
  /* ★ Design 값 — 바뀔 때 **150ms** */
  transition: background-color .15s ease-out, color .15s ease-out;
}
.서랍옆줄[aria-selected="true"] { background: #fff; color: #101112; font-weight: 600; }
.서랍옆줄:hover { color: #101112; }

/* 오른쪽 — **하나만** 보입니다 */
.머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나] { display: none; padding-left: 20px; }
.머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나="1"] { display: block; }
/* ★ 바뀌는 동안 **150ms ease-out** 으로 옅어졌다 나타납니다 */
.머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나="1"] { opacity: 1; transition: opacity .15s ease-out; }
.머리서랍.서랍넓게 .서랍묶음들[data-dd-흐림="1"] > [data-dd-골랐나="1"] { opacity: 0; }

/* ★ 폰은 **지금처럼 햄버거 → 접힌 목록**입니다. 서랍 짜임을 안 씁니다 */
@media (max-width: 900px) {
  .머리서랍.서랍넓게 .서랍묶음들 { display: block; }
  .서랍옆목록 { display: none; }
  .머리서랍.서랍넓게 .서랍묶음들 > [data-dd-골랐나] { display: block; padding-left: 0; opacity: 1; }
}

/* ★★★ **폰 히어로의 두 단추도 「둘 다 흰 바탕 · 검은 그림」** (2026-09-13)
 *
 *   사장님 (2026-09-12) — 「흰 입력칸 안에 검은 덩어리가 들어가 **튑니다.**
 *   둘 다 흰 바탕에 검은 그림으로. **테두리도 둘이 같게** 하십시오.」
 *
 * ★ 그 말은 **이 입력줄의 두 단추**에 대한 것이라, PC 만 고치고 폰을 두면
 *   같은 줄이 폭에 따라 딴 모습이 됩니다. 폰 시안(Design)은 보내기가
 *   `rgb(32,33,36)` 채움이고 마이크가 회색이라 **사장님이 짚으신 그 모습**입니다.
 * ★ 폰 시안 값은 **인라인**이라 `!important` 로만 덮입니다.
 *   크기(44) · 둥글기(50%) · 틈(8px) 은 **시안 그대로 둡니다** — 색만 맞춥니다.
 */
@media (max-width: 860px) {
  .D폰 #폰말로하기,
  .D폰 #폰보내기 {
    background: #fff !important;
    border: 1px solid #e4e7ec !important;
    color: #202124 !important;
  }
  /* 보내기 안의 막대는 흰색이라 흰 바탕에서 안 보입니다 — 검게 */
  .D폰 #폰보내기 > span { background: #202124 !important; }
}


/* ══════════════════════════════════════════════════════════════
 * ★★★ 헤더 - **attio.com 결로** (사장님, 2026-09-13)
 *
 *   「헤더 바 위치와 메뉴 옆 화살표를 attio.com 결로 맞춰 주세요.
 *    메뉴 사이 간격도 좀 더 벌려 주세요.
 *    색 · 글자 · 짜임은 지금 시안 그대로입니다.」
 *
 *   재서 옮겼습니다 (`node loop/22-Attio머리-재기.mjs` · `docs/Attio머리.json`).
 *   **파일 맨 끝**에 둡니다 - 앞쪽에 두면 뒤의 옛 규칙이 이깁니다(같은 자리에서 두 번 물렸습니다).
 * ══════════════════════════════════════════════════════════════ */

/* ① **로고를 흰색과 검은색만으로.** 노랑 변수를 로고 안에서만 덮습니다.
 *
 * ★★ 사장님은 **헤더**를 말씀하셨는데 **로고 셋 다** 맞췄습니다 —
 *   머리(`.로고`) · 발(`.발로고`) · 시안 마무리 절의 글자 로고(`[data-dd-logo]`).
 *   한 사이트에서 위는 흑백이고 아래는 노랑이면 **같은 상표가 두 모습**이 됩니다.
 *   「모양 값은 한 곳에 둡니다」(CLAUDE.md) 와 같은 줄입니다.
 *   되돌리려면 **아래 줄에서 `.발로고, [data-dd-logo]` 만 빼면** 됩니다.
 *
 * ★ 손님 결과물이 쓰는 `public/p.html` 의 원본 벌은 **안 건드립니다** —
 *   나간 판 전부가 그것을 씁니다. */
.로고, .발로고, [data-dd-logo] { --로고노랑: #ffffff; --벌줄: #ffffff; }
.로고bee, .발로고 .로고bee { color: var(--로고먹); }
/* 흰 날개는 흰 바탕에서 안 보이니 **윤곽을 또렷하게** 합니다 — 그래야 벌로 읽힙니다.
   확대해서 눈으로 보고 정했습니다 (`docs/캡처/2026-09-13-머리/로고-확대.png`). */
.벌 ellipse[stroke] { opacity: 1; }
/* 검은 절·어두운 머리에서는 거꾸로 — 몸통이 희어지니 날개·줄무늬를 먹으로,
   「bee」 글자는 흰색으로. 여기서도 **노랑은 안 씁니다.** */
.검은바탕 .로고, .검은절 .로고,
.검은바탕 .발로고, .검은절 .발로고,
.검은바탕 [data-dd-logo], .검은절 [data-dd-logo],
.D절[data-D절="검은마무리"] [data-dd-logo],
.D폰절[data-D절="검은마무리"] [data-dd-logo] { --로고노랑: #101010; --벌줄: #101010; }
.검은바탕 .로고bee, .검은절 .로고bee { color: #ffffff; }
/* ★★★ 시안 마무리 절의 로고는 **`[data-dd-logo]` 그 자체가 노랑 span** 입니다 —
 *   `<span style="color: rgb(254,229,0)">bee<svg>…` 꼴이라, 안의 벌 그림이
 *   `currentColor` 로 **그 노랑을 물려받습니다.** 변수만 덮어서는 안 바뀝니다.
 * ★ 찍어서 눈으로 보고 알았습니다 — 그물은 「노랑 0곳」이라 했는데
 *   캡처에는 노랑이 그대로였습니다. 「글자가 보인다고 화면에 보이는 것이 아니다」의 거울입니다.
 * ★ 인라인 색이라 `!important` 로만 덮입니다. 검은 절이니 **흰색**입니다. */
[data-dd-logo] { color: #ffffff !important; }
[data-dd-logo] svg * { fill: currentColor; }
/* 벌 줄무늬만 바탕색으로 뚫습니다 — 안 그러면 흰 덩어리가 됩니다 */
[data-dd-logo] svg rect { fill: #101010; }

/* ★ 발로고(`new.js` 가 만드는 것)는 **검은 띠 안**에 있습니다 —
     `.검은절` 클래스가 안 붙어 있어 「bee」가 먹으로 남아 안 보였습니다. 재서 봤습니다. */
.발 .발로고 .로고bee, .발 .발로고 .로고글자 { color: #ffffff; }
.발 .발로고 { --로고노랑: #101010; --벌줄: #101010; }
.발 .발로고 .벌 { color: #ffffff; }

/* ② **바 위치** - Attio 는 로고가 화면 왼쪽 **20px**, 오른쪽 단추가 **24px** 입니다.
      우리는 기둥 1396px + 패딩 24px 이라 로고가 **46px** 에 있었습니다(재서 봤습니다).
      기둥은 그대로 두고 **안쪽 여백만** Attio 결로 좁힙니다 - 짜임은 안 건드립니다. */
.꼭대기 .머리기둥 { max-width: 1440px; padding: 0 20px; }

/* ③ **메뉴 사이를 더 벌립니다.** Attio 는 글자 끝 ~ 다음 글자 시작이 **39px**,
      우리는 **28px** 이었습니다. 같은 결이 되게 40px 로 둡니다.
      로고와 메뉴 사이도 Attio(로고 오른끝 → 첫 메뉴 32px)에 맞춥니다. */
.꼭대기 .머리메뉴 { gap: 40px; margin-left: 32px; }

/* ④ **꺾쇠**를 Attio 결 쉐브론으로. 18×18 · stroke-width 1.2 · 글자와 6px.
      그전에는 「▾」 **글자**라 글꼴마다 모양이 달랐습니다. */
.꼭대기 .머리말 { gap: 6px; }
.꼭대기 .꺾쇠 { width: 18px; height: 18px; display: block; flex: none; font-size: 0; }


/* ══════════════════════════════════════════════════════════════
 * ★★★ 히어로 작은 것 셋 (2026-09-13, ■23절 ③)
 * ══════════════════════════════════════════════════════════════ */

/* ① **부제와 입력칸 사이를 띄웁니다.**
 *
 *   저쪽 — 「「나머지는 저희가 만들어 드립니다」와 입력칸이 **붙어 한 덩어리로 읽힙니다.**
 *   Attio 는 부제와 단추 사이가 넉넉합니다.」
 *
 * ★ 재 보니 우리는 **18px**, Attio 는 **24px** 이었습니다. 그런데 **px 을 그대로 옮기면 안 됩니다** —
 *   Attio 부제 줄높이가 23.5px, 우리는 36.4px 이라 같은 24px 이 우리 쪽에서는 더 빡빡합니다.
 *   「기둥 폭이 다르면 px 이 아니라 몇 칸을 옮긴다」(CLAUDE.md) 대로 **줄높이 대비**로 옮깁니다 —
 *   24 / 23.5 = 1.02 배 → 36.4 × 1.02 ≈ **37px**.
 * ★ 입력틀만 내립니다. 히어로의 못박은 값(무대 높이 · 창 자리)은 `top` 으로 재는 것이라 안 밀립니다. */
.히어로D .입력틀 { margin-top: 23px; }   /* 18 + 19 = 37px 이 됩니다 */

/* ② **「입력칸 첫 글자가 잘린다」는 재서 못 찾았습니다.** 고칠 것이 없었습니다.
 *
 *   저쪽 — 「「달빛카페」의 「달」 왼쪽 위 모서리가 깎여 보입니다.」
 *
 *   세 폭을 다 재고 **4배로 확대해 찍어 눈으로 봤습니다** —
 *   · 1440 · 1880 — 칸 높이 32 · `scrollHeight` 32 → 안 넘칩니다
 *   · 폰390       — 칸 높이 24 · `scrollHeight` 24 → 안 넘칩니다
 *   · 자리표시로도, 글을 넣고도 「달」이 멀쩡했습니다
 *   (`docs/캡처/2026-09-13-히어로/입력칸-*.png`)
 *
 * ★ 폰에서 자리표시 끝(「…메뉴랑」)이 마이크에 **닿아 보이는데**, 재 보면
 *   칸 오른쪽 279 · 마이크 왼쪽 279 로 **안 겹칩니다.** 자리표시가 `nowrap` 으로
 *   칸 끝에서 잘리는 **시안 그대로의 모습**입니다 — 시안 자리표시도 거기서 끊깁니다.
 *   그래서 **한 줄도 안 고쳤습니다.** 멀쩡한 것을 고치면 시안에서 멀어집니다. */

/* ③ 로고 벌과 「Makebee」 사이는 **사장님이 고르십니다.**
 *   지금 값과 더 좁힌 것을 나란히 찍어 올립니다 (`node loop/23-로고사이-나란히.mjs`).
 *   고르신 뒤에 여기 한 줄로 박습니다. 지금은 안 건드립니다. */

/* ══════════════════════════════════════════════════════════════
 * ★★★ 못 만드는 것 **안내 창** (2026-09-13, ■24절 ①)
 *
 *   사장님 결정 — 「못 만드는 것을 시키면 안내 창을 띄웁니다.」
 *
 *   여태는 못 만드는 것을 시켜도 **가정해서 뭔가를 냈습니다** —
 *   손님은 된 줄 알고 그 링크를 자기 손님에게 보냅니다.
 *
 * ★ 색 · 글자 · 여백 · 둥글기는 **지금 시안 그대로**입니다.
 *   새 색을 하나도 안 만들었습니다 — `--ink` · `--ink-soft` · `--border` · `--white` 만 씁니다.
 * ★ 폰에서 누르는 것은 **44px 이상**.
 * ══════════════════════════════════════════════════════════════ */
.못만듦덮개 {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  /* 덮개는 먹을 옅게 — 새 색이 아니라 있는 먹의 투명도입니다 */
  background: oklch(22% 0.01 90 / 0.32);
}
.못만듦칸 {
  width: 100%; max-width: 440px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;                 /* 시안 카드 값 */
  padding: 28px 24px 20px;
  box-shadow: 0 16px 32px -14px oklch(20% 0.01 90 / 0.22);   /* 서랍과 같은 그림자 */
  text-align: left;
}
.못만듦제목 {
  margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.못만듦줄 {
  margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--ink-soft);
}
/* 무엇으로 바꿔 주는지 — 한 칸 띄워 눈에 들어오게 */
.못만듦덧줄 {
  margin: 14px 0 0; padding: 12px 14px;
  background: var(--bg-soft); border-radius: 10px;
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}
.못만듦단추줄 {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px;
}
.못만듦단추 {
  min-height: 44px;                    /* 폰에서 누르는 것은 44 이상 */
  padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--white);
  font: inherit; font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.못만듦단추:hover { background: var(--bg-soft); }
/* 첫 단추(「○○으로 만들기」)만 채웁니다 — 손님이 무엇을 누를지 한눈에 */
.못만듦단추.못만듦첫단추 {
  background: var(--ink); color: var(--white); border-color: var(--ink);
  font-weight: 600;
}
.못만듦단추.못만듦첫단추:hover { opacity: .9; background: var(--ink); }

@media (max-width: 860px) {
  /* 폰에서는 단추를 세로로 쌓습니다 — 나란히 두면 글자가 줄바꿈되어 읽기 나쁩니다 */
  .못만듦단추줄 { flex-direction: column; }
  .못만듦단추 { width: 100%; }
  .못만듦칸 { padding: 24px 18px 18px; }
  .못만듦제목 { font-size: 20px; }
}

/* ★ **발로고와 시안 마무리 절 로고도 같게** 합니다 (2026-09-13, ■24절 ②).
     저쪽 — 「머리 · 발 · 시안 마무리 절 셋 다 같게 하십시오.」
     한 사이트에서 로고 사이가 자리마다 다르면 같은 상표가 세 모습이 됩니다. */
.발로고 .벌 { margin-right: -4px; }
[data-dd-logo] svg { margin-right: -4px; }

/* ══════════════════════════════════════════════════════════════
 * 가로 스크롤 막대 — **문서 뿌리에서 가로만 잘라 냅니다** (2026-09-13, 비상 ②)
 *
 * ★★★ 사장님 — 「화면 맨 아래 가로 스크롤 막대가 나옵니다.」 재 보니 **70px** 넘쳤습니다.
 *
 *   뿌리가 **둘**입니다 —
 *     ㉠ `.D절들` 과 `.히어로.히어로D` 가 `width: 100vw` 로 폭을 잡습니다.
 *        **`100vw` 는 세로 스크롤바를 포함한 폭**이라, 막대가 있으면 **늘 15px 넘칩니다.**
 *        (잰 값 — `innerWidth` 958 · `clientWidth` 943)
 *     ㉡ 시안 D 절 안에 **1,080px 고정** 목업이 있습니다(잰 값 1,082px).
 *        시안이 1440 전제로 그린 것이라 958px 화면에서 그대로 넘칩니다.
 *
 * ★★ ㉠ 은 `100vw` 를 쓰는 자리가 **열다섯**이라 하나씩 고치면 다음에 또 갈라집니다.
 *   ㉡ 은 시안 전제상 좁은 화면에서 **잘리는 것이 맞습니다**(폰 860 아래는 폰 시안이 맡습니다).
 *   그래서 자리마다 고치지 않고 **뿌리에서 한 번** 잘라 냅니다.
 *
 * ★★★ **`hidden` 이 아니라 `clip` 입니다.** `hidden` 은 스크롤 컨테이너를 만들어
 *   `position: sticky` 인 헤더(`.꼭대기`)와 무대(`.히어로D .무대`)를 깹니다.
 *   `clip` 은 안 만듭니다. 고친 뒤 **둘 다 붙어 있는지 재서 봤습니다.**
 * ★ **세로는 그대로** 둡니다 — `overflow` 를 통째로 걸면 쪽이 안 내려갑니다.
 * ★ 그물 잣대도 같이 고쳤습니다. 여태 「화면 밖 0」만 봐서 통과였는데,
 *   사장님 눈에는 막대가 보였습니다. 이제 **쪽 전체 폭이 화면 폭보다 큰지**를 같이 셉니다.
 *
 * ★★★ **`html` 이 아니라 `body` 입니다 — 재서 알았습니다.**
 *   `html { overflow-x: clip }` 을 먼저 걸었는데 계산된 값은 `clip` 인데도
 *   **여전히 68px 밀렸습니다.** `html` 의 overflow 는 뷰포트로 **전파**되는데
 *   크롬이 `clip` 은 그렇게 안 다룹니다. `body` 에 걸면 body 가 **직접** 잘라 냅니다.
 *   넷을 그 자리에서 넣어 보고 골랐습니다 —
 *     `html{clip}` 68px 밀림 · `body{clip}` **0** · `.판{clip}` 0 · `.판{hidden}` 0
 *
 * ★★★ **둘 다 있어야 합니다 — 하나만 두면 안 잘립니다.**
 *   위 시험에서 `body{clip}` 이 0 이 나온 것은 그때 **`html{clip}` 이 이미 걸려 있어서**
 *   였습니다. 그것을 모르고 `html` 을 빼고 `body` 만 남겼더니 **69px 이 다시 밀렸습니다.**
 *   까닭 — `html` 의 overflow 가 `visible` 이면 **`body` 의 것이 뷰포트로 전파**되고
 *   `body` 자신은 `visible` 처럼 굴어 **안 자릅니다.** `html` 이 `visible` 이 아니면
 *   전파는 `html` 것이 맡고 **`body` 가 직접 자릅니다.**
 *   「같은 일을 하는 길이 둘이면 하나만 보고 말하지 않는다」와 같은 줄입니다 —
 *   **재고 나서 하나를 뺐다가 그 잰 값이 왜 그랬는지를 몰랐습니다.**
 * ══════════════════════════════════════════════════════════════ */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ══════════════════════════════════════════════════════════════
 * 직원 쪽 셋 — **옛 규칙을 끕니다** (2026-09-13, ■26절 ①)
 *
 * ★★★ 저쪽 — 「**옛 규칙이 시안을 덮는지 화면마다 보십시오. 지우지 말고 끄십시오.**」
 *   재 보니 `h1` 에 브라우저 기본 여백 **위아래 26.8px**, `p` 에 **아래 17px** 이
 *   그대로 붙어 있었습니다. 시안은 `h1,h2,h3,p{margin:0}` 을 깔고 그린 것이라
 *   제목과 한 줄 사이가 **시안 29px · 우리 43px** 로 벌어졌습니다.
 *
 * ★ **`[data-D곁방^="staff"]` 안에서만** 끕니다 — 옛 곁방(보관함·마이페이지·요금)은
 *   한 글자도 안 건드립니다. 전역으로 끄면 나간 화면이 같이 움직입니다.
 * ★ 시안이 제 자리에 적어 둔 여백(`margin-top: 8px` 같은 인라인)은 **그대로 이깁니다** —
 *   인라인이 규칙보다 세기 때문입니다.
 * ══════════════════════════════════════════════════════════════ */
[data-D곁방^="staff"] h1,
[data-D곁방^="staff"] h2,
[data-D곁방^="staff"] h3,
[data-D곁방^="staff"] p { margin: 0; }

/* ══════════════════════════════════════════════════════════════
 * 폰 390 헤더 — **파일 맨 끝에 둡니다** (2026-09-13, 비상 ②)
 *
 * ★★★ 같은 규칙을 **파일 앞쪽**(430px 미디어 쿼리 안)에 넣었더니 **안 먹었습니다.**
 *   ■22절에서 더한 `.꼭대기 .머리기둥 { padding: 0 20px }` 가 **파일 뒤에** 있어
 *   힘이 같고 **뒤엣것이 이깁니다.** 재 보니 `padding-left` 가 그대로 **20px** 이었습니다.
 *   「지시문은 표와 본문이 다르면 모델이 아래쪽을 믿는다」와 같은 줄입니다 —
 *   **CSS 도 아래쪽이 이깁니다.** 넣고 나서 **잰 값으로 확인**해야 압니다.
 *
 * ★ 잰 값 (390 · 로그인 전) — 기둥 358 · 로고 140 · 윗오른쪽 123
 *   (「로그인」 58 + 「무료로 시작하기」 104 + 사이 6) · 넘침 **9px**
 * ★ **글자는 안 줄입니다.** 단추 안 여백만 11 → 8 로 (단추 둘 × 좌우 = 12px 범).
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {
  .꼭대기 .머리기둥 { padding: 0 12px; }
  .꼭대기 .윗오른쪽 .윗단추 { padding: 0 8px; }
  .꼭대기 .윗오른쪽 { min-width: 0; gap: 6px; }
}

/* ══════════════════════════════════════════════════════════════
 * 히어로 큰 창 — **Attio 결 두 단** (2026-09-13, ■28절 ①-3 · 사장님 결정)
 *
 * ★★★ 사장님 — 「Attio 는 큰 창 비율이 **두 단**입니다 — 768~959 에서 **66.7%**,
 *   1024 위에서 **75%**. 우리는 모든 폭에서 75% 고정입니다. **Attio 와 맞추십시오.**
 *   폭마다 따로 못박지 말고, **어느 금에서 꺾이는지로** 두십시오.」
 *
 * ★★ 잰 값 (`docs/28-attio-폭마다.json`, 2026-09-13 · 열한 폭) —
 *     390 **83.3%** · 600 **93.3%** · 768·900·959 **66.7%** · 1024~1880 **75%**
 *   → **금이 셋**입니다: 1024 · 768 · 601. 폭마다 못박지 않습니다.
 *
 * ★ **1024 위로는 한 글자도 안 바뀝니다** — 여태 쓰던 `75vw` 그대로입니다.
 * ★★ 좁아져 큰 창이 작아지면 **옆 창 자리가 늘어납니다.** 겹침과 잘림이 어떻게 되는지는
 *   `28-좁은화면-재기.mjs` 가 폭마다 옆 창 왼~오를 찍어 보여 줍니다.
 * ★ 860 아래는 폰 시안이 히어로를 통째로 맡아 `.히어로D` 가 숨습니다 —
 *   600·390 값은 **그 금이 바뀌는 날을 위해** 적어 둡니다. 지금은 안 듭니다.
 * ══════════════════════════════════════════════════════════════ */
/* ★★★ **`.히어로D .가운데창` 에 걸어야 합니다.** 처음에 조상(`.히어로.히어로D`)에
 *   걸었더니 **안 들었습니다** — `--창폭` 이 **가운데창 자신**에 선언돼 있어
 *   자기 것이 이깁니다(900 에서 그대로 675px = 75% 였습니다). 재서 알았습니다.
 * ★★ **왼쪽 자리도 같이** 옮깁니다. 큰 창이 좁아지면 남는 여백이 늘어나므로
 *   `left` 를 `(100 - 비율) / 2` 로 둡니다 — Attio 도 그렇습니다
 *   (900 에서 왼쪽 150 = **16.7%** · 1440 에서 180 = **12.5%**). */
/* ★★ `--창폭` 도 `left` 도 **가운데창에** 겁니다 (■29절 ⑦ 에서 되돌림).
     한때 `--창폭` 만 `.히어로.히어로D` 로 올렸다가 큰 창이 커졌습니다. */

/* ★★★ **첫 창 폭은 어느 폭에서나 75%** 입니다 (2026-09-13, ■29절 ⑦).
 *   Design: `startR = 0.75` 한 값. 좁아져도 안 바뀌고, **끝 배율**로만 줄어듭니다.
 *
 * ★ 우리가 28절 ① 에서 재서 맞춘 값은 **Attio 두 단**이었습니다 —
 *   1024 위 75% · 768~959 **66.7%** · 601~767 93.3% · 600 아래 83.3%.
 *   잣대 8/8 로 「Attio 와 맞습니다 ○」까지 보고한 자리입니다.
 *   사장님이 「design 대로 옮겨」라 하셔서 **껐습니다. 지우지는 않았습니다** —
 *   아래 주석에 그대로 있습니다. 되살리려면 `.끈것` 을 떼면 됩니다.
 *
 *   @media (max-width: 1023px) { .히어로D .가운데창 { --창폭: 66.7vw; left: 16.65vw; } }
 *   @media (max-width: 767px)  { .히어로D .가운데창 { --창폭: 93.3vw; left: 3.35vw; } }
 *   @media (max-width: 600px)  { .히어로D .가운데창 { --창폭: 83.3vw; left: 8.35vw; } }
 */

/* ★★ 768~1100 은 **T0 가 다릅니다** — 제목이 작아 titleH 가 270 입니다 */
@media (max-width: 1099px) {
  /* ★ 같은 까닭으로 28px 더 (재서 잡음 — 959 입력칸 아랫변 462 → 462 + 130 = 592).
       옛 값: `max(564px, 58.5vh)` (사이 102). */
  .히어로D .가운데창 { --T0: max(592px, 58.5vh); }
}

/* ★★★ **옆 창은 1100 아래에서 안 섭니다** (2026-09-13, ■29절 ⑦).
 *   Design: `sides = W >= 1100`. 우리는 959 에서도 셋 다 서 있었습니다.
 *   ★ 지우지 않고 **숨깁니다** — 넓히면 그대로 돌아옵니다. */
@media (max-width: 1099px) {
  .히어로D .옆창 { display: none; }
}

/* ══════════════════════════════════════════════════════════════
 * 랜딩 절 — **좁으면 세로로 쌓습니다** (2026-09-13, ■28절 ①)
 *
 * ★★★ 사장님 — 「창을 줄이니 **아래 절도 다 무너집니다.** 글자가 한 글자씩 쪼개집니다.」
 *
 * ★★ 재서 찾은 것 — 900px 에서 쪼개진 줄 **37개가 전부 랜딩 절 안**이었습니다
 *   (왼쪽붙박이-절다섯 30 · 검은절 5 · 숫자 2). 부모 폭이 **11~31px** 까지 눌렸습니다.
 *   히어로는 옆 창에 바닥 폭을 주어 이미 나았습니다(위 `.히어로D .옆창`).
 *
 * ★★ 까닭 — 시안 절은 **1440 전제**입니다. 좌우 여백이 `180px` 못박혀 있어
 *   900 화면이면 여백만 **360px**, 속폭 540 에서 다시 갈라 칸 하나가 20px 대가 됩니다.
 *
 * ★★★ 저쪽 — 「**눌러서 줄이지 말고 세로로 쌓거나 개수를 줄이십시오. Attio 결입니다.**」
 *   Attio 를 열 폭에서 재 보니 정확히 그렇습니다(`docs/28-attio-폭마다.json`) —
 *   큰 창을 1024 위에서 **75%**, 768~959 에서 **66.7%** 로 두고
 *   옆 창은 **크기를 안 줄이고** 겹치게 둡니다. 크기가 아니라 **짜임**을 바꿉니다.
 *
 * ★★ **`!important` 를 씁니다.** 시안 마크업이 전부 **인라인 스타일**이라
 *   그것 말고는 덮을 길이 없습니다. 대신 **절 이름으로 좁게** 겨눕니다 —
 *   넷뿐이고 `.D절들` 밖으로는 한 곳도 안 닿습니다.
 * ★ **폭마다 따로 맞춘 것이 아닙니다** — 여백은 `clamp()` 한 줄이라 안 잰 폭에서도 맞고,
 *   짜임은 **한 금(1024)** 에서 한 번 바뀝니다.
 * ══════════════════════════════════════════════════════════════ */

/* ══ ⓪ **틀 셋을 화면에 맞춥니다** (2026-09-13, ■28절 ①-2) ══
 *
 * ★★★ 저쪽 — 「폭이 못박힌 315곳을 **자리마다 고치지 말고 같은 꼴끼리 묶어** 고치십시오.」
 *   세어 보니 **꼴이 하나**였습니다 — 「**시안 1440 틀**」입니다.
 *   `.D절들`(랜딩) · `.D곁방`(곁방 열) · `.D기능쪽`(기능 쪽 일곱) 셋이 **똑같이**
 *   `width: 1440px` + 음수 마진입니다. 959 화면에서 **왼쪽이 -240** 이라
 *   좌우 240px 씩 밖으로 나가 잘렸고, 그래서 **「반만 보이는 화면」이 94곳**이었습니다.
 *
 * ★★ 여태 1440 고정으로 둔 까닭은 위 `.D기능쪽` 주석에 적혀 있습니다 —
 *   「폭을 줄이면 글자가 쪼개져서 넘치게 두는 것이 시안과 같은 상태」.
 *   **그 대가가 「반만 보임」이었습니다.** 저쪽이 준 답이 그 사이를 뚫습니다 —
 *   **폭은 화면에 맞추되 안쪽을 세로로 쌓아** 안 눌리게 합니다(아래 ②).
 *
 * ★ **1440 위로는 한 글자도 안 바뀝니다.** 좁을 때만 듭니다.
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) {
  .D절들,
  .D곁방:not(.D폰곁방),
  .D기능쪽:not(.D폰기능쪽) {
    width: 100% !important; max-width: 100% !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* ① 좌우 여백 — 1440 에서는 180px 그대로, 좁아지면 **곡선으로** 줄어듭니다 */
@media (max-width: 1380px) {
  .D절들 .D절 > div,
  .D곁방:not(.D폰곁방) > div,
  .D기능쪽:not(.D폰기능쪽) > div {
    padding-left: clamp(16px, 6vw, 180px) !important;
    padding-right: clamp(16px, 6vw, 180px) !important;
  }
}

/* ② **1200 아래** — 세로로 쌓습니다 (틀 셋 모두)
 *
 * ★★ 처음엔 금을 **1024** 로 두었는데, 틀 셋을 화면 폭에 맞춘 뒤
 *   **1100 에서 쪼개진 줄 3** 이 되살아났습니다(「달빛카페 홈페이지」).
 *   1024 금 **위**라 안 쌓였는데 폭은 이미 좁아진 것입니다. **재서 1200 으로 올렸습니다.** */
@media (max-width: 1200px) {
  /* ★★ 곁방·기능 쪽은 시안 마크업이 **인라인 격자**라 이름으로 못 겨눕니다.
   *   `[style*="grid-template-columns"]` 로 **격자만** 집어 한 칸으로 쌓습니다.
   *   ★ 글자 칩처럼 **가로로 흘러도 되는 것**은 `flex` 라 안 걸립니다 — 격자만 듭니다.
   *   ★ 1024 위로는 한 글자도 안 바뀝니다. */
  .D곁방:not(.D폰곁방) [style*="grid-template-columns"],
  .D기능쪽:not(.D폰기능쪽) [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* 두 칸 격자 둘을 한 칸으로 */
  .D절들 [data-D절="왼쪽붙박이-절다섯"] > div,
  .D절들 [data-D절="검은절"] > div {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* ★ 왼쪽 목록은 **붙박이를 풉니다** — 세로로 쌓이면 붙박일 자리가 없습니다 */
  .D절들 [data-D절="왼쪽붙박이-절다섯"] > div > div:first-child {
    position: static !important;
    flex-direction: row !important; flex-wrap: wrap !important;
    border-left: 0 !important;
  }
  /* 숫자 절은 **안쪽** 격자가 셋입니다 */
  .D절들 [data-D절="숫자"] > div > div {
    grid-template-columns: 1fr !important;
  }
}

/* ══ 절로 건너뛰는 자리 — 붙박이 헤더에 안 가리게 (2026-09-14, ■31절 ①) ══
 *
 * ★★★ 사장님 — 「**「요금」과 「이렇게 만들어져요」를 눌러도 화면이 안 바뀝니다.**」
 *   재 보니 `/#pricing` · `/#howitworks` 가 **그런 자리가 없는 주소**였습니다
 *   (여섯 쪽 전부에서 · `31-안가는링크-세기`). 자리를 만들고 링크를 이었습니다.
 *   왼쪽 붙박이 탭 다섯(`가게 알리기`…)도 `href="#"` 이라 아무 데도 안 갔습니다.
 *
 * ★★ 헤더가 붙박이(108px)라 앵커로 가면 **제목이 그 밑에 숨습니다.**
 *   그래서 `scroll-margin-top` 을 줍니다 — 「간다」와 「보인다」는 다른 말입니다.
 * ★ 띠를 닫으셨으면 헤더가 44px 올라가니 여백도 같이 줄입니다.
 */
#howitworks, #howitworks-phone, #f1, #f2, #f3, #f4, #f5, #works {
  scroll-margin-top: calc(var(--머리높이, 108px) + 24px);
}
body.띠닫힘 #howitworks, body.띠닫힘 #howitworks-phone,
body.띠닫힘 #f1, body.띠닫힘 #f2, body.띠닫힘 #f3,
body.띠닫힘 #f4, body.띠닫힘 #f5, body.띠닫힘 #works {
  scroll-margin-top: calc(var(--머리높이, 108px) - 44px + 24px);
}
/* ★ 부드럽게 — 눌렀을 때 **움직이는 것이 보여야** 「화면이 바뀌었다」가 됩니다 */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ══ 절 다섯 화면이 **움직입니다** (2026-09-14, ■31절 ① 더하기) ══════════
 *
 * ★★★ 사장님 — 「**절 다섯 화면에 무엇이 움직이나.** 진짜 사진을 쓰지 않아도 됩니다.
 *   attio.com 처럼 그려 주신 화면이면 됩니다. 표·그래프·상태 딱지·진행 막대·
 *   알약처럼 **색을 지닌 조각**을 넣어 주세요.」
 *
 *   지금 목업은 **잘 그려져 있는데 정지 화면이고 검정·회색뿐**이었습니다(재서 봤습니다).
 *   그래서 ㉠ 줄이 하나씩 **차오르고** ㉡ 상태 글자가 **색 딱지**가 되고
 *   ㉢ 매출 막대가 **자라고** ㉣ 답하기 전에 **점 셋**이 뜹니다.
 *
 * ★★ **화면에 들어올 때만** 움직입니다 — `new.js` 가 `IntersectionObserver` 로
 *   `.움직임켬` 을 붙입니다. 맨 위에서 다 끝나 버리면 아무도 못 봅니다.
 * ★★ **한 번만** 움직입니다. 스크롤할 때마다 다시 돌면 어지럽습니다.
 * ★ `prefers-reduced-motion` 이면 **끝 모습으로 바로** 놓습니다 — 안 움직이지만
 *   색 딱지는 그대로입니다. 「안 보이게」가 아니라 「안 움직이게」입니다.
 */
.절줄 { opacity: 0; transform: translateY(10px); }
.움직임켬 .절줄 {
  animation: 절줄차오름 .52s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--차례, 0) * 90ms);
}
@keyframes 절줄차오름 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 상태 딱지 — **색을 지닌 알약** ── */
.상태딱지 {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 12px; line-height: 1.6; font-weight: 600;
  white-space: nowrap;
  /* ★ 딱지는 줄보다 **한 박자 늦게** 톡 나타납니다 — 그래야 「바뀌었다」로 보입니다 */
  opacity: 0; transform: scale(.82);
}
.움직임켬 .상태딱지 {
  animation: 딱지톡 .34s cubic-bezier(.2, 1.5, .4, 1) both;
  animation-delay: calc(var(--차례, 0) * 90ms + 380ms);
}
@keyframes 딱지톡 {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
/* ★★★ `!important` 입니다 — 목업의 **인라인 style 이 클래스를 이깁니다.**
   처음에 안 붙였더니 딱지가 다 붙었는데 **색이 하나도 안 들었습니다**
   (그물이 「딱지 4 · 색 0」으로 잡았습니다). 「집은 것이 정말 그것인지」의 자리입니다. */
.상태딱지.됨    { background: #e7f6ec !important; color: #137a3a !important; }   /* 받았어요 · 냈어요 */
.상태딱지.하는중 { background: #fff4d6 !important; color: #8a5a00 !important; }   /* 고치는 중 · 만드는 중 */
.상태딱지.막힘  { background: #fdecec !important; color: #b4232a !important; }   /* 품절 · 안 돼요 */
.상태딱지.아직  { background: #f1f3f6 !important; color: #6b7280 !important; }   /* 아직 */
/* ★ 딱지에 테두리가 인라인으로 붙어 있으면 알약이 두 겹으로 보입니다 */
.상태딱지 { border: 0 !important; }

/* ── 매출 막대가 **자랍니다** ──
 * ★★★ 이 막대는 **가로**입니다 — 겉이 80x6 이고 속이 width:55% 로 채웁니다.
 *   처음에 「세로로 긴 칸」을 찾았더니 **한 개도 못 찾았습니다**(막대 0).
 *   재는 법이 틀린 것이지 막대가 없는 것이 아니었습니다. */
.움직임켬 .자라는막대 {
  animation: 막대자람 .9s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--차례, 0) * 90ms + 240ms);
  transform-origin: 0 50%;
}
@keyframes 막대자람 {
  from { transform: scaleX(.02); }
  to   { transform: scaleX(1); }
}
/* ★ 겉 홈에 색을 줘서 **그래프로 보이게** 합니다 — 회색 위 검정은 그래프로 안 읽힙니다 */
.막대홈 { background: #eef1f5 !important; }
.자라는막대 { background: #137a3a !important; }

/* ── 답하기 전에 뜨는 **점 셋** ── */
.점셋 {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 12px; background: #f1f3f6;
}
.점셋 i {
  width: 6px; height: 6px; border-radius: 50%; background: #98a0ab;
  animation: 점깜빡 1.1s ease-in-out infinite;
}
.점셋 i:nth-child(2) { animation-delay: .16s; }
.점셋 i:nth-child(3) { animation-delay: .32s; }
@keyframes 점깜빡 {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .절줄, .상태딱지 { opacity: 1; transform: none; }
  .움직임켬 .절줄, .움직임켬 .상태딱지, .움직임켬 .자라는막대 { animation: none; }
  .점셋 i { animation: none; opacity: .6; }
}

/* ── 품절 스위치가 **내려갑니다** (사장님 지시) ──
 * ★ 켜진 스위치(속 동그라미가 오른쪽에 있는 것)만 움직입니다 —
 *   꺼진 것까지 움직이면 「다 켜졌다」로 보입니다.
 * ★ 겉은 회색에서 검정으로, 속은 왼쪽에서 오른쪽으로 미끄러집니다. */
.움직임켬 .스위치겉 {
  animation: 스위치켜짐 .5s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--차례, 0) * 90ms + 300ms);
}
.움직임켬 .스위치알 {
  animation: 스위치알미끄럼 .5s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--차례, 0) * 90ms + 300ms);
}
@keyframes 스위치켜짐 {
  0%, 25% { background: #dfe3e9; }
  100%    { background: #202124; }
}
@keyframes 스위치알미끄럼 {
  0%, 25% { transform: translateX(-14px); }
  100%    { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .움직임켬 .스위치겉, .움직임켬 .스위치알 { animation: none; }
}

/* ══ 맨 아래 검은 절의 **진짜 입력칸** (2026-09-14, ■31절 ④) ══════════
 * ★ 겉(`.아래입력틀`)의 크기·테두리는 **시안 인라인 값 그대로** 둡니다 —
 *   여기서는 속만 채웁니다. 시안이 다시 와도 겉은 안 싸웁니다.
 */
.아래입력창 {
  flex: 1 1 0%;
  font: inherit; font-size: 17px; line-height: 1.5;
  color: #ffffff; background: transparent;
  border: 0; outline: 0; resize: none;
  padding: 0; margin: 0;
  white-space: nowrap; overflow: hidden;
  min-height: 26px;
}
/* ★ 검은 바탕이라 자리말은 **옅은 회색**입니다 — 시안의 그 색 그대로 */
.아래입력창::placeholder { color: #98a0ab; opacity: 1; }
.아래단추짝 { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.아래칸단추 {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: 0 0 auto;
}
.아래칸단추 svg { width: 20px; height: 20px; display: block; }
/* ★ 위 입력칸과 **같은 결** — 시작은 속을 채운 흰 단추, 마이크는 속이 빈 것 */
.아래시작 { background: #ffffff; color: #101010; border: 0; }
.아래마이크 { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,.28); }
.아래시작:hover { background: #f1f3f6; }
.아래마이크:hover { background: rgba(255,255,255,.08); }
.아래칸단추:focus-visible { outline: 2px solid #fee500; outline-offset: 2px; }
@media (max-width: 600px) {
  .아래칸단추 { width: 40px; height: 40px; }
  .아래입력창 { font-size: 16px; }   /* ★ 16 아래면 아이폰이 화면을 확대합니다 */
}

/* ══ 기능 쪽 **절 여럿** — Design 시안을 옮긴 것 (2026-09-14, ■33절 ④) ══════
 *
 * ★★★ `Makebee D 문서쪽.dc.html` 의 값 그대로입니다. 새 색을 안 만들었습니다.
 * ★★ 시안은 값이 **전부 인라인**이었는데 여기 한 곳으로 뺐습니다 —
 *   일곱 쪽이 같은 뼈대를 쓰니 한 곳에 두어야 다음에 안 갈라집니다.
 * ★ 폭 — PC(1100↑)는 왼쪽 붙박이 절 목록, 그 아래는 위 칩만.
 */
.절여럿 { --기절옅: #646b76; --기절더옅: #98a0ab; --기절선: #e4e7ec; --기절점선: #cad0d9; }

/* ── 머리 ── */
.기절머리 { padding: 72px 180px 0; text-align: center;
  display: flex; flex-direction: column; align-items: center; }
.기절꼬리 { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px;
  border: 1px solid var(--기절선); border-radius: 999px; background: #fff;
  font-size: 15px; line-height: 1.5; color: #3b3f46; }
.기절번호 { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.5;
  color: #75777c; }
.기절제목 { margin: 20px 0 0; font-size: 52px; line-height: 1.1; letter-spacing: -0.02em;
  font-weight: 600; color: #101112; }
.기절제목옅게 { color: #75777c; }
.기절부제 { margin: 16px 0 0; font-size: 19px; line-height: 1.4; color: #3b3f46; max-width: 640px; }
.기절칩들 { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.기절칩 { display: inline-flex; align-items: center; height: 36px; padding: 0 14px;
  border: 1px solid var(--기절선); border-radius: 999px; background: #fff;
  font-size: 15px; line-height: 1.5; color: #242629; text-decoration: none; }
.기절칩:hover { background: #fafafb; }

/* ── 몸 ── */
.기절몸 { padding: 56px 180px 0; display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 40px; align-items: start; }
.기절옆목록 { position: sticky; top: 24px; display: flex; flex-direction: column;
  border-left: 1px solid var(--기절선); }
.기절옆줄 { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px;
  margin-left: -1px; border-left: 2px solid transparent;
  font-size: 15px; line-height: 1.5; color: var(--기절옅); font-weight: 500; text-decoration: none; }
.기절옆줄.지금 { border-left-color: #101112; color: #101112; font-weight: 600; }
.기절옆번호 { font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--기절더옅); }
.기절들 { display: grid; gap: 72px; min-width: 0; }

/* ── 절 하나 ── */
.기절 { display: grid; gap: 20px; scroll-margin-top: calc(var(--머리높이, 108px) + 24px); }
body.띠닫힘 .기절 { scroll-margin-top: calc(var(--머리높이, 108px) - 44px + 24px); }
.기절이름줄 { display: flex; gap: 14px; align-items: flex-start; }
.기절이름줄 .기절번호 { flex: none; margin-top: 4px; }
.기절작은제목 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 600; color: #101112; }
.기절설명 { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: #3b3f46; }

.기절창 { background: #fff; border: 1px solid var(--기절선); border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.08); }
.기절창머리 { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  border-bottom: 1px solid var(--기절선); background: #fafafb; }
.기절점 { width: 10px; height: 10px; border-radius: 50%; background: var(--기절선); }
.기절주소 { margin: 0 auto; font-size: 13px; line-height: 1.5; color: var(--기절옅);
  background: #fff; border: 1px solid var(--기절선); border-radius: 6px; padding: 2px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.기절창속 { display: grid; grid-template-columns: 1.5fr 1fr; min-height: 0; }
.기절그림 { background: #f3f4f6; padding: 28px; display: flex; justify-content: center;
  align-items: flex-start; min-width: 0; }
.기절곁 { padding: 22px; display: flex; flex-direction: column; gap: 14px;
  border-left: 1px solid var(--기절선); min-width: 0; }
.기절곁이름 { font-size: 13px; line-height: 1.5; color: var(--기절더옅); }
.기절적은것 { background: #f3f4f6; border-radius: 12px; padding: 10px 14px;
  font-size: 15px; line-height: 1.5; color: #101112; }
.기절고르는줄 { display: grid; gap: 6px; }
.기절고르기 { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border: 1px solid var(--기절선); border-radius: 8px; padding: 8px 12px;
  font-size: 15px; line-height: 1.5; }
.기절고르기이름 { color: var(--기절옅); }
.기절고르기값 { display: inline-flex; gap: 6px; }
.기절알약 { font-size: 13px; line-height: 1.5; border-radius: 999px; padding: 1px 9px;
  white-space: nowrap; background: #fff; color: #242629; border: 1px solid var(--기절선); }
.기절알약.짙게 { background: #202124; color: #fff; border-color: #202124; }
.기절알약.옅게 { background: #f3f4f6; color: var(--기절옅); border-color: transparent; }
.기절단추둘 { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.기절단추 { height: 36px; border: 1px solid var(--기절선); border-radius: 10px; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1.5; color: #242629; }
.기절단추.채움 { background: #202124; color: #fff; border-color: #202124; }

/* ── 그린 화면들 ── */
.기절종이 { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--기절선);
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 6px 16px rgba(16,17,18,.06);
  padding: 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.기절종이꼬리 { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.5;
  color: #75777c; }
.기절종이제목 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600;
  color: #101112; }
.기절종이제목.작게 { font-size: 22px; line-height: 1.3; }
.기절종이줄 { width: 48px; border-top: 2px solid #101112; }
.기절종이큰줄 { font-size: 19px; line-height: 1.4; color: #242629; }
.기절종이작은줄 { font-size: 15px; line-height: 1.5; color: var(--기절옅); }
.기절종이끝 { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--기절더옅); }
.기절종이끝.줄있게 { border-top: 1px dashed var(--기절점선); padding-top: 10px; width: 100%; }
.기절종이주소 { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.5;
  color: #75777c; }

/* 가격표 — 종이빛. ★ 결과물 속 색이라 우리 옷 규칙 밖입니다 (시안 주석 그대로) */
.기절메뉴판 { width: 100%; max-width: 440px; background: #FBF6EE; border: 1px solid #E8DCC8;
  padding: 32px; display: grid; gap: 14px; color: #3D2B1F; font-size: 15px; line-height: 1.5; }
.기절메뉴머리 { display: flex; justify-content: space-between; align-items: baseline; }
.기절메뉴이름 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.기절메뉴때 { font-size: 13px; color: #7A6350; }
.기절묶음이름 { font-size: 13px; line-height: 1.5; color: #7A6350;
  border-bottom: 1px solid #E8DCC8; padding-bottom: 4px; margin-bottom: 6px; }
.기절값줄 { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 6px; }
.기절값이름 { display: inline-flex; align-items: center; gap: 8px; }
.기절값 { color: #7A6350; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.기절값딱지 { font-size: 13px; line-height: 1.5; border-radius: 999px; padding: 0 8px; }
.기절값딱지.풀빛 { background: #DCE8D5; color: #2F4A2B; }
.기절값딱지.붉은빛 { background: #F3D6D6; color: #6A2F2F; }
.기절메뉴끝 { font-size: 13px; line-height: 1.5; color: #7A6350; text-align: center; }

/* 이용 규칙 */
.기절규칙줄 { display: flex; gap: 12px; align-items: flex-start; width: 100%;
  border-top: 1px dashed var(--기절점선); padding-top: 10px; text-align: left; }
.기절규칙번호 { flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "JetBrains Mono", monospace; font-size: 13px; }
.기절규칙번호.풀빛 { background: #DCE8D5; color: #2F4A2B; }
.기절규칙번호.볕빛 { background: #F6E3A1; color: #5A4A12; }
.기절규칙번호.보랏빛 { background: #E3D5EE; color: #4A3A5C; }
.기절규칙번호.물빛 { background: #CFE3EA; color: #24485A; }
.기절규칙번호.붉은빛 { background: #F3D6D6; color: #6A2F2F; }
.기절규칙글 { font-size: 15px; line-height: 1.5; color: #242629; }
.기절규칙글 b { font-weight: 600; color: #101112; }

/* 발표 자료 */
.기절슬라이드들 { width: 100%; max-width: 520px; display: grid; gap: 10px; }
.기절슬라이드 { aspect-ratio: 16/9; background: linear-gradient(135deg, #1F3A5F, #2C5282);
  border-radius: 8px; padding: 24px; color: #fff;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: end; }
.기절슬라이드쪽 { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.5;
  color: #A9C4E4; }
.기절슬라이드제목 { margin-top: 6px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.기절슬라이드밑 { margin-top: 4px; font-size: 13px; line-height: 1.5; color: #A9C4E4; }
.기절막대들 { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.기절막대 { flex: 1; border-radius: 4px 4px 0 0; }
.기절막대.볕빛 { background: #F6E3A1; }
.기절막대.풀빛 { background: #DCE8D5; }
.기절막대.보랏빛 { background: #E3D5EE; }
.기절막대.살빛 { background: #F2C9B0; }
.기절작은슬라이드들 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.기절작은슬라이드 { aspect-ratio: 16/9; border-radius: 6px; border: 1px solid var(--기절선); }
.기절작은슬라이드.짙은 { background: #1F3A5F; border: 2px solid var(--기절점선); }
.기절작은슬라이드.종이 { background: #FBF6EE; }
.기절작은슬라이드.파랑 { background: #2C5282; }
.기절작은슬라이드.파랑.지금 { outline: 2px solid #202124; outline-offset: 1px; }
.기절작은슬라이드.풀 { background: #DCE8D5; }

/* QR — ★ 진짜로 읽히는 코드가 아니라 **그림 흉내**입니다 */
.기절qr { display: grid; grid-template-columns: repeat(11, 1fr); gap: 2px;
  width: 220px; height: 220px; padding: 10px;
  border: 1px solid var(--기절선); border-radius: 8px; box-sizing: border-box; }
.기절qr칸 { background: #fff; border-radius: 1px; }
.기절qr칸.켬 { background: #101112; }

/* 링크 모음 */
.기절링크장 { width: 100%; max-width: 280px; background: #FBF6EE; border: 1px solid #E8DCC8;
  border-radius: 24px; padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3D2B1F; }
.기절링크얼굴 { width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #F2C9B0, #D98E64);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 600; color: #3D2B1F; }
.기절링크이름 { font-size: 19px; line-height: 1.4; font-weight: 600; }
.기절링크한줄 { font-size: 13px; line-height: 1.5; color: #7A6350; text-align: center; }
.기절링크단추 { width: 100%; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1.5; font-weight: 600; box-sizing: border-box; }
.기절링크단추.짙게 { background: #3D2B1F; color: #FBF6EE; }
.기절링크단추.살빛 { background: #F2C9B0; color: #3D2B1F; }
.기절링크단추.풀빛 { background: #DCE8D5; color: #2F4A2B; }
.기절링크단추.테두리 { background: transparent; color: #3D2B1F; border: 1px solid #3D2B1F; }

/* ── 맨 아래 입력칸 ── */
.기절맺음 { padding: 96px 180px 120px; display: flex; flex-direction: column;
  align-items: center; text-align: center; }
.기절맺음제목 { font-size: 22px; line-height: 1.3; font-weight: 600; color: #101112; }
.기절맺음칸 { margin-top: 16px; width: 704px; max-width: 100%; height: 56px; background: #fff;
  border: 1px solid var(--기절점선); border-radius: 12px;
  display: flex; align-items: center; padding: 0 8px 0 20px; text-align: left;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 6px 16px rgba(16,17,18,.06); cursor: pointer; }
.기절맺음말 { flex: 1; min-width: 0; font-size: 17px; line-height: 1.5; color: var(--기절더옅);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.기절맺음단추짝 { display: inline-flex; gap: 8px; flex: none; }
.기절맺음단추 { width: 40px; height: 40px; border: 1px solid var(--기절선); border-radius: 10px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  color: #101112; }
.기절맺음단추 svg { width: 18px; height: 18px; display: block; }

/* ── 태블릿·폰 — 시안 값 그대로 ── */
@media (max-width: 1099px) {
  .기절머리 { padding: 56px 32px 0; }
  .기절제목 { font-size: 40px; line-height: 1.12; }
  .기절몸 { padding: 56px 32px 0; grid-template-columns: 1fr; gap: 0; }
  .기절옆목록 { display: none; }
  .기절창속 { grid-template-columns: 1fr; }
  .기절곁 { border-left: 0; border-top: 1px solid var(--기절선); }
  .기절맺음 { padding: 48px 32px 48px; }
}
@media (max-width: 599px) {
  .기절머리 { padding: 32px 16px 0; }
  .기절부제 { font-size: 17px; line-height: 1.5; }
  .기절칩 { height: 44px; }
  .기절몸 { padding: 32px 16px 0; }
  .기절들 { gap: 48px; }
  .기절그림 { padding: 16px; }
  .기절종이, .기절메뉴판, .기절링크장 { padding: 24px; }
  .기절슬라이드 { padding: 16px; }
  .기절슬라이드제목 { font-size: 17px; }
  .기절막대들 { height: 60px; }
  .기절qr { width: 200px; height: 200px; }
  .기절곁 { padding: 16px; }
  .기절단추 { height: 48px; }
  .기절맺음 { padding: 48px 16px 48px; }
  .기절맺음칸 { width: 358px; }
  .기절맺음단추 { width: 44px; height: 44px; }
}

/* ══ 랜딩 **절 다섯의 화면** — Design 시안 (2026-09-14, ■34절 ③) ══════════
 *
 * ★★★ `Makebee D 절다섯.dc.html` 값 그대로입니다. 새 색을 안 만들었습니다.
 * ★★ 절에 닿으면 **한 번만** 돕니다 — `new.js` 가 `.움직임` 을 붙입니다.
 *   틀은 **먼저 있고 속이 차오릅니다.** 팍이 아니라 쭈욱입니다.
 * ★ 움직임 줄이기를 켜면 **다 채운 모습으로 멈춥니다.**
 */
.절화면 { background: #fff; border: 1px solid #e4e7ec; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,17,18,.04), 0 12px 32px rgba(16,17,18,.08); }
.절화면머리 { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px;
  border-bottom: 1px solid #e4e7ec; background: #fafafb; }
.절화면점 { width: 10px; height: 10px; border-radius: 50%; background: #e4e7ec; }
.절화면주소 { margin: 0 auto; font-size: 13px; line-height: 1.5; color: #646b76; background: #fff;
  border: 1px solid #e4e7ec; border-radius: 6px; padding: 2px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }

/* ── ① 가게 알리기 ── */
.절홈 { background: #FBF6EE; font-size: 15px; line-height: 1.5; min-height: 440px; }
.절홈머리 { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px; border-bottom: 1px solid #E8DCC8;
  opacity: 0; transition: opacity .5s; }
.절홈이름 { font-weight: 600; color: #3D2B1F; }
.절홈메뉴 { display: flex; gap: 14px; color: #7A6350; }
.절홈예약 { background: #3D2B1F; color: #FBF6EE; border-radius: 999px; padding: 1px 10px; }
.절홈띠칸 { height: 0; overflow: hidden; transition: height .7s cubic-bezier(.4,0,.2,1); }
.절홈띠 { height: 150px; padding: 22px; box-sizing: border-box;
  background: linear-gradient(135deg, #F2C9B0, #E8A87C 55%, #D98E64); color: #3D2B1F;
  display: flex; flex-direction: column; justify-content: flex-end; }
.절홈띠제목 { font-size: 22px; line-height: 1.3; font-weight: 600; }
.절홈띠밑 { font-size: 13px; line-height: 1.5; color: #5C4636; }
.절홈카드들 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px 22px 0; }
.절홈카드 { border-radius: 8px; padding: 12px;
  opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; }
.절홈카드이름 { font-weight: 600; }
.절홈카드값 { font-family: "JetBrains Mono", monospace; font-size: 13px; }
.절홈길 { margin: 12px 22px 16px; background: #CFE3EA; border-radius: 8px; padding: 12px;
  color: #24485A; display: flex; justify-content: space-between; gap: 12px;
  opacity: 0; transform: translateY(14px); transition: opacity .5s, transform .5s; }
.절홈길제목 { font-weight: 600; }
.절홈길밑 { color: #4F7285; }
.절홈길단추 { align-self: center; background: #24485A; color: #CFE3EA; border-radius: 999px;
  padding: 1px 10px; font-size: 13px; white-space: nowrap; }

/* ── ② 손님 받기 ── */
.절주문 { padding: 22px; display: grid; gap: 12px; min-height: 380px; align-content: start; }
.절주문머리 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.절주문이름 { font-size: 13px; line-height: 1.5; color: #646b76; }
.절주문수 { font-size: 40px; line-height: 1.12; letter-spacing: -0.02em; font-weight: 600;
  color: #101112; font-variant-numeric: tabular-nums; }
.절주문건 { font-size: 17px; color: #646b76; margin-left: 4px; }
.절주문알림 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.5;
  color: #2F4A2B; background: #DCE8D5; border-radius: 999px; padding: 2px 10px; }
.절주문알림점 { width: 6px; height: 6px; border-radius: 50%; background: #2F4A2B; }
.절주문칸이름, .절주문줄 { display: grid; grid-template-columns: 1.6fr .6fr 1fr .8fr auto; gap: 8px; }
.절주문칸이름 { padding: 0 14px; font-size: 13px; line-height: 1.5; color: #98a0ab; }
.절주문칸이름 span:last-child { text-align: right; }
.절주문줄 { align-items: center; border: 1px solid #e4e7ec; border-radius: 8px; padding: 10px 14px;
  font-size: 15px; line-height: 1.5; color: #242629;
  opacity: 0; transform: translateY(-18px);
  transition: opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
.절주문메뉴 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #101112; }
.절주문수량, .절주문때 { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #646b76; }
.절주문어디 { font-size: 13px; border-radius: 999px; padding: 1px 8px; justify-self: start;
  white-space: nowrap; }
.절주문어디.포장 { background: #F6E3A1; color: #5A4A12; }
.절주문어디.매장 { background: #E3D5EE; color: #4A3A5C; }
.절주문상태 { justify-self: end; font-size: 13px; border-radius: 999px; padding: 1px 8px;
  white-space: nowrap; background: #202124; color: #fff;
  transition: background-color .4s, color .4s; }
.절주문상태.받음 { background: #DCE8D5; color: #2F4A2B; }

/* ── ③ 매일 챙기기 ── */
.절매일 { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 340px; }
.절매일왼 { padding: 22px; display: grid; gap: 8px; align-content: start;
  border-right: 1px solid #e4e7ec; }
.절매일칸이름 { font-size: 13px; line-height: 1.5; color: #646b76; margin-bottom: 4px; }
.절매일줄 { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border: 1px solid #e4e7ec; border-radius: 8px; padding: 10px 12px;
  font-size: 15px; line-height: 1.5; }
.절매일이름 { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.절매일점 { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.절매일글 { color: #101112; transition: color .4s;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.절매일딱지 { font-size: 13px; color: #6A2F2F; background: #F3D6D6; border-radius: 999px;
  padding: 0 8px; white-space: nowrap; opacity: 0; transition: opacity .35s; }
.절매일스위치 { width: 34px; height: 20px; border-radius: 10px; background: #cad0d9;
  position: relative; display: inline-block; flex: none; transition: background-color .4s; }
.절매일스위치.켬 { background: #202124; }
.절매일알 { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .4s cubic-bezier(.4,0,.2,1); }
.절매일스위치.켬 .절매일알 { left: 16px; }
.절매일오 { padding: 22px; display: flex; flex-direction: column; }
.절매일머리 { display: flex; justify-content: space-between; align-items: baseline; }
.절매일주 { font-size: 13px; line-height: 1.5; color: #2F4A2B; background: #DCE8D5;
  border-radius: 999px; padding: 1px 8px; }
.절매일그래프 { flex: 1; display: flex; align-items: flex-end; gap: 12px; height: 150px;
  margin-top: 16px; border-bottom: 1px solid #e4e7ec; padding-bottom: 1px; }
.절매일막대칸 { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; height: 100%; gap: 6px; }
.절매일값 { font-family: "JetBrains Mono", monospace; font-size: 13px; line-height: 1.5;
  color: #646b76; opacity: 0; transition: opacity .4s; }
.절매일막대 { width: 100%; height: 0; border-radius: 6px 6px 0 0;
  transition: height .7s cubic-bezier(.2,.7,.2,1); }
.절매일날들 { display: flex; gap: 12px; margin-top: 6px; }
.절매일날 { flex: 1; text-align: center; font-size: 13px; line-height: 1.5; color: #98a0ab; }

/* ── ④ 기록하기 ── */
.절기록 { padding: 22px; display: grid; gap: 8px; min-height: 380px; align-content: start; }
.절기록머리 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.절기록이름 { font-size: 17px; line-height: 1.5; font-weight: 600; color: #101112; }
.절기록쪽지 { font-size: 13px; line-height: 1.5; color: #646b76; background: #f3f4f6;
  border-radius: 999px; padding: 1px 8px; }
.절기록칸이름, .절기록줄 { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr auto; gap: 8px; }
.절기록칸이름 { padding: 0 14px; font-size: 13px; line-height: 1.5; color: #98a0ab; }
.절기록칸이름 span:last-child { text-align: right; }
.절기록줄 { align-items: center; border: 1px solid #e4e7ec; border-radius: 8px; padding: 10px 14px;
  font-size: 15px; line-height: 1.5; }
.절기록사람 { color: #101112; }
.절기록칸 { font-size: 13px; border-radius: 999px; padding: 1px 8px; justify-self: start;
  white-space: nowrap; opacity: 0; transform: scale(.6);
  transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1); }
.절기록칸.냄 { background: #DCE8D5; color: #2F4A2B; }
.절기록칸.아직 { background: #f3f4f6; color: #646b76; }
.절기록합 { justify-self: end; font-family: "JetBrains Mono", monospace; font-size: 13px;
  color: #646b76; font-variant-numeric: tabular-nums; }
.절기록끝 { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px dashed #cad0d9; padding-top: 12px; margin-top: 4px; }
.절기록끝이름 { font-size: 15px; line-height: 1.5; color: #646b76; }
.절기록끝값 { font-size: 22px; line-height: 1.3; font-weight: 600; color: #101112;
  font-variant-numeric: tabular-nums; }
.절기록원 { font-size: 15px; color: #646b76; margin-left: 3px; }

/* ── ⑤ 말로 시키기 ── */
.절말 { padding: 22px; display: grid; gap: 10px; min-height: 320px; align-content: start;
  font-size: 15px; line-height: 1.5; }
.절말물음 { justify-self: end; max-width: 86%; background: #f3f4f6;
  border-radius: 12px 12px 2px 12px; padding: 8px 12px; color: #101112;
  opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.절말점셋 { justify-self: start; border: 1px solid #e4e7ec; border-radius: 12px 12px 12px 2px;
  padding: 10px 14px; display: none; gap: 5px; }
.절말점셋.보임 { display: flex; }
.절말점셋 span { width: 6px; height: 6px; border-radius: 50%; background: #646b76;
  animation: 절점 1.2s infinite; }
.절말점셋 span:nth-child(2) { animation-delay: .2s; }
.절말점셋 span:nth-child(3) { animation-delay: .4s; }
@keyframes 절점 { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.절말답 { justify-self: start; max-width: 92%; border: 1px solid #e4e7ec;
  border-radius: 12px 12px 12px 2px; padding: 10px 14px; color: #242629;
  display: none; gap: 10px; }
.절말답.보임 { display: grid; }
.절말답글 { min-height: 22px; }
.절말답글.치는중::after { content: ""; display: inline-block; width: 2px; height: 16px;
  background: #101112; margin-left: 1px; vertical-align: -3px; }
.절말표 { display: grid; gap: 6px; opacity: 0; transition: opacity .5s; }
.절말표줄 { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.절말표이름 { display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.절말표점 { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.절말표값 { display: inline-flex; align-items: center; gap: 8px; }
.절말표막대 { width: 0; height: 6px; border-radius: 3px; display: inline-block;
  transition: width .6s cubic-bezier(.2,.7,.2,1); }
.절말표수 { font-family: "JetBrains Mono", monospace; font-size: 13px; color: #646b76;
  min-width: 28px; text-align: right; }
.절말꼬리 { justify-self: start; font-size: 13px; line-height: 1.5; color: #98a0ab;
  opacity: 0; transition: opacity .5s; }

/* ── 움직임이 켜지면 ── */
.움직임 .절홈머리, .움직임 .절홈카드, .움직임 .절홈길,
.움직임 .절주문줄, .움직임 .절매일값, .움직임 .절기록칸,
.움직임 .절말물음, .움직임 .절말표, .움직임 .절말꼬리 { opacity: 1; }
.움직임 .절홈카드, .움직임 .절홈길, .움직임 .절주문줄 { transform: translateY(0); }
.움직임 .절기록칸 { transform: scale(1); }
.움직임 .절홈띠칸 { height: 150px; }
.움직임 .절매일막대 { height: var(--높이); }
.움직임 .절매일딱지 { opacity: 1; }
.움직임 .절말표막대 { width: var(--폭); }

/* ── 폰·태블릿 — 시안 값 ── */
@media (max-width: 1099px) {
  .절매일 { grid-template-columns: 1fr; }
  .절매일왼 { border-right: 0; border-bottom: 1px solid #e4e7ec; }
}
@media (max-width: 599px) {
  .절홈 { min-height: 420px; }
  .절홈머리, .절홈카드들, .절홈길 { padding-left: 14px; padding-right: 14px; }
  .절홈길 { margin-left: 14px; margin-right: 14px; }
  .절홈띠 { height: 120px; padding: 14px; }
  .움직임 .절홈띠칸 { height: 120px; }
  .절홈띠제목 { font-size: 19px; }
  .절홈카드들 { grid-template-columns: 1fr 1fr; }
  .절주문 { padding: 14px; min-height: 360px; }
  .절주문칸이름, .절주문줄 { grid-template-columns: 1.4fr .5fr auto .7fr auto; }
  .절주문칸이름 span:nth-child(3) { font-size: 0; }
  .절매일왼, .절매일오 { padding: 14px; }
  .절매일그래프 { height: 120px; gap: 8px; }
  .절매일날들 { gap: 8px; }
  .절기록 { padding: 14px; min-height: 360px; }
  .절기록칸이름, .절기록줄 { grid-template-columns: 1.2fr 1fr 1fr 1fr auto; }
  .절말 { padding: 14px; min-height: 300px; }
}

/* ★ 움직임 줄이기 — **다 채운 모습으로 멈춥니다** */
@media (prefers-reduced-motion: reduce) {
  .절홈머리, .절홈카드, .절홈길, .절주문줄, .절매일값, .절기록칸,
  .절말물음, .절말표, .절말꼬리 { opacity: 1 !important; transform: none !important; }
  .절홈띠칸 { height: 150px !important; }
  .절매일막대 { height: var(--높이) !important; }
  .절말표막대 { width: var(--폭) !important; }
  .절매일딱지 { opacity: 1 !important; }
  .절말답 { display: grid !important; }
  .절말점셋 { display: none !important; }
  .절홈머리, .절홈카드, .절홈길, .절주문줄, .절매일막대, .절기록칸,
  .절말물음, .절말표막대, .절홈띠칸 { transition: none !important; }
  .절말점셋 span { animation: none !important; }
}

/* ══ 검은 절을 **화면 좌우 끝까지** (2026-09-14, ■37절 ① · Design 값) ══════
 *
 * ★★★ 사장님 — 「지금 검은 절이 **가운데만 검고 양옆이 흽니다.**」
 *   재 보니 **1440 과 폰에서는 이미 끝까지** 가고, **1880(왼 219)** 과
 *   **959(왼 64)** 에서 양옆이 희었습니다. 절 칸이 가운데 정렬이라 그렇습니다.
 *
 * ★★ Design 값 — 「바깥 통에 #101010 을 화면 끝까지, 안쪽 기둥(180px / 폰 16px)만 글을 잡음」.
 *   그래서 **글은 그대로 두고 배경만** 폅니다. 여백을 건드리면 글줄이 다시 잡혀
 *   네 폭에서 다 다시 재야 합니다 — 배경만 펴는 쪽이 틀릴 자리가 적습니다.
 *
 * ★ 인라인 `style="background: rgb(16,16,16)"` 이 클래스를 이기므로(CLAUDE.md)
 *   `!important` 로 끕니다. **지우지 않고 끕니다** — 시안 마크업은 그대로 둡니다.
 * ★ `100vw` 가 스크롤바만큼 넘치는데 `body { overflow-x: clip }` 이 잘라 냅니다.
 */
.D절[data-D절="검은절"] > div,
.D절[data-D절="검은마무리"] > div,
.D폰절[data-D절="검은절"] > div,
.D폰절[data-D절="검은마무리"] > div {
  position: relative;
  background: transparent !important;
}
.D절[data-D절="검은절"] > div::before,
.D절[data-D절="검은마무리"] > div::before,
.D폰절[data-D절="검은절"] > div::before,
.D폰절[data-D절="검은마무리"] > div::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: #101010;
  z-index: 0;
}
/* ★ 글이 배경 위에 오게. 안 하면 배경이 글을 덮습니다
 *   (「덮개는 재는 것으로 안 잡힙니다」 — CLAUDE.md). */
.D절[data-D절="검은절"] > div > *,
.D절[data-D절="검은마무리"] > div > *,
.D폰절[data-D절="검은절"] > div > *,
.D폰절[data-D절="검은마무리"] > div > * {
  position: relative;
  z-index: 1;
}

/* ══ 검은 절에서 **헤더도 반전** (2026-09-14, ■37절 ① · Design 값) ════════
 *
 * ★ Design 값 그대로 — 배경 #101010 · 글 #fff · 줄 rgba(255,255,255,.12) ·
 *   로고 흰 벌 · 「로그인」 테두리 rgba(255,255,255,.2) ·
 *   검은 단추 rgba(255,255,255,.14) · **350ms cubic-bezier(.2,0,0,1)**.
 *
 * ★★ 켜고 끄는 것은 `new.js` 가 합니다 — 검은 절이 **헤더 아랫선(64px)** 에
 *   걸리는 동안 `.꼭대기` 에 `.반전` 을 붙입니다. 스크롤마다 검사합니다.
 * ★ 움직임 줄이기를 켜면 전환이 없습니다(아래 규칙). 색은 그대로 바뀝니다 —
 *   안 바뀌면 검은 바탕에 검은 글이 됩니다.
 */
.꼭대기 {
  transition: background-color .35s cubic-bezier(.2, 0, 0, 1),
              border-color .35s cubic-bezier(.2, 0, 0, 1),
              color .35s cubic-bezier(.2, 0, 0, 1);
}
.꼭대기.반전 {
  background: #101010;
  border-bottom-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.꼭대기.반전 .머리말,
.꼭대기.반전 a,
.꼭대기.반전 button { color: #fff; }
/* 로고 — 흰 벌로 (■32절에 한 색으로 맞춰 둔 그 자리입니다) */
.꼭대기.반전 .로고글자,
.꼭대기.반전 .벌 { color: #fff; }
.꼭대기.반전 .벌 svg [fill]:not([fill="none"]) { fill: #fff; }
.꼭대기.반전 .벌 svg [stroke]:not([stroke="none"]) { stroke: #fff; }
/* 줄무늬는 바탕색으로 — Design 값(검은 절 안에서 #101010) */
.꼭대기.반전 .벌 svg .줄무늬 [fill] { fill: #101010; }
/* 「로그인」은 테두리만, 「무료로 시작하기」는 옅은 흰 바탕 */
.꼭대기.반전 .테두리단추,
.꼭대기.반전 .머리단추.흰 {
  border-color: rgba(255, 255, 255, .2);
  background: transparent;
  color: #fff;
}
.꼭대기.반전 .머리단추.검정,
.꼭대기.반전 .검은단추 {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .꼭대기 { transition: none; }
}

/* ══ 알림 띠 — **「NEW」 하나만 맨 앞에** (2026-09-14, ■38절 ④) ══════════
 *
 * ★ 사장님 — 「딱지는 맨 앞에 「NEW」 하나만 두고, 그 뒤로 소식 글만 쭉 이어지게.
 *   소식과 소식 사이는 가운뎃점이나 여백으로.」
 *
 * ★★ 소식 여섯을 **한 묶음**으로 싸고 딱지를 묶음 앞에 한 번만 둡니다.
 *   흐르는 것과 ✕ 자리는 **그대로**입니다 — 건드리면 또 재야 합니다.
 */
.알림띠묶음 {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap; padding-right: 40px;      /* 묶음과 묶음 사이 */
}
.알림띠묶음 .알림띠꼬리 { flex: none; }
.알림띠사이 { color: rgba(255, 255, 255, .45); margin: 0 2px; }

/* ══ 검은 절 — **눌리면 펴집니다** (2026-09-14, ■37절 ① · Design 값) ═══════
 *
 * ★ Design 값 그대로 — `grid-template-rows: 0fr → 1fr` **300ms cubic-bezier(.2,0,0,1)** ·
 *   글 `opacity 0→1` 300ms · `+` 의 세로줄이 `scaleY 1→0` 으로 `−` 가 됨 ·
 *   **한 번에 하나만** · **처음엔 첫째가 펴져 있음.**
 *
 * ★★ `0fr→1fr` 을 쓰는 까닭 — 높이를 재서 px 로 넣으면 글이 길어질 때마다 다시 재야 합니다.
 *   격자 칸으로 하면 **브라우저가 알아서** 재 줍니다.
 * ★ 접힌 것은 `visibility: hidden` 으로 **탭에서도 빠집니다** — 안 그러면
 *   키보드로 다니는 분이 안 보이는 글에 갇힙니다.
 */
[data-dd-accbody] {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: grid-template-rows .3s cubic-bezier(.2, 0, 0, 1),
              opacity .3s cubic-bezier(.2, 0, 0, 1),
              padding .3s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-accbody] > * { min-height: 0; overflow: hidden; }
[data-dd-acc][aria-expanded="true"] + [data-dd-accbody] {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  padding-bottom: 22px !important;
}
/* ＋ 가 − 로 — 세로줄만 줄입니다 */
[data-dd-acc] .더하기세로 {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2, 0, 0, 1);
  transform-origin: 50% 50%;
}
[data-dd-acc][aria-expanded="true"] .더하기세로 { transform: scaleY(0); }
[data-dd-acc] { cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  [data-dd-accbody] { transition: none; }
  /* ★ 움직임을 줄이면 **다 펼칩니다** — Design 값 */
  [data-dd-accbody] {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    padding-bottom: 22px !important;
  }
}

/* ══ 오른쪽 원 — **절에 닿으면 한 번 돕니다** (2026-09-14, ■37절 ① · Design 값) ══
 *
 * ★ Design 값 그대로 —
 *   바깥 틀 `rotate −180° → 0°` **1.6s cubic-bezier(.2,0,0,1)** ·
 *   가운데 네모 `rotate 90° → 0°` · `scale .6 → 1` 같은 1.6s ·
 *   점 넷 `scale 0→1` **400ms**, **0.9s 부터 120ms 씩 차례** ·
 *   글자 `opacity` **1.0s 부터 120ms 씩**.
 *
 * ★★ **한 번만 돕니다.** `.돎` 이 붙으면 끝 모습으로 가고 다시 안 돌아갑니다 —
 *   저절로 반복하면 눈이 피곤하고, ■34절에 그것 때문에 걷어낸 적이 있습니다.
 * ★ SVG 안에서는 `transform-box: fill-box` 와 `transform-origin` 을 줘야
 *   **제자리에서** 돕니다. 안 주면 화면 왼쪽 위를 축으로 돌아 밖으로 날아갑니다.
 */
[data-dd-ringsvg] [data-dd-ring-outer],
[data-dd-ringsvg] [data-dd-ring-box] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
[data-dd-ringsvg] [data-dd-ring-outer] { transform: rotate(-180deg); }
[data-dd-ringsvg] [data-dd-ring-box] { transform: rotate(90deg) scale(.6); }
[data-dd-ringsvg] [data-dd-dot] { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); }
[data-dd-ringsvg] [data-dd-ring-labels] text { opacity: 0; }

[data-dd-ringsvg].돎 [data-dd-ring-outer] {
  transform: rotate(0deg);
  transition: transform 1.6s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-ringsvg].돎 [data-dd-ring-box] {
  transform: rotate(0deg) scale(1);
  transition: transform 1.6s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-ringsvg].돎 [data-dd-dot] {
  transform: scale(1);
  transition: transform .4s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-ringsvg].돎 [data-dd-dot="1"] { transition-delay: .9s; }
[data-dd-ringsvg].돎 [data-dd-dot="2"] { transition-delay: 1.02s; }
[data-dd-ringsvg].돎 [data-dd-dot="3"] { transition-delay: 1.14s; }
[data-dd-ringsvg].돎 [data-dd-dot="4"] { transition-delay: 1.26s; }
[data-dd-ringsvg].돎 [data-dd-ring-labels] text {
  opacity: 1;
  transition: opacity .4s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-ringsvg].돎 [data-dd-ring-labels] text:nth-of-type(1) { transition-delay: 1s; }
[data-dd-ringsvg].돎 [data-dd-ring-labels] text:nth-of-type(2) { transition-delay: 1.12s; }
[data-dd-ringsvg].돎 [data-dd-ring-labels] text:nth-of-type(3) { transition-delay: 1.24s; }
[data-dd-ringsvg].돎 [data-dd-ring-labels] text:nth-of-type(4) { transition-delay: 1.36s; }

/* ★★ **왼쪽에서 편 것에 원이 반응합니다** — Design 값:
 *   물어보면 → 묻기(0°) · 시키면 → 만들기(90°) · 먼저 알려 → 알림(270°).
 *   점선 원이 그 각도로 **600ms** 돌고, 그 점은 `r 4→7`(300ms), 글자는 #fff. */
[data-dd-ringsvg] [data-dd-ring-dash] {
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.2, 0, 0, 1);
}
[data-dd-ringsvg] [data-dd-dot] { transition-property: transform, r; }
[data-dd-ringsvg] [data-dd-dot].짚음 { r: 7; }
[data-dd-ringsvg] [data-dd-ring-labels] text.짚음 { fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  /* ★ 움직임을 줄이면 **끝 모습으로 바로** — Design 값 */
  [data-dd-ringsvg] [data-dd-ring-outer],
  [data-dd-ringsvg] [data-dd-ring-box] { transform: none; transition: none; }
  [data-dd-ringsvg] [data-dd-dot] { transform: scale(1); transition: none; }
  [data-dd-ringsvg] [data-dd-ring-labels] text { opacity: 1; transition: none; }
  [data-dd-ringsvg] [data-dd-ring-dash] { transition: none; }
}

/* ══ 맨 아래 **발** (2026-09-14, ■37절 ① · Design 값) ═══════════════════
 *
 * ★ Design 값 그대로 — 「**마무리 절과 한 검은 통**(#101010). 위 줄 rgba(255,255,255,.14) ·
 *   왼쪽 로고 + 한 줄(15px #98a0ab) · 오른쪽 **네 묶음** — 만드는 것·회사·도움·약관.
 *   묶음 제목 **13px 600 #98a0ab**, 링크 **15px #fff**(올리면 #cad0d9). **폰은 로고 아래 2×2.**」
 *
 * ★★ 배경을 여기서 또 칠하지 않습니다 — 검은 절 규칙(`[data-D절]`)이 이미 폅니다.
 *   같은 값을 두 곳에 두면 언젠가 둘이 달라집니다.
 * ★ 약관·개인정보·환불은 **법으로 있어야 하는 쪽**이라 발에서 반드시 갑니다(■21절 ④).
 */
.발 { background: #101010; color: #fff; }
.발안 {
  max-width: 1396px; margin: 0 auto;
  padding: 40px 180px 56px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start;
}
.발로고 {
  font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-weight: 800; font-size: 22px; line-height: 1.3; color: #fff;
}
.발한줄 { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #98a0ab; max-width: 320px; }
.발오른 { display: grid; grid-template-columns: repeat(4, auto); gap: 40px; }
.발묶음 { display: grid; gap: 10px; align-content: start; }
.발묶음제목 { font-size: 13px; line-height: 1.5; font-weight: 600; color: #98a0ab; }
.발링크 {
  font-size: 15px; line-height: 1.5; color: #fff; text-decoration: none;
  transition: color .15s ease;
}
.발링크:hover { color: #cad0d9; }

@media (max-width: 1100px) {
  .발안 { padding: 40px 64px 56px; gap: 32px; }
  .발오른 { gap: 28px; }
}
@media (max-width: 860px) {
  /* ★ 폰은 **로고 아래 2×2** — Design 값 */
  .발안 { grid-template-columns: 1fr; padding: 32px 16px 48px; gap: 28px; }
  .발오른 { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* ★ 발도 **화면 좌우 끝까지** — 검은 절과 같은 결입니다(위 규칙과 같은 방식).
 *   `.D절들` 안에 있어 폭이 818 로 잡혔습니다. 배경만 폅니다. */
.발 {
  position: relative;
  background: transparent !important;
  display: block !important;
}
.발::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw;
  background: #101010; z-index: 0;
}
.발 > * { position: relative; z-index: 1; }

/* ══ 헤더 서랍을 **기둥 안으로** (2026-09-14, ■37절 ① · Design 값) ═══════
 *
 * ★★★ 사장님 — 「상자가 **화면 왼쪽 끝에서 시작**해 헤더와 줄이 안 맞습니다.
 *   attio.com 은 상자 안쪽이 **헤더 기둥 안에** 들어와 로고와 메뉴 줄에 맞습니다.
 *   폭도 내용에 맞게 줄여 주세요 — 지금은 너무 넓어 오른쪽이 텅 빕니다.」
 *
 * ★★ Design 값 — 「상자 왼쪽 = **기둥 − 24px**(안쪽 여백 24 라 묶음 제목이
 *   로고 왼쪽선에 맞음). 폭 **min(848, 기둥 폭)** → 848 · 848 · 831.
 *   기둥 **180 · 235 · 64**.」
 *
 * ★ 우리 기둥은 `.머리기둥`(max-width 1396 · padding 0 24px)입니다.
 *   그러니 **로고 왼쪽선 = (100vw − 1396)/2 + 24** 이고, 상자는 거기서 24 를 뺍니다.
 *   기둥이 1396 보다 좁으면 화면 여백이 0 이라 그대로 24 − 24 = 0 입니다.
 * ★ 앞 규칙(가운데 맞춤 · 폭 1280)을 **지우지 않고 덮습니다** — 되돌리기 쉽게.
 */
.머리서랍.서랍넓게 {
  left: max(0px, calc((100vw - 1396px) / 2));
  transform: none;
  width: min(848px, calc(100vw - 32px));
}
/* ★ 열려도 가운데로 안 밀립니다 — 앞 규칙이 `translateX(-50%)` 를 겁니다 */
.머리갈래.열림 .머리서랍.서랍넓게,
.머리갈래:focus-within .머리서랍.서랍넓게 { transform: none; }

/* ★★ 「알림 받기」가 옆으로 나와 안 보이던 것 — 칸 안에서 **아래줄**로 내립니다 */
.서랍칸.준비중칸 { flex-wrap: wrap; }
.서랍칸 .준비중알약 { margin-left: 0; }

/* ★ Design 값에 맞춰 **두 자리**를 맞춥니다 (2026-09-14, ■37절 ②에서 재서 나온 것)
 *   ㉠ 안쪽 여백 22 → **24** (그래야 묶음 제목이 로고 왼쪽선에 딱 맞습니다 — 2px 어긋났습니다)
 *   ㉡ 959 에서 폭 848 → **831** (Design 값: 기둥 64 일 때 831) */
.머리서랍.서랍넓게 { padding: 24px; }
@media (max-width: 1000px) {
  .머리서랍.서랍넓게 { width: min(831px, calc(100vw - 32px)); }
}

/* ★ 자리는 `new.js` 가 **로고를 재서** 넣습니다 — 셈으로는 26px 어긋났습니다 */
.머리서랍.서랍넓게 { left: var(--서랍왼, max(0px, calc((100vw - 1396px) / 2))); }

/* ══ 「만든 것들」 서랍도 **같은 결로** · 둘 다 조금 내림 (2026-09-14, ■37절 ⑧) ══
 *
 * ★★★ 사장님 — 「헤더바에 **만든 것들도 위치 맞춰야지**, **조금 내려서**.」
 *
 * ★ 재 보니 둘이 아주 달랐습니다 —
 *     주요기능  : 폭 848 · 왼 216 · 헤더 아래 **틈 0**
 *     만든 것들 : 폭 320 · 왼 324 · **틈 −16** (헤더를 16px 파고들어 덮고 있었습니다)
 *   Design 값은 「**「만든 것들」도 같은 상자**(가게 종류별 · 둘러보기)」입니다.
 *
 * ★★ **틈은 8px** 로 둡니다. Attio 는 0 인데 사장님이 「조금 내려서」라 하셨습니다.
 *   닫힐 걱정은 없습니다 — `new.js` 가 **나가면 220ms 기다렸다** 닫고,
 *   `.머리갈래.열림::after` 가 그 틈에 **보이지 않는 다리**를 놓습니다(26px).
 */
.머리서랍.서랍셋 {
  position: fixed;
  top: 117px;                       /* 헤더 아래 109 + 8 */
  left: var(--서랍왼, max(0px, calc((100vw - 1396px) / 2)));
  transform: none;
  /* ★★ **폭은 내용에 맞춥니다.** 848 로 맞췄더니 칸이 둘뿐이라
   *   오른쪽이 텅 비었습니다 — 사장님이 「주요기능」에서 짚으신 바로 그것입니다.
   *   **맞출 것은 왼쪽선**이고, 폭은 내용이 정합니다. */
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 18px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}
.머리갈래.열림 .머리서랍.서랍셋,
.머리갈래:focus-within .머리서랍.서랍셋 { transform: none; }
/* 넓은 서랍도 같이 8px 내립니다 */
.머리서랍.서랍넓게 { top: 117px; }
.띠닫힘 .머리서랍.서랍넓게,
.띠닫힘 .머리서랍.서랍셋 { top: 73px; }        /* 띠를 닫으면 헤더 65 + 8 */
@media (max-width: 1000px) {
  .머리서랍.서랍셋 { width: min(420px, calc(100vw - 32px)); }
}


/* ══════════════════════════════════════════════════════════════
   ■37절 ⑤ · 「적은 대로 만들고」 작업창 — 5.6초 흐름 (2026-09-14)

   저쪽 값 (docs/37-Design값-여덟.md 5절) —
     0.2s 타자(60ms/글자) · 1.9s 보냄 · 2.3 읽었어요 · 2.7 종류 · 3.1 채웠어요 ·
     3.5 사진 · 3.9 다 만들었어요 + 올리기 살아남 · 4.8 눌림 · 5.0 주소 ·
     5.6 손님 폰. 나타나는 것마다 opacity 0→1 · translateY 8→0,
     300ms cubic-bezier(.2,0,0,1).

   ★ 절이 35% 보이면 **한 번만** 돕니다. 되감기 없음 — 다시 스크롤해도 안 돕니다.
   ★ 움직임 줄이기(prefers-reduced-motion)면 **끝 모습으로 바로** 둡니다.
   ══════════════════════════════════════════════════════════════ */

/* 흐름이 붙기 전에는 시안 그대로입니다. `.작업창흐름` 이 붙는 순간부터 숨습니다 —
   JS 가 못 돌면(스크립트 막힘) 시안 끝 모습이 그대로 보입니다. 안전한 쪽입니다. */
.작업창흐름 [data-dd-work="다만듦"],
.작업창흐름 [data-dd-work="걸린시간"],
.작업창흐름 [data-dd-work="머리"],
.작업창흐름 [data-dd-work="첫화면"],
.작업창흐름 [data-dd-work="메뉴"],
.작업창흐름 [data-dd-work="칸들1"],
.작업창흐름 [data-dd-work="칸들2"],
.작업창흐름 [data-dd-work="발"] {
  opacity: 0; transform: translateY(8px);
}

/* 나타남 — 저쪽이 적은 그대로 300ms cubic-bezier(.2,0,0,1) */
.작업창흐름 [data-dd-work].나옴 {
  opacity: 1 !important; transform: translateY(0) !important;
  transition: opacity 300ms cubic-bezier(.2, 0, 0, 1),
              transform 300ms cubic-bezier(.2, 0, 0, 1);
}

/* 손님이 적는 줄 — 타자를 치는 동안 커서가 깜빡입니다 */
.작업창흐름 [data-dd-work="적은줄"] { background: #fff !important; border: 1px solid #e4e7ec; }
.작업창흐름 [data-dd-work="적은줄"].보냄 {
  background: #f3f4f6 !important; border-color: transparent;
  transition: background 300ms cubic-bezier(.2, 0, 0, 1);
}
.작업창커서 {
  display: inline-block; width: 1px; height: 1em; margin-left: 1px;
  background: #202124; vertical-align: -2px;
  animation: 작업창깜빡 900ms steps(1, end) infinite;
}
@keyframes 작업창깜빡 { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* 진행 줄 넷 — 읽었어요 · 종류 · 채웠어요 · 사진 */
.작업창줄들 { display: grid; gap: 6px; }
.작업창줄 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; line-height: 1.5; color: #646b76;
  opacity: 0; transform: translateY(8px);
}
.작업창줄.나옴 {
  opacity: 1; transform: translateY(0);
  transition: opacity 300ms cubic-bezier(.2, 0, 0, 1),
              transform 300ms cubic-bezier(.2, 0, 0, 1);
}
.작업창줄 .체크 { flex: none; width: 14px; height: 14px; color: #202124; }

/* 올리기 — 3.9s 에 살아납니다 (#cad0d9 → #202124) */
.작업창흐름 [data-dd-work="올리기"] {
  background: #cad0d9 !important;
  transition: background 300ms cubic-bezier(.2, 0, 0, 1), transform 150ms ease;
}
.작업창흐름 [data-dd-work="올리기"].살아남 { background: #202124 !important; }
.작업창흐름 [data-dd-work="올리기"].눌림 { transform: scale(.96); }

/* 주소 알약 — 5.0s 에 검은 알약이 됩니다 */
.작업창흐름 [data-dd-work="주소"] { opacity: 0; }
.작업창흐름 [data-dd-work="주소"].나옴 {
  opacity: 1;
  background: #202124 !important; border-color: #202124 !important; color: #fff !important;
  transition: opacity 300ms cubic-bezier(.2, 0, 0, 1),
              background 300ms cubic-bezier(.2, 0, 0, 1),
              color 300ms cubic-bezier(.2, 0, 0, 1);
}

/* 「주소가 나왔어요 — 서버도 도메인도 없이」 카드 */
.작업창알림 {
  margin-top: 10px; padding: 12px 14px;
  border: 1px solid #e4e7ec; border-radius: 12px; background: #fafafb;
  font-size: 15px; line-height: 1.5; color: #242629;
  opacity: 0; transform: translateY(8px);
}
.작업창알림 .잔글 { display: block; margin-top: 2px; font-size: 13px; color: #646b76; }
.작업창알림.나옴 {
  opacity: 1; transform: translateY(0);
  transition: opacity 300ms cubic-bezier(.2, 0, 0, 1),
              transform 300ms cubic-bezier(.2, 0, 0, 1);
}

/* 5.6s — 손님 폰이 **오른쪽 40px 에서** 400ms 미끄러져 들어옵니다.
   틀 안에 겹쳐 띄웁니다. 틀에 `position: relative` 가 없어 JS 가 붙입니다.
   ★ 폰과 말을 **한 통**에 담습니다. 따로 두었더니 말이 틀 밖 아래로 나가
     아예 안 보였습니다 — 찍어서 열어 보고 알았습니다. */
.작업창폰통 {
  position: absolute; right: 20px; bottom: 20px; z-index: 3;
  display: grid; gap: 8px; justify-items: end;
}
.작업창폰 {
  width: 132px; border-radius: 18px; overflow: hidden;
  border: 6px solid #202124; background: #fbf6ee;
  box-shadow: rgba(16, 17, 18, .18) 0 12px 32px;
  opacity: 0; transform: translateX(40px);
}
.작업창폰.나옴 {
  opacity: 1; transform: translateX(0);
  transition: opacity 400ms cubic-bezier(.2, 0, 0, 1),
              transform 400ms cubic-bezier(.2, 0, 0, 1);
}
.작업창폰 .폰속 { padding: 10px 8px; font-size: 9px; line-height: 1.45; color: #3d2b1f; }
.작업창폰 .폰이름 { font-weight: 600; font-size: 11px; }
.작업창폰 .폰줄 { margin-top: 5px; height: 5px; border-radius: 3px; background: #e8dcc8; }
.작업창폰말 {
  font-size: 13px; line-height: 1.5; color: #646b76;
  opacity: 0;
}
.작업창폰말.나옴 { opacity: 1; transition: opacity 300ms cubic-bezier(.2, 0, 0, 1); }

/* 폭이 좁으면 폰이 미리보기를 다 가립니다 — 1100 아래에서는 안 띄웁니다. */
@media (max-width: 1100px) {
  .작업창폰통 { display: none; }
}

/* 움직임 줄이기 — 흐름을 아예 안 켭니다(JS 가 가릅니다). 혹시 붙어도 끝 모습으로. */
@media (prefers-reduced-motion: reduce) {
  .작업창흐름 [data-dd-work] { opacity: 1 !important; transform: none !important; }
  .작업창줄, .작업창알림 { opacity: 1; transform: none; }
  .작업창폰 { opacity: 1; transform: none; }
}


/* 보관함 「고치기」로 들어왔을 때 입력칸 위에 뜨는 띠 (2026-09-14, ■38절 ②) */
.고치는중띠 {
  margin-bottom: 10px; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-soft2);
  font-size: 15px; line-height: 1.5; color: var(--ink-soft);
}


/* ══════════════════════════════════════════════════════════════
   ■38절 · 「적은 대로 만들고」 작업창 — 좁은 폭 (2026-09-14)

   사장님 — 「창을 반으로 줄이니 그 절만 안 줄고 잘립니다.」
   시안이 `width: 1080px` 을 **인라인으로** 박아 두었고, 절이 가운데 정렬이라
   1200 아래에서 **양쪽으로 삐져나갔습니다** (900 에서 왼쪽 −91).

   ★ 28절에 못박힌 폭 315곳을 고쳤지만 **이 절은 37절에 들어온 것**이라
     그 청소를 안 거쳤습니다.
   ★ **비례로 안 줄입니다** (저쪽 지시) — 바닥 크기를 두고, 좁아지면 **세로로 쌓습니다.**
   ★ 인라인이라 `!important` 로만 덮입니다.
   ══════════════════════════════════════════════════════════════ */

[data-dd-work="틀"] {
  width: min(1080px, 100%) !important;
  max-width: 100% !important;
}

/* 안쪽 35fr / 65fr 격자 — 1100 아래에서 **세로로 쌓습니다.**
   좁은 채로 두면 왼쪽 기둥이 270px 아래로 눌려 글자가 세로로 섭니다. */
/* ★ 겨누는 것은 **우리 표**입니다. 처음에 `> div:last-child` 로 겨눴는데,
 *   제가 붙인 **손님 폰**이 마지막 자식이라 격자를 아예 못 집었습니다 —
 *   「시험에서 부품을 집을 때는 `data-dd-` 표로」(CLAUDE.md)가 CSS 에도 같습니다.
 * ★ 쌓는 폭은 **900** 입니다. 959 에서는 왼쪽 240 · 오른쪽 420 이라 아직 읽히고,
 *   900 아래로 가면 왼쪽 기둥이 눌려 글자가 깨집니다. 재서 정했습니다. */
@media (max-width: 900px) {
  [data-dd-work="속"] {
    grid-template-columns: 1fr !important;
    height: auto !important;
  }
  /* 왼쪽 기둥의 오른쪽 선은 **아래 선**이 됩니다 — 세로로 쌓였으니 */
  [data-dd-work="왼쪽"] {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  /* 손님 폰은 미리보기 위에 겹쳐 띄웁니다 — 좁은 폭에서는 자리를 많이 먹어 숨깁니다
     (이미 1100 아래 규칙이 있습니다. 여기서 한 번 더 못박지 않습니다). */
}

/* 폰에서는 미리보기 안쪽 여백도 줄입니다 — 20px 씩 양옆이면 알맹이가 340 뿐입니다 */
@media (max-width: 560px) {
  [data-dd-work="미리보기"] { padding: 12px !important; }
  [data-dd-work="왼쪽"] { padding: 12px !important; }
}


/* 보관함 카드의 「지우기」 (2026-09-14, ■38절) — 옛 보관함에 있던 것을 되살렸습니다.
   ★ **눈에 안 띄게** 둡니다. 「고치기」·「사장님 화면」이 손님이 할 일이고
     지우기는 가끔 쓰는 것이라, 테두리 없이 글자만 둡니다. */
.카드지우기 {
  flex: 0 0 auto; height: 36px; padding: 0 10px;
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink-faint);
  border-radius: 10px;
}
.카드지우기:hover { color: #b4232a; background: var(--bg-soft2); }
.카드지우기:disabled { cursor: default; opacity: .6; }


/* ══════════════════════════════════════════════════════════════
   ■38절 ② · 사장님이 짚으신 것 — 작업창에서 눈에 걸리는 넷 (2026-09-14)
   재서 자리를 찾고 고쳤습니다. 숫자는 961 폭에서 잰 것입니다.
   ══════════════════════════════════════════════════════════════ */

/* ② 「카톡으로 보내기」 밑에 잔글이 붙어 **줄이 안 맞습니다**.
      단추는 44px 인데 칸이 70px 이라 잔글이 아래로 삐져나옵니다.
   ★ 잔글을 단추 **아래 가운데**로 두고, 칸 높이를 단추에 맞춥니다. */
#내보내기칸 {
  display: flex; align-items: center; gap: 8px;
  line-height: 1;
}
#내보내기칸 .잔글, #내보내기칸 small {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 2px; text-align: center;
  font-size: 12px; color: var(--ink-faint); white-space: nowrap;
}
#내보내기칸 { position: relative; }

/* ④ 칩은 이제 스크롤 밖입니다(JS 가 옮깁니다). 줄바꿈해서 **셋 다** 보이게 합니다.
   ★ 2026-09-14 ■39절에 **`.작업창D` 안으로 좁혔습니다** — 이름만으로 걸려
     새 작업창(E)까지 닿고 있었습니다. 옛 작업창에서는 그대로 삽니다. */
.작업창D .고치기칩 {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: none;                     /* 스크롤 칸처럼 눌리지 않게 */
  margin: 8px 0;
}

/* ⑤ 입력칸이 「고칠 게 / 있으면 여기」로 **두 줄로 잘립니다**.
      `padding: 22px 68px 22px 24px` 이라 폭 119 에서 **안쪽이 27px** 밖에 없었습니다.
   ★ 오른쪽 68px 은 둥근 단추 자리라 남기되, 좁아지면 줄입니다. 왼쪽도 같이. */
.작업창D #이어창 {
  padding: 16px clamp(48px, 14%, 68px) 16px clamp(12px, 4%, 24px) !important;
  overflow-y: hidden !important;   /* 한 줄일 때 칸 안에 화살표가 생기던 자리 */
  min-width: 0;
  /* ★ 좁은 폭에서 안내말이 **「고칠 게 / 있으면 여기」로 끝이 잘렸습니다** —
   *   「적으세요」가 안 보였습니다. 시안도 두 줄이지만 **끝까지** 보입니다.
   *   칸이 글에 맞게 자라게 두고, 바닥만 잡아 둡니다. */
  height: auto !important;
  min-height: 60px;
  line-height: 1.45;
}
.작업창D .이어틀 { min-width: 0; }
.작업창D .이어칸 { min-width: 0; padding-left: 0; padding-right: 0; }

/* ⑥ 둥근 화살표가 **파랑**이었습니다(rgb(74,98,200)). 히어로 것은 먹입니다.
      우리 색에 파랑은 없습니다 — 시안 어디에도 안 씁니다. */
.작업창D .동그란보내기 {
  background: #202124 !important;
  color: #ffffff !important;
}
.작업창D .동그란보내기:disabled { background: #cad0d9 !important; }



/* ══════════════════════════════════════════════════════════════════════
   작업창 E — **시안 「Makebee D 작업창.dc.html」 을 그대로 옮긴 것**
   (2026-09-14, ■39절 · 사장님 「작업창 그대로 가져와서 연결해」)

   ★★★ **새 이름입니다.** 옛 `.작업창D` 규칙은 한 줄도 안 지웠고, 여기에
     닿지도 않습니다. 그 규칙들이 서로 덮어 사장님이 보신 탈이 났습니다 —
     진행단계가 왼쪽의 38%를 먹고 대화가 5% 였고, 칩이 스크롤에 갇혔고,
     입력칸이 두 줄로 잘렸습니다. 이름을 가르면 그 싸움이 끝납니다.

   ★ 짜임 (시안 앞머리) — 「왼쪽 대화 30% · 오른쪽 판 70%. 걸음은 대화 흐름 안에
     접히는 줄로. 입력칸은 왼쪽 맨 아래 붙박이.」
   ★ 값은 시안 PC 1440 「다 된 것」 판에서 **재서** 옮겼습니다.
   ══════════════════════════════════════════════════════════════════════ */

.진행판.작업창E {
  /* ★ 대화칸 폭은 **손님이 끌어 정합니다.** 처음값은 폭마다 다릅니다
   *   (1880:440 · 1440:380 · 959:320). `new.js` 가 기기에 기억한 값을 넣습니다. */
  --대화폭: 380px;
  --경계: 10px;
  --머리높이: 56px;

  display: flex; flex-direction: column;
  width: 100%; max-width: none; margin: 0;
  height: calc(100dvh - 81px); min-height: 0;
  background: #fff;
  overflow: hidden;                 /* 안쪽 칸이 저마다 굴러갑니다 */
}

/* ══ 머리 56 — 아래 칸과 **같은 비율로** 둘로 나뉩니다 ══ */
.작업창E .작E머리 {
  flex: none; height: var(--머리높이);
  display: grid; grid-template-columns: var(--대화폭) 1fr;
  border-bottom: 1px solid #e4e7ec;
}
.작업창E .작E머리왼 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 20px; min-width: 0;
}
.작업창E .작E머리오른 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 28px; min-width: 0;
}
.작업창E .작E이름줄 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.작업창E .작E로고 { display: block; color: #241E19; flex: none; }
.작업창E .작E로고 svg { display: block; }
.작업창E .작E판이름 {
  font-size: 15px; line-height: 1.5; font-weight: 600; color: #101112;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.작업창E .작E저장 {
  flex: none; height: 32px; display: inline-flex; align-items: center;
  padding: 0 10px; border-radius: 999px; background: #f3f4f6;
  font-size: 13px; line-height: 1; color: #646b76; white-space: nowrap;
}
.작업창E .작E저장.저장중 { color: #98a0ab; }

.작업창E .작E연장 { display: flex; align-items: center; gap: 2px; flex: none; }
.작업창E .작E연장단추 {
  width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; border: none; background: none; cursor: pointer;
  border-radius: 8px; color: #646b76; padding: 0;
}
.작업창E .작E연장단추 svg { width: 20px; height: 20px; display: block; }
.작업창E .작E연장단추:hover:not(:disabled) { background: #f3f4f6; color: #101112; }
.작업창E .작E연장단추:disabled { color: #cad0d9; cursor: default; }
.작업창E .작E연장단추[aria-pressed="true"] { background: #f3f4f6; color: #101112; }

.작업창E .작E보기알약 {
  display: inline-flex; align-items: center; gap: 0; flex: none;
  padding: 2px; border: 1px solid #e4e7ec; border-radius: 999px; background: #fff;
}
.작업창E .작E탭 {
  height: 30px; padding: 0 14px; border: none; background: none; cursor: pointer;
  border-radius: 999px; font: inherit; font-size: 13px; color: #646b76;
}
.작업창E .작E탭.켜짐 { background: #f3f4f6; color: #101112; font-weight: 600; }

.작업창E .작E첫화면 {
  height: 38px; padding: 0 14px; border: none; background: none; cursor: pointer;
  border-radius: 10px; font: inherit; font-size: 14px; color: #3b3f46;
  display: inline-flex; align-items: center; gap: 6px; flex: none;
}
.작업창E .작E첫화면:hover { background: #f3f4f6; }
.작업창E .작E꺾쇠 {
  width: 10px; height: 10px; flex: none;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.작업창E .작E끝 { display: flex; align-items: center; gap: 8px; flex: none; }
.작업창E .작E보관함 {
  height: 36px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 10px; font-size: 14px; color: #3b3f46; text-decoration: none;
}
.작업창E .작E보관함:hover { background: #f3f4f6; }
.작업창E .작E새판 {
  height: 36px; padding: 0 16px; display: inline-flex; align-items: center;
  border-radius: 10px; background: #202124; color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.작업창E .작E새판:hover { background: #101112; }
.작업창E .작E계정 {
  width: 38px; height: 38px; flex: none; border-radius: 50%; background: #f3f4f6;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #3b3f46;
}

/* ══ 본문 — 왼쪽 대화 · 경계선 · 오른쪽 판 ══ */
.작업창E .작E본문 {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: var(--대화폭) var(--경계) 1fr;
}

/* ── 왼쪽: 스크롤 자리 + 붙박이 자리 ── */
.작업창E .작업왼쪽 {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: #fff; padding: 0; gap: 0; overflow: hidden;
}
/* ★ 스크롤은 **여기 하나**입니다. 칩과 입력칸은 이 밖에 있습니다. */
.작업창E .대화속 {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 20px 20px 12px;
  display: flex; flex-direction: column; gap: 14px;
}
.작업창E .대화속::-webkit-scrollbar { width: 8px; }
.작업창E .대화속::-webkit-scrollbar-thumb { background: #e4e7ec; border-radius: 999px; }

/* 손님이 적은 한 줄 — 말풍선 */
.작업창E .적은한줄 {
  align-self: flex-end; max-width: 90%;
  padding: 10px 14px; border-radius: 12px 12px 2px 12px;
  background: #f3f4f6; color: #101112; font-size: 15px; line-height: 1.55;
  white-space: pre-wrap; word-break: break-word; margin: 0;
}
.작업창E .적은한줄:empty { display: none; }
.작업창E .적은한줄이름 { display: none; }     /* 시안에 이름표가 없습니다 */

/* ★★★ 걸음 — **대화 흐름 안의 접히는 줄**. 칸을 따로 먹지 않습니다 */
.작업창E .진행단계 { padding: 0; border: none; margin: 0; }
.작업창E .단계줄 { display: flex; flex-direction: column; gap: 0; }
.작업창E .단계 {
  display: flex; align-items: center; gap: 8px; min-height: 28px;
  font-size: 15px; line-height: 1.5; color: #98a0ab;
}
.작업창E .동그라미 {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.6px solid #cad0d9; background: none;
  font-size: 10px; line-height: 16px; text-align: center; color: #98a0ab;
  display: inline-block;
}
/* ★ 코드가 붙이는 이름은 `.끝난` 입니다 (`단계표시()`), `.됨` 이 아닙니다.
     **부품이 쓰는 이름은 부품에서 읽습니다** — 짐작하면 옷이 안 입혀집니다. */
.작업창E .단계.끝난 { color: #241E19; }
.작업창E .단계.끝난 .동그라미 {
  background: #202124; border-color: #202124; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
}
.작업창E .단계.지금 { color: #241E19; }
.작업창E .단계.지금 .동그라미 { border-color: #101112; border-width: 2px; }
.작업창E .단계이름 { min-width: 0; }
/* 걸음에 딸린 **펼친 속** — 무엇을 했는지 한두 줄 */
.작업창E .단계속 {
  font-size: 13px; line-height: 1.55; color: #646b76;
  padding: 2px 0 6px 24px; margin: 0;
}
.작업창E .지금뭐하나 {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.5; color: #98a0ab; margin: 6px 0 0;
}
.작업창E .작업시계 { font-family: "JetBrains Mono", ui-monospace, monospace; color: #3b3f46; }
/* ★ 다 만든 뒤에는 걸음이 **접힙니다** — 기록은 남고 자리는 안 먹습니다 */
.작업창E.다됨 .지금뭐하나 { display: none; }

.작업창E .줄들 { padding: 0; display: flex; flex-direction: column; gap: 10px; }
.작업창E #결과 { padding: 0; }

/* ── 붙박이 자리 — 칩 한 줄 + 입력칸 ── */
.작업창E .작업아래 {
  flex: none; margin: 0; display: flex; flex-direction: column; gap: 10px;
  padding: 12px 20px 20px; background: #fff; border-top: 1px solid #e4e7ec;
}
.작업창E .작E칩줄 {
  display: flex; align-items: center; gap: 8px; min-height: 36px;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
}
.작업창E .작E칩줄::-webkit-scrollbar { display: none; }    /* 스크롤바 숨김 (시안) */
.작업창E .작E칩이름 { flex: none; font-size: 13px; line-height: 1.5; color: #98a0ab; }
.작업창E .고치기칩 { display: flex; gap: 8px; flex: none; padding: 0; margin: 0; flex-wrap: nowrap; }
.작업창E .고치기칩 button {
  flex: none; height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid #e4e7ec; background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; color: #3b3f46; white-space: nowrap;
}
.작업창E .고치기칩 button:hover { border-color: #cad0d9; background: #f3f4f6; color: #101112; }
/* 칩이 없으면 줄 자체를 접습니다 — 빈 줄이 자리를 먹지 않게 */
.작업창E .작E칩줄:has(.고치기칩.숨김) { display: none; }

.작업창E .이어칸 { margin: 0; padding: 0; border: none; min-width: 0; }
/* ★★ 입력칸 — 최소 124 (글 자리 56 + 단추줄 44 + 여백 12·12), 최대 240 */
.작업창E .이어틀 {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid #e4e7ec; border-radius: 12px; background: #fff;
  padding: 12px 14px 10px; min-height: 124px; max-height: 240px;
  position: static; box-shadow: none;
}
.작업창E .이어틀:focus-within { border-color: #cad0d9; }
.작업창E #이어창 {
  flex: 1; min-height: 56px; max-height: 160px;
  border: none; background: none; padding: 0; margin: 0; resize: none;
  font: inherit; font-size: 15px; line-height: 1.5; color: #101112;
  overflow-y: auto; width: 100%;
}
.작업창E #이어창::placeholder { color: #98a0ab; }
.작업창E #이어창:focus { outline: none; }
.작업창E .작E입력아래 {
  flex: none; height: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px;
}
.작업창E .작E입력왼, .작업창E .작E입력오 { display: flex; align-items: center; gap: 6px; }
.작업창E .작E둥근연장 {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  border: 1px solid #e4e7ec; background: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: #3b3f46; padding: 0;
}
.작업창E .작E둥근연장 svg { width: 18px; height: 18px; display: block; }
.작업창E .작E둥근연장:hover { background: #f3f4f6; }
.작업창E .작E무엇 {
  height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #e4e7ec; background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; color: #3b3f46;
  display: inline-flex; align-items: center; gap: 6px;
}
.작업창E .작E무엇:hover { background: #f3f4f6; }
.작업창E .작E무엇 .작E꺾쇠 { width: 7px; height: 7px; border-width: 1.4px; }
.작업창E .남은것 { font-size: 12px; line-height: 1.5; color: #98a0ab; white-space: nowrap; }
.작업창E .동그란보내기 {
  width: 36px; height: 36px; flex: none; border-radius: 50%; border: none;
  background: #202124; color: #fff; cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.작업창E .동그란보내기:disabled { background: #cad0d9; cursor: default; }

/* ── 경계선 — 끌어서 대화칸 폭 ── */
.작업창E .작E경계선 {
  display: flex; align-items: center; justify-content: center;
  cursor: col-resize; background: #fff;
  border-left: 1px solid #e4e7ec; border-right: 1px solid #e4e7ec;
  user-select: none; touch-action: none;
}
.작업창E .작E손잡이 {
  width: 4px; height: 44px; border-radius: 2px; background: #cad0d9; display: block;
}
.작업창E .작E경계선:hover .작E손잡이,
.작업창E .작E경계선:focus-visible .작E손잡이 { background: #98a0ab; }
.작업창E .작E경계선.끄는중 .작E손잡이 { background: #3b3f46; }

/* ── 오른쪽: 주소 띠 → 판 → 아래 단추줄 ── */
.작업창E .작업오른쪽 {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: #fafafb; padding: 0; overflow: hidden;
}
.작업창E .작E주소띠 {
  flex: none; height: 44px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 0 28px; background: #fafafb;
}
.작업창E .미리주소 {
  font-size: 13px; line-height: 1.5; color: #646b76; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.작업창E .작E주소단추 { display: flex; align-items: center; gap: 6px; flex: none; }
/* ★ 시안은 **설명 잔글이 없습니다** — 단추 둘만 줄에 맞습니다 */
.작업창E .작E띠단추 {
  height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid #e4e7ec; background: #fff; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1; color: #3b3f46; white-space: nowrap;
}
.작업창E .작E띠단추:hover { background: #f3f4f6; color: #101112; }
.작업창E .작E띠단추:disabled { color: #cad0d9; cursor: default; background: #fff; }

.작업창E .작E판칸 { flex: 1; min-height: 0; display: flex; padding: 20px 28px 0; }
.작업창E .미리보기칸 {
  flex: 1; min-width: 0; min-height: 0; display: flex; padding: 0; background: none;
}
.작업창E .미리틀 {
  flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.작업창E .미리위 { display: none; }        /* 주소는 위 띠로 올라갔습니다 */
.작업창E .미리한칸 {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px 12px 0 0; overflow: hidden;
}
.작업창E .미리틀 .미리한칸 { border: none; border-radius: 0; }
.작업창E .미리이름 {
  flex: none; padding: 10px 14px; font-size: 12px; line-height: 1.5;
  color: #98a0ab; border-bottom: 1px solid #e4e7ec;
}
.작업창E .미리틀칸 { flex: 1; min-height: 0; display: flex; }
.작업창E .미리틀칸 iframe { flex: 1; width: 100%; height: 100%; border: 0; display: block; min-height: 0; }
.작업창E .미리한칸 > img { width: 100%; height: auto; display: block; }
.작업창E .미리빈칸 {
  flex: 1; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #98a0ab; font-size: 15px; line-height: 1.5;
  text-align: center; padding: 24px;
}
.작업창E .미리답 { flex: 1; overflow: auto; padding: 20px; font-size: 15px;
  line-height: 1.7; color: #241E19; white-space: pre-wrap; }
.작업창E .미리새탭 {
  flex: none; padding: 10px 14px; font-size: 13px; color: #646b76;
  border-top: 1px solid #e4e7ec; text-decoration: none;
}
.작업창E .미리새탭:hover { color: #101112; }

.작업창E .작E아래줄 {
  flex: none; height: 68px; display: flex; align-items: center; gap: 8px;
  padding: 0 28px; background: #fff; border-top: 1px solid #e4e7ec;
}
.작업창E .작업단추 {
  height: 44px; padding: 0 18px; border-radius: 10px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.작업창E .고치기단추 { border: 1px solid #e4e7ec; background: #fff; color: #241E19; }
.작업창E .고치기단추:hover { background: #f3f4f6; }
.작업창E .올리기단추 { border: 1px solid #cad0d9; background: #cad0d9; color: #fff; }
.작업창E .올리기단추:disabled { cursor: default; }
.작업창E.다됨 .올리기단추 { background: #202124; border-color: #202124; color: #fff; }
.작업창E .사장님칸:not(.숨김) { flex: none; padding: 12px 28px; background: #fff;
  border-top: 1px solid #e4e7ec; }

/* ★ 대화 접기 — 왼쪽을 통째로 접고 판만 봅니다 (시안 머리의 세 번째 연장) */
.작업창E.대화접힘 { --대화폭: 0px; --경계: 0px; }
.작업창E.대화접힘 .작업왼쪽, .작업창E.대화접힘 .작E경계선 { display: none; }
.작업창E.대화접힘 .작E머리 { grid-template-columns: auto 1fr; }
.작업창E.대화접힘 .작E머리왼 { padding-right: 8px; }

/* ══ 폰 390 — 위아래로 쌓습니다 (시안 04)
   머리 56 → 띠 52 → 판 220 고정 → 대화(스크롤) → 붙박이 ══ */
@media (max-width: 860px) {
  .진행판.작업창E { height: calc(100dvh - 60px); }
  .작업창E .작E머리 { grid-template-columns: 1fr auto; height: 56px; }
  .작업창E .작E머리왼 { padding: 0 12px; }
  .작업창E .작E머리오른 { padding: 0 12px; gap: 6px; }
  /* 폰에서는 「첫 화면 · 보관함 · 새로 만들기」를 접습니다 — 머리 줄이 넘칩니다 */
  .작업창E .작E첫화면, .작업창E .작E보관함, .작업창E .작E새판 { display: none; }
  .작업창E .작E연장단추#기록열기 { display: none; }
  .작업창E .작E탭 { padding: 0 10px; }

  .작업창E .작E본문 { display: flex; flex-direction: column; }
  .작업창E .작E경계선 { display: none; }

  /* ★ 판이 **위**, 대화가 아래입니다 — 폰에서 먼저 볼 것은 만들어진 화면입니다 */
  .작업창E .작업오른쪽 { order: 1; flex: none; }
  .작업창E .작업왼쪽 { order: 2; flex: 1; min-height: 0; }
  .작업창E .작E주소띠 { height: 52px; padding: 0 14px; }
  .작업창E .작E띠단추 { height: 36px; padding: 0 10px; }
  .작업창E .작E판칸 { flex: none; height: 220px; padding: 0 14px; }
  .작업창E .미리틀 { border-radius: 12px; }
  .작업창E .작E아래줄 { height: 60px; padding: 8px 14px; }
  .작업창E .작업단추 { flex: 1; }

  .작업창E .대화속 { padding: 14px 14px 10px; }
  .작업창E .작업아래 { padding: 10px 14px 14px; }
  .작업창E .작E칩줄 { min-height: 44px; }
  .작업창E .고치기칩 button { height: 40px; }
  .작업창E .이어틀 { min-height: 104px; padding: 10px 12px 8px; }
  .작업창E #이어창 { min-height: 36px; }
  .작업창E .작E둥근연장, .작업창E .작E무엇, .작업창E .동그란보내기 { height: 40px; }
  .작업창E .작E둥근연장, .작업창E .동그란보내기 { width: 40px; }
}


/* == 작업창 E - 기록창 · 설정칸 (2026-09-14, 39절) ==
   ★ 둘 다 **서버에 있는 끝점**을 부릅니다 - 기록은 `판목록`, 설정의 공개는
     `/new/creation/<id>/public`. 화면만 있는 가짜가 아닙니다. */

.작업창E .작E머리왼 { position: relative; }
.작업창E .작E기록창 {
  position: absolute; top: calc(100% + 6px); right: 12px; z-index: 30;
  min-width: 220px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,17,18,.12); padding: 8px;
}
.작업창E .작E기록머리 {
  margin: 0 0 4px; padding: 4px 8px;
  font-size: 12px; line-height: 1.5; color: #98a0ab;
}
.작업창E .작E기록빈 { margin: 0; padding: 8px; font-size: 13px; color: #98a0ab; }
.작업창E .작E기록줄 {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 8px; border: none; background: none; cursor: pointer;
  border-radius: 8px; font: inherit; text-align: left;
}
.작업창E .작E기록줄:hover:not(:disabled) { background: #f3f4f6; }
.작업창E .작E기록줄:disabled { cursor: default; }
.작업창E .작E기록이름 { font-size: 14px; color: #241E19; }
.작업창E .작E기록때 { font-size: 12px; color: #98a0ab; white-space: nowrap; }
.작업창E .작E기록줄.지금 .작E기록이름 { font-weight: 600; color: #101112; }

.작업창E .작E설정칸 {
  flex: 1; min-width: 0; min-height: 0; overflow-y: auto;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px 12px 0 0;
}
.작업창E .작E설정속 {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; max-width: 560px;
}
.작업창E .작E설정줄 { display: flex; flex-direction: column; gap: 6px; }
.작업창E .작E설정이름 { font-size: 13px; line-height: 1.5; color: #646b76; }
.작업창E .작E설정줄 input[type="text"] {
  height: 44px; padding: 0 14px; border: 1px solid #e4e7ec; border-radius: 10px;
  font: inherit; font-size: 15px; color: #101112; background: #fff; width: 100%;
}
.작업창E .작E설정줄 input[readonly] { background: #fafafb; color: #646b76; }
.작업창E .작E설정스위치 {
  flex-direction: row; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid #e4e7ec; border-radius: 10px;
}
.작업창E .작E설정스위치 input { width: 20px; height: 20px; flex: none; accent-color: #202124; }
.작업창E .작E설정말 { margin: 0; font-size: 13px; line-height: 1.6; color: #98a0ab; }


/* == 작업창 E - 39절 열어보고 고친 넷 (2026-09-14, 재서 찾음) ==
   ★ 열어 보고 **재서** 찾았습니다. 찍은 것을 눈으로도 봤습니다. */

/* ① 작업창일 때는 **알림띠와 랜딩 머리를 숨깁니다.**
      시안 작업창은 자체 머리 하나이고, 둘이 109px 을 먹어 아래 단추줄이
      화면 밖으로 28px 나갔습니다 - 「올리기」가 잘렸습니다.
   ★ 마크업은 안 건드립니다. 랜딩으로 돌아오면 그대로 보입니다. */
body:has(#진행.작업창E:not(.숨김)) #알림띠,
body:has(#진행.작업창E:not(.숨김)) header.꼭대기 { display: none !important; }
body:has(#진행.작업창E:not(.숨김)) #문의단추 { display: none !important; }
/* 머리 둘이 빠진 만큼 작업창이 화면을 다 씁니다 */
body:has(#진행.작업창E:not(.숨김)) .진행판.작업창E { height: 100dvh; }

/* ③ 걸음이 **세로**였습니다 - `.단계 { flex-direction: column }`(2458줄)이
      우리 규칙의 **안 적은 칸**으로 샜습니다. 적어서 막습니다. */
.작업창E .단계 {
  flex-direction: row !important;
  align-items: center; justify-content: flex-start;
  min-width: 0; flex: none; gap: 8px;
}
.작업창E .단계이름 { flex: 1; min-width: 0; text-align: left; }
.작업창E .동그라미 { width: 16px; height: 16px; flex: none; }

/* ④ 입력칸 단추줄 폭이 **82px** 이었습니다 - 옛 `.이어틀 { align-items: center }`(2493줄).
      같은 병입니다. 적어서 막습니다. */
.작업창E .이어틀 {
  align-items: stretch !important;
  border-radius: 12px !important;
  padding: 12px 14px 10px !important;
  background: #fff !important;
  gap: 0 !important;
}
.작업창E .작E입력아래 { width: 100%; }
.작업창E #이어창 { width: 100%; }
/* 남은 크레딧 줄은 입력칸 안으로 들어갔습니다 - 옛 자리(위 오른쪽)는 접습니다 */
.작업창E .남은것줄 { display: none; }


/* == 작업창 E - 39절 파랑 막기 (2026-09-14) ==
   `.단계.지금 .동그라미 { background: var(--honey) }`(2468줄)이 샜습니다.
   `--honey` 는 **이름만 꿀이고 값이 파랑** #4A62C8 입니다.
   ★ 시안의 「지금」 걸음은 **테두리가 굵은 흰 동그라미**입니다. */
.작업창E .단계.지금 .동그라미 {
  background: #fff !important;
  border: 2px solid #101112 !important;
  color: #101112 !important;
}
.작업창E .단계.끝난 .동그라미 {
  background: #202124 !important;
  border-color: #202124 !important;
  color: #fff !important;
}
.작업창E .동그라미 { background: none; }


/* == 작업창 E - 다 된 뒤에도 **걸음은 남습니다** (2026-09-14, 39절) ==
   ★ 찍어서 열어 보고 알았습니다 - 「다 된 것」에서 걸음 넷이 통째로 사라졌습니다.
     옛 규칙 `.다됨 .진행단계 { display: none }`(2471줄 언저리)이
     제가 `#진행` 에 붙인 `다됨` 을 보고 발동했습니다.
   ★ 시안에서 걸음은 **대화 흐름 안의 기록**입니다. 다 된 뒤에도 그대로 남고,
     사라지는 것은 시계와 「떠나지 마세요」뿐입니다. */
.작업창E.다됨 .진행단계 { display: block !important; }
.작업창E.다됨 .단계줄 { display: flex !important; flex-direction: column; }
.작업창E.다됨 .지금뭐하나 { display: none !important; }


/* == 작업창 E - 걸음이 **가운데로 몰렸습니다** (2026-09-14, 39절 · 같은 병 넷째) ==
   옛 `.단계줄 { align-items: center }`(2457줄)이 **우리가 안 적은 칸**으로 샜습니다.
   `.단계`(세로) · `.이어틀`(안 펴짐) · `.동그라미`(파랑)에 이어 네 번째입니다.
   ★ 시안의 걸음은 **왼쪽에 붙는 한 줄**입니다. */
.작업창E .단계줄 { align-items: stretch !important; justify-content: flex-start; }
.작업창E .지금뭐하나 { justify-content: flex-start; }


/* == 작업창 E - 폰에서 「고치기·올리기」는 **맨 아래 붙박이** (2026-09-14, 39절) ==
   시안 04 - 「머리 56 → 띠 52 → 판 220 → 대화(스크롤) → 붙박이: 칩 + 입력칸 +
   고치기·올리기」. 우리는 단추가 **판 바로 밑**이라 대화가 그 아래로 밀렸습니다.
   ★ 오른쪽 칸을 `display: contents` 로 풀어 그 자식들이 본문의 직계가 되게 하고,
     차례만 `order` 로 정합니다. **마크업은 안 건드립니다.** */
@media (max-width: 860px) {
  .작업창E .작업오른쪽 { display: contents; }
  .작업창E .작E주소띠 { order: 1; }
  .작업창E .작E판칸  { order: 2; }
  .작업창E .작업왼쪽  { order: 3; }
  .작업창E .작E아래줄 { order: 4; }
  .작업창E .사장님칸  { order: 5; }
}


/* == 작업창 E - 폰 머리에서 **판 이름이 눌렸습니다** (2026-09-14, 39절) ==
   찍어서 보니 「달빛카페」가 「!」 한 글자로 줄었습니다 - 저장 알약이 자리를
   다 먹고 이름이 0 까지 눌렸습니다.
   ★ 이름이 먼저입니다. 알약은 필요한 만큼만 쓰고, 길면 알약 쪽이 줄어듭니다. */
@media (max-width: 860px) {
  .작업창E .작E이름줄 { flex: 1 1 auto; min-width: 0; gap: 6px; }
  .작업창E .작E판이름 { flex: 1 1 auto; min-width: 56px; }
  .작업창E .작E저장 {
    flex: 0 1 auto; min-width: 0; max-width: 46%;
    overflow: hidden; text-overflow: ellipsis; padding: 0 8px;
  }
  .작업창E .작E로고 { flex: none; }
}

/* 폰 시안은 「화면 | 설정」입니다 - 「보기」를 접어 판 이름 자리를 냅니다 (39절) */
@media (max-width: 860px) {
  .작업창E .작E긴말 { display: none; }
  .작업창E .작E판이름 { min-width: 72px; }
}


/* == 작업창 E - 로고 (2026-09-14, 40절 2번) ==
   ★ 랜딩 헤더 것을 그대로 씁니다. 여기서는 **크기만** 정합니다 -
     색·모양·차례는 `.로고`·`.벌`·`.로고글자` 가 이미 쥐고 있습니다.
     머리가 56px 이라 랜딩(26px)보다 한 톤 작게 17px 입니다. */
.작업창E .작E로고 {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  text-decoration: none; flex: none;
}
.작업창E .작E로고 .로고글자 { font-size: 17px; line-height: 1; }
.작업창E .작E로고 .벌 { color: var(--로고먹); flex: none; }


/* ══ 작업창 E — **글자를 시안 여덟로 맞춥니다** (2026-09-14, 40절 5번) ══
 *
 * 잰 값 (`40-작업창글자-확인`) — 크기 여섯 가운데 **10 · 14 · 16** 셋이 시안 밖이고,
 * 같은 크기에 줄 간격이 여럿(13px 에 1 / 1.5 / 1.7), 굵기가 넷(400·600·700·800)이었습니다.
 *
 * 시안 머리말 — 「글자 여덟 · 줄 간격 크기마다 하나 —
 *   13/1.5 · 15/1.5 · 17/1.5 · 19/1.4 · 22/1.3 · 40/1.12 · 52/1.1 · 64/1.05.
 *   굵기 500, 제목만 600.」 작업창은 큰 글자를 안 쓰니 13·15·17 셋이면 됩니다.
 *
 * ★ 로고(`.작E로고`)는 **상표**라 이 규칙 밖입니다 — Baloo 2 800 이 규격입니다.
 */
.작업창E .남은것,
.작업창E .작E기록때,
.작업창E .미리이름,
.작업창E .미리새탭 { font-size: 13px !important; line-height: 1.5 !important; }
.작업창E .작E기록이름 { font-size: 15px !important; line-height: 1.5 !important; }
.작업창E .동그란보내기 { font-size: 15px !important; line-height: 1.5 !important; }
/* ★ `line-height: 16px` 이던 것을 시안 값으로 고쳤습니다 — 이 규칙이 더 구체적이라
     아래 `1.5` 를 이기고 있었습니다 (2026-09-14, 40절 5번에 재서 찾음).
     동그라미 안 가운데 맞추기는 **flex 가** 합니다. */
.작업창E .동그라미,
.작업창E .단계.끝난 .동그라미,
.작업창E .단계.지금 .동그라미 { font-size: 13px !important; line-height: 1.5 !important; }
.작업창E .작E저장 { line-height: 1.5 !important; }
.작업창E .작E첫화면,
.작업창E .작E보관함,
.작업창E .작E새판,
.작업창E .작E계정 { font-size: 15px !important; line-height: 1.5 !important; }
/* 굵기 — 500 기본, 제목만 600. 로고는 뺍니다 */
.작업창E *:not(.작E로고):not(.작E로고 *) { font-weight: 500; }
.작업창E .작E판이름,
.작업창E .작E새판,
.작업창E .작업단추,
.작업창E .작E탭.켜짐,
.작업창E .작E계정,
.작업창E .작E기록줄.지금 .작E기록이름 { font-weight: 600; }
/* 입력칸은 브라우저 기본(400)이라 따로 적습니다 */
.작업창E #이어창, .작업창E input, .작업창E textarea, .작업창E button {
  font-weight: 500; line-height: 1.5;
}

/* 줄 간격 — 잰 자리 넷을 시안 값(크기마다 하나)으로 맞춥니다 (40절 5번)
   `작E탭` 1.7 · `동그라미` 16px · `작E띠단추` 1 · `작업단추` 1.7 이었습니다.
   ★ 동그라미는 **flex 로 가운데 맞춥니다** - line-height 로 맞추면 줄 간격이 어긋납니다. */
.작업창E .작E탭,
.작업창E .작E띠단추 { line-height: 1.5 !important; }
.작업창E .작업단추 { line-height: 1.5 !important; }
.작업창E .동그라미 {
  line-height: 1.5 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  overflow: hidden;
}


/* ══ 작업창 E — **시안과 나란히 놓고 찾은 넷** (2026-09-14, 40절 11번) ══
 *
 * 「숫자로 재지 말고 그림을 보고」 — 나란히 붙여 놓고서야 보였습니다.
 *   ① 판 칸 안에 **브라우저 틀**(점 셋 + 주소)이 있어야 하는데 제가 숨겼습니다
 *   ② 「고치기·올리기」가 시안은 **오른쪽 끝**인데 우리는 왼쪽입니다
 *   ③ 주소 띠의 주소가 시안은 **가운데**입니다
 *   ④ 「첫 화면 ▾」이 시안에 있습니다 (제가 숨겼습니다)
 */

/* ① 브라우저 틀 — 점 셋 + 주소. 시안 판의 맨 위 줄입니다 */
.작업창E .미리위 {
  display: flex !important; align-items: center; gap: 6px;
  flex: none; height: 34px; padding: 0 12px;
  border-bottom: 1px solid #e4e7ec; background: #fafafb;
}
.작업창E .판점 {
  width: 9px; height: 9px; border-radius: 50%; background: #e4e7ec; flex: none;
}
.작업창E .미리위 .미리주소 {
  margin: 0 auto; padding: 2px 12px;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 6px;
  font-size: 13px; line-height: 1.5; color: #646b76;
  max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ② 「고치기」는 오른쪽 끝 */
.작업창E .작E아래줄 { justify-content: flex-end; }

/* ③ 주소 띠의 주소를 가운데로 */
.작업창E .작E주소띠 { position: relative; }
.작업창E .작E주소띠 > .미리주소 {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 40%; text-align: center;
}

/* ④ 「첫 화면 ▾」을 되살립니다 — 시안에 있습니다.
      쪽이 하나뿐이라 눌러도 고를 것이 없어 숨겼는데, 시안대로 두고
      **누르면 판 맨 위로** 갑니다 (`new.js` 가 잇습니다). */
.작업창E .작E첫화면.숨김 { display: inline-flex !important; }
@media (max-width: 860px) { .작업창E .작E첫화면.숨김 { display: none !important; } }

/* 브라우저 틀 — 판 칸 안, `#미리보기칸` 바깥 (40절 11번) */
.작업창E .작E판칸 { flex-direction: column; }
.작업창E .작E판틀 {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e4e7ec; border-radius: 12px 12px 0 0;
  overflow: hidden;
}
.작업창E .작E판머리 { border-radius: 12px 12px 0 0; }
.작업창E .작E판틀 .미리보기칸 { border: none; border-radius: 0; }
.작업창E .작E판틀 .미리틀 { border: none; border-radius: 0; }
/* 주소 띠는 왼쪽 정렬로 되돌립니다 — 시안 차례입니다 */
.작업창E .작E주소띠 > .미리주소 {
  position: static; transform: none; max-width: 50%; text-align: left;
}

/* 머리 왼쪽 — **판 이름이 먼저입니다** (40절 11번, 나란히 놓고 찾음)
   로고 + 이름 + 저장 알약 + 연장 셋이 대화칸 폭(380)에 빡빡해
   「달빛카페」가 「달..」로 잘렸습니다. 이름에 자리를 주고 알약을 줄입니다. */
.작업창E .작E머리왼 { gap: 6px; }
.작업창E .작E이름줄 { flex: 1 1 auto; min-width: 0; }
.작업창E .작E판이름 { flex: 0 1 auto; min-width: 44px; }
.작업창E .작E저장 {
  flex: 0 1 auto; min-width: 0; max-width: 40%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px;
}
.작업창E .작E연장 { flex: none; }

/* 폰 머리 — **로고 글자를 접습니다** (40절 11번, 폰을 크게 보고 찾음)
   시안 폰 머리에는 로고가 아예 없고 「〈 · 달빛카페 저장됨 · 화면|설정」입니다.
   우리는 「Makebee」 글자가 자리를 먹어 판 이름이 「달빛...」로 잘렸습니다.
   ★ 로고를 없애지는 않습니다 — **벌만** 남겨 우리 것임이 보이게 합니다. */
@media (max-width: 860px) {
  .작업창E .작E로고 .로고글자 { display: none; }
  .작업창E .작E로고 .벌 { width: 22px; height: 17px; }
  .작업창E .작E판이름 { min-width: 84px; }
}

/* 걸음 값 — 시안의 흐린 오른쪽 글 (40절 5번) */
.작업창E .단계값 {
  font-size: 13px; line-height: 1.5; color: #98a0ab;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.작업창E .단계값:empty { display: none; }
.작업창E .단계.끝난 .단계이름 { color: #241E19; }


/* ══ 40절 덧 — 검은 머리와 발 (2026-09-14, 사장님이 캡처로 짚으신 넷) ══
 *
 * 재서 찾았습니다 — 검은 절에서 헤더가 `.반전` 을 다는데 CSS 는
 * `.검은바탕`·`.검은절` 만 보고 있었습니다. `.로고글자` 만 흰색으로 덮이고
 * `.로고bee` 와 `.벌` 은 `rgb(16,17,18)` 그대로라 **바탕(rgb(16,16,16))에 묻혔습니다.**
 */

/* ① 검은 머리에서 로고가 **통째로 희게** */
.꼭대기.반전 .로고글자,
.꼭대기.반전 .로고bee { color: #ffffff; }
.꼭대기.반전 .벌 { color: #ffffff; }
.꼭대기.반전 .로고 { --로고노랑: #ffffff; --벌줄: #101010; }

/* ④ 로그인 · 무료로 시작하기 — **흰 바탕에 검은 글씨** (사장님).
      검은 머리에서 테두리만 있는 단추는 눈에 안 들어옵니다. */
.꼭대기.반전 #로그인칸.윗단추 {
  background: #ffffff; color: #101112; border-color: #ffffff;
}
.꼭대기.반전 #시작하기칸.윗단추.채움 {
  background: #ffffff; color: #101112; border-color: #ffffff;
}
.꼭대기.반전 #로그인칸.윗단추:hover,
.꼭대기.반전 #시작하기칸.윗단추.채움:hover { background: #f3f4f6; color: #101112; }

/* ③ 발 로고 — 헤더와 같은 락업. 발은 **검은 바탕**이라 흰색입니다 */
.발 .발로고 {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: "Baloo 2", var(--글꼴, system-ui), sans-serif;
  font-weight: 800; font-size: 22px; line-height: 1.3; color: #ffffff;
  --로고노랑: #ffffff; --벌줄: #101010;
}
.발 .발로고 .로고글자 { font-size: 22px; line-height: 1.3; color: #ffffff; }
.발 .발로고 .로고bee { color: #ffffff; }
.발 .발로고 .벌 { color: #ffffff; flex: none; }

/* 발 로고를 **헤더와 같은 모양**으로 (2026-09-14, 사장님 지적)
   `.발로고 .벌`(746줄)이 `position:absolute; right:-6px; top:-14px` 라
   벌이 글자 오른쪽 위로 떴습니다. 헤더는 벌이 **왼쪽 칸**입니다.
   ★ 옛 규칙은 그대로 두고 여기서 덮습니다 — 다른 쪽이 아직 그것을 씁니다. */
/* ★ **맨 아래 사업자 줄(`#발`)은 건드리지 않습니다** — 거기는 작은 한 줄 띠라
     벌을 인라인으로 바꾸니 줄이 넘쳐 **두 줄이 되고 로고가 잘렸습니다**.
     사장님이 짚으신 것은 **큰 발**(`[data-dd-foot]`)의 로고입니다. */
.발[data-dd-foot] .발로고 .벌 {
  position: static !important; right: auto !important; top: auto !important;
  width: 26px !important; height: 20px !important;
  transform: none !important;
}
.발[data-dd-foot] .발로고 { position: static; }


/* ══ 40절 덧2 — 발을 attio 결로 (2026-09-14, 사장님 캡처 지시) ══
 *
 * ① 로고를 **머리 기둥에 맞춥니다** — `.발안` 이 `padding: 40px 180px` 이라
 *    머리(`.머리기둥` max-width 1396 · padding 0 24px)보다 **156px** 안으로 들어갔습니다.
 * ② **흰 줄 둘을 없앱니다** — `.발안` 과 `#발` 의 `border-top`.
 * ③ 맨 아래 띠를 발 **안쪽 맨 아래 줄**로 (자리는 `new.js` 가 옮깁니다).
 */
.발[data-dd-foot] .발안 {
  max-width: 1396px; padding: 56px 24px 0;
  border-top: none;                     /* ② 흰 줄 하나 없앰 */
}

/* ③ 맨 아래 줄 — attio 는 왼쪽에 소셜, 오른쪽에 © 와 법적 링크입니다.
      우리는 소셜이 없어 **왼쪽에 사업자 줄, 오른쪽에 ©** 로 둡니다. */
.발아래줄 {
  margin-top: 56px; padding: 24px 0 40px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  justify-content: flex-start;
  background: none; color: #75777c;
  font-size: 13px; line-height: 1.5;
}
.발아래줄 a { color: #75777c; text-decoration: none; }
.발아래줄 a:hover { color: #ffffff; text-decoration: none; }
.발아래줄 b { font-size: 13px; font-weight: 500; color: #98a0ab; }
.발아래줄 .아직 { color: #4a4d52; }
/* 흰 바탕·흰 줄이 사이에 끼던 자리 — 이제 발 안쪽이라 지웁니다 */
.발아래줄::before { display: none !important; }

@media (max-width: 900px) {
  .발[data-dd-foot] .발안 { padding: 40px 16px 0; }
  .발아래줄 { margin-top: 32px; padding: 20px 0 28px; }
}

/* 발을 **머리 기둥과 같은 자리로** (2026-09-14, 사장님 — 「로고 위치 헤더바에 맞춰주고」)
 *
 * 잰 값 — 머리기둥 `max-width:1440 · padding:0 20px` → 로고 left 20(1440) · 260(1920).
 *         발은 부모(`.감`)의 `padding:0 64px` 에 갇히고 `.발안` 이 `1396 · 24px` 라
 *         로고 left 112 · 286 이었습니다. **92·26px 어긋났습니다.**
 * ★ 발을 화면 폭으로 펴고, 안쪽을 **머리기둥과 똑같은 값**으로 둡니다.
 *   같은 값을 두 곳에 적는 셈이지만, 머리는 시안 마크업이라 변수로 묶기 어렵습니다 —
 *   대신 여기에 **어디서 가져온 값인지** 적어 둡니다. */
.발[data-dd-foot] {
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: 0;
  padding: 0 !important;          /* 2160줄 옛 `.발 { padding: 28px 24px }` 를 끕니다 */
}
.발[data-dd-foot] .발안 {
  max-width: 1440px; margin: 0 auto;
  padding: 56px 20px 0;           /* ← `.머리기둥` 과 같은 20px */
}
@media (max-width: 900px) {
  .발[data-dd-foot] .발안 { padding: 40px 16px 0; }
}

/* 맨 아래 줄이 **두 줄로 넘쳤습니다** — attio 는 한 줄입니다 (2026-09-14).
   글자는 그대로 두고 사이만 좁힙니다. 법으로 적어야 하는 말이라 줄이지 않습니다. */
.발아래줄 { column-gap: 7px; row-gap: 4px; }
.발아래줄 > * { white-space: nowrap; }

/* 발 **아래에 흰 띠 40px** 이 남았습니다 (2026-09-14, 사장님 — 「제일 밑에 흰색 띠」)
   재서 찾았습니다 — 발 바닥 12460 · 문서 12500 으로 **40px 빈틈**이고,
   그것은 부모 `.감` 의 `padding: 0 64px 40px` 중 **아래 40px** 입니다.
   `body` 바탕이 흰색이라 그 틈이 흰 띠로 보입니다.
   ★ `.감` 의 값을 고치지 않고 **발이 그만큼 아래로 뻗게** 합니다 —
     다른 쪽도 `.감` 을 쓰기 때문입니다. */
/* ★ 처음엔 `margin-bottom:-40px` 과 `padding-bottom:40px` 을 같이 줬는데
     **서로 상쇄되어** 틈이 그대로였습니다(재서 확인 — 빈틈 40px).
   ★ 두 가지로 막습니다 —
     ㉠ 발이 `.감` 의 **마지막 자식일 때만** 그 아래 여백을 0 으로 (다른 쪽은 안 건드립니다)
     ㉡ 그래도 남으면 검은 배경이 **40px 더 아래로** 뻗어 덮습니다 */
.감:has(> .발[data-dd-foot]:last-child) { padding-bottom: 0 !important; }
.발[data-dd-foot]::before { bottom: -40px; }


/* ★ 손님 말풍선 아래의 되돌리기 (2026-09-16, ■71절 ②).
 *   눈에 띄되 **누르라고 조르지 않게** — 글자 단추 하나입니다.
 *   저쪽도 같은 자리에 같은 무게로 둡니다. */
.내말줄 .내말되돌리기 {
  display: block;
  margin: 6px 0 0 auto;
  padding: 2px 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  color: var(--muted, #98a0ab);
  cursor: pointer;
  border-radius: 6px;
}
.내말줄 .내말되돌리기:hover { color: var(--ink, #101112); background: rgba(0,0,0,.04); }
.내말줄 .내말되돌리기[disabled] { opacity: .5; cursor: default; }

/* 되돌렸다는 말은 **접히지 않습니다** — 손님이 방금 누른 일입니다 */
.되돌림알림 { font-weight: 600; }