/* ============================================================
   EDAM — Layout: container, grid, header, footer, sections
   ============================================================ */

/* ---- Container --------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--pad-x);
}

.container--narrow {
    max-width: 1100px;
}

/* Break out of the container to the full viewport width */
.bleed {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50vw);
}

/* ---- Grid --------------------------------------------------- */

.grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gap);
}

.col-full { grid-column: 1 / -1; }
.col-1-5  { grid-column: 1 / span 5; }
.col-1-6  { grid-column: 1 / span 6; }
.col-1-7  { grid-column: 1 / span 7; }
.col-1-8  { grid-column: 1 / span 8; }
.col-2-6  { grid-column: 2 / span 5; }
.col-6-7  { grid-column: 6 / span 7; }
.col-7-6  { grid-column: 7 / span 6; }
.col-8-5  { grid-column: 8 / span 5; }
.col-9-4  { grid-column: 9 / span 4; }

@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .col-1-5, .col-1-6, .col-1-7, .col-1-8,
    .col-2-6, .col-6-7, .col-7-6, .col-8-5, .col-9-4 {
        grid-column: 1 / -1;
    }
}

/* ---- Section ------------------------------------------------ */

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section--tight {
    padding-block: clamp(4rem, 8vh, 7rem);
}

.section--flush-top {
    padding-top: 0;
}

.section--flush-bottom {
    padding-bottom: 0;
}

.section--ruled {
    border-top: 1px solid var(--line);
}

/* Section header: (01) LABEL ─────────────  */
.section-head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    padding-bottom: 1.5rem;
    margin-bottom: clamp(2.5rem, 6vw, 5rem);
    border-bottom: 1px solid var(--line);
}

.section-head__index {
    flex: none;
}

.section-head__title {
    flex: 1;
}

.section-head__aside {
    flex: none;
    margin-left: auto;
}

@media (max-width: 640px) {
    .section-head {
        flex-wrap: wrap;
        gap: 0.75rem 1rem;
    }

    /* 자기 줄로 내리되 폭은 글자만큼만 씁니다.
       이 요소가 곧 링크(arrow-link)라 100% 로 늘리면 밑줄이
       화면 끝까지 그어져 섹션 괘선이 두 줄로 보였습니다. */
    .section-head__aside {
        flex-basis: 100%;
        max-width: max-content;
        margin-left: 0;
    }
}

/* ---- Page head (interior pages) ----------------------------- */

.page-head {
    padding-top: calc(var(--header-h) + clamp(4rem, 12vh, 9rem));
    padding-bottom: clamp(3rem, 8vh, 6rem);
    border-bottom: 1px solid var(--line);
}

.page-head__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.page-head__title {
    max-width: 18ch;
}

.page-head__intro {
    margin-top: clamp(2rem, 4vw, 3rem);
    max-width: 56ch;
}

/* ---- Page hero — 제목이 이미지 위에 얹히는 변형 --------------
   이미지를 아래에 따로 두면 헤더와 사진이 서로 겉돕니다.
   한 덩어리로 묶어 히어로처럼 다룹니다.                        */

.page-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(26rem, 72svh, 44rem);
    overflow: hidden;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--line);
}

.page-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 관리자가 조절하는 어둡기. 밝은 사진이 올라와도 글자가 묻히지 않습니다. */
.page-hero__dim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--bg);
    opacity: calc(var(--dim, 45) / 100);
    transition: opacity var(--dur-base) var(--ease);
}

/* 글자 가독성을 위한 고정 스크림. 어둡기와 별개로 항상 걸립니다. */
.page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(var(--bg-rgb), 0.75) 0%, rgba(var(--bg-rgb), 0) 34%),
        linear-gradient(to top, rgba(var(--bg-rgb), 0.85) 0%, rgba(var(--bg-rgb), 0) 62%);
}

.page-hero__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-top: calc(var(--header-h) + clamp(3.5rem, 10vh, 7rem));
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}

.page-hero__title {
    max-width: 18ch;
}

.page-hero__intro {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 56ch;
}

/* ============================================================
   Header / Navigation
   ============================================================ */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background var(--dur-fast) var(--ease),
        border-color var(--dur-fast) var(--ease),
        transform var(--dur-base) var(--ease);
}

.site-header.is-solid {
    background: rgba(var(--bg-rgb), 0.82);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom-color: var(--line);
}

