/* ===================================================================
   space-intro.css - 공간 소개 페이지 전용 스타일
   =================================================================== */

/* 공간 소개 메인 섹션 */
.space-intro-section {
    padding: calc(var(--nav-height, 88px) + var(--spacing-32)) 0 0;
    background: transparent; /* 전역 배경으로 통일 */
    min-height: 100vh; /* 전체 화면 높이 */
}

/* space-intro-section 컨테이너 기본 패딩 (데스크탑) */
.space-intro-section .container {
    padding-left: var(--spacing-10); /* 40px - 데스크탑 기본값 */
    padding-right: var(--spacing-10); /* 40px - 데스크탑 기본값 */
}

/* 모바일에서 네비게이션 바 높이 조정 */
@media (max-width: 768px) {
    .space-intro-section {
        padding: calc(var(--nav-height, 88px) + var(--spacing-8)) 0 var(--spacing-6) !important; /* 네비게이션 높이 + 32px 간격, 하단 24px */
    }
    
    .space-intro-section .container,
    .space-info-section .container {
        padding-left: var(--spacing-5) !important; /* 20px - 모바일 전역 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 모바일 전역 패딩 */
    }
    
    /* 모바일에서 타이틀 레이아웃 조정 */
    .space-intro-title-wrapper {
        grid-template-columns: 1fr; /* 모바일에서는 1열 */
        gap: var(--spacing-lg);
    }
    
    .space-intro-subtitle {
        text-align: left; /* 모바일에서는 좌측 정렬 */
    }
}

/* 텍스트 헤더 - Figma 디자인 기반 + 애니메이션 */
.space-intro-header {
    /* 헤더와 이미지 슬라이더 사이 간격 - 데스크탑 기본값 */
    margin-bottom: var(--spacing-24); /* 96px - 데스크탑 기본값 */
    opacity: 0;
    transform: translateY(var(--spacing-7-5, 1.875rem));
    animation: fadeInUp 1s ease-out 0.3s forwards;
    grid-column: 1 / 2; /* 왼쪽 1fr 컬럼에 배치 */
}

.space-intro-title-wrapper {
    display: grid; /* 그리드 레이아웃 사용 */
    grid-template-columns: 1fr auto; /* 왼쪽: 유동적 / 오른쪽: 콘텐츠 크기에 맞춤 */
    gap: var(--spacing-md);
    align-items: flex-end;
}

.space-intro-title-main {
    /* 디자인 시스템 타이포 클래스 사용: heading-h2 */
    color: var(--text-primary);
    /* heading-h2의 기본 행간 1.5 유지 */
    line-height: var(--line-height-normal);
}

/* 모바일 전용 줄바꿈 처리 (.br--mobile): 데스크탑에서는 숨김, 모바일에서만 표시 */
br.br--mobile { display: none; }
@media (max-width: 768px) {
  br.br--mobile { display: inline; }
  /* 모바일에서 각 라인을 강제 1줄로 고정 */
  .space-intro-title-main .line-mobile {
    display: block;
    white-space: nowrap;     /* 자동 줄바꿈 방지 */
  }
}

.space-intro-title-main .space-intro-title-line {
    display: inline-block;
    opacity: 0; /* 애니메이션 시작 전 투명 */
    transform: translateY(var(--spacing-5)); /* 20px - 애니메이션 시작 위치 */
    animation: fadeInUp 0.8s ease-out forwards;
    /* 애니메이션이 실패하거나 완료되지 않을 경우를 대비해 will-change 추가 */
    will-change: opacity, transform;
}

.space-intro-title-main .space-intro-title-line:nth-of-type(1) {
    animation-delay: 0.5s;
}

.space-intro-title-main .space-intro-title-line:nth-of-type(2) {
    animation-delay: 0.7s;
}

.space-intro-title-main .space-intro-title-line:nth-of-type(3) {
    animation-delay: 0.9s;
}

.space-intro-subtitle {
    /* 디자인 시스템 타이포 클래스 사용: heading-h2 */
    color: var(--text-primary);
    margin: 0; /* 기본 p 여백 제거로 간격 정확화 */
    white-space: nowrap;
    text-align: right; /* 2열에서 우측 정렬 */
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 1.1s forwards;
    /* 컨테이너 패딩과 동일한 경계에 정렬 (이미지 슬라이더와 맞춤) */
    margin-right: 0;
}

/* 텍스트 애니메이션 키프레임 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(var(--spacing-5)); /* 20px */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 공간 소개 콘텐츠 - 데스크탑에서 좌우 1fr 레이아웃 */
.space-intro-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 왼쪽 1fr (헤더+설명) / 오른쪽 1fr (공백) */
    gap: var(--spacing-6); /* 24px - 푸터와 동일한 간격 */
    align-items: start;
}

/* 외관 이미지 슬라이더 영역 - 고도화 */
.space-exterior-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    opacity: 0;
    transform: translateY(var(--spacing-7-5, 1.875rem));
    animation: fadeInUp 1s ease-out 0.6s forwards;
    grid-column: 1 / -1; /* 전체 콘텐츠 영역 풀 (모든 컬럼 차지) */
}

.space-exterior-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6; /* 16:6 비율 (데스크탑) */
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    /* 그림자 제거 */
    box-shadow: none;
    transition: transform 0.3s ease;
}

