/* ============================================================
   user.css
   index.php (메인페이지) 전용 스타일시트
   - 원본: index.php 인라인 <style> 블록에서 분리 (2026-07-14)
   - 팔레트: Deep Wine Red(#701a3f) + Elegant Gold(#d4af37)
   - 폰트: Outfit(영문) / Noto Sans KR(국문) — 로컬 셀프호스팅
     (vendor/google-fonts/fonts-premium.css)
   - 아이콘: Font Awesome 6 — 로컬 셀프호스팅 (vendor/font-awesome6/)
   ============================================================ */

:root {
    --color-primary: #701a3f;      /* Deep Wine Red */
    --color-gold: #d4af37;         /* Elegant Gold */
    --color-gold-light: #f5e7c1;
    --color-dark: #111317;         /* Near black */
    --color-bg-light: #fbf9f6;     /* Warm off-white */
    --color-border: #e6e2dd;       /* Beige/grey border */
    --color-text-main: #2b2d31;
    --color-text-muted: #6b7280;
    --font-kr: 'Noto Sans KR', sans-serif;
    --font-en: 'Outfit', sans-serif;

    /* 메인 배너와 상품 영역이 같은 좌우 폭을 쓰도록 공유하는 값.
       (미디어쿼리에서 --page-gutter만 바꾸면 둘이 함께 따라온다) */
    --page-max: 1500px;
    --page-gutter: 40px;
}

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

body {
    font-family: var(--font-kr);
    color: var(--color-text-main);
    background-color: #ffffff;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

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

.container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 4%;
}

/* --- Common Headings --- */
.section-header {
    text-align: center;
    margin-bottom: 45px;
}

.section-subtitle {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.03em;
}

.section-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.section-title a:hover { color: var(--color-primary); }

.section-desc {
    font-size: 15px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* --- Header Section --- */
header.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--color-border);
    height: 84px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.logo {
    display: flex;
    align-items: center;
    line-height: 0;
}

.logo a {
    display: inline-flex;
    align-items: center;
}

/* 텍스트 전용 한 줄 로고 (로고 텍스트 + STUDIO, 비율 약 6.9:1)
   메뉴 폰트(15px)와 같은 줄에서 자연스럽게 어울리는 크기 */
.logo img {
    height: 28px;
    width: auto;
    display: block;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.logo a:hover img {
    transform: scale(1.04);
}

.nav-menu {
    display: flex;
    height: 100%;
}

.nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    list-style: none;
}

.nav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    display: block;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-main);
    transition: color 0.3s ease;
    position: relative;
    cursor: pointer;
}

.nav-link:hover {
    color: var(--color-gold);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 22px;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: width 0.3s ease;
}

.nav-item:hover > .nav-link::after {
    width: calc(100% - 44px);
}

/* --- Dropdown Menu --- */
.dropdown-menu {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    min-width: 232px;
    width: max-content;
    background-color: #ffffff;
    border: 1px solid rgba(20, 15, 10, 0.05);
    border-radius: 14px;
    box-shadow:
        0 18px 45px rgba(40, 28, 12, 0.16),
        0 6px 16px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.28s ease,
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.28s;
    padding: 10px;
    list-style: none;
    text-align: left;
    z-index: 200;
}

/* nav-link 와 메뉴 사이의 투명 다리 — 마우스가 빈틈에서 끊기지 않게 한다 */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

/* 말풍선 꼬리 (상단 중앙의 작은 삼각) */
.dropdown-menu::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 42px;
    width: 13px;
    height: 13px;
    background: #ffffff;
    border-left: 1px solid rgba(20, 15, 10, 0.05);
    border-top: 1px solid rgba(20, 15, 10, 0.05);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
}

.nav-item:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text-main);
    border-radius: 9px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 항목 앞의 작은 점 — 호버 시 커지며 강조 */
.dropdown-link::before {
    content: '';
    flex-shrink: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gold);
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown-link:hover {
    background-color: var(--color-bg-light);
    color: var(--color-gold);
}

.dropdown-link:hover::before {
    opacity: 1;
    transform: scale(1.5);
}

.header-utilities {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 18px;
    color: var(--color-text-main);
}

.header-utilities i {
    cursor: pointer;
    transition: color 0.3s ease;
}

.header-utilities i:hover {
    color: var(--color-gold);
}

.header-util-link {
    color: var(--color-text-main);
    display: inline-flex;
    transition: color 0.3s ease;
}

.header-util-link:hover,
.header-util-link:hover i {
    color: var(--color-gold);
}

/* 장바구니 아이콘 수량 배지 (header.php $__cartCount — 0개면 미출력) */
.header-cart { position: relative; }

.cart-count-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: var(--font-en);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;   /* 클릭은 아이콘 링크가 받도록 */
}

/* --- Section 1: Hero Banner (관리형 슬라이드) ---
   슬라이드 내용은 data/hero_slides.php 에서 관리한다.
   배너 비율은 시안(1500 x 550)에 맞춰 고정 → 배경 이미지의 좌표가 그대로 유지된다. */
/* 화면 전체를 채우지 않고 좌우 여백을 둔 뒤 가운데 정렬한다.
   width를 명시하지 않으면 max-height + aspect-ratio 조합에서 브라우저가
   비율을 거꾸로 적용해 너비까지 묶어버리므로 width는 반드시 지정한다. */
.hero-banner {
    position: relative;
    overflow: hidden;
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--page-max);   /* 시안 원본 크기 이상으로는 늘리지 않는다 */
    margin: 32px auto 0;          /* 위쪽 여백 + 가운데 정렬 */
    aspect-ratio: 1500 / 550;
    min-height: 300px;
    max-height: 550px;          /* 시안 원본 높이 */
    border-radius: 12px;
    background: linear-gradient(135deg, #18191f 0%, #0a0b0e 100%);
    color: #ffffff;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 트랙 폭이 곧 배너 폭이므로 translateX(-100% × index)가 한 장씩 넘긴다 */
.hero-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 사진 배경(dark)일 때만 흰 글씨 가독성용 오버레이를 깐다.
   시안 배너(light)는 원본 색을 살려야 하므로 덮지 않는다. */
.hero-slide--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgba(10, 11, 14, 0.88) 0%,
        rgba(10, 11, 14, 0.68) 38%,
        rgba(10, 11, 14, 0.32) 100%);
    z-index: 1;
    pointer-events: none;
}

/* 유튜브 배경 영상 */
.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 16:9 영상을 배너 전체에 꽉 채우기 위해 넉넉히 키운 뒤 중앙 정렬 */
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.78vh;
    transform: translate(-50%, -50%);
    border: 0;
}

/* 슬라이드 전체 클릭 영역 (버튼보다 아래 레이어) */
.hero-slide-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* 텍스트 블록: 시안의 글자 위치(좌측 약 11.5%, 세로 중앙)에 고정 */
.hero-copy {
    position: absolute;
    z-index: 3;
    left: 11.5%;
    top: 50%;
    transform: translateY(-50%);
    max-width: 42%;
    pointer-events: none;   /* 배경 클릭을 막지 않는다 */
}

.hero-copy > * {
    pointer-events: auto;   /* 단, 버튼·링크는 클릭 가능 */
}

.hero-sub-title {
    display: inline-block;
    font-family: var(--font-en);
    font-size: clamp(12px, 1vw, 15px);
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
}

.hero-title {
    font-size: clamp(24px, 3.1vw, 44px);
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: clamp(16px, 2vw, 28px);
    word-break: keep-all;
}

.hero-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* 밝은 시안 배너용 — 브랜드 와인레드(--color-primary #701a3f)에서 파생한 로즈 핑크.
   이 스코프(.hero-slide--light) 안에서만 .btn-primary/.btn-secondary 를 덮어쓰므로
   주문·장바구니 등 다른 페이지의 같은 클래스 버튼에는 영향이 없다.
   #a8446b 은 배너의 크림색 배경에서 대비 4.69:1 (WCAG AA 통과) — 더 밝은 핑크로
   바꾸면 대비가 4.5 아래로 떨어지므로 주의. */
.hero-slide--light .hero-sub-title { color: #6b6459; }
.hero-slide--light .hero-title     { color: #2f3330; }
.hero-slide--light .btn-primary {
    background-color: #a8446b;
    border-color: #a8446b;
    color: #ffffff;
}
.hero-slide--light .btn-primary:hover {
    background-color: #8f3a5b;
    border-color: #8f3a5b;
    box-shadow: 0 5px 15px rgba(168, 68, 107, 0.3);
}
.hero-slide--light .btn-secondary {
    color: #a8446b;
    border-color: rgba(168, 68, 107, 0.45);
}
.hero-slide--light .btn-secondary:hover {
    background-color: rgba(168, 68, 107, 0.08);
    border-color: #a8446b;
}

/* 어두운 사진 배경용 */
.hero-slide--dark .hero-copy { color: #ffffff; }
.hero-slide--dark .hero-sub-title { color: var(--color-gold); text-transform: uppercase; }
.hero-slide--dark .hero-title     { color: #ffffff; }

/* 좌우 이동 버튼 */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(20, 22, 26, 0.35);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.hero-nav:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-dark);
}

.hero-nav-prev { left: 2%; }
.hero-nav-next { right: 2%; }

/* 인디케이터 */
.hero-dots {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    gap: 10px;
}

.hero-dot {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: rgba(20, 22, 26, 0.25);
    cursor: pointer;
    transition: background 0.3s ease, width 0.3s ease;
}

.hero-dot.is-active {
    width: 46px;
    background: var(--color-gold);
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .hero-slider-track { transition: none; }}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-gold);
    color: #ffffff;
    border: 1px solid var(--color-gold);
}

.btn-primary:hover {
    background-color: #c49e2e;
    border-color: #c49e2e;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #ffffff;
    transform: translateY(-2px);
}

/* --- Section 2 & 3: Product Grids --- */
.product-section {
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
}

.product-section:nth-of-type(even) {
    background-color: var(--color-bg-light);
}

/* 식전/식중/성장영상 영역의 좌우 끝을 메인 배너와 정확히 맞춘다 */
.product-section .container {
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--page-max);
    padding: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin: 0 0 45px 0;
}

.product-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}

.product-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    position: relative;
    background-color: #f3f3f3;
}

.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.product-card:hover .product-thumb img {
    transform: scale(1.08);
}

/* Overlay Play Button on Hover */
.thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.product-card:hover .thumb-overlay {
    opacity: 1;
}

.play-icon-glow {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    color: var(--color-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease;
}

.play-icon-glow:hover {
    transform: scale(1.1);
}

.badge-best {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--color-gold);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 5;
}

.product-info {
    padding: 20px;
}

.product-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.product-title a:hover { color: var(--color-primary); }

.product-desc {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 40px;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
}

.product-price {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
}

/* Two buttons row inside growth video card */
.growth-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}

