/* ===================================================================
   미술상자미술교습소 — 에디토리얼 테마 "먹과 한지"  (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:16px !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:16px !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:16px; 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:16px; line-height: 1;
}
.dcred-ic { font-size: 16px; }
@media (max-width: 768px) { .dcred { font-size:16px; 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:16px; }
.nav-blog-btn .nbb-arrow { font-size:16px; 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(135deg, #0f7d97 0%, #13b3c9 55%, #0f6f87 100%) !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: linear-gradient(135deg,#2db4e0,#7fc241); 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 { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,23,42,.35); }
@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:16px;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; }
}


/* ========== 홈 히어로 위 헤더 오버레이 (v33) — 배경사진이 로고·메뉴 영역까지 덮음 ========== */
body.home-hero .site-header{
  position:fixed !important; top:0; left:0; right:0; z-index:60;
  background:rgba(0,0,0,.5) !important;            /* 상단영역 검정 50% */
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  border-bottom:none !important; box-shadow:none !important;
}
body.home-hero .hero{ margin-top:0 !important; }
body.home-hero .hero .hero-content{ padding-top:150px !important; }
body.home-hero .hero .hero-img{ filter:brightness(.97) !important; }
body.home-hero .hero .hero-overlay{
  /* 왼쪽(텍스트)만 어둡게, 오른쪽(간판)은 밝게 — 가로 그라데이션 */
  background:linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.58) 36%, rgba(0,0,0,.22) 55%, rgba(0,0,0,0) 72%) !important;
}
body.home-hero .site-header .nav-toggle span{ background:#fff !important; }
body.home-hero .site-header .lang-trigger,
body.home-hero .site-header .lang-trigger-code,
body.home-hero .site-header .lang-trigger-caret{ color:#fff !important; }
@media (min-width:769px){
  body.home-hero .site-header .nav-link,
  body.home-hero .site-header .nav-link-has-sub,
  body.home-hero .site-header .nav-caret{ color:#fff !important; }
  /* v35: 언어 코드 — 흰 카드 위 검정 + 12px 통일 (KR 포함) */
  body.home-hero .site-header .lang-switcher-flags .lang-flag-item span{ color:#111 !important; font-size:16px !important; }
  body.home-hero .site-header .lang-switcher-flags .lang-flag-item.active{ background:#fff !important; border-color:#d4d8e2 !important; }
  body.home-hero .site-header .lang-switcher-flags .lang-flag-item.active span{ color:#111 !important; font-weight:800 !important; }
  body.home-hero .site-header .nav-sub a{ color:var(--c-text) !important; }
}

/* v34: 홈 헤더 안쪽 흰배경(.header-inner/.primary-nav 등) 제거 — 상단 바를 완전 투명 + 검정50%만 보이게 */
body.home-hero .site-header::before{ display:none !important; }
body.home-hero .site-header .header-inner,
body.home-hero .site-header .header-actions{ background:transparent !important; }
@media (min-width:769px){
  body.home-hero .site-header .primary-nav,
  body.home-hero .site-header .lang-switcher-flags,
  body.home-hero .site-header .lang-trigger{ background:transparent !important; }
}

/* v36: PC에서 히어로를 한 화면(100vh) 꽉 채움 */
@media (min-width:769px){
  body.home-hero .hero{ min-height:100vh !important; }
  body.home-hero .hero .hero-content{ padding-top:96px !important; padding-bottom:48px !important; }
}

/* v38: 히어로 강조 문구 색상 노랑 (#ffff00) */
body.home-hero .hero .hero-line-2 em{ color:#ffff00 !important; }

/* v39: 히어로 통계 숫자 색상 초록 (#00ff00) */
body.home-hero .hero .hero-stat strong{ color:#00ff00 !important; }

/* v40: 스크롤 시 홈 헤더 흰색으로 고정 전환 */
body.home-hero .site-header.scrolled{
  background:rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter:saturate(180%) blur(14px) !important; backdrop-filter:saturate(180%) blur(14px) !important;
  border-bottom:1px solid var(--c-line) !important; box-shadow:0 4px 20px rgba(15,23,42,.08) !important;
}
body.home-hero .site-header.scrolled .nav-toggle span{ background:var(--c-navy-dark) !important; }
body.home-hero .site-header.scrolled .lang-trigger,
body.home-hero .site-header.scrolled .lang-trigger-code,
body.home-hero .site-header.scrolled .lang-trigger-caret{ color:var(--c-text) !important; }
@media(min-width:769px){
  body.home-hero .site-header.scrolled .nav-link,
  body.home-hero .site-header.scrolled .nav-link-has-sub,
  body.home-hero .site-header.scrolled .nav-caret{ color:var(--c-text) !important; }
  body.home-hero .site-header.scrolled .lang-flag-item span{ color:#111 !important; }
}

/* ===== 푸터 재디자인 + ⚙ 항상 보이게 (v41) ===== */
.site-footer{ background:#0a1530; color:rgba(255,255,255,.72); padding:64px 0 28px; }
.site-footer .footer-grid{ grid-template-columns:1.6fr 1.5fr 1.7fr 1fr !important; gap:40px; align-items:start; }
@media(max-width:900px){ .site-footer .footer-grid{ grid-template-columns:1fr 1fr !important; gap:34px 28px; } }
@media(max-width:560px){ .site-footer .footer-grid{ grid-template-columns:1fr !important; } }
.footer-logo-text{ font-size:24px !important; font-weight:900; letter-spacing:-.3px; color:#fff; margin-bottom:10px; }
.footer-tag{ color:rgba(255,255,255,.62); line-height:1.6; margin:0 0 14px; }
.footer-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.footer-badges span{ font-size:16px; font-weight:700; color:#cfe9ff; background:rgba(45,180,224,.14);
   border:1px solid rgba(45,180,224,.3); padding:5px 12px; border-radius:999px; }
.footer-col h4{ color:#fff !important; font-size:17px !important; font-weight:800; margin-bottom:16px;
   position:relative; padding-bottom:10px; }
.footer-col h4::after{ content:""; position:absolute; left:0; bottom:0; width:30px; height:3px; border-radius:3px;
   background:linear-gradient(90deg,#2db4e0,#7fc241); }
.footer-phone{ display:inline-block; font-size:24px !important; font-weight:900; color:#ffd24d !important;
   letter-spacing:.5px; margin-bottom:10px; }
.footer-phone:hover{ color:#ffdf80 !important; }
.footer-sms{ display:inline-block; font-weight:700; color:rgba(255,255,255,.9) !important; margin-bottom:16px;
   border-bottom:1px solid rgba(255,255,255,.28); padding-bottom:2px; }
.footer-sms:hover{ color:#fff !important; }
.footer-hours{ color:rgba(255,255,255,.6); line-height:1.6; margin:0; }
.footer-addr, .footer-meta{ display:flex; gap:9px; align-items:flex-start; line-height:1.65; margin:0 0 12px; }
.footer-addr .fi-ic, .footer-meta .fi-ic{ flex:0 0 auto; }
.footer-addr strong{ color:#fff; }
.footer-links{ list-style:none; margin:0; padding:0; }
.footer-links li{ margin-bottom:9px; }
.footer-links a{ color:rgba(255,255,255,.78) !important; transition:padding .15s,color .15s; }
.footer-links a:hover{ color:#7fdcf0 !important; padding-left:4px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:38px; padding-top:22px;
   display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.footer-bottom p{ margin:0; color:rgba(255,255,255,.55); }
.footer-bottom .admin-link{ display:inline-flex !important; align-items:center; gap:6px; font-size:16px !important;
   font-weight:700; color:rgba(255,255,255,.78) !important; opacity:1 !important; background:rgba(255,255,255,.09);
   border:1px solid rgba(255,255,255,.2); padding:7px 15px; border-radius:999px; margin:0 !important; }
.footer-bottom .admin-link:hover{ color:#0a1530 !important; background:#ffd24d !important; border-color:#ffd24d !important; }
@media(max-width:560px){ .footer-bottom{ justify-content:center; text-align:center; } }

/* ===== 홈 갤러리: 견본 9장 3열 + 부별 버튼 (v42) ===== */
.section-gallery .gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr) !important;
   grid-template-rows:none !important; grid-auto-rows:clamp(220px,25vw,300px); gap:14px; }
.section-gallery .gallery-feature{ grid-column:auto !important; grid-row:auto !important; }
@media(max-width:768px){ .section-gallery .gallery-grid{ grid-template-columns:repeat(2,1fr) !important;
   grid-auto-rows:clamp(150px,40vw,210px); } }
.gallery-cta{ text-align:center; margin-top:36px; }
.gallery-cta-label{ display:block; font-weight:700; color:var(--c-text-soft); margin-bottom:16px; }
.gallery-cta-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.gallery-cta-btns .gbtn{ display:inline-flex; align-items:center; font-weight:800; font-size:17px; color:#1f2430;
   background:#fff; border:2px solid #e4e8ef; padding:12px 26px; border-radius:999px; text-decoration:none;
   transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; }
.gallery-cta-btns .gbtn:hover{ color:#fff; transform:translateY(-3px); }
.gallery-cta-btns .gbtn:nth-child(1):hover{ background:#2db4e0; border-color:#2db4e0; box-shadow:0 12px 26px rgba(45,180,224,.32); }
.gallery-cta-btns .gbtn:nth-child(2):hover{ background:#cf6fc2; border-color:#cf6fc2; box-shadow:0 12px 26px rgba(207,111,194,.32); }
.gallery-cta-btns .gbtn:nth-child(3):hover{ background:#7fc241; border-color:#7fc241; box-shadow:0 12px 26px rgba(127,194,65,.32); }
.gallery-cta-btns .gbtn:nth-child(4):hover{ background:#f5933a; border-color:#f5933a; box-shadow:0 12px 26px rgba(245,147,58,.32); }

/* v43: 푸터 브랜드 영역 왼쪽 정렬 (앞줄 맞춤) */
.site-footer .footer-brand{ text-align:left !important; }
.site-footer .footer-brand .footer-logo-text{ text-align:left !important; }
.site-footer .footer-brand .footer-tag{ text-align:left !important; margin-top:0 !important; }
.site-footer .footer-badges{ justify-content:flex-start !important; }

/* v44: 언어 코드(KR/EN/JA 등) 글자 10px (사용자 지정 예외) */
.lang-switcher-flags .lang-flag-item .lang-flag-code{ font-size:10px !important; }
body.home-hero .site-header .lang-switcher-flags .lang-flag-item .lang-flag-code{ font-size:10px !important; }
.lang-trigger .lang-trigger-code{ font-size:10px !important; }

/* ===== 공용 서브 히어로 (미술도구 애니메이션 SVG) v45 ===== */
.sub-hero{ position:relative; overflow:hidden; padding:104px 0 88px; text-align:center;
   background:linear-gradient(135deg,#eef8ff 0%,#fef6ee 52%,#f3fbef 100%); }
.sub-hero-bg{ position:absolute; inset:0; z-index:0; }
.sub-hero-bg svg{ width:100%; height:100%; display:block; }
.sub-hero-inner{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 24px; }
.sub-hero-eyb{ display:inline-block; font-weight:800; letter-spacing:.2em; font-size:16px; color:#0f7fb8;
   background:rgba(255,255,255,.82); border:1px solid #bfe8f6; padding:8px 18px; border-radius:999px; margin-bottom:18px; }
.sub-hero-title{ font-size:clamp(30px,5vw,50px); font-weight:900; letter-spacing:-.02em; line-height:1.16; color:#1f2430; margin:0; }
.sub-hero-title em{ font-style:normal; background:linear-gradient(90deg,#2db4e0,#cf6fc2 42%,#7fc241 70%,#f5933a);
   -webkit-background-clip:text; background-clip:text; color:transparent; }
.sub-hero-sub{ font-size:19px; color:#4a525f; line-height:1.7; margin:16px auto 0; max-width:720px; }
.sub-hero-extra{ margin-top:22px; }

/* v46: 홈 헤더 언어 드롭다운 패널 — 투명 오버레이 예외(흰 배경 복원) */
body.home-hero.lang-open .site-header .lang-switcher-flags{ background:#fff !important; }
body.home-hero.lang-open .site-header .lang-switcher-flags .lang-flag-item{ background:#fff !important; }
body.home-hero.lang-open .site-header .lang-switcher-flags .lang-flag-name{ color:var(--c-text) !important; font-size:16px !important; }
body.home-hero.lang-open .site-header .lang-switcher-flags .lang-flag-item.active .lang-flag-name{ color:#fff !important; }

/* v47: 모바일 홈 헤더 — 흰 박스 안의 햄버거 삼색선/언어 캐럿을 진한색으로 (가시성) */
@media(max-width:768px){
  body.home-hero:not(.nav-open) .site-header .nav-toggle span{ background:#1e3a8a !important; }
  body.home-hero .site-header .lang-trigger,
  body.home-hero .site-header .lang-trigger .lang-trigger-code,
  body.home-hero .site-header .lang-trigger .lang-trigger-caret{ color:#1e3a8a !important; }
}

/* v48: 모바일 — 햄버거 하단 여백 / CTA바 1개·한줄·번호강조 / 카드 아이콘+타이틀 한줄 */
@media(max-width:768px){
  /* 햄버거 메뉴: 하단 블로그 버튼이 CTA바에 안 가리게 */
  body.nav-open .primary-nav{ overflow-y:auto !important; padding-bottom:100px !important; }
  /* 모바일 하단 CTA바 — 전화 1개 풀폭, 아이콘+문구 한 줄, 번호 강조 */
  .mobile-cta-bar{ grid-template-columns:1fr !important; }
  .mobile-cta-bar .mcta-call{ background:#d84e3a !important; }
  .mobile-cta-bar .mcta-btn{ gap:12px !important; }
  .mobile-cta-bar .mcta-text{ white-space:nowrap !important; color:#fff !important; font-size:16px !important; line-height:1 !important; }
  .mobile-cta-bar .mcta-text strong{ display:inline !important; color:#fff !important; font-size:20px !important; font-weight:800 !important; margin:0 0 0 8px !important; letter-spacing:.4px; }
  .mobile-cta-bar .mcta-icon{ font-size:24px !important; }
}
@media(max-width:600px){
  /* 홈 4단계(msb) 아이콘+타이틀 한 줄 */
  .msb-card{ display:flex !important; flex-wrap:wrap; align-items:center; }
  .msb-card .msb-badge{ margin-bottom:0 !important; margin-right:14px; }
  .msb-card h3{ margin:0 !important; }
  .msb-card .msb-age{ flex-basis:100%; margin-top:10px; }
  .msb-card .msb-list{ flex-basis:100%; margin-top:14px; }
  /* 왜 미술상자(wmb) 아이콘+타이틀 한 줄 */
  .wmb-card{ display:flex !important; flex-wrap:wrap; align-items:center; }
  .wmb-card .wmb-ic{ margin-bottom:0 !important; margin-right:14px; }
  .wmb-card h3{ margin:0 !important; }
  .wmb-card p{ flex-basis:100%; margin-top:12px; }
  /* 이벤트(emb) 아이콘+타이틀 한 줄 */
  .emb-ev .emb-ev-ic{ display:inline-block !important; margin:0 10px 0 0 !important; vertical-align:middle; }
  .emb-ev h3{ display:inline !important; vertical-align:middle; }
  /* 수업안내 4단계(msp-lv) 번호+이름 한 줄 */
  .msp-lv .lvhead{ display:flex !important; align-items:center; gap:12px; text-align:left; }
  .msp-lv .lvnum{ margin:0 !important; }
}

/* v49: 햄버거 삼색선 간격 정상화 (main.css의 span margin 제거 + 적절한 간격) */
@media(max-width:768px){
  .site-header .nav-toggle{ gap:5px !important; }
  .site-header .nav-toggle span{ margin:0 !important; width:24px !important; height:2.5px !important; }
}

/* v50: PC 히어로 통계 한 줄(가로 3개) 강제 */
@media(min-width:769px){
  body.home-hero .hero .hero-stats{ flex-wrap:nowrap !important; gap:30px !important; align-items:flex-start; }
}

/* v52: PC 히어로 콘텐츠 영역 확대(타이틀 한 줄) + 어두운 그라데이션 확장 */
@media(min-width:769px){
  body.home-hero .hero .hero-content{ width:90% !important; max-width:1520px !important; }
  body.home-hero .hero .hero-title{ white-space:nowrap; }
  body.home-hero .hero .hero-overlay{
    background:linear-gradient(to right, rgba(0,0,0,.66) 0%, rgba(0,0,0,.58) 48%, rgba(0,0,0,.30) 70%, rgba(0,0,0,0) 88%) !important;
  }
}

/* v53: 히어로 통계 한 줄 — max-width:700px 제한 해제 + 값 nowrap + 크기 조정 */
@media(min-width:769px){
  body.home-hero .hero .hero-stats{ max-width:none !important; flex-wrap:nowrap !important; gap:34px !important; }
  body.home-hero .hero .hero-stat{ flex:0 0 auto; }
  body.home-hero .hero .hero-stat strong{ white-space:nowrap !important; font-size:clamp(22px,2.3vw,30px) !important; }
}

/* v54: 푸터 연락처 전화번호 항상 한 줄 (작은 화면 줄바꿈 방지) */
.site-footer .footer-phone{ white-space:nowrap !important; }
@media(max-width:900px){ .site-footer .footer-phone{ font-size:20px !important; } }

.gallery-cta-btns .gbtn:nth-child(5):hover{ background:#12b3c9; border-color:#12b3c9; box-shadow:0 12px 26px rgba(18,179,201,.32); }