@charset "UTF-8";
/* [2026-09-08] 브레이크포인트를 사이트 기준(1100 / 860 / 540)으로 통일했다.
   1000 → 1100(2단→1단 전환. enroll.css 의 .enroll-body 와 같은 지점) / 560 → 540.
   구간만 옮겼고 각 블록 안의 값은 그대로다. */
/* ═══════════════════════════════════════════
   과정 상세 (course_detail.html)
   원본: prototype/design/index.html <style> 블록에서 분리
═══════════════════════════════════════════ */

/* [2026-09-08] 여기 있던 @media 2개(860·540px)를 파일 맨 아래 「반응형」 절로 옮겼다.
   이유는 그 절의 주석 참고 — 특이도가 밀려 한 번도 적용된 적이 없었다. */

/* ═══════════════════════════════════════════
   과정 상세보기 페이지 (scoped)
═══════════════════════════════════════════ */

#page-detail /* ═══ 브레드크럼 ═══ */
.breadcrumb { background: var(--gray-bg); border-bottom: 1px solid var(--gray-line); }

#page-detail .bc-inner { max-width: 1280px; margin: 0 auto; padding: 12px 32px; font-size: 12.5px; color: var(--gray-mid); display: flex; align-items: center; gap: 8px; }

#page-detail .bc-inner a { transition: color var(--t); }

#page-detail .bc-inner a:hover { color: var(--tr-orange); }

#page-detail .bc-inner i { font-size: 9px; }

#page-detail /* ═══ 상단: 과정이미지 + 과정정보 패널 ═══ */
.detail-top { max-width: 1280px; margin: 0 auto; padding: 40px 32px 48px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: start; }

#page-detail .course-visual-col { display: flex; flex-direction: column; min-width: 0; }

#page-detail .dv-course-title {
  font-size: 22px; font-weight: 900; color: var(--tr-graphite);
  line-height: 1.4; margin-bottom: 16px;
}

#page-detail /* 과정 이미지 (단색 썸네일 + TR 도트 패턴) */
.course-visual {
  background: var(--tr-green); border-radius: 12px; overflow: hidden;
  position: relative; min-height: 400px;
  display: flex; flex-direction: column; justify-content: center; padding: 44px;
}

#page-detail .cv-pattern { position: absolute; right: -40px; bottom: -40px; width: 300px; height: 300px; opacity: 0.85; pointer-events: none; }

.cv-tag-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }

.cv-tag { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 100px; letter-spacing: 0.01em; }

.cv-tag-type { background: #fff; color: var(--tr-green); border: 1px solid var(--tr-green); }

.cv-tag-book { background: var(--tr-light-teal); color: #2e8871; }

.cv-tag-hrd { background: var(--tr-orange); color: #fff; }

#page-detail .cv-cat { display: inline-flex; align-self: flex-start; background: var(--tr-orange); color: #fff; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 3px; margin-bottom: 20px; letter-spacing: 0.04em; }

#page-detail .cv-title { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.35; margin-bottom: 14px; position: relative; z-index: 2; }

#page-detail .cv-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.65); position: relative; z-index: 2; }

#page-detail .cv-icon { position: absolute; left: 44px; bottom: 36px; font-size: 44px; color: var(--tr-dark-gold); opacity: 0.5; }

#page-detail /* 정보 패널 */
/* [2026-08-21] 탭바와 같은 이유로 시안의 134px → 고정영역 높이 + 20px 여백. */
.info-panel { border: 1px solid var(--gray-line); border-radius: 12px; padding: 28px; box-shadow: var(--shadow); background: var(--tr-white); position: sticky; top: calc(var(--sticky-top) + 20px); }

#page-detail .bg-best { background: var(--tr-orange); color: #fff; }

#page-detail .bg-refund { background: var(--tr-light-teal); color: #2e8871; }

#page-detail .bg-days { background: var(--tr-graphite); color: #fff; }

#page-detail .ip-title { font-size: 21px; font-weight: 900; line-height: 1.4; margin-bottom: 10px; }

#page-detail .ip-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 20px; }

#page-detail .ip-rating .stars { color: var(--tr-dark-gold); font-weight: 700; }

#page-detail .ip-rating .cnt { color: var(--gray-mid); }

#page-detail .ip-rating a { color: var(--tr-dark-sky); font-weight: 500; font-size: 12.5px; }

#page-detail .ip-table { margin-bottom: 20px; }

#page-detail .ip-row { display: flex; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--gray-line); font-size: 13.5px; }

#page-detail .ip-instructor-detail-btn {
  flex-shrink: 0; margin-left: 10px;
  font-size: 12px; font-weight: 700; color: var(--tr-dark-sky);
  padding: 4px 12px; border: 1px solid var(--tr-dark-sky); border-radius: 100px;
  white-space: nowrap; transition: all .18s;
}

#page-detail .ip-instructor-detail-btn:hover { background: var(--tr-dark-sky); color: #fff; }

#page-detail .ip-price-box { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }

#page-detail .ip-price { font-size: 30px; font-weight: 900; }

/* [2026-08-21] 시안(prototype/design/index.html:1813)에 있던 규칙인데 이관 때 빠져 있었다.
   없으면 「원」이 숫자와 같은 30px/900 으로 나온다. 과세/면세 칩(.cprice-vat-free)은
   시안과 같이 .ip-price 안쪽에 넣어 margin-left·vertical-align 이 그대로 먹게 한다. */
#page-detail .ip-price .won { font-size: 16px; font-weight: 500; }

/* [2026-08-21] 시안 목록 카드의 할인 표기(prototype/design/index.html:20042-20043)를 상세 가격박스에 적용.
   .ip-price-box 가 space-between 이라 정가와 판매가가 좌우로 벌어지던 것을 wrap 으로 묶어 세로로 쌓는다.
   할인율은 카드의 .cprice-rate 와 같은 배색(주황·900)이되 상세의 큰 금액에 맞춰 키웠다. */
#page-detail .ip-price-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

#page-detail .ip-price-rate { font-size: 22px; font-weight: 900; color: var(--tr-orange); margin-right: 8px; }

#page-detail .ip-price-old { font-size: 14px; color: var(--gray-mid); position: relative; margin-right: 8px; font-weight: 300; }

#page-detail .ip-price-old::after { content:''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gray-mid); }

#page-detail .ip-dday { font-size: 12px; font-weight: 700; color: var(--tr-orange); background: var(--tr-light-amber); padding: 5px 12px; border-radius: 100px; }

#page-detail .ip-btns { display: flex; gap: 10px; }

#page-detail .btn-enroll {
  flex: 1; background: var(--tr-orange); color: #fff; height: 54px;
  border-radius: 6px; font-size: 16px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  transition: background var(--t), transform var(--t);
}

#page-detail .btn-enroll:hover { background: #ee5a1a; transform: translateY(-2px); }

/* [2026-09-03] 마감·모집전 과정 — 수강신청 비활성 */

#page-detail .btn-enroll.is-disabled,
#page-detail .sc-btn.is-disabled { background: var(--gray-line); color: var(--gray-mid); cursor: not-allowed; }

#page-detail .btn-enroll.is-disabled:hover,
#page-detail .sc-btn.is-disabled:hover { background: var(--gray-line); transform: none; }

#page-detail .btn-sample-video {
  width: 118px; height: 54px; border: 1.5px solid var(--gray-line); border-radius: 6px;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
  color: var(--tr-graphite); font-size: 15px; font-weight: 700; transition: all var(--t); flex-shrink: 0;
}

