@charset "utf-8";
/*
 | 공개 소개 화면(FLO-PUB-001 · `/welcome`) 전용 (2026-10-08 · 이슈 #1599 · 🧑 3차 시안 확정)
 | 🔻 2026-10-22 (#1859) 작성 방법 화면(FLO-PUB-004 · `/welcome/guide`)도 이 파일로 그린다(아래 「11. 작성 방법」).
 |
 | 🧑 *"일단 이정도만 해놓을까? 현재 버전은 따로 백업해두고 이걸로 변환처리하는걸로?"*
 |    옛 화면(원본 랜딩 `main.css` + `flo-welcome.css`)은 `agent/archive/welcome-20261008/` 에 있다.
 |
 | 🔑 **셸이 `landing` 일 때만 싣는다**(`components/layouts/intro.blade.php`). 함께 싣는 것은
 |    `fonts.css`(앱이 가진 Pretendard) 하나다. 🚫 `common.css` · `main.css` 를 함께 싣지 마라 ·
 |    `*` 글자 간격과 `.visual` 규칙이 이 모양을 덮는다.
 | 🔑 **색은 전부 FLO 보라 `#6d5bc7` 한 축에서 낸다**(시안 실측 `ref/notes.md`). 깊은 보라 구역 ·
 |    연한 라벤더 구역 · 브랜드 보라 블록이 같은 축의 명도 단계로 읽히게 한다.
 | 🔑 **한글은 낱말 단위로 줄을 바꾼다**(`word-break: keep-all` · R-202 · R-308).
 | 🔑 **기기 틀(노트북 · 휴대폰 · 브라우저 창)은 그림 없이 CSS 로만 그린다.** 🚫 제조사 로고를 넣지 마라.
 |    틀 안의 주소창 · 상태 표시줄 글자는 낭독에서 빠지는 장식이다(`aria-hidden`).
 */

.flo-ld {
  --flo-ld-brand: #6d5bc7;
  --flo-ld-brand-ink: #5a48b6;
  --flo-ld-brand-hover: #7b6ad1;
  --flo-ld-deep: #120d26;
  --flo-ld-deep-2: #1d1640;
  --flo-ld-deep-line: rgba(207, 198, 247, 0.14);
  --flo-ld-lav-hi: #cfc6f7;
  --flo-ld-lav-mid: #a99bea;
  --flo-ld-lav-bg: #f6f4fd;
  --flo-ld-lav-panel: #ebe6fb;
  --flo-ld-marker: #e2dbfb;
  --flo-ld-ink: #1a1433;
  --flo-ld-ink-2: #4a4566;
  --flo-ld-ink-3: #6b6690;
  --flo-ld-line: rgba(109, 91, 199, 0.18);
  --flo-ld-wrap: 1200px;
  --flo-ld-gutter: 40px;
  /*
   * 🆕 2026-10-08 (#1599 검토) 기기 틀이 칸 밖으로 나가도 되는 최대 폭.
   * 🔑 감싸개(`.flo-ld-wrap`) 바깥 여백에서 16px 를 남긴 값이다. 1440 에서는 144px 라 시안의 「판 밖으로
   *    걸쳐 나온 화면」이 그대로 서고, 1200 이하에서는 24px(좁은 폭 4px)로 줄어 창 밖으로 잘리지 않는다.
   * 🚨 직전에는 틀 폭이 680 · 720 · 740px 로 고정이라 1081 ~ 1360 에서 창 밖으로 나가 잘렸다(1100 에서 204px).
   */
  --flo-ld-bleed: max(0px, (100vw - var(--flo-ld-wrap)) / 2 + var(--flo-ld-gutter) - 16px);
  --flo-ld-shot-shadow: 0 1px 2px rgba(26, 20, 51, 0.06), 0 40px 80px -36px rgba(36, 22, 104, 0.45);

  margin: 0;
  background: var(--flo-ld-lav-bg);
  color: var(--flo-ld-ink);
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif;
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
/* 🔑 바탕 규칙은 `:where()` 로 감싸 무게를 0 으로 둔다 · 아래 부품 규칙(클래스 하나)이 늘 이긴다 */
:where(.flo-ld) *, :where(.flo-ld) *::before, :where(.flo-ld) *::after { box-sizing: border-box; }
.flo-ld > main { display: block; overflow-x: clip; }
:where(.flo-ld) img { display: block; max-width: 100%; height: auto; }
:where(.flo-ld) a { color: inherit; text-decoration: none; }
:where(.flo-ld) :is(h1, h2, h3, p, figure, blockquote) { margin: 0; }
:where(.flo-ld) :is(h1, h2, h3) { text-wrap: balance; letter-spacing: -0.04em; font-weight: 700; }
:where(.flo-ld) :is(ol, ul) { list-style: none; margin: 0; padding: 0; }
.flo-ld-wrap { max-width: var(--flo-ld-wrap); margin: 0 auto; padding: 0 var(--flo-ld-gutter); }

/* ── 단추 (완전 알약형) ─────────────────────────────────── */
.flo-ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 60px; padding: 0 34px; border-radius: 999px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.flo-ld-btn:focus-visible { outline: 3px solid var(--flo-ld-lav-hi); outline-offset: 3px; }
.flo-ld-btn--primary { background: var(--flo-ld-brand); color: #fff; box-shadow: 0 10px 30px -12px rgba(109, 91, 199, 0.9); }
.flo-ld-btn--primary:hover { background: var(--flo-ld-brand-hover); transform: translateY(-1px); }
.flo-ld-btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(207, 198, 247, 0.38); }
.flo-ld-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--flo-ld-lav-hi); }
.flo-ld-btn--light { background: #fff; color: var(--flo-ld-ink); }
.flo-ld-btn--light:hover { transform: translateY(-1px); }
.flo-ld-btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }
.flo-ld-btn__arrow { font-weight: 500; transform: translateY(-1px); }

