/* SB-7.0 FINAL — self-contained widget styles. */
.sb4{--bg:#fff;--panel:#f7f9fc;--line:#dce5ee;--ink:var(--title-light,#20354e);--copy:var(--body-light,#45556a);--accent:var(--link-light,#155dc1);--hero-a:#f0f8ff;--hero-b:#deeffe;--peach:#fff6ee;--rose:#fff5f8;--button:#176bda;--button-text:#fff;--note:#667085;--kw:var(--keyword-light,#1765bd);--font:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Segoe UI",sans-serif;width:100%;max-width:100%;min-width:0;background:var(--bg);color:var(--ink);color-scheme:light;font:400 17px/1.85 var(--font);text-align:left;letter-spacing:-.012em;overflow-wrap:anywhere;isolation:isolate}
.sb4[data-mode="dark"]{--bg:#101b29;--panel:#142233;--line:#304359;--ink:var(--title-dark,#eff5fc);--copy:var(--body-dark,#c2cfde);--accent:var(--link-dark,#a7ccff);--hero-a:#182b43;--hero-b:#193b58;--peach:#26262a;--rose:#252331;--button:#9bcaff;--button-text:#102640;--note:#adbbcd;--kw:var(--keyword-dark,#9bcaff);color-scheme:dark}
@media(prefers-color-scheme:dark){.sb4[data-mode="auto"]{--bg:#101b29;--panel:#142233;--line:#304359;--ink:var(--title-dark,#eff5fc);--copy:var(--body-dark,#c2cfde);--accent:var(--link-dark,#a7ccff);--hero-a:#182b43;--hero-b:#193b58;--peach:#26262a;--rose:#252331;--button:#9bcaff;--button-text:#102640;--note:#adbbcd;--kw:var(--keyword-dark,#9bcaff);color-scheme:dark}}
.sb4 *,.sb4 *::before,.sb4 *::after{box-sizing:border-box}.sb4 [hidden]{display:none!important}
.sb4 h2,.sb4 h3,.sb4 p,.sb4 figure,.sb4 blockquote{margin:0;padding:0;border:0;background:transparent;font-family:var(--font)}
.sb4 h2,.sb4 h3{color:var(--ink);font-weight:650;word-break:keep-all;overflow-wrap:anywhere}.sb4 h2{font-size:clamp(27px,2.5vw,34px);line-height:1.42;letter-spacing:-.035em}.sb4 h3{font-size:21px;line-height:1.5;letter-spacing:-.02em}
.sb4 a{color:var(--accent);font-family:var(--font);text-decoration:none;touch-action:manipulation}.sb4 a:hover{text-decoration:underline;text-underline-offset:4px}
.sb4 a:focus-visible,.sb4 button:focus-visible,.sb4 input:focus-visible,.sb4 summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.sb4 img{display:block;max-width:100%;height:auto}.sb4 section[id]{scroll-margin-top:var(--offset,100px)}
.sb4-inner{width:min(1120px,100%);margin-inline:auto;padding:24px 30px 42px}
.sb4-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:36px;align-items:center;padding:46px 40px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(120deg,var(--hero-a),var(--hero-b))}.sb4-hero-copy,.sb4-visual{min-width:0}
.sb4 .sb4-main-title{font-size:clamp(34px,3.8vw,48px);line-height:1.24;letter-spacing:-.045em}.sb4 .sb4-label{color:var(--accent);font-size:12px;font-weight:650;line-height:1.6;letter-spacing:.09em;margin-bottom:14px}
.sb4 .sb4-body{color:var(--copy);font-size:17px;font-weight:400;line-height:1.85;white-space:pre-line;overflow-wrap:anywhere}.sb4 .sb4-lead{margin-top:22px;max-width:620px}
.sb4-visual{display:grid;place-items:center;padding:12px}.sb4-visual img{width:100%;max-height:380px;object-fit:contain;border-radius:16px}
.sb4-logo{display:grid;place-items:center;width:min(100%,190px);aspect-ratio:1;padding:16px;border:1px solid #ffffff30;border-radius:25%;background:linear-gradient(150deg,#2786e8,#176bda);color:#fff;font-size:clamp(48px,5vw,65px);font-weight:650;letter-spacing:-.035em;line-height:1.1;text-align:center;box-shadow:0 9px 22px #1558a31a}
.sb4 .sb4-logo-link{display:grid;place-items:center;width:min(100%,190px);border-radius:25%;text-decoration:none;color:#fff}.sb4-logo-link .sb4-logo{width:100%}
.sb4-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}.sb4 .sb4-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:12px 21px;border:1px solid var(--button);border-radius:11px;background:var(--button);color:var(--button-text);font-size:15px;font-weight:600;line-height:1.6;text-align:center}.sb4 .sb4-secondary{background:var(--bg);color:var(--accent);border-color:var(--line)}
.sb4-section{padding:54px 0;border-bottom:1px solid var(--line)}.sb4-heading{margin-bottom:24px}.sb4-media{display:flex;align-items:flex-start;gap:32px}.sb4-media>.sb4-body{flex:1;min-width:0;max-width:820px}.sb4-media>img{width:32%;max-height:420px;object-fit:contain;border:1px solid var(--line);border-radius:16px}.sb4 .sb4-role{color:var(--accent);margin-bottom:16px;font-size:15px}
.sb4 .sb4-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;max-width:100%;margin-top:18px;padding:6px 0;font-size:15px;font-weight:600;line-height:1.7}.sb4-link>span{flex-shrink:0}
.sb4-grid{display:grid;gap:20px;margin-top:28px}.sb4-grid>*{min-width:0}.sb4-features,.sb4-reviews,.sb4-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
.sb4 .sb4-card{padding:25px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}.sb4-number{display:block;margin-bottom:18px;color:var(--accent);font-size:16px;font-weight:650}.sb4-card .sb4-body,.sb4-step .sb4-body{margin-top:15px;font-size:16px}
.sb4 .sb4-steps{list-style:none;padding:0;gap:0;border-top:1px solid var(--line)}.sb4-step{display:flex;flex-direction:column;align-items:flex-start;padding:26px;border-inline-start:1px solid var(--line)}.sb4-step:first-child{padding-inline-start:0;border-inline-start:0}.sb4-step:last-child{padding-inline-end:0}.sb4-step .sb4-body{flex-grow:1}.sb4-step .sb4-number{font-size:36px;font-weight:500;line-height:1.1}
.sb4 .sb4-review{display:flex;flex-direction:column;align-items:flex-start;background:var(--rose)}.sb4 .sb4-review h3{font-size:20px}.sb4-review .sb4-body{flex-grow:1}.sb4-example{display:inline-block;padding:3px 9px;margin-bottom:16px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--accent);font-size:12px}.sb4 figcaption{width:100%;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600}
.sb4-section-recommend,.sb4-section-contact{width:100%;height:auto;margin-top:32px;padding:34px;border:1px solid var(--line);border-radius:20px;background:var(--peach)}.sb4-section-contact{background:var(--rose)}.sb4-section-recommend .sb4-media,.sb4-section-contact .sb4-media{display:block;width:100%}.sb4-section-recommend .sb4-media>.sb4-body,.sb4-section-contact .sb4-media>.sb4-body{max-width:none;width:100%}
.sb4-regions{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.sb4-region{--r-bg:var(--r-bg-l);--r-ink:var(--r-ink-l);display:flex;flex-direction:column;align-items:stretch;padding:25px;border:1px solid var(--line);border-top:3px solid var(--r-accent);border-radius:18px;background:var(--r-bg)}.sb4[data-mode="dark"] .sb4-region{--r-bg:var(--r-bg-d);--r-ink:var(--r-ink-d)}
@media(prefers-color-scheme:dark){.sb4[data-mode="auto"] .sb4-region{--r-bg:var(--r-bg-d);--r-ink:var(--r-ink-d)}}
.sb4-region-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}.sb4-region-number{flex-shrink:0;display:grid;place-items:center;width:38px;min-height:38px;border:1px solid currentColor;border-radius:11px;color:var(--r-ink);font-size:13px;font-weight:650}.sb4 .sb4-region h3{color:var(--r-ink);font-size:21px;line-height:1.65}.sb4-region>.sb4-body{flex-grow:1;font-size:16px}
.sb4 .sb4-region-link{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-top:24px;padding:11px 14px;border:1px solid currentColor;border-radius:10px;color:var(--r-ink);font-size:15px;font-weight:600;line-height:1.6}.sb4-region-link>span{flex-shrink:0}
.sb4-latest{margin-top:28px;max-width:820px}.sb4-latest>a{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:56px;padding:16px 20px;border:1px solid var(--line);border-inline-start:3px solid var(--accent);border-radius:13px;background:var(--panel);color:var(--accent);font-size:17px;font-weight:600}.sb4-latest>a>span:last-child{flex-shrink:0}.sb4-latest-before{max-width:none;margin-bottom:24px}.sb4-latest-before+.sb4-grid{margin-top:0}
.sb4-faqs{margin-top:26px;max-width:880px;border-top:1px solid var(--line)}.sb4-faqs details{border-bottom:1px solid var(--line)}.sb4-faqs summary{cursor:pointer;padding:22px 12px;min-height:56px;list-style-position:inside;color:var(--ink);font-size:17px;font-weight:600;line-height:1.75;touch-action:manipulation}.sb4-faqs summary::marker{color:var(--accent)}.sb4-faqs details[open]{background:var(--panel)}.sb4-faqs .sb4-body{padding:0 12px 24px;font-size:16px}
.sb4-section-author .sb4-media>img{width:80px;height:80px;border-radius:50%;object-fit:cover}
.sb4 .sb4-keyword{color:var(--kw);font-weight:650}.sb4 h2 .sb4-keyword,.sb4 h3 .sb4-keyword{font-weight:inherit}
.sb4 .sb4-footer-note{font-size:13px;line-height:1.8;color:var(--note);margin-top:30px;padding-top:20px;border-top:1px solid var(--line);white-space:pre-line}
.sb4-admin{margin-top:32px;padding:20px;border:1px dashed var(--line);border-radius:14px;background:var(--panel);font-size:14px}.sb4-admin summary{cursor:pointer;min-height:44px;font-weight:650}.sb4-admin p{margin:12px 0}.sb4-copy{display:flex;align-items:flex-end;gap:10px;margin-top:16px}.sb4-copy label{flex:1;min-width:0}.sb4-copy label span{display:block;margin-bottom:5px}.sb4-copy input{width:100%;min-height:48px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--ink);font-size:16px}.sb4-copy button{min-height:48px;flex-shrink:0;padding:10px 14px;border:0;border-radius:8px;background:var(--button);color:var(--button-text);cursor:pointer}
@media(min-width:769px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.sb4[data-motion="Y"] .sb4-region,.sb4[data-motion="Y"] .sb4-card{transition:transform .18s ease,box-shadow .18s ease}.sb4[data-motion="Y"] .sb4-region:hover,.sb4[data-motion="Y"] .sb4-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #172b4010}}
@media(max-width:960px){.sb4-inner{padding:20px 24px 36px}.sb4-hero{padding:34px 28px;gap:24px}.sb4-features,.sb4-reviews{grid-template-columns:1fr}.sb4-section{padding:44px 0}.sb4-section-recommend,.sb4-section-contact{padding:30px}}
@media(max-width:768px){.sb4-inner{padding:16px 16px 30px}.sb4{font-size:var(--mobile-font,17px);letter-spacing:-.008em}.sb4 .sb4-body,.sb4 .sb4-region>.sb4-body,.sb4 .sb4-card .sb4-body,.sb4 .sb4-step .sb4-body,.sb4 .sb4-faqs .sb4-body{font-size:var(--mobile-font,17px);line-height:1.85}.sb4-hero{grid-template-columns:1fr;gap:24px;padding:30px 22px;border-radius:20px}.sb4 .sb4-main-title{font-size:clamp(30px,7.7vw,40px)}.sb4 h2{font-size:27px;line-height:1.45}.sb4 h3{font-size:21px}.sb4-logo,.sb4 .sb4-logo-link{width:120px;font-size:43px}.sb4-logo-link .sb4-logo{width:100%}.sb4-visual{padding:0}.sb4-visual img{max-height:300px}.sb4-section{padding:36px 0}.sb4-heading{margin-bottom:20px}.sb4 .sb4-button{flex-grow:1;font-size:16px}.sb4 .sb4-link{font-size:16px}.sb4-grid,.sb4-regions{grid-template-columns:1fr;gap:16px}.sb4 .sb4-card,.sb4-region{padding:23px 20px}.sb4 .sb4-region-link{font-size:16px}.sb4 .sb4-steps{gap:0}.sb4-step,.sb4-step:first-child,.sb4-step:last-child{padding:25px 0;border-inline-start:0;border-bottom:1px solid var(--line)}.sb4-step .sb4-number{font-size:30px;margin-bottom:16px}.sb4-media{flex-direction:column;gap:24px}.sb4-media>img{width:100%;max-height:360px}.sb4-section-recommend,.sb4-section-contact{padding:26px 22px;margin-top:24px;border-radius:18px}.sb4-faqs summary{padding:20px 8px}.sb4-faqs .sb4-body{padding:0 8px 22px}.sb4-latest>a{font-size:16px;padding:15px 17px}.sb4 figcaption{font-size:15px}.sb4 .sb4-footer-note{font-size:14px}}
@media(prefers-reduced-motion:reduce){.sb4 *{animation:none!important;transition:none!important}}
@media print{.sb4,.sb4[data-mode]{--bg:#fff;--panel:#fff;--line:#aaa;--ink:#111;--copy:#222;--accent:#234e82;--hero-a:#fff;--hero-b:#fff;--peach:#fff;--rose:#fff;--note:#555;color-scheme:light}.sb4 [data-reveal]{opacity:1!important;transform:none!important}.sb4-admin,.sb4-visual{display:none}.sb4-inner{padding:0}.sb4-grid,.sb4-hero,.sb4-media{display:block}.sb4-region{background:#fff;--r-ink:#222}.sb4-region,.sb4-card{break-inside:avoid;margin-bottom:16px!important}}