/* 0. 웹 폰트 정의 */
@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Isamanru-Btn';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
    unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}

@font-face {
    font-family: 'GothicA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'GothicA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GothicA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* 1. 디자인 시스템 변수 */
:root {
    --apple-bg: #FBFBFD;
    --apple-card: #FFFFFF;
    --apple-text: #1D1D1F;
    --apple-sub: #86868B;
    --apple-gray: #F5F5F7;
    --apple-blue: #0071E3;
    --apple-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.04);
    /* Z-Index 시스템 정의 */
    --z-base: 1;
    --z-fixed: 100;
    --z-overlay: 900;
    --z-sheet: 1000;
    --z-auth: 2000;
    --z-confirm: 3000;
    --z-toast: 4000;
}

/* 2. 공통 타이포그래피 그룹화 */
/* 메인 서체: Isamanru (영문은 Elms Sans) */
body,
.quote,
.q-text,
.fav-quote,
.browse-label {
    font-family: 'Elms Sans', 'Isamanru', -apple-system, BlinkMacSystemFont, sans-serif;
}

.page-header h2,
.behind-popup-scroll h1 {
    font-family: 'Isamanru', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 정보성 서체: GothicA1 (영문은 Elms Sans) */
.topic-badge,
.tap-guide,
.q-label,
.history-date,
textarea,
.auth-header p,
.auth-footer,
.detail-author,
.thought-meta,
.detail-quote,
.fav-author,
.browse-count,
.day-item,
.day-num,
.sheet-question-preview,
.gothic-text,
.behind-popup-badge,
.section-label,
.toast,
.auth-input,
.history-author-line {
    font-family: 'GothicA1', sans-serif;
}

/* 버튼 전용 서체 */
.btn,
.mini-btn,
.auto-fill-btn,
.social-btn,
.confirm-btn {
    font-family: 'Isamanru-Btn', 'GothicA1', sans-serif !important;
}

/* 3. 공통 인터랙션 */
.btn:active,
.mini-btn:active,
.social-btn:active,
.confirm-btn:active,
.filter-dot:active,
.index-sticker:active,
.mini-dot:active,
.browse-item:active,
.day-item:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* 4. 기본 설정 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    background: var(--apple-bg);
    color: var(--apple-text);
    line-height: 1.5;
    overflow: hidden;
}

.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top) 24px 0;
}

.app-title {
    font-family: 'Isamanru', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 28px;
}

.q-label {
    font-size: 14px;
    color: var(--apple-sub);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.8;
}

.tap-guide {
    position: absolute;
    bottom: 50px;
    font-size: 13px;
    color: #C7C7CC;
    font-weight: 500;
    opacity: 0.8;
    animation: pulse 2s infinite;
}

.btn {
    flex: 1;
    height: 56px;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s var(--apple-ease);
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: env(safe-area-inset-top) 24px 0;
    /* 하단 패딩 제거 */
}

/* 3. 페이지 구조 (SPA) */
.page {
    display: none;
    width: 100%;
    height: 100dvh;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
    animation: fadeIn 0.3s var(--apple-ease);
    background: var(--apple-bg);

}

.page.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.99);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 4. 헤더 */
header {
    padding: 0;
}

.brand-header {
    margin-bottom: 30px;
    /* 브랜드 헤더 아래 여백 추가 */
}