/* 하단 가독성 향상용 그라데이션 오버레이 */
.space-exterior-image::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 25%; /* 이미지 높이의 25% */
    background: linear-gradient(180deg, rgba(23, 20, 20, 0) 0%, rgba(23, 20, 20, 0.55) 100%);
    pointer-events: none; /* 클릭 방해 방지 */
    border-radius: inherit; /* 모서리 일치 */
    z-index: 1; /* 이미지 위, 컨트롤 아래 */
}

.space-exterior-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    position: relative; /* 컨트롤과의 z-index 기준 확보 */
    z-index: 0;
}

/* 이미지 내부 우측 하단 컨트롤 배치 */
.space-exterior-controls-inside {
    position: absolute;
    right: var(--spacing-5); /* 20px - 데스크탑/태블릿 기본값 */
    bottom: var(--spacing-5); /* 20px - 데스크탑/태블릿 기본값 */
    display: flex;
    gap: var(--spacing-sm);
    padding: 0; /* 패딩으로 추가 간격이 생기지 않도록 제거 */
    z-index: 3; /* 이미지/오버레이 위 */
}


/* 슬라이더 컨트롤 버튼은 공통 컴포넌트(.btn--control) 스타일을 사용 */

/* 닷형 페이지네이션 */
.space-exterior-indicator {
    display: flex;
    justify-content: flex-start; /* 이미지 하단 왼쪽 정렬 */
    gap: var(--spacing-2);
    opacity: 0;
    transform: translateY(var(--spacing-2-5));
    animation: fadeInUp 0.8s ease-out 1.5s forwards;
    margin-top: var(--spacing-2);
}

/* 닷 스타일은 공통 컴포넌트 규칙(css/components.css)을 그대로 사용 */

/* 슬라이더 진행 표시 */
.space-exterior-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--spacing-1);
    background: rgba(255, 255, 255, 0.3);
    transition: width 0.3s ease;
}

.space-exterior-progress-bar {
    height: 100%;
    background: var(--color-warm-grey-100);
    transition: width 0.3s ease;
}

/* 공간 소개 정보 - 고도화 */
.space-exterior-info {
    display: flex;
    justify-content: flex-start; /* 기본: 좌측 정렬 */
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 아래에서 시작 */
    animation: fadeInUp 1s ease-out 0.8s forwards; /* 아래에서 위로 등장 */
    grid-column: 2 / 3; /* 오른쪽 1fr 컬럼에 배치 */
}

.space-exterior-info-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    align-items: flex-start; /* 좌측 정렬 */
    position: relative;
    width: 100%;
}

.space-exterior-info-text p {
    width: 100%; /* 부모 너비 전체 사용 */
    word-break: keep-all; /* 한국어 단어 단위로 줄바꿈 */
    overflow-wrap: break-word; /* 긴 단어도 줄바꿈 */
    white-space: normal; /* 줄바꿈 허용 */
}

.space-exterior-info-text::before {
    content: '';
    position: absolute;
    left: calc(var(--spacing-10) * -1);
    top: 0;
    bottom: 0;
    width: var(--spacing-0-5, 0.125rem);
    background: linear-gradient(to bottom, transparent, var(--color-warm-grey-200), transparent);
    opacity: 0;
    animation: fadeIn 1s ease-out 1.2s forwards;
}

.space-exterior-info-text h2 {
    font-family: var(--font-family-bold);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-snug);
    color: var(--color-warm-grey-100);
    letter-spacing: calc(var(--font-size-2xl) * -0.02);
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 1.4s forwards;
}

.space-exterior-info-text p {
    font-family: var(--font-family-regular);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-relaxed);
    color: var(--color-warm-grey-100);
    letter-spacing: calc(var(--font-size-xl) * -0.02);
    width: 100%;
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 1.6s forwards;
}

/* 데스크탑/모바일 전용 타이틀 분기 */
.space-intro-title--mobile { display: none; }
@media (max-width: 768px) {
  .space-intro-title--desktop { display: none !important; }
  .space-intro-title--mobile { display: block !important; }
}

/* 추가 애니메이션 키프레임 */
@keyframes fadeInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* 공간 안내 섹션 */
.space-info-section {
    padding: var(--spacing-5xl) 0;
    background: transparent; /* 전역 배경으로 통일 */
}

/* space-info-section 컨테이너 기본 패딩 (데스크탑) */
.space-info-section .container {
    padding-left: var(--spacing-10); /* 40px - 데스크탑 기본값 */
    padding-right: var(--spacing-10); /* 40px - 데스크탑 기본값 */
}

.space-info-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 데스크탑 기본값: 좌 1fr (타이틀) / 우 1fr (내용) */
    gap: var(--spacing-6); /* 24px - 푸터와 동일한 간격 */
    align-items: start;
}

.space-info-title { 
    color: var(--color-warm-grey-100); 
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 2.0s forwards; /* 논리적 순서: space-exterior-info p (1.6s) 이후 */
}

.space-info-text-block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    align-items: flex-start; /* 버튼 가로 사이즈를 콘텐츠 기준(hug)으로 */
}
/* 반반 레이아웃 유지: 우측도 1fr로 꽉 차게 사용 (최대폭 제한 해제) */

