/*
TABLE OF CONTENTS | 목차
1) Page Base | 홈 페이지 기본 구조
2) Hero | 메인 비주얼 섹션
3) Now | 현재 전시 섹션
4) Notice | 공지 섹션
5) Event | 이벤트 섹션
6) Decor | 장식 요소
7) Accessibility | 접근성 보조 스타일
MAINTENANCE NOTES | 유지보수 메모
- 이 파일은 index.html 전용 섹션만 다룹니다(공통 요소는 ui/layout으로 이동)
- data-js 훅을 사용하는 애니메이션 섹션은 js/main.js와 반드시 동시 점검
*/

/* 1) Page Base | 홈 페이지 기본 구조 */
/* 역할: 홈 전용 섹션들의 공통 배치 기준 설정 */
.page-home .container {
    padding-bottom: 4.334em;
}

.page-home section {
    position: relative;
    z-index: 2;
}

.section-subtitle {
    white-space: nowrap;
}

/* 2) Hero | 메인 비주얼 섹션 */
/* 의존: Swiper 마크업 구조(.swiper-wrapper/.swiper-slide) 및 main.js 커서 라벨 로직과 연결 */
.home-hero,
.swiper {
    overflow: visible;
}

.home-hero {
    position: relative;
    width: 100%;
}

.home-hero a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero .swiper-slide {
    overflow: hidden;
}

.home-hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-detail-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    color: #fff;
    font-family: "pretendard";
    font-size: 1.167em;
    font-weight: 700;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-9999px, -9999px, 0);
    transition: opacity 0.2s ease;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.home-hero-detail-cursor.is-visible {
    opacity: 1;
}

.home-hero-control {
    position: absolute;
    bottom: calc(-2.273% - 3.333em);
    left: 47.188%;
    z-index: 1;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    gap: 0.445em;
    width: auto;
    padding: 1em 1.333em;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 600px;
}

.home-hero-pagination {
    display: flex;
    align-items: center;
    gap: 0.889em;
    width: auto !important;
}

.home-hero-pagination > span {
    width: 0.889em;
    height: 0.889em;
    margin: 0 !important;
    border-radius: 50%;
    background: #393939;
    opacity: 1;
}

.home-hero-pagination > span.swiper-pagination-bullet-active {
    background: transparent;
    border: 2px solid #fff;
}

.home-hero-control > button {
    width: 1.333em;
}

.home-hero-play {
    margin-left: 0.556em;
}

.home-hero-control > button > img {
    width: 100%;
}

@media all and (max-width: 1023px) {
    .home-hero-control {
        bottom: calc(-2.255% - 2.833em);
        gap: 0.444em;
        left: 50%;
        padding: 0.747em 1.333em;
        transform: translateX(-50%);
    }
}

/* 3) Now | 현재 전시 섹션 */
/* 의존: [data-js="home-now*"] 훅을 main.js 애니메이션이 참조 */
.home-now {
    position: relative;
    margin-top: 6.667em;
    padding: 0 0 2.222em 2.222em;
    will-change: transform, opacity;
}

.home-now::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 130.417%;
    height: calc(100% - 2.222em);
    background: #3f3f3f;
}

.home-now article {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
}

.home-now-content {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 47.414%;
    margin-top: 5.834em;
}