.btn-card {
    font-size: 12px;
    font-weight: 600;
    padding: 8px;
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-card-outline {
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
}

.btn-card-outline:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-text-muted);
}

.btn-card-fill {
    background-color: var(--color-dark);
    color: #ffffff;
}

.btn-card-fill:hover {
    background-color: var(--color-gold);
}

.view-all-container {
    text-align: center;
}

.btn-view-all {
    border: 1px solid var(--color-dark);
    background: transparent;
    color: var(--color-dark);
    padding: 12px 35px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.btn-view-all:hover {
    background-color: var(--color-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- Section 5: Process Banner & Login --- */
.process-section {
    background-color: var(--color-bg-light);
    padding: 80px 0;
    border-bottom: 1px solid var(--color-border);
}

.process-title-box {
    text-align: center;
    margin-bottom: 40px;
}

.process-callout {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 20px;
}

.process-callout-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.process-callout-buttons .btn {
    padding: 10px 22px;
    font-size: 13px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 45px;
    position: relative;
}

.process-step {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
    position: relative;
    transition: all 0.3s ease;
}

.process-step:hover {
    transform: translateY(-5px);
    border-color: var(--color-gold);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.process-step-num {
    font-family: var(--font-en);
    font-size: 13px;
    font-weight: 800;
    color: var(--color-gold);
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.process-step-icon {
    font-size: 26px;
    color: var(--color-dark);
    margin-bottom: 15px;
}

.process-step-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.process-step-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Arrow connectors for desktop process steps */
@media (min-width: 992px) {
    .process-step:not(:last-child)::after {
        content: '\f054';
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: absolute;
        top: 50%;
        right: -15px;
        transform: translateY(-50%);
        font-size: 14px;
        color: var(--color-gold);
        z-index: 10;
        pointer-events: none;
    }}

/* --- Section 6: Video Mix Section --- */
.video-mix-section {
    padding: 85px 0;
    border-bottom: 1px solid var(--color-border);
}

.video-mix-card {
    background-color: #ffffff;
    border: 2px solid var(--color-dark);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}

.video-mix-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 40px;
    align-items: center;
}

.mix-content-box {
    padding-right: 20px;
}

.mix-badge {
    display: inline-block;
    background-color: var(--color-dark);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 15px;
    letter-spacing: 0.05em;
}

.mix-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.3;
    margin-bottom: 15px;
}

.mix-desc {
    font-size: 15.5px;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 30px;
    word-break: keep-all;
}

/* Styled diagram showing video mixing */
.diagram-container {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.diagram-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.video-node {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    width: 140px;
}

.video-node i {
    color: var(--color-primary);
}

.video-node:hover {
    border-color: var(--color-gold);
    transform: scale(1.03);
}

.plus-node {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.output-arrow {
    text-align: center;
    font-size: 20px;
    color: var(--color-text-muted);
    margin: 5px 0;
}

.output-node {
    background: linear-gradient(135deg, var(--color-dark) 0%, #20242d 100%);
    color: #ffffff;
    border: 1px solid var(--color-dark);
    border-radius: 10px;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.output-node:hover {
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
    border-color: var(--color-gold);
    transform: translateY(-2px);
}

.output-node i {
    color: var(--color-gold);
}

/* --- Section 7: FAQ / How-to Section --- */
.faq-section {
    padding: 60px 0;
    background-color: var(--color-dark);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.faq-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 20px 30px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
}

.faq-banner:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--color-gold);
}

.faq-banner-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.faq-banner-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.15);
    color: var(--color-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    animation: pulseGlow 2s infinite alternate ease-in-out;
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.2); }
    100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.5); }
}

.faq-banner-text h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.faq-banner-text p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.6);
}

.faq-banner-right {
    font-size: 20px;
    color: var(--color-gold);
}

/* Quick FAQ accordion content */
.faq-accordion-box {
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.faq-accordion-box .faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 22px;
}

.faq-question {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-gold-light);
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
}

.faq-answer {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* --- Section 8: Reviews (고객 후기구현) --- */
.reviews-section {
    padding: 85px 0;
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-bg-light);
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-bottom: 45px;
}

.review-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
    transition: all 0.3s ease;
}

.review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(212, 175, 55, 0.25);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04);
}

.stars-row {
    color: var(--color-gold);
    font-size: 13px;
    margin-bottom: 12px;
}

.stars-row .off { color: var(--color-border); }

.review-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.review-text {
    font-size: 13.5px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 15px;
    height: 65px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.review-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.review-author {
    font-weight: 600;
    color: var(--color-dark);
}

/* --- Section 9: Events --- */
.events-section {
    padding: 85px 0;
    border-bottom: 1px solid var(--color-border);
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 45px;   /* [전체 보기] 버튼과 간격 — product/reviews-grid(45px)와 통일 */
}

.event-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.06);
    border-color: rgba(212, 175, 55, 0.3);
}

.event-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #f3f3f3;
    overflow: hidden;
}

.event-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.event-card:hover .event-thumb img {
    transform: scale(1.06);
}

.event-info {
    padding: 20px;
}

.event-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 6px;
}

.event-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.event-title a:hover { color: var(--color-primary); }

.event-period {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.event-period i { margin-right: 4px; color: var(--color-gold); }

.event-desc {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 10px;
    height: 38px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.event-link {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.3s ease;
}

.event-card:hover .event-link {
    color: var(--color-dark);
}

/* --- Section 10: Blue Banner --- */
.blue-inquiry-section {
    background: linear-gradient(120deg, #9ad6f7 0%, #5cc0ef 55%, #12a6e6 100%);
    color: #004986;
    padding: 68px 0;
    overflow: hidden;
    position: relative;
}

/* 배경 워터마크 */
.blue-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-46%, -50%);
    font-family: var(--font-en);
    font-size: 150px;
    font-weight: 800;
    line-height: 1;
    color: rgba(255, 255, 255, 0.28);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.blue-banner-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 40px;
}

.blue-banner-text {
    position: relative;
}

.blue-banner-title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.3;
    color: #004986;
    word-break: keep-all;
}

.blue-banner-desc {
    font-size: 16px;
    color: #0a5a97;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.blue-banner-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blue-banner-buttons .btn {
    min-width: 180px;
    padding: 16px 34px;
    font-weight: 700;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 8px 18px rgba(15, 40, 90, 0.18);
}

.blue-btn-primary {
    background-color: #2f316e;   /* 짙은 인디고 */
}

.blue-btn-primary:hover {
    background-color: #24264f;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 40, 90, 0.28);
}

.blue-btn-secondary {
    background-color: #414eb6;   /* 중간 블루 */
}

.blue-btn-secondary:hover {
    background-color: #34409c;
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(15, 40, 90, 0.28);
}

/* 레트로 TV (SVG 일러스트) */
.retro-tv-wrapper {
    justify-self: end;
}

.retro-tv {
    display: block;
    width: 210px;
    height: auto;
    filter: drop-shadow(0 16px 26px rgba(9, 60, 105, 0.28));
}

/* --- Section 11: CS Info Strip & Footer --- */
.notice-strip {
    background-color: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    padding: 15px 0;
    font-size: 13.5px;
}

.notice-strip-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notice-main {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.notice-badge {
    background: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-en);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.05em;
}

/* CS Block Section */
.cs-block-section {
    padding: 60px 0;
    border-bottom: 1px solid var(--color-border);
}

.cs-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 40px;
    align-items: center;
}

.cs-call {
    display: flex;
    flex-direction: column;
}

.cs-call-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.cs-call-number {
    font-size: 34px;
    font-weight: 800;
    color: var(--color-dark);
    letter-spacing: -0.5px;
    margin-bottom: 5px;
}

.cs-call-subnumber {
    font-size: 14px;
    color: var(--color-text-muted);
}

