:root{--font-scale:1;--r-ctl:10px;--radius:14px;
 --bg:#f6fbff;--surface:#fff;--surface-2:#eaf9ff;--surface-3:#d4efff;--border:#e1e5e9;--border-strong:#cdd1d5;--text:#111417;--muted:#606467;--faint:#6b7075;
 --link:#1273de;--focus:#1273de;--accent-text:#005fa0;--anchor:#5cb8ff;--ok-text:#0a7a54;--ok-line:#9bd9c0;--warn-text:#9a5200;--warn-line:#e8c28f;
 --btn-bg:#b6e3ff;--btn-border:#5cb8ff;--btn-text:#0b3d91;--btn-hover:#96d4ff;--sel-bg:#eaf9ff;--sel-text:#1273de;--tip-bg:#111417;--tip-text:#fff;
 --hero-a:#0b3d91;--hero-b:#1273de;--on-hero:#fff;--on-hero-2:#b6e3ff;color-scheme:light}
:root[data-theme="dark"]{--bg:#111417;--surface:#26292c;--surface-2:#1a2333;--surface-3:#213047;--border:#3a3e42;--border-strong:#4a4e52;--text:#f6fbff;--muted:#77c2ff;--faint:#9fb4c6;
 --link:#5cb8ff;--focus:#5cb8ff;--accent-text:#77c2ff;--ok-text:#22c58e;--ok-line:#1c6b52;--warn-text:#f0a93b;--warn-line:#7a5420;
 --btn-bg:#1a3660;--btn-border:#5cb8ff;--btn-text:#b6e3ff;--btn-hover:#2a5688;--sel-bg:#1a2333;--sel-text:#5cb8ff;--tip-bg:#f6fbff;--tip-text:#111417;--hero-a:#1a3660;--hero-b:#213047;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#111417;--surface:#26292c;--surface-2:#1a2333;--surface-3:#213047;--border:#3a3e42;--border-strong:#4a4e52;--text:#f6fbff;--muted:#77c2ff;--faint:#9fb4c6;
 --link:#5cb8ff;--focus:#5cb8ff;--accent-text:#77c2ff;--ok-text:#22c58e;--ok-line:#1c6b52;--warn-text:#f0a93b;--warn-line:#7a5420;
 --btn-bg:#1a3660;--btn-border:#5cb8ff;--btn-text:#b6e3ff;--btn-hover:#2a5688;--sel-bg:#1a2333;--sel-text:#5cb8ff;--tip-bg:#f6fbff;--tip-text:#111417;--hero-a:#1a3660;--hero-b:#213047;color-scheme:dark}}
*{box-sizing:border-box}
html{font-size:calc(16px*var(--font-scale,1));scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);font:400 1rem/1.7 'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:anywhere}
a{color:var(--link)}img,svg{max-width:100%}
.i{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-999px;top:6px;background:var(--surface);border:1px solid var(--border);padding:8px 12px;border-radius:var(--r-ctl);z-index:99}.skip:focus{left:8px}
.mono{font-family:ui-monospace,Consolas,'Cascadia Mono',monospace}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}.narrow{width:min(860px,100% - 40px);margin-inline:auto}
/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:var(--r-ctl);border:1px solid var(--btn-border);background:var(--btn-bg);color:var(--btn-text);font:700 1rem/1 inherit;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--btn-hover)}.btn.sm{height:40px;padding:0 16px}
.btn.alt{background:transparent;border-color:var(--border-strong);color:var(--text);font-weight:600}.btn.alt:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.7);color:var(--on-hero);font-weight:600}.btn.ghost:hover{background:rgba(255,255,255,.14)}
.ib{width:40px;height:40px;border:1px solid transparent;border-radius:var(--r-ctl);background:transparent;color:var(--text);display:inline-grid;place-items:center;cursor:pointer;position:relative}.ib:hover{background:var(--surface-2);border-color:var(--border)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;z-index:80;left:50%;top:calc(100% + 4px);transform:translateX(-50%);background:var(--tip-bg);color:var(--tip-text);font-size:.85rem;padding:3px 9px;border-radius:7px;white-space:nowrap;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);font-size:.82rem;font-weight:700;white-space:nowrap;vertical-align:middle}
.chip i{font-style:normal}.chip.ok{color:var(--ok-text);border-color:var(--ok-line)}.chip.dev{color:var(--warn-text);border-color:var(--warn-line)}.chip.plan{color:var(--muted)}
.fake{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:2px dashed var(--warn-text);color:var(--warn-text);font-weight:800;font-size:.95rem;border-radius:8px;background:var(--surface);letter-spacing:.02em}
.draft{display:inline-block;font:700 .72rem/1 ui-monospace,Consolas,monospace;color:var(--faint);border:1px solid var(--border);border-radius:4px;padding:2px 5px;margin-left:6px;vertical-align:middle}
/* 머리글 */
header.top{position:sticky;top:0;z-index:60;background:var(--surface);border-bottom:1px solid var(--border);height:72px}
header.top .wrap{display:flex;align-items:center;gap:20px;height:72px;position:relative;width:min(1320px,100% - 40px)}
.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--link);flex:none}.logo svg{height:30px;width:auto}.logo b{font-size:.84rem;color:var(--text);font-weight:700}
nav.menu{display:flex;gap:0;margin-left:10px;height:72px}nav.menu>div{position:relative;display:flex;align-items:stretch}
nav.menu>div>a{display:flex;align-items:center;gap:4px;padding:0 15px;text-decoration:none;color:var(--text);font-weight:600;font-size:.97rem;position:relative}
nav.menu>div>a .i{width:14px;height:14px;opacity:.6}
nav.menu>div>a::after{content:"";position:absolute;left:15px;right:15px;bottom:-1px;height:3px;background:var(--anchor);transform:scaleX(0);transition:transform .2s}
nav.menu>div:hover>a::after,nav.menu>div>a[aria-current]::after,nav.menu>div:focus-within>a::after{transform:scaleX(1)}
nav.menu>div>a[aria-current]{color:var(--link)}
.sub{position:absolute;left:0;top:100%;min-width:220px;background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--anchor);border-radius:0 0 var(--r-ctl) var(--r-ctl);padding:8px;box-shadow:0 12px 28px rgba(0,0,0,.14);display:none;z-index:70}
nav.menu>div:hover>.sub,nav.menu>div:focus-within>.sub{display:block}
.sub a{display:flex;align-items:center;height:42px;padding:0 14px;border-radius:8px;text-decoration:none;color:var(--text);font-weight:500;white-space:nowrap}.sub a:hover{background:var(--surface-2);color:var(--link)}
.tools{margin-left:auto;display:flex;gap:8px;align-items:center;position:relative}.burger{display:none}
.pop{position:absolute;right:0;top:calc(100% + 8px);min-width:270px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-ctl);padding:14px 16px;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:90;display:none;color:var(--text)}.pop.open{display:block}
.i18n-wait main{visibility:hidden}.langpop{min-width:190px;max-height:72vh;overflow:auto;padding:6px}.langlist button{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;cursor:pointer}.langlist button:hover{background:var(--surface-2)}.langlist button[aria-pressed=true]{font-weight:800;color:var(--link)}
.pop h4{margin:0 0 6px;font-size:.9rem;color:var(--muted)}.pop .row{margin-bottom:12px}.pop .row:last-child{margin-bottom:0}
.seg{display:flex;border:1px solid var(--border-strong);border-radius:var(--r-ctl);overflow:hidden}.seg button{flex:1;height:40px;border:0;border-right:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;font:600 .95rem/1 inherit;padding:0 8px}
.seg button:last-child{border-right:0}.seg button[aria-pressed=true]{background:var(--sel-bg);color:var(--sel-text);font-weight:700}.saved{font-size:.88rem;color:var(--ok-text);height:1.2em}
@media (max-width:1023px){.burger{display:inline-grid}header.top .tools .btn{display:none}
 nav.menu{position:absolute;left:0;right:0;top:72px;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;height:auto;padding:8px 14px 14px;margin:0;display:none;max-height:calc(100vh - 72px);overflow:auto}nav.menu.open{display:flex}
 nav.menu>div{flex-direction:column}nav.menu>div>a{height:46px;padding:0 6px}nav.menu>div>a::after{display:none}.sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0}.sub a{height:38px;color:var(--muted)}nav.menu>div>a .i{display:none}}
