/* ======================================================================
 *  코마크레 정적 사이트 전용 스타일
 *  - 쿠폰 입장(강의실 게이트), 강의실, 유튜브 재생 모달
 *  - 기존 디자인 토큰: 메인 #b14739 / 포인트 #f9c446 / 텍스트 #0b0405
 * ====================================================================== */

/* ---------- 메인 GIF → mp4 자동재생 (이미지와 동일하게 표시) ---------- */
video.mainVisual {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ---------- 헤더: 메뉴 가운데 정렬 ----------
   원본은 로고|메뉴|프로필아이콘 3요소 양끝 배치였는데, 로그인(프로필) 메뉴가
   빠지면서 메뉴가 오른쪽 끝에 붙어 보이던 것을 중앙 배치로 조정 */
header .header_wrap {
    position: relative;
    justify-content: center;
}

header .logo {
    position: absolute;
    left: 0.83em;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- 쿠폰 입장 게이트 (기존 로그인 화면 디자인 재사용) ---------- */
.couponGate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 120px 20px 60px;
}

.couponGate .couponBox {
    margin: 0 auto;
    width: 430px;
    max-width: 100%;
    background-color: #fff;
    text-align: center;
}

.couponGate .couponBox h1 {
    display: block;
    margin-bottom: 1.5em;
    font-size: 1em;
}

.couponGate .couponBox h1 img {
    margin: 0 auto;
    width: 100%;
    max-width: 11em;
}

.couponGate .couponBox .gate_title {
    display: block;
    font-size: 0.92em;
    font-weight: 600;
}

.couponGate .couponBox .gate_desc {
    display: block;
    margin: 0.75em 0 1.5em;
    color: #646464;
    font-size: 0.58em;
    line-height: 1.7;
}

.couponGate .couponBox .input_area input {
    display: block;
    margin-bottom: 0.5em;
    padding: 0.5em;
    width: 100%;
    font-size: 0.75em;
    text-align: center;
    letter-spacing: 0.08em;
    border: none;
    border-bottom: 2px solid #dcdcdc;
    transition: border-color 0.2s;
}

.couponGate .couponBox .input_area input:focus {
    border-bottom-color: #b14739;
}

.couponGate .couponBox a.btn.enter {
    display: block;
    width: 100%;
    color: #fff;
    margin-top: 1em;
    padding: 0.55em 0.5em 0.35em;
    font-size: 0.75em;
    text-align: center;
    background-color: #b14739;
    box-shadow: 0 5px 0 #904338;
    border-radius: 10px;
    cursor: pointer;
}

.couponGate .couponBox a.btn.enter:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #904338;
}

.couponGate .couponBox .gate_hint {
    display: block;
    margin-top: 1.25em;
    color: #969696;
    font-size: 0.5em;
    line-height: 1.7;
}

.couponGate .couponBox .gate_error {
    display: none;
    margin-top: 1em;
    color: #b14739;
    font-size: 0.58em;
    font-weight: 600;
}

/* 회원가입 폐지 안내 (구 쿠폰용지 "가입 후 등록" 문구와의 혼동 방지) */
.couponGate .couponBox .gate_notice {
    display: block;
    margin-top: 0.9em;
    padding: 10px 12px;
    background: #eef6ff;
    border-radius: 10px;
    color: #35618f;
    font-size: 0.5em;
    line-height: 1.6;
}

.couponGate .couponBox .gate_notice strong {
    color: #1f6fc0;
    font-weight: 800;
}

/* ---------- 기존 가입자 쿠폰번호 조회 (한시 운영) ---------- */
/* 한 달간 잘 보여야 하는 안내라 배너형으로 크게 표시 */
.couponGate .couponBox .lookup_link {
    display: block;
    margin-top: 1.2em;
    padding: 17px 12px;
    background: #fff6df;
    border: 2px solid #f5b63c;
    border-radius: 12px;
    color: #6b5518;
    font-size: 0.62em;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    cursor: pointer;
}

.couponGate .couponBox .lookup_link:hover {
    background: #ffefc4;
}

