/* nb-skin.css — NB YouTube Tools (nb6.mhna98.com) 사이트 전용 스킨. 생성: _shared/skins/make_skins.py — 직접 고치지 말고 생성기를 고친다 */
/* 콘셉트: 방송 포스터 — 액센트 띠 히어로 + 재생 화면 | hero=poster card=big sect=panel win=player motif=diag */
:root { --sk-head: "Black Han Sans", Pretendard, "Malgun Gothic", sans-serif; --sk-r: 20px; }
html:not([data-theme="light"]) { --dark: #0c0806; }
.hero h1, .tools-head h2, .channel-hub > h2, .ws-head h3, .site-blueprint h2, .brand strong, .ft-brand strong, main.latest-posts > article > h1, main.latest-posts > article h2, .affiliate-deals .section-head > span, .latest-posts > .section-head > span, .blog-thumb strong, .nbp-win b { font-family: var(--sk-head) !important; }
.hero h1, .tools-head h2, .channel-hub > h2, main.latest-posts > article > h1, .blog-thumb strong { font-weight: 400 !important; letter-spacing: -0.01em !important; }
html:not([data-theme="light"]) body { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text), transparent 95%) 0 1px, transparent 1px 16px), radial-gradient(1100px 520px at 85% -5%, color-mix(in srgb, var(--brand), transparent 80%), transparent 60%), var(--dark) !important; }
html[data-theme="light"] body { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text), transparent 95%) 0 1px, transparent 1px 16px), radial-gradient(1100px 520px at 85% -5%, color-mix(in srgb, var(--brand), transparent 86%), transparent 60%), #f5f6f9 !important; }
body:has(.site-header) :is(.latest-posts, .channel-hub, .tools-section, .affiliate-deals) { border-radius: calc(var(--sk-r) + 6px) !important; }
body .tool-grid > .tool-card, body .blog-mini, body .workspace-panel { border-radius: var(--sk-r) !important; }
body .hero .hero-grid { grid-template-columns: minmax(0, 1fr) !important; text-align: center; gap: 30px; }
body .hero .hero-copy { max-width: 820px; margin: 0 auto; }
body .hero .hero-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
body .hero .hero-actions, body .hero .hero-stats { justify-content: center; }
body .hero .hero-art { width: min(100%, 980px); margin: 0 auto; min-height: 330px; }

/* 포스터: 히어로 전체를 액센트 색 띠로 */
body .hero {
  margin-top: 8px; padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px);
  background:
    radial-gradient(700px 360px at 80% 10%, rgba(255, 255, 255, 0.16), transparent 70%),
    linear-gradient(140deg, color-mix(in srgb, var(--brand), #000 18%), color-mix(in srgb, var(--accent), #000 52%));
  border-block: 1px solid rgba(255, 255, 255, 0.12);
}
body .hero h1, html[data-theme="light"] body .hero h1 { color: #fff !important; -webkit-text-fill-color: #fff; }
body .hero .hero-grid h1.nbk .nbk-hl, html[data-theme="light"] body .hero .hero-grid h1.nbk .nbk-hl {
  background: linear-gradient(100deg, #fff, color-mix(in srgb, var(--brand), #fff 72%));
  -webkit-background-clip: text; background-clip: text;
}
body .hero .nbk::after { background: #fff; }
body .hero .hero-copy > p, body .hero .eyebrow, body .hero .hero-stats span { color: rgba(255, 255, 255, 0.86) !important; }
body .hero .hero-stats b { -webkit-text-fill-color: #fff; color: #fff; background: none; }
body .hero .hero-stats { border-top-color: rgba(255, 255, 255, 0.22); }
body .hero .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); }
body .hero .btn.primary { background: #fff; color: color-mix(in srgb, var(--brand), #000 30%); }
/* 큰 타일: 아이콘 위, 이름 아래 (PC 3열) */
@media (min-width: 641px) {
  body .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
  body .tool-grid > .tool-card { flex-direction: column; align-items: flex-start; min-height: 168px; padding: 22px !important; gap: 16px; }
  body .tool-grid > .tool-card .t-ico { width: 58px; height: 58px; border-radius: calc(var(--sk-r) - 4px); }
  body .tool-grid > .tool-card .t-ico svg { width: 28px; height: 28px; }
  body .tool-grid > .tool-card strong { font-size: 16.5px; }
}
/* 영상 플레이어 */
.nbp-art .nbp-rows span:first-child { width: 100% !important; height: 6px; background: linear-gradient(90deg, #ff2d55 0 62%, color-mix(in srgb, var(--text), transparent 85%) 62%) !important; }
.nbp-art .nbp-bars { position: relative; }
.nbp-art .nbp-bars::after {
  content: ""; position: absolute; left: 50%; top: 42%; width: 0; height: 0; margin: -16px 0 0 -10px;
  border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}
.hero .eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #ff2d55; box-shadow: 0 0 0 4px rgba(255, 45, 85, 0.3); }
.blog-mini > .blog-thumb { aspect-ratio: 16 / 9; min-height: 0 !important; }
@media (prefers-reduced-motion: reduce) { .nbp-art .nbp-rows::before, .hero .eyebrow::before { animation: none !important; } }
html.perf-lite .nbp-art .nbp-rows::before, html.perf-lite .hero .eyebrow::before { animation: none !important; }