:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel-2:#f8fbff;
  --line:#d9e3f0;
  --line-strong:#c6d4e6;
  --text:#132238;
  --muted:#5f7088;
  --blue:#2357ff;
  --blue-deep:#1736a4;
  --mint:#0f8b8d;
  --soft-blue:#ecf3ff;
  --soft-green:#edf9f6;
  --soft-yellow:#fff8e8;
  --soft-red:#fff1f1;
  --shadow:0 18px 60px rgba(14,32,62,.08);
  --shadow-soft:0 10px 30px rgba(14,32,62,.05);
  --radius:24px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#f6f9fd 0%,#f3f7fb 45%,#eef4fa 100%);
  line-height:1.68;
  font-size:17px;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:20px 18px 64px}
.site-header{position:sticky;top:0;z-index:20;padding-top:12px;margin-bottom:24px}
.topbar{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:14px 18px;border:1px solid rgba(201,214,232,.9);border-radius:22px;
  background:rgba(255,255,255,.85);backdrop-filter: blur(14px);box-shadow:var(--shadow-soft);
}
.brand{display:flex;gap:14px;align-items:center;min-width:0}
.brand-mark{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#1d4eff,#4d8dff 60%,#8dd6ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 24px rgba(35,87,255,.22)}
.brand-copy{display:flex;flex-direction:column;min-width:0}
.brand-title{font-size:20px;font-weight:900;letter-spacing:-.03em}
.brand-sub{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.top-links a{padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;color:#32445d}
.top-links a:hover,.top-links a.active{background:var(--soft-blue);color:var(--blue-deep)}
.hero{
  position:relative;overflow:hidden;padding:44px;border-radius:34px;
  background:linear-gradient(135deg,#0f2d78 0%,#1d4eff 38%,#5da6ff 100%);
  color:#fff;box-shadow:0 25px 60px rgba(17,47,122,.24);
}
.hero::before,.hero::after{content:"";position:absolute;border-radius:999px;pointer-events:none}
.hero::before{width:320px;height:320px;right:-90px;top:-80px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.hero::after{width:220px;height:220px;left:-60px;bottom:-80px;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:28px;align-items:stretch;position:relative;z-index:1}
.badges,.tag-row,.feature-chips,.icon-list,.footer-links,.mini-kpis{display:flex;gap:10px;flex-wrap:wrap}
.badge,.inline-pill,.chip,.kicker{
  display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:800;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18)
}
.kicker{background:rgba(13,28,74,.16)}
.hero h1{margin:14px 0 16px;font-size:clamp(34px,4.2vw,56px);line-height:1.1;letter-spacing:-.04em}
.lead{font-size:19px;line-height:1.78;color:rgba(255,255,255,.96);max-width:860px}
.hero .muted{color:rgba(235,243,255,.85)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:none;border-radius:14px;background:var(--blue);color:#fff;font-weight:900;box-shadow:0 12px 24px rgba(35,87,255,.18);cursor:pointer;line-height:1.3;word-break:keep-all;white-space:normal;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn-secondary{background:#fff;color:#1736a4}
.btn-ghost{background:transparent;color:inherit;border:1px solid rgba(255,255,255,.28);box-shadow:none}
.btn-light{background:#edf4ff;color:#1840ba;box-shadow:none}
.locked-pay{pointer-events:none;opacity:.55}
.hero-panel,.card,.guide-card,.faq-card,.notice-card,.price-card,.flow-box,.support-box,.step-card,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)
}
.hero-panel{padding:28px;color:var(--text);display:flex;flex-direction:column;gap:18px}
.hero-panel h3{margin:0;font-size:22px;letter-spacing:-.03em}
.hero-panel p{margin:0;color:var(--muted)}
.card,.guide-card,.faq-card,.notice-card,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell{padding:26px}
.section{margin-top:32px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}
.section h2{margin:0 0 8px;font-size:31px;letter-spacing:-.04em;word-break:keep-all}
.section h3,.card h3,.guide-card h3,.faq-card h3,.flow-box h3,.support-box h3,.scenario-card h3,.compare-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}
.faq-card{display:flex;flex-direction:column;gap:10px}
.faq-card h3{margin:0;font-size:21px;line-height:1.35;word-break:keep-all}
.faq-card p{margin:0;line-height:1.7}
.muted,.small,.desc,.confirm-status{color:var(--muted)}
.input-help{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:600}
.small{font-size:14px}
.grid-2,.grid-3,.grid-4,.faq-grid,.flow-grid,.support-grid,.scenario-grid,.compare-grid,.image-grid,.install-grid,.purchase-grid,.feature-list{display:grid;gap:16px;align-items:stretch}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3,.scenario-grid,.compare-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.support-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.install-grid{grid-template-columns:1.05fr .95fr}
.feature-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.purchase-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px}
.list,.check-list{margin:0;padding-left:20px;display:grid;gap:10px}
.check-list{list-style:none;padding-left:0}
.check-list li,.highlight-item,.table-note,.flow-item{padding:16px 18px;border-radius:18px;background:var(--panel-2);border:1px solid #e2ebf5}
.flow-item strong{display:block;margin-bottom:4px}
.highlight-item{display:flex;gap:14px;align-items:flex-start}
.highlight-icon{width:42px;height:42px;border-radius:14px;background:var(--soft-blue);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:var(--blue-deep)}
.hero-proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.mini-kpis .kpi,.stat-card{padding:18px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);min-height:110px}
.mini-kpis .kpi strong,.stat-card strong{font-size:16px}
.mini-kpis .kpi span,.stat-card span{display:block;margin-top:6px;color:rgba(235,243,255,.88)}
.stat-card{background:var(--panel);border-color:var(--line);box-shadow:var(--shadow-soft)}
.stat-label{font-size:13px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.stat-number{font-size:34px;font-weight:900;letter-spacing:-.04em;margin:8px 0 6px}
.price-card{display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;padding:32px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.price-card.featured{border-color:#9cc1ff;box-shadow:0 18px 40px rgba(30,93,255,.13);background:linear-gradient(180deg,#ffffff,#f5fbff)}
.price-card.featured::before{display:none}
.money{font-size:38px;font-weight:900;letter-spacing:-.04em;margin:14px 0 0}
.price-card .top{display:flex;flex-direction:column;gap:14px}
.price-card .top > div:first-child{display:flex;flex-direction:column;gap:10px}
.price-card .chip{background:#edf4ff;color:#1840ba;border:1px solid #d5e3ff;padding:6px 12px;font-size:12px}
.price-card h3{margin:0;font-size:21px;line-height:1.35;word-break:keep-all}
.price-card .plan-summary{margin:0;font-size:14px;font-weight:600;line-height:1.7;color:var(--text)}
.price-card .list{margin:4px 0 0;padding-left:0;display:grid;gap:10px}
.price-card .list li{padding:10px 0;background:none;border:none;font-size:14px;line-height:1.65}
.price-card .list strong{font-weight:700;color:#0f2040}
.price-card .btn{margin-top:12px;min-height:48px;width:100%}
.flow-box,.support-box{padding:24px}
.flow-step{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:14px;background:var(--soft-blue);font-weight:900;color:var(--blue-deep);margin-bottom:12px}
.notice-banner{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--soft-yellow);border:1px solid #f0d996;color:#6b5508;font-size:13px}
.notice-banner strong{font-size:14px;font-weight:700}
.notice-card{background:#fffdf8}
.warning-grid{display:grid;gap:8px}
.warning-item{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:16px;background:var(--panel-2);border:1px solid #e2ebf5;cursor:pointer;min-height:auto}
.warning-item input{margin-top:6px;width:20px;height:20px;flex-shrink:0}
.warning-item div{display:grid;gap:8px}
.warning-item strong{display:block;font-size:14px;font-weight:800;color:#0f2040;margin:0;word-break:keep-all}
.warning-item .muted{font-size:13px;margin:4px 0 0;line-height:1.6}
.input-block{display:grid;gap:6px;margin-bottom:0}
.input-label{font-size:13px;font-weight:800;color:#31445d}
.confirm-input{
  width:100%;min-height:44px;border-radius:12px;border:1px solid var(--line-strong);background:#fff;padding:0 14px;
  font:inherit;color:var(--text);outline:none;box-shadow:inset 0 1px 2px rgba(13,32,59,.03)
}
textarea.confirm-input{min-height:160px;padding:14px 16px;resize:vertical}
.confirm-input:focus{border-color:#7da7ff;box-shadow:0 0 0 4px rgba(35,87,255,.1)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid-1{display:grid;grid-template-columns:1fr;gap:14px}
.button-grid{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.button-grid .btn{flex:1 1 0;min-height:40px;font-size:13px}
.confirm-status,.status-ok,.status-warn,.status-info{padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel-2);font-size:13px}
.status-ok{background:var(--soft-green);border-color:#b6e8d8}
.status-warn{background:var(--soft-yellow);border-color:#f0d996}
.status-info{background:var(--soft-blue);border-color:#cfe0ff}
.tableish{display:grid;gap:12px}
.table-row{display:grid;grid-template-columns:240px 1fr;gap:18px;padding:16px 18px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.table-row strong{font-size:15px}
.compare-card{background:linear-gradient(180deg,#fff,#f8fbff)}
.compare-card-strong,.guide-accent{background:linear-gradient(180deg,#edf4ff,#ffffff);border-color:#cfe0ff}
.scenario-card,.guide-card{background:linear-gradient(180deg,#ffffff,#fbfdff);display:flex;flex-direction:column;gap:12px}
.scenario-card h3{margin:0;line-height:1.35;font-size:21px;word-break:keep-all}
.scenario-card p{margin:0;line-height:1.7}
.page-hero{padding:34px;background:linear-gradient(180deg,#f6faff,#ffffff);border-radius:30px;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.cta-band{padding:26px;background:linear-gradient(135deg,#122f86,#2557f8 62%,#76b3ff);color:#fff}
.cta-band .muted{color:rgba(242,246,255,.88)}
.image-card{padding:0;overflow:hidden}
.image-card img{width:100%;height:auto;display:block}
.image-card .caption{padding:16px 18px}
.footer{margin-top:42px;padding:28px 24px;border-radius:28px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:20px}
.footer-title{font-size:18px;font-weight:900;margin:0 0 10px}
.footer-meta{display:grid;gap:6px;font-size:14px;color:var(--muted)}
.footer-links a{padding:9px 0;color:#31445d;font-weight:700}
.footer-copy{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.inline-code{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;background:#eef3fb;border:1px solid #dce7f5;font-size:13px;color:#2f435d}
.anchor-links{display:flex;gap:10px;flex-wrap:wrap}
.anchor-links a{padding:10px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px;font-weight:800;color:#35506d}
.anchor-links a:hover{background:var(--soft-blue);border-color:#cfe0ff}
.hr{height:1px;background:var(--line);margin:10px 0 0}
@media (max-width:1100px){
  .hero-grid,.grid-4,.grid-3,.grid-2,.flow-grid,.support-grid,.scenario-grid,.compare-grid,.install-grid,.purchase-grid,.feature-list,.form-grid,.footer-grid{grid-template-columns:1fr}
  .hero-proof{grid-template-columns:1fr}
  .wrap{padding:18px 14px 50px}
}
@media (max-width:760px){
  body{font-size:16px;line-height:1.62}
  .site-header{position:static}
  .topbar{align-items:flex-start}
  .top-links{width:100%;display:grid;grid-template-columns:1fr 1fr;justify-content:stretch}
  .top-links a{text-align:center}
  .hero,.page-hero,.card,.guide-card,.faq-card,.notice-card,.price-card,.flow-box,.support-box,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell,.footer{padding:20px;border-radius:22px}
  .hero h1{font-size:34px}
  .cta-row,.button-grid,.feature-chips,.footer-links,.badges,.anchor-links,.mini-kpis{display:grid;grid-template-columns:1fr}
  .btn{width:100%}
  .table-row{grid-template-columns:1fr;gap:8px}
}


/* ===== v2 premium sales polish ===== */
:root{
  --bg:#f4f7fb;
  --panel:#ffffff;
  --panel-2:#f6f9fe;
  --text:#0d1b2a;
  --muted:#55657b;
  --line:#dbe5f0;
  --line-strong:#bfd0e2;
  --blue:#1d4ed8;
  --blue-deep:#102a6b;
  --blue-soft:#edf4ff;
  --navy:#0b1f4d;
  --shadow-soft:0 14px 38px rgba(15,35,72,.08);
  --shadow-card:0 20px 50px rgba(12,34,71,.10);
}
body{background:radial-gradient(circle at top left,#f8fbff,transparent 26%), linear-gradient(180deg,#f6f9fd 0%,#eef3f9 100%); color:var(--text);}
.wrap{max-width:1180px;padding-top:26px;}
.topbar{padding:14px 18px}
.brand-title{font-size:22px;letter-spacing:-.04em}
.brand-sub{font-size:12px;letter-spacing:.01em}
.plan-badge{position:relative;display:inline-block;background:var(--blue);color:#fff;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:800;margin-bottom:16px}
.plan-badge.popular{background:#ff6b35}
.plan-summary{margin:12px 0;font-size:14px;color:var(--text);font-weight:600}
.plan-guide{margin-top:20px}
.plan-guide h3{margin:0 0 12px;font-size:18px}
.plan-guide ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.compare-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:26px}
.compare-panel h2{margin:0 0 22px;font-size:24px;line-height:1.3}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.compare-grid h3{margin:0 0 14px;font-size:18px;line-height:1.35;word-break:keep-all}
.compare-grid ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.top-links a{min-height:40px;padding:0 16px;border-radius:999px;font-weight:800;color:#243b55;background:transparent;border:1px solid transparent;transition:all 0.2s ease}
.top-links a.active{background:#edf4ff;border:1px solid #c9dcff;color:#1840ba;box-shadow:0 4px 12px rgba(30,90,255,.12)}
.top-links a:hover{background:#f8faff;border-color:#dde7ff;color:#1840ba}
.hero-premium{padding:52px;border-radius:36px;background:linear-gradient(135deg,#091d47 0%,#12336f 38%,#1d56d8 78%,#8dc0ff 100%);box-shadow:0 28px 72px rgba(11,31,77,.24)}
.hero-premium::before{width:380px;height:380px;right:-60px;top:-90px;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%)}
.hero-premium::after{width:260px;height:260px;left:-70px;bottom:-90px;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%)}
.hero-grid-wide{grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);gap:34px}
.eyebrow{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);font-size:13px;font-weight:900;letter-spacing:.02em;color:#fff}
.text-accent{color:#bfe0ff}
.hero-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.hero-summary-card{padding:20px 18px;border-radius:20px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.hero-summary-card strong{display:block;font-size:15px;margin-bottom:8px;color:#fff}
.hero-summary-card span{display:block;font-size:14px;line-height:1.7;color:rgba(238,244,255,.88)}
.hero-inline-links{margin-top:18px}
.hero-inline-links a{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18);color:#fff}
.hero-inline-links a:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24)}
.hero-panel-premium{padding:30px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,249,255,.96));box-shadow:var(--shadow-card)}
.hero-panel-top h3{font-size:24px;line-height:1.35}
.badge-dark{background:#eaf1ff;color:#173a9a;border-color:#d0deff}
.decision-list{display:grid;gap:12px}
.decision-item{padding:18px 20px;border-radius:18px;background:#fff;border:1px solid #e2ebf6}
.decision-item strong{display:block;font-size:15px;margin-bottom:6px;color:#0f2040;word-break:keep-all}
.decision-item span{display:block;font-size:14px;line-height:1.7;color:#56677d}
.hero-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hero-kpis > div{padding:14px;border-radius:18px;background:#eef4ff;border:1px solid #d5e3ff}
.hero-kpis span{display:block;font-size:12px;font-weight:800;color:#567}
.hero-kpis strong{display:block;margin-top:6px;font-size:22px;letter-spacing:-.03em;color:#123780}
.section{margin-top:44px}
.section-surface{padding:32px;border-radius:32px;background:linear-gradient(180deg,#f9fbff,#f2f6fc);border:1px solid #dde7f2;box-shadow:var(--shadow-soft)}
.section-label{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#eef4ff;color:#1b4ccf;font-size:12px;font-weight:900;letter-spacing:.03em;margin-bottom:10px}
.feature-block{padding:28px;border-radius:24px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #dde7f2;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:12px}
.feature-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#eaf1ff;color:#1840ba;font-size:20px;font-weight:900;margin-bottom:4px}
.feature-block h3{font-size:21px;margin:0;line-height:1.35;word-break:keep-all}
.feature-block p{margin:0;line-height:1.7}
.compare-panel{padding:28px;border-radius:24px;border:1px solid #dde7f2;box-shadow:var(--shadow-soft)}
.compare-panel-positive{background:linear-gradient(180deg,#ffffff,#f5fbff)}
.compare-panel-neutral{background:linear-gradient(180deg,#fffefb,#fff9ee)}
.step-line-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.step-line-card{position:relative;padding:26px;border-radius:24px;background:#fff;border:1px solid #dde7f2;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:10px}
.step-line-no{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:16px;background:#eaf1ff;color:#1840ba;font-size:18px;font-weight:900;margin-bottom:6px}
.step-line-card h3{font-size:21px;margin:0;line-height:1.35;word-break:keep-all}
.step-line-card p{margin:0;line-height:1.7}
.chip-soft{background:#eff5ff;color:#1840ba;border-color:#d5e3ff}
.cta-band-strong{padding:30px 32px;border-radius:30px;background:linear-gradient(135deg,#0f2560,#1743b5 55%,#3f7dff 100%);box-shadow:var(--shadow-card)}
.purchase-box{margin-top:14px;background:#fff;border:1px solid #e8eef6;border-radius:24px;box-shadow:0 6px 20px rgba(13,35,72,.06);padding:28px}
.notice-banner{margin-bottom:18px}
.footer{margin-top:50px;border-radius:30px;background:linear-gradient(180deg,#ffffff,#f8fbff)}
.footer-title{font-size:19px}
.table-shell,.card,.guide-card,.faq-card,.notice-card,.price-card,.flow-box,.support-box,.scenario-card,.compare-card,.summary-card,.stat-card{box-shadow:var(--shadow-soft)}
@media (max-width:1100px){
  .hero-summary-grid,.step-line-grid,.hero-kpis{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-premium{padding:26px 20px;border-radius:24px}
  .eyebrow{font-size:12px}
  .hero-summary-grid,.hero-kpis,.step-line-grid{grid-template-columns:1fr}
  .top-links{grid-template-columns:1fr 1fr}
}

/* ===== v3 mobile polish + sales layout fixes ===== */
.site-header{margin-bottom:20px}
.topbar{position:relative;isolation:isolate}
.top-links a{display:inline-flex;align-items:center;justify-content:center;line-height:1.2}
.page-hero .hero-grid{align-items:start}
.plan-guide{margin-top:22px;padding:20px 22px;border-radius:22px;background:#f7fbff;border:1px solid #dce8f8}
.plan-guide h3{margin:0 0 10px;font-size:19px}
.plan-guide .check-list{gap:8px}
.price-card{min-height:100%;padding:28px 26px 24px;gap:12px}
.price-card .plan-badge{align-self:flex-start;margin:0 0 6px;box-shadow:0 8px 18px rgba(29,78,216,.15)}
.price-card .chip{align-self:flex-start}
.price-card .top{gap:10px}
.price-card .money{margin:6px 0 0;font-size:36px;line-height:1.05}
.price-card .plan-summary{font-size:15px;line-height:1.65;margin-top:2px}
.price-card .list{gap:8px;margin-top:2px;flex:1 1 auto}
.price-card .list li{font-size:15px;line-height:1.6;padding:6px 0}
.price-card .btn{margin-top:auto}
.purchase-box{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(180deg,#fbfdff,#f7fbff)}
.purchase-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:18px}
.purchase-grid > div{padding:22px;border:1px solid var(--line);border-radius:22px;background:#fff}
.warning-grid{gap:10px}
.warning-item{padding:12px 14px;border-radius:18px;min-height:auto;gap:10px}
.warning-item input{margin-top:2px;width:18px;height:18px}
.warning-item strong{font-size:15px;line-height:1.45}
.warning-item .muted{font-size:13px;line-height:1.55;margin:0}
.input-block{gap:6px;margin-bottom:12px}
.input-label{font-size:14px}
.confirm-input{min-height:46px;padding:0 14px}
.button-grid{gap:10px}
.button-grid .btn{min-height:42px;font-size:13px;padding:0 14px}
.confirm-status,.status-ok,.status-warn,.status-info{padding:12px 14px;font-size:13px;line-height:1.55}
.notice-banner{margin-top:14px}
.footer-grid{align-items:start}
@media (max-width:980px){
  .topbar{padding:14px 16px;flex-direction:column;align-items:stretch}
  .brand{width:100%}
  .top-links{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none}
  .top-links::-webkit-scrollbar{display:none}
  .top-links a{flex:0 0 auto;padding:0 14px;min-height:38px;font-size:13px}
  .hero-grid{grid-template-columns:1fr}
  .grid-3,.compare-grid,.scenario-grid,.support-grid,.flow-grid,.purchase-grid{grid-template-columns:1fr}
  .price-card{padding:24px 22px 20px}
  .purchase-grid > div{padding:18px}
}
@media (max-width:760px){
  .wrap{padding:14px 12px 42px}
  .site-header{margin-bottom:14px}
  .topbar{padding:12px 12px 14px;border-radius:20px}
  .brand-mark{width:38px;height:38px;border-radius:12px}
  .brand-title{font-size:18px}
  .brand-sub{font-size:11px;white-space:normal;line-height:1.4}
  .top-links{width:100%;display:flex;overflow-x:auto;flex-wrap:nowrap;gap:8px;padding-top:2px}
  .top-links a{min-height:36px;padding:0 12px;font-size:13px}
  .hero,.page-hero,.card,.guide-card,.faq-card,.notice-card,.price-card,.flow-box,.support-box,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell,.footer,.purchase-box{padding:18px;border-radius:20px}
  .hero h1{font-size:30px}
  .lead{font-size:16px;line-height:1.65}
  .section{margin-top:22px}
  .section h2{font-size:25px}
  .page-hero .hero-grid{gap:18px}
  .plan-guide{padding:16px;border-radius:18px}
  .plan-guide h3{font-size:17px}
  .price-card{padding:20px 18px 18px;border-radius:20px}
  .price-card .money{font-size:32px}
  .price-card h3{font-size:19px}
  .price-card .plan-summary,.price-card .list li{font-size:14px}
  .price-card .btn{min-height:46px}
  .purchase-box{padding:14px}
  .purchase-grid{gap:14px}
  .purchase-grid > div{padding:16px;border-radius:18px}
  .warning-grid{gap:8px}
  .warning-item{padding:12px 12px;border-radius:16px;align-items:flex-start}
  .warning-item strong{font-size:14px}
  .warning-item .muted{font-size:12px;line-height:1.5}
  .input-block{margin-bottom:10px}
  .input-label{font-size:13px}
  .confirm-input{min-height:42px;font-size:15px}
  .button-grid{grid-template-columns:1fr 1fr 1fr !important;display:grid}
  .button-grid .btn{min-height:40px;font-size:12px;padding:0 10px}
  .cta-row{gap:10px}
  .cta-row .btn{min-height:44px;font-size:14px}
  .confirm-status,.status-ok,.status-warn,.status-info{padding:11px 12px;font-size:12px}
  .table-row{padding:14px 16px}
}
@media (max-width:520px){
  body{font-size:15px}
  .hero h1{font-size:27px}
  .section h2{font-size:22px}
  .top-links a{font-size:12px;padding:0 11px}
  .price-card{padding:18px 16px}
  .price-card .plan-badge{padding:5px 12px;font-size:11px}
  .price-card .chip{font-size:11px}
  .price-card .money{font-size:30px}
  .price-card .btn{font-size:14px}
  .purchase-grid > div{padding:14px}
  .button-grid{grid-template-columns:1fr !important}
  .button-grid .btn{width:100%}
}

/* ===== v4 mobile hardening for live Pages ===== */
html,body{max-width:100%;overflow-x:hidden}
body{-webkit-text-size-adjust:100%}
.wrap{width:min(100%,1180px)}
.site-header,.topbar,.hero,.page-hero,.section-surface,.compare-panel,.purchase-box,.footer,.price-card,.card,.guide-card,.faq-card,.notice-card,.flow-box,.support-box,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell{max-width:100%}
.top-links{min-width:0}
.top-links a{white-space:nowrap}
.hero-grid,.hero-grid-wide,.purchase-grid,.compare-grid,.grid-2,.grid-3,.grid-4,.flow-grid,.support-grid,.scenario-grid,.feature-list,.install-grid,.footer-grid,.hero-summary-grid,.hero-kpis,.step-line-grid,.form-grid{min-width:0}
.hero-grid > *, .hero-grid-wide > *, .purchase-grid > *, .compare-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .flow-grid > *, .support-grid > *, .scenario-grid > *, .feature-list > *, .install-grid > *, .footer-grid > *, .hero-summary-grid > *, .hero-kpis > *, .step-line-grid > *, .form-grid > *{min-width:0}
.lead,.plan-summary,.hero-summary-card span,.decision-item span,.card p,.guide-card p,.faq-card p,.notice-card p,.flow-box p,.support-box p,.scenario-card p,.compare-card p,.summary-card p,.stat-card p,.muted{word-break:keep-all;overflow-wrap:anywhere}
.table-shell,.compare-panel,.purchase-box{overflow:hidden}
.button-grid .btn,.cta-row .btn{word-break:keep-all}

@media (max-width:900px){
  .wrap{padding:14px 12px 36px}
  .site-header{position:static;top:auto;padding-top:0}
  .topbar{padding:12px 12px 14px;gap:10px;flex-direction:column;align-items:stretch;border-radius:20px}
  .brand{gap:12px}
  .brand-copy{gap:2px}
  .brand-title{font-size:18px}
  .brand-sub{font-size:11px;line-height:1.35;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .top-links{width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;padding:2px 0 2px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top-links::-webkit-scrollbar{display:none}
  .top-links a{flex:0 0 auto;min-height:36px;padding:0 12px;font-size:13px;border-radius:999px}

  .hero,.page-hero,.section-surface,.compare-panel,.purchase-box,.footer,.price-card,.card,.guide-card,.faq-card,.notice-card,.flow-box,.support-box,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell{padding:18px;border-radius:20px}
  .hero-premium{padding:24px 18px;border-radius:24px}
  .hero h1{font-size:28px;line-height:1.18}
  .lead{font-size:15px;line-height:1.65}
  .eyebrow,.badge,.section-label,.inline-pill,.chip,.kicker{font-size:12px}
  .section{margin-top:22px}
  .section h2{font-size:23px;line-height:1.28}
  .section h3,.card h3,.guide-card h3,.faq-card h3,.flow-box h3,.support-box h3,.scenario-card h3,.compare-card h3,.feature-block h3,.step-line-card h3,.hero-panel-top h3{font-size:19px;line-height:1.34}

  .hero-grid,.hero-grid-wide,.purchase-grid,.compare-grid,.grid-2,.grid-3,.grid-4,.flow-grid,.support-grid,.scenario-grid,.feature-list,.install-grid,.footer-grid,.hero-summary-grid,.hero-kpis,.step-line-grid,.form-grid{grid-template-columns:1fr !important;gap:14px}
  .hero-proof{grid-template-columns:1fr;gap:10px}
  .hero-summary-card,.decision-item,.feature-block,.step-line-card,.compare-panel,.compare-card,.table-row,.warning-item,.purchase-grid > div{border-radius:18px}
  .hero-summary-card{padding:16px}
  .decision-item{padding:16px}
  .compare-panel h2{font-size:21px;margin-bottom:16px}
  .plan-guide{margin-top:16px;padding:14px 14px 15px;border-radius:18px}
  .plan-guide h3{font-size:17px;margin-bottom:8px}
  .plan-guide ul{gap:7px}

  .price-card{padding:18px 16px 16px;gap:10px}
  .price-card .top{gap:8px}
  .price-card .plan-badge{margin:0 0 4px;padding:5px 11px;font-size:11px}
  .price-card .chip{padding:5px 10px;font-size:11px}
  .price-card h3{font-size:18px}
  .price-card .money{font-size:31px;line-height:1.02}
  .price-card .plan-summary{font-size:14px;line-height:1.58}
  .price-card .list{gap:6px}
  .price-card .list li{font-size:14px;line-height:1.55;padding:5px 0}
  .price-card .btn{min-height:44px;font-size:14px;margin-top:10px}

  .warning-grid{gap:8px}
  .warning-item{grid-template-columns:18px 1fr;padding:12px 12px;gap:10px}
  .warning-item input{width:18px;height:18px;margin-top:1px}
  .warning-item strong{font-size:14px;line-height:1.42}
  .warning-item .muted{font-size:12px;line-height:1.52}
  .input-block{margin-bottom:10px;gap:5px}
  .input-label{font-size:13px}
  .confirm-input{min-height:42px;padding:0 12px;font-size:15px;border-radius:12px}
  textarea.confirm-input{min-height:112px;padding:12px}
  .button-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .button-grid .btn{width:100%;min-height:40px;font-size:12px;padding:0 8px}
  .confirm-status,.status-ok,.status-warn,.status-info{padding:11px 12px;font-size:12px;line-height:1.5}
  .table-row{grid-template-columns:1fr;gap:6px;padding:14px 14px}

  .footer{margin-top:28px}
  .footer-copy{font-size:12px}
}

@media (max-width:560px){
  .wrap{padding:12px 10px 30px}
  .topbar{padding:10px 10px 12px;border-radius:18px}
  .brand{align-items:flex-start}
  .brand-mark{width:36px;height:36px;border-radius:12px}
  .brand-title{font-size:17px}
  .brand-sub{font-size:10px;line-height:1.35}
  .top-links a{min-height:34px;padding:0 11px;font-size:12px}

  .hero,.page-hero,.section-surface,.compare-panel,.purchase-box,.footer,.price-card,.card,.guide-card,.faq-card,.notice-card,.flow-box,.support-box,.panel,.form-card,.image-card,.scenario-card,.compare-card,.summary-card,.stat-card,.table-shell{padding:16px;border-radius:18px}
  .hero-premium{padding:20px 16px;border-radius:20px}
  .hero h1{font-size:25px}
  .lead{font-size:14px}
  .section h2{font-size:21px}
  .section h3,.card h3,.guide-card h3,.faq-card h3,.flow-box h3,.support-box h3,.scenario-card h3,.compare-card h3,.feature-block h3,.step-line-card h3,.hero-panel-top h3{font-size:18px}

  .cta-row,.anchor-links,.mini-kpis,.footer-links{display:grid;grid-template-columns:1fr;gap:8px}
  .cta-row .btn,.anchor-links a{width:100%}

  .price-card{padding:16px 14px 14px}
  .price-card .money{font-size:29px}
  .price-card .plan-summary,.price-card .list li{font-size:13px}
  .price-card .btn{min-height:42px;font-size:13px}

  .button-grid{grid-template-columns:1fr !important}
  .button-grid .btn{min-height:38px}
  .purchase-box,.purchase-grid > div{padding:14px}
  .hero-summary-card,.decision-item,.feature-block,.step-line-card,.compare-panel,.compare-card,.table-row,.warning-item,.purchase-grid > div{border-radius:16px}
  .warning-item{padding:11px 11px}
  .warning-item strong{font-size:13px}
  .warning-item .muted{font-size:11px}
  .confirm-input{min-height:40px;font-size:14px}
  textarea.confirm-input{min-height:100px}
}

/* ===== v5 live mobile emergency fixes ===== */
@media (max-width: 900px){
  .topbar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:10px !important;
  }
  .brand{width:100% !important; align-items:center !important;}
  .brand-copy{min-width:0 !important;}
  .top-links{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    width:100% !important;
    max-width:100% !important;
    gap:8px !important;
    padding:2px 0 2px 0 !important;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    justify-content:flex-start !important;
    grid-template-columns:none !important;
  }
  .top-links::-webkit-scrollbar{display:none !important;}
  .top-links a{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    white-space:nowrap !important;
    min-height:36px !important;
    height:auto !important;
    padding:0 12px !important;
    border-radius:999px !important;
    text-align:center !important;
    font-size:13px !important;
    line-height:1.1 !important;
  }

  .hero-grid-wide,
  .hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .hero-grid-wide > *,
  .hero-grid > *{min-width:0 !important; width:100% !important;}
  .hero-premium{padding:20px 14px !important;}
  .hero-summary-grid,
  .hero-kpis,
  .decision-list,
  .purchase-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .flow-grid,
  .support-grid,
  .compare-grid,
  .scenario-grid,
  .install-grid,
  .feature-list,
  .form-grid,
  .footer-grid{
    grid-template-columns:1fr !important;
  }
  .eyebrow,
  .badge,
  .section-label,
  .inline-pill,
  .chip,
  .kicker,
  .plan-badge{
    display:inline-flex !important;
    width:auto !important;
    max-width:100% !important;
    writing-mode:horizontal-tb !important;
    text-orientation:mixed !important;
    white-space:normal !important;
    word-break:keep-all !important;
    overflow-wrap:anywhere !important;
    line-height:1.2 !important;
    padding:8px 12px !important;
    min-height:auto !important;
  }
  .hero-panel-premium,
  .hero-summary-card,
  .decision-item,
  .feature-block,
  .compare-panel,
  .compare-card,
  .price-card,
  .purchase-grid > div,
  .warning-item,
  .table-row{
    width:100% !important;
    min-width:0 !important;
  }
}

@media (max-width: 560px){
  .wrap{padding:10px 10px 28px !important;}
  .topbar{padding:10px !important; border-radius:18px !important;}
  .brand-mark{width:34px !important; height:34px !important;}
  .brand-title{font-size:16px !important;}
  .brand-sub{font-size:10px !important;}
  .top-links a{font-size:12px !important; min-height:34px !important; padding:0 11px !important;}
  .hero,
  .page-hero,
  .card,
  .guide-card,
  .faq-card,
  .notice-card,
  .flow-box,
  .support-box,
  .panel,
  .form-card,
  .image-card,
  .scenario-card,
  .compare-card,
  .summary-card,
  .stat-card,
  .table-shell,
  .footer,
  .purchase-box,
  .price-card{
    padding:14px !important;
    border-radius:18px !important;
  }
  .hero h1{font-size:24px !important; line-height:1.2 !important;}
  .lead{font-size:14px !important; line-height:1.6 !important;}
  .section h2{font-size:21px !important; line-height:1.28 !important;}
  .hero-summary-card,
  .decision-item,
  .feature-block,
  .compare-panel,
  .compare-card,
  .warning-item,
  .purchase-grid > div,
  .table-row{padding:13px !important; border-radius:16px !important;}
  .money,
  .price-card .money{font-size:28px !important;}
}