/* ============================================================
   common.css — 00.system 전 페이지 공통 (리셋 + 유틸리티)
   페이지별 색/토큰/컴포넌트는 각 페이지 CSS(theme/onboarding/vote)에서.
   모든 템플릿에서 페이지 CSS '앞'에 로드한다.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Pretendard',
                 'Segoe UI', Roboto, 'Noto Sans KR', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; cursor: pointer; }

/* 공통 유틸리티 */
/* display 토글 유틸 — 클래스를 중첩 선택해 specificity 를 (0,2,0) 으로 올려
   단일 클래스의 표시 규칙(.u-sheet-backdrop{display:flex} 등)을 이긴다. !important 대신 cascade 로 해결. */
.hidden.hidden { display: none; }

/* 화면엔 안 보이지만 스크린리더/검색엔진엔 노출 (SEO·접근성용 h1 등) */
.u-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 말랑이체 — 자체 호스팅(/static/fonts). 전 페이지 공용(인트로·축하 메시지 등). */
@font-face {
    font-family: 'GeekbleMalrangiche';
    src: url('/fonts/GeekbleMalrangiche.woff2') format('woff2');
    font-display: swap;
}

/* ====== 전체화면 폭죽 (축하 — "첫 ~") · 맵/투표 공용 ====== */
.celebrate { position: fixed; inset: 0; z-index: 9000; pointer-events: none; opacity: 0; transition: opacity .3s; }
.celebrate.is-on { opacity: 1; }
.celebrate__confetti { position: absolute; inset: 0; overflow: hidden; }
.celebrate__confetti i {
    position: absolute; top: -10%; border-radius: 2px;
    animation-name: confetti-fall; animation-timing-function: ease-in; animation-iteration-count: 1;
}
@keyframes confetti-fall { 0% { top: -10%; opacity: 1; } 100% { top: 110%; opacity: .85; } }
.celebrate__msg {
    position: absolute; left: 50%; top: 40%;
    transform: translate(-50%, -50%) scale(.6); opacity: 0;
    font-family: 'GeekbleMalrangiche', system-ui, sans-serif;
    font-size: 34px; color: #fff; letter-spacing: .5px;
    text-shadow: 0 6px 28px rgba(0, 0, 0, .5);
    transition: transform .5s cubic-bezier(.2,.8,.25,1), opacity .35s;
}
.celebrate.is-on .celebrate__msg { transform: translate(-50%, -50%) scale(1); opacity: 1; }