/*
  Theme Name: musee-child
  Template: musee
*/

@font-face {
    font-family: 'Pretendard';
	src: url('font/PretendardVariable.woff2') format('woff2') tech('variations'),
	     url("font/PretendardVariable.woff2") format("woff2-variations"),
}

@font-face {
    font-family: 'Moniqa';
    src: url('font/Moniqa-Display.otf') format('opentype');
    font-weight: 500;
    font-stretch: 50% 200%;    
}

@font-feature-values "Moniqa" {
    @stylistic {
        fancy-style: 1;   /* 폰트가 지원하는 스타일 세트 번호(ss01 등) */
        alternate-a: 2;
    }
}

body {
    font-family: 'Pretendard', sans-serif;
}

.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
    background-color: var(--wp--preset--color--contrast);
    border-color: var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
}

.wp-block-query-title {
    box-sizing: border-box;
    font-family: 'Moniqa';
    text-transform: uppercase !important;
    font-variant-alternates: stylistic(fancy-style);
    font-feature-settings: "ss01" 1;
    font-size: 2.8em !important;
}

/* Header */
.wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
    margin-top: 0;
    margin-right: var(--wp--preset--spacing--40);
    margin-bottom: 0;
    margin-left: var(--wp--preset--spacing--40);
}

/* 페이지 타이틀 관련 */
body.home .wp-block-column.is-layout-flow.wp-block-column-is-layout-flow .wp-block-post-title,
body.woocommerce-cart h1.alignwide.wp-block-post-title {
    display: none;
}

/* DIV full-width 관련 */
.woocommerce-account .wp-block-post-title, .woocommerce-account main .woocommerce, 
.woocommerce-cart .wp-block-post-title, .woocommerce-cart main .woocommerce, 
.woocommerce-checkout .wp-block-post-title, .woocommerce-checkout main .woocommerce {
    max-width: unset;
}

/* 메인 인피니트 마퀴 */
/* 마퀴 전체 컨테이너 */
.custom-marquee-section {
    width: 100%;
    overflow: hidden;
    background-color: transparent; /* 배경색 필요시 변경 */
    padding: 0;
}

/* 공통 트랙 설정 */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    width: 100%;
    margin-bottom: 20px; /* 이미지와 텍스트 사이 간격 */
}

.marquee-track {
    display: flex;
    width: max-content; /* 내용물만큼 늘어남 */
    animation: marquee-scroll var(--speed, 30s) linear infinite;
}

/* 애니메이션 키프레임 */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 1. 이미지 마퀴 스타일 */
.image-marquee {
    --speed: 25s; /* 속도 조절: 숫자가 작을수록 빠릅니다 (200의 느낌을 찾으십시오) */
}

.marquee-group {
    display: flex;
    gap: 1em; /* 사진 사이 간격 */
    padding-right: 1em; /* 그룹 간 간격 */
}

.img-item {
    width: 30rem; /* 이미지 너비 */
    aspect-ratio: 3 / 4; /* 3:4 비율 고정 */
    overflow: hidden;
    position: relative;
}

.img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 모양 변형 클래스 */
.img-item.rect {
    border-radius: 0;
}

.img-item.arch {
    border-radius: 20em 20em 0 0; /* 윗부분 둥근 아치 */
}

.img-item.oval {
    border-radius: 20em;
}

/* 2. 텍스트 마퀴 스타일 */
/* --- 텍스트 마퀴 전용 컨테이너 --- */
.text-marquee-container {
    width: 100%;
    overflow: hidden;
    background-color: transparent; /* 배경색 필요시 변경 */
    padding: 1em 0;
    display: flex;
    flex-direction: column;
    gap: 0; /* 줄 사이 간격 (필요하면 10px 등으로 조정) */
    border-top: 1px solid;
}

/* 개별 줄 설정 */
.text-marquee-row {
    display: flex;
    overflow: hidden;
    width: 100%;
    /* 줄 높이 고정 (요청하신 50px 근처) */
    height: 3.2em; 
    align-items: center; /* 텍스트 세로 중앙 정렬 */
    margin-bottom: 0;
}

/* 트랙 애니메이션 공통 */
.text-marquee-row .marquee-track {
    display: flex;
    white-space: nowrap; /* 줄바꿈 방지 */
    width: max-content;
    animation: marquee-scroll 80s linear infinite; /* 기본 속도 */
}

.text-marquee-row .text-group {
    display: flex;
    padding-right: 20px; /* 문장 끝과 다음 문장 시작 사이의 여백 */
}

/* --- [중요] 텍스트 스타일 커스터마이징 --- */
.marquee-text-style {
    font-family: "Moniqa"; /* 원하는 폰트로 변경 */
    font-size: 3em;    /* 텍스트 크기 */
    line-height: 1;
    letter-spacing: -0.02em; /* 자간 조정 */
    text-transform: uppercase; /* 대문자 고정 */
    font-variant-alternates: stylistic(fancy-style);
    font-feature-settings: "ss01" 1;    
}