.cs-hours {
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    padding: 0 40px;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.cs-hours h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.cs-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.btn-cs {
    background-color: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-text-main);
    padding: 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.btn-cs:hover {
    background-color: var(--color-dark);
    color: #ffffff;
    border-color: var(--color-dark);
}

/* Footer Corporate Info */
footer {
    background-color: #ffffff;
    padding: 40px 0 60px;
}

.footer-logo {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 20px;
}

/* 헤더와 동일한 가로형 텍스트 로고 */
.footer-logo img {
    height: 28px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.footer-info {
    font-size: 12px;
    line-height: 2;
    color: var(--text-muted);
    margin-bottom: 25px;
}

.footer-info span {
    margin: 0 8px;
    color: var(--color-border);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    padding-top: 25px;
    font-size: 12px;
    color: var(--color-text-muted);
}

.footer-socials {
    display: flex;
    gap: 15px;
    font-size: 16px;
}

.footer-socials a:hover {
    color: var(--color-gold);
}

/* --- Animations --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Responsive Styles --- */
@media (max-width: 991px) {
    /* .nav-menu 는 파일 하단 "모바일 내비게이션" 블록에서 드로어 패널로 재정의 */

    header.main-header {
        height: 72px;
    }

    .logo img {
        height: 24px;
    }

    /* 태블릿 이하: 좌우 여백을 줄인다 (배너·상품영역이 함께 따라온다) */
    :root {
        --page-gutter: 20px;
    }

    .hero-banner {
        margin-top: 20px;
        aspect-ratio: 16 / 9;
        max-height: 480px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-copy {
        left: 7%;
        max-width: 62%;
    }

    .hero-nav {
        width: 40px;
        height: 40px;
    }

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-mix-grid {
        grid-template-columns: 1fr;
    }

    .mix-content-box {
        padding-right: 0;
        text-align: center;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 태블릿 이하: 세로 적층 (텍스트 → 버튼 → TV) */
    .blue-banner-inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 32px;
    }

    .blue-banner-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .blue-watermark {
        font-size: 90px;
        transform: translate(-50%, -50%);
        opacity: 0.6;
    }

    .cs-grid {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .cs-hours {
        border-left: none;
        border-right: none;
        padding: 0;
    }}

@media (max-width: 580px) {
    :root {
        --page-gutter: 12px;
    }

    .hero-banner {
        margin-top: 14px;
        border-radius: 8px;
        aspect-ratio: 4 / 3;
        min-height: 360px;
        max-height: 440px;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .hero-copy {
        left: 5%;
        right: 5%;
        max-width: none;
    }

    /* 좁은 화면에서는 배경이 크게 잘려 글자가 시안의 베이지 영역을 벗어난다.
       밝은 슬라이드에 한해 반투명 패널을 깔아 가독성을 확보한다. */
    .hero-slide--light .hero-copy {
        background: rgba(242, 237, 226, 0.92);
        padding: 20px 18px;
        border-radius: 10px;
    }

    .hero-title {
        font-size: 24px;
    }

    .hero-nav {
        display: none;   /* 스와이프로 조작 */
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .events-grid {
        grid-template-columns: 1fr;
    }

    .faq-accordion-box {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }}

/* ============================================================
   로그인 페이지 (login.php)
   ============================================================ */
.auth-section {
    position: relative;
    padding: 70px 0 90px;
    background:
        radial-gradient(circle at 15% 20%, rgba(212, 175, 55, 0.06) 0%, rgba(0,0,0,0) 45%),
        var(--color-bg-light);
    min-height: calc(100vh - 300px);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(40, 28, 12, 0.08);
    padding: 44px 40px 40px;
}

.auth-head {
    text-align: center;
    margin-bottom: 30px;
}

.auth-head .auth-eyebrow {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.auth-head h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 8px 0 6px;
    letter-spacing: -0.02em;
}

.auth-head p {
    font-size: 14px;
    color: var(--color-text-muted);
}

.auth-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fdf0f0;
    border: 1px solid #f3c9c9;
    color: #b3423a;
    font-size: 13.5px;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 22px;
}

.auth-field {
    margin-bottom: 18px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-main);
    margin-bottom: 8px;
}

.auth-field input[type="text"],
.auth-field input[type="password"] {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    font-size: 15px;
    font-family: var(--font-kr);
    color: var(--color-text-main);
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(112, 26, 63, 0.08);
}

.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    margin: 6px 0 24px;
}

.auth-options label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-text-muted);
    cursor: pointer;
}

.auth-options a {
    color: var(--color-text-muted);
    transition: color 0.2s ease;
}

.auth-options a:hover {
    color: var(--color-primary);
}

.auth-submit {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 15.5px;
    font-weight: 700;
    font-family: var(--font-kr);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.auth-submit:hover {
    background: #5c1533;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(112, 26, 63, 0.22);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 22px;
    color: var(--color-text-muted);
    font-size: 12.5px;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-join-btn {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 700;
    transition: background 0.25s ease, color 0.25s ease;
}

.auth-join-btn:hover {
    background: var(--color-primary);
    color: #ffffff;
}

@media (max-width: 580px) {
    .auth-card {
        padding: 34px 22px 30px;
        border-radius: 12px;
    }
    .auth-section {
        padding: 40px 0 60px;
    }}

/* ── 회원가입/찾기 확장 컴포넌트 ── */
.auth-card--wide {
    max-width: 520px;
}

.auth-field .req { color: #c0392b; font-style: normal; }
.auth-field .opt { color: var(--color-text-muted); font-weight: 400; font-size: 12px; }

.auth-inline {
    display: flex;
    gap: 10px;
}

.auth-inline input {
    flex: 1;
    min-width: 0;
}

.auth-btn-check {
    flex-shrink: 0;
    padding: 0 18px;
    height: 50px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    background: #ffffff;
    color: var(--color-primary);
    font-size: 13.5px;
    font-weight: 700;
    font-family: var(--font-kr);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.auth-btn-check:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.auth-note {
    font-size: 12.5px;
    margin-top: 7px;
    min-height: 1em;
    color: var(--color-text-muted);
}

.auth-note.is-ok  { color: #1e8e4e; }
.auth-note.is-err { color: #c0392b; }

.auth-agree {
    margin: 22px 0 24px;
    padding: 14px 16px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13.5px;
}

.auth-agree label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    color: var(--color-text-main);
}

.auth-agree input { margin-top: 3px; }
.auth-agree .req  { color: #c0392b; font-style: normal; font-weight: 700; }

/* 동의 목록형 (회원가입: 이용약관/개인정보/마케팅) */
.auth-agree--list { padding: 6px 16px; }

.auth-agree--list .agree-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 0;
}

.auth-agree--list .agree-row + .agree-row {
    border-top: 1px dashed var(--color-border);
}

.auth-agree--list .agree-row--all {
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

.auth-agree--list .agree-row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.auth-agree--list .agree-row input { margin-top: 0; }
.auth-agree--list .opt-tag { color: var(--color-text-muted); font-style: normal; font-weight: 700; }

.agree-title {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-align: left;
}

.agree-title::after {
    content: '\203A';           /* › */
    font-size: 15px;
    color: var(--color-text-muted);
    transform: translateY(-1px);
}

.agree-title:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 약관 상세 레이어 팝업 */
.terms-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(20, 12, 16, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.terms-modal[hidden] { display: none; }

.terms-modal__box {
    background: #fff;
    border-radius: 12px;
    width: min(640px, 100%);
    max-height: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.terms-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.terms-modal__head strong { font-size: 15.5px; }

.terms-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    color: var(--color-text-muted);
    padding: 0 2px;
}

.terms-modal__body {
    overflow-y: auto;
    padding: 18px 22px;
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-main);
    flex: 1;
}

.terms-modal__body h1, .terms-modal__body h2, .terms-modal__body h3 { margin: 1em 0 .4em; font-size: 14.5px; }
.terms-modal__body h1:first-child, .terms-modal__body h2:first-child, .terms-modal__body h3:first-child { margin-top: 0; }
.terms-modal__body p  { margin-bottom: .6em; }
.terms-modal__body ul, .terms-modal__body ol { padding-left: 1.4em; margin-bottom: .6em; }

.terms-modal__foot {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.terms-modal__agree {
    background: var(--color-primary, #b04a63);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 11px 36px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.terms-modal__agree:hover { filter: brightness(1.06); }

@media (max-width: 580px) {
    .auth-agree--list { padding: 2px 12px; }
    .terms-modal { padding: 12px; }
    .terms-modal__box { max-height: 86vh; }}

/* 탭 (아이디/비밀번호 찾기) */
.auth-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 26px;
}

.auth-tabs a {
    flex: 1;
    text-align: center;
    padding: 13px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.auth-tabs a.is-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* 완료 화면 */
.auth-done {
    text-align: center;
    padding: 18px 0 6px;
}

.auth-done i {
    font-size: 46px;
    color: #1e8e4e;
    margin-bottom: 18px;
}

.auth-done p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--color-text-main);
    margin-bottom: 26px;
}

.auth-submit--link {
    display: block;
    line-height: 52px;
    text-align: center;
}

/* ============================================================
   상품 목록 (list.php) / 상세 (detail.php)
   ============================================================ */
.shop-section {
    padding: 46px 0 90px;
    background: var(--color-bg-light);
    min-height: calc(100vh - 300px);
}

.shop-section .container,
.detail-section .container {
    width: calc(100% - var(--page-gutter) * 2);
    max-width: var(--page-max);
    padding: 0;
}

.shop-head {
    text-align: center;
    margin-bottom: 30px;
}

.shop-head .shop-eyebrow {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.shop-head h1 {
    font-size: 30px;
    font-weight: 800;
    color: var(--color-dark);
    margin-top: 6px;
    letter-spacing: -0.02em;
}

/* 카테고리 탭 + 검색 */
.shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.shop-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.shop-tabs a {
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    transition: all 0.25s ease;
}

.shop-tabs a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-tabs a.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.shop-search {
    display: flex;
    gap: 8px;
}

.shop-search input {
    width: 240px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-kr);
}

.shop-search input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.shop-search button {
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-dark);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.shop-count {
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.shop-count strong { color: var(--color-primary); }

/* 상품 그리드 (index.php .product-card 재사용 + 추가 요소) */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.shop-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(40, 28, 12, 0.1);
}

.shop-card-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.shop-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.shop-card:hover .shop-card-thumb img {
    transform: scale(1.05);
}

.shop-card-thumb .thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}

.shop-card-thumb .thumb-play i {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: var(--color-primary);
    font-size: 16px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.shop-card:hover .thumb-play { background: rgba(0, 0, 0, 0.25); }
.shop-card:hover .thumb-play i { opacity: 1; transform: scale(1); }

.shop-card-body {
    padding: 16px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.shop-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.45;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.shop-card-specs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 12px;
}

.shop-card-specs span i { margin-right: 4px; color: var(--color-gold); }

.shop-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.shop-card-price {
    font-family: var(--font-en);
    font-size: 17px;
    font-weight: 800;
    color: var(--color-primary);
}

.shop-card-price small { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }

.shop-preview-btn {
    border: 1px solid var(--color-border);
    background: #ffffff;
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
}

.shop-preview-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-empty {
    text-align: center;
    padding: 90px 0;
    color: var(--color-text-muted);
}

.shop-empty i { font-size: 40px; margin-bottom: 14px; color: var(--color-border); }

/* 페이지네이션 */
.shop-paging {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 40px;
}

.shop-paging a,
.shop-paging span {
    min-width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #ffffff;
    font-size: 13.5px;
    color: var(--color-text-muted);
    padding: 0 8px;
}

.shop-paging a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.shop-paging .is-now {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
    font-weight: 700;
}

/* 미리보기 모달 */
.preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 10, 14, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 500;
    padding: 20px;
}

.preview-modal.is-open { display: flex; }

.preview-modal-box {
    width: min(880px, 100%);
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.preview-modal-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.preview-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    background: none;
    border: none;
}

.preview-modal-wrap { position: relative; width: min(880px, 100%); }

/* ── 상품 상세 ── */
.detail-section {
    padding: 46px 0 90px;
}

.detail-top {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 44px;
    margin-bottom: 60px;
    align-items: start;            /* 미디어가 정보 영역 높이에 맞춰 늘어나지 않게 */
}

.detail-media {
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--color-border);
    /* 4:3 프레임 — 상품 이미지(정사각·4:3)를 크게 보여주기 위한 선택.
       유튜브는 플레이어가 16:9를 유지한 채 위아래 레터박스로 들어간다(잘리지 않음). */
    aspect-ratio: 4 / 3;
}

.detail-media .video-box {
    width: 100%;
    height: 100%;
}

.detail-media iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    /* object-fit 미적용: 컨테이너가 이미 16:9라 유튜브 임베드를 그대로 채우면 선명하게 나온다
       (iframe에 object-fit:cover 를 주면 렌더 화면을 재확대해 흐려짐) */
}

.detail-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;   /* 이미지는 16:9 아닐 수 있어 크롭 필요 */
    border: 0;
}

/* ===== 상단 갤러리 (대표이미지 슬라이드 + 유튜브 재생) =====
   .detail-media(16:9 검은 프레임) 안에서 슬라이드가 가로로 이동한다.
   상품 이미지는 정사각형이 많아 잘리지 않도록 contain + 블러 배경으로 여백을 채운다. */
.detail-media-col { min-width: 0; }

.detail-gallery { position: relative; width: 100%; height: 100%; overflow: hidden; }

.detail-gallery__track {
    display: flex;
    height: 100%;
    transition: transform 0.35s ease;
    will-change: transform;
}

.detail-gallery__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}

/* 잘린 부분 대신 같은 이미지를 흐리게 깔아 좌우 여백을 자연스럽게 채운다 */
.detail-gallery__slide--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--slide-bg) center / cover no-repeat;
    filter: blur(22px) brightness(0.5);
    transform: scale(1.15);
}

.detail-gallery__slide img {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;   /* 상품 이미지 전체가 보이도록 */
}

/* 유튜브 포스터는 16:9 원본이라 꽉 채운다 */
.detail-gallery__slide--video img { object-fit: cover; }

.detail-gallery__slide iframe { width: 100%; height: 100%; display: block; border: 0; }
.detail-gallery__slide--video.is-playing img,
.detail-gallery__slide--video.is-playing .detail-gallery__play { display: none; }

.detail-gallery__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 66px;
    height: 66px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    z-index: 2;
}
.detail-gallery__play:hover { background: #ffffff; transform: scale(1.08); }

.detail-gallery__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.42);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
    z-index: 3;
}
.detail-gallery:hover .detail-gallery__nav,
.detail-gallery__nav:focus-visible { opacity: 1; }
.detail-gallery__nav:hover { background: rgba(0, 0, 0, 0.65); }
.detail-gallery__nav--prev { left: 12px; }
.detail-gallery__nav--next { right: 12px; }
/* 터치 기기는 hover가 없으므로 항상 노출 */
@media (hover: none) {
    .detail-gallery__nav { opacity: 1; }}

