/* =========================
   4D SUB CATEGORY STRIP
========================= */

.four-d-category-wrap {
    display: flex;
    justify-content: center;      /* 데스크탑 중앙 */
    align-items: center;
    gap: 8px;
    margin: 20px 0 28px;
    flex-wrap: wrap;              /* 데스크탑은 줄바꿈 허용 */
}

/* 버튼 */
.four-d-category-btn {
    padding: 6px 12px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 20px;
    background: #fff;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.four-d-category-btn:hover {
    background: #f1f3f5;
    border-color: #adb5bd;
}

/* =========================
   MOBILE (한 줄 강제)
========================= */
@media (max-width: 576px) {
    .four-d-category-wrap {
        flex-wrap: nowrap;          /* 한 줄 */
        overflow-x: auto;           /* 가로 스크롤 */
        justify-content: flex-start;
        padding: 0 6px;
        -webkit-overflow-scrolling: touch;
    }

    .four-d-category-btn {
        flex: 0 0 auto;
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    /* 스크롤바 숨김 */
    .four-d-category-wrap::-webkit-scrollbar {
        display: none;
    }
}
/* =========================
   4D NAV
========================= */

.four-d-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 22px;
    flex-wrap: wrap;
}

.four-d-nav-btn {
    padding: 6px 14px;
    font-size: 0.85rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.15s ease;
}

.four-d-nav-btn:hover {
    background: #f1f3f5;
}

.four-d-nav-btn.active {
    background: #212529;
    color: #fff;
    border-color: #212529;
}

/* 모바일 */
@media (max-width: 576px) {
    .four-d-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 6px;
    }

    .four-d-nav-btn {
        flex: 0 0 auto;
        font-size: 0.8rem;
        padding: 8px 14px; /* 터치 영역 확대 */
    }

    .four-d-nav::-webkit-scrollbar {
        display: none;
    }
}
/* =========================
   4D TONE VARIANTS
========================= */

/* DREAM (기본, 따뜻한 오디오 톤) */
body.four-d.dream .four-d-nav-btn.active {
    background: #6f4e37; /* 브라운 */
    border-color: #6f4e37;
}

/* DRAM (기록/지식, 차분한 톤) */
body.four-d.dram .four-d-nav-btn.active {
    background: #495057; /* 다크 그레이 */
    border-color: #495057;
}

/* DRAMA (이야기/감정, 와인 톤) */
body.four-d.drama .four-d-nav-btn.active {
    background: #7b2d26;
    border-color: #7b2d26;
}

/* DUNGEON (실험/도전, 하이테크 톤) */
body.four-d.dungeon .four-d-nav-btn.active {
    background: #0d6efd; /* 블루 */
    border-color: #0d6efd;
}
/* =========================
   4D 카드 Hover 효과
========================= */
.four-d-card,
.card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.four-d-card:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.four-d-card img,
.card img {
  transition: transform 0.35s ease;
}

.four-d-card:hover img,
.card:hover img {
  transform: scale(1.03);
}