/* ==========================================================================
   donclass 클래스 상세페이지 — 정적 클론
   원본 디자인 토큰 기준으로 재구성 (Tailwind 미사용, 순수 CSS)
   breakpoint: tablet = 768px / wide = 992px
   ========================================================================== */

:root{
  /* color */
  --fg-base:#242424;
  --fg-weak:#787878;
  --fg-disabled:#b2b2b2;
  --fg-inverse:#ffffff;
  --fill-brand:#0052fe;
  --fill-brand-hover:#0047dd;
  --fill-pale:#f1f1f1;
  --fill-disabled:rgba(0,0,0,.05);
  --border-base:#e4e4e4;
  --border-strong:#242424;
  --border-hair:#f0f0f0;
  --bg-page:#f9f9f9;
  --bg-surface:#ffffff;
  --bg-surface-weak:#f9f9f9;

  /* radius */
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;

  /* typography (원본 resolved 값) */
  --t-xxl:28px/39px;      /* title-xxl-normal  w650 */
  --t-xl:22px/31px;       /* title-xl-normal   w650 */
  --t-lg:17.5px/25px;     /* title-lg-normal   w650 */
  --t-md:15.5px/22px;     /* title-md-normal   w650 */
  --t-sm:14px/20px;       /* title-sm          w650/525/400 */
  --b-md:14px/20px;       /* body-md-normal    w400 */
  --b-sm:12.5px/18px;     /* body-sm-normal    w400 */
  --b-xs:11px/15px;       /* body-xs-normal    w400 */

  --font:"Pretendard Variable","Pretendard",-apple-system,BlinkMacSystemFont,
         system-ui,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:24px;
  color:var(--fg-base);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;}
h1,h2,p,figure{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;margin:0;}
svg{flex:none;}

/* ══════════════════════════════════════════════════════════
   헤더
   ══════════════════════════════════════════════════════════ */
.site-header{
  width:100%;
  height:56px;
  background:var(--bg-surface);
  border-bottom:1px solid var(--border-hair);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 24px;
}
.logo{
  display:inline-flex;
  flex:none;
  width:170px;
  max-width:170px;
  max-height:60px;
}
.logo img{width:auto;height:auto;max-width:100%;max-height:100%;}

.gnb{display:none;}
.header-actions{display:none;}

.btn-hamburger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  padding:0;
  border:0;
  border-radius:var(--r-md);
  background:transparent;
  color:var(--fg-base);
  cursor:pointer;
}
.btn-hamburger svg{width:22px;height:22px;}

