/* 동양루브실 D3 공통 스타일 (메인 시안 d3-material.html에서 분리) */
/* ===== 기본 색·치수 ===== */
:root{
  --z:1;   /* 화면 맞춤 배율(_build.py HEAD_JS가 1920px보다 넓으면 넣음). 확대 배율만큼 vw·vh가 커지므로 나눠서 되돌림 */
  --bg:#0C0D0F;
  --bg2:#1A1C20;              /* 섹션 경계가 보이도록 한 단계 밝힘 */
  --bg3:#23262B;
  --fg:#EDEDED;
  --mute:#9AA0A6;
  --line:rgba(237,237,237,.12);
  --line2:rgba(237,237,237,.22);
  --accent:#8B7CFF;           /* 포인트 색: UV 바이올렛 (작은 강조에만) */
  --maxw:1360px;
  --gut:clamp(20px,calc(4vw / var(--z)),56px);
  --edge:max(var(--gut), calc((calc(100vw / var(--z)) - var(--maxw)) / 2 + var(--gut)));
  --hdr:76px;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  color-scheme:dark;
  /* 글자·면 색 단계 (10-19 밝은 화면 추가 때 고정 색을 토큰으로 바꿈 — 어두운 화면 값은 예전과 같음) */
  --fg2:#DADDE0; --fg3:#C4C8CC; --nav:#D5D8DB; --hi:#fff; --mute2:#868C92; --mute3:#61676D;
  --hdr-bg:rgba(12,13,15,.86); --bar-bg:rgba(12,13,15,.9); --soft:rgba(237,237,237,.03);
  --tile:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); --tile-line:rgba(255,255,255,.08); --tile-chip:rgba(255,255,255,.06);
  --tile-hover:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); --tile-line-hover:rgba(255,255,255,.16); --tile-shadow:0 10px 28px rgba(0,0,0,.35);
  --map-lead:rgba(237,237,237,.34); --map-tip:rgba(237,237,237,.6);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:17px;line-height:1.7;
  word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 16px;font-weight:600;transition:top .2s}
.skip:focus{top:12px}
.nw{white-space:nowrap}
/* 숫자·영문 보조 표기: 고정폭 글꼴 대신 본문 글꼴 + 숫자 폭 고정 */
.tn{font-variant-numeric:tabular-nums;letter-spacing:.06em;font-weight:600}

/* 공통 글꼴 단계 */
.label{font-size:14px;font-weight:500;letter-spacing:.02em;color:var(--mute);display:flex;align-items:center;gap:14px}
.label.ln::before{content:"";width:28px;height:1px;background:var(--accent)}   /* 보라 선은 스토리·산업 두 곳에만 */
.h2{font-size:clamp(32px,calc(4.2vw / var(--z)),60px);font-weight:600;letter-spacing:-.032em;line-height:1.14}
.lead{font-size:clamp(16px,calc(1.25vw / var(--z)),19px);color:var(--mute);line-height:1.75;max-width:34em}
.lead,.step-copy,.prow-desc,.hero-row p,.cta p{text-wrap:pretty}
.h2,.hero h1,.cta h2,.story-lead{text-wrap:balance}
.arw{width:20px;height:20px;flex:none;transition:transform .35s var(--ease)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:16px;padding-bottom:6px;border-bottom:1px solid var(--line2);transition:border-color .3s,color .3s}
.tlink:hover{border-color:var(--accent)}
.tlink:hover .arw{transform:translateX(4px)}

/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;font-size:16px;font-weight:650;letter-spacing:-.01em;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s}
.btn-solid{background:var(--fg);color:var(--bg)}
.btn-solid:hover{background:var(--hi)}
.btn-solid:hover .arw{transform:translateX(4px)}
.btn-line{border-color:var(--line2);color:var(--fg)}
.btn-line:hover{border-color:var(--fg)}

/* 등장 효과 (JS가 있을 때만, 짧고 작게) */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* 질감용 노이즈 */
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* 섹션 경계: 위 섹션과 1px 선으로 구분 */
main > section + section:not(.story){border-top:1px solid var(--line)}

/* ===== 헤더 ===== */
.hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--hdr);transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.hdr.solid,html:not(.js) .hdr{background:var(--hdr-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--line)}
.hdr-in{height:100%;display:flex;align-items:center;gap:40px;max-width:none;padding-inline:var(--edge)}
.logo{display:flex;align-items:baseline;gap:10px;white-space:nowrap;flex:none}
.logo b{font-size:21px;font-weight:700;letter-spacing:-.03em}
.logo span{font-size:11px;font-weight:600;letter-spacing:.2em;color:var(--mute)}
.gnb{display:flex;gap:30px;margin-left:auto}
.gnb a{font-size:15px;font-weight:500;color:var(--nav);position:relative;padding:6px 0;white-space:nowrap;transition:color .25s}
.gnb a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.gnb a:hover{color:var(--hi)}.gnb a:hover::after{transform:scaleX(1)}
.hdr-side{display:flex;align-items:center;gap:22px;flex:none}
.partner{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--fg);padding-left:22px;border-left:1px solid var(--line2);white-space:nowrap;display:flex;align-items:center;gap:9px}
.partner i{width:6px;height:6px;background:var(--accent);display:block}
.hdr .btn{height:42px;padding:0 18px;font-size:14px}
.menu-btn{display:none;flex:none;width:44px;height:44px;margin-left:auto;position:relative}   /* flex:none — 로고가 길어도 단추가 찌그러지지 않게 */
.menu-btn span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--fg);transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn span:nth-child(1){top:17px}.menu-btn span:nth-child(2){top:26px}
.menu-open .menu-btn span:nth-child(1){top:21.5px;transform:rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){top:21.5px;transform:rotate(-45deg)}

/* 모바일 전체 화면 메뉴 */
.mnav{position:fixed;inset:0;z-index:90;background:var(--bg);padding:calc(var(--hdr) + 24px) var(--gut) 32px;display:flex;flex-direction:column;overflow-y:auto}
.mnav[hidden]{display:none}
.mnav ul{border-top:1px solid var(--line)}
.mnav li a{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:26px;font-weight:600;letter-spacing:-.02em}
.mnav-foot{margin-top:auto;padding-top:32px;display:grid;gap:6px;font-size:15px;color:var(--mute)}
.mnav-foot a{color:var(--fg)}
.mnav-foot span{display:flex;align-items:center;gap:9px;color:var(--fg);font-weight:600;letter-spacing:.04em;font-size:14px;margin-bottom:6px}
.mnav-foot span i{width:6px;height:6px;background:var(--accent);display:block}
.js .mnav{opacity:0;transition:opacity .3s}
.js .mnav.show{opacity:1}

/* ===== 히어로 ===== */
.hero{position:relative;height:calc(100vh / var(--z));height:calc(100svh / var(--z));min-height:640px;max-height:1100px;overflow:hidden;background:#050506;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:60% 50%;filter:brightness(1.18) contrast(1.06);transform:scale(1.03);animation:slowzoom 26s var(--ease) forwards}
@keyframes slowzoom{to{transform:scale(1.12)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,13,15,.55) 0%,rgba(12,13,15,0) 22%,rgba(12,13,15,0) 45%,rgba(12,13,15,.78) 78%,var(--bg) 100%),
             linear-gradient(90deg,rgba(12,13,15,.6) 0%,rgba(12,13,15,0) 60%)}
.hero-in{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 40px) var(--edge) clamp(56px,calc(7vw / var(--z)),104px)}
.hero-eyebrow{font-size:15px;font-weight:600;letter-spacing:.03em;color:var(--fg);margin-bottom:30px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero-eyebrow i{width:6px;height:6px;background:var(--accent);display:block}
.hero-eyebrow .sep{color:var(--mute);font-weight:400}
.hero h1{font-size:clamp(40px,calc(7.3vw / var(--z)),116px);font-weight:650;letter-spacing:-.045em;line-height:1.02}
.hero h1 .thin{font-weight:250;color:var(--fg2)}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:44px}
.hero-row p{font-size:clamp(16px,calc(1.3vw / var(--z)),19px);line-height:1.75;color:var(--fg3);max-width:33em}
.hero-cta{display:flex;gap:12px;flex:none}

/* ===== 실리콘이 하는 일 (스크롤 스토리) ===== */
.story{position:relative;background:var(--bg)}
.story-head{padding:clamp(72px,calc(7vw / var(--z)),104px) 0 clamp(40px,calc(4vw / var(--z)),56px)}
.br-d{display:none}
.story-head .wrap{display:grid;gap:22px}
.story-lead{font-size:clamp(22px,calc(2.1vw / var(--z)),30px);font-weight:500;letter-spacing:-.025em;line-height:1.5;color:var(--fg2);max-width:27em}
.story-grid{position:relative}
.step-fig{position:relative;overflow:hidden;background:var(--bg2)}
.step-fig img{width:100%;height:100%;object-fit:cover}
.tone img{filter:brightness(.82) contrast(1.08)}
.step-text{position:relative}
.step-num{display:block;font-size:clamp(56px,calc(6vw / var(--z)),96px);font-weight:300;line-height:.9;letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.step-num::after{content:"";display:block;width:56px;height:2px;background:var(--accent);margin:26px 0 24px;transform-origin:left}
.step-label{font-size:14px;font-weight:500;letter-spacing:.01em;color:var(--mute)}
.step-label em{font-style:normal;font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--accent);margin-left:8px}
/* 10-22 낱말(흐르다 등) → 짧은 문장(틈을 채웁니다 등)으로 바꾸며 글자 크기를 88 → 64px 이하로 줄임 (긴 문장 "필요한 만큼 붙습니다"가 넓은 화면에서 3줄이 되던 것) */
.step-verb{font-size:clamp(34px,calc(3.9vw / var(--z)),64px);text-wrap:balance;font-weight:650;letter-spacing:-.045em;line-height:1.05;margin:12px 0 24px}
.step-copy{font-size:clamp(17px,calc(1.35vw / var(--z)),20px);line-height:1.75;color:var(--fg3);max-width:22em}
.step-text .tlink{margin-top:34px}
.story-media{display:none}

/* 데스크톱 + JS: 글과 사진이 헤더 바로 아래에 고정되고, 스크롤에 따라 장면이 바뀜 */
@media (min-width:960px){
  :root{--sh:calc(calc(100vh / var(--z)) - var(--hdr))}
  .story-head .wrap{max-width:none;padding:0;grid-template-columns:minmax(0,38fr) minmax(0,62fr);gap:0;align-items:start}
  .story-head .label{padding-left:var(--edge);padding-top:12px}
  .story-lead{margin-right:var(--edge)}   /* 안쪽 여백으로 주면 27em 상자를 먹어, 화면이 넓을수록 글 폭이 0까지 줄어듦 */
  .br-d{display:inline}
  .js .story-grid{height:calc(var(--sh) * 2.8)}
  .js .story-pin{position:sticky;top:var(--hdr);height:var(--sh);display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);overflow:hidden}
  .js .steps{display:grid;align-items:center;padding-left:var(--edge);padding-right:clamp(32px,calc(4vw / var(--z)),72px);position:relative}
  .js .step{grid-area:1 / 1;opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .5s var(--ease),transform .7s var(--ease)}
  .js .step.on{opacity:1;pointer-events:auto;transform:none;transition:opacity .7s var(--ease) .12s,transform .8s var(--ease) .12s}
  .js .step-fig{display:none}
  .js .step .step-num::after{transform:scaleX(.2);transition:transform .9s var(--ease) .25s}
  .js .step.on .step-num::after{transform:scaleX(1)}
  .js .story-media{display:block;position:relative;height:100%;overflow:hidden;background:#000}
  .sm-img{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}   /* 확대 없이 겹쳐 바뀜 */
  .sm-img.on{opacity:1}
  .sm-img img{width:100%;height:100%;object-fit:cover}
  .story-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,15,.35),rgba(12,13,15,0) 18%),linear-gradient(0deg,rgba(12,13,15,.5),rgba(12,13,15,0) 20%);pointer-events:none}
  .sm-bars{position:absolute;left:40px;bottom:36px;z-index:2;display:flex;gap:6px}
  .sm-bars i{width:30px;height:2px;background:rgba(237,237,237,.32);transition:background .4s}
  .sm-bars i.on{background:var(--accent)}
  /* JS 없음: 지그재그 2열 */
  html:not(.js) .step{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px var(--edge)}
  html:not(.js) .step-fig{aspect-ratio:4/5}
}
/* 중간 폭(960~1239px): 글 칸을 조금 넓혀 문장이 잘게 끊기지 않게 */
@media (min-width:960px) and (max-width:1239px){
  .story-head .wrap,.js .story-pin{grid-template-columns:minmax(0,44fr) minmax(0,56fr)}
}
/* 아주 넓은 화면(1921px 이상 — 축소 보기 · QHD 이상 모니터): 왼쪽 여백(--edge)이 38% 칸보다 빨리 커져 글 칸이 좁아지고 글이 사진 밑으로 들어가므로,
   글 칸을 1920px 때 폭(글 322px + 사진 쪽 여백 72px)으로 고정하고 나머지를 사진에 줌 */
@media (min-width:1921px){
  .story-head .wrap,.js .story-pin{grid-template-columns:minmax(0,calc(var(--edge) + 394px)) minmax(0,1fr)}
}
/* 낮은 창(높이 600px 이하 — 확대했거나 창을 낮게 쓸 때): 글이 고정 칸(화면 높이 − 머리글)을 넘어 번호 · 링크가 잘리지 않게
   간격은 아래 쌓기 배치와 같게 줄이고, 번호 · 제목 · 설명 글자는 창 높이에 맞춰 줄임.
   100% 창을 그대로 확대한 크기(960x472 · 1024x487 · 1093x506 등)에서는 글자 크기가 그대로이고, 그보다 낮은 창에서만 줄어듦.
   폭 1800px 이상은 글 칸이 좁아 영문 설명이 여섯 줄까지 늘어나므로(글 높이 569px) 660px 이하부터 건다 */