#page-detail .btn-sample-video i { color: var(--tr-orange); font-size: 19px; }

#page-detail .btn-sample-video small { font-size: 13.5px; font-weight: 700; }

#page-detail .btn-sample-video:hover { border-color: var(--tr-orange); color: var(--tr-orange); background: var(--tr-light-amber); }

#page-detail .btn-wish {
  width: 54px; height: 54px; border: 1px solid var(--gray-line); border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--gray-mid); font-size: 17px; transition: all var(--t); flex-shrink: 0;
}

#page-detail .btn-wish small { font-size: 9.5px; font-weight: 500; }

/* [2026-09-19] 접수마감 과정. 등록만 막으므로 이미 담아둔 상태(.on)에는 걸리지 않는다 */
#page-detail .btn-wish.is-disabled { background: var(--gray-bg); color: var(--gray-line); cursor: not-allowed; }

#page-detail .ip-sub-btns { display: flex; gap: 8px; margin-top: 10px; }

#page-detail .ip-sub-btns a {
  flex: 1; height: 42px; border: 1px solid var(--gray-line); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; color: var(--tr-graphite);
  transition: border-color var(--t), color var(--t), background var(--t);
}

#page-detail .ip-sub-btns a:hover { border-color: var(--tr-green); color: var(--tr-green); background: var(--tr-light-teal); }

#page-detail .ip-sub-divider { width: 1px; background: var(--gray-line); margin: 4px 0; }

#page-detail .share-wrap { position: relative; flex: 1; }

#page-detail .share-wrap a { width: 100%; height: 42px; }

.share-dropdown {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: 220px;
  background: #fff; border: 1px solid var(--gray-line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(33,34,35,0.15); padding: 6px; z-index: 500;
}

.share-dropdown::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff;
}

.share-opt {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border: none; background: none; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--tr-graphite);
  cursor: pointer; transition: background .15s; text-align: left;
}

.share-opt:hover { background: var(--gray-bg); }

.share-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
}

