@charset "utf-8";

@layer components {
    /* #region layout */
    .l-interior {
        padding-block: var(--space-section-block-2);
        :where(.legal-document .page-heading, .page-heading-block) {
            margin-bottom: var(--space-5);
            text-align: center;
        }
        .page-subheading {
            margin-top: var(--space-2);
            color: var(--color-neutral-500);
        }
        /* 추후 페이지 구조 수정 필요 */
        /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
        #main:has(.join_area) .sub_title {
            display: none;
        }
    }
    .l-container {
        --_max-width: calc(var(--container-width-base) * 1rem);
        width: calc(var(--container-viewport-ratio) * 100%);
        max-width: var(--_max-width);
        margin-inline: auto;
        &.-narrow {
            --_max-width: calc(var(--container-width-narrow) * 1rem);
        }
        &.-wide {
            --_max-width: calc(var(--container-width-wide) * 1rem);
        }
    }
    /* #endregion layout */

    /* #region atoms */
    .a-display-1 {
        font: var(--font-display-1);
    }
    .a-display-2 {
        font: var(--font-display-2);
    }
    .a-display-3 {
        font: var(--font-display-3);
    }
    .a-heading-1 {
        font: var(--font-heading-1);
    }
    .a-heading-2 {
        font: var(--font-heading-2);
        font-family: var(--font-family-gmarket);
        text-wrap: balance;
        color: var(--color-primary-base);
    }
    .a-heading-3 {
        font: var(--font-heading-3);
    }
    .a-heading-4 {
        font: var(--font-heading-4);
    }
    .a-heading-5 {
        font: var(--font-heading-5);
    }
    .a-heading-6 {
        font: var(--font-heading-6);
    }
    .a-body-1 {
        font: var(--font-body-1);
    }
    .a-body-2 {
        font: var(--font-body-2);
    }
    .a-body-3 {
        font: var(--font-body-3);
    }
    .a-body-4 {
        font: var(--font-body-4);
    }
    .a-body-5 {
        font: var(--font-body-5);
    }
    .a-eyebrow {
        margin-bottom: 19rem;
        font: var(--font-body-1);
        font-family: var(--font-family-gmarket);
        color: var(--color-secondary-base);
    }
    .a-subheading {
        margin-top: calc(var(--font-size-heading-2) * 0.88);
        font: var(--font-body-1);
        line-height: 1.75;
        color: var(--color-neutral-500);
    }
    .a-skip-link {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        display: inline-block;
        margin: 0;
        font-size: 16rem;
        text-align: center;
        color: #fff;
        text-decoration: underline;
        background: #222;
        border-radius: 2rem;
        &:not(:focus-visible) {
            width: 0;
            height: 0;
            overflow: hidden;
            padding: 0;
            border: 0;
            clip-path: inset(100%);
        }
        &:focus-visible {
            padding: 0.5lh 1lh;
            border: 2rem solid currentColor;
        }
    }
    /* #endregion atoms */

    /* #region molecules */
    .m-account {
        display: inline-flex;
        gap: var(--space-3);
        column-rule: var(--border-width-3) dotted var(--color-border);
        column-rule-inset: 0.45em;
        font: var(--font-body-4);
    }
    .m-site-language {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        column-rule: var(--border-width-1) solid var(--color-border);
        column-rule-inset: 0.45em;
        min-width: 24rem;
        font: var(--font-body-4);
        .site-language-link {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 2rem;
            font-weight: 500;
            letter-spacing: -0.02em;
            text-transform: uppercase;
            @media (prefers-reduced-motion: no-preference) {
                &,
                &::after {
                    transition: color 0.24s ease, opacity 0.24s ease;
                }
            }
            &::after {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: var(--border-width-1);
                background: currentcolor;
                transform: scaleX(0.4);
                transform-origin: center;
                opacity: 0;
                content: "";
            }
            &.is-active::after,
            &[aria-current="page"]::after,
            &:hover::after {
                transform: scaleX(1);
                opacity: 1;
            }
        }
    }
    .m-coming-soon {
        padding-block: var(--space-section-block-2);
        text-align: center;
        .icon {
            width: var(--font-size-body-1);
            height: auto;
            aspect-ratio: 1;
            margin-bottom: var(--space-3);
            background: url("/assets/images/icons/chat-bubbles.svg") no-repeat 50% / contain;
        }
    }
    /* #endregion molecules */

    /* #region organisms */
    .o-breadcrumb {
        font: var(--font-body-3);
        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
        }
        .item {
            display: flex;
            align-items: center;
            min-width: 0;
            &:not(:first-child)::before {
                display: inline-block;
                flex: 0 0 auto;
                width: 1em;
                aspect-ratio: 1;
                overflow: hidden;
                margin-inline: var(--space-1);
                font-size: 20rem;
                line-height: 1;
                font-family: "Material Symbols Outlined";
                color: var(--color-neutral-500);
                content: "chevron_right";
            }
        }
        .link {
            color: var(--color-neutral-800);
            &:hover {
                text-decoration: underline;
                text-underline-offset: 3rem;
            }
        }
        .current {
            font-weight: var(--font-weight-700);
            color: var(--color-neutral-900);
        }
    }
    .o-global-nav {
        @media (width < 1280px) {
            display: none;
        }
        .menu-list.-level-1 {
            --_gap-size: 80;
            display: flex;
            gap: clamp(var(--space-6), calc(80 / 1920 * 100vw), 80rem);
        }
        .menu-link.-level-1 {
            display: flex;
            align-items: center;
            font: var(--font-body-2-bold);
            text-decoration: none;
            &:has(+ .menu-list)::after {
                height: 1em;
                aspect-ratio: 1;
                overflow: hidden;
                font-size: 20rem;
                line-height: 1;
                font-family: var(--font-family-material-symbols);
                content: "arrow_drop_down";
            }
            &:has(+ .menu-list:popover-open)::after {
                content: "arrow_drop_up";
            }
        }
        .menu-list.-level-2 {
            width: max-content;
            min-width: var(--numeric-24);
            margin-top: var(--space-2);
            background: var(--color-white);
            border: 0;
            border-radius: var(--radius-5);
            position-area: end center;
            @media (prefers-reduced-motion: no-preference) {
                transition: var(--duration-base) allow-discrete;
                &:not(:popover-open) {
                    translate: 0 calc(var(--space-2) * -1);
                    opacity: 0;
                }
                &:popover-open {
                    translate: 0;
                    opacity: 1;
                }
                @starting-style {
                    &:popover-open {
                        translate: 0 calc(var(--space-2) * -1);
                        opacity: 0;
                    }
                }
            }
        }
        .menu-item.-level-2 {
            & + & {
                border-top: var(--border-width-1) solid var(--color-border);
            }
        }
        .menu-link.-level-2 {
            display: block;
            padding: var(--space-3);
            font-size: var(--font-size-body-4);
            text-align: center;
            text-decoration: none;
            &:hover {
                color: var(--color-white);
                background: var(--color-primary-500);
            }
        }
    }
    .o-site-nav {
        --_border-color: #eaeaea;
        --_padding-block: 15rem;
        --_padding-inline: 16rem;
        left: auto;
        width: 100%;
        max-width: 280rem;
        height: 100dvh;
        overscroll-behavior: contain;
        padding: 0;
        background: var(--color-white);
        border: 0;
        &::backdrop {
            background: #000;
        }
        .site-nav-header {
            display: grid;
            align-items: center;
            justify-content: flex-end;
            height: var(--header-height);
            padding-inline: var(--space-3);
        }
        @media (prefers-reduced-motion: no-preference) {
            translate: 100%;
            transition: 0.3s allow-discrete;
            &::backdrop {
                opacity: 0;
                transition: 0.3s allow-discrete;
            }
            &:popover-open {
                translate: 0;
                @starting-style {
                    translate: 100%;
                    &::backdrop {
                        opacity: 0;
                    }
                }
                &::backdrop {
                    opacity: 0.6;
                }
            }
        }
        .site-close {
            position: relative;
            display: block;
            /* width: var(--site-menu-button-size); */
            width: 32rem;
            aspect-ratio: 1;
            .icon {
                position: relative;
                display: block;
                /* width: var(--site-menu-icon-size); */
                width: 100%;
                aspect-ratio: 1;
                margin: auto;
            }
            .bar {
                position: absolute;
                top: 50%;
                left: 0;
                display: block;
                width: 100%;
                height: var(--site-menu-bar-size);
                background: currentcolor;
                &:nth-child(1) {
                    transform: translateY(-50%) rotate(45deg);
                }
                &:nth-child(2) {
                    transform: translateY(-50%) rotate(-45deg);
                }
            }
        }
        &.-details {
            .menu-list.-level-1 {
                .menu-item.-level-1 {
                    border-top: var(--border-width-1) solid var(--_border-color);
                }
                .menu-item.-level-1:last-child {
                    border-bottom: var(--border-width-1) solid var(--_border-color);
                }
                details {
                    &::details-content {
                        height: 0;
                        overflow: clip;
                    }
                    &[open]::details-content {
                        height: auto;
                    }
                    @media (prefers-reduced-motion: no-preference) {
                        &::details-content {
                            height: 0;
                            transition: var(--duration-base) allow-discrete;
                        }
                        &[open]::details-content {
                            height: auto;
                        }
                    }
                }
                .menu-link.-level-1 {
                    display: grid;
                    grid-template-columns: 1fr auto;
                    align-items: center;
                    width: 100%;
                    padding: var(--_padding-block) var(--_padding-inline);
                    text-align: left;
                }
                summary.menu-link.-level-1::after {
                    height: 1em;
                    aspect-ratio: 1;
                    overflow: hidden;
                    font-size: 20rem;
                    line-height: 1;
                    font-family: var(--font-family-material-symbols);
                    content: "arrow_drop_down";
                }
                [open] summary.menu-link.-level-1::after {
                    content: "arrow_drop_up";
                }
                .menu-list.-level-2 {
                    background: var(--color-neutral-100);
                }
                .menu-item.-level-2 {
                    border-top: var(--border-width-1) solid var(--_border-color);
                }
                .menu-link.-level-2 {
                    display: block;
                    padding: var(--_padding-block) var(--_padding-inline);
                    font-size: var(--font-size-body-4);
                }
            }
        }
        &.-simple {
            .menu-list.-level-1 {
                display: grid;
                gap: var(--space-4);
                padding: var(--_padding-block) var(--_padding-inline);
            }
            .menu-item.-level-1 {
                display: grid;
                gap: var(--space-2);
            }
            .menu-link.-level-1 {
                justify-self: start;
                font: var(--font-body-2-bold);
            }
            .menu-list.-level-2 {
                display: grid;
                gap: var(--space-2);
                padding-left: 1rem;
            }
            .menu-link.-level-2 {
                font-size: 16rem;
            }
        }
    }
    .o-local-nav {
        position: relative;
        z-index: 7;
        font: var(--font-body-2);
        .l-container {
            display: flex;
        }
        .home {
            display: grid;
            place-items: center;
            aspect-ratio: 1;
            padding: var(--space-3);
            background: var(--color-black);
            &::before {
                overflow: hidden;
                font-size: 24rem;
                line-height: 1;
                font-family: var(--font-family-material-symbols);
                color: var(--color-white);
                content: "home";
            }
        }
        .toggle {
            position: relative;
            display: flex;
            align-items: center;
            padding: var(--space-3);
            text-align: left;
            color: var(--color-black);
            border-right: var(--border-width-1) solid var(--color-neutral-200);
            &.-level-1 {
                anchor-name: --toggle-1;
            }
            &.-level-2 {
                anchor-name: --toggle-2;
            }
            &::after {
                height: 1em;
                aspect-ratio: 1;
                overflow: hidden;
                font-size: 20rem;
                line-height: 1;
                font-family: var(--font-family-material-symbols);
                content: "arrow_drop_down";
            }
            &:has(+ :popover-open)::after {
                content: "arrow_drop_up";
            }
        }
        .nav-menu {
            position: absolute;
            inset: auto;
            top: anchor(bottom);
            left: anchor(left);
            color: var(--color-black);
            background: #fff;
            border: var(--border-width-1) solid var(--color-border);
            &.-level-1 {
                position-anchor: --toggle-1;
            }
            &.-level-2 {
                position-anchor: --toggle-2;
            }
        }
        .nav-link {
            display: block;
            padding: var(--space-3);
            @media (any-hover) {
                &:hover {
                    background: var(--color-neutral-100);
                }
            }
        }
    }
    .o-site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 10;
        color: var(--color-white);
        background: linear-gradient(180deg, #000000af calc(100% - 1px), var(--color-border));
        backdrop-filter: blur(10px);
        .l-container {
            display: grid;
            align-items: center;
            justify-content: space-between;
            height: var(--header-height);
            @media (width >= 1280px) {
                grid-template-columns: 1fr auto 1fr;
            }
            @media (width < 1280px) {
                grid-template-columns: 1fr auto;
            }
        }
        .logo-link {
            position: relative;
            display: inline-block;
            justify-self: start;
        }
        .logo-image {
            display: block;
            height: auto;
            @media (width >= 1280px) {
                width: 114rem;
            }
            @media (width < 1280px) {
                width: 80rem;
            }
        }
        .utilities {
            display: inline-flex;
            align-items: center;
            justify-self: end;
            gap: var(--space-3);
        }
        .site-open {
            position: relative;
            display: block;
            width: var(--site-menu-button-size);
            aspect-ratio: 1;
            cursor: pointer;
            .icon {
                position: relative;
                display: block;
                width: var(--site-menu-icon-size);
                aspect-ratio: 1;
                margin: auto;
            }
            .bar {
                position: absolute;
                inset: 0;
                height: var(--site-menu-bar-size);
                margin: auto;
                background: currentcolor;
                border-radius: var(--radius-full);
                &:nth-child(1) {
                    width: 60%;
                    margin-right: 0;
                    translate: 0 -4rem;
                }
                &:nth-child(2) {
                    translate: 0 4rem;
                }
            }
        }
    }
    .o-site-footer {
        color: var(--color-white);
        background: var(--color-primary-base);
        @media (width >= 1280px) {
            padding-block: 80rem 120rem;
        }
        @media (width < 1280px) {
            padding-block: 54rem 80rem;
        }
        header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 20rem 40rem;
            margin-bottom: 40rem;
            padding-bottom: 40rem;
            border-bottom: var(--border-width-1) solid #ffffff33;
        }
        .logo {
            height: auto;
            @media (width >= 1280px) {
                width: 114rem;
            }
            @media (width < 1280px) {
                width: 80rem;
            }
        }
        .legal-list {
            display: flex;
            flex-wrap: wrap;
            gap: 14rem;
            font-weight: var(--font-weight-700);
            .legal-link {
                display: block;
                padding: 12rem 26rem;
                background: #ffffff12;
                border-radius: 5rem;
            }
        }
        address {
            display: grid;
            align-items: start;
            gap: var(--space-6);
            @media (width >= 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .site-details {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-1) 30rem;
            max-width: 60ch;
            color: #ffffffcc;
            @media (width >= 768px) {
                row-gap: 19rem;
            }
            @media (width < 768px) {
                flex-direction: column;
            }
            .site-detail {
                display: inline-flex;
                gap: 11rem;
            }
            .facility,
            .label {
                font-weight: var(--font-weight-600);
            }
        }
        .copyright {
            margin-top: 35rem;
            color: #ffffffa3;
        }
    }
    /* #endregion organisms */
}