@media (min-width:960px) and (max-height:600px), (min-width:1800px) and (max-height:660px){
  .js .step-num{font-size:clamp(32px,calc(24vh / var(--z)) - 55px,clamp(56px,calc(6vw / var(--z)),96px))}
  .js .step-num::after{margin:16px 0 14px}
  .js .step-verb{font-size:clamp(28px,calc(22.5vh / var(--z)) - 52px,clamp(34px,calc(3.9vw / var(--z)),64px));margin:6px 0 14px}
  .js .step-copy{font-size:clamp(17px,min(calc(1.35vw / var(--z)),calc(3.2vh / var(--z))),20px)}
  .js .step-text .tlink{margin-top:20px}
}
/* 좁은 화면(또는 JS 없음): 사진 → 글 순서로 쌓기 */
@media (max-width:959px){
  .step{padding:0 0 clamp(52px,calc(9vw / var(--z)),88px)}
  .step-fig{aspect-ratio:4/3;margin:0 0 26px}
  .step-text{padding-inline:var(--gut)}
  .step-num{font-size:clamp(44px,calc(11vw / var(--z)),72px)}
  .step-num::after{margin:16px 0 14px}
  .step-verb{margin:6px 0 14px}
  .step-text .tlink{margin-top:20px}
}

/* ===== 제품군 목록 (인덱스) ===== */
.products{background:var(--bg2);padding:clamp(72px,calc(7vw / var(--z)),112px) 0;position:relative}
.prod-head{margin-bottom:clamp(32px,calc(4vw / var(--z)),56px)}
.plist{border-top:1px solid var(--line2)}
.prow{display:grid;grid-template-columns:56px minmax(0,1.15fr) minmax(0,1fr) 48px;gap:28px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line2);position:relative}
.prow::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);background:var(--bg3);opacity:0;transition:opacity .35s;z-index:0}
.prow > *{position:relative;z-index:1}
.prow:hover::before{opacity:1}
.prow-n{font-size:13px;color:var(--mute)}
.prow-name{font-size:clamp(22px,calc(2vw / var(--z)),30px);font-weight:600;letter-spacing:-.03em;line-height:1.25}
.prow-name small{display:block;font-size:13px;font-weight:500;letter-spacing:.04em;color:var(--mute);margin-top:6px}
.prow-name small em{font-style:normal;font-size:11.5px;letter-spacing:.08em;font-weight:700;color:var(--accent);margin-left:10px}
.prow-desc{font-size:15.5px;color:var(--mute);line-height:1.7}
.prow-go{width:48px;height:48px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;transition:background .35s,border-color .35s,color .35s}
.prow:hover .prow-go{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.prow:hover .prow-go .arw{transform:translateX(3px)}

/* ===== 산업별 쓰임 (가로 스크롤) ===== */
.inds{padding:clamp(104px,calc(9vw / var(--z)),136px) 0 clamp(72px,calc(7vw / var(--z)),104px);background:var(--bg)}
.ind-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(32px,calc(3vw / var(--z)),44px)}
.ind-head .h2{margin-top:22px}
.ind-head .lead{margin-top:16px}
.ind-ctrl{display:flex;gap:10px;flex:none}
.ind-ctrl button{width:52px;height:52px;border:1px solid var(--line2);border-radius:50%;display:grid;place-items:center;transition:border-color .3s,background .3s,color .3s}
/* 올린 모양은 마우스가 있는 기기에서만 — 손가락 화면은 마지막에 누른 요소에 :hover가 남아, 누른 단추가 채워진 채 고정돼 보임 (아래 .subnav · .filters 도 같음) */
@media (hover:hover){ .ind-ctrl button:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)} }
.ind-ctrl button:disabled{opacity:.3;cursor:default}
.ind-ctrl .prev .arw{transform:rotate(180deg)}
.ind-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding-inline:var(--edge);scrollbar-width:none;overscroll-behavior-x:contain}
.ind-track::-webkit-scrollbar{display:none}
.ind-track::after{content:"";flex:0 0 1px}
.ind{flex:0 0 clamp(260px,calc(24vw / var(--z)),350px);aspect-ratio:3/4;position:relative;overflow:hidden;scroll-snap-align:start;background:var(--bg2);display:block}
.ind img{width:100%;height:100%;object-fit:cover}
.ind::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,10,.94) 0%,rgba(8,9,10,.55) 30%,rgba(8,9,10,0) 58%);transition:opacity .4s}
.ind:hover::after{opacity:.8}
.ind-cap{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.ind-cap h3{font-size:clamp(23px,calc(1.9vw / var(--z)),29px);font-weight:600;letter-spacing:-.03em;line-height:1.2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ind-cap p{font-size:15px;color:var(--fg3);margin-top:8px;line-height:1.6}
.ind:hover .ind-cap .arw{transform:translateX(4px);color:var(--accent)}
.ind-bar{margin:28px var(--edge) 0;height:1px;background:var(--line);position:relative}
.ind-bar i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--fg);transition:transform .2s linear}

/* ===== 공급 이력 (숫자 · 인증 · 고객사) ===== */
.trust{background:var(--bg2);padding:clamp(72px,calc(7vw / var(--z)),112px) 0;overflow:hidden}
.nums{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line2)}
.num{padding:30px 28px 6px 0;border-right:1px solid var(--line)}
.num + .num{padding-left:28px}
.num:last-child{border-right:0}
.num strong{display:block;font-size:clamp(56px,calc(7vw / var(--z)),116px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.num strong small{font-size:.3em;font-weight:500;letter-spacing:-.01em;margin-left:.14em;color:var(--mute)}
.num p{margin-top:16px;font-size:15px;color:var(--mute);line-height:1.6}
.iso{display:grid;grid-template-columns:repeat(3,1fr) auto;margin-top:clamp(44px,calc(5vw / var(--z)),72px);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.iso > *{padding:22px 24px 22px 0;display:flex;align-items:baseline;gap:14px}
.iso > * + *{padding-left:24px;border-left:1px solid var(--line)}
.iso b{font-size:15px;white-space:nowrap}
.iso span{font-size:15px;color:var(--mute)}
.iso a{align-items:center;font-size:15px;font-weight:500;white-space:nowrap;transition:color .3s}
.iso a:hover{color:var(--accent)}
.iso a:hover .arw{transform:translateX(4px)}
.cust{margin-top:clamp(56px,calc(5.5vw / var(--z)),84px)}
.cust-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 32px;margin-bottom:24px}
.cust-h h3{font-size:clamp(24px,calc(2.4vw / var(--z)),34px);font-weight:600;letter-spacing:-.03em;color:var(--fg)}
.cust-h p{font-size:14.5px;color:var(--mute)}
/* 칸 사이 1px 선: 배경색을 선 색으로 깔고 칸을 띄움 (20곳 = 4열×5줄 / 2열×10줄로 빈칸 없음) */
.clist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);list-style:none;margin:0;padding:0}
.clist li{background:var(--bg2);display:flex}
.clist a,.clist .nolink{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:88px;padding:22px 26px;
  font-size:clamp(17px,calc(1.5vw / var(--z)),21px);font-weight:600;letter-spacing:-.025em;line-height:1.3;color:var(--fg);transition:background .25s,color .25s}
.clist .ext{flex:none;width:18px;height:18px;color:var(--mute);opacity:.55;transition:opacity .25s,transform .25s,color .25s}
.clist a:hover,.clist a:focus-visible{background:var(--bg3);color:var(--hi)}
.clist a:hover .ext,.clist a:focus-visible .ext{opacity:1;color:var(--accent);transform:translate(2px,-2px)}
.clist a:focus-visible{outline-offset:-3px}
@media (max-width:767px){
  .clist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clist a,.clist .nolink{min-height:68px;padding:16px 14px 16px 16px;font-size:15.5px;gap:8px}
  .clist .ext{width:15px;height:15px}
}

/* ===== 거점 ===== */
.places{background:var(--bg);padding:0 0 clamp(64px,calc(6vw / var(--z)),96px)}
.hq{position:relative;overflow:hidden;background:var(--bg2)}
.hq-img{overflow:hidden}
.hq img{width:100%;height:clamp(300px,calc(35vw / var(--z)),520px);object-fit:cover;object-position:62% 50%;filter:saturate(.72) brightness(.86) contrast(1.06)}
.hq::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(12,13,15,.9) 0%,rgba(12,13,15,.5) 24%,rgba(12,13,15,0) 50%),linear-gradient(90deg,rgba(12,13,15,.5) 0%,rgba(12,13,15,0) 46%)}
.hq figcaption{position:absolute;left:var(--edge);right:var(--edge);bottom:clamp(28px,calc(3.2vw / var(--z)),48px);z-index:2;display:grid;gap:10px;font-size:15px;color:var(--nav)}
.hq h2{font-size:clamp(30px,calc(4.2vw / var(--z)),60px);font-weight:600;letter-spacing:-.032em;line-height:1.1;color:var(--hi)}
.cty{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);margin:clamp(40px,calc(4vw / var(--z)),60px) 0 0;border-top:1px solid var(--line2)}
.cty > div{padding:28px 32px 6px 0}
.cty > div + div{padding-left:32px;border-left:1px solid var(--line)}
.cty dt{font-size:clamp(22px,calc(2vw / var(--z)),28px);font-weight:600;letter-spacing:-.03em;display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.cty dt small{font-size:11px;letter-spacing:.14em;color:var(--mute);font-weight:600}
.cty dd{margin:0;display:grid;gap:20px 28px}
.cty dd p{font-size:15px;color:var(--mute);line-height:1.6}
.cty dd p b{display:block;color:var(--fg);font-weight:600;font-size:16px;margin-bottom:4px}
.cty dd.rows{gap:14px}
.cty dd.rows p{display:grid;grid-template-columns:118px minmax(0,1fr);gap:16px;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line)}
.cty dd.rows p:last-child{border-bottom:0;padding-bottom:0}
.cty dd.rows p b{margin:0}
.places .tlink{margin-top:40px}
.places .gmap{margin-top:clamp(48px,calc(5vw / var(--z)),72px)}

/* ===== 전시 ===== */
.expo{background:var(--bg2);padding:clamp(72px,calc(7vw / var(--z)),104px) 0 clamp(80px,calc(7vw / var(--z)),112px)}
.expo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,calc(4vw / var(--z)),72px);align-items:end}
.expo figure{position:relative;overflow:hidden}
.expo figure img{width:100%;object-fit:cover}
.expo .f-tall img{aspect-ratio:4/5;object-position:50% 30%}
.expo .f-wide img{aspect-ratio:16/10;object-position:50% 0}
.expo figcaption{font-size:13.5px;color:var(--mute);padding-top:14px}
.expo-txt{margin-bottom:clamp(32px,calc(3.4vw / var(--z)),52px)}
.expo-txt .h2{margin:22px 0 16px}
.expo-meta{font-size:15px;color:var(--fg);display:flex;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.expo-meta span{color:var(--mute);font-weight:400;letter-spacing:0}
.expo-txt .tlink{margin-top:28px}

/* ===== 문의 ===== */
.cta{position:relative;overflow:hidden;isolation:isolate;padding:clamp(96px,calc(10vw / var(--z)),150px) 0;background:#050506}
.cta-bg{position:absolute;inset:0;z-index:-2}
.cta-bg img{width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:brightness(1.05) contrast(1.1)}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(12,13,15,.82) 0%,rgba(12,13,15,.45) 50%,rgba(12,13,15,.05) 100%)}
.cta h2{font-size:clamp(34px,calc(5vw / var(--z)),78px);font-weight:600;letter-spacing:-.04em;line-height:1.12;max-width:13em;margin-top:22px}
.cta p{margin-top:26px;font-size:clamp(16px,calc(1.3vw / var(--z)),19px);color:var(--fg3);max-width:30em}
.cta-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:44px}
.cta-act .btn-line{background:rgba(12,13,15,.35)}
.cta-act .btn + .btn{margin-left:-16px}
.cta-act .mail{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;padding:0 0 6px;border-bottom:1px solid var(--line2);transition:border-color .3s}
.cta-act .mail:hover{border-color:var(--accent)}

/* ===== 푸터 ===== */
.ftr{background:var(--bg);padding:clamp(56px,calc(6vw / var(--z)),84px) 0 36px;border-top:1px solid var(--line);font-size:14.5px;color:var(--mute)}
.ftr-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line)}
.ftr .logo b{color:var(--fg)}
.ftr-top p{margin-top:18px;line-height:1.7;max-width:22em}
.ftr h3{font-size:14px;font-weight:600;color:var(--fg);margin-bottom:16px}
.ftr li + li{margin-top:9px}
.ftr li a:hover{color:var(--fg)}
.ftr-info{padding-top:32px;display:grid;gap:6px;line-height:1.7}
.ftr-info p:not(.ftr-tm){display:flex;flex-wrap:wrap;column-gap:0}
.ftr-info p:not(.ftr-tm) span{white-space:nowrap}
.ftr-info p:not(.ftr-tm) span + span::before{content:"·";margin:0 10px;color:var(--mute3)}
.ftr-info a:hover{color:var(--fg)}
.ftr-tm{margin-top:20px;font-size:12.5px;color:var(--mute2);line-height:1.7}
.ftr-note{margin-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--mute2)}

