/* 학과 지원체계 도식 — sub.css / common.css 토큰(--primary, .gradient_box, .box-line, .btn, .tb) 재사용 */

.ls-tree {min-height: 0; margin-bottom: 0;}

/* 상단 카드 */
.ls-tree .gradient_box {padding: 56px 56px 52px; box-shadow: 0 12px 32px rgba(0, 40, 114, .07);}
.ls-tree .gradient_box h4 {margin: 0 0 28px; font-size: 2rem; color: #000;}
.ls-tree .gradient_box .bt-wrap {margin-top: 0; justify-content: flex-start; gap: 0;}
.ls-tree .gradient_box .btn-lg {min-width: 0; padding: 1.1rem 2.6rem; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(0, 102, 179, .25);}

/* Learn 4단계 → 카드 4칸 */
.ls-tree .gradient_box > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 40px;}
.ls-tree .gradient_box > ul li {background: rgba(255, 255, 255, .8); border-radius: 18px; border-top: 3px solid var(--primary); padding: 20px 18px 22px; font-size: 1rem; line-height: 1.45; color: #333;}
.ls-tree .gradient_box > ul li b {display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 700;}

/* 연결선: 상단 카드 → 가로선 → 두 박스 */
.ls-tree > .sub {position: relative; padding-top: 44px; margin-top: 0;}
.ls-tree > .sub::before {content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 22px; background: #bbb;}
.ls-tree > .sub::after {content: ""; position: absolute; top: 22px; left: calc(25% - 4px); right: calc(25% - 4px); height: 1px; background: #bbb;}
.ls-tree > .sub dl, .ls-tree > .sub dl dd {width: 100%; margin: 0;}
.ls-tree .box-line li::before {content: ""; position: absolute; top: -22px; left: 50%; width: 1px; height: 22px; background: #bbb;}

/* 하단 두 박스 */
.ls-tree .sub dl dd > .box-line li {flex: 1 1 0; min-width: 0; border: 1px solid #DBEDFA; border-radius: 24px; background: #fff; box-shadow: 0 8px 24px rgba(0, 40, 114, .06); padding: 40px 36px;}
.ls-tree .sub dl dd > .box-line li p {font-size: 1.5rem; color: #003767;}
.ls-tree .sub dl dd > .box-line li small {margin-top: 12px; font-size: 1rem; color: #555; line-height: 1.7; word-break: keep-all;}

/* 주요 사이트 표 (.tb 재사용) */
.ls-sites-tit {display: flex; align-items: center; gap: 10px; margin: 48px 0 14px; font-size: 1.4rem; font-weight: 700; color: #003767;}
.ls-sites-tit:before {content: ""; width: 4px; height: 20px; background: var(--primary); border-radius: 2px;}
.ls-sites {border-top: 2px solid var(--primary); border-bottom: 1px solid #DBEDFA;}
.ls-sites tr>* {padding: 0; border-top: 1px solid #e5e5e5; border-right: 1px solid #e5e5e5;}
.ls-sites tr>*:last-child {border-right: 0;}
.ls-sites td a {display: block; padding: 18px 20px; font-size: 1rem; color: #333; line-height: 1.4; word-break: keep-all;}
.ls-sites td a:hover {background: #DBEDFA; color: var(--primary); font-weight: 600;}

@media (max-width: 991.98px) {
    .ls-tree .gradient_box > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 767.98px) {
    .ls-tree .gradient_box {padding: 36px 22px;}
    .ls-tree .gradient_box h4 {font-size: 1.6rem; margin-bottom: 20px;}
    .ls-tree .gradient_box > ul {grid-template-columns: 1fr; margin-top: 28px;}
    .ls-tree > .sub {padding-top: 20px;}
    .ls-tree > .sub::before, .ls-tree > .sub::after, .ls-tree .box-line li::before {display: none;}
    .ls-tree .box-line {flex-direction: column; gap: 16px;}
    .ls-tree .sub dl dd > .box-line li {flex: none; padding: 28px 22px;}
    .ls-sites-tit {font-size: 1.2rem; margin-top: 36px;}
    .ls-sites td a {padding: 14px 12px; font-size: .9rem;}
}