:root {
  /* 이 화면은 밝은 색만 씁니다.
     이 줄이 없으면 휴대폰의 '자동 다크 모드' 가 색을 제멋대로 뒤집어서
     예시 글자와 입력한 값이 또 구분이 안 됩니다. */
  color-scheme: light;

  /* 2026-11-11 색 기준 정리 — 베이지 바탕을 옅은 회색으로 (검정 · 체리 단추와 덜 다투게).
     역할: 바탕 --bg · 카드/입력면 --surface · 테두리 --border · 본문 --ink(= 주요 단추 채움) · 보조 글자 --muted
           체리 강조 --accent(=--cherry) · 체리 강조 바탕 --accent-soft.
     체리색은 선택된 단계 · 진행 표시 · 상태 배지 · 브랜드에만 씁니다 (채운 단추는 화면마다 검정 하나). */
  --bg: #fcfcfb;
  --band: #f1f1ef; /* 구역을 나누는 굵은 띠 (홈 단계 묶음 사이) */
  --surface: #ffffff;
  --border: #e4e5e7;
  --ink: #242424;
  /* 보조 글자. 바탕(#f7f7f5)과 대비 4.5:1 · 흰 카드 위 4.8:1. 체리 강조 바탕 위에는 쓰지 않습니다(4.2:1) */
  --muted: #6b7280;
  /* 강조색 = 로고의 체리색 하나로 (예전엔 갈색빛 #8a3a28 이 따로 있어서 빨강이 두 가지였음) */
  --accent: #9e2f3d;
  --accent-soft: #f7ecee;
  --danger: #a23a3a;
  --ok: #3c6e47;
  --warn: #8a6a1f;
  --soon: #a3550f; /* 대비 5.1:1 (예전 #b8621b 4.1:1) */
  --info: #3a5a8c;
  /* 체리매듭 로고의 체리색 (favicon.svg) — 켜진 토글 */
  --cherry: #9e2f3d;
  /* 진행 아이콘의 '아직 안 함' 회색 — 목록 카드 · 캘린더가 같이 씁니다. 예전엔 테두리색(#e4dfd3)이라 거의 안 보였습니다 */
  --todo: #9ca3af;
  /* 예시 글자(플레이스홀더). 입력한 값(--ink)과 확실히 구분되도록 연하게 */
  --placeholder: #b4b8bf;
}

/* 예시 글자는 어느 화면에서든 연하게 — 브라우저 기본값은 너무 진해서 입력값과 헷갈립니다 */
input::placeholder,
textarea::placeholder {
  color: var(--placeholder);
  opacity: 1; /* 파이어폭스는 기본으로 흐리게 해서 한 번 더 지정합니다 */
}
/* 날짜·시간 칸은 비어 있어도 '연도-월-일' 이 진하게 보여서 입력한 값처럼 읽힙니다.
   비어 있을 때 campaign-modal.js 가 is-empty 를 붙여주고, 그때만 연하게 보여줍니다. */
#campaign-form input.is-empty,
input.is-empty { color: var(--placeholder); }

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.4;
  padding-bottom: env(safe-area-inset-bottom);
}

/* 제목도 본문과 같은 고딕 (2026-11-11 — 명조 제목 없앰. 로고 '체리매듭' 만 고운바탕체) */
h1, h2, h3 {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---------- 상단바 ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}

.topbar h1 { font-size: 17px; margin: 0; }
.topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left .icon-btn { text-decoration: none; }

main { --main-pad: 14px; padding: 12px var(--main-pad) 24px; max-width: 640px; margin: 0 auto; }

/* ---------- 버튼 ---------- */

.btn {
  border: 1px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  padding: 9px 14px;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.btn:hover { background: var(--bg); }

.btn.primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn.primary:hover { background: #3a3a3a; }

.btn.danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger);
}
.btn.danger:hover { background: #fbeeee; }

.btn.small { padding: 4px 9px; font-size: 12px; margin: 3px 0 10px; border-radius: 5px; }

/* ---------- 아이콘 버튼 ---------- */
/* 이 프로젝트는 글자 대신 아이콘을 씁니다 (CLAUDE.md 참고) */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;   /* 손가락으로 누르기 쉽게 (예전 28px) */
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.icon-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink); background: var(--bg); }
.icon-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: #fbeeee; }
/* .icon-btn 의 display:inline-flex 가 hidden 속성보다 우선순위가 높아서 따로 꺼줘야 합니다 */
.icon-btn[hidden] { display: none; }

/* ---------- 목록 ---------- */

.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 56px 20px;
  font-size: 13px;
  border: 1px dashed var(--border);
  border-radius: 10px;
}

/* ---------- 검색 / 필터 / 정렬 ---------- */

.toolbar { margin-bottom: 10px; }

.toolbar #f-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}
.toolbar #f-search:focus { outline: none; border-color: var(--ink); }

/* ---------- 단계 칩 (예약 → 방문 → 작성 → 마감) ---------- */

.chip-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  overflow-x: auto;              /* 화면이 좁으면 옆으로 밀어서 봅니다 */
  scrollbar-width: none;
}
.chip-row::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 0 auto;
  padding: 10px 12px;   /* 높이 약 34px — 예전 28px 은 손가락보다 작았습니다 */
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.chip svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* 눌러둔 칩 */
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.chip-count { font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; }
.chip-count:empty { display: none; }

/* ---------- 개수 + 정렬 한 줄 ---------- */
/* 왼쪽에 'n개', 오른쪽 끝에 정렬(기준 글자 + 방향 화살표).
   단추 모양을 없애고 글자처럼 보이게 두되 눌리는 자리입니다. */

.list-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
}

/* 'n개' 가 남은 자리를 차지해서 정렬이 오른쪽 끝으로 밀립니다 */
.list-head .list-count { flex: 1; margin-top: 0; }

/* flex 로 둡니다. 그냥 div 로 두면 안쪽 단추가 글자 기준선에 얹혀
   화살표보다 2px 쯤 내려앉습니다. */
.sort-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* 기준 글자 · 방향 화살표 공통 — 개수와 같은 크기, 굵게.
   둘 다 inline-flex 라서 글자와 화살표의 세로 중심이 같은 줄에 옵니다. */
.sort-key,
.sort-dir {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* 글자는 그대로 두고 누르는 자리만 넓힙니다 (안쪽 여백만큼 바깥 여백을 빼서 줄 높이는 그대로) */
  padding: 10px 4px;
  margin: -10px -4px;
}
.sort-key:hover,
.sort-dir:hover { color: var(--accent); }
.sort-key:focus-visible,
.sort-dir:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sort-dir svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sort-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  min-width: 96px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(36, 33, 29, 0.15);
  padding: 4px;
  z-index: 20;
}
.sort-menu[hidden] { display: none; }

.sort-menu-item {
  display: block;
  width: 100%;
  padding: 5px 9px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.sort-menu-item:hover { background: var(--accent-soft); }

/* 지금 고른 기준 */
.sort-menu-item[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.list-count { margin-top: 8px; font-size: 12.5px; color: var(--muted); }

.campaign-card .card-edit { width: 24px; height: 24px; }
.campaign-card .card-edit svg { width: 13px; height: 13px; }

.campaign-list { display: flex; flex-direction: column; gap: 6px; }

.campaign-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.campaign-card:hover { border-color: var(--ink); }

.campaign-card .row1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.campaign-card h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;          /* 이름이 길면 줄이 늘지 않고 ... 로 잘립니다 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-card .row2 {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.campaign-card .blog-link.row3 {
  display: inline-block;
  margin-top: 5px;
}

.badges { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* 마감 배지 — 점 대신 시계 아이콘이 붙습니다 */
.badge.clock::before { display: none; }
.badge.clock svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 후기까지 쓴 것 */
.badge.clock.done { color: var(--ok); font-weight: 600; }
/* 마감이 5일 안으로 다가온 것 */
.badge.clock.soon { color: var(--soon); font-weight: 600; }
/* 마감이 지났는데 후기가 없는 것 */
.badge.clock.overdue { color: var(--danger); font-weight: 600; }
.badge.status-예약완료 { color: var(--info); }
.badge.status-예약중 { color: var(--info); opacity: 0.7; }
.badge.status-방문완료 { color: var(--warn); }
.badge.status-후기완료 { color: var(--ok); }
.badge.status-선정 { color: var(--muted); }

.blog-link {
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
}
.blog-link:hover { text-decoration: underline; }

/* 카드 아래에 붙는 후기 링크들 (블로그 · 인스타 · 구매평) */
.review-links { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- 다이얼로그 (등록/상세) ---------- */

dialog {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  width: min(520px, 94vw);
  /* 가운데 정렬이면 내용 길이에 따라 창이 위아래로 움직여서, 위쪽에 붙여둡니다 */
  margin-block: 6vh auto;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(36, 33, 29, 0.12);
}
dialog::backdrop { background: rgba(36, 33, 29, 0.35); }
/* 창(편집 창 등)이 떠 있는 동안 뒤의 목록 · 캘린더가 같이 스크롤되지 않게 (2026-10-21):
   창 안 스크롤이 끝에 닿아도 바깥으로 넘기지 않고, 페이지 자체도 잠급니다 */
dialog { overscroll-behavior: contain; }
html:has(dialog:modal) { overflow: hidden; }

/* label 에 display:block 을 줘서 hidden 이 무시되지 않도록 먼저 막아둡니다 */
#campaign-form [hidden] { display: none; }

#campaign-form label, .detail-section label {
  display: block;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
#campaign-form input, #campaign-form select, #campaign-form textarea,
.detail-section textarea {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  /* 칸 이름(12.5px)보다 살짝 크게만. 16px 은 이름보다 너무 커서 어색했습니다 (2026-10-16).
     아이폰이 16px 보다 작은 칸을 누르면 화면을 확대하는 건 campaign-modal.js 맨 위에서 따로 막습니다. */
  font-size: 13.5px;
  font-family: inherit;
  color: var(--ink);
}
#campaign-form input:focus, #campaign-form select:focus, #campaign-form textarea:focus,
.detail-section textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.row { display: flex; gap: 10px; }
.row label { flex: 1; min-width: 0; }

/* ---------- 예약 정보 ---------- */

/* 예약일시(짧게) 와 '예약 없이 방문' 을 한 줄에 */
.reserve-when-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
#campaign-form .reserve-when-row input[type="datetime-local"] {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 200px;
  margin-top: 0;
}
.reserve-when-row { flex-wrap: wrap; }

/* 인원수 - 2명 + */
.guest-count {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px;
  background: var(--surface);
}
.guest-count .icon-btn {
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
}
.guest-count .icon-btn svg { width: 13px; height: 13px; }
.guest-count-text {
  min-width: 34px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* 예약확정 토글 */
.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
}
#campaign-form .toggle-row { margin-top: 0; text-transform: none; letter-spacing: 0; }
/* 진짜 체크박스는 숨기고 동그란 스위치만 보여줍니다 (#campaign-form input 규칙을 이겨야 해서 id 포함) */
#campaign-form .toggle-row input,
.toggle-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}
.toggle-track {
  display: inline-block; /* span 은 기본이 inline 이라 너비가 안 먹습니다 */
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.15s ease;
  flex-shrink: 0;
}
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.15s ease;
}
.toggle-row input:checked + .toggle-track { background: var(--cherry); }
.toggle-row input:checked + .toggle-track .toggle-knob { transform: translateX(16px); }
.toggle-row input:focus-visible + .toggle-track { outline: 2px solid var(--ink); outline-offset: 2px; }
.toggle-label { font-size: 13.5px; color: var(--ink); }

