/* ============================================================
   갈라리 상세 — 세로=쓰레드/인스타식, 가로=유튜브식 + 일반 댓글
   ============================================================ */
.glp { max-width: 640px; margin: 0 auto; min-height: 100dvh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom,0)); }

.glp-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 10px 0;
  background: rgba(10,10,11,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.glp-back { width: 38px; height: 38px; border: none; background: transparent; color: #eaeaf0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.glp-back svg { width: 22px; height: 22px; }
.glp-top-title { font-size: 15px; font-weight: 800; color: #f0f2f8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 작성자 헤드 */
.glp-head { display: flex; align-items: center; gap: 10px; padding: 12px; }
.glp-ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #222; }
.glp-hinfo { flex: 1; min-width: 0; }
.glp-nick { font-size: 14px; font-weight: 800; color: #f0f2f8; }
.glp-time { font-size: 11.5px; color: #8b8b93; margin-top: 1px; }

/* 미디어 */
.glp-media { background: #000; }
.glp-media.vertical video, .glp-media.vertical img { width: 100%; max-height: 78vh; object-fit: contain; display: block; }
.glp-media.horizontal video, .glp-media.horizontal img { width: 100%; aspect-ratio: 16/9; object-fit: contain; display: block; }
/* 캐러셀 */
.glp-carousel { position: relative; }
.glp-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.glp-slides::-webkit-scrollbar { display: none; }
.glp-slides img, .glp-slides video { flex: 0 0 100%; scroll-snap-align: center; width: 100%; max-height: 78vh; object-fit: contain; background: #000; display: block; }
.glp-dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 5px; }
.glp-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.glp-dots i.on { background: #fff; }

/* 제목(가로형) */
.glp-title { font-size: 18px; font-weight: 900; color: #f4f6fb; padding: 12px 12px 4px; line-height: 1.35; }

/* ===== 롱판(유튜브 watch식) ===== */
/* 영상 상단 고정 — 스크롤해도 계속 보임 */
.glp-media.horizontal { position: sticky; top: calc(52px + env(safe-area-inset-top)); z-index: 15; }
.glp-watch { }
.glp-vmeta { padding: 2px 12px 8px; font-size: 12.5px; color: #8b8b93; }
/* 크리에이터 행 */
.glp-creator { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
.glp-ava.sm { width: 38px; height: 38px; }
.glp-cr-info { flex: 1; min-width: 0; }
.glp-cr-sub { font-size: 11.5px; color: #8b8b93; margin-top: 1px; }
.glp-follow-btn { flex: 0 0 auto; border: none; cursor: pointer; padding: 8px 15px; border-radius: 999px;
  background: #3b82f6; color: #fff; font-size: 13px; font-weight: 800; }
.glp-follow-btn.following { background: rgba(255,255,255,.1); color: #cfd5e0; }
/* 설명 접기 */
.glp-desc { position: relative; padding: 12px 14px; }
.glp-desc-body { font-size: 14px; color: #dfe3ec; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.glp-desc.collapsed .glp-desc-body { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glp-desc-more { background: none; border: none; color: #9aa0b0; font-size: 13px; font-weight: 800; cursor: pointer; padding: 6px 0 0; }
/* 다음 영상 */
.glp-related { padding: 6px 0 10px; }
.glp-related-h { font-size: 14px; font-weight: 900; color: #cfd5e0; padding: 10px 14px 6px; }
.glp-rel { display: flex; gap: 10px; padding: 8px 12px; cursor: pointer; }
.glp-rel:active { background: rgba(255,255,255,.03); }
.glp-rel-thumb { position: relative; flex: 0 0 auto; width: 144px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #141420; }
.glp-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.glp-rel-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 20px; }
.glp-rel-info { min-width: 0; flex: 1; }
.glp-rel-t { font-size: 14px; font-weight: 700; color: #eef1f8; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glp-rel-m { font-size: 12px; color: #8b8b93; margin-top: 4px; }

/* 액션바 */
.glp-actions { display: flex; align-items: center; gap: 18px; padding: 10px 14px; }
.glp-act { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  color: #cfd5e0; font-size: 14px; font-weight: 800; }
.glp-act svg { width: 24px; height: 24px; }
.glp-act.on { color: #ff4d67; }
.glp-act.on svg { fill: #ff4d67; }
.glp-support {
  margin-left: auto; display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 8px 16px; border-radius: 999px; border: none;
  background: linear-gradient(135deg, #f5cf6b, #e8a33d); color: #201700; font-size: 13.5px; font-weight: 900;
}
.glp-support:active { opacity: .9; }

/* 후원자 요약(슈퍼챗) */
.glp-donations:not(:empty) { margin: 2px 14px 10px; padding: 10px 12px; border-radius: 12px;
  background: rgba(245,207,63,.07); border: 1px solid rgba(245,207,63,.22); }
.glp-don-sum { font-size: 13px; font-weight: 900; color: #f5cf6b; }
.glp-don-row { font-size: 12.5px; color: #cfd5e0; margin-top: 5px; line-height: 1.45; }
.glp-don-row b { color: #eef1f8; }

/* 캡션/설명 */
.glp-caption { padding: 4px 14px 14px; color: #dfe3ec; font-size: 14.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.glp-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.glp-tags span { font-size: 12px; font-weight: 800; color: #a9c2ff; }

.glp-div { height: 8px; background: rgba(255,255,255,.03); }

/* 댓글 */
.glp-csec { padding: 12px 0 0; }
.glp-ctitle { font-size: 13px; font-weight: 900; color: #9a9aa0; padding: 0 14px 8px; }
.glp-clist { }
.glp-c { display: flex; gap: 10px; padding: 10px 14px; }
.glp-c.reply { padding-left: 46px; }
.glp-cava { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #222; flex: 0 0 auto; }
.glp-cmain { flex: 1; min-width: 0; }
.glp-cnick { font-size: 13px; font-weight: 800; color: #eef1f8; }
.glp-cnick .glp-ctime { font-size: 11px; color: #8b8b93; font-weight: 600; margin-left: 6px; }
.glp-cbody { font-size: 14px; color: #dfe3ec; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.glp-cfoot { display: flex; gap: 14px; margin-top: 5px; font-size: 12px; color: #8b8b93; font-weight: 700; }
.glp-cfoot button { background: none; border: none; color: #8b8b93; font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
.glp-cfoot button.on { color: #ff8595; }
.glp-cempty { text-align: center; color: #8b8b93; padding: 30px; font-size: 13.5px; }

/* 댓글 입력 (하단 고정) */
.glp-cbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 8px; align-items: center; padding: 10px 12px calc(10px + env(safe-area-inset-bottom,0));
  background: rgba(14,14,17,.96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,.07);
}
.glp-cbar input {
  flex: 1; padding: 11px 14px; border-radius: 999px; font-size: 15px;
  background: #0d0d0f; border: 1px solid #1c1c1c; color: #fff;
}
.glp-cbar button {
  border: none; background: #3b82f6; color: #fff; font-weight: 800; font-size: 14px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
}
.glp-cbar button[disabled] { opacity: .5; }
/* 앱(SPA 셸)엔 하단 탭바가 떠 있다(fixed: bottom 14px + safe-area, 높이 ~48px) — bottom:0 이면
   탭바가 입력줄 가운데를 덮었다(2026-09-11 QA). plaza_detail 의 .comment-write 와 같은 높이로 띄운다.
   웹(MPA) 문서엔 탭바가 없으므로 셸에서만. */
body[data-page="spa"] .glp-cbar { bottom: calc(78px + env(safe-area-inset-bottom, 0)); padding-bottom: 10px; }
body[data-page="spa"] .glp { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0)); }

.glp-loading { text-align: center; color: #8b8b93; padding: 80px 20px; }

/* 🔗 원본 보기 — 링크 카드의 본체. 갈라엔 파일이 없고 이 버튼이 전부다. */
.glp-origin{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:calc(100% - 28px); margin:12px 14px 4px; padding:13px 16px;
  border-radius:12px; border:1px solid rgba(127,157,255,.35);
  background:rgba(127,157,255,.10); color:#a9bcff;
  font-size:14px; font-weight:800; font-family:inherit; cursor:pointer;
}
.glp-origin span{ color:#8a8f9c; font-weight:700; }
.glp-origin:active{ transform:scale(.985); }

/* 📐 모바일 폭 끝까지(26.9.19 사장님) — 웹(MPA)에서 브라우저 기본 body 여백 8px 이 남아 화면 전체가 좌우 8px 들어가 있었다 */
body[data-page="gallari-post"] { margin: 0; }