@media (min-width:768px){
  .site-header{height:88px;}
  .header-inner{padding:0 32px;}
  .gnb{
    display:flex;
    align-items:center;
    flex:1;
    min-width:0;
    padding-left:32px;
    overflow:hidden;
  }
  .gnb a{
    display:inline-flex;
    align-items:center;
    height:40px;
    padding:0 15px;
    border-radius:10px;
    font-size:16px;
    line-height:26px;
    font-weight:700;
    white-space:nowrap;
    transition:background-color .2s;
  }
  .gnb a:hover{background:rgba(0,0,0,.06);}

  .header-actions{display:flex;align-items:center;gap:8px;flex:none;}
  .btn-login,.btn-signup{
    height:36px;
    padding:0 18px;
    border-radius:999px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-login{background:#fff;color:var(--fg-base);border:1px solid var(--border-base);}
  .btn-login:hover{background:#f7f7f7;}
  .btn-signup{background:var(--fill-brand);color:#fff;border:1px solid var(--fill-brand);}
  .btn-signup:hover{background:var(--fill-brand-hover);}

  .btn-hamburger{display:none;}
}
@media (min-width:992px){
  .header-inner{padding:0 80px;}
}

/* ══════════════════════════════════════════════════════════
   레이아웃
   ══════════════════════════════════════════════════════════ */
.page{
  width:100%;
  background:var(--bg-page);
  padding-bottom:72px;           /* 모바일 하단 고정바 자리 */
}
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0;
}
/* grid/flex 자식이 내용물 때문에 늘어나 가로 스크롤이 생기는 것을 방지 */
.col-main-top,.col-side,.col-main-body,
.content-card,.content-body,.sec,.tabbar,.tabbar-inner{min-width:0;}
@media (min-width:768px){
  .page{padding-bottom:0;}
  .layout{
    grid-template-columns:minmax(0,872px) 320px;
    column-gap:24px;
    row-gap:24px;
    padding:32px;
  }
  .col-main-top{grid-column:1;grid-row:1;min-width:0;}
  .col-side{grid-column:2;grid-row:1 / span 2;align-self:stretch;}
  .col-main-body{grid-column:1;grid-row:2;min-width:0;}
}

.card{background:var(--bg-surface);width:100%;}
@media (min-width:768px){
  .card{border-radius:var(--r-xl);}
}

/* ══════════════════════════════════════════════════════════
   상단 : 썸네일 + 제목
   ══════════════════════════════════════════════════════════ */
.course-head{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 0 8px;
  overflow:hidden;
}
.thumb{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:var(--fill-pale);
  overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;}

.course-head-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:0 16px;
}
.course-title{
  font:650 var(--t-md) var(--font);
  color:#000;
  word-break:break-all;
}
.course-meta-row{display:flex;align-items:center;gap:8px;}
.rating{display:flex;align-items:center;gap:2px;flex:1;min-width:0;}
.rating .star{width:14px;height:14px;color:#242424;}
.rating-score{font:525 var(--b-xs) var(--font);color:var(--fg-base);margin-left:2px;}
.rating-count{font:400 var(--b-xs) var(--font);color:var(--fg-weak);}

.head-icon-actions{display:flex;align-items:center;gap:8px;flex:none;}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;
  border:0;border-radius:var(--r-md);
  background:transparent;color:var(--fg-base);cursor:pointer;
}
.icon-btn:hover{background:rgba(0,0,0,.05);}
.icon-btn svg{width:14px;height:14px;}

@media (min-width:768px){
  .course-head{gap:24px;padding:24px;}
  .thumb{border-radius:var(--r-xl);}
  .course-head-body{gap:8px;padding:0;}
  .course-title{font:650 var(--t-xxl) var(--font);}
  .rating .star{width:20px;height:20px;}
  .rating-score{font:650 var(--t-lg) var(--font);}
  .rating-count{font:400 var(--t-sm) var(--font);}
  .icon-btn{width:32px;height:32px;}
  .icon-btn svg{width:16px;height:16px;}
}

/* ══════════════════════════════════════════════════════════
   사이드 : 가격 / 신청
   ══════════════════════════════════════════════════════════ */
.side-card{display:flex;flex-direction:column;overflow:hidden;}
.side-price{
  display:flex;flex-direction:column;gap:8px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-base);
}
.price{font:650 var(--t-xl) var(--font);color:var(--fg-base);}
.price-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  font:400 var(--b-xs) var(--font);color:var(--fg-weak);
}
.meta-divider{display:inline-block;width:1px;height:11px;background:var(--border-base);}

.side-cta{display:none;padding:16px;}

@media (min-width:768px){
  .side-sticky{position:sticky;top:32px;}
  .side-card{
    width:320px;
    border:1px solid var(--border-base);
    border-radius:var(--r-xl);
    box-shadow:0 1px 1px rgba(0,0,0,.02),0 8px 16px -4px rgba(0,0,0,.04),0 24px 32px -8px rgba(0,0,0,.06);
  }
  .side-cta{display:block;}
}

/* 모바일 하단 고정 바 */
.mobile-cta{
  position:fixed;
  inset-inline:0;
  bottom:0;
  z-index:48;
  display:flex;flex-direction:column;gap:8px;
  padding:16px;
  background:var(--bg-surface);
  border-top:1px solid var(--border-base);
}
@media (min-width:768px){ .mobile-cta{display:none;} }

/* ══════════════════════════════════════════════════════════
   버튼
   ══════════════════════════════════════════════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 12px;gap:6px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--fill-brand);
  color:var(--fg-inverse);
  font:525 var(--t-md) var(--font);
  cursor:pointer;
  transition:background-color .15s;
}
.btn-primary:hover{background:var(--fill-brand-hover);}
.btn-primary:active{background:#003fc4;}
.btn-block{width:100%;}

.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 12px;gap:6px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:transparent;color:var(--fg-base);
  font:525 var(--t-md) var(--font);
  cursor:pointer;
}
.btn-ghost:hover{background:rgba(0,0,0,.05);}
.btn-ghost svg{width:18px;height:18px;}
.sec-head .btn-ghost{height:32px;font:525 var(--t-sm) var(--font);}
.sec-head .btn-ghost svg{width:16px;height:16px;}

.btn-disabled{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 12px;
  border:1px solid transparent;border-radius:var(--r-md);
  background:var(--fill-disabled);color:var(--fg-disabled);
  font:525 var(--t-sm) var(--font);
  cursor:not-allowed;
}

/* ══════════════════════════════════════════════════════════
   본문 카드 + 탭
   ══════════════════════════════════════════════════════════ */
