/* 위즈인포텍 Ver5 — 점검 보고서형 */
:root{
  --bg:#F2F4F7; --paper:#FFFFFF; --ink:#142131; --ink2:#2B3A4C; --muted:#5A6777; --line:#D6DDE5; --line2:#E6EBF0;
  --blue:#0A6CFF; --blue-ink:#0B55CC; --blue-bg:#E8F1FF;
  --ok:#14805A; --ok-bg:#E3F4EC; --warn:#9A6A00; --warn-bg:#FFF2C9; --crit:#C23434; --crit-bg:#FCE7E7; --info:#3D5A80; --info-bg:#E8EEF6;
  --tbd-bg:#FFF4B8; --tbd-ink:#5A4A00; --tbd-line:#C9A800;
  --foot:#142131; --foot-ink:#C3CDD8;
  --shadow:0 1px 0 rgba(20,33,49,.04),0 16px 36px -22px rgba(20,33,49,.35);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E151D; --paper:#16202B; --ink:#E7EDF3; --ink2:#C9D3DD; --muted:#98A6B5; --line:#2A3746; --line2:#223040;
    --blue:#4C93FF; --blue-ink:#7DB0FF; --blue-bg:#16294A;
    --ok:#4CC492; --ok-bg:#12352A; --warn:#E8B93C; --warn-bg:#3A2F10; --crit:#FF7A7A; --crit-bg:#3E1C1C; --info:#9DB6D6; --info-bg:#1E2B3C;
    --tbd-bg:#3A3414; --tbd-ink:#FFE680; --tbd-line:#8A7300;
    --foot:#0A1017; --foot-ink:#A9B6C4;
    --shadow:0 1px 0 rgba(0,0,0,.3),0 16px 36px -22px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E151D; --paper:#16202B; --ink:#E7EDF3; --ink2:#C9D3DD; --muted:#98A6B5; --line:#2A3746; --line2:#223040;
  --blue:#4C93FF; --blue-ink:#7DB0FF; --blue-bg:#16294A;
  --ok:#4CC492; --ok-bg:#12352A; --warn:#E8B93C; --warn-bg:#3A2F10; --crit:#FF7A7A; --crit-bg:#3E1C1C; --info:#9DB6D6; --info-bg:#1E2B3C;
  --tbd-bg:#3A3414; --tbd-ink:#FFE680; --tbd-line:#8A7300;
  --foot:#0A1017; --foot-ink:#A9B6C4;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 16px 36px -22px rgba(0,0,0,.8);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:16px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--blue-ink)}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--paper);padding:8px 12px;z-index:200}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:max(24px,env(safe-area-inset-left,0px)) max(24px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 임시 내용 표시 */
.tbd{background:var(--tbd-bg);color:var(--tbd-ink);border-bottom:1px dashed var(--tbd-line);padding:0 4px;border-radius:3px}
.tbd-tag{display:inline-block;background:var(--tbd-bg);color:var(--tbd-ink);border:1px dashed var(--tbd-line);font-size:13px;padding:2px 10px;border-radius:999px}
.tbd-bar{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:70;max-width:min(360px,calc(100vw - 32px));background:var(--tbd-bg);color:var(--tbd-ink);border:1px solid var(--tbd-line);border-radius:8px;padding:10px 12px 10px 14px;font-size:13px;line-height:1.5;display:flex;gap:10px;align-items:flex-start;box-shadow:var(--shadow)}
.tbd-bar[hidden]{display:none}
.tbd-bar button{border:0;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;padding:2px 4px}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:6px;font:600 16px/1 inherit;font-family:inherit;text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--blue);color:#fff}
.btn-p:hover{background:var(--blue-ink)}
:root[data-theme="dark"] .btn-p:hover{background:#2F7DF0}
.btn-o{background:var(--paper);color:var(--ink);border-color:var(--line)}
.btn-o:hover{border-color:var(--ink2)}
.btn-tel b{font-variant-numeric:tabular-nums}
.btn-tel .dot,.hd-sos .dot{width:8px;height:8px;border-radius:50%;background:var(--crit);display:inline-block;flex-shrink:0}
.btns{display:flex;flex-wrap:wrap;gap:10px}

/* 머리말 */
.hd{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:28px;height:68px}
.logo{display:flex;align-items:center;flex-shrink:0;min-height:44px}
.logo img{height:26px;width:auto;display:block}
.logo .lw{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .lc{display:none}:root:not([data-theme="light"]) .logo .lw{display:block}}
:root[data-theme="dark"] .logo .lc{display:none}
:root[data-theme="dark"] .logo .lw{display:block}
.gnb{display:flex;gap:26px;margin-left:12px}
.gnb a{color:var(--ink2);text-decoration:none;font-weight:500;font-size:15px;padding:22px 0;border-bottom:2px solid transparent}
.gnb a:hover{color:var(--ink)}
.gnb a[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--blue)}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.hd-sos{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:14px}
.hd-sos span{color:var(--muted)}
.hd-sos b{font-size:16px;font-variant-numeric:tabular-nums}
.hd-r .btn{min-height:40px;padding:0 16px;font-size:15px}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;border-radius:6px;margin-right:-10px}
@media (max-width:1080px){
  .gnb,.hd-r .btn{display:none}
  .burger{display:grid;place-items:center}
  .hd-r{gap:4px}
}
@media (max-width:520px){.hd-sos span{display:none}.hd-sos b{font-size:15px}}

/* 휴대폰·태블릿 메뉴 (위에서 내려옴) */
.mm{position:fixed;inset:0;z-index:100;visibility:hidden;pointer-events:none;transition:visibility 0s linear .28s}
.mm.open{visibility:visible;pointer-events:auto;transition:visibility 0s}
.mm-scrim{position:absolute;inset:0;background:rgba(10,18,28,.5);opacity:0;transition:opacity .28s}
.mm.open .mm-scrim{opacity:1}
.mm-panel{position:absolute;top:0;left:0;right:0;max-height:100dvh;overflow-y:auto;background:var(--paper);border-bottom:1px solid var(--line);
  padding:env(safe-area-inset-top,0px) max(24px,calc((100% - 1132px)/2)) 24px;transform:translateY(-100%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow)}