/* ===== 반응형 ===== */
@media (max-width:1240px){ .gnb{gap:24px} }
@media (max-width:1340px){ .partner{display:none} }   /* 1241~1300px(1920 모니터 150%, 1366 노트북 110% 등)에서 KO/EN이 화면 밖으로 밀리던 것 — 여유를 두고 1340까지 숨김 */
@media (max-width:1023px){
  :root{--hdr:64px}
  .gnb,.hdr-side{display:none}
  .menu-btn{display:block}
  .prow{grid-template-columns:44px minmax(0,1fr) 48px;row-gap:6px}
  .prow-desc{grid-column:2;grid-row:2}
  .prow-go{grid-column:3;grid-row:1 / span 2}
  .nums{grid-template-columns:repeat(2,1fr)}
  .num:nth-child(2){border-right:0}
  .num:nth-child(3){padding-left:0}
  .num:nth-child(n+3){border-top:1px solid var(--line);margin-top:24px}
  .iso{grid-template-columns:1fr 1fr}
  .iso > *:nth-child(3){padding-left:0;border-left:0}
  .iso > *:nth-child(n+3){border-top:1px solid var(--line)}
  .cty{grid-template-columns:1fr 1fr}
  .cty > div:first-child{grid-column:1 / -1;border-bottom:1px solid var(--line);padding-bottom:26px}
  .cty > div:nth-child(2){padding-left:0;border-left:0}
  .expo-grid{gap:32px}
  .ftr-top{grid-template-columns:1fr 1fr}
  .ftr-top > div:first-child{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:600px;max-height:880px}
  .hero-img img{object-position:86% 40%;filter:brightness(1.3) contrast(1.08)}
  .hero::before{background:linear-gradient(180deg,rgba(12,13,15,.45) 0%,rgba(12,13,15,0) 16%,rgba(12,13,15,0) 42%,rgba(12,13,15,.86) 62%,var(--bg) 100%)}
  .hero-in{padding-bottom:44px}
  .hero-eyebrow{font-size:13.5px;gap:10px;margin-bottom:22px}
  .hero-row{flex-direction:column;align-items:flex-start;gap:28px;margin-top:24px}
  .hero-cta{width:100%}
  .hero-cta .btn{flex:1;justify-content:center;padding:0 16px}
  .story-head{padding:64px 0 32px}
  .story-lead{font-size:21px}
  .prow{grid-template-columns:minmax(0,1fr) 44px;column-gap:16px;row-gap:4px;padding:22px 0}
  .prow-n{grid-column:1;grid-row:1}
  .prow-name{grid-column:1;grid-row:2}
  .prow-desc{grid-column:1;grid-row:3;margin-top:4px;font-size:15px}
  .prow-go{grid-column:2;grid-row:2;width:44px;height:44px}
  .inds{padding:72px 0 56px}
  .ind-head{flex-direction:column;align-items:flex-start}
  .ind-ctrl{display:none}
  .ind{flex-basis:calc(76vw / var(--z))}
  .trust{padding:64px 0 72px}
  .num{padding:24px 12px 4px 0}
  .num + .num{padding-left:16px}
  .num:nth-child(3){padding-left:0}
  .iso{grid-template-columns:1fr 1fr}
  .iso > *{padding:16px 0 !important;border-left:0 !important;flex-direction:column;gap:2px}
  .iso > *:nth-child(even){padding-left:16px !important;border-left:1px solid var(--line) !important}
  .iso > a{flex-direction:row;align-items:center;gap:8px;white-space:normal}
  .cust{margin-top:56px}
  .places{padding:0 0 64px}
  .hq img{height:auto;aspect-ratio:4/5;object-position:50% 50%}
  .hq::after{display:none}
  .hq{background:var(--bg)}
  .hq figcaption{position:static;padding:28px var(--gut) 0;gap:6px;background:var(--bg)}
  .cty > div{padding:22px 0 18px}
  .cty > div + div{padding-left:16px}
  .cty > div:nth-child(2){padding-left:0}
  .cty dd.rows p{grid-template-columns:1fr;gap:2px}
  .expo{padding:56px 0 64px}
  .expo-grid{grid-template-columns:1fr;gap:24px}
  .expo-right{display:contents}
  .expo-txt{order:-1;margin-bottom:8px}
  .cta{padding:80px 0}
  .cta-act{flex-direction:column;align-items:stretch;gap:12px}
  .cta-act .btn{justify-content:center}
  .cta-act .btn + .btn{margin-left:0}
  .cta-act .mail{align-self:flex-start;margin-top:10px}
  .ftr-top{grid-template-columns:1fr 1fr;gap:28px 20px;padding-bottom:36px}
  .ftr-top > div:first-child p{display:none}
  .ftr li + li{margin-top:6px}
  .ftr h3{margin-bottom:10px}
  .ftr-info p:not(.ftr-tm){display:grid;gap:2px}
  .ftr-info p:not(.ftr-tm) span + span::before{content:none}
  .ftr-info p:not(.ftr-tm) span{white-space:normal}
}
/* 마우스를 쓰는 좁은 창(크게 확대한 데스크톱): 손가락으로 밀 수 없으므로 산업 카드 넘김 단추를 남김 */
@media (max-width:640px) and (hover:hover) and (pointer:fine){ .ind-ctrl{display:flex} }
/* 363px 이하, 언어 전환이 없는 쪽(부품 견본): 로고 영문 글자를 숨겨 메뉴 단추 자리를 확보 (로고 240 + 간격 40 + 단추 44 + 좌우 여백 40 = 364px부터 들어감) */
@media (max-width:363px){ .hdr-in:not(:has(.lang)) .logo span{display:none} }
/* 374px 이하 한국어 문의 띠 제목: 34px이면 둘째 줄('모르겠다면, 공정 조건부터')이 넘쳐 네 줄이 되고 '주세요.'만 남으므로, 375px과 같은 세 줄이 되게 화면 폭에 맞춰 줄임 */
@media (max-width:374px){ .lang-ko .cta h2{font-size:clamp(28px,calc(8.8vw / var(--z)),34px)} }

/* 움직임 줄이기 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
  .hero-img img{transform:none}
  .js .step{transform:none}
}

/* ===== 하위 페이지 공통 ===== */
/* 메인(index)에 없는 새 클래스만 씀. 위의 기존 규칙은 고치지 않음.
   사진 톤: 회사 실제 사진은 그대로 넣으면 어둡게·채도 낮게 맞춰지고, 분위기(Unsplash) 사진은 .mood 를 붙임 */
:root{--subh:57px;--stick:var(--hdr);--err:#FF8F84}
/* 섹션 바로가기 막대가 있으면 주소(#)로 이동할 때 헤더+막대 높이만큼 띄움 */
html:has(.subnav){--stick:calc(var(--hdr) + var(--subh));scroll-padding-top:var(--stick)}
main section[tabindex="-1"]:focus{outline:none}
/* 머리 사진 바로 아래 섹션은 위 선 없이 이어짐 */
main > section.phero + section{border-top:0}

/* 현재 메뉴 표시: 데스크톱은 보라 밑선 고정, 모바일 메뉴는 오른쪽 보라 점 */
.gnb a[aria-current="page"]{color:var(--hi)}
.gnb a[aria-current="page"]::after{transform:scaleX(1)}
.mnav li a[aria-current="page"]{color:var(--hi)}
.mnav li a[aria-current="page"]::after{content:"";flex:none;width:8px;height:8px;background:var(--accent)}

/* 공통 글 단계 (하위 페이지용) */
.h3{font-size:clamp(24px,calc(2.4vw / var(--z)),34px);font-weight:600;letter-spacing:-.03em;line-height:1.3;text-wrap:balance}
.quote{font-size:clamp(24px,calc(2.3vw / var(--z)),34px);font-weight:500;letter-spacing:-.028em;line-height:1.5;color:var(--fg2);text-wrap:balance}
.prose{font-size:17px;line-height:1.85;color:var(--fg3);max-width:36em;text-wrap:pretty}
.prose p + p{margin-top:1.05em}
.prose b,.prose strong{color:var(--fg);font-weight:600}
.prose .sign{margin-top:1.6em;color:var(--fg);font-weight:600}

/* ===== 하위 페이지 머리 (.phero) ===== */
.phero{position:relative;display:flex;height:calc(64vh / var(--z));height:calc(64svh / var(--z));min-height:520px;max-height:760px;overflow:hidden;background:#050506;isolation:isolate}
.phero-img{position:absolute;inset:0;z-index:-2}
.phero-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.55) brightness(.62) contrast(1.08);transform:scale(1.03);animation:slowzoom 26s var(--ease) forwards}
/* 분위기(Unsplash) 머리 사진: 메인 히어로 · 문의 띠처럼 거의 무채색으로 눌러 톤을 맞춤. 사진마다 밝기가 다르면 페이지 CSS에서 값만 조정 */
.phero.mood .phero-img img{filter:saturate(.45) brightness(.78) contrast(1.1)}
/* 목록 · 양식 페이지(기술자료 · 소식 · 문의): 바로가기 막대가 없는 대신 머리를 낮춰 첫 화면에 본문이 보이게 */
@media (min-width:641px){
  .phero.short{height:calc(52vh / var(--z));height:calc(52svh / var(--z));min-height:460px}
}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,13,15,.62) 0%,rgba(12,13,15,0) 24%,rgba(12,13,15,0) 38%,rgba(12,13,15,.78) 78%,var(--bg) 100%),
             linear-gradient(90deg,rgba(12,13,15,.66) 0%,rgba(12,13,15,0) 64%)}
.phero-in{position:relative;width:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--hdr) + 40px) var(--edge) clamp(48px,calc(5.4vw / var(--z)),80px)}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:28px;font-size:15px;font-weight:600;letter-spacing:.02em;color:var(--fg)}
.crumb::before{content:"";flex:none;width:6px;height:6px;background:var(--accent)}
.crumb a{color:var(--fg3);transition:color .25s}
.crumb a:hover{color:var(--hi)}
.crumb .sep{color:var(--mute);font-weight:400}
.phero h1{font-size:clamp(40px,calc(6.2vw / var(--z)),96px);font-weight:650;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.phero h1 .thin{font-weight:250;color:var(--fg2)}
.phero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:32px}
.phero-row p,.phero-lead{font-size:clamp(16px,calc(1.3vw / var(--z)),19px);line-height:1.75;color:var(--fg3);max-width:33em;text-wrap:pretty}
.phero-lead{margin-top:32px}
.phero-side{flex:none;display:flex;gap:12px}

/* ===== 섹션 바로가기 막대 (.subnav) : 헤더 바로 아래에 붙어 따라옴 ===== */
.subnav{position:sticky;top:var(--hdr);z-index:80;height:var(--subh);background:var(--bar-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.subnav ul{height:100%;display:flex;gap:clamp(24px,calc(2.8vw / var(--z)),44px);padding-inline:var(--edge);overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.subnav ul::-webkit-scrollbar{display:none}
.subnav li{flex:none;display:flex}
.subnav a{position:relative;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .25s}
.subnav a .tn{font-size:12px;color:var(--mute2)}
.subnav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media (hover:hover){ .subnav a:hover{color:var(--hi)} }
.subnav a[aria-current="true"]{color:var(--hi)}
.subnav a[aria-current="true"]::after{transform:scaleX(1)}
.subnav a:focus-visible{outline-offset:-3px}

/* ===== 섹션 (.sec) ===== */
.sec{position:relative;background:var(--bg);padding:clamp(72px,calc(7vw / var(--z)),112px) 0}
.sec.alt{background:var(--bg2)}
.sec.tight{padding:clamp(56px,calc(5vw / var(--z)),80px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:clamp(32px,calc(4vw / var(--z)),56px)}
.sec-head .label + .h2,.sec-head .label + .h3{margin-top:22px}
.sec-head .lead{margin-top:16px}
.sec-head > .tlink,.sec-head > .sec-side{flex:none}
.subhead{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:8px 32px;margin:clamp(56px,calc(5.5vw / var(--z)),84px) 0 24px}
.subhead:first-child{margin-top:0}
.subhead h3{font-size:clamp(22px,calc(2vw / var(--z)),28px);font-weight:600;letter-spacing:-.03em;line-height:1.3}
.subhead p{font-size:14.5px;color:var(--mute)}

/* ===== 섹션 번호 (.secno) : 메인 '실리콘이 하는 일'의 큰 가는 번호 + 보라 짧은 선 (제품 · 산업 페이지) ===== */
.secno{display:block;font-size:clamp(56px,calc(6vw / var(--z)),96px);font-weight:300;line-height:.9;letter-spacing:-.04em;color:var(--fg);font-variant-numeric:tabular-nums}
.secno::after{content:"";display:block;width:56px;height:2px;background:var(--accent);margin:26px 0 24px;transform-origin:left}
.js .rv .secno::after{transform:scaleX(.2);transition:transform .9s var(--ease) .25s}
.js .rv.in .secno::after{transform:none}
.split-txt > .secno + *{margin-top:0}

/* 표 머리글 옆 작은 브랜드 표기 (예: 품번 DOWSIL™) */
.th-sub{margin-left:6px;font-size:11.5px;font-weight:500;letter-spacing:.04em;color:var(--mute2)}
/* 값 아래 작은 출처 주석 */
.src{font-size:13px;line-height:1.7;color:var(--mute)}
/* 밑줄 링크의 바깥 링크(새 창) 표시: 오른쪽 위로 움직임 */
.tlink .ext{width:18px;height:18px}
.tlink:hover .ext{transform:translate(2px,-2px)}

/* ===== 글 + 큰 사진 2단 (.split) ===== */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,calc(5.2vw / var(--z)),96px);align-items:center}
.split.rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split.rev > .split-media{order:-1}
.split.top{align-items:start}
.split + .split{margin-top:clamp(72px,calc(8vw / var(--z)),128px)}
.split-txt > * + *{margin-top:20px}
.split-txt > .label + *{margin-top:22px}
.split-txt > .tlink,.split-txt > .btn,.split-txt > .acts{margin-top:34px}
.split-txt > .kv,.split-txt > .facts,.split-txt > .tbl{margin-top:40px}
.split-txt > .kv + .notice{margin-top:28px}
.split-txt > .kv + .src{margin-top:14px}
/* .bleed: 사진을 화면 끝까지 붙임 */
.split.bleed .split-media{margin-right:calc(var(--edge) * -1)}
.split.bleed.rev .split-media{margin-right:0;margin-left:calc(var(--edge) * -1)}
.split.bleed.rev .split-media figcaption{padding-left:var(--edge)}
/* 아주 넓은 화면(축소 보기 · QHD 이상): 사진 폭은 화면 끝까지 계속 늘지만 높이는 1920px 폭 때 값에서 멈춤 (넘치는 위아래는 잘림).
   960px 이상에서만 — 좁은 화면의 사진 높이 상한(맨 아래 '낮은 화면')을 덮지 않게 */
@media (min-width:960px){
  .split.bleed .media.r45 img{max-height:1016px}
  .split.bleed .media.r11 img{max-height:1004px}
}

/* ===== 사진 한 장 (.media) ===== */
.media{position:relative;overflow:hidden;margin:0}
.media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--bg2);filter:saturate(.6) brightness(.8) contrast(1.06)}
.media.r45 img{aspect-ratio:4/5}
.media.r32 img{aspect-ratio:3/2}
.media.r169 img{aspect-ratio:16/9}
.media.r21 img{aspect-ratio:21/9}
.media.r11 img{aspect-ratio:1}
.media.mood img{filter:brightness(.86) contrast(1.08)}
.media figcaption{padding-top:14px;font-size:13.5px;line-height:1.6;color:var(--mute)}
.media.over figcaption{position:absolute;left:0;right:0;bottom:0;padding:56px clamp(18px,calc(2vw / var(--z)),28px) clamp(16px,calc(1.6vw / var(--z)),22px);color:var(--nav);background:linear-gradient(0deg,rgba(12,13,15,.86),rgba(12,13,15,0))}

