@charset "utf-8";
@import url("../../common/css/classroom.css");

.classroom_main .blockWrap {display: flex; display: flex; gap:1.5rem; padding: 2.5rem 0 0;}
.classroom_main .blockLeft {display: flex; flex-grow:1; flex-direction: column; gap: var(--gap-md); padding-right:0; container-type: inline-size; container-name: classroom_main_blockLeft; }
.classroom_main .blockRight {max-width: 40rem; width:30%; display: flex; flex-direction: column; gap: var(--gap-md);}
.classroom_main .blockTop {display: grid; grid-template-columns: 2fr 1.5fr; gap:var(--gap-md); align-items: start; align-items: stretch;}
.classroom_main .left_column {display: flex; flex-direction: column; gap: var(--gap-md);}
.classroom_main .right_column .card {height: 100%;}
.classroom_main .blockBottom {display:flex; flex-direction: column; gap: var(--gap-md)}


/* 강의목록 */
.lecture_card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  padding: var(--padding-xl);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.lecture_card .card_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lecture_list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 주차 */
.week_item {
  overflow: hidden;
}

.week_header {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: var(--padding-lg) var(--padding-md);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border);
  /* background: var(--bg-search-info); */
  flex-direction: column;
  align-items: flex-start;
}
.week_item:last-child .week_header{
    border-bottom: none;
}
.week_header .danger {
  color: tomato;
}

.week_period {
  font-size: var(--fs-sm);
  color: var(--gray-600);
  margin-right: var(--gap-md);
}

.toggle_btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  position: absolute;
  right: 0.2rem;
  border: 1px solid var(--border);
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_btn_open:not(.popup .icon_btn_open):before {content:'\e313';}
.icon_btn_close:not(.popup .icon_btn_close):before {content:'\e316';}

/* 주차 안의 강의 */
.lecture_detail {
  background: var(--bg-search-info);
  padding: var(--padding-lg);
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
  border-bottom: 1px solid var(--border);
}

.lecture_item {
  display: grid;
  grid-template-columns: 90px auto 40px;
  align-items: center;
  gap: var(--gap-md);
}

.lecture_name {
  display: flex;
  align-items: center;
  /*gap: .5rem;*/
  white-space: nowrap;
}

.lecture_name:before, .course_name:before{
  content: "\e1c4";
  font-size: 2.4rem;
}
.lecture_list .progress {height: 8px;}

.course_list {}
.course_item {display: flex; align-items: center;}
.course_name {display: flex; align-items: center; flex-grow: 1; gap: var(--gap-sm); display: flex; padding: var(--padding-lg) 0; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm);}
.course_name:after {margin-left:auto;}

/* 반응형 */
@media (max-width: 992px) {
  .classroom_main .blockTop {
    grid-template-columns: 1fr; /* 세로 1열 */
  }
  .classroom_main .right_column .card {
    height: auto; /* 강제 높이 풀기 */
  }
}

@media (max-width: 576px) {
  .activity_item {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }
  .activity_status {
    width: 100%;
    justify-content: space-between;
  }
  .lecture_item {
    grid-template-columns: 1fr; /* 세로 배치 */
    gap: .4rem;
  }
  .lecture_item .percent {
    text-align: right;
  }
}
@media (max-width: 480px) {
  .message_item {
    flex-direction: column;
    align-items: flex-start;
  }
  .more_btn {
    align-self: flex-end;
  }
}

@container classroom_main_blockLeft (max-width: 850px){
	.classroom_main .blockTop {grid-template-columns: auto;}
	.tab_face > ul {flex-wrap: nowrap;}
}

/* 강의보기(수강) */
.classroom .blockWrap {display: flex; display: flex; gap:1.5rem; padding: 2.5rem 0 0;}
.classroom .blockLeft {width: calc(100% - 46rem); display: flex; flex-grow: 1; flex-direction: column; gap: var(--gap-md); padding-right:0; overflow: visible;}
.classroom .blockRight {max-width: 46rem; display: flex; flex-direction: column; gap: var(--gap-md);}
.classroom .badge {font-size: var(--fs-sm); padding: 0.4rem 0.8rem; background: var(--cdolor-white); border-radius: 5px; border:1px solid var(--border); margin-left:8px}
.classroom li.current a .badge{background: var(--color-white); color:var(--text-black);}

.lecture_view {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
    padding: var(--padding-xl);
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
}

.lecture_titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--bg-body);
    padding: var(--padding-lg);
    border-radius: var(--radius-md);
}
.lecture_titlebar .lecture_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}
.lecture_title_name {
    font-size: 1.6rem;
    font-weight: var(--fw-semibold);
}
.lecture_title_session {
    font-size: 1.3rem;
    font-weight: var(--fw-regular);
    color: var(--text-sub);
}
.lecture_view .btn{ background: var(--color-black); color:var(--text-invert);}
.lecture_view .btn_line, .lecture_view .btn_area .btn.btn_primary {padding:var(--padding-md) var(--padding-xl);}
.lecture_actions {
    display: flex;
    gap: 0.6rem;
    width: 13rem;
    justify-content: flex-end;
}
.lecture_video {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border);
}
.lecture_video > div{
    position: relative;
}
/*
.lecture_video > div:first-child:after {
    content: '';
    background: rgba(0,0,0,0.25);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}
*/
.lecture_video img {
    display: block;
    width: 100%;
    height: auto;
}

.video_thumb {
    display: block;
    position: absolute;
    width: 64px;
    cursor: pointer;
    border: none;
    background: rgba(255,255,255,0.2);
    height: 64px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    border-radius: 100px;
    justify-content: center;
    z-index: 10;
}

.video_play_icon {
    font-size: 2.8rem;
    color: var(--color-primary);
    background: #fff;
    border-radius: 100px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.caption {
    padding: 0.6rem 1rem;
    font-size: var(--fs-sm);
    position: relative;
}
.caption_title {
    padding: var(--padding-md);
}
.caption_detail {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.caption:not(.collapsed) .caption_detail {
    max-height: 200px; /* 필요시 적당히 조절 */
    opacity: 1;
}
.caption .toggle_btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    cursor: pointer;
}

.lecture_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    color: var(--gray-600);
}
@media (max-width: 1200px) {
  .classroom .blockWrap {
    flex-direction: column;
  }
  .classroom .blockLeft,
  .classroom .blockRight {
    width: 100%;
  }
  .classroom .blockRight {
    max-width:100%;
  }
}