@charset "utf-8";
html:has(.header.open),body:has(.header.open) {overflow-y: hidden;}
.inner {width: calc(100% - 100px); margin-inline: auto; max-width: 1520px;}

/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
section {width: 100%; padding-block: var(--space-100); overflow: hidden; background-color: var(--color-white);}
section.dark {background-color: var(--color-bg2);}

.logo {display: flex; align-items: center; justify-content: center;}
.logo.white img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.footer .logo,
.header .logo {height: var(--fs-50); width: fit-content;}
.footer .logo a,
.header .logo a {height: 100%;}
.footer .logo img,
.header .logo img {transition: filter 0.2s; height: 100%; object-fit: contain;     object-position: left center;}

.header {z-index: 999; position: sticky; top: 0; left: 0; width: 100%; transition: background-color 0.2s; background-color: var(--color-white);}
.header > .inner {max-width: 1720px; height: var(--header-height); display: flex; align-items: center; justify-content: space-between;}

.tab-list.lang-tab {display: flex; align-items: center;}
.tab-list.lang-tab .tab {padding: 2px 10px; font-size: var(--fs-16); line-height: 1.7; color: var(--color-font4); background-color: transparent;}
.tab-list.lang-tab .tab.active {color: var(--color-font1); background-color: transparent; pointer-events: none;}
.tab-list.lang-tab .tab:not(.active):hover {color: var(--color-font2);}
.tab-list.lang-tab .tab + .tab {position: relative;}
.tab-list.lang-tab .tab + .tab::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1px; height: var(--fs-12); background-color: var(--color-font4);}

.header .gnb {display: none; height: 100%;}
.header .gnb > ul {display:flex; align-items:center; height: 100%;}
.header .gnb > ul > li {position:relative; padding-inline: var(--fs-20); height: 100%; display: flex; align-items: center; justify-content: center;}
.header .gnb > ul > li > a {position:relative; display:inline-block; padding: 4px var(--fs-12); font-size: var(--fs-16); line-height: 1.7; color:var(--color-font2); transition:color 0.2s;}
.header .gnb > ul > li > a::after {content:''; position:absolute; left:0; bottom: 0; width:100%; height:2px; background-color:var(--color-static1); transform:scaleX(0); transform-origin:center; transition:transform 0.2s;}
.header .gnb > ul > li.active > a,
.header .gnb > ul > li > a:hover,
.header .gnb > ul > li.has-submenu.open > a {color:var(--color-static1);}
.header .gnb > ul > li.active > a::after,
.header .gnb > ul > li > a:hover::after,
.header .gnb > ul > li.has-submenu.open > a::after {transform:scaleX(1);}

.header .gnb .gnb-submenu-wrapper {display:none; z-index:10; position:fixed; width: 100vw; top: var(--header-height); left: 0; border:1px solid var(--color-border1); background-color:var(--color-white); box-shadow:var(--box-shadow);}
.header .gnb .gnb-submenu-wrapper .inner {padding-block: var(--fs-50); height: fit-content; display: flex; align-content: flex-start; justify-content: center; column-gap: var(--fs-50);}
.header .gnb .gnb-submenu-content {width: 400px; display: flex; flex-direction: column; row-gap: var(--fs-14);}
.header .gnb .gnb-submenu-content .eyebrow {color: var(--color-static1);}
.header .gnb .gnb-submenu-wrapper > .inner {transition: opacity .15s;}
.header .gnb .gnb-submenu-wrapper.swap > .inner {opacity: 0;}

.header .gnb .gnb-submenu {display:flex; flex-direction:column; align-items:stretch; row-gap: 10px;}
.header .gnb .gnb-submenu li {width:100%;}
.header .gnb .gnb-submenu > li a {display:block; width:100%; padding: 8px var(--fs-16); font-size: var(--fs-16); line-height: 1.7; white-space:nowrap; color:var(--color-font1); transition:color 0.2s, background-color 0.2s; border-bottom: 1px solid var(--color-border1);}
.header .gnb .gnb-submenu li.active > a,
.header .gnb .gnb-submenu > li a:hover {color:var(--color-static1);}
.header .gnb .gnb-submenu li.active > a {position: relative;}
.header .gnb .gnb-submenu li.active > a::before {content: ''; width: 4px; height: var(--fs-26); position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: var(--color-static1);}

