/* nb-skin.css — NB Study Tools (nb20.mhna98.com) 사이트 전용 스킨. 생성: _shared/skins/make_skins.py — 직접 고치지 말고 생성기를 고친다 */
/* 콘셉트: 공책 — 밝은 공책 줄 + 손글씨 제목 + 반전 배치 | hero=reverse card=index sect=band win=page motif=lines */
:root { --sk-head: "Gaegu", Pretendard, "Malgun Gothic", sans-serif; --sk-r: 18px; }
:root { --sk-on: #4338ca; --sk-onA: #4f5465; --sk-txd: #a59fe6; --sk-txl: #4338ca; } /* 대비 안전 색(흰 글자 면·다크/라이트 글자) — 생성기가 브랜드색에서 계산 */
html:not([data-theme="light"]) { --dark: #07071a; }
.hero h1, .tools-head h2, .channel-hub > h2, .nb-channel-intro h2, .deals-head 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; }
html:not([data-theme="light"]) body { background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--text), transparent 94%) 0 1px, transparent 1px 32px), 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(0deg, color-mix(in srgb, var(--text), transparent 94%) 0 1px, transparent 1px 32px), radial-gradient(1100px 520px at 85% -5%, color-mix(in srgb, var(--brand), transparent 86%), transparent 60%), #f7f7fd !important; }
html[data-theme="light"] .hero-art .art-card { background: #fff; }
html[data-theme="light"] :is(.latest-posts, .channel-hub, .tools-section, .affiliate-deals) { background: rgba(255, 255, 255, 0.72); }
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 { text-align: left; }
body .hero .hero-copy { max-width: none; margin: 0; }
body .hero .hero-copy > p:not(.eyebrow) { margin-left: 0; margin-right: 0; }
body .hero .hero-actions, body .hero .hero-stats { justify-content: flex-start; }

/* 반전 배치: 미리보기가 왼쪽, 제목이 오른쪽 (모바일은 제목 먼저) */
@media (min-width: 861px) {
  body .hero .hero-grid { grid-template-columns: minmax(340px, 1fr) minmax(0, 0.95fr); }
  body .hero .hero-art { order: -1; }
}
/* 번호 카드: 위 액센트 선 + 큰 번호 */
body .tool-grid { counter-reset: nbtool; }
body .tool-grid > .tool-card { counter-increment: nbtool; border-top: 3px solid var(--brand) !important; }
@media (min-width: 641px) { body .tool-grid > .tool-card { padding-right: 58px !important; } }
body .tool-grid > .tool-card::after {
  content: counter(nbtool, decimal-leading-zero); position: absolute; right: 14px; bottom: 6px;
  font: 400 32px/1 var(--sk-head); color: color-mix(in srgb, var(--text), transparent 86%); pointer-events: none;
}
@media (max-width: 640px) { body .tool-grid > .tool-card::after { font-size: 22px; right: 8px; bottom: 4px; } }
/* 틴트 띠: 섹션마다 액센트 옅은 바탕 */
body:has(main#home) :is(.latest-posts, .channel-hub, .tools-section, .affiliate-deals) {
  background: color-mix(in srgb, var(--brand), transparent 91%) !important;
  border-color: color-mix(in srgb, var(--brand), transparent 72%) !important;
}
/* 종이 한 장: 밝은 지면 + 줄 */
.nbp-art .art-card.one { background: #fbfaf7 !important; border-color: transparent !important; color: #17181b; }
.nbp-art .art-card.one .nbp-win b { color: #17181b !important; }
.nbp-art .art-card.one .nbp-win > i { display: none; }
.nbp-art .art-card.one .nbp-win b { margin-left: 0; }
.nbp-art .art-card.one .nbp-rows span { background: #dedbd2 !important; height: 6px; }
.nbp-art .art-card.one .nbp-rows span:first-child { background: color-mix(in srgb, var(--brand), #fff 35%) !important; }
.nbp-art .art-card.one .nbp-bars span { opacity: 0.35; background: #cfcabd !important; box-shadow: none !important; }
.nbp-art .art-card.one .nbp-bars span:nth-child(4) { opacity: 1; background: var(--brand) !important; }
.nbp-art .art-card.one .nbp-bars { border-bottom-color: #e4e0d6; }
body .hero .hero-grid h1 { line-height: 1.15 !important; }
.blog-mini > .blog-thumb { background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 18px), linear-gradient(145deg, var(--brand), color-mix(in srgb, var(--brand), #000 40%)) !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; }