@charset "UTF-8";
/* =====================================================================
   frame-polish.css — 새기준병원 공통 프레임 비주얼 정돈 (CSS-only override)
   로드: head.sub.php 최후순위. HTML/구조/텍스트/링크/이미지경로/높이/position 불변.
   오버라이드 전용. #contents 내부(본문) 셀렉터 없음. 팝업(.popupDoctor) 미접촉.
   중요도 강제 규칙 미사용 — 로드 순서 + 동일 특이도로 캐스케이드 확보.
   ===================================================================== */
:root{
  --ns-teal:#2B7366;
  --ns-teal-dark:#245F55;
  --ns-navy:#10283D;
  --ns-mint:#F7FAFB;
  --ns-line:#E6EEF0;
}

/* ---------- A. 헤더 / GNB ---------- */
/* 배경 흰색 + 미세 그림자(모든 상태 통일). 높이/position 불변. */
.header{
  background-color:#fff;
  border-bottom-color:transparent;
  box-shadow:0 1px 0 rgba(16,40,61,.06), 0 8px 24px rgba(16,40,61,.05);
}
.header.headerActive{ background-color:#fff; }
.header.subPage.headerActive{ background-color:#fff; }

/* 서브페이지 흰 반전 로고 → 원본 로고 복원 */
.header.subPage .headerTop .header__logo img{ filter:none; }

/* 메뉴 글자 → 네이비(기본/서브/메인히어로 상태 모두 커버) */
.header .headerGnb .dep1-wrap .dep1{
  color:var(--ns-navy);
  transition:color .2s ease, box-shadow .2s ease;
}
.header.subPage .headerGnb .dep1-wrap .dep1{ color:var(--ns-navy); }
.header:not(.subPage):not(.headerActive) .headerGnb .dep1-wrap .dep1{ color:var(--ns-navy); }

/* 호버/포커스 → 청록 + 2px 밑줄(box-shadow: 폭/높이 불변, 굵기 점프 방지) */
.header .headerGnb .dep1-wrap .dep1:hover,
.header .headerGnb .dep1-wrap .dep1:focus-visible{
  color:var(--ns-teal);
  font-weight:400;
  box-shadow:inset 0 -2px 0 var(--ns-teal);
}
.header:not(.subPage):not(.headerActive) .headerGnb .dep1-wrap .dep1:hover{
  color:var(--ns-teal);
  box-shadow:inset 0 -2px 0 var(--ns-teal);
}

/* 상단 유틸(로그인 등): 메인 히어로 흰 글자 → 그레이 복원, 구분선 토큰화 */
.header:not(.subPage):not(.headerActive) .headerTop .header__global--login > li a{ color:#666; }
.header:not(.subPage):not(.headerActive) .headerTop .header__global--login > li:nth-child(n+2)::before{ background-color:var(--ns-line); }

/* 드롭다운: 흰 배경, radius, 그림자, 항목 호버 배경 민트 */
.header .headerGnb .dep2-wrap{
  background-color:#fff;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(16,40,61,.12);
  overflow:hidden;
}
.header .headerGnb .dep2-wrap .dep2,
.header .headerGnb .dep3-wrap .dep3{ color:var(--ns-navy); }
.header .headerGnb .dep2-wrap .dep2-con:hover{ background-color:var(--ns-mint); }
.header .headerGnb .dep2-wrap .dep2:hover,
.header .headerGnb .dep3-wrap .dep3:hover{ color:var(--ns-teal); }

/* ---------- B. 모바일 드로어(반응형 좁은뷰): 활성색·구분선 토큰 통일 ---------- */
.header .headerMobileNav .mobile__menu .modep1-wrap .modep1::before{ background-color:var(--ns-teal); }
.header .headerMobileNav .mobile__menu .modep1-wrap .mdep2-con .mdep2:hover,
.header .headerMobileNav .mobile__menu .modep1-wrap .mdep2-con .mdep2.onePageActive{ color:var(--ns-teal); }

/* ---------- C. 서브비주얼: 이미지 래퍼 그라디언트 오버레이 + 타이포 정돈 ----------
   높이 불변(래퍼는 이미지 높이 그대로). 오버레이는 이미지 위·텍스트/LNB 아래(자연 DOM 순서). */
.subVisual__imgAr{ position:relative; display:block; font-size:0; }
.subVisual__imgAr::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(16,40,61,.55), rgba(43,115,102,.35));
  pointer-events:none;
}
.subVisual .textArea .text1{ text-shadow:0 2px 12px rgba(16,40,61,.35); }
.subVisual .textArea .text2{ color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(16,40,61,.30); }

/* ---------- D. LNB 드롭다운(.slnb): 구분선·호버 토큰 통일 ----------
   ※ 본 사이트 LNB 바(.lnb-area .lnb)는 서브비주얼 위 흰텍스트 오버레이 구조라
      'LNB 배경 #fff'는 부적합 → 바는 오버레이 유지, 정돈은 드롭다운에 적용. */
.lnb-area .lnb .lnb-item .slnb{
  border-color:var(--ns-line);
  border-radius:0 0 10px 10px;
  box-shadow:0 12px 24px rgba(16,40,61,.12);
}
.lnb-area .lnb .lnb-item .slnb .dep1_con:nth-child(n+2){ border-top-color:var(--ns-line); }
.lnb-area .lnb .lnb-item .slnb .dep1_con a{ color:var(--ns-navy); transition:color .2s ease; }
.lnb-area .lnb .lnb-item .slnb .dep1_con a:hover{ color:var(--ns-teal); }

/* ---------- E. 푸터: 네이비 톤 + 본문 대비 확보 ---------- */
.footer{ background-color:var(--ns-navy); }
.footer-logo{ border-bottom-color:rgba(255,255,255,.12); }
.footer-info-detail{ color:rgba(255,255,255,.72); }
.footer-info-detail .info-area{ color:rgba(255,255,255,.72); }
.footer-info-detail .info-area a{ color:rgba(255,255,255,.86); transition:color .2s ease; }
.footer-info-detail .info-area a:hover{ color:#fff; }
.footer-info-menu li a{ transition:color .2s ease; }
.footer-info-menu li a:hover{ color:var(--ns-mint); }

/* ---------- F. 퀵메뉴/플로팅: radius·그림자·호버만 통일(위치/크기 불변) ---------- */
.quick ul li > a{ box-shadow:0 6px 18px rgba(16,40,61,.18); transition:all .2s ease; }
.quick ul li:hover > a{ background-color:var(--ns-teal); }

/* ---------- G. 접근성 ---------- */
:focus-visible{ outline:2px solid var(--ns-teal); outline-offset:2px; }

/* ---------- H. 서브비주얼 히어로 변형(.subVisual--hero) ----------
   이중 배너 정리: 페이지가 $subVisualImage를 지정하면 서브비주얼이 해당
   히어로 일러스트를 표시(단일 배너). 높이는 고정 클램프 + object-fit cover. */
.subVisual--hero .subVisual__imgAr{ height:clamp(440px, 30vw, 540px); }
.subVisual--hero .textArea{ top:calc(50% + 26px); }
.subVisual--hero .subVisual__imgAr img{
  width:100%; height:100%; max-width:none; margin:0;
  object-fit:cover; object-position:center 40%;
}
@media (max-width:1024px){
  .subVisual--hero .subVisual__imgAr img{ width:100%; margin-left:0; }
}
@media (max-width:687px){
  .subVisual--hero .subVisual__imgAr{ height:300px; }
  .subVisual--hero .subVisual__imgAr::after{
    background:linear-gradient(135deg, rgba(16,40,61,.62), rgba(43,115,102,.45));
  }
}
@media (max-width:480px){
  .subVisual--hero .subVisual__imgAr img{ width:100%; margin-left:0; }
}

/* ---------- I. 게시판 스킨 톤 정리(배치④) ----------
   게시판 공통 요소만 브랜드 토큰으로 통일. 레이아웃·크기 불변, 색·테두리·호버만. */
.board-table thead th,
.board-table1 thead th{ background-color:var(--ns-navy); color:#fff; border-color:rgba(255,255,255,.12); }
.board-table tbody td,
.board-table1 tbody td{ border-color:var(--ns-line); }
.board-table tbody tr:hover td,
.board-table1 tbody tr:hover td{ background-color:var(--ns-mint); }
.board-pagenation a{ border-radius:8px; transition:all .2s ease; }
.board-pagenation a:hover{ color:var(--ns-teal); border-color:var(--ns-teal); }
.board-pagenation .active,
.board-pagenation a.active{ background-color:var(--ns-teal); color:#fff; border-color:var(--ns-teal); }
.board-search-wrap input[type="text"]{ border-color:var(--ns-line); border-radius:10px; }
.board-search-wrap .input-submit,
.board-btn-area .btn{ transition:all .2s ease; }
.board-btn-area .btn:hover{ color:var(--ns-teal); border-color:var(--ns-teal); }
.column-card{ border:1px solid var(--ns-line); border-radius:16px; box-shadow:0 8px 22px rgba(16,40,61,.05); transition:box-shadow .25s ease, transform .25s ease; }
.column-card:hover{ box-shadow:0 14px 30px rgba(16,40,61,.10); transform:translateY(-2px); }
.column-card__category{ color:var(--ns-teal); }
.column-card__title{ color:var(--ns-navy); }
.column-view__title{ color:var(--ns-navy); }
.column-view__eyebrow{ color:var(--ns-teal); }
.nshBbsCta__button,
.column-card__button{ transition:all .2s ease; }
.nshBbsCta__button:hover,
.column-card__button:hover{ background-color:var(--ns-teal); color:#fff; border-color:var(--ns-teal); }