/* 영상 촬영 기능 스타일 */
:root{--gap:16px; --text:#fff;}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; margin:0; color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,sans-serif; touch-action: none;}

#preview{ position:fixed; inset:0; width:100vw; height:100dvh; object-fit:cover; background:#000; z-index:10;}

.controls {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--gap);
  z-index: 11;
}

/* .shutter{
  appearance:none; border:2px solid rgba(255,255,255,.9); background:rgba(255,255,255,.08);
  color:#fff; border-radius:999px; width:84px; height:84px; font-weight:700;
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
  display: flex; justify-content: center; align-items: center;
}
.shutter:active{ transform:scale(.97); }
.shutter.pressing{ background:rgba(255,255,255,.16); }
.shutter.recording{
  border-color: #ff3b30;
  background: radial-gradient(circle, rgba(255,59,48,.85) 0%, rgba(255,59,48,.6) 70%, rgba(255,59,48,.35) 100%);
  animation: pulse 1.1s ease-out infinite;
}
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,59,48,.45);} 70%{box-shadow:0 0 0 22px rgba(255,59,48,0);} 100%{box-shadow:0 0 0 0 rgba(255,59,48,0);} } */

.post-actions{ display:flex; gap:var(--gap); }
.post-actions.hidden{ display:none; }

.post{
  appearance:none; border:none; border-radius:999px; padding:12px 18px; min-height:48px;
  color:#fff; background:linear-gradient(180deg, rgba(46,160,67,.95), rgba(46,160,67,.82));
  border:1px solid rgba(46,160,67,.5); font-weight:600;
}
.post.danger{
  background:linear-gradient(180deg, rgba(239,68,68,.95), rgba(239,68,68,.82));
  border-color:rgba(239,68,68,.55);
}

.hint{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; line-height:1.45; background:rgba(0,0,0,.72); color:#fff; }
.hint.hidden{ display:none; }

/* @media (max-width:360px){
  .shutter{ width:74px; height:74px; }
  .post{ padding:10px 14px; min-height:44px; font-size:14px; }
}
@media (orientation:landscape) and (max-height:520px){
  .controls{ left:auto; right:max(16px, env(safe-area-inset-right)); transform:none; }
} */
/* 버튼 텍스트 선택 방지 */
.controls button,
.shutter,
.post{
  user-select: none;
  -webkit-user-select: none; /* iOS/Safari */
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-touch-callout: none; /* iOS 길게 눌러 선택/메뉴 방지 */
}