/* =========================================================================
   base.css — 리셋 · 기본 타이포 · 이미지 자리표시 · 레이아웃 컨테이너
   프로토타입 assets/css/style.css의 섹션 2, 3, 4를 그대로 옮긴 파일입니다.
   ※ 파일 순서(globals.css의 import 순서)가 곧 캐스케이드 순서입니다. 바꾸지 마세요.
   ========================================================================= */

/* --------------------------------------------------------------------------
   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 }