/* 2026.10 공통 상단 메뉴 + 하단 (layout2026.css) — main/inc/topM.html·footer.html·index.html 에서 불러옴 */
/* 공통 상단 메뉴 — 2026.10 리뉴얼 (메인·서브페이지 공용, main/inc/topM.html · index.html)
   밝은 버전 하나, 색은 변수로만. 기존 공통 CSS(basic.css·supportBasic.css·media.css)의 #header·h1·a·.gnb 규칙과 부딪히지 않게 새 클래스(.hd-*)만 씀
   .hd2 = 메뉴 바를 품은 요소 (서브페이지는 #header, 메인은 #topBar) */
:root{--hd-h:56px}
@media(min-width:1025px){:root{--hd-h:80px}}                            /* PC 메뉴 바 높이 = 메인과 같은 80px */
.hd2{
  --primary:#0085f5; --weak-bg:#e8f3ff; --weak-fg:#0067c2;
  --title:#111; --fg:#191f28; --body:#4e5968; --muted:#8b95a1; --hint:#b0b8c1;
  --canvas:#fff; --soft:#f7f8fa; --surface:#f2f4f6; --border:#e5e8eb;
  --menu-shadow:0 12px 32px rgba(17,24,39,.10),0 2px 8px rgba(17,24,39,.06);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
}
.hd2 .hd-bar,.hd2 .hd-dim{font-family:var(--font);text-align:left;-webkit-font-smoothing:antialiased;word-break:keep-all}
:where(.hd-bar) *,:where(.hd-bar) *::before,:where(.hd-bar) *::after{box-sizing:border-box}
:where(.hd-bar) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none}
:where(.hd-bar) :is(ul,li,p,h1){margin:0;padding:0;list-style:none}
:where(.hd-bar) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.hd-bar :focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
.hd-bar .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== 옛 서브페이지 머리(#header) 정리: 예전 흰 띠·로고·배경판은 숨기고, 새 메뉴 바를 맨 위에 =====
   (리뉴얼 안 한 페이지는 #header 안의 배너가 그대로 보임 – 메뉴 바만 위에 얹힘) */
#header.hd2>.gnbWt,#header.hd2>.gnbBg,#header.hd2>.subBg{display:none!important}
#header.hd2>h1{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0);margin:-1px;padding:0}   /* 페이지 제목(h1)은 화면 읽기용으로만 남김 */
.hd2 #gnb{position:absolute!important;left:0!important;right:0!important;top:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;z-index:2000!important;background:none!important;display:block!important}
body:has(#cp) #header.hd2{height:var(--hd-h)!important}                   /* 리뉴얼한 페이지(#cp)는 머리 높이 = 메뉴 바 */
@media(min-width:1025px){ body.hd-shown #cp .lnb{top:var(--hd-h)!important} }   /* 회사소개 구역 메뉴: 메뉴 바 아래에 붙음 */
/* 메인(#topBar): 로고를 h1 로 감쌈 */
.hd2 .hd-h1{position:static!important;left:auto!important;top:auto!important;z-index:auto!important;display:flex;flex:none;margin:0;font-size:inherit}
.hd2 .hd-h1>a{display:flex!important;width:auto!important;height:auto!important;background:none!important;text-indent:0!important}

/* ===== 메뉴 바 ===== */
.hd2 .hd-bar{position:relative;z-index:2000;height:var(--hd-h);display:flex;align-items:center;gap:40px;padding:0 32px}
.hd2::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--hd-h);z-index:1999;pointer-events:none;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--border);transition:border-color .2s}
.hd2 .hd-logo{display:flex!important;align-items:center;flex:none}
.hd2 .hd-logo img{display:block;width:97px;height:26px}
.hd2 .hd-nav{flex:1;min-width:0;height:100%}
.hd2 .hd-menu{display:flex;height:100%}
.hd2 .hd-item{position:relative;height:100%}
.hd2 .hd-top{display:inline-flex!important;align-items:center;gap:6px;height:100%;padding:0 18px;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--fg);white-space:nowrap;transition:color .2s}
.hd2 .hd-top:hover,.hd2 .hd-item.open>.hd-top{color:var(--primary)}
.hd2 .hd-item.is-cur>.hd-top{color:var(--primary)}                     /* 지금 보고 있는 페이지의 메뉴 */
.hd2 .hd-caret{width:7px;height:7px;margin-top:-3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:.55;transition:transform .3s var(--ease),margin .3s var(--ease)}
.hd2 .hd-item.open .hd-caret{transform:rotate(-135deg);margin-top:4px}
.hd2 .hd-cta,.hd2 .hd-burger,.hd2 .hd-m-cta{display:none!important}

