/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── 낙찰 없는(unfilled) AdSense 슬롯 접기 ─────────────────────────────────
 *
 * 구글은 낙찰이 없으면 ins 에 data-ad-status="unfilled" 를 찍을 뿐 **슬롯을 접어 주지 않는다** -
 * 접는 것은 게시자가 CSS 로 직접 하라는 것이 공식 권장이다. 이 규칙이 없던 동안, push 처리
 * 시점에 구글 스크립트가 응답형 계산으로 ins 에 박아 둔 명시 크기(모바일 실측 ~400px)가 낙찰
 * 없이 그대로 남아, 목록·피드 곳곳에 흰 카드(광고 래퍼의 테두리·배경)만 떠 있었다.
 *
 * .ad-slot 은 광고 래퍼 자신(shared/_ad_unit), .ad-shell 은 **광고만 담는 겉 래퍼**다 -
 * 목록 격자의 줄 차지 칸, 피드의 한 화면 칸, 모달의 구분선+"광고" 라벨 묶음처럼 광고가 접힐 때
 * 함께 사라져야 할 것들이 이 클래스를 단다(광고 말고 다른 내용이 있는 래퍼에는 달지 않는다 -
 * :has 가 래퍼째 숨기므로 다른 내용까지 사라진다).
 *
 * 이 접기 때문에 unfilled 슬롯은 노출 전환 재요청 대상에서도 빠졌다(adsense_controller.js) -
 * 접힌 요소는 다시 "보이게" 될 수 없어 전환 신호 자체가 오지 않고, 재요청하면 새 ins 가 상태
 * 없이 서는 순간 래퍼가 도로 펴져 화면이 출렁인다. 회귀 고정은 adsense_recovery_test.
 *
 * unfilled 만이 아니다. 구글은 문서 밖 상태값도 찍는다 - 운영 실측(2026-08-31, 넓은 모바일
 * 폭 624px)에서 **unfill-optimized** 가 관측됐고, 그 슬롯도 낙찰 없이 명시 크기로 서 있었다.
 * unfilled 정확 일치로만 접으면 이 상태가 빈 칸으로 남으므로 함께 접는다. filled 외의 종결
 * 상태를 전부 나열할 수는 없어(비문서화), 관측된 값을 여기와 아래 :is() 목록에 더해 간다.
 *
 * .ad-fallback 은 광고가 접힐 때 그 자리에 대신 서는 하우스 배너다(shared/_ad_unit 의 fallback
 * 옵션 - 광고 래퍼 바로 뒤 형제로 렌더된다). 평소에는 숨어 있다가 unfilled 인 순간에만 나온다.
 * 폴백이 있는 겉 래퍼(.ad-shell)는 접지 않는다 - 접으면 배너까지 함께 사라져 폴백이 설 자리가
 * 없다. 낙찰을 만들 수는 없어도 빈자리를 우리 안내로 채울 수는 있다는 것이 이 폴백의 전부다.
 *
 * **이 규칙이 tailwind/application.css 가 아니라 여기 있는 이유**: 이 파일은 @layer 밖이라
 * Tailwind 의 어떤 레이어보다 세다. 광고 래퍼 중에는 유틸리티로 display 를 받는 것이 있어
 * (피드 한 화면 칸의 flex, 개발 placeholder 의 flex) @layer components 로 옮기면 특이도와
 * 무관하게 utilities 에 져 **접기가 조용히 멈춘다**. 큰글씨 모드 규칙이 tailwind 쪽 파일 맨
 * 아래 @layer 밖에 모여 있는 것도 같은 이유인데, 그쪽은 html.silver 로 묶인 한 덩어리라
 * 전역 규칙인 이것을 끼워 넣을 자리가 아니다. 옮길 일이 생기면 "@layer 밖" 만은 지킬 것.
 *
 * data-adsense-empty 는 응답 상태가 끝내 오지 않은 슬롯이다 - 재요청까지 다 썼는데도 보이는 자리에서
 * 응답이 없으면 adsense_controller.js(#giveUp)가 ins 를 떼고 래퍼에 단다(폴백 배너가 있거나 모달 안이면 곧바로, 아니면
 * 보이는 동안 자리를 투명하게 지키다가 화면 아래로 벗어날 때 - data-adsense-blank 주석). 구글이 아무 상태도 찍지
 * 않으니 위 :has 판정이 걸리지 않아, 이 표시가 없던 동안 피드 광고 칸은 회색 한 화면 가운데 흰 빈
 * 상자로 남았다(2026-10-06 운영 실측). 처리는 unfilled 와 같다(접기·폴백). */
.ad-slot:has(> ins.adsbygoogle:is([data-ad-status="unfilled"], [data-ad-status="unfill-optimized"])),
.ad-slot[data-adsense-empty],
.ad-shell:has(ins.adsbygoogle:is([data-ad-status="unfilled"], [data-ad-status="unfill-optimized"])):not(:has(.ad-fallback)),
.ad-shell:has(.ad-slot[data-adsense-empty]):not(:has(.ad-fallback)) {
  display: none;
}

.ad-fallback {
  display: none;
}

/* 보이는 자리에서 포기한 슬롯 - 자리(높이)는 그대로 두고 흰 빈 상자만 감춘다. ins 는 이미 뗐다(숨긴 광고가 아니다).
 * 래퍼째 접는 것은 화면 아래로 벗어난 뒤다(adsense_controller.js 의 #giveUp - 보이는 채 접으면 화면이 당겨진다). */
.ad-slot[data-adsense-blank] {
  visibility: hidden;
}

.ad-slot:has(> ins.adsbygoogle:is([data-ad-status="unfilled"], [data-ad-status="unfill-optimized"])) + .ad-fallback,
.ad-slot[data-adsense-empty] + .ad-fallback {
  display: block;
}

