/* 온라인 클래스·무료 클래스 2차 메뉴 — #lnb_mb 가 보이는 폭(1200px 이하)에서 드롭다운 대신 좌우 스와이프 탭.
   후기·커뮤니티 탭(layout.css #lnb_my .lnb_menu.lnb_tabs)과 같은 모양·색·라인포인트. (무료 클래스 작업 2026-10-11)
   #lnb_mb 는 PC(1201px 이상)에서 숨겨지므로 이 규칙은 모바일·태블릿에만 보인다. */
#lnb_mb.is-tabs{border-bottom: 0;}
#lnb_mb .lnb_menu.lnb_tabs{position: relative;z-index: 20;border-bottom: 1px solid #282A2C;}
#lnb_mb .lnb_menu.lnb_tabs > ul{position: static;display: flex;flex-wrap: nowrap;gap: 32px;padding: 0 0 2px 40px;width: auto;overflow-x: auto;overflow-y: hidden;overscroll-behavior-x: contain;-webkit-overflow-scrolling: touch;scrollbar-width: none;}
#lnb_mb .lnb_menu.lnb_tabs > ul::-webkit-scrollbar{display: none;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li{flex: 0 0 auto;width: auto;}
/* 마지막 탭 오른쪽 여백 — 스크롤 컨테이너의 padding-right 를 무시하는 브라우저 대응 */
#lnb_mb .lnb_menu.lnb_tabs > ul > li:last-child{padding-right: 40px;}
/* 공용 .lnb_menu > ul > li > a(PC 왼쪽 메뉴용 칸 모양·밑줄·둥근 모서리·활성 배경)를 지운다 — 후기·커뮤니티 탭 규칙과 같게 */
#lnb_mb .lnb_menu.lnb_tabs > ul > li > a{position: relative;display: block;margin-bottom: 0;padding: 20px 0;font-size: 15px;font-weight: 500;line-height: 1.2;color: rgba(255,255,255,0.36);white-space: nowrap;background: none;border: 0;border-radius: 0;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li.on > a{color: #fff;font-weight: 700;background-color: transparent;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li.on > a::after{position: absolute;left: 0;bottom: -2px;width: 100%;height: 2px;content: '';background-color: #fff;border-radius: 1px 1px 0 0;}
#lnb_mb .lnb_menu.lnb_tabs_sub > ul > li > a{padding: 14px 0;font-size: 14px;}

/* 무료 클래스 한 화면 목록 — 책갈피 메뉴 (2026-10-13). .fc_onepage_nav 는 무료 클래스에서만 붙는다.
   PC: 메뉴 묶음(.sub_con_wrapA 의 flex 항목)을 헤더 아래 40px 에 붙인다. 본문 묶음 끝에서 함께 멈추므로 푸터를 덮지 않는다.
       메뉴가 화면보다 길면 메뉴 안에서만 스크롤된다. --fc-sticky-top = 헤더 높이(스크립트가 잰다).
   1200 이하: 탭 줄 묶음을 헤더 바로 아래에 붙인다. 3차 탭 줄은 2차 줄 아래에 겹쳐 띄워, 구역을 지나며 줄이 생기고 없어질 때 본문이 밀리지 않게 한다. */