/* 공고에서 읽어온 예약 방법 — 광고주 연락처 옆에 초록색으로 */
.reserve-method {
  margin-left: 6px;
  color: var(--ok);
  font-style: normal;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* ---------- 체리로 채우기 (새 체험단 등록 첫 단계, 2026-10-22) ---------- */

/* 종류 고르기 창도 화면 한가운데 */
#type-dialog { margin: auto; }

/* 배경을 어둡게 덮고 가운데에 작은 창 — 휴대폰에서도 화면을 꽉 채우지 않고 가장자리 16px 를 남깁니다.
   키보드가 올라와 화면이 줄어도 창 안에서 스크롤돼서 입력칸 · 읽고 채우기 단추에 닿을 수 있습니다 (dvh). */
#autofill-dialog {
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 20px;
  border-radius: 16px;
}
#autofill-dialog::backdrop { background: rgba(36, 33, 29, 0.45); }
/* 한글이 낱말 중간에서 끊기지 않게 ('붙여넣으세
요' 처럼 끊겼음) */
#autofill-dialog,
#campaign-form .autofill-note,
.cherry-toast { word-break: keep-all; overflow-wrap: anywhere; }

.autofill-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.autofill-head h2 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 17px;
}
.autofill-head .cherry-mark { width: 20px; height: 20px; }
/* 닫기(X) — 테두리 · 바탕 없이 아이콘만 (누르는 자리 34px 는 그대로). 등록 화면 안내의 X 도 같게 */
#btn-autofill-close,
#btn-autofill-note-close,
#btn-autofill-close:hover,
#btn-autofill-note-close:hover { border-color: transparent; background: transparent; }
#btn-autofill-close:hover,
#btn-autofill-note-close:hover { color: var(--ink); }
#btn-autofill-close { margin-right: -8px; } /* 테두리가 없어져서 아이콘을 창 오른쪽 여백선에 맞춤 */

/* 링크 / 스크린샷 고르기 — 아이콘 두 칸, 고른 쪽에 체리색 밑줄 (편집 창 탭과 같은 모양) */
.autofill-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.autofill-tab {
  flex: 1;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.autofill-tab svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.autofill-tab:hover { color: var(--ink); }
.autofill-tab.is-on { color: var(--accent); border-bottom-color: var(--accent); }
.autofill-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.autofill-tab:disabled { cursor: default; }

/* 이름(왼쪽) · 비용(오른쪽) 한 줄 */
.autofill-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.autofill-label { color: var(--muted); }
.autofill-cost { color: var(--ink); font-weight: 600; white-space: nowrap; }
.autofill-cost.none { color: var(--danger); }

/* 두 방식의 입력 영역은 높이를 같게 (136px) — 바꿔도 아래 단추가 제자리 */
#autofill-dialog .autofill-part[hidden] { display: none; }
#autofill-dialog #f-quick {
  display: block;
  width: 100%;
  height: 136px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px; /* 아이폰이 눌렀을 때 확대하지 않는 크기 */
  line-height: 1.55;
  resize: none;
}
#autofill-dialog #f-quick:focus { outline: none; border-color: var(--ink); }
.autofill-upload {
  width: 100%;
  height: 136px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  border: 1px dashed var(--todo);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-family: inherit;
  cursor: pointer;
}
.autofill-upload svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.autofill-upload strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.autofill-upload span { font-size: 13px; }
.autofill-upload:hover { border-color: var(--ink); }
.autofill-upload.has-files { border-style: solid; border-color: var(--ok); background: #f1f6f2; }
.autofill-upload:disabled { cursor: default; opacity: 0.7; }

/* 실패 · 중복 · 채울 값 없음 · 잔액 부족 — 창 안에 남는 안내 (결과 다시 확인 아이콘은 오른쪽) */
.autofill-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg);
}
.autofill-msg[hidden] { display: none; }
.autofill-msg.warn { background: #faf3e4; }
.autofill-msg .quick-status { flex: 1; min-width: 0; margin: 0; font-size: 13px; }
.autofill-msg .cherry-recheck { margin: -4px -6px -4px 0; }

/* 전체 너비 실행 단추 */
.autofill-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin-top: 16px;
  border: 0;
  border-radius: 8px;
  background: var(--ink); /* 주요 단추 = 검정 (2026-11-11, 예전 체리색) */
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.autofill-go:hover { background: #3a3a3a; }
.autofill-go:disabled { opacity: 0.6; cursor: default; filter: none; }
.autofill-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.autofill-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.autofill-hint.is-off { visibility: hidden; }

/* 채운 뒤 뜨는 짧은 알림 (popover — 열린 창보다 위). 아래 가운데 */
.cherry-toast {
  position: fixed;
  inset: auto auto 24px 50%;
  transform: translateX(-50%);
  margin: 0;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 6px 20px rgba(36, 33, 29, 0.25);
}
/* 규칙을 따로 둡니다 — :popover-open 을 모르는 브라우저가 한 줄을 버려도 나머지는 남게 */
.cherry-toast { display: none; align-items: center; gap: 10px; }
.cherry-toast.is-shown { display: flex; }
.cherry-toast:popover-open { display: flex; }
/* 안내 · 오류 토스트 — 체크 대신 색으로 구분 */
.cherry-toast[data-kind="info"] svg,
.cherry-toast[data-kind="error"] svg { display: none; }
.cherry-toast[data-kind="error"] { background: #7d2a2a; }
.cherry-toast svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: #add6ae;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 등록 화면의 '자동으로 채운 칸을 확인해주세요.' 안내 (단계 탭 아래) */
#campaign-form .autofill-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--ok);
  border-radius: 8px;
  background: #f1f6f2;
}
#campaign-form .autofill-note[hidden] { display: none; }
.autofill-note-body { flex: 1; min-width: 0; }
.autofill-note-main { margin: 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.autofill-note-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--warn);
}
.autofill-note-list[hidden] { display: none; }
#campaign-form .autofill-note .icon-btn { width: 28px; height: 28px; flex: none; margin: -4px -8px 0 0; }

/* 체리 비용 — 단추 밖에 따로: 작은 체리 + 숫자 + '사용' 한 줄 */
.cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.cost[hidden] { display: none; }
.cost img { width: 14px; height: 14px; }
.cost b { font-weight: 500; color: var(--ink); }

/* 연결이 끊긴 뒤 결과를 다시 확인하는 아이콘 단추 (스샷 읽기 · AI 작성 옆) */
.cherry-recheck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex: none;
}
.cherry-recheck[hidden] { display: none; }
.cherry-recheck svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.quick-status {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  white-space: pre-line;
}
.quick-status.ok { color: var(--ok); }
.quick-status.warn { color: var(--warn); }

/* 자동으로 채워진 칸 표시 */
#campaign-form .autofilled {
  border-color: var(--ok);
  background: #f1f6f2;
}

/* ---------- 편집 화면의 단계 탭 (선정 / 예약 / 방문 / 작성) ---------- */

.step-tabs {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.step-tabs::-webkit-scrollbar { display: none; }
.step-tabs .chip { flex: 1 1 0; }

.step-panel { margin-top: 0; }

/* 탭을 눌러도 창 높이가 안 흔들리도록, 가장 긴 탭 높이를 JS 가 여기에 넣어둡니다 */
/* 위 여백은 padding 으로 줍니다 — margin 은 위 요소와 합쳐져서 값대로 안 벌어집니다.
   '선정 정보' 같은 묶음 이름이 고정된 탭 줄에 바짝 붙어 잘려 보이던 문제 */
.step-panels { min-height: 0; padding-top: 14px; }

/* 상태 · 바로가기 · 취소 여부는 탭과 상관없이 늘 보이는 줄입니다 */
#campaign-form .top-row .check-row { margin-top: 0; }
/* 취소 체크는 상태 바로 오른쪽에 붙입니다 */
#campaign-form .status-pick .check-row { margin-left: 2px; }

/* 칸 아래에 붙는 설명 한 줄 */
#campaign-form .field-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
#campaign-form .field-note .icon-btn { width: 22px; height: 22px; flex-shrink: 0; }
#campaign-form .field-note .icon-btn svg { width: 12px; height: 12px; }

/* ---------- 입력 시점별 묶음 ---------- */

.field-group {
  margin: 16px 0 0;
  padding: 4px 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 0; /* fieldset 이 flex 자식 폭을 밀어내지 않도록 */
}

.field-group legend {
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* 제목 · 상태 · 단계 탭은 스크롤해도 위에 붙어 있습니다.
   (탭을 누르려고 매번 위로 올라가지 않아도 되도록) */
.dialog-sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  /* 창 안쪽 여백(18px)만큼 넓혀서 좌우 끝까지 덮습니다 */
  margin: -18px -18px 0;
  padding: 18px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.dialog-sticky .step-tabs { margin-bottom: 0; }

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
/* 이름은 두 줄까지 (넘치면 … — 전체 이름은 선정 탭 첫 칸에 있음), 저장 · 닫기는 오른쪽 끝 */
.dialog-header h2 {
  /* 위 여백 6.5px = (단추 34px − 한 줄 20.8px) ÷ 2 — 한 줄일 때 저장 · 닫기 단추와 가운데가 맞고, 두 줄이면 첫 줄이 단추와 맞음 */
  margin: 0; padding-top: 6.5px; font-size: 16px; line-height: 1.3; min-width: 0; flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.dialog-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* 바뀐 게 없으면 X 만, 바뀌면 저장(체크)만 (campaign-modal.js 의 syncHeaderButtons) */
.dialog-header-actions [hidden] { display: none; }
/* 저장하는 동안: 체크 대신 돌아가는 표시 */
#btn-save.is-busy svg { display: none; }
#btn-save.is-busy::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: region-spin 0.8s linear infinite;
}
#btn-save:disabled { cursor: default; }

/* 저장이 안 됐을 때 창 위쪽 한 줄 · 칸 아래 빨간 한 줄 (브라우저 기본 알림창 대신) */
#campaign-form .form-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fbeeee;
  color: var(--danger);
  font-size: 13px;
  line-height: 1.5;
  word-break: keep-all;
}
#campaign-form .form-error[hidden] { display: none; }
#campaign-form .field-error {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--danger);
  word-break: keep-all;
}
#campaign-form .field-error[hidden] { display: none; }
#campaign-form .is-invalid { border-color: var(--danger); }

