/* 쇼츠 보기 화면 — 블로그·메인 공용 (resources/views/blog/shorts-player.blade.php, public/assets/js/blog-shorts.js)
   유튜브 쇼츠처럼 화면 전체에서 위아래로 넘긴다. 슬라이드 하나 = 화면 높이 하나. */
/* --sw/--sh: 실제로 보이는 화면(visual viewport) 크기. 확대된 상태(iOS 입력창 자동 확대, 핀치 줌)에서도
   보이는 영역에 꼭 맞도록 blog-shorts.js가 --vv-* 값을 넣는다. 값이 없으면 화면 전체. */
.blog-short-dialog {
    --sw: var(--vv-w, 100vw); --sh: var(--vv-h, 100dvh);
    position: fixed; inset: auto; left: var(--vv-x, 0px); top: var(--vv-y, 0px);
    width: var(--sw); max-width: none; height: var(--sh); max-height: none;
    margin: 0; padding: 0; border: 0; background: #0f0f0f; color: #fff; overflow: hidden;
}
.blog-short-dialog::backdrop { background: rgb(0 0 0 / .85); }
.blog-short-dialog[open] { display: block; }

.blog-short-feed {
    height: 100%; overflow-y: auto; overscroll-behavior: contain;
    scroll-snap-type: y mandatory; scrollbar-width: none; outline: none;
}
.blog-short-feed::-webkit-scrollbar { display: none; }

.blog-short-slide {
    display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: center; gap: .75rem;
    padding: 1rem 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always;
}
/* 유튜브 쇼츠(데스크톱)와 같은 크기: 높이 = 화면 높이 - 96px, 9:16, 모서리 12px, 최소 315×560.
   폭이 모자라면 폭에 맞춘다. */
.blog-short-stage {
    position: relative; flex-shrink: 0; overflow: hidden; border-radius: 12px; background: #000;
    height: max(560px, min(calc(var(--sh) - 96px), calc((var(--sw) - 52px) * 16 / 9))); aspect-ratio: 9 / 16;
}
.blog-short-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog-short-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* 영상 가운데 투명 층(데스크톱): 휠로 넘기기·눌러서 재생/일시정지.
   유튜브 조작부 — 위 3.5rem(로고·음량·메뉴), 아래 7.5rem(채널·제목), 오른쪽 4.5rem(좋아요·공유) — 는 비워 둔다. */
.blog-short-tap { position: absolute; inset: 3.5rem 4.5rem 7.5rem 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* 터치 화면은 유튜브 화면을 바로 누르고, 위아래로 밀면 다음 쇼츠로 넘어간다. */
@media (hover: none), (pointer: coarse) { .blog-short-tap { display: none; } }
.blog-short-tap:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.blog-short-caption {
    display: flex; width: max(315px, min(calc((var(--sh) - 96px) * 9 / 16), calc(var(--sw) - 52px))); max-width: calc(var(--sw) - 2rem); box-sizing: border-box;
    align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .875rem; line-height: 1.4;
}
.blog-short-caption-title { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.blog-short-caption a { flex-shrink: 0; color: #d1d5db; text-decoration: underline; text-underline-offset: 3px; }

.blog-short-close, .blog-short-nav-button {
    display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0;
    border: 0; border-radius: 9999px; background: rgb(255 255 255 / .12); color: #fff; font-size: 1.25rem; cursor: pointer;
}
.blog-short-close:hover, .blog-short-nav-button:hover:not(:disabled) { background: rgb(255 255 255 / .24); }
.blog-short-close:focus-visible, .blog-short-nav-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.blog-short-nav-button:disabled { opacity: .3; cursor: default; }
.blog-short-close { position: absolute; top: max(.75rem, env(safe-area-inset-top)); right: .75rem; z-index: 2; }
.blog-short-icon { width: 1.25rem; height: 1.25rem; }
.blog-short-nav { position: absolute; right: 1.5rem; top: 50%; z-index: 2; display: flex; flex-direction: column; gap: .75rem; transform: translateY(-50%); }
.blog-short-count { display: none; }
/* 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 */
html:has(.blog-short-dialog[open]) { overflow: hidden; }

/* 폰: 유튜브 앱 쇼츠처럼 영상을 가로 꽉 채우고, 위에는 얇은 상단 줄(순서·닫기), 아래에는 제목.
   손가락으로 위아래로 밀어 넘기므로 화살표 버튼은 숨긴다. */
@media (max-width: 639.98px) {
    .blog-short-dialog { --short-top: calc(3.25rem + env(safe-area-inset-top)); --short-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
    .blog-short-nav { display: none; }
    .blog-short-slide { justify-content: flex-start; gap: 0; padding: var(--short-top) 0 0; }
    /* 폭에 맞추되(9:16) 화면이 낮으면 제목 자리를 남기고 높이에 맞춘다. */
    .blog-short-stage { height: min(calc(var(--sw) * 16 / 9), calc(var(--sh) - var(--short-top) - var(--short-bottom))); max-width: var(--sw); border-radius: 0; }
    .blog-short-caption {
        width: 100%; max-width: none; flex-direction: column; align-items: flex-start; gap: .375rem;
        padding: .875rem 1rem 0; font-size: .9375rem;
    }
    .blog-short-caption-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
    .blog-short-caption a { font-size: .8125rem; color: #aaa; text-decoration: none; }
    .blog-short-caption a::after { content: " ↗"; }
    .blog-short-close { top: calc(.25rem + env(safe-area-inset-top)); right: .375rem; width: 2.75rem; height: 2.75rem; background: transparent; }
    .blog-short-close:hover { background: rgb(255 255 255 / .12); }
    .blog-short-icon { width: 1.5rem; height: 1.5rem; }
    .blog-short-count {
        display: block; position: absolute; top: env(safe-area-inset-top); left: 1rem; z-index: 2;
        line-height: 3.25rem; font-size: .875rem; font-weight: 600; color: #d1d5db; font-variant-numeric: tabular-nums;
    }
}

.blog-short-dialog .blog-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { .blog-short-feed { scroll-behavior: auto; } }