/* 5. 메인 카드 */
.stage {
    position: absolute;
    bottom: calc(220px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 360px;
    height: 62vh;
    /* 높이를 55vh에서 62vh로 확대 */
    max-height: calc(100vh - 300px);
    /* 최대 높이 제한 완화 */
    perspective: 1200px;
    display: flex;
    flex-direction: column;
}

.card-container {
    width: 100%;
    flex: 1;
    /* height: 100% 대신 flex: 1을 사용하여 남은 공간을 모두 차지 */
    display: flex;
    flex-direction: column;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s var(--apple-ease), height 0.4s var(--apple-ease);
    cursor: pointer;
}

/* 읽을거리 확장 시 */
.card.behind-expanded {
    height: 155%;
    /* 확장 시 조금 더 여유 확보 */
}

.card.is-flipped {
    transform: rotateY(180deg);
}

/* 확장 버튼 디자인 (카드 하단 부착형 눈속임) */
.expand-action-btn {
    width: 100%;
    background: #1D1D1F;
    /* 애플 블랙 */
    color: white;
    border: none;
    padding: 16px 20px;
    border-radius: 0 0 10px 10px;
    /* 하단만 둥글게 */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    z-index: 5;
    transition: all 0.3s;
    white-space: nowrap;
    margin-top: -24px;
    /* 카드 하단 모서리와 겹치게 하여 부착 효과 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.expand-action-btn.ready-to-flip {
    background: var(--apple-blue);
}

.expand-action-btn:active {
    transform: translateY(1px);
    opacity: 0.9;
}

/* 읽을거리 확장 영역 스타일 */
.behind-area {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s var(--apple-ease);
    margin-top: 0;
}

.card.behind-expanded .behind-area {
    max-height: 500px;
    opacity: 1;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.behind-area p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--apple-sub);
    word-break: keep-all;
    text-align: left;
}

/* 4. 카드가 뒤집혔을 때 강제로 투명도 조절 (가장 확실한 방법) */
.card.is-flipped .index-stack {
    opacity: 0;
    pointer-events: none;
    /* 뒤집힌 상태에서 클릭 방지 */
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    background: var(--apple-card);
    border-radius: 10px;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow-soft);
}

.card-face .index-stack {
    position: absolute;
    right: 16px;
    top: -30px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    z-index: 50;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* 사파리 필수 */
    /* 2. 카드의 앞쪽으로 살짝 띄워 3D 계층 명확화 */
    transform: translateZ(1px);
    /* 3. 투명도 전환 효과 (선택 사항) */
    transition: opacity 0.4s var(--apple-ease), transform 0.2s;
}

.card-back {
    transform: rotateY(180deg);
}

.quote {
    font-size: 22px;
    text-align: center;
    word-break: keep-all;
    letter-spacing: -0.5px;
}

.author {
    margin-top: 24px;
    font-size: 14px;
    color: var(--apple-sub);
}

.question {
    width: 100%;
    display: flex;
    flex-direction: column;
    /* 세로 정렬 */
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* 라벨과 질문 사이 간격 */
    padding-bottom: 40px;
}

.q-text {
    font-size: 22px;
    /* 폰트 크기 키움 */
    color: #1D1D1F;
    /* 진한 검정 */
    line-height: 1.5;
    /* 줄간격 여유 있게 */
    word-break: keep-all;
    /* 단어 단위 줄바꿈 */
    text-align: center;
}

@keyframes pulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

/* 6. 인덱스 UI (가로 확장 + 제거 버튼) */
.index-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 50;
    align-items: flex-end;
    /* position: absolute; -> 제거됨 (컨텍스트에 따라 다름) */
}

.add-btn-wrapper {
    display: flex;
    flex-direction: row;
    /* 팔레트가 버튼의 좌측으로 확장되도록 설정 */
    align-items: flex-start;
    gap: 8px;
    position: relative;
}

.inline-palette {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.4s cubic-bezier(0.2, 1, 0.2, 1), opacity 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    height: 38px;
    display: flex;
    align-items: center;
    margin-top: -2px;
    /* 북마크 상단 위치에 맞춤 */
    max-height: 38px;
    /* 팔레트가 확장될 때 북마크를 가리지 않도록 위치 조절 */
    background: rgba(255, 255, 255, 0.98);
}

.inline-palette.expanded {
    max-width: 280px;
    opacity: 1;
    border: 1px solid #E5E5E7;
    padding: 0 6px;
}

.palette-grid {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 0 6px;
}

.mini-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    flex-shrink: 0;
}

.mini-dot:active {
    transform: scale(0.9);
}

/* 삭제 버튼 스타일 */
.mini-dot.remove-btn {
    background-color: #F5F5F7;
    border: 1px solid #E5E5E7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mini-dot.remove-btn svg {
    width: 14px;
    height: 14px;
    stroke: #86868B;
    stroke-width: 2;
}

