@charset "utf-8";

/* ==================================================================
 * common_layout.css - Header / Partners / Footer
 * ================================================================== */

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    background: transparent;
    transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header:hover {
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(14, 76, 99, .10);
}
.site-header.is-fixed {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 rgba(14, 76, 99, .10);
}

.header-main {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    height: 82px;
}

.header-logo { display: flex; align-items: center; flex: none; }
.header-logo__img {
    width: auto; height: 54px;
    /* 원본 214x54 : 높이만 지정하고 가로는 비율대로 */
}
/* 히어로(어두운 배경) 위에서는 흰색 로고만 보인다 */
.header-logo__img--color { display: none; }

.header-status {
    display: inline-flex; align-items: center; gap: 6px;
    flex: none;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px; font-weight: 600;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
}
.header-status__dot + .header-status__text { margin-left: 2px; }
.header-status__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 0 rgba(95, 194, 222, .7);
    animation: statusPulse 2.2s infinite;
}
@keyframes statusPulse {
    70%  { box-shadow: 0 0 0 8px rgba(95, 194, 222, 0); }
    100% { box-shadow: 0 0 0 0 rgba(95, 194, 222, 0); }
}

/* 스크롤 시 : 헤더가 흰 배경으로 전환 → 컬러 로고로 교체 */
.site-header.is-fixed .header-logo__img--white { display: none; }
.site-header.is-fixed .header-logo__img--color { display: block; }
.site-header.is-fixed .header-status {
    color: var(--c-primary);
    background: var(--c-accent-soft);
    box-shadow: none;
}

/* ---------- Partners ---------- */
.partners {
    padding: 44px 0;
    background: var(--c-bg-soft);
    border-top: 1px solid var(--c-line);
}
.partners__label {
    margin-bottom: 20px;
    font-family: var(--font-en);
    font-weight: 700; letter-spacing: .16em;
    color: var(--c-sub);
    text-align: center;
    text-transform: uppercase;
}
.partners__list {
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 16px 44px;
}
.partners__item {
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 600;
    color: var(--c-body);
    filter: grayscale(1); opacity: .68;
    transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.partners__item:hover { filter: none; opacity: 1; }
.partners__item img { width: auto; height: 54px; object-fit: contain; }
.partners__mark { width: 34px; height: 34px; color: var(--c-primary); }
.partners__mark svg { width: 100%; height: 100%; }

/* ---------- Footer ---------- */
.site-footer {
    padding: 62px 0 54px;
    color: rgba(255, 255, 255, .72);
    background: var(--c-primary-dark);
    font-size: 0.95rem;
}

.footer-top {
    display: flex; flex-wrap: wrap;
    align-items: flex-start; justify-content: space-between;
    gap: 28px;
    padding-bottom: 32px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.footer-brand__name {
    font-size: 22px; font-weight: 700; letter-spacing: 0;
    color: #fff;
}
.footer-brand__slogan { margin-top: 6px; color: var(--c-accent); }

.footer-contact { text-align: right; }
.footer-contact__label {
    font-family: var(--font-en);
    font-weight: 700; letter-spacing: .14em;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 8px;
}
.footer-contact__mail a { font-size: 18px; font-weight: 700; color: #fff; }
.footer-contact__mail a:hover { color: var(--c-accent); }
.footer-contact__tel a { color: rgba(255, 255, 255, .82); }
.footer-contact__tel a:hover { color: var(--c-accent); }

.footer-bottom { padding-top: 28px; }
.footer-info {
    display: flex; flex-wrap: wrap; gap: 8px 28px;
    margin-bottom: 10px;
}
.footer-info li { display: flex; align-items: center; gap: 8px; }
.footer-info span {
    font-size: 12px; font-weight: 700;
    color: rgba(255, 255, 255, .45);
    letter-spacing: 0.03rem;
}
.footer-address { color: rgba(255, 255, 255, .62); }
.footer-copy {
    margin-top: 18px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .4);
    letter-spacing: 0.02rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .footer-contact { text-align: left; }
}
@media (max-width: 640px) {
    .header-main { height: 66px; }
    .header-logo__img { height: 45px; }
    .header-status { padding: 6px 12px; font-size: 11.5px; }
    .header-status__dot { width: 6px; height: 6px; }

    .partners { padding: 34px 0; }
    .partners__list { gap: 14px 26px; }
    .partners__item img { height: 34px; }

    .site-footer { padding: 46px 0 40px; }
    .footer-info { gap: 6px 18px; }
}
/* 좁은 화면에서는 오픈 예정일을 접어 헤더가 넘치지 않게 한다 */
@media (max-width: 560px) {
    .header-status__date { display: none; }
}
@media (max-width: 360px) {
    .header-status { display: none; }
}


/* ==================================================================
 * GNB (정식 메인 / 서브 헤더)
 * 마크업 구조는 kyungjin-html 헤더와 동일하다.
 *   header.site-header.fixed-top > #header > .navi-bar > .d-flex
 * 임시 사이트(intro.php)는 위쪽 .header-main 계열을 쓰므로 서로 겹치지 않는다.
 * ================================================================== */

#header .navi-bar {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
#header .navi-bar > .d-flex { height: 82px; }

/* ---------- 로고 ---------- */
.logo-area { margin: 0; font-size: 0; flex: none; }
.site-logo {
    display: flex; align-items: center; gap: 12px;
    color: #fff;
    transition: color .3s var(--ease);
}
.site-logo__mark { width: 38px; height: 38px; flex: none; color: var(--c-accent); }
.site-logo__mark svg { width: 100%; height: 100%; }
.site-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.site-logo__name { font-size: 24px; font-weight: 700; }
.site-logo__sub {
    font-size: 10px; font-weight: 600; letter-spacing: .22em;
    opacity: .72;
}

/* ---------- 1depth ---------- */
#navi-wrap > ul { gap: 8px; }
#navi-wrap .nav-item > div { position: relative; }

#navi-wrap .dept01-link {
    display: block;
    padding: 0 22px;
    line-height: 82px;
    font-size: 17px; font-weight: 600;
    color: #fff;
    white-space: nowrap;
    transition: color .25s var(--ease);
}
#navi-wrap .dept01-link span { position: relative; display: inline-block; }
/* 밑줄이 가운데에서 퍼지는 형태 */
#navi-wrap .dept01-link span::after {
    content: '';
    position: absolute; left: 50%; bottom: 26px;
    width: 0; height: 2px;
    background: var(--c-accent);
    transform: translateX(-50%);
    transition: width .3s var(--ease);
}
#navi-wrap .nav-item:hover .dept01-link span::after,
#navi-wrap .nav-item.is-open .dept01-link span::after,
#navi-wrap .nav-item.is-active .dept01-link span::after { width: 100%; }

