/* =========================================================
   아이비클래스 상세페이지 클론 — style.css
   추출 기준: PC 1440x900 / 모바일 390x844 (getComputedStyle)
   ========================================================= */

:root{
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;

  --bg: #0c0a09;             /* 전체 배경 (다크) */
  --fg: #fafaf9;             /* 기본 텍스트 */
  --fg-muted: rgba(250,250,249,.5); /* 보조 텍스트 */
  --border: rgba(255,255,255,.1);

  --primary-bg: #57c7ff;     /* CTA 버튼 배경 (스카이블루) */
  --primary-fg: #422006;     /* CTA 버튼 텍스트 (진한 브라운) */

  --price-red: #e51715;
  --badge-hot-bg: #ff3838;
  --badge-hot-fg: #ffffff;
  --badge-best-bg: #474747;
  --badge-best-fg: #ffffff;

  --countdown-bg: #fee2e2;
  --countdown-fg: #ef4444;

  --fixed-bar-bg: #121212;
  --fixed-bar-border: #262626;

  --container-max: 1200px;
  --sidebar-w: 380px;
  --radius-btn: 8px;
  --radius-card: 12px;
}

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

.fit-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 20px;
}

/* ── 헤더 ───────────────────────────────────────────── */
.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--bg);
  padding:24px 0;
  border-bottom:1px solid transparent;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 20px;
}
.logo img{width:120px;height:auto;}
.main-nav{display:none;}
.main-nav ul{display:flex;align-items:center;gap:40px;}
.main-nav li{position:relative;}
.main-nav a{font-size:16px;color:rgba(250,250,249,.8);transition:color .2s;}
.main-nav a:hover{color:var(--primary-bg);}
.main-nav .submenu{
  display:none;position:absolute;top:100%;left:0;padding-top:12px;
  background:var(--bg);flex-direction:column;gap:8px;min-width:130px;z-index:30;
}
.main-nav li:hover .submenu{display:flex;}
.main-nav .submenu a{font-size:14px;font-weight:500;white-space:nowrap;}

.header-right{display:flex;align-items:center;gap:20px;}
.search-box{display:none;}
.login-link{display:flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap;transition:color .2s;}
.login-link:hover{color:var(--primary-bg);}
.login-link svg{width:20px;height:20px;}

/* ── 레이아웃 ───────────────────────────────────────── */
.page-wrap{max-width:var(--container-max);margin:0 auto;width:100%;}
.content-layout{
  display:flex;
  flex-direction:column-reverse;
  width:100%;
  padding:0 20px;
}
.main-col{width:100%;min-width:0;}
.side-card-wrap{width:100%;min-width:0;}

.video-desktop{display:none;}
.video-mobile{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;}
.video-mobile iframe,.video-desktop iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* 탭 네비게이션 */
.tab-nav{
  position:sticky;
  top:64px;
  z-index:10;
  background:var(--bg);
  display:flex;
  align-items:center;
  padding:4px 0;
  margin-top:16px;
}
.tab-nav a{flex:1;}
.tab-nav span{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  font-size:14px;
  color:var(--fg-muted);
  text-align:center;
  box-shadow:inset 0 -1px 0 #333;
  transition:.2s;
}
.tab-nav a:hover span{color:var(--primary-bg);font-weight:600;box-shadow:inset 0 -2px 0 var(--primary-bg);}

.sec{padding:40px 0;min-width:0;}
.sec h2{font-size:24px;line-height:32px;font-weight:600;padding-bottom:20px;}

.detail-images img{width:100%;height:auto;}

/* 강사소개 아코디언 */
.accordion{border-bottom:1px solid var(--border);}
.accordion-trigger{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:16px 0;
  font-size:14px;
  font-weight:500;
}
.teacher-info{display:flex;align-items:center;gap:12px;}
.avatar{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;}
.avatar img{width:100%;height:100%;object-fit:cover;}
.teacher-name{font-size:18px;line-height:28px;font-weight:600;}
.accordion-trigger .chevron{width:16px;height:16px;transition:transform .2s;}
.accordion-trigger[aria-expanded="true"] .chevron{transform:rotate(180deg);}
.accordion-panel{overflow:hidden;max-height:0;font-size:14px;color:var(--fg-muted);transition:max-height .25s ease;}
.accordion-panel.open{max-height:200px;padding:8px 0 16px;}

.muted{color:var(--fg-muted);line-height:1.75;white-space:pre-line;}

/* ── 사이드 카드 ────────────────────────────────────── */
.side-card{display:flex;flex-direction:column;gap:12px;padding:20px 0;}
.badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.badge{font-size:12px;line-height:15px;font-weight:700;padding:4px 8px;border-radius:4px;}
.badge-hot{background:var(--badge-hot-bg);color:var(--badge-hot-fg);}
.badge-best{background:var(--badge-best-bg);color:var(--badge-best-fg);}

.side-card h1{font-size:20px;line-height:28px;font-weight:700;margin-bottom:8px;}
.teacher-byline{color:var(--fg-muted);font-weight:500;margin-bottom:8px;}

.course-thumb{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-radius:8px;margin-top:8px;}
.course-thumb img{width:100%;height:100%;object-fit:cover;}

.divider{height:1px;background:var(--border);width:100%;border:0;margin:8px 0;}

