@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none; /* iOS/Android 상하 들썩거림 바운스 억제 */
    touch-action: pan-y;
}

/* 스마트폰 브라우저 입력 상자 터치 시 강제 줌인 방지용 CSS */
input[type="text"],
input[type="search"],
input[type="email"],
textarea {
    font-size: 16px !important;
}

body {
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

:root {
    --bg-color: #FAF9F6;
    --text-main: #403024;
    --text-sub: #8B7A6C;
    --border-light: rgba(64, 48, 36, 0.12);

    /* 헤더 규격 토큰 */
    --app-header-height: 56px;
    --app-header-bg: #FAF8F5;
    --app-header-font-family: 'Playfair Display', 'Pretendard', serif;
    --app-header-title-size: 1.15rem;
    --app-header-title-weight: 800;
    --app-header-subtitle-size: 0.65rem;
    --app-header-subtitle-color: #7A6C60;
    --app-header-text-color: #2B1810;
    --app-header-border-color: #ECE7E1;

    /* 5대 핵심 메뉴별 고유 아이덴티티 컬러 정의 (Warm Cream & Deep Sepia 계열로 일원화) */
    --color-inspire: #403024;
    --color-search: #8B7A6C; 
    --color-lounge: #8B5E3C;
    --color-radar: #704214;
    --color-showcase: #5C4033;

    /* 기본 브랜드 액센트 컬러 */
    --color-accent: #403024;
    
    /* 등록 허브 고유 테마 변수 */
    --main-sepia: #3E362E;
    --sub-text: #A09C99;
    --amber-accent: #C68642;
    --card-bg: #F2EFEA;

    /* Safe Area Inset Tokens (WebView Hybrid 대응) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);

    /* Layout Fixed Dimensions */
    --nav-height: 64px;
    --header-content-padding: 12px;

    /* 글로벌 헤더 디자인 토큰 (전 메뉴 공용) */
    --app-header-bg: var(--bg-color);
    --app-header-font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    --app-header-title-size: 1.05rem;
    --app-header-title-weight: 800;
    --app-header-subtitle-size: 0.62rem;
    --app-header-subtitle-weight: 400;
    --app-header-text-color: var(--text-main);
    --app-header-subtitle-color: var(--text-sub);
    --app-header-border-color: rgba(224, 221, 217, 0.3);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* 이미지 및 탭, 버튼 등 UI 요소 롱 프레스 시 시스템 복사 팝업 및 드래그 드롭 억제 (앱 스타일) */
img, button, .control-item, .control-btn, .segmented-control, .sticky-tabs, .global-navigation, .btn-back {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

body {
    background-color: #FAF9F6; /* Warm Cream Beige */
    font-family: 'Pretendard', sans-serif;
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    letter-spacing: -0.015em; /* 텍스트 정밀 자간 조정 */
}

/* 모바일 뷰포트 시뮬레이션 프레임 - 440px 폰 프레임 표준 */
.phone-frame {
    width: 440px;
    height: 956px;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: none; /* remove bezel shadows */
    border: 1px solid rgba(64, 48, 36, 0.08); /* clean flat boundary */
    position: relative;
}

/* 노치 및 Safe Area 대응 헤더 (디자인 토큰 기반 공용 스타일) */
header {
    padding: calc(var(--sat) + var(--header-content-padding)) 20px var(--header-content-padding) 20px;
    font-family: var(--app-header-font-family);
    font-size: var(--app-header-title-size);
    font-weight: var(--app-header-title-weight);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-header-border-color);
    background-color: var(--app-header-bg);
    color: var(--app-header-text-color);
    z-index: 10;
}

/* 상세 뷰 활성화 시 글로벌 헤더 숨김 처리 */
.phone-frame.detailed-view-active > header {
    display: none !important;
}

.decor-bar {
    width: 4px;
    height: 26px;
    margin-right: 14px;
    background: rgba(74, 93, 78, 0.35); /* 기본값 (영감) */
    backdrop-filter: blur(2px);
    border-radius: 1px;
    transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 메인 뷰포트 영역 */
.main-content {
    flex: 1;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background-color: var(--bg-color);
    position: relative;
    padding: 0;
    /* 스크롤바 숨기기 */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.main-content::-webkit-scrollbar {
    display: none;
}

/* 하단 3+1+3 글로벌 내비게이션 - Floating Glassmorphism UI */
nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--nav-height) + var(--sab));
    padding: 0 16px calc(4px + var(--sab)) 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FAF6F0; /* 기본 상태: 화사한 웜 크림 베이지 */
    border-top: 1px solid #ECE7E1; /* 상단 미세 구분선 추가 */
    z-index: 100;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.3s ease;
    transform: translateZ(0);
    will-change: transform;
}

.nav-item {
    flex: 1;
    min-width: 0;
    text-align: center;
    color: #7A6C60 !important; /* 디폴트: 부드러운 회갈색 */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    padding: 0;
    height: var(--nav-height); /* Safe Area Padding 이 밀려도 항상 탭바의 콘텐츠 영역 내 중앙 정렬 고정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.nav-item.active {
    font-weight: 700;
    color: #C68642 !important; /* 디폴트 활성: 마레 카라멜 시그니처 골드 */
}

/* 플러스 버튼 테두리 및 라운드 사각형 소거 */
.nav-item.plus-btn {
    flex: 1;
    background: transparent !important; /* 배경 완전 제거 */
    color: #7A6C60 !important; /* 기본 비활성 웜 그레이 */
    border: none !important;
    border-radius: 0 !important;
    width: auto;
    height: var(--nav-height);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.nav-item.plus-btn:active {
    transform: scale(0.92);
}

/* 임시 목업 뷰 컨텐츠 스타일 */
.mockup-view {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mockup-view h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 8px;
}

.mockup-view p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-sub);
}

/* ==========================================
   Playground Feed (Maree v1.0) 스타일 시스템
   ========================================== */

/* 스크롤 스냅 설정 */
.main-content.snap-y {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.playground-view {
    width: 100%;
    height: 100%;
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always; /* 자석처럼 하나씩 착 달라붙게 설정 */
    background: var(--bg-color);
    overflow: hidden;
}

/* 이미지 동적 비율 렌더러 */
.hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 1;
}

.hero-image.portrait {
    background-size: cover;
    background-position: center;
}

/* 가로 사진: 룩북 여백을 주며 원본 비율 유지, 착시 상단 편향 정렬(35% 지점) */
.hero-image.landscape {
    background-size: contain;
    background-color: #EAEAEA;
    background-position: center 35%;
}

/* 피드 본문 메타데이터 그라데이션 오버레이 */
.overlay-info {
    position: absolute;
    bottom: 90px; /* shift up to stay clear of the floating nav */
    width: 100%;
    padding: 60px 24px 24px 24px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), transparent);
    color: #FFFFFF;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(15px);
    animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.author-info {
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.8;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.action-buttons {
    display: flex;
    gap: 16px;
}

.btn-action {
    background: none;
    border: none;
    color: var(--text-main);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(64, 48, 36, 0.05);
    border: 1px solid rgba(64, 48, 36, 0.08);
    transition: all 0.25s ease;
}

.btn-action:hover {
    background: rgba(64, 48, 36, 0.1);
}

.btn-action.liked {
    color: var(--color-accent);
    background: rgba(64, 48, 36, 0.1);
    border-color: var(--color-accent);
}

/* 좋아요 버튼 미세 바운스 애니메이션 */
@keyframes likeBounce {
    0% { transform: scale(1); }
    15% { transform: scale(1.3); }
    30% { transform: scale(0.9); }
    45% { transform: scale(1.15); }
    60% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.btn-action.like-bounce {
    animation: likeBounce 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 공용 댓글 바텀시트 (Bottom Sheet) */
/* 공용 댓글 바텀시트 (Bottom Sheet) */
.comment-sheet {
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 75%;
    background: #FFFFFF;
    border-radius: 20px 20px 0 0;
    padding: 24px 24px calc(24px + var(--sab)) 24px;
    transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* 더욱 부드럽게 스며드는 이징 */
    z-index: 50;
    display: flex;
    flex-direction: column;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
}

.comment-sheet.open {
    bottom: 0;
}

.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.comment-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 600;
}

.close-sheet-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-sub);
}

.comment-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 12px;
}

.comment-item {
    padding: 14px 0;
    border-bottom: 0.5px solid rgba(224, 221, 217, 0.5);
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    transform: translateY(12px);
    animation: commentFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes commentFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment-user {
    font-weight: 600;
    font-size: 0.8rem;
    color: #555555;
    display: flex;
    align-items: center;
    gap: 6px;
}

.comment-user.is-author {
    color: var(--color-accent);
}

.comment-user.is-author::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--color-accent);
    border-radius: 50%;
}

.comment-text {
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-main);
}

.comment-actions {
    display: flex;
    gap: 12px;
    margin-top: 2px;
}

.action-btn {
    font-size: 0.75rem;
    color: var(--text-sub);
    cursor: pointer;
    background: none;
    border: none;
}

.action-btn:hover {
    color: var(--text-main);
}

.input-area {
    flex: none;
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.input-area input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.9rem;
    outline: none;
    background-color: #FAF9F6;
}

.input-area button {
    padding: 0 16px;
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.2s ease;
}

.input-area button:hover {
    background: #39483C;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   Maree v1.0 Search Portal 스타일
   ========================================== */
.search-portal {
    padding: 24px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.search-portal .search-bar {
    margin-bottom: 20px;
}

.search-portal .search-bar input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.95rem;
    outline: none;
    background-color: #FFFFFF;
    transition: border-color 0.25s ease;
}

.search-portal .search-bar input:focus {
    border-color: var(--color-accent);
}

.search-results-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 40px;
}

.search-placeholder {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-sub);
}

.placeholder-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.placeholder-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    max-width: 260px;
    margin: 0 auto;
}

.no-results {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-sub);
    font-size: 0.9rem;
}

/* 브랜드 그루핑 */
.brand-group {
    margin-top: 24px;
}

.brand-group:first-child {
    margin-top: 0;
}

.brand-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    color: var(--color-accent);
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 6px;
    font-weight: 500;
}

.brand-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-item {
    padding: 14px 12px;
    border-bottom: 0.5px solid rgba(228, 226, 222, 0.4);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background 0.2s ease, padding-left 0.2s ease;
    border-radius: 4px;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.5);
    padding-left: 16px;
}

.result-name {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-main);
}

.result-brand-type {
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-top: 4px;
}

.result-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-accent);
}

/* 광고 카드 배너 */
.ad-card {
    padding: 16px;
    background: #F4F2EE;
    border-radius: 6px;
    margin: 12px 0;
    border: 1px solid #E3DFD9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: fadeIn 0.4s ease;
}

.ad-text h5 {
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: var(--text-main);
    font-weight: 600;
}

.ad-text p {
    font-size: 0.75rem;
    color: var(--color-accent);
    font-weight: 500;
}

.ad-tag {
    font-size: 0.6rem;
    color: var(--text-sub);
    border: 1px solid var(--text-sub);
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================
   Maree v1.0 Product Detail 스타일
   ========================================== */
.product-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
}

.product-detail-view.scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 24px 16px 24px;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 90;
    height: 82px; /* 글로벌 헤더 숨김 시 상세 헤더 높이 고정 */
    flex-shrink: 0; /* flex 높이 축소 방지 */
}

.btn-back {
    font-size: 0.85rem;
    color: var(--text-sub);
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Pretendard', sans-serif;
}

.btn-back:hover {
    color: var(--text-main);
}

.header-gear-name {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-main);
    font-family: 'Playfair Display', serif;
    letter-spacing: -0.01em;
}

.gear-hero {
    padding: 0 0 16px 0;
    text-align: center;
    background: var(--bg-color);
    flex-shrink: 0;
}

.gear-title {
    display: none; /* 두번째 제품명 삭제 지시 반영 */
}

/* 이미지 캐러셀 */
.carousel-box {
    width: 100%;
    height: 350px;
    background: #FFFFFF;
    border-radius: 0px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    scrollbar-width: none;
    position: relative;
    border-bottom: 1px solid var(--border-light);
}

