/* 9111 소상공인 홈페이지 제작 후기(연재 '사장님 매출 성장기' 1화 이관, 2026-10-17) = 상담 기록.
   소제목 없는 이야기 글이라 장면 여섯을 작은 꼬리표(첫 만남·검색·깔때기·204개·세 단어·시작)와 가는 선으로 끊고, 사장님 대사는 왼쪽 말풍선,
   핵심 문장은 굵게 파랑 선, 검색 결과는 다섯 페이지 칸(5페이지만 노랑 46위), 깔때기는 좁아지는 다섯 띠, 1주일·204개는 두 숫자 타일,
   세 단어는 세 칸, 마지막 문장은 남색 결론, 끝에 다음 글 단추. 그림은 전부 Codex 톤 A 재제작. 글은 연재 본문 그대로 */
.v-artd .sp-9111 .prose{font-size:17.5px;line-height:1.85}
.v-artd .sp-9111 .prose h2.cs-tag{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 22px;padding:0;border:0;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--blue);min-height:0}
.v-artd .sp-9111 .prose h2.cs-tag::before{content:none}
.v-artd .sp-9111 .prose h2.cs-tag::after{content:"";position:static;flex:1;height:1.5px;background:var(--line)}
.v-artd .sp-9111 :where(.prose) li::before{content:none}
.v-artd .sp-9111 :where(.prose) ul,.v-artd .sp-9111 :where(.prose) ol{list-style:none;padding:0;margin:0}
.v-artd .sp-9111 :where(.prose) li{margin:0}
.v-artd .sp-9111 :where(.prose) figure{border:0;background:none;padding:0;margin:0}
.v-artd .sp-9111 :where(.prose) .cs-s{padding:48px 0 4px}
.v-artd .sp-9111 :where(.prose) .cs-s:first-of-type{padding-top:28px}
.v-artd .sp-9111 :where(.prose) .cs-s>p{margin:0 0 18px}
.v-artd .sp-9111 :where(.prose) .cs-s>p strong{color:var(--ink);font-weight:800}
.v-artd .sp-9111 .prose .cs-lead.cs-lead{font-size:19px;font-weight:600}

