/****************************************************************************
  front-custom - 퍼블 납품물이 아닌 우리 쪽 보정 CSS

  퍼블 CSS(style · order · policy · mypage …)는 납품본 그대로 두고,
  납품본으로 덮을 수 없는 경우만 여기에 쌓는다. header.blade.php 에서
  화면별 CSS 다음에 싣는다(뒤에 와야 덮어쓴다).
 ***************************************************************************/


/****************************************************************************
  공통 헤더 GNB — 모바일 (USER-MAIN-001)

  퍼블 style.css 에 .gnb__nav 모바일 규칙이 없어 GNB 4개가 넘친다(2026-10-29).
  ul 기본 padding-left 40px 도 퍼블이 안 지웠다 — PC 는 오른쪽 정렬이라 안 보인다.
  모바일 루트 글자 크기가 12px 라 1rem = 12px 다.
  모바일에 보이는 메뉴가 5개가 되면 이 방식으로는 안 들어간다.
  퍼블 납품분에 모바일 규칙이 들어오면 이 블록을 지운다.
 ***************************************************************************/
@media screen and (max-width: 820px) {
    /* 퍼블 분기점(820px) 안에서만 — PC 간격(3rem)은 그대로 둔다. 글자 크기는 건드리지 않는다 */
    .header .gnb .gnb__nav { gap: 1rem; padding-left: 0; }

    /* 무료콘텐츠는 모바일에서만 숨긴다(2026-11-02).
       375px 기준 로고 132 + 항목 5개 221.4 = 353.4 로, gap · 패딩을 0 으로 해도
       여유가 0 이다. 글자 크기를 건드리지 않고는 5개가 안 들어간다.
       퍼블에 5개(추후 강사소개 포함 6개) 기준 모바일 규칙을 요청해 둔 상태이고,
       납품분이 들어오면 이 한 줄만 지우면 된다. */
    .header .gnb .gnb__nav .gnb__item--pc-only { display: none; }
}


/****************************************************************************
  약관 본문 (USER-INFO-001)

  본문은 관리자 약관 관리 등록본이고, EditorPurifier::CONTENT 가 class 속성을
  허용하지 않아 terms__article · terms__text · terms__list · terms__table 을
  달 수 없다. 그래서 class 없는 본문 요소에만 policy.css 의 같은 간격을 준다.
  :not([class]) 로 좁혀, Blade 가 직접 쓴 terms__* 요소는 건드리지 않는다.
 ***************************************************************************/

/* 장 - terms__chapter + terms__chapter-title */
.terms h2:not([class]) {
    margin-top: 2.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #E5E6E8;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #010F3B;
}

/* 조 - terms__article */
.terms h3:not([class]),
.terms h4:not([class]) {
    margin-top: 1.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #121212;
}

/* 본문 - terms__text */
.terms p:not([class]) {
    margin-top: 0.5rem;
    word-break: keep-all;
}

/* 항목 - terms__list 의 간격만 가져온다. 등록본은 ①② 를 글자로 적지 않고
   실제 목록 표식을 쓰므로 list-style · 들여쓰기는 브라우저 기본값을 둔다 */
.terms ol:not([class]),
.terms ul:not([class]) {
    margin-top: 0.5rem;
    word-break: keep-all;
}

.terms ol:not([class]) li + li,
.terms ul:not([class]) li + li {
    margin-top: 0.25rem;
}

/* 표 - terms__table. TermsService 가 표마다 감싸는 [data-table-scroll] 는
   terms__scroll 자리라 바깥 여백을 그쪽에 준다 */
.terms [data-table-scroll] {
    margin-top: 1rem;
}

.terms table:not([class]) {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
    border-top: 2px solid #010F3B;
    font-size: 0.8125rem;
    text-align: left;
}

.terms [data-table-scroll] table:not([class]) {
    margin-top: 0;
}

.terms table:not([class]) th,
.terms table:not([class]) td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #E5E6E8;
    word-break: keep-all;
}

.terms table:not([class]) thead th {
    background: #F5F6F8;
    font-weight: 600;
    color: #010F3B;
}

.terms table:not([class]) tbody th {
    background: #FAFBFC;
    font-weight: 500;
    color: #4E5968;
}

@media screen and (max-width: 820px) {
    .terms table:not([class]) th,
    .terms table:not([class]) td {
        padding: 0.625rem 0.75rem;
    }
}


