/* ==========================================================================
   brand.css — Collab 테마 위에 얹는 한글·브랜드 보정층
   --------------------------------------------------------------------------
   원칙
     1. style.css(테마 원본)는 건드리지 않는다. 여기서만 덮어쓴다.
        테마를 재컴파일해도 이 파일은 살아남는다.
     2. 브랜드 색은 아래 :root 한 곳에서만 정의한다.
        브랜드 교체 시 이 블록만 고치면 된다.
        (SCSS 원본은 static/collab_assets/scss/_variable.scss — 재컴파일할 때 함께 맞출 것)
     3. 한글은 라틴 기준으로 짠 레이아웃에서 반드시 두 군데가 깨진다.
        줄바꿈(단어 중간 절단)과 세로 높이(버튼 잘림). 아래 §2, §3 가 그것.
   ========================================================================== */


/* §1 — 브랜드 토큰 ========================================================= */

:root {
  /* Collab 원본 팔레트. 새 브랜드가 정해지면 이 여섯 줄만 바꾼다. */
  --brand-dark:      #1F1D0D;   /* 딥 올리브 — 헤드라인·다크 섹션 바탕 */
  --brand-body:      #29281E;   /* 본문 글자 */
  --brand-primary:   #F7FF62;   /* 라임 — 주 강조(밝은 바탕 위 버튼) */
  --brand-warning:   #FFD32B;   /* 옐로 — 보조 강조·포인트 도형 */
  --brand-light:     #F6F6F6;   /* 밝은 섹션 바탕 */
  --brand-border:    #D2D2D2;

  /* 파생 토큰 — Falcon 화면과 공유한다(falcon_tone.css 가 이 값을 읽는다) */
  --brand-radius:    8px;
  --brand-on-dark:   #FFFFFF;
  --brand-on-primary:#1F1D0D;

  /* 한글 폰트 스택.
     Barlow/Roboto 는 한글 글리프가 없어 그대로 두면 시스템 기본으로 떨어진다.
     라틴·숫자는 테마 폰트를 유지하고 한글만 아래로 받는다. */
  --font-ko: "Pretendard", "Pretendard Variable", "Apple SD Gothic Neo",
             "Malgun Gothic", "맑은 고딕", sans-serif;
  --font-heading: "Barlow", var(--font-ko);
  --font-body:    "Roboto", var(--font-ko);
}


/* §2 — 한글 줄바꿈 =========================================================
   기본값 word-break:normal 은 한글을 단어 중간에서 끊는다.
   ("바로 첨삭받는 수 / 리논술")  keep-all 이 어절 단위로 끊어준다.
   숫자·코드가 섞인 곳에서 넘칠 수 있으므로 overflow-wrap 을 함께 준다.        */

html:lang(ko),
html:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}


/* §3 — 타이포 ============================================================== */

body {
  font-family: var(--font-body);
  color: var(--brand-body);
}

h1, h2, h3, h4, h5, h6,
.banner_big_title,
.section_title,
.btn span small {
  font-family: var(--font-heading);
}

/* 한글은 같은 font-size 에서 라틴보다 세로로 크다.
   테마가 잡아둔 행간이 라틴 기준이라 그대로 두면 답답하거나 잘린다. */
h1, h2, h3, .banner_big_title { line-height: 1.32; }
h4, h5, h6                    { line-height: 1.42; }
p, li, td, dd                 { line-height: 1.75; }


/* §4 — 버튼 ================================================================
   테마 버튼은 라벨을 <small> 두 벌로 들고 호버 때 위로 밀어 올린다.
   (템플릿에서는 collab/_macros.html 의 btn() 매크로로만 찍을 것.
    innerText 로 갈아끼우면 구조가 깨져 버튼 높이가 무너진다.)
   여기서는 한글이 들어갔을 때 위아래가 잘리지 않도록 행간만 넓힌다.       */

.btn span small {
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.btn.btn_small span small { padding: 10px 0; }


/* §5 — 폼 ==================================================================
   placeholder 와 label 이 한글이면 라틴보다 길어져 넘친다.                  */

.form-control,
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="search"], select, textarea {
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}
::placeholder { letter-spacing: -0.01em; }


