@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.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; gap: 12px; color: #fff; }
.header-logo__mark { width: 38px; height: 38px; flex: none; color: var(--c-accent); }
.header-logo__mark svg { width: 100%; height: 100%; }
.header-logo__text { display: flex; flex-direction: column; line-height: 1.15; }
.header-logo__name { font-size: 24px; font-weight: 700; }
.header-logo__sub {
    font-family: var(--font-en);
    font-size: 10px; font-weight: 600; letter-spacing: .22em;
    opacity: .72;
}

.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 { color: var(--c-primary); }
.site-header.is-fixed .header-logo__mark { color: var(--c-accent); }
.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: 800; letter-spacing: -.045em;
    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);
}
.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;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .footer-contact { text-align: left; }
}
@media (max-width: 640px) {
    .header-main { height: 66px; }
    .header-logo__name { font-size: 18px; }
    .header-logo__mark { width: 32px; height: 32px; }
    .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; }
}