/* ── 머리말 · 형광펜 · 라벤더 강조 ───────────────────────── */
.flo-ld-eyebrow { display: inline-block; margin-bottom: 20px; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; color: var(--flo-ld-brand-ink); }
.flo-ld-dark .flo-ld-eyebrow { color: var(--flo-ld-lav-mid); }
/* 아래 38% 만 칠하는 형광펜 */
.flo-ld-mark { padding: 0 0.04em; color: var(--flo-ld-brand-ink); background: linear-gradient(var(--flo-ld-marker), var(--flo-ld-marker)) 0 88% / 100% 38% no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* 글자에 오려 쓰는 라벤더 그라데이션 */
.flo-ld-glow { background: linear-gradient(90deg, #fff 0%, var(--flo-ld-lav-hi) 45%, var(--flo-ld-lav-mid) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── 머리 띠 ────────────────────────────────────────────── */
/*
 | 🔻 2026-10-10 (#1611) ~~`position: absolute`(첫 화면 위에만 선다)~~ → `sticky` · 머리가 화면을 따라 내려온다(웹 관례).
 |    🚨 직전에는 머리와 오른쪽 단추(앱 설치 · 이용 방법 보기)가 첫 화면에만 있어, 약 11,000px 동안 단추가 없었다.
 | 🔑 첫 화면 위에 겹쳐 서던 자리는 그대로다 · 머리 높이만큼 아래 여백을 당긴다(`margin-bottom`). 첫 화면이 같은 깊은 보라라
 |    바탕을 칠해도 처음 모습은 같다.
 | 🔑 높이는 `--flo-ld-nav-h` 한 값이다 · 첫 화면 위 여백과 구역 바로가기의 도착 자리(`scroll-padding-top`)가 함께 읽는다.
 |    🚫 숫자를 따로 적지 마라 · 머리 높이가 바뀌면 바로가기가 머리 아래로 숨는다.
 | 🔑 소개 화면(`body.flo-ld`)에만 건다. 작성 방법 · 약관 화면의 머리(`.flo-ld-chrome`)는 본문 위 제자리다.
 |    🔻 2026-10-22 (#1859) 작성 방법 화면도 `body.flo-ld` 다(셸 `landing`) · 머리가 따라 내려온다. 제자리 머리는 약관 두 화면이다.
 */
:root:has(> body.flo-ld) { --flo-ld-nav-h: 84px; scroll-padding-top: calc(var(--flo-ld-nav-h) + 16px); }
.flo-ld-nav { position: sticky; top: 0; left: 0; right: 0; z-index: 20; margin-bottom: calc(-1 * var(--flo-ld-nav-h, 0px)); background: var(--flo-ld-deep); }
.flo-ld-nav .flo-ld-wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.flo-ld-logo { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.flo-ld-logo small { padding: 2px 7px; border: 1px solid rgba(207, 198, 247, 0.35); border-radius: 6px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--flo-ld-lav-hi); }
.flo-ld-nav__menu { display: flex; gap: 36px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.78); }
.flo-ld-nav__menu a:hover, .flo-ld-nav__menu a:focus-visible { color: #fff; }

/* ── 1. 첫 화면 (깊은 보라 · 두 줄 큰 제목) ───────────────── */
/* 🔻 2026-10-10 (#1611) 위 여백 100px → 머리 높이 + 16 (넓은 폭에서는 같은 100px) · 좁은 폭에서 머리가 구역 바로가기 줄만큼 높아진다 */
.flo-ld-hero { position: relative; overflow: clip; padding: calc(var(--flo-ld-nav-h, 84px) + 16px) 0 70px; background: var(--flo-ld-deep); color: #fff; text-align: center; }
.flo-ld-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: var(--flo-ld-lav-bg); }
.flo-ld-hero h1 { font-size: clamp(44px, 6.1vw, 88px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 800; }
.flo-ld-hero h1 span { display: block; }
.flo-ld-hero__lead { max-width: 640px; margin: 20px auto 0; font-size: 20px; line-height: 1.65; font-weight: 400; color: rgba(255, 255, 255, 0.7); text-wrap: pretty; }
.flo-ld-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.flo-ld-hero__note { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.6); }
.flo-ld-hero__stage { position: relative; z-index: 1; max-width: 1180px; margin: 28px auto 0; padding: 0 var(--flo-ld-gutter); }
.flo-ld-hero__group { position: relative; max-width: 1100px; margin: 0 auto; padding: 30px 0 0; text-align: left; }
.flo-ld-hero__group::before { content: ""; position: absolute; top: 0; right: -44px; bottom: -60px; left: -44px; border-radius: 36px 36px 0 0; background: linear-gradient(180deg, rgba(109, 91, 199, 0.3) 0%, rgba(109, 91, 199, 0.1) 45%, rgba(109, 91, 199, 0) 85%); box-shadow: inset 0 1px 0 rgba(207, 198, 247, 0.18); }
.flo-ld-hero__group > .flo-ld-hero__kpi { position: absolute; z-index: 2; left: -36px; bottom: -40px; width: 320px; box-shadow: 0 0 0 1px rgba(26, 20, 51, 0.08), 0 28px 56px -20px rgba(8, 4, 24, 0.6); }

/* ── 2. 카페24 연동 띠 ──────────────────────────────────── */
.flo-ld-band { padding: 72px 0 24px; }
.flo-ld-band ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--flo-ld-line); }
.flo-ld-band li { padding: 26px 28px 0 0; }
.flo-ld-band li + li { padding-left: 28px; border-left: 1px solid var(--flo-ld-line); }
.flo-ld-band strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.flo-ld-band span { display: block; margin-top: 4px; font-size: 15px; color: var(--flo-ld-ink-3); }

/* ── 공통 구역 ──────────────────────────────────────────── */
.flo-ld-sec { padding: 136px 0; }
.flo-ld-sec--flush { padding-top: 0; }
.flo-ld-head { max-width: 860px; }
.flo-ld-head h2 { font-size: clamp(32px, 4.4vw, 60px); line-height: 1.14; }
.flo-ld-head p { max-width: 640px; margin-top: 22px; font-size: 19px; color: var(--flo-ld-ink-2); text-wrap: pretty; }
.flo-ld-head--spaced { margin-top: 150px; }
.flo-ld-head--lead { margin-bottom: 96px; }

/* ── 3. 운영자 고민 셋 ──────────────────────────────────── */
.flo-ld-pains { margin-top: 64px; }
.flo-ld-pain { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--flo-ld-line); }
.flo-ld-pain:last-child { border-bottom: 1px solid var(--flo-ld-line); }
.flo-ld-pain__no { font-size: 15px; font-weight: 700; color: var(--flo-ld-brand); font-variant-numeric: tabular-nums; }
.flo-ld-pain h3 { font-size: 24px; line-height: 1.4; letter-spacing: -0.03em; }
.flo-ld-pain p { font-size: 17px; color: var(--flo-ld-ink-2); }
.flo-ld-pain p b { margin-right: 8px; font-weight: 800; color: var(--flo-ld-brand-ink); }

/* ── 4. 다섯 단계 띠 ────────────────────────────────────── */
.flo-ld-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; margin-top: 56px; border: 1px solid var(--flo-ld-line); border-radius: 20px; background: #fff; }
.flo-ld-step { position: relative; padding: 28px 26px 30px; }
.flo-ld-step + .flo-ld-step { border-left: 1px solid var(--flo-ld-line); }
.flo-ld-step__no { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; color: var(--flo-ld-brand); }
.flo-ld-step h3 { margin-top: 14px; font-size: 20px; line-height: 1.35; letter-spacing: -0.03em; }
.flo-ld-step p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--flo-ld-ink-3); }
.flo-ld-step__go { position: absolute; top: 26px; right: 22px; font-size: 16px; color: var(--flo-ld-brand); opacity: 0.55; }
.flo-ld-step:last-child .flo-ld-step__go { display: none; }

/* ── 5. 기능 넷 (글 · 색 판 위 화면 좌우 교대) ───────────── */
.flo-ld-feature { --gap-top: 150px; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: center; }
.flo-ld-feature + .flo-ld-feature { margin-top: var(--gap-top); }
.flo-ld-feature--flip { grid-template-columns: minmax(0, 1fr) 400px; }
.flo-ld-feature--flip .flo-ld-feature__text { order: 2; }
.flo-ld-feature--far { --gap-top: 250px; }
.flo-ld-feature__tag { display: inline-block; margin-bottom: 18px; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--flo-ld-brand-ink); }
.flo-ld-feature__text h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.26; }
.flo-ld-feature__text p { margin-top: 20px; font-size: 18px; color: var(--flo-ld-ink-2); text-wrap: pretty; }
.flo-ld-flist { margin-top: 28px; border-top: 1px solid var(--flo-ld-line); }
.flo-ld-flist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; border-bottom: 1px solid var(--flo-ld-line); font-size: 16px; }
.flo-ld-flist b { padding-top: 2px; font-size: 14px; font-weight: 700; color: var(--flo-ld-brand); }
.flo-ld-flist strong { margin-right: 8px; font-weight: 700; color: var(--flo-ld-ink); }
.flo-ld-flist em { font-style: normal; color: var(--flo-ld-ink-3); }

.flo-ld-visual { position: relative; padding: 64px 0 64px 64px; }
.flo-ld-visual::before { content: ""; position: absolute; top: 0; right: -9999px; bottom: 0; left: 0; border-radius: 28px 0 0 28px; background: var(--flo-ld-lav-panel); }
.flo-ld-feature--flip .flo-ld-visual { display: flex; justify-content: flex-end; padding: 64px 64px 64px 0; }
.flo-ld-feature--flip .flo-ld-visual::before { right: 0; left: -9999px; border-radius: 0 28px 28px 0; }
.flo-ld-visual--laptop { padding: 72px 0 88px 64px; }
.flo-ld-feature--flip .flo-ld-visual--laptop { padding: 72px 64px 88px 0; }

/* ── 화면 틀 (모든 그림이 같은 반경 · 테두리 · 그림자) ───── */
.flo-ld-shot { position: relative; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 20, 51, 0.08), var(--flo-ld-shot-shadow); }
.flo-ld-shot img { width: 100%; }
/* 🔻 2026-10-08 (#1599 검토) `width: var(--w)` 고정 → 칸 폭 + `--flo-ld-bleed` 를 넘지 않게 줄인다 */
.flo-ld-visual .flo-ld-browser { position: relative; z-index: 1; flex-shrink: 0; width: min(var(--w, 680px), 100% + var(--flo-ld-bleed)); max-width: none; }
.flo-ld-browser--680 { --w: 680px; }
.flo-ld-browser--720 { --w: 720px; }
.flo-ld-browser--740 { --w: 740px; }