/* Hide on scroll-down, reveal on scroll-up */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* 메뉴가 열려 있을 때는 헤더를 패널 위로 올립니다.
   헤더에 z-index 가 걸려 있어 그 안의 닫기 버튼만 따로 올릴 수는 없습니다
   — 자식은 부모가 만든 층 안에 갇힙니다. 헤더 자체를 올려야 합니다. */
.site-header.is-above {
    z-index: calc(var(--z-menu) + 1);
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.brand {
    display: flex;
    align-items: center;
    flex: none;
    z-index: calc(var(--z-menu) + 1);
}

.brand__img {
    height: 40px;
    width: auto;
    transition: opacity var(--dur-fast) var(--ease);
}

.brand:hover .brand__img {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .brand__img {
        height: 28px;
    }
}

/* Desktop nav */
.nav {
    display: flex;
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
}

.nav__link {
    position: relative;
    font-family: var(--font-display);
    font-size: var(--t-nav);
    font-weight: 500;
    /* 글자가 커진 만큼 자간은 조금 좁힙니다. 같이 키우면 지나치게 벌어집니다. */
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding-block: 0.5rem;
    transition: color var(--dur-fast) var(--ease);
}

.nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--dur-fast) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
    color: var(--fg);
}

.nav__link:hover::after,
.nav__link[aria-current='page']::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Hamburger · 열려 있을 때는 닫기(X) 버튼이 됩니다.
   손가락으로 누르는 영역이라 44px 를 확보합니다. */
.nav-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    z-index: calc(var(--z-menu) + 1);
}

.nav-toggle__bar {
    position: absolute;
    left: 8px;
    right: 8px;
    height: 1px;
    background: var(--fg);
    transition: transform var(--dur-fast) var(--ease),
        opacity var(--dur-fast) var(--ease);
}

.nav-toggle__bar:nth-child(1) { top: 18px; }
.nav-toggle__bar:nth-child(2) { top: 25px; }

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
    transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) {
    transform: translateY(-3.5px) rotate(-45deg);
}

/* Full-screen mobile menu */
.nav-panel {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--bg);
    padding: var(--header-h) var(--pad-x) 3rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-fast) var(--ease),
        visibility var(--dur-fast) var(--ease);
}

.nav-panel.is-open {
    opacity: 1;
    visibility: visible;
}

.nav-panel__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-panel__item {
    border-bottom: 1px solid var(--line);
}

.nav-panel__link {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding-block: clamp(0.75rem, 2.5vh, 1.25rem);
    font-family: var(--font-display);
    font-size: clamp(2rem, 9vw, 3.5rem);
    font-weight: 500;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--fg);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-base) var(--ease),
        transform var(--dur-base) var(--ease);
}

.nav-panel.is-open .nav-panel__link {
    opacity: 1;
    transform: none;
    transition-delay: calc(60ms * var(--i, 0) + 80ms);
}

.nav-panel__link .index {
    font-size: var(--t-label);
}

.nav-panel__foot {
    margin-top: auto;
    padding-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 860px) {
    .nav {
        display: none;
    }

    .nav-toggle {
        display: block;
    }
}

@media (min-width: 861px) {
    .nav-panel {
        display: none;
    }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
    border-top: 1px solid var(--line);
    padding-block: clamp(3.5rem, 8vh, 6rem) 2rem;
}

.site-footer__top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.footer-brand__img {
    height: 28px;
    width: auto;
    margin-bottom: 1.25rem;
}

.footer-brand__tag {
    font-size: var(--t-small);
    color: var(--fg-muted);
    max-width: 28ch;
}

.footer-col__title {
    margin-bottom: 1.25rem;
    color: var(--fg-subtle);
}

.footer-col__list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: var(--t-small);
    color: var(--fg-muted);
}

.footer-col__list a {
    transition: color var(--dur-fast) var(--ease);
}

.footer-col__list a:hover {
    color: var(--fg);
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    font-size: var(--t-small);
    color: var(--fg-subtle);
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

@media (max-width: 900px) {
    .site-footer__top {
        grid-template-columns: 1fr 1fr;
        row-gap: 3rem;
    }
}

@media (max-width: 560px) {
    .site-footer__top {
        grid-template-columns: 1fr;
    }
}

/* Back-to-top */
.to-top {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: var(--t-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
    transition: color var(--dur-fast) var(--ease);
}

.to-top:hover {
    color: var(--fg);
}

.to-top .arrow {
    transition: transform var(--dur-fast) var(--ease);
}

.to-top:hover .arrow {
    transform: translateY(-3px);
}