/* ==========================================================================
   view_transitions.css V3 — iframe shell + per-tab cache (PM 보고 2026-05-05)

   설계: 4개 탭별 iframe 을 컨테이너(절대좌표 오버랩)로 유지. 활성 탭만 visible.
        탭 전환 시 iframe 재로드 X → 카운터/상태/스크롤 위치 유지.

   적용:
   - index.html: shell + #spa-frame-container 자동 생성 (view_transitions.js)
   - 4개 콘텐츠 페이지: iframe 안에서 자기 하단 nav 자동 숨김
   ========================================================================== */

/* ── shell 의 iframe 컨테이너 (per-tab iframe 오버랩 영역) ── */
#spa-frame-container {
    position: relative;
    width: 100%;
    /* 메인 영역 만큼 차지 — 하단 nav 빼고 */
    height: calc(100dvh - var(--fsite-bottom-nav-height, 64px) - env(safe-area-inset-bottom));
    display: none;
    /* transition 없음 (snap) — nav 슬라이드 transform 과 동시에 height transition 발동
       시 layout thrashing 으로 프레임 드랍 (PM 보고 2026-05-06) */
}
body.spa-shell--frame-active #spa-frame-container {
    display: block;
}
/* nav 가 슬라이드 다운된 상태: 컨테이너 height = 100dvh 로 확장 — 즉시 snap */
body.nav-hidden #spa-frame-container {
    height: calc(100dvh - env(safe-area-inset-bottom));
}

/* ── 개별 iframe (탭별 인스턴스) ──
   모두 컨테이너 안에 절대좌표로 겹쳐 배치. 활성 탭만 visible.
   짧은 80ms opacity fade — 뒤로가기 시 paint jitter 가림. 체감 instant 유지.
   (PM 보고 2026-05-06: 뒤로가기 시 전 화면이 잠깐 깨진 상태로 보임 → fade 로 가림) */
.spa-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--fsite-color-bg, #f6f6f6);
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s linear;
}
.spa-frame.spa-frame--visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: 2;
}

/* iframe 활성 시 인라인 홈 콘텐츠 숨김 + shell 헤더(BUKBUID 로고)도 숨김
   → 각 페이지가 자기 헤더로 정체성 표현 (홈일 때만 BUKBUID 헤더) */
.spa-shell--frame-active #fsite-app-main,
.spa-shell--frame-active #fsite-app-header {
    display: none;
}

/* ── SPA Phase 1 (방어책 적용) — 인라인 section 컨테이너 ─────────────────
   설계 의도: iframe 시스템과 1:1 미러링되는 inline section 컨테이너.

   ⚠ 1차 시도 실패 교훈 (2026-05-08):
   - 1차에선 #spa-inline-container 를 position:relative + 100dvh height 로 했더니
     #spa-frame-container 와 vertical stack 되어 페이지가 2x viewport 길이가 됨.
     → 사용자가 빈 공간 보고 "게시물 사라짐"으로 오인.
   - 2차(현재): 컨테이너는 frame-container 와 같은 자리에 OVERLAP.
     position:relative 는 유지하되 display 는 JS 가 명시 제어
     (showInlineSection 호출 시만 display:block).
     → page height 안 늘어남.

   data-spa-inline-ready=1 마킹 안 된 section 은 자동으로 iframe 폴백. */
#spa-inline-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 3;
    pointer-events: none; /* section--visible 만 활성화 */
}
#spa-inline-container.spa-inline-active {
    display: block;
    pointer-events: auto;
}
.spa-section {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--fsite-color-bg, #f6f6f6);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.08s linear;
}
.spa-section.spa-section--visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: 2;
}

/* 대추봇 마스코트는 홈에서만 노출 — 다른 탭(소통/채팅/마이) 에서는 숨김
   (PM 보고 2026-05-05 V3) */
.spa-shell--frame-active #cbFab {
    display: none !important;
}

/* iframe 안 페이지에서 자기 하단 nav 숨김 (view_transitions.js 가 body 에 클래스 부여) */
body.spa-frame-child #fsite-app-bottom-nav {
    display: none !important;
}

/* iframe 안 페이지에서는 헤더 위치도 sticky → static (이미 부모 헤더 영역 없음) */
body.spa-frame-child {
    padding-bottom: 0 !important;
}

/* ====================================================================
   Material Symbols 텍스트 선택 차단 (PM 보고 2026-05-06 — V3 최종)
   배경: V1(user-select: none), V2(!important + touch-callout) 모두 PWA Chrome
   Android 에서 우회됨이 PM 환경에서 확인. 또한 글리프 codepoint 치환 후에도
   Chrome 이 '働' 같은 다른 글자로 임의 매핑해 검색 박스 띄움 — 즉 단어 내용
   무관하게 텍스트 영역이면 무조건 잡는 동작.
   V3 해결: pointer-events: none 을 모든 material-symbols 에 적용. Chrome 의
   Touch-to-Search 는 pointer 이벤트가 안 닿는 영역은 텍스트 선택 후보에서 제외.
   click 은 부모(button/a/div onclick) 가 받음 — 기존 hit-test 와 동일 동작.
   예외: 직접 onclick 가진 11개 아이콘만 pointer-events: auto 복원.
   ==================================================================== */
.material-symbols-rounded,
.material-symbols-outlined,
.material-symbols-sharp,
.material-icons,
[class*="material-symbols"],
[class*="material-icons"] {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-modify: read-only !important;
    pointer-events: none !important;
    cursor: default;
    font-feature-settings: 'liga' on;
}

/* 직접 onclick 가진 아이콘만 클릭 가능 복원 (모달 X 버튼 등 11개) */
.material-symbols-rounded[onclick],
.material-symbols-outlined[onclick],
.material-symbols-sharp[onclick],
.material-icons[onclick] {
    pointer-events: auto !important;
}