/* 북마크(리본) 기본 디자인 */
.index-sticker {
    width: 35px;
    height: 30px;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* [NEW] 컬러 선택 전 (추가 버튼) 스타일 */
/* .index-sticker.add-btn {
    background: transparent; 
    border: 1.5px dashed #D1D1D6; 
    box-shadow: none;            
    filter: none;                
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #C7C7CC; 
    font-size: 18px;
    padding-top: 6px; 
} */

.index-sticker:not(.add-btn) {
    clip-path: inset(-10px -10px 0px -10px);
    /* 그림자 방향을 위쪽으로 살짝 옮겨서 더욱 자연스럽게 조정합니다 (y축을 -1px로 변경) */
    filter: drop-shadow(0 -1px 3px rgba(0, 0, 0, 0.12));
}

.index-sticker svg {
    display: block;
}

.index-sticker:active {
    transform: translateY(2px);
}

/* [style.css] 가로형 인덱스 스타일 추가 */

/* 꼬리물기 시트 전용: 가로형으로 90도 회전 */
.index-stack.horizontal .index-sticker {
    transform: rotate(90deg);
    /* 오른쪽으로 90도 회전 */
    transform-origin: center;
}

/* 회전했을 때 내부의 '+' 텍스트가 같이 돌아가지 않도록 보정 */
.index-stack.horizontal .index-sticker svg text {
    transform: rotate(-90deg);
    /* 얇아진 폭(20px)에 맞춘 중심점 좌표 */
    transform-origin: 10px 17px;
}

.index-sticker.add-btn svg text {
    opacity: 0.6;
}

/* 모바일 키보드 활성화 시 바텀 시트(.sheet)의 키(높이)를 강제 리사이즈 */
/* 바텀 시트가 활성화된 상태(.active)에서만 키보드 윗선에 맞춰 크기 쪼그라들기 적용 */
body.keyboard-visible.active .sheet {
    bottom: var(--keyboard-height, 0px) !important; /* 🌟 키보드 바로 위로 배치 */
    max-height: calc(100dvh - var(--keyboard-height, 0px) - 20px) !important; /* 🌟 핵심: 전체 높이에서 키보드 높이만큼 시트의 키를 강제 압축! */
    min-height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

body.keyboard-visible.active .sheet textarea {
    height: 120px !important; /* 텍스트 입력창 높이도 120px로 압축하여 저장 버튼 공간을 완벽 확보! */
    transition: height 0.3s var(--apple-ease) !important;
}

/* 활성화되지 않은 바텀 시트는 키보드가 뜨더라도 화면 아래 숨김 철저히 유지 */
body.keyboard-visible:not(.active) .sheet {
    bottom: -100% !important;
}


/* 가로형일 때 하단 그림자 제거 (회전했으므로 시각적으로는 왼쪽/오른쪽 면이 됨) */
.index-stack.horizontal .index-sticker:not(.add-btn) {
    /* 회전 후 카드 면과 닿는 부분(원래의 하단)의 그림자 제거 */
    clip-path: inset(-10px -10px -10px 0px);
    filter: drop-shadow(1px 0px 2px rgba(0, 0, 0, 0.03));
}

/* 가로형 인덱스의 팔레트 위치 조정 */
.index-stack.horizontal .inline-palette {
    position: absolute;
    right: 40px;
    /* 인덱스 왼쪽에 나타나도록 */
    top: 0;
    margin-top: 0;
}

.btn-outline {
    background: rgba(255, 255, 255, 0.8);
    /* 반투명 배경 */
    border: 1px solid var(--apple-text);
    color: var(--apple-text);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    /* 부드러운 그림자 */
}

.btn-fill {
    background: #1D1D1F;
    /* 애플 블랙 */
    color: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* 깊이감 있는 그림자 */
}

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #1D1D1F;
    /* 푸터 높이를 65px로 재조정하여 모바일 스크롤 영역 최적화 */
    height: calc(65px + env(safe-area-inset-bottom));
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 1000;
    box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1);
}

/* 탭 아이템 (아이콘 래퍼) */
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 100%;
    color: #86868B;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-icon {
    width: 26px;
    height: 26px;
    /* 이미지가 찌그러지지 않도록 비율 유지 */
    object-fit: contain;
    transition: all 0.2s var(--apple-ease);
}

.tab-item i {
    font-size: 26px;
    transition: transform 0.2s ease;
}

.tab-item.active .tab-icon {
    transform: scale(1.05);
}