/* 구간 */
.sec{padding:96px 0}.sec.tight{padding:64px 0}.b-soft{background:var(--surface-2)}.b-surface{background:var(--surface)}
.b-navy{background:linear-gradient(120deg,var(--hero-a),var(--hero-a) 55%,var(--hero-b));color:var(--on-hero)}.b-navy .lead,.b-navy p{color:var(--on-hero-2)}.b-navy h2,.b-navy h3{color:var(--on-hero)}.b-navy .eyebrow{color:var(--on-hero-2)}
.eyebrow{font:700 .85rem/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:var(--accent-text);margin:0 0 18px;text-transform:uppercase}
h1,h2,h3{letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.3rem,4.4vw,3.9rem);line-height:1.18;font-weight:800}
h2{font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.28;font-weight:800}h3{font-size:1.3rem;line-height:1.4;font-weight:700}
.lead{font-size:1.2rem;line-height:1.75;color:var(--muted);margin:18px 0 0;max-width:34em}
p{margin:0 0 14px}.mut{color:var(--muted)}
.rv{opacity:1}.js .rv{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}.js .rv.on{opacity:1;transform:none}
/* 큰 이미지·영상 자리 */
.photo{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--border);aspect-ratio:16/10;display:grid;place-items:center;
 background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:32px 32px}