.mm.open .mm-panel{transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;height:68px;border-bottom:1px solid var(--line)}
.mm-x{width:44px;height:44px;border:0;background:transparent;color:var(--ink);cursor:pointer;margin-right:-10px;display:grid;place-items:center;border-radius:6px}
.mm-row{display:grid;grid-template-columns:88px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line2)}
.mm-row p{font-size:13px;color:var(--muted)}
.mm-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px 32px}
.mm-row a{display:block;padding:8px 0;font-size:19px;font-weight:500;color:var(--ink);text-decoration:none}
.mm-row a[aria-current="page"]{font-weight:700;color:var(--blue-ink)}
.mm-foot{display:flex;flex-wrap:wrap;gap:10px;padding-top:20px}
@media (max-width:640px){
  .mm-row{grid-template-columns:1fr;gap:4px}
  .mm-row ul{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .mm-row a{font-size:17px}
  .mm-foot .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.mm,.mm-panel,.mm-scrim{transition:none}}

/* 휴대폰 하단 고정 버튼 */
.dock{display:none}
@media (max-width:760px){
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px))}
  .dock .btn{min-height:46px;font-size:15px;padding:0 10px}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .tbd-bar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}

/* 구역 */
.sec{padding:88px 0}
.sec.paper{background:var(--paper);border-block:1px solid var(--line2)}
.sec-h{max-width:720px;margin-bottom:36px}
.sec-h h2{font-size:clamp(26px,3vw,36px);font-weight:700}
.sec-h p{margin-top:12px;color:var(--muted);font-size:17px}
.more{display:inline-block;margin-top:24px;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.basis{display:inline-block;font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 10px;margin-right:6px}
.fine{font-size:14px;color:var(--muted);margin-top:16px}
@media (max-width:760px){.sec{padding:60px 0}.sec-h{margin-bottom:28px}.sec-h p{font-size:16px}}

/* 첫 화면 */
.hero{padding:64px 0 80px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.22}
.hero .lead{margin-top:20px;font-size:18px;color:var(--ink2);max-width:560px}
.hero .btns{margin-top:32px}
.facts{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--line)}
.facts li{padding:16px 16px 0 0}
.facts b{display:block;font-size:16px}
.facts span{font-size:14px;color:var(--muted)}
.sub{padding:52px 0 64px;border-bottom:1px solid var(--line2)}
.sub .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:56px;align-items:center}
.crumb{font-size:14px;color:var(--muted);margin-bottom:16px}
.crumb a{color:inherit}
.sub h1{font-size:clamp(30px,3.8vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.25}
.sub .lead{margin-top:16px;font-size:17px;color:var(--ink2);max-width:560px}
.sub .btns{margin-top:28px}
.sub.plain .wrap{grid-template-columns:minmax(0,1fr)}
@media (max-width:960px){
  .hero .wrap,.sub .wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero{padding:40px 0 60px}
  .sub{padding:36px 0 48px}
}
@media (max-width:560px){.facts{grid-template-columns:1fr}.facts li{padding:12px 0;border-bottom:1px solid var(--line2)}.hero .btns .btn{flex:1 1 100%}}

/* 점검 시트 (이 시안의 기본 단위) */
.sheet{background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.sheet-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.sheet-hd h2,.sheet-hd h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.sheet-hd .meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.sheet-ex{display:inline-block;font-size:12px;font-weight:600;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 6px;margin-left:8px;vertical-align:2px}
.sheet ul{list-style:none}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:13px 20px;border-bottom:1px dashed var(--line)}
.srow:last-child{border-bottom:0}
.srow b{display:block;font-weight:500;font-size:15px}
.srow small{display:block;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sheet-ft{padding:14px 20px 16px;background:var(--line2);font-size:14px;color:var(--ink2)}
.sheet-ft strong{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-bottom:2px}
.sheet-note{font-size:13px;color:var(--muted);margin-top:10px}

/* 상태 표시 (모양+글자로 구분, 색에만 의존하지 않음) */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.5}
.chip::before{content:"";width:8px;height:8px;flex-shrink:0}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.ok::before{background:currentColor;border-radius:50%}
.chip.warn{background:var(--warn-bg);color:var(--warn)}.chip.warn::before{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid currentColor}
.chip.crit{background:var(--crit-bg);color:var(--crit)}.chip.crit::before{background:currentColor;border-radius:1px}
.chip.info{background:var(--info-bg);color:var(--info)}.chip.info::before{border:2px solid currentColor;border-radius:50%;width:9px;height:9px}

/* 상황 선택 */
.pick{list-style:none;display:grid;gap:10px}
.pick a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;gap:20px;align-items:center;padding:20px 24px;background:var(--paper);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink)}
.pick a:hover{border-color:var(--blue)}
.pick b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.pick span.d{display:block;color:var(--muted);font-size:15px;margin-top:2px}
.pick .go{font-size:15px;font-weight:600;color:var(--blue-ink)}
.pick .chip{justify-self:start}
@media (max-width:760px){
  .pick a{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px}
  .pick .go{display:none}
  .pick b{font-size:17px}
}

/* 표 */
.tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:var(--shadow)}
.tbl{width:100%;border-collapse:collapse;min-width:720px;font-size:15px}
.tbl th,.tbl td{padding:14px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line2)}
.tbl thead th{font-size:14px;color:var(--muted);font-weight:600;background:var(--line2);border-bottom:1px solid var(--line)}
.tbl thead th.hl{color:var(--ink)}
.tbl tbody th{font-weight:600;width:170px;color:var(--ink2)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.tbl caption{caption-side:bottom;text-align:left;padding:12px 18px;font-size:13px;color:var(--muted);border-top:1px solid var(--line2)}
.scroll-hint{display:none;font-size:13px;color:var(--muted);margin-bottom:8px}
@media (max-width:760px){.scroll-hint{display:block}}

/* 인프라 구성 (위에서 아래로 쌓인 층) */
.stack{list-style:none;display:grid;gap:4px}
.stack li{display:grid;grid-template-columns:220px minmax(0,1fr) 170px;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--line);padding:20px 24px}
.stack li:first-child{border-radius:8px 8px 0 0}
.stack li:last-child{border-radius:0 0 8px 8px}
.stack h3{font-size:18px}
.stack .pr{display:block;font-size:13px;color:var(--muted);margin-top:4px}
.stack p{color:var(--ink2);font-size:15px}
.stack .who{justify-self:end;font-size:13px;font-weight:600;padding:4px 10px;border-radius:4px;background:var(--blue-bg);color:var(--blue-ink)}
.stack .who.pt{background:var(--line2);color:var(--ink2)}
.stack a{color:inherit;text-decoration:none}
.stack a:hover h3{color:var(--blue-ink)}
@media (max-width:860px){
  .stack li{grid-template-columns:minmax(0,1fr);gap:8px}
  .stack .who{justify-self:start}
}