.header .gnb .submenu-info {display: flex; flex-direction: column; row-gap: var(--fs-18); width: 340px;}
.header .gnb .submenu-info .txt-wrap {padding-left: var(--fs-20); border-left: 4px solid var(--color-static1);}

.header .gnb .gnb-depth3-submenu { display: none;}
.header .gnb .gnb-depth3-submenu li {}
.header .gnb .gnb-depth3-submenu > li a {border-bottom: 0; transition: color 0.2s; position: relative; min-width: auto; padding: 8px var(--fs-30); font-size: var(--fs-16); line-height: 1.7; background-color: var(--color-bg1); }
.header .gnb .gnb-depth3-submenu a::before {transition: background-color 0.2s; content: ''; width: 4px; height: var(--fs-28); position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: transparent;}
.header .gnb .gnb-depth3-submenu li.active > a,
.header .gnb .gnb-depth3-submenu a:hover { color: var(--color-static1);}
.header .gnb .gnb-depth3-submenu li.active > a::before,
.header .gnb .gnb-depth3-submenu a:hover::before { background-color: var(--color-static1);}
.header .gnb .gnb-submenu > li.has-depth3 a { display: flex; justify-content: space-between; align-items: center; }
.header .gnb .gnb-submenu > li.has-depth3 > a::after {transition: transform 0.3s; content: ''; width: 20px; height: 20px; display: inline-block; background-image: url(/img/gnb-arrow.svg); background-repeat: no-repeat; background-position: center center;}
.header .gnb .gnb-submenu > li.has-depth3.open > a::after {transform: rotate(180deg);}

.header .mobile-menu-btn {width: 32px; height: 32px; position:relative; border-radius: 6px; border: 1px solid var(--color-border1);}
.header .mobile-menu-btn span,
.header .mobile-menu-btn span:before,
.header .mobile-menu-btn span:after {display:block; position:absolute; left:50%; width: 14px; height:2px; border-radius: 2px; background-color: var(--color-static1); transition: transform 0.3s ease, top 0.3s ease, background-color 0.3s ease;}
.header .mobile-menu-btn span {left: 50%; top:50%; transform:translate(-50%,-50%);}
.header .mobile-menu-btn span:before,
.header .mobile-menu-btn span:after {content:''; transform:translate(-50%,-50%);}
.header .mobile-menu-btn span:before {top:-4px;}
.header .mobile-menu-btn span:after {top:6px;}
.header .mobile-menu-btn.open span {background:transparent !important;}
.header .mobile-menu-btn.open span:before {top:0; transform:translate(-50%,-50%) rotate(45deg);}
.header .mobile-menu-btn.open span:after {top:0; transform:translate(-50%,-50%) rotate(-45deg);}

.header .mobile-menu {z-index: 998; position: fixed; top: var(--header-height); left: 100%; width: 100%; max-width: 500px; height: calc(100dvh - var(--header-height)); display: flex; flex-direction: column; overflow: hidden; visibility: hidden; background-color: var(--color-white); transition: transform 0.3s ease, visibility 0.3s ease;}
.header .mobile-menu-bg {display: none; position: fixed; top: var(--header-height); left: 0; width: 100%; height: calc(100dvh - var(--header-height)); background-color: rgb(var(--rgb-black) / 40%); z-index: 997;}
.header.open .mobile-menu {transform: translateX(-100%); visibility: visible;}
.header.open .mobile-menu-bg {display: block;}
.header .mobile-menu-scroll {flex: 1; overflow-y: auto; overscroll-behavior: contain; display: block;}
.header .mobile-menu-list {display: flex; flex-direction: column;}
.header .mobile-menu-item {width: 100%; display: flex; align-items: center; justify-content: space-between; border: 0; background-color: transparent; text-align: left; cursor: pointer;}
.header .mobile-menu-item:hover .mobile-menu-link {color: var(--color-font2);}
.header .mobile-menu-link {transition: color 0.2s; display: flex; align-items: center; justify-content: space-between; flex: 1; padding: 16px 20px; font-size: 18px; font-weight: 600; line-height: 1.8; color: var(--color-font1);}

/* 화살표: 하위 메뉴가 있는 항목에만 노출 */
.header .mobile-menu-list > li.has-submenu > .mobile-menu-item > .mobile-menu-link::after,
.header .mobile-submenu > li.has-submenu > .mobile-menu-item::after {content: ''; flex-shrink: 0; width: 14px; height: 14px; background-image: url(/img/nav-arrow.svg); background-repeat: no-repeat; background-position: center center; transition: transform 0.3s ease, filter 0.3s ease;}