.carousel-box::-webkit-scrollbar {
    display: none;
}

.carousel-item {
    min-width: 100%;
    height: 100%;
    scroll-snap-align: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Action Hub */
.action-hub {
    padding: 0 24px 14px 24px;
    display: flex;
    justify-content: center;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Segmented Control Capsule */
.segmented-control {
    display: flex;
    width: 100%;
    background: rgba(0, 0, 0, 0.04);
    padding: 3px;
    border-radius: 20px;
}

.segmented-control .control-item {
    flex: 1;
    border: none;
    background: transparent;
    padding: 7px 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6C5A4F;
    cursor: pointer;
    border-radius: 17px;
    transition: all 0.18s ease;
    letter-spacing: 0.05em;
    font-family: 'Pretendard', sans-serif;
}

.segmented-control .control-item.active {
    background: #403024;
    color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.segmented-control .control-item:hover:not(.active) {
    background: rgba(0, 0, 0, 0.02);
}

.btn-market-sell:hover {
    background: #D9D2C9 !important;
    border-color: #8C827A !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.sticky-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    height: 44px;
    border-bottom: 1.5px solid var(--border-light);
    background: var(--bg-color);
    position: sticky;
    top: 82px; /* detail-header 높이 아래에 완벽히 고정 */
    z-index: 80;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0; /* flex-container 내 축소 0 고정으로 높이 버그 방지 */
    width: 100%;
}

.sticky-tabs::-webkit-scrollbar {
    display: none;
}

.detail-tab {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 2px;
    font-size: 0.78rem;
    color: var(--text-sub);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    border-bottom: 1.5px solid transparent;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.010em;
}

.detail-tab:hover {
    color: var(--text-main);
}

.detail-tab.active {
    color: var(--text-main);
    border-bottom-color: var(--text-main); /* 얇고 톤 다운된 밑줄 */
    font-weight: 600;
}

/* Tab Sections */
.tab-sections {
    background: var(--bg-color);
    min-height: 400px;
}

.detail-section {
    padding: 24px 24px 96px 24px;
    animation: fadeIn 0.4s ease;
}

.detail-section.hidden {
    display: none !important;
}

.detail-section h3 {
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--text-main);
    font-weight: 700;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.02em;
}

.official-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-main);
}

/* 제조사 설명: 핀치 줌 (터치 지점 중심) — 전역 pan-y / user-scalable=no 우회 */
.desc-zoom-viewport {
    width: 100%;
    background: #fff;
    overflow: hidden;
    /* 평소엔 세로 스크롤 허용, 줌 시에만 제스처 전용 */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}
.desc-zoom-viewport--text {
    background: transparent;
}
.desc-zoom-stage {
    width: 100%;
    transform-origin: 0 0;
    will-change: transform;
    transition: none;
}
.desc-zoom-img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}
.desc-zoom-viewport.is-zoomed {
    touch-action: none;
    cursor: grab;
}

/* Spec Section */
.spec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.spec-header h3 {
    margin-bottom: 0;
}

.btn-compare-trigger {
    padding: 6px 12px;
    font-size: 0.75rem;
    background: #FFFFFF;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-compare-trigger:hover {
    background: var(--color-accent);
    color: #FFFFFF;
}

.spec-list {
    display: flex;
    flex-direction: column;
}

.spec-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(228, 226, 222, 0.5);
    font-size: 0.85rem;
    align-items: center;
}

.spec-label {
    color: var(--text-sub);
    display: flex;
    align-items: center;
}

.spec-value {
    color: var(--text-main);
    font-weight: 500;
    text-align: right;
    max-width: 60%;
}

.info-icon {
    color: var(--color-accent);
    opacity: 0.7;
    margin-right: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: bold;
    display: inline-block;
    transition: opacity 0.2s ease;
}

.info-icon:hover {
    opacity: 1;
}

/* Community Section */
.community-write-card {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
}

.post-textarea {
    width: 100%;
    height: 60px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    font-size: 0.85rem;
    outline: none;
    resize: none;
}

.post-input:focus, .post-textarea:focus {
    border-color: var(--color-accent);
}

.btn-post-submit {
    align-self: flex-end;
    padding: 6px 12px;
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    font-weight: 500;
    transition: background 0.2s ease;
}

.btn-post-submit:hover {
    background: #39483C;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-item {
    background: #FFFFFF;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
}

.post-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.post-author {
    font-weight: 600;
}

.post-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.post-content-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #555555;
}

/* Market Section */
.market-info-card {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
}

.market-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 0.5px solid rgba(228, 226, 222, 0.4);
    font-size: 0.9rem;
}

.market-row:last-of-type {
    border-bottom: none;
}

.market-label {
    color: var(--text-sub);
}

.market-value {
    color: var(--text-main);
    font-weight: 600;
}

.market-value.accent-price {
    color: #FF6B6B;
}

.market-disclaimer {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-top: 12px;
    line-height: 1.4;
}

/* My Gear Section */
.mygear-asset-card {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 16px;
}

.asset-summary {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
}

.asset-count {
    font-size: 0.85rem;
    color: var(--text-main);
}

.asset-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.85rem;
}

.asset-row span:first-child {
    color: var(--text-sub);
}

.asset-row span:last-child {
    font-weight: 600;
    color: var(--text-main);
}

.asset-row .accent-price {
    color: var(--color-accent);
}

.saved-compare-item {
    background: #FFFFFF;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.compare-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compare-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.compare-date {
    font-size: 0.7rem;
    color: var(--text-sub);
}

.btn-delete-compare {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text-sub);
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.btn-delete-compare:hover {
    color: #FF6B6B;
}

/* ==========================================
   Modals & Popups 공통 스타일
   ========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.25s ease;
}

.modal-content {
    background: #FFFFFF;
    padding: 24px;
    border-radius: 12px;
    width: 90%;
    max-width: 340px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: fadeIn 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.modal-content h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--color-accent);
    margin-bottom: 12px;
    font-weight: 600;
}

/* ==========================================
   Maree v1.0 Spec Comparison Modal 스타일
   ========================================== */
.compare-modal-content {
    max-width: 350px;
    max-height: 85%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.compare-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.compare-modal-header h3 {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--text-main);
}

.base-name-highlight {
    color: var(--color-accent);
    font-weight: 600;
}

.btn-compare-close {
    font-size: 1.2rem;
    color: var(--text-sub);
    cursor: pointer;
    font-weight: bold;
    padding: 4px;
}

.compare-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    font-size: 0.85rem;
    outline: none;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
}

.compare-search-input:focus {
    border-color: var(--color-accent);
}

.compare-search-results-list {
    max-height: 160px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.compare-search-item {
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    cursor: pointer;
    background: #FAF9F6;
    transition: all 0.2s ease;
}

.compare-search-item:hover {
    border-color: var(--color-accent);
    background: #FFFFFF;
}

.compare-search-item .item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}

.compare-search-item .item-brand-type {
    font-size: 0.7rem;
    color: var(--text-sub);
    margin-top: 2px;
}

.compare-no-results {
    font-size: 0.8rem;
    color: var(--text-sub);
    text-align: center;
    padding: 12px 0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    margin-bottom: 20px;
}

.compare-table th {
    padding: 8px;
    font-weight: 600;
    color: var(--color-accent);
    border-bottom: 1.5px solid var(--border-light);
}

.compare-table td {
    padding: 8px;
    border-bottom: 0.5px solid rgba(228, 226, 222, 0.5);
    vertical-align: middle;
}

.compare-table .spec-name {
    color: var(--text-sub);
    font-weight: 500;
}

.compare-table .val-base, .compare-table .val-target {
    text-align: center;
    color: var(--text-main);
    font-weight: 500;
}

.btn-save-comparison {
    width: 100%;
    padding: 12px 0;
    border: 1px solid var(--color-accent);
    background: #FFFFFF;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-save-comparison:hover {
    background: var(--color-accent);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(74, 93, 78, 0.2);
}

/* ==========================================
   Maree v1.0 Community Tab & FAB 모달 스타일
   ========================================== */
.curated-header {
    margin-bottom: 24px;
}

.curated-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 12px;
}

.curated-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-light);
    background: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.curated-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.community-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1.5px solid var(--border-light);
    padding-bottom: 10px;
}

.c-btn {
    padding: 6px 16px;
    border: 1px solid var(--color-accent);
    border-radius: 20px;
    font-size: 0.75rem;
    background: #FFFFFF;
    color: var(--color-accent);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.c-btn:hover {
    background: rgba(74, 93, 78, 0.1);
}

.c-btn.active {
    background: var(--color-accent);
    color: #FFFFFF;
}

.post-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.post-feed .post-item {
    padding: 16px 0;
    border-bottom: 0.5px solid rgba(228, 226, 222, 0.6);
    background: transparent;
    cursor: pointer;
    transition: padding-left 0.2s ease;
}

.post-feed .post-item:hover {
    padding-left: 6px;
}

.post-feed .post-title {
    font-size: 0.9rem;
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 6px;
    line-height: 1.45;
}

.post-feed .post-meta {
    font-size: 0.75rem;
    color: var(--text-sub);
}

/* 플로팅 액션 버튼 (FAB) */
.write-btn {
    position: absolute;
    bottom: 30px;
    right: 24px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 4px 14px rgba(74, 93, 78, 0.35);
    font-size: 1.8rem;
    font-weight: 300;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    z-index: 100;
}

.write-btn:hover {
    transform: scale(1.05) rotate(90deg);
    background: #39483C;
    box-shadow: 0 6px 18px rgba(74, 93, 78, 0.45);
}

/* 글쓰기 모달 팝업 추가 스타일 */
.btn-write-modal-close:hover {
    color: var(--text-main);
}

/* 에세이 카드 스타일 */
.essay-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.essay-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.glass-info-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-radius: 16px;
    box-shadow: none;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.gear-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(64, 48, 36, 0.06);
    border: 1px solid rgba(64, 48, 36, 0.08);
    color: var(--text-main);
    padding: 6px 12px;
    border-radius: 14px;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gear-chip:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: scale(1.03);
}

/* 감성 검색 오버레이 */
.search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(250, 249, 246, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 150;
    display: flex;
    flex-direction: column;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* 사진 아래에 붙는 얇은 footer (검은 띠 제거, 아이콘 글로우 및 그림자 필터 적용) */
.photo-footer {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  padding: 6px 10px;
  background: transparent; /* 검은 띠 제거 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  z-index: 5;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.75)); /* 아이콘 및 텍스트 하단 드롭섀도우 글로우 효과 */
}

/* 장비 정보 (작고 얇게) */
.meta-info {
  font-size: 9px;
  opacity: 0.8;
  letter-spacing: 0.5px;
  font-family: 'Inter', sans-serif;
}

/* 액션 아이콘 그룹 (숫자 제외) */
.action-group {
  display: flex;
  gap: 8px;
}

.icon {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  cursor: pointer;
}

/* 모바일 기기 및 웹뷰 대응 (반응형 꽉 찬 레이아웃 - 태블릿 및 고해상도 폰 커버 확장) */
@media (max-width: 768px) {
    body {
        align-items: stretch;
    }
    .phone-frame {
        width: 100vw;
        height: 100vh;
        height: var(--app-height, 100dvh);
        border: none;
        border-radius: 0;
    }
    header {
        padding: calc(var(--sat) + var(--header-content-padding)) 20px var(--header-content-padding) 20px;
        font-size: var(--app-header-title-size);
    }
    nav {
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        height: calc(var(--nav-height) + var(--sab)) !important;
        padding: 0 16px calc(4px + var(--sab)) 16px !important;
        border: none !important;
        border-top: none !important;
        box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25) !important;
    }
}

/* 등록 허브 모달 (Input Hub) CSS */
.hub-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hub-overlay.open {
    display: flex;
    opacity: 1;
}

.hub-content {
    width: 90%;
    max-width: 340px;
    background: var(--bg-color);
    border-radius: 24px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(40, 32, 26, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
}

.hub-overlay.open .hub-content {
    transform: scale(1);
}

.hub-option {
    display: block;
    width: 100%;
    padding: 20px;
    margin: 10px 0;
    background: var(--card-bg);
    border: none;
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    box-sizing: border-box;
}

.hub-option:active {
    transform: scale(0.98);
    background: #EAE5DF;
}

.hub-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
    color: var(--main-sepia);
}