.home-now-period {
    margin-top: 1.7em;
    color: #fabf00;
    font-family: "GmarketSans";
    font-size: 1.111em;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.home-now .section-title {
    font-size: 4em;
    font-weight: 500;
}

.home-now-linkbox {
    position: relative;
    will-change: transform, opacity;
}

.home-now-linkbox::before {
    content: "";
    position: absolute;
    top: -19.231%;
    left: -14.656%;
    display: block;
    width: 163.455%;
    height: 138.462%;
    background: linear-gradient(to right, #5cb7e8, #fef5e9);
}

.home-now-text {
    position: relative;
    color: #000;
    font-size: 1.667em;
    font-weight: 500;
}

.home-now .ui-btn {
    position: relative;
    margin-top: 3.556em;
}

.home-now-image {
    position: relative;
    width: 41.379%;
    aspect-ratio: 120 / 169;
    box-sizing: content-box;
    border: 1.667em solid #3f3f3f;
}

.home-now-image > img {
    width: 100%;
    object-fit: cover;
}

@media all and (max-width: 1023px) {
    .home-now {
        padding: 0 0 34.83% 0;
    }

    .home-now::before {
        top: 0;
        left: var(--home-now-before-left, 4.181%);
        width: 100%;
        height: var(--home-now-before-height, 70.251%);
    }

    .home-now article {
        z-index: 1;
        flex-flow: column wrap;
    }

    .home-now article::before {
        position: absolute;
        bottom: -14.167em;
        left: 50%;
        content: "";
        width: 100vw;
        height: 40.173%;
        transform: translateX(-50%);
        background: linear-gradient(to right, #5cb7e8, #fef5e9);
    }

    .home-now-content {
        width: 100%;
        margin-top: 2.222em;
    }

    .home-now-header {
        padding-left: 10.836%;
    }

    .home-now-linkbox {
        position: absolute;
        bottom: -11.944em;
        left: 0;
        width: 100%;
    }

    .home-now-linkbox::before {
        display: none;
    }

    .home-now-text {
        width: 100%;
        min-height: 2.4em;
        word-break: keep-all;
    }

    .home-now .ui-btn {
        width: 100%;
        margin-top: 1.125em;
        padding: 1.083em 0;
        font-size: 1.333em;
        text-align: center;
    }

    .home-now-image {
        position: relative;
        right: auto;
        width: 74.419%;
        margin-top: 1.111em;
        margin-left: auto;
        margin-right: calc(50% - 50vw);
    }
}

/* 4) Notice | 공지 섹션 */
/* 유지보수: 리스트 항목 구조 변경 시 hover-fill/아이콘 정렬/애니메이션 대상 동시 확인 */
.home-notice {
    display: flex;
    gap: 3.167em;
    margin-top: 4.945em;
}

.home-notice .section-subtitle {
    margin-top: 0.955em;
}

.home-notice-list {
    width: calc(100% - 11.277em);
}

.home-notice-item {
    padding: 1.388em 1.333em 1.722em;
    border-bottom: 2px solid #4a4a4a;
}

.home-notice-meta {
    display: flex;
    align-items: center;
    font-size: 1em;
}

.home-notice-meta time {
    display: flex;
    align-items: center;
    font-weight: 700;
}

.home-notice-meta time::after {
    content: "";
    width: 0.383em;
    height: 0.383em;
    margin: 0 1.087em;
    border-radius: 50%;
    background: #fff;
}

.home-notice-meta span {
    color: #919191;
}

.home-notice-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.667em;
}

.home-notice-title h3 {
    font-size: 1.333em;
}

.home-notice-item:not([data-ui-hover-fill]) a:is(:hover, :focus-visible) .home-notice-title h3 {
    text-decoration: underline;
    text-underline-offset: 0.098em;
}

.home-notice-item[data-ui-hover-fill] > a {
    display: block;
}

@media all and (max-width: 1023px) {
    .home-notice {
        display: block;
        margin-top: 7.778em;
    }

    .home-notice .section-subtitle {
        margin-top: 0;
    }

    .home-notice-list {
        width: 100%;
        margin-top: 1.389em;
    }

    .home-notice-item {
        padding: 1.389em 0 1.722em 1.611em;
    }

    .home-notice-title h3 {
        max-width: 92%;
        height: 1.2em;
        font-size: 1.333em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-notice-item:not([data-ui-hover-fill]) a:is(:hover, :focus-visible) .home-notice-title h3 {
        text-decoration: underline;
        text-underline-offset: 0.098em;
    }

    .home-notice-item[data-ui-hover-fill] > a {
        display: block;
    }
}

/* 5) Event | 이벤트 섹션 */
/* 주의: 카드 행 배치는 main.js offsetTop 기반 row 계산에 영향 */
.home-event {
    display: flex;
    gap: 4.112em;
    margin-top: 8.111em;
}

.home-event-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(100% - 11.222em);
}

.home-event-nav {
    display: none;
}

@media all and (max-width: 1023px) {
    .home-event {
        display: block;
        margin-top: 5.722em;
    }

    .home-event-list {
        display: flex;
        gap: 0;
        width: 100%;
        margin-top: 2.778em;
        overflow: visible;
    }

    .home-event-item {
        flex-shrink: 0;
        width: 100%;
    }

    .home-event-nav {
        display: flex;
        gap: 3.682em;
        justify-content: flex-end;
        margin-top: 1.722em;
        padding-top: 2.278em;
        border-top: 2px solid #4a4a4a;
    }

    .home-event-nav-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 0.707em;
        height: auto;
        background: transparent;
        color: #fff;
        cursor: pointer;
        transition: color 0.2s ease;
    }

    .home-event-nav-button > svg {
        display: block;
        width: 100%;
        height: auto;
    }

    .home-event-nav-button[aria-disabled="true"] {
        color: #4a4a4a;
    }
}

/* 6) Decor | 장식 요소 */
/* 의존: [data-letter] 값별 위치/크기/레이어는 main.js 패럴랙스 분기와 매칭 */
.home-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-decor-item {
    position: absolute;
    will-change: transform, opacity;
}

.home-decor-a {
    top: 0;
    right: 3.646%;
    z-index: 3;
    width: 10.573%;
}

.home-decor-e {
    top: 5.201%;
    left: -2.865%;
    z-index: 1;
    width: 18.698%;
}

.home-decor-g {
    top: 26.123%;
    right: -9.891%;
    z-index: 3;
    width: 26.61%;
}

.home-decor-i {
    top: 51.616%;
    left: 15.104%;
    z-index: 1;
    width: 5.052%;
}

.home-decor-eq {
    top: 78.408%;
    left: -1.146%;
    z-index: 1;
    width: 21.823%;
}

.home-decor-p {
    top: 85.382%;
    right: 2.76%;
    z-index: 1;
    width: 17.813%;
}

.home-decor img {
    display: block;
    width: 100%;
}

/* 7) Accessibility | 접근성 보조 스타일 */
/* 역할: 모션 최소화/포커스/읽기 순서 관련 보조 스타일 */
@media (prefers-reduced-motion: reduce) {
    .home-hero .swiper-wrapper img {
        transition: none;
    }

    .home-hero-detail-cursor {
        display: none;
        transition: none;
    }

    .home-now {
        transform: none !important;
        opacity: 1 !important;
    }

    .ui-event-thumb > img {
        transition: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .home-hero-detail-cursor {
        display: none;
    }
}

/* 반응형 */
@media all and (max-width: 1439px) {
    .home-decor-a {
        right: 3.085%;
        width: 8.946%;
    }

    .home-decor-e {
        left: -5.289%;
        width: 15.821%;
    }

    .home-decor-g {
        right: -12.26%;
        width: 22.516%;
    }

    .home-decor-i {
        left: 8.104%;
        width: 4.275%;
    }

    .home-decor-eq {
        left: -4.146%;
        width: 18.466%;
    }

    .home-decor-p {
        top: 90%;
        right: 2.76%;
        width: 15.073%;
    }
}

@media all and (max-width: 1023px) {
    .home-decor-a {
        right: 3.857%;
        width: 22.857%;
    }

    .home-decor-e {
        top: 22.493%;
        left: -17.021%;
        z-index: 2;
        width: 40.973%;
    }

    .home-decor-g,
    .home-decor-i,
    .home-decor-eq,
    .home-decor-p {
        display: none;
    }
}