.content-card{overflow:clip;}
@media (min-width:768px){
  .content-card{max-width:872px;box-shadow:0 1px 2px 0 rgba(0,0,0,.04);}
}

.tabbar{
  position:sticky;top:0;z-index:10;
  background:var(--bg-surface);
  padding:16px 16px 0;
}
.tabbar-inner{
  position:relative;
  display:flex;
  gap:4px;
  padding-bottom:12px;
  overflow-x:auto;
  scrollbar-width:none;
}
.tabbar-inner::-webkit-scrollbar{display:none;}
.tabbar::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:1px;background:var(--border-base);
}
.tab{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  flex:none;
  height:32px;padding:0 8px;
  border:0;border-radius:var(--r-md);
  background:transparent;
  color:var(--fg-base);
  font:400 var(--t-sm) var(--font);
  white-space:nowrap;
  cursor:pointer;
}
.tab:hover{background:rgba(0,0,0,.04);}
.tab.is-active{font-weight:650;}
.tab.is-active::after{
  content:"";
  position:absolute;top:100%;left:0;
  width:100%;height:2px;
  margin-top:6px;
  background:var(--border-strong);
}
@media (min-width:768px){
  .tabbar{padding:24px 24px 0;}
}

.content-body{
  display:flex;flex-direction:column;gap:40px;
  min-height:280px;
  padding:40px 16px;
}
@media (min-width:768px){
  .content-body{padding:40px 24px;}
}

.sec{scroll-margin-top:96px;}
.sec-divided{border-top:1px solid var(--border-base);padding-top:40px;}
.sec-title{font:650 var(--t-lg) var(--font);color:var(--fg-base);}
.sec-head{display:flex;align-items:center;justify-content:space-between;}

/* ── 상세 이미지 영역 ── */
#sec-intro{display:flex;flex-direction:column;gap:8px;}
.detail-view p{margin:0;font-size:0;line-height:0;}
.detail-view img{width:100%;height:auto;}
.detail-link{display:block;}

/* ── 콘텐츠(커리큘럼) ── */
#sec-curriculum{display:flex;flex-direction:column;gap:16px;}
.summary-box{
  display:flex;flex-direction:column;
  border-radius:var(--r-md);
  background:var(--bg-surface-weak);
  overflow:hidden;
}
.summary-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 16px;
  font:525 var(--t-sm) var(--font);color:var(--fg-base);
}
.summary-head svg{width:16px;height:16px;color:var(--fg-base);}
.summary-body{padding:0 16px 12px;}
.summary-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.summary-row:last-child{margin-bottom:0;}
.summary-row .ico{width:16px;height:16px;color:var(--fg-base);}
.summary-label{min-width:80px;font:400 var(--t-sm) var(--font);color:var(--fg-weak);}
.summary-value{font:400 var(--t-sm) var(--font);color:var(--fg-base);}

.lesson-box{
  display:flex;flex-direction:column;
  border:1px solid var(--border-base);
  border-radius:var(--r-md);
  background:#fff;
  overflow:hidden;
}
.lesson-row{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-height:64px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-hair);
}
.lesson-row:last-child{border-bottom:0;}
.lesson-main{display:flex;align-items:flex-start;gap:8px;}
.lesson-main .ico{width:16px;height:16px;margin-top:2px;color:var(--fg-base);}
.lesson-title{flex:1;min-width:0;font:400 var(--b-md) var(--font);color:var(--fg-base);}
.lesson-duration{flex:none;font:400 var(--b-sm) var(--font);color:var(--fg-weak);}
.lesson-date{font:400 var(--b-sm) var(--font);color:var(--fg-weak);}

/* ── 리뷰 ── */
#sec-review{display:flex;flex-direction:column;gap:24px;}
.review-head{display:flex;flex-direction:column;gap:16px;}
.review-summary{display:flex;align-items:center;gap:8px;}
.review-summary .star{width:20px;height:20px;color:var(--fg-base);}
.review-score{font:650 var(--t-lg) var(--font);color:var(--fg-base);}
.review-count{font:650 var(--t-md) var(--font);color:var(--fg-weak);}