.share-kakao { background: #FEE500; color: #3C1E1E; }

.share-link  { background: var(--gray-bg); color: var(--tr-graphite); border: 1px solid var(--gray-line); }

.share-mail  { background: var(--tr-light-sky); color: var(--tr-dark-sky); }
/* [2026-09-11] 「다른 앱으로 공유」 — OS 공유 시트를 여는 항목(모바일에서만 보인다) */
.share-native { background: #eae6f7; color: #5b3fbd; }

/* [2026-09-11] 모바일 공유 시트의 어두운 배경. 켜는 건 아래 ≤540 미디어쿼리뿐이다. */
#page-detail .share-dim { display: none; }

#page-detail .ip-note { margin-top: 14px; font-size: 11.5px; color: var(--gray-mid); display: flex; align-items: center; gap: 6px; }

#page-detail .ip-note i { color: var(--tr-dark-teal); }

#page-detail /* ═══ 탭 네비게이션 ═══ */
/* [2026-08-21] top 을 시안의 167px → var(--sticky-top) 으로.
   시안은 유틸바+로고가 계속 떠 있는 전제(38+76+53=167)였는데, 실제 화면은
   스크롤을 내리면 #siteHeaderWrap 이 접히고 대메뉴 줄만 남아서
   탭바가 헤더에 붙지 못하고 100px 넘게 아래에 떠 있었다.
   변수는 common.js 가 대메뉴 줄 높이를 재서 넣어 준다(base.css 에 대체값). */
.tab-bar { border-top: 1px solid var(--gray-line); border-bottom: 1px solid var(--gray-line); background: var(--tr-white); position: sticky; top: var(--sticky-top); z-index: 800; }

#page-detail .tab-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; display: flex; }

#page-detail .tab-btn {
  padding: 17px 26px; font-size: 15px; font-weight: 500; color: var(--gray-mid);
  position: relative; transition: color var(--t);
}

#page-detail .tab-btn::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--tr-orange); transform: scaleX(0); transition: transform var(--t); }

#page-detail .tab-btn:hover { color: var(--tr-graphite); }

#page-detail .tab-btn .cnt { font-size: 12px; color: var(--tr-dark-sky); font-weight: 700; margin-left: 3px; }

#page-detail /* ═══ 탭 컨텐츠 ═══ */
.tab-content { max-width: 1280px; margin: 0 auto; padding: 52px 32px 80px; }

/* [2026-09-22] 원페이지 스크롤 — 섹션을 모두 펼치고 사이를 선으로 구분한다 */
#page-detail .tab-pane + .tab-pane { margin-top: 64px; padding-top: 52px; border-top: 1px solid var(--gray-line); }

#page-detail .pane-title { font-size: 20px; font-weight: 900; margin-bottom: 24px; display: flex; align-items: center; gap: 10px; }
#page-detail .pane-title.pane-title-curiruclum { font-size: 16px; margin-bottom: 10px;}

#page-detail .pane-title::before { content: ''; width: 5px; height: 22px; background: var(--tr-orange); border-radius: 2px; }

#page-detail /* 과정소개 */
.intro-lead { font-size: 16px; line-height: 1.9; margin-bottom: 32px; max-width: 820px; }

#page-detail .intro-lead b { color: var(--tr-orange); }

#page-detail .point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }

#page-detail .point-card { border: 1px solid var(--gray-line); border-radius: 10px; padding: 26px 22px; transition: box-shadow var(--t), transform var(--t); }

#page-detail .point-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }

#page-detail .point-icon { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-bottom: 14px; }

#page-detail .pi-1 { background: var(--tr-light-amber); color: var(--tr-dark-amber); }

#page-detail .pi-2 { background: var(--tr-light-sky); color: var(--tr-dark-sky); }

#page-detail .pi-3 { background: var(--tr-light-teal); color: var(--tr-dark-teal); }

#page-detail .point-card h4 { font-size: 15.5px; font-weight: 700; margin-bottom: 8px; }

#page-detail .point-card p { font-size: 13px; color: var(--gray-mid); font-weight: 300; line-height: 1.75; }

#page-detail .target-box { background: var(--tr-light-gold); border-radius: 10px; padding: 26px 30px; }

#page-detail .target-box h4 { font-size: 15px; font-weight: 900; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }

#page-detail .target-box h4 i { color: var(--tr-dark-amber); }

#page-detail .target-box li { font-size: 13.5px; padding: 4px 0 4px 20px; position: relative; }

#page-detail .target-box li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--tr-dark-amber); }

/* ── 과정커리큘럼 ── */

#page-detail .curr-list { display: flex; flex-direction: column; gap: 14px; }

#page-detail .curr-week {
  border: 1px solid var(--gray-line); border-radius: 10px; overflow: hidden;
}

#page-detail .curr-week-head {
  display: flex; align-items: center; gap: 12px;
  background: var(--gray-bg); padding: 14px 20px;
}

#page-detail .curr-week-num {
  font-size: 11.5px; font-weight: 800; color: #fff;
  background: var(--tr-orange); padding: 3px 11px; border-radius: 100px; flex-shrink: 0;
}

#page-detail .curr-week-title { font-size: 14.5px; font-weight: 700; color: var(--tr-graphite); }

#page-detail .curr-lessons { list-style: none; margin: 0; padding: 0; }

#page-detail .curr-lessons li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-top: 1px solid var(--gray-bg);
  font-size: 13.5px; color: var(--tr-graphite);
}

#page-detail .curr-lessons .cl-num { flex-shrink: 0; width: 42px; color: var(--gray-mid); font-weight: 700; font-size: 12.5px; }

#page-detail .curr-lessons .cl-name { flex: 1; }

#page-detail .curr-lessons .cl-time { flex-shrink: 0; color: var(--gray-mid); font-size: 12.5px; }

#page-detail /* 수강후기 */
.review-summary {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px;
  border: 1px solid var(--gray-line); border-radius: 12px; padding: 30px 36px;
  margin-bottom: 26px; align-items: center;
}

#page-detail .rs-score { text-align: center; }

#page-detail .rs-score .num { font-size: 52px; font-weight: 900; line-height: 1.1; }

#page-detail .rs-score .num small { font-size: 20px; color: var(--gray-mid); font-weight: 400; }

#page-detail .rs-score .stars { color: var(--tr-dark-gold); font-size: 17px; margin: 6px 0 4px; letter-spacing: 2px; }

/* [2026-08-21] 빈 별(.off) 회색 처리. detailStarsHtml() 은 세 군데(요약 박스 .rs-score,
   정보패널 .ip-rating, 후기 카드 .rc-stars)에서 같은 마크업을 내놓는데
   .off 규칙이 .rc-stars(364행) 에만 있어 나머지 둘은 빈 별까지 금색으로 나왔다.
   → 별 5개가 늘 꽉 찬 것처럼 보여 점수를 나타내지 못했다. */
#page-detail .rs-score .stars .off,
#page-detail .ip-rating .stars .off { color: var(--gray-line); }

#page-detail .rs-score .total { font-size: 12.5px; color: var(--gray-mid); }

#page-detail .rs-bars { display: flex; flex-direction: column; gap: 7px; }

#page-detail .rs-bar { display: flex; align-items: center; gap: 12px; font-size: 12px; }

#page-detail .rs-bar .lbl { width: 34px; color: var(--gray-mid); flex-shrink: 0; }

