/* ===================================================================
   혜담논술교습소 — 에디토리얼 테마 "먹과 한지"  (v1)
   크레센 네이비/화이트 → 한지(paper) + 먹(ink) + 낙관(seal red) + 명조 세리프
   main.css 이후에 로드되어 변수/핵심 스타일을 덮어씀
   =================================================================== */

:root {
  /* 팔레트 재정의 — 변수 기반이라 사이트 전체가 응집력 있게 리컬러 */
  --c-navy:        #2c2722;   /* 먹(ink) — 기존 네이비 자리 */
  --c-navy-dark:   #1c1815;
  --c-navy-light:  #b8412e;   /* hover 등 → 낙관 red */
  --c-gold:        #bb8b3b;   /* 앤티크 골드 */
  --c-gold-soft:   #d9b15a;
  --c-cream:       #faf5ea;
  --c-bg:          #fbf7ef;   /* 한지 페이퍼 (기존 흰색 대체) */
  --c-bg-soft:     #f4eddd;
  --c-bg-warm:     #f7edd6;
  --c-text:        #2b2622;
  --c-text-soft:   #6a6056;
  --c-muted:       #9a8f80;
  --c-line:        #e8dfcd;
  --c-line-strong: #d8ccb2;
  --shadow-gold:   0 8px 24px rgba(184,65,46,.18);
  --c-seal:        #b8412e;   /* 낙관 인장 red */
  /* 제목·로고 폰트: 참고 사이트 히어로와 동일 (Pretendard ExtraBold 고딕) */
  --serif: "Poppins", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

/* 한지 질감 — 아주 옅은 종이 결 */
body {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(rgba(120,90,40,.035) 1px, transparent 1px),
    radial-gradient(rgba(120,90,40,.025) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

/* ===== 타이포 — 제목은 명조 세리프(문학적) ===== */
h1, h2, h3, h4,
.section-title, .hero-title, .director-headline, .logo-text,
.promise-v2-title-hero, .promise-v2 h3, .flow-card-v2 h3 {
  font-family: var(--serif);
  letter-spacing: -.02em;
}
/* 대표 제목/로고 — 참고 사이트처럼 굵게(ExtraBold) */
.logo-text, .hero-title, .section-title, .director-headline,
.promise-v2-title-hero { font-weight: 800; }
.hero-title em, .section-title em, h1 em, h2 em { font-weight: 800; font-family: var(--serif); }
h1 em, h2 em, .section-title em, .hero-title em {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--c-seal) !important;
  font-family: var(--serif);
  font-style: normal;
  position: relative;
  padding: 0 .06em;
}
/* 강조어 아래 붓터치 밑줄 */
h1 em::after, h2 em::after, .section-title em::after {
  content: '';
  position: absolute; left: 2%; right: 2%; bottom: .04em;
  height: .26em;
  background: linear-gradient(90deg, rgba(184,65,46,.22), rgba(187,139,59,.20));
  border-radius: 40% 60% 55% 45%/60%;
  z-index: -1;
}

/* ===== eyebrow → 낙관(도장) 라벨 ===== */
.eyebrow {
  font-family: var(--serif);
  color: var(--c-seal);
  text-transform: none;
  letter-spacing: .1em;
  font-weight: 700;
}
.eyebrow::before { background: var(--c-seal); }
.eyebrow-light { color: var(--c-gold-soft); }

/* ===== 헤더 — 한지 톤 에디토리얼 ===== */
.site-header {
  background: #ffffff !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--c-line);
  box-shadow: 0 1px 0 rgba(44,39,34,.04);
}
/* 로고·메뉴·국기 영역 전부 흰 배경 */
.header-inner, .primary-nav, .header-actions,
.lang-switcher-flags, .lang-trigger { background: #ffffff !important; }
/* 국기 아래 영문 코드(KR, EN 등) 12px */
.lang-flag-code, .lang-trigger-code { font-size: 12px !important; }

/* ===== 노트북·작은 PC(769~1500px): 국기 10개 → 컴팩트 언어 드롭다운 =====
   큰 모니터(>1500px)는 기존 10개 국기바 그대로. 줄바꿈 방지. */
@media (min-width: 769px) and (max-width: 1500px) {
  .header-actions { position: relative; }
  .lang-trigger {
    display: inline-flex !important;
    align-items: center; gap: 6px;
    padding: 7px 11px; border: 1px solid var(--c-line); border-radius: 999px;
    background: #fff !important; cursor: pointer; font-weight: 700; line-height: 1;
  }
  .lang-trigger img { width: 22px; height: 16px; }
  .lang-trigger .lang-trigger-code { font-size: 13px !important; }
  /* 인라인 10개 바 → 드롭다운 패널로 */
  .lang-switcher-flags {
    display: none !important;
    position: absolute; top: calc(100% + 10px); right: 0;
    flex-direction: column; gap: 2px;
    background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
    box-shadow: 0 16px 40px rgba(15,23,42,.18);
    padding: 8px; min-width: 200px; max-height: 72vh; overflow: auto; z-index: 300;
  }
  body.lang-open .lang-switcher-flags { display: flex !important; }
  .lang-switcher-flags .lang-flag-item {
    display: flex; flex-direction: row; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; white-space: nowrap; min-width: 0;
  }
  .lang-switcher-flags .lang-flag-item:hover { background: var(--c-bg-soft); }
  .lang-switcher-flags .lang-flag-item img { width: 26px !important; height: 19px !important; }
  .lang-switcher-flags .lang-flag-code { display: none !important; }
  .lang-switcher-flags .lang-flag-name { display: inline !important; font-size: 15px; font-weight: 600; color: var(--c-text); }
  .lang-switcher-flags .lang-flag-item.active { background: var(--c-navy); }
  .lang-switcher-flags .lang-flag-item.active .lang-flag-name { color: #fff; }
}
/* 좁은 노트북(≤1200px): 로고·메뉴 약간 축소로 여유 확보 */
@media (min-width: 769px) and (max-width: 1200px) {
  .site-header .logo-block img.logo-img { height: 60px !important; }
  .primary-nav .nav-link { font-size: 18px !important; }
  .header-inner { gap: 10px; }
}
/* 상단 낙관 포인트 라인 */
.site-header::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: #ffffff;
  z-index: 2;
}
.logo-text { color: var(--c-navy-dark); font-weight: 800; }
.logo-text small { color: var(--c-text-soft); font-family: "Pretendard", sans-serif; font-weight: 500; }

/* 내비 — 우아한 밑줄 인터랙션 */
.nav-link {
  position: relative;
  font-weight: 600;
  color: var(--c-navy-dark);
}
.nav-link::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 6px;
  height: 2px; background: var(--c-seal);
  transform: scaleX(0); transform-origin: left;
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.nav-link:hover { color: var(--c-seal); }

/* ===== 원장 자격 칩 (떠다니는 배지 대체) ===== */
.director-badge { display: none !important; } /* 사진 가리던 떠다니는 배지 제거 */
.director-creds {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px;
}
.dcred {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px;
  background: #f3f6fc; border: 1.5px solid #1e3a8a;
  color: #1e3a8a; font-weight: 700; font-size: 15px; line-height: 1;
}
.dcred-ic { font-size: 16px; }
@media (max-width: 768px) { .dcred { font-size: 13.5px; padding: 8px 13px; } }
/* 원장 소개 카드 본문 텍스트 20px */
.director-mini-card p { font-size: 20px !important; line-height: 1.7; }

/* ===== 블로그 버튼 (메뉴) — 세련된 펜 라인 필 ===== */
.nav-blog-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  margin-left: 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1e3a8a 0%, #16306e 100%);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(30,58,138,.28);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, filter .18s;
}
.nav-blog-btn:hover {
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(30,58,138,.4);
  filter: brightness(1.08);
}
.nav-blog-btn .nbb-ic { font-size: 15px; }
.nav-blog-btn .nbb-arrow { font-size: 13px; opacity: .85; transition: transform .18s; }
.nav-blog-btn:hover .nbb-arrow { transform: translate(2px,-2px); }
.nav-blog-btn::after { display: none !important; } /* nav-link 밑줄 효과 미적용 */
@media (max-width: 1024px) {
  .nav-blog-btn { margin: 8px 0; align-self: flex-start; }
}

/* ===== 버튼 — 먹/낙관 ===== */
.btn.btn-primary, a.btn-primary {
  background: var(--c-navy-dark) !important;
  color: var(--c-cream) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(44,39,34,.18);
}
.btn.btn-primary:hover, a.btn-primary:hover { background: var(--c-seal) !important; color: #fff !important; }
.btn.btn-outline-light { border-color: rgba(250,245,234,.7); color: #faf5ea !important; }
.btn.btn-outline-light:hover { background: rgba(250,245,234,.14); }

/* ===== 모바일 CTA 바 ===== */
.mobile-cta-bar { background: var(--c-navy-dark); }
.mcta-call { background: var(--c-seal); }
.mcta-sms  { background: var(--c-navy); }

/* ===== 히어로 — 큰 명조 + 한지 오버레이 ===== */
/* 히어로 높이 확대 + 입구 사진 배경 포커스 */
.hero { min-height: 90vh !important; display: flex; align-items: center; }
.hero-img { object-fit: cover; object-position: center 42%; }
@media (max-width: 768px) { .hero { min-height: 72vh !important; } }
.hero-title { font-weight: 800; line-height: 1.18; }
.hero-eyebrow {
  font-family: var(--serif);
  letter-spacing: .08em;
}
.hero-overlay {
  background: linear-gradient(90deg,
    rgba(18,15,12,.70) 0%,
    rgba(18,15,12,.62) 30%,
    rgba(18,15,12,.30) 48%,
    rgba(18,15,12,.10) 66%,
    rgba(18,15,12,.04) 100%) !important;
}
.hero-stat strong { font-family: var(--serif); color: var(--c-gold-soft); }

/* ===== 섹션 카드 — 한지 카드 + 따뜻한 라인 ===== */
.promise-v2, .flow-note-v2, .stat-card,
.gallery-item, .director-mini-card {
  border-color: var(--c-line) !important;
}
/* 큰 차별점 카드(01) — 먹 다크 카드로 유지(밝은 글자 가독성) */
.promise-v2-hero { background: linear-gradient(150deg, #2c2722 0%, #3a322a 100%) !important; }
.promise-v2-num { color: var(--c-gold-soft); }

/* 갤러리 캡션 */
.gallery-caption { font-family: var(--serif); }

/* ===== 푸터 ===== */
.footer-cta {
  background:
    linear-gradient(rgba(18,15,12,.74), rgba(18,15,12,.80)),
    url('/data/uploads/yonsei/footer_bg.jpg') center/cover no-repeat !important;
}
.footer-logo-text { font-family: var(--serif); font-size: 25px !important; color: #ffffff !important; }

/* ===== 맨 위로(TOP) 버튼 ===== */
#toTop {
  position: fixed; right: 26px; bottom: 28px; z-index: 400;
  width: 52px; height: 52px; border-radius: 50%;
  background: #1e3a8a; color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(15,23,42,.30);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .25s, transform .25s, background .2s;
}
#toTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#toTop:hover { background: var(--c-seal); transform: translateY(-2px); }
@media (max-width: 768px) {
  #toTop { right: 16px; bottom: 86px; width: 46px; height: 46px; } /* 모바일 하단 CTA바 위로 */
}
/* 게시판: SVG 히어로가 제목·설명을 보여주므로 스킨 내부 중복 숨김 */
.board-page .board-title, .board-page .board-desc { display: none; }
.board-page.board-narrow, .board-page { padding-top: 44px; padding-bottom: 64px; }
/* 포토/갤러리 게시판 — 썸네일 그리드 */
.photo-grid{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:44px 24px}
.photo-card{position:relative;background:#fff;border:1px solid #eceff6;border-radius:16px;overflow:hidden;box-shadow:0 8px 22px rgba(15,23,42,.07);transition:transform .22s,box-shadow .22s}
.photo-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(15,23,42,.14)}
.photo-card > a{color:inherit;text-decoration:none;display:block}
.photo-thumb{width:100%;aspect-ratio:4/3;background-size:cover;background-position:center;background-color:#eef1f6;display:block}
.photo-meta{padding:16px 18px}
.photo-title{font-size:18px;font-weight:800;color:#0f172a;line-height:1.35}
.photo-sub{margin-top:6px;font-size:14px;color:#8a93a6}
.photo-check{position:absolute;top:10px;left:10px;z-index:2}
/* 게시글 보기: 첨부 이미지 갤러리 */
.post-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0 0 24px}
.post-images img{width:100%;border-radius:12px;display:block}

/* 게시판 글쓰기 버튼 — 글자가 안 보이던 문제 수정(네이비+흰글자) */
.board-page .btn-primary, .board-tools .btn-primary, .board-tools a.btn-primary {
  background: #1e3a8a !important; color: #ffffff !important; border: none !important;
  padding: 10px 20px; border-radius: 999px; font-weight: 700;
}
.board-page .btn-primary:hover, .board-tools .btn-primary:hover { background: #b8412e !important; color: #fff !important; }

/* 관리자 링크 → 아이콘(톱니바퀴): 현재 색 유지, 호버 시 노란색 */
.admin-link { font-size: 16px; opacity: .5; margin-left: 6px; transition: opacity .2s, color .2s; }
.admin-link:hover { opacity: 1; color: #fbbf24 !important; }

/* ===== 셀렉션 ===== */
::selection { background: var(--c-seal); color: #faf5ea; }

/* 섹션 상단 작은 낙관 마크는 과하지 않게 — eyebrow로 충분 */
/* 상단 로고(가로형 575:78 비율 유지) — 50px */
.site-header .logo-block img.logo-img {
  height: 68px !important;
  width: auto !important;
  max-width: 76vw !important;
  border-radius: 0 !important;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
/* 로고 수용 — 헤더/내부 높이 여유 */
.site-header .header-inner { min-height: 84px; }
/* 대메뉴 글자 크기 20px */
.primary-nav .nav-link { font-size: 20px !important; }
.nav-blog-btn { font-size: 18px; }
@media (max-width: 768px) {
  h1 em::after, h2 em::after, .section-title em::after { bottom: .02em; height: .22em; }
  .site-header .logo-block img.logo-img { height: 54px !important; max-width: 64vw !important; }
}
@media (max-width: 420px) {
  .site-header .logo-block img.logo-img { height: 44px !important; max-width: 60vw !important; }
}