.space-info-headline {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.space-info-headline h3 { 
    color: var(--color-warm-grey-100); 
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 2.2s forwards; /* 논리적 순서: title 이후 */
}

/* 데스크탑/모바일 전용 제목 분기 (space-info 섹션) */
.space-info-title--mobile { display: none; }
@media (max-width: 768px) {
  .space-info-title--desktop { display: none; }
  .space-info-title--mobile { 
    display: block !important;   /* flex 강제 해제 */
    white-space: normal !important; 
    word-break: keep-all;        /* 한국어 단어 중간 끊김 방지 */
  }
  /* 모바일에서 명시적 줄바꿈 <br> 강제 반영 */
  .space-info-title--mobile br { display: inline; }
  /* 기존 전역 규칙(.space-info-headline h3.heading-h3 br { display:none !important })을 무효화 */
  .space-info-headline h3.space-info-title--mobile.heading-h3 br { display: inline !important; }
}

.space-info-headline p { 
    color: var(--color-warm-grey-100); 
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 2.4s forwards; /* 논리적 순서: h3 이후 */
}

.space-info-text-block .btn {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 2.6s forwards; /* 논리적 순서: p 이후 */
}

/* 층별 상세 섹션 */
/* 페이지 전역 배경 스코프 - 전체 페이지에 적용 */
.space-intro-page { background-color: var(--bg-primary); }

/* 층별 안내 (간단 탭 섹션) */
.floor-section { 
    padding: var(--spacing-5xl) 0;
}

/* floor-section 컨테이너 기본 패딩 (데스크탑) */
.floor-section .container { 
    padding-left: var(--spacing-10); /* 40px - 데스크탑 기본값 */
    padding-right: var(--spacing-10); /* 40px - 데스크탑 기본값 */
}

.floor-section-header { 
    margin-bottom: var(--spacing-2xl);
}

.floor-section-header .heading-h3 { 
    margin: 0 0 var(--spacing-sm) 0; 
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 2.8s forwards; /* 논리적 순서: space-info-section 이후 */
}

.floor-section-header .body-lg { 
    margin: 0; 
    color: var(--text-secondary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.0s forwards; /* 논리적 순서: h3 이후 */
}

.floor-actions { 
    display: flex; 
    gap: var(--spacing-md); 
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.2s forwards; /* 논리적 순서: body-lg 이후 */
}

/* ✅ 세로 2컬럼 레이아웃 - 왼쪽/오른쪽 동일 비율 */
.floor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 왼쪽/오른쪽 동일 비율 */
    gap: var(--spacing-6); /* 24px - 푸터와 동일한 간격 */
    align-items: start;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.5s forwards; /* 래퍼 살짝 먼저 */
}

/* ✅ 탭 아래에서 도면 시작 */
.floor-col-left {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    position: sticky;
    top: calc(var(--nav-height, 88px) + var(--spacing-xl)); /* 스크롤 시 왼쪽 컬럼 전체 고정 */
    align-self: start; /* 컬럼이 그리드에서 시작 위치에 정렬 */
}

/* ✅ 세로 탭 */
.floor-tabs--vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.58s forwards; /* 좌측 탭이 아주 살짝 먼저 */
}

.floor-plan-area {
    margin-top: var(--spacing-xl);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    transition: opacity var(--tab-switch-duration, 220ms) ease,
                transform var(--tab-switch-duration, 220ms) ease; /* 탭 전환 즉시 표시 */
}

.floor-plan-area:not(.is-active) {
    display: none;
}

/* 탭 전환 시 활성 도면은 즉시 표시 */
.floor-plan-area.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: none; /* 지연 애니메이션 제거 */
}

.floor-plan-image {
    width: 100%;
    max-width: 16.25rem;
    height: auto;
    margin-bottom: var(--spacing-md);
    object-fit: contain;
    border-radius: var(--border-radius-md);
}

/* 태블릿 및 데스크탑에서 도면 이미지 크기 조정 */
@media (min-width: 769px) {
    .floor-plan-image {
        width: 50% !important; /* 태블릿/데스크탑: 가로 50% */
        max-width: none !important; /* max-width 제거하여 width 50%만 적용 */
    }
}

.floor-plan-caption { 
    margin: var(--spacing-1) 0 0 0; 
    color: var(--text-secondary); 
}

/* 지하 1층 도면 아래 브랜드 안내 텍스트 */
.floor-plan-brand-info {
    margin-top: var(--spacing-md); /* 도면과의 간격 */
}

