/* ─── 기본 리셋 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Warm Editorial Palette */
    --cream-50:  #FDFBF7;
    --cream-100: #FAF7F0;
    --cream-200: #F5EFE3;
    --warm-400:  #C4A472;
    --warm-500:  #B08D5B;
    --warm-600:  #9A7A4A;
    --warm-900:  #1A1410;

    /* Semantic aliases (기존 코드 호환) */
    --color-charcoal:   #1A1410;
    --color-charcoal-2: #2C2218;
    --color-trust-blue: #9A7A4A;   /* warm-600으로 매핑 */
    --color-accent:     #C4A472;   /* warm-400으로 매핑 */
    --color-white:      #ffffff;
    --color-gray-50:    #FDFBF7;
    --color-gray-100:   #FAF7F0;
    --color-gray-300:   #E8DDD0;
    --color-gray-400:   #C0AE99;
    --color-gray-500:   #8A7868;
    --color-success:    #6B9E78;
    --color-error:      #C0524A;
    --color-warning:    #C49A3A;

    --font-base: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    --radius:    10px;
    --shadow:    0 4px 24px rgba(26,20,16,0.08);
    --shadow-sm: 0 2px 8px rgba(26,20,16,0.05);
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-base);
    background: var(--cream-50);
    color: var(--warm-900);
    line-height: 1.6;
    padding-top: 80px; /* nav 높이 보정 */
}

/* ─── 공통 컨테이너 ─────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ─── 버튼 ──────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 24px; border-radius: 50px;
    font-weight: 600; text-decoration: none; cursor: pointer;
    border: 1.5px solid transparent;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    font-size: 15px; font-family: var(--font-base);
}
.btn:hover  { transform: scale(1.02); }
.btn:active { transform: scale(0.98); }

.btn-primary  { background: var(--warm-900); color: #fff; border-color: var(--warm-900); }
.btn-primary:hover { background: var(--warm-600); border-color: var(--warm-600); }
.btn-outline  { background: transparent; border-color: var(--warm-900)/20; color: var(--warm-900); border-color: rgba(26,20,16,0.2); }
.btn-outline:hover { background: var(--warm-900); color: #fff; border-color: var(--warm-900); }
.btn-lg       { padding: 14px 36px; font-size: 17px; }
.btn-sm       { padding: 7px 18px; font-size: 13px; }
.btn-xs       { padding: 4px 12px; font-size: 12px; }
.btn-full     { width: 100%; }
.btn-danger   { background: var(--color-error); color: #fff; border-color: var(--color-error); }
.btn-danger:hover { opacity: 0.85; }

/* ─── 알림 ──────────────────────────────────────────────── */
.alert {
    padding: 12px 18px; border-radius: var(--radius);
    margin-bottom: 16px; font-size: 14px; font-weight: 500;
}
.alert-error   { background: #FEF2F0; color: var(--color-error); border: 1px solid rgba(192,82,74,0.15); }
.alert-success { background: #F0F7F2; color: var(--color-success); border: 1px solid rgba(107,158,120,0.15); }
.alert-warning { background: #FBF6ED; color: var(--color-warning); border: 1px solid rgba(196,154,58,0.15); }

/* ─── 플래시 메시지 위치 보정 ───────────────────────────── */
.flash-container { max-width: 1200px; margin: 0 auto; padding: 16px 24px 0; }

/* ─── 사이트 메인 ────────────────────────────────────────── */
.site-main { min-height: calc(100vh - 80px); }

/* ─── 헤더 (레거시 — partials/header.php가 대체) ──────────── */
.site-header { display: none; }

/* ─── 유틸리티 ──────────────────────────────────────────── */
.py-48     { padding-top: 48px; padding-bottom: 48px; }
.mt-24     { margin-top: 24px; }

.page-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px; margin-bottom: 32px;
}
.page-title    { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: var(--warm-900); }
.page-subtitle { color: var(--color-gray-500); margin-top: 4px; font-size: 15px; }

.breadcrumb { font-size: 13px; color: var(--color-gray-400); margin-bottom: 20px; }
.breadcrumb a { color: var(--warm-600); text-decoration: none; }
.breadcrumb a:hover { color: var(--warm-900); }

.empty-state { text-align: center; padding: 64px 0; color: var(--color-gray-500); }
.empty-state .btn { margin-top: 20px; }

/* ─── 인증 페이지 ────────────────────────────────────────── */
.auth-page {
    background: var(--cream-100); min-height: 100vh; padding-top: 0 !important;
    display: flex; align-items: center; justify-content: center;
}
.auth-container { width: 100%; max-width: 440px; padding: 24px; }
.auth-card {
    background: #fff; border-radius: 24px; padding: 44px;
    box-shadow: 0 8px 40px rgba(26,20,16,0.08);
    border: 1px solid rgba(196,164,114,0.12);
}
.auth-logo { position: relative; text-align: center; margin-bottom: 10px; }
.auth-logo a:first-child {
    font-size: 22px; font-weight: 800; color: var(--warm-900);
    text-decoration: none; font-family: 'Outfit', var(--font-base);
    letter-spacing: -0.5px;
}
.auth-close {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-size: 18px; color: var(--color-gray-400); text-decoration: none;
    line-height: 1; padding: 4px;
    width: 32px; height: 32px; border-radius: 50%; background: var(--cream-100);
    display: flex; align-items: center; justify-content: center;
}
.auth-close:hover { background: var(--cream-200); color: var(--warm-900); }
.auth-title { text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 28px; color: var(--warm-900); }

.auth-form .form-group { margin-bottom: 18px; }
.auth-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--warm-900); }
.auth-form input {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius); font-size: 15px; outline: none;
    transition: border-color 0.3s; background: #fff; color: var(--warm-900);
    font-family: var(--font-base);
}
.auth-form input:focus { border-color: var(--warm-400); }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--color-gray-500); }
.auth-footer a { color: var(--warm-600); font-weight: 600; text-decoration: none; }