/* 회전은 .open만으로 판단 (.active와 분리) */
.header .mobile-menu-list > li.has-submenu:not(.open) > .mobile-menu-item > .mobile-menu-link::after,
.header .mobile-submenu > li.has-submenu:not(.open) > .mobile-menu-item::after {transform: rotate(180deg); filter: brightness(0) saturate(100%) invert(69%) sepia(9%) saturate(573%) hue-rotate(178deg) brightness(94%) contrast(89%);}

.header .mobile-menu .contact-btn {display: none; width: 100%; margin-top: 10px;}

.header .mobile-submenu {display: none; background-color: var(--color-bg1);}
.header .mobile-submenu li {border: 0;}
.header .mobile-submenu .mobile-menu-item,
.header .mobile-submenu a {display: block; padding: 14px 20px 14px 40px; font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--color-font1); background-color: var(--color-bg1); transition: color 0.2s, background-color 0.2s;}
.header .mobile-submenu .mobile-menu-item {display: flex; align-items: center; justify-content: space-between;}
.header .mobile-submenu .mobile-menu-item .nav-txt {color: var(--color-font1); transition: color 0.2s;}

.header .mobile-submenu .mobile-submenu {background-color: transparent;}
.header .mobile-submenu .mobile-submenu a {padding: 14px 60px; background-color: var(--color-bg4); font-size: var(--fs-16); line-height: 1.7; color: var(--color-font2);}

/* .active: 현재 위치 표시 전용 */
.header .mobile-menu-list > li.active > .mobile-menu-item > .mobile-menu-link,
.header .mobile-submenu li.active > a,
.header .mobile-submenu li.active > .mobile-menu-item > .nav-txt {color: var(--color-static1);}
.header .mobile-submenu li.active > a {position: relative; font-weight: 600;}


.footer {padding-block: var(--space-120); background-color: var(--color-bg3);}
.footer .footer-top {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--fs-40);}
.footer .footer-top .left {display: flex; flex-direction: column; align-items: flex-start; row-gap: var(--fs-20);}
.footer .footer-top .left .body-large {color: var(--color-font4);}
.footer .footer-top .right {display: flex; flex-direction: column; row-gap: var(--fs-12); align-items: flex-end;}
.footer .footer-top .right .body-large {color: var(--color-white);}
.footer .footer-top .right .logo-list {display: flex; align-items: center; column-gap: var(--fs-32);}
.footer .footer-top .right .logo-list .line {width: 1px; height: var(--fs-16); background-color: var(--color-border4); flex-shrink: 0;}
.footer .footer-bot {margin-top: var(--space-60); padding-top: var(--space-60); border-top: 1px solid var(--color-font2); display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--fs-40);}
.footer .footer-bot .body-small {color: var(--color-font3);}
.footer .footer-bot .admin-link {text-decoration: underline; color: var(--color-font5); justify-content: flex-end;}

@media screen and (min-width:1025px) {
    .header .gnb {display: block;}
    .header .mobile-menu-btn,
    .header.open .mobile-menu {display: none;}
}

@media screen and (min-width: 501px) {
    .header .mobile-menu {box-shadow: var(--box-shadow);}
}

@media screen and (max-width:1440px) {
    .inner {width: calc(100% - 80px);}
}

@media screen and (max-width:1280px) {
    .header .gnb > ul > li {padding-inline: 15px;}
}

@media screen and (max-width:1024px) {
    html,body {overflow-x: hidden;}
    .inner {width: calc(100% - 64px);}
    .header {position: fixed;}
    .container {padding-top: var(--header-height);}
    .footer .footer-top,
    .footer .footer-bot {flex-direction: column; row-gap: var(--space-60); align-items: flex-start;}
    .footer .footer-bot .admin-link {justify-content: flex-start;}
    .footer .footer-top .right {width: 100%;}
}

@media screen and (max-width:768px) {
    .inner {width: calc(100% - 48px);}
}

@media screen and (max-width: 480px) {
    .inner {width: calc(100% - 32px);}
    .footer .logo, .header .logo {height: 30px;}
    .footer .footer-top .right .logo-list {column-gap: 10px;}
    .footer .footer-top .right .logo-list img {height: 8vw; width: fit-content;}
}

@media screen and (max-width:375px) {
    .inner {width: calc(100% - 24px);}
}