@charset "UTF-8";
/* ═══════════════════════════════════════════
   메인 페이지 (main.html)
   원본: prototype/design/index.html <style> 블록에서 분리
═══════════════════════════════════════════ */

/* 이벤트 강의 섹션 */

.sec-popular { background: #e3f1fd }

/* ═══════════════════════════════════════════
   HERO SLIDER (반자동 롤링 배너) — 이미지 배너
   · 2026-09-04 텍스트 시안 → 이미지로 교체.
     제작 규격은 작업내역/20260904_메인배너_이미지_사이즈가이드.md.
   · PC 는 높이 고정(--hero-h) + cover — 폭이 좁으면 좌우가 잘린다(의도된 동작).
   · 모바일은 높이를 고정하지 않고 이미지 비율(aspect-ratio)을 따라간다.
     고정 높이일 때 넓은 폭에서 상하가 절반 넘게 잘리고, 그걸 피하려 안전영역을 좁히면
     정작 폰에서 위아래가 휑해지는 문제가 있어서다. max-height 는 태블릿 상한.
   · .hc-seg.active 는 component.css 에 있다. 여기서 찾지 말 것.
═══════════════════════════════════════════ */

.hero {
  --hero-h: 430px;            /* PC 슬롯 높이 (컨트롤바 42px 제외) — 교체 전 실측 431(1280폭)을 제작 편의상 430 으로 */
  position: relative; overflow: hidden;
  background: #000;
}

/* 슬라이드 트랙 */

.hero-track {
  display: flex;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}

/* 개별 슬라이드 — PC 는 높이 고정 슬롯 */

.hero-slide {
  min-width: 100%; position: relative; overflow: hidden;
  height: var(--hero-h);
}

/* 트랙이 가장 높은 슬라이드에 맞춰 늘어나지 않게 (모바일 aspect-ratio 대비) */

.hero-track { align-items: flex-start; }

.hero-slide-link { display: block; width: 100%; height: 100%; }

.hero-slide picture { display: block; width: 100%; height: 100%; }

.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  user-select: none; -webkit-user-drag: none;
}

/* ── 하단 컨트롤 바 ── */

.hero-ctrl-bar {
  position: relative; z-index: 10;
  background: rgba(0,0,0,0.72);
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center;
  padding: 0 32px; height: 42px; gap: 14px;
}

.hc-counter {
  font-size: 13px; font-weight: 700; color: #fff;
  white-space: nowrap; min-width: 38px;
}

.hc-counter span { color: rgba(255,255,255,0.4); font-weight: 400; }

/* 진도바 — 현재 슬라이드 위치 표시 (인디케이터 방식) */

.hc-progress-track {
  flex: 1; height: 3px;
  display: flex; align-items: center; gap: 4px;
  cursor: pointer;
}

.hc-seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.25);
  transition: background 0.3s ease;
}

/* 자동재생 버튼 */

.hc-play-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t), background var(--t);
  flex-shrink: 0;
}

.hc-play-btn:hover { border-color: var(--tr-orange); background: rgba(214,64,0,0.2); }

/* 이전/다음 버튼 */

.hc-nav-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t), background var(--t);
  flex-shrink: 0;
}

.hc-nav-btn:hover { border-color: var(--tr-orange); background: rgba(214,64,0,0.2); }

@media(max-width:860px) {
/* 높이 고정을 풀고 이미지 비율을 따라간다 — 폰 구간(~508px)에서는 잘림이 0 이다.
   508px 를 넘으면 max-height 가 걸려 그때부터 상하가 잘린다(태블릿·좁은 PC 창). */
.hero-slide { height: auto; aspect-ratio: 780 / 860; max-height: 560px; }
.hero-ctrl-bar { padding: 0 16px; }
}

/* ═══════════════════════════════════════════
   공지 티커
═══════════════════════════════════════════ */

.notice-ticker {
  background: var(--tr-white); border-bottom: 1px solid var(--gray-line);
}

.ticker-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; height: 50px; gap: 18px;
}

.ticker-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--tr-orange);
  flex-shrink: 0; letter-spacing: 0.04em;
}

.ticker-viewport { flex: 1; overflow: hidden; height: 50px; position: relative; }

.ticker-list { position: absolute; width: 100%; transition: transform 0.5s ease; }

.ticker-item {
  height: 50px; display: flex; align-items: center; gap: 12px;
  font-size: 13.5px; color: var(--tr-graphite);
}

.ticker-item .date { font-size: 12px; color: var(--gray-mid); flex-shrink: 0; }

/* ── 섹션 슬라이더 컨트롤 (더보기 + 화살표) ── */