/* ---------- 모달 맨 윗줄: 상태 + 바로가기 ---------- */

/* 종류 · 상태 · 캠페인 · 초대권 — 네 칩을 같은 크기로 (높이 26px, 글씨 12px) */
.top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.top-row .type-badge,
.top-row .status-view,
.top-row .shortcut {
  box-sizing: border-box;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.top-row .top-sep { width: 1px; height: 16px; margin: 0 2px; background: var(--border); }
.top-row [hidden] { display: none; }
/* 주소가 없는 캠페인 · 초대권: 늘 보이되 누를 수 없게 — 예약 탭 연락처 단추와 같은 점선 · 회색 */
.top-row .shortcut[aria-disabled="true"] {
  border-style: dashed;
  background: var(--bg);
  color: var(--placeholder);
  pointer-events: none;
}
/* 상태는 날짜로 계산되므로 고르는 칸이 아니라 결과 표시입니다 */
.status-view {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.status-view::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-view.status-예약완료 { color: var(--info); }
/* 아직 확정 전 — 같은 파란색인데 연하게 */
.status-view.status-예약중 { color: var(--info); opacity: 0.7; }
.status-view.status-방문완료 { color: var(--warn); }
.status-view.status-후기완료 { color: var(--ok); }
.status-view.status-취소 { color: var(--danger); }

/* ---------- 목록 카드의 진행 아이콘 4개 ---------- */

.progress-icons {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
  margin-right: auto; /* 배지와 연필은 오른쪽 끝으로 밀어둡니다 */
}

.progress-icon {
  display: inline-flex;
  color: var(--todo);
}
.progress-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 끝낸 단계만 색칠하고 선을 조금 굵게 — 색과 이름은 캘린더 범례와 같습니다 (예약 파랑 · 방문 황토 · 후기 초록) */
.progress-icon.done svg { stroke-width: 2.1; }
.progress-icon.done.info { color: var(--info); }
/* 예약 확정 전(예약중) — 같은 달력을 점선으로, 색도 조금 연하게 */
.progress-icon.pending svg {
  stroke-dasharray: 2.4 2.2;
  stroke-linecap: butt;
  opacity: 0.75;
}
.progress-icon.done.warn { color: var(--warn); }
.progress-icon.done.danger { color: var(--danger); }
.progress-icon.done.ok { color: var(--ok); }

/* 후기를 다 쓴 뒤에는 이 아이콘을 눌러서 블로그 글을 엽니다 */
.write-icon.done { cursor: pointer; }

.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
.shortcut svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.shortcut:hover { border-color: var(--accent); background: var(--accent-soft); }

/* 저장 아이콘은 눈에 띄게 */
.icon-btn.save { color: var(--ok); border-color: var(--ok); }
.icon-btn.save:hover { background: #eef5f0; color: var(--ok); border-color: var(--ok); }

/* 체크박스 한 줄 */
#campaign-form .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
}
#campaign-form .check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--accent);
  flex-shrink: 0;
}
#campaign-form input:disabled {
  background: var(--bg);
  color: var(--muted);
}
.detail-header h2 { font-size: 17px; margin: 0; }
#detail-blog-link { display: inline-block; margin-top: 4px; }

.detail-section { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.detail-section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: inherit;
}

/* 사진 장수 줄은 사진 칸 '위' 에 있어서 여백 방향이 반대입니다 */
#campaign-form .field-note.photo-note { margin: 0 0 6px; }

.photo-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.photo-grid img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }

.danger-zone { text-align: right; }

/* ---------- 사진 칸 ---------- */

.photo-cell { position: relative; line-height: 0; }

/* 사진 위에 얹는 작은 빼기 단추 */
.photo-remove {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
}
.photo-remove svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.photo-remove:hover { color: var(--danger); border-color: var(--danger); }

/* 사진 넣기 칸 — 사진들과 같은 크기로 줄 끝에 붙습니다 */
.photo-add {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
}
.photo-add svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.photo-add:hover { color: var(--ink); border-color: var(--ink); background: var(--accent-soft); }
.photo-add:disabled { cursor: default; color: var(--muted); border-color: var(--border); background: var(--bg); }