#page-detail .rs-bar .track { flex: 1; height: 8px; background: var(--gray-bg); border-radius: 4px; overflow: hidden; }

/* [2026-08-21] 분포 막대 실연동. 시안 스타일은 그대로 두고 두 가지만 손봤다.
   · fill 을 inline-block 으로 — track 이 <span> 이라 기본 inline 이면 width/height 가 안 먹는다.
   · min-width : 1~2% 짜리 구간이 선으로도 안 보여서 최소 폭(=막대 높이)만큼은 점으로 남긴다.
     0% 구간은 detail.js 가 fill 자체를 그리지 않으므로 이 값의 영향을 받지 않는다. */
#page-detail .rs-bar .fill { display: inline-block; height: 100%; min-width: 8px; background: var(--tr-dark-gold); border-radius: 4px; vertical-align: top; }

#page-detail .rs-bar .pct { width: 36px; text-align: right; color: var(--gray-mid); flex-shrink: 0; }

#page-detail .review-card { border: 1px solid var(--gray-line); border-radius: 10px; padding: 22px 26px; margin-bottom: 12px; transition: box-shadow var(--t); }

#page-detail .review-card:hover { box-shadow: var(--shadow); }

#page-detail .rc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

#page-detail .rc-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; color: #fff; flex-shrink: 0; }

#page-detail .ra-1 { background: var(--tr-dark-teal); }

#page-detail .ra-2 { background: var(--tr-dark-sky); }

#page-detail .ra-3 { background: var(--tr-dark-amber); }

#page-detail .rc-who b { font-size: 13.5px; display: block; }

#page-detail .rc-who span { font-size: 11.5px; color: var(--gray-mid); }

#page-detail .rc-stars { margin-left: auto; color: var(--tr-dark-gold); font-size: 13px; }

#page-detail .rc-stars .off { color: var(--gray-line); }

#page-detail .rc-date { font-size: 11.5px; color: var(--gray-mid); margin-left: 10px; }

#page-detail .rc-body { font-size: 13.5px; line-height: 1.8; }

#page-detail .rc-tag { display: inline-flex; font-size: 11px; font-weight: 700; color: #2e8871; background: var(--tr-light-teal); padding: 3px 10px; border-radius: 100px; margin-bottom: 10px; }

#page-detail /* 하단 고정 수강신청 바 (모바일/스크롤) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  background: var(--tr-white); border-top: 1px solid var(--gray-line);
  box-shadow: 0 -4px 20px rgba(33,34,35,0.08);
  transform: translateY(100%); transition: transform 0.3s ease;
}

#page-detail .sticky-cta.show { transform: translateY(0); }

#page-detail .sc-inner { max-width: 1280px; margin: 0 auto; padding: 12px 32px; display: flex; align-items: center; gap: 18px; }

#page-detail .sc-title { font-size: 14px; font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#page-detail .sc-price { font-size: 18px; font-weight: 900; flex-shrink: 0; }

#page-detail .sc-price small { font-size: 12px; font-weight: 400; }

/* [2026-08-21] 하단 고정 CTA 의 할인 표기. 한 줄 바이므로 인라인으로 늘어놓는다. */
#page-detail .sc-price-old { font-size: 12px; font-weight: 400; color: var(--gray-mid); text-decoration: line-through; margin-right: 6px; }

#page-detail .sc-price-rate { color: var(--tr-orange); margin-right: 6px; }

#page-detail .sc-btn { background: var(--tr-orange); color: #fff; padding: 12px 32px; border-radius: 5px; font-size: 14px; font-weight: 900; flex-shrink: 0; transition: background var(--t); }

#page-detail .sc-btn:hover { background: #ee5a1a; }

/* Responsive
   [2026-08-19] 이 블록은 `#page-detail` 이 @media 앞에 붙어 셀렉터 프렐류드로 먹히는 바람에
   통째로 파싱 폐기되고 있었다(닫는 줄도 `#page-detail }`). 정상 @media 로 복구. */
@media (max-width: 1100px) {
  #page-detail .detail-top { grid-template-columns: 1fr; }
  #page-detail .info-panel { position: static; }
  #page-detail .point-grid { grid-template-columns: 1fr; }
  #page-detail .review-summary { grid-template-columns: 1fr; gap: 22px; }
  #page-detail .tab-inner { overflow-x: auto; }
  #page-detail .tab-btn { white-space: nowrap; padding: 15px 18px; font-size: 14px; }
}

@media (max-width: 540px) {
#page-detail .cv-title { font-size: 24px; }
#page-detail .course-visual { padding: 30px; min-height: 300px; }
#page-detail .sc-title { display: none; }
/* [2026-08-21] 좁은 화면에서는 CTA 바가 넘치지 않게 정가만 감춘다(할인율·판매가는 유지). */
#page-detail .sc-price-old { display: none; }
}

/* 반응형 */

/* ═══ 강사소개 (프로필 카드형) ═══ */

#page-detail .prof-card {
  background: var(--gray-bg); border-radius: 16px; padding: 34px 38px;
}

#page-detail .prof-grid {
  display: grid; grid-template-columns: 220px 1.35fr 1fr; gap: 40px; align-items: start;
}

#page-detail .prof-photo { position: relative; }

#page-detail .prof-photo-inner {
  width: 100%; aspect-ratio: 3/3.6; border-radius: 12px;
  background: var(--tr-green);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

#page-detail .prof-photo-inner i { font-size: 84px; color: var(--tr-dark-gold); }

#page-detail .prof-photo-tag {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%);
  background: var(--tr-orange); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; padding: 5px 14px; border-radius: 100px; white-space: nowrap;
}

