/* 푸터 — 차콜 단일 톤 (헤더는 밝게 유지, 하단만 LG식 다크 통일)
   section.wrap 으로 특이도 상향 — media.css 구형 푸터 레이아웃 덮어씀 */

section.wrap footer {
  background-color: #161618;
  color: #a1a1aa;
}
section.wrap footer > * {
  color: #a1a1aa;
}

section.wrap footer .foot_info {
  padding: 14px 25px;
  background-color: #1c1c1f;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 0;
}
section.wrap footer .foot_info:after {
  display: none;
}
section.wrap footer .foot_info li {
  float: none;
  width: auto;
  margin-left: 0;
  padding-left: 20px;
  text-align: left;
  border-left: 0;
  box-sizing: border-box;
}
section.wrap footer .foot_info li:first-child {
  padding-left: 0;
}
section.wrap footer .foot_info li:before {
  display: block;
  top: 50%;
  bottom: auto;
  height: 12px;
  transform: translateY(-50%);
  border-left-color: rgba(255, 255, 255, 0.16);
}
section.wrap footer .foot_info li a {
  position: relative;
  display: block;
  height: auto;
  min-height: 28px;
  width: auto;
  line-height: 1.5;
  font-size: 14px;
  font-weight: 500;
  color: #a1a1aa;
  letter-spacing: 0.01em;
  text-align: left;
  /* comm.css 아이콘(::after) 공간 — padding 제거 시 글자·아이콘 겹침 방지 */
  padding: 6px 36px 6px 0;
  box-sizing: border-box;
  transition: color 0.18s ease;
}
section.wrap footer .foot_info li a:hover {
  color: #f4f4f5;
}
section.wrap footer .foot_info li a:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  margin-top: 0;
  opacity: 0.85;
  filter: grayscale(1) brightness(1.4);
}
section.wrap footer .foot_info li a.com_contact:after {
  background-position: 0 -60px;
}
section.wrap footer .foot_info li a span {
  display: inline;
  vertical-align: baseline;
  line-height: inherit;
}

section.wrap footer address {
  padding: 28px 25px 32px;
  max-width: 1320px;
  margin: 0 auto;
}
section.wrap footer address div {
  float: none;
  max-width: calc(100% - 200px);
}
section.wrap footer address p,
section.wrap footer address .email {
  color: #a1a1aa;
}
section.wrap footer address p:before,
section.wrap footer address .email:before {
  background-color: #52525b;
  top: 9px;
}
section.wrap footer address a {
  color: #a1a1aa;
  transition: color 0.18s ease;
}
section.wrap footer address a:hover {
  color: #f4f4f5;
}
section.wrap footer address p span a,
section.wrap footer address .email {
  color: #c4c4cc;
}
section.wrap footer address p span a:hover,
section.wrap footer address .email:hover {
  color: #fafafa;
}
section.wrap footer address p.copy {
  margin-top: 4px;
  padding-top: 16px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #71717a;
}