.hub-desc {
    font-size: 12px;
    color: var(--sub-text);
    line-height: 1.4;
}

.close-btn {
    margin-top: 20px;
    color: var(--sub-text);
    cursor: pointer;
    font-size: 0.85rem;
    text-decoration: underline;
    display: inline-block;
}

.close-btn:hover {
    color: var(--main-sepia);
}

/* Smart Suggestion Overlay & Modal (Amber & Sepia Theme) */
.smart-suggestion-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 32, 26, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.smart-suggestion-overlay.open {
    display: flex;
    opacity: 1;
}

.smart-suggestion-modal {
    background: #FAF8F6;
    border: 1px solid #EAE5E0;
    border-radius: 20px;
    width: 100%;
    max-width: 340px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(40, 32, 26, 0.15);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
}

.smart-suggestion-overlay.open .smart-suggestion-modal {
    transform: scale(1);
}

.smart-suggestion-header {
    text-align: center;
    margin-bottom: 20px;
}

.smart-suggestion-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #403024;
    margin: 0 0 6px 0;
}

.smart-suggestion-header p {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.8rem;
    color: #8E8A85;
    margin: 0;
    line-height: 1.4;
}

.smart-suggestion-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    max-height: 160px;
    overflow-y: auto;
}

.suggestion-item {
    background: #FFFFFF;
    border: 1px solid #EAE5E0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.suggestion-item:hover {
    border-color: #C68642;
    background: #FDFCFB;
}

.suggestion-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #C68642;
    cursor: pointer;
}

.suggestion-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.suggestion-item-name {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #403024;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-item-type {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.65rem;
    color: #D4A373;
    font-weight: 600;
}

.smart-suggestion-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suggestion-submit-btn {
    background: #403024;
    color: #FAF8F6;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: center;
}

.suggestion-submit-btn:hover {
    background: #C68642;
}

.suggestion-cancel-btn {
    background: transparent;
    color: #8E8A85;
    border: none;
    border-radius: 10px;
    padding: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: center;
}

.suggestion-cancel-btn:hover {
    color: #403024;
}

/* ==========================================
   Maree Design Guardrails & Media Card Spec
   ========================================== */
.maree-universal-media-card {
  width: 100%;
  max-height: 65vh; /* 화면의 60% 이상 절대 커지지 못하도록 브레이크 */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FAF6F0; /* 마레 웜 크림 베이지 고정 */
  border: 1px solid #ECE7E1;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.maree-universal-media-card img {
  width: 100%;
  height: 100%;
  /* ⚠️ 중요: 이미지를 강제로 늘리거나 키우지 않고, 원본 비율을 유지하며 프레임 안에 맞춤 */
  object-fit: contain; 
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 초장축 제조사 설명 이미지(인포그래픽) 유입 시 자동 스크롤 세이프존 */
.maree-universal-media-card.long-infographic {
  overflow-y: auto;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-start;
}

.maree-universal-media-card.long-infographic img {
  width: 100%;
  height: auto !important;
  object-fit: contain;
}
/* ⏱️ 2. 실키 세로 스크롤 물리 엔진 (Smooth Scroll Snap Engine) */
.maree-photo-viewport-stream {
  scroll-snap-type: y mandatory; /* 수직 축 자석식 고정 강제 */
  overflow-y: scroll;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* iOS 네이티브 관성 스크롤 활성화 */
  height: 100%;
}

.maree-photo-slide-card {
  scroll-snap-align: start; /* 스크롤 정지 시 슬라이드 시작점에 딱 맞춤 */
  scroll-snap-stop: always;  /* 스크롤 가속 시 카드를 건너뛰지 않고 한 장씩 반드시 정지 */
  height: 100%;
}

/* GPU 하드웨어 가속 주입 (Render Performance) */
.force-gpu-layer {
  backface-visibility: hidden;
  perspective: 1000px;
  transform: translate3d(0, 0, 0); /* GPU 렌더링 파이프라인 강제 할당 */
  will-change: transform;
}

/* ⚙️ 3. 광학적 텍스트 가독성 가드 (Adaptive Readability Guard) */
.maree-adaptive-exif-plate {
  background: rgba(254, 254, 254, 0.4); /* 소프트 베이지 아이보리 반투명 */
  backdrop-filter: blur(16px) saturate(140%) brightness(1.02);
  -webkit-backdrop-filter: blur(16px) saturate(140%) brightness(1.02);
  border: 1px solid rgba(254, 254, 254, 0.25);
  box-shadow: 0 4px 20px rgba(43, 24, 16, 0.04);
}

/* 📸 1. 100% 풀 블리드 캔버스 및 비네트 그라데이션 */
.maree-full-bleed-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
}

.maree-bg-photo-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 가로세로 공백 원천 차단 */
  z-index: 0;
}

/* 텍스트 하단 보정용 그라데이션 비네트 */
.maree-bottom-vignette {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(15, 10, 5, 0.85) 0%, rgba(15, 10, 5, 0.3) 60%, transparent 100%);
  z-index: 1;
  pointer-events: none; /* 유저의 터치 드래그 인터랙션 방해 금지 */
}

/* 🛡️ 2. 가독성을 100% 수호하는 딥 세피아 적응형 유리 플레이트 */
.maree-deep-exif-plate {
  position: absolute;
  bottom: 94px; /* 플로팅 GNB 높이를 고려한 여백 */
  left: 16px; right: 16px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(27, 18, 14, 0.65); /* 딥 세피아 투명 아크릴 */
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(254, 254, 254, 0.1);
  color: #FAF6F0; /* 크림 화이트 */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
}

.maree-deep-exif-plate .text-primary-white {
  color: #FAF6F0; /* 높은 명도 고정 */
}

.maree-deep-exif-plate .text-secondary-sand {
  color: #C5B9B0; /* 차분한 웜 샌드 골드 */
}

/* 3. Playground 활성화 시 최상단 헤더 absolute overlay 및 glassmorphism */
.phone-frame.playground-active > header {
  display: none !important; /* 사진 메뉴 활성화 시 공용 헤더는 완전히 숨김 */
}

/*
 * 사진 메뉴 = 독립 풀페이지 뷰포트
 * - main-content가 하단 탭바(+safe-area)를 제외한 실제 가용 높이를 가짐
 * - 슬라이드 높이는 vh/--app-height 계산이 아니라 스크롤러 실측(--pg-slide-height)에 맞춤
 * - iOS에서 100dvh/innerHeight/sab 이중차감으로 다음 사진이 비치는 문제 방지
 */
.phone-frame.playground-active .main-content {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  height: 100%;
  /* fixed 탭바 높이만큼 콘텐츠 박스를 줄여 슬라이드가 탭바 위에만 맞춤 */
  padding-bottom: calc(var(--nav-height) + var(--sab));
  box-sizing: border-box;
  background: #000;
}
.phone-frame.playground-active .pg-immersive-root {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000;
}

/* 4. Playground 활성화 시 하단 GNB 투명화 극대화 및 딥 세피아 동적 스위칭 (maree-gnb-glass 적용) */
.phone-frame.playground-active nav {
  background: rgba(27, 18, 14, 0.88) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: none !important;
  border-top: 1px solid rgba(254, 254, 254, 0.08) !important;
  box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.4) !important;
}

/* Playground 활성화 시 GNB 아이템 가독성 보정 */
.phone-frame.playground-active nav .nav-item {
  color: #C5B9B0 !important; /* 웜 샌드 골드로 톤다운된 기본 색상 */
}

.phone-frame.playground-active nav .nav-item.active {
  color: #FAF6F0 !important; /* 활성 메뉴는 밝은 마레 크림 화이트 고정 */
}

/* 플러스 버튼도 사진 모드에서는 대비를 고려하여 투명하게 아이콘만 노출 */
.phone-frame.playground-active nav .nav-item.plus-btn {
  background: transparent !important;
  border: none !important;
  color: #C5B9B0 !important;
  box-shadow: none !important;
}

/* 5. 상·하단 브랜드 컬러 영역 마스킹 (Edge Solid Fill — Safe Area 동적 대응) */
.maree-status-bar-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--sat);
  min-height: 0px;
  background-color: #FAF6F0; /* 기본 웜 크림 베이지 */
  z-index: 120;
  pointer-events: none;
  transition: background-color 0.3s ease;
}

.maree-home-indicator-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--sab);
  min-height: 0px;
  background-color: #FAF6F0; /* GNB와 동일한 웜 크림 베이지로 통일하여 가로선 누출 차단 */
  z-index: 120;
  pointer-events: none;
  transition: background-color 0.3s ease;
}

/* 사진 감상 모드 활성화 시 (playground-active) 딥 세피아 단색 마스킹 */
.phone-frame.playground-active .maree-status-bar-mask {
  background-color: #1B120E !important;
}

.phone-frame.playground-active .maree-home-indicator-mask {
  background-color: #1B120E !important;
}

/* 📱 풀 스크린 슬라이드 업 감상 편지(Comment) 보관함 서랍 */
.drawer-slide-up {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.drawer-slide-up.closed {
    transform: translateY(100%);
}

/* === Album CSS === */
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.portfolio-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
    transition: transform 0.2s;
    position: relative;
    cursor: pointer;
}
.portfolio-card:hover {
    transform: translateY(-2px);
}
.portfolio-image-container {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    background: #FAF9F6;
}
.portfolio-image-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.portfolio-card.empty-frame {
    border: 1px dashed rgba(64, 48, 36, 0.2);
    background: rgba(64, 48, 36, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 162px;
    text-align: center;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.portfolio-card.empty-frame:hover {
    border-color: var(--color-accent);
    background: rgba(64, 48, 36, 0.04);
    transform: translateY(-2px);
}
.empty-frame-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-frame-icon {
    font-size: 1.4rem;
    color: #8C827A;
    margin-bottom: 6px;
}
.empty-frame-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-main);
}
.empty-frame-desc {
    font-size: 0.58rem;
    color: #8C827A;
    margin-top: 2px;
}
.portfolio-info {
    padding: 8px 10px;
    position: relative;
}
.portfolio-title {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 20px;
}
.portfolio-exif {
    font-size: 0.52rem;
    color: #8E8A85;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bookmark-toggle-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 2px;
    color: #A39E93;
    transition: color 0.2s, transform 0.2s;
    z-index: 5;
}
.bookmark-toggle-btn:hover {
    transform: scale(1.15);
}
.bookmark-toggle-btn.bookmarked {
    color: #D4A373;
}

.category-tab-item {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-sub);
    padding: 4px 0;
    position: relative;
    transition: color 0.2s, font-weight 0.2s;
}
.category-tab-item.active {
    font-weight: 700;
    color: var(--text-main);
}

/* Showcase Lightbox Modal */
.portfolio-modal-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.25s ease-out;
}
.portfolio-modal-content {
    background: #F7F4EB;
    border: 1px solid #EAE5DC;
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(64, 48, 36, 0.15);
    animation: scaleUp 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}
.portfolio-modal-close {
    position: absolute;
    top: 14px; right: 14px;
    background: rgba(0,0,0,0.3);
    border: none;
    border-radius: 50%;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1rem;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}
.portfolio-modal-close:hover {
    background: rgba(0,0,0,0.5);
}
.portfolio-modal-body {
    padding: 18px 20px 22px 20px;
}
.portfolio-modal-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #403024;
    margin-bottom: 6px;
}
.portfolio-modal-exif {
    font-size: 0.7rem;
    color: #8C827A;
    line-height: 1.4;
    margin-bottom: 16px;
}
.gear-link-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212, 163, 115, 0.14);
    border: 1px solid rgba(212, 163, 115, 0.35);
    color: #8B5E3C;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    text-decoration: none;
}
.gear-link-badge:hover {
    background: rgba(212, 163, 115, 0.25);
    transform: translateY(-1px);
}\n\n/* === AlbumGrid CSS === */
/* Filter Chips Styles */
.filter-chips-wrapper {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-bottom: 14px;
    padding: 2px 0;
    -webkit-overflow-scrolling: touch;
}
.filter-chip {
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid var(--maree-border);
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-sub);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.filter-chip.active {
    background: #3E362E;
    color: white;
    border-color: #3E362E;
    font-weight: 600;
}
.filter-chip-remove {
    font-weight: 800;
    margin-left: 2px;
    color: #C5B9B0;
}
.filter-chip.active .filter-chip-remove {
    color: white;
}