.sec-ctrl {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

.sec-ctrl-more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--tr-graphite);
  white-space: nowrap;
  border: 1.5px solid var(--gray-line); border-radius: 100px;
  padding: 8px 18px;
  transition: border-color var(--t), color var(--t), background var(--t);
}

.sec-ctrl-more i { font-size: 11px; transition: transform var(--t); }

.sec-ctrl-more:hover { border-color: var(--tr-orange); color: var(--tr-orange); background: var(--tr-light-amber); }

.sec-ctrl-more:hover i { transform: translateX(2px); }

.sec-ctrl-arrows { display: flex; gap: 6px; }

.sec-arrow-btn {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--gray-line);
  background: var(--tr-white); color: var(--tr-graphite);
  font-size: 12px; display: flex; align-items: center; justify-content: center;
  transition: border-color var(--t), color var(--t), background var(--t);
  cursor: pointer;
}

.sec-arrow-btn:hover { border-color: var(--tr-orange); color: var(--tr-orange); }

.sec-arrow-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--gray-line); color: var(--gray-mid); }

/* ── 슬라이더 트랙 ── */

/* [2026-08-18] 카드 hover 잘림 수정.
   .ccard:hover 가 translateY(-6px) 로 떠오르고 box-shadow(0 12px 32px)가 붙는데,
   이 래퍼는 좌우 슬라이드를 감추려고 overflow:hidden 이면서 세로 여백이 0이라
   떠오른 카드의 윗변과 아래 그림자가 잘려 나갔다.
   (마감 카드 .is-closed 는 hover 시 transform·shadow 가 없어 멀쩡했다)

   세로 패딩으로 여백을 주고 — overflow 클리핑은 padding box 기준이라 이만큼 여유가 생긴다 —
   같은 크기의 음수 margin 으로 상쇄해 레이아웃은 그대로 유지한다.
   좌우는 건드리지 않아 슬라이드 감춤은 그대로다. */

.course-slider-wrap {
  overflow: hidden;
  margin-top: 12px; padding: 12px 0 28px; margin-bottom: -28px;
}

/* 섹션 배경 구분 */

.upcoming-bell-notice {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--gray-mid); font-weight: 500;
  white-space: nowrap;
}

.sec-upcoming { background: var(--tr-white); }

/* 개설 예정: 알림 신청 강조 */

.upcoming-note {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tr-light-sky); color: var(--tr-dark-sky);
  font-size: 12.5px; font-weight: 500; padding: 9px 16px; border-radius: 4px;
  margin: 4px 0 0 48px;
}

/* ═══════════════════════════════════════════
   미국변호사 프로모 밴드 (Green 단색)
═══════════════════════════════════════════ */

.promo-band { background: var(--promo-bg); padding: 56px 0; position: relative; overflow: hidden; }

/* ── 프로모 밴드 슬라이더 ── */

.promo-slider { position: relative; overflow: hidden; }

.promo-track { display: flex; align-items: stretch; transition: transform 0.45s cubic-bezier(0.4,0,0.2,1); }

.promo-track .promo-band { flex: 0 0 100%; width: 100%; }

.promo-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--gray-line);
  background: var(--gray-bg); color: var(--gray-mid); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--t), border-color var(--t);
}

.promo-arrow:hover { background: #fff; color: var(--tr-graphite); border-color: var(--gray-mid); }
.promo-arrow.prev { left: 20px; }
.promo-arrow.next { right: 20px; }

.promo-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
  display: flex; justify-content: center; gap: 8px;
}

.promo-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(33,34,35,0.25); cursor: pointer; transition: background var(--t), width var(--t);
}

.promo-dots button.active { width: 20px; border-radius: 4px; background: var(--tr-graphite); }

/* 슬라이드가 1장뿐이면 컨트롤을 감춘다 */
.promo-slider.is-single .promo-arrow,
.promo-slider.is-single .promo-dots { display: none; }

.promo-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 36px;
  position: relative; z-index: 2;
}

/* [2026-09-10] 밝은 배경 이미지에 맞춰 텍스트를 그래파이트/포인트색으로 전환.
   포인트색(--promo-accent)만 밴드별로 바꾼다 — 1번 오렌지, 2번 틸 */

/* 밴드별로 바뀌는 건 배경색·포인트색·CTA 뒤 데코 이미지 셋뿐 */
.promo-band {
  --promo-bg: var(--tr-light-amber);
  --promo-accent: var(--tr-orange);
  --promo-deco: url('/static/user/img/main-banner/promo-banner/r_waypt_11_RGB_orange.png');
}
.promo-band.promo-teal {
  --promo-bg: var(--tr-light-teal);
  --promo-accent: #4DB299;
  --promo-deco: url('/static/user/img/main-banner/promo-banner/r_waypt_11_RGB_DarkTeal.png');
}