.floor-plan-brand-list {
    margin: 0;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ✅ 오른쪽 콘텐츠 */
.floor-col-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* ✅ 콘텐츠 기본 (탭 전환 시 부드러운 전환) */
:root { --tab-switch-duration: 220ms; }
.floor-content { 
    display: none !important; /* 비활성 콘텐츠 숨김 */
    opacity: 0;
    transform: translateY(var(--spacing-2));
    transition: opacity var(--tab-switch-duration) ease,
                transform var(--tab-switch-duration) ease;
}
.floor-content.is-active { 
    display: block !important; /* 활성화된 것만 표시 */
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   탭 전환 모드(빠른 전환)
   ========================= */
body.is-switching .floor-content.is-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--tab-switch-duration) ease,
                transform var(--tab-switch-duration) ease;
}
body.is-switching .floor-content.is-active * {
    animation: none !important; /* 스태거 애니 제거 */
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 탭 전환 시 재애니로 인한 깜빡임 방지: 대상 콘텐츠에 no-anim 부여 */
.floor-content.no-anim,
.floor-content.no-anim * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.floor-plan-area.no-anim,
.floor-plan-area.no-anim * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}
body.is-switching .floor-plan-area.is-active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    transition: opacity var(--tab-switch-duration) ease,
                transform var(--tab-switch-duration) ease;
}
.floor-gallery { display: flex; flex-direction: column; gap: 0; } /* 개별 요소 간격을 세분화 제어 */
.floor-gallery__text { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-lg); 
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.6s forwards; /* 탭/도면과 거의 동시에 */
}
.floor-gallery__text { margin-bottom: var(--spacing-15); } /* 텍스트 블록과 첫 이미지 사이 60px */
.floor-gallery__text > * { margin: 0; }
.floor-gallery__text .heading-h3 { line-height: var(--line-height-snug); margin: 0; } /* 1.4로 변경 (기존 1.2에서 조정) */
.floor-gallery__image { 
    width: 100%; 
    height: auto; 
    border-radius: var(--border-radius-md); 
    object-fit: cover; 
    box-shadow: none;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
}
.floor-gallery__image + .floor-gallery__image { margin-top: var(--spacing-5); } /* 이미지 사이 20px */
.floor-gallery__image:nth-of-type(1) {
    animation: fadeInUp 0.8s ease-out 3.72s forwards; /* 첫 번째 이미지 */
}
.floor-gallery__image:nth-of-type(2) {
    animation: fadeInUp 0.8s ease-out 3.84s forwards; /* 두 번째 이미지 */
}
.floor-gallery__image:nth-of-type(3) {
    animation: fadeInUp 0.8s ease-out 3.96s forwards; /* 세 번째 이미지 */
}
.floor-gallery__info { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-md); 
    margin-top: var(--spacing-xl); 
    align-items: flex-start;
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 4.08s forwards; /* 이미지들 이후도 당김 */
}
.floor-gallery__info .btn { width: auto; align-self: flex-start; }
.floor-gallery__info .btn { margin-top: var(--spacing-8); }

/* 공간 정보 새 디자인 구조 */
.venue-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8); /* 32px - 리스트 간 간격 */
    width: 100%;
}

.venue-info-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1); /* 4px - 제목과 내용 간격 */
    width: 100%;
}

.venue-info-row__title {
    color: var(--text-primary);
    margin: 0;
}

.venue-info-row__content {
    color: var(--text-primary);
    margin: 0;
}

.venue-info-list-items {
    list-style: none; /* 기본 불릿 제거 */
    margin: 0;
    padding-left: 0;
}

.venue-info-list-items li {
    margin: 0;
    padding: 0;
    padding-left: var(--spacing-4); /* 16px - 불릿 기호와 텍스트 사이 간격 (24px에서 줄임) */
    position: relative;
    line-height: 1.6;
}

.venue-info-list-items li::before {
    content: "-";
    position: absolute;
    left: 0;
    color: var(--text-primary);
}

.venue-info-list-items li:not(:last-child) {
    margin-bottom: 0;
}

/* 모바일에서 면적 정보 줄바꿈 처리 */
/* 데스크탑에서는 <br> 숨김 */
.venue-info-item br {
    display: none;
}

/* 모바일에서만 <br> 표시 */
@media (max-width: 768px) {
    .venue-info-item br {
        display: block;
    }
    
    .venue-info-item {
        /* 모바일에서 줄바꿈이 자연스럽게 처리되도록 */
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

.floor-metrics, .floor-features-text { display: flex; flex-direction: column; gap: 0; }
.floor-metrics p, .floor-features-text p { margin: 0; }
/* 묶음 간 간격 */
.floor-features-text { margin-top: var(--spacing-4); }
/* 1F/2F 등 하위 섹션 간 간격 확대 */
.floor-subsection + .floor-subsection { margin-top: var(--spacing-6); }
.floor-features { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); list-style: none; padding: 0; margin: 0; }
.floor-features li { background: var(--color-warm-grey-10); color: var(--text-primary); border: var(--spacing-0-5, 0.0625rem) solid var(--border-light); border-radius: var(--radius-md, 8px); padding: var(--spacing-1-5, 0.375rem) var(--spacing-2-5); }

/* 전시(현재/과거) 섹션 */
.floor-exhibitions { display: flex; flex-direction: column; gap: var(--spacing-6); margin-top: var(--spacing-6); width: 100%; }
.floor-exhibitions__section { display: flex; flex-direction: column; gap: var(--spacing-3); }
.floor-exhibitions__grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: var(--spacing-6); /* 좌우 간격 */
    row-gap: var(--spacing-20); /* 행 간격: 공통 정의 (80px) */
}
.floor-exhibitions__card { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--spacing-3); align-items: start; }
.floor-exhibitions__thumb { width: 7.5rem; height: var(--spacing-20); object-fit: cover; border-radius: var(--border-radius-sm, 6px); }
.floor-exhibitions__meta { display: flex; flex-direction: column; gap: var(--spacing-1); }
.floor-exhibitions__title { color: var(--text-primary); text-decoration: none; }
.floor-exhibitions__title:hover { text-decoration: underline; }
.floor-exhibitions__period { color: var(--text-secondary); }
.floor-exhibitions__section[data-type="past"] .btn { margin-top: 0; }
.floor-exhibitions__header { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding-top: var(--spacing-6); margin-top: var(--spacing-6); border-top: 1px solid var(--border-very-dark); width: 100%; }
.floor-exhibitions__header .btn { padding: 0; }