/* 탭 활성화 상태 (흰색) */
.tab-item.active {
    color: #FFFFFF;
    /* 선택 시 흰색 */
    background: transparent;
    box-shadow: none;
    transform: none;
    /* 튀어나오는 효과 제거 */
}

/* 커스텀 SVG 아이콘 처리 */
.custom-tab-icon {
    width: 24px;
    height: 24px;
    filter: grayscale(1) brightness(0.7);
    /* 기본 회색조 */
    transition: all 0.2s;
}

.tab-item.active .custom-tab-icon {
    filter: grayscale(0) brightness(2);
    /* 활성화 시 흰색에 가깝게 밝기 조정 */
    transform: scale(1);
    opacity: 1;
}

.home-actions {
    position: absolute;
    bottom: calc(105px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 360px;
    display: flex;
    gap: 12px;
    padding: 0 16px;
}


.mini-btn {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 15px;
    border: 1px solid #E5E5E7;
    background: white;
    color: #666;
    cursor: pointer;
}

.mini-btn.primary {
    background: #1D1D1F;
    color: white;
    border: none;
}

/* 무한 스크롤 로딩 표시 */
.loading-indicator {
    text-align: center;
    padding: 20px;
    color: #999;
    font-size: 12px;
}

/* 8. 서브 페이지 스타일 */
.page-header {
    padding: 60px 24px 20px;
    /* 파싱 실패 대비 폴백 */
    padding-top: calc(env(safe-area-inset-top) + 30px);
    /* 모던 브라우저 안전 계산 */
    position: sticky;
    top: 0;
    background: var(--apple-bg);
    z-index: 10;
}

.page-header h2 {
    font-size: 32px;
    font-weight: 700;
}

.content-scroll {
    padding: 0 24px;
    overflow-y: auto;
    height: calc(100vh - 180px);
    height: calc(100dvh - 180px);
    /* 모던 동적 뷰포트 완벽 호환 */
}

.empty-state {
    text-align: center;
    color: #999;
    margin-top: 50px;
    font-size: 14px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #E5E5E7;
}

/* 9. 시트 오버레이 */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: var(--z-overlay);
    backdrop-filter: blur(4px);
}

.sheet {
    /* 기존 스타일 유지하면서 min-height 추가 */
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 30px 30px 0 0;
    padding: 32px 24px calc(42px + env(safe-area-inset-bottom));
    z-index: var(--z-sheet);
    transition: 0.4s var(--apple-ease);

    min-height: 55vh;
    display: flex;
    flex-direction: column;
}

.active .overlay {
    opacity: 1;
    visibility: visible;
}

.active .sheet {
    bottom: 0;
}

.handle {
    width: 36px;
    height: 5px;
    background: #D1D1D6;
    border-radius: 3px;
    margin: -12px auto 24px;
}

textarea {
    width: 100%;
    height: 220px; /* 기본 높이를 다소 컴팩트하게 축소 */
    max-height: calc(100dvh - 280px); /* 🌟 핵심: 키보드가 올라와 뷰포트(dvh)가 축소되면 텍스트 박스도 유연하게 축소되도록 유도! */
    line-height: 1.6;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    padding: 20px;
    font-size: 16px;
    outline: none;
    font-family: inherit;
    box-sizing: border-box; /* 패딩 영역 포함 */
}


.auto-fill-btn {
    background: none;
    border: none;
    color: #86868B;
    font-size: 13px;
    text-decoration: underline;
    margin-bottom: 12px;
    cursor: pointer;
    align-self: center;
    /* 중앙 정렬 */
    padding: 8px;
    transition: color 0.2s;
}

.auto-fill-btn:active {
    color: #1D1D1F;
}

/* 시트 내 질문 미리보기 스타일 */
.sheet-question-preview {
    font-size: 13px;
    color: #86868B;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 24px;
    padding: 0 10px;
    word-break: keep-all;
}

/* 10. 로그인 오버레이 */
.auth-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* 배경 어둡게 */
    backdrop-filter: blur(8px);
    z-index: var(--z-auth);
    display: flex;
    justify-content: center;
    align-items: center;
    /* 중앙 정렬 */
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.auth-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 로그인 카드 */
.auth-card {
    width: 100%;
    max-width: 340px;
    background: white;
    border-radius: 28px;
    padding: 40px 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    text-align: center;
    position: relative;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.auth-overlay.active .auth-card {
    transform: translateY(0);
}

.close-auth-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 8px;
}