/* ---------- 2depth ---------- */
#navi-wrap .nav-item > div > ul {
    position: absolute; left: 50%; top: 100%;
    z-index: 5;
    min-width: 100%;
    padding: 10px 0;
    transform: translateX(-50%) translateY(10px);
    background: #fff;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s var(--ease);
}
#navi-wrap .nav-item:hover > div > ul,
#navi-wrap .nav-item.is-open > div > ul {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
#navi-wrap .sub-link {
    display: block;
    padding: 10px 24px;
    font-size: 15px;
    color: var(--c-sub);
    white-space: nowrap;
    transition: color .2s var(--ease), background .2s var(--ease);
}
#navi-wrap .sub-link:hover,
#navi-wrap .sub-link:focus-visible {
    color: var(--c-primary);
    background: var(--c-bg-soft);
}

/* ---------- 전체메뉴 버튼 (햄버거) ---------- */
.all-cate {
    display: flex; flex-direction: column; justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 9px;
}
.all-cate span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: background .3s var(--ease);
}
.all-cate span:nth-child(2) { width: 70%; }

/* ---------- 스크롤 시 : 헤더가 흰 배경으로 전환 ---------- */
.site-header.is-fixed .site-logo { color: var(--c-primary); }
.site-header.is-fixed .site-logo__mark { color: var(--c-accent); }
.site-header.is-fixed #navi-wrap .dept01-link { color: var(--c-ink); }
.site-header.is-fixed .all-cate span { background: var(--c-ink); }


/* ==================================================================
 * 전체메뉴 모달
 * ================================================================== */
.gnb-all {
    position: fixed; inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility .35s var(--ease);
}
.gnb-all.is-open { visibility: visible; }

.gnb-all__dim {
    position: absolute; inset: 0;
    background: rgba(8, 48, 63, .55);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.gnb-all.is-open .gnb-all__dim { opacity: 1; }

.gnb-all__panel {
    position: absolute; right: 0; top: 0;
    display: flex; flex-direction: column;
    width: min(420px, 88vw); height: 100%;
    background: #fff;
    box-shadow: -12px 0 40px rgba(8, 48, 63, .18);
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    overflow-y: auto;
}
.gnb-all.is-open .gnb-all__panel { transform: none; }

.gnb-all__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 26px 28px 22px;
    border-bottom: 1px solid var(--c-line);
}
.gnb-all__title { font-size: 18px; font-weight: 700; color: var(--c-ink); }
.gnb-all__close { width: 40px; height: 40px; display: grid; place-items: center; color: var(--c-sub); }
.gnb-all__close svg { width: 22px; height: 22px; }

.gnb-all__body { flex: 1; padding: 22px 28px 30px; }
.gnb-all__group + .gnb-all__group { margin-top: 26px; }
.gnb-all__dept1 {
    margin-bottom: 10px;
    font-size: 17px; font-weight: 700;
    color: var(--c-primary);
}
.gnb-all__dept2 li + li { margin-top: 2px; }
.gnb-all__dept2 a {
    display: block;
    padding: 8px 0;
    font-size: 15px;
    color: var(--c-sub);
    transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.gnb-all__dept2 a:hover { color: var(--c-primary); padding-left: 6px; }

.gnb-all__foot {
    display: flex; flex-direction: column; gap: 4px;
    padding: 22px 28px 30px;
    border-top: 1px solid var(--c-line);
    font-size: 14px;
    color: var(--c-sub);
}
.gnb-all__foot a:hover { color: var(--c-primary); }

/* 모달이 열려 있는 동안 뒤 페이지 스크롤 잠금 */
body.is-menu-open { overflow: hidden; }


/* ==================================================================
 * GNB Responsive
 * xl(1200px) 미만에서는 1depth 를 감추고 전체메뉴로 대체한다.
 * (마크업의 d-none d-xl-block 과 동일한 기준)
 * ================================================================== */
@media (max-width: 1199.98px) {
    #header .navi-bar > .d-flex { height: 72px; }
    .site-logo__name { font-size: 21px; }
    .site-logo__mark { width: 34px; height: 34px; }
}
@media (max-width: 640px) {
    #header .navi-bar > .d-flex { height: 62px; }
    .site-logo__name { font-size: 18px; }
    .site-logo__mark { width: 30px; height: 30px; }
    .gnb-all__head { padding: 20px 22px 18px; }
    .gnb-all__body { padding: 20px 22px 26px; }
    .gnb-all__foot { padding: 18px 22px 24px; }
}