.promo-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--promo-accent); border-radius: 100px; padding: 6px 14px;
  letter-spacing: 0.1em; margin-bottom: 14px;
}

.promo-title { font-size: 30px; font-weight: 900; color: var(--tr-graphite); line-height: 1.35; margin-bottom: 10px; }

/* component.css 의 dark-teal 을 덮는다 (로드 순서 component -> page/main) */
.promo-title .hl { color: var(--promo-accent); }

.promo-desc { font-size: 14px; font-weight: 400; color: var(--tr-graphite); }

.promo-cta {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--promo-accent); border: 1px solid var(--promo-accent);
  padding: 16px 30px; border-radius: 4px; font-size: 15px; font-weight: 500;
  transition: background var(--t), color var(--t), transform var(--t);
}

.promo-cta:hover { background: var(--promo-accent); color: #fff; transform: translateY(-2px); }

/* [2026-09-10] CTA 를 중심으로 도는 데코 — 버튼에 붙여두면 창 폭이 줄어 버튼이 움직여도 따라온다.
   .promo-inner 가 z-index:2 로 쌓임맥락을 만들어서, z-index:-1 은 밴드 배경 위·버튼 아래에 그려진다.
   크기는 vw 기준 clamp 라 창 크기에 비례하고, 넘치는 부분은 .promo-band 의 overflow:hidden 이 자른다 */
.promo-cta::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  transform: translate(-50%, -50%);
  width: clamp(440px, 48vw, 720px); aspect-ratio: 1;   /* 가운데 빈 영역이 버튼보다 커야 버튼 주위에 여백이 생긴다 */
  background: var(--promo-deco) center / contain no-repeat;
  opacity: 0.85; pointer-events: none;
}

/* ═══════════════════════════════════════════
   공지사항 + 이용후기 (2단)
═══════════════════════════════════════════ */

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.info-box { border: 1px solid var(--gray-line); border-radius: 8px; overflow: hidden; background: var(--tr-white); }

.info-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px; border-bottom: 1px solid var(--gray-line);
}

.info-head.head-review { background: var(--tr-light-teal); border-bottom-color: transparent; }

.info-head h3 { font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 9px; }

.info-head h3 i { color: var(--tr-orange); font-size: 14px; }

.info-head.head-review h3 i { color: var(--tr-dark-teal); }

.info-more { font-size: 12px; color: var(--gray-mid); transition: color var(--t); }

.info-more:hover { color: var(--tr-orange); }

.notice-list li { border-bottom: 1px solid var(--gray-line); }

.notice-list li:last-child { border-bottom: none; }

.notice-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 22px; font-size: 13.5px; transition: background var(--t);
}

.notice-list a:hover { background: var(--tr-light-amber); }

.notice-list .nl-title { display: flex; align-items: center; gap: 9px; min-width: 0; }

.notice-list .nl-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag-event { color: var(--tr-dark-sky); border-color: var(--tr-dark-sky); }

.notice-list .nl-date { font-size: 12px; color: var(--gray-mid); flex-shrink: 0; }

/* [2026-08-23] 공지 0건 — 이 li 는 a 가 없어 위 .notice-list a 규칙이 안 먹는다 */
.notice-list .nl-empty { padding: 22px; font-size: 13px; color: var(--gray-mid); text-align: center; }

/* [2026-08-23] 실데이터 연동으로 후기 한 줄이 <a>(과정 상세로 이동)가 됐다.
   공지사항(.notice-list)과 같이 정렬·여백을 li 에서 a 로 옮긴다.
   시안은 렌더 JS 가 <a> 에 인라인 style 로 같은 값을 박아 넣고 있었다. */
.review-list li { border-bottom: 1px solid var(--gray-line); font-size: 13.5px; }

.review-list a {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  padding: 13px 22px; color: inherit; transition: background var(--t);
}

.review-list a:hover { background: var(--tr-light-amber); }

.review-list .rv-empty { padding: 22px; font-size: 13px; color: var(--gray-mid); text-align: center; }

.review-list li:last-child { border-bottom: none; }

.review-list .rv-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.review-list .rv-course { color: var(--tr-graphite); font-weight: 700; }

.review-list .rv-star { color: var(--tr-dark-gold); font-size: 11px; flex-shrink: 0; }

/* [2026-08-23] 빈 별. 이게 없으면 빈 자리까지 금색이라 전부 5점처럼 보인다
   (과정 상세 detail.css 344행에 같은 함정이 적혀 있다) */
.review-list .rv-star .off { color: var(--gray-line); }