/* §6 — 메뉴 ================================================================
   상단 메뉴가 한글이면 글자 폭이 라틴보다 넓다. 자간을 좁혀 한 줄을 지킨다. */

.main_menu_list > li > .nav-link {
  letter-spacing: -0.02em;
  white-space: nowrap;
}


/* §7 — 유틸 ================================================================ */

/* 숫자·영문 전용(카운터, 가격 등)은 테마 폰트를 그대로 쓰게 한다 */
.latin { font-family: "Barlow", sans-serif; }

/* 긴 한글 제목이 카드 안에서 넘칠 때 */
.text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* §8 — 푸터 사업자 정보 ====================================================
   법적 표시 항목. 한 줄에 흐르되 모바일에서 접힌다.                          */

.footer_biz {
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 14px;
  font-size: 13px;
  opacity: 0.75;
}
.footer_biz li b {
  font-weight: 600;
  margin-right: 4px;
  opacity: 0.85;
}
@media (max-width: 575px) {
  .footer_biz { justify-content: flex-start; font-size: 12px; }
}


/* §9 — 소셜 로그인 버튼 ====================================================
   이 서비스의 로그인은 카카오·네이버·구글 3사가 전부다.
   각 사의 브랜드 색은 가이드라인상 임의로 바꿀 수 없으므로 테마 팔레트를
   적용하지 않는다. 모양(반경·높이·정렬)만 테마와 맞춘다.                    */

.social_login_btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 24px;
  margin-bottom: 14px;
  border: none;
  border-radius: var(--brand-radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.social_login_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 18, 19, 0.18);
}
.social_login_btn svg { flex: 0 0 auto; }

.social_kakao  { background: #FEE500; color: rgba(0, 0, 0, 0.85); }
.social_naver  { background: #03C75A; color: #ffffff; }
.social_google { background: #ffffff; color: #3C4043; border: 1px solid #DADCE0; font-weight: 500; }

.login_terms_note {
  margin-top: 22px;
  font-size: 13px;
  color: #6b6a5f;
}
.login_terms_note a { text-decoration: underline; }


/* §10 — 결제 결과 화면 =====================================================
   테마에 대응 화면이 없어 새로 만든 블록. 테마의 카드 문법
   (흰 바탕 + 어두운 오프셋 그림자)을 따른다.                                 */

.payment_result_box {
  padding: 48px 40px;
  background: #ffffff;
  border: 2px solid var(--brand-dark);
  border-radius: var(--brand-radius);
  box-shadow: 10px 10px 0 0 var(--brand-dark);
}
.payment_result_icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
}
.payment_result_icon.is_success { background: var(--brand-primary); }
.payment_result_icon.is_error   { background: #ffe1e1; color: #c0392b; }

.payment_result_list {
  margin: 26px 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--brand-border);
}
.payment_result_list li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--brand-border);
  text-align: left;
}
.payment_result_list li span  { color: #6b6a5f; }
.payment_result_list li strong { font-weight: 600; text-align: right; }

.payment_result_actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

@media (max-width: 575px) {
  .payment_result_box { padding: 34px 22px; box-shadow: 6px 6px 0 0 var(--brand-dark); }
  .payment_result_actions .btn { width: 100%; }
}


/* §11 — 브레드크럼(compact) ================================================
   테마 .page_banner 는 상품·소개용이라 520px 로 크다.
   글 위주 화면에 쓰는 낮은 변형.                                            */

.page_banner_compact .content_wrapper {
  /* 테마 원본은 display:flex + align-items:center 라서, 자식을 row/col 로
     감싸지 않고 바로 넣으면 제목·설명·breadcrumb 가 한 줄에 늘어선다.
     여기서는 세로로 쌓는다. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  padding: 54px 60px;
  background-image: none !important;
}
.page_banner_compact .page_title { font-size: 40px; }
.page_banner_compact .page_description { margin-top: 12px; max-width: 760px; }

@media (max-width: 767px) {
  .page_banner_compact .content_wrapper { padding: 36px 24px; }
  .page_banner_compact .page_title { font-size: 28px; }
}


/* §12 — 약관·방침 본문 =====================================================
   법령 문안. 조 제목과 목록이 길게 이어지므로 읽는 리듬만 잡아준다.        */

.legal_content { color: var(--brand-body); }
.legal_content h5 {
  margin: 42px 0 14px;
  padding-top: 22px;
  font-size: 20px;
  font-weight: 700;
  border-top: 2px solid var(--brand-dark);
}
.legal_content h5:first-of-type { margin-top: 28px; }
.legal_content p  { margin-bottom: 14px; }
.legal_content ul { margin: 0 0 18px; padding-left: 20px; }
.legal_content ul li { margin-bottom: 8px; list-style: disc; }
.legal_content table { width: 100%; margin-bottom: 20px; border-collapse: collapse; }
.legal_content table th,
.legal_content table td {
  padding: 10px 12px;
  border: 1px solid var(--brand-border);
  text-align: left;
}
.legal_content table th { background: var(--brand-light); font-weight: 600; }


/* §13 — 폼 블록 ============================================================
   테마의 .form_item 에 라벨 개념이 없어 보완한다.
   (문의·가입 2단계처럼 항목이 많은 화면에서 placeholder 만으로는 부족하다) */

.form_item { margin-bottom: 20px; }
.form_item > label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--brand-dark);
}
.form_item .form-control,
.form_item .form-select {
  width: 100%;
  min-height: 54px;
  padding: 12px 18px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background-color: #fff;
}
.form_item textarea.form-control { min-height: 150px; }
.form_item .form-control:focus,
.form_item .form-select:focus {
  outline: none;
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(255, 211, 43, 0.35);
}
.help-block.with-errors { margin-top: 6px; font-size: 13px; color: #c0392b; }

/* 학교 검색 자동완성 목록 */
#school_search_list,
#academy_search_list {
  max-height: 240px;
  margin-top: 6px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: #fff;
}

