:root{
  --paper:#ffffff; --ink:#1c1c1a; --mute:#6b6a66; --line:#e6e5e1; --track:#f3f3f3; --signal:#1c1c1a; --ok:#1f8a4c;
  --w:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.65;word-break:keep-all}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* 위 줄 */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{font-weight:800;font-size:22px;letter-spacing:-.02em;text-decoration:none}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{text-decoration:none;color:var(--mute);font-size:15px}
.nav a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:46px;padding:0 22px;border-radius:999px;font:inherit;font-size:15.5px;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:#fff;white-space:nowrap}
.btn.line{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.sm{height:38px;padding:0 16px;font-size:14px}
.btn:hover{opacity:.88}

/* 첫 화면 */
.hero{padding:76px 0 84px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1{margin:0;font-size:clamp(34px,5.2vw,58px);line-height:1.18;font-weight:800;letter-spacing:-.035em}
.hero p.lead{margin:22px 0 0;font-size:18px;color:var(--mute);max-width:30em}
.hero .acts{display:flex;gap:10px;margin-top:32px;flex-wrap:wrap}
.hero .call{margin-top:22px;font-size:14.5px;color:var(--mute)}
.hero .call b{color:var(--ink);font-size:17px;margin-right:8px}

/* 구역 */
.sec{padding:84px 0;border-bottom:1px solid var(--line)}
.sec h2{margin:0 0 10px;font-size:32px;letter-spacing:-.03em;line-height:1.25}
.sec .sub{margin:0 0 40px;color:var(--mute);max-width:36em}


/* 위 줄 원격 작은 글씨 */
.rmt-mini{font-size:13px;color:var(--mute);text-decoration:none;border-bottom:1px dashed #c9c8c3}
.rmt-mini:hover{color:var(--ink)}

/* 두 화면 연결 그림 */
.link{position:relative;height:300px}
.scr{position:absolute;width:56%;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 18px 40px -24px rgba(28,28,26,.35);overflow:hidden}
.scr .bar{height:26px;background:var(--track);display:flex;align-items:center;gap:5px;padding:0 10px;font-size:11.5px;color:var(--mute)}
.scr .bar i{width:7px;height:7px;border-radius:50%;background:#d9d8d4;display:block}
.scr .bar span{margin-left:6px}
.scr .bd{padding:12px 12px 14px}
.scr .row{display:grid;grid-template-columns:1.4fr .6fr .8fr;gap:6px;font-size:11.5px;padding:5px 0;border-bottom:1px solid #f0efec}
.scr .row b{font-weight:600}
.scr .row em{font-style:normal;text-align:right;color:var(--mute)}
.scr.a{left:0;top:0;width:52%}
.scr.b{right:0;bottom:0;width:50%}
.scr.b .bd{display:block;min-height:150px}
.scr.b .msg{font-size:12px;background:var(--track);border-radius:10px;padding:8px 10px;max-width:90%}
.scr.b .msg.me{justify-self:end;background:var(--ink);color:#fff}
.scr.a{z-index:1}.scr.b{z-index:2}
.wire{position:absolute;z-index:3;left:30%;top:50%;width:26%;height:2px;background:repeating-linear-gradient(90deg,#2a5bd7 0 6px,transparent 6px 12px)}
.wire::before{content:"";position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #2a5bd7}
.wire::after{content:"";position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#2a5bd7;opacity:0}
.wire.go::after{animation:run 1.3s ease-in-out forwards}
@keyframes run{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.state{position:absolute;left:4%;bottom:6%;display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px}
.state i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
@media (prefers-reduced-motion:reduce){.wire::after{animation:none;left:calc(50% - 5px)}}

.hp-top{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0 12px}
.hp-top b{font-size:13px}.hp-top em{font-style:normal;font-size:10.5px;color:var(--mute)}
.hp-ln{height:8px;border-radius:4px;background:var(--track);margin-bottom:7px;width:85%}.hp-ln.s{width:60%}
.hp-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.hp-btns span{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:4px 10px;transition:all .25s}
.hp-btns span.on{background:var(--ink);border-color:var(--ink);color:#fff}
.scr.b .it{border-bottom:1px solid #f0efec;padding:7px 0;transition:opacity .4s,transform .4s;max-height:60px}
.scr.b .it b{display:block;font-size:12px}
.scr.b .it span{display:block;font-size:11px;color:var(--mute)}
.scr.b .it.new{opacity:0;transform:translateY(-8px)}

/* 기능 6칸 */
.feat{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}
.feat article{padding:28px 26px 30px 0;border-bottom:1px solid var(--line)}
.feat article:not(:nth-child(3n+1)){padding-left:26px;border-left:1px solid var(--line)}
.feat .no{font-size:13px;font-weight:700;color:var(--mute)}
.feat h3{margin:6px 0 8px;font-size:21px;letter-spacing:-.02em}
.feat p{margin:0;color:var(--mute);font-size:15.5px}
.note{margin:26px 0 0;font-size:15.5px;font-weight:600}

/* Lab */
.lab{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.lab .lt{display:flex;justify-content:space-between;align-items:center;gap:10px}
.lab .lt a{font-size:14px;font-weight:700;text-decoration:none;color:var(--ink)}
.lab .lt a:hover{text-decoration:underline}
.refs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.rf{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--ink);background:#fff;transition:box-shadow .2s}
.rf:hover{box-shadow:0 16px 32px -20px rgba(28,28,26,.45)}
.rf .pv{height:120px;display:flex;align-items:flex-start;padding:16px;border-bottom:1px solid var(--line)}
.rf .pv b{font-size:16px;letter-spacing:-.02em}
.rf .rb{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.rf em{font-style:normal;font-size:12px;font-weight:700;color:var(--mute)}
.rf h3{margin:4px 0 6px;font-size:18px}
.rf p{margin:0 0 14px;color:var(--mute);font-size:14.5px;flex:1}
.rf span{font-size:14px;font-weight:700}
.lab article{border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column}
.lab h3{margin:0 0 8px;font-size:17px}
.lab p{margin:0 0 16px;color:var(--mute);font-size:14.5px;flex:1}
.lab span{align-self:flex-start;font-size:12px;background:var(--track);border-radius:999px;padding:3px 10px;color:var(--mute)}

/* 요금 */
.once{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:22px 0}
.once b{display:block;font-size:19px}
.once span{color:var(--mute);font-size:15px}
.once .n{text-align:right;font-weight:800;font-size:24px;white-space:nowrap}
.once .n small{display:block;font-weight:400;font-size:13px;color:var(--mute)}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.plans article{border:1px solid var(--line);border-radius:16px;padding:24px 22px}
.plans article.pick-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plans h3{margin:0 0 10px;font-size:15px;color:var(--mute);font-weight:600}
.plans .amt{font-size:26px;font-weight:800;letter-spacing:-.02em}
.plans p{margin:6px 0 0;color:var(--mute);font-size:15px}
.plans .mk{margin:6px 0 0;color:var(--mute);font-size:14px}
.plans ul{margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--line);list-style:none;font-size:14.5px}
.plans li{padding:3px 0}
.incl{margin:22px 0 0;padding:0;list-style:none;font-size:15px}
.incl li{padding:4px 0 4px 18px;position:relative}
.incl li::before{content:"";position:absolute;left:2px;top:.85em;width:6px;height:6px;border-radius:50%;background:#c9c8c3}

/* 원격 받는 순서 */
.steps{margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.steps li{list-style:none;padding:28px 26px;border-right:1px solid var(--line);counter-increment:s}
.steps li:last-child{border-right:0}
.steps li::before{content:counter(s);display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:14px}
.steps b{display:block;font-size:18px;margin-bottom:6px}
.steps span{color:var(--mute);font-size:15px}
.steps-wrap ol{margin:0;padding:0}
.rmt-acts{display:flex;gap:10px;align-items:center;margin-top:24px;flex-wrap:wrap}
.rmt-acts .hint{color:var(--mute);font-size:14px}

/* 요금표 */
.price{width:100%;border-collapse:collapse;font-size:16px}
.price th,.price td{padding:16px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price thead th{font-size:14px;color:var(--mute);font-weight:500;border-bottom:1px solid var(--ink)}
.price td.n{text-align:right;font-weight:700;white-space:nowrap}
.price td.n small{display:block;font-weight:400;color:var(--mute);font-size:13px}
.pay{margin-top:18px;color:var(--mute);font-size:14.5px}

/* 문의 */
.ask{display:grid;grid-template-columns:1fr 1.25fr;gap:56px}
.ask .side p{color:var(--mute);margin:0 0 18px}
.ask .side dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:15px}
.ask .side dt{color:var(--mute)}
.ask .side dd{margin:0;font-weight:600}
form .f{margin-bottom:16px}
form label.t{display:block;font-size:14px;margin-bottom:6px;font-weight:600}
form label.t em{font-style:normal;color:var(--mute);font-weight:400}
form input[type=text],form input[type=tel],form input[type=email],form textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
form textarea{min-height:130px;resize:vertical}
form input:focus,form textarea:focus{outline:none;border-color:var(--ink)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pick{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--track);border-radius:12px;padding:4px}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{padding:7px 14px;border-radius:9px;font-size:14.5px;color:var(--mute);cursor:pointer}
.pick input:checked+label{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.pick input:focus-visible+label{outline:2px solid var(--signal)}
.agree{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--mute);margin:6px 0 18px}
.agree input{margin-top:4px}
.hp{position:absolute;left:-9999px}
.res{margin-top:14px;font-size:15px;min-height:1.5em}
.res.ok{color:var(--ok)} .res.err{color:#c62828}

/* 아래 */
.foot{padding:40px 0 56px;font-size:13.5px;color:var(--mute);line-height:1.9}
.foot .lk{display:flex;gap:18px;margin-bottom:14px;flex-wrap:wrap}
.foot .lk a{text-decoration:none;color:var(--ink);font-weight:600}
.foot b{color:var(--ink)}

/* 약관 페이지 */
.doc{max-width:760px;margin:0 auto;padding:56px 24px 80px}
.doc h1{font-size:30px;letter-spacing:-.03em;margin:0 0 6px}
.doc .date{color:var(--mute);font-size:14px;margin-bottom:34px}
.doc h2{font-size:18px;margin:34px 0 8px}
.doc p,.doc li{font-size:15.5px}
.doc ol,.doc ul{padding-left:20px}
.doc table{border-collapse:collapse;width:100%;font-size:15px;margin:8px 0}
.doc th,.doc td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.doc th{background:var(--track);font-weight:600}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .link{height:260px;max-width:520px}
  .feat{grid-template-columns:1fr 1fr}
  .feat article,.feat article:not(:nth-child(3n+1)){padding:24px 20px 24px 0;border-left:0}
  .feat article:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
  .lab{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr 1fr}
  .refs{grid-template-columns:1fr 1fr}
  .ask{grid-template-columns:1fr;gap:32px}
}
@media (max-width:700px){
  .nav{display:none}
  .top .wrap{gap:12px}
  .top .btn{margin-left:auto}
  .hero{padding:48px 0 56px}
  .hero p.lead{font-size:16.5px}
  .sec{padding:60px 0}
  .sec h2{font-size:26px}
  .steps{grid-template-columns:1fr}
  .steps li{border-right:0;border-bottom:1px solid var(--line)}
  .steps li:last-child{border-bottom:0}
  .two{grid-template-columns:1fr}
  .rmt-mini{display:none}
  .feat{grid-template-columns:1fr}
  .feat article,.feat article:nth-child(2n){padding:22px 0;border-left:0}
  .lab{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .refs{grid-template-columns:1fr}
  .lab{grid-template-columns:1fr}
  .once{flex-direction:column;align-items:flex-start}
  .once .n{text-align:left}

  .wrap{padding:0 16px}
}

/* HDBTN 261105 위쪽 = 원격 지원 · 로그인 · 상담 신청 버튼 (멘트업처럼) */
.top .hbtn{margin-left:8px}.top .hbtn:first-of-type{margin-left:26px}
@media (max-width:700px){.top .hbtn{margin-left:6px;padding:0 12px}.top .hbtn:first-of-type{margin-left:auto}}

/* HDBTN2 좁은 화면: 메뉴 글자 줄바꿈 없음 · 폰은 상담 신청 버튼 숨김(본문에 있음) */
.nav a{white-space:nowrap}
@media (max-width:1100px){.nav{gap:14px}.top .hbtn:first-of-type{margin-left:16px}}
@media (max-width:900px){.nav{display:none}.top .hbtn:first-of-type{margin-left:auto}}
@media (max-width:420px){.top .hbtn:last-of-type{display:none}}

/* HDBTN3 멘트업과 같은 버튼 크기 · 간격 (높이 34 · 글자 13.5 · 메뉴와 28 · 버튼끼리 10) */
.top .hbtn{height:34px;padding:0 14px;font-size:13.5px;font-weight:600;margin-left:10px}
.top .hbtn.line{border-color:#e6e5e1}
.top .hbtn:first-of-type{margin-left:28px}
@media (max-width:900px){.top .hbtn:first-of-type{margin-left:auto}}

/* HDBTN4 줄 간격(gap 28) 기준: 메뉴→첫 버튼 28 · 버튼끼리 10 */
.top .hbtn{margin-left:-18px}
.top .nav + .hbtn{margin-left:0}
@media (max-width:900px){.top .nav + .hbtn{margin-left:auto}.top .hbtn{padding:0 12px}}
@media (max-width:700px){.top .hbtn{margin-left:-4px}}
/* NAVGAP 261105 메뉴 간격 · 로고 = 멘트업과 같게 */
.top .nav{gap:22px !important}
.top .logo{letter-spacing:-.03em !important}

/* GUTTER 261110 */
html{scrollbar-gutter:stable}