/* 접힌 나머지 사진 수("+24") 와 다시 접기(∧) 칸 — 사진과 같은 크기 */
.photo-more {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.photo-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-more:hover { border-color: var(--accent); }

/* 사진 올리는 동안의 진행 표시 */
.photo-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.photo-progress-track {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.photo-progress-bar {
  height: 100%;
  width: 0;
  background: var(--ink);
  transition: width 0.2s ease;
}
.photo-progress-text {
  min-width: 40px;
  text-align: right;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 돌아가는 원 — 기다리라는 표시 */
.spin {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  color: var(--muted);
  animation: spin 0.9s linear infinite;
}
.photo-add .spin { width: 22px; height: 22px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 'AI 작성' 머리줄 (안내 문구 + 보유 체리 + 단추) ---------- */

.ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 10px;
}
.ai-head .ai-lead {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  word-break: keep-all; /* 한국어가 낱말 가운데서 잘리지 않게 */
}
.ai-quota { white-space: normal; }
.ai-head .cost { flex-shrink: 0; }
.ai-quota.none { color: var(--danger); }

#campaign-form .ai-keywords { margin-top: 12px; }

/* ---------- 작성 탭 · 체리 AI 작성 (2026-10-21) ---------- */

/* 묶음 제목 오른쪽에 '초안 열기' */
.ai-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ai-title-row .section-title { margin-bottom: 0; }
#campaign-form .ai-title-row .btn.small { margin: 0; flex-shrink: 0; }

/* 칸 이름 옆 글자 수 — 필수 키워드 (14/100자) */
#campaign-form .field-count { font-weight: 400; color: var(--muted); font-size: 12px; }

/* 사진: 가로로 밀어 보는 한 줄 (넣는 칸이 맨 앞) */
#campaign-form .photo-strip {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* 사진 오른쪽 위 빼기(X)가 칸 위로 살짝 나와 있어서, 가로 스크롤 칸에 잘리지 않게 위 · 오른쪽 여유 */
  padding: 8px 8px 6px 0;
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
#campaign-form .photo-strip > * { flex: 0 0 auto; }
/* 초안의 [사진 n] 과 맞춰 볼 번호 */
.photo-num {
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: rgba(36, 33, 29, 0.72);
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

/* 필수 키워드 · 작성 미션 · 실제로 느낀 점 사이는 모두 12px */
#campaign-form .ai-feelings { margin-top: 12px; }
/* 줄 간격을 정해둡니다 — 'normal' 이면 · # 이 든 줄만 글꼴이 바뀌어 줄 사이가 들쭉날쭉했음 (작성 미션 예시 글) */
#campaign-form #ai-group textarea { line-height: 1.4; }
/* 작성 정보의 링크 칸: 칸과 열기 아이콘을 한 줄에 (좁은 화면에서 아이콘이 아래로 떨어지던 것) */
#campaign-form .write-info-row .clear-wrap { flex: 1 1 0; }
/* 작성 정보 ↔ 체리 AI 작성 사이 가로줄은 예약하기 ↔ 초대하기 줄과 같게 (끝이 둥글지 않은 한 줄) */
#campaign-form .step-panels .field-group#ai-group { border-radius: 0; }

/* (관리자 전용) 초안 모델 고르기 — 쓰기 단추 위 오른쪽에 작게 */
/* 관리자 아니면 숨김 — 아래 display:flex 규칙(id 포함)보다 세야 해서 id 를 같이 */
#campaign-dialog .model-pick[hidden],
.model-pick[hidden] { display: none !important; }
#campaign-form .model-pick,
.draft-view .model-pick {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 10px;
  margin: 12px 0 0;
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
}
#campaign-form .model-pick label,
.draft-view .model-pick label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; }
/* 관리자만 보는 시험용이라 작게 — 편집 창의 #campaign-form select 규칙을 이기려고 id 를 같이 */
#campaign-form .model-pick select,
#campaign-dialog .model-pick select { width: auto; min-height: 0; height: 24px; margin: 0; padding: 0 4px; font-size: 11px; border-radius: 6px; }

/* '3체리로 초안 쓰기' 는 오른쪽 끝 */
#ai-group .ai-head { justify-content: flex-end; gap: 8px; margin-top: 12px; }
/* '초안 열기' 는 쓰기 단추 왼쪽 — 높이 · 여백 · 글씨 · 아이콘 크기를 쓰기 단추와 똑같이 (2026-11-11) */
#ai-group .ai-head #btn-draft-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
#ai-group .ai-head #btn-draft-open[hidden] { display: none; }
#ai-group .ai-head #btn-draft-open svg { width: 16px; height: 16px; flex-shrink: 0; }
#ai-group .ai-head .btn.small { margin: 0; }
#ai-group .ai-head .btn.with-cherry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
#ai-group .cherry-icon { width: 16px; height: 16px; flex-shrink: 0; }
#ai-group .ai-head .btn[hidden] { display: none; }

@media (max-width: 600px) {
  .draft-view { min-height: calc(100dvh - var(--dlg-pad) - 14px - env(safe-area-inset-bottom)); }
  .draft-head { padding-top: calc(var(--dlg-pad) + env(safe-area-inset-top)); }
}

/* ---------- '작성' 단계의 AI 단추 ---------- */

/* 이제 이 줄에는 안내/오류 문구만 들어갑니다.
   문구가 없을 때는 자리를 아예 차지하지 않게 해서 아래 여백이 벌어지지 않도록 합니다. */
.write-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.write-actions .quick-status:empty { display: none; }
.write-actions.has-status { margin-top: 12px; }
.write-actions .btn.small,
.ai-head .btn.small,
.ai-title-row .btn.small,
.channel-pick-top .btn.small { margin: 0; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; }
.write-actions .btn.small svg,
.ai-head .btn.small svg,
.ai-title-row .btn.small svg,
.channel-pick-top .btn.small svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.write-actions .btn.go,
.ai-head .btn.go,
.draft-foot .btn.go,
.channel-pick-top .btn.go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.write-actions .btn.go:hover,
.ai-head .btn.go:hover,
.draft-foot .btn.go:hover,
.channel-pick-top .btn.go:hover { background: #3a3a3a; }
.write-actions .btn:disabled,
.ai-head .btn:disabled { opacity: 0.5; cursor: default; }
.write-actions .quick-status { flex: 1 1 100%; }

/* ---------- 요약 창 (편집 창 위에 겹쳐 뜹니다) ---------- */

.summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.summary-head h2 { margin: 0; font-size: 16px; }

/* 요약 창은 작아서 화면 한가운데에 띄웁니다 (다른 창은 위쪽에 붙습니다) */
#summary-dialog { margin: auto; }

/* 고치는 칸이 아니라 읽고 복사하는 글입니다 */
#summary-body {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
#summary-state { margin: 8px 0 0; }

/* ---------- 후기 초안 화면 (편집 창 안, 2026-10-21) ----------
   예전엔 화면을 꽉 채우는 창을 하나 더 띄웠는데, 이제는 같은 편집 창 안에서 폼을 감추고 이 화면을 보여줍니다.
   창 자체가 스크롤되고, 위 머리줄(돌아가기 · 제목 · 아이콘들)은 붙어 있습니다. */

#campaign-dialog { --dlg-pad: 18px; }
/* 창 안쪽 여백이 좁은 화면에서는 14px (dialog { padding: 14px }) — 붙는 머리줄 위치를 같이 맞춥니다 */
@media (max-width: 440px) { #campaign-dialog { --dlg-pad: 14px; } }
/* 초안은 폼 위에 뜨는 시트라 폼을 감추지 않습니다 (아래 '초안 = 시트' 2026-11-11) */
/* 초안은 읽을 글이 길어 조금 넓게 (휴대폰은 원래 화면 전체) */
@media (min-width: 601px) { #campaign-dialog.is-drafting { width: min(680px, 94vw); } }

.draft-view[hidden] { display: none; }

/* AI 가 초안을 쓰는 동안 덮는 진행 표시 — 편집 창(맨 위 층) 안에 있어서 화면 전체를 덮습니다 */
.draft-progress[hidden] { display: none; }
.draft-progress {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(250, 248, 243, 0.86);
  backdrop-filter: blur(2px);
}
.draft-progress-card {
  width: min(320px, 100%);
  padding: 22px 20px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 8px 28px rgba(36, 33, 29, 0.12);
  text-align: center;
}
.draft-progress-cherry { width: 34px; height: 34px; animation: draft-bob 1.2s ease-in-out infinite; }
@keyframes draft-bob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) { .draft-progress-cherry { animation: none; } }
.draft-progress-title { margin: 10px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.draft-progress-step { margin: 6px 0 12px; min-height: 1.5em; font-size: 13.5px; color: var(--cherry, var(--accent)); }
.draft-progress-track { height: 6px; border-radius: 3px; background: var(--accent-soft); overflow: hidden; }
.draft-progress-bar { width: 0; height: 100%; border-radius: 3px; background: var(--cherry, var(--accent)); transition: width 0.4s ease; }
.draft-progress.is-done .draft-progress-bar { background: var(--ok); }
.draft-progress-hint { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.draft-view {
  display: flex;
  flex-direction: column;
  /* 창 높이만큼은 차지해서 글 칸이 위쪽에 쪼그라들지 않게 */
  min-height: calc(88vh - var(--dlg-pad) * 2);
}

.draft-head {
  position: sticky;
  top: calc(var(--dlg-pad) * -1);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin: calc(var(--dlg-pad) * -1) calc(var(--dlg-pad) * -1) 0;
  padding: var(--dlg-pad) var(--dlg-pad) 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.draft-head h2 {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.draft-head .dialog-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.draft-head .icon-btn:disabled { opacity: 0.45; cursor: default; }
.icon-btn.save { color: var(--ok); border-color: var(--ok); }
.icon-btn.save:hover { background: #f1f6f2; }

/* '작성' 탭 AI 묶음 맨 아래의 안내 — 쓰기 시작하기 전에 읽도록 */
.draft-notice {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  line-height: 1.5;
  flex-shrink: 0;
  word-break: keep-all; /* 한국어가 낱말 가운데서 잘리지 않게 */
}
.draft-notice svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 사진이 모자랄 때 '몇 장 더 필요해요' 를 눈에 띄게 */
#campaign-form .field-note.warn { color: var(--warn); }

.draft-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 8px 0 6px;
  flex-shrink: 0;
}
.draft-count { font-size: 12.5px; color: var(--muted); flex-shrink: 0; }
.draft-meta .quick-status { white-space: normal; }

/* 글 전체 고치기 칸 — 남은 높이를 차지하고, 적어도 화면의 절반은 넘게 */
#draft-body {
  flex: 1;
  min-height: 55vh;
  width: 100%;
  resize: none;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;      /* 긴 글을 읽어야 해서 폼 입력칸(12px)보다 크게 */
  line-height: 1.8;
}
#draft-body:focus { outline: none; border-color: var(--ink); }
.draft-view.busy #draft-body { color: var(--muted); }
/* 아이폰은 16px 보다 작은 칸을 누르면 화면을 확대합니다 */
@media (max-width: 600px) { #draft-body { font-size: 16px; } }

/* 초안 미리보기 — 섹션으로 나눈 모양 (글 칸과 같은 자리 · 같은 글씨). 스크롤은 편집 창이 합니다 */
.draft-preview {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.draft-preview[hidden], #draft-body[hidden] { display: none; }
.draft-preview p { margin: 0; white-space: pre-wrap; }
/* 사진 자리 — 사진은 블로그에서 직접 넣으므로, 어디에 무슨 사진인지만 알려줍니다 */
.draft-preview .draft-photo-slot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0;
  padding: 6px 10px;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}
.draft-photo-slot svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.draft-view.busy .draft-preview { opacity: 0.5; }

/* 문단 — 누르면 바로 아래에 수정 도구가 펼쳐집니다 */
.draft-para {
  margin: 0 -6px;
  padding: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
}
.draft-para:hover { background: var(--accent-soft); }
.draft-para:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.draft-para.is-editing { background: var(--accent-soft); cursor: default; }
.draft-view.busy .draft-para { cursor: default; }

.para-editor {
  margin: 6px 0 12px;
  scroll-margin-bottom: 16px;
}
.para-editor .para-input {
  display: block;
  width: 100%;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;          /* 아이폰 확대 막기 + 읽기 쉽게 */
  line-height: 1.7;
  resize: none;
}
.para-editor .para-input:focus { outline: none; }
.para-actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.para-actions-gap { flex: 1; }

/* 위쪽 '사진 · 미션 · 키워드 · 느낀 점' — 필요할 때 펼쳐 봅니다 */
.draft-ref {
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.draft-ref summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 10px;
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.draft-ref summary::-webkit-details-marker { display: none; }
.draft-ref-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.draft-ref[open] .draft-ref-chev { transform: rotate(90deg); }
.draft-ref-body { padding: 2px 10px 10px; }
.draft-ref-photos { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.draft-ref-photo { position: relative; flex: 0 0 auto; line-height: 0; }
.draft-ref-photo img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.draft-ref-row { margin-top: 8px; }
.draft-ref-row b { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
.draft-ref-row p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.draft-ref-row p.is-empty { color: var(--muted); }

/* 맨 아래 두 단추 — 3체리로 초안 다시 쓰기 · 내 블로그 가기 (나란히, 같은 너비) */
.draft-foot { display: flex; gap: 8px; margin-top: 12px; }
.draft-foot > .btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  margin: 0;
  padding: 0 10px;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
}
.draft-foot > .btn[hidden] { display: none; }
.draft-foot > .btn:disabled { opacity: 0.5; cursor: default; }
.draft-foot svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.draft-foot .cherry-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* 초안 1 ~ n 고르기 줄 — 왼쪽 드롭다운, 오른쪽 끝에 편집 모드 · 전체 복사 */
.draft-version-row { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; }
.draft-version-gap { flex: 1; }
/* 편집 모드 켜짐 — 연필 단추를 체리색으로 칠함 */
.draft-version-row #btn-draft-mode.is-on,
.draft-version-row #btn-draft-mode.is-on:hover { background: var(--cherry); border-color: var(--cherry); color: #fff; }

/* 초안 1 ~ n 고르기 — 테두리 없는 드롭다운 */
.draft-view .draft-version {
  margin: 0;
  padding: 4px 22px 4px 2px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.draft-view .draft-version[hidden] { display: none; }
.draft-view .draft-version:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* 초안 섹션 — 이름 줄을 누르면 접히고, 오른쪽 복사 아이콘은 그 섹션만 복사 */
.draft-sec + .draft-sec { margin-top: 6px; }
.draft-sec-head {
  position: sticky;
  /* 편집 창이 스크롤되므로, 위에 붙은 초안 머리줄 바로 아래에 붙습니다 (머리줄 높이는 JS 가 --draft-head-h 로) */
  top: calc(var(--draft-head-h, 56px) - var(--dlg-pad));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -12px;
  padding: 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.draft-sec-toggle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.draft-sec-toggle svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}
.draft-sec.is-folded .draft-sec-toggle svg { transform: rotate(-90deg); }
.draft-sec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-sec-count { flex-shrink: 0; font-size: 12.5px; font-weight: 400; color: var(--muted); }
.draft-sec-body { padding: 8px 0 4px; }
.draft-sec.is-folded .draft-sec-body { display: none; }

.style-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.style-row .quick-status { flex: 1; min-width: 0; }
.style-row .icon-btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- 체험단 종류 (서비스 제공 / 물품 제공) ---------- */

/* 새로 등록할 때 먼저 뜨는 '어떤 체험단인가요?' 창 */
#type-dialog { width: min(420px, 94vw); }
.type-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.type-head h2 { margin: 0; font-size: 17px; }

.type-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.type-choice {
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  gap: 2px 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.type-choice:hover { border-color: var(--accent); background: var(--accent-soft); }
.type-choice svg {
  grid-row: 1 / 3;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.type-choice strong { font-size: 14px; }
.type-choice span { font-size: 12.5px; color: var(--muted); }

/* 제목 옆의 종류 칩 — 어떤 종류인지 보여주기만 합니다 (등록할 때 정해집니다) */
.type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}
.type-badge svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 후기 방식(여러 개) · 물품 받는 방법 고르는 줄 */
.channel-pick, .pick-row { margin-top: 14px; }
/* '후기 방식' 글자와 AI요약 단추를 한 줄에 */
.channel-pick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.channel-pick-label, .pick-label {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.channel-chips, .pick-chips { display: flex; gap: 6px; margin-top: 6px; }
.channel-chips .chip, .pick-chips .chip { flex: 1 1 0; }

/* 후기 방식은 여러 개를 고르는 칩이라, 고른 것과 안 고른 것이 확실히 달라 보이게 합니다 */
.channel-chips .chip { border-style: dashed; }
.channel-chips .chip[aria-pressed="true"] { border-style: solid; }


/* 작성 탭의 방식별 줄 — 아이콘 · 주소 · 열기 · 완료 체크 */
.review-rows { margin-top: 8px; }
/* 작성 정보: 후기 주소 줄들 | 작성일 — 좌우로 나란히, 아주 좁으면 작성일이 아래로 */
/* 휴대폰에서도 좌우로 — 예전엔 좁으면 작성일이 아래로 떨어졌음 (2026-10-21) */
.write-info-row { display: flex; flex-wrap: nowrap; align-items: flex-start; column-gap: 10px; }
.write-info-row > #review-rows { flex: 1 1 0; min-width: 0; }
.write-info-row > .written-date-rows { flex: 0 0 150px; min-width: 0; }
/* 묶음 제목 ↔ 첫 칸 이름 사이는 세 탭 모두 10px (선정 정보 ↔ 체험단명 기준, 2026-10-21).
   작성 정보: 제목 아래 6px + 줄 위 8px 에서 4px 를 당김 */
.write-info-row > .review-rows { margin-top: -4px; }
/* 작성 미션 칸은 키워드 칸 위 */
#campaign-form .ai-mission { margin-top: 12px; }
.review-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; }
/* 칸 이름은 칸 위에 한 줄 (다른 칸 이름과 같은 글씨) */
#campaign-form .review-row > label { flex: 0 0 100%; margin-top: 0; }
/* 작성일 칸 아래 한 줄 — '블로그 발행일을 읽는 중…' · 못 읽었을 때 (2026-11-11) */
#campaign-form .written-note { flex: 0 0 100%; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); word-break: keep-all; }
#campaign-form .written-note.warn { color: var(--warn); }
#campaign-form .written-note[hidden] { display: none; }
.review-row[hidden] { display: none; }
#campaign-form .review-row input[type="url"] { margin-top: 0; flex: 1; min-width: 0; }
.review-open { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.review-open svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.review-open[aria-disabled="true"] { color: var(--muted); opacity: 0.35; pointer-events: none; }
/* '열기' 아이콘이 없는 줄(작성일)도 칸 끝이 같아지도록 */
.review-open-spacer { width: 16px; flex-shrink: 0; }

/* 작성일도 주소 칸들과 같은 줄 모양으로 */
#campaign-form .review-row input[type="date"] {
  /* 날짜 칸은 달력 아이콘 때문에 글자 칸보다 2px 높게 그려져서, 옆 포스팅 링크 칸 높이에 맞춥니다 */
  height: 36px;
  margin-top: 0;
  flex: 1;
  min-width: 0;
}

/* 물품 제공에서만 나오는 상태 */
.status-view.status-수령완료 { color: var(--warn); }
.status-view.status-환급완료 { color: var(--info); }
.badge.status-수령완료 { color: var(--warn); }
.badge.status-환급완료 { color: var(--info); }

/* ---------- 내 계정 단추 (오른쪽 위) ---------- */

.account-menu-wrap { position: relative; margin-left: 6px; flex-shrink: 0; }
.auth-badge { overflow: hidden; padding: 0; }
.auth-badge img { width: 100%; height: 100%; object-fit: cover; }

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(36, 33, 29, 0.15);
  padding: 6px;
  z-index: 20;
}
.account-menu[hidden] { display: none; }

.account-menu-who {
  padding: 8px 10px 6px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.account-menu-item:hover { background: var(--accent-soft); }
.account-menu-item svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-menu-item.danger { color: var(--danger); }
.account-menu-item.danger:hover { background: #fbeeee; }

/* ---------- 아주 좁은 화면(갤럭시 S25 기준, ~360-390px) ---------- */
@media (max-width: 440px) {
  main { --main-pad: 10px; padding: 10px var(--main-pad) 20px; }
  .campaign-card { padding: 9px 10px; }
  .campaign-card h3 { font-size: 14px; }
  dialog { padding: 14px; }
  .dialog-sticky { margin: -14px -14px 0; padding: 14px 14px 10px; }

  /* 좁은 화면에서도 칩 네 개가 한 줄에 다 보이도록 조금 줄입니다 */
  .chip-row { gap: 4px; }
  .chip { padding: 10px 9px; gap: 4px; font-size: 12.5px; }  /* 높이 약 33px — 줄이 넘치면 옆으로 밀면 됩니다(끝이 흐려짐) */
  .chip svg { width: 12px; height: 12px; }
}

/* ---------- 넓은 화면(데스크탑)에서는 여유 있게 ---------- */
@media (min-width: 720px) {
  main { padding: 24px; }
  .campaign-card { padding: 14px 16px; }
  .campaign-list { gap: 8px; }
}

/* ---------- 목록 ↔ 캘린더 전환 ---------- */
/* 같은 자료를 목록으로 볼지 달력으로 볼지 고르는 칸. 지금 보고 있는 쪽이 진하게 칠해집니다. */

.topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* 보기 전환 · 새 체험단 — 제목 줄이 아니라 본문 맨 위 오른쪽에 둡니다 */
.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

/* 보기 전환은 화면 왼쪽 끝에 붙이고, 옆의 '+ 새 체험단' 은 오른쪽 끝에 그대로 둡니다.
   (같은 .page-actions 를 쓰는 탐색 화면은 지금처럼 오른쪽 정렬을 지킵니다) */
.page-actions .view-switch { margin-right: auto; }

.view-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  overflow: hidden;
  flex-shrink: 0;
}

.view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.view-btn + .view-btn { border-left: 1px solid var(--border); }
.view-btn svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.view-btn:hover { background: var(--bg); color: var(--ink); }
.view-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.view-btn.is-on { background: var(--ink); color: var(--bg); }
.view-btn.is-on:hover { background: var(--ink); color: var(--bg); }

/* ---------- 브랜드 (상단바: 체리매듭 로고 + 이름 + 화면 이름) ---------- */
/* 모든 화면 상단바 왼쪽에 똑같이 붙습니다. 로고를 누르면 대시보드로 갑니다.
   글꼴(고운바탕)은 각 화면 <head> 에서 Google Fonts 로 불러옵니다. */

/* 보조 문구는 '체리매듭' 글자와 윗선이 나란하도록 둘 다 줄 높이를 글자 크기로 맞추고
   위에서부터 쌓은 뒤, 보조 문구를 조금 내립니다. */
.topbar h1.brand {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font-size: inherit;
}
.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo { width: 22px; height: 22px; flex-shrink: 0; display: block; }
.brand-name {
  font-family: "Gowun Batang", Georgia, "Noto Serif KR", serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* 보조 문구 — 이름보다 작고 연한 갈색 */
.brand-sub {
  font-family: "Gowun Batang", Georgia, "Noto Serif KR", serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  margin-top: 2.5px; /* 실제 글자 윗선을 재서 맞춘 값 (넓은 화면) */
  color: #8a6a50; /* 연한 갈색이되 바탕과 대비 4.6:1 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (max-width: 440px) {
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 12px; margin-top: 3px; } /* 좁은 화면 */
}

/* ---------- 하단 내비게이션 바 (bottom-nav.js 가 그립니다) ---------- */
/* 탐색 · 대시보드(체리 로고) · 나의 체험단. 화면 맨 아래에 붙어 있습니다. */

body.has-bottom-nav { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-inner {
  display: flex;
  width: 100%;
  max-width: 640px;
}
/* 아이콘 밑에 작은 이름 — 처음 온 사람은 말풍선 · 막대 아이콘만으로 뜻을 모릅니다 (UI 원칙의 '아이콘만으로 안 통하는 경우') */
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 60px;
  color: var(--muted);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav a:hover { color: var(--ink); }
.bottom-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.bottom-nav a.is-on { color: var(--accent); }
.bottom-nav .nav-label { font-size: 11px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.bottom-nav a.is-on .nav-label { font-weight: 700; }
.bottom-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 가운데 체리 로고 — 지금 대시보드가 아니면 살짝 흐리게 */
.bottom-nav .nav-home img { width: 26px; height: 26px; display: block; opacity: 0.55; transition: opacity 0.12s ease; }
.bottom-nav .nav-home:hover img,
.bottom-nav .nav-home.is-on img { opacity: 1; }

/* ---------- 사업자 정보 (화면 맨 아래, biz-footer.js) ----------
   화면 폭을 꽉 채운 체리색 띠 + 흰 글씨 (2026-10-23). 첫 화면에는 안 보이고, 내려오다 한 번 멈춘 뒤
   한 번 더 내려야 보입니다 (멈춤 지점은 biz-footer.js). 글씨 대비: 흰색 7.2:1 · 연분홍(#f6dfe2) 5.7:1 */
.biz-footer {
  background: var(--cherry);
  color: #fff;
  padding: 26px 14px;
  /* 아래 내비게이션 바 뒤까지 체리색이 이어지도록 — body 의 아래 여백(내비게이션 바 자리)만큼 내려 깝니다 */
  margin-bottom: calc(-72px - env(safe-area-inset-bottom));
  padding-bottom: calc(26px + 72px + env(safe-area-inset-bottom));
}
body:not(.has-bottom-nav) .biz-footer { margin-bottom: 0; padding-bottom: 26px; }
.biz-info {
  display: grid;
  gap: 4px;
  margin: 0 auto;
  max-width: 360px;
  padding: 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.55;
  color: #f6dfe2;
}
.biz-row { display: flex; gap: 8px; }
.biz-row dt { flex: 0 0 104px; margin: 0; }
.biz-row dd { flex: 1; min-width: 0; margin: 0; color: #fff; overflow-wrap: anywhere; }
/* 로그인 · 가입 화면: 가운데 카드 안에 둥근 체리색 상자로 */
.biz-footer.is-in-card { margin: 28px 0 0; padding: 16px 18px; border-radius: 10px; }
/* 지금 있는 화면은 아이콘 · 이름이 체리색 + 이름이 굵게 (예전의 작은 점 대신) */

/* ---------- 목록 ↔ 캘린더 (view-swipe.js) ---------- */
/* 목록과 캘린더가 한 페이지에 나란히 들어 있습니다. 넘길 때 페이지를 새로 읽지 않고
   이 칸 안의 내용만 좌우로 미끄러집니다. 위쪽 전환 단추와 아래 내비게이션 바는 그대로 있습니다. */

.view-track {
  position: relative;
  overflow-x: clip;   /* 옆으로 미끄러지는 것만 가립니다 (위아래는 그대로 보입니다) */
  --dx: 0px;          /* 지금 밀린 거리 */
  --off-side: 100%;   /* 안 보는 칸이 숨어 있는 쪽 */
  --off-top: 0px;     /* 안 보는 칸을 '지금 보고 있는 높이' 에 맞추는 값 */
}

.view-pane { transform: translateX(var(--dx)); }

/* 지금 안 보는 칸은 아예 그리지 않습니다 —
   길이가 다른 두 화면이 서로의 스크롤 길이를 늘리지 않도록. */
.view-pane.is-off { display: none; }

/* 미는 동안에만 옆 칸이 나타납니다. 자리를 차지하지 않게 띄워두고(absolute),
   --off-top 으로 '지금 보고 있는 높이' 에 맞춰 둡니다. */
.view-track.is-sliding .view-pane.is-off {
  display: block;
  position: absolute;
  top: var(--off-top);
  left: 0;
  width: 100%;
  transform: translateX(calc(var(--dx) + var(--off-side)));
}

/* 손을 뗀 뒤 이어서 미끄러지는 구간 (view-swipe.js 의 SLIDE_MS 와 맞춰야 합니다) */
.view-track.is-animating .view-pane {
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .view-track.is-animating .view-pane { transition: none; }
}

/* ---------- 편집 창 다듬기 (2026-10-01) ---------- */

/* 화면에는 안 보이고 읽어주기 프로그램에만 남기는 글자 (탭 이름과 겹치는 묶음 제목 등) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 저장(체크)은 초록으로 칠한 단추 — 편집 창과 초안 창 모두 */
.icon-btn.save,
.icon-btn.save:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.icon-btn.save:hover { background: #315b3a; border-color: #315b3a; }

/* 선정 탭 맨 아래: 체험단 취소 스위치 · 삭제 단추 */
.danger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#campaign-form .danger-row .toggle-row input:checked + .toggle-track { background: var(--danger); }
.btn.danger-fill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.btn.danger-fill:hover { background: #8a2f2f; }
.btn.danger-fill svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 단계 탭: 끝낸 단계에는 오른쪽 위에 작은 초록 체크 */
.step-tabs .chip { position: relative; }
.step-tabs { padding-top: 5px; } /* 체크가 위로 잘리지 않게 */
.step-tabs .chip.is-done::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  border: 1.5px solid var(--surface);
}

/* 탭 안의 묶음은 테두리 없이, 묶음이 둘 이상이면 가는 줄로만 나눕니다 */
#campaign-form .step-panels .field-group {
  margin: 0;
  padding: 0;
  border: 0;
}
#campaign-form .step-panels .field-group + .field-group {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
#campaign-form .step-panels .field-group > legend:not(.sr-only) {
  float: left; /* fieldset 위 테두리에 걸치지 않고 보통 제목처럼 */
  width: 100%;
  padding: 0;
  margin-bottom: 2px;
}
#campaign-form .step-panels .field-group > legend + * { clear: both; }

/* 초대하기 — 처음엔 접혀 있고 누르면 펼쳐집니다 */
.invite-fold > summary,
.section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.invite-fold > summary::-webkit-details-marker { display: none; }
.invite-fold > summary svg,
.section-title svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.invite-fold > summary .fold-arrow { margin-left: auto; color: var(--muted); transition: transform 0.15s ease; }
.invite-fold[open] > summary .fold-arrow { transform: rotate(180deg); }
/* 접히지 않는 묶음 제목 (선정 정보 · 작성 정보 · 체리 AI 작성) — 예약하기 · 초대하기 제목과 같은 글씨 */
#campaign-form .section-title { margin: 0 0 6px; cursor: default; }
#campaign-form .invite-fold[hidden] { display: none; }
/* 예약하기 묶음: 날짜 · 연락처 · 단추 · 토글을 같은 너비(최대 400px — 연락처 칸 옆에 단추 셋이 들어가게) 한 기둥으로 —
   창이 넓어도 칸이 끝까지 늘지 않고, 오른쪽 끝이 들쭉날쭉하지 않게 (2026-10-21) */
#campaign-form .reserve-body { max-width: 400px; } /* 예약하기 제목 ↔ 희망예약일시 10px (세 탭 같게) */
#campaign-form .reserve-group .reserve-when-row { flex-wrap: nowrap; }
#campaign-form .reserve-group .reserve-when-row input[type="datetime-local"] { max-width: none; }

/* 닫을 때 '저장할까요?' 창 */
#save-ask-dialog,
#draft-save-ask-dialog,
#regen-ask-dialog,
#delete-ask-dialog,
#photo-remove-ask-dialog,
.cherry-ask-dialog { width: min(320px, 90vw); margin: auto; padding: 20px 18px 16px; word-break: keep-all; }
/* 브라우저 기본 알림창 대신 쓰는 체리매듭 알림 · 확인 창 (cherry-dialog.js) — 글 안의 줄바꿈을 그대로 */
.cherry-ask-dialog .cherry-ask-body { white-space: pre-line; }
.cherry-ask-dialog .cherry-ask-title { margin-bottom: 8px; font-weight: 700; }
.cherry-ask-dialog .save-ask-sub.cherry-ask-body { margin: 0 0 16px; text-align: center; line-height: 1.5; }
.cherry-ask-dialog .save-ask-actions .btn { justify-content: center; }
/* 저장할지 묻는 창의 '바뀐 칸: …' · 삭제 확인의 설명 */
.save-ask-changes,
.delete-ask-sub { margin: -8px 0 16px; text-align: center; line-height: 1.5; }
.save-ask-changes[hidden] { display: none; }
.ask-error { margin: -6px 0 14px; padding: 8px 10px; border-radius: 6px; background: #fbeeee; color: var(--danger); font-size: 13px; line-height: 1.45; text-align: center; }
.ask-error[hidden] { display: none; }
.save-ask-actions .btn.danger-fill { justify-content: center; }
.save-ask-sub { font-size: 13px; color: var(--muted); }
#regen-ask-dialog .btn.with-cherry { display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; }
#regen-ask-dialog .cherry-icon { width: 16px; height: 16px; flex-shrink: 0; }
.save-ask-text { margin: 0 0 16px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--ink); }
.save-ask-actions { display: flex; gap: 6px; }
.save-ask-actions .btn { flex: 1 1 0; padding: 9px 4px; }

/* 휴대폰에서는 편집 창을 화면 전체로 */
@media (max-width: 600px) {
  #campaign-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  #campaign-dialog .dialog-sticky { padding-top: calc(14px + env(safe-area-inset-top)); }
}

/* 위에 붙는 제목 줄이 창 안쪽 여백만큼 아래로 밀려 탭 내용 첫 줄을 가리던 것 —
   여백만큼 위로 올려 붙입니다 (예전엔 묶음 테두리의 위 여백에 가려 안 보였음) */
#campaign-dialog .dialog-sticky { top: -18px; }
#campaign-form .step-panels .field-group.invite-fold { border-radius: 0; }
@media (max-width: 440px) {
  #campaign-dialog .dialog-sticky { top: -14px; }
}

/* ---------- 편집 창 위계: 탭 · 고르는 칩 · 단계 스위치를 서로 다른 모양으로 (2026-10-01) ----------
   셋 다 동그란 알약 모양이라 무엇이 화면을 바꾸는 탭이고 무엇이 값을 고르는 칸인지 헷갈려서,
     탭        = 글자 + 밑줄 (화면을 바꿉니다)
     고르는 칩  = 살짝 둥근 네모 (여러 개 고르기 — 후기 방식 · 물품 받는 방법)
     단계 스위치 = 하나로 이어진 막대 (넷 중 하나) */

/* 탭: 테두리·배경 없이 글자만, 지금 탭은 아래에 굵은 밑줄. 밑줄이 제목 줄의 아래 선에 겹쳐 붙습니다 */
#campaign-dialog .dialog-sticky { padding-bottom: 0; }
#campaign-dialog .step-tabs { gap: 0; padding-top: 0; margin-top: 12px; margin-bottom: -1px; }
#campaign-dialog .step-tabs .chip {
  padding: 13px 4px 11px;   /* 탭 높이 약 42px — 손가락으로 누르기 쉽게 */
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
}
#campaign-dialog .step-tabs .chip:hover { color: var(--ink); }
#campaign-dialog .step-tabs .chip[aria-pressed="true"] {
  background: transparent;
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}
#campaign-dialog .step-tabs .chip:focus-visible { outline-offset: -2px; }
/* 끝낸 단계 체크는 탭 글자 바로 뒤에 작게 */
#campaign-dialog .step-tabs .chip.is-done::after {
  position: static;
  width: 13px;
  height: 13px;
  border: 0;
  background-size: 8px;
  flex-shrink: 0;
}

/* 고르는 칩: 살짝 둥근 네모 */
#campaign-form .channel-chips .chip,
#campaign-form .pick-chips .chip {
  border-radius: 6px;
  padding: 8px 8px;
}


/* 후기 방식 칩이 여섯 개라 한 줄에 셋씩 두 줄로 (블로그 클립 인스타 / 릴스 유튜브 구매평) */
#campaign-form .channel-chips.six { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#campaign-form .channel-chips.six .chip { min-width: 0; }
/* 칩 줄이 충분히 넓으면(컴퓨터 화면의 편집 창 등) 여섯 개를 한 줄로. 화면이 아니라 칩 줄 자체의 폭으로 봅니다 */
#campaign-form .channel-pick { container-type: inline-size; }
@container (min-width: 450px) {
  #campaign-form .channel-chips.six { grid-template-columns: repeat(6, 1fr); gap: 4px; }
  #campaign-form .channel-chips.six .chip { padding: 8px 2px; gap: 3px; }
}

/* ---------- 예약 · 방문: 토글 두 개 + '예약 없이' (2026-10-01) ---------- */
/* 네 칸 스위치(예약없이 · 예약하기 · 예약확정 · 방문완료)가 이해하기 어렵다고 해서 바꿨습니다.
   체험단 성격(예약 없이)과 진행(확정 · 방문)이 한 줄에 섞여 있던 게 문제였습니다. */
/* 희망예약일시 글자와 날짜 칸 사이 = 광고주 연락처 글자와 칸 사이(4px, invite.css 의 .contact-row) */
#campaign-form .reserve-when-row { margin-top: 4px; }
#campaign-form .stage-toggles { margin-top: 12px; } /* 위 광고주 연락처와 조금 띄움 */
#campaign-form .stage-toggle {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 5px 0;
}
#campaign-form .stage-toggle[hidden] { display: none; }
#campaign-form .stage-toggle .toggle-label { font-size: 13px; }

#campaign-form .text-link {
  display: inline-block;
  /* 위 토글에 바짝 붙이고, 아래 광고주 연락처와는 조금 띄웁니다 */
  margin: 2px 0 10px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
#campaign-form .text-link[hidden] { display: none; }

/* 예약 없이 가는 체험단 표시 — X 를 누르면 예약하는 체험단으로 되돌아갑니다 */
.no-res-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  padding: 6px 6px 6px 10px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}
#campaign-form .no-res-chip[hidden] { display: none; }
.no-res-chip > svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.no-res-chip .icon-btn { margin-left: auto; width: 24px; height: 24px; border: 0; background: transparent; color: var(--accent); }
.no-res-chip .icon-btn svg { width: 13px; height: 13px; }

/* 날짜가 지났는데 아직 '방문했어요' 를 안 켠 체험단 — 날짜 칸 아래 안내 한 줄 */
#campaign-form .past-visit-note { color: var(--soon); }
#campaign-form .past-visit-note[hidden] { display: none; }

/* 후기 주소 · 작성일 칸 안쪽의 비우기(X) 단추 (campaign-modal.js) — 값이 있을 때만 보입니다 */
.clear-wrap { position: relative; display: block; flex: 1 1 auto; min-width: 0; }
#campaign-form .clear-wrap input { width: 100%; margin-top: 0; padding-right: 32px; }
/* 날짜 칸: 달력 아이콘 · 비우기(X)를 칸 오른쪽 끝에 붙여 둡니다 — X 자리만큼만 비우고 그 바로 왼쪽에 달력 (2026-10-21).
   비어 있으면 X 가 없으니 달력이 끝까지 붙게 여백을 줄입니다 */
#campaign-form .clear-wrap input[type="date"] { padding-right: 30px; }
#campaign-form .clear-wrap input[type="date"].is-empty { padding-right: 10px; }
.field-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.field-clear:hover { background: var(--accent-soft); color: var(--ink); }
.field-clear svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.clear-wrap input[type="date"] + .field-clear { right: 5px; }
#campaign-form .clear-wrap input:placeholder-shown + .field-clear,
#campaign-form .clear-wrap input.is-empty + .field-clear { display: none; }

/* ---------- 위치 (카카오 지도) — 예약/초대/방문 탭의 접힌 묶음 ---------- */
#campaign-form .place-box { padding: 4px 0 6px; }
#campaign-form .place-address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 8px;
  font-size: 12.5px;
  color: var(--ink);
}
.place-open { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.place-open svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.place-map {
  width: 100%;
  height: 180px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
#campaign-form .invite-fold[hidden] { display: none; }

/* ---------- 분류 (맛집 카페 · 운동 취미 …) ---------- */
/* 편집 창 선정 탭: 글자 길이대로 줄바꿈되는 네모 칩 (하나만 고름) */
/* 칩 8개: 좁으면 넷씩 두 줄, 칩 줄이 450px 이상이면 한 줄 (후기 방식 칩과 같은 방식) */
#campaign-form .category-pick { container-type: inline-size; }
#campaign-form .cat-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
#campaign-form .cat-chips .chip { min-width: 0; border-radius: 6px; padding: 7px 4px; }
@container (min-width: 450px) {
  #campaign-form .cat-chips { grid-template-columns: repeat(8, 1fr); gap: 4px; }
}

/* 목록 화면 분류 칩 — 여러 개 고르는 칩이라 탐색 화면처럼 안 고르면 점선, 고르면 실선 */
.cat-filter[hidden] { display: none; }
.cat-filter .chip { border-style: dashed; }
.cat-filter .chip[aria-pressed="true"] { border-style: solid; }

/* 지역 칸: 업체 링크로 주소를 읽는 동안 칸 안 오른쪽에 돌아가는 표시 (campaign-modal.js 의 setRegionLoading) */
.region-wrap { position: relative; display: block; }
#campaign-form .region-wrap input.is-loading { padding-right: 30px; background: var(--accent-soft); }
.region-loading {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 16px;
  height: 16px;
  margin-top: 2px; /* input 의 margin-top(4px) 절반만큼 내려 칸 가운데에 */
  transform: translateY(-50%);
  color: var(--accent);
  pointer-events: none;
}
.region-loading[hidden] { display: none; }
.region-loading svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  animation: region-spin 0.8s linear infinite;
}
@keyframes region-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .region-loading svg { animation-duration: 2s; } }

/* ---------- 고르는 줄 (전체/올해/이번달 같은 하나만 고르는 탭) ---------- */
/* 대시보드 기간 탭(.dash-tab) · 인사이트 기간/통계 기준(.seg-tab)이 같은 모양을 씁니다.
   예전에는 대시보드는 검정 묶음, 인사이트는 체리 테두리 알약이라 같은 동작인데 모양이 달랐습니다. */
.dash-tabs,
.seg-tabs {
  display: inline-flex;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.dash-tabs::-webkit-scrollbar,
.seg-tabs::-webkit-scrollbar { display: none; }
.dash-tab,
.seg-tab {
  flex-shrink: 0;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
}
.dash-tab:hover,
.seg-tab:hover { color: var(--ink); }
.dash-tab.is-on,
.seg-tab[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}
.dash-tab:focus-visible,
.seg-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- 옆으로 밀리는 칩 줄: 오른쪽에 더 있으면 끝을 흐리게 ---------- */
/* chip-scroll.js 가 칩 줄마다 지금 어디까지 밀렸는지 보고 is-more-right / is-more-left 를 붙입니다 */
.chip-row.is-more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.chip-row.is-more-left {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent);
}
.chip-row.is-more-left.is-more-right {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}

/* ---------- 불러오는 중 / 못 불러옴 / 아직 없음 ---------- */
/* 대시보드 · 목록 · 인사이트 · 탐색이 같이 씁니다. 실패했을 때는 다시 시도(새로고침 아이콘)를 붙입니다. */
.load-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  line-height: 1.5;
}
.load-state[hidden] { display: none; }   /* display:flex 가 hidden 을 이기지 않게 */
.load-state.is-error { color: var(--danger); }
.load-state .icon-btn { width: 40px; height: 40px; }
.load-state .icon-btn svg { width: 18px; height: 18px; }
.load-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: load-spin 0.8s linear infinite;
}
@keyframes load-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .load-spinner { animation: none; } }

/* ---------- 체리 충전 창 (cherry-charge.js — 시안, 결제 연결 전) ---------- */
#charge-dialog { width: min(420px, 94vw); margin: auto; word-break: keep-all; }
.charge-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.charge-head h2 { margin: 0; font-size: 16px; }
.charge-pending {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid #e8d6a8; border-radius: 8px; background: #fbf5e4;
  color: var(--warn); font-size: 12.5px; line-height: 1.5;
}
.charge-pending svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.charge-need { margin: 0 0 12px; color: var(--danger); font-size: 13px; }
.charge-need[hidden] { display: none; }
.charge-group { border: 0; padding: 0; margin: 0 0 14px; }
.charge-group legend, .charge-label { padding: 0; margin-bottom: 6px; font-size: 12.5px; color: var(--muted); }
/* 상품은 한 줄에 하나씩, 가로 전체 (2026-10-23) — 왼쪽 체리 수, 오른쪽 가격 */
.charge-products { display: grid; grid-template-columns: 1fr; gap: 8px; }
.charge-product {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}
.charge-product input { position: absolute; opacity: 0; pointer-events: none; }
.charge-product.is-on { border-color: var(--cherry); box-shadow: inset 0 0 0 1px var(--cherry); background: var(--accent-soft); }
.charge-product:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.charge-product-qty { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; }
/* 가장 많이 고르는 상품에 붙는 작은 표시 (카드 위쪽에 걸침) */
.charge-recommend {
  position: absolute; top: -8px; right: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--accent-soft); color: var(--cherry); font-size: 11px; font-weight: 600;
}
#charge-dialog .cherry-icon { width: 16px; height: 16px; flex-shrink: 0; }
.charge-product-price { margin-left: auto; font-size: 14px; font-weight: 600; min-width: 64px; text-align: right; }
.charge-product-list { margin-right: 6px; font-size: 12px; font-weight: 400; color: var(--muted); }
.charge-count-row { display: flex; align-items: center; justify-content: space-between; }
.charge-count-row .charge-label { margin: 0; }
.charge-count-row .guest-count .icon-btn { width: 34px; height: 34px; }
.charge-count-row .guest-count-text { min-width: 44px; font-size: 13px; }
.charge-method {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0;
}
.charge-method input { margin: 0; accent-color: var(--cherry); }
.charge-method .kakaopay-logo { height: 20px; width: auto; display: block; padding: 0; border: 0; border-radius: 0; }
.charge-method .kakaopay-name { font-size: 14px; font-weight: 600; }
.charge-method-state { margin-left: auto; font-size: 11px; color: var(--warn); border: 1px dashed #d9c48e; border-radius: 999px; padding: 2px 8px; }
.charge-sum { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--bg); }
.charge-sum div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 2px 0; }
.charge-sum dt { color: var(--muted); }
.charge-sum dd { margin: 0; font-weight: 600; text-align: right; }
/* 결제하기 — 체리색 (2026-10-23). 결제 연결 전이라 누르면 '준비 중' 안내 (cherry-charge.js) */
.charge-pay { width: 100%; min-height: 46px; background: var(--ink); border-color: var(--ink); color: #fff; font-size: 15px; font-weight: 700; }
.charge-pay:hover { background: #3a3a3a; border-color: #3a3a3a; }
.charge-small { margin: 8px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.charge-small a { color: var(--muted); text-underline-offset: 3px; }


/* 목록 카드 둘째 줄 맨 앞의 지금 단계 (선정 · 방문·체험 · 후기 작성 · 완료 · 취소 — app.js 의 cardStageLabel).
   글자만, 본문색으로 굵게 — 줄마다 칠하면 시끄러워서 배지 모양은 쓰지 않습니다 (2026-11-11) */
.campaign-card .card-stage { color: var(--ink); font-weight: 600; }
.campaign-card .card-stage::after { content: " · "; color: var(--muted); font-weight: 400; }

/* ======================================================================
   편집 창 = 상세 화면 (2026-11-11, 브랜치 claude/home-3steps)
   가운데 뜨는 팝업 대신 '화면 하나' 처럼: 휴대폰 · 넓은 화면 모두 위아래 꽉 찬 한 기둥(최대 640px, 가운데),
   오른쪽에서 밀려 들어옵니다. 맨 위 줄 = 왼쪽 뒤로(닫기) · 이름 · 오른쪽 저장(바뀐 게 있을 때만).
   단계 탭은 번호 동그라미가 선으로 이어진 진행 표시(① 선정 ─ ② 방문·체험 ─ ③ 후기 작성).
   안쪽 칸 · 저장 · 작은 확인 창들은 그대로입니다. 예전 규칙을 아래에서 덮어씁니다.
   ====================================================================== */

#campaign-dialog,
#campaign-dialog.is-drafting {
  width: 100vw;
  max-width: 640px;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  padding-bottom: calc(var(--dlg-pad) + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 1px var(--border), 0 0 40px rgba(36, 36, 36, 0.12);
}
#campaign-dialog[open] { animation: cm-page-in 0.22s ease-out; }
@keyframes cm-page-in {
  from { transform: translateX(28px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #campaign-dialog[open] { animation: none; }
}
#campaign-dialog .dialog-sticky { padding-top: calc(var(--dlg-pad) + env(safe-area-inset-top)); }

/* 맨 위 줄: 뒤로 · 이름 · 저장 */
#campaign-dialog .dialog-header { align-items: center; gap: 6px; margin-bottom: 2px; }
#campaign-dialog .dialog-header h2 { padding-top: 0; font-size: 17px; }
#campaign-dialog .icon-btn.back {
  margin-left: -8px;
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}
#campaign-dialog .icon-btn.back:hover { background: var(--bg); border-color: transparent; }
#campaign-dialog .icon-btn.back svg { width: 22px; height: 22px; stroke-width: 2.2; }

/* 단계 진행 표시 — 번호 동그라미 + 이름, 동그라미끼리 가는 선으로 이어짐.
   끝낸 단계 = 검정 동그라미에 흰 체크, 보고 있는 단계 = 체리색(동그라미 테두리 · 이름 · 밑줄).
   단추(.chip[data-step])는 예전 그대로라 탭을 누르는 코드(index.html · guide.js)는 손대지 않았습니다. */
#campaign-dialog .step-tabs {
  counter-reset: cm-step;
  isolation: isolate;
  gap: 0;
  margin-top: 12px;
  padding-top: 0;
}
#campaign-dialog .step-tabs .chip {
  counter-increment: cm-step;
  flex: 1 1 0;
  flex-direction: column;
  gap: 5px;
  padding: 2px 2px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
#campaign-dialog .step-tabs .chip > svg { display: none; }
#campaign-dialog .step-tabs .chip::before {
  content: counter(cm-step);
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--todo);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 이어 주는 선: 앞 단계 동그라미 가운데 → 이 단계 동그라미 가운데 (첫 단계는 없음) */
#campaign-dialog .step-tabs .chip::after,
#campaign-dialog .step-tabs .chip.is-done::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 14px;
  left: -50%;
  right: auto;
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--border);
}
#campaign-dialog .step-tabs .chip:first-child::after { display: none; }
/* 끝낸 단계 */
#campaign-dialog .step-tabs .chip.is-done::before {
  content: "";
  border-color: var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
#campaign-dialog .step-tabs .chip.is-done { color: var(--ink); }
/* 보고 있는 단계 */
#campaign-dialog .step-tabs .chip[aria-pressed="true"] { color: var(--cherry); font-weight: 700; border-bottom-color: var(--cherry); }
#campaign-dialog .step-tabs .chip[aria-pressed="true"]::before { border-color: var(--cherry); color: var(--cherry); }
#campaign-dialog .step-tabs .chip.is-done[aria-pressed="true"]::before { background-color: var(--cherry); border-color: var(--cherry); }

/* ======================================================================
   새 체험단 등록 단추 · 목록 위쪽 (2026-11-11)
   ====================================================================== */

/* 새 체험단 등록 — 홈 · 목록이 같은 단추 (화면에 하나뿐인 주요 단추, 검정) */
.btn.cta-new {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.btn.cta-new svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 목록 | 캘린더 — 알약 모양 고르는 줄 (홈 · 인사이트의 전체/올해/이번달과 같은 모양) */
.view-switch {
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  overflow: visible;
}
.view-btn { width: 40px; height: 32px; border-radius: 999px; }
.view-btn + .view-btn { border-left: 0; }
.view-btn svg { width: 16px; height: 16px; }

/* 검색 — 돋보기 + 칸 한 상자 */
.list-toolbar .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: text;
}
.list-toolbar .search-box:focus-within { border-color: var(--ink); color: var(--ink); }
.list-toolbar .search-box svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.list-toolbar .search-box #f-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 15px;
}
.list-toolbar .search-box #f-search:focus { outline: none; }

/* 단계 세 칸 — 같은 너비, 아이콘 + 이름 + 개수. 고른 칸 = 체리 (선택된 단계) */
.list-toolbar .step-filter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.list-toolbar .stage-chip {
  min-width: 0;
  height: 42px;
  padding: 0 6px;
  gap: 5px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink);
}
.list-toolbar .stage-chip svg { width: 15px; height: 15px; color: var(--muted); }
.list-toolbar .stage-chip .stage-chip-label { overflow: hidden; text-overflow: ellipsis; }
.list-toolbar .stage-chip .chip-count { font-size: 13px; font-weight: 700; opacity: 1; color: var(--muted); }
.list-toolbar .stage-chip[aria-pressed="true"] svg,
.list-toolbar .stage-chip[aria-pressed="true"] .chip-count { color: var(--cherry); }

/* 작은 칸 한 줄 — 챙길 것(마감지남 · 환급전) | 분류. 테두리 없이 옅은 회색 바탕, 고르면 체리 */
.list-toolbar .tag-row { gap: 6px; margin-top: 8px; align-items: center; }
.list-toolbar .tag-group { display: inline-flex; gap: 6px; flex-shrink: 0; }
.list-toolbar .tag-group[hidden] { display: none; }
.list-toolbar #cat-chips { margin: 0; padding-left: 8px; border-left: 1px solid var(--border); }
.list-toolbar .tag-row .chip {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-style: solid;
  background: #ececea;
  color: var(--muted);
  font-size: 12.5px;
}
.list-toolbar .tag-row .chip svg { width: 12px; height: 12px; }
.list-toolbar .tag-row .chip:hover { color: var(--ink); border-color: transparent; background: #e4e4e1; }
.list-toolbar .tag-row .chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
@media (max-width: 360px) {
  .list-toolbar .stage-chip { font-size: 12.5px; gap: 4px; }
  .list-toolbar .stage-chip svg { display: none; }
}

/* ======================================================================
   초안 = 편집 화면 위로 올라오는 시트 (2026-11-11)
   예전엔 폼을 감추고 창 전체를 초안으로 바꿨는데(꽉 찬 화면), 창 위에 뜬 느낌이 나도록
   위쪽 머리줄(뒤로 · 체험단 이름)은 어둡게 비쳐 보이게 남기고 그 아래부터 둥근 모서리 시트로 덮습니다.
   시트가 스스로 스크롤합니다 (뒤의 폼은 그대로 멈춤). 어두운 곳을 누르면 시트만 내려갑니다.
   ====================================================================== */
#campaign-dialog.is-drafting { overflow: hidden; }
#campaign-dialog.is-drafting::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 20, 20, 0.42);
  animation: cm-dim-in 0.2s ease-out;
}
#campaign-dialog.is-drafting .draft-view {
  position: fixed;
  z-index: 31;
  top: calc(env(safe-area-inset-top) + 52px);
  bottom: 0;
  left: 0;
  right: 0;
  width: min(100vw, 640px);
  margin: 0 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--dlg-pad) calc(var(--dlg-pad) + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(20, 20, 20, 0.18);
  animation: cm-sheet-up 0.24s ease-out;
}
#campaign-dialog.is-drafting .draft-head {
  top: 0;
  margin: 0 calc(var(--dlg-pad) * -1);
  padding: 18px var(--dlg-pad) 10px;
  border-radius: 18px 18px 0 0;
}
/* 위쪽 손잡이 — 시트라는 표시 */
#campaign-dialog.is-drafting .draft-head::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--border);
}
#campaign-dialog.is-drafting .draft-sec-head { top: var(--draft-head-h, 56px); }
@keyframes cm-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cm-dim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #campaign-dialog.is-drafting .draft-view,
  #campaign-dialog.is-drafting::after { animation: none; }
}