#page-detail .prof-name-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }

#page-detail .prof-name { font-size: 26px; font-weight: 900; }

#page-detail .prof-role { font-size: 14px; color: var(--gray-mid); font-weight: 400; }

#page-detail .prof-org {
  display: inline-flex; background: var(--tr-light-teal); color: #2e8871;
  font-size: 12px; font-weight: 700; padding: 5px 13px; border-radius: 5px; margin-bottom: 22px;
}

#page-detail .prof-topic-title { font-size: 14px; font-weight: 900; margin-bottom: 10px; }

#page-detail .prof-topics li {
  font-size: 13.5px; padding: 3.5px 0 3.5px 14px; position: relative; color: var(--tr-graphite); line-height: 1.6;
}

#page-detail .prof-topics li::before { content: '-'; position: absolute; left: 0; color: var(--gray-mid); }

#page-detail .prof-hashtags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

#page-detail .prof-hash {
  background: var(--tr-light-amber); color: var(--tr-dark-amber);
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 100px;
}

#page-detail .prof-career-col {
  background: var(--tr-white); border-radius: 12px; padding: 24px 26px;
  border: 1px solid var(--gray-line);
}

#page-detail .prof-career-title {
  font-size: 15px; font-weight: 900; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 2px solid var(--tr-graphite);
}

#page-detail .prof-careers li {
  font-size: 13px; padding: 5px 0 5px 14px; position: relative; color: var(--tr-graphite); line-height: 1.6;
}

#page-detail .prof-careers li::before {
  content: ''; position: absolute; left: 2px; top: 13px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--tr-orange);
}

#page-detail .prof-quote {
  margin-top: 20px; background: var(--tr-white); border: 1px solid var(--gray-line);
  border-radius: 12px; padding: 20px 28px;
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; font-weight: 500;
}

#page-detail .prof-quote i { color: var(--tr-orange); font-size: 18px; }

/* [2026-08-21] 강사 다중선택 전환 — 강연자 소개 탭에 카드가 여러 장 쌓인다.
   시안은 카드 1장 기준이라 카드 사이 간격이 없었다. 두 번째 카드부터 여백을 준다
   (앞이 한줄소개(.prof-quote)로 끝나는 경우도 같다). */
#page-detail .prof-card + .prof-card,
#page-detail .prof-quote + .prof-card { margin-top: 28px; }

/* [2026-09-27] SITE_00001 — 주요 경력이 .prof-main 안으로 들어가 2열(사진·본문), 본문이 남은 폭을 다 쓴다 */
#page-detail .prof-grid.prof-grid-inline { grid-template-columns: 220px 1fr; }
#page-detail .prof-main .prof-career-col { margin-top: 12px; }

@media (max-width: 1100px) {
#page-detail .prof-grid,
#page-detail .prof-grid.prof-grid-inline { grid-template-columns: 1fr; gap: 28px; }
#page-detail .prof-photo { max-width: 220px; margin: 0 auto; }
}

/* ── 샘플영상보기 모달 ── */

.sv-modal-overlay {
  position: fixed; inset: 0; background: rgba(18,48,21,0.6);
  z-index: 99999; display: none; align-items: center; justify-content: center;
  padding: 24px 16px;
}

.sv-modal-box {
  background: #fff; border-radius: 14px; width: 100%; max-width: 640px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(33,34,35,0.28);
}

.sv-modal-head {
  background: var(--tr-green); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between;
}

.sv-modal-head h3 {
  font-size: 15px; font-weight: 900; color: #fff;
  display: flex; align-items: center; gap: 9px;
}

.sv-modal-head h3 i { color: var(--tr-dark-gold); }

.sv-modal-close {
  color: rgba(255,255,255,0.65); font-size: 18px;
  background: none; border: none; cursor: pointer; transition: color .2s; line-height: 1;
}

.sv-modal-close:hover { color: #fff; }

.sv-modal-body { padding: 24px; }

.sv-video-frame {
  background: var(--tr-graphite); border-radius: 10px;
  aspect-ratio: 16 / 9; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  color: rgba(255,255,255,0.85);
}

.sv-video-play-icon { font-size: 56px; color: var(--tr-dark-gold); }

.sv-video-caption { font-size: 13.5px; font-weight: 500; }

/* [2026-08-29] 샘플영상 실연동. 프레임 안에 들어가는 것은
   유튜브·비메오 iframe / 영상 파일 <video> / 새 창 링크 셋 중 하나다. */

.sv-video-frame { overflow: hidden; }

.sv-video-frame > iframe,
.sv-video-frame > video { width: 100%; height: 100%; border: 0; display: block; }

.sv-video-frame > .sv-video-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; width: 100%; height: 100%;
  color: rgba(255,255,255,0.9); font-size: 13.5px; font-weight: 700;
}

.sv-video-frame > .sv-video-link:hover { color: #fff; }

/* 과정명은 프레임 밖(아래)에 둔다 — 프레임 안은 영상이 채운다 */
.sv-video-course-name {
  display: block; margin-top: 12px;
  font-size: 13.5px; font-weight: 700; color: var(--tr-graphite);
}

.sv-modal-note { margin-top: 14px; font-size: 12.5px; color: var(--gray-mid); line-height: 1.6; }

/* ═══════════════════════════════════════════
   [2026-08-19] 정식 경로 이관(/user/curriculum/info) 시 추가한 규칙
═══════════════════════════════════════════ */

/* 시안에 마크업만 있고 규칙이 프로젝트 어느 CSS 에도 없던 칸.
   .prof-grid 의 가운데 열(이름·소속·소개·해시태그)이다. */
#page-detail .prof-main { min-width: 0; }

/* 강사 자유서술 소개(INSTRUCTOR_PROFILE.INTRODUCTION).
   시안의 .prof-topics 는 「강연주제」 목록용이라 본문 단락은 따로 둔다. */
#page-detail .prof-intro {
  font-size: 13.5px; line-height: 1.75; color: var(--tr-graphite); white-space: normal;
}

