/* nb-skin.css — NB Finance Tools (nb13.mhna98.com) 사이트 전용 스킨. 생성: _shared/skins/make_skins.py — 직접 고치지 말고 생성기를 고친다 */
/* 콘셉트: 은행 영수증 — 장부 줄무늬 + 영수증 창 + 티켓 카드 | hero=split card=ticket sect=panel win=receipt motif=lines */
:root { --sk-head: "Song Myung", Pretendard, "Malgun Gothic", sans-serif; --sk-r: 18px; }
html:not([data-theme="light"]) { --dark: #050a07; }
.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(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%), #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 { 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(0, 0.95fr) minmax(340px, 1fr); } }
/* 티켓·쿠폰: 왼쪽 그루터기 + 점선 + 양쪽 홈 */
body .tool-grid > .tool-card {
  --stub: 72px;
  background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--text), transparent 72%) 0 5px, transparent 5px 10px) var(--stub) 10px / 1.5px calc(100% - 20px) no-repeat, var(--panel-2) !important;
  -webkit-mask: radial-gradient(circle 9px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle 9px at var(--stub) 0, transparent 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at var(--stub) 100%, transparent 97%, #000) bottom / 100% 51% no-repeat;
  gap: 26px !important;
}
body .tool-grid > .tool-card.is-active { background: repeating-linear-gradient(180deg, var(--brand) 0 5px, transparent 5px 10px) var(--stub) 10px / 1.5px calc(100% - 20px) no-repeat, color-mix(in srgb, var(--brand), transparent 84%) !important; }
@media (max-width: 640px) { body .tool-grid > .tool-card { --stub: 52px; gap: 14px !important; } }
/* 영수증 창: 종이 + 아래 톱니 */
.nbp-art .art-card.one {
  background: #f7f4ec !important; border-color: transparent !important; color: #15171a;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 16px 100%;
}
.nbp-art .art-card.one .nbp-win b { color: #15171a !important; }
.nbp-art .art-card.one .nbp-win > i { background: #c9c3b4 !important; }
.nbp-art .art-card.one .nbp-rows span { background: repeating-linear-gradient(90deg, #b8b2a2 0 6px, transparent 6px 10px) !important; height: 2px; border-radius: 0; }
.nbp-art .art-card.one .nbp-rows span:first-child { height: 10px; background: color-mix(in srgb, var(--brand), #fff 30%) !important; border-radius: 3px; }
.nbp-art .art-card.one .nbp-bars { border-bottom-color: #d6d0c0; }
.hero-stats b { font-variant-numeric: tabular-nums; }
.hero .eyebrow::before { content: "₩"; width: auto; height: auto; background: none; font-size: 15px; color: var(--brand); }
@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; }