/* 다크 한 가지로 간다.
*
* 예전에는 밝은 화면을 기본으로 두고 prefers-color-scheme 으로 어두운 화면을
* 덮어썼다. 그런데 이 사이트는 유리면(반투명 + blur)과 무지개 테두리,
* 황금 입자처럼 **어두운 바탕을 전제로 만든 것들**이 많아 밝은 화면에서는
* 겉돌았다. 두 벌을 어설프게 유지하느니 한 벌을 제대로 두는 편이 낫다.
*
* color-scheme 을 밝혀 두는 것이 중요하다. 이게 없으면 브라우저가 만드는
* 것들(스크롤 막대, 드롭다운 목록, 날짜 선택기, 자동완성 배경)이 흰색으로
* 남아 화면에 흰 조각이 튄다. */
:root{
color-scheme:dark;
--bg:#0e141b; --surface:#161f28; --ink:#e3eaf1; --muted:#93a3b3; --line:#26323f;
--accent:#5aa9e6; --accent2:#3fd0e8; --accent-soft:#172634;
--up:#4cc38a; --down:#e0785f; --flat:#7c8b9a;
--ad:#2a2d17; --ad-line:#5c6330; --ad-ink:#d3df92;
--gA:#4cc38a; --gB:#5aa9e6; --gC:#e0b062; --gD:#e0785f;
--gC-hi:#f3d79b;
/* 로고 색. 종이비행기와 '텔레' 글자가 같은 파랑을 쓴다. */
--tg-sky:#2AABEE; --tg-deep:#229ED9;
/* '코리아' 의 태극 두 색. 국기 원색보다 명도를 올린 값이다 —
원색(#CD2E3A / #0047A0)은 어두운 바탕에서 파랑이 묻힌다. */
--kr-red:#E23B4A; --kr-blue:#3C7BE0;
/* 브랜드 인증의 짙은 파랑. 마크(lib/mark.js BIZ)는 흰 바탕 인장이라 원색
#123c8f 를 쓰지만, 어두운 화면의 글자·테두리로는 묻혀서 명도를 올렸다.
초록(--up)과 멀리 떼어 놓는 것이 이 색을 고른 이유다 — 심사가 준 표식과
신원을 확인한 표식은 한눈에 갈려야 한다. */
--biz:#4D86EE; --biz-soft:#16233d; --on-biz:#f2f6ff;
/* 구독자 수 알약의 밝은 보라. 등급색(초록·파랑·주황·빨강)과 겹치지 않는
색이라야 "이건 등급이 아니라 규모"라는 것이 색만으로 갈린다. */
--subs:#BE9CFF;
/* 아이콘 칸을 채우는 색. 테두리색(--subs)보다 진해야 흰 아이콘이 읽힌다 —
밝은 보라 위에 흰 선을 그으면 명도차가 2:1 도 안 된다. */
--subs-fill:#7B54D8;
--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
/* 반투명 유리. 면을 50% 만 남기고 뒤를 흐린다. */
--glass:color-mix(in srgb,var(--surface) 50%,transparent);
--glass-strong:color-mix(in srgb,var(--surface) 72%,transparent);
--blur:blur(14px) saturate(1.5);
/* 색면 위에 얹는 글자색. 강조색이 밝으므로 그 위에는 어두운 글자를 쓴다 —
흰 글자를 고정하면 명도차가 2.5:1 까지 떨어진다(검색 버튼이 실제로 그랬다). */
--on-accent:#08131d; --on-up:#06231a; --on-down:#2b0d06; --on-ad:#1d2205;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
font-size:15px;line-height:1.65;word-break:keep-all}
/* 유리면 뒤에 흐릴 것이 있어야 blur 가 보인다. 단색 위에 반투명을 얹으면
그냥 색이 옅어질 뿐이다. 그래서 아주 옅은 색면을 세 군데 깔아 둔다.
고정(fixed)이라 스크롤해도 따라오지 않는다 — 배경이지 장식이 아니다. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(900px 620px at 10% -6%, color-mix(in srgb,var(--accent) 20%,transparent), transparent 62%),
radial-gradient(760px 520px at 98% 6%, color-mix(in srgb,var(--accent2) 16%,transparent), transparent 60%),
radial-gradient(820px 620px at 46% 104%, color-mix(in srgb,var(--up) 12%,transparent), transparent 62%)}
/* 밑줄은 쓰지 않는다. 카드·알약·목록 어디에나 링크가 있어 밑줄이 그이면
화면이 줄로 뒤덮인다. 대신 색이 밝아지는 것으로 알린다. */
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent2)}
.wrap{max-width:940px;margin:0 auto;padding:0 20px 80px}
.mono{font-variant-numeric:tabular-nums}
/* ---------- 애니메이션 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes draw{from{stroke-dashoffset:var(--len,1200)}to{stroke-dashoffset:0}}
@keyframes sweep{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
.rise:nth-child(1){animation-delay:.02s}.rise:nth-child(2){animation-delay:.06s}
.rise:nth-child(3){animation-delay:.10s}.rise:nth-child(4){animation-delay:.14s}
.rise:nth-child(5){animation-delay:.18s}.rise:nth-child(6){animation-delay:.22s}
.rise:nth-child(7){animation-delay:.26s}.rise:nth-child(8){animation-delay:.30s}
.rise:nth-child(n+9){animation-delay:.34s}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
}
/* ---------- 헤더 ---------- */
/* 고정 헤더는 본문이 아래로 지나가므로 다른 면보다 진하게 둔다(--glass-strong).
50% 면 스크롤할 때 글자가 겹쳐 읽혀 이름이 안 보인다. */
header.site{border-bottom:1px solid var(--line);
background:var(--glass-strong);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
position:sticky;top:0;z-index:20}
.site-in{max-width:940px;margin:0 auto;padding:12px 20px;display:flex;gap:16px;
align-items:center;flex-wrap:wrap}
/* '텔레' 는 마크와 같은 파랑으로 둬서 마크와 한 덩어리로 읽히게 한다. */
/* '텔레' 는 흰색. 마크(파랑)와 '코리아'(빨강·파랑) 사이에서 중립을 잡아
양쪽 색이 서로 부딪히지 않게 한다. */
.brand{font-weight:800;font-size:18px;color:#fff;letter-spacing:-.02em;
display:flex;align-items:center;gap:6px}
/* 종이비행기라서 떠다니는 것이 말이 된다. */
.brand .be{display:inline-block;animation:float 3.5s ease-in-out infinite}
/* 낱말은 한 덩어리로 둔다. flex 의 gap 이 글자 사이에도 들어가면
'텔레코리아' 가 '텔레 코리아' 로 벌어진다. */
.bw{white-space:nowrap}
/* '코리아' 는 태극의 S자로 나눈다 — 위가 빨강, 아래가 파랑.
*
* 직선 그라데이션으로는 태극이 안 나온다. 곡선 경계가 필요해서 SVG 를
* 배경 그림으로 깔고 글자 모양으로 오려낸다(background-clip:text).
* preserveAspectRatio="none" 이라 낱말 폭이 달라져도 곡선이 따라 늘어난다.
*
* 경계는 **딱 끊는다.** 부드럽게 섞으면 가운데가 보라색이 되어 둘 다 아닌
* 색이 된다.
*
* 국기 원색(#CD2E3A / #0047A0)을 그대로 쓰면 어두운 바탕에서 파랑이 거의
* 안 보인다. 색상은 지키고 명도만 올렸다(--kr-red / --kr-blue).
*
* 배경 위치를 움직이는 애니메이션은 걸지 않는다 — 곡선이 글자 위를
* 미끄러져 빨강·파랑 비율이 계속 달라진다. */
.brand .bw span,.foot-brand .bw span{
background-image:url('data:image/svg+xml;utf8,\
');
background-size:100% 100%;background-repeat:no-repeat;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent}
nav.main{display:flex;gap:13px;font-size:14px;flex-wrap:wrap}
nav.main a{color:var(--muted);display:flex;align-items:center;gap:4px;
padding:3px 2px;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
nav.main a:hover{color:var(--accent);text-decoration:none}
nav.main a.on{color:var(--accent);font-weight:600;border-bottom-color:var(--accent)}
/* 절차를 시작하는 메뉴는 .btn 을 그대로 쓴다. 밑줄 표시만 끈다. */
/* 메뉴의 밑줄 표시(border-bottom 투명 + .on 이면 색)는 버튼과 맞지 않는다.
.btn 은 사방이 닫힌 테두리라서, 아래쪽만 비면 상자가 새는 것처럼 보인다. */
nav.main a.btn{color:var(--ink);border:1.5px solid var(--btn);padding:6px 12px;
font-weight:700}
nav.main a.btn:hover{color:var(--ink)}
nav.main a.btn.on{background-color:color-mix(in srgb,var(--btn) 22%,transparent)}
/* 검색 — 입력창과 버튼을 한 덩어리로 붙인다(input append).
떨어져 있으면 버튼이 검색과 무관한 다른 버튼처럼 보인다. */
/* 테두리는 버튼과 같은 굵기·같은 색이다. 회색 테두리를 쓰면 붙어 있는
검색 버튼만 색이 있어 두 조각처럼 보였다. */
form.q{--btn:var(--accent);margin-left:auto;display:flex;gap:0;
border:1.5px solid var(--btn);border-radius:9px;overflow:hidden;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
transition:border-color .2s,box-shadow .2s}
form.q:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--btn) 20%,transparent)}
form.q input{padding:8px 12px;border:0;background:transparent;
color:var(--ink);font-size:14px;min-width:190px;font-family:inherit}
form.q input:focus{outline:none}
/* 검색 버튼은 입력창에 붙어 있어야 하므로 테두리·모서리만 덜어낸다. */
form.q .btn{border-width:0 0 0 1.5px;border-radius:0;padding:8px 14px;
background-color:color-mix(in srgb,var(--btn) 14%,transparent)}
form.q .btn:hover{box-shadow:none;
background-color:color-mix(in srgb,var(--btn) 30%,transparent)}
form.q .btn:active{transform:none;
background-color:color-mix(in srgb,var(--btn) 40%,transparent)}
form.q button .qi{font-size:13px}
/* 슬로건 띠 */
.slogan{background:linear-gradient(90deg,var(--accent-soft),transparent 60%);
border-bottom:1px solid var(--line)}
.slogan-in{max-width:940px;margin:0 auto;padding:7px 20px;font-size:13px;color:var(--muted);
display:flex;align-items:center;gap:7px}
.slogan-in b{color:var(--accent);font-weight:600}
.slogan-in .se{animation:float 4s ease-in-out infinite}
/* ---------- 타이포 ---------- */
h1{font-size:26px;margin:22px 0 6px;letter-spacing:-.025em;text-wrap:balance;
display:flex;align-items:center;gap:9px;flex-wrap:wrap}
h1 .he{animation:pop .5s cubic-bezier(.2,.9,.3,1.4) both}
h2{font-size:18px;margin:34px 0 12px;letter-spacing:-.015em;display:flex;align-items:center;gap:7px}
h3{font-size:15px;margin:20px 0 8px}
h4{font-size:14px;margin:16px 0 6px;color:var(--muted)}
p{margin:0 0 12px}
.lead{color:var(--muted);margin:0 0 22px}
.muted{color:var(--muted);font-size:13.5px}
/* ---------- 카드 ---------- */
.card{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--line);border-radius:12px;
padding:16px 18px;box-shadow:var(--shadow)}
/* 한 칸짜리 목록(.grid 홀로)은 **칸을 줄일 수 있게** 못 박는다.
*
* 칸을 안 적으면 auto 가 되는데, auto 칸의 최소 너비는 내용의 min-content 라
* 줄이지 못하는 것이 하나만 있어도 칸 전체가 그만큼 벌어진다. 그러면 같은
* 칸에 든 나머지 줄까지 따라 넓어져 화면 밖으로 나간다 — /ksafe 가 375px
* 화면에서 486px 로 벌어져 가로 스크롤이 생겼다. 60줄이 전부 밀려 나갔는데
* 원인은 그중 한 줄이었다.
*
* minmax(0,1fr) 은 "화면만큼 쓰되 필요하면 0 까지 줄여라" 는 뜻이다. 줄이는
* 몫은 안쪽 글자(줄바꿈·말줄임)가 진다. 여러 칸짜리(.c2/.c3)는 자기 칸을
* 따로 적어 두었고 명시도가 높아 이 규칙에 걸리지 않는다. */
.grid{display:grid;gap:11px;grid-template-columns:minmax(0,1fr)}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.ch{display:flex;gap:12px;align-items:flex-start;background:var(--glass);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
border:1px solid var(--line);border-radius:12px;padding:13px 15px;
transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .18s}
.ch:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:var(--shadow)}
/* 카드가 .grid 안에 있으면 gap 이 띄워 주지만, 광고·추천 슬롯처럼 홀로 놓일
때는 아무것도 안 띄운다. 그래서 바로 다음 블록과 붙어 버렸다. */
.ch + .card,.ch + .ksafe-band,.ch + .catblk,.ch + .risk,.ch + .dim,.ch + .notice{margin-top:14px}
.ch + h2{margin-top:28px}
.ch.ad{background:var(--ad);border-color:var(--ad-line)}
/* 브랜드 인증 채널의 목록 카드 — 테두리를 짙은 파랑으로 두르고 면도 살짝
물들인다. 순위 카드(.rcard.bizch)와 같은 색이라야 어느 화면에서 봐도
같은 채널로 읽힌다. 목록 카드는 글이 많아 면은 옅게만 깐다. */
.ch.bizch{border-color:var(--biz);
background:linear-gradient(120deg,rgba(23,58,134,.34),rgba(11,28,66,.22))}
.ch.bizch:hover{border-color:#9dbcff;box-shadow:0 6px 22px rgba(19,52,124,.45)}
/* 채널 사진 한 칸. **목록 카드에만 매지 않는다** — 관리자 심사 카드도 같은
것을 쓴다(components.js 의 channelAvatar). .ch 안에서만 먹게 두면 심사
화면에서는 크기도 동그라미도 없이 원본 그대로 튀어나온다. */
.av{width:44px;height:44px;border-radius:50%;flex-shrink:0;object-fit:cover;
background:var(--accent-soft);border:1px solid var(--line)}
.avph{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:grid;
place-items:center;font-size:20px;background:var(--accent-soft);border:1px solid var(--line)}
/* 로고 없는 채널 — 점선 동그라미 안의 물음표.
테두리와 바탕을 지운다. 점선은 SVG 가 그리므로 CSS 테두리까지 있으면
동그라미가 두 겹이 된다. 색은 흐리게 — 빈자리 표시가 옆의 채널 이름보다
눈에 띄면 안 된다.
!important 는 브랜드 카드(.rcard.bizch .rcard-av)가 바탕을 짙은 남색으로
덮어쓰기 때문에 붙였다. 그 카드에서도 빈자리는 빈자리로 보여야 한다. */
.noav{background:none!important;border:0!important;padding:0}
.avph.noav,.rcard-av.ph.noav,.iav .iph.noav{
color:var(--muted);opacity:.6;display:grid;place-items:center}
.noav svg{width:100%;height:100%;display:block}
/* 검색 결과의 스티커 팩 — 채널 카드보다 작게, 한 줄에 여럿. 팩은 그림이
본체라 목록에서는 이름만 짚어 주고 자세한 것은 팩 화면에서 본다. */
.packhits{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.packhit{display:flex;flex-direction:column;gap:2px;padding:9px 13px;
border:1px solid var(--line);border-radius:10px;background:var(--surface);
color:var(--ink);font-size:13.5px;min-width:150px}
.packhit:hover{border-color:var(--accent)}
.packhit .muted{font-size:12px}
/* 평가 버튼 (👍/👎).
폼 두 개가 나란히 서야 하므로 감싸는 span 을 flex 로 둔다. 손가락으로
누르는 것이라 작아도 최소 34px 은 준다 — 그보다 작으면 모바일에서 빗나간다. */
.votes{display:inline-flex;gap:6px;align-items:center;flex:none}
.votes .vf{display:inline;margin:0}
.vbtn{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 11px;
border:1px solid var(--line);border-radius:999px;background:var(--glass);
color:var(--muted);font-size:14px;font-family:inherit;cursor:pointer;
transition:border-color .16s,color .16s}
.vbtn b{font-variant-numeric:tabular-nums;font-weight:700}
.vbtn:hover{border-color:var(--accent);color:var(--ink)}
.vbtn.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.vbtn.sm{min-height:30px;padding:3px 9px;font-size:13px}
/* 축마다 붙는 작은 평가 단추는 손으로 누르는 것이 거의 전부다. 좁은 화면에서는
작은 꼴을 쓰더라도 높이는 큰 것과 같이 둔다 — 줄어드는 것은 글자와 좌우
여백뿐이다. */
@media (pointer:coarse),(max-width:640px){.vbtn.sm{min-height:34px;padding:5px 10px}}
/* 축 설명과 평가 버튼이 한 줄에 선다. 좁아지면 버튼이 아래로 내려간다. */
.bar-note{grid-column:2/4;display:flex;gap:10px;align-items:center;justify-content:space-between;
flex-wrap:wrap;margin:-5px 0 4px;font-size:12.5px}
.ch .bd{min-width:0;flex:1}
.ch .nm{font-weight:700;display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.35}
.ch .nm a{color:var(--ink)}
.ch .hd{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.ch .ds{color:var(--muted);font-size:13.5px;margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 구독자·증감·(i) 는 이제 제목 아래 배지 줄(.nm)에 함께 선다.
오른쪽 끝 칸(.rt)은 좁은 화면에서 (i) 버튼에 눌려 숫자가 잘렸다. */
.ch .nm .mono{font-variant-numeric:tabular-nums}
/* (i) 는 태그 바로 뒤에 붙인다. margin-left:auto 로 오른쪽 끝까지 밀었더니
태그 무리와 한참 떨어져 이 줄에 속한 것으로 안 보였다.
크기는 다른 태그와 같은 22×22. */
/* (i) 는 태그 줄 안, 분야 알약 바로 뒤에 선다.
기본 .icard-i 는 position:absolute + top/right 라 카드 오른쪽 위 모서리에
박힌다. 여기서 풀어 주지 않으면 폭을 줄여도 자리는 그대로다 —
홈 카드(.rcard-m .icard-i)에서 이미 같은 해제를 하고 있다. */
.ch .nm>.icard-i{position:relative;top:auto;right:auto;
width:22px;height:22px;padding:0;font-size:11px;
background:transparent;border-color:var(--muted);color:var(--ink)}
.ch .nm>.icard-i:hover{background:var(--accent);color:var(--on-accent);
border-color:var(--accent);transform:scale(1.1)}
.rank-no{font-size:13px;color:var(--muted);width:26px;flex-shrink:0;text-align:right;
font-variant-numeric:tabular-nums;padding-top:13px}
/* 목록의 줄 사이를 띄운다. 예전에는 카드가 서로 맞닿아 어디까지가 한 채널인지
눈으로 끊기지 않았다. */
.row{display:flex;gap:8px;align-items:stretch;margin-bottom:10px}
.row:last-child{margin-bottom:0}
.row .ch{flex:1;min-width:0}
/* ---------- 배지 ---------- */
.pill{font-size:11px;padding:1px 7px;border-radius:99px;border:1px solid var(--line);
color:var(--muted);background:var(--bg);white-space:nowrap;display:inline-flex;
align-items:center;gap:3px}
.pill.ad{background:var(--ad-ink);color:var(--on-ad);border-color:var(--ad-ink);font-weight:700}
.pill.ok{color:var(--up);border-color:var(--up)}
.pill.warn{color:var(--down);border-color:var(--down)}
.pill.dormant{color:var(--flat);border-color:var(--flat)}
/* 브랜드 인증 — 짙은 파랑. 안심마크(.ok, 초록)와 색을 갈라 둔다. */
.pill.biz{color:var(--biz);border-color:var(--biz);background:var(--biz-soft);font-weight:600}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;
background:var(--up);animation:pulse 1.8s ease-in-out infinite}
/* 건전성 등급 — "A등급". 안은 비우고 테두리와 글자에만 색을 쓴다.
채운 알약이 카드에 여럿이면 서로 소리를 키우기만 해서 정작 안심마크가
묻힌다. 등급은 색으로 구분되면 충분하다. */
.gr{font-size:11.5px;font-weight:800;padding:1px 9px;border-radius:99px;
border:1.5px solid currentColor;background:transparent;white-space:nowrap;
display:inline-flex;align-items:center;gap:3px}
.gr.A{color:var(--gA)}
.gr.B{color:var(--gB)}
.gr.C{color:var(--gC)}
.gr.D{color:var(--gD)}
.gr.none,.gr\\.-{color:var(--flat)}
/* 브랜드 채널은 등급 자리에 인증 표시가 선다. 등급 글자는 적지 않는다.
마우스를 올리면 상호와 인증일이 나온다(title). */
.gr.biz{color:var(--biz);cursor:help}
/* 안심마크 태그 — 등급색과 같은 계열로 채운다. */
.pill.ok.ksp{background:var(--up);border-color:var(--up);color:var(--on-up);font-weight:700;
padding:2px 9px 2px 5px}
.pill.ok.ksp .ksafe{filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}
.ks{display:inline-flex;align-items:center}
.ks .ksafe{display:block}
.up{color:var(--up)}.down{color:var(--down)}.flat{color:var(--flat)}
.warn-ink{color:var(--gC)}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 8px}
.tags a{font-size:13.5px;padding:5px 12px;border:1px solid var(--line);border-radius:99px;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);color:var(--muted);display:inline-flex;align-items:center;gap:5px;
transition:transform .16s,border-color .16s,color .16s}
.tags a:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent);text-decoration:none}
.tags a.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* 칩 안의 개수는 .muted 라 회색을 그대로 들고 있었다. 색면 위에 얹히면
회색은 어느 쪽으로도 안 읽힌다 — 글자색을 물려받게 하고 흐리기만 한다. */
.tags a.on .muted{color:inherit;opacity:.72}
.tags a.on:hover{color:var(--on-accent);transform:translateY(-2px)}
/* ---------- 카테고리별 순위 (가로 카드) ---------- */
/* 세로 목록은 1등만 읽히고 지나간다. 다섯을 나란히 두면 한눈에 비교되고,
카테고리를 여러 개 쌓아도 화면이 끝없이 길어지지 않는다. */
/* 카테고리 묶음 사이를 넉넉히 띄운다.
26px 로는 앞 묶음의 카드 아랫줄과 다음 제목이 거의 붙어, 어디서 한 분야가
끝나는지 눈으로 끊기지 않았다. 제목 위쪽 여백이 아래쪽보다 커야
그 제목이 '다음 덩어리의 머리'로 읽힌다. */
/* 위쪽 여백이 0 이라, 앞에 온 것이 다른 묶음(h2 + 가로 목록)이면 그 카드
아랫줄과 이 제목이 거의 맞닿았다. 위아래 모두 준다 — 형제끼리는 여백이
합쳐지지 않고 큰 쪽만 남으므로(margin collapsing) 묶음 사이는 38px 그대로다. */
.catblk{margin:34px 0 38px}
.catblk-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.catblk-hd>a:first-child{font-size:17px;font-weight:800;color:var(--ink);
display:inline-flex;align-items:center;gap:7px}
.catblk-hd>a:first-child:hover{color:var(--accent);text-decoration:none}
.catblk-hd .ce{font-size:20px}
.catblk-hd .muted{font-size:12.5px}
.catblk-hd .pill{margin-left:auto}
.strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
/* 카드는 세 줄로 고정한다 — 제목 / 핸들 / 수치·등급·마크·(i).
제목이 길다고 두 줄이 되면 카드 높이가 제각각이라 줄이 안 맞는다. */
.rcard{position:relative;container-type:inline-size;
display:flex;flex-direction:column;align-items:center;
gap:4px;padding:14px 8px 11px;border:1px solid var(--line);border-radius:12px;
background-color:var(--glass);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
color:var(--ink);text-align:center;
transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s,box-shadow .18s}
/* 카드 어디를 눌러도 채널로 가되, (i) 버튼만 예외로 위에 뜬다. */
.rcard-t::after{content:"";position:absolute;inset:0;z-index:1}
.rcard:hover .rcard-t{color:var(--accent);text-decoration:none}
.rcard-no{position:absolute;top:6px;left:8px;font-size:12px;font-weight:800;
color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}
/* 1~3위 메달은 순위표의 얼굴이다. 작게 두면 눈에 안 들어온다. */
.rcard-no.top{font-size:26px;top:2px;left:4px;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.rcard-av{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;
background:var(--accent-soft);border:1px solid var(--line);margin-bottom:4px}
.rcard-av.ph{display:flex;align-items:center;justify-content:center;
font-size:21px;font-weight:800;color:var(--accent)}
/* 글줄 — 핸들 / 제목 / 소개. 셋 다 한 줄이고 넘치면 말줄임한다.
두 줄로 흐르면 카드 높이가 제각각이라 줄이 안 맞는다. */
.rcard-u,.rcard-t,.rcard-d{display:block;width:100%;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.rcard-u{font-size:11px;line-height:1.35;color:var(--muted);
font-variant-numeric:tabular-nums}
.rcard-t{font-size:13px;line-height:1.4;font-weight:700;color:var(--ink);margin-top:1px}
/* 소개는 제목보다 작고 옅다. 없는 채널도 있으므로 자리는 늘 잡아 둔다 —
그래야 카드마다 높이가 같다. */
.rcard-d{font-size:11.5px;line-height:1.35;color:var(--muted);min-height:16px}
/* 스타 후원 채널 — 무지개 테두리와 별.
등급색 테두리를 덮어써야 하므로 등급 클래스까지 함께 짚는다.
테두리에 그라데이션을 쓰려면 배경을 두 겹으로 깔고 border-box 와
padding-box 를 나눠 칠하는 수밖에 없다(border-image 는 둥근 모서리를
따라가지 못한다). */
.ch.boost,
.rcard.boost,
.rcard.boost.gA,.rcard.boost.gB,.rcard.boost.gC,.rcard.boost.gD{
border-color:transparent;border-width:2px;
/* 안쪽 층은 **불투명**해야 한다. 반투명(--glass)으로 두면 뒤의 무지개가
그대로 비쳐 카드 전체가 알록달록해진다. 유리 느낌을 잃는 대신 테두리만
무지개가 된다. */
background-image:
linear-gradient(var(--surface),var(--surface)),
linear-gradient(115deg,#ff5f6d,#ffc371,#8ee36b,#4ad6d6,#6a8bff,#c86bff,#ff5f6d);
background-origin:border-box;
background-clip:padding-box,border-box;
/* 애니메이션은 걸지 않는다. 그라데이션이 흐르면 테두리 색이 옅어지는
구간에서 테두리가 사라진 것처럼 보인다. */
background-size:auto,100% 100%;
background-position:0 0,0 0}
.ch.boost{background-size:auto,300% 100%}
/* 황금 입자 배경.
실제로 떨어지고 터지는 것은 캔버스(public/stars.js)가 그린다. 배경 한 겹은
통째로만 밝아져서 알갱이 하나하나가 따로 반짝일 수가 없다.
여기 ::before 는 **캔버스가 안 뜰 때의 바탕**이다(스크립트 차단, 움직임
줄이기 설정). 움직이지 않는 금가루만 옅게 깔아 둔다. */
.rcard.boost{position:relative}
.rcard.boost::before{content:"";position:absolute;inset:0;z-index:0;
pointer-events:none;border-radius:inherit;opacity:.5;filter:blur(1.1px);
background-image:
radial-gradient(2px 2px at 16px 12px,#ffd666,transparent 70%),
radial-gradient(1.4px 1.4px at 52px 34px,#ffe9a8,transparent 70%),
radial-gradient(2.3px 2.3px at 31px 66px,#ffb43c,transparent 70%),
radial-gradient(1.3px 1.3px at 74px 92px,#fff2c4,transparent 70%);
background-size:84px 116px,84px 116px,104px 148px,104px 148px}
/* 캔버스가 붙으면 바탕은 물러난다 — 두 겹이 겹치면 지저분하다. */
.rcard.boost[data-fx]::before{opacity:.22}
/* 반짝임을 끈 줄은 바탕 금가루도 없앤다. 캔버스만 끄면 정지한 점이 남아
'꺼진 것'이 아니라 '멈춘 것'처럼 보인다. */
.rcard.boost[data-fx-level="none"]::before{display:none}
.rcard.boost[data-fx-level="half"]::before{opacity:.25}
.rcard.boost[data-fx][data-fx-level="half"]::before{opacity:.11}
/* 캔버스는 카드 안쪽을 꽉 채운다. border-radius 를 주면 그림도 모서리에
맞춰 잘리므로 overflow:hidden 이 필요 없다(그걸 쓰면 카드가 안 그려진다). */
.rcard-fx{position:absolute;inset:0;z-index:0;pointer-events:none;
border-radius:inherit;display:block}
/* 내용은 배경 위로. z-index 를 안 주면 캔버스가 글자를 덮는다.
별 뱃지는 건드리지 않는다 — 이미 absolute 로 오른쪽 위에 붙어 있어서
position:relative 를 덮어씌우면 제자리로 흘러내린다(실제로 그랬다). */
/* 캔버스도 빼야 한다 — 이 규칙이 더 구체적이라 position:absolute 를 덮어
흐름 안으로 끌어내리고, 카드 높이가 694px 까지 늘어났다. */
.rcard.boost>*:not(.rcard-ks):not(.rcard-fx){position:relative;z-index:1}
/* 움직임을 싫어하는 설정이면 떨어뜨리지 않는다. */
@media (prefers-reduced-motion:reduce){
.rcard.boost::before{animation:none;opacity:.55}
}
/* 별은 그 자체로 표식이라 색면에 앉힐 필요가 없다. 알약을 두르면 안심마크
방패와 같은 모양이 되어 심사 표식으로 오해된다. 대신 크게 키우고,
어떤 배경에서도 읽히도록 그림자만 깐다. */
/* 스타 카드의 원은 1.5배. 후원한 채널은 얼굴이 먼저 보여야 한다.
(기본 46px, 작은 카드 38px → 69px / 57px) */
.rcard.boost .rcard-av{width:69px;height:69px}
.rcard.boost.sm .rcard-av{width:57px;height:57px}
/* 넓은 화면에서는 한 번 더 키운다. 좁을 때 같이 키우면 카드가 얼굴로 꽉 찬다. */
@media (min-width:900px){
.rcard.boost .rcard-av{width:88px;height:88px}
.rcard.boost.sm .rcard-av{width:76px;height:76px}
}
.rcard.boost .rcard-ks.star{display:inline-flex;align-items:center;gap:4px;
font-size:21px;line-height:1;padding:0;background:none;color:#fff;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.75))}
.rcard.boost .rcard-ks.star b{font-size:15px;font-weight:800;color:#fff;
font-variant-numeric:tabular-nums;
text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* 최근 글 요약 */
.csum{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--bg);
border:1px solid var(--line)}
.csum-hd{font-size:13px;font-weight:700;margin-bottom:4px}
.csum-hd .muted{font-weight:400}
.csum-stat{font-size:12.5px;margin:0 0 8px}
.csum-words{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:9px}
.csum-words .pill{gap:4px}
.csum-words em{font-style:normal;opacity:.65;font-size:10px}
.csum-lines{margin:0;padding-left:18px;font-size:12.5px;color:var(--muted);
line-height:1.6}
.csum-lines li{margin-bottom:3px}
/* 홈 히어로 — 제목·다짐·검색을 한 덩어리로 가운데 세운다.
검색창이 머리말 구석에 있으면 '찾으러 온 사람'이 제일 먼저 할 일이
제일 작게 놓인다. 이 사이트는 디렉토리다 — 검색이 주인공이다. */
.hero{text-align:center;margin:26px 0 30px}
.hero h1{justify-content:center;margin:0 0 14px}
/* 다짐 — 제목 다음으로 큰 글자. 이 사이트가 무엇을 약속하는지가 먼저다. */
.hero-vow{display:flex;align-items:center;justify-content:center;gap:9px;
flex-wrap:wrap;font-size:19px;font-weight:700;color:var(--accent);
margin:0 0 6px;line-height:1.45}
.hero-vow .se{animation:float 4s ease-in-out infinite}
.hero-vow span:last-child{color:var(--ink);font-weight:600}
/* 수치는 근거일 뿐 주인공이 아니다. 작게. */
.hero-stat{margin:0 auto 20px;font-size:12.5px;color:var(--muted);max-width:640px}
/* 검색 — 가운데, 크게. */
form.qbig{display:flex;max-width:620px;margin:0 auto;
--btn:var(--accent);border:1.5px solid var(--btn);border-radius:12px;
overflow:hidden;background:var(--glass);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
transition:box-shadow .2s}
form.qbig:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--btn) 20%,transparent)}
/* 목록 안에 놓이는 검색칸 — 홈의 큰 것보다 작고 왼쪽에 붙는다. 가운데
정렬로 두면 아래 거르개 칩과 축이 어긋나 두 줄이 따로 노는 것처럼 보인다. */
form.qbig.sm{max-width:420px;margin:0 0 12px}
form.qbig.sm input{padding:9px 13px;font-size:15px}
form.qbig.sm .btn{padding:0 15px;font-size:14px}
form.qbig input{flex:1;min-width:0;padding:13px 16px;border:0;background:transparent;
color:var(--ink);font-size:16px;font-family:inherit}
form.qbig input:focus{outline:none}
form.qbig .btn{border-width:0 0 0 1.5px;border-radius:0;padding:0 20px;
font-size:15px;background-color:color-mix(in srgb,var(--btn) 16%,transparent)}
form.qbig .btn:hover{box-shadow:none;
background-color:color-mix(in srgb,var(--btn) 32%,transparent)}
form.qbig .btn:active{transform:none}
/* 검색어 태그 — 무엇을 검색할 수 있는지 예시로 알린다. */
.qtags{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
max-width:620px;margin:10px auto 0}
.qtags .qtl{font-size:12px;color:var(--muted);align-self:center;margin-right:2px}
.qtags a{font-size:12.5px;padding:3px 11px;border-radius:99px;
border:1px solid var(--line);color:var(--muted);background:var(--glass)}
.qtags a:hover{border-color:var(--accent);color:var(--accent)}
@media (max-width:640px){
.hero{margin:18px 0 22px}
.hero-vow{font-size:16px}
form.qbig input{padding:11px 13px;font-size:15px}
form.qbig .btn{padding:0 14px}
/* 첫 화면에서는 **제목 다음이 바로 검색창**이다.
*
* 넓은 화면에서는 다짐과 수치가 제목 아래에 한 줄씩 앉아 읽히는데, 좁은
* 화면에서는 둘 다 두세 줄로 접힌다. 그러면 제목 밑에 작은 글자가 다섯
* 줄쯤 깔리고 검색창이 그 아래로 밀려, 찾으러 온 사람이 제일 먼저 할 일이
* 화면 한참 아래에 놓인다.
*
* 지우는 것이 아니라 이 자리에서만 뺀다 — 다짐도 수치도 푸터에 그대로
* 있고(각각 .vow 와 .foot-num), 제목·설명 메타에도 남아 검색 결과에는
* 영향이 없다. */
.hero-vow,.hero-stat{display:none}
/* 두 줄이 빠진 만큼 제목과 검색창 사이를 벌린다. 14px 만 남으면 제목이
검색창에 붙어 한 덩어리로 보인다. */
.hero h1{margin:0 0 20px}
}
/* 위험 등급 표시 — 돈을 냈다고 등급이 바뀌지는 않는다는 것을 눈으로 보여준다. */
.riskgrade{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;
font-weight:800;padding:1px 7px;border-radius:99px;
background:var(--down);color:var(--on-down);white-space:nowrap}
.rcard.danger{border-color:var(--down)}
/* 카드 아래 줄에 들어갈 때는 옆 칩들과 같은 꼴로 간다 — 테두리에 색, 안은 비움.
그러지 않으면 .rcard-m>* 규칙이 배경만 지우고 글자색은 어두운 채로 남아
어두운 카드 위에서 글자가 아예 안 보인다(실제로 그랬다). */
.rcard-m .riskgrade{height:22px;padding:0 8px;font-size:11px;
border:1.5px solid var(--down);color:var(--down);background:transparent}
.rcard.sm .rcard-m .riskgrade{height:19px;padding:0 6px;font-size:10.5px}
/* 스타 채널 묶음 — 상자가 아니다.
테두리를 두르면 카드마다 이미 무지개 테두리가 있어 테두리가 두 겹이 된다.
위아래 여백만으로 앞뒤 구역과 떨어뜨린다. */
.starbox{border:0;padding:0;margin:22px 0 26px;background:none}
.starbox-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.starbox-hd b{font-size:17px;color:var(--gC)}
.starbox-hd .muted{font-size:12.5px}
/* 버튼은 제목 줄 오른쪽 끝에 붙인다. */
.starbox-hd .btn{margin-left:auto}
/* 목록 줄의 등급 색 — 홈 카드(.rcard.gA…)와 **같은 배합**을 쓴다.
테두리는 등급색 38%, 배경은 7%. 진하게 칠하면 줄이 스무 개 쌓였을 때
화면이 색으로 뒤덮여 정작 어느 것이 좋은 채널인지 안 보인다.
삼각형은 달지 않는다 — 넓은 줄에서는 등급 알약이 이미 또렷하고,
모서리 장식이 (i) 버튼과 겹친다. */
.ch.gA{border-color:color-mix(in srgb,var(--gA) 38%,var(--line));
background-color:color-mix(in srgb,var(--gA) 7%,var(--glass))}
.ch.gB{border-color:color-mix(in srgb,var(--gB) 38%,var(--line));
background-color:color-mix(in srgb,var(--gB) 7%,var(--glass))}
.ch.gC{border-color:color-mix(in srgb,var(--gC) 38%,var(--line));
background-color:color-mix(in srgb,var(--gC) 7%,var(--glass))}
.ch.gD{border-color:color-mix(in srgb,var(--gD) 38%,var(--line));
background-color:color-mix(in srgb,var(--gD) 7%,var(--glass))}
/* :hover 는 등급 규칙과 명시도가 같으므로 등급마다 따로 적어야 이긴다
(홈 카드에서 똑같이 겪었다). */
.ch.gA:hover,.ch.gB:hover,.ch.gC:hover,.ch.gD:hover{border-color:var(--accent)}
/* 배지 고르기 — 왼쪽에 견본, 오른쪽에 코드.
예전에는 견본 둘을 나란히 두고 그 아래 코드 한 덩어리를 뒀는데, 어느
코드가 어느 배지의 것인지 알 수 없어 가로형 코드를 세로형인 줄 알고
가져가게 되어 있었다. 고른 것 하나만 보여준다. */
/* align-items:start 로 두었더니 코드 칸(88px)이 견본 줄(324px)보다 한참
짧아 오른쪽이 텅 빈 채로 끝났다. stretch 로 두고 코드 칸이 남는 높이를
채우게 한다 — 두 단이 같은 높이로 맞물린다. */
.badgepick{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);
gap:16px;align-items:stretch;margin:14px 0 0}
.bp-opts{display:flex;flex-direction:column;gap:10px;min-width:0}
.bp-opt{display:flex;flex-direction:column;align-items:center;gap:7px;
padding:11px 12px;border:1.5px solid var(--line);border-radius:12px;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
cursor:pointer;font-family:inherit;color:var(--ink);text-align:center;
transition:border-color .2s,background-color .2s,transform .15s}
.bp-opt:hover{border-color:var(--accent);transform:translateY(-1px)}
.bp-opt.on{border-color:var(--accent);
background-color:color-mix(in srgb,var(--accent) 14%,transparent)}
.bp-opt img{display:block;max-width:100%}
.bp-opt>span{font-size:12.5px;font-weight:700}
.bp-opt>span i{font-style:normal;font-weight:400;color:var(--muted);font-size:11.5px}
/* 상자는 **바깥(.bp-code)** 이 그린다. 안쪽
에 테두리를 두었더니,
flex:1 을 줘도 격자가 늘려 준 높이(324px)를 다 채우지 못하고 158px 에서
멈춰 아래가 비었다. 바깥이 상자면 보이는 크기가 곧 격자 높이다. */
.bp-code{min-width:0;display:flex;flex-direction:column;
background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:12px 14px;overflow:auto}
.bp-code pre{margin:0;background:none;border:0;padding:0;border-radius:0}
/* 복사 버튼은 상자 안 오른쪽 위. 흐름 안에 두어(absolute 가 아니라) 코드와
겹치지 않는다 — 상자가 가로로 스크롤돼도 버튼을 가리지 않는다. */
.bp-copy{align-self:flex-end;margin-bottom:8px;flex:none}
.bp-hint{margin:auto;padding:0;color:var(--muted);font-size:13px;text-align:center}
@media (max-width:640px){
.badgepick{grid-template-columns:1fr}
.bp-opts{flex-direction:row;flex-wrap:wrap}
}
/* 카테고리 옮겨 다니기 — 제목 위에. 목록으로 되돌아갔다 오지 않아도 된다. */
/* 칩이 두 줄로 접히므로 줄 사이(row gap)를 넉넉히 준다. 6px 로 두었더니
윗줄과 아랫줄이 붙어 한 덩어리로 보였다. 제목까지의 간격도 함께 넓힌다. */
/* .wrap 에 위쪽 여백이 없어서(padding:0 20px 80px) 이 칩 줄이 페이지 첫
요소일 때 머리말 바로 아래에 붙었다. 여기서만 띄운다 — .wrap 에 주면
이미 여백을 가진 다른 페이지의 제목이 두 번 밀린다. */
.catnav{margin:22px 0 24px;gap:8px 6px}
.catnav a{font-size:12.5px;padding:4px 10px}
/* 코드 방식이 막힐 때만 여는 보조 입력.
접어 두어야 기본 경로가 짧아 보인다 — 근거 작문과 파일 첨부가 펼쳐진 채로
있으면 '이것도 다 해야 하나' 싶어 코드 세 단계보다 무겁게 느껴진다. */
.cfallback{margin:14px 0 0;border:1px solid var(--line);border-radius:10px;
padding:10px 12px;background:var(--glass)}
.cfallback>summary{cursor:pointer;font-size:13px;color:var(--muted);
list-style:none;padding:2px 0}
.cfallback>summary::-webkit-details-marker{display:none}
.cfallback>summary::before{content:"▸ ";color:var(--accent)}
.cfallback[open]>summary::before{content:"▾ "}
.cfallback>summary:hover{color:var(--accent)}
.cfallback p{font-size:12.5px;line-height:1.6}
/* 단계 표시. 지금 어디쯤인지 보이지 않으면 "이걸 다 해야 하나" 싶어진다. */
.wsteps{display:flex;gap:6px;list-style:none;margin:0 0 20px;padding:0;
font-size:12.5px;flex-wrap:wrap;justify-content:center}
.wsteps li{display:flex;align-items:center;gap:6px;padding:5px 11px;
border:1.5px solid var(--line);border-radius:99px;color:var(--muted)}
.wsteps li b{display:grid;place-items:center;width:18px;height:18px;
border-radius:50%;background:var(--line);color:var(--bg);font-size:11px}
.wsteps li.on{border-color:var(--accent);color:var(--ink)}
.wsteps li.on b{background:var(--accent);color:var(--on-accent)}
.wsteps li.done{border-color:var(--up);color:var(--up)}
.wsteps li.done b{background:var(--up);color:var(--on-up)}
/* 바꿀 제목을 통째로 보여주고 복사하게 한다.
코드만 주고 "제목 끝에 붙이세요" 라고 하면 사람이 이어 붙이다 틀린다 —
공백을 빠뜨리거나, 바꿀 수 없는 **이름**(URL)을 고치려 든다. */
.renamebox{border:1.5px solid var(--accent);border-radius:12px;padding:4px 14px;
margin:16px 0;background:var(--accent-soft)}
.rn-row{display:flex;align-items:center;gap:12px;padding:11px 0;flex-wrap:wrap}
.rn-row+.rn-row{border-top:1px dashed var(--line)}
.rn-row>span{flex:none;width:72px;font-size:12px;color:var(--muted)}
.rn-row>b{flex:1;min-width:0;font-size:15px;overflow-wrap:anywhere}
.rn-next>b{font-weight:800;color:var(--ink);user-select:all}
@media (max-width:520px){
.rn-row>span{width:100%}
}
/* 신청 폼의 이름 확인 결과 (public/checkname.js 가 넣는다).
*
* 태그 모양으로 감싸는 이유: 입력칸의 글자는 아직 '치고 있는 것' 으로
* 보이는데, 태그가 되면 **확정된 값**으로 보인다. 무엇이 확인됐는지가
* 한눈에 들어온다. ✕ 로 지우고 다시 칠 수 있다. */
.nchk{margin-top:7px}
.nchk-row{display:flex;flex-wrap:wrap;gap:6px}
.nchk-tag{display:inline-flex;align-items:center;gap:6px;
padding:4px 6px 4px 11px;border:1.5px solid var(--accent);border-radius:99px;
background:var(--accent-soft);color:var(--ink);font-size:13.5px;font-weight:700}
.nchk-x{border:0;background:none;color:var(--muted);cursor:pointer;
font-size:12px;line-height:1;padding:3px 5px;border-radius:50%}
.nchk-x:hover{background:var(--line);color:var(--ink)}
/* 결과는 셋이다 — 있음·없음·확인 불가. 확인 불가를 '없음' 과 같은 색으로
두면 우리 통신이 실패한 것을 신청자가 자기 잘못으로 읽는다. */
.nchk-note{margin-top:5px;font-size:12.5px;line-height:1.5}
.nchk-note.ok{color:var(--up)}
.nchk-note.no{color:var(--down)}
.nchk-note.na{color:var(--muted)}
/* 소유권 인증 코드 — 손으로 옮겨 적는 값이라 크고 또렷해야 한다. */
.vcode-label{margin:16px 0 4px;font-size:12.5px}
.vcode{margin:0 0 16px;padding:14px;text-align:center;border-radius:10px;
border:1.5px dashed var(--accent);background:var(--accent-soft);
font:800 26px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:2px;color:var(--ink);user-select:all}
.vsteps{margin:0 0 18px;padding-left:20px;font-size:13.5px;line-height:1.8}
.vsteps li{margin-bottom:6px}
.vsteps code{font-size:12.5px}
/* 결제 팝업 */
dialog.paypop{max-width:400px}
.pay-h{margin:0 26px 4px 0;font-size:18px}
.pay-sub{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.pay-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 14px}
.pay-pick button{padding:10px 6px;border:1.5px solid var(--line);border-radius:10px;
background:var(--glass);color:var(--ink);font:700 14px inherit;cursor:pointer;
transition:border-color .2s,background-color .2s}
.pay-pick button:hover{border-color:var(--gC)}
.pay-pick button.on{border-color:var(--gC);
background-color:color-mix(in srgb,var(--gC) 20%,transparent)}
.pay-amt{margin:0 0 12px;font-size:13.5px}
.pay-msg{margin:12px 0 0;font-size:13px;line-height:1.6;min-height:1.2em}
.pay-msg.bad{color:var(--down)}
.pay-msg.ok{color:var(--up)}
/* 추천하기 창 */
dialog.shpop{max-width:420px}
.sh-h{margin:0 26px 4px 0;font-size:18px}
.sh-sub{margin:0 0 16px;color:var(--muted);font-size:13.5px}
.sh-list{display:flex;flex-direction:column;gap:8px}
.sh-item{display:grid;grid-template-columns:34px 1fr;align-items:center;
gap:2px 12px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
background:var(--glass);color:var(--ink);cursor:pointer;font-family:inherit;
text-align:left;transition:border-color .2s,background-color .2s,transform .15s}
.sh-item:hover{border-color:var(--accent);color:var(--ink);transform:translateY(-1px);
background-color:color-mix(in srgb,var(--accent) 12%,transparent)}
.sh-item>span{grid-row:1/3;font-size:22px;line-height:1;text-align:center}
.sh-item b{font-size:14px}
.sh-item i{font-style:normal;font-size:12px;color:var(--muted)}
.sh-inst-hint{margin:12px 0 0;font-size:12.5px;line-height:1.6}
.sh-url{margin:14px 0 0;padding:9px 11px;border-radius:8px;background:var(--bg);
border:1px solid var(--line);font-size:12px;color:var(--muted);
overflow-wrap:anywhere}
/* 신청·후원 모아보기 카드 */
.hubgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
gap:12px;margin:18px 0 0}
.hubcard{display:flex;flex-direction:column;gap:7px;
border:1px solid var(--line);border-radius:14px;padding:16px 17px 15px;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
color:var(--ink);transition:border-color .2s,transform .18s,box-shadow .2s}
.hubcard:hover{border-color:var(--accent);color:var(--ink);
transform:translateY(-2px);box-shadow:var(--shadow)}
.hubhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hubhd b{font-size:16px}
.hubi{font-size:20px;line-height:1}
.hubwhat{margin:0;font-size:13.5px;line-height:1.6}
.hubnote{margin:0;font-size:12.5px;color:var(--muted);line-height:1.55}
/* 카드 전체가 링크라 안쪽 '버튼'은 진짜 버튼이 아니다(a 안에 a 를 넣을 수 없다).
생김새만 빌려 오고, 위치는 카드 바닥에 고정한다. */
.hubcard .btn{margin-top:auto;align-self:flex-start;pointer-events:none}
/* 후원받은 스티커 팩 표시 — 카드 오른쪽 위 별. 채널 카드의 것과 같은 뜻이다. */
.pcard{position:relative}
.pcard .pstar{position:absolute;top:6px;right:8px;z-index:2;
display:inline-flex;align-items:center;gap:3px;font-size:18px;line-height:1;
color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.75))}
.pcard .pstar b{font-size:13px;font-weight:800;color:#fff;
font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.pcard.boosted{border-color:var(--gC)}
/* 후원한 채널이 없을 때.
테두리를 점선으로 두는 건 '여기 무엇이 올 자리'라는 표시다 — 실선 카드로
두면 이것 자체가 내용인 줄 안다. */
.sbempty{display:flex;gap:14px;align-items:flex-start;
border:1.5px dashed color-mix(in srgb,var(--gC) 55%,transparent);
border-radius:14px;padding:18px 20px;background:var(--glass);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.sbempty-i{font-size:30px;line-height:1;flex:none;opacity:.9}
.sbempty b{display:block;font-size:15px;margin-bottom:5px}
.sbempty p{margin:0 0 7px;font-size:13px;color:var(--muted);line-height:1.6}
.sbempty p:last-child{margin-bottom:0}
.sbempty .sbempty-rule{font-size:12.5px;
border-top:1px solid var(--line);padding-top:8px;margin-top:9px}
.sbempty .sbempty-rule b{display:inline;font-size:inherit}
@media (max-width:560px){
.sbempty{padding:15px;gap:11px}
.sbempty-i{font-size:24px}
}
/* 금액이 같은 채널끼리 한 줄. 금액이 바뀌면 줄이 바뀐다. */
.sbrow{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px}
/* 화면이 넓어도 한 줄에 셋만. */
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;flex:1;min-width:0}
/* 후원 금액이 적은 줄일수록 **동그라미만** 작게.
--sz 는 starBox 가 줄마다 인라인으로 넣는다(1.34 → 0.84).
카드 크기와 글자는 건드리지 않는다 — 줄마다 폭이 다르면 격자가 어긋나
목록이 들쭉날쭉해 보인다. 차이는 얼굴 크기 하나로 충분하다. */
.sbrow{--sz:1}
/* 아무리 줄여도 **일반 카드의 동그라미(.rcard-av 46px)보다 작아지지 않는다.**
후원한 채널이 그냥 목록의 채널보다 작아 보이면 앞뒤가 안 맞는다.
좁은 화면에서 57 × 0.78 = 44.5px 로 실제로 그 아래까지 내려갔었다. */
.sbrow{--av-floor:46px}
.sbrow .rcard.boost.sm .rcard-av{
width:max(var(--av-floor), calc(57px * var(--sz)));
height:max(var(--av-floor), calc(57px * var(--sz)))}
@media (min-width:900px){
.sbrow .rcard.boost.sm .rcard-av{
width:max(var(--av-floor), calc(76px * var(--sz)));
height:max(var(--av-floor), calc(76px * var(--sz)))}
}
/* 1~3등 뒤의 카드는 한 단계 작게. 전부 같은 무게면 순서에 뜻이 없다. */
.rcard.sm{padding:11px 7px 9px} /* 스타 상자는 카드가 전부 이 크기다 */
.rcard.sm .rcard-av{width:38px;height:38px}
.rcard.sm .rcard-t{font-size:11.5px}
.rcard.sm .rcard-u,.rcard.sm .rcard-d{font-size:10.5px}
.rcard.sm .rcard-m>*{height:19px}
.rcard.sm .rcard-s,.rcard.sm .rcard-m .gr{font-size:10.5px;padding:0 6px}
.rcard.sm .rcard-m .icard-i{width:19px;font-size:10.5px}
.rcard.sm .rcard-ks.star{font-size:19px;padding:0}
.rcard.sm .rcard-ks.star b{font-size:13.5px}
/* 제목 줄 오른쪽에 버튼을 두는 머리말 */
.h1row{justify-content:space-between;gap:12px}
/* 제목 덩어리도 flex 로 둔다.
*
* 그냥 두면 제목·개수·작은 단추가 전부 글줄로 흘러서, 좁은 화면에서 아무
* 데서나 끊긴다 — 스티커 화면이 "🗂️ 스티커 팩 모음" / "(194) [스티커 안내]"
* 로 갈려, 개수가 제목이 아니라 단추에 딸린 숫자처럼 보였다. flex 로 두면
* 단추가 **한 덩어리로** 다음 줄에 내려가고 제목과 개수는 붙어 있는다. */
.h1row>span{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
/* 좁은 화면에서는 셋을 나란히 둘 수 없다 — 한 장이 100px 도 안 된다.
가로로 넘겨 보게 한다. 스크롤 스냅이라 손을 떼면 한 장에 딱 멈추고,
다음 장 귀퉁이가 조금 보여서 더 있다는 것을 알 수 있다.
(스크롤 막대만 감추고 스크롤 자체는 살려 둔다) */
@media (max-width:640px){
.sbrow{gap:8px}
.strip3{display:flex;width:100%;gap:10px;
overflow-x:auto;overflow-y:visible;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding:3px 0}
.strip3::-webkit-scrollbar{display:none}
.strip3>.rcard{flex:0 0 88%;scroll-snap-align:center;min-width:0}
}
/* 제휴 상자 — 돈을 받는 링크라서, 채널 카드와 **닮지 않게** 만든다.
같은 모양이면 심사 결과처럼 읽힌다. 카드가 아니라 목록이고, 색은
광고와 같은 계열(--ad)을 쓴다. */
.affbox{border:1px solid var(--ad-line);border-radius:14px;padding:14px 16px;
margin:22px 0;background:color-mix(in srgb,var(--ad) 40%,transparent);
backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur)}
.affbox-hd{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.affbox-hd b{font-size:15px}
.affnote{margin:0 0 10px;font-size:12px;color:var(--muted);line-height:1.55}
.affnote b{color:var(--ink)}
.affrow{display:block;padding:9px 11px;border-radius:9px;margin-bottom:6px;
border:1px solid var(--line);background:var(--glass);color:var(--ink)}
.affrow:last-child{margin-bottom:0}
.affrow:hover{border-color:var(--ad-line);color:var(--ink);
background:color-mix(in srgb,var(--ad) 30%,var(--glass))}
.affrow b{display:block;font-size:14px}
.affsub{display:block;font-size:12.5px;color:var(--muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.affat{display:block;font-size:11.5px;color:var(--muted);opacity:.8}
/* 후원 표시는 카드 안에서 한 번 더 말로 밝힌다 — 별만 보면 심사 표식으로 오해한다. */
.boost-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;
padding:1px 8px;border-radius:99px;border:1px solid var(--gC);color:var(--gC);
white-space:nowrap}
/* 등급 삼각형 — 오른쪽 위 모서리.
등급 알약은 셋째 줄에 작게 있어 멀리서는 안 보인다. 모서리를 색으로 칠하면
카드를 훑기만 해도 등급이 읽힌다.
clip-path 는 둥근 모서리를 함께 잘라내지 못하므로 카드에 overflow:hidden 을
걸어 카드의 radius 로 다듬는다. */
/* 삼각형은 **카드 배경**으로 그린다.
따로 요소를 올리면 둥근 모서리 밖으로 삐져나와 overflow:hidden 이 필요한데,
그러면 카드가 화면에 아예 안 그려지는 문제가 있었다(container-type 과 겹칠 때).
배경은 테두리 반경에 저절로 잘리므로 그런 장치가 필요 없다. */
.rcard{background-repeat:no-repeat;background-position:top right;
background-size:58px 58px}
.rcard.gA{background-image:linear-gradient(to bottom left,var(--gA) 50%,transparent 50%);
background-color:color-mix(in srgb,var(--gA) 7%,var(--glass));
border-color:color-mix(in srgb,var(--gA) 38%,var(--line))}
.rcard.gB{background-image:linear-gradient(to bottom left,var(--gB) 50%,transparent 50%);
background-color:color-mix(in srgb,var(--gB) 7%,var(--glass));
border-color:color-mix(in srgb,var(--gB) 38%,var(--line))}
.rcard.gC{background-image:linear-gradient(to bottom left,var(--gC) 50%,transparent 50%);
background-color:color-mix(in srgb,var(--gC) 7%,var(--glass));
border-color:color-mix(in srgb,var(--gC) 38%,var(--line))}
.rcard.gD{background-image:linear-gradient(to bottom left,var(--gD) 50%,transparent 50%);
background-color:color-mix(in srgb,var(--gD) 7%,var(--glass));
border-color:color-mix(in srgb,var(--gD) 38%,var(--line))}
/* 마우스를 올렸을 때.
등급 테두리(.rcard.gA 등)가 .rcard:hover 와 특정도가 같아 hover 가 먹히지
않았다. 등급 클래스까지 함께 짚어 확실히 이긴다. */
.rcard:hover,
.rcard.gA:hover,.rcard.gB:hover,.rcard.gC:hover,.rcard.gD:hover{
transform:translateY(-4px);
border-color:var(--accent);
background-color:color-mix(in srgb,var(--accent) 12%,var(--glass));
box-shadow:0 10px 26px rgba(0,0,0,.22)}
.rcard:hover .rcard-t{color:var(--accent)}
/* 아바타 테두리는 건드리지 않는다. 동그란 사진에 색 테두리가 생기면
채널 사진이 바뀐 것처럼 보인다. */
.rcard:hover .rcard-ks{transform:scale(1.08)}
.rcard-ks{transition:transform .18s cubic-bezier(.2,.7,.3,1)}
/* 안심마크 — 메달과 마주 보는 오른쪽 위.
카드에서 가장 먼저 눈에 들어와야 하는 표식이라 줄 안에 섞으면 묻힌다.
테두리는 두르지 않는다. 마크 자체가 이미 방패꼴이라 테두리를 더하면
도형이 두 겹이 되어 무슨 모양인지 흐려진다. */
.rcard-ks{position:absolute;top:4px;right:4px;z-index:2;line-height:0;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.rcard-ks .ksafe{display:block}
.rcard-ks .bizmark{display:block}
/* 브랜드 채널 카드 — 면 전체를 짙은 파랑으로 채운다.
테두리만 물들였을 때는 마크만 떠 보이고 카드가 일반 카드와 같아 보였다.
글자는 밝은 쪽을 그대로 쓰고(면이 충분히 어둡다), 오른쪽 위 마크는 면과
같은 파랑을 배경으로 삼아 카드에서 도려낸 것처럼 앉는다. */
.rcard.bizch{background:linear-gradient(155deg,#173a86 0%,#0e2456 62%,#0b1c42 100%);
border-color:var(--biz);color:#eef3ff}
.rcard.bizch:hover{border-color:#9dbcff;box-shadow:0 6px 22px rgba(19,52,124,.55)}
.rcard.bizch .rcard-u{color:#9fb8e8}
.rcard.bizch .rcard-t{color:#fff}
.rcard.bizch .rcard-d{color:#c3d2ee}
.rcard.bizch .rcard-av{background:#0b1c42;border-color:#39599e}
/* 원을 키우는 것은 **브랜드 구역 안에서만**이다. 그 카드는 폭이 3분의 1이라
원이 작으면 면이 텅 빈다. 반대로 다섯 칸짜리 줄(카테고리 블록 등)에서까지
키우면 브랜드 채널 한 장만 얼굴이 커서 줄이 들쭉날쭉해 보인다. */
.brand-band .rcard.bizch .rcard-av{width:69px;height:69px}
@media (min-width:900px){.brand-band .rcard.bizch .rcard-av{width:88px;height:88px}}
/* 브랜드 구역의 카드는 **화면의 3분의 1**이다. 안심마크 카드(다섯 칸)보다는
커야 인증 채널이 묻히지 않고, 두 칸(절반)까지 가면 카드 하나가 화면을
차지해 목록이 아니라 광고처럼 보인다. */
.brand-band .strip{grid-template-columns:repeat(3,1fr)}
.brand-band .strip.rot{--cols:3}
@media (max-width:820px){
.brand-band .strip{grid-template-columns:repeat(2,1fr)}
.brand-band .strip.rot{--cols:2}}
@media (max-width:520px){
.brand-band .strip{grid-template-columns:1fr}
.brand-band .strip.rot{--cols:1}}
/* 셋째 줄 — 구독자수 | 등급 | (i). 셋을 같은 알약 꼴로 맞추고 고르게 띄운다. */
.rcard-m{display:flex;gap:0;align-items:center;justify-content:space-evenly;
flex-wrap:nowrap;width:100%;margin-top:4px;min-width:0}
/* 태그 규격은 **한 군데서** 정한다. 홈 카드(.rcard-m)와 목록 줄(.ch .nm)이
같은 규칙을 쓰므로, 한쪽만 손대서 서로 어긋나는 일이 생기지 않는다. */
.rcard-m>*,
.ch .nm>.rcard-s,.ch .nm>.gr,.ch .nm>.pill,.ch .nm>.icard-i{
height:22px;border-radius:99px;border:1.5px solid;
display:inline-flex;align-items:center;justify-content:center;flex:none;
background:transparent;box-sizing:border-box}
.ch .nm>.pill{padding:0 8px;font-size:11px;line-height:1;gap:4px}
.ch .nm>.gr{padding:0 8px;font-size:11px}
/* 위 규격 규칙이 background:transparent 를 걸어서, **안을 채워야 하는**
알약(안심마크·광고)이 배경을 잃었다. 글자색은 채운 배경 위에 얹는
어두운 색이라 그대로 남아, 어두운 카드 위에서 글자가 사라졌다.
명시도가 같아 뒤에 온 규칙이 이겼던 것 — 여기서 다시 채운다. */
.ch .nm>.pill.ok.ksp{background:var(--up);border-color:var(--up);
color:var(--on-up);padding:0 9px 0 5px}
.ch .nm>.pill.ad{background:var(--ad-ink);border-color:var(--ad-ink);
color:var(--on-ad)}
/* 구독자 수 — 중립색. 등급이 뜻을 가진 색이므로 여기까지 물들이면
어느 색이 신호인지 알 수 없어진다.
(--ink 는 어두운 화면에서 흰색, 밝은 화면에서 검정이다. 어느 쪽에서도
또렷하도록 '흰색'을 값이 아니라 역할로 쓴다.) */
.rcard-s{padding:0 8px;font-size:12px;font-weight:700;white-space:nowrap;
border-color:var(--muted);color:var(--ink)}
.rcard-s.up{color:var(--up);border-color:var(--up)}
.rcard-s.down{color:var(--down);border-color:var(--down)}
/* 구독자 알약 — 밝은 보라. 아이콘이 이모지였을 때는 어두운 카드에서 뭉개져
숫자만 보였다.
아이콘 칸은 **색을 채우고 아이콘을 흰색으로** 둔다. 선만 그리면 작은
크기에서 획이 가늘어 여전히 흐릿한데, 면으로 채우면 크기와 무관하게 보인다.
왼쪽 끝까지 붙여 알약의 둥근 모서리에 그대로 잘리게 한다. */
/* 작은 카드(.rcard.sm)에도 왼쪽 여백 0 을 못 박는다 — 그 규칙이 명시도가
높아서, 빼먹으면 스타 상자 안에서만 아이콘 칸이 안쪽으로 밀려 들어간다. */
/* 알약 자체는 여백을 갖지 않는다. 왼쪽은 아이콘 칸이 끝까지 채우고, 오른쪽
여백은 숫자(.subs-n)가 스스로 낸다 — 양쪽에서 여백을 주면 오른쪽만 두 겹이 된다. */
.rcard-s.subs,.rcard.sm .rcard-s.subs{color:var(--subs);border-color:var(--subs);
padding:0;overflow:hidden}
.i-subs{width:12px;height:12px;flex:none;vertical-align:-1px}
/* 아이콘 칸: 사방 여백을 같게 줘야 그림이 색면 한가운데 앉는다. 위아래·좌우
여백이 다르면 아이콘이 한쪽으로 쏠려 보인다. */
.rcard-s.subs .i-subs{align-self:stretch;width:22px;height:auto;
padding:3px;box-sizing:border-box;
background:var(--subs-fill);color:#fff;margin:0}
/* 숫자의 좌우 여백을 같게 맞춘다. 예전에는 아이콘과 숫자 사이가 HTML 의
공백 문자였는데, 그 폭은 글꼴이 정하는 값이라 오른쪽 여백(8px)과 어긋났다.
이제 숫자를 감싸고 양쪽을 CSS 로 못 박는다. */
.rcard-s.subs .subs-n{padding:0 8px;font-weight:inherit;line-height:1}
.rcard-m .gr{padding:0 8px;font-size:11px}
/* 정보 버튼 — 누를 수 있는 것이라 테두리를 또렷하게 둔다. */
.rcard-m .icard-i{position:relative;z-index:2;top:auto;right:auto;
width:22px;font-size:11.5px;background:transparent;
border-color:var(--muted);color:var(--ink)}
.rcard-m .icard-i:hover{background:var(--accent);color:var(--on-accent);
border-color:var(--accent);transform:scale(1.1)}
/* 카드가 좁아지면 '등급' 글자를 뺀다 — 'B등급' 이 'B' 가 된다.
화면 폭이 아니라 **카드 폭**을 봐야 한다. 같은 화면에서도 5칸일 때와
2칸일 때 카드 너비가 다르기 때문이다. */
@container (max-width: 168px){
.rcard-m .gsfx{display:none}
}
/* 컨테이너 질의를 모르는 브라우저용 대비. */
@supports not (container-type: inline-size){
@media (max-width:1024px){.rcard-m .gsfx{display:none}}
}
@media (max-width:820px){.strip{grid-template-columns:repeat(3,1fr)}
.strip>*:nth-child(n+4){display:none}}
@media (max-width:520px){.strip{grid-template-columns:repeat(2,1fr)}
.strip>*:nth-child(n+3){display:none}}
/* 등급 분포 카드 — 이모지 훈장 대신 등급색 띠로 구분한다. */
.mix{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:10px;margin:0 0 18px}
.mixc{display:flex;flex-direction:column;gap:1px;padding:13px 16px;
border-left:4px solid var(--flat)}
.mixc.A{border-left-color:var(--gA)}.mixc.B{border-left-color:var(--gB)}
.mixc.C{border-left-color:var(--gC)}.mixc.D{border-left-color:var(--gD)}
.mixc b{font-size:13px;color:var(--muted);font-weight:700}
.mixn{font-size:24px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.mixn em{font-style:normal;font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.mixc .muted{font-size:12px}
/* 쪽 넘김 */
/* 아래쪽 여백을 빠뜨리고 있었다. 순위·카테고리 화면에서는 쪽 넘김이 마지막
요소라 티가 안 났는데, 스티커 화면은 그 아래로 안내 상자가 이어져서 쪽
번호와 상자가 맞닿아 버렸다. 쪽 넘김은 목록의 끝이라, 뒤따라오는 것과는
확실히 떨어져 있어야 한다. */
.pager{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center;
margin:26px 0 30px}
.pg{min-width:34px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;
background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
color:var(--muted);font-size:13.5px;text-align:center;font-variant-numeric:tabular-nums;
transition:border-color .16s,color .16s}
.pg:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.pg.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.pgx{color:var(--muted);padding:0 2px}
/* 카테고리 카드 (가나다순 목록) */
.catcard{display:flex;flex-direction:column;gap:3px;color:inherit}
.catcard:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.catcard{transition:transform .18s cubic-bezier(.2,.7,.3,1),border-color .18s}
.catcard .ce{font-size:24px}
/* 스타 채널방 칸은 주제 카테고리가 아니므로 목록 위에 따로 놓고 색을 달리한다. */
.starcard{margin:0 0 11px;border-color:var(--gC)}
.starcard b{color:var(--gC)}
.catcard b{font-size:15px}
.catcard .muted{font-size:12.5px}
/* ---------- 분야별 1위 ----------
*
* 홈은 분야마다 **한 장씩**만 세운다. 예전에는 여섯 분야에 다섯 장씩 깔았는데,
* 그러면 순위 페이지와 같은 화면이 되고 나머지 아홉 분야는 첫 화면에 아예
* 오르지 못했다. 카드 위에 분야 이름을 붙여, 어느 분야의 1위인지 카드마다
* 스스로 말하게 한다. */
.cat1{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0}
.cat1-i{min-width:0;display:flex;flex-direction:column;gap:6px}
/* 분야 이름은 이 격자의 **머리말**이다. 카드 안 글자만 하면 카드에 딸린
설명처럼 읽혀서, 무엇을 기준으로 묶인 카드인지 눈에 먼저 들어오지 않는다.
글자는 --ink 로 또렷하게, 채널 수만 흐리게 남긴다. */
.cat1-h{display:flex;align-items:baseline;gap:6px;font-size:16px;font-weight:800;
letter-spacing:-.01em;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cat1-h:hover{color:var(--accent);text-decoration:none}
.cat1-h .ce{font-size:20px;line-height:1}
.cat1-h .muted{font-weight:600;font-size:12px}
@media (max-width:820px){.cat1{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.cat1{grid-template-columns:repeat(2,1fr)}}
/* ---------- 안심마크 구역 ---------- */
/* 예전에는 테두리를 두르고 배경을 깐 상자였다. 홈에 상자가 둘(안심마크·브랜드)
서니 첫 화면이 상자로 나뉘어 답답했다. **상자를 걷고 머리말만 남긴다** —
도장과 제목이 이미 충분히 눈에 걸린다. */
/* 구역 사이는 **가는 회색 선 하나**로만 가른다. 상자를 걷어내니 안심마크
구역과 위 목록이 붙어 보였다. 선은 상자처럼 구역을 가두지 않으면서
"여기서부터 다른 이야기"만 말해 준다. */
.ksafe-band{margin:0 0 26px;border-top:1px solid var(--line);padding-top:18px}
.ksafe-hd{display:flex;gap:18px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.ksafe-stamp{flex:none;animation:float 5s ease-in-out infinite}
.ksafe-stamp svg{display:block}
.ksafe-band h2{margin:0 0 4px;font-size:19px;color:var(--up)}
.ksafe-band p{margin:0 0 3px;font-size:13.5px}
.ksafe-band .muted{font-size:12.5px}
/* '전체 보기'는 **제목 줄 오른쪽 끝**에 선다. 머리말 전체의 끝에 두었더니
설명 문단 아래로 흘러내려, 무엇의 전체를 보는 버튼인지 흐려졌다. */
.band-t{display:flex;align-items:center;gap:10px;margin:0 0 4px}
.band-t h2{margin:0}
.band-more{margin-left:auto;flex:none}
.band-txt{flex:1;min-width:240px}
/* ---------- 브랜드 채널 구역 ---------- */
/* 안심마크 구역과 같은 골격이고 색만 다르다(제목·마크). 여기도 상자는 없다. */
/* 선은 **위가 아니라 아래**에 긋는다. 위에 그으면 안심마크와 브랜드가 서로
다른 이야기로 갈리는데, 둘은 '심사가 준 표식 / 신원이 확인된 표식'으로
나란히 읽혀야 하는 한 덩어리다. 선을 아래로 내리면 표식 구역 전체가 묶이고,
그 다음의 순위 이야기(급상승·구독자 TOP)와 갈린다. */
.brand-band{margin:0 0 26px;border-bottom:1px solid var(--line);padding-bottom:22px}
.brand-band .ksafe-hd{margin:0 0 14px}
.brand-band h2{margin:0 0 4px;font-size:19px;color:var(--biz)}
.brand-band p{margin:0 0 3px;font-size:13.5px}
.brand-band .muted{font-size:12.5px}
/* ---------- 카드 슬라이드 (public/rotate.js) ---------- */
/* 10초마다 띠 전체가 한 칸씩 왼쪽으로 미끄러지고, 맨 앞 카드가 뒤로 돌아간다.
카드를 감췄다 보였다 하는 방식으로도 목록은 바뀌지만 '밀렸다'는 느낌이
나지 않는다 — 움직이는 것이 눈에 보여야 다음 카드를 기다리게 된다.
.strip.rot 은 다섯 칸 너비의 **창**이고, 실제 카드는 그 안의 .rtrack 에
전부(열다섯 장) 가로로 늘어서 있다. 창 밖은 잘라낸다. */
.strip.rot{display:block;overflow:hidden;--cols:5}
/* 창을 좁히는 규칙은 **기본값 바로 아래**에 둔다.
*
* 예전에는 위쪽 모바일 묶음(.strip 격자와 같은 자리)에 적어 두었는데, 명시도가
* 같은 규칙은 나중에 적힌 것이 이긴다 — 기본값 --cols:5 가 뒤에 있어 좁은
* 화면에서도 계속 다섯 칸이었다. 375px 에서 카드 한 장이 65px 이라 이름도
* 제목도 "@retai…", "[대신…" 으로 잘렸다.
*
* 미끄러지는 띠는 카드를 감추는 것이 아니라 창을 좁힌다. 좁은 화면에서도
* 열다섯 장을 그대로 돌리되 한 번에 두 장만 보인다. */
@media (max-width:820px){.strip.rot{--cols:3}}
@media (max-width:520px){.strip.rot{--cols:2}}
.rtrack{display:grid;grid-auto-flow:column;
/* 칸 너비는 창 너비에서 사이 간격을 뺀 뒤 칸 수로 나눈다. 픽셀을 자바스크립트로
계산해 박으면 창 크기가 바뀔 때 어긋난다. */
grid-auto-columns:calc((100% - (var(--cols) - 1) * 10px) / var(--cols));
gap:10px;will-change:transform}
/* 로테이션 중인 띠에서는 카드가 뜨는 등장 애니메이션을 끈다. 미끄러져 들어오는
카드가 동시에 아래에서 솟아오르면 두 움직임이 겹쳐 어지럽다. */
.strip.rot .rcard.rise{animation:none;opacity:1}
@media (prefers-reduced-motion:reduce){
.rtrack{transition:none !important}
}
/* ---------- 모바일 ----------
*
* 좁은 화면에서 실제로 겪은 문제만 고친다.
* · 헤더가 세 줄로 늘어나 고정된 채 화면 절반을 먹었다.
* · 제목이 커서 두 줄을 넘겼다.
* · 카드 사이 여백이 데스크톱 기준이라 답답하거나 붙어 보였다.
* · 표가 화면을 밀어내 가로 스크롤이 생겼다.
*/
@media (max-width:640px){
.wrap{padding:0 14px 56px}
/* 헤더: 로고+검색 한 줄, 메뉴는 옆으로 미는 한 줄. */
.site-in{padding:10px 14px;gap:9px;flex-wrap:wrap}
.brand{font-size:17px;order:1}
form.q{order:2;margin-left:auto;flex:0 1 auto}
form.q input{min-width:0;width:36vw;padding:7px 10px}
form.q .btn{padding:7px 11px}
form.q button .qt{display:none} /* 좁으면 글자를 빼고 돋보기만 */
/* 가로 스크롤로 감췄더니 '홈'이 잘려 보이고 스크롤이 있다는 표시도 없었다.
항목이 여섯뿐이라 두 줄로 두는 편이 낫다 — 다 보이고 높이도 얼마 안 는다. */
nav.main{order:3;width:100%;gap:3px 12px;flex-wrap:wrap;font-size:13px}
nav.main a{white-space:nowrap;padding:1px 0;border-bottom-width:1.5px}
nav.main a.btn{padding:5px 10px}
/* 슬로건 둘째 줄은 좁은 화면에서 군더더기다. */
.slogan-in{padding:6px 14px;font-size:12px}
.slogan-in span:last-child{display:none}
h1{font-size:21px;margin:18px 0 6px;gap:7px}
h2{font-size:16.5px;margin:26px 0 10px}
.lead{margin:0 0 16px;font-size:14px}
.grid{gap:9px}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.card{padding:13px 14px}
.ch{padding:11px 12px;gap:10px}
.ch .av,.ch .avph{width:38px;height:38px}
.catblk{margin:24px 0 28px}
.catblk-hd{gap:7px;margin:0 0 9px}
.catblk-hd>a:first-child{font-size:15.5px}
.catblk-hd .pill{margin-left:auto}
/* 도장을 제목 옆이 아니라 **위**로 올린다.
*
* 도장(84px)과 글 상자(최소 240px)를 나란히 두면 375px 화면에서 제목에
* 남는 폭이 250px 남짓이다. 거기에 '전체 보기' 단추까지 같은 줄에 서니
* 제목이 "K-SAFE / 안심마크 채널" 로 접히고 단추만 첫 줄에 떠 있었다.
* 도장을 한 줄 위로 올리면 제목이 폭을 다 쓰고 한 줄에 선다. */
.ksafe-hd{gap:10px;margin:0 0 12px;flex-direction:column;align-items:flex-start}
.band-txt{min-width:0;width:100%}
.ksafe-band h2,.brand-band h2{margin:0 0 3px;font-size:17px}
/* 표는 좁은 화면에서 화면 밖으로 밀려나기 쉽다. 스스로 스크롤하게 둔다. */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
dialog.ipop{padding:18px 16px 16px;width:calc(100% - 20px);max-height:90vh;
border-radius:14px}
.ihd{gap:12px;margin:0 26px 10px 0}
.iav img,.iav .iph{width:54px;height:54px}
.ittl h3{font-size:17px}
.itab th{width:44%;white-space:normal}
}
/* 아주 좁은 화면(360px 이하)에서는 검색창이 메뉴를 밀어낸다. */
@media (max-width:400px){
form.q input{width:34vw}
.brand{font-size:16px}
}
/* ---------- 카드의 (i) 버튼 + 정보 팝업 ---------- */
.icard-i{position:absolute;top:8px;right:8px;z-index:2;width:22px;height:22px;
border-radius:50%;border:1.5px solid var(--line);background:var(--surface);
color:var(--muted);font:700 12px/1 "Times New Roman",serif;font-style:italic;
cursor:pointer;display:grid;place-items:center;padding:0;
transition:color .16s,border-color .16s,transform .16s}
.icard-i:hover{color:var(--accent);border-color:var(--accent);transform:scale(1.12)}
/* 손끝은 22px 짜리 원을 정확히 못 누른다. 목록 한 줄에 이 단추가 예순 개씩
* 깔리는 화면(/ksafe)에서는 옆 카드를 잘못 여는 일이 잦다.
*
* **보이는 크기는 그대로 두고 누를 자리만 넓힌다.** 22px 원을 키우면 같은
* 줄의 구독자·등급 알약(모두 22px)과 높이가 어긋나 줄이 들쭉날쭉해진다.
*
* 왼쪽만 조금 넓히는 이유는 그쪽에 이웃 알약이 붙어 있어서다 — 오른쪽·위아래는
* 비어 있으므로 넉넉히 가져간다. 세로 42px 이면 손끝으로 충분하다. */
@media (pointer:coarse),(max-width:640px){
.icard-i::after{content:'';position:absolute;inset:-10px -10px -10px -4px}
}
.ch{position:relative}
/* position 을 못 박는다.