@charset "UTF-8";
/* 웰피스(Welfis) 솔루션 소개 페이지 스타일 */

:root{
  /* 회사 홈페이지 '웰피스' 카드와 같은 오션블루 계열 */
  --blue:#0072BC;
  --blue-deep:#0A3754;
  --blue-soft:#1E8FD8;
  --teal:#00A4B5;
  --lime:#ECEE75;
  --mist:#E3F1FA;
  --mist-2:#F4FAFD;
  --line:#D2E4F0;
  --slate:#334955;
  --slate-soft:#64808F;
  --mint:#00B5A3;
  --white:#FFFFFF;
  --grad-brand:linear-gradient(150deg,#1E8FD8 0%,#0072BC 46%,#00A4B5 100%);
  --grad-deep:linear-gradient(150deg,#125F8F 0%,#0A3754 52%,#0B5E6B 100%);
  --sans:Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --grotesk:"Space Grotesk", var(--sans);
  --r:14px;
  /* 본문 글자를 키운 만큼 콘텐츠 폭도 함께 넓힌다.
     한 줄에 담기는 글자 수를 예전과 비슷하게 유지하기 위한 값이다. */
  --maxw:1340px;
  --wrap-pad:30px;
  --shadow:0 2px 4px rgba(6,45,72,.04), 0 12px 32px rgba(6,45,72,.07);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--white);color:var(--slate);
  font-family:var(--sans);line-height:1.66;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--wrap-pad);}

.eyebrow{
  font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--blue);
  margin:0 0 16px;display:block;
}
.sec-title{
  font-size:clamp(30px,4vw,45px);font-weight:800;letter-spacing:-.04em;
  line-height:1.32;color:var(--blue-deep);margin:0 0 16px;word-break:keep-all;
}
.sec-lead{max-width:60ch;font-size:18px;color:var(--slate-soft);margin:0;word-break:keep-all;}
.sec{padding:88px 0;}
.sec-head{margin-bottom:40px;}
/* JSP 안에 style="font-size:clamp(...)" 로 박혀 있던 작은 섹션 제목.
   크기를 조절할 때 CSS 한 곳만 보면 되도록 클래스로 빼냈습니다. */
.sec-title.is-sm{font-size:clamp(25px,3.1vw,35px);}

/* header */
header{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:26px;height:72px;}
.brand{margin-right:auto;display:flex;align-items:center;gap:11px;}
.brand-logo{height:30px;width:auto;display:block;flex:0 0 auto;}
.brand-divider{
  width:1px;height:23px;background:var(--line);flex:0 0 auto;margin:0 2px;
}
.brand-txt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--blue-deep);line-height:1.2;}
.foot-logo{height:33px;width:auto;display:block;margin-bottom:14px;}
.nav-links{display:flex;gap:24px;font-size:16.5px;font-weight:500;color:var(--slate);}
.nav-links a{padding:6px 0;transition:color .2s;}
.nav-links a:hover{color:var(--blue);}
.nav-cta{
  background:var(--blue);color:#fff;font-size:16px;font-weight:600;
  padding:11px 20px;border-radius:99px;white-space:nowrap;transition:.2s;
}
.nav-cta:hover{background:var(--blue-deep);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:14px;font-weight:600;color:var(--blue-deep);cursor:pointer;}

/* hero */
.hero{
  padding:76px 0 0;
  background:
    radial-gradient(60% 70% at 78% 0%, rgba(30,143,216,.16), transparent 62%),
    linear-gradient(180deg,var(--mist-2),var(--white) 70%);
}
.hero-top{display:grid;grid-template-columns:1fr 1.02fr;gap:48px;align-items:center;padding-bottom:44px;}
.pill{
  display:inline-flex;align-items:center;gap:8px;background:var(--white);
  border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 8px;
  font-size:14.5px;font-weight:600;color:var(--blue-deep);margin-bottom:24px;box-shadow:var(--shadow);
}
.pill i{background:var(--blue);color:#fff;font-family:var(--grotesk);font-size:11.5px;font-style:normal;
  padding:3px 8px;border-radius:99px;letter-spacing:.06em;}
h1{
  font-size:clamp(37px,5.3vw,62px);font-weight:800;letter-spacing:-.045em;
  line-height:1.24;color:var(--blue-deep);margin:0 0 22px;word-break:keep-all;
}
h1 span{color:var(--blue);}
.hero-top > div:first-child > p{font-size:19px;color:var(--slate-soft);margin:0 0 12px;max-width:46ch;word-break:keep-all;}
.hero-top > div:first-child > p strong{color:var(--slate);font-weight:700;}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;}
.btn{
  font-size:17px;font-weight:600;padding:15px 28px;border-radius:99px;
  border:1.5px solid var(--blue);cursor:pointer;transition:.2s;display:inline-block;
}
.btn-solid{background:var(--blue);color:#fff;}
.btn-solid:hover{background:var(--blue-deep);border-color:var(--blue-deep);transform:translateY(-1px);}
.btn-line{background:var(--white);color:var(--blue);}
.btn-line:hover{background:var(--mist);}
.statband{
  background:var(--blue-deep);position:relative;overflow:hidden;margin-top:8px;
}
.statband::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 130% at 10% 0%, rgba(30,143,216,.38), transparent 60%),
    radial-gradient(60% 120% at 92% 100%, rgba(0,164,181,.30), transparent 62%);
}
.statband-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.stat{padding:38px 24px;border-left:1px solid rgba(255,255,255,.13);}
.stat:first-child{border-left:none;padding-left:0;}
.stat:last-child{padding-right:0;}
.stat b sup{font-size:.62em;font-weight:700;top:-.42em;position:relative;letter-spacing:0;margin-left:1px;}
.stat b{
  display:block;font-family:var(--grotesk);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(27px,2.7vw,36px);line-height:1.15;color:#fff;margin-bottom:9px;
  word-break:keep-all;
}
.stat span{display:block;font-size:15.5px;line-height:1.55;color:#93BDD6;word-break:keep-all;}

/* 히어로: 전표 자동생성 데모 */
.demo{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 4px 10px rgba(6,45,72,.05), 0 22px 46px rgba(6,45,72,.11);
  position:relative;overflow:hidden;
}
.demo-bar{
  display:flex;align-items:center;gap:9px;padding:11px 16px;
  background:var(--blue-deep);color:#D3E9F6;
}
.demo-bar i{width:8px;height:8px;border-radius:50%;background:#2C6E96;display:block;flex:0 0 auto;}
.demo-bar i:nth-child(2){background:#4E9AC0;}
.demo-bar span{font-size:14px;font-weight:500;letter-spacing:-.005em;}
.demo-bar span em{font-family:var(--grotesk);font-style:normal;font-weight:600;letter-spacing:.06em;}
.demo-body{display:grid;grid-template-columns:1fr auto 1.2fr;align-items:stretch;}
.pane{padding:20px 18px;min-width:0;}
.pane-l{border-right:1px dashed var(--line);background:var(--mist-2);}
.pane-h{
  font-size:14px;font-weight:600;letter-spacing:-.01em;
  color:var(--slate-soft);margin:0 0 14px;
}
.field{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font-size:15px;padding:8px 0;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(5px);
}
.field .k{color:var(--slate-soft);white-space:nowrap;}
.field .v{font-family:var(--grotesk);font-weight:600;color:var(--blue-deep);letter-spacing:-.01em;text-align:right;}
.field.on{opacity:1;transform:none;transition:opacity .34s ease, transform .34s ease;}
.arrow{display:flex;align-items:center;justify-content:center;padding:0 6px;color:var(--blue);}
.arrow svg{width:26px;height:26px;}
.arrow.pulse svg{animation:slide 1s ease;}
@keyframes slide{0%{transform:translateX(-7px);opacity:.25}60%{transform:translateX(4px);opacity:1}100%{transform:none}}

table.jeonpyo{width:100%;border-collapse:collapse;font-size:14.5px;}
table.jeonpyo th{
  font-weight:600;font-size:13px;letter-spacing:-.01em;
  color:var(--slate-soft);text-align:left;padding:0 0 8px;
  border-bottom:1.5px solid var(--blue-deep);
}
table.jeonpyo th.num{text-align:right;}
table.jeonpyo td{padding:9px 0;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--slate);}
table.jeonpyo td.num{text-align:right;font-family:var(--grotesk);font-weight:600;color:var(--blue-deep);letter-spacing:-.01em;}
table.jeonpyo tr.row{opacity:0;transform:translateY(6px);}
table.jeonpyo tr.row.on{opacity:1;transform:none;transition:opacity .4s ease, transform .4s ease;}
.dc{
  font-size:12px;font-weight:700;letter-spacing:-.01em;
  padding:2px 7px;border-radius:99px;margin-right:8px;display:inline-block;
}
.dc.d{background:var(--mist);color:var(--blue);}
.dc.c{background:rgba(0,181,163,.14);color:var(--mint);}
.sum-row td{border-bottom:none;border-top:1.5px solid var(--blue-deep);font-weight:700;padding-top:10px;color:var(--blue-deep);}
.autogen{margin:16px 0 0;}
.autogen b{
  display:block;margin-bottom:9px;
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;color:var(--slate-soft);
}
.ag-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-width:172px;}
.ag-list li{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--blue-deep);
}
.ag-list li::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--mint);flex:0 0 auto;
}
.stamp{
  position:absolute;right:22px;bottom:74px;
  width:80px;height:80px;border:2.5px solid var(--mint);border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--mint);
  display:grid;place-content:center;text-align:center;
  font-size:18px;font-weight:800;line-height:1.15;letter-spacing:-.03em;
  transform:rotate(-13deg) scale(1.4);opacity:0;pointer-events:none;
}
.stamp small{display:block;font-family:var(--grotesk);font-size:9.5px;font-weight:600;letter-spacing:.12em;margin-top:2px;}
.stamp.on{opacity:1;transform:rotate(-13deg) scale(1);transition:opacity .28s ease, transform .28s cubic-bezier(.2,1.4,.4,1);}
.demo-foot{
  display:flex;align-items:center;gap:11px;
  padding:14px 18px;background:var(--mist);border-top:1px solid var(--line);
}
.demo-foot .df-ico{
  width:26px;height:26px;flex:0 0 auto;border-radius:50%;
  background:var(--blue);color:#fff;display:grid;place-content:center;
}
.demo-foot .df-ico svg{width:14px;height:14px;}
.demo-foot p{
  margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.015em;
  color:var(--blue-deep);word-break:keep-all;line-height:1.5;
}
.demo-foot p em{font-style:normal;color:var(--slate-soft);font-weight:500;}