/* ─── 소셜 로그인 ────────────────────────────────────────── */
.social-login { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.btn-social {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: opacity 0.2s; cursor: pointer; border: none;
    font-family: var(--font-base);
}
.btn-social:hover { opacity: 0.88; }
.btn-kakao  { background: #FEE500; color: #191919; }
.btn-naver  { background: #03C75A; color: #fff; }
.btn-google { background: #fff; color: #3c4043; border: 1.5px solid var(--color-gray-300); }
.naver-n    { font-size: 16px; font-weight: 900; line-height: 1; }

.divider { display: flex; align-items: center; margin: 8px 0 16px; color: var(--color-gray-400); font-size: 13px; }
.divider::before, .divider::after { content: ''; flex: 1; border-top: 1px solid var(--color-gray-300); }
.divider span { padding: 0 12px; white-space: nowrap; }

.form-options { display: flex; gap: 20px; margin-bottom: 8px; }
.checkbox-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--color-gray-500); cursor: pointer; user-select: none; }
.checkbox-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--warm-900); cursor: pointer; }

/* ─── 약관 ──────────────────────────────────────────────── */
.terms-wrap { margin-bottom: 20px; border: 1.5px solid var(--color-gray-300); border-radius: var(--radius); overflow: hidden; }
.terms-all { padding: 14px 16px; background: var(--cream-100); border-bottom: 1px solid var(--color-gray-300); }
.terms-item { border-bottom: 1px solid var(--color-gray-300); }
.terms-item:last-child { border-bottom: none; }
.terms-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.terms-check-label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.terms-check-bold  { font-weight: 700; color: var(--warm-900); }
.terms-toggle { background: none; border: 1px solid var(--color-gray-300); border-radius: 20px; font-size: 12px; padding: 3px 10px; cursor: pointer; color: var(--color-gray-500); }
.terms-toggle:hover { background: var(--cream-100); }
.terms-body { display: none; padding: 12px 16px; font-size: 13px; color: var(--color-gray-500); line-height: 1.8; background: var(--cream-50); border-top: 1px solid var(--color-gray-300); max-height: 200px; overflow-y: auto; }
.terms-body.open { display: block; }
.terms-body h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--warm-900); }
.terms-body p { margin-bottom: 10px; }
.terms-date { color: var(--color-gray-400); font-size: 12px; margin-top: 12px; }

/* ─── 필터 바 ────────────────────────────────────────────── */
.filter-bar { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
.filter-bar select {
    padding: 9px 14px; border: 1.5px solid var(--color-gray-300);
    border-radius: 50px; font-size: 14px; background: #fff; cursor: pointer;
    color: var(--warm-900); font-family: var(--font-base);
}
.filter-bar select:focus { outline: none; border-color: var(--warm-400); }

/* ─── 대시보드 카드 ──────────────────────────────────────── */
.dashboard-card {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(196,164,114,0.1);
}
.card-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; color: var(--warm-900); }
.card-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.card-header-row .card-title { margin-bottom: 0; }

/* ─── 섹션 타이틀 ────────────────────────────────────────── */
.section-title { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: var(--warm-900); }

/* ─── KPI 그리드 ─────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.kpi-card.kpi-highlight { border: 2px solid var(--warm-400); }
.kpi-label  { display: block; font-size: 12px; color: var(--color-gray-500); font-weight: 600; margin-bottom: 8px; letter-spacing: 0.05em; }
.kpi-value  { display: block; font-size: 26px; font-weight: 800; color: var(--warm-900); margin-bottom: 4px; }
.kpi-profit { color: var(--warm-600); }
.kpi-sub    { font-size: 12px; color: var(--color-gray-500); }
.kpi-bar-wrap { height: 4px; background: var(--cream-200); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.kpi-bar      { height: 100%; background: var(--warm-400); border-radius: 2px; transition: width 0.6s; }

.dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; }
.ym-selector input { padding: 9px 14px; border: 1.5px solid var(--color-gray-300); border-radius: 50px; font-size: 14px; font-family: var(--font-base); }
.dashboard-body { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }

/* ─── 차트 ──────────────────────────────────────────────── */
.revenue-chart { display: flex; align-items: flex-end; gap: 12px; height: 160px; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.chart-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; }
.chart-bar { width: 100%; background: var(--warm-400); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; transition: height 0.4s; cursor: pointer; }
.chart-bar:hover { background: var(--warm-600); }
.chart-bar:hover .chart-tooltip { display: block; }
.chart-tooltip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--warm-900); color: #fff; font-size: 11px; padding: 4px 8px; border-radius: 6px; white-space: nowrap; margin-bottom: 4px; }
.chart-label { font-size: 12px; color: var(--color-gray-500); }

/* ─── 만료 목록 ──────────────────────────────────────────── */
.expiry-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cream-200); font-size: 14px; }
.expiry-item:last-child { border-bottom: none; }
.expiry-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.expiry-urgent  .expiry-badge { background: rgba(192,82,74,0.1); color: var(--color-error); }
.expiry-warning .expiry-badge { background: rgba(196,154,58,0.1); color: var(--color-warning); }
.expiry-date { margin-left: auto; color: var(--color-gray-500); font-size: 13px; }