/* 1F—2F 전시 운영 정보 */
.floor-exhibition-overview { 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-8); /* 32px */
    padding-top: var(--spacing-6); /* 24px */
    margin-top: var(--spacing-6); /* 24px */
    border-top: var(--spacing-0-5, 0.0625rem) solid var(--border-very-dark); 
    width: 100%; 
}
.floor-exhibition-overview .heading-h3 { margin: 0; }
.floor-exhibition-overview p { margin: 0; }
.floor-exhibition-overview__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6); /* 24px - 제목과 헤드라인 그룹 사이 */
}
.floor-exhibition-overview__content h4 {
    margin: 0;
}
/* 헤드라인과 메타 정보를 묶는 그룹 */
.floor-exhibition-overview__info-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5); /* 20px - 헤드라인과 메타 정보 사이 */
}
.floor-exhibition-overview__info-group > p {
    margin: 0;
}
.floor-exhibition-overview__meta { 
    display: flex; 
    flex-direction: column; 
}
.floor-exhibition-overview__meta p { 
    margin: 0;
    margin-bottom: 0;
}
.floor-exhibition-overview__meta p:last-child {
    margin-bottom: 0;
}
.floor-exhibition-overview .btn { 
    width: auto; 
    align-self: flex-start; 
}


/* 반응형 디자인 - 모바일 (768px 이하) */
@media (max-width: 768px) {
    .space-info-content {
        grid-template-columns: 1fr; /* 모바일에서는 1열 */
        gap: var(--spacing-6); /* 24px - 모바일 콘텐츠 간격 축소 */
    }
    
    .floor-exhibitions__grid { 
        grid-template-columns: 1fr; /* 모바일에서는 1열 */
    }
    
    .floor-layout {
        grid-template-columns: 1fr; /* 모바일에서는 1열 */
    }
    
    .floor-tabs--vertical {
        position: static;
        flex-direction: row; /* 모바일에서는 자동 가로 탭 */
        gap: var(--spacing-lg);
        padding-bottom: var(--spacing-md);
    }
    
    .floor-plan-image {
        max-width: 100%;
    }
}

/* 태블릿 반응형 디자인 (769px ~ 1199px) */
@media (min-width: 769px) and (max-width: 1199px) {
    .space-intro-section .container {
        padding-left: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
    }
    
    .space-info-section .container {
        padding-left: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
    }
    
    .floor-section .container {
        padding-left: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
        padding-right: var(--spacing-8); /* 32px - 태블릿 좌우 패딩 */
    }
    
    /* 태블릿에서는 좌/우 배치 유지 (유동적 그리드 유지) */
    /* 타이틀 래퍼: 태블릿에서도 왼쪽 유동적, 오른쪽 콘텐츠 크기에 맞춤 */
    .space-intro-title-wrapper {
        grid-template-columns: 1fr auto; /* 왼쪽: "시간의 깊이와..." (유동적) / 오른쪽: "연희정음" (콘텐츠 크기) */
    }
    
    /* 태블릿에서 헤더 하단 여백 조정 */
    .space-intro-header {
        margin-bottom: var(--spacing-12); /* 48px - 태블릿 하단 여백 (데스크탑 96px 대비 절반) */
    }
    
    /* 이미지 슬라이더 비율: 데스크탑과 동일한 와이드 비율 유지 (aspect-ratio) */
    .space-exterior-image {
        aspect-ratio: 16 / 9; /* 와이드 비율 유지 */
    }
    
    /* 태블릿 구간에서 헤드라인 텍스트 크기: heading-h2 기본값 유지 (반응형 크기) */
    /* heading-h2는 태블릿 구간에서 최대 48px로 제한됨 (design-system.css) */
}