.detail-gallery__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 6px;
    z-index: 3;
}
.detail-gallery__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}
.detail-gallery__dot.is-active { width: 18px; border-radius: 4px; background: #ffffff; }

/* ── 썸네일 스트립 ── */
.detail-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.detail-thumbs__item {
    position: relative;
    width: 72px;
    height: 54px;      /* 본 프레임과 같은 4:3 */
    padding: 0;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: #000000;
    cursor: pointer;
    opacity: 0.62;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}
.detail-thumbs__item img { width: 100%; height: 100%; display: block; object-fit: cover; }
.detail-thumbs__item:hover { opacity: 1; }
.detail-thumbs__item.is-active { opacity: 1; border-color: var(--color-primary); }
.detail-thumbs__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #ffffff;
    font-size: 13px;
}

.detail-info .detail-cat {
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.detail-info h1 {
    font-size: 27px;
    font-weight: 800;
    color: var(--color-dark);
    margin: 8px 0 14px;
    line-height: 1.35;
    word-break: keep-all;
}

.detail-price {
    font-family: var(--font-en);
    font-size: 30px;
    font-weight: 800;
    color: var(--color-primary);
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 20px;
}

.detail-price small { font-size: 15px; color: var(--color-text-muted); font-weight: 600; }

.detail-specs {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.detail-specs .spec-row {
    display: flex;
    font-size: 14px;
}

.detail-specs .spec-row b {
    width: 110px;
    flex-shrink: 0;
    color: var(--color-text-muted);
    font-weight: 600;
}

.detail-qty {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
}

.detail-qty label { font-size: 14px; font-weight: 600; }

.qty-stepper {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
}

.qty-stepper button {
    width: 38px;
    height: 42px;
    border: none;
    background: var(--color-bg-light);
    font-size: 16px;
    cursor: pointer;
    color: var(--color-text-main);
}

.qty-stepper input {
    width: 56px;
    text-align: center;
    border: none;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    font-size: 15px;
    font-weight: 700;
}

.detail-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 22px;
    font-size: 14px;
    font-weight: 600;
}

.detail-total .total-amt {
    font-family: var(--font-en);
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
}

.detail-actions {
    display: flex;
    gap: 10px;
}

.detail-actions .btn {
    flex: 1;
    height: 54px;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: 9px;
}

.btn-cart {
    background: #ffffff;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

.btn-cart:hover { background: rgba(112, 26, 63, 0.05); transform: translateY(-2px); }

.btn-buy {
    background: var(--color-primary);
    color: #ffffff;
    border: 1px solid var(--color-primary);
}

.btn-buy:hover { background: #5c1533; transform: translateY(-2px); box-shadow: 0 10px 22px rgba(112,26,63,0.22); }

.detail-desc h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-dark);
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-dark);
    margin-bottom: 20px;
}

.detail-desc .desc-body {
    font-size: 14.5px;
    line-height: 2;
    color: var(--color-text-main);
    white-space: pre-line;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 26px 28px;
}

.detail-related { margin-top: 70px; }

@media (max-width: 991px) {
    .shop-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-top { grid-template-columns: 1fr; gap: 28px; }}

@media (max-width: 580px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-search input { width: 100%; }
    .shop-toolbar { flex-direction: column; align-items: stretch; }
    .detail-actions { flex-direction: column; }}

/* ── 장바구니 ── */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}

.cart-list {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.cart-item {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
}

.cart-thumb {
    flex-shrink: 0;
    width: 86px;
    height: 86px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

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

.cart-info { flex: 1; min-width: 0; }

.cart-name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 4px;
}

.cart-name:hover { color: var(--color-primary); }

.cart-code { font-size: 12px; color: var(--color-text-muted); margin-bottom: 6px; }
.cart-unit { font-size: 13.5px; color: var(--color-text-main); }

.cart-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.cart-line-total {
    min-width: 110px;
    text-align: right;
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 800;
    color: var(--color-primary);
}

.cart-remove {
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.cart-remove:hover { color: #c0392b; }

.cart-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-size: 13.5px;
}

.cart-tools a { color: var(--color-text-muted); }
.cart-tools a:hover { color: var(--color-primary); }

.cart-tools button {
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-size: 13.5px;
    cursor: pointer;
    text-decoration: underline;
}

.cart-summary {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 26px 24px;
    position: sticky;
    top: 104px;
}

.cart-summary h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
}

.cart-summary .sum-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    color: var(--color-text-main);
}

.cart-summary .sum-note { font-size: 12px; color: var(--color-text-muted); }

.cart-summary .sum-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    margin-top: 14px;
    padding: 16px 0 18px;
    font-size: 15px;
    font-weight: 700;
}

.cart-summary .sum-grand strong {
    font-family: var(--font-en);
    font-size: 22px;
    color: var(--color-primary);
}

@media (max-width: 991px) {
    .cart-layout { grid-template-columns: 1fr; }
    .cart-summary { position: static; }}

@media (max-width: 580px) {
    .cart-item { flex-wrap: wrap; }
    .cart-controls { width: 100%; justify-content: space-between; }}

/* ============================================================
   게시판 (notice.php / notice_view.php)
   ============================================================ */
.board-wrap {
    max-width: 980px;
    margin: 0 auto;
}

.board-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border-top: 2px solid var(--color-dark);
    font-size: 14.5px;
}

.board-table th {
    padding: 14px 10px;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-main);
}

.board-table td {
    padding: 15px 10px;
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    color: var(--color-text-muted);
}

.board-table td.b-title {
    text-align: left;
}

.board-table td.b-title a {
    color: var(--color-text-main);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.board-table td.b-title a:hover { color: var(--color-primary); }

.board-table tr:hover td { background: #fdfbf9; }

.badge-pin {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    flex-shrink: 0;
}

.board-num { width: 70px; }
.board-date { width: 110px; }
.board-hit { width: 80px; }

.board-search {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.board-search input {
    width: 260px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-family: var(--font-kr);
}

.board-search input:focus { outline: none; border-color: var(--color-primary); }

.board-search button {
    height: 44px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--color-dark);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* 게시글 보기 */
.board-view {
    background: #ffffff;
    border-top: 2px solid var(--color-dark);
}

.board-view-head {
    padding: 24px 20px;
    border-bottom: 1px solid var(--color-border);
}

.board-view-head h1 {
    font-size: 21px;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 10px;
    word-break: keep-all;
}

.board-view-meta {
    display: flex;
    gap: 18px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.board-view-body {
    padding: 34px 20px 44px;
    font-size: 15px;
    line-height: 2;
    color: var(--color-text-main);
    white-space: pre-line;
    border-bottom: 1px solid var(--color-border);
    min-height: 200px;
}

.board-nav {
    border-bottom: 1px solid var(--color-border);
}

.board-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 20px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--color-border);
}

.board-nav-row:last-child { border-bottom: none; }

.board-nav-row b {
    flex-shrink: 0;
    width: 64px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.board-nav-row a {
    color: var(--color-text-main);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-nav-row a:hover { color: var(--color-primary); }
.board-nav-row .none { color: var(--color-border); }

.board-view-foot {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.btn-board-list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 34px;
    border: 1px solid var(--color-dark);
    border-radius: 8px;
    background: var(--color-dark);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.btn-board-list:hover { background: #000; transform: translateY(-2px); }

@media (max-width: 580px) {
    .board-num, .board-hit { display: none; }
    .board-date { width: 88px; }}

/* ── Q&A (qna.php) ── */
.badge-wait,
.badge-done {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.badge-wait { background: var(--color-bg-light); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.badge-done { background: rgba(30, 142, 78, 0.1); color: #1e8e4e; border: 1px solid rgba(30, 142, 78, 0.25); }

.board-cat {
    display: inline-block;
    font-size: 12px;
    color: var(--color-gold);
    font-weight: 600;
    margin-right: 6px;
    flex-shrink: 0;
}

.btn-qna-write {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.btn-qna-write:hover { background: #5c1533; transform: translateY(-2px); }

/* 질문/답변 말풍선 */
.qna-thread { display: grid; gap: 16px; padding: 28px 20px 34px; border-bottom: 1px solid var(--color-border); }

.qna-bubble {
    display: flex;
    gap: 14px;
}

.qna-bubble .who {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}

.qna-bubble.q .who { background: var(--color-bg-light); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.qna-bubble.a .who { background: var(--color-primary); color: #ffffff; }

.qna-bubble .msg {
    flex: 1;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 14.5px;
    line-height: 1.9;
    white-space: pre-line;
}

.qna-bubble.a .msg { background: #fdf5f8; border-color: #efd8e2; }

.qna-bubble .msg .msg-meta {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

/* 작성 폼 */
.qna-form-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 30px 28px;
}

.qna-form-card select,
.qna-form-card input[type="text"],
.qna-form-card textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: var(--font-kr);
    color: var(--color-text-main);
    padding: 12px 14px;
    background: #ffffff;
}

.qna-form-card select { height: 48px; }
.qna-form-card textarea { min-height: 180px; resize: vertical; line-height: 1.8; }

.qna-form-card select:focus,
.qna-form-card input:focus,
.qna-form-card textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(112, 26, 63, 0.08);
}

.qna-form-row { margin-bottom: 18px; }
.qna-form-row label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }

/* ── FAQ (faq.php) ── */
.faq-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.faq-tab {
    padding: 10px 20px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #ffffff;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-kr);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.25s ease;
}

.faq-tab:hover { border-color: var(--color-primary); color: var(--color-primary); }

.faq-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #ffffff;
}

.faq-list {
    display: grid;
    gap: 12px;
}

.faq-list .faq-item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq-list .faq-item.is-open {
    border-color: rgba(112, 26, 63, 0.35);
    box-shadow: 0 10px 26px rgba(40, 28, 12, 0.07);
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-kr);
}

.faq-q .faq-mark {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 800;
}

.faq-q .faq-cat-badge {
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-gold);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 999px;
    padding: 3px 10px;
}

.faq-q .faq-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.5;
    word-break: keep-all;
}

.faq-q .faq-arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}

.faq-item.is-open .faq-arrow { transform: rotate(180deg); color: var(--color-primary); }

.faq-a {
    display: none;
    padding: 4px 20px 22px 64px;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--color-text-main);
    white-space: pre-line;
}

.faq-item.is-open .faq-a { display: block; }

.faq-contact {
    margin-top: 40px;
    text-align: center;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 30px 20px;
}

.faq-contact p { font-size: 14.5px; color: var(--color-text-muted); margin-bottom: 16px; }

@media (max-width: 580px) {
    .faq-q .faq-cat-badge { display: none; }
    .faq-a { padding-left: 20px; }}

/* ── 고객후기 (reviews.php) ── */
.review-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px 20px;
    margin-bottom: 30px;
}

.review-summary .avg {
    text-align: center;
}

.review-summary .avg .num {
    font-family: var(--font-en);
    font-size: 40px;
    font-weight: 800;
    color: var(--color-dark);
    line-height: 1.1;
}

.review-summary .avg .stars { color: var(--color-gold); font-size: 15px; letter-spacing: 2px; }

.review-summary .divider { width: 1px; height: 52px; background: var(--color-border); }

.review-summary .cnt { text-align: center; font-size: 14px; color: var(--color-text-muted); }
.review-summary .cnt strong { display: block; font-family: var(--font-en); font-size: 26px; font-weight: 800; color: var(--color-primary); }

.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.review-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(40, 28, 12, 0.08);
}

.review-card .stars {
    color: var(--color-gold);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.review-card .stars .off { color: var(--color-border); }

.review-card h3 {
    font-size: 15.5px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 10px;
    line-height: 1.5;
    word-break: keep-all;
}

.review-card p {
    font-size: 13.5px;
    line-height: 1.85;
    color: var(--color-text-main);
    flex: 1;
}

.review-card .meta {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-text-muted);
}

.review-card .meta .prod {
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-primary);
}

/* 별점 선택 (작성 폼) */
.rating-select {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    font-size: 30px;
}

.rating-select input { display: none; }

.rating-select label {
    cursor: pointer;
    color: var(--color-border);
    transition: color 0.15s ease;
}

.rating-select label:hover,
.rating-select label:hover ~ label,
.rating-select input:checked ~ label {
    color: var(--color-gold);
}

@media (max-width: 991px) { .review-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 580px) {
    .review-grid { grid-template-columns: 1fr; }
    .review-summary { gap: 20px; }}

/* ── 이벤트 (events.php) ── */
.event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
}

.event-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(40, 28, 12, 0.1);
}