/* Album creation select styles */
.creation-select-card {
    position: relative;
    cursor: pointer;
    border: 1px solid var(--maree-border);
    transition: all 0.2s;
}
.creation-select-card:hover {
    border-color: var(--color-accent);
}
.creation-select-card.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(139, 94, 60, 0.2);
}
.selection-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
    background: rgba(255,255,255,0.9);
    border: 1px solid var(--maree-border);
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: var(--text-sub);
    transition: all 0.2s;
}
.selection-badge.active {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* Drag-and-drop sort item styles */
.album-edit-item {
    user-select: none;
    transition: transform 0.2s, box-shadow 0.2s;
}
.album-edit-item.dragging {
    opacity: 0.5;
    background: #F4EFE6;
    border: 1px dashed var(--color-accent);
}
.album-edit-btn {
    background: white;
    border: 1px solid var(--border-light);
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-main);
}
.album-edit-btn:hover {
    background: #fafafa;
}
.album-edit-btn.remove {
    border-color: #FFC0C0;
    color: #D9534F;
}
.album-edit-btn.remove:hover {
    background: #FFF0F0;
}\n\n/* === BrandWrite CSS === */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&family=Playfair+Display:ital,wght@0,700;0,900;1,400&display=swap');

/* 전체 화면 오버레이 레이아웃 - 6px 마진 콤팩트 모달화 */
.brand-write-overlay {
    position: absolute;
    top: calc(var(--sat) + 6px);
    left: 6px;
    right: 6px;
    bottom: calc(var(--sab) + 6px);
    height: calc(100% - var(--sat) - var(--sab) - 12px);
    width: calc(100% - 12px);
    max-height: calc(100% - var(--sat) - var(--sab) - 12px);
    background-color: #FAF8F5;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    letter-spacing: -0.01em;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
    overscroll-behavior-y: contain;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(43, 24, 16, 0.12);
    border: 1px solid #F5EFE6;
    overflow: hidden;
}
/* 헤더 디자인 - Safe Area 확보 및 플렉스 높이 조율 */
.brand-write-header {
    padding: calc(var(--sat) + 12px) 20px 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FAF8F5;
    border-bottom: 1px solid #F5EFE6;
    position: relative;
    z-index: 30;
    box-shadow: 0 1px 3px rgba(43, 30, 23, 0.05);
}
.brand-write-header-title {
    font-size: 0.95rem;
    font-weight: 900;
    color: #2B1E17;
    letter-spacing: -0.025em;
    margin: 0;
    flex-grow: 1;
    text-align: center;
    padding-left: 24px; /* 발행 버튼과의 수평 균형 조율 */
}
/* 뒤로가기 및 발행 버튼 */
.btn-brand-write-back {
    padding: 4px;
    background: none;
    border: none;
    color: #2B1E17;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}
.btn-brand-write-back:hover {
    opacity: 0.7;
}
.btn-brand-write-publish {
    font-size: 0.75rem;
    font-weight: 900;
    color: #F97316;
    background-color: rgba(249, 115, 22, 0.1);
    padding: 6px 14px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-brand-write-publish:hover {
    background-color: #F97316;
    color: #ffffff;
}
.btn-brand-write-publish:disabled {
    color: #6B5E56;
    background-color: rgba(107, 94, 86, 0.1);
    cursor: not-allowed;
}

/* 스크롤바 스타일 통일화 */
.custom-scroll::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(43, 30, 23, 0.2);
    border-radius: 99px;
}

/* 가로 스크롤 칩 컨테이너 */
.board-gear-chips-container {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 6px 0 10px 0;
    -webkit-overflow-scrolling: touch;
}
.board-gear-chips-container::-webkit-scrollbar {
    height: 4px;
}
.board-gear-chips-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02);
}
.board-gear-chips-container::-webkit-scrollbar-thumb {
    background: rgba(43, 30, 23, 0.2);
    border-radius: 99px;
}
.board-gear-chip {
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 9999px;
    background-color: #ffffff;
    color: #2B1E17;
    border: 1px solid #F5EFE6;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.board-gear-chip.active {
    background-color: #2B1E17;
    color: #FAF8F5;
    border-color: transparent;
}

/* ============================================== */
/* PREMIUM MAGAZINE RICH TEXT STYLING (CSS GUARD) */
/* ============================================== */
#board-content:empty::before {
    content: attr(placeholder);
    color: #9CA3AF;
    font-style: italic;
}

/* Auto Drop Cap for Magazine Look */
#board-content > p:first-of-type::first-letter,
#board-content > div:first-of-type::first-letter {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.2rem;
    font-weight: 900;
    float: left;
    margin-right: 0.5rem;
    line-height: 1;
    color: #F97316;
    padding-top: 0.1rem;
}

#board-content h3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 900;
    color: #2B1E17;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.025em;
}

#board-content blockquote {
    border-left: 3px solid #F97316;
    padding-left: 1rem;
    font-style: italic;
    font-family: 'Playfair Display', Georgia, serif;
    color: #6B5E56;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background-color: rgba(245, 239, 230, 0.3);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
}

#board-content hr {
    border: 0;
    border-top: 1px solid #F5EFE6;
    margin: 1.5rem 0;
}

#board-content img {
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(43, 30, 23, 0.08);
    margin: 1.5rem 0 0.5rem 0;
    max-width: 100%;
    height: auto;
}

/* 토글 스위치 디자인 */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #E5DEC9;
    transition: .3s;
    border-radius: 20px;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .toggle-slider {
    background-color: #F97316;
}
input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

/* 에디터 내부 본문 감싸개 (마진 폭 콤팩트 축소 패치) */
.brand-write-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 16px 80px 16px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-sizing: border-box;
}\n\n/* === CabinetGrid CSS === */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-bottom: 130px;
}
.bento-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.015);
    min-height: 110px;
    box-sizing: border-box;
}
.bento-card:active {
    transform: scale(0.97);
}
.showcase-gear-card {
    position: relative;
    overflow: visible;
}
.edit-select-indicator {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: 2px solid #8C7A70;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s;
}
.edit-select-indicator::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.2s;
}
.edit-select-indicator.selected {
    background: #E63946;
    border-color: #E63946;
}
.edit-select-indicator.selected::after {
    background: white;
}
.showcase-gear-card.edit-mode .edit-select-indicator {
    display: flex;
}
.showcase-gear-card.edit-mode.selected {
    border-color: #E63946 !important;
    box-shadow: 0 0 0 2px rgba(230, 57, 70, 0.15) !important;
}

.stats-box-column {
    position: relative;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    border-radius: 8px;
    padding: 6px 8px;
    margin: -6px -4px;
}
.stats-box-column:hover {
    background-color: rgba(250, 246, 240, 0.05);
    opacity: 1 !important;
}
.stats-box-column.active {
    background-color: rgba(250, 246, 240, 0.08);
    opacity: 1 !important;
}

/* Highlight Flash effect */
@keyframes highlight-flash {
    0% { background-color: white; box-shadow: 0 0 0 rgba(139, 94, 60, 0); }
    30% { background-color: rgba(212, 163, 115, 0.22); box-shadow: 0 0 12px rgba(212, 163, 115, 0.4); }
    100% { background-color: white; box-shadow: 0 0 0 rgba(139, 94, 60, 0); }
}
.highlight-flash {
    animation: highlight-flash 1.8s ease-out;
}\n\n/* === ExifRegister CSS === */
.exif-upload-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid rgba(64, 48, 36, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: 0 2px 8px rgba(0,0,0,0.015);
    box-sizing: border-box;
    width: 100%;
}
.exif-upload-bar:hover {
    border-color: #8c7a70;
    background: #FAF8F5;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(64, 48, 36, 0.05);
}
.exif-upload-bar:active {
    transform: scale(0.98);
}\n\n/* === Lounge CSS === */
:root {
    --maree-bg: #FAF6F0;
    --maree-card: #FAF8F5;
    --maree-border: #ECE7E1;
    --maree-text-primary: #2B1810;
    --maree-text-secondary: #8C7A70;
}

.lounge-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--maree-bg);
}

.lounge-home-portal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 16px 16px 100px 16px;
    box-sizing: border-box;
    background-color: var(--maree-bg);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.brand-room-banner {
    background: linear-gradient(135deg, #1B120E 0%, #403024 100%);
    border-radius: 12px;
    padding: 20px;
    color: #FAF6F0;
    margin-bottom: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.brand-room-banner-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

.brand-room-banner-subtitle {
    font-size: 0.72rem;
    color: #C5B9B0;
    margin-top: 6px;
    font-weight: 300;
}

/* dense feed items styling (resolving oversized text issue) */
.dense-feed-item {
    display: flex;
    gap: 14px;
    padding: 14px 4px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #FAF6F0;
    border-radius: 0;
    cursor: pointer;
    transition: opacity 0.15s;
}
.dense-feed-item:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.85;
}
.dense-thumb-container {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f0f0f0;
}
.dense-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dense-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.dense-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    color: var(--maree-text-secondary);
    margin-bottom: 4px;
}
.dense-meta .micro-tag {
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}
.dense-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--maree-text-primary);
    margin: 0 0 4px 0;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dense-summary {
    font-size: 0.72rem;
    color: var(--maree-text-secondary);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Popular Forums Scroller styling */
.popular-forums-scroller::-webkit-scrollbar {
    display: none;
}

/* BBS Table Styles */
.bbs-table-wrapper {
    background: white;
    border: 1px solid var(--maree-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(43, 24, 16, 0.02);
    margin-bottom: 24px;
}
.bbs-table-header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    padding: 8px 12px;
    background: var(--maree-bg);
    border-bottom: 1px solid var(--maree-border);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--maree-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bbs-table-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 6px;
    padding: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(236, 231, 225, 0.5);
    cursor: pointer;
    transition: background-color 0.2s;
}
.bbs-table-row:last-child {
    border-bottom: none;
}
.bbs-table-row:hover {
    background-color: rgba(139, 94, 60, 0.02);
}
.bbs-table-row:active {
    background-color: rgba(139, 94, 60, 0.05);
}
.bbs-col-no {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bbs-no-num {
    font-family: 'Playfair Display', serif;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--maree-text-primary);
    line-height: 1;
}
.bbs-category-badge {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    margin-top: 4px;
    scale: 0.9;
}
.bbs-col-title {
    grid-column: span 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    text-align: left;
}
.bbs-title-text {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--maree-text-primary);
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bbs-meta-stack {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.62rem;
    color: var(--maree-text-secondary);
    margin-top: 4px;
    line-height: 1;
}
.bbs-gear-tag {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--color-accent);
    background: rgba(139, 94, 60, 0.05);
    padding: 1px 6px;
    border-radius: 99px;
}
.bbs-col-stat {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}
.bbs-stat-comments {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--maree-text-secondary);
    line-height: 1;
}
.bbs-stat-views {
    font-size: 0.58rem;
    color: rgba(140, 122, 112, 0.5);
    margin-top: 4px;
    line-height: 1;
}\n\n/* === LoungeHome CSS === */
.forum-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 76px;
    gap: 8px;
    margin-bottom: 20px;
}
.bento-tile {
    background-color: var(--maree-card);
    border: 1px solid var(--maree-border);
    border-radius: 16px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    box-shadow: 0 4px 12px rgba(43, 24, 16, 0.015);
    text-align: left;
    letter-spacing: -0.02em;
}
.bento-tile:active {
    transform: scale(0.97);
}
.bento-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(43, 24, 16, 0.08);
    border-color: var(--color-accent);
}
.bento-tile.sony-large {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, var(--maree-card) 0%, #EAE5DC 100%);
    border-color: rgba(139, 94, 60, 0.2);
    padding: 14px;
}