/* ===== 드롭다운 항목 (두 시안 공통): 제목 + 한 줄 설명 ===== */
.hd2 .hd-gt{padding:0 12px 8px;font-size:13px;font-weight:600;color:var(--muted)}
.hd2 .hd-panel a{display:flex!important;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;transition:background .2s}
.hd2 .hd-panel strong{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:600;color:var(--fg);white-space:nowrap;transition:color .2s}
.hd2 .hd-panel span{font-size:13px;color:var(--muted);white-space:nowrap}
.hd2 .hd-ext{width:12px;height:12px;flex:none;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h6v6M10 2 3 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h6v6M10 2 3 9'/%3E%3C/svg%3E") center/contain no-repeat}
@media(hover:hover) and (pointer:fine){
  .hd2 .hd-panel a:hover{background:var(--soft)}
  .hd2 .hd-panel a:hover strong{color:var(--primary)}
}
.hd2 .hd-panel a[aria-current] strong{color:var(--primary)}

/* ===== 반투명 배경 (메뉴가 열리면 본문을 살짝 가림) ===== */
.hd2 .hd-dim{position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;z-index:1998;background:rgba(17,24,39,.18);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none}

/* PC: 메인 페이지 상단 메뉴와 같은 크기 (높이 80px, 로고는 화면 왼쪽 끝 32px, 메뉴 글자 17px 굵게) */
@media(min-width:1025px){
  .hd2 .hd-top{font-size:17px;font-weight:700}
}
@media(min-width:1025px){
  /* ----- 전체 펼침형: 메뉴 바 아래 흰 판에 모든 메뉴가 한 번에 ----- */
  /* 메뉴 이름은 붙여 두고(A와 같은 간격), 펼쳐지는 판의 칸은 메뉴 바 왼쪽 기준으로 따로 놓음 */
  /* 메뉴 이름은 가운데에 넉넉한 간격으로. 상품소개 판은 이름 왼쪽으로 펼치고, 홍보센터 판은 이름 바로 아래에서 시작 */
  .gb .hd-bar{gap:48px}
  .gb .hd-menu{justify-content:center}                                /* 로고·버튼 폭이 비슷해 화면 가운데와 거의 같음 */
  .gb .hd-item{flex:none}
  .gb .hd-top{padding:0 28px}
  .gb .hd-item[data-sec="product"] .hd-panel{left:auto;right:0;width:460px;padding-right:24px!important}
  .gb .hd-item[data-sec="pr"] .hd-panel{left:-8px;width:260px;border-left:1px solid var(--border);padding-left:24px!important}
  .gb .hd-panel:not(:has(.hd-gt)){padding-top:50px!important}       /* 분류 제목이 없는 메뉴도 첫 줄 높이를 맞춤 */
  .gb .hd-panel{position:absolute;top:100%;padding:24px 0 32px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .3s var(--ease),visibility .22s}
  .gb .hd-panel-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
  .gb.menu-open .hd-panel{opacity:1;visibility:visible;transform:none}
  .gb.menu-open .hd-item:not(.open) .hd-panel{opacity:.55}            /* 마우스가 있는 메뉴를 또렷하게 */
  .gb.menu-open .hd-item:not(.open) .hd-panel:hover{opacity:1}
  .gb .hd-bar::after{content:"";position:absolute;left:0;right:0;top:100%;z-index:-1;pointer-events:none;height:var(--mega-h,0px);background:var(--canvas);box-shadow:0 16px 24px -12px rgba(17,24,39,.12);border-bottom:1px solid var(--border);
    opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s}
  .gb.menu-open .hd-bar::after{opacity:1;visibility:visible}
  .gb .hd-cta{display:inline-flex!important;align-items:center;flex:none;height:36px;padding:0 16px;border-radius:8px;background:var(--primary);font-size:14px;font-weight:600;color:#fff!important;transition:background .2s}
  .gb .hd-cta:hover{background:#006ecb}

  .hd2.menu-open .hd-dim{opacity:1;visibility:visible}
}
@media(min-width:1025px) and (max-width:1279px){
  .gb .hd-bar{gap:24px;padding:0 24px}
  .gb .hd-top{padding:0 20px}
  .gb .hd-cta{display:none!important}                                 /* 좁은 PC 화면에서는 메뉴 자리를 먼저 */
}

/* ===== 태블릿·모바일 (1024px 이하): 오른쪽 위 버튼 → 화면 전체 메뉴 ===== */
@media(max-width:1024px){
  .hd2 .hd-bar{padding:0 8px 0 20px;justify-content:space-between}
  .hd2 .hd-burger{display:inline-flex!important;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;border-radius:8px}
  .hd2 .hd-burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--fg);transition:transform .3s var(--ease),opacity .2s}
  .hd2.m-open .hd-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .hd2.m-open .hd-burger span:nth-child(2){opacity:0}
  .hd2.m-open .hd-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .hd2 .hd-nav{position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;height:auto;z-index:3;background:var(--canvas);overflow-y:auto;overscroll-behavior:contain;padding:8px 20px 32px;
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .25s var(--ease),transform .3s var(--ease),visibility .25s}
  .hd2.m-open .hd-nav{opacity:1;visibility:visible;transform:none}
  .hd2 .hd-menu{display:block;height:auto}
  .hd2 .hd-item{height:auto;border-bottom:1px solid var(--border)}
  .hd2 .hd-top{width:100%;height:60px;padding:0 4px;justify-content:space-between;font-size:18px;font-weight:700;color:var(--title)}
  .hd2 a.hd-top::after{content:"";width:7px;height:7px;border:solid var(--hint);border-width:1.6px 1.6px 0 0;transform:rotate(45deg)}
  .hd2 .hd-panel{display:none;padding:0 0 16px}
  .hd2 .hd-item.open .hd-panel{display:block}
  .hd2 .hd-panel-2 .hd-group+.hd-group{margin-top:12px}
  .hd2 .hd-gt{padding:4px 4px 6px}
  .hd2 .hd-panel a{padding:10px 4px}
  .hd2 .hd-panel strong{font-size:16px}
  .hd2 .hd-m-cta{display:flex!important;flex-direction:column;align-items:stretch;gap:12px;margin-top:28px}
  .hd2 .hd-m-btn{display:flex!important;align-items:center;justify-content:center;height:52px;border-radius:10px;background:var(--primary);font-size:16px;font-weight:600;color:#fff!important}
  .hd2 .hd-m-tel{text-align:center;font-size:14px;color:var(--body)!important;font-variant-numeric:tabular-nums}
}
@media(prefers-reduced-motion:reduce){
  .hd2 .hd-panel,.hd2 .hd-nav,.hd2 .hd-dim,.hd2::after{transition:none!important}
}


/* 하단(푸터) 리뉴얼 시안 — 2026.10. 상단 메뉴와 같은 글꼴·색·메뉴 구성, 아이콘 없이 글자만
   기존 공통 CSS(supportBasic.css·media.css 의 #footer 규칙)와 안 부딪히게 새 클래스(.ft-*)만 씀 */
#footer{width:auto!important;height:auto!important;padding:0!important;margin:0!important;background:none!important}
.ft{
  --primary:#0085f5; --title:#111; --fg:#191f28; --body:#4e5968; --muted:#8b95a1; --line:#e5e8eb; --bg:#f7f8fa; --card:#fff;
  --font:"Pretendard Variable","Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;
  background:var(--bg);border-top:1px solid var(--line);font-family:var(--font);text-align:left;color:var(--body);word-break:keep-all;-webkit-font-smoothing:antialiased;
  display:block!important;width:auto!important;height:auto!important;padding:0!important;margin:0!important;
}
/* 어두운 버전: 값만 바꿈 */
.ft.dark{--title:#fff; --fg:#e5e8eb; --body:#b0b8c1; --muted:#8b95a1; --line:rgba(255,255,255,.12); --bg:#191f28; --card:rgba(255,255,255,.06)}
:where(.ft) *,:where(.ft) *::before,:where(.ft) *::after{box-sizing:border-box}
:where(.ft) a{display:inline;width:auto;height:auto;color:inherit;text-decoration:none}
:where(.ft) :is(ul,li,p,address){margin:0;padding:0;list-style:none;font-style:normal}
.ft .sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.ft-in{max-width:1280px;margin:0 auto;padding:64px 40px 40px}             /* 예전처럼 가운데로 모음 */
.ft-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:48px 64px;align-items:start}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.ft-logo img{display:block;width:110px;height:auto}
.ft-ask{display:inline-flex!important;align-items:center;height:40px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:14px;font-weight:600;color:var(--fg)!important;transition:border-color .2s,color .2s}
.ft-ask:hover{border-color:var(--primary);color:var(--primary)!important}
.ft-call{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:24px 48px}
.ft-call li{display:flex;flex-direction:column;gap:2px}
.ft-cn{font-size:13px;color:var(--muted)}
.ft-tel{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--title)!important;font-variant-numeric:tabular-nums}
.ft-em{font-size:13px;color:var(--body)!important}
.ft-tel:not([href]),.ft-em:not([href]){cursor:text}
.ft-map{display:grid;grid-template-columns:repeat(4,max-content);gap:0 48px}
.ft-h{margin-bottom:14px!important;font-size:13px;font-weight:600;color:var(--muted)}
.ft-col li+li{margin-top:10px}
.ft-col a{display:inline-flex!important;align-items:center;gap:4px;font-size:14px;color:var(--fg)!important;transition:color .2s}
.ft-col a:hover{color:var(--primary)!important}
.ft-ext{width:10px;height:10px;background:currentColor;opacity:.5;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h6v6M10 2 3 9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2h6v6M10 2 3 9'/%3E%3C/svg%3E") center/contain no-repeat}
.ft-bottom{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:13px;line-height:1.6}
.ft-links{display:flex;flex-wrap:wrap;gap:4px 0}
.ft-links li+li::before{content:"";display:inline-block;width:1px;height:10px;margin:0 12px;background:var(--line);vertical-align:middle}
.ft-links a{color:var(--body)!important;transition:color .2s}
.ft-links a:hover{color:var(--fg)!important}
.ft-links .ft-pp{font-weight:700;color:var(--fg)!important}
.ft-info{display:flex;flex-wrap:wrap;gap:0 16px;color:var(--muted)}
.ft-copy{color:var(--muted);font-size:12px;letter-spacing:.02em}
.ft-last{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:4px}
.ft-family{display:flex;align-items:center;gap:10px}
.ft-fl{font-size:12px;color:var(--muted)}
.ft-family a{display:inline-flex!important;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:13px;font-weight:600;color:var(--fg)!important;transition:border-color .2s,color .2s}
.ft-family a:hover{border-color:var(--muted);color:var(--title)!important}
/* 오른쪽 퀵메뉴가 가리지 않게 */
@media(min-width:1025px) and (max-width:1439px){.ft-in{padding-right:96px}}   /* 오른쪽 퀵메뉴(고정)가 사이트맵을 가리지 않게 */
@media(max-width:1279px){
  .ft-top{grid-template-columns:auto minmax(0,1fr)}
  .ft-map{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,max-content))}
}
@media(max-width:844px){
  .ft-in{padding:48px 20px 32px}
  .ft-top{grid-template-columns:1fr;gap:32px}
  .ft-brand{flex-direction:row;align-items:center;justify-content:space-between}
  .ft-call{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}
  .ft-tel{font-size:17px}
  .ft-map{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px;padding-top:28px;border-top:1px solid var(--line)}
  .ft-bottom{margin-top:32px}
  .ft-info{flex-direction:column}
  .ft-links{gap:6px 16px}
  .ft-links li+li::before{display:none}
}
@media(max-width:400px){ .ft-call{grid-template-columns:1fr} }