/* 그림 */
.v-artd .sp-9111 :where(.prose) .cs-hero{margin:0 0 8px}
.v-artd .sp-9111 :where(.prose) .cs-hero img{display:block;width:100%;height:auto;border-radius:16px}
.v-artd .sp-9111 :where(.prose) .cs-fig{margin:8px 0 24px;padding:16px;border-radius:16px;background:var(--soft);text-align:center}
.v-artd .sp-9111 :where(.prose) .cs-fig img{display:block;width:100%;height:auto;border-radius:10px;background:#fff}
.v-artd .sp-9111 :where(.prose) .cs-tall img,.v-artd .sp-9111 :where(.prose) .cs-paper img{max-width:520px;margin:0 auto}

/* 대사·핵심 */
.v-artd .sp-9111 :where(.prose) .cs-say{position:relative;max-width:560px;margin:0 0 18px!important;padding:14px 20px;border-radius:4px 16px 16px 16px;background:#fff;box-shadow:0 0 0 1.5px var(--line);font-size:17px;font-weight:700;color:var(--ink)}
.v-artd .sp-9111 :where(.prose) .cs-point{padding:4px 0 4px 18px;border-left:4px solid var(--blue);font-weight:800;color:var(--ink)}

/* 다섯 페이지 */
.v-artd .sp-9111 :where(.prose) .cs-pages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:4px 0 22px}
.v-artd .sp-9111 :where(.prose) .cs-pages li{display:flex;flex-direction:column;gap:4px;min-height:74px;padding:12px 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.v-artd .sp-9111 :where(.prose) .cs-pages b{font-size:12.5px;font-weight:800;color:var(--sub)}
.v-artd .sp-9111 :where(.prose) .cs-pages span{font-size:14px;font-weight:700;color:var(--sub)}
.v-artd .sp-9111 :where(.prose) .cs-pages .hit{background:var(--yellow);box-shadow:none}
.v-artd .sp-9111 :where(.prose) .cs-pages .hit b{color:var(--ink)}
.v-artd .sp-9111 :where(.prose) .cs-pages .hit span{font-size:22px;font-weight:900;color:var(--ink)}

/* 깔때기 */
.v-artd .sp-9111 :where(.prose) .cs-funnel{display:flex;flex-direction:column;align-items:center;gap:6px;margin:4px 0 22px}
.v-artd .sp-9111 :where(.prose) .cs-funnel li{width:var(--w);display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:999px;background:var(--soft)}
.v-artd .sp-9111 :where(.prose) .cs-funnel b{flex:none;padding:2px 10px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:800;color:var(--blue)}
.v-artd .sp-9111 :where(.prose) .cs-funnel span{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.v-artd .sp-9111 :where(.prose) .cs-funnel .last{background:var(--navy)}
.v-artd .sp-9111 :where(.prose) .cs-funnel .last b{background:var(--yellow);color:var(--ink)}
.v-artd .sp-9111 :where(.prose) .cs-funnel .last span{color:#fff}

/* 두 숫자·세 단어 */
.v-artd .sp-9111 :where(.prose) .cs-num{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 22px}
.v-artd .sp-9111 :where(.prose) .cs-num>div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:14px;background:var(--soft)}
.v-artd .sp-9111 :where(.prose) .cs-num b{font-size:30px;font-weight:900;letter-spacing:-1px;color:var(--ink);line-height:1.1}
.v-artd .sp-9111 :where(.prose) .cs-num span{font-size:13.5px;line-height:1.55;color:#3b4152}
.v-artd .sp-9111 :where(.prose) .cs-num .big{background:var(--navy)}
.v-artd .sp-9111 :where(.prose) .cs-num .big b{color:var(--yellow)}
.v-artd .sp-9111 :where(.prose) .cs-num .big span{color:#d6dcf5}
.v-artd .sp-9111 :where(.prose) .cs-three{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 22px}
.v-artd .sp-9111 :where(.prose) .cs-three li{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line)}
.v-artd .sp-9111 :where(.prose) .cs-three li+li::before{content:"→";position:absolute;left:-11px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:800;color:var(--sub)}
.v-artd .sp-9111 :where(.prose) .cs-three b{font-size:20px;font-weight:900;color:var(--blue);letter-spacing:-.4px}
.v-artd .sp-9111 :where(.prose) .cs-three span{font-size:13.5px;color:#3b4152}

/* 결론·다음 글 */
.v-artd .sp-9111 :where(.prose) .cs-final{margin:4px 0 24px;padding:24px 28px;border:0;border-radius:16px;background:var(--navy);color:#fff;font-size:19px;line-height:1.7;font-weight:800;font-style:normal;text-align:center}
.v-artd .sp-9111 :where(.prose) .cs-final::before{content:none}
.v-artd .sp-9111 :where(.prose) .cs-next{display:flex;flex-direction:column;gap:4px;margin:40px 0 0;padding:20px 24px;border-radius:14px;background:#fff;box-shadow:0 0 0 2px var(--blue);text-decoration:none}
.v-artd .sp-9111 :where(.prose) .cs-next span{font-size:12.5px;font-weight:800;color:var(--blue)}
.v-artd .sp-9111 :where(.prose) .cs-next b{font-size:18px;font-weight:800;color:var(--ink)}
.v-artd .sp-9111 :where(.prose) .cs-next:hover b{color:var(--blue)}

@media (max-width:720px){
  .v-artd .sp-9111 :where(.prose) .cs-pages{grid-template-columns:repeat(5,1fr);gap:4px}
  .v-artd .sp-9111 :where(.prose) .cs-pages li{padding:8px 6px;min-height:60px}
  .v-artd .sp-9111 :where(.prose) .cs-pages b{font-size:10.5px}
  .v-artd .sp-9111 :where(.prose) .cs-pages span{font-size:11px}
  .v-artd .sp-9111 :where(.prose) .cs-pages .hit span{font-size:16px}
  .v-artd .sp-9111 :where(.prose) .cs-funnel li{padding:8px 12px;gap:8px}
  .v-artd .sp-9111 :where(.prose) .cs-funnel span{font-size:13px;white-space:normal}
  .v-artd .sp-9111 :where(.prose) .cs-funnel li{width:calc(var(--w) * .8 + 20%)}
  .v-artd .sp-9111 :where(.prose) .cs-num,.v-artd .sp-9111 :where(.prose) .cs-three{grid-template-columns:1fr}
  .v-artd .sp-9111 :where(.prose) .cs-three li+li::before{content:none}
}