/* Cozy Forum Hub Styles inspired by 게시판메인.html */
.forum-hub-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.hub-banner-card {
    background: linear-gradient(135deg, #1B120E 0%, #403024 100%);
    border-radius: 16px;
    padding: 20px;
    color: #FAF6F0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(43, 24, 16, 0.05);
    text-align: left;
}
.hub-banner-card::after {
    content: '';
    position: absolute;
    right: -24px;
    bottom: -24px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}
.hub-banner-badge {
    font-size: 0.55rem;
    background: var(--color-accent);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 6px;
}
.hub-banner-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 900;
    font-style: italic;
    margin: 0 0 6px 0;
    color: #FAF8F5;
}
.hub-banner-desc {
    font-size: 0.72rem;
    color: rgba(250, 246, 240, 0.8);
    line-height: 1.4;
    margin: 0;
    font-weight: 300;
}

.hub-section-title {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--maree-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0 2px;
    margin-bottom: 8px;
    text-align: left;
}
.category-boards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.category-board-item {
    background: var(--maree-card);
    border: 1px solid var(--maree-border);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    text-align: left;
}
.category-board-item:hover {
    border-color: rgba(139, 94, 60, 0.35);
    background: rgba(139, 94, 60, 0.02);
}
.category-board-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.category-board-name {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--maree-text-primary);
    margin: 0;
}
.category-board-desc {
    font-size: 0.68rem;
    color: var(--maree-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.category-board-count {
    font-family: monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--maree-text-secondary);
    background: var(--maree-bg);
    padding: 2px 8px;
    border-radius: 99px;
    margin-left: 8px;
    flex-shrink: 0;
}

.brand-forums-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.brand-forum-card {
    background: var(--maree-card);
    border: 1px solid var(--maree-border);
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 2px 6px rgba(43, 24, 16, 0.01);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    text-align: left;
}
.brand-forum-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 12px rgba(43, 24, 16, 0.06);
    transform: translateY(-1px);
}
.brand-card-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.brand-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.brand-card-badge {
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.brand-card-indicator {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.brand-card-title {
    font-size: 0.76rem;
    font-weight: 800;
    color: var(--maree-text-primary);
    margin: 4px 0 2px 0;
    line-height: 1.3;
}
.brand-card-desc {
    font-size: 0.65rem;
    color: var(--maree-text-secondary);
    margin: 0;
    line-height: 1.35;
}
.brand-card-footer {
    font-size: 0.65rem;
    color: rgba(140, 122, 112, 0.6);
    padding-top: 8px;
    border-top: 1px dashed var(--maree-border);
    margin-top: 8px;
}

/* Bottom Sheet Styles -> Full Screen Board Switcher Styles */
.lounge-bottom-sheet-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FAF8F5; /* 웜 크림 베이지 불투명 배경으로 윗부분 블러 제거 */
    z-index: 1200; /* 기존 z-index: 999보다 상향하여 확실히 덮음 */
    display: none;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 0 0 40px 40px; /* 기존 모바일 폰 프레임 둥근 모서리 보존 */
    overflow: hidden;
}
.lounge-bottom-sheet-overlay.open {
    display: flex;
    opacity: 1;
}
.lounge-bottom-sheet {
    width: 100%;
    height: 100%;
    background: #FAF8F5;
    border-top-left-radius: 0; /* 둥근 모서리 제거 */
    border-top-right-radius: 0;
    border-top: none;
    padding-top: calc(12px + env(safe-area-inset-top)); /* iOS 노치 대응 */
    box-shadow: none;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    max-height: 100%;
    z-index: 1210;
}
.lounge-bottom-sheet-overlay.open .lounge-bottom-sheet {
    transform: translateY(0);
}
.bottom-sheet-handle {
    width: 36px;
    height: 5px;
    background-color: #E2DDD5;
    border-radius: 3px;
    margin: 0 auto 12px auto;
}
.sheet-header {
    padding: 8px 20px 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(64, 48, 36, 0.08);
}
.sheet-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}
.sheet-left-menu {
    width: 110px;
    background: #F4EFE6;
    overflow-y: auto;
    border-right: 1px solid rgba(64, 48, 36, 0.08);
}
.sheet-left-item {
    padding: 14px 16px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-sub);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    border-left: 3px solid transparent;
}
.sheet-left-item.active {
    background: var(--maree-card);
    color: var(--color-accent);
    font-weight: 600;
    border-left-color: var(--color-accent);
}
.sheet-right-panel {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-content: start;
}
.sheet-sub-board-card {
    background: var(--maree-card);
    border: 1px solid var(--maree-border);
    border-radius: 8px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
    text-align: left;
}
.sheet-sub-board-card:hover {
    border-color: var(--color-accent);
    background: rgba(139, 94, 60, 0.02);
}
.sheet-sub-board-card.active {
    border-color: var(--color-accent);
    background: rgba(139, 94, 60, 0.04);
    font-weight: 600;
}\n\n/* === PostDetail CSS === */
/* Post Detail Modal & Badges */
.system-tag-badge {
    font-size: 0.58rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}
.system-tag-badge.hot-deal {
    background-color: #fef3c7;
    color: #d97706;
}
.system-tag-badge.photo-spot {
    background-color: #d1fae5;
    color: #059669;
}
.system-tag-badge.gear-setup {
    background-color: #dbeafe;
    color: #2563eb;
}
.system-tag-badge.free {
    background-color: #f3f4f6;
    color: #4b5563;
}\n\n/* === Community CSS === */
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

.prod-ext-card {
    opacity: 0;
    transform: translateY(4px);
    animation: extFadeIn 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}
.prod-ext-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 94, 60, 0.08) !important;
    border-color: rgba(139, 94, 60, 0.25) !important;
}
@keyframes extFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}\n\n/* === Radar CSS === */
/* Sub tab styling for market (Centering & No Shaking) */
.market-sub-tabs {
    display: flex;
    justify-content: center;
    gap: 32px;
    height: 44px;
    align-items: center;
    border-bottom: 1px solid #ECE7E1;
    margin-top: -6px;
    margin-bottom: 20px;
}
.market-sub-tab {
    background: none;
    border: none;
    font-size: 14px;
    font-weight: 500;
    color: #A6968E;
    padding: 10px 4px;
    cursor: pointer;
    position: relative;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}
.market-sub-tab.active {
    color: #2B1810;
    font-weight: 700;
    border-bottom-color: #2B1810;
}
/* 광고용 카드 디자인 시스템 */
.coupang-ad-card {
    background-color: #FAF8F5 !important;
    border: 1px solid #E5DEC9 !important;
}
.badge-ad {
    background-color: #2B1810 !important;
    color: #FFFFFF !important;
}
.ad-notice {
    color: #9C8675 !important;
    font-style: italic;
}\n\n/* === Showcase CSS === */
.showcase-view {
    background: #FAF8F5 !important;
    overscroll-behavior-y: contain !important;
}

