@charset "utf-8";
.main-container:has(.teacher-section) {padding-block: 80px;}
.main-container {background-image: url(../img/lees-bg.webp); background-repeat: no-repeat; background-position: center 100px; background-size: contain;}

.teacher-title-section {margin-bottom: 80px;}
.teacher-title-section .label,
.teacher-view-hero-section .label {padding: 6px 14px; background-color: #F0F3F9; font-size: 14px; font-weight: 600; color: #0B1F45;}
.teacher-title-section h2,
.teacher-title-section strong {font-family: 'YeogiOttaeJalnanGothic'; margin-top: 20px; font-size: clamp(28px, 4vw, 48px); color: #111111;}
.teacher-title-section strong {color: #FD9F4B;}
.teacher-title-section p {margin-top: 8px; font-size: 18px; font-weight: 500; color: #555555;}
.teacher-tag-list {display: flex; flex-wrap: wrap; gap: 10px;}
.teacher-tag-list span {display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px; border: 1px solid #FED7AA; border-radius: 999px; background-color: #FFF7ED; font-size: 15px; font-weight: 500; color: #EA580C;}

/* 강사진 리스트 */
.teacher-section {padding-bottom: 120px;}
.teacher-section .teacher-count {margin-bottom: 20px; font-size: 16px; font-weight: 400; color: #888888;}
.teacher-section .teacher-count strong {font-weight: 600; color: #111111;}
.teacher-section .teacher-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(40px, 4.17vw, 80px) 24px;}
.teacher-section .teacher-card {transition: box-shadow 0.3s, transform 0.3s; overflow: hidden; border: 1px solid #EEEEEE; border-radius: 20px; background-color: #fff;}
.teacher-section .teacher-card a {display: block; width: 100%;}
.teacher-section .teacher-thumb {width: 100%; height: auto; aspect-ratio: 490/350; overflow: hidden; background-color: #E7E4EB;}
.teacher-section .teacher-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.teacher-section .teacher-info {padding: 20px 22px;}
.teacher-section .teacher-name-wrap {display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;}
.teacher-section .teacher-name-wrap strong {display: block; font-size: clamp(20px, 2vw, 24px); font-weight: 600; color: #111111;}
.teacher-section .teacher-name-wrap p {word-break: keep-all; margin-top: 6px; font-size: 16px; color: #7C7C7C;}
.teacher-section .label {padding: 4px 12px;}
.teacher-section .label span {font-size: 14px; font-weight: 600;}
.teacher-section .label.magic {background: linear-gradient(180deg, #FEF3C7 0%, #FCE7F3 100%);}
.teacher-section .label.magic span {background: linear-gradient(90deg, #4784D4 0%, #1462C8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.teacher-section .label.korean {background-color: #1462C8; color: #fff;}
.teacher-section .teacher-detail-list {display: flex; flex-direction: column; gap: 10px; margin-block: 20px;}
.teacher-section .teacher-detail-list div {display: flex; gap: 10px;}
.teacher-section .teacher-detail-list dt {flex-shrink: 0; font-size: 15px; font-weight: 600; color: #888888;}
.teacher-section .teacher-detail-list dd {font-size: 15px; font-weight: 400; color: #7C7C7C;}
.teacher-section .teacher-counsel-box {display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: clamp(40px, 5.21vw, 100px); padding: 48px; border: 1px solid #EBEBEB; border-radius: 18px; background-color: #fff; box-shadow: 0 2px 12px 2px #5858580D;}
.teacher-section .teacher-counsel-box strong {word-break: keep-all; display: block; font-size: 24px; font-weight: 600; color: #000000;}
.teacher-section .teacher-counsel-box p {margin-top: 8px; font-size: 16px; color: #000000A6;}

/* 강사진 상세 */
.teacher-view-hero-section .teacher-breadcrumb {background-color: #FCFCFC; padding-block: 14px;}
.teacher-view-hero-section .teacher-breadcrumb .inner {display: flex; align-items: center; justify-content: space-between;}
.teacher-view-hero-section .teacher-view-profile {padding-block: 60px; max-width: 1168px; display: flex; align-items: flex-start; justify-content: space-between;}
.teacher-view-hero-section .teacher-view-thumb {width: 36%; max-width: 420px; overflow: hidden; border-radius: 20px; background-color: #DFDCE6; aspect-ratio: 420/560;}
.teacher-view-hero-section .teacher-view-thumb img {width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.teacher-view-hero-section .teacher-view-info {width: calc(64% - 50px); max-width: 668px; display: flex; flex-direction: column; row-gap: 30px;}
.teacher-view-hero-section .teacher-view-info h2 {font-size: 42px; font-weight: 700; color: #111827;}
.teacher-view-hero-section .teacher-view-info p {margin-top: 10px; font-size: 16px; color: #7C7C7C;}
.teacher-view-hero-section .teacher-view-detail-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px;}
.teacher-view-hero-section .teacher-view-detail-list div {padding: 16px 18px; border: 1px solid #E5E7EB; border-radius: 12px; background-color: #FAFAFA;}
.teacher-view-hero-section .teacher-view-detail-list dt {margin-bottom: 6px; font-size: 15px; font-weight: 600; color: #6B7280;}
.teacher-view-hero-section .teacher-view-detail-list dd {word-break: keep-all; font-size: 16px; font-weight: 500; color: #111827;}
.teacher-view-hero-section .btn-wrap {column-gap: 10px;}
.teacher-view-hero-section .btn-wrap .counsel-btn {background-color: #F97316; color: #fff;}

.teacher-view-video-section {padding-block: 80px; background-color: #FAFAFA;}
.teacher-view-video-section .inner {max-width: 600px;}
.teacher-view-video-section .teacher-view-section-title {text-align: center;}
.teacher-view-video-section .teacher-view-section-title span {display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: #F97316;}
.teacher-view-video-section .teacher-view-section-title h3 {word-break: keep-all; font-size: 28px; font-weight: 700; color: #111827;}
.teacher-view-video-section .teacher-view-section-title p {word-break: keep-all; font-size: 16px; color: #6B7280;}
.teacher-view-video-section .teacher-view-section-title .teacher-info > p {margin-top: 6px; font-size: 16px; color: #6B7280;}
.teacher-view-video-section .teacher-video-box {position: relative; overflow: hidden; width: 100%; aspect-ratio: 600/338; margin-block: 40px; border-radius: 20px;}
.teacher-view-video-section .teacher-video-box::after {width: 100%; height: 100%; content: ''; background-color: #000000A6; position: absolute; top: 0; left: 0; z-index: 2;}
.teacher-view-video-section .teacher-video-box.playing::after {display: none;}
.teacher-view-video-section .teacher-video {position: relative; width: 100%; height: 100%; display: block; object-fit: cover;}
.teacher-view-video-section .teacher-video-play {transition: opacity 0.3s, box-shadow 0.3s; position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #F97316; box-shadow: 0 8px 24px #F9731666;}
.teacher-view-video-section .teacher-video-box.playing .teacher-video-play {opacity: 0; pointer-events: none;}
.teacher-view-video-section .teacher-video-text {}
.teacher-view-video-section .teacher-video-text strong {display: block; font-size: 18px; font-weight: 700; color: #111827;}
.teacher-view-video-section .teacher-video-text p {margin-top: 6px; font-size: 15px; color: #6B7280;}

.teacher-view-bottom-section {padding: 70px 0 90px;}
.teacher-view-bottom-section .inner {display: flex; justify-content: center;}
.teacher-view-bottom-section .teacher-list-btn {height: 62px; padding-inline: 32px; column-gap: 10px; font-size: 16px; font-weight: 600; color: #10161F;}

@media (hover: hover) {
    .teacher-view-video-section .teacher-video-play:hover {box-shadow: 0 2px 2px #ADADAD4D;}
    .teacher-section .teacher-card:hover {box-shadow: 0 1px 10px 2px #ADADAD4D; transform: translateY(-10px);}
}

@media screen and (max-width: 1280px) {
    .teacher-section .teacher-list {grid-template-columns: repeat(2, 1fr);}
    .teacher-section .teacher-counsel-box {padding: 36px;}
}

@media screen and (max-width: 1024px) {
    .teacher-section .teacher-name-wrap {flex-direction: column-reverse; row-gap: 10px;}

    .teacher-view-hero-section .teacher-view-thumb,
    .teacher-view-hero-section .teacher-view-info {width: calc(50% - 20px);}
    .teacher-view-hero-section .teacher-view-info h2 {font-size: 36px;}
    .teacher-view-hero-section .teacher-view-detail-list {grid-template-columns: 1fr;}
    .teacher-section .teacher-counsel-box {padding: 28px;}
}

@media screen and (max-width: 768px) {
    .teacher-title-section p {font-size: 16px;}

    .teacher-view-hero-section .teacher-view-profile {flex-direction: column; gap: 30px; align-items: center;}
    .teacher-view-hero-section .teacher-view-thumb,
    .teacher-view-hero-section .teacher-view-info {width: 100%;}
    .teacher-view-hero-section .teacher-view-info {max-width: unset; align-items: center;}
    .teacher-view-hero-section .teacher-view-info .teacher-info {text-align: center;}
    .teacher-view-hero-section .teacher-view-info h2 {font-size: 30px;}
    .teacher-view-hero-section .teacher-view-info .teacher-info > p {text-align: center;}
    .teacher-view-hero-section .teacher-view-detail-list {grid-template-columns: repeat(2, 1fr); gap: 10px;}
    /* .teacher-tag-list {justify-content: center;} */
    .teacher-section .teacher-counsel-box {flex-direction: column; align-items: flex-start;}
    .teacher-section .teacher-counsel-box strong {font-size: 20px;}
}

@media screen and (max-width: 600px) {
    .teacher-section .teacher-list {grid-template-columns: repeat(1, 1fr);}
}

@media screen and (max-width: 480px) {
    .teacher-view-hero-section .teacher-view-detail-list {width: 100%; grid-template-columns: 1fr;}
    .teacher-view-hero-section .btn-wrap {flex-direction: column; row-gap: 5px;}
    .teacher-section .teacher-counsel-box {padding: 20px;}
}

@media screen and (max-width: 375px) {
    .teacher-view-hero-section .teacher-breadcrumb .label {display: none;}
    .teacher-section .teacher-info .info-mid li {align-items: flex-start; flex-direction: column; row-gap: 5px;}
}