.review-list .rv-who { font-size: 12px; color: var(--gray-mid); flex-shrink: 0; }

@media (max-width: 1100px) {
.course-slider-wrap { overflow: hidden; }
}

@media (max-width: 860px) {
/* 공지/후기 — [2026-09-07] gap:0 이라 두 박스가 맞붙어 한 덩어리로 보였다 */
.info-grid { grid-template-columns: 1fr; gap: 14px; }
/* 프로모 배너 — [2026-09-07] 화살표 자리로 두던 좌우 56px 여백이 폰에서 본문 폭을 263px 로 만들었다 */
.promo-band { padding: 32px 0; }
.promo-inner { flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 20px; }
.promo-eyebrow { font-size: 11px; padding: 5px 12px; margin-bottom: 10px; }
.promo-title { font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.promo-desc { font-size: 13px; line-height: 1.6; }
.promo-cta { width: 100%; justify-content: center; padding: 13px 20px; font-size: 14px; }
/* 모바일은 CTA 가 full-width 라 데코가 본문을 덮는다 — 배경색만 남긴다 */
.promo-cta::before { display: none; }
.promo-arrow { width: 34px; height: 34px; font-size: 12px; }
.promo-arrow.prev { left: 8px; }
.promo-arrow.next { right: 8px; }
.promo-dots { bottom: 12px; }

/* [2026-09-07] 강의 카드 섹션 — transform 슬라이더 대신 네이티브 가로 스크롤 + scroll-snap.
   폰에서 카드가 한 장씩 꽉 차고 화살표로만 넘길 수 있던 것을 손가락 스와이프로 바꾼다.
   카드 폭은 래퍼 폭 기준 계산이라 CSS 만으로 성립한다(component.css ≤860/≤540).
   ≤1100 의 .course-slider-wrap { overflow:hidden } 보다 뒤라 여기서 덮인다. */
.course-slider-wrap {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.course-slider-wrap::-webkit-scrollbar { display: none; }
.course-grid { transform: none !important; transition: none; }
.course-grid .ccard { scroll-snap-align: start; }
/* 스와이프로 넘기므로 화살표는 감춘다 */
.sec-ctrl-arrows { display: none; }

/* [2026-09-07] 섹션 머리 — component.css ≤860 이 .sec-head 를 세로로 쌓아 「더보기」가
   제목 아래로 떨어져 있었다. 메인에서는 제목(좌) / 더보기(우) 한 줄로 되돌린다.
   더보기도 알약 테두리 버튼 대신 텍스트 링크로 — 폭이 좁아 버튼이 제목을 밀어낸다. */
.sec-head { flex-direction: row; align-items: center; gap: 8px; }
.sec-title { font-size: 19px; }
.sec-ctrl-more {
  border: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--gray-mid);
}
.sec-ctrl-more:hover { background: none; border-color: transparent; }
/* [2026-10-01] 카테고리 칩 — 숨김 대신 한 줄 가로 스크롤(교육신청 목록 #listTabs 와 같은 방식).
   UI 만 바꾼다. 공유 클래스(.filter-tabs/.ftab)는 두고 #newCateTabs 에만 건다.
   음수 마진은 .section-inner 패딩(≤860 16px / ≤540 12px) 상쇄용.
   시안 : 작업내역/시안/20261001_메인_카테고리칩_모바일가로스크롤_시안.html */
#newCateTabs {
  flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 14px -16px 16px; padding: 0 16px;
  /* 오른쪽 끝을 흐려 칩이 더 있음을 알린다 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
#newCateTabs::-webkit-scrollbar { display: none; }
#newCateTabs .ftab { flex: 0 0 auto; white-space: nowrap; padding: 6px 14px; font-size: 12px; }
}

@media (max-width: 540px) {
/* 공지·후기 — [2026-09-07] padding:10px 0 이라 글자가 박스 테두리에 붙어 있었다 */
.nl-date, .rv-star { display: none; }
.notice-list a, .review-list a { padding: 11px 14px; }
.info-head { padding: 13px 14px; }
.info-head h3 { font-size: 15px; }
/* 프로모 — 밴드가 2장뿐이라 폰에서는 점만 남기고 화살표는 감춘다 */
.promo-arrow { display: none; }
.promo-inner { padding: 0 16px; }
/* 카드 스와이프 간격 (폭은 component.css 가 이 값에 맞춰 계산한다) */
.course-grid { gap: 12px; }
/* [2026-09-25] 강연자 줄은 한 줄 고정, 넘치면 … (flex 는 ellipsis 가 안 먹어 block 으로) */
.course-grid .cmeta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 카테고리 칩 — .section-inner 패딩 12px 에 맞춤 */
#newCateTabs { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
}