@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ================================================
   HEADER
   ================================================ */

.site-header {position: fixed;top: 0;left: 0;right: 0;z-index: 100;background: #ffffff;transition: top 0.3s ease;}
.site-header.is-hidden {top: calc(var(--site-header-height) * -1 - 2px);}

/* 헤더 내부 행 */
.layout-header {display: flex;align-items: center;justify-content: space-between;height: var(--site-header-height);}

/* 로고 + 데스크탑 nav 묶음 */
.header-left {display: flex;align-items: center;}

/* 로고 */
.header-logo {display: block;flex-shrink: 0;}
.header-logo img {display: block;width: 210px;object-fit: contain;}

@media all and (max-width: 1440px) {
    .header-logo img { width: 172px; }
}

/* ---- 데스크탑 메가 메뉴 nav ---- */
.nav-mega-wrap {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.nav-mega-wrap > div {display: flex;align-items: center;gap: 40px;height: 100px;}
.nav-mega-wrap > div > a {font-size: 17px;font-weight: 500;color: var(--color-neutral-7);white-space: nowrap;transition: color 0.15s;}
.nav-mega-wrap > div > a:hover {color: var(--color-neutral-9);}

@media all and (max-width: 1440px) {
    .nav-mega-wrap > div { gap: 30px; }
    .nav-mega-wrap > div > a { font-size: 15px; }
}

@media all and (max-width:1100px) {
    .nav-mega-wrap{left: 56%;}
}

@media all and (max-width: 1023px) {
    .nav-mega-wrap { display: none; }
}

/* ---- 헤더 우측 아이콘 영역 ---- */
.header-icons {display: flex;align-items: center;gap: 16px;}
.header-icon-btn {display: inline-flex;align-items: center;justify-content: center;flex-shrink: 0;color: var(--color-neutral-7);cursor: pointer;transition: color 0.15s;}
.header-icon-btn:hover {color: var(--color-neutral-9);}
.header-icon-btn svg {display: block;width: 18px;height: 18px;}
.header-cta-btn {display: inline-flex;align-items: center;flex-shrink: 0;height: 32px;padding: 0 16px;border-radius: 999px;background: var(--color-primary);font-size: 14px;font-weight: 500;color: #ffffff;white-space: nowrap;transition: opacity 0.15s;}
.header-cta-btn:hover {opacity: 0.88;}
.header-menu-btn {display: none;}

@media all and (max-width:1100px) {
    .header-cta-btn { display: none; }
}

@media all and (max-width: 1023px) {
    .header-menu-btn { display: inline-flex; }
    .header-icon-btn:not(.header-menu-btn),
    .header-icon-btn svg {width: 24px;height: 24px;}
    .header-cta-btn { display: none; }
}


/* ================================================
   MEGA PANEL (데스크탑 드롭다운)
   ================================================ */

.mega-panel {position: absolute;left: 0;right: 0;top: 100%;z-index: 30;border-bottom: 1px solid var(--color-neutral-2);background: #ffffff;visibility: hidden;pointer-events: none;opacity: 0;transition: opacity 0.15s ease, visibility 0s linear 0.15s;margin-top: -8px;padding-top: 8px;}
.mega-panel::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 8px;}
.site-header.mega-open .mega-panel {visibility: visible;pointer-events: auto;opacity: 1;transition: opacity 0.15s ease, visibility 0s linear 0s;}

@media all and (max-width: 1023px) {
    .mega-panel { display: none; }
}

.mega-panel-inner {border-top: 1px solid var(--color-neutral-2);padding: 40px var(--size-wrap-padding) 70px;}
.mega-panel-body {display: flex;align-items: flex-start;justify-content: center;gap: 80px;}

@media all and (max-width: 1640px) {
    .mega-panel-body { gap: 64px; }
}

/* 카테고리 그룹 (자식 있는 항목) */
.mega-panel-group {display: flex;flex-direction: column;gap: 12px;min-width: 0;}
.mega-panel-group-title {font-size: 14px;font-weight: 600;color: var(--color-neutral-9);}
.mega-panel-link {font-size: 14px;color: var(--color-neutral-5);transition: color 0.15s;}
.mega-panel-link:hover {color: var(--color-neutral-9);}

/* 단독 항목 (자식 없는 항목) — 오른쪽 aside */
.mega-panel-aside {display: flex;flex-direction: column;gap: 12px;flex-shrink: 0;padding-left: 20px;position: relative;height: -webkit-fill-available;}
.mega-panel-aside::before {content: '';position: absolute;left: 0;top: 0;width: 1px;height: 100%;background: var(--color-neutral-2);}
.mega-panel-aside-link {font-size: 14px;font-weight: 600;color: var(--color-neutral-9);transition: color 0.15s;}
.mega-panel-aside-link:hover {color: var(--color-neutral-7);}

/* ================================================
   MOBILE DRAWER
   ================================================ */

.header-nav-drawer {position: fixed;inset: 0;z-index: 200;visibility: hidden;pointer-events: none;opacity: 0;transition: opacity 0.15s ease, visibility 0s linear 0.15s;}
.header-nav-drawer--open {visibility: visible;pointer-events: auto;opacity: 1;transition: opacity 0.15s ease, visibility 0s linear 0s;}
.header-nav-drawer__backdrop {position: absolute;inset: 0;background: rgba(0, 0, 0, 0.4);}
.header-nav-drawer__panel {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: calc(100% - var(--size-wrap-padding) * 2);height: calc(100% - var(--size-wrap-padding) * 2);display: flex;flex-direction: column;background: #ffffff;border-radius: 5px;overflow: hidden;}
.header-nav-drawer__top {display: flex;align-items: center;justify-content: flex-end;padding: 18px 24px;font-size: 14px;border-bottom: 1px solid var(--color-neutral-2);flex-shrink: 0;}
.header-nav-drawer__close {display: inline-flex;align-items: center;gap: 4px;font-size: 14px;color: var(--color-neutral-6);cursor: pointer;}
.header-nav-drawer__close svg {flex-shrink: 0;width: 16px;height: 16px;}
.header-nav-drawer__nav {flex: 1;overflow-y: auto;padding: 30px 24px;}
.header-nav-drawer__nav::-webkit-scrollbar {display: none;}
.header-nav-drawer__list {display: flex;flex-direction: column;}

/* 링크 / 아코디언 트리거 공통 행 스타일 */
.header-nav-drawer__link,
.header-nav-drawer__btn {display: flex;align-items: center;justify-content: space-between;width: 100%;padding-block: 11px;font-size: 16px;font-weight: 400;line-height: 1.4;color: var(--color-neutral-6);text-align: left;cursor: pointer;}

/* 캐럿 아이콘 */
.header-nav-drawer__caret {display: flex;align-items: center;justify-content: center;}
.header-nav-drawer__caret svg{width: 14px;height: 14px;}
.header-nav-drawer__btn[aria-expanded="true"] .header-nav-drawer__caret {transform: rotate(180deg);}

/* 서브 목록 (아코디언 패널) */
.header-nav-drawer__sublist {display: none;flex-direction: column;padding-block: 10px;border-top: 1px solid var(--color-neutral-2);}
.header-nav-drawer__sublist.is-open {display: flex;}
.header-nav-drawer__sublink {display: block;padding: 8px 10px;font-size: 14px;font-weight: 400;line-height: 1.4;color: var(--color-neutral-4);transition: color 0.15s;}
.header-nav-drawer__sublink:hover {color: var(--color-neutral-9);}

/* ================================================
    FOOTER
   ================================================ */

.site-footer {background: var(--color-primary);padding: 40px 0 35px;}
.site-footer-inner {color: var(--color-neutral-2);position: relative;}
.site-footer-logo {position: absolute;top: 0;right: var(--size-wrap-padding);}
.site-footer-logo img {display: block;width: 115px;}
.site-footer-links {display: flex;gap: 24px;margin-bottom: 16px;}
.site-footer-links a {color: var(--color-neutral-1);font-size: 13px;display: block;line-height: 1.6;}
.site-footer-meta {display: flex;align-items: center;gap: 12px;margin-bottom: 4px;}
.site-footer-meta span {display: block;font-weight: 300;font-size: 11px;line-height: 1.6;white-space: nowrap;position: relative;}
.site-footer-meta span::before {content: "";width: 1px;height: 8px;background: var(--color-neutral-2);position: absolute;top: 50%;right: -6px;transform: translateY(-50%);}
.site-footer-meta span:last-child::before {display: none;}
.site-footer-copy {font-size: 11px;line-height: 1.6;font-weight: 300;}

@media all and (max-width:767px) {
    .site-footer{padding: 40px 0 45px;}
    .site-footer-logo {position: static;margin-bottom: 37px;}
    .site-footer-links{margin-bottom: 50px;flex-wrap: wrap;gap: 8px 30px;}
    .site-footer-links a{width: 28%;}
    .site-footer-meta{margin-bottom: 24px;}
}

/* ================================================
   BUTTONS (공통)
   ================================================ */

.btn-primary,
.btn-secondary {display: inline-flex;align-items: center;justify-content: center;padding: 10px 20px;border-radius: 8px;font-size: 14px;font-weight: 500;transition: background-color 0.15s ease, border-color 0.15s ease;}
.btn-primary {border: 0;background-color: #111827;color: #ffffff;}
.btn-primary:hover { background-color: #1f2937; }
.btn-secondary {border: 1px solid #d1d5db;background-color: #ffffff;color: #111827;}
.btn-secondary:hover { background-color: #f3f4f6; }



/*  */
.content-inner{display: flex;flex-direction: column;gap: 20px;line-height: 1.4;}
.content-body {display: flex;flex-direction: column;gap: 16px;max-width: 577px;}
.content-label {font-size: 18px;font-weight: 600;text-transform: uppercase;color: var(--color-primary);font-family: var(--font-point)}
.content-title {font-size: 40px;font-weight: 600;color: var(--color-neutral-9);}
.content-title .tit-sub {display: inline-block;color: var(--color-primary);}
.content-body > p {font-size: 18px;color: var(--color-neutral-7);}

.more-btn {display: inline-flex;align-items: center;justify-content: center;align-self: flex-start;gap: 8px;padding: 12px 30px;border-radius: 999px;background: var(--color-neutral-1);font-size: 16px;line-height: 1.4;color: var(--color-primary);white-space: nowrap;cursor: pointer;}
.more-btn--primary {background: var(--color-primary);color: var(--color-neutral-1);}

@media all and (max-width:1440px) {
    .content-inner{gap: 15px;}
    .content-label{font-size: 16px;}
    .content-title {font-size: 32px;}
    .content-body > p{font-size: 16px;}
}

@media all and (max-width: 1024px) {
    .more-btn {width: max-content;margin-top: 32px;padding: 9px 25px;font-size: 14px;justify-content: center;}
    .more-btn svg{width: 14px;height: 14px;}
}

@media all and (max-width: 767px) {
    .content-inner{gap: 10px;}
    .content-title{font-size: 28px;}
    .content-body > p {font-size: 14px;}
}