/* 따뜻한 벌 — 뚝딱 색·글꼴 한 벌  (2026-09-06)
 *
 * ★★ 왜 파일 하나인가.
 *
 *   지금까지 쪽마다 `:root{...}` 를 따로 두었습니다. 스물한 쪽입니다.
 *   색 하나를 바꾸려면 스물한 군데를 고쳐야 했고, 그러다 보니
 *   쪽마다 조금씩 다른 회색을 쓰고 있었습니다.
 *
 *   이제 이 파일만 고치면 전부 따라옵니다.
 *
 * ★ 변수 이름은 **옛 이름을 그대로 씁니다** (--bg, --ink, --accent …).
 *   쪽마다 그 이름으로 이미 수백 군데를 쓰고 있어서, 이름을 바꾸면
 *   그 전부를 손대야 합니다. 값만 갈아 끼웁니다. 동작은 안 건드립니다.
 *
 * ★ 값의 출처는 `docs/시안/토큰.md` 이고, 그 출처는 시안 셋의 표입니다.
 *   여기 없는 색은 화면에 쓰지 않습니다.
 */

:root {
  /* ── 바탕 ────────────────────────────────────────────── */
  --bg:          #FFFCF8;   /* 화면 바탕 */
  --surface:     #FFFFFF;   /* 카드 */
  --surface-alt: #FBF7F1;   /* 사이드바 · 칩 · 앱 자판 · 「다음에 할 것」 */
  --bubble:      #F7F2EB;   /* 답 말풍선 */

  /* ── 글자 ────────────────────────────────────────────── */
  --ink:       #241E19;   /* 본문 · 제목 */
  --ink-menu:  #5C554D;   /* 메뉴 · 진행 줄 */
  --ink-soft:  #756B62;   /* 보조 설명 */
  --ink-faint: #7A7268;   /* 라벨 · 흐린 글자 · 입력창 안내 */

  /* ── 강조 — 하나뿐입니다 ──────────────────────────────
   *
   * ★ 쓰는 자리가 정해져 있습니다. 로고 점 · 「3분 · 링크 하나」 ·
   *   진행 중인 줄 · 등급 카드의 값 안내 한 줄 · 공개 토글 켜짐.
   *   **그 밖에는 쓰지 않습니다.** 시안 표에 「강조색 하나만」이라고 있습니다.
   */
  /* ★ 2026-09-10 사장님 지시 — 「주황 들어간 것 다 카카오 노랑으로」.
   *
   *   노랑은 **채우는 자리**에만 씁니다. #FEE500 은 밝아서
   *   흰 바탕에 글자로 쓰면 한 글자도 안 읽힙니다.
   *   그래서 둘로 나눕니다 — 채우는 노랑과 글자용 진한 금색.
   *   옛 이름 --accent 는 스물한 쪽에서 **거의 글자색으로** 쓰고 있어
   *   (링크·eyebrow·삭제 글자 …) 진한 쪽을 가리킵니다.
   *   채우는 자리는 --honey 를 직접 부릅니다.
   */
  --honey:     #FEE500;   /* 카카오 노랑 — 채우는 자리 (벌 줄무늬·날개·단추 바탕) */
  --honey-ink: #6E5600;   /* 그 노랑의 진한 쪽 — 글자 (로고 「bee」·링크·강조 한 줄) */
  --accent: var(--honey-ink);

  /* ── 주의 · 실패 — 빨강을 쓰지 않습니다 ───────────────── */
  --warn:      #C2703A;
  --warn-deep: #B14E2D;

  /* ── 선 ──────────────────────────────────────────────── */
  --line:       #E5DCD1;   /* 입력창 테두리 */
  --line-soft:  #EDE5DB;   /* 절·목록·표 구분선 */
  --line-faint: #F0E9E0;   /* 카드 안 옅은 구분선 */

  /* ── 옛 이름 이어 붙이기 ──────────────────────────────
   *
   * ★ 스물한 쪽이 아래 이름들을 쓰고 있습니다. 지우면 그 쪽들이 색을 잃습니다.
   *   **단추는 검정입니다.** 그래서 --accent 계열을 강조색(주황)이 아니라
   *   먹빛으로 맞춥니다 — 시안의 단추가 전부 #241E19 입니다.
   *   주황이 필요한 자리는 위의 --accent 를 직접 부릅니다.
   */
  --accent-deep: #241E19;   /* 단추 · 링크 (검정) */
  --accent-pale: #FBF7F1;   /* 옅은 강조 바탕 */
  --ink-strong:  #241E19;

  /* 상태 색. 시안에 빨강·초록이 없어서 따뜻한 쪽으로 맞췄습니다. */
  --ok:      #4F7A55;
  --ok-bg:   #F1F5F0;
  --good:    #4F7A55;
  --bad:     #C2703A;
  --bad-bg:  #FBF0E9;
  --danger:  #C2703A;
  --success: #4F7A55;
  --free:    #7A7268;
  --new:     var(--honey-ink);
  --wait:    #7A7268;
  --slow:    #C2703A;
  --slow-bg: #FBF0E9;
  --danger-pale: #FBF0E9;

  /* ── 글꼴 ────────────────────────────────────────────── */
  --font: 'Pretendard', -apple-system, BlinkMacSystemFont,
          'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif;

  /* ── 간격 · 모양 ─────────────────────────────────────── */
  --gap-section: 120px;   /* 절 사이 (PC) */
  --pad-page:    96px;    /* 바깥 여백 (PC) */
  --r-card:      22px;
  --r-input:     22px;
  --r-pill:      999px;
  --r-menu:      16px;
}

