@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");

@font-face {
  font-family: 'KbizHanmaumGothic';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/KBIZHanmaumGothic.woff') format('woff');
  font-weight: 400;         /* normal = 400 */
  font-style: normal;
  font-display: swap;
}
html, body{
  font-family: 'Pretendard', 'KbizHanmaumGothic',
               system-ui, -apple-system, 'Segoe UI',
               Roboto, 'Noto Sans KR', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color:#111;
    min-height:100%;

}
/* both-edges → stable 로 변경 */
html { scrollbar-gutter: stable; }
/* 구형 브라우저 보완용(옵션) */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}



/* ========== Core Reset & Tokens ========== */
:root{
  /* 색상 토큰 */
  --bg:#f8f8fb; --panel:#ffffff; --ink:#1b1f23; --muted:#6b7380;
  --brand:#533388; --brand-ink:#241136; --line:#e9e9ef;
  /* 라운드 & 간격 */
  --radius:14px; --radius-sm:10px; --radius-xs:8px;
  --space-1:6px; --space-2:10px; --space-3:14px; --space-4:18px;
  --space-5:22px; --space-6:28px; --space-7:36px;
  /* 섀도우 */
  --shadow-1:0 2px 8px rgba(0,0,0,.06);
  --shadow-2:0 8px 24px rgba(0,0,0,.12);
    --gnb2-max: 1200px;
  --gnb2-pad: 20px;
  --gnb2-left: 320px;   /* 로고/왼쪽영역 폭(메가 hero와 기준 맞춤) */
  --gnb2-right: 180px;  /* 우측 util 폭(대충 고정, 필요시 조절) */
  --gnb2-gap: 56px;     /* 상단 메뉴 간격 = 메가 컬럼 간격 */
}
*{box-sizing:border-box}

img{max-width:100%; display:block}
a{color:inherit}

/* ========== About / Greeting Page ========== */
.page-hero{
  --hero-pt: 56px; --hero-pb: 56px; --hero-min-h: auto; --overlay: rgba(255,255,255,.65);
  position: relative;
  padding: var(--hero-pt) 0 var(--hero-pb);
  min-height: var(--hero-min-h);
}
/* Soft hero */
.page-hero--soft{
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 54px 0 36px;
}
.page-hero--soft .desc{ color: var(--muted); margin-top: 6px; }

/* 공용: 사진이 들어가는 히어로 */
.page-hero--photo{
    background:
    linear-gradient(180deg, var(--overlay), var(--overlay)),
    var(--hero-img) center/cover no-repeat;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #1b3974; /* 기존 포인트 라인 유지 */
}
.page-hero--photo .wrap{ position: relative; z-index: 2; }

/* 실제 이미지 레이어 */
.page-hero--photo::before{
  content:"";
  position:absolute; inset:0;
  background: center/cover no-repeat var(--hero-img);
  /* 채도 낮추고 살짝 부드럽게 */
  filter: saturate(60%) contrast(0.95) brightness(0.98) blur(0.8px);
  opacity: .75;           /* 사진 존재감 조절 */
  z-index: 0;
}


/* introduce(기관 소개) 페이지는 오버레이 제거 */
.page-hero--photo.page-hero--introduce::after{
  background: none;
}

.page-hero--photo .wrap{ position:relative; z-index:2; }


.page-hero--tall { --hero-pt: 72px; --hero-pb: 64px; --hero-min-h: 240px; }


/* “원장 인사말” 전용 클래스 */
.page-hero--greeting{
  --hero-img: url("/images/building_kabdhe_greeting_.png");
}
.page-hero--introduce{
  --hero-img: url("/images/bg_introduce_.png");
}
/* ==== Introduce: Hero 이미지 (필요시 이미지 경로만 교체) ==== */
.page-hero--gallery{
  --hero-img: url("/images/building_contrast_.png");
}

/* 타이포 스케일 */
h1{font-size:clamp(28px,3.2vw,40px); margin:.2em 0}
h2{font-size:clamp(22px,2.4vw,28px); margin:.7em 0 .4em}
p{line-height:1.65; margin:.6em 0}
small{font-size:12px; color:var(--muted)}

/* 반응형 브레이크포인트 */
@media (max-width:1100px){:root{--space-7:28px}}
@media (max-width:768px){:root{--space-6:22px}}
@media (max-width:520px){:root{--space-5:18px}}

