/* ===== Base (optimized) ===== */

/* Google font (UI fallback) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');

/* Local display fonts */
@font-face {
  font-family: 'Paperlogy-8ExtraBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'SEBANG_Gothic_Bold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

/* Pretendard family (keep explicit weights to avoid CDN variance issues) */
@font-face {
  font-family: "Pretendard";
  font-weight: 900;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 800;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 700;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 600;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 500;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 400;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 300;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 200;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
  font-family: "Pretendard";
  font-weight: 100;
  src: url(https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff) format('woff');
}

/* ===== Design tokens ===== */
:root {
  /* Global breakpoint for desktop (JS sync: window.AppBP.desktopMin) */
  --bp-desktop-min: 769px;
  --primary-color: #0D0D0D;
  --secondary-color-light: #e5d28e;
  --secondary-color-dark: #554a1e;
  --background-light: #f5f5f5;
  --text-dark: #0D0D0D;
  --highlight-color: #262626;
  --white-color: #EEE;

  --page-max-width: 1300px;
  --navbar-height: 72px;
  /* unified */
  --nav-toggler-size: 28px;
  --nav-offset: 72px;
  /* unified padding-top for fixed header */

  /* PC */
  --brand-max-pc: 120px;
  /* index 초기(최대) */
  --brand-min-pc: 54px;
  /* index 스크롤 후(최소) */
  --brand-other-pc: 60px;
  /* 다른 페이지 기본 */

  /* Mobile */
  --brand-max-m: 56px;
  /* index 초기(최대) */
  --brand-min-m: 40px;
  /* index 스크롤 후(최소) */
  --brand-other-m: 48px;
  /* 다른 페이지 기본 */

  --feature-img-pc-w: 520px;
  /* PC 가로 */
  --feature-img-pc-h: 240px;
  /* PC 세로 */
  --feature-img-m-w: 100%;
  /* 모바일 가로(컬럼 폭을 채움) */
  --feature-img-m-h: 220px;
  /* 모바일 세로(크롭) */

  --trainer-size-pc: 120px;
  /* 데스크탑 사진 지름 */
  --trainer-size-m: 80px;
  /* 모바일   사진 지름 */

  --mega-radius: 0px;
  /* 예: 모서리 */
  --mega-surface: .92;
  /* 예: 배경 불투명도 */

  /* 패널-텍스트 바닥 간격(네 면) */
  --mega-pad-top: 6px;
  --mega-pad-right: 12px;
  --mega-pad-bottom: 6px;
  --mega-pad-left: 10px;

  /* 아이템(행) 자체의 세로 간격 */
  --mega-item-y: 5px;
}

/* ===== Resets ===== */
html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Pretendard', 'Noto Sans KR', Arial, sans-serif;
  color: var(--text-dark);
  background: var(--background-light);
}

/* Overscroll color = html background; keep body light */
html {
  background-color: var(--primary-color) !important;
}

/* Navbar brand image (single source of truth)
   - Original logo is black → invert to white on dark navbar backgrounds
   - Keep only height animating for smooth shrink-on-scroll on index
*/
.navbar-brand img {
  filter: invert(100%);
  width: auto;
  display: block;
  transition: height .35s ease;
  margin: 0;
  /* avoid masking height animation amplitude */
}

/* ===== Cards & Buttons ===== */
.card {
  /* 기본값(페이지에서 필요 시 덮어쓰기) */
  --card-bg: var(--white-color);
  --card-radius: 12px;
  --card-padding: 18px;
  --card-shadow: 0 4px 8px rgba(0, 0, 0, .06);
  --card-shadow-hover: 0 6px 12px rgba(0, 0, 0, .12);
  --card-lift: -5px;
  /* 0으로 두면 호버 상승이 꺼짐 */

  background: #FFF;
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  border: none;
  box-shadow: var(--card-shadow);
}

/* 색상은 공통 유지 */
.card-title {
  color: var(--primary-color);
}

.card-text {
  color: var(--text-dark);
}


.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

/* ===== Footer ===== */
footer {
  background: var(--primary-color);
  color: var(--white-color);
  text-align: center;
  padding: 2rem;
}

