/*
| flo-app.css — FLO 공통 부품 스타일 (이슈 #667)
|
| 🔑 **값의 정본은 FLO 디자인 킷이다** (R-306). 여기 있는 색·치수는 킷의
|    `common.css` 와 셸 토큰에서 가져온 것이다. 🚫 새 값을 만들지 마라 —
|    없으면 킷 문서 `docs/00-공통-디자인시스템.md` 를 먼저 봐라.
|
| 🔑 **자산 로드 순서에서 마지막이다.** 킷 CSS 위에 우리 부품만 얹는다.
|    🚫 킷 클래스(`common-table` · `basic-btn` · `cam-badge`)를 여기서 덮어쓰지 마라 —
|    킷을 갱신하면 어느 쪽이 이기는지 알 수 없게 된다.
|
| 🚫 Tailwind 클래스를 쓰지 마라 — 묶음이 비어 있어 오류 없이 아무 일도 안 일어난다.
*/

/* ═══ 신호색 — 상태의 뜻을 색으로 나른다 ═══════════════════════════════
 |
 | 🔑 이름은 **뜻**이고 값은 **킷의 배지 팔레트**다(킷 12-5).
 | 🚫 색만으로 상태를 가르지 마라 — 이름표가 언제나 함께 있어야 한다.
 | 🚫 «중단» 에 초록을, «완료» 에 빨강을 주지 마라. 뜻과 색이 어긋나면
 |    화면 전체의 신호가 무너진다.
 */
:root {
    /*
     * ── 셸 토큰 — 킷 `flo-shell.blade.php` 의 `:root` 15개 ──────────────
     *
     * 🔻 **2026-08-26 (#667) — 인라인 `<style>` 에서 이 파일로 옮겼다.**
     * 🚨 인라인에만 두었더니 **공개·진입 화면에서 전부 정의되지 않았다.** 그 두
     *    레이아웃은 운영자 셸을 include 하지 않고 이 CSS 만 부른다. 정의가 없으면
     *    CSS 는 **오류를 내지 않고 그 선언만 버려** 글자가 검정으로, 카드 바탕이
     *    투명으로 떨어진다 — 화면은 뜨고 응답도 200 이라 눈으로 봐야 드러난다.
     * 🔑 **정의는 여기 한 곳이다.** 🚫 인라인에서 다시 정의하지 마라.
     */
    --flo-sidebar-w: 232px;
    /*
     | 🆕 **접었을 때 곁 메뉴가 남기는 폭** (2026-09-01 · 🧑 · 이슈 #1052).
     |
     | 🧑 *"완전히 사라지는건 원하지 않음"* · 접으면 **아이콘만 남는 줄**이 된다.
     | 🔑 값은 킷의 접힌 곁 메뉴와 같다(`admin_layout.css` 의 `#container.navHidden .nav`).
     |    🚫 새 값을 만들지 마라.
     | 🔑 **이름 하나가 갖는다** · 곁 메뉴 폭 · 상단바 왼쪽 · 본문 여백 · 푸터 여백 ·
     |    알림 상자 자리 다섯 곳이 이 값을 부른다. 숫자를 그 다섯 곳에 적지 마라.
     */
    --flo-rail-w: 64px;
    --flo-topbar-h: 56px;
    /*
     | 🆕 **곁 메뉴를 접고 펼 때의 움직임** (2026-09-01 · 🧑 · 이슈 #1060).
     |
     | 🧑 *"사이드바 햄버거 누를 때 좀 더 애니메이션 있어서 부드럽게 움직이면 좋겠으"*
     |
     | 🔑 **둘 다 킷의 값이다** · 킷도 접힌 곁 메뉴를 `0.3s` 에 기본 완급(`ease`)으로
     |    옮긴다(`admin_layout.css` 의 `#container.navHidden .nav`). 🚫 새 값을 만들지 마라.
     | 🔑 **이름 하나가 갖는다** · 곁 메뉴 폭 · 상단바 왼쪽 · 메뉴 한 줄의 여백 ·
     |    좁은 폭의 서랍과 가림막 다섯 곳이 이 값을 부른다. 🚫 숫자를 그 자리마다 적지 마라.
     |
     | 🚫 **알림 상자의 곡선(`cubic-bezier(0.16, 1, 0.3, 1)`)을 여기 쓰지 마라.**
     |    한 번 그렇게 짰다가 브라우저에서 재고 물렀다. 그 곡선은 **25ms 에 54% 를
     |    가고 92ms 에 90% 를 간 다음 남은 200ms 를 기어간다** · 「미끄러졌다」가 아니라
     |    **「튀었다가 멎는다」**로 읽힌다. 8px 짜리 알림이 떠오를 때는 그 쏠림이 맞고,
     |    168px 를 오가는 곁 메뉴에는 맞지 않는다. **기본 완급은 87ms 에 58% 다.**
     |    잰 값 전부는 `agent/docs/plan/05-foundation.md` 9-i-3 에 있다.
     | ⚠️ **킷이 좁은 폭 서랍에는 `.2s` 를 적어 두었다**(`00-공통-디자인시스템.md` 6-3).
     |    **한 값으로 모았다** · 단추 하나가 두 폭에서 서로 다른 속도로 움직이면
     |    같은 단추로 읽히지 않는다.
     */
    --flo-nav-motion: .3s;
    --flo-nav-ease: ease;
    /*
     | 🆕 **본문이 가로로 벌어질 수 있는 한계** (2026-08-31 · 🧑 · 이슈 #988).
     |
     | 🧑 *"UI가 전체적으로 화면에 너무 가득 참. 사용자 모니터 표준 화면에 맞춰
     |    전체적인 UI를 중간으로 조금 줄일 것."*
     |
     | 🚨 **직전 값 2280px 은 실제 모니터에서 한 번도 걸리지 않았다.** 1920px 창에서
     |    사이드바 232px 과 좌우 여백 44px 을 빼면 본문이 **1600px** 이라, 한계값이
     |    있으나 **없는 것과 같았다** — 내용이 창 가장자리까지 찼다.
     | 🔑 **1440px 로 줄인다** — 1920px 창에서 좌우에 각각 124px 이 남아 가운데로 모인다.
     | 🔑 **표는 좁아져 깨지지 않는다** — 인플루언서 검색 표의 최소 폭이 1000px 이다.
     | 🚫 **본문과 푸터가 각각 값을 적지 마라** — 한쪽만 고치면 글자 시작 위치가
     |    어긋난다. 그래서 이름 하나로 모았다.
     */
    --flo-content-max: 1440px;
    --flo-navy: #181a20;          /* 사이드바 바닥: 딥 차콜 */
    --flo-navy-hover: rgba(255, 255, 255, .06);
    --flo-navy-active: rgba(255, 255, 255, .10);
    --flo-primary: #6d5bc7;       /* 메인 액센트: 뮤트 바이올렛 */
    --flo-accent-pink: #cf7fac;   /* 보조 액센트: 더스티 핑크 */
    --flo-primary-soft: #efeafb;  /* 뱃지·선택 틴트 */
    /*
     | 🆕 카드 그라데이션이 쓰는 두 극 (킷 `02-` 12장 `--em-deep`·`--em-brt` · 이슈 #709).
     | 🔑 메인 액센트와 **같은 계열**이다 — 🚫 다른 색상환을 끌어오지 마라.
     */
    --flo-primary-deep: #3a2f6b;  /* 큰 숫자·그라데이션 깊은 쪽 */
    --flo-primary-brt: #9d8ce0;   /* 강조선·그라데이션 밝은 쪽 */
    /*
     | 🆕 2026-10-11 (#1636 · 🧑 「구간별로 옅기도 있어야하지않을까」) **시그니처 보라의 옅은 단계.** 새 값은 아래 셋뿐이고 나머지는 기존 이름의 별칭이다.
     | 🔑 50 가장 옅은 틴트(고른 바탕 · 칩 바탕) · 100 옅은 틴트(= `--flo-primary-soft`) · 200 옅은 테두리 · 400 중간(= `--flo-primary-brt`)
     |    · 600 기본(= `--flo-primary`) · 900 깊은 쪽(= `--flo-primary-deep`). 꽉 찬 보라는 주 단추 · 지금 표지에만 쓴다.
     */
    --flo-violet-50: #f7f5fd;
    --flo-violet-100: var(--flo-primary-soft);
    --flo-violet-200: #ddd5f5;
    --flo-violet-300: #c4b8ee; /* 🆕 2026-10-13 (#1664 검토) 진행 단계 막대 「콘텐츠」 칸 · 200 과 400 사이 */
    --flo-violet-400: var(--flo-primary-brt);
    --flo-violet-600: var(--flo-primary);
    --flo-violet-900: var(--flo-primary-deep);
    /* 🆕 2026-10-11 (#1630) 고른 모양 한 벌의 값 · 테두리 중간 · 바탕 가장 옅게 · 바깥 고리는 옅은 테두리 */
    --flo-select-border: var(--flo-violet-400);
    --flo-select-fill: var(--flo-violet-50);
    --flo-select-ring: var(--flo-violet-100);
    --flo-ink-1: #191f28;
    --flo-ink-2: #4e5968;
    /*
     | 🔻 2026-09-28 (#1459) ~~`#8b95a1`~~ → **`#6b7684`** · 흰 바탕에서 3.04:1 이라 글자 대비 기준(4.5:1)에 못 미쳤다.
     |    🔑 **새 값을 짓지 않았다**(R-307) · 킷이 이미 흐린 글자에 쓰는 값이다(`.common-table th` · 라벨 ·
     |    `cam-badge--draft` · 킷 문서 60곳). 흰 바탕 4.62:1. 회색 바탕 자리는 아래 규칙이 `--flo-ink-2` 로 올린다.
     */
    --flo-ink-3: #6b7684;
    --flo-line: #e5e8eb;
    /*
     | 🆕 **옛 `--rule-strong` 을 새 이름으로 옮긴 것** (2026-08-27 · 이슈 #807).
     |
     | 🔑 **값은 그대로다** — 인라인 `style` 을 걷어내며 옮겨 온 값이고 **새로 고안한 것이
     |    아니다**(R-307 ①). 🚫 이 값을 바꾸지 마라.
     | ⚠️ **킷에 대응하는 값이 없다** — `common.css` 어디에도 `#d1d6db` 가 없다(실측).
     |    그래서 「전환용 별칭」 블록에 홀로 남아 있던 이름이다.
     | 🔑 **킷의 답이 정해지면 이 이름이 그리로 옮겨 간다** — 그때까지 새 CSS 는
     |    옛 이름 대신 이것을 부른다. ~~**별칭 블록의 의존을 줄이는 방향**이다.~~
     | 🔻 **2026-08-27 — 그 방향이 끝났다**(이슈 #851). **별칭 블록은 지웠고**
     |    이 이름이 `#d1d6db` 의 유일한 자리다. 🚫 옛 이름을 되살리지 마라.
     */
    --flo-line-strong: #d1d6db;
    --flo-line-soft: #f2f4f6;

    /*
     | 🆕 정렬 표시 중 **안 걸린 쪽**의 잉크 (2026-08-31 · 이슈 #1017).
     |
     | 🔑 **`--flo-ink-3` 을 쓰지 않는다.** 열 머리 바닥이 `--flo-line-soft` 라
     |    거기서는 대비가 2.76:1 이고, 그림 요소가 지켜야 할 3:1 에 못 미친다.
     |    이 값은 같은 바닥에서 3.31:1 이다. 🚫 더 흐리게 하지 마라. 없는 것과 같아진다.
     */
    --flo-sort-idle: #7c8794;
    --flo-bg: #f4f5f7;
    --flo-card: #fff;

    /* ── 신호색 ──────────────────────────────────────────────────── */
    --sig-progress: #0f9d75;   /* 진행 — 킷 cam-badge--ing */
    --sig-done: #6d5bc7;       /* 완료 — 킷 주 색. 끝난 것은 제품 색으로 표시한다 */
    --sig-warn: #b7791f;       /* 주의 — 킷 cam-badge--warn */
    --sig-fail: #d1495b;       /* 중단 — 킷 cam-badge--danger */

    /*
     | 🆕 캠페인 상태 전용 두 색 (2026-08-31 · 🧑 지시 · 이슈 #1015).
     |
     | 🧑 *"진행중은 초록. 종료는 회색. 임시 저장은 노랑. 시작 전은 주황"*
     |
     | 🔑 **이 둘은 캠페인 상태 축에서만 쓴다.** 트랙 상태·표시 상태는 지금 네 색 그대로다
     |    (`CampaignStatusGrade` 머리글이 세 어휘를 갈라 둔 이유와 같다).
     | 🚫 **파랑을 만들지 마라** (#717). 강조는 로고의 보라 하나다.
     | 🔑 **글자를 바닥보다 충분히 어둡게 잡았다.** 11.5px 작은 글자라 대비 4.5:1 을 넘겨야 한다
     |    (노랑 5.47:1 · 주황 5.02:1 실측).
     */
    --sig-draft: #75600d;      /* 임시저장 · 노랑 */
    --sig-ready: #a34608;      /* 시작 전 · 주황 */

    /* 배지 바닥 — 킷 12-5 색 변형 */
    --sig-progress-bg: #e9f7f1;
    --sig-done-bg: #efeafb;
    --sig-warn-bg: #fff7e6;
    --sig-fail-bg: #fdf1f2;
    --sig-fail-line: #f3c9c7; /* 🆕 2026-10-13 (#1663 검토) 위험 영역 테두리 · 빨강 바탕보다 한 단계 짙은 선 */
    --sig-neutral-bg: #f1f3f5;
    --sig-draft-bg: #fdf3c4;
    --sig-ready-bg: #ffe4d1;

    /*
     * 틴트 위에 얹는 진한 글자색.
     * 🔑 위의 신호색을 옅은 면 위에 그대로 쓰면 **대비가 3:1 대에 머문다** —
     *    12~14px 본문에는 모자란다. 같은 색상각을 유지하되 명도만 낮춘 짝이다.
     * 🚫 배지(`cam-badge` 계열)에는 쓰지 마라 — 그쪽 값은 킷이 정한다.
     * 🔻 2026-09-28 (#1491 · 🧑 지시) 위 금지는 풀렸다. 주의·중단 배지와 필수 표시·오류 문구 등
     *    **글자 자리는 이 짝을 쓴다.** 원래 신호색은 흰 바탕 4.36:1 · 옅은 노랑 위 3.42:1 로 4.5:1 에 못 미쳤다.
     *    막대 칸·테두리 같은 그림 요소는 3:1 기준이라 원래 신호색을 그대로 쓴다.
     * 🔻 2026-09-28 (#1492) 진행·완료 배지 글자도 이 짝으로 옮겼다(3.12:1 · 4.49:1 이었다).
     */
    --sig-progress-ink: #0a6e51;
    --sig-done-ink: #4b3d94;
    --sig-warn-ink: #8a5a0f;
    --sig-fail-ink: #a3283a;

    /* 치수 — 킷 셸과 같은 눈금을 쓴다 */
    --flo-radius: 6px;
    --flo-radius-card: 12px;
    /*
     | 🔻 2026-10-05 (🧑 채택 · #1567) ~~38 · 30~~ → 40 · 32. 업계 표준 쌍(Ant · Primer · Carbon 32 / 40)이고 4px 격자 위다.
     |    기본 40 은 폼 칸 · 선택 상자 · 단추, 조밀한 32 는 검색 필터 판 · 표 안 조작 · 작은 단추 · 칩 · 탭 · 기간 빠른 설정이다.
     |    칩 · 탭(30)도 32 로 올려 필터 판의 한 줄이 한 높이가 된다(정본 125- 「칸 높이 40 · 32」).
     */
    --flo-control-h: 40px;
    --flo-control-h-sm: 32px;
    /*
     | 🆕 2026-10-05 (🧑 채택 · #1567) 줄 높이 눈금 · 정본 125- 「줄 높이」.
     |    글자 크기마다 줄 높이 하나다. 관리 화면 14/20(Atlassian · Carbon), 한글 본문 문단은 1.5 이상(KRDS)이라 14/22.
     | 🔑 클래스 없는 글자는 본문(`.flo-main`)의 비율 20/14 를 이어받는다. 크기가 다른 글자는 자기 규칙에 이 토큰을 적는다.
     */
    --flo-lh-ui: 20px;      /* 14 · 표 칸 · 입력 칸 · 이름표 · 단추 글자 */
    --flo-lh-body: 22px;    /* 14 · 본문 문단 */
    --flo-lh-caption: 18px; /* 13 · 캡션 · 표 머리 · 도움말 */
    --flo-lh-card: 24px;    /* 16 · 판 · 절 · 카드 제목 */
    --flo-lh-title: 30px;   /* 22 · 쪽 제목 */
    --flo-lh-metric: 32px;  /* 26 · 지표 숫자 */
    --flo-actionbar-h: 56px;
    --flo-form-col-max-w: 560px;
    /* 🆕 2026-10-03 (#1555) 입력 칸 폭 단계 · 정본 125- 「입력 칸 · 상자 크기」 */
    --flo-control-w-short: 140px;
    --flo-control-w-mid: 240px;
    /* 🆕 2026-10-03 (#1552) 예약 시각 칸 · `2026-10-03 14:30` 이 140 에서 빠듯했다 */
    --flo-control-w-time: 160px;
    /* 🆕 2026-10-04 (#1561) 숫자 범위 칸(최소 · 최대) · 짧은 칸보다 한 단계 좁다 */
    /* 🔻 2026-10-06 (#1576) 120 → 160. 이름표(「최소」 · 「최대」)가 칸 안 왼쪽으로 들어와 아홉 자리 수 · 단위와 함께 든다 */
    --flo-control-w-num: 160px;
    /* 🆕 2026-10-06 (#1594) 넓은 선택 상자(캠페인 이름) · 검색어 칸의 상한(420)과 같은 값이라 두 칸의 오른쪽 끝이 맞는다 */
    --flo-control-w-long: 420px;
    /*
     | 🆕 2026-10-14 (🧑 「기준점 잡아서 진행해줘」 · #1737) 화면 기준 눈금 · 정본 125- 「화면 기준 눈금」.
     | 🔑 카드 글 시작(내용선)은 카드 바깥 가장자리에서 20(860 이하 16)이다. 판 · 절 카드 · 머리 카드 · 지표 칸 ·
     |    서브카드가 모두 이 이름 하나를 읽는다. 테두리가 있는 카드는 안여백을 `calc(var(--flo-card-inset) - 1px)` 로 적어
     |    선을 포함해 같은 자리에서 글이 시작한다. 🚫 카드마다 숫자를 적지 마라(판 20 · 절 21 · 지표 17 · 머리 25 가 섞였던 까닭).
     | 🔑 간격은 4 · 8 · 12 · 16 · 20 · 24 · 32 일곱 단계다. 본문 위는 상단바 + 32 다.
     | 🔑 단추 좌우 안여백은 높이 40 단추 16 · 32 단추 12 다(킷의 30 · 10 을 덮는다).
     */
    --flo-card-inset: 20px;
    --flo-btn-pad-x: 16px;
    --flo-btn-pad-x-sm: 12px;
}
/* 🆕 2026-10-14 (#1737 · 결정 ①) 860 이하 모든 카드 · 판의 내용선은 16 이다. 🔻 #1559 의 판 12 · #1641 의 절 카드 16 이 둘이던 것을 16 하나로 */
@media (max-width: 860px) {
    :root { --flo-card-inset: 16px; }
}

/*
 | 🆕 **한글은 낱말 경계에서 줄바꿈한다** (2026-10-01 · 이슈 #1544 · R-308).
 |
 | 🚨 **개별로 `keep-all` 을 붙인 곳만 지켜졌다.** 전역 바탕(`html, body`)에는 한 번도
 |    없었고, 킷의 `common.css:15` 가 거는 것도 `font-size: 1rem` 뿐이다. 그 결과
 |    `.flo-t-caption`·`.flo-field__help`·`.flo-inline-alert__body`·`.flo-page-head__meta`
 |    처럼 keep-all 을 따로 못 받은 자리마다 낱말이 중간에서 끊겼다(실측: 390 에서
 |    23개 화면 23곳 75건, 1024 에서도 33건).
 | 🔑 **여기 한 줄로 모은다.** 요소 선택자(`html, body`)라 셈이 가장 낮아, 자리마다
 |    이미 있는 `.flo-seeding-url`·`.flo-share-url`·`.flo-usertext`(`break-all`·
 |    `overflow-wrap: anywhere`) 와 킷 `common.css:862` 의 `tbody td`(`!important`)
 |    는 그대로 이긴다. 토큰·URL·이메일처럼 끊어야 하는 자리는 바뀌지 않는다.
 | ✅ 실행 중 화면에 이 한 줄만 넣고 재 보니 390 의 낱말 중간 줄바꿈이 75 → 7건으로
 |    줄었다. 남은 7건은 가운뎃점(·) 뒤 정상 줄바꿈과 `overflow-wrap: anywhere` 표
 |    칸이라 결함이 아니다.
 | 🚫 **`overflow-wrap`은 여기서 같이 건드리지 마라.** 그것은 표 칸의 넘침을 막는
 |    별개 장치라 값이 다르면 킷이 깨진다. 아래 `.flo-td` 의 개별 자리만 덮는다.
 */
html, body { word-break: keep-all; }

/*
 | 🆕 **여러 줄 안내의 외톨이 낱말** (2026-10-06 · 이슈 #1587 B · 125- 「2차 세부 점검: 상세 · 템플릿 · 메시지 · 정산 · 설정」).
 |
 | 🚨 390 에서 여러 줄 안내의 마지막 줄에 낱말 하나만 남는 자리가 데모 · 개발 몰 22개 화면에서 55곳이었다(「수」 · 「없습니다.」).
 | 🔑 `text-wrap: pretty` 는 마지막 줄의 외톨이 낱말을 앞줄에서 하나 내려 받는다. 지원하지 않는 브라우저는 지금과 같다.
 | 🔑 읽는 글 한 줄 상한(720)은 같은 날 #1587 A 가 알림 본문 규칙 옆에 두었다. 🚫 여기 다시 적지 마라(두 곳이 되면 어느 쪽이 정본인지 모른다).
 */
:where(.flo-main) :is(p, li, .flo-inline-alert__body, .flo-field__help, .flo-sec__desc) { text-wrap: pretty; }

/* ═══ 킷 액센트 팔레트 — 파랑을 로고 보라로 바꾼다 (🧑 2026-08-26 · 이슈 #717) ═══
 |
 | 🧑 사용자 지시 — **«버튼 색상은 모두 로고에 쓰인 보라로 통일»**.
 |
 | 🚨 **화면에서 파랬던 것은 두 자리뿐이었다**(브라우저로 화면 15개 실측).
 |    ① 주요 버튼 바탕 `linear-gradient(135deg, #5B7AF5, #A16FFF)`
 |    ② 통신 중 도는 표시 `#405CCC`
 |    나머지(링크·쪽번호·배지·강조 숫자)는 **이미 `--flo-primary`** 였다.
 |    🔑 그래서 이 작업은 «전부 칠하기» 가 아니라 **«한 갈래만 옮기기»** 다.
 |
 | 🔑 **여기서 바꾸는 것은 값뿐이다.** 킷의 규칙(`.basic-btn.solid` 가 어떤 속성을
 |    쓰는지)은 그대로 두고, 그 규칙이 읽는 **변수의 값만** 덮는다. 킷을 갱신해도
 |    규칙은 킷 것이 그대로 이기므로 «어느 쪽이 이기는지 알 수 없는» 문제가 없다.
 | 🚨 **`flo-app.css` 가 `common.css` 보다 뒤에 실려야 이 덮어쓰기가 산다.**
 |    자산 순서는 레이아웃 4종이 정한다 — 🚫 순서를 바꾸지 마라.
 |
 | 🚫 **여기 없는 색을 새로 만들지 마라.** 오른쪽 값은 전부 위 `:root` 에 이미 있는
 |    FLO 색이다. 🚫 파랑 계열을 되살리지 마라 — 되살리면 로고와 다시 어긋난다.
 */
:root {
    /* 킷 `#405CCC` → 로고 보라. 단색 버튼·탭·달력·체크상자가 함께 읽는다 */
    --point-color: #6d5bc7;
    /* 킷 `#7D8DE3` → 같은 계열 밝은 쪽. 입력칸 포커스 테두리·라디오가 읽는다 */
    --point-color-2: #9d8ce0;
    /*
     | 킷 `#5B7AF5 → #A16FFF`(파랑→보라) → **로고와 같은 두 극**.
     | ⚠️ 주요 버튼은 이제 이 갈래를 쓰지 않는다(단색으로 옮겼다 · `x-button`).
     |    남겨 두는 이유는 **킷의 다른 규칙이 아직 이 변수를 읽기 때문**이다 —
     |    값이 파랑이면 그 자리가 나중에 조용히 파랗게 뜬다.
     */
    --gradation-color-l: #6d5bc7;
    --gradation-color-r: #cf7fac;
    /* 킷 `#E8ECFF`(연한 파랑) → 연보라 틴트. 뱃지·선택 바탕이 읽는다 */
    --sky-blue: #efeafb;
}

/*
 | 🚨 **킷이 값을 직접 박아 둔 자리는 변수로 닿지 않는다.** 아래 한 줄이 그것이다 —
 |    `common.css` 의 `.basic-btn.solid:hover` 가 `#3149b2`(파랑)를 **글자 그대로**
 |    갖고 있어, 위에서 팔레트를 바꿔도 **손가락을 올리는 순간 파래진다.**
 | 🔑 **덮는 규칙은 저장소 전체에서 이 하나뿐이다.** 🚫 늘리지 마라 —
 |    늘리면 킷을 갱신할 때 어느 쪽이 이기는지 알 수 없게 된다.
 |
 | 🔑 **새 색을 만들지 않고 어둡게 한다.** 같은 보라 위에 검정 12% 를 한 겹 덮는
 |    방식이라, 주 색이 바뀌면 눌린 색도 **따라서 바뀐다.**
 | 🚫 `filter: brightness()` 로 대신하지 마라 — 그것은 **글자까지 흐리게** 만든다.
 */
.basic-btn.solid:hover {
    background-color: var(--point-color);
    background-image: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12));
}

/* ═══ 글자 ═══════════════════════════════════════════════════════════
 |
 | 🔻 **2026-09-29 (#1530 · 🧑 결정) 하한을 12px → 13px 로 올렸다.** 실측
 |    (`scratchpad/qa9/U.md` B-3)이 26개 화면에서 보이는 글자 덩어리의 36% 가
 |    13px 미만임을 짚었다. 「조밀하다」로만 읽히고 아무도 걸러 내지 못하던 자리다.
 |    🚨 **예외는 둘뿐이다**(도움말 표식 「i」·카드형 보기의 장식 머리글자) ·
 |    `tests/Feature/Guard/MinReadableFontSizeGuardTest.php` 가 지킨다.
 | 🔻 **2026-09-29 (#1530 독립 검토) 정정.** ~~**굵기 상한은 600 이다.** 서체 묶음에
 |    400·500·600 만 있어 **700 을 적으면 오류도 경고도 없이 600 으로 떨어진다.**~~
 |    실측(`document.fonts`, 렌더된 화면)이 **Pretendard 400·600·700·800 이 전부 실제로
 |    실린다**는 것을 보였다. 위 문장은 근거가 없었다. 🔑 **700·800 을 그대로 적어도 된다.**
 |    이미 여러 자리(도움말 풍선 표식·카드형 보기 라벨·단계 번호)가 700·800 을 쓰고 있다.
 */
.flo-t-body,
.flo-main .flo-t-body { font-size: 14px; font-weight: 400; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); } /* 🔻 2026-10-05 (#1567) 줄 높이 ~~1.5~~ → 20 · 표 칸 · 칸 글자 */
.flo-t-caption,
.flo-main .flo-t-caption { font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); } /* 🔻 2026-10-05 (#1567) ~~1.45~~ → 18 */
.flo-t-label,
.flo-main .flo-t-label { font-size: 13px; font-weight: 600; color: var(--flo-ink-1); }
.flo-t-metric { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); color: var(--flo-ink-1); } /* 🔻 2026-10-05 (#1567) ~~1.2~~ → 32 */
/*
 | 🆕 **13 글자의 줄 높이는 18 이다** (2026-10-05 · 🧑 채택 · 이슈 #1567 · 정본 125- 「줄 높이」).
 |
 | 🚨 아래 자리들은 글자 크기(13)만 정하고 줄 높이는 본문 비율(20/14)을 이어받아 18.6 이었다. 문단(`p`, 22)
 |    안에 서면 22 를 받았다(절 설명 · 빈 목록 사유 · 지표 주석 · 알림 본문).
 | 🔑 캡션 눈금(`--flo-lh-caption`)을 한 곳에서 준다. 셈은 클래스 하나(0,1,0)라 문단 규칙(`:where(.flo-main) p` · 0,0,1)을
 |    이기고, 자리마다 따로 적은 줄 높이(클래스 둘 이상)에는 진다.
 | 🚫 높이가 정해진 상자(칩 · 단계 번호 · 쪽 넘김 · 탭)는 넣지 않는다. 상자 높이가 글자 줄을 정한다.
 | 🚫 `.flo-t-label` 은 넣지 않는다. 상세 화면 이름표가 14 로 덮이는 자리(`dt`)가 있어 14/18 이 된다.
 */
:where(.flo-main) :is(.flo-tile-label, .flo-tile-cue,
    .flo-empty__reason, .flo-inline-alert__code, .flo-field__error, .flo-field__required, .flo-freshness,
    .flo-preview__envelope, .flo-sec__desc, .flo-subcard__note, .flo-subcard__empty, .flo-kpi__label, .flo-kpi__note,
    .flo-notice__body, .flo-notice__state, .flo-list-ways__help, .flo-panel__note, .flo-filtergrid__label,
    .flo-filtergrid__sub, .flo-chipbar__label, .flo-result-tools__count, .flo-result-tools__label,
    .flo-result-tools__title, .flo-campaign-pick__legend, .flo-card__handle, .flo-card__reach-lbl, .flo-card__ml,
    .flo-card__src, .flo-form-guide, .flo-form-bar__why, .flo-folder-pick__count, .flo-check,
    .flo-switch, .flo-backlog-title, .flo-filterset__help, .flo-serial) { line-height: var(--flo-lh-caption); }
/* 🔑 숫자는 자리폭을 고정한다 — 표에서 자릿수가 흔들리면 크기를 비교할 수 없다 */
.flo-t-num,
.flo-num { font-variant-numeric: tabular-nums; }

/* 🔑 화면 낭독기에만 들리는 글자 — 킷의 `.screen-ir` 과 같은 일을 한다 */
.flo-sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/*
 | 🚨 **킷 단추 안에서는 감춘 글이 자리를 되찾는다** (2026-08-31 · 이슈 #1044).
 |
 | 킷이 `.basic-btn span { position: relative; }` 을 두고 있고, 그 선택자가
 | `.flo-sr-only` 보다 **촘촘해 `position: absolute` 를 이긴다.** 그러면 감춘 글이
 | 흐름으로 돌아와 **단추 높이가 두 배가 된다**(32px 가 62px 로 그려졌다).
 | 🚫 오류는 나지 않는다 — 단추가 조용히 커질 뿐이다.
 | 🔑 그래서 자리만 되돌린다. 🚫 킷의 `.basic-btn span` 을 고치지 마라.
 */
.basic-btn .flo-sr-only { position: absolute; }

/*
 | 🆕 **작은 선 아이콘** (2026-10-11 · 이슈 #1616 · `components/icon.blade.php`).
 |
 | 🔑 글자 화살표(←, →)를 걷고 곁 메뉴와 같은 그림체(24 격자 · 선 1.7 · 둥근 끝)를 쓴다. 색은 글자색이다.
 | 🔑 문장 안에서는 글자 가운데 높이에 선다(16 그림 · 14 글자 기준 -3).
 | 🔑 단추 안에서는 `x-button` 이 글자를 `<span>` 으로 감싸므로 그 안에서 줄을 세운다.
 |    사이는 단추의 아이콘·글자 사이 한 값(8, #1565)을 따른다.
 */
.flo-icon { display: inline-block; flex-shrink: 0; vertical-align: -3px; }
.flo-btn > span:has(> .flo-icon) { display: inline-flex; align-items: center; gap: 8px; }
.flo-btn .flo-icon { vertical-align: 0; }

/* ═══ 버튼 ═══════════════════════════════════════════════════════════
 |
 | 🔑 킷의 `basic-btn` 위에 올린다 — 모양은 킷이 갖고 여기는 배치만 정한다.
 | 🚨 **비활성 버튼은 「왜」를 함께 보인다.** 이유 없이 흐리게만 두면 운영자는
 |    고장으로 읽는다. 이유는 부르는 화면이 옆에 적는다.
 */
.flo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) gap ~~6~~ → 8 · 아이콘과 글자 사이 한 값 */
/*
 | 🚨 **바로 윗줄이 `hidden` 을 이긴다** (2026-09-04 · 이슈 #1276).
 |
 | 글쓴이 규칙은 언제나 브라우저 기본값(`[hidden] { display: none }`)을 이긴다.
 | 그래서 `hidden` 을 달고 그린 단추가 **처음부터 보였다.** 대본이 실려야 보이게
 | 하려던 장치가 통째로 듣지 않았고, 대본이 없으면 **눌러도 아무 일도 안 하는
 | 단추**가 남았다 — 그 화면이 스스로 금지한 상태다.
 |
 | 🔑 **같은 자리를 짚어 이긴다** · 🚫 `!important` 로 덮지 마라.
 | 🔑 저장소가 같은 함정을 두 번 겪었다(`.form-group[hidden]` · `.flo-chipbar[hidden]`).
 |    🚫 `display` 를 주는 규칙을 새로 만들 때 이 짝을 잊지 마라.
 */
.flo-btn[hidden] { display: none; }
.flo-btn:disabled,
.flo-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* 글자형 — 바닥도 테두리도 없다. 🔑 밑줄로 누를 수 있음을 알린다 */
/* 🔻 2026-10-01 (#1546) 14/500 → 14/600 · 단추 글자 눈금(강조 본문)과 한 눈금으로 묶는다 */
.flo-btn-text {
    background: none; border: 0; padding: 0 2px; font-size: 14px; font-weight: 600;
    color: var(--flo-primary); cursor: pointer; text-decoration: none; font-family: inherit;
}
.flo-btn-text:hover { text-decoration: underline; }
/*
 | 🆕 2026-10-11 (#1616) 표 안 「제거」 · 평소에는 회색 보조 단추이고 마우스나 초점이 닿으면 빨강이 된다.
 | 🔑 지우는 일의 색(R-309)을 미리 보이되, 행마다 빨강이 늘어서 표가 경고판처럼 보이지 않게 한다.
 */
.basic-btn.line-gray.flo-btn--remove:is(:hover, :focus-visible) { color: var(--sig-fail-ink); border-color: var(--sig-fail-ink); }
/*
 | 🔻 2026-09-28 (#1511) 「위험」 단추 글자를 진한 짝으로 올렸다.
 |
 | 🚨 킷 `.basic-btn.line-red`(`common.css:78`)는 글자·테두리에 같은 `--red-color`
 |    (#ef4444)를 쓴다. 흰 바탕 3.76:1 이라 테두리(그림 요소 3:1)는 넘지만 글자
 |    (4.5:1)에는 못 미친다. 관심목록 삭제·명단 제거·템플릿 삭제 등 여섯 확인 창에서 쟀다.
 | 🔑 새 값을 짓지 않는다(R-307). 주의·중단 글자에 이미 쓰는 진한 짝
 |    `--sig-fail-ink`(#a3283a, 흰 바탕 7.19:1)를 글자에만 쓴다. 테두리는 그림
 |    요소라 킷 값 그대로 둔다. 🚫 킷 파일(`common.css`)을 고치지 마라.
 */
.basic-btn.line-red { color: var(--sig-fail-ink); }
/*
 | 🔻 2026-09-29 (#1530 · 🧑 결정) 단추 눈금. 높이 38(작은 것 32) · 글자 14/600.
 |
 | 🚨 **킷의 `.small`(38)·`.square.mini`(30)는 `line-height` 만 정한다.** 테두리
 |    1px 씩(2px)이 그 위에 더해져 **실제로는 40 · 32 로 그려진다**(#1527 H15 실측).
 |    「높이 38」은 **렌더링된 높이**를 말하므로 `line-height` 를 36 으로 낮춰 맞춘다.
 |    `.mini` 계열은 이미 30(+2)=32 라 글자 크기만 낮춘다.
 | 🔑 `.square` 와 크기 클래스(`.small`·`.mini`)가 함께 붙는 자리(`x-button`)뿐 아니라
 |    킷 화면이 직접 부르는 자리도 함께 낮아진다. 화면마다 다른 단추 크기를
 |    남기지 않는다는 것이 이번 결정의 요지다.
 */
/* 🔻 2026-10-05 (#1567) 줄 높이 ~~36~~ · ~~30~~ → 칸 높이 토큰 - 테두리 2. 그려지는 높이 40 · 32 다 */
.basic-btn.square,
.basic-btn.small { font-size: 14px; font-weight: 600; line-height: calc(var(--flo-control-h) - 2px); }
.basic-btn.mini,
.basic-btn.square.mini { font-size: 14px; font-weight: 600; line-height: calc(var(--flo-control-h-sm) - 2px); }
/*
 | 🆕 2026-10-11 (#1618 · 🧑 「조작부 6 하나로 (권장)」) 조작부 모서리는 `--flo-radius`(6) 하나다.
 |    단추 4 · 입력 6 · 닫기 8 이 한 화면에 섞여 있었다. 킷 `.basic-btn.square` 의 4 를 여기서 6 으로 맞춘다
 |    (킷과 다른 값 · R-306 표 한 줄). 🚫 킷 파일(`common.css`)을 고치지 마라.
 */
.basic-btn.square,
.basic-btn.square.gradation::before { border-radius: var(--flo-radius); }
/*
 | 🆕 2026-10-14 (#1737 · 🧑 결정 ③ 「40 단추 16 · 32 단추 12 (권장)」) 단추 좌우 안여백은 높이로 정한다.
 | 🚨 킷의 `.small` · `.large` 30 · `.square` 20 · `.mini` 14 · `.square.mini` 10 · `.medium` 10 이 화면에 섞여
 |    같은 글자 단추의 폭이 화면마다 달랐다. 125- 「격자 밖으로 남긴 값」의 「킷 큰 단추 좌우 30」은 이 줄로 폐기한다.
 | 🔑 킷 파일(`common.css`)은 고치지 않고 여기서 한 번 덮는다(R-306 표 한 줄). 최소 폭(킷 108 · 74)은 그대로다.
 | 🔻 2026-10-14 (#1737 검토) 범위를 운영자 화면(`.flo-main`)과 운영자 셸의 창으로 좁혔다. 승인은 운영자 화면만이었는데
 |    처음 적용은 범위가 없어 공개 화면(참여 폼 · 수신거부 · 시딩 대기 · 진입 · 소개)의 단추 폭까지 바꿨다.
 | 🔑 창 쪽은 `:where()` 로 감싸 셈이 `.flo-main` 쪽과 같은 (0,3,0) 이다. 뒤에 오는 자리별 규칙(결과 도구 줄 등)이 그대로 이긴다.
 */
.flo-main .basic-btn.square,
.flo-main .basic-btn.small,
.flo-main .basic-btn.large,
.flo-main .basic-btn.medium,
:where(body.flo-shell) .flo-modal .basic-btn:is(.square, .small, .large, .medium) { padding-left: var(--flo-btn-pad-x); padding-right: var(--flo-btn-pad-x); }
.flo-main .basic-btn.mini,
.flo-main .basic-btn.square.mini,
:where(body.flo-shell) .flo-modal .basic-btn.square.mini,
:where(body.flo-shell) .flo-modal .basic-btn.mini { padding-left: var(--flo-btn-pad-x-sm); padding-right: var(--flo-btn-pad-x-sm); }
/*
 | 실행 버튼을 감싸는 폼 — 🔑 **배치에서 사라진다**(`display: contents`).
 |
 | 누르면 서버로 보내야 하는 버튼은 `<form>` 안에 있어야 하는데, 그 `<form>` 이
 | 상자로 남으면 **버튼이 있던 자리의 가로 배치가 어긋난다**(머리 실행 자리·빈 상태).
 | 🚫 인라인 `style` 로 대신하지 마라 — 스타일시트가 이길 수 없다(R-307).
 */
.flo-inline-form { display: contents; }

/* ═══ 표 ═════════════════════════════════════════════════════════════
 |
 | 🔑 골격은 킷의 `.common-table` 이다. 여기는 정렬 머리·결측·선택 행만 얹는다.
 | 🔑 넘쳐도 되는 것은 표뿐이고, 표는 **자기를 감싼 칸 안에서** 넘친다.
 */
/*
 | 🆕 **감싸개가 표 안 절대 위치 요소의 기준이다** (2026-09-24 · 이슈 #1464 · R-308).
 | 🚨 직전까지 기준이 감싸개 밖이라 표 칸 안의 낭독기용 글자(`.flo-sr-only`, `position: absolute`)가
 |    잘림을 벗어나 **페이지째 가로로 밀렸다**(상품 선택 390px 에서 63~78px).
 | 🔑 도움말 풍선(`.flo-hint`)은 스스로 기준이라 달라지지 않는다 · 화면으로 전후 위치가 같음을 쟀다.
 */
.flo-table-wrap { position: relative; overflow-x: auto; max-width: 100%; background: var(--flo-card); border-radius: var(--flo-radius-card); border: 1px solid var(--flo-line);
    max-height: var(--flo-table-max-h, none);
    overflow-y: auto;
}
.flo-table-meta { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--flo-line-soft); }

/* 🔻 2026-10-01 (#1546) 10px → 11px · 머리 안여백을 본문(`.flo-td` 11/12)과 한 눈금으로 묶는다 */
.flo-th { position: sticky; top: 0; z-index: 2; background: var(--flo-line-soft); color: var(--flo-ink-2); font-weight: 600; padding: 11px 12px; white-space: nowrap; }
.flo-th--sorted { color: var(--flo-ink-1); }
.flo-th-sort,
.flo-main .flo-th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.flo-th-sort:hover { text-decoration: underline; }
/*
 | 🆕 도움말 표식이 붙은 머리 글자 묶음 (2026-10-04 · 이슈 #1562). `x-table-head-cell` 이 표식이 있을 때만 단다.
 | 🔑 글자와 표식 사이에서 줄이 바뀌지 않는다. 글자는 띄어쓰기에서 접히고, 표식은 마지막 줄 기준선에 붙는다.
 | 🔑 `inline-flex` 라 머리 칸의 `text-align` 을 그대로 따른다.
 */
.flo-th__label { display: inline-flex; align-items: last baseline; max-width: 100%; }

.flo-td { padding: 11px 12px; border-top: 1px solid var(--flo-line-soft); color: var(--flo-ink-1); vertical-align: middle; }
/* 🔻 2026-10-06 (🧑 결정 · #1572) 머리 · 값 모두 가운데. ~~`.flo-td.is-num { text-align: right; }`~~ 를 걷었다(정렬은 아래 「표」 절 한 곳) */
/*
 | 🆕 **칸 하나만 줄바꿈을 막는다** (2026-10-01 · 이슈 #1544).
 |
 | 🔻 처음에는 킷 `common.css:862` 의 `overflow-wrap: anywhere !important` 를
 |    `overflow-wrap: normal` 로 덮었다. ~~그것이 원인이라고 봤다.~~ 실측하니
 |    **효과가 없었다.** 「flodev-admin」은 여전히 하이픈에서 2줄이 됐다.
 | 🚨 **하이픈 뒤는 원래 줄을 바꿀 수 있는 자리다**(유니코드 줄바꿈 규칙).
 |    `overflow-wrap` 은 「끊을 자리가 없을 때」만 끼어드는 장치라 하이픈 자리를
 |    막지 못한다. `word-break: keep-all` 도 한글 낱말만 붙들 뿐이다. 같은 까닭으로
 |    좁은 「유형」 칸의 「어필리에이트」도 글자 중간에서 끊겼다.
 | ✅ **`white-space: nowrap` 으로 줄바꿈 자체를 막는다.** 칸이 좁으면 표가 넓어지고,
 |    표는 `.table-wrap` 안에서 가로로 넘기므로 페이지는 밀리지 않는다(R-308).
 | 🚫 **전역으로 넓히지 마라.** 긴 이름·문장 칸은 줄을 바꿔야 읽힌다. 짧은 값
 |    (아이디·유형 이름) 칸에만 이 클래스를 단다.
 */
.flo-cell-wrap-normal { white-space: nowrap !important; }
/*
 | 🚨 **결측은 `0` 이 아니다.** `0` 은 «재 봤고 0이다», `—` 는 «아직 재지 않았거나
 |    잴 수 없다» 다. 운영자가 «성과가 나빴다» 로 잘못 읽으면 판단이 뒤집힌다.
 | 🚫 결측 글리프를 화면에 직접 적지 마라 — `MissingValue` 한 곳이 정한다.
 */
.flo-missing { color: var(--flo-ink-3); }

tr[data-selected] > .flo-td { background: var(--sig-done-bg); }
/* 🔑 끝난 행은 흐리게 — 🚫 감추지 마라. 이력으로 남아야 한다 */
tr[data-closed] > .flo-td { color: var(--flo-ink-3); }

/* ═══ 배지 ═══════════════════════════════════════════════════════════
 |
 | 🔑 킷의 `cam-badge` 눈금(패딩 3/9 · 11.5px)을 그대로 쓴다.
 | 🚫 색만으로 가르지 마라 — 이름표 글자가 언제나 함께 있다.
 */
/*
 | 🔻 2026-10-05 (#1565 · 4px 격자) ~~패딩 3/9~~ → 높이 24 · 좌우 8. 줄 높이를 물려받아 배지 높이가 18.8 · 24.2 · 25.5 세 가지였다
 |    (1280 실측 · 놓인 자리의 줄 높이가 달랐다). 높이를 못 박아 한 값으로 둔다.
 */
.flo-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: 24px; line-height: 1;
    border-radius: 4px; font-size: 13px; font-weight: 600;
    letter-spacing: -.01em; white-space: nowrap;
    background: var(--sig-neutral-bg); color: var(--flo-ink-2);
}
.flo-badge[data-grade="progress"] { background: var(--sig-progress-bg); color: var(--sig-progress-ink); }
.flo-badge[data-grade="done"] { background: var(--sig-done-bg); color: var(--sig-done-ink); }
.flo-badge[data-grade="warn"] { background: var(--sig-warn-bg); color: var(--sig-warn-ink); }
.flo-badge[data-grade="fail"] { background: var(--sig-fail-bg); color: var(--sig-fail-ink); }
/*
 | 🆕 캠페인 상태 3종 (2026-08-31 · 🧑 지시 · 이슈 #1015).
 |
 | 🔑 `closed` 는 «끝났다» 이고 바탕 없는 기본값 `neutral` 은 «등급을 모르는 값» 이다.
 |    지금은 둘 다 회색이지만 **뜻이 달라 이름을 갈라 둔다.** 하나가 바뀔 때
 |    다른 하나가 조용히 따라 바뀌면 안 된다.
 */
.flo-badge[data-grade="draft"] { background: var(--sig-draft-bg); color: var(--sig-draft); }
.flo-badge[data-grade="ready"] { background: var(--sig-ready-bg); color: var(--sig-ready); }
.flo-badge[data-grade="closed"] { background: var(--sig-neutral-bg); color: var(--flo-ink-2); }

/* ═══ 트랙 레일 ══════════════════════════════════════════════════════
 |
 | 🚨 **약자를 이름표로 쓰지 마라** — `선 제 품 콘 성` 은 뜻을 짐작하게 만든다.
 |    이름표는 온전한 말만 쓴다.
 | 🔑 화면 낭독기에는 네모가 아무 뜻도 아니다 — 다섯 단계를 글자로 함께 싣는다.
 |
 | 🔻 **2026-09-09 이름표가 칸 아래로 내려왔다** (이슈 #1435 · 🧑 지시).
 |    ~~순서는 표 위 범례 한 줄이 풀어 쓴다.~~ 범례는 남지만 **순서를 혼자
 |    떠맡지 않는다** — 이름이 칸 아래에 붙는다.
 */
.flo-rail { display: inline-flex; align-items: flex-start; gap: 4px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~3~~ */
.flo-rail__cell { width: 14px; height: 8px; border-radius: 2px; background: var(--sig-neutral-bg); }
/*
 | 🔻 2026-11-04 (소규모 이슈 · 🧑 *"색깔이 왜이래??? 너 색깔에 대한 감이 없니????? 진행단계에 갑자기 갈색 나오니까 이상해."* ·
 |    🧑 *"너가 만든 이 디자인도 아니야"*) ~~칸마다 등급 색(진행 초록 · 완료 보라 · 주의 갈색 · 중단 빨강)~~ → 승인한 시안 ③의 보라 세 단계다.
 |    완료는 진한 보라, 진행 중(진행 · 주의)은 옅은 보라, 미착수는 회색 선 색, 중단은 회색 칸에 ✕ 이다. 표 머리 도움말이 같은 말을 한다.
 | 🔑 손댈 일(주의)은 레일이 아니라 「현재 상황」 배지가 말한다 · 레일은 어디까지 왔는지만 말한다.
 | 🔑 등급 값(`data-grade`)은 그대로 싣는다 · 색만 바꿨다. 이 부품은 제안 응답 관리만 쓴다.
 */
.flo-rail__cell:not([data-grade]) { background: var(--flo-line); }
.flo-rail__cell[data-grade="progress"],
.flo-rail__cell[data-grade="warn"] { background: var(--flo-violet-300); }
.flo-rail__cell[data-grade="done"] { background: var(--sig-done); }
.flo-rail__cell[data-grade="fail"] {
    background:
        linear-gradient(to top right, transparent calc(50% - 1px), var(--flo-ink-3) calc(50% - 1px), var(--flo-ink-3) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to top left, transparent calc(50% - 1px), var(--flo-ink-3) calc(50% - 1px), var(--flo-ink-3) calc(50% + 1px), transparent calc(50% + 1px)),
        var(--flo-line);
}

/*
 | 🚨 **12px 아래로 내리지 마라.** 화면은 멀쩡히 그려지고 눈으로는 «조밀하다» 로만
 |    읽혀 아무도 걸러 내지 못한다(#634 에서 10px 이 초록으로 통과했다).
 |
 | 🚨 **`white-space: nowrap` 을 빼지 마라** (2026-09-09 · 이슈 #1435 · 실측).
 |    1024px 에서 표 칸이 좁아지자 `word-break: keep-all` 만으로는 못 막고
 |    **`선`·`정` 이 세로로 갈렸다.** 그 모양은 이 이슈가 없앤 머리글자와
 |    구별되지 않는다 — **이름을 붙인 뜻이 그대로 사라진다.**
 | 🔑 대신 표가 제 껍데기 안에서 옆으로 밀린다(`.flo-table-wrap` 이 이미
 |    `overflow-x: auto`). [R-308](../../../../.claude/rules/04-design-ui.md) 이
 |    허용하는 모양이고, 값이 사라지는 잘림이 아니다.
 */
.flo-rail__label { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); white-space: nowrap; text-align: center; }

/*
 | 🔑 **이름표를 켜면 네모가 이름 폭까지 늘어난다** — 네모가 자기 이름 바로 위에
 |    서야 «몇 번째 칸인가» 를 세지 않는다.
 | 🚫 칸 폭을 고정하지 마라(R-308) — 이름이 길어지면 그만큼 넘친다.
 | 🚫 `flex` 축소를 열어 두지 마라 — 좁아지면 이름이 다시 갈린다.
 */
.flo-rail--labelled .flo-rail__track { flex: 0 0 auto; }
.flo-rail--labelled .flo-rail__cell { width: auto; align-self: stretch; }
.flo-rail--labelled .flo-rail__label { padding: 0 2px; }

/* ═══ 지표 타일 ══════════════════════════════════════════════════════ */
.flo-tile {
    display: flex; flex-direction: column; gap: 8px; padding: 16px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 6 · 16px 18px~~ */
    background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
}
.flo-tile-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--flo-ink-2); } /* 🔻 2026-10-05 (#1565) gap ~~6~~ → 8 */
.flo-tile-value.is-empty { color: var(--flo-ink-3); font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); } /* 🔻 2026-10-14 (#1737) ~~20~~ → 지표 숫자 26/600/32 */
.flo-tile-cue { font-size: 13px; color: var(--flo-ink-3); }

/* ═══ 카드·요약 ══════════════════════════════════════════════════════
 |
 | 🔻 **2026-08-26 (#670) 참조의 지표 행 모양으로 올렸다.** 라벨은 작게, 값은 크게.
 |    직전에는 라벨과 값이 거의 같은 크기라 **무엇이 값인지 눈에 안 들어왔다.**
 | 🔑 참조는 값 자리를 넉넉히 준다 — 한눈에 읽히는 것이 이 판의 목적이다.
 */
.flo-card { background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card); }
/*
 | 🔻 2026-10-09 (#1602 후속 · 🧑 *"떨어진 카드 (권장)"*) 붙은 요약 띠(`flo-summary`)의 규칙을 걷었다. 두 화면(캠페인 요약 ·
 |    제안 응답 관리)이 떨어진 지표 칸(`flo-kpis` · `flo-kpi`)으로 옮겨 쓰는 곳이 없다. 걷은 규칙과 그 까닭:
 |    ~~`.flo-summary { display: grid; repeat(6, …) }`~~ · ~~`.flo-main .flo-card.flo-summary { display: grid }`~~(#1133 이름 마디) ·
 |    ~~`.flo-main .flo-card.flo-summary:hover`~~(누를 수 없는 띠) · ~~`.flo-summary__cell { … text-align: center; word-break: keep-all }`~~(#1527 H17) ·
 |    ~~`.flo-summary__cell > span:first-child / :last-child / .flo-missing`~~(26/600) · ~~`.flo-summary__cell > span.flo-summary__value--text`~~(#1536 16/700).
 | 🔑 남은 뜻은 지표 칸 쪽이 진다 · 낱말 단위 접기는 `.flo-kpis--summary .flo-kpi`, 글 값 16/700 은 `.flo-kpi__value--text`, 26/600 은 `.flo-kpi__value`.
 */
/*
 | 🆕 2026-10-03 (#1558 B5) 글 값의 낱말 하나는 줄을 넘겨 끊지 않는다.
 | 🚨 위 `overflow-wrap: normal` 로는 막히지 않았다. 브라우저는 하이픈 뒤를 원래 줄을 바꿀 수 있는 자리로 본다.
 |    1280 에서 칸 폭 112px 에 기간 「- ~ 2026-10-31」이 「- ~ 2026-10-」 · 「31」 로 끊겼다(11차 점검 B5).
 | 🔑 부품이 글 값을 빈칸 단위 낱말로 나눠 이 클래스로 감싼다. 줄은 빈칸에서만 바뀐다.
 | 🔻 2026-10-04 (#1558 B5 재점검) `white-space: nowrap` 에서 한 덩어리 상자(`inline-block`)로 바꿨다.
 |    nowrap 은 빈칸 없는 긴 낱말(긴 상품명)도 끝까지 한 줄로 밀어 칸 밖으로 넘쳤다(R-308).
 | 🔑 한 덩어리 상자는 칸 한 줄에 들어가면 통째로 다음 줄로 넘어가 안에서 끊기지 않는다(날짜).
 |    칸 한 줄보다 길 때만 `max-width: 100%` 에 걸려 안에서 접히고, `anywhere` 가 아무 자리에서나 접게 한다.
 */
.flo-summary__word { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
/*
 | 🆕 2026-10-01 (#1536) 숫자 둘의 칸(「발송 · 수락」). 낱말은 16 굵게, 숫자는 위 26/600 을 그대로 받는다.
 | 🔑 짝(낱말+숫자)은 한 덩어리로 줄을 넘긴다 · 칸이 좁으면 짝 단위로 두 줄이 된다.
 */
/* 🔻 2026-10-06 (#1578) 짝은 「숫자 위 · 낱말 아래」의 작은 기둥 둘이다. 낱말은 덧말 눈금(13/18)이라 다른 칸의 덧말 줄과 높이가 맞는다.
   ~~`.flo-summary__value--pair { … align-items: baseline; column-gap: 12px; row-gap: 2px; }`~~ ·
   ~~`.flo-summary__pair { display: inline-flex; align-items: baseline; gap: 4px; }`~~ · ~~`.flo-summary__pair-word { font-size: 16px; font-weight: 700; }`~~
   🔑 DOM 은 낱말 → 숫자 순서다(읽는 순서). 그림만 `column-reverse` 로 숫자를 위에 둔다. */
/* 🔻 2026-10-12 (#1642) ~~`.flo-summary__pair` · `.flo-summary__pair-word` 숫자 위 · 낱말 아래 기둥 둘~~ 을 걷었다(쓰는 곳 0). 「발송 / 수락」 한 값은 아래 지표 칸 규칙이다 */
/* 🔻 2026-10-12 (#1642) 아래 두 줄 규칙은 요약 칸에서 한 줄 말줄임으로 덮인다(`.flo-kpis--summary .flo-kpi__value--text .flo-summary__text`) · 기간 범위만 두 줄로 접힌다(`flo-kpi__value--range`).
   🆕 2026-10-06 (#1578) 글 값은 두 줄까지 · 넘으면 말줄임이고 전체 글은 `title` 에 남는다(R-308 「값에 닿을 수 있다」) */
.flo-summary__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/*
 | 🔻 2026-10-09 (#1602 후속) 붙은 띠 전용 규칙을 더 걷었다(쓰는 곳 0). 덧말은 지표 칸의 `flo-kpi__note` 가 진다.
 |    ~~`.flo-summary__caption`~~(#1578 덧말 13/18) · ~~`.flo-summary__cell > .flo-summary__value--text { padding-top: 7px }`~~ →
 |    `.flo-kpi__value--text` 가 같은 7 을 갖는다 · ~~`.flo-summary__cell + .flo-summary__cell` 칸 사이 선~~ ·
 |    ~~1024 이하 세 칸 접기 · 둘째 줄 가로줄(#1578)~~ → `.flo-kpis[data-cols="6"]` 1200 이하 세 칸 ·
 |    ~~640 이하 한 칸 한 줄 짜임(#1536)~~ → 640 이하 한 줄 요약(`flo-kpis-line`, #1594) ·
 |    ~~`.flo-summary.flo-summary--4` 네 칸 띠(#1558 B6)~~ → `.flo-kpis[data-cols="4"]`.
 */
/* 🔻 2026-10-06 (🧑 결정 · #1572) 「표본 부족」 둘째 줄을 숫자 옆 작은 점(`flo-sample-mark`)으로 바꿔 아래 줄을 걷었다.
   ~~`.flo-summary__note { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--flo-ink-2); }`~~ */
/*
 | 🆕 2026-10-06 (#1571) 시딩 제품 진행 띠(제안 응답 관리). 같은 띠의 두 칸이다 · 주문 수 | 단계 칩 줄.
 | 🔑 1024 이하의 세 칸 접기는 받지 않는다(두 칸뿐이다). 640 이하는 다른 띠와 같이 한 칸이 한 줄이다.
 | 🔑 칩은 쿠폰 발급의 배송 배지(`flo-badge` 24 높이) + 인원(14/20 · 숫자 폭 고정)이다. 칩 사이 화살표는 낭독하지 않는다.
 | 🔑 칩은 칩 단위로 줄을 넘긴다(칩 안에서 끊기지 않는다 · R-308).
 */
/* 🔑 주문 칸은 글자 폭만 받는다(`auto`). 1024 에서 1:3 으로 나누면 칩 줄이 498px 이라 두 줄로 접혔다(실측). */
/* 🔻 2026-10-09 (#1602 후속) ~~`.flo-main .flo-card.flo-summary.flo-seeding-progress { … }`~~ → `.flo-main .flo-kpis.flo-seeding-progress`(지표 칸 둘) */
.flo-seeding-progress__stages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 0; padding: 0; list-style: none; }
.flo-seeding-progress__stage { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* 🔑 화살표는 앞 칩의 꼬리다. 줄이 접히면 줄 끝에 남아 「다음 줄로 이어진다」로 읽힌다(줄 머리에 홀로 서지 않는다). */
.flo-seeding-progress__stage:has(+ .flo-seeding-progress__stage:not(.flo-seeding-progress__stage--aside))::after { content: "→" / ""; margin-left: 4px; color: var(--flo-ink-3); font-size: 14px; line-height: var(--flo-lh-ui); }
.flo-seeding-progress__stage--aside { padding-left: 12px; border-left: 1px solid var(--flo-line); }
/* 🔑 단위 「건」이 지표 줄 높이(32)를 받으면 기준선이 밀려 칸이 36 이 되고 띠가 위 비율 띠보다 4.6px 높았다(실측). */
/* 🔻 2026-10-06 (#1585) ~~`.flo-seeding-progress .flo-kpi__unit { line-height: 1; }`~~ 를 걷었다. 같은 보정이 이제 모든 지표 칸의 `.flo-kpi__unit` 에 있다 */
.flo-seeding-progress__count { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); font-variant-numeric: tabular-nums; }
/* 🔻 2026-10-09 (#1602 후속) 640 이하 띠 규칙 ~~`.flo-card.flo-summary.flo-seeding-progress` 한 칸 · `.flo-summary__cell.flo-seeding-progress__flow` 세로~~ 를 걷었다.
   지표 칸은 700 이하 한 칸 접기(`.flo-kpis`)를 받고 칸 안은 이미 왼쪽 정렬 · 칩 왼쪽 시작이다 */
@media (max-width: 640px) {
    .flo-seeding-progress__stages { justify-content: flex-start; }
}

/* ═══ 빈 상태 ════════════════════════════════════════════════════════
 |
 | 🚫 «죄송합니다» 를 쓰지 마라 — 왜 비었는지와 다음에 무엇을 하면 되는지만 적는다.
 | 🔑 «하나도 없다» 와 «조건에 맞는 것이 없다» 는 다른 사실이다. 부르는 쪽이 가른다.
 */
.flo-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px; text-align: center; } /* 🔻 2026-10-05 (#1565) gap ~~10~~ → 8 */
/*
 | 🆕 2026-10-06 (#1592 후속) 운영자 오류 화면의 표식 · 공개 오류 화면(`flo-public.css` 의 `.flo-public__mark`)과 같은 값이다.
 |    셸은 `flo-public.css` 를 싣지 않아 여기 둔다. 44 상자 · 반경 12 · 붉은 단계(공개 오류 화면이 404 · 403 · 500 모두 붉다).
 |    아래 4 + 사이 8 = 문장까지 12.
 */
.flo-empty > .flo-public__mark { width: 44px; height: 44px; border-radius: 12px; margin: 0 0 4px; display: grid; place-items: center; }
.flo-empty > .flo-public__mark[data-grade="fail"] { background: var(--sig-fail-bg); color: var(--sig-fail-ink); }
.flo-empty > .flo-public__mark svg { stroke: currentColor; }
.flo-empty__reason { font-size: 13px; color: var(--flo-ink-3); }
/*
 | 🆕 2026-10-11 (#1617 · R-312) 빈 상태의 위계 · 아이콘 32(옅은 먹색) → 제목 16/600 → 까닭 14 → 다음 행동 단추.
 | 🔑 아이콘 아래 4 + 사이 8 = 제목까지 12 (위 오류 표식과 같은 간격). 다음 행동 단추는 까닭에서 8 더 띄운다.
 | 🔻 까닭 글자는 13 → 14 다. 제목과 까닭이 모두 13~14 라 한 덩어리로 읽혔다. 색(--flo-ink-2)은 아래 대비 규칙이 그대로 준다.
 */
.flo-empty__icon { width: 32px; height: 32px; margin-bottom: 4px; color: var(--flo-ink-3); flex: none; }
.flo-main .flo-empty__title { margin: 0; font-size: 16px; font-weight: 600; line-height: var(--flo-lh-card); color: var(--flo-ink-1); word-break: keep-all; }
.flo-main .flo-empty__reason { font-size: 14px; line-height: var(--flo-lh-ui); word-break: keep-all; }
.flo-main .flo-empty__reason + div,
.flo-main .flo-empty__title + div { margin-top: 8px; }

/* ═══ 알림 ═══════════════════════════════════════════════════════════
 |
 | 🔑 **면을 옅게 물들이고 제목을 진한 같은 색으로 쓴다.** 킷이 상태를 표현하는
 |    방식(`cam-badge` 의 틴트 + 진한 글자)과 같은 언어다.
 | 🚫 **한쪽 옆에 굵은 색 줄을 붙이지 마라.** 킷 어디에도 없는 모양이고,
 |    같은 색을 이미 배지가 쓰고 있어 화면에 상태 표기가 두 벌이 된다.
 | 🚫 색만으로 등급을 가르지 않는다 — 굵은 이름표가 언제나 함께 있다.
 */
.flo-inline-alert {
    display: flex; gap: 12px; padding: 12px 16px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~14px 16px~~ */
    background: var(--sig-neutral-bg); border-radius: var(--flo-radius);
}
/* 🆕 2026-10-14 (#1737 · 묶음 A) 카드 사이(회색 바탕)에 홀로 선 알림은 카드와 같은 내용선(20 · 860 이하 16)에서 글이 시작한다. 캠페인 요약에서 알림 글만 4px 왼쪽에 섰다 */
.flo-main :is(.cont-sec:is(.flo-stack, :has(> .flo-sec)), .cont-wrap > .section) > .flo-inline-alert { padding-left: var(--flo-card-inset); padding-right: var(--flo-card-inset); }
/* ── 방금 한 일의 결과는 잠시 뒤 비켜 준다 (2026-08-31 · 🧑 · 이슈 #1006) ──
 |
 | 🧑 *"해당 표시는 점점 사라지게 해야함. 지금은 그대로 유지 됨."*
 |
 | 🔻 **#970 이 «🚫 저절로 사라지게 하지 마라» 로 정한 것을 사용자가 뒤집었다.**
 |    🚫 그 문장을 근거로 되돌리지 마라. 되돌리려면 **사용자의 정정 지시**가 있어야 한다.
 | 🚫 **#970 이 넣은 떠오르는 동작은 지우지 마라** — 그것은 «방금 생긴 것»으로 읽히게
 |    하는 장치이고 이것은 «다 읽었으면 비켜라» 다. 둘은 반대가 아니다.
 |
 | 🔑 **자리까지 걷는다.** 흐려지기만 하면 **빈 칸이 남아** 화면이 어색해진다.
 |    그래서 흐려진 **뒤에** 높이·여백·테두리를 0 으로 만든다.
 | 🚨 **`max-height` 에 시작값이 있어야 움직인다** — `none` 에서는 애니메이션이 안 돈다.
 |    🔑 이 알림은 한두 줄짜리라 400px 이 넉넉하다. 🚫 긴 본문에 붙이지 마라: 잘린다.
 | 🚫 자바스크립트로 지우지 마라 — 묶음이 화면에 실리지 않는다(#356).
 */
/*
 | 🔻 **2026-08-31 (#1007) 높이를 걷는 장면을 뺐다.**
 |    화면에 붙여 띄우면서 **자리를 차지하지 않게 됐다** — 걷을 자리가 없다.
 | 🔑 **살짝 내려가며 흐려진다** — 그냥 사라지는 것보다 «비켜 준다» 로 읽힌다.
 */
@keyframes flo-inline-alert-out {
    from { opacity: 1; transform: translate(var(--flo-toast-x), 0); }
    to   { opacity: 0; transform: translate(var(--flo-toast-x), 8px); visibility: hidden; }
}
/*
 | 🔻 **2026-08-31 (#1007) 화면에 붙여 띄운다.**
 |
 | 🚨 **보던 자리를 지키게 하자 알림이 화면 밖이 됐다.** 하트는 목록 아래쪽에서도
 |    누르는데 알림은 **결과 판 맨 위**에 뜬다. 자리를 지키면 보이지 않는다.
 | ⚠️ **하트 색만으로는 부족하다고 이미 정했다**([#919](../../../../agent/docs/plan/08-influencer-search.md)) —
 |    *"🚫 조용히 되돌아가지 마라: 하트 색만 바뀌면 잘못 눌렀는지도 모른다."*
 |    제거는 되돌릴 수 없어 더 그렇다.
 |
 | 🔑 **자리를 차지하지 않는다** — 목록이 밀리지 않으니 사라질 때 **글이 출렁이지 않는다.**
 |    그래서 높이를 걷는 장면도 필요 없어졌다(흐려지기만 하면 된다).
 | 🚫 **오류와 상태 안내는 띄우지 마라** — 그 둘은 **자리에 남아 계속 보여야** 한다.
 |    표시(`transient`)를 붙이는 것은 부르는 쪽이고, 그 규칙은 부품 머리말에 있다.
 */
/*
 | 🔻 **2026-08-31 가로로 넓혔다** (🧑 *"박스 사이즈 좀 더 가로로 길게 띄울 것.
 |    지금 존재감이 너무 없어보임. 우측 상단 또는 아래 가운데가 나을 것 같음."*).
 |
 | 🚨 **`max-content` 였다.** 글이 짧으면 상자도 짧아져 **화면 아래 구석의 작은 조각**으로
 |    보였다. 알림은 **글 길이에 따라 크기가 달라질 것이 아니라 늘 같아야** 눈에 익는다.
 | 🔑 **자리는 아래 가운데를 유지한다** — 🧑 가 「우측 상단 또는 아래 가운데」를 골랐고,
 |    아래 가운데는 **표 머리와 겹치지 않는다.**
 | 🚫 좁은 창에서 넘치지 않게 `min()` 을 걷지 마라 (R-308).
 */
/*
 | 🔻 **2026-08-31 표 가운데로 맞췄다** (🧑 *"박스는 테이블의 중앙으로 할 것.
 |    지금 좌측으로 약간 쏠려있음"*).
 |
 | 🚨 **`left: 50%` 는 화면 가운데지 표 가운데가 아니다.** 왼쪽에 곁 메뉴가 있어
 |    본문은 그만큼 오른쪽에서 시작한다 — 실측으로 표 가운데보다 **116px 왼쪽**이었다.
 | 🔑 **곁 메뉴 폭의 절반만큼 오른쪽으로 민다.** 본문 가운데가 곧 표 가운데다
 |    (`.cont-wrap` 이 본문 안에서 가운데 정렬이므로).
 | 🚫 `100vw` 로 계산하지 마라 — 세로 스크롤바 폭이 섞여 몇 픽셀 어긋난다.
 |
 | 🔑 **밀어 둔 값을 이름으로 둔다**(`--flo-toast-x`) — 사라지는 장면도 같은 값을 쓴다.
 |    🚨 안 그러면 애니메이션이 시작하는 순간 **화면 가운데로 튄다.**
 */
.flo-inline-alert--transient {
    --flo-toast-x: calc(-50% + var(--flo-sidebar-w) / 2);

    position: fixed; z-index: 1200;
    left: 50%; bottom: 32px; transform: translateX(var(--flo-toast-x));
    width: min(680px, calc(100vw - 48px));
    padding: 16px 24px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~18px 24px~~ */
    box-shadow: 0 12px 32px rgba(25, 31, 40, .18);
    animation: flo-inline-alert-out 700ms ease 2.3s both;
}
/* 🔑 곁 메뉴가 위로 눕는 폭에서는 밀 것이 없다 (셸의 860px 규칙과 같은 자리) */
@media (max-width: 860px) {
    .flo-inline-alert--transient { --flo-toast-x: -50%; }
}
/* 🔑 제목을 한 단계 키운다 — 넓어진 상자에서 본문과 구분이 흐려진다 */
/* 🔻 2026-10-01 (#1546) 15px → 16/700 · 절 제목 눈금(`.flo-t-section`)과 한 눈금으로 묶는다 */
.flo-inline-alert--transient .flo-inline-alert__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); } /* 🔻 2026-10-05 (#1567 독립 검토) 16/24 · 문단 22 를 받지 않는다 */

/* ── 띄운 알림은 반투명이다 (2026-08-31 · 🧑 지시) ────────────────────
 |
 | 🧑 *"박스는 반투명으로 할 것. 지금 너무 테이블을 다 가림"*
 |
 | 🔑 **바탕만 비친다. 글자는 그대로 진하다.** 글자까지 흐리면 **읽으라고 띄운 것을
 |    읽을 수 없다** — 🚫 `opacity` 로 상자 전체를 흐리지 마라.
 | 🔑 **값은 신호색 토큰에서 만든다**(`color-mix`) — 🚫 색을 새로 적지 마라(R-306).
 |    등급이 늘면 아래에 한 줄만 더한다.
 | 🚨 **등급 규칙이 더 세다**(`.flo-inline-alert[data-grade=…]`). 그래서 여기도
 |    **등급을 함께 적어야** 이긴다. 🚫 등급 없이 `background` 만 적지 마라 — 안 먹는다.
 | 🔑 **살짝만 흐린다**(`blur(3px)`) — 뒤의 표가 무엇인지는 보이되 알림 글자가 흔들리지
 |    않는 선이다. 🚫 세게 흐리면 «가린다» 는 지적이 그대로 남는다.
 */
.flo-inline-alert--transient { backdrop-filter: blur(3px); }
.flo-inline-alert--transient[data-grade="progress"] { background: color-mix(in srgb, var(--sig-progress-bg) 78%, transparent); }
.flo-inline-alert--transient[data-grade="done"] { background: color-mix(in srgb, var(--sig-done-bg) 78%, transparent); }
.flo-inline-alert--transient[data-grade="warn"] { background: color-mix(in srgb, var(--sig-warn-bg) 78%, transparent); }
/* 🔑 띄운 알림은 자리를 안 먹으므로 화면이 준 바깥 여백도 쓰지 않는다 */
.flo-main .flo-inline-alert--transient { margin: 0; }
/*
 | 🚨 **움직임을 줄이도록 설정한 사람에게는 사라지지 않는다.**
 |    읽을 시간이 더 필요한 사람에게서 안내를 뺏지 않는다. 셸의 알림도 같은 방식이다.
 | 🚫 `opacity` 만 되돌리지 마라 — 애니메이션 자체를 꺼야 자리가 남는다.
 */
@media (prefers-reduced-motion: reduce) {
    .flo-inline-alert--transient { animation: none; }
}

.flo-inline-alert[data-grade="progress"] { background: var(--sig-progress-bg); }
.flo-inline-alert[data-grade="done"] { background: var(--sig-done-bg); }
.flo-inline-alert[data-grade="warn"] { background: var(--sig-warn-bg); }
.flo-inline-alert[data-grade="fail"] { background: var(--sig-fail-bg); }
.flo-inline-alert[data-grade="progress"] .flo-inline-alert__title { color: var(--sig-progress-ink); }
.flo-inline-alert[data-grade="done"] .flo-inline-alert__title { color: var(--sig-done-ink); }
.flo-inline-alert[data-grade="warn"] .flo-inline-alert__title { color: var(--sig-warn-ink); }
.flo-inline-alert[data-grade="fail"] .flo-inline-alert__title { color: var(--sig-fail-ink); }
.flo-inline-alert__title { font-size: 14px; font-weight: 600; color: var(--flo-ink-1); }
.flo-inline-alert__body { font-size: 14px; color: var(--flo-ink-2); margin-top: 4px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~3~~ */
/*
 | 🆕 2026-10-06 (#1587) 읽는 글 한 줄은 720 까지입니다(한글 본문 약 50자 · R-202 의 660~720).
 |    판 폭(1280 에서 886 · 920)만큼 늘어난 안내 줄이 800~885 로 한 줄에 60자를 넘겼다(명단 제거 안내 · 0원 상품 설명 · 콘텐츠 점검 알림).
 | 🔑 상자는 그대로 판 폭이고 글만 접힙니다. 셈 0(`:where`)이라 자리마다 따로 둔 폭 규칙이 늘 이깁니다.
 | 🔑 가운데 정렬 글(`text-center`)은 뺍니다. 상한이 걸리면 글 덩어리가 왼쪽으로 쏠립니다.
 | 🚫 `ch` 로 적지 마라(R-308 · 한글은 절반 폭이 됩니다).
 */
/* 🔻 2026-10-14 (#1739 · 묶음 N) ~~720~~ → 560 · 도움말(`flo-field__help` · `flo-area__hint`)도 함께. 720 에서도 한 줄 45자를 넘는 문단이 12곳(최대 63자)이었다. 560 은 14 글자 약 40자 · 13 글자 약 43자다(폼 열 상한 `--flo-form-col-max-w` 와 같은 값) */
:where(.flo-main .flo-inline-alert__body),
:where(.flo-main :is(.flo-field__help, .flo-area__hint):not(.flo-preview__screen *)),
:where(.flo-main :is(.cont-sec, .flo-subcard, .flo-sec) p:is(.flo-t-caption, .flo-t-body):not(.text-center)) { max-width: var(--flo-form-col-max-w); }
/* 🔑 알림 본문은 할 일 단추 · 닫기와 한 줄에 서는 flex 칸이라 폭 규칙이 늘 이겨 상한이 걸리지 않았다(정산 명세 59자). 이 줄만 셈 (0,2,0) 이다(위 `:where` 묶음은 0). 자리마다 폭을 정한 더 무거운 규칙은 그대로 이긴다 */
.flo-main .flo-inline-alert__body { max-width: var(--flo-form-col-max-w); }
.flo-inline-alert__code { font-size: 13px; color: var(--flo-ink-3); margin-top: 4px; font-variant-numeric: tabular-nums; } /* 🔻 2026-10-05 (#1565) ~~5~~ */
/*
 | 🆕 **알림의 할 일 단추는 상자 오른쪽에 선다** (2026-10-11 · 이슈 #1616).
 |
 | 🔑 실패 알림 + 재시도 한 벌이다 · 작은 보조 단추(32)가 오른쪽 세로 가운데에 선다(요약 허브 「쿠폰 생성 재시도」 · 상품 선택 「재시도」).
 |    직전까지 이 자리에 규칙이 없어 단추가 글 바로 뒤에 붙었다.
 | 🔑 좁은 창(640 이하)에서는 줄을 바꿔 글 아래 왼쪽에 선다 · 글이 한 글자 폭으로 눌리지 않게(R-308).
 */
.flo-inline-alert__action { margin-left: auto; flex-shrink: 0; align-self: center; }
@media (max-width: 640px) {
    .flo-inline-alert:has(> .flo-inline-alert__action) { flex-wrap: wrap; }
    .flo-inline-alert__action { margin-left: 0; }
}

/* ═══ 폼 ═════════════════════════════════════════════════════════════
 |
 | 🚨 **폼 오류는 입력칸에 연결한다.** 연결이 없으면 화면 읽기 도구를 쓰는 사람은
 |    오류 문구가 화면 어딘가에 있어도 **어느 칸이 틀렸는지 모른다.**
 | 🚫 필수를 별표만으로 알리지 마라 — 별표는 낭독기에서 뜻이 전달되지 않는다.
 */
/*
 | 🆕 **안쪽 칸은 껍데기 폭을 채운다** (2026-08-27 · 이슈 #968).
 |
 | 🚨 **`align-items` 를 `start` 로 되돌리지 마라.** 이 규칙은 **세로 방향 flex** 이고,
 |    세로 flex 에서 `align-items` 가 정하는 것은 **가로 폭**이다. `start` 는
 |    «안쪽 칸을 내용 길이만큼만» 이라는 뜻이 되어, 칸에 적은 `width: 100%` 가 듣지 않고
 |    **글을 칠수록 편집기가 옆으로 넓어진다**(실측 371px → 593px).
 |
 | 🚫 **`grid-template-columns` 를 다시 넣지 마라** — flex 규칙에서는 아무 일도 하지
 |    않는다. 커밋 `fee72026`(이슈 #812)이 두 줄을 함께 넣었고 그중 하나가 위 결함을
 |    만들었다. 두 줄 다 grid 를 쓰던 시절의 값이다.
 |
 | ✅ **검사 203 이 되돌아가는 것을 막는다** — 세로 flex 규칙에 grid 전용 속성이
 |    들어오면 실패한다.
 | ⚠️ **`.flo-field__label` 의 `padding-top` 은 이 결함과 별개다** — 라벨과 칸의 세로
 |    맞춤이다. 🚫 함께 지우지 마라.
 */
/* 🔻 2026-10-05 (#1565 · 4px 격자) 이름표와 칸 사이 ~~6~~ → 8 */
.flo-field { display: flex; flex-direction: column; gap: 8px; max-width: var(--flo-form-col-max-w);
    align-items: stretch;
    margin-bottom: 12px;
}
/*
 | 🆕 **긴 글을 쓰는 칸은 상한에서 뺀다** (2026-08-27 · 이슈 #969).
 |
 | 🧑 *"템플릿 본문 작성 화면이 너무 작음 … 화면 크기 최대로 고정할 필요 있음."*
 |
 | 🔑 상한(`--flo-form-col-max-w`)은 **짧은 값 칸**을 위한 것이다 — 이름·용도처럼 몇
 |    글자를 넣는 칸이 화면 폭만큼 늘어나면 눈이 줄을 놓친다. 그런데 **본문은 메일 한 통
 |    전체**라 같은 상한을 받으면 좁다.
 | 🚫 **상한값 자체를 키우지 마라** — 짧은 값 칸이 함께 늘어난다.
 | 🚫 **모든 칸에 붙이지 마라** — 붙이는 자리는 «긴 글을 쓰는 칸» 하나다.
 */
.flo-field--longform { max-width: none; }
/* 🆕 2026-10-06 (#1587 B) 메모 부품(`x-influencer-notes`)의 적은 메모 목록. 새 메모 칸 묶음과 선 하나로 가른다(16 · 선 · 16, 판 머리와 같은 눈금) */
.flo-main .flo-notes__list { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line); }
.flo-field__label { display: flex; align-items: center; gap: 8px;
    padding-top: 10px; /* 🔻 2026-10-05 (#1567) ~~9~~ · 이름표 한 줄(20)을 칸 40 의 가운데에 둔다((40 - 20) / 2) */
    word-break: keep-all;
}
/*
 | 🔻 2026-09-29 (#1530 독립 검토) 폼 이름표가 세 모양이었다. 캠페인 기본 정보 15px ·
 |    이 자리(`x-form-field` 가 `.flo-t-label` 을 함께 붙인다) 13/600 · 연동 설정의
 |    `w-24` 이름표 14/400. 셋을 14/600(T3) 하나로 모은다.
 | 🔑 **`.flo-t-label` 을 그대로 고치지 않는다.** 그 클래스는 상세 화면의 짧은 이름표(주문
 |    귀속 상세 · 참여 폼 질문)에도 쓰이고, 거기는 13px 이 맞다. 폼 이름표 자리에서만 얹는다.
 */
.flo-field__label.flo-t-label { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); } /* 🔻 2026-10-05 (#1567) 14/20 · `.flo-t-label`(13/18)의 줄 높이를 받지 않는다 */
/* 🆕 2026-10-20 (#1841) 이름표 상자 안의 `<label>` 은 상자의 굵기를 받는다 · 도움말 단추를 `<label>` 밖에 두려고 상자를 div 로 감싼 자리(정산 명세 입력 칸 · #1839)에서 이름이 400 으로 덮여 가늘어졌다 */
.flo-field__label > label { font-weight: inherit; }
.flo-field__required { font-size: 13px; font-weight: 600; color: var(--sig-fail-ink); }
/*
 | 🆕 2026-10-06 (#1588 · 🧑 "이렇게 필수항목도 가시성을 높혀야할듯 위치도 정렬이 안맞는 느낌이고")
 |    운영자 화면의 필수 표시는 작은 바탕 표(높이 20 · 13/600 · 옅은 빨강 바탕)이고, 14/600 이름표 한 줄(20)의 가운데에 선다.
 |    직전에는 빨간 글자(캠페인 기본 정보 · 템플릿 · 연동 설정)와 회색 캡션(인플루언서 정보 등록)이 섞였고,
 |    글자 기준선에 앉아 이름표보다 1px 아래로 처졌다.
 | 🔑 「선택」 표시는 두지 않는다. 운영자 폼 여섯 벌 중 「선택」을 적은 것은 등록 창 하나였다(필수만 표시가 다수 · 125- 「필수 표시」).
 | 🔑 화면 낭독기: 표 자체는 `aria-hidden` 이고 입력 칸이 `aria-required="true"` 로 필수를 알린다. 두 번 읽지 않는다.
 | ⚠️ `.flo-main` 아래에서만 바탕 표다. 공개 화면(참여 폼)은 글자 모양 그대로다.
 | 🔻 (#1588 검토) 운영자 화면 안의 참여 페이지 미리보기(`.flo-preview__screen` · 위저드 4단계 · 입력 폼 수정 · 템플릿 수정)도
 |    공개 화면과 같은 빨간 글자다. 미리보기는 실제 공개 화면과 같아야 한다.
 */
.flo-main .flo-field__required:not(.flo-preview__screen *) {
    display: inline-flex; align-items: center; flex: none;
    height: 20px; padding: 0 6px; border-radius: 4px;
    font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption);
    color: var(--sig-fail-ink); background: var(--sig-fail-bg);
    vertical-align: middle;
}
.flo-main :is(.flo-field__label, .form-label, .flo-modal__field-name):has(> .flo-field__required):not(.flo-preview__screen *) {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
}
/* 🆕 (#1588 검토) 필수 표 옆 도움말 표식 「i」는 표 가운데에 맞춘다. 글자 기준선 보정(`top`)과 왼쪽 4 는 flex 사이 8 이 대신한다 */
.flo-main :is(.flo-field__label, .form-label, .flo-modal__field-name):has(> .flo-field__required):not(.flo-preview__screen *) > .flo-hint { top: 0; margin-left: 0; }
/*
 | 🔑 **틀린 칸 자체를 표시한다.** 껍데기 옆에 색 줄을 두르면 «어느 칸이» 가 흐려지고,
 |    칸이 여럿인 자리에서는 어디를 고쳐야 할지 알 수 없다.
 | 🚫 색만으로 알리지 마라 — 아래 오류 문구가 언제나 함께 있고 `aria-describedby` 로 이어진다.
 */
.flo-field__control.has-error input,
.flo-field__control.has-error select,
.flo-field__control.has-error textarea { border-color: var(--sig-fail); }
/*
 | 🆕 **오류 칸 표시는 `aria-invalid="true"` 하나로 건다** (2026-10-01 · 이슈 #1541 · R-314 ③).
 |
 | 🚨 직전까지 칸 표시는 껍데기 클래스(`.has-error` · `.flo-field--error`)를 단 자리에만 있었다.
 |    대부분의 화면은 칸에 `aria-invalid` 만 달아 **테두리가 그대로**였고, 위저드 ① 은 빈 칸이
 |    어디인지 화면이 짚지 못했다.
 | 🔑 **화면은 속성만 단다.** 낭독기가 읽는 표시와 눈에 보이는 표시가 같은 한 자리에서 나온다.
 |    🚫 화면마다 오류용 클래스를 새로 짓지 마라.
 | 🔑 `:not()` 둘은 무게를 올리는 몫도 한다(0,3,1). 킷과 공개 화면의 입력 규칙(0,2,1)을
 |    `!important` 없이 이긴다.
 | 🔑 라디오·체크박스는 테두리가 없어 바깥 선으로 짚는다. 공개 화면의 선택 카드는
 |    `flo-public.css` 가 카드 테두리로 짚는다.
 | 🚫 색만으로 알리지 마라. 칸 아래 오류 문구가 함께 있고 `aria-describedby` 로 이어진다.
 */
input[aria-invalid="true"]:not([type="radio"]):not([type="checkbox"]):not([disabled]),
select[aria-invalid="true"]:not([hidden]):not([disabled]),
textarea[aria-invalid="true"]:not([hidden]):not([disabled]) { border-color: var(--sig-fail); }
/*
 | 🆕 2026-10-01 (#1541 검토) 편집기는 원래 칸(textarea)을 감추고 자기 칸에 표시를 옮긴다(`flo-editor.js` `nameFrom`).
 |    감춘 칸에 건 테두리는 보이지 않으므로 테두리를 그리는 바깥 틀(`.note-frame`)이 짚는다.
 */
.note-editor.note-frame:has(.note-editable[aria-invalid="true"]) { border-color: var(--sig-fail); }
input[type="radio"][aria-invalid="true"],
input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--sig-fail); outline-offset: 2px; }
/*
 | 🆕 **도움말은 읽히는 굵기까지만 올린다** (2026-08-27 · 이슈 #907).
 |
 | 🧑 사용자 지적 — *"안내문구는 눈에 띄게 할 것. (너무 튀지는 않을 것)"*
 |
 | 🚨 직전까지 **12px · `--flo-ink-3`(#8b95a1)** 이라 흰 바탕에서 대비가 낮고
 |    글자도 작아 **있는 줄 모르고 지나갔다.** 그런데 이 문구가 *"무엇을 적어야
 |    하는가"* 를 알려 주는 **유일한 자리**다.
 |
 | 🚫 **굵게 하지 마라** · 🚫 **배경·테두리를 두르지 마라** — 알림 상자로 읽힌다.
 | 🚫 **신호색(빨강·주황·파랑)을 쓰지 마라** — 바로 아래 오류 문구(`--sig-fail`)와
 |    구분이 사라진다. **도움말과 오류가 같은 무게로 보이면 둘 다 안 읽힌다.**
 | 🔑 올리는 것은 **크기 한 칸(12→13px)과 잉크 한 단계(`ink-3`→`ink-2`)뿐**이다.
 */
.flo-field__help,
.flo-main .flo-field__help { font-size: 13px; color: var(--flo-ink-2);
    margin: 4px 0 0; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~5~~ */
    line-height: var(--flo-lh-caption); /* 🔻 2026-10-05 (#1567) ~~1.5~~ → 18 */
}
/*
 | 🆕 2026-10-06 (#1588) `x-form-field` 의 도움말 · 오류 묶음(`{name}-desc`)은 칸 바로 아래 4 에 선다.
 |    껍데기(`.flo-field`)가 세로 flex · 사이 8 이라 도움말의 위 4 와 더해져 12 가 되었다(연동 설정 · 템플릿).
 |    같은 도움말이 손으로 짠 폼(인플루언서 정보 등록)에서는 4 였다. 이름표 → 칸 8 · 칸 → 도움말 4 로 맞춘다.
 */
/* 🔻 2026-10-13 (#1663) ~~`.flo-main .flo-field > [id$="-desc"]:has(…)`~~ 이름표가 있는 운영자 칸은 안내가 칸 위로 올라가(#1663 「입력 칸 짜임」) 이 묶음이 상자를 갖지 않는다. 남은 자리는 미리보기 · 이름표 없는 칸뿐이다 */
.flo-main .flo-field:is(.flo-preview__screen *, :not(:has(> .flo-field__label))) > [id$="-desc"]:has(> .flo-field__help:first-child) { margin-top: -8px; } /* 껍데기 사이 8 을 지우고 도움말의 위 4 만 남긴다 · 🔻 (#1588 검토) ~~`> p:first-child`~~ 오류 글만 있을 때는 오류에 위 여백이 없어 칸에 0 으로 붙었다. 오류만 있으면 사이 8 그대로다 */
.flo-field__error { font-size: 13px; color: var(--sig-fail-ink); }
/*
 | 🚨 **오류 글이 `flo-t-caption` 을 함께 달면 `.flo-main .flo-t-caption` 규칙(클래스
 |    둘)이 바로 위 규칙(클래스 하나)을 이겨 오류가 빨강이 아니라 흐린 회색(`--flo-ink-3`)으로
 |    보였다** (이슈 #1520 · 실측 `influencer-register-form.blade.php` 58·75·101·114·154·
 |    196·248행). 오류는 빨강이어야 한다(R-306 신호색 · R-314 ③ 오류 문구).
 |
 | 🔑 **역할이 이긴다.** 진 자리의 클래스 이름(`flo-t-caption`)을 그대로 함께 적어, 셸 안팎
 |    두 자리 모두에서 이 규칙이 클래스 수로 확실히 앞서게 세운다. 다음에 다른 글자 크기
 |    도구 클래스가 새로 붙어도 이 이름 자체는 그대로 이긴다.
 | 🚫 `!important` 로 덮지 마라. 이 파일의 `.flo-t-*` 도구 규칙 주석이 이미 금지한다(같은 자리를 짚어 이기면 된다).
 */
.flo-field__error.flo-t-caption,
.flo-main .flo-field__error.flo-t-caption { color: var(--sig-fail-ink); }

/* ═══ 조건 칩 ════════════════════════════════════════════════════════ */
.flo-filter { display: flex; flex-direction: column; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~10~~ */
.flo-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flo-chip {
    display: inline-flex; align-items: center; gap: 5px; height: var(--flo-control-h-sm);
    padding: 0 10px; border: 1px solid var(--flo-line); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--flo-ink-2); background: var(--flo-card);
}
.flo-chip__x,
.flo-main .flo-chip__x { color: var(--flo-ink-3); text-decoration: none; line-height: 1; }
.flo-chip__x:hover { color: var(--sig-fail); }
/*
 | 🆕 2026-11-03 (소규모 이슈 · #1976) 필수 해시태그 칩 줄 · 위저드 ④ 와 템플릿이 함께 쓴다(`flo-tag-input.js`).
 | 🔑 칩 모양은 위 조건 칩 그대로다 · 제거 단추는 검색 조건 칩의 `flo-chip__off` 다. 🚫 새 모양을 짓지 마라 (R-307).
 */
.flo-main .flo-tag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.flo-main .flo-tag-chips[hidden] { display: none; }

/* ═══ 탭 ═════════════════════════════════════════════════════════════ */
.flo-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--flo-line); }
.flo-tab {
    background: none; border: 0; border-bottom: 2px solid transparent; padding: 9px 14px;
    font-size: 14px; color: var(--flo-ink-3); cursor: pointer; font-family: inherit;
}
.flo-tab[aria-selected="true"] { color: var(--flo-primary); border-bottom-color: var(--flo-primary); font-weight: 600; }

/* ═══ 하단 액션바 ════════════════════════════════════════════════════
 |
 | 🚫 `position: fixed` 를 쓰지 마라 — 스크롤과 어긋나 화면 중간에 떠 버린다.
 | 🔑 «몇 명에게» 를 밝힌다. 실제로 메일이 나가고 명단이 바뀌는 자리다.
 */
.flo-actionbar {
    position: sticky; bottom: 0; z-index: 500; display: flex; align-items: center; gap: 16px;
    min-height: var(--flo-actionbar-h); padding: 10px 18px; margin-top: 24px;
    background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
}
.flo-actionbar__end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ═══ 아바타 ═════════════════════════════════════════════════════════ */
.flo-avatar {
    display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    flex: none; background: var(--flo-line-soft); border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius); color: var(--flo-ink-3); font-size: 13px; line-height: 1;
    width: var(--flo-avatar-size, 32px);
    height: var(--flo-avatar-size, 32px);
}
.flo-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ 도움말 표식 ════════════════════════════════════════════════════
 |
 | 🔻 **2026-08-31 (#986) — 브라우저 기본 말풍선을 걷고 직접 그린다.**
 |
 | 🧑 *"최종갱신 항목 툴팁에 내용이 없음. 툴팁 추가."*
 |
 | 🚨 **설명 글은 처음부터 있었다** — HTML `title` 속성에만 실려 있었을 뿐이다.
 |    기본 말풍선은 **1초를 기다려야** 뜨고 **16픽셀 원 위에 정확히** 올려야 하며
 |    **키보드로는 열리지 않는다.** 그래서 「내용이 없는 도움말」로 보였다.
 |
 | 🔑 **생김새는 킷의 `.tip`(`admin_sub.css` 234~237행)에서 가져왔다** (R-306·R-307).
 |    🚫 새로 고안한 값이 아니다 — 채운 회색 원 · 검은 말풍선 · 250px · 12px 글자 ·
 |    8px 모서리 · 같은 그림자까지 킷의 값 그대로다.
 |
 | 🚨 **두 가지만 킷과 다르고, 다를 수밖에 없다.**
 |    ① **아래로 연다.** 킷은 위로 여는데(`bottom: calc(100% + 9px)`), 우리 표
 |       머리는 **스크롤되는 칸 안에 붙어 있는 머리(`position: sticky`)** 라
 |       위로 연 말풍선이 **칸 밖으로 나가 잘린다.**
 |    ② **가짜 요소가 아니라 진짜 요소다.** 킷은 `::after` 에 `attr(data-tip)` 을
 |       그리는데, 가짜 요소는 **화면 낭독기가 읽지 못하고 초점도 못 받는다.**
 */
.flo-hint { position: relative; display: inline-flex; align-items: center; margin-left: 4px; }
/*
 | 🆕 **표식을 글자의 세로 가운데에 맞춘다** (2026-10-04 · 🧑 지시 · 이슈 #1562).
 |
 | 🧑 *"느낌표 호버는 중앙이 안맞춰져잇는 느낌이야 참여울 보다 살짝 아래잇는거같아"*
 |
 | 🚨 표식은 글자 기준선에 붙는다(`inline-flex` 의 기준선 = 원 안 「i」의 기준선). 원의 가운데는
 |    기준선 위 약 3.7px 에 고정되는데, 한글 글자의 가운데는 기준선 위 약 0.37em 이다.
 |    그래서 글자가 클수록 원이 아래로 처졌다(1600 실측: 표 머리 13/600 1.1px · 폼 이름표 14/600 1.5px 아래).
 | 🔑 그 차이만큼 올린다. 13px 은 1.1px, 14px 은 1.5px 이 오르고, 실측 차이는 0.2px 안팎이다.
 | ⚠️ 이름표가 `display: flex` 로 가운데 맞춤인 자리(검색 조건 이름)는 원래 0.7px 아래였고 0.4px 위가 된다.
 | 🚫 `vertical-align: middle` 로 바꾸지 마라. 라틴 소문자 높이 기준이라 오히려 0.05px 더 내려갔다.
 */
.flo-hint { top: calc(3.7px - .37em); }

/*
 | 표식 — 킷 `.tip` 의 채운 원이다.
 |
 | 🔑 **눌러서도 열린다** — 마우스를 못 쓰는 사람에게 도움말이 닿는 유일한 길이다.
 | 🚫 단추 기본 모양을 지우는 선언을 빼지 마라 — 브라우저가 회색 네모를 그린다.
 */
.flo-hint__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; min-width: 16px; height: 16px; padding: 0;
    border: 0; border-radius: 50%;
    /* 🔻 2026-09-28 (#1493) 원을 킷의 #c7c7c7 에서 --flo-ink-3 로 올렸다. 흰 바탕 1.69:1 이라 단추를 알아볼 기준(3:1)에 못 미쳤다 */
    background: var(--flo-ink-3); color: #fff;
    font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1;
    cursor: help; vertical-align: middle; flex: none;
}
.flo-hint__mark:hover { background: var(--flo-ink-2); }

/*
 | 말풍선 — 킷 `.tip::after` 의 값이다.
 |
 | 🔑 **한글은 낱말 단위로 접는다**(`word-break: keep-all`) — 글자 단위로 접으면
 |    한 낱말이 두 줄로 쪼개져 읽기 어려워진다.
 | 🚫 `white-space` 를 물려받게 두지 마라 — 표 머리가 `nowrap` 이라 한 줄로 늘어나
 |    **250px 를 무시하고 화면 밖까지 뻗는다.**
 | 🔑 `pointer-events: none` — 말풍선 위로 마우스가 올라가면 표식에서 벗어난 것이
 |    되어 **깜빡인다.**
 */
.flo-hint__bubble {
    position: absolute; top: calc(100% + 9px); z-index: 20;
    width: 250px; padding: 10px 12px; border-radius: 8px;
    background: var(--text-color-2, #202527); color: #fff;
    font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption); /* 🔻 2026-10-05 (#1567) ~~1.55~~ */
    text-align: left; white-space: normal; word-break: keep-all;
    box-shadow: 0 6px 16px rgba(32, 37, 39, .22);
    opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none;
}
/* 말풍선을 가리키는 삼각형 — 킷 `.tip::before` 를 뒤집었다(아래로 열기 때문) */
.flo-hint__bubble::before {
    content: ''; position: absolute; bottom: 100%;
    border: 6px solid transparent; border-bottom-color: var(--text-color-2, #202527);
}

/*
 | 어느 쪽으로 벌어지는가.
 |
 | 🚨 **오른쪽 끝 열에서 가운데로 벌리면 표 밖으로 나간다** — 표를 감싼 칸이
 |    `overflow: auto` 라 **잘리거나 가로 스크롤이 생긴다.** 그 자리는 `end` 다.
 */
.flo-hint--center .flo-hint__bubble { left: 50%; transform: translateX(-50%); }
.flo-hint--center .flo-hint__bubble::before { left: 50%; margin-left: -6px; }
.flo-hint--end .flo-hint__bubble { right: -6px; }
.flo-hint--end .flo-hint__bubble::before { right: 8px; }

/*
 | 언제 보이는가 — 마우스를 올렸을 때와 키보드 초점이 왔을 때.
 |
 | 🔑 `:focus-visible` 이라 **마우스로 눌렀을 때는 남아 있지 않는다.**
 | 🚫 `:focus` 로 바꾸지 마라 — 한 번 누르면 다른 곳을 누를 때까지 떠 있는다.
 */
.flo-hint__mark:hover + .flo-hint__bubble,
.flo-hint__mark:focus-visible + .flo-hint__bubble {
    opacity: 1; visibility: visible;
}

/* 🚨 움직임을 줄이도록 설정한 사람에게는 서서히 뜨는 것을 걷어낸다 — 말풍선은 그대로 뜬다 */
@media (prefers-reduced-motion: reduce) {
    .flo-hint__bubble { transition: none; }
}

/*
 | 🆕 2026-10-26 (#1878 · 🧑 *"탭에 마우스 호버하면 설명 있으면 좋을듯"*) 단계 칸의 설명 말풍선.
 | 🔑 모양은 위 도움말 풍선 그대로다(`.flo-hint__bubble` 를 함께 단다) · 칸 아래 가운데에 연다.
 | 🔑 열리는 때도 같다 · 마우스를 올렸을 때와 키보드 초점이 왔을 때(`:focus-visible`).
 */
.flo-steps > li { position: relative; }
.flo-step__tip { left: 50%; transform: translateX(-50%); }
.flo-step__tip::before { left: 50%; margin-left: -6px; }
.flo-step:is(:hover, :focus-visible) + .flo-step__tip { opacity: 1; visibility: visible; }
/*
 | 🆕 2026-10-27 (#1889 ①) 닫힌 단계 말풍선은 자리를 차지하지 않는다 · 열 때만 그린다(`display`).
 | 🚨 `visibility: hidden` 은 그리기만 지우고 배치는 그대로였다. 780~860 폭에서 「단계 전체 보기」를 펼치면 칸 끝의
 |    숨은 말풍선이 페이지를 9~19px 넓혔다(800 실측 `scrollWidth` 816). 표 몸통 도움말 말풍선(#1568)과 같은 처방이다.
 | 🔑 열 때 서서히 뜨는 것(.15s)은 `@starting-style` 로 지킨다 · 닫힐 때는 전에도 곧바로 사라졌다(`visibility` 는 전환 목록에 없다).
 | 🔑 열린 말풍선을 창 안에 두고 Esc 로 닫는 일은 `flo-hint-fit.js` 가 한다(도움말 표식과 같은 방식). 위 규칙은 스크립트가 없을 때의 자리다.
 */
.flo-step__tip { display: none; }
.flo-step:is(:hover, :focus-visible) + .flo-step__tip { display: block; }
@starting-style { .flo-step:is(:hover, :focus-visible) + .flo-step__tip { opacity: 0; } }
/* 🆕 2026-10-27 (#1889) 스크립트가 자리를 정한 뒤의 화살표 · 칸 가운데(`--flo-hint-arrow`)를 가리키고, 위로 열면(`is-up`) 아래에서 가리킨다 */
.flo-steps > li.is-placed > .flo-step__tip::before { left: var(--flo-hint-arrow, 50%); margin-left: 0; transform: translateX(-50%); }
.flo-steps > li.is-placed.is-up > .flo-step__tip::before {
    top: 100%; bottom: auto;
    border-bottom-color: transparent; border-top-color: var(--text-color-2, #202527);
}

/* ═══ 신선도 ═════════════════════════════════════════════════════════ */
.flo-freshness { font-size: 13px; color: var(--flo-ink-3); font-variant-numeric: tabular-nums; }
.flo-freshness dl { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.flo-freshness dt { color: var(--flo-ink-3); }
.flo-freshness dd { color: var(--flo-ink-2); }

/* ═══ 영역 편집기 · 발송 결과 ══════════════════════════════════════════
 |
 | 🔑 이 둘은 **업무 규칙을 담은 부품**이라 디자인 교체 때 남겨 두었다(#662).
 |    모양만 킷에 맞춘다 — 🚫 안쪽 규칙(허용 서식·잠금·인원수)을 건드리지 마라.
 */
.flo-area__block { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--flo-line); }
.flo-area__row { display: flex; align-items: center; gap: 8px; }
.flo-area__input {
    width: 100%; margin-top: 4px; padding: 7px 10px;
    border: 1px solid var(--flo-line); border-radius: var(--flo-radius);
    background: var(--flo-card); color: var(--flo-ink-1); font-family: inherit;
}
.flo-area__input:focus { outline: 2px solid var(--flo-primary); outline-offset: 1px; }

/*
 | 🆕 **칸마다 「무엇을 적는가」** (2026-08-27 · 이슈 #906·#907).
 |
 | 🧑 *"안내문구는 눈에 띄게 할 것. (너무 튀지는 않을 것)"*
 | 🔑 **도움말(`.flo-field__help`)과 같은 크기·같은 잉크**다 — 화면 안에서 안내는
 |    한 목소리여야 한다. 🚫 여기만 다르게 하지 마라.
 | 🚫 굵게·배경·테두리·신호색을 쓰지 마라 — 경고로 읽힌다.
 */
.flo-area__hint,
.flo-main .flo-area__hint {
    font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); /* 🔻 2026-10-05 (#1567) ~~1.5~~ */
    margin: 4px 0 0;
    word-break: keep-all;
}

/*
 | 🆕 **눌러서 쓰는 편집기의 겉** (2026-08-27 · 이슈 #910).
 |
 | 🔑 Summernote 는 자기 스타일시트를 갖고 온다 — 여기서는 **테두리·반경·글꼴만**
 |    우리 것에 맞춘다. 🚫 안쪽 부품을 다시 그리지 마라. 판을 갈아 끼울 때 깨진다.
 | 🚨 **`.note-editable` 에 글꼴을 지정해야** 편집 중 모습과 미리보기가 같아진다 —
 |    안 하면 편집기 안만 브라우저 기본 글꼴로 보여 «내가 쓴 것과 다르게 나간다».
 */
.flo-main .note-editor.note-frame {
    margin-top: 4px; margin-bottom: 0;
    border: 1px solid var(--flo-line); border-radius: var(--flo-radius);
    background: var(--flo-card);
}
/* 🔻 2026-10-11 (#1617) ~~`background: var(--flo-line-soft)` · `padding: 4px 6px`~~ (회색 도구 막대 · 테두리 단추) →
   흰 막대 · 테두리 없는 단추(웹 편집기의 보편 모양). 막대는 빈 편집기에서도 무엇을 할 수 있는지 보이도록 늘 둔다 */
.flo-main .note-editor.note-frame .note-toolbar {
    background: var(--flo-card); border-bottom: 1px solid var(--flo-line);
    padding: 4px; border-radius: var(--flo-radius) var(--flo-radius) 0 0;
}
/*
 | 🆕 **도구 단추는 테두리 없는 아이콘 단추다** (2026-10-11 · 이슈 #1617).
 | 🔑 누르는 자리 32 · 아이콘 16 · 반경 6. 올리면 옅은 바탕, 켜진 서식은 보라 틴트다.
 | 🔑 단추 묶음 사이는 세로 칸막이 하나로 가른다. 묶음 안 단추는 붙어 있지 않고 2 띄운다.
 | 🔑 키보드 초점 테두리는 다른 단추(`.flo-icon-btn`)와 같은 값이다. 도구 줄 안 이동(roving tabindex · `flo-editor.js`)은 그대로다.
 | ⚠️ Summernote 파일이 이 파일보다 뒤에 실린다 · 선택자를 길게 적어 이긴다.
 */
.flo-main .note-editor.note-frame .note-toolbar .note-btn-group { margin: 0; display: inline-flex; align-items: center; gap: 2px; }
.flo-main .note-editor.note-frame .note-toolbar > .note-btn-group + .note-btn-group { margin-left: 4px; padding-left: 4px; border-left: 1px solid var(--flo-line); }
.flo-main .note-editor.note-frame .note-toolbar .note-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 2px;
    min-width: 32px; height: 32px; padding: 0 6px; margin: 0;
    border: 0; border-radius: var(--flo-radius); background: transparent; box-shadow: none;
    color: var(--flo-ink-2); font-size: 16px; line-height: 1;
}
.flo-main .note-editor.note-frame .note-toolbar .note-btn:hover { background: var(--flo-line-soft); color: var(--flo-ink-1); border: 0; border-radius: var(--flo-radius); }
.flo-main .note-editor.note-frame .note-toolbar .note-btn:is(.active, :active) { background: var(--flo-primary-soft); color: var(--flo-primary); border: 0; border-radius: var(--flo-radius); box-shadow: none; }
.flo-main .note-editor.note-frame .note-toolbar .note-btn:focus { border: 0; border-radius: var(--flo-radius); }
.flo-main .note-editor.note-frame .note-toolbar .note-btn:focus:not(:hover, .active) { background: transparent; }
.flo-main .note-editor.note-frame .note-toolbar .note-btn:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 0; }
.flo-main .note-editor.note-frame .note-toolbar .note-btn :is(i, [class^="note-icon-"]) { font-size: 16px; line-height: 1; }
.flo-main .note-editor.note-frame .note-toolbar .note-btn .note-icon-caret { font-size: 13px; }
/* 🆕 2026-10-11 (#1617) 크기 조절 막대를 감춘다 · 편집기 높이는 글에 맞춰 늘어난다. 회색 손잡이 줄이 판 아래에 남아 낡아 보였다 */
.flo-main .note-editor.note-frame .note-statusbar { display: none; }
.flo-main .note-editor.note-frame .note-editable {
    font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--flo-ink-1);
    padding: 12px 14px;
}
.flo-main .note-editor.note-frame .note-placeholder { padding: 12px 14px; color: var(--flo-ink-3); }
/* 🔑 잠긴 칸은 잠겨 보여야 한다 — 다 쓰고 나서 거부당하면 늦다 */
.flo-main .note-editor.note-frame .note-editable[contenteditable="false"] { background: var(--flo-line-soft); color: var(--flo-ink-2); }

/*
 | 🚨 **편집기 안에서만 참여 버튼이 편집기 폭을 꽉 채우고 있었다** (2026-09-03 · 이슈 #1140).
 |
 | Summernote 가 `.note-editable table { width: 100% }` 를 갖고 있다. 그래서
 | **실제로 나가는 메일과 옆 미리보기는 글자만큼(110px)인데 편집기만 494px** 였다.
 | 🔑 **편집기가 나가는 것과 다른 폭을 보여 주고 있었다.** 사용자가 그 차이를 보고
 |    *"버튼 가로길이가 줄어들어"* 로 알려 주었다.
 |
 | 🔑 **우리 도구모음에는 표 버튼이 없다**(허용 서식이 아니다 · `flo-editor.js`).
 |    본문에 설 수 있는 표는 **참여 버튼 하나뿐**이라 이 규칙이 다른 것을 건드리지 않는다.
 | 🚫 **Summernote 파일을 고치지 마라.** 바깥에서 온 파일이고, 판을 갈아 끼우면 사라진다.
 | ⚠️ **선택자를 셋 다 적어야 이긴다.** 그 파일이 화면에서 이 파일보다 **뒤에** 실린다.
 */
.flo-main .note-editor .note-editing-area .note-editable table { width: auto; }

/* 🔑 메일에는 없는 테두리다. 편집기에서만 검은 칸에 회색 선이 그어졌다 */
.flo-main .note-editor .note-editing-area .note-editable table td { border: 0; }
/* 🚨 전체 화면은 셸 위로 떠야 한다 — 사이드바가 z-index 를 갖고 있다 */
.flo-main .note-editor.note-fullscreen { z-index: 1000; }

/* ═══ 치환변수 삽입 줄 ════════════════════════════════════════════════
 |
 | 🆕 2026-09-02 · 이슈 #1132 · 🧑 *"메일 작성하는 폼에 버튼으로 있었으면 좋겠음.
 |    자주 쓰는 것들이기 때문."*
 |
 | 🔑 **모양은 킷이 정했다** (킷 `07-메시지-메일.md` 3.8 (c) 「치환 변수 목록과
 |    삽입 UI」). 알약 · 12px 굵게 · 보라 글자 · 연보라 바닥.
 |    🚫 값을 새로 고안하지 마라(R-307).
 | ⚠️ **킷은 그 값을 인라인 `style` 로 적었다.** R-307 이 인라인을 금지하므로 여기로
 |    옮기고 **팔레트 변수로 바꿔** 읽는다. 🔑 글자색은 이미 같은 값이다
 |    (킷의 `#6d5bc7` 이 `--flo-primary` 다).
 | 🚨 **테두리를 바닥과 같은 색으로 둔다.** 마우스를 올릴 때 색만 바뀌어 줄 높이가
 |    흔들리지 않는다. 🚫 `border: 0` 으로 바꾸지 마라. 올릴 때마다 1px 씩 밀린다.
 | 🔑 **이름표는 줄바꿈되지 않는다**(`nowrap`). 좁아지면 접히는 것은 줄이지 낱말이 아니다.
 */
.flo-main .mail-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
/* 🔻 2026-10-05 (#1565 · 4px 격자) ~~4px 11px · 높이 28.8~~ → 칩 높이 30 · 좌우 12 */
.flo-main .mail-var-btn {
    display: inline-flex; align-items: center; height: var(--flo-control-h-sm);
    padding: 0 12px; border: 1px solid var(--flo-primary-soft); border-radius: 999px;
    background: var(--flo-primary-soft); color: var(--flo-primary);
    font-family: inherit; font-size: 13px; font-weight: 700; line-height: var(--flo-lh-caption); /* 🔻 2026-10-05 (#1567) ~~1.45~~ */
    white-space: nowrap; cursor: pointer;
}
.flo-main .mail-var-btn:hover { background: var(--flo-card); border-color: var(--flo-primary-brt); }
.flo-main .mail-var-btn:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 1px; }

/* 🚨 발송 결과는 「몇 명에게 나갔는가」를 밝히는 자리다 — 🚫 지우지 마라 */
.flo-send-result { margin-bottom: 16px; }

/* ═══ 편집 ↔ 미리보기 두 칸 ═══════════════════════════════════════════
 |
 | 🆕 2026-08-27 · 이슈 #909 · 🧑 *"미리보기가 화면 반 나눈 상태에서 오른쪽에
 |    있어야 보기 편함."*
 |
 | 🚨 **직전까지 미리보기가 편집 칸 열 개 아래에 있었다.** 고치고 → 저장하고 →
 |    아래로 굴려 확인하고 → 다시 위로 올라갔다. **미리보기를 만든 이유가
 |    「견주는 것」인데 견줄 수 없었다.**
 |
 | 🔑 **오른쪽이 따라 붙는다**(`sticky`) — 왼쪽을 굴려도 미리보기가 화면에 남는다.
 | 🚫 **좁은 폭에서 미리보기를 숨기지 마라** — 한 칸으로 되돌아가 위아래로 놓인다.
 |    창 폭 계약은 1024px 이상 두 칸, 그 미만 한 칸이다(#639).
 */
/* ═══ 미리보기 탭 ═══════════════════════════════════════════════════
 |
 | 🆕 2026-08-27 · 이슈 #917 · 🧑 *"미리보기가 왜 이렇게 많아?"*
 |
 | 🚨 **샘플 2벌 × (메일·참여 페이지) = 네 덩어리**라 같은 본문이 네 번 그려졌다.
 |    오른쪽 칸에서 **1,962px** 였고 보이는 높이는 968px 였다.
 |
 | 🔑 **정본이 원래 정한 모양이 「메일↔웹 전환」**이다(`85-` 4장).
 | 🔑 **라디오와 CSS 로 만든다** — 🚫 자바스크립트로 바꾸지 마라. 스크립트가 없으면
 |    **판 하나만 보이고 바꿀 길이 없어** 지금보다 나빠진다.
 | 🚨 **라디오는 판 «바깥»에 있어야 한다** — 살아 있는 미리보기가 판을 갈아 끼우므로,
 |    안에 있으면 **글을 칠 때마다 고른 탭이 처음으로 돌아간다.**
 */
/*
 | 🆕 **왼쪽 편집 영역도 같은 탭을 쓴다** (2026-09-03 · 이슈 #1138).
 |
 | 🧑 *"시딩 제안 메일 내용과 함께 참여페이지 입력 폼 버튼이 있어야 함 (미리보기 버튼처럼.)"*
 |
 | 🔑 **모양 선언은 한 벌이다.** 왼쪽 클래스를 여기 나란히 적어 같은 것을 그린다.
 |    🚫 무늬를 새로 고안하지 마라(R-307) · 🚫 선언을 베껴 두 벌로 만들지 마라.
 | ⚠️ **고른 표시는 아이디로 고른다.** 이 방식이라 탭이 늘면 아래 목록에 줄을 더해야
 |    한다. 🚫 «클래스만 붙이면 되겠지» 로 읽지 마라. 붙여도 색이 안 바뀐다.
 */
.flo-preview__pick,
.flo-panetabs__pick {
    /*
     | 🚫 `display: none` 으로 감추지 마라 — 그러면 키보드로 탭을 옮길 수 없다.
     |    자리만 빼고 초점은 남긴다.
     */
    position: absolute; width: 1px; height: 1px; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.flo-preview__tabs,
.flo-panetabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 6 · 아래 10~~ · 🔻 2026-10-06 (#1587 B) 아래 ~~8~~ → 12. 탭 줄이 바로 아래 서브카드 테두리에 붙어 보였다(폼 이름표 → 칸 8 보다 한 단 크게) */
/*
 | 🆕 **탭 이름표만 감싸는 묶음** (2026-09-09 · 이슈 #1444).
 |
 | 🔑 **탭 줄에 「템플릿 불러오기」 단추가 함께 서기 때문이다.** `role="group"` 과
 |    「무엇을 쓰는 중인가」 이름표는 **이름표 둘만** 감싸야 한다. 줄 전체를 감싸면
 |    화면 낭독기가 그 이름으로 **단추까지 묶어 읽는다.**
 | 🔑 **줄 자체는 `.flo-panetabs` 가 그대로 그린다** · 그 클래스는 라디오의 형제여야
 |    하므로(`~`) 🚫 **다른 상자로 감싸지 마라.** 감싸면 고른 탭의 색과 판 전환이
 |    **한꺼번에** 죽는다.
 | 🚫 **`display: contents` 로 줄이지 마라** · 그러면 `role="group"` 이 화면 낭독기
 |    나무에서 빠지는 브라우저가 있다.
 */
.flo-panetabs__group { display: flex; flex-wrap: wrap; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-preview__tab,
.flo-panetabs__tab {
    /* 🔻 2026-10-03 (#1558 D1) 안여백 6/12(높이 32) → 높이 30 · 좌우 12. 고르는 칩(`.flo-pick`)과 같은 알약이다 */
    display: inline-flex; align-items: center; height: var(--flo-control-h-sm); padding: 0 12px;
    border: 1px solid var(--flo-line); border-radius: 999px;
    font-size: 13px; font-weight: 500; color: var(--flo-ink-2); background: var(--flo-card);
    cursor: pointer; word-break: keep-all;
}
.flo-preview__tab:hover,
.flo-panetabs__tab:hover { background: var(--flo-line-soft); }
/* 🔑 고른 탭은 색이 아니라 **채움**으로 알린다 — 색만으로 알리면 못 보는 사람이 있다 */
/*
 | 🔻 2026-10-03 (#1558 D1) 고른 탭을 검정 채움에서 칩의 고른 모양(연보라 바탕 · 보라 테두리와 글자 · 600)으로
 |    바꿨다. ~~`background: var(--flo-ink-1); color: #fff`~~ · 같은 「고른 것」이 탭은 검정, 칩은 연보라로
 |    달랐다(11차 점검 D1). 채움과 굵기가 함께 바뀌므로 색만으로 알리지 않는다는 위 원칙은 그대로다.
 */
#flo-pv-ch-mail:checked ~ .flo-preview__tabs [for="flo-pv-ch-mail"],
#flo-pv-ch-web:checked ~ .flo-preview__tabs [for="flo-pv-ch-web"],
#flo-pv-s-0:checked ~ .flo-preview__tabs [for="flo-pv-s-0"],
#flo-pv-s-1:checked ~ .flo-preview__tabs [for="flo-pv-s-1"],
#flo-ed-mail:checked ~ .flo-panetabs [for="flo-ed-mail"],
#flo-ed-web:checked ~ .flo-panetabs [for="flo-ed-web"] {
    background: var(--flo-primary-soft); border-color: var(--flo-primary); color: var(--flo-primary); font-weight: 600;
}
/* 🔑 키보드로 옮길 때 어디에 있는지 보여야 한다 */
.flo-preview__pick:focus-visible ~ .flo-preview__tabs [for] { outline: none; }
.flo-panetabs__pick:focus-visible ~ .flo-panetabs [for] { outline: none; }
#flo-pv-ch-mail:focus-visible ~ .flo-preview__tabs [for="flo-pv-ch-mail"],
#flo-pv-ch-web:focus-visible ~ .flo-preview__tabs [for="flo-pv-ch-web"],
#flo-pv-s-0:focus-visible ~ .flo-preview__tabs [for="flo-pv-s-0"],
#flo-pv-s-1:focus-visible ~ .flo-preview__tabs [for="flo-pv-s-1"],
#flo-ed-mail:focus-visible ~ .flo-panetabs [for="flo-ed-mail"],
#flo-ed-web:focus-visible ~ .flo-panetabs [for="flo-ed-web"] {
    outline: 2px solid var(--flo-primary); outline-offset: 2px;
}

/*
 | 왼쪽 편집 판 (이슈 #1138)
 |
 | 🚨 **라디오는 모든 `<form>` 바깥에 있어야 한다.** 안에 들어가면 저장할 때 함께
 |    전송된다. 이 화면에는 저장 경로가 여섯이라 어느 폼에 들어갔는지에 따라
 |    다르게 샌다.
 | 🚨 **창(`x-modal`)을 판 안에 넣지 마라.** 확인 창은 `open` 으로 뜨는데 감춰진 판
 |    안에 있으면 `display: none` 에 먹혀 **뜨지 않고 오류도 나지 않는다.**
 | 🚫 판을 라디오보다 앞에 두지 마라 — `~` 는 뒤쪽 형제만 잡는다.
 */
.flo-panetabs__panel { display: none; }
#flo-ed-mail:checked ~ .flo-panetabs__panels [data-pane="mail"],
#flo-ed-web:checked ~ .flo-panetabs__panels [data-pane="web"] {
    display: block;
}

/*
 | 🔑 **보이는 판은 언제나 하나**다 — 채널과 샘플 두 라디오가 «함께» 정한다.
 | 🚫 판을 라디오보다 앞에 두지 마라 — `~` 는 뒤쪽 형제만 잡는다.
 */
.flo-preview__panel { display: none; }
#flo-pv-ch-mail:checked ~ #flo-pv-s-0:checked ~ .flo-preview__panels [data-channel="mail"][data-sample="0"],
#flo-pv-ch-mail:checked ~ #flo-pv-s-1:checked ~ .flo-preview__panels [data-channel="mail"][data-sample="1"],
#flo-pv-ch-web:checked ~ #flo-pv-s-0:checked ~ .flo-preview__panels [data-channel="web"][data-sample="0"],
#flo-pv-ch-web:checked ~ #flo-pv-s-1:checked ~ .flo-preview__panels [data-channel="web"][data-sample="1"] {
    display: block;
}

.flo-preview__panels { border: 1px solid var(--flo-line); border-radius: var(--flo-radius); padding: 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~14~~ → 서브카드 16 */
/* 🔑 서버에 못 닿았을 때 — 판을 비우지 않고 «지금 것이 낡았다»만 알린다 */
.flo-preview__panels[data-preview-stale] { opacity: 0.55; }
.flo-preview__envelope {
    font-size: 13px; color: var(--flo-ink-3);
    padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--flo-line-soft); /* 🔻 2026-10-05 (#1565) 아래 ~~10~~ */
}
.flo-preview__body { word-break: keep-all; }

.flo-split { display: block; }
.flo-split__main { min-width: 0; }
.flo-split__side { min-width: 0; }

@media (min-width: 1024px) {
    .flo-split {
        display: grid;
        /*
         | 🔑 **오른쪽을 고정 폭으로 잡지 마라** — 미리보기는 메일을 그대로 그리므로
         |    좁으면 줄바꿈이 실제와 달라진다. 비율로 나눈다.
         */
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
    .flo-split__side {
        position: sticky;
        /*
         | 🔑 상단바 아래에 붙는다 — 0 으로 두면 제목 줄에 가린다.
         | 🚫 `100vh` 짜리 고정 높이를 주지 마라 — 미리보기가 길면 끝을 볼 수 없다.
         |
         | 🔻 **2026-09-08 상단바 높이를 더했다** (이슈 #1422 · 🧑 *"스크롤 시 미리보기
         |    상단이 잘림"*).
         |
         | 🚨 **~~`top: 16px`~~ 이었고, 그 값이 상단바 뒤였다.** 상단바는 `position: fixed`
         |    에 높이 `--flo-topbar-h`(56px) · `z-index: 900` 이다(`flo-shell.css`).
         |    굴리면 판의 **위쪽 40px 이 상단바 아래로 들어가** 잘린 것처럼 보였다.
         | 🔑 **잘리는 것이 아니라 가려지는 것이다** — 판 안쪽 여백을 늘려도 고쳐지지 않는다.
         | 🚫 **56 을 숫자로 적지 마라** · 정본은 변수 하나다. 상단바 높이가 바뀌면
         |    이 값이 조용히 어긋난다.
         | ⚠️ 좁은 폭(860px 미만)에서 상단바는 `height: auto` 가 되지만, 이 규칙은
         |    **1024px 이상에서만** 걸리므로 그 갈래와 겹치지 않는다.
         */
        top: calc(var(--flo-topbar-h) + 16px);
        max-height: calc(100vh - var(--flo-topbar-h) - 32px);
        overflow-y: auto;
    }
    /*
     | 🆕 2026-10-06 (#1585) 아래 끝 흐림. 미리보기가 칸보다 길면 판이 아래 테두리 없이 잘린 것처럼 보였다(제안 메일 작성).
     | 🔑 칸 바닥에 붙는 흐림 띠(24)가 「아래로 더 있다」를 알린다. 끝까지 굴리면 사라져 판의 아래 테두리가 보인다.
     | 🔑 굴림 시간선(`scroll()`)이 없을 때(내용이 짧아 굴릴 것이 없거나, 지원하지 않는 브라우저)는 바탕값 0 이라 그리지 않는다.
     */
    .flo-split__side::after {
        content: ''; display: block; position: sticky; bottom: 0; height: 24px; margin-top: -24px;
        background: linear-gradient(to bottom, transparent, var(--flo-card)); pointer-events: none;
        opacity: 0; animation: flo-split-fade linear both; animation-timeline: scroll();
    }
}
@keyframes flo-split-fade { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }

/*
 | 🆕 2026-10-11 (#1622 · 🧑 결정 「B 옆에서 나오는 서랍」) 미리보기 서랍. 짝은 `x-preview-drawer` · `flo-preview-drawer.js` 다.
 | 🔑 **모든 규칙이 스크립트가 붙이는 클래스(`is-drawer` · `is-drawer-closed`) 아래에 있다.**
 |    스크립트가 없으면 위의 두 칸 모양이 그대로다. 서랍이 없는 화면(참여 폼 세트 편집)도 그대로다.
 | 🔑 1024 이상 · 열리면 위 두 칸과 같다(편집 칸이 줄어든다 · 덮지 않는다). 닫히면 편집 칸이 전체 폭을 쓴다.
 | 🔑 1024 미만 · 열리면 서랍이 화면 전체를 덮는다.
 | 🔑 여는 단추는 편집 칸 머리 줄의 「미리보기」(`x-preview-drawer-toggle`)다. 그 줄이 화면 밖으로 굴러 나가고 서랍이
 |    닫혀 있으면 오른쪽 아래에 떠 있는 「미리보기」(`.flo-drawer__pill`)가 나타난다. 모든 폭에서 같은 모양이다.
 | 🔻 2026-10-11 (#1622 후속) ~~닫힌 서랍 오른쪽 끝의 세로 글자 단추(`writing-mode: vertical-rl`)~~ · 한 글자씩 쌓여 낡아 보였다.
 */
.flo-drawer__head { justify-content: space-between; }
/*
 | 🔑 닫기 단추는 바깥 여백 없이 머리 줄 안에 선다 · 🔻 (#1622 후속) ~~margin -4 -8 -4 0 · outline-offset 2~~
 |    서랍이 굴림 상자라 오른쪽으로 내민 초점 고리가 잘려 왼쪽 선만 보였다. 고리는 단추 안쪽에 그린다.
 */
.flo-drawer__close {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; margin: 0; padding: 0;
    border: 0; border-radius: var(--flo-radius); background: transparent; cursor: pointer; color: var(--flo-ink-2);
}
.flo-drawer__close[hidden] { display: none; }
.flo-drawer__close svg { width: 20px; height: 20px; }
.flo-drawer__close:hover { color: var(--flo-ink-1); background: var(--flo-line-soft); }
/* 🔑 본문 초점 고리(보라 실선 2px)와 같은 고리를 단추 안쪽으로 그린다 · 바깥으로 띄우면 서랍 굴림 상자에 잘린다 */
.flo-main .flo-drawer__close:focus-visible { outline-offset: -2px; }
.flo-drawer__open[hidden],
.flo-drawer__pill[hidden],
.flo-panetabs[hidden] { display: none; }
/* 🔑 z-index 950 · 상단바(900)보다 위, 곁 메뉴 서랍(990 · 1000)과 화면을 덮은 미리보기 서랍(960)보다 아래다 */
.flo-drawer__pill {
    position: fixed; z-index: 950; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    border-radius: 999px; box-shadow: 0 4px 16px rgba(25, 31, 40, .16);
}
/* 🔑 단추가 떠 있는 동안 문서 끝에 그 높이만큼 여백을 더한다 · 마지막 줄(「다음」 단추)이 단추 뒤에 숨지 않는다 */
body:has(.flo-drawer__pill:not([hidden])) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
.flo-split.is-drawer-closed > .flo-split__side { display: none; }
html.flo-drawer-lock { overflow: hidden; }

@media (min-width: 1024px) {
    .flo-split.is-drawer-closed { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023.98px) {
    /* 🔑 z-index 960 · 상단바(900)와 떠 있는 단추(950)를 덮고, 곁 메뉴 서랍(990 · 1000)보다 아래다 */
    .flo-split.is-drawer:not(.is-drawer-closed) > .flo-split__side {
        position: fixed; inset: 0; z-index: 960;
        overflow-y: auto; overscroll-behavior: contain;
        padding: 16px; background: var(--flo-card);
    }
}

/* ═══ 기본 입력 요소 ══════════════════════════════════════════════════
 |
 | 🚨 **킷 CSS 는 자기 클래스가 붙은 입력칸만 꾸민다.** 우리 화면은 맨 `<select>` ·
 |    `<input>` 을 쓰는 자리가 많아, 아무것도 하지 않으면 **브라우저 기본 모양**이
 |    그대로 나온다 — 작고 눌린 상자가 되어 화면이 «만들다 만 것» 처럼 보인다.
 | 🔑 여기서 정하는 것은 **바탕**뿐이다. 화면별 배치는 그 화면이 갖는다.
 | 🚨 **초점 고리를 지우지 마라** — 키보드로만 쓰는 사람이 지금 어디에 있는지
 |    알 수 없게 된다. 모양을 바꾸더라도 «보이는 표시»는 남긴다.
 */
.flo-main select,
.flo-main input:not([type]),
.flo-main input[type="text"],
.flo-main input[type="search"],
.flo-main input[type="number"],
.flo-main input[type="email"],
.flo-main input[type="url"],
.flo-main input[type="date"],
.flo-main input[type="datetime-local"],
.flo-main textarea {
    min-height: var(--flo-control-h);
    padding: 8px 12px; /* 🔻 2026-10-05 (#1567) ~~7px 10px~~ · 칸 40 · 줄 20 에 맞춘 4px 격자 값 */
    border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius);
    background: var(--flo-card);
    color: var(--flo-ink-1);
    font-family: inherit;
    font-size: 14px;
    line-height: var(--flo-lh-ui); /* 🔻 2026-10-05 (#1567) ~~1.4~~ → 20 */
    box-sizing: border-box;
}
.flo-main select { padding-right: 28px; cursor: pointer; }
.flo-main textarea { min-height: 96px; resize: vertical; }

/*
 | 🆕 **입력 칸 폭은 세 단계다** (2026-10-03 · 이슈 #1555 · 정본 125- 「입력 칸 · 상자 크기」).
 |
 | 🚨 높이(38)·글자(14/400)·반경(6)은 이미 한 값이었다(운영자 화면 84칸 전부). 어긋난 것은
 |    **폭**이었다. 같은 날짜 칸이 화면마다 127 · 140 · 168px, 같은 종류의 선택 상자가
 |    77 · 91 · 104 · 111 · 145px 로 글자 길이만큼씩 달랐다.
 | 🔑 짧은 칸 140(날짜 · 숫자 · 선택 상자의 최소) · 보통 240(아이디 · 사유 · 이름 한 줄) ·
 |    긴 칸은 판의 열을 채운다(주소 · 제목 · 본문). 140 은 이미 가장 많이 쓰던 값이다
 |    (`.flex-box-ui select` · 성과 · 메시지 기간 칸).
 | 🔑 달력 칸은 `type="date"` 뿐 아니라 달력 부품이 보이는 칸으로 바꿔 끼우는 경우
 |    (`.flatpickr-input` 과 그 바로 뒤 칸)도 같은 폭을 받는다. 🚫 달력 모양은 여기서 정하지 않는다.
 | 🔻 2026-10-04 (#1563) flatpickr 를 걷어 `.flatpickr-input` 두 선택자를 지웠다. 바꿔 끼운 칸의 폭은
 |    달력 단추와 한 덩어리(`.flo-datepicker`)로 `flo-datepicker.css` 가 같은 토큰으로 정한다.
 | ⚠️ 한 쪽에 보는 개수(`.flo-page-size`)는 표 도구줄의 작은 상자라 최소 폭에서 뺀다.
 */
.flo-main input[type="date"] { width: var(--flo-control-w-short); max-width: 100%; }
.flo-main select { min-width: var(--flo-control-w-short); max-width: 100%; }
.flo-main .flo-page-size select { min-width: 0; }
.flo-main .flo-control--short { width: var(--flo-control-w-short); max-width: 100%; }
.flo-main .flo-control--mid { width: var(--flo-control-w-mid); max-width: 100%; }

/*
 | 🆕 **본문의 초점 고리는 한 모양이다** (2026-10-03 · 이슈 #1558 D3 · 정본 125- 「초점 고리」).
 |
 | 🚨 키보드로 옮겨 다니면 고리가 세 가지였다. 단추 · 칩 · 링크는 킷 `reset.css` 의
 |    `:focus-visible { outline: 2px dashed #111 }`(검정 점선), 입력 칸은 보라 실선, 곁 메뉴는 하늘색이었다.
 |    인플루언서 검색 화면에서 Tab 을 150번 눌러 본문 초점 121곳 중 79곳이 검정 점선이었다.
 | 🔑 본문(`.flo-main`) 안은 보라 실선 2px · 띄움 2px 하나다. 킷 파일은 고치지 않고 여기서 이긴다
 |    (클래스 둘이라 `reset.css` 의 한 마디 규칙보다 무겁다).
 | 🔑 곁 메뉴와 위쪽 막대는 본문 밖이라 각자의 고리를 그대로 둔다(`flo-shell.css` · 남색 바탕 대비, #1511).
 | 🔑 입력 칸은 아래 규칙이 띄움 1px 로 따로 그린다. 색과 굵기는 같다.
 | ⚠️ 달력(flatpickr)은 `body` 끝에 붙어 본문 밖이다. 날짜 칸의 고리는 `flo-datepicker.css` 가 그린다.
 |    🔻 2026-10-04 (#1563) 엔진이 vanilla-calendar-pro 로 바뀌었고 `body` 끝에 붙는 것은 같다.
 | 🆕 (2026-10-04 · #1558 D3 재점검) 모달(`.flo-modal`)도 같은 고리다. 나가기 확인(`#flo-discard-confirm`)처럼
 |    `body` 바로 아래에 붙는 모달은 `.flo-main` 밖이라 단추가 킷의 검정 점선으로 돌아갔다.
 */
.flo-main :focus-visible,
.flo-modal :focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

.flo-main select:focus-visible,
.flo-main input:focus-visible,
.flo-main textarea:focus-visible,
.flo-modal select:focus-visible,
.flo-modal input:focus-visible,
.flo-modal textarea:focus-visible {
    outline: 2px solid var(--flo-primary);
    outline-offset: 1px;
    border-color: var(--flo-primary);
}
/*
 | 🆕 2026-10-20 (#1841 · 🧑 「input에 빨간색 테두리」) 오류 칸은 초점이 와도 빨갛다.
 | 🚨 오류를 알리며 초점을 그 칸으로 옮기면(R-314 ②) 위 보라 고리가 아래 오류 테두리(`aria-invalid`)를 덮어
 |    빨간 표시가 보이지 않았다(정산 명세 고정비 칸 실측). 오류 칸에서만 고리 · 테두리를 오류 색으로 둔다.
 */
.flo-main :is(select, input, textarea)[aria-invalid="true"]:focus-visible,
.flo-modal :is(select, input, textarea)[aria-invalid="true"]:focus-visible {
    outline-color: var(--sig-fail);
    border-color: var(--sig-fail);
}

/* 🔑 못 쓰는 칸은 «왜» 가 옆에 있어야 한다 — 흐리게만 두면 고장으로 읽힌다 */
.flo-main select:disabled,
.flo-main input:disabled,
.flo-main textarea:disabled { background: var(--flo-line-soft); color: var(--flo-ink-3); cursor: not-allowed; }

/*
 | 🆕 **선택 상자의 아래 화살표** (2026-10-06 · 이슈 #1577 · 정본 125- 「선택 상자 화살표」).
 |
 | 🚨 킷 초기화(`reset.css` `select { appearance: none }`)가 브라우저 화살표를 지우고, 킷이 대신 그리던
 |    그림(`icon-select-arrow-8a8a9a.svg`)은 저장소에 없다. 그래서 「상태 전체」 · 「30개씩」 · 「관심목록에 담기」가
 |    글 상자처럼 보였다(1280 · 390 실측, 운영자 화면 선택 상자 전부 `background-image: none`).
 | 🔑 앱의 선 아이콘 모양(24 격자 · 선 1.7 · 둥근 끝)으로 아래 꺾쇠를 그림 주소(data URI)로 넣는다. 오른쪽 12 · 크기 16 ·
 |    글자 자리 오른쪽 안여백 36(12 + 16 + 8). 색은 `--flo-ink-3`(#6b7684) 값이다. 그림 주소 안에서는 변수를 못 쓴다.
 | 🔑 `background-image` 만 준다. 바탕색(`background` 줄임 · 못 쓰는 칸 `--flo-line-soft`)은 그대로 산다.
 | 🔑 셈 ~~(0,3,1)~~ 🔻 2026-10-06 (#1578 최종 검토) (0,4,1) 이라 바탕 규칙 · 못 쓰는 칸 규칙(0,2,1)과 칸 여백 유틸(`px-2`)을 이긴다.
 |    (`.flo-main` 1 · `:not([multiple])` 1 · `:not([size]:not([size="1"]))` 는 안쪽 셈 2 · `select` 태그 1)
 | 🚫 여러 줄 목록(`multiple` · `size` 2 이상)에는 그리지 않는다. 그 상자는 펼쳐진 목록이다.
 | ⚠️ 공개 화면(`flo-public.css`)도 같은 초기화를 받지만 지금 선택 상자가 하나도 없다. 생기면 같은 그림을 그쪽에 둔다.
 */
.flo-main select:not([multiple]):not([size]:not([size="1"])) {
    padding-left: 12px; /* 🆕 2026-10-06 (#1585) 글 칸과 같은 시작선. `px-2` 를 단 선택 상자만 8 이라 바로 위아래 글 칸보다 4px 왼쪽에서 글자가 시작했다 */
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}

/*
 | 🚨 **브라우저가 대신 정하는 것**을 비워 두지 마라 — 지정하지 않으면 OS 기본색
 |    (대개 파랑)이 나와 팔레트 밖의 색이 전 화면에 뜬다. 검사로는 안 잡힌다.
 */
.flo-main input[type="checkbox"],
.flo-main input[type="radio"] { accent-color: var(--flo-primary); }
::selection { background: var(--sig-done-bg); color: var(--flo-ink-1); }
.flo-main input,
.flo-main textarea { caret-color: var(--flo-primary); }

/* ═══ 본문 안의 제목·묶음 ═════════════════════════════════════════════
 |
 | 🔑 화면이 자기 안에서 쓰는 소제목이다. 화면 제목(`h1`)은 셸이 그린다 —
 |    🚫 화면 안에 `h1` 을 또 두지 마라. 화면 제목은 화면당 하나다.
 */
/*
 | 🔻 2026-10-01 (#1546) 17/600 → 16/700 · 125 글자 눈금에 17 은 없다.
 |    `.flo-main` 안의 `<h2>` 는 전부 절 제목이다(센 결과: 화면 제목은 셸의 `h1` 이
 |    그리고, 화면 안 `<h2>` 는 `flo-t-section`·`flo-panel__title`·`flo-sec__title`·
 |    `flo-t-title` 이 각자 16/700 을 정한다). 이 줄은 클래스 없는 `<h2>` 를 받는
 |    자리라 절 제목 눈금(16/700)에 맞춘다.
 */
/* 🔻 2026-10-05 (#1567) 절 제목 줄 높이 16/24(`--flo-lh-card`). 킷 바탕 1.4(22.4)를 이어받던 자리다 */
.flo-main h2 { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 28px 0 12px; }
/* 🔻 2026-10-01 (#1546) 15/600 → 16/700 · 절 제목 눈금(`.flo-t-section`)과 한 눈금으로 묶는다 */
.flo-main h3 { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 20px 0 10px; }
.flo-main h2:first-child,
.flo-main h3:first-child { margin-top: 0; }
.flo-main p { margin: 0 0 8px; }
/*
 | 🆕 2026-10-05 (🧑 채택 · #1567) 본문 문단은 14/22. 한글 본문은 줄 높이 1.5 이상이 읽기 쉽다(KRDS).
 | 🔑 셈을 0(`:where`)으로 둬 클래스가 정한 줄 높이(캡션 18 · 표 칸 20)가 언제나 이긴다.
 */
:where(.flo-main) p { line-height: var(--flo-lh-body); }
.flo-main a { color: var(--flo-primary); }

/* 🔑 본문 링크는 hover 에서 밑줄이 생긴다 — 누를 수 있음을 색 말고도 알린다 */
.flo-main a:hover { text-decoration: underline; }

/*
 * 🆕 **글자 클래스를 쓴 링크는 링크색을 지킨다** (2026-08-27 · 이슈 #812 · 정본 `05-` 9-b).
 *
 * 🚨 **위 두 클래스에 셸 짝(`.flo-main .flo-t-*`)을 적으면 링크까지 흐린 글자색이 된다.**
 *    그 짝은 `<p>`·`<h3>`·`<select>`·`<textarea>` 에 필요해서 적은 것이고, **링크는 다르다.**
 *
 * 🔑 **근거는 이 저장소가 이미 가진 이름이다** — 흐린 링크를 원하면 `.flo-link-quiet` 를 붙인다.
 *    그것을 안 붙인 링크(«조건 초기화» · «다시 시도» · «인플루언서 검색으로»)는
 *    **누를 수 있음을 색으로 알려야** 한다.
 *
 * 🚫 **`:not()` 을 빼지 마라** — 빼면 `.flo-link-quiet` 를 함께 쓴 링크까지 링크색이 되어
 *    **일부러 흐리게 한 것이 뒤집힌다**(`campaign/list.blade.php` 에 그런 자리가 있다).
 * 🚫 **`!important` 로 대신하지 마라** — 693행이 금지한다.
 */
.flo-main a.flo-t-caption:not(.flo-link-quiet),
.flo-main a.flo-t-body:not(.flo-link-quiet) { color: var(--flo-primary); }

/* ═══ 🔻 전환용 별칭은 지웠다 (2026-08-27 · 이슈 #851) ═══════════════
 |
 | 옛 디자인 토큰 9종(`--ink-900`·`--rule`·`--danger` …)에 킷 색을 붙여 두었던
 | 임시 블록이 여기 있었다(#667). 그 블록이 스스로 적은 종료 조건 —
 | **「0 이 되면 이 블록을 통째로 지운다」** — 이 충족돼 지웠다.
 |
 | 🔑 **검사 94 가 0 이라고 알려 주었다.** 「0 이 되면 지운다」고 적어 둔 블록은
 |    **0 이 된 순간을 알려 주는 것이 없으면 영원히 남는다.**
 |
 | 🚫 **옛 이름을 되살리지 마라.** 지금 쓰는 것은 `--flo-*` 와 `--sig-*` 다.
 |    되살리면 **두 이름 체계가 다시 생기고**, 어느 쪽이 정본인지 알 수 없어진다.
 | 🔑 **검사 94 가 이제 막는다** — 옛 이름을 부르면 **CI 가 실패**한다.
 |    그전에는 목록만 보여 주었고, 부르면 **오류 없이 색만 사라졌다.**
 |
 | ⚠️ **아래의 「전환용 배치 유틸」 블록은 다르다** — **살아 있다**(#668).
 |    🚫 **둘을 「임시 블록」으로 뭉쳐 함께 지우지 마라** — 화면 107곳이 그 이름을
 |    쓰고 있어 **배치가 통째로 무너진다.**
 */
/* ═══ 필터 바 — 킷의 flex-box-ui 를 우리 입력 요소에 맞춘다 ═══════════
 |
 | 🔑 킷의 `.cont-wrap .flex-box-ui` 는 «가로 한 줄 · gap 6px» 만 정한다.
 |    좌우 배분과 줄바꿈은 여기서 얹는다.
 | 🚫 조건을 세로로 쌓지 마라 — 킷 화면은 한 줄이고, 쌓으면 표가 아래로 밀린다.
 */
.cont-wrap .flex-box-ui { flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; }
.cont-wrap .flex-box-ui .left-box { flex: 1 1 auto; flex-wrap: wrap; align-items: center; }
.cont-wrap .flex-box-ui .right-box { flex: 0 0 auto; align-items: center; }
/* 🔻 2026-10-03 (#1555) 220px → 보통 칸(240) · 선택 상자 140 은 짧은 칸 토큰으로 옮겼다(값 같음) */
.cont-wrap .flex-box-ui input[type="text"],
.cont-wrap .flex-box-ui input:not([type]) { min-width: var(--flo-control-w-mid); }
.cont-wrap .flex-box-ui select { min-width: var(--flo-control-w-short); }

/* ───────────────────────────────────────────────────────────────────────
 | 캠페인 목록 표의 열 폭 (2026-08-31 · 이슈 #1018)
 |
 | 🚨 **기간이 전체 날짜를 지면서 그 칸이 잘렸다.** `2026-12-31 ~ 2026-12-31` 은
 |    190px 이 필요한데, 폭 지정이 하나도 없어 **여덟 열이 균등 분할(1280px 창에서
 |    114px)** 되고 있었다. 날짜에 `white-space: nowrap` 이 걸려 있어 **접히지 않고
 |    그대로 잘렸다.**
 | 🚨 **진행 요약도 같이 잘리고 있었다** — 이번 회차 전부터다(`수락 999/999` + 막대 =
 |    169px). 열 폭을 못 박으면서 함께 낫는다.
 |
 | 🚨 **`table-layout: fixed` 는 머리 행의 지정이 전부**다(킷 `common.css:863`).
 |    🚫 **본문 칸에 폭을 주지 마라 — 조용히 무시되고 오류도 안 난다.**
 |
 | 🔑 **값은 최악의 내용을 실제로 그려서 쟀다** (Chromium 실측 · 1920px):
 |
 |   유형       `어필리에이트`                → 84
 |   상태       `기한 경과` 이름표            → 68
 |   진행 요약   `수락 999/999` + 막대 64px   → 169
 |   기간       `2026-12-31 ~ 2026-12-31`   → 190
 |   작성자      `operator_admin_01`         → 90  (넘치면 접는다. 아래 규칙)
 |   순매출      `999,999,999원`             → 108
 |   관리       `이어서 작성` 버튼            → 113 (아래 절이 근거)
 |                                    고정 합계 822
 |
 | 🔑 **캠페인 이름만 남는 자리를 받는다** — 길이가 제각각이고 접혀도 되는 유일한 열이다.
 |    🚫 이름에도 폭을 주지 마라. 주면 남는 자리를 **여덟 열이 다시 균등 분할**한다.
 |
 | ⚠️ **표의 최소 폭을 `900px` 으로 잡은 것과 짝이다** (화면이 넘긴다). 1280px 창의
 |    표 칸이 910px 라 **그 단에서는 가로 스크롤이 나지 않는다** — 그것이 #633 이
 |    1024 를 800 으로 내리며 지키려던 것이다. 🚫 합계를 키워 그 선을 넘기지 마라.
 */
/*
 | 🔻 2026-10-05 (#1565) 유형 ~~84~~ → 94 · 작성자(아래 6번) ~~90~~ → 104. 글자가 칸 안여백 안으로 9.9 · 12.4px 넘쳐
 |    옆 칸 글자에 붙어 있었다(1280 · 1024 · 390 실측). 「어필리에이트」 69.9 + 24 → 94, 「flodev-admin」 78.4 + 24 → 104.
 |    표가 판 끝까지 넓어져 생긴 40px 안에서 이름 칸이 나머지를 받는다.
 */
.flo-cam-list thead th:nth-child(2) { width: 94px; }
/*
 | 🔻 2026-10-04 (#1557 재점검) 상태 68 → 90. 위 68 은 칸 여백을 4px 로 본 값이라(아래 관리 열 절과 같은 착오)
 |    글자 자리가 44px 뿐이었다. 이름표 「임시저장」 62px 가 칸 밖으로 넘쳤다(1280 · 390 실측 74/68).
 | 🔑 가장 넓은 이름표 「기한 경과」 65.4px + 칸 좌우 여백 24px = 89.4 → 90. 이름표는 한 낱말이라 접을 자리가 없다.
 */
.flo-cam-list thead th:nth-child(3) { width: 90px; }
/*
 | 🔻 2026-10-03 (#1557 A3) 진행 요약 169 → 120 · 기간 190 → 128. 이름 칸이 1280 에서 96px(390: 51px)라
 |    캠페인 이름이 세 줄로 접혔다. 두 칸에서 111px 를 이름 칸으로 옮긴다. 기간 128 은 「참여 ~2026-10-20」
 |    (13px) 한 줄이 드는 폭이다.
 | 🔑 막대는 숫자 아래로 내리고(`.flo-cam-progress`), 기간은 「시작일 ~」 · 「종료일」 두 줄로 선다
 |    (화면이 두 덩이로 나눠 그린다). 날짜 하나는 여전히 접히지 않는다.
 */
.flo-cam-list thead th:nth-child(4) { width: 120px; }
/* 🔻 2026-10-06 (#1577) 기간 ~~128~~ → 116. 칸이 `MM-DD ~ MM-DD` 한 줄(14px · 「12-31 ~ 12-31」 약 92) + 작은 줄 하나가 되어 12 를 이름 칸으로 돌린다 */
/* 🔻 2026-10-15 (#1784 검토) ~~116~~ → 148. 기간에 연도가 붙어(🧑 「기간에 연도도 붙히는게 좋지않을까?」 · `DisplayDate::span()`) 「2026.10.08 ~ 11.07」이 약 124 + 좌우 안여백 24 다. 116 에서는 1024 · 1199 에서 상태 칸으로 19px 넘쳤다. 해를 넘기는 기간은 아래 1199 이하 규칙이 「~」 뒤에서 접는다 */
.flo-cam-list thead th:nth-child(5) { width: 148px; }
/* 🔻 2026-10-05 (#1567 독립 검토) ~~align-items: center~~ → 끝. 「수락 N/M」은 숫자라 대시보드 「수락 / 대상」처럼 오른쪽에 서고, 막대도 같은 끝선에 선다 */
/* 🔻 2026-10-06 (🧑 결정 · #1572) ~~align-items: flex-end~~ → 가운데. 표의 머리 · 값이 모두 가운데라 「수락 N/M」과 막대도 칸 가운데에 선다 */
.flo-cam-progress { display: flex; flex-direction: column; align-items: center; gap: 4px; }
/*
 | 🔻 2026-10-12 (#1661 · 🧑 「진행 요약이랑 기간에 두줄로한게 어거지로 넣은 느낌임」) 넓은 창에서는 「수락 N/M」과 막대를 한 줄에 둔다(막대 64 → 32).
 |    ~~숫자 위 · 막대 아래 두 줄~~ 휴대폰 카드(640 이하)는 그대로 쌓는다(아래 `@media` 가 격자로 다시 잡는다).
 | 🔻 독립 검토: ~~기간 칸의 작은 줄을 넓은 창에서 눈에서 걷었다~~ → 1200 이상은 기간 뒤 같은 줄 · 좁으면 둘째 줄이다(아래).
 */
@media (min-width: 641px) {
    .flo-cam-progress { flex-direction: row; justify-content: center; gap: 8px; }
    .flo-cam-progress .flo-bar { width: 32px; }
}
/*
 | 🔻 2026-10-12 (#1661 독립 검토) 기간 뒤 작은 줄을 눈에서 걷던 규칙을 되돌렸다(`title` 풍선만 남아 키보드 · 터치에서 안 보였다).
 |    작은 줄은 기간 뒤 같은 줄에 흐린 글자로 이어지고, 칸이 좁으면 다음 줄로 접힌다(`inline-block` 이라 글귀 통째로 접힌다).
 */
/* 🔑 열이 넉넉한 창(1200 이상)은 기간 뒤 한 줄 · 그보다 좁으면 둘째 줄이다(이어 붙인 점은 한 줄일 때만) */
.flo-period__note { display: block; }
/*
 | 🔻 2026-10-15 (#1784 · 🧑 「참여 종료가 옆에 바로 붙어있으니깐 조 별론듯」) 넓은 창의 작은 줄은 ~~이어 붙인 점(「· 」 · `::before`)~~ →
 |    사이 8 + 옅은 세로선 + 8 로 가른다. #1661(🧑 두 줄이 어거지) 결정대로 한 줄은 지킨다. 열은 연도가 붙어 ~~200~~ → 240 이다.
 */
@media (min-width: 1200px) {
    .flo-cam-list :is(thead) th:nth-child(5) { width: 240px; } /* 🔑 `:is()` 로 한 단 비껴 쓴다 · 열 폭 일곱을 세는 시험(`CampaignListScreenTest`)의 셈에 더해지지 않는다 */
    .flo-period__note { display: inline-block; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--flo-line); vertical-align: baseline; }
}
/* 🆕 2026-10-15 (#1784 검토) 1199 이하에서 해를 넘기는 기간(「2026.12.20 ~ 2027.01.15」 약 160)은 열(148)보다 길다 · 「~」 뒤에서 두 줄로 접는다. 같은 해 기간은 한 줄이다 */
/*
 | 🔻 2026-11-03 (#1975) ~~`.flo-num.flo-period__range`~~ → 앞에 `.flo-main` 을 붙였다.
 |    같은 글자가 `whitespace-nowrap` 도 달고 있어, 셈이 같은 `.flo-main .whitespace-nowrap`(이 파일 뒤쪽)이 이겨 접기가 한 번도 적용되지 않았다.
 |    1024 ~ 1199 에서 캠페인 목록 진행 중 · 종료 탭과 대시보드의 해 넘김 기간이 35.6px 넘쳤다(실측).
 | 🚫 셈을 다시 낮추지 마라 · `PeriodColumnFitTest` 가 이 규칙이 줄바꿈 금지 규칙보다 셈이 높은지 잰다.
 */
@media (max-width: 1199px) {
    .flo-main .flo-num.flo-period__range { white-space: normal; }
}
.flo-cam-list thead th:nth-child(6) { width: 104px; }
.flo-cam-list thead th:nth-child(7) { width: 108px; }
/*
 | 🔻 2026-10-05 (#1565 · 정본 125- 「정렬 기준선과 4px 격자」) 관리 ~~113~~ → 121. 표가 판 끝까지 넓어져(감싼 칸 920 → 960)
 |    마지막 칸의 오른쪽 안여백이 12 에서 판 안여백 20 이 됐다(12 + 버튼 88.1 + 20 → 121).
 */
/* 🔻 2026-10-05 (#1567) 관리 머리에 `col="action"`(가운데)을 달았다. 끝 열 보정(0,3,1 · 144)에 지지 않도록 `.flo-main` 을 붙인다 */
/* 🔻 2026-10-06 (#1577) ~~121~~ → 113. 표가 판 내용선 안에 서며 오른쪽 안여백이 다시 12 다(12 + 버튼 88.1 + 12) */
/*
 | 🔻 2026-10-29 (#1915 · 🧑 「C 이 열만 단추 폭 축소 (권장)」) ~~113~~ → 144. 관리 칸에 단추가 둘(「수정」 · 「종료」 / 「수정」 · 「삭제」)이다.
 |    12 + 단추 56 + 사이 8 + 단추 56 + 12 = 144. 단추 최소 폭은 아래 「캠페인 목록 관리 칸 단추」 절이 이 열만 56 으로 낮춘다.
 |    88 그대로 두 개면 208 이라 1280 창에서 이름 칸이 60 이 됐다(실측 · 1280 · 작성자 열 없음).
 */
.flo-main .flo-cam-list thead th:nth-child(8) { width: 144px; }
/*
 | 🆕 캠페인 목록 관리 칸 단추 (2026-10-29 · 이슈 #1915 · 🧑 「C 이 열만 단추 폭 축소 (권장)」).
 | 🔑 표 안 단추의 최소 폭 88(#1737 · #1738)을 **이 열에서만** 56 으로 낮춘다. 단추 글자가 모두 두 글자(수정 · 삭제 · 종료)라
 |    글자 28 + 좌우 12 · 12 + 테두리 2 = 54 가 들어간다. 높이 · 안여백 · 글자 크기는 그대로다(R-308 · 🚫 깎지 마라).
 | 🚫 다른 표로 넓히지 마라 · 나머지 표는 88 하나로 폭을 맞춘다는 결정이 그대로다.
 | 🔑 `nowrap` 은 두 단추가 아래로 접히지 않게 한다(#1037 · 🧑 「버튼이 아래로 길어지는 거 하지 말 것」). 넘치면 눈에 보여 신고된다.
 | 🔑 창(`.flo-modal`) 안 단추는 빼 둔다 · 칸 안에 둔 확인 창의 「취소」 · 「삭제」는 다른 창과 같은 크기다(#1585).
 */
.flo-main .flo-cam-list td.flo-col--action .basic-btn.mini:not(:where(.flo-modal *)) { min-width: 56px; }
.flo-main .flo-cam-list td.flo-col--action .flo-row-actions { flex-wrap: nowrap; }

/*
 | 🆕 2026-09-29 (#1527 H16). 이름 칸은 남는 자리를 받는 유일한 열이라
 |    1280px 창에서 88px 뿐이다(#1018 이 지킨 값 · 위 근거 참조. 여기에 폭을
 |    직접 주면 여덟 열이 다시 균등 분할되므로 폭 자체는 그대로 둔다).
 | 🚨 `.flo-th` 의 공용 `white-space: nowrap` 때문에 「캠페인 이름 ▾」(글자+정렬
 |    표식) 78px 가 88px 칸의 안여백 24px 을 뺀 64px 안에 못 들어가 오른쪽으로
 |    3px 흘러 「유형」 칸 글자와 겹쳐 정렬 표식이 잘린 것처럼 보였다(실측).
 | 🔑 이 칸만 접히게 둔다. 잘리는 것이 아니라 두 줄로 접히는 것으로 바꾼다(R-308).
 */
.flo-cam-list thead th:nth-child(1) { white-space: normal; }

/* ── 관리 열의 버튼은 한 줄로 선다 (2026-08-31 · 🧑 지시 · 이슈 #1037) ──────
 |
 | 🧑 *"이어서 보기 버튼 밑으로 내리지 말고 옆으로 길어지게 변경.
 |     지금처럼 버튼이 아래로 길어지는 거 하지 말 것"*
 |
 | 🚨 **`이어서 작성` 이 두 줄로 접혀 그 행만 높아졌다** (버튼 62px · `열기` 는 32px).
 |    임시저장이 섞인 목록에서 **행 높이가 두 가지로 갈렸다.**
 |
 | 🔑 **필요한 열 폭은 112.1px 이다** (Chromium 실측):
 |
 |     버튼 한 줄 폭   88.1   글자 66.1 + 좌우 안여백 20 + 테두리 2
 |     칸 좌우 여백    24.0   `.common-table tbody td.flo-td` (이 파일이 12px 로 덮는다)
 |                   ──────
 |                    112.1  →  올려서 113
 |
 | 🚨 **직전 값 `97` 은 칸 여백을 4px 로 보고 나온 숫자다.** #1018 이 킷 원본
 |    (`common.css:870` 의 `padding: 12px 4px`)을 읽었는데, **같은 저장소의 이 파일이
 |    그 값을 12px 로 덮고 있다**(아래 «셈이 킷보다 높아야 이긴다» 절). 8px 로 셈해
 |    96.1 이 나왔고 97 로 올렸다. 16px 이 모자랐다.
 | 🔑 **#633(2026-08-25)이 잰 값이 113 이었고 그쪽이 맞았다.** 🚫 다시 97 로 내리지 마라.
 |
 | 🔑 **폭과 `nowrap` 은 둘 다 필요하다.** 폭만 주면 라벨이 길어질 때 **다시 조용히
 |    두 줄**이 되고, `nowrap` 만 주면 **버튼이 옆 칸으로 넘친다.**
 |    🔑 그래도 `nowrap` 을 함께 두는 이유는 **고장 나는 방향을 바꾸기 때문**이다.
 |    넘치는 것은 **눈에 보여 신고되고**, 접히는 것은 **행 높이만 바뀌어 아무도 신고하지 않는다.**
 | 🚫 `.flo-btn` 전체에 주지 마라. 이 열 말고 두 줄로 접히는 버튼은 없다(전 화면 실측).
 |    🔻 2026-09-23 (#1453) 버튼 줄(`.flo-form__actions`)에서도 접혔다. 그 자리는 줄 넘김과
 |    함께 아래에서 따로 막았다. `.flo-btn` 전체에 주지 않는 판단은 그대로다.
 */
.flo-cam-list tbody td:nth-child(8) .flo-btn { white-space: nowrap; }

/*
 | 🚨 **아이디에는 띄어쓰기가 없어 그대로 두면 칸을 넘는다.** 한글은 낱말 단위로
 |    접히지만 `operator_admin_01` 같은 글자는 **접을 자리를 못 찾아 흘러나온다.**
 | 🔑 접히는 것은 잘리는 것이 아니다 (R-308). 값이 다 보인다.
 */
.flo-cam-list tbody td:nth-child(6) { overflow-wrap: anywhere; }

/* ── 기간 조건 두 칸 (`campaign/list` · 이슈 #1021) ────────────────────
 |
 | 🔑 **두 칸이 한 조건**이라 한 덩어리로 묶어 이름표·물결표와 함께 움직이게 한다.
 |    풀어 두면 좁은 창에서 `기간` 만 앞줄에 남고 날짜 칸이 다음 줄로 떨어진다.
 | 🚫 고정 폭을 박지 마라 (R-308). 🔑 덩어리 안에서도 접힐 수 있어야 한다.
 | ⚠️ `min-width` 를 물려받지 않게 한다. 날짜 칸은 글자 칸보다 짧아도 다 보인다.
 */
.flo-filter-period { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-filter-period > .flo-t-caption { color: var(--flo-ink-2); white-space: nowrap; }
.cont-wrap .flex-box-ui .flo-filter-period input[type="date"] { min-width: 0; }

/*
 | 🆕 2026-09-29 (#1527 H16). 캠페인 목록만 조건이 넷(이름·상태·유형·기간)이라
 |    `.left-box` 폭 912px 에 이름칸 220 · 셀렉트 140×2 · 기간 301 · 검색 108 을
 |    한 줄로 두면 21px 이 넘쳐, 「검색」 단추 하나만 다음 줄로 떨어져 외로이 남았다
 |    (1280px 실측). `.flo-filter-period` 는 이 화면에만 있어 다른 세 필터 바
 |    (batches·errors·mail-logs, 조건 둘뿐)는 건드리지 않는다.
 | 🔑 값이 자잘한 이름·유형 상자와 자리표시 글자만 줄여도 40px 이 남아 한 줄에 든다.
 */
.left-box:has(.flo-filter-period) input[type="text"],
.left-box:has(.flo-filter-period) input:not([type]) { min-width: 200px; }
.left-box:has(.flo-filter-period) select { min-width: 130px; }

/*
 | 🆕 **필터 줄 입력·선택 상자와 「검색」 단추의 높이를 맞춘다**
 |    (2026-09-29 · 이슈 #1527 독립 검토 재검토). 상자는 `--flo-control-h`(38px, 전역
 |    토큰)를 쓰는데 단추는 킷의 `line-height` 만 물려받아 40px 로 그려져 같은 줄에서
 |    2px 어긋난다(`.flo-search-submit` 옆의 같은 판단 참고).
 | 🔑 `.left-box` 는 캠페인 목록 · 정기 작업 현황 · 연동 오류 · 메시지 발송 로그 네
 |    화면이 함께 쓴다(H16 주석 참고). 넷 다 같은 짜임이라 같이 맞는다.
 */
.left-box .flo-btn {
    height: var(--flo-control-h);
    line-height: calc(var(--flo-control-h) - 2px);
}

/* 🔑 조건 칩 줄은 필터 바 아래에 붙는다 — 사이가 벌어지면 딸린 것으로 안 보인다 */
.flo-filter { gap: 0; }
.flo-filter .flo-filter__row + .flo-filter__row { margin-top: -8px; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
 | 참조 화면에서 되풀이되는 구조 부품 (이슈 #668)
 |
 | 🧑 2026-08-26 «기존 페이지와 화면 차이». 참조 캡처 22장을 대조해,
 |    **참조가 반복해서 쓰는데 우리에게 없던 것**을 부품으로 만들었다.
 | 🔑 값은 킷과 참조 캡처에서 읽었다. 🚫 새 값을 지어내지 마라 (R-306).
 | 🚫 화면마다 따로 만들지 마라 — 22벌이 되고 서로 어긋난다.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── 절 머리 — 「1. 캠페인 기본 정보」 + 우측 액션 ────────────────────
 |
 | 🔑 번호는 **순서가 있는 절에만** 붙인다. 참조도 캠페인 상세에만 쓴다.
 | 🚫 화면 제목(h1)을 여기 또 넣지 마라 — 제목은 화면당 하나이고 셸이 그린다.
 */
.flo-sec { margin-bottom: 32px; }
.flo-sec:last-child { margin-bottom: 0; }
/*
 | 🆕 판 · 서브카드 · 절의 마지막 덩어리는 아래 여백이 없다 (2026-10-06 · #1585 · 125 「판 안여백 20 사방」).
 | 🚨 마지막 문단(8)이나 `mb-3` · `mb-4` 를 단 마지막 서브카드가 안여백에 더해져, 위는 20 · 16 인데 아래만
 |    24 · 28 · 36 이었다(캠페인 요약 · 0원 상품 생성 · 성과 · 응답 관리 · 명단, 1280 실측).
 | ~~🔑 셈 (0,2,0) 이라 `mb-*` 유틸(0,1,0)과 문단 규칙(`:where(.flo-main) p`)을 이긴다.~~ 🔻 2026-10-06 (#1585 검토) 처음 셈은 (0,3,0)
 |    이었다(`.flo-main` · `:is()` · `:last-child`). `.flo-main` 을 `:where()` 로 감싸 (0,2,0) 이다. `mb-*` 유틸(0,1,0)과 문단 규칙
 |    (`:where(.flo-main) p`, 0,0,1)은 이기고, 자리마다 여백을 정한 무거운 규칙(0,3,0 이상)에는 진다.
 | 🔑 감춘 글자(`.flo-sr-only`)와 음수 여백 유틸(`-mt-*` · `-mb-*` · `-mx-*`)은 뺀다. 화면에서 자리를 차지하지 않거나 여백 자체가 뜻이다.
 | 🔑 머리만 남은 판은 머리 아래 여백(16)을 지킨다. 머리 규칙(`.flo-main h2.flo-t-section` 등, 0,2,1)이 이 줄보다 무겁다.
 | 바깥 판 사이는 판 자신의 여백이 맡는다.
 | 🔻 규칙 줄은 여백 유틸(`.flo-main .mb-*`, 0,2,0) 바로 뒤에 있다. 셈이 같아 뒤에 와야 이긴다. 🚫 이 자리로 되돌리지 마라.
 */
.flo-sec__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 12px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~14~~ */
}
.flo-sec__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 0; }
.flo-sec__desc,
.flo-main .flo-sec__desc { font-size: 13px; color: var(--flo-ink-3); margin: 4px 0 0; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~6~~ */
.flo-sec__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── 서브카드 — 큰 카드 안의 작은 판 ────────────────────────────────
 |
 | 🔑 참조는 「일별 순매출」·「TOP 인플루언서」·「전환 퍼널」을 이 판에 담는다.
 | 🔑 제목 옆의 작은 회색 글자는 **기준**을 밝힌다 — 🚫 빼지 마라. 무엇을 세었는지
 |    모르면 숫자를 읽을 수 없다.
 */
/*
 | 🔻 2026-09-29 (#1530 · 🧑 결정) 안여백 20/22 → 16 사방. 중첩 판의 글자 시작이
 |    흰 판 가장자리에서 47px 안쪽이던 것을 37px 로 줄인다. 값은 R-306 목록에 있다.
 */
/* 🔻 2026-10-05 (#1565) 반경 ~~10~~ → 12(카드 눈금 하나) · 안여백 16 을 내용선 이름(`--flo-inset`)으로 둔다 */
/* 🔻 2026-10-14 (#1737) 안여백 ~~16 사방~~ → 내용선 이름(`--flo-card-inset` 20 · 860 이하 16)에서 테두리 1 을 뺀다. 글은 카드 가장자리 20(16)에서 시작한다.
   🧑 #1530 의 16 은 #1737 승인안(🧑 「기준점 잡아서 진행해줘」)으로 대체했다. 흰 판 안 서브카드는 #1619 의 구분선 절이라 이 값을 쓰지 않는다(바깥에 홀로 선 서브카드만) */
.flo-subcard {
    --flo-inset: var(--flo-card-inset);
    background: var(--flo-card); border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius-card); padding: calc(var(--flo-inset) - 1px);
}
/*
 | 🔻 2026-10-03 (#1558 C3) `align-items: baseline` → `center`. 상품 구매 URL 메일 본문 판의 머리가 45px 로
 |    다른 판 머리(35px)보다 컸다. 제목(h3)이 `.flo-main h3` 의 아래 여백 10 을 그대로 받아 줄 높이에 더했다.
 |    여백은 아래 `.flo-main .flo-subcard__title` 이 0 으로 걷는다.
 */
.flo-subcard__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
/* 🔻 2026-09-29 (#1530) 14/600 → 16/700 · 판 제목과 같은 눈금(T2) */
.flo-subcard__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 0; }
.flo-subcard__note { font-size: 13px; color: var(--flo-ink-3); }
/* 🔑 빈 상태는 판 가운데 — 🚫 왼쪽에 붙이지 마라. 값이 있는 것처럼 보인다 */
.flo-subcard__empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--flo-ink-3); }
.flo-subcard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* 🆕 2026-10-06 (#1585) 나란한 카드의 마지막 단추는 카드 바닥에 선다. 설명 줄 수가 달라도 단추 줄이 맞는다(요약 「콘텐츠 점검」 · 「성과」) */
/* 🔻 2026-10-13 (#1664 검토) ~~`.flo-main .flo-subcard--foot` 두 줄(세로 flex · 마지막 단추 바닥)~~ 을 걷었다. 쓰던 곳(요약 「콘텐츠 점검」 · 「캠페인 성과」)이 설정 줄(`x-setting-row`)이 되어 부르는 화면이 없다 */
@media (max-width: 1100px) { .flo-subcard-grid { grid-template-columns: 1fr; } }
/*
 | 🔻 **2026-10-11 (#1619 · 🧑 「안쪽은 구분선만 (권장)」) 흰 판 안의 작은 판은 테두리 상자가 아니라 구분선 절이다.**
 |
 | 🚨 흰 판 안에 테두리 판을 두고 그 안에 다시 편집기 틀 · 미리보기 틀을 두어 상자가 세 겹이었다
 |    (캠페인 요약 「캠페인 내용」 · 제안 메일 작성 · 상품 구매 URL 발송 · 템플릿 수정 · 제안 메일 발송).
 | 🔑 판 안의 절은 테두리 · 바탕 · 안여백을 걷고, 앞에 내용이 있으면 **위 구분선 1px + 위 안여백 16** 으로 나눈다.
 |    첫 절(앞이 판 머리 · 절 제목이거나 아무것도 없음)은 구분선이 없다. 절 사이 위 여백은 화면의 `mb-4`(16)가 준다.
 | 🔑 절 제목은 16/700 그대로이고, 제목 밑줄(#1547)은 절 안에서는 긋지 않는다. 경계마다 선이 하나다.
 | 🔑 판 한 겹 화면(`flo-stack`)의 가장 바깥 판은 위 규칙대로 흰 판이다. 그 안에 든 판부터 절이 된다.
 | 🔑 테두리 상자로 남는 것: 고르는 카드(`.flo-choice` · `.flo-pick-card` · `.flo-card`) · 지표 카드(`.flo-kpi`,
 |    🧑 「떨어진 카드」 #1602) · 관심목록 카드(`.flo-group-card`) · 그 자체로 다른 물건인 틀(메일 미리보기 · 편집기 입력 틀).
 | 🚫 절에 테두리를 되살리지 마라. 판 안 상자는 한 겹까지다.
 */
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) :is(.flo-subcard, .flo-sheet):not(.flo-group-card) {
    --flo-inset: inherit;
    background: transparent; border: 0; border-radius: 0; padding: 0;
}
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) * + :is(.flo-subcard, .flo-sheet, .flo-subcard-grid):not(.flo-group-card):not(:where(.cont-sec > .flo-sec > *)) {
    border-top: 1px solid var(--flo-line); padding-top: 16px; /* 🔻 2026-10-11 (#1641) 절 카드(`.flo-sec`)의 직접 자식은 선 없이 여백 24 (아래 「절마다 흰 카드」) */
}
/* 🔑 앞이 판 머리 · 제목 · 보이지 않는 요소이면 첫 절이다. 나란한 칸(격자 · 줄 · 좌우 나눔) 안의 절도 앞 절과 나란하므로 선이 없다 */
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) :is(h1, h2, h3, h4, .flo-panel__head, .flo-sec__head, .flo-subcard__head, input[type="hidden"], script, template, style, [hidden], .hidden, .flo-sr-only) + :is(.flo-subcard, .flo-sheet, .flo-subcard-grid),
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) :is(.flo-subcard-grid, .grid, .flex, .flo-split) > :is(.flo-subcard, .flo-sheet) {
    border-top: 0; padding-top: 0;
}
/* 🔑 두 열 격자는 둘째 줄부터 위 구분선을 긋는다. 열 사이는 테두리가 없어 32 로 띄운다 */
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) .flo-subcard-grid { column-gap: 32px; }
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) .flo-subcard-grid > :is(.flo-subcard, .flo-sheet):nth-child(n+3):not(:where(.cont-sec > .flo-sec > .flo-subcard-grid > *)) {
    border-top: 1px solid var(--flo-line); padding-top: 16px;
}
@media (max-width: 1100px) {
    .flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) .flo-subcard-grid > :is(.flo-subcard, .flo-sheet):nth-child(n+2):not(:where(.cont-sec > .flo-sec > .flo-subcard-grid > *)) {
        border-top: 1px solid var(--flo-line); padding-top: 16px;
    }
}
.flo-main :is(.cont-sec:not(.flo-stack), .flo-subcard, .flo-sheet) :is(.flo-subcard, .flo-sheet):not(.flo-group-card) > :is(.flo-subcard__head, .flo-sec__head, h2.flo-t-section, h3.flo-t-section) {
    padding-bottom: 0; margin-bottom: 16px; border-bottom: 0; /* 🔻 2026-10-13 (#1663) ~~margin-bottom: 12px~~ 카드 머리와 본문 사이 16 하나 */
}
/*
 | 🔻 **2026-10-11 (#1641 · 🧑 「A 절마다 흰 카드 (권장)」) 절이 여럿인 판은 절마다 흰 카드 한 장이다.**
 |
 | 🚨 캠페인 요약은 흰 판 하나에 절 셋이 들어 있었고, 판 머리 선을 걷은(#1638) 뒤 절 경계가 흐려졌다.
 |    남은 가는 선(#1619 위 선 · 단계 묶음 위 선 · 취소 위 선)은 어디가 절 경계인지 가리지 못했다.
 | 🔑 한 규칙: **면으로 나눈다.** 절(`.flo-sec`)이 직접 든 판은 바탕을 걷고(회색 바탕에 얹는다),
 |    절마다 흰 카드(테두리 1 · 반지름 12 · 안여백 20), 카드 사이 16. 카드 안 덩어리는 선 없이 여백 24.
 | 🔑 판 위쪽의 지표 줄 · 알림은 카드 밖 회색 바탕에 놓이고 아래 간격 16 이다.
 | 🔑 판 한 겹 화면(`flo-stack`)은 이미 서브카드마다 카드라 이 규칙에 들지 않는다.
 | 🔑 ~~판 안 절은 위 선 1px + 위 안여백 16(#1619)~~ 은 절 카드의 직접 자식에게는 적용하지 않는다. 그 밖(절이 없는 판 · 서브카드 안)은 그대로다.
 | 🔑 절 머리 아래는 #1638 규칙 그대로다(아래가 상자이면 12 · 글 · 폼이면 16). 카드 안에서 따로 정하지 않는다. 위 여백만 0 이다.
 | 🔑 카드 안여백은 서브카드와 같은 방식으로 내용선 이름(`--flo-inset`)에 둔다(#1565). 860 이하 16.
 | ⚠️ 카드 사이 · 지표 줄 · 알림 아래 간격 16 은 이 두 화면에서 `mb-*` 유틸보다 셈이 무거워 이긴다(화면에 단 `mb-4` 등은 같은 값이라 겹치지 않는다).
 */
.flo-main .cont-sec:not(.flo-stack):has(> .flo-sec) > :not(.flo-sec) { margin-bottom: 16px; }
.flo-main .cont-sec:not(.flo-stack) > .flo-sec {
    --flo-inset: var(--flo-card-inset); /* 🔻 2026-10-14 (#1737) ~~20 · 안여백 20(선 포함 21)~~ → 선 포함 20 · 860 이하 16 */
    background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
    padding: calc(var(--flo-inset) - 1px); margin-bottom: 16px;
}
.flo-main .cont-sec:not(.flo-stack) > .flo-sec:not(:has(~ .flo-sec)) { margin-bottom: 0; }
/* 🆕 2026-10-14 (#1738 · 묶음 E) 절 카드 사이에 선 「검색 필터」 판(`x-panel`)도 절 카드와 같은 흰 카드다(상품 구매 URL 발송). 필터는 늘 따로 선 판이다 */
.flo-main .cont-wrap .section .cont-sec:not(.flo-stack):has(> .flo-sec) > .cont-sec.flo-panel:not(.btn-cont-sec) {
    --flo-inset: var(--flo-card-inset);
    background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
    padding: calc(var(--flo-inset) - 1px); margin: 0 0 16px;
}
.flo-main .cont-sec:not(.flo-stack) > .flo-sec > .flo-sec__head { margin-top: 0; } /* 🔻 2026-10-11 (#1641 검토) ~~margin-bottom: 20px~~ 아래 여백은 #1638 규칙을 따른다 */
.flo-main .cont-sec:not(.flo-stack) > .flo-sec > :is(.flo-subcard, .flo-subcard-grid):not(:last-child) { margin-bottom: 24px; }
.flo-main .cont-sec:not(.flo-stack) > .flo-sec > .flo-subcard-grid { row-gap: 24px; }
/* 🔻 2026-10-14 (#1737) ~~`@media (max-width: 860px) { … > .flo-sec { --flo-inset: 16px; } }`~~ 860 이하 16 은 `--flo-card-inset` 이 갖는다 */

/* ── 지표 행 ────────────────────────────────────────────────────────
 |
 | 두 벌이다. `cards` 는 칸마다 테두리(대시보드·성과), `strip` 은 한 상자에
 | 세로 칸막이(캠페인 상세).
 |
 | 🚨 **데이터 없는 지표에 추정값을 채우지 마라.** 값이 없으면 `—` 로 두고
 |    **왜 없는지**를 함께 쓴다. 0 으로 채우면 «재 봤고 0이다» 라는 다른 사실이 된다.
 */
/* 🔻 2026-10-03 (#1558 B6 · C5) 칸 사이 14 → 16 · 125 의 판 사이 눈금 */
.flo-kpis { display: grid; gap: 16px; margin-bottom: 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) 아래 ~~18~~ → 판 사이 16 */
/* 🆕 2026-10-06 (#1587 B) 지표 줄 바로 뒤의 캡션은 그 줄의 덧말이다(「… 기준입니다」 · 「반송 1건 · 불만 0건」). 8 로 붙인다.
   16 이면 다음 절 제목과 같은 거리라 덧말이 아래 절의 머리말로 읽혔다(캠페인 성과 · 발송 이력) */
.flo-main .flo-kpis:has(+ .flo-t-caption) { margin-bottom: 8px; }
/*
 | 🆕 2026-10-14 (#1737 · 묶음 H) 판 안 캡션의 리듬 하나 · 정본 125- 「화면 기준 눈금」.
 | 🚨 같은 「설명 → 내용」이 8 · 12 로, 「내용 → 덧말」이 8 · 16 으로 화면마다 달랐다(쿠폰 · 상품 구매 URL · 발송 완료 · 응답 관리 · 발송 이력 · 대시보드).
 | 🔑 판 설명(캡션) → 내용 12 · 내용 → 덧말(캡션) 8 · 잇따른 도움말 사이 4.
 | 🔑 앞 덩어리는 표 · 지표 · 단계 · 미리보기 · 카드 격자 · 쪽 넘김만이다. 알림 · 접는 판 뒤 캡션은 다음 내용의 설명이라 이 줄에 들지 않는다.
 */
/* 🔑 공개 화면을 되풀이해 보여 주는 미리보기(`.flo-preview__screen`) 안은 뺀다. 저장소 관례(필수 표시 · 이름표 규칙과 같음) · 🔻 2026-10-14 (#1737 검토) 처음 적용은 미리보기까지 닿았다 */
.flo-main :is(.cont-sec, .flo-sec, .flo-subcard, .flo-sheet) > p.flo-t-caption:has(+ :is(div, form, ol, ul, dl, table, section, details, nav):not(.flo-inline-alert)):not(.flo-preview__screen *) { margin-bottom: 12px; }
.flo-main :is(.cont-sec, .flo-sec, .flo-subcard, .flo-sheet) > :is(.flo-kpis, .flo-kpis-line, .flo-table-block, .flo-table-wrap, .flo-steps, .flo-preview__panels, .flo-card-grid, .flo-pager):has(+ p.flo-t-caption):not(.flo-preview__screen *) { margin-bottom: 0; }
.flo-main :is(.cont-sec, .flo-sec, .flo-subcard, .flo-sheet) > :is(.flo-kpis, .flo-kpis-line, .flo-table-block, .flo-table-wrap, .flo-steps, .flo-preview__panels, .flo-card-grid, .flo-pager) + p.flo-t-caption:not(.flo-preview__screen *) { margin-top: 8px; }
.flo-main :is(p.flo-t-caption, .flo-field__help):has(+ :is(p.flo-t-caption, .flo-field__help)):not(.flo-preview__screen *) { margin-bottom: 0; }
.flo-main :is(p.flo-t-caption, .flo-field__help) + :is(p.flo-t-caption, .flo-field__help):not(.flo-preview__screen *) { margin-top: 4px; }
/* 간격(gap 8)을 가진 세로 묶음 안에서는 4 를 맞추려 위로 4 당긴다(명단 「ID로 직접 추가」 도움말 두 줄이 16 으로 빈 줄처럼 보였다) */
.flo-main .flo-roster-add__body > p.flo-t-caption { margin: 0; }
.flo-main .flo-roster-add__body > p.flo-t-caption + p.flo-t-caption { margin-top: -4px; }
/*
 | 🆕 2026-09-29 (#1527 H24). 성과 화면의 `<x-kpis :cols="2">` 는 `data-cols="2"` 를
 |    찍지만 이 규칙이 없어 격자 열 지정이 통째로 빠졌다. 지정 없이는 `grid` 만
 |    있어 두 칸이 세로로 쌓였다. 3·4·5 와 같은 자리에 2 를 더한다.
 */
.flo-kpis[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flo-kpis[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flo-kpis[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flo-kpis[data-cols="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .flo-kpis[data-cols="4"], .flo-kpis[data-cols="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .flo-kpis { grid-template-columns: 1fr !important; } }

.flo-kpis--strip {
    gap: 0; border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card); /* 🔻 2026-10-05 (#1565) ~~10~~ → 12 */
    background: var(--flo-card); overflow: hidden;
}
.flo-kpis--strip .flo-kpi { border: 0; border-radius: 0; text-align: center; }
.flo-kpis--strip .flo-kpi + .flo-kpi { border-left: 1px solid var(--flo-line); }

/*
 | 🆕 **좁은 창의 지표 한 줄 요약** (2026-10-06 · 이슈 #1594 · 정본 125- 「좁은 창의 지표 한 줄 요약」).
 |
 | 🚨 390 에서 지표 세 칸이 세로로 쌓여 판이 약 400px 길어졌다(발송 이력). 숫자 세 개를 보려고 한 화면을 넘겼다.
 | 🔑 640 이하에서는 지표 칸(`flo-kpis--fold`)을 감추고 같은 이름표 · 같은 숫자를 한 줄(`flo-kpis-line`)로 그린다.
 |    641 이상은 칸 그대로다. 둘 중 하나만 보이므로 낭독기도 한 번만 읽는다.
 | 🔑 겉모양은 지표 칸과 같은 테두리 판(선 · 반경 12)이다. 이름표 13 · 값 14/600 · 항목 사이 「·」.
 */
.flo-kpis-line { display: none; }
@media (max-width: 640px) {
    .flo-kpis.flo-kpis--fold { display: none; }
    /* 🆕 #1594 후속 · 지표 아래 건수 캡션은 한 줄 요약 판의 덧말이 진다. 판 밖에 홀로 떠 있었다 */
    .flo-main p.flo-kpis-fold-caption { display: none; }
    .flo-kpis-line {
        display: block; padding: 12px calc(var(--flo-card-inset) - 1px); /* 🔻 2026-10-14 (#1737) 좌우 ~~16(선 포함 17)~~ → 선 포함 16 */
        background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
    }
    /* 🔑 `.flo-main` 을 붙인다. 셸의 문단 규칙(아래 여백 8)이 이겨 줄 사이가 벌어졌다(실측) */
    .flo-main .flo-kpis-line__items { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-2); } /* 🔻 2026-10-14 (#1739 · 묶음 M) 칸 사이 ~~8 + 「·」~~ → 16 · 점 없이 간격으로 가른다 */
    .flo-kpis-line__item { white-space: nowrap; }
    /* 🆕 2026-10-09 (#1602 후속) 글 값(상품명 · 기간)은 줄을 넘길 수 있다 · 긴 상품명이 판 밖으로 넘치지 않는다(R-308). 낱말 단위로 접는다 */
    .flo-kpis-line__item--text { white-space: normal; word-break: keep-all; }
    /* 🔻 2026-10-14 (#1739 · 묶음 M) ~~`.flo-kpis-line__item + .flo-kpis-line__item::before { content: "·" … }`~~ 줄이 바뀌면 「·」가 줄 머리로 떨어졌다. 항목은 덩어리째(`nowrap`) 줄을 바꾸고 간격 16 이 가른다 */
    /* 🔑 줄 높이 1 · 13 글자 줄에 14 값이 섞이면 기준선이 밀려 줄이 21 이 됐다(지표 칸 `.flo-kpi__unit` 과 같은 보정) */
    .flo-kpis-line__item strong { line-height: 1; font-size: 14px; font-weight: 600; color: var(--flo-ink-1); font-variant-numeric: tabular-nums; }
    .flo-main .flo-kpis-line__note { margin: 4px 0 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
}

/* 🔻 2026-10-01 (#1547 · D-7) 안여백 18/20 → 16 사방. 테두리 판(서브카드)과 같은 값이다(125 「여백 눈금」) */
.flo-kpi {
    background: var(--flo-card); border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius-card); padding: calc(var(--flo-card-inset) - 1px); /* 🔻 2026-10-05 (#1565) 반경 ~~10~~ → 12 · 🔻 2026-10-14 (#1737) 안여백 ~~16~~ → 선 포함 20(860 이하 16). 지표 칸(#1642) 모양은 그대로이고 글 시작만 다른 카드와 같다 */
}
.flo-kpi__label { display: block; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); margin-bottom: 8px; } /* 🔻 2026-10-14 (#1737) 줄 높이 18 을 적는다(비율 1.3 미만이던 자리) */
/* 🔻 2026-09-29 (#1530 독립 검토) 28px → 26px · 지표 숫자 눈금 하나로 묶는다(flo-t-metric·flo-summary·flo-t-num-lg) */
.flo-kpi__value { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); /* 🔻 2026-10-05 (#1567) ~~1.15~~ → 32 */ color: var(--flo-ink-1); font-variant-numeric: tabular-nums; }
/* 🔑 단위는 숫자보다 작다. 크기가 같으면 자릿수로 읽힌다. 🔻 2026-09-29 15px → 14px(본문 눈금) */
/* 🔻 2026-10-06 (#1585) 줄 높이 1 · 단위가 지표 줄 높이(32)를 받으면 기준선이 밀려 값 줄이 36 이 됐다. 캠페인 성과의 「21건」 칸 덧말이 옆 「순매출」 칸보다 4px 아래였다(진행 띠의 같은 보정을 모든 지표 칸으로 넓힘) */
.flo-kpi__unit { font-size: 14px; font-weight: 400; margin-left: 2px; line-height: var(--flo-lh-ui); } /* 🔻 2026-10-14 (#1737) ~~14/500 · 줄 1 · 왼쪽 1~~ → 14/400/20 · 왼쪽 2. 숫자와는 글자 기준선으로 맞는다(부모가 baseline) */
.flo-kpi__note,
.flo-main .flo-kpi__note { font-size: 13px; color: var(--flo-ink-3); margin: 8px 0 0; }
/* 🚨 표식 이름을 바꾸지 마라 — 「재 봤고 0」과 「아직 안 쟀다」를 가르는 검사가 이 이름을 본다 */
.flo-kpi__value.is-empty { color: var(--flo-ink-3); }
/* 🔑 색은 화면이 고른다 — 돈·비율은 초록, 대상 수는 보라, 나머지는 먹색 */
.flo-kpi[data-tone="money"] .flo-kpi__value { color: var(--sig-progress-ink); }
/* 🆕 2026-10-06 (#1587 B) 돈 칸이 0 이면 먹색. 초록은 「들어온 돈이 있다」로 읽혀, 주문이 없는 구간의 「0원」이 성과처럼 보였다
   (캠페인 성과 · 성과 공유 화면). 「아직 안 쟀다」(`is-empty`, 흐린 색)와는 다르다. 0 은 잰 값이라 먹색 숫자로 둔다 */
.flo-kpi[data-tone="money"][data-zero] .flo-kpi__value { color: var(--flo-ink-1); }
.flo-kpi[data-tone="accent"] .flo-kpi__value { color: var(--flo-primary); }
.flo-kpi[data-tone="muted"] .flo-kpi__value { color: var(--flo-ink-3); }
/*
 | 🆕 **지표 칸의 칩 · 비율 막대** (2026-10-11 · 이슈 #1621 · 🧑 「R 조합 (권장)」).
 |
 | 🔑 칩: 이름표 앞 ~~32 칸 · 선 그림 16 · 기본 보라 틴트~~(🔻 2026-10-11 #1624 → 24 · 14 · 꽉 찬 그라데이션, 아래). 초록은 수락 · 들어온 돈(`ok` · `money`), 붉음은 발송 불가(`fail`),
 |    회색은 흐린 칸(`muted`)이다. 🚫 색만으로 뜻을 나르지 않는다 · 이름표 글자가 언제나 곁에 있다.
 | 🔑 칩이 있는 칸은 첫 줄이 「칩 · 이름표 · 기준」 세 칸이고, 나머지(값 · 덧말 · 막대)는 칸 폭을 다 쓴다.
 |    칩은 이름표 밖 앞자리 요소라(`flo-kpi__icon`) 이름표 글자를 읽는 검사와 낭독 순서가 그대로다.
 | 🔑 막대: 값 아래 ~~6~~(🔻 #1624 → 4) · 채움은 화면이 값으로만 넘긴다(`--flo-kpi-fill`, 검사 164). 값이 없으면 막대가 없다(R-307).
 | 🔑 640 이하 한 줄 요약(#1594)은 글자 줄 그대로다 · 칩과 막대는 칸(`flo-kpis--fold`)과 함께 감춰진다.
 */
/*
 | 🔻 2026-10-11 (#1624 · 🧑 「이모지 넣어서 좋긴한대 좀 더 디자인적으로 변화 좀 주고 그에 따른 박스 크기가 좀 커진거같은데 ㄱ것도 고려해줘」)
 |    칩 32 줄(칩 아래 12)과 막대 6(위 12)이 칸을 0.14.69 보다 21~39 키웠다(실측 89 → 110 · 89 → 128 · 115 → 136).
 | 🔑 칩은 24 · 선 그림 14 · 이름표와 한 줄이다. 칩 줄 아래 8 · 막대 4(위 8) · 칩이 있는 칸의 안여백은 위아래 12 · 좌우 16.
 |    잰 높이: 89 → 90 · 89 → 102 · 115 → 116(제안 응답 관리 · 캠페인 성과 · 발송 이력, 1440).
 | 🔑 칩은 꽉 찬 그라데이션(보라 → 분홍, 창 머리 띠와 같은 두 극) 위 흰 선 그림이다. 초록 · 붉음은 같은 결의 두 단 그라데이션.
 |    칸은 칩 색의 아주 옅은 모서리 빛(7%)을 갖는다(~~올림 1px · 그림자~~ 🔻 검토에서 걷었다 · 눌리지 않는 칸). 다른 안(옅은 틴트 칩)은 작업 기록에 둔다.
 | 🔑 ~~기간 칸의 경과 막대는 「N일 / M일」과 한 줄이다(막대 왼쪽 · 글자 오른쪽).~~ 🔻 2026-10-12 (#1642) 글자는 이름표 줄 오른쪽, 막대는 칸 맨 아래 얇은 줄이다.
 */
.flo-kpi:has(> .flo-kpi__icon) {
    display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 8px; align-content: start; padding: 12px calc(var(--flo-card-inset) - 1px); /* 🔻 2026-10-14 (#1737) 좌우 ~~16(선 포함 17)~~ → 선 포함 20(860 이하 16) */
}
/* 🔻 2026-10-11 (#1636) ~~칸 모서리 빛(`radial-gradient` 7% · `--flo-kpi-glow`)~~ 을 걷었다. 칸 바탕은 흰색 한 벌이다 */
/* 🔻 검토 · ~~칸에 마우스를 올리면 1px 떠오름~~ · 지표 칸은 눌리지 않는 상자(div)라 「누를 수 있다」로 읽혀 걷었다 */
.flo-kpi:has(> .flo-kpi__icon) > * { grid-column: 1 / -1; }
.flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__icon { grid-column: 1; margin-bottom: 8px; }
.flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__label { grid-column: 2 / -1; align-self: center; margin: 0 0 8px; line-height: var(--flo-lh-caption); } /* 🔻 2026-10-14 (#1737) 줄 ~~16~~ → 13/18 */
.flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__label:has(+ .flo-kpi__basis) { grid-column: 2; }
.flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__basis { grid-column: 3; align-self: center; margin-bottom: 8px; }
.flo-kpi__icon {
    display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
    background: var(--flo-violet-100); color: var(--flo-violet-600);
}
/*
 | 🔻 2026-10-11 (#1636 · 🧑 「살짝 에이아이티 나는 대시보드 이미지 영역」) 칩은 ~~보라 → 분홍 그라데이션 · 흰 선 그림 · 아래 그림자~~ 에서
 |    **옅은 틴트 네모 + 중간 보라 선 그림**으로 바뀐다. 그라데이션 · 빛 · 그림자가 없다. 초록 · 붉음 · 회색도 같은 결의 옅은 바탕이다.
 */
.flo-kpi__icon > svg { width: 14px; height: 14px; }
.flo-kpi:is([data-tone="ok"], [data-tone="money"]) .flo-kpi__icon {
    background: color-mix(in srgb, var(--sig-progress) 12%, var(--flo-card)); color: var(--sig-progress-ink);
}
.flo-kpi[data-tone="fail"] .flo-kpi__icon {
    background: color-mix(in srgb, var(--sig-fail) 10%, var(--flo-card)); color: var(--sig-fail-ink);
}
.flo-kpi[data-tone="fail"] .flo-kpi__value { color: var(--sig-fail-ink); }
.flo-kpi[data-tone="muted"] .flo-kpi__icon { background: var(--flo-line-soft); color: var(--flo-ink-3); }
.flo-kpi__basis { font-size: 13px; line-height: 16px; color: var(--flo-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flo-kpi__bar { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--flo-line-soft); overflow: hidden; }
.flo-kpi__bar > i { display: block; width: var(--flo-kpi-fill, 0%); height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--flo-primary), var(--flo-primary-brt)); }
.flo-kpi[data-tone="ok"] .flo-kpi__bar > i { background: var(--sig-progress); }
/* 🔻 2026-10-12 (#1642) 기간 칸의 경과 막대는 ~~값 아래 먹색 4 · 「N일 / M일」 덧말과 한 줄~~ → 칸 아래 가장자리에 붙는 얇은 줄(옅은 보라)이다.
   「N일 / M일」은 이름표 줄 오른쪽(`flo-kpi__basis`)이다. 시간의 흐름이라 비율 막대(위 `.flo-kpi__bar`)와 자리가 다르다 */
.flo-kpi__bar--time { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; margin: 0; border-radius: 0 0 var(--flo-radius-card) var(--flo-radius-card); background: var(--flo-line-soft); }
.flo-kpi__bar--time > i { border-radius: 0; background: var(--flo-violet-400); }
/*
 | 🆕 2026-10-09 (#1602 · 🧑 *"떨어진 카드 (권장)"*) 캠페인 요약 · 제안 응답 관리의 지표 판도 떨어진 지표 칸이다.
 |    붙은 한 줄 띠(`flo-summary`)였던 자리다. 그 띠가 갖던 것 중 지표 칸에 없던 것만 여기 더한다.
 | 🔑 여섯 칸(요약 띠) · 1200 이하 세 칸 · 700 이하 한 칸(위 규칙). 넷 · 다섯과 같은 접기 자리다.
 | 🔑 `flo-kpis--summary` · 낱말 단위 접기(R-308 · #1527 H17 「인플루/언서」).
 | 🔑 글 값은 16/700(#1536 🧑 *"숫자만 26, 글은 16 굵게 (권장)"*) · 숫자 줄과 기준선이 맞게 위를 7 띄운다(#1578 실측).
 | 🔑 짝 값(「발송 · 수락」)과 진행 칩 줄은 왼쪽 정렬 칸에 맞춰 왼쪽에서 시작한다.
 */
.flo-kpis[data-cols="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .flo-kpis[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flo-kpis--summary .flo-kpi { position: relative; word-break: keep-all; } /* 🔻 2026-10-12 (#1642 검토) ~~`overflow: hidden`~~ → 막대가 칸 아래 모서리를 스스로 둥글린다(칸 밖 표식이 잘리지 않는다) */
.flo-kpi__value--text { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); overflow-wrap: normal; padding-top: 7px; }
/*
 | 🔻 2026-10-12 (#1642 · 🧑 「요기도 개선해줘」) 요약 여섯 칸은 한 짜임이다 · 이름표 줄 → 값 한 줄(32) → 덧말 한 줄(18).
 | 🔑 칸 높이: 위아래 12 + 이름표 줄 24 + 4 + 값 32 + 덧말 18 = 102(덧말이 있을 때). ~~칩 줄 아래 8 · 덧말 위 8~~ 을 4 · 0 으로 줄였다.
 | 🔑 글 값(상품 · 기간)은 ~~16/700 · 두 줄까지~~ → 16/600 · 한 줄 말줄임이다(전체 글은 `title`). 위 7 은 숫자(26/600) 줄과 기준선을 맞춘다.
 |    낱말은 줄 안에서 끊지 않는다(날짜 하이픈 · 긴 상품명) · 한 줄에서 넘치면 말줄임이다.
 | 🔑 「발송 / 수락」 한 값(`flo-summary__value--pair`)의 빗금은 값보다 작고 옅다(「N일 / M일」과 같은 짜임).
 */
.flo-kpis--summary .flo-kpi__value--text { font-weight: 600; box-sizing: border-box; min-height: 32px; }
.flo-kpis--summary .flo-kpi__value--text .flo-summary__text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flo-kpis--summary .flo-kpi__value--text .flo-summary__word { display: inline; max-width: none; overflow-wrap: normal; }
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__icon,
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__basis { margin-bottom: 4px; }
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__label { margin-bottom: 4px; }
/* 🆕 2026-10-12 (#1643) 이름표는 한 줄 말줄임이다(전체 글은 `title`) · 좁은 칸(1280 에서 이름표 폭 83)에서 두 줄로 접혀 값 기준선을 밀던 것을 막는다.
   경과 막대는 칸 맨 아래 가장자리에 칸 폭을 다 쓴다(칸 안 격자 칸이 아니라 칸 자체가 기준) */
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__bar--time { grid-column: auto; grid-row: auto; }
.flo-kpis--summary .flo-kpi__note .flo-kpi__basis { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); font-weight: 400; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
.flo-main .flo-kpis--summary .flo-kpi__note { margin: 0; line-height: var(--flo-lh-caption); }
.flo-kpis--summary .flo-kpi__note { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flo-kpis--summary .flo-kpi__note .flo-summary__word { display: inline; max-width: none; overflow-wrap: normal; }
/* 🆕 2026-10-12 (#1642 검토) 기간 범위(「2026-12-15 ~ 2027-01-14」 약 190px)는 칸 폭(1201~1600 에서 약 115~130)을 넘어 말줄임이면 종료일이 가려졌다.
   🔑 범위 값만 낱말 경계에서 두 줄로 접는다(`flo-kpi__value--range` · 모양으로 가른다, 칸 이름이 아니다). 한 줄일 때 기준선은 거의 그대로(위 12 · 줄 16)이고, 접히면 칸 높이가 모두 함께 자란다 */
.flo-kpis--summary .flo-kpi__value--range { line-height: 16px; padding-top: 12px; }
.flo-kpis--summary .flo-kpi__value--range .flo-summary__text { white-space: normal; overflow: visible; text-overflow: clip; }
.flo-kpis--summary .flo-kpi__value--range .flo-summary__word { display: inline-block; }
.flo-kpi__value.flo-summary__value--pair { display: flex; justify-content: flex-start; align-items: baseline; height: 32px; }
.flo-summary__slash { margin: 0 4px; font-size: 16px; font-weight: 400; line-height: var(--flo-lh-card); color: var(--flo-ink-3); } /* 🔻 2026-10-14 (#1737) 줄 ~~1~~ → 16/24 */
.flo-kpi__value.flo-summary__value--pair .flo-missing { color: var(--flo-ink-3); }
/* 🔻 2026-10-11 (#1617) ~~`grid-template-columns: minmax(120px, auto) minmax(0, 1fr)`~~ (주문 칸 120 | 칩 줄) → 한 줄을 다 쓰는 칸 하나.
   주문 수와 칩 줄은 칸 안의 한 줄이다 · 주문 수(26/600) 다음에 세로 칸막이, 그 뒤에 칩 줄. 칩 줄이 접히면 주문 수 아래로 내려간다 */
.flo-main .flo-kpis.flo-seeding-progress { grid-template-columns: minmax(0, 1fr); }
.flo-kpis.flo-seeding-progress .flo-seeding-progress__stages { justify-content: flex-start; }
.flo-seeding-progress__body { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.flo-main p.flo-seeding-progress__ordered { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; padding-right: 16px; border-right: 1px solid var(--flo-line); }
.flo-seeding-progress__sub { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
@media (max-width: 640px) {
    .flo-main p.flo-seeding-progress__ordered { padding-right: 0; border-right: 0; }
}
/* 🆕 2026-10-11 (#1621 · 🧑 「R 조합 (권장)」) 단계별 인원 막대 · 마디 폭은 인원(`--flo-seg`) · 앞 셋은 초록이 짙어지고 배송완료는 보라 */
.flo-seeding-progress__bar { display: flex; gap: 2px; height: 8px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: var(--flo-line-soft); }
.flo-seeding-progress__bar > i { display: block; flex: var(--flo-seg, 1) 1 0; height: 100%; }
.flo-seeding-progress__bar > i[data-flo-seg="1"] { background: color-mix(in srgb, var(--sig-progress) 40%, var(--flo-card)); }
.flo-seeding-progress__bar > i[data-flo-seg="2"] { background: color-mix(in srgb, var(--sig-progress) 65%, var(--flo-card)); }
.flo-seeding-progress__bar > i[data-flo-seg="3"] { background: var(--sig-progress); }
.flo-seeding-progress__bar > i[data-flo-seg="4"] { background: var(--flo-primary); }

/* ── 단계 칩 ────────────────────────────────────────────────────────
 |
 | 🔑 **지금 어디인가**를 색만으로 말하지 않는다 — 번호 · 이름 · 채움 · `aria-current`.
 | 🚫 지나간 단계를 감추지 마라 — 어디서 왔는지가 보여야 다음이 이해된다.
 */
.flo-steps { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
    list-style: none;
    padding: 0;
}
.flo-step,
.flo-main .flo-step {
    /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 7 · 오른쪽 14~~ → 8 · 16. 왼쪽 6 은 번호 원(20)이 알약(32)과 한가운데를 맞추는 값이라 둔다 */
    display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px 0 6px;
    border-radius: 999px; background: var(--sig-neutral-bg); color: var(--flo-ink-3);
    font-size: 13px; text-decoration: none;
}
.flo-step__no {
    width: 20px; height: 20px; border-radius: 999px; flex: none;
    display: grid; place-items: center; font-size: 13px; font-weight: 600;
    background: #dfe3e8; color: #fff;
}
.flo-step.is-done { color: var(--flo-ink-2); }
.flo-step.is-done .flo-step__no { background: var(--flo-ink-3); }
.flo-step.is-now { background: var(--flo-primary); color: #fff; font-weight: 600; }
.flo-step.is-now .flo-step__no { background: rgba(255, 255, 255, .28); color: #fff; }
/*
 | 🆕 2026-10-09 (#1602) 캠페인 요약 「다음 업무」 칩 줄을 고르게 나눈다. 칸 수는 화면이 칩 수로 정한다(넷까지).
 |    768 미만은 위 흐름(감싸기) 그대로다. 🚫 대시보드 · 위저드 칩 줄에는 붙이지 마라 · 그쪽은 이 문제가 없다.
 */
/*
 | 🔻 2026-10-09 (#1602 독립 검토) ~~`@media (min-width: 768px) { .flo-steps--balanced { display: grid; grid-template-columns: repeat(var(--flo-steps-cols, 4), max-content); } }`~~
 |    창 폭으로 갈랐더니 곁 메뉴(약 234)가 서는 861~945 에서 칸이 판보다 넓어 화면이 30px 까지 옆으로 넘쳤다(실측).
 | 🔑 이제 **판 자신의 폭**으로 가른다(컨테이너 질의). 판 안쪽이 520 이상일 때만 격자이고, 그 아래는 위 흐름(감싸기)이다.
 | 🔑 격자 칸은 `minmax(0, max-content)` 다. 칩 넷이 판에 다 못 들어가면 칸이 줄고 칩 글이 낱말 단위로 접힌다(920~970 실측 두 줄 칩) ·
 |    🚫 `max-content` 만으로 되돌리지 마라 · 칩이 판 밖으로 나간다. 지키는 검사: `SummaryHubScheduleAndBlockerTest`.
 */
/* 🔻 2026-10-13 (#1664 검토) ~~`.flo-steps--balanced` · `.flo-steps--cols-1`~`-4` 와 그 컨테이너 질의~~ 를 걷었다. 쓰던 곳(요약 「다음 업무」 칩 줄)이
 |    오른쪽 열 세로 단계 목록(`flo-steps--rail`)이 되어 부르는 화면이 없다. 위 두 주석은 그 시절의 기록이다 */
/*
 | 🆕 2026-10-11 (#1621 · 🧑 「R 조합 (권장)」) 대시보드 「진행 단계」 목록 줄. 칩 아홉 개가 감싸여 두 줄로 흩어지던 자리다.
 | 🔑 세 열 · 줄마다 번호 · 이름 · 오른쪽 끝 수(16/600)와 단위(13) · 줄 아래 옅은 선. 지금 칸은 보라 밑줄 · 보라 번호 · 굵은 이름이다.
 |    🚫 색만으로 말하지 않는다 · 번호 채움 · 밑줄 · 굵기 · `aria-current` 가 함께 움직인다.
 | 🔑 1000 이하 두 열 · 640 이하 한 열. 긴 이름(「상품 구매 URL 발송」)은 낱말 단위로 접고 수는 오른쪽에 남는다.
 | 🚫 위저드 · 요약 허브 칩 줄에 붙이지 마라 · 그쪽은 칩 모양 그대로다.
 */
.flo-main .flo-steps--list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.flo-steps--list > li { min-width: 0; border-bottom: 1px solid var(--flo-line-soft); }
.flo-main .flo-steps--list .flo-step {
    position: relative; display: flex; width: 100%; height: auto; min-height: 44px; padding: 8px 8px 8px 0; gap: 12px;
    border-radius: 0; background: none; font-size: 14px; line-height: var(--flo-lh-ui); word-break: keep-all;
}
.flo-steps--list .flo-step .flo-step__no { background: var(--sig-neutral-bg); }
.flo-steps--list .flo-step.is-done .flo-step__no { background: var(--flo-primary-soft); color: var(--flo-primary); }
.flo-steps--list .flo-step__label { flex: 1 1 auto; min-width: 0; }
.flo-steps--list .flo-step__count { flex: none; font-size: 13px; font-weight: 400; color: var(--flo-ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flo-steps--list .flo-step__num { margin-right: 1px; font-size: 16px; font-weight: 600; line-height: var(--flo-lh-card); color: var(--flo-ink-1); }
.flo-steps--list .flo-step__count[data-zero] .flo-step__num { color: var(--flo-ink-3); }
.flo-main .flo-steps--list .flo-step.is-now { background: none; color: var(--flo-primary-deep); font-weight: 600; }
.flo-steps--list .flo-step.is-now::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--flo-primary); }
.flo-steps--list .flo-step.is-now .flo-step__no { background: var(--flo-primary); color: #fff; }
.flo-steps--list .flo-step.is-now .flo-step__num { color: var(--flo-primary); }
.flo-main .flo-steps--list a.flo-step:hover { background: var(--flo-line-soft); }
@media (max-width: 1000px) { .flo-main .flo-steps--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .flo-main .flo-steps--list { grid-template-columns: minmax(0, 1fr); } }
/*
 | 🔻 2026-10-11 (#1624 · 🧑 「대시보드 진행단계보면 바뀐 구간은 보더가없어서인지 구분이 안돼 이것도 디자인적으로 풀어줘」)
 |    줄 아래 옅은 선만으로는 칸이 하나의 단위로 읽히지 않았다. 위 규칙의 ~~줄 아래 선~~ · ~~지금 칸 보라 밑줄~~ 을 아래가 덮는다.
 | 🔑 칸마다 테두리 타일(선 1 · 반경 12 · 안여백 8/16/8/12 · 높이 48) · 타일 사이 8. 번호는 24 · 반경 8 둥근 네모(지표 칸 칩과 같은 모양)다.
 | 🔑 지나간 단계 번호는 보라 틴트 · 남은 단계는 회색 · 지금 칸은 보라 테두리 · 옅은 보라 바탕 · 바깥 고리 3 · 그라데이션 번호(지표 칩과 같은 두 극).
 | 🔑 수가 0 인 칸은 회색 바탕 · 흐린 글자로 물러선다. 🚫 감추지 않는다 · 단계 순서가 끊긴다.
 | 🔑 갈 수 있는 칸은 올림(1px)과 보라 테두리로 눌림을 알린다. 🚫 색만으로 말하지 않는다 · 번호 채움 · 굵기 · `aria-current` 가 함께다.
 */
.flo-main .flo-steps--list { gap: 8px; }
.flo-steps--list > li { border-bottom: 0; }
.flo-main .flo-steps--list .flo-step {
    min-height: 48px; padding: 8px 16px 8px 12px; border: 1px solid var(--flo-line); border-radius: 12px;
    background: var(--flo-card); color: var(--flo-ink-1);
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.flo-steps--list .flo-step .flo-step__no { width: 24px; height: 24px; border-radius: 8px; background: var(--sig-neutral-bg); color: var(--flo-ink-2); }
.flo-steps--list .flo-step.is-done .flo-step__no { background: var(--flo-primary-soft); color: var(--flo-primary); }
.flo-steps--list .flo-step.is-now::after { content: none; }
.flo-main .flo-steps--list .flo-step.is-now {
    border-color: var(--flo-primary); background: color-mix(in srgb, var(--flo-primary) 6%, var(--flo-card)); color: var(--flo-primary-deep);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--flo-primary) 12%, transparent);
}
.flo-steps--list .flo-step.is-now .flo-step__no { background: var(--flo-primary); color: #fff; } /* 🔻 2026-10-11 (#1636) ~~보라 → 분홍 그라데이션~~ → 납작한 보라 · 지금 표지에만 꽉 찬 보라를 쓴다 */
.flo-main .flo-steps--list .flo-step:not(.is-now):has(.flo-step__count[data-zero]) { background: var(--flo-line-soft); border-style: dashed; color: var(--flo-ink-2); } /* 🔻 검토 · ~~테두리를 바탕색과 같게~~ 하면 이 칸만 경계가 사라져 같은 구분 문제가 되살아난다 · ~~글자 ink-3~~ 은 회색 바탕 위 4.18:1 이라 ink-2(이 칸은 눌리는 링크다) */
.flo-steps--list .flo-step:not(.is-now):has(.flo-step__count[data-zero]) .flo-step__no { background: var(--sig-neutral-bg); color: var(--flo-ink-3); }
.flo-main .flo-steps--list a.flo-step:hover { background: var(--flo-card); border-color: color-mix(in srgb, var(--flo-primary) 40%, var(--flo-line)); transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(58, 47, 107, .28); }
.flo-main .flo-steps--list a.flo-step.is-now:hover { background: color-mix(in srgb, var(--flo-primary) 6%, var(--flo-card)); border-color: var(--flo-primary); }
/* 🔑 640 이하 한 열은 타일 높이 44 · 아홉 칸이 세로로 서서 판이 길어지는 만큼을 줄인다 */
@media (max-width: 640px) { .flo-main .flo-steps--list .flo-step { min-height: 44px; padding-block: 6px; } }
@media (prefers-reduced-motion: reduce) { .flo-main .flo-steps--list .flo-step { transition: none; } .flo-main .flo-steps--list a.flo-step:hover { transform: none; } }

/* ── 안내판 ─────────────────────────────────────────────────────────
 |
 | 🚫 «죄송합니다» 를 쓰지 마라 — 지금 무엇을 기다리는지와 다음에 무엇이 일어나는지만 적는다.
 | 🔑 오른쪽 글자는 **상태**다. 🚫 거기에 버튼을 넣지 마라 — 액션은 절 머리에 있다.
 */
.flo-notice {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    background: var(--sig-done-bg); border-radius: var(--flo-radius-card); padding: 16px 20px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~반경 10 · 18px 22px~~ */
}
/* 🔻 2026-09-29 (#1530 독립 검토) 15px → 14px · flo-inline-alert__title 과 같은 눈금(T3) */
.flo-notice__title,
.flo-main .flo-notice__title { font-size: 14px; font-weight: 600; color: var(--sig-done-ink); margin: 0; }
.flo-notice__body,
.flo-main .flo-notice__body { font-size: 13px; color: var(--flo-ink-2); margin: 4px 0 0; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~6~~ */
.flo-notice__state { font-size: 13px; color: var(--flo-ink-3); flex-shrink: 0; }

/* ── 캠페인 요약의 「다음 업무」 판 · campaign/summary.blade.php (🆕 2026-10-06 · #1578) ──
 |
 | 🔑 판 안은 세 층이다 · 걸음 칩과 안내판 · 지금 할 일(단추 줄 · 막힌 업무) · 덧붙는 사실(가는 선 아래).
 | 🔑 층 사이는 16 하나, 덧붙는 사실의 줄 사이는 8 이다. 🚨 직전까지 8 · 12 · 12 로 갈려 줄마다 따로 떠 보였다.
 | 🔑 단추와 그 건수는 8, 업무와 업무 사이는 16 이다(#1527 결정 그대로).
 */
.flo-next-work__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.flo-next-work__actions > * { margin: 0; }
.flo-next-work__blocked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
/* 🔻 2026-10-11 (#1641 · 🧑 「A 절마다 흰 카드 (권장)」) ~~margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line);~~ 선 대신 위 여백 24 */
.flo-next-work__meta { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.flo-next-work__meta > * { margin: 0; }
.flo-next-work__meta summary { cursor: pointer; }
/* 🔑 「완료」는 줄 이름표다 · 뒤 업무 이름보다 진하게, 사이는 8 */
.flo-next-work__term { margin-right: 8px; font-weight: 600; color: var(--flo-ink-2); }

/* ── 알약 탭 ────────────────────────────────────────────────────────
 |
 | 🔑 참조의 성과 화면이 쓰는 모양이다. 밑줄 탭(`.flo-tabs`)과 **다른 자리**다 —
 |    이쪽은 «무엇을 볼 것인가» 를 고르는 자리이고, 밑줄 탭은 화면 안 이동이다.
 */
.flo-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } /* 🔻 2026-10-05 (#1565) ~~18~~ */
.flo-pill,
.flo-main .flo-pill {
    display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
    border: 1px solid var(--flo-line); border-radius: 999px; background: var(--flo-card); /* 🔻 2026-10-11 (#1618) ~~8~~ → 알약은 둥글게 */
    font-size: 14px; color: var(--flo-ink-2); text-decoration: none; cursor: pointer;
    font-family: inherit;
}
.flo-pill:hover { background: var(--flo-line-soft); }
.flo-pill.is-on,
.flo-pill[aria-selected="true"] { background: var(--flo-primary); border-color: var(--flo-primary); color: #fff; font-weight: 600; }

/* ── 페이징 ─────────────────────────────────────────────────────────
 |
 | 🔑 참조는 표 아래 오른쪽이다. 🚫 가운데로 옮기지 마라 — 왼쪽에는 벌크 버튼이 온다.
 | 🚨 «지금 쪽» 을 색으로만 말하지 마라 — `aria-current` 를 함께 단다.
 */
/* ── 한 쪽에 몇 개를 볼 것인가 (이슈 #1000) ──────────────────────────
 |
 | 🧑 *"쪽당 개수 라는 말도 제거. 30개씩 50개씩 100개씩도 그냥 셀렉박스로 만들어서
 |    테이블 위쪽으로 변경"*
 |
 | 🔻 **링크 묶음에서 선택 상자로 바꿨다.** 이름표 글자도 걷었다 —
 |    「30개씩」이 스스로 무엇인지 말하므로 이름표가 남을 이유가 없다.
 | 🔑 **자리는 보기 전환 옆(표 위)이다** — 둘 다 «이 목록을 어떻게 볼까» 다.
 | 🔑 **폼이지만 줄바꿈을 만들지 않는다** — 판 머리의 다른 것들과 한 줄에 선다.
 */
.flo-main .flo-page-size { display: inline-flex; align-items: center; gap: 8px; margin: 0; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
/* 🆕 2026-10-14 (#1738 · 묶음 K) 도구 줄에 32 단추(「응답 내려받기」)가 있으면 쪽 크기 상자도 32 다. 한 줄에 32 · 40 두 높이였다 */
.flo-main .flo-table-block__tools:has(.basic-btn.mini) .flo-page-size select { height: var(--flo-control-h-sm); min-height: var(--flo-control-h-sm); padding-top: 4px; padding-bottom: 4px; }

/* ── 여기서 갈 수 있는 곳 (이슈 #1001) ───────────────────────────────
 |
 | 🧑 ① *"결과 리스트 주변에 … 인플루언서 정보 등록 버튼과 관심 목록 보기가 있어야 함."*
 | 🧑 ② *"테이블 하단 말고 검색 테이블, 결과 테이블 사이로 옮겨. 안 보인다"*
 |
 | 🔻 **①로 목록 아래에 두었더니 안 보였다.** 한 쪽이 30~100행이라 **화면을 끝까지
 |    내려야** 닿는 자리였다.
 | 🔑 **두 판 사이가 답이다** — 조건을 걸고 결과를 보는 **눈길이 지나는 길목**이다.
 | 🔑 **판 밖이라 어떤 상태에서도 남는다** — 0건이어도, 열람 상한에 막혀도 그대로다.
 */
/*
 | 🔻 **2026-08-31 여백을 줬다** (🧑 *"패딩 좀 줘야할 듯"*).
 |
 | 🚨 **판 안의 글자보다 24px 왼쪽에서 시작하고 있었다.** 이 줄은 **판 밖**이라
 |    판의 안여백을 받지 못한다 — 위아래 판의 「정렬」·「전체」와 **세로줄이 어긋나**
 |    딸려 있는 줄이 아니라 **삐져나온 줄**로 보였다.
 | 🔑 **킷의 판 안여백과 같은 값을 준다**(`.cont-sec { padding: 24px }` · `common.css`).
 |    🚫 새 값을 만들지 마라 — 판이 바뀌면 이 줄만 다시 어긋난다.
 | 🔑 **위아래도 판 사이 간격과 같은 값**이다(`.cont-sec { margin-top: 20px }`).
 */
/*
 | 🔻 **2026-09-29 (#1530 · 🧑 결정 「자리는 두고 여백만 축소」). 위아래 20 → 8.**
 |    좌우도 판의 새 안여백(24 → 20)을 따라간다. 판 사이가 20 → 16 사방으로 줄면서
 |    이 줄의 위아래를 20 그대로 두면 더는 킷 판의 안여백과 맞지 않는다.
 |    **새 셈**: 판 아래 안여백 20 + 이 줄 위 8 + 줄 높이(40) + 이 줄 아래 8 +
 |    판 위 안여백 20 = **96px**(이전 134px, #1001 이 자리는 그대로 둔다).
 */
.flo-main .flo-list-ways {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; /* 🔻 2026-10-05 (#1565) ~~10~~ */
    margin: 8px 0; padding: 0 20px;
}
.flo-main .flo-list-ways__help { font-size: 13px; color: var(--flo-ink-2); }
/* 🔑 관심목록은 성격이 다른 길이라 반대쪽 끝에 둔다 — 등록과 나란히 두면 한 벌로 읽힌다 */
.flo-main .flo-list-ways__end { margin-left: auto; }
/*
 | 🆕 **화면 머리 오른쪽의 안내 글** (2026-10-06 · 이슈 #1576 · 인플루언서 검색).
 | 🔑 안내 글은 뒤의 등록 단추와 한 벌이다(#894). 앞 「관심목록」과는 8 을 더 띄워(합 16) 다른 길로 읽게 한다.
 */
.flo-main .flo-page-head__pair { display: inline-flex; align-items: center; gap: 8px; margin-left: 8px; }
.flo-main .flo-page-head__pair > .flo-list-ways__help { white-space: nowrap; }
/* 🔑 860 이하에서 머리 동작이 판 폭을 넘으면 묶음째 다음 줄로 접힌다(R-308). 안내 글이 먼저 줄어 단추는 잘리지 않는다 */
@media (max-width: 860px) {
    .flo-main .flo-page-head__actions:has(> .flo-page-head__pair) { flex-wrap: wrap; flex-shrink: 1; min-width: 0; row-gap: 8px; }
    .flo-main .flo-page-head__pair { margin-left: 0; min-width: 0; }
    .flo-main .flo-page-head__pair > .flo-list-ways__help { white-space: normal; word-break: keep-all; }
}

/*
 | 판 밖에 서는 안내 한 줄 (2026-08-31 · 이슈 #1041)
 |
 | 🔑 **길 내기 줄과 같은 자리에 선다** — 판 밖이라 판의 안여백을 받지 못하므로
 |    킷의 판 안여백(`.cont-sec { padding: 24px }`)과 같은 값을 준다.
 |    🚫 새 값을 만들지 마라 — 판이 바뀌면 이 줄만 어긋난다.
 | 🚫 `flo-list-ways` 를 빌려 쓰지 마라 — 그 줄은 **길을 내는 자리**다. 길이 없는
 |    안내를 거기 담으면 «단추가 빠진 줄» 로 읽힌다.
 */
/* 🔻 2026-09-29 (#1530) 길 내기 줄과 같은 자리 · 같은 값이라 위아래·좌우를 같이 낮췄다 */
.flo-main .flo-list-note {
    margin: 8px 0; padding: 0 20px;
    font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); /* 🔻 2026-10-05 (#1567) ~~1.6~~ */
}

/*
 | 표 한 칸 안에 나란히 서는 실행 단추들 (2026-08-31 · 이슈 #1042)
 |
 | 🚨 **감싸는 것이 없으면 세로로 쌓인다.** 실행 단추는 `<form>` 안에 있어야 하고,
 |    `flo-inline-form`(`display: contents`)으로 상자를 지워도 **줄바꿈을 막는 것은
 |    아무것도 없다.** 실제로 단추 셋이 3층으로 서서 그 행만 3배 높았다.
 | 🔑 **줄바꿈을 허용한다**(`flex-wrap`) — 창이 좁아지면 잘리는 대신 접힌다(R-308).
 | 🔑 **가운데로 모은다** — 킷의 표는 가운데 정렬이고 「관리」 열의 머리도 가운데다.
 |    🚫 왼쪽으로 붙이지 마라: 머리와 몸이 다른 쪽에 서면 어느 열인지 눈으로 못 잇는다
 |    (`x-table-cell` 의 `start` 주석이 짚는 그 자리다).
 */
.flo-main .flo-row-actions {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; justify-content: center; /* 🔻 2026-10-05 (#1565) ~~6~~ */
}

/* ── 템플릿 관리 `FLO-TPL-001` (2026-08-31 · 이슈 #1041 · #1042) ────────
 |
 | 🔑 **열 너비를 못박는 까닭** — 안 박으면 표가 남는 폭을 네 열에 고르게 나눈다.
 |    그러면 값이 짧은 「기본」·「마지막 수정」이 필요 없이 넓어지고, **실행 열만
 |    좁아 단추 셋이 두 줄로 접힌다**(실측). 🚫 킷의 단추 치수를 줄여 맞추지 마라 —
 |    다른 화면의 단추까지 함께 작아진다.
 | 🔑 **이름 열은 안 박는다** — 남는 폭을 그쪽이 가져간다. 이름만 길이가 제각각이다.
 */
.flo-main .flo-template-list .flo-th--flag { width: 120px; }
.flo-main .flo-template-list .flo-th--when { width: 170px; }
/* 🔻 2026-10-05 (#1567) 관리 머리에 `col="action"` 을 달았다. 끝 열 보정(0,3,1)에 지지 않도록 `thead th` 를 붙인다 */
.flo-main .flo-template-list thead th.flo-th--acts { width: 268px; }

/*
 | 🔑 **비어 있는 갈래는 낮게 그린다.** 기본 빈 상태는 위아래 56px 이라 목록 전체가
 |    빌 때를 위한 크기다. 여기는 **갈래가 셋이고 둘이 비어 있는 것이 평상시**라,
 |    그대로 두면 **화면 절반이 빈 상자**가 된다.
 | 🚫 빈 상태 부품 자체를 줄이지 마라 — 다른 화면은 그 크기가 맞다.
 */
.flo-main .flo-template-list .flo-empty { padding: 24px 16px; }

/*
 | 🔻 **2026-08-31 오른쪽 끝에서 가운데로 옮겼다** (🧑 지시 · 이슈 #1002).
 |
 | 🧑 *"하단 버튼 리스트는 테이블 중앙 정렬"*
 |
 | 🚨 **부품 머리말이 «가운데로 옮기지 마라. 왼쪽에는 벌크 버튼이 온다» 라고 적고 있었다.**
 |    🔑 **그 까닭이 이 저장소에서는 성립하지 않는다.** 쪽 넘김을 쓰는 화면 넷을 실측했고
 |    (캠페인 목록 · 인플루언서 검색 · 관심목록 그룹 상세 · 정산 목록) **넷 다 왼쪽이 비어
 |    있다.** 이 앱은 벌크 버튼을 **표 위**에 둔다.
 | 🚫 화면마다 덮어쓰지 마라. 화면에 따라 갈리면 어느 쪽이 맞는지 알 수 없어진다.
 */
.flo-pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~22~~ → 판 사이 16 */
.flo-pager__item,
.flo-main .flo-pager__item {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border: 1px solid var(--flo-line); border-radius: 6px; background: var(--flo-card);
    font-size: 13px; color: var(--flo-ink-2); text-decoration: none;
    font-variant-numeric: tabular-nums;
}
.flo-pager__item:hover { background: var(--flo-line-soft); text-decoration: none; }
.flo-pager__item[aria-current="page"] { background: var(--flo-primary); border-color: var(--flo-primary); color: #fff; font-weight: 600; }
.flo-pager__item.is-off { color: var(--flo-ink-3); pointer-events: none; opacity: .55; }

/* ── 표 정렬 — 참조는 가운데다 ──────────────────────────────────────
 |
 | 🔑 참조 표는 **가운데 정렬**이고 **첫 열(이름)만 왼쪽**이다.
 | 🔑 숫자 열은 오른쪽이 옳다 — 자릿수를 견주려면 끝이 맞아야 한다.
 |    (`x-table-cell numeric` 이 그 자리를 표시한다)
 */
/*
 | 🚨 **머리와 몸의 좌우 여백이 달라 모든 열이 8px 어긋나 있었다**
 |    (2026-08-31 · 이슈 #1031 · 🧑 *"정렬 안 맞는데?"*).
 |
 | | | 좌우 여백 | 어디서 |
 | |---|---|---|
 | | 머리 | **12px** | 우리 `.flo-th` |
 | | 몸통 | **4px** | 킷 `.common-table-wrap .common-table tbody td` |
 |
 | 🔑 **킷은 이 어긋남이 드러나지 않는다** — 킷의 표는 전부 가운데 정렬이라
 |    좌우 여백이 달라도 글자는 같은 자리에 선다. **우리 표는 왼쪽·오른쪽 열이
 |    있어서** 그 8px 이 그대로 보인다.
 |
 | 🔑 **몸통을 머리에 맞춘다.** 반대로 머리를 4px 로 줄이면 **표가 넘친다**
 |    (인플루언서 검색에서 감싼 칸 1055px 에 표가 1057px · 브라우저 실측).
 |    몸통을 12px 로 넓히는 쪽은 **어느 화면에서도 폭이 늘지 않았다.**
 |
 | 🚨 셈이 킷보다 높아야 이긴다 — 킷이 `(0,3,0)` 이라 `.flo-td` 를 더해 `(0,4,0)` 으로 쓴다.
 | 🚫 세로 여백은 건드리지 마라 — 킷의 `12px` 를 그대로 둔다(짧은 이름으로만 덮는다).
 */
.common-table-wrap .common-table tbody td.flo-td { padding-left: 12px; padding-right: 12px; }

/* ── 정렬 기준선 · 표 (2026-10-05 · 이슈 #1565 · 정본 125- 「정렬 기준선과 4px 격자」) ──
 |
 | 🧑 2026-10-05 *"왼쪽에 나두고나 오른쩍에 나두더라도 너무 왼쪽에 딱 붙어잇자나 기준점을 좀 명확히 잡아서해줘"*
 |
 | 🚨 표는 판 안에서 테두리 상자(반경 12)로 한 겹 더 들어가 있었다. 1280 실측으로 판 제목 · 검색 조건 이름은
 |    판 내용선에 섰는데, 표의 첫 글자는 그 선에서 몸 13px · 머리 14px 안쪽이었다(머리 첫 칸의 왼쪽 선 1px 때문에
 |    머리와 몸도 1px 어긋났다). 인플루언서 검색은 칸 좌우 여백 4 라 계정 열이 상자 선에서 5~9px 에 붙었다.
 | 🔑 판 안의 표는 판 가장자리까지 넓히고 테두리 상자를 걷는다. 첫 열 · 마지막 열의 바깥 안여백은
 |    판 안여백(`--flo-inset`: 판 20 · 860px 이하 12 · 서브카드 · 대시보드 판 16)과 같다.
 |    그래서 표의 첫 글자가 판 제목과 같은 x 에, 마지막 글자가 판 오른쪽 내용선에 선다.
 | 🔑 칸 사이 안여백은 그대로다(표준 12 · 열셋 인플루언서 검색 4).
 | 🚫 창(`.flo-modal`) 안의 표는 넓히지 않는다. 창 몸통이 스스로 구르는 칸이라 음수 여백이 잘린다.
 | 🚫 판 안에서 열 한쪽에만 놓인 표(격자 칸 안)를 만들 때는 이 규칙이 판 끝까지 넓힌다. 그런 표가 생기면 먼저 묻는다.
 |
 | 🔻 2026-10-06 (#1577 · 🧑 *"캠페인 좌우 여백이 없고 너무 이상해"*) ~~판 안의 표는 판 가장자리까지 넓힌다~~ →
 |    표는 판 내용선 안에 선다. 머리 띠와 행 선이 판 가장자리에 닿아 좌우 여백이 없어 보였고, 판 머리 밑줄
 |    (내용선에서 내용선까지)과 표 머리 띠(판 끝에서 끝까지)의 길이가 달라 어긋나 보였다(1280 실측 920 대 960).
 |    머리 · 값이 모두 가운데(#1572)라 첫 글자를 내용선에 세울 까닭도 사라졌다.
 | 🔑 그래서 감싼 칸은 넓히지 않고 테두리 상자만 걷는다. 머리 띠는 킷 모양(양 끝 둥근 6 · 바깥 선) 그대로 내용선에서
 |    내용선까지 간다. 바깥 열의 안여백은 칸 사이와 같은 12 다.
 | 🔑 ~~예외 하나: 인플루언서 검색 표(`.flo-search-result`). 열 폭 합(945)이 1280 판 폭에 맞춰져 있어 내용선 안(920)에
 |    들지 않는다. 그 표만 판 끝까지 넓히는 옛 규칙을 아래에 남긴다.~~ 🔻 2026-10-06 (#1576 3차) 예외를 걷었다(아래 주석).
 */
.flo-main :is(.cont-sec, .flo-subcard, .flo-sheet) .flo-table-wrap:not(.flo-modal *) {
    max-width: none;
    border: 0; border-radius: 0;
}
/*
 | 🔻 2026-10-06 (#1576 3차) 인플루언서 검색 표의 예외도 걷었다. 열 폭 합을 945 → 900 으로 줄여 내용선 안(1280 920 ·
 |    스크롤바가 있으면 905)에 든다. 이제 앱의 모든 판 안 표가 내용선 안에 선다. 걷은 다섯 줄:
 |    ~~`.flo-search-result .flo-table-wrap { margin-inline: calc(var(--flo-inset, 20px) * -1); }`~~ ·
 |    ~~첫 열 · 끝 열 바깥 안여백 `var(--flo-inset)`~~ · ~~머리 띠 양 끝 `border: 0; border-radius: 0`~~
 */
/*
 | 🔑 첫 열이 선택 열이면 바깥 안여백만큼 열을 넓힌다. 「선택」 글자(13px · 22)와 상자(16)가 그대로 들어간다.
 |    🚫 `flo-col--pick` 의 48 을 고치지 마라. 첫 열이 아닐 때의 폭이고 시험이 지킨다.
 */
/* 🔻 2026-10-06 (#1577) ~~`… th.flo-col--pick:first-child { width: calc(var(--flo-inset, 20px) + 34px); }`~~ 바깥 안여백이 다시 12 라 보정이 필요 없다 */
/*
 | 🔑 폭을 받은 열이 첫 열 · 마지막 열이면 바깥 안여백이 12 에서 판 안여백으로 커진 만큼 열도 넓힌다.
 |    그러지 않으면 글자 자리가 8 줄어 「2026-09-28 14:10」 같은 값이 칸 밖으로 넘친다(발송 이력 1280 실측).
 | 🔑 값은 위 「열 종류별 폭」 그대로이고 차이(`--flo-inset` - 12)만 더한다.
 | 🔻 2026-10-05 (#1565 독립 검토) ~~앞 사슬을 `:where()` 로 감싸 셈을 「열 종류별 폭」과 같게 둔다~~.
 |    셈이 (0,2,1)로 같아 파일 뒤쪽의 「열 종류별 폭」이 이겨, 금액 열 말고는 보정이 걸리지 않았다
 |    (발송 이력 첫 열 160 · 끝 열 112, 정산 끝 열 136 실측).
 | 🔑 `.common-table` 을 `:where()` 밖에 하나 둬 셈을 (0,3,1)로 올린다. 「열 종류별 폭」(0,2,1)을 이기고,
 |    검색 표 전용 폭(0,4,1 · 0,4,2)에는 진다. 다른 화면 전용 폭(캠페인 목록 · 대시보드 · 명단 · 템플릿)은
 |    머리에 `col` 을 달지 않아 겹치지 않는다.
 */
/*
 | 🔻 2026-10-06 (#1577) 위 보정 넷(상태 · 짧은 글 112 · 숫자 · 날짜 · 금액 120 · 일시 160 · 관리 136 에 `--flo-inset` - 12 를 더하던 것)을 걷었다.
 |    표가 내용선 안에 서고 바깥 안여백이 칸 사이와 같은 12 로 돌아와, 「열 종류별 폭」 그대로 글자가 든다.
 */
/* 🆕 머리 칸 위아래 11 → 12 (4px 격자 · 몸 칸 12 와 같은 값) */
.common-table-wrap .common-table thead th.flo-th { padding-block: 12px; }

/*
 | 🔻 2026-09-29 (#1530 · 🧑 결정) 표 글자 눈금. 머리 13/600 · 본문 14/400.
 |
 | 🚨 킷은 머리·본문을 `thead th, tbody td { font-size: 15px }` 한 선언으로 묶어
 |    굵기만 다르고 크기는 같았다(위계가 없다는 실측의 실체). 여기서 크기로 가른다.
 | 🔑 셈이 킷과 같아야 이긴다. 같은 선택자를 그대로 적고 이 파일이 나중에 실린다.
 */
.common-table-wrap .common-table thead th { font-size: 13px; }
.common-table-wrap .common-table tbody td { font-size: 14px; }

/*
 | 🔻 2026-09-29 (#1530 · 🧑 결정 · 결함) 빈 목록 행에 마우스를 올리면 회색 띠가 켜졌다.
 |
 | 🚨 `common.css:872-873` (`tbody tr:hover td:first-of-type::before { opacity: 1 }`)이
 |    모든 행에 켜진다. 빈 상태 행은 병합 칸(`td[colspan]`) 하나뿐이라 강조할 「첫 열」이
 |    없는데도 흰 판 위에 회색 상자가 떴다(사용자 캡처로 재현).
 | 🔑 **병합 칸을 가진 행만 짚어 끈다** · rowspan 표를 끄는 아래 규칙과 같은 모양이다.
 |    킷 파일은 고치지 않는다(R-600) · 이 파일이 나중에 실려 이긴다.
 */
.common-table-wrap .common-table tbody tr:has(> td[colspan]):hover td:first-of-type::before { opacity: 0; }

/*
 | 🆕 **표 첫 칸 고정** (2026-10-06 · 이슈 #1570 · 정본 125- 「표 첫 칸 고정」).
 |
 | 🔑 표가 판보다 넓어 가로로 굴릴 때만 효과가 있다(`position: sticky`). 넓은 창에서는 아무것도 바뀌지 않는다.
 | 🚨 **킷의 줄 강조가 첫 칸 `::before` 에 걸려 있다**(`common.css:872`). 붙인 칸은 위치가 생겨 그 띠를
 |    자기 안에 가둔다 · 줄 전체가 아니라 첫 칸만 회색이 된다. 그래서 이 표에서만 띠를 끄고 칸마다 같은 색을 칠한다.
 | 🔑 붙인 칸은 바탕이 있어야 뒤로 지나가는 칸이 비치지 않는다 · 오른쪽 선 하나로 경계를 보인다.
 | 🚫 전역으로 넓히지 마라 · 붙일 칸이 무엇인지는 화면이 정한다(`x-data-table` 의 `class`).
 */
.flo-table-block--pin-name .common-table :is(th.flo-th, td.flo-td):first-child {
    position: sticky; left: 0; box-shadow: inset -1px 0 0 var(--flo-line-soft);
}
.flo-table-block--pin-name .common-table td.flo-td:first-child { z-index: 1; background: var(--flo-card); }
.flo-table-block--pin-name .common-table th.flo-th:first-child { z-index: 3; }
.flo-table-block--pin-name .common-table-wrap .common-table tbody tr td:first-of-type::before { content: none; }
/* 🔻 2026-10-10 (#1605) ~~`#f5f5f5` · 모든 기기~~ → 색 이름(`--flo-bg`) · 마우스가 있는 기기만 */
@media (hover: hover) { .flo-table-block--pin-name .common-table tbody tr:hover > td.flo-td { background: var(--flo-bg); } }
.flo-table-block--pin-name .common-table tr[data-selected] > td.flo-td:first-child { background: var(--sig-done-bg); }
/*
 | 🆕 640 이하에서는 고정 칸을 120 으로 둔다 (2026-10-06 · #1572 독립 검토).
 | 🚨 390 에서 고정 칸이 판(358)의 58% 를 덮어 굴려도 다른 칸이 거의 보이지 않았다.
 | 🔑 고정은 그대로 두고 폭만 줄인다 · 누구의 줄인지는 남아야 한다(#1570 의 까닭). 긴 이름은 말줄임이고 전체는 `title` 이다.
 */
@media (max-width: 640px) {
    .flo-table-block--pin-name .common-table th.flo-th:first-child { width: 120px; }
    .flo-table-block--pin-name .common-table td.flo-td:first-child > * { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/*
 | 🆕 **640 이하에서는 가로로 굴리는 표 전부가 첫 칸을 붙인다** (2026-10-10 · 이슈 #1605).
 |
 | 🧑 2026-10-10: "이렇게 사용성 기반으로 웹의 보편적인 특성으로 다음 디자인 안정화 고고"
 | 🚨 390 에서 표를 옆으로 굴리면 계정 · 캠페인 이름 칸이 화면 밖으로 나가 어느 줄의 숫자인지 알 수 없었다.
 |    붙인 표는 제안 응답 관리 표 하나뿐이었다(#1570 · 위 규칙). 대시보드 · 검색 · 관심목록 상세 창 · 정산 · 발송 이력은 아니었다.
 | 🔻 ~~🚫 전역으로 넓히지 마라~~ (위 #1570 주석) → **좁은 폭(640 이하)에서만** 모든 `x-data-table` 로 넓혔다.
 |    넓은 창에서는 아무것도 바뀌지 않는다(표가 판 안에 들어 굴리지 않는다).
 | 🔑 첫 칸이 선택 상자(`flo-col--pick`)면 **바로 옆 이름 칸을 붙인다.** 상자는 이름 칸 밑으로 굴러 들어간다.
 |    상자까지 붙이면 이름 칸이 설 자리가 상자 칸의 실제 폭과 같아야 하는데, 그 폭은 표마다 남는 폭을 나눠 받아
 |    달라진다(검색 표 390 실측 38 → 42). 어긋나면 이름 칸이 상자를 덮는다. 고르려면 처음 자리로 굴려 돌아온다.
 | 🔑 붙인 이름 칸은 120 을 넘지 않는다(#1572 와 같은 값) · 긴 이름은 말줄임이고 전체는 `title` 이다.
 |    머리 칸 폭 120 은 **최소 폭을 정한 표**(`x-data-table` 의 `min-width` · 좁은 폭에서 굴리게 지은 표)에만 준다.
 |    판 안에 들던 표에 주면 첫 칸이 넓어져 굴리지 않던 표가 넘친다(성과 표 390 실측 334 → 360).
 | 🚫 병합 칸(빈 목록 행 `td[colspan]`)은 붙이지 않는다 · 판 폭 전체가 한 칸이다.
 */
/*
 | 🔻 2026-10-10 (#1605 독립 검토) 붙인 칸 120 · 한 줄 말줄임 → `clamp(140px, 42vw, 180px)` · 두 줄까지 줄바꿈.
 |    120 에서는 이름이 「데모 아라…」 · 「@demo_…」로 잘려 누구인지 읽을 수 없었다(390 실측).
 | 🔑 두 줄을 넘으면 말줄임이고 전체 값은 `title` 이다. 낱말은 띄어쓰기에서 끊고(`keep-all`), 띄어쓰기 없는 계정 ID 만 아무 데서나 끊는다.
 | 🔑 고른 줄(`tr[data-selected]`) · 마우스를 올린 줄의 바탕을 붙인 칸도 함께 칠한다. 칠하지 않으면 붙인 칸만 흰색으로 남는다.
 |    마우스 바탕은 마우스가 있는 기기에서만 준다(`hover: hover`) · 손가락으로 누른 뒤 회색이 남지 않게 한다.
 */
/* 🔻 2026-10-11 (#1620) ~~`.flo-table-block .common-table`~~ → `.flo-table-block:not(.flo-table-block--stack) .common-table` · 카드 목록 표는 첫 칸을 붙이지 않는다(파일 끝 「휴대폰 카드 목록」) */
@media (max-width: 640px) {
    .flo-table-block { --flo-pin-w: clamp(140px, 42vw, 180px); }
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > :is(th.flo-th, td.flo-td:not([colspan])):not(.flo-col--pick):first-child,
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > :is(th, td).flo-col--pick:first-child + :is(th.flo-th, td.flo-td) {
        position: sticky; left: 0; box-shadow: inset -1px 0 0 var(--flo-line-soft);
    }
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child,
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-col--pick:first-child + td.flo-td { z-index: 1; background: var(--flo-card); }
    .flo-table-block:not(.flo-table-block--stack) .common-table tr[data-selected] > :is(td.flo-td:not(.flo-col--pick, [colspan]):first-child, td.flo-col--pick:first-child + td.flo-td) { background: var(--sig-done-bg); }
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > th.flo-th:not(.flo-col--pick):first-child,
    .flo-table-block:not(.flo-table-block--stack) .common-table tr > th.flo-col--pick:first-child + th.flo-th { z-index: 3; }
    .flo-table-block:not(.flo-table-block--stack) .common-table-wrap .common-table tbody tr td:first-of-type::before { content: none; }
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table[style*="--flo-table-min-w"] tr > th.flo-th:not(.flo-col--pick):first-child,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table[style*="--flo-table-min-w"] tr > th.flo-col--pick:first-child + th.flo-th,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table[style*="--flo-table-min-w"] tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table[style*="--flo-table-min-w"] tr > td.flo-col--pick:first-child + td.flo-td { width: var(--flo-pin-w); min-width: var(--flo-pin-w); max-width: var(--flo-pin-w); }
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child > *,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-col--pick:first-child + td.flo-td > * { max-width: var(--flo-pin-w); }
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child .flo-account__name,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-col--pick:first-child + td.flo-td .flo-account__name,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child > :not(.flo-account),
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-col--pick:first-child + td.flo-td > :not(.flo-account) {
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
        overflow: hidden; white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
    }
    /* 🔑 계정 ID 는 한 줄 말줄임이다 · 띄어쓰기 없는 식별자를 중간에서 끊으면 다른 아이디처럼 읽힌다(390 실측 「@demo_skin_trip3 / 6」). 전체는 `title` */
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-td:not(.flo-col--pick, [colspan]):first-child .flo-account__handle,
    .flo-main .flo-table-block:not(.flo-table-block--stack) .common-table tr > td.flo-col--pick:first-child + td.flo-td .flo-account__handle { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 640px) and (hover: hover) {
    .flo-table-block:not(.flo-table-block--stack) .common-table tbody tr:hover > td.flo-td { background: var(--flo-bg); }
}

/*
 | 🔻 **2026-10-05 (🧑 · 이슈 #1567) 표 정렬은 값의 종류를 따른다.** 아래 두 줄의 기본값을 바꿨다.
 |    ~~`.common-table th.flo-th { text-align: center; }` · `.common-table td.flo-td { text-align: center; }`~~
 |
 | 🧑 *"ㅇㅇ ㄱㄱ 순차적 진행 디자인 안꺠지는 방향으로"* (#1566 제안서의 권장안 채택)
 |
 | 🔑 **규칙은 셋이다**(정본 125- 「표」). 글은 왼쪽, 숫자는 오른쪽, 상태 배지 · 관리 · 선택만 가운데.
 |    - 왼쪽: 열 종류 없음(긴 글) · `name` · `short`(용도 · 차수 · 코드) · `date` · `datetime`
 |    - 오른쪽: `num` · `amount` · `numeric`(`is-num`)
 |    - 가운데: `status` · `action` · `pick`
 | 🚨 가운데에 선 숫자는 「1.2만」과 「8,500」의 자릿수 끝이 맞지 않아 크기를 견주기 느리다(Polaris · Primer · Carbon).
 | 🔑 날짜는 글로 친다. 「2026-10-05」 · 「2026-10-05 14:30」은 자릿수가 같아 어느 쪽에 세워도 끝이 맞고,
 |    왼쪽에 세우면 옆 글 열과 시작선이 같다(Polaris 는 날짜를 글 열로 둔다).
 | 🔑 머리 · 값 · 「-」는 같은 쪽이다. 셋 다 같은 칸 규칙을 받는다.
 */
/*
 | 🔻 **2026-10-06 (🧑 결정 · 이슈 #1572) 머리 · 값 모두 가운데.** 위 「규칙 셋」(#1567)을 걷었다.
 |    ~~`.common-table th.flo-th { text-align: left; }` · `.common-table tbody td.flo-td { text-align: left; }`~~
 |    ~~`.common-table :is(th.flo-th, td.flo-td):is(.is-num, .flo-col--num, .flo-col--amount) { text-align: right; }`~~
 |    ~~`.common-table :is(th.flo-th, td.flo-td):is(.flo-col--status, .flo-col--action, .flo-col--pick) { text-align: center; }`~~
 |
 | 🧑 *"그냥 여백 많은 빈칸에 좌측 끝에 붙히니깐 너무 안어울리잖아 솔직히 헤더는 중앙정렬이 훨씬 깔끔한거아냐?"* ·
 |    결정 *"머리 · 값 모두 가운데"*
 |
 | 🔑 열 종류(`col`)는 이제 폭만 정한다. 정렬은 모든 열이 가운데 한 가지다(정본 125- 「표」).
 | 🔑 계정 칸(사진 + 이름 묶음)은 묶음째 칸 가운데에 선다(`.flo-account` 아래 절).
 | 🚨 킷 `common.css:870`(`.common-table-wrap .common-table tbody td` · 0,2,2)도 가운데라 겹쳐도 같다.
 |    🚫 열 종류마다 왼쪽 · 오른쪽을 다시 얹지 마라. 사용자 결정을 뒤집으려면 정정 지시가 있어야 한다.
 */
.common-table th.flo-th { text-align: center; }
.common-table tbody td.flo-td { text-align: center; }
/*
 | 🔻 **2026-10-04 (🧑 지시 · 이슈 #1562) 오른쪽은 금액 열만이다.** 아래 두 줄을 걷었다.
 |    ~~`.common-table td.flo-td.is-num, .common-table th.flo-th.is-num { text-align: right; }`~~
 |
 | 🧑 *"전체 아래에 테이블에 어느건 좌측 어느건 중앙 어느건 우측에 잇고"*
 |
 | 🚨 인플루언서 검색 표 열세 열이 왼쪽 1 · 가운데 5 · 오른쪽 7 로 갈렸다. 숫자 열은 폭이 52~62px 라
 |    오른쪽에 붙은 「1.2만」 · 「50.0%」 · 「-」가 옆 가운데 열의 값과 줄이 맞지 않았다.
 | 🔑 **규칙은 셋이다**(정본 125- 「표」). 이름은 왼쪽, 금액(`col="amount"`)은 오른쪽, 나머지는 가운데.
 |    건수 · 인원 · 비율 · 팔로워는 「1.2만」 · 「3 / 10」 · 「50.0%」처럼 짧게 줄여 적어 자릿수를 견줄
 |    일이 없다. 금액만 「1,234,000원」처럼 자릿수가 길게 달라 끝을 맞춰야 크기가 읽힌다.
 | 🔑 `numeric`(`is-num`)은 이제 정렬이 아니라 「숫자 글꼴 폭을 고르게」(`flo-t-num`)만 뜻한다.
 | 🔻 2026-10-05 (#1567) 위 「나머지 가운데」와 「`numeric` 은 글꼴 폭만」을 걷었다. 숫자는 다시 오른쪽이다(이 줄 위 규칙 셋).
 | 🔻 2026-10-06 (🧑 결정 · #1572) 금액도 가운데다(「머리 · 값 모두 가운데」). 아래 줄을 걷었다.
 |    ~~`.common-table td.flo-td.flo-col--amount, .common-table th.flo-th.flo-col--amount { text-align: right; }`~~
 | 🔑 `numeric`(`is-num`)은 다시 「숫자 글꼴 폭을 고르게」(`flo-t-num`)만 뜻한다.
 */
/*
 | 🆕 **결측은 어느 열에서든 오른쪽이다** (2026-08-31 · 🧑 지시 · 이슈 #1011).
 |
 | 🧑 *"해당 라인 줄 맞춰. 미분류일 때"* → *"어긋나는 거 별로인데 최대한 방법 없어?"*
 |
 | 🚨 **열마다 다른 자리에 찍혀 줄이 끊겨 보였다.** 값이 여럿 비는 행을 실측하면
 |    숫자 열의 `-` 셋은 **오른쪽 끝 8px**, 카테고리의 `-` 하나는 **가운데** 였다.
 |
 | 🔑 **세 가지를 다 그려서 재고 골랐다** (창 1920 · 「카테고리 미분류」 18행).
 |
 | | 결측을 어디에 | 세로로 어긋난 열 | 가로로 끊긴 행 |
 | |---|:-:|:-:|
 | | 열 정렬을 따름(원래) | 2 | **14/18** |
 | | 가운데 | 2 | **14/18** |
 | | **오른쪽** | **1** | **0/18** |
 |
 | 🔑 **오른쪽이 두 잣대 모두에서 낫다.** 결측이 뜨는 열은 대부분 숫자 열(오른쪽)이라,
 |    오른쪽으로 맞추면 **그 열들은 세로로도 가지런해지고** 행도 한 줄로 선다.
 |    남는 어긋남은 **카테고리 한 열**뿐이다(값은 가운데, 결측은 오른쪽).
 |
 | 🚫 **가운데로 되돌리지 마라** — 숫자 열 셋이 한꺼번에 어긋나고 행도 다시 끊긴다.
 | 🚨 **`is-num` 뒤에 와야 이긴다** — 셈이 같아 순서가 정한다. 🚫 위로 올리지 마라.
 | 🔑 **왼쪽 열(`is-start`)은 예외다** — 이름처럼 왼쪽에서 시작하는 열은 그대로 둔다.
 |
 | 🔻 **2026-10-04 (🧑 지시 · 이슈 #1562) 결측은 그 열의 값과 같은 자리에 선다.** 아래 줄을 걷었다.
 |    ~~`.common-table td.flo-td.is-missing { text-align: right; }`~~
 | 🚨 위 표의 「오른쪽」은 결측이 뜨는 열이 대부분 오른쪽 숫자 열이던 때의 답이다. 이제 금액 열 말고는
 |    숫자도 가운데라, 결측도 가운데에 서야 같은 열 안에서 값과 「-」가 한 줄로 선다.
 |    인플루언서 검색 1280 · 390 실측: 「-」가 뜨는 열 열 개 모두 머리 · 값 · 「-」가 가운데이고, 「-」는 칸 가운데에서 0px 이다.
 | 🔑 #1011 이 막으려던 「한 행 안에서 결측이 다른 자리에 찍힘」도 함께 풀린다. 이름 열 말고는 모두 가운데다.
 | 🔻 2026-10-06 (🧑 결정 · #1572) 이름 열도 가운데라 아래 줄을 걷었다. 결측은 어느 열에서든 값과 같이 가운데다.
 |    ~~`.common-table td.flo-td.is-start.is-missing { text-align: left; }`~~
 */

/*
 | 🚨 **점 하나가 빠져 있었다** (2026-08-31 · 이슈 #1031). `common-table` 이라고만
 |    적혀 있어 **`<common-table>` 이라는 없는 태그**를 가리켰고, 그래서
 |    **몸통 칸에는 왼쪽 맞춤이 한 번도 적용된 적이 없다.**
 |
 | 🔑 머리는 왼쪽인데 몸통은 가운데로 서서 **한 열이 74px 어긋나 보였다.**
 |    오류가 나지 않아 **눈으로 보고 이상하다고 느끼기 전까지 드러나지 않는다.**
 | 🔑 `CssTypeSelectorGuardTest` 가 같은 실수를 다시 잡는다.
 | 🔻 2026-10-06 (🧑 결정 · #1572) 이름 열(`is-start`)도 가운데다. 아래 줄을 걷었다.
 |    ~~`.common-table td.flo-td.is-start, .common-table th.flo-th.is-start { text-align: left; }`~~
 | 🔑 `start` · `col="name"` 은 이제 정렬을 정하지 않는다. 이름 열은 폭 없이 남는 자리를 받는 열이라는 뜻만 남는다.
 */

/*
 | 🆕 **열 종류별 폭** (2026-10-03 · 이슈 #1557 · 정본 125- 「표」).
 |
 | 🚨 킷 표는 `table-layout: fixed` 라 폭을 준 머리 칸이 없으면 열이 똑같이 나뉜다.
 |    발송 이력은 다섯 열이 184px 씩 받아 받는 주소가 두 줄로 접혔고(행 89 · 다른 행 68),
 |    정산은 「차수」 칸이 이름 칸과 같은 184px 였다(1280 실측).
 | 🔑 짧은 값 열에만 폭을 주고, 이름(`name`) · 긴 글(`text`) 열은 폭 없이 남는 자리를 나눈다.
 |    머리 칸은 `x-table-head-cell col="…"` 가 이 클래스를 단다.
 | 🔑 화면 전용 폭(`.flo-cam-list` · `.flo-dash-table` · `.flo-roster-col--*` · `.flo-picked-col--*`
 |    · `.flo-template-list`)은 셈이 더 높아 그대로 이긴다. 그 화면들은 따로 잰 값이다.
 */
.common-table th.flo-col--pick { width: 48px; }
.common-table th.flo-col--status,
.common-table th.flo-col--short { width: 112px; }
.common-table th.flo-col--num { width: 120px; }
.common-table th.flo-col--date { width: 120px; }
.common-table th.flo-col--datetime { width: 160px; }
.common-table th.flo-col--action { width: 136px; }
/* 🆕 2026-10-06 (#1585) 발송 이력 「용도」 · 「상품 구매 URL 메일」(105) + 칸 여백 24 가 112 에 들지 않아 그 행만 두 줄로 접혔다. 136 은 관리 열과 같은 값 */
.common-table th.flo-th--purpose { width: 136px; }
/*
 | 🆕 금액 열 (2026-10-04 · 이슈 #1562). 폭은 숫자 열과 같은 120 이다.
 | 🔑 `:where()` 로 셈을 낮췄다. 화면 전용 폭(`.flo-picked-col--price` 100 · `.flo-cam-list` 108)이 이긴다.
 */
:where(.common-table) th.flo-col--amount { width: 120px; }
/*
 | 🔑 상태 · 날짜 · 짧은 값 열은 결측도 가운데다. 값이 가운데인 열에서 「-」만 오른쪽에 서면
 |    같은 열이 두 자리로 갈린다(발송 완료 「상태」 · 캠페인 「기간」 실측).
 | ⚠️ 위 #1011 의 「결측은 오른쪽」은 그대로다. 숫자 열이 모인 행에서 줄을 잇는 규칙이고,
 |    열 종류를 단 상태 · 날짜 열만 여기서 뺀다. 🚨 그 규칙보다 뒤에 있어야 이긴다.
 | 🔻 2026-10-04 (#1562) 「결측은 오른쪽」 줄을 걷어 이 다섯 줄은 기본값(가운데)과 같아졌다.
 |    지워도 모양은 같지만, 걷은 규칙이 돌아올 때를 막는 자리로 둔다.
 */
/*
 | 🔻 2026-10-05 (#1567) 짧은 값 · 날짜 열은 왼쪽이 되어 이 묶음에서 뺐다. 「-」도 값과 같이 왼쪽에 선다.
 |    ~~`.common-table td.flo-td.is-missing.flo-col--short,` · `…--date,` · `…--datetime,`~~
 */
.common-table td.flo-td.is-missing.flo-col--status,
.common-table td.flo-td.is-missing.flo-col--action { text-align: center; }

/* ── 화면 머리 — 부제는 제목 아래 줄이다 (#1439) ─────────────────────
 |
 | 🔻 **2026-09-09 (#1439) 부제를 제목 아래로 내렸다** (🧑 지시).
 |
 | 🧑 *"UI에서 큰 타이틀 옆에는 세부 설명 안 썼으면 좋겠음 … 써야한다면 밑에
 |    줄로 빼기 또는 툴팁으로 작성함"*
 |
 | 🔻 ~~참조 캡처는 「캠페인 성과」 옆에 설명을 붙인다. 아래에 두면 제목 덩어리가
 |    두 줄이 되어 본문이 밀린다.~~ **(미채택 · 2026-08-26 #668 의 판단)**
 | 🚨 **그 판단의 값이 실제로는 반대로 나왔다.** 부제가 세 문장인 화면이 있어
 |    (제안서 구성 · `FLO-CAM-007`) 제목 옆에 서면 **제목을 밀어내고 줄바꿈시킨다.**
 |    화면 34곳이 이 자리를 쓰고, 문장 길이는 화면마다 다르다.
 |
 | 🔑 **자리의 주인은 이 한 곳이다** — 🚫 화면 34곳을 하나씩 고치지 마라.
 | 🔑 **`display` 선언을 지웠을 뿐이다** — `h1` 과 `p` 가 블록이라 저절로 쌓인다.
 |    사이 여백은 `flo-shell.css` 의 `.flo-page-head__meta { margin-top: 6px }` 가 준다.
 |    🚫 여기에 `margin-top: 0` 을 되살리지 마라 · 그것이 붙는 순간 두 줄이 달라붙는다.
 | 🔑 **`min-width: 0` 은 `flo-shell.css` 가 갖는다** · 여기서 다시 적지 않는다.
 | 🚫 **`display: flex` 로 되돌리려면 사용자의 정정 지시가 있어야 한다** (R-204).
 */
.flo-page-head__text { min-width: 0; }
/*
 | 🆕 2026-10-03 (#1558 B2) 머리 높이의 바닥을 단추 높이(38)로 둔다.
 | 🚨 위저드 네 단계 중 ④만 머리 오른쪽에 단추(38)가 있어 머리가 38, 나머지는 제목 줄(31)이었다.
 |    그래서 ④에서만 바로 아래 단계 표시줄이 7px 내려갔다(11차 점검 B2).
 | 🔑 부제가 있는 머리(57)는 이미 넘으므로 바뀌지 않는다.
 */
.flo-page-head { min-height: var(--flo-control-h); }
/*
 | 🆕 2026-10-03 (#1558 B1) 머리 오른쪽 묶음의 바닥 높이를 제목 한 줄(22px × 1.4)로 둔다.
 | 🚨 글자 링크(높이 20)만 있는 묶음은 위에 붙어 링크 가운데가 제목 가운데보다 5.6px 위였다
 |    (발송 완료 · 쿠폰 · 응답 상세 · 주문 귀속 근거).
 | 🔑 묶음은 이미 `align-items: center` 라, 바닥 높이만 주면 링크가 제목 줄 가운데에 선다.
 |    단추(38)는 제목 줄보다 커서 그대로다. 🚫 대시보드 「캠페인 등록」 회색 단추는 #651 결정이라 건드리지 않는다.
 */
.flo-page-head__actions { min-height: calc(22px * 1.4); }

/* ═══════════════════════════════════════════════════════════════════════
 | 화면이 부르는데 정의가 없던 클래스 25종 (이슈 #668)
 |
 | 🚨 **화면 안쪽이 «맨 글자» 로 보이던 진짜 이유다.** 옛 디자인이 정의하던 이름을
 |    화면 43개가 그대로 부르고 있었는데, 그 정의가 제거되면서(#662) **CSS 는
 |    오류를 내지 않고 그 선언만 버렸다.** 절 제목 23곳이 본문과 같은 글자가 됐다.
 |
 | 🔑 **값은 킷과 참조 캡처에서 읽었다.** 🚫 새 값을 지어내지 마라 (R-306).
 | 🔑 **화면을 하나씩 킷으로 다시 입힐 때 이 이름들이 사라진다.** `check-legacy-tokens`
 |    가 남은 화면을 세는 것과 같은 이행이다.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── 글자 층위 ─────────────────────────────────────────────────────── */
/* 🔑 절 제목 — 화면 안에서 가장 많이 쓰인다(23곳). 화면 제목(h1)보다 한 단 아래다 */
/*
 * 🚨 **특이도로 져서 값이 안 먹었다** — 「.flo-main h2」(클래스+요소)가
 *    「.flo-t-section」(클래스 하나)을 이긴다. 오류가 나지 않아
 *    «정했는데 다른 크기» 로 그려졌다. 15px 로 적었는데 17px 로 나왔다.
 *    🔑 **브라우저 계산값을 재서 알았다** — CSS 는 「적었다」와 「먹었다」가 다르다.
 * 🚫 important 로 덮지 마라 — 다음 사람이 못 고친다. 자리를 맞춘다.
 */
/* 🔻 2026-09-29 (#1530 · 🧑 결정) 15/600 → 16/700 · 판·절·서브카드 제목을 한 눈금으로 묶는다 */
.flo-main .flo-t-section,
.flo-t-section { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 0; }
/* 🔻 2026-10-01 (#1542 · 🧑 결정 "16 굵게 (권장)") 17/600 → 16/700 · 125 글자 눈금에 없던 값이었다 */
.flo-main .flo-t-title,
.flo-t-title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 0; }
/* 🔻 2026-10-01 (#1546) 22/600 → 22/700 · 125 의 쪽 제목 눈금 */
.flo-main .flo-t-screen,
.flo-t-screen { font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); color: var(--flo-ink-1); margin: 0; }
.flo-main .flo-sec__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); margin: 0; } /* 🔻 2026-10-06 (#1587 B) `margin: 0` 을 더했다. `.flo-main h2`(28 0 12)가 이겨 절 제목 아래가 12 + 머리 12 = 24 로 판 머리(12)의 두 배였다(주문 귀속 근거 · 캠페인 요약) */
.flo-main .flo-subcard__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); margin: 0; }
/* ⚠️ 화면 제목은 셸의 `.sec-title` 이 그린다 — 이것은 남은 부름을 받아 주는 자리다 */
/* 🔻 2026-09-29 (#1530 독립 검토) 22px → 26px · 지표 숫자 눈금 하나로 묶는다(flo-t-metric·flo-kpi__value·flo-summary) */
/* 🔻 2026-10-05 (#1567 독립 검토) 줄 높이를 적는다. 없으면 `:where(.flo-main) p`(22)를 받아 26 글자가 22 상자에 잘렸다(명단 요약) */
.flo-t-num-lg { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); font-variant-numeric: tabular-nums; color: var(--flo-ink-1); }
/* 🔑 조용한 링크 — 밑줄 없이 두되 hover 에서 드러난다. 🚫 색만으로 링크임을 알리지 마라 */
.flo-link-quiet,
.flo-main .flo-link-quiet { color: var(--flo-ink-2); text-decoration: none; }
.flo-link-quiet:hover { color: var(--flo-primary); text-decoration: underline; }

/* ── 판 ────────────────────────────────────────────────────────────
 | 🔑 `.flo-sheet` 는 서브카드와 같은 것이다 — 옛 이름을 받아 준다
 */
/* 🔻 2026-09-29 (#1530 · 🧑 결정) 서브카드와 같은 것이라 안여백도 같이 16 사방으로 내렸다 */
/* 🔻 2026-10-05 (#1565) 반경 ~~10~~ → 12(카드 눈금 하나) · 안여백 16 을 내용선 이름(`--flo-inset`)으로 둔다 */
.flo-sheet {
    --flo-inset: var(--flo-card-inset); /* 🔻 2026-10-14 (#1737) ~~16~~ · 서브카드와 같은 내용선 */
    background: var(--flo-card); border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius-card); padding: calc(var(--flo-inset) - 1px); margin-bottom: 16px;
}
.flo-sheet:last-child { margin-bottom: 0; }
/*
 | 🆕 2026-10-03 (#1558 C1) 간격을 가진 묶음(`gap-*`) 안에서는 아래 여백을 걷는다.
 |    대시보드는 판들을 `flex flex-col gap-4` 로 쌓는데 판마다 아래 여백 16 이 더해져 판 사이가 32 였다.
 | 🔑 간격의 주인은 묶음의 `gap` 하나다.
 */
.flo-main :is(.flex, .grid)[class*="gap-"] > .flo-sheet { margin-bottom: 0; }
/* 🔑 영역 편집기가 쓰는 묶음 — 안쪽 규칙은 부품이 갖는다 */
.flo-area { border: 1px solid var(--flo-line); border-radius: 8px; padding: 16px; margin-bottom: 12px; }

/* ── 값 표기 ───────────────────────────────────────────────────────
 | 🔑 번호표는 자리폭을 고정한다 — 사람이 눈으로 대조하는 값이다
 */
.flo-serial { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .02em; }
.flo-ratio { font-variant-numeric: tabular-nums; font-weight: 600; }
/* 🔑 막대 — 길이가 곧 값이다. 🚫 0 을 «없음» 으로 그리지 마라 (최소 폭은 화면이 준다) */
/* ── 비율 막대 — 홈과 채움 (이슈 #719) ───────────────────────────────
 |
 | 🚨 **한 번도 그려진 적이 없었다.** 브라우저로 재 보니 막대 4개가 **전부 폭 0** 이었고,
 |    안쪽 칸은 `width: 50%` 를 달고도 **0px** 이었다. 두 가지가 겹쳐 있었다.
 |
 |    ① `display: block; height: 8px` 만 있어 **가로로 늘어선 칸에서 0 으로 눌렸다**
 |    ② 색이 **바깥**에 붙어 있고 비율을 가진 **안쪽에는 바탕색이 없었다** —
 |       폭만 줬다면 **언제나 100% 채워진 막대**가 됐다. 그 편이 더 나쁘다:
 |       **비율이 반영되지 않는데 막대는 그럴듯하게 보인다.**
 |
 | 🚨 **오류가 나지 않았다.** 화면은 200 이고 숫자(`수락 2/4`)도 제대로 나왔다 —
 |    **막대가 없다는 것만 눈으로 봐야 드러났다.**
 |
 | 🔑 **대시보드 막대(`.flo-backlog-track` + `.flo-backlog-bar`)와 같은 구조다** —
 |    홈이 바탕색을 갖고 채움이 강조색을 갖는다. 🚫 새 구조를 고안하지 마라 (R-307).
 | 🚫 **홈에 강조색을 되돌리지 마라** — 되돌리는 순간 다시 「언제나 가득 찬 막대」다.
 | 🚫 **홈의 바탕색을 지우지 마라** — `0/12` 는 **「재 봤고 0」** 이라 빈 홈이 보여야 한다.
 |    「못 쟀다」(`-`)와 다른 사실이다.
 */
.flo-bar {
    /* 🔑 자기 폭을 갖는다 — 없으면 flex 안에서 0 으로 눌린다 */
    display: inline-block; width: 64px; flex: none;
    height: 8px; border-radius: 999px;
    background: var(--flo-line-soft);
    overflow: hidden;
    vertical-align: middle;
}
/* 🔑 비율은 **폭으로만** 온다 — 행마다 달라지는 유일한 값이라 마크업이 인라인으로 적는다 */
.flo-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--flo-primary);
    width: var(--flo-bar-fill, 0);
}

/* ── 세그먼트 토글 ─────────────────────────────────────────────────
 | 🔑 순서가 바뀌는 화면은 기준을 감추면 안 된다 — 고른 칸만 흰 칩으로 뒤집는다
 */
/*
 | 🔻 2026-10-05 (#1567 독립 검토) ~~안여백 3 · 칸 28(전체 36)~~ → 안여백 4 · 칸 조밀 높이 - 10(전체 32).
 |    조밀한 자리의 조작은 32 하나다(칩 · 탭 · 작은 단추). 보기 전환(전체 40)과 같은 짜임이다.
 */
.flo-segment {
    display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--flo-radius); /* 🔻 2026-10-11 (#1618) ~~8 · 칸 6~~ → 6 · 칸 4 · 보기 전환(`.flo-viewtoggle`)과 같은 짝 */
    background: var(--flo-line-soft); border: 1px solid var(--flo-line);
}
.flo-segment-item,
.flo-main .flo-segment-item {
    display: inline-flex; align-items: center; height: calc(var(--flo-control-h-sm) - 10px); padding: 0 12px;
    border-radius: 4px; font-size: 13px; color: var(--flo-ink-2);
    text-decoration: none; background: transparent;
}
.flo-segment-item[aria-current],
.flo-segment-item.is-on { background: var(--flo-card); color: var(--flo-ink-1); font-weight: 600; }
/* 🆕 2026-10-11 (#1618) 같은 층 화면 사이 이동(`x-coupon-nav`) · 좁으면 칸이 줄을 바꾼다(R-308) */
.flo-segment.flo-segment--nav { flex-wrap: wrap; max-width: 100%; margin-bottom: 16px; }
/* 🆕 2026-10-14 (#1737 · 묶음 H) 바로 뒤 판이 위 여백 16 을 가지면 띠 아래는 0 이다. 두 여백이 겹치지 않고 더해져 32 였다(인플루언서 검색 · 관심목록). 판 사이 16 하나 */
.flo-main .flo-segment.flo-segment--nav:has(+ :is(.cont-sec, form)) { margin-bottom: 0; }
.flo-segment--nav .flo-segment-item { word-break: keep-all; }

/* 🔑 오류 난 입력칸 — 테두리로 그 칸을 짚는다. 문구는 `aria-describedby` 로 잇는다 */
.flo-field--error { border-color: var(--sig-fail) !important; }

/* ── 대시보드 「밀린 일」 막대 ──────────────────────────────────────
 |
 | 네 칸 격자다: 무엇 · 막대 · 날수 · 가기.
 | 🔑 눈금은 축이 나른다 — 🚫 막대마다 숫자를 붙이지 마라. 값은 오른쪽 날수가 말한다.
 */
/*
 | 🚨 **막대 트랙이 남는 폭을 전부 받고 있었다** (2026-08-26 · 이슈 #648 · 정본 110- 21-4).
 |    넓은 화면에서 트랙이 1000px 를 넘는데 **1일짜리 막대는 그중 8%** 이고
 |    **나머지는 빈 격자**였다.
 |
 | 🔑 **축은 눈금 5개**(0 · 한 칸 · 두 칸 · 세 칸 · 최대)다. **눈금 사이가 120px 를
 |    넘으면 더 넓혀도 견주기가 나아지지 않는다** → **4구간 × 120 = 480px** 를 상한으로 둔다.
 |    ⚠️ **이 상한은 실측이 아니라 Agent 권장**이다(R-111). 🔑 **최소 160px 는 그대로다.**
 |
 | 🚫 **축 최대 12일 고정을 건드리지 마라** — **밀린 일이 적을 때 막대가 화면을 채워
 |    「심각해 보이는」 것을 막는 의도된 장치**다. **여기서 고치는 것은 트랙의 물리적 폭**이다.
 |    🚫 **둘을 섞지 마라.**
 */
/*
 | 🔻 **2026-10-06 (#1580) 한 묶음이 한 줄이다.** ~~네 칸 격자 · 무엇 칸이 세 줄 · 눈금 줄이 막대 위에 떠 있음~~
 |    → 다섯 칸(무엇 · 누구 · 막대 · 최장 경과 · 처리)이 한 줄에 서고, 눈금 줄은 맨 아래 막대 밑에 붙는다.
 | 🔑 줄(`.flo-backlog-row`)은 `subgrid` 로 바깥 격자의 칸 폭을 그대로 받는다. 그래서 줄마다 막대가 같은 자에 선다.
 | 🔑 칸 글자가 모두 한 줄이라 가운데 맞춤이 곧 같은 기준선이다. 줄 높이는 단추(32) + 위아래 12 = 56.
 | 🔑 막대 칸 상한 360 은 #648 의 「눈금 사이 120 을 넘으면 견주기가 나아지지 않는다」를 그대로 따른다(4구간 × 90).
 */
.flo-backlog {
    display: grid; grid-template-columns: max-content minmax(120px, 1fr) minmax(160px, 360px) max-content max-content;
    column-gap: 16px; align-items: center;
}
/* 🔑 `subgrid` 를 모르는 브라우저는 앞의 칸 정의를 쓴다(`.flo-ready__item` 과 같은 짜임) · 줄 사이 칸 폭은 맞지 않아도 한 줄은 선다 */
.flo-backlog-list {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: max-content minmax(120px, 1fr) minmax(160px, 360px) max-content max-content; grid-template-columns: subgrid;
    margin: 0; padding: 0; list-style: none;
}
.flo-backlog-row {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: max-content minmax(120px, 1fr) minmax(160px, 360px) max-content max-content; grid-template-columns: subgrid;
    align-items: center;
    padding: 12px 0; border-top: 1px solid var(--flo-line-soft);
}
.flo-backlog-list > .flo-backlog-row:first-child { border-top: 0; }
/*
 | 🔻 2026-10-12 (#1645 · 🧑 「제목부가 너무 아래 미응답 확인이랑 구분이 안되지않나?」) 머리 선을 걷은 뒤(#1638) 판 제목과 첫 줄이 한 덩이로 읽혔다.
 |    ~~첫 줄 위 여백 0 · 마지막 줄 아래 여백 0~~ → 줄 목록이 옅은 바탕 안쪽 상자(좌우 16 · 모서리 8)에 서고 줄마다 위아래 12 를 갖는다.
 | 🔑 판 제목은 흰 바탕의 제목, 줄은 회색 상자 안의 목록이라 바탕으로 갈린다. 머리에 행동이 없으면 선 대신 여백이라는 B 규칙(#1638)을 지킨다.
 | 🔑 `subgrid` 라 안쪽 여백은 바깥 칸 폭에 더해질 뿐이고 아래 눈금 줄(같은 칸)과 막대가 어긋나지 않는다.
 */
/*
 | 🔻 2026-10-12 (#1661 · 🧑 「밀린일의 아래의 박스가 너무 혼자 붕 떠있지않나?」) 옅은 바탕 상자를 줄 목록에서 바깥 격자(줄 목록 + 눈금 줄)로 옮겼다.
 |    ~~`.flo-backlog-list { padding: 0 16px; border-radius: 8px; background: var(--flo-bg); }`~~ 상자가 줄만 감싸고 눈금(0 · 12 · 24 · 36 · 48일)은 상자 밖 흰 바탕에 걸쳐
 |    막대와 눈금이 따로 놀았다. 이제 줄 · 눈금 · 도움말이 한 상자 안이다. 아래 여백 8 로 눈금이 상자 끝에 붙지 않는다.
 | 🔑 `subgrid` 라 안쪽 여백은 바깥 칸 폭에 더해질 뿐이고 막대와 눈금은 같은 칸이라 어긋나지 않는다.
 | 🔑 열 정의 규칙과 따로 둔다 · 같은 선택자를 두 번 쓰면 `DashboardTableWidthTest` 가 앞뒤 순서를 의심한다. 그래서 `:is(div)` 로 한 단 비껴 쓴다.
 */
.flo-backlog:is(div) { padding: 0 16px 8px; border-radius: 8px; background: var(--flo-bg); }
.flo-backlog-list > .flo-backlog-row { border-top-color: var(--flo-line); }
.flo-backlog-row--axis { padding: 4px 0 0; border-top: 0; }
/*
 | 🆕 2026-10-19 (#1799) 마지막 막대와 눈금 축선 사이는 16 이다(간격 눈금). 마지막 줄 아래 12 + 눈금 줄 위 4 에 막대 아래 10 이 더해져
 |    26 이었다(1440 실측 · 좁은 판은 20).
 | 🔑 넓은 판: 막대 아래 10(단추 32 줄 안의 가운데) + 마지막 줄 아래 2 + 눈금 줄 위 4 = 16. 좁은 판(800 미만)은 아래 `@container` 가 8 을 준다.
 */
.flo-backlog-list > .flo-backlog-row:last-child { padding-bottom: 2px; }
.flo-backlog-axis { grid-column: 3; position: relative; height: 18px; }
.flo-backlog-help { grid-column: 4; display: flex; align-items: center; }
.flo-backlog-help .flo-hint { margin-left: 0; top: 0; }
/* 🔑 풍선은 위로 연다 · 판이 스스로 넘김(overflow-y)을 가져 아래로 열면 잘린다 */
.flo-backlog-help .flo-hint__bubble { top: auto; bottom: calc(100% + 9px); }
.flo-backlog-help .flo-hint__bubble::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--text-color-2, #202527); }
.flo-backlog-tick { position: absolute; top: 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); white-space: nowrap; }
.flo-backlog-what { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.flo-backlog-title { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-backlog-count { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-primary); }
.flo-backlog-target {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2);
}
.flo-backlog-track {
    position: relative; height: 12px; border-radius: 999px;
    background: var(--flo-line-soft); overflow: hidden;
}
.flo-backlog-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--flo-line);
    left: var(--flo-grid-at);
}
/*
 | 막대 — 🔑 **색은 화면이 넣고, 흐름은 여기가 넣는다** (🧑 2026-08-26 · 이슈 #717).
 |
 | 🧑 «그래프는 그라데이션이면 좋겠음». 다만 이 막대의 색은 **꾸밈이 아니라 뜻**이다 —
 |    0~2일 · 3~6일 · 7일 이상을 갈라 준다(`ElapsedDays`). 그래서 **한 가지 보라로
 |    통일하지 않고**, 단계마다 **자기 색의 옅은 쪽에서 진한 쪽으로** 흐르게 한다.
 |
 | 🔑 **바탕색은 건드리지 않는다.** 화면이 `background-color` 로 단계 색을 넣고,
 |    여기는 그 위에 **흰빛을 왼쪽에 얹었다가 오른쪽에서 걷는다.** 그래서
 |    **막대 끝이 가장 진하다** — 눈이 값의 끝으로 간다.
 | 🚨 **화면에서 `background` 로 적으면 이 규칙이 지워진다.** 그 줄임 표기는
 |    `background-image` 까지 함께 초기화한다 — 반드시 `background-color` 로 적어라.
 | 🔑 **단계 색의 유일한 출처는 `ElapsedDays::inkVar()` 다.** 🚫 세 값을 여기에
 |    다시 적지 마라 — 적는 순간 같은 5일이 두 색이 된다.
 | 🚫 흐르는 방향을 뒤집지 마라 — 짧은 막대는 흐름이 통째로 눌려 보이므로
 |    **진한 쪽이 끝에 있어야** 짧아도 어디까지 왔는지 읽힌다.
 */
/*
 | 🆕 **폭과 단계 색을 값으로 받는다** (2026-08-27 · 이슈 #807 · R-307).
 |
 | 🚨 **`background` 로 줄여 적지 마라** — 그 표기는 `background-image` 까지 초기화해
 |    **아래 그라데이션을 지운다.** 오류가 나지 않아 **막대가 평평해진 것만 남는다**(#717).
 | 🔑 **단계 색은 `ElapsedDays::inkVar()` 한 곳에서만 나온다** — 🚫 여기에 세 값을
 |    다시 적지 마라. `BrandAccentGuardTest` 가 그것을 잰다.
 */
.flo-backlog-bar {
    position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px;
    width: var(--flo-bar-width, 0);
    /*
     | 🚫 **대비값을 두지 않는다** — 대비값을 적으면 그것이 **단계 색을 두 번째로 적는
     |    것**이 되고, `BrandAccentGuardTest` 가 정확히 그것을 막는다.
     | 🔑 **화면이 언제나 넘긴다** — 띠는 `ElapsedDays::bandOf()` 로 늘 계산된다.
     */
    background-color: var(--flo-band-ink);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 100%);
}
.flo-backlog-days { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 14px; line-height: var(--flo-lh-ui); }
.flo-backlog-days__lead { font-size: 13px; font-weight: 400; color: var(--flo-ink-2); }
/*
 | 🔑 경과 부품의 표식 자리를 「최장」 앞으로 옮긴다. 부품은 표식이 없어도 자리(9 + 5)를 비워 두는데,
 |    「최장」 뒤에 그 빈자리가 서면 「최장 ‸‸‸ 5일 경과」처럼 벌어졌다. 앞에 두면 「▲ 최장 48일 경과」 ·
 |    「  최장 5일 경과」로 「최장」과 숫자가 줄마다 같은 자리에 선다. 색 · 굵기는 부품에서 그대로 물려받는다.
 */
.flo-backlog-days > .flo-elapsed { display: contents; }
.flo-backlog-days .flo-elapsed__mark { order: -1; margin-right: 0; }
.flo-backlog-go { display: flex; justify-content: flex-end; }
/*
 | 🔻 2026-10-06 (#1580) ~~`@media (max-width: 900px)`~~ → 판 폭으로 가른다(`@container`). 판 안 폭이 800 아래면
 |    한 묶음이 세 줄이다 · 무엇 + 처리 / 누구 / 막대 + 최장 경과.
 | 🚨 창 폭으로 가르면 1024 창(옆 메뉴가 서 있어 판 안 폭 630)에서 다섯 칸이 한 줄에 눌려 대상 칸이 120 으로
 |    잘리고 눈금 「36일48일」이 붙었다. 옆 메뉴가 눕는 1023 이하는 오히려 판이 넓다. 창 폭은 판 폭을 말하지 않는다.
 | 🔑 다섯 칸이 읽히는 최소 폭: 무엇 170 + 누구 180 + 막대 200 + 경과 110 + 단추 74 + 칸 사이 64 ≈ 800.
 | 🔑 막대가 줄의 마지막이라 맨 아래 눈금 줄이 넓은 폭과 똑같이 막대에 붙는다.
 | 🚫 막대를 지우지 마라. 그것이 이 화면의 값이다.
 */
.flo-backlog-panel { container: flo-backlog / inline-size; }
@container flo-backlog (max-width: 799px) {
    .flo-backlog { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 12px; }
    .flo-backlog-row { row-gap: 8px; }
    .flo-backlog-what { grid-column: 1; grid-row: 1; }
    .flo-backlog-go { grid-column: 2; grid-row: 1; }
    .flo-backlog-target { grid-column: 1 / -1; grid-row: 2; }
    .flo-backlog-track { grid-column: 1; grid-row: 3; }
    .flo-backlog-days { grid-column: 2; grid-row: 3; }
    .flo-backlog-axis { grid-column: 1; }
    .flo-backlog-help { grid-column: 2; }
    /* 🔑 `subgrid` 를 모르는 브라우저의 대신 값 · 바깥 격자와 같은 두 칸이다(아래 줄이 이긴다) */
    .flo-backlog-list,
    .flo-backlog-row { grid-template-columns: minmax(0, 1fr) max-content; grid-template-columns: subgrid; }
    /* 🔑 막대가 줄 끝이라 막대 아래(4)가 곧 줄 끝이고, 눈금 줄 위 4 를 더해 막대와 눈금 사이가 8 이다.
     |    마지막 줄 아래 여백 0 은 바깥 규칙이 이미 준다 */
    /* 🔻 2026-10-19 (#1799) 위 두 줄은 낡았다. 줄마다 아래 12 가 있어(#1645) 막대와 눈금 사이가 20 이었다(390 실측).
     |    막대 아래 4(경과 글 20 줄 안의 가운데) + 마지막 줄 아래 8 + 눈금 줄 위 4 = 16 · 넓은 판과 같은 값이다 */
    .flo-backlog-list > .flo-backlog-row:last-child { padding-bottom: 8px; }
}
/*
 | 🆕 2026-11-05 (#1993) 묶음이 하나면 막대 · 눈금 줄을 그리지 않는다(`dashboard.blade.php` · `.flo-backlog--single`).
 | 🚨 막대는 줄끼리 견주는 자라, 줄이 하나일 때 막대 한 줄과 0 ~ 12일 눈금 줄이 판을 무겁게 했다. 값은 「최장 N일 경과」가 말한다.
 | 🔑 칸은 넷이다(무엇 · 누구 · 최장 경과 · 처리). 줄은 `subgrid` 라 바깥 격자 정의만 바꾸면 따라온다.
 | 🔑 눈금 줄이 없으므로 마지막 줄 아래는 다른 줄과 같은 12, 상자 아래 여백(눈금 몫 8)은 0 이다.
 | 🔑 좁은 판(800 미만)은 무엇 + 처리 / 누구 + 최장 경과 두 줄이다. 막대 줄(셋째 줄)이 없다.
 | 🚫 위 `.flo-backlog { … }` 규칙을 고치지 마라 · 묶음이 둘 이상일 때의 짜임이다(`DashboardTableWidthTest` 검사 ④).
 */
.flo-backlog.flo-backlog--single { grid-template-columns: max-content minmax(120px, 1fr) max-content max-content; padding-bottom: 0; }
.flo-backlog--single .flo-backlog-list > .flo-backlog-row:last-child { padding-bottom: 12px; }
@container flo-backlog (max-width: 799px) {
    .flo-backlog.flo-backlog--single { grid-template-columns: minmax(0, 1fr) max-content; }
    .flo-backlog--single .flo-backlog-target { grid-column: 1; }
    .flo-backlog--single .flo-backlog-days { grid-row: 2; }
}

/* 🔑 대시보드 표는 카드 안에서만 넘친다 */
/*
 | 🔻 2026-10-05 (#1565) ~~`.flo-dash-table { overflow-x: auto; }`~~ → 넘김은 안쪽 감싼 칸(`.flo-table-wrap`)이 맡는다.
 |    묶음이 넘김을 잡으면 표가 판 가장자리까지 넓어진 몫(좌우 16)을 잘라, 머리 띠가 판 내용선에서 시작하고
 |    첫 글자가 띠 끝에 붙었다(1280 실측). 「카드 안에서만 넘친다」는 감싼 칸이 그대로 지킨다.
 */
.flo-dash-table { overflow-x: visible; }

/* ───────────────────────────────────────────────────────────────────────
 | 대시보드 표 열 폭 (2026-08-26 · 이슈 #648 · 정본 110- 21장)
 |
 | 🚨 **폭 지정이 0개라 일곱 열이 균등 분할되고 있었다.** 공용 표가
 |    `table-layout: fixed` 라 지정이 없으면 그렇게 된다 — 1024·1440·1920
 |    **어느 폭에서도 이름 열이 정확히 1/7(14.3%)** 이었다.
 |    🔑 **이름은 더 잘리고 숫자는 더 헐렁했다.**
 |    ⚠️ **이슈가 적은 증상(이름 열 65%)과 반대**다 — 그 규칙이 사라진 뒤의 상태다.
 |
 | 🚨 **`table-layout: fixed` 는 첫 행의 지정이 전부**다.
 |    🚫 **본문 셀에 폭을 주지 마라 — 조용히 무시되고 오류도 안 난다.**
 |
 | 🔑 **값은 자릿수에서 나왔다** (Chromium 실측 · 글자 15px · 셀 여백 24px + 테두리 1px).
 |    🚫 **옛 px 값을 되살린 것이 아니다** — 글꼴이 바뀌어 다시 쟀다(R-306).
 |
 |   상태        「기한 경과」 + 이름표 여백 18px   → 85
 |   기간        `12-31 ~ 12-31`                → 113
 |   수락 / 대상  `999 / 999`                    → 90   (열 이름이 더 넓다)
 |   응답 대기    `9,999명`                      → 79   (열 이름이 더 넓다)
 |   처리 필요    `9,999건`                      → 79   (열 이름이 더 넓다)
 |   순매출      `999,999,999원`                → 124
 |                                       고정 합계 570
 |
 | 🔑 **이름 열은 남는 것을 받되 상한이 있다** — 표 자체에 상한을 두어 흘린다.
 |    최소 151px(한글 10자) · 상한 403px(한글 30자). 🚫 **어림수가 아니다.**
 | ⚠️ **넓은 화면에서 이름 열은 표의 41%** 다 — 절반을 넘지 않는다.
 |
 | ⚠️ **잘린 이름은 지금도 `title` 이 전문을 나른다** — 🚫 상한을 두면서 걷지 마라.
 */
.flo-dash-table thead th:nth-child(2) { width: 85px; }
/* 🔻 2026-10-03 (#1557 A3) 113 → 130 · 한 줄로 둔다. 113 에서 「10-01 ~ 10-31」이 두 줄로 꺾였다(1280 실측) */
/* 🔻 2026-10-15 (#1784 검토) ~~130~~ → 148 · 기간에 연도가 붙었다(「2026.10.08 ~ 11.07」 약 124 + 안여백 24). 130 에서 1024 · 1199 에 5px 넘쳤다. 캠페인 목록 기간 열과 같은 값이다 */
.flo-dash-table thead th:nth-child(3) { width: 148px; }
/* 🔻 2026-10-12 (#1661) 1200 이상은 기간 뒤 참여 기한이 같은 줄에 든다(「10.08 ~ 11.07 · 참여 ~10.23」) · 열 130 → 210 */
/* 🔻 2026-10-15 (#1784 검토) ~~210~~ → 240 · 연도 + 세로선 사이(8 + 1 + 8)가 더해졌다. 캠페인 목록과 같은 값이다 */
@media (min-width: 1200px) { .flo-dash-table thead th:nth-child(3) { width: 240px; } }
.flo-dash-table tbody td:nth-child(3) { white-space: nowrap; }
.flo-dash-table thead th:nth-child(4) { width: 90px; }
.flo-dash-table thead th:nth-child(5) { width: 79px; }
.flo-dash-table thead th:nth-child(6) { width: 79px; }
.flo-dash-table thead th:nth-child(7) { width: 124px; }

/*
 | 🔑 **표 상한 = 고정 합계 570 + 이름 상한 403.** 남는 폭은 카드 오른쪽으로 흘린다.
 | 🚫 **이름 열에 `max-width` 를 주는 것으로 대신하지 마라** — `fixed` 에서 이름 열은
 |    「남는 것」을 받으므로 **상한을 표가 져야** 한다.
 */
/* 🔻 2026-10-03 (#1557) 973 → 990 · 기간 칸이 17px 늘었다 */
/*
 | 🔻 2026-10-06 (#1577) ~~`.flo-dash-table table.common-table { max-width: 990px; }`~~ 상한을 걷었다.
 |    넓은 창에서 표가 판 중간(1680 창 990px · 판 1320px)에서 끝나 오른쪽이 비어 보였다. 다른 목록 표처럼 판 폭을 다 쓴다.
 |    머리 · 값이 모두 가운데(#1572)라 이름 열이 넓어져도 이름이 칸 가운데에 선다. 잘린 이름은 그대로 `title` 이 나른다.
 */


/* ═══════════════════════════════════════════════════════════════════════
 | 전환용 배치 유틸 — 화면 43개가 아직 부르는 이름 (이슈 #668)
 |
 | 🔻 **이 블록은 임시다.** 「전환용 별칭」(토큰)과 같은 성격이다.
 |
 | 🚨 **왜 필요한가** — 화면 안쪽 마크업이 Tailwind 이름으로 배치를 적고 있는데
 |    **묶음이 비어 있어 아무 규칙도 없다**(#356). 그래서 지표 타일이 세로로 쌓이고,
 |    좌우로 놓여야 할 것이 위아래로 흐른다. **오류는 나지 않는다** — 배치만 사라진다.
 |
 | 🔑 **여기 있는 것은 실제로 쓰이는 것뿐**이다(실측 45종). 🚫 늘리지 마라 —
 |    줄여서 없애는 방향이다. 새 화면은 킷 클래스로 짠다.
 | 🚫 **Tailwind 를 되살리는 것이 아니다.** 이름만 같은 최소 규칙이고, 화면을 킷으로
 |    다시 입힐 때마다 부르는 곳이 줄어 결국 이 블록을 통째로 지운다.
 | 🚫 **새 화면에서 이 이름을 쓰지 마라.**
 ═══════════════════════════════════════════════════════════════════════ */
.flo-main .flex { display: flex; }
.flo-main .inline-flex { display: inline-flex; }
.flo-main .grid { display: grid; }
.flo-main .block { display: block; }
.flo-main .hidden { display: none; }
/*
 | 🚨 **바로 위 다섯 줄이 `hidden` 을 이긴다** (2026-09-09 · 이슈 #1440).
 |
 | 글쓴이 규칙은 언제나 브라우저 기본값(`[hidden] { display: none }`)을 이긴다.
 | 그래서 `hidden` 을 달고 그린 **줄이 처음부터 보였다.** 문의 창구 칸 넷이 전부
 | 펼쳐진 채로 뜨고, 단추는 「문의 창구 추가 (1/4)」 라고 적혀 **말과 화면이 어긋났다.**
 | 오류는 나지 않고 **브라우저로 눈으로 봐야 보인다.**
 |
 | 🔑 **저장소가 같은 함정을 세 번 겪었다** — `.form-group[hidden]` ·
 |    `.flo-chipbar[hidden]` · `.flo-btn[hidden]`, 그리고 이번이 네 번째다.
 |    🚫 `display` 를 주는 규칙을 새로 만들 때 이 짝을 잊지 마라.
 | 🔑 **여기서 갈래를 가리지 않고 한 번에 이긴다** — 배치 유틸을 단 요소가
 |    `hidden` 을 달면 감춘다. 다음에 접히는 줄이 생겨도 다시 겪지 않는다.
 | 🔑 **선택자를 두 겹으로 짚어 이긴다**(`.flo-main` + 클래스 + `[hidden]`) ·
 |    🚫 `!important` 로 덮지 마라.
 */
.flo-main .flex[hidden],
.flo-main .inline-flex[hidden],
.flo-main .grid[hidden],
.flo-main .block[hidden] { display: none; }
.flo-main .flex-col { flex-direction: column; }
.flo-main .flex-wrap { flex-wrap: wrap; }
.flo-main .flex-1 { flex: 1 1 0%; }
.flo-main .shrink-0 { flex-shrink: 0; }
.flo-main .min-w-0 { min-width: 0; }
.flo-main .w-full { width: 100%; }
.flo-main .items-center { align-items: center; }
.flo-main .items-start { align-items: flex-start; }
.flo-main .items-end { align-items: flex-end; }
.flo-main .items-baseline { align-items: baseline; }
.flo-main .justify-between { justify-content: space-between; }
.flo-main .justify-center { justify-content: center; }
.flo-main .justify-end { justify-content: flex-end; }
.flo-main .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.flo-main .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flo-main .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flo-main .col-span-2 { grid-column: span 2 / span 2; }
/*
 | 🆕 2026-10-03 (#1558 C4) 두 줄을 차지하는 카드. 연동 설정의 「시딩 준비 확인」(875)이 오른쪽의
 |    「시딩 상품 분류」(574)와 「몰 화면 스크립트」(276)를 함께 마주 보게 한다. 직전에는 마지막 카드 오른쪽이
 |    비고 「시딩 상품 분류」 아래 301px 가 비었다(1280 실측).
 | 🔑 125 「카드와 판」의 「나란히 놓인 카드는 높이가 같다」(`align-items: stretch`)는 그대로 둔다.
 |    🚫 그래서 `align-items: start` 로 풀지 않았다.
 | 🔑 한 열로 접히는 좁은 창(767 이하)에서는 한 줄짜리로 되돌린다.
 | 🔻 2026-10-06 (#1581) 걷었다. 「시딩 상품 분류」 안의 절이던 「쇼핑몰 주소」가 판 하나로 나와 오른쪽 판이 셋이 됐고,
 |    셋을 각자 한 줄로 두면 왼쪽이 더 길 때 남는 높이가 세 판에 나뉘어 판마다 아래가 비었다(1024 실측).
 |    오른쪽 셋은 세로 묶음(`flex flex-col gap-4`) 하나로 세우고 마지막 판만 늘린다(`flex-1`).
 |    두 열의 아래 끝은 여전히 맞는다. `row-span-2` 를 부르는 화면이 0곳이 되어 규칙을 지웠다.
 */
.flo-main .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flo-main .text-left { text-align: left; }
.flo-main .text-right { text-align: right; }
.flo-main .text-center { text-align: center; }
.flo-main .rounded { border-radius: var(--flo-radius); }
.flo-main .border { border: 1px solid var(--flo-line); }

/* 🔑 눈금은 4px 다 — 킷의 여백 눈금과 같다 */
.flo-main .gap-1 { gap: 4px; }
.flo-main .gap-2 { gap: 8px; }
.flo-main .gap-3 { gap: 12px; }
.flo-main .gap-4 { gap: 16px; }
.flo-main .gap-6 { gap: 24px; }
.flo-main .mt-1 { margin-top: 4px; }
.flo-main .mt-2 { margin-top: 8px; }
.flo-main .mt-3 { margin-top: 12px; }
.flo-main .mt-4 { margin-top: 16px; }
.flo-main .mt-6 { margin-top: 24px; }
/* 🔑 아래 여백을 지우는 자리 — .mb-1~.mb-6 만 있고 0 이 없어 화면이 조용히 그대로였다 (#958) */
.flo-main .mb-0 { margin-bottom: 0; }
.flo-main .mb-1 { margin-bottom: 4px; }
.flo-main .mb-2 { margin-bottom: 8px; }
.flo-main .mb-3 { margin-bottom: 12px; }
.flo-main .mb-4 { margin-bottom: 16px; }
.flo-main .mb-6 { margin-bottom: 24px; }
/* 🔑 판 · 서브카드 · 절의 마지막 덩어리는 아래 여백이 없다(#1585). 셈이 위 `mb-*` 와 같아(0,2,0) 바로 뒤에 둔다. 까닭은 `.flo-sec` 아래 주석 */
/*
 | 🔻 2026-10-19 (#1799) 대시보드 판(`.flo-sheet`)도 같다. ~~`:is(.cont-sec, .flo-subcard, .flo-sec)`~~ 에 빠져 있어
 |    「진행 단계」 판의 마지막 문단 아래 여백 8 이 안여백 20 에 더해져 판 아래가 28(위 20)이었다(1440 실측 · 390 은 24 · 위 16).
 */
:where(.flo-main) :is(.cont-sec, .flo-subcard, .flo-sec, .flo-sheet) > :last-child:not(:where(.flo-sr-only, [class^="-m"], [class*=" -m"])) { margin-bottom: 0; }
.flo-main .ml-2 { margin-left: 8px; }
.flo-main .ml-auto { margin-left: auto; }
.flo-main .mr-3 { margin-right: 12px; }
.flo-main .mr-4 { margin-right: 16px; }
.flo-main .p-3 { padding: 12px; }
.flo-main .p-4 { padding: 16px; }
.flo-main .px-2 { padding-left: 8px; padding-right: 8px; }
.flo-main .px-3 { padding-left: 12px; padding-right: 12px; }
.flo-main .px-4 { padding-left: 16px; padding-right: 16px; }
.flo-main .py-0 { padding-top: 0; padding-bottom: 0; }
.flo-main .py-1 { padding-top: 4px; padding-bottom: 4px; }
.flo-main .py-2 { padding-top: 8px; padding-bottom: 8px; }
.flo-main .py-3 { padding-top: 12px; padding-bottom: 12px; }
.flo-main .pt-3 { padding-top: 12px; }
.flo-main .pb-1 { padding-bottom: 4px; }
.flo-main .pb-2 { padding-bottom: 8px; }
.flo-main .pb-3 { padding-bottom: 12px; }
.flo-main .my-4 { margin-top: 16px; margin-bottom: 16px; }
.flo-main .ml-4 { margin-left: 16px; }
.flo-main .gap-x-6 { column-gap: 24px; }
.flo-main .gap-y-3 { row-gap: 12px; }

/*
 * 🚨 **테두리 방향 이름이 통째로 빠져 있었다** (2026-08-26 · #693).
 *    화면은 `border-b` 로 굵기를 정하고 인라인으로 색만 얹고 있었는데,
 *    **굵기가 없으면 브라우저는 색 선언을 무시한다** — 연동 설정의 구역 제목
 *    여덟 곳에 **가로선이 하나도 그려지지 않았다**(계산값 `0px / none` 으로 확인).
 * 🔑 색은 여기서 정한다 — 🚫 화면에서 인라인으로 얹지 마라 (R-307 · #680).
 */
.flo-main .border-b { border-bottom: 1px solid var(--flo-line); }
.flo-main .border-t { border-top: 1px solid var(--flo-line); }

/* 🔑 폭 고정 — 라벨과 값을 세로로 맞추는 자리에 쓴다 (4px 눈금) */
.flo-main .w-20 { width: 80px; }
.flo-main .w-24 { width: 96px; }
.flo-main .w-32 { width: 128px; }
.flo-main .w-40 { width: 160px; }
.flo-main .w-48 { width: 192px; }
.flo-main .w-64 { width: 256px; }
.flo-main .w-72 { width: 288px; }
.flo-main .w-80 { width: 320px; }

/* 🔑 세로 배분 — 남는 높이를 나눠 갖는 자리에 쓴다 */
.flo-main .h-full { height: 100%; }
.flo-main .min-h-0 { min-height: 0; }
.flo-main .shrink { flex-shrink: 1; }
.flo-main .overflow-y-auto { overflow-y: auto; }

.flo-main .inline { display: inline; }
.flo-main .whitespace-nowrap { white-space: nowrap; }

/* 🔑 화면 낭독기에만 들리는 글자 — 킷의 `.screen-ir` 과 같은 일을 한다 */
.sr-only {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 묶음 머리 여백 (#670) ─────────────────────────────────────────
 |
 | 🔑 참조는 「1. …」 「2. …」 사이를 넉넉히 띄운다. 붙어 있으면 묶음이 안 보인다.
 | 🚫 첫 묶음 위에는 여백을 주지 마라 — 화면 머리와 겹쳐 판이 아래로 밀린다.
 */
/*
 * 🚨 :first-of-type 은 여기서 안 먹는다 — 앞에 다른 div 가 있어 「첫 div」가 아니다.
 *    오류가 나지 않고 첫 묶음에도 선이 그어졌다(계산값으로 확인).
 * 🔑 형제 선택자로 「앞에 묶음 머리가 있는 것만」 고른다 — 첫째는 저절로 빠진다.
 */
.flo-main .cont-sec .flo-sec__head { margin-top: 4px; }
.flo-main .cont-sec .flo-sec__head ~ .flo-sec__head:not(:where(.cont-sec > .flo-sec > *)) { /* 🔻 2026-10-11 (#1641) 절 카드 안 머리는 선을 긋지 않는다 */
    margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--flo-line);
}
.flo-main .cont-sec > .flo-sec__head .flo-sec__title { font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
 | 판 · 조건 줄 · 결과 도구 줄 (이슈 #673)
 |
 | 🧑 2026-08-26 «인플루언서 검색 화면 CSS 를 고쳐라». 브라우저로 열어 보니
 |    조건 · 담기 · 표가 **판 한 장에 전부** 들어 있어 «어디를 고치면 무엇이 바뀌는지»
 |    가 눈으로 갈라지지 않았다.
 | 🔑 킷 `docs/02-인플루언서-검색.md` 의 얼개다 — 검색 판(`search-filter-sec`) 과
 |    결과 판(`search-result-sec`) 두 칸.
 | 🚫 참조를 픽셀로 좇지 마라 (R-307 ①) — 가져오는 것은 얼개다.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── 판 — 화면 안의 흰 칸 한 벌 ──────────────────────────────────────
 |
 | 🔻 **2026-09-29 (#1530 · 🧑 결정) 카드 사이·안여백을 킷 값에서 내렸다.**
 |    ~~바닥·반경·안여백은 킷의 `.cont-sec` 가 그대로 준다. 🚫 킷 값을 여기서
 |    덮어쓰지 마라.~~ 실측(`scratchpad/qa9/U.md`)이 판 사이 20px·안여백
 |    24/24/30/24 를 「강처럼 흐르는 여백」의 원인으로 짚었다. **카드 사이 16 ·
 |    안여백 20 사방**으로 정했다. 값은 `.claude/rules/04-design-ui.md` R-306
 |    「킷과 일부러 다른 값」에 있다. 여기서 정하는 것은 **판 머리**도 함께다.
 */
/*
 | 🚨 **셈이 킷보다 높아야 이긴다.** 킷은 `.cont-wrap .section .cont-sec`(클래스 3개)로
 |    적었다 · `.flo-main .cont-sec`(클래스 2개)는 늦게 실려도 진다. 같은 조상 사슬을
 |    그대로 적어 클래스 4개로 이긴다.
 |
 | 🔻 **2026-09-29 (#1530 독립 검토) `:not(.btn-cont-sec)` 을 더했다.**
 |
 | 🚨 **클래스 4개는 킷의 변형 규칙과도 셈이 같아진다.** 킷은 `.cont-wrap .section
 |    .cont-sec.btn-cont-sec { padding: 20px 0 0 }`(버튼 줄 · 배경 없음 · 좌우 안여백 0)
 |    도 클래스 4개다. 셈이 같으면 **나중에 실리는 이 파일이 이겨**, 위저드 걸음의
 |    맨 아래 버튼 줄까지 좌우 20px 안여백을 받아 **단추가 판 오른쪽 끝에서 20px
 |    안으로 밀려 보였다**(`campaign/wizard/basic.blade.php` 실측 · 단추 오른쪽 끝
 |    1216px vs 판 테두리 1236px). 🔑 **이 변형만 뺀다.** `.search-filter-wrap`
 |    변형(`common.css:1049`)은 안여백 값이 20px 로 이미 같아 함께 맞아도 바뀌는 것이
 |    없고, 판 사이 16px 은 그 변형에도 그대로 적용돼야 한다.
 */
/*
 | 🆕 **판 안여백을 이름 하나로 둔다** (2026-10-05 · 이슈 #1565 · 정본 125- 「정렬 기준선과 4px 격자」).
 | 🔑 `--flo-inset` 은 판의 내용선이다. 판 제목 · 검색 조건 이름 · 표의 첫 글자 · 버튼 줄이 모두 이 선에서 시작한다.
 |    ~~표는 이 값만큼 판 가장자리로 넓히고, 첫 열 · 마지막 열의 바깥 안여백으로 같은 값을 받는다(아래 「정렬 기준선 · 표」).~~
 |    🔻 2026-10-06 (#1577 · #1576 3차) 표는 내용선 안에 서고 바깥 열 안여백은 칸 사이와 같은 12 다. 검색 표 예외도 걷었다(125- 「내용선 하나」).
 | 🔑 반경도 카드 눈금(12) 하나로 묶는다. 킷의 판은 10 이었고 표 상자 · 카드는 12 였다.
 */
.flo-main .cont-wrap .section .cont-sec:not(.btn-cont-sec) { padding: var(--flo-card-inset); margin-top: 16px; } /* 🔻 2026-10-14 (#1737) ~~20~~ → 내용선 이름(20 · 860 이하 16) */
.flo-main .cont-wrap .section .cont-sec:not(.btn-cont-sec) { --flo-inset: var(--flo-card-inset); border-radius: var(--flo-radius-card); }
/*
 | 🆕 **860px 이하에서는 판 안여백 12 사방** (2026-10-03 · 이슈 #1559 · E5).
 |    390px 에서 판 20 + 서브카드 16 이 겹쳐 서브카드 안 글자 폭이 286px(창의 73%)였다.
 | 🔑 바깥 판만 줄인다 · 서브카드 16 은 그대로다(125 「여백 눈금」).
 */
/* 🔻 2026-10-14 (#1737) (결정 ①) ~~860 이하 판 안여백 12 · 내용선 12~~ → 16. 판 12 와 절 카드 16 이 휴대폰에서 시작선을 둘로 갈랐다. 값은 `--flo-card-inset` 이 갖는다 */
/*
 | 🆕 **판 한 겹** (2026-10-10 · 이슈 #1605 · 셸의 `stack` 켬).
 |
 | 🧑 2026-10-10: "이렇게 사용성 기반으로 웹의 보편적인 특성으로 다음 디자인 안정화 고고"
 | 🚨 흰 판 안에 테두리 판만 쌓은 화면(대시보드 · 인플루언서 상세 · 카페24 연동 설정 · 정산 명세 · 참여 정보 ·
 |    확인 표시 초기화)은 판 제목이 내용선 20 + 테두리 1 + 안여백 16 = 37 에서 시작했다. 검색 · 관심목록 · 목록 화면
 |    (`x-panel` 한 겹)은 20 이다. 화면을 오가면 제목이 17px 좌우로 뛰었다.
 | 🔑 판 안의 판(카드 안 카드)을 걷는 것이 웹의 보편 관례다. 바깥 흰 판을 투명하게 두고, 그 안의 가장 바깥 판이
 |    `x-panel` 과 같은 판(흰 바탕 · 테두리 없음 · 안여백 20, 860 이하 12)이 된다. 판 사이는 각 화면의 16 그대로다.
 | 🔑 ~~판 안의 판(예: 정산 명세 안의 작은 판)은 그대로 테두리 판이다~~ · 가장 바깥 판만 바꾼다.
 |    🔻 2026-10-11 (#1619) 판 안의 판은 테두리 없는 구분선 절이다(서브카드 절의 「흰 판 안의 작은 판」 규칙).
 | 🔑 빈 상태(`x-empty-state`)가 판 밖에 서는 경우도 흰 바탕을 준다 · 회색 바닥에 글이 뜨지 않게 한다.
 */
.flo-main .cont-wrap .section .cont-sec.flo-stack:not(.btn-cont-sec) { background: transparent; padding: 0; border-radius: 0; }
/* 🆕 2026-10-11 (#1641) 절이 직접 든 판도 바깥 흰 판을 투명하게 둔다. 절마다 흰 카드가 되는 규칙은 서브카드 절 아래에 있다 */
.flo-main .cont-wrap .section .cont-sec:not(.flo-stack, .btn-cont-sec):has(> .flo-sec) { background: transparent; padding: 0; border-radius: 0; }
.flo-main .flo-stack :is(.flo-subcard, .flo-sheet):not(:is(.flo-subcard, .flo-sheet, .flo-modal) *) {
    --flo-inset: var(--flo-card-inset); padding: var(--flo-inset); border: 0; /* 🔻 2026-10-14 (#1737) ~~20 · 860 이하 12~~ → 20 · 16 */
}
.flo-main .flo-stack .flo-empty:not(:is(.flo-subcard, .flo-sheet, .flo-modal) *) { background: var(--flo-card); border-radius: var(--flo-radius-card); }
/* 🔻 2026-10-14 (#1737) ~~860 이하 `--flo-inset: 12px`~~ → `--flo-card-inset`(16) */
/*
 | 🆕 **판 안에 들어간 판은 안여백이 없다** (2026-10-11 · 이슈 #1617).
 | 🚨 셸의 흰 판 안에 「검색 필터」 판(`x-panel`)을 둔 화면(제안 응답 관리 · 캠페인 성과 · 상품 구매 URL 발송)은
 |    판 제목과 조건 이름이 내용선보다 20px(860 이하 12px) 안에서 시작했다. 같은 판의 지표 칸 · 표는 내용선에서 시작한다.
 |    캠페인 성과는 판 위 여백 16 + 안여백 20 이 겹쳐 판 맨 위에 빈 띠가 생겼다.
 | 🔑 바깥 판과 바탕이 같아 안쪽 판의 테두리가 보이지 않는다. 안여백과 위 여백만 걷어 내용선에 맞춘다.
 |    판 사이 간격은 앞 칸의 아래 여백(`mb-4`)이 준다. 창(`flo-modal`) 안의 판은 위 규칙이 따로 다룬다.
 */
.flo-main .cont-wrap .section .cont-sec:not(.flo-stack) .cont-sec.flo-panel:not(.btn-cont-sec, .flo-modal *) { padding: 0; margin-top: 0; }
.flo-main .flo-panel__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    padding-bottom: 0; margin-bottom: 16px; /* 🔻 2026-10-11 (#1638 · 🧑 「B 규칙형 (권장)」) ~~padding-bottom: 12px; border-bottom: 1px solid var(--flo-line);~~ 선은 아래 「머리 선 규칙」이 조건부로 긋는다 */
    border-bottom: 0;
}
/*
 | 🆕 **2026-10-01 (#1547 · 🧑 「제목 + 구분선 (권장)」) 판 머리는 한 모양이다.**
 |
 | 🔻 2026-10-11 (#1638) ~~아래 「12 · 선 · 16」 은 늘 긋는 선이었다~~ 선은 아래 「머리 선 규칙」이 조건부로 긋는다. 이 주석은 그 이전 이력이다.
 | 🚨 손으로 짠 판 머리(`h2`·`h3` 의 `flo-t-section` · `x-subcard` 머리 · `x-section` 머리)는
 |    선 없이 제목 아래 4 · 8 · 12 · 14 로 갈려 있었다(1280 실측 26개 화면 · 정본 11 대 나머지 76).
 |    연동 설정과 템플릿 등록은 한 화면 안에서도 4 와 8 이 섞였다.
 | 🔑 ~~위 `flo-panel__head` 와 같은 **제목 아래 12 · 선 · 16** 을 준다(#1530 값).~~ 🔻 2026-10-11 (#1638) 선은 조건부(행동이 있고 아래가 상자가 아닐 때만).
 |    화면마다 붙은 `mb-1`·`mb-2`·`mb-3` 은 지우지 않고 여기서 이긴다
 |    (`.flo-main h2.flo-t-section` 은 클래스 2 + 태그 1 이라 유틸리티 `.flo-main .mb-3` 보다 높다).
 | 🔑 제목 줄에 행동이 함께 서는 머리는 **줄 전체**가 머리다. 그 줄은 `flo-panel__head` 를 쓰고,
 |    안의 제목은 선을 다시 긋지 않는다(아래 둘째 규칙).
 | 🚫 `p.flo-t-section`(위저드 작성 방식 고르기의 단추 글자)은 머리가 아니다. 태그로 가른다.
 */
.flo-main h2.flo-t-section,
.flo-main h3.flo-t-section,
.flo-main .flo-subcard__head,
.flo-main .flo-sec__head {
    padding-bottom: 0; margin-bottom: 16px; /* 🔻 2026-10-11 (#1638) ~~padding-bottom: 12px; border-bottom: 1px solid var(--flo-line);~~ */
    border-bottom: 0;
}
.flo-main .flo-panel__head .flo-t-section,
.flo-main .flo-panel__head .flo-sec__title {
    padding-bottom: 0; margin-bottom: 0; border-bottom: 0;
}
/*
 | 🔻 **2026-10-11 (#1638 · 🧑 「B 규칙형 (권장)」) 머리 선은 조건부다.** ~~머리마다 아래 12 · 선 · 16(#1547)~~
 |
 | 🚨 판 · 절 머리가 늘 선을 그어, 아래가 이미 테두리 상자(표 머리 띠 · 지표 카드 · 단계 타일 · 알림 · 카드 격자)이면 겹줄이 되고,
 |    한 줄짜리 내용 위에서는 선이 내용보다 무거웠다(1440 약 55개 중 35개가 어색, 제안 응답 상세 9판 중 6판이 한 줄).
 | 🔑 한 줄 규칙: **선은 머리에 행동(단추 · 선택 · 입력)이 있고 아래가 상자가 아닌 글 · 폼 · 도구 줄일 때만 긋는다.**
 |    그 밖의 머리는 선 없이 여백만이다. 아래가 상자이면 12, 글 · 폼이면 16. 겹줄은 구조상 생기지 않는다.
 | 🔑 「아래가 상자」는 머리 바로 뒤 형제로 가른다(`:has(+ …)`). 화면마다 표시 클래스를 달지 않는다.
 | 🔑 판 안 절 사이 위 선(#1619)은 덩어리 구분이라 그대로 둔다.
 */
.flo-main :is(.flo-panel__head, h2.flo-t-section, h3.flo-t-section, .flo-subcard__head, .flo-sec__head):has(+ :is(.table-wrap, .flo-table-wrap, .flo-table-block--stack, .flo-table-block:not(:has(> .flo-table-block__count)), form:has(> :first-child:is(.table-wrap, .flo-table-block)), .flo-kpis, .flo-steps, .flo-inline-alert, .flo-subcard-grid, .flo-group-grid, .flo-backlog, .flo-picked-grid, .flo-summary-list, .flo-filtergrid)) {
    margin-bottom: 16px; /* 🔻 2026-10-13 (#1663 · #1659 8차 승인안 「카드 머리와 본문 사이 16 통일」) ~~12~~ 아래가 상자여도 머리 아래는 16 하나다. 선 규칙(아래)은 그대로다 */
}
.flo-main :is(.flo-panel__head, h2.flo-t-section, h3.flo-t-section, .flo-subcard__head, .flo-sec__head):has(:is(button:not(.flo-hint__mark), select, input:not([type="hidden"]), .basic-btn, .btn):not([hidden], .flo-sr-only, details:not([open]) *)):not(:has(+ :is(.table-wrap, .flo-table-wrap, .flo-table-block--stack, .flo-table-block:not(:has(> .flo-table-block__count)), form:has(> :first-child:is(.table-wrap, .flo-table-block)), .flo-kpis, .flo-steps, .flo-inline-alert, .flo-subcard-grid, .flo-group-grid, .flo-backlog, .flo-picked-grid, .flo-summary-list, .flo-filtergrid))) {
    padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--flo-line);
}
.flo-main .flo-panel__lead { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
/* 🔻 2026-09-29 (#1530) 15/600 → 16/700 · 판·절·서브카드 제목을 한 눈금(T2)으로 묶는다 */
.flo-main .flo-panel__title { font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); margin: 0; }
/* 🔑 건수는 판 머리가 밝히는 이 화면의 «모수» 다 — 제목보다 크고 제품 색이다 */
/* 🔻 2026-09-29 (#1530) 18px → 16px · 판 제목과 같은 눈금으로 낮췄다 */
.flo-main .flo-panel__count {
    font-size: 16px; font-weight: 600; line-height: var(--flo-lh-card); color: var(--flo-primary); font-variant-numeric: tabular-nums;
}
.flo-main .flo-panel__note { font-size: 13px; color: var(--flo-ink-3); }
/* 🆕 2026-10-12 (#1660) 건수 곁 덧말 · 좁으면 줄을 바꾼다 */
.flo-main .flo-panel__lead { flex-wrap: wrap; }
.flo-main .flo-panel__note--lead { flex-basis: auto; }
/*
 | 🆕 2026-10-06 (#1577) 제목이 붙은 표 머리(`x-data-table title`)는 건수 줄을 제목 옆 캡션으로 낮춘다.
 |    「전체」가 제목과 같은 16/700 이라 「진행 중·종료 캠페인 전체」가 한 제목처럼 읽혔다(대시보드 1280 사진).
 | 🔑 제목과 건수 사이 8 · 건수 조각 사이 4(글자 사이 띄움 폭). 수만 13/600 제품 색으로 남긴다.
 */
.flo-main .flo-panel__lead--titled { gap: 4px; }
.flo-main .flo-panel__lead--titled > .flo-panel__title:first-child { margin-right: 4px; }
.flo-main .flo-panel__lead--titled > .flo-panel__title + .flo-panel__title { font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption, 18px); color: var(--flo-ink-3); }
.flo-main .flo-panel__lead--titled > .flo-panel__count { font-size: 13px; line-height: var(--flo-lh-caption, 18px); }

/*
 | 🆕 **창 안의 판은 껍데기를 벗는다** (2026-08-31 · 이슈 #1012).
 |
 | 🚨 **창이 이미 판이다.** 킷의 `.cont-sec` 가 주는 바닥·모서리·안여백을 그대로 두면
 |    **흰 상자 안에 흰 상자**가 생기고 여백이 두 겹이 된다.
 | 🔑 **머리(제목 · 큰 숫자 · 구분선)는 그대로 쓴다** — 그것이 이 판을 쓰는 까닭이다.
 | 🚫 화면 본문의 판에는 손대지 마라 — 이 규칙은 `.flo-modal` 안에서만 산다.
 */
.flo-main .flo-modal .flo-panel {
    background: none; border: 0; border-radius: 0; box-shadow: none;
    padding: 0; margin: 0;
}
/*
 | 🆕 2026-10-06 (#1586) 판 안여백 규칙(`.flo-main .cont-wrap .section .cont-sec:not(.btn-cont-sec)` · 0,5,0)이 위 규칙(0,3,0)을
 |    이겨, 관심목록 명단 창 안의 판이 안여백 20 · 위 16 을 그대로 받았다. 창 제목(24)과 판 제목(44)이 한 내용선에 서지 않았다.
 | 🔑 같은 사슬을 한 단 더 길게 적어 이긴다. 창 밖의 판에는 닿지 않는다.
 */
.flo-main .cont-wrap .section .flo-modal .cont-sec.flo-panel:not(.btn-cont-sec) { padding: 0; margin: 0; }
.flo-main .flo-panel__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* 🔻 2026-10-05 (#1565 · 4px 격자) 버튼 사이 ~~10~~ → 8 */
/*
 | 🚨 **선택 인원수는 판 머리에서 세로 줄로 갈라 둔다** — 건수(모수)와 붙여 놓으면
 |    두 숫자가 한 값으로 읽힌다. 킷의 `.result-count-wrap::before` 와 같은 자리다.
 */
.flo-main .flo-panel__selected {
    display: inline-flex; align-items: center; gap: 4px;
    padding-left: 12px; border-left: 1px solid var(--flo-line);
    font-size: 13px; color: var(--flo-ink-2); font-variant-numeric: tabular-nums;
}
.flo-main .flo-panel__selected [data-selection-count] { font-weight: 600; color: var(--flo-primary); }

/* ── 조건 줄 — 검색 판 안쪽 ──────────────────────────────────────────
 |
 | 🔻 **2026-08-27 (#899) `flo-filterset__row` 계열을 걷었다.** 조건을 세로로 쌓던
 |    규칙이라 🧑 지시(*"한 줄 + 펼침"*)와 정면으로 부딪혔고, **부르는 마크업이 없어졌다.**
 |    🔑 지금 자리는 아래 `.flo-filtergrid` 다 — 왼쪽이 조건 이름, 오른쪽이 고르는 값.
 |    🚫 되살리지 마라 — 되살리면 조건이 다시 여섯 줄이 된다.
 */

/* 조건에 걸려 빠진 인원 — 🔑 조건 줄 아래에 붙는다(#682). 🚫 0건이면 그리지 않는다 */
.flo-main .flo-filterset__note {
    margin: 8px 0 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); /* 🔻 2026-10-05 (#1567) ~~1.6~~ */
}

/* 눈금 단추 — 🔑 무엇을 바꾸는지 자리로 말한다. 🚫 구간을 화면에 적지 마라 */
.flo-main .flo-step-btn {
    height: var(--flo-control-h-sm); padding: 0 10px;
    border: 1px solid var(--flo-line); border-radius: 999px;
    background: var(--flo-card); color: var(--flo-ink-2);
    font-family: inherit; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer;
}
.flo-main .flo-step-btn:hover { border-color: var(--flo-primary); color: var(--flo-primary); }

/* 체크 상자 한 벌 — 🔑 글자까지가 누를 자리다. 🚫 상자만 누르게 두지 마라 */
.flo-main .flo-check {
    display: inline-flex; align-items: center; gap: 8px; /* 🔻 2026-10-05 (#1565) ~~6~~ */
    font-size: 13px; color: var(--flo-ink-2); white-space: nowrap; cursor: pointer;
}

/* ── 조건 판을 기준 화면에 맞춘다 (이슈 #894) ─────────────────────────
 |
 | 기준은 `FLO_260721` 의 인플루언서 검색이고, 그것을 받아 적은 것이 킷
 | `02-인플루언서-검색.md` 다. 🚫 **여기서 새 모양을 고안하지 마라**(R-307) —
 | 값은 전부 그 두 벌에서 왔다.
 */

/* 「찾으시는 인플루언서가 없나요?」 — 🔑 등록 단추 바로 왼쪽에 붙는 안내다 (킷 5-2 `.help-text`) */
.flo-main .flo-filterset__help { font-size: 13px; color: var(--flo-ink-3); white-space: nowrap; }

/* 플랫폼 토글 단추 한 벌 (킷 5-3)
 |
 | 🔑 **단추 모양은 `common.css` 가 이미 갖고 있다** — `.basic-radio-box.box-platform-select`
 |    가 흰 판·회색 테두리·선택 시 보라 테두리·로고 배경까지 그린다.
 |    🚫 여기서 그 값을 다시 적지 마라 — 두 벌이 되면 어느 날 갈라진다.
 | 🚨 `fieldset` 은 브라우저 기본 테두리와 안여백을 갖는다 — 지우지 않으면 조건 판
 |    안에 **네모가 하나 더 그려진다.**
 | 🔑 **좁아져도 플랫폼만 줄지 않는다** (킷 `search.css` `.radio-box-wrap{flex-shrink:0}`).
 */
/* ── 남는 자리를 채우되 줄어들 줄도 아는 칸 (2026-08-31 · R-308) ──────
 |
 | 🧑 *"화면 줄어들면 글씨 잘림. 모든 페이지를 반응형으로 제작할 것."*
 |
 | 🚨 **고정 폭 입력칸이 좁은 창에서 쪽 밖으로 나간다.** 연동설정의 문의 채널 값 칸이
 |    그 모양이었다(창 900px 에서 3px 넘침 · 실측).
 | 🔑 **`min-width: 0` 이 핵심이다** — flex 항목의 기본 최소 폭은 `auto`(내용 폭)라
 |    `flex: 1` 만으로는 그 아래로 줄어들지 않는다.
 | 🚫 고정 폭(`w-80` 같은 것)과 함께 쓰지 마라 — 둘이 부딪힌다.
 */
.flo-main .flo-fill { flex: 1 1 12rem; min-width: 0; }

/*
 | 🔻 **2026-08-31 (#1009) `flex-shrink: 0` 을 걷었다** (🧑 지시 · R-308).
 |
 | 🧑 *"화면 줄어들면 글씨 잘림. 모든 페이지를 반응형으로 제작할 것."*
 |
 | 🚨 **줄바꿈을 켜 두고도 줄이 안 바뀌었다.** `flex-wrap: wrap` 은 **안쪽** 규칙이고,
 |    `flex-shrink: 0` 은 **이 묶음 자체가 좁아지지 않게** 막는다. 그래서 브라우저가
 |    묶음에 **내용이 한 줄로 다 들어가는 폭**을 주고, 안쪽은 줄을 바꿀 이유가 없어진다.
 |    실측 — 1024px 창에서 **49px**, 900px 에서 **173px** 이 쪽 밖으로 나갔다.
 | 🚨 **쪽 몸통이 가로로 밀리면 곁 메뉴까지 밀린다.** 넘쳐도 되는 것은 표뿐이다.
 | 🔑 **`min-width: 0` 을 함께 준다** — flex 항목의 기본 최소 폭은 `auto`(내용 폭)라
 |    `flex-shrink` 만 풀어서는 그 아래로 줄어들지 않는다.
 | 🚫 `flex-shrink: 0` 을 되살리지 마라.
 */
.flo-main .flo-platform-pick {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0; padding: 0; border: 0; min-width: 0;
}
/*
 | 🔑 킷의 150px 은 조건이 넷일 때 값이다 — 우리 조건 줄은 더 좁아 그만큼 줄인다.
 | 🔻 **2026-08-31 좁은 창에서는 최소 폭을 푼다** (R-308) — 128px 를 못 박으면
 |    칸이 좁아질 때 **줄을 바꿔도 여전히 넘친다.**
 */
/*
 | 🔻 2026-09-29 (#1530 · 🧑 결정) 사각(128×44) → `.flo-pick` 과 같은 알약(30px).
 |    로고 16px 는 유지한다. `span` 의 `padding-left: 2em` 이 글자 크기를 따라가므로
 |    글자를 13px 로 낮춰도 로고 자리가 비례해 줄어들 뿐 사라지지 않는다.
 */
.flo-main .flo-platform-pick .basic-radio-box.box-platform-select input[type="radio"] + label {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 0; height: var(--flo-control-h-sm); padding: 0 14px; border-radius: 999px;
}
.flo-main .flo-platform-pick .basic-radio-box.box-platform-select input[type="radio"] + label span {
    font-size: 13px; font-weight: 500; line-height: 1;
}
/* 선택된 알약. 다른 선택 칩과 같은 연보라 바탕 */
.flo-main .flo-platform-pick .basic-radio-box.box-platform-select input[type="radio"]:checked + label {
    background: var(--flo-primary-soft);
}
/*
 | 🆕 2026-10-03 (#1558 D2) 고른 플랫폼 글자를 다른 고른 칩(`.flo-pick`)과 같이 보라 600 으로 맞춘다.
 |    킷 글자색이 보라를 주지만 굵기가 500 이라 바로 아래 카테고리 · 정렬의 고른 칩보다 흐리게 읽혔다.
 */
.flo-main .flo-platform-pick .basic-radio-box.box-platform-select input[type="radio"]:checked + label span {
    color: var(--flo-primary); font-weight: 600;
}
/* 로고가 없는 열쇠말 — 🚫 빈 그림 자리(`padding-left: 2em`)를 남기지 마라 */
.flo-main .flo-platform-pick input.flo-no-logo + label span { padding-left: 0; }
/*
 | 🔻 2026-09-28 (#1493) 선택 전 글자를 킷의 #8a8a9a 에서 --flo-ink-2 로 올렸다. 흰 바탕 3.40:1 이었다.
 |    다른 선택지(`.flo-pick`)가 선택 전에 쓰는 색과 같다. 선택된 글자(보라)는 킷 그대로다.
 */
.flo-main .flo-platform-pick input[type="radio"]:not(:checked) + label span { color: var(--flo-ink-2); }
/*
 | 🆕 **플랫폼 칩도 키보드로 고른다** (2026-10-16 · 이슈 #1769 · R-314).
 |
 | 🚨 킷 `common.css` 의 `.basic-radio-box input[type="radio"] { display: none }` 이 라디오를 문서에서 지워,
 |    Tab 이 「전체 · 인스타그램 · 틱톡」을 건너뛰었다. 낭독기에서도 선택지가 빠졌다.
 | 🔑 아래 카테고리 · 정렬 칩(`.flo-pick`)과 같은 꼴이다 · 라디오는 화면에서만 감추고(1px · 잘라 냄) 초점 고리는 칩(`label`)이 그린다.
 | 🔑 `.flo-platform-pick` 으로 좁힌다 · 킷 스크립트(`admin.js`)가 그리는 다른 `.basic-radio-box` 에는 번지지 않는다.
 | 🚫 `common.css` 를 고치지 마라 · 킷 원본이다 (R-306).
 */
.flo-main .flo-platform-pick .basic-radio-box input[type="radio"] {
    display: inline-block;
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flo-main .flo-platform-pick input[type="radio"]:focus-visible + label { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/* ── 조건 줄 · 펼침 · 걸린 조건 (이슈 #899) ───────────────────────────
 |
 | 🧑 **2026-08-27 사용자 지시** — *"직접 검색 칸이 너무 길게 되어 있음 · 최소 최대값
 |    버튼이 아래로 내려와있어서 지저분함 · 명이라는 단위값 생성 · select box 로 하지
 |    말고 선택하면 하단에 보일 수 있게"*.
 |
 | 🚨 **직전까지 조건이 여섯 줄로 쌓여 결과가 화면 밖으로 밀렸다.**
 | 🔑 **한 줄로 모으고**, 조건 이름을 누르면 **그 조건의 칸만 아래에 펼쳐진다.**
 */
/*
 | 🧑 **2026-08-27 지시** — *"각 카테고리를 좌측으로 분류하고 거기서 선택할 수 있게.
 |    (카테고리 플랫폼 | 선택값 인스타/틱톡) 팔로워 수 오른쪽에 선택값"*.
 |
 | 🔻 ~~조건 이름 단추를 눌러 아래를 펼친다~~ 는 폐기됐다. **왼쪽이 이름, 오른쪽이 값**이다.
 | 🔑 **줄 하나가 조건 하나**다. 이름 칸을 고정 폭으로 두어 **값의 시작점이 줄마다 같다** —
 |    어긋나면 훑을 수 없다.
 */
/* 🔻 2026-09-29 (#1530 · 🧑 결정) 이름 칸 76→72 · 칸 사이 16→12 · 줄 간격 10→8 */
/*
 | 🔻 2026-10-04 (#1561 · 🧑 *"각 필터 상하가 너무 촘촘하지않은지"*) 줄 간격 8 → 12.
 |    값 칸 안에서 접힌 줄 사이는 8 그대로라, 「다음 조건」(12)과 「같은 조건의 둘째 줄」(8)이 눈으로 갈린다.
 */
.flo-main .flo-filtergrid {
    display: grid; grid-template-columns: 72px minmax(0, 1fr);
    align-items: start; gap: 12px 12px;
}
.flo-main .flo-filtergrid__row { display: contents; }
/*
 | 🔻 2026-10-04 (#1561) ~~`padding-top: 8px`~~ 은 38 칸에 맞춘 값이었다. 판 안 칸이 모두 30 이 되어
 |    이름을 칸 높이(30) 상자 한가운데에 세운다. 값이 두 줄로 접혀도 이름은 첫 줄과 같은 높이다.
 */
.flo-main .flo-filtergrid__label {
    display: flex; align-items: center; min-height: var(--flo-control-h-sm);
    font-size: 13px; font-weight: 600; color: var(--flo-ink-2);
    white-space: nowrap;
}
.flo-main .flo-filtergrid__values {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0;
}
/* 값 칸 안의 작은 이름표 — 「최소」·「최대」처럼 값에 딸린 것 */
/* 🔻 2026-10-06 (#1576) 쓰는 자리가 없어졌다. 「최소」 · 「최대」는 칸 안 이름표(`.flo-unitbox__prefix`)가 됐다.
   ~~`.flo-main .flo-filtergrid__sub { font-size: 13px; color: var(--flo-ink-3); }`~~ */
.flo-main .flo-filtergrid__tilde { color: var(--flo-ink-3); }
/*
 | 🔻 2026-10-06 (🧑 결정 · #1572) 눈금 단추가 「팔로워 수」 칩 줄로 따로 서서 가르는 틈이 필요 없어졌다. 아래 줄을 걷었다.
 |    ~~`.flo-main .flo-filtergrid__gap { width: 12px; }`~~ (🔑 눈금 단추를 범위 입력과 눈으로 갈라 준다 — 🚫 줄을 나누지 마라)
 */
/*
 | 🆕 **「최소 + 칸」·「최대 + 칸」은 한 덩이로 접힌다** (2026-10-03 · 이슈 #1559 · E4).
 |    390px 에서 이름표와 칸이 따로 접혀 「최대」가 윗줄 끝, 칸이 아랫줄 처음에 섰다.
 */
.flo-main .flo-filtergrid__pair { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/*
 | 🆕 **860px 이하에서는 조건 이름을 값 위에 둔다** (2026-10-03 · 이슈 #1559 · E3).
 | 🔑 넓은 폭의 72 · 12 · 8 격자(#1530 · #1547)는 그대로다. 좁은 폭만 한 칸으로 바꾼다.
 | 🔑 이름 위 8 은 묶음 사이 간격이고, 이름과 값 사이는 4 다 · 어느 이름이 어느 값인지 붙어 보인다.
 */
@media (max-width: 860px) {
    .flo-main .flo-filtergrid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
    /* 🆕 2026-10-04 (#1561) 이름이 값 위에 서므로 칸 높이 상자를 풀고 묶음 사이 8 을 그대로 둔다 */
    .flo-main .flo-filtergrid__label { display: block; min-height: 0; padding-top: 8px; }
}

/*
 | 🆕 **「필터 더 보기」 뒤의 조건** (2026-10-06 · 이슈 #1568 · 정본 125- 「검색 필터 판」).
 | 🔑 펼쳤을 때는 감싼 칸이 없는 것과 같다(`display: contents`) · 줄은 같은 72 · 12 격자에 선다.
 | 🔑 접는 규칙은 `html.flo-js` 아래에만 둔다 · 스크립트가 없으면 전부 보이고 여닫는 단추는 숨는다.
 | 🔻 2026-10-06 (🧑 결정 · #1582) 접는 칸과 여닫는 단추를 걷어 아래 네 줄도 걷었다. 대상 · 정렬은 늘 보인다.
 |    ~~`.flo-filtergrid__more { display: contents }` · `html.flo-js … :not(.is-open) { display: none }` · `.flo-filter-more` 두 줄~~
 */

/*
 | 🆕 **검색 필터 판 안의 칸은 한 높이(30)다** (2026-10-04 · 이슈 #1561 · 정본 125- 「검색 필터 판의 칸 높이」).
 |
 | 🧑 *"최소와 최대 값 입력 창이 다른 버튼들에 비해 크지않나?"*
 | 🚨 같은 줄에 입력 칸 38 과 눈금 단추 30 이 섰다(팔로워 수). 판 전체로는 칩 · 플랫폼 · 눈금 · 상태 칩이
 |    30, 입력 · 선택 상자 · 검색 단추가 38 이라 줄마다 높이가 달랐다.
 | 🔑 판 안 조작 대부분(칩)이 이미 30(`--flo-control-h-sm`, #1558 고른 모양 높이)이라 그 눈금에 맞춘다.
 |    32(작은 단추)로 맞추면 칩과 2 어긋난 줄이 그대로 남는다.
 | 🚫 판 밖의 입력 칸(폼)은 38 그대로다. 이 규칙은 `.flo-filtergrid__values` 안만 겨냥한다.
 | 🔻 2026-10-05 (#1567) 토큰 값이 30 → 32, 판 밖 38 → 40 이 됐다. 칩 · 눈금 단추 · 상태 칩도 같은 토큰이라 판 안은 여전히 한 높이(32)다.
 */
.flo-main .flo-filtergrid__values :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select) {
    min-height: var(--flo-control-h-sm); height: var(--flo-control-h-sm);
    padding-top: 4px; padding-bottom: 4px;
}
.flo-main .flo-filtergrid .flo-search-submit {
    height: var(--flo-control-h-sm);
    line-height: calc(var(--flo-control-h-sm) - 2px);
    padding-left: var(--flo-btn-pad-x-sm); padding-right: var(--flo-btn-pad-x-sm); /* 🆕 2026-10-14 (#1737 검토) 32 단추라 좌우 12 */
}
/*
 | 🆕 **표 안의 조작은 조밀한 높이(32)다** (2026-10-05 · 🧑 채택 · 이슈 #1567 · 정본 125- 「칸 높이 40 · 32」).
 |
 | 🚨 표 안 입력 칸(담은 상품 「제공수량」)과 기본 크기 단추(정산 목록 「초안 열기」)가 폼과 같은 높이라
 |    그 행만 다른 행보다 높았다. 표 안의 작은 단추(「열기」 · 「수정」)는 이미 32 다.
 | 🔑 필터 판과 같은 안여백(위아래 4)으로 글자 줄(20)이 칸 안에 든다.
 */
/* 🔻 2026-10-06 (#1585) 아래 단추 줄과 같이 표 칸 안에 둔 창의 칸은 뺀다(`:not(:where(.flo-modal *))` · 셈은 그대로). 창 안 칸은 폼 높이 40 이다 */
.flo-main .common-table td :is(input:not([type="hidden"], [type="radio"], [type="checkbox"]), select):not(:where(.flo-modal *)) {
    min-height: var(--flo-control-h-sm); height: var(--flo-control-h-sm);
    padding-top: 4px; padding-bottom: 4px;
}
/* 🔻 2026-10-06 (#1585) `:not(:where(.flo-modal *))` · 표 칸 안에 둔 창의 단추(취소 · 삭제)까지 32 가 되어 다른 창의 40 과 달랐다. `:where` 라 셈은 그대로다 */
.flo-main .common-table td .basic-btn.square.small:not(:where(.flo-modal *)) { line-height: calc(var(--flo-control-h-sm) - 2px); padding-left: var(--flo-btn-pad-x-sm); padding-right: var(--flo-btn-pad-x-sm); } /* 🆕 2026-10-14 (#1737) 32 단추라 좌우 12 */
/*
 | 🆕 관리 칸의 단추는 작은 단추 모양이다 (2026-10-06 · #1585).
 | 🚨 높이는 위 줄이 32 로 맞췄지만 좌우 안여백 30 · 최소 폭 108(킷 `.small`)은 남아, 관리 칸(136)에서 「콘텐츠 점검함」이
 |    「콘텐츠 / 점검함」 두 줄(높이 62)로 접혔다. 같은 칸의 「열기」 · 「수정」(작은 단추, 좌우 10 · 최소 74)과 폭도 갈렸다.
 | 🔑 값은 킷 `.square.mini` 그대로다. 칸 안의 창 단추는 위 줄과 같이 뺀다.
 | 🔻 2026-10-06 (#1585 검토) 대상을 기본 크기 단추(`.small`)로 좁혔다. 작은 단추(`.mini`)는 이미 이 값이고, 큰 단추(`.large` · `.medium`)는
 |    관리 칸에 두는 일이 없다. 넓게 걸면 앞으로 그런 단추가 칸에 들어올 때 조용히 줄어든다.
 */
.flo-main .common-table td.flo-col--action .basic-btn.square.small:not(:where(.flo-modal *)) { min-width: 88px; padding-left: var(--flo-btn-pad-x-sm); padding-right: var(--flo-btn-pad-x-sm); } /* 🔻 2026-10-14 (#1737) ~~최소 74 · 좌우 10~~ → 최소 88 · 좌우 12(32 단추). 「열기」 · 「수정」 · 「콘텐츠 점검함」 폭이 행마다 74 · 84 로 갈렸다 */
/* 🆕 2026-10-14 (#1738 · 묶음 D) 표 안 32 단추(관리 칸 밖 · 작은 단추 `mini`)도 최소 폭 88 하나다 */
.flo-main .common-table td .basic-btn.mini:not(:where(.flo-modal *)) { min-width: 88px; }
/*
 | 🆕 2026-10-09 (#1603) 정산 목록 「관리」 열은 단추 글자가 행마다 다르다(「명세 보기」 · 「금액 입력·확정」 · 「다음 차수 열기」).
 |    폭이 74 · 99 로 갈려 열이 들쭉날쭉했다. 가장 긴 글자에 맞춘 공통 최소 폭을 준다(관리 열 136 안).
 | 🔻 2026-11-05 (소규모 이슈) 「금액 입력·확정」을 「금액 입력」으로 줄여 「초안 열기 · 금액 입력 · 명세 보기」가 모두 100 안에 든다.
 |    「다음 차수 열기」(재계산이 필요한 확정본에만 선다)만 글자가 길어 조금 넓다.
 */
.flo-main .flo-settle-list .common-table td.flo-col--action .basic-btn.square:not(:where(.flo-modal *)) { min-width: 100px; }
/* 🆕 2026-11-05 (#1988 · 화면 가시성 시안) 지급 예정액을 굵게 · 표에서 가장 먼저 찾는 값이다 */
.flo-main .flo-settle-list .flo-settle-amount { font-weight: 700; }

/*
 | 검색어 — 🔻 판 전체 폭을 쓰던 것을 줄였다(🧑 #899).
 | 🔑 **남는 자리를 먹되 한계를 둔다** — 혼자 길어지면 다시 「너무 길다」가 된다.
 */
.flo-main .flo-filtergrid__keyword { flex: 1 1 240px; min-width: 200px; max-width: 420px; }

/*
 | 🆕 **검색 필터 판의 선택 상자 폭은 한 규칙이다** (2026-10-06 · 이슈 #1594 · 정본 125- 「검색 필터 판의 선택 상자 폭」).
 |
 | 🚨 폭이 글자 길이를 따라가 같은 판 안에서 155 · 140 · 236(발송 이력), 화면 사이로는 140(캠페인 목록) · 236(정산)이었다.
 | 🔑 보통은 240(`--flo-control-w-mid`) 하나다. 캠페인 이름처럼 긴 값만 넓은 칸(`flo-filtergrid__select--wide`, 420)이다.
 | 🔑 좁은 창에서는 `max-width: 100%` 로 값 칸 안에 든다(R-308). 닫힌 상자에서 긴 이름이 잘려도 펼친 목록은 전문이다.
 | 🚫 화면에서 선택 상자에 폭 클래스를 따로 달지 마라. 지키는 시험은 `FilterSelectWidthGuardTest` 다.
 */
.flo-main .flo-filtergrid__values select { width: var(--flo-control-w-mid); max-width: 100%; }
.flo-main .flo-filtergrid__values select.flo-filtergrid__select--wide { width: var(--flo-control-w-long); }
/*
 | 🆕 #1594 후속 · 이름이 값 위로 쌓이는 폭(860 이하 · #1559)에서는 선택 상자도 줄을 채운다. 검색어 칸 · 넓은 칸과 같이
 |    상한은 420 이다. 390 에서 보통 칸(240)만 짧게 멈춰 칸들의 오른쪽 끝이 들쭉날쭉했다.
 */
@media (max-width: 860px) {
    .flo-main .flo-filtergrid__values select,
    .flo-main .flo-filtergrid__values select.flo-filtergrid__select--wide { width: 100%; max-width: var(--flo-control-w-long); }
}
/*
 | 🆕 2026-10-09 (#1603) 같은 폭에서 「기간」 두 날짜 칸도 줄을 나눠 채운다. 390 에서 140 두 칸만 짧게 멈춰
 |    아래 계정명 칸과 오른쪽 끝이 어긋났다. 상한은 다른 칸과 같은 420 이다(물결표 포함 한 줄).
 | ⚠️ 지금은 발송 이력만 이 클래스를 단다. 캠페인 목록 · 성과의 「기간」은 아직 140 이다.
 */
@media (max-width: 860px) {
    .flo-main .flo-filtergrid__period { flex-wrap: nowrap; max-width: var(--flo-control-w-long); }
    .flo-main .flo-filtergrid__period .flo-datepicker { flex: 1 1 0; min-width: 0; width: auto; }
}

/*
 | 🆕 **검색 칸이 달린 선택 상자** (2026-10-19 · 이슈 #1834 · 🧑 「선택 상자 안 검색 칸 (권장)」).
 |
 | 🔑 `flo-select-search.js` 가 선택 상자를 `.flo-selsearch` 로 감싸고 그 아래에 판(검색 칸 + 목록)을 연다.
 |    닫힌 상자는 선택 상자 그대로라 폭 · 높이 · 화살표는 위 규칙이 정한다(#1594 넓은 칸 420).
 | 🔑 판의 테두리 · 그림자 · 반경 · 띄움은 같은 필터 판의 달력과 같은 값이다(`flo-datepicker.css` · 선 1px + 아래로 번지는 그림자 · 12 · 6).
 | 🔑 검색 칸 높이는 필터 판 안 칸 규칙(32)을 그대로 받는다.
 | 🔑 고른 항목은 고른 모양 바탕(`--flo-select-fill`)이고, 글쇠로 옮겨 다니는 자리는 옅은 회색이다.
 */
.flo-main .flo-selsearch { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
.flo-main .flo-selsearch__panel {
    position: absolute; top: 100%; left: 0; z-index: 30;
    width: 100%; margin-top: 6px; padding: 8px;
    border-radius: var(--flo-radius-card); background: var(--flo-card);
    box-shadow: 0 0 0 1px var(--flo-line), 0 8px 24px rgba(25, 31, 40, .12);
    box-sizing: border-box;
}
.flo-main .flo-selsearch__panel[hidden] { display: none; }
.flo-main .flo-selsearch__panel .flo-selsearch__input { width: 100%; }
.flo-main .flo-selsearch__list { max-height: 280px; overflow-y: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.flo-main .flo-selsearch__option {
    padding: 6px 12px; border-radius: var(--flo-radius); cursor: pointer;
    font-size: 14px; line-height: var(--flo-lh-ui); color: var(--flo-ink-1);
    word-break: keep-all; overflow-wrap: anywhere;
}
.flo-main .flo-selsearch__option:hover,
.flo-main .flo-selsearch__option.is-active { background: var(--flo-line-soft); }
.flo-main .flo-selsearch__option[aria-selected="true"] { background: var(--flo-select-fill); color: var(--flo-primary-deep); font-weight: 600; }
.flo-main .flo-selsearch__empty { margin: 8px 0 0; padding: 6px 12px; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
/* 🔑 이름이 값 위로 쌓이는 폭(860 이하)에서는 위 선택 상자 규칙처럼 줄을 채운다 · 상한 420 */
@media (max-width: 860px) {
    .flo-main .flo-filtergrid__values .flo-selsearch { width: 100%; max-width: var(--flo-control-w-long); }
}

/*
 | 🆕 2026-10-09 (#1603) 발송 이력 표 · 감싸개가 744 보다 좁은 1024~1103 구간(R-308 「넘치지 않는 폭」).
 |    열 다섯의 한 줄 폭 합(약 690)이 1024 의 감싸개(664)를 넘어, 이 구간만 표를 감싸개에 맞춘다.
 | 🔑 고정 열을 내용 폭으로 줄이고(시각 144 · 용도 112 · 상태 96), 계정은 한 줄(#1587 B)이라 계정 열 폭을 준다.
 |    「상품 구매 URL 메일」은 이 구간에서 두 줄이다. 받는 주소 열(약 144)이 남는 폭을 받아
 |    가린 주소와 「전체 보기 (열람 기록 남음)」이 두 줄로 접힌다(#1585 의 한 줄은 이 구간만 양보).
 */
@media (min-width: 1024px) and (max-width: 1103.98px) {
    .flo-main .flo-mail-history-table .flo-table { min-width: 0; }
    .flo-main .flo-mail-history-table th.flo-col--datetime { width: 144px; }
    .flo-main .flo-mail-history-table th.flo-th--purpose { width: 112px; }
    .flo-main .flo-mail-history-table th.flo-col--status { width: 96px; }
    .flo-main .flo-mail-history-table th.flo-col--name { width: 168px; }
}

/* 검색하기 — 🚫 폭을 100% 로 늘리지 마라 */
.flo-main .flo-search-submit { min-width: 120px; }
/*
 | 🆕 입력칸과 한 줄에 서는 단추의 높이를 맞춘다 (2026-09-29 · 이슈 #1527 · H15).
 |
 | 🚨 **킷의 두 선언은 같은 38px 이라도 렌더링은 다르다.** 킷 04 §1.12 는 입력·단추를
 |    모두 38 로 적지만, 입력은 `height:38px`(테두리 포함 · box-sizing 은 전역 border-box)
 |    인 반면 단추(`.basic-btn.square`)는 `line-height:38px` 뿐이라 테두리 2px 가
 |    그 위에 더해져 **실제로는 40px 로 그려진다.** 옆에 서면 2px 어긋난다.
 | 🔑 **전역 토큰(`--flo-control-h`)은 건드리지 않는다.** 다른 자리(질문 입력칸 ·
 |    분류 선택칸 등)가 이미 그 값을 쓴다. 이 줄에 서는 단추만 높이를 맞춘다.
 | 🔑 `line-height` 는 테두리 2px(위아래 1px씩)를 뺀 값으로 준다. 그래야 글자 줄이
 |    테두리 안쪽에 꼭 맞고, 넘치거나 눌리지 않는다.
 */
.flo-main .flo-search-submit {
    height: var(--flo-control-h);
    line-height: calc(var(--flo-control-h) - 2px);
}

/*
 | 숫자 칸 + 단위 — 🧑 *"명이라는 단위값 생성"*.
 | 🔑 **칸 안쪽 오른쪽에 붙인다** — 밖에 두면 「~」와 섞여 어느 칸의 단위인지 흐려진다.
 */
.flo-main .flo-unitbox { position: relative; display: inline-flex; align-items: center; }
/* 🔻 2026-10-03 (#1555) 132px → 짧은 칸(140). 숫자 칸은 날짜 칸과 같은 단계다 */
/* 🔻 2026-10-04 (#1561) 짧은 칸(140) → 숫자 범위 칸(120). 아홉 자리 수와 단위가 들고, 옆 칩 줄과 덩치가 맞는다 */
.flo-main .flo-unitbox > input { width: var(--flo-control-w-num); padding-right: 30px; text-align: right; }
/*
 | 🆕 **이름표가 칸 안 왼쪽에 서는 숫자 칸** (2026-10-06 · 이슈 #1576 · 정본 125- 「팔로워 범위 칸」).
 |    🧑 *"팔로워 범위만 앞에 최소랑 최대가 붙어서 간격이 위화감이 있어 그리고 팔로워 수의 패딩이 적어서
 |    너무 박스안에 숫자가 갇혀있는 느낌이야"*
 | 🔑 왼쪽 12 · 이름표(13 · ink-3) · 12 · 숫자(오른쪽 맞춤) · 단위 · 오른쪽 12. 칸 폭 160 에 아홉 자리 수가 든다.
 | 🔑 이름표는 `<label for>` 라 눌러도 칸에 초점이 간다. 잠긴 칸(「제한 없음」)은 이름표도 함께 흐려진다.
 */
.flo-main .flo-unitbox.flo-unitbox--prefixed > input { padding-left: 48px; padding-right: 32px; }
.flo-main .flo-unitbox__prefix {
    position: absolute; left: 12px;
    font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); cursor: text;
}
.flo-main .flo-unitbox--prefixed .flo-unitbox__unit { right: 12px; }
.flo-main .flo-unitbox--prefixed:has(> input:disabled) :is(.flo-unitbox__prefix, .flo-unitbox__unit) { color: var(--flo-line-strong); }
.flo-main .flo-unitbox__unit {
    position: absolute; right: 10px;
    font-size: 13px; color: var(--flo-ink-3); pointer-events: none;
}

/*
 | 고르는 칩 한 벌 (카테고리 · 정렬) — 🧑 지시가 드롭다운을 배제했다.
 | 🔑 **라디오 상자는 감추고 글자를 누르게 한다** — 🚫 `display:none` 이 아니라
 |    화면 밖으로 민다(낭독기와 키보드 초점이 살아 있어야 한다).
 */
.flo-main .flo-pickset {
    display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0;
}
.flo-main .flo-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-main .flo-pick > input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* 🔻 2026-09-29 (#1530 · 🧑 결정) 고르는 칩 눈금. 알약 30(이미 같음) · 13/500 · 선택 시 연보라 바탕 */
.flo-main .flo-pick > span {
    display: inline-block; height: var(--flo-control-h-sm); line-height: calc(var(--flo-control-h-sm) - 2px);
    padding: 0 12px;
    border: 1px solid var(--flo-line); border-radius: 999px;
    background: var(--flo-card); color: var(--flo-ink-2); font-size: 13px; font-weight: 500;
}
.flo-main .flo-pick:hover > span { border-color: var(--flo-primary); color: var(--flo-primary); }
.flo-main .flo-pick > input:checked + span {
    border-color: var(--flo-primary); color: var(--flo-primary); font-weight: 600;
    background: var(--flo-primary-soft);
}
/* 🔑 키보드로 옮겨 다닐 때도 어디 있는지 보여야 한다 */
.flo-main .flo-pick > input:focus-visible + span { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
/*
 | 아직 쓸 수 없는 축 — 🚫 감추지 마라. 있다는 것과 **언제 쓸 수 있는지**를 알린다.
 */
/* 🔻 2026-09-28 (#1492) 글자를 --flo-ink-3 에서 --flo-ink-2 로 올렸다. 연회색 바닥에서 4.19:1 이었다. 잠김은 바닥색과 커서로 구분한다 */
/* 🔑 테두리를 고정한다. 바로 위 hover 규칙의 보라 테두리가 잠긴 선택지에도 떠서 누를 수 있어 보였다 (#1492 검토) */
.flo-main .flo-pick.is-locked > span { color: var(--flo-ink-2); background: var(--flo-line-soft); border-color: var(--flo-line); cursor: default; }

/*
 | 잠긴 축이 왜 잠겼는지 — 🔑 **한 줄로 모은다**(#635). 잠긴 축마다 붙이면 같은 문장이
 |    세 번 나온다. 🚫 `title` 로만 달지 마라 — 마우스를 올려야 보이는 것은 「알린다」가 아니다.
 | 🔑 값 칸 전체 폭을 써서 아래로 내려간다 — 🚫 칩 옆에 끼우지 마라(줄이 기운다).
 */
.flo-main .flo-filtergrid__note { flex: 1 1 100%; margin: 2px 0 0; color: var(--flo-ink-3); }
/* 🆕 2026-10-01 (#1547) 격자 안의 입력 오류(캠페인 성과 조회 구간) · 위 회색이 오류 빨강을 이기지 않게 한다 */
.flo-main .flo-filtergrid__note.flo-field__error { color: var(--sig-fail-ink); }

/*
 | 걸린 조건 줄 — 🚨 조건이 접혀 있으면 무엇을 걸었는지 알 수 없다. 칩이 그 자리를 대신한다.
 */
.flo-main .flo-chipbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--flo-line);
}
/*
 | 🚨 **`display: flex` 가 `hidden` 을 이긴다.** `hidden` 은 브라우저 기본 스타일의
 |    `display: none` 인데, 우리가 적은 `display: flex` 가 더 세다 —
 |    **감췄다고 적어도 그대로 보인다.** 실측에서 빈 「걸린 조건」 줄이 떠 있었다.
 | 🚫 `!important` 로 덮지 마라 — 같은 자리를 짚어 이기면 된다.
 */
.flo-main .flo-chipbar[hidden] { display: none; }
/* 🔻 2026-10-12 (#1646 · 🧑 「필터 조건 보이는 쪽이 좀 별로다」) 이름표는 글자색을 한 단 올리고, 칩은 위 고르는 칩(`flo-pick`)이 켜진 모양
   (연보라 바탕 · 보라 글자 · 32 알약)과 같게 맞췄다. 「조건 초기화」는 줄 오른쪽 끝에 선다.
   ~~`.flo-main .flo-chipbar__label { font-size: 13px; color: var(--flo-ink-3); }`~~ ~~칩 회색 바탕 · 3/6/3/10 안여백~~ */
.flo-main .flo-chipbar__label { font-size: 13px; font-weight: 600; color: var(--flo-ink-2); }
.flo-main .flo-chipbar__list { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-main .flo-chipbar > .flo-btn-text { margin-left: auto; flex: none; }
.flo-main .flo-chip {
    display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box;
    height: var(--flo-control-h-sm); padding: 0 6px 0 12px; border-radius: 999px;
    border: 1px solid var(--flo-violet-200);
    background: var(--flo-primary-soft); color: var(--flo-primary); font-size: 13px; font-weight: 600;
}
/*
 | 🔑 **단추일 수도 링크일 수도 있다** (2026-09-02 · 이슈 #1099).
 |    인플루언서 검색은 스크립트가 즉시 떼므로 `<button>` 이고, 템플릿 목록은 서버가
 |    그리고 주소로 떼므로 `<a>` 다. **모양은 같아야** 한다.
 | 🚫 `text-decoration: none` 을 지우지 마라. 링크 기본 밑줄이 살아나 동그란 `×`
 |    아래에 선이 그인다. 단추 쪽에는 아무 영향이 없다.
 */
.flo-main .flo-chip__off {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--flo-primary); font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
    text-decoration: none;
}
.flo-main .flo-chip__off:hover { background: var(--flo-violet-200); color: var(--flo-ink-1); }

/* 계정 칸의 플랫폼 표시 (킷 6-1 `.cell-account::before`)
 |
 | 🔑 **로고가 없는 플랫폼은 글자로 그린다** — 열을 뺐어도 값이 사라지지 않는다.
 | 🚫 자리를 비우지 마라 — 어느 플랫폼인지가 사라진다.
 */
/*
 | 🚨 **크기를 CSS 로 못 박아야 한다.** `common.css` 가 `img { max-width:100%; height:auto }`
 |    를 걸어 두어, **`width`·`height` 속성만으로는 20px 이 되지 않는다.**
 |    실측에서 로고 하나가 **97px 로 부풀어 계정 칸을 통째로 밀어냈다.**
 | 🚫 속성만 믿지 마라 — 오류가 나지 않고 그림만 커진다.
 */
.flo-main .flo-platform-mark {
    flex: 0 0 20px; display: block; width: 20px; height: 20px;
}
/*
 | 🚨 **로고가 없는 표식이 그 줄만 22px 밀어냈다** (#1023 · 창 1920 실측).
 |    직전까지 이 규칙이 `flex: 0 0 auto; width: auto` 로 **위의 20px 자리를 덮고**
 |    알약 테두리까지 붙여 **42px** 이 됐다. 뒤따르는 **사진과 이름이 통째로** 밀린다.
 |
 | 🔑 **로고와 같은 20px 자리를 지킨다.** 🚫 `width: auto` 로 되돌리지 마라.
 | 🔑 글자가 무엇이든 자리가 변하지 않아야 한다 — 그것이 이 규칙의 전부다.
 */
.flo-main .flo-platform-mark--text {
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--flo-line); border-radius: 50%;
    font-size: 13px; line-height: 1; color: var(--flo-ink-3);
}

/* 결과 표의 행 높이 (이슈 #894)
 |
 | 🚨 **기준은 약 68px, 우리는 약 45px 이었다.** 사진 32px 이 위아래 여백을 거의 다 먹어
 |    **행이 붙어 보이고 훑기 어렵다.**
 | 🔑 **이 화면만 넓힌다** — 🚫 `.flo-td` 전체를 건드리지 마라. 다른 화면의 표가 함께 늘어난다.
 */
/* 🔻 2026-10-05 (#1565 · 4px 격자) ~~14~~ → 12. 다른 표 몸 칸과 같은 값이다. 사진 32 + 24 로 #894 의 기준(약 68)은 지킨다 */
.flo-main .flo-search-result .flo-td { padding-top: 12px; padding-bottom: 12px; }

/*
 | 계정 열의 폭 — 🔑 기준의 `.cell-account{min-width:285px}` 와 같은 뜻이다.
 |
 | 🚨 **이 표는 열 폭을 스스로 나눈다**(`table-layout: fixed`). 열이 열 개라 계정 칸이
 |    **105px 까지 줄어** 로고·사진·이름이 서로를 밀어냈다(실측).
 | 🔑 **`fixed` 에서는 머리 칸의 폭이 곧 열 폭이다** — 🚫 몸 칸에 주지 마라(읽히지 않는다).
 | 🔑 좁은 창에서는 `min-width` 를 받은 표가 **자기 안에서** 가로로 넘어간다.
 */
/*
 | 🔻 **2026-08-27 (#926) 하트가 들어오면서 24px 을 더 줬다** — 그러지 않으면
 |    계정명이 한 글자 더 잘린다. 🚫 값을 더 키우지 마라: 남은 열이 좁아져
 |    `최종 갱신` 의 날짜가 두 줄로 접힌다.
 */
/* 🔻 2026-10-03 (#1557 A5) 244 → 200. 아래 「검색 표 열 폭」 절이 근거다 */
/*
 | 🔻 2026-10-05 (#1565) 200 → ~~214~~ → 200. 표가 판 끝까지 넓어져 열 폭 합이 960 이 됐다.
 |    🚨 스크롤바가 자리를 차지하는 환경(Windows · 문서 폭 1265)에서는 감싼 칸이 945 라 15px 넘쳐
 |    「최종 갱신」이 가로 스크롤 뒤로 숨었다(독립 검토). 합을 945 로 맞추려고 계정을 200 으로 되돌렸다.
 |    🚫 200 아래로 내리지 마라. 계정 이름이 4~5자만 보인다(#1562 리드 검토).
 */
/*
 | 🔻 2026-10-06 (🧑 채택 · #1573) ~~200~~ → 250. 출처 · 팔로잉 열을 걷고 두 비율을 한 칸으로 묶어 164 가 남았다.
 |    그 가운데 50 을 계정이, 114 를 이메일이 받는다(아래 「검색 표 열 폭」 · 합 945 그대로). 사진 없는 글자 동그라미(40)도
 |    걷어 이름 자리가 약 2배가 됐다(1280 실측은 125- 「표」).
 */
/*
 | 🔻 2026-10-06 (#1582 후속) ~~250~~ → 212. #1573 의 뜻은 「이름이 잘리지 않는다」였고 250 이라는 수가 아니었다.
 |    데모 몰에서 가장 넓은 계정 칸 내용(플랫폼 표시 28 + 이름 줄 166.8 · 아이디 줄 165.9)에 칸 여백 8 과 여유 8 을 더해
 |    4 단위로 올렸다. 데모 0/58 잘림. 낸 38 은 이메일 칸이 받는다(R-808 · 이메일이 유일한 연락 수단).
 |    ⚠️ 개발 몰의 시험용 계정 둘(24자 아이디가 이름 자리)만 말줄임이고 온전한 값은 `title` 이다.
 */
.flo-main .flo-search-result .flo-th--account { width: 212px; }

/*
 | 나머지 열이 들어갈 자리를 만든다.
 |
 | 🚨 **`fixed` 는 폭을 안 준 열에 남은 자리를 «똑같이» 나눈다.** 그래서 계정 칸을
 |    넓히면 **선택 상자 칸도 같이 넓어지고**, 정작 `최종 갱신` 의 날짜가 두 줄로 접힌다.
 | 🔑 **가장 좁아도 되는 칸(선택 상자)에 폭을 못 박고**, 좌우 여백을 줄여 자리를 낸다.
 | 🚫 글자 크기를 줄여 맞추지 마라 — 이 표는 이미 작은 글자다.
 */
/* 🔻 2026-10-03 (#1557 A5) 44 → 32 · 아래 절에서 칸 좌우 여백을 6 으로 줄여 선택 상자(16)가 들어간다 */
/* 🔻 2026-10-05 (#1565) ~~32~~ → 판 내용선(`--flo-inset`) + 「선택」 22 + 4. 첫 칸의 바깥 안여백이 판 안여백과 같아졌다 */
/* 🔻 2026-10-06 (#1576 3차) ~~판 내용선 + 26~~ → 바깥 안여백 12 + 「선택」 22 + 4 = 38. 표가 내용선 안에 선다 */
.flo-main .flo-search-result .flo-table thead th:first-child { width: 38px; }
/* 🆕 2026-10-06 (#1576 3차) 바깥 두 칸의 바깥 안여백은 다른 표와 같은 12 다(칸 사이는 그대로 4). 머리 띠의 둥근 끝 선에 글자가 붙지 않는다 */
.flo-main .flo-search-result .flo-table tr > :is(th, td):first-child { padding-left: 12px; }
.flo-main .flo-search-result .flo-table tr > :is(th, td):last-child { padding-right: 12px; }

/*
 | 🆕 **검색 표 열 폭** (2026-10-03 · 이슈 #1557 A5 · 정본 125- 「표」).
 |
 | 🚨 1280 에서 표가 1247px 이고 감싼 칸은 918px 이라 「카테고리 · 이메일 · 최종 갱신」이 가로
 |    스크롤 뒤로 숨었다. 팔로잉 · 참여율 · 게시글은 대부분 「-」인데 77px 씩 받았다.
 | 🔑 열이 열셋이라 칸 좌우 여백을 12 → 6 으로 줄이고, 짧은 숫자 열은 머리 글자 폭만 받는다.
 |    머리 글자는 낱말 단위로 두 줄까지 접힌다(「참여 완료」 · 도움말 표식).
 | 🔑 합계는 화면이 `min-width` 로 함께 넘긴다(성과 열 없이 740 · 참여 완료 52 · 두 비율 124).
 | 🔑 값은 글자 폭을 재서 정했다(1280 · 14px): `999.9만` 47 · `100.0%` 48 · `2026-09-28` 77 ·
 |    `직접등록` 47 · 머리 「카테고리」 44. 여기에 좌우 여백 12 를 더한 값이다.
 |    열셋이 다 보일 때 916 으로, 1280 창의 감싼 칸(918, 테두리 2)에 꼭 든다.
 |    🚫 한쪽만 고치지 마라. 합이 어긋나면 남는 자리를 다시 모든 열이 나눠 갖는다.
 */
/*
 | 🔻 2026-10-04 (🧑 지시 · #1562) 도움말 표식이 붙은 머리는 「글자 + 4 + 표식 16 + 좌우 여백」을 받는다.
 |    ~~좌우 여백 6 · 숫자 52 · 팔로워 60 · 출처 60 · 카테고리 60 · 최종 갱신 92~~ 에서 표식이 글자 아래 줄로
 |    떨어져 「참여율보다 살짝 아래」로 보였다(1280 실측 19.8px 아래 · 다섯 칸).
 | 🔑 계정 200 · 이메일 80 은 그대로 둔다(줄이면 1280 에서 계정 이름이 4~5자만 보였다 · 리드 검토).
 |    대신 좌우 여백을 6 → 4 로 줄여 열마다 4px 씩 냈다. 값(글자 폭 + 8):
 |    「참여율」 32.7 + 20 → 62 · 「카테고리」 43.7 + 20 → 73(72 는 0.2px 넘쳤다) · 「참여 완료」 두 줄(「완료」 21.8 + 20) → 52 ·
 |    `999.9만` 48 → 팔로워 56 · 팔로잉 · 게시글 47(네 자리 수까지) · `직접등록` 47 → 출처 55 · `2026-09-28` 77.4 → 88 ·
 |    「선택」 21.8 → 32. 합은 그대로 916, 성과 열 없이 740 이다.
 | 🔑 글자와 표식 사이에서는 줄이 바뀌지 않는다(`.flo-th__label`). 폭이 모자라도 표식만 떨어지지 않는다.
 */
.flo-main .flo-search-result .flo-table .flo-th,
.flo-main .flo-search-result .flo-table td.flo-td { padding-left: 4px; padding-right: 4px; }
.flo-main .flo-search-result .flo-table .flo-th { white-space: normal; word-break: keep-all; }
.flo-main .flo-search-result .flo-table th.flo-col--num { width: 47px; }
/*
 | 🔻 2026-10-06 (🧑 결정 · #1582) 짝 지표 칸에 줄마다 작은 이름이 붙어 ~~팔로워 56 · 비율 62~~ → 92 · 90.
 |    값(묶음 폭 + 칸 여백 8): 「팔로워」 32.7 + 사이 4 + 숫자 칸 48(`999.9만` 47.5) = 84.7 → 92 ·
 |    「수락」 21.8 + 4 + 48(표 안 `100.0%` 실측 48) = 73.8 에 표본 점(사이 2 + 6)이 칸 안에 들도록 양쪽 4 를 더해 90.
 |    늘어난 64 는 이메일 칸이 낸다(합 900 그대로 · 이메일 칸 주석).
 | 🔻 2026-10-06 (#1582 후속 · 이메일 칸 되찾기) ~~92 · 90~~ → 89 · 82.
 |    팔로워: 묶음 84.7 이 칸 여백(4) 안까지 써 89 다. 88 은 스크롤바가 있는 1265 창에서 칸 밖으로 0.3 나갔다.
 |    비율: 묶음 73.8 + 여백 8 = 82. 표본 점은 바로 뒤 카테고리 칸의 왼쪽 여백 12(숫자 열 뒤 글 열 규칙) 안에 선다.
 |    🚫 줄 이름 12px 은 쓰지 않는다. 읽는 글자 바닥 13 은 사용자 결정이다(R-306 · `MinReadableFontSizeGuardTest`).
 */
.flo-main .flo-search-result .flo-table th.flo-th--followers { width: 89px; }
/*
 | 🔻 2026-10-29 (#1918) ~~`th.flo-th--engagement { width: 62px; }` (SNS 참여율) · `th.flo-th--rate { width: 82px; }` (응답 · 수락 두 줄)~~ →
 |    캠페인 참여율 62(걷힌 SNS 참여율 칸과 같은 머리 「참여율 ⓘ」) · 참여 52 · 수락 41 · 거절 41.
 | 🔑 캠페인 열 합은 196 으로 걷힌 두 칸(82 + 52 + 참여율 62)과 같다. 열이 모두 붙을 때의 합 900 이 그대로다(1280 · 905 안).
 |    수락 · 거절은 두 글자(26) + 여백 8 이라 41 에 든다. 수락의 정렬 꺾쇠는 「참여」처럼 칸 아래에 띄워 글이 접히지 않는다(아래 「정렬 머리」).
 */
.flo-main .flo-search-result .flo-table th.flo-th--join-rate { width: 62px; }
.flo-main .flo-search-result .flo-table th.flo-th--joined { width: 52px; }
.flo-main .flo-search-result .flo-table th.flo-th--accepted { width: 41px; }
.flo-main .flo-search-result .flo-table th.flo-th--declined { width: 41px; }
/* 🔻 2026-10-06 (#1573 C) ~~`th.flo-th--source { width: 55px; }`~~ 출처 열을 걷었다. 값은 계정 칸 둘째 줄이다 */
/* 🔻 2026-10-06 (#1573 B) 팔로워 칸(56)이 팔로잉을, 비율 칸(62) 하나가 응답률 · 수락률을 두 줄로 함께 싣는다. 폭은 그대로다 */
/*
 | 🔻 2026-10-05 (#1567) 카테고리 ~~73~~ → 81 · 이메일(아래 절) ~~80~~ → 72. 숫자 열이 오른쪽, 카테고리가 왼쪽이 되어
 |    두 값 사이가 칸 여백 4 + 4 = 8 뿐이었다. 「0.0%」 바로 옆에 카테고리 「-」가 붙어 「- -」 한 덩이로 읽혔다(1280 실측).
 | 🔑 숫자 열 바로 뒤의 글 열만 왼쪽 여백을 12 로 둬 사이를 16 으로 벌린다. 늘어난 8 은 이메일 칸에서 가져와 합 945 는 그대로다.
 |    이메일은 이미 말줄임으로 잘리고 온전한 주소는 `title` 이 나른다. 🚫 계정 200 은 건드리지 않는다(#1562 리드 검토).
 */
.flo-main .flo-search-result .flo-table th.flo-th--category { width: 81px; }
.flo-main .flo-search-result .flo-table :is(th, td):is(.is-num, .flo-col--num) + .flo-col--short { padding-left: 12px; }
/* 🔻 2026-10-05 (#1565) ~~88~~ → 4 + 날짜 79(「2026-09-28」 77.4) + 판 내용선(`--flo-inset`). 마지막 칸의 바깥 안여백이 판 안여백과 같아졌다.
 |    ~~+ 84~~ → + 83 · 열 폭 합을 스크롤바가 있어도 1280 에 드는 945 로 맞춘다(계정 칸 주석) */
/* 🔻 2026-10-06 (#1576 3차) ~~판 내용선 + 83~~ → 4 + 날짜 79 + 바깥 안여백 12 = 95. 표가 내용선 안에 선다 */
.flo-main .flo-search-result .flo-table th.flo-col--date { width: 95px; }
/*
 | 🔻 2026-10-01 (#1547 · D-14) 머리 칸 좌우 8 → 12. 표 기준(`.flo-th` 11/12)과 같게 한다.
 |    ~~`.flo-th, .flo-td { padding-left: 8px; padding-right: 8px; }`~~ 의 몸 칸 쪽은 처음부터
 |    아래 킷 덮개(`.common-table-wrap .common-table tbody td.flo-td`, 12)에 져서 적용되지 않았고,
 |    머리 칸만 8 이라 머리와 몸의 글자 시작점이 4px 어긋났다(실측 머리 11/8 · 몸 14/12).
 | 🔑 몸 칸의 위아래 14 는 그대로다. 사진 32px 이 든 행의 높이를 위한 값이다(#894 · 위 주석).
 */

/* ── 결과 도구 줄 — 고른 인원으로 무엇을 하는가 ──────────────────────
 |
 | 🔑 킷 `.result-filter-box` 자리다. 담을 곳을 고르는 쪽이 왼쪽, 실행이 오른쪽.
 | 🚫 표 안으로 넣지 마라 — 쪽을 넘기면 함께 사라진다.
 */
/*
 | 🔻 **2026-08-31 (#987) 한 줄에서 두 줄로 갈랐다** (🧑 지시).
 |
 | 🚨 **직전까지 담기 도구 3벌이 한 줄에 늘어서 있었다.** 「새 캠페인에 담기」 버튼
 |    **바로 오른쪽**에 「발송 전 캠페인」 선택 상자가 붙어, 눈으로는 그 상자가
 |    **왼쪽 버튼의 입력칸**으로 읽혔다. 실제로는 맨 오른쪽 버튼의 것이다.
 | 🔑 **위 줄이 관심목록, 아래 줄이 캠페인**이다. `space-between` 으로 좌우 끝에
 |    밀어 두던 것을 **줄로 나눈다** — 그래야 어느 묶음이 어디까지인지 보인다.
 */
/*
 | 🔻 **2026-10-06 (#1576) 세 줄(선택 N명 · 관심목록 · 캠페인)을 한 줄 도구 막대로 모았다.**
 |    🧑 *"선택이랑 관심목록에 담기, 재협업 우선, 캠페인에 담기 버튼 위치가 너무 어색해"*
 |    ~~`flex-direction: column; align-items: stretch; gap: 8px`~~ · 선택 N명 한 줄, 관심목록 줄, 선 하나, 캠페인 줄이 쌓여
 |    표 위 136px 를 차지했고 줄마다 머리 · 칸이 떨어져 떠 보였다.
 | 🔑 #987 이 지킨 「관심목록과 캠페인을 가른다」는 그대로다. 줄 대신 **묶음 사이 세로선**(각 묶음 앞 1px · 24 높이)이 가른다.
 |    묶음 안에는 제 머리(「관심목록에 담기」 · 「캠페인에 담기」)가 붙어 선다. 캠페인 묶음 안 두 단추 사이에는 선이 없다(#987 2차).
 | 🔑 폭이 모자라면 묶음째 다음 줄로 접힌다. 줄 첫머리에 온 묶음의 선은 막대 왼쪽 밖(-12)이라 잘려 보이지 않는다(`overflow-x: clip`).
 |    좌우 4 의 여유는 초점 고리(2 + 2)가 잘리지 않게 하는 몫이다.
 */
.flo-main .flo-result-tools {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 24px; padding: 0 4px 16px; margin: 0 -4px; /* 🔻 2026-10-05 (#1565) ~~10~~ */
    overflow-x: clip;
}
.flo-main .flo-result-tools__row {
    position: relative;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; /* 🔻 2026-10-05 (#1565) ~~10px 12px~~ */
}
.flo-main .flo-result-tools__row::before {
    content: ""; position: absolute; left: -12px; top: 50%; width: 1px; height: 24px; margin-top: -12px;
    background: var(--flo-line);
}
/* 🔑 860 이하에서는 관심목록 묶음이 한 줄을 다 쓴다 · 선택 상자가 남는 폭을 먹는 아래 #1559 규칙의 바탕이다 */
@media (max-width: 860px) {
    .flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) { flex: 1 1 100%; }
    /* 🔑 캠페인 묶음도 한 줄을 다 쓰고 두 단추가 반씩 나눠 선다 · 390 에서 「기존 캠페인 담기」 혼자 아랫줄로 떨어졌다 */
    .flo-main .flo-result-tools__row--campaign { flex: 1 1 100%; }
    .flo-main .flo-result-tools__row--campaign > .flo-result-tools__title { flex: 1 1 100%; }
    .flo-main .flo-result-tools__row--campaign > .flo-result-tools__group { flex: 1 1 0; }
    .flo-main .flo-result-tools__row--campaign > .flo-result-tools__group > .flo-btn { flex: 1 1 auto; min-width: 0; padding-left: 8px; padding-right: 8px; }
}
/*
 | 🆕 **담기 줄의 머리 — 「누구를」** (2026-08-31 · #987 3차 · 🧑 지시).
 |
 | 🚨 **버튼마다 「선택 N명」을 적어 버튼이 길었다.** 빼고 나니 셈이 **판 머리
 |    오른쪽 끝**에만 남아 버튼까지 **1,100픽셀**이었다(1920 창 실측).
 | 🔑 **셈과 그것을 쓰는 버튼을 한자리에** 둔다 — 아래 두 줄의 주어다.
 | 🚫 판 머리로 되돌리지 마라. 🚫 버튼 안으로도 되돌리지 마라.
 */
/* 🔻 2026-10-06 (#1576) 막대 첫 칸이 되어 ~~`align-items: baseline; padding-bottom: 2px`~~ → 칸 높이(40) 가운데 */
.flo-main .flo-result-tools__head {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--flo-control-h); white-space: nowrap;
}
/*
 | 🆕 2026-10-09 (#1601) 숫자 자리폭을 고정하고 세 자리(「선택 000명」)만큼 칸을 잡아 둔다.
 |    고른 인원이 바뀔 때마다 뒤의 「담기」 · 캠페인 단추가 좌우로 3px 씩 밀렸다(0명 600 · 1명 597 · 11명 603 실측).
 |    빈자리는 글자 뒤(오른쪽)에 남는다. 🚫 숫자를 칸 안에서 오른쪽 정렬하지 마라. 「선택」과 숫자 사이가 벌어진다.
 */
.flo-main .flo-result-tools__count { font-size: 13px; color: var(--flo-ink-2); font-variant-numeric: tabular-nums; min-width: 60px; } /* 「선택 999명」 실측 59.75px */
.flo-main .flo-result-tools__count [data-selection-count] {
    font-weight: 600; color: var(--flo-primary);
}
/*
 | 🔑 **줄 사이에 선을 하나 둔다** — 관심목록과 캠페인은 담기는 곳이 아예 다르다.
 | 🚫 두 줄을 붙여 두지 마라 — 줄만 바뀌면 같은 묶음의 줄바꿈으로 읽힌다.
 */
/*
 | 🚫 `--flo-line-soft`(#f2f4f6)를 쓰지 마라 — 흰 판 위에서 **눈에 보이지 않아**
 |    줄이 갈린 것으로 읽히지 않는다(실측). 표 테두리와 같은 `--flo-line` 이다.
 */
/* 🔻 2026-10-06 (#1576) 가로 줄 대신 묶음 앞 세로선(`.flo-result-tools__row::before`)이 가른다.
   ~~`.flo-main .flo-result-tools__row--campaign { padding-top: 12px; border-top: 1px solid var(--flo-line); }`~~ · 선 색 `--flo-line` 은 그대로 */
.flo-main .flo-result-tools__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/*
 | 🆕 **2026-09-25 (#1474) 선택 상자가 줄 폭을 넘지 않는다.** 선택 상자의 폭은 가장 긴
 |    항목을 따라가서, 띄어쓰기 없는 100자 관심목록 이름 하나가 문서를 1,492px 로 밀었다.
 | 🔑 닫힌 상자에서 이름이 잘려도 **펼치면 전체가 보인다**(R-308 「값에 닿을 수 있는가」).
 | 🚨 **상자만 막으면 모자란다.** 묶음 자신이 줄의 flex 항목이라 기본값 `min-width: auto`
 |    로 상자 폭만큼 커졌다(실측 1,215px). 묶음도 줄 폭에서 멈춘다.
 */
.flo-main .flo-result-tools__group { min-width: 0; max-width: 100%; }
.flo-main .flo-result-tools__group select { max-width: 100%; min-width: 0; }
/*
 | 🆕 **좁은 폭의 담기 줄 · 선택 상자는 남는 폭을 먹고 단추는 그 옆에 선다** (2026-10-03 · #1559 · E4).
 |    390px 에서 「담기」 단추 혼자 아랫줄로 떨어졌다. 머리(`__title`)만 한 줄을 통째로 쓴다.
 */
@media (max-width: 860px) {
    .flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) .flo-result-tools__group { flex: 1 1 100%; flex-wrap: wrap; }
    .flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) .flo-result-tools__title { flex: 1 1 100%; }
    .flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) .flo-result-tools__group select { flex: 1 1 0; }
    .flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) .flo-result-tools__group .flo-btn { flex: none; }
}
.flo-main .flo-result-tools__label { font-size: 13px; color: var(--flo-ink-2); }
/*
 | 🆕 「관심목록에 담기」 줄, 선택 상자 옆 「담기」 단추 높이를 맞춘다
 |    (2026-09-29 · 이슈 #1527 · H15). 선택 상자는 `--flo-control-h`(38px, 전역 토큰)를
 |    쓰는데 단추는 킷의 `line-height` 만 물려받아 40px 로 그려져 같은 줄에서 2px
 |    어긋난다(`.flo-search-submit` 옆의 같은 판단 참고).
 | 🚫 캠페인 줄(`--campaign`)은 뺀다. 그 줄은 단추만 있고 옆에 선택 상자가 없어
 |    맞출 대상이 없다.
 */
.flo-main .flo-result-tools__row:not(.flo-result-tools__row--campaign) .flo-btn {
    height: var(--flo-control-h);
    line-height: calc(var(--flo-control-h) - 2px);
}
/*
 | 줄이 무엇에 관한 것인지 — 이름표(`__label`)보다 진하게 적어 묶음의 머리로 읽힌다.
 |
 | 🔑 **두 줄의 머리 폭을 맞춘다** (#987 3차) — 「관심목록에 담기」와 「캠페인에 담기」의
 |    글자 수가 달라 **아래위 버튼이 어긋나 시작**했다. 폭을 맞추면 줄이 나란해진다.
 | 🚫 좁은 창에서 잘리지 않게 `width` 가 아니라 `min-width` 다.
 */
/*
 | 🔻 2026-10-06 (#1572 리드 검토) 글자색 ~~`--flo-ink-1`~~ → `--flo-ink-2`. 바로 위 검색 필터 판의 조건 이름
 |    (`.flo-filtergrid__label` 13/600 · ink-2)과 한 화면 안에서 두 모양이었다. 줄 머리는 굵기(600)와 자리로 읽힌다.
 | 🔑 폭 96 은 그대로다. 「관심목록에 담기」(91) · 「캠페인에 담기 ⓘ」(약 100)가 판의 이름 칸(72)에 들지 않는다.
 */
/* 🔻 2026-10-06 (#1576) ~~`min-width: 96px`~~ · 두 머리가 위아래로 쌓이지 않아 맞출 시작선이 없어졌다. 글자 폭 그대로다 */
/*
 | 🆕 **막대의 단추는 글자 폭을 따른다** (2026-10-06 · 이슈 #1576 · 2차).
 | 🚨 킷 `.basic-btn.small` 이 최소 폭 108 · 좌우 30 이라 두 글자 「담기」가 108, 「기존 캠페인 담기」가 150 이었다.
 | 🔑 최소 72 · 좌우 16. 높이 40 은 그대로다. 막대 안에서만 겨냥한다.
 */
.flo-main .flo-result-tools .flo-btn { min-width: 72px; padding-left: 16px; padding-right: 16px; }
.flo-main .flo-result-tools__title {
    font-size: 13px; font-weight: 600; color: var(--flo-ink-2);
    white-space: nowrap;
}
/*
 | 🔻 **2026-08-31 (#987 2차) 세로선(`__split`)을 걷었다.**
 |
 | 🚨 그 선은 **선택 상자가 줄에 남아 있을 때** 필요했다 — 왼쪽 버튼의 입력칸으로
 |    읽히던 것을 끊는 장치였다. 🧑 사용자가 «그래도 헷갈린다» 고 해서
 |    **선택 상자를 창으로 옮겼고**, 줄에는 이름이 다른 **버튼 둘만** 남았다.
 | 🔑 **가를 것이 없어졌다** — 🚫 되살리지 마라. 선을 다시 넣으려는 것은
 |    **선택 상자를 줄로 되돌렸다는 신호**다.
 */

/* ── 어느 캠페인에 담을까 (창 안의 목록) — 이슈 #987 ──────────────────
 |
 | 🧑 *"기존 캠페인 담기 눌렀을 때 임시저장되어 있는 캠페인이 나타나면 좋겠어"*
 |
 | 🔑 **한 번에 다 보인다** — 선택 상자는 열어야 보이고, 열기 전에는 첫 항목만
 |    보여 **몇 개나 있는지조차 알 수 없었다.**
 | 🚫 `<fieldset>` 기본 테두리를 남기지 마라 — 창 안에 상자가 두 겹으로 보인다.
 */
/* 🔑 창 안에서 「몇 명을 담는가」를 다시 적는 줄 — 판 머리가 가림막 뒤에 있다 */
.flo-main .flo-campaign-pick__subject { margin: 0 0 14px; color: var(--flo-ink-2); }
.flo-main .flo-campaign-pick__subject [data-selection-count] {
    font-weight: 600; color: var(--flo-primary);
}
.flo-main .flo-campaign-pick { border: 0; padding: 0; margin: 0; min-width: 0; }
.flo-main .flo-campaign-pick__legend {
    padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--flo-ink-2);
}
/*
 | 한 줄 = 캠페인 하나.
 |
 | 🔑 **줄 전체가 누를 자리다**(`<label>`) — 12픽셀짜리 동그라미만 겨냥하게 두지 마라.
 | 🔑 **목록이 길어지면 창 안에서 넘긴다** — 창 자체가 화면 밖으로 자라면
 |    바닥의 「담기」에 닿을 수 없다.
 */
.flo-main .flo-campaign-pick__list {
    display: flex; flex-direction: column; gap: 4px;
    max-height: 46vh; overflow-y: auto;
    padding: 2px; /* 🆕 2026-10-11 (#1612 독립 검토) 고른 줄의 바깥선 2(`.flo-choice`)가 넘김 상자 끝에서 잘리지 않게 한다 */
}
/*
 | 🔻 2026-10-11 (#1612) 줄 모양 규칙(`.flo-campaign-pick__row` · 테두리 · 안여백 · 고른 바탕 · 체크 표시 · 초점 고리)을 걷고
 |    공용 선택 카드 `.flo-choice` 에 목록 줄 밀도 변형 `.flo-choice--row` 를 더해 옮겼다(이 파일 아래 「공용 선택 카드」).
 |    ~~🚫 색만으로 가르지 마라 — 동그라미가 함께 있어 색을 못 보는 사람도 읽는다.~~
 |    🧑 *"굳이 저 동그라미 선택버튼이 잇어야해? 그거없이 눌렀을 때 색변동만 되는게 더 트렌디하지않아?"* · 동그라미를 걷었다.
 | 🔑 **고른 줄이 눈에 띈다**(옛 주석의 까닭 그대로) · 이제 그 모양은 발송 방식 카드(#1613)와 한 벌이다. 🚫 여기에 줄 모양을 다시 적지 마라 · 두 벌이 된다.
 */
.flo-main .flo-campaign-pick__name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--flo-ink-1);
}
/*
 | 🆕 2026-11-03 (소규모 이슈) 위저드 ③ 「관심목록 선택」 창 · 고르는 줄 옆 「보기」 단추.
 | 🔑 단추는 이름표(`<label>`) 밖에 선다 · 이름표 안에는 단추를 둘 수 없다(HTML). 줄 모양은 `.flo-choice--row` 그대로다.
 | 🔑 이름표가 남는 폭을 가지고 좁아질 수 있어야 긴 관심목록 이름이 말줄임으로 끝난다.
 */
.flo-main .flo-roster-pick__row { display: flex; align-items: center; gap: 8px; }
.flo-main .flo-roster-pick__row > .flo-choice { flex: 1 1 auto; min-width: 0; }
.flo-main .flo-roster-pick__row > .flo-btn { flex: none; }

/* ── 표 묶음 — 부품이 인라인으로 적던 값을 옮겼다 ────────────────────
 |
 | 🚨 인라인 `style` 은 스타일시트가 이길 수 없다 (R-307 ②). 부품 안에 있어도
 |    화면에서 여백 하나 고칠 수 없어진다.
 | ⚠️ `max-height` · `min-width` 는 부르는 쪽이 값을 넘기므로 인라인으로 남는다.
 */
.flo-main .flo-table-block { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/*
 | 🔻 **2026-08-31 (이슈 #1012) 도구가 함께 서는 줄이 됐다.**
 |    ~~🔑 도구가 없으면 예전 그대로 오른쪽 끝이다(`justify-content: flex-end` 가
 |    빈 왼쪽을 밀어낸다). 🚫 `space-between` 하나로 바꾸지 마라: 도구가 없는 화면에서
 |    건수가 왼쪽으로 튄다.~~
 |
 | 🔻 **2026-09-30 (#1530 group V, 2차 리드 재검토) `flex-end` → `space-between`.**
 |    위 경고가 걱정한 것은 **건수가 낱개 자식으로 떠 있어** `space-between` 이
 |    그것을 도구와 나란히 갈라 버리는 상황이었다. 지금은 제목·건수·「중 M건」이
 |    `flo-panel__lead` 한 덩이(`data-table.blade.php`)로 먼저 서고 도구가 그 다음이라,
 |    도구가 없어도 그 덩이는 여전히 **왼쪽**에 선다. 걱정하던 상황이 사라졌다.
 |    🔑 목록 화면의 판 머리(`flo-panel__head`)와 같은 자리를 만드는 것이 목적이다.
 */
/*
 | 🔻 2026-10-06 (#1572 사진 점검) 아래 여백 ~~8~~ → 12, 표까지 ~~8~~ → 16(묶음 사이 8 + `margin-bottom` 8). 🔻 2026-10-11 (#1638) 선을 걷고도 표까지 16 이다: 아래 여백 ~~12~~ → 0, `margin-bottom` 8 은 그대로.
 | 🚨 건수 줄 밑줄과 표 머리 띠 사이가 8 이라 선 두 줄이 붙어 겹줄처럼 보였고, 판 머리(`flo-panel__head` · 아래 12 ·
 |    다음까지 16)를 쓰는 목록(캠페인 · 발송 이력)과 같은 자리인데 간격이 달랐다(1280 실측 8 대 16, 화면 7곳).
 | 🔑 위 주석이 말한 「판 머리와 같은 자리」를 값으로도 맞춘다.
 */
.flo-main .flo-table-block__count {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-bottom: 0; margin-bottom: 8px; border-bottom: 0; /* 🔻 2026-10-11 (#1638) ~~padding-bottom: 12px; margin-bottom: 8px; border-bottom: 1px solid var(--flo-line);~~ 아래가 표 머리 띠라 선이 겹줄이었다. 묶음 사이 8(`gap`) + 8 = 표 머리 앞 16 */
}
/* 🆕 2026-09-30 (#1530 group V, 2차 리드 재검토) 도구 자리가 오른쪽으로 옮기며 여러
   조각(정렬 기준 · 「전체 보기」 · 쪽 크기 선택 등)이 한 줄에 서게 됐다. 판 머리의
   `flo-panel__actions` 와 같은 간격을 준다. */
.flo-main .flo-table-block__tools { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* 🔻 2026-10-05 (#1565) ~~10~~ · 판 머리 행동과 같은 8 */

/* 🔑 0건 안내가 든 칸 — 표의 마지막 줄이므로 아래 선을 남긴다. 🚫 표를 지우지 마라(열 이름이 함께 사라진다) */
.flo-main .flo-table-empty-cell { border-bottom: 1px solid var(--flo-line); }

/* ── 계정 칸 — 사진 + 이름 + 아이디 두 줄 ────────────────────────────
 |
 | 🔑 **두 줄 다 한 줄로 자른다** — 행 높이가 행마다 달라지면 훑을 수 없다.
 |    전체 글자는 `title` 로 남긴다.
 | 🔑 참조의 `.cell-account` 와 같은 자리다.
 */
.flo-main .flo-account { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flo-main .flo-account__text { display: flex; flex-direction: column; min-width: 0; max-width: 320px; }
.flo-main .flo-account__name,
.flo-main .flo-account__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flo-main .flo-account__handle { color: var(--flo-ink-2); }
/*
 | 🆕 2026-10-14 (#1738 · 묶음 F) 계정 칸은 한 모양이다 · 이름 14/400/20 + 아이디 13/400/18 흐림. 이동되는 칸(이름이 링크)만 링크 색이다.
 | 🚨 두 줄 보라 · 두 줄 검정 · 한 줄 검정 · 한 줄 보라가 섞여 같은 사람이 화면마다 다른 모양이었다.
 | 🔑 아이디는 흐린 글자(`--flo-ink-3`, 흰 바탕 4.62:1)다. 이름과 무게가 같아 두 줄이 한 덩이로 읽혔다.
 | ⚠️ 정산 · 발송 이력의 넓은 폭 한 줄(#1651 · 🧑 「인플루언서 행만 너무 크다」)은 사용자 지시라 그대로 둔다. 글자 모양만 같다.
 */
.flo-main .flo-account__name { font-size: 14px; font-weight: 400; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-main a.flo-account__name { color: var(--flo-primary); }
.flo-main .flo-account__handle { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
/*
 | 🆕 **예외 출처 꼬리표** (2026-10-12 · 이슈 #1649). 「직접등록」만 계정 ID 뒤에 작게 붙는다. 수집은 기본이라 그리지 않는다.
 | 🔑 셋째 줄이 아니라 같은 줄이라 행 높이가 두 줄 그대로다. 아이디가 길면 아이디만 말줄임으로 줄고 꼬리표는 남는다.
 */
.flo-main .flo-account__meta { display: flex; align-items: center; gap: 4px; min-width: 0; }
.flo-main .flo-account__meta > .flo-account__handle { min-width: 0; }
.flo-main .flo-account__tag { flex: none; padding: 0 6px; border-radius: 4px; background: var(--flo-line-soft); color: var(--flo-ink-2); font-size: 13px; line-height: 20px; white-space: nowrap; }
/*
 | 🆕 **표 안의 계정 · 상품 묶음은 묶음째 칸 가운데에 선다** (2026-10-06 · 🧑 결정 · 이슈 #1572).
 | 🚨 묶음이 `display: flex`(블록)라 칸 폭을 다 차지해, 칸이 가운데 정렬이어도 사진이 칸 왼쪽 끝에 붙었다
 |    (인플루언서 검색 계정 칸 1280 실측 9~29px 왼쪽 · 명단 94 · 담은 상품 110).
 | 🔑 표 안에서만 글자 줄처럼 서는 묶음(`inline-flex`)으로 바꾼다. 폭은 칸을 넘지 않고(`max-width: 100%`),
 |    긴 이름은 지금처럼 말줄임으로 잘린다. 묶음 안의 이름 · 아이디 두 줄은 왼쪽 시작선을 지킨다.
 */
.flo-main .common-table td :is(.flo-account, .flo-picked-product) { display: inline-flex; max-width: 100%; vertical-align: middle; }
.flo-main .common-table td :is(.flo-account__text, .flo-picked-product__meta) { text-align: left; }
/*
 | 🆕 2026-10-14 (#1738 · 🧑 결정 ④ 「묶음 폭 고정 + 가운데 (권장)」) 가운데 정렬(#1572)은 그대로 두고 묶음 폭을 고정한다.
 | 🚨 묶음 폭이 이름 길이를 따라 행마다 달라, 가운데에 세우면 사진 · 이름의 왼쪽 끝이 행마다 4~13px 흔들렸다.
 | 🔑 폭을 칸 안 한 값(240, 칸이 더 좁으면 칸 폭)으로 두면 묶음이 가운데에 서도 모든 행의 시작선이 같다. 긴 이름은 지금처럼 말줄임이다.
 */
@media (min-width: 641px) {
    .flo-main .common-table td .flo-account:not(.flo-search-result *) { width: min(100%, 240px); } /* 🔻 2026-10-14 (#1738 검토) 넓은 표에서만 · 640 이하 카드(쿠폰 진행 등)에서는 이름을 240 에서 잘랐다 */
}
/*
 | 🆕 **검색 표의 계정 칸은 칸 폭을 다 쓰고 하트를 칸 끝 고정 자리에 둔다** (2026-10-06 · #1572 리드 검토).
 | 🚨 하트 뒤 담긴 수(「♥ 2」)가 붙은 행만 이름 자리가 22px 줄어 「@qa_public...」처럼 잘렸고,
 |    묶음 폭이 행마다 달라 가운데에 세우면 사진이 행마다 다른 x 에 섰다(1280 실측 9~29px 차이).
 | 🔑 칸(200)이 좁아 묶음이 거의 칸을 채운다. 칸을 다 쓰게 두면 사진 · 이름 시작선이 모든 행에서 같고,
 |    하트 자리(34 · 하트 24 + 사이 2 + 한 자리 수 8)가 같아 이름 자리도 모든 행에서 89px 로 같다.
 | 🔑 수와 하트 사이 2 는 「♥2」를 한 덩이로 읽게 한다(관심목록 수는 하트에 딸린 값이다).
 */
.flo-main .flo-search-result .common-table td .flo-account { display: flex; width: 100%; }
.flo-main .flo-search-result .common-table td .flo-account__text { flex: 1 1 auto; }
/*
 | 🔻 2026-10-06 (#1576 · 🧑 *"인플루언서 검색의 계정 하트 위치가 애매함"*) 하트를 칸 끝에서 이름 바로 뒤로 옮겼다.
 |    ~~`.flo-account > .flo-bookmark { flex: 0 0 34px; gap: 2px; }`~~ · 칸 끝 고정 자리라 이름과 100px 넘게 떨어졌다.
 | 🔑 이름 줄(`__line`)은 이름 · 하트 · 담긴 수를 한 줄에 둔다. 이름만 줄고(`min-width: 0`) 하트 묶음은 줄지 않는다.
 | 🔑 하트 상자(24)가 글자 줄(20)보다 커서 위아래 -2 로 줄 높이를 지킨다 · 행 높이 64 가 그대로다.
 */
.flo-main .flo-search-result .flo-account__line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.flo-main .flo-search-result .flo-account__line > .flo-account__name { min-width: 0; }
.flo-main .flo-search-result .flo-account__line > .flo-bookmark { flex: none; gap: 2px; margin: -2px 0; }
.flo-main .flo-search-result .flo-account__line > .flo-bookmark > .flo-bookmark__count { min-width: 0; text-align: left; }
/*
 | 🆕 **검색 표 계정 칸 둘째 줄 = 아이디 · 출처** (2026-10-06 · 🧑 채택 · 이슈 #1573 C).
 | 🔑 출처 열을 걷고 값을 아이디 뒤에 둔다. 셋째 줄을 만들면 행이 64 에서 80 으로 커진다.
 | 🔑 아이디만 말줄임으로 줄고 출처(「수집」 · 「직접등록」)는 언제나 보인다(`flex: none`).
 | 🔑 글자는 13/18 · `--flo-ink-2` 로 아이디와 같다. 둘 사이 「·」는 화면 그림이다(이름이 없는 행은 출처만 선다).
 */
.flo-main .flo-search-result .flo-account__sub { display: flex; align-items: baseline; gap: 4px; min-width: 0; color: var(--flo-ink-2); }
.flo-main .flo-search-result .flo-account__sub > .flo-account__handle { min-width: 0; }
.flo-main .flo-search-result .flo-account__source { flex: none; white-space: nowrap; }
/* 🔑 `/ ""` 는 낭독 대체 글자다. 「·」를 읽지 않게 한다 */
.flo-main .flo-search-result .flo-account__handle + .flo-account__source::before { content: "·" / ""; margin-right: 4px; }
/*
 | 🆕 **한 칸 두 줄의 짝 지표** (2026-10-06 · 🧑 채택 · 이슈 #1573 B). 팔로워 · 팔로잉, 응답률 · 수락률.
 | 🔑 머리도 같은 두 줄(`flo-th__pair`)이라 위 줄은 위 줄끼리, 아래 줄은 아래 줄끼리 읽는다.
 | 🔑 몸은 14px 두 줄(38) + 위아래 12 + 칸 선 2 = 64 로 행 높이 바닥(64)과 같다. 행이 커지지 않는다.
 | 🔑 줄마다 가운데다(🧑 #1572 「머리 · 값 모두 가운데」). 표본 점은 흐름 밖이라 숫자를 밀지 않는다.
 | 🔻 2026-10-06 (🧑 결정 · #1582) **줄마다 작은 이름 + 숫자**다. 🧑 *"…한곳에 위아래로 있으니깐 뭔가 구분이 안돼네"*
 |    ~~두 줄 머리(`flo-th__pair`) · 줄마다 숫자만 가운데(`inline-flex` 세로)~~ · 머리는 한 줄 「팔로워 · 팔로잉」 · 「응답 · 수락」이다.
 | 🔑 이름 · 숫자 두 칸 격자다. 이름은 왼쪽 시작선, 숫자는 오른쪽 끝선이 두 줄에서 맞고 묶음째 칸 가운데에 선다
 |    (계정 묶음과 같은 방식 · #1572). 이름은 13 · `--flo-ink-3`, 숫자는 14 그대로라 한 줄씩 따로 읽힌다.
 | 🔑 숫자 칸은 가장 긴 값의 폭을 바닥으로 둔다(`999.9만` 47.5 · 표 안 `100.0%` 48 → 48). 행마다 묶음 폭이 같아
 |    이름 시작선 · 숫자 끝선이 표 위아래로 한 줄에 선다. 바닥이 없으면 값 길이에 따라 묶음이 행마다 6px 씩 흔들렸다.
 */
.flo-main .flo-search-result .flo-pair-lines {
    display: inline-grid; grid-template-columns: auto minmax(48px, auto); column-gap: 4px; align-items: baseline; vertical-align: middle;
}
.flo-main .flo-search-result .flo-pair-lines > span { white-space: nowrap; }
.flo-main .flo-search-result .flo-pair-lines__name { justify-self: start; font-size: 13px; color: var(--flo-ink-3); }
.flo-main .flo-search-result .flo-pair-lines__value { justify-self: end; }
/* 🔑 줄 높이 19 · 두 줄 38 은 계정 칸(이름 20 + 둘째 줄 18)과 같다. 20 두 줄(40)이면 칸 선 2 를 더해 행이 66 이 됐다(1280 실측) */
.flo-main .flo-search-result .flo-pair-lines { line-height: 19px; }
/*
 | 🆕 검색 표의 행 높이 바닥 64 (2026-10-06 · #1572). 참여율 「산출 불가」가 한 줄이 되며 이름 · 날짜가 한 줄인 행만
 |    58 로 낮아져 한 표에 58 · 64 · 66 세 높이가 섞였다(1280 실측). 두 줄 행(이름 + 아이디, 「등록」 + 날짜)의 높이를 바닥으로 둔다.
 | 🔑 표의 행 `height` 는 최소값이라 더 긴 칸(「표본 부족」 66)은 그대로 늘어난다.
 */
.flo-main .flo-search-result .common-table tbody tr:not(:has(> td[colspan])) { height: 64px; }

/*
 | 🆕 2026-09-29 (#1527 H21). 명단 표(위저드 ③)는 일곱 칸(선택 포함)을
 |    `table-layout: fixed` 가 균등 분할해 1280px 에서 칸마다 123px 이었다(실측).
 |    「인플루언서」칸도 같은 123px 를 받아 `qa_public_b` 같은 계정명이
 |    `qa_publi…` 로 잘렸다.
 | 🔑 값이 짧은 여섯 칸만 실측 폭을 주고, 「인플루언서」는 폭을 안 줘 남는 자리를
 |    받게 한다(캠페인 목록의 #1018 과 같은 방식). 「선택」 칸은 잠긴 캠페인에서는
 |    렌더되지 않으므로 `nth-child` 대신 부품이 이미 붙이는 클래스로 짚는다.
 | 🚫 `nth-child` 로 짚지 마라. 「선택」 칸 유무로 순서가 밀려 다른 칸을 짚는다.
 */
/* 🔻 2026-10-05 (#1567) 선택 · 발송 가능 여부 머리에 열 종류(pick · status)를 달아 가운데에 세운다.
   열 종류 폭(0,2,1)에 지지 않도록 `th` 를 붙여 셈을 같게 하고, 이 줄이 뒤에 있어 이긴다 */
.flo-roster-list th.flo-roster-col--pick { width: 44px; }
.flo-roster-list .flo-roster-col--followers { width: 90px; }
.flo-roster-list th.flo-roster-col--sendable { width: 112px; }
.flo-roster-list .flo-roster-col--source { width: 84px; }
.flo-roster-list .flo-roster-col--via { width: 150px; }
/* 🔻 2026-10-06 (#1585) 112 → 160 · 날짜와 시각 열 종류(`datetime`)의 폭이다. 112 에서는 「2026-10-05 10:38」이 행마다 두 줄로 접혔다 */
.flo-roster-list .flo-roster-col--added-at { width: 160px; }

/* ── 관심목록 하트 (이슈 #919) ────────────────────────────────────────
 |
 | 🧑 **2026-08-27 지시** — *"페이지에서 내가 관심목록으로 담은 인플루언서가 없음."*
 |
 | 🔑 **채워진 하트 = 어느 그룹에든 담겨 있다.** 어느 그룹인지는 **글자로 함께** 적는다 —
 |    🚫 색 하나로만 말하지 마라(몇 개의 그룹인지 알 수 없다).
 | 🚫 선택 상자와 같은 모양으로 만들지 마라 — **고른 사람과 담은 사람은 다른 것**이다.
 */
.flo-main .flo-bookmark { display: inline-flex; align-items: center; gap: 8px; min-width: 0; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
/*
 | 🔻 2026-09-28 (#1511) 「담기 전」 글자색을 올렸다.
 |
 | 🚨 `--flo-line-strong`(#d1d6db) 는 흰 바탕 1.46:1 이라, 그림 요소(하트 글리프) 기준
 |    3:1 에 크게 못 미쳤다. 「담을 곳 없음」(`--flo-line`, #e5e8eb) 과도 1.1:1 밖에
 |    갈리지 않아 두 상태가 눈으로 구분되지 않았다(8차 검증 실측).
 | 🔑 새 값을 짓지 않는다(R-307). 그림 요소 3:1 기준을 위해 이미 만든
 |    `--flo-sort-idle`(#7c8794, 흰 바탕 3.65:1)를 쓴다.
 */
/* 🔻 2026-09-29 (#1530 독립 검토) 15px → 16px · 아이콘 글리프 눈금(같은 하트를 쓰는 flo-float-pick__mark 도 참고) */
.flo-main .flo-bookmark__toggle {
    flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
    border: 0; border-radius: 50%; background: transparent;
    color: var(--flo-sort-idle); font-family: inherit; font-size: 16px;
    line-height: 1; cursor: pointer;
}
.flo-main .flo-bookmark__toggle:hover { background: var(--flo-line-soft); color: var(--flo-ink-3); }
/* 🔑 담겨 있다 — 색과 함께 **글자**가 따라온다 */
.flo-main .flo-bookmark__toggle.is-on { color: var(--flo-primary); }
.flo-main .flo-bookmark__toggle.is-on:hover { background: var(--flo-primary-soft); color: var(--flo-primary); }
/* 🔑 담을 곳이 없다. 🚫 눌러도 아무 일이 없는 단추다. 위 「담기 전」보다 옅게 두어 눌러도 소용없음을 비춘다 */
.flo-main .flo-bookmark__toggle.is-off { color: var(--flo-line-strong); cursor: default; }
/*
 | 🆕 2026-10-11 (#1616) 글자 하트(U+2665)를 선 아이콘(`x-icon name="heart"` · 16)으로 바꿨다.
 |    글꼴마다 하트 크기와 높이가 달라 24 칸 가운데에서 떠 보였다.
 | 🔑 담김(`is-on`)은 채운 하트, 담기 전과 담을 곳 없음은 선 하트다 · 색에 더해 모양으로도 가른다.
 |    누름 자리(24 칸 + `--flo-hit` 넓힘) · 이름표 · `title` 은 그대로다.
 */
.flo-main .flo-bookmark__toggle { display: inline-grid; place-items: center; }
.flo-main .flo-bookmark__toggle.is-on .flo-icon { fill: currentColor; }
/*
 | 🔻 **2026-08-27 (#926)** — 🔻 ~~그룹 이름을 글자로 늘어놓는다~~ 는 폐기됐다.
 |    **계정 칸을 밀어 계정명이 잘렸다**(실측). 이름은 하트의 `title` 이 알려 준다.
 | 🔑 **여러 그룹일 때만 개수**를 붙인다 — 🚫 색 하나로만 말하지 마라.
 */
.flo-main .flo-bookmark__count {
    flex: 0 0 auto; min-width: 14px; text-align: center;
    color: var(--flo-primary); font-variant-numeric: tabular-nums;
}

/* 카드 보기 — 🔑 선택 상자 아래에 나란히 둔다. 🚫 이름 위로 올리지 마라(이름이 잘린다) */
.flo-main .flo-card__heart .flo-bookmark__toggle {
    background: rgba(10, 20, 16, .5); color: rgba(246, 242, 233, .7);
}
.flo-main .flo-card__heart .flo-bookmark__toggle.is-on { color: var(--flo-primary-brt); }
/* 🚫 카드에서는 개수를 적지 마라 — 사진 위라 글자가 묻힌다. `title` 이 알려 준다 */
.flo-main .flo-card__heart .flo-bookmark__count { display: none; }

/* 글자 농도 — 🔑 크기는 그대로 두고 색만 낮춘다. 🚫 `flo-t-caption` 으로 대신하지 마라(크기가 바뀐다) */
.flo-main .flo-t-sub { color: var(--flo-ink-2); }
.flo-main .flo-t-faint { color: var(--flo-ink-3); }

/* ═══ 🚨 체크상자·라디오가 보이지 않던 것 (이슈 #673 · 2026-08-26) ═══════
 |
 | 🚨 **킷 `common.css` 에 `input { appearance: none }` 이 있다.** 낱개 요소 규칙이라
 |    **모든 입력칸**에 걸리고, 체크상자·라디오는 크기를 스스로 갖지 못해
 |    **0×0 으로 접힌다.** 오류도 경고도 없고 화면은 200 으로 뜬다.
 |
 | 🚨 **실측** — 인플루언서 검색의 「이메일 있음」·「제한 없음」과 **표의 행 선택칸이
 |    전부 보이지 않았다.** 목록 첫 칸이 통째로 비어 있어 **아무도 고를 수 없었고**,
 |    그래서 담기 버튼의 「선택 0명」이 영원히 0 이었다.
 |
 | 🔑 킷 자신은 이 상태를 전제한다 — `.checkbox-wrap input + label` 이 라벨에
 |    동그라미를 그려 **일부러 입력칸을 숨긴다.** 그 부품 안에서는 되살리면 안 된다.
 | 🚫 `common.css` 를 고치지 마라 — 킷 원본이다 (R-306). 우리 층에서 되돌린다.
 */
/*
 | 🚨 **`.flo-main` 으로 좁히지 마라.** 운영자 셸만 그 이름을 갖는다 —
 |    참여 폼·거절 화면(`body.flo-public`)과 진입 화면(`body.flo-entry`)도
 |    **같은 `common.css` 를 부른다.** 좁히면 **인플루언서가 동의 상자를 볼 수 없다.**
 | 🔑 `flo-app.css` 는 세 레이아웃 모두에서 `common.css` 뒤에 온다 — 요소 선택자로 충분하다.
 */
input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: auto;
    appearance: auto;
    width: 16px; height: 16px; margin: 0;
    accent-color: var(--flo-primary);
    cursor: pointer;
}
/* 🔑 킷 부품 안에서는 라벨이 대신 그린다 — 여기서 되살리면 표시가 둘로 보인다 */
.checkbox-wrap input[type="checkbox"],
.radio-box-wrap input[type="radio"],
.basic-radio-box input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 0; height: 0;
}
/*
 | 🆕 **라벨이 그린 상자에 초점 고리를 그린다** (2026-10-16 · 이슈 #1772 · 정본 125- 「초점 고리」).
 |
 | 🚨 바로 위 규칙으로 입력칸이 0×0 이라, 본문 초점 고리가 4px 점으로만 보였다(편집기 링크 창 「새창으로 열기」).
 | 🔑 고리는 라벨이 그리는 상자(`::before`)가 갖고, 0×0 입력칸의 점은 걷는다. 색과 굵기는 본문 고리와 같다.
 | 🔑 `.checkbox-wrap` 을 쓰는 곳은 지금 Summernote 링크 창 하나다(`summernote-lite.js` 의 checkbox).
 */
.checkbox-wrap input[type="checkbox"]:focus-visible { outline: none; }
.checkbox-wrap input[type="checkbox"]:focus-visible + label::before { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/*
 | 🔻 **2026-08-27 (#899) 걷었다.** 검색 조건이 드롭다운을 쓰지 않게 되어
 |    (🧑 지시) **부르는 마크업이 없어졌다.** 정렬처럼 사유가 붙는 항목의 폭 문제는
 |    이제 `.flo-pick` 이 칩으로 감싸 생기지 않는다.
 */

/* ═══════════════════════════════════════════════════════════════════════
 | 카드 보기 — 격자 · 카드 한 장 · 사진 자리 · 보기 전환 (이슈 #636)
 |
 | 🧑 2026-08-26 «일단 dummy로 이미지 넣어서라도 구현해봐».
 | 🔑 목록 보기와 **같은 결과를 다르게 그릴 뿐**이다.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── 격자 — 🚫 열 수를 숫자로 박지 마라 ──────────────────────────────
 |
 | 🚨 열 수를 박으면 **넓은 창에서만 맞는다.** 좁은 창에서 카드가 179px 까지
 |    줄어 `참여율 3.4%` 의 `%` 와 `@계정 · 플랫폼` 의 플랫폼이 잘리는데,
 |    **오류가 나지 않아 아무도 모른다**(실측).
 | 🔑 **카드 한 장의 하한만 정하고 창이 열 수를 정한다.** 하한은 240px 이다 —
 |    1440px 에서 4열(283px) · 1024px 에서 3열(243px) 이 되어 어느 창에서도
 |    글자 하한(220px) 위에 있다.
 | 🚫 하한을 220px 으로 내리지 마라 — 글자는 살지만 넓은 창에서 5열이 되어
 |    카드가 224px 로 하한에 바짝 붙는다.
 */
.flo-main .flo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 카드 한 장 ──────────────────────────────────────────────────────
 |
 | 🚫 **번짐 있는 그림자를 쓰지 마라** (🧑 2026-08-25 «바꿔»). 마우스 올림은
 |    **고리를 진하게 + 1픽셀 떠오름** 이다. 둘 중 하나만 두면 잘 읽히지 않는다.
 | 🚫 약하다는 이유로 그림자를 되살리지 마라 — 더 필요하면 고리를 굵히는 쪽을 먼저 본다.
 | 🚨 선택 표시를 **고리 색만으로** 하지 마라 — 세 상태의 고리 굵기가 같아 색 하나로
 |    말하는 셈이 된다. 상자의 체크 표시가 색과 무관한 표식으로 함께 간다.
 */
.flo-main .flo-card {
    display: flex; flex-direction: column;
    background: var(--flo-card);
    border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius-card); /* 🔻 2026-10-05 (#1565) ~~10~~ → 12 */
    overflow: hidden;
    transition: border-color 120ms ease, transform 120ms ease;
}
.flo-main .flo-card:hover { border-color: var(--flo-ink-3); transform: translateY(-1px); }
/* 🔑 고른 카드는 바닥 한 단계 + 진한 고리 — 체크 표시가 함께 보인다 */
/*
 | 🔻 2026-10-06 (🧑 결정 · #1582) 카드 전체를 눌러 고른다. 고른 모양을 선택 카드(`flo-pick-card`)와 같게 한다:
 |    보라 테두리 + 바깥선 2(`--flo-primary-soft`) + 모서리 쪽 체크 표시(`flo-card__check`). ~~바닥 한 단계(`--flo-primary-soft`)~~ 는
 |    앱의 다른 고른 상태에 없어 걷었다. 색 하나로만 말하지 않는다는 위 원칙은 체크 표시가 진다.
 */
.flo-main .flo-card:has(.flo-card__pick:checked) {
    border-color: var(--flo-select-border);
    box-shadow: 0 0 0 2px var(--flo-select-ring);
    background: var(--flo-select-fill);
}
/* 🔻 2026-10-11 (#1630 · 🧑 「하나로 통일 (권장)」) 고른 모양은 모든 고르는 것이 한 벌이다. ~~위 🧑 #1582 「카드에는 바탕을 깔지 않는다」~~ 를 덮는다(가장 옅은 단계 바탕) */
/* 🔑 움직임을 줄이도록 설정한 사람에게는 떠오름을 끈다 — 고리는 그대로 남는다 */
@media (prefers-reduced-motion: reduce) {
    .flo-main .flo-card { transition: border-color 120ms ease; }
    .flo-main .flo-card:hover { transform: none; }
}

/* ══ 에디토리얼 탤런트 카드 ═══════════════════════════════════════════
 |
 | 정본 **FLO 디자인킷** `02-인플루언서-검색.md` 12장 (이슈 #709).
 | 🧑 2026-08-26 *"사진 없으면 이거라도 해"* — **사진 없이도 성립하는 모양**이다.
 |
 | 🔑 킷은 `#sub.rwd .ir-*` 로 적혀 있고 자기 변수를 따로 선언한다. 여기서는
 |    **우리 토큰으로 옮겨** 적는다 — 같은 값을 두 이름으로 부르지 않기 위해서다.
 */
/*
 | 🔻 **2026-09-29 (#1527 · H26) 테두리를 되살렸다.**
 |
 | 🚨 **바로 위 주석의 🧑 결정은 「그림자 대신 고리」였는데, 이 줄은 그 고리까지
 |    지웠다.** 사진 자리(`.flo-card__viz`)는 배경이 어두워 위쪽 경계는 보이지만,
 |    숫자 줄 아래는 흰 판과 같은 색이라 **카드 아래쪽 가장자리가 통째로 사라졌다.**
 | 🔑 기본 `.flo-card` 와 같은 값을 그대로 쓴다. 새 값을 짓지 않는다(R-307 ③).
 |    호버(`.flo-card:hover`)의 고리 짙어짐도 이 클래스가 `.flo-card` 를 함께 달고
 |    있어 그대로 이어진다.
 */
.flo-main .flo-card--talent { border: 1px solid var(--flo-line); border-radius: 6px; }
/*
 | 🆕 2026-10-09 (#1601) 카드 한 장이 격자의 두 줄(사진 판 · 숫자 판)을 나눠 쓴다(`subgrid`).
 |    같은 줄의 카드는 사진 판 높이와 숫자 판 시작선이 정확히 같다. 이름이 두 줄인 카드가 있어도 줄 전체가 함께 맞춰진다.
 |    `row-gap: 0` 은 카드 안 두 판 사이를 붙인다. 카드와 카드 사이 16px 은 격자(`.flo-card-grid`)의 간격 그대로다(실측 370 = 354 + 16).
 */
.flo-main .flo-card--talent { display: grid; grid-template-rows: subgrid; grid-row: span 2; row-gap: 0; }

/* ── 사진 자리 — 어둡게 깔고 이름을 얹는다 ────────────────────────────
 |
 | 🔑 **사진이 없어도 빈 상자로 보이지 않게** 하는 것이 이 판의 목적이다.
 |    사본이 생기면 이 위에 얹힌다.
 | 🚨 세로를 낮게 잡는다(4:2.05) — 카드의 주인공은 **사진이 아니라 숫자**다.
 */
/*
 | 🆕 2026-10-09 (#1601) 이름이 두 줄이 되어 판에 다 들어가지 않으면 판이 내용만큼 자란다(`min-height: min-content`).
 |    같은 줄의 카드는 사진 판 높이를 함께 쓴다(아래 `.flo-card--talent` 의 `subgrid`). `align-self: stretch` 를
 |    빼지 마라. 비율(`aspect-ratio`)을 가진 칸은 기본값이 늘이지 않는 것이라 한 장만 자란다.
 */
.flo-main .flo-card__viz {
    position: relative; aspect-ratio: 4 / 2.05; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    color: #f6f2e9;
    align-self: stretch; min-height: min-content;
}
/*
 | 🔻 2026-10-26 (#1864 · 🧑 좌측 시안 「ㅇㅇ ㄱㄱ」) 이름이 한 줄로 고정돼 판 높이를 비율이 아니라 150 으로 둔다.
 |    ~~`aspect-ratio: 4 / 2.05`~~ 는 좁은 카드(224)에서 115 가 되어 위 줄(분류 · 등급)과 아래 원(56)이 붙었다.
 */
.flo-main .flo-card--talent .flo-card__viz { aspect-ratio: auto; min-height: 150px; }
/*
 | 🆕 2026-10-26 (#1864) 판 배경 사진. ① 최신 게시물 사진은 살짝(6px) 흐린다. 480×480 이라 깨지지 않고, 글자가 든 게시물도
 |    글자가 읽히지 않을 만큼만 흐린다(3px 시안에서 배경 글자가 이름과 겹쳐 읽혔다).
 |    ② 게시물 사진이 없으면 프로필 사진을 크게 흐리고 보라를 덮는다. 100×100 원본이라 결만 남긴다.
 |    🔑 가장자리가 흐려 비지 않게 판보다 조금 크게 깐다(`inset` 음수). 그늘(`::after`)이 그 위에 깔려 이름이 읽힌다.
 */
.flo-main .flo-card__backdrop {
    position: absolute; inset: -12px; z-index: 0; width: calc(100% + 24px); height: calc(100% + 24px);
    object-fit: cover; filter: blur(6px) brightness(.85);
}
.flo-main .flo-card__backdrop--profile { inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); filter: blur(22px) saturate(.7) brightness(.7); }
.flo-main .flo-card__viz:has(.flo-card__backdrop--profile)::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(180deg, rgba(58, 47, 107, .55), rgba(28, 22, 48, .75));
}
/* 🔑 세 가지를 돌려 쓴다 — 같은 판이 스무 장 이어지면 한 덩어리로 보여 경계를 못 읽는다 */
.flo-main .flo-card__viz--a {
    background: radial-gradient(120% 90% at 18% 8%, rgba(109, 91, 199, .55) 0%, rgba(109, 91, 199, 0) 55%),
                linear-gradient(155deg, #1c2028 0%, #201a34 55%, #3a2f6b 100%);
}
.flo-main .flo-card__viz--b {
    background: radial-gradient(130% 80% at 82% 12%, rgba(157, 140, 224, .4) 0%, rgba(157, 140, 224, 0) 52%),
                linear-gradient(200deg, #3a2f6b 0%, #201a34 50%, #16181f 100%);
}
.flo-main .flo-card__viz--c {
    background: radial-gradient(110% 85% at 50% 110%, rgba(109, 91, 199, .5) 0%, rgba(109, 91, 199, 0) 60%),
                linear-gradient(145deg, #20242e 0%, #171a22 60%, #2c2456 100%);
}
/*
 | 🔑 사본은 판 전체를 덮는다 — 아래 그늘이 그 위에 다시 깔려 이름이 읽힌다
 | 🔻 2026-10-26 (#1864 · 🧑 「3으로 가자」) 사진을 판에 깔지 않는다. 인스타그램 원본이 100×100 이라 늘리면 깨졌다.
 |    ~~`.flo-card__photo` 판 전체 덮기~~ → 이름 옆 원형(`.flo-card__avatar`, 아래 이름 줄)
 */
/* 🚫 이 글자를 읽히게 만들지 마라 — 결을 주는 무늬이지 정보가 아니다 */
.flo-main .flo-card__mono {
    position: absolute; top: -10px; right: 4px;
    font-size: 150px; font-weight: 700; line-height: 1; letter-spacing: -.05em; /* 🔻 2026-10-14 (#1737) 굵기 ~~800~~ → 700 · 크기 150 은 무늬라 예외(125-) */
    color: rgba(246, 242, 233, .09);
    user-select: none; pointer-events: none;
}
/* 🚨 아래에서 위로 어두워지는 그늘 — 없으면 밝은 사진 위에서 이름이 사라진다 */
.flo-main .flo-card__viz::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(10, 14, 12, .82) 0%, rgba(10, 14, 12, .25) 42%, transparent 68%);
}

.flo-main .flo-card__vtop {
    position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    padding: 12px 16px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~13px 14px~~ · 카드 몸(16)과 같은 내용선 */
    display: flex; align-items: center; justify-content: space-between; gap: 8px; /* 🔻 2026-10-06 (#1584) ~~align-items: flex-start~~ · 고르는 고리(24) · 카테고리(18) · 등급 배지의 가운데를 맞춘다 */
}
/* 🆕 2026-10-06 (🧑 · #1584) 고르는 자리 · 사진 판 왼쪽 위. 카테고리는 그 오른쪽(8)에서 시작하고 등급 배지는 오른쪽 끝 그대로다 */
.flo-main .flo-card__select { display: inline-flex; align-items: center; } /* 🔻 2026-10-11 (#1640) ~~flex: none · 사진 판 왼쪽 위 줄 안~~ → 카드 몸으로 옮겼다 */
html.flo-js .flo-main .flo-card__select { position: absolute; top: 16px; right: 16px; z-index: 2; } /* 스크립트가 있을 때만 떠 있다 · 없으면 흐름 안의 보이는 상자다 */
.flo-main .flo-card__body { position: relative; }
.flo-main .flo-card__cat {
    min-width: 0; margin-right: auto; /* 🆕 2026-10-06 (#1584) 고르는 자리 다음에서 남은 폭을 쓰고 넘치면 말줄임 · 🔻 2026-10-11 (#1640) 고르는 자리는 카드 몸 오른쪽 위로 옮겨, 지금은 맨 앞에서 남은 폭을 쓴다 */
    font-size: 13px; font-weight: 700; letter-spacing: 0; line-height: var(--flo-lh-caption); /* 🔻 2026-10-05 (#1567) ~~1.3~~ · 🔻 2026-10-06 (#1587 B) 자간 ~~.16em~~ → 0. 킷의 영문 대문자용 자간이 한글 「피 트 니 스」를 낱자로 흩었다 */
    color: #f6f2e9; text-transform: uppercase;
    border-left: 2px solid var(--flo-primary-brt); padding-left: 8px; /* 🔻 2026-10-14 (#1739) ~~7~~ */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flo-main .flo-card__tier {
    display: inline-flex; align-items: center; flex: none;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; /* 🔻 2026-10-14 (#1737) 굵기 ~~800~~ */
    color: #f6f2e9; background: rgba(10, 20, 16, .5);
    border: 1px solid rgba(246, 242, 233, .28); border-radius: 4px; padding: 4px 8px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~반경 3 · 5px 9px~~ */
}
/*
 | 🔑 상자는 티어 배지 아래에 둔다. 위에 두면 배지와 겹쳐 둘 다 누르기 어렵다
 |
 | 🔻 2026-09-29 (#1530 독립 검토) 42px → 50px. 티어 배지 글자를 10px → 13px 로 올리며
 |    배지 높이가 늘어 42px 에서 상자와 1px 겹쳤다(실측). 8px 를 더해 다시 벌린다.
 */
.flo-main .flo-card__acts { position: absolute; top: 50px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 4px; }
.flo-main .flo-card__pick { background: var(--flo-card); border-radius: 3px; }
/*
 | 🆕 **카드 전체를 눌러 고른다** (2026-10-06 · 🧑 결정 · 이슈 #1582 · 정본 125- 「인플루언서 검색 짝 지표 이름 · 카드 눌러 선택」).
 |    🧑 *"인플루언서 검색 카트에 체크박스는 왜 잇는거야"* · 선택 「카드 전체를 눌러 선택」.
 | 🔑 선택 상자는 눈에만 감춘다(`flo-sr-only` 와 같은 값). 초점 · Space · Enter · 낭독 이름은 그대로다.
 |    감추는 규칙은 `html.flo-js` 아래에만 있다 · 스크립트가 없으면 누를 곳이 상자뿐이라 상자가 보인다.
 | 🔑 고른 표시는 하트 왼쪽 24 동그라미(하트 단추와 같은 크기 · 같은 어두운 바탕)다. 고르면 보라 바탕 흰 체크,
 |    마우스를 올리거나 상자에 키보드 초점이 오면 빈 고리라 「누르면 고른다」가 보인다. 하트 자리는 움직이지 않는다.
 | 🔑 키보드 초점은 카드 둘레 고리다(선택 카드 `flo-pick-card` 와 같은 2 · 보라).
 |
 | 🔻 **2026-10-06 (🧑 · #1584) 고른 표시를 하트 왼쪽에서 사진 판 왼쪽 위(`flo-card__select`)로 옮기고 늘 보이게 했다.**
 |    🧑 *"하트 옆에 버튼이 동그라미로 됏는데 이게 어떤 버튼인지 체크해줄럐/ 체크면 위치가 좀 애매한거같아"*
 |    ~~하트 왼쪽 24 동그라미 · 마우스를 올리거나 초점이 올 때만 빈 고리~~ · 하트(담기) 곁에 서서 같은 묶음 단추로 읽혔고,
 |    마우스가 없는 기기에서는 고르기 전까지 아무 표시가 없었다(검토 지적).
 | 🔑 이제 빈 고리(테 2 · 흐린 흰색 .6)가 평소에도 왼쪽 위에 서고, 올리거나 초점이 오면 테가 짙어진다(.95). 고르면 보라 바탕 흰 체크다.
 | 🔑 자리가 늘 차 있어 올림 · 고름에 따라 카테고리 글자가 밀리지 않는다.
 */
.flo-main .flo-card__check { display: none; }
html.flo-js .flo-main .flo-card--talent { cursor: pointer; }
html.flo-js .flo-main .flo-card__pick {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/*
 | 🔻 2026-10-11 (#1640 · 🧑 「카드 보기도 휴대폰 카드 규칙」) ~~사진 판 왼쪽 위 24 네모 상자(평소에도 보이는 빈 고리 · 올림 · 초점에서 짙어짐)~~ 를 걷었다.
 |    고르지 않은 카드에는 상자가 없고 카드 전체가 누름 자리다. 고른 카드는 보라 테두리 · 바깥선 · 바탕에 더해 작은 체크 표지(20)가 선다(휴대폰 검색 카드와 한 벌).
 |    표지는 카드 몸 오른쪽 위다(사진 판의 등급 배지 · 하트와 겹치지 않는다). 상자는 눈에만 감추고 초점은 받는다(위 `clip`).
 */
html.flo-js .flo-main .flo-card__check {
    display: none; width: 20px; height: 20px; place-items: center; box-sizing: border-box; border-radius: 50%;
    background: var(--flo-primary); box-shadow: 0 0 0 2px var(--flo-select-fill); color: #fff;
}
html.flo-js .flo-main .flo-card__check > svg { width: 14px; height: 14px; }
html.flo-js .flo-main .flo-card__pick:checked ~ .flo-card__check { display: grid; }
html.flo-js .flo-main .flo-card--talent:has(.flo-card__pick:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

.flo-main .flo-card__nameblock { position: relative; z-index: 3; width: 100%; padding: 0 16px 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~0 14px 14px~~ · 카드 몸(16)과 같은 내용선 */
/*
 | 🆕 2026-10-26 (#1864 · 🧑 좌측 시안 「ㅇㅇ ㄱㄱ」) 이름 왼쪽에 원(56)을 늘 둔다. 사진이 없으면 원 안에 머리글자다.
 |    🔑 이름이 한 줄이라 원의 위치가 카드마다 같다(두 줄 이름에서는 원이 위아래로 흔들렸다 · 🧑 「원 위치가 달라지고」).
 |    🔑 흰 테두리가 사진과 배경을 가른다. 머리글자 원은 연보라(목록형 이니셜과 같은 톤)이고 글자는 카드가 고른 머리글자(`monogram()`)다.
 */
.flo-main .flo-card__nameblock { display: flex; align-items: center; gap: 12px; }
.flo-main .flo-card__nametext { min-width: 0; flex: 1; }
.flo-main .flo-card__avatar {
    border-radius: 50%; border: 0; font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title);
    background: var(--flo-violet-100); color: var(--flo-violet-600);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .95); /* 🚫 번짐 있는 그림자를 더하지 마라(CardVisualTest · 카드에 그림자 없음) */
}
/* 🚫 긴 이름을 두 줄로 흘리지 마라 — 카드 높이가 서로 달라져 격자가 어긋난다 */
/*
 | 🔻 2026-10-09 (#1601 · 🧑 「이름 두 줄 허용 (권장)」) 위 금지를 거두고 두 줄까지 흘린다.
 |    ~~`white-space: nowrap` 한 줄 말줄임 · 줄 높이 .94~~ → 두 줄 말줄임(`line-clamp: 2`) · 줄 높이 토큰 24(`--flo-lh-card`).
 |    .94 는 한 줄 전제의 예외값이라 두 줄에서는 글자가 맞닿는다. 비율 숫자는 검사(`LineHeightScaleGuardTest`)가 막는다.
 |    1440 의 4열(이름 칸 224px)에서 30장 중 7장이 「데모 협력 크리에이터 …」로 똑같이 잘려 사람을 가를 수 없었다.
 | 🔑 카드 높이는 사진 판이 맞춘다. 아래 `.flo-card__viz` 의 `flex-grow` 를 본다.
 | 🔻 2026-10-09 (#1602 독립 검토) 위 줄은 낡았다. ~~`.flo-card__viz` 의 `flex-grow`~~ →
 |    지금은 카드가 `grid-template-rows: subgrid`(`.flo-card--talent`, 위 격자의 두 줄)를 쓰고 사진 판이 `align-self: stretch` 로
 |    같은 줄 카드의 사진 칸 높이를 함께 받는다. 이름이 두 줄이 되어도 같은 줄 카드의 높이가 맞는 까닭이 그것이다.
 */
.flo-main .flo-card__name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; margin: 0;
    font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); letter-spacing: -.03em; /* 🔻 2026-10-14 (#1737) ~~24/800/24~~ → 22/700/30 · 줄 높이 비율 1.0 이던 자리 */
    color: #f6f2e9; text-decoration: none; text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
    overflow: hidden; word-break: keep-all; overflow-wrap: anywhere;
    /*
     | 🆕 2026-10-09 (#1601) 오른쪽에 하트 자리를 비운다. 두 줄 이름의 첫 줄이 하트(`.flo-card__acts` · 위 50 · 오른쪽 12 · 24)
     |    밑으로 들어갔다(1440 실측, 띄어쓰기 없는 긴 이름). 28 = 오른쪽 12 + 하트 24 + 틈 8 - 이름 판 안여백 16.
     */
    padding-right: 28px;
}
.flo-main .flo-card__name:hover { text-decoration: underline; }
/*
 | 🔻 2026-10-26 (#1864) 이름은 한 줄 말줄임(`…`)이다. ~~두 줄(#1601)~~ 은 원의 위치를 흔들었다. 전체 이름은 `title` 이 보인다.
 |    크기는 카드 제목 16/24(125- 눈금)다. ~~22/30~~ 은 원 옆 좁은 칸에서 너무 일찍 잘렸다.
 |    하트(위 50 · 높이 24)가 이름 줄(판 아래쪽)과 겹치지 않아 오른쪽 비움(`padding-right`)을 거둔다.
 */
.flo-main .flo-card--talent .flo-card__name {
    display: block; white-space: nowrap; text-overflow: ellipsis; -webkit-line-clamp: unset; line-clamp: unset;
    font-size: 16px; line-height: var(--flo-lh-card); padding-right: 0;
}
.flo-main .flo-card--talent .flo-card__handle { margin-top: 2px; }
.flo-main .flo-card__handle {
    display: flex; align-items: center; gap: 8px; margin: 8px 0 0; min-width: 0; /* 🔻 2026-10-05 (#1565) ~~6~~ */
    font-size: 13px; font-weight: 600; color: rgba(246, 242, 233, .74);
}
/* 🚨 플랫폼이 잘리면 가장 나쁘다 — 카드에는 플랫폼 열이 따로 없어 이 줄이 유일한 표시다 */
.flo-main .flo-card__handle > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flo-main .flo-card__handle > span:last-child { flex: none; }

/* ── 숫자 줄 ─────────────────────────────────────────────────────── */
.flo-main .flo-card__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 13 · 16px 16px 17px~~ */
/* 🔑 라벨과 숫자를 한 덩어리로 묶는다 — 사이 여백은 숫자 쪽이 갖는다 */
.flo-main .flo-card__reach { min-width: 0; }
.flo-main .flo-card__reach-lbl {
    font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: uppercase; /* 🔻 2026-10-06 (#1587 B) 자간 ~~.14em~~ → 0(한글 이름표) */
    color: var(--flo-ink-3);
}
/* 🔑 카드에서 가장 큰 글자다 — 운영자가 카드를 고르는 근거가 이 숫자다 */
.flo-main .flo-card__reach-num {
    margin-top: 4px; /* 🔻 2026-10-05 (#1565) ~~5~~ */
    font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); letter-spacing: -.02em; /* 🔻 2026-10-14 (#1737) 굵기 ~~800~~ → 지표 숫자 26/600 */ /* 🔻 2026-10-05 (#1567) ~~1~~ · 지표 숫자 26/32 */
    color: var(--flo-primary-deep);
}
/* 🚨 실시간이 아님을 밝히는 자리다 — 🚫 지우지 마라. 지우면 지금 이 순간의 수로 읽힌다 */
.flo-main .flo-card__snap {
    font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none;
    color: var(--flo-ink-3); background: var(--flo-line-soft);
    padding: 2px 4px; border-radius: 4px; margin-left: 4px; vertical-align: middle; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~1px 5px · 반경 3~~ */
}
/* 🔑 자릿수로 잰 규모 막대 — 너비는 행마다 달라 마크업이 정한다 */
.flo-main .flo-card__scale { height: 4px; border-radius: 999px; background: var(--flo-line-soft); overflow: hidden; }
.flo-main .flo-card__scale i {
    display: block; height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, var(--flo-primary) 0%, var(--flo-primary-brt) 100%);
}

.flo-main .flo-card__mini {
    display: flex;
    border-top: 1px solid var(--flo-line-soft); border-bottom: 1px solid var(--flo-line-soft);
}
.flo-main .flo-card__mini > div {
    flex: 1; min-width: 0; padding: 8px 4px; text-align: center; /* 🔻 2026-10-14 (#1739 · 화면별 세부) ~~9px 2px~~ → 4px 격자 */
    border-right: 1px solid var(--flo-line-soft);
}
.flo-main .flo-card__mini > div:last-child { border-right: none; }
/* 🔻 2026-09-29 (#1530 독립 검토) 13.5px → 14px · 본문 눈금(T4)에 맞춘다 */
.flo-main .flo-card__mv { font-size: 14px; font-weight: 700; color: var(--flo-ink-1); letter-spacing: -.01em; }
.flo-main .flo-card__ml {
    display: block; margin-top: 4px; /* 🔻 2026-10-05 (#1565) ~~3~~ */
    font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--flo-ink-3); /* 🔻 2026-10-06 (#1587 B) 자간 ~~.06em~~ → 0(한글 이름표) */
}

.flo-main .flo-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* 🔑 연락이 되는 계정은 채운 바닥으로 눈에 띈다 — 그것이 이 화면의 목적이다 */
.flo-main .flo-card__mail {
    display: inline-flex; align-items: center; gap: 8px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 6 · 6px 11px~~ */
    font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 4px;
}
/* 🔻 2026-10-12 (#1660 · 🧑 「이메일 있음이랑 이메일 없음 위치가 좀 애매하지않나?」) ~~있음 = 보라 채움 알약 · 없음 = 점선 테두리 알약(칸 모양이 둘)~~ → 같은 자리 · 같은 모양이다. 메일 그림 + 글자 한 줄이 바닥 왼쪽에 늘 서고, 있음은 그림이 제품 색 · 글자가 진하고, 없음은 둘 다 옅다(색으로만 가른다 · 실패색은 쓰지 않는다) */
.flo-main .flo-card__mail { padding: 0; border-radius: 0; font-weight: 600; }
.flo-main .flo-card__mail .flo-icon { flex: none; }
.flo-main .flo-card__mail--ok { background: transparent; color: var(--flo-ink-1); }
.flo-main .flo-card__mail--ok .flo-icon { color: var(--flo-primary); }
.flo-main .flo-card__mail--no { background: transparent; color: var(--flo-ink-3); font-weight: 400; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
/* 🚨 출처는 킷에 없지만 뺄 수 없다 (R-809) — 담기 상자 이름이 출처마다 다르다 */
.flo-main .flo-card__src { flex: none; font-size: 13px; font-weight: 600; color: var(--flo-ink-3); }

/* ── 🔻 사진 자리(flo-thumb) 규칙 제거 — 2026-08-28 · 이슈 #712 ────────
 |
 | 이 규칙은 폐기된 부품 x-influencer-thumb(#785)과 표본 무늬(#712)만 썼고,
 | 둘을 걷어내면서 부르는 화면이 0곳이 됐다.
 | 🔑 카드의 사진 자리는 킷의 flo-card__viz · flo-card__mono 가 그린다.
 | 🚫 되살리지 마라 — 되돌리려면 사용자의 정정 지시가 있어야 한다.
 */

/* ── 보기 전환 ───────────────────────────────────────────────────────
 |
 | 🔻 **2026-08-27 (#897) 🧑 지시로 글자로 되돌렸다** — *"목록형, 카드형 텍스트로 변경"*.
 |    🔻 ~~#894 에서 아이콘 토글로 바꿨다~~ 는 폐기됐다. 🚫 아이콘으로 되돌리지 마라.
 |
 | 🚨 **킷 규칙(`common.css` `.view-toggle`)을 그대로 쓸 수 없다.** 킷은 `<button>` 을
 |    견주는데 우리 것은 **링크**다 — 보기 방식이 **주소에 실려야** 주소를 공유했을 때
 |    같은 화면이 열린다(#636). 🚫 링크를 단추로 되돌리지 마라.
 |
 | 🚫 색 하나로 지금 무엇인지 말하지 마라 — 굵기와 바닥이 함께 간다.
 */
/* 🔻 2026-10-05 (#1565 · 4px 격자) ~~안여백 3 · 칸 줄 높이 26(전체 34)~~ → 4 · 28(전체 38). 옆 쪽 크기 상자(38)와 높이가 같다 */
.flo-main .flo-viewtoggle {
    display: inline-flex; padding: 4px; gap: 2px;
    border: 1px solid var(--flo-line); border-radius: var(--flo-radius);
    background: var(--flo-line-soft);
}
.flo-main .flo-viewtoggle__item {
    padding: 0 12px; line-height: calc(var(--flo-control-h) - 10px); /* 🔻 2026-10-05 (#1565) ~~26~~ 🔻 (#1567) ~~28~~ · 전체가 칸 높이(40)와 같다 */
    border-radius: 4px; font-size: 13px; color: var(--flo-ink-2); text-decoration: none;
}
.flo-main .flo-viewtoggle__item:hover { color: var(--flo-ink-1); text-decoration: none; }
.flo-main .flo-viewtoggle__item.is-current {
    background: var(--flo-card); color: var(--flo-ink-1); font-weight: 600;
    box-shadow: 0 0 0 1px var(--flo-line);
}


/* ═══════════════════════════════════════════════════════════════════════
 | 보조 글자색 — 인라인 `style` 을 대신한다 (이슈 #680 · R-307)
 |
 | 🚨 **화면 256곳이 `style="color: var(--ink-600);"` 를 달고 있었다.** 인라인은
 |    스타일시트가 이길 수 없어, **디자인을 바꿔도 그 글자만 옛 색으로 남는다.**
 |    주석까지 HTML 에 실려 화면 글자를 견주는 검사와도 부딪힌다.
 |
 | 🔑 **맨 뒤에 둔다.** 인라인은 무엇이든 이겼으므로, 그것을 그대로 옮기려면
 |    이 규칙도 같은 자리를 이겨야 한다. 🚫 위로 올리지 마라 — `.flo-td` 처럼
 |    뒤에 오는 규칙에 져서 **일부 화면만 색이 되돌아간다.**
 | 🔑 **두 이름을 함께 적는다** — 화면 안(`.flo-main`)과 공개 화면 둘 다 쓴다.
 |
 | 🚫 옛 이름(`--ink-600`)을 쓰지 마라 — 그것은 걷어내는 중인 전환용 별칭이다.
 ═══════════════════════════════════════════════════════════════════════ */
.flo-ink-sub,
.flo-main .flo-ink-sub { color: var(--flo-ink-2); }

/* 🔑 같은 색에 굵기만 한 단계 — 값이 없을 때의 `—` 가 이것을 쓴다 */
.flo-ink-sub--medium,
.flo-main .flo-ink-sub--medium { color: var(--flo-ink-2); font-weight: 400; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 · 굵기는 400 · 600 · 700 셋 */

/*
 | 🔻 2026-09-29 (#1530 독립 검토) 연동 설정(`cafe24/integration-settings.blade.php`)의
 |    이름표 두 곳(`w-24 shrink-0 flo-ink-sub`)이 폼 이름표 눈금(14/600) 밖에서 14/400 으로
 |    떠 있었다. ~~🚫 이름표 전용 클래스(`flo-t-label` 등)를 쓸 수 있게 되면 이 규칙은
 |    걷어내라. 지금은 마크업을 고치지 않고 여기서만 맞춘다.~~
 |
 | 🔻 2026-09-30 (#1530 group V, 2차 리드 재검토) 마크업에 `flo-t-label` 을 붙였다.
 |    `.flo-ink-sub` 는 색(`--flo-ink-2`)을 위해 그대로 둔다. 이 조합에서 떼면
 |    이름표가 진한 기본 글자색으로 바뀐다. 거는 자리를 `flo-ink-sub` 에서
 |    `flo-t-label` 로 옮겨 **이름표라서 맞춘다**는 뜻이 되게 한다(우연한 색-유틸리티
 |    조합이 아니라). `w-24` 는 96px 너비 하나만 진다.
 */
.w-24.flo-t-label { font-size: 14px; font-weight: 600; }

/*
 | 🆕 2026-10-06 (#1581) 연동 설정 「시딩 준비 확인」 항목 한 줄.
 |    🧑 *"시딩 준비 확인 여기도 맞음이랑 우측 글자랑 정렬도 안맞고"*
 | 🚨 직전에는 표식(높이 24 상자)이 문단 글자 줄 안에 끼어 이름과 기준선이 어긋났고,
 |    설명 · 확인 시각 · 단추가 표식의 왼쪽 끝에서 시작해 이름과 다른 세로선에 섰다.
 | 🔑 두 칸이다: 표식 | 이름. 표식과 이름은 첫 줄에서 세로 가운데로 맞춘다.
 |    설명 · 시각 · 알림 · 단추(`__body`)는 둘째 칸, 이름의 왼쪽 끝에서 시작한다.
 | 🔑 표식 칸 폭은 세 항목이 함께 쓴다(`subgrid`). 「맞음」·「확인 전」처럼 글자 길이가 달라도
 |    표식이 같은 폭(가운데 정렬)이 되어 표식 · 이름 사이가 늘 12 이고 이름이 한 세로선에 선다.
 | 🔑 항목 사이 16 · 선 · 16. 첫 항목 위는 4(위 알림의 아래 여백 12 와 더해 16).
 */
.flo-main .flo-ready {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 12px;
}
.flo-main .flo-ready__item {
    grid-column: 1 / -1;
    display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-columns: subgrid;
    align-items: center; padding: 16px 0; border-bottom: 1px solid var(--flo-line);
}
.flo-main .flo-ready__item:first-child { padding-top: 4px; }
.flo-main .flo-ready__badge { grid-column: 1; grid-row: 1; justify-self: stretch; justify-content: center; }
.flo-main .flo-ready__name {
    grid-column: 2; grid-row: 1; margin: 0;
    font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); word-break: keep-all;
}
.flo-main .flo-ready__body { grid-column: 2; margin-top: 4px; }
.flo-main .flo-ready__body > p { margin-bottom: 0; }
/* 🆕 2026-10-06 (#1581) 「시딩 상품 분류」 칸 이름표 · 폼 이름표 눈금(14/600)과 같다 */
.flo-main .flo-cat-form__label { font-weight: 600; }
/*
 | 🆕 2026-10-29 (#1927) **링크로 들어온 자리가 잠시 빛난다** · ⑤ 단계 · 요약의 막는 항목 링크가 연동 설정의 그 자리로 온다.
 |    🧑 *"연동 설정에서 뭘 채우라는 건지 모르겠음. 클릭 했을 때 빤짝이는 효과 등으로 가이드라인 있으면 좋을 것 같음."*
 | 🔑 주소의 `#` 이 가리키는 자리(`:target`)만 빛난다 · 스크립트 없이 돈다. 저장 뒤 돌아온 화면은 주소에 `#` 이 없어 빛나지 않는다.
 | 🔑 시작 · 끝 장면을 적지 않는다 · 판(흰 바탕)과 줄(바탕 없음)이 제 바탕에서 시작해 제 바탕으로 돌아간다.
 | 🔑 굴려 세울 때 상단바 밑(`scroll-padding-top`)에서 16 을 더 띄운다 · 빛나는 테두리(바깥 10)가 상단바에 가리지 않는다.
 | 🔑 움직임 줄이기를 켠 사람에게는 깜박이지 않고 테두리만 남긴다.
 */
.flo-main .flo-jump-target { scroll-margin-top: 16px; }
.flo-main .flo-jump-target:target { animation: flo-jump-flash 0.8s ease-in-out 3; }
@keyframes flo-jump-flash {
    50% { background-color: var(--flo-primary-soft); box-shadow: 0 0 0 8px var(--flo-primary-soft), 0 0 0 10px var(--flo-primary-brt); }
}
@media (prefers-reduced-motion: reduce) {
    .flo-main .flo-jump-target:target {
        animation: none;
        background-color: var(--flo-primary-soft); box-shadow: 0 0 0 8px var(--flo-primary-soft), 0 0 0 10px var(--flo-primary-brt);
    }
}

/* 🔑 가로 구분선 — 브라우저 기본 색을 쓰면 화면마다 달라진다 (#693) */
.flo-main hr { border: 0; border-top: 1px solid var(--flo-line); }

/* ══ 화면 위에 뜨는 창 ═══════════════════════════════════════════════
 |
 | 정본 참조는 🧑 2026-08-26 사용자가 준 등록 시안이다 (이슈 #718).
 | ⚠️ **킷에는 이 창의 명세가 없다** — 킷 `02-` 가 «`#influencerRegPopup` 모달
 |    자체는 이 blade에 없다» 고 적어 두었다. 그래서 참조로만 쓴다.
 |
 | 🔑 `<dialog>` 를 쓴다 — 배경 가림·ESC 닫기·초점 가두기가 브라우저에 이미 있다.
 | 🚫 자바스크립트로 창을 새로 만들지 마라 (R-307) — Alpine.js 는 설치돼 있지 않다.
 */
.flo-main .flo-modal,
dialog.flo-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    /*
     | 🆕 2026-10-06 (#1586) 창은 언제나 화면 가운데에 선다. 판의 마지막 자식 여백 규칙
     |    (`:is(.cont-sec, …) > :last-child { margin-bottom: 0 }`)이 판 끝에 둔 창의 아래 여백을 0 으로 만들어,
     |    정산 확정 · 재발송 · 카페24 아이디 삭제 · 상품 선택 창이 화면 아래 끝에 붙어 떴다.
     */
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--flo-card);
    color: var(--flo-ink-1);
    text-align: left; /* 🆕 2026-10-06 (#1585) 행마다 값이 달라 표 칸 안에 둔 창(템플릿 삭제 등)이 칸의 가운데 정렬을 물려받아 본문이 가운데에 섰다 */
    box-shadow: 0 24px 60px -20px rgba(22, 24, 31, .45);
}
/* 🔑 스크립트가 꺼져 있어도 보이게 한다 — 가림막만 없다 */
dialog.flo-modal--open { display: block; }
dialog.flo-modal::backdrop { background: rgba(22, 24, 31, .45); }

/* ── 표가 들어가는 창 ────────────────────────────────────────────────
 |
 | 🆕 이슈 #998 — 관심목록 그룹의 담긴 사람 표를 이 창이 그린다.
 |
 | 🚨 **선택자를 한 벌만 적으면 아무 일도 일어나지 않는다.** 위의 기본 폭이
 |    `.flo-main .flo-modal`(0,2,0) 과 `dialog.flo-modal`(0,1,1) **두 벌**로
 |    적혀 있어, `.flo-modal--wide`(0,1,0) 하나는 **둘 다에게 진다.**
 |    같은 함정을 이 파일이 이미 한 번 겪었다(`.flo-td` 자리).
 | 🔑 좁은 화면에서는 기본과 같은 여백을 남긴다 — `100vw - 32px` 가 상한이다.
 */
.flo-main .flo-modal--wide,
dialog.flo-modal--wide { width: min(1040px, calc(100vw - 32px)); }

.flo-modal__panel { display: flex; flex-direction: column; max-height: calc(100vh - 64px); }
/*
 | 🆕 2026-10-06 (#1586 · 🧑 "모달도 좀 더 가독성 좋고 글자 여백이나 그런것도 좀 더 신경써줘")
 |    창 한 벌의 리듬. 값의 정본은 125 「창(모달)의 리듬」이고 `ModalRhythmGuardTest` 가 지킨다.
 |    안여백 24(좁은 폭 20) · 제목 16/700/24 · 부제 14/22 · 본문 14/22 · 문단 사이 12 ·
 |    단추 줄 위 24 · 단추 40 · 단추 사이 8 · 닫기 32 아이콘 단추.
 | 🔑 창은 판보다 한 단 넓게 띄운다(판 20 → 창 24). 창은 화면 위에 홀로 서는 판이라 숨이 더 필요하다.
 */
/*
 | 🆕 2026-10-06 (#1589 · 🧑 "선만 넣는걸로는 분류가 잘안되는데" · 고른 안 「머리 띠 바탕색」)
 |    제목 · 물음은 바탕색 띠 하나다. 색은 표 머리 띠(`.flo-th`)와 같은 `--flo-line-soft` 이고 새 값을 만들지 않는다.
 |    띠는 창 폭 전체 · 안여백은 창 안여백과 같은 24(640 이하 20) · 위 모서리는 창 반경(12)을 따른다.
 */
/*
 | 🔻 2026-10-06 (#1590 · 🧑 "좋긴한대 살짝 아쉬운대") 띠가 흰 바탕과 거의 같아 가장자리가 보이지 않았다.
 |    ~~`--flo-line-soft` · 안여백 24 사방~~ → 바탕은 `--flo-line-soft` 와 `--flo-line` 의 반반(새 색 값을 적지 않고 두 토큰에서 낸다),
 |    아래 가장자리는 `--flo-line` 1px. 안여백은 위 24 · 좌우 24 · 아래 20(부제 → 띠 끝 20).
 */
/*
 | 🔻 2026-10-06 (#1591 · 🧑 "6번이 괜찮은거 같은데?" · 시안 여덟 가운데 6번 「옅은 그라데이션」)
 |    ~~회색 반반(`--flo-line-soft` · `--flo-line`) · 아래 선 `--flo-line`~~ → 보라 기운에서 분홍 기운으로 가는 아주 옅은 135° 그라데이션.
 |    색 값을 새로 적지 않고 앱 액센트 토큰에서 낸다: 시작 `--flo-primary-soft` 88%(+흰색) ≈ #f1edfb ·
 |    끝 `--flo-accent-pink` 10%(+흰색) ≈ #faf2f7 · 아래 가장자리 `--flo-primary` 15%(+흰색) ≈ #e9e6f7. 대비표는 125- 「창 머리 그라데이션」.
 */
.flo-modal__top {
    flex: none;
    padding: 24px 24px 20px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--flo-primary-soft) 88%, var(--flo-card)) 0%,
        color-mix(in srgb, var(--flo-accent-pink) 10%, var(--flo-card)) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--flo-primary) 15%, var(--flo-card));
    border-radius: 12px 12px 0 0;
}
/* 🆕 (#1591) 창 제목은 깊은 보라(`--flo-primary-deep` · 띠 양 끝에서 10.1 · 10.6:1) */
.flo-main .flo-modal__top .flo-modal__head .flo-t-title,
.flo-modal__top .flo-modal__head .flo-t-title { color: var(--flo-primary-deep); }
.flo-modal__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 0; /* 🔻 2026-10-06 (#1586) ~~20 20 0~~ · 🔻 (#1589) ~~24 24 0~~ → 0. 안여백은 띠(`flo-modal__top`)가 준다 */
}
/* 🚨 닫는 단추가 제목을 밀지 않게 한다 — 제목이 길면 두 줄이 되어야 한다 */
.flo-modal__closer { flex: none; }
/*
 | 🔻 2026-10-06 (#1586) 글리프 `×`(22px) → 32 칸 선 아이콘. 제목 한 줄(24)의 가운데에 선다(위아래 -4).
 |    오른쪽 -8 은 아이콘 획을 본문 오른쪽 끝에 맞추는 값이다(32 칸 안 아이콘 20 의 좌우 빈자리 6 + 2).
 */
.flo-modal__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: -1px -8px -1px 0; padding: 0; /* 🔻 (#1590) 위아래 ~~-4~~ → -2 · 제목 한 줄이 24 에서 28 이 되어 가운데가 2 내려갔다 · 🔻 2026-10-14 (#1737) ~~-2~~ → -1 · 제목 줄이 30 이 되었다 */
    border: 0; border-radius: var(--flo-radius); background: transparent; cursor: pointer; /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    color: var(--flo-ink-2); /* 🔻 (#1591) ~~`--flo-ink-3`~~ · 그라데이션 띠 위에서 흐려 보였다(ink-2 는 띠 양 끝 6.2 · 6.5:1) */
}
.flo-modal__close svg { width: 20px; height: 20px; }
.flo-modal__close:hover { color: var(--flo-ink-1); background: color-mix(in srgb, var(--flo-primary) 12%, transparent); } /* 🔻 (#1591) ~~`--flo-line-strong`~~ · 그라데이션 위에 비치는 보라 12% */ /* 🔻 (#1590) ~~`--flo-line`~~ · 띠가 한 단 진해져 다시 같아 보였다 */ /* 🔻 (#1589) ~~`--flo-line-soft`~~ · 띠 바탕과 같아 올려도 보이지 않았다. 한 단 진한 선 색 */
/* 🔑 초점 표시를 우리 색으로 준다 — 브라우저 기본 점선은 창 모서리에서 어긋나 보인다 */
.flo-modal__close:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; border-radius: var(--flo-radius); } /* 🔻 2026-10-06 (#1586) ~~3px~~ · 4px 격자 */ /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
/*
 | 🔻 2026-10-14 (#1737) 아래 두 줄은 기록이다. 창 제목은 22/700/30, 닫기 단추는 위아래 -1(줄 30 의 가운데).
 | ~~🆕 2026-10-06 (#1590) 창 제목은 18/700 · 줄 28.~~ 16 이면 띠 안에서 부제와 무게가 비슷해 머리를 이끌지 못했다.
 |    ⚠️ 글자 눈금(22/16/14/13)에 없는 값이다. 창 제목 한 자리에만 쓰고 125- 「창 머리 띠 다듬기」에 적었다.
 |    줄 28 은 닫기 단추(32)를 위아래 -2 로 첫 줄 가운데에 맞추려는 값이다(4px 격자 밖 값을 만들지 않는다).
 */
.flo-modal__head .flo-t-title,
.flo-main .flo-modal__head .flo-t-title { font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); word-break: keep-all; } /* 🔻 2026-10-14 (#1737) ~~18/700/28~~ → 쪽 제목 22/700/30. 눈금 밖 값을 걷는다. 16 은 #1590 이 부제와 무게가 비슷하다고 물린 값이라 위 단계로 간다 */
.flo-modal__sub,
.flo-main .flo-modal__sub { margin: 8px 0 0; font-size: 14px; line-height: var(--flo-lh-body); word-break: keep-all; text-wrap: pretty; text-wrap: balance; } /* 🆕 (#1590) 줄을 고르게 나눈다(「…확인한 뒤 / 등록해 주세요.」). balance 를 모르면 pretty */ /* 🔻 2026-10-06 (#1586) ~~8px 20px 0~~ · 부제는 제목에 붙는다 · 🔻 (#1588) 위 ~~4~~ → 8. 4 는 제목에 눌려 붙어 보였다 */
/*
 | 🆕 2026-10-06 (#1588) 되묻는 물음(「정말 종료할까요?」)은 회색이 아니라 본문 색이다. 이 창이 묻는 단 하나의 말이라
 |    설명처럼 흐리면 안 된다. 굵기는 400 이다. 바로 아래 본문 첫 줄이 600 이라 둘 다 굵으면 무게가 겹친다.
 */
.flo-main .flo-modal__sub.flo-modal__sub--ask,
.flo-modal__sub.flo-modal__sub--ask { color: var(--flo-ink-1); } /* 🔻 (#1588 검토) 두 클래스로 적어 `.flo-main .flo-t-sub` 와의 순서에 기대지 않는다 */
/*
 | 🔻 2026-10-06 (#1589) ~~머리와 본문을 가르는 선(`.flo-modal__rule` · 12 · 선 · 16)~~ 은 걷었다. 🧑 "선만 넣는걸로는 분류가 잘안되는데".
 |    머리 띠 바탕색(`.flo-modal__top`)이 대신한다. 부제 좌우 여백(24)도 띠 안여백이 준다(위 `margin: 8px 0 0`).
 |    띠 → 몸 첫 줄은 몸 위 안여백 20 이다.
 */
/* 🔑 긴 폼은 창 안에서만 구른다 — 🚫 화면 전체가 구르게 두지 마라 */
/* 🔻 2026-10-05 (#1565 · 정렬 기준선) ~~18px 22px 22px~~ → 16 20 20. 창 제목 · 부제 · 몸이 한 내용선(20)에 선다 */
/* 🔻 2026-10-06 (#1586) 16 20 20 → 20 24 24. 제목 · 부제 · 몸이 한 내용선(24)에 선다 */
.flo-modal__body { overflow-y: auto; padding: 20px 24px 24px; }
/*
 | 🆕 2026-10-06 (#1586) 창 본문 문단. 줄 높이 22(본문 문단 눈금) · 문단 사이 12 · 한글은 낱말에서 끊는다.
 | 🔑 `p.flo-t-body` 만 잡는다. 표 · 목록 칸을 담은 넓은 창(관심목록 명단 · 상품 선택)의 캡션은 그대로다.
 */
.flo-modal__body p.flo-t-body,
.flo-main .flo-modal__body p.flo-t-body { margin: 0 0 12px; line-height: var(--flo-lh-body); word-break: keep-all; }
.flo-modal__body p.flo-t-body:last-child { margin-bottom: 0; }
/* 🆕 2026-10-06 (#1588) 표 바로 아래 문단이 표 테두리에 붙었다(템플릿 불러오기 창 · 0). 문단 사이와 같은 12 를 둔다 */
.flo-modal__body > .flo-table-block + p.flo-t-body { margin-top: 12px; }
.flo-modal__body p.flo-t-body b,
.flo-modal__body .flo-modal__facts b { font-weight: 600; }
/*
 | 🆕 2026-10-06 (#1586) 결과 목록: 「무엇이 멈추고 무엇이 이어지는가」를 한 줄에 하나씩 차분한 바탕에 모은다.
 |    직전까지 결과 두세 개가 한 문단에 이어 붙어 읽혔다(캠페인 종료 · 취소 · 명세 링크).
 | 🚫 색 글자로 강조하지 마라. 바탕은 회색 한 단이고 글자는 본문 색이다.
 */
.flo-modal__facts {
    display: grid; gap: 8px; /* 항목 사이 8 · 4px 격자. 6 은 격자 밖이고 22 줄 높이에서 4 는 붙어 읽혔다 */
    margin: 0 0 12px; padding: 12px 16px;
    border-radius: 8px; background: var(--flo-bg);
    list-style: none;
}
.flo-modal__facts:last-child { margin-bottom: 0; }
.flo-modal__facts > li {
    position: relative; padding-left: 12px;
    font-size: 14px; line-height: var(--flo-lh-body); color: var(--flo-ink-1); word-break: keep-all;
}
.flo-modal__facts > li::before {
    content: ""; position: absolute; left: 0; top: 10px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--flo-ink-3);
}
/*
 | 🆕 2026-10-06 (#1586) 창 안 한 칸짜리 입력(사유 · 이름). 이름표 14/600 · 칸까지 8 · 칸 40.
 |    직전까지 13px 회색 이름표가 칸에 4px 로 붙거나(종료 · 취소) 8px 로 떨어져(응답 상태) 창마다 달랐다.
 */
.flo-modal__field { display: grid; gap: 8px; margin: 20px 0 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-modal__field input { font-weight: 400; }
/* 🆕 2026-10-06 (#1588) 이름표 굵기가 `label` 기본 규칙에 져 400 으로 그려졌다(종료 · 취소 사유). 이름표 자리에 직접 준다 */
.flo-main .flo-modal__field > label,
.flo-main label.flo-modal__field,
.flo-main .flo-modal__field-name { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
/*
 | 🆕 2026-10-06 (#1586) 창의 단추 줄. 본문에서 24 · 단추 40 · 사이 8 · 오른쪽 끝.
 |    🔻 화면의 폼 단추 줄(선 + 16)과 달리 창에서는 선을 긋지 않는다. 창이 짧아 선이 본문을 둘로 갈라 보였다.
 | 🔑 몸통이 구를 만큼 긴 창(인플루언서 정보 등록)에서도 단추 줄은 창 아래에 남는다(`sticky`).
 |    단추 줄 바탕이 창 바탕과 같아 구르는 글이 그 아래로 지나간다.
 */
.flo-modal__body .flo-form__actions {
    position: sticky; bottom: -24px; z-index: 1;
    margin: 24px 0 -24px; padding: 0 0 24px; border-top: 0;
    background: var(--flo-card);
}
/* 🔑 구르는 글이 단추 줄 밑으로 들어갈 때 흐리게 사라진다 · 글이 없는 창에서는 흰 바탕 위 흰색이라 보이지 않는다 */
/*
 | 🔻 2026-10-06 (#1588) ~~늘 있는 흐림 띠~~ → 글이 단추 줄 밑으로 지나가는 동안에만 위 가장자리(선 1px · 위 16 바탕)를 그린다.
 |    흐림만 있을 때는 「카테고리」 칸이 가장자리 없이 잘려, 단추 줄이 폼 위에 얹힌 것처럼 보였다.
 | 🔑 스크롤 연동 애니메이션(`animation-timeline: scroll()`)이 몸통의 굴림 위치를 읽는다. 끝까지 굴리면(100%) 사라진다.
 |    굴릴 것이 없는 짧은 창은 타임라인이 비활성이라 애니메이션이 걸리지 않고 기본값(보이지 않음) 그대로다.
 |    지원하지 않는 브라우저도 기본값 그대로다(선 없음).
 */
.flo-modal__body .flo-form__actions::before {
    content: ""; position: absolute; left: -24px; right: -24px; top: -16px; height: 16px;
    background: var(--flo-card); border-top: 1px solid var(--flo-line);
    opacity: 0; pointer-events: none;
}
@supports (animation-timeline: scroll()) {
    .flo-modal__body .flo-form__actions::before {
        animation: flo-modal-foot-edge linear both;
        animation-timeline: scroll(nearest block);
    }
}
/* 🔻 (#1588 검토) 스크롤 연동을 모르는 브라우저(Firefox)는 예전처럼 흐림 띠를 늘 둔다. 글이 없으면 흰 바탕 위 흰색이라 보이지 않는다 */
@supports not (animation-timeline: scroll()) {
    .flo-modal__body .flo-form__actions::before {
        opacity: 1; border-top: 0;
        background: linear-gradient(to bottom, transparent, var(--flo-card));
    }
}
@keyframes flo-modal-foot-edge {
    0%, 97% { opacity: 1; }
    100% { opacity: 0; }
}
/*
 | 🆕 (#1588 검토) 창 맨 끝의 단추 줄만 창 아래에 붙고 가장자리를 그린다. 몸통 중간에 있는 작은 폼의 단추 줄
 |    (관심목록 명단 창의 「다른 관심목록에도 저장」 · 담기)은 제자리에 둔다. 붙어 있으면 그 폼이 보이는 동안 창 아래에 떠
 |    지나가는 것이 없는 자리에도 선이 그어졌다(가장자리는 굴림 위치만 읽어 「밑으로 지나가는가」를 모른다).
 */
.flo-modal__body .flo-form__actions:not(.flo-modal__body > .flo-form__actions:last-child, .flo-modal__body > :last-child > .flo-form__actions:last-child, .flo-modal__body > :last-child > :last-child > .flo-form__actions:last-child) {
    position: static; margin-bottom: 0; padding-bottom: 0;
}
.flo-modal__body .flo-form__actions:not(.flo-modal__body > .flo-form__actions:last-child, .flo-modal__body > :last-child > .flo-form__actions:last-child, .flo-modal__body > :last-child > :last-child > .flo-form__actions:last-child)::before {
    content: none;
}
/*
 | 🆕 2026-10-06 (#1586) 좁은 폭(640 이하 · 이 파일의 휴대폰 눈금). 창은 좌우 16 을 남기고 거의 꽉 찬다(`100vw - 32px`).
 |    안여백은 20 으로 한 단 줄이고, 단추는 한 줄을 똑같이 나눠 가진다(취소 | 확정). 엄지가 닿는 넓이다.
 */
@media (max-width: 640px) {
    .flo-modal__top { padding: 20px; } /* 🔻 (#1589) ~~머리 20 20 0 · 부제 · 선 좌우 20~~ → 띠 안여백 20 하나 · (#1590) 부제 → 띠 끝 20 그대로 */
    dialog.flo-modal .flo-modal__body { padding: 20px 20px 20px; } /* 🔻 (#1589) 위 ~~16~~ → 20 · 띠 → 몸 첫 줄 20 */
    .flo-modal__body .flo-form__actions { bottom: -20px; margin-bottom: -20px; padding-bottom: 20px; }
    .flo-modal__body .flo-form__actions::before { left: -20px; right: -20px; }
    /* 🔑 똑같이 나누되 글자보다 좁아지지 않는다 · 긴 단추는 제 폭을 지키고 모자라면 다음 줄로 간다 */
    .flo-modal__body .flo-form__actions .flo-btn { flex: 1 1 0; min-width: max-content; }
}

/*
 | 🔑 **창 안에서 구르는 곳은 하나여야 한다** (이슈 #896).
 |
 | 몸통 안에 **스스로 구르는 칸**(`.flo-scrollpane`)이 있으면 몸통은 구르지 않고
 | 남는 높이를 그 칸에 넘긴다. 창이 짧아져도 막대는 **그 칸 하나**이고, 아래
 | 단추 줄은 **언제나 보인다** — 킷이 단추 줄을 구르는 칸 밖에 둔 것과 같은 결과다.
 |
 | 🚫 표식을 붙인 칸에서 `overflow` 를 떼지 마라 — 몸통도 그 칸도 구르지 않아
 |    목록 아래쪽이 **닿을 수 없는 자리**가 된다.
 */
.flo-modal__body:has(> .flo-scrollpane) { display: flex; flex-direction: column; }
/* 🔑 기본값이면 칸이 내용보다 작아지지 못해 **몸통이 대신 구른다** */
.flo-modal__body > .flo-scrollpane { min-height: 0; }

/* ── 폼 한 벌 ────────────────────────────────────────────────────────
 |
 | 🔑 **이름표와 입력칸을 나란히** 둔다 — 시안이 그렇고, 세로로 쌓는 것보다
 |    창이 짧아져 스크롤이 줄어든다.
 | 🚫 입력칸을 화면 폭 전체로 늘리지 마라 — 직전까지 이메일 한 줄이 1,500px 였다.
 */
.flo-form__section,
.flo-main .flo-form__section { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); } /* 🔻 2026-10-06 (#1588) ~~위 14 · 보라~~ → 절 제목 눈금 16/700/24 · 본문 색. 보라 글자가 링크로 읽혔다 */
/*
 | 🚨 **격자여야 한다.** 가로 배치를 `flex` 로 했더니 **칸마다 줄이 갈렸다** —
 |    도움말이 딸린 칸은 `__control` 로 한 겹 감싸고 아닌 칸은 입력칸이 바로 오는데,
 |    두 구조의 폭 계산이 달라 **어떤 칸은 이름표가 위로 올라갔다.**
 | 🔑 격자는 **자식이 하나든 감싼 것이든 같은 칸에 놓는다.**
 */

/*
 | 🚨 **`word-break: keep-all` 을 빼지 마라** — 없으면 「단가」가 **「단 / 가」로 쪼개진다.**
 |    브라우저는 한글을 글자 단위로 끊는 것이 기본이다.
 */

.flo-field__control { min-width: 0; }
.flo-field__input,
.flo-main .flo-field__input {
    min-width: 0; width: 100%;
    padding: 8px 12px; /* 🔻 2026-10-06 (#1585) ~~8px 11px~~ · 본문 글 칸(8 · 12)과 같은 값 · 4px 격자 */
    border: 1px solid var(--flo-line); border-radius: 6px;
    background: var(--flo-card); color: var(--flo-ink-1);
}
/* 🆕 2026-10-06 (#1585) 폼 칸의 숫자 칸도 짧은 칸 140 을 받는다(125- 「폭 세 단계」). 위 `width: 100%` 가 뒤에 있어 `.flo-control--short` 를 이겼다 */
.flo-field__input.flo-control--short { width: var(--flo-control-w-short); max-width: 100%; }
.flo-field__input:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: -1px; }

/*
 | 🔻 2026-08-27 (#907) — 여기 있던 `.flo-field__help,` 한 줄을 지웠다.
 |
 | 🚨 뒤에 규칙 본문이 없어 **아래 `.flo-form__actions` 와 한 덩어리**로 읽혔다.
 |    해석기는 주석을 걷어내므로 실제 선택자가 `.flo-field__help, .flo-form__actions` 였고,
 |    **모든 도움말 문구가 `border-top`·`padding-top:16px`·`display:flex` 를 받아**
 |    화면에 **의도하지 않은 가로줄**이 그어졌다.
 | 🔑 `.flo-field__help` 의 정본은 **위쪽 「폼」 절 한 곳**이다 — 🚫 여기에 다시 적지 마라.
 */

/* 🔑 저장이 오른쪽 끝이다 — 시안과 같은 자리에 둔다 */
.flo-form__actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line-soft); /* 🔻 2026-10-05 (#1565) 위 ~~18~~ */
    flex-wrap: wrap;
}
/*
 | 🆕 **버튼 글자는 한 줄이다** (2026-09-23 · 이슈 #1453 · R-308).
 |
 | 🚨 **좁은 칸에서 버튼이 줄어들며 글자가 단어 중간에서 꺾였다.** 캠페인 ④ 는
 |    오른쪽이 미리보기라 왼쪽이 약 430px 이고, 「제안서 저 / 장」 · 「다음: 0원 상품 생 / 성 →」
 |    이 두 줄이 되어 **78px** 로 섰다. 한 줄인 「이전」만 40px 였다.
 | 🔑 **줄 넘김(`flex-wrap`)과 한 줄 고정(`nowrap`)은 둘 다 있어야 한다.** 한 줄 고정만
 |    두면 버튼이 칸 밖으로 넘치고, 줄 넘김만 두면 지금처럼 글자가 꺾인다.
 |    둘이 함께면 **자리가 모자랄 때 버튼째로 다음 줄로 간다.**
 | 🔑 **자손 선택자다** · 버튼을 `<form>` 으로 감싼 화면이 있다. 🚫 `>` 로 좁히지 마라.
 | ⚠️ 목록 표의 관리 열(`.flo-cam-list`)은 위에서 따로 다룬다. 그쪽은 줄이 아니라 칸이다.
 */
.flo-form__actions .flo-btn { white-space: nowrap; }
/* 🔑 폼 한 벌의 바깥 — 창 안에서 쓰이므로 자기 여백을 갖지 않는다 */
.flo-form { display: block; }

/* ═══════════════════════════════════════════════════════════════════
 | 인라인 style 을 걷어내며 옮겨 온 규칙 (2026-08-27 · 이슈 #807 · R-307)
 |
 | 🧑 **화면에 인라인 style 로 모양을 적지 마라** — 스타일시트가 이길 수 없어
 |    나중에 고칠 자리가 없어진다.
 |
 | 🔑 **값은 그대로 옮긴 것이다** — 🚫 모양을 새로 고안하지 마라(R-307 ①).
 | 🔑 **이름은 「그 자리가 무엇인가」다** — 🚫 .flo-color-fail 같은 유틸리티 이름을
 |    만들지 마라. 인라인을 클래스 이름으로 옮겨 적은 것일 뿐이다(#807 결정 ①).
 | ✅ **검사 164 가 되돌아가는 것을 막는다**(tests/Feature/Screen/InlineStyleTest.php).
 ═══════════════════════════════════════════════════════════════════ */

/* 부품 A — 경과 일수·표 한 벌·알림 한 줄·정렬 삼각형이 인라인 style 로 적던 모양 (이슈 #807 · R-307) */

/* ═══ 경과·지연 일수 3단 (`x-elapsed-days`) ══════════════════════════
 |
 | 🔑 **화면은 「어느 띠인가」만 넘긴다** — 부품이 `data-band` 에 띠 이름을 적고,
 |    색과 굵기는 여기서 정한다. 🚫 색값을 화면으로 되돌리지 마라(R-307).
 | ⚠️ **띠 이름과 경계의 정본은 `App\Support\Design\ElapsedDays` 다** — 여기는
 |    그 이름에 모양을 붙일 뿐이다. 🚫 여기서 띠를 늘리지 마라.
 | 🚨 **색만으로 가르지 않는다** — 굵기가 함께 움직이고, 마지막 띠에는 세모 표식이
 |    붙는다. 색 셋이 서로 갈리지 않는다는 실측이 그 근거다.
 */
/*
 | 🚨 **띠의 색과 굵기를 여기 적지 마라** (2026-08-27 정정 · 이슈 #807).
 |
 | 직전까지 `[data-band="plain"|"tinted"|"marked"]` 세 줄이 색과 굵기를 갖고 있었다.
 | 🚨 **그것은 `App\Support\Design\ElapsedDays` 의 `TOKENS` 를 두 번째로 적은 것**이고,
 |    그 표는 스스로 *「어느 토큰인지는 여기 한 곳이다」* 라고 적어 두었다.
 | 🚨 **`BrandAccentGuardTest` 가 이웃한 막대(`.flo-backlog-bar`)에 대해 이미 같은 것을
 |    금지**하고 있다 — *「두 곳에 적히면 같은 날수가 화면마다 다른 색으로 읽힌다」*.
 |
 | ✅ **화면이 값으로 넘긴다** — 그것이 R-307 이 허용하는 갈래다(모양이 아니라 값).
 | 🔑 **되돌아온 값이 없을 때가 「잴 수 없음」이다** — 그래서 대비값이 곧 그 상태의 모양이고,
 |    **띠 이름을 하나 더 만들어 여기 적을 필요가 없다.**
 */
.flo-elapsed {
    display: inline-flex;
    align-items: center;
    color: var(--flo-band-ink, var(--flo-ink-3));
    font-weight: var(--flo-band-weight, 400);
}

/*
 | 표식 자리 — 🔑 **표식이 없어도 자리를 비워 둔다.** 있고 없고에 따라 숫자가
 | 좌우로 흔들리면 행끼리 견줄 수 없다.
 */
.flo-elapsed__mark { width: 9px; margin-right: 5px; flex: none; display: inline-flex; justify-content: center; }

/* 🔑 「N일 경과」는 한 덩이다 — 칸이 좁아도 줄을 나누지 않는다 */
.flo-elapsed__value { white-space: nowrap; }
/* 🆕 2026-10-14 (#1739 · 묶음 M) 휴대폰 카드에서는 표식이 없는 칸의 표식 자리(9 + 5)를 걷는다. 값이 이름표보다 13px 안쪽에서 시작했다. 표 열에서는 숫자를 맞추려 자리를 그대로 둔다 */
@media (max-width: 640px) {
    .flo-main .flo-table-block--stack .flo-elapsed__mark:not(:has(*)) { display: none; }
}

/* 값이 없을 때 `-` 옆에 붙는 이유 — 🔑 띠의 굵기를 물려받지 않는다 */
.flo-elapsed__reason { margin-left: 4px; font-weight: 400; } /* 🔻 2026-10-05 (#1565) ~~6~~ */

/* 각주 한 줄 — 세모를 실제로 그려 보여 주므로 그림과 글이 한 줄에 선다 */
.flo-elapsed-legend { display: flex; align-items: center; gap: 5px; }

/* ═══ 표 한 벌 (`x-data-table`) ══════════════════════════════════════
 |
 | 🔑 **두 치수는 부르는 쪽이 준다** — 화면마다 다른 값이라 여기에 적을 수 없다.
 |    화면은 **값만** CSS 변수로 넘기고, 그 값을 쓰는 규칙은 여기 있다.
 | 🔑 **기본값은 「지정하지 않은 것」과 같다** — 값을 넘기지 않은 표는 그대로다.
 */

/* 🚫 킷의 `.common-table` 을 덮지 않는다 — 우리 이름을 하나 더 붙여 그쪽에 적는다 */
.flo-table { min-width: var(--flo-table-min-w, auto); }

/* ═══ 화면 안의 알림 한 줄 (`x-inline-alert`) ════════════════════════
 |
 | 🔑 글 칸은 **줄어들 수 있어야 한다** — 최소 폭을 풀지 않으면 긴 문장이
 |    상자를 밀어내 실행 자리가 화면 밖으로 나간다.
 */
.flo-inline-alert__text { min-width: 0; }
/*
 | 🆕 2026-10-14 (#1710) 띄어쓰기 없는 긴 낱말도 줄을 넘긴다.
 |    🚨 최소 폭만 풀어서는 모자랐다 · 거부 알림이 30자를 넘는 해시태그를 「…」로 인용하자 그 낱말이 끊기지 않아
 |       화면이 가로로 291px 넘쳤다(1440 실측 · R-308). 계정 ID · 주소를 인용하는 알림도 같은 처지였다.
 | 🔑 `anywhere` 는 줄에 들어가지 않을 때만 낱말을 끊는다 · 띄어쓰기가 있는 한국어 문장은 지금처럼 띄어쓰기에서 넘긴다(keep-all).
 */
.flo-inline-alert__text { overflow-wrap: anywhere; }
/* 실행 자리 — 🔑 오른쪽 끝에 붙고 글이 길어져도 눌리지 않는다 */
.flo-inline-alert__action { margin-left: auto; flex-shrink: 0; }
/* 🆕 2026-10-06 (#1578) 좁은 창(640 이하)에서는 행동 단추가 글 아래 줄로 내려간다 · 390 에서 단추가 글 칸을 120px 로 좁혀 오류코드가 네 줄로 접혔다 */
@media (max-width: 640px) {
    .flo-inline-alert:has(> .flo-inline-alert__action) { flex-wrap: wrap; }
    .flo-inline-alert:has(> .flo-inline-alert__action) > .flo-inline-alert__text { flex: 1 1 100%; }
    .flo-inline-alert__action { margin-left: 0; }
}

/* ═══ 정렬 표시 (`x-sort-caret`) ═════════════════════════════════════
 |
 | 🔻 **2026-08-31 (#1023) 걸린 열에만 그리던 것을 「누를 수 있는 열 전부」로 넓혔다.**
 |
 | 🚨 **직전까지 정렬되는 열과 안 되는 열이 화면에서 똑같이 보였다.** 표식은 정렬이
 |    걸린 뒤에야 나타나므로, 운영자는 **눌러 보기 전에는 눌러도 되는지 몰랐다.**
 | 🧑 *"각 항목마다 열머리 클릭으로 정렬하는 것 표시를 더 명확히 할 것. 화살표 위 아래 표시라던지"*
 |
 | 🔑 위아래 화살표를 **늘 그리고 걸린 방향만 진하게** 한다.
 |    안 걸린 쪽은 «누를 수 있다» 만 알린다. 🚫 감추지 마라. 감추면 원래 문제로 돌아간다.
 | 🔑 방향은 상태다. 화면은 `data-direction` 만 붙이고 어느 쪽을 진하게 할지는 여기서 정한다.
 |    🚫 인라인 style 로 돌리지 마라 (R-307 · #807).
 | 🔑 낭독기에는 `aria-sort` 가 방향을 알린다. 이 그림은 들리지 않는다.
 */
.flo-sort-caret { flex: none; }
.flo-sort-caret path { stroke: var(--flo-sort-idle); }
.flo-sort-caret[data-direction="asc"] .flo-sort-caret__up,
.flo-sort-caret[data-direction="desc"] .flo-sort-caret__down { stroke: currentColor; }

/* 부품 B — 셸·실행줄·아바타·요약칸·카드·안내판·단계칩·진행칸의 인라인 style 을 옮긴 규칙 (R-307 · 이슈 #807) */

/* ═══ 운영자 셸 상단바 — components/layouts/admin.blade.php ═══════════
 |
 | 🔑 **FLO 운영자 표식**이다. 쇼핑몰 최고관리자 배지(`.flo-topbar__role`)와
 |    **같은 자리에 다른 사람**을 나타내므로 바닥을 짙게 깔아 갈라 놓는다.
 |    🚫 이 대비를 없애지 마라 — FLO 운영자 전용 화면임을 구분시키는 유일한 장치다.
 |
 | 🚨 **선택자를 두 겹으로 적은 이유가 있다.** 화면은 `flo-app.css` 를 먼저,
 |    `flo-shell.css` 를 나중에 싣는다(`layouts/app.blade.php`). 한 겹으로 적으면
 |    무게가 같아 **나중에 오는 셸 규칙이 이긴다** — 오류는 나지 않고 배지 색만
 |    조용히 옛 값으로 남는다. 🚫 한 겹으로 줄이지 마라.
 */
.flo-topbar__role.flo-topbar__role--flo { background: var(--flo-navy); color: #fff; }

/*
 | 🔑 이 자리는 **몰 이름이 아니라 「운영자 > 메뉴」 경로 표기**다. 경로는 이름보다
 |    한 단계 여린 글자라 굵기를 되돌린다.
 | 🚨 두 겹 선택자인 이유는 위와 같다(셸이 나중에 실린다).
 */
.flo-topbar__mall.flo-topbar__mall--path { font-weight: 400; }

/* ═══ 하단 실행줄 — components/action-bar.blade.php ═══════════════════
 |
 | 🔑 실행줄 왼쪽의 **알림 묶음**이다 — 「선택 N건」과 유효성 안내가 여기 선다.
 |    🚫 `min-width: 0` 을 빼지 마라. 안내 글이 길면 이 칸이 늘어나 오른쪽 버튼을 밀어낸다.
 */
.flo-actionbar__info { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 🆕 2026-10-09 (#1601) 「선택 N명」은 한 덩이다. 390 관심목록 상세 창에서 「선택 / 0건」 두 줄로 갈려 숫자가 이름표와 떨어졌다 */
.flo-actionbar__count { white-space: nowrap; flex-shrink: 0; }

/* ═══ 아바타 — components/avatar.blade.php ════════════════════════════
 |
 | 🔑 **크기는 부르는 쪽이 정한다**(`size` 속성). 값만 `--flo-avatar-size` 로 받고
 |    가로·세로를 맞추는 일은 여기서 한다 — 모양이 아니라 값이라 인라인이 맞다.
 | 🚫 예비값을 빼지 마라 — 변수 없이 이 클래스만 붙은 자리가 **크기 0** 으로 사라진다.
 |    32px 는 부품의 기본 크기와 같은 값이다.
 */


/* ═══ 요약 6칸의 값 — components/campaign-summary-card.blade.php ══════
 |
 | 🔑 **라벨과 값을 굵기로 가른다.** 값 자리는 본문 글자(`.flo-t-body`)를 쓰면서
 |    굵기만 올린다 — 라벨과 같은 굵기면 무엇이 값인지 눈에 들어오지 않는다.
 | ~~🚨 600 이 상한이다 — 서체 묶음에 700 이 없어 적어도 조용히 600 으로 떨어진다.~~
 | 🔻 2026-09-28 #1393 · 옛 §3.4 의 상한 600 은 킷 「3-1. 웹폰트」가 400~800 다섯 굵기를 싣게 되며
 |    근거가 사라졌다. 값 600 은 그대로 쓴다.
 | 🔻 2026-10-09 (#1602 후속) ~~`.flo-summary__value { font-weight: 600; }`~~ · 쓰는 곳이 없다. 지표 숫자 600 은 `.flo-kpi__value` 가 갖는다.
 */

/* ═══ 안내판 글 묶음 — components/notice.blade.php ════════════════════
 |
 | 🔑 제목·본문이 함께 서는 칸이다. 🚫 `min-width: 0` 을 빼지 마라 — 긴 본문이
 |    칸을 늘려 오른쪽 **상태 글자를 줄 밖으로 밀어낸다.**
 */
.flo-notice__text { min-width: 0; }
/* 🆕 2026-10-14 (#1710 독립 검토) 형제 부품 `x-notice` 도 같은 처지다 · 본문이 발송 사유를 그대로 그려 띄어쓰기 없는 값을 인용할 수 있다 */
.flo-notice__text { overflow-wrap: anywhere; }

/* ═══ 단계 칩 — components/steps.blade.php ════════════════════════════
 |
 | 🔑 순서 있는 목록(`<ol>`)이라 단계 번호가 **뜻으로 남는다**. 다만 번호는 칩 안에
 |    직접 그리므로 브라우저가 붙이는 목록 점과 들여쓰기는 끈다.
 | 🚫 `<ol>` 을 `<div>` 로 바꿔 이 규칙을 없애지 마라 — 순서가 사라진다.
 */


/* ═══ 진행 5칸의 한 칸 — components/track-rail.blade.php ══════════════
 |
 | 🔑 트랙 하나를 세로로 세운 묶음이다 — 🔻 **2026-09-09 (#1435) 순서가 뒤집혔다.**
 |    ~~위에 이름표, 아래에 상태 네모.~~ **위에 상태 네모, 아래에 이름표.**
 |    이름표를 끄면(`labels=false`) 네모만 남고 같은 자리에 선다.
 */
.flo-rail__track { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }

/* ═══ 규모 막대의 채움 — components/influencer-card.blade.php ═════════
 |
 | 🔑 **채움 길이만 마크업이 넘긴다**(`--flo-scale-fill`) — 팔로워 자릿수에서 계산한
 |    값이라 카드마다 다르고 스타일시트가 알 수 없다. 모양이 아니라 값이다.
 | 🚫 여기에 다른 것을 이어 붙이지 마라 — 색·높이·둥근 모서리는 이미 스타일시트에 있다.
 */
.flo-card__scale i { width: var(--flo-scale-fill, 0); }

/* 캠페인 A — 제안 응답관리(FLO-CAM-005)·캠페인 요약(FLO-CAM-004) 두 화면의 인라인 style 13곳을 옮긴 규칙 (R-307) */

/* ═══════════════════════════════════════════════════════════════════════
 | 🔑 **값은 옮긴 것뿐이다.** 색·여백·굵기를 다듬지 않았다 — 인라인에 있던
 |    `var(...)` 를 글자 그대로 가져왔다. 🚫 여기서 값을 고치지 마라.
 |
 | 🚨 **`.flo-main` 을 함께 적는 자리가 있다.** 화면 안쪽은 `.flo-main` 아래에
 |    있고, 그 안에는 `.flo-main .border`(클래스 둘)처럼 **클래스 하나짜리
 |    규칙을 이기는** 다리 규칙이 이미 있다. 인라인은 무엇이든 이겼으므로,
 |    그대로 옮기려면 같은 자리를 이겨야 한다.
 |    🚫 important 로 덮지 마라 — 자리를 맞춘다.
 ═══════════════════════════════════════════════════════════════════════ */

/* ── 추정 꼬리표 — 「(추정)」 ────────────────────────────────────────
 |
 | 지표 이름 옆에 붙어 **그 값이 잰 값이 아니라 미루어 짐작한 값**임을 밝힌다.
 | 열람률이 그것이다(픽셀은 확정 근거가 아니다).
 | 🔑 이름보다 흐리게 둔다 — 지표 이름과 같은 무게로 읽히면 안 된다.
 | 🚫 이 꼬리표를 빼지 마라 — 빼면 추정값이 실측값처럼 읽힌다.
 */
.flo-estimate-note,
.flo-main .flo-estimate-note { color: var(--flo-ink-3); }

/* ── 🔻 확인 판을 걷어냈다 (2026-09-02 · 이슈 #1135) ────────────────
 |
 | 이 판(`.flo-confirm-panel`)은 **후속 메일 발송을 누르기 전에** 몇 명에게
 | 가는지 못 박아 보여 주던 자리였다. 🧑 사용자가 **FLO 가 미응답자에게 대신
 | 보내지 않기로** 정해 그 조작 자체가 없어졌다.
 |
 | 🚫 **되살리지 마라.** 되돌릴 수 없는 다른 조작이 생기면 그때 새로 만든다.
 | ⚠️ 되돌릴 수 없는 조작을 창 없이 실행하지 않게 하는 것은 여전히 규칙이다(#1123).
 */

/* ── 상태 거르개 칩 ────────────────────────────────────────────────
 |
 | 목록을 상태별로 좁히는 칩이다. `is-active` 는 **지금 고른 거르개** 하나를
 | 가리킨다 — 「전체」와 상태 칩이 **같은 뜻의 반대 조건**이라 같은 이름을 쓴다.
 |
 | 🚨 테두리색은 `.flo-main .border`(클래스 둘)를 이겨야 해서 `.flo-main` 을
 |    함께 적는다. 클래스 하나로만 적으면 **조용히 져서 옛 선이 남는다.**
 | 🚫 색만으로 고른 것을 알리지 마라 — 글자 굵기가 함께 바뀌고
 |    `aria-current` 가 낭독기에 그 사실을 싣는다.
 */
.flo-status-filter,
.flo-main .flo-status-filter { border-color: var(--flo-line-strong); }

/*
 | 🆕 **칩 높이는 30px 하나다** (2026-10-01 · 이슈 #1537 · plan/125- 「칩과 플랫폼 선택」).
 |
 | 🚨 **배지를 품은 칩만 키가 컸다.** 제안 응답 관리는 칩 안에 등급 배지
 |    (`x-display-status`)를 넣어 35px, 글자만 넣는 화면은 29px 이었다. 같은 거르개가
 |    화면마다 다른 높이로 보였다.
 | 🔑 **높이를 정하고 가운데로 모은다.** 배지는 줄 높이 안에서 가운데에 선다.
 | 🔑 **라벨과 숫자 사이 간격은 `gap` 이 맡는다.** 플렉스 안에서는 라벨 끝의 빈칸이
 |    걷혀 「발송 대기1」처럼 붙는다(#1526 이 같은 자리에서 겪었다). 🚫 `gap` 을 빼지 마라.
 */
.flo-main .flo-status-filter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: var(--flo-control-h-sm); /* 🔻 2026-10-05 (#1567) ~~30px~~ · 필터 판의 다른 칸과 같은 32 */
    padding-top: 0;
    padding-bottom: 0;
    /* 🔑 높이가 정해져 있어 칩 안에서 줄이 바뀌면 글자가 칸 밖으로 나간다 · 줄바꿈은 칩 줄(`flex-wrap`)이 맡는다 */
    white-space: nowrap;
    /* 🆕 2026-10-01 (#1547) 125 의 알약. 반경 6 · 좌우 8 · 13/400 이던 것을 `.flo-pick` 과 같게 한다 */
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 999px;
    background: var(--flo-card);
    color: var(--flo-ink-2);
    font-weight: 500;
    text-decoration: none;
}
/*
 | 🆕 2026-10-01 (#1547 3차) 고르지 않은 칩 글자가 보라였다. 칩은 `<a class="flo-t-caption">` 이라
 |    `.flo-main a.flo-t-caption:not(.flo-link-quiet)`(클래스 셋 · 요소 하나)가 위 덩어리(클래스 하나 · 둘)를 이겼다.
 | 🔑 글자색만 같은 무게(클래스 셋 · 요소 하나)로 다시 적고 더 뒤에 둔다. `.flo-pick` 처럼 `--flo-ink-2` 다.
 |    누름과 고른 칩도 한 칸 더 무겁게 적어 이 줄에 지지 않게 한다. 검사는 `StatusFilterChipColorTest`.
 | 🚫 `!important` 로 대신하지 마라. 링크색 줄의 주석이 같은 것을 금지한다.
 */
.flo-main a.flo-status-filter.flo-t-caption { color: var(--flo-ink-2); }
.flo-main .flo-status-filter:hover,
.flo-main a.flo-status-filter.flo-t-caption:hover { border-color: var(--flo-primary); color: var(--flo-primary); text-decoration: none; }

/*
 | 🔻 2026-10-01 (#1547 · R-111 권장안) 고른 칩 표시를 회색 바탕에서 125 의 연보라로 바꿨다.
 |    ~~`background: var(--flo-line-soft)`~~ · 같은 「고른 것」을 화면마다 다른 색으로 말하고 있었다.
 */
.flo-status-filter.is-active,
.flo-main .flo-status-filter.is-active,
.flo-main a.flo-status-filter.flo-t-caption.is-active {
    border-color: var(--flo-primary);
    background: var(--flo-primary-soft);
    color: var(--flo-primary);
    font-weight: 600;
}
/*
 | 🆕 2026-10-01 (#1547 3차) 고른 칩 안의 배지(`x-display-status`)는 바탕이 칩과 같은 연보라라
 |    테두리 없이 묻혔다. 고른 칩 안에서만 흰 바탕을 준다.
 */
/*
 | 🔻 2026-10-03 (#1558 D1) ~~고른 칩 안에서만 흰 바탕~~ 을 걷고, 칩 안의 배지는 상자 없이 글자만 둔다.
 |    ~~`.flo-main .flo-status-filter.is-active .flo-badge { background: var(--flo-card); }`~~
 |    🚨 칩 안에 바탕 있는 상자가 또 서서 「수락 1」 칩만 상자 두 겹으로 보였다(11차 점검 D1).
 | 🔑 칩이 이미 테두리와 바탕을 갖는다. 배지는 낱말만 남기고 색과 굵기는 칩을 따른다.
 */
.flo-main .flo-status-filter .flo-badge { background: transparent; padding: 0; color: inherit; font-weight: inherit; }

/* ── 행마다 접혀 있는 수동 조작 ────────────────────────────────────
 |
 | 표의 「관리」 칸에서 `<details>` 로 접어 둔 상태 전환 조작이다.
 | 🔑 손잡이가 눌리는 것임을 알린다 — 자바스크립트 없이 브라우저가 접고 편다.
 | 🚫 펼쳐 두지 마라 — 24행이면 입력칸이 24개가 되어 드문 기능이 표를 독점한다.
 */
.flo-row-action > summary,
.flo-main .flo-row-action > summary { cursor: pointer; }

/* ── 카드 안에서 펴지는 이름 수정 ──────────────────────────────────
 |
 | 🆕 이슈 #999 — 관심목록 그룹 카드의 「수정」. 🧑 가 **창이 아니라 그 자리에서**
 |    고치게 하라고 정했다.
 |
 | 🔑 **손잡이가 단추로 보여야 한다** — 옆의 「그룹 삭제」와 나란히 서고, 사용자가
 |    «수정 **버튼**» 이라고 불렀다. 차림새는 킷 단추 클래스가 입힌다.
 | 🚨 **기본 삼각형을 꺼야 한다.** 켜져 있으면 단추 안에 삼각형이 박힌다.
 |    🔑 브라우저마다 끄는 자리가 달라 **셋을 함께** 적는다(목록 표시 · 웹킷 · 표지).
 | 🚫 `<summary>` 를 `display: none` 으로 감추지 마라 — 접었다 펴는 유일한 손잡이다.
 */
.flo-fold > summary,
.flo-main .flo-fold > summary { cursor: pointer; list-style: none; }
.flo-fold > summary::-webkit-details-marker { display: none; }
.flo-fold > summary::marker { content: ''; }

/* 🔑 펼침 상태를 글자로도 알린다 — 🚫 색과 자리만으로 말하지 마라 */
/*
 | 🔻 2026-10-06 (#1585) 글자 삼각형(▾ · ▴)을 앱 선 아이콘 꺾쇠(24 격자 · 선 1.7 · 둥근 끝 · `--flo-ink-3` 값)로 바꿨다.
 |    선택 상자 화살표(`SelectChevronGuardTest`)와 같은 그림이다. 글꼴마다 삼각형 크기와 높이가 달라 글자 기준선에서 떠 보였다.
 | 🔑 펼침은 모양으로 알린다: 접힘은 아래 꺾쇠, 펼침은 위 꺾쇠(뒤집기). 🚫 색만 바꾸지 마라.
 */
.flo-fold > summary::after,
.flo-main .flo-fold > summary::after {
    content: ''; display: inline-block; width: 16px; height: 16px; margin-left: 4px; vertical-align: -3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.flo-fold[open] > summary::after,
.flo-main .flo-fold[open] > summary::after { transform: rotate(180deg); }
/*
 | 🆕 2026-10-11 (#1616) 접힘칸 손잡이 글자는 한 눈금(14/600)이다. 직전까지 13 회색(「이후 업무」 · 질문 「수정」)과
 |    14/600 보라(「ID로 직접 추가」 · 「다른 관심목록에도 저장」 · 「더 보기」)가 섞여 같은 일이 두 모양이었다.
 | 🔑 색은 손잡이마다 그대로 둔다 · 크기와 굵기만 묶는다. 꺾쇠는 바로 위 규칙 하나다.
 */
.flo-main .flo-fold > summary { font-size: 14px; font-weight: 600; line-height: 24px; }
/*
 | 🚨 2026-10-11 (#1616) 꺾쇠가 보이지 않던 까닭: 손잡이에 `flo-btn-text` 가 붙은 접힘칸(「ID로 직접 추가」 · 「다른 관심목록에도 저장」 ·
 |    요약 「더 보기」)은 누르는 면 넓힘(#1608 `::after` · `position: absolute` · 좌우 0)이 같은 가짜 요소를 차지해
 |    꺾쇠가 손잡이 폭 전체로 늘어나 자리를 잃었다. 꺾쇠는 글자 뒤 제자리에 둔다.
 | 🔑 누르는 면은 손잡이 줄 높이 24(바로 윗줄)와 줄 전체 폭이 대신한다(WCAG 2.5.8 최소 24).
 */
.flo-main .flo-fold > summary::after { position: static; }

/* ── 이름 옆 연필 · 누르면 그 자리가 입력칸이 된다 ────────────────────
 |
 | 🆕 이슈 #999 — 🧑 *"그룹 이름 옆에 연필 같은 버튼 생성해놓고 클릭하면 그룹
 |    이름이 input 박스로 변경되면 되잖아."*
 |
 | 🔑 **이름과 입력칸이 같은 자리를 나눠 쓴다.** 펴면 이름이 사라지고 그 자리에
 |    입력칸이 선다. 🚫 둘을 함께 보이게 하지 마라 — 어느 것이 지금 값인지 모른다.
 | 🔑 **연필은 언제나 그 자리에 있다** — 접는 손잡이가 그것뿐이라 감추면 **펴고
 |    나서 되돌릴 길이 없다.**
 | 🚨 **`:has()` 로 형제를 감춘다.** 이 파일이 이미 같은 방식을 쓰고 있다
 |    (`.flo-modal__body:has(> .flo-scrollpane)`). 🚫 자바스크립트로 바꾸지 마라.
 | 🚫 **`<summary>` 를 `display: none` 으로 감추지 마라** — 접었다 펴는 유일한
 |    손잡이다.
 */
/* ── 그룹 카드 — 지우는 자리는 오른쪽 위 ──────────────────────────────
 |
 | 🆕 이슈 #1022 — 🧑 *"그룹 삭제 텍스트 대신 박스 위에"*.
 |
 | 🔑 **글자 줄이 없어져 카드가 이름·인원·날짜 셋으로 정리된다.**
 | 🔑 글리프는 킷의 **동그라미 안 `×`**(`icon-delete.svg`)다 — 킷이 **민 `×`(닫기)** 와
 |    갈라 쓰는 삭제 표시다. 🚫 민 `×` 로 바꾸지 마라.
 | 🚨 **이름 줄이 아이콘 밑으로 들어가면 안 된다.** 이름을 고칠 때 입력칸이 그 줄을
 |    통째로 쓰므로, 자리를 비워 두지 않으면 **입력칸이 아이콘에 깔린다.**
 |    🔑 카드 안여백(22px)에 아이콘 폭(18px)을 더한 만큼만 비운다.
 | 🚫 카드 전체에 오른쪽 여백을 주지 마라 — 인원·날짜 줄까지 함께 좁아진다.
 */
/*
 | 🔻 **2026-10-06 (#1583)** 오른쪽 위에 떠 있던 킷 그림 단추를 걷었다.
 |    ~~`.flo-group-card__del { position: absolute; top: 20px; right: 20px; … }`~~ ·
 |    ~~`.flo-group-card > .flo-name-row { padding-right: 28px; }`~~ ·
 |    ~~`.flo-group-card { position: relative; }`~~ (절대 위치 삭제 단추의 기준 상자였다. 단추가 이름 줄 안으로 들어와 기준이 필요 없다)
 |    🧑 *"상세보기 좌측 이모지랑 글이랑 정렬도 안맞고 더 적절한 svg를 써야하지않을까?"*
 |    킷 연필(21 상자 · 그림 14)과 삭제 그림(18)이 이름 줄 가운데(28)와 2px 어긋나 있었다.
 | 🔑 이제 이름 줄 하나에 이름 · 「상세보기」 · 연필 · 휴지통이 선다. 두 단추는 32 선 아이콘 단추(`.flo-icon-btn`)이고
 |    줄 오른쪽 끝에 붙는다. 줄 높이가 32 라 네 요소의 가운데가 같다.
 | 🔑 카드는 이름 줄 32 · 사이 12 · 이름표 · 값 두 줄(18 · 사이 4)이다. 4 눈금.
 */
.flo-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
/*
 | 🆕 2026-10-06 (🧑 · #1584) 이름 줄이 카드 머리다 · ~~아래 12 · 선 · 16~~ 🔻 2026-10-11 (#1638 · #1639) 선은 걷었다. 뒤에 값 두 줄이 선다(판 머리 `flo-panel__head` 와 같은 눈금).
 |    🧑 *"관심목록 카드에 제몬 상세보기 아래에 인플루언서랑 최근 수정 구분 단락이 필요할거같아"*
 |    ~~이름 줄 32 · 사이 12 · 값~~ · 카드는 이제 테 1 + 16 + 32 + 12 + 선 1 + 16 + 18 + 4 + 18 + 16 + 테 1 = 135 한 가지다.
 */
.flo-group-card > .flo-name-row { flex-wrap: nowrap; min-height: var(--flo-control-h-sm); } /* 🔻 2026-10-11 (#1639) ~~padding-bottom: 12px; border-bottom: 1px solid var(--flo-line);~~ 작은 카드 안 구분선을 걷었다 */
.flo-group-card .flo-name-row__name {
    flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 600; color: var(--flo-ink-1);
}
.flo-group-card .flo-name-edit:not([open]) { flex: none; margin-left: auto; }
.flo-group-card .flo-name-edit:not([open]) + .flo-group-card__del { margin-left: -4px; } /* 두 단추 사이 4 */
.flo-group-card__del { flex: none; }
.flo-name-row:has(> .flo-name-edit[open]) > .flo-icon-btn.flo-group-card__del { display: none; }
.flo-group-card__meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 8px; margin: 0; } /* 🔻 2026-10-06 (#1584) ~~위 12~~ → ~~선 아래 16~~ 🔻 2026-10-11 (#1638 · #1639) 선이 없어 이름 줄 아래 간격은 아래 `.flo-group-card__count + .flo-group-card__meta` 등이 맡는다 */
.flo-group-card__meta > div { display: contents; }
.flo-group-card__meta dt,
.flo-group-card__meta dd { margin: 0; font-size: 13px; line-height: var(--flo-lh-caption); }
.flo-group-card__meta dt { color: var(--flo-ink-3); font-weight: 400; }
.flo-group-card__meta dd { color: var(--flo-ink-1); font-variant-numeric: tabular-nums; }

/*
 | 🆕 **선 아이콘 단추** (2026-10-06 · #1583). 글자 없는 32 단추 · 그림 18 · 앱 선 아이콘(24 격자 · 선 1.7 · 둥근 끝 · 글자 색).
 | 🔑 평소에는 테두리 없이 흐린 글자 색이고, 올리면 옅은 바탕이 깔린다. 지우는 단추는 올렸을 때만 빨강이다.
 | 🚨 글자가 없으니 `aria-label` 이 유일한 이름이다. 🚫 빼지 마라.
 */
.flo-icon-btn {
    display: inline-grid; place-items: center; width: var(--flo-control-h-sm); height: var(--flo-control-h-sm);
    padding: 0; border: 0; border-radius: var(--flo-radius); background: transparent; color: var(--flo-ink-3); cursor: pointer; /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    list-style: none;
}
/* 🆕 2026-11-03 (#1970) 문의 창구 줄의 X 단추는 `hidden` 으로 그려 두고 대본이 푼다 · 위 `display` 가 브라우저 기본값을 이기므로 같은 자리를 짚는다 */
.flo-icon-btn[hidden] { display: none; }
.flo-icon-btn > svg { width: 18px; height: 18px; display: block; }
.flo-icon-btn:hover { background: var(--flo-line-soft); color: var(--flo-ink-1); }
.flo-icon-btn--danger:hover { color: var(--sig-fail-ink); }
.flo-icon-btn:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 0; }

.flo-name-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
/*
 | 🔑 **이름과 「상세보기」가 함께 걷힌다** — 이름을 고치는 동안 「상세보기」가 입력칸
 |    옆에 남으면 **무엇의 상세인지** 흐려진다. 🚫 이름만 감추지 마라.
 */
.flo-name-row:has(> .flo-name-edit[open]) > .flo-name-row__name,
.flo-name-row:has(> .flo-name-edit[open]) > .flo-name-row__detail { display: none; }

/*
 | 🚨 **누를 수 있어 보여야 한다.** 이 화면에서 그룹 내용을 여는 **유일한 길**인데
 |    잔글씨 회색으로 두었더니 **설명글과 구별되지 않았다**(실측).
 | 🔑 색과 밑줄을 함께 준다. 🚫 색 하나로만 말하지 마라.
 | 🚨 **두 벌로 적는다** — 셸 규칙(`.flo-main a`)이 색을 덮는다.
 */
.flo-name-row__detail,
.flo-main .flo-name-row__detail {
    color: var(--flo-primary); font-weight: 400; text-decoration: underline; flex: none; /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
}

/* ── 계정 ID 로 찾는 줄 ───────────────────────────────────────────────
 |
 | 🆕 이슈 #1012 — 🧑 가 **안내 글자가 잘린다**고 지적한 자리다.
 |
 | 🚨 **입력칸이 기본 폭이라 좁았다.** *「계정 ID 또는 프로필 주소를 입력해 …」* 에서
 |    끊겨 **무엇을 넣으라는 말인지 끝까지 읽을 수 없었다.**
 | 🔑 **칸이 남는 자리를 받는다.** 🚨 `min-width: 0` 을 빼지 마라 — 플렉스 항목은
 |    기본으로 내용보다 작아지지 못해 **좁은 창에서 단추를 밀어낸다.**
 | 🔑 **끝없이 늘리지도 않는다** — 한 줄이 너무 길면 눈이 되돌아올 자리를 잃는다.
 */
.flo-find-form { display: flex; align-items: flex-end; gap: 8px; max-width: 620px; }
.flo-find-form > div { flex: 1 1 auto; min-width: 0; }
.flo-find-form input { width: 100%; min-width: 0; }
.flo-find-form > .flo-btn { flex: none; white-space: nowrap; }
/*
 | 🆕 2026-10-06 (#1588) 좁은 폭(640 이하)에서는 칸이 한 줄을 다 쓰고 단추가 아래로 간다. 390 에서 칸이 174 로 줄어
 |    안내 글 「계정 ID 또는 프로필 주소를 입력해 주세요.」(231)가 잘렸다. 글은 줄이지 않는다(위 주석). 관심목록 생성 줄도 같다.
 */
@media (max-width: 640px) {
    .flo-find-form,
    .flo-folder-new__row { flex-wrap: wrap; }
    .flo-find-form > div,
    .flo-main .flo-folder-new__row .flo-field__input { flex-basis: 100%; } /* 🔑 `.flo-main` 은 아래쪽 `flex: 1 1 auto` 를 이기려는 것이다 */
}

/*
 | 🚨 **`<details>` 안에서 손잡이와 내용은 한 줄에 세울 수 없다.**
 |    브라우저가 내용을 **제 그림자 칸에 담아** 통째로 한 덩어리로 놓기 때문에,
 |    `display: flex` 를 걸어도 **연필 아래로 폼이 떨어진다.** 실측으로 확인했다.
 | 🔑 그래서 **펴면 연필을 감추고** 그 자리를 입력칸이 그대로 받는다. 🧑 가 말한
 |    *"그룹 이름이 input 박스로 변경"* 이 바로 그 모양이다.
 | 🚨 **감추는 대신 「취소」를 반드시 둬라** — 연필이 사라지면 **접을 길이 없어진다.**
 |    취소는 같은 주소로 되돌아가는 링크이고 자바스크립트가 필요 없다.
 | 🚫 **`display: contents` 로 풀지 마라.** 브라우저가 접힘 상태를 그리는 상자를 잃어
 |    **접어도 폼이 그대로 보이는** 브라우저가 생긴다.
 */
.flo-name-edit { min-width: 0; }
.flo-name-edit[open] { flex: 1 1 100%; }
.flo-name-edit__pencil { cursor: pointer; list-style: none; }
.flo-name-edit[open] > .flo-name-edit__pencil,
.flo-name-edit[open] > .flo-icon-btn.flo-name-edit__pencil { display: none; } /* 🔻 2026-10-06 (#1583) 셈으로는 윗줄(0,3,0)이 이미 이긴다. 이 줄은 `DisplayOverrideGuardTest` 몫이다: display 를 겨루는 두 규칙은 이긴 쪽 이름에 진 쪽 클래스(`.flo-icon-btn`)를 함께 적어야 하고, 빼면 그 가드가 붉어진다(실측) */
.flo-name-edit__pencil::-webkit-details-marker { display: none; }
.flo-name-edit__pencil::marker { content: ''; }
.flo-name-edit__pencil:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/*
 | 🚨 `min-width: 0` 을 빼지 마라 — 플렉스 항목은 기본으로 내용보다 작아지지 못해
 |    **긴 이름에서 입력칸이 카드를 뚫는다.**
 */
.flo-name-edit__form { display: flex; align-items: center; gap: 8px; min-width: 0; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-name-edit__form > div { flex: 1 1 auto; min-width: 0; }
.flo-name-edit__form input { width: 100%; min-width: 0; }
/* 🆕 2026-10-06 (#1583) 카드 안 이름 수정 칸은 32(옆 「저장」 작은 단추와 같은 높이) · 펼쳐도 이름 줄 32 가 그대로라 카드 높이가 움직이지 않는다 */
.flo-main .flo-group-card .flo-name-edit__form input { min-height: var(--flo-control-h-sm); height: var(--flo-control-h-sm); padding-top: 4px; padding-bottom: 4px; }
/*
 | 🚨 **단추와 취소는 줄어들면 안 된다** — 줄어들면 글자가 **한 글자씩 꺾인다**
 |    (「취소」가 「취 / 소」로 그려졌다). 줄어들 몫은 입력칸이 진다.
 */
.flo-name-edit__form > .flo-btn,
.flo-name-edit__form > a { flex: none; white-space: nowrap; }

/* ── 🔻 걷어냄 · 행 안에서 되묻기 (2026-09-02 · 이슈 #1117) ──────────
 |
 | 그룹 창의 표에서 사람을 뺄 때 **그 행 안에서 펼쳐 되묻던** 자리다
 | (`.flo-row-confirm*` · 이슈 #1024 · #1031 · #1036 · #1044).
 |
 | 🧑 **절대 규칙 R-309 가 그 방식을 물렸다** — *"제거 등 사용자의 선택이 들어가야
 |    하는 경우 무조건 모달 팝업으로 물어본다."* 이제 `x-folder-item-remove-confirm`
 |    창이 그 일을 한다.
 |
 | 🚫 **되살리지 마라.** 되돌리려면 **사용자의 정정 지시**가 있어야 한다.
 | 🔑 **그 회차들이 푼 문제는 새 창이 이미 갖고 있다** — 「취소 왼쪽 · 확정 오른쪽」
 |    (#1036)과 「둘 다 단추로 두어 빨강이 홀로 서지 않게」(#1022 · #1044)는
 |    `.flo-form__actions` 가 그대로 한다. 🚫 그 판단을 잃지 마라.
 */

/* ── 사람이 직접 쓴 글 ─────────────────────────────────────────────
 |
 | 캠페인 목표·저장돼 있던 메모처럼 **운영자가 줄바꿈까지 적어 넣은 원문**이다.
 | 🔑 줄바꿈을 지운 채 보이면 **뜻이 달라진다** — 목록으로 적은 것이 한 문단이 된다.
 | 🚫 `nl2br` 나 미escape 출력으로 대신하지 마라 — 줄바꿈은 여기서 살린다.
 |
 | 🆕 **2026-09-25 (#1474) 띄어쓰기 없는 긴 글을 끊는다.** `pre-wrap` 만으로는 끊을
 |    자리가 없어, 1,000자 메모 하나가 문서 폭을 11,622px 로 밀었다(실측).
 | 🔑 **한글은 낱말 단위로 접고**(`keep-all` · R-308), 그래도 한 줄에 안 들어가는
 |    덩어리만 아무 곳에서나 끊는다(`overflow-wrap: anywhere`). `.flo-picked-product__name` 과 같은 짝이다.
 */
.flo-usertext,
.flo-main .flo-usertext { white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }

/* ── 영향 공시 소제목 — 「지금 끊기는 것」·「그대로 진행되는 것」 ──────
 |
 | 캠페인을 종료하면 무엇이 끊기고 무엇이 이어지는지 나눠 적은 덩어리의 머리다.
 | 🔑 뒤따르는 목록보다 **한 단 진하게** 둔다 — 같은 흐린 색이면 머리와 항목이
 |    한 덩어리로 뭉쳐 «끊기는 것» 과 «이어지는 것» 의 경계가 사라진다.
 | 🚫 한 덩어리라도 빼지 마라 — 운영자가 종료를 취소와 같은 것으로 오해한다.
 */
.flo-impact-head,
.flo-main .flo-impact-head { color: var(--flo-ink-1); }

/* ── 내부 메모 입력칸 ──────────────────────────────────────────────
 |
 | 🚨 테두리색은 `.flo-main .border` 를 이겨야 해서 `.flo-main` 을 함께 적는다.
 | 🔑 줄바꿈 유지는 입력칸의 기본이지만, 옮기기 전 값에 있었으므로 그대로 둔다.
 */
/* 🔑 규칙은 아래 `.flo-main textarea.flo-note-input` 한 곳에 있다 — 그것이 배치 이름을 이긴다 */

/* 캠페인 B 배치 — 캠페인 화면 9종의 인라인 style 을 옮긴 규칙 (R-307 · 이슈 #807) */

/* ═══ 캠페인 B — 인라인에서 옮겨 온 규칙 ═══════════════════════════════
 |
 | 🔑 **옮긴 것이지 고친 것이 아니다** (R-307 ①). 값은 인라인에 있던 것 그대로다 —
 |    🚫 색·여백을 다듬지 마라.
 | 🔑 이름은 **그 자리의 요소가 «무엇인가»** 로 지었다 — 🚫 색·속성 이름을 그대로
 |    딴 유틸리티(`.flo-text-danger`)를 만들지 마라. 그것은 인라인을 클래스 이름으로
 |    옮겨 적은 것일 뿐이다.
 | 🚨 **선택자에 요소 이름을 함께 적은 자리는 이유가 있다** — 바탕 규칙
 |    (`.flo-main textarea` · `.flo-main .border` · 킷 `common-table td`)이 같은
 |    속성을 이미 정하고 있어, 클래스 하나(0,1,0)로는 **조용히 진다.**
 |    🚫 요소 이름을 빼지 마라 — 빼는 순간 테두리 색이 되돌아간다.
 */

/* ── 시딩 상품 주소 (`campaign/participation-detail`) ────────────────
 | 🔑 인플루언서에게 그대로 전할 주소라 **전문이 보여야** 한다. 띄어쓰기가 없어
 |    끊어 주지 않으면 카드 밖으로 넘친다.
 */
.flo-seeding-url { word-break: break-all; }

/* ── 쿠폰 URL 이 닿지 않은 상태 ───────────────────────────────────────
 | 화면 3종이 같은 사실을 말한다 — `participation-detail` · `coupon-issuance` ·
 | `coupon-url-send`.
 | 🚨 **이 시점에 제품은 이미 나갔다.** 링크가 닿지 않으면 그 사람의 판매가
 |    집계되지 않아, 운영자가 대신 전해야 한다 — 그래서 중단 신호색이다.
 | 🚫 주의(`--sig-warn`)로 낮추지 마라 — 가만두면 원가만 나간다.
 | 🔻 2026-11-02 (#1957) 할인코드 메일과 `coupon-url-send` 화면을 없애 이 상태를 그리는 화면이 없다. 선택자는 따로 정리한다.
 */
.flo-send-blocked { color: var(--sig-fail-ink); }

/* ── 민감 항목 표시 (`campaign/participation-detail`) ─────────────────
 | 🔑 답변 이름표 옆에 붙는 곁말이다. 이름표(`--flo-ink-2`)보다 **한 단 흐리게**
 |    두어 이름 자체를 가리지 않는다.
 */
.flo-sensitive-mark { color: var(--flo-ink-3); }

/* ── 운영자가 직접 적는 긴 글 (`campaign/wizard/basic`) ───────────────
 | 캠페인 목표 · 내부 메모. 둘 다 사람이 줄을 나눠 쓰는 글이라 **줄바꿈을 지킨다.**
 | 🚫 `nl2br`·`{!! !!}` 로 대신하지 마라 — HTML 을 만들면 XSS 표면이 생긴다.
 |
 | 🚨 선택자에 `textarea` 가 있는 이유 — 바탕 규칙 `.flo-main textarea` 와
 |    배치 이름 `.flo-main .border` 가 **테두리를 이미 정한다.** 클래스 하나로는
 |    져서 테두리가 옅은 쪽(`--flo-line`)으로 되돌아간다.
 */
.flo-main textarea.flo-note-input {
    border-color: var(--flo-line-strong);
    white-space: pre-wrap;
}


/* ── 자유 질문 한 줄 입력칸 (`campaign/wizard/proposal`) ──────────────
 | 질문 이름과 도움말을 한 줄에 늘어놓는 자리다. 최소 폭이 없으면 좁아져
 | **무엇을 적는 칸인지 보이지 않는다.**
 |
 | 🚨 선택자에 `input` 이 있는 이유 — `.flo-main input:not([type])` 가
 |    테두리 색을 이미 정한다(같은 무게). 요소 이름을 빼면 진다.
 */
.flo-main input.flo-question-input {
    height: var(--flo-control-h);
    border-color: var(--flo-line-strong);
    min-width: 18rem;
}
/* 도움말은 질문보다 짧게 적는 칸이라 좁다 */
.flo-main input.flo-question-input--help { min-width: 14rem; }

/* ── 생성 방식 고르기 카드 (`campaign/wizard/compose-mode`) ───────────
 | 누를 수 있는 카드다. 브라우저 기본 버튼 바탕(회색)이 그대로 나오면
 | **카드로 읽히지 않는다.**
 |
 | 🚨 선택자에 `button` 이 있는 이유 — `.flo-main .border` 가 테두리를 이미 정한다.
 */
.flo-main button.flo-mode-choice {
    background: var(--flo-card);
    border-color: var(--flo-line-strong);
}

/* ── 판매중지 표시 (`campaign/wizard/products`) ───────────────────────
 | ✅ 막지 않고 알리기만 한다 — 준비 중에 다시 입고될 수 있다.
 | 🚫 중단(`--sig-fail`)으로 올리지 마라. 고를 수 없는 상품이라는 뜻이 아니다.
 */
.flo-product-halted { color: var(--sig-warn-ink); }

/* 🔻 2026-10-11 (#1632) ~~캠페인 쿠폰 요약 판~~ 은 요약 목록(아래)으로 옮겼다. 쿠폰 화면이 쓰던 판 규칙은 지웠다. */

/* ── 요약 목록 (이름 · 값 쌍의 목록) ───────────────────────────────────
 | 🆕 2026-10-11 (#1632 · 🧑 「공통 부품으로 (권장)」) 쿠폰 요약 · 주문 귀속 상세가 같은 판을 두 벌 짰다. 한 부품이 갖는다.
 | 🔻 2026-10-12 (#1650 · 🧑 「각 컨텐츠 박스 안에 구분이 안감」) ~~테두리 판(바탕 · 1px 선 · 안쪽 16) 안에 이름 위 · 값 아래로 쌓은 칸~~.
 |    흰 카드 안에 테두리 판이 한 겹 더 서서 칸 구분이 안 됐다(상자 안의 상자). 테두리를 걷고,
 |    한 칸을 「이름(왼쪽 128) · 값(오른쪽)」 가로 한 쌍으로 세우고 칸 아래에 옅은 선을 긋는다. 이름과 값이 눈으로 갈린다.
 | 🔑 이름 13 · 먹3 · 값 14/600 · 칸 높이는 위아래 12 · 칸 사이 가로 32 (4px 격자). 마지막 줄에는 선이 없다.
 | 🔑 두 칸일 때 마지막 줄의 두 칸, 한 칸일 때 마지막 칸만 선을 뺀다. 480 이하는 이름이 값 위로 올라간다.
 */
.flo-summary-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
    margin: 0;
    padding: 0;
}
.flo-summary-list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.flo-summary-list__row {
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 16px; align-items: baseline;
    min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--flo-line);
}
.flo-summary-list__row:last-child,
.flo-summary-list:not([data-cols="1"]) .flo-summary-list__row:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.flo-summary-list__label { display: block; margin: 0; font-size: 13px; line-height: var(--flo-lh-caption); font-weight: 400; color: var(--flo-ink-3); }
.flo-summary-list__value { display: block; margin: 0; font-size: 14px; line-height: var(--flo-lh-ui); font-weight: 600; color: var(--flo-ink-1); overflow-wrap: anywhere; word-break: keep-all; }
.flo-summary-list__value--lead { font-size: 16px; line-height: var(--flo-lh-card); font-weight: 700; }
@media (max-width: 640px) {
    .flo-summary-list { grid-template-columns: minmax(0, 1fr); }
    .flo-summary-list:not([data-cols="1"]) .flo-summary-list__row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--flo-line); }
}
@media (max-width: 480px) {
    .flo-summary-list__row { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
}

/* ── 표가 비었을 때 그 자리를 채우는 칸 (`campaign/performance`) ───────
 | 🚨 선택자에 킷 표 이름이 함께 있는 이유 — 킷의
 |    `.common-table-wrap .common-table tbody td` 가 아래 선 색을 이미 정한다.
 |    우리 칸만 짚는 방식이라 **킷 클래스를 덮어쓰는 것이 아니다** —
 |    같은 저장소의 `.common-table td.flo-td` 와 같은 꼴이다.
 */
.common-table td.flo-empty-cell { border-bottom: 1px solid var(--flo-line); }

/* ── 조건 한 줄 폼 (`campaign/list`) ──────────────────────────────────
 | 🔑 킷의 `flex-box-ui` 는 가로 배치만 정한다. 폼이 카드 폭을 다 쓰지 않으면
 |    오른쪽 버튼이 가운데로 끌려온다.
 */
.flo-filter-form { width: 100%; }

/* ── 비율 막대의 채움 폭 (`campaign/list`) ────────────────────────────
 | 🔑 **행마다 달라지는 값**이라 마크업이 넘긴다. 넘기는 것은 **값 하나**이고
 |    (`--flo-bar-fill`) **폭으로 쓰는 규칙은 여기 있다** (R-307 ③).
 | 🚫 화면에서 `style="width: …%"` 로 되돌리지 마라 — 그것은 모양이라
 |    스타일시트가 이길 수 없다.
 | 🔑 기본값 `0` 은 **«재 봤고 0»** 이다 — 값을 안 넘기면 빈 홈이 보인다.
 |    🚫 기본값을 지우지 마라. 지우면 폭이 없는 칸이 **홈을 가득 채운다.**
 */


/* 배치 「대시보드·성과」 — dashboard.blade.php · order/attribution-detail.blade.php 의 인라인 style 을 옮긴 규칙 (R-307 · 이슈 #807) */

/* ── 대시보드 「밀린 일」 축 눈금 ──────────────────────────────────
 |
 | 🔑 **셋은 「어느 눈금인가」다** — 시작 · 마지막 · 그 사이. 🚫 위치를 뜻하는
 |    유틸리티 이름(`.flo-left-0`)으로 바꾸지 마라 (#807 결정 ①).
 | 🚨 **마지막 눈금은 가운데 맞춤을 쓰지 않는다** — 100% 지점에 가운데로 놓으면
 |    글자 절반이 다음 칸으로 넘어가 «12일» 이 세 줄로 깨진다. 그래서 `right: 0` 이다.
 | 🔑 사이 눈금의 자리(`--flo-tick-at`)는 **화면이 넘긴다** — 눈금 개수에서
 |    나오는 값이라 스타일시트가 미리 알 수 없다.
 */
.flo-backlog-tick--start { left: 0; }
.flo-backlog-tick--end { right: 0; }
.flo-backlog-tick--between { left: var(--flo-tick-at); transform: translateX(-50%); }

/* 🔑 격자선의 자리도 화면이 넘긴다 — 25·50·75·100% 네 줄이다 */


/* ── 주문귀속 상세(FLO-ORD-002)의 사실 상자 ────────────────────────
 |
 | 🔑 ①왜 이 주문인가 ②왜 이 사람 몫인가 ③왜 이 금액인가 — 세 물음의 답이
 |    **박힌 값 그대로** 담기는 상자다. 🚫 화면이 계산한 값을 여기 담지 마라.
 | ⚠️ 여백(`p-4`·`mb-3`)은 화면이 그대로 갖는다 — 옮긴 것은 바닥과 테두리뿐이다.
 */
.flo-attribution-facts { background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card); } /* 🔻 2026-10-11 (#1632 검토) 모서리 둥글림 추가. 요약 목록 판과 네 절이 한 틀로 보인다 */

/*
 | 🔑 **「그때 확정본이 있었음」** — 순매출이 바뀌었는데 그 시점에 확정된 정산이
 |    있었다는 뜻이라 **새 버전 발행 대상**이다. 그래서 주의색이다.
 | 🚫 색만으로 가르지 마라 — 옆에 «· 새 버전 발행 대상» 글자가 함께 있어야 한다.
 */
.flo-attribution-reissue { color: var(--sig-warn-ink); }

/* 설정·정산·그 밖 화면(연동설정·정산·인플루언서 상세·번호표·메일 이력·템플릿)의 인라인 style 을 옮긴 규칙 (R-307) */

/* ═══ 정보 구획 패널 ═══════════════════════════════════════════════════
 |
 | 한 주제를 담는 테두리 패널이다 — 제목 줄이 위에 있고 그 아래가 내용이다.
 | 연동설정(FLO-SET-003)과 인플루언서 상세(FLO-INF-002)가 함께 쓴다.
 |
 | 🚨 **`.flo-main` 을 앞에 붙인 이유가 있다.** 같은 요소가 유틸리티 `border` 를
 |    함께 달고 있고, 그 규칙은 「.flo-main .border」(클래스 둘)이라
 |    **클래스 하나짜리 규칙을 이긴다.** 붙이지 않으면 `border-color` 가
 |    조용히 무시된다 — 오류가 나지 않아 눈으로 봐야 드러난다.
 | 🔑 **테두리 굵기·모서리는 유틸리티가 갖는다.** 여기는 바탕과 선 색만 정한다.
 |
 | 🔻 **2026-10-03 (#1558 C3) 규칙 셋을 걷었다.** 마지막으로 쓰던 인플루언서 상세가 연동 설정과 같은
 |    서브카드(`flo-subcard`)로 옮겨 이 이름을 부르는 화면이 없다(연동 설정은 #1527 에 먼저 옮겼다).
 |    ~~`.flo-main .flo-info-panel { background; border-color }`~~ ·
 |    ~~`.flo-main .flo-info-panel > h2.flo-t-section { margin-bottom: 0 }`~~ ·
 |    ~~`.flo-main .flo-info-panel > h2.flo-t-section + :not(.flo-empty) { padding-top: 16px }`~~ (#1547)
 | 🚫 되살리지 마라. 판은 `flo-subcard` 한 모양이다.
 */

/* ═══ 정기 작업 꺼짐 알림 ═════════════════════════════════════════════
 |
 | 정기 작업이 통째로 꺼져 있을 때만 연동설정 화면에 뜨는 문단이다.
 | 🔑 위 패널과 같은 이유로 `.flo-main` 을 앞에 붙인다 — 유틸리티 `border` 와
 |    같은 요소에 있다.
 */
/* 🔻 2026-10-06 (#1577) ~~`.flo-main .flo-schedule-off { border-color: var(--flo-line); color: var(--flo-ink-1); }`~~
 |    문단이 앱 알림 부품(`x-inline-alert` 오류 등급)으로 바뀌어 쓰는 곳이 없다. */

/* 🆕 2026-10-06 (#1577) 글자 줄 안의 선 아이콘(이모지 대신). 24 격자 그림을 글자 크기 옆에 14 로 세운다 */
.flo-main .flo-icon-inline { display: inline-block; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
/* 🆕 2026-10-11 (#1617) 카페24 연동 설정 「API 권한」 두 칸 목록. 꺾쇠는 초록(「맞음」) · 860 이하 한 칸 */
.flo-main .flo-scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.flo-main .flo-scope-list > li { line-height: var(--flo-lh-ui); overflow-wrap: anywhere; }
.flo-main .flo-scope-list .flo-icon-inline { color: var(--sig-progress-ink); }
/*
 | 🆕 2026-10-12 (#1662) 연동 설정 「API 권한」 알약 목록. 받은 권한 코드를 접지 않고 줄바꿈 알약으로 늘 보인다.
 | 🔑 연한 면 + 꺾쇠 아이콘(완료 신호색). 선택 칩(보라)과 구분하려고 보라를 쓰지 않는다. 최소 높이 28 · 둥글기 16 · 간격 8.
 */
.flo-main .flo-scope-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flo-main .flo-scope-chips > li {
    display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px; border-radius: 16px;
    background: var(--flo-line-soft); font-size: 13px; line-height: var(--flo-lh-ui); overflow-wrap: anywhere;
}
.flo-main .flo-scope-chips .flo-icon-inline { color: var(--sig-progress-ink); }
@media (max-width: 860px) { .flo-main .flo-scope-list { grid-template-columns: minmax(0, 1fr); } }
/*
 | 🆕 2026-10-19 (#1799) 연동 설정 「기본 문의 창구」 짝(종류 선택 상자 + 값 칸) 넷. 두 줄로 쌓이면 짝 사이 16 · 짝 안 8 이다.
 | 🚨 쌓인 폭(390 · 1024 · 768 실측)에서 짝 안 8(`gap-2`)과 짝 사이 8(`mb-2`)이 같아 네 짝이 한 덩이로 보였다.
 | 🔑 쌓이는지는 창 폭이 아니라 판 폭이 정한다(연동 설정은 두 열이라 1024 에서도 쌓인다). 그래서 묶음 폭으로 가른다(`@container`).
 |    선택 상자 140 + 사이 8 + 값 칸 바탕 폭 192(`flo-fill` 12rem) = 340 미만이면 값 칸이 다음 줄로 내려간다.
 | 🔑 한 줄일 때는 그대로 8 이다. 마지막 짝과 「저장」 사이(8 + 8)도 그대로다 · 사이 16 은 짝과 짝 사이에만 준다(겹친 여백 8 · 16 중 큰 값).
 */
.flo-main .flo-cs-pairs { container: flo-cs-pairs / inline-size; }
@container flo-cs-pairs (max-width: 339px) {
    .flo-main .flo-cs-pair + .flo-cs-pair { margin-top: 16px; }
}
/*
 | 🆕 2026-10-11 (#1617) 참여 정보 「카페24 아이디」 등록된 줄 · 상태 배지 + 「수정」(펴면 칸 · 「저장」) + 「삭제」(글자 단추).
 | 🔑 「삭제」는 평소 회색 글자이고 올리거나 초점이 닿으면 빨강이다 · 묻는 창은 그대로다(R-309).
 | 🔑 「수정」을 펴면 「삭제」를 감추고 칸 줄이 「수정」 아래에 선다. 「수정」은 그대로 두어 다시 누르면 접힌다(취소).
 |    🚫 펴진 뒤 「수정」을 감추지 마라 · 키보드 초점이 그 자리에 있어 초점이 사라진다.
 */
.flo-main .flo-member-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.flo-main .flo-member-id__edit > summary { list-style: none; cursor: pointer; }
.flo-main .flo-member-id__edit > summary::-webkit-details-marker { display: none; }
.flo-main .flo-member-id__edit[open] { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.flo-main .flo-member-id__edit[open] > summary { border-color: var(--flo-primary); color: var(--flo-primary); background: var(--flo-primary-soft); }
.flo-main .flo-member-id:has(> .flo-member-id__edit[open]) > .flo-btn-text--quiet-danger { display: none; }
.flo-btn-text.flo-btn-text--quiet-danger { color: var(--flo-ink-2); font-weight: 400; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
.flo-btn-text.flo-btn-text--quiet-danger:is(:hover, :focus-visible) { color: var(--sig-fail-ink); }

/* ═══ 정산 명세의 금액 한 줄 ═══════════════════════════════════════════
 |
 | 라벨과 금액이 한 쌍인 줄이다 — 줄마다 아래에 선을 둬 금액을 눈으로 훑게 한다.
 */
.flo-amount-row {
    border-bottom: 1px solid var(--flo-line);
    padding: 8px 0;
}
/* 🆕 2026-10-06 (#1587 B) 합계 줄 바로 위 줄과 합계 줄 자신은 아래 선을 긋지 않는다.
   위 줄의 1px 선 · 8 · 합계 줄의 2px 선이 두 겹으로 보였고, 합계 아래 선은 서브카드 테두리 바로 위에 한 겹 더 그어졌다(#1558 F3 와 같은 까닭) */
.flo-amount-row:has(+ .flo-amount-row--total),
.flo-amount-row.flo-amount-row--total { border-bottom: 0; }
/* 🆕 합계 줄. 킷 09- 2-12 `li.total` (2026-09-29 · 이슈 #1525). 지급 예정액이 다른
   6줄과 같은 모양이라 눈에 띄지 않았다. 운영자 상세와 공개 명세가 함께 쓴다. */
/*
 | 🔻 2026-09-29 (#1530 독립 검토) 15px → 16/700(T2 · 카드·절 제목 눈금). 굵기가 이미
 |    700 이라 강조 본문(14/600)보다 「절 제목」 쪽에 가깝다. 명세에서 가장 강조할 값
 |    하나(지급 예정액)이니, 본문 강조가 아니라 제목 눈금으로 올린다.
 */
.flo-amount-row--total {
    margin-top: 8px; /* 🔻 2026-10-05 (#1565) ~~6~~ */
    padding-top: 12px;
    border-top: 2px solid var(--flo-line);
    font-weight: 700;
    font-size: 16px;
    color: var(--flo-ink-1);
}
/* 🆕 2026-09-30 (#1530 독립 검토) 줄에만 걸면 굵기와 색이 상속되지 않는다.
   초기화 CSS 가 dt·dd 에 굵기 400 을, `.flo-main .flo-ink-sub` 가 회색을 직접 준다.
   그래서 합계 줄은 dt·dd 에도 같은 값을 주고, 회색 규칙(클래스 둘)을 이기도록 클래스 둘에 태그를 더한다. */
.flo-amount-row.flo-amount-row--total > dt,
.flo-amount-row.flo-amount-row--total > dd {
    font-weight: 700;
    color: var(--flo-ink-1);
}
/* 🔻 2026-10-05 (#1567 독립 검토) 합계 줄은 16 글자라 줄 높이 16/24(`--flo-lh-card`)다. 바깥에서 20 을 받고 있었다 */
.flo-amount-row--total,
.flo-amount-row.flo-amount-row--total > :is(dt, dd) { line-height: var(--flo-lh-card); }

/* ═══ 명세 공유 주소═══════════════════════════════════════════════════
 |
 | 인플루언서에게 그대로 보낼 주소다.
 |
 | 🔻 **2026-08-27 `keep-all` → `break-all`** (이슈 #816 · 정본 05- 9-c).
 |    옛 주석은 *「없으면 낱말 가운데가 끊긴다」* 고 적었는데, **주소에는
 |    낱말이 없다** — `share_token` 43자를 담아 **띄어쓰기 없이 60~80자**다.
 | 🚨 **`keep-all` 은 끊을 자리를 아예 주지 않아** 그릇(`.flo-subcard`) 밖으로 넘친다.
 |    ⚠️ **폭의 문제가 아니라 규칙의 문제**라 창을 넓혀도 남는다.
 | 🔑 **같은 것을 나르는 `.flo-seeding-url` 이 이미 `break-all`** 이다 —
 |    **새로 정하는 것이 아니라 맞추는 일**이다.
 | 🚫 `overflow-wrap: anywhere` 로 갈음하지 마라 — 그 구제는 **표 칸에만** 걸려 있고
 |    이 두 주소는 `<p>` 라 닿지 않는다.
 */
.flo-share-url { word-break: break-all; }

/* ═══ 재계산 필요 표기 ═════════════════════════════════════════════════
 |
 | 확정한 뒤 매출이 바뀌었다는 보조 표기다. 상태는 여전히 「확정」이고
 | 이 표기만 옆에 붙는다.
 |
 | 🔻 **2026-08-27 `--sig-fail` → `--sig-warn`** (이슈 #816 · 정본 05- 9-c).
 |    🔑 **멈춘 것이 없다** — 확정본은 여전히 유효한 기록이고 **새 버전이 하나 더
 |    발행될 뿐**이라 **「중단」은 과하다.** 주문귀속 상세가 같은 사실에 이미
 |    주의색을 쓰고 있었고, **한 사실이 화면마다 다른 무게로 읽히고 있었다.**
 | 🚫 **`--sig-done`·`--flo-ink-*` 로 낮추지 마라** — **손댈 자리라는 사실까지 지워진다.**
 | 🔻 **되돌림 값을 지웠다** — `--sig-fail` 도 `--flo-ink-1` 도 **둘 다 정의돼 있어
 |    그 자리는 절대 쓰이지 않았다.** 🚨 **쓰이지 않는 대비는 「대비가 있다」는
 |    안심만 준다.**
 */
.flo-settlement-recalc { color: var(--sig-warn-ink); }

/* ═══ 병기하는 오류 코드 ═══════════════════════════════════════════════
 |
 | 문의가 오면 운영자가 같은 코드로 찾는다 — 화면 아래에 작게 병기한다.
 */
.flo-error-code { color: var(--flo-ink-3); }

/* ═══ 복사해 가라고 내놓은 번호표 ═════════════════════════════════════
 |
 | 팬이 받는 쿠폰 번호다. 팬이 하는 일은 「복사해서 카페24에 입력」 하나라
 | 화면에서 가장 크고, 눌러서 고르지 않아도 통째로 선택된다.
 | 🔑 `.flo-serial` 의 변형이다 — 글꼴은 그쪽이 갖고 여기는 크기와 선택만 정한다.
 */
.flo-serial--handout {
    user-select: all;
    font-size: 22px;
    font-weight: 600;
    line-height: var(--flo-lh-title); /* 🔻 2026-10-05 (#1567 독립 검토) 22/30 */
    letter-spacing: 1px;
}

/* ═══ 막힌 발송 ═══════════════════════════════════════════════════════
 |
 | 메일 발송 이력에서 「막힘」 상태를 나타내는 글자다.
 | 🔑 색만으로 가르지 않는다 — 사유가 언제나 바로 옆에 붙는다.
 */

/* ═══ 기본 템플릿 표시 ═════════════════════════════════════════════════
 |
 | 이 템플릿이 기본이라는 표시다.
 | 🚫 캠페인 배지(`x-status-badge`)를 빌려 쓰지 마라 — 그쪽은 캠페인 트랙 전용이다.
 */
.flo-template-default { color: var(--flo-ink-1); }
/*
 | 대시보드 캠페인 판 — 🔑 **줄이 적어도 판이 오그라들지 않게 최소 높이를 준다**
 | (2026-08-27 · 이슈 #807 · 인라인 `style="min-height: 236px"` 를 옮긴 것).
 |
 | 🔑 **값은 그대로다** — 🚫 새로 고안한 것이 아니다(R-307 ①).
 | ⚠️ **옆 판(밀린 일)과 높이를 맞추는 값**이라 한쪽만 바꾸면 두 판이 어긋난다.
 */
.flo-dash-campaigns { min-height: 236px; }

/* ═══ 상품 고르기 — 카드 바둑판 (이슈 #891 · 킷 05- 5-11 `.pp-grid`·`.pp-card`) ═══
 |
 | 🔑 **이 화면에서 새로 만든 유일한 부품이다.** 스텝퍼·창·표·빈 상태는
 |    `<x-steps>`·`<x-modal>`·`.flo-table`·`<x-empty-state>` 가 이미 있어 그대로 썼다(R-307).
 |
 | 🔑 **이름은 저장소 관례대로 `flo-` 접두다** — 킷의 `pp-`·`cp-` 는 레거시 이름이라
 |    가져오지 않았다. 대응은 이 주석이 남긴다.
 | 🚫 **날색을 적지 마라** — 토큰 값이 이미 킷과 같다(`--flo-primary` = `#6d5bc7` 실측).
 |    섞어 적으면 어느 쪽이 맞는지 알 수 없게 된다.
 */
.flo-pick-search {
    display: flex;
    gap: 8px;
    margin-bottom: 12px; /* 🔻 2026-10-05 (#1565) ~~14~~ */
}

.flo-pick-search input {
    flex: 1;
    height: var(--flo-control-h);
    padding: 0 12px;
    border: 1px solid var(--flo-line-strong);
    border-radius: var(--flo-radius);
    color: var(--flo-ink-1);
    background: var(--flo-card);
}

.flo-pick-search input::placeholder { color: var(--flo-ink-3); }

/*
 | 🆕 **분류 선택 상자** (2026-09-08 · 이슈 #1419).
 |
 | 🚨 **선택자를 `.flo-pick-search select` 로 적는다.** 낱개 클래스(`(0,1,0)`)는
 |    바탕 규칙 `.flo-main select`(`(0,1,1)`)보다 약해 **선과 여백이 조용히 무시된다.**
 |    같은 무게로 적고 같은 파일에서 뒤에 두어야 이긴다.
 | 🔑 **바탕 규칙이 준 것은 남긴다** — 오른쪽 여백 28px 은 화살표 자리라 지우지 않는다.
 | 🔑 **옆 입력칸과 같은 높이·같은 선이다** · 한 줄에 나란히 서므로 다르면 줄이 어긋난다.
 | 🔑 **늘어나지 않는다**(`flex` 없음) · 늘리면 검색칸을 밀어낸다. 분류 이름이 계층으로
 |    길어질 수 있어 상한만 둔다.
 */
.flo-pick-search select {
    /* 🔻 2026-10-03 (#1555) 240px → 보통 칸 토큰(값 같음) */
    max-width: var(--flo-control-w-mid);
    height: var(--flo-control-h);
    border-color: var(--flo-line-strong);
}

/*
 | 🔑 **칸 너비를 고정하지 않는다** — 창 폭이 세 단(1024↑ / 768~1023 / 미만)으로
 |    갈리므로 `auto-fill` 이 스스로 접힌다.
 | 🔑 **바둑판 자체가 넘친다** — 페이지가 세로로 길어지면 아래 버튼이 밀려난다.
 */
.flo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    /*
     | 🚨 **줄 높이는 내용이 정한다** (이슈 #896). 이 값이 없으면, 바둑판이 창에서
     |    「정해진 높이」를 받았을 때 브라우저가 **줄을 눌러 맞춘다** — 실측에서 카드가
     |    248px 에서 48px 로 눌려 **사진이 잘렸다.** 넘치는 만큼은 눌리지 말고 굴러야 한다.
     */
    grid-auto-rows: max-content;
    gap: 12px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}

/*
 | 카드 하나 = 상품 하나. 🔑 **`<label>` 이다** — 안의 체크상자가 곧 폼 값이라
 |    **스크립트가 꺼져도 담긴다.**
 */
.flo-pick-card {
    /*
     | 🚨 **기준점을 카드에 둔다** (이슈 #896). 아래 체크상자는 `position: absolute` 인데
     |    기준이 될 상자가 없으면 **창(`<dialog>`)이 기준**이 된다 — 브라우저가 `dialog` 에
     |    `position: absolute` 를 기본으로 주기 때문이다. 그러면 바둑판이 그 상자를 **잘라
     |    내지 못해**, 창은 「내용이 1,512px」로 알고 **투명한 빈 칸을 굴리는 막대**를 그린다.
     |    🚫 지우지 마라 — 지워도 화면은 멀쩡해 보이고 **막대만 하나 더 생긴다.**
     */
    position: relative;
    display: block;
    border: 1.5px solid var(--flo-line);
    border-radius: var(--flo-radius-card); /* 🔻 2026-10-05 (#1565) ~~10~~ → 12 */
    overflow: hidden;
    cursor: pointer;
    background: var(--flo-card);
    text-align: left;
    transition: border-color .12s, box-shadow .12s;
}

/* 🔑 고른 것을 **테두리와 바깥선 두 겹**으로 말한다 — 색 하나로만 가르지 않는다 */
.flo-pick-card:has(input:checked) {
    border-color: var(--flo-select-border);
    box-shadow: 0 0 0 2px var(--flo-select-ring);
    background: var(--flo-select-fill);
} /* 🔻 2026-10-11 (#1630) 고른 모양 한 벌 · 테두리 중간 보라 + 가장 옅은 바탕 + 옅은 고리 + 체크 표지 */

/* 🔻 2026-10-11 (#1612 독립 검토) ~~`--flo-primary-brt`~~ → `--flo-ink-3` · 고르는 카드 셋(`.flo-card` · `.flo-choice` · 이 카드)의 마우스 올림을 하나로 맞췄다. 보라는 「고름」에만 쓴다 */
.flo-pick-card:hover { border-color: var(--flo-ink-3); }

/* 🚨 키보드로 오는 사람에게 지금 어디인지 보여야 한다 */
.flo-pick-card:has(input:focus-visible) {
    outline: 2px solid var(--flo-primary);
    outline-offset: 1px;
}

/* 🔑 체크상자는 숨기되 **초점은 살려 둔다** — `display:none` 이면 탭이 건너뛴다 */
.flo-pick-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.flo-pick-card__thumb {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--flo-bg);
    display: block;
}

/* 🔑 사진이 없는 상품이 많다 — 빈 칸이 무너지지 않게 같은 자리를 차지한다 */
.flo-pick-card__thumb--none {
    display: grid;
    place-items: center;
    color: var(--flo-ink-3);
}

.flo-pick-card__meta { padding: 8px 10px 10px; }

.flo-pick-card__name {
    font-weight: 600;
    color: var(--flo-ink-1);
    line-height: var(--flo-lh-ui); /* 🔻 2026-10-05 (#1567) ~~1.35~~ */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.flo-pick-card__price {
    margin-top: 4px;
    font-weight: 700; /* 🔻 2026-10-14 (#1737) ~~800~~ */
    color: var(--sig-progress-ink);
}

.flo-pick-card__no { color: var(--flo-ink-3); }

/* 🔑 판매중지도 담을 수 있다 — 막지 않고 알리기만 한다(26- 6장) */
.flo-pick-card__halted { color: var(--sig-warn-ink); }

.flo-pick-status {
    color: var(--flo-ink-3);
    text-align: center;
    padding: 24px 0;
}
/*
 | 🆕 2026-10-11 (#1634) 고르는 창 안 조회 실패 안내 · 바둑판 한 칸(150)에 갇히지 않고 한 줄 전체를 쓴다.
 | 🔑 0건 문장(`.flo-pick-status`)도 같은 폭을 쓴다.
 */
.flo-pick-grid > .flo-pick-status { grid-column: 1 / -1; }

.flo-pick-more { text-align: center; margin-top: 12px; }

/*
 | 🔻 2026-10-11 (#1623 · 🧑 「B 상품 카드 (권장)」) **담은 상품 표를 카드 바둑판으로 바꿨다.**
 |    ~~`.flo-picked-table` · `.flo-picked-table .flo-td { text-align: center; }` · 짧은 칸 폭(`.flo-picked-col--option` 160 ·
 |    `--price` 100 · `th.flo-picked-col--qty` 110 · `th.flo-picked-col--pick` 70)~~ · 표가 없어 짚을 자리가 없다.
 |    폭 · 가운데 맞춤의 까닭(#1527 균등 분할 · #1572 칸 가운데)은 표의 일이라 카드에는 걸리지 않는다.
 |
 | 🔑 **고른 모양은 선택 카드(`.flo-pick-card`)와 같은 한 벌이다** · 보라 테두리 + 바깥선 2 + 오른쪽 위 체크 표시.
 |    ~~카드에는 바탕을 깔지 않는다(🧑 #1582 「바닥 한 단계는 걷었다」 · 목록 줄 `.flo-choice` 만 바탕이 있다).~~
 |    🔻 2026-10-11 (#1630 · 🧑 「하나로 통일 (권장)」) 고르는 모든 것이 한 벌이다 · 테두리 + 가장 옅은 바탕 + 옅은 고리 + 체크 표지(`--flo-select-*`).
 | 🚫 `.flo-pick-card` 를 그대로 달지 마라 · 그 규칙은 `:has(input:checked)` 라 카드 안의 라디오(대표 · 옵션)까지 「고름」으로 읽는다.
 |    여기서는 「담기」 상자 하나만 본다(`.flo-picked-card__pick input`).
 | 🔑 한 줄 장 수는 폭이 정한다(`auto-fill` · 232) · 1440 네 장 · 768 두 장 · 640 이하 한 장(아래 640 구간).
 */
.flo-picked-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 2px; /* 🔑 고른 카드의 바깥선 2 가 판 끝에서 잘리지 않게 한다 */
    list-style: none;
}

.flo-picked-card {
    position: relative; /* 🔑 「담기」 체크 · 「저장하면 제거」 표시의 기준 */
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding-bottom: 16px;
    border: 1.5px solid var(--flo-line);
    border-radius: var(--flo-radius-card);
    overflow: hidden;
    background: var(--flo-card);
    text-align: left;
    transition: border-color .12s, box-shadow .12s, background-color .12s; /* 🔻 2026-10-11 (#1626) 바탕색 추가 · 담기를 풀면 바탕이 바뀐다 */
}
.flo-picked-card:hover { border-color: var(--flo-ink-3); }
.flo-picked-card:has(.flo-picked-card__pick input:checked) {
    border-color: var(--flo-select-border);
    box-shadow: 0 0 0 2px var(--flo-select-ring);
    background: var(--flo-select-fill);
}
/*
 | 🆕 2026-10-11 (#1626) 담기를 푼 카드는 점선 테두리 · 회색 바탕이다. 흐림(아래)만으로는 「고르지 않은 카드」와 「빠질 카드」가 같아 보였다.
 | 🔑 고른 카드(보라 실선) · 빠질 카드(회색 점선)가 테두리 모양으로도 갈린다(색 하나로만 가르지 않는다).
 */
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) {
    border-style: dashed;
    border-color: var(--flo-line-strong);
    background: var(--flo-bg);
}
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)):hover { border-color: var(--flo-ink-3); }

/*
 | 「담기」 · 오른쪽 위 둥근 체크. 누름 자리는 44 × 44 이고 보이는 동그라미는 24 다(#1608 · WCAG 2.5.8).
 | 🔑 상자는 눈에만 감춘다(화면의 `flo-sr-only`) · Tab · Space · 낭독 이름 · 스크립트 없는 저장이 그대로다.
 */
.flo-picked-card__pick {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.flo-picked-card__pick::after {
    content: "";
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: 1.5px solid var(--flo-line-strong);
    border-radius: 50%;
    background: var(--flo-card);
    /*
     | 🆕 2026-10-11 (#1626) 모서리 배지 · 흰 고리 2 + 옅은 그림자로 사진 위에서도 테두리가 묻히지 않는다.
     |    고리는 카드 바탕과 같은 흰색이라 사진이 없는 연보라 판 위에서도 같은 모양이다.
     */
    box-shadow: 0 0 0 2px var(--flo-card), 0 1px 3px rgba(25, 31, 40, .18);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background-color .12s, border-color .12s;
}
.flo-picked-card__pick:hover::after { border-color: var(--flo-primary); }
.flo-picked-card__pick:has(input:checked)::after {
    content: "✓";
    border-color: var(--flo-primary);
    background: var(--flo-primary);
}
.flo-picked-card__pick:has(input:focus-visible)::after { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/*
 | 담기를 푼 카드 · 흐리게 하고 「저장하면 제거」를 단다. 체크는 흐리지 않는다(다시 누를 자리다).
 | 🔑 대본 없이 `:has()` 가 가른다 · 문장은 바둑판 아래 안내 줄이 그대로 갖는다.
 */
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) > :not(.flo-picked-card__pick) { opacity: .45; }
.flo-badge.flo-picked-card__removing { display: none; }
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) .flo-badge.flo-picked-card__removing {
    display: inline-flex;
    position: absolute;
    top: 12px;
    left: 12px;
}
/* 🔑 흐림이 표시까지 덮지 않게 한다 · 표시는 상품 칸(흐려지는 쪽) 안에 있어 따로 되돌린다 */
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) > .flo-picked-product { opacity: 1; }
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) .flo-picked-product > :not(.flo-picked-product__meta),
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) .flo-picked-product__meta > :not(.flo-picked-card__removing) { opacity: .45; }
/* 🆕 2026-10-11 (#1626) 빠질 카드의 사진은 무채색이다 · 흐림만으로는 사진 색이 남아 「고른 카드」처럼 보였다 */
.flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) .flo-picked-product__thumb { filter: grayscale(1); }

/* ── 담긴 상품 한 장 · 사진과 이름 (2026-09-01 · 이슈 #1059) ──────────
 |
 | 🧑 *"최대한 UIUX가 사용자 측면에서 보기 쉽게"*.
 |
 | 🚨 **고르는 창에는 사진이 있는데 담긴 표에는 없었다.** 같은 상품인지 **이름으로만**
 |    견줘야 했고, 이름이 비슷한 상품이 여럿이면 가릴 방법이 없었다.
 | 🔑 **사진 규칙은 `ProductImage` 한 곳이다** · 창의 카드와 같은 것을 부른다.
 | 🚫 없는 사진을 채워 넣지 마라 · 빈 자리는 같은 크기로 잡고 「사진 없음」이라 적는다.
 | 🔻 2026-10-11 (#1623) ~~줄 안 44 × 44 사진 + 옆 이름~~ → 카드 위 사진 판(4:3) + 아래 이름. 640 이하에서는 왼쪽 72 사진 + 옆 이름이다.
 */
.flo-picked-product {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.flo-picked-product__thumb {
    display: block;
    width: 100%;
    /* 🔻 2026-10-11 (#1637) ~~aspect-ratio: 4 / 3~~ → 높이 144 고정. 사진이 있든 없든 같은 판이라 한 줄에 섞여도 이름 · 번호 줄이 맞는다(폭이 달라도 높이가 같다) */
    height: 144px;
    object-fit: cover;
    border-bottom: 1px solid var(--flo-line);
    background: var(--flo-bg);
}

/* 🔑 사진이 없는 상품이 많다 · 같은 자리를 잡고 비었다고 적는다 */
/*
 | 🔻 2026-10-11 (#1626) ~~회색 판 + 글자 「사진 없음」(13 · 판 높이 약 190)~~ → 연보라에서 흰색으로 흐르는 판 + 상품 상자 선 그림(28).
 |    사진이 없는 카드가 대부분인데 회색 빈 판이 카드 위 절반을 차지해, 상품 이름보다 빈자리가 먼저 보였다.
 | 🔑 색은 이미 있는 값만 쓴다(`--flo-primary-soft` · `--flo-card` · 그림 `--flo-primary-brt`) · 새 색을 짓지 않았다(R-307).
 | 🚫 사진처럼 보이는 그림을 넣지 마라 · 이 판은 「사진이 없다」는 표시다.
 */
.flo-picked-product__thumb--none {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--flo-primary-soft), var(--flo-card));
    color: var(--flo-primary-brt);
}
/*
 | 🔻 2026-10-11 (#1637) ~~바둑판에 사진이 한 장도 없으면 빈 판을 높이 88 로 낮추는 규칙(`:has`)~~ · 폐기.
 |    사진이 있는 카드(4:3 약 190)와 없는 카드(88)가 한 줄에 서면 판 높이가 달라 이름 줄이 어긋났다. 이제 둘 다 144 다.
 */

/* 🔻 2026-10-11 (#1626) 사이 ~~8~~ → 4 · 이름과 번호 줄이 한 덩어리로 읽힌다 */
.flo-picked-product__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 0 16px;
}

/*
 | 🔑 **한글은 낱말 단위로 접는다** (R-308) · 글자 하나씩 끊기면 읽기 어렵다.
 | 🔑 두 줄까지 보인다 · 카드 높이가 이름 길이로 들쭉날쭉하지 않게 한다(고르는 창 카드와 같다).
 | 🔻 2026-10-11 (#1626) 글자 ~~14 · 줄 20~~ → 15 · 줄 22 · 넓은 창에서는 두 줄 높이(44)를 늘 잡는다.
 |    이름이 한 줄인 카드와 두 줄인 카드가 한 줄에 서면 번호 · 옵션 · 값 줄이 들쭉날쭉했다.
 */
.flo-picked-product__name {
    color: var(--flo-ink-1);
    font-size: 14px; /* 🔻 2026-10-14 (#1737) ~~15 · 줄 22 · 최소 높이 44~~ → 14/600/20 · 두 줄 40 */
    font-weight: 600;
    line-height: var(--flo-lh-ui);
    min-height: 40px;
    word-break: keep-all;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 🆕 2026-10-11 (#1623) 번호와 「대표」 알약이 한 줄이다 · 좁으면 접힌다 */
.flo-picked-product__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-height: 24px; /* 🔻 2026-10-12 (#1661) ~~32~~ · 「대표」 알약이 24 로 작아졌다 */
}

/*
 | 🆕 2026-10-11 (#1615) 「대표」 알약 · 모양은 고르는 칩(`.flo-pick` · 32 알약)이다.
 | 🔻 2026-10-11 (#1623) 대표인 카드만 보라 채움 「대표」, 나머지는 점선 「대표 지정」이다(글자가 함께 바뀐다 · 색 하나로만 가르지 않는다).
 |    마우스가 있는 화면에서는 카드에 올리거나 카드 안에 초점이 오면 보인다. 터치 화면은 올릴 수 없어 늘 보인다(`hover: hover`).
 | 🔑 감춘 동안에도 누를 수 있고 Tab · 화살표가 닿는다 · 초점이 오면 곧 보인다.
 */
.flo-main .flo-picked-primary .flo-pick > span { border-style: dashed; border-color: var(--flo-line-strong); color: var(--flo-ink-3); }
/*
 | 🔻 2026-10-12 (#1661 · 🧑 「대표 토글이 너무 크지않나?」) 「대표」 알약을 32 에서 24 · 글자 13 · 옆 칸 8 으로 줄였다.
 |    보이는 크기만 줄이고 누름 자리는 라벨의 투명 덧칸이 위아래로 8 씩 넓혀 40 을 지킨다(#1608).
 */
.flo-main .flo-picked-primary .flo-pick { position: relative; }
.flo-main .flo-picked-primary .flo-pick::after { content: ""; position: absolute; inset: -8px -4px; }
.flo-main .flo-picked-primary .flo-pick > span { height: 24px; line-height: 22px; padding: 0 8px; }
.flo-main .flo-picked-primary .flo-pick > input:checked + span {
    border-style: solid;
    border-color: var(--flo-primary);
    background: var(--flo-primary);
    color: #fff;
}
/* 🔑 알약 안이 줄 배치라 앞 칸이 사라진다 · 「대표 지정」 사이 칸을 지킨다 */
.flo-picked-primary__verb { white-space: pre; }
.flo-picked-primary .flo-pick > input:checked + span .flo-picked-primary__verb { display: none; }
@media (hover: hover) {
    .flo-picked-card:not(:hover, :focus-within) .flo-picked-primary .flo-pick:has(input:not(:checked)) { opacity: 0; }
}

/*
 | 제공 옵션 · 고를 것이 둘 이상일 때만 라디오다 (이슈 #1058).
 | 🚫 한 줄에 억지로 붙이지 마라 · 옵션 이름이 길면 접혀야 한다(R-308).
 | 🔻 2026-10-11 (#1623) ~~보이는 라디오 동그라미 + 글자~~ → 알약. 라디오는 눈에만 감춘다(화면의 `flo-sr-only`) · 화살표 · Space 가 그대로다.
 |    고른 알약은 목록 줄 고르기(`.flo-choice`)와 같이 보라 테두리 · 연보라 바탕 · 체크 표시가 함께 바뀐다(색 하나로만 가르지 않는다).
 */
/*
 | 🔻 2026-10-11 (#1626) ~~맨 줄(padding 0 16)~~ → 이름표 칸 + 값 칸 두 칸. 「제공 옵션」 이름표가 왼쪽, 고를 알약 · 옵션 이름이 오른쪽이다.
 | 🔑 첫 줄 글자 기준선으로 맞춘다(`baseline`) · 알약이 두 줄로 접혀도 이름표는 첫 줄 옆에 선다.
 | 🔑 옵션이 없는 상품은 줄을 걷는다 · 「옵션 없음」은 낭독기에만 남는다(`flo-sr-only` · 자리를 갖지 않는다).
 |    `display: contents` 로 칸을 풀면 남는 것은 화면 밖 글자뿐이라 카드 사이 칸(12)도 생기지 않는다.
 */
.flo-picked-card__option {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px; /* 🔻 2026-10-11 (#1637) ~~이름표 칸 + 값 칸 두 칸(column-gap 12)~~ → 이름표가 위, 값이 아래 · 알약이 카드 폭을 다 쓴다 */
    padding: 12px 16px 0; /* 🔻 2026-10-12 (#1661) 위 12 + 가는 선 · 이름 묶음과 옵션 묶음이 단락으로 갈린다 */
    border-top: 1px solid var(--flo-line-soft);
}
/*
 | 🔻 2026-10-12 (#1661 · 🧑 「박스 안에 텍스트가 너무 평이해 단락 구분이 안됨」) 값 글자를 14 · 진한 글자로 올린다.
 |    이름표(13 · 흐림)와 값이 한눈에 갈리고, 이름 묶음 · 옵션 묶음 · 값 묶음이 선과 여백으로 단락이 된다.
 */
.flo-picked-card__option > :not(.flo-picked-card__label, input) { color: var(--flo-ink-1); font-size: 14px; line-height: 20px; font-weight: 600; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 값 14/600(이름표-값 한 모양) */
.flo-picked-card__option > .flo-picked-card__none { color: var(--flo-ink-3); font-weight: 400; }
/*
 | 🔻 2026-10-11 (#1637) ~~옵션이 없는 상품은 줄을 걷는다(`display: contents` · 이름표 감춤)~~ → 줄은 늘 있고 값 자리에 「없음」을 보인다.
 |    줄이 있는 카드와 없는 카드가 한 줄에 서면 아래 푸터까지 빈 간격이 달랐다(1440에서 132).
 */
.flo-picked-card__none { color: var(--flo-ink-3); }

/* 🆕 2026-10-11 (#1626) 카드 안 작은 이름표 · 제공 옵션 · 판매가 · 제공수량(예전 표의 열 이름 그대로) */
.flo-picked-card__label {
    color: var(--flo-ink-3);
    font-size: 13px;
    font-weight: 400; /* 🔻 2026-10-14 (#1737) ~~500~~ */
    line-height: 18px;
    white-space: nowrap;
}

.flo-picked-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    margin: 0;
    padding: 0;
}

.flo-picked-variant {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: var(--flo-control-h-sm);
    padding: 0 12px;
    border: 1px solid var(--flo-line-strong);
    border-radius: var(--flo-radius);
    background: var(--flo-card);
    color: var(--flo-ink-2);
    cursor: pointer;
    word-break: keep-all;
}
.flo-picked-variant:hover { border-color: var(--flo-ink-3); }
.flo-picked-variant:has(input:checked) {
    border-color: var(--flo-primary);
    background: var(--flo-primary-soft);
    color: var(--flo-primary-deep);
    font-weight: 600;
}
.flo-picked-variant:has(input:checked)::before { content: "✓"; color: var(--flo-primary); font-weight: 700; }
.flo-picked-variant:has(input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/* 🆕 2026-10-11 (#1623) 판매가 · 제공수량 · 카드 맨 아래 한 줄 */
/*
 | 🔻 2026-10-11 (#1626) 위에 가는 구분선(1 · `--flo-line-soft`)과 위 여백 12 를 둔다 · 상품 정보와 「정할 값」이 갈린다.
 |    두 값은 아래 끝으로 맞춘다(`flex-end`) · 이름표는 위, 값은 아래 한 줄이다.
 | 🔑 판매가 줄 높이를 수량 단추 덩어리 높이(32 · 휴대폰 44)와 같게 해 두 값의 글자 가운데가 한 선에 선다.
 */
.flo-picked-card__foot {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 12px 16px 0;
    border-top: 1px solid var(--flo-line-soft);
}
.flo-picked-card__figure {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.flo-picked-card__figure--qty { align-items: flex-end; }
.flo-picked-card__price {
    color: var(--flo-ink-1);
    font-size: 16px;
    font-weight: 700;
    line-height: var(--flo-control-h-sm); /* 🔻 2026-10-11 (#1626) ~~24px~~ · 수량 덩어리와 같은 높이 */
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 | 🆕 2026-10-11 (#1623) 수량 단추 · − 칸 + 한 덩어리. 높이 32(조밀 조작부) · 휴대폰 44.
 | 🔑 칸은 그대로 글자 입력이다(`data-flo-number="int"`) · 🚫 `type="number"` 로 바꾸지 마라(`flo-number.js` 머리 주석).
 | 🔻 ~~`.flo-picked-qty { width: 76px; text-align: center; }` + 칸 테두리(`rounded border px-2`)~~ · 테두리는 덩어리가 갖는다.
 */
.flo-qty {
    display: inline-flex;
    align-items: stretch;
    height: var(--flo-control-h-sm);
    border: 1px solid var(--flo-line-strong);
    border-radius: var(--flo-radius);
    background: var(--flo-card);
    overflow: hidden;
}
.flo-qty__btn {
    position: relative;
    width: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--flo-ink-2);
    cursor: pointer;
}
/* 🔑 − + 는 선으로 그린다(가로 막대 · 늘리기는 세로 막대 하나 더) · 글자 「−」는 결측 표기 금지 글자다 */
.flo-qty__btn::before,
.flo-qty__btn[data-flo-number-step="1"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-50%, -50%);
}
.flo-qty__btn[data-flo-number-step="1"]::after { transform: translate(-50%, -50%) rotate(90deg); }
.flo-qty__btn:hover { background: var(--flo-line-soft); }
.flo-qty__btn:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: -2px; }
.flo-main .flo-qty .flo-picked-qty {
    width: 48px;
    height: auto;
    min-height: 0; /* 🔑 입력 칸 기본 높이(40)를 걷는다 · 높이는 덩어리(32 · 휴대폰 44)가 정한다 */
    padding: 0;
    border: 0;
    border-left: 1px solid var(--flo-line);
    border-right: 1px solid var(--flo-line);
    border-radius: 0;
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.flo-main .flo-qty .flo-picked-qty:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: -2px; }

/*
 | 🆕 2026-10-11 (#1623) 640 이하 · 한 줄에 한 장. 사진은 왼쪽 72 로 줄이고 이름이 옆에 선다.
 | 🔑 누름 자리는 44 다(옵션 알약 · 수량 단추 · #1608).
 | 🔑 「저장하면 제거」는 이름 아래 제자리에 선다 · 사진 위에 얹으면 72 폭을 넘어 이름을 가린다.
 */
@media (max-width: 640px) {
    .flo-picked-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .flo-picked-card { padding: 12px 0; }
    .flo-picked-product { flex-direction: row; align-items: flex-start; padding: 0 48px 0 12px; }
    .flo-picked-product__thumb {
        flex: none;
        width: 72px;
        height: 72px;
        aspect-ratio: auto;
        border: 1px solid var(--flo-line);
        border-radius: 8px;
    }
    .flo-picked-product__meta { flex: 1 1 auto; padding: 0; }
    .flo-picked-card:has(.flo-picked-card__pick input:not(:checked)) .flo-badge.flo-picked-card__removing { position: static; align-self: flex-start; }
    /* 🔻 2026-10-11 (#1626) 휴대폰은 이름표가 알약 위에 선다 · 옆에 두면 44 알약이 360 폭에서 두 줄로 접혔다 */
    .flo-picked-card__option { padding: 12px 12px 0; } /* 🔻 2026-10-12 (#1661) ~~0 12px~~ 위 12 + 선 */
    /* 🔻 2026-10-11 (#1626) ~~`.flo-picked-card__foot { padding: 0 12px; }`~~ → 위 12 · 판매가 줄 높이 44(수량 덩어리와 같다) · 이름 두 줄 자리는 걷는다(옆에 사진이 있어 높이가 이미 맞는다) */
    .flo-picked-card__foot { padding: 12px 12px 0; }
    .flo-picked-card__price { line-height: 44px; }
    .flo-picked-product__name { min-height: 0; }
    .flo-picked-variant { height: 44px; padding: 0 16px; }
    .flo-qty { height: 44px; }
    .flo-qty__btn { width: 44px; }
    .flo-main .flo-qty .flo-picked-qty { width: 56px; }
}

/* ── 단계 이동 줄 · 표 기준 가운데 (2026-09-01 · 🧑 지시 · 이슈 #1059) ──
 |
 | 🧑 *"버튼은 해당 테이블 중앙으로 이동"*.
 |
 | 🚨 **이유를 숨기지 마라** · 못 넘어가는 까닭은 단추 바로 아래에 적는다.
 |    직전까지 단추와 한 줄로 왼쪽에 붙어 있어 어느 단추에 대한 말인지 흐렸다.
 | 🚫 `position: fixed` 로 띄우지 마라 · 스크롤과 어긋나 화면 중간에 뜬다.
 */
/* 🔻 2026-10-12 (#1648) ~~`.flo-picked-go` 가운데 줄 규칙 셋~~ 을 걷었다 · 단계 이동 줄이 다른 걸음과 같은 판 아래 줄(`.flo-form-bar`)로 옮겨 갔다 */

/* ── 고르는 창의 아래 단추 줄 (2026-09-01 · 이슈 #1057) ────────────────
 |
 | 🔑 **가운데 정렬은 킷의 값이다** (`popup.css` 37행 `.modal-btn-wrap`).
 |    🚫 새로 고안한 값이 아니다 (R-307).
 | 🔑 [취소] 는 창만 닫는 폼이고 [선택 완료] 는 바깥 폼을 보낸다 · 서로 다른 폼이라
 |    한 폼 안에 나란히 둘 수 없다.
 */
/*
 | 🔻 2026-10-06 (#1586) ~~가운데 · 위 14~~ → 오른쪽 끝 · 위 24. 다른 창의 단추 줄(`.flo-modal__body .flo-form__actions`)과
 |    한 모양으로 맞춘다. 창마다 단추 자리가 달라 눈이 단추를 찾아 옮겨 다녔다(킷보다 화면 사이 일관성이 먼저다 · #1530).
 */
.flo-pick-confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px; /* 🔻 2026-10-05 (#1565) ~~10~~ */
    margin-top: 24px;
}

/*
 | 🔑 **고른 카드에 표시를 하나 더 준다** (이슈 #1059).
 |    테두리 색만으로는 **어느 것을 골랐는지 한눈에 들어오지 않았다** · 색 하나로만
 |    가르지 않는다는 이 저장소의 원칙과도 맞는다.
 | 🚫 자리를 차지하게 만들지 마라 · 카드 안 글이 밀리면 줄이 어긋난다.
 */
.flo-pick-card:has(input:checked)::after {
    content: "✓";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--flo-primary);
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

/* 🔑 이미 담긴 카드는 **고를 것이 아니다** · 눌러도 아무 일이 안 일어난다 */
.flo-pick-card--already {
    cursor: default;
    background: var(--flo-bg);
}

.flo-pick-card--already:hover { border-color: var(--flo-line); }


/* ═══ 캠페인 위저드 1단계 — 기본정보 (이슈 #921 · 킷 `05-` 5-5 · 5-7 · 5-8) ═══
 |
 | 🔑 **정본은 FLO 디자인 킷**이다 (R-306) — `docs/05-캠페인-상세-편집.md`.
 |    킷은 이 규칙들을 **화면 안 인라인 `<style>`** 에 두었다. 그대로 옮기면 R-307 과
 |    부딪히므로 **여기 한 곳**으로 가져왔다. 🚫 화면으로 되돌리지 마라 —
 |    스타일시트가 인라인을 이길 수 없고, 주석까지 HTML 에 실린다.
 |
 | 🔑 **왼쪽 이름 · 오른쪽 입력** 배치는 킷이 이미 갖고 있다 —
 |    `admin_sub.css` 508~519 행(`.campaign-form-group-wrap`). 여기서는 **덧입히는 것만** 적는다.
 | 🔑 색은 **토큰으로 적는다** — 킷 원문의 `#6d5bc7` 은 `--flo-primary` 와 같은 값이다.
 |    🚫 16진수를 그대로 박지 마라. 로고 보라를 한 번 더 옮길 때 여기만 빠진다(#717).
 */

/* ── 화면 폭 — 제목과 왼쪽 끝을 맞춘다 ────────────────────────────────
 |
 | 🔑 킷은 이 화면을 **1320px 까지만** 늘린다. 그보다 넓어지면 이름 칸과 입력칸이
 |    화면 양끝으로 벌어져 **어느 이름이 어느 칸인지** 읽기 어려워진다.
 | 🚫 가운데로 모으지 마라 — 제목은 셸이 왼쪽에 그리므로 **한 화면에서 두 왼쪽 끝**이 생긴다.
 */
.flo-cam-wizard { max-width: 1320px; }

/* ── 안내 한 줄 (킷 `cam-guide`) ─────────────────────────────────────
 |
 | 🔑 **다음에 무엇이 일어나는지**를 미리 알려 준다. 위저드는 지금 화면만으로는
 |    몇 걸음이 남았는지 알 수 없다.
 */
.flo-form-guide,
.flo-main .flo-form-guide {
    margin: 0 0 12px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~14~~ */
    font-size: 13px;
    color: var(--flo-ink-2);
}
.flo-form-guide b { color: var(--flo-primary); font-weight: 600; }

/* ── 단계 표시 — 위저드용 넓은 칸 (킷 `cam-stepper`) ──────────────────
 |
 | 🔑 `.flo-steps` 는 대시보드·캠페인 요약도 쓴다. 그쪽 **작은 알약 모양을 건드리지
 |    않으려고** 위저드 전용 변형으로 둔다.
 | 🚫 `.flo-step` 본체를 고치지 마라 — 화면 셋이 함께 바뀐다.
 */
.flo-steps--wizard { gap: 8px; margin: 0 0 16px; } /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 10 · 2px 0 18px~~ */
.flo-steps--wizard > li { flex: 1 1 160px; display: flex; }
/*
 | 🔻 2026-10-06 (이슈 #1579) 줄을 격자로 바꿨다. ~~줄바꿈 flex · 칸 1 1 160px~~
 | 🚨 직전까지 칸이 다음 줄로 넘어가면 **남은 한 칸이 줄 전체로 늘어났다.** 1280 에서 어필리에이트 진행
 |    줄의 「성과」 하나가 960px 막대가 됐고, 1024 에서는 등록 ⑤ 가 그렇게 됐다.
 | 🔑 `auto-fit` 이라 한 줄에 다 들어가면 지금과 같이 칸이 줄을 나눠 채운다. 넘친 칸만 위 칸의 폭을 지킨다.
 | 🔑 최소 폭은 180 이다 (직전 flex 기준 160). 160 이면 1024 에서 칸이 168 까지 좁아져
 |    「팬 상품 구매 URL 공유」·「상품 구매 URL 발송」이 칸 안에서 두 줄로 접혔다. 180 이면 1024 는
 |    세 칸(229)이라 접히지 않고, 1280 은 지금과 같이 다섯 칸이다.
 */
.flo-steps--wizard { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
/*
 | 🆕 닫아 둔 칸 (2026-09-14 · 이슈 #1446) · 기본 정보 화면에서 유형을 고르면 여닫는다.
 | 🚨 **바로 위 `display: flex` 가 브라우저 기본값(`[hidden] { display: none }`)을 이긴다.**
 |    이 줄이 없으면 `hidden` 을 붙여도 칸이 그대로 보인다(`.form-group[hidden]` 과 같은 함정).
 */
.flo-steps--wizard > li[hidden] { display: none; }
.flo-steps--wizard .flo-step,
.flo-main .flo-steps--wizard .flo-step {
    width: 100%;
    height: auto;
    /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~gap 10 · 13px 16px · 반경 10~~ · 번호 원 22 → 24 와 짝이라 칸 높이(50)는 같다 */
    /* 🔻 2026-10-06 (#1579) 좌우 ~~16~~ → 12 · 가장 긴 이름 「팬 상품 구매 URL 공유」가 최소 칸 180 에서 한 줄로 서게 한다 */
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius-card);
    background: var(--flo-card);
    color: var(--flo-ink-3);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .12s, color .12s;
}
.flo-main .flo-steps--wizard a.flo-step:hover {
    border-color: var(--flo-primary-brt);
    color: var(--flo-ink-2);
}
.flo-steps--wizard .flo-step__no {
    width: 24px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~22~~ */
    height: 24px;
    font-size: 13px;
    font-weight: 700; /* 🔻 2026-10-14 (#1737) ~~800~~ */
    background: var(--sig-neutral-bg);
    color: var(--flo-ink-3);
}
.flo-steps--wizard .flo-step.is-done { border-color: var(--flo-primary-brt); color: var(--flo-primary); }
.flo-steps--wizard .flo-step.is-done .flo-step__no { background: var(--flo-primary-soft); color: var(--flo-primary); }
.flo-steps--wizard .flo-step.is-now { border-color: var(--flo-primary); background: var(--flo-primary); color: #fff; }
/*
 | 🔻 2026-09-28 (#1511) 반투명 흰 바탕을 짙은 보라 고정값으로 바꿨다.
 |
 | 🚨 `rgba(255, 255, 255, .25)` 를 보라(`--flo-primary`) 위에 얹으면 합성 바탕이
 |    옅어져, 그 위 흰 글자(숫자)가 3.07~3.24:1 이었다(8차 검증 실측). 12px 굵은
 |    숫자는 큰 글자 기준에 못 미쳐 4.5:1 이 필요하다.
 | 🔑 새 값을 짓지 않는다(R-307). 큰 숫자·그라데이션 깊은 쪽에 이미 쓰는
 |    `--flo-primary-deep` 를 고정 바탕으로 쓴다(흰 글자 11.67:1).
 */
.flo-steps--wizard .flo-step.is-now .flo-step__no { background: var(--flo-primary-deep); color: #fff; }
/*
 | 🆕 진행 줄의 다음 업무 · 선 강조 (2026-10-03 · 🧑 *"둘 다 고침 (권장)"* · 이슈 #1560).
 |
 | 🚨 직전까지 등록 줄과 진행 줄이 둘 다 보라로 채워져 「지금」이 두 곳이었다(11차 점검 B4).
 | 🔑 채움은 지금 열린 화면 한 칸만 갖는다. 진행 줄은 테두리 2겹(안쪽 그림자)과 보라 글자로만 말한다.
 |    🚫 `border-width` 를 바꾸지 마라 · 칸 높이가 달라져 줄이 들쭉날쭉해진다.
 | 🔑 `li >` 를 붙여 무게를 올린다 · 뒤쪽의 대비 규칙(`.flo-main .flo-step:not(.is-now):not(.is-done)`)이
 |    같은 무게라 그쪽이 이긴다.
 */
/*
 | 🔻 2026-10-10 (#1608) 되돌렸다 · 이 판에서 잠시 ~~테두리 2겹을 걷고 칸 끝 점(8px)으로 바꿨던 것~~ 을 거뒀다.
 |    까닭: 2겹 테두리는 사용자가 채택한 권장안(#1560 🧑 "둘 다 고침 (권장)")이다. 에이전트 판단으로 뒤집지 않는다.
 |    채움(등록 줄)과 굵은 테두리(진행 줄)가 함께 강해 보이는 점은 사용자 확인 사항으로 보고만 했다.
 */
.flo-main .flo-steps--wizard > li > .flo-step.is-next {
    border-color: var(--flo-primary);
    box-shadow: inset 0 0 0 1px var(--flo-primary);
    color: var(--flo-primary-deep);
}
.flo-main .flo-steps--wizard > li > .flo-step.is-next .flo-step__no { background: var(--flo-primary-soft); color: var(--flo-primary-deep); }

/*
 | 🆕 좁은 폭에서 한 줄로 접는 단계 표시 (2026-10-03 · 🧑 *"둘 다 고침 (권장)"* · 이슈 #1560).
 |
 | 🚨 390px 에서 칸 여덟 개가 첫 화면의 절반(y195~519)을 썼다(11차 점검 E2).
 | 🔑 접는 규칙은 전부 `is-collapsible` 에 매달린다 · 그 표식은 `flo-wizard-steps.js` 가 붙인다.
 |    스크립트가 없으면 접힌 줄은 보이지 않고 칸이 전부 보인다.
 | 🔑 860px 는 곁 메뉴가 위로 눕는 셸의 폭과 같은 자리다.
 */
.flo-wizard-steps__bar { display: none; }
.flo-wizard-steps__now { font-size: 14px; font-weight: 600; color: var(--flo-ink-1); word-break: keep-all; }
/* 🔻 2026-10-12 (#1653) ~~두 줄의 이름표 「등록」 · 「진행」 규칙(14/600 · 아래 8 · #1579)~~ 진행 줄과 이름표를 걷어 규칙을 걷었다 */
@media (max-width: 860px) {
    .flo-wizard-steps.is-collapsible .flo-wizard-steps__bar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin: 0 0 12px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~2px 0 14px~~ */
    }
    .flo-wizard-steps.is-collapsible:not(.is-open) .flo-wizard-steps__body { display: none; }
}

/* ── 항목 한 줄 — 왼쪽 이름 · 오른쪽 입력 ────────────────────────────
 |
 | 🔑 킷 값을 그대로 쓰되 **이름 칸만 넓힌다** — 「판매 수수료율」이 킷의 106px 에서
 |    두 줄로 접힌다.
 | 🔑 줄 위쪽에 맞춘다 — 도움말이 길어 두 줄이 되어도 **이름이 가운데로 내려가지 않는다.**
 |
 | 🔻 **2026-09-15 124px → 140px.** 쿠폰 할인율에 도움말 표식을 붙이자
 |    **표식만 아랫줄로 떨어졌다**(높이 30px → 51px).
 |
 | 🚨 **3px 이 모자랐다.** 브라우저 실측으로 「쿠폰 할인율 + 필수 + 표식」이 **127px**
 |    을 원하는데 칸이 124px 이었다. 🔑 다음으로 넓은 이름은 「캠페인 기간 필수」의
 |    **107px** 이라, 표식을 붙인 이름만 칸을 넘는다.
 | 🚫 **표식·「필수」의 여백을 깎아 맞추지 마라.** 둘을 합쳐도 123px 이라 **여유가 1px**
 |    이고, 글꼴이 대체되는 기계에서 그대로 다시 접힌다.
 | ✅ 140px 은 여유 13px 이다 · 1440·1024·768·480·360px 에서 이름이 한 줄로 서고
 |    `scrollWidth` 가 창 폭과 같다(R-308).
 | 🚨 **아래 두 값이 이 값에 묶여 있다** — `.form-field` 의 `calc(100% - 152px)` 와
 |    `.flo-cam-memo__body` 의 `padding-left`. **한쪽만 고치면 줄이 어긋난다.**
 |    🔻 2026-10-06 (#1579) 메모가 같은 항목 줄이 되어 두 번째 묶임(`padding-left`)은 없어졌다.
 */
.campaign-form-group-wrap.flo-cam-form .form-group {
    align-items: flex-start;
    margin-bottom: 16px; /* 🔻 2026-10-05 (#1565 · 4px 격자) ~~18~~ */
}
/* 🔻 2026-09-29 (#1530 독립 검토) 15px → 14/600 · 다른 두 폼 이름표(flo-field__label · w-24)와 한 눈금(T3) */
.campaign-form-group-wrap.flo-cam-form .form-group .form-label {
    width: 140px;
    flex: none;
    padding-top: 10px; /* 🔻 2026-10-05 (#1567) ~~9~~ · 줄 20 을 칸 40 의 가운데에 */
    font-size: 14px;
    font-weight: 600;
    line-height: var(--flo-lh-ui); /* 🔻 2026-10-05 (#1567) ~~1.4~~ */
    color: var(--flo-ink-1);
    word-break: keep-all;
}
/*
 | 🆕 2026-10-16 (#1773 · K-05) 도움말 단추를 `<label>` 밖으로 옮긴 줄은 이름표 칸이 바깥 묶음(`div.form-label`)이고
 |    이름 글자는 안쪽 `<label>` 이 갖는다. reset 이 label 에 400 을 걸어 그 글자만 가늘어졌다(브라우저 실측). 굵기는 이름표 칸에서 받는다.
 */
.flo-cam-form .form-label > label { font-weight: inherit; }
.campaign-form-group-wrap.flo-cam-form .form-group .form-field {
    width: calc(100% - 152px);
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 🔑 「필수」는 글자로 적는다 — 별표는 낭독기에서 뜻이 전달되지 않는다 */
.flo-cam-form .form-label .flo-field__required { margin-left: 0; } /* 🔻 2026-10-05 (#1565) ~~6~~ · 🔻 2026-10-06 (#1588) ~~4~~ → 0. 이름표가 flex 이고 사이 8 은 gap 이 준다 */

/* 🔑 도움말은 입력 **오른쪽**에 선다(킷 시안이 그렇다). 좁아지면 다음 줄로 내려간다 */
.flo-cam-form .form-field .flo-field__help {
    flex: 1 1 240px;
    min-width: 0;
    margin: 0;
}
/*
 | 🆕 **860px 이하에서는 이름을 입력 위에 둔다** (2026-10-03 · 이슈 #1559 · E3).
 |    390px 에서 이름 칸 140 · 입력 칸 166 으로 갈라져 도움말이 다섯 줄로 접혔다.
 | 🔑 넓은 폭의 두 칸 배치(140 · `calc(100% - 152px)`)는 그대로다. 좁은 폭만 바꾼다.
 | 🔑 `display` 는 적지 않는다 · 위 `.form-group[hidden]` 이 그대로 이긴다.
 */
@media (max-width: 860px) {
    .campaign-form-group-wrap.flo-cam-form .form-group { flex-direction: column; align-items: stretch; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~6~~ · 폼 이름표와 칸 사이(8)와 같게 */
    .campaign-form-group-wrap.flo-cam-form .form-group .form-label { width: auto; padding-top: 0; }
    .campaign-form-group-wrap.flo-cam-form .form-group .form-field { width: 100%; }
}
/*
 | 🔻 2026-08-31 — 한 줄을 통째로 쓰던 `flo-help-block` 을 걷었다 (이슈 #1025).
 |
 | 그 이름을 쓰던 도움말 두 줄이 **라벨 옆 말풍선**으로 옮겨 가 쓰는 곳이 없어졌다.
 | 🚫 되살리지 마라 — 아래로 내려야 할 만큼 긴 설명이면 그것은 말풍선 자리다.
 */

/* ── 두 갈래 중 하나 고르기 — 알약 단추 (킷 `flo-radio-group`) ────────
 |
 | 🔑 **동그라미를 숨기고 칸 전체를 누르게 한다** — 손으로 짚는 자리가 넓어진다.
 | 🚨 `opacity` 로만 숨긴다 — `display:none` 은 **키보드 이동에서 사라져** 고를 수 없다.
 */
.flo-radio-group { display: flex; flex-wrap: wrap; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~10~~ */
.flo-radio-group input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.flo-radio-group label {
    display: inline-flex;
    align-items: center;
    padding: 9px 18px;
    border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius); /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    background: var(--flo-card);
    color: var(--flo-ink-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.flo-radio-group label:hover { border-color: var(--flo-primary-brt); }
.flo-radio-group input[type="radio"]:checked + label {
    border-color: var(--flo-primary);
    background: var(--flo-primary-soft);
    /* 🔻 2026-09-28 (#1492) --flo-primary 는 이 바닥에서 4.49:1 이라 기준에 못 미쳤다. 연보라 표식과 같은 짙은 보라를 쓴다 (#1459) */
    color: var(--flo-primary-deep);
}
/* 🚨 초점 고리를 지우지 마라 — 동그라미를 숨겼으므로 **여기가 유일한 표시**다 */
.flo-radio-group input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--flo-primary);
    outline-offset: 1px;
}

/* ── 입력칸과 단위가 한 줄에 서는 자리 (킷 `goal-input-row`) ────────────
 |
 | 🔻 2026-09-28 (#1510) `flex-wrap` 을 더했다. 예산 칸(200px 고정)과 단위 「원」이
 |    줄바꿈 없이 붙어, 360~390px 폭에서 `scrollWidth` 가 창 폭보다 10px 커졌다
 |    (`/campaigns/28/basic` 실측). 이름 칸 폭은 그대로 두고 단위만 다음 줄로 내린다(R-308).
 */
.flo-cam-form .flo-input-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flo-cam-form .flo-input-unit { font-size: 14px; color: var(--flo-ink-2); }

/* ── 칸 폭은 값의 자릿수만큼만 ───────────────────────────────────────
 |
 | 🔑 킷도 같은 결이다 — 예산 칸을 293px 로 잡는다(`admin_sub.css` 514).
 | 🚨 날짜·금액 칸을 폭 가득 늘리지 마라 — 여덟 글자를 적는 칸이 화면을 가로지르면
 |    **얼마나 긴 값을 적어야 하는지**가 잘못 읽힌다.
 */
/*
 | 🔻 2026-10-03 (#1555) 폭을 125- 의 단계로 옮겼다. 날짜 168 · 예산 200 · 수수료율 120 은
 |    전부 짧은 칸(140)이다. 캠페인 이름은 768px 로 판 끝까지 갔는데 바로 아래 글 칸은
 |    660px 에서 멈춰, 같은 폼의 오른쪽 끝이 두 줄로 갈렸다. 이름 칸도 660 에서 멈춘다.
 */
.flo-cam-form .form-group.campaign-name input { flex: 1 1 100%; min-width: 0; max-width: 660px; }
.flo-cam-form .form-group.budget input { width: var(--flo-control-w-short); }
.flo-cam-form .form-group.campaign-date-range input { width: var(--flo-control-w-short); }
.flo-cam-form .form-group.apply-deadline input { width: var(--flo-control-w-short); }
.flo-cam-form .form-group.commission input { width: var(--flo-control-w-short); }
.flo-cam-form .form-field textarea { flex: 1 1 100%; max-width: 660px; }
/* 🔻 2026-10-06 (#1585) 글자 수 표시(`flo-charcount.js` 가 칸 바로 뒤에 만든다)는 칸 아래 한 줄이다. 이 판의 항목 줄이 가로 flex 라
   글 칸(660) 오른쪽 바깥 세로 가운데에 떠 있었다. 메모 칸(상세 · 응답 상세)과 같이 칸 아래 8 · 시작선 정렬이다 */
.flo-cam-form .form-field > textarea[data-flo-charcount] + .flo-t-caption { flex: 1 1 100%; }
/*
 | 🆕 2026-10-11 (🧑 *"관심목록 명 적는데에 10자 제한 글이 박스에 너무 붙어잇지않나"*)
 |    글자 수 표시가 칸에 붙어 있던 자리(창 안 이름 칸 등)를 모든 화면에서 칸 아래 8 로 띄운다.
 |    메모 칸(#1585)이 이미 쓰는 간격과 같다 · 창은 `.flo-main` 밖에 그려지므로 범위를 좁히지 않는다.
 |    🔻 2026-10-11 ~~글자 수 칸 바로 뒤의 잔글씨 클래스로 걸던 규칙~~ → 스크립트가 만든 표시에만 다는 표식
 |       (클래스로 걸면 뒤따르는 숨은 오류 문장 · 다른 잔글씨까지 잡아 `hidden` 과 `display` 를 겨뤘다)
 */
[data-flo-charcount-out] { display: block; margin-top: 4px; text-align: right; font-variant-numeric: tabular-nums; } /* 🔻 2026-10-14 (#1738 · 묶음 I) ~~위 8 · 왼쪽~~ → 칸 아래 오른쪽 · 사이 4 · 13 흐림. 칸 밖 오른쪽 · 칸 아래 왼쪽 · 절 제목 옆 등 다섯 자리였다. 예외: 메모(저장 단추 옆) · 템플릿(칸 안, 승인안) */

/* 🔑 기간의 물결표는 두 칸이 한 쌍임을 말한다 — 🚫 빼지 마라 */
.flo-cam-form .flo-range-dash { color: var(--flo-ink-3); }

/* ── 값이 아니라 기록인 줄 (만든 사람) ───────────────────────────────
 | 🚫 고르게 하지 마라 — 진입한 운영자로 자동 기록된다 (R-819)
 */
.flo-cam-form .flo-form-readonly { font-size: 14px; color: var(--flo-ink-2); padding-top: 9px; }

/* ── 판 아래 오른쪽 버튼 바 (킷 5-8) ─────────────────────────────────
 |
 | 🔑 바탕과 여백은 킷이 이미 갖고 있다 — `.cont-sec.btn-cont-sec`(`common.css` 836).
 | 🚨 **왜 못 넘어가는지**를 같은 줄 왼쪽에 적는다. 비활성 버튼만 두고 이유를 감추면
 |    운영자는 고장으로 읽는다.
 | 🚫 `position: fixed` 를 쓰지 마라 — 스크롤과 어긋나 화면 중간에 떠 버린다.
 */
.flo-form-bar { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; } /* 🔻 2026-10-05 (#1565) ~~10~~ */
/* 🆕 2026-10-14 (#1737 · 묶음 H) 판 아래 단추 줄은 판에서 16 이다. 킷이 위 여백 20 + 위 안여백 20 을 겹쳐 40 이었다(위저드 ① · ③ · ④ · ⑤ · 제안 메일 발송) */
.flo-main .cont-wrap .section .cont-sec.btn-cont-sec { margin-top: 16px; padding-top: 0; }
.flo-form-bar__why,
.flo-main .flo-form-bar__why {
    margin: 0 auto 0 0;
    font-size: 13px;
    color: var(--flo-ink-3);
    flex: 1 1 260px;
    min-width: 0;
}
/*
 | 🔑 좁아지면 **이유가 한 줄을 통째로** 쓴다 — 🚫 버튼 셋이 두 줄로 갈라지게 두지 마라.
 |    갈라지면 「다음」이 혼자 아래로 떨어져 **다른 자리의 버튼처럼** 보인다(1024px 실측).
 */
@media (max-width: 1279px) {
    .flo-form-bar__why,
    .flo-main .flo-form-bar__why { flex: 1 1 100%; }
}
/*
 | 🆕 2026-10-06 (#1596) 좁은 폭(640 이하)의 위저드 단추 줄. 「다음」이 첫 줄을 꽉 채우고 나머지는 아랫줄에서 나눠 갖는다.
 |    390 에서 「다음」만 아랫줄 오른쪽에 혼자 섰다(①·④·② 실측). ② 의 표 가운데 줄(#1059)도 같은 규칙이다.
 | 🔑 「다음」은 언제나 줄의 마지막 단추다(DOM 차례 「← 이전」·(저장)·「다음」 · WizardBottomBarTest).
 |    보이는 차례만 `order` 로 바꾼다. 🚫 DOM 차례를 바꾸지 마라: 641 이상에서 보이는 차례와 탭 차례가 갈린다.
 */
@media (max-width: 640px) {
    .flo-form-bar.btn-cont-sec > .flo-btn { flex: 1 1 0; min-width: 0; order: 2; }
    .flo-form-bar.btn-cont-sec > .flo-btn:last-child { flex-basis: 100%; order: 1; }
}

/* ── 내부 메모 판 — 맨 아래 · 항상 보인다 (`40-campaign-memo.md` 2장) ───
 |
 | 🔻 **2026-08-31 (#1039) 접기를 없앴다.**
 |    🧑 *"내부 메모도 항시 쓸 수 있게 감추지 않음."*
 |
 | 🚨 직전까지 `<details>` 로 접혀 있었고, 여기에 **세모 표시·펼침 회전·펼침 표시
 |    감추기** 규칙 다섯 벌이 있었다. 접기가 사라졌으므로 **함께 지웠다.**
 |    🚫 되살리지 마라. 남겨 두면 **아무것도 하지 않는 규칙**이 쌓인다.
 | 🚫 목표 칸 옆에 나란히 붙이지 마라. 같은 장문 칸 두 개가 붙으면 어디에 무엇을
 |    적을지 헷갈린다.
 | 🔑 **윗줄(`border-top`)은 남긴다.** 이 판이 위쪽 항목 목록과 다른 묶음이라는
 |    표시이고, 접기가 없어져도 그 사실은 그대로다.
 */
.flo-cam-memo { margin-top: 16px; border-top: 1px solid var(--flo-line-soft); padding-top: 16px; }

/*
 | 🚨 **폭을 여기서 정한다.** 이 입력칸은 항목 줄(`.form-field`) 밖에 있어 그쪽 규칙이
 |    닿지 않는다 — 안 적으면 `cols` 기본값인 **181px 짜리 쪽지 칸**이 된다(실측).
 */
.flo-cam-memo textarea { width: 100%; max-width: 660px; }

/*
 | 안쪽을 **입력칸 자리**에 맞춘다 (이슈 #1028)
 |
 | 🧑 *"내부 메모가 왼쪽으로 쏠려 있음 중앙 정렬로 테이블 내 다른 것들과 라인 맞출 것"*
 |
 | 🚨 이 판만 항목 목록(`<ul class="campaign-form-group-wrap">`) **밖**이라 두 칸
 |    배치가 닿지 않았다. 위쪽 입력칸은 전부 **이름 칸 124px 뒤**에서 시작하는데
 |    메모 입력칸만 **이름 칸 자리**에서 시작했다(브라우저 실측 424px 대 300px).
 |    같은 장문 칸인 **캠페인 목표와 124px 어긋나** 계단처럼 보였다.
 |
 | 🔑 **이 값이 이름 칸의 폭 그대로다.** 위 `.form-label { width: … }` 와 같은
 |    값이어야 하고, 한쪽만 고치면 다시 어긋난다.
 |    🔻 2026-09-15 쿠폰 할인율 도움말 표식 때문에 **124px → 140px** 로 함께 옮겼다.
 | 🚫 이름 글자(`내부 메모`)를 함께 들여쓰지 마라. 그 글자는 **위쪽 항목의 이름들과
 |    같은 줄**이다. 🔻 2026-08-31 (#1039) 전까지 그 글자는 `<summary>` 였다.
 |
 | 🚨 **좁은 창에서 들여쓰기를 빼지 마라.** 한 번 넣었다가 되돌린 자리다.
 |    위쪽 항목 줄은 **어느 폭에서도 두 칸을 유지한다**(이름 칸에 미디어쿼리가
 |    없다). 여기만 0 으로 되돌리면 **767px 아래에서 이 결함이 그대로 되살아난다**
 |    (실측 480px 에서 캠페인 목표 164px 대 내부 메모 40px).
 | ✅ 넘치지 않는다 (R-308) — 480px 까지 재서 `scrollWidth` 가 창 폭과 같았다.
 |
 | 🔻 **2026-10-03 (#1559 · E3) 860px 이하에서는 0 이다.** 위쪽 항목 줄이 그 폭에서
 |    한 칸(이름 위 · 입력 아래)이 되어 입력이 왼쪽 끝에서 시작한다. 메모도 같이 맞춘다.
 |    「어느 폭에서도 두 칸」은 그날부터 860px 초과에서만 참이다.
 */
/* ~~껍데기 왼쪽 안여백 140 · 860px 이하 0~~ */
/*
 | 🔻 **2026-10-06 (이슈 #1579) 들여쓰기를 걷었다.** 🧑 *"내부 메모 쪽도 뭔가 위치가 애매해"*
 | 🔑 메모가 위쪽과 같은 항목 한 줄(`ul.campaign-form-group-wrap.flo-cam-form > li.form-group`)이 됐다.
 |    이름은 이름 칸 140 에 서고 입력은 입력 칸에서 시작하므로 따로 들여쓸 값이 없다.
 | 🔑 이 껍데기는 입력 칸(줄바꿈 flex) 안에서 한 덩이로 줄 전체를 쓴다 · 안의 경고·충돌 판·안내가
 |    가로로 흩어지지 않는다. 안내 두 줄은 입력칸 아래로 8 · 서로 4 를 둔다.
 | 🔑 마지막 줄의 아래 여백 16 은 판 안여백(20)과 겹치므로 0 이다.
 */
.flo-cam-memo__body { flex: 1 1 100%; min-width: 0; }
.flo-cam-form .flo-cam-memo__body .flo-field__help { max-width: 660px; margin: 8px 0 0; }
.flo-cam-form .flo-cam-memo__body .flo-field__help + .flo-field__help { margin-top: 4px; }
.flo-cam-memo .campaign-form-group-wrap.flo-cam-form .form-group { margin-bottom: 0; }

/* ── 기간 빠른 설정 버튼 (이슈 #1026) ────────────────────────────────
 |
 | 🧑 *"캠페인 기간 옆에 일주일, 한달 버튼 값."*
 |
 | 🚨 **스크립트가 실려야 나타난다.** 이 버튼이 하는 일은 전부 자바스크립트라,
 |    안 실린 화면에 남아 있으면 **눌러도 아무 일이 없는 버튼**이 된다.
 |    `flo-campaign-basic.js` 가 `is-ready` 를 붙인다.
 | 🚫 눌린 것을 표시하지 마라. 값을 넣을 뿐이고 **고른 상태로 남는 것이 아니다.**
 |    운영자가 달력으로 다시 고치면 그 표시가 거짓이 된다.
 */
.flo-date-preset { display: none; gap: 8px; margin-left: 4px; } /* 🔻 2026-10-05 (#1565) ~~6~~ */
.flo-date-preset.is-ready { display: inline-flex; flex-wrap: wrap; }
/*
 | 🔻 2026-10-01 (#1547) 125 「칩·눈금 단추는 같은 알약」을 따른다. ~~반경 6 · 위아래 6 · 13/400~~ 을
 |    높이 30 · 반경 999 · 좌우 12 · 13/500 으로 바꿨다(`.flo-pick` 과 같은 값). 고른 상태 표시는
 |    두지 않는다(위 🚫 그대로) · 모양만 같고 연보라 바탕은 마우스를 올렸을 때만 뜬다.
 */
.flo-cam-form .flo-date-preset button {
    display: inline-flex; align-items: center;
    height: var(--flo-control-h-sm);
    padding: 0 12px;
    border: 1px solid var(--flo-line);
    border-radius: 999px;
    background: var(--flo-card);
    color: var(--flo-ink-2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.flo-cam-form .flo-date-preset button:hover {
    border-color: var(--flo-primary-brt);
    background: var(--flo-primary-soft);
    color: var(--flo-primary);
}
.flo-cam-form .flo-date-preset button:focus-visible {
    outline: 2px solid var(--flo-primary);
    outline-offset: 1px;
}

/* ── 숨긴 항목 줄 (이슈 #1030) ───────────────────────────────────────
 |
 | 🚨 **`hidden` 만으로는 안 숨는다.** 킷이 `.campaign-form-group-wrap .form-group`
 |    에 `display: flex` 를 주고 있고(`admin_sub.css` 508), **글쓴이 규칙은 언제나
 |    브라우저 기본값(`[hidden] { display: none }`)을 이긴다.**
 | 🔑 어필리에이트가 아닐 때 수수료율 줄이 이 규칙으로 가려진다.
 */
.campaign-form-group-wrap.flo-cam-form .form-group[hidden] { display: none; }

/* ── 못 넘어간 이유 (이슈 #1029) ─────────────────────────────────────
 |
 | 🔑 **누른 뒤에만 뜬다.** 화면을 연 직후에는 적지 않는다. 각 항목 옆의 `필수` 와
 |    같은 말을 두 번 하게 되기 때문이다.
 | 🔑 **눈에 띄어야 한다.** `다음` 을 눌렀는데 화면이 그대로면 고장으로 읽힌다.
 |    그래서 이 한 줄만 회색에서 **주의 색**으로 올린다.
 | ~~🚫 빨강(`--sig-fail`)을 쓰지 마라. 저장은 이미 됐고 못 넘어갔을 뿐이다.~~
 | 🔻 **2026-10-01 (#1541 O-28 · R-311 · R-314) 오류 색으로 올렸다.** 주의 색(갈색 rgb 138,90,15)이라
 |    같은 빈 칸을 가리키는 칸 아래 오류 문구(빨강)와 색이 갈렸다. 「못 넘어간 이유」는
 |    칸 오류와 같은 사실이므로 같은 오류 색(`--sig-fail-ink`)을 쓴다(R-311 · R-314).
 */
.flo-form-bar__why--blocked,
.flo-main .flo-form-bar__why--blocked { color: var(--sig-fail-ink); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════
 | 켜기·끄기 스위치 (이슈 #1103 · 정본 plan/121- 3-b)
 |
 | 🧑 2026-09-02 "온오프 버튼 있었으면 좋겟어. 클릭하면 색이 변하고 아니면 다시 꺼지고"
 |
 | 🔑 켜짐 색은 `--sig-done` 이다. 킷이 그 변수에 "완료 = 킷 주 색. 끝난 것은 제품
 |    색으로 표시한다" 라고 적어 두었고, 팔레트에 초록이 없다. 🚫 새 색을 들이지
 |    마라. 들이면 앱에서 이 한 자리만 다른 계열이 된다.
 | 🚫 색만으로 상태를 말하지 마라. 옆의 글자(`__label`)와 `aria-checked` 가 함께 간다.
 | 🔑 단추다. 폼이 보내고 서버가 지금 값의 반대로 바꾼다.
 */
.flo-main .flo-switch {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 13px; color: var(--flo-ink-2);
}
.flo-main .flo-switch:hover { color: var(--flo-ink-1); }

.flo-main .flo-switch__track {
    position: relative; display: inline-block;
    width: 36px; height: 20px; border-radius: 10px;
    background: var(--flo-line-strong);
    transition: background .15s ease;
}
.flo-main .flo-switch__knob {
    position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--flo-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: transform .15s ease;
}

/* 🔑 상태의 주인은 `aria-checked` 다. 낭독기와 화면이 같은 값을 본다 */
.flo-main .flo-switch[aria-checked="true"] .flo-switch__track { background: var(--sig-done); }
.flo-main .flo-switch[aria-checked="true"] .flo-switch__knob { transform: translateX(16px); }
.flo-main .flo-switch[aria-checked="true"] .flo-switch__label { color: var(--sig-done-ink); font-weight: 600; }

/*
 | 🆕 저장과 함께 실려 가는 스위치 (2026-09-04 · 🧑 지시 · 이슈 #1265)
 |
 | 🧑 "참여 질문 사용 체크 박스 -> 온오프 버튼으로 변경"
 |
 | 🚨 위 스위치는 **단추**라 누르는 즉시 서버가 값을 뒤집는다. 템플릿 등록 화면에는
 |    아직 저장된 세트가 없어 **보낼 곳이 없다.** 그 값은 「템플릿 저장」에 함께 실려야
 |    한다.
 |
 | 🔑 **모양은 같고 속만 체크상자다.** 상태의 주인이 `aria-checked` 가 아니라
 |    `:checked` 인 것만 다르다. 🚫 새 모양을 고안하지 마라 (R-307).
 | 🔑 **스크립트가 없어도 된다.** 체크상자는 그 자체로 켜고 꺼지고 폼에 실린다.
 |    🚫 자바스크립트로 상태를 옮기지 마라 · 스크립트가 없으면 못 켜게 된다.
 | 🚫 상자를 `display:none` 으로 숨기지 마라 · 키보드 초점이 사라진다. 화면에서만 뺀다.
 */
.flo-main .flo-switch__pick {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/*
 | 🔑 **`~ *` 로 잇는다** · 스위치는 제목과 한 줄에 서야 해서 **감싸는 칸 안**에 있고,
 |    상자는 그 칸의 **형제**다. `+` 로 이으면 그 칸 하나 때문에 규칙이 안 걸린다.
 | 🚫 상자를 스위치 옆으로 옮겨 `+` 를 쓰려고 하지 마라 · 그러면 아래 「켜야 보이는
 |    구역」이 형제가 아니게 돼 이번엔 그쪽이 안 걸린다.
 */
.flo-main .flo-switch__pick:checked ~ * .flo-switch__track { background: var(--sig-done); }
.flo-main .flo-switch__pick:checked ~ * .flo-switch__knob { transform: translateX(16px); }
.flo-main .flo-switch__pick:checked ~ * .flo-switch__label { color: var(--sig-done-ink); font-weight: 600; }

/* 🚨 키보드로 왔을 때 어디에 있는지 보여야 한다 · 상자를 숨겨 초점 테두리가 안 보인다 */
/* 🔻 2026-10-03 (#1558 D3) 검정(`--flo-ink-1`) → 주 색. 본문 초점 고리는 한 모양이다(`.flo-main :focus-visible` 참고) */
.flo-main .flo-switch__pick:focus-visible ~ * .flo-switch__track {
    outline: 2px solid var(--flo-primary); outline-offset: 2px;
}

/*
 | 🆕 켜야 보이는 구역 (2026-09-04 · 이슈 #1265)
 |
 | 🔑 **꺼져 있으면 적을 칸을 그리지 않는다** (🧑 "온오프 기능을 켜면 ... 작성할 수
 |    있게 함"). 🚫 스크립트로 감추지 마라 · 스크립트가 없으면 늘 보인다.
 | 🔑 **감추기만 한다** · 적어 둔 값은 그대로 폼에 실린다. 껐다 켜도 글이 남는다.
 */
.flo-main .flo-switch__pick:not(:checked) ~ .flo-questions-draft { display: none; }
/* 🆕 2026-11-03 (#1970) 문의 창구 줄 · 위와 같은 규칙이다(감추기만 하고 적어 둔 줄은 폼에 실린다). 위저드 ④ 와 템플릿 화면이 함께 쓴다 */
.flo-main .flo-switch__pick:not(:checked) ~ .flo-switch__region { display: none; }

/* 🚨 손가락으로 누르는 자리는 44px 이상이어야 한다 */
.flo-main .flo-switch { min-height: 44px; }

/* 🚫 움직임을 줄여 달라는 설정을 무시하지 마라 */
@media (prefers-reduced-motion: reduce) {
    .flo-main .flo-switch__track,
    .flo-main .flo-switch__knob { transition: none; }
}

/*
 | 이메일 열의 주소 (2026-09-02 · 🧑 지시 · 이슈 #1124)
 |
 | 🔻 **직전까지 이 열은 「있음 / 없음」 두 글자였다.** 이제 주소를 그대로 그린다.
 |
 | 🚨 **주소는 길이가 제각각이라 그냥 두면 칸을 넘어 옆 열을 덮는다.**
 |    이 표는 `table-layout: fixed` 라 칸 폭이 고정인데, 넘친 글자는 잘리지 않고
 |    **그려지기만 한다** — 오류가 나지 않아 좁은 창에서만 드러난다.
 | 🔑 **폭을 새로 박지 않는다** — 위 계정 열 주석대로 폭을 더 나눠 주면
 |    `최종 갱신` 의 날짜가 두 줄로 접힌다. 받은 자리 안에서 잘리게만 한다.
 | 🔑 **`display: block` 이라야 한다** — 인라인 요소에는 `overflow` 가 듣지 않아
 |    말줄임이 조용히 안 먹는다.
 | 🔑 **온값은 `title` 에 남는다**(화면이 건다) — R-308 이 말하는 「값에 닿을 수
 |    있는가」를 만족한다. 🚫 글자 크기를 줄여 맞추지 마라.
 */
/*
 | 🔻 2026-10-06 (#1595) ~~한 줄 말줄임(`.flo-email` 에 `overflow` · `nowrap`)~~ · 142 칸에서 도메인이 늘 잘렸다.
 |    「@」 앞에서 두 줄로 나눠 줄마다 말줄임이다. 위 줄 아이디 14/20, 아래 줄 @도메인 13/18 · `--flo-ink-2`
 |    (계정 칸 둘째 줄과 같은 글자). 두 줄 38 + 위아래 12 + 칸 선 2 = 64 라 행 높이가 그대로다.
 | 🔑 `position: relative` 는 감춘 낭독용 한 줄(`.flo-sr-only`)이 이 상자 안에 서게 한다.
 */
.flo-main .flo-email { position: relative; display: block; min-width: 0; }
.flo-main .flo-email > :is(.flo-email__id, .flo-email__domain) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flo-main .flo-email > .flo-email__id { line-height: 20px; }
.flo-main .flo-email > .flo-email__domain { color: var(--flo-ink-2); }

/*
 | 이메일 열의 폭 (2026-09-02 · 🧑 지시 · 이슈 #1124)
 |
 | 🚨 **폭을 주지 않으면 지시를 못 지킨다.** 이 표는 `table-layout: fixed` 라 폭을
 |    안 준 열이 남은 자리를 똑같이 나눈다. 그러면 이메일 칸의 **글자 자리가
 |    1440 창에서 74px** 이라 `test@test.com` 도 들어가지 않는다(실측).
 |    직전까지 이 열은 「있음 / 없음」 두 글자였기에 그 폭으로 충분했다.
 |
 | 🔑 **180px 은 재고 고른 값이다** — 글자 자리 **156px** 이 남아 흔한 주소가 들어간다.
 | 🔑 **위 계정 열 주석이 경고한 「최종 갱신 두 줄 접힘」은 일어나지 않았다**
 |    (1920·1600·1440·1280·1024 다섯 폭 실측 · 행 높이 70px 로 기준선과 같다).
 |    🚫 **그 경고를 지우지 마라** — 값을 더 키우면 그때는 실제로 접힌다.
 | 🔑 **쪽 몸통은 어느 폭에서도 넘치지 않는다**(R-308). 표가 **자기를 감싼 칸 안에서**
 |    넘어갈 뿐이고, 그 넘침은 1280 에서 90px → 102px 로 **12px 늘 뿐**이다.
 |
 | 🚫 **폭을 더 키우지 마라** — 남은 일곱 열이 1024 에서 이미 76px 이다.
 */
/* 🔻 2026-10-03 (#1557 A5) 180 → 80. 표가 감싼 칸(918) 안에 들도록 줄였다. 잘린 주소는 `title` 이 온전히 나른다 */
/* 🔻 2026-10-05 (#1567) 80 → 72. 카테고리 칸 왼쪽 여백(숫자 열과 16 띄움)에 8 을 내줬다. 합 945 는 그대로다 */
/*
 | 🔻 2026-10-06 (🧑 채택 · #1573) ~~72~~ → 186. 출처 · 팔로잉 · 비율 한 칸을 걷어 낸 폭에서 114 를 받았다(계정 칸 주석).
 |    글자 자리 178 이라 흔한 주소는 끝까지 보인다. 더 긴 주소는 지금처럼 말줄임 · `title` 이다.
 */
/*
 | 🔻 2026-10-06 (#1576 3차) 186 → 157. 표가 내용선 안에 서며 열 폭 합을 945 → 900 으로 줄였다. 바깥 두 칸이 16, 이 칸이 29 를 냈다.
 |    계정 250 은 그대로다(#1573 🧑 채택). 글자 자리 149 라 긴 주소는 말줄임이고 온전한 값은 `title` 이다.
 */
/*
 | 🔻 2026-10-06 (🧑 결정 · #1582) 157 → 93. 짝 지표 두 칸이 줄마다 작은 이름을 달며 64 를 더 받았다(팔로워 92 · 비율 90).
 |    계정 250 은 그대로다(#1573 🧑 채택 · 이름이 가장 먼저 읽힌다). 글자 자리 85 라 주소는 아이디 앞부분까지 보이고
 |    온전한 값은 `title` 이다. 합 900 그대로라 스크롤바가 있어도 1280 창에 든다.
 */
/*
 | 🔻 2026-10-06 (#1582 후속) ~~93~~ → 142. 이메일은 유일한 연락 수단이라(R-808) 「demo_room_l…」 처럼 주소가 숨으면 안 된다.
 |    계정 250 → 212(내용 실측 폭) 38 · 팔로워 92 → 89 3 · 비율 90 → 82 8 을 받았다. 합 900 그대로다.
 |    ⚠️ 데모 주소는 글자 폭 180 ~ 223 이라 900 안에서는 끝까지 다 보이지 않는다. 글자 자리 135 로 아이디 전체와 「@」 뒤 앞부분까지 보인다.
 */
.flo-main .flo-search-result .flo-th--email { width: 142px; }

/* ── 각주 별표 (2026-09-02 · 🧑 지시 · 이슈 #1126) ─────────────────────
 |
 | 🧑 *"어필리에이트의 단계에서 (현)쿠폰 URL, (현)성과 단계가 추가 된다고
 |    어필리테이트 버튼 옆에 * 표시로 명시할 것."*
 |
 | 🔑 **뜻은 각주 글자가 나른다.** 별표는 **눈으로 짝을 찾는 표시**일 뿐이라
 |    화면에서 `aria-hidden` 이다. 그래서 여기서 정하는 것은 자리와 크기뿐이다.
 | 🔑 **색을 박지 않는다**(`inherit`). 알약 단추는 골랐을 때 글자색이 바뀌므로,
 |    색을 박으면 그 한 상태에서만 별표가 겉돈다.
 | 🚨 **`vertical-align` 으로 올리지 마라.** 알약 단추의 이름표가 `inline-flex`
 |    라서 자식이 플렉스 항목이 되고, 그 속성은 아무 일도 하지 않는다.
 |    올리는 일은 `align-self: flex-start` 가 한다.
 */
.flo-note-mark {
    align-self: flex-start;
    margin-left: 2px;
    color: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* 🔑 각주 줄에서는 글자 앞에 서서 어느 항목의 설명인지 가리킨다 */
.flo-field__help .flo-note-mark { margin-left: 0; margin-right: 4px; }

/*
 | 🔑 **알약 단추 아래 각주는 한 줄을 통째로 쓴다.** 이 판의 `.form-field` 는
 |    플렉스라 그냥 두면 각주가 단추 **오른쪽**에 끼어 두 문장이 좁은 칸에 갇힌다.
 | 🚫 클래스를 새로 만들지 마라 · 자리로 가리키면 된다.
 */
.flo-cam-form .form-field > .flo-radio-group + .flo-field__help { flex: 1 1 100%; }
/*
 | 🆕 **도움말 뒤에 오는 두 번째 도움말이 별표 각주 자리다** (2026-09-15 · 쿠폰 할인율).
 |
 | 🚨 그냥 두면 `flex: 1 1 240px` 둘이 **나란히 서서** 「쿠폰이 만들어진 뒤에는 바꿀 수
 |    없습니다」가 폭 240px 칸에 갇힌다. **놓치면 안 되는 말이라 좁은 칸에 두지 않는다.**
 | 🔑 바로 윗줄과 같은 판단이다 · 🚫 클래스를 새로 만들지 마라 · 자리로 가리키면 된다.
 */
.flo-cam-form .form-field > .flo-field__help + .flo-field__help { flex: 1 1 100%; }
/*
 | 🆕 **칸별 오류는 입력 아래 한 줄을 통째로 쓴다** (2026-09-29 · 이슈 #1517 · R-314 ③).
 |
 | 🚨 그냥 두면 도움말처럼 입력 **오른쪽**에 끼어, 1280 폭에서 오류가 칸 옆 회색 글처럼 보였다.
 | 🔑 바로 윗줄과 같은 판단이다 · 🚫 클래스를 새로 만들지 마라 · 자리로 가리키면 된다.
 */
.flo-cam-form .form-field > .flo-field__error { flex: 1 1 100%; margin: 0; }

/*
 | 단계 칸의 이름은 낱말 단위로 접는다 (2026-09-02 · 이슈 #1125 · R-308)
 |
 | 🚨 **글자 단위로 접히고 있었다.** 4단계 이름이 「시딩 제안 메일 작성」으로 길어지자
 |    1024 폭에서 칸이 두 줄이 되고 「시딩 제안 메일 작 / 성」으로 **낱말 하나가 두 줄에
 |    걸쳤다**(실측 · 계산값 `word-break: normal`).
 |
 | 🔑 **한글은 낱말 단위로 접는다**(R-308 · 지원 폭 정본 `05-foundation.md`).
 | ✅ **넘치지 않는다** · 가장 긴 낱말이 「인플루언서」이고 칸의 최소 폭(160px)에 들어간다
 |    (1440·1280·1024·900·768·700·640 일곱 폭 실측 · 잘린 칸 0개 · 쪽 몸통 넘침 없음).
 | 🚫 **글자 크기를 줄여 맞추지 마라** · 🚫 **고정 폭을 박지 마라**.
 | ⚠️ **위저드 변형에만 준다** · 알약 모양 `.flo-step` 본체는 화면 셋이 함께 쓴다.
 */
.flo-steps--wizard .flo-step,
.flo-main .flo-steps--wizard .flo-step { word-break: keep-all; }

/*
 | 🆕 미리보기의 참여 페이지 판 (2026-09-03 · 이슈 #1139)
 |
 | 🔑 두 화면을 이어서 보이므로 경계가 있어야 어디까지가 한 화면인지 읽힌다.
 | 🚫 새 색을 고안하지 마라(R-307). 이미 있는 테두리 색을 쓴다.
 */
.flo-preview__screen {
    border: 1px solid var(--flo-line);
    border-radius: 4px;
    padding: 12px;
    margin-top: 4px;
}
.flo-preview__screen + .flo-preview__screen { margin-top: 8px; }


/*
 | 🆕 시딩 참여 안내 · 실제 화면 그림과 걸음 (2026-09-04 · 🧑 지시 · 이슈 #1240)
 |
 | 🧑 «이 입력 폼이 어떻게 동작하는지 이미지와 함께 설명이 필요할 것 같음.»
 |    🧑 **「실제 화면 그림」** 을 고르셨다.
 |
 | 🔻 앞서 이 자리에 **손으로 그린 도형 흐름도**의 규칙이 있었다. 걷어냈다.
 |    🚫 되살리지 마라 · 되돌리려면 사용자의 정정 지시가 있어야 한다.
 |
 | 🔑 **색은 전부 킷 팔레트에서 온다** — 🚫 새 색을 고안하지 마라(R-307).
 */
/*
 | 🆕 **앵커로 뛰어 들어오는 자리** (2026-09-08 · 이슈 #1420).
 |
 | 🚨 **소개 화면의 머리는 고정 80px 이다**(`layout.css`). 앵커로 뛰면 브라우저가
 |    항목의 위쪽을 창 맨 위에 맞추므로 **제목이 머리 뒤로 들어간다.** 미리보기 판이
 |    상단바에 가려졌던 것(#1422)과 같은 종류의 결함이다.
 | 🔑 **`scroll-margin-top` 은 뛰어드는 계산에만 끼어든다** — 여백을 실제로 만들지
 |    않으므로 화면 모양은 그대로다. 🚫 `padding-top` 으로 밀지 마라 · 항목 사이가 벌어진다.
 | 🚫 이 값을 다른 화면에 함께 걸지 마라 · 머리 높이가 화면마다 다르다.
 */
.flo-anchor-offset { scroll-margin-top: 96px; }

/* ═══ 굴려도 따라오는 담기 단추 (2026-09-08 · 이슈 #1429 · 🧑 지시) ═════════
 |
 | 🧑 *"인플루언서 검색 페이지에서 스크롤 내리면 '관심목록에 담기' 버튼이 좌측에 따라
 |    내려오도록 할 것. 단, 파비콘 형태로 따라 내려오도록 할 것. 마우스 호버 시,
 |    '관심 목록에 담기' 텍스트가 나오고 클릭 시 관심 목록 담을 수 있게 모달 형태로
 |    관심 목록 나오면 좋겠음."*
 |
 | 🔑 **평소에는 동그란 아이콘, 마우스를 올리면 글자가 따라 나온다.** 규칙만으로 한다 —
 |    🚫 스크립트로 폭을 재지 마라(#356 이후로 그럴 이유가 없다).
 | 🔑 **글자는 화면이 그린다** · 이 파일은 `max-width` 만 여닫는다. 🚫 CSS `content` 로
 |    글자를 넣지 마라 · 낭독기가 읽지 못하고 낱말의 주인이 스타일시트가 된다.
 | 🔑 **왼쪽 곁 메뉴 밖에 선다** — 메뉴 폭만큼 띄운다. 좁은 폭에서는 메뉴가 눕는다.
 | 🚫 **표를 가리지 마라** · 세로로는 화면 가운데 아래쪽에 둔다.
 */
/*
 | 🚨 **접힌 단추가 표를 가리지 않아야 한다** (2026-09-08 실측).
 |    본문은 곁 메뉴(232px) + 좌우 여백(44px) 뒤에서 시작한다. 처음 만든 48px 짜리는
 |    그 여백보다 커서 **체크상자 칸 위에 얹혔다** — 그 자리를 누를 수 없게 된다.
 | 🔑 **접힌 폭을 여백 안에 넣는다**(40px) · 펴지는 것은 마우스를 올린 동안뿐이라
 |    그때 잠깐 겹치는 것은 괜찮다.
 | 🚫 폭을 다시 키우지 마라 · 키우면 같은 자리를 다시 덮는다.
 |
 | 🔻 **2026-09-29 (#1527 · H14) 실측하니 47px 였다, 40px 가 아니라.** `gap: 8px` 는
 |    `.flo-float-pick__label` 이 `max-width:0` 으로 접혀도 **flex 항목 사이 틈으로는
 |    그대로 남는다.** 접힌 아이콘(약 17px) + 좌우 패딩(22px) + 그 틈(8px) = 47px.
 |    🔑 **틈을 없애고 라벨 자신의 `margin-left` 로 옮겼다.** 펼쳐질 때만
 |    (`:hover`·`:focus-visible`) 그 여백이 함께 펼쳐진다.
 */
.flo-float-pick {
    position: fixed;
    z-index: 1100;
    left: calc(var(--flo-sidebar-w) + 2px);
    bottom: 96px;

    display: inline-flex;
    align-items: center;

    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--flo-primary);
    border-radius: 20px;
    background: var(--flo-card);
    color: var(--flo-primary);
    box-shadow: 0 8px 24px rgba(25, 31, 40, .16);
    cursor: pointer;
}

/*
 | 🆕 **곁 메뉴를 접으면 64px 레일을 따라간다** (2026-09-29 · 이슈 #1527 · H14).
 |
 | 🚨 **왼쪽 자리가 펼친 메뉴 폭(`--flo-sidebar-w`)에 고정돼 있었다.** 곁 메뉴를
 |    접으면(`html.flo-nav-closed`) 본문은 64px 레일(`--flo-rail-w`) 뒤에서 시작하는데
 |    이 단추는 그대로 남아 **표의 계정 칸 위에 얹혔다**(x234 실측, 레일 폭은 64px).
 | 🔑 **곁 메뉴가 쓰는 것과 같은 표식**(`html.flo-js.flo-nav-closed`, `flo-shell.css`
 |    600행대)을 그대로 따라간다. 새 표식을 짓지 않는다.
 |
 | 🔻 **2026-09-29 (#1527 실측 재검토) 폭 조건 없이 적어 좁은 폭 규칙을 이겼다.**
 |    `flo-nav.js` 는 좁은 폭에서도(서랍을 열고 닫으면) `flo-nav-closed` 를 붙인다.
 |    그래서 390px 에서 서랍을 열었다 닫으면 이 규칙과 아래 `@media (max-width: 860px)`
 |    규칙이 함께 걸려 `left`(66px)와 `right`(16px)가 동시에 적용되고 단추가
 |    308px 로 늘어났다. 🔑 **곁 메뉴가 레일로 접히는 건 넓은 폭뿐이다**
 |    (`flo-shell.css` `@media (min-width: 860.02px)`) · 그 표식을 그대로 두른다.
 */
@media (min-width: 860.02px) {
    html.flo-js.flo-nav-closed .flo-float-pick { left: calc(var(--flo-rail-w) + 2px); }
}

/*
 | 🔑 하트는 앱이 이미 담기에 쓰는 글리프다 (`flo-bookmark__toggle`) · 🚫 새 아이콘을 만들지 마라
 |
 | 🔻 2026-09-29 (#1530 독립 검토) 13px 눈금 정리 때 18px 을 그대로 두었다. **아이콘
 |    글리프라 읽는 글자 눈금(13/14/16) 이 아니다.** 이 표식은 화면 아래 떠 있는
 |    큰 실행 단추(`flo-float-pick`, 44px) 안에 서는 것이라, 표·카드의 작은 하트
 |    (`flo-bookmark__toggle`, 24px 칸, 16px)보다 커야 자리에 맞는다. 🚫 16px 로
 |    낮추지 마라. 단추 안에서 작아 보인다.
 */
.flo-float-pick__mark { line-height: 1; } /* 🔻 2026-10-14 (#1737) ~~font-size: 18px~~ · 표식은 그림(`x-icon size="18"`)이라 글자 크기가 할 일이 없다. 그림 크기 18 은 그대로다 */
/* 🔻 2026-10-11 (#1616) 글자 하트를 선 아이콘(18 · 채움)으로 · 위 18 눈금을 그림 크기로 옮겼다 */
.flo-float-pick__mark { display: inline-grid; place-items: center; }
.flo-float-pick__mark .flo-icon { fill: currentColor; }

/*
 | 🔑 **글자는 자리를 0 으로 접어 둔다.** `display: none` 이면 낭독기에서도 사라져
 |    「무슨 단추인가」를 잃는다. 접어 두면 읽히고 눈에만 안 보인다.
 | 🔑 **`aria-label` 을 함께 두지 않는다** — 안쪽 글자가 이미 이름이다.
 | 🔻 **2026-09-29 (#1527 · H14) `margin-left` 를 여기로 옮겼다.** 위 `.flo-float-pick`
 |    의 `gap` 을 없앤 자리를 대신한다. 접힌 기본값은 0, 펼칠 때만 8px 이 붙는다.
 */
.flo-float-pick__label {
    max-width: 0;
    margin-left: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    transition: max-width 180ms ease, margin-left 180ms ease;
}

.flo-float-pick:hover .flo-float-pick__label,
.flo-float-pick:focus-visible .flo-float-pick__label { max-width: 200px; margin-left: 8px; }

/* 🚨 초점 고리를 지우지 마라 — 키보드로만 쓰는 사람이 지금 어디에 있는지 잃는다 */
.flo-float-pick:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }

/* 🔑 고른 사람이 없으면 누를 수 없다 — 판정은 `flo-selection.js` 가 붙인다 */
/*
 | 🔻 **2026-10-03 (#1559 · E6) 꺼진 단추는 그리지 않는다.**
 |    ~~`.flo-float-pick:disabled { border-color: var(--flo-line); color: var(--flo-ink-3); cursor: default; box-shadow: none; }`~~
 |    아무도 고르지 않은 동안에도 회색 동그라미가 늘 떠 있었고, 390px 에서 조건 판 오른쪽 끝을 덮었다.
 | 🔑 **한 명 이상 고르면 나타난다** · 끄고 켜는 판정은 그대로 `flo-selection.js` 가 한다.
 | 🔑 스크립트가 없으면 `disabled` 가 붙지 않아 바꾸기 전처럼 늘 보인다.
 */
.flo-float-pick:disabled { display: none; }

/*
 | 🔑 곁 메뉴가 위로 눕는 폭에서는 밀 것이 없다 (셸의 860px 규칙과 같은 자리)
 |
 | 🔻 2026-09-28 (#1510) 왼쪽 고정을 오른쪽으로 옮겼다. 이 폭에서는 표가 왼쪽 여백까지
 |    차지해 고정 단추(40px)가 스크롤 중인 행의 선택 상자 위에 그대로 얹혔다(390px 실측).
 |    오른쪽 끝은 표가 쓰지 않는 자리다. 「표를 가리지 마라」(윗 주석)와 같은 판단이다.
 |    🚫 `left` 와 함께 두지 마라. 폭이 없는 이 단추가 둘 사이로 늘어난다.
 |
 | 🔻 **2026-10-03 (#1559 · E6) 창에 고정하던 것을 결과 판 안에 붙여 따라오게 바꿨다.**
 |    ~~`.flo-float-pick { left: auto; right: 16px; bottom: 84px; }`~~
 |    390px 에서는 조건 판이 화면 높이를 거의 다 쓴다(실측 149~894px). 창 오른쪽 아래에
 |    고정하면 어느 높이에 두어도 조건 판의 검색어 칸 오른쪽 27px 을 덮었다.
 | 🔑 **`sticky` 는 부모(결과 판) 밖으로 나가지 않는다.** 결과 판이 화면에 들어온 동안만
 |    창 아래쪽(창 높이 - 124px, 바꾸기 전 `bottom: 84px` 과 같은 자리)에 붙어 따라오고,
 |    조건 판 위로는 올라가지 않는다.
 | 🔑 **`top` 으로 붙인다.** 단추의 제자리가 표보다 위라 `bottom` 으로는 붙지 않았다(실측).
 | 🔑 아래 여백 -40px 로 제자리 높이를 0 으로 만든다 · 나타날 때 표가 밀려 내려가지 않는다.
 | 🔑 결과 판 안쪽 오른쪽 끝(`margin-left: auto`)에 선다 · 판 안여백 안이다.
 */
/*
 | 🔻 **2026-10-09 (#1601 · 🧑 「하단 띠로 변경 (권장)」) 판 안 오른쪽 끝의 동그란 단추를 화면 아래 띠로 바꿨다.**
 |    ~~`.flo-float-pick { position: sticky; left: auto; right: auto; top: calc(100vh - 124px); bottom: auto; display: flex; width: max-content; margin: 0 0 -40px auto; }`~~
 |    390px 에서는 표가 판 안에서 900px 로 가로 굴림이라 판 오른쪽 끝도 표가 쓰는 자리였다.
 |    단추가 팔로워 · 팔로잉 숫자 칸을 덮었다(위 #1510 의 「오른쪽 끝은 표가 쓰지 않는 자리」 전제가 이 폭에서 맞지 않았다).
 | 🔑 **띠는 화면 폭 전체, 창 맨 아래에 고정한다.** 글자는 늘 펴 두고 인원수(`.flo-float-pick__count`)를 앞에 적는다.
 | 🔑 **문서 아래에 띠 높이만큼 여백을 더한다**(아래 `body:has(...)`) · 마지막 줄이 띠 뒤에 숨지 않는다.
 | 🔑 **아이폰 아래 홈 막대 자리**(`env(safe-area-inset-bottom)`)만큼 띠 안쪽을 늘린다.
 | 🔑 `z-index` 950 · 위 막대(900)보다 위, 곁 메뉴 서랍(990 · 1000)보다 아래다. 서랍을 열면 서랍이 띠를 덮는다.
 | 🔑 넓은 폭(곁 메뉴 옆 동그란 단추)은 그대로다.
 */
.flo-float-pick__count { display: none; }
@media (max-width: 860px) {
    .flo-float-pick {
        position: fixed; z-index: 950; left: 0; right: 0; bottom: 0;
        display: flex; justify-content: center;
        height: auto; min-height: 56px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
        border: 0; border-top: 1px solid var(--flo-line); border-radius: 0;
        box-shadow: 0 -4px 16px rgba(25, 31, 40, .10);
    }
    /* 🔑 틈은 `gap` 이 아니라 여백으로 준다 · 위 `.flo-float-pick` 에 `gap` 을 두지 않는다는 #1527 검사(`FloatPickPositionTest`)와 같은 판단이다 */
    .flo-float-pick__count { display: inline; margin: 0 6px 0 8px; font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .flo-float-pick .flo-float-pick__label,
    .flo-float-pick:hover .flo-float-pick__label,
    .flo-float-pick:focus-visible .flo-float-pick__label { max-width: none; margin-left: 0; }
    .flo-float-pick:focus-visible { outline-offset: -4px; }
    /* 🔑 본문이 아니라 문서 끝에 더한다 · 본문에만 더하면 아래 바닥글(사업자 정보) 마지막 줄이 띠 뒤에 숨는다(390 실측) */
    body:has(.flo-float-pick:not(:disabled)) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
    /*
     | 🆕 2026-10-09 (#1602 독립 검토) 띠가 보이는 동안 잠깐 뜨는 알림(`.flo-inline-alert--transient`, 아래 32)을 띠 위로 올린다.
     |    알림(z 1200)이 약 3초 동안 띠(56)를 덮어 「관심목록에 담기」가 눌리지 않았다. 띠 높이 56 + 틈 16 + 홈 막대 자리다.
     */
    body:has(.flo-float-pick:not(:disabled)) .flo-inline-alert--transient { bottom: calc(56px + 16px + env(safe-area-inset-bottom)); }
    /* 🆕 2026-10-10 (#1609 검토) 셸의 알림도 같다 · 실패 알림은 이제 닫을 때까지 남아(124- 46장) 띠를 계속 덮었다 */
    body:has(.flo-float-pick:not(:disabled)) .flo-alert--transient { bottom: calc(56px + 16px + env(safe-area-inset-bottom)); }
}

/*
 | 🔑 **움직임을 줄이도록 설정한 사람에게는 접히고 펴지는 움직임을 끈다.**
 |    🚫 글자를 늘 펴 두지 마라 · 그러면 단추가 표를 가린다.
 */
@media (prefers-reduced-motion: reduce) {
    .flo-float-pick__label { transition: none; }
}

/*
 | 🆕 **휴대폰 선택 막대** (2026-10-11 · 이슈 #1623 · 🧑 「B 카드 전체 선택 (권장)」 · 화면 `influencer/search.blade.php`).
 |
 | 🔑 640 이하 카드 목록에서 위 아래 띠(#1601)를 대신한다. 고른 인원 · 「선택 해제」 · 「캠페인에 담기」 · 「관심목록에 담기」가 한 막대에 선다.
 | 🔑 담기 도구 줄은 이 폭에서 감춘다 · 같은 일을 막대가 한다. 스크립트가 없으면 막대는 그리지 않고 도구 줄과 띠가 그대로다(`html.flo-js`).
 | 🔑 고른 사람이 없으면 막대를 감춘다 · 꺼짐 판정은 `flo-selection.js` 가 막대 안 단추에 붙인다(`data-selection-submit`).
 | 🔑 높이 64(누름 자리 44 + 위아래 10) · 아이폰 아래 홈 막대 자리만큼 아래를 늘린다 · `z-index` 950 은 #1601 띠와 같다.
 | 🔑 「선택 해제」의 누름 자리 44 는 `flo-hit` 이 넓힌다(위 「누르는 면」).
 | 🔑 「캠페인에 담기」 펼침은 행의 「⋯」 메뉴 모양을 빌리고 막대 위로 펼친다.
 */
.flo-pick-bar { display: none; }
@media (max-width: 640px) {
    html.flo-js .flo-main .flo-pick-bar {
        position: fixed; z-index: 950; left: 0; right: 0; bottom: 0;
        display: flex; align-items: center; gap: 8px;
        min-height: calc(64px + env(safe-area-inset-bottom)); margin: 0; padding: 0 16px env(safe-area-inset-bottom);
        border-top: 1px solid var(--flo-line); background: var(--flo-card);
        box-shadow: 0 -4px 16px rgba(25, 31, 40, .10); word-break: keep-all;
    }
    html.flo-js .flo-main .flo-pick-bar:has([data-selection-submit]:disabled) { display: none; }
    html.flo-js .flo-main .flo-search-result:has(.flo-pick-bar) :is(.flo-result-tools__row, .flo-float-pick) { display: none; }
    html.flo-js body:has(.flo-pick-bar [data-selection-submit]:not(:disabled)) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
    html.flo-js body:has(.flo-pick-bar [data-selection-submit]:not(:disabled)) :is(.flo-inline-alert--transient, .flo-alert--transient) { bottom: calc(64px + 16px + env(safe-area-inset-bottom)); }
    .flo-main .flo-pick-bar__info { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0 auto 0 0; line-height: 20px; }
    .flo-main .flo-pick-bar__count { color: var(--flo-primary); font-size: 14px; font-weight: 700; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15~~ → 14 */ white-space: nowrap; font-variant-numeric: tabular-nums; }
    .flo-main .flo-pick-bar__clear { color: var(--flo-ink-3); font-size: 13px; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
    .flo-main .flo-search-result .flo-pick-bar .flo-row-menu__btn,
    .flo-main .flo-search-result .flo-pick-bar .flo-btn {
        display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; height: 44px; padding: 0 12px;
        font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
    }
    .flo-main .flo-search-result .flo-pick-bar .flo-row-menu__btn { color: var(--flo-ink-1); }
    .flo-main .flo-search-result .flo-pick-bar .flo-row-menu__list { top: auto; bottom: calc(100% + 8px); }
}

/* 창 안의 관심목록 줄 — 창은 폼 밖이고 단추가 `form=` 으로 폼을 가리킨다 */
.flo-folder-pick { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.flo-folder-pick__row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--flo-line);
    border-radius: var(--flo-radius);
    background: var(--flo-card);
    color: var(--flo-ink-1);
    text-align: left;
    cursor: pointer;
}
.flo-folder-pick__row:hover:not(:disabled) { border-color: var(--flo-primary); background: var(--flo-primary-soft); }
.flo-folder-pick__row:disabled { color: var(--flo-ink-3); cursor: default; }
.flo-folder-pick__count { font-size: 13px; color: var(--flo-ink-2); }
/*
 | 🆕 **창 안에서 이름만 적어 새 관심목록에 담는 줄** (2026-10-06 · 이슈 #1568).
 | 🔑 목록과 가로선으로 가른다 · 위는 「있는 것에 담기」, 아래는 「만들며 담기」다.
 */
.flo-folder-new { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line); }
.flo-folder-new__label { font-size: 14px; font-weight: 600; color: var(--flo-ink-1); }
.flo-folder-new__row { display: flex; align-items: center; gap: 8px; }
.flo-folder-new__row .flo-field__input { flex: 1 1 auto; min-width: 0; }
/* 🆕 2026-10-10 (#1610) 창 단추 줄에 단추가 셋 이상이면 「담기」가 꺼진 까닭은 제 줄을 받는다 · 단추 사이에 끼어 단추가 두 줄로 갈렸다(캠페인 창 1440 실측) */
.flo-modal__body .flo-form__actions:has(> .flo-btn ~ .flo-btn ~ .flo-btn) > .flo-form-bar__why { flex-basis: 100%; }
/* 🆕 2026-11-03 (소규모 이슈) 단추가 둘이어도 긴 단추 곁에서는 까닭이 제 줄을 받는다 · 위저드 ③ 「관심목록 선택」 창의 「몇 명이 담기는지 보기」가 1280 이상에서 아래로 떨어졌다(실측) */
.flo-modal__body .flo-form__actions > .flo-form-bar__why--line { flex-basis: 100%; }
/* 🔻 2026-10-11 (#1612) ~~「새 관심목록」 선택지 바로 아래의 이름 칸(`.flo-folder-new__row--pick` · 왼쪽 36)~~ · 선택지를 걷고 생성 보기로 옮겼다 */
/*
 | 🆕 **관심목록 창의 두 갈래: 목록 보기 · 생성 보기** (2026-10-11 · 이슈 #1612).
 | 🔑 갈래는 창의 `data-pick-view` 가 정한다(`flo-search-tools.js` ⑤). 표식이 없으면(스크립트 없음) 두 갈래가 위아래로 함께 보이고,
 |    갈래를 바꾸는 단추(`data-pick-js-only`)만 감춘다 · 그때 생성 갈래는 가로선 아래에 제 제목을 달고 선다.
 */
.flo-modal[data-pick-view="list"] [data-pick-create],
.flo-modal[data-pick-view="create"] [data-pick-list],
.flo-modal[data-pick-view="create"] .flo-modal__sub,
.flo-modal[data-pick-view] .flo-folder-create__title,
.flo-modal:not([data-pick-view]) [data-pick-js-only] { display: none; }
.flo-folder-create-open { margin-top: 8px; }
.flo-modal:not([data-pick-view]) .flo-folder-create { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line); }
.flo-folder-create__title { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--flo-ink-1); }
/*
 | 🆕 **관심목록 상세 창의 고르는 줄(`x-folder-picker`) 두 갈래** (2026-10-11 · 이슈 #1615).
 | 🔑 검색 화면 담기 창(위 #1612)과 같은 짜임이다. 다만 갈래 표식(`data-folder-picker-view`)은 창이 아니라 부품에 단다 ·
 |    관심목록 상세 창 하나에 이 부품이 두 벌(「ID로 직접추가」 · 「다른 관심목록에도 저장」) 놓인다(`flo-folder-picker.js`).
 | 🔑 표식이 없으면(스크립트 없음) 두 갈래가 함께 보이고 「관심목록 생성」 줄(새 관심목록 라디오)이 목록의 한 선택지처럼 선다.
 |    표식이 있으면 그 줄은 감추고 갈래가 값을 정한다 · 감춘 라디오도 켜져 있으면 폼에 실린다.
 | 🔑 생성 보기에서는 위 목록이 감춰지므로 가로선을 걷는다(스크립트 없을 때의 가로선은 위 `.flo-modal:not([data-pick-view])` 규칙).
 */
[data-folder-picker-view="list"] [data-folder-picker-create],
[data-folder-picker-view="create"] [data-folder-picker-list],
[data-folder-picker-view] .flo-choice[data-folder-picker-new-row], /* 🔑 `.flo-main .flo-choice`(0,2,0 · 뒤에 있음)를 이기도록 클래스를 붙인다 */
[data-folder-picker]:not([data-folder-picker-view]) [data-folder-picker-js-only] { display: none; }
[data-folder-picker][data-folder-picker-view] .flo-folder-create { margin-top: 0; padding-top: 0; border-top: 0; }
[data-folder-picker]:not([data-folder-picker-view]) .flo-folder-create .flo-field { margin-top: 8px; } /* 🔑 스크립트가 없을 때만 「관심목록 생성」 줄과 이름 칸 사이를 띄운다 */
/* 🔑 줄의 글자 묶음이 좁아질 수 있어야 긴 관심목록 이름이 말줄임으로 끝난다(`.flo-campaign-pick__name`) */
.flo-main .flo-choice--row .flo-choice__text { min-width: 0; }

/*
 | 🆕 **행에서 바로 담기** (2026-10-06 · 이슈 #1568 · 정본 125- 「표」).
 |
 | 🚨 검색 표는 1265 창(감싼 칸 945)에 꼭 맞아 열을 더할 자리가 없다. 계정 칸 200 은 줄이지 않는다(#1562).
 | 🔑 **행 끝에 뜬다** · 마우스를 올리거나 키보드 초점이 행 안에 들어오면 마지막 칸 위에 선다(R-314 ④).
 |    기준은 행이다(`common.css` 가 `tbody tr` 에 `position: relative` 를 준다).
 | 🔑 `display: none` 으로 숨기지 않는다 · 숨기면 Tab 이 닿지 않아 초점으로 열 수 없다. 투명하게만 둔다.
 | 🔑 스크립트가 없으면 아예 그리지 않는다 · 창을 여는 일이 스크립트다.
 | 🔑 바탕은 행에 마우스를 올린 회색과 같은 계열이고 왼쪽 ~~16~~ 12 는 흐려지며 덮는다 · 덮인 날짜가 잘려 보이지 않게.
 | 🔻 2026-10-06 (#1568 독립 검토) 글자 단추 둘(덮개 폭 199)이 카테고리 일부 · 이메일 · 최종 갱신을 덮어 이메일이 사라졌다.
 |    그림 단추 둘(32 + 4 + 32)과 흐림 12 로 덮개를 80 으로 줄여 「최종 갱신」 칸(103, 안쪽 83) 안에만 선다.
 | 🔑 **마우스가 없는 기기(`hover: none`)에서는 그리지 않는다.** 손가락으로는 행 위에 머물 수 없어 거의 닿지 않고,
 |    늘 보이게 하면 최종 갱신을 가린다. 빈 누름 자리를 남기지 않는다. 그때는 선택 상자와 도구 줄 · 따라오는 단추를 쓴다.
 */
/*
 | 🔻 **2026-10-10 (#1610) 덮개를 걷고 마지막 「관리」 열에 늘 세운다** (웹 목록의 보편 관례 · 행 동작 열).
 |    ~~마우스를 올리거나 초점이 들어오면 「최종 갱신」 칸 위에 뜬다 · 마우스가 없는 기기에서는 그리지 않는다~~
 |    터치 기기(390)에서 두 단추가 0×0 이라 누를 수 없었고, 마우스로는 날짜를 가렸다.
 | 🔑 열 폭 84 = 칸 왼쪽 여백 4 + 단추 32 + 사이 4 + 단추 32 + 바깥 안여백 12. 표 `min-width` 가 함께 84 늘었다(화면 주석).
 |    성과 열이 모두 붙는 몰은 1280 창에서 표가 감싼 칸(945)보다 넓어져 **표 안에서만** 가로로 넘긴다(R-308 표 규칙).
 | 🔑 767 이하에서는 두 단추를 「⋯」 하나(44 × 44 누름 자리)로 접는다. 두 단추를 44 로 세우면 열이 100 을 넘는다.
 | 🔑 스크립트가 없으면 둘 다 그리지 않는다 · 창을 여는 일이 스크립트다. 그때는 선택 상자와 도구 줄이 같은 일을 한다.
 */
.flo-main .flo-search-result .flo-table thead th.flo-th--row-acts { width: 84px; }
.flo-main .flo-search-result .flo-row-acts,
.flo-main .flo-search-result .flo-row-menu { display: none; }
html.flo-js .flo-main .flo-search-result .flo-row-acts { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
@media (max-width: 767px) {
    .flo-main .flo-search-result .flo-table thead th.flo-th--row-acts { width: 60px; }
    html.flo-js .flo-main .flo-search-result .flo-row-acts { display: none; }
    html.flo-js .flo-main .flo-search-result .flo-row-menu { display: inline-block; position: relative; }
}
.flo-main .flo-search-result .flo-row-menu__btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--flo-line-strong); border-radius: var(--flo-radius); /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    background: var(--flo-card); color: var(--flo-ink-2); font-size: 16px; line-height: 1; cursor: pointer;
    list-style: none;
}
.flo-main .flo-search-result .flo-row-menu__btn::-webkit-details-marker { display: none; }
.flo-main .flo-search-result .flo-row-menu[open] > .flo-row-menu__btn { border-color: var(--flo-primary); color: var(--flo-primary); }
/* 🔑 펼친 목록은 칸 오른쪽 끝에 붙는다 · 표 오른쪽 끝 열이라 왼쪽으로 펼친다 */
.flo-main .flo-search-result .flo-row-menu__list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 5;
    display: flex; flex-direction: column; min-width: 168px; padding: 4px;
    border: 1px solid var(--flo-line); border-radius: var(--flo-radius);
    background: var(--flo-card); box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
}
.flo-main .flo-search-result .flo-row-menu__item {
    min-height: 44px; padding: 0 12px; border: 0; border-radius: 4px;
    background: transparent; color: var(--flo-ink-1); font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer;
}
.flo-main .flo-search-result .flo-row-menu__item:hover { background: var(--flo-primary-soft); }
/* 🔑 행마다 쌓임 맥락이 따로라(`tbody tr` 의 `position: relative`) 열린 메뉴가 아래 행 밑으로 들어간다 · 그 행을 올린다 */
.flo-main .flo-search-result tbody tr:has(.flo-row-menu[open]) { z-index: 3; }
/* 🔑 마지막 두 행은 위로 펼친다 · 표를 감싼 칸(`overflow: auto`) 아래로 나가면 잘리고 세로 막대가 생긴다 */
.flo-main .flo-search-result tbody tr:nth-last-child(-n+2) .flo-row-menu__list { top: auto; bottom: calc(100% + 4px); }
.flo-main .flo-search-result .flo-row-acts__btn {
    display: inline-grid; place-items: center; width: var(--flo-control-h-sm); height: var(--flo-control-h-sm);
    padding: 0; border: 1px solid var(--flo-line-strong); border-radius: var(--flo-radius); /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    background: var(--flo-card); color: var(--flo-ink-2); cursor: pointer;
}
.flo-main .flo-search-result .flo-row-acts__btn:hover { border-color: var(--flo-primary); color: var(--flo-primary); }
/* 🔑 그림은 곁 메뉴와 같은 방식이다 · 선 하나짜리 파일을 `mask` 로 얹고 색은 글자색을 따른다(`flo-shell.css` 곁 메뉴 그림 주석) */
.flo-main .flo-search-result .flo-row-acts__icon {
    width: 18px; height: 18px; background-color: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 18px 18px; mask-size: 18px 18px;
}
.flo-main .flo-search-result .flo-row-acts__icon[data-icon="folder"] { -webkit-mask-image: url('../images/flo/icon-row-folder.svg'); mask-image: url('../images/flo/icon-row-folder.svg'); }
.flo-main .flo-search-result .flo-row-acts__icon[data-icon="campaign"] { -webkit-mask-image: url('../images/flo/icon-gnb-campaign.svg'); mask-image: url('../images/flo/icon-gnb-campaign.svg'); }

/*
 | 🆕 **표 몸통 안 도움말 말풍선은 닫혀 있을 때 자리를 차지하지 않고, 위로 펼친다** (2026-10-06 · #1568 독립 검토).
 |
 | 🚨 말풍선은 `visibility: hidden` 으로 닫혀 있어도 자리를 차지한다. 아래쪽 행의 「산출 불가」 말풍선이 아래로 펼쳐
 |    표를 감싼 칸(`overflow: auto`)에 세로 67px 넘침을 만들었고, 세로 막대 15px 가 생겨 1265 폭 표 945 맞춤이 깨졌다.
 | 🔑 닫혔을 때는 `display: none` · 열 때만 그린다. 몸통은 머리 아래라 위에 자리가 있으므로 **위로** 펼친다.
 |    첫 행만은 위가 표 머리라 모자라 아래로 펼친다(행이 하나뿐인 표에서는 열린 동안만 잠깐 막대가 생길 수 있다).
 |    둘째 행부터는 위로 펼쳐도 머리 아래에 든다(1265 실측: 둘째 행을 아래로 펼치면 행 셋인 표가 1px 넘쳤다).
 | 🚫 표 머리(`thead`)의 말풍선은 건드리지 않는다 · 아래로 펼쳐 몸통 위에 뜬다.
 */
.flo-main .flo-table-wrap tbody .flo-hint__bubble { display: none; top: auto; bottom: calc(100% + 9px); }
.flo-main .flo-table-wrap tbody .flo-hint__bubble::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--text-color-2, #202527); }
.flo-main .flo-table-wrap tbody tr:first-child .flo-hint__bubble { top: calc(100% + 9px); bottom: auto; }
.flo-main .flo-table-wrap tbody tr:first-child .flo-hint__bubble::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--text-color-2, #202527); }
.flo-main .flo-table-wrap tbody .flo-hint__mark:is(:hover, :focus-visible) + .flo-hint__bubble { display: block; }
/*
 | 🆕 2026-10-27 (#1901 · 🧑 「이런 말풍선 고쳐」) **말풍선이 열린 행을 표 머리 위로 올린다.**
 | 🚨 킷(`common.css`)이 몸통 행마다 `position: relative; z-index: 1` 을 줘서 말풍선(20)이 그 행 안에 갇힌다.
 |    붙박이 표 머리 칸(`.flo-th` · 2)이 행보다 위라, 첫 행 말풍선을 위로 열면(`flo-hint-fit.js`) 머리 칸에 가려 글 없는
 |    검은 상자로만 보였다(개발 서버 0.27.0 · 검색 「응답 · 수락」 표본 부족 점 실측). 아래로 열면 다음 행 밑에 깔린다.
 | 🔑 열린 동안만 그 행을 3 으로 올린다 · 위의 행 메뉴(`tr:has(.flo-row-menu[open])`)와 같은 방식이다.
 |    이름 고정 열 머리(3)보다 뒤에 그려지므로 그 위에도 뜬다. 선택자는 행에 1 을 준 킷 규칙과 같은 자리를 짚는다.
 */
.common-table-wrap .common-table tbody tr:has(.flo-hint__mark:is(:hover, :focus-visible)) { z-index: 3; }
/* 🔑 끝 정렬 말풍선도 `flo-hint-fit.js` 가 잰 만큼 옆으로 옮긴다 · 좁은 폭에서 감싼 칸 왼쪽에 잘렸다(390 실측 57px) */
.flo-main .flo-table-wrap tbody .flo-hint--end .flo-hint__bubble { transform: translateX(var(--flo-hint-shift, 0px)); }
.flo-main .flo-table-wrap tbody .flo-hint--end .flo-hint__bubble::before { transform: translateX(calc(-1 * var(--flo-hint-shift, 0px))); }
/*
 | 🆕 **참여율 「산출 불가」** (2026-10-06 · 이슈 #1568 · R-307).
 | 🔑 값이 아니라 사정이라 숫자처럼 굵거나 진하게 그리지 않는다 · 결측 표기와 같은 옅은 글자다.
 | 🔑 검색 표 참여율 칸(62)에서는 낱말 사이에서 두 줄로 접힌다 · 행 높이(사진 32 + 위아래 14)를 넘지 않는다.
 */
/*
 | 🔻 2026-10-29 (#1918 · 🧑 「참여율은 삭제」) 검색 목록 · 카드 · 상세가 SNS 참여율을 걷어 이 규칙을 쓰는 자리가 없다. 규칙을 걷었다.
 |    ~~`.flo-main .flo-gap-mark { font-size: 13px; font-weight: 400; color: var(--flo-ink-3); }`~~
 |    ~~`.flo-main .flo-gap-mark__tail { white-space: nowrap; }`~~ (도움말 표식이 혼자 다음 줄로 떨어지지 않게 「불가」와 묶었다)
 */
/*
 | 🆕 표 안의 짧은 꼴 (2026-10-06 · #1572 리드 검토) · 흐린 「-」 + 도움말 표식 한 줄. 행 높이를 키우지 않는다.
 | 🔑 표식의 기준선 보정(`top`)을 풀고 묶음 안에서 가운데로 세운다 · 「-」와 표식의 가운데가 한 높이다.
 */
/*
 | 🔻 2026-10-06 (#1572 독립 검토) ~~`display: inline-flex` 로 「-」와 표식을 한 묶음으로 세웠다~~. 묶음째 가운데라
 |    그 열의 「-」만 다른 행보다 약 12px 왼쪽에 섰다. 표식을 흐름 밖(오른쪽 옆)으로 빼 「-」가 칸 가운데에 선다.
 */
/*
 | 🔻 2026-10-29 (#1918) 짧은 꼴도 함께 걷었다 · 쓰는 자리가 없다.
 |    ~~`.flo-main .flo-gap-mark--compact { position: relative; display: inline-block; white-space: nowrap; vertical-align: middle; }`~~
 |    ~~`.flo-main .flo-gap-mark--compact > .flo-hint { position: absolute; left: 100%; top: 50%; margin-left: 4px; transform: translateY(-50%); }`~~
 */
/*
 | 🆕 **「표본 부족」 표식** (2026-10-06 · 🧑 결정 · 이슈 #1572). 숫자 오른쪽 위의 작은 점(6)이고 뜻은 `title` ·
 |    낭독 이름(「표본 부족」)과 열 머리 도움말이 말한다. 둘째 줄 「표본 부족」 글자를 대신해 행 높이를 키우지 않는다.
 | 🔑 점은 흐름 밖이라 숫자가 칸 가운데에 그대로 선다. 「100.0%」(48) 옆에 서도 검색 표 비율 칸(62) 안여백 안에 든다.
 | 🔑 색은 주의 계열이 아니라 보라(`--flo-primary`)다. 값이 틀린 것이 아니라 「건수가 적다」는 덧말이다.
 */
.flo-main .flo-sample-host { position: relative; display: inline-block; white-space: nowrap; }
/*
 | 🔻 2026-10-19 (#1799 · 🧑 「점을 누르면 설명」) 점이 도움말 표식의 점 모양(`x-hint mark="dot"`)이 되었다. 뜻은 `title` 이 아니라 말풍선이 말한다.
 |    ~~`.flo-main .flo-sample-mark { position: absolute; left: 100%; top: 2px; margin-left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--flo-primary); cursor: help; }`~~
 | 🔑 자리 · 크기 · 색은 그대로다(숫자 오른쪽 위 2 · 6 · 보라). 표식 묶음(`.flo-hint`)이 흐름 밖에 서서 숫자는 칸 가운데에 그대로 선다.
 | 🔑 누름 자리는 그림 밖 투명 면(`::after`)이 가로 24 · 세로 18 로 넓힌다(아래 「누름 면」 절의 `.flo-hint__mark--dot::after`). 그림은 6 그대로다.
 */
.flo-main .flo-sample-host > .flo-hint { position: absolute; left: 100%; top: 2px; margin-left: 2px; }
.flo-main .flo-hint__mark--dot { width: 6px; min-width: 6px; height: 6px; background: var(--flo-primary); }
.flo-main .flo-hint__mark--dot:hover { background: var(--flo-primary); }
/* 🔑 초점만 들어와도 행 바탕이 켜진다 · 마우스가 없는 사람에게도 어느 행의 단추인지 보인다 */
.flo-main .flo-search-result .common-table tbody tr:focus-within td:first-of-type::before { opacity: 1; }

/*
 | 🔻 2026-10-22 (#1859) 작성 방법 안내 판(`x-participation-flow` · `.flo-guide*`)의 모양을 `flo-landing.css` 「11. 작성 방법」으로 옮겼다.
 |    이 판을 부르는 화면은 작성 방법 화면(`public.guide`) 하나이고, 그 화면은 이제 셸 `landing` 이라 이 파일을 싣지 않는다.
 |    옮기기 전 덩어리(#1420 · #1565 · #1567)는 git 기록에 있다. 🚫 여기에 되살리지 마라 · 두 벌이 되면 한쪽만 고쳐진다.
 */

/* ── 선택형 보기 칸 묶음 (이슈 #1340 · #1305 파생) ────────────────────
 | 🚨 이 덩어리는 **여러 줄짜리**인데 질문 편집 폼은 **가로 한 줄**로 짜여 있다
 |    (`flex flex-wrap items-end`). 규칙이 없으면 줄 높이가 이 덩어리에 맞춰지고,
 |    `items-end` 가 나머지 칸을 바닥에 붙여 **줄이 통째로 어긋난다.**
 |    실제로 질문·답변 유형이 아래로 밀리고 필수·질문 추가가 흩어졌다.
 |
 | 🔑 **한 줄을 통째로 차지한다.** 가로 줄 안에 들어와도 자기 줄을 갖는다.
 | 🚫 고정 폭을 박지 마라 (R-308) · 좁은 창에서 칸이 잘린다.
 | 🚫 부품 마크업에 폭을 적지 마라 · 세 화면이 같은 부품을 쓴다.
 |
 | ⚠️ 이 규칙이 없으면 `DeadClassGuardTest` 가 「이름만 있고 규칙이 없다」로 문다.
 |    🚫 이름을 빼는 것으로 통과시키지 마라 · 그러면 붙일 자리가 사라진다(#1342).
 */
.flo-main .flo-choice-rows {
    flex-basis: 100%;
    width: 100%;
}

/* ── 보기 칸은 선택형일 때만 보인다 (2026-09-07 · 이슈 #1381) ──────────
 |
 | 🧑 *"참여 질문은 답변 유형에 따라 input이 바뀌면 좋겠음. 현재는 모두 input
 |    박스라서 헷갈림."*
 |
 | 🚨 **직전까지 답변 유형과 무관하게 언제나 그려졌다.** 질문 한 줄에 뜻이 다른
 |    글상자가 여섯 개 섰다. 질문 문구 1 + 보기 5. 부품 자신이 그 칸에
 |    「보기 (선택형일 때만)」이라고 적어 **지금 쓸모없는 칸임을 스스로 밝히면서도**
 |    감추지 않았다.
 |
 | 🔻 **`choice-rows`·`_questions`·`question-editor` 세 자리의 「유형에 따라 칸을
 |    감추지 마라」를 이 지시가 뒤집는다.** 그 판단의 근거는 「감추는 것도 대본이다」
 |    였는데, **대본 없이 규칙만으로 성립**하므로 그 근거가 사라졌다.
 |
 | 🔑 **입력칸은 문서에 그대로 둔다.** 보이기만 가린다. 값이 실려 와도 받는 쪽이
 |    유형을 보고 버리므로 **감춘 칸이 저장을 어지럽히지 않는다.**
 | 🔑 **`:has()` 는 이 파일이 이미 쓰는 무늬다**(`.flo-modal__body:has(> .flo-scrollpane)`).
 |    🚫 자바스크립트로 바꾸지 마라 · 대본이 없으면 늘 보이게 된다.
 | 🔑 **`option:checked` 는 지금 골라진 것을 가리킨다.** 아무것도 `selected` 가
 |    아니어도 브라우저가 첫 보기를 고르므로, 새 질문 줄은 단답형으로 열려 감춰진다.
 | 🔑 **표식 하나로 세 자리를 함께 건다.** 🚫 자리마다 다른 선택자를 적지 마라 ·
 |    한쪽만 고쳐지는 날이 온다.
 */
[data-flo-question-fields]:not(:has(select option[value="choice"]:checked)) [data-flo-choice-rows] {
    display: none;
}

/* ── 소개 화면 바닥글 링크 (2026-09-25 · 이슈 #1478) ──────────────────
 |
 | 🚨 **바닥글 링크가 바탕과 거의 같은 색이었다.** 킷의 바닥글(`layout.css` `#footer`)은
 |    바탕 `#292C2E` 에 글자 `#A7A7A7` 이고 링크는 `.foot .util .link` 짜임에서만 색을 받는다.
 |    우리 바닥글은 그 짜임이 아니라서 `reset.css` 의 `a { color: #111 }` 이 남아 **1.34:1** 이었다(실측).
 | 🔑 **새 색을 짓지 않는다**(R-306). 바닥글 글자색을 그대로 물려받는다(5.84:1).
 | 🔑 **밑줄로 링크임을 보인다.** 옆 글자와 같은 색이 되므로 색만으로는 가를 수 없다.
 */
#footer .inner a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── 768px 미만 · 지원 밖이지만 깨지지 않는다 (2026-09-25 · 이슈 #1473 · R-308) ─────────
 |
 | 🔑 구간은 `05-foundation.md` 의 셋째 단(768 미만)이다. 🚫 새 구간을 만들지 마라.
 | 🚨 화면 머리: 오른쪽 단추 둘이 자리를 먼저 잡아 제목이 34px 폭에 「템플릿 수정」 5줄로 쌓였다.
 |    🔑 단추 묶음을 다음 줄로 내린다. 1024 이상에서는 그대로 옆에 선다.
 | 🚨 두 칸 격자: 연동 설정의 정보 판이 147px 로 좁아져 값 칸이 12px 이 되었다.
 |    🔑 한 칸으로 쌓는다. 가로 두 칸이 필요한 폭이 아니다.
 */
/*
 | 🚨 표 최소 폭: 명단 표는 칸이 37px, 담은 상품 표는 상품명이 13px 로 짓눌렸다.
 |    🔑 이 구간에서만 720px 을 준다(관심목록 표와 같은 값). 넘치는 몫은 감싸개가 민다(R-308).
 |    🚫 구간 밖으로 꺼내지 마라 · 1024~1100 에서도 표가 가로로 밀렸다(독립 검토 실측).
 |
 | 🔻 **2026-09-29 (#1527 독립 검토 재검토) `.flo-picked-table` 홀로는 표가 아니라
 |    감싸개(`.flo-table-block`)에 붙는다** (`x-data-table` 골격, `data-table.blade.php`
 |    가 그 클래스를 바깥 `<div>` 에 얹는다). `.flo-main .flo-table-block { min-width: 0 }`
 |    가 클래스 둘로 더 무거워 이 규칙을 이겨 390 에서 표가 308px(칸마다 51px)로
 |    짓눌렸다(실측). 🔑 **명단 표와 같은 자리를 짚는다.** 감싸개가 아니라 안의 `<table>` 이다.
 */
/* 🔻 2026-10-11 (#1623) ~~`.flo-picked-table .flo-table`~~ 를 뺐다 · 담은 상품이 표에서 카드 바둑판(`.flo-picked-grid`)으로 바뀌어 짚을 표가 없다 */
@media (max-width: 767px) {
    .flo-main .flo-roster-list .flo-table { min-width: 720px; }
    .flo-page-head { flex-wrap: wrap; }
    .flo-page-head__text { flex: 1 1 100%; }
    .flo-main .grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
    .flo-main .grid.grid-cols-2 > .col-span-2 { grid-column: auto; }
    /*
     | 🆕 관심목록 카드 3열 (2026-09-28 · 이슈 #1510).
     |
     | 🚨 3열 고정이라 390px 에서 칸이 이름 두세 자 폭으로 눌려 「QA8-E 관심목록」이
     |    한 자씩 쌓이고 삭제(×) 표식이 이름 위에 겹쳤다. 위 grid-cols-2 와 같은 처방이다.
     */
    .flo-main .grid.grid-cols-3 { grid-template-columns: minmax(0, 1fr); }

    /*
     | 🆕 가운데로 벌어지는 도움말 말풍선 (2026-09-28 · 이슈 #1510).
     |
     | 🚨 `--center` 는 표식 가운데에서 좌우로 125px 씩 벌어진다. 표식이 화면 왼쪽에
     |    가까운 필터 이름표·도구 줄 제목에서는 390px 폭에서 왼쪽으로 최대 31px 넘쳤다
     |    (검색 「카테고리」·「인플루언서 선택 후…」, 기본정보 「목표」 실측).
     | 🔑 새 값을 짓지 않고 **가운데 정렬을 끈다.** 표식 왼쪽에서 오른쪽으로 벌어지는
     |    기본(변형 없는) 자리로 돌아간다.
     |
     | 🔻 2026-09-28 검토 후속(#1510). 위 마지막 문장 「이 폭에서는 표식이 화면 왼쪽에
     |    있으므로 넘치지 않는다」는 **틀렸다.** 표식이 화면 가운데에서 오른쪽에 있는
     |    자리(검색 「팔로워 범위 밖」 안내, 기본정보 「캠페인 이름」)는 오른쪽으로
     |    열어도 최대 106px 넘쳤다(390·360 폭 실측). 표(`.flo-table-wrap`)에 담긴
     |    표식은 표 자신의 `overflow-x: auto` 가 이미 거둬 페이지 폭에는 안 닿는다.
     |    표 밖의 자리만 남은 문제다.
     | 🚨 **숨은 말풍선도 자리를 차지한다.** `visibility: hidden` 은 그리기만 지우고
     |    배치는 그대로라, **표식을 누르기 전부터** 페이지 자체가 가로로 밀렸다
     |    (검색 화면 `scrollWidth` 466, 390 폭 실측. 표식과 무관하게 상시 발생한다).
     | 🔑 **표식마다 화면 어디에 있는지는 이 규칙만으로 알 수 없다.** 그 위치는 화면
     |    (검색·기본정보)이 갖고, 이번 회차는 그 화면을 건드리지 않기로 했다(같은 규칙).
     |    그래서 **자리 대신 그릇을 자른다.** `.flo-main` 은 이 폭에서 이미 창 폭과
     |    같다(`flo-shell.css` 860px 구간 `.flo-main { width: 100% }`). 그 칸에
     |    `overflow-x: hidden` 을 주면 말풍선이 밖으로 뻗어도 **페이지가 가로로
     |    스크롤되는 일은 없다.** 화살표는 표식 자리 그대로다(`left: 0`). 잘리는
     |    것은 창 밖으로 나간 말풍선 오른쪽 끝뿐이다.
     | 🔑 `max-width` 도 더했다. 창이 250px 보다 좁아지는 극단적인 폭에서도 말풍선이
     |    그보다 넓게 그려지지 않는다.
     | 🚫 `.table-wrap` 의 `overflow-x: auto` 와 부딪히지 않는다. 감싸는 칸이
     |    하나 더 생길 뿐, 표 자신의 가로 스크롤은 그대로다.
     |
     | 🔻 2026-09-28 세 번째 후속(#1511 검토). 위 `overflow-x: hidden` 처방에 문제가
     |    둘 있었다.
     |    ① 창 밖으로 나간 말풍선 글이 통째로 가려져 운영자가 읽을 수 없었다.
     |    ② `overflow-x: hidden` 은 `.flo-main` 을 스크롤 그릇으로 만든다. 그 안의
     |       `position: sticky`(위저드 실행줄 · 붙박이 표 머리 · 필터줄)는 문서가 아니라
     |       `.flo-main` 을 기준으로 붙게 되어, 좁은 폭에서 붙박이 동작이 깨질 수 있었다.
     | 🔑 **`overflow-x: clip` 으로 바꿨다.** `hidden` 과 달리 스크롤 그릇을 만들지
     |    않아 `position: sticky` 계산에 끼어들지 않으면서, 페이지가 가로로 넓어지는
     |    것은 똑같이 막는다(`document.documentElement.scrollWidth` 실측 동일).
     | 🔑 **말풍선을 못 읽는 문제는 스크립트가 푼다**(`flo-hint-fit.js`, 셸에 등록).
     |    표식을 열면 실제 자리를 재서 창 안에 8px 이상 남도록 옆으로 옮기고, 화살표는
     |    `--flo-hint-shift` 를 반대 부호로 읽어 표식 자리를 그대로 가리킨다.
     | 🔑 `overflow-x: clip` 은 그 스크립트가 없거나 아직 열지 않은(닫힌) 말풍선을 위한
     |    안전망으로 남는다. 스크립트가 실패해도 페이지는 넓어지지 않는다.
     */
    .flo-hint--center .flo-hint__bubble {
        left: 0;
        transform: translateX(var(--flo-hint-shift, 0px));
        max-width: calc(100vw - 32px);
    }
    .flo-hint--center .flo-hint__bubble::before {
        left: 0;
        margin-left: 0;
        /* 🔑 말풍선이 옮겨간 만큼 반대로 되밀어, 화살표는 표식 자리를 그대로 가리킨다 */
        transform: translateX(calc(-1 * var(--flo-hint-shift, 0px)));
    }
    .flo-main { overflow-x: clip; }
}

/* ── 흐린 글자를 글자 대비 기준 위로 (2026-09-28 · 이슈 #1459) ─────────────────────
 |
 | 🚨 흐린 글자(`--flo-ink-3`)를 킷의 `#6b7684` 로 올려도 회색 바탕에서는 4.15~4.23:1 이라
 |    글자 대비 기준(4.5:1)에 못 미쳤다(12화면 실측).
 | 🔑 **새 값을 짓지 않는다**(R-307) · 킷의 보조 글자색 `--flo-ink-2`(#4e5968 · 회색 바탕 6.39:1 이상)를 쓴다.
 |    빈 상태 이유와 아바타 글자는 흰 카드 안에도 오므로 흰 바탕에서도 한 단계 진해진다(해가 되지 않는다).
 | 🔑 연보라 바탕 위 보라 글자(표식 · 아바타 · 변수 단추 · 끝난 위저드 칸의 번호)는 킷의 `--flo-primary-deep`
 |    (4.49:1 → 9.91:1). 끝난 위저드 칸의 **이름표**는 흰 바탕 5.29:1 이라 그대로 `--flo-primary` 다.
 | 🚫 지금 단계(`is-now`)는 건드리지 않는다. 막힌 이유 줄(`--blocked`)은 주의 색을 지킨다.
 | 🔑 알약 단계 칩의 끝난 단계는 킷의 `--flo-ink-1` 로 한 단계 더 진하게 둔다 · 남은 단계가 ink-2 가 되어도
 |    글자색으로 둘이 계속 갈린다.
 | ⚠️ 위저드 남은 칸의 hover 는 글자색이 같아(ink-2) 테두리만 바뀐다.
 | ⚠️ 「준비 중」 메뉴는 누를 수 없는 항목이라 대비 기준의 대상이 아니다(WCAG 1.4.3 예외).
 */
/*
 | 🔻 2026-09-28 (#1511) 남은 자리 둘을 더했다(8차 검증 재확인).
 |
 | 🚨 `.flo-notice__state`(예: 요약 허브의 「지금 할 수 있습니다」)는 이 판의
 |    바탕(`--sig-done-bg`, 연보라)에서 3.92:1, `.flo-inline-alert__code`(안내 상자의
 |    오류 코드 줄)는 네 등급 바탕(연보라·옅은 초록·옅은 노랑·옅은 빨강) 모두에서
 |    3.92~4.33:1 이었다. 위와 같은 처방이다. 새 값을 짓지 않고 `--flo-ink-2` 로 올린다.
 */
.flo-page-head .flo-page-head__meta,
.flo-main .flo-step:not(.is-now):not(.is-done),
.flo-main .flo-step:not(.is-now):not(.is-done) .flo-step__no,
.flo-main .flo-avatar,
.flo-main .flo-empty__reason,
.flo-main .flo-form-bar__why:not(.flo-form-bar__why--blocked),
.flo-notice__state,
.flo-inline-alert__code { color: var(--flo-ink-2); }
.flo-main .flo-steps:not(.flo-steps--wizard) .flo-step.is-done { color: var(--flo-ink-1); }
/* 🔑 셸 CSS 가 뒤에 실리므로 한 단계 더 좁혀 적는다 · 같은 무게면 셸이 이긴다 */
.flo-topbar .flo-topbar__role:not(.flo-topbar__role--flo),
.flo-topbar .flo-topbar__avatar,
.flo-main .mail-var-btn,
.flo-steps--wizard .flo-step.is-done .flo-step__no { color: var(--flo-primary-deep); }

/*
 | 🆕 검토필요 주문 표의 「관리」 열 (2026-10-10 · 이슈 #1607).
 | 🔑 관리 칸에 귀속 폼(인플루언서 선택 · 근거 입력 · 작은 단추)이 한 줄로 선다. 보통 관리 열(136)로는 세 줄로 접혀
 |    행 높이가 들쭉날쭉했다. 폭은 세 조작이 한 줄에 드는 값이다(선택 140 짧은 칸 토큰 · 근거 남는 자리 · 단추 · 사이 8).
 | 🔑 높이는 표 안 조작 규칙(32)을 그대로 받는다. 🚫 여기서 높이를 다시 적지 마라.
 | 🔑 좁은 창에서는 표가 감싼 칸 안에서 가로로 넘긴다(R-308 · 표의 최소 폭은 화면이 정한다).
 */
.flo-main .flo-review-list .common-table th.flo-review-list__manage { width: 480px; }
/*
 | 🆕 「주문번호」 열 (2026-10-19 · 이슈 #1837 · 🧑 「주문 번호 주문 시각 겹쳐보인다」).
 | 🚨 주문번호 칸은 한 줄 고정(`flo-cell-wrap-normal`)인데 폭이 없어 남는 자리를 나눠 받았다. #1786 에서 열이 늘자 67 로 줄어
 |    값(「20261019-0000256」 글자 폭 약 122)이 옆 칸 주문 시각 위로 넘쳤다(1280 실측 73px).
 | 🔑 카페24 주문번호(날짜 8자리 · 「-」 · 번호 7자리) 122 + 칸 여백 24 로 146 이 든다. 폭은 주문 시각 열(`datetime`)과 같은 160 을 준다.
 | 🔑 640 이하에서는 붙인 첫 칸 규칙(`--flo-pin-w`)이 셈이 높아 그대로 이긴다.
 */
.flo-main .flo-review-list .common-table th.flo-review-list__order { width: 160px; }
.flo-main .flo-review-list__form { display: flex; align-items: center; gap: 8px; }
.flo-main .flo-review-list__form select { flex: 0 0 var(--flo-control-w-short); width: var(--flo-control-w-short); min-width: 0; }
.flo-main .flo-review-list__form input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; }
.flo-main .flo-review-list__form .basic-btn { flex: none; }

/*
 | 🆕 캠페인 성과 표의 「메모」 열 (2026-10-20 · 이슈 #1851).
 | 🔑 메모 건수와 「메모」 단추가 한 줄에 선다. 보통 관리 열(136)은 칸 여백 24 를 빼면 112 라 건수(약 20) · 사이 8 · 단추(최소 88)가
 |    들지 않아 두 줄로 접혔다(1314 실측). 폭은 그 셋이 드는 160 이다.
 | 🔑 좁은 창에서는 표가 감싼 칸 안에서 가로로 넘긴다(R-308 · 표의 최소 폭은 화면이 정한다).
 */
.flo-main .flo-perf-list .common-table th.flo-perf-list__memo { width: 160px; }
.flo-main .flo-perf-list__memo-cell { display: inline-flex; align-items: center; gap: 8px; }
/*
 | 🔑 열이 여덟으로 늘어 기본 폭(순위 · 주문 수 · 응답 · 참여 완료 각 120 · 비중 200)으로는 표가 1280 창의 판 안쪽 920 을 넘어
 |    맨 끝 「메모」 열이 화면 밖으로 밀렸다(1314 실측 · 표 1120 / 판 954). 이 표에서만 값이 드는 폭으로 줄인다.
 |    1280 창은 세로 스크롤바를 빼면 판 안쪽이 905 다(실측).
 | 🔑 순위는 두 자리 숫자 64 · 주문 수는 「1,234건」 96 · 응답 · 참여 완료는 「100.0%」 · 「12 / 15」 96 · 비중은 막대 80 + 사이 8 + 「100.0%」 160.
 |    순매출(120)은 그대로다. 합 792 + 이름 열 몫 108 = 900(화면의 최소 폭).
 */
.flo-main .flo-perf-list .common-table th.flo-perf-list__rank { width: 64px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__narrow { width: 96px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__share { width: 160px; }
/*
 | 🔻 2026-11-05 (#1987 · 화면 가시성 시안) 위 폭으로는 1440 창에서도 이름 칸이 약 85px 이라 「데모 한결...」로 잘렸다(로컬 실측).
 |    열마다 값이 드는 폭으로 다시 줄여 이름 칸에 200 이상을 준다. 위 세 규칙(__rank · __narrow · __share)은 아래가 덮는다(이름이 같은 자리는 뒤가 이긴다).
 | 🔑 순위 56(원 26) · 순매출 120(「1,234,567원」) · 비중 150(막대 70 + 8 + 「100.0%」) · 주문 수 76 · 링크 클릭 84 · 전환율 72 · 응답 76(「12 / 15」)
 |    · 참여 완료 88 · 메모 112(최소 88 단추 + 칸 여백 24). 합 834 + 이름 200 = 1034(화면의 최소 폭 · performance.blade.php).
 */
.flo-main .flo-perf-list .common-table th.flo-perf-list__rank { width: 56px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__amount { width: 120px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__share { width: 150px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__orders { width: 76px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__clicks { width: 84px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__rate { width: 72px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__reply { width: 76px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__joined { width: 88px; }
.flo-main .flo-perf-list .common-table th.flo-perf-list__memo { width: 112px; }
.flo-main .flo-perf-list__rev { font-weight: 700; }
/* 🆕 2026-11-05 (#1987) 순위 · 1~3위는 보라 원(26) · 나머지는 숫자 그대로 */
.flo-main .flo-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 50%; font-size: 13px; font-weight: 600; line-height: 1; }
.flo-main .flo-rank--top { background: var(--flo-violet-100); color: var(--flo-primary); font-weight: 700; }
/* 🆕 2026-11-05 (#1987) 「메모」 단추 안 건수 · 메모가 있을 때만 붙는다 */
.flo-main .flo-memo-count { margin-left: 4px; color: var(--flo-primary); }
/*
 | 🆕 **인플루언서별 성과 표** (2026-11-05 · #1992 · FLO-PRF-004 `performance/influencers.blade.php`).
 | 🚨 다섯 열 중 숫자 넷만 폭(120)을 가져 이름 열이 남는 자리를 다 받았다(1440 실측 약 600). 폭 240 의 계정 묶음
 |    (`.flo-account` · #1738)이 그 가운데에 떠 있었다.
 | 🔑 이름 열은 계정 묶음 240 + 칸 여백 24 = 264 다. 숫자 네 열은 폭을 풀어 남는 자리를 똑같이 나눈다(`table-layout: fixed`).
 | 🔑 1120 미만 창은 판 안쪽이 264 + 120 × 4 = 744 보다 좁다. 그 구간은 이름 열을 168 로 줄여 숫자 열 120 을 지킨다.
 |    168 은 1024 창에서 지금까지 그려지던 이름 열 폭(판 안쪽 648 − 120 × 4)이다. 표의 최소 폭 648 은 화면이 정한다.
 | 🔑 640 이하는 붙인 첫 칸 규칙(`--flo-pin-w`)이 셈이 높아 그대로 이긴다.
 */
.flo-main .flo-people-perf .common-table th.flo-col--name { width: 264px; }
.flo-main .flo-people-perf .common-table th:is(.flo-col--num, .flo-col--amount) { width: auto; }
@media (max-width: 1119.98px) {
    .flo-main .flo-people-perf .common-table th.flo-col--name { width: 168px; }
}

/*
 | 🆕 가림막의 「하는 중」 글자 (2026-10-10 · 이슈 #1609).
 | 🔑 도는 원 아래에 한 줄로 선다. 가림막의 흰 바탕(`::before`)보다 위에 그려지도록 자리를 잡는다.
 | 🔑 빈 글자일 때(제이쿼리 요청 회차)는 자리를 먹지 않는다.
 */
.loader-wrap { flex-direction: column; gap: 12px; }
.loader-wrap .loader { position: relative; }
.flo-loader-status { position: relative; margin: 0; color: var(--flo-ink-1); font-weight: 600; }
.flo-loader-status:empty { display: none; }
/* 🆕 2026-10-29 (#1914) 카페24 동의로 넘기는 중간 페이지의 대비 링크 · 이동이 막혔을 때만 보인다(`cafe24/top-redirect`) */
.flo-loader-link { position: relative; color: var(--flo-primary); text-decoration: underline; }
/* 🚨 킷 `a { display: inline-block }`(common.css)이 브라우저 기본 `[hidden]` 을 이긴다 · 위 `.flo-btn[hidden]` 과 같은 함정 */
.flo-loader-link[hidden] { display: none; }

/* ═══ 사용성 다듬기 · 누르는 면 · 도움말 · 선택 칸 · 편집기 (2026-10-10 · 이슈 #1608) ═══════════
 |
 | 🧑 2026-10-10: "이런식으로 하나하나 맞춰나가자" · "사용성 기반으로 웹의 보편적인 특성으로 다음 디자인 안정화 고고"
 | 🔑 잣대는 WCAG 2.2 AA 다. 보이는 크기는 그대로 두고 누르는 면만 넓힌다.
 */

/*
 | 누르는 면 (WCAG 2.5.8 · 최소 24px · 좁은 폭은 손가락 기준 44px).
 |
 | 🚨 390 실측: 도움말 「i」 16 · 달력 단추 24 · 하트 24 · 글자 단추(「캠페인 요약」 · 명단 「제거」) 높이 16~20 이었다.
 |    표 머리의 정렬 링크(18) · 관심목록 카드의 「상세보기」(44×18)도 같은 목록에 든다.
 | 🔑 그림은 그대로 두고 투명한 가짜 요소(`::after`)로 면만 넓힌다 · 값은 요소 크기에서 모자란 만큼만 바깥으로 편다
 |    (`top` · `left` 의 % 는 요소 자신의 높이 · 폭이다). 이미 큰 요소는 0 이라 넓어지지 않는다.
 | 🔑 `position` 은 `:where()` 로 준다(셈 0) · 이미 자리를 잡은 요소(달력 단추 `absolute`)는 그 값이 그대로 이긴다.
 | 🔑 `.flo-hit` 는 같은 일을 하는 표식이다 · 위 목록에 없는 작은 링크(단독으로 선 「재시도」 등)에 단다.
 |    🚫 문장 속 링크에는 달지 마라 · 앞뒤 글자를 덮어 다른 링크를 가로챈다(WCAG 도 문장 속 링크는 예외로 둔다).
 | ⚠️ 좁은 폭 44 는 이 파일의 휴대폰 눈금(640)을 따른다 · 🚫 새 눈금을 만들지 마라.
 | ⚠️ 주 단추 높이(40)는 그대로다 · 좁은 폭에서 44 로 올리는 눈금이 킷과 125- 에 없다(#1567 🧑 결정 40).
 */
:root { --flo-hit: 24px; }
@media (max-width: 640px) {
    :root { --flo-hit: 44px; }
}
/*
 | 🆕 2026-10-14 (#1739 · 묶음 N) 휴대폰(640 이하)에서 홀로 선 작은 링크도 같은 방식으로 누름 면을 넓힌다. 그림과 글은 그대로다.
 | 🚨 390 실측: 24 보다 작은 누름 자리가 196곳이었다(표 카드의 이름 링크 20 · 경로 링크 18 · 세그먼트 칸 22 · 카드 지표 링크 22 · 칩 지우개).
 | 🔑 문장 속 링크는 넣지 않는다(위 규칙과 같음). 넣은 것은 모두 줄에 홀로 선 링크다.
 */
@media (max-width: 640px) {
    /* 링크는 위아래 안여백 12 를 주고 같은 값을 바깥 여백으로 되돌린다 · 줄 자리는 그대로다. 말줄임 링크(이름 · 경로)는 자기 넘침을 자르므로 `::after` 대신 이 방법이다 */
    /*
     | 🔻 2026-10-14 (#1739 검토) ~~위아래 12~~ → 누름 높이 32 가 되는 만큼(줄 20 이면 6). 12 는 카드 안 이웃 링크(사이 12)와 누름 면이 겹쳤다.
     | 🔻 같은 검토 · 세그먼트 칸(`flo-segment-item`, 대시보드 「밀린 일」 묶음 링크는 `a.flo-t-caption` 도 단다) · 이미 `::after` 로 넓힌 「상세보기」 ·
     |    글자 단추 · 단추 · 칩은 뺀다. 안여백이 상자 크기를 바꾸는 자리(인라인 블록)라 세그먼트 칸이 22 → 34 가 되어 띠 밖으로 넘쳤다.
     | 🔑 넣은 것은 인라인 글자 링크(안여백이 줄을 늘리지 않음)와 세로 묶음 안 이름 링크(바깥 여백 -6 이 상쇄)뿐이다. 미리보기 안은 뺀다.
     */
    .flo-main :is(a.flo-account__name, a.flo-breadcrumb__link, a.flo-t-caption, .flo-next-work__meta > p > a:only-child, .common-table td > a):not(.basic-btn, .flo-segment-item, .flo-name-row__detail, .flo-btn-text, .flo-hint__mark, .flo-chip, .flo-pick, .flo-preview__screen *) { padding-block: calc((32px - 1lh) / 2); margin-block: calc((1lh - 32px) / 2); } /* 줄 20 이면 6 · 줄 18(경로 · 캡션)이면 7 · 누름 높이 32 */
    :where(.flo-main :is(.flo-segment-item, .flo-chip__off)) { position: relative; }
    /* 🔑 세그먼트 칸 · 칩 지우개는 32(누름 높이 기준)까지만 넓힌다. 44 로 넓히면 바로 아래 「ID로 직접 추가」 글자 단추와 9px 겹쳤다(관심목록 390 실측) */
    .flo-main :is(.flo-segment-item, .flo-chip__off):not(.flo-preview__screen *)::after {
        content: ""; position: absolute;
        top: min(0px, calc((100% - 32px) / 2));
        bottom: min(0px, calc((100% - 32px) / 2));
        left: min(0px, calc((100% - 32px) / 2));
        right: min(0px, calc((100% - 32px) / 2));
    }
}

:where(.flo-hint__mark, .flo-bookmark__toggle, .flo-btn-text, .flo-th-sort, .flo-name-row__detail, .flo-hit) { position: relative; }
:is(.flo-hint__mark, .flo-datepicker__toggle, .flo-bookmark__toggle, .flo-btn-text, .flo-th-sort, .flo-name-row__detail, .flo-hit)::after {
    content: ""; position: absolute;
    top: min(0px, calc((100% - var(--flo-hit)) / 2));
    bottom: min(0px, calc((100% - var(--flo-hit)) / 2));
    left: min(0px, calc((100% - var(--flo-hit)) / 2));
    right: min(0px, calc((100% - var(--flo-hit)) / 2));
}
/*
 | 🆕 2026-10-19 (#1799) 「표본 부족」 점(그림 6 · `flo-hint__mark--dot`)의 누름 면은 가로 24 · 세로 18 이다(모든 폭).
 | 🚨 한 칸에 점이 위아래로 둘 선다(검색 표 「응답 · 수락」 두 줄 · 줄 사이 19 · 제안 응답 관리 한 줄 요약의 접힌 두 줄 · 24).
 |    공용 넓힘(넓은 창 24 · 640 이하 「i」 값 위 19 · 아래 8)을 받으면 두 점의 면이 5 · 9 겹쳤다(1440 · 390 실측 · `measure-tap-overlap.mjs`).
 | 🔑 위아래 6 은 두 점 사이(19 - 6 = 13)의 절반 안이다. 셈(0,2,1)이 위 규칙과 640 이하 「i」 규칙(0,1,1)을 이긴다.
 */
.flo-main .flo-hint__mark--dot::after { inset: -6px -9px; }
/*
 | 🆕 2026-10-19 (#1800 · #1739 잔여) 휴대폰(640 이하)에서 넓힌 누름 면이 이웃 누름 면과 겹치지 않게, 넓힘을 이웃 쪽으로 줄인다.
 | 🚨 390 실측: 겹침 19쌍이었다. 「i」 표식 16쌍(아래 칸 · 이름표 4 · 앞 이름표 글자 10 · 옆 단추 · 선택 상자 2~6) · 달력 단추 2쌍(칸 밖 아래 이름표 2) ·
 |    카드형 하트 1쌍(두 줄 이름 링크).
 | 🔑 그림 · 자리 · 크기는 그대로다. 투명한 가짜 요소(`::after`)의 네 변만 바꾼다. 위 규칙의 44 를 다 쓰지 못하는 쪽은 이웃까지의 틈이 정한다.
 | 🔑 재는 도구: `node agent/tools/measure-tap-overlap.mjs`(화면 목록 전부 · 390 · 겹침이 있으면 끝 코드 1). 🚫 값을 바꾸면 다시 재라.
 */
@media (max-width: 640px) {
    /*
     | 「i」 표식(16): 위는 그대로 14, 오른쪽 8 · 아래 8 · 왼쪽 4 → 28 × 38.
     | 🔑 왼쪽 4 는 표식 앞 여백(`.flo-hint` 의 4)이다 · 앞이 칸 이름표(`label`)이면 그 글자를 덮지 않는다.
     | 🔑 아래 8 은 이름표 줄과 칸 사이(8)다 · 원은 줄 안에서 2 위에 있어 칸까지 2 가 남는다(실측 아래 틈 9 · 10).
     | 🔑 오른쪽 8 은 도구 줄의 이웃 조작부 간격(8)이다(제안 응답 관리 「응답 내려받기」 ⓘ 「10개씩」).
     */
    .flo-hint__mark::after { right: -8px; bottom: -8px; left: -4px; }
    /* 달력 단추(24): 칸 안 오른쪽 자리(띄움 4 + 단추 24 + 4)만 · 32 × 32. 칸(32 · 40) 밖으로 나가 아래 이름표를 덮었다 */
    .flo-datepicker__toggle::after { inset: -4px; }
    /*
     | 카드형 하트(24): 왼쪽은 이름 글자 끝까지의 틈 8, 오른쪽은 사진 판 끝까지 12 → 44 × 44 그대로.
     | ⚠️ 두 줄 이름 카드에서는 이름 링크의 오른쪽 안여백 28(하트 자리, #1601)이 하트 밑으로 들어간다. 그림끼리 겹친 것이라 넓힘으로는 풀리지 않는다
     |    (측정 도구의 「그림끼리 겹침」 · 1440 은 모든 카드). 하트가 위층(4)이라 하트가 받는다.
     */
    .flo-main .flo-card__heart .flo-bookmark__toggle::after { left: -8px; right: -12px; }
}

/*
 | 표의 선택 칸은 칸 전체가 상자다 (WCAG 2.5.8 · 웹 표의 보편 관례).
 |
 | 🚨 상자(16)만 눌렸다 · 390 에서 손가락으로 행을 고르기 어려웠다.
 | 🔑 상자를 `label.flo-pick-cell` 로 감싸 칸(48 × 행 높이)을 다 덮는다 · 머리의 「이 쪽 전체 선택」도 같은 모양이다.
 | 🔑 칸의 `position` 은 `:where()` 로 준다 · 좁은 폭에서 붙박이(`sticky`)가 된 칸은 그 값이 이긴다.
 */
:where(td.flo-col--pick, th.flo-col--pick):has(> .flo-pick-cell) { position: relative; }
.flo-pick-cell { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/*
 | 도움말 말풍선의 화살표 · 스크립트가 자리를 정한 뒤 (`flo-hint-fit.js` · `is-placed`).
 |
 | 🔑 위로 열면(`is-up`) 화살표가 말풍선 아래에서 표식을 가리킨다 · 아래로 열면(`is-down`) 위에서 가리킨다.
 | 🔑 가로 자리는 스크립트가 잰 표식 가운데(`--flo-hint-arrow`)다.
 | 🔑 `span` 두 개를 붙여 표 몸통 첫 행 규칙(`.flo-main .flo-table-wrap tbody tr:first-child …`)과 셈을 맞추고, 뒤에 와서 이긴다.
 */
span.flo-hint.is-placed.is-up > span.flo-hint__bubble::before,
span.flo-hint.is-placed.is-down > span.flo-hint__bubble::before {
    left: var(--flo-hint-arrow, 50%); right: auto; margin-left: 0; transform: translateX(-50%); /* 화살표(12) 가운데가 표식 가운데에 온다 */
}
span.flo-hint.is-placed.is-up > span.flo-hint__bubble::before {
    top: 100%; bottom: auto;
    border-bottom-color: transparent; border-top-color: var(--text-color-2, #202527);
}
span.flo-hint.is-placed.is-down > span.flo-hint__bubble::before {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: var(--text-color-2, #202527);
}

/*
 | 긴 입력 창의 붙박이 단추 줄이 초점 칸을 가리지 않게 한다 (WCAG 2.4.11).
 |
 | 🚨 인플루언서 정보 등록 창에서 Tab 으로 「카테고리」에 오면 칸이 단추 줄(40 + 위 가장자리 16) 밑에 들어가 보이지 않았다.
 | 🔑 굴림 여백(`scroll-padding-bottom`)이 초점으로 굴러 들어올 때 그만큼 위에 세운다 · 단추 줄 56 + 숨 24.
 | 🔑 짧은 창은 구르지 않아 아무 일도 없다.
 */
.flo-modal .flo-modal__body { scroll-padding-bottom: 80px; } /* 🔑 `.flo-modal__body` 맨 이름 규칙은 하나여야 한다(`ProductPickScrollTest`) · 창 이름을 앞에 붙인다 */

/*
 | 편집기의 초점 테두리 (WCAG 2.4.7).
 |
 | 🚨 Summernote 판이 글 칸(`.note-editable`)의 테두리를 지워, 키보드로 들어와도 어디에 쓰는지 보이지 않았다.
 | 🔑 다른 입력칸(`.flo-main input:focus-visible`)과 같은 값을 바깥 틀에 그린다 · 도구 단추는 제 테두리를 따로 갖는다.
 */
.flo-main .note-editor.note-frame:has(.note-editable:focus, .note-codable:focus) {
    outline: 2px solid var(--flo-primary); outline-offset: 1px; border-color: var(--flo-primary);
}

/*
 | 정렬 중인 열은 방향 하나만 그린다 (2026-10-10 · 이슈 #1608).
 |
 | 🚨 위아래 꺾쇠가 둘 다 서 있고 한쪽만 조금 진해, 어느 열이 어느 쪽으로 정렬됐는지 한눈에 읽히지 않았다.
 | 🔑 정렬 중인 열은 그 방향(▲ 오름 · ▼ 내림)만 남기고, 누를 수 있는 다른 열은 위아래 옅은 꺾쇠 그대로다(웹 표의 보편 관례).
 */
.flo-sort-caret[data-direction="asc"] .flo-sort-caret__down,
.flo-sort-caret[data-direction="desc"] .flo-sort-caret__up { stroke: transparent; }
/*
 | 🔑 도움말이 붙은 좁은 정렬 머리(인플루언서 검색 「참여」 · 「응답 · 수락」)의 꺾쇠는 흐름에서 빼 칸 아래 안여백(11) 가운데에 둔다 (#1608).
 |    오른쪽 안여백에 두면 도움말 표식과 붙어 하나로 보였다(1440 실측).
 |    흐름에 두면 글 · 꺾쇠 · 도움말이 칸 폭(57 · 90)을 넘어 글이 두 줄로 접혔다.
 */
/* 🔻 2026-10-29 (#1918) 「응답 · 수락」 머리(`flo-th--rate`)를 걷고 「수락」(41) 머리를 더했다 · ~~`:where(th.flo-th--joined, th.flo-th--rate)`~~ */
:where(th.flo-th--joined, th.flo-th--accepted) { position: relative; }
/*
 | 🔑 링크는 자리를 잡지 않는다(`static`) · 꺾쇠와 누르는 면(`::after`)이 링크가 아니라 머리 칸을 기준으로 선다 (#1608).
 | 🔻 2026-10-19 (소규모 이슈) ~~`:is(th.flo-th--joined, th.flo-th--rate) .flo-th-sort { position: static; }`~~ → 「참여」 머리만이다.
 |    🚨 「응답 · 수락」은 #1655 에서 정렬 링크가 둘이 됐다. 두 링크의 누르는 면이 모두 머리 칸 전체를 덮어, 뒤에 놓인 「수락」이
 |    「응답」 자리까지 가로챘다(1440 실측: 「응답」 글자 한가운데를 눌러도 수락률 순으로 갔다).
 | 🔑 「응답 · 수락」의 링크는 기본 규칙(위 「누르는 면」의 `:where(…)` · `relative`)대로 제 자리를 잡아, 누르는 면이 제 글자 위에 선다.
 |    가로로는 넓히지 않는다. 두 링크 사이는 가운뎃점 폭(3), 「수락」과 도움말 표식 사이는 4 뿐이다. 세로 넓힘은 기본 규칙 그대로다.
 | 🔑 꺾쇠는 링크 밖(형제)에 있어 기준은 그대로 머리 칸이다 · 그림은 바뀌지 않는다.
 */
:is(th.flo-th--joined, th.flo-th--accepted) .flo-th-sort { position: static; }
/* 🔻 2026-10-29 (#1918) ~~`th.flo-th--rate .flo-th-sort::after { left: 0; right: 0; }`~~ · ~~`:is(th.flo-th--joined, th.flo-th--rate) .flo-sort-caret`~~ */
:is(th.flo-th--joined, th.flo-th--accepted) .flo-sort-caret { position: absolute; left: 50%; bottom: -1px; margin-left: -4px; }

/*
 | 🆕 실패 알림은 닫을 때까지 남는다 (2026-10-10 · 이슈 #1609 · 🧑 "실패는 닫을 때까지 유지 (권장)").
 | 🔑 떠오르는 장면만 남기고 사라지는 장면을 끈다. 성공 · 안내 알림은 그대로 3초 뒤 사라진다.
 | 🔑 등급 두 개를 함께 적어 셸 CSS(뒤에 실린다)의 사라지기 규칙보다 무겁게 한다.
 | 🔑 닫는 단추는 오른쪽 위 32 칸이다(창의 닫는 단추 `.flo-modal__close` 와 같은 크기).
 */
.flo-alert--fail.flo-alert--transient { animation: flo-alert-float-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both; padding-right: 56px; }
.flo-inline-alert--transient[data-grade="fail"] { animation: none; padding-right: 56px; }
.flo-alert__close {
    position: absolute; top: 8px; right: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: var(--flo-radius); background: transparent; cursor: pointer; /* 🔻 2026-10-11 (#1618) ~~8~~ → 조작부 6 */
    color: var(--flo-ink-2);
}
.flo-alert__close svg { width: 20px; height: 20px; }
.flo-alert__close:hover { color: var(--flo-ink-1); background: color-mix(in srgb, var(--flo-ink-1) 8%, transparent); }

/*
 | 🆕 발송 방식 고르기 (2026-10-11 · 이슈 #1613 · `mail/proposal-send.blade.php`).
 | 🔑 보이는 쪽은 대본 없이 `:has()` 가 가른다. 규칙이 먹지 않으면 둘 다 보이고 둘 다 보낼 수 있다.
 | 🔑 간격 · 안여백은 4px 격자 값이다(125- 「4px 격자」).
 */
.flo-main .flo-send-mode { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
/*
 | 🆕 **공용 선택 카드 `.flo-choice`** (2026-10-11 · 이슈 #1613 후속).
 | 🧑 *"굳이 저 동그라미 선택버튼이 잇어야해? 그거없이 눌렀을 때 색변동만 되는게 더 트렌디하지않아?"*
 | 🔻 ~~`.flo-send-mode__option` · 보이는 라디오 동그라미~~ → 이 이름. 다른 화면의 「하나 고르기」 카드도 이것을 쓴다.
 | 🔑 짜임: `<label class="flo-choice"><input type="radio|checkbox"> <span class="flo-choice__text">…</span></label>`.
 | 🔑 라디오는 눈에만 감춘다(`flo-sr-only` 와 같은 값) · 화살표 · Space · 낭독 이름 · 스크립트 없는 보내기는 그대로다.
 |    🚫 `display: none` 으로 바꾸지 마라(초점을 받지 못한다).
 | 🔑 색만으로 가르지 않는다 · 고른 칸은 ~~보라 테두리 · 연보라 바탕 · 오른쪽 체크 표시~~ 가 함께 바뀐다.
 |    🔻 2026-10-11 (#1612 독립 검토) 연보라 바탕을 걷고 바깥선 2(`--flo-primary-soft`)로 바꿨다. 🧑 #1582 결정(카드형 「바닥 한 단계는
 |    앱의 다른 고른 상태에 없어 걷었다」)과 선택 카드(`flo-pick-card`)가 이미 「보라 테두리 + 바깥선 2 + 체크 표시」다. 고른 모양은 이 한 벌이다.
 | 🔑 마우스 올림 테두리는 `--flo-ink-3` 하나다(카드형 `.flo-card` · 선택 카드 `.flo-pick-card` 와 같다 · #1612 독립 검토에서 맞췄다).
 |    🔻 2026-10-11 (#1612 합침) ~~체크 표시는 #1612 의 관심목록 선택 줄(`.flo-campaign-pick__row::after`)과 같은 값이다.~~
 |    → 담기 창의 고르는 줄도 이 `.flo-choice` 를 쓴다(밀도 변형 `.flo-choice--row`). 모양 규칙은 이 묶음 한 곳뿐이다.
 | 🔑 키보드 초점은 카드 둘레 고리다(`:has(:focus-visible)`).
 */
.flo-main .flo-choice {
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--flo-line);
    border-radius: var(--flo-radius); /* 🔻 2026-10-11 (#1618) ~~`--flo-radius-card`(12)~~ → 6 · 고르는 줄은 조작부다(🧑 「조작부 6 하나로 (권장)」) */
    background: var(--flo-card);
    cursor: pointer;
    transition: border-color .12s, box-shadow .12s; /* 🔻 2026-10-11 (#1612 독립 검토) ~~background-color~~ */
}
.flo-main .flo-choice > input:is([type="radio"], [type="checkbox"]) {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flo-main .flo-choice::after {
    content: "✓"; flex: none; margin-left: auto;
    width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%;
    background: var(--flo-primary); color: #fff; font-size: 13px; line-height: 1;
    visibility: hidden; /* 🔑 자리는 늘 차 있다 · 고를 때 글자가 밀리지 않는다 */
}
.flo-main .flo-choice:hover { border-color: var(--flo-ink-3); }
/* 🔻 2026-10-11 (#1612 독립 검토) ~~`background: var(--flo-primary-soft)`~~ → 바깥선 2 (위 주석) */
/*
 | 🔻 2026-10-11 (🧑 *"관심목록 담기 이번에 목록 선택에도 백그라운드 컬로로 강조하는게 좋지않나?"*)
 |    고른 줄에 연보라 바탕을 다시 깐다 · 테두리 + 바깥선 + 체크 표시는 그대로 둔다.
 |    ⚠️ 카드형 고르기(`.flo-card` · 🧑 #1582 「바닥 한 단계는 걷었다」)는 이 지시 범위 밖이라 그대로다.
 */
.flo-main .flo-choice:has(input:checked) { border-color: var(--flo-select-border); box-shadow: 0 0 0 2px var(--flo-select-ring); background: var(--flo-select-fill); } /* 🔻 2026-10-11 (#1630) ~~보라 테두리 · 연보라 바탕 `--flo-primary-soft`~~ → 한 벌의 옅은 단계 */
.flo-main .flo-choice:has(input:checked)::after { visibility: visible; }
.flo-main .flo-choice:has(input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
.flo-main .flo-choice__text { display: flex; flex-direction: column; gap: 4px; word-break: keep-all; }
/*
 | 🆕 **목록 줄 밀도 `.flo-choice--row`** (2026-10-11 · 이슈 #1612 · 검색 화면 「어느 관심목록에 담을까요」 · 「어느 캠페인에 담을까요」 창).
 | 🔑 고른 모양 · 체크 표시 · 감춘 라디오는 위 `.flo-choice` 그대로다. 여기는 촘촘한 줄(안여백 10/12 · 사이 8 · 1px 테두리 · 가운데 맞춤)만 바꾼다.
 | 🔑 초점 고리는 줄 안쪽이다 · 목록이 넘김 상자(`.flo-campaign-pick__list`)라 바깥 고리는 잘린다.
 | 🔑 고른 바깥선 2 는 목록이 안여백 2 를 두어 잘리지 않는다(`.flo-campaign-pick__list`) · 카드와 같은 모양을 그대로 쓴다.
 | 🔑 고른 줄의 이름은 굵게 한다 · 색 말고도 글자가 함께 바뀐다.
 */
.flo-main .flo-choice.flo-choice--row {
    align-items: center; gap: 8px;
    padding: 10px 12px; border-width: 1px; border-radius: var(--flo-radius);
}
.flo-main .flo-choice.flo-choice--row:has(input:focus-visible) { outline-offset: -2px; }
.flo-main .flo-choice--row:has(input:checked) .flo-campaign-pick__name { font-weight: 600; }
/* 🔑 예약을 고르면 시각 칸이 고르기 바로 아래에 선다 */
.flo-main .flo-send-when { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line-soft); }
.flo-send-flow:has([data-flo-send-mode][value="now"]:checked) [data-flo-send-when="schedule"],
.flo-send-flow:has([data-flo-send-mode][value="schedule"]:checked) [data-flo-send-when="now"] { display: none; }
/*
 | 🔑 예약이 걸린 상태(②) · 왼쪽에 시각, 오른쪽에 동작 무리(「예약 시각 변경」 · 「예약 취소」)와 그 아래 안내. 좁으면 동작 무리가 아래로 내려간다.
 | 🔑 「예약 시각 변경」은 펼침 단추다 · 닫혀 있으면 시각 칸을 감춘다. `:has()` 가 먹지 않으면 칸이 늘 보인다(보낼 수는 있다).
 */
.flo-main .flo-send-current {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px;
    padding: 16px; border-radius: var(--flo-radius-card); background: var(--flo-primary-soft);
}
.flo-main .flo-send-current__info { display: flex; flex-direction: column; gap: 4px; }
.flo-main .flo-send-current__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.flo-main .flo-send-current__buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.flo-main .flo-send-change > summary { list-style: none; cursor: pointer; }
.flo-main .flo-send-change > summary::-webkit-details-marker { display: none; }
.flo-send-flow:has(.flo-send-change:not([open])) .flo-send-change-panel { display: none; }
@media (max-width: 640px) {
    .flo-main .flo-send-current__actions { align-items: flex-start; }
    .flo-main .flo-send-current__buttons { justify-content: flex-start; }
}

/*
 | 🆕 **휴대폰 카드 목록** (2026-10-11 · 이슈 #1620 · `x-data-table` 의 `stack`).
 |
 | 🧑 2026-10-11 선택: 「휴대폰에서는 카드 목록 (권장)」
 | 🚨 390 에서 표를 옆으로 굴려야 숫자가 보였다(검색 표 안 넘침 650 · 상품 386 · 응답 526 실측). 한 줄을 읽으려면 손가락을 두 번 써야 했다.
 | 🔑 640 이하에서만 한 줄이 카드 한 장이 된다. 넓은 창의 표는 그대로다(#1572 가운데 정렬 · 열 폭 결정).
 | 🔑 카드에는 화면이 고른 칸만 선다. 칸에 `data-stack` 을 단 칸 · 선택(`flo-col--pick`) · 관리(`flo-col--action`)다.
 |    `title` 은 첫 줄(이름), `wide` 는 한 줄 전체, `metric` 은 두 칸씩 나란히 선다. `foot` 은 카드 맨 아래 줄이다. 작은 이름은 `data-stack-label` 이다.
 |    나머지 칸은 감춘다. 값은 상세 화면과 넓은 창의 표에 그대로 있다 · 표보다 많은 값을 보이지 않는다(R-821).
 | 🔑 머리 줄은 낭독기에 남긴다(`flo-sr-only` 와 같은 숨김). 「이 쪽 전체 선택」 상자만 카드 위에 보인다.
 | 🔑 선택 상자는 카드 왼쪽 띠(44) 전체가 누름 자리다(`flo-pick-cell` · WCAG 2.5.8).
 |    🔻 2026-10-11 (#1623) 검색 카드는 카드 전체가 누름 자리다(아래 「검색 카드는 카드 전체가 선택 면이다」).
 | 🚫 붙박이 첫 칸(#1605)은 이 표에 걸지 않는다 · 위 「640 이하에서는 가로로 굴리는 표 전부가 첫 칸을 붙인다」 블록이 이 표를 뺀다.
 */
@media (max-width: 640px) {
    .flo-main .flo-table-block--stack .flo-table-wrap { overflow: visible; max-height: none; border: 0; border-radius: 0; background: transparent; }
    .flo-main .flo-table-block--stack .common-table { display: block; width: 100%; min-width: 0; }
    .flo-main .flo-table-block--stack .common-table > caption { display: block; }
    .flo-main .flo-table-block--stack .common-table > thead { display: block; }
    .flo-main .flo-table-block--stack .common-table > thead > tr { display: flex; background: transparent; }
    .flo-main .flo-table-block--stack .common-table > thead > tr > th {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    /* 🔻 2026-10-11 (#1640) ~~카드 위 「이 쪽 전체 선택」 한 줄(누름 자리 44)~~ → 머리 칸 상자는 감춘다(`display: none` 이라 초점도 받지 않는다). 같은 일은 결과 도구 줄 첫 칸이 한다 */
    .flo-main .flo-table-block--stack .common-table > thead > tr > th.flo-col--pick:has(> .flo-pick-cell) { display: none; }

    .flo-main .flo-table-block--stack .common-table > tbody { display: flex; flex-direction: column; gap: 8px; }
    /* 🔑 카드 안 글자는 왼쪽에서 시작한다. 줄(`tr`)에 정하고 칸은 물려받는다 · 넓은 창의 표 칸은 그대로 가운데다(#1572 · `TableColumnStandardGuardTest`) */
    .flo-main .flo-table-block--stack .common-table > tbody > tr {
        text-align: left;
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px 12px; align-items: start;
        padding: 12px; border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card); background: var(--flo-card);
    }
    /* 🔑 검색 표의 줄 높이 64 고정(「줄 높이」 · `tr:not(:has(> td[colspan]))`)을 카드에서는 푼다 · 같은 모양의 선택자로 이긴다 */
    .flo-main .flo-table-block--stack .common-table > tbody > tr:not(:has(> td[colspan])) { height: auto; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick) { padding-left: 44px; }
    /* 🔻 2026-10-11 (#1615~#1620 독립 검토) ~~`tr:has(> td.flo-col--pick input:checked)`~~ → 검색 표의 고르기 상자(`form="bookmark-form"`)만
       · 상품 단계는 담긴 상품이 늘 체크된 채 그려져 모든 카드가 강조됐다 · 「골랐다」를 뜻하는 상자만 칠한다 */
    .flo-main .flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) { border-color: var(--flo-select-border); background: var(--flo-select-fill); }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td.flo-td {
        position: static; display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0;
        text-align: inherit; box-shadow: none; background: transparent;
    }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td.flo-td > * { max-width: none; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td::before,
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td::after { content: none; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td.flo-td:not(.flo-col--pick, .flo-col--action, [data-stack], [colspan]) { display: none; }

    .flo-main .flo-table-block--stack .common-table > tbody > tr > td.flo-col--pick { position: absolute; top: 0; bottom: 0; left: 0; width: 44px; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack="title"],
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack="wide"] { grid-column: 1 / 3; }
    /* 🔑 단추 폭이 줄마다 다른 관리 칸(제안 응답 관리)은 카드 아래 줄에 선다(`foot`) · 오른쪽에 두면 줄마다 값 칸의 시작선이 달라졌다(390 실측). 누를 것이 없으면 줄을 그리지 않는다 */
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack="foot"] { grid-column: 1 / -1; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack="foot"]:not(:has(button, a, input)) { display: none; }
    /* 🔑 관리 칸은 카드 오른쪽에 선다. 입력 칸이 `col="action"` 을 빌려 쓴 자리(상품 제공수량)는 `data-stack` 을 달아 값 칸으로 선다 */
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td.flo-col--action:not([data-stack]) { grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr:not(:has(> td.flo-col--action:not([data-stack]))) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack-label]::before {
        content: attr(data-stack-label); display: block; margin-bottom: 2px; font-size: 13px; font-weight: 400; color: var(--flo-ink-3);
        /* 🆕 2026-10-14 (#1739 · 묶음 M) 첫 칸이면 킷의 행 강조 띠(`td:first-of-type::before` · 떠 있고 투명)를 이어받아 이름표가 보이지 않았다(발송 이력 「발송 시각」). 글 흐름 안 · 불투명으로 되돌린다 */
        position: static; height: auto; opacity: 1; background: none; border-radius: 0; line-height: var(--flo-lh-caption);
    }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[colspan] { grid-column: 1 / -1; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr:has(> td[colspan]) { display: block; }
    /* 🔑 카드 안 누름 자리는 44 다(WCAG 2.5.8 · 위 `--flo-hit`). 관리 단추 · 제공수량 칸은 높이를, 「대표」 알약(32)은 위아래 6 의 보이지 않는 띠를 더한다 */
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack="foot"] > :is(button, a) { min-height: 44px; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr > td[data-stack] .flo-picked-qty { height: 44px; }
    .flo-main .flo-table-block--stack .common-table > tbody .flo-pick { position: relative; }
    .flo-main .flo-table-block--stack .common-table > tbody .flo-pick::after { content: ""; position: absolute; top: -6px; bottom: -6px; left: 0; right: 0; }
}
/* 🔑 넓은 창에서는 「이 쪽 전체 선택」 글자를 보이지 않는다 · 머리 칸이 좁고 상자의 이름(`aria-label`)이 같은 말을 한다 */
.flo-pick-cell__text { display: none; }

/*
 | 🆕 **검색 카드는 카드 전체가 선택 면이다** (2026-10-11 · 이슈 #1623 · 🧑 「B 카드 전체 선택 (권장)」).
 |
 | 🚨 카드 왼쪽 띠(44)만 눌렸다. 카드 몸을 눌러도 아무 일이 없어 고르려면 왼쪽 끝 작은 상자를 찾아야 했다.
 | 🔑 선택 상자의 이름표(`flo-pick-cell`)가 카드 전체를 덮는다. 빈 곳을 누르면 상자를 누른 것과 같다 · 스크립트가 필요 없다.
 |    나머지 칸은 그 위에 서되 눌림은 통과시키고(`pointer-events: none`), 누를 것(이름 링크 · 하트 · 도움말 · 「⋯」)만 따로 눌린다.
 | 🔑 상자는 눈에만 감추고 초점은 받는다(`.flo-choice` 와 같은 숨김) · 키보드 초점은 카드 둘레 고리다.
 | 🔑 고른 모양은 선택 카드(`.flo-choice`)와 한 벌이다 · 보라 테두리 + 바깥선 2 + 연보라 바탕. ~~앞머리 판(40)이 보라 체크로 바뀐다.~~
 |    🔻 2026-10-11 (#1625 · 🧑 「인플루언서 선택 체크박스가 저렇게 클 필요가있나? 저 박스없어도 그냥 카드 선택하면 선택된 느낌들면 박스 없어도될듯」)
 |    → 앞머리 판은 늘 플랫폼 표시이고 32 로 줄였다. 고른 카드는 판 오른쪽 아래에 작은 체크 표지(18)만 붙는다.
 |    색만으로 가르지 않는다 · 테두리 · 바깥선 · 바탕 · 체크 표지가 함께 바뀐다.
 | 🔑 머리 줄: 앞머리 판(플랫폼 표시) · 이름 · 아이디 + 출처 꼬리표 · 오른쪽 위에 하트와 「⋯」.
 |    🧑 #1576 「하트는 이름 바로 뒤」는 넓은 창의 표 그대로다. 이 폭에서만 하트가 「⋯」 옆으로 간다 · 이름이 길어도 하트 자리가 같다.
 | 🔑 지표 줄: 회색 띠 안의 세 칸(팔로워 · 팔로잉 · 참여율) · 이름이 위, 값이 아래다.
 |    🔻 2026-10-11 (#1625 · 🧑 「팔로워 팔로잉 참여률 박스도 좀 정렬 잘 맞춰주면 좋을듯」) 세 칸은 정확히 삼등분이고 글자는 칸마다 왼쪽 12 에서 시작한다.
 |    🔻 2026-10-11 (#1625 · 🧑 「흰색이라 선택한 상태에서 박스만 흰색되니 별로다」) ~~고른 카드의 띠는 흰 바탕~~ → 보라를 엷게 섞은 바탕이다.
 | 🆕 2026-10-11 (#1625 · 🧑 「이쪽 전체선택 버튼도 너무 안맞음」) 「이 쪽 전체 선택」은 카드 왼쪽 끝에 붙는 알약이다(높이 32 · 누름 자리 44).
 |    상자는 눈에만 감추고 알약 안 동그라미가 켜짐 · 꺼짐 · 일부(`indeterminate`)를 그린다. 낭독 이름 · 뜻은 그대로다.
 | 🔑 넓은 창의 표 · 상품 단계 · 제안 응답 카드는 그대로다 · 모든 규칙이 검색 결과(`.flo-search-result`) 안에서만 걸린다.
 | 🔑 카드에 서는 값은 넓은 창의 표에 있는 값뿐이다(R-821).
 */
@media (max-width: 640px) {
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick) {
        grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 0; padding: 12px;
        transition: border-color .12s, box-shadow .12s;
    }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) {
        border-color: var(--flo-select-border); box-shadow: 0 0 0 2px var(--flo-select-ring); background: var(--flo-select-fill);
    }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td.flo-col--pick { right: 0; width: auto; }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td.flo-col--pick input {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td.flo-td:not(.flo-col--pick) { position: relative; pointer-events: none; }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td :is(a, button, summary, .flo-row-menu__list) { pointer-events: auto; }
    /* 🔑 칸이 자리를 잡아(`relative`) 킷의 줄 올림 밑선(`tr:hover td:last-child::after`)이 「⋯」 아래에 1px 로 섰다(390 실측) · 카드에서는 그리지 않는다 */
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td:last-child::after { content: none; }

    /* 머리 줄 · 오른쪽 36 은 「⋯」 자리, 이름 줄만 56 을 더 비워 하트(24 + 담긴 수)를 세운다 · 아이디 줄은 하트 밑까지 쓴다(360 실측 아이디가 「@demo_room…」로 잘렸다) */
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td[data-stack="title"] { grid-column: 1 / -1; grid-row: 1; }
    .flo-main .flo-search-result .flo-table-block--stack .common-table td .flo-account { position: relative; gap: 12px; padding-right: 36px; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__line { position: relative; padding-right: 56px; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__text { max-width: none; gap: 2px; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-platform-mark {
        /* 🔻 2026-10-11 (#1625) ~~24 + 안여백 8 = 40 · 모서리 `--flo-radius-card`~~ → 24 + 4 = 32 · 모서리 8 */
        flex: none; box-sizing: content-box; width: 24px; height: 24px; padding: 4px;
        border: 0; border-radius: 8px; background: var(--flo-line-soft);
    }
    /* 🆕 2026-10-11 (#1625) 고른 카드의 판도 지표 띠와 같은 엷은 보라다 · 연보라 카드 위에 회색 조각이 뜨지 않는다 */
    .flo-main .flo-search-result .flo-table-block--stack tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) .flo-platform-mark { background: var(--flo-violet-100); }
    /* 🔻 2026-10-11 (#1625) ~~고르면 판을 감추고(`visibility: hidden`) 40 보라 체크 판을 덮는다~~ → 판은 그대로 두고 오른쪽 아래에 체크 표지 20 을 붙인다(`.flo-choice` 체크와 같은 값).
       표지 둘레 2 는 카드 바탕색이라 판과 떨어져 보인다 · 판(32)은 머리 줄(44) 가운데라 위 6 에서 시작한다 */
    .flo-main .flo-search-result .flo-table-block--stack tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) .flo-account::before {
        content: "✓" / ""; position: absolute; left: 18px; top: 50%; translate: 0 2px; z-index: 1;
        display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
        background: var(--flo-primary); box-shadow: 0 0 0 2px var(--flo-select-fill);
        color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
    }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__name { color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__sub { align-items: center; font-size: 13px; line-height: 20px; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__handle { color: var(--flo-ink-3); }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__source { padding: 0 4px; border-radius: var(--flo-radius); background: var(--flo-line-soft); color: var(--flo-ink-2); }
    /* 🔻 2026-10-11 (#1625) ~~고르면 흰 바탕(`--flo-card`)~~ → 지표 띠와 같은 엷은 보라 · 연보라 카드 위에 흰 조각이 뜨지 않는다 */
    .flo-main .flo-search-result .flo-table-block--stack tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) .flo-account__source { background: var(--flo-violet-100); color: var(--flo-ink-2); }
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__handle + .flo-account__source::before { content: none; }
    /* 🔑 하트는 이름 줄 오른쪽 끝 「⋯」 바로 왼쪽 · 하트의 누름 자리 44 는 위 「누르는 면」 규칙이 넓힌다 */
    .flo-main .flo-search-result .flo-table-block--stack .flo-account__line > .flo-bookmark { position: absolute; top: 50%; right: 8px; translate: 0 -50%; margin: 0; }
    /* 🔑 「⋯」(44)는 이름 줄(22) 가운데에 맞춘다 · 위로 12 올리고 오른쪽 12 는 카드 안여백으로 낸다 */
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td.flo-col--action:not([data-stack]) { grid-column: 3; grid-row: 1; align-self: start; justify-self: end; margin: -12px -12px 0 0; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-row-menu__btn { border-color: transparent; background: transparent; }

    /* 지표 줄 · 회색 띠 안의 세 칸. 칸 사이 틈은 0 이라 띠가 끊기지 않는다 */
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"] { grid-row: 2; padding: 12px 0; background: var(--flo-bg); }
    /* 🔻 2026-10-11 (#1625) ~~앞 칸 왼쪽 안여백 12 · 뒤 칸 오른쪽 12~~ → 칸마다 왼쪽 12. 두 줄 묶음 칸은 안여백 없이 두 칸(각 ⅓)으로 나누고 글자에 12 를 준다 · 세 칸의 시작선이 ⅓ 마다 같다 */
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:not([data-stack-label]) { grid-column: 1 / 3; padding-left: 0; border-radius: var(--flo-radius) 0 0 var(--flo-radius); }
    .flo-main .flo-search-result .flo-table-block--stack .flo-pair-lines > * { padding-left: 12px; }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"][data-stack-label] {
        grid-column: 3; padding-left: 12px; padding-right: 12px; border-radius: 0 var(--flo-radius) var(--flo-radius) 0;
        color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ font-variant-numeric: tabular-nums;
    }
    /* 🔻 2026-10-11 (#1625) ~~고르면 흰 바탕(`--flo-card`)~~ → 보라 8% 를 섞은 반투명 · 연보라 카드보다 한 단 짙어 띠가 이어진다(어두운 화면도 같은 식) */
    .flo-main .flo-search-result .flo-table-block--stack tr:has(> td.flo-col--pick input[form="bookmark-form"]:checked) > td[data-stack="metric"] { background: var(--flo-violet-100); }
    .flo-main .flo-search-result .flo-table-block--stack .common-table > tbody > tr > td[data-stack-label]::before { margin: 0; line-height: 20px; }
    .flo-main .flo-search-result .flo-table-block--stack .flo-pair-lines {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; grid-auto-flow: column;
        column-gap: 0; align-items: start; line-height: 20px;
    }
    .flo-main .flo-search-result .flo-table-block--stack .flo-pair-lines__value { justify-self: start; color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ font-variant-numeric: tabular-nums; }

    /* 🔻 2026-10-11 (#1640) ~~「이 쪽 전체 선택」 알약(#1625)~~ 은 걷었다. 카드 목록 머리의 상자는 가리고, 같은 일은 결과 도구 줄 첫 칸이 한다 */
}

/*
 | 🆕 2026-10-11 (#1635 · 🧑 「인원 크게 + 카드 전체 링크」) 관심목록 카드.
 | 🔑 카드 전체가 「상세보기」 링크다 · 링크의 ::after 가 카드(position: relative)를 덮는다(늘린 링크 방식).
 |    링크 자신은 기준 상자가 되지 않게 `static` 으로 푼다(위 `:where(... .flo-name-row__detail ...) { position: relative }` 는 셈 0 이라 이긴다).
 | 🔑 연필 · 이름 수정 폼 · 휴지통은 한 층 위(z-index 1)라 따로 눌리고 키보드로도 따로 닿는다. 삭제는 그대로 확인 창을 지난다(R-309).
 | 🔑 인원은 지표 칸 값(26/600)과 같은 글자 · 「명」은 작은 단위(`.flo-kpi__unit`).
 */
.flo-group-card { position: relative; }
.flo-group-card .flo-name-row__detail { position: static; }
.flo-group-card .flo-name-row__detail::after { inset: 0; border-radius: inherit; }
.flo-group-card .flo-name-edit,
.flo-group-card .flo-group-card__del { position: relative; z-index: 1; }
.flo-group-card:has(.flo-name-row__detail:hover) { border-color: var(--flo-primary); }
.flo-group-card:has(.flo-name-row__detail:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
.flo-group-card .flo-name-row__detail:focus-visible { outline: none; }
.flo-group-card__count { display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.flo-group-card__count-label { color: var(--flo-ink-3); }
.flo-group-card__count-value { display: flex; align-items: baseline; gap: 2px; margin: 0; }
.flo-group-card__count + .flo-group-card__meta { margin-top: 12px; }

/*
 | 🆕 2026-10-11 (#1633) 단계 목록 줄의 상태 변형. 발송완료 「다음에 일어날 일」이 쓴다 · 이름 · 수 · 상태 한 마디.
 | 🔑 수와 상태는 오른쪽 끝에 붙는다. 수가 없는 단계는 상태만 남는다. 🚫 칸 모양 · 번호 칩 · 지금 칸 규칙은 목록 줄 정본을 그대로 쓴다.
 */
.flo-steps--status .flo-step__note { flex: none; margin-left: auto; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); white-space: nowrap; }
.flo-steps--status .flo-step__count + .flo-step__note { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--flo-line); }

/*
 | 🆕 **캠페인 목록 · 대시보드 캠페인 표는 휴대폰에서 카드다** (2026-10-11 · 이슈 #1628 · `x-data-table` 의 `stack`).
 |
 | 🚨 390 에서 표를 옆으로 굴려야 기간 · 진행 · 순매출이 보였다(목록 · 대시보드 표 모두 상태 칸 뒤가 잘렸다).
 | 🔑 카드는 세 줄이다. 첫 줄은 이름(링크) + 상태 알약, 둘째 줄은 기간(참여 기한 작은 줄 포함), 셋째 줄은 회색 지표 띠다.
 |    띠의 칸은 정확히 같은 폭이다(4등분). 목록은 진행 요약 · 순매출 둘이라 두 칸씩 나눈다. 글자는 칸마다 왼쪽 12 에서 시작한다.
 | 🔑 유형 · 작성자 · 관리는 카드에 싣지 않는다(`data-stack="hide"`). 이름 링크가 관리 단추와 같은 곳으로 가고, 값은 넓은 창의 표에 그대로 있다(R-821).
 | 🔑 처리 필요가 1건 이상이면(`data-need`) 그 칸 값만 경고 글자색 + 굵게 한다. 붉은 바탕은 쓰지 않는다.
 | 🚫 넓은 창(641 이상)의 표는 바뀌지 않는다 · 모든 규칙이 640 이하 안에 있다.
 */
@media (max-width: 640px) {
    .flo-main .flo-table-block--stack.flo-cam-cards .common-table > tbody > tr:not(:has(> td.flo-col--action:not([data-stack]))):not(:has(> td[colspan])) {
        grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 0; padding: 12px;
    }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="hide"] { display: none; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="name"] { grid-column: 1 / 4; grid-row: 1; padding-right: 8px; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="name"] > a {
        display: block; color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ word-break: keep-all; overflow-wrap: anywhere;
    }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="status"] { grid-column: 4; grid-row: 1; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="wide"] { grid-column: 1 / -1; grid-row: 2; color: var(--flo-ink-2); }

    /* 지표 띠 · 칸 사이 틈 0 이라 띠가 끊기지 않는다. 앞 칸 왼쪽 · 뒤 칸 오른쪽 모서리만 둥글다 */
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"] {
        grid-row: 3; grid-column: span 1; align-self: stretch; padding: 12px 8px 12px 12px; background: var(--flo-bg);
        color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
    }
    .flo-main .flo-cam-cards.flo-cam-list.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"] { grid-column: span 2; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td:not([data-stack="metric"]) + td[data-stack="metric"] { border-radius: var(--flo-radius) 0 0 var(--flo-radius); }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:not(:has(~ td[data-stack="metric"])) { border-radius: 0 var(--flo-radius) var(--flo-radius) 0; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"][data-stack-label]::before { margin: 0; line-height: 20px; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"][data-need] { color: var(--sig-warn-ink); font-weight: 700; }
    /* 진행 요약 칸의 막대 · 띠 폭 안에 든다 */
    .flo-main .flo-cam-cards.flo-table-block--stack .flo-cam-progress { display: grid; gap: 4px; }
}

/* 🔻 2026-10-11 (#1640) ~~카드 보기의 「이 쪽 전체 선택」 알약(#1630)~~ 은 걷었다 · 결과 도구 줄 첫 칸이 한다 */

/*
 | 🔻 2026-10-11 (#1628) 대시보드 카드는 지표 띠를 한 줄 네 칸이 아니라 두 줄 두 칸으로 바꾼다.
 |    ~~네 칸 한 줄~~ 은 칸 폭이 77(360 에서 70)이라 「2,708,100원」이 두 줄로 끊겼다(390 실측). 두 칸이면 칸이 154 라 한 줄에 든다.
 |    칸은 여전히 정확히 같은 폭이고, 모서리는 띠 전체의 네 귀퉁이만 둥글다.
 | ⚠️ 아래 `:nth-child(4~7)` 은 열 순서에 기댄다: 대시보드 표에서 지표 칸이 네 번째부터 일곱 번째 열일 때만 맞는다. 열을 더하거나 옮기면 모서리가 어긋나니 함께 고친다.
 */
@media (max-width: 640px) {
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"] { grid-column: span 2; border-radius: 0; }
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:nth-child(n+6) { grid-row: 4; }
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:nth-child(4) { border-top-left-radius: var(--flo-radius); }
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:nth-child(5) { border-top-right-radius: var(--flo-radius); }
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:nth-child(6) { border-bottom-left-radius: var(--flo-radius); }
    .flo-main .flo-cam-cards.flo-dash-table.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"]:nth-child(7) { border-bottom-right-radius: var(--flo-radius); }
}

/*
 | 🔻 2026-10-14 (#1739 · 묶음 M) 휴대폰 카드 안의 회색 지표 띠를 걷는다. 판 > 카드 > 회색 면 세 겹이었다(대시보드 · 캠페인 목록).
 | 🔑 지표는 면 없는 두 칸 격자다 · 이름표 13 흐림 위 · 값 14/600 아래. 칸 사이 16 · 줄 사이 12.
 | 🔑 진행 막대의 바탕은 선 색(`--flo-line`)이다. 회색 면과 같은 바탕이라 막대 길이가 보이지 않았다.
 | 🔑 아래 두 덩이(#1628 모서리 규칙)는 면이 없어 그려지는 것이 없다. 기록으로 둔다(R-204).
 */
@media (max-width: 640px) {
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr:not(:has(> td.flo-col--action:not([data-stack]))):not(:has(> td[colspan])) { column-gap: 16px; row-gap: 12px; padding: 16px; }
    .flo-main .flo-cam-cards.flo-table-block--stack .common-table > tbody > tr > td[data-stack="metric"] { padding: 0; background: transparent; border-radius: 0; }
    .flo-main .flo-cam-cards.flo-table-block--stack .flo-bar { background: var(--flo-line); }
}

/* 🔻 2026-10-11 (#1628) 목록 카드는 두 지표 칸 사이에 감춘 칸(작성자)이 끼어 뒤 칸이 앞 칸으로 읽혀 왼쪽 모서리가 둥글었다 · 이음새에 홈이 보였다. 감춘 칸 바로 뒤 지표 칸은 왼쪽을 곧게 한다 */
@media (max-width: 640px) {
    .flo-main .flo-cam-cards.flo-cam-list.flo-table-block--stack .common-table > tbody > tr > td[data-stack="hide"] + td[data-stack="metric"][data-stack-label] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}

/*
 | 🆕 **휴대폰 카드 목록 · 발송 이력 · 정산 · 쿠폰 진행 · 관심목록** (2026-10-11 · 이슈 #1629 · 🧑 640 이하 가로 스크롤 표를 카드로).
 |
 | 🚨 390 에서 네 표가 옆으로 굴러야 끝 열(상태 · 지급 예정액 · 관리 · 제거)이 보였다(여분 폭 410 · 310 · 266 · 406 실측).
 | 🔑 짜임은 검색 카드(#1620 · #1623 · #1625)와 같다 · 줄 하나가 카드 한 장, 이름이 첫 줄, 값은 이름표를 단 칸으로 선다.
 |    `x-data-table` 의 `stack` 과 칸의 `data-stack` 을 그대로 쓰고, 이 블록은 각 표에 맞는 자리만 더한다.
 | 🔑 `data-stack="side"` 는 이 블록이 더한 값이다 · 첫 줄 오른쪽 끝에 서는 값(상태 알약 · 지급 예정액).
 | 🔑 값이 없는 칸은 `data-stack` 을 달지 않아 카드에서 빠진다(R-307) · 넓은 창의 표는 「-」 그대로다.
 | 🚫 넓은 창(640 초과)의 표는 바뀌지 않는다 · 모든 규칙이 아래 미디어 쿼리 안에 있다.
 */
@media (max-width: 640px) {
    /* ── 첫 줄 오른쪽 값(side)이 있는 카드 · 이름 | 값 ── */
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr:has(> td[data-stack="side"]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* 🔑 첫 줄 오른쪽 값은 이름 줄과 같은 칸에 겹쳐 선다 · 두 칸이 늘 반반이라 둘째 줄 칸의 시작선이 카드마다 같다. 이름 쪽은 값 폭만큼 비운다 */
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="title"]:has(~ td[data-stack="side"]) { padding-right: 128px; }
    /* 🔻 2026-10-11 (#1629 검토) 값 자리 112 → 128 · 긴 이름과 긴 사유 알약이 서로 겹쳤다(390 · 360 실측). 값 칸은 128 을 넘지 않고(알약은 줄을 바꾼다), 이름은 줄을 바꾸며, 아이디는 줄임표로 끝낸다 */
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="side"] { max-width: 128px; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="side"] .flo-badge { max-width: 100%; white-space: normal; text-align: left; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="title"]:has(~ td[data-stack="side"]) .flo-account__name { white-space: normal; overflow-wrap: anywhere; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="title"]:has(~ td[data-stack="side"]) .flo-account__handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="title"]:has(~ td[data-stack="side"]) .flo-account { display: flex; width: 100%; min-width: 0; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="title"]:has(~ td[data-stack="side"]) .flo-account__text { min-width: 0; flex: 1 1 auto; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .common-table > tbody > tr > td[data-stack="title"] { grid-row: 1; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list) .common-table > tbody > tr > td[data-stack="side"] {
        grid-column: 2; grid-row: 1; align-self: start; justify-self: end;
    }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .flo-account__name { color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .flo-account__text { max-width: none; gap: 2px; }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .flo-account__handle { color: var(--flo-ink-3); }
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .common-table > tbody > tr > td[data-stack="metric"],
    .flo-main .flo-table-block--stack:is(.flo-mail-history-table, .flo-settle-list, .flo-coupon-roster) .common-table > tbody > tr > td[data-stack="wide"] {
        color: var(--flo-ink-1); font-size: 14px; line-height: 20px;
    }

    /* ── 발송 이력 · 첫 줄 이름 | 상태, 둘째 줄 발송 시각 · 용도, 셋째 줄 받는 주소 ── */
    .flo-main .flo-table-block--stack.flo-mail-history-table .common-table > tbody > tr > td[data-stack="metric"] { grid-row: 2; }
    .flo-main .flo-table-block--stack.flo-mail-history-table .common-table > tbody > tr > td[data-stack="wide"] { grid-column: 1 / -1; grid-row: 3; }

    /* ── 정산 · 첫 줄 이름 | 지급 예정액(크게), 둘째 줄 상태 · 차수, 맨 아래 관리 단추는 카드 폭 ── */
    .flo-main .flo-table-block--stack.flo-settle-list .common-table > tbody > tr > td[data-stack="side"] { color: var(--flo-ink-1); font-size: 16px; font-weight: 700; line-height: 24px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .flo-main .flo-table-block--stack.flo-settle-list .common-table > tbody > tr > td[data-stack="metric"] { grid-row: 2; }
    .flo-main .flo-table-block--stack.flo-settle-list .common-table > tbody > tr > td[data-stack="foot"] { grid-row: 3; }
    .flo-main .flo-table-block--stack.flo-settle-list .common-table > tbody > tr > td[data-stack="foot"] :is(form, .basic-btn) { display: flex; width: 100%; min-width: 0; }
    .flo-main .flo-table-block--stack.flo-settle-list .common-table > tbody > tr > td[data-stack="foot"] .basic-btn { justify-content: center; min-height: 44px; }

    /* ── 쿠폰 진행 · 이름, 배송 · 메일 상태 두 칸, 공유 링크 한 줄 · 둘째 줄 빈 자리는 뒤 칸이 채운다 ── */
    .flo-main .flo-table-block--stack.flo-coupon-roster .common-table > tbody > tr { grid-auto-flow: dense; }
    .flo-main .flo-table-block--stack.flo-coupon-roster .common-table > tbody > tr > td[data-stack="wide"] { overflow-wrap: anywhere; }

    /* ── 관심목록 카드 · 검색 카드와 같은 모양 · 이름 | 제거, 아래 지표 띠(팔로워 · 담은 날) · 카드 전체가 선택 면 ── */
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr:has(> td.flo-col--pick),
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr {
        position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; padding: 12px;
        transition: border-color .12s, box-shadow .12s;
    }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr:has(> td.flo-col--pick input:checked) {
        border-color: var(--flo-select-border); box-shadow: 0 0 0 2px var(--flo-select-ring); background: var(--flo-select-fill);
    }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr:has(> td.flo-col--pick input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td.flo-col--pick { right: 0; width: auto; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td.flo-col--pick input {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td.flo-td:not(.flo-col--pick) { position: relative; pointer-events: none; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td :is(a, button, summary, dialog) { pointer-events: auto; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td[data-stack="title"] { grid-column: 1 / -1; grid-row: 1; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td.flo-col--action:not([data-stack]) { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table td .flo-account { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding-right: 72px; }
    .flo-main .flo-table-block--stack.flo-folder-members .flo-account__text { max-width: none; gap: 2px; }
    .flo-main .flo-table-block--stack.flo-folder-members .flo-account__name { color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ }
    .flo-main .flo-table-block--stack.flo-folder-members .flo-account__handle { color: var(--flo-ink-3); font-size: 13px; line-height: 20px; }
    /* 🔻 2026-10-11 (#1629 · 🧑 「박스없어도 그냥 카드 선택하면 선택된 느낌들면 박스 없어도될듯」) ~~이름 앞 빈 동그라미(안 골랐을 때도 보임)~~ → 안 골랐을 땐 아무 표시가 없다(검색 카드와 같다).
       고른 카드만 왼쪽 위 모서리에 작은 체크 표지(20)가 붙는다 · 표지 둘레 2 는 카드 바탕색이라 모서리와 떨어져 보인다. 색만으로 가르지 않는다(테두리 · 바탕 · 표지가 함께 바뀐다) */
    .flo-main .flo-table-block--stack.flo-folder-members tr:has(> td.flo-col--pick input:checked)::after {
        content: "✓" / ""; position: absolute; left: -4px; top: -4px; z-index: 1;
        display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
        background: var(--flo-primary); box-shadow: 0 0 0 2px var(--flo-card);
        color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
    }

    /* 지표 띠 · 회색 띠 안의 두 칸 · 칸마다 왼쪽 12 에서 시작한다 · 한 칸뿐이면 띠 전체를 쓴다 */
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td[data-stack="metric"] {
        grid-row: 2; padding: 12px; background: var(--flo-bg);
        color: var(--flo-ink-1); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ font-variant-numeric: tabular-nums;
    }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td[data-stack="metric"]:not(:has(~ td[data-stack="metric"])) { border-radius: 0 var(--flo-radius) var(--flo-radius) 0; }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td:not([data-stack="metric"]) + td[data-stack="metric"] { border-radius: var(--flo-radius) 0 0 var(--flo-radius); }
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr:not(:has(> td[data-stack="metric"] ~ td[data-stack="metric"])) > td[data-stack="metric"] { grid-column: 1 / -1; border-radius: var(--flo-radius); }
    .flo-main .flo-table-block--stack.flo-folder-members tr:has(> td.flo-col--pick input:checked) > td[data-stack="metric"] { background: var(--flo-violet-100); } /* 🔻 2026-10-11 (#1629 검토) ~~주색 8% 섞음~~ → 검색 카드와 같은 옅은 단계 */
    .flo-main .flo-table-block--stack.flo-folder-members .common-table > tbody > tr > td[data-stack-label]::before { margin: 0; line-height: 20px; }

    /* 🔻 2026-10-11 (#1640) ~~「이 쪽 전체 선택」 알약~~ 은 걷었다 · 같은 일은 도구 줄 첫 칸이 한다 */
}

/*
 | 🆕 2026-10-11 (#1627 검토 · #1630) 담은 인플루언서 카드(명단 단계)도 카드 전체가 선택 면이다.
 | 🔑 모양은 검색 카드와 한 벌이다 · 보라 테두리 + 바깥선 + 연보라 바탕 + 왼쪽 위 작은 체크 표지. 상자는 눈에만 감춘다(초점은 받는다).
 | 🔑 640 이하에서만 걸린다 · 넓은 창의 표는 그대로다(상자는 칸 안 가운데 그대로).
 */
@media (max-width: 640px) {
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr:has(> td.flo-col--pick) {
        position: relative; padding: 12px; transition: border-color .12s, box-shadow .12s;
    }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr:has(> td.flo-col--pick input[form="roster-remove"]:checked) {
        border-color: var(--flo-select-border); box-shadow: 0 0 0 2px var(--flo-select-ring); background: var(--flo-select-fill);
    }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr:has(> td.flo-col--pick input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr > td.flo-col--pick { right: 0; width: auto; }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr > td.flo-col--pick input {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr > td.flo-td:not(.flo-col--pick) { position: relative; pointer-events: none; }
    .flo-main .flo-table-block--stack.flo-roster-list .common-table > tbody > tr > td :is(a, button, summary) { pointer-events: auto; }
    /* 🔻 검토 · ~~카드 왼쪽 위 모서리(-4)에 걸친 표지~~ → 검색 카드처럼 플랫폼 표시의 오른쪽 아래에 붙인다(표시 20 · 표지 16 · 표지가 계정 글자에 닿지 않는다) */
    .flo-main .flo-table-block--stack.flo-roster-list tr:has(> td.flo-col--pick input[form="roster-remove"]:checked) .flo-account { position: relative; }
    .flo-main .flo-table-block--stack.flo-roster-list tr:has(> td.flo-col--pick input[form="roster-remove"]:checked) .flo-account::before {
        content: "✓" / ""; position: absolute; left: 8px; top: 50%; z-index: 1;
        display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
        background: var(--flo-primary); box-shadow: 0 0 0 2px var(--flo-select-fill);
        color: #fff; font-size: 13px; font-weight: 700; line-height: 1;
    }
}

/*
 | 🆕 2026-10-11 (#1639 · 🧑 「관심목록 카드 안 레이아웃 검토」) 관심목록 카드 안 짜임.
 | 🔑 위에서 아래로 이름 줄(이름 + 아이콘 둘) · 인원(이름표 위, 큰 숫자 + 「명」은 한 기준선) · 바닥 줄(최근 수정 + 「상세보기 ›」)이다.
 |    간격은 이름 줄 아래 12 · 바닥 줄 위 16 이다(4 눈금). 카드는 세로 플렉스라 바닥 줄이 늘 카드 바닥에 선다(한 줄의 카드 높이가 같다).
 | 🔻 ~~이름 줄 아래 구분선 · 이름 옆 밑줄 「상세보기」~~ · 구분선은 작은 카드 안에서 값어치가 없었고, 링크는 카드 전체가 이미 링크라 조용한 글자 + 화살표로 낮췄다.
 | 🔑 이름은 카드 제목이다(16/600). 아이콘 단추는 오른쪽 끝에 붙고 글자 색은 흐리다(`flo-icon-btn`).
 | 🔑 링크 글자는 보라이되 밑줄이 없고, 올리면 카드 테두리와 함께 화살표가 오른쪽으로 2 움직인다.
 */
.flo-group-card { display: flex; flex-direction: column; }
.flo-main .flo-group-card .flo-name-row__name { font-size: 16px; line-height: var(--flo-lh-card); }
.flo-group-card > .flo-name-row { gap: 4px; }
.flo-group-card > .flo-name-row > .flo-name-edit:not([open]) { margin-left: auto; }
.flo-group-card__count { margin-top: 12px; }
.flo-group-card > .flo-name-row > .flo-group-card__del { margin-right: -8px; } /* 아이콘 글자가 카드 안여백 오른쪽 끝(바닥 줄 화살표)과 맞는다 */
.flo-group-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 16px; }
.flo-group-card__open { display: inline-flex; align-items: center; flex: none; gap: 0; color: var(--flo-primary); }
.flo-main .flo-group-card .flo-name-row__detail { color: var(--flo-primary); font-weight: 400; text-decoration: none; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
.flo-group-card__go { flex: none; transition: transform .12s; }
.flo-group-card:has(.flo-name-row__detail:hover) .flo-group-card__go,
.flo-group-card:has(.flo-name-row__detail:focus-visible) .flo-group-card__go { transform: translateX(2px); }
.flo-group-card:has(.flo-name-edit[open]) .flo-group-card__open { visibility: hidden; }

/*
 | 🆕 2026-10-11 (#1640 · 🧑 「이 쪽 전체선택이 이상한건 왼쪽에 잇기도하고 맞닿는 선이 살짝 이상해」) 막대 첫 칸의 「이 쪽 전체 선택」(`x-select-all`).
 | 🔑 ~~목록 위에 혼자 뜨는 알약(#1625 · #1629 · #1630)~~ 을 걷고 담기 막대(결과 도구 줄 · 실행 줄)의 첫 칸으로 옮겼다. 위 선과 맞닿지 않고 막대 안에서 같은 높이로 선다.
 | 🔑 상자 20(반경 4 · 목록 줄 상자와 같은 네모)이 켜짐(보라 바탕 흰 체크) · 일부(보라 바탕 흰 가로줄) · 꺼짐(빈 테)을 그린다. 진짜 상자는 눈에만 감추고 초점은 받는다.
 | 🔑 칸 높이는 막대 칸(`--flo-control-h` 40)과 같고 휴대폰에서는 44(`--flo-hit`)다. 초점 고리는 칸 둘레다.
 */
.flo-selall { position: relative; display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: var(--flo-control-h); cursor: pointer; white-space: nowrap; }
/* 🔻 2026-10-12 (#1646 · 🧑 「전체 선택 버튼이 다른거에 비해 너무 별로다」) 맨몸 상자 + 글자였다. 옆 단추와 같은 높이 · 테두리 · 반경의 칸으로 감싼다 */
.flo-main .flo-selall {
    box-sizing: border-box; height: var(--flo-control-h); padding: 0 14px 0 12px;
    border: 1px solid var(--border-color-d); border-radius: var(--flo-radius); background: var(--flo-card);
    transition: background-color .12s, border-color .12s;
}
.flo-main .flo-selall:hover { background: var(--flo-line-soft); }
.flo-main .flo-selall:has(> input:checked),
.flo-main .flo-selall:has(> input:indeterminate) { border-color: var(--flo-select-border); background: var(--flo-select-fill); }
.flo-main .flo-selall:has(> input:checked) .flo-selall__text,
.flo-main .flo-selall:has(> input:indeterminate) .flo-selall__text { color: var(--flo-primary); }
.flo-selall > input {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.flo-selall__box {
    flex: none; box-sizing: border-box; display: grid; place-items: center; width: 20px; height: 20px;
    border: 1.5px solid var(--flo-ink-3); border-radius: 4px; background: var(--flo-card); color: #fff;
    transition: border-color .12s, background-color .12s;
}
.flo-selall__box > svg { width: 16px; height: 16px; opacity: 0; }
.flo-selall:hover .flo-selall__box { border-color: var(--flo-ink-2); }
.flo-selall:has(> input:checked) .flo-selall__box { border-color: var(--flo-primary); background: var(--flo-primary); }
.flo-selall:has(> input:checked) .flo-selall__box > svg { opacity: 1; }
.flo-selall:has(> input:indeterminate) .flo-selall__box {
    border-color: var(--flo-primary); background: linear-gradient(#fff, #fff) center / 10px 2px no-repeat, var(--flo-primary);
}
.flo-selall:has(> input:indeterminate) .flo-selall__box > svg { opacity: 0; }
.flo-selall:has(> input:disabled) { cursor: default; opacity: .5; }
.flo-selall:has(> input:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: 2px; border-radius: var(--flo-radius); }
.flo-selall__text { font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
/* 🔻 2026-10-11 (#1640) 고른 사람이 있어도 「담을 인플루언서를 선택해 주세요.」 까닭 줄이 남아 있었다(글자 부품의 줄 규칙이 `hidden` 을 이겼다). `hidden` 이면 감춘다 */
.flo-main [data-selection-empty][hidden] { display: none; }
@media (min-width: 641px) {
    .flo-selall.flo-selall--phone { display: none; }
}
@media (max-width: 640px) {
    .flo-selall { min-height: var(--flo-hit); }
    .flo-main .flo-selall { height: var(--flo-hit); }
    .flo-main .flo-result-tools__head { flex-wrap: wrap; row-gap: 0; }
    /* 실행 줄 · 첫 줄은 전체 선택 + 선택 인원, 안내 글은 다음 줄 전체 폭이다 */
    .flo-actionbar__info { flex-wrap: wrap; row-gap: 0; }
    .flo-actionbar__info > .flo-t-caption:not(.flo-actionbar__count) { flex: 1 1 100%; padding-bottom: 8px; }
}

/*
 | 🆕 2026-10-12 (#1650 · 🧑 「검색 필터 쪽 기간 영역이 너무 별론대」) 기간 범위 조작 · 테두리 하나에 시작일 「~」 종료일.
 | 🔑 높이는 검색 필터 판의 칸과 같은 32(`--flo-control-h-sm`) · 안의 날짜 칸은 테두리 · 둥근 모서리를 벗고 바탕은 흰색이다.
 | 🔑 초점 고리는 본문 공통 규칙(보라 실선)을 그대로 쓴다. 날짜 칸 폭은 달력 부품의 140을 그대로 쓴다.
 | 🔑 480 이하는 묶음이 줄 폭을 채우고 두 칸이 나눠 찬다.
 */
.flo-main .flo-daterange {
    display: inline-flex; align-items: center; gap: 0;
    height: var(--flo-control-h-sm); max-width: 100%;
    background: var(--flo-card); border: 1px solid var(--flo-line-strong, var(--flo-line)); border-radius: var(--flo-radius);
}
.flo-main .flo-daterange :is(input:not([type="hidden"]), .flo-datepicker) { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.flo-main .flo-daterange :is(input:not([type="hidden"])) { height: calc(var(--flo-control-h-sm) - 2px); min-height: 0; padding-top: 0; padding-bottom: 0; }
.flo-main .flo-daterange .flo-datepicker { flex: 1 1 0; min-width: 0; width: auto; }
.flo-main .flo-daterange input[type="date"] { width: var(--flo-control-w-short); }
.flo-main .flo-daterange__tilde { flex: none; padding: 0 4px; color: var(--flo-ink-3); }
@media (max-width: 480px) {
    .flo-main .flo-daterange { display: flex; flex: 1 1 100%; }
}

/*
 | 🆕 **참여 정보 상세: 머리 · 진행 타임라인 · 연락처/카페24 아이디 한 쌍** (2026-10-12 · 이슈 #1649 · 🧑 「컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」).
 | 🔑 머리 판은 인플루언서(`x-account-name`) 왼쪽 · 상태 칩 오른쪽 한 줄이다. 칩은 목록 화면과 같은 부품이다.
 | 🔑 타임라인은 발송 → 열람 → 응답 가로 세 칸이다. 지난 단계는 옅은 보라 점, 아직인 단계는 빈 점과 결측 표기다. 채운 보라는 쓰지 않는다.
 | 🔑 값 줄은 값 왼쪽 · 조작 오른쪽이고, 좁으면 줄바꿈한다. 조작은 작은 테두리 단추(조용한 단추)다.
 */
.flo-main .flo-pd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.flo-main .flo-pd-head__who .flo-account__name { font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); } /* 🔻 2026-10-14 (#1737) ~~18/700/26~~ → 상세 머리의 사람 이름은 22/700/30 */
.flo-main .flo-pd-head__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flo-main .flo-pd-timeline { max-width: 720px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.flo-main .flo-pd-timeline__step { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 24px; min-width: 0; }
.flo-main .flo-pd-timeline__step::before { content: ""; position: absolute; top: 5px; left: 16px; right: 0; height: 2px; background: var(--flo-line); }
.flo-main .flo-pd-timeline__step:last-child::before { content: none; }
.flo-main .flo-pd-timeline__step[data-done="true"]:not(:last-child):has(+ [data-done="true"])::before { background: var(--flo-violet-200); }
.flo-main .flo-pd-timeline__dot { position: absolute; top: 0; left: 0; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--flo-line-strong); background: var(--flo-card); }
.flo-main .flo-pd-timeline__step[data-done="true"] .flo-pd-timeline__dot { border-color: var(--flo-violet-600); background: var(--flo-violet-600); }
.flo-main .flo-pd-timeline__label { font-size: 14px; font-weight: 600; line-height: 20px; color: var(--flo-ink-1); }
/*
 | 🔻 2026-10-19 (#1799) 날짜와 시각 사이는 빈칸 하나다(같은 화면 동의 이력 「2026.10.12 14:30」과 같다).
 |    ~~`display: flex; flex-wrap: wrap; gap: 0 8px;`~~ 띄움 칸 사이 8 이 빈칸 둘처럼 보였다.
 | 🔑 날짜 · 시각은 각자 한 덩이(`whitespace-nowrap`)라 좁으면 그 사이의 빈칸에서만 줄이 바뀐다.
 */
.flo-main .flo-pd-timeline__at { display: block; color: var(--flo-ink-2); }
.flo-main .flo-pd-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .flo-main .flo-pd-pair { grid-template-columns: minmax(0, 1fr); } }
.flo-main .flo-pd-pair__card { margin-bottom: 0; }
.flo-main .flo-pd-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.flo-main .flo-pd-value__text { min-width: 0; overflow-wrap: anywhere; }

/*
 | 🆕 **정산 · 발송 이력 표 행 줄이기 + 정산 명세 상세 짜임** (2026-10-12 · 이슈 #1651 · 🧑 「인플루언서 행만 너무 크다」 · 「각 인플루언서 테이블이 너무 굵직하지않나?」 · 「컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」).
 | 🔑 표 안 계정 칸은 넓은 창에서 「표시 이름 · 흐린 @계정 ID」 한 줄이다(행 높이 64 → 56 안팎). 카드로 접히는 640 이하는 그대로 두 줄이다.
 | 🔑 발송 이력의 「전체 보기 (열람 기록 남음)」은 행마다 테두리 단추 대신 조용한 눈 아이콘 단추다. 글자는 말풍선 · 낭독 이름으로 남는다.
 | 🔑 정산 상세는 머리 판 · 지표 칸 셋 · 왼쪽 금액 명세 + 오른쪽 입력 · 동작 판 · 아래 지난 차수다.
 */
@media (min-width: 641px) {
    .flo-main .flo-table-block:is(.flo-settle-list) .flo-account__text { flex-direction: row; align-items: baseline; gap: 8px; max-width: 360px; }
    .flo-main .flo-table-block:is(.flo-settle-list) .flo-account__handle { min-width: 0; flex: 0 1 auto; }
    .flo-main .flo-table-block.flo-settle-list .common-table td .flo-account { width: min(100%, 360px); } /* 🆕 2026-10-14 (#1738 · 결정 ④) 한 줄 칸의 고정 폭은 글 묶음 상한과 같다 */
}
@media (min-width: 1104px) {
    .flo-main .flo-mail-history-table .flo-account__text { flex-direction: row; align-items: baseline; gap: 8px; max-width: 280px; }
    .flo-main .flo-mail-history-table .flo-account__handle { min-width: 0; flex: 0 1 auto; }
    .flo-main .flo-mail-history-table .common-table td .flo-account { width: min(100%, 280px); } /* 🆕 2026-10-14 (#1738 · 결정 ④) */
    .flo-main .flo-mail-history-table th.flo-col--name { width: 280px; }
}
@media (min-width: 641px) {
    .flo-main .flo-reveal-cell { white-space: nowrap; }
}
@media (max-width: 640px) {
    .flo-main .flo-reveal-cell { overflow-wrap: anywhere; } /* 🔻 2026-10-12 (#1651 검토) 카드로 접힌 폭에서 긴 가린 주소가 넘치지 않게 줄을 바꾼다 */
}
.flo-main .flo-reveal-cell .flo-t-body { vertical-align: middle; }
.flo-main .flo-reveal-cell form.inline { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.flo-main .flo-reveal-btn { color: var(--flo-ink-3); }
.flo-main .flo-settle-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 16px; }
.flo-main .flo-settle-head .flo-account__name { font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); } /* 🔻 2026-10-14 (#1737) ~~18/700/26~~ → 22/700/30 */
.flo-main .flo-settle-head__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flo-main .flo-settle-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.flo-main .flo-settle-detail__main,
.flo-main .flo-settle-detail__aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.flo-main .flo-settle-detail__aside:not(:has(> *)) { display: none; }
@media (min-width: 1100px) {
    .flo-main .flo-settle-detail:has(> .flo-settle-detail__aside > *) { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; } /* 🔻 2026-10-14 (#1738 · 묶음 B) ~~start~~ · 두 열 바닥이 맞는다(313 대 291) */
    .flo-main :is(.flo-settle-detail__main, .flo-settle-detail__aside) > :last-child { flex: 1 0 auto; }
}

/*
 | 🆕 2026-10-12 (#1650) 인플루언서별 기여 표의 비중 칸 · 막대(`.flo-bar` 홈 · 채움)와 비율을 한 줄에 둔다.
 | 🔑 채움 폭은 마크업이 넘기는 값 하나(`--flo-bar-fill`)다 · 막대 폭은 80, 비율은 숫자 글꼴로 오른쪽 자리를 맞춘다(4px 격자).
 */
.common-table th.flo-col--share { width: 200px; }
.flo-share { display: inline-flex; align-items: center; gap: 8px; }
.flo-share__bar { width: 80px; }
.flo-share__pct { min-width: 48px; text-align: right; }

/*
 | 🆕 2026-10-12 (#1647 · 🧑 「카드형으로 볼지 리스트로 볼지」) 관심목록 목록형(표) 보기.
 | 🔑 한 줄이 관심목록 하나다. 줄 전체가 「상세보기」 링크다(이름 링크의 늘린 면 · 카드와 같은 방식) · 연필 · 휴지통은 그 위에 서서 따로 눌린다.
 | 🔑 이름 수정은 줄 안에서 한다 · 연필을 누르면 줄 전체가 입력칸 줄(이름 칸 + 저장 + 취소)로 덮인다. 칸 폭이 좁은 관리 칸 안에서 펴지 않는다.
 | 🔑 표 머리와 칸의 가운데 맞춤은 그대로다(#1572). 이름 칸만 왼쪽(`start`)이다.
 */
.flo-folder-list { min-width: 0; }
.flo-folder-row { position: relative; }
.flo-main .flo-folder-row .flo-folder-row__name {
    position: static; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
    color: var(--flo-ink-1); font-weight: 600; text-decoration: none;
}
.flo-folder-row .flo-folder-row__name::after { inset: 0; top: 0; left: 0; right: 0; bottom: 0; border-radius: 0; }
.flo-main .flo-folder-row:hover > td.flo-td { background: var(--flo-bg); }
.flo-folder-row:has(.flo-folder-row__name:hover) .flo-folder-row__name { color: var(--flo-primary); }
.flo-folder-row:has(.flo-folder-row__name:focus-visible) { outline: 2px solid var(--flo-primary); outline-offset: -2px; }
.flo-folder-row .flo-folder-row__name:focus-visible { outline: none; }
.flo-folder-row__actions { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.flo-folder-row .flo-name-edit > summary,
.flo-folder-row .flo-group-card__del { position: relative; z-index: 1; }
.flo-folder-row .flo-name-edit[open] { flex: none; }
.flo-folder-row .flo-name-edit[open] .flo-name-edit__form {
    position: absolute; inset: 0; z-index: 2; padding: 0 16px; background: var(--flo-card);
}
.flo-folder-row .flo-name-edit[open] .flo-name-edit__form > div { flex: 1 1 auto; }
.flo-folder-row .flo-name-edit__form input { min-height: var(--flo-control-h-sm); height: var(--flo-control-h-sm); padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 640px) {
    .flo-main .flo-table-block--stack .common-table > tbody > tr.flo-folder-row { position: relative; }
    .flo-main .flo-table-block--stack .common-table > tbody > tr.flo-folder-row > td[data-stack="title"] { font-size: 16px; line-height: var(--flo-lh-card); }
    .flo-main .flo-table-block--stack .common-table > tbody > tr.flo-folder-row > td[data-stack="metric"] { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/22~~ → 14/600/20 */ font-variant-numeric: tabular-nums; }
}

/*
 | 🆕 **설정 화면의 값 한 줄: 왼쪽 이름표 칸 + 오른쪽 값** (2026-10-12 · 이슈 #1651 · 🧑 「컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」).
 | 🔑 이름표 칸은 120 으로 맞추고, 줄은 높이 40 · 세로 가운데 · 줄 사이 옅은 선이다. 알약이 선 줄과 글자만 선 줄의 높이가 달랐다.
 | 🔑 마지막 줄은 선을 긋지 않는다.
 */
.flo-main .flo-kv-row { display: flex; align-items: center; gap: 16px; min-height: 40px; border-bottom: 1px solid var(--flo-line-soft); }
.flo-main .flo-kv-row:last-child { border-bottom: 0; }
.flo-main .flo-kv-row__label { flex: 0 0 120px; }
/*
 | 🆕 2026-10-14 (#1738 · 묶음 C) 이름표-값 목록은 한 모양이다 · 정본은 요약 목록(`flo-summary-list`): 이름표 13/400 흐림 · 값 14/600 진함.
 | 🚨 같은 목록이 세 모양이었다. 연동 설정은 이름표(13/600 진함)가 값(14/400)보다 진했고, 정산 명세는 둘 다 보통 굵기였고,
 |    주문 귀속 근거는 「아직 정해지지 않았습니다」 같은 문장 값까지 굵게 나왔다.
 | 🔑 문장 값 · 빈 값(`-`)은 보통 굵기 흐린 글자다(`flo-summary-list__value--quiet` · `.flo-missing`). 부품이 값 글자로 가려 붙인다.
 */
.flo-main .flo-kv-row__label.flo-t-label { font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-kv-row > dd { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-main .flo-amount-row:not(.flo-amount-row--total) > dd { font-weight: 600; }
.flo-main .flo-summary-list__value.flo-summary-list__value--quiet { font-weight: 400; color: var(--flo-ink-2); }
.flo-main :is(.flo-summary-list__value, .flo-kv-row > dd).flo-missing { font-weight: 400; color: var(--flo-ink-3); }
.flo-main .flo-kv-row > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/*
 | 🆕 2026-10-12 (#1644 · 🧑 「아래의 컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」 · 「너무 뚝 떨어져있음」) 캠페인 요약 아래 세 절의 짜임.
 | 🔑 위계: 절 제목(16/700) > 소제목(`flo-sub-title` 14/700) > 이름표(13 · 옅은 글) > 값(14).
 | 🔑 다음 업무 안내판은 상태 글자를 제목 옆에 붙이고(`flo-notice__head`), 단추 줄과 12 로 붙어 한 덩어리로 읽힌다.
 | 🔑 내용 절의 이름표 · 값은 정의 격자(`flo-defs`) · 이름표 112 | 값. 좁은 창(640 이하)에서는 이름표가 값 위로 간다.
 */
.flo-notice { padding: 12px 16px; }
.flo-notice__head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.flo-notice__state { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; background: var(--flo-card); }
.flo-main h2.flo-sub-title { font-size: 14px; line-height: var(--flo-lh-card); }
.flo-defs { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 16px; align-items: baseline; }
.flo-main .flo-defs > p { margin: 0; }
.flo-defs > details { grid-column: 2; }
@media (max-width: 640px) {
    .flo-defs { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .flo-main .flo-defs > p.flo-t-caption { margin-top: 12px; }
    .flo-main .flo-defs > p.flo-t-caption:first-child { margin-top: 0; }
    .flo-defs > details { grid-column: 1; }
}

/*
 | 🆕 2026-10-12 (#1647 · 🧑 「선택 쪽이나 검색어 아래 박스 컨텐츠 레이아웃 수정」) 관심목록 상세 창 실행 줄.
 | 🔑 실행 줄(`flo-actionbar`)과 「다른 관심목록에도 저장」 접힘칸이 한 묶음(`flo-bulk`)이다.
 |    줄은 테두리를 걷고 옅은 바탕 하나(상자 안의 상자를 풀었다) · 접힘칸 손잡이는 줄 오른쪽 끝의 작은 보조 단추 모양이다.
 | 🔑 펴면 폼은 줄 바로 아래로 열리고, 위에 선 하나 · 옅은 바탕 없이 창 바탕 위에 선다(상자는 한 겹).
 | 🚫 `position: sticky` 는 창 안에서 쓰지 않는다 · 창 본문이 스스로 스크롤한다.
 */
.flo-bulk { position: relative; }
.flo-main .flo-bulk > .flo-actionbar { position: static; margin-top: 0; border: 0; background: var(--flo-line-soft); }
@media (min-width: 641px) {
    .flo-main .flo-bulk > .flo-actionbar { padding-right: 248px; } /* 손잡이(최대 224) + 오른쪽 12 + 줄과의 사이 12 */
}
.flo-bulk__fold > summary.flo-btn-text {
    position: absolute; top: 12px; right: 12px; z-index: 1;
    display: inline-flex; align-items: center; height: var(--flo-control-h-sm); padding: 0 12px;
    border: 1px solid var(--border-color-d); border-radius: var(--flo-radius); background: var(--flo-card);
    font-size: 14px; font-weight: 600; line-height: 20px; color: var(--flo-ink-1);
}
.flo-bulk__fold > summary.flo-btn-text::after { position: static; }
.flo-bulk__fold > summary.flo-btn-text:hover { background: var(--flo-line-soft); }
.flo-bulk__fold[open] > summary.flo-btn-text { background: var(--flo-card); border-color: var(--flo-select-border); }
.flo-bulk__fold > .flo-form { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--flo-line); }
@media (max-width: 640px) {
    .flo-bulk__fold > summary.flo-btn-text { position: static; margin-top: 8px; width: 100%; justify-content: center; }
}
.flo-main .flo-note-input { max-width: 720px; } /* 🆕 2026-10-12 (#1644) 메모 칸도 본문 폭 상한(720)을 따른다 */

/*
 | 🆕 **템플릿 편집 화면 다듬기** (2026-10-12 · 이슈 #1651 · 🧑 「컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」).
 | 🔑 갈래 탭 줄과 첫 절 제목 사이를 24 비운다(붙어 있었다).
 | 🔻 저장 줄을 화면 아래에 붙이는 안은 본문 글자를 가려 접었다.
 */
.flo-main .flo-split__main > .flo-panetabs { margin-bottom: 24px; }

/*
 | 🆕 2026-10-12 (#1648) 위저드 단계 표시를 한 덩이로 줄인다.
 | 🧑 *"컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯"* · 점검: 등록 · 진행 두 줄이 이름표 줄 + 칸 줄로 190px 를 썼고, 진행 줄의 다음 칸이 굵은 보라 테두리라
 |    채움 칸(지금)과 함께 「지금」이 둘로 읽혔다.
 | 🔑 861px 이상에서 이름표(등록 · 진행)를 칸 줄의 왼쪽 칸으로 옮긴다 · 칸 높이 36 · 줄 사이 8. 정보는 하나도 빼지 않는다.
 | 🔑 지금 표시는 채움 한 칸뿐이다. 진행 줄의 다음 업무 모양은 #1560 그대로다(아래 되돌림 주석 참조).
 | 🔑 860 이하는 기존 접힘 줄(`flo-wizard-steps__bar`)이 맡으므로 건드리지 않는다.
 | 🚫 위 줄 · 진행 줄의 규칙 문자열을 고치지 마라 · `CampaignJourneyStepsTest` 가 기존 규칙을 그대로 고정한다. 여기서는 덧입히기만 한다.
 */
@media (min-width: 861px) {
    /* 🔻 2026-10-12 (#1653) ~~이름표 칸 + 칸 줄 두 열 격자~~ 진행 줄과 이름표를 걷어 칸 줄 하나뿐이라 한 열로 둔다 */
    .flo-main .flo-wizard-steps__body {
        display: grid; grid-template-columns: minmax(0, 1fr);
        row-gap: 8px; align-items: center; margin-bottom: 8px;
    }
    .flo-main .flo-wizard-steps__body > .flo-steps--wizard { margin: 0; }
    /* 🔻 2026-10-12 (#1653) ~~진행 줄 아래 안내 문단(p.flo-t-caption)의 전폭 규칙~~ 안내를 걷었다 */
}
.flo-main .flo-steps--wizard .flo-step { min-height: 36px; padding: 0 12px; }
/* 🔻 2026-10-12 (#1648) 진행 줄 「다음」 칸의 옅은 보라 바탕 변경을 되돌렸다. 🧑 #1560 (*"둘 다 고침 (권장)"*)의 굵은 보라 테두리는
   사용자가 직접 고른 모양이라 에이전트 판단으로 뒤집지 않는다(점검의 혼동 지적은 사용자 요청이 아니었다). 모양은 위쪽 #1560 규칙 그대로다. */
/* 진행 줄은 칸 수가 적어도 위 줄과 같은 칸 폭을 쓴다(auto-fill) · 위 줄과 세로로 가지런하다 */
.flo-main .flo-steps--wizard ~ .flo-steps--wizard { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/*
 | 🆕 2026-10-12 (#1648) 판 제목 옆 건수(`x-section` 의 `count`). 제목과 같은 줄 기준선에 13/400 보조색으로 선다.
 */
.flo-sec__titleline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.flo-sec__count { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); font-variant-numeric: tabular-nums; }

/*
 | 🆕 2026-10-12 (#1648) 기본 정보 항목 리듬 · 이름표, 칸, 보조 줄(글자 수), 다음 항목까지 24.
 | 🧑 *"캠페인 목표 아래 글자 수 제한이랑 작성자 쪽 구분 안감"*
 | 🚨 직전까지 항목 사이가 16이고 글자 수 표시가 칸 아래 8 + 줄 사이 8 이라, 표시가 칸보다 다음 항목(작성자)에 가까웠다.
 | 🔑 항목 사이 24 · 글자 수 표시는 칸에 붙이고(4) 칸 오른쪽 끝에 맞춘다(660 안).
 */
.campaign-form-group-wrap.flo-cam-form .form-group { margin-bottom: 24px; }
.flo-cam-form .form-field > :is(textarea, input)[data-flo-charcount] + [data-flo-charcount-out],
.flo-cam-form .flo-cam-memo__body > textarea[data-flo-charcount] + [data-flo-charcount-out] {
    flex: 1 1 100%; margin: -4px 0 0; max-width: 660px; text-align: right; font-variant-numeric: tabular-nums; /* 🔻 2026-10-14 (#1738 · 묶음 I) 이름 칸(input)도 같은 자리 · 칸 밖 오른쪽에 떠 있었다 */
}
/* 🆕 2026-10-14 (#1738 · 묶음 I) 내부 메모 칸은 줄 사이 간격이 없는 묶음이라 -4 를 받으면 칸에 1 로 붙었다. 칸 아래 4 */
.flo-cam-form .flo-cam-memo__body > textarea[data-flo-charcount] + [data-flo-charcount-out] { margin-top: 4px; }

/*
 | 🆕 2026-10-12 (#1647 · 🧑 「메모쪽도 전체적인 컨텐츠 레이아웃 수정」) 메모 절.
 | 🔑 적어 둔 메모는 줄 사이 선 대신 옅은 바탕 한 장씩이다(작성자 · 시각은 아래 줄 옅은 글자). 입력 칸 아래 단추 줄과 지난 메모 사이 선은 그대로다(#1587).
 */
.flo-main ul.flo-notes__list > li { padding: 12px 16px; border-bottom: 0; border-radius: var(--flo-radius); background: var(--flo-bg); }

/*
 | 🆕 2026-10-12 (#1648) 인플루언서 담기 · 「인플루언서 찾기」 판의 세 갈래 줄(검색 · ID로 직접 추가 · 관심목록에서 불러오기).
 | 🧑 *"인플루언서 찾기랑 아이디 검색 컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯"*
 | 🔑 줄마다 왼쪽 이름(14/600) · 오른쪽 조작이다. 줄 사이 24 · 선 없음(#1641). 조작 첫 줄은 높이 40 에 이름 글줄을 맞춘다.
 | 🔑 860 이하는 이름이 조작 위에 선다.
 */
.flo-roster-add { position: relative; }
.flo-roster-add__row { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; } /* 🔻 2026-10-14 (#1739 · 묶음 J) ~~200 + 24(입력 시작 224)~~ → 128 + 12(140). ① 기본 정보의 이름표 칸 140 과 같아 단계를 넘겨도 입력 시작선이 85px 움직이지 않는다 */
.flo-roster-add__row + .flo-roster-add__row { margin-top: 24px; }
.flo-main .flo-roster-add__name { margin: 0; padding-top: 10px; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); word-break: keep-all; }
/*
 | 🆕 2026-10-16 (#1801) 도움말 단추를 `<h3>` 밖으로 옮긴 줄은 이름 칸이 바깥 묶음(`div.flo-roster-add__name`)이고 제목 글자는 안쪽 `<h3>` 이 갖는다.
 |    `.flo-main h3` 의 16/700 · 위아래 여백을 받지 않고 이름 칸의 글자(14/600 · 줄 20)를 그대로 받는다. 한 줄 글자로 서서 단추가 직전처럼 이름 바로 뒤에 붙는다.
 | ⚠️ 크기는 바로 위 이름 칸과 같은 14 를 숫자로 적는다 · `inherit` 는 13px 바닥 검사(`MinReadableFontSizeGuardTest`)가 증명하지 못해 실패시킨다.
 */
.flo-main .flo-roster-add__name > h3 { display: inline; margin: 0; font-size: 14px; font-weight: inherit; line-height: inherit; color: inherit; }
/* 🆕 2026-10-14 (#1739 · 묶음 J) 위쪽 보정은 입력칸(40) 옆에서만 10 이다. 글 값 옆은 0, 작은 단추(32) 옆은 (32 - 20) / 2 = 6 이다. 글 값 옆 이름표가 10px 내려가 있었다 */
.flo-main .flo-roster-add__name:has(+ .flo-roster-add__body > :first-child:is(p, ul, ol, dl)) { padding-top: 0; }
.flo-main .flo-roster-add__name:has(+ .flo-roster-add__body > form:first-child > .basic-btn.mini) { padding-top: 6px; }
.flo-roster-add__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.flo-roster-add__body > * { margin: 0; }
.flo-roster-add__body > form { margin: 0; }
.flo-roster-add__body .flo-find-form { width: 100%; max-width: 520px; align-items: center; }
.flo-roster-add__body .flo-find-form input { height: var(--flo-control-h); }
.flo-roster-add__body > .flo-pickset,
.flo-roster-add__body > form > div { width: 100%; }
@media (max-width: 860px) {
    .flo-roster-add__row { grid-template-columns: minmax(0, 1fr); }
    .flo-main .flo-roster-add__name { padding-top: 0; }
}
/* 🆕 2026-10-12 (#1650) 이름 칸 앞의 순위 · 숫자 칩 없이 회색 숫자 하나(고정 24 폭, 4px 격자)다 */
/* 🔻 2026-10-15 (#1784 · 🧑 「인플루언서 앞에 숫자가 뭔지 모르겟음 분리해야하지않나」) ~~`.flo-rank-row` · `.flo-rank`~~ 를 걷었다 · 순위는 머리가 「순위」인 첫 열(`col="num"`)이라 이 모양을 부르는 화면이 없다 */
/* 🆕 2026-10-12 (#1643 후속) 요약 여섯 칸은 1599 이하에서 세 칸 두 줄이다(🔻 ~~1440 미만~~ → 1600 미만). 1366 · 1280 에서 이름표 · 상품명 · 덧말이 말줄임이 되지 않게 한다 */
@media (max-width: 1599px) { .flo-kpis--summary[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 🔻 641~700 은 ~~한 칸~~ → 두 칸 세 줄이다(일반 지표 판의 700 이하 한 칸 규칙 `!important` 를 같은 `!important` 로 덮는다). 640 이하는 한 줄 요약이다 */
@media (max-width: 700px) { .flo-kpis.flo-kpis--summary[data-cols="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* 🔻 2026-10-12 (#1649 검토) 도달한 단계 점은 채운 보라 · 아직인 단계는 빈 회색 점이다. 메모가 없을 때는 위 선 없이 여백만 둔다(#1638 규칙 B · 선이 글 폭 720 에서 끊겼다) */
.flo-main p.flo-notes__list { border-top: 0; padding-top: 0; }
@media (min-width: 641px) {
    .flo-folder-row:has(> td .flo-name-edit[open]) { height: 76px; } /* 이름 칸 + 글자 수 표시(`flo-field-check.js`)가 덮개 줄 안에 들어가는 높이 */
}

/*
 | 🆕 2026-10-12 (#1648) 제안 메일 작성 · 칸 제목과 칸을 가른다.
 | 🧑 *"제목이랑 아래 내용이랑 구분도 안되고 입력창이 너무 작아보이지않나?"*
 | 🚨 직전까지 칸 이름이 13/600 이고 그 아래 안내 · 칸이 한 덩이로 붙어 있었으며, 칸 사이는 선으로만 나뉘었다(칸 높이 36 안팎).
 | 🔑 칸 이름 14/600 → 안내 13 보조색(4) → 칸(8 띄움). 한 줄 칸 높이 40 · 장문 칸 최소 5줄(120). 칸 묶음 사이 24 · 선 없음(#1641).
 | 🔑 범위는 제안 편집 칸(`#flo-proposal-editor`)뿐이다. 🔻 처음에는 `.flo-split__main` 으로 걸어 템플릿 편집 · 참여 폼 세트 편집 화면까지 닿았다(독립 검토 지적).
 */
#flo-proposal-editor .flo-area__block { padding-bottom: 0; margin-bottom: 24px; border-bottom: 0; }
#flo-proposal-editor .flo-area__row .flo-t-label { font-size: 14px; line-height: var(--flo-lh-ui); }
#flo-proposal-editor .flo-area__hint { margin: 4px 0 0; }
#flo-proposal-editor .flo-area__block > :is(input.flo-area__input, textarea.flo-area__input, .note-editor, [data-flo-cs-rows], .flo-variable-inserts) { margin-top: 8px; }
#flo-proposal-editor input.flo-area__input { height: var(--flo-control-h); padding: 0 12px; }
#flo-proposal-editor [data-flo-cs-row] :is(select, input[type="text"]) { height: var(--flo-control-h); }
#flo-proposal-editor label.flo-t-body.block { margin: 0 0 8px; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); word-break: keep-all; }
#flo-proposal-editor label.flo-t-body.block > .flo-t-caption { font-weight: 400; }
#flo-proposal-editor :is(input[type="text"], select):not(.flo-area__input, .flo-sr-only) { min-height: var(--flo-control-h); }
#flo-proposal-editor textarea.w-full { min-height: 120px; }

/*
 | 🆕 2026-10-12 (#1648) 발송한 제안 메일 · 읽기 전용 미리보기 한 장. 항목 목록 아래 24 에서 탭이 시작한다.
 */
.flo-locked-proposal__preview { margin-top: 24px; }
.flo-locked-proposal .flo-preview__tabs { margin-bottom: 12px; }

/*
 | 🆕 **템플릿 편집 화면 항목 리듬 · 제안 단계 항목과 같은 짜임** (2026-10-12 · 이슈 #1651 · 🧑 「컨텐츠 레이아웃 수정이랑 디자인 고도화 필요할듯」).
 | 🔑 이 블록은 겉모양만 만진다 · 칸 · 이름 · 값 · 보내는 곳은 그대로다(보내는 값은 전후 대조했다).
 | 🔑 짜임은 캠페인 기본 정보 항목(#1648)과 같다: 이름표 14/600 → 칸(폭 660 안) → 글자 수(칸에 붙여 오른쪽 끝) → 도움말 4 → 다음 항목까지 24.
 | 🔑 절 사이는 선 하나와 위아래 24 다(판 한 겹 · 상자 안 상자 없음). 절 제목 아래 설명은 16 뒤에 칸이 시작한다.
 | 🔑 편집기 틀은 내용선 전체 폭이다 · 칸(660)보다 넓은 것은 본문 편집 면이라서다.
 | 🔻 2026-10-19 (#1799 · 🧑 「그대로」) 위 두 줄의 칸 상한 660 은 640 이다. 절마다 두 열(#1666 · 아래 `.flo-tsec__body` 640)이 덮어
 |    화면에는 640 이 그려졌고 상한만 두 값으로 적혀 있었다. 한 값(640)으로 적는다. 본문 편집기(`flo-field--longform`)는 그대로 상한이 없다(🧑 #969).
 |    ⚠️ 두 열 밖에 있던 칸(「시딩 참여 페이지 입력 폼」 탭 · 참여 질문 칸)은 660 이 그려졌고 이제 640 이다(같은 폼의 짧은 칸과 같은 끝선).
 | 🔑 저장 줄은 다른 편집 화면과 같다 · 오른쪽 끝에 「취소」 다음 「템플릿 저장」.
 */
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-panetabs__panel > .flo-subcard { margin: 0; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-panetabs__panel > .flo-subcard ~ .flo-subcard { margin-top: 24px; padding-top: 24px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-subcard > h2.flo-t-section { margin-bottom: 4px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-subcard > .flo-area__hint { margin-bottom: 16px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-subcard > .mail-vars { margin-bottom: 16px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-field:not(.flo-field--longform) { margin-bottom: 24px; max-width: 640px; } /* 🔻 2026-10-19 (#1799) ~~660~~ → 640 · 두 열 칸과 한 값 */
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-subcard > .flo-field:last-child { margin-bottom: 0; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-field--longform { margin-bottom: 8px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-field [data-flo-charcount-out] { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.flo-main .flo-split__main:has(> form#flo-template-form) > .flo-form__actions { margin-top: 24px; }

/* 🆕 2026-10-12 (#1648) 제안 편집 칸 · 안내 문단 바로 뒤에 칸 묶음이 오면 20 을 띄운다(칸 묶음 위 여백을 걷은 대신) */
#flo-proposal-editor :not(.flo-area__block) + .flo-area__block { margin-top: 20px; }

/* 🆕 2026-10-12 (#1648) 절 카드 바로 뒤에 오는 알림은 카드와 16 을 띄운다(카드 아래 여백은 마지막 카드가 0 이라 붙었다) */
.flo-main .cont-sec > .flo-sec + .flo-inline-alert { margin-top: 16px; }

/*
 | 🆕 2026-10-12 (#1657 · 🧑 「값이 같으면 열 숨김, 적으면 필터 접기 (권장)」) 짧은 목록의 검색 필터 판은 접어 둔다.
 | 🔑 판 머리가 곧 펼침 손잡이다. 꺾쇠는 접힘칸(`flo-fold`)과 같은 그림이고, 펼치면 위로 뒤집힌다.
 | 🔑 접힌 판은 머리 한 줄이라 아래 여백을 걷고, 펼친 판은 다른 판 머리와 같은 16 을 준다.
 */
.flo-main .flo-panel--fold > .flo-panel__fold-toggle {
    display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; margin: 0; min-height: 24px;
}
.flo-main .flo-panel--fold > .flo-panel__fold-toggle::-webkit-details-marker { display: none; }
.flo-main .flo-panel--fold > .flo-panel__fold-toggle::marker { content: ''; }
.flo-main .flo-panel--fold > .flo-panel__fold-toggle::after {
    content: ''; display: inline-block; width: 16px; height: 16px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
}
.flo-main .flo-panel--fold[open] > .flo-panel__fold-toggle { margin-bottom: 16px; }
.flo-main .flo-panel--fold[open] > .flo-panel__fold-toggle::after { transform: rotate(180deg); }
.flo-main .flo-panel--fold > .flo-panel__fold-toggle:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 4px; border-radius: 4px; }

/*
 | 🆕 2026-10-12 (#1657) 작성자 열이 모두 같은 값이라 그려지지 않을 때(`UniformColumn`) 열이 하나 줄어, 번호로 매긴 폭이 한 칸씩 밀린다.
 | 🔑 순매출(108)이 여섯째, 관리(113)가 일곱째로 온다. 위 폭 값은 그대로 두고 이 한 벌만 덧쓴다.
 */
.flo-cam-list.flo-cam-list--no-author thead th:nth-child(6) { width: 108px; }
/* 🔻 2026-10-29 (#1915) 관리 ~~113~~ → 144 · 근거는 위 「캠페인 목록 관리 칸 단추」 절 */
.flo-main .flo-cam-list.flo-cam-list--no-author thead th:nth-child(7) { width: 144px; }
.flo-cam-list.flo-cam-list--no-author tbody td:nth-child(7) .flo-btn { white-space: nowrap; }

/*
 | 🆕 2026-10-12 (#1655) 목록형 검색에서 정렬 칩 줄을 걷는다(표 머리의 정렬 링크가 같은 일을 한다). 줄과 칩 묶음에 `hidden` 이 걸린다.
 */
.flo-main .flo-filtergrid__row[hidden] { display: none; }
.flo-main .flo-pickset[hidden] { display: none; }

/*
 | 🆕 2026-10-12 (#1657) 템플릿 목록 「기본」 열을 걷고 이름 옆 배지로 옮겼다. 관리 칸에 「기본 지정」이 들어와 폭을 늘린다(268 → 352 · 단추 하나 약 76 + 간격 8).
 | 🔑 기본 배지는 이름 줄 끝에 선다. 보라 한 단계 옅은 면 + 글자 보라 · 채움 단추와 겹쳐 보이지 않게 한다.
 */
.flo-main .flo-template-list thead th.flo-th--acts { width: 352px; }
.flo-main .flo-template-default-badge {
    display: inline-block; margin-right: 8px; /* 🔻 2026-10-12 (#1662) ~~margin-left: 8px~~ 이름 앞으로 옮겼다 */ padding: 0 8px; border-radius: 4px;
    font-size: 13px; line-height: 20px; font-weight: 600;
    background: var(--flo-violet-100); color: var(--flo-violet-600); vertical-align: middle;
}

/* 🆕 2026-10-12 (#1657) 템플릿 목록 관리 칸 · 기본인 행의 「기본 지정」 빈 자리. 단추(약 74)와 같은 폭이라 수정 · 복제 · 삭제가 행마다 같은 자리에 선다 */
/* 🔻 2026-10-12 (#1662) ~~`.flo-row-actions__slot` 빈 자리 규칙~~ 걷었다. 기본인 행도 눌리지 않는 「기본 지정」 단추를 그린다 */
/* 🆕 2026-10-12 (#1657) 작성자 열이 없으면 여섯째 칸은 순매출이다. 작성자용 줄바꿈 규칙(여섯째 칸)을 되돌린다 */
.flo-cam-list.flo-cam-list--no-author tbody td:nth-child(6) { overflow-wrap: normal; }

/*
 | 🆕 2026-11-03 (소규모 이슈 · 🧑 「캠페인 임시저장 선택한 것만 한꺼번에 삭제」) 임시저장 탭은 맨 앞에 선택 열(48 · `flo-col--pick`)이 선다.
 | 🔑 번호로 매긴 폭이 한 칸씩 밀린다. 위 값은 그대로 두고 이 한 벌만 덧쓴다(작성자 열이 빠질 때와 같은 꼴).
 |    값은 위 근거 그대로다 · 유형 94 · 상태 90 · 진행 요약 120 · 기간 148 · 작성자 104 · 순매출 108 · 관리 144.
 | 🔑 이름 칸(둘째)은 폭을 주지 않는다 · 남는 자리를 받는 유일한 열이다(위 #1018 근거). 머리는 접히게 둔다.
 | 🔑 1200 이상에서도 기간은 148 이다(작은 줄은 둘째 줄). 넓힌 240 을 그대로 두면 선택 열 48 만큼 이름 칸이 줄어,
 |    작성자 열이 있을 때 1280 창 이름 칸이 글자를 담지 못한다. 진행 중 · 종료 탭의 한 줄 기간(#1784)은 그대로다.
 | 🔑 이 묶음은 위 규칙과 셈이 같거나 높고 파일 뒤에 있어 이긴다 · 🚫 위로 옮기지 마라.
 */
.flo-cam-list.flo-cam-list--pick thead th:nth-child(2) { width: auto; white-space: normal; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(3) { width: 94px; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(4) { width: 90px; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(5) { width: 120px; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(6) { width: 148px; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(7) { width: 104px; }
.flo-cam-list.flo-cam-list--pick thead th:nth-child(8) { width: 108px; }
.flo-main .flo-cam-list.flo-cam-list--pick thead th:nth-child(9) { width: 144px; }
.flo-cam-list.flo-cam-list--pick tbody td:nth-child(9) .flo-btn { white-space: nowrap; }
.flo-cam-list.flo-cam-list--pick tbody td:nth-child(6) { overflow-wrap: normal; }
.flo-cam-list.flo-cam-list--pick tbody td:nth-child(7) { overflow-wrap: anywhere; }
/* 🔑 작성자 열까지 빠지면 일곱째가 순매출, 여덟째가 관리다 */
.flo-cam-list.flo-cam-list--pick.flo-cam-list--no-author thead th:nth-child(6) { width: 148px; }
.flo-cam-list.flo-cam-list--pick.flo-cam-list--no-author thead th:nth-child(7) { width: 108px; }
.flo-main .flo-cam-list.flo-cam-list--pick.flo-cam-list--no-author thead th:nth-child(8) { width: 144px; }
.flo-cam-list.flo-cam-list--pick.flo-cam-list--no-author tbody td:nth-child(8) .flo-btn { white-space: nowrap; }
.flo-cam-list.flo-cam-list--pick.flo-cam-list--no-author tbody td:nth-child(7) { overflow-wrap: normal; }
@media (min-width: 1200px) {
    .flo-cam-list.flo-cam-list--pick .flo-period__note { display: block; margin-left: 0; padding-left: 0; border-left: 0; }
}
/*
 | 🔑 해를 넘기는 기간(「2026.12.20 ~ 2027.01.15」 약 160)은 148 보다 길다 · 「~」 뒤에서 접는다(독립 검토 실측 · 1280 에서 23.6px 넘쳤다).
 | 🚨 모든 폭에 건다. 1199 이하를 맡는 위 `.flo-num.flo-period__range` 규칙은 셈이 같은 `.flo-main .whitespace-nowrap` 이 파일 뒤에 있어
 |    지고 있었다(1024 · 1199 실측 35.6px 넘침). 이 줄은 셈이 높아 이긴다. 다른 탭의 그 규칙은 이번 변경 밖이라 손대지 않았다.
 | 🔻 2026-11-03 (#1975) 그 규칙도 셈을 높여 이제 1199 이하에서 이긴다. 이 줄은 1200 이상(이 탭은 기간 열이 148 그대로)을 위해 남는다.
 */
.flo-cam-list.flo-cam-list--pick .flo-num.flo-period__range { white-space: normal; }
/*
 | 🔑 휴대폰 카드(640 이하)는 왼쪽 띠(44)가 선택 상자의 누름 자리다(공용 카드 규칙 · `flo-pick-cell`).
 | 🚨 캠페인 카드는 자기 안여백(16 · #1739)이 공용 규칙의 `padding-left: 44px` 를 덮고 줄에 `position` 이 없어,
 |    상자가 둘째 줄(기간) 글자 위에 겹쳤다(390 실측). 이 카드에서만 줄을 기준 자리로 삼고 띠만큼 비운다.
 */
@media (max-width: 640px) {
    .flo-main .flo-cam-cards.flo-cam-list.flo-cam-list--pick.flo-table-block--stack .common-table > tbody > tr:has(> td.flo-col--pick):not(:has(> td[colspan])) {
        position: relative; padding-left: 48px;
    }
}

/*
 | 🆕 2026-10-12 (#1660 · 🧑 「모바일에서 필터가 최상단보단 열고 닫고 하는게 낫지않나?」) 좁은 폭의 검색 필터 여닫기.
 | 🔑 손잡이(`.flo-filter-toggle`)는 640 이하에서 판 머리를 대신한다. 스크립트가 `hidden` 을 풀 때만 서고, 넓은 폭에서는 늘 감춘다.
 | 🔑 접히는 것은 입력 줄(`.flo-filter-body.is-folded`)뿐이다. 적용된 조건 칩 줄은 그대로 보인다.
 */
.flo-main .flo-filter-toggle { display: none; }
.flo-main .flo-filter-toggle[hidden] { display: none; }
@media (max-width: 640px) {
    /* 🔻 2026-10-12 (#1660 검토) ~~머리를 `display: none`~~ → 손잡이가 선 때만, 눈에서만 감춘다(제목 탐색에 「검색 필터」가 남는다 · 스크립트가 없으면 그대로 보인다) */
    .flo-main .flo-search-filter:has(.flo-filter-toggle:not([hidden])) > .flo-panel__head {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
    .flo-main .flo-filter-toggle:not([hidden]) {
        display: flex; align-items: center; gap: 4px; width: 100%; min-height: 32px; padding: 0; margin: 0 0 12px;
        border: 0; background: transparent; cursor: pointer; text-align: left; color: var(--flo-ink-1);
        font-family: inherit; font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card);
    }
    .flo-main .flo-filter-toggle__count { font-size: 13px; font-weight: 400; color: var(--flo-ink-3); } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
    .flo-main .flo-filter-toggle::after {
        content: ''; display: inline-block; width: 16px; height: 16px; flex: none; /* 🔻 2026-10-14 (#1738 · 묶음 E) ~~margin-left: auto(오른쪽 끝)~~ → 접는 판 머리와 한 모양 「제목 + 화살표」 · 화살표는 글 바로 뒤 4 */
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7684' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 16px 16px;
    }
    .flo-main .flo-filter-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
    .flo-main .flo-filter-toggle:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 4px; border-radius: 4px; }
    .flo-main .flo-filter-body.is-folded { display: none; }
}

/*
 | 🆕 2026-10-12 (#1660 · 🧑 「관리 항목 밑에 소리 버튼은 뭐지?」) 행 그림 단추의 이름표.
 | 🔑 `title` 은 늦게 뜨고 터치에서는 안 뜬다. 마우스를 올리거나 초점이 오면 바로 뜨는 이름표를 `data-tip` 으로 단추 위에 세운다.
 | 🔑 이름(`aria-label`)은 그대로라 낭독기는 이름표를 따로 읽지 않는다(`::after` 는 장식이다).
 */
.flo-main .flo-search-result .flo-row-acts__btn[data-tip] { position: relative; }
.flo-main .flo-search-result .flo-row-acts__btn[data-tip]::after {
    content: attr(data-tip); position: absolute; right: calc(100% + 4px); top: 50%; transform: translateY(-50%); z-index: 5; /* 🔻 위쪽은 표 머리 줄이 잘랐다 → 단추 왼쪽 */
    padding: 4px 8px; border-radius: 4px; background: var(--flo-ink-1); color: #fff;
    font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption, 18px); white-space: nowrap; /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ */
    opacity: 0; visibility: hidden; pointer-events: none;
}
.flo-main .flo-search-result .flo-row-acts__btn[data-tip]:hover::after,
.flo-main .flo-search-result .flo-row-acts__btn[data-tip]:focus-visible::after { opacity: 1; visibility: visible; }

/*
 | 🆕 2026-11-04 (소규모 이슈 · 🧑 「③ 10명이 단계별로 섞여 있을 때 (안 A + 정리안 1) 이거로 해줘」) 제안 응답 관리 「다음 업무」 면.
 | 🔑 요약 화면의 「다음 업무」 면(`flo-nw__lead`)과 같은 옅은 보라 면 · 윗줄 13/600 · 제목 22/700(860 이하 16/700)이다.
 | 🔑 할 일 줄은 흰 상자 안의 줄(사이 가는 선)이다. 줄 안은 이름 · 인원 링크 · 한 문장이고 오른쪽에 단추가 선다.
 | 🔑 좁은 폭에서는 단추가 문장 아래로 내려간다(`flex-wrap`).
 */
/* 🔻 2026-11-04 (🧑 「너가 만든 이 디자인도 아니야」) 시안 ③ 그대로 · 옅은 보라 면에 테두리, 윗줄(보라 13/600)과 제목이 한 줄이다.
   시안의 18px 제목 · 14px 간격은 화면 눈금(125-) 밖이라 가장 가까운 눈금 16/700 · 12 로 그린다(TypeScaleGuardTest · AlignmentGridGuardTest) */
.flo-main .flo-resp-next { padding: 20px; border: 1px solid var(--flo-violet-200); border-radius: var(--flo-radius-card); background: var(--flo-violet-50); }
.flo-main .flo-resp-next__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.flo-main .flo-resp-next__eyebrow { margin: 0; font-size: 13px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-primary); }
.flo-main .flo-resp-next__title { margin: 0; font-size: 16px; font-weight: 700; line-height: var(--flo-lh-card); color: var(--flo-ink-1); }
.flo-main .flo-resp-next > .flo-t-body { margin: 8px 0 0; }
.flo-main .flo-resp-next__list { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card); background: var(--flo-card); }
.flo-main .flo-resp-next__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.flo-main .flo-resp-next__item + .flo-resp-next__item { border-top: 1px solid var(--flo-line); }
.flo-main .flo-resp-next__text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.flo-main .flo-resp-next__name { margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-main .flo-resp-next__count { color: var(--flo-primary); }
.flo-main .flo-resp-next__desc { margin: 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
.flo-main .flo-resp-next__meta { margin: 12px 0 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
.flo-main .flo-resp-progress-note { margin: 12px 0 0; }
/*
 | 🆕 2026-11-04 (🧑 「배지도 이상해」) 「현재 상황」의 할 일 배지 · 시안 ③ 그대로 둥근 사각(모서리 6 · 안여백 4/10 · 13/600)이다.
 | 🔑 색은 셋이다 · 점검 대기 보라(`--review`) · 아이디 미등록 · 조건협의 · 읽고 답하지 않음 주황(`--warn`) · 반송 빨강(`--fail`).
 | 🚫 앱 공용 등급 배지(`flo-badge[data-grade]`)를 여기에 쓰지 마라 · 진행 초록과 주의 노랑이 섞여 시안과 다른 화면이 됐다.
 */
.flo-main .flo-todo-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption); white-space: nowrap; }
.flo-main .flo-todo-badge--review { background: var(--flo-primary-soft); color: var(--flo-primary); }
.flo-main .flo-todo-badge--warn { background: #fff4e5; color: #9a5b00; }
.flo-main .flo-todo-badge--fail { background: #fdecec; color: #b42318; }
/* 🆕 2026-11-04 시안 ③ 그대로 · 진행 현황 칸에는 아이콘을 두지 않고, 점검 대기가 있으면 「콘텐츠 점검」 칸을 보라 2px 테두리로 강조한다 */
.flo-main .flo-kpi.flo-kpi--focus { border: 2px solid var(--flo-primary); padding: calc(var(--flo-card-inset) - 2px); background: var(--flo-violet-50); }
.flo-main .flo-kpi.flo-kpi--focus .flo-kpi__label,
.flo-main .flo-kpi.flo-kpi--focus .flo-kpi__note { color: var(--flo-primary); font-weight: 600; }
/*
 | 🆕 2026-11-05 (#1986) 누르는 지표 칸(`x-kpi` 의 `href`) · 모든 캠페인 콘텐츠 점검의 상태별 숫자 카드.
 | 🔑 칸 전체가 링크다. 지금 보고 있는 칸은 위 `flo-kpi--focus`(보라 테두리)이고, 숫자도 보라로 바꿔 어느 칸인지 숫자로도 보인다.
 */
.flo-main a.flo-kpi--link { display: block; color: inherit; text-decoration: none; transition: border-color .12s, background-color .12s; }
.flo-main a.flo-kpi--link:not(.flo-kpi--focus):hover { border-color: var(--flo-violet-200); background: var(--flo-violet-50); }
.flo-main a.flo-kpi--link:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
.flo-main a.flo-kpi--link.flo-kpi--focus .flo-kpi__value { color: var(--flo-primary); }

/*
 | 🆕 2026-11-04 (소규모 이슈 · 🧑 「안 A.」 · 정본 plan/121- 4-c) 콘텐츠 점검 화면.
 | 🔑 필수 해시태그는 한 줄 띠다 · 이름표 · 칩 · 안내가 같은 높이 가운데 정렬(🧑 「해시태그 정렬도 안 맞고」).
 | 🔑 「게시물」 칸에서 주소를 저장 · 수정한다 · 저장한 주소는 링크와 「수정」이고, 「수정」을 펴면 같은 폼이 선다.
 | 🔑 ~~일괄 처리 줄은 옅은 보라 면 · 「N명 선택」 · 「점검 완료」 · 안내(캠페인 목록 일괄 삭제 줄과 같은 차례).~~
 |    🔻 2026-11-05 (소규모 이슈) 일괄 처리 줄(`flo-bulk-bar`)을 걷고 아래 「선택 막대」(`flo-sel-bar`)로 옮겼다 · 그 규칙 넷도 함께 걷었다.
 */
.flo-main .cont-sec.flo-tag-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 20px; }
.flo-main .flo-tag-strip__label { font-size: 13px; line-height: var(--flo-lh-caption); font-weight: 600; color: var(--flo-ink-2); }
.flo-main .flo-tag-strip__note { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/*
 | 🆕 **선택 막대** (2026-11-05 · #1984 · 🧑 안 C) · 캠페인 목록 임시저장 탭.
 | 🔑 고르기 전에는 닫혀 있다(`hidden`). 고르면 판 머리(`x-panel` 의 `selection` 자리) 안에서 열리고, 같은 머리의 제목 · 건수 · 행동 자리를 감춘다.
 |    머리 줄이 막대로 바뀌므로 표가 밀리지 않는다 · 높이는 머리 줄과 같은 40(`--flo-control-h`)이다.
 | 🔑 면은 콘텐츠 점검 일괄 처리 줄(`flo-bulk-bar`)과 같은 옅은 보라 · 테두리 · 반경 8 이다.
 | 🆕 2026-11-05 (소규모 이슈) 표 부품 건수 줄(`x-data-table` 의 `selection` 자리)에도 선다 · 콘텐츠 점검.
 |    그 줄에서는 왼쪽 「전체 N건」만 감추고 오른쪽 도구(CSV · 개수)는 남긴다. 막대가 있는 줄은 높이를 40 으로 잡아 열려도 표가 밀리지 않는다.
 */
.flo-main .flo-panel__head:has(> .flo-sel-bar:not([hidden])) > :not(.flo-sel-bar) { display: none; }
.flo-main .flo-sel-bar { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; box-sizing: border-box; min-height: var(--flo-control-h); padding: 0 16px; border: 1px solid var(--flo-violet-200); border-radius: 8px; background: var(--flo-violet-50); }
.flo-main .flo-sel-bar[hidden] { display: none; }
.flo-main .flo-sel-bar__count { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flo-main .flo-table-block__count:has(> .flo-sel-bar) { min-height: var(--flo-control-h); }
.flo-main .flo-table-block__count:has(> .flo-sel-bar:not([hidden])) > .flo-panel__lead { display: none; }
.flo-main .flo-table-block__count > .flo-sel-bar { flex: 1 1 auto; }
/* 🆕 2026-11-05 (소규모 이슈) 상태 칩 줄 · 오른쪽에 고를 수 없는 상자의 까닭 한 줄(콘텐츠 점검) */
.flo-main .flo-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.flo-main .flo-status-row > p { margin: 0; }
/* 🔑 640 이하에서는 「현재 페이지 전체 선택」이 판 머리 행동 자리에 함께 선다 · 줄을 바꾸지 않으면 개수 칸이 판 밖으로 17px 넘쳤다(390 실측) */
@media (max-width: 640px) {
    .flo-main .flo-panel__actions:has(> .flo-selall--phone) { flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
    .flo-main .flo-sel-bar { padding-block: 8px; } /* 막대가 두 줄로 접히면 위아래가 테두리에 붙는다 */
}
/* 🔑 「인플루언서」 칸에 폭을 준다 · 남는 자리가 「게시물」 칸(입력란 + 「저장」)으로 간다(이름 열은 폭 없이 남는 자리를 나눈다 · 2937행 규칙) */
.flo-main .flo-content-review-table .common-table th.flo-col--pick + th.flo-col--name { width: 180px; }
.flo-main .flo-url-cell { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.flo-main .flo-url-cell:has(> .flo-url-edit[open]) > a { display: none; }
.flo-main .flo-url-edit[open] { flex: 1 1 100%; }
.flo-main .flo-url-edit__toggle { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px; border-radius: var(--flo-radius); background: var(--sig-neutral-bg); font-size: 13px; font-weight: 600; color: var(--flo-ink-2); cursor: pointer; list-style: none; }
.flo-main .flo-url-edit__toggle::-webkit-details-marker { display: none; }
.flo-main .flo-url-edit[open] > .flo-url-edit__toggle { margin-bottom: 8px; }
.flo-main .flo-url-form { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0; }
.flo-main .flo-url-form > .flo-url-form__input { flex: 1 1 160px; min-width: 0; height: var(--flo-control-h-sm); } /* 🔑 160 + 간격 8 + 「저장」 88 이 「게시물」 칸(1280 에서 288)에 한 줄로 든다 */
.flo-main .flo-url-form > .flo-field__error { flex: 1 1 100%; margin: 0; text-align: left; }
.flo-main .flo-text-fail { color: var(--sig-fail-ink); }
.flo-main .flo-confirm-list { margin: 0 0 16px; border: 1px solid var(--flo-line); border-radius: 8px; overflow: hidden; }
.flo-main .flo-confirm-list--fail { border-color: var(--sig-fail-bg); }
.flo-main .flo-confirm-list__head { margin: 0; padding: 8px 12px; border-bottom: 1px solid var(--flo-line); background: var(--sig-neutral-bg); font-size: 13px; line-height: var(--flo-lh-caption); font-weight: 600; color: var(--flo-ink-2); }
.flo-main .flo-confirm-list--fail .flo-confirm-list__head { background: var(--sig-fail-bg); color: var(--sig-fail-ink); }
.flo-main .flo-confirm-list__items { max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.flo-main .flo-confirm-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; font-size: 14px; line-height: var(--flo-lh-ui); }
.flo-main .flo-confirm-list__item[hidden] { display: none; }
.flo-main .flo-confirm-list__item + .flo-confirm-list__item { border-top: 1px solid var(--flo-line); }
.flo-main .flo-confirm-list__line { font-size: 13px; color: var(--flo-ink-3); }
.flo-main .flo-confirm-list__who { font-weight: 600; color: var(--flo-ink-1); }
.flo-main .flo-confirm-list__why { flex: 1 1 200px; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
.flo-main .flo-confirm-list--fail .flo-confirm-list__why { color: var(--sig-fail-ink); }
.flo-main .flo-confirm-list__url { margin: 0; padding: 8px 12px; font-weight: 600; color: var(--flo-primary); word-break: break-all; }
/* 🔑 상세보기 창 · 확인 순서 셋을 번호와 세로 줄로 잇는다(시안 「상세보기 창」) · 마지막 단계에는 줄이 없다 */
.flo-main .flo-review-steps { display: flex; flex-direction: column; margin: 0 0 20px; padding: 0; list-style: none; }
.flo-main .flo-review-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; padding-bottom: 20px; }
.flo-main .flo-review-step:last-child { padding-bottom: 0; }
.flo-main .flo-review-step:not(:last-child)::before { content: ''; position: absolute; top: 32px; bottom: 4px; left: 13px; width: 2px; background: var(--flo-line); }
.flo-main .flo-review-step__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--flo-primary); color: #fff; font-size: 13px; font-weight: 700; }
.flo-main .flo-review-step__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 4px; }
.flo-main .flo-review-step__title { margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); }
.flo-main .flo-review-step__desc { margin: 0; font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-review-step__box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 12px; border: 1px solid var(--flo-line); border-radius: 8px; }
.flo-main .flo-review-step__handle { font-weight: 600; color: var(--flo-ink-1); }
.flo-main .flo-url-field { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 8px 0 12px; border: 1px solid var(--flo-line-strong); border-radius: 8px; background: var(--flo-card); color: var(--flo-ink-3); }
.flo-main .flo-url-field:focus-within { border-color: var(--flo-primary); box-shadow: 0 0 0 3px var(--flo-primary-soft); color: var(--flo-primary); }
.flo-main .flo-url-field__input { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 14px; color: var(--flo-ink-1); }
/* 🔑 테두리 · 초점 띠는 바깥 상자(`flo-url-field`)가 그린다 · 공용 입력칸 규칙이 안쪽 칸에 한 겹 더 그리지 않게 걷는다 */
.flo-main .flo-url-field > input.flo-url-field__input,
.flo-main .flo-url-field > input.flo-url-field__input:focus,
.flo-main .flo-url-field > input.flo-url-field__input:focus-visible { height: 100%; padding: 0; border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; }
.flo-main .flo-url-field__open { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 8px; border-radius: var(--flo-radius); background: var(--sig-neutral-bg); font-size: 13px; font-weight: 600; color: var(--flo-ink-1); text-decoration: none; }
.flo-main .flo-url-field__open[hidden] { display: none; }
/* 🔑 CSV 업로드 창 · 세 단계 · 파일 칸(브라우저의 것 · 끌어다 놓기가 된다) · 안내 · 결과 창의 세 칸 */
.flo-main .flo-csv-steps { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.flo-main .flo-csv-steps__item { display: flex; align-items: flex-start; gap: 8px; }
.flo-main .flo-csv-steps__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--flo-primary-soft); color: var(--flo-primary); font-size: 13px; font-weight: 700; }
.flo-main .flo-csv-steps__text { font-size: 14px; line-height: var(--flo-lh-body); }
.flo-main .flo-file-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px 16px; border: 2px dashed var(--flo-violet-300); border-radius: 12px; background: var(--flo-violet-50); color: var(--flo-primary); text-align: center; cursor: pointer; }
.flo-main .flo-file-drop__title { font-size: 14px; font-weight: 600; color: var(--flo-ink-1); }
/* 🔑 킷이 파일 칸을 `display: none` 으로 감춘다 · 이 창에서는 브라우저 칸을 그대로 보인다(고른 파일 이름 · 끌어다 놓기를 브라우저가 해 준다) */
.flo-main .flo-file-drop > input.flo-file-drop__input { display: block; width: 100%; max-width: var(--flo-control-w-long); font-size: 13px; color: var(--flo-ink-2); }
.flo-main .flo-csv-note { margin: 12px 0 0; padding: 12px; border-radius: 8px; background: var(--sig-neutral-bg); font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
.flo-main .flo-csv-note b { color: var(--flo-ink-1); }
.flo-main .flo-csv-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.flo-main .flo-csv-result__tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; border: 1px solid var(--flo-line); border-radius: 12px; }
.flo-main .flo-csv-result__tile--fail { background: var(--sig-fail-bg); }
.flo-main .flo-csv-result__label { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); }
.flo-main .flo-csv-result__tile--fail .flo-csv-result__label { font-weight: 600; color: var(--sig-fail-ink); }
.flo-main .flo-csv-result__value { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); color: var(--flo-ink-1); }
.flo-main .flo-csv-result__tile--fail .flo-csv-result__value { color: var(--sig-fail-ink); }
.flo-main .flo-csv-result__value small { margin-left: 4px; font-size: 14px; font-weight: 400; color: var(--flo-ink-2); }
/* 🔑 「제품 수령」 덧말(배송 단계 내역)은 길어질 수 있다 · 요약 칸의 한 줄 말줄임을 풀어 줄을 바꾼다(R-308 · 값이 잘리지 않는다) */
.flo-main .flo-kpis--summary.flo-resp-progress .flo-kpi__note { white-space: normal; overflow: visible; text-overflow: clip; }
@media (max-width: 860px) {
    .flo-main .flo-resp-next { padding: 16px; }
}

/*
 | 🆕 2026-10-12 (#1662) 제안 응답 관리 맨 아래 「미응답 현황」 작은 절.
 | 🔑 제목 줄 + 안내 한 문장 + 누르는 줄 둘(상태 · 인원 · 설명 · 꺾쇠) + 흐린 맺음. 줄은 위 목록에 거는 링크다.
 | 🔑 간격은 4 격자(16 · 12 · 8). 줄 폭이 좁으면 설명이 다음 줄로 내려간다(390 에서 넘치지 않는다).
 */
.flo-main .flo-unanswered { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--flo-line); }
.flo-main .flo-unanswered__head { display: flex; align-items: center; gap: 8px; }
.flo-main .flo-unanswered__head > h2 { margin: 0; }
.flo-main .flo-unanswered > p { margin: 0; }
.flo-main .flo-unanswered__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.flo-main .flo-unanswered__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 40px 12px 16px; position: relative;
    border: 1px solid var(--flo-line); border-radius: 8px; background: var(--flo-bg); color: var(--flo-ink-1); text-decoration: none;
}
.flo-main .flo-unanswered__row:hover, .flo-main .flo-unanswered__row:focus-visible { border-color: var(--flo-violet-200); background: var(--flo-primary-soft); }
.flo-main .flo-unanswered__name { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); }
.flo-main .flo-unanswered__count { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-primary); }
.flo-main .flo-unanswered__note { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-unanswered__go { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--flo-ink-3); }

/*
 | 🆕 2026-10-12 (#1662 · 🧑 「두줄로한게 어거지로 넣은 느낌임」) 발송 이력 표의 두 줄 칸을 넓은 창에서 한 줄로 편다.
 | 🔑 시각 + 「(대기 시각)」 · 상태 배지 + 막힘 사유가 한 줄이다. 정보는 그대로다. 휴대폰 카드(640 이하)는 사유를 배지 아래 둘째 줄에 둔다.
 */
@media (min-width: 641px) {
    .flo-main .flo-mail-history-table td.flo-col--datetime,
    .flo-main .flo-mail-history-table td.flo-col--status { white-space: nowrap; }
    .flo-main .flo-mail-history-table td.flo-col--status .flo-status-reason { margin-left: 8px; }
    /* 🔑 한 줄 값(시각 + 「(대기 시각)」 · 배지 + 사유)이 들어갈 폭 · 받는 주소 열이 남는 폭을 받는다 */
    .flo-main .flo-mail-history-table th.flo-col--datetime { width: 208px; }
    .flo-main .flo-mail-history-table th.flo-col--status { width: 176px; }
}
@media (max-width: 640px) {
    .flo-main .flo-mail-history-table td[data-stack="side"] .flo-status-reason { display: block; }
}
/* 둘째 단추의 이름표는 첫 단추(32 + 간격 4)를 비켜 선다 */
.flo-main .flo-search-result .flo-row-acts__btn[data-tip] + .flo-row-acts__btn[data-tip]::after { right: calc(100% + 40px); }

/*
 | 🆕 2026-10-12 (#1660 · 🧑 「박스가 내용에 비해 너무 크지않나?」) 관심목록 카드를 내용 크기로 줄인다(약 176 → 약 128).
 | 🔻 ~~인원 이름표 한 줄 + 큰 숫자 한 줄(세로 쌓음 · 위 12)~~ → 이름표와 숫자를 한 줄에 나란히 둔다(위 8). 바닥 줄 위 간격은 16 → 12.
 | 🔑 카드는 격자 줄 안에서 늘 같은 높이로 늘어난다(`align-items: stretch`). 바닥 줄은 `margin-top: auto` 라 카드 바닥에 붙는다.
 */
.flo-group-card__count { flex-direction: row; align-items: baseline; gap: 8px; margin-top: 8px; }
.flo-group-card__foot { padding-top: 12px; }

/*
 | 🆕 2026-10-12 (#1662) 템플릿 목록 휴대폰 카드의 관리 줄. 단추 넷(수정 · 기본 지정 · 복제 · 삭제)이 모든 카드에서 같은 네 칸 격자에 선다.
 | 🔑 기본인 행도 「기본 지정」이 눌리지 않는 상태로 서 있어 칸 수가 같다. 누르는 자리는 44(WCAG 2.5.8).
 */
@media (max-width: 640px) {
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions .flo-inline-form { display: flex; min-width: 0; }
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions :is(button, a) { width: 100%; min-width: 0; min-height: 44px; padding-inline: 4px; justify-content: center; }
}

/*
 | 🆕 2026-10-12 (#1660 · 관심목록 상세 창 다시 짬) 한 줄 도구 + 줄 전체 선택 면 + 계정 앞 플랫폼 표시.
 | 🔑 도구: 검색 칸 + 검색 단추 한 줄, 정렬 알약 한 줄이다. 좁은 폭에서는 칸이 줄 전체를 쓴다.
 | 🔑 선택 면: 넓은 창의 표 줄도 휴대폰 카드와 같은 한 벌의 옅은 단계(`--flo-select-fill`)로 칠한다. 칠하는 것은 줄 칸이다(줄 자체는 표 모양을 지킨다).
 | 🔑 줄 어디를 눌러도 고르는 일은 `flo-selection.js`(`data-row-select`)가 한다 · 단추 · 링크는 제외한다.
 */
.flo-main .flo-member-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.flo-main .flo-member-tools__search { display: flex; align-items: center; gap: 8px; flex: 1 1 360px; min-width: 0; }
.flo-main .flo-member-tools__search .flo-filtergrid__keyword { flex: 1 1 auto; min-width: 0; }
.flo-main .flo-member-tools__sort { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flo-main .flo-member-acct { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flo-main .flo-member-acct > .flo-account { flex: 1 1 auto; min-width: 0; }
@media (min-width: 641px) {
    .flo-main .flo-folder-members .common-table > tbody > tr:not(:has(> td[colspan])) { cursor: pointer; }
    .flo-main .flo-folder-members .common-table > tbody > tr:has(> td.flo-col--pick input:checked) > td { background: var(--flo-select-fill); }
    .flo-main .flo-folder-members .common-table > tbody > tr > td :is(a, button) { cursor: pointer; }
}
@media (max-width: 640px) {
    .flo-main .flo-member-tools { gap: 8px; }
    .flo-main .flo-member-tools__search { flex-basis: 100%; }
    .flo-main .flo-member-tools__sort { flex-basis: 100%; flex-wrap: wrap; }
}

/* ═══ 상세 화면 공통 짜임 (2026-10-13 · 이슈 #1663 · #1659 8차 승인안) ═══════════════════
 |
 | 🔑 상자는 「한 대상 · 함께 움직이는 할 일 · 빈 상태 · 입력 · 누르는 면 · 동료 지표 · 되돌릴 수 없는 동작」에만 둔다.
 |    나머지는 글자 위계 · 간격 · 옅은 선으로 묶는다(정본 근거 표는 #1659 8차 기준표).
 | 🔑 여기 묶은 다섯 가지는 운영자 화면 어디서 쓰든 같은 모양이다:
 |    ① 머리 카드 ② 이름표 · 값 줄 ③ 설정 줄 · 위험 영역 ④ 메모 ⑤ 입력 칸 짜임(이름표 → 안내 → 칸).
 | 🔑 카드 머리와 본문 사이는 16 하나다(아래 「머리 아래 16」).
 */

/* ① 머리 카드 · 레이아웃 `headCard`. 한 대상을 보는 상세 화면의 제목 줄이 흰 카드가 된다 */
.flo-main .flo-page-head.flo-page-head--card {
    flex-wrap: wrap; align-items: center; row-gap: 0;
    background: var(--flo-card); border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
    padding: calc(var(--flo-card-inset) - 1px); min-height: 0; /* 🔻 2026-10-14 (#1737) ~~20px 24px~~ → 선 포함 20(860 이하 16). 제목이 아래 카드들과 같은 선에서 시작한다 */
}
.flo-main .flo-page-head--card > .flo-page-head__text { flex: 1 1 320px; }
/* 제목 옆 상태 배지 하나뿐인 부제는 제목과 한 줄에 선다(좁으면 아래 줄로 넘어간다) */
.flo-main .flo-page-head--card > .flo-page-head__text:has(> .flo-page-head__meta > .flo-badge:only-child) {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
}
.flo-main .flo-page-head--card > .flo-page-head__text:has(> .flo-page-head__meta > .flo-badge:only-child) > .flo-page-head__meta { margin: 0; }
.flo-main .flo-page-head--card > .flo-page-head__body {
    flex: 0 0 calc(100% + 2 * (var(--flo-card-inset) - 1px)); min-width: 0; /* 🔻 2026-10-14 (#1737) ~~48 · -24 · 24~~ → 머리 카드 안여백을 따른다 */
    margin: 16px calc(1px - var(--flo-card-inset)) 0; padding: 16px calc(var(--flo-card-inset) - 1px) 0; border-top: 1px solid var(--flo-line-soft);
}
/* 머리 카드 아래 칸 안의 덧붙은 절(진행 상황 등)은 옅은 선 하나로 가른다 */
.flo-main .flo-page-head__body > .flo-page-head__part { margin: 16px calc(1px - var(--flo-card-inset)) 0; padding: 16px calc(var(--flo-card-inset) - 1px) 0; border-top: 1px solid var(--flo-line-soft); } /* 🔻 2026-10-14 (#1737) ~~-24 · 24~~ */
.flo-main .flo-page-head__body > .flo-page-head__part > h2.flo-t-section { margin-bottom: 16px; }
/* 윗줄형(`headEyebrow`) · 제목은 작은 윗줄, 아래 칸이 선 없이 바로 큰 이름으로 선다 */
.flo-main .flo-page-head--eyebrow .sec-title { font-size: 13px; line-height: var(--flo-lh-caption); font-weight: 600; color: var(--flo-ink-3); } /* 🔻 2026-10-14 (#1737) ~~13/500/20~~ → 13/600/18 */
.flo-main .flo-page-head--eyebrow > .flo-page-head__body { margin-top: 4px; padding-top: 0; border-top: 0; }
/*
 | 🆕 2026-10-19 (#1799) 윗줄은 `p`, 쪽 제목(`h1`)은 아래 칸의 큰 이름이다(응답 상세 · 셸 `headEyebrow`). 모양은 그대로다.
 | 🔑 윗줄 `p` 는 본문 문단의 아래 여백 8(`.flo-main p`)을 받지 않는다 · 큰 이름까지는 지금처럼 4 다.
 | 🔑 `h1` 은 이름 줄 부품을 감쌀 뿐이다 · 띄움(`flex`)으로 두어 글자 줄 하나가 더 생기지 않고, 크기 · 굵기는 부품이 그린다.
 */
.flo-main .flo-page-head--eyebrow p.sec-title { margin: 0; }
.flo-main .flo-pd-head__title { display: flex; min-width: 0; margin: 0; }
@media (max-width: 860px) {
    /* 🔻 2026-10-14 (#1737) ~~머리 카드 안여백 16 · 아래 칸 -16 · 16 · 100% + 32~~ → 위 규칙이 `--flo-card-inset`(16)으로 같은 값을 낸다 */
    .flo-main .flo-page-head--card > .flo-page-head__actions { flex: 1 1 100%; margin-top: 12px; }
}

/* ② 이름표 · 값 줄 · 이름표 칸 128 · 사이 16 · 값은 왼쪽에서 시작한다. 요약 목록(`flo-summary-list`)이 정본이고 나머지가 같은 눈금을 따른다 */
.flo-main .flo-defs { grid-template-columns: 128px minmax(0, 1fr); gap: 16px 16px; }
.flo-main .flo-defs > p.flo-t-caption { font-size: 13px; line-height: var(--flo-lh-body); }
.flo-main .flo-defs > p.flo-t-body { line-height: var(--flo-lh-body); color: var(--flo-ink-1); }
.flo-main .flo-amount-row {
    display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 0 16px; align-items: baseline;
    padding: 12px 0;
}
.flo-main .flo-amount-row > dt { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-amount-row > dd { margin: 0; text-align: left; color: var(--flo-ink-1); }
.flo-main .flo-amount-row.flo-amount-row--total { margin-top: 0; padding-top: 16px; }
@media (max-width: 480px) {
    .flo-main .flo-amount-row { grid-template-columns: minmax(0, 1fr) auto; }
    .flo-main .flo-amount-row > dd { text-align: right; }
}

/* ③-1 설정 줄 · `x-setting-row`. 왼쪽 이름 14/600 + 설명 13, 오른쪽 단추. 줄 사이는 옅은 선 하나다 */
.flo-setrows { min-width: 0; }
.flo-setrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px 0; }
.flo-setrow + .flo-setrow { border-top: 1px solid var(--flo-line); }
.flo-setrow:not(.flo-setrow + .flo-setrow) { padding-top: 0; }
.flo-setrow:not(:has(+ .flo-setrow)) { padding-bottom: 0; }
.flo-setrow__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.flo-main .flo-setrow__title { margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--flo-ink-1); }
.flo-main .flo-setrow__desc,
.flo-main .flo-setrow__desc :is(p, li) { margin: 0; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); word-break: keep-all; }
.flo-setrow__action { flex: none; display: flex; align-items: center; gap: 8px; }
.flo-setrow__action > * { margin: 0; }
@media (max-width: 760px) {
    .flo-setrow { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ③-2 위험 영역 · `x-danger-zone`. 옅은 빨강 테두리 한 상자, 붉은 것은 그 안의 단추뿐이다 */
.flo-danger-zone { border: 1px solid var(--sig-fail-line); border-radius: var(--flo-radius-card); padding: 20px; }
.flo-main .flo-danger-zone__title { margin: 0; padding-bottom: 16px; border-bottom: 1px solid var(--flo-line); font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--flo-ink-1); }
.flo-danger-zone > .flo-setrow { align-items: flex-start; }
.flo-danger-zone > .flo-danger-zone__title + .flo-setrow { padding-top: 16px; }
.flo-impact-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 4px 0; }
.flo-main .flo-impact-groups .flo-impact-head { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-1); }
.flo-main .flo-impact-groups ul { margin: 0; padding-left: 16px; list-style: disc; }
.flo-main .flo-impact-groups li { margin: 0 0 2px; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
@media (max-width: 860px) { .flo-impact-groups { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .flo-danger-zone { padding: 16px; } }

/* ④ 메모 · 적은 메모(또는 빈 상태)가 먼저, 그 아래 새 메모 칸. 글자 수와 저장은 칸 아래 오른쪽 끝 한 줄이다 */
.flo-main .flo-memo .flo-notes__list { margin: 0 0 24px; padding-top: 0; border-top: 0; }
.flo-main .flo-memo p.flo-notes__list {
    display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px;
    border: 1px dashed var(--flo-line-strong); border-radius: var(--flo-radius); background: var(--flo-bg);
    font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); text-align: center;
}
.flo-main .flo-memo .flo-field { margin-bottom: 0; }
.flo-main .flo-memo .flo-field__label { padding-top: 0; }
.flo-main .flo-memo textarea { width: 100%; max-width: none; min-height: 96px; }
.flo-memo__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.flo-main .flo-memo__foot [data-flo-charcount-out] { margin: 0; font-variant-numeric: tabular-nums; }

/* ⑤ 입력 칸 짜임 · 이름표 → 안내(4) → 칸(8) → 오류. 안내가 칸 아래에 있으면 칸을 다 채운 뒤에 읽힌다 */
/* 🔻 2026-10-13 (#1663 검토) ~~`.flo-main .flo-field > …` 전체~~ → 이름표(`.flo-field__label`)가 있는 운영자 칸만. 운영자 화면 안 참여 페이지 미리보기(`.flo-preview__screen`)는 공개 화면과 같아야 한다(이름표에 클래스가 없어 안내가 이름표 위로 올라갔다) */
.flo-main .flo-field:not(.flo-preview__screen *):has(> .flo-field__label) > .flo-field__label { order: -2; }
.flo-main .flo-field:not(.flo-preview__screen *):has(> .flo-field__label) > [id$="-desc"] { display: contents; }
.flo-main .flo-field:not(.flo-preview__screen *):has(> .flo-field__label) > .flo-field__help,
.flo-main .flo-field:not(.flo-preview__screen *):has(> .flo-field__label) > [id$="-desc"] > .flo-field__help { order: -1; margin: -4px 0 0; }

/* ═══ 캠페인 요약 (2026-10-13 · 이슈 #1664 · #1659 8차 승인안) ═══════════════════════════
 | 🔑 세 절은 탭이다(`flo-section-tabs.js`). 스크립트가 없으면 탭 줄이 없고 절 제목이 보인 채 차례로 선다.
 | 🔑 「캠페인 진행」은 두 열: 왼쪽 다음 업무(옅은 보라 면) · 진행 단계 비율 막대 · 0원 상품 테두리 행, 오른쪽 세로 단계 목록.
 | 🔑 「캠페인 내용」은 상자 없는 두 열 정의 문서, 「성과와 관리」는 설정 줄 · 위험 영역 · 메모다(공통 짜임 #1663).
 */
/* 탭 줄 */
.flo-sectabs { display: flex; gap: 4px; border-bottom: 1px solid var(--flo-line); overflow-x: auto; scrollbar-width: none; }
.flo-main .flo-sectab {
    flex: none; margin: 0 0 -1px; padding: 12px 16px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--flo-ink-3); white-space: nowrap;
}
.flo-main .flo-sectab:hover { color: var(--flo-ink-1); }
.flo-main .flo-sectab.is-on { color: var(--flo-primary); border-bottom-color: var(--flo-primary); }
.flo-main .flo-sectab:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: -2px; border-radius: var(--flo-radius); }
/*
 | 🆕 2026-10-15 (#1784 · #1783) 같은 층 화면 사이 이동도 이 탭 줄이다(`x-coupon-nav` · `x-influencer-nav` · `flo-sectabs--nav`).
 |    🔻 ~~회색 세그먼트(`flo-segment--nav`)~~ · 🧑 「쿠폰 발급 밑에 3개 선택 탭이 좀 애매한디」 · 「"인플루언서 검색"이랑 "관심목록" 탭이 기존 디자인과 너무 다르지않나?」
 | 🔑 이동 탭은 링크다(`a.flo-sectab`) · 지금 화면은 `aria-current="page"` 가 고른 탭 모양을 준다(절 탭의 `is-on` 과 같은 모양).
 | 🔑 `flo-sectabs--tight` 는 바로 뒤 판이 위 여백 16 을 스스로 가질 때 줄 아래를 0 으로 둔다(두 여백이 더해져 32 가 되지 않게 · #1737).
 */
.flo-main .flo-sectabs.flo-sectabs--nav { margin: 0 0 16px; }
.flo-main .flo-sectabs.flo-sectabs--tight:has(+ :is(.cont-sec, form)) { margin-bottom: 0; }
.flo-main a.flo-sectab { display: inline-block; text-decoration: none; }
.flo-main a.flo-sectab:hover { text-decoration: none; }
.flo-main .flo-sectab[aria-current="page"] { color: var(--flo-primary); border-bottom-color: var(--flo-primary); }
.flo-main .flo-sec.is-tabpanel[hidden] { display: none; }
/* 탭 이름과 같은 절 제목은 눈에서만 감춘다(낭독기는 탭 이름 · 절 제목을 모두 읽는다) */
.flo-main .flo-sec.is-tabpanel > .flo-sec__head {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 캠페인 진행 · 두 열 */
.flo-nw { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 40px; align-items: start; }
.flo-nw__main { min-width: 0; display: flex; flex-direction: column; }
.flo-nw__rail { min-width: 0; align-self: stretch; padding-left: 32px; border-left: 1px solid var(--flo-line); }
/* 판 안 서브카드 규칙(#1619 · 투명 · 위 선)을 이 두 열 안에서는 덮는다 */
.flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__block { margin: 28px 0 0; padding: 0; border: 0; background: none; }
.flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__block > h2.flo-t-section.flo-sub-title {
    display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body);
}
/* 다음 업무 · 옅은 보라 면 하나(테두리 없음) */
.flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__lead { margin: 0; padding: 20px 24px; border: 0; border-radius: var(--flo-radius-card); background: var(--flo-violet-50); }
.flo-main .flo-sec .flo-nw .flo-nw__lead > h2.flo-nw__eyebrow.flo-sub-title { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
.flo-main .flo-nw__lead .flo-notice.flo-nw__headline { display: block; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; }
.flo-main .flo-nw__lead .flo-nw__headline .flo-notice__title { font-size: 22px; font-weight: 700; line-height: var(--flo-lh-title); color: var(--flo-ink-1); } /* 🔻 2026-10-14 (#1737) ~~20/700/28~~ → 22/700/30. 강조 면(#1659 8차)은 그대로이고 글자만 눈금에 든다 */
.flo-main .flo-nw__lead .flo-next-work__actions { gap: 8px; }
/* 🆕 2026-10-14 (#1739 · 묶음 L) 다음 업무 단추 안의 건수 덧글자(「수락 2명」) · 13/400 흐림. 채운 단추 위에서는 흰 글자를 옅게 둔다 */
.flo-main .flo-btn__count { margin-left: 4px; font-size: 13px; font-weight: 400; line-height: 1; color: var(--flo-ink-3); } /* 줄 높이 1 · 단추 줄(38) 안의 작은 글자가 기준선을 밀어 단추가 41 이 되었다(#1739 검토) */
.flo-main .basic-btn.solid .flo-btn__count { color: rgba(255, 255, 255, .86); }
.flo-main .flo-nw__lead .flo-next-work__meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; margin-top: 12px; }
.flo-main .flo-nw__lead .flo-next-work__meta > .flo-fold[open] { flex: 0 0 100%; }
/* 진행 단계 · 인원 수에 비례한 막대. 칸마다 그 단계로 걸러진 목록으로 가는 링크다 */
.flo-main .flo-stagebar { display: flex; flex-wrap: nowrap; gap: 4px; width: 100%; }
.flo-main .flo-stagebar a.flo-status-filter.flo-stagebar__item[href] {
    flex: var(--flo-share, 1) 1 0%; min-width: 64px; height: auto; padding: 0; border: 0; border-radius: 0; background: none;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; white-space: normal; color: var(--flo-ink-2); text-decoration: none;
}
.flo-stagebar__bar { display: block; width: 100%; height: 8px; margin-bottom: 8px; border-radius: 4px; background: var(--flo-violet-200); }
/* 🔻 2026-10-13 (#1664 검토) ~~차례(`nth-child`)로 칠함~~ 0명 단계를 건너뛰면 색이 옮겨 갔다. 색은 단계(`data-stage`)가 정한다 */
.flo-stagebar__item[data-stage="proposal"] .flo-stagebar__bar { background: var(--flo-primary); }
.flo-stagebar__item[data-stage="product"] .flo-stagebar__bar { background: var(--flo-primary-brt); }
.flo-stagebar__item[data-stage="content"] .flo-stagebar__bar { background: var(--flo-violet-300); }
.flo-stagebar__item[data-stage="settlement"] .flo-stagebar__bar { background: var(--flo-violet-200); }
.flo-main .flo-stagebar__label { font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); } /* 🔻 2026-10-14 (#1737) ~~13/500/20~~ → 13/400/18 */
.flo-main .flo-stagebar__item .flo-num { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); color: var(--flo-ink-1); } /* 🔻 2026-10-14 (#1737) ~~20/700/28~~ → 지표 숫자 26/600/32 */
.flo-main .flo-stagebar a.flo-stagebar__item:hover :is(.flo-stagebar__label, .flo-num) { color: var(--flo-primary); }
.flo-main .flo-stagebar a.flo-stagebar__item:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 4px; border-radius: 4px; }
/* 0원 상품 · 상태가 있는 상품 한 줄(테두리 행) */
.flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__block.flo-zero {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; row-gap: 12px;
    margin-top: 24px; padding: 12px 16px; border: 1px solid var(--flo-line); border-radius: var(--flo-radius-card);
}
.flo-zero__thumb { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--flo-line); border-radius: 8px; background: var(--flo-line-soft); color: var(--flo-ink-3); }
.flo-zero__main { min-width: 0; }
.flo-main .flo-sec .flo-nw .flo-zero .flo-zero__main > h2.flo-t-section.flo-sub-title { margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); }
.flo-main .flo-zero__meta { margin: 2px 0 0; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
.flo-zero__state { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--sig-done-ink); }
.flo-zero__state::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sig-done); }
.flo-main .flo-zero__stat { display: flex; flex-direction: column; align-items: flex-end; margin: 0; text-align: right; }
.flo-main .flo-zero__label { font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
.flo-main .flo-zero__value { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); color: var(--flo-ink-1); font-variant-numeric: tabular-nums; } /* 🔻 2026-10-14 (#1737) ~~20/700/28~~ → 26/600/32 */
.flo-main .flo-zero__unit { margin-left: 2px; font-size: 14px; font-weight: 400; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); } /* 🔻 2026-10-14 (#1737) ~~13/500~~ → 단위 14/400/20 */
.flo-zero > :not(.flo-zero__thumb, .flo-zero__main, .flo-zero__stat) { grid-column: 1 / -1; margin: 0; }
.flo-main .flo-zero__note { margin: 0; }
/* 세로 단계 목록 · 지난 단계는 확인 표, 지금 단계는 채운 번호와 「진행 중」 표 */
.flo-main .flo-steps.flo-steps--rail { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; }
.flo-main .flo-steps--rail > li { min-width: 0; }
.flo-main .flo-steps--rail .flo-step {
    position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: auto; min-height: 40px; padding: 0;
    border-radius: 0; background: none; font-size: 14px; font-weight: 400; line-height: var(--flo-lh-body); color: var(--flo-ink-3); /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
}
.flo-main .flo-steps--rail .flo-step.is-done { color: var(--flo-ink-2); }
.flo-main .flo-steps--rail .flo-step.is-now { color: var(--flo-ink-1); font-weight: 600; }
.flo-main .flo-steps--rail .flo-step__no { position: relative; z-index: 1; width: 24px; height: 24px; background: var(--sig-neutral-bg); color: var(--flo-ink-2); }
.flo-main .flo-steps--rail .flo-step.is-now .flo-step__no { background: var(--flo-primary); color: #fff; }
.flo-main .flo-steps--rail .flo-step.is-done .flo-step__no {
    color: transparent; /* 번호 글자는 남기고(`aria-hidden`) 확인 표 그림만 보인다 */
    background: var(--flo-violet-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235b3fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.flo-main .flo-steps--rail > li:not(:last-child) .flo-step::before { content: ""; position: absolute; left: 11px; top: 32px; bottom: -8px; width: 2px; background: var(--flo-line); }
.flo-main .flo-steps--rail .flo-step__tag {
    flex: none; margin-left: auto; padding: 0 8px; border: 1px solid var(--flo-violet-100); border-radius: var(--flo-radius); background: var(--flo-violet-50);
    font-size: 13px; font-weight: 600; line-height: 22px; color: var(--flo-primary);
}
@media (max-width: 1100px) {
    .flo-nw { grid-template-columns: minmax(0, 1fr); }
    .flo-nw__rail { margin-top: 28px; padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--flo-line); }
}
@media (min-width: 761px) and (max-width: 1100px) {
    .flo-main .flo-steps.flo-steps--rail { display: grid; grid-auto-flow: column; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
    .flo-main .flo-steps--rail[data-rows="2"] { grid-template-rows: repeat(2, auto); }
    .flo-main .flo-steps--rail[data-rows="3"] { grid-template-rows: repeat(3, auto); }
    .flo-main .flo-steps--rail[data-rows="4"] { grid-template-rows: repeat(4, auto); }
    .flo-main .flo-steps--rail[data-rows="5"] { grid-template-rows: repeat(5, auto); }
    .flo-main .flo-steps--rail[data-rows="6"] { grid-template-rows: repeat(6, auto); }
    /* 첫 열 마지막 칸은 아래로 이을 칸이 없다 */
    .flo-main .flo-steps--rail[data-rows="2"] > li:nth-child(2) .flo-step::before,
    .flo-main .flo-steps--rail[data-rows="3"] > li:nth-child(3) .flo-step::before,
    .flo-main .flo-steps--rail[data-rows="4"] > li:nth-child(4) .flo-step::before,
    .flo-main .flo-steps--rail[data-rows="5"] > li:nth-child(5) .flo-step::before,
    .flo-main .flo-steps--rail[data-rows="6"] > li:nth-child(6) .flo-step::before { content: none; }
}
@media (max-width: 760px) {
    .flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__lead { padding: 16px; }
    .flo-main .flo-nw__lead .flo-nw__headline .flo-notice__title { font-size: 16px; line-height: var(--flo-lh-card); } /* 🔻 2026-10-14 (#1737) ~~18/26~~ → 좁은 폭은 16/700/24 */
    .flo-main .flo-sec .flo-nw .flo-nw__main > .flo-subcard.flo-nw__block.flo-zero { grid-template-columns: 40px minmax(0, 1fr); }
    .flo-main .flo-zero__stat { grid-column: 2; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; }
    /* 🔻 2026-10-14 (#1737) ~~`.flo-zero__value { font-size: 16px; line-height: 24px; }`~~ 좁은 폭에서도 지표 숫자는 26/600/32 */
}

/* 캠페인 내용 · 두 열 정의 문서. 묶음 제목이 곧 그 단계로 가는 링크(꺾쇠)다 */
.flo-main .cont-sec > .flo-sec > .flo-subcard-grid.flo-doc { column-gap: 48px; row-gap: 36px; }
.flo-main .flo-sec .flo-doc > .flo-subcard > h2.flo-t-section.flo-sub-title {
    display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 0 0 12px; border-bottom: 1px solid var(--flo-line);
    font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); /* 🔻 2026-10-14 (#1737) ~~15/600/24~~ → 강조 14/600/20(옆 「진행 단계」 소제목과 같은 단계) */
}
.flo-main .flo-doc .flo-doc__note { margin-left: auto; font-size: 13px; font-weight: 400; } /* 🔻 2026-10-14 (#1737) 굵기 ~~500~~ → 400 */
.flo-main a.flo-doc__headlink { display: inline-flex; align-items: center; gap: 4px; color: inherit; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-ui); text-decoration: none; } /* 🔻 2026-10-14 (#1737) ~~15/600/24~~ → 14/600/20 */
.flo-main a.flo-doc__headlink:hover { color: var(--flo-primary); }
.flo-doc__chev {
    flex: none; width: 16px; height: 16px; background: currentColor; opacity: .45; transition: transform .15s, opacity .15s;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / 16px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5L10.5 8 6 12.5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.flo-main a.flo-doc__headlink:hover .flo-doc__chev { opacity: 1; transform: translateX(2px); }
.flo-main .flo-doc .flo-defs { margin-top: 16px; }
@media (max-width: 1100px) { .flo-main .cont-sec > .flo-sec > .flo-subcard-grid.flo-doc { row-gap: 32px; } }

/* 성과와 관리 · 설정 줄 → 위험 영역 → 메모 */
.flo-main .flo-sec .flo-danger-zone.flo-manage__zone { margin-top: 24px; }
.flo-main .cont-sec > .flo-sec > .flo-subcard.flo-manage__memo { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--flo-line); }
.flo-main .flo-manage__memo .flo-memo__help { margin: 0 0 8px; }

/* ═══ 응답 · 인플루언서 · 정산 상세 (2026-10-13 · 이슈 #1665 · #1659 8차 승인안) ═══════════════
 | 🔑 보조열은 한 카드 안의 절이다(절 사이 옅은 선 하나 · 상자 안 상자 없음).
 | 🔑 인플루언서 상세는 서로 다른 대상 둘(프로필 · 성과)이라 카드 두 장이고, 높이는 각자 내용만큼이다.
 */
/* 머리 카드 안의 인플루언서 이름 줄(응답 · 정산) */
.flo-main .flo-page-head__body > .flo-pd-head { justify-content: flex-start; align-items: flex-start; gap: 4px 12px; }
.flo-main .flo-page-head__body > .flo-pd-head .flo-account__name { font-size: 22px; line-height: var(--flo-lh-title); }
.flo-main .flo-page-head__body > .flo-pd-head .flo-pd-head__chips { margin-top: 4px; }
/*
 | 🆕 2026-10-19 (#1799) 정산 명세 머리의 배지도 이름 바로 뒤 12 에 선다 · 응답 상세(위 `.flo-pd-head`)와 같은 #1665 머리 카드다.
 |    ~~`{ margin: 0; }` 만~~ 양끝 배치(`.flo-settle-head` 의 `space-between`)를 이어받아 배지가 머리 오른쪽 끝(1440 x 1297)에 떨어져 있었다.
 */
.flo-main .flo-page-head__body > .flo-settle-head { margin: 0; justify-content: flex-start; align-items: flex-start; gap: 4px 12px; }
.flo-main .flo-page-head__body > .flo-settle-head .flo-settle-head__chips { margin-top: 4px; }
/* 응답 상세 · 두 열(오른쪽 380) */
.flo-pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.flo-pd-cols__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.flo-main .flo-pd-cols__main > .flo-subcard { margin: 0; }
.flo-main .flo-pd-rail { margin: 0; min-width: 0; }
.flo-main .flo-pd-rail__part + .flo-pd-rail__part { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line); } /* 🔻 2026-10-14 (#1737) ~~20 · 20~~ → 판 안 절 구분(#1619) 선 + 16 */
.flo-main .flo-pd-rail .flo-pd-value { flex-direction: column; align-items: flex-start; gap: 12px; }
.flo-main .flo-pd-rail .flo-summary-list { grid-template-columns: minmax(0, 1fr); }
.flo-main .flo-pd-rail .flo-seeding-url { margin-bottom: 4px; }
.flo-main .flo-member-id:has(> .flo-member-id__edit[open]) > .flo-member-id__delete { display: none; }
@media (max-width: 1100px) { .flo-pd-cols { grid-template-columns: minmax(0, 1fr); } }

/* 인플루언서 상세 · 카드 두 장(프로필 · 성과), ~~높이는 내용만큼~~ 🔻 2026-10-14 (#1738 · 묶음 B) 나란한 두 카드는 같은 높이다(263 대 140 으로 오른쪽 아래가 비었다 · 125- 「카드와 판」 같은 높이 규칙) */
.flo-inf-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.flo-main .flo-inf-pair > .flo-subcard { margin: 0; }

/*
 | 🆕 2026-10-26 (#1863 · plan/127 5-2장) 인플루언서 상세 · 최근 게시물 격자.
 |    🔑 한 줄 4장 · 좁은 화면(860 이하) 2장 · 정사각. 사진은 480×480 사본이라 깨지지 않는다.
 |    🔑 사진이 없는 칸은 옅은 바탕에 「사진 없음」 · 동영상은 왼쪽 위 표지 · 아래 줄은 게시일 · 좋아요 · 댓글.
 */
.flo-main .flo-post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .flo-main .flo-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.flo-main .flo-post-grid__item { min-width: 0; }
.flo-main .flo-post-grid__media {
    position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
    overflow: hidden; border-radius: var(--flo-radius); background: var(--flo-line-soft); border: 1px solid var(--flo-line);
}
.flo-main .flo-post-grid__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flo-main a.flo-post-grid__media:hover img { opacity: .9; }
.flo-main a.flo-post-grid__media:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
.flo-main .flo-post-grid__empty { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main .flo-post-grid__badge {
    position: absolute; top: 8px; left: 8px; padding: 0 8px; border-radius: 999px;
    font-size: 13px; line-height: var(--flo-lh-caption); color: #fff; background: rgba(20, 16, 36, .7);
}
.flo-main .flo-post-grid__meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 8px 0 0; color: var(--flo-ink-2); }
@media (max-width: 1100px) { .flo-inf-pair { grid-template-columns: minmax(0, 1fr); } }
.flo-inline-hint { display: inline-flex; align-items: center; gap: 4px; }
/* 이 몰에서의 성과 · 숫자 셋을 크게 */
.flo-main .flo-summary-list.flo-summary-list--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.flo-main .flo-summary-list--stats .flo-summary-list__row { display: flex; flex-direction: column; gap: 4px; padding: 4px 16px; border: 0; }
.flo-main .flo-summary-list--stats .flo-summary-list__row:first-child { padding-left: 0; }
.flo-main .flo-summary-list--stats .flo-summary-list__row + .flo-summary-list__row { border-left: 1px solid var(--flo-line); }
.flo-main .flo-summary-list--stats .flo-summary-list__value { font-size: 26px; font-weight: 600; line-height: var(--flo-lh-metric); white-space: nowrap; } /* 🔻 2026-10-14 (#1737) ~~22/700/30~~ → 지표 숫자 26/600/32 */
@media (max-width: 640px) {
    .flo-main .flo-summary-list.flo-summary-list--stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .flo-main .flo-summary-list--stats .flo-summary-list__row { padding: 4px 8px 4px 12px; }
    /* 🔻 2026-10-13 (#1665 검토) 큰 값(억 단위 순매출)이 칸 밖으로 나가지 않게 좁은 폭에서는 접는다 */
    .flo-main .flo-summary-list--stats .flo-summary-list__value { white-space: normal; overflow-wrap: anywhere; } /* 🔻 2026-10-14 (#1737) ~~17/24~~ → 좁은 폭도 26/600/32. 큰 값은 접기만 한다 */
}

/* 정산 상세 · 보조열 한 카드, 지급 완료는 상태 한 줄 */
.flo-main .flo-settle-rail__part + .flo-settle-rail__part { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--flo-line); } /* 🔻 2026-10-14 (#1737) ~~20 · 20~~ → 선 + 16 */
.flo-main .flo-settle-rail .flo-t-caption { max-width: none; }
/* 🆕 2026-10-20 (#1842 · 🧑 「고정비 저장 버튼만 input 우측으로」) 이름표 · 칸 · 「고정비 저장」 한 줄 · 단추 글자는 꺾지 않는다(1280 에서 「고정비 / 저장」 두 줄로 꺾여 열 밖으로 나갔다) */
/* 🔻 2026-10-20 (#1845) ~~`.flo-settle-fee > input { flex: 1 1 auto; min-width: 0; width: auto; }`~~ · 칸이 단위 상자(`flo-unitbox` · 숫자 칸 폭)에 들어가 늘릴 일이 없다 */
.flo-main .flo-settle-rail .flo-settle-fee > button { flex: none; white-space: nowrap; }
/*
 | 🆕 2026-10-20 (#1846 · 🧑 「원은 input 밖으로 빼」) 금액 칸 셋은 숫자 칸 폭에 오른쪽 맞춤 · 단위는 칸 밖 오른쪽이다.
 | 🔑 단위 글자는 위저드 수수료율 「%」와 같은 모양이다(`.flo-cam-form .flo-input-unit`) · 이름표 줄의 굵기(600)를 받지 않는다.
 */
.flo-main .flo-settle-rail .flo-field__label > input[data-flo-number="money"] { width: var(--flo-control-w-num); text-align: right; }
.flo-main .flo-settle-rail .flo-input-unit { flex: none; font-size: 14px; font-weight: 400; color: var(--flo-ink-2); }
.flo-status-line { margin: 0; }
.flo-main .flo-status-line__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--sig-done-ink); }
.flo-status-line__title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sig-done); }
.flo-main .flo-status-line__meta { margin: 4px 0 0 16px; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
/* 오른쪽 열(380) 안의 도움말 말풍선은 끝 맞춤(`flo-hint--end` 과 같은 자리)으로 연다 · 화면 밖으로 나가 쪽 폭을 늘렸다 */
.flo-main :is(.flo-pd-rail, .flo-settle-rail) .flo-hint__bubble { left: auto; right: -6px; }
.flo-main :is(.flo-pd-rail, .flo-settle-rail) .flo-hint__bubble::before { left: auto; right: 8px; }

/* ═══ 템플릿 등록 · 주석형 두 열 (2026-10-13 · 이슈 #1666 · 🧑 #1659 8차 「V1」) ═══════════════════
 | 🔑 왼쪽 280 은 절 제목과 설명, 오른쪽은 칸(폭 640). 안내는 이름표 아래 · 칸 위다(#1663 입력 칸 짜임).
 | 🔑 한 줄 칸의 글자 수는 칸 안 오른쪽 끝에 선다. 문의 창구 줄의 종류 · 값 · 「제거」는 모두 높이 40 이다.
 | 🔑 1100 이하에서는 한 열이고 절 제목 · 설명이 칸 위에 선다. 저장 줄은 칸 열의 오른쪽 끝에 맞춘다.
 */
.flo-tsec__body { min-width: 0; }
/* 🔻 2026-10-13 (#1666 검토) ~~`.flo-tsec__body .flo-field` 전부 640~~ 본문 편집기(`flo-field--longform`)는 오른쪽 열 전체 폭이다(🧑 #969 「화면 크기 최대로 고정」) */
.flo-main .flo-tsec__body .flo-field:not(.flo-field--longform),
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-tsec__body .flo-field:not(.flo-field--longform) { max-width: 640px; }
.flo-main .flo-tsec__body [data-flo-cs-rows] { max-width: 640px; }
.flo-main .flo-tsec__body [data-flo-cs-row] { display: flex; align-items: center; gap: 8px; }
/* 🆕 2026-10-19 (#1829) 대본(flo-repeat-rows.js)이 빈 줄에 hidden 을 단다 · 바로 위 줄이 `.flo-main .flex[hidden]` 과 같은 우선순위로 뒤에 있어 그 줄을 이겨 빈 줄 셋이 보였다 · 🚫 `!important` 로 덮지 마라 (HiddenAttributeTest) */
.flo-main .flo-tsec__body [data-flo-cs-row][hidden] { display: none; }
.flo-main .flo-tsec__body [data-flo-cs-row] select { flex: none; width: var(--flo-control-w-short); height: var(--flo-control-h); }
.flo-main .flo-tsec__body [data-flo-cs-row] input { flex: 1 1 auto; min-width: 0; height: var(--flo-control-h); }
.flo-main .flo-tsec__body [data-flo-cs-row] .flo-btn,
.flo-main .flo-tsec__body [data-flo-cs-row] .flo-icon-btn { flex: none; } /* 🔻 2026-11-03 (#1970) 「제거」 → X 아이콘 단추 */
.flo-main .flo-tsec__body .flo-field__control:has(> input + [data-flo-charcount-out]) { position: relative; }
.flo-main .flo-tsec__body .flo-field__control > input:has(+ [data-flo-charcount-out]) { padding-right: 84px; }
.flo-main .flo-split__main:has(> form#flo-template-form) .flo-tsec__body .flo-field__control > input + [data-flo-charcount-out] {
    position: absolute; top: 0; right: 12px; height: var(--flo-control-h); line-height: var(--flo-control-h); margin: 0; pointer-events: none;
}
@media (min-width: 1101px) {
    .flo-main .flo-tsec { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 32px; align-items: start; }
    .flo-main .flo-split__main:has(> form#flo-template-form) .flo-tsec__aside > h2.flo-t-section { margin: 0 0 8px; }
    .flo-main .flo-tsec__aside > .flo-area__hint { margin: 0; font-size: 13px; line-height: var(--flo-lh-ui); color: var(--flo-ink-3); }
    .flo-main .flo-split__main:has(> form#flo-template-form):has(.flo-tsec) > .flo-form__actions { max-width: 952px; }
}
.flo-main .flo-tsec__body .flo-field > .flo-field__label { padding-top: 0; } /* 절 제목 줄과 첫 이름표 줄을 맞춘다 */
@media (max-width: 640px) {
    .flo-main .flo-tsec__body [data-flo-cs-row] select { flex: 0 1 var(--flo-control-w-short); width: auto; min-width: 0; } /* 좁으면 종류 칸도 줄어 값 칸에 자리를 준다 */
    .flo-main .flo-tsec__body [data-flo-cs-row] .flo-btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
}
/* 🆕 2026-10-13 (#1664 검토) 설정 줄 동작 자리의 작은 폼(재개 사유 + 「캠페인 재개」) · 칸과 단추가 아래 줄에 맞춰 나란하다 */
.flo-setrow__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0; }
.flo-main .flo-setrow__form > .flo-field { width: var(--flo-control-w-mid); max-width: 100%; margin: 0; }
/* 🆕 2026-10-13 (#1663 검토) 이름표 칸이 왼쪽에 따로 선 폼(인플루언서 정보 등록)은 안내가 칸 묶음 맨 위 · 칸 바로 위다 */
.flo-main .flo-field__control > .flo-field__help:first-child { margin: 0 0 8px; }
.flo-main .flo-sec.is-tabpanel:focus-visible { outline: 2px solid var(--flo-primary); outline-offset: 2px; }
@media (max-width: 400px) { .flo-main .flo-sectab { padding: 12px; } } /* 🆕 2026-10-13 (#1664 검토) 320 에서도 탭 셋이 한 줄에 다 보인다(넘침 0) */
.flo-main .flo-sec.is-tabpanel:target:focus-visible { outline: none; } /* 주소의 `#` 으로 열린 절은 브라우저가 초점을 옮겨 테두리가 섰다 · 키보드로 들어온 초점에만 테두리를 둔다 */

/* ===== #1784 ===== */
/*
 | 🆕 2026-10-15 (#1784 · 점검판 4차) 캠페인 화면 다듬기. 이 블록은 #1784 의 것이다.
 | ① 캠페인 목록 상태 칸: 배지 아래 「n/5단계」가 배지에 붙어 있었다(🧑 「상태의 경우에 박스 밑에 텍스트가 너무 딱붙은 느낌」) · 사이 4.
 | ② 기간 칸(연도 · 작은 줄 세로선 · 열 폭)은 🔻 2026-10-15 (#1784 검토) 이 블록에서 덮어쓰지 않고 원래 규칙(「캠페인 목록 열 폭」 · 대시보드 표 열 폭) 자리에서 값을 바꿨다.
 */
.flo-cam-list td .flo-badge + .flo-t-caption { margin-top: 4px; }
/*
 | ③ 캠페인 요약 기간 칸의 경과 막대: 칸 아래 가장자리에 붙은 선이 칸 테두리처럼 읽혔다(🧑 「밑에 줄그어져잇자나? 그거 위치가 좀 별로」).
 |    🔻 #1642 ~~칸 맨 아래 가장자리 얇은 줄(`position: absolute`)~~ → 칸 안여백 안, 「N일 / M일」 덧말 바로 아래 둥근 막대(위 8).
 |    제안 응답 관리 비율 칸의 막대(`.flo-kpi__bar`)와 같은 모양이다. 색은 시간 막대의 옅은 보라 그대로다.
 */
.flo-kpis--summary .flo-kpi:has(> .flo-kpi__icon) > .flo-kpi__bar--time,
.flo-kpi__bar--time { position: static; grid-column: 1 / -1; height: 4px; margin: 8px 0 0; border-radius: 999px; }
.flo-kpi__bar--time > i { border-radius: 999px; }
/*
 | ④ 쿠폰 화면 셋 사이 이동(`x-coupon-nav`)의 밑줄 탭 줄 규칙은 🔻 2026-10-15 (#1784 검토) 공용이라 탭 줄 절(「탭 줄」 · `.flo-sectabs`) 곁으로 옮겼다.
 */
/*
 | ⑤ 쿠폰 수령 가능 여부 「막힘」: 확인 시각과 「카페24에서 다시 확인」을 한 줄에 둔다(좁으면 접힌다). 알림 아래 사이 12 는 알림의 `mb-3` 이 준다.
 */
.flo-pause-check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.flo-main .flo-pause-check > p,
.flo-pause-check > form { margin: 0; }
/*
 | ⑥ 제안 응답 관리 비율 칸 묶음의 머리 줄(「비율 · 유효 발송 N명 기준」): 두 지표 줄 사이에 낀 캡션(🧑 「아래 네비율은 저거 위치도 별로」)을 묶음 머리로 바꿨다.
 |    위 지표 줄과는 24(지표 줄 아래 여백 16 과 겹쳐 24 하나), 아래 비율 칸과는 8 이다. 이름 14/600 · 기준 13/400 흐림(화면 기준 눈금).
 */
.flo-main .flo-kpi-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 24px 0 8px; }
.flo-kpi-group-head__title { font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--flo-ink-1); }
.flo-kpi-group-head__basis { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
/* ===== /#1784 ===== */

/* ===== #1783 ===== */
/*
 | 🆕 2026-10-15 (#1783 · 점검판 4차) 인플루언서 화면 다듬기. 이 블록은 #1783 의 것이다.
 | ① 인플루언서 검색 · 관심목록 이동(`x-influencer-nav`)은 #1784 의 쿠폰 화면 이동과 같은 밑줄 탭 줄(`flo-sectabs--nav`)이다.
 |    바로 뒤 판(`.cont-sec` · 폼)이 위 여백 16 을 가지면 줄 아래는 0 이다(두 여백이 더해져 32 가 되지 않게 · #1737 의 세그먼트 규칙과 같은 판단).
 */
/* 🔻 2026-10-15 (#1784 검토) ~~`.flo-sectabs--nav[aria-label="인플루언서 화면"]:has(…)`~~ → 탭 줄 절의 `flo-sectabs--tight`(부품이 단다) · 낭독용 이름표를 모양 선택자로 쓰지 않는다 */
/*
 | ② 인플루언서 검색 결과의 담기 도구 줄은 「선택 막대」다(관심목록 상세 창 실행 줄 #1647 과 같은 모양).
 |    옅은 바탕 한 줄 · 왼쪽은 전체 선택 · 선택 N명 · 안내, 오른쪽 끝은 담기 동작 두 묶음. 고르면 선택 면 색(#1630)과 테두리로 바뀐다.
 | 🔑 고름 여부는 동작 단추가 켜졌는지로 읽는다(`flo-selection.js` 가 0명이면 끈다). 스크립트가 없으면 단추가 켜진 채라 막대도 켜진 색이다.
 | 🔑 묶음 사이 세로선(#1576)은 그대로다. 줄이 접히면 묶음째 다음 줄로 가고 오른쪽 끝에 맞춘다.
 */
/* 🔑 묶음 사이 16 · 막대 안여백 8 · 1440 에서 꺼진 막대(안내 글 포함)도 한 줄에 선다(실측 1,079 / 1,080). 세로선은 묶음 사이 가운데(-8)다 */
.flo-main .flo-result-tools {
    gap: 8px 16px; margin: 0 0 16px; padding: 8px; border-radius: var(--flo-radius);
    background: var(--flo-line-soft); box-shadow: inset 0 0 0 1px transparent;
    justify-content: flex-end; transition: background-color .12s, box-shadow .12s;
}
.flo-main .flo-result-tools > .flo-result-tools__row::before { left: -8px; }
.flo-main .flo-result-tools > .flo-result-tools__head { margin-right: auto; }
/* 🔻 2026-10-15 (#1784 검토) ~~`:has([data-selection-submit]:not(:disabled))`~~ → 스크립트가 센 뒤 붙이는 `aria-disabled="false"`(`flo-selection.js`) ·
   서버가 그린 단추는 켜진 채라 스크립트가 돌기 전 한순간 「고른 상태」 색이 떴다. 스크립트가 없으면 막대는 기본 색이고 단추는 그대로 눌린다 */
.flo-main .flo-result-tools:has([data-selection-submit][aria-disabled="false"]) {
    background: var(--flo-select-fill); box-shadow: inset 0 0 0 1px var(--flo-select-border);
}
@media (max-width: 860px) {
    .flo-main .flo-result-tools { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .flo-main .flo-result-tools { transition: none; }
}
/*
 | ③ 인플루언서 상세 머리 줄의 꼬리표(카테고리 · 규모 등급 · 이메일 유무 · 직접등록). 13/600 · 높이 24 · 반경 4 · 옅은 회색 면.
 |    템플릿 목록 「기본」 꼬리표(`flo-template-default-badge`)와 같은 크기다. 상태가 아니라 성격이라 색(신호)은 쓰지 않는다.
 |    이메일이 없으면 글자가 한 단계 흐리다(검색 카드 바닥 「이메일 없음」과 같은 판단).
 */
.flo-inf-tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.flo-main .flo-inf-tag {
    display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 4px;
    background: var(--flo-line-soft); color: var(--flo-ink-2);
    font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption); white-space: nowrap;
}
.flo-main .flo-inf-tag > .flo-icon { flex: none; }
.flo-main .flo-inf-tag.flo-inf-tag--off { color: var(--flo-ink-3); font-weight: 400; }
/*
 | ④ 메모 한 건 · 「누가 · 언제」 머리 줄 + 본문(댓글 한 건 짜임). 머리는 작성자 13/600 · 시각 캡션, 본문과 사이 4.
 */
.flo-main .flo-memo-note__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 4px; }
.flo-main .flo-memo-note__who { font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption); color: var(--flo-ink-1); }
/*
 | ⑥ 메모 한 건의 수정 · 삭제 (2026-10-20 · 이슈 #1852 · 🧑 "메모 수정/삭제가 안 되네? 고쳐").
 | 🔑 연필 · 휴지통은 관심목록 이름의 두 단추와 같은 32 선 아이콘 단추(`.flo-icon-btn`)이고 메모 상자 오른쪽 위에 선다.
 |    머리 줄은 두 단추 자리(32 + 4 + 32)만큼 오른쪽을 비운다.
 | 🔑 연필로 펴면 본문 대신 수정 칸이 서고 두 단추는 숨는다(관심목록 이름 수정과 같다 · `:has([open])`).
 | 🔑 display 를 겨루는 규칙은 진 쪽 클래스(`.flo-icon-btn`)를 함께 적는다(`DisplayOverrideGuardTest`).
 */
.flo-main ul.flo-notes__list > li.flo-memo-note { position: relative; }
.flo-main .flo-memo-note > .flo-memo-note__head { padding-right: 72px; }
.flo-main .flo-memo-note__del { position: absolute; top: 8px; right: 8px; }
.flo-main .flo-note-edit > .flo-note-edit__pencil { position: absolute; top: 8px; right: 44px; cursor: pointer; }
.flo-main .flo-note-edit > .flo-note-edit__pencil::-webkit-details-marker { display: none; }
.flo-main .flo-note-edit > .flo-note-edit__pencil::marker { content: ''; }
.flo-main .flo-note-edit[open] > .flo-icon-btn.flo-note-edit__pencil,
.flo-main .flo-memo-note:has(> .flo-note-edit[open]) > .flo-icon-btn.flo-memo-note__del { display: none; }
.flo-main .flo-memo-note:has(> .flo-note-edit[open]) > .flo-usertext { display: none; }
.flo-main .flo-note-edit__form textarea { width: 100%; max-width: none; min-height: 96px; }
.flo-main .flo-note-edit__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.flo-main .flo-note-edit__foot > [data-flo-charcount-out] { margin-right: auto; }
/*
 | ⑤ 관심목록 상세 창 · 목록 머리 줄(「전체 N건」 왼쪽, 검색 · 정렬 · 쪽 크기 오른쪽)과 표 사이 자리(`flo-table-block__bar`).
 | 🔑 도구 칸은 높이 40 하나다(검색 칸 · 검색 단추 · 정렬 상자 · 쪽 크기 상자). 검색 칸 폭 240, 정렬 상자는 글자 폭.
 | 🔑 860 이하에서는 도구가 건수 아래 한 줄을 다 쓰고, 640 이하에서는 검색 줄과 정렬 · 쪽 크기 줄로 나뉜다.
 */
.flo-main .flo-table-block__bar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 12px; }
.flo-main .flo-table-block__bar > .flo-chipbar { margin: 0; }
.flo-main .flo-table-block__tools > .flo-member-tools { flex-wrap: nowrap; gap: 8px 16px; }
.flo-main .flo-table-block__tools .flo-member-tools__search { flex: 0 1 auto; }
.flo-main .flo-table-block__tools .flo-member-tools__search .flo-filtergrid__keyword { width: 240px; flex: 0 1 240px; }
.flo-main .flo-table-block__tools .flo-member-tools__search .flo-search-submit { min-width: 72px; } /* 목록 머리 줄 안에서는 다른 도구 칸과 같은 글자 폭 단추(눈금 40 · 좌우 16) */
.flo-main .flo-member-tools__sort > select { width: auto; min-width: 0; height: var(--flo-control-h); }
.flo-main .flo-inf-tag.flo-inf-tag--tier { text-transform: uppercase; } /* 검색 카드의 등급 칩(「MID」)과 같은 글자꼴 */
.flo-main .flo-member-tools__sort > label { white-space: nowrap; }
@media (max-width: 860px) {
    .flo-main .flo-folder-members > .flo-table-block__count { flex-wrap: wrap; row-gap: 12px; }
    .flo-main .flo-folder-members .flo-table-block__tools { flex: 1 1 100%; flex-wrap: wrap; flex-shrink: 1; min-width: 0; }
    .flo-main .flo-table-block__tools > .flo-member-tools { display: contents; } /* 검색 줄은 한 줄을 다 쓰고, 정렬 · 쪽 크기는 다음 한 줄에 나란히 선다 */
    .flo-main .flo-table-block__tools .flo-member-tools__search { flex: 1 1 100%; }
    .flo-main .flo-table-block__tools .flo-member-tools__search .flo-filtergrid__keyword { width: auto; flex: 1 1 auto; }
    .flo-main .flo-table-block__tools .flo-member-tools__sort { flex: 0 1 auto; }
}
/* ===== /#1783 ===== */

/* ===== #1785 ===== */
/*
 | 🆕 2026-10-15 (#1785 · 점검판 4차) 템플릿 화면 다듬기. 이 블록은 #1785 의 것이다.
 | ① 템플릿 목록 관리 칸: 단추 넷(킷 작은 단추 최소 88 · 사이 8)이 한 줄에 서는 폭 400(88 x 4 + 8 x 3 + 안여백 24).
 |    1199 이하에서는 두 개씩 두 줄(2 x 2 · 칸 폭 224)이다 · 셋 + 하나로 접혀 하나만 홀로 서지 않는다.
 |    640 이하 카드의 네 칸 격자(#1662)는 셈이 더 높아 그대로 이긴다.
 | 🔑 이름은 굵게(14/600) · 아래 설명은 캡션 그대로다.
 */
.flo-main .flo-template-list thead th.flo-th--acts { width: 400px; }
.flo-main .flo-template-list td .flo-row-actions { flex-wrap: nowrap; }
.flo-main .flo-template-name { font-weight: 600; }
@media (max-width: 1199px) {
    .flo-main .flo-template-list thead th.flo-th--acts { width: 224px; }
    .flo-main .flo-template-list td .flo-row-actions { display: grid; grid-template-columns: repeat(2, 88px); justify-content: center; }
}
/*
 | ② 치환변수 단추 줄(`x-variable-inserts`): 줄 맨 앞에 이름표 「치환변수」와 (i) 도움말이 서고 단추가 뒤따른다.
 |    이름표는 칸 이름표보다 한 단계 작은 13/600 · 흐린 글자다(칸 안의 덧말 자리).
 */
.flo-varins { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.flo-main .flo-varins__label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; line-height: var(--flo-lh-caption); color: var(--flo-ink-2); white-space: nowrap; }
/* ===== /#1785 ===== */

/* ===== #1786 ===== */
/*
 | 🆕 2026-10-15 (#1786 · 점검판 4차) 상세 정보 밀도 · 목록 · 대시보드 세부. 이 블록은 #1786 의 것이다.
 | ① 사실 줄(`x-fact-row`) · 응답 상세 · 정산 명세 머리 카드의 이름 아래 한 줄. 이름표 13/400 흐림 · 값 14/600(125- 묶음 C).
 |    짝 사이 24 · 이름표와 값 사이 8 · 좁으면 짝 단위로 접힌다(줄 사이 8). 이름 줄 아래 12.
 */
.flo-main .flo-fact-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 12px 0 0; }
.flo-fact-row__item { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.flo-main .flo-fact-row dt { margin: 0; font-size: 13px; font-weight: 400; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); white-space: nowrap; }
.flo-main .flo-fact-row dd { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 14px; font-weight: 600; line-height: var(--flo-lh-body); color: var(--flo-ink-1); word-break: keep-all; }
.flo-main .flo-fact-row dd > .flo-missing { font-weight: 400; }
.flo-fact-row__mark { display: inline-flex; }
.flo-fact-row__mark .flo-platform-mark { width: 16px; height: 16px; }
.flo-main .flo-page-head__body > :is(.flo-pd-facts, .flo-settle-facts) { margin-top: 12px; } /* 머리 카드 안 이름 줄 바로 아래 · 응답 상세 · 정산 명세 */
.flo-main .flo-fact-row-wrap > .flo-fact-row { margin: 0; } /* 🔻 2026-10-15 (#1786 검토) 이름 있는 묶음(`section`)으로 감쌌다 · 사이 12 는 감싼 쪽이 갖는다 */
/*
 | ② 대시보드 「밀린 일」 눈금(0 · 15 · 30 · 45 · 60일): 🧑 「그래프 바 밑에 0 15 이렇게 있는 부분에 선 그어져있으면 알기 좋기않을까?」
 |    막대 칸 아래 가로 축선(1px) 하나와 눈금마다 짧은 세로 표시(4)를 둔다. 표시는 그 숫자가 가리키는 자리다
 |    (처음 눈금 왼쪽 끝 · 마지막 눈금 오른쪽 끝 · 사이 눈금 글자 가운데 · 막대의 25 · 50 · 75% 격자선과 같은 자리).
 |    🔻 #1580 ~~숫자만(높이 18)~~ → 축선 + 표시 + 숫자(높이 28 · 숫자는 축선 아래 8).
 */
.flo-backlog-axis { height: 28px; }
.flo-backlog-axis { --flo-axis-ink: color-mix(in srgb, var(--flo-ink-3) 55%, transparent); } /* 회색 상자 바탕(`--flo-bg`) 위에서도 보이는 짙기 · 선 색(`--flo-line-strong`)은 390 에서 거의 보이지 않았다 */
.flo-backlog-axis::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--flo-axis-ink); }
.flo-backlog-tick { top: 8px; }
.flo-backlog-tick::before { content: ""; position: absolute; top: -8px; width: 1px; height: 4px; background: var(--flo-axis-ink); }
.flo-backlog-tick--start::before { left: 0; }
.flo-backlog-tick--end::before { right: 0; }
.flo-backlog-tick--between::before { left: 50%; }
/* ===== /#1786 ===== */

/* ===== #1996 ===== */
/*
 | 🆕 2026-11-05 (#1996) 표 행의 더보기(⋯) 목록 `x-row-menu` 와 템플릿 목록 관리 칸. 이 블록은 #1996 의 것이다.
 | ① 「⋯」 단추는 표 안 작은 단추와 같은 32 정사각형이다. 목록은 「⋯」 오른쪽 끝에 맞춰 아래로 펼친다(자리가 모자라면 위 · `flo-row-menu.js`).
 |    스크립트가 없으면 칸 안에서 펼친다 · 가로 넘김 칸에 걸리면 그 칸을 넘겨 닿는다(R-308).
 | ② 항목 높이 40 · 글자 14 · 위험 항목은 빨간 글자 · 눌리지 않는 항목은 흐린 글자 아래 까닭 한 줄(13 · R-313).
 | 🔑 선택자는 `[data-row-menu]` 아래로 묶는다 · 인플루언서 검색의 행 메뉴(같은 `flo-row-menu` 이름 · 휴대폰 전용)에 번지지 않게 한다.
 */
.flo-main [data-row-menu] { position: relative; display: inline-block; }
.flo-main [data-row-menu] > .flo-row-menu__btn {
    display: inline-grid; place-items: center; width: var(--flo-control-h-sm); height: var(--flo-control-h-sm);
    border: 1px solid var(--flo-line-strong); border-radius: var(--flo-radius);
    background: var(--flo-card); color: var(--flo-ink-2); font-size: 16px; line-height: 1; cursor: pointer; list-style: none;
}
.flo-main [data-row-menu] > .flo-row-menu__btn::-webkit-details-marker { display: none; }
.flo-main [data-row-menu] > .flo-row-menu__btn:hover,
.flo-main [data-row-menu][open] > .flo-row-menu__btn { border-color: var(--flo-primary); color: var(--flo-primary); }
.flo-main [data-row-menu] > .flo-row-menu__list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
    display: flex; flex-direction: column; min-width: 160px; padding: 4px;
    border: 1px solid var(--flo-line); border-radius: var(--flo-radius);
    background: var(--flo-card); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); text-align: left;
}
.flo-main [data-row-menu] .flo-row-menu__form { display: block; margin: 0; }
.flo-main [data-row-menu] .flo-row-menu__item {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 4px;
    width: 100%; min-height: var(--flo-control-h); padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
    color: var(--flo-ink-1); font-size: 14px; line-height: var(--flo-lh-ui); text-align: left; white-space: nowrap; cursor: pointer;
}
.flo-main [data-row-menu] .flo-row-menu__item:hover:not(:disabled) { background: var(--flo-primary-soft); }
.flo-main [data-row-menu] .flo-row-menu__item--danger { color: var(--sig-fail-ink); }
.flo-main [data-row-menu] .flo-row-menu__item--danger:hover { background: var(--sig-fail-bg); }
.flo-main [data-row-menu] .flo-row-menu__item:disabled { padding-block: 8px; color: var(--flo-ink-3); cursor: not-allowed; }
.flo-main [data-row-menu] .flo-row-menu__why { font-size: 13px; line-height: var(--flo-lh-caption); color: var(--flo-ink-3); }
.flo-main [data-row-menu] .flo-row-menu__sep { margin: 4px 0; border: 0; border-top: 1px solid var(--flo-line); }
/* 🔑 표의 행마다 쌓임 맥락이 따로라(`tr` 의 `z-index: 1`) 펼친 목록이 아래 행 밑으로 들어간다 · 열린 동안만 그 행을 올린다(검색 행 메뉴와 같은 방식) */
.flo-main tr:has(> td [data-row-menu][open]) { z-index: 3; }
/*
 | ③ 템플릿 목록 관리 칸: 수정(작은 단추 88) + 사이 8 + 「⋯」 32 + 안여백 24 = 152. 모든 폭에서 한 줄이다.
 |    🔻 ~~400 · 1199 이하 2 x 2 격자 224(#1785) · 640 이하 네 칸 격자(#1662)~~ 단추가 둘로 줄어 걷는다.
 |    휴대폰 카드에서는 수정이 남는 폭을 받고 「⋯」는 44 누름 자리다(WCAG 2.5.8).
 */
.flo-main .flo-template-list thead th.flo-th--acts { width: 152px; }
@media (max-width: 1199px) {
    .flo-main .flo-template-list thead th.flo-th--acts { width: 152px; }
    .flo-main .flo-template-list td .flo-row-actions { display: flex; }
}
@media (max-width: 640px) {
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions { display: flex; }
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions > a { flex: 1 1 auto; width: auto; }
    .flo-main .flo-template-list td[data-stack="foot"] [data-row-menu] > .flo-row-menu__btn { width: 44px; height: 44px; }
    .flo-main .flo-template-list td[data-stack="foot"] .flo-row-actions .flo-row-menu__item { width: 100%; padding-inline: 12px; }
}
/* ===== /#1996 ===== */