@charset "utf-8";

/* 서브페이지 지역내비 — 다이어리/폴더 탭 스타일.
   - 컨테이너 하단에 남색 기준선(border-bottom)을 깔고 탭을 그 위에 얹음
   - 비활성: 흰색 바탕 + 남색 테두리 / 활성: 남색 채움으로 기준선과 하나로 이어지는 폴더 탭 형태
   - 상단 여백(margin-top)으로 위 배너 사진과 간격 확보 */
#shSnb{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:6px;margin:40px auto 50px;background:none;border-bottom:3px solid #14394E}
#shSnb li{position:relative;bottom:-3px}
#shSnb li+li{border-left:none}
/* 비활성 탭: 흰 바탕에 남색 테두리. 테두리를 inset box-shadow 로 그려 박스 높이를 바꾸지 않음
   (border 로 그리면 활성 탭과의 3px 높이 차이가 사라져 튀어나오는 효과가 없어짐) */
#shSnb li a{display:block;padding:14px 34px 16px;border-radius:14px 14px 0 0;font-size:16px;font-weight:600;line-height:1.3;text-align:center;color:#14394E;background:#fff;box-shadow:inset 0 0 0 3px #14394E;transition:background .2s,color .2s}
#shSnb li a:hover{background:#eaf0f4}
/* 활성 탭: 남색으로 채워 하단 기준선과 하나로 이어지게 함
   (3px 테두리만큼 padding 을 줄여 비활성 탭보다 위로 3px 더 튀어나오게 유지) */
#shSnb li.on a{color:#fff;background:#14394E;border:3px solid #14394E;padding:11px 31px 16px;font-weight:700;box-shadow:none}
#shSnb li.on a:hover{background:#1d4d68}

/* 모바일에서도 서브 메뉴 노출(sh_common 의 display:none 을 덮어씀).
   항목이 많아도 깨지지 않도록 가로 스크롤 허용, 크기 축소 */
@media (max-width:1024px){
#shSnb{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px auto 36px;padding:0 12px}
#shSnb li{flex:none}
#shSnb li a{padding:12px 22px 14px;font-size:14px}
#shSnb li.on a{padding:9px 19px 14px}
}