/* 레이아웃: 휴대폰은 탭 전환 + 방송 미니플레이어, 넓은 화면은 왼쪽 방송·채팅 / 오른쪽 라운지 */
:root {
  --bg: #fbf6f4;          /* 살짝 분홍 기운의 종이색 */
  --surface: #ffffff;
  --sunk: #f3eae7;
  --ink: #241820;
  --muted: #7b6870;
  --line: #e8dbd7;
  --rose: #d9345f;        /* 매치 하트 */
  --rose-ink: #ffffff;
  --rose-soft: #fbe3e9;
  --plum: #1c1220;
  --gold: #c98a1a;
  --font-display: "Do Hyeon", "Noto Sans KR", system-ui, sans-serif;
  --font-body: "Noto Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --r: 14px;
  --tabbar-h: 48px; /* 맨 아래 탭바: 채팅 자리를 넓히려고 낮춤 */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #241c29; --surface: #2f2636; --sunk: #2a2130; --ink: #ede3e9; --muted: #b5a3ae;
    --line: #45384d; --rose: #ff5c86; --rose-ink: #1a0b12; --rose-soft: #47253a; --plum: #1b1420; --gold: #e8b04a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #241c29; --surface: #2f2636; --sunk: #2a2130; --ink: #ede3e9; --muted: #b5a3ae;
  --line: #45384d; --rose: #ff5c86; --rose-ink: #1a0b12; --rose-soft: #47253a; --plum: #1b1420; --gold: #e8b04a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { height: 100%; } body { min-height: 100%; box-sizing: border-box; } /* 내용이 길어도 맨 아래 탭바만큼 여백이 남게 */ body[data-view="watch"] { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 var(--font-body);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

/* 상단 */
.top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  background: var(--plum); color: #f7e9ef;
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.logo-mark { display: block; width: 32px; height: 32px; border-radius: 50%; }
.logo-text { font-family: var(--font-display); font-size: 22px; letter-spacing: .5px; }
.logo-text b { font-weight: 400; color: #ff8fab; }
.top-right { display: flex; align-items: center; gap: 10px; }
.online { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #d8c3cc; font-variant-numeric: tabular-nums; }
.online i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61,220,132,.2); }
.icon-btn { background: none; border: 0; font-size: 20px; color: #d8c3cc; cursor: pointer; padding: 4px; }

/* 레이아웃 */
.layout { max-width: 1280px; margin: 0 auto; }
.watch, .lounge, .sheet { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body[data-view="lounge"] .watch, body[data-view="poll"] .watch, body[data-view="post"] .watch, body[data-view="write"] .watch { display: none; }
body[data-view="watch"] .lounge, body[data-view="post"] .lounge, body[data-view="write"] .lounge, body[data-view="channels"] .lounge, body[data-view="my"] .lounge, body[data-view="fans"] .lounge { display: none; }
body[data-view="channels"] .watch, body[data-view="my"] .watch, body[data-view="fans"] .watch { display: none; }
.chs { display: none; }
body[data-view="channels"] #view-channels, body[data-view="my"] #view-my, body[data-view="fans"] #view-fans { display: block; }

/* 플레이어 */
.watch { padding-block: 14px 8px; display: flex; flex-direction: column; gap: 12px; }
/* 더매치는 세로 방송: 9:16 화면을 화면 높이에 꽉 차게 */
.player {
  --player-h: min(
    calc(100vh - 54px - var(--tabbar-h) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
    calc((100vw - 32px) * 16 / 9));
  position: relative; height: var(--player-h); width: auto; aspect-ratio: 9 / 16; max-width: 100%;
  margin-inline: auto;
  background: #0b070c; border-radius: var(--r); overflow: hidden;
}
@supports (height: 100dvh) {
  .player { --player-h: min(
    calc(100dvh - 54px - var(--tabbar-h) - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)),
    calc((100vw - 32px) * 16 / 9)); }
}
.frame-box, .frame-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 20px; color: #f1e3ea;
  background: radial-gradient(120% 90% at 85% 10%, #5a1e3a 0%, transparent 60%), #120b14;
}
.pe-title { margin: 0; font-family: var(--font-display); font-size: clamp(20px, 5vw, 28px); }
.pe-sub { margin: 0; color: #c3aab6; font-size: 14px; max-width: 34ch; }
.pe-actions { margin-top: 10px; }
.player-empty .btn.ghost { border-color: #ffffff40; color: #fff; }

/* 휴대폰 방송 탭: 유튜브 앱처럼 폰 화면(헤더~탭바 사이)에 꽉 차게, 세로 영상은 잘라서 채움 */
@media (max-width: 959px) {
  body[data-view="watch"] .watch { padding: 0 0 calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
  body[data-view="watch"] .watch > :not(.player-slot) { margin-inline: max(16px, env(safe-area-inset-left, 0px)); }
  body[data-view="watch"] .player {
    --pw: 100vw;
    --player-h: calc(100vh - 54px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    width: var(--pw); height: var(--player-h); aspect-ratio: auto; max-width: none; border-radius: 0;
  }
  @supports (height: 100dvh) {
    body[data-view="watch"] .player { --player-h: calc(100dvh - 54px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  }
  body[data-view="watch"] .frame-box { overflow: hidden; }
  /* transform 으로 옮기면 소수점 위치에서 화면이 흐려져서, top/left 로 픽셀에 딱 맞춰 둠 */
  body[data-view="watch"] .frame-box iframe {
    --fw: max(var(--pw), calc(var(--player-h) * 9 / 16));
    --fh: max(var(--player-h), calc(var(--pw) * 16 / 9));
    --lift: .025;  /* 사용자 11-11 "좀만 더 내려" .05 → .025 */
    width: var(--fw); height: var(--fh); transform: none;
    width: round(up, var(--fw), 1px); height: round(up, var(--fh), 1px);
    left: calc((var(--pw) - var(--fw)) / 2);
    top: calc((var(--player-h) - var(--fh)) / 2 - var(--player-h) * var(--lift));
    left: round(down, calc((var(--pw) - var(--fw)) / 2), 1px);
    top: round(down, calc((var(--player-h) - var(--fh)) / 2 - var(--player-h) * var(--lift)), 1px);  /* round() 를 모르는 옛 폰은 바로 위 calc 값 사용 */
  }
}
/* 휴대폰: 유튜브 앱처럼 방송 아래쪽에 채팅을 겹쳐서 */
/* 더매치 방송 화면은 신한 계좌 배너 바로 밑(아래쪽 33%)부터 채팅 자리. "화면 터치 두번톡톡"은 채팅으로 가림 */
.chat-ov { position: absolute; left: 0; right: 0; bottom: 62px; height: 30%; z-index: 2; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
/* 유튜브 채팅의 위 제목줄(48px)과 아래 입력줄(96px)은 잘라서 메시지만 보이게 */
.chat-ov { background: none; } /* 채팅이 맨 위 레이어, "화면 터치 톡톡" 같은 방송 그림은 반투명하게 뒤에 비침 */
.chat-ov.frame, .chat-ov:has(iframe) { background: none; }
.chat-ov iframe { position: absolute; left: 0; top: -48px; width: 100%; height: calc(100% + 48px + 96px); border: 0; opacity: .8; }
.chat-ov-btn {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 17px; cursor: pointer;
}
.chat-ov-btn.off { opacity: .55; text-decoration: line-through; }
body.chat-ov-on .watch > .chat { display: none; }
body:not([data-view="watch"]) .chat-ov, body:not([data-view="watch"]) .chat-ov-btn { display: none !important; }

/* 휴대폰에서 다른 탭으로 가면 방송이 오른쪽 아래 작은 화면으로 */
@media (max-width: 959px) {
body.has-video:not([data-view="watch"]) .watch { display: block; padding: 0; }
body.has-video:not([data-view="watch"]) .watch > :not(.player-slot) { display: none; }
body.has-video:not([data-view="watch"]) .player {
  position: fixed; z-index: 40; width: min(34vw, 150px); height: auto;
  top: auto !important; right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
body.has-video:not([data-view="watch"]) .mini-close,
body.has-video:not([data-view="watch"]) .mini-expand { display: block !important; }
.mini-expand { position: absolute; inset: 0; background: transparent; border: 0; cursor: pointer; z-index: 1; }
.mini-close { position: absolute; top: 4px; right: 4px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 12px; }
body.mini-off:not([data-view="watch"]) .player { display: none; }
}

.stream-bar { display: flex; flex-direction: column; gap: 8px; }
.live-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.live-row::-webkit-scrollbar { display: none; }
.live-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 700; font-size: 14px; }
.live-chip i { width: 7px; height: 7px; border-radius: 50%; background: #ff3b3b; animation: blink 1.6s infinite; }
.live-chip small { font-weight: 400; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.live-chip.on { border-color: var(--rose); background: var(--rose-soft); color: var(--rose); }
.live-none { color: var(--muted); font-size: 13px; }
@keyframes blink { 50% { opacity: .35; } }
.yt-open { align-self: flex-start; background: #ff0033; border-color: #ff0033; color: #fff; }
.yt-note { margin: 0; padding: 6px 12px 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.stream-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.live-pill { flex: none; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--rose); color: var(--rose-ink); }
.stream-title { font-weight: 700; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-form, .chat-form, .row { display: flex; gap: 8px; }
.link-form input, .chat-form input, .row input { flex: 1; min-width: 0; }
.hint { margin: 0; font-size: 12.5px; color: var(--muted); }

input, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); outline: none;
}
input:focus, textarea:focus { border-color: var(--rose); }
textarea { resize: vertical; }

.btn {
  flex: none; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--rose);
  background: var(--rose); color: var(--rose-ink); font-weight: 700; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--rose); }
.btn.big { padding: 11px 26px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0; font-size: 13px; }

/* 채팅 */
.chat { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.chat-head { padding: 8px; border-bottom: 1px solid var(--line); }
.chat-list { list-style: none; margin: 0; padding: 10px 12px; height: 42vh; min-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.chat-list li { font-size: 14px; line-height: 1.45; word-break: break-word; }
.chat-list .n { font-weight: 700; margin-right: 6px; }
.chat-list .mine .n { color: var(--rose); }
.chat-list .t { color: var(--muted); font-size: 11px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.chat-list .empty { color: var(--muted); margin: auto; text-align: center; }
.yt-chat { height: 42vh; min-height: 220px; }
.yt-chat iframe { width: 100%; height: 100%; border: 0; }
.yt-chat > p { padding: 16px; color: var(--muted); margin: 0; }
/* 유튜브 실시간 채팅 (앱이 직접 그림) */
.ytc { list-style: none; margin: 0; padding: 8px 10px; height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: none; }
.ytc::-webkit-scrollbar { display: none; }
.ytc > li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; word-break: break-word; }
.ytc > li:first-child { margin-top: auto; }
.ytc .av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ffffff22; }
.ytc p { margin: 0; }
.ytc b { font-weight: 500; color: var(--muted); margin-right: 6px; }
.ytc b.own { color: #ffd600; } .ytc b.mod, .chat-ov .ytc b.mod { color: #7cc8ff; } .ytc b.mem { color: #2ba640; }
.ytc em { font-style: normal; font-weight: 700; margin-right: 6px; color: #ffca28; }
.ytc li.paid p { background: #ffca2822; border-radius: 8px; padding: 4px 8px; }
.ytc .emo { width: 20px; height: 20px; vertical-align: -5px; }
.ytc .ytc-wait { color: var(--muted); }
.chat-ov .ytc { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.chat-ov .ytc b { color: #ffffffb3; }
.chat-ov .ytc b.own { color: #ffd600; }
.chat-form { padding: 8px; border-top: 1px solid var(--line); }

.seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; }
.seg-btn { border: 0; background: transparent; padding: 6px 12px; border-radius: 8px; cursor: pointer; color: var(--muted); font-weight: 500; font-size: 14px; }
.seg-btn.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* 라운지 */
.lounge { padding-block: 18px 24px; }
.lounge-head h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; text-wrap: balance; }
.lounge-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.filters { position: sticky; top: calc(54px + env(safe-area-inset-top, 0px)); z-index: 5; background: var(--bg); padding-block: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: var(--surface); padding: 5px 13px; border-radius: 99px; cursor: pointer; font-size: 14px; }
.chip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.filter-row { display: flex; gap: 10px; align-items: center; }
.search { flex: 1; min-width: 0; }
.search input { padding: 7px 12px; }

.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.post-list li { border-bottom: 1px solid var(--line); }
.post-list a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 13px 2px; text-decoration: none; }
.post-list a:hover .p-title { color: var(--rose); }
.p-cat { font-size: 12px; font-weight: 700; color: var(--rose); margin-right: 6px; }
.p-title { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-prev { grid-column: 1; color: var(--muted); font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-meta { grid-column: 1 / -1; display: flex; gap: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.p-cmt { grid-row: 1 / span 2; grid-column: 2; align-self: center; min-width: 40px; text-align: center; padding: 4px 6px; border-radius: 10px; background: var(--sunk); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.p-cmt small { display: block; font-size: 10px; font-weight: 400; color: var(--muted); }
.list-empty { padding: 40px 8px; text-align: center; color: var(--muted); }

/* 글 보기 · 글쓰기 */
.sheet { padding-block: 14px 30px; }
.sheet-inner { max-width: 720px; margin: 0 auto; }
.back { background: none; border: 0; padding: 4px 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.post-h { margin: 10px 0 4px; font-size: 22px; line-height: 1.35; text-wrap: balance; word-break: break-word; }
.post-meta { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 13px; }
.post-text { margin: 18px 0; white-space: pre-wrap; word-break: break-word; font-size: 16px; line-height: 1.75; }
.post-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pill { border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 14px; cursor: pointer; font-size: 14px; }
.pill.on { background: var(--rose-soft); border-color: var(--rose); color: var(--rose); font-weight: 700; }
.pill.warn { color: var(--muted); }
.comments h2 { font-size: 16px; margin: 18px 0 8px; }
#c-list { list-style: none; margin: 0; padding: 0; }
#c-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.c-top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.c-name { font-weight: 700; }
.c-name.op { color: var(--rose); }
.c-time { color: var(--muted); font-size: 12px; }
.c-acts { margin-left: auto; display: flex; gap: 10px; }
.c-body { margin-top: 2px; white-space: pre-wrap; word-break: break-word; }
.c-gone { color: var(--muted); font-style: italic; }
.c-form { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.c-form textarea { flex: 1; min-width: 0; }
.w-title { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin: 8px 0 12px; }
.write { display: flex; flex-direction: column; gap: 10px; }
.w-foot { display: flex; gap: 10px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 하단 탭 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--surface); border-top: 1px solid var(--line);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; text-decoration: none; color: var(--muted); font-size: 16px; line-height: 1.1; }
.tab span { font-size: 10.5px; font-weight: 500; }
.tab.on { color: var(--rose); }
.write-tab { color: var(--ink); }

/* 설정 창 */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(10,5,10,.55); display: grid; place-items: center; padding: 16px; }
.modal-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 16px; max-height: 90vh; overflow: auto; }
.modal-card h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; }
.modal-card h3 { margin: 0 0 6px; font-size: 14px; }
.modal-card section { display: flex; flex-direction: column; gap: 8px; }
.muted { color: var(--muted); font-size: 13.5px; margin: 0; }

.bell { position: relative; font-size: 18px; }
.bell i { position: absolute; top: 2px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; }
.pe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.alarm-list { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.alarm-list label { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 500; }
.alarm-list label:last-child { border-bottom: 0; }
.alarm-list label.all { background: var(--sunk); font-weight: 700; }
.alarm-list .alarm-sub { margin: 0; padding: 10px 14px 4px; font-size: 12px; color: var(--muted); border-top: 6px solid var(--sunk); }
.alarm-list input { width: 20px; height: 20px; accent-color: var(--rose); flex: none; }
.alarm-list .live-tag { font-size: 11px; font-weight: 700; color: #fff; background: #ff3b3b; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.alarm-hint { background: var(--rose-soft); color: var(--ink); padding: 10px 12px; border-radius: 10px; }
.chat-list li { cursor: pointer; }
.c-menu { display: flex; gap: 14px; padding: 4px 0 2px; }
.c-menu .link { color: var(--rose); font-size: 13px; }
.rules { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.agree-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.agree-row input { width: auto; margin-top: 4px; }
.reports { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow: auto; }
.reports li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.reports .r-text { color: var(--muted); word-break: break-word; }
.reports .row { gap: 14px; }
.sel { user-select: all; color: var(--ink); }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px);
}

/* 넓은 화면: 방송과 라운지를 나란히 */
@media (min-width: 960px) {
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; align-items: start; }
  /* 왼쪽: 세로 방송(화면 높이 가득) + 그 옆에 방송 정보·유튜브 채팅 */
  body[data-view] .watch {
    display: grid !important; grid-template-columns: auto minmax(240px, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 10px;
    position: sticky; top: 54px; height: calc(100vh - 54px); padding: 16px 8px 16px max(16px, env(safe-area-inset-left, 0px));
  }
  body[data-view] .watch > * { display: flex !important; min-width: 0; }
  body[data-view] .watch > .player-slot { display: block !important; grid-row: 1 / span 2; }
  body[data-view] .watch .player {
    --player-h: calc(100vh - 54px - 32px);
    position: relative !important; height: var(--player-h) !important; width: auto !important; right: auto; bottom: auto; box-shadow: none; display: block !important;
  }
  body[data-view] .watch > .chat { min-height: 0; }
  /* 유튜브 PC처럼: 방송 바로 옆에 채팅이 길게. 링크 붙여넣기는 넓은 화면에선 숨김 */
  body[data-view] .watch .link-form, body[data-view] .watch #link-hint { display: none !important; }
  body[data-view] .watch .stream-bar { gap: 6px; }
  body[data-view] .watch .yt-chat { flex: 1; height: auto; min-height: 0; }
  body[data-view] .mini-close, body[data-view] .mini-expand { display: none !important; }
  body[data-view] .player-empty:not([hidden]) { display: flex; }
  body[data-view="watch"] .lounge, body[data-view="lounge"] .lounge, body[data-view="poll"] .lounge { display: block; }
  .watch { grid-column: 1; grid-row: 1; }
  .lounge, .sheet, .chs { grid-column: 2; grid-row: 1; }
  .chs { padding-left: 8px; }
  .lounge, .sheet { padding-left: 8px; }
  .write-fab { display: inline-block; }
}
.write-fab { display: inline-block; margin-top: 10px; } /* 글쓰기는 라운지 안에서 */

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* 베스트 · 사진 피드 */
.chip-best:not(.on) { border-color: #f2b33d; color: #b7791f; }
.chip-feed:not(.on) { border-color: var(--rose); color: var(--rose); }
.best-tag { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #fff; background: linear-gradient(135deg, #f2b33d, #e0702a); border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: 2px; }
.post-list a.has-img { grid-template-columns: 1fr 72px; }
.p-thumb { grid-row: 1 / span 3; grid-column: 2; width: 72px; height: 72px; object-fit: cover; border-radius: 10px; align-self: center; background: var(--sunk); }
.post-list.feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; border-top: 0; padding-top: 4px; }
@media (min-width: 640px) { .post-list.feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.post-list.feed li { border: 0; }
.post-list.feed .list-empty { grid-column: 1 / -1; }
.f-card { position: relative; display: block !important; padding: 0 !important; border-radius: 12px; overflow: hidden; background: var(--sunk); }
.f-card img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.f-many { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 99px; }
.f-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 8px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; }
.f-title { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-meta { font-size: 12px; opacity: .85; }
.post-imgs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.post-imgs img { display: block; width: 100%; max-height: 80vh; object-fit: contain; border-radius: 12px; background: var(--sunk); }
.w-imgs { display: flex; gap: 8px; flex-wrap: wrap; }
.w-imgs:empty { display: none; }
.w-img { position: relative; width: 84px; height: 84px; }
.w-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.w-img button { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg); font-size: 11px; cursor: pointer; }

/* 닉네임 · 대댓글 */
.op-tag { font-style: normal; font-size: 11px; font-weight: 700; color: var(--rose); background: var(--rose-soft); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
#c-list li.reply { padding-left: 22px; }
.c-arrow { color: var(--muted); margin-right: 2px; }
.c-acts .link + .link { margin-left: 8px; }
.c-reply { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--rose); padding: 6px 2px; }
.w-nick { margin: -4px 0 10px; font-size: 13px; }

/* 투표 */
.poll-tag { display: inline-block; font-size: 10.5px; font-weight: 800; color: #fff; background: #7c5cff; border-radius: 4px; padding: 1px 5px; margin-right: 6px; vertical-align: 1px; }
.poll { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 4px; }
.poll-opt { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.poll-opt:not(.done):hover { border-color: var(--rose); }
.poll-opt i { position: absolute; inset: 0 auto 0 0; background: var(--sunk); transition: width .4s; }
.poll-opt.my { border-color: var(--rose); }
.poll-opt.my i { background: var(--rose-soft); }
.poll-opt span, .poll-opt b { position: relative; }
.poll-opt b { font-weight: 700; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.poll-opt.my b, .poll-opt.my span { color: var(--rose); }
.poll-foot { margin: 2px 2px 0; font-size: 12.5px; color: var(--muted); }
.w-poll { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.w-poll-h { margin: 0; font-weight: 700; font-size: 14px; }
#w-poll-opts { display: flex; flex-direction: column; gap: 6px; }
.w-poll-row { display: flex; gap: 8px; align-items: center; }
.w-poll-row input { flex: 1; min-width: 0; }
#w-poll-add { align-self: flex-start; }

/* 투표 탭: 휴대폰에서도 '투표 만들기' 버튼 보이게, 베스트·전체 칩은 숨김 */
body.poll-mode .write-fab { display: inline-block; }
body.poll-mode #chips { display: none; }

/* PC: 탭바 대신 위쪽에 라운지 · 투표 */
.top-nav { display: none; }
@media (min-width: 960px) {
  .top-nav { display: flex; gap: 4px; margin-left: 18px; margin-right: auto; }
  .tnav { padding: 6px 14px; border-radius: 99px; color: var(--muted); font-weight: 700; text-decoration: none; }
  .tnav.on { color: var(--rose); background: var(--rose-soft); }
}

/* 댓글 사진 */
.c-pic { display: block; margin-top: 6px; width: fit-content; }
.c-pic img { display: block; max-width: min(220px, 70%); max-height: 260px; border-radius: 10px; object-fit: cover; }
.c-img { margin-top: 10px; }
.c-photo-btn { align-self: center; font-size: 22px; }

/* 열혈팬 TOP 20 */
.fans { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.fans-h { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.fans-h span { font-weight: 800; flex: none; }
.fans-h i { font-style: normal; color: var(--muted); font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fans-h b { font-weight: 500; font-size: 12px; color: var(--muted); flex: none; margin-left: auto; }
.fans-list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(10, auto); grid-auto-flow: column; gap: 4px 8px; } /* 왼쪽 1~10등, 오른쪽 11~20등 */
.fans-list li { display: flex; align-items: center; gap: 6px; padding: 6px 6px; border-radius: 8px; font-size: 13.5px; min-width: 0; }
.fans-list li.f-top { background: var(--sunk); font-weight: 700; }
.f-rank { flex: none; width: 22px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.fans-list li.f-top .f-rank { font-size: 15px; }
.f-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-grade { flex: none; margin-left: auto; font-size: 10.5px; font-weight: 800; border-radius: 4px; padding: 1px 5px; color: #fff; background: #ff3b6b; }
.f-grade.g-1 { background: linear-gradient(135deg, #f2c94c, #e0702a); }
.f-grade.g-2 { background: linear-gradient(135deg, #c9d2dc, #8a96a3); color: #1c1220; }
@media (min-width: 960px) { .fans-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; max-height: 220px; overflow-y: auto; } }
.f-mod { font-style: normal; font-size: 12px; margin-left: 3px; }
/* 유튜브 채팅 관리자(스패너) 색 */
.fans-list li.f-mod-row .f-name { color: #3e74e8; font-weight: 700; }
@media (prefers-color-scheme: dark) { .fans-list li.f-mod-row .f-name { color: #7cc8ff; } }

/* 휴대폰 스튜디오: 방제를 맨 위 헤더 바로 밑 한 줄로, 그만큼 방송 높이를 줄임 */
.top-title { display: none; }
@media (max-width: 959px) {
  body[data-view="watch"] .top-title:not([hidden]) {
    display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 max(14px, env(safe-area-inset-left, 0px));
    background: #120b14; color: #fff; font-weight: 700; font-size: 14px; position: sticky; top: 54px; z-index: 29;
  }
  #top-title-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #top-title-n { flex: none; margin-left: auto; font-size: 11.5px; font-weight: 500; color: #ffffffa6; font-variant-numeric: tabular-nums; }
  #top-title-n:empty { display: none; }
  body[data-view="watch"] .top-title .live-pill { font-size: 11px; padding: 1px 7px; }
  body[data-view="watch"]:has(.top-title:not([hidden])) .player { --player-h: calc(100dvh - 54px - 34px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  body[data-view="watch"] .stream-info { display: none; }
}

/* 휴대폰: 열혈팬 줄은 방송 바로 밑 첫 줄. 접으면 1~3등만 한 줄 */
@media (max-width: 959px) { .stream-bar .fans { order: -1; } }
#fans-top em { font-style: normal; margin: 0 2px 0 8px; }
#fans-top em:first-child { margin-left: 0; }
#fans-top { color: inherit !important; font-weight: 600; }
#fans-top em { margin-left: 6px; }
.fans-h { gap: 6px; }

/* 채널 탭 */
.chs { padding-block: 14px 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.ch-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ch { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ch.is-live { border-color: var(--rose); }
.ch-top { display: flex; align-items: center; gap: 12px; }
.ch-av { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; background: var(--sunk); }
.ch.is-live .ch-av { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px #ff3b3b; }
.ch-meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ch-meta b { font-size: 16px; display: flex; align-items: center; gap: 6px; }
.ch-meta .live-pill { font-size: 10.5px; padding: 1px 6px; }
.ch-meta small { color: var(--muted); font-size: 12.5px; }
.ch-watch { flex: none; padding: 8px 12px; font-size: 13px; }
.ch-desc { margin: 0; font-size: 13px; color: var(--muted); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ch-shorts { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ch-shorts::-webkit-scrollbar { display: none; }
.ch-short { position: relative; flex: none; width: 84px; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: #000; }
.ch-short img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch-short span { position: absolute; left: 4px; bottom: 4px; right: 4px; font-size: 10.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-acts { display: flex; gap: 8px; }
.ch-acts .btn { flex: 1; text-align: center; padding: 8px; font-size: 13px; }

/* 남·여 구분: 남자 파랑, 여자 분홍 */
:root { --g-m: #2f7bf5; --g-f: #ff4f8b; --g-m-soft: #2f7bf51a; --g-f-soft: #ff4f8b1a; }
.p-nick { font-weight: 600; }
.post-list li.g-m .p-nick, .post-meta.g-m .c-name { color: var(--g-m); }
.post-list li.g-f .p-nick, .post-meta.g-f .c-name { color: var(--g-f); }
.g-dot { font-style: normal; font-size: 10px; font-weight: 800; color: #fff; border-radius: 4px; padding: 0 4px; margin-right: 4px; vertical-align: 1px; }
.g-m .g-dot { background: var(--g-m); } .g-f .g-dot { background: var(--g-f); }
.w-gender { display: flex; gap: 8px; margin-bottom: 10px; }
.g-btn { flex: 1; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; }
.g-btn.g-m.on { border-color: var(--g-m); background: var(--g-m-soft); color: var(--g-m); }
.g-btn.g-f.on { border-color: var(--g-f); background: var(--g-f-soft); color: var(--g-f); }

/* 글쓰기 버튼: 글자 없이 연필 모양. 휴대폰은 엄지가 닿는 오른쪽 아래에 떠 있음 */
.write-fab.icon { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: inline-grid !important; place-items: center; font-size: 24px; line-height: 1; }
@media (max-width: 959px) {
  body[data-view="lounge"] .write-fab.icon {
    position: fixed; z-index: 45; right: max(16px, env(safe-area-inset-right, 0px));
    bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px));
    width: 60px; height: 60px; font-size: 28px; margin: 0;
    box-shadow: 0 8px 22px rgba(216, 46, 96, .45), 0 2px 6px rgba(0,0,0,.2);
  }
  /* 작은 방송 화면은 글쓰기 버튼과 안 겹치게 왼쪽 아래로 */
  body.has-video:not([data-view="watch"]) .player { right: auto !important; left: max(12px, env(safe-area-inset-left, 0px)); }
}
/* 글 제목 옆 베스트 표시: 위의 '🔥 베스트' 버튼과 같은 모양 (작게) */
.best-tag { display: inline-block; margin-left: 6px; padding: 0 8px; border: 1px solid #f2b33d; border-radius: 99px; background: var(--surface); color: #b7791f; font-size: 11.5px; font-weight: 700; letter-spacing: 0; line-height: 1.6; vertical-align: 2px; }
/* 한 화면에 글이 더 많이 들어가게 줄 높이 줄임 */
.post-list a { padding: 8px 2px; gap: 0 12px; }
.post-list .p-title { line-height: 1.4; }
.post-list .p-meta { line-height: 1.45; }
.post-list .best-tag { line-height: 1.45; vertical-align: 1px; }
.post-list .p-title { font-weight: 500; }
.filter-row .search { flex: 1; }

/* 전체·베스트 줄 오른쪽 돋보기 */
.chips-row { display: flex; align-items: center; gap: 8px; }
.chips-row .chips { flex: 1; min-width: 0; }
.search-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; margin-left: auto; }
.search-btn.on { border-color: var(--rose); color: var(--rose); background: var(--rose-soft); }
.filter-row .search { display: flex; gap: 8px; width: 100%; }
.filter-row .search input { flex: 1; min-width: 0; }
.filter-row .search .btn { flex: none; }
.tab-ic { display: block; margin-bottom: 1px; width: 20px; height: 20px; }

/* 휴대폰에서 다른 탭으로 가면 방송은 오른쪽 아래 작은 화면으로 계속 (사용자 11-12 '다른 탭 갔을 때 방송 화면 다시 열어') */

/* 채팅 줄: 움직일 때 깜빡임 없게 */
.ytc > li { will-change: transform; }
.ytc { overflow-anchor: none; }

/* 채널 탭 맨 위 작은 링크 (홈페이지·더매치라이브) */
.ch-links { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ch-links:not(:has(.ch-link:not([hidden]))) { display: none; }
.ch-link { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }

.w-anon { margin: -4px 0 10px; font-size: 12.5px; }

/* 공지: 라운지 맨 위 고정 */
.notice-list { list-style: none; margin: 10px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.notice-list a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--rose-soft); color: var(--ink); text-decoration: none; font-size: 14px; }
.n-tag { flex: none; font-size: 11.5px; font-weight: 800; color: var(--rose); border: 1px solid var(--rose); border-radius: 99px; padding: 0 7px; line-height: 1.6; background: var(--surface); }
.post-h .n-tag { margin-right: 8px; vertical-align: 3px; }
.n-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.w-notice-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-weight: 700; color: var(--rose); }

.post-h, .n-title, .p-title { word-break: keep-all; overflow-wrap: anywhere; }
.w-notice-row { justify-content: flex-start; font-size: 14.5px; }
.w-notice-row input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--rose); }

/* 남녀를 안 고르면 등록 버튼이 흐리고, 누르면 남녀 칸이 흔들림 */
#w-submit.dim { opacity: .45; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.w-gender.shake { animation: shake .35s; }
.w-gender.shake .g-btn { border-color: var(--rose); }

/* 방송 화면 왼쪽 위 계좌복사 */
.donate-row { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.acct-btn { display: inline-flex; align-items: center; text-decoration: none; height: 32px; padding: 0 12px; border-radius: 99px; border: 0; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
body:not([data-view="watch"]) .donate-row { display: none !important; }

/* 방송 위 채팅 오른쪽 아래 '채팅 입력' (채팅이 방송 위에 있을 때만) */
.chat-in-btn { display: none; position: absolute; right: 10px; bottom: 10px; z-index: 4; height: 38px; padding: 0 16px; border-radius: 99px; border: 0; background: #fff; color: #111; font: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.35); cursor: pointer; }

/* 폰: 방송 아래 채팅 칸도 없앰 (채팅은 채팅 입력 창에서) */
@media (max-width: 959px) { .watch > .chat { display: none !important; } }

/* 휴대폰 방송 화면 톡톡 하트 (PC는 유튜브 조작 버튼을 그대로 쓰게 막 없음) */
.tap-layer { display: none; }
@media (max-width: 959px) {
  body[data-view="watch"] .tap-layer:not([hidden]) { display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: none; } /* 두 손가락 확대를 앱이 직접 처리 */
}
.react-lane { display: none; }
@media (max-width: 959px) {
  body[data-view="watch"].has-video .react-lane { display: block; position: absolute; right: 12px; bottom: 58px; width: 64px; height: 55%; z-index: 3; pointer-events: none; overflow: visible; }
}
.react-heart { position: absolute; left: 50%; bottom: 0; font-style: normal; font-size: var(--sz, 28px); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); transform: translate(-50%, 0) scale(0); opacity: 0; animation: react-up var(--dur, 2.5s) cubic-bezier(.25,.6,.4,1) forwards; }
@keyframes react-up {
  0%   { transform: translate(-50%, 0) scale(.2); opacity: 0; }
  10%  { transform: translate(-50%, -12px) scale(1.1); opacity: 1; }
  18%  { transform: translate(-50%, -24px) scale(1); }
  45%  { transform: translate(calc(-50% + var(--sx)), calc(var(--rise) * .45)) scale(1); opacity: 1; }
  75%  { transform: translate(calc(-50% + var(--ex)), calc(var(--rise) * .75)) scale(.95); opacity: .8; }
  100% { transform: translate(-50%, var(--rise)) scale(.85); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .react-heart { animation-duration: 1s; } }

/* 설정: 유튜브 채널 바꾸기 · 다른 계정 · 로그아웃 */
.yt-acct-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 마이 탭 */
.my { padding-top: 6px; }
.my-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.my-av { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: var(--sunk); flex: none; }
.my-meta { display: flex; flex-direction: column; min-width: 0; }
.my-meta small { color: var(--muted); font-size: 13px; }
.my-meta b { font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px 0 6px; }
.my-q { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font: inherit; font-size: 22px; text-decoration: none; cursor: pointer; }
.my-q span { font-size: 13px; font-weight: 500; }
.my-set > section { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.my-set > section:last-child { border-bottom: 0; }
.my-set h3 { margin: 0 0 6px; font-size: 16px; }

/* 시청자 수: 유튜브 라이브처럼 깜빡이는 빨간 점 */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff0033; margin-right: 5px; vertical-align: 1px; box-shadow: 0 0 0 0 rgba(255, 0, 51, .6); animation: live-dot 1.6s ease-out infinite; }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(255, 0, 51, .6); } 70% { box-shadow: 0 0 0 6px rgba(255, 0, 51, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 0, 51, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* 유튜브 앱처럼 방송 맨 아래 입력줄 */
.yt-bar { display: none; }
@media (max-width: 959px) {
  body.chat-in-on[data-view="watch"] .yt-bar { display: flex; position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; gap: 8px; align-items: center; padding: 8px 10px 10px; }
  body.chat-in-on[data-view="watch"] .player::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(30% + 62px); z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.5)); }
}
.yt-input { flex: 1; min-width: 0; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 18px; border: 0; border-radius: 99px; background: rgba(255,255,255,.16); color: rgba(255,255,255,.75); font: inherit; font-size: 15px; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yt-input svg { color: #fff; flex: none; }
.yt-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.yt-ic[hidden] { display: none; }
.yt-input:active, .yt-ic:active { background: rgba(255,255,255,.28); }
.don-pop { position: absolute; right: 60px; bottom: 60px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 14px; background: rgba(20,12,28,.94); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.don-pop[hidden] { display: none; }
.don-item { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 15px; font-weight: 700; text-align: left; white-space: nowrap; cursor: pointer; }

/* 유튜브 앱처럼: 방송 위 채팅 글씨 크기·간격 */
.chat-ov .ytc { gap: 8px; padding: 6px 12px; }
.chat-ov .ytc > li { font-size: 15px; line-height: 1.35; gap: 10px; align-items: center; }
.chat-ov .ytc .av { width: 28px; height: 28px; }
.chat-ov .ytc p { text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.chat-ov .ytc b { color: rgba(255,255,255,.7); font-weight: 500; margin-right: 8px; }
/* 슈퍼챗 카드 */
.ytc > li.sc { display: block; }
.sc-card { border-radius: 10px; overflow: hidden; background: var(--bb); color: var(--bt); text-shadow: none; max-width: 100%; }
.sc-h { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--hb); color: var(--ht); }
.sc-h .av { width: 32px; height: 32px; }
.sc-who { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ytc .sc-who b, .chat-ov .ytc .sc-who b { color: var(--at); opacity: .85; font-size: 13px; font-weight: 500; margin: 0; }
.ytc .sc-who em { color: var(--ht); font-style: normal; font-weight: 700; font-size: 15px; margin: 0; }
.sc-b { padding: 6px 12px 9px; font-size: 15px; line-height: 1.4; word-break: break-word; }
.sc-sticker { width: 56px; height: 56px; flex: none; }
/* 고정 메시지 줄 */
.pin-bar { display: none; }
@media (max-width: 959px) {
  body.has-pin[data-view="watch"] .pin-bar:not([hidden]) { display: flex; position: absolute; left: 10px; right: 10px; bottom: 62px; z-index: 4; align-items: center; gap: 10px; min-height: 44px; padding: 7px 14px 7px 8px; border: 0; border-radius: 22px; background: rgba(40,40,40,.82); color: #fff; font: inherit; font-size: 15px; text-align: left; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  body.has-pin .chat-ov { bottom: 114px; }
}
.pin-bar .av { width: 28px; height: 28px; border-radius: 50%; flex: none; background: #ffffff22; }
.pin-name { flex: none; padding: 1px 8px; border-radius: 6px; background: #fff; color: #111; font-size: 14px; font-weight: 500; }
.pin-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-t .emo { width: 18px; height: 18px; vertical-align: -4px; }
.pin-bar.open { align-items: flex-start; border-radius: 16px; flex-wrap: wrap; }
.pin-bar.open .pin-t { white-space: normal; flex-basis: 100%; padding: 2px 4px 2px 38px; }

/* 휴대폰 방송 탭: '더매치' 줄과 방송 제목 줄을 얇게 해서 방송·채팅 자리를 넓게 */
.tt-logo { display: none; }
@media (max-width: 959px) {
  body[data-view="watch"] .top { padding-top: calc(5px + env(safe-area-inset-top, 0px)); padding-bottom: 5px; }
  body[data-view="watch"] .top .logo-mark { width: 30px; height: 30px; }
  body[data-view="watch"] .top .logo-text { font-size: 20px; }
  body[data-view="watch"] .top .icon-btn { width: 32px; height: 32px; }
  body[data-view="watch"] .top-title:not([hidden]) { top: calc(40px + env(safe-area-inset-top, 0px)); height: 30px; }
  body[data-view="watch"] .player { --player-h: calc(100dvh - 40px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  body[data-view="watch"]:has(.top-title:not([hidden])) .player { --player-h: calc(100dvh - 40px - 30px - var(--tabbar-h) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .chat-ov { height: 33%; }
}
/* 채팅 입력 창이 아래 절반을 덮는 동안: 방송을 위로 올려 사람 나오는 부분이 보이게 */
@media (max-width: 959px) {
  /* 평소에도 방송을 위로 올림(--lift .08), 채팅 입력 중엔 더 (.17). 아래 빈 곳은 입력줄 뒤라 안 보임 */
  /* 채팅창이 떠도 방송 위치는 그대로 (사용자 11-11 "화면 위치 바꾸지 마") */
  body.chat-typing .chat-ov, body.chat-typing .pin-bar, body.chat-typing .yt-bar, body.chat-typing .react-lane { opacity: 0; transition: opacity .2s; }
}

/* 한 번 눌러 소리 끄기/켜기 표시 */
.snd-flash { position: absolute; left: 50%; top: 42%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(0,0,0,.5); display: grid; place-items: center; pointer-events: none; animation: snd-flash .9s ease forwards; }
@keyframes snd-flash { 0% { opacity: 0; transform: scale(.7); } 15% { opacity: 1; transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }

/* 휴대폰 방송 탭: 계좌복사·투네이션은 방송을 가리지 않게 맨 위 '더매치' 줄 오른쪽(종 옆)으로 */
@media (max-width: 959px) {
  body[data-view="watch"] .donate-row { position: fixed; top: calc(5px + env(safe-area-inset-top, 0px)); left: auto; right: 68px; height: 30px; z-index: 31; align-items: center; }
  body[data-view="watch"] .donate-row .acct-btn { height: 28px; padding: 0 10px; font-size: 12.5px; background: rgba(255,255,255,.12); }
}

/* 익·게 설정 버튼 (닉네임·차단) */
.lounge-head { position: relative; }
.lounge-set { position: absolute; top: 6px; right: 0; height: 34px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
body.poll-mode .lounge-set { display: none; }
.my-card { cursor: pointer; }
.my-edit { margin-left: auto; color: var(--muted); font-size: 14px; flex: none; }

/* 휴대폰: 방송 아래 빨간 '채팅 입력' 버튼은 없앰 (방송 위 '채팅...' 입력줄로 충분) */
@media (max-width: 959px) { #yt-open { display: none !important; } }

/* 익·게 설정: 댓글 알림 켜고 끄기 */
.set-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 15px; cursor: pointer; }
.set-switch input { width: 22px; height: 22px; flex: none; accent-color: var(--rose); }

/* 채널 탭 위 사이트 바로가기 아이콘 (각 사이트 로고) */
.ch-link { display: inline-flex; align-items: center; gap: 8px; }
.ch-link-ic { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.ch-link-ic[src$=".png"] { border-radius: 50%; }

/* 방송 재생 전 덮개 (유튜브 큰 재생 버튼 가리기) */
.frame-cover { position: absolute; inset: 0; z-index: 1; background: #120b14; transition: opacity .35s; pointer-events: none; }
.frame-cover::after { content: ''; position: absolute; left: 50%; top: 40%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.75); animation: cover-spin .8s linear infinite; }
@keyframes cover-spin { to { transform: rotate(360deg); } }
.frame-cover.off { opacity: 0; }

/* 열혈 탭 */
.fansp-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(10, auto); grid-auto-flow: column; gap: 6px; } /* 왼쪽 1~10등, 오른쪽 11~20등 */
.fansp-list li.list-empty { grid-column: 1 / -1; }
.fansp-list li { display: flex; align-items: center; gap: 8px; padding: 10px 10px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 15px; }
.fansp-list li.list-empty { justify-content: center; color: var(--muted); border: 0; background: none; }
.fansp-list .fr { width: 22px; text-align: center; font-weight: 800; color: var(--muted); flex: none; }
.fansp-list li.ft .fr { font-size: 20px; }
.fansp-list .fn { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fansp-list li.r1 { border-color: #f5c542; background: linear-gradient(90deg, rgba(245,197,66,.18), var(--surface)); }
.fansp-list li.r2 { border-color: #c0c7d1; }
.fansp-list li.r3 { border-color: #d39a6a; }
.fansp-list li.mod .fn { color: #3e74e8; }
/* 폰: 라이브 화면의 열혈 칸은 숨김 (열혈 탭으로) */
@media (max-width: 959px) { .stream-bar .fans { display: none !important; } }
.tab span { white-space: nowrap; }

/* 폰 라이브 화면: 방송 아래 남는 칸(채널 고르기·안내 등)을 없애서 스크롤 안 생기게 */
@media (max-width: 959px) {
  body[data-view="watch"] .watch .stream-bar { display: none; }
  body[data-view="watch"] .watch { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) !important; gap: 0 !important; }
  body[data-view="watch"] { overflow: hidden; overscroll-behavior: none; }
}

.fansp-list .f-grade { font-size: 11px; padding: 1px 6px; flex: none; }
.fansp-list li { font-size: 14px; }

/* 열혈팬: 스패너(채팅 관리자) 하늘색, 닉네임 한글 4글자까지는 보이게 칸 여백 줄임 */
.fansp-list .f-grade.g-mod { background: #38bdf8; color: #fff; }
.fansp-list li.mod .fn { color: inherit; }
.fansp-list li { padding: 10px 8px; gap: 6px; }
.fansp-list .fr { width: 20px; font-size: 13px; }
.fansp-list li.ft .fr { font-size: 17px; }
.fansp-list .f-grade { font-size: 10.5px; padding: 1px 5px; letter-spacing: -.2px; }
.fansp-list .fn { font-size: 14px; letter-spacing: -.3px; }

/* 확대 중엔 방송이 손가락을 바로 따라오게 */
.frame-box iframe { transform-origin: center center; will-change: auto; }

/* 열혈팬: 회장·부회장 큰 카드 (금빛·은빛, 빛이 스침) */
.fansp-vip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fansp-vip[hidden] { display: none; }
.vip { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 14px; border-radius: 16px; text-align: center; min-width: 0; }
.vip.v1 { background: linear-gradient(145deg, #fff3c4 0%, #f7c948 45%, #e09b1a 100%); color: #4a2a00; box-shadow: 0 6px 22px rgba(240,170,30,.45), inset 0 0 0 1.5px rgba(255,255,255,.6); }
.vip.v2 { background: linear-gradient(145deg, #ffffff 0%, #dfe5ee 45%, #a9b4c4 100%); color: #26303d; box-shadow: 0 6px 20px rgba(140,155,180,.4), inset 0 0 0 1.5px rgba(255,255,255,.7); }
.vip::after { content: ''; position: absolute; top: -50%; left: -60%; width: 40%; height: 200%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: vip-shine 3.2s ease-in-out infinite; }
.vip.v2::after { animation-delay: 1.6s; }
@keyframes vip-shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.vip-ic { font-size: 34px; line-height: 1.1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.2)); }
.vip-g { font-size: 12px; font-weight: 800; letter-spacing: 1px; padding: 1px 10px; border-radius: 99px; background: rgba(0,0,0,.14); }
.vip.v1 .vip-g { background: #b8740a; color: #fff; }
.vip.v2 .vip-g { background: #6b7789; color: #fff; }
.vip-n { font-size: 18px; font-weight: 800; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.vip-r { font-size: 12px; opacity: .7; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .vip::after { animation: none; display: none; } }

/* 열혈팬 3~5등: 무지갯빛 테두리가 천천히 흐르고 은은하게 빛남 */
.fansp-list li.t3 { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(110deg, #ff5c8a, #a46bff, #38bdf8, #ffd166, #ff5c8a) border-box; background-size: 100% 100%, 300% 100%; animation: t3-flow 5s linear infinite, t3-glow 2.6s ease-in-out infinite; }
@keyframes t3-flow { to { background-position: 0 0, 300% 0; } }
@keyframes t3-glow { 0%, 100% { box-shadow: 0 0 0 rgba(164,107,255,0); } 50% { box-shadow: 0 0 14px rgba(164,107,255,.45); } }
.fansp-list li.t3 .fn { font-weight: 800; }
.fansp-list li.t3:not(.ft) .fr { background: linear-gradient(135deg, #a46bff, #ff5c8a); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .fansp-list li.t3 { animation: none; } }

/* 채널 카드: 유튜브 채널 버튼 빼고, 방송 알림은 오른쪽(방송 중이면 방송 보기 아래) */
.ch-side { flex: none; display: flex; flex-direction: column; gap: 6px; margin-left: auto; }
.ch-side .btn { padding: 8px 12px; font-size: 13px; text-align: center; white-space: nowrap; }

/* 열혈팬 목록 v2 (사용자 11-11 '각각 구분가게 있어보이게'): 이름마다 색 동그라미 + 순위 배지, 등급은 이름 아래 작은 글씨 */
.fansp-list li.fc { gap: 10px; padding: 10px 10px 10px 8px; border-radius: 14px; box-shadow: 0 2px 8px rgba(40, 20, 50, .06); }
.fansp-list .fav { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(135deg, hsl(var(--fh) 75% 62%), hsl(calc(var(--fh) + 40) 70% 48%)); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.fansp-list .fav .fr { position: absolute; right: -6px; bottom: -4px; width: auto; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; display: grid; place-items: center; font: 800 10.5px/1 var(--font-body); font-style: normal; color: #fff; background: #2a1d30; border: 2px solid var(--surface); text-shadow: none; -webkit-text-fill-color: #fff; }
.fansp-list .fbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fansp-list .fbody .fn { font-size: 14.5px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
.fansp-list .fg { font-size: 11px; font-weight: 700; color: #ff3b6b; line-height: 1.2; }
.fansp-list .fg.g-mod { color: #0ea5e9; }
/* 3~5등 배지는 무지개 색, 6~10등은 연보라 바탕 */
.fansp-list li.t3 .fav .fr { background: linear-gradient(135deg, #a46bff, #ff5c8a); font-size: 10.5px; }
.fansp-list li.t6 { background: linear-gradient(135deg, rgba(164,107,255,.10), var(--surface) 70%); border-color: rgba(164,107,255,.35); }
.fansp-list li.t6 .fav .fr { background: #7c4dff; }

/* 채널 탭 맨 위: 채널 홈 배너 (사용자 11-11) */
.ch-banner { display: block; width: 100%; height: auto; aspect-ratio: 1380 / 368; border-radius: 14px; object-fit: cover; background: #2a1033; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(60, 10, 70, .25); }
/* 열혈팬 순위 배지를 동그라미 밖으로 조금 더 */
.fansp-list .fav .fr { right: -9px; bottom: -6px; }

/* 열혈팬: 글자 동그라미 빼고 순위 숫자만 (사용자 11-11) */
.fansp-list .fnum { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13.5px; font-weight: 800; color: #fff; background: #3a2a40; letter-spacing: -.5px; }
.fansp-list li.t3 .fnum { background: linear-gradient(135deg, #a46bff, #ff5c8a); box-shadow: 0 2px 8px rgba(255,92,138,.35); }
.fansp-list li.t6 .fnum { background: #7c4dff; }
/* 3~5등 숫자는 스패너 색(하늘색) (사용자 11-11) */
.fansp-list li.t3 .fnum { background: #38bdf8; box-shadow: 0 2px 8px rgba(56,189,248,.4); }

/* 금·은·동 왕관 (사용자 11-11) */
.vip-ic .crown { display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); }
.fansp-list .fnum.fcrown { background: none !important; box-shadow: none !important; width: 30px; }
.fansp-list .fnum.fcrown .crown { display: block; filter: drop-shadow(0 2px 3px rgba(107,58,20,.35)); }
.vip.v2 .vip-ic .crown { filter: drop-shadow(0 3px 5px rgba(40,50,70,.45)); }
.fansp-list .fnum.fcrown { width: 34px; }

/* 화려한 메달: 반짝임 깜빡, 살짝 흔들림 */
.medal .md-spark { animation: md-tw 1.8s ease-in-out infinite; transform-origin: center; }
.medal.m-s .md-spark { animation-delay: .6s; }
.medal.m-b .md-spark { animation-delay: 1.2s; }
@keyframes md-tw { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
.vip-ic .medal { animation: md-sway 3.2s ease-in-out infinite; transform-origin: 50% 0; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
@keyframes md-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.fansp-list .fnum.fcrown { width: 34px; height: 40px; }
@media (prefers-reduced-motion: reduce) { .medal .md-spark, .vip-ic .medal { animation: none; } }

/* 왕관 v2 반짝임·떠오름 */
.crown2 .cw-spark { animation: md-tw 1.8s ease-in-out infinite; }
.crown2.c-s .cw-spark { animation-delay: .6s; }
.crown2.c-b .cw-spark { animation-delay: 1.2s; }
.vip-ic .crown2 { animation: cw-float 2.8s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); }
@keyframes cw-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.fansp-list .fnum.fcrown { height: 30px; }
@media (prefers-reduced-motion: reduce) { .crown2 .cw-spark, .vip-ic .crown2 { animation: none; } }

/* 열혈팬 이미지 공유 버튼: 익·게 설정 버튼과 같은 자리·모양 */
.fansp .lounge-head { position: relative; }
/* 마이 유튜브 버튼 4개: 두 줄로 반반 */
.yt-acct-row .btn { flex: 1 1 calc(50% - 4px); }

/* 확인 창 */
.ask-box { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(10, 5, 14, .55); animation: ask-in .15s ease-out; }
.ask-card { width: min(320px, 100%); background: var(--surface); color: var(--ink); border-radius: 18px; padding: 22px 18px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); text-align: center; }
.ask-card p { margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.ask-btns { display: flex; gap: 8px; }
.ask-btns .btn { flex: 1; }
@keyframes ask-in { from { opacity: 0; } to { opacity: 1; } }
/* 3등: 동메달색 카드 (사용자 11-11) — 무지개 테두리 대신 */
.fansp-list li.r3.t3 { border: 2px solid #b06528; background: linear-gradient(145deg, #ffe8d2 0%, #eaa86e 50%, #b8692c 100%); animation: none; box-shadow: 0 6px 18px rgba(176,101,40,.35); position: relative; overflow: hidden; }
.fansp-list li.r3.t3 .fn { color: #3f1f08; }
.fansp-list li.r3.t3 .fg, .fansp-list li.r3.t3 .fg.g-mod { color: #5a2d0c; }
.fansp-list li.r3.t3::after { content: ''; position: absolute; top: -50%; left: -60%; width: 35%; height: 200%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: vip-shine 3.2s ease-in-out .8s infinite; pointer-events: none; }
/* 4·5등: 스패너 하늘색 카드 (사용자 11-11) — 무지개 테두리 대신 */
.fansp-list li.t3:not(.r3) { border: 2px solid #0ea5e9; background: linear-gradient(145deg, #e0f6ff 0%, #7dd3fc 55%, #38bdf8 100%); animation: none; box-shadow: 0 6px 18px rgba(14,165,233,.3); position: relative; overflow: hidden; }
.fansp-list li.t3:not(.r3) .fn { color: #06324a; }
.fansp-list li.t3:not(.r3) .fg, .fansp-list li.t3:not(.r3) .fg.g-mod { color: #075985; }
.fansp-list li.t3:not(.r3) .fnum { background: #0369a1; box-shadow: none; }
.fansp-list li.t3:not(.r3)::after { content: ''; position: absolute; top: -50%; left: -60%; width: 35%; height: 200%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: vip-shine 3.2s ease-in-out 1.4s infinite; pointer-events: none; }

.yt-x-tip { margin: 10px 0 0; font-size: 13px; }
/* 채널 탭: 더매치 홈페이지·더매치라이브 버튼을 배너 아래 가운데에 같은 너비로 (사용자 11-11) */
#view-channels .ch-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 14px; }
#view-channels .ch-links:not(:has(.ch-link:not([hidden]))) { display: none; }
#view-channels .ch-link { justify-content: center; padding: 10px 12px; font-size: 14px; box-shadow: 0 2px 8px rgba(40,20,50,.06); }
#view-channels .ch-link[hidden] { display: none; }
/* 4·5등 v2 (사용자 11-11): 바탕은 6등과 같게, 테두리만 하늘색 */
.fansp-list li.t3:not(.r3) { border: 2px solid #38bdf8; background: linear-gradient(135deg, rgba(164,107,255,.10), var(--surface) 70%); box-shadow: 0 2px 8px rgba(40,20,50,.06); }
.fansp-list li.t3:not(.r3)::after { display: none; }
.fansp-list li.t3:not(.r3) .fn { color: inherit; }
.fansp-list li.t3:not(.r3) .fg.g-mod { color: #0ea5e9; }
.fansp-list li.t3:not(.r3) .fnum { background: #38bdf8; }
/* 열혈팬 순위: 회장·부회장처럼 가로로 (3·4 / 5·6 …) (사용자 11-11) */
.fansp-list { grid-auto-flow: row !important; grid-template-rows: none !important; }

/* 음성 (글·댓글) */
.v-slot { margin: 8px 0; }
.v-slot:not([hidden]) { display: flex; align-items: center; gap: 8px; }
.v-chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 99px; background: var(--sunk, #f1eaf2); border: 1px solid var(--line); font: inherit; font-size: 14px; font-weight: 600; color: inherit; cursor: pointer; max-width: 100%; }
.v-chip .v-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e8345e; color: #fff; font-size: 13px; flex: none; }
.v-chip.playing .v-ic { background: #7c4dff; }
.v-chip .v-wave { display: inline-flex; gap: 3px; align-items: center; height: 18px; }
.v-chip .v-wave i { width: 3px; border-radius: 2px; background: currentColor; opacity: .45; }
.v-chip.playing .v-wave i { animation: v-bounce .8s ease-in-out infinite; opacity: .8; }
.v-chip .v-wave i:nth-child(2n) { animation-delay: .2s; } .v-chip .v-wave i:nth-child(3n) { animation-delay: .4s; }
@keyframes v-bounce { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1.1); } }
.v-x { border: 0; background: none; font-size: 16px; color: var(--muted); cursor: pointer; }
.p-voice { font-size: 13px; color: #e8345e; font-weight: 700; }
.rec { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 20px; background: rgba(10,5,14,.6); }
.rec[hidden] { display: none; }
.rec-card { width: min(340px, 100%); background: var(--surface); color: var(--ink); border-radius: 20px; padding: 22px 18px 16px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.rec-time { font-size: 28px; font-weight: 800; margin: 0 0 10px; font-variant-numeric: tabular-nums; }
.rec-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rec-bar i { display: block; height: 100%; width: 0; background: #e8345e; transition: width .2s linear; }
.rec-tip { font-size: 12.5px; margin: 12px 0; }
.rec audio { width: 100%; margin-bottom: 12px; }
.rec-btns { display: flex; gap: 8px; } .rec-btns .btn { flex: 1; }
.rec.on .rec-main { background: #222; }

/* 사진·음성 버튼: 이모지 대신 얇은 선 아이콘 (사용자 11-11) */
.ui-ic { width: 22px; height: 22px; display: block; }
.c-photo-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 12px; color: #8a7c82; }
.c-photo-btn:active { background: #fbeef2; color: var(--rose, #e8345e); }
.w-tool { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding-left: 14px; padding-right: 16px; color: #5c4f55; border-color: #e6d9de; }
.w-tool .ui-ic { width: 19px; height: 19px; color: var(--rose, #e8345e); }
.p-voice { display: inline-flex; align-items: center; gap: 3px; }
.ui-ic.sm { width: 14px; height: 14px; display: inline-block; }

/* 마이: 쉬운 목록형 버튼 (사용자 11-11 시안 오케이) */
.ez-lead { margin: 0 0 6px; }
.ez-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; color: var(--ink); cursor: pointer; }
.ez-row:last-child { border-bottom: 0; }
.ez-row:active { background: var(--sunk); }
.ez-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; flex: none; background: var(--rose-soft, #fbeef2); }
.ez-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ez-t b { font-size: 16.5px; font-weight: 700; }
.ez-t small { font-size: 13px; color: var(--muted); margin-top: 1px; }
.ez-go { color: var(--muted); opacity: .6; font-size: 22px; flex: none; }
.ez-list { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.ez-row.out b { color: var(--muted); }
.ez-row.out .ez-ic { background: var(--sunk); }
.ez-main, .ez-share { border-radius: 18px; padding: 16px 18px; border-bottom: 0; }
.ez-main { background: #e8345e; color: #fff; box-shadow: 0 6px 18px rgba(232,52,94,.28); margin: 6px 0 14px; }
.ez-main:active { background: #d42a52; }
.ez-main .ez-ic { background: rgba(255,255,255,.22); color: #fff; }
.ez-main .ez-t b { font-size: 18px; }
.ez-main .ez-t small, .ez-main .ez-go { color: #fff; opacity: .88; }
.ez-share { background: var(--surface); border: 1px solid var(--line); }
.ez-share .ez-ic { background: #e8345e; }
.ez-tip { display: flex; gap: 8px; margin: 12px 2px 0; padding: 11px 13px; border-radius: 12px; background: #fff6e5; color: #7a5a1c; font-size: 13.5px; line-height: 1.5; }
@media (prefers-color-scheme: dark) { .ez-tip { background: #2e2414; color: #f0cf8a; } }

/* 알림 종: 빨간 동그라미 안 흰 선 종 (사용자 11-11) */
.icon-btn.bell { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: none; color: #fff; }
.icon-btn.bell:active { background: rgba(255,255,255,.12); }
.icon-btn.bell svg { width: 28px; height: 28px; }
.icon-btn.bell svg { display: block; }
.bell i { top: 1px; right: 1px; width: 14px; height: 14px; border: 2px solid #1c1220; background: #ff3b5c; }
body[data-view="watch"] .top .icon-btn.bell { width: 36px; height: 36px; }
body[data-view="watch"] .top .icon-btn.bell svg { width: 25px; height: 25px; }

/* 댓글 알림 목록 (종) */
.bell-n { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #ff3b5c; color: #fff; border: 2px solid #1c1220; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.nf-h { margin: 14px 0 8px; font-size: 15px; }
.nf-list { flex: none; list-style: none; margin: 0 0 6px; padding: 0; max-height: 40vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 14px; }
.nf-list li { border-bottom: 1px solid var(--line); }
.nf-list li:last-child { border-bottom: 0; }
.nf-list a { display: flex; gap: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
.nf-list a.new { background: var(--rose-soft, #fbeef2); }
.nf-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--sunk); flex: none; font-size: 16px; }
.nf-list a.new .nf-ic { background: #e8345e; color: #fff; }
.nf-t { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.nf-t small { font-size: 12px; color: var(--muted); }
.nf-t b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-empty { padding: 18px 14px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* 아이폰: 소리 끈 채 재생 중 안내 (톡 하면 사라짐) */
.sound-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.62); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; animation: sh-pulse 2s ease-in-out infinite; }
@keyframes sh-pulse { 50% { opacity: .75; } }

/* 폰 브라우저 채팅 칸: 아래 65% */
.chat-sheet { position: fixed; left: 0; right: 0; bottom: 0; height: min(480px, 70vh); z-index: 60; display: flex; flex-direction: column; background: #0f0f0f; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.5); overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0px); }
.chat-sheet[hidden] { display: none; }
.cs-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 8px 16px; color: #fff; font-weight: 700; font-size: 15px; border-bottom: 1px solid #262626; flex: none; }
.cs-bar button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: #262626; color: #fff; font-size: 18px; cursor: pointer; }
.chat-sheet iframe { flex: 1; width: 100%; border: 0; background: #0f0f0f; }

/* 작은 방송 화면을 끌어서 옮긴 자리 (작은 화면일 때만) */
@media (max-width: 959px) {
  body.mini-moved.has-video:not([data-view="watch"]) .player { left: var(--mini-x) !important; top: var(--mini-y) !important; right: auto !important; bottom: auto !important; }
  body.has-video:not([data-view="watch"]) .mini-expand { touch-action: none; }
}

/* 출석 뱃지 (닉네임 옆) */
.nb { display: inline-block; font-style: normal; font-size: 10.5px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 6px; margin-left: 4px; vertical-align: 1px; letter-spacing: -.2px; }
.nb7 { background: linear-gradient(135deg, #3fd8c4, #14a394); color: #fff; }
.nb30 { background: linear-gradient(135deg, #c39bff, #7c4dff); color: #fff; }
/* 마이: 출석 카드 */
.att { padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #2a1424, #3d1630 60%, #5a1b3a); color: #fff; box-shadow: 0 8px 22px rgba(90,27,58,.25); }
.att-top { display: flex; align-items: center; gap: 12px; }
.att-fire { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.12); flex: none; }
.att-t, .att-sum { display: flex; flex-direction: column; }
.att-t { flex: 1; }
.att small { font-size: 12px; color: rgba(255,255,255,.7); }
.att-t b { font-size: 24px; font-weight: 800; }
.att-sum { text-align: right; } .att-sum b { font-size: 17px; }
.att-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0 0; }
.att-dots i { font-style: normal; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }
.att-dots i.on { background: linear-gradient(135deg, #3fd8c4, #14a394); color: #fff; }
.att-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); margin: 16px 0 0; overflow: hidden; }
.att-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c39bff, #7c4dff); }
.att-next { margin: 10px 0 0; font-size: 13.5px; color: rgba(255,255,255,.85); }
.nf-fans { margin-bottom: 4px; }

/* 종: 평소엔 선만, 새 알림이 있으면 흰색으로 채움 */
.icon-btn.bell .bell-body { fill: none; transition: fill .2s; }
.icon-btn.bell.has-new .bell-body { fill: currentColor; }
/* 출석 뱃지: 달력 체크 선 아이콘 + 숫자 */
.nb { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px 2px 4px; }
.nb-ic { width: 11px; height: 11px; display: block; }
.att-fire .nb-ic { width: 26px; height: 26px; color: #fff; }

/* 열혈팬 회장·부회장: 어두운 바탕 + 금·백금 테두리와 글씨 (사용자 11-12 '좀 더 고급스럽게') */
.vip.v1, .vip.v2 { border: 1.5px solid transparent; padding: 18px 8px 16px; }
.vip.v1 {
  background: radial-gradient(130% 95% at 50% 0%, #4a3511 0%, #1d1408 58%, #0e0a05 100%) padding-box,
              linear-gradient(135deg, #fff3c2, #d4a017 28%, #7a4f00 50%, #f6d778 72%, #a8720a) border-box;
  box-shadow: 0 10px 28px rgba(212,160,23,.38), 0 0 0 1px rgba(255,215,120,.12);
}
.vip.v2 {
  background: radial-gradient(130% 95% at 50% 0%, #39414f 0%, #181c24 58%, #0b0d12 100%) padding-box,
              linear-gradient(135deg, #ffffff, #b9c3d1 28%, #566172 50%, #eef2f7 72%, #8893a4) border-box;
  box-shadow: 0 10px 26px rgba(110,125,150,.38), 0 0 0 1px rgba(220,228,240,.1);
}
.vip.v1::after, .vip.v2::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
.vip.v1 .vip-g, .vip.v2 .vip-g { background: none; font-size: 11px; letter-spacing: 4px; padding: 2px 10px 2px 14px; margin-top: 2px; }
.vip.v1 .vip-g { color: #f3cf6a; border: 1px solid rgba(243,207,106,.55); }
.vip.v2 .vip-g { color: #dfe5ee; border: 1px solid rgba(223,229,238,.5); }
.vip.v1 .vip-n, .vip.v2 .vip-n { -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 19px; margin-top: 4px; }
.vip.v1 .vip-n { background-image: linear-gradient(180deg, #fff7d6 0%, #f4cd55 48%, #c08a12 100%); }
.vip.v2 .vip-n { background-image: linear-gradient(180deg, #ffffff 0%, #dfe4ec 48%, #96a1b2 100%); }
.vip.v1 .vip-ic .crown { filter: drop-shadow(0 0 12px rgba(255,200,60,.5)) drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.vip.v2 .vip-ic .crown { filter: drop-shadow(0 0 12px rgba(220,230,245,.35)) drop-shadow(0 3px 4px rgba(0,0,0,.45)); }

/* 댓글 '글쓴이' 표시를 더 눈에 띄게 (사용자 11-12) */
.op-tag { background: var(--rose); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 99px; vertical-align: 1px; }

/* 알림 창: 내용이 길면 창이 넘어가게. 채널 목록이 눌려서 2개만 보이던 것 고침 (사용자 11-12) */
#alarm .modal-card > * { flex: none; }

/* 열혈팬 3·4·5등도 화려하게 (사용자 11-12): 회장·부회장처럼 어두운 바탕 + 금속 테두리 + 빛 지나감 */
.fansp-list li.fc.t3 { position: relative; overflow: hidden; border: 1.5px solid transparent; animation: none; }
.fansp-list li.fc.t3::after { content: ''; position: absolute; top: -60%; left: -50%; width: 35%; height: 220%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); animation: vip-shine 3.6s ease-in-out infinite; pointer-events: none; }
.fansp-list li.fc.r3.t3 {
  background: radial-gradient(140% 120% at 20% 0%, #4a2a17 0%, #22130a 60%, #120a05 100%) padding-box,
              linear-gradient(135deg, #ffd9b8, #c97b42 30%, #6b3714 52%, #f0b483 74%, #9a5a2a) border-box;
  box-shadow: 0 6px 18px rgba(201,123,66,.35);
}
.fansp-list li.fc.r3.t3 .fn { background: linear-gradient(180deg, #ffe7d2, #e9a46c 55%, #b5672f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fansp-list li.fc.r3.t3 .fg, .fansp-list li.fc.r3.t3 .fg.g-mod { color: #f0b483; }
.fansp-list li.fc.r3.t3 .fnum.fcrown .crown { filter: drop-shadow(0 0 8px rgba(240,170,110,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.fansp-list li.fc.t3:not(.r3) {
  background: radial-gradient(140% 120% at 20% 0%, #163a52 0%, #0d1f2e 60%, #08121b 100%) padding-box,
              linear-gradient(135deg, #e6fbff, #5fd0ff 30%, #1b6f9e 52%, #b8ecff 74%, #3aa6dd) border-box;
  box-shadow: 0 6px 18px rgba(56,189,248,.32);
}
.fansp-list li.fc.t3:not(.r3)::after { animation-delay: 1.2s; }
.fansp-list li.fc.t3:not(.r3) .fn { background: linear-gradient(180deg, #ffffff, #bfeeff 55%, #6cc9f2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fansp-list li.fc.t3:not(.r3) .fg, .fansp-list li.fc.t3:not(.r3) .fg.g-mod { color: #7fd6ff; }
.fansp-list li.fc.t3:not(.r3) .fnum { background: linear-gradient(135deg, #8fe3ff, #2f9fe0); color: #06263a; box-shadow: 0 0 12px rgba(95,208,255,.6); }
@media (prefers-reduced-motion: reduce) { .fansp-list li.fc.t3::after { animation: none; display: none; } }

/* 열혈팬 6~10등: 같은 결로 자수정(보라) 테두리, 위 순위보다 차분하게 (사용자 11-12) */
.fansp-list li.fc.t6 { position: relative; overflow: hidden; border: 1.5px solid transparent;
  background: radial-gradient(140% 120% at 20% 0%, #2f1d4f 0%, #1a1030 60%, #0f0a1d 100%) padding-box,
              linear-gradient(135deg, #efe2ff, #a77bff 30%, #4b2a8a 52%, #d6c0ff 74%, #7c4dff) border-box;
  box-shadow: 0 5px 14px rgba(124,77,255,.25); }
.fansp-list li.fc.t6::after { content: ''; position: absolute; top: -60%; left: -50%; width: 30%; height: 220%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); animation: vip-shine 5s ease-in-out infinite; pointer-events: none; }
.fansp-list li.fc.t6 .fn { background: linear-gradient(180deg, #ffffff, #e2d4ff 55%, #b597ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fansp-list li.fc.t6 .fg { color: #c9b2ff; }
.fansp-list li.fc.t6 .fnum { background: linear-gradient(135deg, #c3a6ff, #7c4dff); color: #fff; box-shadow: 0 0 10px rgba(167,123,255,.55); }
@media (prefers-reduced-motion: reduce) { .fansp-list li.fc.t6::after { animation: none; display: none; } }

/* 열혈팬 11~20등: 같은 결로 로즈(더매치 분홍) 테두리, 빛줄기 없이 가장 차분하게 (사용자 11-12) */
.fansp-list li.fc:not(.t3):not(.t6):not(.ft) { border: 1px solid transparent; box-shadow: 0 3px 10px rgba(60,20,40,.18);
  background: radial-gradient(140% 120% at 20% 0%, #33202c 0%, #1e141b 60%, #140d12 100%) padding-box,
              linear-gradient(135deg, #ffd3e0, #c94f78 35%, #5a2236 55%, #e9a3ba 78%, #9c3a5c) border-box; }
.fansp-list li.fc:not(.t3):not(.t6):not(.ft) .fn { color: #f6e6ec; }
.fansp-list li.fc:not(.t3):not(.t6):not(.ft) .fg { color: #ff8fb0; }
.fansp-list li.fc:not(.t3):not(.t6):not(.ft) .fg.g-mod { color: #7fd6ff; }
.fansp-list li.fc:not(.t3):not(.t6):not(.ft) .fnum { background: #2a1a24; color: #ffc2d4; box-shadow: inset 0 0 0 1.5px #c94f78; }

/* '열혈팬' 글자는 모든 순위에서 빨강 (사용자 11-12). 스패너는 그대로 */
.fansp-list li.fc .fg:not(.g-mod) { color: #ff3b5c !important; }

/* 4등부터 닉네임은 잘 보이게 흰색 (사용자 11-12). 3등은 동빛 그대로 */
.fansp-list li.fc:not(.r3) .fn { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #fff !important; -webkit-text-fill-color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }

/* 익게 닉네임: 남·여 구분 없이 골드 하나 (11-12) */
:root { --nick: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nick: var(--gold); } }
:root[data-theme="dark"] { --nick: var(--gold); }
.post-list li .p-nick, .post-meta .c-name { color: var(--nick); }
.g-dot { display: none; }

/* 따봉·엄지내림 (사용자 11-13): 글은 동그란 버튼, 댓글은 글 아래 작은 줄. 아이콘과 숫자만 */
.vote { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.vote svg, .cv svg { width: 16px; height: 16px; flex: none; }
.vote.dn svg, .cv .d svg { transform: scaleY(-1); }
.vote.up.on { background: var(--rose-soft); border-color: var(--rose); color: var(--rose); }
.vote.dn.on { background: #4a6cf71a; border-color: #4a6cf7; color: #4a6cf7; }
.cv { display: flex; gap: 14px; margin-top: 6px; }
.cv button { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 2px 0; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cv svg { width: 15px; height: 15px; }
.cv .u.on { color: var(--rose); } .cv .d.on { color: #4a6cf7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vote.dn.on, :root:not([data-theme="light"]) .cv .d.on { color: #8aa2ff; border-color: #8aa2ff; } }
:root[data-theme="dark"] .vote.dn.on, :root[data-theme="dark"] .cv .d.on { color: #8aa2ff; border-color: #8aa2ff; }

/* 글 화면 옆으로 쓸기: 끄는 동안 뒤에 목록을 보여 줌 (사용자 11-13) */
body.post-peek { overflow-x: hidden; }
body.post-peek #view-lounge { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); will-change: transform, opacity; }
body.post-peek #view-post { position: relative; z-index: 1; background: var(--bg); box-shadow: 0 0 24px rgba(0,0,0,.25); will-change: transform; min-height: 100vh; }

/* 고정닉은 연보라 (사용자 11-13 '연보라색 어때'). 자동 닉은 골드 그대로 */
:root { --nick-fx: #8b6fd6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nick-fx: #b9a2f5; } }
:root[data-theme="dark"] { --nick-fx: #b9a2f5; }
.post-list li .p-nick.fx, .post-meta .c-name.fx, .c-name.fx { color: var(--nick-fx); }

/* 글 '이미지 저장' 버튼: 따봉 줄 오른쪽 끝 */
.post-actions .p-save { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: 700; }
.post-actions .p-save:disabled { opacity: .5; }

/* 고정닉 설정 안내의 색 견본 (사용자 11-13 '닉네임색 바뀌는거 안내') */
.nick-fx-sample { color: var(--nick-fx); }
.nick-auto-sample { color: var(--nick); }

/* 글 안 이전글·다음글 + 맨 아래 글 목록 (사용자 11-13) */
.post-nav { display: flex; flex-direction: column; margin: 18px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-nav:empty { display: none; }
.post-nav .pn { display: flex; align-items: center; gap: 10px; padding: 11px 2px; color: inherit; text-decoration: none; font-size: 14px; }
.post-nav .pn + .pn { border-top: 1px solid var(--line); }
.post-nav .pn-k { flex: none; width: 64px; color: var(--muted); font-size: 12.5px; font-weight: 700; }
.post-nav .pn-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-nav .pn-c { flex: none; color: var(--gold); font-size: 12px; font-weight: 700; }
.post-nav .pn.none .pn-t { color: var(--muted); }
.post-more { margin-top: 22px; }
.post-more:empty { display: none; }
.post-more .pm-h { font-size: 15px; margin: 0 0 8px; }
.post-more .post-list li.cur { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.post-more .post-list li.cur .p-title { font-weight: 800; }
.post-more .pm-all { display: block; text-align: center; margin: 14px 0 8px; }

/* 새 댓글·답글 팝업: 종 바로 아래 (사용자 11-13) */
.nf-pop { position: fixed; right: 10px; left: auto; z-index: 90; width: min(340px, calc(100vw - 20px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none;
  border: 1px solid var(--line); box-shadow: 0 10px 30px #0000002e; opacity: 0; transform: translateY(-8px); transition: opacity .22s, transform .22s; }
.nf-pop.on { opacity: 1; transform: none; }
.nf-pop::before { content: ''; position: absolute; top: -7px; right: var(--arrow-r, 18px); width: 12px; height: 12px; background: inherit;
  border-left: 1px solid var(--line); border-top: 1px solid var(--line); transform: rotate(45deg); }
.nf-pop .nf-ic { font-size: 18px; line-height: 1.2; }
.nf-pop .nf-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nf-pop .nf-t small { color: var(--muted); font-size: 12px; }
.nf-pop .nf-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-pop .nf-post { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nf-pop { padding: 0; }
.nf-pop .nf-go { flex: 1; min-width: 0; display: flex; gap: 10px; align-items: flex-start; padding: 12px 0 12px 14px; color: inherit; text-decoration: none; }
.nf-pop .nf-x { flex: none; align-self: flex-start; border: 0; background: none; color: var(--muted); font-size: 15px; padding: 10px 12px; cursor: pointer; }

/* 글 따봉·엄지내림은 가운데 크게, 이미지 저장·신고·차단은 아래 양옆에 작게 (사용자 11-13) */
.post-actions { flex-direction: column; align-items: stretch; gap: 14px; padding: 6px 0 14px; }
.post-actions .pa-votes { display: flex; justify-content: center; gap: 14px; }
.post-actions .pa-votes .vote { flex-direction: column; justify-content: center; gap: 1px; min-width: 88px; min-height: 49px; padding: 4px 18px; border-radius: 16px; font-size: 16px; border-width: 1.5px; }
.post-actions .pa-votes .vote svg { width: 21px; height: 21px; }
.post-actions .pa-side { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.post-actions .pa-side .pill { padding: 4px 10px; font-size: 12px; min-height: 0; }
.post-actions .pa-side .p-save { margin-left: 0; }
.post-actions .pa-side .p-save svg { width: 13px; height: 13px; }
.post-actions .pa-r { display: flex; gap: 6px; margin-left: auto; }
.post-actions .pa-r .pill { border-color: transparent; background: none; color: var(--muted); }
/* 댓글 따봉·엄지내림 아주 조금 크게 (사용자 11-13) */
.cv { gap: 16px; }
.cv button { font-size: 15px; gap: 5px; padding: 3px 0; }
.cv svg { width: 18px; height: 18px; }
/* LIVE 표시는 완전 빨강 (사용자 11-13) */
.live-pill, .alarm-list .live-tag { background: #ff0000; color: #fff; }

/* 이미지 저장은 글 정보 줄 오른쪽 위, 댓글 답글은 크게(문양), 신고·차단은 작게 (사용자 11-13) */
.post-meta { align-items: center; }
.post-hrow .p-save { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.post-hrow .p-save svg { width: 13px; height: 13px; }
.post-hrow .p-save:disabled { opacity: .5; }
.post-actions .pa-side { justify-content: flex-end; }
.post-actions .pa-side:not(:has(*)) { display: none; }
.c-top { align-items: center; }
.c-acts { align-items: center; gap: 6px; }
.c-acts .c-reply-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 4px 11px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.c-acts .c-reply-btn svg { width: 14px; height: 14px; }
.c-acts .c-sm { font-size: 10px; color: var(--muted); text-decoration: none; opacity: .85; }
.c-acts .link + .link, .c-acts .c-reply-btn + .link { margin-left: 2px; }
.post-hrow { display: flex; align-items: flex-start; gap: 10px; }
.post-hrow .post-h { flex: 1; min-width: 0; }
.post-hrow .p-save { flex: none; margin: 14px 0 0 auto; }
.post-actions .pa-r .pill { font-size: 11px; padding: 3px 8px; }

/* PC 열혈팬 줄: 1~20등이 전광판처럼 왼쪽으로 흘러감, 마우스 올리면 멈춤 (사용자 11-13) */
#fans-top .ft-mq { display: none; }
@media (min-width: 900px) and (hover: hover) {
  #fans-top { text-overflow: clip !important; }
  #fans-top .ft-3 { display: none; }
  #fans-top .ft-mq { display: block; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 28px), transparent); }
  #fans-top .ft-track { display: inline-flex; white-space: nowrap; animation: ft-run var(--ft-dur, 45s) linear infinite; will-change: transform; }
  #fans-top .ft-i { flex: none; padding-right: 18px; }
  #fans-top .ft-i em { margin-left: 0; margin-right: 3px; }
  .fans-h:hover #fans-top .ft-track { animation-play-state: paused; }
}
@keyframes ft-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #fans-top .ft-track { animation-duration: 120s; } }
/* 글 목록 줄 간격 조금 넓게 (사용자 11-13 '좀만 더 띄워, 너무 많이는 말고') */
.post-list a { padding: 11px 2px; gap: 2px 12px; }
/* 글 사진은 눌러도 안 열리고, 링크·사진 길게 눌러도 주소 미리보기 안 뜸 (사용자 11-14) */
a, img { -webkit-touch-callout: none; }
img { -webkit-user-drag: none; }
.post-imgs img, .c-pic img { pointer-events: none; user-select: none; -webkit-user-select: none; }