@charset "utf-8";

/* =========================================================
   SW가치확산센터 전용 컴포넌트 (01.php 비전 / 추진목표 / 핵심 추진분야)
   색상: #083C72 / #2773C9 / #4656AA / #3662AA
   ========================================================= */

/* 페이지 타이틀 상단 여백 (01 소개 페이지 - 타 페이지와 통일) */
.scontents .sub_page_title.swvc_page_top { margin-top:0; }

/* 3개 컴포넌트 공통 가로폭 (핵심 추진분야 기준: 363+220+363+gap17*2 = 980) */
.swvc_vision, .swvc_goal, .swvc_field { max-width:980px; margin-left:auto; margin-right:auto; }

/* 1. 비전 */
.swvc_vision { width:100%; }
.swvc_vision_top { display:flex; justify-content:center; }
.swvc_box { min-width:320px; border:2px solid #083C72; border-radius:10px; overflow:hidden; background:#fff; }
.swvc_box_head { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 24px; background:#083C72; }
.swvc_box_head img { width:34px; height:34px; flex:0 0 auto; }
.swvc_box_head span { font-size:20px; font-weight:800; color:#fff; }
.swvc_box_body { padding:16px 40px; text-align:center; font-size:18px; font-weight:400; line-height:1.5; letter-spacing:-0.03em; color:#333; background:#fff; word-break:keep-all; }
.swvc_vision_flow { display:flex; justify-content:center; margin:-1px 0; }
.swvc_vision_flow img { width:50%; max-width:520px; height:auto; }
.swvc_vision_cols { display:flex; gap:10px; }
.swvc_plainbox { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:20px 28px; border:2px solid #083C72; border-radius:10px; background:#fff; font-size:16px; font-weight:400; line-height:1.5; letter-spacing:-0.03em; color:#333; word-break:keep-all; }

/* 2. 추진목표 */
.swvc_goal { width:100%; }
.swvc_vision + .swvc_goal { margin-top:40px; }
.swvc_goal_head { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 20px; margin-bottom:10px; background:#4656AA; border-radius:10px; }
.swvc_goal_head img { width:36px; height:33px; flex:0 0 auto; }
.swvc_goal_head span { font-size:20px; font-weight:800; color:#fff; }
.swvc_goal_list { display:flex; gap:10px; }
.swvc_goal_list > div { flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px 10px; border:2px solid #4656AA; border-radius:10px; background:#fff; font-size:16px; font-weight:400; line-height:1.4; letter-spacing:-0.03em; color:#333; word-break:keep-all; }

/* 3. 핵심 추진분야 */
.swvc_field { display:flex; align-items:center; justify-content:center; gap:17px; flex-wrap:wrap; }
.swvc_field_col { display:flex; flex-direction:column; gap:10px; flex:1 1 300px; max-width:363px; }
.swvc_field_card { border:2px solid #083C72; border-radius:10px; overflow:hidden; }
.swvc_field_card_head { padding:14px 20px; text-align:center; font-size:20px; font-weight:700; letter-spacing:-0.03em; color:#fff; background:#083C72; }
.swvc_field_card_body { padding:15px 20px; text-align:center; font-size:18px; font-weight:500; line-height:1.4; letter-spacing:-0.03em; color:#333; background:#fff; word-break:keep-all; }
.swvc_field_card.swvc_fc2 { border-color:#2773C9; }
.swvc_field_card.swvc_fc2 .swvc_field_card_head { background:#2773C9; }
.swvc_field_card.swvc_fc3 { border-color:#4656AA; }
.swvc_field_card.swvc_fc3 .swvc_field_card_head { background:#4656AA; }
.swvc_field_card.swvc_fc4 { border-color:#3662AA; }
.swvc_field_card.swvc_fc4 .swvc_field_card_head { background:#3662AA; }
/* 중앙 원: 바깥 원(#D9D9D9 테두리) + 안쪽 원(그림자) — 피그마 59-490 */
.swvc_field_core { position:relative; flex:0 0 220px; width:220px; height:220px; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:50%; border:2px solid #D9D9D9; background:#fff; }
.swvc_field_core::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80.9%; height:80.9%; border-radius:50%; background:#fff; border:1px solid #F5F5F5; box-shadow:0 0 15px rgba(0,0,0,0.3); }
.swvc_field_core span { position:relative; z-index:1; font-size:24px; font-weight:800; letter-spacing:-0.02em; line-height:1.35; color:#333; }

/* 반응형 */
@media screen and (max-width:768px) {
	.swvc_vision_flow { display:none; }
	.swvc_vision_cols { flex-direction:column; }
	.swvc_box_body { padding-left:20px; padding-right:20px; }
	.swvc_plainbox { padding:16px 20px; }
	.swvc_goal_list { flex-wrap:wrap; }
	.swvc_goal_list > div { flex:1 1 calc(50% - 5px); }
	.swvc_field { flex-direction:column; }
	.swvc_field_col { max-width:none; width:100%; flex-basis:auto; }
	.swvc_field_core { order:-1; }
}
@media screen and (max-width:480px) {
	.swvc_goal_list > div { flex:1 1 100%; }
}


/* =========================================================
   스크롤 등장 애니메이션 + 이미지 반응형 (sw-dissemination)  2026-09
   ========================================================= */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }
.swm-stagger > * { opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease; }
.swm-stagger.in > * { opacity:1; transform:none; }
.swm-stagger.in > *:nth-child(1){transition-delay:0s}.swm-stagger.in > *:nth-child(2){transition-delay:.09s}.swm-stagger.in > *:nth-child(3){transition-delay:.18s}.swm-stagger.in > *:nth-child(4){transition-delay:.27s}.swm-stagger.in > *:nth-child(5){transition-delay:.36s}.swm-stagger.in > *:nth-child(n+6){transition-delay:.45s}
@media (prefers-reduced-motion:reduce){ .reveal,.swm-stagger>*{opacity:1!important;transform:none!important;transition:none!important} }
/* 표 모바일 가로 스크롤 방지 */
.section_tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* --- AI·SW 저변확대: 중앙 2중 원 + 위성 3원 (피그마 146-6564) --- */
.swvc_spread { background:#fff; border-radius:14px; padding:34px 24px 30px; margin-top:6px; }
.swvc_spread_stage { position:relative; width:100%; max-width:548px; margin:0 auto; aspect-ratio:548 / 533; container-type:inline-size; }
/* 중앙 바깥 원(그레이) */
.swvc_spread_core { position:absolute; left:8.76%; top:14.82%; width:81.75%; height:84.05%; border-radius:50%; background:#E7ECF1; }
/* 중앙 안쪽 원(네이비 + 그림자) */
.swvc_spread_core::before { content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:79.02%; height:79.02%; border-radius:50%; background:#083C72; box-shadow:0 0 30px rgba(0,0,0,0.2); }
.swvc_spread_core > span { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:88%; text-align:center; color:#fff; font-size:clamp(15px,4.38cqw,24px); font-weight:700; letter-spacing:-0.02em; line-height:1.35; word-break:keep-all; }
/* 위성 원 */
.swvc_sat { position:absolute; width:36.24%; height:37.26%; border-radius:50%; box-sizing:border-box; border:2px solid #1D92A8; background:#F3F9FA; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2% 0; }
.swvc_sat_ico { display:flex; align-items:flex-end; justify-content:center; gap:2px; height:33%; }
.swvc_sat_ico img { height:100%; width:auto; max-width:100%; display:block; }
.swvc_sat b { margin-top:6%; font-size:clamp(12px,3.65cqw,20px); font-weight:700; line-height:1.3; letter-spacing:-0.05em; white-space:nowrap; color:#1D92A8; }
.swvc_sat span { margin-top:2%; font-size:clamp(10px,2.92cqw,16px); font-weight:500; color:#333; line-height:1.35; letter-spacing:-0.02em; word-break:keep-all; }
.swvc_sat.st_top { left:31.57%; top:0; }
.swvc_sat.st_bl { left:0.06%; top:62.66%; border-color:#4656AA; background:#F5F6FA; }
.swvc_sat.st_bl b { color:#4656AA; }
.swvc_sat.st_br { left:63.72%; top:62.66%; border-color:#2773C9; background:#F4F8FC; }
.swvc_sat.st_br b { color:#2773C9; }
@media screen and (max-width:600px){
	.swvc_spread { padding:24px 16px; }
	.swvc_spread_stage { aspect-ratio:auto; max-width:300px; margin:0 auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; container-type:normal; }
	/* AI·SW 저변확대 원형을 맨 위로 (DOM 순서: core → st_top → st_bl → st_br) */
	.swvc_spread_core { position:relative; left:auto; top:auto; order:0; width:210px; height:210px; flex:0 0 auto; align-self:center; }
	.swvc_spread_core > span { font-size:20px; }
	.swvc_sat,
	.swvc_sat.st_top, .swvc_sat.st_bl, .swvc_sat.st_br { position:relative; left:auto; top:auto; order:1; width:210px; height:210px; flex:0 0 auto; align-self:center; margin:0 auto; padding:14px; }
	.swvc_sat_ico { height:60px; }
	.swvc_sat b { font-size:17px; margin-top:8px; }
	.swvc_sat span { font-size:14px; margin-top:4px; }
}

/* --- 창업지원: 중앙 원(2중, 안쪽 그림자) + 5 방사형 점선 스포크 + 라벨 (피그마 65-1165) --- */
.swvc_rad { position:relative; width:100%; max-width:820px; margin:10px auto 0; aspect-ratio:820 / 400; container-type:inline-size; }
.swvc_rad_svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.swvc_rad_core { position:absolute; left:50%; top:56%; transform:translate(-50%,-50%); width:23.9%; aspect-ratio:1; border-radius:50%; background:#fff; border:1px solid #083C72; box-shadow:0 0 15px rgba(0,0,0,0.3); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:clamp(15px,2.93cqw,24px); font-weight:800; color:#083C72; line-height:1.35; letter-spacing:-0.02em; word-break:keep-all; }
.swvc_rad_item { position:absolute; font-size:clamp(13px,2.44cqw,20px); font-weight:500; line-height:1.35; color:#333; letter-spacing:-0.05em; word-break:keep-all; }
.swvc_rad_item.p1 { left:33%; top:0; width:34%; text-align:center; }
.swvc_rad_item.p2 { left:0; top:39%; width:29%; text-align:right; }
.swvc_rad_item.p3 { left:71%; top:39%; width:29%; text-align:left; }
.swvc_rad_item.p4 { left:0; top:84%; width:33.9%; text-align:right; }
.swvc_rad_item.p5 { left:66.2%; top:84%; width:32%; text-align:left; }
@media screen and (max-width:760px){
	.swvc_rad { aspect-ratio:auto; max-width:440px; container-type:normal; display:flex; flex-direction:column; align-items:center; gap:10px; }
	.swvc_rad_svg { display:none; }
	.swvc_rad_core { position:relative; left:auto; top:auto; transform:none; width:200px; margin-bottom:6px; font-size:19px; }
	.swvc_rad_item { position:relative !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; white-space:normal !important; width:100% !important; max-width:360px; text-align:center !important; font-size:15px; background:#f4f8fc; border:1px solid #e1e8f2; border-radius:8px; padding:12px; }
}

/* --- 표 모바일 카드 (swvc_rtbl) --- */
.swvc_rtbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media screen and (max-width:768px){
	.swvc_rtbl { overflow:visible; }
	.swvc_rtbl table, .swvc_rtbl thead, .swvc_rtbl tbody, .swvc_rtbl tr, .swvc_rtbl th, .swvc_rtbl td { display:block; width:auto !important; }
	.swvc_rtbl th, .swvc_rtbl td, .swvc_rtbl .tbl_ul li, .swvc_rtbl .tbl_ul { white-space:normal !important; word-break:keep-all; overflow-wrap:anywhere; }
	.swvc_rtbl colgroup, .swvc_rtbl col, .swvc_rtbl thead { display:none; }
	.swvc_rtbl tbody tr { margin-bottom:10px; border:0; border-radius:10px; overflow:hidden; box-shadow:0 0 0 1px #cfdbea; background:#fff; }
	.swvc_rtbl tbody tr:has(th[rowspan]) { margin-top:22px; }
	.swvc_rtbl tbody th, .swvc_rtbl tbody td { border:0 !important; }
	.swvc_rtbl tbody th { background:#0b3c72; color:#fff; text-align:center; padding:11px; font-size:15px; font-weight:700; }
	.swvc_rtbl tbody td { border-top:1px solid #eef2f7 !important; padding:11px 16px; text-align:left !important; font-size:14px; line-height:1.55; }
	.swvc_rtbl tbody td:nth-of-type(1) { background:#EEF4FD; font-weight:700; color:#0b3c72; }
}


.swvc-infobox{
    display:flex;
    flex-direction:column;
    gap:1.25rem;
    background:#ffffff;
    border-radius:0.85em;
    padding:1.8em;
}

.swvc-infobox-list{
    display:flex;
    flex-direction:column;
    gap:0.35rem;
}

.swvc-infobox-list h4{
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:-0.035em;
    color:#083C72;
}

.swvc-infobox-list li{
    font-size:1.025rem;
    font-weight:400;
    letter-spacing:-0.035em;
    position:relative;
    padding-left:1.2rem;
}

.swvc-infobox-list li:before{
    content:'';
    display:block;
    border-radius:50%;
    width:6px;
    height:6px;
    background:#1748a4;
    position:absolute;
    left:0.5rem;
    top:0.6rem;
}

/* =========================================================
   04.php AI·SW 창업 지원 체계 — 5축 카드
   색상: #083C72 / #2773C9 / #1D92A8 / #4656AA / #3662AA (상단 방사형 다이어그램과 동일 순서)
   ========================================================= */
.swvc_sup_lead { margin-bottom:10px; font-size:18px; font-weight:500; letter-spacing:-0.03em; color:#333; word-break:keep-all; }
.swvc_sup { --c:#083C72; --bg:#F2F5F9; display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0; padding:0; list-style:none; }
.swvc_sup > li { --c:#083C72; --bg:#F2F5F9; display:flex; flex-direction:column; background:var(--c); border:2px solid var(--c); border-radius:10px; overflow:hidden; }
.swvc_sup > li.k2 { --c:#2773C9; --bg:#F4F8FC; }
.swvc_sup > li.k3 { --c:#1D92A8; --bg:#F3F9FA; }
.swvc_sup > li.k4 { --c:#4656AA; --bg:#F5F6FA; }
.swvc_sup > li.k5 { --c:#3662AA; --bg:#F4F6FA; }
.swvc_sup_top { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; }
.swvc_sup_body { flex:1; padding:16px; background:#fff; }
.swvc_sup_ic { display:flex; flex:0 0 auto; color:#fff; }
.swvc_sup_ic svg { width:34px; height:34px; display:block; }
.swvc_sup_no { display:flex; flex-direction:row; align-items:center; gap:8px; }
.swvc_sup_no b { font-size:20px; font-weight:800; line-height:1; color:#fff; }
.swvc_sup_no em { padding:0; font-size:20px; font-weight:700; font-style:normal; line-height:1; letter-spacing:-0.03em; color:#fff; white-space:nowrap; }
.swvc_sup_tit { margin-top:0; padding-bottom:10px; min-height:2.8em; box-sizing:content-box; border-bottom:1px solid #e5eaf0; font-size:18px; font-weight:700; line-height:1.4; letter-spacing:-0.03em; color:var(--c); word-break:keep-all; }
.swvc_sup_list { margin:10px 0 0; padding:0; list-style:none; }
.swvc_sup_list li { position:relative; padding-left:12px; font-size:16px; font-weight:400; line-height:1.55; letter-spacing:-0.03em; color:#333; word-break:keep-all; }
.swvc_sup_list li + li { margin-top:8px; }
.swvc_sup_list li::before { content:""; position:absolute; left:0; top:0.68em; width:5px; height:5px; border-radius:50%; background:var(--c); }
@media screen and (max-width:1200px){
	.swvc_sup { grid-template-columns:repeat(3,1fr); }
}
@media screen and (max-width:768px){
	.swvc_sup_lead { font-size:16px; }
	.swvc_sup { grid-template-columns:repeat(2,1fr); gap:10px; }
	.swvc_sup_top { padding:12px; }
	.swvc_sup_body { padding:14px 12px; }
	.swvc_sup_ic svg { width:24px; height:24px; }
	.swvc_sup_list li { font-size:15px; }
}
@media screen and (max-width:480px){
	.swvc_sup { grid-template-columns:1fr; }
	.swvc_sup_tit { min-height:0; }
}