/* ===== 실제 사진 2~4장 (.gallery.g2 / .g3 / .g4) ===== */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(8px,calc(1vw / var(--z)),16px)}
.gallery > figure{position:relative;overflow:hidden;margin:0;min-height:0;background:var(--bg2);grid-column:span 6}
.gallery img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.8) contrast(1.06)}
.gallery.mood img{filter:brightness(.86) contrast(1.08)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;font-size:13.5px;line-height:1.5;color:var(--nav);background:linear-gradient(0deg,rgba(12,13,15,.84),rgba(12,13,15,0))}
.gallery.g2{grid-auto-rows:clamp(260px,calc(30vw / var(--z)),480px)}
.gallery.g2 > :nth-child(1){grid-column:span 7}
.gallery.g2 > :nth-child(2){grid-column:span 5}
.gallery.g3{grid-auto-rows:clamp(180px,calc(19vw / var(--z)),300px)}
.gallery.g3 > :nth-child(1){grid-column:span 7;grid-row:span 2}
.gallery.g3 > :nth-child(n+2){grid-column:span 5}
.gallery.g4{grid-auto-rows:clamp(220px,calc(24vw / var(--z)),380px)}
.gallery.g4 > :nth-child(1),.gallery.g4 > :nth-child(4){grid-column:span 7}
.gallery.g4 > :nth-child(2),.gallery.g4 > :nth-child(3){grid-column:span 5}

/* ===== 거점 지도 (.gmap): 점 세계지도(world-dots.svg) + 본사에서 뻗는 연결선 + 이름표 =====
   좌표는 SVG 1200×450 단위. 좁은 화면은 SVG를 키우고 옮겨 동아시아 쪽만 보여 줌 */
.gmap{margin:0}
.gmap-stage{position:relative;overflow:hidden;aspect-ratio:1200/450}
.gmap-svg{display:block;width:100%;height:auto}
.gm-arc{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.gm-lead{fill:none;stroke:var(--map-lead);stroke-width:1}
.gm-tip{fill:var(--map-tip)}
.gm-dot{fill:var(--accent)}
.gm-pt.hq .gm-dot{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.gm-ring{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.gm-lbl text{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.gm-n{font-size:15px;font-weight:600;letter-spacing:-.01em;fill:var(--fg)}
.gm-lbl.hq .gm-n{font-size:16px;fill:var(--hi)}
.gm-s{font-size:11.5px;fill:var(--mute)}
.gmap-key{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--mute)}
.gmap-key .k{display:inline-flex;align-items:center;gap:8px}
.gmap-key .k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.gmap-key .k-hq::before{background:#fff;box-shadow:0 0 0 2px var(--accent)}
.gmap-key .k-sum{margin-left:auto;color:var(--fg);font-weight:600}
/* 예정 거점(미국 조지아 2027): 속 빈 점 + 점선 연결 + 흐린 이름표 — 운영 중인 곳과 구별 */
.gm-plan-arc{stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 5;opacity:.7}
.gm-pt.plan .gm-dot{fill:var(--bg);stroke:var(--accent);stroke-width:1.8}
.gm-lbl.plan .gm-n{fill:var(--mute)}
.gmap-key .k-plan::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--accent)}
/* 움직임(JS 있을 때만): 화면에 들어오면 본사에서 선이 그어짐 → 점 → 이름표 순서 */
.js .gmap .gm-arc{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.3s var(--ease) .35s}
.js .gmap .gm-pt:not(.hq),.js .gmap .gm-lead,.js .gmap .gm-lbl{opacity:0;transition:opacity .6s var(--ease) 1.2s}
.js .gmap.in .gm-arc{stroke-dashoffset:0}
.js .gmap.in .gm-pt,.js .gmap.in .gm-lead,.js .gmap.in .gm-lbl{opacity:1}
.js .gmap .gm-arc:nth-child(2){transition-delay:.5s}.js .gmap .gm-arc:nth-child(3){transition-delay:.65s}.js .gmap .gm-arc:nth-child(4){transition-delay:.8s}
.js .gmap .gm-pt:nth-child(2){transition-delay:1.35s}.js .gmap .gm-pt:nth-child(3){transition-delay:1.5s}.js .gmap .gm-pt:nth-child(4){transition-delay:1.65s}
.js .gmap .gm-lead:nth-child(n+2),.js .gmap .gm-lbl:nth-child(n+2){transition-delay:1.7s}
.gmap.in .gm-ring{animation:gm-pulse 3.2s ease-out 2s infinite}
.gmap.in .gm-pt:nth-child(2) .gm-ring{animation-delay:2.6s}.gmap.in .gm-pt:nth-child(3) .gm-ring{animation-delay:3.2s}.gmap.in .gm-pt:nth-child(4) .gm-ring{animation-delay:3.8s}.gmap.in .gm-pt.hq .gm-ring{animation-delay:1.6s}
@keyframes gm-pulse{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(4.2)}}
@media (prefers-reduced-motion:reduce){
  .gmap .gm-ring{animation:none !important}
  .js .gmap .gm-arc,.js .gmap .gm-pt,.js .gmap .gm-lead,.js .gmap .gm-lbl{transition:none !important}
}
/* 1023px 이하: 아시아~태평양(가로 200~1000)만 */
@media (max-width:1023px){
  .gmap-stage{aspect-ratio:800/450}
  .gmap-svg{width:150%;transform:translateX(-16.667%)}   /* 200~1000 구간 (10-23 미국 조지아 점 뺌) */
}
/* 640px 이하: 동아시아(가로 395~765, 세로 70~330)만 */
@media (max-width:640px){
  .gmap-stage{aspect-ratio:370/260}
  .gmap-svg{width:324.324%;transform:translate(-32.917%,-15.556%)}
  .gmap-key{gap:8px 18px;font-size:12.5px}
  .gmap-key .k-sum{margin-left:0;width:100%}
  /* 확대 비율이 데스크톱보다 작아 이름표 글씨를 조금 키움 */
  .gm-n{font-size:16px}.gm-lbl.hq .gm-n{font-size:17px}.gm-s{font-size:12.5px}
}
/* 641~899px(태블릿 세로 · 가로 휴대폰)와 1024~1279px(태블릿 가로): 지도가 0.74~0.98배로 그려져 보조 글씨가 9~10px이 되므로 이름표 글씨만 키움 (지도 자르기 · 이름표 위치는 그대로) */
@media (min-width:641px) and (max-width:899px){ .gm-n{font-size:17px}.gm-lbl.hq .gm-n{font-size:18px}.gm-s{font-size:14px} }
@media (min-width:1024px) and (max-width:1279px){ .gm-n{font-size:16.5px}.gm-lbl.hq .gm-n{font-size:17.5px}.gm-s{font-size:14px} }

/* ===== 거르기 · 검색 · 결과 수 (표 위 도구) ===== */
.filters{display:flex;gap:0 32px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;border-bottom:1px solid var(--line2)}
.filters::-webkit-scrollbar{display:none}
/* 마우스를 쓰는 화면(확대한 데스크톱 등): 가로로 밀 수 없으므로 단추를 여러 줄로 접어 모두 보이게 함 (손가락 화면은 한 줄로 밀기 그대로) */
@media (hover:hover) and (pointer:fine){ .filters{flex-wrap:wrap;overflow-x:visible} }
.filters button{position:relative;flex:none;display:inline-flex;align-items:baseline;gap:8px;padding:14px 0 16px;font-size:16px;font-weight:500;color:var(--mute);white-space:nowrap;transition:color .25s}
.filters button .tn{font-size:12px;color:var(--mute2);transition:color .25s}
.filters button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
@media (hover:hover){ .filters button:hover{color:var(--hi)} }
.filters button[aria-pressed="true"]{color:var(--hi)}
.filters button[aria-pressed="true"] .tn{color:var(--mute)}
.filters button[aria-pressed="true"]::after{transform:scaleX(1)}
.filters button:focus-visible{outline-offset:-3px}
.filters + .filters{border-top:0}
.tools{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;flex-wrap:wrap;margin:22px 0 30px}
.search{position:relative;flex:1 1 320px;max-width:460px}
.search svg{position:absolute;left:0;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.search input{width:100%;height:52px;padding:0 44px 0 34px;background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;color:var(--fg);font:inherit;font-size:16px;transition:border-color .25s,box-shadow .25s;-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--mute2)}
.search input::-webkit-search-cancel-button{display:none;-webkit-appearance:none;appearance:none}   /* display:none — 안 보여도 자리(4px쯤)를 차지해 안내 글 칸이 그만큼 좁아짐 */
.search input:hover{border-bottom-color:rgba(237,237,237,.4)}
.search input:focus{outline:none;border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.search-clr{position:absolute;right:0;top:50%;width:40px;height:40px;transform:translateY(-50%);display:grid;place-items:center;color:var(--mute);transition:color .25s}
.search-clr:hover{color:var(--hi)}
.search-clr[hidden]{display:none}
.search-clr svg{position:static;transform:none;width:16px;height:16px;color:currentColor}
.count{font-size:14.5px;color:var(--mute);white-space:nowrap}
.count b{font-size:24px;font-weight:300;letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums;margin-right:3px}
.count span{margin-left:6px}
.empty{display:grid;justify-items:start;gap:10px;padding:clamp(48px,calc(6vw / var(--z)),80px) 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line)}
.empty[hidden]{display:none}
.empty strong{font-size:clamp(20px,calc(1.8vw / var(--z)),26px);font-weight:600;letter-spacing:-.02em}
.empty p{font-size:15.5px;color:var(--mute)}
.empty .tlink{margin-top:14px}
html:not(.js) .filters,html:not(.js) .tools{display:none}

/* ===== 어두운 데이터 표 (.tbl) ===== */
.tbl{--tbl-bg:var(--bg);--tbl-hv:#16181B;width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.6}
.sec.alt .tbl{--tbl-bg:var(--bg2);--tbl-hv:var(--bg3)}
.tbl [hidden]{display:none !important}
.tbl caption{caption-side:top;text-align:left;padding-bottom:14px;font-size:14px;color:var(--mute)}
.tbl thead th{position:sticky;top:var(--stick);z-index:5;background:var(--tbl-bg);padding:14px 24px 14px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);text-align:left;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--mute);white-space:nowrap}
.tbl thead th:first-child{box-shadow:-16px 0 0 var(--tbl-bg)}
.tbl thead th:last-child{box-shadow:16px 0 0 var(--tbl-bg);padding-right:0}
.tbl td,.tbl tbody th{padding:18px 24px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left;color:var(--fg3);font-weight:400;transition:background .2s,box-shadow .2s}
.tbl td:last-child{padding-right:0}
.tbl tbody th{color:var(--fg);font-weight:600;font-size:16.5px;letter-spacing:-.01em}
.tbl tbody tr:not(.grp):hover > *{background:var(--tbl-hv)}
.tbl tbody tr:not(.grp):hover > :first-child{box-shadow:-16px 0 0 var(--tbl-hv)}
.tbl tbody tr:not(.grp):hover > :last-child{box-shadow:16px 0 0 var(--tbl-hv)}
.tbl tr.grp th{padding:48px 0 14px;border-bottom:1px solid var(--line2);font-size:clamp(19px,calc(1.6vw / var(--z)),23px);font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.tbl tbody:first-of-type tr.grp th,.tbl thead + tbody tr.grp th{padding-top:30px}
.tbl tr.grp th small{margin-left:12px;font-size:13px;font-weight:500;letter-spacing:0;color:var(--mute)}
.tbl .r{text-align:right}
.tbl td.go{text-align:right;white-space:nowrap;vertical-align:middle}
.tbl a:not(.tbl-go){border-bottom:1px solid var(--line2);transition:border-color .25s}
.tbl a:not(.tbl-go):hover{border-color:var(--accent)}
.tbl-go{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid var(--line2);font-size:14.5px;font-weight:500;color:var(--fg);transition:border-color .25s}
.tbl-go .arw{width:16px;height:16px}
.tbl-go:hover{border-color:var(--accent)}
.tbl-go:hover .arw{transform:translateX(3px)}

/* ===== 연혁 (.timeline) ===== */
.timeline{list-style:none;margin:0;padding:0;border-top:1px solid var(--line2)}
.tl{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px;padding:26px 0 28px;border-bottom:1px solid var(--line)}
.tl-y{font-size:clamp(44px,calc(5vw / var(--z)),80px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg);white-space:nowrap}   /* '2020년 / 대'로 갈리지 않게 */
.tl-items{display:grid;gap:12px;padding-top:6px}
.tl-items li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:baseline;font-size:17px;line-height:1.6;color:var(--fg3)}
.tl-items b{color:var(--fg);font-weight:600}
.tl-y small{font-size:.3em;font-weight:500;letter-spacing:-.01em;margin-left:.14em;color:var(--mute)}
.tl-m{font-size:13px;color:var(--mute)}
.tl.now .tl-y::after{content:"";display:inline-block;vertical-align:top;width:8px;height:8px;margin:.1em 0 0 14px;background:var(--accent)}

