@charset "euc-kr";

/* ===== base ===== */
.page-annual-roadmap {font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;color:#333}
.sec-inner {width:100%;max-width:1064px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.sec01-inner {width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box;display:flex;flex-direction:column;gap:30px}

.icon-arr {display:inline-block;width:16px;height:12px;flex-shrink:0;vertical-align:middle;background:url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.47196 9.38085L14.241 0.320713C14.448 0.106904 14.6894 0 14.9653 0C15.2412 0 15.4827 0.106904 15.6896 0.320713C15.8965 0.534521 16 0.788597 16 1.08294C16 1.37728 15.8965 1.631 15.6896 1.8441L6.19624 11.6793C5.9893 11.8931 5.74788 12 5.47196 12C5.19604 12 4.95461 11.8931 4.74767 11.6793L0.29847 7.08241C0.091531 6.8686 -0.00780003 6.61488 0.000477552 6.32125C0.00875513 6.02762 0.116708 5.77354 0.324337 5.55902C0.531967 5.3445 0.77788 5.23759 1.06208 5.23831C1.34627 5.23902 1.59184 5.34592 1.79878 5.55902L5.47196 9.38085Z' fill='%23555555'/%3E%3C/svg%3E") center / contain no-repeat}

.em-primary {color:#009eb9;font-style:normal}
.em-grad {font-style:normal;background:linear-gradient(139.34deg, #00d4e3 23.616%, #00a1be 103.06%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sec-hdg {font-size:clamp(24px, calc(24px + 8 * ((100vw - 360px) / 408)), 32px);font-weight:700;color:#333;letter-spacing:-0.64px;line-height:1.3;text-align:center}

.sec-top {background:linear-gradient(to bottom, #b1edef 0%, #ffffff 77.757%);padding:clamp(50px, calc(50px + 30 * ((100vw - 360px) / 408)), 80px) 0;display:flex;justify-content:center;align-items:center}
.top-inner {display:flex;flex-direction:column;align-items:center;gap:clamp(24px, calc(24px + 8 * ((100vw - 360px) / 408)), 32px)}
.speech-bubble {background:#fff;border-radius:999px;padding:9px 30px;font-size:20px;color:#333;letter-spacing:-0.2px;line-height:1.4;white-space:nowrap}
.speech-bubble .reg {font-weight:400}
.speech-bubble strong {font-weight:700}
.hero-tit {display:flex;flex-direction:column;align-items:center;gap:clamp(8px, calc(8px + 4 * ((100vw - 360px) / 408)), 12px);text-align:center}
.tit-line1 {font-size:clamp(56px, calc(56px + 28 * ((100vw - 360px) / 408)), 84px);font-weight:800;color:#333;letter-spacing:clamp(-1.68px, calc(-1.68px + 0.56 * ((100vw - 360px) / 408)), -1.12px);line-height:1.1;white-space:nowrap}
.tit-line1 .slash {font-weight:300}
.tit-line2 {font-size:clamp(56px, calc(56px + 28 * ((100vw - 360px) / 408)), 84px);font-weight:800;letter-spacing:clamp(-1.68px, calc(-1.68px + 0.56 * ((100vw - 360px) / 408)), -1.12px);line-height:1.1;white-space:nowrap;background:linear-gradient(100.88deg, #00d4e3 23.616%, #00a1be 103.06%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ===== #01: intro ===== */
.sec01 {background:#fff;padding:0 clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px) 0}
.sec01-tit {font-size:clamp(24px, calc(24px + 8 * ((100vw - 360px) / 408)), 32px);font-weight:400;color:#333;letter-spacing:-0.64px;line-height:1.3;text-align:center}
.sec01-tit strong {font-weight:700}
.sec01-list {display:flex;gap:16px;list-style:none;margin:0;padding:0}
.sec01-item {display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #e5e5e5;border-radius:10px;padding:30px 16px;text-align:center}
.item-icon {display:flex;align-items:center;justify-content:center;width:70px;height:50px;flex-shrink:0}
.item-icon img {max-width:100%;max-height:100%;object-fit:contain}
.item-txt {display:flex;flex-direction:column;gap:4px;align-items:center}
.item-txt .sub {font-size:16px;font-weight:400;color:#555;letter-spacing:-0.16px;line-height:1.4}
.item-txt .main {font-size:22px;font-weight:600;color:#333;letter-spacing:-0.22px;line-height:1.4}

/* ===== #02: annual admission roadmap table ===== */
.sec02 {background:#fff;padding:clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px) 0}
.sec02 .sec-inner {display:flex;flex-direction:column;gap:30px}
.tbl-wrap {border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;overflow:hidden}
.tbl-roadmap {width:100%;border-collapse:collapse}
.tbl-roadmap thead tr {background:#f5f5f5;height:50px}
.tbl-roadmap th {font-size:16px;font-weight:700;color:#333;letter-spacing:-0.16px;line-height:1.4;text-align:center;border-bottom:1px solid #e5e5e5;padding:0 20px}
.tbl-roadmap th:first-child {border-right:1px solid #e5e5e5}
.tbl-roadmap .col-period {width:300px}
.tbl-roadmap tbody tr:last-child td {border-bottom:none}
.tbl-roadmap td {border-bottom:1px solid #e5e5e5;vertical-align:middle}
.tbl-roadmap td.period {text-align:center;font-size:16px;font-weight:400;color:#333;letter-spacing:-0.16px;line-height:1.4;border-right:1px solid #e5e5e5}
.tbl-roadmap td.content {padding:20px 50px}
.tbl-row {display:flex;flex-direction:row;gap:70px;list-style:none;margin:0;padding:0;align-items:center}
.tbl-col {display:flex;flex-direction:column;gap:10px;list-style:none;margin:0;padding:0}
.tbl-mixed {display:flex;flex-direction:column;gap:10px}
.tbl-row li, .tbl-col li {display:flex;align-items:center;gap:8px;font-size:16px;font-weight:400;color:#333;letter-spacing:-0.16px;line-height:1.4}

/* ===== #03 / #05: photo cards (MO -> swiper carousel, see script.js) ===== */
.sec03 {background:#fff;padding:0 clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px) clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px)}
.sec05 {background:#fff;padding:clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px) 0}
.photo-list {list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.photo-item {display:flex;flex-direction:row;align-items:center;gap:32px;border:1px solid #e5e5e5;border-radius:20px;padding:24px}
.photo-img {width:350px;height:200px;border-radius:10px;overflow:hidden;flex-shrink:0}
.photo-img img {width:100%;height:100%;object-fit:cover;display:block}
.photo-txt {display:flex;flex:1;flex-direction:column;gap:12px}
.photo-tit {display:flex;flex-direction:column;gap:4px}
.photo-tit .sub {font-size:20px;font-weight:400;color:#333;letter-spacing:-0.2px;line-height:1.4}
.photo-tit .main {font-size:28px;font-weight:600;color:#333;letter-spacing:-0.28px;line-height:1.4}
.photo-desc {font-size:14px;font-weight:400;color:#555;letter-spacing:-0.14px;line-height:1.5}
.sec05 .photo-desc {font-size:16px;letter-spacing:-0.16px;line-height:1.4}
.photo-swiper .swiper-wrapper {flex-direction:column}
.photo-swiper .swiper-pagination {display:none}

/* ===== #04: annual study roadmap cards ===== */
.sec04 {background:#f8f8f8;padding:clamp(40px, calc(40px + 20 * ((100vw - 360px) / 408)), 60px) 0}
.sec04 .sec-inner {display:flex;flex-direction:column;gap:30px}
.card-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;list-style:none;margin:0;padding:0}
.card-item {background:#fff;border-radius:20px;padding:40px 30px;display:flex;flex-direction:column;align-items:center;gap:30px}
.card-img {display:flex;align-items:center;justify-content:center;width:100%;overflow:hidden}
.card-img.card-img-lg {height:140px}
.card-img.card-img-md {height:120px}
.card-img img {max-width:100%;max-height:100%;object-fit:contain}
.card-txt {display:flex;flex-direction:column;gap:12px;width:100%}
.card-title {display:block;font-size:22px;font-weight:600;color:#333;letter-spacing:-0.22px;line-height:1.4;text-align:center}
.card-sub {list-style:disc;padding-left:20px;margin:0;display:flex;flex-direction:column;gap:8px;font-size:16px;font-weight:400;color:#555;letter-spacing:-0.16px;line-height:1.4}
.card-sub li::before {content:"";display:inline-block;width:3px;height:3px;margin-bottom: 4px;margin-right:8px;background:#555;border-radius:50%;line-height:1;vertical-align:middle}
.card-sub li {padding-left:10px;text-indent:-11px;font-style: normal;font-weight: 400;line-height: 140%;letter-spacing: -0.16px;}

/* ===== #06: closing ===== */
.sec06 {background:#e8fafc;padding:clamp(20px, calc(20px + 20 * ((100vw - 360px) / 408)), 40px) 0}
.sec06-inner {display:flex;justify-content:center;align-items:center}
.sec06-txt {font-size:28px;font-weight:400;color:#333;letter-spacing:-0.28px;line-height:1.5;text-align:center}
.sec06-txt strong {font-weight:700}

@media (max-width: 1199px) {
	.sec01 {padding:0 24px}
	.sec02 {padding:60px 24px}
	.sec03 {padding:0 24px 60px}
	.sec04 {padding:60px 24px}
	.sec05 {padding:60px 24px}
	.sec-inner {padding:0}
	.sec01-inner {padding:0}
	.photo-desc {word-break:break-word}
	.tbl-roadmap .col-period {width:170px}
    .tbl-roadmap td.content {padding:20px 45px}
	.card-grid {grid-template-columns:repeat(2, 1fr)}
}

@media (max-width: 767px) {
	.speech-bubble {font-size:clamp(17px, calc(17px + 3 * ((100vw - 360px) / 408)), 20px);letter-spacing:-0.17px;line-height:1.4}
	.sec01 {padding:0 16px}
	.sec02 {padding:40px 16px}
	.sec03 {padding:0 16px 40px}
	.sec04 {padding:40px 16px}
	.sec05 {padding:40px 16px}
	/* #01: stacked rows (icon left, text right) */
	.sec01-list {flex-direction:column}
	.sec01-item {flex-direction:row;justify-content:flex-start;padding:20px 40px;text-align:left;gap:26px}
	.item-txt {align-items:flex-start;gap:2px}
	.item-txt .sub {font-size:clamp(14px, calc(14px + 2 * ((100vw - 360px) / 408)), 16px);letter-spacing:-0.14px;line-height:1.4}
	.item-txt .main {font-size:clamp(18px, calc(18px + 4 * ((100vw - 360px) / 408)), 22px);letter-spacing:-0.18px;line-height:1.4}
	/* #02 table: left col 100, header 40, cell pad 12/24, items stack vertically */
	.sec02 .sec-inner {gap:20px}
	.tbl-col li {align-items:normal;font-size:clamp(14px, calc(14px + 2 * ((100vw - 360px) / 408)), 16px);letter-spacing:-0.14px;line-height:1.4}
	.tbl-col {gap:6px}
	.tbl-row li {align-items:normal;font-size:clamp(14px, calc(14px + 2 * ((100vw - 360px) / 408)), 16px);letter-spacing:-0.14px;line-height:1.4}
	.tbl-mixed {gap:6px}
	.icon-arr {width:14px;height:10px;background-size:contain;margin-top:5px}
	.tbl-roadmap thead tr {height:40px}
	.tbl-roadmap .col-period {width:100px}
	.tbl-roadmap td.content {padding:12px 24px}
	.tbl-row {flex-direction:column;align-items:flex-start;gap:6px}
	/* #03/#05: card layout img-top text-below + Swiper carousel ON */
	.photo-tit .sub {font-size:clamp(16px, calc(16px + 4 * ((100vw - 360px) / 408)), 20px);letter-spacing:-0.16px;line-height:1.4;text-align:center}
	.photo-tit .main {font-size:clamp(22px, calc(22px + 6 * ((100vw - 360px) / 408)), 28px);letter-spacing:-0.22px;line-height:1.4;text-align:center}
	.photo-tit {gap:0}
	.photo-desc {font-size:clamp(13px, calc(13px + 1 * ((100vw - 360px) / 408)), 14px);letter-spacing:-0.13px;line-height:1.4}
	.photo-item {flex-direction:column;align-items:stretch;gap:16px}
	.photo-img {width:100%;height:auto;aspect-ratio:280/160}
	.card-sub {font-size:clamp(14px, calc(14px + 2 * ((100vw - 360px) / 408)), 16px);letter-spacing:-0.14px;line-height:1.4}
	.photo-swiper {overflow:hidden}
	.photo-swiper .swiper-wrapper {flex-direction:row;gap:0}
	.photo-swiper .swiper-pagination {display:block;position:static;margin-top:16px}
	.photo-swiper .swiper-pagination-bullet {width:8px;height:8px;background:#d9d9d9;opacity:1}
	.photo-swiper .swiper-pagination-bullet-active {width:20px;border-radius:4px;background:#009eb9}
	/* #04: single column cards (img height 100) */
	.card-grid {grid-template-columns:1fr}
	.card-item {border-radius:10px;padding:30px 24px;gap:16px}
	.card-img.card-img-lg, .card-img.card-img-md {height:100px}
	.card-txt {gap:8px}
	.sec06-txt {font-size:clamp(20px, calc(20px + 8 * ((100vw - 360px) / 408)), 28px);letter-spacing:-0.2px;line-height:1.4}
}