/* 바텀 시트 스타일 */
.settings-bottom-sheet-backdrop {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.settings-bottom-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.settings-bottom-sheet {
    background: #FAF8F5;
    border-top: 1px solid rgba(64, 48, 36, 0.1);
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 -8px 32px rgba(64, 48, 36, 0.12);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
}
.settings-bottom-sheet-backdrop.active .settings-bottom-sheet {
    transform: translateY(0);
}
.sheet-header {
    padding: 12px 18px 8px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid rgba(64, 48, 36, 0.08);
    position: relative;
}
.sheet-drag-handle {
    width: 36px;
    height: 5px;
    background: #ECE7E1;
    border-radius: 3px;
    margin-bottom: 10px;
}
.sheet-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #403024;
    margin: 0;
}
.sheet-close-btn {
    position: absolute;
    right: 18px;
    top: 14px;
    background: none;
    border: none;
    font-size: 1.3rem;
    color: #8C7A70;
    cursor: pointer;
    line-height: 1;
}
.sheet-body {
    padding: 10px 18px 30px 18px;
    overflow-y: auto;
}
.settings-section {
    margin-bottom: 20px;
}
.section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8C7A70;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin: 0 0 8px 0;
}
.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    border: 1px solid rgba(64, 48, 36, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 6px;
    box-sizing: border-box;
}
.settings-item.interactive {
    cursor: pointer;
    transition: all 0.2s;
}
.settings-item.interactive:active {
    transform: scale(0.98);
    background: #FAF8F5;
}
.item-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #403024;
}
.item-value {
    font-size: 0.68rem;
    color: #8C7A70;
    font-weight: 500;
}
.settings-item.danger .item-label {
    color: #E63946;
}\n\n/* === UploadPortal CSS === */
/* 전체 화면 오버레이 레이아웃 */
.upload-view-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #FAF8F5;
    position: relative;
}
/* 헤더 디자인 */
.upload-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(var(--sat) + 14px) 20px 14px 20px;
    background-color: #FAF8F5;
    border-bottom: 1px solid #F5EFE6;
    position: sticky;
    top: 0;
    z-index: 30;
}
.btn-back {
    padding: 4px;
    border-radius: 9999px;
    background: none;
    border: none;
    color: #2B1E17;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}
.btn-back:hover {
    background-color: #F5EFE6;
}
.icon-back {
    width: 22px;
    height: 22px;
}
.upload-header-title {
    font-size: 0.88rem;
    font-weight: 900;
    color: #2B1E17;
    letter-spacing: -0.025em;
    margin: 0;
}
/* 장비 상세: 사진등록과 동일 헤더, 우측 판매 희망 */
.cabinet-detail-header .cabinet-sell-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFFFF;
    border: 1px solid #ECE7E1;
    padding: 4px 10px;
    border-radius: 9999px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.cabinet-detail-header .cabinet-sell-toggle span {
    font-size: 0.65rem;
    font-weight: 700;
    color: #8C7A70;
    white-space: nowrap;
}
.btn-submit-record {
    font-size: 0.75rem;
    font-weight: 900;
    color: #F97316;
    background-color: rgba(249, 115, 22, 0.1);
    padding: 6px 12px;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-submit-record:hover {
    background-color: rgba(249, 115, 22, 0.2);
}
.btn-submit-record.disabled,
.btn-submit-record:disabled {
    color: #A09C99;
    background-color: rgba(160, 156, 153, 0.1);
    cursor: not-allowed;
}

/* 업로드 메인 뷰 컨테이너 */
.upload-view-container, .upload-view-screen {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
}

/* 바디 디자인 */
.upload-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px calc(var(--nav-height) + var(--sab) + 120px) 16px !important; /* 하단 탭바를 훌쩍 넘어서 끝까지 시원하게 위로 올라오도록 120px 여유 패딩 적용 */
    height: auto !important;
    overflow: visible !important;
}

/* 업로드 영역 및 썸네일 */
.dashed-upload-area {
    border: 2px dashed #F5EFE6;
    background: white;
    border-radius: 16px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.dashed-upload-area:hover {
    border-color: #8C7A70;
    background: rgba(245, 239, 230, 0.3);
}
.upload-icon {
    font-size: 2.2rem;
    margin-bottom: 8px;
}
.upload-prompt {
    font-size: 0.82rem;
    font-weight: 700;
    color: #2B1E17;
    margin: 0 0 4px 0;
}
.upload-desc {
    font-size: 0.65rem;
    color: #6B5E56;
    line-height: 1.4;
    margin: 0 0 14px 0;
    padding: 0 16px;
}
.btn-select-file {
    display: inline-block;
    padding: 6px 16px;
    border: 1px solid #2B1E17;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2B1E17;
    background: white;
    transition: all 0.2s ease;
}
.btn-select-file:hover {
    background-color: #F5EFE6;
}

.thumbnail-box {
    background: white;
    border: 1px solid #F5EFE6;
    border-radius: 16px;
    padding: 8px;
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.thumbnail-img {
    width: 100%;
    height: 176px;
    object-fit: cover;
    border-radius: 12px;
}
.btn-change-image {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(250, 248, 245, 0.9);
    border: 1px solid #F5EFE6;
    color: #2B1E17;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: background-color 0.2s;
}
.btn-change-image:hover {
    background-color: #FAF8F5;
}

/* EXIF 스펙 카드 */
.exif-spec-card {
    background: white;
    border: 1px solid #F5EFE6;
    padding: 14px;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.exif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(245, 239, 230, 0.4);
    padding-bottom: 6px;
}
.exif-label {
    font-size: 0.56rem;
    font-weight: 900;
    color: #6B5E56;
    letter-spacing: 0.1em;
}
.exif-badge {
    font-size: 0.5rem;
    color: #047857;
    background-color: #D1FAE5;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 900;
}
/* EXIF 헤더 우측: AUTOMAP PASS 자리 → 댓글 허용 스위치 */
.exif-comment-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.exif-comment-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #2B1E17;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* 사진등록: 바디/렌즈 셀렉터 카드 */
.gear-select-card {
    background: #FFFDF9;
    border: 1px solid #ECE7E1;
    border-radius: 14px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

/* 새 장비 발견 팝업 */
.gear-discovery-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px 14px calc(var(--nav-height) + var(--sab) + 12px);
    background: rgba(43, 24, 16, 0.45);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: gearDiscFade 0.22s ease-out;
}
.gear-discovery-sheet {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(180deg, #FFFDF9 0%, #FAF6F0 100%);
    border: 1px solid rgba(236, 231, 225, 0.95);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(43, 24, 16, 0.22);
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: gearDiscRise 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.gear-discovery-sheet-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}
.gear-discovery-kicker {
    margin: 0 0 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #C68642;
}
.gear-discovery-sheet-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #2B1810;
    letter-spacing: -0.02em;
}
.gear-discovery-desc {
    margin: 6px 0 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: #7A6C60;
}
.gear-discovery-count {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    color: #2B1810;
    background: rgba(198, 134, 66, 0.14);
    border: 1px solid rgba(198, 134, 66, 0.28);
    padding: 5px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.gear-discovery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gear-discovery-card {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #ECE7E1;
    box-shadow: 0 1px 3px rgba(43, 24, 16, 0.04);
    text-align: left;
}
.gear-discovery-thumb {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: #FAF6F0;
    border: 1px solid #ECE7E1;
}
.gear-discovery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gear-discovery-kind {
    position: absolute;
    left: 6px;
    bottom: 6px;
    font-size: 9px;
    font-weight: 800;
    color: #FFFDF9;
    background: #2B1810;
    padding: 2px 7px;
    border-radius: 999px;
}
.gear-discovery-kind.is-lens {
    background: #8B5E3C;
}
.gear-discovery-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gear-discovery-name {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 900;
    color: #2B1810;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gear-discovery-sub {
    margin: 0;
    font-size: 0.62rem;
    color: #8C7A70;
}
.gear-discovery-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.gear-discovery-actions .btn-gear-skip,
.gear-discovery-actions .btn-register-gear {
    flex: 1;
    border: none;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
    touch-action: manipulation;
}
.gear-discovery-actions .btn-gear-skip {
    background: #FAF6F0;
    color: #7A6C60;
    border: 1px solid #ECE7E1;
}
.gear-discovery-actions .btn-register-gear {
    background: #C68642;
    color: #FFFDF9;
}
.gear-discovery-actions .btn-register-gear:disabled {
    opacity: 0.65;
    cursor: wait;
}
.gear-discovery-later {
    border: none;
    background: transparent;
    color: #8C7A70;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 8px;
    cursor: pointer;
}
@keyframes gearDiscFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes gearDiscRise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

.switch.switch-sm {
    width: 32px;
    height: 18px;
    flex-shrink: 0;
}
.switch.switch-sm .slider:before {
    height: 12px;
    width: 12px;
}
.switch.switch-sm input:checked + .slider:before {
    transform: translateX(14px);
}
.exif-grid {
    display: grid;
    grid-template-cols: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
}
.exif-grid-item {
    display: flex;
    flex-direction: column;
}
.exif-grid-item.col-span-2 {
    grid-column: span 2 / span 2;
    background-color: rgba(250, 248, 245, 0.6);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(245, 239, 230, 0.4);
}
.exif-grid-label {
    color: #6B5E56;
    font-size: 0.56rem;
    margin-bottom: 2px;
}
.exif-grid-value {
    font-size: 0.69rem;
    font-weight: 700;
    color: #2B1E17;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exif-exposure-value {
    font-family: monospace;
    font-size: 0.69rem;
    font-weight: 700;
    color: #6B5E56;
}

/* 드롭다운 장비 그룹 */
.dropdown-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.dropdown-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #6B5E56;
    text-transform: uppercase;
    padding-left: 4px;
}
.select-wrapper {
    position: relative;
    width: 100%;
}
.gear-select {
    width: 100%;
    background: white;
    border: 1px solid #F5EFE6;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #2B1E17;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
}
.gear-select:focus {
    border-color: #8C7A70;
}
.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.6rem;
    color: #6B5E56;
    pointer-events: none;
}
.btn-action-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}
.suggest-btn {
    font-size: 0.62rem;
    background: #8C7A70;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.2s;
}
.suggest-btn:hover {
    background-color: #7A6B62;
}
.suggest-btn.btn-manual-input {
    background: transparent;
    border: 1px solid #F5EFE6;
    color: #6B5E56;
}
.suggest-btn.btn-manual-input:hover {
    background-color: #F5EFE6;
}
.status-icon {
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    color: #047857;
}

/* 기록 설명 텍스트영역 */
.caption-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.caption-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #6B5E56;
    padding-left: 4px;
}
.caption-textarea {
    width: 100%;
    height: 80px;
    background: white;
    border: 1px solid #F5EFE6;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    color: #2B1E17;
    outline: none;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color 0.2s;
}
.caption-textarea:focus {
    border-color: #8C7A70;
}

/* 태그 그룹 */
.tags-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tags-label {
    font-size: 0.62rem;
    font-weight: 700;
    color: #6B5E56;
    padding-left: 4px;
}
.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tag-pill-btn {
    cursor: pointer;
    font-size: 0.62rem;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid #F5EFE6;
    background: white;
    color: #8E8A85;
    font-weight: 700;
    transition: all 0.2s ease;
}
.tag-pill-btn.active {
    border-color: #3E362E;
    background: #3E362E;
    color: white;
}
.tag-input-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.tag-text-input {
    flex: 1;
    background: white;
    border: 1px solid #F5EFE6;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.72rem;
    color: #2B1E17;
    outline: none;
}
.btn-add-tag {
    padding: 8px 16px;
    background: #8C7A70;
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-add-tag:hover {
    background-color: #7A6B62;
}

/* 토글 카드 */
.toggle-card {
    background: white;
    border: 1px solid #F5EFE6;
    padding: 16px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.toggle-text-area {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.toggle-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2B1E17;
    margin: 0;
}
.toggle-desc {
    font-size: 0.56rem;
    color: #6B5E56;
    margin: 0;
}

/* 토글 스위치 */
.switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #FAF6F0;
    border: 1px solid #F5EFE6;
    transition: .3s;
    border-radius: 20px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: #8C7A70;
    transition: .3s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: #8C7A70;
    border-color: #8C7A70;
}
input:checked + .slider:before {
    background-color: white;
    transform: translateX(16px);
}

/* 로딩/안내 카드 */
.loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: white;
    border: 1px solid #F5EFE6;
    border-radius: 16px;
    gap: 12px;
}
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(140, 122, 112, 0.15);
    border-top: 3px solid #8C7A70;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.loading-text {
    font-size: 0.72rem;
    color: #6B5E56;
    margin: 0;
}

.upload-status-text {
    font-size: 0.72rem;
    color: #6B5E56;
    text-align: center;
    background-color: rgba(245, 239, 230, 0.4);
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #F5EFE6;
}

.value-proposal-card {
    background: rgba(64, 48, 36, 0.01);
    border: 1px dashed #F5EFE6;
    padding: 16px;
    border-radius: 16px;
}
.proposal-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #2B1E17;
    margin: 0 0 6px 0;
}
.proposal-desc {
    font-size: 0.62rem;
    color: #6B5E56;
    line-height: 1.5;
    margin: 0;
}

/* 수동 검색 모달 스타일 */
.search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 48, 36, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.search-modal-content {
    background: #FAF9F6;
    width: 100%;
    max-width: 320px;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(64, 48, 36, 0.15);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 80%;
}
.search-modal-input-row {
    display: flex;
    gap: 6px;
}
.search-modal-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    font-size: 0.75rem;
    outline: none;
    background: white;
}
.btn-modal-search {
    background: var(--text-main);
    color: var(--bg-color);
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.search-modal-results {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
}
.search-modal-item {
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    background: white;
    border: 1px solid rgba(64, 48, 36, 0.05);
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    color: var(--text-main);
}
.search-modal-item:hover {
    background: rgba(139, 94, 60, 0.08);
    border-color: #8B5E3C;
    color: #8B5E3C;
}

/* 글로벌 모달 및 새 글/등록 허브 오버레이 스타일 */
.hub-overlay-modal-content {
    max-width: 320px;
    width: 90%;
    background: #FAF8F5;
    border: 1px solid #E5DFD5;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(43,24,16,0.15);
}

.hub-overlay-modal-content-wide {
    max-width: 340px;
    width: 90%;
    background: #FAF8F5;
    border: 1px solid #E5DFD5;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(43,24,16,0.15);
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}

.hub-overlay-title {
    margin: 0 0 20px 0;
    font-family: 'Playfair Display', serif;
    color: #2B1810;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: -0.02em;
}

.hub-options-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.hub-option-btn {
    display: flex;
    flex-direction: column;
    text-align: left;
    background: white;
    border: 1px solid #ECE7E1;
    border-radius: 12px;
    padding: 14px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.015);
}

.hub-option-title {
    font-size: 0.85rem;
    font-weight: 800;
    color: #2B1810;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hub-option-desc {
    font-size: 0.65rem;
    color: #8C7A70;
    margin-top: 4px;
    line-height: 1.4;
}

.hub-close-btn-classic {
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    background: #EAE5DC;
    color: #2B1810;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #ECE7E1;
    padding-bottom: 10px;
}

.modal-header-title-text {
    font-family: 'Playfair Display', serif;
    color: #2B1810;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.modal-header-close-span {
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    color: #8C7A70;
    padding: 4px;
}

.modal-input-vertical-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.modal-input-label-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #8C7A70;
}

.modal-select-gear-dropdown {
    width: 100%;
    border: 1px solid #ECE7E1;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.72rem;
    background: white;
    outline: none;
    color: #2B1810;
    font-weight: 500;
}

.modal-textarea-editor {
    width: 100%;
    min-height: 120px;
    border: 1px solid #ECE7E1;
    border-radius: 8px;
    padding: 10px;
    font-size: 0.75rem;
    background: white;
    outline: none;
    color: #2B1810;
    line-height: 1.5;
    resize: none;
    box-sizing: border-box;
}

.modal-submit-btn-accent {
    width: 100%;
    padding: 12px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    transition: background 0.2s;
    text-align: center;
}

/* 📱 룸 공간 분리 슬라이드 트랜지션 물리 엔진 */
.maree-view-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  background: var(--maree-bg);
}

/* 홈 포털 화면이 좌측 배후로 슥 사라지는 효과 */
.maree-view-home-exit {
  transform: translateX(-35%);
  opacity: 0.6;
  pointer-events: none; /* 뒷배경 터치 조작 오작동 방어 */
}

/* 전용 브랜드 룸이 우측에서 등장하는 효과 */
.maree-view-room-enter {
  transform: translateX(100%);
  z-index: 10;
}

.maree-view-room-active {
  transform: translateX(0);
  z-index: 10;
}

/* 2열 고밀도 콤팩트 피드 로우 호버 엔진 */
.dense-feed-item {
  transition: background-color 0.2s ease;
}
.dense-feed-item:hover {
  background-color: rgba(250, 248, 245, 0.5) !important;
}

