/* ---- Global ---- */
/* === Self-hosted Variable Fonts === */

/* Pretendard Variable (권장: 본문 기본 폰트) */
@font-face {
  font-family: 'Pretendard';
  src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations'),
       url('/public/fonts/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Variable (일반) */
@font-face {
  font-family: 'Montserrat';
  src: url('/public/fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('/public/fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Montserrat Variable (Italic) */
@font-face {
  font-family: 'Montserrat';
  src: url('/public/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('/public/fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #0b1220;
  --card: #121a2b;
  --accent: #A3F7E2;
  --text: #e6f1ff;
  --muted: #9bb2d2;
  --danger: #ff6b6b;
  --warn: #ffd166;
  --border: #000000;
  --vh: 1vh; /* JS에서 실제 뷰포트 높이를 주입 */
}

html, body { height: 100%; }
body.theme-dark {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
/* 제목/타이틀에 Montserrat 적용 */
.topbar-title h1,
.auth-title,
h1, h2, h3 {
  font-family: 'Montserrat', 'Pretendard', system-ui, -apple-system, sans-serif;
  font-weight: 600;
}

/* ---- Topbar ---- */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:#0d1626; position: sticky; top:0; z-index: 30;
}
.topbar h1 { margin:0; font-size:18px; letter-spacing:0.3px; }
.topbar-title { display: flex; align-items: center; gap: 8px; }

/* ---- Buttons ---- */
.btn { appearance:none; border:1px solid var(--border); background:#0f1829; color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer; font-size:14px; }
.btn:hover { border-color:#284064; }
.btn.primary { background: var(--accent); color: #0b1220; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.05); }
.btn.danger { background: transparent; border-color: rgba(255,107,107,.55); color: var(--danger); }
.btn.small { padding:6px 9px; font-size:12px; border-radius:8px; }

/* ---- Grid ---- */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:16px; padding:18px; max-width: 1280px; margin: 0 auto; }
.video-card { background: var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.thumb { position:relative; background:#000; }
.player { width:100%; height:180px; background:#000; display:block; position: relative; z-index: 1; }
.meta { padding:12px 12px 14px; }
.title { margin:6px 0 10px; font-size:15px; }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.inline { display:inline; }

/* ---- Badges ---- */
.badge { display:inline-block; font-size:11px; padding:2px 6px; border-radius:6px; background: rgba(255,255,255,.06); color: var(--muted); border:1px solid var(--border); }
.badge.warn { background: rgba(255, 209, 102, .12); color:#ffd166; }

/* ---- DayTag ---- */
.badge.day1, .badge[data-day="DAY1"] { color:#ffd166; border-color:#8a6e2f; background:rgba(255,209,102,.12); }
.badge.day2, .badge[data-day="DAY2"] { color:#6ee7ff; border-color:#2a5064; background:rgba(110,231,255,.12); }
.badge.day3, .badge[data-day="DAY3"] { color:#b9f27c; border-color:#2f5a2a; background:rgba(185,242,124,.12); }

/* ---- FS Button (목록 카드 우상단 링크) ---- */
.fs-btn { position:absolute; top:8px; right:8px; font-size:20px; padding:6px 10px; border-radius:10px; border:1px solid var(--border); background: rgba(10,15,25,.75); color:var(--text); cursor:pointer; z-index: 20; }
.fs-btn:hover { transform: scale(1.05); }

/* ---- Player Page ---- */
.player-wrap { padding: 18px; }
.player-box {
  position:relative; max-width: 960px; margin: 12px auto;
  background: var(--card); border:1px solid var(--border);
  border-radius: 14px; overflow:hidden; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.player-box .player { width:100%; height:auto; aspect-ratio:16/9; display:block; position: relative; z-index: 1; background:#000; }

/* ===== Upload page (u-*) ===== */
.u-wrap { padding: 18px; }
.u-card { max-width: 720px; margin: 16px auto; background: var(--card); border:1px solid var(--border); border-radius:16px; box-shadow: 0 8px 28px rgba(0,0,0,.18); overflow: hidden; }
.u-head { padding: 14px 16px; border-bottom: 1px solid var(--border); background:#0d1626; display:flex; align-items:center; justify-content:space-between; }
.u-head h2 { margin:0; font-size:16px; letter-spacing:.2px; }
.u-body { padding: 16px; }

.u-form { display:grid; grid-template-columns: 1fr; gap: 14px; }
.field { display:grid; gap:8px; }
.field label { font-size:12px; color: var(--muted); }

.u-file { width:100%; background:#0f1829; color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:14px; outline:none; }
.u-file:focus { border-color:#284064; box-shadow:0 0 0 3px rgba(40,64,100,.25); }

/* DAY 태그 segmented */
.seg { display:flex; gap:8px; flex-wrap:wrap; }
.seg input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.seg label { padding:8px 12px; border:1px solid var(--border); border-radius:999px; cursor:pointer; font-size:13px; color:var(--muted); background:#0f1829; user-select:none; transition: transform .1s ease, border-color .2s ease; }
.seg label:hover { border-color:#284064; }
.seg input[type=radio]:checked + label { color:#0b1220; background:var(--accent); border-color:transparent; }

.u-status { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; }
.u-progress { width:100%; height:10px; appearance:none; }
.u-progress::-webkit-progress-bar { background:#0b1424; border-radius:999px; border:1px solid var(--border); }
.u-progress::-webkit-progress-value { background:var(--accent); border-radius:999px; }

.u-actions { margin-top: 6px; display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.u-actions .btn.primary { min-width: 120px; }

.u-error { color:#ff7b7b; margin-top:4px; }

@media (max-width: 520px){ .u-card { border-radius: 12px; } }

/* ---- 워터마크 오버레이 ---- */
.player-box, .thumb { position: relative; }
.wm { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.wm .wm-item {
  position: absolute; transform: translate(-50%, -50%) rotate(-18deg);
  opacity: .15; color: rgba(230,241,255,.9); font-weight: 600; white-space: nowrap;
}

/* ---- 전체화면 버튼(상단 오버레이) ---- */
.fs-fab {
  position:absolute; top:8px; right:8px;
  z-index: 50; font-size:20px; padding:6px 10px;
  border-radius:10px; border:1px solid var(--border);
  background: rgba(10,15,25,.85); color:var(--text);
  cursor:pointer; pointer-events:auto; transition: opacity .25s ease;
}
.fs-fab:hover { transform: scale(1.05); }
.player-box:fullscreen .fs-fab,
.player-box:-webkit-full-screen .fs-fab,
.player-box.webfs .fs-fab { position:absolute; top:8px; right:8px; }

/* (하위 호환) 커스텀 FS 버튼 기본 스타일 */
.fs-toggle { position:absolute; top:8px; right:8px; z-index: 30; font-size:20px; padding:6px 10px; border-radius:10px; border:1px solid var(--border); background: rgba(10,15,25,.85); color:var(--text); cursor:pointer; }
.fs-toggle:hover { transform: scale(1.05); }

/* ✅ 네이티브 컨트롤 숨김 (커스텀 진행바 사용) */
.player-box video::-webkit-media-controls { display:none !important; }
.player-box video::-webkit-media-controls-enclosure { display:none !important; }

/* ---- 표준/브라우저별 전체화면에서도 오버레이 유지 ---- */
.player-box:fullscreen .wm,
.player-box:-webkit-full-screen .wm,
.player-box:-moz-full-screen .wm,
.player-box:-ms-fullscreen .wm { position: absolute; inset: 0; }

/* ========= 커스텀 진행바 & 컨트롤 (슬림/확장) ========= */
/* 중앙 원형 재생 버튼(FAB) — 중앙 고정 강화 */
.play-fab{
  position:absolute; left:50%; top:50%;
  transform:translate3d(-50%, -50%, 0); /* 중앙 밀림 방지 */
  width:60px; height:60px; border-radius:999px;
  background: rgba(10,15,25,.85); color: var(--text);
  border:1px solid var(--border); display:grid; place-items:center;
  font-size:24px; font-weight:700; z-index:58;
  transition: opacity .25s ease, transform .15s ease;
}
/* UI 숨김 시 오버레이들 비활성 */
.player-box .ctrl-bar, .player-box .fs-fab, .player-box .play-fab { transition: opacity .25s ease; }
.player-box.ui-hidden .ctrl-bar,
.player-box.ui-hidden .fs-fab,
.player-box.ui-hidden .play-fab { opacity:0; pointer-events:none; }

/* 하단 컨트롤 바: 기본은 얇은 라인만 (패딩 최소화) */
.ctrl-bar{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; gap:10px;
  padding:0 10px 12px;
  z-index: 35;
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 60%, transparent);
}
.ctrl-btn { appearance:none; border:1px solid var(--border); background:#0f1829; color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer; font-size:13px; }
.ctrl-btn:hover { border-color:#284064; }

/* 재생 버튼은 숨김(좌측은 ±10초만) */
.ctrl-btn.play { display:none; }
.time { font-size:12px; color: var(--muted); white-space:nowrap; display:none; }
.player-box.ui-expanded .time, .player-box.seeking .time { display:inline; }

/* 진행바: 기본 3px 초슬림 */
.progress{
  position:relative; flex:1 1 auto;
  height:3px; border-radius:999px;
  background: rgba(255,255,255,.15);
  cursor:pointer; outline:none; margin-left:6px;
}
.player-box.ui-expanded .progress,
.player-box.seeking .progress{ height:14px; }

.progress-buffer{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius:999px; background: rgba(255,255,255,.28);
}
.progress-played{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  border-radius:999px; background: var(--accent);
}
.progress-handle{
  position:absolute; top:50%; left:0%;
  transform: translate(-50%, -50%);
  width:12px; height:12px; border-radius:999px;
  background:#fff; box-shadow:0 0 0 3px rgba(91,192,190,.35);
  display:none;
}
.player-box.ui-expanded .progress-handle,
.player-box.seeking .progress-handle{ display:block; }

/* 포커스 시 오라 */
.progress:focus { box-shadow: 0 0 0 3px rgba(91,192,190,.25); }

/* 웹-풀스크린 모드에서도 컨트롤 위치 유지 */
.player-box.webfs .ctrl-bar { padding: 0 12px 14px; }

/* 작은 화면 대응 */
@media (max-width: 480px){
  .ctrl-bar { gap:8px; padding:0 8px 10px; }
  .ctrl-btn { padding:6px 8px; font-size:12px; }
  .time { display:none; }
}

/* ---- Cards ---- */
.card { max-width:560px; margin:24px auto; padding:16px; border:1px solid var(--border); border-radius:12px; background: var(--card); }
label { display:block; margin:12px 0 6px; }
.error { color:#ff7b7b; padding: 0 18px; }
progress { margin-top:8px; width: 100%; }

/* Links */
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ 로그인 화면 ============ */
.auth-wrap { min-height: 100dvh; display:grid; place-items:center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, rgba(91,192,190,.12), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border:1px solid var(--border); border-radius:16px; padding: 22px 20px 20px; box-shadow: 0 10px 36px rgba(0,0,0,.25); }
.auth-head { text-align:center; margin-bottom: 12px; }
.logo-dot { width: 12px; height:12px; border-radius:999px; background: var(--accent); display:inline-block; margin-bottom: 8px; }
.auth-title { margin: 0; font-size: 20px; letter-spacing:.2px; }
.auth-sub { margin: 6px 0 0; color: var(--muted); font-size: 13px; }

/* 폼 */
.auth-form { margin-top: 14px; display: grid; gap: 12px; }
.form-row { display:block; }
.form-label { display:block; font-size: 12px; color: var(--muted); margin: 0 0 6px; }

.input, input[type=text], input[type=password], input[type=email] {
  width: 100%;
  background: #0f1829;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.input::placeholder { color: #6f86aa; }
.input:focus { border-color: #284064; box-shadow: 0 0 0 3px rgba(40,64,100,.25); }

.pw-row { display:flex; gap:8px; align-items:center; }
.pw-row .input { flex: 1; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--muted); }
.btn.ghost:hover { color: var(--text); border-color: #284064; }

.auth-submit { width: 100%; margin-top: 6px; }
.auth-foot { margin-top: 12px; text-align:center; font-size: 12px; color: var(--muted); }

/* 모바일 여백/폰트 미세조정 */
@media (max-width: 480px) {
  .auth-card { padding: 20px 16px 16px; }
  .auth-title { font-size: 18px; }
}

/* ========== 목록 썸네일 ========== */
.thumb { position: relative; background:#000; }
.thumb-link { display:block; }
/*.poster { width:100%; aspect-ratio: 16 / 9; display:block; object-fit: cover; background:#000; } */
.poster { width: 100%; height: cover; display: block; background: #000; }
.poster.placeholder { display:grid; place-items:center; color: var(--muted); background: linear-gradient(135deg, #0e1728 0%, #0b1423 40%, #0a1320 100%); font-size: 12px; letter-spacing: .3px; }

/* 호버 효과(선택) */
.thumb-link:hover .poster { filter: brightness(1.03); }

/* ===== 로그인 폼 오버플로우/반응형 픽스 ===== */
*, *::before, *::after { box-sizing: border-box; }
.auth-wrap { min-height: 100dvh; display:grid; place-items:center; padding: 24px; background: radial-gradient(1200px 600px at 10% -10%, rgba(91,192,190,.12), transparent 60%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border:1px solid var(--border); border-radius:16px; padding: 20px; box-shadow: 0 10px 36px rgba(0,0,0,.25); overflow: hidden; }
.auth-form { width: 100%; display: grid; gap: 12px; }
.form-row { min-width: 0; }
.input, input[type=text], input[type=password], input[type=email] {
  width: 100%; min-width: 0; /* flex 컨테이너 내 오버플로우 방지 */
  background: #0f1829; color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 16px; /* iOS 확대 방지 */
}
.pw-row { display:flex; gap:8px; align-items:center; flex-wrap: nowrap; }
.pw-row .input { flex: 1 1 auto; min-width: 0; }
.pw-row .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 420px) { .auth-card { padding: 16px; } }

/* ===== Video 상세 헤더 반응형 정렬/크기 픽스 ===== */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.topbar > a.btn { flex: 0 0 auto; white-space: nowrap; }
.topbar nav { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.topbar nav form { margin: 0; }
.topbar nav .btn { white-space: nowrap; }

.topbar-title { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-title h1 { margin: 0; font-weight: 600; font-size: clamp(15px, 3.6vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-title .badge { flex: 0 0 auto; font-size: 10.5px; padding: 2px 6px; line-height: 1.2; }

@media (max-width: 640px) {
  .topbar { padding: 12px 14px; }
  .topbar .btn { padding: 6px 9px; font-size: 13px; border-radius: 8px; }
  .topbar-title h1 { font-size: clamp(14px, 4.2vw, 17px); }
}
@media (max-width: 420px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar .btn { padding: 5px 8px; font-size: 12px; }
  .topbar-title { gap: 6px; }
  .topbar-title h1 { font-size: 14px; }
  .topbar-title .badge { font-size: 10px; padding: 2px 5px; }
}
.topbar .btn { line-height: 1.1; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   Fullscreen / webFS — 상단 띠 방지: 컨테이너 fixed + inset:0
   컨트롤은 '바닥에서 살짝 올림' + 안전영역 보정
   ========================================================= */

/* 네이티브 Fullscreen 컨테이너 */
.player-box:fullscreen,
.player-box:-webkit-full-screen {
  position: fixed;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  width: 100vw; height: 100lvh; /* height: auto; */
  background: #000; padding: 0; margin:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
}
@supports not (height: 100lvh) {
  .player-box:fullscreen,
  .player-box:-webkit-full-screen { min-height: 100dvh; }
}
@supports not (height: 100dvh) {
  .player-box:fullscreen,
  .player-box:-webkit-full-screen { min-height: 100vh; }
}

/* 네이티브 FS 내부 비디오 */
.player-box:fullscreen .player,
.player-box:-webkit-full-screen .player {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  transform: translateY(var(--fs-shift-y, 0));
}

/* webFS 컨테이너 */
.player-box.webfs {
  position: fixed !important; inset: 0 !important;
  width: 100vw !important; height: 100lvh !important;
  background: #000; z-index: 9999; border: 0 !important; border-radius: 0 !important;
  display: flex; align-items: center; justify-content: center;
}
@supports not (height: 100lvh) { .player-box.webfs { min-height: 100dvh !important; } }
@supports not (height: 100dvh) { .player-box.webfs { min-height: 100vh !important; } }

.player-box.webfs .player {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center center;
  transform: translateY(var(--fs-shift-y, 0));
}
.player-box.webfs .wm { inset: 0; }
body.webfs-lock { overflow: hidden; }


/* ================================
   Fullscreen 오프셋: 통일된 변수 체계
   - --fs-video-lift : 비디오 자체를 위/아래로 이동(translateY)
   - --fs-ui-lift    : 컨트롤바를 바닥에서 추가로 띄우는 값
   - --fs-fab-lift   : 중앙 재생 버튼(FAB)을 위로 올리는 값
   ================================ */

/* 기본값(풀스크린 진입 시) */
.player-box:fullscreen,
.player-box:-webkit-full-screen,
.player-box.webfs {
  --fs-video-lift: 0;
  --fs-ui-lift: 0;
  --fs-fab-lift: 0;
}

/* 세로(포트레이트): 영상 조금 위로, UI는 기본 */
@media (orientation: portrait) {
  .player-box:fullscreen,
  .player-box:-webkit-full-screen,
  .player-box.webfs {
    --fs-video-lift: -10svh;   /* 이전 -8svh → -6svh (조금만 올리기) */
    --fs-ui-lift: 0;
    --fs-fab-lift: 7svh;      /* FAB도 조금 더 위로 */
  }
}

/* 가로(랜드스케이프): 영상도 약간 위로, UI는 확실히 띄우기 */
@media (orientation: landscape) {
  .player-box:fullscreen,
  .player-box:-webkit-full-screen,
  .player-box.webfs {
    --fs-video-lift: -4svh;   /* 0 → -4svh (영상/플레이버튼 살짝 위) */
    --fs-ui-lift: 88px;       /* 50px → 88px (툴바 완전히 회피) */
    --fs-fab-lift: 18px;      /* 10px → 18px (FAB도 함께 위로) */
  }
}

/* 1) 비디오(컨텐츠) 이동 — 이전의 --fs-shift-y 사용부를 이걸로 교체 */
.player-box:fullscreen .player,
.player-box:-webkit-full-screen .player,
.player-box.webfs .player {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: translateY(var(--fs-video-lift));  /* ← 통일된 이름 */
}

/* 2) 컨트롤바 — 바닥 기준 + 안전영역 + 추가 오프셋(--fs-ui-lift) */
.player-box:fullscreen .ctrl-bar,
.player-box:-webkit-full-screen .ctrl-bar,
.player-box.webfs .ctrl-bar {
  /* 바닥 고정 + 안전영역 위로 */
  bottom: calc(max(12px, env(safe-area-inset-bottom) + 12px) + var(--fs-ui-lift));
  margin-bottom: 0; /* 이전 코드의 margin-bottom 보정 제거(중복 막기) */
  /* (필요 없다면 background 그라데이션/패딩은 기존값 유지) */
}

/* 3) 중앙 재생 버튼(FAB) — 화면 중앙에서 위로 오프셋 */
.player-box:fullscreen .play-fab,
.player-box:-webkit-full-screen .play-fab,
.player-box.webfs .play-fab {
  top: calc(50% - var(--fs-fab-lift));
}

/* 4) FS 버튼은 기존처럼 우상단(안전영역 반영) */
.player-box:fullscreen .fs-fab,
.player-box:-webkit-full-screen .fs-fab,
.player-box.webfs .fs-fab {
  top: calc(8px + env(safe-area-inset-top));
  right: calc(8px + env(safe-area-inset-right));
  z-index: 50;
  pointer-events: auto;
}


/* 전체화면 중 문서 배경 강제 검정(상단 띠 방지용) */
body.fs-active { background: #000 !important; }