/* ───────────────────────────────────────────────────────────── * 같이가개 — 안드로이드 앱(Capacitor) 전용 레이어 * * 웹에는 전혀 영향을 주지 않는다. js/appshell.js 가 네이티브 컨테이너를 * 감지했을 때만 를 붙이고, 아래 규칙이 그때 켜진다. * * 설계 원칙 3가지 * 1) 이동은 엄지로 — 탭은 화면 아래, 손가락이 닿는 곳에 둔다. * 2) 상단은 정보만 — 브랜드·지역만 남기고 조작 버튼은 아래로 내린다. * 3) 노치와 제스처바를 피한다 — 모든 고정 요소는 safe-area 를 존중한다. * ───────────────────────────────────────────────────────────── */ .is-app { /* 하단 탭바 높이 + 제스처바 여백. --tabbar-h 는 버튼 높이고, 실제로 차지하는 높이는 위쪽 테두리 1px 이 더해진다. 본문·토스트·상세 패널은 반드시 --tabbar-total 을 써야 1px 씩 가려지지 않는다. */ --tabbar-h: 62px; --tabbar-total: calc(var(--tabbar-h) + 1px); --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* ── 네이티브 느낌 만들기 ───────────────────────────────── */ .is-app body { /* 길게 눌러도 텍스트 선택·복사 팝업이 뜨지 않게 (지도 조작 방해) */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; /* 탭할 때 파란 하이라이트 사각형 제거 */ -webkit-tap-highlight-color: transparent; /* 끝까지 스크롤했을 때 배경이 딸려 늘어나는 현상 차단 */ overscroll-behavior: none; } /* 단, 사용자가 실제로 읽고 복사할 만한 본문은 선택 가능하게 되돌린다 */ .is-app .place-card, .is-app .detail, .is-app .ai-body, .is-app [class*="detail"], .is-app .tip-body { -webkit-user-select: text; user-select: text; } /* ── 상단바: 조작 버튼을 덜어내고 얇게 ───────────────────── */ .is-app { --topbar-h: 56px; } .is-app .topbar { padding-top: var(--safe-top); height: calc(56px + var(--safe-top)); gap: 8px; } /* 상단 탭 4개는 하단 탭바로 옮겼다 */ .is-app .topbar .nav { display: none; } /* 「내 반려동물」은 홈 화면 안에 이미 큰 카드로 있다 — 상단에서는 뺀다 */ .is-app #profileBtn { display: none; } .is-app .brand small { display: none; } .is-app .brand b { font-size: 18px; } /* ── 본문: 위는 상단바, 아래는 탭바만큼 비운다 ───────────── */ .is-app .page { inset: calc(56px + var(--safe-top)) 0 calc(var(--tabbar-total) + var(--safe-bottom)) 0; /* 관성 스크롤 */ -webkit-overflow-scrolling: touch; } .is-app { --page-x: 18px; } /* ── 하단 탭바 ───────────────────────────────────────────── */ .app-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 950; display: none; /* 앱에서만 켜진다 */ background: var(--canvas); border-top: 1px solid var(--hairline); padding-bottom: var(--safe-bottom); } .is-app .app-tabbar { display: flex; } /* 탭 버튼에는 app.js 배선을 물려받으려고 .nav-btn 을 함께 달았다. 그 바람에 웹용 .nav-btn.active(노란 알약 배경 + 그림자)까지 따라오므로 지운다. */ .app-tabbar .tab.nav-btn, .app-tabbar .tab.nav-btn.active, .app-tabbar .tab.nav-btn:hover { background: none; box-shadow: none; border-radius: 0; height: var(--tabbar-h); padding: 0; } .app-tabbar .tab { flex: 1 1 0; min-width: 0; height: var(--tabbar-h); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--mute); font: inherit; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; /* 터치 목표를 세로 전체로 — 아이콘만 눌러야 하는 답답함을 없앤다 */ padding: 0; -webkit-tap-highlight-color: transparent; position: relative; } .app-tabbar .tab svg { width: 22px; height: 22px; } .app-tabbar .tab b { font-weight: 600; } /* 선택된 탭: 색 + 위쪽 짧은 바 (색맹이어도 위치로 구분되게) */ .app-tabbar .tab.active { color: var(--ink); } .app-tabbar .tab.active::before { content: ""; position: absolute; top: 0; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--banana-deep); } .app-tabbar .tab:active { background: var(--cloud); } /* ── 오프라인 안내 띠 ────────────────────────────────────── */ .app-offline { position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-total) + var(--safe-bottom)); z-index: 960; display: none; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; transform: translateY(100%); transition: transform .25s var(--ease); } .is-app .app-offline { display: flex; } .app-offline.show { transform: translateY(0); } /* 띠에서 바로 원인을 확인할 수 있게 — 추측 대신 사실을 보여 준다 */ .app-offline-diag { flex: none; padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--r-pill); background: transparent; color: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; } /* ── 연결 진단 시트 ──────────────────────────────────────── */ .app-diag { position: fixed; inset: 0; z-index: 1200; display: none; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); } .app-diag.show { display: flex; } .app-diag .diag-sheet { width: 100%; max-height: 82vh; display: flex; flex-direction: column; background: #fff; border-radius: 18px 18px 0 0; padding-bottom: var(--safe-bottom); } .app-diag header, .app-diag footer { display: flex; align-items: center; gap: 8px; padding: 14px 16px; } .app-diag header { justify-content: space-between; border-bottom: 1px solid var(--line, #eee); font-size: 16px; } .app-diag header button { border: 0; background: transparent; font-size: 18px; line-height: 1; padding: 6px 8px; cursor: pointer; } .app-diag .diag-body { flex: 1; overflow-y: auto; padding: 12px 16px; font-size: 13px; } .app-diag .diag-env, .app-diag .diag-row { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; } .app-diag .diag-env b, .app-diag .diag-row b { font-size: 13px; } .app-diag .diag-env span, .app-diag .diag-row span { color: var(--ink-sub, #666); font-size: 12px; /* 오류 문구·URL 이 길어도 가로로 넘치지 않게 */ word-break: break-all; } .app-diag .diag-sep { height: 1px; background: var(--line, #eee); margin: 8px 0; } .app-diag .diag-verdict { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--bg-soft, #f6f6f7); font-size: 13px; font-weight: 600; line-height: 1.55; } .app-diag footer { border-top: 1px solid var(--line, #eee); } .app-diag footer button { flex: 1; min-height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line, #ddd); background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; } .app-diag footer .diag-copy { background: var(--yellow, #FFE135); border-color: transparent; } /* ── 종료 확인 토스트 ────────────────────────────────────── */ .app-toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-total) + var(--safe-bottom) + 18px); transform: translate(-50%, 14px); z-index: 970; padding: 11px 18px; border-radius: var(--r-pill); background: rgba(25, 25, 29, 0.92); color: #fff; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } .app-toast.show { opacity: 1; transform: translate(-50%, 0); } /* ── 터치 목표 최소 크기 (구글 권장 48dp) ────────────────── */ .is-app .btn, .is-app .chip, .is-app .nav-btn, .is-app .region-btn, .is-app .lang-btn { min-height: 44px; } .is-app .rp-grid button { min-height: 44px; } /* ── 상세 패널: 앱에서는 아래에서 올라오는 시트로 ────────── */ .is-app .detail-panel, .is-app [class*="detail"][class*="panel"] { top: calc(56px + var(--safe-top)); bottom: calc(var(--tabbar-total) + var(--safe-bottom)); } /* ── 목록은 한 줄에 한 장 ──────────────────────────────── 폰 폭에서 2열로 두면 카드 하나가 180px 남짓이라 「카카오맵 길찾기」· 「상세·규정」 버튼이 두 줄로 접히고 사진도 우표만 해진다. 한 장씩 크게 보여 주는 편이 훨씬 읽기 쉽다. */ .is-app .place-list { grid-template-columns: 1fr; gap: 14px; } .is-app .pc-thumb { height: 190px; } .is-app .pc-title { font-size: 16px; } /* ── 앱에서는 의미 없는 웹 요소 감추기 ───────────────────── */ .is-app .pwa-install, .is-app .demo-banner-web { display: none; }