@charset "utf-8";
/* ==========================================================================
   한평생 직업훈련 — Design System
   퍼블리싱 기준 스타일시트

   설계 원칙
   1) box-shadow 미사용 — 그림자 없음
   2) border 최소 사용 — 영역 구분은 '미세한 배경색 차이'로 처리
      · 페이지 배경(회색) 위에 카드(흰색)를 올려 자연스럽게 분리
      · border는 다음 경우에만 사용한다
        - 폼 입력 요소 (테두리가 곧 조작 가능함의 신호)
        - 아웃라인 버튼 (테두리가 곧 버튼의 형태)
        - 선택/활성 상태 강조
        - 표의 행 구분선, 탭의 밑줄 등 기능적 최소 선
   3) 이미지·아이콘은 회색 플레이스홀더로 표시 (교체 위치 명시)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
/* 브레이크포인트 — 이 3개만 사용합니다
   1100px : 넓은 화면(5·4열 그리드 축소)
    980px : 태블릿(가로 배치 → 세로 배치)
    560px : 모바일
   태블릿 전용 규칙은 (min-width:561px) and (max-width:980px) */
:root{
  /* ── Brand (Figma 디자인 시스템 기준) ──
     Blue #00376E 를 단일 축으로, 밝은 강조는 Blue/400 #2469FF */
  --navy:            #00376E;   /* Figma: Blue — 신뢰 스트립·히어로·후기 배경·주 버튼 */
  --blue:            #2469FF;   /* Figma: Atomic/Blue/400 — 강조·링크·활성·BEST */
  --blue-300:        #4C85FF;   /* Figma: Atomic/Blue/300 */
  --blue-soft:       #E5EDFF;   /* Figma: Atomic/Blue/50 — 연블루 배경·태그·선택 */
  --blue-line:       #CBDBFF;   /* 선택 상태 테두리 */

  /* Semantic — Figma 팔레트에 없어 기존 값 유지 (비용 고지·상태 표시에 필요) */
  --yellow:          #FFE02F;   /* Figma: card_cs 배경 — 카카오톡 상담 전용 */
  --red:             #DA1F18;   /* 필수·경고·불합격 — 글씨·배지 채움 겸용 */
  --red-300:         #FF6969;   /* Figma: Atomic/Red/300 — 마감임박 태그 */
  --mono-400:        #B2B2B2;   /* Figma: Atomic/Mono/400 — 페이지네이션 비활성 숫자 */
  /* 페이지네이션 화살표(한 칸 / 끝으로) — 셰브론과 같이 마스크로 씁니다 */
  --arr:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 5l7 7-7 7' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arr2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 5l7 7-7 7M13 5l7 7-7 7' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* 접기·펴기 셰브론 — 마스크로 쓰므로 stroke 색은 의미 없습니다(색은 background-color) */
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --red-soft:        #FFF1F1;   /* 경고·주의 배경 */
  --green:           #008254;   /* 완료·합격 — 글씨·배지 채움 겸용 */
  --green-soft:      #e4f5ee;
  --amber:           #a3620a;
  --amber-soft:      #fbf1e0;

  /* Neutral — 배경 계층 (구분의 핵심) */
  --surface:         #FFFFFF;   /* Figma: White — 카드·콘텐츠 블록 */
  --surface-sunken:  #FAFAFA;   /* 카드 안에 중첩되는 영역 */
  --surface-alt:     #F2F4F7;   /* 교차 섹션 — 페이지보다 한 단계 진하게 */

  /* Neutral — 텍스트 (Figma: Atomic/Mono 스케일) */
  --ink:             #010101;   /* Mono/900 — 본문 제목 */
  --ink-2:           #1D1D1D;   /* Mono/800 — 태그·강조 본문 */
  --muted:           #656565;   /* Mono/600 — 보조 텍스트 */
  --faint:           #919191;   /* Mono/500 — placeholder */
  --disabled:        #D0D0D0;   /* Mono/300 — 비활성 */
  --ink-3:           #3D3D3D;   /* Mono/700 — secondary 버튼 텍스트 */

  /* 최소한으로 남긴 선 (Figma: Atomic/Mono/200) */
  --line:            #E4E4E4;   /* 기본 테두리 · 폼 입력 · 아웃라인 버튼 */

  /* Layout — 모든 콘텐츠 폭을 1200px로 통일 (좌우 정렬 일치) */
  --container:       1200px;
  --header-h:        64px;   /* 상단 고정 헤더 높이 (모바일 56px) */

  /* Radius (Figma: unit-2/3/4) */
  --r-sm:            4px;   /* 검색바·작은 요소 (unit-2) */
  --r-md:            6px;   /* 버튼·배지 (unit-3) */
  --r-lg:            8px;   /* 카드·썸네일 (unit-4) */
  --r-xl:            12px;  /* 큰 카드·모달 */
  --r-full:          999px;

  /* 간격 — 8단계 스케일 (gap 전용, 그 외 큰 여백은 개별 지정) */
  --s-1:      4px;
  --s-2:      6px;
  --s-3:      8px;
  --s-4:      10px;
  --s-5:      12px;
  --s-6:      16px;
  --s-7:      20px;
  --s-8:      24px;
  /* 레이아웃 — 섹션 사이 리듬 (컴포넌트 내부 간격과 범위가 다릅니다) */
  --s-9:      32px;
  --s-10:     48px;
  --s-11:     64px;

  /* 카드 안쪽 여백 — 좁은 화면에서 한 번에 줄이려고 토큰으로 뺐습니다.
     (모바일 값은 @media max-width:560px 에서 재정의) */
  --pad-card:   24px;   /* 상하좌우 동일한 카드 */
  --pad-card-y: 20px;   /* 상하를 좌우보다 좁게 쓰는 카드 */

  /* 글자 크기 — 7단계 스케일 (특대 40·42·96px만 개별 지정) */
  --fs-2xs:   11px;   /* 배지·캡션 */
  --fs-xs:    12px;   /* 보조 텍스트 */
  --fs-sm:    14px;   /* 본문 */
  --fs-md:    16px;   /* 본문 강조·큰 버튼 */
  --fs-lg:    18px;   /* 카드 제목 */
  --fs-xl:    22px;   /* 섹션 제목 */
  --fs-2xl:   28px;   /* 페이지·히어로 제목 */
}

/* 모바일 본문 — 좁은 화면에서 14px 본문은 읽기에 작아 아래 네 단계만 1px씩
   올립니다. 제목(lg 이상)은 그대로 두어 스케일 순서와 위계는 유지됩니다.
   (본문 14→15 · 보조 12→13 · 캡션 11→12 · 본문강조 16→17) */
@media (max-width:560px){
  :root{
    --fs-2xs: 12px;
    --fs-xs:  13px;
    --fs-sm:  15px;
    --fs-md:  17px;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{
  -webkit-text-size-adjust:100%; scrollbar-gutter:stable;
  scroll-padding-top:calc(var(--header-h) + 12px);   /* 앵커 이동 시 고정 헤더에 가리지 않게 */
}


body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
              "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:var(--fs-sm); line-height:1.6; letter-spacing:-0.005em;
  color:var(--ink); background:var(--surface-sunken);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  /* Sticky footer — 내용이 짧아도 푸터가 화면 하단에 붙게 합니다 */
  display:flex; flex-direction:column; min-height:100vh;
}
main{ flex:1 0 auto }   /* 본문이 남는 세로 공간을 채워 푸터를 아래로 밀어냄 */
body.is-locked{ overflow:hidden }

/* ==========================================================================
   흰 배경 페이지 (index 제외 전체 · body.page--flat)
   페이지 바탕을 흰색으로 두고, 바탕과 색이 같아 묻히는 흰 카드에는
   1px var(--line) 테두리를 넣어 경계를 만듭니다.
   ========================================================================== */
body.page--flat{ background:var(--surface) }
/* 헤더가 흰 바탕에 묻히지 않도록 하단 경계선 */
body.page--flat .header{ border-bottom:1px solid var(--line) }
/* 페이지 바탕 위에 직접 놓이는 흰 카드들 — 테두리로 구분 */
.page--flat .card,
.page--flat .filter-group,
.page--flat .side-card,
.page--flat .course-row,
.page--flat .review-row,
.page--flat .my-card,
.page--flat .faq__item,
.page--flat .board,
.page--flat .summary,
.page--flat .form-card,
.page--flat .spec-card,
.page--flat .reg-card,
.page--flat .detail-block,
.page--flat .support-card,
.page--flat .live-box,
.page--flat .review,
.page--flat .notice-list{ border:1px solid var(--line) }
/* 선택 상태(연블루 배경)는 테두리도 파란 계열로 유지 */
.page--flat .course-row.is-selected{ border-color:var(--blue-line) }
/* 안내 블록(guide-box · card--note)은 회색 배경만으로 구분 — 테두리 없음 */
.page--flat .card--note{ border:0 }

img,svg{ max-width:100%; height:auto; vertical-align:middle }
a{ color:inherit; text-decoration:none }
[hidden]{ display:none !important }   /* display 지정 요소에서도 hidden이 우선하도록 */
ul,ol{ list-style:none }
table{ border-collapse:collapse; width:100% }
button,input,select,textarea{ font:inherit; letter-spacing:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }

:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:var(--r-sm) }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 18px;
  border-radius:0 0 var(--r-md) 0; font-weight:700;
}
.skip-link:focus{ left:0 }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --------------------------------------------------------------------------
   3. 이미지 · 아이콘 플레이스홀더
   실제 이미지로 교체할 위치입니다. .ph 요소를 <img>로 바꾸세요.
   -------------------------------------------------------------------------- */
.ph{
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:var(--s-1); background:var(--line); color:var(--faint);
  font-size:var(--fs-2xs); font-weight:700; line-height:1.35; text-align:center;
}
.ph small{ font-size:var(--fs-2xs); font-weight:600; opacity:.8 }

/* 카드 썸네일 자리 */
.ph--thumb{ aspect-ratio:16/9.5; border-radius:var(--r-lg) var(--r-lg) 0 0 }
.ph--thumb-sq{ aspect-ratio:4/3; border-radius:var(--r-md) }

/* 아이콘 자리 (정사각 회색 블록) */
.ph--icon{ width:40px; height:40px; border-radius:var(--r-xl); flex-shrink:0 }
.ph--icon-sm{ width:30px; height:30px; border-radius:var(--r-lg); flex-shrink:0 }
.ph--icon-lg{ width:44px; height:44px; border-radius:var(--r-xl); flex-shrink:0 }

/* 로고 자리 */
.ph--logo{ width:20px; height:20px; border-radius:50%; flex-shrink:0 }
.ph--logo-lg{ width:26px; height:26px; border-radius:50%; flex-shrink:0 }

/* 어두운 배경 위 플레이스홀더 */
.ph--dark{ background:rgba(255,255,255,.16); color:rgba(255,255,255,.6) }

/* 자격증 실물 사진 자리 */
/* 상장형·카드형 견본, 증명사진(3×4) 등 세로형 자리 */
.ph--cert{ width:76px; height:98px; border-radius:var(--r-md); flex-shrink:0 }
/* 후기 자격증 사진 — 1:1 정사각 */
.ph--cert-lg{ width:140px; height:140px; aspect-ratio:1; border-radius:var(--r-md); flex-shrink:0 }
.ph--cert-sq{ width:76px; height:76px; aspect-ratio:1; border-radius:var(--r-md); flex-shrink:0 }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container{ max-width:var(--container); margin:0 auto; padding:0 20px }
/* footer 바로 위 콘텐츠가 container로 끝나면 하단 여백 확보
   (cta-band·detail-cta·cart-bar 등 풀블리드/고정 요소로 끝나는 페이지는 미해당) */
main > .container:last-child{ padding-bottom:var(--s-10) }
.content{ max-width:var(--container); margin:0 auto }

/* 섹션 배경 교차 — border 없이 영역을 구분하는 핵심 장치 */
.section{ padding:var(--s-10) 0 }                       /* 페이지 회색 위 */
.section--white{ background:var(--surface) }           /* 흰색 */
/* 메인 페이지 바탕과 같은 회색 — 흰 섹션과의 대비만으로 영역이 충분히 나뉩니다 */
.section--alt{ background:var(--surface-sunken) }
.section--navy{ background:var(--navy); color:#fff }
/* 연블루 섹션 — 배경만으로 흰 카드가 충분히 떠 보여 카드 테두리는 지웁니다
   (레이아웃이 밀리지 않도록 투명 처리) */
.section--soft{ background:var(--blue-soft) }
.section--soft .review,
.section--soft .card{ border-color:transparent }

.section-head{ margin-bottom:var(--s-7) }
/* '전체 보기' 링크가 있는 헤더 — 제목·설명은 왼쪽, 링크는 같은 줄 오른쪽 끝에 */
.section-head--row{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-6);
}
/* 테두리·배경 없는 회색 텍스트 링크 */
.section-head__more{
  flex-shrink:0; font-size:var(--fs-sm); font-weight:600; color:var(--muted);
  white-space:nowrap;
}
.section--navy .section-head__more{ color:rgba(255,255,255,.72) }
.section-head .eyebrow{
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.12em;
  color:var(--blue); text-transform:uppercase; margin-bottom:5px;
}
.section-head h2{
  font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; line-height:1.35;
  color:var(--ink); text-wrap:balance;
}
.section-head p{ font-size:var(--fs-sm); color:var(--muted); margin-top:4px }
.section--navy .section-head h2{ color:#fff }
.section--navy .section-head .eyebrow{ color:var(--blue-line) }
.section--navy .section-head p{ color:rgba(255,255,255,.62) }

.page-head{ padding:var(--s-9) 0 var(--s-7) }
.page-head h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.025em; color:var(--ink) }
.page-head p{ font-size:var(--fs-sm); color:var(--muted); margin-top:5px }

.breadcrumb{ font-size:var(--fs-xs); color:var(--faint); padding:14px 0 }
.breadcrumb ol{ display:flex; flex-wrap:wrap; gap:var(--s-2); align-items:center }
.breadcrumb li::after{ content:"›"; margin-left:6px; color:var(--disabled) }
.breadcrumb li:last-child::after{ content:none }
.breadcrumb li[aria-current]{ color:var(--ink-2); font-weight:600 }

/* --------------------------------------------------------------------------
   5. Header / GNB
   흰색 헤더가 회색 페이지 위에 놓여 border 없이 분리된다.
   -------------------------------------------------------------------------- */
/* 어떤 기기에서도 상단에 고정 — 아래 sticky 요소들은 이 높이만큼 내려서 붙습니다.
   맨 위에서는 페이지의 일부처럼 보이고, 스크롤을 시작하면 그림자가 생겨 떠 보입니다. */
.header{ position:sticky; top:0; z-index:60; background:var(--surface) }
.header.is-stuck{ box-shadow:0 10px 24px rgba(0,0,0,.06) }
.header{ transition:box-shadow .2s ease, transform .25s ease }
.header__in{
  max-width:var(--container); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:var(--s-7); min-height:64px;
}

/* 로고 — assets/logo.svg (마크 + 워드마크 통합, 원본 비율 344.42 × 42.53)
   어두운 배경에서는 assets/logo_white.svg 를 src로 사용한다. */
.logo{ display:inline-flex; align-items:center; flex-shrink:0 }
.logo img{ display:block; width:auto; height:18px }
.logo--sm img{ height:16px }

.gnb{ display:flex; gap:var(--s-1)}
.gnb a{
  display:flex; align-items:center; gap:var(--s-1);
  padding:8px 12px; border-radius:var(--r-md);
  font-size:var(--fs-sm); font-weight:700; color:var(--ink-2);
}
.gnb a[aria-current="page"]{ color:var(--blue) }   /* 선택 메뉴는 배경 없이 파란 글자만 */
.gnb a:hover{ background:var(--surface-sunken) }    /* 배경은 hover에만 */

.header__util{ margin-left:auto; display:flex; align-items:center; gap:var(--s-4)}

/* 헤더 검색 버튼 — 클릭 시 전체화면 검색 오버레이 */
.search-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  min-width:190px; padding:8px 13px;
  background:var(--surface-sunken); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--faint); font-weight:600;
}
.search-trigger:hover{ background:var(--surface-alt) }
.search-trigger .ico{ color:var(--blue); font-weight:700 }

.header__auth{ display:inline-flex; align-items:center; gap:var(--s-4)}
.header__auth:empty{ display:none }
.util-link{ font-size:var(--fs-sm); font-weight:600; color:var(--muted); white-space:nowrap }
.util-link:hover{ color:var(--ink) }
.util-link--strong{ color:var(--navy); font-weight:700 }

.nav-toggle{ display:none; font-size:var(--fs-xl); color:var(--ink-2); padding:6px }

/* 데스크톱에서는 래퍼가 레이아웃에 관여하지 않도록 투명하게 둡니다.
   (gnb·header__util이 header__in의 직계 flex 아이템처럼 그대로 동작) */
.header__nav{ display:contents }

/* --------------------------------------------------------------------------
   6. Trust Strip
   -------------------------------------------------------------------------- */
/* 띠배너 — Figma wrapper_info (291:2546) · 메인 페이지 전용
   구분선을 항목 사이에 균등 배치하기 위해 li로 넣고 화면낭독기에서는 감춥니다. */
.trust-strip{ background:var(--navy); color:#fff }
.trust-strip ul{
  max-width:var(--container); margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; justify-content:center; gap:var(--s-6);
}
/* 항목 세 칸을 균등폭으로 나누고 각 칸 안에서 가운데 정렬 →
   폭이 줄어도 좌우 항목이 화면 끝에 붙지 않고 항상 균형 있게 보입니다. */
.trust-strip li:not(.trust-strip__divider){
  flex:1 1 0; justify-content:center; min-width:0;
}
.trust-strip li{
  display:flex; align-items:center; gap:var(--s-4);
  font-size:var(--fs-md); font-weight:600; line-height:1; white-space:nowrap;
}
.trust-strip__divider{ width:1px; height:24px; background:var(--faint); flex-shrink:0 }
.trust-strip__ico{ flex-shrink:0; width:24px; height:24px }   /* Figma 아이콘:텍스트 = 1.6 비율 유지 */
/* 라벨 줄바꿈은 모바일에서만 — 데스크톱에선 br을 죽여 한 줄로 이어 붙입니다(앞의 공백이 살아 있음) */
.trust-strip__txt br{ display:none }
.trust-strip__ico svg{ display:block; width:100%; height:100% }

/* --------------------------------------------------------------------------
   7. 전체화면 검색 오버레이
   -------------------------------------------------------------------------- */
.search-overlay{
  position:fixed; inset:0; z-index:120; display:none;
}
.search-overlay.is-open{ display:block }
.search-overlay__dim{
  position:absolute; inset:0; background:rgba(20,26,36,.42);
}
.search-overlay__panel{
  position:relative; background:var(--surface);
  padding:34px 0 26px; animation:searchIn .16s ease-out;   /* 좌우 padding은 bar/body가 담당 */
}
@keyframes searchIn{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }

/* 헤더와 동일한 폭 체계(container 1200 + padding 20)로 로고를 헤더 로고와 정렬 */
.search-overlay__bar{
  max-width:var(--container); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:var(--s-8);
}
.search-overlay__bar .logo{ flex-shrink:0 }
.search-field{
  flex:1; display:flex; align-items:center; gap:var(--s-4);
  border:1.5px solid var(--blue); border-radius:var(--r-md);
  padding:12px 18px; background:var(--surface);
}
.search-field input{
  flex:1; min-width:0; border:0; outline:0; background:none;
  font-size:var(--fs-md); font-weight:600; color:var(--ink);
}
.search-field input::placeholder{ color:var(--disabled); font-weight:600 }
/* type=search의 브라우저 기본 지우기(✕)를 숨깁니다 — 우리 ✕ 버튼과 두 개로 겹칩니다 */
.search-field input::-webkit-search-cancel-button,
.search-field input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none }
.search-field button{ color:var(--muted); font-size:var(--fs-md); line-height:1 }
.search-field button[hidden]{ display:none }   /* 입력이 없을 때 지우기 버튼 숨김 */
.search-field .submit{ color:var(--blue); font-weight:700 }

.search-overlay__body{
  max-width:var(--container); margin:26px auto 0; padding:0 20px;
}
/* 검색 결과·인기목록을 검색 입력창과 정렬 (로고 폭 147px + gap 26px 만큼 들여쓰기) */
.search-panel{ padding-left:calc(147px + 26px) }
.search-panel[hidden]{ display:none }

/* 기본 상태 — 인기 검색어 / 최근 검색어 */
.search-cols{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s-9) }
.search-cols > div + div{ padding-left:36px; border-left:1px solid var(--line) }
.search-cols h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:14px }
.search-cols h2 em{ font-style:normal; color:var(--blue) }
.rank-list li{ display:flex; gap:var(--s-6); align-items:center; padding:6px 0; font-size:var(--fs-sm) }
.rank-list .no{ width:18px; text-align:center; font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums }
.rank-list li:nth-child(n+4) .no{ color:var(--disabled) }
.rank-list a{ color:var(--ink-2) }
.rank-list a:hover{ text-decoration:underline }
.recent-list li{ padding:6px 0; font-size:var(--fs-sm); display:flex; justify-content:space-between; gap:var(--s-5)}
.recent-list a{ color:var(--ink-2) }
.recent-list a:hover{ text-decoration:underline }
.recent-list .del{ color:var(--disabled); font-size:var(--fs-xs) }
.recent-list .empty{ color:var(--faint); font-size:var(--fs-sm) }

/* 결과 상태 — 카테고리별 그룹 */
.search-group + .search-group{ margin-top:22px; padding-top:22px; border-top:1px solid var(--line) }
.search-group h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:12px }
.search-group ul{ display:flex; flex-wrap:wrap; gap:var(--s-5) var(--s-8) }
.search-group a{ font-size:var(--fs-sm); color:var(--ink-2) }
.search-group a:hover{ text-decoration:underline }
.search-group mark{ background:none; color:var(--blue); font-weight:700 }