@media (max-width: 768px) {
    /* 공간 소개 콘텐츠: 모바일에서 세로 배치 */
    .space-intro-content {
        grid-template-columns: 1fr !important; /* 모바일에서는 1열 */
    }
    
    .space-intro-header {
        margin-bottom: var(--spacing-6); /* 24px - 모바일 하단 여백 축소 (데스크탑 96px 대비) */
        grid-column: auto !important; /* 그리드 컬럼 지정 해제 */
    }
    
    /* 타이틀 래퍼: 모바일에서 세로 배치 */
    .space-intro-title-wrapper {
        grid-template-columns: 1fr !important; /* 모바일에서는 1열 */
        gap: var(--spacing-4); /* 16px - 제목 텍스트와 "연희정음" 사이 간격 축소 */
    }
    
    /* 모바일에서도 br 태그 유지하여 3줄로 표시 */
    .space-intro-title-main br {
        display: none; /* br 태그 숨김 (span이 block이므로 자동 줄바꿈) */
    }
    
    .space-intro-title-main {
        white-space: normal;
        line-height: var(--line-height-normal); /* 기본 행간 유지 */
    }
    
    .space-intro-title-main .space-intro-title-line {
        display: block; /* 각 줄을 블록 요소로 표시하여 3줄 유지 */
        margin: 0; /* 기본 margin 제거 */
        line-height: var(--line-height-normal); /* 기본 행간 유지 */
    }
    
    /* 첫 번째와 두 번째 줄 사이 간격 제어 (필요시 조정) */
    .space-intro-title-main .space-intro-title-line + .space-intro-title-line {
        margin-top: 0; /* 줄 사이 간격 제거 */
    }
    
    .space-intro-subtitle {
        text-align: right !important; /* 모바일에서 우측 정렬 */
        margin-right: 0;
        margin-top: 0 !important; /* 상단 여백 제거 */
        margin-bottom: 0 !important; /* 하단 여백 제거 */
    }
    
    /* 481px ~ 768px 구간: 헤드라인 텍스트 크기 제한 (태블릿보다 작게) */
    .space-intro-title-main {
        font-size: clamp(1.875rem, calc(1.875rem + 10 * (100vw - 30rem) / 18), 2.25rem) !important; /* 30px → 36px (481px ~ 768px) */
    }
    
    .space-intro-subtitle {
        font-size: clamp(1.875rem, calc(1.875rem + 10 * (100vw - 30rem) / 18), 2.25rem) !important; /* 30px → 36px (481px ~ 768px) */
    }
    
    /* 모바일에서 heading-h3 크기 조정 (heading-h2보다 작게) */
    /* space-intro-title-main (heading-h2): 모바일 28px → 태블릿 32px */
    /* space-info-headline h3 (heading-h3): 모바일 24px로 설정하여 heading-h2보다 작게 */
    .space-info-headline h3.heading-h3 {
        font-size: clamp(1.5rem, calc(1.5rem + 8 * (100vw - 22.5rem) / 67.5), 2rem) !important; /* 24px → 32px (모바일에서 heading-h2보다 작게) */
    }
    
    /* 층별 안내 섹션의 하단 헤드라인도 동일하게 조정 */
    .floor-gallery__text .heading-h3 {
        font-size: clamp(1.5rem, calc(1.5rem + 8 * (100vw - 22.5rem) / 67.5), 2rem) !important; /* 24px → 32px (모바일에서 heading-h2보다 작게) */
        white-space: normal !important; /* 모바일에서 단어 단위로 줄바꿈 */
        word-break: keep-all !important; /* 단어 단위로 줄바꿈 (한글 최적화) */
        overflow-wrap: break-word !important; /* 긴 단어는 줄바꿈 허용 */
    }
    
    /* 모바일에서 <br> 태그를 공백으로 처리 (줄바꿈 제거) */
    .floor-gallery__text .heading-h3 br {
        display: none !important; /* 모바일에서 <br> 숨김 */
    }
    
    /* B1층 요약의 heading-h3도 다른 층과 동일하게 모바일 스타일 적용 */
    .floor-b1-summary .heading-h3 {
        font-size: clamp(1.5rem, calc(1.5rem + 8 * (100vw - 22.5rem) / 67.5), 2rem) !important; /* 24px → 32px (모바일에서 heading-h2보다 작게) */
        white-space: normal !important; /* 모바일에서 단어 단위로 줄바꿈 */
        word-break: keep-all !important; /* 단어 단위로 줄바꿈 (한글 최적화) */
        overflow-wrap: break-word !important; /* 긴 단어는 줄바꿈 허용 */
    }
    
    /* 모바일에서 <br> 태그를 공백으로 처리 (줄바꿈 제거) */
    .floor-b1-summary .heading-h3 br {
        display: none !important; /* 모바일에서 <br> 숨김 */
    }
    
    /* 모바일에서 공간 안내 섹션의 헤드라인 텍스트도 단어 단위로 줄바꿈 */
    .space-info-headline h3.heading-h3 {
        white-space: normal !important; /* 모바일에서 단어 단위로 줄바꿈 */
        word-break: keep-all !important; /* 단어 단위로 줄바꿈 (한글 최적화) */
        overflow-wrap: break-word !important; /* 긴 단어는 줄바꿈 허용 */
    }
    
    /* 모바일에서 <br> 태그를 공백으로 처리 (줄바꿈 제거) */
    .space-info-headline h3.heading-h3 br {
        display: none !important; /* 모바일에서 <br> 숨김 */
    }
    
    .space-info-headline p {
        white-space: normal !important; /* 모바일에서 단어 단위로 줄바꿈 */
        word-break: keep-all !important; /* 단어 단위로 줄바꿈 (한글 최적화) */
        overflow-wrap: break-word !important; /* 긴 단어는 줄바꿈 허용 */
    }
    
    /* 외관 이미지 영역: 모바일에서 그리드 컬럼 지정 해제 */
    .space-exterior-area {
        grid-column: auto !important; /* 그리드 컬럼 지정 해제 */
    }
    
    /* 외관 정보: 모바일에서 세로 배치 */
    .space-exterior-info {
        display: flex !important; /* 그리드에서 플렉스로 변경 */
        flex-direction: column !important; /* 세로 배치 */
        justify-content: flex-start;
        gap: var(--spacing-4); /* 간격 추가 */
        grid-column: auto !important; /* 그리드 컬럼 지정 해제 */
    }
    
    .space-exterior-info-text {
        width: 100%;
        align-items: flex-start;
    }
    
    /* 공간 안내 콘텐츠: 모바일에서 세로 배치 */
    .space-info-content {
        grid-template-columns: 1fr !important; /* 모바일에서는 1열 */
        gap: var(--spacing-5); /* 20px - 타이틀과 내용 그룹핑 개선 */
    }
    
    /* 층별 레이아웃: 모바일에서 세로 배치 */
    .floor-layout {
        grid-template-columns: 1fr !important; /* 모바일에서는 1열 */
    }
    
    .space-info-section { 
        padding: var(--spacing-12) 0; /* 48px - 모바일 섹션 간격 축소 (데스크탑 128px 대비) */
    }
    
    .floor-section { 
        padding: var(--spacing-12) 0 !important; /* 48px - 모바일 섹션 간격 축소 (데스크탑 128px 대비) */
    }
    
    .floor-section .container { 
        padding-left: var(--spacing-5) !important; /* 20px - 모바일 전역 패딩 */
        padding-right: var(--spacing-5) !important; /* 20px - 모바일 전역 패딩 */
    }
    
    .floor-content { 
        grid-template-columns: 1fr; 
        gap: var(--spacing-6); /* 24px - 모바일 콘텐츠 간격 축소 */
    }
    
    .floor-plan-image { 
        width: 100%; /* 모바일: 가로 100% */
        max-width: 100%; /* 모바일에서는 최대 100% */
        height: auto; 
    }
    
    /* 이미지 슬라이더 비율: 데스크탑과 동일한 와이드 비율 유지 (aspect-ratio) */
    .space-exterior-image {
        aspect-ratio: 16 / 9; /* 와이드 비율 유지 */
    }
    
    /* 모바일에서 컨트롤 버튼 크기 및 위치 조정 */
    .space-exterior-controls-inside {
        right: var(--spacing-4); /* 16px - 모바일 우측 패딩 축소 */
        bottom: var(--spacing-4); /* 16px - 모바일 하단 패딩 축소 */
    }
    
    .space-exterior-controls-inside .btn {
        width: var(--spacing-12) !important;
        height: var(--spacing-12) !important;
        padding: 0 !important;
        display: flex !important; /* 정렬을 위한 flex */
        align-items: center !important; /* 수직 중앙 정렬 */
        justify-content: center !important; /* 수평 중앙 정렬 */
    }
    
    .space-exterior-controls-inside .btn svg,
    .space-exterior-controls-inside .btn .btn__icon {
        width: var(--spacing-5) !important;
        height: var(--spacing-5) !important;
        display: block !important; /* 정렬 개선 */
        margin: 0 auto !important; /* 중앙 정렬 */
    }
    
    /* 모바일에서 오버레이 높이 축소 */
    .space-exterior-image::after {
        height: var(--spacing-30); /* 120px */
        background: linear-gradient(180deg, rgba(23, 20, 20, 0) 0%, rgba(23, 20, 20, 0.5) 100%);
    }
    
    
}