.room-status-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.room-status-item { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.room-status-item strong { font-size: 14px; }
.room-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.room-status-item-available   { background: rgba(107,158,120,0.1); color: var(--color-success); }
.room-status-item-available .room-status-dot { background: var(--color-success); }
.room-status-item-occupied    { background: rgba(192,82,74,0.1); color: var(--color-error); }
.room-status-item-occupied .room-status-dot  { background: var(--color-error); }
.room-status-item-maintenance { background: rgba(196,154,58,0.1); color: var(--color-warning); }
.room-status-item-maintenance .room-status-dot { background: var(--color-warning); }

/* ─── 데이터 테이블 ──────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th { text-align: left; padding: 10px 12px; background: var(--cream-100); font-weight: 600; font-size: 13px; color: var(--color-gray-500); border-bottom: 1px solid var(--cream-200); }
.data-table td { padding: 12px 12px; border-bottom: 1px solid var(--cream-200); color: var(--warm-900); }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--cream-50); }
.td-empty { text-align: center; color: var(--color-gray-500); padding: 32px; }
.row-pinned td { background: rgba(196,164,114,0.04); }

/* ─── 호실 그리드 ────────────────────────────────────────── */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.room-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
    display: flex; flex-direction: column;
}
.room-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.room-card-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px 0; }
.room-card-body   { padding: 12px 16px; flex: 1; }
.room-card-footer { padding: 12px 16px; display: flex; gap: 8px; border-top: 1px solid var(--cream-200); }
.room-number  { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--warm-900); }
.room-address { font-size: 13px; color: var(--color-gray-500); margin-bottom: 6px; }
.room-price   { font-size: 15px; color: var(--warm-900); margin-top: 8px; }
.room-price strong { font-size: 18px; color: var(--warm-600); font-weight: 800; }
.room-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.room-badge-standard      { background: rgba(196,164,114,0.12); color: var(--warm-600); }
.room-badge-creative_zone { background: rgba(107,158,120,0.12); color: var(--color-success); }
.room-status { font-size: 12px; font-weight: 600; }
.room-status-available { color: var(--color-success); }
.room-status-occupied  { color: var(--color-error); }
.room-status-maintenance { color: var(--color-warning); }

.room-spec-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.room-spec-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-gray-500); background: var(--cream-100); padding: 3px 10px; border-radius: 20px; }
.room-spec-tag-sound { background: rgba(196,164,114,0.1); color: var(--warm-600); }

.room-lighting-modes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.lighting-mode-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 10px; border-radius: 20px; background: var(--cream-100); color: var(--color-gray-500); }
.lighting-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.soundproof-bar-track { height: 6px; background: var(--cream-200); border-radius: 3px; overflow: hidden; }
.soundproof-bar-fill  { height: 100%; border-radius: 3px; }

.grade-badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 20px; color: #fff; }

/* ─── 호실 상세 ─────────────────────────────────────────── */
.room-detail { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
.room-detail-header h1 { font-size: 26px; font-weight: 800; margin: 8px 0 4px; }
.booking-panel { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow); border: 1px solid rgba(196,164,114,0.12); position: sticky; top: 100px; }
.booking-price { margin-bottom: 16px; }
.booking-price strong { font-size: 28px; font-weight: 800; color: var(--warm-600); }
.booking-price span   { font-size: 14px; color: var(--color-gray-500); margin-left: 4px; }
.booking-meta { margin-bottom: 20px; font-size: 14px; color: var(--color-gray-500); line-height: 1.8; }
.booking-note { text-align: center; font-size: 12px; color: var(--color-gray-500); margin-top: 12px; }
.soundproof-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.soundproof-bar-wrap { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.soundproof-bar-wrap > div { height: 8px; background: var(--warm-400); border-radius: 4px; }
.soundproof-desc { font-size: 13px; color: var(--color-gray-500); }
.lighting-modes { margin-top: 28px; }
.lighting-modes h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.lighting-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.lighting-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; border: 1.5px solid var(--color-gray-300); font-size: 14px; }

/* ─── 지점 상세 ─────────────────────────────────────────── */
.branch-detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.branch-detail-address { font-size: 14px; color: var(--color-gray-500); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.branch-detail-phone   { font-size: 14px; color: var(--color-gray-500); margin-top: 4px; display: flex; align-items: center; gap: 5px; }
.branch-stats { display: flex; gap: 20px; }
.branch-stat { text-align: center; padding: 16px 20px; background: var(--cream-100); border-radius: 12px; }
.branch-stat-val   { display: block; font-size: 28px; font-weight: 800; color: var(--warm-900); }
.branch-stat-label { display: block; font-size: 12px; color: var(--color-gray-500); margin-top: 2px; }

.branch-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
.branch-gallery-item img { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; }
.gallery-main { grid-column: span 2; }
.gallery-main img { height: 300px; }

.branch-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 32px; }
.branch-info-card { background: #fff; border-radius: 16px; padding: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.branch-info-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--warm-900); }

.hours-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.hours-row  { display: flex; justify-content: space-between; font-size: 14px; }
.hours-label { color: var(--color-gray-500); }
.hours-val   { font-weight: 600; color: var(--warm-900); }

.branch-section { margin-bottom: 36px; }
.branch-section-title { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--warm-900); padding-bottom: 12px; border-bottom: 1px solid var(--cream-200); }

.amenity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.amenity-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--cream-100); border-radius: 12px; text-align: center; }
.amenity-icon { color: var(--warm-500); }
.amenity-label { font-size: 13px; font-weight: 600; color: var(--warm-900); }

/* ─── 지점 목록 (지도) ───────────────────────────────────── */
.branch-map-main { padding-top: 0; }
.branch-map-page { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 80px); overflow: hidden; }
.branch-map-panel { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--cream-200); background: #fff; }
.branch-map-panel-head { padding: 24px; border-bottom: 1px solid var(--cream-200); flex-shrink: 0; }
.branch-map-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-400); margin-bottom: 4px; }
.branch-map-title { font-size: 22px; font-weight: 800; color: var(--warm-900); }

