/* ==========================================================================
   공감퀴즈 공통 테마 — 파스텔 그라디언트 배경 + 글래스모피즘
   index.css / room.css 보다 먼저 로드한다.
   ========================================================================== */
html, body { overflow-x: hidden; }

body {
    font-family: 'Noto Sans KR', sans-serif;
    color: #1f2937;
    background: linear-gradient(135deg, #FFF0F5 0%, #FFE4E1 50%, #F3E5F5 100%);
    background-attachment: fixed;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
}

/* --- 글래스 표면 --- */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.glass-pill {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

/* --- 하트 파티클 캔버스 (hearts.js) --- */
/* 본문 래퍼가 z-10 으로 쌓임 맥락을 만들기 때문에, 캔버스를 그 위에 두면
   공유 팝업(z-50)까지 하트가 덮어버린다. 배경 레이어로 유지한다. */
#heartCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* --- 스크롤바 --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 181, 167, 0.1); }
::-webkit-scrollbar-thumb { background: rgba(255, 71, 126, 0.3); border-radius: 10px; }

/* --- 메인 버튼 --- */
.btn-primary {
    background: linear-gradient(135deg, #FF85A1, #FF477E);
    box-shadow: 0 6px 18px rgba(255, 71, 126, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 71, 126, 0.38); }
.btn-primary:active:not(:disabled) { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* --- 보조 버튼 (진한 보라) --- */
.btn-secondary {
    background: linear-gradient(135deg, #B388FF, #8B5CF6);
    box-shadow: 0 6px 18px rgba(139, 92, 246, 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}
.btn-secondary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(139, 92, 246, 0.38); }
.btn-secondary:active:not(:disabled) { transform: scale(0.97); }
.btn-secondary:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

/* --- 원형 아이콘 버튼 --- */
.btn-icon {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(255, 133, 161, 0.22);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-icon:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 133, 161, 0.35); }
.btn-icon:active { transform: scale(0.94); }

/* 아이콘 + 라벨 묶음 — 감싼 쪽에 호버해도 아이콘이 반응하도록 */
.icon-action .btn-icon { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.icon-action:hover .btn-icon { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 133, 161, 0.35); }
.icon-action:active .btn-icon { transform: scale(0.94); }

/* --- 화면 전환 --- */
.fade-in { animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }