:root{
  --bg:#ffffff;
  --card:#ffffff;
  --line:#e5e7eb;
  --text:#111827;
  --muted:#6b7280;

  /* 메인 포인트(너무 자극적이지 않게) */
  --blue:#2563eb;
  --blue-100:#dbeafe;
  --blue-50:#eff6ff;

  --shadow:0 6px 24px rgba(17,24,39,.06);
  --radius:14px;

  --header-offset: 96px; /* 고정헤더 있으면 조절 */
  --index-w: 220px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR","Malgun Gothic",sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.page-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:18px 16px 48px;
  overflow:visible; /*   ✅ 가로 튐 안전장치 */
}

/* =========================
   1) 상단 헤더 (로고 + 링크)
========================= */
.top-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 auto 14px;
  width:min(1200px, 100%);
}
.top-header .top-logo{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  margin:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
.top-header .top-logo img{
  max-width:100%;
  height:auto;
  display:block;
}

.top-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
  white-space:nowrap;
  font-size:16px;
  line-height:1.2;
}
.top-links a{
  color:#1f2937;
  text-decoration:none;
  font-weight:600;
  letter-spacing:-0.2px;
}
.top-links a:hover{ text-decoration:underline; }
.top-links .divider{
  color:#9ca3af;
  user-select:none;
}
.top-links .review-link{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#FFECB5;
  border:1px solid #cfe0ff;
  font-weight:600;
}
.top-links .review-link:hover{
  background:#e3edff;
  text-decoration:none;
}


/* 상단 유틸 버튼 3종(색상 구분) */
.top-links .util-link{
  display:inline-flex;
  align-items:center;
  font-size:13px;          /* 버튼 글자만 더 작게 */
  letter-spacing:-0.3px;   /* 자간 살짝 줄이기 */
  gap:4px;                 /* 아이콘-텍스트 간격 */
  padding:5px 8px;         /* pill 크기 축소 */
  border-radius:999px;
  border:1px solid transparent;
  font-weight:700;
  text-decoration:none;
  line-height:1;
}
.top-links .util-link:hover{
  background:#e9edf3;
  text-decoration:none;
}


/* URL복사: 블루 톤 */
#btnCopyUrl{
  background:#EEF4FF;
  border-color:#CFE0FF;
  color:#1F3A8A;
}
#btnCopyUrl:hover{ background:#E3EDFF; text-decoration:none; }

/* 카톡공유: 카카오 옐로우 톤(톤다운) */
#btnKakaoShare{
  background:#FFF7CC;
  border-color:#F5E38A;
  color:#5A4300;
}
#btnKakaoShare:hover{ background:#FFF1A8; text-decoration:none; }

/* 북마크추가: 민트/그린 톤 */
#btnBookmark{
  background:#ECFDF5;
  border-color:#A7F3D0;
  color:#065F46;
}
#btnBookmark:hover{ background:#D1FAE5; text-decoration:none; }

/* 모바일: 로고 아래로 링크 */
@media (max-width: 768px){
  .top-header{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:12px;
  }
  .top-header .top-logo{
    justify-content:center;
    width:100%;
  }
  .top-links{
    width:100%;
    justify-content:center;
    flex-wrap:wrap;
    white-space:normal;
    font-size:14px;
    gap:6px;
  }
  
  .top-links .divider{ display:none; }
}