/* 💻 안티그래비티 적용용 초슬림 Tailwind 유틸리티 폴백 */
.flex {
  display: flex;
}
.gap-4 {
  gap: 16px;
}
.py-3\.5 {
  padding-top: 14px;
  padding-bottom: 14px;
}
.items-center {
  align-items: center;
}
.border-b {
  border-bottom: 1px solid rgba(236, 231, 225, 0.4);
}
.border-\[\#ECE7E1\]\/40 {
  border-bottom-color: rgba(236, 231, 225, 0.4);
}
.hover\:bg-\[\#FAF8F5\]\/50:hover {
  background-color: rgba(250, 248, 245, 0.5) !important;
}
.transition-colors {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.w-\[72px\] {
  width: 72px;
}
.h-\[72px\] {
  height: 72px;
}
.rounded-lg {
  border-radius: 8px;
}
.bg-\[\#FAF6F0\] {
  background-color: #FAF6F0;
}
.border-\[\#ECE7E1\] {
  border: 1px solid #ECE7E1;
}
.overflow-hidden {
  overflow: hidden;
}
.shrink-0 {
  flex-shrink: 0;
}
.flex-1 {
  flex: 1 1 0%;
}
.min-w-0 {
  min-width: 0;
}
.gap-1\.5 {
  gap: 6px;
}
.mb-1\.5 {
  margin-bottom: 6px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[\#8C7A70\] {
  color: #8C7A70;
}
.text-xs {
  font-size: 12px;
}
.font-bold {
  font-weight: 700;
}
.text-\[\#2B1810\] {
  color: #2B1810;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leading-snug {
  line-height: 1.35;
}
.text-\[11px\] {
  font-size: 11px;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mt-0.5 {
  margin-top: 2px;
}
.leading-relaxed {
  line-height: 1.4;
}
.justify-between {
  justify-content: space-between;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[\#8C7A70\]\/80 {
  color: rgba(140, 122, 112, 0.8);
}
.mt-1 {
  margin-top: 4px;
}
.gap-2 {
  gap: 8px;
}
.mr-0\.5 {
  margin-right: 2px;
}

/* 🏷️ 마이크로 태그 배지 웜 크림 테두리 및 배경 */
.micro-tag-badge {
  background-color: #FAF5EF !important;
  color: #7A6657 !important;
  font-size: 9px !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  line-height: 1.1 !important;
}

/* ☕ 프리미엄 커뮤니티 모카/세피아 분위기 전용 디자인 폴백 */
.bg-cream-warm {
  background-color: #FAF8F5 !important;
}
.text-stone-900 {
  color: #1c1917 !important;
}
.text-stone-800 {
  color: #292524 !important;
}
.text-stone-700 {
  color: #44403c !important;
}
.text-stone-500 {
  color: #78716c !important;
}
.text-stone-400 {
  color: #a8a29e !important;
}

/* SONY 카드 웜 크림 */
.popular-forum-card-wide-mocha {
  background: #FCF9F2 !important;
  border: 1px solid rgba(242, 237, 226, 0.6) !important;
  border-radius: 24px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(139, 94, 60, 0.03) !important;
}
.circle-arrow-btn-red {
  background-color: #D14B3E !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(209, 75, 62, 0.15) !important;
}

/* FUJI / LEICA 하프 카드 */
.popular-forum-card-half-mocha {
  background: #FDFBF7 !important;
  border: 1px solid rgba(242, 237, 226, 0.6) !important;
  border-radius: 24px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(139, 94, 60, 0.03) !important;
}

/* 프리미엄 태그 배지들 */
.premium-tag-setup {
  background-color: #FCF6ED !important;
  color: #D48C46 !important;
  font-size: 9px !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}
.premium-tag-spot {
  background-color: #FDF2F2 !important;
  color: #D95F5F !important;
  font-size: 9px !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}
.premium-tag-free {
  background-color: #FCF6ED !important;
  color: #D48C46 !important;
  font-size: 9px !important;
  padding: 1.5px 6px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  display: inline-block !important;
}

/* 화이트 바탕이 아닌, 차분하고 부드러운 웜 미색 크림색 바탕으로 글 목록 리스트를 정돈 */
.premium-feed-container {
  background-color: #FAF8F5 !important;
  border-radius: 16px !important;
  padding: 4px 6px 12px 6px !important;
  margin-top: -4px !important;
  border: 1px solid rgba(242, 237, 226, 0.7) !important;
}

.premium-feed-item-mocha {
  border-bottom: 1px solid rgba(236, 231, 225, 0.5) !important;
  padding: 8px 2px !important;
  transition: background-color 0.2s ease !important;
}
.premium-feed-item-mocha:hover {
  background-color: rgba(247, 244, 238, 0.4) !important;
}

/* ============================================================
   Safe Area 대응 유틸리티 클래스 (WebView Hybrid)
   ============================================================ */

/* 스크롤 컨테이너 하단 컷오프 방지 — nav 높이 + 홈 인디케이터 + 여유분 */
.scroll-content-bottom-safe {
    padding-bottom: calc(var(--nav-height) + var(--sab) + 50px);
}

/* 풀스크린 오버레이의 하단 safe area 패딩 */
.overlay-bottom-safe {
    padding-bottom: calc(24px + var(--sab));
}

/* 메인 뷰 콘텐츠 표준 컨테이너 (전역 헤더 아래 + GNB 위 콘텐츠 영역) */
.view-content-container {
    width: 100%;
    flex: 1;
    overflow-y: auto;
    background-color: #FAF8F5;
    padding: 16px 16px calc(var(--nav-height) + var(--sab) + 30px) 16px;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-y: contain;
    display: flex;
    flex-direction: column;
}
.view-content-container::-webkit-scrollbar {
    display: none;
}

/* 공용 유틸 클래스 */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.analog-grain {
    position: relative;
}
.analog-grain::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    z-index: 999;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Smooth scaling transitions */
.hover-scale {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-scale:active {
    transform: scale(0.97);
}

/* Shutter flash animation */
@keyframes mechanical-shutter {
    0% { opacity: 0.95; clip-path: inset(0 0 100% 0); }
    30% { opacity: 1; clip-path: inset(0 0 0 0); }
    100% { opacity: 0; clip-path: inset(100% 0 0 0); }
}
.shutter-shiner {
    animation: mechanical-shutter 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ProductDetail 촬영사진 — 사진 메뉴 ImmersiveSlide 모달 셸
 * iPhone: absolute inset-0 이면 하단 고정 탭바에 메타/액션이 가려지고
 * 슬라이드 중심이 탭바 아래까지 잡혀 사진 위아래가 잘린 것처럼 보임.
 * → 탭바·safe-area 위까지만 뷰포트로 사용.
 */
.photo-swipe-modal,
#modal-photo-swipe {
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--nav-height) + var(--sab));
    width: auto;
    height: auto;
    box-sizing: border-box;
}
.photo-swipe-immersive {
    height: 100%;
    min-height: 0;
}
#modal-photo-swipe .pg-snap-scroller,
#modal-photo-swipe .photo-swipe-scroller {
    height: 100%;
    flex: 1 1 auto;
    min-height: 0;
}
#modal-photo-swipe .pg-top-chrome {
    top: calc(10px + var(--sat));
}
#modal-photo-swipe .btn-pg-close {
    font-size: 18px;
}