/* 481px ~ 768px 구간에서 텍스트 크기 조정은 제거 (heading-h2의 반응형 크기 유지) */

/* ============================================
   B1층 브랜드 카드 스타일
   ============================================ */

/* B1층 요약 섹션 */
.floor-b1-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-15); /* 디자인 상 headline과 카드 시작 사이 60px */
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.6s forwards; /* 레이아웃과 거의 동시에 */
}

/* B1층 브랜드 카드 리스트 */
.floor-b1-shops {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-20); /* 디자인 상 카드 사이 80px */
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 3.72s forwards; /* 요약 직후 */
}

/* 브랜드 카드 */
.floor-b1-shop {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    height: 100%; /* 그리드 내에서 모든 카드가 동일한 높이 */
}

.floor-b1-shop:nth-of-type(1) {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 4.4s forwards; /* 첫 번째 카드 */
}

.floor-b1-shop:nth-of-type(2) {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 4.6s forwards; /* 두 번째 카드 */
}

.floor-b1-shop:nth-of-type(3) {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 4.8s forwards; /* 세 번째 카드 */
}

.floor-b1-shop:nth-of-type(4) {
    opacity: 0;
    transform: translateY(var(--spacing-5)); /* 20px */
    animation: fadeInUp 0.8s ease-out 5.0s forwards; /* 네 번째 카드 */
}

/* 브랜드 이미지 */
.floor-b1-shop__image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* aspect-video */
    overflow: hidden;
    border-radius: var(--border-radius-md);
}

.floor-b1-shop__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* 브랜드 콘텐츠 */
.floor-b1-shop__content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
    min-height: 0; /* flexbox가 grid 내에서 제대로 동작하도록 */
}

/* 브랜드 로고 행 (로고 + 태그 함께) */
.floor-b1-shop__logo-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-5); /* 20px - Figma 디자인: pt-[20px] */
    gap: var(--spacing-md);
}

/* 브랜드 로고 */
.floor-b1-shop__logo-img {
    /* 높이 토큰 기반으로 약간 축소 적용 */
    height: auto;
    max-height: var(--brand-logo-height, calc(var(--spacing-20) * 0.65));
    object-fit: contain;
}