section.wrap footer .btn_tab_share {
  background-color: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
}
section.wrap footer .btn_tab_share:hover {
  background-color: #3f3f46;
}
section.wrap footer .tab_share_form {
  background-color: #27272a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
section.wrap footer .btn_tab_share02 {
  background-color: #27272a;
  border-color: rgba(255, 255, 255, 0.2);
}

/* media.css (500–767) 구형 4열 푸터 네비 무력화 */
@media all and (min-width: 500px) and (max-width: 767px) {
  section.wrap footer .foot_info {
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  section.wrap footer .foot_info li {
    width: auto;
    padding-left: 20px;
    margin: 0;
    text-align: left;
    border-left: 0;
  }
  section.wrap footer .foot_info li:first-child {
    padding-left: 0;
  }
  section.wrap footer .foot_info li:before {
    display: block;
  }
  section.wrap footer .foot_info li a {
    display: block;
    height: auto;
    width: auto;
    padding: 6px 36px 6px 0;
    text-align: left;
  }
  section.wrap footer .foot_info li a:after {
    display: block;
  }
  section.wrap footer .foot_info li a span {
    display: inline;
    vertical-align: baseline;
  }
}

@media screen and (max-width: 768px) {
  section.wrap footer address div {
    max-width: 100%;
    float: none;
  }
  section.wrap footer .foot_info {
    padding: 12px 18px;
  }
  section.wrap footer address {
    padding: 22px 18px 28px;
  }
  section.wrap footer address p span a,
  section.wrap footer address .email {
    color: #c4c4cc;
  }
}

/* WONIT footer: quiet charcoal wrapper and two clear information rows. */
section.wrap footer.wonit-footer {
  background: #080808;
  padding: 32px 36px 48px;
  height: auto;
  min-height: 0;
  color: #999;
  font-family: Pretendard, sans-serif;
}
.wonit-footer .wonit-footer-inner { max-width: 1440px; margin: 0 auto; }
.wonit-footer .wonit-footer-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; padding-bottom: 16px; border-bottom: 1px solid #292929;
}
.wonit-footer .wonit-footer-links { display: flex; flex-wrap: wrap; gap: 20px 32px; }
.wonit-footer .wonit-footer-links a { font-size: 16px; font-weight: 500; color: #aaa; }
.wonit-footer .wonit-footer-contact {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 48px; padding: 15px 24px; border-radius: 999px;
  background: #242424; color: #eee; font-size: 15px; font-weight: 500; white-space: nowrap;
}
.wonit-footer .wonit-footer-contact span { font-size: 20px; }
.wonit-footer .wonit-footer-bottom { display: flex; justify-content: space-between; gap: 32px; padding-top: 16px; }
section.wrap footer.wonit-footer address.wonit-footer-details {
  background: transparent; padding: 0; margin: 0; width: auto; height: auto;
  font-style: normal; float: none; color: #999;
}
section.wrap footer.wonit-footer address.wonit-footer-details p {
  margin: 0; font-size: 14px; line-height: 1.8; color: #999; letter-spacing: 0;
}
section.wrap footer.wonit-footer .wonit-footer-channels {
  display: flex; flex-wrap: wrap; gap: 4px 24px; padding-top: 6px;
}
section.wrap footer.wonit-footer .wonit-footer-channels a,
section.wrap footer.wonit-footer .wonit-footer-channels span {
  display: inline; float: none; margin: 0; padding: 0; color: #999; font-size: 14px;
}
.wonit-footer .wonit-footer-copyright { font-weight: 500; margin: 0; color: #888; font-size: 14px; line-height: 1.8; white-space: nowrap; }
@media (max-width: 768px) {
  section.wrap footer.wonit-footer { padding: 32px 24px 48px; }
  .wonit-footer .wonit-footer-top,
  .wonit-footer .wonit-footer-bottom { flex-direction: column; align-items: flex-start; gap: 24px; }
  .wonit-footer .wonit-footer-links { gap: 16px 24px; }
}

section.wrap footer.wonit-footer .wonit-footer-links { padding: 0; margin: 0; }
section.wrap footer.wonit-footer address.wonit-footer-details p { padding-left: 0; }
section.wrap footer.wonit-footer address.wonit-footer-details p::before,
section.wrap footer.wonit-footer address.wonit-footer-details p::after { display: none; }

section.wrap footer.wonit-footer,
section.wrap footer.wonit-footer * { letter-spacing: 0 !important; }

/* Public pages: keep text and native form controls on the same web font.
   Pseudo-elements retain their separate icon-font declarations. */
section.wrap,
section.wrap * {
  font-family: "Pretendard", sans-serif !important;
}

/* Full-width footer background; include padding in the declared width. */
section.wrap #section5 {
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
section.wrap footer.wonit-footer {
  left: 0;
  width: 100%;
  max-width: none;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Reserve only the real scrollbar edge, never a blank left gutter. */
html { scrollbar-gutter: stable !important; }

/* Shared public-page outer and inner wrappers. */
section.wrap header.site-header .header-inner {
  width: 100%;
  max-width: 1920px;
  min-width: 0;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
section.wrap header.site-header .mega-inner { max-width: 1480px; }
section.wrap footer.wonit-footer { padding-left: 20px; padding-right: 20px; }
section.wrap footer.wonit-footer .wonit-footer-inner {
  width: 100%; max-width: 1440px; min-width: 0; margin: 0 auto;
}
@media (max-width: 900px) {
  section.wrap header.site-header .header-inner,
  body.wonit-mobile-nav section.wrap header.site-header .header-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Keep the desktop navigation within the wrapper before mobile navigation. */
@media (min-width: 901px) and (max-width: 1200px) {
  section.wrap header.site-header .header-inner {
    padding-left: 20px; padding-right: 20px; gap: 20px;
  }
  section.wrap header.site-header .header-inner nav.gnb { min-width: 0; }
  section.wrap header.site-header .header-inner nav.gnb ul.depth1 { gap: 8px; }
  section.wrap header.site-header .depth1-link { font-size: 16px; padding: 12px 8px; }
  section.wrap header.site-header .header-util { gap: 10px; font-size: 14px; }
  section.wrap header.site-header .util-btn-contact { padding: 8px 14px; }
}

/* Subpages: wide visual, centered content capped at 1440px. */
.wrap:has(.sub_head) { --sub-page-gutter: 40px; }
.wrap .sub_head {
  width: calc(100% - var(--sub-page-gutter) * 2);
  max-width: calc(1920px - var(--sub-page-gutter) * 2);
  min-width: 0; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
.wrap .sub_content {
  width: calc(100% - var(--sub-page-gutter) * 2); max-width: 1440px;
  min-width: 0; margin-left: auto; margin-right: auto; box-sizing: border-box;
}
@media (max-width: 1440px) { .wrap:has(.sub_head) { --sub-page-gutter: 20px; } }
/* Keep the fixed header opaque over scrolling content. */
html body header.site-header { background: #fff !important; opacity: 1; }


/* Footer spacing and typography refined against the LG CNS reference. */
section.wrap footer.wonit-footer { padding-top: 40px; padding-bottom: 64px; }
section.wrap footer.wonit-footer .wonit-footer-links { gap: 16px 24px; }
.wonit-footer .wonit-footer-links a { font-size: 16px; line-height: 26px; }
.wonit-footer .wonit-footer-contact { height: 48px; padding: 0 24px; font-size: 16px; line-height: 26px; }
section.wrap footer.wonit-footer address.wonit-footer-details p,
section.wrap footer.wonit-footer .wonit-footer-channels a,
section.wrap footer.wonit-footer .wonit-footer-channels span,
.wonit-footer .wonit-footer-copyright { font-size: 15px; line-height: 26px; }
section.wrap footer.wonit-footer .wonit-footer-channels { padding-top: 8px; gap: 4px 24px; }
@media (max-width: 768px) {
  section.wrap footer.wonit-footer { padding-top: 32px; padding-bottom: 48px; }
  .wonit-footer .wonit-footer-top, .wonit-footer .wonit-footer-bottom { gap: 20px; }
}


/* Smaller type within the header contact pill. */
section.wrap header.site-header .util-btn-contact { font-size: 16px !important; }

/* Serve Pretendard locally so CDN failures cannot change the site's type. */
@font-face { font-family: Pretendard; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/Pretendard-Regular.woff2') format('woff2'); }
@font-face { font-family: Pretendard; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/Pretendard-Medium.woff2') format('woff2'); }
@font-face { font-family: Pretendard; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/Pretendard-SemiBold.woff2') format('woff2'); }
@font-face { font-family: Pretendard; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/Pretendard-Bold.woff2') format('woff2'); }
/* Default tracking across the site. */
body, body section.wrap, body section.wrap * { letter-spacing: 0 !important; }

/* Emphasize only the active navigation item without dimming its neighbors. */
html body section.wrap header.site-header nav.gnb .depth1 > li > .depth1-link { color: #111 !important; opacity: 1 !important; font-weight: 500 !important; }
html body section.wrap header.site-header nav.gnb .depth1 > li.open > .depth1-link,
html body section.wrap header.site-header nav.gnb .depth1 > li > .depth1-link:hover,
html body section.wrap header.site-header nav.gnb .depth1 > li > .depth1-link[aria-current="page"] { font-weight: 600 !important; }
/* A short underline follows the hovered or expanded primary menu. */
html body section.wrap header.site-header nav.gnb .depth1 > li > .depth1-link::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 100%; height: 2px; background: #000; pointer-events: none;
  opacity: 0; transform: translateX(-50%) scaleX(.65);
  transform-origin: center; transition: opacity .18s ease, transform .18s ease;
}
html body section.wrap header.site-header nav.gnb .depth1 > li.open > .depth1-link::after,
html body section.wrap header.site-header nav.gnb .depth1 > li > .depth1-link:hover::after {
  opacity: 1; transform: translateX(-50%) scaleX(1);
}
/* Compact header wins over legacy two-row navigation rules. */
.wonit-compact-menu[hidden] { display:none !important; }
@media(max-width:1200px) {
 html body section.wrap header.site-header { height:72px !important; min-height:72px !important; }
 html body section.wrap header.site-header .header-inner { display:flex !important; width:100% !important; height:72px !important; min-height:72px !important; padding:0 24px !important; margin:0 !important; gap:16px !important; }
 html body section.wrap header.site-header .header-inner nav.gnb,html body section.wrap header.site-header .header-inner .header-util { display:none !important; }
 html body section.wrap header.site-header .logo { flex:1; min-width:0; margin:0 !important; }
 html body section.wrap header.site-header .wonit-nav-toggle { display:flex !important; flex-shrink:0; margin-left:auto; }
 html body section.wrap { padding-top:72px !important; }
}
@media(max-width:600px) { html body section.wrap header.site-header .header-inner { padding:0 16px !important; } }

@media(max-width:1200px) {
 html body section.wrap header.site-header { position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; }
 html body .wonit-compact-menu > nav { display:block !important; visibility:visible !important; position:static !important; width:100% !important; }
}

html body .wonit-compact-menu .wonit-nav-group a { text-align:left !important; }

/* The boxed W belongs only in the browser favicon, never in the header. */
html body section.wrap header.site-header #top_logo .wonit-header-symbol { display:none !important; }

/* Shared desktop dropdown grid: align the expanded menu to page content. */
@media(min-width:1201px) {
 html body section.wrap header.site-header .mega-inner { width:calc(100% - 80px) !important; max-width:1440px !important; margin:0 auto; padding:0; grid-template-columns:400px minmax(0,1fr); gap:0; }
 html body section.wrap header.site-header .mega-col:not(:empty) { padding:28px 40px 28px 0; }
 html body section.wrap header.site-header .mega-list a { padding:12px 20px; line-height:24px; }
 html body section.wrap header.site-header .mega-aside { padding:36px 48px; }
 html body section.wrap header.site-header .aside-title { line-height:32px; margin:0; }
}

@media(min-width:1201px) {
 html body section.wrap header.site-header .mega-inner {
  width:calc(100% - var(--wonit-menu-start,194px) - 20px) !important;
  max-width:none !important;
  margin-left:calc(var(--wonit-menu-start,194px) - 20px);
  margin-right:40px;
 }
}
@media(min-width:1201px) {
 html body section.wrap header.site-header .mega-aside { gap:8px; }
 html body section.wrap header.site-header .aside-title { font-size:28px; line-height:36px; }
 html body section.wrap header.site-header .aside-desc { margin:0; font-size:16px; line-height:26px; }
}

/* Content stays white; only bottom overscroll uses the footer canvas. */
html { background-color:#fff; }
html body, html body section.wrap { background-color:#fff; }
html.wonit-at-page-bottom { background-color:#080808; }
html body section.wrap header.site-header #top_logo { display:flex; align-items:center; gap:10px; }
html body section.wrap header.site-header #top_logo img.wonit-gradient-mark { display:block !important; width:42px !important; height:34px !important; max-width:none !important; max-height:none !important; padding:0 !important; filter:none !important; flex-shrink:0; }
@media(max-width:1200px){ html body section.wrap header.site-header #top_logo img.wonit-gradient-mark { width:34px !important; height:28px !important; } html body section.wrap header.site-header #top_logo { gap:8px; } }
html body section.wrap header.site-header #top_logo { width:auto !important; min-width:0; }
html body section.wrap header.site-header #top_logo img { position:static !important; transform:none !important; margin:0 !important; }
html body section.wrap header.site-header #top_logo { height:auto !important; overflow:visible !important; line-height:0 !important; }
html body section.wrap header.site-header #top_logo img:not(.wonit-gradient-mark) { width:99px !important; height:auto !important; max-height:none !important; object-fit:contain !important; clip:auto !important; clip-path:none !important; }

html body section.wrap header.site-header #top_logo.wonit-text-wordmark { display:block !important; font-family:Arial,Helvetica,sans-serif; font-size:32px !important; font-weight:900; line-height:1 !important; letter-spacing:-1.2px; color:#000; }
@media(max-width:1200px){ html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:28px !important; } }

html body section.wrap header.site-header #top_logo.wonit-text-wordmark { display:flex !important; align-items:center; gap:10px; }

html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:30px !important; }
@media(max-width:1200px){ html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:26px !important; } }

html body section.wrap header.site-header #top_logo > img:not(.wonit-gradient-mark) { display:none !important; }
html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:28px !important; }
@media(max-width:1200px){ html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:24px !important; } }
/* Compact, vertically centered brand lockup. */
html body section.wrap header.site-header #top_logo.wonit-text-wordmark { display:flex !important; align-items:center !important; font-size:24px !important; line-height:1 !important; gap:10px; }
html body section.wrap header.site-header #top_logo img.wonit-gradient-mark { width:37.333px !important; height:28px !important; object-fit:contain; }
html body section.wrap header.site-header #top_logo.wonit-text-wordmark > span { display:block; line-height:1; }
html body section.wrap header.site-header #top_logo img.wonit-gradient-mark { width:34.667px !important; height:26px !important; }
html body section.wrap header.site-header #top_logo.wonit-text-wordmark { font-size:26px !important; }
/* Optical alignment of the wordmark against the rounded symbol. */
html body section.wrap header.site-header #top_logo.wonit-text-wordmark > span { transform:translateY(.5px); }

/* Separate main and subpage desktop grids, matching the reference geometry. */
@media(min-width:1201px){
 html body section.wrap header.site-header .header-inner { width:100% !important; max-width:1480px !important; margin:0 auto !important; padding-left:20px !important; padding-right:20px !important; }
 html.wonit-home-grid body section.wrap header.site-header .header-inner { max-width:1920px !important; padding-left:40px !important; padding-right:40px !important; }
 html body section.wrap header.site-header .mega-inner { width:calc(100% - 40px) !important; max-width:1440px !important; margin:0 auto !important; padding:0 !important; grid-template-columns:360px minmax(0,1fr); gap:64px; }
 html.wonit-home-grid body section.wrap header.site-header .mega-inner { width:100% !important; max-width:1920px !important; padding:0 40px !important; }
 html body section.wrap header.site-header .mega-aside { padding:36px 0 !important; }
 html body section.wrap header.site-header .mega-col:not(:empty) { padding:28px 0 !important; }
}

/* Hide retired navigation immediately, before DOM-ready cleanup. */
html body section.wrap header.site-header .gnb .depth1>li:has(>.depth1-link[href="/community/notice"]),
html body section.wrap header.site-header .header-util>a[href^="/company/"] { display:none !important; }