/* ProductDetail 촬영사진 전체화면 세로 스와이프 뷰어 (레거시 클래스 호환) */
.photo-swipe-scroller {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.photo-swipe-scroller::-webkit-scrollbar {
    display: none;
}
.photo-swipe-slide {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* PlaygroundFeed snap scroll layout — 스크롤러 = 독립 페이지 뷰포트 */
.snap-container,
.pg-snap-scroller {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: #000;
}
.snap-container::-webkit-scrollbar {
    display: none;
}
#slides-wrapper {
    width: 100%;
}
.snap-item,
.pg-snap-slide {
    position: relative;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    width: 100%;
    overflow: hidden;
    background: #000;
    box-sizing: border-box;
    /* JS syncSlideViewport가 --pg-slide-height를 스크롤러 clientHeight로 주입 */
    height: var(--pg-slide-height, 100%);
    min-height: var(--pg-slide-height, 100%);
    max-height: var(--pg-slide-height, 100%);
    flex-shrink: 0;
}

/* Insta360 / Reels 스타일 몰입형 사진 뷰어 */
.pg-immersive-root {
    background: #000;
    color: #fff;
}
.pg-media-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    z-index: 1;
}
.pg-media-img {
    display: block;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.pg-media-stage.is-portrait .pg-media-img,
.pg-media-img.is-portrait {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}
.pg-media-stage.is-landscape .pg-media-img,
.pg-media-img.is-landscape {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.pg-bottom-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 42%;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 45%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}
.pg-top-chrome {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}
.pg-chrome-right-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    pointer-events: auto;
}
.pg-chrome-spacer {
    width: 36px;
    height: 36px;
    display: inline-block;
}
.pg-chrome-btn {
    pointer-events: auto;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.pg-chrome-btn .is-active,
.pg-chrome-btn i.is-active {
    color: #fbbf24;
}
.pg-action-rail {
    position: absolute;
    right: 10px;
    /* 슬라이드가 이미 탭바·safe-area 위를 차지하므로 sab를 다시 더하지 않음 */
    bottom: 36px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    pointer-events: auto;
}
.pg-action-btn {
    border: none;
    background: transparent;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 0;
    min-width: 40px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
}
.pg-action-btn i {
    font-size: 22px;
    line-height: 1;
}
.pg-action-btn span {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.pg-meta-block {
    position: absolute;
    left: 14px;
    right: 64px;
    bottom: 8px;
    z-index: 25;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.pg-meta-block.is-dimmed {
    opacity: 0.15;
}
.pg-meta-block > * {
    pointer-events: auto;
}
.pg-author-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 9999px;
    background: linear-gradient(145deg, #444, #222);
    border: 1.5px solid rgba(255,255,255,0.85);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.pg-author-name {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,0.55);
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pg-follow-btn {
    border: none;
    border-radius: 9999px;
    background: #fff;
    color: #111;
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    cursor: pointer;
    line-height: 1.2;
    flex-shrink: 0;
}
.pg-follow-btn.is-following {
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
}
.pg-caption {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.pg-caption-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.pg-caption.is-expanded .pg-caption-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.pg-caption-tags {
    margin-top: 4px;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pg-caption.is-expanded .pg-caption-tags {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}
.pg-hashtag {
    color: #f5e642;
    font-weight: 700;
    margin-right: 6px;
    cursor: pointer;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.pg-caption-more {
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-size: 12px;
    font-weight: 700;
    padding: 0;
    margin-top: 2px;
    cursor: pointer;
}
.pg-caption-more[hidden] {
    display: none !important;
}
.pg-exif-line {
    color: rgba(255,255,255,0.72);
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
.pg-lens-line {
    color: rgba(255,255,255,0.58);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 2px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.45);
}
/* EXIF 아래 가로 진행바 제거 */
.pg-progress-track,
.pg-progress-fill {
    display: none !important;
}
.pg-detail-card {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 56px;
    z-index: 28;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s ease;
    text-align: left;
}
.pg-detail-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
}
.pg-detail-badge {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
}
.pg-detail-body {
    color: #fff;
}
.pg-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
}
.pg-detail-lens {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

/* Shutter Aperture Iris Flash effect */
@keyframes iris-shutter {
    0% { clip-path: circle(0% at 50% 50%); opacity: 0.9; }
    40% { clip-path: circle(60% at 50% 50%); opacity: 1; }
    100% { clip-path: circle(100% at 50% 50%); opacity: 0; }
}
.shutter-flash {
    animation: iris-shutter 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* LoungeHome custom card order wiggle & slide panels */
@keyframes custom-wiggle {
    0% { transform: rotate(-0.8deg) scale(0.99); }
    50% { transform: rotate(1deg) scale(1.005); }
    100% { transform: rotate(-0.8deg) scale(0.99); }
}
.wiggle-card {
    animation: custom-wiggle 0.28s ease-in-out infinite;
    border: 1.5px dashed #C68642 !important;
    box-shadow: 0 4px 12px rgba(198, 134, 66, 0.12) !important;
    position: relative;
}
.mega-slide-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, padding 0.3s ease, margin 0.3s ease;
    opacity: 0;
    background-color: #FAF8F5;
    border: 0px solid transparent;
    padding: 0 !important;
    margin-top: 0 !important;
}
.mega-slide-panel.open {
    max-height: 800px;
    opacity: 1;
    border: 1px solid #ECE7E1 !important;
    padding: 16px !important;
    margin-top: 10px !important;
}
.grab-handle {
    cursor: grab;
}
.grab-handle:active {
    cursor: grabbing;
}

/* Premium Mount Adapter Chain Styling */
.adapter-chain-card {
    background: linear-gradient(135deg, #fffdf9 0%, #faf8f5 100%);
    border: 1px solid #ece7e1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.adapter-chain-card:hover {
    border-color: rgba(198, 134, 66, 0.4);
    box-shadow: 0 4px 20px -2px rgba(43, 24, 16, 0.05);
    transform: translateY(-1px);
}

/* Drag and Drop & Laser Scanner styles in Album.js */
@keyframes scanner-laser {
  0% { top: 0%; opacity: 0.8; }
  50% { top: 100%; opacity: 1; }
  100% { top: 0%; opacity: 0.8; }
}
.laser-line {
  animation: scanner-laser 2.2s infinite ease-in-out;
}
.dragging {
  opacity: 0.5;
  transform: scale(1.02);
  border: 2px dashed #E58F67 !important;
  box-shadow: 0 10px 25px rgba(229, 143, 103, 0.25);
}

/* ==========================================================================
   Premium Editorial Book-Reader Mode Styles (Lounge Post Detail Fullscreen)
   ========================================================================== */
.editorial-book-modal {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #FAF8F5 !important; /* 서책 배경 미색 크림 */
    z-index: 1000 !important;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: bookFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.editorial-book-modal.open {
    display: flex !important;
}

@keyframes bookFadeIn {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/* 상단 여백 조율: 기존 갭의 반 이하로 압축 */
.book-reader-container {
    flex: 1;
    overflow-y: auto;
    padding: 6px 20px 100px 20px;
    background-color: #FAF8F5;
    -webkit-overflow-scrolling: touch;
}

.book-paper-sheet {
    max-width: 650px;
    margin: 6px auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    color: #2D241E;
    line-height: 1.75;
    letter-spacing: -0.01em;
    background: #FFFFFF;
    border: 1px solid rgba(64, 48, 36, 0.09);
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 4px 24px rgba(64, 48, 36, 0.04);
}

.book-running-header {
    display: none !important;
}

.book-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.35;
    color: #1A110B;
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
    border-bottom: 2px solid rgba(64, 48, 36, 0.1);
    padding-bottom: 16px;
}

.book-author-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #7A695D;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(64, 48, 36, 0.05);
    padding-bottom: 12px;
}

.book-drop-cap {
    display: none !important;
}

.book-paragraph {
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
    text-align: justify;
    word-break: break-word;
    color: #2D241E;
}

.book-running-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(64, 48, 36, 0.08);
    padding-top: 16px;
    margin-top: 36px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
    font-size: 0.72rem;
    color: #7A695D;
}

.btn-close-book {
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Nanum Myeongjo', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #8B7A6C;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid rgba(139, 122, 108, 0.3);
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-close-book:hover {
    color: #261B12;
    border-color: #261B12;
    background-color: rgba(64, 48, 36, 0.03);
}

.book-comments-section {
    max-width: 650px;
    margin: 40px auto 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif;
}

.book-comment-box {
    background: #F8F9FA;
    border-left: 3px solid #C68642;
    padding: 12px 14px;
    margin-bottom: 12px;
    border-radius: 0 8px 8px 0;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #2D241E;
    border: 1px solid rgba(0,0,0,0.03);
    border-left-width: 3px;
}

.book-reply-box {
    background: #F1F3F5;
    border-left: 3px solid #D48C46;
    padding: 9px 12px;
    margin: 6px 0 6px 20px;
    border-radius: 0 8px 8px 0;
    font-size: 0.78rem;
    line-height: 1.6;
    color: #2D241E;
    border: 1px solid rgba(0,0,0,0.02);
    border-left-width: 3px;
}

/* 🏛️ Maree v5.5 뷰파인더 틸트 (2-Way Rotation) 애니메이션 규격 */
.matte-frame img {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  will-change: transform;
}

.matte-frame img.landscape-active {
  /* 90도 회전과 동시에 모바일 가로폭을 가득 채우기 위해 1.4배 줌 스케일링 연산 적용 */
  transform: rotate(90deg) scale(1.4) !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95);
  z-index: 40;
}

/* 📱 모바일 디바이스 뷰포트 최적화: 여백 낭비 소거 및 가로폭 극대화 */
@media (max-width: 600px) {
    .book-reader-container {
        padding: 6px 0px 100px 0px !important; /* 좌우 빈 틈 없애기 */
    }
    
    .book-paper-sheet {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important; /* 화면 가득 채우기 */
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        padding: 16px 14px !important; /* 내부 좌우 패딩을 줄여 본문 가로폭 극대화 */
        box-shadow: none !important; /* 플랫 레이아웃 피팅 */
        background: #FFFFFF !important;
    }
    
    .book-comments-section {
        padding: 0 14px !important; /* 댓글 영역 여백 가독성 보호 */
    }
}
/* 내 앨범 — 다중 선택 체크 배지 */
.album-select-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border-radius: 9999px;
    border: 1.5px solid rgba(255, 253, 249, 0.95);
    background: rgba(43, 24, 16, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFDF9;
    z-index: 2;
}
.album-select-badge.is-on {
    background: #C85A32;
    border-color: #C85A32;
}

/* === My menu — 최상단 Header 탭 === */
.my-view { background: #FAF8F5 !important; padding: 0 !important; }
.header-top-tabs {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 28px;
}
.header-top-tab {
    background: none;
    border: none;
    padding: 2px 0 4px;
    margin: 0;
    font-family: var(--app-header-font-family);
    font-size: 1.05rem;
    font-weight: 500;
    color: #A6968E;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: color 0.15s ease, border-color 0.15s ease;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.header-top-tab.active {
    color: var(--app-header-text-color);
    font-weight: 800;
    border-bottom-color: var(--app-header-text-color);
}
.header-top-tab:focus-visible {
    outline: 2px solid rgba(43, 24, 16, 0.25);
    outline-offset: 2px;
}
.my-alerts-page {
    height: 100%;
    overflow-y: auto;
    /* 게시판(Lounge)과 동일: nav + sab + 30px */
    padding: 12px 16px calc(var(--nav-height) + var(--sab) + 30px);
    box-sizing: border-box;
    background: #FAF8F5;
}
.my-alerts-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}
.my-alerts-filter {
    border: 1px solid #E5DEC9;
    background: #FFFDF9;
    color: #7A6C60;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    cursor: pointer;
}
.my-alerts-filter.active {
    background: #2B1810;
    border-color: #2B1810;
    color: #FFFDF9;
}
.my-alerts-form {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ECE7E1;
}
.my-alerts-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2B1810;
    margin-bottom: 8px;
}
.my-alerts-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.my-alerts-form-row input[type="text"] {
    flex: 1;
    border: 1px solid #E5DEC9;
    background: #FFFDF9;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.78rem;
    color: #2B1810;
    outline: none;
}
.my-alerts-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 0.7rem;
    color: #7A6C60;
}
.my-alerts-btn {
    border: none;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.my-alerts-btn.primary { background: #8B5E3C; color: #fff; }
.my-alerts-btn.ghost {
    background: #FFFDF9;
    color: #5C4A3D;
    border: 1px solid #E5DEC9;
}
.my-alerts-btn.danger {
    background: #FFF5F3;
    color: #B45309;
    border: 1px solid #F0D6C8;
}
.my-alerts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.my-alerts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 4px;
    border-bottom: 1px solid #ECE7E1;
    cursor: pointer;
}
.my-alerts-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.my-alerts-kw {
    font-size: 0.88rem;
    font-weight: 700;
    color: #2B1810;
}
.my-alerts-badge {
    display: inline-flex;
    align-self: flex-start;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}
.my-alerts-badge.on { background: #E8F5E9; color: #2E7D32; }
.my-alerts-badge.off { background: #F3EDE6; color: #7A6C60; }
.my-alerts-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.my-alerts-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #E5DEC9;
    background: #FFFDF9;
    cursor: pointer;
    font-size: 0.85rem;
}
.my-alerts-icon-btn.danger { color: #B45309; }
.my-alerts-empty {
    padding: 28px 12px;
    text-align: center;
    color: #9C8675;
    font-size: 0.78rem;
    line-height: 1.5;
}
.my-alerts-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 12px;
}
.my-alerts-detail-head h2 {
    margin: 0;
    font-size: 1.1rem;
    color: #2B1810;
}
.my-alerts-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.my-alerts-back {
    background: none;
    border: none;
    color: #8B5E3C;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    margin-bottom: 4px;
}
.my-alerts-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2B1810;
    margin: 0 0 10px;
}
.my-alerts-history {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.my-alerts-history-item {
    padding: 10px 0;
    border-bottom: 1px solid #ECE7E1;
}
.my-alerts-history-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.my-alerts-history-top time {
    font-size: 0.65rem;
    color: #9C8675;
}
.my-alerts-history-meta {
    display: flex;
    gap: 10px;
    font-size: 0.7rem;
    color: #7A6C60;
}
.my-alerts-link {
    color: #8B5E3C;
    font-weight: 600;
    text-decoration: none;
}
#my-page-root .showcase-view,
#my-page-root .view-content-container {
    height: 100% !important;
}

/* === C2C compliance / legal === */
.seller-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid #E5DEC9;
}
.seller-badge.personal { background: #F3EDE6; color: #5C4A3D; }
.seller-badge.business { background: #E8EEF5; color: #3D4F66; }

.legal-doc-overlay,
.sell-compliance-gate {
    position: absolute;
    inset: 0;
    z-index: 80;
    background: rgba(43, 24, 16, 0.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.legal-doc-overlay[hidden] { display: none !important; }
.legal-doc-sheet,
.sell-compliance-sheet {
    width: 100%;
    max-height: 82%;
    overflow: auto;
    background: #FAF8F5;
    border-radius: 16px 16px 0 0;
    padding: 16px 18px calc(20px + var(--sab, 0px));
    box-sizing: border-box;
}
.legal-doc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.legal-doc-header h3,
.sell-compliance-sheet h3 {
    margin: 0;
    font-size: 1rem;
    color: #2B1810;
}
.legal-doc-close {
    border: none;
    background: none;
    font-size: 1.4rem;
    color: #7A6C60;
    cursor: pointer;
}
.legal-doc-body {
    font-size: 0.78rem;
    line-height: 1.55;
    color: #5C4A3D;
}
.legal-doc-body h4 {
    margin: 14px 0 6px;
    font-size: 0.8rem;
    color: #2B1810;
}
.legal-doc-body ul { padding-left: 1.1rem; margin: 8px 0; }
.legal-note {
    margin-top: 12px;
    font-size: 0.68rem;
    color: #9C8675;
}
.legal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.legal-chips span {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 999px;
    background: #F3EDE6;
    color: #5C4A3D;
}
.legal-chips.caution span { background: #FFF3E0; color: #B45309; }
.sell-gate-lead {
    font-size: 0.75rem;
    color: #7A6C60;
    line-height: 1.45;
    margin: 8px 0 14px;
}
.sell-gate-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #2B1810;
    margin-bottom: 12px;
}
.sell-gate-field select {
    border: 1px solid #E5DEC9;
    border-radius: 8px;
    padding: 8px 10px;
    background: #FFFDF9;
    font-size: 0.78rem;
}
.sell-gate-kyc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #E5DEC9;
    border-radius: 10px;
    background: #FFFDF9;
    margin-bottom: 12px;
}
.sell-gate-kyc p {
    margin: 4px 0 0;
    font-size: 0.68rem;
    color: #7A6C60;
    font-weight: 500;
}
.sell-gate-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.72rem;
    color: #5C4A3D;
    margin: 8px 0;
}
.sell-gate-note {
    font-size: 0.65rem;
    color: #9C8675;
    margin: 10px 0 14px;
}
.sell-gate-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.sell-gate-btn {
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.sell-gate-btn.primary { background: #8B5E3C; color: #fff; }
.sell-gate-btn.ghost {
    background: #FFFDF9;
    color: #5C4A3D;
    border: 1px solid #E5DEC9;
}
button.linkish {
    border: none;
    background: none;
    padding: 0;
    color: #8B5E3C;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
}