/* ==========================================================================
   containers.css — 바디, 컨테이너, section, 상단바 레이아웃
   글래스모피즘 오버홀: 색·표면 토큰은 glass.css 가 정본이고,
   이 파일은 페이지 골격(폭·간격·상단바 배치)만 다룬다.

   media 기준 (기존 유지)
     최소치 360px
     @media (min-width: 576px)
     @media (min-width: 768px)
     @media (min-width: 992px)  // 여기서 부터 레이아웃 가로로 확장
     @media (min-width: 1200px)
   ========================================================================== */

body {
    font-family: 'SUITE', 'Wanted Sans Fallback', 'Noto Sans KR', system-ui, sans-serif;
    font-size: var(--fs-body); /* 글자 사다리(glass.css --fs-*) */
    min-width: 360px;
}

/* 콘텐츠 폭: 시안과 동일하게 1140px 에 맞춘다 */
#container {
    max-width: 1172px; /* 1140 + 좌우 padding 16px */
    margin: 0 auto;
    padding: 96px 16px 0; /* 상단 padding 은 fixed 상단바 자리 */
}

section {
    margin-top: 2rem;
}

@media (min-width: 992px) {
    section {
        margin-top: 3rem;
    }
}

/* ---------- 상단바: 브랜드 캡슐과 메뉴 캡슐 (5기 5번) ----------
   크롬 유리는 떨어진 작은 캡슐 두 장이다 (ADR 0001, D8). nav 는 랜드마크로만 남고
   유리가 아니다. 재질(틴트·backdrop-filter·그림자)과 상태는 glass.css 의 "크롬 유리
   재질" 절에 있고, 여기는 배치와 conic 스펙큘러 링(폴백)만 둔다.
   두 캡슐은 같은 높이·같은 윗선이고 콘텐츠 열의 양 끝에 놓인다.
   로드 시퀀스(.veil)와 함께 쓰므로 transition 을 합쳐 선언한다 — 나중에 선언한
   transition shorthand 가 .veil 의 것을 통째로 덮어쓰는 결함을 피하기 위함.
   .veil 이 transform 을 쓰므로 캡슐의 움직임은 개별 속성(scale·translate)으로 한다 */
:root {
    --chrome-column-edge: max(12px, calc(50% - 570px)); /* 콘텐츠 열(1140px)의 가장자리 */
    --chrome-capsule-height: 62px;
    --chrome-capsule-top: 16px;
}

.navbar {
    display: block;
    position: static;
    padding: 0;
}

.brand-capsule, .menu-capsule {
    position: fixed;
    top: var(--chrome-capsule-top);
    z-index: 40;
    display: flex;
    align-items: center;
    height: var(--chrome-capsule-height);
    --r-parent: var(--r-capsule);
    border-radius: var(--r-parent);
    border: 0;
    transition:
        opacity 1s var(--ease-float) var(--vd, 0s),
        transform 1s var(--ease-float) var(--vd, 0s),
        filter 1s var(--ease-float) var(--vd, 0s),
        var(--glass-state-transition),
        scale .45s var(--spring-spatial), translate .45s var(--spring-spatial);
}

.brand-capsule {
    left: var(--chrome-column-edge);
    /* 좌우 padding 은 알약의 둥근 곡선이 끝나는 평평한 지점부터 내용이 놓이도록 */
    padding: 0 1.6rem 0 1.75rem;
    transform-origin: 0 50%;
}

/* 메뉴 캡슐: 버튼은 정사각형 — 가로(118×62)와 세로(62×118)가 90도 회전으로 정확히 겹친다 */
.menu-capsule {
    right: var(--chrome-column-edge);
    gap: 2px;
    padding: 4px;
}

.menu-capsule .icon-link {
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    border-radius: calc(var(--r-parent) - 4px);
}

/* ---------- 메뉴 캡슐의 이동 (5기 5번) ----------
   스크롤해 내려가면 메뉴 캡슐이 돌면서 오른쪽 아래의 엄지 자리로 내려가고, 맨 위로
   돌아오면 올라온다 (1200px 미만에서만 — 판정은 glass-motion.js). 내려간 상태
   (.is-docked)는 진짜 세로 레이아웃이고, 이동은 FLIP 이다: glass-motion.js 가 자리
   (left·top)를 바꾼 뒤 바뀌기 전 자리·방향으로 되돌려 놓고 풀어 준다.
   이동과 회전은 넘침 없는 곡선 하나를 같이 쓴다 */
