@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{--navy:#17233a;--navy-deep:#0f1a2e;--gold:#a88442;--gold-soft:#d9b775;--ivory:#f7f4ed;--line:#e7e5e0;--muted:#5b6675}
*{box-sizing:border-box}
body{margin:0;color:var(--navy);font:16px/1.75 'Noto Sans KR',sans-serif;background:#fff;word-break:keep-all}
a{color:inherit;text-decoration:none}a:hover{color:var(--gold)}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:auto;padding:0 24px}

/* 공통 헤더 (Publishing과 동일) */
.global{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav{min-height:74px;display:flex;align-items:center;gap:26px}
.logo{font-size:24px;font-weight:800;letter-spacing:-1px}
.links{display:flex;gap:23px;margin-left:auto;font-size:13px;font-weight:700}
.links .current{color:var(--gold)}
.header-cta{background:var(--gold);color:#fff;border-radius:999px;padding:9px 18px;font-size:13px;font-weight:700;white-space:nowrap}
.header-cta:hover{background:#8e6a2f;color:#fff}
.nav-cta{display:none}
.menu-button{display:none;position:relative;margin-left:auto;margin-right:-10px;width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-button span{position:absolute;left:11px;width:22px;height:2px;border-radius:2px;background:var(--navy);transition:transform .25s ease,opacity .2s ease,top .25s ease}
.menu-button span:nth-child(1){top:15px}.menu-button span:nth-child(2){top:21px}.menu-button span:nth-child(3){top:27px}
.menu-button.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.menu-button.open span:nth-child(2){opacity:0}
.menu-button.open span:nth-child(3){top:21px;transform:rotate(-45deg)}
.subnav{background:var(--ivory);border-bottom:1px solid #e5ded2}
.sublinks{display:flex;gap:27px;align-items:center;min-height:50px;font-size:13px;white-space:nowrap;overflow:auto}
.sublinks .active{color:var(--gold);font-weight:800}

/* 공통 요소 */
.kicker{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--gold)}
.dark .kicker,.hero .kicker{color:var(--gold-soft)}
.section{padding:72px 0}
.cream{background:var(--ivory)}
.dark{background:var(--navy);color:#fff}
.section h2{font-size:clamp(24px,2.6vw,32px);line-height:1.4;margin:6px 0 8px;letter-spacing:-.5px}
.section .lead{color:var(--muted);margin:0}
.dark .lead,.dark p{color:#d7deeb}
.between{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}
.textlink{color:#936e32;font-weight:700;font-size:14px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.dark .textlink{color:var(--gold-soft)}
.i{width:1em;height:1em;flex:none}
.textlink .i{width:15px;height:15px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--gold);border:1px solid var(--gold);border-radius:8px;color:#fff;padding:12px 24px;font-weight:700;font-size:15px}
.btn:hover{background:#8e6a2f;color:#fff}
.btn .i{width:17px;height:17px}
.btn.outline{background:transparent;border-color:#c5bdad;color:inherit}
.btn.outline:hover{border-color:var(--gold);color:var(--gold)}
.dark .btn.outline,.hero .btn.outline{border-color:rgba(255,255,255,.55);color:#fff}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.grid{display:grid;gap:22px}
.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.tag{display:inline-block;background:#f0e7d8;color:#7e5d29;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700}
.note{background:var(--ivory);border-left:3px solid var(--gold);padding:15px 20px;color:#625a50;font-size:13px;margin:28px 0 0}
.crumb{font-size:12px;color:#8a93a3;margin:0 0 18px}
.crumb a:hover{color:var(--gold)}

/* 메인 히어로 */
.hero{background:radial-gradient(circle at 78% 30%,#2b3a57 0,transparent 55%),linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;overflow:hidden;padding:26px 0 120px}
.hero .crumb{color:#aab4c6}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(56px,8vw,96px);line-height:1;margin:14px 0 22px;letter-spacing:-2px;font-weight:800}
.hero h1 span{color:var(--gold-soft)}
.hero .big{font-size:clamp(19px,2vw,23px);line-height:1.6;font-weight:500;margin:0 0 14px}
.hero p{color:#d7deeb;max-width:540px;margin:0}
.hero small.caption{display:block;color:#8a96ab;font-size:11px;margin-top:12px}

/* CSS로 그린 대시보드 화면 예시 */
.device{position:relative;padding-right:70px}
.laptop{background:#fff;border-radius:14px;border:8px solid #1d2a42;box-shadow:0 30px 70px rgba(0,0,0,.45);color:var(--navy);font-size:10px;overflow:hidden}
.laptop .bar{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid #eef0f3;font-weight:800;font-size:12px}
.laptop .bar b{color:var(--gold)}
.laptop .bar i{flex:1;height:14px;background:#f1f3f6;border-radius:6px;max-width:170px}
.app{display:grid;grid-template-columns:78px 1fr}
.app aside{background:#f8f9fb;border-right:1px solid #eef0f3;padding:10px 8px}
.app aside span{display:block;height:7px;border-radius:4px;background:#e2e6ec;margin:9px 4px}
.app aside span.on{background:var(--gold)}
.app main{padding:12px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.kpi{border:1px solid #eef0f3;border-radius:7px;padding:7px 8px}
.kpi em{display:block;font-style:normal;color:#8a93a3;font-size:8px}
.kpi strong{font-size:13px}
.kpi u{display:block;text-decoration:none;color:#2f9e6a;font-size:8px}
.charts{display:grid;grid-template-columns:1.7fr 1fr;gap:7px;margin-top:7px}
.panel{border:1px solid #eef0f3;border-radius:7px;padding:8px}
.panel em{font-style:normal;font-weight:700;font-size:9px}
.panel svg{width:100%;height:auto;display:block;margin-top:4px}
.donut{width:64px;height:64px;border-radius:50%;margin:8px auto 0;background:conic-gradient(var(--navy) 0 52%,var(--gold) 0 78%,#9fb3d1 0 91%,#e3e7ee 0);-webkit-mask:radial-gradient(circle,transparent 45%,#000 46%);mask:radial-gradient(circle,transparent 45%,#000 46%)}
.rows{margin-top:7px}
.rows div{display:flex;align-items:center;gap:8px;border-top:1px solid #f1f3f6;padding:5px 2px}
.rows div:first-child{border-top:0}
.rows b{flex:1;font-weight:500}
.rows s{text-decoration:none;font-size:8px;padding:1px 7px;border-radius:999px;background:#fbf3e3;color:#9a7533}
.phone{position:absolute;right:0;bottom:-34px;width:150px;background:var(--navy-deep);border:6px solid #2a3852;border-radius:24px;padding:16px 10px 12px;box-shadow:0 25px 60px rgba(0,0,0,.5);color:#fff;font-size:9px;text-align:center}
.phone strong{font-size:14px;letter-spacing:.5px}.phone strong span{color:var(--gold-soft)}
.phone .pcard{background:#fff;color:var(--navy);border-radius:10px;padding:10px 8px;margin-top:10px;text-align:left}
.phone .pcard p{color:var(--navy);margin:0 0 8px;font-weight:700;font-size:10px;line-height:1.4}
.phone .picons{display:flex;justify-content:space-between;margin-bottom:8px}
.phone .picons .i{width:22px;height:22px;padding:4px;border:1px solid #e5e8ee;border-radius:6px}
.phone .pbtn{display:block;background:var(--navy);color:#fff;border-radius:6px;text-align:center;padding:5px;font-size:9px}

/* 기능 아이콘 스트립 */
.strip{position:relative;margin-top:-72px;z-index:2}
.strip ul{list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(23,35,58,.12)}
.strip li+li{border-left:1px solid var(--line)}
.strip a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px;text-align:center;font-size:14px;font-weight:700;line-height:1.45}
.strip .ico{width:54px;height:54px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;color:var(--navy);transition:.2s}
.strip .ico .i{width:26px;height:26px}
.strip a:hover .ico{background:var(--gold);color:#fff}

/* 기능 카드 */
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.fcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,35,58,.1);color:inherit}
.fcard img{width:100%;aspect-ratio:640/280;object-fit:cover;background:var(--ivory)}
.fcard .pad{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.fcard h3{font-size:18px;margin:0 0 6px;letter-spacing:-.3px}
.fcard p{font-size:14px;color:var(--muted);margin:0 0 14px;flex:1}
.fcard .textlink{margin-top:auto}
.fcard.alt{border-color:#d8cbb3}
.fcard .tag{align-self:flex-start;margin-bottom:8px}

/* 하나의 기능, 세 가지 관점 */
.views{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff}
.view{padding:30px 28px;display:flex;flex-direction:column}
.view+.view{border-left:1px solid var(--line)}
.view .tag{align-self:flex-start}
.view h3{font-size:19px;margin:12px 0 6px}
.view p{color:var(--muted);font-size:14px;margin:0 0 18px;flex:1}

/* 고객 유형 밴드 */
.band-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
.aud{background:#fff;color:var(--navy);border-radius:12px;overflow:hidden}
.aud img{width:100%;aspect-ratio:134/69;object-fit:cover}
.aud div{padding:13px 14px 15px}
.aud h3{font-size:15px;margin:0 0 4px}
.aud p{font-size:12.5px;line-height:1.55;margin:0;color:var(--muted)!important}

/* 고객 유형별 CTA */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.path{border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff;display:flex;flex-direction:column}
.path.main{border:2px solid var(--gold);box-shadow:0 14px 34px rgba(168,132,66,.14)}
.path .ico{width:46px;height:46px;border-radius:12px;background:var(--ivory);display:grid;place-items:center;color:var(--gold)}
.path .ico .i{width:24px;height:24px}
.path h3{margin:16px 0 4px;font-size:19px}
.path small{color:var(--gold);font-weight:700;font-size:13px}
.path p{color:var(--muted);font-size:14px;flex:1;margin:10px 0 20px}
.path .btn{align-self:flex-start}

/* 활용 시나리오 */
.use img{aspect-ratio:182/60}

/* 포트폴리오 */
.port{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:18px}
.pitem{border:1px solid var(--line);border-radius:14px;padding:26px;background:#fff;display:flex;flex-direction:column}
.pitem.feature{background:var(--navy);color:#fff;border-color:var(--navy)}
.pitem.feature p{color:#d7deeb}
.pitem.feature .textlink{color:var(--gold-soft)}
.pitem .tag{align-self:flex-start}
.pitem h3{margin:10px 0 6px;font-size:19px}
.pitem p{font-size:14px;color:var(--muted);flex:1;margin:0 0 16px}

/* 하위 페이지 */
.pageintro{padding:52px 0 56px;background:var(--ivory)}
.pageintro h1{font-size:clamp(30px,4vw,45px);margin:6px 0;line-height:1.3;letter-spacing:-1px}
.pageintro p{max-width:780px;margin:0;color:var(--muted)}
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:56px 0;border-top:1px solid var(--line);scroll-margin-top:140px}
.feature-row:first-child{border-top:0;padding-top:0}
.feature-row.flip .media{order:2}
.media{position:relative;border-radius:14px;overflow:hidden;background:var(--ivory);border:1px solid var(--line)}
.media img{width:100%;aspect-ratio:640/280;object-fit:cover}
.media .video{position:absolute;left:14px;bottom:14px;background:rgba(15,26,46,.85);color:#fff;font-size:12px;border-radius:999px;padding:5px 12px}
.feature-row h2{font-size:clamp(23px,2.4vw,29px);margin:8px 0 10px}
.feature-row p{color:var(--muted);margin:0}
.checks{list-style:none;padding:0;margin:18px 0 0}
.checks li{position:relative;padding-left:26px;margin:7px 0;font-size:15px}
.checks li:before{content:"";position:absolute;left:3px;top:.55em;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.related{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.related a{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:5px 13px;background:#fff}
.related a b{color:var(--gold);font-weight:800;margin-right:4px}
.related a:hover{border-color:var(--gold)}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.jump a{font-size:13px;font-weight:700;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px}

.tile{border:1px solid var(--line);border-radius:14px;padding:28px;background:#fff}
.tile .ico{width:46px;height:46px;border-radius:12px;background:var(--ivory);display:grid;place-items:center;color:var(--gold)}
.tile .ico .i{width:24px;height:24px}
.tile h3{margin:14px 0 6px;font-size:19px}
.tile p{margin:0;color:var(--muted);font-size:14px}
.tile .checks li{font-size:14px}

/* 나비맵 ⊂ 소방맵 관계도 */
.relation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px}
.ring{border:2px solid var(--navy);border-radius:16px;padding:22px;position:relative}
.ring>b{display:block;font-size:17px;margin-bottom:4px}
.ring>span{font-size:13px;color:var(--muted)}
.ring .inner{margin-top:16px;border:2px dashed var(--gold);border-radius:12px;padding:14px 16px;background:#fdf9f1}
.ring .inner b{color:#8e6a2f}
.ring .inner span{display:block;font-size:13px;color:var(--muted)}
.relation .plus{font-size:28px;color:var(--gold);font-weight:800}
.stack{display:grid;gap:10px}
.stack div{border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:14px}
.stack div b{display:block}
.stack div span{font-size:13px;color:var(--muted)}

/* 공통 푸터 (Publishing과 동일) */
.footer{background:#101c30;color:#e5e8ef;padding:45px 0;font-size:13px}
.footgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.footer p{color:#cbd4e2;margin:8px 0}
.footer a{color:#e5e8ef}.footer a:hover{color:var(--gold-soft)}
.footer small{color:#9aa7ba}

@media(max-width:1020px){
.hero-grid{grid-template-columns:1fr}
.device{max-width:620px}
.strip ul{grid-template-columns:repeat(4,1fr)}
.strip li:nth-child(5){border-left:0}
.strip li:nth-child(n+5){border-top:1px solid var(--line)}
.four,.port{grid-template-columns:repeat(2,minmax(0,1fr))}
.band-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
.wrap{padding:0 16px}
.menu-button{display:block}
.header-cta{display:none}
.links{position:fixed;left:0;right:0;top:74px;bottom:0;margin:0;background:#fff;flex-direction:column;gap:0;padding:8px 20px 28px;font-size:18px;font-weight:700;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:30;display:flex}
.links.open{opacity:1;visibility:visible;transform:none}
.links a{padding:16px 2px;border-bottom:1px solid #f1efe9;display:flex;justify-content:space-between;align-items:center}
.links a:not(.nav-cta):after{content:"›";color:#b8b2a5;font-size:22px;font-weight:400}
.links .nav-cta{display:block;margin-top:24px;border:0;background:var(--gold);color:#fff;text-align:center;border-radius:12px;padding:15px;font-size:16px}
body.menu-lock{overflow:hidden}
.section{padding:52px 0}
.hero{padding-bottom:100px}
.device{padding-right:0}
.phone{display:none}
.app{grid-template-columns:1fr}.app aside{display:none}
.kpis{grid-template-columns:repeat(2,1fr)}
.strip ul{grid-template-columns:repeat(2,1fr)}
.strip li{border-left:0!important;border-top:1px solid var(--line)}
.strip li:nth-child(-n+2){border-top:0}
.strip li:nth-child(even){border-left:1px solid var(--line)!important}
.two,.three,.four,.port,.paths,.views,.feature-row,.footgrid,.relation{grid-template-columns:1fr}
.view+.view{border-left:0;border-top:1px solid var(--line)}
.feature-row.flip .media{order:0}
.feature-row{gap:22px;padding:40px 0}
.between{flex-direction:column;align-items:start}
.relation .plus{text-align:center}
}
.media video{width:100%;aspect-ratio:216/94;object-fit:cover;display:block;background:#000}
.kicker .i{width:14px;height:14px;vertical-align:-2px}

/* 2차 개편 추가 */
.spotlight{display:grid;grid-template-columns:1.1fr 1fr;gap:52px;align-items:center}
.spotlight h2{font-size:clamp(26px,3vw,36px)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span{background:#fff;border:1px solid #e2d8c6;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.aud{background:#fff;color:var(--navy);border-radius:14px;padding:22px 18px}
.aud .ico{width:44px;height:44px;border-radius:12px;background:var(--ivory);display:grid;place-items:center;color:var(--gold)}
.aud .ico .i{width:22px;height:22px}
.aud h3{font-size:16px;margin:14px 0 4px}
.scene{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:#fff;display:flex;flex-direction:column;transition:.2s}
.scene:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(23,35,58,.1);color:inherit}
.scene .tag{align-self:flex-start}
.scene h3{font-size:18px;margin:12px 0 6px}
.scene p{font-size:14px;color:var(--muted);margin:0 0 16px;flex:1}
.scene .flow{font-size:12.5px;font-weight:700;color:#936e32;background:var(--ivory);border-radius:8px;padding:8px 12px}
.yt{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.yt-logo svg{width:44px;height:32px;display:block}
.yt div{flex:1}.yt h3{margin:0 0 2px;font-size:18px}.yt p{margin:0;font-size:14px;color:var(--muted)}
.yt .btn{white-space:nowrap}
.soon{font-size:13px;font-weight:700;color:#8a93a3;background:#f1f3f6;border-radius:999px;padding:6px 14px;white-space:nowrap}
.paths.four{grid-template-columns:repeat(4,1fr)}
.paths.four .path{padding:24px}
.paths.four .path h3{font-size:18px}
.port{grid-template-columns:1.25fr 1fr 1fr}
.port .feature{grid-row:span 2}
.tile .tag{display:table;margin:14px 0 -6px}
.media iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
@media(max-width:1020px){.paths.four{grid-template-columns:repeat(2,1fr)}.spotlight{grid-template-columns:1fr;gap:30px}.port{grid-template-columns:1fr 1fr}.port .feature{grid-row:auto;grid-column:span 2}}
@media(max-width:760px){.paths.four{grid-template-columns:1fr}.port{grid-template-columns:1fr}.port .feature{grid-column:auto}.yt{flex-wrap:wrap}.strip a{padding:16px 6px;font-size:13px}.strip .ico{width:46px;height:46px}}
.flist{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:2px}.flist a{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid #ffffff1a;font-size:14px;color:#e5e8ef}.flist a:hover{color:var(--gold-soft)}.flist .i{width:17px;height:17px;color:var(--gold-soft)}
.zipband{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:#fff;border:1px solid #e2d8c6;border-radius:16px;padding:26px 30px;margin-bottom:22px}
.zlogo{font-size:34px;font-weight:800;letter-spacing:-.5px;color:var(--navy);line-height:1}
.zlogo b{color:var(--gold)}
.ztext h3{margin:8px 0 4px;font-size:19px}
.ztext p{margin:0;font-size:14px;color:var(--muted)}
.zipband .btn{white-space:nowrap}
@media(max-width:760px){.zipband{grid-template-columns:1fr;gap:12px;padding:22px}}