/* NC Viewer 홈페이지 — BeamFLOW 페이지와 같은 토큰 · 구성(beamflow/assets/style.css 에서 시작) */
:root{
  --void:#0A0D11; --deep:#0F141A; --nav:#1B2430; --panel:#141B23;
  --paper:#FFFFFF; --off:#F3F5F7; --line:#E2E6EB; --line-2:#CBD2DA;
  --ink:#131A22; --ink-2:#5B6673; --ink-3:#8A94A0;
  --dline:rgba(255,255,255,.10); --dline-2:rgba(255,255,255,.20);
  --dink:#EDF2F7; --dink-2:#9BA8B6; --dink-3:#69767F;
  --teal:#19A5B1; --teal-d:#0E7C86; --glow:#5FD3DB; --teal-soft:#E3F3F4;
  --steel-glow:#8FB4FF; --kerf:#F26F21;
  --sans:"Pretendard","Inter","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Noto Sans KR",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --hd:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hd)}
body{margin:0;background:var(--void);color:var(--dink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;letter-spacing:-.011em}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}
::selection{background:var(--teal-d);color:#fff}

/* layout */
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
.sec{position:relative;padding:132px 0;overflow:hidden}
.light{background:var(--paper);color:var(--ink)}
.off{background:var(--off);color:var(--ink)}
.dark{background:var(--deep);color:var(--dink)}
.light .m2,.off .m2{color:var(--ink-2)} .dark .m2{color:var(--dink-2)}
.bp::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--bpc,rgba(255,255,255,.055)) 1px,transparent 1px),linear-gradient(90deg,var(--bpc,rgba(255,255,255,.055)) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 6%,transparent 76%);mask-image:radial-gradient(120% 80% at 50% 0%,#000 6%,transparent 76%)}
.light.bp::before,.off.bp::before{--bpc:rgba(19,26,34,.05)}
.wrap{position:relative}

/* type */
.kicker{font:600 11.5px/1.55 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--teal-d);display:flex;align-items:flex-start;gap:10px;margin:0 0 22px}
.dark .kicker,.hero .kicker{color:var(--glow)}
.kicker::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6;flex:none;margin-top:8px}
h1{font-size:clamp(34px,5.1vw,68px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--glow),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:clamp(29px,3.7vw,54px);line-height:1.14;letter-spacing:-.032em;font-weight:800;margin:0 0 20px}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.35;letter-spacing:-.025em;font-weight:700;margin:0 0 10px}
.lead{font-size:clamp(15.5px,1.2vw,18px);line-height:1.78;max-width:62ch;margin:0}
.head{max-width:780px;margin-bottom:66px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:9px;font-size:15px;font-weight:600;letter-spacing:-.02em;border:1px solid transparent;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s;white-space:nowrap}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(3px)}
.btn.p{background:linear-gradient(135deg,var(--teal) 0%,var(--teal-d) 100%);color:#fff;box-shadow:0 6px 22px -8px rgba(14,124,134,.8)}
.btn.g{border-color:var(--dline-2);color:var(--dink)}
.btn.g:hover{background:rgba(255,255,255,.06);border-color:var(--dink-3)}
.btn.sm{height:40px;padding:0 18px;font-size:13.5px;border-radius:7px}
.btnrow{display:flex;gap:12px;flex-wrap:wrap}

/* reveal */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* header */
.prog{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--teal),var(--glow));z-index:80}
header{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:70;transition:background .35s,border-color .35s;border-bottom:1px solid transparent}
header.stuck{background:rgba(10,13,17,.74);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom-color:var(--dline)}
.hdin{height:100%;display:flex;align-items:center;gap:26px}
.logo{display:flex;align-items:center;gap:10px;flex:none}
.logo svg{width:24px;height:24px;flex:none}
.logo b{font:800 17.5px/1 var(--sans);letter-spacing:-.035em;color:#fff}
nav.main{display:flex;align-items:center;gap:2px;margin-left:4px}
.nl{padding:8px 13px;border-radius:7px;font-size:14px;font-weight:500;color:var(--dink-2);transition:color .2s,background .2s}
.nl:hover{color:#fff;background:rgba(255,255,255,.06)}
.hdr-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--dline)}
.burger svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round}
.msheet{position:fixed;inset:var(--hd) 0 auto;background:rgba(10,13,17,.98);border-bottom:1px solid var(--dline);padding:10px 24px 26px;display:none;flex-direction:column;z-index:69}
.msheet.on{display:flex}
.msheet a{padding:14px 2px;border-bottom:1px solid var(--dline);font-size:16px;font-weight:500}
.msheet a.btn{margin-top:20px;border:0}
.msheet a.btn.g{border:1px solid var(--dline-2)}
.msheet a.btn.g+a.btn{margin-top:10px}
.cta .btnrow{justify-content:center;margin-top:38px}
.cta .btnrow+.ctac{margin-top:22px}
@media(max-width:1180px){.hdr-r .btn.g{display:none}}