.branch-region-tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--cream-200); flex-shrink: 0; }
.branch-region-tab { padding: 5px 14px; border-radius: 50px; font-size: 13px; font-weight: 500; background: var(--cream-100); border: none; cursor: pointer; color: var(--color-gray-500); transition: all 0.3s; }
.branch-region-tab.active, .branch-region-tab:hover { background: var(--warm-900); color: #fff; }

.branch-map-search { padding: 12px 16px; border-bottom: 1px solid var(--cream-200); flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.branch-search-icon { color: var(--color-gray-400); flex-shrink: 0; }
.branch-search-input { flex: 1; border: none; outline: none; font-size: 14px; color: var(--warm-900); background: transparent; font-family: var(--font-base); }
.branch-search-input::placeholder { color: var(--color-gray-400); }

.branch-list-wrap { flex: 1; overflow-y: auto; }
.branch-list-empty { padding: 32px; text-align: center; color: var(--color-gray-400); font-size: 14px; }
.branch-list-item {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    border-bottom: 1px solid var(--cream-100); cursor: pointer;
    transition: background 0.2s; position: relative;
}
.branch-list-item:hover { background: var(--cream-50); }
.branch-list-thumb { width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; background: var(--cream-200); }
.branch-list-thumb img { width: 100%; height: 100%; object-fit: cover; }
.branch-list-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--warm-400); }
.branch-list-info { flex: 1; min-width: 0; }
.branch-list-name    { font-size: 15px; font-weight: 700; color: var(--warm-900); display: block; margin-bottom: 2px; }
.branch-list-address { font-size: 13px; color: var(--color-gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.branch-list-phone   { font-size: 13px; color: var(--color-gray-400); margin: 0; }
.branch-avail-badge  { position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.avail-open { background: rgba(107,158,120,0.1); color: var(--color-success); }
.avail-full { background: var(--cream-200); color: var(--color-gray-400); }

.branch-map-area { position: relative; background: var(--cream-100); }
.branch-map-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--color-gray-400); }

.map-infobox { padding: 12px 14px; font-family: var(--font-base); min-width: 160px; }
.map-infobox strong { font-size: 14px; font-weight: 700; display: block; margin-bottom: 4px; color: var(--warm-900); }
.map-infobox p { font-size: 12px; color: var(--color-gray-500); margin: 2px 0; }
.map-infobox-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--warm-600); text-decoration: none; }

/* ─── 게시판 ─────────────────────────────────────────────── */
.board-tab-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.board-tab-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px;
    border-radius: 50px; font-size: 14px; font-weight: 500;
    color: var(--color-gray-500); background: var(--cream-100);
    text-decoration: none; transition: all 0.3s;
    border: 1.5px solid transparent;
}
.board-tab-btn:hover { color: var(--warm-900); background: var(--cream-200); }
.board-tab-btn.active { background: var(--warm-900); color: #fff; border-color: var(--warm-900); }

.post-link { color: var(--warm-900); text-decoration: none; font-weight: 500; }
.post-link:hover { color: var(--warm-600); }

.board-empty { text-align: center; padding: 60px; color: var(--color-gray-400); }
.board-empty p { margin-top: 12px; font-size: 15px; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gallery-card { border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; box-shadow: var(--shadow-sm); background: #fff; }
.gallery-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.gallery-thumb { height: 180px; background-size: cover; background-position: center; background-color: var(--cream-200); }
.gallery-thumb--empty { background-color: var(--cream-200); display: flex; align-items: center; justify-content: center; }
.gallery-info { padding: 12px 14px; }
.gallery-info strong { display: block; font-size: 14px; font-weight: 600; color: var(--warm-900); margin-bottom: 4px; }
.gallery-info span   { font-size: 12px; color: var(--color-gray-500); }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.video-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.video-card-thumb { position: relative; aspect-ratio: 16/9; background: var(--cream-200); overflow: hidden; }
.video-card-thumb-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.video-card:hover .video-card-thumb-img { transform: scale(1.05); }
.video-card-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(26,20,16,0.2); }
.video-card-play > div { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; }
.video-card-no-thumb { display: flex; align-items: center; justify-content: center; height: 100%; }
.video-card-body { padding: 14px 16px; }
.video-card-title { font-size: 15px; font-weight: 600; color: var(--warm-900); text-decoration: none; line-height: 1.4; display: block; margin-bottom: 6px; }
.video-card-title:hover { color: var(--warm-600); }
.video-card-meta { font-size: 12px; color: var(--color-gray-400); display: flex; align-items: center; gap: 6px; }
.badge-featured { background: rgba(196,164,114,0.15); color: var(--warm-600); font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.video-card-actions { display: flex; gap: 6px; margin-top: 10px; }

.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    text-decoration: none; font-size: 14px; font-weight: 500; color: var(--color-gray-500);
    background: #fff; border: 1.5px solid var(--cream-200);
    transition: all 0.3s;
}
.page-btn:hover { border-color: var(--warm-400); color: var(--warm-900); }
.page-btn.active { background: var(--warm-900); color: #fff; border-color: var(--warm-900); }

/* ─── 예약 폼 ────────────────────────────────────────────── */
.form-page { max-width: 600px; margin: 0 auto; }
.form-page-header { margin-bottom: 32px; }
.form-page-header h1 { font-size: 26px; font-weight: 800; }
.form-page-header p  { color: var(--color-gray-500); margin-top: 6px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--warm-900); }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: 12px 16px; border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius); font-size: 15px; outline: none;
    transition: border-color 0.3s; background: #fff; color: var(--warm-900);
    font-family: var(--font-base);
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { border-color: var(--warm-400); }
.form-note { text-align: center; font-size: 12px; color: var(--color-gray-500); margin-top: 10px; }
.field-hint { font-size: 12px; color: var(--color-gray-500); margin-top: 4px; }
.selected-room-summary {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--cream-100); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 24px; font-size: 14px;
    border: 1px solid rgba(196,164,114,0.15);
}
.selected-room-summary a { color: var(--warm-600); font-size: 13px; }
.payment-methods { display: flex; gap: 12px; flex-wrap: wrap; }
.payment-method-item {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 16px; border: 1.5px solid var(--color-gray-300); border-radius: var(--radius); font-size: 14px; transition: border-color 0.3s;
}
.payment-method-item:has(input:checked) { border-color: var(--warm-400); background: rgba(196,164,114,0.06); }
.price-preview {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(196,164,114,0.06); border: 1px solid rgba(196,164,114,0.2);
    border-radius: var(--radius); padding: 14px 16px; margin-bottom: 20px; font-size: 15px;
}
.price-preview strong { font-size: 18px; color: var(--warm-600); font-weight: 700; }

