/* ==========================
   COMMON
========================== */
:root {
   --font-color2: #222;
   --font-color3: #333;
   --font-p: font-family: 'Pretendard';
}
* {font-family: var(--font-pv); color: var(--font-color3); margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all; overflow-wrap: break-word; white-space: normal;}
.tab-content {display:none;}
.tab-content.active {display:block;}
.year-swiper {position:relative;}
.profile-tab-wrap {display:flex; flex-wrap: wrap; justify-content:center;}
.profile-tab {display:flex; flex-direction:column; align-items:center;}
.profile-content {display:none;}
.profile-content.active {display:block;}
.profile-question .answer {display:none; padding:20px 44px;}
.profile-question.active .answer {display:block;}
.profile-tab .accordion-arrow {display: none;}
.profile-tab .mobile-info {display: none;}
.mobile-profile-btn {display:flex; justify-content:space-between; align-items:center; width:100%; text-align:left;}
.mobile-profile-btn .left {display:flex; align-items:center;}
.mobile-profile-content {display:none;}
.mobile-profile-item.active .mobile-profile-content {display:block;}

/* =====================
   타이틀 SECTION
===================== */
.title-section {display: flex; justify-content: center; flex-direction: column; text-align: center; padding: 80px 0; background-color: #F1F8F9; background-image: url('https://img.megastudy.net/campus/library/v2015/library/teamplay/enter/2026_sugi/bg.png'); background-repeat: no-repeat; background-size: 370px 342px; background-position: center bottom; }
.title-section strong {color: #101010; font-size: 24px; font-style: normal; font-weight: 600; line-height: 140%; letter-spacing: -0.24px;}
.title-section h1 {font-size: 84px; font-style: normal; font-weight: 800; line-height: 100%; background: linear-gradient(180deg, #0F4359 -16.25%, #2B7E9F 40.42%, #0F4359 97.08%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 18px 0 30px;}
.title-section p {color: #222; font-size: 20px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.2px;}

/* =====================
   연도 탭
===================== */
.year-swiper {position:relative; display:flex; justify-content:center; background: linear-gradient(0deg, #F8F8F8 0%, #FFF 0%);}
.year-swiper .swiper-wrapper {position:relative; box-sizing: border-box; max-width:1200px; width:100%; padding:0 40px; display:flex; justify-content:center;}
.year-swiper .swiper-wrapper .swiper-slide {position:relative; display:flex !important; justify-content:center; width:calc(100% / 5); padding:14px 0; border-bottom:1px solid #DBDEE5;}
.year-swiper .swiper-wrapper .swiper-slide .tab-btn {position:relative; display:flex; justify-content:center; width:100%; color:#333; text-align:center; font-size:16px; font-style:normal; font-weight:500; line-height:150%; letter-spacing:-0.32px;}
.year-swiper .swiper-wrapper .swiper-slide .tab-btn.active {color:#555; font-weight:700;}
.year-swiper .swiper-wrapper .swiper-slide .tab-btn.active::after {content:""; position:absolute; left:0; bottom:-14px; width:100%; height:3px; background:#333;}

.year-swiper .year-prev,
.year-swiper .year-next {position:absolute; top:50%; transform:translateY(-50%); width:24px; height:24px; z-index:2; cursor:pointer; display:flex; align-items:center; justify-content:center;}

.year-swiper .year-prev {left:calc(50% - 600px);}
.year-swiper .year-next {right:calc(50% - 600px);}

/* =====================
   프로필 콘텐츠 SECTION
===================== */
.profile-tab-wrap {display: flex !important; flex-wrap: nowrap; gap: 20px; justify-content: center; background: linear-gradient(0deg, #F8F8F8 0%, #FFF 57%); padding: 30px;}
.profile-tab {display: flex; flex-direction: column; gap: 6px; width: 119px; height: 147px;}
.profile-tab span {color: #333; text-align: center; font-size: 16px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.16px;}
.profile-tab img {display: none; width: 119px; height: 119px; border-radius: 999px; background: #F8F8F8;}
.profile-tab img:first-of-type {display: block;}

.profile-tab.active img:first-of-type {display: none;}
.profile-tab.active img:last-of-type {display: block;}

.profile-content-wrap {text-align: center; padding: 60px 0;}
.profile-content-wrap .profile-content .profile-title h3 {color: #333; text-align: center; font-size: 32px; font-style: normal; font-weight: 700; line-height: 130%; letter-spacing: -0.64px;}
.profile-content-wrap .profile-content .profile-title p {color: #333; text-align: center; font-size: 18px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.18px; margin-top: 8px;}
.profile-content-wrap .profile-content .profile-title p span {font-weight: 700;}
.profile-content-wrap .profile-content .profile-title p:last-of-type {color: #222; text-align: center; font-size: 20px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.2px; margin-top: clamp(18px, calc(18px + (24 - 18) * ((100vw - 360px) / 840)), 24px);}
.profile-content-wrap .profile-content .profile-title .amazing-wrap {display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; margin: 30px 0; gap: 12px;}
.profile-content-wrap .profile-content .profile-title .amazing-wrap .top-txt {color: #FFF600; text-align: center; font-size: clamp(20px, calc(20px + (24 - 20) * ((100vw - 360px) / 840)), 24px); font-style: normal; font-weight: 600; line-height: 140%; letter-spacing: clamp(-0.2px, calc(-0.2px + (-0.24 - -0.2) * ((100vw - 360px) / 840)), -0.24px); border-radius: 999px; background: #0F4359; padding: 4px 24px;}
.profile-content-wrap .profile-content .profile-title .amazing-wrap .btm-txt {color: #0F4359; text-align: center; font-size: clamp(14px, calc(14px + (16 - 14) * ((100vw - 360px) / 840)), 16px); font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: clamp(-0.14px, calc(-0.14px + (-0.16 - -0.14) * ((100vw - 360px) / 840)), -0.16px);}
.profile-content-wrap .profile-content .profile-video {margin-top: 40px;}
.profile-content-wrap .profile-content .profile-video iframe {width: clamp(296px, calc(296px + (833 - 296) * ((100vw - 360px) / 840)), 833px); height: clamp(184px, calc(184px + (472 - 184) * ((100vw - 360px) / 840)), 472px);}

.profile-question-wrap {max-width: 1200px; text-align: left; margin: 40px auto 0;}
.profile-question-wrap .profile-question .question {width: 100%; padding: 16px 20px; text-align: left; color: #222; font-size: 18px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.18px; background-color: #f8f8f8; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;}
.profile-question-wrap .profile-question + .profile-question .question {border-top: none;}
.profile-question-wrap .profile-question .answer {color: #555; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.16px; border-bottom: 1px solid #E5E5E5;}

/* ====================================================
   RESPONSIVE (Media Queries)
==================================================== */

/* 태블릿 이하 (1199px 이하) */
@media (max-width: 1199px) {
   .year-swiper .swiper-wrapper {padding: 0 60px;}
   .year-swiper .year-prev {left:18px;}
   .year-swiper .year-next {right:18px;}

   .profile-tab-wrap {flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 30px 0;}
   .profile-tab-wrap::-webkit-scrollbar {display: none;}
   .profile-tab-wrap::before,
   .profile-tab-wrap::after {content: ""; flex-shrink: 0; width: 24px;}

   .profile-content-wrap .profile-content {padding: 0 24px;}
   .profile-content-wrap .profile-content .profile-video iframe {width: 100%; height: 100%; aspect-ratio: 16/9;}
}

/* 태블릿 이하 (905px 이하) 프로필탭 스와이프 대응 */
@media (max-width: 905px) {
   .tab-content.active[data-year="2022"] .profile-tab-wrap {justify-content: start;}
}

/* 모바일 이하 (767px 이하) */
@media (max-width: 767px) {

   .title-section {padding: 50px 0; background-image: url('https://img.megastudy.net/campus/library/v2015/library/teamplay/enter/2026_sugi/bg_mo.png'); background-size: 249px 195px; background-position: center 16.55px; }
   .title-section strong {color: #101010; font-size: 20px; font-style: normal; font-weight: 600; line-height: 140%; /* 28px */ letter-spacing: -0.2px;}
   .title-section h1 {font-size: 58px; margin: 14px 0 22px;}
   .title-section p { font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; /* 22.4px */ letter-spacing: -0.16px;}

   /* 연도 스와이퍼
   ---------------------------------------------------- */
   .year-swiper .swiper-wrapper {padding: 0;}
   .year-swiper .year-prev {display: none;}
   .year-swiper .year-next {display: none;}
   .year-swiper.swiper-initialized .swiper-wrapper {justify-content: flex-start;}
   .year-swiper.swiper-initialized .swiper-wrapper .swiper-slide {width: auto;}

   /* 아코디언
   ---------------------------------------------------- */
   .tab-content-wrap {padding: 30px 16px;}
   .tab-content.active {display: flex; flex-direction: column; gap: 12px;}
   .profile-tab-wrap {display: contents !important;}
   .profile-content-wrap {display: contents;}
   .profile-tab-wrap::before,
   .profile-tab-wrap::after {display: none;}

   .profile-tab[data-profile="0"] {order: 1;}
   .profile-content[data-profile="0"] {order: 2;}
   .profile-tab[data-profile="1"] {order: 3;}
   .profile-content[data-profile="1"] {order: 4;}
   .profile-tab[data-profile="2"] {order: 5;}
   .profile-content[data-profile="2"] {order: 6;}
   .profile-tab[data-profile="3"] {order: 7;}
   .profile-content[data-profile="3"] {order: 8;}
   .profile-tab[data-profile="4"] {order: 9;}
   .profile-content[data-profile="4"] {order: 10;}
   .profile-tab[data-profile="5"] {order: 11;}
   .profile-content[data-profile="5"] {order: 12;}

   /* 프로필 탭
   ---------------------------------------------------- */
   .profile-tab {flex-direction: row; align-items: center; width: 100%; height: auto; padding: 16px; gap: 16px; border: 1px solid #E5E5E5; border-radius: 8px; position: relative; background: #fff;}
   .profile-tab img {width: 56px; height: 56px; border-radius: 50%;}
   .profile-tab img:first-of-type {display: none;}
   .profile-tab img:last-of-type {display: block; border-radius: 587.647px; border: 3px solid #4A9BBC; background: #0F4359;}
   .profile-tab > span {display: none;}
   .profile-tab .mobile-info {display: flex; flex-direction: column; gap: 4px; flex: 1; text-align: left;}
   .profile-tab .mobile-info strong {color: #333; font-size: 17px; font-weight: 700; line-height: 140%; letter-spacing: -0.17px;}
   .profile-tab .mobile-info .sub {display: flex; align-items: center; gap: 6px;}
   .profile-tab .mobile-info .sub em {color: #777;font-size: 14px;font-style: normal;font-weight: 400;line-height: 140%; letter-spacing: -0.14px;}
   .profile-tab .mobile-info .sub i {color: #DBDBDB; font-size: 14px; font-weight: 400; font-style: normal; line-height: 140%;}
   .profile-tab .mobile-info .sub b {color: #333; font-size: 14px; font-weight: 700; line-height: 140%; letter-spacing: -0.14px;}
   .profile-tab .accordion-arrow {position: absolute; right: 20px; transition: transform 0.3s; display: block;}
   .profile-tab.active .accordion-arrow {transform: rotate(180deg);}


   /* 프로필 콘텐츠
   ---------------------------------------------------- */
   .profile-content-wrap .profile-content.active {text-align: center; padding: 0;}
   .profile-content-wrap .profile-content .profile-title h3 {font-size: 22px;}
   .profile-content-wrap .profile-content .profile-title p {color: #222; text-align: center; font-size: 16px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.16px;}
   .profile-content-wrap .profile-content .profile-title p:last-of-type {font-size: 16px;}
   .profile-content-wrap .profile-content .profile-video {margin-top: 30px; height: 100%; aspect-ratio: 16 / 9;}
   .profile-content-wrap .profile-content .profile-video iframe {width: 100%; height: auto; aspect-ratio: 16/9; }
   .profile-content-wrap .profile-content .profile-title .amazing-wrap {margin: 18px 0 24px;}

   /* Q&A
   ---------------------------------------------------- */
   .profile-question-wrap {margin-top: 24px;}
   .profile-question-wrap .profile-question .question {padding: 12px 16px; color: #222; font-size: 16px; font-style: normal; font-weight: 700; line-height: 140%; letter-spacing: -0.16px;}
   .profile-question-wrap .profile-question .answer {color: #555; padding: 16px !important; font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: -0.14px;}
}