/* ============================================================
standard.html — page-specific CSS
분리: 2026-06-07
============================================================ */
/* ─────────────────────────────────────────────────────
Block 1 — 메인 페이지 CSS (히어로, 콘텐츠, 시스템)
───────────────────────────────────────────────────── */
/* ═══ COLOR SYSTEM ═══ */
:root{
--c-black:#0a0a0a;--c-gray-900:#1a1a1a;--c-gray-700:#4a4a4a;--c-gray-500:#6b7280;
--c-gray-400:#9ca3af;--c-gray-300:#d1d5db;--c-gray-200:#e5e7eb;--c-gray-100:#f3f4f6;
--c-gray-50:#f9fafb;--c-white:#fff;
--c-blue:#1251A3;--c-blue-dark:#0d3d7a;--c-blue-soft:#eef3ff;
--c-red:#ea1917;--c-red-dark:#b01412;--c-red-soft:#fef2f2;
--c-brand:#ea1917;--c-brand-soft:#fef2f2;
--c-amber:#d97706;--c-amber-soft:#fffbeb;
--c-green:#059669;--c-green-soft:#ecfdf5;
--c-purple:#7c3aed;--c-purple-soft:#f5f3ff;
--c-pink:#ec4899;--c-pink-soft:#fdf2f8;
--c-orange:#ea580c;--c-orange-soft:#fff7ed;
--c-mint:#10b981;--c-mint-soft:#d1fae5;
--c-text:#1f2937;--c-text-soft:#64748b;
--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:24px;
--container:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
*:focus-visible{outline:2px solid var(--c-blue);outline-offset:2px}
.st-skip{position:absolute;top:-40px;left:0;background:var(--c-black);color:#fff;padding:8px 16px;z-index:9999;font-size:13px;font-weight:700;border-radius:0 0 8px 0}
.st-skip:focus{top:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.standard-root{font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;color:var(--c-black);line-height:1.7;word-break:keep-all;-webkit-font-smoothing:antialiased;background:var(--c-white)}
.standard-root h1,.standard-root h2,.standard-root h3{text-decoration:none;color:inherit}
.standard-root a{text-decoration:none;color:inherit;transition:.2s;cursor:pointer}
.standard-root ul,.standard-root ol,.standard-root li{list-style:none;padding:0;margin:0}
.standard-root button{font-family:inherit;border:0;background:transparent;cursor:pointer}
.lg-container{max-width:var(--container);margin:0 auto;padding:0 max(20px,env(safe-area-inset-left)) 0 max(20px,env(safe-area-inset-right))}
.standard-root picture{display:contents}
/* ═══ HERO (흰 카드 + 노트북 비주얼) ═══ */
.st-hero{background:#fef2f2;color:var(--c-text);padding:48px 0 56px;position:relative;overflow:hidden}
.st-hero > .lg-container{position:relative;z-index:2}
.st-hero-card{background:#fff;border-radius:20px;padding:48px 48px 44px;box-shadow:0 8px 28px rgba(0,0,0,.06);position:relative;overflow:hidden}
.st-hero-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;min-height:420px}
.st-hero-content{min-width:0}
.st-hero-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:#f3f4f6;color:#1a1a2e;border:1px solid #e5e7eb;border-radius:6px;font-size:12.5px;font-weight:700;margin-bottom:20px}
.st-hero-tag i{font-size:12px;color:var(--c-red)}
.st-hero-h1{font-family:"Montserrat","Pretendard",sans-serif;font-size:80px;font-weight:800;letter-spacing:-.02em;line-height:1.05;color:#1a0808;margin:0 0 14px;word-break:keep-all;display:flex;flex-direction:column;gap:2px}
.st-hero-h1 .brand{font-size:.28em;font-weight:700;letter-spacing:.02em;text-transform:none;letter-spacing:0;color:#1a0808}
.st-hero-h1 .tier{font-family:"Pretendard",sans-serif;font-size:1em;font-weight:900;letter-spacing:.04em;color:#ea1917}
.st-hero-tagline{font-size:25px;font-weight:800;line-height:1.4;color:#1a0808;margin:0 0 22px;letter-spacing:-.01em}
.st-hero-tagline .accent{color:#ea1917;position:relative;display:inline-block}
.st-hero-tagline .accent::after{content:'';position:absolute;left:-3px;right:-3px;bottom:4px;height:10px;background:#fbbf24;z-index:-1;border-radius:2px;opacity:.65;transform:skewX(-6deg)}
.st-hero-sub{font-size:18px;color:#374151;line-height:1.75;margin:0 0 26px;font-weight:500;max-width:560px}
.st-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.st-cta-primary{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;background:var(--c-red);color:#fff !important;border-radius:8px;font-size:14.5px;font-weight:800;text-decoration:none;border:1px solid var(--c-red);box-shadow:0 4px 14px rgba(234,25,23,.25);transition:.2s}
.st-cta-primary:hover{background:var(--c-red-dark);border-color:var(--c-red-dark);transform:translateY(-1px);box-shadow:0 6px 18px rgba(234,25,23,.35)}
.st-cta-secondary{display:inline-flex;align-items:center;gap:6px;padding:14px 20px;background:#fff;color:var(--c-red) !important;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none;border:1px solid var(--c-red);transition:.2s}
.st-cta-secondary:hover{background:#fff;border-color:var(--c-red-dark);color:var(--c-red-dark) !important;box-shadow:0 4px 14px rgba(234,25,23,.18);transform:translateY(-1px)}
.st-cta-secondary i{font-size:11px;transition:transform .2s}
.st-cta-secondary:hover i{transform:translateX(2px)}
.st-hero-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--c-text-soft)}
.st-hero-meta span{display:inline-flex;align-items:center;gap:6px}
.st-hero-meta i{color:var(--c-green);font-size:13px}
.st-hero-visual{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center}
.st-hero-video-area{position:relative;width:100%;max-width:560px}
.st-hero-laptop-top{background:#1f1f1f;border-radius:10px 10px 0 0;padding:5px 5px 4px;position:relative}
.st-hero-laptop-screen{aspect-ratio:16/10;background:#0f1020;border-radius:2px;overflow:hidden;position:relative}
.st-hero-laptop-base{background:linear-gradient(to bottom,#d4d4d4 0%,#a8a8a8 50%,#7a7a7a 100%);height:14px;position:relative;border-radius:0 0 14px 14px;box-shadow:0 14px 30px rgba(0,0,0,.18)}
.st-hero-laptop-base::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:90px;height:6px;background:#666;border-radius:0 0 8px 8px;box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.st-hero-screen-img{width:100%;height:100%;display:block;object-fit:contain;background:#0f1020}
.st-hero-package-overlay{position:absolute;bottom:-24px;right:-12px;width:145px;z-index:2;transition:.25s;text-decoration:none;color:inherit}
.st-hero-package-overlay:hover{transform:translateY(-3px)}
.st-hero-package-overlay img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 24px rgba(0,0,0,.20))}
@media(max-width:1024px){
.st-hero-card{padding:36px 32px;border-radius:18px}
.st-hero{padding:36px 0 44px}
.st-hero-stage{grid-template-columns:1fr;gap:16px;text-align:center;min-height:auto}
.st-hero-h1{font-size:60px}
.st-hero-sub{font-size:16px;margin-left:auto;margin-right:auto}
.st-hero-cta,.st-hero-meta{justify-content:center}
.st-hero-visual{min-height:auto;padding-bottom:20px}
.st-hero-video-area{max-width:480px}
.st-hero-package-overlay{width:115px;bottom:-18px;right:0}
}
@media(max-width:768px){
.st-hero-card{padding:28px 22px;border-radius:14px}
.st-hero{padding:28px 0 36px}
.st-hero-h1{font-size:clamp(36px,10vw,52px);line-height:1.05;align-items:center}
.st-hero-tagline{font-size:22px;text-align:center}
.st-hero-sub{font-size:14.5px;line-height:1.7}
.st-cta-primary,.st-cta-secondary{padding:13px 18px;font-size:14px;width:100%;justify-content:center}
.st-hero-meta{font-size:12px;gap:10px;flex-direction:column}
.st-hero-video-area{max-width:100%}
.st-hero-package-overlay{width:100px;bottom:0;right:0}
.st-hero-stage{display:flex;flex-direction:column;gap:12px}
.st-hero-content{display:contents}
.st-hero-tag{order:1}
.st-hero-h1{order:2;margin-bottom:-4px}
.st-hero-tagline{order:3}
.st-hero-visual{order:4;margin:0;padding-bottom:0}
.st-hero-sub{order:5}
.st-hero-cta{order:6;flex-direction:column;width:100%;gap:10px}
.st-hero-meta{order:7}
}
/* ═══ USE-CASE STRIP (히어로 직후 사용 상황 칩) ═══ */
.st-usecase{padding-top:26px;padding-bottom:2px}
.st-usecase-inner{background:linear-gradient(135deg,#ffffff 0%,#fef6f6 100%);border:1px solid #f3dada;border-radius:14px;padding:20px 24px}
.st-usecase-h{font-size:15px;font-weight:800;color:#1a1a1a;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.st-usecase-h i{color:#ea1917}
.st-usecase-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.st-uc-chip{justify-content:flex-start}
@media(max-width:900px){.st-usecase-chips{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.st-usecase-chips{grid-template-columns:repeat(2,1fr)}}
.st-uc-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid #ecd6d6;border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;color:#33373f}
.st-uc-chip i{color:#16a34a;font-size:12px}
@media(max-width:768px){.st-usecase{padding-top:18px;padding-bottom:0}.st-usecase-inner{padding:16px 16px}.st-usecase-h{font-size:14px}.st-uc-chip{font-size:12.5px;padding:8px 12px}}
/* ═══ FIT FOR — STANDARD 적합 사례 + 적합/부적합 + SSD TRIM ═══ */
.st-fit{padding-top:34px;padding-bottom:0}
.st-fit-head{text-align:center;max-width:760px;margin:0 auto 22px;display:flex;flex-direction:column;gap:8px;align-items:center}
.st-fit-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ea1917;text-transform:uppercase}
.st-fit-eyebrow::before,.st-fit-eyebrow::after{content:'';width:20px;height:1px;background:#ea1917}
.st-fit-h2{font-size:26px;font-weight:800;color:#1a0808;line-height:1.3;letter-spacing:-.02em;margin:0}
.st-fit-h2 .brand-name{font-weight:900;letter-spacing:.04em;color:#ea1917}
.st-fit-lead{font-size:14.5px;color:#6b7280;line-height:1.7;margin:0}
.st-fit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.st-fit-card{background:#fff;border:1px solid #ecd6d6;border-radius:12px;padding:20px 18px;text-align:center;transition:.2s}
.st-fit-card:hover{transform:translateY(-2px);border-color:#f3a5a5;box-shadow:0 8px 20px rgba(234,25,23,.08)}
.st-fit-ic{width:48px;height:48px;border-radius:12px;background:#fef2f2;color:#ea1917;display:inline-flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 10px}
.st-fit-card h3{font-size:15px;font-weight:800;color:#1a1a1a;margin:0 0 6px;line-height:1.3}
.st-fit-card p{font-size:13px;color:#6b7280;margin:0;line-height:1.55}
.st-fit-tbl-wrap{margin:0 0 18px}
.st-fit-tbl{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.st-fit-col{padding:18px 22px}
.st-fit-col--ok{background:linear-gradient(135deg,#ecfdf5,#fff);border-right:1px solid #e5e7eb}
.st-fit-col--ng{background:linear-gradient(135deg,#fffbeb,#fff)}
.st-fit-col-head{font-size:14px;font-weight:800;color:#1a1a1a;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.st-fit-count{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 7px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:0;background:#fff;border:1px solid #e5e7eb;color:#374151}
.st-fit-col--ok .st-fit-count{color:#16a34a;border-color:#bbf7d0;background:#ecfdf5}
.st-fit-col--ng .st-fit-count{color:#b45309;border-color:#fde68a;background:#fffbeb}
.st-fit-col--ok .st-fit-col-head i{color:#16a34a}
.st-fit-col--ng .st-fit-col-head i{color:#f59e0b}
.st-fit-col ul{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.st-fit-col li{font-size:13.5px;color:#374151;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.st-fit-col li i{margin-top:5px;flex-shrink:0}
.st-fit-col--ok li i{color:#16a34a;font-size:12px}
.st-fit-col--ng li i{color:#9ca3af;font-size:12px}
.st-fit-col li a{color:#ea1917;font-weight:700;text-decoration:none;border-bottom:1px solid #fecaca}
.st-fit-col li a:hover{color:#b01412}
.st-ssd-card{display:flex;gap:16px;align-items:flex-start;background:linear-gradient(135deg,#eef3ff,#fff);border:1px solid #d6e1ff;border-radius:14px;padding:18px 20px;margin-bottom:14px}
.st-ssd-ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:#1251A3;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.st-ssd-body h3{font-size:15px;font-weight:800;color:#0d3d7a;margin:0 0 6px;line-height:1.3}
.st-ssd-body p{font-size:13.5px;color:#374151;margin:0;line-height:1.7}
.st-ssd-body a{color:#1251A3;font-weight:800;text-decoration:none;border-bottom:1px solid #d6e1ff}
/* "이 제품이 적합하지 않은 경우" 라우팅 CTA */
.st-route{background:#fff;border:1px solid #fed7aa;border-radius:14px;padding:20px 22px}
.st-route-head{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;color:#9a3412;margin:0 0 14px}
.st-route-head i{color:#ea580c;font-size:16px}
.st-route-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-route-card{display:flex;align-items:center;gap:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:14px 16px;text-decoration:none;transition:.2s}
.st-route-card:hover{background:#ffedd5;border-color:#fdba74;transform:translateY(-1px);box-shadow:0 6px 14px rgba(234,88,12,.12)}
.st-route-ic{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#ea580c;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.st-route-body{flex:1;min-width:0}
.st-route-q{display:block;font-size:13.5px;font-weight:800;color:#1a1a1a;line-height:1.35;margin:0 0 4px}
.st-route-a{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:800;color:#c2410c}
.st-route-a i{font-size:10px;transition:transform .2s}
.st-route-card:hover .st-route-a i{transform:translateX(3px)}
@media(max-width:768px){
.st-route{padding:16px 16px}
.st-route-grid{grid-template-columns:1fr;gap:10px}
.st-route-card{padding:12px 14px;gap:12px}
.st-route-ic{width:36px;height:36px;font-size:15px}
.st-route-q{font-size:13px}
.st-route-a{font-size:12px}
}
@media(max-width:768px){
.st-fit{padding-top:24px}
.st-fit-h2{font-size:22px}
.st-fit-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.st-fit-card{padding:16px 14px}
.st-fit-ic{width:42px;height:42px;font-size:18px}
.st-fit-card h3{font-size:14px}
.st-fit-card p{font-size:12.5px}
.st-fit-tbl{grid-template-columns:1fr}
.st-fit-col--ok{border-right:0;border-bottom:1px solid #e5e7eb}
.st-fit-col{padding:16px 18px}
.st-ssd-card{padding:14px 16px;gap:12px}
.st-ssd-ic{width:40px;height:40px;font-size:18px}
}
/* ═══ 복구 가능 파일 형식 ═══ */
.st-ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px}
.st-ft-card{background:#fff;border:1px solid #e8eaed;border-radius:16px;padding:0;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}
.st-ft-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(15,23,42,.08)}
.st-ft-head{display:flex;align-items:center;gap:13px;padding:20px 22px;border-bottom:1px solid #f1f2f4}
.st-ft-ic{width:46px;height:46px;flex:none;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px}
.st-ft-cat{font-size:17px;font-weight:800;color:#1a1a1a;margin:0;line-height:1.2}
.st-ft-cnt{display:block;font-size:12px;font-weight:600;color:#9ca3af;margin-top:3px}
.st-ft-tags{display:flex;flex-wrap:wrap;gap:8px;padding:20px 22px}
.st-ft-tags span{display:inline-flex;align-items:center;background:#f6f7f9;border:1px solid #e8eaed;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:700;color:#374151;letter-spacing:.5px;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace}
.st-ft-card--doc .st-ft-ic{background:#eff6ff;color:#2563eb}
.st-ft-card--photo .st-ft-ic{background:#ecfdf5;color:#059669}
.st-ft-card--video .st-ft-ic{background:#f5f3ff;color:#7c3aed}
.st-ft-card--doc:hover{border-color:#bfdbfe}
.st-ft-card--photo:hover{border-color:#a7f3d0}
.st-ft-card--video:hover{border-color:#ddd6fe}
.st-ft-note{margin:22px 0 0;font-size:13px;color:#6b7280;text-align:center;line-height:1.7}
.st-ft-note a{color:#ea1917;font-weight:700;text-decoration:none}
@media(max-width:768px){.st-ft-grid{grid-template-columns:1fr;gap:12px}.st-ft-head{padding:16px 18px}.st-ft-tags{padding:16px 18px}}
/* ═══ RECOVERY CASES — 실제 복구 사례 ═══ */
.st-case-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:1100px;margin:0 auto}
.st-case-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:transform .22s,box-shadow .22s,border-color .22s}
.st-case-card:hover{transform:translateY(-3px);border-color:#fecaca;box-shadow:0 14px 32px rgba(15,23,42,.08)}
.st-case-img{aspect-ratio:16/10;background:#0f1020;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.st-case-img img{width:100%;height:100%;object-fit:contain;display:block}
.st-case-img-tag{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(234,25,23,.95);color:#fff;border-radius:6px;font-size:11.5px;font-weight:800;letter-spacing:.04em;z-index:2}
.st-case-body{padding:22px 24px 22px;display:flex;flex-direction:column;gap:14px}
.st-case-h3{font-size:18px;font-weight:800;color:#1a0808;margin:0;line-height:1.35}
.st-case-meta{display:flex;flex-wrap:wrap;gap:6px}
.st-case-meta span{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#6b7280;background:#f6f7f9;border:1px solid #e8eaed;border-radius:6px;padding:4px 9px}
.st-case-meta span i{color:#ea1917;font-size:10px}
.st-case-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px 16px;background:linear-gradient(135deg,#fef9f9,#fff);border:1px solid #fee2e2;border-radius:10px}
.st-case-step{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:#374151;line-height:1.55}
.st-case-step-no{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:#ea1917;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;margin-top:1px}
.st-case-step strong{color:#1a1a1a;font-weight:800}
.st-case-result{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px}
.st-case-result-ic{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#059669;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.st-case-result-body{flex:1;min-width:0}
.st-case-result-label{font-size:11.5px;font-weight:800;color:#047857;letter-spacing:.04em;margin:0 0 2px}
.st-case-result-main{font-size:14.5px;font-weight:800;color:#064e3b;margin:0;line-height:1.4}
.st-case-foot{max-width:1100px;margin:18px auto 0;font-size:12px;color:#9ca3af;text-align:center;line-height:1.6}
@media(max-width:900px){.st-case-grid{grid-template-columns:1fr;gap:16px}.st-case-h3{font-size:16.5px}}
@media(max-width:480px){.st-case-body{padding:18px 18px}.st-case-steps{padding:12px 13px}.st-case-step{font-size:13px}}
/* ═══ FILESYSTEM 카드 그리드 ═══ */
.st-fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1080px;margin:0 auto}
.st-fs-group{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;transition:transform .22s,border-color .22s,box-shadow .22s}
.st-fs-group:hover{transform:translateY(-2px);border-color:#fecaca;box-shadow:0 8px 20px rgba(15,23,42,.06)}
.st-fs-group-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px dashed #e5e7eb}
.st-fs-os{width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.st-fs-os--win{background:#eff6ff;color:#2563eb}
.st-fs-os--mac{background:#f3f4f6;color:#1a1a1a}
.st-fs-os--linux{background:#fff7ed;color:#c2410c}
.st-fs-os--nas{background:#ecfdf5;color:#059669}
.st-fs-group-title{font-size:14px;font-weight:800;color:#1a1a1a;line-height:1.3}
.st-fs-group-title small{display:block;font-size:11px;font-weight:600;color:#9ca3af;margin-top:2px;letter-spacing:.02em}
.st-fs-list{display:flex;flex-wrap:wrap;gap:6px}
.st-fs-tag{display:inline-flex;align-items:center;background:#f6f7f9;border:1px solid #e8eaed;border-radius:6px;padding:5px 10px;font-size:12.5px;font-weight:700;color:#374151;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.3px}
.st-fs-list{display:flex;flex-wrap:wrap;gap:6px;flex:1;align-content:flex-start}
.st-fs-use{margin-top:10px;padding-top:10px;border-top:1px dashed #e5e7eb;font-size:11.5px;color:#6b7280;line-height:1.5;display:flex;align-items:center;gap:6px}
.st-fs-use i{color:#9ca3af;font-size:11px}
.st-fs-foot{max-width:1080px;margin:18px auto 0;font-size:12.5px;color:#6b7280;text-align:center;line-height:1.7}
.st-fs-foot a{color:#ea1917;font-weight:700;text-decoration:none;border-bottom:1px solid #fecaca}
@media(max-width:900px){.st-fs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.st-fs-grid{grid-template-columns:1fr;gap:10px}.st-fs-group{padding:16px 14px}}
/* ═══ TRUST BAR — 4-카드 신뢰 패널 ═══ */
.st-trustbar{background:#fafafa;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6;padding:40px 0 36px}
.st-trustbar .st-crumb{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#6b7280;font-weight:500;margin-bottom:24px}
.st-trustbar .st-crumb a{color:#6b7280;text-decoration:none;transition:color .2s}
.st-trustbar .st-crumb a:hover{color:#ea1917}
.st-trustbar .st-crumb i{font-size:9px;color:#d1d5db}
.st-trustbar .st-crumb b{color:#1a1a1a;font-weight:700}
.st-trustbar-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st-trustcard{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .22s,border-color .22s,box-shadow .22s}
.st-trustcard:hover{transform:translateY(-2px);border-color:#fecaca;box-shadow:0 8px 20px rgba(234,25,23,.06)}
.st-trustcard-ic{width:44px;height:44px;border-radius:12px;background:#fef2f2;color:#ea1917;display:inline-flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:4px}
.st-trustcard-main{font-size:34px;font-weight:900;color:#ea1917;letter-spacing:-.02em;line-height:1;display:inline-flex;align-items:baseline;gap:4px}
.st-trustcard-main .plus{font-size:22px;font-weight:900;color:#ea1917}
.st-trustcard-main .sub{font-size:13px;font-weight:800;color:#1a1a1a;letter-spacing:0}
.st-trustcard-label{font-size:13px;font-weight:700;color:#374151;line-height:1.4}
@media(max-width:768px){
.st-trustbar{padding:24px 0 22px}
.st-trustbar .st-crumb{margin-bottom:16px;font-size:11px}
.st-trustbar-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.st-trustcard{padding:18px 12px}
.st-trustcard-ic{width:38px;height:38px;font-size:16px}
.st-trustcard-main{font-size:26px}
.st-trustcard-main .plus{font-size:18px}
.st-trustcard-main .sub{font-size:12px}
.st-trustcard-label{font-size:12px}
}
/* ═══ SECTION 통합 시스템 ═══ */
.st-sec{padding:80px 0;position:relative}
.st-sec--white{background:#fff;color:#1a1a2e}
.st-sec--gray{background:#f9fafb;color:#1a1a2e}
.st-sec--pink-light{background:#fef9f9;color:#1a1a2e}
.st-sec--pink{background:#fef2f2;color:#1a1a2e}
.st-sec--cream{background:#fef2f2;color:#1a1a2e}
.st-sec--dark{background:#0f172a;color:#fff}
.st-sec-head{text-align:center;max-width:760px;margin:0 auto 56px;display:flex;flex-direction:column;gap:14px;align-items:center}
.st-sec-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ea1917;text-transform:uppercase;margin-bottom:0}
.st-sec-eyebrow::before,.st-sec-eyebrow::after{content:'';width:24px;height:1px;background:#ea1917;display:inline-block}
.st-sec-h2{font-size:36px;font-weight:800;color:#1a0808;line-height:1.3;letter-spacing:-.02em;margin:0}
.st-sec-h2 .accent{color:#ea1917;position:relative;display:inline-block}
.st-sec-h2 .accent::after{content:'';position:absolute;left:-2px;right:-2px;bottom:5px;height:9px;background:#fbbf24;z-index:-1;opacity:.6;transform:skewX(-6deg);border-radius:2px}
.st-sec-h2 .brand-name{font-weight:900;letter-spacing:.04em;color:#ea1917;margin:0 4px}
.st-sec-lead{font-size:16px;color:#6b7280;line-height:1.85;margin:0;font-weight:500;max-width:780px}
@media(max-width:1024px){.st-sec{padding:64px 0}.st-sec-head{margin-bottom:42px}.st-sec-h2{font-size:30px}.st-sec-lead{font-size:15px}}
@media(max-width:768px){.st-sec{padding:48px 0}.st-sec-head{margin-bottom:32px;gap:10px}.st-sec-eyebrow{font-size:11px}.st-sec-h2{font-size:24px}.st-sec-lead{font-size:14px;line-height:1.7}}
/* ═══ PAIN GRID 3-col ═══ */
.st-pain-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1040px;margin:0 auto}
.st-pain-block{background:#fff;border:1px solid #f6cccc;border-radius:10px;overflow:hidden;transition:.25s;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(234,25,23,.05)}
.st-pain-block:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(234,25,23,.12);border-color:#f3a5a5}
.st-pain-img{height:170px;position:relative;overflow:hidden;background:linear-gradient(135deg,#fef2f2 0%,#fdecec 100%);display:flex;align-items:center;justify-content:center}
.st-pain-img i{font-size:64px;color:#ea1917;opacity:.85}
.st-pain-block-body{padding:22px 24px 22px;flex:1;display:flex;flex-direction:column}
.st-pain-block-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px dashed #fee2e2}
.st-pain-num{font-family:"Montserrat",sans-serif;font-size:30px;font-weight:900;color:#ea1917;line-height:1;letter-spacing:-.02em;flex-shrink:0}
.st-pain-cat{font-size:17px;font-weight:800;color:#1a1a1a;margin:0;letter-spacing:-.01em;line-height:1.3}
.st-pain-list{display:flex;flex-direction:column;gap:10px}
.st-pain-list li{font-size:14px;font-weight:600;color:#374151;position:relative;padding-left:20px;line-height:1.5}
.st-pain-list li::before{content:'';position:absolute;left:0;top:7px;width:10px;height:10px;border:2px solid #ea1917;border-radius:50%;background:#fff}
@media(max-width:1024px){
.st-pain-grid3{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;max-width:none;padding:4px 20px 20px;margin:0 -20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.st-pain-grid3::-webkit-scrollbar{display:none}
.st-pain-block{flex:0 0 82%;max-width:360px;scroll-snap-align:center}
}
@media(max-width:640px){
.st-pain-block{flex:0 0 85%}
.st-pain-img{height:140px}
.st-pain-img i{font-size:50px}
.st-pain-num{font-size:24px}
.st-pain-cat{font-size:15px}
.st-pain-list li{font-size:13px}
}
/* ═══ SOLUTIONS zigzag ═══ */
.st-sol{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1100px;margin:0 auto 88px}
.st-sol:last-child{margin-bottom:0}
.st-sol--reverse .st-sol-img{order:2}
.st-sol-img{border-radius:14px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(135deg,#fef2f2 0%,#fff 70%);border:1px solid #fecaca;position:relative;box-shadow:0 4px 16px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;color:#ea1917}
.st-sol-img i{font-size:88px;opacity:.9}
.st-sol-img .label{font-size:14px;font-weight:800;color:#1a0808;letter-spacing:.02em}
.st-sol-img--photo{display:block;background:#0f1020;border-color:#e5e7eb}
.st-sol-img--photo picture{display:contents}
.st-sol-img--photo img{width:100%;height:100%;object-fit:contain;display:block}
.st-sol-img--slider{flex-direction:row;align-items:stretch;justify-content:flex-start;gap:0;background:#0f1020;border-color:#e5e7eb;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.st-sol-img--slider::-webkit-scrollbar{display:none}
.st-sol-img--slider.dragging{cursor:grabbing}
.st-sol-img--slider picture{display:contents}
.st-sol-slide{flex:0 0 100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center}
.st-sol-slide img{width:100%;height:100%;object-fit:contain;display:block}
.st-sol-text{padding:0 4px}
.st-sol-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.st-sol-num{font-family:"Montserrat",sans-serif;font-size:42px;font-weight:900;color:#ea1917;line-height:1;letter-spacing:-.02em}
.st-sol-tag{display:inline-block;background:#fef2f2;color:#ea1917;font-size:12px;font-weight:800;padding:5px 14px;border-radius:6px;letter-spacing:.04em;border:1px solid #fecaca}
.st-sol-h3{font-size:26px;font-weight:800;color:#1a1a1a;margin:0 0 14px;line-height:1.4;letter-spacing:-.01em}
.st-sol-desc{font-size:15px;color:#4b5563;line-height:1.85;margin:0 0 20px;font-weight:500}
.st-sol-list{display:flex;flex-direction:column;gap:10px}
.st-sol-list li{font-size:14px;color:#1a1a1a;font-weight:500;position:relative;padding-left:26px;line-height:1.6}
.st-sol-list li strong{font-weight:800;color:#1a1a1a}
.st-sol-list li::before{content:'\f00c';font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:0;top:1px;color:#ea1917;font-size:13px}
.st-sol-foot{font-size:11px;color:#9ca3af;margin:14px 0 0;font-weight:500;line-height:1.5}
.st-sol-foot a{color:#ea1917;text-decoration:none;font-weight:700;border-bottom:1px solid #fecaca}
@media(max-width:900px){
.st-sol{display:flex;flex-direction:column;gap:18px;margin-bottom:56px;grid-template-columns:none}
.st-sol-text{display:contents}
.st-sol-head{order:1;margin-bottom:0}
.st-sol-h3{order:2;font-size:22px;margin:0}
.st-sol-img{order:3}
.st-sol-desc{order:4;font-size:14px;margin:0}
.st-sol-list{order:5;margin:0}
.st-sol-foot{order:6;margin:0}
.st-sol--reverse .st-sol-img{order:3}
.st-sol-num{font-size:36px}
.st-sol-img i{font-size:64px}
}
/* ═══ DIFFERENCE 비교표 (B2B 핵심) ═══ */
.st-cmp{max-width:1000px;margin:0 auto;background:#fff;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb;box-shadow:0 4px 16px rgba(0,0,0,.04)}
.st-cmp-row{display:grid;grid-template-columns:1.6fr 1fr 1fr}
.st-cmp-row:not(:last-child){border-bottom:1px solid #f3f4f6}
.st-cmp-cell{padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.st-cmp-cell--item{background:#fafafa}
.st-cmp-cell--us{background:#fef9f9;border-left:1px solid #fee2e2;border-right:1px solid #fee2e2;align-items:center;text-align:center}
.st-cmp-cell--them{align-items:center;text-align:center}
.st-cmp-itm-h{font-size:14px;font-weight:800;color:#1a1a1a}
.st-cmp-itm-d{font-size:12px;color:#6b7280;font-weight:500}
.st-cmp-row--head{background:#1a1a2e}
.st-cmp-row--head .st-cmp-cell{padding:14px 22px;font-size:13px;font-weight:800;color:#fff;letter-spacing:.04em;justify-content:center;text-align:center}
.st-cmp-row--head .st-cmp-cell--item{background:#1a1a2e;text-align:left;color:#94a3b8}
.st-cmp-row--head .st-cmp-cell--us{background:#ea1917;color:#fff;border:none}
.st-cmp-cell--us i{color:#16a34a;font-size:22px}
.st-cmp-cell--them i{color:#f59e0b;font-size:22px}
.st-cmp-cell--us span,.st-cmp-cell--them span{font-size:12.5px;color:#4b5563;font-weight:600;line-height:1.5}
.st-cmp-cell--us span{color:#1a1a1a;font-weight:700}
.st-cmp-note{font-size:11px;color:#9ca3af;text-align:center;margin:16px 0 0;padding:0 24px;font-weight:500}
@media(max-width:768px){
.st-cmp-cell{padding:12px 14px}
.st-cmp-row--head .st-cmp-cell{padding:10px 14px;font-size:11px}
.st-cmp-itm-h{font-size:13px}
.st-cmp-itm-d{font-size:11px}
.st-cmp-cell--us i,.st-cmp-cell--them i{font-size:18px}
.st-cmp-cell--us span,.st-cmp-cell--them span{font-size:11.5px;line-height:1.45}
}
/* ═══ RECOVERY RATE (◎○△× 카드) ═══ */
.rr-svc-link{color:#92400e;background:#fde68a;font-weight:800;text-decoration:none;border-bottom:1.5px solid #b45309;transition:.2s;padding:1px 4px;border-radius:3px}
.rr-svc-link:hover{background:#fcd34d;color:#78350f}
.st-rr-foot{text-align:center;font-size:12px;color:#6b7280;margin:20px 0 0;font-weight:500;letter-spacing:.02em}
/* 복구 가능성 요약 표 */
.st-rr-sum{max-width:760px;margin:26px auto 0}
.st-rr-sum-title{font-size:14px;font-weight:800;color:#1a1a1a;margin:0 0 12px;text-align:center}
.st-rr-sum-wrap{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.st-rr-sum-table{width:100%;border-collapse:collapse;font-size:13.5px}
.st-rr-sum-table th{background:#f9fafb;padding:12px 16px;text-align:left;font-weight:800;color:#0a0a0a;border-bottom:2px solid #e5e7eb;font-size:13px}
.st-rr-sum-table th:last-child{text-align:center;width:34%}
.st-rr-sum-table td{padding:12px 16px;border-bottom:1px solid #f3f4f6;color:#4a4a4a;vertical-align:middle}
.st-rr-sum-table tr:last-child td{border-bottom:0}
.st-rr-sum-table td:first-child{font-weight:700;color:#1a1a1a}
.st-rr-cell-note{display:block;margin-top:3px;font-size:11px;font-weight:500;color:#9ca3af;letter-spacing:.01em}
.st-rr-sum-table td:last-child{text-align:center}
.st-rr-poss{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:13px;padding:4px 12px;border-radius:999px}
.st-rr-poss.vhigh{background:#dcfce7;color:#15803d}
.st-rr-poss.high{background:#dbeafe;color:#1d4ed8}
.st-rr-poss.mid{background:#fef3c7;color:#b45309}
.st-rr-poss.low{background:#fee2e2;color:#b91c1c}
.st-rr-sum-notes{max-width:760px;margin:12px auto 0;padding:0 2px}
.st-rr-sum-notes p{font-size:12.5px;color:#6b7280;line-height:1.7;margin:0 0 4px}
.st-rr-sum-notes p:last-child{margin-bottom:0}
.st-rr-detail{max-width:760px;margin:14px auto 0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.st-rr-detail>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;font-size:14px;font-weight:800;color:#1a1a1a}
.st-rr-detail>summary::-webkit-details-marker{display:none}
.st-rr-detail>summary i{color:#1251A3;transition:transform .25s ease;font-size:13px;flex-shrink:0}
.st-rr-detail[open]>summary i{transform:rotate(180deg)}
.st-rr-detail>summary:hover{background:#f9fafb}
.st-rr-detail-body{padding:2px 18px 16px}
.st-rr-di{display:flex;gap:14px;align-items:baseline;padding:10px 0;border-top:1px solid #f3f4f6}
.st-rr-di:first-child{border-top:0}
.st-rr-di .t{flex:0 0 96px;font-weight:800;color:#1251A3;font-size:13px}
.st-rr-di .d{flex:1;font-size:13px;color:#4a4a4a;line-height:1.6}
@media(max-width:540px){
.st-rr-sum-notes p{font-size:12px}
.st-rr-di{flex-direction:column;gap:3px}
.st-rr-di .t{flex:none}
}
/* BAD SECTOR 전문가 팁 */
.st-rr-tip{max-width:760px;margin:22px auto 0;background:#fffbeb;border:1px solid #fde68a;border-left:4px solid #f59e0b;border-radius:12px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.st-rr-tip-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:#fef3c7;color:#b45309;display:flex;align-items:center;justify-content:center;font-size:17px}
.st-rr-tip-body h3{font-size:14.5px;font-weight:800;color:#92400e;margin:0 0 6px}
.st-rr-tip-body p{font-size:13px;color:#78350f;line-height:1.7;margin:0;font-weight:500}
.st-rr-tip-body p strong{font-weight:800;color:#92400e}
.st-rr-tip-body a{color:#b45309;font-weight:800;text-decoration:underline}
@media(max-width:768px){
.st-rr-sum-table th,.st-rr-sum-table td{padding:11px 12px;font-size:12.5px}
.st-rr-sum-table th:last-child,.st-rr-sum-table td:last-child{width:38%}
.st-rr-poss{font-size:12px;padding:3px 9px;gap:4px}
.st-rr-tip{padding:14px 16px;gap:11px}
.st-rr-tip-icon{width:34px;height:34px;font-size:15px}
}
@media(max-width:540px){
}
/* ═══ 5단계 인터랙티브 가이드 (st5) ═══ */
/* KEEP: 콜아웃은 MODE 섹션에서 공용 사용 */
.st-step-img-callout{position:absolute;background:#fff;border:2px solid #1251A3;color:#1251A3;font-size:12.5px;font-weight:800;padding:8px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;box-shadow:0 6px 16px rgba(0,0,0,.15);z-index:2;white-space:nowrap}
.st-step-img-callout.c-blue{border-color:#1251A3;color:#1251A3}
.st-step-img-callout.c-green{border-color:#059669;color:#059669}
.st-step-img-callout.c-purple{border-color:#7c3aed;color:#7c3aed}
.st-step-img-callout.c-orange{border-color:#ea580c;color:#ea580c}
.st5-root{--st5-red:#ea1917;--st5-red-d:#b8120f;--st5-ink:#16181d;--st5-muted:#6c7280;--st5-line:#e7e9ee;--st5-card:#fff;--st5-shadow:0 18px 50px rgba(20,30,55,.12);--st5-ease:cubic-bezier(.65,0,.25,1)}
.st5-root picture{display:contents}
.st5-stepper{display:flex;align-items:flex-start;justify-content:space-between;margin:0 auto 38px;position:relative}
.st5-stp{display:flex;flex-direction:column;align-items:center;gap:13px;background:none;border:none;cursor:pointer;padding:0;flex:1;font-family:inherit;position:relative;z-index:2;transition:.2s}
.st5-stp .circle{width:58px;height:58px;border-radius:18px;background:var(--st5-card);color:#aab0bb;font-size:20px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--st5-line);box-shadow:0 4px 12px rgba(20,30,55,.05);transition:.35s var(--st5-ease);position:relative}
.st5-stp:hover .circle{border-color:#f4a3a1;color:var(--st5-red);transform:translateY(-2px)}
.st5-stp.done .circle{background:linear-gradient(135deg,#ef3b38,var(--st5-red-d));color:#fff;border-color:transparent}
.st5-stp.done .circle .num{display:none}
.st5-stp.done .circle::after{content:'\f00c';font-family:"Font Awesome 6 Free";font-weight:900;font-size:20px}
.st5-stp.active .circle{background:linear-gradient(135deg,#ef3b38,var(--st5-red-d));color:#fff;border-color:transparent;transform:translateY(-3px) scale(1.06);box-shadow:0 12px 26px rgba(232,32,29,.32)}
.st5-stp .lab{font-size:13.5px;font-weight:700;color:var(--st5-muted);text-align:center;transition:.3s;letter-spacing:-.01em;line-height:1.35}
.st5-stp.active .lab,.st5-stp.done .lab{color:var(--st5-ink);font-weight:800}
.st5-stp .lab small{display:block;font-size:10.5px;font-weight:700;color:#aab0bb;letter-spacing:.1em;margin-bottom:3px}
.st5-stp.active .lab small{color:var(--st5-red)}
.st5-track-line{position:absolute;top:29px;left:8%;right:8%;height:3px;background:var(--st5-line);border-radius:2px;z-index:1}
.st5-track-line>span{display:block;height:100%;width:0;background:linear-gradient(90deg,#ef3b38,var(--st5-red-d));border-radius:2px;transition:width .5s var(--st5-ease)}
.st5-root .panel{display:none}
.st5-root .panel.active{display:grid;grid-template-columns:1.55fr 1fr;gap:40px;align-items:center;animation:st5PanelIn .5s var(--st5-ease)}
@keyframes st5PanelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.st5-root .monitor{position:relative;min-width:0}
.st5-root .bezel{position:relative;background:linear-gradient(160deg,#21252c,#13151a);border-radius:20px;padding:16px 16px 20px;box-shadow:var(--st5-shadow),inset 0 1px 0 rgba(255,255,255,.06)}
.st5-root .bezel::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:#3a4049;box-shadow:0 0 0 2px rgba(0,0,0,.2)}
.st5-root .screen{position:relative;border-radius:8px;overflow:hidden;background:#0c0e12;aspect-ratio:1000/642}
.st5-root .viewport{position:absolute;inset:0;overflow:hidden}
.st5-root .ribbon{display:flex;height:100%;will-change:transform;transition:transform .62s var(--st5-ease)}
.st5-root .slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;background:#0c0e12}
.st5-root .slide img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.st5-root .timer{position:absolute;top:0;left:0;right:0;height:3px;background:rgba(255,255,255,.14);z-index:6}
.st5-root .timer>i{display:block;height:100%;width:0;background:var(--st5-red);box-shadow:0 0 8px rgba(232,32,29,.6)}
.st5-root .cap{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:12px;padding:18px 18px 16px;background:linear-gradient(0deg,rgba(8,12,20,.86),rgba(8,12,20,.32) 55%,transparent);color:#fff}
.st5-root .cap .idx{font-size:11.5px;font-weight:800;background:var(--st5-red);border-radius:8px;padding:4px 10px;flex-shrink:0;letter-spacing:.02em}
.st5-root .cap .txt{font-size:14.5px;font-weight:600;letter-spacing:-.01em;transition:opacity .3s}
.st5-root .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:7;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.9);color:#16181d;font-size:18px;cursor:pointer;opacity:0;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:.22s var(--st5-ease)}
.st5-root .screen:hover .arrow{opacity:1}
.st5-root .arrow.l{left:14px}
.st5-root .arrow.r{right:14px}
.st5-root .arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
.st5-root .dots{position:absolute;left:50%;bottom:50px;transform:translateX(-50%);z-index:7;display:flex;gap:7px;padding:7px 11px;border-radius:20px;background:rgba(8,12,20,.5);backdrop-filter:blur(5px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.st5-root .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer;transition:.3s var(--st5-ease)}
.st5-root .dots i.on{background:#fff;width:22px;border-radius:4px}
.st5-root .pp{position:absolute;right:14px;top:14px;z-index:7;width:34px;height:34px;border-radius:50%;border:none;background:rgba(8,12,20,.55);backdrop-filter:blur(4px);color:#fff;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s}
.st5-root .pp:hover{background:rgba(8,12,20,.8)}
.st5-root .info{position:relative;min-width:0}
.st5-root .info .badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--st5-red);letter-spacing:.06em;margin-bottom:14px}
.st5-root .info .badge .n{width:30px;height:30px;border-radius:9px;background:rgba(232,32,29,.1);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800}
.st5-root .info h3.st5-h{font-size:1.7rem;font-weight:800;letter-spacing:-.03em;line-height:1.2;margin-bottom:14px;color:var(--st5-ink)}
.st5-root .info p{color:#3a4150;font-size:1rem;line-height:1.75}
.st5-root .info .tip{margin-top:22px;display:flex;gap:12px;background:#fff;border:1px solid var(--st5-line);border-left:3px solid var(--st5-red);border-radius:12px;padding:15px 16px;font-size:.9rem;color:#48505e;box-shadow:0 6px 18px rgba(20,30,55,.05)}
.st5-root .info .tip .ic{flex-shrink:0;color:var(--st5-red);font-weight:800}
.st5-root .info .tip b{color:var(--st5-ink)}
.st5-root .info .frame-list{margin-top:22px;display:flex;flex-direction:column;gap:2px}
.st5-root .info .frame-list .fl{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;font-size:13px;color:var(--st5-muted);cursor:pointer;transition:.2s}
.st5-root .info .frame-list .fl:hover{background:#fff}
.st5-root .info .frame-list .fl.on{background:#fff;color:var(--st5-ink);font-weight:700;box-shadow:0 4px 12px rgba(20,30,55,.06)}
.st5-root .info .frame-list .fl .d{width:6px;height:6px;border-radius:50%;background:#c8cdd6;flex-shrink:0;transition:.2s}
.st5-root .info .frame-list .fl.on .d{background:var(--st5-red);box-shadow:0 0 0 3px rgba(232,32,29,.15)}
.st5-nav{display:flex;align-items:center;justify-content:space-between;margin-top:42px;gap:14px;border-top:1px solid var(--st5-line);padding-top:24px}
.st5-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:11px;border:1.5px solid var(--st5-line);background:var(--st5-card);color:var(--st5-ink);font-weight:700;font-size:.95rem;cursor:pointer;transition:.22s var(--st5-ease);font-family:inherit}
.st5-btn:hover:not(:disabled){border-color:var(--st5-red);color:var(--st5-red);transform:translateY(-1px)}
.st5-btn:disabled{opacity:.4;cursor:default}
.st5-btn.next{background:linear-gradient(135deg,#ef3b38,var(--st5-red-d));color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(232,32,29,.28)}
.st5-btn.next:hover{transform:translateY(-1px);filter:brightness(1.04)}
.st5-btn.done{background:#15a34a;border-color:transparent;color:#fff;box-shadow:0 8px 20px rgba(21,163,74,.28)}
.st5-nav .ind{font-size:.9rem;color:var(--st5-muted);font-weight:700}
.st5-nav .ind b{color:var(--st5-red);font-size:1.1rem}
.st5-mobile-title{display:none}
@media(max-width:1000px){
.st5-root .panel.active{grid-template-columns:1fr;gap:26px}
.st5-root .info{order:-1}
}
@media(max-width:680px){
.st5-stp .lab{display:none}
.st5-stp .circle{width:46px;height:46px;border-radius:14px;font-size:16px}
.st5-stp.done .circle::after{font-size:16px}
.st5-track-line{top:23px}
.st5-mobile-title{display:block;text-align:center;font-weight:800;color:var(--st5-red);font-size:13px;margin:-18px 0 20px}
.st5-root .info h3.st5-h{font-size:1.4rem}
.st5-root .arrow{opacity:.92;width:38px;height:38px}
.st5-root .cap{padding:12px 13px}
.st5-root .cap .txt{font-size:12.5px}
.st5-root .dots{bottom:46px}
.st5-nav{margin-top:28px;gap:10px}
.st5-btn{padding:11px 16px;font-size:.85rem}
.st5-nav .ind{font-size:.8rem}
}
/* KEEP: MODE 섹션 모바일 콜아웃 */
@media(max-width:768px){
.st-step-img-callout{font-size:10px;padding:5px 8px;white-space:normal;line-height:1.3;text-align:center}
}
/* ═══ TRIAL vs FULL ═══ */
.st-cpt-wrap{background:#fff;border-radius:24px;overflow:hidden;border:1.5px solid #e5e7eb;max-width:880px;margin:0 auto}
.st-cpt{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.st-cpt thead{background:#f9fafb}
.st-cpt th{padding:14px 16px;text-align:center;font-weight:800;font-size:13px;color:#0a0a0a;border-bottom:2px solid #e5e7eb}
.st-cpt th:first-child{text-align:left}
.st-cpt td{padding:14px 16px;border-bottom:1px solid #f3f4f6;color:#4a4a4a;vertical-align:middle;text-align:center;word-break:keep-all}
.st-cpt tr:last-child td{border-bottom:0}
.st-cpt td:first-child{font-weight:700;color:#0a0a0a;background:#f9fafb;text-align:left}
.st-cpt .ok{color:#059669;font-weight:800}
.st-cpt .no{color:#ea1917;font-weight:800}
.st-cpt .nt{color:#6b7280;font-size:12.5px}
.st-cpt-note{margin-top:12px;font-size:12px;color:#6b7280;text-align:center}
@media(max-width:768px){.st-cpt th,.st-cpt td{padding:10px 6px !important;font-size:11px !important;line-height:1.45}.st-cpt td:first-child{font-size:11.5px !important;font-weight:700}.st-cpt .nt{font-size:10.5px !important}}
/* ═══ MODE 2-up (Wizard/Advanced) ═══ */
.st-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.st-mc{background:#fff;border:1.5px solid #e5e7eb;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.st-mc:hover{box-shadow:0 14px 32px rgba(15,23,42,.08);border-color:#ea1917}
.st-mv{position:relative;background:#f3f4f6;overflow:hidden;width:fit-content;max-width:100%;margin:0 auto}
.st-mv img{display:block;max-width:100%;width:auto !important;height:auto !important}
.st-mb{padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.st-mbd{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;width:fit-content;letter-spacing:.02em}
.st-mbd.bg{background:#eef3ff;color:#1251A3}
.st-mbd.ad{background:#f5f3ff;color:#7c3aed}
.st-mb h3{font-size:18px;font-weight:800;color:#0a0a0a;letter-spacing:-.02em}
.st-mb p{font-size:13px;color:#4a4a4a;line-height:1.65}
.st-mode-details{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.st-mode-detail{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#4a4a4a;line-height:1.55}
.st-mode-detail i{color:#059669;font-size:11px;flex-shrink:0;margin-top:4px}
@media(max-width:1024px){.st-mode-grid{grid-template-columns:1fr 1fr;gap:12px}}
@media(max-width:768px){
.st-mode-grid{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 12px 14px;margin:0 -12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.st-mode-grid::-webkit-scrollbar{display:none}
.st-mc{flex:0 0 88%;scroll-snap-align:center}
.st-mb{padding:14px 16px;gap:7px}
.st-mb h3{font-size:15px}
.st-mb p{font-size:12.5px;line-height:1.55}
.st-mode-detail{font-size:11.5px;line-height:1.4}
}
/* ═══ SPEC grid ═══ */
.st-spc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:1100px;margin:0 auto}
.st-spc-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.st-spc-card.full{grid-column:1/-1}
.st-spc-head{background:#fafafa;padding:14px 20px;font-size:14px;font-weight:800;color:#1a1a1a;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;letter-spacing:.02em}
.st-spc-head i{color:#ea1917;font-size:16px}
.st-spc-body{padding:18px 20px}
.st-spc-dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.st-spc-dev-item{display:flex;align-items:center;gap:10px}
.st-spc-dev-icon{width:36px;height:36px;border-radius:8px;background:#fef2f2;color:#ea1917;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.st-spc-dev-name{font-size:13px;font-weight:800;color:#1a1a1a;line-height:1.2}
.st-spc-dev-desc{font-size:11px;color:#6b7280;margin-top:2px;line-height:1.3}
.st-spc-sym-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.st-spc-sym-item{display:flex;align-items:center;gap:8px;padding:9px 12px;background:#fafafa;border-radius:8px}
.st-spc-sym-icon{color:#ea1917;font-size:13px;flex-shrink:0}
.st-spc-sym-name{font-size:12.5px;font-weight:700;color:#1a1a1a;line-height:1.3}
.st-spc-fs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.st-spc-fs-item{background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;padding:10px 12px}
.st-spc-fs-name{font-size:13px;font-weight:800;color:#1a1a1a;display:flex;align-items:center;gap:6px}
.st-spc-fs-name i{color:#ea1917;font-size:12px}
.st-spc-fs-desc{font-size:10.5px;color:#6b7280;margin-top:2px}
.st-spc-fs-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:14px;padding:10px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;font-size:12px;font-weight:700;color:#ea1917;cursor:pointer;transition:.2s;font-family:inherit}
.st-spc-fs-toggle:hover{background:#fef2f2;border-color:#fecaca}
.st-spc-fs-toggle i{transition:.3s}
.st-spc-fs-toggle.open i{transform:rotate(180deg)}
.st-spc-fs-detail{max-height:0;overflow:hidden;transition:max-height .5s ease}
.st-spc-fs-detail.open{max-height:1200px}
.st-spc-table{width:100%;border-collapse:collapse;font-size:12.5px}
.st-spc-table td{padding:10px 14px;border-bottom:1px solid #f3f4f6;line-height:1.55;color:#4b5563;vertical-align:top}
.st-spc-table td:first-child{font-weight:700;color:#1a1a1a;width:32%;white-space:nowrap}
.st-spc-table tr:last-child td{border-bottom:none}
.st-spc-fs-badge{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:4px;margin-right:6px;letter-spacing:.04em;vertical-align:middle}
.st-spc-fs-badge.full{background:#dcfce7;color:#15803d}
.st-spc-fs-badge.partial{background:#fef3c7;color:#b45309}
@media(max-width:900px){.st-spc-fs-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){
.st-spc-grid{grid-template-columns:1fr}
.st-spc-dev-grid,.st-spc-sym-grid{grid-template-columns:1fr}
.st-spc-fs-grid{grid-template-columns:repeat(2,1fr)}
.st-spc-table td{padding:10px 12px;font-size:12px}
.st-spc-table td:first-child{width:38%}
.st-spc-head{cursor:pointer;position:relative;padding-right:44px;user-select:none}
.st-spc-head::after{content:'\f078';font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;right:18px;top:50%;transform:translateY(-50%);transition:transform .3s;color:#9ca3af;font-size:13px}
.st-spc-card.open .st-spc-head::after{transform:translateY(-50%) rotate(180deg);color:#ea1917}
.st-spc-card.open .st-spc-head{background:#fef2f2;color:#ea1917}
.st-spc-card.open .st-spc-head i{color:#ea1917}
.st-spc-body{max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .4s ease,padding .3s ease}
.st-spc-card.open .st-spc-body{max-height:5000px;padding-top:18px;padding-bottom:18px}
}
/* ── 디폴트 닫힘 아코디언 카드 (전 뷰포트, + 누르면 확장) ── */
.st-spc-grid .st-spc-card--acc .st-spc-head{cursor:pointer;position:relative;padding-right:52px;user-select:none}
.st-spc-grid .st-spc-card--acc .st-spc-head::after{content:'';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;background:#fef2f2;color:#ea1917;display:flex;align-items:center;justify-content:center;font-size:11px;transition:background .25s,color .25s;background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat}
.st-spc-grid .st-spc-card--acc:hover .st-spc-head{color:#ea1917}
.st-spc-grid .st-spc-card--acc:hover .st-spc-head i{color:#ea1917}
.st-spc-grid .st-spc-card--acc.open .st-spc-head{background:#fef2f2;color:#ea1917}
.st-spc-grid .st-spc-card--acc.open .st-spc-head i{color:#ea1917}
.st-spc-grid .st-spc-card--acc.open .st-spc-head::after{content:'';background:#ea1917;color:#fff;background-image:linear-gradient(currentColor,currentColor);background-size:10px 2px;background-position:center;background-repeat:no-repeat}
.st-spc-grid .st-spc-card--acc .st-spc-body{max-height:0;overflow:hidden;padding-top:0;padding-bottom:0;transition:max-height .4s ease,padding .3s ease}
.st-spc-grid .st-spc-card--acc.open .st-spc-body{max-height:5000px;padding-top:18px;padding-bottom:18px}
.st-spc-grid .st-spc-card--acc .st-spc-head:focus-visible{outline:2px solid #ea1917;outline-offset:-2px}
/* ═══ LINEUP 비교 ═══ */
.st-lut-wrap{background:#fff;border-radius:24px;overflow:hidden;border:1.5px solid #e5e7eb;max-width:1080px;margin:0 auto}
.st-lut{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.st-lut thead{background:#f9fafb}
.st-lut th{padding:14px 16px;text-align:center;font-weight:800;font-size:13px;color:#0a0a0a;border-bottom:2px solid #e5e7eb}
.st-lut th:first-child{text-align:left}
.st-lut th.cr{background:#fef2f2;color:#ea1917}
.st-lut th.cr-r{background:#fef3c7;color:#b45309}
.st-lut th.cr-p{background:#dbeafe;color:#1e3a8a}
.st-lut td{padding:13px 16px;border-bottom:1px solid #f3f4f6;color:#4a4a4a;vertical-align:middle;text-align:center;word-break:keep-all}
.st-lut tr:last-child td{border-bottom:0}
.st-lut td:first-child{font-weight:700;color:#0a0a0a;background:#f9fafb;text-align:left}
.st-lut td.cr{background:#fef2f2;font-weight:800;color:#ea1917}
.st-lut td.cr-r{background:#fffbeb;font-weight:800;color:#b45309}
.st-lut td.cr-p{background:#eff6ff;font-weight:800;color:#1e3a8a}
.st-lut td.cr.ok,.st-lut td.cr-r.ok,.st-lut td.cr-p.ok,.st-lut td.ok{color:#16a34a;font-weight:800}
.st-lut td.cr.no,.st-lut td.cr-r.no,.st-lut td.cr-p.no,.st-lut td.no{color:#9ca3af;font-weight:700}
.st-lut td.cr.pt,.st-lut td.cr-r.pt,.st-lut td.cr-p.pt,.st-lut td.pt{color:#d97706;font-weight:800}
.st-lut td.ok i{color:#16a34a}
.st-lut td.no i{color:#d1d5db}
.st-lut td.pt i{color:#f59e0b}
.st-lut td.st-lut-group{background:#f1f5f9;color:#334155;font-weight:800;font-size:12px;letter-spacing:.02em;text-align:left;padding-top:11px;padding-bottom:11px;text-transform:none}
.st-lut-link{text-align:center;margin-top:20px;font-size:13.5px;color:#4a4a4a;line-height:1.7;padding:0 16px}
.st-lut-link a{font-weight:800;text-decoration:none;border-bottom:1.5px solid;padding:0 2px}
.st-lut-link a.link-raid{color:#b45309;border-bottom-color:#fde68a}
.st-lut-link a.link-pro{color:#1e3a8a;border-bottom-color:#c7d2fe}
@media(max-width:768px){
.st-lut{font-size:11px}
.st-lut th{padding:10px 4px !important;font-size:10.5px !important}
.st-lut td{padding:10px 4px !important;font-size:11px !important;line-height:1.45}
.st-lut td:first-child{padding-left:10px !important;font-size:11.5px !important;font-weight:700}
}
/* ═══ PRICING ═══ */
.st-pricing-note{text-align:center;font-size:12.5px;color:#6b7280;font-weight:600;margin-bottom:24px}
.st-pcg{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:14px}
.st-pcc{background:#fff;border:2px solid #e5e7eb;border-radius:24px;overflow:visible;display:flex;flex-direction:column;transition:.3s;position:relative}
.st-pcc:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,23,42,.1)}
.st-pcc.ft{border-color:#ea1917;box-shadow:0 8px 24px rgba(234,25,23,.15)}
.st-pc-banner{padding:18px 20px;color:#fff;display:flex;align-items:center;gap:12px;position:relative;min-height:80px;border-top-left-radius:22px;border-top-right-radius:22px}
.st-pc-banner.home-bg{background:linear-gradient(135deg,#b01412 0%,#7a0d0c 100%)}
.st-pc-banner.biz-bg{background:linear-gradient(135deg,#172554 0%,#1e3a8a 100%)}
.st-pc-banner.exp-bg{background:linear-gradient(135deg,#0a0a0a 0%,#1f2937 100%)}
.st-pc-rec-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#fbbf24;color:#0a0a0a;font-size:11px;font-weight:800;padding:5px 14px;border-radius:999px;box-shadow:0 4px 12px rgba(251,191,36,.5);z-index:10;white-space:nowrap}
.st-pc-best-tag{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.9);color:#1251A3;font-size:10px;font-weight:800;padding:3px 8px;border-radius:5px;letter-spacing:.04em}
.st-pc-banner-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;font-size:18px;flex-shrink:0}
.st-pc-banner-name{font-size:15px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.st-pc-banner-sub{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#fff;font-weight:800;background:rgba(0,0,0,.28);padding:4px 11px;border-radius:999px;margin-top:6px;letter-spacing:.03em;border:1px solid rgba(255,255,255,.18)}
.st-pc-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.st-pc-license-tag{font-size:11px;font-weight:800;color:#6b7280;letter-spacing:.06em;text-transform:uppercase}
.st-pc-title{font-size:18px;font-weight:800;color:#0a0a0a;letter-spacing:-.02em;line-height:1.3}
.st-pc-desc{font-size:12.5px;color:#4a4a4a;line-height:1.6;flex:1}
.st-pc-target{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#0a0a0a;background:#f9fafb;padding:7px 11px;border-radius:8px;width:fit-content}
.st-pc-target i{color:#ea1917}
.st-pc-tags{display:flex;flex-wrap:wrap;gap:4px}
.st-pc-tag{display:inline-flex;align-items:center;font-size:10.5px;font-weight:700;color:#4a4a4a;background:#f3f4f6;padding:3px 8px;border-radius:5px}
.st-pc-features{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6}
.st-pc-feat{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#4a4a4a;line-height:1.5}
.st-pc-feat i{font-size:11px;flex-shrink:0;margin-top:3px}
.st-pc-feat .ck{color:#059669}
.st-pc-feat .mn{color:#9ca3af}
.st-pc-price-box{text-align:center;padding:6px 0}
.st-pc-price{font-size:28px;font-weight:800;color:#0a0a0a;letter-spacing:-.02em;line-height:1.2}
.st-pc-price .unit{font-size:14px;font-weight:700;color:#6b7280;margin-left:3px}
.st-pc-price-sub{font-size:11.5px;color:#6b7280;font-weight:600;margin-top:2px}
.st-pc-actions{display:flex;gap:6px;margin-top:4px}
.st-btn-b{flex:1;padding:11px 14px;background:#ea1917;color:#fff !important;border:1.5px solid #ea1917;border-radius:8px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s;text-decoration:none}
.st-btn-b:hover{background:#b01412;border-color:#b01412}
.st-btn-t{padding:11px 14px;background:#fff;color:#0a0a0a !important;border:1.5px solid #d1d5db;border-radius:8px;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.2s;text-decoration:none;flex-shrink:0}
.st-btn-t:hover{border-color:#ea1917;color:#ea1917 !important}
@media(max-width:1100px){.st-pcg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
.st-pcg{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding:14px 12px 8px;margin:0 -12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
.st-pcg::-webkit-scrollbar{display:none}
.st-pcc{flex:0 0 calc(85% - 8px);scroll-snap-align:center}
.st-pc-body{padding:20px}
.st-pc-title{font-size:16.5px}
.st-pc-price{font-size:24px}
.st-pc-actions{flex-direction:column}
.st-btn-b,.st-btn-t{width:100%;font-size:12.5px;padding:10px 12px}
}
/* ═══ FAQ ═══ */
.st-faq-list{display:flex;flex-direction:column;gap:10px;max-width:840px;margin:0 auto}
.st-faq{background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;overflow:hidden;transition:.2s}
.st-faq[open]{border-color:#ea1917;box-shadow:0 4px 16px rgba(234,25,23,.08)}
.st-faq summary{padding:16px 20px;font-size:14px;font-weight:700;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;gap:12px;list-style:none;transition:.2s;letter-spacing:-.01em}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::before{content:'';color:#ea1917;width:24px;height:24px;background:#fef2f2;border-radius:6px;display:grid;place-items:center;flex-shrink:0;transition:.2s;background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:10px 2px,2px 10px;background-position:center;background-repeat:no-repeat}
.st-faq[open] summary::before{content:'';background:#ea1917;color:#fff;background-image:linear-gradient(currentColor,currentColor);background-size:10px 2px;background-position:center;background-repeat:no-repeat}
.st-faq summary:hover{background:#f9fafb}
.st-faq-ans{padding:0 20px 18px 56px;font-size:13.5px;color:#4a4a4a;line-height:1.7}
.st-faq-ans strong{color:#0a0a0a;font-weight:800}
.st-faq-ans a{color:#ea1917;font-weight:700;text-decoration:underline}
@media(max-width:768px){.st-faq summary{padding:14px 16px;font-size:13px;gap:10px}.st-faq summary::before{width:22px;height:22px;font-size:10px}.st-faq-ans{padding:0 16px 14px 48px;font-size:12.5px}}
/* ═══ SERVICE BAND + tiles ═══ */
.st-srv-band{background:linear-gradient(135deg,#1A1A2E 0%,#1E3A8A 100%);border-radius:16px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:40px;color:#fff;box-shadow:0 8px 28px rgba(30,58,138,.15)}
.st-srv-band-text{flex:1;min-width:0}
.st-srv-band-tag{display:inline-flex;align-items:center;gap:6px;background:#FFCC00;color:#1A1A2E;font-size:11px;font-weight:800;padding:5px 14px;border-radius:20px;margin-bottom:14px;letter-spacing:.04em}
.st-srv-band-text h2{font-size:22px;font-weight:800;margin:0 0 12px;line-height:1.55;color:#fff;letter-spacing:.01em}
.st-srv-band-text p{color:rgba(255,255,255,.78);font-size:14px;margin:0;line-height:1.8;font-weight:500}
.st-srv-band-actions{display:flex;flex-direction:column;gap:10px;flex-shrink:0}
.st-srv-btn{display:inline-flex;align-items:center;gap:8px;padding:13px 30px;border-radius:8px;font-size:14px;font-weight:800;white-space:nowrap;transition:.2s;text-decoration:none;justify-content:center}
.st-srv-btn.primary{background:#FFCC00;color:#1A1A2E;box-shadow:0 3px 10px rgba(255,204,0,.3)}
.st-srv-btn.primary:hover{background:#ffd633;transform:translateY(-1px)}
.st-srv-btn.outline{padding:11px 30px;background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.3);font-weight:600}
.st-srv-btn.outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}
.st-srv-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:36px}
.st-srv-tile{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:24px 16px;text-align:center;transition:.2s;text-decoration:none;display:block}
.st-srv-tile:hover{border-color:#1E3A8A;box-shadow:0 6px 20px rgba(30,58,138,.1);transform:translateY(-3px)}
.st-srv-tile i{font-size:24px;color:#1E3A8A;margin-bottom:12px;display:block}
.st-srv-tile .title{font-size:13px;font-weight:800;color:#1A1A2E;margin-bottom:4px;letter-spacing:.01em}
.st-srv-tile .sub{font-size:11px;color:#7A7A8A;line-height:1.5}
@media(max-width:900px){
.st-srv-band{flex-direction:column;align-items:flex-start;padding:32px 28px;gap:24px}
.st-srv-band-actions{flex-direction:row;flex-wrap:wrap;width:100%}
.st-srv-btn{flex:1;min-width:140px}
.st-srv-tiles{grid-template-columns:repeat(2,1fr);margin-top:24px}
}
@media(max-width:540px){
.st-srv-band{padding:28px 22px}
.st-srv-band-text h2{font-size:17px;line-height:1.55}
.st-srv-band-text p{font-size:13px}
.st-srv-tile{padding:18px 12px}
.st-srv-tile .title{font-size:12px}
}
/* ═══ FINAL CTA ═══ */
.st-cta-final{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 50%,#3d0a0f 100%);color:#fff;padding:54px 0;position:relative;overflow:hidden}
.st-cta-final::before{content:'';position:absolute;top:-150px;left:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(234,25,23,.15),transparent 60%);pointer-events:none}
.st-cta-final > .lg-container{position:relative;z-index:1;text-align:center}
.st-cta-final h2{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.025em;line-height:1.25;margin-bottom:12px}
.st-cta-final h2 .accent{background:linear-gradient(120deg,#ff4444 0%,#ff7676 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-cta-final p{font-size:14.5px;color:rgba(255,255,255,.85);line-height:1.7;max-width:640px;margin:0 auto 22px}
.st-cta-final-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.st-cta-final-btns a{padding:14px 24px;border-radius:8px;font-size:14.5px;font-weight:800;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:.2s}
.st-cta-final-btns a.primary{background:#ea1917;color:#fff;border:1px solid #ea1917}
.st-cta-final-btns a.primary:hover{background:#b01412;transform:translateY(-1px)}
.st-cta-final-btns a.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}
.st-cta-final-btns a.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
@media(max-width:768px){.st-cta-final{padding:38px 0}.st-cta-final h2{font-size:22px}.st-cta-final p{font-size:13px}}
/* ═══ FAB BAR (하단 고정 구매 CTA) ═══ */
#stFabBar{position:fixed;bottom:0;left:0;right:0;width:100%;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid #e5e7eb;box-shadow:0 -4px 20px rgba(0,0,0,.08);z-index:9999;transform:translateY(110%);transition:transform .4s cubic-bezier(.4,0,.2,1);box-sizing:border-box}
#stFabBar.visible{transform:translateY(0)}
#stFabBar .fab-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;padding:12px 28px;max-width:var(--container);margin:0 auto;box-sizing:border-box}
#stFabBar .fab-icon{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#ea1917,#dc2626);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 3px 8px rgba(234,25,23,.25);flex-shrink:0}
#stFabBar .fab-text{display:flex;flex-direction:column;min-width:0;line-height:1.3;overflow:hidden}
#stFabBar .fab-text strong{font-size:14px;font-weight:800;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stFabBar .fab-text span{font-size:11.5px;color:#6b7280;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#stFabBar .fab-actions{display:flex;gap:10px;flex-shrink:0}
#stFabBar .fab-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:8px;font-size:13px;font-weight:800;text-decoration:none;transition:.2s;white-space:nowrap}
#stFabBar .fab-btn.outline{background:#fff;border:2px solid #ea1917;color:#ea1917}
#stFabBar .fab-btn.outline:hover{background:#fef2f2}
#stFabBar .fab-btn.solid{background:#ea1917;color:#fff;border:2px solid #ea1917;box-shadow:0 4px 12px rgba(234,25,23,.25)}
#stFabBar .fab-btn.solid:hover{background:#b01412;transform:translateY(-1px)}
@media(max-width:768px){
#stFabBar .fab-inner{padding:10px 14px;gap:12px}
#stFabBar .fab-text strong{font-size:13px}
#stFabBar .fab-text span{display:none}
#stFabBar .fab-btn{padding:9px 12px;font-size:12px}
}
@media(max-width:480px){
#stFabBar .fab-inner{grid-template-columns:1fr;padding:10px 12px;gap:0}
#stFabBar .fab-icon,#stFabBar .fab-text{display:none !important}
#stFabBar .fab-actions{display:flex !important;justify-content:center;gap:8px}
#stFabBar .fab-actions a{flex:1;justify-content:center;padding:11px 12px}
}
/* ═══ TOP 버튼 ═══ */
/* #stTopBtn 제거 — 전역 공통 Top 버튼(블루)이 footer 에서 제공되어 중복 차단 */
/* ═══ SEO 토글 (rb-trust 직후 ○○ 복구란) ═══ */
.st-seo-toggle{max-width:980px;margin:0 auto;background:#f6f7f9;border:1px solid #e7e9ee;border-radius:14px;overflow:hidden}
.st-seo-toggle summary{padding:18px 22px;font-size:15px;font-weight:800;color:#0a0a0a;cursor:pointer;display:flex;align-items:center;gap:10px;list-style:none;background:transparent;transition:.2s}
.st-seo-toggle summary::-webkit-details-marker{display:none}
.st-seo-toggle summary::before{content:'\f02d';font-family:'Font Awesome 6 Free';font-weight:900;color:#ea1917;font-size:14px}
.st-seo-toggle summary::after{content:'\f078';font-family:'Font Awesome 6 Free';font-weight:900;margin-left:auto;color:#9ca3af;font-size:12px;transition:.3s}
.st-seo-toggle[open] summary::after{transform:rotate(180deg);color:#ea1917}
.st-seo-toggle summary:hover{background:#fef2f2}
.st-seo-body{padding:22px}
.st-seo-body p{font-size:14px;color:#4a4a4a;line-height:1.85;margin:0 0 16px;font-weight:500}
.st-seo-body p:last-child{margin-bottom:0}
.st-seo-points{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.st-seo-point{background:#fef9f9;border:1px solid #fee2e2;border-radius:10px;padding:14px 16px;display:flex;gap:10px;align-items:flex-start}
.st-seo-point i{color:#ea1917;font-size:14px;margin-top:3px;flex-shrink:0}
.st-seo-point div{font-size:13px;color:#1a1a1a;line-height:1.55;font-weight:600}
.st-seo-point div strong{display:block;font-size:13.5px;font-weight:800;color:#0a0a0a;margin-bottom:3px}
@media(max-width:768px){.st-seo-points{grid-template-columns:1fr}}
/* ═══ ENGINE — 복구센터 엔진 설명 ═══ */
.st-eng-intro{max-width:840px;margin:0 auto 30px;text-align:center;font-size:15.5px;line-height:1.85;color:#374151;font-weight:500}
.st-eng-intro strong{color:#0a0a0a;font-weight:800}
.st-eng-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1080px;margin:0 auto}
.st-eng-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:24px 20px;transition:.2s}
.st-eng-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.06);border-color:#fecaca}
.st-eng-icon{width:48px;height:48px;border-radius:12px;background:#fef2f2;color:#ea1917;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:16px}
.st-eng-step{font-size:11px;font-weight:800;color:#ea1917;letter-spacing:.08em;margin-bottom:6px}
.st-eng-card h3{font-size:16px;font-weight:800;color:#0a0a0a;margin:0 0 8px;line-height:1.35}
.st-eng-card p{font-size:13px;color:#4a4a4a;line-height:1.7;margin:0;font-weight:500}
.st-eng-note{max-width:1080px;margin:22px auto 0;text-align:center;font-size:12.5px;color:#6b7280;font-weight:500}
@media(max-width:1024px){.st-eng-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
.st-eng-intro{font-size:14px;margin-bottom:22px}
.st-eng-grid{grid-template-columns:1fr;gap:12px}
.st-eng-card{padding:18px 16px}
.st-eng-icon{width:42px;height:42px;font-size:18px;margin-bottom:12px}
.st-eng-card h3{font-size:15px}
}
/* 프리미엄 네이비 권위 섹션 (데이터복구센터 기술) */
.st-sec--navy{background:linear-gradient(160deg,#0f172a 0%,#172033 55%,#1e293b 100%);color:#e2e8f0}
.st-sec--navy .st-sec-eyebrow{color:#fca5a5;background:rgba(234,25,23,.14);border-color:rgba(234,25,23,.4)}
.st-sec--navy .st-sec-h2{color:#fff}
.st-sec--navy .st-sec-h2 .accent{color:#fca5a5}
.st-sec--navy .st-sec-lead{color:#94a3b8}
.st-sec--navy .st-eng-intro{color:#cbd5e1}
.st-sec--navy .st-eng-intro strong{color:#fff}
.st-sec--navy .st-eng-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}
.st-sec--navy .st-eng-card:hover{transform:translateY(-2px);border-color:rgba(252,165,165,.45);box-shadow:0 10px 26px rgba(0,0,0,.32)}
.st-sec--navy .st-eng-icon{background:rgba(234,25,23,.16);color:#fca5a5}
.st-sec--navy .st-eng-step{color:#fca5a5}
.st-sec--navy .st-eng-card h3{color:#fff}
.st-sec--navy .st-eng-card p{color:#94a3b8}
.st-sec--navy .st-eng-note{color:#64748b}
.st-trust-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:1000px;margin:0 auto 34px}
.st-trust-badge{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:700;color:#e2e8f0}
.st-trust-badge i{color:#fbbf24;font-size:15px}
@media(max-width:768px){.st-trust-badges{gap:8px;margin-bottom:26px}.st-trust-badge{font-size:12px;padding:8px 13px;gap:7px}.st-trust-badge i{font-size:13px}}
/* ═══ LICENSE 비교표 + 제약 안내 ═══ */
.st-lcmp-head{text-align:center;margin:56px 0 22px}
.st-lcmp-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;color:#ea1917;background:#fef2f2;border:1px solid #fecaca;border-radius:999px;padding:5px 14px;margin-bottom:14px}
.st-lcmp-head h3{font-size:26px;font-weight:800;color:#0a0a0a;letter-spacing:-.01em;margin:0 0 8px;line-height:1.3}
.st-lcmp-head p{font-size:14.5px;color:#4b5563;font-weight:500;margin:0;line-height:1.6}
.st-lcmp-wrap{max-width:980px;margin:0 auto;background:#fff;border:2px solid #e5e7eb;border-radius:18px;overflow:hidden;box-shadow:0 6px 22px rgba(0,0,0,.05)}
.st-lcmp{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.st-lcmp thead th{padding:16px 12px;text-align:center;font-weight:800;font-size:15px;border-bottom:2px solid #e5e7eb;background:#f9fafb;color:#0a0a0a}
.st-lcmp thead th:first-child{text-align:left;width:30%}
.st-lcmp thead th.home{background:#fef2f2;color:#ea1917}
.st-lcmp thead th.biz{background:#eff6ff;color:#1d4ed8}
.st-lcmp thead th.exp{background:#f5f3ff;color:#7c3aed}
.st-lcmp td{padding:15px 12px;border-bottom:1px solid #f3f4f6;text-align:center;color:#374151;vertical-align:middle;font-size:14.5px}
.st-lcmp tr:last-child td{border-bottom:0}
.st-lcmp td:first-child{text-align:left;font-weight:700;color:#1a1a1a;background:#fafafa}
.st-lcmp .yes{color:#15803d;font-weight:900;font-size:16px}
.st-lcmp .no{color:#cbd5e1;font-weight:900;font-size:16px}
.st-lcmp .cnt{font-weight:900;color:#0a0a0a;font-size:15.5px}
.st-lic-note{max-width:980px;margin:16px auto 0;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px 18px;display:flex;gap:12px;align-items:flex-start}
.st-lic-note i{color:#6b7280;font-size:15px;margin-top:2px;flex-shrink:0}
.st-lic-note p{font-size:12.5px;color:#4b5563;line-height:1.7;margin:0;font-weight:500}
.st-lic-note p strong{font-weight:800;color:#1a1a1a}
@media(max-width:768px){
.st-lcmp{font-size:11.5px}
.st-lcmp thead th{padding:11px 6px;font-size:11.5px}
.st-lcmp thead th:first-child{width:34%}
.st-lcmp td{padding:11px 6px;font-size:11.5px}
.st-lcmp td:first-child{padding-left:10px;font-size:11.5px}
.st-lcmp td,.st-lcmp .yes,.st-lcmp .no,.st-lcmp .cnt{font-size:11.5px}
.st-lcmp-head{margin-top:40px}
.st-lcmp-head h3{font-size:20px}
.st-lcmp-head p{font-size:13px}
}
/* ═══ 모바일 스와이프 안내 ═══ */
.st-swipe-hint{display:none}
@media(max-width:768px){
.st-swipe-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 12px 0;font-size:12px;font-weight:700;color:#9ca3af;transition:opacity .45s ease;opacity:1}
.st-swipe-hint.hide{opacity:0;pointer-events:none}
.st-swipe-hint i{color:#ea1917;animation:stSwipeMove 1.5s ease-in-out infinite}
}
@keyframes stSwipeMove{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@media(prefers-reduced-motion:reduce){.st-swipe-hint i{animation:none}}
/* st-redesign-v1 */
/* FILE TYPES — two-column octagon grid */
.st-ftx{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;background:#fff;border:1px solid #e8eaed;border-radius:24px;padding:40px 44px}
.st-ftx-left .st-sec-eyebrow{margin-bottom:14px}
.st-ftx-left .st-sec-h2{text-align:left;font-size:34px;line-height:1.25;margin:0 0 14px}
.st-ftx-lead{font-size:16px;color:#6b7280;line-height:1.85;margin:0 0 24px;font-weight:500}
.st-ftx-cta{display:flex;gap:12px;flex-wrap:wrap}
.st-ftx-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.st-ftx-cell{position:relative;aspect-ratio:1/1;background:#fff;border:2px solid #e8eaed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;clip-path:polygon(25% 0%,75% 0%,100% 25%,100% 75%,75% 100%,25% 100%,0% 75%,0% 25%);transition:transform .2s,border-color .2s}
.st-ftx-cell i{font-size:22px;color:#1251A3}
.st-ftx-cell span{font-size:10px;font-weight:800;color:#374151;letter-spacing:.02em}
.st-ftx-cell:hover{border-color:#fecaca;transform:translateY(-2px)}
@media(max-width:1024px){.st-ftx{grid-template-columns:1fr;gap:28px;padding:32px 28px}.st-ftx-left{text-align:center}.st-ftx-left .st-sec-h2{text-align:center}.st-ftx-cta{justify-content:center}}
@media(max-width:768px){.st-ftx{padding:24px 16px;border-radius:18px}.st-ftx-left .st-sec-h2{font-size:24px}.st-ftx-lead{font-size:14px}.st-ftx-grid{grid-template-columns:repeat(4,1fr);gap:10px}.st-ftx-cell i{font-size:18px}.st-ftx-cell span{font-size:9px}}
@media(max-width:380px){.st-ftx-grid{grid-template-columns:repeat(3,1fr)}}
/* spec-redesign-v1 — 대응 장치 캐러셀 + 증상/헤더 쇼케이스 */
.isx-head{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:32px;max-width:1100px;margin:0 auto 38px}
.isx-head-text{max-width:620px}
.isx-title{text-align:left;font-size:34px;line-height:1.25;margin:14px 0 0}
.isx-head-text .st-sec-lead{text-align:left;margin-top:14px}
.isx-hl{position:relative;display:inline-block;white-space:nowrap}
.isx-hl>span{position:relative;z-index:1}
.isx-hl>svg{position:absolute;left:0;right:0;bottom:-.1em;width:100%;height:.52em;color:#f3a5a5;z-index:0}
.isx-head-art{display:flex;align-items:center;justify-content:center}
.isx-art{position:relative;width:236px;height:200px}
.isx-art-main{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:118px;height:118px;border-radius:28px;background:linear-gradient(150deg,#ef4444,#b3120f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:50px;box-shadow:0 16px 40px rgba(234,25,23,.28)}
.isx-art-badge{position:absolute;width:48px;height:48px;border-radius:14px;background:#fff;border:1px solid #eef0f2;box-shadow:0 8px 20px rgba(15,23,42,.1);display:flex;align-items:center;justify-content:center;font-size:21px;color:#1a1a1a}
.isx-art-badge.b1{top:4px;left:10px}
.isx-art-badge.b2{top:0;right:20px}
.isx-art-badge.b3{bottom:10px;left:0}
.isx-art-badge.b4{bottom:0;right:10px}
.dvc{max-width:1100px;margin:0 auto 16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.dvc-head{background:#fafafa;padding:14px 20px;font-size:14px;font-weight:800;color:#1a1a1a;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;letter-spacing:.02em}
.dvc-head i{color:#ea1917;font-size:16px}
.dvc-viewport{position:relative;overflow:hidden;padding:20px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.dvc-track{display:flex;gap:14px;width:max-content;padding:0 7px;animation:dvc-scroll 34s linear infinite;will-change:transform}
.dvc-viewport:hover .dvc-track{animation-play-state:paused}
.dvc-item{flex:0 0 auto;width:152px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 14px;background:#fafafa;border:1px solid #eef0f2;border-radius:12px;transition:transform .2s,border-color .2s,background .2s}
.dvc-item:hover{border-color:#fecaca;background:#fef2f2;transform:translateY(-2px)}
.dvc-ico{width:52px;height:52px;border-radius:13px;background:#fef2f2;color:#ea1917;display:flex;align-items:center;justify-content:center;font-size:24px}
.dvc-name{font-size:14px;font-weight:800;color:#1a1a1a;line-height:1.2}
.dvc-sub{font-size:11px;color:#6b7280;line-height:1.4}
@keyframes dvc-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.isx{max-width:1100px;margin:0 auto 16px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden}
.isx-subhead{background:#fafafa;padding:14px 20px;font-size:14px;font-weight:800;color:#1a1a1a;display:flex;align-items:center;gap:10px;border-bottom:1px solid #e5e7eb;letter-spacing:.02em}
.isx-subhead i{color:#ea1917;font-size:16px}
.isx-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px 18px;padding:24px 22px}
.isx-item{display:flex;align-items:flex-start;gap:12px}
.isx-ico{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:#fef2f2;color:#ea1917;display:flex;align-items:center;justify-content:center;font-size:17px}
.isx-name{font-size:13.5px;font-weight:800;color:#1a1a1a;margin:0;line-height:1.3}
.isx-desc{font-size:12px;color:#6b7280;margin:4px 0 0;line-height:1.5}
@media(max-width:1024px){.isx-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){
.isx-head{grid-template-columns:1fr;gap:22px}
.isx-title{font-size:26px}
.isx-art{width:200px;height:170px}
.isx-art-main{width:100px;height:100px;font-size:42px}
}
@media(max-width:768px){
.isx-grid{grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:20px 16px}
.dvc-item{width:130px;padding:14px 10px}
.dvc-ico{width:44px;height:44px;font-size:20px}
}
@media(max-width:560px){.isx-head-art{display:none}}
@media(max-width:430px){.isx-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
.dvc-track{animation:none;width:auto}
.dvc-viewport{overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;overscroll-behavior-x:contain}
}
@media(max-width:480px){.st-hero-h1{font-size:42px}}
@media(max-width:360px){.st-hero-h1{font-size:36px}}
/* ─────────────────────────────────────────────────────
Block 2 — width-guard (모바일 가로폭 안전망)
───────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════
★ RAID/PRO/TECH와 동일한 좌우 폭 통일
- .lg-container/.container 모바일 좌우 12px (네이버 패턴)
- 가로 오버플로 차단 + box-sizing 안전망
════════════════════════════════════════════════════════ */
html, body { overflow-x: clip !important; max-width: 100vw !important; }
*, *::before, *::after { min-width: 0 !important; box-sizing: border-box !important; }
img, video, iframe, canvas, svg { max-width: 100% !important; height: auto !important; }
@media (max-width: 768px) {
.lg-container, .container {
padding-left: 12px !important;
padding-right: 12px !important;
max-width: 100vw !important;
}
.st-trustbar-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
max-width: 100% !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
.st-trustcard { padding: 14px 10px !important; min-width: 0 !important; }
.st-trustcard-main { font-size: 22px !important; word-break: keep-all !important; }
.st-trustcard-label { font-size: 11px !important; line-height: 1.35 !important; word-break: keep-all !important; }
.st-trustcard-ic { width: 34px !important; height: 34px !important; font-size: 15px !important; }
table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100% !important; }
.st-srv-band {
flex-direction: column !important;
align-items: stretch !important;
padding: 24px 18px !important;
gap: 18px !important;
text-align: left !important;
}
.st-srv-band-text { text-align: left !important; align-items: flex-start !important; }
.st-srv-band-actions { width: 100% !important; flex-direction: column !important; }
.st-srv-band-actions a { width: 100% !important; justify-content: center !important; }
.st-srv-tiles { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-top: 20px !important; }
.st-cta-final h2 { font-size: 22px !important; line-height: 1.3 !important; }
.st-cta-final-btns { flex-direction: column !important; gap: 8px !important; }
.st-cta-final-btns a { width: 100% !important; justify-content: center !important; }
}
@media (max-width: 480px) {
.st-trustcard-main { font-size: 20px !important; }
.st-trustcard-label { font-size: 10.5px !important; }
}
@media (max-width: 380px) {
.st-trustbar-grid { grid-template-columns: 1fr !important; }
.st-srv-tiles { grid-template-columns: 1fr !important; }
}
/* ─────────────────────────────────────────────────────
Block 3 — standard-mods (페이지별 보강)
───────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════
STANDARD 사용자 지정 모드별 보강
- PC에서 두 모드 UI 슬라이드 2개 동시 표시
- 복구 사례 카드 이미지 영역 숨김(.no-img)
- 슬라이드 안내 chip 회색 통일 (#cases도 동일)
════════════════════════════════════════════════════════ */
/* ① PC + 모바일 동일 — 두 모드 슬라이드 1개씩 표시 + 좌우 슬라이드 + 화살표 버튼 */
.st-sol-img--slider .st-sol-slide {
flex: 0 0 100% !important;
scroll-snap-align: center !important;
}
/* 안내 chip — 모바일 전용 */
@media (min-width: 901px) {
.st-swipe-hint { display: none !important; }
}
/* ★ 슬라이더를 감싸는 wrapper — 화살표를 슬라이더 외부에 두기 위함
(슬라이더 안에 두면 슬라이더가 스크롤될 때 화살표도 같이 스크롤되어 사라짐) */
.st-sol-slider-wrap {
position: relative !important;
width: 100% !important;
}
/* 좌·우 화살표 버튼 — JS가 동적으로 wrapper에 추가 */
.st-sol-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.96);
border: 1px solid #e5e7eb;
color: #1a1a1a;
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 12px rgba(0,0,0,.22);
font-size: 15px;
transition: transform .15s, box-shadow .15s, background .15s, opacity .15s;
padding: 0;
}
.st-sol-nav-btn:hover {
transform: translateY(-50%) scale(1.08);
box-shadow: 0 5px 16px rgba(0,0,0,.28);
background: #fff;
}
.st-sol-nav-btn.prev { left: 10px; }
.st-sol-nav-btn.next { right: 10px; }
.st-sol-nav-btn:disabled {
opacity: .3;
cursor: default;
box-shadow: 0 2px 6px rgba(0,0,0,.1);
}
.st-sol-nav-btn:disabled:hover {
transform: translateY(-50%);
background: rgba(255,255,255,.96);
}
@media (max-width: 900px) {
/* 모바일은 터치 스와이프 — 화살표 숨김 */
.st-sol-nav-btn { display: none !important; }
}
/* ①-B 두 모드 슬라이더 안내(.st-swipe-hint) — #cases 안내와 동일 디자인 + 위치 보정 */
.st-swipe-hint {
color: #9ca3af !important;
font-weight: 500 !important;
font-size: 12px !important;
font-family: "Pretendard","Noto Sans KR",sans-serif !important;
text-align: center !important;
justify-content: center !important;
margin: 12px auto 0 !important;
letter-spacing: 0 !important;
}
.st-swipe-hint i { display: none !important; }
.st-swipe-hint::before {
content: "↔ ";
font-style: normal;
color: #9ca3af;
font-weight: 500;
}
/* ★ 핵심 위치 보정 — wrap + hint 모두 order:3 부여
wrap 다음에 hint가 DOM 형제로 위치 → 같은 order 내 DOM 순서대로 표시
결과: 01 → 제목 → 이미지(wrap) → 안내(hint) → 설명 → 리스트 → 푸터 */
@media (max-width: 900px) {
.st-sol > .st-sol-slider-wrap,
.st-sol > .st-swipe-hint {
order: 3 !important;
width: 100% !important;
}
}
/* ★ 표 정상 표시 — width-guard의 `table { display:block }` 부작용 해결
.st-cpt(체험판 비교) / .st-lut(시리즈 비교) / .st-rr-sum-table(증상별) / .st-lcmp(라이선스)
은 table 레이아웃으로 복원, 부모 wrap이 overflow 처리 */
.st-cpt-wrap, .st-lut-wrap, .st-rr-sum-wrap, .st-lcmp-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
max-width: 100% !important;
}
.st-cpt, .st-lut, .st-rr-sum-table, .st-lcmp {
display: table !important;
width: 100% !important;
table-layout: fixed !important;
}
.st-cpt thead, .st-lut thead, .st-rr-sum-table thead, .st-lcmp thead { display: table-header-group !important; }
.st-cpt tbody, .st-lut tbody, .st-rr-sum-table tbody, .st-lcmp tbody { display: table-row-group !important; }
.st-cpt tr, .st-lut tr, .st-rr-sum-table tr, .st-lcmp tr { display: table-row !important; }
.st-cpt th, .st-cpt td,
.st-lut th, .st-lut td,
.st-rr-sum-table th, .st-rr-sum-table td,
.st-lcmp th, .st-lcmp td { display: table-cell !important; }
@media (max-width: 768px) {
/* 모바일 표 셀 패딩·폰트 */
.st-cpt th, .st-cpt td,
.st-lut th, .st-lut td,
.st-rr-sum-table th, .st-rr-sum-table td {
padding: 9px 8px !important;
font-size: 11.5px !important;
line-height: 1.45 !important;
word-break: keep-all !important;
}
.st-cpt th:first-child, .st-cpt td:first-child,
.st-lut th:first-child, .st-lut td:first-child,
.st-rr-sum-table th:first-child, .st-rr-sum-table td:first-child {
text-align: left !important;
padding-left: 12px !important;
}
.st-rr-sum-table th:last-child,
.st-rr-sum-table td:last-child {
text-align: center !important;
padding-right: 12px !important;
}
.st-rr-poss { font-size: 11px !important; padding: 4px 9px !important; white-space: nowrap !important; }
}
@media (max-width: 480px) {
.st-cpt th, .st-cpt td,
.st-lut th, .st-lut td,
.st-rr-sum-table th, .st-rr-sum-table td {
padding: 7px 6px !important;
font-size: 10.5px !important;
}
.st-rr-poss { font-size: 10px !important; padding: 3px 7px !important; }
}
/* ② 복구 사례 카드 이미지 제거형(.no-img) */
.st-case-card.no-img .st-case-img { display: none !important; }
.st-case-card.no-img .st-case-body { padding-top: 24px !important; }
.st-case-card.no-img {
border: 1.5px solid #e5e7eb !important;
background: linear-gradient(180deg, #ffffff 0%, #fef9f9 100%) !important;
}
.st-case-card.no-img:hover {
border-color: #fecaca !important;
box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
}
/* ③ 복구 사례 안내 — 슬라이더 이미지 바로 아래에 표시 (회색 통일) */
@media (max-width: 900px) {
/* 헤더 영역의 빨간 chip 안내 제거 */
#cases .st-sec-head::after { content: none !important; display: none !important; }
/* 좌·우 부유 화살표 제거 */
#cases .lg-container::before,
#cases .lg-container::after { display: none !important; }
/* 슬라이더 직후 형제(.st-case-foot)에 안내 표시 */
#cases .st-case-foot {
position: relative !important;
}
#cases .st-case-foot::before {
content: "↔ 좌우로 밀어서 더 보기";
display: block;
font-family: "Pretendard","Noto Sans KR",sans-serif;
font-weight: 500;
font-size: 12px;
color: #9ca3af;
margin: 14px auto 14px;
text-align: center;
letter-spacing: 0;
}
}
/* ─────────────────────────────────────────────────────
Block 4 — mobile-5fix (모바일 5가지 수정 패치)
───────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════
★ STANDARD 모바일 5가지 수정 (사용자 지정)
1) 실제 복구 사례 — 가로 스와이프 + 좌우 화살표 + 카드 동일 높이
2) 다음 단계 버튼 색상 명확
3) 지원 OS·파일시스템 헤더 중앙 정렬
4) 시리즈 비교표 특수 암호화 볼륨 small 줄바꿈
5) 데이터 복구 서비스 텍스트 — 모바일 왼쪽 정렬 (이전 좌측 유지)
════════════════════════════════════════════════════════ */
/* ─── 1) 실제 복구 사례 — 모바일 가로 스와이프 + 카드 100% 통일 ─── */
/* (PC 포함) 카드 동일 높이 정렬 — RESULT 박스가 항상 카드 하단 고정 */
.st-case-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.st-case-body {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.st-case-steps {
flex: 1 1 auto !important;
}
.st-case-result {
margin-top: auto !important;
}
.st-case-grid {
align-items: stretch !important;
}
/* 타이틀 한 줄 강제 (PC 포함, 폭 부족 시 ellipsis) */
.st-case-h3 {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* RESULT 2줄 통일 —
강제 줄바꿈 + min-height 보장 */
.st-case-result-main {
min-height: 2.8em !important;
}
@media (max-width: 900px) {
/* 안내 chip */
#cases .st-sec-head { position: relative; }
#cases .st-sec-head::after {
content: "\f0a4 좌우로 밀어보세요 \f0a5";
font-family: "Pretendard","Noto Sans KR",sans-serif;
font-weight: 700;
font-size: 12.5px;
color: #ea1917;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 999px;
padding: 6px 14px;
margin-top: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: .02em;
animation: stCaseHint 1.8s ease-in-out infinite;
}
#cases .st-case-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 12px;
gap: 14px !important;
padding: 4px 12px 16px !important;
margin: 0 -12px !important;
scrollbar-width: thin;
align-items: stretch !important;
}
#cases .st-case-grid::-webkit-scrollbar { height: 4px; }
#cases .st-case-grid::-webkit-scrollbar-thumb { background: #fecaca; border-radius: 999px; }
#cases .st-case-card {
flex: 0 0 86% !important;
max-width: 86% !important;
scroll-snap-align: start;
margin: 0 !important;
}
/* 메타 chip — 한 줄 강제, 폰트·패딩 축소 */
#cases .st-case-meta {
flex-wrap: nowrap !important;
overflow: hidden !important;
gap: 4px !important;
}
#cases .st-case-meta span {
font-size: 10px !important;
padding: 3px 7px !important;
gap: 3px !important;
white-space: nowrap !important;
flex-shrink: 1 !important;
min-width: 0 !important;
}
#cases .st-case-meta span i { font-size: 9px !important; }
/* 카드 본문 padding 통일 */
#cases .st-case-body { padding: 14px 14px 14px !important; gap: 10px !important; }
/* 타이틀 한 줄 + 폰트 조정 */
#cases .st-case-h3 {
font-size: 14.5px !important;
line-height: 1.3 !important;
letter-spacing: -.015em !important;
}
/* 상황·진행 step 폰트·줄간격 통일 + 3줄 강제 */
#cases .st-case-steps {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
#cases .st-case-step {
font-size: 12.5px !important;
line-height: 1.55 !important;
gap: 8px !important;
display: flex !important;
align-items: flex-start !important;
}
#cases .st-case-step > div {
flex: 1 1 auto !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
min-height: calc(12.5px * 1.55 * 3) !important; /* 3줄 고정 */
}
#cases .st-case-step-no {
flex-shrink: 0 !important;
}
/* RESULT 2줄 통일 */
#cases .st-case-result {
padding: 10px 12px !important;
gap: 8px !important;
}
#cases .st-case-result-main {
font-size: 12.5px !important;
line-height: 1.45 !important;
min-height: 2.9em !important;
}
#cases .st-case-result-label {
font-size: 10px !important;
}
/* 이미지 영역 */
#cases .st-case-img { aspect-ratio: 16/9 !important; }
/* 좌·우 양쪽 화살표 표시 */
#cases .lg-container { position: relative; }
#cases .lg-container::before,
#cases .lg-container::after {
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: #fff;
color: #ea1917;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
font-size: 14px;
z-index: 5;
pointer-events: none;
}
#cases .lg-container::before {
content: "\f104"; /* chevron-left */
left: 4px;
animation: stCaseArrowL 1.4s ease-in-out infinite;
}
#cases .lg-container::after {
content: "\f105"; /* chevron-right */
right: 4px;
animation: stCaseArrowR 1.4s ease-in-out infinite;
}
}
@keyframes stCaseHint {
0%, 100% { opacity: 1; transform: translateX(0); }
50% { opacity: .65; transform: translateX(4px); }
}
@keyframes stCaseArrowR {
0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
50% { transform: translateY(-50%) translateX(4px); opacity: .7; }
}
@keyframes stCaseArrowL {
0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
50% { transform: translateY(-50%) translateX(-4px); opacity: .7; }
}
/* ─── 2) 다음 단계 버튼 — 모바일 색상 명확 ─── */
@media (max-width: 768px) {
.st5-btn.next {
background: #1a1a2e !important;
color: #fff !important;
border: 1.5px solid #1a1a2e !important;
box-shadow: 0 4px 12px rgba(26,26,46,.25) !important;
font-weight: 800 !important;
}
.st5-btn.next:hover { background: #0f0f1e !important; }
.st5-btn:not(.next):not(.done) {
background: #fff !important;
color: #1a1a2e !important;
border: 1.5px solid #1a1a2e !important;
font-weight: 700 !important;
}
.st5-btn.done {
background: #15a34a !important;
color: #fff !important;
border: 1.5px solid #15a34a !important;
}
}
/* ─── 3) 지원 OS·파일시스템·NAS 헤더 — 모바일 중앙 정렬 ─── */
@media (max-width: 900px) {
#spec .isx-head {
text-align: center !important;
grid-template-columns: 1fr !important;
}
#spec .isx-head-text {
max-width: 100% !important;
margin: 0 auto !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
#spec .isx-head-text .st-sec-eyebrow {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#spec .isx-title {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
#spec .isx-head-text .st-sec-lead {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ─── 4-A) 타사 비교표 — "대응 파일시스템" 행 줄바꿈 + 세로 정렬 ─── */
.st-cmp-cell--us span strong {
display: block;
font-weight: 800;
color: #1a1a1a;
line-height: 1.3;
}
.st-cmp-fs {
display: block !important;
font-size: 11px !important;
font-weight: 500 !important;
color: #6b7280 !important;
margin-top: 4px !important;
line-height: 1.5 !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
letter-spacing: -.01em !important;
max-width: 100%;
}
/* 비교표 모든 행 — 셀이 위쪽 가운데 정렬되도록 통일 (마지막 행 추가 줄에 맞춤) */
@media (max-width: 768px) {
.st-cmp-row {
align-items: stretch !important;
}
.st-cmp-cell--us,
.st-cmp-cell--them {
justify-content: flex-start !important;
padding-top: 14px !important;
padding-bottom: 14px !important;
}
.st-cmp-cell--us span {
width: 100%;
word-break: keep-all;
overflow-wrap: break-word;
}
.st-cmp-fs {
font-size: 10.5px !important;
line-height: 1.55 !important;
margin-top: 5px !important;
}
}
@media (max-width: 480px) {
.st-cmp-fs {
font-size: 9.8px !important;
letter-spacing: -.015em !important;
}
}
/* ─── 4) 시리즈 비교표 — 특수 암호화 볼륨 줄바꿈 ─── */
.st-lut td small {
display: block !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
line-height: 1.45 !important;
margin-top: 4px !important;
}
@media (max-width: 540px) {
.st-lut td small {
font-size: 10px !important;
line-height: 1.4 !important;
letter-spacing: -.01em !important;
}
}
/* ─── 6) 히어로 태그 chip — 모바일 가로 한 줄 표시 ─── */
@media (max-width: 768px) {
.st-hero-tag {
white-space: nowrap !important;
overflow: hidden !important;
max-width: 100% !important;
font-size: 11px !important;
padding: 5px 10px !important;
letter-spacing: -.01em !important;
gap: 6px !important;
}
.st-hero-tag i { font-size: 10.5px !important; }
}
@media (max-width: 480px) {
.st-hero-tag {
font-size: 9.8px !important;
padding: 4px 9px !important;
letter-spacing: -.015em !important;
gap: 5px !important;
}
.st-hero-tag i { font-size: 9.5px !important; }
}
@media (max-width: 380px) {
.st-hero-tag {
font-size: 8.8px !important;
padding: 3.5px 8px !important;
letter-spacing: -.02em !important;
gap: 4px !important;
}
.st-hero-tag i { font-size: 8.5px !important; }
}
@media (max-width: 320px) {
.st-hero-tag {
font-size: 7.8px !important;
padding: 3px 7px !important;
letter-spacing: -.025em !important;
}
.st-hero-tag i { font-size: 7.5px !important; }
}
/* ─── 5) 데이터 복구 서비스 — 모바일 텍스트 왼쪽 정렬 (이전 좌측 유지) ─── */
@media (max-width: 768px) {
.st-srv-band {
text-align: left !important;
align-items: flex-start !important;
}
.st-srv-band-text {
text-align: left !important;
align-items: flex-start !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
}
.st-srv-band-text .st-srv-band-tag {
margin-left: 0 !important;
margin-right: auto !important;
margin-bottom: 14px !important;
}
.st-srv-band-text h2 {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.st-srv-band-text p {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.st-srv-band-actions {
width: 100% !important;
align-items: stretch !important;
}
}
/* ═══ IMAGE ZOOM — 클릭 시 원본 크기 lightbox (SEO 친화 wrap) ═══ */
.st-zoom-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
text-decoration: none;
color: inherit;
cursor: zoom-in;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
user-drag: none;
}
.st-zoom-link picture { display: contents; }
.st-zoom-link img {
transition: opacity .2s;
-webkit-user-drag: none;
user-drag: none;
pointer-events: none; /* 캐러셀 스와이프가 a 로 바로 가도록 (link click 은 a 가 받음) */
}
.st-zoom-link:hover img { opacity: .94; }
/* 우측 상단 반투명 돋보기 배지 — 클릭 가능 시각 신호 */
.st-zoom-badge {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 6px;
height: 32px;
padding: 0 12px 0 10px;
border-radius: 999px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .01em;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 3;
pointer-events: none;
transition: background .2s, transform .2s;
box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.st-zoom-badge i { font-size: 12px; }
.st-zoom-link:hover .st-zoom-badge,
.st-zoom-link:focus-visible .st-zoom-badge {
background: rgba(234, 25, 23, 0.95);
transform: scale(1.05);
}
@media (max-width: 640px) {
.st-zoom-badge { height: 28px; padding: 0 10px 0 9px; font-size: 10.5px; top: 8px; right: 8px; }
.st-zoom-badge i { font-size: 11px; }
}
/* Lightbox modal — 원본 표시 */
#stLightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.93);
z-index: 99999;
align-items: center;
justify-content: center;
padding: 24px;
box-sizing: border-box;
cursor: zoom-out;
animation: stLbFade .18s ease-out;
/* 모바일 핀치줌 명시 허용 */
touch-action: pinch-zoom;
}
#stLightbox.active { display: flex; }
@keyframes stLbFade { from { opacity: 0 } to { opacity: 1 } }
#stLightbox img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
-webkit-user-drag: none;
box-shadow: 0 12px 48px rgba(0,0,0,.5);
border-radius: 4px;
/* 핀치줌 / 더블탭 줌 허용 */
touch-action: pinch-zoom;
}
#stLightboxClose {
position: absolute;
top: 18px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
border: 0;
color: #fff;
font-size: 22px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, transform .2s;
padding: 0;
line-height: 1;
z-index: 2;
}
#stLightboxClose:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.06); }
#stLightboxCaption {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
color: rgba(255,255,255,.85);
font-size: 12px;
letter-spacing: .02em;
padding: 7px 16px;
background: rgba(0,0,0,.55);
border-radius: 20px;
max-width: 88vw;
text-align: center;
pointer-events: none;
line-height: 1.4;
}
#stLightboxLoading {
position: absolute;
color: rgba(255,255,255,.5);
font-size: 13px;
}
@media (max-width: 640px) {
#stLightbox { padding: 12px; }
#stLightboxClose { width: 40px; height: 40px; top: 12px; right: 12px; font-size: 20px; }
#stLightboxCaption { font-size: 11px; bottom: 14px; padding: 6px 14px; }
}