@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&display=swap');

/* ===================================================================
   CLAZ 공통 상단 내비게이션 + 푸터
   - claz.kr 메인 상단과 동일한 디자인
   - 도구 페이지마다 CSS가 달라서, 모든 클래스에 cz- 접두사를 붙여 충돌을 막았다
   - 각 도구가 자체 sticky 헤더를 쓰는 경우가 있어 이 내비게이션은 고정하지 않는다
   - 수정은 이 파일 한 곳에서 하면 전체 도구에 반영된다
   =================================================================== */

/* 도구 페이지가 body 위쪽 여백을 갖고 있으면 내비게이션이 화면 맨 위에 붙지 않는다 →
   내비게이션이 있는 페이지에서만 위쪽 여백을 걷어내고, 대신 내비게이션 아래로 그만큼 띄운다 */
body:has(> .cz-nav){padding-top:0 !important;}
.cz-nav{margin-bottom:20px;}

.cz-nav{
  position:relative; z-index:80;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e6eaf1;
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.cz-nav *{box-sizing:border-box;}
.cz-nav-inner{
  max-width:1200px; margin:0 auto; padding:0 24px; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.cz-logo{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:22px;
  color:#2B4C8C; text-decoration:none; letter-spacing:-.5px;
  line-height:1; flex-shrink:0;
}
.cz-logo span{color:#FF6B6B;}
.cz-links{display:flex; gap:20px; align-items:center;}
.cz-links a{
  text-decoration:none; color:#475569; font-size:14px; font-weight:500;
  white-space:nowrap; transition:color .2s; line-height:1.4;
}
.cz-links a:hover{color:#2B4C8C;}
.cz-links a.cz-tools{
  border:1.5px solid #cdd6ea; color:#2B4C8C; padding:7px 14px;
  border-radius:8px; font-weight:600; transition:background .2s;
}
/* 도구 아이콘 — url()은 이 CSS 파일 기준으로 해석되므로 하위 폴더 페이지에서도 그대로 동작한다 */
.cz-links a.cz-tools::before{
  content:""; display:inline-block; width:16px; height:16px;
  background:url(icons/toolbox.svg) center/contain no-repeat;
  vertical-align:-3px; margin-right:6px;
}
.cz-links a.cz-tools:hover{background:#E9EEF9; color:#2B4C8C;}
.cz-links a.cz-cta{
  background:#2B4C8C; color:#fff; padding:8px 18px;
  border-radius:8px; font-weight:600; transition:background .2s;
}
.cz-links a.cz-cta:hover{background:#22407a; color:#fff;}
.cz-toggle{
  display:none; background:none; border:none; cursor:pointer; padding:8px;
  line-height:0; flex-shrink:0;
}
.cz-toggle span{
  display:block; width:22px; height:2px; background:#1e293b;
  margin:5px 0; border-radius:2px; transition:all .3s;
}
.cz-toggle.cz-on span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.cz-toggle.cz-on span:nth-child(2){opacity:0;}
.cz-toggle.cz-on span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

@media (max-width:960px){
  .cz-nav-inner{padding:0 16px;}
  .cz-links{
    display:none; position:absolute; top:64px; left:0; right:0; z-index:81;
    background:rgba(255,255,255,.99);
    flex-direction:column; align-items:flex-start;
    padding:20px; gap:18px;
    border-bottom:1px solid #e6eaf1;
    box-shadow:0 10px 40px rgba(20,39,77,.10);
  }
  .cz-links.cz-open{display:flex;}
  .cz-toggle{display:block;}
}

/* 인쇄할 때는 화면용 내비게이션·푸터를 빼야 한다 (가정통신문·자료 인쇄 도구가 있음) */
@media print{
  .cz-nav, .cz-foot{display:none !important;}
  body:has(> .cz-nav){padding-top:initial !important;}
}

/* ===== 공통 푸터 ===== */
.cz-foot{
  max-width:900px; margin:40px auto 0; padding:26px 20px 46px;
  border-top:1px solid #e6eaf1; text-align:center;
  font-family:'IBM Plex Sans KR',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
}
.cz-foot .cz-fh{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:17px;
  color:#14274D; text-decoration:none; letter-spacing:-.5px;
}
.cz-foot .cz-fh span{color:#2B4C8C;}
.cz-foot p{margin:9px 0 0; font-size:12.5px; color:#475569; line-height:1.75;}
.cz-foot p.cz-dim{color:#94a3b8; font-size:12px;}
.cz-foot a{color:#2B4C8C; text-decoration:none; font-weight:600;}
.cz-foot a:hover{text-decoration:underline;}