footer a {
  color: var(--highlight-color);
}

footer a:hover {
  color: var(--primary-color);
}

footer,
footer a {
  font-size: 16px;
  line-height: 1.6;
}

footer.mt-4 {
  padding: 1rem;
  margin: 0;
}

/* ===== Containers ===== */
section.mb-5>.container {
  padding: 1rem;
  margin: 0;
  font-size: 1rem;
}

/* ===== SweetAlert2 ===== */
.swal2-popup {
  font-family: 'Noto Sans KR', sans-serif;
}

.swal2-confirm {
  background-color: var(--primary-color) !important;
}

.swal2-cancel {
  background-color: #E74C3C !important;
}

/* ===== Responsive toggles ===== */
/* Note: var() isn’t supported inside media query conditions across browsers. Use the numeric fallback. */
@media (max-width: 768.98px) {
  :root {
    --navbar-height: 56px;
    --nav-toggler-size: 24px;
  }

  .navbar {
    display: none !important;
  }

  .mobile-fab {
    display: inline-flex;
  }

  footer,
  footer a {
    font-size: 10px;
  }

  footer.mt-4 {
    padding: 1rem;
    margin: 0;
  }

  section.mb-5>.container {
    padding: 0 1rem;
    font-size: .8rem;
  }

  section.mb-5 p {
    margin: .5rem 0;
  }
}

/* ===== Auth misc ===== */
.auth-aux a {
  color: var(--text-dark);
  text-decoration: underline;
}

.auth-aux a:hover {
  color: var(--primary-color);
}

/* ===== Header layout & states (home=fixed overlay, others=sticky) ===== */

/* 기본값: 오버레이 가정 제거 */
body {
  padding-top: 0;
}

/* 전역 패딩 제거 — sticky는 흐름에서 공간을 차지함 */

/* 공통 헤더 컨테이너 */
.top-nav {
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(0, 0, 0, .97);
  transition: background-color .35s, box-shadow .35s, backdrop-filter .35s;
  backdrop-filter: saturate(140%) blur(6px);
}

/* 홈(index): 투명 시작 + 스크롤 후 실색, 오버레이(fixed) */
.home .top-nav {
  position: fixed;
  top: 0;
  background: transparent !important;
  backdrop-filter: none;
}

.home .top-nav.scrolled {
  background: rgba(0, 0, 0, .97) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  backdrop-filter: saturate(140%) blur(6px);
}

/* 그 외 페이지: 항상 반투명 + 흐름 차지(sticky) */
body:not(.home) .top-nav {
  position: sticky;
  top: 0;
  background: rgba(0, 0, 0, .97) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
}

/* PC (>= 769px) */
@media (min-width: 769px) {
  .home .top-nav:not(.scrolled) .navbar-brand img {
    height: var(--brand-max-pc) !important;
  }

  .home .top-nav.scrolled .navbar-brand img {
    height: var(--brand-min-pc) !important;
  }

  body:not(.home) .top-nav .navbar-brand img {
    height: var(--brand-other-pc) !important;
  }
}

/* Mobile (< 769px) */
@media (max-width: 768.98px) {
  .home .top-nav:not(.scrolled) .navbar-brand img {
    height: var(--brand-max-m) !important;
  }

  .home .top-nav.scrolled .navbar-brand img {
    height: var(--brand-min-m) !important;
  }

  body:not(.home) .top-nav .navbar-brand img {
    height: var(--brand-other-m) !important;
  }
}

/* 모달 레이어 및 기본 표시 상태 보정 (Bootstrap 의존 안전장치) */
.modal {
  z-index: 1090 !important;
}

.modal-backdrop {
  z-index: 1080 !important;
}

/* Bootstrap CSS가 늦게 로드되거나 누락되었을 때 세로 레이아웃 깨짐 방지 */
.modal {
  display: none;
}

.modal.show {
  display: block;
}

/* 모달이 열린 동안 헤더의 효과(blur/transform 등)로 스택 생성되는 문제 예방 */
.modal-open .top-nav {
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
}

/* tx-* editor component styles moved to assets/css/components/text-editor.css */