/* [page:shorts] 숏폼 비디오 — 냥볼 톤 */

.shortsRoot{
  position:fixed;inset:0;display:flex;flex-direction:column;
  background:#000;color:#fff;
}
.shortsOverlayTop{
  position:absolute;top:0;left:0;right:0;
  padding:env(safe-area-inset-top,0) 0 0 0;
  z-index:50;pointer-events:none;
  display:flex;align-items:flex-start;justify-content:space-between;
}

/* ── 신고 버튼 (왼쪽 위) ── */
.shortsReportBtn{
  pointer-events:auto;border:none;
  background:rgba(0,0,0,.45);color:rgba(255,255,255,.8);
  font-size:var(--fs-12,12px);font-weight:var(--fw-mid);
  cursor:pointer;padding:6px 14px;white-space:nowrap;
  border-radius:var(--r-full,9999px);margin:var(--g16);
  backdrop-filter:blur(var(--g4));-webkit-backdrop-filter:blur(var(--g4));
}
.shortsReportBtn:active{background:rgba(0,0,0,.7)}

.shortsCloseBtn{
  pointer-events:auto;border:none;border-radius:50%;
  width:var(--g44);height:var(--g44);font-size:var(--fs-20);line-height:1;
  background:rgba(0,0,0,.45);color:rgba(255,255,255,.95);
  cursor:pointer;display:grid;place-items:center;margin:var(--g16);
  backdrop-filter:blur(var(--g4));-webkit-backdrop-filter:blur(var(--g4));
}
.shortsCloseBtn:active{background:rgba(0,0,0,.7)}

.shortsStage{position:fixed;inset:0;z-index:10}
.shortsFrame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:#000;transform:translateY(0);
}
.shortsFrameHidden{visibility:hidden}
.shortsGesture{position:absolute;top:0;left:0;right:0;z-index:40;background:transparent;touch-action:none}

.shortsMessage{
  position:absolute;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:var(--fs-22);font-weight:var(--fw-bold);
  background:#000;padding:var(--g24);
  white-space:pre-line;
  pointer-events:auto;
}

.shortsBanner{
  position:absolute;left:0;right:0;bottom:0;z-index:46;
  display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:var(--fs-14);font-weight:var(--fw-mid);
  background:rgba(0,0,0,.7);
  padding:var(--g12) var(--g16) calc(var(--g12) + env(safe-area-inset-bottom));
  white-space:pre-line;
  backdrop-filter:blur(var(--g4));-webkit-backdrop-filter:blur(var(--g4));
}

.shortsMetaRow{
  position:absolute;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;
  padding:var(--g32) var(--g16) calc(var(--g16) + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 100%);
  pointer-events:none;gap:8px;
  text-shadow:0 1px var(--g4) rgba(0,0,0,.8);
}
.shortsMeta{
  flex:1;min-width:0;
  font-size:var(--fs-14);font-weight:var(--fw-mid);
  color:rgba(255,255,255,.95);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.shortsMeta--lineup{
  line-height:1.5;text-align:left;padding-top:48px;
  display:block;pointer-events:auto;white-space:normal;flex-basis:100%;
}
.shortsMeta-header{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;
}
.shortsMeta-title{
  font-size:var(--fs-12);opacity:.8;letter-spacing:1px;
}
.shortsMeta-row{white-space:nowrap}
.shortsMeta-row--withBtn{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.shortsMeta-row--withBtn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.shortsBounce{animation:shortsBounce 220ms ease-out}
@keyframes shortsBounce{
  0%{transform:translateY(0)}50%{transform:translateY(var(--bounce,var(--g20)))}100%{transform:translateY(0)}
}

.shortsSkipBtnInline{
  flex-shrink:0;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-full);
  padding:4px 12px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);
  font-size:var(--fs-12);font-weight:var(--fw-bold);cursor:pointer;
  white-space:nowrap;backdrop-filter:blur(var(--g4));-webkit-backdrop-filter:blur(var(--g4));
}
.shortsSkipBtnInline:active{background:rgba(0,0,0,.8)}

/* ── 신고 바텀시트 ── */
.shortsReportSheet{position:absolute;inset:0;z-index:100}
.shortsReportSheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.shortsReportSheet-content{
  position:absolute;bottom:0;left:0;right:0;
  background:#1a1a2e;border-radius:16px 16px 0 0;padding:20px 16px env(safe-area-inset-bottom,12px);
  display:flex;flex-direction:column;gap:8px;
}
.shortsReportSheet-title{
  color:rgba(255,255,255,.9);font-size:15px;font-weight:600;
  text-align:center;padding-bottom:8px;
}
.shortsReportSheet-option{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:rgba(255,255,255,.1);color:#fff;font-size:14px;
  text-align:center;cursor:pointer;
}
.shortsReportSheet-option:active{background:rgba(255,255,255,.2)}
.shortsReportSheet-cancel{
  width:100%;padding:14px;border:none;border-radius:10px;
  background:transparent;color:rgba(255,255,255,.5);font-size:14px;
  text-align:center;cursor:pointer;margin-top:4px;
}
.shortsReportSheet-cancel:active{color:rgba(255,255,255,.8)}