/* ── 재생 중인 피드 영상 위의 우리 단추 감추기 ──────────────────────────────
 *
 * youtube_embed_controller 가 YouTube 재생 상태(재생 중·버퍼링)로 피드 칸에 data-video-playing 을 달고
 * 멈추면 뗀다. 좁은 화면(Tailwind sm 미만 = 40rem)에서는 영상 위에 얹힌 이동 단추·좋아요·댓글·공유
 * (data-video-mobile-controls)가 YouTube 컨트롤을 덮는다 - 일반 폰 숏츠에서 전체화면 단추 자리를 공유·댓글이
 * 가렸다(2026-10-06 실측). 재생 중에만 감추고 멈추면 다시 보인다. 넓은 화면에서는 단추가 영상 밖이라 그대로다.
 * visibility 로 감춘다 - 자리를 지켜 화면이 튀지 않고, 감춘 단추는 탭도 받지 않는다.
 * 롱폼의 영상 좌우 끝 단추(data-video-mobile-controls="longform")는 75rem(1200px) 미만까지 영상 위에 있다 - 롱폼은 그
 * 폭까지 폰 배치를 쓴다(videos/_cards 의 상자 주석). 두 기준은 Tailwind 의 sm·min-[75rem] 과 같아야 한다.
 * 40rem~75rem 에서는 터치 기기(pointer: coarse)에서만 감춘다 - 그 폭의 롱폼은 화면 가장자리 이동 단추가 없어(75rem 부터
 * 나온다), 마우스로 보는 좁은 PC 창에서 감추면 재생하는 동안 넘길 단추가 화면 어디에도 없었다(검수 2026-10-07). 마우스로
 * 보는 YouTube 에는 영상 좌우 가운데에 컨트롤이 없어 그 단추가 가릴 것도 없다.
 * 좁은 화면이어도 단추가 영상을 실제로 덮지 않는 칸(data-video-controls-clear)은 감추지 않는다(2026-10-13) - 화면이 낮은
 * 폰은 숏츠가 높이에 묶여 좁아지고 좌우가 비어 단추가 영상 밖에 선다. 덮는지는 youtube_embed_controller 가 단추마다 잰다.
 * 표시가 없으면(재기 전·스크립트 실패) 감춘다 - 종전 동작이 기본이다. */
@media (max-width: 39.99rem) {
  [data-video-playing]:not([data-video-controls-clear]) [data-video-mobile-controls] {
    visibility: hidden;
  }
}

@media (max-width: 74.99rem) and (pointer: coarse) {
  [data-video-playing] [data-video-mobile-controls="longform"] {
    visibility: hidden;
  }
}

/* ── 영상 피드 숏츠의 크게 보기 ────────────────────────────────────────────
 *
 * youtube_embed_controller#maximize 가 플레이어 상자와 html 에 data-video-maximized 를 단다. 폭 240px 미만의 숏츠
 * 플레이어에는 YouTube 가 전체화면 단추를 그리지 않아(2026-10-12 실측) 우리가 상자째 화면 전체로 키운다.
 * 상자를 옮기지 않고 자리만 바꾼다 - iframe 은 DOM 에서 옮기면 다시 실려 처음부터 재생된다. 되는 브라우저는 그 위에
 * 브라우저 전체화면(:fullscreen)까지 걸리는데, 그때도 같은 규칙이 그대로 맞는다(UA 의 :fullscreen 이 같은 자리를 준다).
 *
 * **플레이어는 위쪽 띠 아래로 내린다.** [원래 크기로] 단추를 플레이어 위에 띄우면 YouTube API 이용 규칙(플레이어 앞에
 * 어떤 요소도 두지 않는다)에 걸린다. 띠는 3.5rem(단추 44px + 여백)이고 노치·홈 인디케이터 몫(safe-area)을 더한다.
 * 숏츠는 9:16 이라 요즘 폰(19.5:9 안팎)에서는 띠를 빼도 영상이 폭을 다 쓴다.
 *
 * z-index 60: 머리(z-40)·하단 바(z-40) 위다. 상자의 조상에는 쌓임 맥락을 만드는 것이 없어(section·pane 은 position 만
 * 있다 - pane 의 transform 은 좌우로 넘기는 0.6초 동안뿐) 이 값이 문서 맨 위 기준으로 먹는다. pane 의 @container
 * (container-type: inline-size)는 fixed 를 가두지 않는다(2026-10-12 실측).
 *
 * html 의 같은 표시는 스크롤을 잠근다 - 덮인 피드가 밀리면 닫을 때 다른 칸에 서고, 밀려난 플레이어는 넘긴 것으로 보여
 * 멈춘다. 이 규칙들은 tailwind 쪽이 아니라 여기(@layer 밖)에 둔다 - 상자의 absolute·rounded-2xl·hidden 같은 유틸리티를
 * 특이도와 무관하게 이겨야 한다(맨 위 광고 접기 주석과 같은 이유). */
[data-youtube-embed-target="frame"][data-video-maximized] {
  position: fixed;
  inset: 0;
  z-index: 60;
  border-radius: 0;
  box-shadow: none;
  overscroll-behavior: contain;
}

[data-video-maximized] > [data-video-maximize-bar] {
  display: flex;
  height: calc(3.5rem + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}

/* 높이는 값으로 적는다 - iframe 은 대체 요소라 top·bottom 을 함께 줘도 height: auto 면 늘어나지 않고 기본 높이(150px)가 된다. */
[data-video-maximized] > iframe {
  top: calc(3.5rem + env(safe-area-inset-top, 0px));
  height: calc(100% - 3.5rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

html[data-video-maximized] {
  overflow: hidden;
}