/**
 * RestArt Theme — main.css
 */

/* ============================================================
   폰트 & 기본
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

/* body {
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #FDFDFD;
    color: #111111;
    margin: 0;
} */

/* .font-serif {
    font-family: 'Playfair Display', 'Noto Serif KR', Georgia, serif;
} */

::selection { background:#111; color:#fff; }

/* ============================================================
   HEADER
   홈 투명 모드: mix-blend-difference 로 배경에 반응
   ============================================================ */
#site-header {
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* 홈 투명 상태: 검정 배경 위에서 흰 글자 */
#site-header.header-transparent {
    /* mix-blend-difference 대신 단순 흰 글자 — 브라우저 호환성 우선 */
    color: #ffffff;
}

@media (max-width: 1279px) {
    /* 모바일: 투명 헤더에 반투명 배경 */
    #site-header[data-transparent="true"] {
        background: rgba(0,0,0,0.25) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

/* ============================================================
   ZOOM HERO
   ============================================================ */
#zoom-hero {
    /* 전체 흑색 배경 보장 */
    background: #000 !important;
}

#hero-sticky {
    /* perspective 는 JS에서 assets에 직접 적용 */
}

#hero-assets {
    transform-origin: center center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.hero-item {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Hero 이미지 hover: 살짝 밝아짐 */
.hero-item:hover img {
    transform: scale(1.04);
    transition: transform 0.6s ease;
}

/* ============================================================
   BOOKLET SECTION
   ============================================================ */
#booklet-container {
    transform-style: preserve-3d;
}

.booklet-card {
    transform-origin: bottom left;
    transform-style: preserve-3d;
    will-change: transform;
    backface-visibility: hidden;
}

/* ============================================================
   MARQUEE
   ============================================================ */
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    display: flex;
    animation: marquee 28s linear infinite;
    will-change: transform;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* ============================================================
   섹션 구분선 (명확한 경계)
   ============================================================ */
.section-divider {
    width: 100%;
    height: 1px;
    background: #EAEAEA;
    margin: 0;
}

/* ============================================================
   WooCommerce 기본 스타일 리셋
   ============================================================ */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info {
    border-top: none;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.875rem;
}

.woocommerce button.button,
.woocommerce a.button {
    background-color: #111;
    color: #fff;
    border-radius: 0;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 1rem 2rem;
    transition: background-color 0.2s;
}
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background-color: #333;
    color: #fff;
}

/* ============================================================
   스크롤바 숨기기
   ============================================================ */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   페이드인
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   아카이브 pagination
   ============================================================ */

/* ============================================================
   라인클램프 (크로스브라우저)
   ============================================================ */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/**
 * RestArt Theme — main.css
 * 크로스플랫폼 폰트 + 전역 모바일 반응형
 */

/* ── 폰트 변수 ── */
:root {
    --font-serif: 'Cormorant Garamond', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-sans:  'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --color-bg:   #F9F8F5;
    --color-text: #111111;
    --color-border: #EAEAEA;
    --color-surface: #F9F9F9;
}

*, *::before, *::after { box-sizing:border-box; }

html { background:#fff; }

body {
    font-family: var(--font-sans);
    background:  #F9F8F5;
    color:       var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

/* ── 세리프 클래스 ── */
.font-serif, h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 400;
}

::selection { background:#111; color:#fff; }

/* ── Hero 이미지 위치 클래스 ── */
.hero-item-pos-top_left    { top:15%; left:10%; width:clamp(130px,20vw,320px); aspect-ratio:3/4; }
.hero-item-pos-bottom_right{ bottom:18%; right:8%; width:clamp(120px,18vw,280px); aspect-ratio:1/1; }
.hero-item-pos-center_right{ top:38%; right:4%; width:clamp(160px,26vw,420px); aspect-ratio:16/9; }
.hero-item-pos-bottom_left { bottom:10%; left:18%; width:clamp(90px,12vw,190px); aspect-ratio:4/5; }
.hero-item-pos-top_right   { top:6%; right:6%; width:clamp(110px,16vw,260px); aspect-ratio:4/5; }
/* 말풍선 위치 */
.hero-item-pos-mid_left    { top:45%; left:3%; max-width:clamp(140px,16vw,240px); }
.hero-item-pos-top_center  { top:8%;  left:35%; max-width:clamp(140px,16vw,240px); }
.hero-item-pos-mid_right   { top:30%; right:3%; max-width:clamp(140px,16vw,240px); }
.hero-item-pos-bottom_center{ bottom:14%; left:40%; max-width:clamp(140px,16vw,240px); }

/* 모바일: Hero 이미지 크기 축소 */
@media (max-width:768px) {
    .hero-item-pos-top_left    { width:clamp(90px,30vw,160px); top:12%; left:4%; }
    .hero-item-pos-bottom_right{ width:clamp(80px,28vw,140px); bottom:22%; right:4%; }
    .hero-item-pos-center_right{ width:clamp(100px,38vw,180px); top:42%; right:2%; }
    .hero-item-pos-bottom_left { width:clamp(70px,22vw,110px); bottom:14%; left:10%; }
    .hero-item-pos-top_right   { display:none; }  /* 모바일: 5번째 이미지 숨김 */
    .hero-item-pos-mid_left,
    .hero-item-pos-top_center,
    .hero-item-pos-mid_right,
    .hero-item-pos-bottom_center { max-width:clamp(120px,38vw,180px); font-size:10px; }
}

/* ── Booklet ── */
#booklet-wrap { perspective:1200px; }
.booklet-card { will-change:transform; }

/* ── Marquee ── */
@keyframes marquee {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
.animate-marquee { display:flex; animation:marquee 28s linear infinite; will-change:transform; }
.animate-marquee:hover { animation-play-state:paused; }
.hide-scrollbar::-webkit-scrollbar { display:none; }
.hide-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }

/* ── 페이지 공통 패딩 (모바일) ── */
@media (max-width:768px) {
    main { overflow-x:hidden; }
    /* archive 그리드 */
    .artwork-grid  { grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; }
    .goods-grid    { grid-template-columns:repeat(2,1fr) !important; gap:1rem !important; }
    /* 텍스트 크기 축소 */
    .section-title { font-size:clamp(28px,7vw,42px) !important; }
}

/* ── WooCommerce 리셋 ── */
.woocommerce button.button, .woocommerce a.button {
    background:#111; color:#fff; border-radius:0;
    font-family:var(--font-sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    padding:1rem 2rem; transition:background .2s;
}
.woocommerce button.button:hover, .woocommerce a.button:hover { background:#333; color:#fff; }

/* ── Pagination ── */
.page-numbers { display:inline-flex; gap:.5rem; justify-content:center; width:5%; margin-top:2rem; }
.page-numbers a, .page-numbers span { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--color-border); font-size:12px; text-decoration:none; color:#111; transition:background .2s; }
.page-numbers.current { background: #ffffff; color: red;  }
a.page-numbers:hover { background:#ffffff; color: gray;  }

/* ── 라인클램프 ── */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ── 모바일 섹션 간격 ── */
@media (max-width:768px) {
    section { padding-top:2rem !important; padding-bottom:2rem !important; }
    .pt-32 { padding-top:4rem !important; }
    .pb-40 { padding-bottom:4rem !important; }
    .space-y-40 > * + * { margin-top:4rem !important; }
}

/* 페이지 숫자 출력(4.2) */
.mt-16 .nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem; /* 숫자 사이의 간격 (조정 가능) */
}

.mt-16 .nav-links .page-numbers {
    display: inline-block;
    padding: 0.5rem; /* 숫자 클릭 영역 조절 */
    text-decoration: none;
}