/* =========================
   2) 단일 배너(롤링 대체)
========================= */
.top-promo-area{
  width:min(1200px, 100%);
  margin:0 auto 18px;
  padding:0 12px;
  overflow:hidden; /* ✅ 모바일 가로 튐 방지 */
}
.promo-single{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  background:#f3f6fb;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.promo-single img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

/* =========================
   3) 안내 문구(top-head)
========================= */
.top-head{
  width:min(1200px, 100%);
  margin:0 auto 10px;
  /*background:#EAF1FF;         연한 네이비/블루그레이 */
  border:1px solid #C7DAFF;
  color:#0b1f3a;
  border-radius:var(--radius);
  box-shadow: 0 8px 24px rgba(11,31,58,.18);
  padding:10px 12px;
}
.top-head h1,
.top-head h2{
  margin:0;
  font-size:16px;
  border-color:#0b1f3a;
  line-height:1.35;
  font-weight:700;
  color:#000000;
  text-align:center;
}
@media (max-width: 860px){
  .top-head{ margin-bottom:10px; }
  .top-head h2,  .top-head h1, . top-head h3{ 
	font-size:14px; 
	font-weight:700;
	text-align:center; 
	  color:#0b1f3a;
}
}

/* =========================
   4) 레이아웃(PC 인덱스 + 본문)
========================= */
.layout{
  display:grid;
  grid-template-columns: var(--index-w) 1fr;
  gap:18px;
  align-items:start;
}
.content{ min-width:0; }

/* PC 세로 인덱스 */
.side-index{
  position:sticky;
  top:16px;
  align-self:start;
}
.side-index .index-box{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
  max-height:calc(100vh - 32px);
  overflow:auto;
  text-align:center;
}
.side-index h2{
  margin:4px 4px 10px;
  font-size:14px;
  color:#374151;
}
.course-index{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
}
.course-index a{
  display:block;
  padding:8px 9px;
  border-radius:10px;
  color:#1f2937;
  text-decoration:none;
  font-size:13px;
  border:1px solid transparent;
  line-height:1.25;
  word-break:keep-all;
}
.course-index a:hover{
  background:var(--blue-50);
  border-color:var(--blue-100);
}
.course-index a.active{
  background:var(--blue);
  color:#fff;
  font-weight:700;
}

/* 모바일 인덱스(토글형) */
.mobile-index{
  display:none;
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(248,251,255,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid #eef2f7;
}

/* 모바일: 인덱스만 보이고 PC 인덱스 숨김 + 가로 튐 방지 + 분류바로가기 버튼 색상(네이비) */
@media (max-width: 860px){
  .layout{ grid-template-columns:1fr; gap:12px; }
  .side-index{ display:none; }
  .mobile-index{ display:block; margin:0 0 10px; padding:8px 16px; }
  .page-wrap{ padding-top:1px; }
  .mobile-index-panel{ margin:8px 0 0; }

  /* ✅ 분류 바로가기 버튼(모바일) */
  .mobile-index-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:38px;
    padding:8px 12px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
    font-weight:700;

    margin:0;
background:#FDE7C7;
border:1px solid #F2C07D;
color:#7C2D12;
  }

  .mobile-index-toggle .mi-caret{
border-right-color:#7C2D12;
border-bottom-color:#7C2D12;
  }
}


.mi-caret{
  width:10px; height:10px;
  border-right:2px solid #6b7280;
  border-bottom:2px solid #6b7280;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-top:-2px;
}
.mobile-index.open .mi-caret{
  transform: rotate(-135deg);
  margin-top:3px;
}
.mobile-index-panel{ display:none; margin-top:8px; }
.mobile-index.open .mobile-index-panel{ display:block; }

.mobile-index-inner{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.mobile-index-inner a{
  white-space:nowrap;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#1f2937;
  font-size:12px;
  line-height:1;
  text-decoration:none;
}
.mobile-index-inner a.active{
  background:var(--blue);
  color:#fff;
  border-color:var(--blue);
  font-weight:700;
}

/* =========================
   5) 아코디언
========================= */
.category-block{
  scroll-margin-top: var(--header-offset);
  margin-bottom:14px;
  background:transparent;
}
.category-acc{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.category-acc summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 16px;
  font-weight:800;
  font-size:17px;
  background:#f3f7ff;
  border-left: 6px solid var(--blue);
  user-select:none;
}
.category-acc summary::-webkit-details-marker{ display:none; }

.summary-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.summary-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border-radius:999px;
  background:var(--blue-50);
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  padding:0 8px;
}
.summary-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.summary-count{
  color:var(--muted);
  font-size:13px;
  font-weight:500;
}
.summary-caret{
  flex:0 0 auto;
  width:18px;
  height:18px;
  position:relative;
  transition: transform .2s ease;
}
.summary-caret::before,
.summary-caret::after{
  content:"";
  position:absolute;
  top:8px;
  width:10px;
  height:2px;
  background:#4b5563;
  border-radius:2px;
}
.summary-caret::before{ left:0; transform:rotate(45deg); }
.summary-caret::after{ right:0; transform:rotate(-45deg); }

details[open] .summary-caret{ transform:rotate(180deg); }
details[open] summary{
  border-bottom:1px solid var(--line);
  background:#D9E6FF;
}

.category-body{
  padding:10px 12px 12px;
  background:#fff;
}

@media (max-width: 860px){
  .category-acc summary{ padding:13px 14px; font-size:15px; }
  .summary-count{
    display:inline;
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
  }}

/* =========================
   6) 과정 리스트 그리드
========================= */
.course-list{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}
@media (max-width: 1400px){
  .course-list{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px){
  .course-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .course-list{ grid-template-columns: 1fr; }
}

/* =========================
   7) 과정 카드(컴팩트 최종)
   - 폰트 유지, 여백/간격만 축소
========================= */
.course-item{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:7px;
}

/* 제목: 2줄 클램프 유지 */
.course-title-wrap .lectitle{
  font-weight:650;
  font-size:17px;
  color:#111827;
  line-height:1.24;
  word-break:keep-all;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  margin-bottom:4px;
}

/* 메타 */
.course-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 6px;
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 6px;
  border-radius:999px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  color:#4b5563;
  font-size:12px;
}

/* 버튼(가로 2개) */
.course-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px;
  margin-top:6px;
}
.course-actions .btn-link{
  width:auto;
  white-space:nowrap;
}