.photo .need{position:absolute;left:12px;bottom:12px;right:12px;display:flex;gap:8px;background:var(--surface);border:1px dashed var(--border-strong);border-radius:8px;padding:6px 12px;font:600 .8rem/1.4 ui-monospace,Consolas,monospace;color:var(--muted)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo.tall{aspect-ratio:4/5}.photo.wide{aspect-ratio:21/9}.photo.sq{aspect-ratio:1}
.iso{width:min(62%,360px);height:auto;margin-bottom:34px}.iso .sh2{fill:var(--surface-3);opacity:.7}.iso .top{fill:var(--surface);stroke:var(--link);stroke-width:1.6;stroke-linejoin:round}.iso .lf{fill:var(--surface-3);stroke:var(--link);stroke-width:1.6;stroke-linejoin:round}.iso .rt{fill:var(--surface-2);stroke:var(--link);stroke-width:1.6;stroke-linejoin:round}.iso .pt{fill:var(--anchor);stroke:var(--link);stroke-width:1.6}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}.split.rev>:first-child{order:2}
@media (max-width:900px){.sec{padding:60px 0}.split{grid-template-columns:1fr;gap:28px}.split.rev>:first-child{order:0}}
/* 영상 */
.vslot{position:relative;border-radius:var(--radius);overflow:hidden;background:#0d1b33;aspect-ratio:16/9;color:#fff;display:grid;place-items:center}
.vslot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.vslot.live video{display:block}
.vslot .ph{position:absolute;inset:0;display:grid;place-items:center;
 background:radial-gradient(circle at 70% 30%,rgba(92,184,255,.28),transparent 55%),linear-gradient(135deg,#0b2a5c,#0b3d91)}.vslot.live .ph{display:none}
.vslot .grid{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px);background-size:40px 40px}
.vslot .play{position:relative;width:76px;height:76px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer}.vslot .play:hover{background:rgba(255,255,255,.25)}.vslot .play .i{width:30px;height:30px;fill:currentColor;margin-left:4px}
.vslot .cap{position:absolute;left:14px;bottom:12px;right:14px;font:600 .8rem/1.4 ui-monospace,Consolas,monospace;color:#cfe6ff;background:rgba(5,20,45,.55);border:1px dashed rgba(255,255,255,.4);border-radius:8px;padding:5px 10px}
.vtag{position:absolute;right:12px;top:12px;font:700 .75rem/1 ui-monospace,Consolas,monospace;background:rgba(5,20,45,.6);color:#cfe6ff;border-radius:6px;padding:5px 8px;z-index:2}
/* 홈 첫 화면 */
.hero{position:relative;min-height:min(80vh,760px);background:var(--hero-a);color:var(--on-hero);overflow:hidden;display:flex;align-items:center}
.hero .vbg{position:absolute;inset:0}.hero .vbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}.hero .vbg.live video{display:block}.hero .vbg.live .ph{display:none}
.hero .ph{position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,rgba(92,184,255,.35),transparent 50%),linear-gradient(120deg,rgba(0,0,0,.28),transparent 60%),linear-gradient(135deg,var(--hero-a),var(--hero-b))}
.hero .ph svg{position:absolute;right:4%;top:50%;transform:translateY(-50%);width:min(52%,720px);opacity:.9}.hero .ph .ln{stroke:rgba(255,255,255,.55);stroke-width:1.6;fill:none;stroke-dasharray:6 10;animation:dash 24s linear infinite}.hero .ph .ln2{stroke:rgba(182,227,255,.9);stroke-width:2.2;fill:none}
@keyframes dash{to{stroke-dashoffset:-600}}
.hero .in{position:relative;z-index:2;padding:96px 0 120px}.hero h1{color:var(--on-hero);max-width:11em}.hero .lead{color:var(--on-hero-2)}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.hero .vnote{position:absolute;left:20px;bottom:16px;z-index:3;font:600 .78rem/1.4 ui-monospace,Consolas,monospace;color:#cfe6ff;background:rgba(5,20,45,.5);border:1px dashed rgba(255,255,255,.4);border-radius:8px;padding:5px 10px}
.hero .vctl{position:absolute;right:20px;bottom:14px;z-index:3;display:flex;gap:8px}.hero .vctl button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(5,20,45,.45);color:#fff;display:grid;place-items:center;cursor:pointer}
.hero .scroll{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;color:#cfe6ff;font:600 .75rem/1 ui-monospace,Consolas,monospace;letter-spacing:.2em}
/* 하위 페이지 머리 */
.phead{background:var(--surface-2);border-bottom:1px solid var(--border);padding:56px 0 52px;position:relative;overflow:hidden}
.phead .crumb{font-size:.88rem;color:var(--muted);margin-bottom:22px}.phead .crumb a{color:var(--muted);text-decoration:none}.phead .crumb a:hover{color:var(--link)}
.phead h1{font-size:clamp(2rem,3.6vw,3.2rem)}.phead .row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:6px}
.phead .lead{margin-top:14px}
/* 목록 */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border)}
.tile{display:flex;flex-direction:column;gap:10px;padding:26px 24px 28px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);min-height:200px;transition:background .15s}
.tile:hover{background:var(--surface-2)}.tile .no{font:700 .85rem/1 ui-monospace,Consolas,monospace;color:var(--accent-text);letter-spacing:.14em}.tile h3{font-size:1.2rem}.tile p{color:var(--muted);font-size:.95rem;margin:0}.tile .go{margin-top:auto;display:flex;align-items:center;gap:6px;color:var(--link);font-weight:700;font-size:.92rem}
.tile .ico{width:44px;height:44px;color:var(--link)}.tile .ico .i{width:36px;height:36px;stroke-width:1.5}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:40px 56px}
.points{list-style:none;margin:0;padding:0;display:grid;gap:14px}.points li{display:flex;gap:14px}.points li::before{content:"";flex:none;width:8px;height:8px;margin-top:.72em;background:var(--link);border-radius:2px}
.bigline{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;padding:30px 0;border-top:1px solid var(--border);align-items:start}.bigline:last-child{border-bottom:1px solid var(--border)}
.bigline .no{font:800 2.4rem/1 ui-monospace,Consolas,monospace;color:var(--link)}.bigline h3{margin-bottom:8px}.bigline p{margin:0;color:var(--muted)}
@media (max-width:700px){.bigline{grid-template-columns:1fr;gap:6px}}
/* 흐름도(도입 방법) */
.flow{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative;counter-reset:s}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:32px;height:3px;background:linear-gradient(90deg,var(--anchor),var(--link));opacity:.9}
.flow .st{position:relative;padding:0 10px;text-align:center}.flow .dot{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--surface);border:3px solid var(--link);display:grid;place-items:center;color:var(--link);position:relative;z-index:1}.flow .dot .i{width:28px;height:28px}
.flow .n{font:700 .8rem/1 ui-monospace,Consolas,monospace;color:var(--accent-text);letter-spacing:.14em;margin-bottom:6px}.flow h3{font-size:1.1rem;margin-bottom:8px}.flow p{font-size:.92rem;color:var(--muted);margin:0}
.js .flow .st{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}.js .flow.on .st{opacity:1;transform:none}.js .flow.on .st:nth-child(1){transition-delay:0s}.js .flow.on .st:nth-child(2){transition-delay:.18s}.js .flow.on .st:nth-child(3){transition-delay:.36s}.js .flow.on .st:nth-child(4){transition-delay:.54s}.js .flow.on .st:nth-child(5){transition-delay:.72s}.js .flow.on .st:nth-child(6){transition-delay:.9s}
@media (max-width:900px){.flow{grid-template-columns:1fr;gap:26px}.flow::before{left:31px;right:auto;top:0;bottom:0;width:3px;height:auto}.flow .st{text-align:left;display:grid;grid-template-columns:64px 1fr;gap:0 18px}.flow .dot{margin:0}.flow .st .t{grid-column:2}}
/* 탭·비교 */
.tabs{display:flex;gap:6px;margin-bottom:24px;flex-wrap:wrap}.tabs button{height:44px;padding:0 20px;border-radius:99px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font:600 1rem/1 inherit;cursor:pointer}.tabs button[aria-selected=true]{background:var(--sel-bg);color:var(--sel-text);border-color:var(--btn-border);font-weight:800}
.tabpanel[hidden]{display:none}
.cmp{display:grid;grid-template-columns:1fr 56px 1fr 56px 1fr;gap:0;align-items:stretch}.cmp .c{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 24px 20px}.cmp .c h4{margin:0 0 12px;font:700 .85rem/1 ui-monospace,Consolas,monospace;letter-spacing:.14em;color:var(--accent-text)}
.cmp .ar{display:grid;place-items:center;color:var(--link)}.cmp .ar .i{width:28px;height:28px}.cmp ul{margin:0;padding-left:1.1em;color:var(--muted)}.cmp li{margin-bottom:8px}
@media (max-width:900px){.cmp{grid-template-columns:1fr;gap:10px}.cmp .ar{transform:rotate(90deg);height:30px}}
.fakebar{display:flex;gap:14px;align-items:center;border:2px dashed var(--warn-text);border-radius:var(--radius);padding:12px 18px;background:var(--surface);margin-bottom:24px;color:var(--warn-text);font-weight:700}.fakebar b{font-size:1.05rem}
/* FAQ */
.faq details{border-top:1px solid var(--border)}.faq details:last-child{border-bottom:1px solid var(--border)}.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;min-height:64px;font-weight:700;font-size:1.08rem}.faq summary::-webkit-details-marker{display:none}
.faq summary .i{transition:transform .15s;color:var(--link)}.faq details[open] summary .i{transform:rotate(90deg)}.faq .a{padding:0 0 22px 34px;color:var(--muted)}
/* 화면 도해 */
.mock{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;box-shadow:0 18px 40px rgba(11,61,145,.12)}
.mock .bar{display:flex;gap:6px;align-items:center;height:34px;padding:0 12px;background:var(--surface-2);border-bottom:1px solid var(--border)}.mock .bar i{width:10px;height:10px;border-radius:50%;background:var(--border-strong)}.mock .bar span{margin-left:10px;font:600 .75rem/1 ui-monospace,Consolas,monospace;color:var(--muted)}
.mock .bd{padding:14px;display:grid;gap:10px}.sk{background:var(--surface-3);border-radius:6px;height:12px}.sk.s{width:40%}.sk.m{width:70%}.sk.a{background:var(--anchor);opacity:.7}.skb{border:1.5px dashed var(--border-strong);border-radius:8px;padding:10px;display:grid;gap:8px}
/* 문의 띠 · 푸터 */
.ctaband{text-align:center;padding:84px 0}.ctaband h2{max-width:16em;margin:0 auto}.ctaband .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.contacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);background:var(--surface)}
.contacts .c{position:relative;padding:28px 56px 28px 26px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}.contacts small{display:block;color:var(--accent-text);font-weight:700;margin-bottom:6px}.contacts a,.contacts b{font-size:1.4rem;font-weight:800;color:var(--text);text-decoration:none;word-break:break-all}.contacts a:hover{color:var(--link)}.contacts .cp{position:absolute;right:10px;top:18px}
footer.ft{background:var(--surface);border-top:1px solid var(--border);padding:36px 0 40px;font-size:.9rem;color:var(--muted);line-height:1.8}footer.ft p{margin:0 0 3px}footer.ft b{color:var(--text)}
footer.ft .links{display:flex;gap:6px 22px;flex-wrap:wrap;margin-bottom:18px}footer.ft .links a{color:var(--muted);text-decoration:none;font-weight:600}footer.ft .links a:hover{color:var(--link)}footer.ft .cp2{margin-top:12px;color:var(--faint)}
.draftbar{background:var(--surface-3);color:var(--text);font-size:.8rem;text-align:center;padding:5px 12px;border-bottom:1px solid var(--border)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.js .rv,.js .flow .st{opacity:1!important;transform:none!important}}
.hide{display:none!important}

