@charset "utf-8";
/*
 | 소개 화면(FLO-PUB-001)과 작성 방법 화면(FLO-PUB-004)의 FLO 추가 블록 (2026-09-28 · 이슈 #1515)
 |
 | 🔑 **원본 랜딩(`main.css`)에 없는 블록만 여기 둔다.** 누적 숫자 · 기능 카드 넷 · 설치 안내는
 |    `main.css` 의 `.number` · `.card01~04` · `.promo` 를 그대로 쓴다.
 |    🚫 `main.css` 를 고치지 마라 · 원본 랜딩의 자산이다.
 | 🔑 **색은 `common.css` 의 이름과 `main.css` 가 이미 쓰는 값에서만 온다**(R-307 ①).
 |    🚫 새 색을 고안하지 마라.
 | 🔑 **한글은 낱말 단위로 줄을 바꾼다**(`word-break: keep-all` · R-202 · R-308).
 |    🚫 `ch` 단위를 쓰지 마라 · 한글은 의도한 폭의 절반이 된다.
 | 🔑 **폭이 줄면 줄을 바꾸고, 표만 감싼 칸 안에서 가로로 넘친다**(R-308).
 */

/* ── 공통 틀 ───────────────────────────────────────────── */
.flo-wl-band, .flo-wl-pains, .flo-wl-flow, .flo-wl-cafe24,
.flo-wl-compare, .flo-wl-reviews, .flo-wl-trust, .flo-wl-faq, .flo-wl-guide { padding: 120px 30px; }
.flo-wl-band > .inner, .flo-wl-pains > .inner, .flo-wl-flow > .inner, .flo-wl-cafe24 > .inner,
.flo-wl-compare > .inner, .flo-wl-reviews > .inner, .flo-wl-trust > .inner, .flo-wl-faq > .inner,
.flo-wl-guide > .inner { width: 100%; max-width: 1200px; margin: 0 auto; }
.main-sec[class*="flo-wl-"] p, .main-sec[class*="flo-wl-"] strong,
.main-sec[class*="flo-wl-"] li, .main-sec[class*="flo-wl-"] td,
.main-sec[class*="flo-wl-"] th, .main-sec[class*="flo-wl-"] summary { word-break: keep-all; }

/* ── 첫 화면 · 설치 안내의 보조 버튼 ────────────────────── */
/* 🔑 어두운 사진·색 배경 위에 놓이므로 테두리와 글자를 흰색으로 둔다 */
.visual-text-wrap .text-box .visual-cta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; }
.flo-btn.flo-wl-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.flo-btn.flo-wl-ghost:hover, .flo-btn.flo-wl-ghost:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; }
.promo .promo-content .promo-actions { flex-wrap: wrap; align-items: center; }
@media screen and (max-width: 767px) {
  .visual-text-wrap .text-box .visual-cta { justify-content: center; }
  /* 🔑 좁은 폭에서는 첫 화면 아래쪽의 「Scroll to Explore」와 겹친다 · 같은 버튼이 설치 안내 칸에 있어 숨긴다 */
  /* 🔻 2026-10-06 (#1515 다듬기) 겹침의 원인인 「Scroll to Explore」를 좁은 폭에서 걷고 이 단추를 다시 보인다(맨 아래 ⑨) */
  .visual-text-wrap .text-box .visual-cta .flo-wl-ghost { display: none; }
}