.couponGate .couponBox .lookup_link strong {
    display: block;
    margin-top: 4px;
    color: #b06a00;
    font-size: 1.28em;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* 돌아가기 링크(조회 화면 안)는 작게 유지 */
.couponGate .couponBox .lookup_area .lookup_link {
    margin-top: 1em;
    padding: 0;
    background: none;
    border: 0;
    color: #7a7a7a;
    font-size: 0.5em;
    font-weight: 400;
}

.couponGate .couponBox .lookup_area .lookup_link:hover {
    background: none;
    text-decoration: underline;
}

.couponGate .couponBox .lookup_result {
    margin-top: 0.9em;
    text-align: left;
}

.couponGate .couponBox .lookup_loading {
    display: block;
    text-align: center;
    color: #777;
    font-size: 0.55em;
}

.couponGate .couponBox .lookup_row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f6f9fd;
    border: 1px solid #dfe8f4;
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}

.couponGate .couponBox .lookup_row .kit {
    flex: 1;
    min-width: 0;
    color: #555;
    font-size: 0.5em;
    line-height: 1.4;
}

.couponGate .couponBox .lookup_row .code {
    color: #111;
    font-size: 0.58em;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.couponGate .couponBox .lookup_row .use {
    background: #2584d8;
    color: #fff;
    border-radius: 8px;
    padding: 8px 13px;
    font-size: 0.5em;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.couponGate .couponBox .lookup_result .use_all {
    display: block;
    margin-top: 4px;
    background: #1f6fc0;
    color: #fff;
    border-radius: 10px;
    padding: 12px 0;
    font-size: 0.55em;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.couponGate .couponBox .lookup_note {
    margin-top: 0.4em;
    color: #999;
    font-size: 0.45em;
    text-align: center;
}

/* ---------- 강의실 ---------- */
.classroom_area {
    margin: 0 auto 60px;
    width: 100%;
    max-width: 1130px;
}

.classroom_area .course_box {
    margin: 0 10px 70px;
}

.classroom_area .course_head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.75em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #0b0405;
}

.classroom_area .course_head .course_title {
    display: block;
    font-size: 1em;
    font-weight: 600;
}

.classroom_area .course_head .course_title small {
    display: block;
    margin-top: 0.25em;
    color: #646464;
    font-size: 0.55em;
    font-weight: 400;
}

.classroom_area .course_head .course_materials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 0.35em;
}

.classroom_area .course_head .course_materials a {
    display: inline-block;
    padding: 0.3em 1em;
    color: #b14739;
    font-size: 0.58em;
    border: 1px solid #b14739;
    border-radius: 5em;
}

.classroom_area .course_head .course_materials a:hover {
    color: #fff;
    background-color: #b14739;
}

/* 강의(lesson) 카드 — 코딩라운지 썸네일 리스트와 동일한 톤 */
.classroom_area ul.lesson_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.classroom_area ul.lesson_list li {
    position: relative;
    margin: 0 25px 25px 0;
    width: calc((100% - 50px) / 3);
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.classroom_area ul.lesson_list li:nth-child(3n) {
    margin-right: 0;
}

.classroom_area ul.lesson_list li .thumb {
    position: relative;
    display: block;
    cursor: pointer;
}

.classroom_area ul.lesson_list li .thumb img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.classroom_area ul.lesson_list li .thumb:after {
    content: "▶";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.2em;
    height: 2.2em;
    line-height: 2.25em;
    color: #fff;
    font-size: 0.83em;
    text-align: center;
    text-indent: 0.15em;
    background-color: rgba(177, 71, 57, 0.9);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
}

.classroom_area ul.lesson_list li .thumb:hover:after {
    transform: translate(-50%, -50%) scale(1.15);
}

.classroom_area ul.lesson_list li .text_area {
    padding: 0.83em;
}

.classroom_area ul.lesson_list li .text_area span.title {
    display: block;
    font-size: 0.75em;
    line-height: 1.3;
    min-height: 2.6em;
}

.classroom_area ul.lesson_list li .text_area .btn_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75em;
}

.classroom_area ul.lesson_list li .text_area a.play {
    display: inline-block;
    padding: 0.25em 1em;
    color: #b14739;
    font-size: 0.66em;
    border: 1px solid #b14739;
    border-radius: 3px;
    cursor: pointer;
}

.classroom_area ul.lesson_list li .text_area a.play:hover {
    color: #fff;
    background-color: #b14739;
}

/* 영상이 없는 자료 전용 항목 */
.classroom_area ul.lesson_list li .thumb.noVideo {
    cursor: default;
}

.classroom_area ul.lesson_list li .thumb.noVideo:after {
    content: "📄";
    background-color: rgba(100, 100, 100, 0.75);
    text-indent: 0;
}

.classroom_area ul.lesson_list li .thumb.noVideo img {
    filter: grayscale(35%);
    opacity: 0.85;
}

.classroom_area ul.lesson_list li .text_area .noVideo_tag {
    display: inline-block;
    padding: 0.25em 1em;
    color: #969696;
    font-size: 0.66em;
    border: 1px dashed #dcdcdc;
    border-radius: 3px;
}

/* 강의별 학습자료 링크 목록 */
.classroom_area ul.lesson_list li .text_area .mat_list {
    margin-top: 0.75em;
    padding-top: 0.6em;
    border-top: 1px solid #f0f0f0;
}

.classroom_area ul.lesson_list li .text_area .mat_list a {
    display: block;
    padding: 0.22em 0;
    color: #646464;
    font-size: 0.6em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 자료 성격별 아이콘: 파일(⬇) / 이미지(🖼) / 웹 링크(🔗) */
.classroom_area ul.lesson_list li .text_area .mat_list a.mat-file:before {
    content: "⬇ ";
    color: #b14739;
}

.classroom_area ul.lesson_list li .text_area .mat_list a.mat-img:before {
    content: "🔍 ";
}

.classroom_area ul.lesson_list li .text_area .mat_list a.mat-link:before {
    content: "🔗 ";
}

.classroom_area ul.lesson_list li .text_area .mat_list a:hover {
    color: #b14739;
    text-decoration: underline;
}

.classroom_area ul.lesson_list li .text_area a.doc {
    display: inline-block;
    padding: 0.25em 1em;
    color: #646464;
    font-size: 0.66em;
    border: 1px solid #dcdcdc;
    border-radius: 3px;
}

.classroom_area ul.lesson_list li .text_area a.doc:hover {
    color: #0b0405;
    border-color: #969696;
}

/* 강의실 상단 우측: 쿠폰 추가/나가기
   — 본문 컬럼(1130px)과 세로 라인을 맞춘다 (강의실 구분선 우측 끝과 동일) */
.classroom_tools {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 auto 30px;
    width: 100%;
    max-width: 1130px;
    padding: 0 10px;
}

.classroom_tools a {
    display: inline-block;
    padding: 0.35em 1.25em;
    color: #646464;
    font-size: 0.58em;
    border: 1px solid #dcdcdc;
    border-radius: 5em;
    cursor: pointer;
}

.classroom_tools a:hover {
    color: #b14739;
    border-color: #b14739;
}

/* ---------- 강의실 허브: 키트별 밴드 + 언어 배지 ---------- */

.hub_band {
    margin: 0 10px 44px;
}

.hub_band_head {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    margin-bottom: 14px;
    padding-bottom: 0.4em;
    border-bottom: 2px solid #0b0405;
}

.hub_band_head .kit_name {
    font-size: 0.92em;
    font-weight: 600;
}

.hub_band_head small {
    color: #969696;
    font-size: 0.58em;
}

/* 카드는 왼쪽부터 채움 — 빈칸이 생기지 않는다 */
.hub_band_cards {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hub_band_cards .hub_card {
    width: 250px;
}

/* 언어 배지 (썸네일 좌상단) */
.lang_badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 1;
    padding: 0.12em 0.75em;
    color: #fff;
    font-size: 0.55em;
    font-weight: 600;
    border-radius: 5em;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.lang-arduino { background-color: #00979c; }
.lang-entry   { background-color: #ef7c2a; }
.lang-python  { background-color: #3776ab; }
.lang-app     { background-color: #646464; }
.lang-cursor  { background-color: #7c4dff; }   /* 커서 */
.lang-chatgpt { background-color: #10a37f; }   /* ChatGPT(OpenAI 그린) */
.lang-vibe    { background-color: #7c4dff; }   /* (구버전 호환) */
.lang-etc     { background-color: #969696; }

.hub_card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.hub_card .thumb {
    position: relative;
    display: block;
    cursor: pointer;
}

.hub_card .thumb img {
    display: block;
    width: 100%;
    height: 145px;
    object-fit: cover;
    background-color: #f5f5f5;
}

.hub_card .thumb:after {
    content: "→";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    line-height: 2em;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    text-align: center;
    text-indent: 0;
    background-color: rgba(11, 4, 5, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s;
}

.hub_card .thumb:hover:after {
    background-color: rgba(177, 71, 57, 0.95);
    transform: translate(-50%, -50%) scale(1.15);
}

.hub_card .text_area {
    padding: 0.55em 0.65em 0.7em;
}

.hub_card .text_area .title {
    display: block;
    font-size: 0.63em;
    line-height: 1.35;
    min-height: 2.7em;
}

.hub_card .text_area a.play {
    display: block;
    margin-top: 0.6em;
    padding: 0.3em 0;
    color: #b14739;
    font-size: 0.6em;
    text-align: center;
    border: 1px solid #b14739;
    border-radius: 3px;
    cursor: pointer;
}

.hub_card .text_area a.play:hover {
    color: #fff;
    background-color: #b14739;
}

/* 강의실 상세 상단: 목록으로 돌아가기 */
.course_nav {
    margin: 0 10px 20px;
}

.course_nav a.back_hub {
    display: inline-block;
    padding: 0.35em 1.25em;
    color: #646464;
    font-size: 0.66em;
    border: 1px solid #dcdcdc;
    border-radius: 5em;
    cursor: pointer;
}

.course_nav a.back_hub:hover {
    color: #b14739;
    border-color: #b14739;
}

/* ---------- 강의실 하단 카카오톡 문의 배너 ---------- */
.course_contact {
    margin: 10px 10px 50px;
    text-align: center;
}

.course_contact a {
    display: inline-block;
    padding: 0.55em 1.6em;
    color: #3c1e1e;
    font-size: 0.66em;
    background-color: #fee500;   /* 카카오 브랜드 옐로 */
    border-radius: 5em;
    box-shadow: 0 3px 0 #d9c400;
}

.course_contact a:hover {
    filter: brightness(0.96);
}

.course_contact a strong {
    font-weight: 700;
}

/* ---------- 유튜브 재생 모달 ----------
   :target(해시) 방식 대신 .modal-open 클래스로 여닫는다.
   — 해시를 바꾸면 닫을 때 페이지 최상단으로 튀는 문제가 있어서
     보던 위치를 유지하도록 클래스 방식으로 전환. */
[data-ml-modal].modal-open {
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.3s ease;
}

[data-ml-modal].modal-open .modal-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

[data-ml-modal] .modal-dialog.videoPlay {
    width: 90%;
    max-width: 960px;
    background: none;
    box-shadow: none;
}

[data-ml-modal] .modal-dialog.videoPlay .video_frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

[data-ml-modal] .modal-dialog.videoPlay .video_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

[data-ml-modal] .modal-dialog.videoPlay .video_title {
    display: block;
    margin-bottom: 0.5em;
    color: #fff;
    font-size: 0.83em;
    text-align: left;
}

[data-ml-modal] .modal-dialog.videoPlay .modal-close {
    color: #fff;
    top: -1.5em;
}

/* 라운지 검색(클라이언트 필터)에서 감춰진 항목 */
.codingLounge_list ul.thumb_list li.hiddenByFilter {
    display: none;
}