/* ============================================================
   릴스 숏판 슬라이드(레일·하단 작성자·댓글 시트) + 숏판 릴스 페이지 배경판.
   ⚠️ 릴스 엔진은 shorts.js 하나다(2026-09-14 통합). 여기 .grl-* 는 그 엔진 안의
      숏판 슬라이드(js/reels-mix.js)가 쓰는 모양이다.
   ============================================================ */
/* ⚠️ 릴스는 공용 엔진 오버레이(#shortsOverlay, z 900)가 그린다. 이 판은 그 '뒤'에 깔려야 한다
   — 예전 값 3000 이면 '다시 보기' 자리가 릴스를 덮는다(2026-09-14 실측). */
.grl { position: fixed; inset: 0; z-index: 800; background: #000;
  overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.grl::-webkit-scrollbar { display: none; }

.grl-slide { position: relative; width: 100%; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  background: #000; overflow: hidden; display: flex; align-items: center; justify-content: center; }

/* 미디어 */
.grl-media { width: 100%; height: 100%; }
.grl-media video, .grl-media > img { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
/* 사진 캐러셀(가로 스냅) */
.grl-carousel { width: 100%; height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.grl-carousel::-webkit-scrollbar { display: none; }
.grl-carousel img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.grl-cdots { position: absolute; top: calc(env(safe-area-inset-top) + 54px); left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.grl-cdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.45); }
.grl-cdots i.on { background: #fff; }

/* 재생 상태(일시정지 아이콘) */
.grl-playpause { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.grl-playpause.show { opacity: 1; }
.grl-playpause svg { width: 74px; height: 74px; color: rgba(255,255,255,.85); filter: drop-shadow(0 2px 10px rgba(0,0,0,.6)); }

/* 상단바 */
.grl-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 10px;
  height: calc(50px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0;
  background: linear-gradient(rgba(0,0,0,.45), transparent); }
.grl-top .grl-back { width: 38px; height: 38px; border: none; background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.grl-top .grl-back svg { width: 24px; height: 24px; }
.grl-top .grl-tag { font-size: 13px; font-weight: 800; color: #fff; }
.grl-mute { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.4); color: #fff; display: flex; align-items: center; justify-content: center; }
.grl-mute svg { width: 20px; height: 20px; }

/* 숏판 릴스 상단 chrome(인스타식): 좌 진입버튼(+ 또는 ‹) + '릴스' 타이틀 + (우)음소거 */
#grl-chrome { background: linear-gradient(rgba(0,0,0,.5), transparent); }
.grl-nav { width: 40px; height: 40px; margin-left: -8px; border: none; background: transparent;
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent; flex: none; }
.grl-nav:active { opacity: .55; }
.grl-nav svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); }
.grl-chrome-title { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.2px;
  text-shadow: 0 1px 4px rgba(0,0,0,.55); }

/* 우측 액션 레일 */
.grl-rail { position: absolute; right: 10px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 18px; }
.grl-rail .grl-ava { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #333; }
.grl-act { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: none; cursor: pointer; color: #fff; }
.grl-act svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.grl-act b { font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.grl-act.on svg { fill: #ff3b5c; color: #ff3b5c; }
.grl-act.support svg { color: #f5cf6b; }

/* 하단 정보 */
.grl-bottom { position: absolute; left: 0; right: 66px; bottom: 0; z-index: 4;
  padding: 40px 14px calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(0,0,0,.55)); color: #fff; }
.grl-author { font-size: 15px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.6); display: flex; align-items: center; gap: 6px; }
.grl-author .grl-follow { font-size: 11px; font-weight: 800; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; padding: 2px 9px; }
/* 숏판(인스타식) 하단: 아바타 + 아이디 + 팔로우 한 줄 */
.grl-userrow { display: flex; align-items: center; gap: 9px; }
.grl-bava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1.5px solid rgba(255,255,255,.9); background: #333; }
.grl-uname { font-size: 15px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grl-follow2 { flex: none; margin-left: 2px; padding: 5px 14px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.85); background: transparent; color: #fff;
  font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; }
.grl-follow2.following { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8); }
.grl-cap-box { margin-top: 7px; }
.grl-cap { font-size: 13.5px; line-height: 1.45; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grl-cap.open { -webkit-line-clamp: unset; overflow: visible; }
.grl-cap-more { margin-top: 3px; background: none; border: none; padding: 0; cursor: pointer;
  color: #fff; opacity: .82; font-size: 13px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.grl-title { margin-top: 4px; font-size: 15px; font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* 이슈 항목 — 진영바 + 참전 CTA */
.grl-issue-bar { position: absolute; left: 12px; right: 66px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 4; }
.grl-join { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 800; cursor: pointer; }

.grl-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; }
/* 릴스(공용 엔진 오버레이) 뒤에 깔리는 자리 — 프로필·이슈로 갔다가 돌아오면 보인다 */
.grl-idle { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #aaa; font-size: 14px; text-align: center; line-height: 1.6; padding: 24px; }
.grl-idle-btn { min-width: 180px; padding: 13px 20px; border-radius: 14px; border: 0; background: #fff; color: #000; font-size: 15px; font-weight: 800; cursor: pointer; }
.grl-idle-btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); }
/* 피드를 받아오는 동안의 검은 막(누른 뒤 반응 없어 보이지 않게) */
.grl-pending { position: fixed; inset: 0; z-index: 950; background: #000; display: flex; align-items: center; justify-content: center; }
.grl-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; animation: grl-spin .8s linear infinite; }
@keyframes grl-spin { to { transform: rotate(360deg); } }
.grl-end { height: 100dvh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; color: #888; font-size: 14px; text-align: center; line-height: 1.7; }

/* ── 릴스 댓글 바텀시트 ── */
.grl-cdim { position: fixed; inset: 0; z-index: 3200; background: rgba(0,0,0,.5);
  display: flex; align-items: flex-end; opacity: 0; transition: opacity .2s ease; }
.grl-cdim.on { opacity: 1; }
.grl-csheet { width: 100%; max-width: 640px; margin: 0 auto; background: #101014;
  border-radius: 20px 20px 0 0; max-height: 76vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.grl-cdim.on .grl-csheet { transform: none; }
.grl-cgrip { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); margin: 8px auto 2px; }
.grl-chead { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 10px;
  font-size: 15px; font-weight: 900; color: #f0f0f4; border-bottom: 1px solid rgba(255,255,255,.06); }
.grl-chead b { color: #9aa0b0; }
.grl-cx { background: none; border: none; color: #888; font-size: 20px; cursor: pointer; line-height: 1; }
.grl-clist { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6px 0; }
.grl-cempty { text-align: center; color: #888; padding: 40px 20px; font-size: 14px; }
.grl-c { display: flex; gap: 10px; padding: 10px 16px; align-items: flex-start; }
.grl-cava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #222; flex: 0 0 auto; }
.grl-cmain { flex: 1; min-width: 0; }
.grl-cnick { font-size: 13px; font-weight: 800; color: #eef1f8; }
.grl-cnick span { font-size: 11px; color: #888; font-weight: 600; margin-left: 6px; }
.grl-cbody { font-size: 14.5px; color: #e2e5ec; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.grl-clike { flex: 0 0 auto; background: none; border: none; cursor: pointer; color: #8b8b93;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px; }
.grl-clike svg { width: 17px; height: 17px; }
.grl-clike b { font-size: 11px; font-weight: 700; }
.grl-clike.on { color: #ff3b5c; }
.grl-clike.on svg { fill: #ff3b5c; }
.grl-cbar { display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.07); background: #101014; }
.grl-cbar input { flex: 1; padding: 12px 15px; border-radius: 999px; font-size: 15px;
  background: #0a0a0f; border: 1px solid #232330; color: #fff; }
.grl-cbar input:focus { outline: none; border-color: #3b82f6; }
.grl-cbar button { border: none; background: #3b82f6; color: #fff; font-weight: 800; font-size: 14px;
  padding: 11px 18px; border-radius: 999px; cursor: pointer; }
.grl-cbar button[disabled] { opacity: .5; }

/* ⚠️ .grl-act 가 display:flex 라 [hidden] 의 기본 display:none 을 이긴다.
   그래서 숨겨 둔 관리(⋯) 버튼이 비로그인 사용자에게도 그대로 보였다(실측). */
.grl-act[hidden]{ display:none !important; }

/* 🖥 PC — 세로 영상을 창 전체 폭으로 늘리면 좌우가 잘리며 거대하게 확대된다
   (실측: 1565px 창에서 9:16 영상이 화면을 꽉 채워 인물 몸통만 보였다).
   인스타·틱톡 웹처럼 가운데 '폰 한 대' 폭 기둥으로 잡는다.
   ⚠️ 슬라이드 자체를 좁힌다 — 레일·캡션·전황표가 전부 .grl-slide 기준
      absolute 라, 안쪽에 래퍼를 새로 두면 그것들이 창 가장자리에 남는다. */
@media (min-width: 768px) {
  .grl-slide {
    width: min(100%, calc(100dvh * 9 / 16));
    margin-inline: auto;
    border-radius: 0;
  }
  /* 상단 크롬(뒤로·소리)도 같은 기둥에 붙인다. JS 가 left/right:0 을 인라인으로
     주므로 max-width + auto 마진으로 가운데 정렬시킨다. */
  #grl-chrome {
    max-width: min(100%, calc(100dvh * 9 / 16));
    margin-inline: auto;
  }
}