/* ── 연동 띠 ────────────────────────────────────────────── */
.flo-wl-band { padding-top: 60px; padding-bottom: 20px; }
.flo-wl-band__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.flo-wl-band__list li { flex: 1 1 280px; display: flex; flex-direction: column; gap: 6px; padding: 24px 28px; border: 1px solid var(--border-color-e); border-radius: 20px; background: #fff; }
.flo-wl-band__list strong { font-size: 18px; font-weight: 700; color: var(--point-color); }
.flo-wl-band__list span { font-size: 15px; color: var(--text-color-5); line-height: 1.5; }

/* ── 누적 숫자 · 단위 ───────────────────────────────────── */
.number .num-list .num-item .data .flo-wl-unit { margin-left: 4px; font-size: 0.6em; font-weight: 600; align-self: flex-end; padding-bottom: 0.2em; }

/* ── 운영자 고민 셋 ─────────────────────────────────────── */
.flo-wl-pains { background: var(--bg-color); }
.flo-wl-pains__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flo-wl-pains__item { display: flex; flex-direction: column; gap: 20px; padding: 36px 32px; border-radius: 24px; background: #fff; box-shadow: 0 3px 6px rgba(205, 205, 214, 0.2); }
.flo-wl-pains__pain { font-size: 22px; font-weight: 700; line-height: 1.4; color: var(--text-color-2); }
.flo-wl-pains__answer { padding-top: 20px; border-top: 1px solid var(--border-color-e); font-size: 16px; line-height: 1.6; color: var(--text-color-5); }
.flo-wl-pains__answer span { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--point-color); }

/* ── 이용 흐름 다섯 단계 ────────────────────────────────── */
.flo-wl-flow { padding-bottom: 0; }
.flo-wl-flow__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: none; }
.flo-wl-flow__item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 28px 22px; border: 1px solid var(--border-color-d); border-radius: 20px; background: #fff; }
.flo-wl-flow__no { font-size: 14px; font-weight: 800; color: var(--point-color-2); }
.flo-wl-flow__name { font-size: 18px; font-weight: 700; color: var(--text-color-2); }
.flo-wl-flow__text { font-size: 15px; line-height: 1.55; color: var(--text-color-5); }
/* 🔑 넷째 칸이 FLO 만의 방식이라 색으로 한 번 짚는다(R-820) */
.flo-wl-flow__item:nth-child(4) { border-color: var(--point-color); background: var(--sky-blue); }

