/* 영상후원 모아보기 (/video/) — 2026-08-22.
   목적이 하나뿐인 화면이다: **주소를 빨리 찾아서 빨리 복사한다.**
   그래서 카드 전체가 복사 버튼이고, 미리보기·후원링크는 전부 그 다음이다.

   모바일이 기본이다 — 실제로 쓰는 자리가 방송 보면서 한 손으로 만지는 폰이다.
   1열(폰) → 2열(태블릿) → 3열(PC)로만 늘린다. */

@font-face{font-family:Pretendard;font-weight:400;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-Regular.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:500;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-Medium.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:600;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-SemiBold.woff2) format('woff2')}
@font-face{font-family:Pretendard;font-weight:800;font-style:normal;font-display:swap;
  src:url(../assets/fonts/Pretendard-ExtraBold.woff2) format('woff2')}

:root{
  color-scheme:light;
  /* 2026-09-06 브랜드 v4 — 어두운 화면에서 **밝은 지면**으로 전환. app.css :root 값을 옮겨 왔다.
     ⚠️ 변수 이름은 그대로 두고 값만 밝게 바꿨다 — 아래 규칙들이 손대지 않고 산다.
     ⚠️ 골드 「면」 위 글자는 반드시 --ink(11.5:1). 밝은 바탕에 골드를 **글자로 쓰지 마라**
        (#FEC202 on #FAF7F0 = 1.5:1). 글자로 쓸 자리는 --accent-ink(5.0:1).
     ⚠️ --ok(초록)는 「복사됨」 성공 표시라 브랜드 색으로 바꾸지 않는다. 다만 어두운 화면용
        #25C26B 는 흰 바탕에서 2.2:1 이라 못 쓴다 — 같은 뜻의 어두운 초록(#1F7A3D, 5.0:1)으로 다시 잡았다.
        실패 알림은 --danger 로 따로 뺐다 — 강조색과 오류색이 같으면 구분이 사라진다.
     ⚠️ 썸네일·미리보기 프레임은 계속 검다. 영상이 검게 레터박스되는 자리다. */
  --bg:#FAF7F0; --bg-2:#F2EEE4; --card:#FFFFFF; --card-hi:#F7F2E7;
  --line:#E4DED0; --line-soft:#EFEAE0; --line-hi:#D5CDB9;
  --tx:#14120C; --tx2:#4A463C; --tx3:#6E6A5D;
  --accent:#FEC202;          /* GO기릿 본체의 골드 톤을 이어받는다 (구 붉은 톤 #FF3D57) */
  --accent-hi:#FDE114; --accent-lo:#F0A401; --accent-ink:#8A6400; --ink:#14120C;
  --ok:#1F7A3D; --ok-soft:#E7F6EC; --gold:#FEC202; --silver:#D9D9D9;
  --danger:#C0392B; --danger-soft:#FBE9E7;
  --char:#16150F; --char-2:#26241A; --char-text:#F3F0E6; --char-muted:#A8A395;
  --inset:0 1px 2px rgba(20,18,12,.05), 0 2px 8px rgba(20,18,12,.045);
  --lift:0 2px 4px rgba(20,18,12,.06), 0 14px 30px -10px rgba(20,18,12,.13);
  --r:14px; --r-sm:10px; --pad:14px; --maxw:1100px;
  --ease:cubic-bezier(.2,.8,.28,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--tx);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased;
  padding-bottom:calc(28px + env(safe-area-inset-bottom))}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent}
input{font:inherit; color:inherit}
h1,h2{margin:0; font-weight:800; letter-spacing:-.02em}
ul{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
svg{display:block; flex:none}
/* ⚠️ --accent-hi(#FDE114)는 흰 바탕 1.4:1 이라 포커스 링으로 못 쓴다 — 잉크 골드로 (5.4:1) */
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:6px}
/* ⚠️ 클래스 규칙이 기본 [hidden] 보다 명시도가 높아 JS 의 el.hidden 을 무시한다. 못 박아 둔다. */
[hidden]{display:none !important}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}

/* ── 머리 (스크롤해도 검색·필터는 남는다) ── */
.top{position:sticky; top:0; z-index:20; background:rgba(250,247,240,.94);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; gap:10px}
.top .wrap:first-child{padding-top:11px; padding-bottom:9px}
.back{display:grid; place-items:center; width:40px; height:40px; flex:none;
  /* 흰 지면에 흰 버튼이라 테두리가 없으면 사라진다 */
  border-radius:10px; background:var(--card); border:1px solid var(--line); color:var(--tx2)}
.back:hover{background:var(--card-hi); color:var(--tx)}
.ttl{min-width:0}
.ttl h1{font-size:17px; line-height:1.3}
.sub{margin:1px 0 0; font-size:12px; color:var(--tx3); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}

.searchrow{padding-bottom:8px}
.search{display:flex; align-items:center; gap:8px; width:100%; padding:0 12px;
  border:1px solid var(--line); border-radius:11px; background:var(--card);
  box-shadow:var(--inset)}
.search svg{color:var(--tx3)}
.search input{flex:1; min-width:0; padding:11px 0; border:0; background:none;
  font-size:16px}   /* 16px 미만이면 iOS 가 화면을 확대한다 */
/* 밝은 지면에서는 브라우저 기본 플레이스홀더 회색이 너무 옅다 — 못 박는다 (4.7:1) */
.search input::placeholder{color:var(--tx3)}
.search input::-webkit-search-cancel-button{display:none}
.clr{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  color:var(--tx3); background:none; flex:none}
.clr:hover{background:var(--bg-2); color:var(--tx)}

.chiprow{display:flex; flex-wrap:wrap; gap:6px 14px; padding-bottom:10px}
.chips{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none; display:inline-flex; align-items:center; min-height:40px;
  padding:0 14px; border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--tx2); background:var(--card);
  white-space:nowrap; transition:all 140ms var(--ease)}
.chip:hover{color:var(--tx); border-color:var(--tx3)}
.chip.on{background:var(--accent); border-color:var(--accent); color:var(--ink); font-weight:800}
.chip.sm{padding:0 12px; font-size:12px}

/* ── 복사 형식 ── */
.fmtrow{display:flex; align-items:center; gap:10px; margin:16px 0 12px}
.fmtlabel{flex:none; font-size:12px; font-weight:600; color:var(--tx3)}

.note{margin:14px 0; padding:10px 13px; border-radius:var(--r-sm); font-size:13.5px;
  font-weight:600; color:var(--danger); background:var(--danger-soft);
  border:1px solid #F0CFC9}
.empty{margin:40px 0; text-align:center; color:var(--tx3); font-size:14.5px}

/* ── 카드 격자 ── */
.grid{display:grid; grid-template-columns:1fr; gap:9px}
@media (min-width:600px){ .grid{grid-template-columns:1fr 1fr} }
@media (min-width:960px){ .grid{grid-template-columns:1fr 1fr 1fr} }

/* 카드 = 복사 버튼. 안쪽 ▶ 버튼만 예외다.
   ⚠️ 버튼 안에 버튼을 넣을 수 없어서(HTML 규칙) 카드는 <li>, 복사는 그 위에 깐 오버레이다. */
.card{position:relative; display:flex; gap:10px; padding:8px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card); box-shadow:var(--inset);
  transition:background 140ms var(--ease), border-color 140ms var(--ease),
  box-shadow 140ms var(--ease)}
.card:hover{background:var(--card-hi); border-color:var(--line-hi); box-shadow:var(--lift)}
.card.copied{border-color:var(--ok); background:var(--ok-soft)}
.copyhit{position:absolute; inset:0; z-index:1; border-radius:var(--r)}
.copyhit::after{content:''; position:absolute; inset:0}

.thumb{position:relative; flex:none; width:118px; aspect-ratio:16/9; border-radius:9px;
  overflow:hidden; background:#000}
.thumb img{width:100%; height:100%; object-fit:cover}
/* 썸네일이 사라진 영상. 옆 카드의 검은 썸네일과 줄을 맞춰야 격자가 안 흔들린다 */
.thumb.gone{display:grid; place-items:center; color:var(--char-muted); font-size:11px;
  font-weight:600; background:var(--char)}
/* ⚠️ 검은 칩 위 글자다. 본문 색을 물려받게 두면 밝은 테마에서 검정 위 검정이 된다 — 못 박는다 */
.dur{position:absolute; right:4px; bottom:4px; padding:1px 5px; border-radius:5px;
  background:rgba(0,0,0,.82); color:var(--char-text);
  font-size:11px; font-weight:700; letter-spacing:.02em}
/* ▶ 미리보기 — 카드 복사보다 위에 뜬다 */
.play{position:absolute; left:4px; bottom:4px; z-index:2; display:grid; place-items:center;
  width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.72); color:#fff;
  transition:background 140ms var(--ease)}
/* 보이는 원은 26px 그대로, 손가락 타깃만 40px 로 넓힌다(썸네일이 118×66 이라 원을 키울 수 없다) */
.play::before{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%}
.play:hover{background:var(--accent); color:var(--ink)}

.body{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:3px}
.name{font-size:14px; font-weight:600; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  word-break:break-word}
.card.gone .name{color:var(--tx3)}
.meta{display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:11.5px;
  color:var(--tx3); min-width:0}
.meta .by{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag{flex:none; padding:1px 6px; border-radius:5px; font-size:10.5px; font-weight:800}
.tag.hot{color:var(--ink); background:var(--gold)}
.tag.ch{color:var(--ink); background:var(--silver)}
.tag.crew{color:var(--tx2); background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line)}

/* 복사 표시 — 카드 위를 덮는다 */
.done{position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  /* 성공 표시. 밝은 지면에서 반투명 초록은 그냥 「연한 카드」로 보인다 —
     불투명한 초록 판으로 덮고 흰 글자를 얹는다 (5.4:1). */
  border-radius:var(--r); background:var(--ok); color:#FFFFFF;
  box-shadow:0 0 0 1px var(--ok), 0 6px 18px -8px rgba(20,18,12,.35);
  font-weight:800; font-size:15px; letter-spacing:-.01em}

.more{display:block; width:100%; margin:14px 0 0; padding:13px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card); box-shadow:var(--inset);
  font-weight:700; font-size:14px; color:var(--tx2)}
.more:hover{background:var(--card-hi); color:var(--tx)}

/* ── 후원하러 가기 (2026-08-22 목록 아래 → 맨 위로 이동) ──
   ⚠️ **납작하게 유지할 것.** 여기가 화면 첫 블록이라 세로로 자라면 영상이 그만큼 밀린다.
      제목과 설명을 한 줄에 얹고, 그룹 이름(크루원·스태프)은 칩 줄 안에 끼워 넣었다.
      폰에서 두 줄, 넓은 화면에서 한 줄로 끝난다. */
.donate{margin:14px 0 0; padding:13px 15px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--card); box-shadow:var(--inset)}
.donate h2{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px;
  margin-bottom:10px; font-size:14px}
.donate h2 span{font-size:12px; font-weight:500; color:var(--tx2); letter-spacing:0}
.donate h2 b{color:var(--tx); font-weight:700}
.dlinks{display:flex; flex-wrap:wrap; align-items:center; gap:6px}

/* 좁은 화면에서는 **한 줄 가로 스크롤**로 눌러 둔다.
   ⚠️ 이유가 실측이다: 390px 폭에서 그냥 감싸면 칩이 7줄 282px 을 먹고, 스티키 머리(약 150px)와
      합쳐져 **영상 한 장이 첫 화면에 안 들어온다.** 가로 한 줄이면 48px 로 끝난다.
   바로 위 출처·정렬 칩(.chips)이 이미 같은 방식이라 조작법이 따로 배울 게 없다.
   오른쪽 페이드는 「더 있다」는 유일한 신호다 — 지우지 마라. */
@media (max-width:640px){
  .donate{position:relative}
  .dlinks{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; scroll-padding-left:15px}
  .dlinks::-webkit-scrollbar{display:none}
  .dlinks::after{content:''; flex:none; width:1px}   /* 마지막 칩 뒤 여백 확보 */
  .donate::after{content:''; position:absolute; right:1px; bottom:13px; width:34px; height:36px;
    pointer-events:none; border-radius:0 var(--r) var(--r) 0;
    /* ⚠️ 투명 끝을 카드 색으로 맞춘다. 어두운 값(rgba(18,18,22,0))을 남기면 흰 카드 위에
       회색 얼룩이 생긴다 (사파리는 premultiplied 가 아니라 그냥 섞는다). */
    background:linear-gradient(to right, rgba(255,255,255,0), var(--card) 72%)}
}
/* 그룹 구분자 — 칩 사이에 끼는 작은 글씨. 앞쪽에 여백을 더 줘서 묶음이 눈에 잡히게 한다 */
.dsep{flex:none; margin-left:5px; padding-left:9px; border-left:1px solid var(--line);
  font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--tx3)}
.dsep:first-child{margin-left:0; padding-left:0; border-left:0}
.dlink{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:9px;
  background:var(--accent); color:var(--ink); font-size:13px; font-weight:800; white-space:nowrap}
.dlink:hover{filter:brightness(1.12)}
/* 크루원·스태프 칩. 개수가 많아 한 톤 낮추고, 세로 여백은 남겨 오조준을 막는다 */
.dlink.alt{background:var(--bg-2); color:var(--tx); font-weight:600;
  box-shadow:inset 0 0 0 1px var(--line)}
.dlink.alt:hover{background:var(--card-hi); filter:none}

.foot{margin:22px 0 0; font-size:11.5px; line-height:1.7; color:var(--tx3); text-align:center}

/* ── 미리보기 ── */
.pv{position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px;
  background:rgba(20,18,12,.62)}
.pvbox{width:min(720px,100%); border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); overflow:hidden; box-shadow:0 24px 60px -18px rgba(20,18,12,.40)}
.pvhead{display:flex; align-items:center; gap:10px; padding:12px 14px}
.pvhead b{flex:1; min-width:0; font-size:13.5px; font-weight:600; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pvhead button{flex:none; display:grid; place-items:center; width:40px; height:40px;
  border-radius:8px; color:var(--tx2); background:var(--bg-2)}
/* 영상 프레임은 검게 둔다 — 여기를 희게 칠하면 레터박스가 고장 난 것처럼 보인다 */
.pvframe{aspect-ratio:16/9; background:#000}
.pvframe iframe{width:100%; height:100%; border:0; display:block}
.pvcopy{width:100%; min-height:48px; padding:15px; font-weight:800; font-size:15px;
  background:linear-gradient(177deg,#FDE114,#FEC202 46%,#F0A401); color:var(--ink)}

/* ── 알림 ── */
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%); z-index:60; max-width:calc(100vw - 28px); padding:11px 18px;
  border-radius:999px; background:var(--ok); color:#FFFFFF; font-size:13.5px; font-weight:700;
  box-shadow:0 8px 30px -10px rgba(20,18,12,.42); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* 성공 5.4:1 · 실패 5.4:1 — 둘 다 흰 글자다. 어두운 테마의 검은 글자를 그대로 두면
   밝은 지면용으로 어두워진 판 위에서 대비가 2:1 대로 무너진다. */
.toast.warn{background:var(--danger); color:#FFFFFF}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:1ms !important; animation-duration:1ms !important}
}