.menu-capsule {
    --menu-capsule-duration: .95s;
    --menu-capsule-ease: cubic-bezier(.2, 0, 0, 1);
    --menu-capsule-material-delay: 0s;
    --menu-capsule-material-transition:
        --glass-blur .35s ease-in-out var(--menu-capsule-material-delay), --glass-saturate .35s ease-in-out var(--menu-capsule-material-delay),
        --glass-tint-a .35s ease-in-out var(--menu-capsule-material-delay), --glass-tint-b .35s ease-in-out var(--menu-capsule-material-delay),
        --glass-tint-ink .35s ease-in-out var(--menu-capsule-material-delay), --glass-shadow-alpha .35s ease-in-out var(--menu-capsule-material-delay);
    transform-origin: 50% 50%;
    transition:
        opacity 1s var(--ease-float) var(--vd, 0s),
        transform 1s var(--ease-float) var(--vd, 0s),
        filter 1s var(--ease-float) var(--vd, 0s),
        var(--menu-capsule-material-transition),
        translate var(--menu-capsule-duration) var(--menu-capsule-ease),
        rotate var(--menu-capsule-duration) var(--menu-capsule-ease);
}

/* 세로 레이아웃: 고정 높이(--chrome-capsule-height)를 풀어 62×118 이 된다 */
.menu-capsule.is-docked {
    flex-direction: column;
    height: auto;
}

/* 이동하는 동안에만 재질 전환을 이동의 55% 지점으로 늦춘다 — 떠나자마자가 아니라 도착
   조금 전에 바뀐다. 제자리에서 상태가 바뀔 때는 바로 바뀐다 */
.menu-capsule.is-traveling {
    --menu-capsule-material-delay: calc(var(--menu-capsule-duration) * .55);
}

/* 레이아웃이 바뀌는 순간 새 모양으로 구운 스페큘러가 90도 돌아간 채 보인다.
   떠날 때 하이라이트를 껐다가 재질과 같은 시점에 다시 켠다 */
.menu-capsule::after {
    transition: opacity .35s ease-out var(--menu-capsule-material-delay);
}

.menu-capsule.is-specular-off::after {
    opacity: 0;
    transition: none;
}

/* 버튼은 캡슐과 반대로 돌아 늘 서 있다. 늘 자기 합성 층에 둔다 */
.menu-capsule .icon-link {
    transition: scale .6s var(--spring-spatial), background .3s, color .3s,
        rotate var(--menu-capsule-duration) var(--menu-capsule-ease);
    will-change: rotate;
}

/* FLIP 의 되돌려 놓기: 자리·방향의 전환만 끄고 재질 전환은 살린다 */
.menu-capsule.is-flip-start {
    transition: var(--menu-capsule-material-transition);
}

.menu-capsule.is-flip-start .icon-link {
    transition: none;
}

/* 모션 최소화: 자리만 바뀌는 동안 잠깐 숨긴다 (전환은 glass.css 접근성 절) */
.menu-capsule.is-swapping {
    opacity: 0;
}

/* 768px 이상: 브랜드 캡슐을 화면 폭의 50% 로. 메뉴 캡슐에 닿지 않도록 콘텐츠 열에서
   메뉴 캡슐(118px)과 간격(24px)을 뺀 폭을 상한으로 둔다 */
@media (min-width: 768px) {
    .brand-capsule {
        width: min(50vw, calc(min(1140px, 100vw - 24px) - 118px - 24px));
    }
}

/* 스펙큘러 링: glass-material.js 가 구운 스페큘러를 얹기 전까지의 폴백
   (glass.css 재질 절의 .has-baked-specular). conic 광원(210deg)이 캡슐 둘레를 도는 1.5px 링.
   mask-composite 로 padding 두께만 남긴다 — 균일 보더와 달리 빛 받는
   모서리는 밝고 반대편은 어두워 유리 가장자리로 읽힌다 */
.glass-capsule::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(from 210deg,
        rgb(255 255 255 / .9), rgb(255 255 255 / .15) 22%,
        rgb(255 255 255 / .5) 48%, rgb(255 255 255 / .12) 72%,
        rgb(255 255 255 / .9));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    pointer-events: none;
}

/* 최상단 영역을 벗어남: 브랜드 캡슐 축소 (1200px 미만) */
@media (max-width: 1199.98px) {
    .navbar.is-past-top-zone .brand-capsule {
        scale: .92;
        translate: 10px -2px;
    }
}

.menu-capsule .icon-link:hover {
    background: rgb(255 255 255 / .55);
}

/* dark: 글자는 밝게, 링은 약하게 (틴트는 glass.css 의 재질 토큰) */
html[data-theme="dark"] .glass-capsule::after {
    background: conic-gradient(from 210deg,
        rgb(255 255 255 / .6), rgb(255 255 255 / .08) 22%,
        rgb(255 255 255 / .3) 48%, rgb(255 255 255 / .06) 72%,
        rgb(255 255 255 / .6));
}

html[data-theme="dark"] .brand-capsule .navbar-brand,
html[data-theme="dark"] .menu-capsule .icon-link,
html[data-theme="dark"] .menu-capsule .icon-link-label {
    color: #f2f5f8;
}

html[data-theme="dark"] .menu-capsule .icon-link:hover {
    background: rgb(255 255 255 / .12);
}