.contact_map_section { margin-top: 10px; }


/* §14 — 404 / 안내 화면 ==================================================== */

.error_code {
  font-size: 140px;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-dark);
  -webkit-text-stroke: 0;
}
.error_title { margin: 10px 0 14px; font-size: 34px; }
.error_description { margin-bottom: 32px; color: #6b6a5f; }

.help_step_list { margin: 0 0 28px; padding: 0; list-style: none; text-align: left; }
.help_step_list li {
  padding: 16px 0;
  border-bottom: 1px solid var(--brand-border);
}
.help_step_list li:last-child { border-bottom: none; }
.help_step_list li strong { display: block; margin-bottom: 4px; color: var(--brand-dark); }

.faq_contact_note { margin-top: 46px; }
.faq_contact_note p { margin-bottom: 16px; color: #6b6a5f; }

@media (max-width: 575px) { .error_code { font-size: 88px; } .error_title { font-size: 24px; } }


/* §15 — 강의 카드 보완 =====================================================
   ★ 카드 디자인 자체는 테마의 .course_card 를 그대로 쓴다.
     (scss/components/_course.scss) 여기서는 테마에 없는 것만 더한다:
     DB 썸네일 비율 문제와 빈 상태.
     — 예전에 이 자리에서 .course_card 를 새로 정의했다가 테마 디자인을
       통째로 덮어쓰고 있었다. 같은 이름을 다시 만들지 말 것. */

/* 강의 썸네일은 '기본 강의 31강 / 첨삭 문제 / 교재' 처럼 글자가 박힌 홍보
   이미지다. 세로가 길어 그대로 두면 카드마다 높이가 제각각이 된다.
   비율을 고정하되 contain 으로 글자를 자르지 않는다. */
.course_card .item_image > a {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--brand-light);
}
.course_card .item_image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 제목이 한 줄/세 줄로 들쭉날쭉하면 카드 바닥이 어긋난다 */
.course_card { display: flex; flex-direction: column; height: 100%; }
.course_card .item_content { display: flex; flex-direction: column; flex: 1; }
.course_card .item_title { flex: 1; }

/* 할인율 배지. 테마의 item_price 옆에 붙는다. */
.course_card_dc {
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--brand-primary);
  color: var(--brand-dark);
}

.course_empty { padding: 70px 0; color: #6b6a5f; }

.course_list_toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 26px;
  color: #6b6a5f;
}