/* 버튼 공통 */
.btn-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:4px 8px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  color:#111827;
  font-size:12px;
  text-decoration:none;
  box-shadow:none;
}
.btn-link:hover{
  text-decoration:none;
  background:#f9fafb;
}

/* 과정보기(기본) */
.btn-link:not(.primary){
  background:#f9fafb;
  border-color:#e5e7eb;
  color:#374151;
}
.btn-link:not(.primary):hover{
  background:#f3f4f6;
}

/* 수강신청(primary) */
.btn-link.primary{
  background:#4f7fdc;
  border-color:rgba(79,127,220,.55);
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 10px rgba(30,64,175,.18);
}
.btn-link.primary:hover{
  background:#3f6fcd;
  border-color:rgba(63,111,205,.70);
}

/* 모바일: 터치성 약간 보정 */
@media (max-width: 860px){
  .course-item{ padding:8px; }
  .btn-link{ min-height:22px; padding:5px 8px; }
}

/* =========================
   8) 인기과정(cat-popular) 전용
========================= */
#cat-popular .course-meta{ display:none !important; }
#cat-popular .badge-box{ display:none !important; }

/* 인기과정 타이틀 색상 */
#cat-popular .summary-title{ color:#000000; }

/* 인기과정 제목은 흐려지지 않게 */
#cat-popular .lectitle{
  color:#111827 !important;
  font-weight:650 !important;
  opacity:1 !important;
}

/* =========================
   9) 인기 배지 1개(제목 옆)
========================= */
/* 인기 배지: 우상단 고정 + 겹침 방지 */
.category-block:not(#cat-popular) .course-item.is-popular{
  position: relative;
  background:#fff7ed;
  border-color:rgba(245,158,11,.35);
}

.category-block:not(#cat-popular) .course-item.is-popular .course-title-wrap{
  padding-top: 8px;
}

.category-block:not(#cat-popular) .course-item.is-popular .lectitle{
  position: relative;      /* ✅ 배지의 기준점 */
  padding-right: 56px; /* ✅ 배지 공간 확보 */
}

.category-block:not(#cat-popular) .course-item.is-popular .lectitle::after{
  content:"★인기";
  position:absolute;
  top: 0;                 /* ✅ 위로 뜨는 것 방지 */
  right:0;

  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 1px 0 rgba(17,24,39,.06);
  background:#FFF7ED;
  border:1px solid #FED7AA;
  color:#9A3412;
}

/* 인기과정(cat-popular)에서는 배지 숨김 */
#cat-popular .course-item.is-popular .lectitle::after{
  content:none !important;
}

/* =========================
   10) 인덱스 '전체과목' 강조
========================= */
#courseIndex a[data-action="toggle-all"],
#mobileIndexInner a[data-action="toggle-all"]{
  font-weight:800;
  border-color:#cfe0ff;
  background:#eef4ff;
}
#courseIndex a[data-action="toggle-all"]:hover,
#mobileIndexInner a[data-action="toggle-all"]:hover{
  background:#e3edff;
}

.bottom-promo-area{
  width:min(1200px, 100%);
  margin: 18px auto 0;
  padding: 0 12px 8px;
}

#cat-guide .guide-box h3{ margin:0 0 8px; font-size:15px;}
#cat-guide .guide-steps{ margin:0 0 12px 18px; padding:0; }
#cat-guide .guide-faq{ margin:0; padding-left:18px; color:#374151; }
#cat-guide .guide-faq li{ margin:6px 0; }