/* hero */
.hero{position:relative;padding:calc(var(--hd) + 76px) 0 96px;background:
  radial-gradient(900px 520px at 78% 12%,rgba(25,165,177,.17),transparent 62%),
  radial-gradient(720px 480px at 6% 94%,rgba(91,141,239,.10),transparent 60%),
  var(--void)}
.hero-g{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:56px;align-items:center}
.hero .lead{margin:26px 0 34px;color:var(--dink-2)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px;padding-top:28px;border-top:1px solid var(--dline)}
.tag-p{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--dink-2);border:1px solid var(--dline);border-radius:999px;padding:8px 13px}

/* 제품 화면 캡처 */
.stage{border:1px solid var(--dline);border-radius:14px;overflow:hidden;background:#0E141B;box-shadow:0 40px 90px -44px #000}
.light .stage,.off .stage{border-color:var(--line-2);box-shadow:0 26px 60px -40px rgba(19,26,34,.5)}
.stage img{width:100%;height:auto}
.stage.narrow{max-width:620px}
.stage.paper{background:#fff}
figure{margin:0}
.pair{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:40px}
.pair.even{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr)}
.shotcap{display:flex;align-items:center;gap:8px;margin:10px 2px 0;font-size:11.5px;line-height:1.6;color:var(--dink-3)}
.shotcap i{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none}
.light .shotcap,.off .shotcap{color:var(--ink-2)}

/* 작업 흐름 */
.flow{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:start}
.fsteps{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.fstep{display:flex;gap:13px;align-items:flex-start;text-align:left;padding:15px 12px 15px 0;border-bottom:1px solid var(--line);width:100%;position:relative;transition:padding-left .3s var(--ease)}
.fstep::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:2px;background:var(--teal-d);transform:scaleY(0);transform-origin:50% 0;transition:transform .38s var(--ease)}
.fstep[aria-selected=true]{padding-left:14px}
.fstep[aria-selected=true]::before{transform:scaleY(1)}
.fstep .num{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font:600 11px var(--mono);color:var(--ink-2);transition:background .3s,border-color .3s,color .3s}
.fstep[aria-selected=true] .num{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
.fstep .tx b{display:block;font-size:16px;font-weight:700;letter-spacing:-.028em;color:var(--ink)}
.fstep .tx span{display:block;font-size:13px;line-height:1.6;color:var(--ink-2);margin-top:4px}
.fpane{display:none}
.fpane.on{display:block}
.fnote{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--off);font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.fnote b{color:var(--ink);font-weight:600}

/* 카드 격자 */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px}
.card{padding:26px 24px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.off .card{background:var(--paper)}
.dark .card{border-color:var(--dline);background:rgba(255,255,255,.025)}
.card .tag{font:600 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d);display:block;margin-bottom:12px}
.dark .card .tag{color:var(--glow)}
.card p{margin:0;font-size:14px;line-height:1.72;color:var(--ink-2)}
.dark .card p{color:var(--dink-2)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-bottom:48px}

/* 가공 종류 */
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:10px;margin-bottom:40px}
.op{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px;border:1px solid var(--line-2);border-radius:12px;background:var(--paper);font-size:14.5px;font-weight:700}
.op svg{width:34px;height:34px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}