/* §16 — 강의 상세 보완 ====================================================
   ★ 화면 뼈대는 테마 원본 course_details.html 의 컴포넌트를 그대로 쓴다.
     page_banner / details_section / courses_info_section /
     course_details_section / mentor_details_section / intro_video /
     accordion.style_2 — 전부 테마 CSS 가 담당한다.
     여기에는 '테마에 없는 것'만 둔다. 같은 이름을 새로 만들지 말 것. */

/* 상품 이미지는 세로로 긴 홍보 이미지다(글자가 박혀 있다).
   테마의 page_banner_image 는 가로 사진 기준이라 그대로 두면 잘린다. */
.page_banner_image img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
  border-radius: var(--brand-radius);
  background: #fff;
}

/* 가격 줄 — 정가 취소선 + 판매가 + 할인 배지 */
.page_banner .item_price { display: flex; align-items: baseline; gap: 10px; }
.page_banner .item_price #discount:empty { display: none; }

/* 별점 */
.meta_info_list .rating { color: var(--brand-warning); letter-spacing: 1px; }
.meta_info_list .rating .is_off { color: var(--brand-border); }

.course_enrolled_note { margin-top: 14px; font-size: 14px; color: #6b6a5f; }

/* 상품 소개 HTML 은 DB 에 통째로 들어 있다. 넘치지 않게만 막는다. */
#description img { max-width: 100%; height: auto; }
#description table { max-width: 100%; }

/* 샘플 영상 포스터 */
.intro_video .video_wrap img { width: 100%; display: block; }

/* 후기를 캐러셀이 아니라 격자로 놓을 때, 카드 높이를 맞춘다 */
#product_review_grid .testimonial_item { height: 100%; }


/* §17 — 홈 ================================================================
   ★ 홈은 테마 원본 index.html 의 섹션·컴포넌트를 그대로 쓴다.
     hero_banner / expect_from_course / counter_section / courses_section /
     advertisement_section / courses_info_section / testimonial_section /
     newslatter_section — 전부 테마 CSS 가 담당한다.
     여기에는 '테마에 없는 것'만 둔다.
     (이 자리에 예전에 .home_hero 같은 자체 클래스를 만들어 두었는데,
      테마 디자인을 쓰지 않고 새로 그리는 셈이라 걷어냈다.) */

/* 합격 대학 로고 그리드 — 원본에서 스톡 사진 4장이 들어가던 자리 */
.home_university_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  position: relative;
}
/* 원본은 이 자리에 사진 4장 + 장식 도형이 들어간다. 로고 12칸으로 바꾸면
   도형이 격자를 가로질러 읽기를 방해한다. 그래서 도형은 넣지 않았다. */