.search-overlay__close{
  display:block; margin:26px auto 0;
  width:34px; height:34px; border-radius:var(--r-md);
  background:var(--surface-alt); color:var(--muted); font-size:var(--fs-md);
}
.search-overlay__close:hover{ background:var(--line); color:var(--ink) }

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  border-radius:var(--r-md); font-weight:700; white-space:nowrap;
  padding:10px 18px; font-size:var(--fs-sm); border:1.5px solid transparent;
  transition:background-color .15s, border-color .15s, color .15s;
}
.btn--primary{ background:var(--navy); color:#fff }
.btn--primary:hover{ background:#002a54 }
.btn--blue{ background:var(--blue); color:#fff }
.btn--blue:hover{ background:#1a54d6 }
/* 아웃라인 버튼 — 테두리가 곧 버튼의 형태이므로 유지 */
.btn--ghost{ background:var(--surface); border-color:var(--line); color:var(--ink-2) }
/* 테두리·글자색은 그대로 두고 배경만 옅은 회색으로 (사이트 공통) */
.btn--ghost:hover{ background-color:var(--surface-alt) }
.btn--soft{ background:var(--blue-soft); color:var(--blue) }
.btn--soft:hover{ background:#D6E3FF }
.btn--soft-ink{ background:var(--blue-soft); color:var(--ink-3) }        /* Figma: 회원가입 */
.btn--soft-ink:hover{ background:#D6E3FF; color:var(--ink) }
.btn--yellow{ background:var(--yellow); color:var(--ink) }
.btn--yellow:hover{ background:#f2da00 }
.btn--white{ background:#fff; color:var(--navy) }
.btn--white:hover{ background:var(--surface-alt) }
/* 아웃라인 버튼의 회색 글씨 변형 — 테두리·배경·호버는 .btn--ghost 그대로 */
.btn--ghost.btn--quiet{ color:var(--muted) }

.btn--lg{ padding:15px 30px; font-size:var(--fs-md); border-radius:var(--r-lg) }
.btn--sm{ padding:8px 14px; font-size:var(--fs-sm) }
.btn--block{ width:100% }
.btn__ico{ flex:none }   /* 버튼 안 아이콘 — 좁은 폭에서도 찌그러지지 않게 */

.btn:disabled,
.btn[aria-disabled="true"]{
  background:var(--surface-sunken); color:var(--disabled); border-color:transparent;
  cursor:not-allowed; pointer-events:none;
}

/* --------------------------------------------------------------------------
   9. Badges
   -------------------------------------------------------------------------- */
/* Figma 태그: BEST=진파랑(Blue/400)·흰 / 나머지=연블루(Blue/50)·어두운 텍스트 */
.badge{
  display:inline-flex; align-items:center; gap:var(--s-1);
  font-size:var(--fs-xs); font-weight:600; border-radius:var(--r-md);
  padding:4px 9px; white-space:nowrap;
}
.badge--free{ background:var(--blue-soft); color:var(--ink-2) }  /* 무료수강권 — 연령 뱃지와 같은 무채색 */
.badge--best{ background:var(--blue);      color:#fff }          /* BEST/NEW/인기 */
.badge--age{  background:var(--blue-soft); color:var(--ink-2) }  /* 연령 추천 (Figma 톤) */
.badge--hot{  background:var(--navy);      color:#fff }         /* 신규 */
/* 마감임박 — Figma tag (101:3404). 관리자가 체크한 과정에만 붙습니다 */
.badge--closing{ background:var(--red-300); color:#fff; font-weight:700 }
.badge--fee{  background:var(--amber-soft); color:var(--amber) } /* 발급비 — 비용 고지 유지 */
.badge--gov{  background:var(--surface-alt); color:var(--ink-3) }
/* 나의 강의실 상태 태그 — 상태별 의미색, 모두 채움+흰 텍스트 */
.badge--pass{     background:var(--green); color:#fff }  /* 초록 · 응시완료(합격) */
.badge--fail{     background:var(--red);  color:#fff }   /* 빨강 · 응시완료(불합격) */
.badge--learning{ background:var(--blue-300); color:#fff }   /* 파랑 · 학습중 */

/* 주무부처 태그 — 로고 자리는 회색 플레이스홀더 */
.gov-tag{
  display:inline-flex; align-items:center; gap:var(--s-1);
  background:rgba(255,255,255,.95); border-radius:var(--r-sm);
  padding:3px 7px; font-size:var(--fs-xs); font-weight:700; color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */
/* padding-top/bottom만 지정 — 좌우 20px는 .container 값을 유지해 섹션과 정렬 */
/* Figma section (291:3333) — 배너 791 : 로그인 383, gap 24, 높이 320 */
.hero-band{ background:var(--surface) }
.hero{ padding-top:var(--s-7); padding-bottom:var(--s-9) }
/* 로그인 박스는 Figma 실측 폭(383px)을 고정하고, 배너가 남는 폭을 가져갑니다.
   → 문구 줄바꿈이 디자인과 동일하게 유지됩니다. */
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) 383px; gap:var(--s-8)}

/* 배너 캐러셀 — 디자인된 이미지를 가로로 이어 붙이고 좌우로 밀어 넘깁니다.
   높이는 이미지 원본 비율을 따르므로 어떤 크기의 배너를 넣어도 찌그러지지 않습니다.
   align-self:start로 그리드가 높이를 늘리지 못하게 막습니다. */
.banner{
  position:relative; overflow:hidden; align-self:start;
  border:1px solid var(--line); border-radius:var(--r-xl);
}
.banner__track{ display:flex; width:100%; transition:transform .5s cubic-bezier(.4,0,.2,1) }
.banner__slide{ flex:0 0 100%; width:100%; height:auto; display:block }
@media (prefers-reduced-motion:reduce){ .banner__track{ transition:none } }
.banner__dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:16px;
  display:flex; align-items:center; gap:var(--s-2);
}
/* course-detail 점처럼 원 → 알약으로 부드럽게 모프 */
.banner__dots button{
  width:8px; height:8px; border-radius:var(--r-full); background:rgba(255,255,255,.6);
  transition:width .4s cubic-bezier(.4,0,.2,1), background-color .3s ease;
}
.banner__dots button[aria-current="true"]{ width:20px; background:#fff }

/* 로그인 박스 — 위쪽 브랜드 문구, 아래쪽 버튼 두 개 */
.loginbox{
  background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-xl); padding:var(--pad-card);
  display:flex; flex-direction:column; justify-content:space-between; gap:var(--s-9);
}
.loginbox__brand{ margin-bottom:6px }
.loginbox__brand img{ display:block; height:20px; width:auto }
.loginbox h2{
  font-size:var(--fs-xl); font-weight:700; line-height:1.4;
  letter-spacing:-.02em; color:var(--ink-2);
  word-break:keep-all;   /* 한글은 단어 단위로 줄바꿈 */
}
.loginbox h2 em{ font-style:normal; color:var(--blue) }
.loginbox__actions{ display:flex; gap:var(--s-5)}
.loginbox__actions .btn{ flex:1; padding:14px 16px; font-size:var(--fs-md); border-radius:var(--r-md)}

/* 로그인 상태 전환 — body[data-logged-in]에 따라 게스트/회원 박스 토글 */
.loginbox--member{ display:none }
body[data-logged-in="true"] .loginbox--guest{ display:none }
body[data-logged-in="true"] .loginbox--member{ display:flex }
.loginbox__hello{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; color:var(--ink-2) }
.loginbox__hello em{ font-style:normal; color:var(--blue) }
.loginbox__member-bottom{ display:flex; flex-direction:column; gap:var(--s-5)}

/* 수강중인 강의 미니 목록 (Figma list_lecture 348:10382) */
.mylec-mini{
  background:var(--surface-sunken); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:14px 16px; max-height:118px; overflow-y:auto;
}
.mylec-mini__list{ display:grid; gap:var(--s-5)}
/* 강의 항목 전체가 강의실로 가는 링크 */
.mylec-mini__list li > a{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  margin:-4px -6px; padding:4px 6px; border-radius:var(--r-md);
  transition:background-color .15s;
}
.mylec-mini__list li > a:hover{ background:var(--surface-alt) }

.mylec-mini__tit{ font-size:var(--fs-md); font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s }
.mylec-mini__dday{
  flex-shrink:0; background:var(--red-soft); color:var(--red);
  border:1px solid #FF9C9C; border-radius:var(--r-md);
  padding:5px 9px; font-size:var(--fs-sm); font-weight:700;
}
.mylec-mini__empty{ padding:8px 0; text-align:center; font-size:var(--fs-sm); color:var(--faint) }

/* --------------------------------------------------------------------------
   11. 목적 · 연령 선택
   -------------------------------------------------------------------------- */
.pill-row{ display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; margin-top:20px }
/* 라벨 폭을 맞춰 두 필터 줄의 칩 시작점이 일치하게 합니다 */
.pill-row__label{ flex-shrink:0; width:44px; font-size:var(--fs-sm); font-weight:700; color:var(--faint) }
/* 목적·연령 두 필터 줄의 칩 높이를 맞춰 같은 위계로 보이게 합니다
   (.pill은 다른 페이지에서도 쓰므로 이 두 줄에만 적용) */
[data-goal-group] .pill,
[data-age-group] .pill{
  display:inline-flex; align-items:center; min-height:36px;
  border:1px solid var(--line);          /* 기본 상태 — 회색 테두리 */
  transition:background-color .15s, color .15s, border-color .15s;
}
/* 호버 — 배경만 옅은 회색으로. 글자색은 그대로 둡니다(선택된 칩은 남색 유지) */
[data-goal-group] .pill:not([aria-pressed="true"]):hover,
[data-age-group] .pill:not([aria-pressed="true"]):hover{
  background:var(--surface-alt); color:var(--muted); border-color:var(--line);
}
[data-goal-group] .pill[aria-pressed="true"],
[data-age-group] .pill[aria-pressed="true"]{ border-color:var(--navy) }
/* 목적 칩 안의 과정 수 */
[data-goal-group] .pill b{
  margin-left:5px; font-weight:700; font-size:var(--fs-xs); color:var(--faint);
  font-variant-numeric:tabular-nums;
}
[data-goal-group] .pill[aria-pressed="true"] b{ color:rgba(255,255,255,.7) }
.pill{
  background:var(--surface); border-radius:var(--r-full);
  padding:7px 16px; font-size:var(--fs-sm); font-weight:700; color:var(--muted);
  transition:background-color .15s, color .15s;
}
/* hover는 선택 상태(네이비)의 옅은 예고편 — 글자색만 바뀌면 반응이 약하다 */
.pill:hover{ background:var(--blue-soft) }
.pill[aria-pressed="true"],
.pill[aria-current="page"],
.pill[aria-selected="true"]{ background:var(--navy); color:#fff }

/* --------------------------------------------------------------------------
   12. 분야 아이콘
   -------------------------------------------------------------------------- */
.cat-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--s-2)}
.cat-item{ display:block; text-align:center; padding:18px 4px; border-radius:var(--r-lg) }
.cat-item:hover{ background:var(--surface) }
.cat-item .ph{ margin:0 auto 8px }
.cat-item__ico{ display:block; width:52px; height:52px; margin:0 auto 8px; object-fit:contain }
/* 분야 아이콘 자체는 크게 — 목적 칩에서 같은 이미지를 26px로 쓰므로 여기만 키운다 */
.cat-item .cat-item__ico{ width:64px; height:64px; margin-bottom:10px }
.cat-item span{ display:block; font-size:var(--fs-xs); font-weight:600; color:var(--ink-3); line-height:1.35; white-space:nowrap }

/* 국가자격증 안내 (Figma 334:9450) — 사진 카드 4개 + 전체 폭 버튼 */
.natcert-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-8)}
.natcert-card{ display:block }
.natcert-card img{
  display:block; width:100%; aspect-ratio:282/188; object-fit:cover;
  border-radius:var(--r-lg); background:var(--surface-alt);
}
.natcert-card strong{
  display:block; margin-top:16px;
  font-size:var(--fs-md); font-weight:700; color:var(--ink); letter-spacing:-.01em;
}
/* 카드 아래 전체 폭 버튼 */
.natcert-more{ margin-top:24px; padding:16px }

/* --------------------------------------------------------------------------
   13. Course Card (그리드형) — border 없이 흰 카드
   -------------------------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5)}
.card-grid--3{ grid-template-columns:repeat(3,1fr) }

.course-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  transition:background-color .15s, border-color .15s;
}
.course-card:hover{ background:var(--surface-sunken); border-color:var(--line) }

/* 썸네일 자리 — 실제 이미지로 교체.
   수강신청 목록(.course-row__thumb)과 같은 구조: 위쪽 딤 + 흰색 주무부처 로고 */
.thumb{ position:relative; overflow:hidden; border-radius:var(--r-lg) var(--r-lg) 0 0 }
.thumb .ph--thumb{ width:100% }
.thumb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}
.thumb .gov-mark{ top:12px; left:14px; right:14px }
.thumb__tags{
  position:absolute; z-index:2; inset:9px 9px auto 9px;
  display:flex; align-items:flex-start; justify-content:flex-end; gap:var(--s-2);
}

.course-card__body{ display:flex; flex-direction:column; gap:var(--s-2); flex:1; padding:13px 15px 15px }
.course-card__cat{ font-size:var(--fs-xs); color:var(--faint) }
.course-card__title{ font-size:var(--fs-sm); font-weight:700; color:var(--ink); line-height:1.4 }
.course-card__badges{ display:flex; gap:var(--s-1); flex-wrap:wrap }

/* 스펙 — 배경 톤으로 구분 (구분선 없음) */
.spec-list{
  display:flex; flex-direction:column; gap:var(--s-1);
  background:var(--surface-sunken); border-radius:var(--r-md);
  padding:9px 11px; font-size:var(--fs-xs); color:var(--muted);
}
.spec-list div{ display:flex; justify-content:space-between; gap:var(--s-3)}
.spec-list b{ color:var(--ink-2); font-weight:700; font-variant-numeric:tabular-nums }
.spec-list .is-fee{ color:var(--amber) }

.price{ margin-top:auto; display:flex; align-items:baseline; justify-content:flex-end; gap:var(--s-2); padding-top:7px }
.price del{ font-size:var(--fs-xs); color:var(--disabled) }
.price strong{ font-size:var(--fs-lg); font-weight:700; color:var(--navy) }

/* --------------------------------------------------------------------------
   14. Course Row (목록형 · 장바구니)
   -------------------------------------------------------------------------- */
/* 영역을 이름으로 배치합니다. 구분선(rule)이 본문·가격 두 칸과 그 사이 간격까지
   한 번에 덮어야 끊김 없이 한 줄로 이어집니다. */
.course-row{
  display:grid; align-items:start;
  /* 썸네일 폭은 4:3 높이가 카드 콘텐츠 높이와 같아지도록 잡았습니다.
     → 이미지 위아래 여백이 카드 패딩과 정확히 일치합니다. */
  grid-template-columns:265px 1fr 172px;
  grid-template-areas:
    "thumb head price"
    "thumb rule rule"
    "thumb spec act";
  gap:var(--s-5) var(--s-6);
  background:var(--surface); border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card);
  border:1.5px solid transparent;
  transition:background-color .15s, border-color .15s;
}
.course-row__rule{ grid-area:rule; height:1px; background:var(--line) }
/* 태그 목록과 버튼을 썸네일 아래끝에 정확히 맞춥니다.
   두 열 모두 자기 행 높이를 꽉 채우고, 남는 공간을 항목 사이에 균등 분배합니다. */
.course-row__actions{
  grid-area:act; display:flex; flex-direction:column; justify-content:space-between;
  height:100%; gap:var(--s-2);
}
.course-row .spec-table{ grid-area:spec; height:100%; justify-content:space-between }
.course-row + .course-row{ margin-top:11px }
.course-row.is-selected{ background:#F0F5FF }

/* 목록 썸네일 — Figma image (101:3392)
   테두리 1px + radius 8 안에 이미지를 담고, 상단에 dim을 깔아
   그 위에 주무부처 로고(흰색 버전)를 올립니다. */
.course-row__thumb{
  grid-area:thumb;
  position:relative; display:block; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-lg);
}
/* 썸네일이 태그·버튼 열과 아래끝을 정확히 맞추도록 행 높이를 채웁니다 */
.course-row__thumb{ height:100% }
.course-row__thumb .ph{ width:100%; height:100%; border-radius:0 }
.course-row__thumb::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%);
}

/* 주무부처 마크 — 로고 파일이 있으면 이미지, 없으면 흰색 텍스트
   Figma 카드(282px / 로고 30px / 여백 12·14)를 썸네일 폭 240px에 맞춰 비례 축소했습니다. */
.gov-mark{
  position:absolute; z-index:1; top:10px; left:12px; right:12px;
  display:flex; align-items:center;
}
.gov-mark img{ display:block; height:26px; width:auto; max-width:100% }
.gov-mark span{
  font-size:var(--fs-sm); font-weight:700; color:#fff; letter-spacing:-.02em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.course-row__head{ grid-area:head; display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap }
.course-row__head h2,
.course-row__head h3{ font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }

/* 핵심 정보 4가지를 한 줄로 나열 (담당교수 · 수업방식 · 강의시간 · 주무부처) */
/* 담당교수 · 수업방식 · 강의시간 · 주무부처를 위에서 아래로 나열 */
.spec-table{
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--s-3);
}
.spec-table div{ display:flex; gap:var(--s-4); font-size:var(--fs-sm); color:var(--muted); align-items:center }
.spec-table .label{
  flex-shrink:0; min-width:62px; text-align:center;
  background:var(--blue-soft); border-radius:var(--r-sm); padding:5px 9px;
  font-size:var(--fs-xs); font-weight:700; color:var(--ink-3);
}
.spec-table b{ color:var(--ink-2); font-weight:600 }
.spec-table .is-fee{ color:var(--amber) }

/* 24px 수강료가 기본 행간을 그대로 쓰면 제목 줄보다 높아져,
   그 차이만큼 구분선 위 여백이 벌어집니다. 행간을 없애고 제목과 중앙을 맞춥니다. */
.course-row__price{
  grid-area:price; display:flex; align-items:baseline; gap:var(--s-2); justify-content:flex-end;
  line-height:1; align-self:center;
}
.course-row__price del{ font-size:var(--fs-xs); color:var(--disabled) }
.course-row__price strong{ font-size:var(--fs-2xl); font-weight:700; color:var(--navy); letter-spacing:-.02em }
.course-row__policy{ display:none }   /* 스펙 표를 감추는 모바일에서만 노출 */

.select-toggle{
  display:flex; align-items:center; justify-content:center; gap:var(--s-3);
  background:var(--navy); color:#fff; border-radius:var(--r-md);
  padding:10px; font-size:var(--fs-sm); font-weight:700; width:100%;
}
.select-toggle:hover{ background:#002a54 }
.select-toggle__box{ width:15px; height:15px; border-radius:var(--r-sm); background:#fff; position:relative; flex-shrink:0 }
.select-toggle[aria-pressed="true"] .select-toggle__box{ background:var(--blue-300) }
.select-toggle[aria-pressed="true"] .select-toggle__box::after{
  content:"✓"; position:absolute; left:2.5px; top:-3px; color:#fff; font-size:var(--fs-2xs); font-weight:700;
}

/* --------------------------------------------------------------------------
   15. 장바구니 바
   -------------------------------------------------------------------------- */
.cart-bar{
  position:sticky; bottom:0; z-index:40; background:var(--blue-soft); padding:16px 0;
  box-shadow:0 -6px 18px rgba(0,0,0,.10);   /* 뒤 목록 위에 떠 보이도록 */
  transition:background-color .3s;
}
/* 상세페이지에서 담고 넘어왔을 때 잠깐 강조 */
.cart-bar.is-bump{ animation:cart-bump 1.4s ease }
@keyframes cart-bump{
  0%{ background:var(--blue-soft) } 15%{ background:#D3E1FF } 60%{ background:#D3E1FF } 100%{ background:var(--blue-soft) }
}
@media (prefers-reduced-motion:reduce){ .cart-bar.is-bump{ animation:none } }

/* 안내 토스트 — 화면 하단 중앙에 잠깐 */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 12px); z-index:120;
  max-width:calc(100vw - 32px); padding:12px 20px; border-radius:var(--r-full);
  background:var(--navy); color:#fff; font-size:var(--fs-sm); font-weight:600; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.22); opacity:0; pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.toast.is-on{ opacity:1; transform:translate(-50%, 0) }
.cart-bar__in{
  max-width:var(--container); margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap;
}
.cart-bar__count{ font-size:var(--fs-sm); font-weight:700; color:var(--ink-2) }
.cart-bar__count b{ font-size:var(--fs-xl); color:var(--blue); margin:0 3px; font-variant-numeric:tabular-nums }
.cart-bar__chips{ display:flex; gap:var(--s-2); flex-wrap:wrap; flex:1; min-width:180px }
.cart-chip{
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--surface); border-radius:var(--r-md); padding:6px 11px;
  font-size:var(--fs-xs); color:var(--ink-2);
}
.cart-chip button{ color:var(--disabled); font-size:var(--fs-sm); line-height:1 }
.cart-chip button:hover{ color:var(--red) }
.cart-bar__total{ display:flex; align-items:baseline; gap:var(--s-2)}
.cart-bar__total del{ font-size:var(--fs-sm); color:var(--faint) }
.cart-bar__total strong{ font-size:var(--fs-xl); font-weight:700; color:var(--navy) }
.cart-bar__total-label{ display:none }   /* 모바일에서만 '수강료' 라벨을 붙입니다 */
.cart-bar [data-enroll]{ padding:13px 24px; font-size:14.5px }
.cart-bar.is-empty{ display:none }

/* --------------------------------------------------------------------------
   16. 필터 사이드바
   -------------------------------------------------------------------------- */
.layout-side{ display:grid; grid-template-columns:210px 1fr; gap:var(--s-8); align-items:start }

/* 모바일 필터 드롭다운 버튼 — 데스크톱은 사이드바가 항상 펼쳐져 있어 감춥니다.
   접힘 상태는 hidden 속성이 아니라 클래스로 둡니다. hidden은 전역 리셋에서
   !important라 데스크톱으로 넓혔을 때 되돌릴 수 없기 때문입니다. */
.filter-toggle{ display:none }

/* 모바일 검색바·정책 배지 — 데스크톱에서는 헤더 검색과 중복이라 감춥니다 */
.m-search{ display:none }
.promo-chip{ display:none }

/* ------------------------- 필터 바텀시트 (모바일) ------------------------- */
/* display 토글 대신 visibility로 감춥니다. display:none이면 전환이 걸리지 않고,
   visibility:hidden은 클릭·접근성 트리에서도 빠지므로 닫힌 시트는 그대로 무해합니다.
   닫을 때는 패널이 다 내려간 뒤 사라지도록 visibility 전환만 지연시킵니다. */
.fsheet{ position:fixed; inset:0; z-index:80; visibility:hidden; transition:visibility 0s linear .28s }
.fsheet.is-open{ visibility:visible; transition-delay:0s }
.fsheet__dim{ position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .28s ease }
.fsheet.is-open .fsheet__dim{ opacity:1 }
.fsheet.is-open .fsheet__panel{ transform:none }
.fsheet__panel{
  transform:translateY(100%); transition:transform .28s cubic-bezier(.32,.72,0,1);
  /* 그룹마다 항목 수가 달라도 시트가 들썩이지 않도록 높이를 고정합니다
     (가장 긴 '과정별' 그룹이 차지하던 높이) */
  position:absolute; left:0; right:0; bottom:0; height:80vh;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; overflow:hidden;
}
.fsheet__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:var(--pad-card-y) var(--pad-card); border-bottom:1px solid var(--line);
}
.fsheet__head h2{ font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.fsheet__close{ font-size:var(--fs-lg); color:var(--faint); padding:4px 6px }
/* 좌: 필터 그룹 / 우: 그룹 안 항목 — Figma Forms 29:30 구조 */
.fsheet__body{ display:grid; grid-template-columns:118px 1fr; flex:1; min-height:0 }
.fsheet__groups{ background:var(--surface-alt); overflow-y:auto }
.fsheet__group{
  display:block; width:100%; text-align:left;
  padding:14px 16px; font-size:var(--fs-sm); color:var(--muted);
}
.fsheet__group[aria-selected="true"]{ background:var(--surface); color:var(--blue); font-weight:700 }
.fsheet__items{ overflow-y:auto; padding:4px 0 }
.fsheet__item{
  display:flex; align-items:center; gap:var(--s-3); width:100%;
  padding:13px 18px; font-size:var(--fs-sm); color:var(--ink-2); text-align:left;
}
.fsheet__item .num{ margin-left:auto; font-size:var(--fs-2xs); color:var(--disabled) }
.fsheet__item[aria-pressed="true"]{ color:var(--blue); font-weight:700 }
.fsheet__item[aria-pressed="true"] .num{ color:var(--blue) }
.fsheet__item::before{
  content:""; flex:none; width:18px; height:18px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:var(--surface);
}
.fsheet__item[aria-pressed="true"]::before{
  border-color:var(--blue); background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.fsheet__foot{
  display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-3);
  padding:10px 14px; border-top:1px solid var(--line);
}
/* 시트 하단은 여백을 줄이고 버튼을 키워 손가락으로 누르기 쉽게 합니다 */
.fsheet__foot .btn{ padding:14px 16px; font-size:var(--fs-sm) }

.filter-group{ position:relative; background:var(--surface); border-radius:var(--r-lg); padding:14px }
.filter-group + .filter-group{ margin-top:10px }
.filter-group__title{ font-size:var(--fs-xs); font-weight:700; color:var(--faint); margin-bottom:8px }
/* 그룹 안에 선택된 조건이 있을 때만 스크립트가 만들어 넣습니다 */
.filter-group__reset{
  position:absolute; top:11px; right:11px;
  display:inline-flex; align-items:center; gap:var(--s-1);
  border-radius:var(--r-md); padding:3px 7px;
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
  transition:background-color .15s, color .15s;
}
.filter-group__reset svg{ width:11px; height:11px }
.filter-group__reset:hover{ background:var(--surface-alt); color:var(--ink-2) }
.filter-item{
  display:flex; align-items:center; gap:var(--s-3); width:100%;
  border-radius:var(--r-md); padding:9px 11px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); background:transparent;
}
/* 다중 선택임을 알리는 체크박스 — 기본 회색, 선택 시 파란색 채움 + 체크 */
.filter-item::before{
  content:''; flex-shrink:0; width:16px; height:16px; border-radius:var(--r-sm);
  border:1.5px solid var(--line); background:var(--surface);
  background-position:center; background-repeat:no-repeat; background-size:10px;
  transition:background-color .12s, border-color .12s;
}
.filter-item .num{ margin-left:auto; font-size:var(--fs-xs); color:var(--disabled); font-variant-numeric:tabular-nums }
.filter-item + .filter-item{ margin-top:2px }
.filter-item:hover{ background:var(--surface-sunken) }
.filter-item:hover::before{ border-color:var(--faint) }
.filter-item[aria-pressed="true"]{ background:var(--blue-soft); color:var(--blue); font-weight:700 }
.filter-item[aria-pressed="true"]::before{
  border-color:var(--blue); background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.2 2.3 4.8-5' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.filter-item[aria-pressed="true"] .num{ color:var(--blue) }

/* 사이드 메뉴 (나의 강의실) — filter-group과 같은 박스, 체크박스 없는 단일 선택 */
.side-nav__item{
  display:flex; align-items:center; gap:var(--s-3); width:100%;
  border-radius:var(--r-md); padding:10px 12px;
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-3); background:transparent;
  transition:background-color .15s, color .15s;
}
.side-nav__item .num{ margin-left:auto; font-size:var(--fs-xs); color:var(--disabled); font-variant-numeric:tabular-nums }
.side-nav__item + .side-nav__item{ margin-top:2px }
.side-nav__item:hover{ background:var(--surface-sunken) }
/* 탭(button)은 aria-selected, 페이지 이동(a)은 aria-current로 선택 상태를 나타냅니다 */
.side-nav__item[aria-selected="true"],
.side-nav__item[aria-current="page"]{ background:var(--blue-soft); color:var(--blue); font-weight:700 }
.side-nav__item[aria-selected="true"] .num,
.side-nav__item[aria-current="page"] .num{ color:var(--blue) }

.side-card{
  background:var(--surface); border-radius:var(--r-lg);
  padding:16px; margin-top:10px; text-align:center;
  font-size:var(--fs-xs); color:var(--muted); line-height:1.7;
}
.side-card strong{ display:block; font-size:var(--fs-sm); color:var(--ink); margin-bottom:6px }
.side-card .tel{ font-size:var(--fs-md); font-weight:700; color:var(--navy) }

.toolbar{ display:flex; align-items:center; gap:var(--s-4); flex-wrap:wrap; margin-bottom:14px }
.toolbar__result{ font-size:var(--fs-sm); color:var(--muted) }
.toolbar__result b{ color:var(--blue); font-variant-numeric:tabular-nums }
.sort-group{ margin-left:auto; display:flex; gap:var(--s-1)}
.sort-group button{ font-size:var(--fs-sm); color:var(--faint); padding:6px 11px; border-radius:var(--r-md) }
.sort-group button:hover{ color:var(--ink-2) }
.sort-group button[aria-pressed="true"]{ color:var(--ink); font-weight:700; background:var(--surface) }

.empty-state{
  background:var(--surface); border-radius:var(--r-lg);
  padding:48px 20px; text-align:center; color:var(--muted);
}
.empty-state strong{ display:block; font-size:var(--fs-md); color:var(--ink); margin-bottom:6px }

/* --------------------------------------------------------------------------
   17. 실시간 활동 · 상담
   -------------------------------------------------------------------------- */
.live-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--s-5)}

/* 섹션 바탕이 옅은 회색이라 흰 카드가 묻힙니다 — 다른 흰 카드들처럼 테두리로 경계를 만듭니다 */
.live-box{
  display:flex; gap:var(--s-6); padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
/* 폭을 넓혀 '수강생들의 한 걸음 / 더 성장한 순간' 두 줄로 끊기게 합니다 */
.live-box__title{ flex-shrink:0; width:150px; font-size:var(--fs-md); font-weight:700; color:var(--ink); line-height:1.5 }
/* 1초마다 위로 올라가는 티커 — JS가 .live-list를 .live-view로 감싸 클리핑합니다 */
.live-view{ flex:1; min-width:0; overflow:hidden }
.live-list{ display:grid; gap:var(--s-5); flex:1; min-width:0; will-change:transform }
.live-list li{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); color:var(--muted) }
.live-list .state{ flex-shrink:0; font-size:var(--fs-xs); font-weight:700; border-radius:var(--r-sm); padding:3px 8px }
.live-list .state--done{ background:var(--surface-alt); color:var(--muted) }
.live-list .state--issued{ background:var(--blue-soft); color:var(--blue) }
.live-list .date{ margin-left:auto; color:var(--disabled); font-variant-numeric:tabular-nums }

/* 운영시간 안내는 박스 아래에 붙도록 세로 플렉스로 둡니다 */
.tel-box{
  display:flex; flex-direction:column;
  background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:18px 20px;
}
.tel-box__q{ font-size:var(--fs-xs); color:rgba(255,255,255,.72) }
.tel-box__t{ font-size:var(--fs-lg); font-weight:700; line-height:1.3; margin:4px 0 8px }
.tel-box__n{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em }
.tel-box__h{ font-size:var(--fs-xs); color:rgba(255,255,255,.6); margin-top:auto; padding-top:10px; line-height:1.5 }

/* 실시간 카카오톡 상담 배너 — Figma card_cs (86:9854)
   노랑 var(--yellow) / radius 10 / padding 20 / 좌 텍스트 18 Bold · 우 말풍선 38 */
.kakao-box{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  background:var(--yellow); color:var(--ink);
  border-radius:var(--r-xl); padding:20px;
  transition:background .15s ease;
}
.kakao-box:hover{ background:#F7D200 }
.kakao-box__q{
  display:block; font-size:var(--fs-sm); font-weight:600; line-height:1;
  color:rgba(1,1,1,.58); margin-bottom:8px;
}
.kakao-box__t{ display:block; font-size:var(--fs-lg); font-weight:700; line-height:1; letter-spacing:-.02em }
/* 말풍선 — Figma freepik 3D 이미지 (card_cs 291:2652) */
.kakao-box__ico{ flex-shrink:0; display:block; width:44px; height:44px }
.kakao-box__ico img{ display:block; width:100%; height:100%; object-fit:contain }

/* 메인 상담 영역 — 옆 전화 상담 박스와 같은 구성으로 맞춥니다.
   글은 왼쪽 위, 말풍선 아이콘은 오른쪽 아래. (좁은 사이드바용 --sm은 기존 가로형 유지) */
.kakao-box:not(.kakao-box--sm){
  flex-direction:column; align-items:stretch; justify-content:space-between;
  gap:var(--s-4); padding:18px 20px;
}
.kakao-box:not(.kakao-box--sm) .kakao-box__q{ font-size:var(--fs-xs); margin-bottom:4px }
.kakao-box:not(.kakao-box--sm) .kakao-box__t{ font-size:var(--fs-lg); line-height:1.3 }
.kakao-box:not(.kakao-box--sm) .kakao-box__ico{ align-self:flex-end; width:52px; height:52px }

/* 좁은 사이드바(210px)용 축소 변형 */
.kakao-box--sm{ padding:16px; gap:var(--s-4)}
.kakao-box--sm .kakao-box__t{ font-size:var(--fs-md) }
.kakao-box--sm .kakao-box__ico{ width:34px; height:34px }

/* --------------------------------------------------------------------------
   18. 신뢰 밴드
   -------------------------------------------------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); margin-bottom:20px }
.stat{ background:rgba(255,255,255,.08); border-radius:var(--r-lg); padding:20px 18px }
.stat b{ display:block; font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums }
.stat b small{ font-size:var(--fs-sm); font-weight:700; color:var(--blue-line) }
.stat span{ font-size:var(--fs-xs); color:rgba(255,255,255,.65) }

/* 주무부처 로고 띠 — 좌우 끝을 페이드 처리하고 안쪽에서 가로로 흘려보냅니다 */
.gov-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.gov-marquee__track{ display:flex; width:max-content }
/* JS가 사본을 붙인 뒤에만 굴립니다 (사본 없이 움직이면 빈 구간이 생깁니다) */
.gov-marquee__track.is-rolling{ animation:gov-roll 45s linear infinite }
.gov-marquee:hover .gov-marquee__track.is-rolling{ animation-play-state:paused }
@keyframes gov-roll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

.gov-row{ display:flex; gap:var(--s-4); flex-wrap:nowrap; padding-right:10px }
.gov-row li{
  display:inline-flex; align-items:center; flex:none;
  background:rgba(255,255,255,.08); border-radius:var(--r-lg);
  padding:10px 16px;
}
/* 로고에 부처명이 함께 들어 있어 텍스트 없이 로고만 놓습니다 (흰색 버전) */
.gov-row img{ display:block; height:28px; width:auto }

@media (prefers-reduced-motion:reduce){
  .gov-marquee__track.is-rolling{ animation:none }
}

/* --------------------------------------------------------------------------
   19. 취득 절차
   -------------------------------------------------------------------------- */
.step-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); counter-reset:step }
/* 테두리는 기본값으로 둡니다 — 메인(회색 배경)·취득 절차(흰 배경) 어디서든 동일하게 보입니다 */
.step{
  position:relative;   /* 소요시간 배지를 카드 우측 상단에 고정 */
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card);
}
.step::before{
  counter-increment:step; content:"STEP 0" counter(step);
  display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.09em;
  color:var(--faint); margin-bottom:10px;   /* 아이콘·배지가 파랑이라 라벨은 회색으로 */
}
.step .ph{ margin-bottom:11px }
/* 단계 아이콘 — Figma Frame 316에서 내려받은 SVG (1~4단계 순서대로) */
.step__ico{ display:block; width:40px; height:40px; margin-bottom:11px }
.step__head{ margin-bottom:4px }
.step h3{ font-size:var(--fs-sm); font-weight:700; color:var(--ink) }
.step p{ font-size:var(--fs-sm); color:var(--muted) }
/* 소요시간 배지 — STEP 라벨과 같은 선상, 카드 오른쪽 위 */
.step__dur{
  position:absolute; top:var(--pad-card-y); right:var(--pad-card);
  font-size:var(--fs-xs); font-weight:700; line-height:1.55;
  color:var(--blue); background:var(--blue-soft); border-radius:var(--r-sm); padding:0 8px;
}

/* --------------------------------------------------------------------------
   20. 후기
   -------------------------------------------------------------------------- */
/* 메인 합격후기 카드 — 상세페이지 후기(.drev__card)와 같은 구조 */
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.review{
  display:flex; flex-direction:column; padding:20px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.review__top{ display:flex; gap:var(--s-5); align-items:flex-start }
/* 자격증 사진 — 1:1 */
.review__ava{ width:72px; height:72px; aspect-ratio:1; border-radius:var(--r-md); flex-shrink:0 }
.review h3{
  font-size:var(--fs-md); font-weight:700; color:var(--ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.review__who{ margin-top:8px; font-size:var(--fs-sm); color:var(--muted) }
.review__text{
  margin-top:14px; font-size:var(--fs-xs); color:var(--muted); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.review__tags{ display:flex; align-items:center; gap:var(--s-4); margin-top:14px; flex-wrap:wrap }
.review__tags span{
  background:var(--blue-soft); color:var(--ink-3); border-radius:var(--r-md);
  padding:7px 11px; font-size:var(--fs-xs); font-weight:600;
}
.review p{ font-size:var(--fs-xs); color:var(--muted); line-height:1.55 }
.review__foot{
  display:flex; align-items:center; gap:var(--s-3); margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--disabled);
}
.review__help{
  margin-left:auto; background:var(--surface-sunken); border-radius:var(--r-md);
  padding:3px 8px; font-size:var(--fs-xs); font-weight:700; color:var(--muted);
}

/* 합격후기 페이지 — 히어로 */
.review-hero{
  background:var(--navy); color:#fff; border-radius:var(--r-lg);
  padding:30px 34px; display:grid; gap:var(--s-7);
}
.review-hero__top{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-8)}
/* 텍스트가 남는 공간을 채워, 이미지가 항상 오른쪽에 나란히 붙게 합니다 */
.review-hero__top > div:first-child{ flex:1 1 auto; min-width:0 }
/* 우측 장식 그래픽 (Figma freepik__background 150:4319, 원본 비율 2720:1360) */
.review-hero__graphic{ flex:0 0 auto; width:230px; max-width:38%; height:auto; align-self:center }
@media (max-width:980px){
  .review-hero__top{ flex-wrap:wrap }
  .review-hero__graphic{ display:none }
}
.review-hero__brand{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); font-weight:700; color:rgba(255,255,255,.75) }
.review-hero h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.025em; margin:8px 0 10px }
.review-hero p{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); line-height:1.7 }
.review-hero__event{ background:rgba(255,255,255,.1); border-radius:var(--r-lg); padding:16px 20px }
.review-hero__event strong{ display:block; font-size:var(--fs-sm); font-weight:700; margin-bottom:3px }
.review-hero__event span{ font-size:var(--fs-sm); color:rgba(255,255,255,.72) }

