/* ============================================================
   SurfingBear Tools — skin v4.0 "Light marketplace"
   (UI001 structure + advisor light spec, applied 2026-08-23)
   80–90% white/light grey · blue/cyan = accent, not background.
   Tokens: bg #F8FAFC · card #FFFFFF · border #E2E8F0
           heading #111827 · body #64748B
           primary #1CA7EC (SurfingBear blue) · tint #E0F2FE
           ink band #111827 · success #16A34A · warn #F59E0B · error #EF4444
   Radius: 8 inputs · 10 buttons · 10–12 cards · 16 containers
   Type:   Pretendard Variable (Inter-metric Latin, Korean-first)
   ============================================================ */

html,body{background:#F8FAFC}

/* ---------- content namespace ---------- */
.sbb{font-family:'Pretendard Variable',Pretendard,Inter,-apple-system,'Malgun Gothic',sans-serif;
  background:#F8FAFC;color:#111827;line-height:1.6;-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow:hidden;position:relative}
.sbb *{box-sizing:border-box}
.sbb .wrap{max-width:1140px;margin:0 auto;padding:0 24px;position:relative}
.sbb .sec{padding:72px 0;position:relative}
.sbb h1{font-size:clamp(34px,5vw,52px);line-height:1.15;letter-spacing:-0.025em;font-weight:700;margin:0 0 16px;color:#111827}
.sbb h2{font-size:clamp(26px,3.6vw,36px);line-height:1.2;letter-spacing:-0.02em;font-weight:700;margin:0 0 12px;color:#111827}
.sbb h3{font-size:20px;font-weight:600;margin:0 0 8px;letter-spacing:-0.01em;color:#111827}
.sbb p{margin:0}
.sbb .sub{font-size:clamp(15px,1.8vw,17px);font-weight:400;color:#64748B;line-height:1.7;max-width:640px}
.sbb .en{font-feature-settings:'tnum' 1}

/* highlight — key words in the single accent */
.sbb .hl{background:none;padding:0;color:#1CA7EC}
.sbb .hl-coral{background:none;padding:0;color:#1CA7EC}
.sbb .hl-mist{background:#E0F2FE;padding:0 8px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* dot-grid hero texture — barely-there */
.sbb .dots{background-image:radial-gradient(rgba(17,24,39,.07) 1px,transparent 1px);background-size:24px 24px}

/* ---------- cards ---------- */
.sbb .nbcard{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;
  box-shadow:0 1px 3px rgba(17,24,39,.05);
  padding:22px;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sbb .nbcard:hover{transform:translateY(-2px);border-color:#CBD5E1;box-shadow:0 8px 24px rgba(17,24,39,.09)}
.sbb .nbcard p.desc{color:#64748B;font-size:14.5px;line-height:1.65;margin:0 0 14px;font-weight:400}
.sbb .nbcard h3{font-size:17.5px;font-weight:600}
.sbb .nbcard.teal{background:#F0F9FF;border-color:#BAE6FD}
.sbb .nbcard.mist{background:#F1F5F9}

/* ---------- tool cards (marketplace unit — advisor card spec) ---------- */
.sbb .toolcard{display:flex;flex-direction:column;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;
  box-shadow:0 1px 3px rgba(17,24,39,.05);padding:20px;text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sbb .toolcard:hover{border-color:#1CA7EC;box-shadow:0 10px 28px rgba(17,24,39,.10);transform:translateY(-2px)}
.sbb .toolcard .tc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sbb .toolcard .tc-icon{flex:none;width:36px;height:36px;border-radius:9px;background:#E0F2FE;
  display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease}
.sbb .toolcard:hover .tc-icon{transform:scale(1.08)}
.sbb .toolcard .tc-icon svg{display:block}
.sbb .toolcard h3{font-size:16.5px;font-weight:600;margin:0;line-height:1.3}
.sbb .toolcard .tc-meta{font-size:12px;font-weight:600;letter-spacing:.4px;color:#64748B;margin:0 0 8px}
.sbb .toolcard .tc-meta b{color:#16A34A;font-weight:700}
.sbb .toolcard .tc-meta b.soon{color:#F59E0B}
.sbb .toolcard p.desc{color:#64748B;font-size:14px;line-height:1.6;margin:0 0 16px;font-weight:400}
.sbb .toolcard .tc-foot{margin-top:auto;display:flex;align-items:center;gap:10px}
.sbb .hidden{display:none!important}

/* ---------- search + filter chips ---------- */
.sbb .toolsearch{position:relative;max-width:620px;margin:0 auto}
.sbb .toolsearch svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);pointer-events:none}
.sbb .toolsearch input{width:100%;height:56px;border:1px solid #E2E8F0;border-radius:12px;
  padding:0 18px 0 48px;font-family:inherit;font-size:16px;color:#111827;background:#FFFFFF;
  box-shadow:0 1px 3px rgba(17,24,39,.05);outline:none;transition:border-color .15s,box-shadow .15s}
.sbb .toolsearch input::placeholder{color:#94A3B8}
.sbb .toolsearch input:focus{border-color:#1CA7EC;box-shadow:0 0 0 3px rgba(28,167,236,.15)}
.sbb .fchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 0}
.sbb .fchip{display:inline-block;border:1px solid #E2E8F0;border-radius:999px;padding:8px 16px;
  font-family:inherit;font-weight:500;font-size:14px;background:#FFFFFF;color:#334155;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.sbb .fchip:hover{border-color:#1CA7EC;color:#1CA7EC}
.sbb .fchip.on{background:#1CA7EC;border-color:#1CA7EC;color:#FFFFFF}

/* ---------- directory shell (sidebar layout, /tools) ---------- */
.sbb .dirshell{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.sbb .dirside{position:sticky;top:86px}
.sbb .dirside h5{font-size:12px;font-weight:700;letter-spacing:1.2px;color:#94A3B8;margin:0 0 10px;text-transform:uppercase}
.sbb .dirside .fchips{display:block;margin:0}
.sbb .dirside .fchip{display:block;width:100%;text-align:left;border:none;background:none;border-radius:8px;
  padding:9px 12px;margin:0 0 2px;font-size:14.5px;color:#334155}
.sbb .dirside .fchip:hover{background:#F1F5F9;color:#111827}
.sbb .dirside .fchip.on{background:#E0F2FE;color:#0284C7;font-weight:600}
@media(max-width:900px){
  .sbb .dirshell{grid-template-columns:1fr;gap:22px}
  .sbb .dirside{position:static}
  .sbb .dirside h5{display:none}
  .sbb .dirside .fchips{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .sbb .dirside .fchip{display:inline-block;width:auto;flex:none;border:1px solid #E2E8F0;border-radius:999px;padding:8px 16px;background:#FFFFFF}
  .sbb .dirside .fchip.on{background:#1CA7EC;border-color:#1CA7EC;color:#FFFFFF}
}

/* ---------- buttons (hierarchy: primary filled · secondary bordered · small outlined) ---------- */
.sbb .btn{display:inline-block;background:#1CA7EC;color:#FFFFFF;border:1px solid #1CA7EC;border-radius:10px;
  padding:13px 20px;font-weight:600;font-size:15px;line-height:1.2;text-decoration:none;
  transition:filter .15s,transform .15s,box-shadow .15s;margin:6px 8px 6px 0;cursor:pointer}
.sbb .btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 6px 16px rgba(28,167,236,.30);color:#FFFFFF}
.sbb .btn:active{transform:translateY(0);filter:brightness(.96);box-shadow:none}
.sbb .btn.ghost{background:#FFFFFF;color:#111827;border:1px solid #E2E8F0}
.sbb .btn.ghost:hover{color:#111827;border-color:#1CA7EC;box-shadow:0 4px 12px rgba(17,24,39,.07);filter:none}
.sbb .btn.on-dark{background:#1CA7EC;color:#FFFFFF;border-color:#1CA7EC}
.sbb .btn.on-dark:hover{color:#FFFFFF}
.sbb .btn.sm{padding:9px 14px;font-size:13.5px;border-radius:8px;margin:0}
.sbb .btn.sm.ghost{background:transparent}
.sbb .more{color:#1CA7EC;font-weight:600;text-decoration:none;font-size:14.5px;
  border-bottom:1px solid transparent;transition:border-color .15s}
.sbb .more:hover{border-bottom-color:#1CA7EC;text-decoration:none;background:none}

/* ---------- badges (status, not decoration) & chips ---------- */
.sbb .sticker{display:inline-block;border:1px solid #E2E8F0;border-radius:999px;padding:6px 14px;
  font-weight:600;font-size:13px;background:#FFFFFF;color:#334155;margin:0 8px 10px 0;animation:none}
.sbb .sticker.teal{background:#E0F2FE;border-color:#BAE6FD;color:#0284C7}
.sbb .sticker.coral{background:#F1F5F9;border-color:#E2E8F0;color:#64748B}
.sbb .sticker.r1,.sbb .sticker.r2,.sbb .sticker.r3{transform:none;animation:none}
.sbb .chip{display:inline-block;border:1px solid #E2E8F0;border-radius:999px;padding:4px 12px;
  font-weight:600;font-size:12px;background:#F1F5F9;color:#64748B;margin-bottom:12px}
.sbb .chip.purple{background:#FFF7ED;border-color:#FED7AA;color:#C2410C}
.sbb .chip.coral{background:#E0F2FE;border-color:#BAE6FD;color:#0284C7}
.sbb .chip.teal{background:#DCFCE7;border-color:#BBF7D0;color:#15803D}

/* ---------- grid ---------- */
.sbb .grid{display:grid;gap:20px}
.sbb .g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.sbb .g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sbb .g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- marquee strip — quiet ticker ---------- */
.sbb .marquee{background:#FFFFFF;border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0;
  overflow:hidden;white-space:nowrap;padding:13px 0}
.sbb .marquee .track{display:inline-block;animation:sbbScroll 30s linear infinite;
  font-weight:500;font-size:14.5px;color:#64748B}
.sbb .marquee .track span{margin:0 24px}
.sbb .marquee:hover .track{animation-play-state:paused}

/* ---------- ink band (the 10–20% dark) ---------- */
.sbb .dark{background:#111827;color:#F8FAFC;border-radius:16px;border:1px solid #111827;box-shadow:none}
.sbb .dark h2{color:#FFFFFF}
.sbb .dark h3{color:#FFFFFF}
.sbb .dark .accent{color:#4ABEF0}
.sbb .dark p{color:#9CA3AF}
.sbb .painrow{display:flex;justify-content:space-between;gap:12px;align-items:center;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:16px 20px;margin-bottom:12px;flex-wrap:wrap;
  background:rgba(255,255,255,.03);transition:border-color .2s,background .2s}
.sbb .painrow:hover{border-color:rgba(28,167,236,.6);background:rgba(28,167,236,.07)}
.sbb .painrow b{font-size:16px;color:#FFFFFF;font-weight:600}
.sbb .painrow span{color:#4ABEF0;font-weight:600;font-size:14.5px}
.sbb .stat{font-feature-settings:'tnum' 1;
  font-size:clamp(32px,4.5vw,52px);font-weight:700;color:#4ABEF0;margin:0;letter-spacing:-0.02em}

/* ---------- steps / FAQ ---------- */
.sbb .step-num{display:inline-flex;font-family:inherit;width:42px;height:42px;
  border:1px solid #BAE6FD;border-radius:10px;background:#E0F2FE;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:#0284C7;box-shadow:none;margin-bottom:14px}
.sbb .faqcard{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 1px 3px rgba(17,24,39,.05);padding:40px}
.sbb .faqcard details{background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;padding:16px 20px;margin-top:12px}
.sbb .faqcard summary{font-weight:600;font-size:16px;cursor:pointer;list-style:none;position:relative;padding-right:30px;color:#111827}
.sbb .faqcard summary::-webkit-details-marker{display:none}
.sbb .faqcard summary::after{content:'+';position:absolute;right:0;top:-4px;font-size:22px;font-weight:400;color:#1CA7EC;transition:transform .2s}
.sbb .faqcard details[open] summary::after{transform:rotate(45deg)}
.sbb .faqcard details p{margin-top:10px;color:#64748B;font-size:15px;font-weight:400;line-height:1.7}

/* ---------- breadcrumb / misc ---------- */
.sbb .crumb{font-size:13px;font-weight:500;color:#94A3B8;margin-bottom:18px}
.sbb .crumb a{color:#94A3B8;text-decoration:none}
.sbb .crumb a:hover{color:#111827}
.sbb .trust{font-size:13.5px;font-weight:500;color:#94A3B8;margin-top:30px}
.sbb table.nbtable{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden;background:#FFFFFF;font-size:14.5px}
.sbb table.nbtable th{background:#F1F5F9;color:#111827;font-weight:600;padding:12px 16px;text-align:left;border-bottom:1px solid #E2E8F0}
.sbb table.nbtable td{padding:12px 16px;border-top:1px solid #E2E8F0;color:#64748B;font-weight:400}

/* ---------- forms (label above · accent focus ring) ---------- */
.sbb input[type=text],.sbb input[type=email],.sbb input[type=tel],.sbb input[type=number],.sbb select,.sbb textarea{
  width:100%;border:1px solid #E2E8F0;border-radius:8px;padding:12px 16px;font-family:inherit;font-size:15px;
  font-weight:400;color:#111827;background:#FFFFFF;outline:none;transition:border-color .15s,box-shadow .15s}
.sbb input::placeholder,.sbb textarea::placeholder{color:#94A3B8}
.sbb input:focus,.sbb select:focus,.sbb textarea:focus{border-color:#1CA7EC;box-shadow:0 0 0 3px rgba(28,167,236,.15)}
.sbb label{font-weight:600;font-size:14px;display:block;margin:0 0 6px;color:#111827}

/* ---------- decorative shapes — dimmed ornaments ---------- */
.sbb .deco{position:absolute;pointer-events:none;z-index:0;opacity:.5}
.sbb .deco svg{display:block}

/* ---------- hero collage cards ---------- */
.sbb .hero-card{position:absolute;z-index:1;pointer-events:none;background:#FFFFFF;border:1px solid #E2E8F0;
  border-radius:12px;box-shadow:0 10px 28px rgba(17,24,39,.10);padding:16px 18px;width:210px;text-align:left}
.sbb .hero-card .t{font-weight:600;font-size:13.5px;margin:0 0 8px;letter-spacing:-0.01em;color:#111827}
.sbb .hero-card .cap{font-size:11.5px;font-weight:500;color:#64748B;margin:8px 0 0}
.sbb .hero-card .bar{height:8px;border-radius:99px;background:#F1F5F9;border:1px solid #E2E8F0;
  margin:7px 0 0;position:relative;overflow:hidden}
.sbb .hero-card .bar i{position:absolute;left:0;top:0;bottom:0;background:#1CA7EC;border-right:none}
.sbb .hero-card .big{font-feature-settings:'tnum' 1;font-weight:700;
  font-size:32px;letter-spacing:-0.02em;margin:0;line-height:1.1;color:#111827}
.sbb .hero-card .big em{font-style:normal;background:none;color:#1CA7EC;padding:0}
.sbb .hero-card .row{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;margin-top:7px;color:#111827}
.sbb .hero-card .row svg{flex:none}
.sbb .hero-card.lime{background:#F0F9FF;border-color:#BAE6FD}
.sbb .hero-card.dark{background:#111827;color:#F8FAFC;border-color:#111827}
.sbb .hero-card.dark .cap{color:#9CA3AF}
@media(max-width:1279px){.sbb .hero-card{display:none}}
.sbb .float-a{animation:sbbFloat 9s ease-in-out infinite}
.sbb .float-b{animation:sbbFloat 11s ease-in-out infinite reverse}
.sbb .spin-slow{animation:sbbSpin 40s linear infinite}
@media(max-width:820px){.sbb .deco{display:none}}

/* ---------- product detail page (reusable template) ---------- */
.sbb .prod-hero{display:grid;grid-template-columns:1fr 290px;gap:40px;align-items:start}
@media(max-width:900px){.sbb .prod-hero{grid-template-columns:1fr}}
.sbb .prod-meta{font-size:14px;font-weight:500;color:#64748B;margin:14px 0 0}
.sbb .prod-meta .ok{font-weight:600}
.sbb .vcard{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;box-shadow:0 1px 3px rgba(17,24,39,.05);
  padding:28px 22px;text-align:center}
.sbb .vlogo{width:64px;height:64px;border-radius:14px;background:#E0F2FE;color:#0284C7;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;letter-spacing:-0.02em;margin-bottom:12px}
.sbb .vcard .vname{font-weight:600;font-size:15px;color:#111827;margin:0 0 4px}
.sbb .vcard .vsub{font-size:13px;color:#64748B;margin:0 0 12px}
.sbb .vbadge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#15803D;
  background:#DCFCE7;border:1px solid #BBF7D0;border-radius:999px;padding:5px 12px}
.sbb .featgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.sbb .feat{display:flex;align-items:flex-start;gap:9px;background:#FFFFFF;border:1px solid #E2E8F0;border-radius:10px;
  padding:12px 14px;font-size:14.5px;font-weight:500;color:#334155}
.sbb .feat svg{flex:none;margin-top:2px}
.sbb table.usecase{width:100%;border-collapse:separate;border-spacing:0;border:1px solid #E2E8F0;border-radius:12px;overflow:hidden;background:#FFFFFF;font-size:14.5px}
.sbb table.usecase td{padding:11px 16px;border-top:1px solid #E2E8F0;color:#334155;font-weight:500}
.sbb table.usecase tr:first-child td{border-top:none}
.sbb table.usecase td:last-child{text-align:right;white-space:nowrap}
.sbb .stars{color:#F59E0B;font-size:15px;letter-spacing:2px}
.sbb .stars .off{color:#E2E8F0}
.sbb .verdict{background:#E0F2FE;border:1px solid #BAE6FD;border-radius:12px;padding:22px 24px}
.sbb .verdict .vlabel{font-size:12px;font-weight:700;letter-spacing:1px;color:#0284C7;margin:0 0 8px;text-transform:uppercase}
.sbb .verdict p{color:#111827;font-size:15.5px;line-height:1.7;font-weight:500}
.sbb .proscons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.sbb ul.pc-list{list-style:none;margin:0;padding:0}
.sbb ul.pc-list li{position:relative;padding:6px 0 6px 26px;font-size:14.5px;color:#334155;font-weight:500;line-height:1.6}
.sbb ul.pc-list.good li::before{content:'✓';position:absolute;left:0;color:#16A34A;font-weight:700}
.sbb ul.pc-list.bad li::before{content:'✕';position:absolute;left:0;color:#EF4444;font-weight:700}
.sbb .shots{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.sbb .shots img{scroll-snap-align:start;flex:none;width:min(720px,90%);border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 4px 14px rgba(17,24,39,.07)}

/* ---------- product explorer (Mihon-style library, /products) ---------- */
.sbb .extoolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.sbb .extoolbar .toolsearch{flex:1 1 260px;max-width:none;margin:0}
.sbb .extoolbar .toolsearch input{height:48px}
.sbb select.exsort{width:auto;height:48px;padding:0 14px;font-size:14px;font-weight:500;color:#334155;border-radius:10px;cursor:pointer}
.sbb .viewtog{display:inline-flex;border:1px solid #E2E8F0;border-radius:10px;overflow:hidden;background:#FFFFFF}
.sbb .viewtog button{border:none;background:none;padding:0 13px;height:48px;cursor:pointer;color:#94A3B8;display:inline-flex;align-items:center;transition:background .12s,color .12s}
.sbb .viewtog button.on{background:#E0F2FE;color:#0284C7}
.sbb .excount{font-size:13.5px;color:#64748B;font-weight:500;margin:0 0 16px}
.sbb .excount b{color:#111827;font-weight:600}
.sbb .tc-icon b{font-weight:700;color:#0284C7;font-size:15px}
.sbb .favbtn{margin-left:auto;flex:none;border:1px solid #E2E8F0;background:#FFFFFF;border-radius:8px;width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#94A3B8;transition:color .12s,border-color .12s,background .12s}
.sbb .favbtn svg{fill:none;stroke:currentColor}
.sbb .favbtn:hover{border-color:#FCA5A5;color:#EF4444}
.sbb .favbtn.on{color:#EF4444;border-color:#FECACA;background:#FEF2F2}
.sbb .favbtn.on svg{fill:currentColor}
.sbb .fchip .cnt{margin-left:6px;font-size:11.5px;color:#94A3B8;font-weight:600}
.sbb [data-prodgrid].list{display:flex;flex-direction:column;gap:10px}
.sbb [data-prodgrid].list .toolcard{flex-direction:row;align-items:center;gap:14px;padding:13px 18px}
.sbb [data-prodgrid].list .toolcard .tc-head{margin:0;flex:0 0 auto;min-width:220px}
.sbb [data-prodgrid].list .toolcard h3{font-size:15px}
.sbb [data-prodgrid].list .toolcard .tc-meta{margin:0;flex:0 0 auto;min-width:120px}
.sbb [data-prodgrid].list .toolcard p.desc{margin:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sbb [data-prodgrid].list .toolcard .tc-foot{margin:0;flex:0 0 auto}
@media(max-width:820px){
  .sbb [data-prodgrid].list .toolcard{flex-wrap:wrap;gap:8px}
  .sbb [data-prodgrid].list .toolcard p.desc{white-space:normal;flex-basis:100%}
  .sbb [data-prodgrid].list .toolcard .tc-head{min-width:0}
}
.sbb .exempty{border:1px dashed #CBD5E1;border-radius:12px;padding:36px 20px;text-align:center;color:#64748B;background:#FFFFFF;font-size:14.5px}
.sbb .exempty b{display:block;color:#111827;font-size:16px;margin-bottom:6px;font-weight:600}

/* ---------- progressive tool discovery (/tools) ---------- */
.sbb .dfilters{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:16px;padding:22px 24px;box-shadow:0 1px 3px rgba(17,24,39,.05)}
.sbb .dfilters .flabel{font-size:12px;font-weight:700;letter-spacing:1px;color:#94A3B8;text-transform:uppercase;margin:0 0 8px}
.sbb .dfilters .fgroup{margin-top:18px}
.sbb .dfilters .fgroup:first-child{margin-top:0}
.sbb .dfilters .fchips{justify-content:flex-start;margin:0;gap:8px}
.sbb .dfilters .fsub{display:flex;gap:28px;flex-wrap:wrap}
.sbb .dfilters .fsub > div{flex:0 1 auto}
.sbb .dcount{display:flex;align-items:center;gap:14px;margin:22px 0 16px;font-size:14px;color:#64748B;font-weight:500}
.sbb .dcount b{color:#111827;font-weight:700;font-size:16px}
.sbb .dreset{border:none;background:none;color:#1CA7EC;font-weight:600;font-size:13.5px;cursor:pointer;padding:0}
.sbb .dreset:hover{text-decoration:underline}
@media(max-width:640px){.sbb .dfilters{padding:18px 16px}.sbb .dfilters .fsub{gap:16px}}

/* ---------- AI news (/news/ — list + article template) ---------- */
.sbb .newslist{display:flex;flex-direction:column;gap:0;border-top:1px solid #E2E8F0}
.sbb .newsitem{display:block;padding:22px 0;border-bottom:1px solid #E2E8F0;text-decoration:none;
  transition:background .15s ease}
.sbb .newsitem:hover{background:#FFFFFF}
.sbb .newsitem .nmeta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 9px;
  font-size:12.5px;font-weight:600;letter-spacing:.2px;color:#94A3B8}
.sbb .newsitem .nmeta .ndate{color:#64748B;font-feature-settings:'tnum' 1}
.sbb .newsitem .nmeta .nsrc{color:#94A3B8;font-weight:500}
.sbb .newsitem h3{font-size:19px;font-weight:600;line-height:1.4;margin:0 0 7px;color:#111827;
  transition:color .15s ease}
.sbb .newsitem:hover h3{color:#1CA7EC}
.sbb .newsitem p.desc{color:#64748B;font-size:14.5px;line-height:1.65;margin:0;font-weight:400}
/* lead story — first item gets weight, no card chrome */
.sbb .newsitem.lead{padding:26px 0 28px}
.sbb .newsitem.lead h3{font-size:clamp(22px,2.6vw,27px);line-height:1.28;letter-spacing:-0.015em}
.sbb .newsitem.lead p.desc{font-size:15.5px;max-width:760px}
/* category chip inside the meta line — smaller than .chip, inline */
.sbb .ntag{display:inline-block;border:1px solid #BAE6FD;border-radius:999px;padding:3px 10px;
  font-weight:600;font-size:11.5px;background:#E0F2FE;color:#0284C7;letter-spacing:0}
.sbb .ntag.reg{background:#FFF7ED;border-color:#FED7AA;color:#C2410C}
.sbb .ntag.mkt{background:#F1F5F9;border-color:#E2E8F0;color:#475569}
.sbb .ntag.gov{background:#DCFCE7;border-color:#BBF7D0;color:#15803D}
/* live count + empty state (mirrors the /tools discovery pattern) */
.sbb .ncount{font-size:13.5px;font-weight:600;color:#64748B;margin:0 0 4px}
.sbb .ncount b{color:#111827}
.sbb .nempty{display:none;padding:44px 0;text-align:center}
.sbb .nempty.on{display:block}
.sbb .nempty b{display:block;font-size:17px;color:#111827;margin-bottom:8px}
/* ---------- news article page ---------- */
.sbb .na-head{border-bottom:1px solid #E2E8F0;padding-bottom:22px;margin-bottom:30px}
.sbb .na-head .nmeta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 14px;
  font-size:13px;font-weight:600;color:#94A3B8}
.sbb .na-head .nmeta .ndate{color:#64748B;font-feature-settings:'tnum' 1}
.sbb .na-body{max-width:760px}
.sbb .na-body p{color:#334155;font-size:16.5px;line-height:1.85;margin:0 0 20px}
.sbb .na-body h2{font-size:clamp(21px,2.4vw,25px);margin:38px 0 14px}
.sbb .na-body ul{margin:0 0 22px;padding-left:0;list-style:none}
.sbb .na-body ul li{position:relative;color:#334155;font-size:16px;line-height:1.78;
  padding-left:20px;margin-bottom:10px}
.sbb .na-body ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:50%;background:#1CA7EC}
.sbb .na-body ul li b{color:#111827;font-weight:600}
.sbb .na-body strong{color:#111827;font-weight:600}
/* number callout row — figures pulled from the cited source, never computed here */
.sbb .nstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin:0 0 26px}
.sbb .nstat{background:#FFFFFF;border:1px solid #E2E8F0;border-radius:12px;padding:18px 20px}
.sbb .nstat b{display:block;font-size:27px;font-weight:700;color:#1CA7EC;letter-spacing:-0.02em;
  line-height:1.1;margin-bottom:6px;font-feature-settings:'tnum' 1}
.sbb .nstat span{display:block;font-size:13px;color:#64748B;line-height:1.5}
/* "what this means for a Korean team" — the editorial layer, visibly separated from the reporting */
.sbb .ntake{background:#F1F5F9;border:1px solid #E2E8F0;border-left:3px solid #1CA7EC;
  border-radius:0 12px 12px 0;padding:22px 24px;margin:0 0 26px}
.sbb .ntake h4{font-size:14px;font-weight:700;color:#0284C7;margin:0 0 10px;letter-spacing:.2px}
.sbb .ntake p{font-size:15.5px;line-height:1.75;color:#334155;margin:0 0 12px}
.sbb .ntake p:last-child{margin:0}
/* source block — mandatory on every article */
.sbb .nsrcbox{border-top:1px solid #E2E8F0;margin-top:34px;padding-top:20px}
.sbb .nsrcbox h4{font-size:13px;font-weight:700;color:#64748B;margin:0 0 10px;letter-spacing:.3px}
.sbb .nsrcbox ol{margin:0;padding-left:20px}
.sbb .nsrcbox li{font-size:13.5px;line-height:1.7;color:#64748B;margin-bottom:6px}
.sbb .nsrcbox a{color:#0284C7;text-decoration:none;border-bottom:1px solid #BAE6FD}
.sbb .nsrcbox a:hover{border-bottom-color:#0284C7}
.sbb .nsrcbox .disc{font-size:12.5px;color:#94A3B8;line-height:1.65;margin-top:12px}
@media (max-width:640px){
  .sbb .newsitem.lead h3{font-size:21px}
  .sbb .na-body p{font-size:16px}
  .sbb .ntake{border-radius:12px;border-left-width:3px}
}

/* ---------- semantic states ---------- */
.sbb .ok{color:#16A34A}
.sbb .warn{color:#F59E0B}
.sbb .err{color:#EF4444}

/* ---------- scroll reveal ---------- */
.sbb .reveal{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.sbb .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .sbb .reveal{opacity:1;transform:none;transition:none}
  .sbb .sticker,.sbb .float-a,.sbb .float-b,.sbb .spin-slow{animation:none}
  .sbb .marquee .track{animation-duration:80s}
}

/* ---------- keyframes ---------- */
@keyframes sbbScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes sbbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes sbbSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ============================================================
   AI news CTA band — injected by the mu-plugin on every /news/ page
   (outside .sbb namespace, same as .sbb-top / .sbb-foot).
   Deliberately NOT an ink band: articles already carry a dark
   ink CTA mid-page, and two dark bands stacked before the footer
   read as a rendering error.
   ============================================================ */
.sbb-newscta{font-family:'Pretendard Variable',Pretendard,Inter,-apple-system,'Malgun Gothic',sans-serif;
  background:#E0F2FE;border-top:1px solid #BAE6FD;border-bottom:1px solid #BAE6FD;
  word-break:keep-all;padding:46px 0}
.sbb-newscta .in{max-width:1140px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.sbb-newscta .txt{flex:1 1 440px;min-width:0}
.sbb-newscta h3{font-size:clamp(20px,2.4vw,25px);font-weight:700;letter-spacing:-0.02em;
  color:#111827;margin:0 0 10px;line-height:1.3}
.sbb-newscta p{font-size:15px;line-height:1.7;color:#334155;margin:0;max-width:620px}
.sbb-newscta .acts{flex:0 0 auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sbb-newscta a.cta{display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 26px;border-radius:10px;font-family:inherit;font-weight:600;font-size:15.5px;
  text-decoration:none;border:1px solid #1CA7EC;background:#1CA7EC;color:#FFFFFF;
  transition:background .15s ease,border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.sbb-newscta a.cta:hover{background:#0284C7;border-color:#0284C7;transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(2,132,199,.22)}
.sbb-newscta a.cta.ghost{background:#FFFFFF;color:#0284C7;border-color:#BAE6FD}
.sbb-newscta a.cta.ghost:hover{background:#FFFFFF;border-color:#1CA7EC;color:#1CA7EC;box-shadow:none}
@media (max-width:760px){
  .sbb-newscta{padding:34px 0}
  .sbb-newscta .in{flex-direction:column;align-items:flex-start;gap:22px}
  .sbb-newscta .acts{width:100%}
  .sbb-newscta a.cta{flex:1 1 auto}
}

/* ============================================================
   Site-wide injected topbar + footer (outside .sbb namespace)
   ============================================================ */
.sbb-top{font-family:'Pretendard Variable',Pretendard,Inter,-apple-system,'Malgun Gothic',sans-serif;
  background:rgba(255,255,255,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid #E2E8F0;word-break:keep-all;position:sticky;top:0;z-index:9990}
.sbb-top .in{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 24px;max-width:1140px;margin:0 auto;flex-wrap:wrap}
.sbb-top .brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:18px;
  letter-spacing:-0.02em;color:#111827;text-decoration:none;border:none;background:none;padding:0;box-shadow:none}
.sbb-top .brand:hover{transform:none;box-shadow:none}
.sbb-top .brand img{height:26px;width:auto;display:block}
.sbb-top .brand span{color:#1CA7EC;background:none;padding:0;margin-left:2px}
.sbb-top nav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.sbb-top nav a{color:#334155;text-decoration:none;font-weight:500;font-size:14.5px;padding:7px 11px;border-radius:8px;transition:color .15s,background .15s}
.sbb-top nav a:hover{color:#111827;background:#F1F5F9}
.sbb-top .nav-dd{position:relative;display:inline-flex}
.sbb-top .nav-dd > a{display:inline-flex;align-items:center;gap:5px}
.sbb-top .nav-dd > a svg{transition:transform .18s ease;color:#94A3B8}
.sbb-top .nav-dd:hover > a svg,.sbb-top .nav-dd:focus-within > a svg{transform:rotate(180deg);color:#1CA7EC}
.sbb-top .dd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  padding-top:10px;background:transparent;opacity:0;visibility:hidden;pointer-events:none;z-index:9991;
  transition:opacity .16s ease,transform .16s ease,visibility .16s}
.sbb-top .nav-dd:hover .dd-panel,.sbb-top .nav-dd:focus-within .dd-panel{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.sbb-top .dd-panel > *{position:relative}
.sbb-top .dd-panel::before{content:'';position:absolute;inset:10px 0 0;background:#FFFFFF;
  border:1px solid #E2E8F0;border-radius:12px;box-shadow:0 10px 28px rgba(17,24,39,.10)}
.sbb-top .dd-panel a{display:block;white-space:nowrap;color:#334155;font-weight:500;font-size:14px;
  padding:9px 16px;border-radius:8px;margin:0 6px;transition:background .12s,color .12s}
.sbb-top .dd-panel a:first-of-type{margin-top:8px}
.sbb-top .dd-panel a:last-of-type{margin-bottom:8px}
.sbb-top .dd-panel a:hover{background:#F1F5F9;color:#111827}
.sbb-top .dd-sep{height:1px;background:#E2E8F0;margin:6px 12px}
.sbb-top .dd-panel a.dd-all{color:#1CA7EC;font-weight:600}
.sbb-top .dd-panel a.dd-all:hover{background:#E0F2FE;color:#0284C7}
@media(max-width:900px){
  .sbb-top .dd-panel{display:none}
  .sbb-top .nav-dd > a svg{display:none}
}
.sbb-top .cta-mini{background:#1CA7EC;color:#FFFFFF!important;padding:10px 18px;border-radius:10px;
  font-weight:600;font-size:14.5px;text-decoration:none;border:none;box-shadow:none;
  transition:filter .15s,transform .15s}
.sbb-top .cta-mini:hover{filter:brightness(1.07);transform:translateY(-1px);background:#1CA7EC}
@media(max-width:640px){.sbb-top nav{gap:2px;font-size:14px}}

.sbb-foot{font-family:'Pretendard Variable',Pretendard,Inter,-apple-system,'Malgun Gothic',sans-serif;
  background:#111827;color:#9CA3AF;padding:56px 0 30px;border-top:none;word-break:keep-all}
.sbb-foot .in{max-width:1140px;margin:0 auto;padding:0 24px}
.sbb-foot .cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sbb-foot h4{color:#FFFFFF;font-size:13px;font-weight:600;letter-spacing:1px;margin:0 0 12px}
.sbb-foot a{color:#9CA3AF;text-decoration:none;font-size:14px;display:block;margin-bottom:8px;font-weight:400;transition:color .15s}
.sbb-foot a:hover{color:#4ABEF0}
.sbb-foot .legal{margin-top:40px;font-size:13px;border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.sbb-foot .legal a{display:inline;color:#4ABEF0}

/* cards nested inside ink bands */
.sbb .dark .nbcard{color:#111827;background:#FFFFFF}
.sbb .dark .nbcard h3{color:#111827}

/* ---------- homepage hero banner ----------
   Converging-tools artwork behind the front-page hero: many AI tools drifting
   in from both edges, thinning out toward the middle so the headline, search
   box and filter chips sit on clean ground.
   Layer order, top to bottom: .dots grid, a fade to page bg at the section
   edges, then the banner. The fade lives here rather than inside the image so
   it stays welded to the section edges however `cover` crops the artwork. */
body.home .sbb > .sec.dots:first-child{
  background-image:
    radial-gradient(rgba(17,24,39,.07) 1px,transparent 1px),
    linear-gradient(to top,#F8FAFC 0%,rgba(248,250,252,.55) 12%,rgba(248,250,252,0) 34%),
    linear-gradient(to bottom,rgba(248,250,252,.85) 0%,rgba(248,250,252,0) 22%),
    url('sbtools-hero-banner.webp?v=2');
  background-size:24px 24px, 100% 100%, 100% 100%, cover;
  background-position:0 0, center, center, center center;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat;
}
@media(max-width:900px){
  /* the artwork lives in the outer thirds, which a phone crops away entirely —
     drop the download and keep the plain dot grid */
  body.home .sbb > .sec.dots:first-child{
    background-image:radial-gradient(rgba(17,24,39,.07) 1px,transparent 1px);
    background-size:24px 24px;
  }
}