/* 강사 프로필 사진이 등록된 경우 — 없으면 기존 아이콘(.prof-photo-inner i)이 그대로 뜬다 */
#page-detail .prof-photo-inner img { width: 100%; height: 100%; object-fit: cover; }

/* 과정 썸네일(THUMB_UPLOAD_PATH + THUMB_STRE_NM). 등록된 과정만 detail.js 가 노출한다.
   미등록 과정은 시안의 도트 패턴 비주얼이 그대로 보인다. */
#page-detail .cv-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.28; z-index: 1;
}

/* [2026-08-21] 썸네일이 있는 과정은 비주얼 위에 글자를 올리지 않는다.
   시안은 썸네일을 opacity 0.28 로 깔고 그 위에 과정명을 얹는 배색이었는데,
   실제 이미지가 들어가니 사진도 글자도 제대로 안 보였다.
   → 썸네일이 있으면(detail.js 가 .has-thumb 를 붙인다) 이미지를 불투명하게 보이고
     오버레이 요소는 전부 감춘다. 썸네일이 없으면 종전대로 도트 패턴 + 글자다.
   과정명과 배지는 비주얼 바깥(#dvCourseTitle · .cv-tag-row)에 따로 있어 사라지지 않는다. */
#page-detail .course-visual.has-thumb .cv-thumb { opacity: 1; }

/* [2026-09-11] 썸네일이 있는 과정은 상자 비율을 16:9 로 고정한다 — 목록 카드
   .cthumb(component.css:195)와 같은 값이고, 업로드 규격도 그쪽 기준이다.
   종전에는 .course-visual 이 min-height(PC 400 / ≤860 200 / ≤540 170)로만 크기를 잡아
   상자 비율이 화면 폭마다 달라졌고, object-fit:cover 가 잘라내는 양도 그때그때 달랐다.
   글자를 올리지 않으므로(.has-thumb 은 오버레이를 전부 감춘다) 패딩도 0 으로 둔다. */
#page-detail .course-visual.has-thumb {
  aspect-ratio: 16 / 9; min-height: 0; padding: 0;
}

/* [2026-09-26] 썸네일이 없는 비주얼도 같은 16:9 로 맞춘다(패딩은 과정명 때문에 유지).
   아래 반응형 min-height(200/170/300)보다 앞서도록 선택자를 한 단계 높였다. */
#page-detail .course-visual-col .course-visual { aspect-ratio: 16 / 9; min-height: 0; }

/* [2026-09-10] 썸네일 좌상단 카테고리 배지 — 목록 카드 .days-badge(component.css:230)와 같은 값.
   .cv-thumb 가 z-index:1 이라 그 위(2)에 올린다. 긴 카테고리명은 말줄임.
   [2026-09-24] 분류가 여러 건이면 나란히 세운다 — 위치는 래퍼가 잡고 배지는 흐름에 맡긴다
   (카드의 .days-badge-row / .days-badge 와 같은 구조). */
#page-detail .cv-cat-badge-row {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; flex-wrap: nowrap; gap: 4px; overflow: hidden;
}

#page-detail .cv-cat-badge {
  background: var(--tr-graphite); color: #fff;
  font-size: 11px; font-weight: 500; padding: 4px 9px; border-radius: 3px;
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* [2026-09-25] 썸네일이 없을 때 비주얼은 배경·패턴·과정명만 남긴다.
   학습유형 칩·수강대상·아이콘은 썸네일 유무와 무관하게 감춘다
   (학습유형·수강대상은 위 태그행과 정보패널에 이미 있어 중복이었다).
   패턴·과정명은 썸네일이 있을 때만 감춘다 — 그때는 이미지가 그 자리를 대신한다. */
#page-detail .cv-cat,
#page-detail .cv-sub,
#page-detail .cv-icon { display: none; }

#page-detail .course-visual.has-thumb .cv-pattern,
#page-detail .course-visual.has-thumb .cv-title { display: none; }

/* 과정소개 · 과정커리큘럼 · 강연자 fallback 이 쓰는 본문 영역.
   CC_DESCRIPTION 은 관리자 에디터가 저장한 HTML 이라 내부 태그를 그대로 살린다. */
#page-detail .course-desc { font-size: 14.5px; line-height: 1.8; color: var(--tr-graphite); }

/* [2026-09-29] 과정소개·교육 특징·커리큘럼·수강후기 본문 Arial. 에디터 인라인 font-family 를 덮으려 !important
   수강후기는 요약·목록만(페이저는 FontAwesome 아이콘이라 제외) */
#page-detail #courseIntro, #page-detail #courseIntro *,
#page-detail #courseFeature, #page-detail #courseFeature *,
#page-detail #courseCurriculum, #page-detail #courseCurriculum *,
#page-detail #reviewScoreBox, #page-detail #reviewScoreBox *,
#page-detail #reviewList, #page-detail #reviewList * { font-family: Arial, sans-serif !important; }

#page-detail .course-desc img { max-width: 100%; height: auto; }

/* [2026-09-29] 교육 특징 블록 — 과정소개 본문과 간격 */
#page-detail #courseFeatureBox { margin-top: 20px; }

/* [2026-09-29] 교과육 특징 이미지 — PC 최대 740px. 작은 원본은 원래 크기 (가운데 정렬은 원복) */
#page-detail #courseFeature img { max-width: min(740px, 100%); height: auto !important; }