.review-list{display:flex;flex-direction:column;gap:32px;}
.review{display:flex;flex-direction:column;gap:8px;}
.review-meta{display:flex;flex-direction:column;gap:4px;}
.review-name{font:650 var(--t-md) var(--font);color:var(--fg-base);}
.review-sub{display:flex;align-items:center;gap:8px;}
.stars{display:flex;align-items:center;gap:2px;}
.stars svg{width:16px;height:16px;color:var(--fg-base);}
.review-date{font:400 var(--t-sm) var(--font);color:var(--fg-weak);}
.review-text{
  font:400 var(--t-sm) var(--font);color:var(--fg-base);
  white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── 강사 소개 ── */
#sec-teacher{display:flex;flex-direction:column;gap:24px;}
.teacher-wrap{display:flex;flex-wrap:wrap;gap:16px;}
.teacher-card{
  display:flex;align-items:center;
  width:100%;height:100px;
  padding:20px 24px;
  border:1px solid var(--border-base);
  border-radius:var(--r-md);
  background:#fff;
}
@media (min-width:640px){ .teacher-card{width:264px;} }
.teacher-avatar{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;flex:none;
  margin-right:12px;
  border:1px solid var(--border-base);
  border-radius:var(--r-md);
  background:var(--fill-pale);
  overflow:hidden;
}
.teacher-avatar img{width:100%;height:100%;object-fit:cover;}
.teacher-info{flex:1;min-width:0;}
.teacher-name{
  display:block;
  font-size:15.5px;line-height:22px;font-weight:525;
  color:var(--fg-base);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── 질문 답변 ── */
#sec-qna{display:flex;flex-direction:column;gap:16px;}
.qna-form{display:flex;align-items:flex-start;gap:16px;width:100%;}
.qna-avatar{
  width:36px;height:36px;flex:none;
  border-radius:999px;background:var(--fill-pale);
}
.qna-field{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;}
.textarea-wrap{
  display:flex;align-items:center;
  padding:8px 12px;
  border:1px solid var(--border-base);
  border-radius:var(--r-md);
  background:#fff;
}
.textarea-wrap:focus-within{border-color:var(--border-strong);}
.textarea-wrap textarea{
  width:100%;resize:none;border:0;outline:none;background:transparent;
  font:400 var(--b-md) var(--font);color:var(--fg-base);
  padding:4px 0;
}
.qna-submit{display:flex;justify-content:flex-end;}
.qna-empty{
  padding:40px 0;
  text-align:center;
  font:400 var(--t-sm) var(--font);
  color:var(--fg-weak);
}

/* ── 추천 상품 ── */
#sec-recommend{display:flex;flex-direction:column;gap:16px;}
.rec-scroller{
  width:100%;min-width:0;
  padding-bottom:4px;
  overflow-x:auto;
  scrollbar-width:none;
}
.rec-scroller::-webkit-scrollbar{display:none;}
.rec-track{display:flex;gap:16px;}
.rec-card{display:block;width:194px;flex:none;}
.rec-thumb{
  position:relative;
  width:100%;
  aspect-ratio:282 / 160;
  border-radius:var(--r-lg);
  background:#e4e4e4;
  overflow:hidden;
}
.rec-thumb img{width:100%;height:100%;object-fit:cover;}
.rec-title{
  margin-top:8px;
  font:650 var(--t-sm) var(--font);color:var(--fg-base);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ══════════════════════════════════════════════════════════
   푸터
   ══════════════════════════════════════════════════════════ */
.site-footer{
  width:100%;
  padding:48px 0 40px;
  background:#000;
  font-size:12px;line-height:18px;
}
.footer-inner{max-width:1600px;margin:0 auto;padding:0 24px;}
@media (min-width:769px){ .footer-inner{padding:0 32px;} }
@media (min-width:993px){ .footer-inner{padding:0 80px;} }

.footer-row{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:4px;color:rgba(255,255,255,.75);}
.footer-row span{display:inline-flex;max-width:100%;}
.footer-row b{font-weight:600;color:#fff;}
.footer-row em{font-style:normal;color:rgba(255,255,255,.5);}
.footer-row i{font-style:normal;margin:0 8px;color:rgba(255,255,255,.3);}
.footer-row a{color:rgba(255,255,255,.75);margin-left:4px;}
.footer-row a:hover{color:rgba(255,255,255,.95);}

.footer-links{display:flex;gap:16px;margin-top:24px;}
.footer-links a{color:rgba(255,255,255,.75);}
.footer-links a:hover{color:#fff;}

.footer-copy{margin-top:16px;color:rgba(255,255,255,.4);}