@font-face{font-family:Pretendard;src:url(assets/fonts/PretendardVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --chrome-top:#0B2A4A;--chrome-deep:#123F6B;--chrome:#1A62AE;--teal:#0B7A8A;--sel:#D9F0F2;
  --page:#EEF2F6;--paper:#FFFFFF;--head:#E3EEF8;--th:#EDF2F7;--alt:#F5F8FB;
  --ink:#16222E;--sub:#526070;--muted:#8390A2;--border:#A8BBCF;--grid:#C9D5E1;
  --danger:#B42318;--danger-fill:#FDE3E1;--warn:#7A5300;--warn-fill:#FFF0BF;--ok:#1E6B3F;--ok-fill:#E1F2E6;
  --font:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --wrap:1200px;--gutter:clamp(16px,4vw,40px);--head-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 16px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--font);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.65;word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden}
::selection{background:var(--sel);color:var(--ink)}
a{color:var(--chrome)}
img,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{letter-spacing:-0.02em;line-height:1.3;text-wrap:balance}
h1{font-size:clamp(34px,5vw,56px);font-weight:700}
h2{font-size:clamp(28px,3.4vw,40px);font-weight:700}
h3{font-size:clamp(21px,2.2vw,26px);font-weight:700;color:var(--chrome-deep)}
p{text-wrap:pretty}
.lead{font-size:clamp(18px,1.6vw,21px);color:var(--sub);max-width:46em}
.source{font-size:14px;color:var(--sub);line-height:1.5}
.note{font-size:15px;color:var(--sub);line-height:1.5}

/* 위쪽 고정 메뉴 */
.top{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--grid)}
.top .wrap{display:flex;align-items:center;gap:28px;height:var(--head-h)}
.top .brand{flex:none;display:flex;align-items:center}
.top .brand img{height:24px;width:auto}
.menu{flex:1;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:none;display:block;padding:8px 14px;border-radius:8px;font-size:16px;font-weight:600;color:var(--sub);text-decoration:none;white-space:nowrap}
.menu a:hover{color:var(--ink);background:var(--alt)}
.menu a.on{color:var(--chrome-deep);background:var(--head)}
@media (max-width:720px){
  :root{--head-h:96px}
  .top .wrap{flex-direction:column;align-items:stretch;justify-content:center;gap:4px;height:var(--head-h)}
  .top .brand{height:36px}
  .menu{flex:none;height:44px;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .menu a{padding:7px 12px;font-size:15px}
}

/* 구역 */
section{padding:clamp(56px,8vw,104px) 0;border-top:1px solid var(--grid)}
section.tint{background:var(--page)}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,48px)}
.sub{margin-top:clamp(48px,6vw,80px)}
.sub>h3{margin-bottom:10px}
.sub>.lead{margin-bottom:28px}

/* 소개 */
.hero{border-top:0;padding-top:clamp(40px,6vw,80px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center}
.hero h1 span{display:block;font-size:.52em;color:var(--sub);font-weight:600;margin-bottom:10px;letter-spacing:0}
.hero .lead{margin-top:20px}
.hero .meta{margin-top:28px;display:flex;flex-wrap:wrap;gap:8px 24px;font-size:15px;color:var(--sub)}
.hero figure img{width:100%;height:auto;border-radius:10px;border:1px solid var(--grid)}
.hero figcaption{font-size:14px;color:var(--sub);margin-top:10px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}

/* 2단 */
.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.prose{display:flex;flex-direction:column;gap:16px;max-width:36em}
@media (max-width:900px){.cols{grid-template-columns:1fr}}

/* 그림 공통 */
.fig{display:flex;flex-direction:column;gap:12px}
.fig-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.45}
.fig-title small{display:block;font-size:14px;font-weight:500;color:var(--sub)}
.fig+.fig{margin-top:36px}