/* 헤더 영역 */
.auth-logo {
    font-size: 48px;
    margin-bottom: 16px;
}

.auth-header h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #1D1D1F;
}

.auth-header p {
    font-size: 15px;
    color: #86868B;
    line-height: 1.5;
    margin-bottom: 32px;
}

/* 소셜 버튼 공통 */
.social-btn {
    width: 100%;
    height: 50px;
    border-radius: 12px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    cursor: pointer;
    transition: transform 0.1s;
    position: relative;
}

.social-btn .symbol {
    position: absolute;
    left: 20px;
    font-size: 16px;
}

/* 브랜드별 컬러 */
.social-btn.kakao {
    background: #FEE500;
    color: #000000;
}

.social-btn.naver {
    background: #03C75A;
    color: #FFFFFF;
}

.social-btn.google {
    background: #FFFFFF;
    border: 1px solid #E5E5E7;
    color: #000000;
}

.social-btn.apple {
    background: #000000;
    color: #FFFFFF;
}

.social-btn.email {
    background: #1D1D1F;
    color: #FFFFFF;
}

/* 구분선 */
.divider {
    display: flex;
    align-items: center;
    color: #C7C7CC;
    font-size: 12px;
    margin: 20px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E5E5E7;
}

.divider span {
    padding: 0 10px;
}

/* 푸터 */
.auth-footer {
    font-size: 11px;
    color: #C7C7CC;
    margin-top: 20px;
}

.auth-footer a {
    color: #86868B;
    text-decoration: underline;
}

/* 11. 커스텀 모달 버튼 스타일 */
.confirm-btn.btn-cancel {
    background: #F2F2F7;
    color: #1D1D1F;
}

.confirm-btn.btn-exit {
    background: #FF3B30;
    color: white;
}

.confirm-btn.btn-primary {
    background: #007AFF;
    color: white;
}

/* 13. Behind the Quote 팝업 스타일 */
.behind-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #FBFBFD;
    /* 앱 배경색 */
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center bottom;
    transform: scale(0.95);
    /* 급격한 스케일 변화 대신 부드러운 확대 */
}

.behind-popup-overlay.active {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.behind-popup-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top) 28px 24px;
    /* 패딩 소폭 확대 */
}

.behind-popup-header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1.5px solid #F2F2F7;
}

.behind-popup-badge {
    font-size: 13px;
    font-weight: 800;
    color: #102A43;
    /* 고급스러운 딥 네이비 */
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.close-icon-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #1D1D1F;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    transition: opacity 0.2s;
}

.close-icon-btn:active {
    opacity: 0.5;
}

.gothic-text {
    font-family: 'GothicA1', sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.2px;
}

.behind-popup-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 48px 0;
    -webkit-overflow-scrolling: touch;
}

.behind-popup-scroll h1 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 56px;
    word-break: keep-all;
    color: #1D1D1F;
    /* 선명한 블랙 */
    letter-spacing: -1px;
}

.behind-section {
    margin-bottom: 56px;
    position: relative;
    padding-left: 20px;
    border-left: 2px solid #102A43;
    /* 네이비 포인트 세로선 */
}

.section-label {
    font-size: 18px;
    /* 13px -> 16px 확대 */
    font-weight: 700;
    color: #102A43;
    /* 네이비 컬러 적용 */
    margin-bottom: 16px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.behind-section p {
    font-size: 17px;
    line-height: 1.7;
    color: #3A3A3C;
    word-break: keep-all;
}

.behind-section.fact-check {
    background: #F8F9FA;
    /* 매우 연한 그레이 배경 */
    padding: 32px 24px;
    border-radius: 20px;
    border: 1px solid #E5E5E7;
    box-shadow: 0 10px 30px rgba(16, 42, 67, 0.05);
    /* 네이비톤이 섞인 은은한 그림자 */
    margin-top: 64px;
}

.behind-section.fact-check .section-label {
    color: #1D1D1F;
    /* 팩트체크 라벨은 블랙으로 강조 */
}

.behind-section.fact-check p {
    font-size: 15px;
    color: #48484A;
}

#toast-container {
    position: fixed;
    bottom: 120px;
    /* 탭바 위쪽 적절한 위치 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.toast {
    background: rgba(29, 29, 31, 0.9);
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.auth-input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid #E5E5EA;
    background: #F2F2F7;
    font-size: 15px;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
    /* 패딩이 너비를 넘지 않게 함 */
}