.todo{display:inline-block;border:1px dashed var(--warn-text);color:var(--warn-text);border-radius:6px;padding:0 8px;font-weight:700;font-size:.85rem;line-height:1.7}
.stack{display:grid;gap:18px}.big-q{font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:800;letter-spacing:-.025em;line-height:1.4;border-left:5px solid var(--link);padding-left:20px;margin:0 0 20px}
.tbl{width:100%;border-collapse:collapse}.tbl th,.tbl td{padding:14px 18px 14px 0;text-align:left;vertical-align:top;border-top:1px solid var(--border)}.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:1px solid var(--border)}.tbl th{width:140px;color:var(--link);white-space:nowrap}
.linkrow{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}.pn{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--border);padding-top:22px;margin-top:40px}.pn a{text-decoration:none;font-weight:700;color:var(--text)}.pn a small{display:block;color:var(--muted);font-weight:500}.pn a:hover{color:var(--link)}
.hlist{display:grid;gap:0}.hlist a{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;padding:30px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text);transition:background .15s,padding .15s}.hlist a:last-child{border-bottom:1px solid var(--border)}
.hlist a:hover{background:var(--surface-2);padding-left:14px}.hlist .no{font:800 2.2rem/1 ui-monospace,Consolas,monospace;color:var(--link)}.hlist h3{font-size:1.6rem;margin-bottom:6px}.hlist p{margin:0;color:var(--muted)}.hlist .go{color:var(--link);display:flex;align-items:center;gap:6px;font-weight:700}
@media (max-width:700px){.hlist a{grid-template-columns:56px minmax(0,1fr)}.hlist .go{display:none}.hlist .no{font-size:1.5rem}}
.nrow{display:grid;grid-template-columns:110px minmax(0,1fr) 110px;gap:16px;align-items:baseline;padding:18px 0;border-top:1px solid var(--border);text-decoration:none;color:var(--text)}.nrow:last-child{border-bottom:1px solid var(--border)}.nrow:hover b{color:var(--link)}.nrow small{color:var(--muted)}.nrow .d{color:var(--muted);text-align:right;font-size:.9rem}
@media (max-width:700px){.nrow{grid-template-columns:1fr}.nrow .d{text-align:left}}
.viewer{position:relative;border-radius:var(--radius);overflow:hidden;background:#0d1b33;aspect-ratio:16/10;color:#cfe6ff}.viewer canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}.viewer canvas:active{cursor:grabbing}
.viewer .vl{position:absolute;left:12px;top:12px;font:700 .78rem/1.4 ui-monospace,Consolas,monospace;background:rgba(5,20,45,.6);border-radius:6px;padding:5px 9px}.viewer .vb{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}.viewer .vb button{height:40px;padding:0 14px;border-radius:99px;border:1px solid rgba(255,255,255,.6);background:rgba(5,20,45,.55);color:#fff;font:600 .9rem/1 inherit;cursor:pointer}
.viewer .vh{position:absolute;left:12px;bottom:12px;font:600 .78rem/1.4 ui-monospace,Consolas,monospace;background:rgba(5,20,45,.6);border-radius:6px;padding:5px 9px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:40px 32px}.vgrid h3{margin:14px 0 6px}.vgrid p{margin:0;color:var(--muted)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:0;border-top:1px solid var(--border)}.principles>div{padding:22px 24px 22px 0;border-bottom:1px solid var(--border)}.principles b{display:block;margin-bottom:4px}
.step4{display:grid;grid-template-columns:1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface)}.step4>div{display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:6px 28px;padding:22px 24px;border-bottom:1px solid var(--border)}.step4>div:last-child{border-bottom:0}.step4>div.core{background:var(--surface-2)}.step4 .n{grid-column:1;font-weight:700;color:var(--accent-text);margin-bottom:2px}.step4 h3{grid-column:1;margin:0}.step4>div>p{grid-column:2;grid-row:1/3;margin:0}.step4 small{grid-column:3;display:block;color:var(--muted);font-size:.88rem;margin:0}.step4 small b{color:var(--text)}.term{font-weight:700}.term .gloss{font-weight:400;color:var(--muted);font-size:.92em}.term .gloss::before{content:' ('}.term .gloss::after{content:')'}
@media (max-width:900px){.step4>div{grid-template-columns:1fr}.step4 .n,.step4 h3,.step4>div>p,.step4 small{grid-column:1;grid-row:auto}}
@media (max-width:900px){.step4{grid-template-columns:1fr}.step4>div{border-right:0;border-bottom:1px solid var(--border)}}
.catlist{display:grid;gap:0}.catlist .cs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid var(--border)}.catlist .cs:last-child{border-bottom:1px solid var(--border)}.catlist .cs h3{font-size:1.1rem}.catlist .cs p{margin:6px 0 0;color:var(--muted)}
@media (max-width:700px){.catlist .cs{grid-template-columns:1fr;gap:6px}}
.split>*{min-width:0}@media (max-width:700px){.mock .bd{grid-template-columns:1fr!important}.mock .bd .skb{min-height:0!important}}
.bottomnote{border-top:1px solid var(--border);padding:18px 0;color:var(--muted);font-size:.92rem}
.review{margin:0;border:2px dashed var(--border-strong);border-radius:var(--radius);background:var(--surface);padding:14px 18px;font-size:.9rem;color:var(--muted)}.review b{color:var(--text)}

