@property --hover-x {
    syntax: '<length>';
    inherits: false;
    initial-value: 0px;
}

@font-face {
    font-family: 'RadiateSans';
    src: url('../fonts/radiatesans-boldsemiexpanded.otf') format('opentype');
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: 'Brice';
    src: url('../fonts/brice-semi-expanded-black.otf') format('opentype');
    font-weight: 900;
    font-display: swap;
}

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

body {
    width: 100%;
    min-height: 150vh;
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow-x: hidden;
}

.background-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(40vh, 60vw, 86vh);
    z-index: 0;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.background-image.active {
    opacity: 1;
}

.background-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(40vh, 60vw, 86vh);
    background-color: rgba(255, 255, 255, 0.35);
    z-index: 1;
    pointer-events: none;
}

.white-cover {
    position: absolute;
    top: clamp(40vh, 60vw, 86vh);
    left: 0;
    width: 100%;
    min-height: 300vh;
    background-image: url('../img/interior/background.avif');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    z-index: 3;
}

/* 모바일 배경 크기 조정 */
@media screen and (max-width: 768px) {
    .white-cover {
        background-size: contain;
        background-position: center top;
        background-repeat: repeat-y;
        background-color: #f5f5f5;
    }
}

/* 데스크톱에서만 fixed 적용 */
@media screen and (min-width: 769px) {
    .white-cover {
        background-attachment: fixed;
    }
}

