@import url('go_to_list.css');
@import url('product-view-override.css');
@import url('section/info.css');
@import url('section/upgrade_guides.css');
@import url('section/disclaimer.css');
@import url('section/related_feature.css');
@import url('fifa/index.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    max-width: 100%;
    scrollbar-gutter: stable;
}

body {
    font-family: 'KiaSignature',
    'Kia Signature',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    Arial,
    sans-serif;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    overflow-x: hidden;
    max-width: 100vw;
}

img {
    max-width: 100%;
    height: auto;
}

figure {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

main section {
    position: relative;
    width: 100%;
}
main section > .section-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ========================================
   youtube-container
   ======================================== */
.youtube-container {
    position: relative;
    /* 16:9 비율 (9 / 16 * 100 = 56.25) */
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ========================================
   Fade
   ======================================== */
.xfade-stage {
    display: grid;
    /* Grid를 써서 자식들을 한 칸(stack)에 몰아넣음.
       absolute를 안 써도 되므로 부모 높이가 자식 높이에 맞춰 자동 조절됨 */
    grid-template-areas: 'stack';
    position: relative;
    isolation: isolate; /* z-index 스코프 격리 (다른 요소 간섭 방지) */
    overflow: hidden; /* 넘치는 이미지 정리 */
}
.xfade-item {
    grid-area: stack; /* 모든 아이템을 "stack"이라는 같은 칸에 배치 -> 겹쳐짐 */
    width: 100%;
    height: auto; /* 혹은 100%, 상황에 따라 조절 */

    /* 기본 상태: 숨김 */
    opacity: 0;
    visibility: hidden;
    z-index: 0;

    /* 부드러운 전환 효과 (하드웨어 가속 포함) */
    transform: scale(1.05);
    will-change: opacity, transform;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s 0.6s; /* 사라질 때 delay */
}