/* ===== 큰 숫자 줄 (.facts) : 메인 .nums 와 같은 결 ===== */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line2)}
.facts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.facts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts.c1{grid-template-columns:minmax(0,1fr)}
.facts.c1 .fact{padding-right:0}
.fact{padding:30px 28px 6px 0}
.fact + .fact{padding-left:28px;border-left:1px solid var(--line)}
.fact strong{display:block;font-size:clamp(56px,calc(7vw / var(--z)),116px);font-weight:200;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.fact strong small{font-size:.3em;font-weight:500;letter-spacing:-.01em;margin-left:.14em;color:var(--mute)}
.fact p{margin-top:16px;font-size:15px;line-height:1.6;color:var(--mute)}
.facts.sm .fact strong{font-size:clamp(44px,calc(5vw / var(--z)),80px)}

/* ===== 입력 양식 (.form / .fld) ===== */
.form{display:grid;gap:28px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.fld{display:grid;gap:10px;align-content:start;min-width:0}
.fld > label,.fld-l{font-size:14.5px;font-weight:600;color:var(--fg)}
.req{margin-left:3px;color:var(--accent);font-weight:700}
.fld :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){width:100%;height:54px;padding:0 18px;background:rgba(237,237,237,.03);border:1px solid var(--line2);border-radius:0;color:var(--fg);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .25s,background-color .25s}
.fld textarea{height:auto;min-height:180px;padding:15px 18px;line-height:1.7;resize:vertical}
.fld select{padding-right:48px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 9l6 6 6-6' fill='none' stroke='%239AA0A6' stroke-width='1.6'/></svg>");background-repeat:no-repeat;background-position:right 16px center;background-size:18px}
.fld select option{background:var(--bg2);color:var(--fg)}
.fld ::placeholder{color:var(--mute2)}
/* 389px 이하 휴대폰: 안내 글(placeholder)이 칸보다 길어 낱말 중간에서 뚝 끊기므로(검색 칸 포함) 안내 글만 14px로 줄여 360 · 375px에서 끝까지 보이게 하고,
   그래도 넘치면(344px 이하) …로 끝냄. 입력 글자는 16px 그대로(아이폰 자동 확대 방지).
   말줄임은 이 폭에서만 — 390px 이상까지 걸면 2px 차이로 겨우 들어가던 기술자료 검색 안내 글 끝이 '…'로 바뀜 */
@media (max-width:389px){
  .search input,.fld input{text-overflow:ellipsis}
  .search input::placeholder,.fld ::placeholder{font-size:14px}
}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:rgba(237,237,237,.36)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);background-color:rgba(139,124,255,.07)}
.fld [aria-invalid="true"]{border-color:var(--err)}
.fld [aria-invalid="true"]:focus{border-color:var(--err);box-shadow:0 0 0 1px var(--err)}
.fld-hint{font-size:13.5px;line-height:1.6;color:var(--mute)}
.fld-err{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.5;color:var(--err)}
.fld-err::before{content:"";flex:none;width:6px;height:6px;background:var(--err)}
.fld-err:empty{display:none}
.fld-list{display:grid;gap:4px;padding-left:36px;font-size:13.5px;line-height:1.6;color:var(--mute)}
.fld-list li{position:relative}
.fld-list li::before{content:"";position:absolute;left:-14px;top:.8em;width:6px;height:1px;background:var(--mute)}
/* 체크박스 · 라디오 */
.chk{display:flex;align-items:flex-start;gap:14px}
.chk input{flex:none;width:22px;height:22px;margin:1px 0 0;display:grid;place-items:center;border:1px solid var(--line2);background:rgba(237,237,237,.03);cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .2s,border-color .2s}
.chk input::after{content:"";width:12px;height:12px;background:var(--bg);clip-path:polygon(14% 50%,0 64%,38% 100%,100% 24%,86% 10%,38% 72%);transform:scale(0);transition:transform .2s var(--ease)}
.chk input[type="radio"]{border-radius:50%}
.chk input[type="radio"]::after{width:8px;height:8px;border-radius:50%;clip-path:none}
.chk input:hover{border-color:rgba(237,237,237,.5)}
.chk input:checked{background:var(--fg);border-color:var(--fg)}
.chk input:checked::after{transform:scale(1)}
.chk input[aria-invalid="true"]{border-color:var(--err)}
.chk label{font-size:15.5px;line-height:1.5;color:var(--fg);cursor:pointer}
.form-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:4px}
.form-act p{font-size:13.5px;color:var(--mute)}
.form-note{font-size:13.5px;color:var(--mute)}

/* ===== 작은 안내 상자 (.notice) ===== */
.notice{display:grid;align-content:start;gap:6px;padding:20px 24px;border:1px solid var(--line);background:rgba(237,237,237,.025);font-size:14.5px;line-height:1.7;color:var(--mute)}
.notice-t{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--fg)}
.notice-t::before{content:"";flex:none;width:6px;height:6px;background:var(--accent)}
.notice a{color:var(--fg);border-bottom:1px solid var(--line2);transition:border-color .25s}
.notice a:hover{border-color:var(--accent)}
/* 상자 없는 안내: 보라 점 + 제목 + 본문만 (표 위 기준 안내 등) */
.notice.bare{border:0;background:none;padding:0;max-width:46em}
.sec-head + .notice.bare{margin-bottom:clamp(28px,calc(3vw / var(--z)),40px)}

/* ===== 이름-값 줄 (.kv) : 연락처·회사 정보 등, 메인 .cty 줄과 같은 결 ===== */
.kv{display:grid;margin:0;border-top:1px solid var(--line2)}
.kv > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line)}
.kv dt{font-size:14.5px;font-weight:600;color:var(--fg)}
.kv dd{margin:0;font-size:15.5px;line-height:1.6;color:var(--mute)}
.kv dd a{color:var(--fg);border-bottom:1px solid var(--line2);transition:border-color .25s}
.kv dd a:hover{border-color:var(--accent)}

/* ===== 같은 폭 칸 나눔 (.cols.c2 / .c3 / .c4) ===== */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