.interior-gallery {
    padding-top: clamp(100px, 20vh, 400px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(8px, 1.5vw, 20px);
    max-width: 1400px;
    margin: 0 auto;
    padding-left: clamp(10px, 2vw, 20px);
    padding-right: clamp(10px, 2vw, 20px);
    position: relative;
    z-index: 5;
}

.interior-gallery img {
    width: 100%;
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.4s ease,
                box-shadow 0.4s ease,
                opacity 0.3s ease,
                --hover-x 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    opacity: 0;
    --hover-x: 0px;
}

.interior-gallery img.reveal {
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.interior-gallery img.animating {
    will-change: transform, opacity;
    pointer-events: none !important;
}

.interior-gallery img:hover,
.interior-gallery img.enlarged {
    filter: brightness(1.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    z-index: 999 !important;
    opacity: 1 !important;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important,
                filter 0.3s ease !important,
                box-shadow 0.3s ease !important,
                opacity 0.3s ease !important;
}

.interior-gallery img:nth-child(1) {
    transform: scale(1.2) translateX(calc(15px + var(--hover-x)));
    z-index: 1;
    position: relative;
}

.interior-gallery img:nth-child(1):hover,
.interior-gallery img:nth-child(1):active,
.interior-gallery img:nth-child(1).enlarged {
    transform: scale(1.5) translateX(calc(15px + var(--hover-x)));
}

.interior-gallery img:nth-child(2) {
    z-index: 2;
    position: relative;
    transform: translateX(calc(15px + var(--hover-x)));
}

.interior-gallery img:nth-child(2):hover,
.interior-gallery img:nth-child(2):active,
.interior-gallery img:nth-child(2).enlarged {
    transform: scale(1.35) translateX(calc(15px + var(--hover-x)));
}

.interior-gallery img:nth-child(3) {
    transform: scale(1.1) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
    position: relative;
    z-index: 3;
}

.interior-gallery img:nth-child(3):hover,
.interior-gallery img:nth-child(3):active,
.interior-gallery img:nth-child(3).enlarged {
    transform: scale(1.45) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
}

.interior-gallery img:nth-child(4) {
    margin-top: clamp(250px, 45vw, 1400px);
    transform: scale(1.25) translateX(calc(20px + var(--hover-x)));
}

.interior-gallery img:nth-child(4):hover,
.interior-gallery img:nth-child(4):active,
.interior-gallery img:nth-child(4).enlarged {
    transform: scale(1.6) translateX(calc(20px + var(--hover-x)));
}

.interior-gallery img:nth-child(5) {
    margin-top: clamp(200px, 35vw, 1200px);
    transform: scale(1.1) translateX(calc(20px + var(--hover-x)));
}

.interior-gallery img:nth-child(5):hover,
.interior-gallery img:nth-child(5):active,
.interior-gallery img:nth-child(5).enlarged {
    transform: scale(1.45) translateX(calc(20px + var(--hover-x)));
}

.interior-gallery img:nth-child(6) {
    margin-top: clamp(250px, 45vw, 1400px);
    transform: scale(1.05) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
}

.interior-gallery img:nth-child(6):hover,
.interior-gallery img:nth-child(6):active,
.interior-gallery img:nth-child(6).enlarged {
    transform: scale(1.4) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
}

/* 스크롤 애니메이션 - 비율 유지하며 펼쳐지는 효과 */
@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: scale(1.2) translateX(calc(15px + var(--hover-x)));
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        transform: scale(1.2) translateX(calc(15px + var(--hover-x)));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateX(calc(15px + var(--hover-x)));
        clip-path: inset(100% 0 0 0);
    }
    to {
        opacity: 1;
        transform: translateX(calc(15px + var(--hover-x)));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: scale(1.1) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
        clip-path: inset(0 0 0 100%);
    }
    to {
        opacity: 1;
        transform: scale(1.1) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes slideFromLeft4 {
    from {
        opacity: 0;
        transform: scale(1.25) translateX(calc(20px + var(--hover-x)));
        clip-path: inset(0 100% 0 0);
    }
    to {
        opacity: 1;
        transform: scale(1.25) translateX(calc(20px + var(--hover-x)));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes slideFromBottom5 {
    from {
        opacity: 0;
        transform: scale(1.1) translateX(calc(20px + var(--hover-x)));
        clip-path: inset(0 0 100% 0);
    }
    to {
        opacity: 1;
        transform: scale(1.1) translateX(calc(20px + var(--hover-x)));
        clip-path: inset(0 0 0 0);
    }
}

@keyframes slideFromRight6 {
    from {
        opacity: 0;
        transform: scale(1.05) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
        clip-path: inset(0 0 0 100%);
    }
    to {
        opacity: 1;
        transform: scale(1.05) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px));
        clip-path: inset(0 0 0 0);
    }
}

.interior-gallery img:nth-child(1).reveal {
    animation-name: slideFromLeft;
    animation-delay: 0s;
}

.interior-gallery img:nth-child(2).reveal {
    animation-name: slideFromBottom;
    animation-delay: 0.4s;
}

.interior-gallery img:nth-child(3).reveal {
    animation-name: slideFromRight;
    animation-delay: 0.8s;
}

.interior-gallery img:nth-child(4).reveal {
    animation-name: slideFromLeft4;
    animation-delay: 0s;
}

.interior-gallery img:nth-child(5).reveal {
    animation-name: slideFromBottom5;
    animation-delay: 0.4s;
}

.interior-gallery img:nth-child(6).reveal {
    animation-name: slideFromRight6;
    animation-delay: 0.8s;
}

.bottom-box {
    position: absolute;
    top: clamp(40vh, 60vw, 86vh);
    left: 0;
    width: 100%;
    background-color: #E5D84F;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    overflow: visible;
    will-change: position, transform;
}

.bottom-box-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, 1.5vw, 20px);
    padding: clamp(3px, 0.8vh, 10px) 10px;
    min-height: clamp(2vh, 4vh, 6vh);
    width: 100%;
}

.bottom-text {
    font-family: 'Brice', sans-serif;
    font-size: clamp(10px, 2.2vw, 34px);
    font-weight: 900;
    color: #fff;
    letter-spacing: clamp(0px, 0.2vw, 2px);
    white-space: nowrap;
    flex-shrink: 0;
}

.star-icon {
    font-size: clamp(12px, 2.5vw, 39px);
    color: #fff;
    flex-shrink: 0;
}

/* 모바일 최적화 */
@media screen and (max-width: 768px) {
    .bottom-box-content {
        gap: clamp(2px, 0.8vw, 6px);
        padding: 3px 5px;
        min-height: 2.5vh;
    }

    .bottom-text {
        font-size: clamp(7px, 1.8vw, 14px);
        letter-spacing: 0px;
    }

    .star-icon {
        font-size: clamp(9px, 2vw, 16px);
    }

    /* 모바일 갤러리 간격 조정 */
    .interior-gallery {
        padding-top: clamp(80px, 15vh, 200px);
        gap: clamp(5px, 1vw, 10px);
        width: 88%;
        margin: 0 auto;
    }

    .interior-gallery img:nth-child(4) {
        margin-top: clamp(120px, 30vw, 300px);
    }

    .interior-gallery img:nth-child(5) {
        margin-top: clamp(90px, 22vw, 220px);
    }

    .interior-gallery img:nth-child(6) {
        margin-top: clamp(140px, 35vw, 340px);
    }

    /* 모바일 호버/터치 확대 */
    .interior-gallery img:nth-child(1):hover,
    .interior-gallery img:nth-child(1):active,
    .interior-gallery img:nth-child(1).enlarged {
        transform: scale(1.7) translateX(calc(15px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(2):hover,
    .interior-gallery img:nth-child(2):active,
    .interior-gallery img:nth-child(2).enlarged {
        transform: scale(1.6) translateX(calc(15px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(3):hover,
    .interior-gallery img:nth-child(3):active,
    .interior-gallery img:nth-child(3).enlarged {
        transform: scale(1.65) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px)) !important;
    }

    .interior-gallery img:nth-child(4):hover,
    .interior-gallery img:nth-child(4):active,
    .interior-gallery img:nth-child(4).enlarged {
        transform: scale(1.8) translateX(calc(20px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(5):hover,
    .interior-gallery img:nth-child(5):active,
    .interior-gallery img:nth-child(5).enlarged {
        transform: scale(1.65) translateX(calc(20px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(6):hover,
    .interior-gallery img:nth-child(6):active,
    .interior-gallery img:nth-child(6).enlarged {
        transform: scale(1.6) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px)) !important;
    }
}

@media screen and (max-width: 480px) {
    .bottom-box-content {
        gap: 2px;
        padding: 2px 3px;
        min-height: 2vh;
    }

    .bottom-text {
        font-size: clamp(5.5px, 1.5vw, 10px);
    }

    .star-icon {
        font-size: clamp(7px, 1.8vw, 12px);
    }

    /* 작은 모바일 갤러리 간격 조정 */
    .interior-gallery {
        padding-top: clamp(60px, 12vh, 150px);
        gap: clamp(4px, 0.8vw, 8px);
        width: 82%;
        margin: 0 auto;
    }

    .interior-gallery img:nth-child(4) {
        margin-top: clamp(100px, 25vw, 220px);
    }

    .interior-gallery img:nth-child(5) {
        margin-top: clamp(70px, 18vw, 180px);
    }

    .interior-gallery img:nth-child(6) {
        margin-top: clamp(120px, 30vw, 250px);
    }

    /* 작은 모바일 호버/터치 확대 - 더 크게 */
    .interior-gallery img:nth-child(1):hover,
    .interior-gallery img:nth-child(1):active,
    .interior-gallery img:nth-child(1).enlarged {
        transform: scale(1.9) translateX(calc(15px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(2):hover,
    .interior-gallery img:nth-child(2):active,
    .interior-gallery img:nth-child(2).enlarged {
        transform: scale(1.8) translateX(calc(15px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(3):hover,
    .interior-gallery img:nth-child(3):active,
    .interior-gallery img:nth-child(3).enlarged {
        transform: scale(1.85) translate(calc(clamp(-15px, -1vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px)) !important;
    }

    .interior-gallery img:nth-child(4):hover,
    .interior-gallery img:nth-child(4):active,
    .interior-gallery img:nth-child(4).enlarged {
        transform: scale(2.0) translateX(calc(20px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(5):hover,
    .interior-gallery img:nth-child(5):active,
    .interior-gallery img:nth-child(5).enlarged {
        transform: scale(1.85) translateX(calc(20px + var(--hover-x))) !important;
    }

    .interior-gallery img:nth-child(6):hover,
    .interior-gallery img:nth-child(6):active,
    .interior-gallery img:nth-child(6).enlarged {
        transform: scale(1.8) translate(calc(clamp(-20px, -1.5vw, -5px) + var(--hover-x)), clamp(20px, 3vw, 50px)) !important;
    }
}

@media screen and (max-width: 390px) {
    .bottom-text {
        font-size: 5px;
    }

    .star-icon {
        font-size: 6.5px;
    }

    .bottom-box {
        gap: 1.5px;
        padding: 2px 2px;
        min-height: 2vh;
    }
}

@media screen and (max-width: 360px) {
    .bottom-text {
        font-size: 4.5px;
    }

    .star-icon {
        font-size: 6px;
    }

    .bottom-box-content {
        gap: 1px;
        padding: 1px 1px;
        min-height: 1.5vh;
    }
}

.logo {
    position: fixed;
    top: clamp(25px, 7vw, 100px);
    left: 10%;
    transform: translateX(-50%);
    z-index: 100;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo img {
    height: clamp(35px, 7vw, 100px);
    width: auto;
    transition: height 0.3s ease;
}

.logo:hover {
    opacity: 0.8;
}

.nav-button {
    position: fixed;
    left: 92%;
    transform: translateX(-50%);
    z-index: 100;
    padding: clamp(5px, 1.2vw, 16px) clamp(12px, 3vw, 40px);
    background-color: rgba(255, 255, 255, 0.05);
    color: #000;
    text-decoration: none;
    font-family: 'RadiateSans', sans-serif;
    font-size: clamp(10px, 1.6vw, 22px);
    font-weight: 600;
    border-radius: clamp(20px, 3vw, 50px);
    cursor: pointer;
    transition: all 0.4s ease;
    border: 1.5px solid #000;
    backdrop-filter: blur(5px);
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 0.3);
}

.nav-button:hover,
.nav-button.active {
    background-color: rgba(229, 216, 79, 0.4);
    border-color: #000;
    box-shadow: 0 0 30px 15px rgba(229, 216, 79, 0.3);
}

.food-button {
    top: 270px;
    transform: translateX(-50%) rotate(-15deg);
}

.info-button {
    top: 370px;
    padding: clamp(5px, 1.2vw, 16px) clamp(14px, 3.3vw, 45px);
    left: 94%;
    transform: translateX(-50%) rotate(15deg);
}

.insta-button {
    top: 450px;
    left: 93%;
    width: clamp(60px, 10vw, 135px);
    height: clamp(60px, 10vw, 135px);
    padding: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%) rotate(-5deg);
    font-size: clamp(10px, 1.6vw, 22px);
}

/* 반응형 디자인 - 1440px */
@media (max-width: 1440px) {
    .background-slider,
    .background-overlay {
        height: 82vh;
    }

    .bottom-box {
        top: 82vh;
    }

    .white-cover {
        top: calc(82vh + 6vh);
    }
}

/* 반응형 디자인 - 1200px */
@media (max-width: 1200px) {
    .background-slider,
    .background-overlay {
        height: 78vh;
    }

    .bottom-box {
        top: 78vh;
    }

    .white-cover {
        top: calc(78vh + 6vh);
    }

    .logo img {
        height: 90px;
    }
}

/* 반응형 디자인 - 1100px */
@media (max-width: 1100px) {
    .nav-button {
        left: 90%;
    }

    .info-button {
        left: 92%;
    }

    .insta-button {
        left: 91%;
    }
}

/* 반응형 디자인 - 태블릿 */
@media (max-width: 1024px) {
    .background-slider,
    .background-overlay {
        height: 74vh;
    }

    .bottom-box {
        top: 74vh;
    }

    .white-cover {
        top: calc(74vh + 6vh);
    }

    .logo img {
        height: 80px;
    }

    .nav-button {
        font-size: 18px;
        padding: 14px 35px;
        left: 88%;
    }

    .info-button {
        padding: 14px 40px;
        left: 90%;
    }

    .insta-button {
        width: 90px;
        height: 90px;
        font-size: 18px;
        left: 89%;
    }
}

/* 반응형 디자인 - 950px */
@media (max-width: 950px) {
    .nav-button {
        left: 86%;
    }

    .info-button {
        left: 88%;
    }

    .insta-button {
        left: 87%;
    }
}

/* 반응형 디자인 - 900px */
@media (max-width: 900px) {
    .background-slider,
    .background-overlay {
        height: 68vh;
    }

    .bottom-box {
        top: 68vh;
    }

    .white-cover {
        top: calc(68vh + 6vh);
    }

    .logo {
        left: 10%;
    }

    .logo img {
        height: 75px;
    }

    .nav-button {
        left: 85%;
        font-size: 19px;
        padding: 14px 35px;
    }

    .info-button {
        left: 87%;
    }

    .insta-button {
        left: 86%;
        width: 85px;
        height: 85px;
    }
}

/* 반응형 디자인 - 태블릿 가로 배치 */
@media (max-width: 768px) and (min-width: 601px) {
    .background-slider,
    .background-overlay {
        height: 50vw;
    }

    .bottom-box {
        top: 50vw;
    }

    .white-cover {
        top: calc(50vw + 6vh);
    }

    .logo {
        top: 35px;
        left: 10%;
    }

    .logo img {
        height: 55px;
    }

    .nav-button {
        font-size: 16px;
        padding: 10px 22px;
        top: 40px;
    }

    .food-button {
        left: 40%;
    }

    .info-button {
        top: 40px;
        padding: 10px 24px;
        left: 62%;
    }

    .insta-button {
        top: 40px;
        left: 84%;
        width: 75px;
        height: 75px;
        font-size: 16px;
    }
}

/* 반응형 디자인 - 모바일 */
@media (max-width: 600px) {
    .background-slider,
    .background-overlay {
        height: 55vw;
    }

    .bottom-box {
        top: 55vw;
    }

    .white-cover {
        top: calc(55vw + 6vh);
    }

    .logo {
        top: 30px;
        left: 15%;
    }

    .logo img {
        height: 45px;
    }

    .nav-button {
        font-size: 12px;
        padding: 7px 16px;
        top: 35px;
    }

    .food-button {
        left: 40%;
    }

    .info-button {
        top: 35px;
        padding: 7px 18px;
        left: 62%;
    }

    .insta-button {
        top: 35px;
        left: 84%;
        width: 60px;
        height: 60px;
        font-size: 12px;
    }
}


/* 반응형 디자인 - 작은 모바일 */
@media (max-width: 480px) {
    .background-slider,
    .background-overlay {
        height: 60vw;
    }

    .bottom-box {
        top: 60vw;
    }

    .white-cover {
        top: calc(60vw + 6vh);
    }

    .logo {
        top: 25px;
        left: 13%;
    }

    .logo img {
        height: 35px;
    }

    .nav-button {
        font-size: 10px;
        padding: 5px 12px;
        top: 30px;
    }

    .food-button {
        left: 38%;
    }

    .info-button {
        top: 30px;
        padding: 5px 14px;
        left: 60%;
    }

    .insta-button {
        top: 30px;
        left: 82%;
        width: 53px;
        height: 53px;
        font-size: 10px;
    }
}

/* PC 버전 갤러리 상단 여백 */
@media screen and (min-width: 769px) {
    .interior-gallery {
        padding-top: clamp(550px, 35vh, 900px) !important;
    }

    .interior-gallery img:nth-child(4) {
        margin-top: clamp(300px, 45vw, 1000px) !important;
    }

    .interior-gallery img:nth-child(5) {
        margin-top: clamp(200px, 35vw, 800px) !important;
    }

    .interior-gallery img:nth-child(6) {
        margin-top: clamp(300px, 45vw, 1000px) !important;
    }
}