/* 뽑아줘잉 — 모바일 퍼스트 웹 */
:root {
  --bg: #0b0b0f;
  --fg: #f5f5f7;
  --muted: #a1a1aa;
  --accent: #ff2d55;
  --accent-2: #ffd60a;
  --card: #16161c;
  --line: #2a2a33;
  --nav-h: 0px; /* 바텀 네비 높이 — 노출 시 .has-bottom-nav 에서 채움 */
  --cs-w: 360px; /* 댓글 패널 폭(데스크톱 우측 도킹) */
}

/* 화이트 테마 — 프로필 탭(틱톡식). 변수만 덮어 컴포넌트가 따라오게. */
.theme-light {
  --bg: #ffffff;
  --fg: #16161a;
  --muted: #6b6b73;
  --card: #f4f4f6;
  --line: #e6e6eb;
}
html:has(> body.theme-light) { background: #fff; }
.theme-light .bottom-nav { background: rgba(255,255,255,0.92); }
.theme-light .btn-ghost { background: rgba(0,0,0,0.06); color: var(--fg); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* iOS: 폼 컨트롤 글자가 16px 미만이면 포커스 시 화면이 자동 확대됨 → 16px로 막는다. */
input, textarea, select { font-size: 16px; }

/* === 모바일 앱 같은 동작 — 핀치/더블탭 줌, 롱프레스 선택·콜아웃·드래그 차단 === */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; /* 롱프레스 시 복사/공유/이미지저장 팝업 차단 */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; /* 당겨서 새로고침·바운스 체이닝 차단 */
}
/* 입력 영역은 선택/콜아웃 허용(타이핑·교정 위해) */
input, textarea, select, [contenteditable="true"] {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
/* 인터랙티브 요소: 더블탭 줌·탭 지연 제거 + 드래그/콜아웃 차단 */
a, button, label, summary,
.btn, .fab-action, .bnav-item, .bnav-cta, .ftab, .story-cell, .mp-cell, .candidate-tap, .candidate-author {
  -webkit-touch-callout: none; -webkit-user-drag: none; touch-action: manipulation;
}
/* 이미지: 롱프레스 저장·드래그 차단 */
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }

/* hidden 속성이 .btn 등 author의 display 규칙에 밀려 안 먹던 것 강제(녹화 UI 버튼 토글이 안 되던 원인). */
[hidden] { display: none !important; }

/* Topbar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  /* iPhone 14 Pro+ 다이나믹 아일랜드 / 노치 영역만큼 상단 여백 확보 */
  padding: calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 10px calc(14px + env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0));
}
.topbar .brand { display: inline-flex; flex-direction: column; line-height: 1.15; }
.topbar .brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.5px; }
.topbar .brand-tagline { font-size: 11px; font-weight: 700; color: var(--accent-2); letter-spacing: -0.2px; }
.topbar .brand-desc { font-size: 11px; font-weight: 600; color: var(--muted); }
@media (max-width: 480px) { .topbar .brand-desc { display: none; } }
.topbar nav { display: flex; align-items: center; gap: 8px; }