/* 합격후기 목록 (행 형태) */
/* Figma card_review(249:12331) 구조 —
   ① 사진 + (제목·작성자) ② 과정 태그 ③ 본문 ④ 도움됐어요(오른쪽 아래) */
.review-row{
  display:flex; flex-direction:column; gap:var(--s-5);
  background:var(--surface); border-radius:var(--r-lg);
  padding:24px;   /* 상하좌우 동일 — 태블릿 20px · 모바일 16px (아래 미디어쿼리) */
}
.review-row__top{ display:flex; gap:var(--s-6); align-items:stretch }
.review-row__top > .ph{ flex-shrink:0 }
.review-row__top > div{
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:space-between;   /* 작성자·날짜는 사진 아래끝에 맞춤 */
}
.review-row + .review-row{ margin-top:10px }
.review-row:hover{ background:var(--surface-sunken) }
.review-row__tags{ display:flex; gap:var(--s-2); flex-wrap:wrap }
.review-row__tags span{
  background:var(--blue-soft); color:var(--ink-3); border-radius:var(--r-md);
  padding:7px 11px; font-size:var(--fs-xs); font-weight:600;
}
/* 도움됐어요 — Figma Button/outline (135:2705). 클릭 시 채워진 엄지 + 파란 카운트 */
.review-row__help{
  flex-shrink:0; align-self:flex-end;   /* 카드 오른쪽 아래 */
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-width:104px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-md);   /* 기본은 회색 — 누른 뒤에만 파랑 */
  padding:6px 12px; font-size:var(--fs-sm); font-weight:600; color:var(--ink-3);
  transition:background-color .12s, border-color .12s;
}
.review-row__help:hover{ background:var(--blue-soft) }
.review-row__help b{ color:var(--ink-3); font-weight:600 }
.review-row__help .helpful__ico{ display:inline-flex; width:16px; height:16px; color:var(--ink-3) }
.review-row__help .helpful__ico svg{ width:100%; height:100% }
.review-row__help .ico-fill{ display:none }
/* 활성(내가 눌렀을 때) — 엄지 채우고 카운트는 파랑 */
.review-row__help.is-active{ border-color:var(--blue) }
.review-row__help.is-active .helpful__ico{ color:var(--blue) }
.review-row__help.is-active .ico-line{ display:none }
.review-row__help.is-active .ico-fill{ display:block }
.review-row__help.is-active b{ color:var(--blue) }
.review-row h2{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); line-height:1.4 }
.review-row p{ font-size:var(--fs-sm); color:var(--muted); line-height:1.75; margin:0 }
/* 본문은 4줄까지만 (Figma 기준) */
.review-row p:not(.review-row__meta):not(.review-row__tags){
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.review-row__meta{ font-size:var(--fs-xs) !important; color:var(--faint) !important }

/* 태블릿·PC는 이전처럼 '사진 | 내용' 2열로 되돌립니다.
   모바일(Figma 249:12331)만 세로 4단 구조를 씁니다.
   래퍼를 display:contents로 풀어 사진·제목·작성자를 직접 배치합니다. */
@media (min-width:561px){
  .review-row{
    display:grid; align-items:center;
    grid-template-columns:140px 1fr auto;
    grid-template-areas:
      "photo tags  help"
      "photo title title"
      "photo body  body"
      "photo meta  meta";
    column-gap:var(--s-8); row-gap:0;
  }
  .review-row__top, .review-row__top > div{ display:contents }
  .review-row__top > .ph{ grid-area:photo }
  .review-row__tags{ grid-area:tags; align-self:start }
  /* 제목·본문이 2·3열에 걸쳐 있어 3열 폭이 넓어집니다 —
     버튼이 따라 늘어나지 않도록 오른쪽 끝에 붙입니다 */
  .review-row__help{ grid-area:help; align-self:start; justify-self:end }
  .review-row h2{ grid-area:title; font-size:var(--fs-md); margin:5px 0 3px }
  .review-row p:not(.review-row__meta):not(.review-row__tags){ grid-area:body; -webkit-line-clamp:2 }
  .review-row__meta{
    grid-area:meta; margin-top:4px; text-align:right;
    color:var(--disabled) !important;
  }
}

.review-filter{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap; margin-bottom:16px }
.select-box{
  /* 네이티브 화살표를 없애고 커스텀 셰브론을 우측 14px에 고정 —
     좌측 텍스트 패딩(14px)과 대칭을 맞춥니다. */
  appearance:none; -webkit-appearance:none;
  /* select는 배경색이 필드 전체를 칠하므로 마스크 대신 이미지로 두되,
     공통 셰브론과 같은 모양·같은 회색(--faint)을 씁니다 */
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23919191' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  background-size:16px;
  border:0; border-radius:var(--r-md);
  padding:9px 34px 9px 14px; font-size:var(--fs-sm); color:var(--ink-2); font-weight:600;
  line-height:1.4; cursor:pointer;
}
.review-filter .sort-group{ margin-left:auto }   /* 총 개수 표기를 없애 정렬 버튼을 오른쪽 끝으로 */

/* --------------------------------------------------------------------------
   21. FAQ
   -------------------------------------------------------------------------- */
.faq{ max-width:760px; margin:0 auto; display:grid; gap:var(--s-3)}
.faq--wide{ max-width:none }
.faq__item{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden }
.faq__q{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-5); width:100%;
  padding:18px 20px; font-size:var(--fs-sm); font-weight:700; color:var(--ink); text-align:left;
}
/* 접기·펴기 화살표 (공통) — ⌄ 글자 대신 SVG 셰브론, 박스로 수직 중앙 정렬.
   배경 이미지 대신 마스크로 그려 색을 background-color 한 곳에서만 관리합니다
   (색을 바꾸려고 data URI를 여러 벌 복제하지 않아도 됩니다). */
.faq__q .arrow,
.panel-toggle .chev,
.filter-toggle .chev,
.footer__box .chev{
  flex-shrink:0; width:22px; height:22px; font-size:0;
  background-color:var(--faint);
  -webkit-mask:var(--chev) center / 18px no-repeat;
  mask:var(--chev) center / 18px no-repeat;
  transition:transform .18s;
}
.faq__q[aria-expanded="true"] .arrow,
.panel-toggle[aria-expanded="true"] .chev,
.filter-toggle[aria-expanded="true"] .chev,
.footer__box[aria-expanded="true"] .chev{ transform:rotate(180deg) }
/* 부드럽게 펼쳐지고 접히는 아코디언 — grid-template-rows 0fr↔1fr 모프.
   실제 내용 높이를 단일 속성으로 애니메이션하므로 높이 측정 없이 열림·닫힘 모두 매끄럽습니다.
   JS가 내용을 .faq__a-inner로 감싸 클리핑을 담당하게 합니다. */
.faq__a{
  display:grid; grid-template-rows:0fr; opacity:0;
  background:var(--surface-sunken);
  font-size:var(--fs-sm); color:var(--muted); line-height:1.75;
  transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1), opacity .24s ease;
}
.faq__q[aria-expanded="true"] + .faq__a{ grid-template-rows:1fr; opacity:1 }
/* 클리핑 담당(패딩 없음 — 패딩이 있으면 0fr가 그 높이로 고정되어 안 닫힘) */
.faq__a-inner{ overflow:hidden; min-height:0 }
/* 실제 여백은 안쪽 요소가 담당 */
.faq__a-pad{ padding:14px 20px 16px }
/* JS 미실행(폴백) 시에는 hidden 속성으로 접힌 항목을 감춥니다 */
.faq__a[hidden]{ display:none }

/* --------------------------------------------------------------------------
   22. CTA · Footer
   -------------------------------------------------------------------------- */
/* 시작점을 남색에서 Blue/400으로 올리고 Blue/300으로 끝내 한 단계 밝게 —
   흰 본문(78% 흰색)이 읽히는 선에서 가장 밝은 조합입니다 */
.cta-band{
  background:linear-gradient(120deg,var(--blue),var(--blue-300));
  color:#fff; text-align:center; padding:52px 20px;
}
.cta-band h2{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.022em; text-wrap:balance }
.cta-band p{ font-size:var(--fs-sm); color:rgba(255,255,255,.78); margin:9px 0 22px }
.cta-band__aux{ margin-top:13px; font-size:var(--fs-xs); color:rgba(255,255,255,.6) }