/* 비율 막대 */
.ratio-bar{display:flex;min-height:64px;border-radius:6px;overflow:hidden;gap:2px;background:#fff}
.seg{display:flex;flex-wrap:wrap;align-items:center;align-content:center;gap:2px 8px;padding:10px 16px;font-size:16px;line-height:1.3}
.seg b,.seg span{white-space:nowrap}
.seg b{font-weight:700}
.seg-ok{background:var(--chrome);color:#fff}
.seg-bad{background:var(--danger-fill);color:var(--danger)}

/* 표 */
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.data{background:#fff;border:1px solid var(--grid)}
.data th,.data td{border-bottom:1px solid var(--grid);padding:12px 16px;font-size:16px;line-height:1.4;vertical-align:middle}
.data thead th{background:var(--th);font-weight:600;color:var(--sub);font-size:14px}
.data th:first-child,.data td:first-child{text-align:left}
.data th:not(:first-child),.data td:not(:first-child){text-align:right;width:7.5em;white-space:nowrap}
.data tbody tr:last-child td{border-bottom:0}
.data td.col-app{color:var(--chrome-deep);font-weight:700}
.data tr.sum td{background:var(--head);font-weight:700}

/* 가로 막대(응답 비율) */
.hbars,.rbars{list-style:none;display:flex;flex-direction:column;gap:16px}
.hbars li,.rbars li{display:grid;grid-template-columns:minmax(0,1fr) 4.2em;grid-template-areas:'lab val' 'track track';column-gap:12px;row-gap:6px;align-items:baseline}
.lab{grid-area:lab;font-size:16px;line-height:1.4}
.val{grid-area:val;text-align:right;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.track{grid-area:track;display:block;height:14px;background:var(--th);border-radius:3px;overflow:hidden}
.track i{display:block;height:100%;background:var(--chrome);border-radius:0 3px 3px 0}
.rbars .track i{background:var(--border)}
.rbars li.top .track i{background:var(--chrome)}
.rbars li.top .lab{font-weight:700}
.tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
@media (max-width:980px){.tri{grid-template-columns:1fr}}

/* 음성 흐름 */
.flow-wrap{position:relative;border:2px solid var(--chrome-deep);border-radius:8px;padding:40px 24px 24px;background:#fff;margin-top:14px}
.zone-name{position:absolute;top:-14px;left:20px;background:#fff;color:var(--chrome-deep);font-size:16px;font-weight:700;padding:0 8px}
.flow{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.flow li{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--grid);border-radius:8px;background:var(--alt)}
.flow li b{font-size:17px}
.flow li span{font-size:15px;line-height:1.45;color:var(--sub)}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:50%;width:16px;height:2px;background:var(--chrome-deep)}
.outside{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:18px 0 0 24px;font-size:15px}
.blocked-line{width:64px;border-top:2px dashed var(--danger)}
.outside-box{padding:6px 14px;border:1px dashed var(--muted);border-radius:6px;color:var(--muted)}
.outside-note{font-weight:700;color:var(--danger)}
@media (max-width:720px){.flow{grid-template-columns:1fr 1fr}.flow li::after{display:none}}

/* 조작 영역 */
.demo-area{background:#DCE5EE;border-radius:12px;padding:clamp(20px,3vw,36px)}
.demo-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:24px}
.demo-bar .guide{font-size:16px;color:var(--ink);max-width:40em}
.ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.clock-note{font-size:14px;color:var(--sub);margin-right:4px}
.ctl button,.side button{font:inherit;font-size:15px;font-weight:600;color:var(--chrome-deep);background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:8px 14px;cursor:pointer}
.ctl button:hover,.side button:hover{border-color:var(--chrome)}
.devices{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(20px,4vw,64px)}
.phone{width:min(390px,100%);aspect-ratio:390/800;height:auto;border-radius:56px;background:#11161C;padding:14px;box-shadow:0 18px 40px rgba(11,42,74,.22);flex:none}
.phone.android{border-radius:40px}
.phone.small{width:min(330px,100%);aspect-ratio:330/680}
.phone .screen{position:relative;width:100%;height:100%;border-radius:44px;background:#fff;overflow:hidden}
.phone.android .screen{border-radius:28px}
.devices.pair .phone{width:min(360px,calc(50% - 16px))}
.devices.pair .phone.android{width:min(360px,calc(50% - 16px))}
@media (max-width:640px){.devices.pair .phone,.devices.pair .phone.android{width:min(390px,100%)}}
.side{display:flex;flex-direction:column;gap:10px;width:min(360px,100%)}
.side>b{font-size:16px;color:var(--sub)}
.side button{text-align:left;padding:12px 16px}
.side button[aria-pressed="true"]{background:var(--sel);border-color:var(--teal);color:var(--ink)}
.side p{font-size:14px;line-height:1.5;color:var(--sub)}
.with-pc{flex-wrap:nowrap;align-items:center}
.with-pc .phone.small{width:min(300px,26%)}
.browser{flex:1;min-width:0;max-width:1180px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(11,42,74,.22);display:flex;flex-direction:column;aspect-ratio:1180/760}
.browser .bar{flex:none;height:40px;background:#E6ECF2;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--grid)}
.browser .bar i{width:11px;height:11px;border-radius:50%;background:#C3CDD8}
.browser .bar span{margin-left:10px;font-size:14px;color:var(--sub);background:#fff;padding:3px 12px;border-radius:6px}
.browser .screen{position:relative;flex:1;overflow:hidden}
@media (max-width:900px){.with-pc{flex-wrap:wrap}.with-pc .phone.small{width:min(330px,100%)}.browser{flex:none;width:100%}}

/* 영상 */
.film{width:100%;height:auto;border-radius:10px;background:#0E1A26}
.stills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.stills figure{display:flex;flex-direction:column;gap:6px}
.stills img{width:100%;height:auto;border-radius:6px;border:1px solid var(--grid)}
.stills figcaption{font-size:14px;color:var(--sub)}
@media (max-width:720px){.stills{grid-template-columns:1fr}}

/* 문의 */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center}
.contact{display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:20px}
.contact dt{color:var(--sub)}
.contact dd{font-weight:600}
.qr{width:180px;height:180px;border:2px dashed var(--border);border-radius:8px;display:grid;place-items:center;color:var(--muted);font-size:15px;text-align:center}
@media (max-width:640px){.contact-grid{grid-template-columns:1fr}.contact{font-size:17px}}
footer{padding:28px 0 40px;border-top:1px solid var(--grid);font-size:14px;color:var(--sub)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}

/* 자동 시연: 포인터와 누름 표시, 방문자 클릭은 막음 */
.demo-area{position:relative}
.demo-area .phone,.demo-area .browser{pointer-events:none;user-select:none}
.cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s;will-change:transform}
.cursor.show{opacity:1}
.cursor svg{display:block;filter:drop-shadow(0 2px 3px rgba(11,42,74,.35))}
.cursor i{position:absolute;left:-14px;top:-14px;width:32px;height:32px;border-radius:50%;border:3px solid var(--teal);opacity:0}
.cursor.press i{animation:press .5s ease-out}
.cursor.press svg{animation:dip .25s ease-out}
@keyframes press{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.4)}}
@keyframes dip{50%{transform:scale(.86)}}
@media (prefers-reduced-motion:reduce){.cursor.press i,.cursor.press svg{animation:none}}
.now{font-size:15px;color:var(--sub);min-height:1.5em;margin-top:12px;text-align:center}
.auto-note{font-size:14px;color:var(--sub);margin-bottom:16px}

/* 휴대폰·태블릿 가로·세로: 기기 틀과 영상이 화면 높이 안에 들어오도록 */
:root{--fit-h:calc(100vh - var(--head-h) - 48px)}
@supports (height:100svh){:root{--fit-h:calc(100svh - var(--head-h) - 48px)}}
.phone{width:min(390px,100%,max(230px,calc(var(--fit-h) * .4875)))}
.phone.small{width:min(330px,100%,max(220px,calc(var(--fit-h) * .485)))}
.devices.pair .phone,.devices.pair .phone.android{width:min(360px,calc(50% - 16px),max(200px,calc(var(--fit-h) * .4875)))}
.with-pc .phone.small{width:min(300px,26%,max(200px,calc(var(--fit-h) * .485)))}
.browser{max-width:min(1180px,max(460px,calc(var(--fit-h) * 1.55)))}
.film{max-height:max(220px,var(--fit-h));object-fit:contain}
@media (max-width:640px){.devices.pair .phone,.devices.pair .phone.android{width:min(390px,100%,max(230px,calc(var(--fit-h) * .4875)))}}
@media (max-width:900px){.with-pc .phone.small{width:min(330px,100%,max(220px,calc(var(--fit-h) * .485)))}.browser{width:100%}}
/* 가로로 눕힌 휴대폰: 위쪽 메뉴를 한 줄로 낮추고 여백을 줄인다 */
@media (orientation:landscape) and (max-height:540px){
  :root{--head-h:52px}
  .top .wrap{flex-direction:row;align-items:center;gap:16px;height:var(--head-h)}
  .top .brand{height:auto}
  .menu{flex:1;height:auto;margin:0;padding:0}
  .menu a{padding:6px 10px;font-size:14px}
  section{padding:40px 0}
  .demo-area{padding:16px}
  .auto-note{margin-bottom:10px}
  .with-pc{flex-wrap:nowrap}
  .with-pc .phone.small{width:min(300px,30%,max(170px,calc(var(--fit-h) * .485)))}
  .browser{flex:1;width:auto;max-width:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* 세로 화면에서 휴대폰과 PC를 위아래로 놓을 때 둘이 한 화면에 함께 보이도록 휴대폰을 줄인다 */
@media (max-width:900px) and (orientation:portrait){
  .with-pc{gap:20px}
  .with-pc .phone.small{width:min(330px,100%,max(190px,calc((var(--fit-h) - 60vw) * .485)))}
}