/* 3-2-1 */
.rule{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;background:var(--paper);box-shadow:var(--shadow)}
.rule > div{padding:28px 26px}
.rule > div + div{border-left:1px solid var(--line)}
.rule .n{font-size:56px;font-weight:700;line-height:1;color:var(--blue);font-variant-numeric:tabular-nums}
.rule h3{font-size:18px;margin-top:14px}
.rule p{color:var(--ink2);font-size:15px;margin-top:6px}
.rule-plus{margin-top:14px;padding:16px 20px;border:1px dashed var(--line);border-radius:8px;font-size:15px;color:var(--ink2)}
@media (max-width:760px){.rule{grid-template-columns:1fr}.rule > div + div{border-left:0;border-top:1px solid var(--line)}.rule .n{font-size:44px}}

/* 단계 (실제 순서가 있는 내용에만 사용) */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.steps li{counter-increment:s;padding:22px 20px;position:relative}
.steps li + li{border-left:1px solid var(--line)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--blue);color:var(--blue-ink);font-weight:700;font-size:14px;margin-bottom:12px}
.steps h3{font-size:16px}
.steps p{font-size:14px;color:var(--muted);margin-top:4px}
@media (max-width:960px){
  .steps{grid-template-columns:minmax(0,1fr)}
  .steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;padding:18px 20px}
  .steps li::before{grid-row:span 2;margin:0}
  .steps li + li{border-left:0;border-top:1px solid var(--line)}
}

/* 두 칸 */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:860px){.two,.three{grid-template-columns:minmax(0,1fr)}}
.box{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:26px}
.box h3{font-size:19px}
.box > p{margin-top:8px;color:var(--ink2);font-size:15px}
.box .tag{display:inline-block;font-size:13px;color:var(--muted);margin-bottom:6px}
.chk{list-style:none;display:grid;gap:8px;margin-top:14px}
.chk li{position:relative;padding-left:26px;font-size:15px;color:var(--ink2)}
.chk li::before{content:"";position:absolute;left:2px;top:.42em;width:13px;height:13px;border:1.5px solid var(--blue);border-radius:3px}
.chk li::after{content:"";position:absolute;left:6px;top:.62em;width:5px;height:3px;border-left:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);transform:rotate(-45deg)}
.prose{max-width:720px}
.prose p + p{margin-top:12px}
.prose p{color:var(--ink2)}

/* 고객사 */
.clients{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cg{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:22px 24px}
.cg-k{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:12px}
.cg-k b{font-size:17px}
.cg-k span{font-size:14px;color:var(--muted)}
.cg ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px;color:var(--ink2)}
@media (max-width:860px){.clients{grid-template-columns:minmax(0,1fr)}}

/* 자주 묻는 질문 */
.faq{border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:28px;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}
.faq details[open] summary::after{transform:rotate(-135deg);top:32px}
.faq .a{padding:0 0 22px;color:var(--ink2)}

/* 상담 안내 띠 */
.cta{padding:72px 0}
.cta .in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:40px 44px;box-shadow:var(--shadow)}
.cta h2{font-size:clamp(24px,2.6vw,32px)}
.cta p{margin-top:10px;color:var(--ink2)}
@media (max-width:860px){.cta .in{grid-template-columns:minmax(0,1fr);padding:28px 22px}.cta .btns .btn{flex:1 1 100%}}

/* 회사 개요 */
.dl{display:grid;grid-template-columns:160px minmax(0,1fr);border-top:1px solid var(--line);margin:0}
.dl dt,.dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line2)}
.dl dt{color:var(--muted);font-size:15px}
@media (max-width:560px){.dl{grid-template-columns:minmax(0,1fr)}.dl dt{border-bottom:0;padding-bottom:0}.dl dd{padding-top:2px}}
.map{aspect-ratio:16/9;border:1px solid var(--line);border-radius:8px;background:var(--line2);display:grid;place-items:center;color:var(--muted);font-size:15px;overflow:hidden}
.map iframe{width:100%;height:100%;border:0}

