/* ============================================================
   갈라리 피드 — 세로(릴스 그리드) / 가로(유튜브 리스트)
   ============================================================ */
.glf-wrap { max-width: 720px; margin: 0 auto; padding-bottom: calc(90px + env(safe-area-inset-bottom,0)); min-height: 100dvh; }

/* 헤더 */
.glf-head {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 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);
}
.glf-back, .glf-add {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: #eaeaf0;
}
.glf-back svg { width: 22px; height: 22px; }
.glf-add { background: #3b82f6; color: #fff; font-size: 22px; font-weight: 300; margin-left: auto; }
.glf-title { font-size: 19px; font-weight: 900; color: #fff; letter-spacing: .3px; }

/* 세로/가로 토글 */
.glf-seg { display: flex; gap: 6px; padding: 12px; }
.glf-seg button {
  flex: 1; padding: 9px; border-radius: 12px; cursor: pointer;
  background: #101116; border: 1px solid rgba(255,255,255,.08);
  color: #9aa0ae; font-size: 13.5px; font-weight: 800;
}
.glf-seg button.active { color: #fff; background: rgba(74,158,255,.16); border-color: rgba(74,158,255,.45); }

/* 세로 = 3열 릴스 그리드(3:4) */
.glf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px; }
.glf-tile {
  position: relative; aspect-ratio: 3/4; overflow: hidden; background: #0d0d0f; cursor: pointer;
  border-radius: 4px;
}
.glf-tile img, .glf-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.glf-tile .glf-play { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.glf-tile .glf-multi { position: absolute; top: 8px; right: 8px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
.glf-tile .glf-meta {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px;
  background: linear-gradient(transparent, rgba(0,0,0,.6));
  color: #fff; font-size: 11px; font-weight: 800; display: flex; gap: 10px;
}

/* 가로 = 유튜브식 리스트(16:9) */
.glf-list { display: flex; flex-direction: column; }
.glf-card { cursor: pointer; padding-bottom: 10px; }
.glf-thumb { position: relative; aspect-ratio: 16/9; background: #0d0d0f; overflow: hidden; }
.glf-thumb img, .glf-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.glf-thumb .glf-play-lg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92);
}
.glf-thumb .glf-play-lg svg { width: 54px; height: 54px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); }
.glf-cbody { display: flex; gap: 10px; padding: 10px 12px 0; }
.glf-cava { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: #222; }
.glf-cinfo { min-width: 0; flex: 1; }
.glf-ctitle { font-size: 15px; font-weight: 800; color: #f0f2f8; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.glf-cmeta { margin-top: 4px; font-size: 12px; color: #8b8b93; }

/* 상태 */
.glf-loading, .glf-empty { text-align: center; color: #8b8b93; padding: 60px 20px; font-size: 14px; line-height: 1.7; }
.glf-empty b { color: #cfd5e0; }

/* ── 마이페이지 '모아' — 유튜브 채널 페이지식 섹션 레이아웃 ── */
.mp-yt { padding: 2px 0 10px; max-width: 720px; margin: 0 auto; }
.mp-yt-sec { padding: 12px 0 16px; border-bottom: 8px solid rgba(255,255,255,.045); }
.mp-yt-sec:last-child { border-bottom: 0; }
.mp-yt-h { display: inline-flex; align-items: center; gap: 3px; font-size: 18px; font-weight: 900;
  color: #f2f4f8; margin: 2px 14px 12px; letter-spacing: -.3px; cursor: pointer; }
.mp-yt-more { font-size: 22px; font-weight: 700; color: #9aa0ae; line-height: 1; margin-top: -1px; }
.mp-yt-h:active { opacity: .6; }
.mp-yt-ph { width: 100%; height: 100%; background: linear-gradient(150deg, #20222b, #12131a); }

/* 갈라·숏판 = 세로 9:16 3열 그리드 */
.mp-sh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 0 3px; }
.mp-sh-cell { position: relative; aspect-ratio: 9/16; overflow: hidden; border-radius: 10px;
  background: #0d0d0f; cursor: pointer; }
.mp-sh-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-sh-cell::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(transparent, rgba(0,0,0,.62)); pointer-events: none; }
.mp-sh-cap { position: absolute; left: 8px; right: 8px; bottom: 26px; z-index: 1; color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 4px rgba(0,0,0,.7);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-sh-v { position: absolute; left: 8px; bottom: 7px; z-index: 1; color: rgba(255,255,255,.92);
  font-size: 11px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* 롱판 = 16:9 동영상 세로 리스트 */
.mp-lv-list { display: flex; flex-direction: column; }
.mp-lv { cursor: pointer; padding-bottom: 16px; }
.mp-lv-th { position: relative; aspect-ratio: 16/9; background: #0d0d0f; overflow: hidden; }
.mp-lv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-lv-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mp-lv-play svg { width: 48px; height: 48px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.5)); opacity: .95; }
.mp-lv-tt { font-size: 15px; font-weight: 800; color: #f0f2f8; line-height: 1.35; margin: 10px 12px 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-lv-meta { font-size: 12.5px; color: #8b8b93; margin: 4px 12px 0; }

/* 예측·광장 = 애플 뮤직식 컴팩트 리스트(작은 아트워크 + 제목 + 서브) */
.mp-am-list { display: flex; flex-direction: column; padding: 0 8px; }
.mp-am-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; cursor: pointer; }
.mp-am-row + .mp-am-row { border-top: 1px solid rgba(255,255,255,.06); }
.mp-am-art { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: #16171d; }
.mp-am-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-am-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #242631, #14151b); color: #7f8aa8; }
.mp-am-ph svg { width: 24px; height: 24px; }
.mp-am-info { min-width: 0; flex: 1; }
.mp-am-tt { font-size: 15px; font-weight: 700; color: #f0f2f8; line-height: 1.32;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-am-sub { margin-top: 3px; font-size: 12.5px; color: #8b8b93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }