/*
 * 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 에는 영상 좌우 가운데에 컨트롤이 없어 그 단추가 가릴 것도 없다. */
@media (max-width: 39.99rem) {
  [data-video-playing] [data-video-mobile-controls] {
    visibility: hidden;
  }
}

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