/* 상담 양식 */
.form-w{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
@media (max-width:960px){.form-w{grid-template-columns:minmax(0,1fr)}}
.frow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-bottom:16px}
.frow.full{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.frow{grid-template-columns:minmax(0,1fr)}}
.fcell label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fcell label em{color:var(--crit);font-style:normal;margin-left:2px}
.fcell input,.fcell select,.fcell textarea{width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
.fcell textarea{min-height:160px;resize:vertical}
.fcell input:focus,.fcell select:focus,.fcell textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
.fcell .err{display:none;color:var(--crit);font-size:13px;margin-top:4px}
.fcell.bad input,.fcell.bad textarea{border-color:var(--crit)}
.fcell.bad .err{display:block}
.hp{position:absolute;left:-9999px}
.agree{border:1px solid var(--line);border-radius:6px;padding:16px;background:var(--paper);font-size:14px;color:var(--ink2);margin:8px 0 16px}
.agree label{display:flex;gap:8px;align-items:center;margin-top:12px;font-weight:600;color:var(--ink)}
.agree input{width:18px;height:18px}
.fmsg{margin-top:12px;font-size:15px}
.fmsg.ok{color:var(--ok)}.fmsg.no{color:var(--crit)}

/* 개인정보처리방침 */
.policy{max-width:820px}
.policy h2{font-size:19px;margin:32px 0 10px}
.policy p,.policy li{color:var(--ink2);font-size:15px}
.policy ul,.policy ol{padding-left:20px;margin:8px 0}
.policy table{border-collapse:collapse;width:100%;font-size:14px;margin:10px 0}
.policy th,.policy td{border:1px solid var(--line);padding:8px 10px;text-align:left}

/* 바닥글 */
.ft{background:var(--foot);color:var(--foot-ink);padding:48px 0 40px;font-size:14px}
.ft .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px}
.ft img{height:24px;width:auto;display:block;margin-bottom:18px}
.ft dl{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0}
.ft dl div{display:flex;gap:6px}
.ft dt{color:#8392A3}
.ft dd{margin:0}
.ft a{color:#E3EAF1;text-decoration:none}
.ft nav{display:flex;flex-wrap:wrap;gap:8px 20px;align-content:start}
.ft .cp{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.12);padding-top:18px;color:#8392A3;font-size:13px}
.ft .tbd{background:rgba(255,229,128,.18);color:#FFE680;border-color:#8A7300}
@media (max-width:760px){.ft .wrap{grid-template-columns:minmax(0,1fr)}}
.policy .tbl-w table{margin:0;min-width:560px}.policy .tbl-w{box-shadow:none;margin:10px 0}
.facts{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.sec:not(.paper) + .cta{padding-top:0}

/* 단순화: 하는 일 목록, 세 가지 방법 */
.svc{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.svc a{display:block;height:100%;padding:24px 24px 8px 0;text-decoration:none;color:inherit}
.svc li + li a{padding-left:24px;border-left:1px solid var(--line)}
.svc h3{font-size:19px}
.svc p{color:var(--muted);font-size:15px;margin-top:8px}
.svc a:hover h3{color:var(--blue-ink)}
.plain3 > div{padding-top:16px;border-top:1px solid var(--line)}
.plain3 h3{font-size:18px}
.plain3 p{color:var(--ink2);font-size:15px;margin-top:6px}
@media (max-width:860px){
  .svc{grid-template-columns:minmax(0,1fr)}
  .svc a,.svc li + li a{padding:20px 0;border-left:0}
  .svc li + li a{border-top:1px solid var(--line)}
}

/* ===== 보강: 파란 첫 화면, 구성도, 아이콘 카드, 숫자, 상담 띠 ===== */
:root{--hero-a:#0A3FB8;--hero-b:#0A6CFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hero-a:#0A2766;--hero-b:#0B4FC0}}
:root[data-theme="dark"]{--hero-a:#0A2766;--hero-b:#0B4FC0}
.hero{background:linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 100%);color:#fff;padding:72px 0 84px}
.hero h1{color:#fff}
.hero .lead{color:rgba(255,255,255,.86)}
.btn-w{background:#fff;color:#0A3FB8}
.btn-w:hover{background:#E8F1FF}
.btn-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-line:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-line .dot{background:#FF8A8A}

/* 인프라 구성도 */
.viz{display:grid;gap:8px}
.vz-l{border-radius:8px;padding:16px 18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;align-items:center;gap:12px}
.viz b{font-weight:600;font-size:16px;color:#fff}
.viz span{font-size:13px;color:rgba(255,255,255,.75)}
.vz-bk{background:rgba(255,255,255,.18)}
.vz-vm{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) minmax(0,1fr);padding:12px;background:rgba(255,255,255,.07)}
.vz-old,.vz-new{border-radius:6px;padding:14px 12px;text-align:center}
.vz-old{border:1.5px dashed rgba(255,255,255,.5)}
.vz-old b{color:rgba(255,255,255,.85)}
.vz-old span{display:block;margin-top:2px}
.vz-new{background:#fff}
.vz-new b{color:#0A3FB8}
.vz-arrow{width:40px;color:#fff}
.vz-hw{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0;background:transparent;border:0}
.vz-hw > div{border-radius:8px;padding:16px 18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);display:flex;justify-content:space-between;align-items:center}
.vz-nw{background:rgba(255,255,255,.06);border-style:dashed}
@media (max-width:480px){
  .vz-vm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .vz-old{grid-column:1/-1}
  .vz-arrow{grid-column:1/-1;justify-self:center;transform:rotate(90deg);height:28px}
  .vz-l{flex-wrap:wrap}
}

/* 하는 일 카드 */
.svc{border-top:0;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.svc a,.svc li + li a{display:flex;flex-direction:column;height:100%;padding:28px 24px 24px;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:10px;background:var(--paper);transition:border-color .15s,transform .15s}
.svc a:hover{border-color:var(--blue);transform:translateY(-2px)}
.svc .ic{color:var(--blue);margin-bottom:18px}
.svc h3{font-size:19px}
.svc p{flex:1}
.svc .go{margin-top:18px;font-size:14px;font-weight:600;color:var(--blue-ink)}
@media (max-width:1000px){.svc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc{grid-template-columns:minmax(0,1fr)}.svc a,.svc li + li a{padding:22px 20px;border-top:1px solid var(--line)}}
@media (prefers-reduced-motion:reduce){.svc a{transition:none}.svc a:hover{transform:none}}

/* 세 가지 방법 */
.sec.tint{background:var(--blue-bg)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.opts > div{background:var(--paper);border-radius:10px;padding:26px 24px;border:1px solid var(--line)}
.opts > div.hl{border-color:var(--blue);box-shadow:inset 0 3px 0 var(--blue)}
.opts .k{font-size:13px;font-weight:600;color:var(--muted)}
.opts .hl .k{color:var(--blue-ink)}
.opts h3{font-size:22px;margin-top:4px}
.opts h3 + p{color:var(--ink2);font-size:15px;margin-top:8px}
@media (max-width:860px){.opts{grid-template-columns:minmax(0,1fr)}}

/* 숫자 */
.stats{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:28px;border-block:1px solid var(--line)}
.stats li{padding:22px 0 20px}
.stats li + li{border-left:1px solid var(--line);padding-left:24px}
.stats b{display:block;font-size:44px;font-weight:700;line-height:1.1;color:var(--blue-ink)}
.stats span{color:var(--muted);font-size:15px}
@media (max-width:640px){.stats{grid-template-columns:1fr 1fr}.stats li:nth-child(3){border-left:0;padding-left:0}.stats li:nth-child(n+3){border-top:1px solid var(--line)}.stats b{font-size:36px}}

/* 상담 띠 (파란색) */
.band{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;padding:56px 0}
.band .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.band h2{color:#fff;font-size:clamp(24px,2.6vw,32px)}
.band p{color:rgba(255,255,255,.85);margin-top:8px}
@media (max-width:860px){.band .wrap{grid-template-columns:minmax(0,1fr)}.band .btns .btn{flex:1 1 100%}}

/* 하위 페이지 머리 (파란색) */
.sub{background:linear-gradient(135deg,var(--hero-a),var(--hero-b));color:#fff;border-bottom:0}
.sub h1{color:#fff}
.sub .lead{color:rgba(255,255,255,.86)}
.sub .crumb{color:rgba(255,255,255,.75)}
.sub .btn-p{background:#fff;color:#0A3FB8}
.sub .btn-p:hover{background:#E8F1FF}

/* ===== IT 전문업체 톤: 어두운 남색 + 격자 + 연결도 ===== */
:root{--night:#060D1C;--night2:#0B1830;--grid:rgba(120,160,255,.07);--glow:rgba(10,108,255,.35)}
/* 머리말: 어두운 바 */
.hd{background:var(--night);border-bottom:1px solid rgba(255,255,255,.08)}
.hd .logo .lc{display:none}
.hd .logo .lw{display:block}
.gnb a{color:#B9C6D8}
.gnb a:hover,.gnb a[aria-current="page"]{color:#fff}
.hd-sos{color:#fff}
.hd-sos span{color:#8FA0B6}
.burger{color:#fff}
:root:not([data-theme="dark"]) .mm .logo .lc{display:block}
:root:not([data-theme="dark"]) .mm .logo .lw{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mm .logo .lc{display:none}:root:not([data-theme="light"]) .mm .logo .lw{display:block}}

/* 공통 어두운 배경 */
.hero,.sub,.sec.dark{background-color:var(--night);
  background-image:radial-gradient(ellipse 60% 70% at 80% 30%,var(--glow),transparent 70%),
    linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:auto,40px 40px,40px 40px;color:#fff}
.hero{padding:64px 0 0}
.hero-k{font-size:14px;color:#7FB0FF;font-weight:600;margin-bottom:14px}
.hero .lead{color:#C2CEDF}
.hero .btn-p,.sub .btn-p{background:var(--blue);color:#fff}
.hero .btn-p:hover,.sub .btn-p:hover{background:#2F7DF0}
.sub .crumb{color:#8FA0B6}
.sub .lead{color:#C2CEDF}

/* 취급 기술 띠 */
.tech{display:flex;align-items:center;gap:28px;margin-top:56px;padding-top:22px;padding-bottom:26px;border-top:1px solid rgba(255,255,255,.1)}
.tech p{font-size:13px;color:#8FA0B6;white-space:nowrap}
.tech ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 34px}
.tech li{font-size:17px;font-weight:600;color:#D7E1EE;letter-spacing:-.01em}
@media (max-width:760px){.tech{flex-direction:column;align-items:flex-start;gap:10px}.tech ul{gap:8px 20px}.tech li{font-size:15px}}

/* 카드 태그 */
.svc .ic{color:#fff;background:linear-gradient(135deg,#0A3FB8,#0A6CFF);border-radius:8px;padding:9px;width:46px;height:46px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.tags li{font-size:12px;font-weight:600;color:var(--blue-ink);background:var(--blue-bg);border-radius:4px;padding:2px 8px}

/* 엔지니어 자격 (어두운 구역) */
.sec.dark .sec-h h2{color:#fff}
.sec.dark .sec-h p{color:#C2CEDF}
.sec.dark .more{color:#7FB0FF}
.eng{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.certs{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.certs li{background:rgba(8,20,42,.92);padding:20px 16px}
.certs b{display:block;font-size:34px;line-height:1;color:#fff;font-weight:700}
.certs b small{font-size:15px;color:#8FA0B6;margin-left:3px;font-weight:500}
.certs span{display:block;margin-top:10px;font-size:13px;color:#B9C6D8;line-height:1.4}
@media (max-width:960px){.eng{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.certs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 바닥글 톤 맞춤 */
.ft{background:var(--night)}
.hero .wrap.tech{display:flex;grid-template-columns:none;gap:28px;align-items:center}
@media (max-width:760px){.hero .wrap.tech{flex-direction:column;align-items:flex-start;gap:10px;margin-top:40px}}

/* ===== 실제 망 구성도 ===== */
.topo{width:100%;height:auto;display:block;font-family:inherit}
.topo .zone{fill:rgba(255,255,255,.02);stroke:rgba(150,180,230,.35);stroke-width:1;stroke-dasharray:6 5}
.topo .zone.off{stroke:rgba(94,160,255,.6)}
.topo .zl{fill:#8FA6C6;font-size:12px;font-weight:600}
.topo .cluster{fill:rgba(10,108,255,.10);stroke:rgba(94,160,255,.65);stroke-width:1}
.topo .cl-t{fill:#9EC3FF;font-size:12px;font-weight:600}
.topo .ln path{fill:none;stroke:rgba(170,195,235,.55);stroke-width:1.3}
.topo .ln.sn path{stroke:rgba(140,200,255,.6);stroke-dasharray:none}
.topo .ha path{fill:none;stroke:rgba(200,215,240,.7);stroke-width:1.4;stroke-dasharray:3 3}
.topo .flow{fill:none;stroke:#5EA0FF;stroke-width:1.6;stroke-dasharray:6 5;animation:topoflow 1.4s linear infinite}
@keyframes topoflow{to{stroke-dashoffset:-22}}
@media (prefers-reduced-motion:reduce){.topo .flow{animation:none}}
.topo .lt{fill:#8FA6C6;font-size:11px}
.topo .lt.c{text-anchor:middle}
.topo .lt.b{fill:#7FB0FF}
.topo .nd rect{fill:#0E1C36;stroke:rgba(150,180,230,.5);stroke-width:1}
.topo .nd.hs rect{fill:#0B2A5E;stroke:#5EA0FF}
.topo .nd.ox rect{stroke:#5EA0FF}
.topo .gl{fill:none;stroke:#9EC3FF;stroke-width:1.4;stroke-linejoin:round}
.topo .t1{fill:#fff;font-size:13px;font-weight:600}
.topo .t1.c{text-anchor:middle}
.topo .t2{fill:#93A8C8;font-size:11px}
.topo .inet path{fill:#0E1C36;stroke:rgba(150,180,230,.6);stroke-width:1}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;font-size:13px;color:#93A8C8}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:26px;height:0;border-top:1.5px solid rgba(170,195,235,.8)}
.legend .lg-ha{border-top-style:dashed;border-top-color:rgba(200,215,240,.8)}
.legend .lg-fl{border-top:2px dashed #5EA0FF}

.topo-w{margin:0}
.topo-note{font-size:12px;color:#7F92AD;margin-top:6px}
@media (min-width:961px){.hero .wrap:not(.tech){grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px}}
@media (max-width:640px){
  .topo-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-24px;padding-inline:24px}
  .topo-scroll .topo{min-width:600px}
  .topo-w figcaption::before{content:"구성도를 옆으로 밀어서 보세요.";display:block;font-size:12px;color:#7F92AD;margin-bottom:4px}
}

/* ===== 한 페이지 구조 보조 ===== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.sub-h{font-size:20px;margin:52px 0 16px}
.sec-cta{margin-top:28px}
.more-d{margin-top:18px}
.more-d summary{cursor:pointer;display:inline-block;font-weight:600;color:var(--blue-ink);border-bottom:1px solid currentColor;margin-bottom:16px;list-style:none}
.more-d summary::-webkit-details-marker{display:none}
.more-d[open] summary{margin-bottom:16px}
.bk3{margin-top:20px}
.bk3 > div{padding-top:16px;border-top:1px solid var(--line)}
.bk3 h3{font-size:18px}
.bk3 p{color:var(--ink2);font-size:15px;margin-top:6px}
.ct-dl{grid-template-columns:130px minmax(0,1fr);margin-top:12px}
.ct-dl dt,.ct-dl dd{font-size:15px}
.box > .tag + h3{margin-top:2px}
.box .chk{margin-top:14px}
@media (max-width:560px){.ct-dl{grid-template-columns:minmax(0,1fr)}}
.virt-note{margin-top:28px}
.virt-note > div{padding-top:16px;border-top:1px solid var(--line)}
.virt-note h3{font-size:18px}
.virt-note p{color:var(--ink2);font-size:15px;margin-top:6px}
/* 백업 보강 */
.sub-h.first{margin-top:8px}
.rule.r5{grid-template-columns:repeat(5,minmax(0,1fr))}
.rule.r5 > div{padding:24px 20px}
.rule.r5 .n{font-size:46px}
.rule.r5 h3{font-size:17px}
.rule.r5 p{font-size:14px}
@media (max-width:1000px){.rule.r5{grid-template-columns:repeat(3,minmax(0,1fr))}.rule.r5 > div:nth-child(4){border-left:0}.rule.r5 > div:nth-child(n+4){border-top:1px solid var(--line)}}
@media (max-width:640px){.rule.r5{grid-template-columns:minmax(0,1fr)}.rule.r5 > div + div{border-left:0;border-top:1px solid var(--line)}}
.bk3{row-gap:28px;margin-top:32px}
.callout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;margin-top:36px;padding:26px 28px;border:1px solid var(--blue);border-radius:10px;background:var(--blue-bg)}
.callout h3{font-size:19px}
.callout p{color:var(--ink2);font-size:15px;margin-top:6px}
@media (max-width:760px){.callout{grid-template-columns:minmax(0,1fr)}.callout .btn{width:100%}}

/* Ver4.1 참고 보강: 파트너 인증·수행 사례 */
.tbd-wrap{margin:-20px 0 20px}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.four .box h3{font-size:18px}
@media (max-width:960px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.four{grid-template-columns:minmax(0,1fr)}}
.cases .box h3{font-size:18px;line-height:1.45}
.case-dl{grid-template-columns:56px minmax(0,1fr);margin-top:16px}
.case-dl dt,.case-dl dd{padding:8px 0;font-size:14px}
@media (max-width:560px){.case-dl{grid-template-columns:56px minmax(0,1fr)}.case-dl dt{border-bottom:1px solid var(--line2);padding-bottom:8px}.case-dl dd{padding-top:8px}}

/* ===== 움직임 효과 (Ver4.2 / Ver5.1) ===== */
.mo .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.mo .rv.in{opacity:1;transform:none}
@media print{.mo .rv{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
h2.arrive,h3.arrive{position:relative}
h2.arrive::after,h3.arrive::after{content:"";position:absolute;left:0;bottom:-10px;width:64px;height:3px;border-radius:2px;background:var(--blue);transform-origin:left center;animation:arrive 1.6s cubic-bezier(.2,.7,.2,1) forwards;pointer-events:none}
@keyframes arrive{0%{transform:scaleX(0);opacity:1}35%{transform:scaleX(1);opacity:1}75%{opacity:1}100%{transform:scaleX(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.mo .rv{opacity:1;transform:none;transition:none}h2.arrive::after,h3.arrive::after{display:none}}

/* Ver5.1: 첫 화면 등장 */
.hero .hero-k{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) .05s both}
.hero h1{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .18s both}
.hero .lead{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .34s both}
.hero .btns{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) .48s both}
.hero .topo-w figcaption,.hero .tech{animation:heroIn .8s cubic-bezier(.2,.7,.2,1) 1.6s both}
/* 구성도 그리기 */
.topo-anim .ln path{stroke-dasharray:1;stroke-dashoffset:1;animation:tpDraw .55s ease-out both}
.topo-anim .nd,.topo-anim .inet,.topo-anim .lt,.topo-anim .ha,.topo-anim .zone,.topo-anim .zl,.topo-anim .cluster,.topo-anim .cl-t{animation:tpFade .5s ease both}
.topo-anim .flow{animation:tpFade .6s ease both,topoflow 1.4s linear infinite}
@keyframes tpDraw{to{stroke-dashoffset:0}}
@keyframes tpFade{from{opacity:0}to{opacity:1}}
.sub h1{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) .1s both}
@media (prefers-reduced-motion:reduce){.hero *,.topo-anim *,.sub h1{animation:none!important}}
.topo.topo-anim .ln.sn path{stroke-dasharray:1}

/* ===== Ver5.1 인프라 3구역 · 내부 디자인 보강 ===== */
:root{--dg-bg:#0B1629;--dg-line:#1E3150}
.sub-h{display:flex;align-items:center;gap:10px}
.sub-h::before{content:"";flex:none;width:4px;height:1.05em;border-radius:2px;background:var(--blue)}
.box{transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.box:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}
.mt-b .ic{color:var(--blue);margin-bottom:12px}

/* 인프라 구역 */
.ifx-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
.ifx-top .sec-h{margin-bottom:0}
.ifx-k{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--blue-ink);margin-bottom:12px}
.ifx-k .bars{display:inline-flex;gap:4px}
.ifx-k .bars i{display:block;width:18px;height:4px;border-radius:2px;background:var(--line)}
.ifx-k .bars i.on{background:var(--blue)}
.ifx-pts{list-style:none;display:grid;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.ifx-pts li{font-size:15px;color:var(--ink2);padding-left:18px;position:relative}
.ifx-pts li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.ifx-pts b{color:var(--ink)}

/* 구성도 패널 (양쪽 테마 공통 어두운 패널) */
.dg{margin:0;background-color:var(--dg-bg);background-image:linear-gradient(rgba(120,160,230,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(120,160,230,.07) 1px,transparent 1px);background-size:24px 24px;border:1px solid var(--dg-line);border-radius:12px;padding:18px 18px 14px;box-shadow:var(--shadow)}
.dg-s{overflow-x:auto}
.dg svg{display:block;width:100%;height:auto;min-width:420px;font-family:inherit}
.dg .nd rect{fill:#10203B;stroke:rgba(150,180,230,.5);stroke-width:1}
.dg .nd.hl rect{fill:#0B2A5E;stroke:#5EA0FF}
.dg .t1{fill:#fff;font-size:13px;font-weight:600;text-anchor:middle}
.dg .t1.s{font-size:12px}
.dg .t2{fill:#93A8C8;font-size:10.5px;text-anchor:middle}
.dg .ln{fill:none;stroke:rgba(170,195,235,.5);stroke-width:1.3}
.dg .ln.b{stroke:#5EA0FF;stroke-width:1.8}
.dg .ha{fill:none;stroke:rgba(210,222,245,.8);stroke-width:1.5;stroke-dasharray:3 3}
.dg .tun{fill:none;stroke:#4CC492;stroke-width:1.7;stroke-dasharray:7 5}
.dg .zn{fill:rgba(255,255,255,.025);stroke:rgba(150,180,230,.35);stroke-width:1;stroke-dasharray:6 5}
.dg .zl{fill:#8FA6C6;font-size:11.5px;font-weight:600}
.dg .lb{fill:#9EC3FF;font-size:10.5px}
.dg .lb.c{text-anchor:middle}
.dg .vl rect{fill:rgba(94,160,255,.10);stroke:rgba(94,160,255,.45)}
.dg figcaption{margin-top:12px;padding-top:12px;border-top:1px solid var(--dg-line)}
.dg figcaption p{font-size:13px;color:#A9B8CC;margin-top:8px}
.dg-lg{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:#A9B8CC}
.dg-lg li{display:flex;align-items:center;gap:6px}
.dg-lg i{display:block;width:20px;height:0;border-top:1.5px solid rgba(170,195,235,.7)}
.dg-lg i.b{border-top:2px solid #5EA0FF}
.dg-lg i.d{border-top:1.5px dashed rgba(210,222,245,.85)}
.dg-lg i.t{border-top:2px dashed #4CC492}

/* 제조사 카드 */
.vend{display:grid;gap:20px}
.vend.v2{grid-template-columns:repeat(2,minmax(0,1fr))}
.vend.v3{grid-template-columns:repeat(3,minmax(0,1fr))}
.vd{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--blue);border-radius:8px;padding:22px 24px;display:flex;flex-direction:column;transition:box-shadow .2s ease}
.vd:hover{box-shadow:var(--shadow)}
.vd header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding-bottom:14px;border-bottom:1px solid var(--line2)}
.vd header b{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.vd header span{font-size:13px;color:var(--muted)}
.vd dl{display:grid;grid-template-columns:78px minmax(0,1fr);gap:0 12px;margin:6px 0 0}
.vd dt,.vd dd{padding:9px 0;border-bottom:1px dashed var(--line2);font-size:14.5px}
.vd dt{color:var(--muted);font-weight:600}
.vd dd{color:var(--ink2);margin:0}
.vd > p{margin-top:auto;padding-top:14px;font-size:14px;color:var(--muted)}

/* 구축 범위 */
.cap{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.cap li{padding:22px 0 24px;border-top:1px solid var(--line)}
.cap .ic{color:var(--blue);margin-bottom:10px}
.cap h4{font-size:16.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.cap p{font-size:14.5px;color:var(--ink2)}

/* 수행 분야 카드 */
.case{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:0 0 22px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.case:hover{border-color:color-mix(in srgb,var(--blue) 55%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}
.case header{display:flex;gap:14px;align-items:flex-start;padding:22px 24px 18px;background:var(--blue-bg);border-bottom:1px solid var(--line2)}
.case header .ic{flex:none;color:var(--blue);margin-top:2px}
.case .ck{font-size:13px;font-weight:600;color:var(--blue-ink);margin-bottom:4px}
.case h3{font-size:18px;line-height:1.4}
.case dl{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 12px;padding:6px 24px 0;margin:0}
.case dt,.case dd{padding:12px 0;border-bottom:1px solid var(--line2);font-size:14.5px}
.case dt{font-weight:700;color:var(--blue-ink)}
.case dd{margin:0;color:var(--ink2)}
.case dd .chk{display:grid;gap:6px}
.case dd .chk li{font-size:14.5px}
.case dl > :nth-last-child(-n+2){border-bottom:0}
.case .tags{padding:0 24px;margin-top:auto;padding-top:14px}

@media (max-width:960px){
  .ifx-top{grid-template-columns:minmax(0,1fr);gap:32px}
  .vend.v3{grid-template-columns:minmax(0,1fr)}
  .cap{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .vend.v2{grid-template-columns:minmax(0,1fr)}
  .cap{grid-template-columns:minmax(0,1fr)}
  .dg{padding:12px}
  .dg svg{min-width:360px}
}
@media (prefers-reduced-motion:reduce){
  .box,.case,.vd{transition:none}
  .box:hover,.case:hover{transform:none}
}

/* ===== Ver5.2 : 주요 사업 · 가상화 3구역 · 유지보수 · 파트너십 ===== */
/* 주요 사업 6칸 */
.svc.s6{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc.s6 a{display:flex;flex-direction:column;height:100%}
.svc.s6 .tags{margin-top:16px}
.svc.s6 .go{margin-top:auto;padding-top:16px;font-size:14px;font-weight:600;color:var(--blue-ink)}
.svc.s6 .go::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .2s ease}
.svc.s6 a:hover .go::after{transform:translate(3px,-1px) rotate(45deg)}
.one-stop{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;padding:20px 24px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.one-stop li{display:flex;gap:12px;align-items:flex-start}
.one-stop .ic{flex:none;color:var(--blue);margin-top:2px}
.one-stop b{display:block;font-size:15.5px;color:var(--ink)}
.one-stop span{font-size:14px;color:var(--muted)}

/* 가상화 소개 구역 */
.spec{background:var(--dg-bg);border:1px solid var(--dg-line);border-radius:12px;padding:24px 26px;box-shadow:var(--shadow);color:#E7EDF3}
.spec header{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding-bottom:14px;border-bottom:1px solid var(--dg-line)}
.spec header b{font-size:22px;font-weight:700;color:#fff}
.spec header span{font-size:13px;color:#93A8C8}
.spec-h{font-size:13px;font-weight:600;color:#7FB0FF;margin:16px 0 4px}
.spec dl{margin:0}
.spec dl > div{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:12px;padding:11px 0;border-bottom:1px dashed rgba(150,180,230,.22)}
.spec dt{font-weight:600;color:#fff;font-size:14.5px}
.spec dd{margin:0;color:#B9C7D8;font-size:14px}
.spec-f{margin-top:14px;font-size:12.5px;color:#93A8C8}
.vz-two{margin-top:36px}
.vz-two .box h3{font-size:17px;margin-bottom:12px}
.vz-two .chk{display:grid;gap:8px}
.sec-cta .btn-o{margin-left:0}

/* 유지보수 관리 대상 */
.scope{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.scope li{display:flex;flex-direction:column;gap:4px;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.scope .ic{color:var(--blue);margin-bottom:6px}
.scope b{font-size:15.5px;color:var(--ink)}
.scope span{font-size:13px;color:var(--muted)}

/* 파트너십 */
.pt-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.pmx{list-style:none;border-top:2px solid var(--ink)}
.pmx > li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.pm-c{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;color:var(--ink);text-decoration:none}
.pm-c .ic{color:var(--blue);flex:none}
.pm-c:hover span{color:var(--blue-ink)}
.pm-v{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.pm-v li{display:flex;flex-direction:column;gap:1px;padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);min-width:0}
.pm-v b{font-size:15px;color:var(--ink)}
.pm-v span{font-size:12.5px;color:var(--muted)}
.pt-side{background:var(--dg-bg);border:1px solid var(--dg-line);border-radius:12px;padding:24px;box-shadow:var(--shadow)}
.pt-side h3{color:#fff;font-size:17px;margin-bottom:6px}
.pt-side ul{list-style:none}
.pt-side li{display:flex;gap:12px;padding:14px 0;border-bottom:1px dashed rgba(150,180,230,.22)}
.pt-side li:last-child{border-bottom:0;padding-bottom:0}
.pt-side .ic{flex:none;color:#7FB0FF;margin-top:2px}
.pt-side b{display:block;color:#fff;font-size:15px;margin-bottom:2px}
.pt-side p{color:#B9C7D8;font-size:14px}

@media (max-width:1000px){
  .scope{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pt-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:960px){
  .svc.s6{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .one-stop{grid-template-columns:minmax(0,1fr)}
  .spec dl > div{grid-template-columns:minmax(0,1fr);gap:2px}
  .scope{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pmx > li{grid-template-columns:minmax(0,1fr);gap:10px}
}
@media (max-width:560px){
  .svc.s6{grid-template-columns:minmax(0,1fr)}
}

/* ===== Ver5.2 회사소개 · 자주 묻는 질문 ===== */
.about-two{margin-top:36px;align-items:stretch}
.about-two .box h3{font-size:17px;margin-bottom:14px}
.about-two .dl{grid-template-columns:96px minmax(0,1fr)}
.about-two .dl dt,.about-two .dl dd{padding:12px 0}
.about-two .dl dt{border-bottom:1px solid var(--line2);font-weight:600}
.ab-map .map{margin-bottom:6px}
.faq-wrap{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:56px;align-items:start}
.faq-side{position:sticky;top:96px}
.faq-side .sec-h{margin-bottom:24px}
.fq-help{border:1px solid var(--line);border-radius:10px;padding:22px;background:var(--bg)}
.fq-help .ic{color:var(--blue);display:block;margin-bottom:10px}
.fq-help b{display:block;font-size:16px;color:var(--ink);margin-bottom:4px}
.fq-help > p{font-size:14.5px;color:var(--ink2);margin-bottom:16px}
.fq-help .fq-tel{margin:14px 0 0;font-size:14px;color:var(--muted)}
.fq-help .fq-tel a{font-weight:700;color:var(--ink);text-decoration:none}
.fq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.fq-chip{font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink2);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}
.fq-chip:hover{border-color:var(--blue);color:var(--blue-ink)}
.fq-chip[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.faq-g{margin-top:28px}
.faq-g > h3{font-size:14px;font-weight:700;color:var(--blue-ink);margin-bottom:6px}
.faq-g .faq{max-width:none}
.faq summary{transition:color .15s ease}
.faq summary:hover,.faq details[open] summary{color:var(--blue-ink)}
.faq .a p{padding-left:16px;border-left:2px solid var(--blue-bg)}
.faq .a a{color:var(--blue-ink)}
@media (max-width:960px){
  .faq-wrap{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-side{display:contents}
  .faq-side .sec-h{order:1;margin-bottom:0}
  .faq-main{order:2}
  .fq-help{order:3}
}
@media (max-width:760px){
  .about-two .dl{grid-template-columns:minmax(0,1fr)}
  .about-two .dl dt{border-bottom:0;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.fq-chip,.faq summary{transition:none}}

/* ===== 상담 문의 (전화·이메일 전용) ===== */
.ct-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;align-items:start}
.ct-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px}
.ct-card > .ic{color:var(--blue);margin-bottom:12px}
.ct-card h3{font-size:18px;margin-bottom:10px}
.ct-num{display:block;font-size:clamp(28px,3.4vw,36px);font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-bottom:12px}
.ct-tel .fine{margin-top:12px}
.ct-addr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:20px;font-weight:700;color:var(--ink);margin-bottom:6px}
.ct-addr span{user-select:all;word-break:break-all}
.ct-copy{font:inherit;cursor:pointer}
.ct-addr .ct-copy{font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink2)}
.ct-addr .ct-copy:hover{border-color:var(--blue);color:var(--blue-ink)}
.ct-desc{color:var(--ink2);font-size:15px;margin-bottom:16px}
.ct-l{display:block;font-size:14px;font-weight:600;color:var(--ink2);margin-bottom:6px}
#f-type{width:100%;max-width:360px;font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.ct-tpl{margin:14px 0 0;padding:16px 18px;background:var(--bg);border:1px dashed var(--line);border-radius:8px;font:inherit;font-size:14.5px;line-height:1.8;color:var(--ink2);white-space:pre-wrap;user-select:all}
.ct-mail .btns{margin-top:16px}
.ct-mail .fine{margin-top:10px}
#ctMsg.ok{color:var(--ok)}
@media (max-width:860px){.ct-grid{grid-template-columns:minmax(0,1fr)}}

.ct-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ct-mailaddr{font-size:clamp(22px,2.6vw,30px);word-break:break-all}
@media (max-width:860px){.ct-grid{grid-template-columns:minmax(0,1fr)}}

/* 첫 화면 단순화: 버튼·취급 기술 띠 제거 후 하단 여백 */
.hero{padding-bottom:72px}
@media (max-width:760px){.hero{padding-bottom:48px}}

/* ===== Ver5.3 정리 ===== */
.cap h3.cap-h{font-size:16.5px;font-weight:700;margin-bottom:6px;color:var(--ink)}
.nf-wrap{display:block}
.nf-wrap .nx-more{max-width:560px}