/* ─── 예약 목록 ─────────────────────────────────────────── */
.reservation-list { display: flex; flex-direction: column; gap: 16px; }
.reservation-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.reservation-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--cream-200); }
.reservation-card-header strong { font-size: 16px; font-weight: 700; }
.reservation-card-header .res-type { font-size: 12px; color: var(--color-gray-500); margin-left: 8px; }
.reservation-card-body { padding: 12px 20px; font-size: 14px; color: var(--color-gray-500); line-height: 1.8; }
.reservation-card-footer { padding: 12px 20px; display: flex; gap: 8px; border-top: 1px solid var(--cream-200); }
.status-badge { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.status-pending   { background: rgba(196,154,58,0.1);  color: var(--color-warning); }
.status-confirmed { background: rgba(107,158,120,0.1); color: var(--color-success); }
.status-cancelled { background: rgba(192,82,74,0.1);   color: var(--color-error); }
.status-completed { background: rgba(196,164,114,0.1); color: var(--warm-600); }

/* ─── 결제 ──────────────────────────────────────────────── */
.payment-summary { background: #fff; border-radius: 16px; padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.payment-summary h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.summary-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.summary-table th { text-align: left; padding: 10px 0; color: var(--color-gray-500); width: 120px; font-weight: 500; border-bottom: 1px solid var(--cream-200); }
.summary-table td { padding: 10px 0; border-bottom: 1px solid var(--cream-200); }
.summary-table .total-row th, .summary-table .total-row td { font-size: 16px; border-bottom: none; padding-top: 16px; }

/* ─── 전자계약서 ─────────────────────────────────────────── */
.contract-wrap { max-width: 780px; margin: 0 auto; }
.contract-doc { background: #fff; border-radius: 16px; padding: 48px; box-shadow: var(--shadow); margin-bottom: 24px; border: 1px solid rgba(196,164,114,0.1); }
.contract-header { text-align: center; margin-bottom: 36px; border-bottom: 2px solid var(--warm-900); padding-bottom: 20px; }
.contract-header h1 { font-size: 24px; font-weight: 800; }
.contract-id { font-size: 13px; color: var(--color-gray-500); margin-top: 6px; }
.contract-section { margin-bottom: 28px; }
.contract-section h2 { font-size: 15px; font-weight: 700; margin-bottom: 12px; color: var(--warm-600); }
.contract-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.contract-table th { text-align: left; padding: 9px 12px; background: var(--cream-100); width: 130px; font-weight: 600; border: 1px solid var(--cream-200); }
.contract-table td { padding: 9px 12px; border: 1px solid var(--cream-200); }
.contract-terms { padding-left: 20px; font-size: 14px; line-height: 2; }
.contract-signature { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; border-top: 1px solid var(--cream-200); padding-top: 24px; }
.signature-block { font-size: 14px; line-height: 2; }
.signature-block .signed    { color: var(--color-success); font-weight: 700; }
.signature-block .signed-at { color: var(--color-gray-500); font-size: 12px; }
.contract-actions { display: flex; gap: 12px; justify-content: center; }
@media print { nav, .contract-actions { display: none; } .contract-doc { box-shadow: none; padding: 0; } }

/* ─── A/S 센터 ────────────────────────────────────────────── */
.as-status-bar { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.as-count-item { padding: 8px 16px; border-radius: 50px; font-size: 14px; text-decoration: none; color: var(--color-gray-500); background: var(--cream-100); transition: all 0.3s; border: none; cursor: pointer; }
.as-count-item.active, .as-count-item:hover { background: var(--warm-900); color: #fff; }
.as-count-item strong { margin-left: 6px; }
.as-layout { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.as-list { display: flex; flex-direction: column; gap: 10px; }
.as-card { background: #fff; border-radius: 12px; padding: 16px; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.3s; border: 1.5px solid transparent; }
.as-card:hover, .as-card-selected { border-color: var(--warm-400); }
.as-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.as-title    { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--warm-900); }
.as-reporter { font-size: 13px; color: var(--color-gray-500); }
.as-date     { font-size: 12px; color: var(--color-gray-400); }
.as-badge    { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.as-badge-pending     { background: rgba(196,154,58,0.1);  color: var(--color-warning); }
.as-badge-in_progress { background: rgba(196,164,114,0.1); color: var(--warm-600); }
.as-badge-resolved    { background: rgba(107,158,120,0.1); color: var(--color-success); }
.as-detail-panel { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); min-height: 300px; position: sticky; top: 100px; border: 1px solid rgba(196,164,114,0.1); }
.as-detail-empty { color: var(--color-gray-500); font-size: 14px; text-align: center; padding: 48px 0; }
.as-detail-content h2 { font-size: 20px; font-weight: 700; margin: 8px 0; }
.as-detail-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.as-desc  { font-size: 14px; line-height: 1.8; color: var(--warm-900); margin: 12px 0; }
.as-photo { width: 100%; border-radius: 10px; margin-top: 12px; }
.as-actions { display: flex; gap: 8px; margin-top: 16px; }

/* ─── 비품 스토어 ────────────────────────────────────────── */
.store-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.store-tab { padding: 8px 18px; border: 1.5px solid var(--color-gray-300); border-radius: 50px; background: #fff; font-size: 14px; cursor: pointer; transition: all 0.3s; color: var(--color-gray-500); font-family: var(--font-base); }
.store-tab.active, .store-tab:hover { background: var(--warm-900); color: #fff; border-color: var(--warm-900); }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.store-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; border: 1px solid rgba(196,164,114,0.1); }
.store-card-body { padding: 18px; flex: 1; }
.store-card-footer { padding: 12px 18px; border-top: 1px solid var(--cream-200); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.store-product-name { font-size: 15px; font-weight: 700; margin: 8px 0 6px; color: var(--warm-900); }
.store-product-desc { font-size: 13px; color: var(--color-gray-500); margin-bottom: 10px; line-height: 1.6; }
.store-price-row { display: flex; align-items: baseline; gap: 4px; }
.store-price { font-size: 18px; font-weight: 800; color: var(--warm-600); }
.store-unit  { font-size: 13px; color: var(--color-gray-500); }
.store-category-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; }
.store-cat-soundproof { background: rgba(196,164,114,0.12); color: var(--warm-600); }
.store-cat-lighting   { background: rgba(107,158,120,0.12); color: var(--color-success); }
.store-cat-consumable { background: rgba(196,154,58,0.12);  color: var(--color-warning); }
.store-cat-appliance  { background: rgba(192,82,74,0.12);   color: var(--color-error); }
.store-qty-wrap { display: flex; align-items: center; gap: 6px; }
.qty-btn   { width: 28px; height: 28px; border: 1.5px solid var(--color-gray-300); border-radius: 8px; background: #fff; cursor: pointer; font-size: 16px; line-height: 1; transition: all 0.2s; }
.qty-btn:hover { border-color: var(--warm-400); }
.qty-input { width: 44px; text-align: center; border: 1.5px solid var(--color-gray-300); border-radius: 8px; padding: 4px; font-size: 14px; font-family: var(--font-base); }
.cart-float { position: fixed; bottom: 80px; right: 24px; width: 300px; background: #fff; border-radius: 16px; box-shadow: var(--shadow); z-index: 200; overflow: hidden; border: 1px solid rgba(196,164,114,0.15); }
.cart-float-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--warm-900); color: #fff; font-size: 14px; font-weight: 700; }
.cart-float-header button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
.cart-items { max-height: 200px; overflow-y: auto; padding: 8px 16px; }
.cart-item  { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--cream-200); }
.cart-float-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--cream-200); font-size: 14px; }

/* ─── 모달 ──────────────────────────────────────────────── */
.fab-btn { position: fixed; bottom: 24px; right: 24px; background: var(--warm-900); color: #fff; border: none; padding: 14px 22px; border-radius: 50px; font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); z-index: 100; font-family: var(--font-base); }
.modal-overlay { position: fixed; inset: 0; background: rgba(26,20,16,0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 300; }
.modal { background: #fff; border-radius: 20px; padding: 32px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; border: 1px solid rgba(196,164,114,0.15); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.modal-header h2 { font-size: 20px; font-weight: 700; }
.modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--color-gray-400); line-height: 1; }
.modal-close:hover { color: var(--warm-900); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* ─── 가맹 랜딩 ─────────────────────────────────────────── */
.franchise-hero { background: var(--warm-900); color: #fff; padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.franchise-tag  { display: inline-block; background: rgba(196,164,114,0.2); color: var(--warm-400); font-size: 12px; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.1em; border: 1px solid rgba(196,164,114,0.3); }
.franchise-hero h1 { font-size: 48px; font-weight: 800; margin-bottom: 16px; line-height: 1.25; }
.franchise-hero p  { font-size: 18px; color: rgba(255,255,255,0.7); margin-bottom: 36px; line-height: 1.8; }
.franchise-stats { background: var(--warm-900); padding: 48px 0; border-top: 1px solid rgba(196,164,114,0.15); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-item strong { display: block; font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.stat-item span   { font-size: 14px; color: rgba(255,255,255,0.5); }
.franchise-section { padding: 80px 0; }
.franchise-section.bg-light { background: var(--cream-100); }
.franchise-section.bg-dark  { background: var(--warm-900); }
.section-header { text-align: center; margin-bottom: 48px; }
.section-header h2 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.section-header p  { color: var(--color-gray-500); font-size: 16px; }
.section-header.light h2 { color: #fff; }
.section-header.light p  { color: rgba(255,255,255,0.5); }

.revenue-model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.revenue-step { background: #fff; border-radius: 16px; padding: 32px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(196,164,114,0.1); color: var(--warm-600); font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.revenue-step h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--warm-900); }
.revenue-step p  { font-size: 14px; color: var(--color-gray-500); line-height: 1.8; }

.simulator { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; background: #fff; border-radius: 20px; padding: 40px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.sim-inputs .form-group { margin-bottom: 20px; }
.sim-inputs label { font-size: 14px; font-weight: 600; }
.sim-inputs input[type=range] { width: 100%; accent-color: var(--warm-400); margin: 8px 0 4px; }
.sim-value { font-size: 13px; color: var(--warm-600); font-weight: 700; }
.sim-result { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.sim-result-item { display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cream-200); font-size: 15px; }
.sim-result-item strong { font-size: 18px; color: var(--warm-900); font-weight: 700; }
.sim-result-item.sim-net { border-bottom: none; }
.sim-result-item.sim-net strong { font-size: 26px; color: var(--warm-600); }

.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.case-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); }
.case-tag   { display: inline-block; background: var(--cream-100); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-bottom: 14px; color: var(--warm-600); }
.case-quote { font-size: 14px; line-height: 1.8; color: var(--warm-900); margin-bottom: 16px; font-style: italic; }
.case-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; font-weight: 600; color: var(--warm-600); }
.case-stats span { background: rgba(196,164,114,0.1); padding: 3px 10px; border-radius: 20px; }

.cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cost-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(196,164,114,0.2); border-radius: 16px; padding: 32px; color: #fff; position: relative; }
.cost-card-featured { background: rgba(196,164,114,0.1); border-color: rgba(196,164,114,0.4); }
.cost-popular { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--warm-400); color: var(--warm-900); font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; white-space: nowrap; }
.cost-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.cost-range   { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 20px; }
.cost-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cost-card li { font-size: 14px; color: rgba(255,255,255,0.7); padding-left: 20px; position: relative; }
.cost-card li::before { content: '✓'; position: absolute; left: 0; color: var(--warm-400); font-size: 12px; }

.inquiry-form { max-width: 640px; margin: 0 auto; }

/* ─── About 페이지 ──────────────────────────────────────── */
.about-content { line-height: 1.8; }
.about-hero { text-align: center; padding: 40px 0; margin-bottom: 32px; }
.about-headline { font-size: 28px; font-weight: 800; line-height: 1.4; color: var(--warm-900); word-break: keep-all; }
.about-section { margin-bottom: 32px; }
.about-section-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; margin-bottom: 14px; color: var(--warm-900); }
.about-icon { font-size: 20px; }
.about-section p { font-size: 15px; color: var(--color-gray-500); line-height: 1.9; }
.about-list { padding-left: 20px; margin-top: 8px; }
.about-list li { font-size: 14px; color: var(--color-gray-500); margin-bottom: 4px; line-height: 1.7; }
.about-divider { border: none; border-top: 1px solid var(--cream-200); margin: 28px 0; }
.about-advantage { display: flex; gap: 16px; margin-bottom: 20px; }
.about-advantage-num { width: 36px; height: 36px; border-radius: 50%; background: rgba(196,164,114,0.1); color: var(--warm-600); font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.about-advantage strong { display: block; font-size: 16px; font-weight: 700; color: var(--warm-900); margin-bottom: 8px; }
.about-target-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.about-target-item { padding: 18px; background: var(--cream-100); border-radius: 14px; border: 1px solid rgba(196,164,114,0.1); }
.about-target-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--warm-600); background: rgba(196,164,114,0.1); padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; }
.about-target-item p { font-size: 14px; color: var(--color-gray-500); line-height: 1.6; }
.about-faq-answer { background: var(--cream-100); border-radius: 14px; padding: 20px 24px; border: 1px solid rgba(196,164,114,0.1); }
.about-faq-answer strong { font-size: 16px; color: var(--warm-900); display: block; margin-bottom: 10px; }
.about-faq-answer p { font-size: 14px; color: var(--color-gray-500); line-height: 1.8; margin-bottom: 6px; }
.about-cta { text-align: center; padding: 32px 0 8px; }
.about-cta p { font-size: 15px; color: var(--color-gray-500); margin-bottom: 16px; }

/* ─── 알림 페이지 ────────────────────────────────────────── */
.notif-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--cream-200); }
.notif-item.unread { background: rgba(196,164,114,0.03); }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm-400); flex-shrink: 0; margin-top: 6px; }
.notif-body { flex: 1; font-size: 14px; color: var(--warm-900); line-height: 1.6; }
.notif-time { font-size: 12px; color: var(--color-gray-400); white-space: nowrap; margin-top: 2px; }

/* ─── 후기 ──────────────────────────────────────────────── */
.review-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.review-avg { display:flex; align-items:center; gap:12px; }
.review-avg-score { font-size:40px; font-weight:800; color:var(--warm-900); line-height:1; }
.review-write-form { border:1px solid rgba(196,164,114,0.15); border-radius:14px; padding:20px; margin-bottom:24px; background:var(--cream-50); }
.review-star-input { display:flex; align-items:center; gap:6px; margin-bottom:12px; font-size:28px; cursor:pointer; }
.review-star { color:var(--cream-200); cursor:pointer; transition:color 0.1s; user-select:none; }
.review-star:hover { color:#f59e0b; }
.review-star-hint { font-size:13px; color:var(--color-gray-500); margin-left:8px; }
.review-textarea { width:100%; border:1.5px solid var(--color-gray-300); border-radius:10px; padding:10px 12px; font-size:14px; resize:vertical; margin-bottom:12px; font-family:var(--font-base); }
.review-textarea:focus { outline:none; border-color:var(--warm-400); }
.review-my-notice { font-size:14px; color:var(--color-gray-500); margin-bottom:16px; padding:12px; background:var(--cream-100); border-radius:10px; }
.review-empty { color:var(--color-gray-500); font-size:14px; padding:24px 0; text-align:center; }
.review-list { display:flex; flex-direction:column; gap:0; }
.review-item { padding:18px 0; border-bottom:1px solid var(--cream-200); }
.review-item:last-child { border-bottom:none; }
.review-item-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.review-author { font-weight:700; font-size:14px; margin-right:8px; color:var(--warm-900); }
.review-stars { font-size:16px; margin-right:8px; }
.review-date { font-size:12px; color:var(--color-gray-500); }
.review-content { font-size:14px; color:var(--color-gray-500); line-height:1.6; margin:0; }
.btn-text-danger { background:none; border:none; color:var(--color-error); font-size:12px; cursor:pointer; padding:2px 6px; }
.btn-text-danger:hover { text-decoration:underline; }

/* ─── 예약 달력 ──────────────────────────────────────────── */
.view-toggle-btns { display:flex; gap:6px; }
.view-toggle { background:#fff; border:1.5px solid var(--color-gray-300); color:var(--color-gray-500); display:flex; align-items:center; gap:5px; }
.view-toggle.active { background:var(--warm-900); border-color:var(--warm-900); color:#fff; }
.res-cal-nav { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.res-cal-title { font-size:17px; font-weight:700; min-width:130px; text-align:center; }
.res-cal-days-header { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px; }
.res-cal-day-name { text-align:center; font-size:12px; font-weight:600; color:var(--color-gray-500); padding:6px 0; }
.res-cal-cells { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.res-cal-cell { min-height:80px; border:1px solid var(--cream-200); border-radius:8px; padding:4px; background:#fff; }
.res-cal-cell.empty { background:transparent; border-color:transparent; }
.res-cal-day-num { font-size:13px; color:var(--color-gray-500); display:block; margin-bottom:3px; }
.res-cal-event { font-size:10px; border-radius:4px; padding:2px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600; }
.res-cal-event.status-confirmed  { background:var(--color-success); }
.res-cal-event.status-pending    { background:var(--color-warning); }
.res-cal-event.status-cancelled  { background:var(--color-error); }
.res-cal-event.status-completed  { background:var(--color-gray-400); }
.res-cal-legend { display:flex; gap:16px; margin-top:12px; font-size:12px; color:var(--color-gray-500); justify-content:center; flex-wrap:wrap; }
.res-cal-dot { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; }
.res-cal-dot.status-confirmed { background:var(--color-success); }
.res-cal-dot.status-pending   { background:var(--color-warning); }
.res-cal-dot.status-cancelled { background:var(--color-error); }
.res-cal-dot.status-completed { background:var(--color-gray-400); }

/* ─── 재계약 ─────────────────────────────────────────────── */
.renew-prev-summary { background:rgba(196,164,114,0.06); border:1px solid rgba(196,164,114,0.2); border-radius:12px; padding:14px 16px; margin-bottom:20px; }
.renew-prev-label { font-size:11px; font-weight:700; color:var(--warm-600); letter-spacing:0.05em; margin-bottom:6px; text-transform:uppercase; }
.renew-prev-row { display:flex; justify-content:space-between; font-size:14px; gap:8px; flex-wrap:wrap; }

/* ─── 에러 페이지 ────────────────────────────────────────── */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cream-100); padding-top: 0 !important; }
.error-container { text-align: center; padding: 24px; }
.error-container h1 { font-size: 100px; font-weight: 900; color: var(--warm-900); line-height: 1; opacity: 0.08; }
.error-container p  { font-size: 18px; color: var(--color-gray-500); margin: 16px 0 32px; }

/* ─── 홈 히어로 (레거시 호환) ──────────────────────────── */
.hero { display: none; }
.features { padding: 80px 0; }
.feature-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid rgba(196,164,114,0.1); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.feature-card:hover { transform: translateY(-4px); }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(196,164,114,0.1); display: flex; align-items: center; justify-content: center; color: var(--warm-500); margin-bottom: 14px; }
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--warm-900); }
.feature-card p  { font-size: 14px; color: var(--color-gray-500); line-height: 1.7; margin-bottom: 12px; }
.feature-link { font-size: 13px; font-weight: 600; color: var(--warm-600); text-decoration: none; }
.feature-link:hover { color: var(--warm-900); }
.franchise-cta { display: none; }

/* ─── 가맹점 카드 슬라이더 (홈) ─────────────────────────── */
.branch-card-section { display: none; }
.home-info-section   { display: none; }

/* ─── 배너/팝업 ──────────────────────────────────────────── */
.site-banner { background: var(--warm-900); color: rgba(255,255,255,0.9); text-align: center; padding: 10px 16px; font-size: 13px; position: relative; z-index: 45; }
.site-banner a { color: var(--warm-400); font-weight: 600; text-decoration: none; margin-left: 8px; }
.site-banner-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,0.5); cursor: pointer; font-size: 16px; }

/* ─── 팝업 배너 ──────────────────────────────────────────── */
.popup-banner-overlay { position: fixed; inset: 0; background: rgba(26,20,16,0.6); backdrop-filter: blur(4px); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.popup-banner-box { background: #fff; border-radius: 20px; overflow: hidden; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgba(26,20,16,0.2); }
.popup-banner-img { width: 100%; display: block; }
.popup-banner-footer { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--cream-100); border-top: 1px solid var(--cream-200); }
.popup-banner-footer label { font-size: 13px; color: var(--color-gray-500); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.popup-banner-close { background: none; border: none; font-size: 13px; color: var(--color-gray-500); cursor: pointer; font-weight: 600; }
.popup-banner-close:hover { color: var(--warm-900); }

/* ─── 가맹문의 폼 섹션 ───────────────────────────────────── */
.franchise-cta-section { background: var(--warm-900); color: #fff; padding: 80px 0; text-align: center; }
.franchise-cta-section h2 { font-size: 32px; font-weight: 800; margin-bottom: 12px; }
.franchise-cta-section p { color: rgba(255,255,255,0.6); margin-bottom: 32px; font-size: 16px; }

/* ─── 반응형 ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    body { padding-top: 72px; }
    .container { padding: 0 16px; }
    .room-detail { grid-template-columns: 1fr; }
    .booking-panel { position: static; }
    .dashboard-body { grid-template-columns: 1fr; }
    .as-layout { grid-template-columns: 1fr; }
    .branch-map-page { grid-template-columns: 1fr; height: auto; }
    .branch-map-area { height: 50vh; }
    .simulator { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .revenue-model-grid, .case-grid, .cost-grid { grid-template-columns: 1fr; }
    .feature-grid-3 { grid-template-columns: 1fr; }
    .gallery-main { grid-column: span 1; }
    .gallery-main img { height: 200px; }
    .contract-signature { grid-template-columns: 1fr; }
}