/* 사양 */
.profiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:10px;margin-bottom:56px}
.pf{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--dline);border-radius:12px;background:rgba(255,255,255,.025)}
.pf svg{width:38px;height:38px;flex:none;fill:var(--dink);stroke:none}
.pf svg.ring{fill:none;stroke:var(--dink);stroke-width:2.4}
.pf b{display:block;font-size:14.5px;font-weight:700}
.pf span{font:500 11px var(--mono);letter-spacing:.06em;color:var(--dink-3)}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th{width:160px;text-align:left;vertical-align:top;padding:16px 16px 16px 0;font-weight:600;color:var(--dink);border-top:1px solid var(--dline)}
.spec td{padding:16px 0;color:var(--dink-2);border-top:1px solid var(--dline);line-height:1.7}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--dline)}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;font-size:17.5px;font-weight:600;letter-spacing:-.028em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover,.faq details[open] summary{color:var(--teal-d)}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:8px;top:50%;background:currentColor;transition:transform .3s var(--ease),opacity .3s}
.faq summary::after{width:13px;height:1.5px;margin-top:-.75px}
.faq summary::before{width:1.5px;height:13px;right:13.75px;margin-top:-6.5px}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq details p{margin:0 0 24px;max-width:70ch;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* CTA · footer */
.cta{text-align:center;padding:140px 0;background:radial-gradient(760px 420px at 50% 0%,rgba(25,165,177,.2),transparent 66%),var(--void)}
.cta h2{max-width:20ch;margin:0 auto 22px}
.cta .lead{margin:0 auto;max-width:46ch;color:var(--dink-2)}
.ctac{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;margin-top:38px;font:500 14px var(--mono);color:var(--glow)}
.ctac a:hover{color:#fff}
.cthours{margin:14px 0 0;font-size:13px;color:var(--dink-3)}
footer{background:var(--void);border-top:1px solid var(--dline);padding:26px 0 30px}
.ftbot{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--dink-3);flex-wrap:wrap}
.ftbot .pb{margin-left:auto;font:500 11.5px var(--mono);letter-spacing:.06em}

@media(max-width:980px){
  nav.main,.hdr-r .btn{display:none}
  .burger{display:flex}
  .hero-g,.flow,.two{grid-template-columns:minmax(0,1fr)}
  .two{gap:28px}
}
@media(max-width:760px){
  .wrap{padding:0 16px}
  .sec{padding:84px 0}
  .head{margin-bottom:40px}
  .hero{padding:calc(var(--hd) + 44px) 0 64px}
  .pair,.pair.even{grid-template-columns:minmax(0,1fr)}
  .spec th{width:96px}
  .cta{padding:96px 0}
  .ftbot .pb{margin-left:0}
}

/* 언어 메뉴 — assets/v3.css 와 같은 값 */
.langnote{margin:28px 0 0;font-size:12.5px;color:var(--dink-3);border-left:2px solid var(--teal-d);padding-left:10px;max-width:70ch}
.lang-zh body,.lang-zh{--sans:"Noto Sans SC","Inter","Noto Sans KR",system-ui,sans-serif}
.lang-th body,.lang-th{--sans:"Noto Sans Thai","Inter","Noto Sans KR",system-ui,sans-serif}
/* 한글이 아닌 언어는 줄 길이가 달라 제목 자간을 조금 푼다 */
.lang-en h1,.lang-en h2,.lang-vi h1,.lang-vi h2{letter-spacing:-.025em}
.lang-th h1,.lang-th h2{letter-spacing:0;line-height:1.3}
.langdd{position:relative;margin-right:10px}
.langbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 11px;border-radius:9px;border:1px solid var(--dline-2);background:rgba(255,255,255,.04);color:var(--dink);font-size:13px;font-weight:500;transition:background .2s,border-color .2s}
.langbtn .chev{width:12px;height:12px;fill:none;stroke:var(--dink-2);stroke-width:1.5;transition:transform .25s cubic-bezier(.22,1,.36,1)}
.langbtn[aria-expanded=true] .chev{transform:rotate(180deg)}
@media(hover:hover){.langbtn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}}
.langbtn:active{transform:scale(.97);transition:transform 100ms ease-out}
.flag{width:20px;height:15px;flex:none;border-radius:2.5px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14);overflow:hidden}
.langlist{position:absolute;right:0;top:calc(100% + 8px);min-width:176px;margin:0;padding:6px;list-style:none;background:rgba(16,21,27,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--dline);border-radius:12px;box-shadow:0 24px 60px -18px rgba(0,0,0,.85);transform-origin:100% 0;animation:langin .22s cubic-bezier(.22,1,.36,1) both;z-index:90}
.langlist li{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;color:var(--dink-2);font-size:14px;cursor:pointer;outline:none}
.langlist li:hover,.langlist li:focus-visible{background:rgba(255,255,255,.07);color:#fff}
.langlist li[aria-selected=true]{color:#fff;font-weight:600}
.langlist li[aria-selected=true]::after{content:"";margin-left:auto;width:9px;height:5px;border-left:1.8px solid var(--glow);border-bottom:1.8px solid var(--glow);transform:rotate(-45deg) translateY(-2px)}
@keyframes langin{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.langlist{animation:tfade .15s ease both}.langbtn .chev{transition:none}}
@media(prefers-reduced-transparency:reduce){.langlist{background:#10151B;backdrop-filter:none}}
@media(max-width:760px){.langdd{margin-right:6px}.langbtn span{display:none}.langbtn{padding:0 8px}}
@keyframes tfade{from{opacity:0}to{opacity:1}}

/* NC Viewer 에서 더한 것 — 지원 형식 격자 · 넓은 화면 캡처 */
:root{--kerf:#F0483E}
.fmts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin-bottom:22px}
.fmt{padding:16px 18px;border:1px solid var(--dline);border-radius:12px;background:rgba(255,255,255,.025)}
.fmt b{display:block;font-size:15px;font-weight:700}
.fmt span{display:block;margin-top:4px;font-size:12.5px;line-height:1.55;color:var(--dink-2)}
.fmt i{display:inline-block;margin-top:9px;font:500 10.5px var(--mono);font-style:normal;letter-spacing:.08em;color:var(--glow)}
.note{margin:0 0 56px;font-size:12.5px;line-height:1.7;color:var(--dink-3);max-width:90ch}
.stack{display:grid;gap:20px;margin-top:40px}
.hero .stage{box-shadow:0 40px 90px -44px #000,0 0 0 1px rgba(240,72,62,.12)}
.langs{display:flex;flex-wrap:wrap;gap:6px}
.langs span{font-size:12.5px;border:1px solid var(--dline);border-radius:999px;padding:4px 10px;color:var(--dink-2)}
.hero h1{font-size:clamp(30px,3.5vw,50px)}
html[lang=ko] h1,html[lang=ko] h2,html[lang=ko] h3,html[lang=ko] p,html[lang=ko] .tx span{word-break:keep-all}