/* 유틸리티 */
.hidden{display:none!important}
.mt-0{margin-top:0!important}
.mb-0{margin-bottom:0!important}
.text-muted{color:var(--muted)!important}
.round{border-radius:var(--radius)}
.shadow-1{box-shadow:var(--shadow-1)}
.shadow-2{box-shadow:var(--shadow-2)}

/* ========== Global Layout ========== */
/* 공통 레이아웃 */
.wrap{max-width:1200px; margin:0 auto; padding:0 20px;}

/* 헤더 3열: brand | nav | util */
/* === 공통 헤더 레이아웃 강제 통일 === */
.site-header{ --hbar-h: 88px; --gnb-py: 16px; }

.site-header > .wrap.header-bar{
  display:grid;
  grid-template-columns: minmax(300px,auto) 1fr auto; /* 로고 | 빈공간 | 유틸 */
  align-items:center;
  gap:16px;
  min-height: var(--hbar-h);
}

/* GNB 행: 항상 중앙 정렬 + 동일 패딩 */
.site-header > nav.wrap.gnb{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: var(--gnb-py) 0;
}

/* 1뎁스 메뉴 가로 배치/간격 */
.site-header > nav.wrap.gnb .menu{
  display:flex; gap:56px; list-style:none; margin:0; padding:0;
}

/* (이미 적용했듯) 로고는 가로 300 고정 */
.site-header .header-logo{ width:300px; height:auto; max-width:none; display:block; }
.site-header--gnb2 .header-logo{ width:300px; height:auto; max-width:none; display:block; }


/* 1) nav 자체는 block으로 */
.site-header nav.gnb{
  display:block;
  padding: var(--gnb-py, 16px) 0;   /* 위아래 패딩만 */
}

/* 2) nav 안쪽 .wrap이 진짜 센터 박스 역할 */
.site-header nav.gnb > .wrap{
  max-width:1200px;
  margin:0 auto;               /* 중앙 정렬 핵심 */
  display:flex;
  justify-content:center;      /* 메뉴를 정확히 중앙으로 */
  align-items:center;
}

/* 3) 1뎁스 메뉴 가로 배치/간격 */
.site-header nav.gnb > .wrap .menu{
  display:flex;
  gap:56px;
  list-style:none;
  margin:0;
  padding:0;
}

/* 좁은 화면에서 스케일 다운 */
@media (max-width: 640px){
  .site-header .header-logo{ width:220px; }
  .site-header > .wrap.header-bar{
    grid-template-columns: minmax(220px,auto) 1fr auto;
  }
  .site-header > nav.wrap.gnb .menu{ gap:28px; }
}


/* 3) brand 컨테이너도 최소폭 확보(보조 안전장치) */
.site-header .brand{ min-width:300px; }

/* GNB 중앙 정렬(그리드 가운데 칸의 가운데) */
.site-header .gnb{ justify-self:center; }      /* ← 이 한 줄이 미세한 좌/우 오프셋을 없앰 */
.site-header .util{ justify-self:end; display:flex; gap:16px; }

/* 1뎁스 메뉴 가로/간격 */
.site-header .gnb .menu{
  display:flex; gap:56px; list-style:none; margin:0; padding:0;
}
.site-header .gnb .menu > li{ padding:14px 0; }
.site-header .gnb .menu a{
  text-decoration:none; color:#1c2430; font-weight:500;
  text-transform:uppercase; letter-spacing:.5px; position:relative; padding:6px 0;
}
/* GNB 밑줄 바(hover/active) */
.site-header .gnb .top-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;        /* 제목과 간격 */
  width:0;
  height:2px;         /* 두께 */
  background:#194A6C; /* 피그마 포인트 색 */
  transition:width .18s ease;
}

.site-header .gnb .top-link:hover::after,
.site-header .gnb .has-sub.is-active > .top-link::after{
  width:100%;
}

/* GNB 1뎁스 정렬/간격 */
.gnb.gnb--bar .menu{display:flex; gap:56px; list-style:none; margin:0; padding:0;}
.gnb.gnb--bar .menu > li{padding:14px 0;}
.gnb.gnb--bar .menu a{white-space:nowrap;}



.site-header .header-logo{
  height: auto;
  width: 200px;
  display: block;
    max-width:none;
}

/* 모바일에서 조금 줄이고 싶으면 */
@media (max-width: 640px){
  :root { --logo-h: 48px; }
}


/* .container{padding:var(--space-6) 0} */