/* signature: 연간 캘린더 */
.cal-block{margin-top:52px;}
.cal{
  background:var(--grad-deep);border-radius:22px;padding:34px 34px 38px;
  color:#D3E9F6;position:relative;overflow:hidden;
}
.cal::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 100% at 12% 0%, rgba(30,143,216,.35), transparent 60%);
  pointer-events:none;
}
.cal-inner{position:relative;z-index:2;}
.cal-head{margin-bottom:26px;}
.cal-head .cal-eyebrow{
  display:block;font-family:var(--grotesk);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#5FA8D6;margin-bottom:11px;
}
.cal-head h2{
  font-size:clamp(23px,2.3vw,28px);font-weight:800;color:#fff;
  margin:0 0 10px;letter-spacing:-.04em;line-height:1.3;
}
.cal-head p{
  margin:0;font-size:16px;line-height:1.62;color:#93BDD6;
  max-width:590px;word-break:keep-all;
}
.months{
  display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-bottom:24px;
}
.m{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);
  border-radius:10px;padding:12px 4px 11px;text-align:center;cursor:pointer;
  transition:.18s;color:#D3E9F6;
}
.m:hover{background:rgba(255,255,255,.15);transform:translateY(-2px);}
.m b{display:block;font-family:var(--grotesk);font-size:18px;font-weight:600;color:#fff;letter-spacing:-.02em;}
.m i{
  display:block;width:5px;height:5px;border-radius:50%;background:var(--mint);
  margin:6px auto 0;opacity:0;
}
.m.peak i{opacity:1;background:var(--lime);}
.m[aria-selected="true"]{background:var(--blue);border-color:var(--blue-soft);box-shadow:0 6px 18px rgba(0,114,188,.5);}
.cal-panel{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:22px 24px;display:grid;grid-template-columns:1fr 1fr;gap:26px;
}
.cal-panel h3{margin:0 0 8px;font-size:14.5px;letter-spacing:.01em;color:#93BDD6;font-weight:600;}
.cal-panel .task{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.03em;margin:0 0 6px;}
.cal-panel .desc{font-size:16px;color:#D3E9F6;margin:0;word-break:keep-all;}
.cal-panel .sol{font-size:16px;color:#fff;margin:0;word-break:keep-all;padding-left:22px;position:relative;}
.cal-panel .sol::before{
  content:"✓";position:absolute;left:0;top:0;color:var(--lime);font-weight:800;
}
.cal-note{
  margin:18px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;
  font-size:14.5px;line-height:1.6;color:#8FB6D2;word-break:keep-all;
}
.cal-note .sep{
  width:1px;height:11px;background:rgba(255,255,255,.2);flex:0 0 auto;
  display:block;
}
.legend{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14.5px;font-weight:600;color:#D3E9F6;
}
.legend em{width:7px;height:7px;border-radius:50%;background:var(--lime);display:block;flex:0 0 auto;}

/* 소개 */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pain{
  border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:var(--mist-2);
}
.pain q{
  display:block;font-size:19px;font-weight:700;color:var(--blue-deep);
  letter-spacing:-.03em;line-height:1.5;margin-bottom:12px;word-break:keep-all;
}
.pain p{margin:0;font-size:16px;color:var(--slate-soft);word-break:keep-all;}
.pain-tag{
  font-family:var(--grotesk);font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--blue);display:block;margin-bottom:14px;
}
.answer{
  margin-top:22px;background:var(--grad-brand);color:#fff;border-radius:var(--r);
  padding:30px 32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.answer b{font-size:21px;font-weight:800;letter-spacing:-.035em;}
.answer p{margin:0;font-size:17px;color:#DCEFF9;flex:1;min-width:272px;word-break:keep-all;}

/* 기능 탭 */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.tab{
  border:1px solid var(--line);background:var(--white);border-radius:99px;
  padding:10px 18px;font-size:16px;font-weight:600;color:var(--slate);cursor:pointer;transition:.18s;
}
.tab:hover{border-color:var(--blue-soft);color:var(--blue);}
.tab[aria-selected="true"]{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;}
.tab span{font-family:var(--grotesk);font-size:12.5px;opacity:.6;margin-right:7px;}
.tab-hint{
  display:flex;align-items:center;gap:8px;margin:14px 0 22px;
  font-size:15.5px;font-weight:600;color:var(--blue);
}
.tab-hint svg{width:15px;height:15px;flex:0 0 auto;}

.panel{
  border:1px solid var(--line);border-radius:var(--r);background:var(--mist-2);
  overflow:hidden;
}
.panel-head{
  display:flex;align-items:flex-start;gap:22px;flex-wrap:wrap;
  padding:24px 28px;background:var(--mist);border-bottom:1px solid var(--line);
}
.ph-l{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ph-code{
  font-family:var(--grotesk);font-size:13px;font-weight:700;letter-spacing:.09em;
  color:var(--blue);flex:0 0 auto;
}
.panel h3{
  font-size:23px;font-weight:800;letter-spacing:-.04em;
  color:var(--blue-deep);margin:0;flex:0 0 auto;
}
.ph-chips{display:flex;flex-wrap:wrap;gap:5px;}
.ph-chip{
  font-size:12.5px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--blue);background:var(--white);border:1px solid var(--line);
  border-radius:6px;padding:4px 8px;
}
.ph-desc{
  margin:0;font-size:15.5px;line-height:1.6;color:var(--slate-soft);
  word-break:keep-all;flex:1;min-width:272px;
  padding-left:22px;border-left:1px solid var(--line);
}

.panel-body{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch;}
.pb-l{padding:24px 26px;display:grid;gap:14px;align-content:start;}
.pb-r{padding:24px 26px;background:var(--white);border-left:1px solid var(--line);}

.box{border-radius:12px;padding:18px 20px;border:1px solid;}
.box-h{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-family:var(--grotesk);font-size:12px;font-weight:700;letter-spacing:.13em;
}
.box-h b{
  font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:-.02em;
}
.box ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.box li{
  font-size:15.5px;line-height:1.6;color:var(--slate);word-break:keep-all;
  padding-left:17px;position:relative;
}
.box li::before{position:absolute;left:0;top:0;font-weight:800;font-size:12.5px;line-height:1.85;}

.box-issue{background:#FFF7EB;border-color:#F2DCB8;}
.box-issue .box-h{color:#B87400;}
.box-issue .box-h b{color:#8A5800;}
.box-issue li::before{content:"▲";color:#E0A03A;font-size:10.5px;}

.box-sol{background:var(--white);border-color:var(--line);}
.box-sol .box-h{color:var(--blue);}
.box-sol .box-h b{color:var(--blue-deep);}
.box-sol li{color:var(--blue-deep);font-weight:500;}
.box-sol li::before{content:"✓";color:var(--mint);}

.flow-h{
  margin:0 0 16px;font-family:var(--grotesk);font-size:12px;font-weight:700;
  letter-spacing:.13em;color:var(--slate-soft);
}
.flow-h em{font-family:var(--sans);font-style:normal;font-size:14px;letter-spacing:-.01em;font-weight:500;}
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;}
.flow-steps li{
  display:grid;grid-template-columns:27px 1fr;gap:12px;align-items:start;
  padding-bottom:16px;position:relative;
}
.flow-steps li:last-child{padding-bottom:0;}
.flow-steps li::after{
  content:"";position:absolute;left:13px;top:29px;bottom:2px;
  width:1px;background:var(--line);
}
.flow-steps li:last-child::after{display:none;}
.fs-n{
  width:27px;height:27px;border-radius:50%;flex:0 0 auto;z-index:1;
  background:var(--blue);color:#fff;display:grid;place-content:center;
  font-family:var(--grotesk);font-size:12.5px;font-weight:700;
}
.flow-steps b{
  display:block;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--blue-deep);line-height:1.5;margin-bottom:3px;word-break:keep-all;
}
.flow-steps p{margin:0;font-size:14.5px;line-height:1.55;color:var(--slate-soft);word-break:keep-all;}
.flow-out{
  margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.flow-out b{
  font-size:12.5px;font-weight:700;color:var(--slate-soft);letter-spacing:-.01em;
  margin-right:3px;white-space:nowrap;
}
.flow-out span{
  font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  color:var(--mint);background:rgba(0,181,163,.1);border-radius:6px;padding:4px 9px;
}
.fade-in{animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* 특장점 */
.strengths{background:var(--mist);}
.str-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:18px;}
.str{background:var(--white);border-radius:var(--r);padding:30px 26px;border:1px solid var(--line);}
.str .ico{
  width:46px;height:46px;border-radius:13px;background:var(--mist);color:var(--blue);
  display:grid;place-content:center;margin-bottom:18px;
}
.str .ico svg{width:23px;height:23px;}
.str h3{font-size:21px;font-weight:800;letter-spacing:-.035em;color:var(--blue-deep);margin:0 0 10px;}
.str p{margin:0;font-size:16.5px;color:var(--slate-soft);word-break:keep-all;}
.deploy-table{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
.deploy-table table{width:100%;border-collapse:collapse;font-size:16.5px;}
.deploy-table th,.deploy-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);word-break:keep-all;}
.deploy-table thead th{background:var(--blue-deep);color:#fff;font-weight:700;font-size:17px;letter-spacing:-.02em;}
/* 도입 방식 카드 */
.dcards{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.dcard{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.dc-head{padding:20px 24px 18px;}
.dcard--cloud .dc-head{background:var(--blue);}
.dcard--onprem .dc-head{background:var(--blue-deep);}
.dc-title{
  margin:0 0 6px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:19px;font-weight:800;letter-spacing:-.035em;color:#fff;
}
.dc-title em{
  font-family:var(--grotesk);font-style:normal;font-size:12.5px;font-weight:700;
  letter-spacing:.07em;white-space:nowrap;
  color:#fff;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:4px 10px;
}
.dc-sub{margin:0;font-size:15px;color:rgba(255,255,255,.78);word-break:keep-all;}
.dc-rows{margin:0;padding:4px 24px;flex:1;}
.dc-rows > div{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.dc-rows > div:last-child{border-bottom:none;}
.dc-rows dt{font-size:15.5px;color:var(--slate-soft);flex:0 0 auto;}
.dc-rows dd{
  margin:0;font-size:16px;font-weight:700;letter-spacing:-.02em;
  color:var(--blue-deep);text-align:right;word-break:keep-all;
}
.dc-note{
  margin:0;padding:15px 24px 20px;border-top:1px dashed var(--line);
  font-size:14.5px;line-height:1.6;color:var(--slate-soft);word-break:keep-all;
}
.deploy-table thead th:first-child{background:var(--blue-deep);color:#93BDD6;font-weight:500;font-size:15px;letter-spacing:.01em;}
.deploy-table tbody th{font-weight:600;color:var(--slate-soft);font-size:15.5px;width:170px;background:var(--mist-2);}
.deploy-table tr:last-child th,.deploy-table tr:last-child td{border-bottom:none;}

/* 도입절차 */
.track{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;}
.stepc{position:relative;padding-top:26px;}
.stepc::before{
  content:"";position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line);
}
.stepc::after{
  content:"";position:absolute;top:2px;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--white);border:2px solid var(--blue);
}
.stepc .sn{font-family:var(--grotesk);font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--blue);}
.stepc h4{font-size:19px;font-weight:800;letter-spacing:-.035em;color:var(--blue-deep);margin:6px 0 8px;}
.stepc p{margin:0;font-size:15.5px;color:var(--slate-soft);word-break:keep-all;}

/* 문의 */
.contact{background:var(--grad-deep);color:#D3E9F6;}
.contact .eyebrow{color:var(--blue-soft);}
.contact .sec-title{color:#fff;}
.contact .sec-lead{color:#93BDD6;}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start;}
.ways{margin:28px 0 0;display:grid;gap:10px;}
.way{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:12px;
  padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:.2s;
}
.way:hover{background:rgba(255,255,255,.11);}
.way dt{font-size:15px;color:#93BDD6;margin:0;}
.way dd{margin:0;font-family:var(--grotesk);font-size:20px;font-weight:600;color:#fff;letter-spacing:-.02em;}
form{background:var(--white);border-radius:18px;padding:32px 30px;color:var(--slate);}
form h3{font-size:23px;font-weight:800;letter-spacing:-.035em;color:var(--blue-deep);margin:0 0 6px;}
form .fhint{font-size:15.5px;color:var(--slate-soft);margin:0 0 22px;}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
label{display:block;font-size:14.5px;font-weight:600;color:var(--slate-soft);margin:0 0 6px;}
input,select,textarea{
  width:100%;font-family:var(--sans);font-size:16.5px;color:var(--slate);background:var(--mist-2);
  border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin-bottom:16px;
}
textarea{resize:vertical;min-height:98px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(0,114,188,.12);}
.consent{border-top:1px solid var(--line);margin:4px 0 20px;padding-top:16px;}
.consent-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:16px;line-height:1.6;}
.consent-check input{width:20px;height:20px;flex:0 0 20px;margin:3px 0 0;accent-color:var(--blue);cursor:pointer;}
.consent-check .req{color:var(--blue);font-weight:700;}
.consent details{margin:12px 0 0 28px;}
.consent summary{font-size:14.5px;color:var(--slate-soft);cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:3px;}
.consent summary::-webkit-details-marker{display:none;}
.consent summary::before{content:"＋ ";}
.consent details[open] summary::before{content:"－ ";}
.consent-body{margin-top:10px;padding:14px 16px;background:var(--mist-2);border-radius:10px;font-size:15px;color:var(--slate-soft);}
.consent-body dl{margin:0;display:grid;grid-template-columns:84px 1fr;gap:6px 12px;}
.consent-body dt{font-weight:700;color:var(--slate);}
.consent-body dd{margin:0;}
.consent-body p{margin:12px 0 0;font-size:14.5px;}
form .btn{width:100%;text-align:center;}
.btn:disabled{background:#B7CFDE;border-color:#B7CFDE;color:#fff;cursor:not-allowed;transform:none;}
.btn:disabled:hover{background:#B7CFDE;border-color:#B7CFDE;transform:none;}
.form-msg{display:none;margin-top:14px;font-size:16px;color:var(--blue-deep);background:var(--mist);border-radius:10px;padding:12px 14px;}
.form-msg.on{display:block;}

/* footer */
footer{background:#062C46;color:#8AAFC6;padding:56px 0 34px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;font-size:16px;}
.foot-grid h5{font-size:14.5px;letter-spacing:.01em;color:#93BDD6;margin:0 0 12px;font-weight:600;}
.foot-grid p{margin:0 0 6px;}
.foot-grid a:hover{color:#fff;}
.foot-brand b{font-size:22px;font-weight:800;letter-spacing:-.04em;color:#fff;display:block;margin-bottom:8px;}
.foot-bottom{
  margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.copyright{margin:0;font-family:var(--grotesk);font-size:12.5px;color:#3F7597;letter-spacing:.04em;}
.family-site{position:relative;flex:0 0 auto;}
.family-select{
  appearance:none;-webkit-appearance:none;
  font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:#D3E9F6;cursor:pointer;
  padding:12px 44px 12px 18px;min-width:238px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);border-radius:99px;
  transition:background .2s ease, border-color .2s ease;
}
.family-select:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);}
.family-select:focus-visible{outline:2px solid var(--blue-soft);outline-offset:2px;}
.family-select option{color:var(--slate);background:#fff;}
.family-select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238AAFC6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 18px center;
  background-size:13px 9px;
}


/* ── 전체 구성도 ─────────────────────────────── */
.map-wrap{
  border:1px solid var(--line);border-radius:18px;background:var(--white);
  box-shadow:var(--shadow);overflow:hidden;
}
.map-canvas{overflow-x:auto;padding:16px;-webkit-overflow-scrolling:touch;}
/* 구성도 SVG 안의 글자(.sysmap ...)는 viewBox 사용자 단위라 키우면
   상자 밖으로 넘칩니다. 대신 도식이 그려지는 크기를 키워
   화면에 찍히는 글자가 커지도록 합니다. viewBox 가 1000 이므로
   min-width 를 1000px 로 두면 좁은 화면에서도 1:1 로 읽힙니다. */
svg.sysmap{display:block;width:100%;min-width:1000px;height:auto;}
.sysmap text{font-family:var(--sans);}
.sysmap .col-box{fill:var(--mist-2);stroke:var(--line);}
.sysmap .col-title{font-size:13px;font-weight:800;fill:var(--blue-deep);text-anchor:middle;letter-spacing:-.03em;}
.sysmap .sys-box{fill:var(--white);stroke:var(--blue-soft);stroke-width:1.4;}
.sysmap .sys-title-bg{fill:var(--mist);}
.sysmap .sys-title{font-size:17px;font-weight:800;fill:var(--blue);text-anchor:middle;letter-spacing:-.035em;}
.sysmap .actor-box{fill:var(--white);stroke:var(--line);}
.sysmap .actor-name{font-size:11.5px;font-weight:700;fill:var(--blue-deep);text-anchor:middle;letter-spacing:-.03em;}
.sysmap .actor-sub{font-size:9.5px;fill:var(--slate-soft);text-anchor:middle;}
.sysmap .actor-item{font-size:9.6px;fill:var(--slate-soft);text-anchor:middle;}
.sysmap .mod-box{fill:var(--mist-2);stroke:var(--line);transition:fill .18s ease,stroke .18s ease;}
.sysmap .mod-title{font-size:13.5px;font-weight:800;fill:var(--blue-deep);letter-spacing:-.03em;}
.sysmap .mod-item{font-size:10.2px;fill:var(--slate);}
.sysmap .dot{fill:var(--blue-soft);}
/* 필수 구성 모듈 */
.sysmap .mod--req{cursor:default;}
.sysmap .mod--req .mod-box{fill:var(--mist);stroke:var(--blue-soft);}
.sysmap .req-badge rect{fill:var(--blue-soft);opacity:.16;}
.sysmap .req-badge text{
  font-size:9.5px;font-weight:700;fill:var(--blue);text-anchor:middle;letter-spacing:-.01em;
}
/* 선택 모듈 */
.sysmap .mod--opt{cursor:pointer;}
.sysmap .mod--opt .mod-box{stroke-dasharray:6 4;}
.sysmap .mod--opt:hover .mod-box{fill:var(--mist);stroke:var(--blue-soft);}
.sysmap .mod--opt[aria-checked="true"] .mod-box{
  fill:var(--mist);stroke:var(--blue);stroke-width:2;stroke-dasharray:none;
}
.sysmap .mod--opt[aria-checked="true"] .chk-bg{fill:var(--blue);stroke:var(--blue);}
.sysmap .mod--opt[aria-checked="true"] .chk-mark{opacity:1;}
/* 산출물 */
.sysmap .mod--out .mod-box{fill:var(--white);stroke-dasharray:5 4;}
.sysmap .mod--out .mod-title{fill:var(--slate-soft);font-size:12px;}
.sysmap .chk-bg{fill:var(--white);stroke:var(--line);stroke-width:1.4;}
.sysmap .chk-mark{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;}
.sysmap .arrow{fill:none;stroke-width:1.5;}
.sysmap .arrow--in{stroke:var(--blue-soft);}
.sysmap .arrow--flow{stroke:var(--mint);stroke-width:1.6;}
.sysmap .arrow--link{stroke:var(--blue-soft);stroke-dasharray:4 3;}
.sysmap .mk-mint{fill:var(--mint);}
.sysmap .mk-blue{fill:var(--blue-soft);}
.sysmap .flow-label rect{fill:var(--white);stroke:var(--mint);}
.sysmap .flow-label text{font-size:9px;font-weight:700;fill:var(--mint);text-anchor:middle;}
.sysmap .iface rect{fill:var(--blue-deep);}
.sysmap .iface-t{font-size:10.5px;font-weight:600;fill:#D3E9F6;text-anchor:middle;letter-spacing:.05em;}
.sysmap .mod:focus-visible{outline:none;}
.sysmap .mod:focus-visible .mod-box{stroke:var(--blue);stroke-width:2.5;}

.map-legend{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  padding:0 18px 16px;font-size:14.5px;color:var(--slate-soft);
}
.lg{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.lg em{width:17px;height:12px;border-radius:3px;display:block;background:var(--mist-2);border:1px solid var(--line);}
.lg em.req{background:var(--mist);border-color:var(--blue-soft);}
.lg em.opt{background:var(--mist-2);border-style:dashed;}
.lg em.sel{background:var(--mist);border:2px solid var(--blue);}
.lg em.out{background:var(--white);border-style:dashed;}
.lg em.flow{height:0;border:none;border-top:2px solid var(--mint);border-radius:0;}
.map-hint{display:none;}

/* 선택 트레이 */
.pick{
  margin-top:18px;border:1px solid var(--line);border-radius:16px;background:var(--mist-2);
  padding:22px 24px;display:grid;grid-template-columns:1fr 252px;gap:22px;align-items:start;
}
.pick-head{font-size:15px;font-weight:700;color:var(--blue-deep);margin:0 0 12px;letter-spacing:-.02em;}
.pick-head b{font-family:var(--grotesk);font-size:19px;color:var(--blue);margin:0 3px;}
.pick-plus{color:var(--slate-soft);font-weight:500;margin:0 4px;}
.chips{display:flex;flex-wrap:wrap;gap:7px;min-height:36px;align-items:flex-start;}
.chip{
  background:var(--blue);color:#fff;font-size:14.5px;font-weight:600;border:none;
  border-radius:99px;padding:7px 12px;display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;font-family:inherit;letter-spacing:-.01em;transition:.15s;
}
.chip:hover{background:var(--blue-deep);}
.chip i{font-style:normal;opacity:.65;font-size:15px;line-height:1;}
.chip-empty{font-size:15.5px;color:var(--slate-soft);margin:4px 0 0;word-break:keep-all;}
.pick-actions{display:grid;gap:8px;}
.pick-actions .btn{width:100%;text-align:center;padding:13px 18px;font-size:16.5px;}
.mini-row{display:flex;gap:8px;}
.mini{
  flex:1;background:var(--white);border:1px solid var(--line);border-radius:99px;
  padding:9px 10px;font-size:14.5px;font-weight:600;color:var(--slate-soft);cursor:pointer;transition:.15s;
}
.mini:hover{border-color:var(--blue-soft);color:var(--blue);}

/* BEFORE / AFTER */
.change{background:var(--mist-2);}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ba{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:22px 24px 20px;position:relative;overflow:hidden;
  transition:transform .28s var(--ease,cubic-bezier(.22,1,.36,1)),
             box-shadow .28s ease, border-color .28s ease;
}
.ba::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--blue);transform:scaleY(0);transform-origin:top;
  transition:transform .32s cubic-bezier(.22,1,.36,1);
}
.ba:hover{
  transform:translateY(-4px);
  border-color:var(--blue-soft);
  box-shadow:0 6px 14px rgba(6,45,72,.06), 0 18px 40px rgba(6,45,72,.11);
}
.ba:hover::before{transform:scaleY(1);}

.ba-topic{
  display:block;font-size:15px;font-weight:700;letter-spacing:-.02em;
  color:var(--blue-deep);margin-bottom:15px;
}
.ba p{margin:0;word-break:keep-all;display:flex;gap:11px;align-items:flex-start;}
.ba p i{
  font-family:var(--grotesk);font-style:normal;font-size:11px;font-weight:700;
  letter-spacing:.1em;padding:4px 7px;border-radius:5px;flex:0 0 auto;margin-top:2px;
  transition:background .28s ease, color .28s ease;
}
.ba .b{
  margin-bottom:12px;padding:0 2px;
  font-size:15.5px;line-height:1.6;color:var(--slate-soft);
  transition:opacity .28s ease;
}
.ba .b i{background:var(--mist-2);border:1px solid var(--line);color:var(--slate-soft);margin-top:1px;}
.ba:hover .b{opacity:.62;}

.ba .a{
  font-size:16.5px;font-weight:700;line-height:1.6;color:var(--blue-deep);
  background:var(--mist);border-radius:11px;padding:13px 15px;
  transition:background .28s ease, color .28s ease;
}
.ba .a i{background:var(--mint);color:#fff;}
.ba:hover .a{background:var(--blue);color:#fff;}
.ba:hover .a i{background:#fff;color:var(--blue);}

@media (prefers-reduced-motion:reduce){
  .ba,.ba::before,.ba p i,.ba .b,.ba .a{transition:none;}
  .ba:hover{transform:none;}
}

/* 고객사 */
.clients{display:flex;flex-wrap:wrap;gap:8px;}
.client{
  background:var(--white);border:1px solid var(--line);border-radius:9px;
  padding:9px 14px;font-size:15px;font-weight:500;color:var(--slate);white-space:nowrap;
}
.clients-note{margin:16px 0 0;font-size:15px;color:var(--slate-soft);word-break:keep-all;}

/* 견적 */
.price-note{margin:18px 0 0;font-size:15px;color:var(--slate-soft);word-break:keep-all;}
.ptables{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ptable{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--shadow);
}
.pt-head{
  margin:0;padding:17px 22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:18px;font-weight:800;letter-spacing:-.035em;color:#fff;
}
.ptable--cloud .pt-head{background:var(--blue);}
.ptable--onprem .pt-head{background:var(--blue-deep);}
.pt-head em{
  font-family:var(--grotesk);font-style:normal;font-size:12px;font-weight:700;
  letter-spacing:.07em;white-space:nowrap;color:#fff;
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);
  border-radius:99px;padding:4px 10px;
}
.ptable table{width:100%;border-collapse:collapse;}
.ptable thead th{
  padding:11px 20px;text-align:right;font-size:13px;font-weight:600;
  color:var(--slate-soft);background:var(--mist-2);border-bottom:1px solid var(--line);
}
.ptable thead th:first-child{text-align:left;}
.ptable tbody th{
  padding:16px 20px;text-align:left;font-size:16px;font-weight:700;
  letter-spacing:-.02em;color:var(--blue-deep);border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.ptable tbody th span{
  display:block;font-size:13px;font-weight:500;color:var(--slate-soft);
  letter-spacing:0;margin-top:2px;
}
.ptable tbody td{
  padding:16px 20px;text-align:right;border-bottom:1px solid var(--line);
  font-family:var(--grotesk);font-size:17px;font-weight:600;color:var(--blue-deep);
  white-space:nowrap;
}
.ptable thead th:last-child::after{content:" (월)";font-weight:500;}
.pt-note{
  margin:0;padding:14px 22px 18px;font-size:14.5px;line-height:1.6;
  color:var(--slate-soft);word-break:keep-all;
}
@media (max-width:560px), (max-device-width:600px){
  .ptable thead{display:none;}
  .ptable table,.ptable tbody,.ptable tbody tr{display:block;width:100%;}
  .ptable tbody tr{
    padding:15px 20px;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 14px;
  }
  .ptable tbody tr:last-child{border-bottom:none;}
  .ptable tbody th{
    grid-column:1;grid-row:1 / span 2;padding:0;border-bottom:none;
    align-self:center;
  }
  .ptable tbody td{
    grid-column:2;padding:0;border-bottom:none;text-align:right;
    font-size:16px;display:flex;align-items:baseline;justify-content:flex-end;gap:7px;
  }
  .ptable tbody td::before{
    content:attr(data-l);font-family:var(--sans);font-size:12.5px;font-weight:500;
    color:var(--slate-soft);white-space:nowrap;
  }
  .pt-head{padding:15px 20px;font-size:16.5px;}
}
.deploy-table td.num{font-family:var(--grotesk);font-weight:600;color:var(--blue-deep);}
.lbl-hint{font-weight:500;color:var(--slate-soft);letter-spacing:0;}
input[readonly]{background:var(--mist);color:var(--blue-deep);font-weight:600;}

/* 메뉴가 6개로 늘어 좁은 화면에서 겹치지 않도록 */
.nav-links a{white-space:nowrap;}
@media (min-width:721px){ .brand-txt b{white-space:nowrap;} }
@media (max-width:1320px) and (min-width:721px){
  .nav{gap:16px;}
  .nav-links{gap:15px;font-size:15.5px;}
  .brand-txt b{font-size:17px;}
  .brand-txt span{font-size:9.5px;}
  .mark{width:30px;height:30px;font-size:15px;}
  .nav-cta{padding:10px 15px;font-size:15px;}
}
@media (max-width:1140px){
  .brand-txt,.brand-divider{display:none;}
}
/* 메뉴 글자를 키운 만큼, 햄버거로 넘어가기 직전 구간에서 헤더가
   넘치지 않도록 한 단계를 더 둔다. */
@media (max-width:1000px) and (min-width:721px){
  .nav{gap:12px;}
  .nav-links{gap:12px;font-size:14.5px;}
  .nav-cta{padding:10px 13px;font-size:14px;}
}
@media (max-width:520px), (max-device-width:600px){
  .brand-logo{height:26px;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.hero-tail{padding-top:64px;}
.hero-top{padding-bottom:56px;}
.reveal{opacity:0;transform:translateY(16px);}
.reveal.seen{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease;}

@media (max-width:1120px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .hero-top{grid-template-columns:1fr;gap:36px;align-items:start;}
  .statband-inner{grid-template-columns:1fr 1fr;}
  .stat{padding:28px 20px;}
  .stat:nth-child(3){border-left:none;padding-left:0;}
  .stat:nth-child(2){padding-right:0;}
  .months{grid-template-columns:repeat(6,1fr);}
  .cal-panel{grid-template-columns:1fr;gap:18px;}
  .pains{grid-template-columns:1fr;}
  .panel-body{grid-template-columns:1fr;}
  .pb-r{border-left:none;border-top:1px solid var(--line);}
  .ph-desc{padding-left:0;border-left:none;}
  .str-grid{grid-template-columns:1fr;}
  .track{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;}
  .family-select{width:100%;}
  .foot-grid{grid-template-columns:1fr;}
  .ba-grid{grid-template-columns:1fr;}
  .dcards{grid-template-columns:1fr;}
  .ptables{grid-template-columns:1fr;}
  .pick{grid-template-columns:1fr;gap:18px;}
}
@media (max-width:720px), (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;gap:0;padding:6px var(--wrap-pad) 14px;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
  .demo-body{grid-template-columns:1fr;}
  .pane-l{border-right:none;border-bottom:1px dashed var(--line);}
  .arrow{padding:10px 0;transform:rotate(90deg);}
  .stamp{right:14px;bottom:10px;width:62px;height:62px;font-size:16px;}
  .ag-list{max-width:none;}
  .wrap{--wrap-pad:22px;}
  .sec{padding:66px 0;}
  .cal-note .sep{display:none;}
  .cal-note{gap:6px 12px;}
  .hero-tail{padding-top:44px;}
  .hero-top{padding-bottom:40px;}
  .stat{padding:22px 12px;}
  .stat b{font-size:23.5px;margin-bottom:6px;}
  .stat span{font-size:13.5px;}
  .stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.13);}
  .cal{padding:24px 18px 26px;border-radius:16px 16px 0 0;}
  .months{grid-template-columns:repeat(4,1fr);}
  .track{grid-template-columns:1fr;}
  .stepc::before{display:none;}
  .frow{grid-template-columns:1fr;}
  .deploy-table tbody th{width:96px;padding:14px 12px;}
  .deploy-table th,.deploy-table td{padding:14px 12px;font-size:16px;}
  .map-canvas{padding:12px;}
  .map-hint{display:block;margin:0 0 12px;font-size:14px;color:var(--slate-soft);}
  .pick{padding:18px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
  .reveal{opacity:1;transform:none;}
  html{scroll-behavior:auto;}
}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px;}
.cal :focus-visible{outline-color:#fff;}

/* ==========================================================================
   모바일·웹뷰 공통 보정
   폰트 크기는 원본 그대로입니다. max-width 하나로만 판정하면 viewport 를
   무시하고 980px 로 그리는 환경에서 모바일 규칙이 전부 빗나가므로,
   기기 폭과 포인터 종류로도 판정하도록 조건만 넓혔습니다.
   ========================================================================== */
@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  html,body{max-width:100%;overflow-x:hidden;}
  img,svg,iframe,table{max-width:100%;}
  .wrap{--wrap-pad:20px;}
  .nav-cta,.btn,.nav-toggle,.family-select,.tab,.m{min-height:44px;}

  /* 입력창이 카드 밖으로 나가지 않도록 (iOS 는 input 기본 폭이 먼저 이깁니다) */
  .frow, .field, form, .pick{min-width:0; max-width:100%;}
  input,select,textarea{
    display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  }
  input[type="checkbox"],input[type="radio"],input[type="hidden"]{
    display:inline-block; width:auto; min-width:0;
  }
}


/* ==========================================================================
   MOBILE 세부 조정
   ========================================================================== */
@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){

  /* ---------- 1. 첫 화면 위쪽 여백 ---------- */
  .hero{padding-top:22px;}
  .pill{margin-bottom:16px; padding:5px 12px 5px 7px; font-size:13.5px;}
  .hero-top{gap:28px; padding-bottom:30px;}

  /* ---------- 2. 히어로 문단 줄바꿈 ----------
     word-break:keep-all 이라 한글은 어절 단위로만 끊깁니다. 글자를 조금
     줄여 한 줄에 들어가는 어절 수를 늘리고, 마지막 줄이 홀로 떨어지지
     않도록 text-wrap:pretty 를 겁니다. */
  .hero-top > div:first-child > p{
    font-size:17px; line-height:1.62; max-width:none; text-wrap:pretty;
  }

  /* ---------- 4. 모듈 탭 : 3열 2줄 ---------- */
  .tabs{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:7px; margin-bottom:18px;
  }
  .tab{
    display:flex; align-items:center; justify-content:center; gap:4px;
    padding:11px 6px; border-radius:12px;
    font-size:12.5px; line-height:1.3; text-align:center; word-break:keep-all;
  }
  .tab span{font-size:11px; margin-right:0; opacity:.65;}
  .tab-hint{font-size:14px; line-height:1.5; margin:10px 0 16px; align-items:flex-start;}
  .tab-hint svg{margin-top:3px;}

  /* ---------- 5. 도입 절차 : 세로 타임라인 ----------
     카드마다 26px 씩 위 여백을 두고 세로로 쌓여 화면을 다 잡아먹었습니다.
     번호 마커와 연결선을 왼쪽으로 옮기고 단계 사이에 구분선을 넣습니다. */
  .track{grid-template-columns:1fr; gap:0;}
  .stepc{
    position:relative; padding:14px 0 14px 40px;
    border-top:1px solid var(--line);
  }
  .stepc:first-child{border-top:none; padding-top:4px;}
  .stepc::before{
    content:""; display:block; position:absolute;
    left:12px; top:0; right:auto; bottom:0;
    width:2px; height:auto; background:var(--line);
  }
  .stepc:first-child::before{top:14px;}
  .stepc:last-child::before{bottom:auto; height:22px;}
  .stepc::after{left:7px; top:16px; width:12px; height:12px;}
  .stepc:first-child::after{top:6px;}
  .stepc .sn{display:block; font-size:11px; letter-spacing:.1em; margin-bottom:1px;}
  .stepc h4{font-size:16.5px; margin:0 0 4px;}
  .stepc p{font-size:14px; line-height:1.55;}

  /* ---------- 6. 푸터 ---------- */
  .foot-grid{gap:22px; font-size:14px;}
  .foot-grid h5{
    font-size:11px; letter-spacing:.12em; margin:0 0 8px;
    font-family:var(--grotesk); text-transform:uppercase;
  }
  .foot-grid p{margin:0; line-height:1.5;}
  .foot-grid a{display:inline-block; padding:5px 0;}
  .foot-logo{height:27px; margin-bottom:10px;}
  .foot-brand p{font-size:13px; line-height:1.6; margin:0 0 2px;}

  /* 바로가기 5개는 2열로 접어 세로 길이를 줄입니다 */
  .foot-grid > div:nth-child(2){display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}
  .foot-grid > div:nth-child(2) h5{grid-column:1 / -1;}

  .foot-grid > div:nth-child(3) p{margin-bottom:2px;}
  .foot-bottom{margin-top:24px; padding-top:16px; gap:14px;}
  .copyright{font-size:11px; letter-spacing:.03em;}
}

/* ==========================================================================
   모듈 탭 선택 색 — 남색(#0A3754)이 너무 어두워 브랜드 블루로 (PC·모바일 공통)
   ========================================================================== */
.tab[aria-selected="true"]{
  background:var(--blue); border-color:var(--blue); color:#fff;
}
.tab[aria-selected="true"] span{opacity:.8;}


/* ==========================================================================
   MOBILE 세부 조정 (2차)
   ========================================================================== */
@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){

  /* ---------- 1. 첫 화면 위쪽 여백 : 원래 76px, 지난번 22px → 절반 지점 ---------- */
  .hero{padding-top:48px;}
  .pill{margin-bottom:20px;}

  /* ---------- 2. 줄바꿈을 폭에 꽉 채워서 ----------
     word-break:keep-all 은 한글을 어절 단위로만 끊어서 오른쪽이 들쭉날쭉해집니다.
     normal 로 되돌리면 음절 단위로 끊겨 줄이 꽉 찹니다. */
  .sec-title, .sec-lead, h1, .hero-top > div:first-child > p, .stat b, .stat span,
  .demo-foot p, .cal-head p, .cal-panel .desc, .cal-panel .sol, .cal-note, .pain q,
  .pain p, .answer p, .ph-desc, .box li, .flow-steps b, .flow-steps p, .str p,
  .deploy-table th,.deploy-table td, .dc-sub, .dc-rows dd, .dc-note, .stepc p,
  .chip-empty, .ba p, .clients-note, .price-note, .pt-note, .tab{word-break:normal; overflow-wrap:break-word;}

  /* ---------- 3. 달력 박스 아래 모서리 ---------- */
  .cal{border-radius:16px;}

  /* ---------- 6. 헤더 : 버튼 크기와 간격 ---------- */
  .nav{height:64px; gap:10px;}
  .brand-logo{height:26px;}
  .nav-cta{font-size:14px; font-weight:600; padding:9px 15px;}
  .nav-toggle{padding:9px 11px; font-size:13.5px; border-radius:9px;}
  .nav-links{top:64px;}
}

/* ==========================================================================
   4. 섹션 라벨(eyebrow) 앞에 점 — 제목이라는 티가 나도록 (PC·모바일 공통)
   ========================================================================== */
.eyebrow{display:flex; align-items:center; gap:9px;}
.eyebrow::before{
  content:""; flex:0 0 auto; width:7px; height:7px;
  border-radius:50%; background:currentColor;
}

/* ==========================================================================
   5. 도입 현황 회사 칩 — 알약형으로 정리 (PC·모바일 공통)
   ========================================================================== */
.clients{gap:7px;}
.client{
  border-radius:99px; padding:8px 16px;
  font-size:14.5px; font-weight:600; color:var(--blue-deep);
  background:linear-gradient(180deg,#FFFFFF 0%,#F4F9FC 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(10,55,84,.05);
  transition:border-color .18s, color .18s, box-shadow .18s;
}
.client:hover{
  border-color:var(--blue-soft); color:var(--blue);
  box-shadow:0 3px 10px rgba(0,114,188,.13);
}


/* ==========================================================================
   MOBILE 타이포 정리
   .sec-title 이 clamp(30px,4vw,45px) 이라 모바일에서는 4vw=17px 이 되어
   PC 용 최소값 30px 이 그대로 쓰입니다. 제목·본문이 한 단계씩 커 보이고
   문단마다 줄이 하나씩 늘어나던 원인입니다.
   자간도 -0.04em 이라 작은 화면에서 한글이 뭉쳐 투박해 보여 완화합니다.
   ========================================================================== */
@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){

  body{line-height:1.6;}

  /* ---------- 섹션 머리 ---------- */
  .sec{padding:54px 0;}
  .sec-head{margin-bottom:26px;}
  .eyebrow{font-size:13px; gap:8px; margin:0 0 11px;}
  .eyebrow::before{width:6px; height:6px;}
  .sec-title{
    font-size:25px; line-height:1.3; letter-spacing:-.026em; margin:0 0 12px;
  }
  .sec-lead{font-size:15.5px; line-height:1.6; max-width:none;}

  /* ---------- 특장점 카드 ---------- */
  .str{padding:22px 20px;}
  .str .ico{width:38px; height:38px; border-radius:11px; margin-bottom:13px;}
  .str .ico svg{width:19px; height:19px;}
  .str h3{font-size:17.5px; font-weight:700; letter-spacing:-.022em; margin:0 0 7px;}
  .str p{font-size:14.5px; line-height:1.6;}

  /* ---------- 히어로 ---------- */
  .hero-top h1{letter-spacing:-.028em;}
  .hero-top > div:first-child > p{font-size:16px; line-height:1.6;}

  /* ---------- 그 밖의 본문 (PC 기본값이 그대로 쓰이던 것들) ---------- */
  .field, .dc-sub, .deploy-table thead th:first-child, .way dt, .consent-body,
  .family-select, .pick-head, .chip i, .ba-topic, .client, .clients-note, .price-note{font-size:13.5px;}
  .stat span, .tab-hint, .ph-desc, .box-h b, .box li, .dc-rows dt,
  .deploy-table tbody th, .stepc p, form .fhint, .chip-empty, .ba .b{font-size:14px;}
  .nav-cta, .btn, .cal-head p, .cal-panel .desc, .cal-panel .sol, .pain p, .answer p,
  .tab, .flow-steps b, .deploy-table thead th, .dc-rows dd, .consent-check, .form-msg,
  .foot-grid, .ptable tbody th, .ptable tbody td{font-size:14.5px;}
  .nav-links, .deploy-table table, input, select, textarea, .pick-actions .btn, .ba .a{font-size:15px;}
  .sec-lead, .stamp, .m b, .pt-head{font-size:15.5px;}
  .brand-txt b, .hero-top > div:first-child > p, .cal-panel .task, .pain q, .dc-title,
  .stepc h4, .pick-head b{font-size:16px;}
  .way dd{font-size:17px;}
  .answer b{font-size:18px;}
  .foot-brand b{font-size:19px;}
}


/* ==========================================================================
   위 축소 규칙 중 되돌려야 하는 두 가지
   ========================================================================== */
@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){
  /* iOS 는 입력 글자가 16px 미만이면 포커스할 때마다 화면을 확대합니다 */
  input, select, textarea, .family-select{font-size:16px;}
  /* 모듈 탭은 3열 그리드에 맞춘 크기를 유지 */
  .tab{font-size:12.5px;}
  .tab span{font-size:11px;}
}


/* ==========================================================================
   전체 구성도 — 모바일 전용 HTML 버전
   SVG(1000x684)는 좌표 기준이라 세로 화면에서 가로 스크롤이 불가피합니다.
   같은 내용을 HTML 카드로 한 벌 더 두고 화면 폭에 따라 갈아 끼웁니다.
   선택 모듈은 SVG 쪽과 같은 data-mod 를 쓰므로 기존 선택 기능이 그대로
   동작하며, 두 버전의 체크 상태가 항상 함께 갱신됩니다.
   ========================================================================== */
.sysmap-m{display:none;}
.map-hint-m{display:none;}

@media (max-width:720px),
       (max-device-width:820px),
       (hover:none) and (pointer:coarse) and (max-width:1000px){

  svg.sysmap{display:none;}
  .map-hint{display:none;}
  .map-hint-m{
    display:block; margin:0 0 14px;
    font-size:13.5px; line-height:1.55; color:var(--slate-soft);
  }
  .sysmap-m{display:block;}
  .map-canvas{padding:14px 12px 16px;}

  /* ---------- 구간 라벨 ---------- */
  .smm-band{
    display:flex; align-items:baseline; gap:9px;
    margin:20px 0 10px; padding-bottom:7px;
    border-bottom:1.5px solid var(--line);
  }
  .smm-band:first-child{margin-top:0;}
  .smm-band-t{
    font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--blue-deep);
  }
  .smm-band-n{font-size:11.5px; color:var(--slate-soft);}
  .smm-band.req .smm-band-t{color:var(--blue);}
  .smm-band.opt .smm-band-t{color:var(--blue);}

  /* ---------- 사용자 ---------- */
  .smm-actor{
    background:var(--mist); border:1px solid var(--line); border-radius:12px;
    padding:13px 14px; margin-bottom:8px;
  }
  .smm-actor b{font-size:14.5px; font-weight:700; color:var(--blue-deep);}
  .smm-actor em{font-style:normal; font-size:12px; color:var(--slate-soft); margin-left:5px;}
  .smm-actor ul{
    list-style:none; margin:8px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:3px 10px;
  }
  .smm-actor li{font-size:12.5px; line-height:1.5; color:var(--slate-soft);}

  /* ---------- 연결 화살표 ---------- */
  .smm-arrow{
    position:relative; text-align:center; margin:14px 0;
  }
  .smm-arrow::before{
    content:""; display:block; width:2px; height:34px; margin:0 auto;
    background:linear-gradient(180deg,var(--line),var(--blue-soft));
  }
  .smm-arrow span{
    display:inline-block; margin-top:6px; padding:3px 11px;
    background:var(--white); border:1px solid var(--line); border-radius:99px;
    font-size:11.5px; font-weight:600; color:var(--blue);
  }

  /* ---------- 시스템 제목 ---------- */
  .smm-sys{
    background:var(--blue-deep); color:#fff; border-radius:12px;
    padding:13px 14px; text-align:center;
    font-size:14px; font-weight:700; letter-spacing:-.02em; line-height:1.45;
  }

  /* ---------- 모듈 카드 ---------- */
  .smm-mod{
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    padding:12px 14px 13px; margin-bottom:8px;
  }
  .smm-h{display:flex; align-items:center; gap:7px;}
  .smm-h b{font-size:14.5px; font-weight:700; color:var(--blue-deep);}
  .smm-h em{font-style:normal; font-size:11.5px; color:var(--slate-soft);}
  .smm-req{
    margin-left:auto; padding:2px 8px; border-radius:99px;
    background:var(--mist); color:var(--blue);
    font-size:10.5px; font-weight:700; letter-spacing:.02em;
  }
  .smm-mod ul{
    list-style:none; margin:9px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:3px 10px;
  }
  .smm-mod li{
    position:relative; padding-left:9px;
    font-size:12.5px; line-height:1.5; color:var(--slate-soft);
  }
  .smm-mod li::before{
    content:""; position:absolute; left:0; top:8px;
    width:3px; height:3px; border-radius:50%; background:var(--blue-soft);
  }

  /* 선택 가능한 카드 */
  .smm-mod.is-opt{
    border:1.5px dashed var(--blue-soft); background:#FBFDFE;
    cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s;
  }
  .smm-mod.is-opt[aria-checked="true"]{
    border-style:solid; border-color:var(--blue); background:var(--mist);
    box-shadow:0 2px 10px rgba(0,114,188,.13);
  }
  .smm-mod.is-opt[aria-checked="true"] .smm-h b{color:var(--blue);}
  .smm-mod.is-opt:focus-visible{outline:2.5px solid var(--blue); outline-offset:2px;}

  /* 산출물 상자 */
  .smm-out{
    background:var(--mist-2); border:1px dashed var(--line); border-radius:12px;
    padding:12px 14px; margin-bottom:8px;
  }
  .smm-out b{font-size:13px; font-weight:700; color:var(--slate);}
  .smm-out ul{
    list-style:none; margin:7px 0 0; padding:0;
    display:flex; flex-wrap:wrap; gap:5px 14px;
  }
  .smm-out li{font-size:12px; color:var(--slate-soft);}
}

/* 항목이 두 열에 안 들어가는 아주 좁은 화면 */
@media (max-width:400px){
  .smm-mod ul, .smm-actor ul{grid-template-columns:1fr;}
}