.sub_con_wrapA > .fc_onepage_nav{position: sticky;top: calc(var(--fc-sticky-top, 120px) + 40px);z-index: 30;align-self: flex-start;}
.sub_con_wrapA > .fc_onepage_nav #lnb{max-height: calc(100vh - var(--fc-sticky-top, 120px) - 80px);overflow-y: auto;overscroll-behavior: contain;scrollbar-width: thin;}
/* 3차를 항상 펼쳐 두므로(위 template) 펼침·접힘 표시(+/−)는 뜻이 없어 감춘다 */
.fc_onepage_nav #lnb .lnb_menu > ul > li.has-sub > a::after{display: none;}
@media all and (max-width:1200px){
.sub_con_wrapA > .fc_onepage_nav{top: var(--fc-sticky-top, 120px);background-color: #000;}
.fc_onepage_nav #lnb_mb .lnb_menu.lnb_tabs_sub{position: absolute;top: 100%;left: 0;right: 0;background-color: #000;}
    /* 겹쳐 띄운 3차 줄은 탭 묶음 높이에 들어가지 않아, 본문 끝에서 묶음이 멈출 때 그 아래로 삐져나와 푸터에 걸친다(검수 D1 · 768).
       묶음에 3차 줄 높이만큼 아래 여백을 주고 본문을 같은 만큼 끌어올려(배치는 그대로) 묶음이 그만큼 일찍 멈추게 한다.
       높이는 스크립트가 잰다(--fc-subrow-h). 재기 전 기본값 = 실측 근사(태블릿 48px · 모바일 8rem). */
.sub_con_wrapA > .fc_onepage_nav{margin-bottom: var(--fc-subrow-h, 48px);}
.sub_con_wrapA > .fc_onepage_nav + #content{margin-top: calc(-1 * var(--fc-subrow-h, 48px));}
}
@media all and (max-width:950px){
.sub_con_wrapA > .fc_onepage_nav{margin-bottom: var(--fc-subrow-h, 8rem);}
.sub_con_wrapA > .fc_onepage_nav + #content{margin-top: calc(-1 * var(--fc-subrow-h, 8rem));}
}
@media all and (max-width:950px){
#lnb_mb .lnb_menu.lnb_tabs{border-bottom-width: 0.2rem;}
#lnb_mb .lnb_menu.lnb_tabs > ul{gap: 4.8rem;padding: 0 0 0.4rem 4.8rem;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li:last-child{padding-right: 4.8rem;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li > a{padding: 2.8rem 0;font-size: 2.6rem;}
#lnb_mb .lnb_menu.lnb_tabs > ul > li.on > a::after{bottom: -0.2rem;height: 0.4rem;border-radius: 0.2rem 0.2rem 0 0;}
#lnb_mb .lnb_menu.lnb_tabs_sub > ul > li > a{padding: 2.2rem 0;font-size: 2.4rem;}
}


/* 카드 높이 통일 — classList.vue 의 같은 규칙(scoped 라 자식 컴포넌트에는 닿지 않아 여기에 같은 값을 둔다). */
.list_typeA > ul[data-v-eb46ac8e] {
  align-items: stretch;
}
.list_typeA > ul > li[data-v-eb46ac8e] {
  display: flex;
}
.list_typeA > ul > li > .class_con[data-v-eb46ac8e] {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.list_typeA > ul > li > .class_con > a[data-v-eb46ac8e] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.list_typeA .infor[data-v-eb46ac8e] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.list_typeA .infor .tit[data-v-eb46ac8e] {
  display: block;
  min-height: 2.9em;
}
/* PC 만 — 강사명 아래 여백을 제목 위 여백(공용 .infor 위아래 30px)에 가깝게 줄이고(공용 .txt 아래 20px → 4px · 사용자 지정),
   카드 줄 사이를 80 → 60px 로 조금 좁힌다. 판매 목록은 공용 규칙 그대로. */
@media all and (min-width: 951px) {
.list_typeA.free_class_list > ul[data-v-eb46ac8e] {
    /* 카드 줄 사이 — 60 → 68px(사용자 지정 2026-10-14 · 8px 넓힘) */
    row-gap: 68px;
}
.list_typeA.free_class_list .infor .txt[data-v-eb46ac8e] {
    margin-bottom: 4px;
}
}
.free_class_notice[data-v-eb46ac8e] {
  padding: 80px 0;
  font-size: 16px;
  color: #94979a;
  text-align: center;
}
.free_class_retry[data-v-eb46ac8e] {
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #444647;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
@media all and (max-width: 950px) {
  /* 카드 줄 사이 — 공용 3.8rem(390 폭 19px) 에서 8px 넓힘 = 5.4rem(사용자 지정 2026-10-14). 판매 목록은 공용 그대로 */
.list_typeA.free_class_list > ul[data-v-eb46ac8e] {
    row-gap: 5.4rem;
}
.free_class_notice[data-v-eb46ac8e] {
    padding: 12rem 0;
    font-size: 2.6rem;
}
.free_class_retry[data-v-eb46ac8e] {
    margin: 2.4rem auto 0;
    display: block;
    padding: 1.4rem 2.8rem;
    font-size: 2.4rem;
}
}


/* 위계 — 크기만으로도 2차 > 3차 > 카드 제목이 읽히게(검수 D2 반영 2026-10-13).
   PC: 2차 32px·700 / 3차 24px·600 / 카드 제목 18px(기존). 모바일(950 이하 rem): 2차 4.6rem / 3차 3.6rem / 카드 2.6rem(기존).
   3차 앞 짧은 막대(사이트 강조색 #E2D9B7). 2차 구역 사이 100px(PC · 2026-10-14 120 → 100), 3차 구역 사이 72px(카드 줄 간격 80px 기준). */
.fc_op_notice[data-v-043b5eb4] {
  padding: 80px 0;
  font-size: 16px;
  color: #94979a;
  text-align: center;
}
.fc_op_retry[data-v-043b5eb4] {
  margin-left: 8px;
  padding: 6px 14px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #444647;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
/* 검색 — 입력창 모양은 판매 목록의 공용 .search_con(content.css)을 그대로 쓰고, 놓을 자리·결과 줄만 여기서 정한다 */
.fc_search[data-v-043b5eb4] {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 48px;
}
.fc_search .search_con[data-v-043b5eb4] {
  width: 306px;
}
/* PC — 판매 목록(.bbs_top 이 제목 줄로 끌어올림)처럼 검색창을 첫 제목 줄 오른쪽에 둔다. 자리를 차지하지 않게 띄워
   첫 구역 제목이 검색창 없던 때의 자리에 그대로 있다(사용자 지정 2026-10-14). 검색 결과 줄은 오른쪽을 비워 검색창과 겹치지 않게 한다.
   세로 위치 -4px = 판매 목록과 같은 높이(검색창 위 끝이 제목 위 끝보다 4px 위 · 1440 실측 2026-10-14). */
@media all and (min-width: 951px) {
.fc_onepage[data-v-043b5eb4] {
    position: relative;
}
.fc_search[data-v-043b5eb4] {
    position: absolute;
    top: -4px;
    right: 0;
    z-index: 2;
    margin: 0;
}
.fc_search ~ .fc_result[data-v-043b5eb4] {
    /* 결과 줄 밑줄이 검색창 아래 끝과 붙어 보이지 않게 — 검색창 아래 끝(-4 + 58 = 54px) + 17px. 높이는 안쪽 여백 포함 값 */
    min-height: 71px;
    padding-right: 330px;
}
}
.fc_result[data-v-043b5eb4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 56px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fc_result_msg[data-v-043b5eb4] {
  font-size: 20px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  word-break: break-all;
}
.fc_result_msg strong[data-v-043b5eb4] {
  font-weight: 700;
  color: #fff;
}
.fc_result_clear[data-v-043b5eb4] {
  flex-shrink: 0;
  padding: 8px 16px;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  border: 1px solid #444647;
  border-radius: 8px;
  background: none;
  cursor: pointer;
}
/* 큰 구역 사이 — PC 100 → 90px(사용자 지정 2026-10-14 · 10px 더 줄임). 모바일은 아래 미디어 규칙이 따로 정한다 */
.fc_sec2 + .fc_sec2[data-v-043b5eb4] {
  margin-top: 90px;
  padding-top: 64px;
}
/* 구역 제목 ↔ 카드 간격 — 44 → 56px(2차) · 32 → 40px(3차) 로 조금 넓힘(사용자 지정 2026-10-14) */
.fc_t2[data-v-043b5eb4] {
  margin: 0 0 56px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  letter-spacing: -0.01em;
}
.fc_cnt[data-v-043b5eb4] {
  margin-left: 10px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.36);
  letter-spacing: 0;
}
.fc_t2 .fc_cnt[data-v-043b5eb4] {
  font-size: 16px;
}
/* 「○○ 전체보기」 — 사이트 공용 .btn_more(content.css · 강의 상세 「○강 모두 보기」)와 같은 모양. 링크(a)라 가운데 정렬만 더한다 */
.fc_more_btn[data-v-043b5eb4] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0 0;
}
.fc_sec3 + .fc_sec3[data-v-043b5eb4] {
  margin-top: 72px;
}
.fc_t3[data-v-043b5eb4] {
  position: relative;
  margin: 0 0 40px;
  padding-left: 20px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
.fc_t3[data-v-043b5eb4]::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 22px;
  margin-top: -11px;
  content: "";
  border-radius: 2px;
  background-color: #e2d9b7;
}
@media all and (max-width: 950px) {
.fc_op_notice[data-v-043b5eb4] {
    padding: 12rem 0;
    font-size: 2.6rem;
}
.fc_op_retry[data-v-043b5eb4] {
    display: block;
    margin: 2.4rem auto 0;
    padding: 1.4rem 2.8rem;
    font-size: 2.4rem;
}
.fc_search[data-v-043b5eb4] {
    /* 검색창 ↔ 첫 제목 — 5.2rem 에서 6px(390 폭 기준) 넓힘(사용자 지정 2026-10-14) */
    margin-bottom: 6.4rem;
}
.fc_search .search_con[data-v-043b5eb4] {
    flex: 1;
    width: 100%;
}
.fc_result[data-v-043b5eb4] {
    gap: 2.4rem;
    margin-bottom: 6.4rem;
    padding-bottom: 3.2rem;
}
.fc_result_msg[data-v-043b5eb4] {
    font-size: 3rem;
}
.fc_result_clear[data-v-043b5eb4] {
    /* 누름 높이 약 44px(390 폭 기준) — 검수 관찰: 33px 는 손가락으로 누르기 작다 */
    padding: 2.6rem 3rem;
    font-size: 2.4rem;
    border-radius: 1.2rem;
}
.fc_sec2 + .fc_sec2[data-v-043b5eb4] {
    margin-top: 12rem;
    padding-top: 7.2rem;
}
.fc_t2[data-v-043b5eb4] {
    margin-bottom: 6.4rem;
    font-size: 4.6rem;
}
.fc_cnt[data-v-043b5eb4] {
    margin-left: 1.2rem;
    font-size: 2.4rem;
}
.fc_t2 .fc_cnt[data-v-043b5eb4] {
    font-size: 2.6rem;
}
.fc_more_btn[data-v-043b5eb4] {
    margin-top: 6rem;
}
.fc_sec3 + .fc_sec3[data-v-043b5eb4] {
    margin-top: 8.8rem;
}
.fc_t3[data-v-043b5eb4] {
    margin-bottom: 4.8rem;
    padding-left: 2.6rem;
    font-size: 3.6rem;
}
.fc_t3[data-v-043b5eb4]::before {
    width: 0.6rem;
    height: 3.2rem;
    margin-top: -1.6rem;
    border-radius: 0.3rem;
}
}


/* 전자책 목록 — "기간 한정 무료" 안내. 정규과정 상세페이지 전자책 카드와 같은 규격.
   해당 없는 카드에는 같은 구조의 빈 줄을 둬 카드 높이를 맞춘다(숫자로 맞추면 글자 크기가
   바뀔 때마다 어긋나므로 같은 요소를 그대로 쓴다). */
.ebook_promo_row[data-v-010c99c2]{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.ebook_promo_row.is-empty[data-v-010c99c2]{
    visibility: hidden;
}
.ebook_limit_badge[data-v-010c99c2]{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 23px;
    padding: 0 9px 2px;
    border-radius: 4px;
    background-color: #E5502F;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
.ebook_promo_until[data-v-010c99c2]{
    color: #E5502F;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.02em;
    word-break: keep-all;
}
/* 카드 높이 통일 — 제목 줄 수·안내 유무로 카드마다 높이가 달라 보이지 않게 한다. */
.list_typeA > ul[data-v-010c99c2]{
    align-items: stretch;
}
.list_typeA > ul > li[data-v-010c99c2]{
    display: flex;
}
.list_typeA > ul > li > .class_con[data-v-010c99c2]{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.list_typeA > ul > li > .class_con > a[data-v-010c99c2]{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.list_typeA .infor[data-v-010c99c2]{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}
.list_typeA .infor .tit[data-v-010c99c2]{
    display: block;
    min-height: 2.9em;
}
/* 안내가 없는 카드도 아래 여백이 같도록 가격 줄을 바닥 쪽으로 붙인다. */
.list_typeA .infor .price[data-v-010c99c2]{
    margin-top: auto;
}
@media all and (max-width: 767px){
.ebook_promo_row[data-v-010c99c2]{ margin-top: 8px; gap: 6px;
}
.ebook_promo_until[data-v-010c99c2]{ font-size: 13px;
}
.ebook_limit_badge[data-v-010c99c2]{ min-height: 21px; padding: 0 7px 2px; font-size: 11px;
}
}