/* ── 카페24 안에서 일어나는 일 ──────────────────────────── */
.flo-wl-cafe24 { background: var(--bg-color); }
.flo-wl-cafe24__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.flo-wl-cafe24__item { display: flex; flex-direction: column; gap: 12px; padding: 32px 26px; border-radius: 24px; background: #fff; }
.flo-wl-cafe24__no { align-self: flex-start; padding: 6px 12px; border-radius: 20px; background: var(--point-color); font-size: 13px; font-weight: 800; color: #fff; }
.flo-wl-cafe24__item strong { font-size: 19px; font-weight: 700; color: var(--text-color-2); }
.flo-wl-cafe24__item p { font-size: 15px; line-height: 1.6; color: var(--text-color-5); }

/* ── 매출 계산 비교 ─────────────────────────────────────── */
/* 🔑 표는 감싼 칸 안에서만 넘친다(R-308) · 🚫 글자를 줄여 맞추지 마라 */
.flo-wl-compare__wrap { overflow-x: auto; border: 1px solid var(--border-color-d); border-radius: 20px; background: #fff; }
.flo-wl-compare__table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.flo-wl-compare__table th, .flo-wl-compare__table td { padding: 20px 24px; border-bottom: 1px solid var(--border-color-e); text-align: left; vertical-align: top; }
.flo-wl-compare__table tbody tr:last-child th, .flo-wl-compare__table tbody tr:last-child td { border-bottom: 0; }
.flo-wl-compare__table thead th { background: var(--bg-color); font-size: 15px; font-weight: 700; color: var(--text-color-5); }
.flo-wl-compare__table tbody th { width: 22%; font-weight: 700; color: var(--text-color-2); }
.flo-wl-compare__table td { color: var(--text-color-5); }
.flo-wl-compare__table .is-flo { background: var(--sky-blue); font-weight: 700; color: var(--point-color); }
.flo-wl-compare__table thead .is-flo { color: var(--point-color); }

/* ── 운영자 후기 ────────────────────────────────────────── */
.flo-wl-reviews { background: var(--bg-color); }
.flo-wl-reviews__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flo-wl-reviews__item { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; padding: 36px 32px; border-radius: 24px; background: #fff; box-shadow: 0 3px 6px rgba(205, 205, 214, 0.2); }
.flo-wl-reviews__item blockquote { margin: 0; font-size: 17px; line-height: 1.7; color: var(--text-color-2); word-break: keep-all; }
.flo-wl-reviews__who { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-color-8); }
.flo-wl-reviews__who strong { font-size: 15px; font-weight: 700; color: var(--point-color); }

/* ── 자료 보호 ──────────────────────────────────────────── */
.flo-wl-trust__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.flo-wl-trust__item { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; border: 1px solid var(--border-color-d); border-radius: 24px; }
.flo-wl-trust__item strong { font-size: 19px; font-weight: 700; color: var(--text-color-2); }
.flo-wl-trust__item p { font-size: 15px; line-height: 1.6; color: var(--text-color-5); }

/* ── 자주 묻는 질문 ─────────────────────────────────────── */
.flo-wl-faq { padding-top: 40px; }
.flo-wl-faq__list { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--border-color-d); }
.flo-wl-faq__item { border-bottom: 1px solid var(--border-color-d); }
.flo-wl-faq__item summary { position: relative; padding: 24px 48px 24px 4px; font-size: 18px; font-weight: 700; color: var(--text-color-2); cursor: pointer; list-style: none; }
.flo-wl-faq__item summary::-webkit-details-marker { display: none; }
.flo-wl-faq__item summary::after { content: '+'; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 26px; font-weight: 400; color: var(--point-color); }
.flo-wl-faq__item[open] summary::after { content: '−'; }
.flo-wl-faq__item summary:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.flo-wl-faq__item p { padding: 0 4px 24px; font-size: 16px; line-height: 1.7; color: var(--text-color-5); }

/* ── 작성 방법 화면 ─────────────────────────────────────── */
/* 🔑 소개 화면과 달리 첫 칸이 머리(80px) 바로 아래에서 시작한다 */
.flo-wl-guide { padding-top: 160px; }
.flo-wl-guide__back { display: flex; justify-content: center; margin-top: 60px; }

/* ── 좁은 폭 (R-308 · 1024 / 768 기준) ─────────────────── */
@media screen and (max-width: 1024px) {
  .flo-wl-band, .flo-wl-pains, .flo-wl-flow, .flo-wl-cafe24,
  .flo-wl-compare, .flo-wl-reviews, .flo-wl-trust, .flo-wl-faq, .flo-wl-guide { padding-left: clamp(16px, 2.93vw, 30px); padding-right: clamp(16px, 2.93vw, 30px); padding-top: 90px; padding-bottom: 90px; }
  .flo-wl-band { padding-top: 40px; padding-bottom: 10px; }
  .flo-wl-flow { padding-bottom: 0; }
  .flo-wl-faq { padding-top: 30px; }
  .flo-wl-guide { padding-top: 130px; }
  /* 🔻 2026-10-06 (#1515 다듬기) 흐름 3열(3 + 2, 둘째 줄이 빈다) · 세 칸 판 1열(964 폭에 한 줄 글이라 빈 판)을
     걷었다. 흐름은 다섯 칸 한 줄, 세 칸 판은 세 칸 그대로 두고 900 아래에서 접는다(맨 아래 「다듬기」 블록) */
  .flo-wl-flow__list { gap: 10px; }
  .flo-wl-flow__item { padding: 24px 18px; }
  .flo-wl-cafe24__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flo-wl-pains__item, .flo-wl-reviews__item { padding: 28px 24px; }
  .flo-wl-pains__pain { font-size: 20px; }
}
@media screen and (max-width: 767px) {
  .flo-wl-flow__list, .flo-wl-cafe24__list { grid-template-columns: minmax(0, 1fr); }
  .flo-wl-compare__table { font-size: 15px; }
  .flo-wl-compare__table th, .flo-wl-compare__table td { padding: 16px; }
  .flo-wl-faq__item summary { font-size: 16px; }
}

/* ── 기능 카드 ④ 배치 ───────────────────────────────────── */
/* 🔑 원본은 다섯째 칸도 두 칸 폭이라 칸이 다섯이면 넷째 줄 옆이 빈다 · 둘째 줄부터 두 칸씩 채운다 */
.feature-cont .feature-list .card04 .simple-list .simple.simple05 { grid-column: auto; }

/* ── 다듬기 (2026-10-06 · #1515 · 정본 plan/125- 「공개 소개 화면 다듬기」) ─────────────────
 | 🔑 구성(12칸)은 사용자 승인 그대로다. 여기는 폭 · 줄바꿈 · 대비 · 누름 크기만 고친다.
 | 🚫 `main.css` 를 고치지 마라 · 이 파일이 뒤에 실려 같은 선택자로 덮는다.
 */

/* ① 내용 폭 한 줄 · 누적 숫자와 설치 안내만 1,380 으로 넓어 다른 칸(1,200)과 좌우 끝이 어긋났다 */
.number .num-list, .promo .promo-content { max-width: 1200px; }

/* ② 머리 · 바닥 가장자리 = 첫 화면 카드 가장자리(30 · 좁은 폭 16~30) */
#header .head { padding-left: clamp(16px, 2.93vw, 30px); padding-right: clamp(16px, 2.93vw, 30px); }
#footer { padding-left: clamp(16px, 2.93vw, 30px); padding-right: clamp(16px, 2.93vw, 30px); }
/* 바닥 항목 · 낱칸 사이 여백 없이 한 문장처럼 붙어 있었다 → 항목마다 24 띄운다 */
#footer .inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
#footer .inner > span:has(a) { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ③ 줄바꿈 · 제목은 줄 길이를 고르게, 문단은 마지막 줄에 낱말 하나가 홀로 남지 않게 */
.main-sec .sec-title .title, .promo .promo-content .promo-text .title, .promo .promo-content .promo-text .text,
.visual-text-wrap .text-box .sub-tit,
.flo-wl-pains__pain, .flo-wl-flow__name, .flo-wl-cafe24__item strong, .flo-wl-trust__item strong,
.flo-wl-faq__item summary { text-wrap: balance; }
.main-sec[class*="flo-wl-"] p, .main-sec .sec-title .text, .flo-wl-reviews__item blockquote { text-wrap: pretty; }

/* ④ 읽는 폭 720 · 자주 묻는 질문의 답이 900 폭으로 한 줄이 길었다 */
.flo-wl-faq__list { max-width: 800px; }
.flo-wl-faq__item p { max-width: 720px; }

/* ⑤ 앱스토어 주소가 없을 때의 안내 글 · 단추처럼 굵게 서 있어 「누르는 것」으로 읽혔다 */
.visual-text-wrap .text-box .visual-cta > span, .promo .promo-content .promo-actions > span { font-size: 16px; font-weight: 600; line-height: 24px; }
/* 🔻 2026-10-06 (#1515 검토 M-1) 투명도 0.92 를 걷었다 · 보통 크기 글자라 4.5:1 이 필요한데 흐려 낮췄다 */

/* 🆕 2026-10-06 (#1515 검토 M-1) 첫 화면 설명 글은 그림의 밝은 구슬 위를 지난다. 가장 밝은 점 위 대비가 3.7:1(360) ·
     3.9:1(1440)이라 글 둘레만 살짝 어둡게 한다. 바탕 중앙값은 13:1 이상이다 */
.visual-text-wrap .text-box .sub-tit { text-shadow: 0 0 12px rgba(25, 31, 40, 0.6), 0 1px 2px rgba(25, 31, 40, 0.5); }

/* ⑥ 설치 안내 · 밝은 파랑 · 연보라 바탕 위 흰 글자 대비가 가장 나쁜 곳에서 2.1:1 이었다. 보라 막을 얹는다
     (#1591 창 머리와 같은 보라 계열 · 🚫 새 색 없음: `--flo-primary-deep` #3a2f6b · `--flo-primary` #6d5bc7 의 투명도만 쓴다)
     🔑 그림(`promo-bg`)과 흐르는 움직임은 그대로다. 막만 위에 얹는다 */
.promo { --flo-wl-promo-veil: linear-gradient(110deg, rgba(58, 47, 107, 0.9) 0%, rgba(58, 47, 107, 0.82) 50%, rgba(109, 91, 199, 0.92) 100%); }
/* 🔻 2026-10-06 (#1515 검토 M-1) 가운데 0.78 → 0.82 · 오른쪽 끝 0.82 → 0.92 · 안내 글(16/600)이 놓이는 밝은 쪽 대비 */
.promo .promo-content { background-image: var(--flo-wl-promo-veil), url('../images/front/main/promo-bg.jpg'); }
.promo { padding-bottom: 120px; }

/* ⑦ 카드 칸 · 줄마다 빈자리 없이 */
@media screen and (max-width: 1024px) and (min-width: 768px) {
  /* 누적 숫자 넷 · 3 + 1(넷째가 한 줄을 혼자 채움) → 2 + 2 */
  .number .num-list .num-item { flex: 0 0 auto; width: calc((100% - clamp(14px, 1.953vw, 20px)) / 2); }
}
@media screen and (max-width: 1024px) {
  .promo { padding-bottom: 90px; }
  /* 설치 안내 · 글과 단추가 한 줄에서 서로 밀렸다 → 글 위 · 단추 아래 */
  .promo .promo-content { flex-flow: column nowrap; align-items: flex-start; gap: 28px; }
}
@media screen and (max-width: 767px) {
  .promo .promo-content { background-image: var(--flo-wl-promo-veil), url('../images/front/main/promo-bg-mo.jpg'); }
}
@media screen and (max-width: 899px) {
  .flo-wl-pains__list, .flo-wl-reviews__list, .flo-wl-trust__list { grid-template-columns: minmax(0, 1fr); }
  .flo-wl-band__list li { flex-basis: 100%; }
  .flo-wl-flow__list { grid-template-columns: minmax(0, 1fr); }
}
/* 흐름 다섯 · 한 단계 한 줄(번호 · 이름 · 설명) · 🚨 768 이상만이다. 767 이하에 닿으면 설명 칸이 39px(360 폭)로 줄어
   글이 카드 밖으로 넘는다(#1515 검토 H-1). 767 이하는 위 「좁은 폭」 블록의 세로 쌓기 그대로다 */
@media screen and (min-width: 768px) and (max-width: 899px) {
  .flo-wl-flow__item { display: grid; grid-template-columns: 40px 160px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 20px 24px; }
}

/* ⑧ 비교 표 · 좁은 폭에서 표만 가로로 넘고, 「구분」 칸은 붙어 있어 어느 줄인지 놓치지 않는다 */
@media screen and (max-width: 767px) {
  .flo-wl-compare__table tbody th, .flo-wl-compare__table thead th:first-child { position: sticky; left: 0; z-index: 1; width: 112px; min-width: 112px; box-shadow: 1px 0 0 var(--border-color-e); }
  .flo-wl-compare__table tbody th { background: #fff; }
  .flo-wl-compare__table thead th:first-child { background: var(--bg-color); }
}

/* ⑨ 첫 화면 좁은 폭 · 설명이 카드 가장자리에 닿고, 안내 글이 「Scroll to Explore」 위에 겹쳤다 */
@media screen and (max-width: 767px) {
  .visual-text-wrap .text-box { padding-left: var(--visual-left); padding-right: var(--visual-right); }
  .visual-text-wrap .text-box .sub-tit br.mo-only { display: none; }
  .visual .explore { display: none; }
  .visual-text-wrap .text-box .visual-cta { margin-top: 24px; justify-content: center; }
  .visual-text-wrap .text-box .visual-cta .flo-wl-ghost { display: inline-flex; }
  /* 🔻 2026-10-06 (#1515 검토 M-2) 글 묶음이 카드 높이의 가운데(top 50%)에서 시작해 360×640 · 375×667 에서
     단추가 카드 아래 끝에 잘렸다(제목 위는 비어 있었다). 묶음을 카드 아래에 붙인다 · 카드 끝과 단추 사이 24
     (카드 아래 여백 20 + 24 = 44) · 탭 이름(위 126)과는 360×640 에서도 35 떨어진다 */
  .visual-text-wrap { top: auto; bottom: 44px; }
  /* 탭 이름 누름 자리 44 · 글자 자리는 그대로(위 여백만큼 끌어올린다) */
  .visual-content .visual-tabs .tab { padding: 15px 16px; margin-top: -15px; }
  /* 첫 화면 · 설치 안내 단추 · 손가락 자리는 킷의 `medium`(44, x-button `touch`)과 같은 높이 */
  .visual-text-wrap .text-box .visual-cta .flo-btn, .promo .promo-content .promo-actions .flo-btn { min-height: 44px; }
  /* 바닥 링크 누름 자리 44 */
  #footer .inner { gap: 0 16px; }
  #footer .inner > span:first-child, #footer .inner > span:last-child { flex-basis: 100%; }
  #footer .inner a { display: inline-flex; align-items: center; min-height: 44px; }
}

/*
 | 🆕 **바닥은 창 바닥에 붙는다** (2026-10-11 · 이슈 #1614).
 |
 | 🚨 작성 방법 화면은 쪽이 1752px 이라, 그보다 높은 창(1440x2000 실측)에서 바닥 아래에 빈 띠 248px 이 남았다.
 | 🔑 운영자 셸(`flo-shell.css` 「푸터는 창 바닥에 붙는다」) · 공개 셸(`flo-public.css`)과 같은 방식이다.
 |    몸통을 세로 줄로 세우고 본문이 남는 높이를 갖는다. 머리(`#header`)는 떠 있는 층이라 줄 밖이다.
 | 🔑 이 파일은 소개 셸의 랜딩이 아닌 쪽(`body.main`)에만 실린다 · 랜딩(`body.flo-ld`)은 건드리지 않는다.
 */
body.main { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body.main > #flo-content { flex: 1 0 auto; }