/* layout.css - 페이지 뼈대: 헤더/푸터/컨테이너/섹션 */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site__main { flex: 1; }

.container { width: 100%; max-width: var(--container-width); margin: 0 auto; padding: 0 var(--space-4); }

/* 헤더 */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    min-height: var(--header-height); flex-wrap: wrap;
}
.site-header__brand { display: flex; align-items: center; gap: var(--space-2); color: inherit; }
.site-header__brand:hover { text-decoration: none; }
.site-header__logo { height: 36px; width: auto; display: block; }
.site-header__team {
    font-weight: 700; color: var(--color-brand);
    border-left: 1px solid var(--color-border); padding-left: var(--space-2);
}

.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.site-nav__link {
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
    color: var(--color-text); font-weight: 500;
}
.site-nav__link:hover { background: var(--color-bg-alt); text-decoration: none; }
.site-nav__lang { border: 1px solid var(--color-border); margin-left: var(--space-2); }
.site-nav__link.active { color: var(--color-brand); background: var(--color-brand-soft); }

/* 푸터 */
.site-footer { background: var(--color-dark-bg); color: var(--color-dark-text); padding: var(--space-5) 0; margin-top: var(--space-6); }
.site-footer a { color: var(--color-dark-text); text-decoration: underline; }
.site-footer__logo { height: 32px; width: auto; display: block; margin-bottom: var(--space-3); }
.site-footer__company { font-weight: 700; margin-bottom: var(--space-1); }
.site-footer__address { font-style: normal; margin-bottom: var(--space-1); }
.site-footer__contact { margin-bottom: var(--space-3); }
.site-footer__copy { font-size: var(--font-size-sm); margin: 0; opacity: 0.8; }

/* 섹션 */
.section { padding: var(--space-5) 0 0; }
.section__title { margin-bottom: var(--space-4); }

@media (max-width: 720px) {
    .container { padding: 0 var(--space-3); }
    .site-header__inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
}