.footer{ background:var(--ink-2); color:var(--faint); padding:32px 0; font-size:var(--fs-xs) }
.footer__grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:var(--s-8)}
.footer__links{ display:flex; gap:var(--s-5); margin-bottom:11px; font-size:var(--fs-xs); font-weight:700; color:var(--line); flex-wrap:wrap }
.footer__links a:hover{ color:#fff }
.footer address{ font-style:normal; line-height:1.85 }
.footer__side{ display:grid; gap:var(--s-3); align-content:start }
.footer__box{
  background:#2b2b2b; border-radius:var(--r-lg); padding:12px 15px;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
}
.footer__box:hover{ background:#3a3a3a }
button.footer__box{ width:100%; text-align:left }

/* 패밀리 사이트 드롭다운 — 푸터 하단이라 위로 열립니다 */
.footer__family{ position:relative }
.footer__family-list{
  position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:5;
  background:#2b2b2b; border-radius:var(--r-lg); padding:6px; display:grid; gap:var(--s-1);
  box-shadow:0 10px 28px rgba(0,0,0,.4);
}
.footer__family-list[hidden]{ display:none }
.footer__family-list a{ display:block; padding:10px 12px; border-radius:var(--r-md); font-size:var(--fs-xs); color:var(--line) }
.footer__family-list a:hover{ background:#3a3a3a }
.footer__box strong{ display:block; color:var(--line); font-size:var(--fs-xs) }
.footer__legal{ margin-top:20px; padding-top:16px; color:var(--muted); font-size:var(--fs-xs); background:none }

/* --------------------------------------------------------------------------
   23. 상세페이지
   -------------------------------------------------------------------------- */
.detail-hero{
  position:relative; text-align:center; color:#fff; padding:46px 20px 42px;
  background:
    linear-gradient(180deg,rgba(8,26,54,.5) 0%,rgba(8,26,54,.78) 55%,var(--navy) 100%),
    linear-gradient(120deg,#3a6ea8,#7c9cc4);
  /* 실제 배경 사진 적용 시 두 번째 레이어를 url()로 교체 */
}
.detail-hero__gov{ display:inline-flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); font-weight:700; margin-bottom:14px }
.detail-hero h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em; line-height:1.25 }
.detail-hero__rule{ width:44px; height:1.5px; background:rgba(255,255,255,.5); margin:18px auto; border:0 }
.detail-hero p{ font-size:var(--fs-sm); color:rgba(255,255,255,.82); max-width:62ch; margin:0 auto; line-height:1.7 }

.detail-spec{
  max-width:var(--container); margin:-20px auto 0; padding:0 20px;
  display:grid; grid-template-columns:1.75fr 1fr; gap:var(--s-5); position:relative; z-index:2;
}
.spec-card{
  background:var(--surface); border-radius:var(--r-lg); padding:22px 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-8);
}
.spec-card div{ display:flex; gap:var(--s-4); align-items:center; font-size:var(--fs-sm); color:var(--ink-3) }
.spec-card .label{
  flex-shrink:0; min-width:64px; text-align:center;
  background:var(--surface-sunken); border-radius:var(--r-sm); padding:3px 8px;
  font-size:var(--fs-xs); font-weight:700; color:var(--muted);
}
.spec-card b{ color:var(--ink); font-weight:700 }
.spec-card .is-fee{ color:var(--red); font-weight:700 }

.reg-card{ background:var(--surface); border-radius:var(--r-lg); padding:22px; text-align:center }
.reg-card__label{ font-size:var(--fs-xs); color:var(--muted) }
.reg-card__no{
  font-size:var(--fs-lg); font-weight:700; color:var(--navy);
  letter-spacing:-.02em; margin:3px 0 8px; font-variant-numeric:tabular-nums;
}
.reg-card p{ font-size:var(--fs-xs); color:var(--faint); line-height:1.6; margin-bottom:12px }

.free-band{ max-width:var(--container); margin:16px auto 0; padding:0 20px }
.free-band__in{
  background:var(--blue-soft); border-radius:var(--r-lg); padding:22px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap;
}
.free-band__label{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); margin-bottom:4px }
.free-band h2{
  font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.025em;
  display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap;
}
.free-band h2 .zero{ font-size:var(--fs-2xl); color:var(--navy) }
.free-band h2 del{ font-size:var(--fs-md); color:var(--faint); font-weight:700 }
.free-band__note{ font-size:var(--fs-xs); color:var(--muted); margin-top:6px }

/* 탭 밑줄 — 기능적 최소선 유지 */
.detail-tabs{
  display:flex; overflow-x:auto;
  max-width:var(--container); margin:34px auto 22px; padding:0 20px;
  background:linear-gradient(to top,var(--line) 0 1.5px,transparent 1.5px);
}
.detail-tabs a{
  padding:12px 18px; font-size:var(--fs-sm); font-weight:700; color:var(--faint);
  border-bottom:2.5px solid transparent; white-space:nowrap;
}
.detail-tabs a:hover{ color:var(--ink-2) }
.detail-tabs a[aria-current="true"]{ color:var(--blue); border-color:var(--blue) }

.detail-block{ background:var(--surface); border-radius:var(--r-lg); padding:24px; margin-bottom:14px }
.detail-block h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:14px }
.detail-block h2 .sub{ font-weight:600; color:var(--faint); font-size:var(--fs-sm) }
.detail-block > p{ font-size:var(--fs-sm); color:var(--muted) }

.who-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4)}
.who{ background:var(--surface-sunken); border-radius:var(--r-lg); padding:15px; font-size:var(--fs-xs); color:var(--muted) }
.who .ph{ margin-bottom:9px }
.who b{ display:block; color:var(--ink); font-size:var(--fs-sm); margin-bottom:3px }

.req-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-4); text-align:center }
/* 발급요건 링차트 카드 — div.req로 한정해 폼 별표(span.req)와 분리 */
div.req{ background:var(--surface-sunken); border-radius:var(--r-lg); padding:18px 12px }
.req__label{ font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:10px }
.ring{
  width:60px; height:60px; margin:0 auto 10px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-md); font-weight:700; color:var(--navy);
  background:conic-gradient(var(--blue) 0 var(--pct,60%),var(--line) 0);
}
.ring::after{ content:""; position:absolute; inset:7px; border-radius:50%; background:var(--surface-sunken) }
.ring span{ position:relative; z-index:1 }
.req__desc{ font-size:var(--fs-xs); color:var(--faint); line-height:1.5 }

.curriculum{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1) var(--s-5)}
.curriculum li{
  display:flex; gap:var(--s-4); align-items:center; padding:9px 12px; font-size:var(--fs-sm);
  background:var(--surface-sunken); border-radius:var(--r-md);
}
.curriculum .no{
  flex-shrink:0; background:var(--navy); color:#fff; border-radius:var(--r-sm);
  padding:2px 7px; font-size:var(--fs-xs); font-weight:700; font-variant-numeric:tabular-nums;
}
.curriculum .title{ color:var(--ink-3) }
.curriculum__more{
  grid-column:1/-1; justify-content:center; background:none !important;
  font-size:var(--fs-xs); color:var(--faint); padding-top:10px;
}

/* 표 — 테두리 + 라운드는 .dtable과 동일한 방식 (radius를 잘라내려면 separate + overflow) */
.info-table{
  border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
}
.info-table th{
  background:var(--surface-sunken); color:var(--muted); font-weight:700;
  text-align:left; padding:11px 15px; width:120px;
  border-bottom:1px solid var(--line);
}
.info-table td{ padding:11px 15px; color:var(--ink-3); border-bottom:1px solid var(--line) }
.info-table tr:last-child th,
.info-table tr:last-child td{ border-bottom:0 }

.notice{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--red-soft); border-radius:var(--r-lg);
  padding:15px 17px; font-size:var(--fs-sm); color:var(--red); line-height:1.75;
}
.notice--info{ background:var(--surface-sunken); color:var(--muted) }
.notice b{ color:inherit; font-weight:700 }

.detail-cta{
  /* 화면 아래 붙어 따라다니는 신청 바입니다. 본문 중간의 앵커 탭바(.dtabs · z 50)
     보다 위에 있어야 스크롤 중 탭바가 이 바를 덮고 지나가지 않습니다.
     헤더(z 60)·시트·모달보다는 아래에 둡니다. */
  position:sticky; bottom:0; z-index:55; background:#fff; padding:15px 20px;
  box-shadow:0 -4px 16px rgba(0,0,0,.10);
  display:flex; align-items:center; justify-content:center; gap:var(--s-5); flex-wrap:wrap;
}
/* 데스크탑: 래퍼를 투명 처리(display:contents)해 4요소를 한 줄로, 순서만 원래대로 유지 */
.detail-cta__top, .detail-cta__bottom{ display:contents }
.detail-cta__label{ order:1 }
.detail-cta .timer{ order:2 }
.detail-cta__left{ order:3 }
/* 이벤트·카운트다운·남았습니다는 붙여 두고, 신청 버튼만 넉넉히 띄웁니다 */
.detail-cta .btn--cta{ order:4; margin-left:28px }
/* 무료수강 이벤트 라벨 — 알람 아이콘 + 파란 강조 (Figma 576) */
.detail-cta__label{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-md); font-weight:700; color:#0039B2 }
.detail-cta__alarm{ width:30px; height:30px; flex-shrink:0 }
.detail-cta__left{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }

/* 카운트다운 — 각 자릿수가 개별 연블루 박스 */
.timer{ display:flex; align-items:center; gap:var(--s-2); font-variant-numeric:tabular-nums }
.timer__unit{ display:flex; gap:var(--s-1)}
.timer__box{
  display:flex; align-items:center; justify-content:center;
  min-width:34px; height:46px; padding:0 6px;
  background:var(--blue-soft); color:var(--navy);
  border-radius:var(--r-sm); font-size:var(--fs-2xl); font-weight:700; line-height:1;
}
.timer__sep{ text-decoration:none; color:#596E83; font-size:var(--fs-xl); font-weight:700; margin:0 2px }

/* CTA 버튼 — Figma #0039B2 */
.btn--cta{ background:#0039B2; color:#fff; padding:14px 30px; font-size:var(--fs-md); border-radius:var(--r-md) }
.btn--cta:hover{ background:#002d8c }

/* 모바일 — 참고 이미지 구조: 위(라벨+큰 버튼) / 아래(큰 카운트다운+남았습니다) 2줄.
   색상은 그대로, 배치·크기만 변경합니다. */
@media (max-width:560px){
  .detail-cta{ flex-direction:column; align-items:stretch; gap:var(--s-5); padding:14px 18px }
  .detail-cta__top{ display:flex; align-items:center; gap:var(--s-5)}
  .detail-cta__bottom{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3)}
  .detail-cta__label{ flex-shrink:0; font-size:var(--fs-sm); line-height:1.2 }
  .detail-cta__alarm{ width:26px; height:26px }
  .detail-cta .btn--cta{ flex:1; margin-left:0; padding:13px 18px; font-size:var(--fs-md); font-weight:700 }
  /* 카운트다운을 아래 줄에 — 화면을 다 차지하지 않게 한 단계 작게 */
  .detail-cta .timer{ gap:var(--s-1)}
  .timer__unit{ gap:var(--s-1)}
  .timer__box{ min-width:26px; height:36px; padding:0 3px; font-size:var(--fs-xl) }
  .timer__sep{ font-size:var(--fs-md); margin:0 1px }
  .detail-cta__left{ flex-shrink:0; font-size:var(--fs-sm); line-height:1.2; text-align:right }
}

/* --------------------------------------------------------------------------
   24. 폼 · 신청 플로우
   -------------------------------------------------------------------------- */
.steps-indicator{
  display:flex; gap:var(--s-2); align-items:center; justify-content:center;
  padding:16px 0 4px; font-size:var(--fs-sm); font-weight:700; color:var(--disabled);
}
.steps-indicator li{ display:flex; align-items:center; gap:var(--s-2)}
.steps-indicator .n{
  width:21px; height:21px; border-radius:50%; background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xs);
}
/* 단계 이름은 모노톤으로만 두고, 상태는 번호 뱃지 색으로 구분합니다.
   현재 단계가 가장 진하고 완료·예정 순으로 옅어집니다. */
.steps-indicator .is-current{ color:var(--ink-2) }
.steps-indicator .is-current .n{ background:var(--blue); color:#fff }
.steps-indicator .is-done{ color:var(--muted) }
.steps-indicator .is-done .n{ background:var(--blue-line); color:var(--blue) }
.steps-indicator .bar{ width:30px; height:1.5px; background:var(--line) }
@media (max-width:560px){
  .steps-indicator{ flex-wrap:wrap }
  .steps-indicator .bar{ width:16px }
}

.form{ max-width:560px; margin:0 auto; display:grid; gap:var(--s-5)}
.form-card{ background:var(--surface); border-radius:var(--r-lg); padding:var(--pad-card) }
.field label{ display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); margin-bottom:6px }
.field__label{ display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); margin-bottom:6px }
/* 입력 아래 보조 설명 */
.field__note{ margin-top:7px; font-size:var(--fs-xs); color:var(--faint); line-height:1.6 }
/* 체크박스 줄 — 함께 수강한 과정처럼 여러 개를 고르는 경우 */
.check-row{ display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6) }
/* .field label{display:block}이 더 구체적이라 선택자를 한 단계 올립니다 */
.field .check{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-sm); font-weight:400; color:var(--ink-2); margin-bottom:0;
}
/* 크기·모양은 공통 체크박스 규칙(아래 input[type="checkbox"])을 그대로 씁니다 */

.field .req{ color:var(--red) }
.field .hint{ font-weight:600; color:var(--faint) }
/* 폼 입력 — 테두리가 조작 가능함의 신호이므로 유지 */
.field input,
.field select,
.field textarea{
  width:100%; min-width:0;   /* 기본 입력 폭(약 180px)이 좁은 화면에서 칸을 밀어내지 않게 */
  border:1.5px solid var(--line); border-radius:var(--r-lg);
  padding:12px 14px; font-size:var(--fs-sm); background:var(--surface);
}
.field input::placeholder{ color:var(--disabled) }
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--blue); outline:0 }

/* --------------------------------------------------------------------------
   체크박스 — Figma checkbox (882:2233 기본 / 882:2230 선택)
   기본은 흰 바탕 + 옅은 회색 체크, 선택하면 파란 바탕 + 흰 체크로 바뀝니다.
   원본은 24px이지만 14px 본문 옆에 놓이는 자리가 대부분이라 20px로 맞췄습니다.
   .field input 규칙(폭 100%·큰 radius·패딩)을 덮어야 해서 그 아래에 둡니다.
   -------------------------------------------------------------------------- */
input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  flex:none; width:20px; height:20px; min-width:0; margin:0; padding:0;
  border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.9706 4.97C11.1115 4.83589 11.299 4.76175 11.4935 4.76322C11.688 4.76469 11.8743 4.84166 12.0131 4.97789C12.1519 5.11412 12.2324 5.29895 12.2375 5.49338C12.2427 5.68781 12.1721 5.87663 12.0406 6.02L8.05065 11.01C7.98204 11.0839 7.89923 11.1432 7.80718 11.1844C7.71513 11.2255 7.61572 11.2477 7.5149 11.2496C7.41408 11.2514 7.31392 11.233 7.2204 11.1952C7.12689 11.1575 7.04194 11.1013 6.97065 11.03L4.32465 8.384C4.25096 8.31534 4.19186 8.23254 4.15086 8.14054C4.10987 8.04854 4.08783 7.94923 4.08605 7.84852C4.08428 7.74782 4.1028 7.64779 4.14052 7.5544C4.17824 7.46102 4.23439 7.37618 4.30561 7.30496C4.37683 7.23374 4.46166 7.1776 4.55505 7.13988C4.64844 7.10216 4.74847 7.08363 4.84917 7.08541C4.94987 7.08719 5.04918 7.10923 5.14118 7.15022C5.23318 7.19121 5.31598 7.25031 5.38465 7.324L7.47865 9.417L10.9516 4.992L10.9706 4.97Z' fill='%23D9D9D9'/%3E%3C/svg%3E") center / 15px no-repeat;
  cursor:pointer;
  transition:background-color .15s, border-color .15s;
}
/* 선택 상태에서도 Figma는 회색 테두리를 유지합니다.
   채움색만 Figma의 #007BFF 대신 사이트 팔레트의 --blue를 씁니다 */
input[type="checkbox"]:checked{
  background-color:var(--blue);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M10.9706 4.97C11.1115 4.83589 11.299 4.76175 11.4935 4.76322C11.688 4.76469 11.8743 4.84166 12.0131 4.97789C12.1519 5.11412 12.2324 5.29895 12.2375 5.49338C12.2427 5.68781 12.1721 5.87663 12.0406 6.02L8.05065 11.01C7.98204 11.0839 7.89923 11.1432 7.80718 11.1844C7.71513 11.2255 7.61572 11.2477 7.5149 11.2496C7.41408 11.2514 7.31392 11.233 7.2204 11.1952C7.12689 11.1575 7.04194 11.1013 6.97065 11.03L4.32465 8.384C4.25096 8.31534 4.19186 8.23254 4.15086 8.14054C4.10987 8.04854 4.08783 7.94923 4.08605 7.84852C4.08428 7.74782 4.1028 7.64779 4.14052 7.5544C4.17824 7.46102 4.23439 7.37618 4.30561 7.30496C4.37683 7.23374 4.46166 7.1776 4.55505 7.13988C4.64844 7.10216 4.74847 7.08363 4.84917 7.08541C4.94987 7.08719 5.04918 7.10923 5.14118 7.15022C5.23318 7.19121 5.31598 7.25031 5.38465 7.324L7.47865 9.417L10.9516 4.992L10.9706 4.97Z' fill='%23fff'/%3E%3C/svg%3E");
}
input[type="checkbox"]:focus-visible{ outline:2px solid var(--blue); outline-offset:2px }
input[type="checkbox"]:disabled{ cursor:default; opacity:.5 }

.summary{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden }
.summary li{
  display:flex; justify-content:space-between; gap:var(--s-5);
  padding:12px 16px; font-size:var(--fs-sm);
}
.summary li:nth-child(even){ background:var(--surface-sunken) }
.summary .k{ color:var(--faint); flex-shrink:0 }
.summary .v{ color:var(--ink); font-weight:700; text-align:right }
.summary li.is-total{ background:var(--blue-soft) }
.summary li.is-total .v{ color:var(--blue); font-size:var(--fs-md) }
/* 취소선 정가는 어느 행에 있든 회색으로 — 강조는 실제 수강료 쪽에 둡니다 */
.summary .v del{ color:var(--faint); font-weight:400; font-size:var(--fs-sm) }

.agree{
  display:flex; gap:var(--s-4); align-items:flex-start;
  background:var(--surface-sunken); border-radius:var(--r-lg); padding:13px 15px;
  font-size:var(--fs-xs); color:var(--muted); line-height:1.75;
}
.agree input{ margin-top:3px; flex-shrink:0 }
.agree b{ color:var(--ink-2) }

.complete{ max-width:560px; margin:0 auto; text-align:center; padding:10px 0 }
.complete__mark{
  width:58px; height:58px; margin:0 auto 14px; border-radius:50%;
  background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl);
}
.complete h1{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin-bottom:5px }
.complete__sub{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:18px }
.next-list{ display:grid; gap:var(--s-3); text-align:left; margin-bottom:18px }
.next-list li{
  display:flex; gap:var(--s-5); align-items:center;
  background:var(--surface); border-radius:var(--r-lg); padding:14px 16px;
  font-size:var(--fs-sm); color:var(--ink-3);
}
.next-list b{ color:var(--ink) }

/* 로그인 페이지 — 래퍼·제목은 회원가입과 같은 .auth-wrap / .page-head를 씁니다 */
.login-notice{
  background:var(--blue-soft); border-radius:var(--r-lg); padding:14px 16px;
  font-size:var(--fs-sm); color:var(--navy); line-height:1.7; margin-bottom:18px;
}
.login-links{ display:flex; justify-content:center; gap:var(--s-5); margin-top:16px; font-size:var(--fs-sm); color:var(--muted) }
.login-links a:hover{ text-decoration:underline }

/* 인증 계열 페이지(회원가입·찾기·완료) 공통 래퍼 */
.auth-wrap{ max-width:460px; margin:0 auto; padding-top:var(--s-9) }
.auth-wrap .page-head h1{ font-size:var(--fs-2xl) }
.auth-links{ text-align:center; margin-top:16px; font-size:var(--fs-sm); color:var(--muted) }
.auth-links a{ color:var(--blue); font-weight:600 }
.auth-links a:hover{ text-decoration:underline }

/* 정책 문서 (이용약관·개인정보처리방침) */
.policy{ line-height:1.75 }
.policy-sec + .policy-sec{ margin-top:26px; padding-top:26px; border-top:1px solid var(--line) }
.policy-sec h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:10px }
.policy-sec p{ font-size:var(--fs-sm); color:var(--ink-3) }
.policy-list{ display:grid; gap:var(--s-2); margin-top:4px }
.policy-list li{ position:relative; padding-left:13px; font-size:var(--fs-sm); color:var(--ink-3) }
.policy-list li::before{ content:"·"; position:absolute; left:3px; color:var(--faint); font-weight:700 }
.policy .info-table{ margin-top:4px }

/* 고객센터 상단 3분할 */
.support-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:var(--s-5); margin-bottom:8px }
.support-card{ display:flex; flex-direction:column; gap:var(--s-2); justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card) }
.support-card:hover{ border-color:var(--blue) }
.support-card b{ font-size:var(--fs-md); color:var(--ink); font-weight:700 }
.support-card span{ font-size:var(--fs-xs); color:var(--muted) }
@media (max-width:980px){ .support-grid{ grid-template-columns:1fr } }

/* --------------------------------------------------------------------------
   25. 나의 강의실
   -------------------------------------------------------------------------- */
.my-card{
  background:var(--surface); border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card);
  display:grid; grid-template-columns:1fr 190px; gap:var(--s-7); align-items:center;
  /* 수강중(3버튼)·수강종료(2버튼) 카드 높이 통일.
     3버튼 열의 실측 높이(약 187px)보다 크게 잡아야 두 탭이 모두 이 값으로 결정된다. */
  min-height:192px;
}
.my-card + .my-card{ margin-top:var(--s-5) }
/* 버튼 열이 없는 단일 컬럼 변형 — 발급 신청 현황 카드 */
.my-card--stack{ grid-template-columns:1fr; align-items:stretch; min-height:0; gap:0 }
/* 진도율·상태 문구가 없는 짧은 카드 — 합격후기 목록 (버튼 2개 열 기준) */
.my-card--sm{ min-height:140px }