.auth-input:focus {
    border-color: var(--apple-blue);
    background: #FFF;
}

.auth-toggle-text {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #86868B;
}

.auth-toggle-text a {
    color: var(--apple-blue);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

/* 커스텀 확인창(Confirm Modal) 스타일 */
.custom-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-confirm);
    opacity: 0;
    visibility: hidden;
    transition: 0.2s;
}

.custom-confirm-overlay.show {
    opacity: 1;
    visibility: visible;
}

.confirm-box {
    background: white;
    width: 280px;
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    transform: scale(0.9);
    transition: 0.2s;
}

.custom-confirm-overlay.show .confirm-box {
    transform: scale(1);
}

.confirm-box p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 24px;
    word-break: keep-all;
}

.confirm-buttons {
    display: flex;
    gap: 10px;
}

.confirm-btn {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-cancel {
    background: #F2F2F7;
    color: #1D1D1F;
}

.btn-exit {
    background: #FF3B30;
    color: white;
}

/* ==========================================================================
   🌱 생각의 홀씨 (Spore) 전용 디자인 시스템 (Apple-like Glassmorphism)
   ========================================================================== */

/* 1. 헤더 Spore 뱃지 */
.spore-badge {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-family: 'Isamanru', sans-serif;
    font-weight: 700;
    color: #1D1D1F;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.spore-badge:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.spore-badge:hover .spore-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* 2. Spore 툴팁 */
.spore-tooltip {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(29, 29, 31, 0.95);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1000;
}

.spore-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 4px 4px;
    border-style: solid;
    border-color: transparent transparent rgba(29, 29, 31, 0.95);
}

/* 3. 톡톡 튀는 스케일 애니메이션 */
.scale-bump {
    animation: scaleBumpKeyframe 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes scaleBumpKeyframe {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }

    100% {
        transform: scale(1);
    }
}

/* 4. Spore 모달 오버레이 */
.spore-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.spore-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* 5. Spore 모달 시트 */
.spore-modal-sheet {
    width: 100%;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    padding: 24px 24px calc(34px + env(safe-area-inset-bottom)) 24px;
    box-shadow: 0 -15px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-sizing: border-box;
}

.spore-modal-overlay.active .spore-modal-sheet {
    transform: translateY(0);
}

.spore-modal-handle {
    width: 38px;
    height: 5px;
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
    margin: -8px auto 20px auto;
}

.spore-modal-title {
    font-family: 'Isamanru', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1D1D1F;
    text-align: center;
    margin: 0 0 8px 0;
}

.spore-modal-desc {
    font-family: 'Gothic A1', sans-serif;
    font-size: 13.5px;
    line-height: 1.6;
    color: #86868B;
    text-align: center;
    margin: 0 0 24px 0;
    word-break: keep-all;
}

/* 6. 상품 리스트 및 카드 */
.spore-product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 2px;
}

.spore-product-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 18px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.spore-product-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.015);
    border-color: rgba(0, 122, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.08);
}

.spore-product-card:active {
    transform: scale(0.99);
}

.product-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.product-badge {
    font-size: 10px;
    font-weight: 700;
    color: #007AFF;
    background: rgba(0, 122, 255, 0.08);
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.product-badge.premium {
    color: #D4AF37;
    background: rgba(212, 175, 55, 0.12);
}

.product-badge.single {
    color: #34C759;
    background: rgba(52, 199, 89, 0.08);
}

.product-name {
    font-family: 'Isamanru', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1D1D1F;
    margin: 0;
}

.product-desc {
    font-family: 'Gothic A1', sans-serif;
    font-size: 12px;
    color: #86868B;
    margin: 0;
}

.product-price {
    font-family: 'Isamanru', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1D1D1F;
}

/* 7. 모달 닫기 버튼 */
.spore-modal-close-btn {
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: rgba(0, 0, 0, 0.02) !important;
    color: #1D1D1F !important;
    font-family: 'Isamanru', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 16px !important;
}

.spore-modal-close-btn:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}