/* 브랜드 정보 */
.floor-b1-shop__info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* 브랜드 소개 */
.floor-b1-shop__intro {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* 브랜드 정보 텍스트 (줄 사이 간격 없음) */
.floor-b1-shop__info-text {
    display: flex;
    flex-direction: column;
    gap: 0; /* 정보 줄 사이 간격 제거 */
}

/* =============================
   Past Popups: 애니메이션 비활성화로 즉시 렌더
   ============================= */
body.past-popups-page .floor-b1-shops,
body.past-popups-page .floor-b1-shop,
body.past-popups-page .floor-b1-shop * {
  animation: none !important;
  transition: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Past Popups: 카드 이미지 비율 고정 */
body.past-popups-page .floor-b1-shop__image {
  aspect-ratio: 16 / 10;
}
body.past-popups-page .floor-b1-shop__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* 지난 팝업 스토어 페이지: 모바일에서 타이틀 한 줄 표시 */
@media (max-width: 768px) {
  body.past-popups-page .list-page-header h1 {
    white-space: nowrap; /* 한 줄로 강제 표시 */
    font-size: clamp(2.625rem, calc(2.625rem + 32 * (100vw - 22.5rem) / 67.5), 5rem); /* 모바일 42px → 데스크탑 80px (기존 48px에서 약 12.5% 감소) */
  }
}

/* =============================
   Navbar 강제 불투명 (히어로 아님)
   ============================= */
/* (삭제) 네비 강제 오버라이드: 기본 헤더 로직을 따름 */
/* 헤더는 공통 로직(header.php의 has_hero)만 따름 */

.floor-b1-shop__info-text p {
    margin: 0; /* p 태그 기본 margin 제거 */
}

/* 이메일 링크 스타일 */
.floor-b1-shop__email-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-decoration-color: var(--text-secondary);
    text-underline-offset: var(--spacing-0-5, 0.125rem);
    transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.floor-b1-shop__email-link:hover {
    color: var(--accent-primary);
    text-decoration-color: var(--accent-primary);
}

/* 브랜드 제목 */
.floor-b1-shop__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-md);
}

/* 팝업 태그 (로고 행에 배치) */
.floor-b1-shop__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1-5, 0.375rem) var(--spacing-2);
    background-color: var(--jungeum-yellow, #F2A32A);
    color: var(--basic-white, #FFFFFF);
    border-radius: 9999px;
    font-family: var(--font-family);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    font-weight: var(--font-weight-normal);
    letter-spacing: calc(var(--font-size-lg) * -0.02);
    white-space: nowrap;
    min-width: var(--spacing-16);
    height: var(--spacing-16);
    flex-shrink: 0; /* 로고가 줄어들지 않도록 */
}

/* 브랜드 링크 */
.floor-b1-shop__links {
    display: flex;
    gap: var(--spacing-xl);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 브랜드 버튼들 (올레프트 전용) */
.floor-b1-shop__buttons {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    flex-wrap: wrap;
}

/* 반응형: 1440px 이하 (태블릿 포함) */
@media (max-width: 1440px) {
    .floor-b1-shop__logo-img {
        max-height: calc(var(--spacing-16) * 0.6); /* 64px * 0.6 = 38.4px */
    }
    
    .floor-b1-shop__info {
        gap: var(--spacing-lg); /* 24px로 축소 */
    }
    
    .floor-b1-shop__links {
        flex-direction: column; /* 세로 배치 */
        gap: 0; /* 간격 없음 */
    }
    
    .floor-b1-shop__links .btn {
        white-space: normal; /* 긴 URL 줄바꿈 허용 */
        padding: 0; /* 세로 배치 시 상하 패딩 제거 */
    }
}

/* 반응형: 모바일 */
@media (max-width: var(--bp-md)) {
    .floor-b1-summary {
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-4xl);
    }
    
    .floor-b1-shops {
        gap: var(--spacing-4xl);
    }
    
    .floor-b1-shop {
        gap: var(--spacing-md);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .floor-b1-shop__content {
        gap: var(--spacing-lg);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .floor-b1-shop__info {
        gap: var(--spacing-md); /* 모바일에서 16px로 축소 */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .floor-b1-shop__intro {
        gap: var(--spacing-sm);
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    .floor-b1-shop__title {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .floor-b1-shop__logo-row {
        flex-wrap: wrap;
    }
    
    .floor-b1-shop__buttons {
        flex-direction: column;
        width: calc(100% + var(--spacing-5) * 2) !important; /* 컨테이너 패딩만큼 확장 (20px * 2) */
        min-width: calc(100% + var(--spacing-5) * 2) !important;
        max-width: calc(100% + var(--spacing-5) * 2) !important;
        margin-left: calc(var(--spacing-5) * -1) !important; /* 음수 마진으로 컨테이너 패딩 무시 */
        margin-right: calc(var(--spacing-5) * -1) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        gap: var(--spacing-sm); /* 버튼 간 간격 조정 */
        flex-shrink: 0 !important;
    }
    
    .floor-b1-shop__buttons .btn,
    .floor-b1-shop__buttons .btn.btn--primary,
    .floor-b1-shop__buttons .btn.btn--secondary,
    .floor-b1-shop__buttons a.btn,
    .floor-b1-shop__buttons a.btn.btn--primary,
    .floor-b1-shop__buttons a.btn.btn--secondary {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important; /* inline-flex 대신 flex 사용 */
        flex-shrink: 0 !important; /* 축소 방지 */
        flex-grow: 0 !important; /* flex-grow 제거 (width로 제어) */
        margin: 0 !important;
        padding-left: var(--spacing-16) !important; /* 좌우 패딩은 버튼 컴포넌트 기본값 유지 */
        padding-right: var(--spacing-16) !important;
        justify-content: center !important; /* 중앙 정렬 */
        align-items: center !important;
        white-space: normal !important; /* nowrap 제거 */
    }
}