/* 진행 단계는 카드 안에 한 단계 눌린 영역으로 묶어 본문과 분리한다 */
.issue-steps{ background:var(--surface-sunken); border-radius:var(--r-md); padding:13px 16px }
.issue-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-top:14px }
/* 4단계를 카드 폭에 균등하게 펼칩니다 — 왼쪽으로 몰아두면 오른쪽 절반이 빕니다 */
.steps-indicator--left{ justify-content:space-between; padding:0 }
.steps-indicator--left .bar{ flex:1; width:auto; min-width:12px }

/* 모바일 요약 — 4단계가 두 줄로 접히면 한눈에 안 들어와, 현재 단계 + 진행바로 줄입니다.
   내용은 main.js가 위 단계 목록을 읽어 만들어 넣습니다. */
.issue-steps__mini{ display:none }
.issue-steps__now{ display:flex; align-items:baseline; gap:var(--s-2); font-size:var(--fs-sm) }
.issue-steps__now b{ font-weight:700; color:var(--blue) }
.issue-steps__now .txt{ font-weight:600; color:var(--ink-2) }
.issue-steps__now .of{ margin-left:auto; font-size:var(--fs-xs); color:var(--faint) }
.issue-steps__track{
  display:block; height:4px; margin-top:9px; border-radius:var(--r-full);
  background:var(--line); overflow:hidden;
}
.issue-steps__track i{ display:block; height:100%; background:var(--blue); border-radius:inherit }
/* 마지막 단계까지 끝났으면 옅은 파랑 — 단계 뱃지의 완료색과 같은 계열입니다 */
.issue-steps__mini.is-done .issue-steps__now b{ color:var(--blue-300) }
.issue-steps__mini.is-done .issue-steps__track i{ background:var(--blue-300) }
@media (max-width:560px){
  .issue-steps .steps-indicator{ display:none }
  .issue-steps__mini{ display:block }
}
.my-card__head{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; margin-bottom:5px }
.my-card__head h3{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }

.my-card__date{ font-size:var(--fs-sm); color:var(--faint); font-variant-numeric:tabular-nums; margin-bottom:16px }

.progress{ display:flex; align-items:center; gap:var(--s-5)}
.progress__bar{ flex:1; height:8px; border-radius:var(--r-sm); background:var(--surface-alt); overflow:hidden }
.progress__bar i{ display:block; height:100%; background:var(--navy); border-radius:var(--r-sm)}
.progress__value{ font-size:var(--fs-sm); color:var(--muted); white-space:nowrap }
.progress__value b{ font-size:var(--fs-lg); font-weight:700; color:var(--navy); margin-left:5px; font-variant-numeric:tabular-nums }

.my-card__status{ font-size:var(--fs-xs); font-weight:600; margin-top:10px }
/* 상태 문구 톤 — 케이스 번호는 mylecture.html 상단 주석표 참고 */
.my-card__status--pass{  color:var(--green) }   /* 초록 · 6·7   합격 */
.my-card__status--fail{  color:var(--red) }     /* 빨강 · 5     불합격 */
.my-card__status--ready{ color:var(--blue) }    /* 파랑 · 3·4   시험 응시 가능 */
.my-card__status--done{  color:var(--navy) }    /* 남색 · 8·12·13 발급 신청·배송 완료 */
.my-card__status--info{  color:#1F1F1F }        /* 검정 · 1·2·9~11·14~18 일반 안내 */
.my-card__actions{ display:grid; gap:var(--s-2)}

/* 안내·유의사항 블록 — 본문 카드와 구분되도록 옅은 회색 */
.guide-box{ background:var(--surface-alt); border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card); margin-top:12px }
.guide-box strong{ display:block; font-size:var(--fs-sm); color:var(--ink); margin-bottom:10px }
.guide-box ul{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-1) var(--s-8)}
.guide-box li{ position:relative; padding-left:11px; font-size:var(--fs-xs); color:var(--muted); line-height:1.7 }
.guide-box li::before{ content:"•"; position:absolute; left:0; color:var(--blue-line) }

/* --------------------------------------------------------------------------
   26. 목록 (공지사항 등)
   -------------------------------------------------------------------------- */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-8)}
.list-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px }
/* 섹션 제목과 같은 크기·자간으로 통일 */
.list-head h2{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.02em; line-height:1.35; color:var(--ink) }

.notice-list{ display:grid; gap:var(--s-1); font-size:var(--fs-sm); color:var(--ink-3) }
.notice-list li{ display:flex; justify-content:space-between; gap:var(--s-5)}
.notice-list a{ display:flex; justify-content:space-between; gap:var(--s-5); width:100%; padding:9px 12px; border-radius:var(--r-md) }
.notice-list .date{ color:var(--disabled); flex-shrink:0; font-variant-numeric:tabular-nums }

/* 공지사항 · 자주 묻는 질문 (메인, Figma 334:9544) — 배경은 흰색 유지 */
/* 공지 목록을 옅은 테두리 카드로 감싸고 행 사이에 구분선 */
.two-col .notice-list{
  border:1px solid var(--line); border-radius:var(--r-xl); background:var(--surface);
  padding:2px 12px; gap:0;
}
.two-col .notice-list li:not(:last-child){ border-bottom:1px solid var(--line) }
.two-col .notice-list a{ padding:14px 6px; border-radius:0 }
/* FAQ를 개별 라운드 카드로 — 화살표는 공통 셰브론(.faq__q .arrow)을 그대로 씁니다 */
/* 공지사항 · 자주 묻는 질문 두 칸의 아래끝을 맞춥니다.
   각 칸이 세로로 늘어나고, 목록/아코디언이 남는 높이를 나눠 가집니다. */
.two-col > div{ display:flex; flex-direction:column }
.two-col .notice-list{ flex:1; align-content:space-between }
/* .faq의 margin:0 auto가 세로 플렉스 안에서 폭을 줄이므로 여기서 해제합니다 */
.two-col .faq{ flex:1; align-content:space-between; gap:var(--s-4); margin:0; width:100% }
.two-col .faq__item{ border:1px solid var(--line); border-radius:var(--r-xl)}
/* 메인 FAQ는 펼치지 않고 FAQ 페이지로 이동하는 링크 — 화살표는 오른쪽(›) 고정 */
.faq__q--link .arrow{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform:none;
}
.two-col .faq__item:hover{ border-color:var(--line) }

/* 공지사항 페이지 표 */
/* 게시판 목록 — 나의 합격후기의 .rv-list와 같은 결.
   줄무늬(짝수행 음영) 대신 행 사이 얇은 구분선만 두어 제목이 먼저 읽히게 합니다. */
.board{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:2px 26px;
}
.board li{ display:flex; align-items:center; gap:var(--s-6); padding:16px 2px; font-size:var(--fs-sm) }
.board li:not(:last-child){ border-bottom:1px solid var(--line) }
.board .no{ width:40px; flex-shrink:0; color:var(--disabled); font-size:var(--fs-xs); font-variant-numeric:tabular-nums }
.board .tit{ flex:1; color:var(--ink-2); font-weight:600 }

.board .date{ color:var(--faint); font-size:var(--fs-xs); flex-shrink:0; font-variant-numeric:tabular-nums }
/* 모바일에서는 제목 폭을 벌기 위해 앞 두 자리(20)를 감춰 YY-MM-DD로 보여줍니다 */
@media (max-width:560px){ .board .date__cent{ display:none } }
.board .badge{ flex-shrink:0 }

/* 좁은 화면에서 페이지 번호가 줄을 넘겨 가로 스크롤이 생기지 않게 합니다 */
/* 페이지네이션 — Figma pagination (150:4329)
   36px 정사각 칸, 현재 페이지만 남색 채움. 화살표 칸도 같은 크기·테두리를 씁니다. */
.pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s-3); margin-top:26px }
.pagination a,
.pagination span{
  width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:var(--fs-md); font-weight:600; color:var(--mono-400);
  font-variant-numeric:tabular-nums; transition:background-color .15s, color .15s;
}
.pagination a:hover{ background:var(--surface-alt); color:var(--ink-2) }
.pagination [aria-current="page"]{ background:var(--navy); border-color:var(--navy); color:#fff }
/* 화살표는 텍스트 대신 마스크 아이콘 — 색이 숫자와 같이 움직입니다 */
.pagination__arrow{ font-size:0 }
.pagination__arrow::before{
  content:""; width:14px; height:14px; background-color:currentColor;
  -webkit-mask:var(--arr) center / contain no-repeat; mask:var(--arr) center / contain no-repeat;
}
.pagination__arrow--prev::before{ transform:rotate(180deg) }
.pagination__arrow--last::before,
.pagination__arrow--first::before{
  width:16px;
  -webkit-mask-image:var(--arr2); mask-image:var(--arr2);
}
.pagination__arrow--first::before{ transform:rotate(180deg) }
/* 모바일은 번호 5칸 + 화살표 4칸 = 9칸이라 36px 그대로면 줄이 넘어갑니다 */
@media (max-width:560px){
  .pagination{ gap:4px }
  .pagination a,
  .pagination span{ width:32px; height:32px; font-size:var(--fs-sm) }
  .pagination__arrow::before{ width:12px; height:12px }
  .pagination__arrow--last::before,
  .pagination__arrow--first::before{ width:14px }
}

/* --------------------------------------------------------------------------
   27. 자격증 발급신청
   -------------------------------------------------------------------------- */
.issue-banner{
  background:var(--navy); color:#fff; border-radius:var(--r-lg);
  padding:26px 30px; display:flex; align-items:center; gap:var(--s-8); flex-wrap:wrap;
}
.issue-banner__txt{ flex:1; min-width:220px }
.issue-banner__label{ font-size:var(--fs-xs); color:rgba(255,255,255,.7) }
.issue-banner h2{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.025em; margin:5px 0 8px }
.issue-banner h2 em{ font-style:normal; color:var(--yellow) }
.issue-banner p{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); line-height:1.7 }
/* 견본 이미지는 가로세로 비율이 서로 달라 높이만 맞추고 너비는 자동 */
.issue-banner__certs{ display:flex; gap:var(--s-5); flex-shrink:0; align-items:center }
.issue-banner__certs img{ display:block; height:112px; width:auto; border-radius:var(--r-md) }
/* 태블릿·모바일에서 줄이 바뀌면 견본 이미지를 오른쪽으로 붙입니다 */
@media (max-width:980px){
  .issue-banner__certs{ margin-left:auto }
}

.issue-table thead th{
  background:var(--surface-sunken); font-size:var(--fs-xs); font-weight:700; color:var(--muted);
  padding:12px 14px; text-align:left; border-bottom:1px solid var(--line);
}
.issue-table td{ padding:14px; font-size:var(--fs-sm); color:var(--ink-2); border-bottom:1px solid var(--line) }
.issue-table tr:last-child td{ border-bottom:0 }
.issue-table tr.is-picked td{ background:var(--blue-soft) }   /* 강의실에서 넘어와 선택된 과목 */

.fee-summary{ background:var(--surface-sunken); border-radius:var(--r-lg); padding:18px 20px; text-align:center }
.fee-summary__row{ font-size:var(--fs-sm); color:var(--muted) }
.fee-summary__row b{ color:var(--navy); font-size:var(--fs-md) }
.fee-summary__total{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-top:8px }
.fee-summary__total b{ color:var(--blue); font-size:var(--fs-xl) }

/* --------------------------------------------------------------------------
   28. 유틸리티
   -------------------------------------------------------------------------- */
/* 모바일에서만 줄을 바꾸는 유틸리티 — 데스크톱에서는 공백처럼 무시됩니다 */
.br-mo{ display:none }
@media (max-width:560px){ .br-mo{ display:inline } }
.text-center{ text-align:center }
/* 여백 유틸리티 — 숫자는 원래의 4·8·12·16·20·32·48·64px 리듬을 유지합니다 */
.mt-1{ margin-top:var(--s-1) }  .mt-2{ margin-top:var(--s-3) }
.mt-3{ margin-top:var(--s-5) }  .mt-4{ margin-top:var(--s-6) }
.mt-5{ margin-top:var(--s-7) }  .mt-6{ margin-top:var(--s-9) }
.mt-7{ margin-top:var(--s-10) } .mt-8{ margin-top:var(--s-11) }
.tabular{ font-variant-numeric:tabular-nums }
.card{ background:var(--surface); border-radius:var(--r-lg); padding:var(--pad-card) }
.card--note{ background:var(--surface-alt) }   /* 필독사항처럼 읽고 넘어가는 카드 */
/* 카드 안 구역 제목 — 인라인 style로 흩어져 있던 크기를 한곳으로 모읍니다 */
.card__title{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin-bottom:14px }

/* --------------------------------------------------------------------------
   29. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1100px){
  .cat-grid{ grid-template-columns:repeat(6,1fr) }

  /* 이 폭부터 상단 메뉴가 두 줄로 깨지므로 태블릿 헤더(햄버거)로 바꿉니다.
     햄버거는 항상 오른쪽 끝. 메뉴·검색·로그인은 모두 열리는 패널 안으로 들어갑니다. */
  /* 햄버거는 항상 오른쪽 끝. 메뉴·검색·로그인은 모두 열리는 패널 안으로 들어갑니다. */
  .nav-toggle{ display:block; margin-left:auto; order:9 }
  .header__nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    padding:8px; background:var(--surface);
    border-bottom:1px solid var(--line); box-shadow:0 10px 24px rgba(0,0,0,.06);
  }
  .header__nav.is-open{ display:block }

  .gnb{ flex-direction:column; gap:0 }
  .gnb a{ padding:12px 14px; border-radius:var(--r-md) }

  .header__util{
    margin-left:0; flex-direction:column; align-items:stretch; gap:var(--s-3);
    margin-top:8px; padding-top:8px; border-top:1px solid var(--line);
  }
  /* 패널 안에서는 검색 버튼도 라벨을 그대로 보여줍니다 */
  .search-trigger{ min-width:0; width:100%; padding:12px 14px }
  .header__auth{ display:flex; gap:var(--s-3) }
  .header__auth .util-link{
    flex:1; padding:12px 14px; border-radius:var(--r-md);
    background:var(--surface-sunken); text-align:center; font-weight:700;
  }
  /* 메인 로그인 박스와 같은 색 위계 — 로그인은 주 버튼, 회원가입은 연블루 */
  /* 로그인 상태의 '한평생 님'도 같은 자리·같은 무게이므로 함께 남색으로 (로그아웃은 그대로) */
  .header__auth .util-link--login,
  .header__auth .util-link--strong{ background:var(--navy); color:#fff }
  .header__auth .util-link--join{ background:var(--blue-soft); color:var(--ink-2) }
}

@media (max-width:980px){
  .hero__grid, .detail-spec, .layout-side, .two-col, .footer__grid{ grid-template-columns:1fr }

  /* 수강신청 필터 — 사이드바를 펼쳐두면 과정 목록까지 한참 스크롤해야 해서
     드롭다운 버튼 뒤로 접습니다 (Figma 모바일 325:7593) */
  .filter-toggle{
    display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
    width:100%; padding:11px 14px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
    font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
  }
  /* 모양·색·회전은 공통 셰브론 규칙을 쓰고 여기서는 크기만 줄입니다 */
  .filter-toggle .chev{ width:18px; height:18px; -webkit-mask-size:16px; mask-size:16px }
  /* 사이드바는 모바일에서 바텀시트로 대체됩니다. DOM에는 남겨둬야
     필터 상태(aria-pressed)와 결과 개수 계산이 한 곳에서 유지됩니다. */
  .layout-side > aside.is-collapsed{ display:none }
  .layout-side > aside{ margin-top:8px }

  /* 상단 검색바 (Figma 330:8237) */
  .m-search{
    display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-5);
    padding:0 14px; height:48px;
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  }
  .m-search input{
    flex:1; min-width:0; border:0; background:none; padding:0;
    font-size:var(--fs-sm); color:var(--ink);
  }
  .m-search input::placeholder{ color:var(--disabled) }
  .m-search button{ flex:none; display:flex; color:var(--ink-2); padding:4px }

  /* 정책 안내 배지 (Figma 333:8258) */
  .page-head--row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4) }
  .promo-chip{ display:flex; align-items:center; gap:2px; flex:none }
  .promo-chip img{ width:34px; height:34px; object-fit:cover }
  .promo-chip span{
    display:flex; flex-direction:column; align-items:flex-end;
    font-size:12px; font-weight:700; line-height:1.4; color:var(--ink);
  }
  .promo-chip b{ font-weight:700; color:var(--navy) }

  .stat-grid, .who-grid, .req-grid, .spec-card{ grid-template-columns:repeat(2,1fr) }
  .live-grid, .review-grid, .curriculum, .guide-box ul{ grid-template-columns:1fr }
  /* 한 줄로 내려오면 제목(150px)이 목록 폭을 잡아먹으므로 위아래로 쌓습니다 */
  .live-box{ flex-direction:column; gap:var(--s-4) }
  .live-box__title{ width:auto }
  .live-box__title br{ display:none }
  /* 세로 배치에서는 flex:1이 높이를 무시하므로 스크립트가 지정한 높이를 그대로 씁니다 */
  .live-view{ flex:none; width:100% }
  .my-card, .review-row{ grid-template-columns:1fr }
  /* 스펙 표는 카드를 길게만 만들어 감춥니다 — 필요한 정보는 상세 페이지에서 봅니다.
     태블릿은 가로 배치를 유지한 채 표 자리만 비우고, 모바일에서만 세로로 쌓습니다. */
  .course-row .spec-table{ display:none }
  .course-row{
    grid-template-areas:
      "thumb head  price"
      "thumb rule  rule"
      "thumb act   act";
  }
  .review-row__cert{ display:flex; gap:var(--s-4)}
  /* 모바일 띠배너 — Figma wrapper_count (155:4744)
     3칸 균등 + 구분선 유지, 라벨은 두 줄로 접어 한 줄 안에 담습니다 */
  .trust-strip ul{ flex-wrap:nowrap; gap:var(--s-4); padding:10px 16px }
  .trust-strip li{ font-size:var(--fs-xs); line-height:1.4; gap:var(--s-4)}
  .trust-strip__txt br{ display:inline }
  .trust-strip__divider{ height:32px }
  .search-panel{ padding-left:0 }   /* 로고 숨김 시 들여쓰기 해제 */
  .search-cols{ grid-template-columns:1fr; gap:var(--s-8)}
  .search-cols > div + div{ padding-left:0; border-left:0; padding-top:24px; border-top:1px solid var(--line) }
  .search-overlay__bar{ gap:var(--s-5)}
  .search-overlay__bar .logo{ display:none }
}

@media (max-width:560px){
  /* 카드 안쪽 여백을 한 단계 낮춥니다 — 화면이 좁을수록 여백보다 내용 폭이 중요합니다.
     이 두 값만 바꾸면 card·form-card·loginbox·my-card·review-row·guide-box에 한 번에 반영됩니다. */
  :root{ --pad-card:18px; --pad-card-y:16px }

  /* 헤더 간격을 좁혀 좁은 화면에서 넘치지 않게 한다 */
  :root{ --header-h:56px }
  /* 모바일 — 스크롤을 내릴 때는 헤더를 숨기고 올릴 때만 다시 보여줍니다 */
  .header.is-hidden{ transform:translateY(-100%) }
  .header__in{ gap:var(--s-4); min-height:56px }
  .logo img{ height:16px }
  /* 검색·로그인은 햄버거 패널 안에 있으므로 헤더 바 기준 축약 규칙을 두지 않는다 */

  .section{ padding:var(--s-9) 0 }
  .cat-grid{ grid-template-columns:repeat(4,1fr) }
  /* 통계는 숫자가 짧아 모바일에서도 2열을 유지합니다 — 1열로 쌓으면
     남색 영역이 화면 하나를 통째로 차지해 스크롤 내내 남색만 보입니다 */
  .who-grid, .req-grid, .spec-card{ grid-template-columns:1fr }
  .stat{ padding:16px 14px }
  .detail-hero h1{ font-size:var(--fs-2xl) }
  /* 로그인 박스 — 좁은 화면에서 로고·문구·버튼을 한 단계씩 줄입니다 */
  .loginbox{ gap:var(--s-7)}
  .loginbox__brand img{ height:17px }
  .loginbox h2,
  .loginbox__hello{ font-size:var(--fs-md) }
  .loginbox__actions{ gap:var(--s-3)}
  .loginbox__actions .btn{ padding:11px 12px; font-size:var(--fs-sm) }
  .page-head h1{ font-size:var(--fs-xl) }
  /* 과정 카드 — 여기서부터 세로로 쌓입니다 (태블릿까지는 가로 배치 유지) */
  .course-row{
    grid-template-columns:1fr;
    grid-template-areas:"thumb" "head" "price" "rule" "act";
    cursor:pointer;
  }
  /* 과정명 22→18, 가격 28→22로 나란히 한 단계씩 낮춥니다.
     둘의 간격(4px)이 그대로라 가격이 제목보다 크다는 위계는 유지됩니다. */
  .course-row__head h2,
  .course-row__head h3{ font-size:var(--fs-lg) }
  /* 가격 블록 — Figma wrapper_price (330:7879).
     안내 문구가 윗줄, 정가와 수강료가 아랫줄에 나란히 놓이고 모두 우측 정렬입니다. */
  .course-row__price{
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-end;
    column-gap:6px; row-gap:4px;
  }
  .course-row__policy{
    display:block; width:100%; text-align:right;
    font-size:var(--fs-sm); font-weight:600; color:var(--navy); line-height:1.4;
  }
  .course-row__price del{ font-size:var(--fs-sm) }
  .course-row__price strong{ font-size:var(--fs-xl) }
  .course-row__price strong span{ color:var(--ink) }
  /* 세로로 쌓이면 썸네일이 카드 폭을 꽉 채웁니다.
     행 높이를 맞출 이웃 열이 없어져 height:100%는 비율로 대체합니다. */
  .course-row__thumb{ max-width:none; height:auto; aspect-ratio:4/3 }
  /* 버튼 3개가 세로로 쌓이면 카드가 지나치게 길어집니다.
     '상세 정보'는 카드 클릭으로 대신하고 나머지 둘을 한 줄에 놓습니다. */
  .course-row__actions [data-detail-link]{ display:none }
  /* flex는 두 버튼의 좌우 패딩이 달라(18 / 10) 폭이 어긋납니다.
     그리드 트랙으로 나누면 패딩과 무관하게 정확히 반씩 나뉩니다. */
  .course-row__actions{ display:grid; grid-template-columns:1fr 1fr; height:auto; gap:var(--s-3) }
  /* 공지사항·자주 묻는 질문 제목도 다른 섹션 제목과 같은 크기로 */
  .section-head h2,
  .list-head h2{ font-size:var(--fs-lg) }
  /* 장바구니 바 — Figma 모바일 (334:8886)
     칩 줄 → (개수 | 금액) 한 줄 → 전폭 CTA 순으로 쌓습니다 */
  .cart-bar__in{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"chips chips" "count total" "cta cta";
    align-items:end; column-gap:var(--s-4); row-gap:10px; padding:0 16px;
  }
  /* Figma는 칩 줄과 개수 줄 사이가 30px이지만 실제 화면에서는 떠 보여
     row-gap 10에 6만 더한 16px로 좁혔습니다 */
  .cart-bar__chips{ grid-area:chips; width:100%; flex:none; min-width:0; gap:6px; margin-bottom:6px }
  .cart-chip{
    border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; gap:4px;
    font-size:var(--fs-sm); font-weight:700; color:var(--ink);
  }
  .cart-chip button{ font-size:var(--fs-md) }
  .cart-bar__count{ grid-area:count; font-size:var(--fs-md) }
  .cart-bar__count b{ font-size:20px }
  /* 정가는 윗줄, '수강료 0원'은 아랫줄에 오른쪽 정렬 */
  .cart-bar__total{
    grid-area:total; display:grid; justify-items:end; align-items:baseline;
    grid-template-areas:"del del" "label price"; column-gap:var(--s-3); row-gap:var(--s-2);
  }
  .cart-bar__total del{ grid-area:del }
  .cart-bar__total-label{ grid-area:label; display:block; font-size:var(--fs-lg); font-weight:700; color:var(--ink-2) }
  .cart-bar__total strong{ grid-area:price; font-size:20px }
  .cart-bar [data-enroll]{ grid-area:cta; padding:18px; font-size:var(--fs-lg); border-radius:var(--r-lg) }
  .review-hero{ padding:24px }
  .review-hero h1{ font-size:var(--fs-xl) }
  .issue-banner{ padding:22px }
}