.event-card .ev-thumb {
    position: relative;
    display: block;
    aspect-ratio: 2 / 1;
    overflow: hidden;
}

.event-card .ev-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.event-card:hover .ev-thumb img { transform: scale(1.04); }

.event-card.is-ended .ev-thumb img { filter: grayscale(0.9); opacity: 0.75; }

.ev-status {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

.ev-status.on  { background: var(--color-primary); color: #fff; }
.ev-status.off { background: rgba(30, 30, 34, 0.75); color: #ddd; }

.event-card .ev-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }

.event-card .ev-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 8px;
    word-break: keep-all;
}

.event-card .ev-body p {
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--color-text-muted);
    flex: 1;
}

.event-card .ev-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 12.5px;
    color: var(--color-text-muted);
}

.event-card .ev-meta .go {
    color: var(--color-primary);
    font-weight: 700;
    font-size: 13px;
}

/* 이벤트 상세 */
.event-view-hero {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    margin-bottom: 26px;
}

.event-view-hero img { width: 100%; display: block; }

.event-view-head {
    text-align: center;
    margin-bottom: 26px;
}

.event-view-head h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 10px;
    word-break: keep-all;
}

.event-view-head .period {
    font-size: 13.5px;
    color: var(--color-text-muted);
}

.event-view-body {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 30px 30px;
    font-size: 14.5px;
    line-height: 2;
    white-space: pre-line;
    color: var(--color-text-main);
}

@media (max-width: 767px) { .event-grid { grid-template-columns: 1fr; }}

/* ── 자료실 (downloads.php) ── */
.dl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.dl-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 30px 26px 26px;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.dl-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(40, 28, 12, 0.1);
    border-color: rgba(112, 26, 63, 0.3);
}

.dl-card .dl-icon {
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    font-size: 26px;
}

.dl-card h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 10px;
    word-break: keep-all;
}

.dl-card p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--color-text-muted);
    flex: 1;
    margin-bottom: 18px;
}

.dl-card .dl-meta {
    display: flex;
    justify-content: center;
    gap: 16px;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.dl-card .dl-meta i { margin-right: 4px; color: var(--color-gold); }

.dl-card .dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    transition: all 0.25s ease;
}

.dl-card .dl-btn:hover { background: var(--color-primary); color: #ffffff; }

.dl-note {
    margin-top: 34px;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px 24px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--color-text-muted);
}

.dl-note b { color: var(--color-text-main); }

@media (max-width: 991px) { .dl-grid { grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 580px) { .dl-grid { grid-template-columns: 1fr; }}

/* ── 헤더 검색창 (아이콘 클릭 시 펼침) ── */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
}

.header-search-toggle {
    border: none;
    background: none;
    padding: 0;
    font-size: 18px;
    cursor: pointer;
}

.header-search-form {
    position: absolute;
    top: calc(100% + 16px);
    right: -10px;
    display: flex;
    gap: 0;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(40, 28, 12, 0.16);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    z-index: 300;
}

/* 말풍선 꼬리 */
.header-search-form::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 18px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.header-search.is-open .header-search-form {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-search-form input {
    width: 240px;
    height: 42px;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    font-family: var(--font-kr);
    border-radius: 8px 0 0 8px;
    background: var(--color-bg-light);
}

.header-search-form input:focus { outline: none; }

.header-search-form button[type="submit"] {
    width: 46px;
    height: 42px;
    border: none;
    border-radius: 0 8px 8px 0;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.header-search-form button[type="submit"]:hover { background: #5c1533; }

@media (max-width: 580px) {
    .header-search-form { right: -80px; }
    .header-search-form::before { right: 88px; }
    .header-search-form input { width: 180px; }}

/* ── 마이페이지 (mypage.php) ── */
.mypage-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 26px;
    align-items: start;
}

.mypage-side {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 104px;
}

.mp-profile {
    background: linear-gradient(135deg, #7d2147 0%, #4a1029 100%);
    color: #ffffff;
    border-radius: 14px;
    padding: 26px 24px;
}

.mp-profile .mp-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.mp-profile h2 { font-size: 19px; font-weight: 800; margin-bottom: 3px; }
.mp-profile .mp-id { font-size: 12.5px; opacity: 0.75; }
.mp-profile .mp-since { font-size: 11.5px; opacity: 0.6; margin-top: 10px; }

.mp-nav {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}

.mp-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    transition: background 0.2s ease, color 0.2s ease;
}

.mp-nav a:last-child { border-bottom: none; }
.mp-nav a i { width: 18px; text-align: center; color: var(--color-gold); }
.mp-nav a:hover { background: var(--color-bg-light); color: var(--color-primary); }

/* 현재 페이지 메뉴 강조 (orders.php·order_detail.php 에서 [주문 내역]) */
.mp-nav a.is-active {
    background: var(--color-bg-light);
    color: var(--color-primary);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--color-primary);
}
.mp-nav a.logout { color: var(--color-text-muted); }

.mypage-main { display: grid; gap: 26px; }

.mp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.mp-stat {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 18px 14px;
    text-align: center;
}

.mp-stat .num {
    font-family: var(--font-en);
    font-size: 24px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.2;
}

.mp-stat .lbl { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; }

.mp-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 24px;
    /* 좌측 메뉴 앵커(#coupons·#points·#myqna) 이동 시 sticky 헤더(84px, 모바일 72px)에
       카드 제목이 가려지지 않도록 그만큼 내려서 멈춘다 (+여유 20px) */
    scroll-margin-top: 104px;
}

