@charset "utf-8";
/* ===== 2026-10 리뉴얼 공통 (전 페이지 적용) ===== */
/* 한글 단어 단위 줄바꿈 + 제목 줄 길이 균형 */
body{word-break:keep-all;overflow-wrap:break-word}
h1,h2,h3,.sub_title p,.s_title p{text-wrap:balance}
p,li,td,th,figcaption{text-wrap:pretty}
.nowrap{white-space:nowrap}
/* 제목 h1 기본 스타일 보정 */
.sub_title h1{margin:0;font-weight:700;line-height:1.2}
/* 키보드 포커스 표시 */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #37be00;outline-offset:2px}

/* ===== 메인(index.jsp) 리뉴얼 전용 : .rn 안에서만 적용 ===== */
.rn{font-family:'Noto Sans KR',sans-serif;color:#15201A;background:#ffffff;margin-top:100px}
.rn *{box-sizing:border-box}
.rn a{color:#1d6b00}
.rn a:hover{color:#124400}
.rn input[type=checkbox]{padding:0;width:18px;height:18px;accent-color:#37be00}
.rn .herobg{background-color:#0C1E2B;background-image:linear-gradient(90deg,rgba(12,30,43,0.97) 0%,rgba(12,30,43,0.9) 50%,rgba(12,30,43,0.72) 100%),url(../img/renew/dock_hero.webp);background-size:cover;background-position:center}
.rn .gal{margin:0;display:flex;flex-direction:column;gap:10px}
.rn .gal img{width:100%;height:300px;object-fit:cover;border-radius:12px;display:block}
.rn .gal figcaption{font-size:14px;color:#C9DCE6;line-height:1.5}
.rn [style*="font-size:15px"],.rn [style*="font-size:14px"],.rn [style*="font-size:16px"],.rn [style*="font-size:19px"],.rn [style*="font-size:20px"],.rn [style*="font-size:28px"]{text-wrap:balance}
@media screen and (max-width:767px){
  .rn{margin-top:80px}
  .rn .herotitle{font-size:38px !important}
  .rn .sectitle{font-size:28px !important}
}

/* ===== 개인정보처리방침 팝업 (index) ===== */
dialog.pp{border:none;padding:16px;background:transparent;max-width:100vw;max-height:100vh;width:100%;height:100%;box-sizing:border-box;z-index:100000}
dialog.pp[open]{display:flex;align-items:center;justify-content:center}
dialog.pp::backdrop{background:rgba(8,21,31,0.6)}

/* ===== 개인정보처리방침 페이지 (privacy.jsp) ===== */
.privacy_page{padding:180px 0 120px;background:#ffffff}
.privacy_page .pv_wrap{max-width:860px;margin:0 auto;padding:0 20px;font-family:'Noto Sans KR',sans-serif;color:#15201A}
.privacy_page h1{font-size:36px;font-weight:900;margin:0 0 24px}
.privacy_page .pv_lead{font-size:16px;line-height:1.8;color:#3D4A43;margin:0 0 32px}
.privacy_page ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.privacy_page li strong{display:block;font-size:18px;margin-bottom:6px}
.privacy_page li span{display:block;font-size:16px;line-height:1.8;color:#3D4A43}
@media screen and (max-width:767px){
  .privacy_page{padding:130px 0 80px}
  .privacy_page h1{font-size:28px}
}

/* ===== 헤더/푸터 메뉴를 p(onclick) → a 링크로 바꾸면서 기존 스타일 그대로 이어받기 ===== */
.main_menu>li>a.main_menu_link{display:block;color:#111111;transition:all .5s}
.main_menu>li:hover>a.main_menu_link{color:#37be00}
.menu_box .btn a.header_quote_btn{display:block;padding:16px 0;width:168px;border-radius:10px;background-color:#37be00;color:#ffffff}
#footer .f_menu a{color:#ffffff}
#footer .f_menu a:hover{color:#37be00}
@media screen and (max-width:767px){
  .menu_box .btn a.header_quote_btn{padding:8px 0;width:100px}
}
@media screen and (min-width:768px) and (max-width:1024px){
  .menu_box .btn a.header_quote_btn{padding:10px 0;width:120px}
}

/* 푸터 메뉴 단어 중간 줄바꿈 방지 */
#footer .f_sub_menu a{white-space:nowrap}

/* 원페이지 : 메뉴 이동 시 고정 헤더에 가리지 않도록 */
html{scroll-behavior:smooth}
.rn section[id]{scroll-margin-top:100px}
@media (max-width:1024px){.rn section[id]{scroll-margin-top:80px}}
#sitemap .st_link{display:block}
/* 요금 카드 : PC 3열(입고비 2칸 강조) / 태블릿 2열 / 모바일 1열 */
.rn .rn_price{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rn .rn_price .rn_span2{grid-column:span 2}
@media (max-width:900px){.rn .rn_price{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rn .rn_price{grid-template-columns:minmax(0,1fr)}.rn .rn_price .rn_span2{grid-column:auto}}
/* 모바일 메뉴 : 배경 글자가 비치지 않도록 불투명 처리 + 터치하기 쉬운 크기 */
@media (max-width:1024px){
  #sitemap{background-color:#0C1E2B}
  #sitemap .st_link{font-size:22px;padding:8px 0}
  #sitemap .st_link:hover{color:#37be00}
}