/* --------------------------------------------------------------------------
   30. 강의실 (lecture.html)
   -------------------------------------------------------------------------- */
.classroom{ padding-top:8px }
.classroom__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s-7); flex-wrap:wrap; padding:16px 0 24px;
}
.classroom__title{ display:flex; align-items:center; gap:var(--s-5); flex-wrap:wrap }
.classroom__title h1{ font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }
.lec-period{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--blue-soft); color:var(--navy);
  border-radius:var(--r-md); padding:7px 14px;
  font-size:var(--fs-sm); font-weight:600; font-variant-numeric:tabular-nums;
}
.classroom__grid{ display:grid; grid-template-columns:1fr 380px; gap:var(--s-8); align-items:start }

/* 좌측 — 플레이어 */
.player__frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:#0e0e12; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--s-5);
  color:rgba(255,255,255,.5);
}
.player__play{
  width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;
}
.player__play::before{
  content:""; border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff; margin-left:4px;
}
.player__note{ font-size:var(--fs-sm); letter-spacing:.02em }

.cur-lecture{ margin-top:22px }
.cur-lecture h2{ font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }

/* 진도율 */
.lec-progress{
  display:flex; align-items:center; gap:var(--s-6); margin:18px 0 26px;
  padding:18px 22px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
}
.lec-progress__label{ font-size:var(--fs-sm); font-weight:700; color:var(--muted); white-space:nowrap }
.lec-progress__track{ flex:1; height:10px; border-radius:var(--r-full); background:var(--surface-alt); overflow:hidden }
.lec-progress__track i{ display:block; height:100%; border-radius:var(--r-full); background:var(--navy); transition:width .8s ease }
.lec-progress__pct{ font-size:var(--fs-2xl); font-weight:700; color:var(--blue); font-variant-numeric:tabular-nums; white-space:nowrap }

/* 자주 묻는 질문 — .faq 재활용, 래퍼만 */
.lec-qna h3{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:12px }

/* 우측 사이드 */
.lec-side{ display:grid; gap:var(--s-6)}
.panel-card{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden }

/* 토글 헤더 (학습자료·필수 프로그램) */
.panel-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); width:100%;
  padding:var(--pad-card-y) var(--pad-card); font-size:var(--fs-md); font-weight:700; color:var(--ink); text-align:left;
}
.panel-toggle:hover{ background:#FAFBFD }
.panel-body[hidden]{ display:none }

/* 학습자료 3분할 */
.material-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line) }
.material-grid a{
  display:flex; flex-direction:column; align-items:center; gap:var(--s-3); text-align:center;
  padding:20px 12px; font-size:var(--fs-sm); font-weight:600; color:var(--muted); line-height:1.4;
}
.material-grid a + a{ border-left:1px solid var(--line) }
.material-grid a:hover{ background:#FAFBFD }
.material-grid a:first-child{ color:var(--navy); font-weight:700 }
.material-grid .m-ico{
  width:52px; height:52px; border-radius:var(--r-md); background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center;
}

/* 강의목차 */
.toc__head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-4);
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.toc__head b{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }
.toc__head b span{ color:var(--blue); margin-left:3px }
.toc__badge{
  font-size:var(--fs-xs); font-weight:700; color:#fff; background:var(--navy);
  border-radius:var(--r-sm); padding:4px 10px;
}
.toc__list{ max-height:560px; overflow-y:auto }
.toc__item + .toc__item{ border-top:1px dashed var(--line) }
.toc__item a{
  display:flex; align-items:center; gap:var(--s-5); padding:14px 20px; line-height:1.4;
}
.toc__item a:hover{ background:#FAFBFD }
.toc__no{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); flex:none; font-variant-numeric:tabular-nums }
.toc__title{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); flex:1 }
.toc__done{
  flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--green);
  background:var(--green-soft); border-radius:var(--r-sm); padding:4px 9px;
}
.toc__item.is-current a{ background:var(--navy) }
.toc__item.is-current .toc__no{ color:#8FB4F0 }
.toc__item.is-current .toc__title{ color:#fff; font-weight:700 }
.toc__item.is-current .toc__done{ color:#fff; background:rgba(255,255,255,.16) }

/* 필수 프로그램 목록 */
.program-list{ border-top:1px solid var(--line); padding:10px 6px }
.program-list a{
  display:flex; align-items:center; gap:var(--s-5); padding:11px 14px; border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--ink-2);
}
.program-list a:hover{ background:#FAFBFD }
.program-list .p-ico{
  width:34px; height:34px; border-radius:var(--r-sm); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.program-list .p-tag{
  margin-left:auto; flex:none; font-size:var(--fs-xs); font-weight:700; color:var(--blue);
  border:1px solid var(--blue-line); border-radius:var(--r-full); padding:2px 8px;
}

@media (max-width:980px){
  .classroom__grid{ grid-template-columns:1fr }
  .lec-side{ order:-1 }   /* 모바일: 목차를 영상 위로 */
}
@media (max-width:560px){
  .classroom__title h1{ font-size:var(--fs-xl) }
  .material-grid{ grid-template-columns:1fr }
  .material-grid a + a{ border-left:0; border-top:1px solid var(--line) }
  .lec-progress{ flex-wrap:wrap; gap:var(--s-5)}
}

/* --------------------------------------------------------------------------
   31. 시험 응시 (exam.html)
   -------------------------------------------------------------------------- */
.exam{ max-width:820px; margin:0 auto; padding-top:8px }
.exam__head{ padding:16px 0 22px }
.exam__head h1{ font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.02em; text-align:center }

/* 시험 정보 요약 (헤더 테이블 대체 — 각진 카드) */
.exam-info{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:var(--navy); border-radius:var(--r-lg); overflow:hidden; margin-bottom:14px;
}
.exam-info div{ padding:16px 18px; text-align:center }
.exam-info div + div{ border-left:1px solid rgba(255,255,255,.12) }
.exam-info dt{ font-size:var(--fs-xs); color:#8FB4F0; margin-bottom:5px }
.exam-info dd{ font-size:var(--fs-sm); font-weight:700; color:#fff; font-variant-numeric:tabular-nums }

/* 진행 상태 바 (풀이한 문항 수 · 남은 시간) */
.exam-status{
  position:sticky; top:var(--header-h); z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-6); flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px 20px; margin-bottom:22px;
}
.exam-status__count{ font-size:var(--fs-sm); color:var(--muted); font-weight:600 }
.exam-status__count b{ color:var(--blue); font-variant-numeric:tabular-nums }
.exam-status__timer{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); font-weight:700; color:var(--ink) }
.exam-status__timer .clock{
  background:var(--blue-soft); color:var(--navy); border-radius:var(--r-sm);
  padding:5px 12px; font-size:var(--fs-md); font-variant-numeric:tabular-nums;
}

/* 문항 카드 */
.q-list{ display:grid; gap:var(--s-5)}
.q-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px }
.q-card.is-answered{ border-color:var(--blue-line) }
.q-card__q{ display:flex; gap:var(--s-4); font-size:var(--fs-md); font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:16px }
.q-card__num{
  flex:none; min-width:26px; height:26px; padding:0 7px; border-radius:var(--r-sm);
  background:var(--navy); color:#fff; font-size:var(--fs-sm); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums;
}
.q-card.is-answered .q-card__num{ background:var(--blue) }

/* 보기 (라디오) — 2열, 클릭 영역 전체 */
.q-options{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3)}
.q-options.is-single{ grid-template-columns:1fr }
.q-option{
  display:flex; align-items:flex-start; gap:var(--s-4); cursor:pointer;
  padding:12px 15px; border:1px solid var(--line); border-radius:var(--r-md);
  font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; transition:border-color .12s, background-color .12s;
}
.q-option:hover{ border-color:var(--blue-line); background:#FAFBFD }
.q-option input{ position:absolute; opacity:0; width:0; height:0 }
.q-option .radio{
  flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--surface); position:relative; transition:border-color .12s;
}
.q-option:has(input:checked),
.q-option.is-selected{ border-color:var(--blue); background:var(--blue-soft) }
.q-option:has(input:checked) .radio,
.q-option.is-selected .radio{ border-color:var(--blue) }
.q-option:has(input:checked) .radio::after,
.q-option.is-selected .radio::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--blue);
}
.q-option input:focus-visible + .radio{ outline:2px solid var(--blue); outline-offset:2px }

/* 제출 바 */
.exam-submit{ margin-top:24px; text-align:center }
.exam-submit .btn{ min-width:280px }
.exam-submit__note{ font-size:var(--fs-sm); color:var(--muted); margin-top:12px }

@media (max-width:980px){
  .exam-info{ grid-template-columns:repeat(2,1fr) }
  .exam-info div:nth-child(3){ border-left:0 }
  .exam-info div:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.12) }
  .q-options{ grid-template-columns:1fr }
}

/* --------------------------------------------------------------------------
   32. 시험 성적 확인 (exam-result.html)
   -------------------------------------------------------------------------- */
.result{ padding-top:8px }

/* 합격 요약 스트립 */
.result-summary{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-8); flex-wrap:wrap;
  background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:26px 30px; margin-bottom:28px;
}
.result-summary__left{ display:flex; align-items:center; gap:var(--s-6); flex-wrap:wrap }
.result-summary__badge{
  display:inline-flex; align-items:center; gap:var(--s-2);
  background:var(--green-soft); color:var(--green); border-radius:var(--r-md);
  padding:8px 16px; font-size:var(--fs-md); font-weight:700;
}
.result-summary__badge.is-fail{ background:var(--red-soft); color:var(--red) }
.result-summary__course{ font-size:var(--fs-lg); font-weight:700 }
.result-summary__course small{ display:block; font-size:var(--fs-sm); color:rgba(255,255,255,.65); font-weight:600; margin-top:2px }
.result-summary__stats{ display:flex; gap:var(--s-5)}
.result-summary__stat{ text-align:center; background:rgba(255,255,255,.08); border-radius:var(--r-md); padding:12px 22px }
.result-summary__stat dt{ font-size:var(--fs-xs); color:#8FB4F0; margin-bottom:4px }
.result-summary__stat dd{ font-size:var(--fs-2xl); font-weight:700; font-variant-numeric:tabular-nums }
@media (max-width:560px){ .result-summary__stat{ padding:12px 14px } }

/* 섹션 (왼쪽 강조바 + 제목) */
.result-section{ margin-bottom:26px }
.result-section__head{ display:flex; align-items:center; gap:var(--s-3); margin-bottom:12px }
.result-section__head::before{ content:""; width:4px; height:18px; border-radius:var(--r-sm); background:var(--blue) }
.result-section__head h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }

/* 성적 테이블 */
.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface) }
.result-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px }
.result-table th{
  background:var(--surface-alt); color:var(--muted); font-weight:700;
  padding:14px 12px; text-align:center; white-space:nowrap;
}
.result-table th + th, .result-table td + td{ border-left:1px solid var(--line) }
.result-table tbody th{ background:var(--surface-alt) }
.result-table td{ padding:16px 12px; text-align:center; color:var(--ink-2); font-variant-numeric:tabular-nums }
.result-table tbody tr + tr td,
.result-table tbody tr + tr th{ border-top:1px solid var(--line) }
.result-table .is-pass{ color:var(--green); font-weight:700 }
.result-table .is-grade{ font-weight:700; color:var(--navy) }
.result-table .is-highlight{ color:var(--blue); font-weight:700 }
/* 2행 헤더(학습평가) */
.result-table .row-label{ background:var(--surface-alt); color:var(--muted); font-weight:700; white-space:nowrap }

/* 학습진도 */
.progress-rows{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface) }
.progress-row{
  display:grid; grid-template-columns:150px 1fr 64px 110px; align-items:center; gap:var(--s-7);
  padding:18px 22px;
}
.progress-row + .progress-row{ border-top:1px solid var(--line) }
.progress-row__label{
  text-align:center; font-size:var(--fs-sm); font-weight:700; color:var(--ink);
  background:var(--surface-alt); border-radius:var(--r-md); padding:10px 0;
}
.progress-row__track{ height:10px; border-radius:var(--r-full); background:var(--surface-alt); overflow:hidden }
.progress-row__track i{ display:block; height:100%; border-radius:var(--r-full) }
.progress-row--current .progress-row__track i{ background:var(--navy) }
.progress-row--recommend .progress-row__track i{ background:var(--blue-300) }
.progress-row__pct{ font-size:var(--fs-sm); font-weight:700; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums }
.progress-row__count{ font-size:var(--fs-sm); color:var(--ink-2); text-align:right; font-variant-numeric:tabular-nums }
.progress-row--current .progress-row__count b{ color:var(--navy) }
.progress-row--recommend .progress-row__count b{ color:var(--blue) }

/* 합격·불합격 메시지 */
.result-msg{
  text-align:center; background:var(--green-soft); border-radius:var(--r-lg);
  padding:26px 24px; margin:6px 0 24px;
}
.result-msg strong{ display:block; font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:6px }
.result-msg p{ font-size:var(--fs-sm); color:var(--green); font-weight:600 }
.result-msg.is-fail{ background:var(--red-soft) }
.result-msg.is-fail p{ color:var(--red) }
.result-table .is-fail{ color:var(--red); font-weight:700 }

.result-cta{ display:flex; justify-content:center; gap:var(--s-4); flex-wrap:wrap }
.result-cta .btn{ min-width:280px }
.result-cta .btn--ghost{ min-width:160px }

@media (max-width:980px){
  .result-summary{ flex-direction:column; align-items:flex-start; gap:var(--s-6)}
  .result-summary__stats{ width:100% }
  .result-summary__stat{ flex:1 }
  .progress-row{ grid-template-columns:1fr; gap:var(--s-4); text-align:center }
  .progress-row__pct, .progress-row__count{ text-align:center }
}

/* --------------------------------------------------------------------------
   33. 공통 센터 모달 (기간 연장 등)
   -------------------------------------------------------------------------- */
.modal{ position:fixed; inset:0; z-index:120; display:none }
.modal.is-open{ display:flex; align-items:center; justify-content:center; padding:20px }
.modal__dim{ position:absolute; inset:0; background:rgba(15,22,34,.5) }
.modal__panel{
  position:relative; background:var(--surface); border-radius:var(--r-lg);
  width:min(440px, 100%); padding:28px 28px 24px;
  animation:modalIn .16s ease-out both;
}
@keyframes modalIn{ from{ transform:translateY(10px) } to{ transform:none } }
.modal__title{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px }
.modal__course{ font-size:var(--fs-sm); font-weight:700; color:var(--blue); margin-bottom:16px }
.modal__count{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  background:var(--surface-sunken); border-radius:var(--r-md); padding:14px 16px; margin-bottom:14px;
}
.modal__count span{ font-size:var(--fs-sm); color:var(--muted) }
.modal__count b{ font-size:var(--fs-md); color:var(--ink); font-variant-numeric:tabular-nums }
.modal__count .used{ color:var(--blue) }
.modal__desc{ font-size:var(--fs-sm); color:var(--muted); line-height:1.7; margin-bottom:20px }
.modal__desc b{ color:var(--ink-2) }
.modal__notice{
  display:flex; gap:var(--s-3); align-items:flex-start;
  background:var(--red-soft); border-radius:var(--r-md); padding:12px 14px; margin-bottom:20px;
  font-size:var(--fs-sm); color:var(--red); line-height:1.6;
}
.modal__actions{ display:grid; grid-template-columns:1fr 1.4fr; gap:var(--s-4)}
.modal__actions .btn{ padding:13px }
.modal--done .modal__actions{ grid-template-columns:1fr }
.modal__result{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s-2); padding:8px 0 4px;
}

/* 강의 샘플 팝오버 — 영상 자리는 회색 플레이스홀더입니다.
   실제 연동 시 .modal__video 안의 .ph를 <video> 또는 iframe으로 교체하세요. */
.modal--video .modal__panel{ width:min(760px, 100%); padding:20px }
.modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-6); margin-bottom:14px }
.modal__head .modal__title{ margin-bottom:2px }
.modal__head .modal__course{ margin-bottom:0 }
.modal__x{
  flex-shrink:0; width:32px; height:32px; border-radius:var(--r-md);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fs-sm); color:var(--muted); background:var(--surface-sunken);
}
.modal__x:hover{ background:var(--surface-alt); color:var(--ink-2) }
.modal__video{ position:relative; border-radius:var(--r-md); overflow:hidden }
/* 재생 버튼이 가운데를 차지하므로 자리 표시 문구는 아래로 내립니다 */
.modal__video .ph{
  width:100%; aspect-ratio:16/9; border-radius:0;
  justify-content:flex-end; padding-bottom:14px;
}
.modal__video .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:62px; height:62px; border-radius:50%;
  background:rgba(1,1,1,.55); color:#fff; font-size:var(--fs-xl); padding-left:4px;
  display:flex; align-items:center; justify-content:center;
}
.modal__video + .modal__desc{ margin:14px 0 0 }
.modal__result .mark{
  width:52px; height:52px; border-radius:50%; background:var(--green-soft); color:var(--green);
  display:flex; align-items:center; justify-content:center; font-size:var(--fs-2xl); margin-bottom:6px;
}

/* 수강종료 상태 배지 — 위 상태 태그와 동일한 채움+흰 텍스트 */
.badge--done{ background:var(--blue-300); color:#fff }   /* 파랑 · 자격증 발급 완료 */
.badge--expired{ background:var(--faint); color:#fff }   /* 옅은 회색 · 기간 만료(비활성 상태라 뒤로 물림) */

/* --------------------------------------------------------------------------
   34. 취업 길찾기 (jobs.html · job-detail.html)
   -------------------------------------------------------------------------- */
/* 진입 안내 배너 */
.jobguide-intro{
  background:var(--navy); color:#fff; border-radius:var(--r-lg);
  padding:30px 34px; margin-bottom:28px;
}
.jobguide-intro .eyebrow{ color:#8FB4F0 }
.jobguide-intro h2{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.025em; margin:6px 0 8px; text-wrap:balance }
.jobguide-intro p{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); line-height:1.7 }

/* 직업군 선택 */
.job-groups{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s-4)}
/* 점(dot) 인디케이터 — 직업군·추천대상 캐러셀 공용 */
.carousel-dots{ display:flex; justify-content:center; gap:var(--s-2); margin-top:14px }
.carousel-dots[hidden]{ display:none }
.carousel-dots button{
  width:7px; height:7px; border-radius:var(--r-full);
  background:var(--disabled); transition:background-color .15s, width .15s;
}
.carousel-dots button[aria-current="true"]{ width:20px; background:var(--navy) }

/* 메인 직업군 — 한 줄 캐러셀 (한 화면 5개, 끌어서 넘김) */
.job-groups--carousel{
  /* 기본 .job-groups의 5열 그리드를 풀고 한 줄로 흐르게 합니다 */
  display:grid; grid-template-columns:none; grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4 * 10px) / 5);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab;
}
.job-groups--carousel::-webkit-scrollbar{ display:none }
.job-groups--carousel.is-grabbing{ cursor:grabbing; scroll-snap-type:none; user-select:none }
.job-groups--carousel > .job-group{ scroll-snap-align:start }
.job-group{
  display:block; text-align:center; padding:20px 12px 16px;
  background:var(--surface); border-radius:var(--r-lg);
  transition:background-color .15s;
}
.job-group[aria-pressed="true"]{ background:var(--navy) }
.job-group[aria-pressed="true"] strong{ color:#fff }
.job-group[aria-pressed="true"] span{ color:rgba(255,255,255,.7) }
/* 직업군 아이콘 — 연블루 라운드 사각형 위 파란 글리프 (Figma 855:2069) */
.job-group .job-group__ico{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin:0 auto 10px;
  border-radius:16px; background:var(--blue-soft); color:var(--blue);
  transition:background-color .15s, color .15s;
}
.job-group .job-group__ico img{ display:block; width:28px; height:28px; object-fit:contain }
/* 선택(남색) 카드에서도 아이콘 원본 색을 유지하기 위해 연블루 배경을 그대로 둡니다 */
.job-group strong{ display:block; font-size:var(--fs-sm); font-weight:700; color:var(--ink); letter-spacing:-.01em }
.job-group span{ display:block; font-size:var(--fs-xs); color:var(--faint); margin-top:3px }

/* 직업 목록 */
.job-result-head{ margin:28px 0 14px; display:flex; align-items:baseline; gap:var(--s-4); flex-wrap:wrap }
.job-result-head h2{ font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.job-result-head span{ font-size:var(--fs-sm); color:var(--muted) }
.job-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-5)}
.job-card{
  display:flex; flex-direction:column; gap:var(--s-3);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--pad-card-y) var(--pad-card);
  transition:background-color .15s, border-color .15s;
}
.job-card:hover{ background:var(--surface-sunken); border-color:var(--line) }
.job-card h3{ font-size:var(--fs-md); font-weight:700; color:var(--ink); letter-spacing:-.01em }
.job-card p{ font-size:var(--fs-sm); color:var(--muted); line-height:1.6; flex:1 }
/* 카드마다 파란 태그가 반복되면 강조가 흩어져, 여기서는 모노톤으로 둡니다 */
.job-card__course{
  display:inline-flex; align-items:center; gap:var(--s-2); align-self:flex-start;
  font-size:var(--fs-xs); font-weight:600; color:var(--ink-2);
  background:var(--surface-alt); border-radius:var(--r-sm); padding:5px 10px;
}
/* 취업 흐름 (직업→자격증→수강→...→취업) — 진입 배너(남색) 안에 들어갑니다 */
.job-flow{
  display:flex; align-items:center; gap:var(--s-3);
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
}
/* 단계 칸은 폭을 균등 분배해 한 줄을 꽉 채웁니다 (화살표는 고정 폭) */
.job-flow__step{
  flex:1; text-align:center; white-space:nowrap;
  font-size:var(--fs-sm); font-weight:700; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:9px 10px;
}
.job-flow__step.is-key{ background:#fff; color:var(--navy) }
.job-flow__arrow{ flex:none; color:rgba(255,255,255,.45); font-size:var(--fs-sm) }
/* 좁은 화면에서는 한 줄을 유지한 채 가로로 자동으로 흘려보냅니다.
   여섯 단계가 다 안 들어가는데 스크롤은 눈에 띄지 않아 뒤 단계를 놓치기 쉽습니다.
   JS가 순서를 한 벌 복제해 넣은 뒤에만 굴립니다 (사본 없이 움직이면 빈 구간이 생깁니다). */
@media (max-width:980px){
  .job-flow{
    display:block; overflow:hidden;
    margin-left:-34px; margin-right:-34px;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }
  .job-flow__track{ display:flex; width:max-content; gap:0 }
  .job-flow__track.is-rolling{ animation:job-flow-roll 18s linear infinite }
  /* 사본 사이 간격도 항목 사이와 같아지도록 각 벌이 뒤쪽 여백을 안고 갑니다
     — 그래야 -50% 이동이 정확히 한 벌만큼 맞아떨어집니다 */
  .job-flow__seq{ display:flex; align-items:center; gap:var(--s-2); padding-right:var(--s-2) }
  .job-flow__step{ flex:0 0 auto }

  /* 모션을 줄이는 설정에서는 손으로 넘겨 볼 수 있게 되돌립니다 */
  @media (prefers-reduced-motion:reduce){
    .job-flow{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch }
    .job-flow::-webkit-scrollbar{ display:none }
  }
}
@keyframes job-flow-roll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (max-width:560px){
  /* 배너 패딩이 24px로 줄어드는 구간 */
  .job-flow{ margin-left:-24px; margin-right:-24px }
}

/* ── 직업 상세 (job-detail.html) ── */
.jobd-hero{ background:var(--navy); color:#fff; border-radius:var(--r-lg); padding:34px; margin-bottom:22px }
.jobd-hero__group{ display:inline-block; font-size:var(--fs-xs); font-weight:700; color:#8FB4F0; background:rgba(255,255,255,.1); border-radius:var(--r-sm); padding:5px 11px; margin-bottom:14px }
.jobd-hero h1{ font-size:var(--fs-2xl); font-weight:700; letter-spacing:-.03em; margin-bottom:10px }
.jobd-hero p{ font-size:var(--fs-sm); color:rgba(255,255,255,.78); line-height:1.7; max-width:60ch }

.jobd-grid{ display:grid; grid-template-columns:1fr 320px; gap:var(--s-7); align-items:start }
.jobd-main{ display:grid; gap:var(--s-5)}
.jobd-block{ background:var(--surface); border-radius:var(--r-lg); padding:24px }
.jobd-block h2{ font-size:var(--fs-md); font-weight:700; color:var(--ink); margin-bottom:14px; display:flex; align-items:center; gap:var(--s-3)}
.jobd-block h2::before{ content:""; width:4px; height:17px; border-radius:var(--r-sm); background:var(--blue) }
.jobd-tasklist{ display:grid; gap:var(--s-3)}
.jobd-tasklist li{ position:relative; padding-left:26px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.6 }
.jobd-tasklist li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--blue-soft);
}
.jobd-tasklist li::after{
  content:""; position:absolute; left:5px; top:10px; width:6px; height:6px; border-radius:50%; background:var(--blue);
}
.jobd-chips{ display:flex; flex-wrap:wrap; gap:var(--s-3)}
.jobd-chip{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); background:var(--surface-sunken); border-radius:var(--r-full); padding:8px 15px }
.jobd-sites{ display:flex; flex-wrap:wrap; gap:var(--s-3)}
.jobd-site{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-md); padding:9px 15px;
}
.jobd-site .ph{ width:16px; height:16px; border-radius:var(--r-sm)}
.jobd-note{ font-size:var(--fs-xs); color:var(--faint); margin-top:12px; line-height:1.6 }