/* ---------- 접히는 묶음 (2026-11-11) ----------
   fieldset 묶음은 제목(.section-title)을 눌러 접습니다 — details 묶음(예약하기 · 초대하기 · 위치 …)과 같은 화살표 · 같은 글씨.
   접히면 제목 줄만 남습니다. */
#campaign-form .step-panel .section-title { cursor: pointer; }
#campaign-form .step-panel .section-title .fold-arrow { margin-left: auto; color: var(--muted); transition: transform 0.15s ease; }
#campaign-form .step-panel .field-group:not(.is-folded) .section-title .fold-arrow { transform: rotate(180deg); }
#campaign-form .step-panel .section-title:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
#campaign-form .field-group.is-folded > :not(legend):not(.section-title):not(.ai-title-row) { display: none; }
#campaign-form .field-group.is-folded > .section-title,
#campaign-form .field-group.is-folded > .ai-title-row .section-title { margin-bottom: 0; }
.ai-title-row .section-title { flex: 1; min-width: 0; }

/* 체리 AI 작성 안 '사진 · 키워드 · 미션 · 느낀 점' — 카드 테두리 없이 위아래 가는 선만, 처음엔 접힘 */
#campaign-form .ai-inputs { margin: 4px 0 10px; padding: 0; border: 0; }
#campaign-form .ai-inputs > summary { padding: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-weight: 500; }
#campaign-form .ai-inputs[open] > summary { border-bottom-color: transparent; }
.ai-inputs-meta { font-size: 12px; font-weight: 400; color: var(--muted); }
.ai-inputs-meta.warn { color: var(--danger); }

