/* WVR 시안 공통: 글꼴, 색, 머리글, 바닥글, 버튼, 스크롤 등장 */
@font-face{font-family:Manrope;src:url(fonts/Manrope-Variable.ttf) format("truetype");font-weight:200 800;font-display:swap}
:root{
  --ink:#0f172a;--body:#1f2937;--muted:#64748b;--line:#e2e8f0;--soft:#f2f5f9;
  --warm:#faf7f2;--warm-2:#f3eee6;
  --dark:#05080d;--dark-2:#0c121b;--navy:#0d1c2e;--mint:#63bba2;--blue:#3f89c7;
  --cta:linear-gradient(90deg,#1b8063,#1f7a9a,#2b5ea6);
  --num:linear-gradient(90deg,#23957a,#2f72b4);
  --en:Manrope,"Pretendard Variable",Pretendard,sans-serif;
  --ko:"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif;
  --wrap:1320px;--gut:48px;--head:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--head)}
body{font-family:var(--ko);color:var(--body);background:#fff;font-size:17px;line-height:1.7;word-break:keep-all;overflow-wrap:break-word}
img{display:block;width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none;padding:0}
button{font:inherit;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* 영어 화면: 위 작은 영어 제목과 같은 말이 되는 아래 큰 제목은 글자만 숨긴다.
   칸(높이)은 한국어와 똑같이 남겨 아래 내용이 위로 올라가지 않게 하고, 그 자리에 영어 제목(17px)을 보인다.
   위 작은 글씨 줄도 칸만 남기고 숨김 → 한/영 전환해도 아래 내용 위치가 1px도 변하지 않는다. data-en은 common.js가 위 글씨에서 채움 */
html[lang="en"] .dup-en{visibility:hidden;position:relative}
html[lang="en"] .dup-en::after{content:attr(data-en);visibility:visible;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--en);font-size:17px;font-weight:700;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;text-align:inherit;color:var(--muted)}
html[lang="en"] .sub .dup-en::after{color:#2c7a64}
html[lang="en"] .eyebrow:has(+ .dup-en){visibility:hidden}
/* 한/영에서 이름이 다른 제품(영어: SENXOR Flow Meter 등) */
html[lang="en"] .ko-name,html:not([lang="en"]) .en-name{display:none}
.eyebrow{font-family:var(--en);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.cap{font-size:12px;color:var(--muted)}

/* 머리글 */
.top{--utility-font-size:14px;position:fixed;inset:0 0 auto;z-index:30;background:#fff;transition:box-shadow .2s}
.top.solid{box-shadow:0 1px 0 var(--line)}
/* 서브 페이지 머리글: 반투명 유리. 어두운 구간([data-top-dark]) 위에서는 어두운 유리 + 흰 글씨 */
.sub .top{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px) saturate(1.2);backdrop-filter:blur(8px) saturate(1.2);box-shadow:0 1px 0 rgba(15,23,42,.06);transition:background .4s ease,box-shadow .4s ease}
.sub .top .nav,.sub .top .lang,.sub .top .menu,.sub .top .cta{transition:color .4s ease}
.sub .top.dark{background:rgba(8,12,18,.16);box-shadow:none}
.sub .top.dark .nav,.sub .top.dark .lang,.sub .top.dark .menu,.sub .top.dark .cta{color:#fff}
.sub .top.dark .lang span{color:rgba(255,255,255,.55)}
.sub .top.dark .nl:hover,.sub .top.dark .nl[aria-current]{color:#9fe3d2}
/* 상단바 폭은 본문보다 좁게(약 1100px) — 로고·메뉴·버튼이 가운데에 모인다 */
.top .wrap{position:relative;display:flex;align-items:center;height:var(--head);gap:24px;max-width:1120px}
.logo img{height:30px;width:auto}
/* 메뉴 칸 폭을 고정해 한/영 전환 때 메뉴 위치가 움직이지 않게 (가장 긴 Solutions도 들어가는 100px 칸 4개, 글자는 칸 가운데) */
.nav{position:absolute;left:50%;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,100px);justify-items:center;gap:0;font-size:16px;font-weight:600;color:var(--ink)}
.nl{position:relative;display:block;padding:19px 0;line-height:26px;transition:color .2s}
.nl::after{content:"";position:absolute;left:0;right:0;bottom:13px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease)}
.nl:hover,.nl[aria-current]{color:var(--blue)}
.nl:hover::after,.nl[aria-current]::after{transform:scaleX(1)}
/* 관리자 칸: 로그인했을 때만(html.is-admin) 오른쪽 끝, 문의하기 자리에 "로그아웃" (뉴스 등록 버튼은 소식 페이지 목록 위) */
.adm-bar{display:none;order:5;align-items:center;gap:16px;margin-left:26px;font-size:var(--utility-font-size);font-weight:600;color:var(--ink);white-space:nowrap}
.adm-bar a{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;transition:background .2s}
.adm-bar a:hover{background:rgba(127,140,155,.14)}
.adm-bar button{padding:0;border:0;background:none;font:inherit;color:inherit;opacity:.72;cursor:pointer}
.adm-bar button:hover{opacity:1}
html.is-admin .adm-bar{display:inline-flex}
/* 관리자로 로그인하면: 머리글 "문의하기" 자리는 "로그아웃", KO / EN 자리는 "문의 확인"(받은 문의 보기, 색 없는 글자) */
html.is-admin .top .cta{display:none}
html.is-admin .ask .cta{display:none}   /* 메인 아래 검은 띠(Join us WVR)의 "문의하기"도 관리자에게는 숨김 */
.adm-inq{display:none;margin-left:auto;align-items:center;padding:6px 4px;font-size:var(--utility-font-size);font-weight:600;color:var(--ink);white-space:nowrap;opacity:.72;transition:opacity .2s}
.adm-inq:hover{opacity:1}
html.is-admin .top .lang{display:none}
html.is-admin .adm-inq{display:inline-flex}
.home .top:not(.light) .adm-inq,.sub .top.dark .adm-inq{color:#fff}
.menu{order:6}
.home .top:not(.light) .adm-bar,.sub .top.dark .adm-bar{color:#fff}
.lang{margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-family:var(--en);font-size:var(--utility-font-size);font-weight:700;color:var(--ink)}
.lang span{color:#94a3b8}
/* KO / EN 단추: 고른 쪽은 진하게, 아닌 쪽은 회색 */
.lang button{padding:6px 4px;border:0;background:none;font:inherit;color:#94a3b8;cursor:pointer;transition:color .2s}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:inherit}
.top.dark .lang button{color:rgba(255,255,255,.55)}
.top.dark .lang button:hover,.top.dark .lang button[aria-pressed="true"]{color:#fff}
.cta{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:999px;background:var(--cta);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;transition:filter .2s}
.cta:hover{filter:brightness(1.1)}
.top .cta{font-family:var(--en);min-width:100px;justify-content:flex-end;height:auto;padding:0;border-radius:0;background:none;color:var(--ink);font-size:var(--utility-font-size);font-weight:600;transition:color .2s}
html[lang="en"] .top .cta{font-weight:700}   /* Contact Us: KO / EN과 같은 굵기 */
.top .cta:hover{filter:none;color:var(--blue)}
.menu{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;color:var(--ink)}
.menu i{display:block;height:2px;background:currentColor;margin:5px 0}

/* 공통 링크·버튼 */
.go{display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:600;color:var(--ink)}
.go .ar{position:relative;width:46px;height:1px;background:currentColor;transition:width .25s var(--ease)}
.go .ar::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.go:hover .ar{width:62px}
.pill{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;background:var(--ink);color:#fff;font-size:15px;font-weight:600;transition:background .2s}
.pill:hover{background:#26324a}

/* 바닥글 */
footer{background:var(--soft);color:var(--muted);font-size:14px;padding:64px 0 44px}
.ft-top{display:grid;grid-template-columns:180px repeat(5,1fr);gap:28px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.ft-logo img{height:28px;width:auto}
.ft-top h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
.ft-top li{margin-top:6px}
.ft-top a:hover{color:var(--ink)}
.ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 40px;padding-top:24px;font-size:13px}
.ft-bot nav{display:flex;gap:20px;color:var(--body);font-weight:600}
/* 관리자 로그인으로 가는 숨은 1: 약관 링크 바로 옆, 바닥글 바탕과 같은 색(드래그·Ctrl+A로 고르면 보임) */
.ft-bot .adm{color:var(--soft);cursor:default}
.ft-bot .adm:focus-visible{color:var(--muted)}

/* 영어 화면(KO/EN 전환): 제목은 두 줄 길이를 맞추고, 문단은 마지막 줄에 한 단어만 남지 않게 */
html[lang="en"] :is(h1,h2,h3,h4){text-wrap:balance}
html[lang="en"] :is(p,li,dd,dt,figcaption,blockquote){text-wrap:pretty}
/* 바닥글: 영어 메뉴 이름이 길어 사업분야 칸을 넓히고 한 줄로 */
@media (min-width:1101px){
  html[lang="en"] .ft-top{grid-template-columns:180px 1fr 1.75fr .9fr .7fr 1.2fr}
  html[lang="en"] .ft-top li{white-space:nowrap}
}
@media (max-width:860px){ html[lang="en"] .ft-top{font-size:13px} }

.mock{position:fixed;right:14px;top:calc(var(--head) + 12px);z-index:40;padding:6px 12px;border-radius:8px;background:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(15,23,42,.14);font-size:12px;font-weight:700;color:var(--ink)}

/* 스크롤 등장: .rv 요소가 화면에 들어오면 .in이 붙는다. data-d로 순서 지연 */
.rv{opacity:0;transform:translateY(32px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}.rv[data-d="2"]{transition-delay:.16s}.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}.rv[data-d="5"]{transition-delay:.4s}.rv[data-d="6"]{transition-delay:.48s}
/* 글자 줄이 아래에서 올라오는 효과 */
.line-up{display:block;overflow:hidden}
.line-up > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.in .line-up > span,.line-up.in > span{transform:none}
.zoom-in{transform:scale(1.08);transition:transform 1.6s var(--ease)}
.in .zoom-in,.zoom-in.in{transform:none}

@media (max-width:1100px){
  .nav{grid-template-columns:repeat(4,88px)}
  .top{--utility-font-size:13px}   /* 좁은 화면에서도 두 링크의 크기를 함께 줄인다 */
  .ft-top{grid-template-columns:repeat(3,1fr)}
  .ft-logo{grid-column:1/-1}
}
@media (max-width:860px){
  :root{--gut:20px;--head:60px}
  .sub .top.dark .nav.open{color:var(--ink)}
  body{font-size:16px}
  .menu{display:block;margin-left:4px}   /* KO / EN 바로 옆(오른쪽 끝)에 */
  .top .cta{display:none}
  .nav{display:none;position:absolute;left:0;right:0;transform:none;top:var(--head);flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);padding:6px 20px 14px}
  .nav.open{display:flex;max-height:calc(calc(var(--vh,1vh)*100) - var(--head));overflow-y:auto}
  .nl{padding:14px 0;font-weight:700;border-bottom:1px solid var(--line)}
  .nl:last-child{border-bottom:0}
  .nl::after{display:none}
  .logo img{height:26px}
  footer{padding:48px 0 72px}
  .ft-top{grid-template-columns:repeat(2,1fr)}
  .mock{top:calc(var(--head) + 8px);right:8px;padding:4px 9px;font-size:11px}
}