/* 우측: 필요한 과정 → 수강 CTA */
.jobd-course{ background:var(--surface); border-radius:var(--r-lg); padding:24px; position:sticky; top:20px }
.jobd-course__label{ font-size:var(--fs-xs); font-weight:700; color:var(--muted); margin-bottom:12px }
.jobd-course__name{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-bottom:6px }
.jobd-course__meta{ font-size:var(--fs-sm); color:var(--muted); margin-bottom:16px }
.jobd-course__meta b{ color:var(--navy) }
.jobd-course__flow{ display:grid; gap:var(--s-3); margin:16px 0 18px }
.jobd-course__flow li{ display:flex; align-items:center; gap:var(--s-4); font-size:var(--fs-sm); color:var(--ink-2) }
.jobd-course__flow .n{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:var(--fs-2xs); font-weight:700; display:flex; align-items:center; justify-content:center }

@media (max-width:980px){
  /* 직업군은 여러 줄로 쌓으면 아래쪽 직업이 묻혀서, 한 줄 캐러셀(dot 이동)로 바꿉니다.
     스크롤바는 감추고 이동은 아래 dot으로 — 터치 스와이프도 그대로 동작합니다. */
  .job-groups{
    display:flex; flex-wrap:nowrap; overflow-x:auto;
    scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .job-groups::-webkit-scrollbar{ display:none }
  /* 한 화면에 4개 (gap 10px × 3) */
  .job-group{ flex:0 0 calc((100% - 30px) / 4); scroll-snap-align:start }

  .job-list{ grid-template-columns:repeat(2,1fr) }
  .jobd-grid{ grid-template-columns:1fr }
  .jobd-course{ position:static }
}
@media (max-width:560px){
  /* 한 화면에 2개 (gap 10px × 1) */
  .job-group{ flex-basis:calc((100% - 10px) / 2) }
  .job-list{ grid-template-columns:1fr }
  .jobguide-intro{ padding:24px }
  .jobd-hero{ padding:26px }
  .jobd-hero h1{ font-size:var(--fs-xl) }
}

/* --------------------------------------------------------------------------
   35. Print
   -------------------------------------------------------------------------- */
@media print{
  .header,.trust-strip,.cart-bar,.detail-cta,.cta-band,.footer,.search-overlay{ display:none }
  body{ color:#000; background:#fff }
  .detail-hero{ background:none; color:#000 }
}

/* ==========================================================================
   강의 상세페이지 — Figma wrapper_section (419:13400)
   ========================================================================== */
.dsec{ padding:72px 0 }
.dsec--navy{ background:var(--navy); color:#fff }
/* 과정 정보 — 히어로 그라데이션 끝색과 같게 해 설명글에서 자연스럽게 이어집니다 */
.dsec--info{ background:#00182F }
/* 수강 이유(#why) — 지정된 그라데이션 배경 */
#why.dsec--navy{ background:linear-gradient(180deg, #002983 0%, #001C58 100%) }
.dsec--tint{ background:#F4F7FF }
.dsec__title{ font-size:var(--fs-xl); font-weight:700; letter-spacing:-.025em; text-align:center; color:var(--ink) }
.dsec__title--on-navy{ color:#fff }
.dsec__sub{ margin-top:8px; font-size:var(--fs-sm); color:var(--muted); text-align:center }
.dsec--navy .dsec__sub{ color:rgba(255,255,255,.7) }
.dsec__title + *:not(.dsec__sub){ margin-top:26px }
.dsec__sub + *{ margin-top:26px }
/* 한 섹션에 제목이 2개 이상일 때, 두 번째 이후 제목은 앞 블록과 넉넉히 띄웁니다.
   (mt-6/mt-7 유틸리티보다 우선하도록 지정) */
.dsec .dsec__title ~ .dsec__title{ margin-top:64px }

/* 히어로 — Figma image (419:13633)
   배경 사진 위에 아래로 짙어지는 그라데이션을 깔고 그 위에 문구를 올립니다.
   사진이 없는 지금은 그라데이션만으로도 성립하도록 바탕색을 함께 지정했습니다. */
.dhero{ position:relative; background:#062B52; overflow:hidden }
.dhero__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.dhero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  /* Figma 스펙 그대로: 20%까지 투명, 이후 하단(#00182F)까지 직선 램프 */
  background:linear-gradient(180deg, rgba(0,24,47,0) 20%, #00182F 100%);
}
.dhero__in{
  position:relative; z-index:1;
  min-height:400px; padding-top:56px; padding-bottom:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center;
}
.dhero__gov img{ display:block; height:32px; width:auto }
.dhero__title{
  margin-top:16px;
  font-size:clamp(28px, 3.4vw, 44px); font-weight:700; line-height:1.15;
  letter-spacing:-.03em; color:#fff;
}
.dhero__rule{ width:90px; height:1px; border:0; background:rgba(255,255,255,.5); margin:38px 0 26px }
.dhero__desc{
  max-width:760px; font-size:var(--fs-sm); font-weight:400; line-height:1.8;
  color:rgba(255,255,255,.86); word-break:keep-all;
}

/* 섹션 바로가기 — 스크롤 시 상단 고정 */
.dtabs{ position:sticky; top:var(--header-h); z-index:50; background:var(--surface); border-bottom:1px solid var(--line) }
.dtabs__in{
  max-width:var(--container); margin:0 auto; padding:0 20px;
  display:flex; justify-content:center; overflow-x:auto; scrollbar-width:none;
}
.dtabs__in::-webkit-scrollbar{ display:none }
.dtabs a{
  padding:16px 22px; font-size:var(--fs-sm); font-weight:700; color:var(--faint);
  white-space:nowrap;
}
.dtabs a:hover{ color:var(--ink-2) }
.dtabs a[aria-current="true"]{ color:var(--blue) }   /* 파란 밑줄 바 없이 색상만 강조 */
/* 고정된 탭에 제목이 가리지 않도록 */
.dsec[id]{ scroll-margin-top:calc(var(--header-h) + 55px) }   /* 헤더 + 고정 탭 높이 */
/* 오른쪽 페이드 — 탭이 더 있다는 신호. 없으면 글자가 잘린 것처럼 보입니다. */
.dtabs::after{
  content:''; position:absolute; right:0; top:0; bottom:1px; width:40px; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 70%);
  opacity:0; transition:opacity .15s;
}
.dtabs.has-more::after{ opacity:1 }

/* 스펙 · 등록번호 *//* 스펙 · 등록번호 */
.dspec-grid{ display:grid; grid-template-columns:792fr 376fr; gap:var(--s-6); align-items:stretch }
.dspec{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-5) var(--s-9); align-content:center; padding:24px }
.dspec > div{ display:flex; align-items:center; gap:var(--s-4); font-size:var(--fs-sm) }
.dspec .tag{
  flex-shrink:0; background:var(--blue-soft); color:var(--ink-3);
  border-radius:var(--r-md); padding:9px 12px; font-size:var(--fs-xs); font-weight:700; white-space:nowrap;
}
.dspec b{ font-weight:600; color:var(--ink-2) }

.dreg{ display:flex; flex-direction:column; padding:24px }
.dreg__no{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); letter-spacing:-.02em }
.dreg__desc{ margin:14px 0 auto; font-size:var(--fs-sm); color:var(--muted); line-height:1.75 }
.dreg .btn{ margin-top:18px; padding:15px }

/* 수강료 배너 — Figma Frame73 (764:1795)
   흰 카드 대신 옅은 블루 그라데이션 + 우측 금색 월계관 배지 */
.card.dprice{
  margin-top:var(--s-6); padding:24px 42px; border:0;
  background:linear-gradient(102deg, #EFF7FF 0%, #FBFDFF 53%, #EAF4FF 100%);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-8);
}
.dprice__label{ color:var(--navy) !important }
.dprice__label{ font-size:var(--fs-sm); font-weight:700; color:var(--blue) }
.dprice__main{
  margin-top:10px; display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-5);
  font-size:var(--fs-2xl); font-weight:700; color:var(--ink); letter-spacing:-.03em;
}
.dprice__main strong{ font-size:var(--fs-2xl); color:var(--navy) }
.dprice__main strong em{ font-style:normal; font-size:42px; line-height:1; color:var(--navy) }
.dprice__main del{ font-size:var(--fs-md); font-weight:600; color:var(--disabled) }
/* 금색 월계관 배지 — 월계관 이미지 위에 문구는 Figma 원본 벡터(SVG) */
.dprice__badge{
  flex-shrink:0; width:118px; height:118px;
  background:url("../gold-badge.png") no-repeat center / contain;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:34px;   /* 월계관 위쪽 빈 공간에 문구가 오도록 살짝 위로 */
}
.dprice__badge-text{ display:block; width:46px; height:auto }

/* 추천 대상 */
.dstars{ display:block; width:150px; height:auto; margin:0 auto }   /* Figma 별점 이미지 */
.dstars + .dsec__title{ margin-top:8px }
.dwho{
  display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 3*16px)/4); gap:var(--s-6);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none;                 /* 인디케이터로 위치를 알리므로 스크롤바는 감춥니다 */
  cursor:grab;                          /* 잡아서 끌 수 있음을 커서로 안내 */
}
.dwho::-webkit-scrollbar{ display:none }
/* 마우스로 끌고 있는 동안엔 스냅을 풀어 손가락을 부드럽게 따라오게 하고, 텍스트 선택은 막습니다 */
.dwho.is-grabbing{ cursor:grabbing; scroll-snap-type:none; user-select:none }
.dwho__card{
  scroll-snap-align:start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:24px; text-align:center; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--s-5);
}
.dwho__no{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:52px; height:34px; padding:0 14px; border-radius:var(--r-full);
  background:var(--navy); color:#fff; font-size:var(--fs-sm); font-weight:700;
}
.dwho__card p{ margin:0; font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); line-height:1.6 }
.dwho__dots{ display:flex; justify-content:center; gap:var(--s-2); margin-top:16px }
/* 원 → 길쭉한 알약으로 모프. border-radius:var(--r-full)라 두 상태 모두 둥글고 폭만 늘어납니다. */
.dwho__dots button{
  width:8px; height:8px; border-radius:var(--r-full); background:var(--line);
  transition:width .4s cubic-bezier(.4,0,.2,1), background-color .3s ease;
}
.dwho__dots button[aria-current="true"]{ width:16px; background:var(--navy) }

/* 과정 상세 소개 */
.dintro{ padding:28px 32px }
.dintro__head{ display:flex; align-items:center; gap:var(--s-5); margin:0; font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.dintro__ico{ flex-shrink:0; width:44px; height:44px }
.dintro > p:not(.dintro__head), .dintro ul{ margin-top:16px; font-size:var(--fs-sm); color:var(--muted); line-height:1.85 }
.dintro--blue{ background:var(--blue); border-radius:var(--r-lg); color:#fff }
.dintro--blue .dintro__head{ color:#fff }
.dintro--blue ul{ color:rgba(255,255,255,.92); list-style:none }
.dintro--blue li{ padding-left:12px; position:relative }
.dintro--blue li::before{ content:"·"; position:absolute; left:0 }
/* 진로 및 전망 카드 오른쪽 위 — 취업 길찾기로 가는 버튼 (해당 직업이 있을 때만 JS가 추가) */
.dintro__head{ min-height:44px }   /* 아이콘 높이만큼 확보해 버튼이 세로 중앙에 오게 */
.dintro__guide{
  margin-left:auto; flex-shrink:0;
  display:inline-flex; align-items:center; gap:var(--s-1);
  padding:8px 15px; border-radius:var(--r-full);
  background:rgba(255,255,255,.16); color:#fff; font-size:var(--fs-sm); font-weight:700;
  transition:background-color .15s;
}
.dintro__guide:hover{ background:rgba(255,255,255,.28) }

/* 타 교육원 비교 */
/* 타 교육원 vs 한평생 — Figma 545:17983의 240 : 795 비율을 그대로 두고 가운데 정렬.
   '타 교육원' 박스는 세로로 짧게(가운데 정렬), 오른쪽 '한평생' 박스가 위로 겹칩니다. */
.dcompare{ display:grid; grid-template-columns:200px minmax(0,795px); justify-content:center; align-items:center }
.dcompare__other{
  background:#041C3A; border-radius:var(--r-lg) 0 0 var(--r-lg);
  padding:40px 24px 40px 28px; margin-right:-11px;
}
.dcompare__label{ font-size:var(--fs-sm); font-weight:700; color:#fff; text-align:center }
.dcompare__other ul{ margin-top:16px; font-size:var(--fs-xs); color:rgba(255,255,255,.55); line-height:2 }
.dcompare__other li{ padding-left:10px; position:relative }
.dcompare__other li::before{ content:"·"; position:absolute; left:0 }
.dcompare__ours{
  position:relative; z-index:1;
  background:linear-gradient(180deg,#CFDCFF 0%,#C2D2FF 100%);
  border-radius:var(--r-lg); padding:32px;   /* 상하좌우 동일 */
}
.dcompare__brand{ text-align:center }
.dcompare__brand img{ height:22px; width:auto; display:inline-block }
.dbenefit{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-5); margin-top:32px }
.dbenefit li{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  background:var(--surface); border-radius:var(--r-lg); padding:22px 12px 26px; min-height:216px;
  text-align:center; font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); line-height:1.55;
}
.dbenefit__ico{ display:block; width:118px; height:118px; object-fit:contain; margin:0 auto 12px }
/* '자격증 발급비 별도*' — 장학지원 카드 우측 아래 모서리에 작게 */
.dbenefit__note{ position:absolute; right:12px; bottom:9px; font-size:var(--fs-xs); font-weight:600; color:var(--faint); line-height:1 }

/* 정식 등록 자격증 과정 */
.dcert{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-6) }
.dcert__card{ background:rgba(255,255,255,.07); border-radius:var(--r-lg); padding:30px; text-align:center }
.dcert__tag{
  display:inline-block; background:var(--surface); color:var(--ink-2);
  border-radius:var(--r-full); padding:9px 16px; font-size:var(--fs-sm); font-weight:700;
}
/* 로고 카드 — 흰 배경 위 기관/부처 로고 (Figma 535:16784) */
.dcert__logo{
  display:flex; align-items:center; justify-content:center;
  width:300px; max-width:100%; height:150px; margin:22px auto;
  background:var(--surface); border-radius:var(--r-md);
}
.dcert__logo img{ width:auto; max-width:82% }
.dcert__logo--gov img{ height:62px; max-width:none }   /* 보건복지부: 가로 로고 */
/* 좁은 화면에서는 로고 카드(300px 고정)가 카드 폭을 밀어내므로 폭에 맞춰 줄입니다 */
@media (max-width:560px){
  .dcert__card{ padding:24px 16px }
  .dcert__logo{ width:100% }
  .dcert__logo--gov img{ height:auto; max-width:100% }
}
.dcert__card p:last-child{ font-size:var(--fs-sm); color:rgba(255,255,255,.72); line-height:1.85 }

/* 취득 절차 */
/* 취득 절차 — Figma 430:13723: 네이비 섹션 위 파란 말풍선 카드(#224187) */
.dstep{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s-8); text-align:center }
.dstep li{
  position:relative; background:#224187; border-radius:var(--r-lg);
  padding:26px 18px 24px;
}
/* 말풍선 꼬리 — 회전한 정사각형의 바깥 꼭짓점만 둥글게(border-radius) 해서
   뾰족하지 않고 카드 radius와 어울리게. 데스크탑(가로 배열)에서는 오른쪽(→).
   마지막 카드는 꼬리를 붙이지 않습니다. */
.dstep li:not(:last-child)::after{
  content:''; position:absolute; z-index:1;
  right:-9px; top:50%;
  width:26px; height:26px; background:#224187;
  transform:translateY(-50%) rotate(45deg);
  border-radius:0 var(--r-md) 0 0;   /* 회전 후 오른쪽 꼭짓점 */
}
.dstep__ico{ display:block; width:66px; height:66px; object-fit:contain; margin:0 auto 12px }
.dstep b{ display:block; font-size:var(--fs-md); font-weight:700; color:#fff }
.dstep span:not(.ph){ display:block; margin-top:10px; font-size:var(--fs-sm); color:rgba(255,255,255,.7); line-height:1.7 }

/* 자격증 발급 예시 */
/* 발급 예시 — 견본 두 장이 담긴 합성 이미지 (Figma 771:1895)
   이미지에 파란 배경이 포함돼 있어 네이비 섹션 위에 박스처럼 얹힙니다. */
.dsample__img{ display:block; width:100%; max-width:920px; height:auto; margin:0 auto; border-radius:var(--r-lg) }
.dsample__note{ margin-top:22px; text-align:center; font-size:var(--fs-xs); color:var(--faint) }

/* 커리큘럼 */
.dcurri{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-5)}
.dcurri li{
  display:flex; align-items:center; gap:var(--s-5);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 20px; font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
}
.dcurri .no{
  flex-shrink:0; min-width:50px; text-align:center;
  background:var(--blue); color:#fff; border-radius:var(--r-md);
  padding:8px 6px; font-size:var(--fs-xs); font-weight:700;
}

/* 교수 소개 */
.dprof{ display:flex; align-items:center; gap:var(--s-8); padding:24px }
.dprof__img{ width:150px; height:150px; border-radius:var(--r-lg); flex-shrink:0 }
.dprof__name{ font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.dprof__list{ margin-top:16px; display:grid; gap:var(--s-3)}
.dprof__list li{ display:flex; align-items:center; gap:var(--s-3); font-size:var(--fs-sm); color:var(--ink-3) }
.dprof__list li::before{
  content:"✓"; flex-shrink:0; width:18px; height:18px; border-radius:50%;
  background:var(--blue); color:#fff; font-size:var(--fs-2xs);
  display:flex; align-items:center; justify-content:center;
}

/* 자격관리기관 표 */
.dtable{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
.dtable th, .dtable td{ padding:19px 24px; font-size:var(--fs-sm); border-bottom:1px solid var(--line) }
.dtable tr:last-child th, .dtable tr:last-child td{ border-bottom:0 }
/* 항목 이름은 한 낱말이라 아무 데서나 끊기면 '자격관리기 / 관'처럼 읽힙니다.
   keep-all 로 낱말 중간을 막고, 끊어도 되는 자리는 마크업의 <wbr> 로 지정합니다. */
.dtable th{ width:250px; background:var(--surface-sunken); color:var(--ink-2); font-weight:700; text-align:center; border-right:1px solid var(--line); word-break:keep-all }
.dtable td{ color:var(--ink-3) }

@media (max-width:980px){
  .dspec-grid, .dcert, .dsample, .dcurri{ grid-template-columns:1fr }
  /* 스펙 8개는 태블릿에서 2열(4줄+4줄) 유지 — 모바일에서만 1열(8줄) */
  .dcompare{ grid-template-columns:1fr }
  /* 세로로 쌓일 땐 '타 교육원' 박스를 아래 한평생 박스보다 좁게, 가운데 정렬 */
  .dcompare__other{ width:70%; margin:0 auto -12px; border-radius:var(--r-lg) }
  /* 넓어진 '타 교육원' 박스에선 목록을 2열(2줄+2줄)로 */
  .dcompare__other ul{ display:grid; grid-template-columns:auto auto; justify-content:center; column-gap:var(--s-10); row-gap:var(--s-1)}
  .dbenefit{ grid-template-columns:repeat(2,1fr) }
  /* 취득 절차는 태블릿·모바일 모두 한 줄에 하나씩 세로로 쌓고, 말풍선 꼬리는 아래(↓)로 */
  .dstep{ grid-template-columns:1fr }
  .dstep li:not(:last-child)::after{
    right:auto; left:50%; top:auto; bottom:-9px;
    transform:translateX(-50%) rotate(45deg);
    border-radius:0 0 var(--r-md) 0;   /* 회전 후 아래쪽 꼭짓점 */
  }
  .dwho{ grid-auto-columns:calc((100% - 16px)/2) }
  /* 수강료 카드 — 좁아지면 텍스트는 왼쪽 위, 금색 배지는 오른쪽 아래 구석으로 */
  .card.dprice{ display:block; position:relative; padding:22px; min-height:132px }
  .dprice > div{ padding-right:124px }   /* 오른쪽 아래 배지 자리를 비워 텍스트가 겹치지 않게 */
  .dprice__badge{ position:absolute; right:18px; bottom:14px; width:104px; height:104px; padding-top:30px }
  /* 교수 소개는 태블릿에선 사진 왼쪽 · 텍스트 오른쪽(가로형) 유지 → flex row 그대로 둡니다 */
  .dtable th{ width:120px }
}
/* 태블릿 전용 — 취득 절차 카드를 가로형(이미지 왼쪽 / 제목·설명 오른쪽, 왼쪽 정렬)으로.
   모바일(≤560)은 세로 가운데 정렬을 그대로 유지합니다. */
@media (min-width:561px) and (max-width:980px){
  .dstep li{
    display:grid; grid-template-columns:auto 1fr; column-gap:var(--s-8);
    align-items:center; text-align:left; padding:24px 30px;
  }
  .dstep__ico{ grid-row:1 / span 2; width:96px; height:96px; margin:0 }
  .dstep b{ grid-column:2; align-self:end }
  .dstep span:not(.ph){ grid-column:2; align-self:start; margin-top:6px }
}
@media (max-width:560px){
  .dwho{ grid-auto-columns:88% }
  .dbenefit, .dstep{ grid-template-columns:1fr }
  .dspec{ grid-template-columns:1fr }               /* 모바일: 스펙 1열(8줄) */
  .dcompare__other ul{ display:block }              /* 모바일: 목록 1열(4줄) */
  /* 교수 소개 — 모바일에선 세로로 쌓고 가운데 정렬 */
  .dprof{ flex-direction:column; align-items:center; text-align:center }
  .dprof__list li{ justify-content:center }
  .dprice__main{ font-size:var(--fs-xl) }
  .dprice__main strong em{ font-size:var(--fs-2xl) }
}

/* 합격후기 · 이력서 배너 — 더 짙은 네이비 */
/* Figma 545 프레임: 위에서 아래로 짙어지는 네이비 그라데이션 */
.dsec--deep{ background:linear-gradient(180deg, #001C58 0%, #000613 100%); color:#fff }
/* 커리큘럼·교수소개 — Figma 442:14288: 옅은 블루 바탕(#F3F6FE) 위에
   부드러운 블루 그라데이션 이미지를 30% 멀티플라이로 깔았습니다. */
.dsec--soft{ position:relative; background:#F3F6FE; overflow:hidden }
.dsec--soft::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url("../curri-bg.jpg") center / cover no-repeat;
  opacity:.35; mix-blend-mode:multiply;
}
.dsec--soft > .container{ position:relative; z-index:1 }

/* 취득절차·발급예시·이력서 세 섹션을 하나의 연속된 그라데이션으로 묶습니다.
   그라데이션은 그룹 전체에 한 번만 적용하고, 각 섹션 배경은 투명 처리해 이음매를 없앱니다. */
.deep-group{ background:linear-gradient(180deg, #001C58 0%, #000613 100%) }
.deep-group > .dsec--deep{ background:transparent }

/* 합격후기 — Figma 574:19786: 밝은 파랑 배경 + 반짝이 + 트로피 + 가로 자동 스크롤 */
.dsec--reviews{ position:relative; overflow:hidden; background:#0037AF; color:#fff }
/* 별 배경 — 섹션 전체를 덮도록 cover. 폭이 줄어도 높이를 유지해 아래 빈칸이 생기지 않습니다. */
.drev-sparkle{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  max-width:none; pointer-events:none; mix-blend-mode:screen; opacity:.9; z-index:0;
}
.dsec--reviews .container{ position:relative; z-index:1 }
.drev-trophy{ display:block; width:130px; height:auto; margin:20px auto 0 }

/* 마르퀴 — 트랙이 왼쪽으로 흐르고, 카드 두 벌이라 -50%에서 자연스럽게 반복 */
.drev-marquee{ position:relative; z-index:1; margin-top:34px; overflow:hidden }
.drev-track{
  display:flex; gap:var(--s-8); width:max-content;
  padding:6px 20px;   /* 카드 그림자 잘림 방지 */
  animation:drev-scroll 44s linear infinite;
}
.drev-marquee:hover .drev-track{ animation-play-state:paused }
@keyframes drev-scroll{ from{ transform:translateX(0) } to{ transform:translateX(calc(-50% - 12px)) } }
@media (prefers-reduced-motion:reduce){ .drev-track{ animation:none } }

.drev__card{
  flex:0 0 auto; width:300px; box-sizing:border-box;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; color:var(--ink-2);
}
.drev__top{ display:flex; gap:var(--s-5); align-items:flex-start }
.drev__ava{ width:72px; height:72px; border-radius:var(--r-md); flex-shrink:0 }
.drev__tit{ font-size:var(--fs-md); font-weight:700; color:var(--ink); line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.drev__who{ margin-top:8px; font-size:var(--fs-sm); color:var(--muted) }
.drev__body{
  margin-top:14px; font-size:var(--fs-xs); color:var(--muted); line-height:1.7;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.drev__tags{ display:flex; align-items:center; gap:var(--s-4); margin-top:14px; flex-wrap:wrap }
.drev__tags span{
  background:var(--blue-soft); color:var(--ink-3); border-radius:var(--r-md);
  padding:7px 11px; font-size:var(--fs-xs); font-weight:600;
}
.drev__tags em{ font-style:normal; font-size:var(--fs-xs); color:var(--faint) }
.drev__more{ text-align:center; margin-top:26px }
/* 합격후기 전체 보기 — '취업 길찾기' 버튼과 같은 반투명 흰색 알약 스타일 */
.drev__more .btn--white{
  gap:var(--s-2); padding:10px 20px; font-size:var(--fs-sm); font-weight:700; border-radius:var(--r-full);
  background:rgba(255,255,255,.16); color:#fff;
}
.drev__more .btn--white:hover{ background:rgba(255,255,255,.28); color:#fff }

/* 이력서 기재 배너 — 합성 이미지 한 장 (Figma 771:1898) */
.dresume{ position:relative; overflow:hidden; padding-bottom:0 }
.dresume .dsec__title em{ font-style:normal; color:var(--blue-300) }
/* 투명 PNG 이력서 이미지 (합격 배지·태그·글로우 포함) */
.dresume .dresume__stage{ position:relative; z-index:0; margin-top:12px }
.dresume__shot{ display:block; width:100%; max-width:1120px; height:auto; margin:0 auto; position:relative; z-index:0 }
/* 이미지 아랫부분을 덮는 어두운 받침 박스 — 이미지가 어둠으로 잠기는 효과 (Figma Rectangle 1708).
   높이를 이미지(스테이지) 높이의 비율로 잡아, 화면 폭이 줄어 이미지가 작아져도
   덮는 비율이 그대로라 뒤 이미지가 점점 가려지지 않습니다. 폭은 100vw로 풀블리드. */
.dresume__base{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; height:21.5%; z-index:1;
  background:#010715; box-shadow:0 -4px 28px rgba(0,0,0,.45); pointer-events:none;
}

@media (max-width:560px){
  .dtabs__in{ padding:0 16px }
  .dtabs a{ padding:13px 14px; font-size:var(--fs-sm) }
  /* 후기 카드 폭은 데스크탑·태블릿과 같은 300px을 씁니다 — 옆으로 흐르는
     마르퀴라 좁은 화면에서 줄일 이유가 없고, 줄이면 본문이 더 잘립니다 */
  .dhero__rule{ margin:40px 0 28px }
  .dhero__desc{ font-size:var(--fs-sm) }
  /* 딤 값은 그대로 두고, 헤더 내용을 아래(어두운 영역)로 밀어 잘 보이게 위 여백을 키웁니다 */
  .dhero__in{ min-height:300px; padding-top:250px }
  /* 이력서 배너 — 시안처럼 이력서 카드가 화면을 꽉 채우게 합니다.
     원본 좌우에 여백이 13%씩 있어 100%로는 작아 보입니다. 화면보다 크게 늘려
     좌우를 흘려보내고(섹션의 overflow:hidden 이 잘라냅니다), 그만큼 하단도
     받침 박스에 깊이 잠깁니다. margin-left 는 넘친 폭의 절반이라 가운데 정렬입니다. */
  .dresume .dresume__stage{ margin-left:-20px; margin-right:-20px }
  .dresume__shot{ width:132%; max-width:none; margin-left:-16% }
  /* 확대한 만큼 이미지 아래 빈 여백도 커져, 받침 박스를 더 높여 덮습니다 */
  .dresume__base{ height:32% }
}

/* ==========================================================================
   게시판 상세 (공지 상세 · 합격후기 상세)
   ========================================================================== */
.article{ max-width:840px; margin:0 auto }
.article__head{ padding-bottom:20px; border-bottom:2px solid var(--ink) }
.article__cat{
  display:inline-block; background:var(--blue-soft); color:var(--navy);
  border-radius:var(--r-md); padding:5px 11px; font-size:var(--fs-xs); font-weight:700;
}
.article__title{
  margin-top:14px; font-size:var(--fs-2xl); font-weight:700; color:var(--ink);
  line-height:1.4; letter-spacing:-.02em;
}
.article__meta{ margin-top:14px; display:flex; gap:var(--s-5); font-size:var(--fs-sm); color:var(--faint) }
.article__meta b{ color:var(--muted); font-weight:600 }
.article__body{
  padding:32px 4px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.9;
  border-bottom:1px solid var(--line);
}
.article__body p{ margin:0 0 18px }
.article__body p:last-child{ margin-bottom:0 }
.article__body h2{ font-size:var(--fs-lg); font-weight:700; color:var(--ink); margin:28px 0 12px }
.article__body ul{ margin:0 0 18px; padding-left:2px; list-style:none }
.article__body li{ position:relative; padding-left:16px; margin-bottom:8px }
.article__body li::before{ content:"·"; position:absolute; left:4px; color:var(--muted) }
.article__body .ph{ width:100%; aspect-ratio:16/9; border-radius:var(--r-lg); margin:8px 0 20px }
.article__body strong{ color:var(--ink); font-weight:700 }

/* 합격후기 상세 — 수강생 정보 카드 */
.article__profile{
  display:flex; align-items:center; gap:var(--s-6); margin-top:20px;
  background:var(--surface-sunken); border-radius:var(--r-lg); padding:16px 18px;
}
.article__profile .ph{ width:56px; height:56px; border-radius:50%; flex-shrink:0 }
.article__profile .ph[hidden]{ display:none }   /* 사진이 없으면 자리도 차지하지 않게 */
.article__profile b{ font-size:var(--fs-sm); color:var(--ink) }
.article__profile span{ display:block; margin-top:3px; font-size:var(--fs-xs); color:var(--faint) }
.article__tags{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:16px }
.article__tags span{
  background:var(--blue-soft); color:var(--ink-3); border-radius:var(--r-md);
  padding:6px 11px; font-size:var(--fs-xs); font-weight:700;
}

/* 이전/다음 글 이동 */
.article__nav{ margin-top:4px; border-bottom:1px solid var(--line) }
.article__nav a{
  display:flex; gap:var(--s-6); align-items:center; padding:16px 4px;
  font-size:var(--fs-sm); color:var(--muted); border-top:1px solid var(--line);
}
.article__nav a:first-child{ border-top:0 }
.article__nav a:hover .article__nav-tit{ text-decoration:underline }
.article__nav-label{ flex-shrink:0; width:64px; font-weight:700; color:var(--faint) }
.article__nav-tit{ color:var(--ink-2); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.article__actions{ margin-top:26px; text-align:center }
/* 좁은 화면에서 28px 제목은 세 줄까지 넘어가 본문이 한참 밀립니다 — 한 단계 낮춥니다 */
@media (max-width:560px){
  .article__title{ font-size:var(--fs-xl) }
}

/* ==========================================================================
   404 · 준비중 안내 페이지
   ========================================================================== */
.errpage{
  max-width:560px; margin:0 auto; padding:56px 20px 40px; text-align:center;
}
.errpage__code{
  font-size:96px; font-weight:700; line-height:1; letter-spacing:-.04em;
  color:var(--navy);
}
.errpage__code small{ font-size:40px; font-weight:700; color:var(--blue) }
.errpage__title{ margin-top:22px; font-size:var(--fs-xl); font-weight:700; color:var(--ink); letter-spacing:-.02em }
.errpage__desc{ margin-top:12px; font-size:var(--fs-sm); color:var(--muted); line-height:1.8 }
.errpage__actions{ margin-top:28px; display:flex; gap:var(--s-4); justify-content:center; flex-wrap:wrap }
.errpage__links{
  margin-top:34px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; gap:var(--s-3) var(--s-6); justify-content:center; flex-wrap:wrap;
  font-size:var(--fs-sm);
}
.errpage__links a{ color:var(--muted); font-weight:600 }
.errpage__links a:hover{ color:var(--ink-2) }

/* --------------------------------------------------------------------------
   초소형 화면(320px) 대응 — 고정 폭 요소가 화면을 밀어내지 않게 합니다
   -------------------------------------------------------------------------- */
@media (max-width:560px){
  /* 고정 최소폭(280px) 버튼 → 화면 폭에 맞춤 */
  .exam-submit .btn, .result-cta .btn, .result-cta .btn--ghost{ min-width:0; width:100% }
  /* 발급 신청 표 — 여백을 줄여 좁은 폭에 들어가게 */
  .issue-table thead th, .issue-table td{ padding:10px 8px }
  /* 좁은 화면에서는 합격일을 감춰 자격증명·신청 기한에 폭을 넘깁니다 */
  .issue-table .col-pass{ display:none }
  /* 날짜는 26-04-27, 금액은 10만원으로 줄여 한 줄에 들어가게 합니다.
     금액 원문은 DOM에 그대로 남겨 두어야 결제 합산이 정확합니다(::after로만 대체 표기). */
  .issue-table .yy{ display:none }
  .issue-table .fee{ font-size:0 }
  .issue-table .fee::after{ content:attr(data-short); font-size:var(--fs-sm) }
  /* 날짜·금액은 중간에서 끊기지 않게 — 대신 자격증명이 줄바꿈을 담당합니다 */
  .issue-table .due, .issue-table .fee{ white-space:nowrap }
  /* 나의 강의실 — 과목명·상태 뱃지가 두 줄로 넘치지 않게 한 단계씩 줄입니다 */
  .my-card__head h2{ font-size:var(--fs-md) }
  .my-card__head .badge{ font-size:var(--fs-2xs); padding:3px 7px }
  /* 하단 고정 CTA — 카운트다운이 길면 줄을 넘깁니다 */
  .detail-cta__bottom{ flex-wrap:wrap; justify-content:center }
}

/* --------------------------------------------------------------------------
   하단 고정 탭바 (태블릿·모바일 전용 · Figma tabbar 351:10964)
   -------------------------------------------------------------------------- */
.tabbar{ display:none }
@media (max-width:980px){
  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; align-items:center; justify-content:space-around;
    /* 상단 GNB와 같은 높이 (--header-h · 데스크톱 64 / 모바일 56) */
    height:var(--header-h); padding-bottom:env(safe-area-inset-bottom);
    background:var(--surface); border-top:1px solid var(--line);
  }
  .tabbar__item{
    display:inline-flex; align-items:center; gap:var(--s-1);
    font-size:var(--fs-sm); font-weight:700; color:var(--navy);
  }
  .tabbar__item img{ display:block; width:21px; height:21px }
  /* 탭바에 마지막 내용이 가리지 않도록 본문 아래 여백 확보 */
  body.has-tabbar{ padding-bottom:calc(var(--header-h) + env(safe-area-inset-bottom)) }
}

/* --------------------------------------------------------------------------
   태블릿·모바일 카드 줄 — 2열로 접지 않고 한 줄로 두어 옆으로 넘겨 봅니다
   (Figma 868:2112 · 카드 282px + 간격 16px, 다음 카드가 살짝 보이게)
   -------------------------------------------------------------------------- */
@media (max-width:980px){
  .card-grid, .card-grid--3, .natcert-grid, .step-grid{
    display:grid; grid-template-columns:none;
    grid-auto-flow:column; grid-auto-columns:min(282px, 76%);
    gap:var(--s-6);
    overflow-x:auto; scroll-snap-type:x proximity;
    /* 스냅 기준을 여백만큼 안으로 들여야 첫 카드가 화면 끝에 붙지 않습니다 */
    scroll-padding-left:20px; scroll-padding-right:20px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    /* 컨테이너 좌우 여백 밖까지 흘려 화면 끝에서 끝까지 넘길 수 있게 합니다 */
    margin-left:-20px; margin-right:-20px;
    padding-left:20px; padding-right:20px;
  }
  .card-grid::-webkit-scrollbar,
  .natcert-grid::-webkit-scrollbar,
  .step-grid::-webkit-scrollbar{ display:none }
  .card-grid > *, .natcert-grid > *, .step-grid > *{ scroll-snap-align:start }
}

/* 태블릿·모바일 — 목적·연령대 칩은 줄바꿈 대신 한 줄로 두고 옆으로 넘겨 봅니다
   (여러 줄로 늘어나면 카드가 화면 밖으로 밀려납니다) */
@media (max-width:980px){
  .pill-row{
    flex-wrap:nowrap; overflow-x:auto;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:-20px; margin-right:-20px;
    padding-left:20px; padding-right:20px;
  }
  .pill-row::-webkit-scrollbar{ display:none }
  .pill-row > *{ flex:0 0 auto }
  /* 라벨은 넘겨도 자리에 남아 무엇을 고르는 줄인지 계속 보이게.
     흰 배경 + 오른쪽 끝 그러데이션으로 칩이 라벨 밑으로 자연스럽게 지나갑니다.
     (섹션 좌우 여백 20px까지 덮도록 왼쪽으로 늘립니다) */
  /* 넘길 내용이 있을 때(.is-scrollable)만 고정 + 흰 배경을 씁니다.
     연령대처럼 한 화면에 다 들어오는 줄에서는 배경이 칩과 겹쳐 보이므로 그대로 둡니다. */
  .pill-row.is-scrollable .pill-row__label{
    /* left를 -20px로 둬야 좌우 여백(20px)까지 덮어 그 틈으로 칩이 보이지 않습니다 */
    position:sticky; left:-20px; z-index:2;
    display:flex; align-items:center; align-self:stretch;   /* 칩 높이만큼 덮어야 위아래로 새지 않습니다 */
    width:64px; padding-left:20px; margin-left:-20px;
    background:var(--surface);
  }
  /* 라벨 오른쪽 끝은 살짝 흐려지게 — 칩이 라벨 밑으로 자연스럽게 사라집니다 */
  .pill-row.is-scrollable .pill-row__label::after{
    content:''; position:absolute; left:100%; top:0; bottom:0; width:14px;
    background:linear-gradient(90deg, var(--surface), rgba(255,255,255,0));
  }
  [data-goal-group] .pill, [data-age-group] .pill{ min-height:32px }
}

/* 후기 카드 안쪽 여백 — 화면 크기별로 상하좌우 동일하게 */
@media (max-width:980px){ .review-row{ padding:20px } }
@media (max-width:560px){
  .review-row{ padding:16px }
}

/* --------------------------------------------------------------------------
   나의 합격후기 탭 (mylecture.html #tab-review) — 이 탭에서만 쓰는 구성
   ① rv-panel : 후기를 쓸 수 있는 과정 + 작성 진입
   ② rv-item  : 이미 작성한 후기
   -------------------------------------------------------------------------- */
/* 한 덩어리로 묶이는 블록 — 흰 배경 + 회색 테두리 */
.rv-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  padding:24px 26px;
}
.rv-panel__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-6) }
.rv-panel__head h2{ font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.rv-panel__head p{ margin-top:5px; font-size:var(--fs-sm); color:var(--muted) }
/* 남은 개수 — 숫자만 크게 두어 '할 일'이라는 신호를 줍니다 */
.rv-panel__count{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 10px; border-radius:var(--r-full);
  background:var(--blue-soft); color:var(--blue);
  font-size:var(--fs-lg); font-weight:700; font-variant-numeric:tabular-nums;
}

.rv-list{ margin-top:var(--s-8); border-top:1px solid var(--line) }
.rv-list li{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
  padding:16px 2px; border-bottom:1px solid var(--line);
}
.rv-list li:last-child{ border-bottom:0; padding-bottom:0 }
.rv-list__name{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-2) }
.rv-list__date{ flex-shrink:0; font-size:var(--fs-xs); color:var(--faint); font-variant-numeric:tabular-nums }

/* ② 작성한 후기 */
/* 블록 바깥 액션 — 블록과 살짝 띄우고 폭은 블록에 맞춥니다 */
.rv-cta{ margin-top:var(--s-6) }
.rv-cta .btn{ display:flex; width:100% }
/* 나의 강의실 안의 구역 제목은 .rv-panel__head h2·.card__title과 같은 크기로 */
.rv-title{ margin:var(--s-10) 0 var(--s-6); font-size:var(--fs-lg); font-weight:700; color:var(--ink) }
.rv-title span{ margin-left:5px; color:var(--blue); font-variant-numeric:tabular-nums }

.rv-item{
  display:grid; grid-template-columns:76px 1fr auto; gap:var(--s-6); align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px;
}
.rv-item + .rv-item{ margin-top:var(--s-5) }
#tab-review .guide-box{ margin-top:var(--s-10) }
.rv-item__body{ min-width:0 }
.rv-item__top{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap }
.rv-item__top h3{ font-size:var(--fs-md); font-weight:700; color:var(--ink) }
.rv-item__tags{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:8px }
.rv-item__tags span{
  background:var(--blue-soft); color:var(--ink-3); border-radius:var(--r-md);
  padding:7px 11px; font-size:var(--fs-xs); font-weight:600;
}
.rv-item__meta{ margin-top:8px; font-size:var(--fs-xs); color:var(--faint) }
.rv-item__meta b{ color:var(--ink-3); font-weight:700 }
.rv-item__actions{ display:grid; gap:var(--s-2); width:150px }

/* 썸네일은 고정 크기(76px) 대신 열 폭에 맞춥니다 — 좁은 화면에서 열을 넘어
   옆 텍스트와의 간격을 먹어버리기 때문입니다 */
.rv-item > .ph{ width:100%; height:auto; aspect-ratio:1 }

@media (max-width:640px){
  .rv-panel{ padding:20px }
  .rv-item{ grid-template-columns:64px 1fr; gap:var(--s-5) }
  .rv-item__actions{ grid-column:1 / -1; width:auto; grid-template-columns:1fr 1fr }
}