/* ── 브라우저 창 ─────────────────────────────────────────── */
.flo-ld-browser { display: flex; flex-direction: column; }
.flo-ld-browser__bar { position: relative; flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(26, 20, 51, 0.07); background: linear-gradient(#faf9fd, #f1eff8); }
.flo-ld-browser__bar i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px rgba(26, 20, 51, 0.12); }
.flo-ld-browser__bar i:nth-child(1) { background: #f3a29b; }
.flo-ld-browser__bar i:nth-child(2) { background: #f5d38a; }
.flo-ld-browser__bar i:nth-child(3) { background: #9fd8a6; }
.flo-ld-browser__bar span { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 6px; height: 22px; min-width: min(46%, 320px); padding: 0 14px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 20, 51, 0.08); font-size: 12px; font-weight: 500; letter-spacing: 0; color: #77729a; white-space: nowrap; }
.flo-ld-browser__bar svg { flex: none; width: 10px; height: 10px; }

/* ── 휴대폰 (인플루언서 화면) ─────────────────────────────── */
.flo-ld-phone { --pw: 260px; position: absolute; z-index: 3; width: var(--pw); padding: calc(var(--pw) * 0.035); border-radius: calc(var(--pw) * 0.17); background: #0b0b0d; box-shadow: inset 0 0 0 1px #1d1d21, 0 0 0 calc(var(--pw) * 0.012) #77767e, 0 0 0 calc(var(--pw) * 0.02) #3d3c43, 0 0 0 calc(var(--pw) * 0.022) #1a1a1e, 0 50px 90px -30px rgba(36, 22, 104, 0.6), 0 18px 36px -18px rgba(10, 6, 24, 0.5); }
.flo-ld-phone::before, .flo-ld-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #4a4950, #8d8c94 50%, #4a4950); }
.flo-ld-phone::before { left: calc(var(--pw) * -0.022 - 3px); top: 22%; height: 13%; box-shadow: 0 calc(var(--pw) * 0.19) 0 #2a2540; }
.flo-ld-phone::after { right: calc(var(--pw) * -0.022 - 3px); top: 28%; height: 17%; }
.flo-ld-phone__screen { position: relative; overflow: hidden; aspect-ratio: 390 / 800; border-radius: calc(var(--pw) * 0.135); background: #fff; }
.flo-ld-phone__screen::before { content: ""; position: absolute; z-index: 3; top: calc(var(--pw) * 0.035); left: 50%; transform: translateX(-50%); width: 27%; height: calc(var(--pw) * 0.082); border-radius: 999px; background: #07060d; }
.flo-ld-phone__screen::after { content: ""; position: absolute; z-index: 2; bottom: 7px; left: 50%; transform: translateX(-50%); width: 36%; height: 4px; border-radius: 4px; background: rgba(26, 20, 51, 0.28); }
.flo-ld-phone__screen img { position: absolute; top: calc(var(--pw) * 0.155); left: 0; width: 100%; }
.flo-ld-phone__sb { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: calc(var(--pw) * 0.155); padding: 0 9% 0 11%; background: #fff; font-size: calc(var(--pw) * 0.052); font-weight: 600; letter-spacing: -0.01em; color: #111; }
.flo-ld-phone__sb svg { display: block; width: auto; height: calc(var(--pw) * 0.042); }
.flo-ld-phone__sb .flo-ld-phone__ic { display: flex; align-items: center; gap: calc(var(--pw) * 0.018); }
/* 자리별 크기 · 위치 */
.flo-ld-phone--hero { --pw: 250px; right: 10px; top: 150px; }
.flo-ld-phone--proposal { --pw: 250px; right: -40px; bottom: -60px; }
/* 🔻 2026-10-08 (#1599 검토) `right: -120px` 고정 → 창 오른쪽 여백(`--flo-ld-bleed`)만큼만 나간다 */
.flo-ld-phone--campaign { --pw: 240px; right: calc(min(120px, var(--flo-ld-bleed)) * -1); bottom: -100px; }
/*
 * 🔻 2026-10-08 (#1599 검토) `top: 300px` → `min(300px, 62cqw - 40px)`. 노트북이 칸 폭을 따라 줄면서(1100 에서 약 280
 *    높이) 300 아래의 휴대폰이 노트북 밑으로 떨어져 겹침이 사라졌다 · 칸이 좁을수록 휴대폰을 올린다.
 */
.flo-ld-phone--block { --pw: 200px; left: -30px; top: min(300px, 62cqw - 40px); }

/* ── 노트북 (운영자 화면) ─────────────────────────────────── */
/*
 * 🔻 2026-10-08 (#1599 검토) `width: var(--lw)` 고정 → 칸 폭을 넘지 않는다. `--lw` 는 이제 「가장 클 때의 폭」이다.
 * 🔑 받침(`__base`)이 몸체보다 양쪽에 7% 씩 더 나간다. 그래서 칸 안에서는 1.14 로, 한쪽으로만 걸치는 판
 *    (`.flo-ld-visual`) · 보라 블록 안에서는 1.07 로 나눈다 · 받침까지 창 안에 둔다.
 * 🔑 판 · 보라 블록 안에서는 `--flo-ld-bleed` 만큼 칸 밖으로 걸쳐도 된다(시안의 걸쳐 나온 화면).
 */
.flo-ld-laptop { --lw: 720px; position: relative; z-index: 1; flex: none; width: min(var(--lw), 100% / 1.14); }
.flo-ld-visual .flo-ld-laptop, .flo-ld-block__shot .flo-ld-laptop { width: min(var(--lw), (100% + var(--flo-ld-bleed)) / 1.07); }
.flo-ld-laptop--hero { --lw: 916px; }
.flo-ld-laptop--680 { --lw: 680px; }
.flo-ld-laptop__lid { position: relative; padding: calc(var(--lw) * 0.018) calc(var(--lw) * 0.018) calc(var(--lw) * 0.024); border-radius: calc(var(--lw) * 0.022) calc(var(--lw) * 0.022) 6px 6px; background: #0c0c0f; box-shadow: inset 0 0 0 1px #2b2b31, 0 0 0 1px #6b6a73, 0 0 0 2px #2a2a2f; }
.flo-ld-laptop__lid::before { content: ""; position: absolute; z-index: 2; top: calc(var(--lw) * 0.018 - 1px); left: 50%; transform: translateX(-50%); width: 11%; height: calc(var(--lw) * 0.02); border-radius: 0 0 8px 8px; background: #0c0c0f radial-gradient(circle at 50% 45%, #2d3446 0 1.6px, #14161c 2.2px 3px, transparent 3.4px); }
.flo-ld-laptop__scr { position: relative; display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 4px; background: #f4f5f7; }
.flo-ld-laptop__addr { flex: none; display: flex; align-items: center; justify-content: flex-start; height: 22px; padding-left: 12px; border-bottom: 1px solid rgba(26, 20, 51, 0.07); background: #fff; }
.flo-ld-laptop__addr span { display: flex; align-items: center; gap: 5px; height: 15px; padding: 0 12px; border-radius: 5px; background: #f1f0f6; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #8a86a6; white-space: nowrap; }
.flo-ld-laptop__addr svg { width: 8px; height: 8px; }
.flo-ld-laptop__scr img { display: block; width: 100%; }
.flo-ld-laptop__base { position: relative; height: calc(var(--lw) * 0.022); margin: 0 -7%; border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%; background: linear-gradient(180deg, #f4f4f7 0%, #d9d9e0 30%, #b7b7c1 75%, #8f8f9a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 1px rgba(0, 0, 0, 0.18); }
.flo-ld-laptop__base::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 15%; height: 42%; border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #a9a9b3, #cfcfd6); }
.flo-ld-laptop::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: calc(var(--lw) * -0.03); height: calc(var(--lw) * 0.05); border-radius: 50%; background: radial-gradient(closest-side, rgba(18, 13, 38, 0.42), rgba(18, 13, 38, 0)); }

/* ── 6. 브랜드 보라 블록 (매출 기준) ─────────────────────── */
.flo-ld-block { position: relative; margin-top: 120px; padding: 0 0 120px; background: var(--flo-ld-brand); color: #fff; }
.flo-ld-block .flo-ld-wrap { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 72px; align-items: start; }
.flo-ld-block__text { padding-top: 128px; }
/*
 * 🔻 2026-10-08 (#1599 검토) 보라 블록(`#6d5bc7`) 위 글자를 대비 4.5:1 이상으로 올렸다(R-314 접근성 바닥).
 *    머리말 `lav-hi` 3.29 → `lav-bg` 4.85 · 본문 흰색 86% 4.39 → 흰색 5.29 ·
 *    표 머리와 비교 칸 흰색 78% 3.92 → `lav-bg` 4.85. FLO 칸은 흰색 · 굵기 600 으로 그대로 구분된다.
 * 🚫 이 블록 위 글자에 투명도를 주지 마라 · 보라 바탕과 섞여 대비가 4.5 아래로 내려간다.
 */
.flo-ld-block__text .flo-ld-eyebrow { color: var(--flo-ld-lav-bg); }
.flo-ld-block__text h2 { font-size: clamp(34px, 4.4vw, 60px); line-height: 1.12; }
.flo-ld-block__text p { max-width: 430px; margin-top: 22px; font-size: 19px; color: #fff; }
/*
 * 🔻 2026-10-08 (#1599 검토) `min-height: 560px` → `700px`. 휴대폰(`--block`)은 위에서 300 내려 서고 높이가
 *    약 396 이라 560 칸 아래로 136 나가 비교표 열 머리 「FLO 쿠폰 귀속」을 가렸다.
 * 🔑 칸을 휴대폰 바닥(약 696)까지 늘려 휴대폰 전체가 표 위에 선다. 노트북 위에 겹치는 시안 자리는 그대로다.
 *    🚫 휴대폰을 칸 바닥에 붙이지 마라 · 노트북의 순매출 숫자를 가린다(시험해 봤다).
 * 🔑 칸 폭(`cqw`)으로 휴대폰의 세로 자리를 정하려고 크기 기준 칸(`container-type`)으로 둔다(아래 `--block`).
 */
.flo-ld-block__shot { position: relative; container-type: inline-size; min-height: 700px; margin-top: -110px; }
.flo-ld-block__shot .flo-ld-laptop { margin-left: auto; }
.flo-ld-compare { grid-column: 1 / -1; width: 100%; margin-top: 40px; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.flo-ld-compare th, .flo-ld-compare td { padding: 15px 14px 15px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); text-align: left; vertical-align: top; }
.flo-ld-compare thead th { padding-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--flo-ld-lav-bg); }
.flo-ld-compare thead th.is-flo { color: #fff; }
.flo-ld-compare tbody th { width: 22%; font-weight: 600; color: #fff; }
.flo-ld-compare td { width: 39%; color: var(--flo-ld-lav-bg); }
.flo-ld-compare td.is-flo { font-weight: 600; color: #fff; }

/* ── 7. 쇼핑몰 안에서 ────────────────────────────────────── */
.flo-ld-mall { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 80px; align-items: center; margin-top: 64px; }
.flo-ld-mall ol { counter-reset: flo-ld-mall; }
.flo-ld-mall li { position: relative; padding: 22px 0 22px 56px; border-top: 1px solid var(--flo-ld-line); counter-increment: flo-ld-mall; }
.flo-ld-mall li:last-child { border-bottom: 1px solid var(--flo-ld-line); }
.flo-ld-mall li::before { content: counter(flo-ld-mall, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-size: 14px; font-weight: 700; color: var(--flo-ld-brand); }
.flo-ld-mall li strong { display: block; font-size: 19px; letter-spacing: -0.02em; }
.flo-ld-mall li span { display: block; margin-top: 4px; font-size: 16px; color: var(--flo-ld-ink-2); }

/* ── 8. 신뢰 구역 (깊은 보라) ─────────────────────────────── */
.flo-ld-trust { padding: 150px 0 140px; background: var(--flo-ld-deep); color: #fff; }
.flo-ld-trust .flo-ld-head p { color: rgba(255, 255, 255, 0.7); }
.flo-ld-trust__sub { margin-top: 128px; }
.flo-ld-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 72px; border-top: 1px solid var(--flo-ld-deep-line); }
.flo-ld-stat { padding: 36px 32px 0 0; }
.flo-ld-stat + .flo-ld-stat { padding-left: 32px; border-left: 1px solid var(--flo-ld-deep-line); }
.flo-ld-stat__num { font-size: clamp(56px, 6.6vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.flo-ld-stat__num small { margin-left: 6px; font-size: clamp(21px, 2.5vw, 36px); font-weight: 600; letter-spacing: -0.02em; color: var(--flo-ld-lav-hi); }
.flo-ld-stat h3 { margin-top: 22px; font-size: 19px; letter-spacing: -0.02em; }
.flo-ld-stat p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, 0.66); }
.flo-ld-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.flo-ld-review { display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding: 34px 32px 30px; border-radius: 24px; background: var(--flo-ld-deep-2); }
.flo-ld-review blockquote { font-size: 18px; line-height: 1.7; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.9); text-wrap: pretty; }
.flo-ld-review figcaption { font-size: 14px; color: rgba(255, 255, 255, 0.62); }
.flo-ld-review figcaption strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--flo-ld-lav-hi); }
.flo-ld-privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.flo-ld-privacy li { padding: 30px 32px; border: 1px solid var(--flo-ld-deep-line); border-radius: 24px; }
.flo-ld-privacy strong { display: block; font-size: 18px; letter-spacing: -0.02em; }
.flo-ld-privacy p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: rgba(255, 255, 255, 0.66); }

/* ── 9. 자주 묻는 질문 ──────────────────────────────────── */
.flo-ld-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; }
.flo-ld-faq__list { border-top: 1px solid var(--flo-ld-line); }
.flo-ld-faq__item { border-bottom: 1px solid var(--flo-ld-line); }
.flo-ld-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; list-style: none; cursor: pointer; }
.flo-ld-faq__item summary::-webkit-details-marker { display: none; }
.flo-ld-faq__item summary::after { content: "+"; font-size: 26px; font-weight: 400; line-height: 1; color: var(--flo-ld-brand); transition: transform 0.2s ease; }
.flo-ld-faq__item[open] summary::after { transform: rotate(45deg); }
.flo-ld-faq__item summary:focus-visible { outline: 2px solid var(--flo-ld-brand); outline-offset: 4px; border-radius: 4px; }
.flo-ld-faq__item p { max-width: 720px; padding: 0 48px 26px 0; font-size: 17px; color: var(--flo-ld-ink-2); text-wrap: pretty; }

/* ── 10. 마지막 권유 + 바닥 ──────────────────────────────── */
.flo-ld-closing { padding: 160px 0 150px; background: var(--flo-ld-deep); color: #fff; text-align: center; }
.flo-ld-closing h2 { font-size: clamp(44px, 7vw, 104px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 800; }
.flo-ld-closing h2 span { display: block; }
.flo-ld-closing p { margin-top: 28px; font-size: 19px; color: rgba(255, 255, 255, 0.7); }
.flo-ld-closing .flo-ld-cta { margin-top: 40px; }
.flo-ld-closing__note { font-size: 14px; }
/* 🔑 바닥은 셸의 `#footer` 다(문의 주소 · 약관 링크의 주인). 마지막 권유와 이어진 깊은 보라로 그린다 */
.flo-ld #footer { padding: 32px var(--flo-ld-gutter) 40px; border-top: 1px solid var(--flo-ld-deep-line); background: var(--flo-ld-deep); font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }
.flo-ld #footer .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; max-width: calc(var(--flo-ld-wrap) - var(--flo-ld-gutter) * 2); margin: 0 auto; }
.flo-ld #footer .inner a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.flo-ld #footer .inner a:hover, .flo-ld #footer .inner a:focus-visible { color: #fff; }

/*
 | 🆕 2026-10-09 (#1603) 작성 방법 · 이용약관 · 개인정보처리방침의 머리 · 바닥(셸의 `chrome`)
 |    🧑 「머리 · 바닥만 맞춤 (권장)」. 본문은 옛 자산(`common` · `layout` · `main` · `policy`)의 밝은 모양 그대로다.
 | 🔑 머리 · 바닥만 `.flo-ld.flo-ld-chrome` 상자 안에 있어 위 규칙이 그 안에서만 걸린다.
 | 🔑 옛 자산이 먼저 실려 같은 무게의 규칙(`a` 색 · `*` 글자 간격)을 이 파일이 뒤에서 되돌린다.
 */
:where(.flo-ld-chrome) * { letter-spacing: normal; }
:where(.flo-ld-chrome) a { color: inherit; }
/* 첫 화면 보라 판이 없어 머리가 자기 바탕을 갖는다 · 본문 위에 겹치지 않고 자리를 차지한다 */
/* 🔻 2026-10-10 (#1611) `margin-bottom: 0` · 소개 화면의 따라오는 머리(#1611)가 겹쳐 서려고 당기는 여백을 여기서는 쓰지 않는다 */
.flo-ld-chrome .flo-ld-nav { position: relative; margin-bottom: 0; background: var(--flo-ld-deep); }
/* `layout.css` 의 바닥 최소 높이 240 · 위 둥근 모서리를 걷는다 · 글 아래 약 170px 빈 띠가 거기서 났다 */
.flo-ld-chrome #footer { min-height: 0; border-radius: 0; }
/* 고정 머리(80 · 좁은 폭 64)를 비켜 두던 위 여백이 필요 없어졌다(`#sub.rwd` · `layout.css`) */
.flo-ld-chrome + main #sub.rwd { padding-top: 0; }
/* 작성 방법 · 고정 머리 몫까지 잡던 위 여백 160 → 다른 구역과 같은 120 */
/*
 | 🔻 2026-10-22 (#1859) 작성 방법 화면은 `landing` 으로 옮겨 이 두 줄을 쓰지 않는다(「11. 작성 방법」).
 |    🚨 지우지 마라 · 소개 · 고지 주소의 오류 화면(`errors/page.blade.php` 공개 갈래)이 옛 짜임(`flo-wl-guide`)을 그대로 쓴다.
 */
.flo-ld-chrome + main .flo-wl-guide { padding-top: 120px; }
@media (max-width: 1024px) {
  .flo-ld-chrome + main .flo-wl-guide { padding-top: 90px; }
}

/* ── 등장 ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .flo-ld-hero h1 span, .flo-ld-hero__lead, .flo-ld-hero .flo-ld-cta { animation: flo-ld-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .flo-ld-hero h1 span:nth-child(2) { animation-delay: 0.08s; }
  .flo-ld-hero__lead { animation-delay: 0.16s; }
  .flo-ld-hero .flo-ld-cta { animation-delay: 0.22s; }
  .flo-ld-hero__group { animation: flo-ld-lift 1.3s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes flo-ld-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes flo-ld-lift { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ── 반응형 (시안 기준 1080 · 720) ───────────────────────── */
/*
 * 🆕 2026-10-08 (#1599 검토) 첫 화면 노트북은 묶음 왼쪽 끝에 붙는다. 1240 아래에서는 묶음 왼쪽 여백이
 *    받침(7%)보다 좁아져 받침이 창 밖으로 잘렸다 · 그만큼 띄운다. 1440 시안의 자리는 그대로다.
 */
@media (max-width: 1240px) {
  .flo-ld-laptop--hero { margin-left: calc(min(var(--lw), 100% / 1.14) * 0.07); }
}
@media (max-width: 1080px) {
  /*
   * 🔻 2026-10-10 (#1611) ~~`.flo-ld-nav__menu { display: none; }`~~ → 머리 아래 한 줄로 구역 바로가기 넷을 둔다.
   *    🚨 직전에는 1080 이하에서 바로가기가 통째로 사라졌다. 넘치면 그 줄만 옆으로 넘긴다(창은 넘치지 않는다).
   *    🔑 머리 높이 = 로고 줄 84 + 선 1 + 바로가기 줄 44 = 129. 누르는 자리는 44px 다.
   */
  :root:has(> body.flo-ld) { --flo-ld-nav-h: 129px; }
  .flo-ld-nav .flo-ld-wrap { flex-wrap: wrap; height: auto; }
  .flo-ld-nav .flo-ld-logo { height: 84px; }
  .flo-ld-nav .flo-ld-wrap > nav { order: 3; flex: 0 0 auto; width: calc(100% + 2 * var(--flo-ld-gutter)); margin: 0 calc(-1 * var(--flo-ld-gutter)); border-top: 1px solid var(--flo-ld-deep-line); }
  .flo-ld-nav__menu { gap: 24px; overflow-x: auto; padding: 0 var(--flo-ld-gutter); font-size: 14px; scrollbar-width: none; }
  .flo-ld-nav__menu a { display: inline-flex; align-items: center; height: 44px; white-space: nowrap; }
  .flo-ld-feature, .flo-ld-feature--flip, .flo-ld-mall, .flo-ld-faq, .flo-ld-block .flo-ld-wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .flo-ld-feature--flip .flo-ld-feature__text { order: 0; }
  .flo-ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flo-ld-step + .flo-ld-step { border-left: 0; }
  .flo-ld-step { border-top: 1px solid var(--flo-ld-line); }
  .flo-ld-step:nth-child(-n+2) { border-top: 0; }
  .flo-ld-step:nth-child(even) { border-left: 1px solid var(--flo-ld-line); }
  .flo-ld-step__go { display: none; }
  .flo-ld-block__shot { order: 2; margin-top: 0; }
  /* 🆕 2026-10-08 (#1599 검토) 한 줄일 때 비교표는 그림(노트북 · 휴대폰) 아래에 둔다 · 직전에는 그림이 `order: 2` 로 표 뒤에 섰다 */
  .flo-ld-block .flo-ld-compare { order: 3; }
  /* 🆕 2026-10-08 (#1599 검토) 한 줄일 때 노트북은 칸 오른쪽 끝에 붙는다 · 받침(7%)이 창 밖으로 나가지 않게 그만큼 띄운다 */
  .flo-ld-block__shot .flo-ld-laptop { width: min(var(--lw), 100% / 1.14); margin-right: calc(min(var(--lw), 100% / 1.14) * 0.07); }
  .flo-ld-block__text { padding-top: 96px; }
  .flo-ld-reviews, .flo-ld-privacy { grid-template-columns: minmax(0, 1fr); }
  /* 🔑 한 줄로 접히면 화면 판이 창 오른쪽 끝까지 가서, 밖으로 120 나간 휴대폰이 창에 잘린다 */
  .flo-ld-phone--campaign { right: 24px; bottom: -60px; }
  /* 🔑 한 줄일 때는 좌우 교대가 뜻이 없다 · 판을 모두 오른쪽으로 내보내 왼쪽이 잘리지 않게 한다 */
  .flo-ld-feature--flip .flo-ld-visual { justify-content: flex-start; padding: 64px 0 64px 64px; }
  .flo-ld-feature--flip .flo-ld-visual::before { right: -9999px; left: 0; border-radius: 28px 0 0 28px; }
  .flo-ld-feature--flip .flo-ld-visual--laptop { padding: 72px 0 88px 64px; }
  /* 🔑 브라우저 창은 표 화면이라 잘리면 값이 사라진다 · 판 폭 안으로 줄인다 */
  .flo-ld-visual .flo-ld-browser { max-width: 100%; }
}
/*
 * 🆕 2026-10-08 (#1600 · 🧑 *"C안 ㄱㄱ"*) 좁은 폭 전용 마크업(그림 묶음)은 넓은 폭에서 숨는다.
 * 🔻 2026-10-08 (#1600 검토) `.flo-ld-m-only { display: none; }`(클래스 하나) → `.flo-ld .flo-ld-m-only`(클래스 둘).
 *    클래스 하나일 때는 뒤에 오는 `.flo-ld-visual .flo-ld-browser { display: … }` 같은 두 마디 규칙이 넓은 폭에서
 *    이 그림을 드러낼 수 있었다. 🔑 이 규칙을 이기는 좁은 폭 규칙은 이름에 `flo-ld-m-only` 를 함께 댄다(검사 205).
 */
.flo-ld .flo-ld-m-only { display: none; }

/*
 * 🔻 2026-10-08 (#1600 · 🧑 *"C안 ㄱㄱ"*) 720 이하를 「묶음 카드」(C안)로 다시 짰다.
 *    직전 모양(가운데 정렬 첫 화면 · 노트북을 판 밖으로 걸쳐 자름 · 한 줄 목록 · 색 판 위 그림)의 값은
 *    바뀐 줄마다 🔻 로 적었다. 시안 원본은 이슈 #1600 에 있다.
 * 🔑 첫 화면은 인플루언서 카드 한 장 + 휴대폰 + 순매출 카드의 세 겹 · 고민과 단계는 흰 카드 ·
 *    기능 넷은 라벤더 카드(그림이 카드 바닥으로 잘려 나간다) · 매출 기준은 노트북 대신 성과 카드 두 장이다.
 * 🚫 넓은 폭(721 이상)의 모양을 이 구역에서 바꾸지 마라 · 이 구역 밖 규칙은 그대로다.
 */
@media (max-width: 720px) {
  .flo-ld { --flo-ld-gutter: 20px; font-size: 16px; }
  /* 🔻 2026-10-08 (#1600 검토) `.flo-ld-m-only { display: block; }` → 바깥 규칙과 같은 무게로 올렸다 */
  .flo-ld .flo-ld-m-only { display: block; }
  /* 🔻 2026-10-10 (#1611) ~~`.flo-ld-nav .flo-ld-wrap { height: 68px; }`~~ → 로고 줄만 68 · 아래 바로가기 줄(45)이 붙어 머리는 113 */
  :root:has(> body.flo-ld) { --flo-ld-nav-h: 113px; }
  .flo-ld-nav .flo-ld-logo { height: 68px; }
  .flo-ld-nav .flo-ld-btn--sm { height: 44px; padding: 0 16px; font-size: 14px; }

  /* 첫 화면 · 왼쪽 정렬 */
  /* 🔻 2026-10-08 (#1600) 위 여백 128 → 96 · 가운데 정렬 → 왼쪽 정렬 · 바닥 띠 90 → 64 · 제목 clamp(38px, 11.4vw, 56px) → 40px */
  /* 🔻 2026-10-10 (#1611) 위 여백 96px → 머리 높이 + 28 (머리 68 아래 28 이던 간격 그대로) */
  .flo-ld-hero { padding-top: calc(var(--flo-ld-nav-h, 68px) + 28px); padding-bottom: 0; text-align: left; }
  .flo-ld-hero::after { height: 64px; }
  .flo-ld-hero h1 { font-size: 40px; line-height: 1.12; }
  /* 🔻 2026-10-08 (#1600) 안내 글 위 22 · 17px → 16 · 16px(왼쪽 정렬이라 가운데 맞춤 여백을 걷었다) */
  .flo-ld-hero__lead { margin: 16px 0 0; font-size: 16px; }
  /* 🔻 2026-10-08 (#1600) 단추 묶음 위 30 → 24 · 좌우 4 → 0 */
  .flo-ld-hero .flo-ld-cta { flex-direction: column; align-items: stretch; margin-top: 24px; padding: 0; }
  .flo-ld-hero__note { text-align: center; }
  .flo-ld-btn { height: 56px; font-size: 17px; }
  /* 🔻 2026-10-08 (#1600) 무대 위 52 → 32 · 묶음 높이 440 → 452 · 묶음을 창 끝까지 내던 음수 여백을 걷고, 판은 좌우 16 안쪽에 선다 */
  .flo-ld-hero__stage { margin-top: 32px; padding: 0; }
  /*
   * 🔻 2026-10-08 (#1600 검토) `margin: 0` → 폭 480 까지로 묶고 가운데에 둔다(720 에서 카드와 휴대폰이 양 끝으로 갈라졌다).
   * 🔑 묶음 폭을 크기 기준 칸(`container-type`)으로 두어 카드 · 휴대폰 · 순매출 카드를 그 폭의 비율(`cqw`)로 세운다.
   */
  .flo-ld-hero__group { container-type: inline-size; max-width: 480px; height: 452px; margin: 0 auto; padding: 0; overflow: hidden; }
  .flo-ld-hero__group::before { top: 0; right: 16px; bottom: 0; left: 16px; border-radius: 28px 28px 0 0; }
  /*
   * 🔻 2026-10-08 (#1600) 직전에는 노트북을 판 밖으로 걸쳐 잘랐다
   *    (`.flo-ld-laptop--hero { --lw: 560px; position: absolute; left: -60px; top: 40px; width: var(--lw); margin-left: 0; }`).
   *    좁은 폭에서는 노트북 화면 글자가 읽히지 않아 인플루언서 카드 한 장(`.flo-ld-m-card`)으로 바꿨다.
   */
  .flo-ld-hero__group .flo-ld-laptop { display: none; }
  /*
   * 🔻 2026-10-08 (#1600 검토) 세 겹이 서로 글자를 가렸다. 휴대폰이 카드 오른쪽 절반(크롤 스냅샷 · 팔로잉 · 참여율)을,
   *    순매출 카드가 휴대폰 화면 아랫글을 덮었다. 직전 값은 아래와 같다.
   *    `.flo-ld-m-card { left: 30px; top: 30px; width: 222px; }`
   *    `.flo-ld-phone--hero { --pw: 168px; right: 26px; top: 112px; }`
   *    `.flo-ld-hero__group > .flo-ld-hero__kpi { z-index: 4; left: 24px; bottom: 28px; width: 200px; }`
   * 🔑 이제 카드와 휴대폰은 나란히 서고 카드 오른쪽 테두리 여백만 휴대폰 틀과 겹친다. 순매출 카드는 휴대폰과 겹치지 않는다.
   *    카드 50cqw · 휴대폰 38.5cqw 일 때 휴대폰 틀 왼쪽(약 55cqw)이 카드 자료 칸 오른쪽 끝(약 52.7cqw)보다 오른쪽이다.
   */
  .flo-ld-m-card { position: absolute; z-index: 1; left: 6.7cqw; top: 24px; width: 50cqw; overflow: hidden; border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(8, 4, 24, 0.7); }
  .flo-ld-m-card img { width: 100%; }
  .flo-ld-phone--hero { --pw: 38.5cqw; right: 5.6cqw; top: auto; bottom: 28px; }
  .flo-ld-hero__group > .flo-ld-hero__kpi { z-index: 4; left: 6.2cqw; bottom: 28px; width: 46cqw; }

  /* 연동 띠 · 고민 */
  /* 🔻 2026-10-08 (#1600) 띠 위 48 → 40 · 아래 24 → 0 · 줄 위아래 18 → 14 */
  .flo-ld-band { padding: 40px 0 0; }
  .flo-ld-band ul { grid-template-columns: minmax(0, 1fr); }
  .flo-ld-band li, .flo-ld-band li + li { padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--flo-ld-line); }
  .flo-ld-band strong { font-size: 16px; }
  .flo-ld-band span { font-size: 14px; }
  /* 🔻 2026-10-08 (#1600) 구역 위아래 96 → 64 · 머리 설명 17px → 16px */
  /* 🔻 2026-10-08 (#1600) `.flo-ld-sec--flush { padding-top: 0; }` 을 걷었다 · 기능 구역도 위 64 를 둔다(단계 카드와 기능 머리 사이 여백) */
  .flo-ld-sec { padding: 64px 0; }
  .flo-ld-head h2 { font-size: 30px; }
  .flo-ld-head p { margin-top: 12px; font-size: 16px; }
  .flo-ld-eyebrow { margin-bottom: 12px; }
  .flo-ld-pains { display: grid; gap: 10px; margin-top: 28px; }
  /* 🔻 2026-10-08 (#1600) 위아래 선으로 나눈 한 줄 목록(간격 8 · 위아래 24) → 흰 카드(간격 4) · 제목 21px → 17px */
  .flo-ld-pain, .flo-ld-pain:last-child { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 18px 20px; border: 1px solid var(--flo-ld-line); border-radius: 16px; background: #fff; }
  .flo-ld-pain h3 { font-size: 17px; }
  .flo-ld-pain p { font-size: 15px; line-height: 1.6; }
  .flo-ld-head--spaced { margin-top: 64px; }

  /* 다섯 단계 · 2열 칸 (마지막은 두 칸 폭) */
  /* 🔻 2026-10-08 (#1600) 흰 판 한 장 안의 한 줄 목록 → 2열 흰 카드 · 마지막 단계는 브랜드 보라 카드 */
  .flo-ld-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; overflow: visible; border: 0; border-radius: 0; background: none; }
  /* 🔻 2026-10-08 (#1600) 안쪽 22 22 24 · 위 선 → 16 14 18 · 테두리 카드. 첫 칸의 위 선을 지우던 `.flo-ld-step:first-child { border-top: 0; }` 은 걷었다(카드마다 테두리가 있다) */
  .flo-ld-step, .flo-ld-step:nth-child(-n+2), .flo-ld-step:nth-child(even), .flo-ld-step:first-child { padding: 16px 14px 18px; border: 1px solid var(--flo-ld-line); border-radius: 16px; background: #fff; }
  .flo-ld-step:last-child { grid-column: 1 / -1; background: var(--flo-ld-brand); border-color: var(--flo-ld-brand); color: #fff; }
  .flo-ld-step:last-child .flo-ld-step__no { color: var(--flo-ld-lav-hi); }
  .flo-ld-step:last-child p { color: #fff; }
  .flo-ld-step h3 { margin-top: 6px; font-size: 17px; }
  .flo-ld-step p { margin-top: 4px; font-size: 14px; line-height: 1.55; }

  /* 기능 넷 · 그림이 카드 바닥으로 잘려 나가는 라벤더 카드 */
  /* 🔻 2026-10-08 (#1600) 기능 사이 110 → 12(카드끼리 붙여 쌓는다) */
  .flo-ld-head--lead { margin-bottom: 24px; }
  .flo-ld-feature, .flo-ld-feature--flip { display: block; overflow: hidden; padding: 24px 20px 0; border-radius: 24px; background: var(--flo-ld-lav-panel); }
  .flo-ld-feature, .flo-ld-feature--far { --gap-top: 12px; }
  .flo-ld-feature__tag { margin-bottom: 8px; font-size: 13px; }
  .flo-ld-feature__text h3 { font-size: 22px; }
  /* 🔻 2026-10-08 (#1600) 17px → 15px */
  .flo-ld-feature__text p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
  /*
   * 🔻 2026-10-08 (#1600) 직전에는 그림을 창 끝까지 닿는 색 판 위에 올렸다
   *    (`margin: 0 calc(var(--flo-ld-gutter) * -1); padding: 28px 20px 64px` · 노트북 판은 `overflow: hidden; padding: 32px 0 80px 20px`).
   *    이제 카드 자체가 라벤더라 판(`::before`)을 지우고, 그림은 높이 248 에서 카드 바닥으로 잘린다.
   */
  .flo-ld-visual, .flo-ld-feature--flip .flo-ld-visual, .flo-ld-visual--laptop, .flo-ld-feature--flip .flo-ld-visual--laptop { position: relative; display: block; height: 248px; margin: 22px 0 0; padding: 0; overflow: hidden; }
  .flo-ld-visual::before, .flo-ld-feature--flip .flo-ld-visual::before { display: none; }
  .flo-ld-visual .flo-ld-browser { width: 100%; border-radius: 14px 14px 0 0; }
  /* 🔻 2026-10-08 (#1600) 판 속 노트북(`--lw: 560px; width: var(--lw)`)은 숨긴다 · 제안 메일은 휴대폰, 캠페인 진행은 브라우저 창이 맡는다 */
  .flo-ld-visual .flo-ld-laptop { display: none; }
  /* 🔻 2026-10-08 (#1600 검토) `.flo-ld-visual .flo-ld-m-shot { display: flex; }` → 겨루는 이름(`flo-ld-browser` · `flo-ld-m-only`)을 함께 댄다(검사 205) · 폭 420 까지로 묶어 600 ~ 720 에서 그림이 늘어나 흐려지지 않게 한다 */
  .flo-ld-visual .flo-ld-browser.flo-ld-m-only.flo-ld-m-shot { display: flex; max-width: 420px; margin: 0 auto; }
  /* 🔻 2026-10-08 (#1600) 판 오른쪽 아래 작은 휴대폰(`--pw: 124px; right: 6px; bottom: -40px`) → 카드 가운데 큰 휴대폰 */
  .flo-ld-visual .flo-ld-phone { --pw: 236px; left: 50%; right: auto; top: 4px; bottom: auto; transform: translateX(-50%); }
  /* 🔻 2026-10-08 (#1600 검토) `.flo-ld-visual--laptop:has(.flo-ld-m-shot) { height: auto; }` · `… .flo-ld-phone { display: none; }` → 마크업의 변형 클래스 `flo-ld-visual--m-shot` */
  .flo-ld-visual.flo-ld-visual--m-shot { height: auto; }
  .flo-ld-visual--m-shot .flo-ld-phone { display: none; }
  .flo-ld-flist { margin-top: 16px; }
  .flo-ld-flist li { grid-template-columns: 28px minmax(0, 1fr); padding: 9px 0; font-size: 14px; line-height: 1.55; }
  .flo-ld-flist b { font-size: 13px; }
  .flo-ld-browser__bar { gap: 5px; height: 28px; padding: 0 10px; }
  .flo-ld-browser__bar i { width: 7px; height: 7px; }
  /* 🔻 2026-10-08 (#1600 검토) `min-width: 58%`(가운데 고정) → 남은 폭을 채운다. 320 에서 알약이 세 번째 창 점을 덮었다 */
  .flo-ld-browser__bar span { position: static; transform: none; flex: 1; min-width: 0; height: 17px; margin-left: 4px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

  /* 매출 기준 */
  /* 🔻 2026-10-08 (#1600) 블록 위 80 → 64 · 아래 88 → 56 · 글 위 80 → 56 */
  .flo-ld-block { margin-top: 64px; padding-bottom: 56px; }
  .flo-ld-block .flo-ld-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flo-ld-block__text { padding-top: 56px; }
  .flo-ld-block__text h2 { font-size: 32px; }
  .flo-ld-block__text p { margin-top: 14px; font-size: 16px; }
  /*
   * 🔻 2026-10-08 (#1600) 직전에는 노트북과 휴대폰을 창 끝까지 닿는 칸에 걸쳐 잘랐다. 직전 선언은 아래와 같다.
   *    `.flo-ld-block__shot { overflow: hidden; min-height: 0; margin: 0 calc(var(--flo-ld-gutter) * -1); padding: 0 0 40px 20px; }`
   *    `.flo-ld-block__shot .flo-ld-laptop { --lw: 520px; width: var(--lw); margin-left: 0; }`
   *    `.flo-ld-phone--block { --pw: 140px; left: auto; right: 6px; top: auto; bottom: -40px; }`
   *    이제 둘을 숨기고 순매출 · 주문 카드 두 장(`.flo-ld-m-kpis`)을 세운다.
   */
  .flo-ld-block__shot { overflow: visible; min-height: 0; margin: 0; padding: 0; }
  .flo-ld-block__shot .flo-ld-laptop, .flo-ld-block__shot .flo-ld-phone { display: none; }
  /* 🔻 2026-10-08 (#1600 검토) `.flo-ld-m-kpis { display: grid; gap: 10px; }` → 겨루는 이름 `flo-ld-m-only` 를 함께 댄다(검사 205) */
  .flo-ld-m-only.flo-ld-m-kpis { display: grid; gap: 10px; }
  .flo-ld-m-kpis img { width: 100%; border-radius: 16px; background: #fff; box-shadow: 0 18px 40px -24px rgba(18, 13, 38, 0.6); }
  .flo-ld-compare { margin-top: 0; font-size: 14px; }
  .flo-ld-compare th, .flo-ld-compare td { padding-top: 12px; padding-bottom: 12px; }
  /*
   * 🔻 2026-10-08 (#1599 검토) 직전에는 `thead th:first-child, tbody th { display: none }` 으로 행 머리를 숨겼다.
   *    그러면 좁은 폭에서 두 칸이 무엇을 비교하는지(매출 인정 기준 · 금액 …) 사라진다.
   * 🔑 이제 줄마다 행 머리를 두 칸 위의 소제목으로 세운다. `scope="row"` 는 마크업에 그대로 있다.
   *    「구분」 열 머리는 가리킬 열이 없어져 숨긴다. 🚫 `tbody th` 를 숨기지 마라(`IntroLandingGuardTest`).
   */
  .flo-ld-compare, .flo-ld-compare thead, .flo-ld-compare tbody { display: block; }
  .flo-ld-compare tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; }
  .flo-ld-compare thead th:first-child { display: none; }
  .flo-ld-compare tbody th { grid-column: 1 / -1; width: auto; padding-bottom: 2px; border-bottom: 0; }
  .flo-ld-compare td { width: auto; }

  /* 쇼핑몰 안에서 */
  .flo-ld-mall { gap: 28px; margin-top: 28px; }
  .flo-ld-mall li { padding: 14px 0 14px 44px; }
  .flo-ld-mall li::before { top: 16px; }
  .flo-ld-mall li strong { font-size: 17px; }
  .flo-ld-mall li span { font-size: 15px; }
  .flo-ld-mall .flo-ld-visual { height: auto; margin: 0; overflow: visible; }
  .flo-ld-mall .flo-ld-visual .flo-ld-browser { border-radius: 14px; }

  /* 신뢰 구역 */
  /* 🔻 2026-10-08 (#1600) 위 110 · 아래 100 → 64 · 숫자 셋은 한 줄 목록 → 3열 카드 · 후기는 옆으로 넘기는 띠 · 하위 머리 위 96 → 56 */
  .flo-ld-trust { padding: 64px 0; }
  /*
   * 🔻 2026-10-08 (#1600) 직전 선언
   *    `.flo-ld-stats { grid-template-columns: minmax(0, 1fr); }`
   *    `.flo-ld-stat, .flo-ld-stat + .flo-ld-stat { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--flo-ld-deep-line); }`
   */
  .flo-ld-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; border: 0; }
  .flo-ld-stat, .flo-ld-stat + .flo-ld-stat { padding: 16px 12px; border: 0; border-radius: 16px; background: var(--flo-ld-deep-2); }
  /* 🆕 2026-10-08 (#1600 검토) 숫자와 단위를 한 줄로 둔다 · 「1,280곳」이 숫자 중간에서 접혔다 */
  .flo-ld-stat__num { font-size: 28px; white-space: nowrap; }
  .flo-ld-stat__num small { margin-left: 2px; font-size: 14px; }
  .flo-ld-stat h3 { margin-top: 10px; font-size: 14px; }
  .flo-ld-stat p { font-size: 13px; line-height: 1.5; }
  .flo-ld-trust__sub { margin-top: 56px; }
  .flo-ld-reviews { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; margin: 24px -20px 0; padding: 0 20px 6px; scrollbar-width: none; }
  .flo-ld-reviews:focus-visible { outline: 2px solid var(--flo-ld-lav-hi); outline-offset: 4px; border-radius: 4px; }
  .flo-ld-review { flex: 0 0 84%; scroll-snap-align: start; gap: 20px; padding: 22px 20px; border-radius: 18px; }
  .flo-ld-review blockquote { font-size: 16px; line-height: 1.65; }
  .flo-ld-privacy { gap: 0; margin-top: 24px; border-top: 1px solid var(--flo-ld-deep-line); }
  .flo-ld-privacy li { padding: 16px 0; border: 0; border-bottom: 1px solid var(--flo-ld-deep-line); border-radius: 0; }
  .flo-ld-privacy strong { font-size: 16px; }
  .flo-ld-privacy p { margin-top: 4px; font-size: 14px; }

  /* 자주 묻는 질문 · 마지막 권유 */
  /* 🔻 2026-10-08 (#1600) 질문 17px → 16px · 답 16px → 15px · 마지막 권유 위 110 · 아래 100 → 72 · 64 · 제목 clamp(36px, 10.4vw, 56px) → 34px */
  .flo-ld-faq { gap: 24px; }
  .flo-ld-faq__item summary { padding: 16px 0; font-size: 16px; }
  .flo-ld-faq__item p { padding-right: 0; padding-bottom: 18px; font-size: 15px; }
  .flo-ld-closing { padding-top: 72px; padding-bottom: 64px; }
  .flo-ld-closing h2 { font-size: 34px; }
  .flo-ld-closing p { margin-top: 16px; font-size: 16px; }
  .flo-ld-closing .flo-ld-cta { margin-top: 28px; }
  .flo-ld #footer .inner { gap: 0 16px; }
  .flo-ld #footer .inner > span:first-child, .flo-ld #footer .inner > span:last-child { flex-basis: 100%; }
}
/*
 * 🆕 2026-10-08 (#1600 검토) 481 ~ 720 에서는 매출 기준 카드 두 장을 나란히 세운다 · 한 장씩이면 그림(1배 290)이 두 배 넘게 늘어나 흐려진다.
 */
@media (min-width: 481px) and (max-width: 720px) {
  .flo-ld-m-only.flo-ld-m-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/*
 * 🆕 2026-10-08 (#1600 검토) 480 이하에서는 숫자 셋을 3열 칸 대신 한 줄씩 세운다(숫자 왼쪽 · 글 오른쪽).
 *    3열이면 칸 폭이 90px 안팎이라 설명이 낱말마다 접혀 다섯 줄이 됐다.
 */
@media (max-width: 480px) {
  .flo-ld-stats { grid-template-columns: minmax(0, 1fr); }
  .flo-ld-stat, .flo-ld-stat + .flo-ld-stat { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: center; padding: 16px; }
  .flo-ld-stat__num { grid-row: 1 / 3; }
  .flo-ld-stat h3 { margin-top: 0; }
  .flo-ld-stat p { margin-top: 2px; }
}

/* ── 11. 작성 방법 (FLO-PUB-004 · `/welcome/guide`) ─────────── */
/*
 | 🆕 2026-10-22 (#1859) 작성 방법 화면 본문도 이 파일의 모양으로 그린다(셸 `landing`).
 |    🧑 *"해당 url 은 디자인도 너무 완벽해. 내용도 딱 적절하고. 이 부분처럼 /welcome/guide 페이지도 좀 수정해야해."*
 |    🧑 구성 「단계마다 한 칸 (지그재그)」 · 그림 「지금 그림 유지」.
 | 🔑 새 부품을 만들지 않았다. 첫 칸은 첫 화면(`flo-ld-hero`), 그림 있는 걸음은 기능 칸(`flo-ld-feature`),
 |    그림 없는 걸음은 고민 칸의 줄(`flo-ld-pain`)이다. 여기에는 이 화면에만 다른 값만 둔다.
 | 🔑 반응형 블록 뒤에 둔다 · 같은 무게의 좁은 폭 규칙(`.flo-ld-hero` 위아래 여백)을 아래 720 블록이 다시 이긴다.
 | 🚫 `display` 를 여기서 바꾸지 마라 · 기능 칸과 고민 칸의 배치는 위 규칙 그대로다(검사 205).
 */
/* 첫 칸 · 기기 무대가 없어 아래 라벤더 띠(무대 받침)를 걷고 제목 아래를 연다 */
.flo-ld-hero--page { padding-top: calc(var(--flo-ld-nav-h, 84px) + 72px); padding-bottom: 128px; }
.flo-ld-hero--page::after { content: none; }
/*
 | 🆕 2026-10-22 (#1859) 같은 날 두 번째 · 화면이 운영자 「이용 방법」 전체로 넓어졌다(🧑 「운영자 이용 방법 전체 (권장)」).
 | 🔑 운영자 걸음(`.flo-use`)은 소개 화면 기능 칸 그대로다. 그림이 없는 걸음은 그림 자리에 단계 목록 카드(`flo-use-card`)를 둔다.
 | 🔑 「작성 방법」 칸(`.flo-guide`)은 운영자 걸음 04 와 05 사이의 한 칸이다 · 흰 바탕으로 걸음 사이에 끼운 칸임을 보인다.
 */
.flo-use .flo-ld-feature__text p + p { margin-top: 12px; }
.flo-use--last { padding-bottom: 72px; }
/* 단계 목록 카드 · 소개 화면 화면 틀(`flo-ld-shot`)과 같은 반경 · 그림자 */
.flo-use-card { position: relative; z-index: 1; width: min(560px, 100%); padding: 32px 36px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(26, 20, 51, 0.08), var(--flo-ld-shot-shadow); }
.flo-use-card__title { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; color: var(--flo-ld-brand-ink); }
.flo-use-card .flo-ld-flist { margin-top: 16px; }
.flo-use-card .flo-ld-flist li:last-child { border-bottom: 0; }
/* 걸음 사이 · 기능 칸끼리의 간격(150)보다 좁다 · 줄 하나와 칸 하나가 번갈아 선다 */
/* 🔻 2026-10-22 (#1859) ~~`padding-bottom: 96px`~~ → 흰 바탕 · 이제 운영자 걸음 사이에 끼운 칸이라 위아래 여백이 같다 */
.flo-guide.flo-ld-sec { background: #fff; }
.flo-guide__steps { display: grid; row-gap: 112px; }
/* 격자 칸은 안의 그림 폭만큼 버티려 한다 · 줄어들 수 있게 푼다(R-308) */
.flo-guide__step { min-width: 0; }
/* 그림은 두 배로 찍은 폭 520 그림이다 · 그보다 크게 늘리지 않는다(흐려진다) */
.flo-guide__frame { width: min(520px, 100%); }
.flo-guide__desc b { font-weight: 700; color: var(--flo-ld-ink); }
.flo-guide__note { margin-top: 112px; padding: 22px 28px; border: 1px solid var(--flo-ld-line); border-radius: 16px; background: #fff; font-size: 16px; color: var(--flo-ld-ink-2); }
.flo-guide__note b { font-weight: 700; color: var(--flo-ld-ink); }
.flo-guide-back { padding-bottom: 136px; text-align: center; }
@media (max-width: 720px) {
  .flo-ld-hero--page { padding-top: calc(var(--flo-ld-nav-h, 68px) + 40px); padding-bottom: 56px; }
  /* 카드끼리 붙여 쌓는다(소개 화면 기능 칸 12 와 같다) */
  /* 🔻 2026-10-22 (#1859) ~~`.flo-guide.flo-ld-sec { padding-bottom: 40px; }`~~ · 걸음 사이에 끼운 칸이라 위아래가 같은 64 다 */
  .flo-guide__steps { row-gap: 12px; }
  .flo-use--last { padding-bottom: 40px; }
  /* 🔑 소개 화면은 그림을 높이 248 에서 자른다 · 단계 목록 카드는 글이라 자르지 않는다 */
  .flo-ld-visual.flo-ld-visual--card { height: auto; padding: 0 0 20px; overflow: visible; }
  .flo-use-card { width: 100%; padding: 20px 18px 8px; border-radius: 16px; }
  .flo-use-card__title { font-size: 14px; }
  /* 🔑 소개 화면은 그림을 높이 248 에서 카드 바닥으로 자른다 · 이 화면은 그림이 설명이라 자르지 않는다 */
  .flo-guide .flo-ld-visual { height: auto; margin-top: 20px; padding: 0 0 20px; overflow: visible; }
  /* 600 ~ 720 에서 카드가 그림(520)보다 넓다 · 늘리지 않고 가운데에 둔다 */
  .flo-guide__frame { margin: 0 auto; }
  .flo-guide__note { margin-top: 24px; padding: 16px 18px; font-size: 15px; }
  .flo-guide-back { padding-bottom: 64px; }
}

/*
 | 🆕 본문 바로가기 (2026-10-10 · 이슈 #1608 · WCAG 2.4.1).
 | 🔑 값은 킷 `.skip-nav`(`common.css` 58행)와 같다 · 소개 면은 `common.css` 를 싣지 않아 여기 다시 적는다.
 | 🔑 층은 머리 띠(`.flo-ld-nav` · 20) 위다.
 */
.skip-nav { position: absolute; top: -50px; left: 0; z-index: 500; display: inline-block; width: 160px; padding: 10px 20px; background-color: #000; color: #fff; font-size: 14px; text-align: center; text-decoration: none; opacity: 0; transition: all .3s ease; }
.skip-nav:focus { top: 0; opacity: 1; }
.skip-nav:focus-visible { outline: 3px solid var(--flo-ld-lav-hi, #cfc6f7); outline-offset: 2px; }
#flo-content:focus { outline: none; }