/* =========================================================
   청년 산림창업·성장지원 신규 메뉴 콘텐츠 전용 스타일
   - 기준 페이지 : /info/imupStory/forestStory_03.do
   - 적용 범위  : #contents 내부 (.ysf 접두사로 스코프 제한)
   - 기존 h4.content_title / 공통 스타일은 그대로 사용
   ========================================================= */

.ysf { color:#333; font-size:18px; line-height:1.6; word-break:keep-all; }
.ysf *, .ysf *::before, .ysf *::after { box-sizing:border-box; }
.ysf img { max-width:100%; vertical-align:middle; }

/* 섹션 타이틀 (기존 h4.content_title 에 포인트 컬러만 추가) */
.ysf .content_title { font-weight:700; color:#111; }
.ysf .content_title .point { color:#2f8f3a; }
.ysf .ysf-section { margin-top:70px; }
.ysf .ysf-section:first-child { margin-top:0; }

/* 아이콘 공통 (이미지 미존재 시 이모지 대체) */
.ysf .ysf-ico { position:relative; display:inline-flex; align-items:center; justify-content:center; }
.ysf .ysf-ico img { width:100%; height:100%; object-fit:contain; }

/* ---------- 1. 개요 카드 (대상/목적/내용) ---------- */
.ysf .ysf-cards { display:flex; gap:60px; margin:0; padding:0; list-style:none; }
.ysf .ysf-cards > li { flex:1; min-height:330px; padding:45px 30px 40px; border:1px solid #d9d9d9; border-radius:20px; text-align:center; background:#fff; }
.ysf .ysf-cards .ysf-ico { width:110px; height:110px; border-radius:26px; background:#f3f3f3; }
.ysf .ysf-cards .ysf-ico img { width:auto; height:auto; max-width:72px; max-height:72px; }
.ysf .ysf-cards strong { display:block; margin-top:28px; font-size:22px; font-weight:700; color:#111; }
.ysf .ysf-cards p { margin:10px 0 0; font-size:17px; color:#666; line-height:1.5; }

/* ---------- 2. 추천 대상 (체크리스트 + 일러스트) ---------- */
.ysf .ysf-recommend { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:40px 50px; border:1px solid #d9d9d9; border-radius:20px; background:#fff; }
.ysf .ysf-checklist { margin:0; padding:0; list-style:none; flex:1; }
.ysf .ysf-checklist > li { position:relative; padding:9px 0 9px 58px; font-size:18px; color:#333; }
.ysf .ysf-checklist > li::before { content:""; position:absolute; left:0; top:50%; width:22px; height:22px; margin-top:-11px; border:1.5px solid #444; border-radius:50%; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><path d='M6 11.5l3.2 3.2L16.5 8' fill='none' stroke='%23444' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat; }
.ysf .ysf-checklist > li::after { content:""; position:absolute; left:38px; top:50%; width:1px; height:18px; margin-top:-9px; background:#ccc; }
.ysf .ysf-recommend .ysf-illust { flex:0 0 auto; width:600px; text-align:right; }
.ysf .ysf-recommend .ysf-illust img { max-height:230px; }

/* ---------- 3. 세부 지원사항 / 운영사례 (원형 아이콘 4열) ---------- */
.ysf .ysf-circles { display:flex; gap:40px; margin:0; padding:0 30px; list-style:none; text-align:center; }
.ysf .ysf-circles > li { flex:1; }
.ysf .ysf-circles .ysf-ico { width:160px; height:160px; border-radius:50%; background:#eff4e8; overflow:hidden; }
.ysf .ysf-circles .ysf-ico img { width:100%; height:100%; object-fit:cover; }
.ysf .ysf-circles strong { display:block; margin-top:32px; font-size:20px; font-weight:700; color:#111; line-height:1.4; }
.ysf .ysf-circles strong small { display:block; font-size:17px; font-weight:400; color:#555; }
.ysf .ysf-circles p { margin:14px 0 0; font-size:16px; color:#666; line-height:1.5; }

/* 혜택 배지 */
.ysf .ysf-benefit { display:flex; align-items:center; gap:18px; margin:40px 0 0 80px; font-size:18px; color:#222; }
.ysf .ysf-benefit em { display:inline-block; min-width:90px; padding:8px 22px; border-radius:6px; background:#cfe0ad; color:#2f6b25; font-weight:700; font-style:normal; text-align:center; }

/* ---------- 4. 주요 창업 분야 (알약형 리스트) ---------- */
.ysf .ysf-fields { margin:0; padding:0; list-style:none; }
.ysf .ysf-fields > li { display:flex; align-items:stretch; min-height:64px; margin-top:18px; border:1px solid #cdd8c9; border-radius:40px; overflow:hidden; background:#fff; }
.ysf .ysf-fields > li:first-child { margin-top:0; }
.ysf .ysf-fields .ysf-label { display:flex; align-items:center; gap:18px; flex:0 0 285px; padding:0 0 0 48px; font-size:20px; font-weight:700; }
.ysf .ysf-fields .ysf-label .ysf-ico { width:42px; height:42px; }
.ysf .ysf-fields .ysf-label .ysf-ico img { width:auto; height:auto; max-width:42px; max-height:42px; }
.ysf .ysf-fields .ysf-desc { display:flex; align-items:center; flex:1; padding:0 20px; font-size:17px; color:#333; }
/* 분야별 컬러 (라벨 배경·글자, 행 테두리) */
.ysf .ysf-fields .c-green  { background:#f1f6ef; color:#2e8b3a; }
.ysf .ysf-fields .c-yellow { background:#f6f4ef; color:#b58a1c; }
.ysf .ysf-fields .c-brown  { background:#f6f1ef; color:#b2611f; }
.ysf .ysf-fields .c-red    { background:#f6efef; color:#a8463f; }
.ysf .ysf-fields .c-navy   { background:#f2f3f8; color:#3b3f8f; }
.ysf .ysf-fields .c-forest { background:#f2f8f6; color:#3d7f4a; }
.ysf .ysf-fields > li:has(.c-green)  { border-color:#5a9c5f; }
.ysf .ysf-fields > li:has(.c-yellow) { border-color:#c9b27a; }
.ysf .ysf-fields > li:has(.c-brown)  { border-color:#c99a7a; }
.ysf .ysf-fields > li:has(.c-red)    { border-color:#c98a86; }
.ysf .ysf-fields > li:has(.c-navy)   { border-color:#9a9cc9; }
.ysf .ysf-fields > li:has(.c-forest) { border-color:#7fb08a; }

/* ---------- 5. 사업 구조도 ---------- */
.ysf .ysf-org { text-align:center; }
.ysf .ysf-org .ysf-pill { display:inline-flex; align-items:center; justify-content:center; gap:28px; width:636px; max-width:100%; height:78px; border-radius:40px; color:#fff; }
.ysf .ysf-org .ysf-pill.lv1 { background:#7fb23a; }
.ysf .ysf-org .ysf-pill.lv1 .lbl { font-size:22px; font-weight:400; opacity:.95; }
.ysf .ysf-org .ysf-pill.lv1 .name { font-size:30px; font-weight:700; }
.ysf .ysf-org .ysf-pill.lv2 { background:#a3bd5c; font-size:26px; font-weight:400; }
.ysf .ysf-org .ysf-pill.lv2 b { font-weight:700; }
.ysf .ysf-org .ysf-line { width:0; height:46px; margin:0 auto; border-left:1px dashed #9aa58f; }
.ysf .ysf-org-box { padding:50px 50px 40px; border-radius:30px; background:#e8efdc; text-align:left; }
.ysf .ysf-org-box h5 { margin:0 0 30px; font-size:26px; font-weight:700; color:#111; }
.ysf .ysf-roles { display:flex; gap:36px; margin:0; padding:0; list-style:none; }
.ysf .ysf-roles > li { flex:1; min-height:236px; padding:38px 44px; border:1px solid #bfd19e; border-radius:20px; background:#fff; }
.ysf .ysf-roles .num { display:block; font-size:36px; font-weight:500; color:#2f8f3a; line-height:1; }
.ysf .ysf-roles p { margin:40px 0 0; font-size:21px; font-weight:500; color:#222; line-height:1.55; }
.ysf .ysf-summary { margin:38px 0 0; font-size:21px; color:#333; }
.ysf .ysf-summary::before { content:"\2713"; margin-right:12px; font-size:22px; font-weight:700; color:#2f8f3a; }
.ysf .ysf-summary strong { margin-right:14px; color:#2f8f3a; font-weight:700; }
.ysf .ysf-summary mark { background:linear-gradient(transparent 60%, #d7ef9c 60%); color:inherit; padding:0 2px; }

/* ---------- 6. AI-IN-ONE 케어 (체크 타이틀/설명 + QR) ---------- */
.ysf .ysf-care { display:flex; align-items:center; justify-content:space-between; gap:40px; padding:30px 50px 36px; border:1px solid #d9d9d9; border-radius:20px; background:#fff; }
.ysf .ysf-care .ysf-checklist > li { padding:13px 0 13px 32px; }
.ysf .ysf-care .ysf-checklist > li::before { top:22px; margin-top:0; }
.ysf .ysf-care .ysf-checklist > li::after { display:none; }
.ysf .ysf-care .ysf-checklist strong { display:block; font-size:18px; font-weight:700; color:#111; }
.ysf .ysf-care .ysf-checklist span { display:block; margin-top:4px; font-size:16px; color:#555; }
.ysf .ysf-care .ysf-qr { flex:0 0 auto; width:130px; height:130px; }
.ysf .ysf-care .ysf-qr img { width:100%; height:100%; }

/* ---------- 반응형 ---------- */
@media (max-width:1200px) {
  .ysf .ysf-cards { gap:30px; }
  .ysf .ysf-circles { gap:20px; padding:0; }
  .ysf .ysf-circles .ysf-ico { width:130px; height:130px; }
  .ysf .ysf-recommend .ysf-illust { width:45%; }
  .ysf .ysf-roles { flex-wrap:wrap; }
  .ysf .ysf-roles > li { flex:1 1 calc(33.333% - 24px); min-height:200px; }
}
@media (max-width:860px) {
  .ysf { font-size:16px; }
  .ysf .ysf-section { margin-top:50px; }
  .ysf .ysf-cards { flex-direction:column; gap:16px; }
  .ysf .ysf-cards > li { min-height:0; padding:30px 20px; }
  .ysf .ysf-recommend { flex-direction:column-reverse; padding:24px 20px; }
  .ysf .ysf-recommend .ysf-illust { width:100%; text-align:center; }
  .ysf .ysf-circles { flex-wrap:wrap; }
  .ysf .ysf-circles > li { flex:1 1 calc(50% - 10px); }
  .ysf .ysf-benefit { margin-left:0; flex-wrap:wrap; }
  .ysf .ysf-fields .ysf-label { flex-basis:170px; padding-left:20px; font-size:17px; }
  .ysf .ysf-fields .ysf-desc { font-size:15px; padding:12px 16px; }
  .ysf .ysf-org .ysf-pill { height:64px; gap:14px; }
  .ysf .ysf-org .ysf-pill.lv1 .lbl { font-size:16px; }
  .ysf .ysf-org .ysf-pill.lv1 .name { font-size:22px; }
  .ysf .ysf-org .ysf-pill.lv2 { font-size:20px; }
  .ysf .ysf-org-box { padding:28px 20px; border-radius:20px; }
  .ysf .ysf-org-box h5 { font-size:21px; }
  .ysf .ysf-roles { gap:14px; }
  .ysf .ysf-roles > li { flex:1 1 calc(50% - 7px); min-height:0; padding:22px; }
  .ysf .ysf-roles .num { font-size:28px; }
  .ysf .ysf-roles p { margin-top:18px; font-size:17px; }
  .ysf .ysf-summary { font-size:17px; }
  .ysf .ysf-care { flex-direction:column; align-items:flex-start; padding:20px; }
  .ysf .ysf-care .ysf-qr { align-self:center; }
}