/* =========================================================
   GALLA SHORTS — REAL REELS / SHORTS ENGINE (CSS)
   Native Scroll + Scroll Snap (NO TRANSFORM)
========================================================= */

/* -------------------------
   PAGE ISOLATION
------------------------- */
body[data-page="shorts"] {
  margin: 0;
  padding: 0;
  background: #000;
  /* overflow: hidden;  body scroll locked, container scroll only  -- removed as per instructions */
}

/* legacy header force hide */
body[data-page="shorts"] header,
body[data-page="shorts"] .header {
  display: none !important;
}

/* -------------------------
   OVERLAY (SCROLL CONTAINER)
------------------------- */
#shortsOverlay {
  position: fixed;
  inset: 0;

  width: 100vw;
  height: 100dvh;

  background: #000;
  z-index: 999;

  /* 🔥 JS transform 기반 쇼츠 엔진과 충돌 방지 */
  overflow: hidden;
  touch-action: none;

  box-sizing: border-box;
}

#shortsOverlay::-webkit-scrollbar {
  display: none;
}

/* -------------------------
   SINGLE SHORT ITEM
------------------------- */
.short {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;

  background: #000;
}

/* -------------------------
   VIDEO
------------------------- */
.short video {
  position: absolute;
  inset: 0;
  min-height: 100dvh;

  width: 100%;
  height: 100%;

  object-fit: cover;
  background: #000;

  pointer-events: none; /* 스크롤 방해 차단 */
  transform: translateZ(0);
  will-change: transform;
}

/* -------------------------
   TOP BAR
------------------------- */
.shorts-top {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 12px;
  right: 12px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  z-index: 10;
  pointer-events: auto;
}

#shortsBack {
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 6px 10px;
  border-radius: 10px;
}

/* -------------------------
   ACTION ICONS (RIGHT)
------------------------- */
.shorts-actions {
  position: absolute;
  right: 12px;
  top: 55%;
  bottom: auto;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 16px;

  z-index: 50;
  pointer-events: auto;
}

.shorts-action-btn {
  width: 36px;
  height: 36px;

  background: transparent;
  border: none;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ffffff;
}

.shorts-action-btn svg {
  width: 28px;
  height: 28px;
  stroke: #ffffff;
  fill: none;
  stroke-width: 2.2;
}

/* -------------------------
   VOTE BAR (ALWAYS ABOVE BOTTOM NAV)
------------------------- */
.shorts-vote {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);

  /* 🔥 하단 네비 높이(58px) + safe-area + 여백 */
  bottom: calc(58px + env(safe-area-inset-bottom) + 8px);

  width: calc(100% - 24px);
  max-width: 480px;

  display: flex;
  gap: 12px;

  z-index: 10010;
  pointer-events: auto;
}

.shorts-vote .vote-btn {
  flex: 1;
  padding: 14px 0;
  border-radius: 14px;

  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: 1px solid transparent;
}

/* PRO */
.shorts-vote .pro {
  background: #1a1f3c;
  border-color: #304ffe;
  color: #fff;
}

/* CON */
.shorts-vote .con {
  background: #3c1a1a;
  border-color: #ff5252;
  color: #fff;
}

/* active / locked */
.shorts-vote .active-vote {
  background: #ffe27a !important;
  color: #111 !important;
  border-color: #ffe27a !important;
}

.shorts-vote .locked {
  opacity: 0.6;
  pointer-events: none;
}


/* 하단 네비 safe-area 보정 (SHORTS 전용) */
body[data-page="shorts"] .nav {
  padding-bottom: env(safe-area-inset-bottom);
}

body[data-page="shorts"] .nav {
  height: 58px;
}

/* =========================
   SHORTS 480 CONTAINER
========================= */
#shortsContainer {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
}

#shortsContainer .shorts-actions {
  right: 12px;
}

/* TOP BAR (480 기준) */
.shorts-top {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 12px;
  right: 12px;

  display: flex;
  justify-content: flex-start;
  align-items: center;

  z-index: 50;
}
/* =========================
   SHORTS COMMENT MODAL — ISSUE UI (BATTLE STYLE)
========================= */

#shortsCommentModal{
  position:fixed;
  inset:0;
  z-index:20000;
  display:none;
}
#shortsCommentModal.visible{display:block}

/* DIM */
#shortsCommentModal .comment-dim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}

/* SHEET */
#shortsCommentModal .comment-sheet{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%) translateY(100%);
  width:100%;
  max-width:480px;
  height:92dvh;
  background:#000;
  border-radius:18px 18px 0 0;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 40px rgba(255,255,255,.35);
  will-change:transform;
}

/* HANDLE */
.comment-handle{
  width:36px;
  height:5px;
  border-radius:4px;
  background:#555;
  margin:10px auto 8px;
}

/* ================= WAR DASHBOARD ================= */

.comment-war-header{
  margin:6px 12px 14px;
  padding:14px;
  border-radius:14px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.92)),
    repeating-linear-gradient(45deg,#060606,#060606 6px,#0c0c0c 6px,#0c0c0c 12px);
  box-shadow:0 0 40px rgba(255,255,255,.35);
}

.comment-war-bars{
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}

.comment-war-bars .pro{color:#5bbcff}
.comment-war-bars .con{color:#ff6b6b}

.comment-war-meta{
  font-size:11px;
  opacity:.7;
}

/* ================= STANCE TABS ================= */

.stance-tabs{
  display:flex;
  gap:8px;
  padding:0 12px 12px;
}

.stance-tab{
  flex:1;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg,#1a1a1a,#050505);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.stance-tab.active.pro{
  border-color:#5bbcff;
  box-shadow:0 0 16px rgba(91,188,255,.6);
}

.stance-tab.active.con{
  border-color:#ff6b6b;
  box-shadow:0 0 16px rgba(255,107,107,.6);
}

/* ================= SORT BAR ================= */

.comment-sort{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  gap:8px;
  padding:8px 12px;
  background:#000;
  border-bottom:1px solid rgba(255,255,255,.15);
}

.sort-btn{
  flex:1;
  height:32px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background:#050505;
  color:#fff;
  font-size:12px;
  font-weight:600;
}

.sort-btn.active{
  background:linear-gradient(180deg,#ffffff33,#ffffff10);
  box-shadow:0 0 10px rgba(255,255,255,.45);
  font-weight:800;
}

/* ================= COMMENT LIST ================= */

.comment-list{
  flex:1;
  overflow-y:auto;
  padding:12px;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

/* ================= COMMENT CARD ================= */

.comment{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  padding:10px;
  margin-bottom:8px;
  background:linear-gradient(180deg,#111,#020202);
}

.comment .user{
  font-size:11px;
  opacity:.8;
}

.comment .body{
  font-size:13px;
  margin-top:6px;
}

/* ================= INPUT BAR ================= */

.comment-input{
  position:sticky;
  bottom:0;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.95));
  border-top:1px solid rgba(255,255,255,.2);
  box-shadow:0 -10px 30px rgba(0,0,0,.8);
}

.comment-input input{
  width:100%;
  height:42px;
  border-radius:10px;
  background:#070707;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:0 12px;
  font-size:13px;
}

.comment-input button{
  display:none;
}

/* LOCK SHORTS SCROLL */
body.comment-open #shortsOverlay{
  overflow:hidden;
  touch-action:none;
}