/* =====================================================================
 * 비정사진담 - 스마트폰 전용 레이아웃
 * 데스크톱 사이드바는 제거했고, 메뉴는 항상 화면 하단 탭바로만 노출된다.
 * 넓은 화면에서 열어도 폰 크기 컬럼으로 고정해 모바일 화면 그대로 보여준다.
 * ===================================================================== */

:root {
  --app-w: 430px;   /* 앱 컬럼 너비 (iPhone Pro Max 급) */
  --app-half: 215px;
  --nav-h: 64px;
}

html {
  background: #dbdad9;               /* 컬럼 바깥 여백 */
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: var(--app-w);
  /* Tailwind CDN 은 preflight(body{margin:0})를 이 파일보다 뒤에 주입하므로 !important 필요 */
  margin-left: auto !important;
  margin-right: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  background: #faf9f9;
  overflow-x: hidden;
}

/* 하단 탭바가 콘텐츠를 가리지 않도록 최소 여백 확보.
   (요소 선택자라 Tailwind 의 pb-* 유틸리티가 있으면 그쪽이 우선한다) */
main {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 24px);
}

/* 주의: [class~="..."] 는 공백 구분 토큰 정확히 일치.
   [class*="fixed"] 같은 부분일치를 쓰면 on-primary-fixed-variant 같은
   컬러 유틸리티까지 걸리므로 반드시 ~= 를 쓴다. */

/* 하단 탭바 - 항상 표시, 앱 컬럼 폭에 맞춤 */
nav[class~="fixed"][class~="bottom-0"] {
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-w);
}

/* 플로팅 액션 버튼
   - 430px보다 좁은 휴대폰에서는 화면 오른쪽 안전 여백 안쪽에 고정
   - 넓은 화면에서는 가운데 앱 컬럼의 오른쪽 가장자리에 정렬
   기존 calc(50% - 215px + 20px)는 390px 이하 화면에서 음수가 되어
   Q&A/자료실의 + 버튼이 화면 밖으로 잘리는 문제가 있었다. */
button[class~="fixed"][class~="right-edge-margin"] {
  right: max(
    calc(env(safe-area-inset-right, 0px) + 16px),
    calc((100vw - var(--app-w)) / 2 + 16px)
  ) !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 16px) !important;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* 매우 좁은 화면에서도 + 버튼 전체가 보이도록 크기와 여백을 한 단계 줄인다. */
@media (max-width: 359px) {
  button[class~="fixed"][class~="right-edge-margin"] {
    right: max(calc(env(safe-area-inset-right, 0px) + 12px), 12px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 12px) !important;
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
}

/* position:fixed 인 전체폭 바(헤더, 하단 버튼/입력창 등)도 컬럼 안으로.
   대부분의 화면은 sticky 헤더라 해당 없지만 일부 화면은 fixed 를 쓴다.

   right/margin 을 함께 리셋하는 이유: left-0 right-0 w-full mx-auto 가 같이 걸린
   요소는 left/right/width 가 모두 확정돼 과잉 제약이 된다. 이때 auto 마진이
   남는 폭을 절반씩 흡수해 버려 가운데가 어긋난다(실제로 10px 밀렸다). */
header[class~="fixed"][class~="w-full"],
div[class~="fixed"][class~="w-full"] {
  left: 50%;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  transform: translateX(-50%);
  max-width: var(--app-w);
}

/* app.js 가 만드는 알림 패널 / 토스트도 컬럼 안으로 */
.bp-notif {
  right: calc(50% - var(--app-half) + 12px);
  width: calc(var(--app-w) - 24px);
}
.bp-toast-wrap {
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--nav-h) + 24px);
}

/* 넓은 화면에서는 기기 프레임처럼 보이게 */
@media (min-width: 480px) {
  body {
    box-shadow: 0 0 0 1px rgba(18, 18, 18, .12), 0 16px 48px rgba(0, 0, 0, .14);
  }
}

/* 모바일에서 가로 스크롤을 유발하기 쉬운 요소 방어 */
img, video, iframe { max-width: 100%; }


/* 일반 회원 피드 사진의 우클릭/드래그 저장 메뉴 억제 */
.bp-feed-photo-protected {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* 내 정보 > 회원 탈퇴 위험 구역 */
.bp-account-danger {
  border-color: rgba(186, 26, 26, .45) !important;
  background: rgba(255, 245, 245, .92) !important;
}
.bp-account-danger h3 { color: #ba1a1a; }
.bp-account-delete-button {
  background: #ba1a1a !important;
  border-color: #ba1a1a !important;
  color: #fff !important;
}
.bp-account-delete-button:disabled { opacity: .45; cursor: not-allowed; }