#page-detail .course-desc table { max-width: 100%; }

/* [2026-09-26] 이관 커리큘럼 표(table.daylist)는 인라인 테두리가 없어 여기서만 넣는다. */
#page-detail #courseCurriculum table.daylist { border-collapse: collapse; min-width: 80%; max-width: 100%}

#page-detail #courseCurriculum table.daylist th,
#page-detail #courseCurriculum table.daylist td { border: 1px solid var(--gray-line); padding: 6px 10px; }

/* [2026-09-29] 하단 탭 내용 글자 16px 통일(PC·모바일, 탭 제목·평균 평점 숫자 제외). 에디터 인라인 font-size 를 덮으려 !important */
#page-detail .tab-pane *:not(.pane-title, #rsAvgScore, #rsAvgScore *) { font-size: 16px !important; }

#page-detail .course-desc p { margin-bottom: 10px; }

#page-detail .course-desc ul,
#page-detail .course-desc ol { padding-left: 20px; list-style: revert; }

/* [2026-09-23] 과정소개 본문 안의 소제목(「과정 특징」). pane-title 보다 한 단계 작게. */
#page-detail .course-sub-title {
  font-size: 17px; font-weight: 800; color: var(--tr-graphite);
  margin: 34px 0 14px; padding-left: 10px; border-left: 4px solid var(--tr-orange);
}

#page-detail .course-desc-empty { color: var(--gray-mid); font-size: 14px; padding: 30px 0; text-align: center; }

/* [2026-09-11] 「샘플 · 미연동」 배지(.detail-sample) 규칙을 삭제했다.
   마지막까지 남아 있던 대상이 카카오 공유였는데 실연동되면서 이 화면에 쓰는 곳이 없어졌다.
   (샘플영상·오프라인 교육일시/장소·교육장소 모달은 그 전에 차례로 빠졌다)
   다시 필요해지면 규칙째 되살릴 것 — 미연동 UI 를 숨기지 않고 노출하는 방침은 그대로다. */


/* ═══════════════════════════════════════════
   반응형  [2026-09-08]
   원래 이 파일 맨 위(19~38행)에 있던 @media 2개(860·540px)를 여기로 옮겼다.

   미디어쿼리는 특이도를 올려주지 않는데, 이 파일의 기준 규칙은 전부
   `#page-detail .x`(1,1,0) 이고 그 @media 는 `.x`(0,1,0) 로 적혀 있었다.
   그래서 순서와 무관하게 «항상» 덮였다 — `!important` 가 붙은
   `grid-template-columns:1fr` 한 줄만 동작하고 있었다.
   아래로 옮기면서 셀렉터에 `#page-detail` 을 붙여 특이도를 맞춘다.
   값은 옮기기만 하고 바꾸지 않았다.

   ※ 브레이크포인트가 이 파일 안에서 860·540 과 1000·560 으로 갈려 있다(435·444행).
     통일은 시안 컨펌 후 별건으로 다룬다.
═══════════════════════════════════════════ */

@media (max-width: 860px) {
#page-detail .detail-top { grid-template-columns: 1fr !important; gap: 24px; padding: 24px 16px 32px; }
#page-detail .tab-inner { padding: 0 16px; overflow-x: auto; }
#page-detail .tab-content { padding: 32px 16px 60px; }
#page-detail .sc-inner { padding: 12px 16px; }
#page-detail .sticky-cta .sc-inner { padding: 8px 16px; }
}

@media (max-width: 540px) {
#page-detail .detail-top { padding: 16px 12px 24px; }
#page-detail .tab-content { padding: 24px 12px 48px; }
#page-detail .sc-title { font-size: 13px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#page-detail .sc-price { font-size: 15px; }
#page-detail .sticky-cta .sc-inner { gap: 10px; }
}

/* ═══════════════════════════════════════════
   모바일 개선  [2026-09-08]
   시안 : 작업내역/시안/20260908_과정상세_모바일_시안.html
   이 파일의 기준 규칙이 #page-detail 스코프라 여기도 같은 스코프로 쓴다.
═══════════════════════════════════════════ */

