:root{
  --navy:#0d183e;
  --blue:#2447d8;
  --blue2:#5676f5;
  --text:#111936;
  --muted:#667085;
  --line:#e7ebf4;
  --soft:#f7f9ff;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:#fff;
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
  line-height:1.65;
  word-break:keep-all;
}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
img{display:block;max-width:100%}
.container{width:min(1180px,calc(100% - 40px));margin:0 auto}

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(231,235,244,.8);
}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;color:var(--navy)}
.brand img{
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
  object-fit:contain !important;
  border-radius:0;
  filter:none;
  flex:0 0 42px;
}
.nav-links{display:flex;align-items:center;gap:34px;font-size:14px;font-weight:800;color:#4d566d}
.nav-links a:hover{color:var(--blue)}
.nav-cta,.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;background:var(--blue);color:#fff;font-weight:900;
  padding:14px 22px;border:0;box-shadow:0 14px 30px rgba(36,71,216,.2);
}

.hero{
  position:relative;overflow:hidden;padding:90px 0 42px;
  background:radial-gradient(circle at 83% 28%,rgba(86,118,245,.15),transparent 31%),linear-gradient(180deg,#fff,#f9fbff);
}
.hero-bg{position:absolute;border-radius:50%;pointer-events:none}
.hero-bg-a{width:430px;height:430px;right:-170px;top:130px;background:rgba(86,118,245,.06)}
.hero-bg-b{width:240px;height:240px;left:-120px;bottom:90px;background:rgba(36,71,216,.05)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:62px;align-items:center;min-height:640px}
.eyebrow{
  display:inline-flex;border:1px solid #ccd5ff;border-radius:999px;padding:7px 12px;
  color:var(--blue);font-size:13px;font-weight:900;background:#fff;
}
.hero h1{font-size:clamp(44px,5vw,72px);line-height:1.08;letter-spacing:-.06em;margin:22px 0}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero-copy>p{font-size:19px;color:#4c5871;margin:0}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:999px;padding:14px 22px;font-weight:900;
}
.btn-outline{border:1px solid #cbd4f5;background:#fff;color:var(--blue)}
.hero-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.hero-trust div{display:grid;grid-template-columns:auto 1fr;column-gap:8px}
.hero-trust span{grid-row:1/3;width:27px;height:27px;border-radius:50%;display:grid;place-items:center;background:#edf1ff;color:var(--blue);font-weight:900}
.hero-trust strong{font-size:13px}.hero-trust small{font-size:11px;color:#8790a5}

.hero-visual{position:relative;min-height:590px}
.orbit{
  position:absolute;inset:40px 10px 65px;border:1px solid rgba(80,110,240,.16);border-radius:50%;
}
.orbit::before,.orbit::after{content:"";position:absolute;border:1px solid rgba(80,110,240,.13);border-radius:50%}
.orbit::before{inset:45px}.orbit::after{inset:95px}
.phone{
  position:absolute;z-index:5;width:300px;height:585px;right:90px;top:0;
  background:#111;padding:10px;border-radius:44px;transform:rotate(5deg);
  box-shadow:0 40px 90px rgba(10,26,84,.28);
}
.notch{position:absolute;z-index:7;top:6px;left:50%;transform:translateX(-50%);width:80px;height:20px;background:#111;border-radius:0 0 15px 15px}
.phone-screen{height:100%;border-radius:35px;overflow:hidden;background:#fff;position:relative}
.phone-header{height:62px;display:flex;align-items:center;justify-content:space-between;padding:19px 18px 0}
.phone-brand{display:flex;align-items:center;gap:5px;font-size:11px}
.phone-brand img{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  object-fit:contain !important;
  border-radius:0;
  flex:0 0 22px;
}
.phone-main{padding:25px 20px 18px;background:linear-gradient(180deg,#fff,#f2f5ff)}
.phone-label{font-size:8px;color:var(--blue);font-weight:900;letter-spacing:.08em}
.phone-main h3{font-size:25px;line-height:1.2;margin:12px 0 8px;letter-spacing:-.04em}
.phone-main h3 em{font-style:normal;color:var(--blue)}
.phone-main p{font-size:10px;color:#727c92;line-height:1.5}
.phone-main button{border:0;background:var(--blue);color:#fff;border-radius:999px;padding:7px 11px;font-size:8px;font-weight:900}
.phone-services{padding:14px 16px}
.phone-services h4{font-size:11px;margin:0 0 9px}
.phone-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.phone-service-grid span{height:48px;border:1px solid #ebedf5;border-radius:9px;display:grid;place-items:center;color:var(--blue);font-weight:900;font-size:16px}
.phone-service-grid small{display:block;font-size:6px;color:#6d768c;margin-top:-8px}
.phone-footer{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;text-align:center;padding:18px 10px;font-size:10px;font-weight:800}

.platform{
  position:absolute;z-index:8;width:58px;height:58px;border-radius:18px;background:#fff;border:1px solid #edf0f8;
  display:grid;place-items:center;font-weight:950;font-size:25px;box-shadow:0 18px 35px rgba(19,39,113,.14);
}
.naver{left:22px;top:52px;color:#12c95d}
.insta{left:0;top:170px;color:#dc3da0}
.threads{left:25px;bottom:120px;color:#111}
.map{right:10px;top:75px;color:#f0c500}
.youtube{right:-12px;top:195px;color:#f0212e}
.daangn{right:0;bottom:145px;color:#ff6f1f}
.news{right:55px;bottom:38px;color:var(--blue);font-size:10px}
.bars{position:absolute;left:70px;bottom:42px;display:flex;gap:7px;align-items:end}
.bars i{display:block;width:20px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#87a2ff,#3155dc)}
.bars i:nth-child(1){height:50px}.bars i:nth-child(2){height:75px}.bars i:nth-child(3){height:105px}.bars i:nth-child(4){height:140px}
.growth-arrow{position:absolute;right:5px;bottom:25px;color:#6b89f6;font-size:110px;line-height:1;opacity:.7}

.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 45px rgba(23,42,108,.07);overflow:hidden}
.stats div{padding:22px 26px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats b{display:block;font-size:21px;color:var(--blue)}
.stats span{font-size:12px;color:#6f788d}

.section{padding:110px 0}
.services,.reviews{background:var(--soft)}
.section-head{text-align:center;max-width:760px;margin:0 auto 46px}
.section-head>span,.contact-copy>span{font-size:13px;font-weight:900;letter-spacing:.18em;color:var(--blue)}
.section-head h2,.contact-copy h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.05em;margin:9px 0 12px}
.section-head p{margin:0;color:var(--muted);font-size:17px}

.service-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.service-tab{border:1px solid #d9e0f4;border-radius:999px;background:#fff;padding:10px 17px;font-weight:900;color:#536079;cursor:pointer}
.service-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.service-panel{background:#fff;border:1px solid var(--line);border-radius:30px;padding:14px;box-shadow:0 22px 55px rgba(23,42,108,.1)}
.service-image{display:none;width:100%;border-radius:20px}
.service-image.active{display:block}

.process{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;gap:16px;align-items:center}
.process article{text-align:center}
.process>i{font-style:normal;color:#9ba6bd;font-size:22px}
.process-icon{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:#edf1ff;color:var(--blue);font-size:29px}
.process article>span{font-size:12px;font-weight:900;color:var(--blue)}
.process h3{font-size:18px;margin:7px 0}
.process p{font-size:13px;color:var(--muted);margin:0}

.review-slider{overflow:hidden}
.review-track{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;transition:transform .4s ease}
.review-card{
  min-width:0;background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 18px;text-align:center;
  box-shadow:0 12px 32px rgba(22,42,112,.05)
}
.avatar{width:104px;height:104px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;position:relative;overflow:hidden}
.avatar::before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,#fff,#eaf0ff)}
.avatar span{position:relative;font-size:64px}
.avatar-a{background:#fff2c7}.avatar-b{background:#dff1ff}.avatar-c{background:#ffe4ea}.avatar-d{background:#e8f8d5}.avatar-e{background:#eee2ff}.avatar-f{background:#e5e7ea}
.stars{color:#ffb300;letter-spacing:2px;font-size:15px;margin-bottom:12px}
.review-card p{font-size:13px;line-height:1.75;margin:0;min-height:185px}
.review-card small{display:block;margin-top:16px;color:#7a8499}
.slider-dots{display:flex;justify-content:center;gap:7px;margin-top:25px}
.dot{width:9px;height:9px;border-radius:50%;border:0;background:#d4daea;padding:0;cursor:pointer}
.dot.active{width:24px;border-radius:999px;background:var(--blue)}

.contact{padding-top:70px}
.contact-wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:30px;background:linear-gradient(145deg,#11276f,#2447d8);border-radius:28px;padding:42px;color:#fff}
.contact-copy>span{color:#b8c5ff}
.contact-copy h2{margin-top:10px}.contact-copy>p{opacity:.8}
.contact-benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:36px}
.contact-benefits div{display:grid;text-align:center;gap:3px}
.contact-benefits b{font-size:27px}.contact-benefits strong{font-size:14px}.contact-benefits small{font-size:11px;opacity:.72}
.contact-form{background:#fff;color:var(--text);border-radius:20px;padding:24px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact-form label{display:grid;gap:7px;font-size:13px;font-weight:800;margin-bottom:12px}
input,textarea{width:100%;border:1px solid #dce2ef;border-radius:12px;padding:12px 13px;outline:none}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(36,71,216,.08)}
.contact-form button{width:100%;border:0;border-radius:11px;background:var(--blue);color:#fff;font-weight:900;padding:14px;cursor:pointer}
.contact-form>small{display:block;text-align:center;color:#7b8498;font-size:10px;margin-top:9px}

footer{background:#0d1424;color:#fff;padding:38px 0}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.footer-brand .brand{color:#fff}.footer-brand p{font-size:12px;color:#aeb6c8;margin:8px 0 0}
.footer-inner nav{display:flex;gap:26px;font-size:13px;color:#d6dbea}
.copyright{grid-column:1/-1;font-size:11px;color:#8e98ad;margin:8px 0 0}

@media(max-width:1000px){
  .nav-links{display:none}
  .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-actions{justify-content:center}
  .hero-trust{max-width:700px;margin-left:auto;margin-right:auto;text-align:left}
  .hero-visual{max-width:650px;width:100%;margin:0 auto}
  .process{grid-template-columns:1fr 1fr}.process>i{display:none}
  .review-track{grid-template-columns:repeat(3,1fr)}
  .contact-wrap{grid-template-columns:1fr}
}
@media(max-width:680px){
  .container{width:min(100% - 24px,1180px)}
  .nav{height:66px}.brand span{display:none}.nav-cta{font-size:12px;padding:10px 14px}
  .hero{padding-top:58px}.hero h1{font-size:43px}.hero-copy>p{font-size:16px}
  .hero-trust{grid-template-columns:1fr 1fr}
  .hero-visual{transform:scale(.84);transform-origin:top center;margin-bottom:-85px}
  .phone{right:42px}.platform{transform:scale(.9)}
  .stats{grid-template-columns:1fr 1fr}.stats div{border-bottom:1px solid var(--line)}
  .section{padding:78px 0}.section-head{margin-bottom:32px}
  .service-panel{padding:7px;border-radius:20px}.service-image{border-radius:14px}
  .process{grid-template-columns:1fr}
  .review-track{grid-template-columns:1fr}
  .review-card p{min-height:auto}
  .contact-wrap{padding:28px 20px}.contact-benefits{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}.footer-inner nav{flex-wrap:wrap}
}

/* 캐시 혼합이나 브라우저 기본 스타일로 이미지가 커지는 것을 방지 */
.site-header .brand > img,
.phone-brand > img,
.footer-brand .brand > img {
  display:block !important;
  inline-size:42px !important;
  block-size:42px !important;
}
.phone-brand > img {
  inline-size:22px !important;
  block-size:22px !important;
}