/* ===== 짧은 알림 (.toast, d3.js가 만듦) ===== */
.toast{position:fixed;left:50%;bottom:28px;z-index:150;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(calc(100vw / var(--z)) - 32px);padding:16px 22px;background:var(--bg3);border:1px solid var(--line2);box-shadow:0 18px 44px rgba(0,0,0,.5);color:var(--fg);font-size:15px;font-weight:500;line-height:1.5;opacity:0;pointer-events:none;transform:translate(-50%,16px);transition:opacity .35s var(--ease),transform .45s var(--ease)}
.toast::before{content:"";flex:none;width:6px;height:6px;background:var(--accent)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ===== 하위 페이지 반응형 ===== */
@media (max-width:1023px){
  .cols.c4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts:not(.c3):not(.c2):not(.c1){grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts:not(.c3):not(.c2):not(.c1) .fact:nth-child(odd){padding-left:0;border-left:0}
  .facts:not(.c3):not(.c2):not(.c1) .fact:nth-child(n+3){margin-top:24px;border-top:1px solid var(--line)}
  .tl{grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:24px}
  /* 손가락으로 누르는 작은 글자 링크(표의 TDS · MSDS 요청, 메일 · 전화, 문의 쪽 '네이버 지도')와 동의 확인란:
     보이는 모양은 그대로 두고 누르는 영역만 넓힘 (글자 줄 높이 21~30px → 38px 이상). 동의 줄은 label이 확인란 위까지 덮어 줄 전체가 눌림 */
  .tbl-go,.loc-map,.kv dd a{position:relative}
  .tbl-go::after,.loc-map::after,.kv dd a::after{content:"";position:absolute;left:-8px;right:-8px;top:-10px;bottom:-9px}
  .chk label{padding:10px 0 10px 36px;margin:-10px 0 -10px -36px}
}
@media (max-width:959px){
  .split,.split.rev{grid-template-columns:minmax(0,1fr);gap:28px}
  .split > .split-media,.split.rev > .split-media{order:-1}
  .split.txt-first > .split-media{order:1}
  .split.bleed .split-media,.split.bleed.rev .split-media{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
  .split-txt > .tlink,.split-txt > .btn,.split-txt > .acts{margin-top:26px}
  .split.bleed.rev .split-media figcaption{padding-left:var(--gut)}
  .split.bleed .split-media figcaption{padding-inline:var(--gut)}
}
@media (max-width:767px){
  /* 표 → 카드: 머리글은 화면에서만 숨기고(읽기 프로그램용으로 남김) 칸마다 data-label 이름을 붙임 */
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tbl,.tbl tbody,.tbl tr,.tbl td,.tbl tbody th{display:block}
  .tbl tbody tr:not(.grp){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:18px 0 16px;border-bottom:1px solid var(--line)}
  .tbl tbody tr:not(.grp) > *{grid-column:1 / -1}
  .tbl tbody tr:not(.grp) > th{grid-column:1;margin-bottom:8px;font-size:19px}
  .tbl td,.tbl tbody th{padding:0;border:0;box-shadow:none !important;background:none !important}
  .tbl td{padding:3px 0;font-size:15px}
  .tbl td[data-label]{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px}
  .tbl td[data-label]::before{content:attr(data-label);font-size:13px;font-weight:500;color:var(--mute);padding-top:1px}
  .tbl tbody tr:not(.grp) > td.go{grid-column:2;grid-row:1;align-self:start;padding-top:3px}
  .tbl tr.grp th{padding:40px 0 12px;font-size:19px}
  .tbl tbody:first-of-type tr.grp th,.tbl thead + tbody tr.grp th{padding-top:24px}
  .tbl caption{display:block}
}
@media (max-width:640px){
  .phero{height:auto;min-height:440px;max-height:none}
  .phero.short{min-height:0}   /* 낮은 머리: 글 높이만큼만 → 위치 표시 · 제목이 다른 페이지와 같은 높이에서 시작 */
  .phero::before{background:linear-gradient(180deg,rgba(12,13,15,.55) 0%,rgba(12,13,15,.1) 22%,rgba(12,13,15,.35) 48%,rgba(12,13,15,.86) 76%,var(--bg) 100%)}
  .phero-in{padding:calc(var(--hdr) + 88px) var(--gut) 40px}
  .crumb{font-size:13.5px;gap:10px;margin-bottom:20px}
  .phero-row{flex-direction:column;align-items:flex-start;gap:24px;margin-top:20px}
  .phero-lead{margin-top:20px}
  .phero-side{width:100%}
  .phero-side .btn{flex:1;justify-content:center;padding:0 16px}
  .subnav ul{gap:26px}
  .subnav a{font-size:14.5px}
  .sec{padding:64px 0}
  .sec.tight{padding:48px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:20px}
  .prose{font-size:16px}
  .gallery,.gallery.g2,.gallery.g3,.gallery.g4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;gap:8px}
  .gallery > figure,.gallery.g2 > figure,.gallery.g3 > figure,.gallery.g4 > figure{grid-column:span 1 !important;grid-row:auto !important;aspect-ratio:1}
  .gallery > figure:first-child,.gallery.g2 > figure,.gallery.g4 > figure:nth-child(4){grid-column:1 / -1 !important;aspect-ratio:4/3}
  .gallery figcaption{padding:36px 14px 12px;font-size:12.5px}
  .filters{gap:0 24px;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .filters button{font-size:15px}
  .tools{flex-direction:column;align-items:stretch;gap:14px;margin:16px 0 22px}
  .search{max-width:none;flex-basis:auto}
  .count{align-self:flex-start}
  .tl{grid-template-columns:minmax(0,1fr);gap:12px;padding:22px 0 24px}
  .tl-y{font-size:44px}
  .tl-items{padding-top:0}
  .tl-items li{grid-template-columns:64px minmax(0,1fr);gap:12px;font-size:16px}
  .facts:not(.c3):not(.c2):not(.c1) .fact{padding:24px 12px 4px 0}
  .facts:not(.c3):not(.c2):not(.c1) .fact:nth-child(even){padding-left:16px}
  .facts.c1 .fact{padding:24px 0 4px}
  .facts.c3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts.c3 .fact:first-child{grid-column:1 / -1}
  .facts.c3 .fact:nth-child(2){padding-left:0;border-left:0}
  .facts.c3 .fact:nth-child(n+2){margin-top:24px;border-top:1px solid var(--line)}
  .facts.c3 .fact{padding:24px 12px 4px 0}
  .facts.c3 .fact:nth-child(3){padding-left:16px}
  .frow{grid-template-columns:minmax(0,1fr);gap:28px}
  .form-act .btn{width:100%;justify-content:center}
  .notice{padding:18px 18px}
  .kv > div{grid-template-columns:92px minmax(0,1fr);gap:12px}
  .cols,.cols.c2,.cols.c4{grid-template-columns:minmax(0,1fr)}
  .toast{bottom:16px;padding:14px 18px;font-size:14.5px}
}
/* 359px 이하 세로 휴대폰의 한국어 머리 단추: 반 폭 단추(320px에서 글자 칸 102px)에 전화번호가 들어가지 않아 '031-340-' / '2801'로 꺾이므로 안쪽 여백을 줄이고 한 줄로 묶음 (영문은 단추를 쌓는 규칙이 따로 있음).
   세로 화면에서만 — 500% 확대(273x127 등 가로 화면)에서는 묶은 단추가 칸보다 넓어져, 챗봇을 켠 쪽에서 머리 설명 글까지 화면 밖으로 밀림 */
@media (max-width:359px) and (orientation:portrait){ .lang-ko .phero-side .btn{padding:0 8px;white-space:nowrap} }
@media (prefers-reduced-motion:reduce){
  .phero-img img{transform:none}
  .js .rv .secno::after{transform:none}
}

/* ===== 언어 전환 ===== */
/* 머리글의 KO / EN (_build.py가 영문판이 있는 페이지에만 넣음). 지금 보고 있는 언어(aria-current)는 밝게 + 보라 밑줄, 다른 언어는 흐리게.
   데스크톱: '문의하기' 단추 오른쪽, 세로 선으로 구분 / 1023px 이하: 햄버거 단추 바로 왼쪽 / 479px 이하: 바꿀 언어 하나만(EN 또는 KO).
   모바일 메뉴를 열어도 머리글이 메뉴 위에 떠 있어 전환이 계속 보이므로 메뉴(.mnav-foot) 안에는 따로 넣지 않음.
   전환이 없는 페이지(영문판이 아직 없는 페이지)는 아래 규칙이 하나도 걸리지 않아 모양이 그대로임 */
.lang{flex:none;display:flex;align-items:center;margin-left:-16px;padding-left:17px;border-left:1px solid var(--line2);font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1;white-space:nowrap}
.lang a{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 5px;color:var(--mute);transition:color .25s}
.lang a::after{content:"";position:absolute;left:5px;right:5px;bottom:12px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lang a:hover{color:var(--hi)}
.lang a:hover::after,.lang a[aria-current="true"]::after{transform:scaleX(1)}
.lang a[aria-current="true"]{color:var(--hi)}
.lang span{color:var(--mute3);font-weight:400;letter-spacing:0}
.lang a:focus-visible{outline-offset:-6px}
/* 영문 머리글은 메뉴 이름이 길어 넘치지 않게 단계별로 줄임:
   1340px 이하 'Dow Official Partner' 숨김(한국어는 1240px) → 1240px 이하 간격 축소 → 1099px 이하 메뉴의 'Contact'와 겹치는 'Contact us' 단추 숨김 */
@media (max-width:1340px){ .lang-en .partner{display:none} }
@media (max-width:1240px){ .lang-en .gnb{gap:22px} .lang-en .hdr-in{gap:32px} }
@media (min-width:1024px) and (max-width:1099px){ .lang-en .hdr-side{display:none} .lang-en .hdr-side + .lang{margin-left:0;padding-left:0;border-left:0} }
/* 1023px 이하: 햄버거 단추 바로 왼쪽 (단추 안쪽 여백이 있어 붙여 둠) */
@media (max-width:1023px){
  .lang{margin-left:auto;padding-left:0;border-left:0}
  .lang + .menu-btn{flex:none;margin-left:-36px}
  .lang-en .lang + .menu-btn{margin-left:-28px}
}
@media (max-width:640px){
  .hdr-in:has(.lang){gap:14px}
  .lang + .menu-btn,.lang-en .lang + .menu-btn{margin-left:-10px}
}
/* 479px 이하: 바꿀 언어 하나만 크게 */
@media (max-width:479px){
  .lang span,.lang a[aria-current="true"]{display:none}
  .lang a{padding:0 8px;color:var(--nav)}
  .lang a::after{left:8px;right:8px}
}
/* 389px 이하 한국어 머리글: 로고 영문 글자 간격만 좁혀 전환·햄버거가 들어갈 자리를 만듦.
   357px 이하는 그래도 모자라(로고 222 + 전환 34 + 단추 44 + 간격 · 여백 = 358px) 단추가 오른쪽 여백으로 밀리므로 영문 글자를 숨김 */
@media (max-width:389px){ .lang-ko .hdr-in:has(.lang) .logo span{letter-spacing:.1em} }
@media (max-width:357px){ .lang-ko .hdr-in:has(.lang) .logo span{display:none} }
/* 359px 이하 영문 머리글: 로고(DONGYANG LUBESIL)를 조금 줄여 전환·햄버거가 여백 안에 들어가게 */
@media (max-width:359px){ .lang-en .hdr-in:has(.lang) .logo b{font-size:18px} }
@media (max-width:300px){ .lang-en .hdr-in:has(.lang) .logo b{font-size:15px} }   /* 1366 노트북 500%(273px)에서 햄버거가 12px 밀리던 것 */
/* 영문 푸터: 영문 주소가 길어 화면 밖으로 밀리지 않게 줄의 첫 칸(회사명·주소)은 칸 안에서 줄바꿈 허용,
   641px 이상에서는 본사 주소를 한 줄로 따로 두고 TEL · FAX · 메일을 다음 줄에 (줄 첫머리에 · 가 오지 않게) */
.lang-en .ftr-info p:not(.ftr-tm) span:first-child{white-space:normal}
@media (min-width:641px){
  .lang-en .ftr-info p:nth-child(2) > span:first-child{flex-basis:100%}
  .lang-en .ftr-info p:nth-child(2) > span:nth-child(2)::before{content:none}
}
/* 영문 푸터 링크 칸(640px 이하 2칸): 묶어 둔 'Environment · Safety'(134px)와 메일 주소(159px)가 두 칸을 밀어 352px 이하에서 오른쪽 여백을 넘고,
   339px 이하는 페이지 전체가 화면보다 넓어짐(320px에서 333px — 머리글 · 메뉴까지 함께) → 묶음을 풀고, 303px 이하는 한 칸으로 */
@media (max-width:352px){ .lang-en .ftr-top .nw{white-space:normal} }
@media (max-width:303px){ .lang-en .ftr-top{grid-template-columns:minmax(0,1fr)} }
/* 한국어 푸터 641~839px: 주소 · TEL · FAX · 메일이 한 줄에 못 들어가 '· admin@…'처럼 구분점이 줄 첫머리에 오므로,
   영문처럼 주소를 한 줄로 따로 두고 TEL · FAX · 메일을 다음 줄에 (넷이 한 줄에 들어가는 것은 828px부터 — 글꼴 · 브라우저 차이를 보아 839px까지 두 줄로 둠) */
@media (min-width:641px) and (max-width:839px){
  .lang-ko .ftr-info p:nth-child(2) > span:first-child{flex-basis:100%}
  .lang-ko .ftr-info p:nth-child(2) > span:nth-child(2)::before{content:none}
}
/* 영문 본문: 낱말이 한국어보다 길어 일부 폭에서만 손보는 것 (여러 쪽에 걸리는 것만 여기, 한 쪽짜리는 쪽별 CSS의 영문판 구역) */
/* 359px 이하 첫 화면 단추: 반 폭 단추(320px에서 글자 칸 102px)에 'Contact us →'(114px)가 들어가지 않아 두 줄로 꺾이므로 안쪽 여백 · 화살표 간격만 줄임
   (한 줄로 묶지는 않음 — 더 좁은 화면에서 단추가 화면 밖으로 밀림) */
@media (max-width:359px){ .lang-en .hero-cta .btn,.lang-en .phero-side .btn{padding:0 10px;gap:8px} }
/* 339px 이하 문의 띠 제목: 묶어 둔 'process conditions.'가 34px 글자로는 283px라 틀(320px에서 280px)을 넘음 */
@media (max-width:339px){ .lang-en .cta h2{font-size:calc(10vw / var(--z))} }
/* 768~899px 고객사 격자: 4칸이면 글자 칸이 93px뿐이라 영문 회사명이 3~4줄로 쌓이고 'Components' 한 낱말이 칸을 넘으므로 767px 이하처럼 2칸
   (제품 쪽 PSA 묶음 격자 .clist.gset 은 products.css가 따로 정해 그대로) */
@media (min-width:768px) and (max-width:899px){ .lang-en .clist{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===== 낮은 화면 (브라우저 확대 · 가로로 돌린 휴대폰) =====
   높이가 낮은 가로 화면에서만 걸림: 메인 첫 화면은 높이 600px 이하, 하위 페이지 머리 · 붙는 막대 · 사진은 520px 이하.
   세로 휴대폰 · 태블릿 · 100% 데스크톱 창은 아래 규칙이 하나도 걸리지 않아 모양이 그대로임 */
/* 메인 첫 화면: 최소 높이 640px 대신 화면 높이만큼(글이 더 길면 글 높이만큼) → 제목 · 단추가 첫 화면 아래로 밀리지 않음.
   위 여백은 화면이 아주 낮으면(300% 확대 등) 더 줄여 제목 두 줄이 첫 화면에 들어오게 함 */
@media (max-height:600px) and (orientation:landscape){
  .hero{height:auto;min-height:calc(100vh / var(--z));min-height:calc(100svh / var(--z));max-height:none}
  .hero-in{height:auto;min-height:calc(100vh / var(--z));min-height:calc(100svh / var(--z));padding-top:calc(var(--hdr) + min(24px,calc(8vh / var(--z))))}
}
@media (max-height:520px) and (orientation:landscape){
  /* 하위 페이지 머리: 글 높이만큼만 (위 여백은 메인과 같은 이유로 높이에 맞춰 줄임) */
  .phero,.phero.short{height:auto;min-height:0;max-height:none}
  .phero-in{padding-top:calc(var(--hdr) + min(40px,calc(10vh / var(--z))))}
  /* 바로가기 막대는 따라오지 않고 머리글만 붙음 (d3.js stickH()가 막대가 붙어 있는지 보고 이동 위치를 맞춤).
     쪽별 CSS의 붙는 줄(제품 분야 단추 · PSA · 기술자료 묶음 제목)도 같은 조건에서 풀림 */
  .subnav{position:static}
  html:has(.subnav){--stick:var(--hdr)}
}
/* 한 칸으로 쌓인 사진 · 옆으로 미는 산업 카드가 화면보다 높아지지 않게 (.step-fig는 max-height만 주면 비율 때문에 폭이 줄어 height로 줌) */
@media (max-width:959px) and (max-height:520px) and (orientation:landscape){
  .step-fig{aspect-ratio:auto;height:min(calc(75vw / var(--z)),calc(72vh / var(--z)));height:min(calc(75vw / var(--z)),calc(72svh / var(--z)))}
  .split > .split-media img{max-height:calc(72vh / var(--z));max-height:calc(72svh / var(--z))}
  .ind{max-height:max(calc(72vh / var(--z)),160px);max-height:max(calc(72svh / var(--z)),160px)}   /* 160px 아래로는 줄이지 않음 — 카드 안 이름 · 설명(영문은 세 줄)이 잘림 */
}
@media (max-width:640px) and (max-height:520px) and (orientation:landscape){
  .hq img,.expo .f-tall img{max-height:calc(72vh / var(--z));max-height:calc(72svh / var(--z))}
  .gallery > figure{width:100%;max-height:calc(72vh / var(--z));max-height:calc(72svh / var(--z))}   /* 폭을 못박아야 비율 때문에 사진이 좁아지지 않음 */
}

/* ===== AI 제품 상담 버튼과 겹치지 않게 (챗봇 widget.js가 html에 dyc-on을 붙였을 때만) =====
   층 순서: 버튼 #dyc-launcher 95 · 대화창 #dyc-panel 110 · 휴대폰 전체 화면 대화창 160 (머리글 100, 알림 150, 바로가기 200 사이).
   위젯이 없는 페이지는 아래 규칙이 하나도 걸리지 않아 모양이 그대로임.
   --dyc-clear: 오른쪽 아래 버튼(아래 20 + 높이 48 + 여유 16)을 피하는 높이, --dyc-side: 옆으로 피하는 폭(버튼 폭 132 + 여유 16). 버튼 크기가 바뀌면 이 두 값만 고침 */
html.dyc-on{--dyc-clear:calc(84px + env(safe-area-inset-bottom, 0px));--dyc-side:calc(148px + env(safe-area-inset-right, 0px))}
@media (max-height:320px){ html.dyc-on{--dyc-clear:calc(60px + env(safe-area-inset-bottom, 0px));--dyc-side:calc(118px + env(safe-area-inset-right, 0px))} }   /* 낮은 화면에서는 버튼이 102x36·아래 8 (widget.js) */
html.dyc-on .ftr{padding-bottom:calc(var(--dyc-clear) + 12px)}                     /* 푸터 마지막 줄(시안 표시)이 버튼에 가리지 않게 */
html.dyc-on .hero-in{padding-bottom:max(clamp(56px,calc(7vw / var(--z)),104px), calc(var(--dyc-clear) + 12px))}   /* 메인 첫 화면 단추 */
/* 낮은 가로 화면: 머리 사진이 화면보다 길어지면 아래를 비워도 첫 화면 단추가 버튼 자리에 오므로, 단추를 버튼 폭만큼 왼쪽으로 비켜 둠.
   자리가 모자라면 단추가 글 아래 왼쪽으로 내려가고, 640px 이하에서는 꽉 채우지 않고 제 폭으로 둠.
   높이 기준 624 · 552px = 위 '낮은 화면' 기준(600 · 520px) + 머리 사진이 최소 높이(640 · 520px)로 남아 단추가 버튼에 걸리는 구간 */
@media (max-height:624px) and (orientation:landscape){
  html.dyc-on .hero-row{flex-wrap:wrap}
  html.dyc-on .hero-cta{width:auto;flex-wrap:wrap;margin-right:var(--dyc-side)}
  html.dyc-on .hero-cta .btn{flex:none}
}
@media (max-height:552px) and (orientation:landscape){
  html.dyc-on .phero-row{flex-wrap:wrap}
  html.dyc-on .phero-side{width:auto;flex-wrap:wrap;margin-right:var(--dyc-side)}
  html.dyc-on .phero-side .btn{flex:none}
}
/* 위 두 묶음에서 글과 단추가 한 줄일 때: 단추를 내리기 전에 글 칸을 20em까지 먼저 좁힘 (단추가 내려가면 첫 화면 밖으로 밀림) */
@media (min-width:641px) and (max-height:624px){ html.dyc-on .hero-row p{flex:1 1 20em} }
@media (min-width:641px) and (max-height:552px){ html.dyc-on .phero-row p{flex:1 1 20em} }
/* 세로 휴대폰 메인: 화면이 머리 사진 최소 높이(600px)보다 낮으면 모자란 만큼 단추를 더 올림 (글이 머리글에 닿지 않게 360px 이상 최대 80px, 그 미만 최대 48px).
   높이 조건 대신 100svh로 계산함 — 아이폰은 주소창이 접힐 때 높이 조건이 바뀌어 글이 튐 */
@media (min-width:360px) and (max-width:640px) and (orientation:portrait){ html.dyc-on .hero-in{padding-bottom:calc(var(--dyc-clear) + 12px + clamp(0px, 600px - calc(100svh / var(--z)), 80px))} }
@media (max-width:359px) and (orientation:portrait){ html.dyc-on .hero-in{padding-bottom:calc(var(--dyc-clear) + 12px + clamp(0px, 600px - calc(100svh / var(--z)), 48px))} }
/* 세로 휴대폰 하위 페이지: 한 개짜리 단추가 버튼 자리에 오는 화면 높이(440~588px)에서만 버튼 폭만큼 짧게 */
@media (max-width:640px) and (orientation:portrait){ html.dyc-on .phero-side > .btn:only-child{margin-right:min(var(--dyc-side), max(0px, (calc(100svh / var(--z)) - 439px) * 999), max(0px, (589px - calc(100svh / var(--z))) * 999))} }
html.dyc-on .toast{bottom:var(--dyc-clear)}                                        /* 알림은 버튼 위로 */
/* 떠 있는 대화창(폭 400px, 폭 641px · 높이 521px 이상)이 열려 있는 동안: 가운데 알림이 창의 입력 칸을 덮지 않게 창 왼쪽 빈 자리의 가운데로 옮김 */
@media (min-width:641px) and (max-width:1199px) and (min-height:521px){ html.dyc-on.dyc-open .toast{left:calc((100% - 400px - max(20px, var(--edge))) / 2);max-width:calc(100% - 432px - max(20px, var(--edge)))} }
html.dyc-on.menu-open #dyc-launcher,html.dyc-on.menu-open #dyc-panel{display:none !important}   /* 모바일 메뉴(d3.js가 html에 menu-open)가 열린 동안 숨김 */

/* ===== 회사 로고 마크·Dow 표기 (10-18 사용자 결정) =====
   DY 마크는 글자 왼쪽, 글자 높이에 맞춰 가운데. Dow는 가이드 형식(다이아몬드 | Authorized Distributor), 우리 로고보다 작게 */
.logo-mark{height:24px;width:auto;display:block;align-self:center;flex:none}
.dowlock{display:flex;align-items:center;gap:10px;white-space:nowrap}
.dowlock img{height:20px;width:auto;display:block}
.dowlock .bar{width:1px;height:22px;background:rgba(237,237,237,.55)}
.dowlock .desc{font-family:Arial,"Helvetica Neue",sans-serif;font-size:10.5px;line-height:1.2;letter-spacing:.02em;color:var(--fg);font-weight:400}
.partner .dowlock{gap:10px}
.mnav-foot .mnav-dow{margin-bottom:10px}
.ftr-dow{display:flex;margin-top:24px}
/* 휴대폰: 마크를 넣은 만큼 머리글의 작은 영문 이름을 뺀다 (390px에서 메뉴 버튼이 밀려나던 것) */
@media (max-width:520px){ .hdr .logo span{display:none} .logo-mark{height:20px} }
@media (max-width:340px){ .hdr .logo-mark{display:none} }

/* ===== 주요 고객사 격자를 부드럽게 (10-19 사용자 요청: 표처럼 딱딱해 보임) =====
   선으로 붙은 표 → 띄어 놓은 둥근 타일. 제품 쪽 PSA 묶음(.clist.gset)은 그대로 */
.clist:not(.gset){gap:12px;background:none;border:0}
.clist:not(.gset) li{background:none}
.clist:not(.gset) a,.clist:not(.gset) .nolink{min-height:76px;padding:18px 20px 18px 22px;border-radius:16px;
  background:var(--tile);border:1px solid var(--tile-line);
  font-weight:500;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s,box-shadow .3s}
.clist:not(.gset) .ext{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--tile-chip);opacity:.7}
@media (hover:hover){
  .clist:not(.gset) a:hover{transform:translateY(-3px);background:var(--tile-hover);
    border-color:var(--tile-line-hover);box-shadow:var(--tile-shadow);color:var(--hi)}
  .clist:not(.gset) a:hover .ext{background:var(--accent);color:var(--hi);opacity:1}
}
.clist:not(.gset) a:focus-visible{background:var(--tile-hover);border-color:var(--accent);color:var(--hi);outline-offset:2px}
@media (max-width:767px){
  .clist:not(.gset){gap:8px}
  .clist:not(.gset) a,.clist:not(.gset) .nolink{min-height:60px;padding:14px 12px 14px 16px;border-radius:14px}
  .clist:not(.gset) .ext{width:24px;height:24px;padding:5px}
}
@media (prefers-reduced-motion:reduce){ .clist:not(.gset) a{transition:none} .clist:not(.gset) a:hover{transform:none} }


/* ===== 밝은 화면 (10-19 사용자 요청: "화면이 어둡다" → 머리글 단추로 밝은/어두운 화면 전환, 처음 방문은 밝은 화면) =====
   html[data-theme="light"]일 때 색 토큰만 바꾼다. 사진 위에 글이 얹히는 곳(첫 화면·페이지 머리·문의 띠·본사 사진·산업 카드·사진 설명)과
   사진 위에 떠 있는 머리글은 사진이 어두우므로 어두운 화면 색을 그대로 쓴다 (.dark-scope 목록). */
html[data-theme="light"]{
  --bg:#F5F6F8; --bg2:#FFFFFF; --bg3:#ECEEF2; --fg:#16181C; --mute:#5A6068;
  --line:rgba(22,24,28,.12); --line2:rgba(22,24,28,.24); --accent:#5B4BD6;
  --fg2:#23262B; --fg3:#3A3F46; --nav:#2A2E34; --hi:#000; --mute2:#6A7078; --mute3:#8A9097;
  --hdr-bg:rgba(255,255,255,.9); --bar-bg:rgba(255,255,255,.92); --soft:rgba(22,24,28,.03);
  --tile:linear-gradient(180deg,#fff,#fbfbfc); --tile-line:rgba(22,24,28,.1); --tile-chip:rgba(22,24,28,.06);
  --tile-hover:#fff; --tile-line-hover:rgba(22,24,28,.2); --tile-shadow:0 10px 26px rgba(22,24,28,.1);
  --map-lead:rgba(22,24,28,.34); --map-tip:rgba(22,24,28,.55);
  color-scheme:light;
}
html[data-theme="light"] :is(.phero,.cta,figure.hq,.ind,.story-media,.media.over figcaption,.gallery figcaption,body:not(.page-index) .hdr:not(.solid)){
  --bg:#0C0D0F; --bg2:#1A1C20; --bg3:#23262B; --fg:#EDEDED; --mute:#9AA0A6;
  --line:rgba(237,237,237,.12); --line2:rgba(237,237,237,.22); --accent:#8B7CFF;
  --fg2:#DADDE0; --fg3:#C4C8CC; --nav:#D5D8DB; --hi:#fff; --mute2:#868C92; --mute3:#61676D;
  color:var(--fg);
}
/* 밝은 머리글(스크롤해서 흰 띠가 된 뒤)에서는 흰 DY 마크를 진하게 */
html[data-theme="light"] .hdr.solid .logo-mark,html[data-theme="light"] .ftr .logo-mark,html[data-theme="light"] .mnav .logo-mark{filter:brightness(0)}
html[data-theme="light"] .hdr.solid .dowlock .bar,html[data-theme="light"] .ftr .dowlock .bar,html[data-theme="light"] .mnav .dowlock .bar{background:rgba(22,24,28,.4)}
html[data-theme="light"] .hdr.solid .dowlock .desc,html[data-theme="light"] .ftr .dowlock .desc,html[data-theme="light"] .mnav .dowlock .desc{color:var(--fg)}
/* 점 세계지도: 밝은 바탕에서는 점을 옅게 뒤집는다 */
html[data-theme="light"] .gmap-svg image{filter:invert(1) hue-rotate(180deg) brightness(.84)}   /* 10-24 B안: 점 크게(svg 3.3)·진하게 */
html[data-theme="light"] .grain::after{opacity:.04}
html[data-theme="light"] .ftr{background:#ECEEF2}

/* 화면 밝기 전환 단추 (머리글 KO/EN 왼쪽) */
.theme-btn{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line2);color:var(--fg);transition:background .25s,border-color .25s}
.theme-btn svg{width:18px;height:18px}
.theme-btn .ic-sun{display:none}
html[data-theme="light"] .theme-btn .ic-sun{display:block}
html[data-theme="light"] .theme-btn .ic-moon{display:none}
@media (hover:hover){ .theme-btn:hover{border-color:var(--fg)} }
@media (max-width:1023px){ .theme-btn{width:36px;height:36px;margin-left:auto} .theme-btn + .lang{margin-left:-6px} }
@media (max-width:359px){ .theme-btn{width:32px;height:32px} .theme-btn svg{width:16px;height:16px} }
/* 479px 이하: 머리글에는 전환 단추를 숨기고 휴대폰 메뉴 아래쪽에 글자와 함께 둔다 (영문 로고가 길어 햄버거가 밀려나지 않게) */
.theme-btn-menu{display:none}
@media (max-width:479px){
  .hdr .theme-btn{display:none} .hdr .theme-btn + .lang{margin-left:auto}
  .theme-btn-menu{display:inline-flex;align-items:center;gap:10px;width:auto;height:44px;padding:0 16px;border-radius:999px;justify-self:start;margin:4px 0 10px;font-size:14px;font-weight:600}
}
/* 영문 머리글은 회사 이름이 길어 389px 이하에서 DY 마크를 숨긴다 (360px에서 햄버거가 5px 밀려나던 것) */
@media (max-width:389px){ .lang-en .hdr .logo-mark{display:none} }

/* 첫 화면(메인 히어로)도 밝은 화면에서 밝게 (10-19 사용자 요청) — 검은 실리콘 사진을 흑백 반전해 은빛 실리콘으로, 덮는 색도 밝게.
   다른 페이지의 머리 사진은 사진 자체가 어두워 그대로 둔다 */
html[data-theme="light"] .hero{background:#EEF0F3}
html[data-theme="light"] .hero-img img{filter:invert(1) grayscale(1) brightness(1.04) contrast(.92)}
html[data-theme="light"] .hero::before{background:
  linear-gradient(180deg,rgba(245,246,248,.7) 0%,rgba(245,246,248,0) 22%,rgba(245,246,248,0) 45%,rgba(245,246,248,.82) 78%,var(--bg) 100%),
  linear-gradient(90deg,rgba(245,246,248,.72) 0%,rgba(245,246,248,0) 60%)}
html[data-theme="light"] .hero.grain::after{opacity:.05;mix-blend-mode:multiply}
html[data-theme="light"] .hero .btn-line{background:rgba(255,255,255,.55)}
html[data-theme="light"] .page-index .hdr:not(.solid) .logo-mark{filter:brightness(0)}
html[data-theme="light"] .page-index .hdr:not(.solid) .dowlock .bar{background:rgba(22,24,28,.4)}
html[data-theme="light"] .page-index .hdr:not(.solid) .dowlock .desc{color:var(--fg)}
/* 영문 머리글: 전환 단추가 들어가 자리가 모자라므로 Dow 표기는 1520px 이하에서 숨김 (메뉴 바로 아래 히어로·바닥글·휴대폰 메뉴에는 그대로) */
@media (max-width:1520px){ .lang-en .partner{display:none} }
/* 1024~1180px: 전환 단추 자리를 위해 머리글의 문의하기 단추를 숨긴다 (메뉴의 문의·히어로 단추는 그대로) */
@media (min-width:1024px) and (max-width:1180px){ .hdr-side{display:none} }

/* 영문 머리글 여유(10-21 확대·축소 검사): 메뉴 이름이 길어 1024~1048 · 1184~1196 · 1244~1272px에서 오른쪽 여백이 12~38px로 좁아지던 구간 */
@media (min-width:1024px) and (max-width:1060px){ .lang-en .gnb{gap:18px} }
@media (min-width:1181px) and (max-width:1200px){ .lang-en .hdr-side{display:none} }
@media (min-width:1241px) and (max-width:1300px){ .lang-en .gnb{gap:24px} }

/* ===== 주요 고객사 전광판 (10-22 사용자 요청: 고정 목록 → 옆으로 흐르는 띠) =====
   d3.js가 목록을 한 번 더 붙이고 .on을 달면 흐름. 스크립트가 없거나 움직임 줄이기 설정이면 타일이 줄 바꿈으로 고정 */
.cust-h:has(.cmq-btn){justify-content:flex-start}
.cust-h:has(.cmq-btn) p{margin-left:auto}
.cmq-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 11px;border-radius:999px;
  border:1px solid var(--tile-line);background:var(--tile);color:var(--fg2);font:inherit;font-size:13.5px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s}
.cmq-btn[hidden]{display:none}
.cmq-btn svg{width:14px;height:14px}
.cmq-btn .i-play{display:none}
.cmq-btn[aria-pressed="true"] .i-play{display:block}
.cmq-btn[aria-pressed="true"] .i-pause{display:none}
.cmq-btn:hover,.cmq-btn:focus-visible{border-color:var(--accent);color:var(--hi)}
.cmq-view{overflow:hidden}
.cmq-track{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.cmq-track li{display:flex}
.cmq-track a{display:flex;align-items:center;gap:14px;white-space:nowrap;height:72px;padding:0 18px 0 28px;border-radius:999px;
  background:var(--tile);border:1px solid var(--tile-line);color:var(--fg);font-size:clamp(17px,calc(1.35vw / var(--z)),21px);
  font-weight:600;letter-spacing:-.02em;transition:border-color .3s,background .3s,color .3s}
.cmq-track .ext{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:var(--tile-chip);color:var(--mute);opacity:.7;
  transition:background .3s,color .3s,opacity .3s}
.cmq-track a:hover,.cmq-track a:focus-visible{background:var(--tile-hover);border-color:var(--tile-line-hover);color:var(--hi)}
.cmq-track a:hover .ext,.cmq-track a:focus-visible .ext{background:var(--accent);color:var(--hi);opacity:1}
.cmq-track a:focus-visible{border-color:var(--accent);outline-offset:-3px}
/* 흐르는 상태: 한 줄, 같은 목록 두 벌을 -50%만큼 밀어 끊김 없이 돌림. 간격은 gap 대신 오른쪽 여백(정확히 반바퀴가 되도록) */
.cmq.on .cmq-view{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cmq.on .cmq-track{flex-wrap:nowrap;gap:0;width:max-content;animation:cmq var(--cmq-dur,70s) linear infinite}
.cmq.on .cmq-track li{padding-right:12px}
.cmq.on:hover .cmq-track,.cmq.on:focus-within .cmq-track,.cmq.on.paused .cmq-track{animation-play-state:paused}
@keyframes cmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:767px){
  .cmq-track{gap:8px}
  .cmq.on .cmq-track li{padding-right:8px}
  .cmq-track a{height:56px;padding:0 12px 0 20px;gap:10px;font-size:16px}
  .cmq-track .ext{width:24px;height:24px;padding:5px}
  .cust-h:has(.cmq-btn) p{margin-left:0;flex:1 1 100%;order:3}
  .cmq-btn{margin-left:auto}
}
@media (prefers-reduced-motion:reduce){ .cmq.on .cmq-track{animation:none} }

/* ----- 전광판 로고 (10-22): 각 회사 공식 홈페이지의 로고 파일. 색이 제각각이라 한 가지 톤으로 맞춤
   어두운 화면 = 흰 실루엣, 밝은 화면 = 회색 → 마우스를 올리면 원래 색(흰색뿐인 로고 .mono는 진한 실루엣 유지) */
.cmq-logo{flex:none;display:block;height:26px;width:auto;max-width:132px;object-fit:contain;
  filter:brightness(0) invert(1);opacity:.62;transition:opacity .3s,filter .3s}
.cmq-track a:hover .cmq-logo,.cmq-track a:focus-visible .cmq-logo{opacity:1}
.cmq-track a span{font-size:.82em;font-weight:500;color:var(--mute);transition:color .3s}
.cmq-track a:hover span,.cmq-track a:focus-visible span{color:var(--fg)}
html[data-theme="light"] .cmq-logo{filter:grayscale(1);opacity:.6}
html[data-theme="light"] .cmq-logo.mono{filter:brightness(0);opacity:.55}
html[data-theme="light"] .cmq-track a:hover .cmq-logo:not(.mono),html[data-theme="light"] .cmq-track a:focus-visible .cmq-logo:not(.mono){filter:none;opacity:1}
html[data-theme="light"] .cmq-track a:hover .cmq-logo.mono{opacity:.9}
@media (max-width:767px){ .cmq-logo{height:20px;max-width:100px} }


/* ----- 회사소개 고객사 두 줄 전광판 (10-22): 아랫줄은 반대 방향 ----- */
.cmq-rows{display:flex;flex-direction:column;gap:12px}
.cmq.on.rev .cmq-track{animation-direction:reverse}
.sec-head .cmq-btn{flex:none}
@media (max-width:767px){ .cmq-rows{gap:8px} }

/* ===== 버튼 모서리 둥글게 (10-22 사용자 요청: 직사각형이라 딱딱해 보임) ===== */
.btn{border-radius:999px}
.cta-act .btn + .btn{margin-left:10px}
@media (max-width:767px){ .cta-act .btn + .btn{margin-left:0} }

/* ===== 고객사 성장 (10-23): 누적 고객사 막대 + 숫자 카드 (회사소개 주요 고객사 안, 전광판 위) =====
   막대는 화면에 들어오면 차례로 자람. 오래된 해일수록 옅고 최근일수록 진함 */
.cgrow{margin-bottom:clamp(48px,calc(5vw / var(--z)),80px)}
.cg-h{font-size:clamp(22px,calc(2.1vw / var(--z)),32px);font-weight:600;letter-spacing:-.03em;line-height:1.4;color:var(--fg);margin:0 0 28px}
.cg-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px}
.cg-chart{margin:0;padding:26px 28px 20px;border-radius:20px;background:var(--tile);border:1px solid var(--tile-line);display:flex;flex-direction:column}
.cg-chart figcaption{font-size:14px;font-weight:600;color:var(--fg2)}
.cg-bars{list-style:none;margin:0;padding:34px 0 0;flex:1;min-height:260px;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(6px,1vw,14px);align-items:end;
  border-bottom:1px solid var(--line2)}
.cg-bars li{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.cg-bars i{display:block;width:100%;max-width:46px;height:calc(var(--h) * 1%);border-radius:8px 8px 3px 3px;
  background:var(--fg);opacity:calc(.12 + var(--i) * .07);transform-origin:bottom;transform:scaleY(0);
  transition:transform 1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * .08s)}
.cg-bars li:last-child i{opacity:1;background:var(--accent)}
.cg-bars b{position:absolute;top:100%;margin-top:10px;font-size:12.5px;font-weight:500;color:var(--mute)}
.cg-bars li:last-child b{color:var(--fg);font-weight:700}
.cg-v{position:absolute;bottom:calc(var(--h) * 1% + 8px);font-size:17px;font-weight:700;color:var(--fg);opacity:0;transition:opacity .5s ease 1s}
.cg-chart.in .cg-bars i{transform:none}
.cg-chart.in .cg-v{opacity:1}
.cg-chart{padding-bottom:44px}
.cg-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cg-stat{padding:22px 22px 20px;border-radius:20px;background:var(--tile);border:1px solid var(--tile-line);display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.cg-stat strong{font-size:clamp(26px,calc(2.4vw / var(--z)),38px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--fg)}
.cg-stat strong small{font-size:.55em;font-weight:600;margin-left:2px}
.cg-stat p{font-size:14px;line-height:1.5;color:var(--fg2);margin:0}
.cg-stat.main{grid-column:1 / -1;background:var(--fg);border-color:transparent}
.cg-stat.main strong,.cg-stat.main p{color:var(--bg)}
.cg-stat.main strong{font-size:clamp(40px,calc(4vw / var(--z)),60px)}
.cg-note{margin:14px 0 0;font-size:12.5px;color:var(--mute)}
@media (max-width:899px){ .cg-body{grid-template-columns:minmax(0,1fr)} }
@media (max-width:767px){
  .cg-chart{padding:20px 16px 40px;border-radius:16px}
  .cg-bars{min-height:200px;padding-top:30px}
  .cg-bars b{font-size:11px}
  .cg-stat{padding:18px 16px;border-radius:16px}
  .cg-stat p{font-size:13px}
}
@media (prefers-reduced-motion:reduce){ .cg-bars i{transition:none;transform:none} .cg-v{opacity:1;transition:none} }
.no-js .cg-bars i,html:not(.js) .cg-bars i{transform:none}
html:not(.js) .cg-v{opacity:1}
/* 작은 숫자 카드 3개는 한 줄씩(숫자 왼쪽, 설명 오른쪽) — 2칸이면 하나가 혼자 남음 */
.cg-stats{grid-template-columns:minmax(0,1fr);gap:10px}
.cg-stat:not(.main){flex-direction:row;align-items:center;justify-content:flex-start;gap:18px;padding:16px 22px}
.cg-stat:not(.main) strong{flex:none;min-width:5.2em;font-size:clamp(24px,calc(2vw / var(--z)),30px)}
.lang-en .cg-stat:not(.main) strong{min-width:3.6em}
.cg-stat.main{padding:24px 26px}
@media (max-width:767px){ .cg-stat:not(.main){padding:14px 16px;gap:14px} .cg-stat:not(.main) strong{min-width:4.6em} }

/* ----- 평택 본사 외관 띠 (10-23): 실내 사진 3장 위. 휴대폰은 세로로 자른 사본 ----- */
.hq-ext{position:relative;margin:0 0 clamp(8px,calc(1vw / var(--z)),16px);overflow:hidden;background:var(--bg2);aspect-ratio:1920 / 640}
.hq-ext img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 60%;filter:saturate(.85) contrast(1.04)}
.hq-ext figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 20px 16px;font-size:13.5px;line-height:1.5;color:var(--nav);background:linear-gradient(0deg,rgba(12,13,15,.86),rgba(12,13,15,0));font-weight:500}
@media (max-width:640px){ .hq-ext{aspect-ratio:4 / 3} }

/* ===== 10-24 사용자 결정(C안): 작은 보라 사각형 표시를 모두 없앰 =====
   머리 문구·위치 표시·연혁 '지금'·안내 상자·알림은 표시 없이 글자만.
   모바일 메뉴의 지금 페이지는 글자를 보라색으로 + 오른쪽 › */
.hero-eyebrow i{display:none}
.crumb::before,.notice-t::before,.toast::before,.tl.now .tl-y::after{content:none}
.mnav li a[aria-current="page"]{color:var(--accent)}
.mnav li a[aria-current="page"]::after{content:"";flex:none;width:8px;height:8px;background:none;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:4px}
/* 10-24 B안 (어두운 화면): 점을 키운 만큼 밝은 화면과 같은 정도로 또렷하게 */
html:not([data-theme="light"]) .gmap-svg image{filter:brightness(1.2)}

/* ===== 10-24 머리글 하위 메뉴 (3차): 상자·배경 없이 글자만, 위쪽 메뉴 바로 밑 한 줄로 가로로 펼쳐짐
   - 열고 닫기는 d3.js(.open, 닫을 때 0.35초 여유). 하위 줄의 투명한 띠는 위쪽 메뉴 줄 전체 폭이라 비스듬히 내려가도 끊기지 않음
   - 글자 줄(ul)은 그 메뉴 밑에서 시작(d3.js가 margin-left 계산), 화면 오른쪽을 넘지 않게 당김
   - 사진 위(투명 머리글)에서는 글자만. 불투명 머리글이면 머리글 바탕이 아래로 늘어남(따로 상자 없음) */
.gnb{align-items:center;position:relative}
.gnb-item{position:static;display:flex;align-items:center;height:var(--hdr)}
.gnb-sub{position:absolute;top:calc(var(--hdr) - 6px);left:0;right:0;padding:4px 0 16px;visibility:hidden;opacity:0;transition:opacity .25s,visibility 0s linear .5s;z-index:5}
.gnb-sub ul{list-style:none;margin:0;padding:0;display:inline-flex;gap:30px;clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)}
.gnb .gnb-sub a{position:relative;display:block;padding:8px 0;font-size:14px;font-weight:500;color:var(--nav);opacity:.8;white-space:nowrap;text-shadow:0 1px 10px rgba(0,0,0,.35);transition:opacity .2s,color .2s}
html[data-theme="light"] .gnb .gnb-sub a{text-shadow:0 1px 8px rgba(255,255,255,.7)}
.gnb .gnb-sub a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.gnb .gnb-sub a:hover,.gnb .gnb-sub a:focus-visible{opacity:1;color:var(--hi)}
.gnb .gnb-sub a:hover::after,.gnb .gnb-sub a:focus-visible::after{transform:scaleX(1)}
.gnb-item.open>.gnb-sub{visibility:visible;opacity:1;transition:opacity .25s,visibility 0s}
.gnb-item.open>.gnb-sub ul{clip-path:inset(0 0 0 0)}
.gnb-item.open>a::after{transform:scaleX(1)}
.hdr{transition:background .4s,border-color .4s,backdrop-filter .4s,height .45s var(--ease)}
.hdr-in{height:var(--hdr)}
@media (min-width:1024px){
  .hdr.solid:has(.gnb-item.open){height:calc(var(--hdr) + 46px)}
  .hdr.solid .gnb .gnb-sub a{text-shadow:none}
}
@media (prefers-reduced-motion:reduce){ .gnb-sub,.gnb-sub ul,.hdr{transition:none} }

/* ===== 10-24 모바일 메뉴: 위쪽 메뉴를 누르면 하위 메뉴가 그 밑으로 슥 펼쳐짐 ===== */
.mnav .mn-top{display:flex;width:100%;justify-content:space-between;align-items:center;padding:18px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--fg);font:inherit;font-size:26px;font-weight:600;letter-spacing:-.02em;text-align:left;cursor:pointer}
.mnav .mn-top.cur{color:var(--accent)}
.mnav .mn-top i{flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .35s var(--ease);opacity:.7}
.mnav .mn-top[aria-expanded="true"] i{transform:rotate(-135deg) translate(-2px,-2px)}
.mnav .mn-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.mnav .mn-top[aria-expanded="true"] + .mn-sub{grid-template-rows:1fr}
.mnav .mn-sub > ul{overflow:hidden;min-height:0;border-top:0;padding:0}
.mnav .mn-top[aria-expanded="true"] + .mn-sub > ul{padding:6px 0 14px;border-bottom:1px solid var(--line)}
.mnav .mn-sub li a{display:block;padding:10px 0 10px 16px;border-bottom:0;font-size:17px;font-weight:500;letter-spacing:0;color:var(--fg3,var(--mute))}
.mnav .mn-sub li a::after{content:none}
.mnav .mn-sub li a:hover,.mnav .mn-sub li a:focus-visible{color:var(--hi)}
.mnav .mn-sub li:first-child a{color:var(--fg);font-weight:600}
@media (prefers-reduced-motion:reduce){ .mnav .mn-sub,.mnav .mn-top i{transition:none} }

/* ===== 10-24 기술자료: 제품군 카드(전체 보기) + 묶음 제목 접기 ===== */
[data-collapse]:not(.overview) .fam-cards{display:none}
[data-collapse].overview table{display:none}
.fam-cards{list-style:none;margin:8px 0 40px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px}
.fam-card{display:flex;flex-direction:column;gap:10px;width:100%;height:100%;padding:24px 0 28px;border:0;border-top:1px solid var(--line2);background:none;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:border-color .3s}
.fam-card .fc-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fam-card b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.fam-card .fc-n{font-size:15px;color:var(--mute)}
.fam-card .fc-n::after{content:"종"}
html[lang="en"] .fam-card .fc-n::after{content:""}
.fam-card .fc-s{font-size:14px;line-height:1.65;color:var(--mute)}
.fam-card:hover,.fam-card:focus-visible{border-top-color:var(--accent)}
.fam-card:hover b,.fam-card:focus-visible b{color:var(--hi)}
@media (max-width:1023px){ .fam-cards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .fam-cards{grid-template-columns:1fr} .fam-card{padding:18px 0 20px} }
[data-collapse] tbody.shut tr:not(.grp){display:none}
[data-collapse] .grp-tg{display:flex;width:100%;align-items:center;gap:10px;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
[data-collapse] .grp-tg small{margin-left:4px}
[data-collapse] .grp-tg i{margin-left:auto;flex:none;width:8px;height:8px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-135deg);transition:transform .3s var(--ease);opacity:.6}
[data-collapse] tbody.shut .grp-tg i{transform:rotate(45deg)}
[data-collapse] .grp-tg:hover{color:var(--hi)}