@media (max-width: 860px) {
#page-detail .bc-inner { padding: 9px 16px; font-size: 11.5px; }
#page-detail .detail-top { padding: 18px 16px 26px; gap: 20px; }
#page-detail .dv-course-title { font-size: 18px; margin-bottom: 12px; }

/* 과정 이미지 — min-height 400px(≤560 300px)이라 첫 화면을 거의 다 먹는다 */
#page-detail .course-visual { min-height: 200px; padding: 24px; border-radius: 10px; }
#page-detail .cv-title { font-size: 21px; margin-bottom: 10px; }
#page-detail .cv-sub { font-size: 13px; }
#page-detail .cv-cat { margin-bottom: 14px; font-size: 11.5px; padding: 5px 12px; }
#page-detail .cv-icon { left: 24px; bottom: 20px; font-size: 32px; }

#page-detail .info-panel { padding: 18px 16px; border-radius: 10px; box-shadow: none; }
#page-detail .ip-row { padding: 9px 2px; font-size: 13px; }
#page-detail .ip-price { font-size: 25px; }
#page-detail .ip-price-rate { font-size: 19px; }

/* 버튼 줄 — 수강신청(flex:1) + 샘플영상 118px + 찜 54 가 한 줄이면 375px 에서 수강신청이 찌그러진다.
   [2026-09-11] 첫 줄 = 수강신청 + 찜(50×50), 샘플영상은 둘째 줄 전폭.
   샘플영상 없는 과정은 detail.js 가 버튼을 숨겨 첫 줄만 남는다(전엔 찜 혼자 둘째 줄 전폭이었다). */
#page-detail .ip-btns { flex-wrap: wrap; gap: 8px; }
#page-detail .btn-enroll { flex: 1 1 0; height: 50px; font-size: 15.5px; order: -1; }
#page-detail .btn-sample-video { flex: 1 0 100%; width: auto; height: 44px; font-size: 13.5px; }
#page-detail .btn-sample-video i { font-size: 16px; }
#page-detail .btn-wish { flex: 0 0 50px; height: 50px; order: -1; font-size: 15px; }
#page-detail .ip-sub-btns { margin-top: 8px; }
#page-detail .ip-sub-btns a { height: 40px; font-size: 12px; }

/* 탭바 — --sticky-top 은 PC 대메뉴 줄 높이다. 모바일은 그 대메뉴 줄이 없고(.gnb-menu display:none),
   스크롤을 내리면 헤더가 통째로 숨는다(common.js header-hidden). 그래서 56px 를 띄우면
   그 자리에 본문이 비쳐 탭바가 허공에 뜬 것처럼 보인다 — 화면 맨 위에 붙인다.
   탭바가 실제로 붙는 지점은 한참 아래라 헤더가 보이는 최상단에서는 겹치지 않는다. [2026-09-23] */
#page-detail .tab-bar { top: 0; }
#page-detail .tab-inner { padding: 0 8px; scrollbar-width: none; }
#page-detail .tab-inner::-webkit-scrollbar { display: none; }
#page-detail .tab-btn { padding: 13px 14px; font-size: 13.5px; }
#page-detail .tab-content { padding: 24px 16px 96px; }
#page-detail .pane-title { font-size: 18px; margin-bottom: 16px; }
#page-detail .tab-pane + .tab-pane { margin-top: 36px; padding-top: 28px; }
#page-detail .pane-title::before { height: 18px; width: 4px; }
#page-detail .course-desc { font-size: 13.5px; line-height: 1.75; }
#page-detail .course-sub-title { font-size: 15px; margin: 26px 0 12px; }
/* 본문은 관리자 에디터 HTML 이라 표가 화면 밖으로 나가 페이지째 가로로 밀린다.
   max-width:100% 만으로는 못 막는다. */
#page-detail .course-desc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

#page-detail .review-summary { padding: 18px 16px; gap: 16px; margin-bottom: 16px; }
#page-detail .rs-score .num { font-size: 38px; }
#page-detail .review-card { padding: 16px 14px; border-radius: 8px; }
#page-detail .rc-avatar { width: 34px; height: 34px; font-size: 13px; }
#page-detail .rc-body { font-size: 13px; }

/* 하단 CTA — 제목을 감춘 자리를 전폭 버튼이 쓴다 */
#page-detail .sc-inner { padding: 9px 12px; gap: 10px; }
#page-detail .sc-title { display: none; }
#page-detail .sc-price { font-size: 17px; }
#page-detail .sc-btn { flex: 1; text-align: center; padding: 13px 0; font-size: 15px; }
}

@media (max-width: 540px) {
#page-detail .detail-top { padding: 14px 12px 22px; }
#page-detail .tab-content { padding: 20px 12px 92px; }
#page-detail .dv-course-title { font-size: 17px; }
#page-detail .cv-title { font-size: 19px; }
#page-detail .course-visual { min-height: 170px; padding: 20px; }
#page-detail .ip-price { font-size: 23px; }
/* ≤860 에서 top:0 으로 붙였으므로 여기서 헤더 높이를 다시 잴 필요가 없다 [2026-09-23] */
}

/* ── 과정 공유 드롭다운 — 모바일 하단 시트  [2026-09-11] ──
   좁은 화면에서 220px 팝오버는 항목이 얕아 누르기 어렵다. 같은 #shareDropdown 을
   CSS 로만 바닥 고정 시트로 바꾼다 — 마크업·JS 는 PC 와 완전히 같다.
   .open 을 붙이고 떼는 것도 common.js 의 기존 핸들러가 그대로 처리한다. */
@media (max-width: 540px) {
#page-detail .share-wrap { position: static; }

#page-detail .share-dropdown {
  position: fixed; left: 0; right: 0; bottom: 0; top: auto;
  width: auto; max-width: none; transform: none;
  border: none; border-radius: 16px 16px 0 0;
  padding: 8px 10px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 30px rgba(33, 34, 35, 0.2);
  z-index: 1100;   /* 하단 고정 CTA(#stickyCta) 위 */
}

/* 팝오버 꼬리(::after)를 시트 손잡이로 바꿔 쓴다 — 요소를 새로 만들지 않는다 */
#page-detail .share-dropdown::after {
  top: 6px; bottom: auto; border: none;
  width: 38px; height: 4px; border-radius: 2px; background: var(--gray-line);
}

/* 어두운 배경 — 시트가 열렸을 때만. 시트(1100)보다 한 단 아래에 깐다.
   시트의 ::before 로 두면 음수 z-index 가상요소가 부모 배경 위에 그려져
   시트의 흰 바탕까지 회색이 된다. 그래서 형제 요소로 분리했다. */
#page-detail .share-dropdown.open + .share-dim {
  display: block; position: fixed; inset: 0; z-index: 1090;
  background: rgba(33, 34, 35, 0.45);
}

/* 손잡이 자리만큼 첫 항목을 내린다 */
#page-detail .share-dropdown .share-opt:first-of-type { margin-top: 10px; }

#page-detail .share-dropdown .share-opt { font-size: 14px; padding: 12px 10px; }
}