@charset "utf-8";

/* SW기초교육 (sw-basic) 페이지 조정 */

/* 표 첫 열(교과목명/모듈명)이 글자 중간에서 끊기지 않도록 */
.section_tbl table tbody th { word-break:keep-all; }

/* =========================================================
   전교생 SW기초교육 교육과정 흐름도 (con_img05 → HTML) + 애니메이션  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(n+5){transition-delay:.36s}
@media (prefers-reduced-motion:reduce){ .reveal,.swm-stagger>*{opacity:1!important;transform:none!important;transition:none!important} }

/* ===== 전교생 SW기초교육 교육과정 (피그마 201-8220) ===== */
.swb_flow2_wrap { margin-top:20px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.swb_flow2 { display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; width:max-content; min-width:100%; box-sizing:border-box; margin:0 auto; background:#fff; border-radius:14px; padding:76px 70px 26px; }

/* 화살표(#424242 실심 화살표) */
.swb_f2_ar { flex:0 0 auto; align-self:center; width:22px; height:15px; margin:0 3px; background:#424242; clip-path:polygon(0 32%, 60% 32%, 60% 4%, 100% 50%, 60% 96%, 60% 68%, 0 68%); }

/* 원 노드 공통 */
.swb_f2 { flex:0 0 auto; box-sizing:border-box; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; word-break:keep-all; letter-spacing:-0.03em; line-height:1.32; }

/* 입학전(가장 큰 원, 점선 구분선) */
.swb_f2.n_pre { width:126px; height:126px; gap:5px; border:2px solid #2773C9; background:#F5F6FA; padding:12px 8px; }
.swb_f2.n_pre b { font-size:22px; font-weight:800; color:#2773C9; }
.swb_f2.n_pre .swb_f2_div { width:72%; height:2px; background:repeating-linear-gradient(to right,#b3b3b3 0 2px,transparent 2px 6px); opacity:.88; }
.swb_f2.n_pre span { font-size:16px; font-weight:500; color:#333; }

/* 입학 / 졸업(아이콘 원) */
.swb_f2.n_ico { width:104px; height:104px; gap:5px; color:#fff; }
.swb_f2.n_ico img { width:39px; height:auto; display:block; }
.swb_f2.n_ico em { font-style:normal; font-size:20px; font-weight:800; }
.swb_f2.n_enter { background:#1D92A8; }
.swb_f2.n_grad  { background:#083C72; }

/* 기초 원 3개 */
.swb_f2.gc { width:102px; height:102px; border:2px solid #CB8810; background:#fff; font-size:16px; font-weight:500; color:#333; padding:5px; }

/* 배경 존(노랑/파랑, 라벨 포함) + 화살표는 그 위로. 두 배경 세로 길이 동일 */
.swb_f2_zone { position:relative; flex:0 0 auto; display:flex; align-items:center; padding:14px 16px; }
.swb_f2_zone.z_adv { padding-left:34px; padding-right:34px; }
.swb_f2_zone::before { content:""; position:absolute; left:0; right:0; top:calc(50% - 140px); height:236px; border-radius:10px; z-index:0; }
.swb_f2_zone.z_basic::before { background:#FEF8EA; }
.swb_f2_zone.z_adv::before   { background:#DBECFF; }
.swb_f2_zone_row { position:relative; z-index:1; display:flex; align-items:center; }
.swb_f2_zone_row.col { flex-direction:column; align-items:stretch; gap:5px; }
.swb_f2_zone_lb { position:absolute; left:0; right:0; top:calc(50% - 132px); text-align:center; line-height:1.35; z-index:1; }
.swb_f2_zone_lb b { display:block; font-size:22px; font-weight:800; letter-spacing:-0.03em; }
.swb_f2_zone_lb span { display:block; font-size:18px; font-weight:500; color:#333; letter-spacing:-0.03em; }
.z_basic .swb_f2_zone_lb b { color:#CB8810; }
.z_adv   .swb_f2_zone_lb b { color:#2773C9; }

/* 심화 모듈 pill 3개 */
.swb_f2_mod { min-width:184px; background:#fff; border:2px solid #2773C9; border-radius:40px; padding:5px 24px; text-align:center; font-size:16px; font-weight:500; color:#333; letter-spacing:-0.03em; white-space:nowrap; }

@media screen and (max-width:1024px) {
	.swb_flow2_wrap { overflow-x:visible; }
	.swb_flow2 { flex-direction:column; width:auto; padding:26px 16px; }
	.swb_f2_ar { transform:rotate(90deg); margin:15px 0; }
	.swb_f2.n_pre { width:150px; height:150px; }
	.swb_f2.n_pre b { font-size:22px; } .swb_f2.n_pre span { font-size:16px; }
	.swb_f2.n_ico { width:128px; height:128px; }
	.swb_f2.n_ico img { width:46px; } .swb_f2.n_ico em { font-size:20px; }
	.swb_f2.gc { width:124px; height:124px; font-size:16px; }
	.swb_f2_zone { flex-direction:column; align-items:center; width:100%; max-width:360px; padding:82px 18px 22px; }
	.swb_f2_zone::before { top:0; height:100%; }
	.swb_f2_zone_row, .swb_f2_zone_row.col { flex-direction:column; align-items:center; gap:0; }
	.swb_f2_zone_row .swb_f2_ar { margin:15px auto; }
	.swb_f2_zone_row.col { gap:12px; }
	.swb_f2_zone_lb { position:absolute; left:0; right:0; top:20px; }
	.swb_f2_mod { font-size:16px; padding:12px 24px; }
}

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

/* =========================================================
   sw-basic/02 : 선행학습 매트릭스(con_img06) + 추진 프로세스(con_img07)
   ========================================================= */
/* --- SW 교과목 선행학습 매트릭스 --- */
.swb_mx { margin-top:8px; }
.swb_mx_tit { background:#12386e; color:#fff; text-align:center; font-size:22px; font-weight:800; letter-spacing:-0.02em; border-radius:10px; padding:15px; }
.swb_mx_sub { margin-top:10px; background:#5a8fd6; color:#fff; text-align:center; font-size:20px; font-weight:700; letter-spacing:-0.02em; border-radius:8px; padding:12px; }
.swb_mx_grid { margin-top:12px; background:#fff; border:1px dashed #c3ccd8; border-radius:12px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.swb_mx_row { display:flex; align-items:stretch; gap:10px; }
.swb_mx_row.chip .swb_mx_cell { flex-direction:row; align-items:center; justify-content:center; gap:7px; }
.swb_mx_lb { flex:0 0 100px; display:flex; align-items:center; justify-content:center; text-align:center; background:#1f4e8f; color:#fff; font-size:16px; font-weight:500; border-radius:8px; padding:10px 6px; word-break:keep-all; letter-spacing:-0.02em; }
.swb_mx_cell { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; border:1px solid #cdd6e6; border-radius:10px; padding:14px 12px; font-size:16px; font-weight:500; color:#333; line-height:1.4; word-break:keep-all; letter-spacing:-0.02em; }
.swb_mx_cell .bdg { font-size:16px; font-weight:500; color:#fff; border-radius:14px; padding:3px 12px; }
.swb_mx_cell .bdg.req { background:#f08a24; } .swb_mx_cell .bdg.opt { background:#4aae5a; }
.swb_mx_cell .hl { display:block; width:100%; background:#2b5aa0; color:#fff; font-size:16px; font-weight:500; border-radius:6px; padding:8px; }
.swb_mx_cell b { font-size:18px; font-weight:700; color:#222; }

/* --- 입학 전 SW교육 프로그램 추진 프로세스 (피그마 201-8582) --- */
.swb_pc2_wrap { margin-top:16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.swb_pc2 { position:relative; width:max-content; min-width:100%; box-sizing:border-box; margin:0 auto; background:#fff; border-radius:14px; padding:32px 28px 44px; }
/* 흐름 폭에 딱 맞는 내부 래퍼 — 하단 피드백 루프가 흐름(입학생) 오른쪽 끝에 정렬되도록 */
.swb_pc2_inner { position:relative; width:max-content; margin:0 auto; }

.swb_pc2_main { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; }
.swb_pc2_ar { flex:0 0 auto; align-self:center; width:23px; height:16px; margin:0 4px; display:block; }
.swb_pc2 .dv { width:64%; height:2px; background:repeating-linear-gradient(to right,#b3b3b3 0 2px,transparent 2px 6px); opacity:.88; }

/* 학생 원(합격생/입학생) */
.swb_pc2_person { flex:0 0 auto; box-sizing:border-box; width:112px; height:112px; border-radius:50%; border:3px solid #2773C9; background:#E4EFFF; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:9px 0; }
.swb_pc2_person img { width:44px; height:auto; display:block; }
.swb_pc2_person em { font-style:normal; font-size:16px; font-weight:500; color:#083C72; letter-spacing:-0.03em; }

/* 회색 원(합격생·교육신청 / 평가·학점이수) */
.swb_pc2_grey { flex:0 0 auto; box-sizing:border-box; width:112px; height:112px; border-radius:50%; background:#F5F6FA; border:3px solid #DDDDDD; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; padding:8px; }
.swb_pc2_grey b { font-size:20px; font-weight:800; color:#333; letter-spacing:-0.03em; }
.swb_pc2_grey span { font-size:16px; font-weight:500; color:#333; letter-spacing:-0.03em; }

/* SW교육 프로그램 존(알약형) */
.swb_pc2_prog { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:12px; padding:18px 26px; background:#FEF8EA; border:3px solid #D6A04F; border-radius:120px; }
.swb_pc2_prog_tit { font-size:22px; font-weight:800; color:#333; letter-spacing:-0.03em; }
.swb_pc2_progrow { display:flex; align-items:center; gap:6px; }
.swb_pc2_c { flex:0 0 auto; box-sizing:border-box; width:106px; height:106px; border-radius:50%; background:#fff; border:3px solid #2773C9; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:6px; gap:4px; }
.swb_pc2_c b { font-size:20px; font-weight:800; color:#333; letter-spacing:-0.03em; }
.swb_pc2_c span { font-size:16px; font-weight:500; color:#333; line-height:1.28; word-break:keep-all; letter-spacing:-0.03em; }

/* 피드백 루프 (피그마 201-8582) — pill은 흐름 아래로 내려 배치, 연결선은 CSS로 그려 입학생/흐름에 정확히 붙임 */
.swb_pc2_loop { position:relative; margin-top:54px; }
.swb_pc2_pillrow { position:relative; z-index:1; display:flex; align-items:center; justify-content:flex-end; gap:3px; padding-right:138px; }
/* 연결선: bottom = pill 세로 중앙, height 로 위(입학생/흐름 화살표)까지 늘림. 화살촉은 SVG path 하나로(박스모델 오차 방지) */
.swb_pc2_curve { position:absolute; z-index:0; pointer-events:none; display:block; line-height:0; }
.swb_pc2_curve svg { display:block; width:100%; height:100%; }
.swb_pc2_curve.cl { left:262px; width:66px; bottom:28px; height:165px; }
.swb_pc2_curve.cr { right:52px; width:86px; bottom:28px; height:123px; }
.swb_pc2_lar { flex:0 0 auto; align-self:center; width:23px; height:16px; display:block; }
.swb_pc2_pill { flex:0 0 auto; width:139px; box-sizing:border-box; background:#083C72; color:#fff; text-align:center; font-size:16px; font-weight:600; letter-spacing:-0.05em; line-height:1.45; border-radius:100px; padding:6px 6px 4px; word-break:keep-all; }

@media screen and (max-width:1024px) {
	.swb_pc2_wrap { overflow-x:visible; }
	.swb_pc2 { width:auto; padding:24px 16px; }
	.swb_pc2_inner { width:100%; }
	.swb_pc2_main { flex-direction:column; align-items:center; }
	.swb_pc2_ar { transform:rotate(90deg); margin:15px 0; }
	.swb_pc2_progrow { flex-direction:column; gap:0; }
	.swb_pc2_progrow .swb_pc2_c + .swb_pc2_c { margin-top:12px; }
	.swb_pc2_loop { margin-top:26px; }
	.swb_pc2_pillrow { flex-direction:column-reverse; align-items:center; padding-right:0; }
	.swb_pc2_curve { display:none; }
	.swb_pc2_lar { align-self:center; transform:rotate(90deg); margin:14px auto; }
}
@media screen and (max-width:768px) {
	.swb_mx_row { flex-direction:column; }
	.swb_mx_lb { flex:none; }
}