/* Header (GNB) */
.site-header{background:var(--bg); border-bottom:1px solid var(--line); position:relative; z-index:900;}
.gnb{display:flex; align-items:center; justify-content:space-between; padding:var(--space-4) 0}
.brand{display:flex; align-items:center; gap:10px}
.brand a{text-decoration:none; color:var(--brand)}
.logo-mark{width:26px;height:26px;display:inline-grid;place-items:center;border:2px solid #555;color:#555;font-weight:800;border-radius:4px;line-height:1}
.logo-text{font-weight:800; letter-spacing:1px; font-size:22px}
.gnb .menu{display:flex; gap:56px}
.gnb .menu a{text-decoration:none; color:#1c2430;  letter-spacing:.5px; position:relative; padding:6px 0}
.gnb .menu a::after{content:"";position:absolute;left:0;bottom:-10px;height:3px;width:0;background:#1c2430;transition:width .18s ease}
.gnb .menu a:hover::after{width:100%}

nav.gnb{position:relative;}

/* 헤더 한 줄 레이아웃 */
.header-bar.header-one{
  display:grid;
  grid-template-columns:auto 1fr auto; /* 로고 | GNB | 유틸 */
  align-items:center;
  gap:24px;
  min-height:88px; /* 필요 시 조정 */
}
.header-one .util{display:flex;align-items:center;gap:16px;}

/* GNB 가로 배치 */
.gnb .menu>li{position:relative;}
.top-link{display:inline-block;padding:16px 0;}

/* ★ 메가드롭다운: 기본 숨김 + 헤더 아래에 겹쳐 뜨도록 절대배치 */
.gnb .mega-dropdown{
  position:absolute; left:0; right:0; top:100%;
  display:none;
  background:#fff;
  border-top:1px solid var(--line, #e6e8ef);
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  z-index:2100;
    left: 0; right: auto;   /* li의 왼쪽 기준으로 펼침 (가로 잘림 방지) */
  min-width: 200px;
  padding:20px 0;
}
.gnb .has-sub{position:relative;}
.gnb .has-sub:hover > .mega-dropdown,
.gnb .has-sub:focus-within > .mega-dropdown{ display:block; }

.mega-dropdown .mega-col{
  display:grid; grid-auto-flow:row; gap:8px; padding:8px 20px;
}

/* 활성 메뉴 표시(옵션) */
.is-active > .top-link{font-weight:700}


/* home-v3 전용: 다크 푸터가 항상 이기도록 특이도↑ + 마지막 파일에 위치 */
.site-footer.footer--dark{
  background:#2f3134;
  color:#d9dde3;
  border-top:1px solid #25272a;
}
.site-footer.footer--dark a{ color:#cfd3da; text-decoration:none; }
.site-footer.footer--dark a:hover{ color:#fff; }
.site-footer.footer--dark .wrap{ padding:26px 0; }
.site-footer.footer--dark .address{ color:#cfd3da; font-style:normal; margin:0 0 6px; }
.site-footer.footer--dark .copyright{ color:#aab2bd; }
.footer-logo{ height:34px; width:auto; opacity:.95; }
/* ========== Components ========== */
/* Buttons */
.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:10px 14px; border-radius:10px; font-weight:700; box-shadow:var(--shadow-1)}
.btn.ghost{background:#f5f3fb; color:var(--brand); border:1px solid #e7eaf0}
.btn.link{background:transparent; color:var(--brand); padding:0}

/* Cards */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-4)}

/* Chips */
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips a{display:inline-block; font-size:12px; color:#333; text-decoration:none; background:#fff; border:1px solid #e3e3ea; padding:6px 10px; border-radius:999px}

/* Subnav */
.subnav{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 18px}
.subnav a{font-size:14px; color:#333; text-decoration:none; padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #e3e3ea}
.subnav a.active,.subnav a:hover{background:#f0f0f5}

/* Notice list */
.notice-list{list-style:none; margin:0; padding:0; border-top:1px solid #eceef3}
.notice-list li{border-bottom:1px solid #eceef3}
.notice-list a{display:flex; gap:16px; align-items:center; padding:14px 8px; text-decoration:none; color:#1b1f23}
.notice-list .date{width:110px; flex:0 0 110px; color:#6b737b; font-size:14px}
.notice-list .tit{flex:1; font-weight:600}

/* Grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ===== Home v1 ===== */
.hero{display:grid; grid-template-columns: 1.3fr 1fr .8fr; gap:20px; margin:20px auto}
.hero-card{background:var(--bg); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.hero-card img{width:100%; height:210px; object-fit:cover}
.hero-card .hero-meta{padding:12px 14px}

.hero-banner{background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; justify-content:center; text-align:center}
.hero-banner h3{font-size:22px; margin:0 0 6px}
.hero-banner p{margin:0 0 14px; color:#444}
.cta-row{display:flex; justify-content:center; gap:10px}

.hero-sns{background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:16px}
.hero-sns h4{margin:0 0 10px; font-size:16px}
.sns-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.sns-grid a{display:block; text-decoration:none; color:#333; background:#fff; border:1px solid #e3e3ea; padding:10px; border-radius:10px; text-align:center; font-weight:600}

@media (max-width:1100px){.hero{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.hero{grid-template-columns:1fr}}





/* 배너 위로 겹치는 빠른 카드 */
.quick-grid{position:relative; z-index:2; margin-top:-100px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.quick-card{background:#fff; border:1px solid #e8ebf0; border-radius:16px; padding:18px; text-decoration:none; color:#222; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-2)}
.quick-card .ico{font-size:26px}

/* 공지 블록 */
.notice-block{margin-top:64px}

@media (max-width:960px){.quick-grid{grid-template-columns:repeat(2,1fr); margin-top:-50px}}
@media (max-width:560px){.quick-grid{grid-template-columns:1fr; margin-top:-20px}}

/* ===== Home v3 ===== */
.hero-yon{position:relative; width:100vw; margin-left:calc(50% - 50vw); color:#fff; padding:120px 0 140px; border-bottom:1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(13,22,52,.55), rgba(13,22,52,.55)),
              radial-gradient(120% 120% at 10% 0%, #0a5bd3 0%, #0b3d91 55%, #0a2a62 100%);
  background-size:cover; background-position:center}
.hero-yon__inner{padding:0 20px}
.hero-yon .eyebrow{margin:0 0 12px; font-size:12px; letter-spacing:.28em; opacity:.9; text-transform:uppercase}
.hero-yon h1{margin:0 0 14px; line-height:1.25; font-weight:800}
.hero-yon h1 strong{font-weight:900}
.hero-yon__actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{background:#fff; color:#0e2247}
.btn.ghost{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35)}

/* 배너 하단 서비스 벨트 */
.service-belt{position:absolute; left:0; right:0; bottom:-34px; display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.service-belt .svc{background:#fff; color:#111; text-decoration:none; display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px; border:1px solid #e7eaf0; box-shadow:var(--shadow-2)}
.service-belt .ico{font-size:20px; line-height:1}
.service-belt em{font-style:normal; font-weight:700}

/* 본문 2열 카드 */
.news-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:64px}
.news-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px}
.news-card header{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.news-card .more{font-size:14px; color:#3860ff; text-decoration:none}
.news-card .list{list-style:none; margin:0; padding:0}
.news-card .list li{border-top:1px solid #f0f2f6}
.news-card .list li:first-child{border-top:0}
.news-card .list a{display:flex; gap:14px; align-items:center; padding:12px 4px; text-decoration:none; color:#1a1f26}
.news-card time{width:110px; flex:0 0 110px; color:#6b7380; font-size:14px}
.news-card span{flex:1; font-weight:600}

@media (max-width:1100px){.service-belt{grid-template-columns:repeat(3,1fr); bottom:-26px}}
@media (max-width:768px){.hero-yon{padding:88px 0 120px}.news-grid{grid-template-columns:1fr}}
@media (max-width:520px){.service-belt{grid-template-columns:1fr; bottom:-18px}}


/* 상단 탭 전체 라인 */
.intro-tabs{
  background:#fff;
  border-bottom:1px solid #dfdfdf;
}

.intro-tabs__inner{
  height:60px;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
}

/* 개별 탭 */
.intro-tab{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:21px;
  font-weight:500;
  color:#666;
  text-align:center;
  border-bottom:2px solid transparent;
  text-decoration:none;
}

.intro-tab.is-active{
  color:#0A9F6D;
  border-bottom-color:#0A9F6D;
}

/* 모바일일 때는 스크롤/2줄 등으로 바꾸고 싶으면 여기서 추가 */
@media (max-width: 960px){
  .intro-tabs__inner{
    display:flex;
    overflow-x:auto;
  }
  .intro-tab{
    flex:0 0 auto;
    padding:0 16px;
  }
}

/* 소식 탭 active 색상만 파란색 */
.intro-tabs--news .intro-tab.is-active{
  color:#0E4A8A;
  border-bottom-color:#0E4A8A;
}

.intro-tabs--news .intro-tab:hover{
  color:#0E4A8A;
}