:root{
  --bg:#f5f8fc; --card:#fff; --text:#0b1730; --muted:#67748b; --line:#dfe6f0;
  --blue:#155eef; --blue2:#0047cc; --navy:#071a3a; --green:#10b981; --shadow:0 18px 50px rgba(24,52,93,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",Arial,sans-serif;color:var(--text);background:#fff;line-height:1.55}
img{max-width:100%;display:block} a{text-decoration:none;color:inherit}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(220,227,238,.8)}
.nav-wrap{height:76px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-mark{display:grid;place-items:center;width:38px;height:42px;color:#fff;font-weight:900;font-size:20px;background:linear-gradient(160deg,#246fff,#0f4bd8);clip-path:polygon(50% 0,95% 20%,88% 73%,50% 100%,12% 73%,5% 20%)}
.brand-logo{width:40px;height:40px;object-fit:contain;border-radius:9px;display:block;flex:0 0 auto}
.brand strong{display:block;font-size:19px;letter-spacing:.2px}.brand small{display:block;color:#728097;font-size:10px}
.nav{display:flex;gap:28px;font-size:14px;font-weight:700}.nav a:hover{color:var(--blue)}
.nav-actions{display:flex;gap:10px}.menu-toggle{display:none;border:0;background:none;font-size:24px}
.btn{display:inline-flex;justify-content:center;align-items:center;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:800;border:1px solid transparent;transition:.25s;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 9px 24px rgba(21,94,239,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(21,94,239,.32)}
.btn-ghost{border-color:#bfd0f4;color:#1548ab}.btn-light{background:#fff;border-color:#d8e0ec}.btn-white{background:#fff;color:#0a459e}.btn-lg{padding:14px 23px;border-radius:12px}
.hero{overflow:hidden;background:
radial-gradient(circle at 80% 20%,rgba(48,126,255,.17),transparent 32%),
linear-gradient(135deg,#f9fbff 0%,#eef5ff 48%,#f6f9fd 100%);padding:84px 0 72px}
.hero-grid{display:grid;grid-template-columns:.9fr 1.2fr;align-items:center;gap:58px}
.eyebrow,.kicker{font-size:12px;font-weight:900;letter-spacing:1.7px;color:var(--blue)}
.eyebrow span{display:inline-block;width:28px;height:3px;background:var(--blue);vertical-align:middle;margin-right:8px}
.hero h1{font-size:48px;line-height:1.15;letter-spacing:-2.3px;margin:20px 0}.hero h1 em{font-style:normal;color:var(--blue)}
.hero-copy>p{font-size:17px;color:#596982;max-width:560px}.hero-actions{display:flex;gap:12px;margin:32px 0}
.hero-proof{display:flex;gap:12px}.hero-proof div{background:rgba(255,255,255,.8);border:1px solid #e3eaf4;border-radius:12px;padding:11px 14px;min-width:110px}
.hero-proof strong{display:block;font-size:17px}.hero-proof span{font-size:11px;color:#738096}
.hero-visual{position:relative}.browser{overflow:hidden;background:#fff;border:1px solid #d8e1ef;border-radius:18px;box-shadow:0 28px 80px rgba(28,59,105,.2);transform:perspective(1400px) rotateY(-5deg) rotateX(1deg)}
.browser-top{height:35px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f6f8fb;border-bottom:1px solid #e6ebf2}
.browser-top i{width:8px;height:8px;border-radius:50%;background:#ced6e3}.browser-top span{margin-left:10px;font-size:10px;color:#8b96a8}
.browser img{aspect-ratio:16/9;object-fit:cover;object-position:top}
.float-card{position:absolute;background:rgba(5,19,44,.92);color:#fff;border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.float-card b,.float-card span{display:block;font-size:11px}.float-card strong{font-size:24px}.float-card span{color:#aab8ce}.float-card .ok{color:#73efb8}.float-a{left:-25px;bottom:35px}.float-b{right:-10px;top:35px}
.trust-strip{background:var(--navy);color:#dbe8ff}.trust-grid{height:76px;display:flex;align-items:center;justify-content:center;gap:24px;font-weight:800}.trust-grid b{color:#4d8cff}
.section{padding:104px 0}.section-heading{max-width:760px;margin-bottom:50px}.center{text-align:center;margin-left:auto;margin-right:auto}.section-heading h2,.split-heading h2,.tbm-copy h2,.report-copy h2,.contact-card h2{font-size:38px;line-height:1.22;letter-spacing:-1.6px;margin:12px 0}
.section-heading p,.split-heading p,.tbm-copy p,.report-copy p{color:var(--muted);font-size:16px}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feature-card{border:1px solid #e4eaf2;border-radius:18px;padding:28px 23px;background:#fff;box-shadow:0 10px 28px rgba(27,55,95,.06);transition:.25s}
.feature-card:hover{transform:translateY(-6px);border-color:#bcd0fb;box-shadow:0 20px 45px rgba(25,69,139,.12)}
.feature-card .icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eaf1ff;color:var(--blue);font-size:23px;font-weight:900}
.feature-card h3{margin:17px 0 8px;font-size:18px}.feature-card p{margin:0;color:#6e7b90;font-size:14px}
.section-dark{background:radial-gradient(circle at 80% 10%,#10346d,#071a3a 42%,#05142f);color:#fff;overflow:hidden}
.kicker.light{color:#70a5ff}.split-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:60px}.split-heading p{color:#afbdd0}
.dashboard-showcase{position:relative;margin-top:50px;padding-bottom:110px}
.screen-main{width:85%;margin:auto;border:8px solid #172b4c;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.screen-main img{aspect-ratio:16/9;object-fit:cover;object-position:top}
.mini-screen{position:absolute;width:36%;background:#fff;border:6px solid #1b2d4b;border-radius:13px;overflow:hidden;box-shadow:0 25px 55px rgba(0,0,0,.35)}
.mini-screen img{aspect-ratio:16/9;object-fit:cover;object-position:top}.mini-one{bottom:0;left:0}.mini-two{bottom:0;right:0}
.metric-row{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.12);margin-top:30px}
.metric-row div{padding:28px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.12)}.metric-row div:last-child{border:0}
.metric-row strong{display:block;font-size:22px;color:#75a7ff}.metric-row span{font-size:13px;color:#9fb0c8}
.tbm-section{background:#f6f9fe}.tbm-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:70px}
.check-list{list-style:none;padding:0;margin:25px 0 32px}.check-list li{padding:9px 0 9px 29px;position:relative}.check-list li:before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:900}
.phones{display:flex;align-items:center;justify-content:center;gap:13px}.phone{background:#070b13;border:7px solid #111927;border-radius:34px;overflow:hidden;box-shadow:0 24px 45px rgba(20,41,76,.2)}
.phone img{width:100%;height:100%;object-fit:cover}.p1,.p3{width:27%;aspect-ratio:9/19;transform:scale(.9)}.p2{width:31%;aspect-ratio:9/19;z-index:2}
.report-section{background:#fff}.report-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}
.report-card{height:610px;overflow:hidden;border:1px solid #dbe4f0;border-radius:24px;box-shadow:var(--shadow);background:#f0f3f8}
.report-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.report-points{margin-top:30px}.report-points>div{display:flex;gap:17px;padding:17px 0;border-bottom:1px solid #e5eaf1}
.report-points b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eaf1ff;color:var(--blue)}
.report-points strong,.report-points small{display:block}.report-points small{color:#768298;margin-top:3px}
.workflow-section{background:#f4f7fb}.workflow-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.tab{border:1px solid #dce4ef;background:#fff;border-radius:999px;padding:11px 20px;font-weight:800;color:#5e6b7f;cursor:pointer}
.tab.active{background:var(--blue);border-color:var(--blue);color:#fff}.tab-panels{background:#fff;padding:14px;border-radius:20px;box-shadow:var(--shadow)}
/* [SAFETY 2026-07-16] 이미지가 잘리지 않고 전체가 보이도록 — object-fit:contain + aspect-ratio 제거(원본 비율 유지). */
.tab-panel{display:none;overflow:hidden;border-radius:12px}.tab-panel.active{display:block}.tab-panel img{width:100%;height:auto;object-fit:contain;display:block}
.tab-panel a{display:block;cursor:pointer}
.outcome-section{background:var(--navy);color:#fff}.outcome-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.outcome{padding:30px 25px;border:1px solid rgba(255,255,255,.13);border-radius:18px;background:rgba(255,255,255,.045)}
.outcome>strong{font-size:12px;color:#76a7ff}.outcome h3{font-size:20px}.outcome p{color:#aab7ca;font-size:14px}
.contact-section{background:linear-gradient(135deg,#155eef,#053a9c);padding:80px 0}
.contact-card{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;color:#fff;align-items:center}
.contact-card p{color:#c9dbff}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:13px;background:rgba(255,255,255,.1);padding:25px;border:1px solid rgba(255,255,255,.2);border-radius:20px;backdrop-filter:blur(8px)}
.contact-form label{font-size:12px;font-weight:800}.contact-form input,.contact-form textarea{width:100%;margin-top:7px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.96);border-radius:10px;padding:13px;color:#0c1830;outline:none}
.full{grid-column:1/-1}.form-message{margin:0;color:#fff;font-size:13px}
.footer{background:#06142e;color:#9eb0c7;padding:55px 0 24px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:35px}
.footer-grid>div:not(.footer-brand){display:flex;flex-direction:column;gap:9px;font-size:13px}.footer-grid b{color:#fff}.footer-grid a:hover{color:#fff}
.biz-info{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:20px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:#8397b0;line-height:1.7}
.biz-info a{color:#c9d6e6;text-decoration:underline;text-underline-offset:2px}.biz-info a:hover{color:var(--blue)}
.copyright{margin-top:14px;padding-top:0;font-size:12px}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}.reveal.show{opacity:1;transform:none}
@media(max-width:960px){
 .nav,.nav-actions{display:none}.menu-toggle{display:block}.site-header.open .nav{display:flex;position:absolute;top:75px;left:0;right:0;flex-direction:column;background:#fff;padding:25px 30px;border-bottom:1px solid #e4eaf2}
 .hero-grid,.tbm-grid,.report-grid,.contact-card,.split-heading{grid-template-columns:1fr}.hero{padding-top:55px}.hero h1{font-size:40px}.hero-visual{margin-top:25px}
 .feature-grid,.outcome-grid{grid-template-columns:repeat(2,1fr)}.report-card{height:500px}.contact-card{gap:35px}
}
@media(max-width:640px){
 .container{width:min(100% - 26px,1180px)}.nav-wrap{height:66px}.brand strong{font-size:17px}.brand-mark{width:34px;height:37px}
 .hero{padding:44px 0}.hero h1{font-size:33px;letter-spacing:-1.5px}.hero-proof{display:grid;grid-template-columns:repeat(3,1fr)}.hero-proof div{min-width:0;padding:9px}
 .browser{transform:none}.float-card{display:none}.trust-grid{font-size:12px;gap:8px;text-align:center}
 .section{padding:72px 0}.section-heading h2,.split-heading h2,.tbm-copy h2,.report-copy h2,.contact-card h2{font-size:30px}
 .feature-grid,.outcome-grid{grid-template-columns:1fr}.feature-card{padding:23px}
 .dashboard-showcase{padding-bottom:0}.screen-main{width:100%;border-width:4px}.mini-screen{position:static;width:100%;margin-top:13px;border-width:4px}
 .metric-row{grid-template-columns:repeat(2,1fr)}.metric-row div:nth-child(2){border-right:0}.metric-row div{border-bottom:1px solid rgba(255,255,255,.1)}
 .phones{gap:6px}.phone{border-width:4px;border-radius:20px}.p1,.p3{width:30%}.p2{width:35%}
 .report-card{height:460px}.tab-panels{padding:6px}
 .contact-form{grid-template-columns:1fr}.contact-form .full{grid-column:1}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
}