/* --- 애니메이션 키프레임 --- */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- [핵심] 줄마다 시작 지점(Delay) 다르게 설정 --- */
/* 음수(-) 값을 주면 애니메이션이 이미 진행된 상태에서 시작하는 것처럼 보입니다. */

.line-1 .marquee-track {
    animation-delay: 0s;      /* 정직하게 0부터 시작 */
}

.line-2 .marquee-track {
    animation-delay: -15s;    /* 15초 진행된 위치에서 시작 (엇박자) */
}

.line-3 .marquee-track {
    animation-delay: -7s;     /* 7초 진행된 위치에서 시작 */
}

.line-4 .marquee-track {
    animation-delay: -25s;    /* 25초 진행된 위치에서 시작 */
}

/* 2번째, 4번째 줄의 트랙만 반대 방향으로 재생 */
.line-1 .marquee-track,
.line-3 .marquee-track {
    animation-direction: reverse;
}

/* 모바일 대응 (선택 사항) */
@media (max-width: 768px) {
    .img-item {
        width: 26rem; /* 모바일에서 조금 작게 */
    }
    .marquee-text-style {
        font-size: 2em; /* 모바일에서는 폰트 작게 */
    }
    .text-marquee-row {
        height: 2.4em;
    }
}





/* 상품목록 */
.wc-block-product-template__responsive {
    grid-gap: 0;
}

/* 상품목록 카테고리 하위메뉴 표시 */
/* 하위 카테고리 네비게이션 컨테이너 */
.ltc-subcat-nav {
    margin-bottom: 30px; /* 본문과의 간격 */
    width: 100%;
}

/* 리스트 (ul) 초기화 및 정렬 */
.ltc-subcat-list {
    list-style: none !important; /* 불릿 제거 */
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap; /* 모바일에서 줄바꿈 허용 */
    gap: 12px; /* 버튼 사이 간격 */
    justify-content: flex-start; /* 왼쪽 정렬 (중앙은 center) */
    font-size: 1rem;
}

/* 리스트 아이템 (li) */
.ltc-subcat-item {
    margin: 0 !important;
    padding: 0 !important;
}

/* 링크 버튼 (a) 디자인 */
.ltc-subcat-link {
    display: inline-block;
    padding: 0;
    font-size: 1em;
    text-decoration: none; /* 밑줄 제거 */
    transition: all 0.2s ease;
}

/* 마우스 올렸을 때 (Hover) */
.ltc-subcat-link:hover {
    text-decoration: underline;
}

/* 상품목록 관련상품 썸네일사이 간격 죽이기 */
ul.wc-block-product-template.is-flex-container {
    gap: unset;
}
@media (min-width: 600px) {
    .wc-block-product-template.is-flex-container.is-flex-container.columns-4>li {
        width: calc(25%);
    }
}





/* 단일상품 */
.wp-block-add-to-cart-with-options.wc-block-add-to-cart-with-options.cart.wp-block-woocommerce-add-to-cart-with-options {
    margin-top: 0;
}
.wc-block-components-product-stock-indicator.wp-block-woocommerce-product-stock-indicator.wc-block-components-product-stock-indicator--out-of-stock {
    display: none;
}

.wp-block-woocommerce-add-to-cart-form .variations_button, .wp-block-woocommerce-add-to-cart-form form.cart {
    display: inline-block;
    padding: 0;
}

.wp-block-add-to-cart-with-options.wc-block-add-to-cart-with-options.cart.wp-block-woocommerce-add-to-cart-with-options 
.wp-block-button.wc-block-components-product-button {
    width: 100%;
    margin-bottom: .3em;
}

.woocommerce div.product form.cart button.single_add_to_cart_button, .woocommerce div.product form.cart button[name=add-to-cart] {
    width: 100%;
    font-size: medium;
}

button.wc-buy-now-btn {
    background-color: var(--wp--preset--color--tertiary);
    border: 2px solid var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--contrast);
    font-size: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.227), 1rem);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: inherit;
    padding-top: var(--wp--preset--spacing--30);
    padding-right: var(--wp--preset--spacing--50);
    padding-bottom: var(--wp--preset--spacing--30);
    padding-left: var(--wp--preset--spacing--50);
    text-decoration: none;
    width: 100%;
}

button.wc-buy-now-btn:hover {
    background-color: var(--wp--preset--color--contrast);
    border: 2px solid var(--wp--preset--color--contrast);
    color: var(--wp--preset--color--base);
    cursor: pointer;
}

html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
    box-shadow: inset 0 -1px 0 rgba(61, 50, 51, 0.25);
    font-size: 1rem;
}

html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li {
    margin-right: 1em;
    font-size: 1rem;
}

html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active {
    border-bottom-width: 1px;
    border-bottom-color: var(--wp--preset--color--contrast);
    box-shadow: 0 1px 0 var(--wp--preset--color--contrast);
    font-size: 1rem;
    border-left: 0;
    border-right: 0;
}