#cat-guide .category-acc summary,
#cat-guide details[open] summary{
  background:#FEF3C7;
}
/* 하단푸터 삽입 */
#footer{
  width:min(1200px, 100%);
  margin: 22px auto 0;
  padding: 0 12px 24px;
}

/* 푸터를 카드처럼 */
#footer .w-container{
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--card);
  padding: 14px 14px;
}

/* 내부 레이아웃 */
#footer .fbox{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

/* 로고 */
#footer .flogo img{
  width: 160px;
  height:auto;
  display:block;
}

/* 텍스트 */
#footer h6{
  margin:0;
  font-size:12px;
  line-height:1.65;
  color: var(--muted);
  font-weight:400;
}

/* 구분선 느낌(선택) */
#footer .rt.txt{
  flex:1;
  min-width:0;
}

/* 모바일 */
@media (max-width: 860px){
  #footer{ padding: 0 12px 18px; }
  #footer .w-container{ padding: 14px 12px; }
  #footer .fbox{ flex-direction:column; gap:10px; }
  #footer .flogo img{ width: 140px; }
  #footer h6{ font-size:11px; }
}

/* ✅ 아코디언 하단 후기 롤링(5줄) */
.reviews-bottom{
  width:min(1200px, 100%);
  margin: 18px auto 14px;
  padding: 0 12px;
}

.reviews-bottom-head{
  font-weight:900;
  font-size:14px;
  margin: 0 0 8px;
  color:#111827;
}

.review-roller{
  border:1px dashed #e5e7eb;
  border-radius:12px;
  background:#fafafa;
  overflow:hidden;
  padding:8px 10px;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
}

/* 한 줄 높이: JS rowH(28px)와 반드시 동일 */
.review-item{
  display:block;
  height:28px;
  line-height:28px;
  font-size:12px;
  color:#374151;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-decoration:none;
}
.review-item:hover{ text-decoration:underline; }
.review-item b{ color:#111827; }

.review-roller{
  height: calc(28px * 5 + 16px); /* 5줄 + padding */
}
.review-track{ will-change: transform; }

/* =========================
   새창(새탭) 아이콘 표시 ↗
   1) 상단 로그인/회원가입/수강후기
   2) (인기과정 제외) 과정보기/수강신청 버튼
   3) 하단 후기 롤링은 제외
========================= */

/* 1) 상단 링크만 */
.top-links a[target="_blank"]::after{
  content:"↗";
  display:inline-block;
  font-size:11px;
  font-weight:800;
  margin-left:4px;
  opacity:.75;
  transform: translateY(-1px);
}

/* 2) 카테고리(인기과정 제외) 버튼만 */
.category-block:not(#cat-popular) .course-actions a[target="_blank"]::after{
  content:"↗";
  display:inline-block;
  font-size:11px;
  font-weight:800;
  margin-left:4px;
  opacity:.75;
  transform: translateY(-1px);
}

/* 3) 하단 후기 롤링은 아이콘 제거(혹시 다른 규칙이 생겨도 안전) */
.review-item[target="_blank"]::after{
  content:none !important;
}


/* 혹시 JS로 ↗를 넣은 경우가 남아있으면 이중표시 방지용 (옵션) */
#courseContent a[target="_blank"] .ext { display:none; }

/* ✅ 과목 검색 UI */
/* ✅ 과목 검색 UI */
/* ✅ 과목 검색 UI */
/* ✅ 과목 검색 UI */
.course-search{
  width:min(1200px, 100%);
  margin: 0 auto 10px;
  padding: 0 12px;
  display:flex;
  gap:8px;
  align-items:center;
}
.course-search input{
  flex:1;
  min-width:0;
  height:40px;
  padding: 0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  font-size:14px;
  outline:none;
}
.course-search input:focus{
  border-color:#cfe0ff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
#courseSearchClear{
  height:40px;
  padding: 0 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#f9fafb;
  cursor:pointer;
  font-weight:800;
}
#courseSearchClear:hover{ background:#f3f4f6; }

/* 검색 결과 없음 표시용 */
.course-item.is-hidden{ display:none !important; }
.category-block.is-empty{ opacity:.55; }

/* ✅ 검색 결과가 0인 카테고리 블록 숨김 */
.category-block.is-empty { display:none !important; }


/* ✅ 과목 검색 UI */
/* ✅ 과목 검색 UI */
/* ✅ 과목 검색 UI끝*/