@media (max-width: 768px) {
  :root {
    --gap-section: 72px;
    --pad-page:    24px;
    --r-card:      20px;
    --r-input:     20px;
  }
}

/* ── 모든 쪽에 걸리는 바탕 ─────────────────────────────
 *
 * ★ 여기서 body 를 칠하지 않습니다. 쪽마다 자기 body 규칙이 있고,
 *   이 파일이 먼저 실리면 쪽 것이 이깁니다. 값만 주고 그리기는 쪽이 합니다.
 *
 * ★ 다만 **한글이 낱말 가운데서 안 끊기게** 하는 것은 여기서 합니다.
 *   시안이 거의 모든 글 덩어리에 keep-all 을 걸어 두었는데,
 *   쪽마다 넣으면 빠뜨립니다.
 */
h1, h2, h3, h4, p, li, summary, .keep {
  word-break: keep-all;
}

/* ── 공개하기 토글 (2026-09-06, 시안) ─────────────────────
 *
 * ★ `make.js` 가 만드는 부품인데, 그 파일은 Cloud Run 에서 오고
 *   옷은 쪽마다 자기 것입니다. 두 쪽(작업창·/new)이 같이 쓰라고 여기 둡니다.
 *   `loop/화면/new.css` 에도 같은 규칙이 있습니다 — 값이 같아야 합니다.
 *
 * ★ 켜졌을 때만 주황입니다. 강조를 쓰는 다섯 자리 중 하나입니다.
 */
.공개제목 { font-size: 15px; color: var(--ink); }
.공개설명 { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; }
.공개스위치 {
  width: 46px; height: 27px; border: 0; border-radius: 999px; flex: none;
  background: #D8CFC4; 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; }

/* 고치기 입력칸 아래 값 어림 (2026-09-06). `make.js` 가 답니다. */
.값미리 { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.값미리:empty { display: none; }

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

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


/* ══ Makebee 로고 락업 — **여기가 한 곳입니다** (2026-09-10) ═══════════
 *
 * ★ 왜 여기에 두나.
 *   로고가 쪽마다 달랐습니다 — 옛 쪽 열셋은 「Make + 벌그림」, 왼쪽 바 넷은
 *   아직 **「뚝딱」**(옛 이름), 랜딩·로그인만 「Makebee」. 사장님이 그것을
 *   「로고가 akebee 로 잘렸다」고 짚으셨습니다. 잘린 게 아니라 **읽히는 모양이
 *   쪽마다 달랐던** 것입니다.
 *
 * ★ 확정 로고 (2026-09-09 사장님 결정) —
 *   **「Makebee」를 다 쓰고, 벌은 마지막 e 오른쪽 위에 앉는다.**
 *   「벌이 글자의 일부」는 폐기된 안입니다.
 *
 * ★ 크기는 `--mbk-글자` 하나만 바꾸면 벌이 따라옵니다.
 *   랜딩 머리가 글자 26px 에 벌 32x25 · right -8px · top -19px 이고,
 *   벌은 늘 글자의 1.23배 폭 · 0.96배 높이입니다. 그 비율을 em 으로 박았습니다.
 *   ★ 옮길 때 px 을 그대로 베끼지 않습니다 — 기둥이 다르면 결과가 달라집니다.
 */
.mbk { position:relative; display:inline-flex; align-items:center;
       text-decoration:none; color:var(--ink); --mbk-글자:19px; }
.mbk-글 { font-family:"Baloo 2", system-ui, sans-serif; font-weight:800;
          font-size:var(--mbk-글자); line-height:1; letter-spacing:-0.01em;
          color:var(--ink); }
.mbk-bee { color:var(--honey-ink); }
.mbk-벌 { position:absolute; right:-0.31em; top:-0.73em;
          width:1.23em; height:0.96em; font-size:var(--mbk-글자);
          transform:rotate(-6deg); flex-shrink:0; }