html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active a, html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:focus-within a, html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
    padding: 1em 0;
    font-weight: 500;
    font-size: 1rem;
}

.woocommerce div.product .woocommerce-tabs .panel {
    font-size: 1rem;
    letter-spacing: 0;
    font-weight: 500;
    padding-right: var(--wp--preset--spacing--40);
    padding-left: var(--wp--preset--spacing--40);
}

/* 단일상품 Sticky Product Info */
/* 데스크탑(PC) 화면 (768px 이상) */
@media (min-width: 768px) {

    /* 1. 전체 레이아웃 (좌우 배치 및 Sticky 준비) */
    .wp-block-columns {
        align-items: flex-start !important; /* 중요: 높이 꽉 채우지 않기 */
        position: relative;
    }

    /* 2. 왼쪽: 이미지 영역 (강제 세로 나열) */
    .wp-block-columns .wp-block-column:first-child {
        width: 60% !important;
        max-width: 60% !important;
    }

    /* 슬라이더 껍데기 강제 해제 (Nuclear Option) */
    .woocommerce-product-gallery,
    .woocommerce-product-gallery .flex-viewport,
    .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important; /* 숨겨진 이미지 보이게 하기 */
        transform: none !important; /* 이동 효과 제거 */
    }

    /* 개별 이미지 강제 노출 */
    .woocommerce-product-gallery .woocommerce-product-gallery__image {
        width: 100% !important;
        display: block !important;
        float: none !important;
        margin-bottom: 20px !important; /* 이미지 사이 간격 */
        opacity: 1 !important; /* 투명도 강제 해제 */
    }

    /* 슬라이더 점(네비게이션) 숨기기 */
    .flex-control-nav, .flex-direction-nav {
        display: none !important;
    }

    /* 3. 오른쪽: 상품 정보 (Sticky 적용) */
    .wp-block-columns .wp-block-column:last-child {
        width: 35% !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 76px !important; /* 헤더 높이만큼 띄우기 */
        z-index: 50;
    }
    
    /* ... 기존 Sticky 코드는 그대로 두세요 ... */
    
    /* 갤러리 이미지 강제 확장 */
    .woocommerce-product-gallery__wrapper,
    .woocommerce-product-gallery__image {
        display: block !important;
        width: 100% !important; /* 무조건 꽉 채우기 */
        max-width: 100% !important;
        margin: 0 0 20px 0 !important; /* 아래 여백 20px */
        padding: 0 !important;
        flex: none !important; /* 혹시 모를 flex 속성 무시 */
    }

    /* 이미지 파일 자체도 꽉 채우기 */
    .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }    

    /* ... (기존 Sticky 관련 코드는 유지) ... */
    
    /* 1. 갤러리 썸네일 '그리드' 해제 */
    .woocommerce-product-gallery__wrapper {
        display: block !important; /* 가로 배열 방지 */
    }

    /* 2. 개별 이미지 박스 100% 강제 */
    .woocommerce-product-gallery__image,
    .woocommerce-product-gallery .flex-viewport .slides > li, /* 슬라이더 흔적이 남았을 경우 대비 */
    figure.woocommerce-product-gallery__image {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important; /* 옆으로 붙는 성질 제거 */
        margin: 0 0 20px 0 !important; /* 아래 간격 20px */
        flex: none !important; /* Flex 무시 */
    }

    /* 3. 이미지 파일 자체 꽉 채우기 */
    .woocommerce-product-gallery__image img,
    figure.woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 !important;
    }
    
    .woocommerce .wp-block-woocommerce-product-image-gallery {
        max-width: unset;
    }
}










/* Mobile View */
@media (max-width: 768px) {
    /* Header */
    .wp-container-core-group-is-layout-2e1b126f {
        gap: unset;
        justify-content: left;
    }
    .wp-block-social-links, .wp-block-social-links.has-normal-icon-size {
        margin-top: 0;
        margin-right: 0;
        margin-bottom: 0;
        margin-left: 0;
        line-height: 0;
        margin-top: 1em;
        margin-left: -4px;
    }
    body .is-layout-flex {
        display: block;
    }
    .wp-block-navigation.is-vertical {
        --navigation-layout-direction: unset;
        grid-gap: .6em;
        margin: .4em 0;
        font-size: 1.1em !important;
        font-weight: 400 !important;        
    }
    
    /* 상품목록 관련상품 썸네일사이 간격 죽이기 */
    .wc-block-product-template.is-flex-container.is-flex-container.columns-4>li {
        width: calc(50%);
    }
    
    /* 단일상품 탭 */
    html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs {
        display: flex;
        padding: 0 1em;
    }
    html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active {
        display: inline-block;
    }
    html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li.active a, html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li:focus-within a, html body .wp-block-woocommerce-product-details.is-style-minimal ul.tabs.wc-tabs li a {
        padding: 1em 0;
    }
}