.price-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.price-label{color:var(--price-red);font-weight:600;font-size:22px;line-height:33px;}
.price-value{font-weight:700;font-size:22px;line-height:33px;}

/* 마감 카운트다운 */
.countdown{display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;}
.countdown .unit{font-size:14px;line-height:20px;font-weight:700;color:var(--countdown-fg);white-space:nowrap;}
.countdown .label{font-size:14px;font-weight:700;color:var(--fg);}
.fixed-countdown{display:flex;align-items:center;justify-content:center;background:rgba(12,10,9,.4);padding:8px;border-radius:6px;margin-bottom:4px;}

.cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:14px;
  border-radius:var(--radius-btn);
  background:var(--primary-bg);
  color:var(--primary-fg);
  font-weight:600;
  font-size:16px;
  box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
  transition:opacity .2s;
}
.cta-btn:hover{opacity:.9;}

/* ── 하단 고정 CTA 바 ───────────────────────────────── */
.fixed-cta-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  padding:12px;
  z-index:20;
  opacity:0;
  transform:translateY(24px);
  pointer-events:none;
  transition:opacity .3s, transform .3s;
}
.fixed-cta-bar.visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.fixed-cta-inner{
  max-width:900px;
  margin:0 auto;
  width:100%;
  background:var(--fixed-bar-bg);
  border-radius:var(--radius-card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:12px;
}
.fixed-price{display:none;align-items:flex-end;gap:12px;flex-shrink:0;}
.fixed-price .price-label{font-size:18px;line-height:28px;}
.fixed-price .price-value{font-size:18px;line-height:23px;color:#fff;}
.fixed-btn-wrap{width:100%;}

/* ── 푸터 ───────────────────────────────────────────── */
footer{background:var(--bg);padding:40px 0;}
.footer-inner{display:flex;flex-direction:column;gap:40px;}
.footer-logo img{width:140px;height:auto;}
.footer-cols{display:flex;flex-direction:column;gap:20px;}
.footer-help{display:flex;flex-direction:column;align-items:flex-start;gap:32px;}
.footer-help-title{font-size:28px;font-weight:700;}
.contact-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:16px 24px;
  border-radius:999px;
  background:var(--primary-bg);
  color:var(--fg);
  transition:opacity .2s;
}
.contact-btn:hover{opacity:.8;}
.contact-btn span{font-weight:600;font-size:16px;}
.contact-btn svg{width:16px;height:16px;}

.footer-meta{display:flex;flex-direction:column;align-items:flex-start;gap:24px;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a:hover{color:var(--primary-bg);text-decoration:underline;}
.company-info{font-size:14px;color:var(--fg-muted);line-height:1.75;white-space:pre-line;}
.company-name{color:rgba(250,250,249,.8);font-weight:500;margin-bottom:4px;}

.footer-bottom{display:flex;flex-direction:column-reverse;gap:16px;justify-content:space-between;}
.copyright{color:var(--fg-muted);}
.socials{display:flex;align-items:center;gap:24px;}
.socials img{width:24px;height:24px;}

/* min-width:0 → 가로 스크롤 방지 (⚠ 함정 대응) */
.content-layout,.main-col,.side-card-wrap,.sec,.detail-images{min-width:0;}

/* =========================================================
   데스크톱 (min-width: 1024px)
   ========================================================= */
@media (min-width:1024px){
  .site-header{padding:24px 0;}
  .logo img{width:172px;}
  .main-nav{display:block;}
  .search-box{
    display:flex;align-items:center;
    width:210px;background:rgba(250,250,249,.1);
    border-radius:2px;position:relative;
  }
  .search-box input{
    flex:1;padding:8px 40px 8px 12px;background:transparent;border:0;outline:0;
    color:var(--fg);font-size:15px;font-weight:300;
  }
  .search-box input::placeholder{color:rgba(250,250,249,.5);}
  .search-box button{position:absolute;right:12px;top:50%;transform:translateY(-50%);}
  .search-box svg{width:18px;height:18px;}
  .login-link{font-size:16px;}

  .content-layout{flex-direction:row;column-gap:40px;padding:0 20px;}
  .main-col{flex:1;padding:0;}
  .side-card-wrap{width:var(--sidebar-w);flex-shrink:0;}

  .video-desktop{display:block;position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;}
  .video-mobile{display:none;}

  .tab-nav{top:87px;}
  .tab-nav span{font-size:16px;padding:12px;}

  .sec{padding:40px 0;}
  .sec h2{font-size:24px;}

  .side-card{position:sticky;top:150px;padding:0;}
  .side-card h1{font-size:24px;line-height:32px;}

  .fixed-price{display:flex;}
  .fixed-cta-inner{padding:10px 10px 10px 30px;border:1px solid var(--fixed-bar-border);}
  .fixed-btn-wrap{width:300px;}

  .countdown .unit{background:var(--countdown-bg);padding:4px 8px;border-radius:6px;}

  footer{padding:80px 0;}
  .footer-cols{flex-direction:row;justify-content:space-between;}
  .footer-help{width:300px;}
  .footer-meta{align-items:flex-end;width:429px;}
  .footer-links{justify-content:flex-end;}
  .company-info{text-align:right;}
  .footer-bottom{flex-direction:row;align-items:center;}
}