/* ========================================================= /faq (도움말) 모바일 전용 - PC 영향 0 (view에서만 로드 + media) - html/body 직접 조작 금지 - Peak 프레임(내역/마이) 톤 재사용(peak-history.mobile.css) ========================================================= */ @media (max-width: 860px){ /* ======================================================= 상단 빈공간 제거 (/profile·/tickets와 동일) - 공용 모바일 CSS에서 body/content-inner에 상단 여백이 들어가는 케이스 차단 ======================================================= */ body{ padding-top: 0 !important; } .content-inner{ padding-top: 0 !important; } /* ======================================================= 공용 상단 헤더 숨김 (이중 헤더/상단 여백 원인 차단) - 이 파일은 /faq에서만 로드되므로 타 페이지 무영향 ======================================================= */ #mobileNav, .mobile-nav, .status-bar, header.navbar.js-header, .header.top, #headerMenuCollapse{ display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } /* 모바일에서는 PC FAQ DOM 완전 숨김 */ #pcFaqWrap{ display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } /* 레이아웃 여백 제거(FAQ 페이지에서만 로드되는 CSS라 안전) */ .layout-body, .content-wrap, .content-inner, .content-main{ margin-top: 0 !important; padding-top: 0 !important; } .content-inner{ padding: 0 !important; max-width: none !important; } .content-header{ display: none !important; } /* 모바일 컨테이너 */ #peakFaqMobile{ display: block !important; } #peakFaqMobile[hidden]{ display: none !important; } #peakFaqMobile, #peakFaqMobile .peak-history{ width: 100% !important; max-width: none !important; margin: 0 !important; } #peakFaqMobile .peak-history{ min-height: 100vh !important; min-height: 100svh !important; min-height: 100dvh !important; display: flex !important; flex-direction: column !important; background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important; } #peakFaqMobile .peak-charge__appbar{ flex: 0 0 auto !important; min-height: 72px !important; padding: calc(38px + env(safe-area-inset-top)) 16px 14px !important; display: grid !important; grid-template-columns: 40px 1fr 40px !important; align-items: center !important; justify-items: center !important; background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%) !important; } #peakFaqMobile .peak-charge__back{ grid-column: 1 !important; justify-self: start !important; width: 40px !important; height: 40px !important; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.35) !important; background: rgba(255,255,255,.12) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; line-height: 1 !important; padding: 0 !important; } #peakFaqMobile .peak-charge__title{ grid-column: 2 !important; color: #fff !important; font-size: 18px !important; font-weight: 700 !important; } #peakFaqMobile .peak-charge__body{ flex: 1 1 auto !important; min-height: 0 !important; background: #fff !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; padding: 12px 16px 0 !important; padding-bottom: calc(var(--peak-bottomnav-h) + env(safe-area-inset-bottom) + 12px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* 검색 */ #peakFaqMobile .peak-faq-search{ margin-bottom: 10px; } #peakFaqMobile .peak-faq-search__input{ width: 100%; height: 44px; border-radius: 14px; border: 1px solid rgba(2,6,23,.10); background: #fff; padding: 0 14px; font-size: 14px; font-weight: 700; outline: none; } /* 칩 */ #peakFaqMobile .peak-faq-chips{ display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; } #peakFaqMobile .peak-faq-chip{ flex: 0 0 auto; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(2,6,23,.10); background: #fff; font-size: 13px; font-weight: 800; color: #0f172a; } #peakFaqMobile .peak-faq-chip.is-active{ border-color: rgba(37,99,235,.45); } /* 아코디언 */ #peakFaqMobile .peak-faq-item{ padding: 0 !important; } #peakFaqMobile .peak-faq-q{ width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 900; color: #0f172a; } #peakFaqMobile .peak-faq-q__icon{ font-size: 14px; font-weight: 900; color: #64748b; transform: rotate(0deg); transition: transform .12s ease; } #peakFaqMobile .peak-faq-item.is-open .peak-faq-q__icon{ transform: rotate(180deg); } #peakFaqMobile .peak-faq-a{ padding: 0 14px 14px; font-size: 13px; line-height: 1.55; color: #0f172a; } /* 빈 상태 */ #peakFaqMobile .peak-faq-empty{ padding: 16px; } #peakFaqMobile .peak-faq-empty__title{ font-size: 14px; font-weight: 900; color: #0f172a; margin-bottom: 6px; } #peakFaqMobile .peak-faq-empty__sub{ font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 12px; } #peakFaqMobile .peak-faq-empty__cta{ display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 14px; text-decoration: none; font-weight: 900; font-size: 14px; border: 1px solid rgba(2,6,23,.10); } /* ======================================================= Appbar 1:1 강제 통일 (/profile 정답값) - 다른 selector/우선순위/캐시로 값이 어긋나는 케이스 방어 ======================================================= */ #peakFaqMobile .peak-charge__appbar{ min-height: 72px !important; padding: calc(38px + env(safe-area-inset-top)) 16px 14px !important; } #peakFaqMobile .peak-charge__back{ width: 40px !important; height: 40px !important; border-radius: 12px !important; } /* "파란 영역이 얇아 보임" 방지: body/첫 섹션이 위로 당겨지는 케이스 차단 */ #peakFaqMobile .peak-charge__body{ margin-top: 0 !important; transform: none !important; } #peakFaqMobile .peak-history-section{ margin-top: 0 !important; transform: none !important; } }