/* 바텀 네비게이션 — 피드/프로필 하단 고정 */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: flex; padding-bottom: env(safe-area-inset-bottom);
  background: rgba(11,11,15,0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
@media (min-width: 600px) { .bottom-nav { max-width: calc(100dvh * 9 / 16); margin-inline: auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.bottom-nav { align-items: center; }
.bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 0 7px; text-decoration: none; color: var(--muted); font-size: 10px; font-weight: 700; }
.bnav-item.active { color: var(--fg); }
.bnav-svg { width: 24px; height: 24px; }
.bnav-label { letter-spacing: -0.2px; }
/* 가운데 출마 — 솟아오른 원형 액션 버튼(아이콘만). 양옆 탭과 위계를 확실히 분리. */
.bnav-cta {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 8px; transform: translateY(-16px);
  background: var(--accent); color: #fff; border: 4px solid var(--bg);
  box-shadow: 0 8px 20px rgba(255,45,85,0.5);
}
.bnav-cta:active { transform: translateY(-16px) scale(0.94); }
.bnav-cta-svg { width: 26px; height: 26px; }
/* 바텀 네비가 있는 화면: 콘텐츠가 네비에 가리지 않게 */
/* 바텀 네비 높이 — 피드 페이저가 이만큼 비워 영상·미션이 네비 위에 놓이게 한다. */
.has-bottom-nav { --nav-h: calc(56px + env(safe-area-inset-bottom)); }
/* 영상 영역이 네비 위에서 끝나므로 오버레이는 작은 여백만 */
.has-bottom-nav .candidate-overlay { padding-bottom: 16px; }
.has-bottom-nav .my-posts-page { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

/* 상단바 제거 후 백버튼 */
.detail-back {
  position: fixed; z-index: 28; top: calc(8px + env(safe-area-inset-top)); left: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 22px; text-decoration: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
/* 상세 우상단 ⋯ 메뉴(수정/삭제) */
.detail-menu { position: fixed; z-index: 28; top: calc(8px + env(safe-area-inset-top)); right: 12px; }
.detail-menu-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 22px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.detail-menu-panel {
  position: absolute; top: 46px; right: 0; min-width: 132px;
  background: #1f1f27; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.detail-menu-panel[hidden] { display: none; }
.detail-menu-panel form { margin: 0; }
.menu-item {
  display: block; width: 100%; box-sizing: border-box; text-align: left;
  padding: 13px 16px; background: none; border: none; cursor: pointer;
  color: var(--fg); font-size: 15px; text-decoration: none;
}
.menu-item-danger { color: #ff8a9a; border-top: 1px solid var(--line); }
/* 재사용 뒤로/닫기 버튼 — 화면 좌상단(콘텐츠 첫 요소)에 배치. btn btn-ghost btn-sm 와 함께. */
.page-back { display: inline-flex; margin-bottom: 8px; }

/* 프로필 계정 액션 */
.profile-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.profile-actions form { display: inline; }
.profile-section-title { font-size: 14px; color: var(--muted); padding: 0 16px; margin: 8px 0 4px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 999px; cursor: pointer;
  padding: 10px 16px; font-size: 15px; font-weight: 600;
  background: #2a2a33; color: var(--fg);
}
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-xs { padding: 4px 8px; font-size: 12px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.12); }
.btn-danger { background: #3a1014; color: #ff8a9a; }
.btn-link { background: none; color: var(--muted); padding: 4px 6px; }
.btn-action { flex-direction: column; background: rgba(0,0,0,0.35); border-radius: 16px; min-width: 56px; }
/* 재사용 CTA — 풀폭 + 큼직한 알약(.btn 둥근각 상속). 강조 액션에 공통 사용. */
.btn-cta { display: flex; width: 100%; padding: 15px; font-size: 16px; font-weight: 700; background: var(--accent); color: #fff; }
/* 하단 고정 변형 — 페이지 폭에 맞춰 중앙, safe-area 반영 */
.btn-cta-fixed { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 448px; z-index: 20; }
/* 플로팅 변형 — 콘텐츠 폭의 알약(풀폭 아님) + 그림자, 하단 중앙 떠 있음 */
.btn-cta-floating { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom)); width: auto; padding: 15px 32px; box-shadow: 0 8px 24px rgba(255,45,85,0.45); z-index: 30; }
.btn-cta-floating:active { transform: translateX(-50%) scale(0.96); }

/* Vote */
.btn-vote { background: rgba(255,255,255,0.14); flex-direction: column; min-width: 64px; }
.btn-vote.voted { background: var(--accent); color: #fff; }
.btn-vote .vote-label { font-size: 13px; }
.btn-vote .vote-count { font-size: 18px; font-weight: 800; }

/* Feed: 한 화면 한 영상 세로 스냅 */
/* === 틱톡식 상단 가로 페이저: [피드(0) | 미션(1)] === */
/* 피드 페이지: 영상 풀스크린 + 바텀 네비는 fixed(프로필과 동일 — 흐름배치 시 Turbo 복원에서
   컨테이너 높이가 스테일해져 네비가 '붕 뜨는' 문제가 있어, viewport 고정으로 통일).
   네비는 반투명이라 영상 위에 떠 있고(틱톡식), 하단 콘텐츠는 네비 높이만큼 띄운다. */
/* 영상 영역은 네비 높이만큼 줄여 fixed 네비 '위에서' 끝나게(겹침 방지). 네비는 fixed라 안 뜸. */
/* ⚠️ 높이 단위 변경 주의 — iOS PWA 바텀탭 '붕뜸' 회귀 위험.
   규칙·이유: docs/iOS PWA 뷰포트 높이 규칙 (바텀탭 붕뜸 방지).md
   가드 테스트: test/integration/feed_viewport_height_test.rb
   피드 페이지: dvh 기반 flex 컬럼(Safari는 동적 툴바 추적 필요, 콜드런치 정상). 흐름상 자식은 feed-shell + 바텀탭뿐. */
.feed-page { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
/* 설치형 PWA: lvh(가장 큰 정적 뷰포트=전체화면)로 — 정적이라 키보드가 떠도 높이가 안 줄어
   바텀탭이 굳어 붕뜨지 않는다. (PWA엔 동적 툴바가 없어 lvh=전체화면.) */
@media (display-mode: standalone) {
  .feed-page { height: 100lvh; }
}
.feed-page .feed-shell { flex: 1 1 auto; min-height: 0; }
/* 바텀탭을 fixed가 아닌 흐름 맨 아래 항목으로 → iOS에서 fixed가 stale 위치에 남아 '붕 뜨던' 현상 원천 차단. */
.feed-page .bottom-nav { position: static; flex: 0 0 auto; }
.feed-shell { position: relative; }
.feed-tabs {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 22px;
  padding: calc(10px + env(safe-area-inset-top)) 18px 12px;
}
.ftab {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: rgba(255,255,255,0.55); font-size: 16px; font-weight: 800;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6); -webkit-tap-highlight-color: transparent;
  transition: color 150ms;
}
.ftab.active { color: #fff; }
.ftab-indicator { position: absolute; left: 0; bottom: 8px; height: 2px; width: 0; background: #fff; border-radius: 2px; box-shadow: 0 1px 4px rgba(0,0,0,0.5); }

.feed-pager {
  display: flex; width: 100%; height: 100%; /* feed-shell(flex:1)을 채움 — 네비는 그 아래 흐름 배치 */
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.feed-pager::-webkit-scrollbar { display: none; }
.feed-pane { position: relative; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; }

/* 피드 스토리 — 상단 고정 오버레이(탭 아래). 영상 스크롤과 무관하게 고정. */
.feed-stories {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding-top: calc(env(safe-area-inset-top) + 44px);
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
/* 스토리 줄만 인터랙티브(가로 스크롤·탭). 위 탭 패딩 영역은 통과시켜 영상 탭 가능. */
.feed-stories .today-stories-wrap { pointer-events: auto; }
@media (min-width: 600px) { .feed-stories { max-width: calc(100dvh * 9 / 16); margin-inline: auto; } }

/* 미션 풀스크린 — 상단정렬 스크롤 + 하단 고정 CTA(패널 내부 절대배치) */
.mission-pane { background: var(--bg); }
.mission-full {
  height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 14px; text-align: center;
  padding: calc(58px + env(safe-area-inset-top)) 16px 24px;
}
/* 미션 정보 카드 — 부각(액센트 그라데이션 + 테두리) */
.mf-head {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 0 2px 8px; padding: 22px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 6%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  border-radius: 22px;
}
.mf-date-select {
  appearance: none; -webkit-appearance: none;
  font-size: 13px; font-weight: 800; color: #fff; letter-spacing: 0.2px;
  background-color: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px; padding: 7px 32px 7px 15px; cursor: pointer;
  text-align: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}
.mf-date-select:active { transform: scale(0.97); }
.mf-eyebrow {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0.2px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  padding: 5px 13px; border-radius: 999px;
}
.mf-title { font-size: 30px; font-weight: 900; line-height: 1.2; margin: 0; letter-spacing: -0.5px; }
.mf-desc { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.55; margin: 0; }
.mf-countdown {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  margin-top: 2px; padding: 9px 20px; border-radius: 14px;
  background: rgba(0,0,0,0.28);
}
.mf-share {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.10); color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  font-size: 13px; font-weight: 700; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.mf-share svg { width: 16px; height: 16px; }
.mf-share:active { transform: scale(0.96); }
.mf-cd-label { font-size: 11px; color: var(--muted); letter-spacing: 0.3px; }
.mf-cd-time { font-size: 25px; font-weight: 900; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.mf-grid-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-top: 10px; }
.mf-grid { margin-top: 2px; }
.mf-empty { color: var(--muted); font-size: 14px; line-height: 1.6; margin: 24px 0; }


.feed {
  height: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-y: contain; /* 바운스가 부모로 빠져나가지 않도록 */
}
/* PC 등 가로폭이 큰 화면: 피드를 9:16 폭으로 좁혀 가운데 정렬(YouTube Shorts 방식).
   모바일은 viewport 폭이 max-width 계산값보다 작아서 이 규칙이 자연 무시됨 → 풀폭 유지. */
@media (min-width: 600px) {
  .feed { max-width: calc(100dvh * 9 / 16); margin-inline: auto; }
}
.candidate {
  position: relative;
  height: 100%;
  scroll-snap-align: start;
  /* scroll-snap-stop: always 제거 — mandatory + always 조합이 iOS에서 '갇힘' 유발 */
  display: flex; align-items: center; justify-content: center;
  background: #000;
  overflow: hidden;
}
.candidate-video { position: absolute; inset: 0; }
.candidate-video video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* 프레임이 없을 때(로딩/재생 시작 틈) 검은색 대신 썸네일(인라인 background-image)이 보이게 */
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.candidate-tap { position: absolute; inset: 0; z-index: 1; background: none; border: none; padding: 0; cursor: pointer; }

/* 재생 전/버퍼링 로딩 — 대표 아이콘이 빙글빙글. .is-loading일 때만 표시(feed 컨트롤러가 토글). */
.video-loading {
  position: absolute; inset: 0; z-index: 2;
  display: none; align-items: center; justify-content: center;
  pointer-events: none;
}
.candidate-video.is-loading .video-loading { display: flex; }
.video-loading-icon {
  display: block;
  width: 46px; height: 46px;
  border-radius: 50%;            /* 둥근네모 아이콘을 원형으로 클립 */
  object-fit: cover;
  opacity: 0.95;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
  animation: ppob-spin 0.9s linear infinite;
}
@keyframes ppob-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .video-loading-icon { animation-duration: 1.6s; }
}
/* 영상 탭 시 잠깐 뜨는 재생/일시정지 아이콘 — 은은하게 페이드 */
.play-flash {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 6; font-size: 54px; line-height: 1; color: rgba(255,255,255,0.92);
  pointer-events: none; opacity: 0; text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.play-flash.show { animation: playflash 650ms ease-out forwards; }
@keyframes playflash {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(0.6); }
  18% { opacity: 0.85; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}

/* 비공개 티저 — 영상 대신 블러된 썸네일 + 🔒. 클릭 비활성, 텍스트 선택 비활성. */
.candidate-private { background: #111; user-select: none; -webkit-touch-callout: none; }
.candidate-private-blur { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.candidate-private-blur img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(48px) brightness(0.55) saturate(1.1);
  transform: scale(1.25); /* 블러 가장자리 잘림 방지 */
  -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none;
}
.candidate-private-overlay {
  position: relative; z-index: 2;
  text-align: center; padding: 0 24px;
  color: var(--fg);
  max-width: 320px;
}
.candidate-private-lock { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.candidate-private-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.2px; }
.candidate-private-sub { font-size: 13px; color: var(--muted); margin: 0 0 16px; }
.candidate-private-hint { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

.candidate-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(0,0,0,0.75), rgba(0,0,0,0));
  pointer-events: none;
}
.candidate-overlay a, .candidate-overlay button, .candidate-overlay form { pointer-events: auto; }
.candidate-meta { max-width: 70%; }
.candidate-meta .category {
  display: inline-block; font-size: 12px; color: #000; background: var(--accent-2);
  border-radius: 6px; padding: 2px 8px; font-weight: 700; margin-bottom: 6px;
}
.category-ic { vertical-align: -2px; }
.candidate-meta .number { display: block; color: var(--muted); font-size: 13px; }
.candidate-meta .title { margin: 4px 0 0; font-size: 20px; font-weight: 800; line-height: 1.25; }
.candidate-meta .posted-at { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
/* 설명 전체 노출 — 기본 2줄 클램프(탭하면 펼침). 줄바꿈 보존. */
.candidate-desc { margin: 6px 0 0; font-size: 14px; color: #fff; line-height: 1.35; white-space: pre-wrap; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer; }
.candidate-desc.expanded { -webkit-line-clamp: unset; }

/* === 댓글 바텀시트 (틱톡/숏츠식) === */
.comment-sheet { position: fixed; inset: 0; z-index: 60; }
.comment-sheet[hidden] { display: none; }
.cs-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.35); opacity: 0; transition: opacity 300ms ease; }
.comment-sheet.open .cs-backdrop { opacity: 1; }
.cs-panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60dvh;
  display: flex; flex-direction: column;
  background: #1a1a20; border-top-left-radius: 18px; border-top-right-radius: 18px;
  box-shadow: 0 -8px 30px rgba(0,0,0,0.5);
  transform: translateY(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.comment-sheet.open .cs-panel { transform: translateY(0); }
@media (min-width: 600px) { .cs-panel { max-width: calc(100dvh * 9 / 16); margin-inline: auto; } }
.cs-grabber { flex: 0 0 auto; padding: 0 14px; touch-action: none; cursor: grab; }
.cs-grip { display: block; width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 2px; background: rgba(255,255,255,0.25); }
.cs-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 10px; border-bottom: 1px solid var(--line); }
.cs-title { font-size: 14px; font-weight: 800; }
.cs-close { background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; padding: 4px 8px; }
.cs-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; min-height: 0; }
.cs-status { text-align: center; color: var(--muted); padding: 30px 0; }
.cs-list { flex: 1; padding: 12px 16px 8px; }
.cs-empty { text-align: center; color: var(--muted); padding: 24px 0; }
/* 입력 폼/로그인 안내 — 하단 고정(sticky). 대댓글 폼은 제외(직계만). */
.cs-body > .comment-form { position: sticky; bottom: 0; background: #1a1a20; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: flex-end; margin: 0; }
.cs-body > .comment-form textarea { flex: 1; background: #26262e; color: var(--fg); border: 1px solid var(--line); border-radius: 18px; padding: 9px 14px; font-family: inherit; font-size: 16px; line-height: 1.4; resize: none; }
.cs-body > .cs-login-hint { position: sticky; bottom: 0; background: #1a1a20; text-align: center; color: var(--muted); padding: 16px calc(16px) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); margin: 0; }

/* 시트 열림 — 영상 축소(상단 중앙), 탭/스토리/오버레이/네비 숨김 */
.feed-pager { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
.sheet-open .feed-pager { transform: scale(0.46); transform-origin: top center; }
.sheet-open .feed-tabs,
.sheet-open .feed-stories,
.sheet-open .candidate-overlay { opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
.sheet-open .bottom-nav { display: none; }

/* === 데스크톱(큰 화면): 바텀시트 → 영상 우측 도킹 패널(유튜브 쇼츠식) === */
@media (min-width: 1024px) {
  .cs-panel {
    top: 0; bottom: 0; left: 50%; right: auto; height: auto; max-width: none; margin: 0;
    width: var(--cs-w);
    margin-left: calc((100dvh * 9 / 16) / 2 - var(--cs-w) / 2); /* 영상 오른쪽 가장자리에 도킹 */
    border-radius: 0; border-left: 1px solid var(--line);
    box-shadow: -8px 0 30px rgba(0,0,0,0.45);
    transform: translateX(100%); /* 닫힘: 오른쪽 밖으로 */
  }
  .comment-sheet.open .cs-panel { transform: translateX(0); }
  .comment-sheet .cs-backdrop { display: none; } /* 영상 계속 보이게 — 백드롭 없음 */
  /* 백드롭이 없으니 컨테이너가 영상 클릭을 막지 않게 — 패널만 클릭 수신. */
  .comment-sheet { pointer-events: none; }
  .cs-panel { pointer-events: auto; }
  .cs-grip { display: none; } /* 데스크톱은 드래그 핸들 불필요 */

  /* 영상은 축소 대신 좌측 이동(영상+패널을 한 묶음으로 가운데 정렬). 탭/네비도 함께 이동, 나머지 UI 유지. */
  .feed-tabs, .bottom-nav { transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); }
  .sheet-open .feed-pager { transform: translateX(calc(var(--cs-w) / -2)); }
  .sheet-open .feed-tabs { opacity: 1; pointer-events: auto; transform: translateX(calc(-50% - var(--cs-w) / 2)); }
  .sheet-open .bottom-nav { display: flex; transform: translateX(calc(var(--cs-w) / -2)); }
  .sheet-open .feed-stories, .sheet-open .candidate-overlay { opacity: 1; pointer-events: auto; }
}

.candidate-actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* 피드 액션(한표·댓글·북마크·공유) 통일 — 배경 없는 동일 크기 아이콘 + 캡션(톡톡식). */
.fab-action {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; padding: 0; min-width: 0; cursor: pointer;
  color: #fff; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
  -webkit-tap-highlight-color: transparent;
}
.fab-action:active { transform: scale(0.88); }
.fab-action .fab-icon { width: 30px; height: 30px; display: block; }
.fab-action .fab-caption { line-height: 1; min-height: 11px; }
.fab-action.voted, .fab-action.saved { color: var(--accent); }
/* 소리 토글 — 음소거(기본)/소리 아이콘을 sound-on 클래스로 교체 */
.fab-sound .fab-sound-on { display: none; }
.fab-sound.sound-on .fab-sound-off { display: none; }
.fab-sound.sound-on .fab-sound-on { display: block; }
.fab-sound.sound-on { color: var(--accent); }

/* 유저 아바타 — 배경색 + 닉네임 이니셜. 게시물 썸네일과 분리된 정체성. */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 42px; height: 42px; border-radius: 50%;
  color: #fff; font-weight: 800; line-height: 1; font-size: 15px; letter-spacing: -0.5px;
}
.avatar-lg { width: 64px; height: 64px; font-size: 22px; }
.avatar-xl { width: 96px; height: 96px; font-size: 34px; }

/* 올린 사람 — 액션 컬럼 맨 위. 탭 시 그 사람 피드로. */
.candidate-author { flex: 0 0 auto; display: block; }
.candidate-author .avatar { width: 46px; height: 46px; font-size: 16px; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.candidate-author:active { transform: scale(0.92); }

/* 북마크 버튼 — 액션 컬럼. 저장되면 채워진 아이콘 + accent. */
.btn-bookmark { background: rgba(0,0,0,0.35); border-radius: 16px; min-width: 56px; padding: 10px 0; }
.btn-bookmark .bk-svg { width: 24px; height: 24px; }
.btn-bookmark.saved { color: var(--accent); }

.feed-sentinel { height: 1px; }
.empty { padding: 40vh 24px; text-align: center; color: var(--muted); }

/* 상단 고정 스택: 미션 헤더 + 스토리. 하나의 블러 그라데이션으로 영상 위에 떠 있음(풀블리드 유지). */
.feed-top {
  position: fixed; z-index: 25; top: 0; left: 0; right: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.34) 70%, rgba(0,0,0,0) 100%);
}
@media (min-width: 600px) { .feed-top { max-width: calc(100dvh * 9 / 16); margin-inline: auto; } }

/* 미션 헤더 — 현재 미션. 2줄(상단 메타 한 줄 + 제목 한 줄), 가운데. */
.mission-header {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: calc(8px + env(safe-area-inset-top)) 16px 6px;
  color: var(--fg); text-decoration: none; text-align: center;
}
.mission-header:active { opacity: 0.85; }
.mh-top { display: flex; align-items: center; gap: 8px; }
.mh-eyebrow { font-size: 11px; font-weight: 800; color: var(--accent); }
.mh-countdown { font-size: 11px; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.mh-title-row { display: flex; align-items: center; gap: 4px; }
.mh-title { font-size: 17px; font-weight: 800; line-height: 1.2; }
.mh-chevron { font-size: 18px; font-weight: 800; line-height: 1; color: var(--accent); }

/* 오늘 출마한 사람들 — 미션 헤더 바로 아래(사회적 증거) */
.today-stories-wrap { padding: 2px 0 10px; }
.today-stories {
  display: flex; gap: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding: 4px 12px 0; scrollbar-width: none;
  overscroll-behavior-x: contain; /* 가로 스크롤이 피드 페이저로 전파되지 않게 */
  touch-action: pan-x; /* 이 줄의 가로 스와이프는 페이저가 아닌 스토리가 처리 */
}
.today-stories::-webkit-scrollbar { display: none; }
.story-cell { flex: 0 0 auto; width: 56px; text-decoration: none; }
.story-ring {
  display: block; width: 52px; height: 52px; border-radius: 50%; padding: 2px; margin: 0 auto;
  background: linear-gradient(45deg, var(--accent), var(--accent-2));
}
.story-thumb { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #000; border: 2px solid var(--bg); }
.story-noimg { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.story-name { display: block; margin-top: 4px; font-size: 10px; color: var(--fg); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 출마 폼 — 오늘의 출마 카드 */
.today-topic-card {
  background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.today-topic-card.free { border-color: var(--line); }
.today-topic-eyebrow { display: block; font-size: 12px; font-weight: 800; color: var(--accent-2); margin-bottom: 6px; }
.today-topic-title { display: block; font-size: 20px; font-weight: 800; }
.today-topic-desc { margin: 6px 0 0; font-size: 14px; color: var(--muted); line-height: 1.4; }

/* Detail */
/* 상단 패딩을 헤더+safe-area만큼 — 영상(네이티브 확대 버튼 포함)이 헤더 아래에서 시작해 겹침 방지. */
.detail { max-width: 720px; margin: 0 auto; padding: calc(60px + env(safe-area-inset-top)) 0 40px; }
/* 유튜브/쇼츠처럼: 검은 박스에 영상을 가운데 정렬(레터박스), 박스 자체도 중앙. */
.detail-video {
  position: relative; background: #000;
  /* 9:16 영상을 화면 높이(최대 88dvh)에 꽉 차게: 폭은 그 높이에 맞춰 자동 제한, 모바일은 풀폭. */
  width: 100%; max-width: calc(88dvh * 9 / 16); margin: 0 auto;
  aspect-ratio: 9 / 16;
}
.detail-video video { display: block; width: 100%; height: 100%; object-fit: contain; }
.detail-meta { padding: 16px; }
.detail-meta .category {
  display: inline-block; font-size: 12px; color: #000; background: var(--accent-2);
  border-radius: 6px; padding: 2px 8px; font-weight: 700;
}
.detail-meta .title { font-size: 22px; margin: 8px 0; }
.detail-mission { margin-bottom: 8px; }
.detail-mission-eyebrow { display: block; font-size: 11px; font-weight: 800; color: var(--accent-2); margin-bottom: 2px; }
.detail-mission-title { font-size: 22px; font-weight: 800; color: var(--fg); text-decoration: none; }
a.detail-mission-title { color: var(--accent); }
.detail-meta .byline { display: flex; gap: 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; align-items: center; }
.detail-meta .byline .posted-at { margin-left: auto; font-variant-numeric: tabular-nums; }
.detail-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Comments */
.comments { padding: 16px; border-top: 1px solid var(--line); margin-top: 16px; }
.comments h2 { font-size: 16px; }
.comment { padding: 8px 0; border-bottom: 1px solid var(--line); }
.comment-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-author { color: var(--accent-2); font-size: 13px; font-weight: 700; white-space: nowrap; }
.comment-time { color: var(--muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.comment-owner-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); letter-spacing: 0.02em; white-space: nowrap; }
.comment-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.comment-body { margin: 0; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.comment-form { display: flex; gap: 8px; margin-top: 12px; }
/* 대댓글 */
.replies { margin: 8px 0 0 16px; border-left: 2px solid var(--line); padding-left: 12px; }
.comment.reply { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.comment.reply:last-child { border-bottom: none; }

/* 공약 섹션 — 영상 바로 아래, _media 교체 영향 밖. */
.pledge { margin: 12px 16px 0; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 12px; }
.pledge-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pledge-label { font-size: 13px; font-weight: 800; color: var(--accent); letter-spacing: 0.02em; }
.pledge-body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg); white-space: pre-wrap; }
.pledge-body p { margin: 0 0 4px; }
.pledge-body p:last-child { margin-bottom: 0; }
.pledge textarea { width: 100%; box-sizing: border-box; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical; margin-bottom: 10px; font-family: inherit; }
.pledge .pledge-submit { width: 100%; }
.pledge-error { color: #ff8a8a; font-size: 13px; margin: 0 0 8px; }
.ds-pledge-hint { font-size: 13px; color: var(--accent); margin: 14px 0 0; }

/* 공개 범위 토글(출마하기 폼) */
.visibility-toggle { display: flex; flex-direction: column; gap: 10px; }
.visibility-toggle .vis-option { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.visibility-toggle .vis-option input[type=radio] { grid-row: span 2; }
.visibility-toggle .vis-title { font-weight: 700; font-size: 15px; }
.visibility-toggle .vis-sub { grid-column: 2; font-size: 12px; color: var(--muted); }
.visibility-toggle .vis-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }

/* 비공개 배지(상세) */
.visibility-badge.unlisted { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }

/* 내 출마 목록(/me) — 9:16 썸네일 그리드 */
.my-posts-page { max-width: 720px; margin: 0 auto; padding: 56px 0 40px; display: flex; flex-direction: column; min-height: 100dvh; }
.my-posts-header { padding: 8px 16px 12px; }
.my-posts-header h1 { margin: 0 0 4px; font-size: 18px; }
.my-posts-sub { margin: 0; color: var(--muted); font-size: 13px; }
/* 프로필 신분 — 아바타 + 닉네임 + 편집 버튼 */
.profile-identity { display: flex; align-items: center; gap: 14px; }
.profile-identity .avatar-lg { border: 2px solid var(--line); }
.profile-identity-text { flex: 1; min-width: 0; }
.profile-identity-text h1 { margin: 0 0 2px; font-size: 18px; }
.profile-edit-btn { flex: 0 0 auto; }
/* 프로필 편집 페이지 */
.profile-edit-page { max-width: 480px; margin: 0 auto; padding: 56px 16px calc(88px + env(safe-area-inset-bottom)); position: relative; }
.profile-edit-page h1 { font-size: 20px; margin: 8px 0 4px; }
.profile-edit-page .field { margin-bottom: 18px; }
.profile-edit-page .field > label { display: block; margin-bottom: 6px; font-weight: 600; }
.profile-edit-page input[type=text] {
  width: 100%; padding: 12px; font-size: 16px; box-sizing: border-box;
  background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
}
.avatar-preview-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 24px; }
.swatch-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; cursor: pointer; border: 3px solid transparent; box-sizing: border-box; }
.swatch input { position: absolute; width: 0; height: 0; opacity: 0; }
.swatch:has(input:checked) { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
/* 프로필 탭 — 내 출마 / 북마크 (스와이프 페이저 + 슬라이드 인디케이터) */
.profile-tabs { position: relative; display: flex; border-bottom: 1px solid var(--line); margin-top: 4px; }
.ptab { flex: 1; text-align: center; padding: 12px 0; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 700; transition: color 200ms; -webkit-tap-highlight-color: transparent; }
.ptab.active { color: var(--fg); }
.ptab-count { color: var(--muted); font-weight: 600; font-size: 13px; margin-left: 2px; }
.ptab.active .ptab-count { color: var(--accent); }
/* 인디케이터: 너비 = 탭 1칸(50%), translateX로 슬라이드 */
.ptab-indicator { position: absolute; bottom: -1px; left: 0; width: 50%; height: 2px; background: var(--accent); will-change: transform; }
/* 페이저: 화면 끝까지 채워 그리드 없는 아래 빈 공간도 스와이프 영역에 포함. */
.profile-pager { flex: 1; display: flex; flex-direction: column; }
/* 가로만 클립(세로 오버플로는 그대로 흐르게 — 그리드가 길어도 페이지 스크롤 유지) */
.ptab-viewport { flex: 1; overflow-x: clip; touch-action: pan-y; }
.ptab-track { display: flex; width: 200%; align-items: flex-start; min-height: 100%; will-change: transform; }
.ptab-panel { flex: 0 0 50%; width: 50%; }
.mp-cell-name { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.my-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; }
.mp-cell { position: relative; aspect-ratio: 9/16; background: #000; overflow: hidden; display: block; }
.mp-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a1a, #2a2a2a); }
.mp-status-emoji { font-size: 32px; opacity: 0.6; }
.mp-badge { position: absolute; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 700; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mp-badge-private { top: 6px; right: 6px; background: rgba(0,0,0,0.6); color: #fff; }
.mp-badge-status { bottom: 6px; left: 6px; background: rgba(0,0,0,0.6); color: #fff; }
.mp-badge-status.mp-status-failed { background: rgba(220,80,80,0.85); }
.mp-badge-rank { top: 6px; left: 6px; background: rgba(0,0,0,0.55); font-size: 16px; padding: 1px 5px; }
.mp-badge-votes { bottom: 6px; right: 6px; background: rgba(0,0,0,0.6); color: #fff; }
.me-footer { padding: 24px 16px 8px; text-align: center; border-top: 1px solid var(--line); margin-top: 16px; }
.my-posts-empty { text-align: center; padding: 60px 16px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.my-posts-empty p { color: var(--muted); margin: 0; }

/* 공유 토스트 — navigator.share 미지원 시 클립보드 복사 알림 */
.share-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 10px 18px; background: rgba(0,0,0,0.85); color: #fff; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity 200ms, transform 200ms; z-index: 100; pointer-events: none; }
.share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* 홈 화면 추가 유도 배너(하단). 풀 블리드 — safe-area 적용 안 함. */
.install-banner { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 40; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
.install-label { flex: 1; font-size: 13px; line-height: 1.3; color: var(--fg); }
.install-close { background: transparent; border: 0; color: var(--muted); font-size: 16px; padding: 0 4px; cursor: pointer; }
.install-close:hover { color: var(--fg); }
/* standalone(이미 설치된 환경)에선 배너 자체를 숨김 — JS와 별개로 CSS도 보강 */
@media all and (display-mode: standalone) { .install-banner { display: none !important; } }

/* iOS 안내 모달 */
.install-ios-guide { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); padding: 24px; }
.install-ios-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: 360px; width: 100%; }
.install-ios-card h3 { margin: 0 0 12px; font-size: 18px; text-align: center; }
.install-ios-steps { padding-left: 20px; margin: 0 0 12px; }
.install-ios-steps li { margin-bottom: 8px; line-height: 1.5; font-size: 14px; }
.ios-share-icon { display: inline-block; padding: 1px 6px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,0.05); font-weight: 700; }
.install-ios-note { font-size: 12px; color: var(--muted); text-align: center; margin: 0 0 14px; }
.install-ios-card .btn { width: 100%; }

/* 푸시 권한 요청 카드 — 댓글 폼 위 */
.push-prompt { display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 10px 0; background: color-mix(in srgb, var(--accent-2) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--line)); border-radius: 10px; flex-wrap: wrap; }
.push-prompt-text { flex: 1; font-size: 13px; color: var(--fg); min-width: 180px; }
.reply-form-wrap { margin-top: 6px; }
.reply-form-wrap summary { display: inline-block; }
.reply-form { margin-top: 8px; }
.comment-form textarea { flex: 1; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; resize: none; line-height: 1.4; max-height: 160px; overflow-y: auto; }
.login-hint { color: var(--muted); }

/* Login */
.login { max-width: 420px; margin: 0 auto; padding: 80px 24px; text-align: center; }
.login h1 { font-size: 30px; }
.login .lede { color: var(--muted); }
.login-buttons { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; }
.inapp-notice { background: var(--card); border: 1px solid var(--accent); border-radius: 12px; padding: 14px; margin: 16px 0 4px; text-align: left; }
.inapp-notice p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.inapp-notice .btn { width: 100%; }
.btn-google { background: #fff; color: #111; }
.btn-apple { background: #111; color: #fff; border: 1px solid var(--line); }
.dev-login { text-align: left; background: var(--card); border: 1px dashed var(--line); border-radius: 10px; padding: 12px; }
.dev-login summary { cursor: pointer; color: var(--muted); }
.dev-login label { display: block; margin: 10px 0; }
.dev-login input[type=number] { width: 100px; padding: 6px; }

/* New post (출마하기) */
.new-post { max-width: 480px; margin: 0 auto; padding: 70px 20px 40px; }
.new-post .field { margin-bottom: 16px; }
.new-post label { display: block; margin-bottom: 6px; font-weight: 600; }
.new-post input[type=text], .new-post input[type=email], .new-post select, .new-post input[type=file], .new-post textarea {
  width: 100%; padding: 10px; background: var(--card); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px; box-sizing: border-box;
}
/* 건의하기 — 하단 고정 CTA에 가리지 않게 여백 */
.inquiry-page { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
/* 모아보기 — 플로팅 CTA 가림 방지 여백 */
.topic-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
/* 출마하기 — 하단 고정 CTA 가림 방지 여백 */
.new-post-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.new-post textarea { resize: vertical; font-family: inherit; line-height: 1.5; }
.recorder { background: #000; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; position: relative; }
/* 셀카처럼 좌우반전(거울) — 녹화 미리보기/재생 한정. 피드(.candidate-video)는 원본 그대로. */
.recorder video { width: 100%; height: 100%; object-fit: cover; }
.recorder[data-facing="user"] video { transform: scaleX(-1); } /* 셀카 미러 — 후면일 땐 미러 안 함 */
.recorder { position: relative; }
.flip-camera { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); border-radius: 999px; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.flip-camera:hover { background: rgba(0,0,0,0.75); }
/* 녹화 중 진행 표시 — 상단 얇은 바 + 우상단 남은 초. 촬영 방해 안 되게 은은하게. */
.rec-progress { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255,255,255,0.25); z-index: 3; }
.rec-progress-bar { height: 100%; width: 0; background: var(--accent); }
.rec-remaining {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 14px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.recorder-nocam { text-align: center; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 28px 18px; line-height: 1.5; }
.recorder .countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 80px; font-weight: 900; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.6);
}
.recorder .rec-dot { position: absolute; top: 12px; left: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.recorder-controls { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.recorder-field { display: flex; flex-direction: column; gap: 10px; }
/* 📷 촬영 | 🎞️ 영상 토글 */
.capture-toggle { display: flex; gap: 6px; padding: 4px; background: rgba(255,255,255,0.06); border: 1px solid var(--line); border-radius: 999px; }
.cap-tab { flex: 1; padding: 9px 0; border: none; background: none; color: var(--muted); font-size: 14px; font-weight: 800; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cap-tab.active { background: var(--accent); color: #fff; }
.file-panel { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.file-panel .file-preview { width: 100%; }
/* 시각적으로만 숨긴 파일 입력 — display:none이 아니라 .click()이 iOS에서 동작 */
.sr-file { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.recorder-status { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }
.recorder .rec-dot { animation: rec-blink 1s steps(2, start) infinite; }
@keyframes rec-blink { to { opacity: 0; } }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.hidden { display: none !important; }

/* Report */
.report { display: inline-block; }
.report-form { display: flex; gap: 6px; margin-top: 6px; }
.report-form select { background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; }

/* Flash + login prompt */
/* 토스트는 하단 중앙에 — 상단 헤더/페이지 내용과 절대 안 겹치도록. */
.flash { position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.flash > div { background: #1f1f27; border: 1px solid var(--line); padding: 10px 16px; border-radius: 10px; max-width: 90%; }
.flash-alert { color: #ff8a9a; }
.flash-notice { color: #8affc1; }

.login-prompt { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.login-prompt-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.login-prompt-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; max-width: 320px; text-align: center; }
.login-prompt-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

/* 첫 방문 안내 (Onboarding) — 다단계 모달 */
.onboarding { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.78); padding: 24px; }
.onboarding-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 22px; max-width: 360px; width: 100%; text-align: center; }
.ob-step { animation: ob-fade 220ms ease-out; }
.ob-step h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.ob-step p { color: var(--fg); line-height: 1.55; margin: 0; font-size: 15px; }
.ot-big { font-size: 56px; line-height: 1; margin-bottom: 14px; }
.ob-dots { display: flex; gap: 6px; justify-content: center; margin: 20px 0 14px; }
.ob-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: width 0.18s, background 0.18s; }
.ob-dot.active { background: var(--accent); width: 22px; border-radius: 4px; }
.ob-controls { display: flex; gap: 8px; }
.ob-controls .btn { flex: 1; }
@keyframes ob-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Not found (사퇴한 후보) */
.not-found { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 12px; }
.not-found .nf-emoji { font-size: 56px; margin: 0; }
.not-found h1 { margin: 0; font-size: 22px; }
.not-found .nf-sub { color: var(--muted); margin: 0 0 8px; }

/* Processing (영상 처리 중) — 9:16 영상 자리에 중앙정렬 카드 */
.processing { display: flex; align-items: center; gap: 10px; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.25); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.detail-status { background: #000; aspect-ratio: 9/16; max-height: 70vh; margin: 0 auto; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; gap: 10px; }
.detail-status .ds-emoji { font-size: 48px; line-height: 1; }
.detail-status .ds-spinner { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 4px; }
.detail-status .ds-title { font-size: 17px; font-weight: 700; margin: 0; color: var(--fg); }
.detail-status .ds-sub { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.detail-status-failed { background: #1a0a0a; }

/* 업로드 중 폼 비활성 + 스피너 */
form[aria-busy="true"] .upload-busy { display: inline-flex; }
.upload-busy { display: none; align-items: center; gap: 8px; color: var(--muted); margin-top: 10px; }

/* 업로드 진행 오버레이 (출사표 보내는 중) */
.upload-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.86); display: flex; align-items: center; justify-content: center; padding: 24px; }
.upload-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px 22px 22px; max-width: 360px; width: 100%; text-align: center; }
.upload-emoji { font-size: 44px; line-height: 1; margin-bottom: 10px; animation: pulse 1.4s ease-in-out infinite; }
.upload-card h2 { margin: 0 0 6px; font-size: 19px; }
.upload-status { color: var(--muted); margin: 0 0 16px; font-size: 14px; min-height: 1.4em; }
.upload-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.upload-bar-fill { height: 100%; width: 0; background: var(--accent); transition: width 200ms ease; }
.upload-percent { margin: 0 0 14px; font-size: 15px; font-weight: 700; color: var(--accent); }
.upload-tip { color: var(--muted); margin: 0; font-size: 12px; }
.upload-recover { margin-top: 14px; background: var(--card); border: 1px solid var(--accent); color: var(--accent); }
@keyframes pulse { 0%,100% { opacity: 1; transform: none; } 50% { opacity: 0.6; transform: scale(0.96); } }
form[aria-busy="true"] [type="submit"] { opacity: 0.5; pointer-events: none; }

/* Admin — 오늘의 출마 프리셋 관리 */
.admin { max-width: 720px; margin: 0 auto; padding: 70px 20px 40px; }
.admin h1 { font-size: 22px; margin: 8px 0 16px; }
.admin h2 { font-size: 16px; margin: 22px 0 8px; }
.admin-nav { display: flex; gap: 8px; margin-bottom: 8px; }
.admin-day { color: var(--accent-2); }
.admin-live { background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.admin-live-eyebrow { display: block; font-size: 11px; font-weight: 800; color: var(--accent-2); margin-bottom: 4px; }
.admin-live strong { font-size: 18px; }
.admin-live-sub { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; }

/* 다음 7일 미션 플래너 */
.plan-week { margin: 16px 0 24px; }
.plan-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.plan-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.plan-date { flex: 0 0 110px; font-weight: 800; font-size: 13px; }
.plan-form { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.plan-select { flex: 1; min-width: 0; max-width: 100%; }
.plan-badge { font-size: 11px; font-weight: 800; color: #000; background: var(--accent-2); border-radius: 6px; padding: 2px 7px; }
.preset-list { list-style: none; padding: 0; margin: 0; }
.preset-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.preset-row.inactive { opacity: 0.55; }
.preset-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; min-width: 96px; }
.preset-name { font-weight: 700; }
.preset-count { color: var(--muted); font-size: 12px; margin-left: auto; }
.preset-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.preset-head .actions { margin-left: auto; display: flex; gap: 6px; }
.preset-meta { color: var(--muted); font-size: 13px; }
.topic-list { list-style: none; padding: 0; margin: 0 0 16px; }
.topic-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.topic-info { display: flex; flex-direction: column; gap: 2px; }
.topic-info .topic-desc { color: var(--muted); font-size: 13px; }
.topic-row .btn { margin-left: auto; }
.admin-form .field { margin-bottom: 14px; }
.admin-form label { display: block; margin-bottom: 6px; font-weight: 600; }
.admin-form input[type=text], .admin-form input[type=time], .admin-form select {
  width: 100%; padding: 10px; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
}
.admin-form .field-row { display: flex; gap: 12px; }
.admin-form .field-row .field { flex: 1; }
.field-hint { color: var(--muted); font-size: 12px; margin: -6px 0 14px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 700; }
.btn-xs { padding: 4px 10px; font-size: 12px; }
.admin-live.override { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.admin-live-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.override-list { list-style: none; padding: 0; margin: 0 0 16px; }
.override-list.past { opacity: 0.6; }
.override-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.override-row.active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.override-info { display: flex; flex-direction: column; gap: 2px; }
.override-when { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.override-note { color: var(--accent-2); font-size: 12px; }
.override-row .btn { margin-left: auto; }
.override-topic-choice { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.override-topic-choice legend { padding: 0 6px; color: var(--muted); font-size: 13px; }

/* 주제별 랭킹 */
.ranking-page { max-width: 560px; margin: 0 auto; padding: 70px 16px 40px; }
.ranking-header { text-align: center; margin-bottom: 20px; }
.ranking-eyebrow { display: block; font-size: 12px; font-weight: 800; color: var(--accent-2); }
.ranking-header h1 { font-size: 24px; margin: 6px 0; }
.ranking-desc { color: var(--muted); font-size: 14px; margin: 0 0 6px; }
.ranking-count { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
.ranking-list { list-style: none; padding: 0; margin: 0; counter-reset: rank; }
.ranking-row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--line); }
.ranking-row.winner { background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 12px; }
.ranking-rank { min-width: 32px; text-align: center; font-size: 18px; font-weight: 800; color: var(--muted); }
.ranking-cell { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; text-decoration: none; color: var(--fg); }
.ranking-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; background: #000; flex-shrink: 0; }
.ranking-thumb.placeholder { display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ranking-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ranking-title { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-author { color: var(--muted); font-size: 12px; }
.ranking-votes { margin-left: auto; font-weight: 800; font-size: 14px; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranking-empty { text-align: center; color: var(--muted); padding: 40px 16px; line-height: 1.6; }
a.category { text-decoration: none; }

/* 운영 통계 */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
@media (max-width: 480px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: center; }
.stat-num { display: block; font-size: 24px; font-weight: 800; color: var(--accent); }
.stat-label { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stat-table th, .stat-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
.stat-table th { color: var(--muted); font-weight: 700; font-size: 12px; }
.stat-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stat-table .muted { color: var(--muted); font-size: 12px; }

/* Admin 영상 관리 */
.admin-filter { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.adm-post-list { list-style: none; padding: 0; margin: 0; }
.adm-post-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-post-thumb { flex-shrink: 0; width: 54px; height: 72px; border-radius: 8px; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; }
.adm-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-post-noimg { font-size: 22px; }
.adm-post-main { flex: 1; min-width: 0; }
.adm-post-title { display: block; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-post-meta { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 6px; }
.adm-assign { display: flex; gap: 6px; flex: 1; min-width: 0; }
.adm-assign select { flex: 1; min-width: 0; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: 13px; }
.adm-post-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adm-delete { display: inline; margin: 0; flex: 0 0 auto; }