/* 초안 시트: 글자 수는 초안 이름 바로 옆 */
.draft-version-row .draft-count { margin-left: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ---------- 편집 창 묶음 사이 = 홈처럼 굵은 회색 띠 (2026-11-11) ----------
   가는 줄 대신 창 폭 꽉 찬 8px 띠(--band)로 묶음을 나눠 한눈에 갈리게 합니다. 맨 아래 취소 · 삭제 줄도 같은 띠로 떼어 둡니다. */
#campaign-form .step-panels .field-group + .field-group,
#campaign-form .step-panels .field-group + .danger-row {
  margin: 16px calc(var(--dlg-pad) * -1) 0;
  padding: 14px var(--dlg-pad) 0;
  border-top: 8px solid var(--band);
}

/* 목록 · 캘린더 공통 검색칸 (보기 전환 줄 아래) */
.shared-search { margin: 0 0 10px; }
/* 캘린더 켜고 끄기 칩 — 목록 단계 칸과 같은 모양, 위쪽 여백만 캘린더에 맞춤 */
.list-toolbar .step-filter.cal-filters { margin: 12px 0 10px; } /* 위 '2026년 11월' 줄과 띄움 */

/* 상세 화면 자동 저장 상태 (저장 단추 자리) */
.autosave-state { align-self: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.autosave-state.is-ok { color: var(--ok); }
.autosave-state.is-warn { color: var(--danger); }
.autosave-state:empty { display: none; }

/* ---------- 날짜 칸 (date-field.js, 2026-11-11) ----------
   직접 치는 글자 칸 + 오른쪽 달력 아이콘(누르면 굴리는 선택 창). 원래 날짜 칸은 숨기고 값만 그대로 씀. */
input.df-native { display: none !important; }
.df-wrap { position: relative; display: flex; flex: 1 1 auto; min-width: 0; width: 100%; }
.df-wrap .df-text { width: 100%; min-width: 0; padding-right: 40px; font-variant-numeric: tabular-nums; }
.df-wrap .df-text.is-invalid { border-color: var(--danger); }
.df-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.df-btn:hover { color: var(--ink); background: var(--bg); }
.df-btn:disabled { opacity: 0.4; cursor: default; }
.df-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.df-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(20, 20, 20, 0.42);
}
.df-panel {
  width: min(100vw, 480px);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(20, 20, 20, 0.18);
  animation: cm-sheet-up 0.2s ease-out;
}
@media (min-width: 601px) { .df-sheet { align-items: center; } .df-panel { border-radius: 16px; } }
.df-cols { position: relative; display: flex; gap: 4px; height: 200px; }
.df-col {
  flex: 1 1 0;
  min-width: 0;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.df-col::-webkit-scrollbar { display: none; }
.df-col ul { list-style: none; margin: 0; padding: 80px 0; }
.df-col li {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: var(--ink);
  scroll-snap-align: start;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.df-col li.is-off { color: var(--todo); }
.df-cols.has-time .df-col li { font-size: 15px; }
.df-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 80px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent-soft);
  pointer-events: none;
  z-index: -1;
}
.df-cols { isolation: isolate; }
.df-actions { display: flex; gap: 8px; margin-top: 12px; }
.df-actions .btn { flex: 1; height: 44px; justify-content: center; }
#dialog-title:focus { outline: none; }