/* ===== 시안 G: 사장님 2차 피드백 — 값은 아래 4개만 바꾸면 전부 따라온다 ===== */
:root{--band-h:260px;--space-scale:.5;--trans:240ms;--band-pad:24px}
/* ① 띠 높이 통일(홈 첫 화면 제외 전 페이지 동일) */
.phead{height:var(--band-h);padding:0;display:flex;align-items:center;overflow:hidden}
.phead>.wrap,.phead>.nwrap{width:min(1200px,100% - 40px);margin-inline:auto}
.phead>.wrap,.phead>.nwrap{position:relative;height:100%;display:flex;align-items:center}.phead .crumb{position:absolute;left:0;top:16px;margin:0}.phead .split{width:100%;padding-top:22px}
.photo{aspect-ratio:16/10}.photo.tall{aspect-ratio:4/3}.split .photo{max-height:360px;margin-inline:auto}
.phead .split{grid-template-columns:minmax(0,1fr) auto!important;gap:calc(48px*var(--space-scale))!important;align-items:center}
.phead h1{font-size:clamp(1.8rem,3vw,2.5rem)}.phead .lead{font-size:1.05rem;margin-top:calc(14px*var(--space-scale));max-width:46em;line-height:1.5}
.phead .photo{aspect-ratio:auto;width:min(340px,34vw);height:calc(var(--band-h) - 2*var(--band-pad) - 28px)}
.phead .photo .iso{height:70%;width:auto;margin-bottom:22px}.phead .photo .need{left:8px;right:8px;bottom:8px;padding:3px 8px;font-size:.68rem;line-height:1.3;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media (max-width:900px){.phead{height:auto;min-height:var(--band-h);padding:var(--band-pad) 0}.phead>.wrap,.phead>.nwrap{display:block;height:auto}.phead .crumb{position:static;margin-bottom:10px}.phead .split{padding-top:0}.phead .split{grid-template-columns:1fr!important}.phead .photo{width:100%;height:150px}}
/* ③ 세로 여백 ×--space-scale (글자 크기는 그대로) */
.sec{padding:calc(96px*var(--space-scale)) 0}.sec.tight{padding:calc(64px*var(--space-scale)) 0}
@media (max-width:900px){.sec{padding:calc(60px*var(--space-scale)) 0}}
body{line-height:1.55}.lead{line-height:1.55;margin-top:calc(18px*var(--space-scale))}p{margin-bottom:calc(14px*var(--space-scale))}
.eyebrow{margin-bottom:calc(18px*var(--space-scale))}.split{gap:calc(64px*var(--space-scale))}
.hlist a{padding:calc(30px*var(--space-scale)) 0}.hlist a:hover{padding-left:12px}.bigline{padding:calc(30px*var(--space-scale)) 0}
.tile{padding:calc(26px*var(--space-scale)) 24px calc(28px*var(--space-scale));min-height:calc(200px*var(--space-scale) + 40px);gap:calc(10px*var(--space-scale) + 3px)}
.catlist .cs{padding:calc(22px*var(--space-scale)) 0}.tbl th,.tbl td{padding:calc(14px*var(--space-scale)) 18px calc(14px*var(--space-scale)) 0}
.faq summary{min-height:calc(64px*var(--space-scale) + 12px)}.faq .a{padding-bottom:calc(22px*var(--space-scale))}
.ctaband{padding:calc(84px*var(--space-scale)) 0}.ctaband .cta{margin-top:calc(30px*var(--space-scale))}
.linkrow{margin-top:calc(22px*var(--space-scale))}.pn{margin-top:calc(40px*var(--space-scale));padding-top:calc(22px*var(--space-scale))}
.principles>div{padding:calc(22px*var(--space-scale)) 24px calc(22px*var(--space-scale)) 0}.step4>div{padding:calc(24px*var(--space-scale) + 4px) 22px}
.nrow{padding:calc(18px*var(--space-scale)) 0}.contacts .c{padding:calc(28px*var(--space-scale) + 4px) 56px calc(28px*var(--space-scale) + 4px) 26px}
.cmp .c{padding:calc(24px*var(--space-scale) + 4px) 24px calc(20px*var(--space-scale) + 4px)}.fakebar{margin-bottom:calc(24px*var(--space-scale))}.big-q{margin-bottom:calc(20px*var(--space-scale))}
.hero{min-height:min(58vh,560px)}.hero .in{padding:calc(96px*var(--space-scale)) 0 calc(120px*var(--space-scale))}.hero .cta{margin-top:calc(36px*var(--space-scale))}
footer.ft{padding:calc(36px*var(--space-scale)) 0 calc(40px*var(--space-scale))}.bottomnote{padding:calc(18px*var(--space-scale)) 0}.flow .dot{margin-bottom:calc(18px*var(--space-scale) + 4px)}
.tabs{margin-bottom:calc(24px*var(--space-scale))}.mock .bd{gap:calc(10px*var(--space-scale) + 4px)}
/* ② 페이지 전환: 내용 영역만 부드럽게(머리글·푸터는 고정) */
@keyframes pgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main.pg-in{animation:pgIn var(--trans) ease-out both}
main.pg-out{opacity:0;transform:translateY(-8px);transition:opacity var(--trans) ease-in,transform var(--trans) ease-in}
@media (prefers-reduced-motion:reduce){main.pg-in{animation:none}main.pg-out{opacity:1;transform:none;transition:none}}

/* ===== 디자인 패스(frontend-design · impeccable · taste-skill · ui-ux-pro-max): AI 티 제거·위계·접근성 ===== */
.js .rv{opacity:1!important;transform:none!important;transition:none!important}
.hero .ph .ln{animation:none}
h1,h2,h3{text-wrap:balance}p,.lead,.big-q{text-wrap:pretty}
.big-q{border-left:0;padding-left:0;font-size:clamp(1.45rem,2.2vw,1.95rem);line-height:1.45;letter-spacing:-.02em}
.bigline{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px}.bigline h3{margin:0}
.hlist a{grid-template-columns:minmax(0,1fr) auto}.hlist h3{font-size:1.5rem}.hlist a:hover{padding-left:12px}
.principles{display:block;border-top:1px solid var(--border)}.principles>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;padding:calc(18px*var(--space-scale) + 4px) 0}.principles b{margin:0}
.flow .n,.step4 .n{font-family:inherit;letter-spacing:0;font-size:.88rem;font-weight:700}
.tgroup+.tgroup{margin-top:calc(64px*var(--space-scale))}.tg-h{font-size:1.35rem;display:flex;gap:12px;align-items:baseline;margin:0 0 6px}.tg-h small{font-size:.9rem;font-weight:500;color:var(--muted)}
.trow{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr) auto;gap:20px;align-items:center;padding:calc(20px*var(--space-scale) + 6px) 8px;margin-inline:-8px;border-top:1px solid var(--border);text-decoration:none;color:var(--text);transition:background var(--trans)}
.tgroup .trow:last-child{border-bottom:1px solid var(--border)}.trow:hover{background:var(--surface-2)}.trow b{font-size:1.15rem}.trow span{color:var(--muted)}.trow .i{color:var(--link)}
@media (max-width:700px){.trow{grid-template-columns:minmax(0,1fr) auto}.trow span{grid-column:1}.bigline,.principles>div{grid-template-columns:1fr;gap:4px}}
.ctainfo{display:flex;gap:10px 44px;justify-content:center;flex-wrap:wrap;margin-top:calc(26px*var(--space-scale) + 6px)}
.ctainfo a{color:var(--on-hero);font-weight:700;font-size:1.3rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);font-variant-numeric:tabular-nums}.ctainfo a:hover{border-bottom-color:#fff}
.ctahint{margin:14px 0 0;color:var(--on-hero-2);font-size:.9rem}
.contacts a,.contacts b,.nrow .d,.hist b,.tbl th{font-variant-numeric:tabular-nums}
.need,.vtag,.vslot .cap,.hero .vnote,.draft,.mono{font-family:inherit}
::selection{background:var(--surface-3);color:var(--text)}
html{scrollbar-color:var(--border-strong) var(--bg);caret-color:var(--link)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
.btn:active,.ib:active,.tabs button:active,.seg button:active{transform:translateY(1px)}
.ib{width:44px;height:44px}.btn.sm{height:44px}.seg button{height:44px}.tabs button{height:44px}

/* 회사 CI: 로고 파랑 = 원본 PNG 실측 #4D93D9. 앵커(그래픽용 선·테두리)를 로고 파랑에 맞춤(흰 바탕 대비 2.15 → 3.24) */
:root{--anchor:#4e94d9;--logo-blue:#4e94d9}
.logo-img{display:block;height:34px;width:auto}
.ft-brand{margin-bottom:14px}.ft-brand img{display:block;height:20px;width:auto}
/* 소개 띠 장식: 옅은 격자 + 오른쪽 아래 영문 아웃라인 워터마크(시안 H 참고). 글자 뒤에 깔려 읽기를 방해하지 않게 대비를 낮춘다 */
.phead{background-image:linear-gradient(color-mix(in srgb,var(--anchor) 14%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--anchor) 14%,transparent) 1px,transparent 1px);background-size:56px 56px}
.phead .wm{position:absolute;right:-.04em;bottom:-.2em;z-index:0;font-size:clamp(72px,13vw,200px);font-weight:800;letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--anchor) 50%,transparent);white-space:nowrap;pointer-events:none;user-select:none}
.phead>.wrap,.phead>.nwrap{z-index:1}
@media (max-width:700px){.phead .wm{font-size:56px;-webkit-text-stroke-width:1px}}
/* 영상 슬롯: 세 축 띠 배경 영상(있을 때만 켜짐) · 기술 클립 */
.phead .bandv{position:absolute;inset:0;z-index:0;display:none;overflow:hidden;background:var(--hero-a)}.phead .bandv.live{display:block}
.phead .bandv video{width:100%;height:100%;object-fit:cover;display:block}
.phead .bandv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,61,145,.84) 0%,rgba(11,61,145,.58) 55%,rgba(11,61,145,.22) 100%)}
.phead:has(.bandv.live) h1,.phead:has(.bandv.live) .lead{color:#fff}.phead:has(.bandv.live) .crumb,.phead:has(.bandv.live) .crumb a{color:#d8eeff}
.phead:has(.bandv.live) .wm{-webkit-text-stroke-color:rgba(255,255,255,.38)}
.clipwrap{max-width:860px;margin:0 auto}
.hero:has(.vbg.live) .vnote{display:none}
.hero h1{max-width:none}
.cs[id]{scroll-margin-top:96px}
.cs.hasph{grid-template-columns:200px 220px minmax(0,1fr);align-items:start}.cs.hasph>.cph{grid-column:2;grid-row:1}.cs.hasph>div:nth-child(2){grid-column:3;grid-row:1}.cph{margin:0}.cph img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface-2)}
@media (max-width:760px){.cs.hasph{grid-template-columns:1fr}.cs.hasph>.cph,.cs.hasph>div:nth-child(2){grid-column:auto;grid-row:auto}.cph img{max-height:240px}}
@media (min-width:901px){.hero{min-height:calc(min(58vh,560px) - 1.18*clamp(2.3rem,4.4vw,3.9rem))}}
.vslot.live .cap,.vslot.live .vtag{display:none}.vslot.playing .play{display:none}
@media (max-width:700px){.phead .bandv::after{background:linear-gradient(90deg,rgba(11,61,145,.9),rgba(11,61,145,.72))}}
/* 로봇 개념 화면 */
.phead .bandvid{aspect-ratio:auto;width:min(340px,34vw);height:calc(var(--band-h) - 2*var(--band-pad) - 28px);border-radius:var(--radius);border:1px solid var(--border)}.phead .bandvid .play{display:none}
@media (max-width:900px){.phead .bandvid{width:100%;height:150px}}
.concept{display:flex;gap:10px;align-items:center;margin:10px 0 0;color:var(--warn-text);font-weight:700}.cflag{display:inline-flex;align-items:center;height:30px;padding:0 14px;border:2px dashed var(--warn-text);border-radius:8px;background:var(--surface);font-weight:800}
.stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(40px*var(--space-scale)) 24px;margin-top:calc(48px*var(--space-scale))}.still{margin:0}.still img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--border)}.still figcaption{margin-top:8px;color:var(--muted);font-size:.95rem}
@media (max-width:700px){.stills{grid-template-columns:1fr}}
/* 긴 값(이메일·전화·URL·번호)은 단어 중간에서 끊지 않는다 */
.nw{white-space:nowrap}
.contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
.contacts .c a,.contacts .c b,.ctainfo a,footer.ft a,.nrow .d{overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
.contacts .c a,.contacts .c b{font-size:clamp(1.05rem,2.1vw,1.4rem)}
.contacts .c{min-width:0}
.ctainfo a{font-size:clamp(1rem,4.2vw,1.3rem)}
.cell a,.cell b,.sc a,.sc b,.hist b{overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
@media (max-width:700px){.contacts{grid-template-columns:minmax(0,1fr)}.contacts .c a,.contacts .c b{font-size:clamp(1rem,5.2vw,1.3rem)}}

/* 배포본: 영상이 없는 자리는 재생 단추 없이 조용한 색면 */
.vslot:not(.live) .play{display:none}
.photo{min-height:200px}

.ctainfo{margin-top:calc(26px*var(--space-scale) + 26px)}.ctainfo a{position:relative}.ctainfo .lab{position:absolute;left:0;top:-1.5em;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.75);white-space:nowrap}.ctaband h2{max-width:none}@media(min-width:900px){.ctaband h2{white-space:nowrap}}

@media (min-width:1000px){.catlist{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.catlist .cs.hasph{grid-template-columns:minmax(0,1fr) 200px;column-gap:20px;row-gap:6px}.catlist .cs.hasph>div:nth-child(1){grid-column:1;grid-row:1}.catlist .cs.hasph>div:nth-child(2){grid-column:1;grid-row:2}.catlist .cs.hasph>.cph{grid-column:2;grid-row:1 / span 2}.catlist .cs:last-child{border-bottom:0}}

.ft .ft-wm{height:20px;width:auto;vertical-align:-4px;display:inline-block}

/* 한지 바탕: 이음매 없는 반복 무늬(밝은 테마만). 끄려면 --paper:none */
:root{--paper:url(hanji.webp)}
:root[data-theme="dark"]{--paper:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:none}}
body,.b-surface,.b-soft{background-image:var(--paper);background-size:600px 600px;background-repeat:repeat}

.ctainfo{row-gap:30px}



/* 블랙 테마 페이지 바탕: 우리 현장 사진(중복 없이 페이지별, 상표·고객사 글자 없는 컷만) */
:root[data-theme="dark"] body:has(.phead[data-ph="1016"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1016.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1023"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1023.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1026"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1026.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1028"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1028.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1033"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1033.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1034"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1034.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1048"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1048.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1057"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1057.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1058"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1058.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="1059"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1059.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="y48"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y48.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="y60"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y60.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="y64"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y64.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="y68"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y68.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph="y80"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y80.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root[data-theme="dark"] body:has(.phead[data-ph]) .b-surface{background:rgba(18,21,26,.22)}
:root[data-theme="dark"] body:has(.phead[data-ph]) .b-soft{background:rgba(26,35,51,.26)}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) body:has(.phead[data-ph="1016"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1016.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1023"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1023.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1026"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1026.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1028"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1028.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1033"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1033.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1034"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1034.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1048"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1048.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1057"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1057.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1058"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1058.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="1059"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_1059.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="y48"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y48.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="y60"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y60.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="y64"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y64.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="y68"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y68.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph="y80"]){background-image:linear-gradient(rgba(10,12,16,.52),rgba(10,12,16,.68)),url(bg/pool_y80.jpg);background-size:cover;background-position:center;background-attachment:fixed}
:root:not([data-theme="light"]) body:has(.phead[data-ph]) .b-surface{background:rgba(18,21,26,.22)}
:root:not([data-theme="light"]) body:has(.phead[data-ph]) .b-soft{background:rgba(26,35,51,.26)}
}
/* 바닥글: 작고 가볍게(소사장 사이트 스타일) — 위 구분선, 오른쪽 정렬, 링크 굵게, 정보 한 줄씩 연하게 */
footer.ft{padding:14px 0 18px;border-top:1px solid var(--border)}
footer.ft .wrap{text-align:right}
footer.ft .links{justify-content:flex-end;gap:4px 14px;margin:0 0 6px;font-size:.78rem;font-weight:700}
footer.ft .links a{font-size:.78rem;font-weight:700}
footer.ft p{margin:2px 0;font-size:.74rem;line-height:1.55;color:var(--muted)}
footer.ft .ft-wm{height:15px;vertical-align:-3px}
@media(max-width:700px){footer.ft .wrap{text-align:left}footer.ft .links{justify-content:flex-start}}

/* 시험 현장 갤러리: 사진 크기 절반(4열), 여러 장 */
.stills.gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(24px*var(--space-scale)) 14px;margin-top:calc(28px*var(--space-scale));align-items:start}
.stills.gal .still img{aspect-ratio:4/3;object-fit:cover;height:auto}
.stills.gal figcaption{font-size:.8rem;line-height:1.45;margin-top:6px}
@media(max-width:900px){.stills.gal{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 아주 좁은 화면(320~380): 머리글 아이콘 3개가 한 줄에 들어오게 */
@media (max-width:380px){.photo{aspect-ratio:auto}}
@media (max-width:480px){.top .wrap{gap:8px}.logo b{font-size:.736rem}.tools{gap:2px}.ib{width:38px;height:38px}.langpop{right:-40px}}
@media (max-width:340px){.logo b{display:none}}
@media (max-width:520px){html:not([lang="ko"]) .logo b{display:none}}
/* 메뉴 낱말이 긴 언어(프랑스어·독일어·러시아어·포르투갈어·네덜란드어)는 넓은 화면에서 머리글 회사 이름 글자를 빼고 메뉴 간격을 줄여 한 줄에 맞춤 */
@media (min-width:1024px){html:is([lang="fr"],[lang="de"],[lang="ru"],[lang="pt"],[lang="nl"],[lang="tr"],[lang="es"]) nav.menu>div>a{padding:0 8px}}
/* 한국어가 아닐 때: 긴 글이 들어와도 줄바꿈·넘침 없이 */
html:not([lang="ko"]) .ctaband h2{white-space:normal;max-width:22em;margin-left:auto;margin-right:auto}
html:not([lang="ko"]) main{overflow-wrap:break-word}
html:not([lang="ko"]) body,html:not([lang="ko"]) body *{word-break:normal}
html[lang="ja"] body,html[lang="zh"] body{line-break:strict}
html:not([lang="ko"]) .chip{white-space:normal;max-width:100%}
html[lang="hi"] h1,html[lang="hi"] h2,html[lang="hi"] h3,html[lang="th"] h1,html[lang="th"] h2,html[lang="th"] h3,html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3{letter-spacing:0}
/* 한국어가 아닐 때 머리글 메뉴: 글자가 길어 한 줄 메뉴가 안 들어가므로 낱말을 끊지 않고, 좁아지면 더 일찍 메뉴 단추로 바꿈 */
html:not([lang="ko"]) nav.menu>div>a{white-space:nowrap;padding:0 11px;font-size:.92rem}
html:not([lang="ko"]) nav.menu>div>a::after{left:11px;right:11px}
@media (max-width:1023px){
html:not([lang="ko"]) .burger{display:inline-grid}
html:not([lang="ko"]) nav.menu{position:absolute;left:0;right:0;top:72px;background:var(--surface);border-bottom:1px solid var(--border);flex-direction:column;height:auto;padding:8px 14px 14px;margin:0;display:none;max-height:calc(100vh - 72px);overflow:auto}
html:not([lang="ko"]) nav.menu.open{display:flex}
html:not([lang="ko"]) nav.menu>div{flex-direction:column}
html:not([lang="ko"]) nav.menu>div>a{height:46px;padding:0 6px}
html:not([lang="ko"]) nav.menu>div>a::after{display:none}
html:not([lang="ko"]) .sub{position:static;display:block;border:0;box-shadow:none;padding:0 0 4px 14px;min-width:0}
html:not([lang="ko"]) .sub a{height:38px;color:var(--muted)}
html:not([lang="ko"]) nav.menu>div>a .i{display:none}}

html:not([lang="ko"]) h1,html:not([lang="ko"]) h2,html:not([lang="ko"]) h3{hyphens:auto;overflow-wrap:anywhere}
.phead .row h1{min-width:0}
.concept{flex-wrap:wrap;overflow-wrap:anywhere}
html:not([lang="ko"]) .tbl td,html:not([lang="ko"]) .tbl th{overflow-wrap:anywhere}
@media (max-width:480px){.bigline{grid-template-columns:minmax(0,118px) minmax(0,1fr)!important}.pn{gap:12px}.pn a{min-width:0;overflow-wrap:anywhere}}
html[lang="th"] body,html[lang="hi"] body{line-height:1.75}
/* 허브 윗띠 배경 영상(공장 8초 반복): 검정 테마에서는 어두운 막 */
:root[data-theme="dark"] .phead .bandv.bgf::after{background:linear-gradient(90deg,rgba(10,12,16,.9) 0%,rgba(10,12,16,.7) 55%,rgba(10,12,16,.42) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .phead .bandv.bgf::after{background:linear-gradient(90deg,rgba(10,12,16,.9) 0%,rgba(10,12,16,.7) 55%,rgba(10,12,16,.42) 100%)}}
/* 회사 영문 표기(UONE · UONE system Inc.)는 로고 글씨처럼 굵은 기울임(글자는 그대로 선택·복사 가능) */
/* 상표 글씨: 사장님 지정 Arial Black 기울임(Windows·Mac 기본 글꼴 — 없는 기기는 자체 호스팅 Nunito ExtraBold Italic(OFL, 라틴만)으로 대체) + 로고 파랑. 한글은 기본 글꼴의 기울임. 글자는 그대로라 선택·복사·번역 가능 */
@font-face{font-family:"UoneBrand";src:url(fonts/nunito-800-italic-latin.woff2) format("woff2");font-weight:800;font-style:italic;font-display:swap}
:root{--brand:#2760a8}:root[data-theme="dark"]{--brand:#6fb3f2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#6fb3f2}}
.brand-it{font-family:"Arial Black","Arial Black Gadget","UoneBrand","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;font-style:italic;font-weight:900;color:var(--brand);letter-spacing:-.01em;padding-right:.22em}
.hero .brand-it,.b-navy .brand-it,.ctaband .brand-it,.phead .bandv .brand-it{color:#a9d6ff}
.simfig img{display:block;width:100%;height:auto;border-radius:var(--radius)}.simfig figcaption{margin:10px 0 0;font-size:.88rem;line-height:1.5;color:var(--faint)}
/* 시험 장비 협찬 표기 */
.credit{margin:10px 0 0;font-size:.8rem;color:var(--muted);line-height:1.4}figcaption .credit{display:block;margin:2px 0 0}
/* 홈 첫 화면 제목: 앞부분은 0.7배, UONE system 은 그대로 */
.hero h1 .h1-sub{font-size:.63em}
/* 홈 카드: 설비 & AI 도입 (로봇 사진) */
.vslot.vert{aspect-ratio:9/17}.stills.gal .vfig{grid-row:span 2}
@media(max-width:900px){.stills.gal .vfig{grid-row:auto}}
.hlist a.hasimg{grid-template-columns:minmax(0,1fr) 260px auto}
.hlist .hthumb{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:35% 45%;border-radius:var(--radius);border:1px solid var(--border)}
@media (max-width:900px){.hlist a.hasimg{grid-template-columns:minmax(0,1fr)}.hlist a.hasimg .hthumb{max-height:200px}.hlist a.hasimg .go{display:none}}
/* 261018 기울인 이름 뒤 간격: 글자가 바로 붙는 곳만 .22em, 뒤에 공백·줄끝·구두점이 있으면 기존 .08em */
.brand-it.bi-s,.brand-it.bi-e{padding-right:.08em}
/* 261018 푸터 회사 정보: 줄1(마크)은 그대로, 나머지 3줄은 기존 .74rem 의 0.8배 */
footer.ft .ft-id{text-align:right}
footer.ft .ft-s{font-size:calc(.74rem*.8);text-align:right}
@media(max-width:700px){footer.ft .ft-id,footer.ft .ft-s{text-align:right}}
/* 261018 헤더 이름: 한국어 화면에서 "유원시스템" 글씨 높이를 로고 마크 높이(--lh)와 같게. 글자 잉크 높이 ≈ 0.938em → font-size = --lh ÷ 0.938 */
html[lang="ko"] .top{--lh:34px}
html[lang="ko"] .top .logo-img{height:var(--lh)}
html[lang="ko"] .top .logo b{font-size:calc(var(--lh)*.853);line-height:1.1;position:relative;top:calc(var(--lh)*-.021)}
@media (max-width:480px){html[lang="ko"] .top{--lh:24px}}
@media (max-width:380px){html[lang="ko"] .top{--lh:20px}}
@media (max-width:340px){html[lang="ko"] .top{--lh:34px}}
/* 메뉴 드롭다운 링크는 flex 라 뒤 공백이 사라짐 → 공백 폭만큼 직접 간격 */
.menu .sub a>.brand-it.bi-s{padding-right:.3em}

/* 261018f 사장님 수정 — 연혁 줄 맞춤(날짜 칸과 내용 칸을 같은 글줄 기준선으로) · 연혁 속 회사 이름 색 · 아직 쪽이 없는 제품 카드 */
.timeline .bigline{align-items:baseline}.timeline .bigline .no{line-height:1.3}.timeline .bigline h3{margin:0;line-height:1.3}
:root{--hist-brand:#3e86cf}:root[data-theme="dark"]{--hist-brand:var(--brand)}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hist-brand:var(--brand)}}
.timeline .brand-it,.hist .brand-it{color:var(--hist-brand)}
.hist b{line-height:1.5}
.hlist .hl-static{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center;padding:30px 0;border-top:1px solid var(--border);color:var(--text)}
.hlist .hl-static:last-child{border-bottom:1px solid var(--border)}
.hlist .hl-static h3{font-size:1.5rem;margin-bottom:6px}.hlist .hl-static p{margin:0;color:var(--muted)}
/* 푸터 맨 아래 © 줄을 없앤 뒤 떠 있는 AI 상담 단추가 마지막 글줄을 가리지 않게 아래 여백 */
body:has(.ct-launch) footer.ft{padding-bottom:84px}

/* ===== 261018f 2차 ===== */
/* 로고 색 통일: 헤더 한글 이름·연혁 이름 = 로고 단색 #4E94D9 */
:root{--hist-brand:#4e94d9;--hero-shift:clamp(8px,2.8vw,36px)}
:root[data-theme="dark"]{--hist-brand:#4e94d9}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--hist-brand:#4e94d9}}
.top .logo .brand-it{color:#4e94d9}
/* 영문 헤더 이름(Arial Black 12° 기울임 벡터 이미지) */
.logo-name{display:block;height:calc(var(--lh,34px)*.56);width:auto;position:relative;top:calc(var(--lh,34px)*-.02)}
.logo b:has(.logo-name){line-height:0;font-size:0}
header.top nav.menu>div>a{white-space:nowrap}
/* 헤더 메뉴: 폭이 모자라면 먼저 간격을 줄이고(mc), 그래도 모자라면 메뉴를 아래 줄로(mw) — 숨기지 않음. 판단은 f.js fitHeader */
header.top.mc nav.menu>div>a{padding:0 7px;font-size:.86rem}header.top.mc nav.menu>div>a::after{left:7px;right:7px}header.top.mc .wrap{gap:10px}header.top.mc .logo-name{height:calc(var(--lh,34px)*.5)}
header.top.mc2 nav.menu>div>a{padding:0 5px;font-size:.8rem;gap:2px}header.top.mc2 nav.menu>div>a::after{left:5px;right:5px}header.top.mc2 nav.menu>div>a .i{display:none}header.top.mc2 .wrap{gap:6px}
header.top.mw{height:auto}header.top.mw .wrap{flex-wrap:wrap;height:auto;row-gap:0}header.top.mw .logo,header.top.mw .tools{height:72px}
header.top.mw nav.menu{order:3;width:100%;margin:0;height:auto;border-top:1px solid var(--border);flex-wrap:wrap}header.top.mw nav.menu>div{height:44px}
header.top.mw nav.menu>div>a{padding:0 10px;font-size:.9rem}header.top.mw nav.menu>div>a::after{left:10px;right:10px;bottom:0}
/* 홈 큰 문구: 번역 문장 다음 줄에 UONE system Inc. 단독 */
.hero h1 .h1-sub{display:block;margin-bottom:.12em}.hero h1 .brand-it{display:block}
/* 각 쪽 위 배너: 제목·설명만 한 글자(약 1em) 오른쪽으로, 경로 줄(홈 › …)은 그 자리 */
.phead h1,.phead .lead{padding-left:var(--hero-shift)}
/* 홈 연혁 제목 '2010 그리고 2026.' — 그리고 60%, 한 줄 */
.t-and{white-space:nowrap}.t-and .and{font-size:.6em;font-weight:600}
/* 페이지 전환: 같은 사이트 안 이동은 흐려지며 겹침(0.2초), 헤더·푸터는 고정 */
@view-transition{navigation:auto}
html{background:var(--bg)}
header.top{view-transition-name:site-head}footer.ft{view-transition-name:site-foot}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:ease}
::view-transition-group(site-head),::view-transition-group(site-foot){animation:none}
::view-transition-old(site-head),::view-transition-new(site-head),::view-transition-old(site-foot),::view-transition-new(site-foot){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* 헤더 폭 맞춤이 끝나기 전 아주 짧은 순간에도 쪽 가로 넘침이 생기지 않게(드롭다운은 세로로 열리므로 그대로 보임) */
header.top{overflow-x:clip}

/* 메일 복사 확인 표시 · 전화 링크 */
.mail-tip{position:fixed;z-index:2147483000;display:inline-flex;align-items:center;gap:8px;max-width:calc(100vw - 16px);padding:6px 12px;border-radius:8px;background:#14202e;color:#fff;font:600 .84rem/1.4 'Noto Sans KR','Malgun Gothic',system-ui,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.mail-tip input{min-width:0;width:15em;font:inherit;color:#14202e;background:#fff;border:0;border-radius:4px;padding:2px 6px}
.mail-hid{position:fixed;left:-9999px;top:0;opacity:0}
a.nw[href^="tel:"]{color:inherit;text-decoration:underline dotted;text-underline-offset:3px;white-space:nowrap}
a.nw[href^="tel:"]:hover,a.nw[href^="tel:"]:focus-visible{text-decoration-style:solid;color:var(--link)}
.b-navy a.nw[href^="tel:"]:hover,.ctaband a.nw[href^="tel:"]:hover{color:inherit}

.chiprow{margin:0 0 6px}