/****************************************************************************
  이벤트 목록 · 상세 (USER-PROM-001 · 002)

  퍼블 납품 전 임시 — 탭 · 페이징 · 버튼은 납품 클래스를 쓰고, 머리말 · 카드 ·
  빈 상태 · 랜딩 래퍼만 여기 둔다. 납품되면 이 블록을 지우고 납품 클래스로 바꾼다.
 ***************************************************************************/
/* 상단 와이드 배너 — .container 윗여백을 빼 GNB 바로 아래 좌우 100% 로 붙인다(설계서 ①). 이미지는 메인 배너 조각(PC · 모바일) */
.evt-list--banner { padding-top: 0; }
.evt-banner { margin-bottom: 2.5rem; }
.evt-banner picture, .evt-banner img { display: block; width: 100%; height: auto; }
.evt-hero { padding-bottom: 2rem; text-align: center; }
.evt-hero__eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .12em; color: #ff7a00; }
.evt-hero__title { margin-top: .5rem; font-size: 1.75rem; font-weight: 700; }
.evt-hero__desc { margin-top: .5rem; color: #6b7280; }
.evt-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 2rem 0 2.5rem; padding: 0; list-style: none; }
.evt-card { position: relative; display: flex; flex-direction: column; gap: .5rem; color: inherit; text-decoration: none; }
.evt-card:hover .evt-card__title { color: #2b79ed; }
.evt-card__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .5rem; background: #f3f4f6; }
/* 구분 뱃지 — 기획전 주황 · 이벤트 초록(설계서 ③) */
.evt-card__badge { position: absolute; top: .75rem; left: .75rem; padding: .25rem .5rem; border-radius: .25rem; font-size: .75rem; font-weight: 700; color: #fff; }
.evt-card__badge--promotion { background: #ff7a00; }
.evt-card__badge--event { background: #16a34a; }
.evt-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.evt-card__period { font-size: .875rem; color: #6b7280; }
.evt-empty, .evt-closed { padding: 4rem 0; text-align: center; }
.evt-empty__text, .evt-closed__text { margin-bottom: 1.25rem; font-size: 1.0625rem; }
/* 랜딩 — .container 의 흰 바탕 · 아래 둥근 모서리는 두고 안쪽 여백만 빼 좌우 끝까지 채운다(설계서 ①).
   관리자 입력 요소가 뷰포트를 넘겨도 가로 스크롤이 생기지 않게 잘라 낸다. 모바일 .container 여백보다 뒤에 와야 한다 */
.evt-landing { padding: 0; overflow: hidden; }

@media screen and (max-width: 820px) {
    .evt-cards { grid-template-columns: 1fr; }
    .evt-hero__title { font-size: 1.375rem; }
    .evt-banner { margin-bottom: 1.5rem; }
}


/****************************************************************************
  학습 Q&A 목록 · 작성 · 상세 (USER-QNA-001 · 002)

  퍼블 납품 전 임시 — 1:1 문의(mypage/qna · board/qna · qna_view) 마크업을 빌려 쓰고
  설계서에만 있는 표시(답변완료 주황 · 답변대기 건수 강조 · 첨부 수 · 안내 문단)만 여기 둔다.
  납품되면 이 블록을 지우고 납품 클래스로 바꾼다.
 ***************************************************************************/
.sq-guide { margin-bottom: 1rem; font-size: .9375rem; color: #4e5968; }
.sq-guide__link { margin-left: .25rem; color: #2b79ed; text-decoration: underline; }
/* 답변 상태 — 답변대기는 .status 기본(회색), 답변완료는 주황(설계서 ③) */
.sq-status--answered { border-color: #ff7a00; color: #ff7a00; }
/* 답변대기 건수 강조 — 내 질문이 밀려 있는지 보는 지표(설계서 ②) */
.sq-pending { color: #ff7a00; }
.sq-attach { margin-left: .375rem; font-size: .8125rem; color: #8b95a1; white-space: nowrap; }
/* 학습 창 · 강좌 화면 질문하기 탭에서 쓴 질문의 차시 — 제목 앞 회색 글자 */
.sq-lecture { margin-right: .375rem; font-size: .8125rem; color: #8b95a1; white-space: nowrap; }
.sq-writer { width: 6rem; text-align: center; }
.sq-secret { margin-top: 1.5rem; }
/* 목록 행을 펼친 상세 — 표 한 줄을 통째로 쓴다 */
/* 퍼블 표 규칙이 칸을 가운데 정렬해 펼친 본문까지 따라오므로 표 안의 펼침 칸만 왼쪽으로 되돌린다 */
.table__list .sq-detail > td, .table__list .sq-detail > td * { text-align: left; }
.table__list .sq-detail > td { padding: 1.25rem 1.5rem; background: #f9fafb; }
/* 서식 본문 — 공용 초기화가 지운 목록 · 인용 표시를 되살리고 이미지는 칸 폭에 맞춘다 */
.sq-content ul { padding-left: 1.25rem; list-style: disc; }
.sq-content ol { padding-left: 1.25rem; list-style: decimal; }
.sq-content blockquote { margin: .5rem 0; padding-left: .75rem; border-left: 3px solid #d1d6db; color: #4e5968; }
.sq-content a { color: #2b79ed; text-decoration: underline; }
.sq-content img { max-width: 100%; height: auto; }
/* 제목 검색 — 조회 조건 줄 안에 입력칸 · 버튼을 한 줄로 둔다 */
.sq-search__input { width: 16rem; max-width: 100%; }
.sq-search__btn { height: 2.25rem; padding: 0 1.25rem; font-size: .875rem; }


/****************************************************************************
  공용 푸터 — 모바일 가로 넘침 보정 (FRONT-001)

  퍼블 style.css 에 .footer__top 의 모바일 규칙이 없어 로고 · 메뉴 · 채널이 한 줄로 이어지고,
  390px 폭에서 채널 영역이 화면 밖으로 밀려 모든 화면에 가로 스크롤이 생긴다.
  퍼블 납품본으로 고쳐지면 이 블록을 지운다(퍼블 요청 필요).
 ***************************************************************************/
@media screen and (max-width: 820px) {
    /* 퍼블 규칙(padding: 2.5rem 0)이 좌우 여백을 0 으로 둬 로고 · 채널이 화면 끝에 붙는다 — 아래 줄(저작권)과 같은 1rem 으로 맞춘다 */
    .footer .footer__top .inner { flex-wrap: wrap; gap: 1rem 1.5rem; padding-left: 1rem; padding-right: 1rem; }
    .footer .footer__channel { margin-left: 0; }
}


/****************************************************************************
  레이어 모바일 하단 시트 (USER-MYPAGE-003-P1 탈퇴 차단)

  설계서 P1 모바일 주석 — 시스템 얼럿이 아니라 하단 시트로 띄우고 주 버튼([1:1 문의하기])을
  전체폭으로 둔다. 퍼블 layer-pop 에는 모바일 변형이 없어 여기서 덮는다.
  overlay 에 layer-pop__overlay--sheet 를 단 레이어만 바뀐다. 퍼블이 시트 변형을 납품하면 그쪽으로 옮긴다.
 ***************************************************************************/
@media screen and (max-width: 820px) {
    .layer-pop__overlay--sheet {
        align-items: flex-end;
        padding: 0;
    }

    .layer-pop__overlay--sheet .layer-pop {
        width: 100%;
        max-height: 85vh;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    /* 버튼은 마크업 순서(보조 → 주)를 뒤집어 주 버튼을 위로, 둘 다 전체폭 */
    .layer-pop__overlay--sheet .layer-pop__btns {
        flex-direction: column-reverse;
    }

    .layer-pop__overlay--sheet .layer-pop__btns .btn {
        flex: none;
        width: 100%;
    }
}


/****************************************************************************
  학습 창 부가 기능 (USER-MY-004 · DECISIONS 174)

  북마크 탭 · 차시 상세 레이어 · 이어보기 확인 창은 설계서 v12 밖 추가 기능이라
  퍼블 납품 마크업이 없다. 레이어 · 버튼 · 표는 퍼블 공통 클래스(layer-pop · btn · tab)를
  그대로 쓰고, 그 클래스로 만들 수 없는 것만 .pb- 접두로 여기에 둔다.
  퍼블이 학습 창 변형을 납품하면 이 블록을 지우고 그쪽으로 옮긴다.

  학습 창(player.blade.php)은 헤더를 include 하지 않아 이 파일을 직접 읽는다.
 ***************************************************************************/

/* 목록 / 북마크 탭 — 폭 25rem 패널이라 퍼블 .tab 은 쓰지 않는다(가로 패딩이 패널을 넘친다) */
.pb-tabs {
    display: flex;
    flex: 0 0 auto;
    border-bottom: 1px solid #e5e6e8;
    background: #fff;
}

.pb-tab {
    flex: 1 1 0;
    padding: .6875rem 0;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: .8125rem;
    font-weight: 500;
    color: #8b95a1;
    cursor: pointer;
}

.pb-tab--active {
    border-bottom-color: #7e59c7;
    font-weight: 600;
    color: #7e59c7;
}

/* 북마크 패널 — 목차(.player-curri)와 같은 자리에서 교대로 보인다 */
.pb-marks {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    background: #fff;
}

.pb-marks__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-mark {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    font-size: .8125rem;
}

.pb-mark + .pb-mark {
    border-top: 1px solid #f2f4f6;
}

/* 재생 지점 — 눌러서 그 초로 이동한다 */
.pb-mark__go {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: #7e59c7;
    cursor: pointer;
}

.pb-mark__text {
    flex: 1 1 auto;
    min-width: 0;
    color: #333d4b;
    word-break: break-all;
}

.pb-mark__del {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    background: none;
    font-size: .875rem;
    line-height: 1;
    color: #8b95a1;
    cursor: pointer;
}

/* 빈 목록 · 오류 안내 — 패널 안에서만 쓴다(재생 영역 문구와 섞이지 않게) */
.pb-msg {
    padding: 1.5rem 1rem;
    font-size: .8125rem;
    line-height: 1.5;
    color: #8b95a1;
    text-align: center;
}

.pb-msg--error {
    color: #e5484d;
}

/* 목차 차시 행에 붙는 [상세] — 퍼블 링크는 그대로 두고 오른쪽에 덧붙인다 */
.pb-row {
    display: flex;
    align-items: center;
}

.pb-row .player-lesson__link {
    flex: 1 1 auto;
    min-width: 0;
}

.pb-detail {
    flex: 0 0 auto;
    margin-right: .5rem;
    padding: .125rem .375rem;
    border: 1px solid #d1d6db;
    border-radius: .25rem;
    background: #fff;
    font-size: .6875rem;
    color: #6b7684;
    cursor: pointer;
}

/* 북마크 저장 · 차시 상세 레이어 안의 줄 — 레이어 틀은 퍼블 .layer-pop 그대로다 */
.pb-field {
    width: 100%;
    padding: .625rem .75rem;
    border: 1px solid #d1d6db;
    border-radius: .375rem;
    font-size: .875rem;
}

.pb-info {
    margin: 0 0 .5rem;
    font-size: .875rem;
    color: #333d4b;
}

.pb-info__label {
    display: inline-block;
    min-width: 5rem;
    color: #8b95a1;
}

/* [북마크] — 플레이어 컨트롤바에 넣지 않는다(전체화면이면 영상 루트 밖으로 빠진다) */
.pb-save {
    flex: 0 0 auto;
}

/* 탭은 목차 위에 둔다 — 퍼블 마크업 순서를 바꾸지 않으려고 배치만 flex order 로 올린다 */
.pb-tabs { order: -1; }

/* 개인정보 수정 하단 [회원탈퇴] — v12 USER-MYPAGE-001 ⑨ 「눈에 띄지 않게 하단 텍스트로만」. 퍼블 납품본에 자리가 없다 */
.my-info__withdraw {
    display: block;
    width: fit-content;
    margin: 1.5rem 0 0 auto;
    font-size: .8125rem;
    color: #8b95a1;
    text-decoration: underline;
}


/****************************************************************************
  무료콘텐츠 (USER-FREE-000 ~ 003 · 003-P1)

  퍼블 납품 전 임시 — SNB · 탭 · 표 · 상세(view) · 레이어는 납품 클래스를 쓰고, 안내 문단 · 강의 카드 ·
  안내 띠 · 관련 강좌 · 재생 판만 여기 둔다. 납품되면 이 블록을 지우고 납품 클래스로 바꾼다.
 ***************************************************************************/
.free-lead { margin-bottom: 1.5rem; color: #6b7280; }
.free-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.free-section { margin-bottom: 3rem; }
.free-section__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.free-section__title { font-size: 1.25rem; font-weight: 700; }
.free-section__more { margin-top: .75rem; font-size: .875rem; color: #6b7280; }
.free-section__more a { text-decoration: underline; }
/* 맛보기 카드 — 강의 썸네일 칸이 없어 어두운 판 + 재생 표시로 대신한다 */
/* 칸 수는 폭에 맞춰 — 넓으면 4열(랜딩 4건이 한 줄), 모바일은 1열(설계서 ※ 모바일 카드 1열) */
.free-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem 1.5rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.free-card { display: flex; flex-direction: column; gap: .5rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.free-card:hover .free-card__title { color: #2b79ed; }
.free-card__thumb { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: .5rem; background: #1f2937; }
.free-card__thumb::after { content: '▶'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: rgba(255, 255, 255, .85); }
.free-card__badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; padding: .25rem .5rem; border-radius: .25rem; font-size: .75rem; font-weight: 700; color: #fff; background: #16a34a; }
.free-card__time { position: absolute; right: .75rem; bottom: .75rem; z-index: 1; padding: .125rem .375rem; border-radius: .25rem; font-size: .75rem; color: #fff; background: rgba(0, 0, 0, .6); }
.free-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; font-weight: 700; line-height: 1.45; }
.free-card__meta { font-size: .875rem; color: #6b7280; }
.free-empty { padding: 3rem 0; text-align: center; }
.free-empty__text { margin-bottom: 1.25rem; }
/* 가입 혜택 · 회원 전용 안내 · 정규 강좌 유도 띠 */
.free-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0; padding: 1.25rem 1.5rem; border-radius: .5rem; background: #eff6ff; }
.free-tags { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .5rem; }
/* 가입 · 로그인 뒤 돌아왔을 때 받을 줄 — 자동 다운로드가 막혀도 바로 누를 수 있게(USER-FREE-003 ⑧) */
.free-file--focus { outline: 2px solid #2b79ed; outline-offset: .25rem; border-radius: .25rem; }
.free-related { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0; padding: 1.25rem 1.5rem; border: 1px solid #e5e7eb; border-radius: .5rem; }
.free-related__lead { margin-bottom: .25rem; font-size: .875rem; color: #6b7280; }
.free-related__title { display: block; margin-bottom: .25rem; }
.free-related__price del { color: #9ca3af; }
.free-related__rate { font-weight: 700; color: #ef4444; }
/* 맛보기 재생 판 — 16:9 */
.free-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.free-player iframe, .free-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 재생 실패 문구 — .msg 의 display 가 hidden 속성을 덮어 늘 보이던 것을 막는다 */
[data-preview-error][hidden] { display: none; }
/* 가입 유도 모달 [다음에 할게요] — 위계는 가장 낮게(USER-FREE-003-P1 ④) */
.free-dismiss { display: block; margin: 1rem auto 0; padding: 0; border: 0; background: none; font-size: .875rem; color: #8b95a1; text-decoration: underline; cursor: pointer; }

@media screen and (max-width: 820px) {
    .layer-pop--m:has(.free-player) { width: calc(100% - 2rem); }
}


/****************************************************************************
  강사 목록 (USER-INST-003)

  퍼블 납품 전 임시 — 탭 · 검색 · 정렬 · 페이징은 납품 클래스를 쓰고, 안내 문단 · 강사 카드 · 빈 상태만 여기 둔다.
  납품되면 이 블록을 지우고 납품 클래스로 바꾼다.
 ***************************************************************************/
.ins-lead { margin-bottom: 1.5rem; color: #6b7280; }
/* 데스크톱 4열 · 태블릿 3열 · 모바일 2열(설계서 ③) */
.ins-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.ins-card { display: flex; flex-direction: column; gap: .25rem; color: inherit; text-decoration: none; }
.ins-card:hover .ins-card__name { color: #2b79ed; }
/* 사진 3:4 고정 — 카드 높이가 흔들리지 않게(③) */
.ins-card__photo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; margin-bottom: .5rem; overflow: hidden; border-radius: .5rem; background: #f3f4f6; }
.ins-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.ins-card__photo img.ins-card__default { width: 3rem; height: 3rem; object-fit: contain; opacity: .5; }
.ins-card__certs { font-size: .8125rem; color: #2b79ed; }
.ins-card__name { font-size: 1.0625rem; font-weight: 700; }
.ins-card__title { font-size: .875rem; color: #333d4b; }
.ins-card__meta { font-size: .8125rem; color: #6b7280; }
.ins-empty { padding: 3rem 0; text-align: center; }
.ins-empty__text { margin-bottom: 1.25rem; }

@media screen and (max-width: 1024px) {
    .ins-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media screen and (max-width: 820px) {
    .ins-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}