.home_university_cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: var(--brand-radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.home_university_cell img {
  max-width: 100%;
  max-height: 100%;
  filter: brightness(0) invert(1);
  opacity: 0.78;
  transition: opacity 0.25s ease;
}
.home_university_cell:hover img { opacity: 1; }

/* 히어로의 합격 카드
   원본은 학생 얼굴 50px 원형을 -15px 씩 겹쳐 놓는다. 얼굴은 작아도 읽히지만
   대학 로고는 169x71 안에 '월계관 + 학교명 + 합격' 이 들어 있어 작으면 못
   읽는다. 그래서 개수를 줄이고 크게, 겹침은 약하게 둔다. */
.satisfied_student.is_logos .students_thumbnail > li:not(:first-child) {
  margin-left: -10px;
}
.satisfied_student.is_logos .students_thumbnail li span {
  width: auto;
  height: 56px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(31, 29, 13, 0.12);
}
.satisfied_student.is_logos .students_thumbnail li span img {
  width: auto;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 575px) {
  .home_university_grid { grid-template-columns: repeat(3, 1fr); }
}


/* §19 — Font Awesome Light 웨이트를 뺀 뒤처리 ==============================
   ★ 왜 뺐나
     테마 패키지는 Font Awesome 5 **Pro** 폰트 4종을 동봉한다. 그중
     fa-light-300.ttf 는 Pro 전용 웨이트다. 전 페이지를 세어 보니 `fal`
     클래스 사용은 0회 — 쓰지도 않는 유료 폰트를 배포하게 되므로 설치할 때
     뺐다(static/collab_assets/fonts/ 에 없다).

   ★ 그래서 생긴 문제
     클래스로는 안 쓰지만 **CSS 가 그 웨이트를 부르는 자리가 하나 있다.**
       scss/elements/_accordion.scss  ->  .accordion.style_2 .accordion-button::after
       content '\f067'(+) / '\f068'(-) 를 font-weight:300 으로 그린다.
     face 가 없으니 브라우저가 대체하지 못하고 두부(□)로 나온다.
     실제로 강의 상세의 아코디언에서 그렇게 보였다.

   ★ 고치는 방법
     Light 를 되살리는 대신 웨이트를 400(Regular, 우리가 가진 face)으로 내린다.
     +/- 글리프는 Regular 에도 있어 모양이 같다.

   ※ 다른 자리들은 400 을 쓰고 있어 문제없다. sidebar 만 500 인데,
     선언된 face 가 400/900 뿐이라 브라우저가 400 으로 맞춘다. */

.accordion.style_2 .accordion-button::after,
.accordion.style_2 .accordion-button:not(.collapsed)::after {
  font-weight: 400;
}

/* 앞으로 다른 자리에서 같은 일이 생기면 여기에 추가할 것.
   (테마를 업데이트해 새 화면을 들여올 때 확인 대상) */

/* 후기를 2열 격자에 놓으면 폭이 좁아 인용부호가 본문에 겹친다.
   (캐러셀에서는 카드가 넓어 문제되지 않는다) */
#product_review_grid .testimonial_content { padding-right: 46px; }

/* 정가(old-price)가 없는 상품이 있다(st_class_info.tution_fee 가 없는 경우).
   빈 <del> 이 남으면 취소선 자리만 뜬다. */
.page_banner .item_price .remove_price:empty { display: none; }


/* §20 — 로그인한 사용자 메뉴 (우상단) =====================================
   테마에는 '로그인한 사용자' 컴포넌트가 없다. 테마 문법을 그대로 따라 만든다.
     · 2px 딥올리브 테두리 + 오프셋 그림자 (테마 카드/버튼의 서명)
     · 반경 8px, 호버 때 -2px 뜨기
     · 높이는 header_btns_group 의 btn_small 과 맞춘다                     */

.user_menu { position: relative; }

.user_menu_btn {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px 0 6px;
  border: 2px solid var(--brand-dark);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.user_menu_btn:hover,
.user_menu_btn[aria-expanded="true"] {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 0 var(--brand-dark);
  background: var(--brand-primary);
}
.user_menu_btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 211, 43, 0.55);
}

.user_menu_avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand-light);
  color: #9a998e;
  font-size: 13px;
}
.user_menu_avatar img { width: 100%; height: 100%; object-fit: cover; }
.user_menu_avatar.is_lg { width: 44px; height: 44px; font-size: 16px; }

.user_menu_name {
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.user_menu_caret { font-size: 13px; opacity: 0.7; transition: transform 0.25s ease; }
.user_menu_btn[aria-expanded="true"] .user_menu_caret { transform: rotate(180deg); }

/* 드롭다운 — 테마의 .dropdown-menu 는 .main_menu 안으로 한정돼 있어
   여기까지 오지 않는다. 같은 모양을 직접 준다. */
.user_menu_list {
  min-width: 236px;
  margin-top: 10px;
  padding: 8px;
  border: 2px solid var(--brand-dark);
  border-radius: var(--brand-radius);
  background: #fff;
  box-shadow: -6px 6px 0 0 var(--brand-dark);
}
.user_menu_head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--brand-border);
}
.user_menu_head strong { display: block; font-size: 15px; color: var(--brand-dark); }
.user_menu_head small  { color: #6b6a5f; }

.user_menu_list > li > a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-body);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.user_menu_list > li > a:hover {
  background: var(--brand-primary);
  color: var(--brand-dark);
}
.user_menu_list > li > a i { width: 16px; text-align: center; opacity: 0.75; }

.user_menu_sep {
  height: 1px;
  margin: 6px 12px;
  background: var(--brand-border);
}

@media (max-width: 575px) {
  .user_menu_name { display: none; }
  .user_menu_btn  { padding: 0 12px 0 6px; }
}