.mp-card > h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-dark);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mp-card > h3 .more { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.mp-card > h3 .more:hover { color: var(--color-primary); }

.mp-empty {
    text-align: center;
    padding: 34px 0;
    color: var(--color-text-muted);
    font-size: 13.5px;
}

.mp-empty i { display: block; font-size: 30px; color: var(--color-border); margin-bottom: 10px; }

.mp-order {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13.5px;
}

.mp-order:last-child { border-bottom: none; }
.mp-order .no { font-family: var(--font-en); font-weight: 700; color: var(--color-text-main); }
.mp-order .amt { margin-left: auto; font-family: var(--font-en); font-weight: 800; color: var(--color-primary); }

.mp-status {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

.mp-status.done { background: rgba(30,142,78,0.1); border-color: rgba(30,142,78,0.25); color: #1e8e4e; }
.mp-status.cancel { background: #fdf0f0; border-color: #f3c9c9; color: #b3423a; }

.mp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.mp-alert-ok {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(30,142,78,0.08);
    border: 1px solid rgba(30,142,78,0.3);
    color: #1e8e4e;
    font-size: 13.5px;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 18px;
}

@media (max-width: 991px) {
    .mypage-grid { grid-template-columns: 1fr; }
    .mypage-side { position: static; }
    .mp-stats { grid-template-columns: repeat(2, 1fr); }
    .mp-form-grid { grid-template-columns: 1fr; }}

/* 마이페이지 카드 내 입력 필드 (qna-form-card 와 동일 톤) */
.mp-card input[type="text"],
.mp-card input[type="password"] {
    width: 100%;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14.5px;
    font-family: var(--font-kr);
    color: var(--color-text-main);
    padding: 12px 14px;
    background: #ffffff;
}

.mp-card input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(112, 26, 63, 0.08);
}

/* ===== 공지 팝업 (footer.php · adm_popups.php 연동) ===== */
.bf-popup-layer {
    position: fixed; inset: 0; z-index: 10000;
    display: none; align-items: center; justify-content: center;
    padding: 20px; gap: 18px; flex-wrap: wrap;
    background: rgba(20, 8, 18, 0.55); backdrop-filter: blur(3px);
}
.bf-popup-layer.open { display: flex; }
.bf-popup {
    position: relative; background: #fff; border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.30);
    overflow: hidden; max-height: 90vh; display: flex; flex-direction: column;
    animation: bfPopIn .28s cubic-bezier(.16,.84,.44,1);
}
@keyframes bfPopIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.bf-popup-close {
    position: absolute; top: 10px; right: 12px; z-index: 2;
    width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(0, 0, 0, 0.28); color: #fff; font-size: 22px; line-height: 1;
    cursor: pointer; transition: background .18s;
}
.bf-popup-close:hover { background: rgba(0, 0, 0, 0.5); }
.bf-popup-body-link { text-decoration: none; color: inherit; display: block; }
.bf-popup-body { overflow-y: auto; }
.bf-popup-body .bf-popup-img { display: block; width: 100%; height: auto; }
.bf-popup-body:not(:has(.bf-popup-img)) { padding: 34px 30px 26px; }
.bf-popup-title { margin: 0; font-size: 20px; font-weight: 800; color: var(--color-primary, #701a3f); text-align: center; }
.bf-popup-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px; border-top: 1px solid #eee; background: #faf7f9;
}
.bf-popup-hide { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #777; cursor: pointer; margin: 0; }
.bf-popup-hide input { cursor: pointer; }
.bf-popup-close-btn {
    border: none; background: var(--color-primary, #701a3f); color: #fff;
    padding: 8px 20px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: opacity .18s;
}
.bf-popup-close-btn:hover { opacity: .88; }

/* ============================================================
   모바일 대응 — 가로 넘침 방지 + 햄버거 내비게이션 (≤991px)
   ============================================================ */

/* 전 페이지 가로 스크롤 안전망 — clip 은 sticky 헤더를 깨지 않는다 */
html, body { overflow-x: clip; }

/* Video Mix 다이어그램: 그리드 자식이 내용폭 이하로 줄어들 수 있게 */
.video-mix-grid > * { min-width: 0; }

/* 햄버거 버튼 — 데스크톱에선 숨김 */
.hamburger-btn { display: none; }

@media (max-width: 991px) {
    /* ── 햄버거 버튼 ── */
    .hamburger-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        margin-left: 2px;
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .hamburger-btn span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--color-dark);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger-btn.is-open span:nth-child(2) { opacity: 0; }
    .hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ── 드로어 패널 (헤더 72px 아래에서 펼침) ── */
    .nav-menu {
        display: block;
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;
        height: auto;
        background: #ffffff;
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 18px 30px rgba(40, 28, 12, 0.14);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        z-index: 99;
    }
    .nav-menu.is-open {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }

    .nav-list {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        padding: 6px 0 12px;
    }
    .nav-item {
        display: block;
        height: auto;
        border-bottom: 1px solid #f2eee8;
    }
    .nav-item:last-child { border-bottom: none; }

    .nav-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px var(--page-gutter);
        font-size: 15px;
        font-weight: 600;
    }
    /* 데스크톱 밑줄 ::after → 모바일에선 펼침 캐럿으로 재사용 */
    .nav-link::after {
        content: '\f078';                   /* fa-chevron-down */
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        position: static;
        width: auto;
        height: auto;
        background: none;
        font-size: 11px;
        color: var(--color-text-muted);
        transition: transform 0.25s ease;
    }
    .nav-item.is-sub-open .nav-link::after {
        transform: rotate(180deg);
        color: var(--color-gold);
    }
    /* 데스크톱 호버 밑줄 폭 규칙이 터치 탭(:hover)에 적용돼 캐럿이 커지는 것 방지 */
    .nav-item:hover > .nav-link::after { width: auto; }

    /* 하위 메뉴 — 호버 팝업 → 인라인 아코디언 */
    .dropdown-menu {
        display: none;
        position: static;
        min-width: 0;
        width: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 2px 0 10px;
        background: var(--color-bg-light);
    }
    .dropdown-menu::before,
    .dropdown-menu::after { display: none; }
    .nav-item.is-sub-open .dropdown-menu { display: block; }

    .dropdown-link {
        padding: 11px calc(var(--page-gutter) + 12px);
        white-space: normal;
        border-radius: 0;
    }}

/* ── Video Mix 다이어그램: 좁은 화면 축소 ── */
@media (max-width: 580px) {
    .video-mix-card { padding: 28px 20px; }
    .diagram-container { padding: 20px 14px; }
    .diagram-row { gap: 8px; }
    .video-node {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        padding: 10px 8px;
        font-size: 12px;
    }
    .video-node span,
    .output-node span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .output-node { padding: 12px 10px; font-size: 12px; letter-spacing: 0; }}

/* ===== 공지 스트립: 최근 3건 리스트 (footer.php) ===== */
.notice-strip-container { align-items: flex-start; gap: 16px; }
.notice-main { align-items: flex-start; flex: 1; min-width: 0; }
.notice-main .notice-badge { margin-top: 3px; flex-shrink: 0; }
.notice-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.notice-list a {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;   /* 날짜를 제목 바로 옆에 배치 */
    gap: 12px;
    color: inherit;
    text-decoration: none;
}
.notice-list a:hover .notice-list-title { color: var(--color-gold); }
.notice-list-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.notice-list-date {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: var(--font-en);
}
.notice-more {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.notice-more:hover { color: var(--color-gold); }

@media (max-width: 580px) {
    .notice-strip-container { flex-direction: column; }
    .notice-list-date { display: none; }
    .notice-more { align-self: flex-end; }}

/* ===== 게시판 테이블 모바일 (qna 등 다컬럼 대응) ===== */
@media (max-width: 580px) {
    .board-writer { display: none; }                 /* 작성자 숨김 → 제목 공간 확보 */
    .board-table th.board-status { width: 72px; }
    .board-table .badge-done,
    .board-table .badge-wait { font-size: 11px; padding: 3px 7px; white-space: nowrap; }
    .board-table td.b-title { word-break: keep-all; }
    .board-table th, .board-table td { padding-left: 8px; padding-right: 8px; }}

/* ============================================================
   주문·결제 (order.php / payment.php / order_detail.php / orders.php)
   ============================================================ */
.mono { font-family: var(--font-en), monospace; letter-spacing: 0.02em; }

.order-alert {
    display: flex; align-items: center; gap: 10px;
    background: #fdf0f0; border: 1px solid #f2c9c9; color: #b03434;
    padding: 14px 18px; border-radius: 10px; font-size: 14px; margin-bottom: 22px;
}
.order-alert-success { background: #f0faf4; border-color: #bfe6cd; color: #1c7c46; }

.order-main { min-width: 0; }
.order-block {
    background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
    padding: 26px 28px; margin-bottom: 20px;
}
.order-block-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 16.5px; font-weight: 800; color: var(--color-dark);
    margin: 0 0 16px; padding-bottom: 13px; border-bottom: 1px solid var(--color-border);
}
.order-block-title i { color: var(--color-primary); font-size: 15px; }
.order-count { margin-left: 2px; font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; }

.order-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.order-field { display: flex; flex-direction: column; gap: 7px; }
.order-field-wide { grid-column: 1 / -1; }
.order-field label { font-size: 13.5px; font-weight: 700; color: var(--color-dark); }
.order-field label small { font-weight: 500; color: var(--color-text-muted); }
.order-field .req { color: var(--color-primary); }
.order-field input, .order-field textarea {
    border: 1px solid var(--color-border); border-radius: 9px;
    padding: 12px 14px; font-size: 14px; font-family: var(--font-kr);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.order-field input:focus, .order-field textarea:focus {
    outline: none; border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(112, 26, 63, 0.08);
}

.order-notice ul { margin: 0 0 16px; padding-left: 18px; font-size: 13.5px; color: var(--color-text-main); line-height: 1.9; }
.order-agree {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-radius: 9px; padding: 13px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.order-agree input { margin-top: 3px; cursor: pointer; }
.order-agree a { color: var(--color-primary); text-decoration: underline; }
.order-back { display: block; margin-top: 14px; font-size: 13px; color: var(--color-text-muted); text-decoration: none; }
.order-back:hover { color: var(--color-primary); }

/* 결제 페이지 */
.pay-rows { display: flex; flex-direction: column; }
.pay-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 2px; border-bottom: 1px dashed var(--color-border); font-size: 14px;
}
.pay-row:last-child { border-bottom: none; }
.pay-row > span { color: var(--color-text-muted); flex-shrink: 0; }
.pay-row strong { font-weight: 700; color: var(--color-dark); text-align: right; word-break: break-all; }
.pay-row.pay-amount strong { font-size: 21px; color: var(--color-primary); }
.pay-hint { margin: 13px 0 6px; font-size: 12.5px; color: var(--color-text-muted); text-align: center; }
.pay-hint i { color: var(--color-gold); margin-right: 4px; }

/* 주문 상세 */
.od-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.od-no { font-size: 19px; font-weight: 800; color: var(--color-dark); }
.od-date { margin-top: 5px; font-size: 13px; color: var(--color-text-muted); }
.od-status {
    flex-shrink: 0; font-size: 13px; font-weight: 800;
    padding: 7px 16px; border-radius: 999px; white-space: nowrap;
}
.st-pending    { background: #fff7e8; color: #b07714; border: 1px solid #f0ddb2; }
.st-ordered    { background: #eef5ff; color: #2662c4; border: 1px solid #c9ddf5; }
.st-confirming { background: #f5efff; color: #6d3fc0; border: 1px solid #ded0f2; }
.st-done       { background: #f0faf4; color: #1c7c46; border: 1px solid #bfe6cd; }
.st-cancel     { background: #fdf0f0; color: #b03434; border: 1px solid #f2c9c9; }

.od-pending-box {
    margin-top: 18px; padding: 18px 20px; text-align: center;
    background: #fffaf0; border: 1px dashed #e8cf9a; border-radius: 11px;
}
.od-pending-box p { margin: 0 0 13px; font-size: 14px; font-weight: 600; color: #9a6b10; }

.od-items { display: flex; flex-direction: column; }
.od-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 2px; border-bottom: 1px dashed var(--color-border); font-size: 14px;
}
.od-item:last-child { border-bottom: none; }
.od-item-name { flex: 1; min-width: 0; font-weight: 600; color: var(--color-dark); }
.od-item-name small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--color-text-muted); font-weight: 500; }
.od-item-qty { flex-shrink: 0; font-size: 13px; color: var(--color-text-muted); }
.od-item-total { flex-shrink: 0; font-weight: 700; min-width: 90px; text-align: right; }
.od-total {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 15px; border-top: 2px solid var(--color-dark); font-size: 15px; font-weight: 700;
}
.od-total strong { font-size: 22px; color: var(--color-primary); }
.od-receipt { font-weight: 700; color: var(--color-primary); text-decoration: none; }
.od-receipt:hover { text-decoration: underline; }
.od-memo { margin: 0; font-size: 14px; line-height: 1.85; color: var(--color-text-main); }
.od-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* 주문 내역 목록 */
.orders-list { display: flex; flex-direction: column; gap: 12px; }
.orders-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
    padding: 17px 20px; color: inherit; text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.orders-row:hover { border-color: rgba(112, 26, 63, 0.4); box-shadow: 0 8px 20px rgba(40, 28, 12, 0.06); }
.orders-row-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.orders-row-main .no { font-size: 12px; color: var(--color-text-muted); }
.orders-row-main .name { font-size: 14.5px; font-weight: 700; color: var(--color-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orders-row-meta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.orders-row-meta .amt { font-weight: 800; color: var(--color-dark); }
.orders-row-meta .date { font-size: 12.5px; color: var(--color-text-muted); }
.orders-row-meta .arrow { color: var(--color-text-muted); }

@media (max-width: 580px) {
    .order-block { padding: 20px 16px; }
    .order-form-grid { grid-template-columns: 1fr; }
    .orders-row { flex-direction: column; align-items: stretch; gap: 10px; }
    .orders-row-meta { justify-content: space-between; }
    .orders-row-meta .date { display: none; }
    .od-item { flex-wrap: wrap; }
    .od-item-total { min-width: 0; }}

/* 무통장 입금 안내 (order_detail.php) */
.od-bank-box {
    margin-top: 18px; padding: 20px 22px;
    background: #f7fbf8; border: 1px solid #cde7d6; border-radius: 12px;
}
.od-bank-box h3 {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 10px; font-size: 15.5px; font-weight: 800; color: #1c7c46;
}
.od-bank-note {
    margin: 12px 0 0; font-size: 13px; color: #4a6b56; line-height: 1.7;
}
.od-bank-note i { margin-right: 4px; }

/* 결제수단 선택 (order.php) */
.pay-method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pay-method input { position: absolute; opacity: 0; }
.pay-method .pm-box {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 20px 14px; border: 2px solid var(--color-border); border-radius: 12px;
    cursor: pointer; text-align: center; transition: border-color .2s ease, background .2s ease;
}
.pay-method .pm-box i { font-size: 22px; color: var(--color-text-muted); margin-bottom: 3px; }
.pay-method .pm-box strong { font-size: 15px; color: var(--color-dark); }
.pay-method .pm-box small { font-size: 12px; color: var(--color-text-muted); }
.pay-method input:checked + .pm-box {
    border-color: var(--color-primary); background: rgba(112, 26, 63, 0.04);
}
.pay-method input:checked + .pm-box i,
.pay-method input:checked + .pm-box strong { color: var(--color-primary); }
@media (max-width: 580px) { .pay-method-grid { grid-template-columns: 1fr; }}

/* 카카오 우편번호 주소 입력 (mypage.php) */
.addr-row { display: flex; gap: 8px; }
.addr-row input { max-width: 140px; background: var(--color-bg-light); }
.addr-search-btn {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 18px;
    border: 1px solid var(--color-dark);
    border-radius: 9px;
    background: var(--color-dark);
    color: #fff; font-size: 13.5px; font-weight: 600;
    font-family: var(--font-kr);
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.addr-search-btn:hover { opacity: 0.85; }

/* ===== 재고 표시 (품절/남은 수량) ===== */
.soldout-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 4px 12px;
    background: #b23b4e;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.stock-left { color: var(--color-primary); font-weight: 700; }

.btn-soldout {
    background: #c9c2c5 !important;
    color: #fff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.shop-card .soldout-flag,
.product-card .soldout-flag {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 16, 0.55);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    z-index: 2;
}

.shop-card.is-soldout .shop-card-thumb img { filter: grayscale(60%); }
.shop-card.is-soldout .thumb-play { display: none; }

.product-card.is-soldout .product-thumb img { filter: grayscale(60%); }
.product-card.is-soldout .thumb-overlay { display: none; }

/* ===== 메인 카드 hover 영상 미리보기 ===== */
.thumb-preview {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: transparent;       /* 영상 준비 전엔 원래 카드 이미지가 그대로 보이게 */
    opacity: 0;
    transition: opacity 0.1s ease;   /* 이미지→영상 전환 속도 (낮출수록 즉각적) */
    pointer-events: none;          /* 클릭은 그대로 카드 링크로 전달 */
    overflow: hidden;
}

.thumb-preview.is-on { opacity: 1; }

.thumb-preview .pv-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumb-preview iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    transform: scale(1.55);        /* 16:9 레터박스 + 유튜브 타이틀/로고까지 크롭 */
    transition: opacity 0.15s ease;
}

.thumb-preview iframe.is-ready { opacity: 1; }

.thumb-preview .pv-badge {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 100px;
    background: rgba(20, 12, 16, 0.62);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.product-card.is-previewing .thumb-overlay { opacity: 0; }

/* MP4 미리보기 (자체 서버 파일 — 유튜브보다 우선 재생) */
.thumb-preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.1s ease;
    background: #000;
}

.thumb-preview video.is-ready { opacity: 1; }

/* ============================================================
   상품 상세 공통 템플릿 (_detail_common.php + detail.php .dtpl-*)
   berry-rose 팔레트 · 아이콘 Font Awesome · 그래픽 CSS 자체 제작
   ============================================================ */
.dtpl { margin-top: 20px; }
/* 공통 템플릿 폭 = 상품 스펙표(컨테이너 전체)와 동일하게 넓힘.
   긴 글줄 섹션은 배경 박스만 넓히고 텍스트는 아래에서 적정 폭으로 제한. */
.dtpl section { margin: 0 auto 64px; max-width: none; }
.dtpl-head { text-align: center; margin-bottom: 36px; }
.dtpl-eyebrow { display: block; font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; letter-spacing: .02em; }
.dtpl-head h3 { font-size: 24px; font-weight: 800; color: var(--color-dark); letter-spacing: -.02em; }
.dtpl-desc { margin-top: 12px; font-size: 14px; color: var(--color-text-muted); line-height: 1.7; }
.dtpl-note-center { text-align: center; font-size: 12.5px; color: var(--color-text-muted); margin-top: 22px; }
.dtpl-note-center b { color: var(--color-primary); }/* 상품별 블록 */
/* iframe: object-fit 미적용(선명) */
/* 스펙표 */
/* ① 혜택 배너 */

.dtpl-hero__deco .dc {
    position: absolute; width: 92px; height: 92px; border-radius: 22px; display: flex;
    align-items: center; justify-content: center; font-size: 34px; color: #fff;
    box-shadow: 0 16px 34px rgba(0,0,0,.28); transform: rotate(-12deg);
}
.dtpl-hero__deco .dc2 { top: 30px;  right: 90px;  background: linear-gradient(145deg,#f5d442,#e0af1a); transform: rotate(10deg); }
.dtpl-hero__deco .spark { position: absolute; width: 14px; height: 14px; opacity: .85;
    background: radial-gradient(circle, #fff 30%, transparent 32%); }
.dtpl-hero__deco .spark::before, .dtpl-hero__deco .spark::after {
    content: ""; position: absolute; inset: 0; background: #fff;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); }/* ② 회원가입 혜택 */

.dtpl-benefit__item .ico {
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
    border-radius: 14px; font-size: 24px; color: #fff; margin-bottom: 16px;
}/* ③ 제작 강점 */


/* ⑤ 제작 프로세스 */
.dtpl-process__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.dtpl-process__item { display: flex; gap: 16px; align-items: flex-start; }
.dtpl-process__item .pico {
    flex: 0 0 auto; width: 60px; height: 60px; border-radius: 14px;
    background: linear-gradient(145deg,#eef2ff,#dbe4ff); color: #5b6ef0;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.dtpl-process__item strong { display: block; font-size: 15.5px; color: var(--color-dark); margin-bottom: 6px; }
.dtpl-process__item p { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.65; }

/* ⑥ 참고사항 */
.dtpl-caution__head { text-align: center; margin-bottom: 26px; }
.dtpl-caution__head .cico {
    display: inline-flex; width: 40px; height: 40px; border-radius: 50%;
    align-items: center; justify-content: center; background: var(--color-primary);
    color: #fff; font-size: 18px; margin-bottom: 12px;
}
.dtpl-caution__head h3 { font-size: 22px; font-weight: 800; color: var(--color-dark); }
.dtpl-caution__box {
    background: var(--color-bg-light); border-radius: 16px; padding: 34px 40px;
    display: grid; grid-template-columns: 1fr; gap: 26px;
}
.dtpl-caution__group h4 { font-size: 15px; color: var(--color-dark); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.dtpl-caution__group h4 i { color: var(--color-primary); font-size: 14px; }
.dtpl-caution__group ul, .dtpl-caution__box--single ul { list-style: none; }
.dtpl-caution__group li, .dtpl-caution__box--single li {
    position: relative; padding-left: 14px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.9;
}
.dtpl-caution__group li::before, .dtpl-caution__box--single li::before {
    content: "·"; position: absolute; left: 2px; color: var(--color-text-muted);
}
.dtpl-caution--flat .dtpl-caution__box { background: var(--color-bg-light); }

/* ⑨ 제작 신청 안내 */
.dtpl-apply__mark {
    display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center;
    justify-content: center; background: #fdeef4; color: var(--color-primary); font-size: 20px; margin-bottom: 12px;
}
.dtpl-apply__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.dtpl-apply__step {
    background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: 14px;
    padding: 26px 18px; text-align: center;
}
.dtpl-apply__step .sico {
    display: inline-flex; width: 62px; height: 62px; border-radius: 50%; align-items: center;
    justify-content: center; font-size: 26px; margin-bottom: 16px;
    background: linear-gradient(145deg,#fdeef4,#f8dce8); color: var(--color-primary);
}
.dtpl-apply__step .snum { display: block; font-size: 14px; font-weight: 800; color: var(--color-dark); margin-bottom: 8px; }
.dtpl-apply__step p { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }

/* ⑫ 사진 TIP */
.dtpl-tip__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 720px; margin: 0 auto 40px; }
.dtpl-tip__compare figure { text-align: center; }
.dtpl-tip__compare .frame {
    display: flex; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; margin-bottom: 12px;
}
.dtpl-tip__good .frame .ph-fill {
    flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700;
    background: linear-gradient(135deg,#c98aa6,#8a4c6a);
}
.dtpl-tip__bad .frame { background: #000; }
.dtpl-tip__bad .frame .bar { flex: 0 0 24%; background: #000; }
.dtpl-tip__bad .frame .ph-narrow {
    flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700;
    background: linear-gradient(135deg,#b0a29a,#7c6e66);
}
.dtpl-tip__compare figcaption { font-size: 12.5px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: 8px; display: inline-block; padding-left: 30px; padding-right: 30px; }
.dtpl-tip__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; background: var(--color-bg-light); border-radius: 16px; padding: 30px 34px; }
.dtpl-tip__item { display: flex; gap: 14px; align-items: flex-start; }
.dtpl-tip__item .tico {
    flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
    justify-content: center; font-size: 19px; color: #fff;
}
.t-red { background: linear-gradient(145deg,#f87171,#e8503f); }
.t-blue { background: linear-gradient(145deg,#60a5fa,#3b7ff0); }
.t-green { background: linear-gradient(145deg,#34d399,#10ae74); }
.t-sky { background: linear-gradient(145deg,#38bdf8,#0ea5e0); }
.dtpl-tip__item strong { display: block; font-size: 14px; color: var(--color-dark); margin-bottom: 5px; }
.dtpl-tip__item p { font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }

/* ⑬ CHECK POINT */
.dtpl-check__box { position: relative; background: var(--color-bg-light); border-radius: 16px; padding: 34px 40px; }
.dtpl-check__box h3 { text-align: center; font-size: 20px; font-weight: 800; color: var(--color-dark); margin-bottom: 22px; }
.dtpl-check__box ul { list-style: none; max-width: 760px; }
.dtpl-check__box li { position: relative; padding-left: 14px; font-size: 12.5px; color: var(--color-text-muted); line-height: 1.95; }
.dtpl-check__box li::before { content: "·"; position: absolute; left: 2px; }
.dtpl-check__mark {
    position: absolute; right: 34px; bottom: 30px; width: 60px; height: 60px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff;
    background: linear-gradient(145deg,#f87ba0,#e85586); box-shadow: 0 10px 24px rgba(232,85,134,.3);
}

/* ⑭ USB */
.dtpl-usb__opt { margin-top: 14px; font-size: 12.5px; color: var(--color-primary); font-weight: 600; }
.dtpl-usb__imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dtpl-usb__card { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; }
.dtpl-usb__card img { width: 100%; height: 100%; object-fit: cover; }
.dtpl-usb__card.usb-gift { background: linear-gradient(145deg,#f2c94c,#e0a92a); color: #fff; font-size: 66px; }

/* ⑮ 배송/교환 */
.dtpl-policy { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; border-top: 1px solid var(--color-border); padding-top: 34px; max-width: 900px; }
.dtpl-policy__col h4 { font-size: 15px; color: var(--color-dark); margin-bottom: 12px; }
.dtpl-policy__col p { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.8; }

/* ── 모바일 ── */
@media (max-width: 768px) {
    .dtpl section { margin-bottom: 48px; }
    .dtpl-hero__deco .dc { width: 62px; height: 62px; font-size: 22px; opacity: .5; }
    .dtpl-process__grid { grid-template-columns: 1fr; }
    .dtpl-caution__box { padding: 26px 22px; }
    .dtpl-apply__grid { grid-template-columns: 1fr 1fr; }
    .dtpl-tip__grid { grid-template-columns: 1fr; }
    .dtpl-usb__imgs { grid-template-columns: 1fr; }
    .dtpl-policy { grid-template-columns: 1fr; gap: 24px; }
    .dtpl-check__mark { position: static; margin: 20px auto 0; }}
@media (max-width: 480px) {
    .dtpl-apply__grid { grid-template-columns: 1fr; }}

/* ── 상세 템플릿 전체 폭 확장(024→025 폭) 시 글줄 가독성 유지 ── */
.dtpl-policy { max-width: none; }
/* 긴 글 리스트는 배경 박스만 넓게, 텍스트는 중앙 정렬로 적정 폭 유지 */
.dtpl-caution__box, .dtpl-check__box, .dtpl-promise__box, .dtpl-tip__grid { max-width: 1100px; margin-left: auto; margin-right: auto; }
.dtpl-caution__box--single ul, .dtpl-check__box ul { max-width: 960px; margin-left: auto; margin-right: auto; }/* 혜택 배너 데코 아이콘을 넓어진 폭 우측 끝에 맞게 재배치 */

.dtpl-hero__deco .dc2 { right: 120px; }
/* 프로세스·혜택·신청 그리드는 넓어진 폭에서 간격만 소폭 확대 */
.dtpl-process__grid { gap: 28px 44px; }/* 첫 구매 혜택 배너 + 회원가입 혜택 — 구매 버튼(장바구니·바로구매) 아래 섹션 */
/* 배너 ↔ 회원가입 혜택 간격 */
/* ============================================================
   상품 상세 — 디자이너 시안(023.jpeg) 이미지 스트립 + 상품별 블록
   ============================================================ */
/* 하단 '상품 상세 안내'(컨테이너 전체폭)와 동일하게 */
/* 디자이너 이미지 스트립 */


/* 상품별 정보 블록 (디자이너 스타일) */
.dp { text-align: center; padding: 40px 0 24px; }/* 스펙표 */

.dp-spec__cell span.mute { color: #9a9a9a; font-weight: 500; }

@media (max-width: 768px) {
    .dp { padding: 28px 0 16px; }}

/* ============================================================
   카카오톡 상담 (footer.php)
   - 브랜드 컬러: 배경 #FEE500 / 글자·아이콘 #191919 (카카오 가이드 고정값,
     팔레트 변수를 쓰지 않는다 — 브랜드 식별색이라 사이트 테마와 무관)
   - 링크: _functions.php 의 KAKAO_CHAT_URL
   ============================================================ */

/* --- 고객센터 블록 버튼 (2열 그리드의 마지막 줄 전체폭) --- */
.btn-cs-kakao {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background-color: #fee500;
    border-color: #fee500;
    color: #191919;
}

.btn-cs-kakao:hover {
    background-color: #f2d900;
    border-color: #f2d900;
    color: #191919;      /* .btn-cs:hover 의 흰 글자 상속을 막는다 */
}

/* --- 우하단 플로팅 버튼 (전 페이지) --- */
.kakao-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;        /* 헤더 100 · 드로어 200 위, 모달 10000 아래 */
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 20px;
    border-radius: 999px;
    background-color: #fee500;
    color: #191919;
    font-family: var(--font-kr);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.kakao-float:hover {
    background-color: #f2d900;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.kakao-float:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
}

/* 모바일: 텍스트를 감추고 원형 아이콘만 (엄지 반경 안에 두되 화면을 덜 가림) */
@media (max-width: 768px) {
    .kakao-float {
        right: 16px;
        bottom: 16px;
        padding: 0;
        width: 54px;
        height: 54px;
        justify-content: center;
        gap: 0;
    }

    .kakao-float-text { display: none; }
}

/* 모션 최소화 선호 사용자 */
@media (prefers-reduced-motion: reduce) {
    .kakao-float { transition: none; }
    .kakao-float:hover { transform: none; }
}

/* 모바일 드로어(.nav-menu.is-open, ≤991px)가 열리면 플로팅 버튼을 숨긴다.
   드로어는 top:72px 부터 아래로 펼쳐져 화면이 짧은 기기에서 버튼과 겹친다.
   :has() 미지원 브라우저에서는 버튼이 그대로 보일 뿐 기능엔 지장 없음. */
@media (max-width: 991px) {
    body:has(.nav-menu.is-open) .kakao-float { display: none; }
}


/* ============================================================
   쿠폰 · 적립금 (order.php / mypage.php / order_detail.php)
   ============================================================ */

/* --- 주문서: 할인 적용 블록 --- */
.promo-row { margin-bottom: 20px; }
.promo-row:last-child { margin-bottom: 0; }

.promo-row > label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: 8px;
}

.promo-select,
.promo-input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-kr);
    font-size: 14.5px;
    background-color: #ffffff;
    color: var(--color-text-main);
}

.promo-select:focus,
.promo-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.promo-select option:disabled { color: #b9b4ae; }

.promo-point-wrap { display: flex; gap: 8px; }
.promo-point-wrap .promo-input { text-align: right; }

.promo-allbtn {
    flex: 0 0 auto;
    padding: 0 18px;
    height: 48px;
    border: 1px solid var(--color-dark);
    border-radius: 8px;
    background-color: var(--color-dark);
    color: #ffffff;
    font-family: var(--font-kr);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.promo-allbtn:hover:not(:disabled) { opacity: 0.85; }
.promo-allbtn:disabled,
.promo-input:disabled,
.promo-select:disabled { opacity: 0.5; cursor: not-allowed; }

.promo-help { margin-top: 8px; font-size: 13px; color: var(--color-text-muted); }
.promo-help b { color: var(--color-primary); font-weight: 700; }
.promo-empty { font-size: 14px; color: var(--color-text-muted); padding: 12px 0; }

/* 결제 요약 — 할인/적립 줄 */
.sum-row.sum-discount span:last-child { color: var(--color-primary); font-weight: 700; }
.sum-row.sum-earn {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
    font-size: 13.5px;
    color: var(--color-text-muted);
}
.sum-row.sum-earn span:last-child { color: var(--color-gold); font-weight: 700; }

/* --- 마이페이지: 쿠폰함 --- */
.mp-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    vertical-align: middle;
}

.mp-stat-promo .num { color: var(--color-primary); }

.cp-list { list-style: none; margin: 0; padding: 0; }

.cp-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px dashed var(--color-border);
}
.cp-item:last-child { border-bottom: none; }

.cp-value {
    flex: 0 0 92px;
    text-align: center;
    color: var(--color-primary);
    line-height: 1.1;
}
.cp-value strong { font-family: var(--font-en); font-size: 26px; font-weight: 800; }
.cp-value span { font-size: 13px; font-weight: 700; }

.cp-body { flex: 1 1 auto; min-width: 0; }
.cp-name { font-size: 15px; font-weight: 700; color: var(--color-dark); margin-bottom: 4px; }
.cp-meta { font-size: 13px; color: var(--color-text-muted); }
.cp-code {
    margin-top: 5px;
    font-family: var(--font-en);
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: #9a948d;
}

.cp-exp { flex: 0 0 auto; text-align: right; }
.cp-dday {
    display: block;
    font-family: var(--font-en);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
}
.cp-dday.soon { color: #c0392b; }
.cp-date { display: block; margin-top: 3px; font-size: 12px; color: #9a948d; }

.cp-note { margin-top: 14px; font-size: 13px; color: var(--color-text-muted); }

/* --- 마이페이지: 적립금 내역 --- */
.pt-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pt-table th {
    padding: 10px 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-muted);
    text-align: left;
}
.pt-table td { padding: 12px 8px; border-bottom: 1px dashed var(--color-border); vertical-align: top; }
.pt-table tr:last-child td { border-bottom: none; }
.pt-table .ta-r { text-align: right; }

.pt-date { color: var(--color-text-muted); font-size: 13px; white-space: nowrap; }
.pt-type { font-weight: 600; color: var(--color-dark); }
.pt-reason { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-text-muted); }
.pt-plus  { color: #1e8e4e; font-weight: 700; white-space: nowrap; }
.pt-minus { color: #c0392b; font-weight: 700; white-space: nowrap; }
.pt-bal   { color: var(--color-text-muted); white-space: nowrap; }

/* --- 주문 상세: 할인 내역 --- */
.od-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-text-muted);
}
.od-sub-disc span:last-child { color: var(--color-primary); font-weight: 700; }
.od-sub-earn {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}
.od-sub-earn span:last-child { color: var(--color-gold); font-weight: 700; }

@media (max-width: 580px) {
    .cp-item { flex-wrap: wrap; gap: 10px; }
    .cp-value { flex-basis: 70px; }
    .cp-exp { flex-basis: 100%; text-align: left; }
    .cp-dday, .cp-date { display: inline; margin-right: 8px; }
    .pt-table { font-size: 13px; }
    .pt-table td, .pt-table th { padding: 9px 4px; }
}