@font-face{font-family:Amp;src:local('Helvetica Neue'),local('Helvetica'),local('Arial'),local('Roboto');font-weight:400 500;unicode-range:U+26}
@font-face{font-family:Amp;src:local('Helvetica Neue Bold'),local('Helvetica-Bold'),local('Arial Bold'),local('Roboto Bold');font-weight:600 900;unicode-range:U+26}
:root{
  --bg:#FFFFFF;
  --bg-2:#F2F5F6;
  --bg-3:#E6EBED;
  --line:#DCE2E4;
  --line-soft:#EBEFF1;
  --fg:#0F1518;
  --fg-2:#2A343A;
  --muted:#5A6871;
  --muted-2:#8A959C;
  --accent:#0E7A80;
  --accent-2:#0B646A;
  --accent-soft:#E2F0F1;
  --side:280px;
  --r:3px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:Amp,'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------- 좌측 고정 사이드바 ---------- */
aside.side{
  position:fixed;top:0;left:0;bottom:0;width:var(--side);z-index:70;
  background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;padding:30px 26px;
}
.side .logo{text-decoration:none;display:flex;align-items:center;gap:10px}
.side .logo .mark{width:40px;height:40px;flex:none}
.side .logo .lt{display:block;text-align:center}
.side .logo b{display:block;font-size:23px;font-weight:800;letter-spacing:.015em;line-height:1}   /* 10/14 회장님: 두 줄 높이 = 엠블럼 높이. 10/15 장도: 줄 간격 좁힘 → 엠블럼 40px로 맞춤(잉크 중심 차 0.5px) */
.side .logo .lt span{display:block;font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;color:var(--muted);margin-top:5px;line-height:1;text-transform:uppercase}
.side nav{margin-top:44px;display:flex;flex-direction:column;gap:2px;position:relative}
.side nav a{
  display:flex;align-items:baseline;gap:11px;text-decoration:none;padding:9px 0;
  font-size:14.5px;font-weight:500;color:var(--fg-2);transition:color .18s}
.side nav a i{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:10.5px;color:var(--muted-2);transition:color .18s}
.side nav a:hover,.side nav a.on{color:var(--accent)}
.side nav a:hover i,.side nav a.on i{color:var(--accent)}
/* 제품 분류표 — 부문 > 중분류 (좌측 메뉴 PC · 하단 시트 폰) */
aside.side>div:first-child{flex:1;min-height:0;display:flex;flex-direction:column;margin-bottom:18px}
.side nav{min-height:0}
.ptree{flex:none;overflow:visible}   /* 10/31 장도: 부문 7개뿐 — 롤오버 때 가로·세로 스크롤 생겨 스크롤 영역 제거 */
.side nav>a:not(.on)+.ptree{display:none}   /* 10/31 장도: 분류표는 Products가 선택됐을 때만 */
.ptree,.psheet{display:flex;flex-direction:column;border-left:1px solid var(--line);margin:0 0 8px 4px}
.ptree .pt>a,.ptree summary>a,.psheet .pt>a,.psheet summary>a{display:flex;justify-content:space-between;gap:8px;flex:1;
  padding:3px 0 3px 14px;text-decoration:none;font-size:13px;color:var(--fg-2);transition:color .18s}
.ptree a i,.psheet a i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted-2);padding-top:2px}
.ptree summary,.psheet summary{display:flex;align-items:center;list-style:none;cursor:pointer}
.ptree summary::-webkit-details-marker,.psheet summary::-webkit-details-marker{display:none}
.ptree summary::after,.psheet summary::after{content:"";width:6px;height:6px;margin:0 2px 0 10px;border:solid var(--muted-2);
  border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .2s}
.ptree details[open]>summary::after,.psheet details[open]>summary::after{transform:rotate(45deg)}
.ptree ul,.psheet ul{list-style:none;margin:0 0 4px;padding:0 0 0 24px}
.ptree li a,.psheet li a{display:block;padding:2px 0;text-decoration:none;font-size:12.5px;color:var(--muted);transition:color .18s}
.ptree a:hover,.psheet a:hover,.ptree .on>a,.ptree .on>summary>a,.psheet .on>a,.psheet .on>summary>a,.ptree li a.on,.psheet li a.on{color:var(--accent)}
.ptree .on>a,.ptree .on>summary>a,.psheet .on>a,.psheet .on>summary>a{font-weight:600}
.psheet{display:none}
/* 메뉴 모션 — 계기판 바늘처럼 움직이는 표시 막대 하나. 마우스 위치로 미끄러지고 떼면 현재 위치로 돌아온다(site.js) */
.ptree{position:relative}
.side nav>a,.ptree .pt>a,.ptree li a{transition:color .15s,transform .2s cubic-bezier(.16,1,.3,1)}
.side nav>a:hover{transform:translateX(3px)}
.ptree .pt>a:hover,.ptree li a:hover{transform:translateX(3px)}
.ind{position:absolute;left:0;top:0;width:2px;height:0;background:var(--accent);border-radius:1px;pointer-events:none;opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1),height .32s cubic-bezier(.16,1,.3,1),opacity .2s}
.ind.show{opacity:1}
.side nav>.ind{left:-26px;width:3px;border-radius:0 2px 2px 0}   /* 사이드바 왼쪽 끝에 붙는다 */
.ptree>.ind{left:-1px}                                            /* 분류표 세로선 위를 달린다 */
.ind.draw{animation:inddraw .45s cubic-bezier(.16,1,.3,1) both}
@keyframes inddraw{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
.ptree.enter li{animation:subin .36s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i) * 28ms + 80ms)}
@keyframes subin{from{opacity:0;transform:translateX(-6px)}}
@media (prefers-reduced-motion:reduce){
  .ind,.side nav>a,.ptree a{transition:none}
  .ind.draw,.ptree.enter li{animation:none}
  .side nav>a:hover,.ptree a:hover{transform:none}
}
/* 낮은 화면: 분류표가 펼쳐져도 메뉴 5개가 다 보이게 — 사이드 하단 연락처를 접는다 */
@media (min-width:901px) and (max-height:860px){
  .side nav{margin-top:28px}
  .side nav>a{padding:6px 0}
  .side .foot>.k,.side .foot>a:not(.cta),.side .foot>br{display:none}
  .side .cta{margin-top:12px;padding:10px}
}
.side .foot{font-size:12.5px;line-height:1.75;color:var(--muted)}
.side .foot .k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}
.side .foot a{text-decoration:none}
.side .foot a:hover{color:var(--accent)}
.side .cta{display:block;margin-top:18px;background:var(--accent);color:#fff;text-align:center;
  text-decoration:none;padding:12px;border-radius:var(--r);font-size:13.5px;font-weight:600;transition:background .18s}
.side .cta:hover{background:var(--accent-2)}

/* 모바일 상단바 */
.mtop{display:none;position:sticky;top:0;z-index:70;background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:14px 20px;
  align-items:center;justify-content:space-between}
.mlogo{display:flex;align-items:center;gap:7px;text-decoration:none;color:inherit}
.mtop b{font-size:16px;font-weight:800;letter-spacing:.06em}
.mtop button{background:none;border:1px solid var(--line);border-radius:var(--r);padding:7px 11px;font:inherit;font-size:11px;letter-spacing:.08em;cursor:pointer}
.mnav{display:none}

/* ---------- 본문 ---------- */
main{margin-left:var(--side)}
.pad{padding:0 56px}
section{padding:104px 0}
section.tight{padding-top:0}
#products{padding-bottom:0}

.shead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:52px;align-items:end;margin-bottom:46px}
.shead .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:15px}
.shead h2{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0;text-wrap:balance}
.shead p{margin:0;font-size:15.5px;line-height:1.75;color:var(--muted)}

/* ---------- 히어로 ---------- */
.hero{position:relative;height:min(92vh,760px);overflow:hidden;background:var(--bg-3)}
.hero .plate{
  position:absolute;left:56px;bottom:56px;max-width:640px;background:var(--bg);
  border-radius:var(--r);padding:40px 42px 36px;box-shadow:0 18px 50px rgba(15,21,24,.16)}
.hero .plate .k{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.hero .plate h1{font-size:clamp(30px,3.6vw,50px);font-weight:800;letter-spacing:-.035em;line-height:1.06;margin:0 0 18px}
.hero .plate p{margin:0 0 26px;font-size:15.5px;line-height:1.72;color:var(--muted)}
.hero .plate .row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-size:14px;font-weight:600;padding:13px 24px;border-radius:var(--r);transition:background .18s,border-color .18s,color .18s}
.btn-p{background:var(--accent);color:#fff}
.btn-p:hover{background:var(--accent-2)}
.btn-s{border:1px solid var(--line);color:var(--fg-2)}
.btn-s:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- 팩트 바 ---------- */
.bar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.bar .in{display:grid;grid-template-columns:repeat(5,1fr)}
.bar .c{padding:26px 24px 26px 0;border-right:1px solid var(--line-soft)}
.bar .c:last-child{border-right:0}
.bar .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2);margin-bottom:9px}
.bar .v{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bar .s{font-size:13.5px;color:var(--fg-2);margin-top:4px}

/* ---------- 제품 타일 ---------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.tile{position:relative;display:flex;flex-direction:column;text-decoration:none;background:var(--bg);overflow:hidden}
.tile .ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--bg-3)}
.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.tile:hover .ph img,.tile.act .ph img{transform:scale(1.05)}
.tile .no{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;padding:5px 9px;border-radius:2px;color:var(--accent)}
.tile .bd{flex:1;display:flex;flex-direction:column;padding:22px 24px 26px;border-top:1px solid var(--line-soft)}
.tile h3{margin:0 0 9px;font-size:18px;font-weight:700;letter-spacing:-.015em;transition:color .2s}
.tile:hover h3,.tile.act h3{color:var(--accent)}
.tile p{margin:0;font-size:13.5px;line-height:1.7;color:var(--muted)}
.tile .cnt{margin-top:auto;padding-top:13px;border-top:1px solid var(--line-soft);
  display:flex;justify-content:space-between;align-items:center;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--muted-2)}
.tile:hover .cnt,.tile.act .cnt{color:var(--accent)}

/* ---------- 규격 ---------- */
.spec{border-top:1px solid var(--line)}
.srow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr) minmax(0,.75fr);gap:34px;
  padding:28px 0;border-bottom:1px solid var(--line);align-items:start}
.srow h3{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.srow p{margin:0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.srow .m{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--accent);line-height:1.7}
.callout{margin-top:32px;background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:20px 24px;font-size:13.5px;line-height:1.8;color:var(--fg-2);border-radius:0 var(--r) var(--r) 0}
.callout b{color:var(--accent-2)}

/* ---------- 회사 ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:58px;align-items:start}
.shot{overflow:hidden;border-radius:var(--r);background:var(--bg-3)}
.shot img{width:100%;aspect-ratio:4/3.3;object-fit:cover}
.shot .cap{background:var(--bg-2);border:1px solid var(--line);border-top:0;padding:12px 16px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.09em;color:var(--muted-2)}
.tl{border-top:1px solid var(--line)}
.tl .r{display:grid;grid-template-columns:104px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.tl .y{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;color:var(--accent);padding-top:2px}
.tl .t{font-size:15.5px;line-height:1.65;color:var(--fg)}
.tl .r.pend .y{color:var(--muted-2)}
.tl .r.pend .t{color:var(--muted)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);margin-top:58px;border:1px solid var(--line)}
.three .c{background:var(--bg);padding:30px 28px}
.three h4{margin:0 0 11px;font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.three p{margin:0;font-size:13.5px;line-height:1.72;color:var(--muted)}

/* ---------- 위치 ---------- */
.loc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:52px;align-items:start}
.loc .map{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.addr{border-top:1px solid var(--line)}
.addr .r{padding:19px 0;border-bottom:1px solid var(--line-soft)}
.addr dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.addr dd{margin:0;font-size:14.5px;line-height:1.72;color:var(--fg-2)}
.addr dd a{color:var(--accent);text-decoration:none}
.addr dd a:hover{text-decoration:underline}

/* ---------- 문의 ---------- */
.ct{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr);gap:58px;align-items:start}
.ct-side .b{padding:20px 0;border-bottom:1px solid var(--line)}
.ct-side .b:first-child{border-top:1px solid var(--line)}
.ct-side dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.ct-side dd{margin:0;font-size:14.5px;line-height:1.75;color:var(--fg-2)}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{margin-bottom:18px}
.f label{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.f input,.f select,.f textarea{width:100%;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px;font-family:inherit;font-size:14.5px;color:var(--fg);transition:border-color .18s,background .18s,box-shadow .18s}
.f textarea{resize:vertical;line-height:1.65}
.f input:focus,.f select:focus,.f textarea:focus{outline:0;background:var(--bg);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fnote{font-size:12.5px;line-height:1.7;color:var(--muted);margin:6px 0 20px}
button.send{background:var(--accent);color:#fff;border:0;border-radius:var(--r);padding:14px 30px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .18s}
button.send:hover{background:var(--accent-2)}

/* ---------- 푸터 ---------- */
footer.site{background:var(--bg-2);border-top:1px solid var(--line);padding:56px 0 28px;margin-top:40px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.fgrid b.n{font-size:16px;font-weight:800;letter-spacing:.06em}
.fgrid p{margin:14px 0 0;font-size:13px;line-height:1.72;color:var(--muted);max-width:34ch}
.fgrid h5{margin:0 0 13px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);font-weight:400}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid li{margin-bottom:9px}
.fgrid a{font-size:13.5px;color:var(--fg-2);text-decoration:none}
.fgrid a:hover{color:var(--accent)}
.fbot{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:46px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--muted-2)}

.disc{background:var(--fg);color:#BDC7CC;padding:32px 0;font-size:12.5px;line-height:1.85}
.disc b{color:#fff}

.rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- 반응형 ---------- */
@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .bar .in{grid-template-columns:repeat(3,1fr)}
  .bar .c{padding-right:24px}
  .bar .c:nth-child(3n){border-right:0}
}
@media (max-width:900px){
  /* 좌측 고정 메뉴를 없애지 않고 하단 탭바로 옮긴다 — 고정 메뉴가 이 안의 성격이다 */
  aside.side{top:auto;left:0;right:0;bottom:0;width:auto;height:auto;
    flex-direction:row;align-items:center;justify-content:space-around;
    padding:0;border-right:0;border-top:1px solid var(--line);
    box-shadow:0 -6px 20px rgba(15,21,24,.07)}
  aside.side>div:first-child>.logo,
  aside.side>div:last-child{display:none}
  aside.side>div:first-child{width:100%}
  aside.side nav{margin:0;flex-direction:row;justify-content:space-around;width:100%}
  aside.side nav a{flex-direction:column;align-items:center;gap:3px;padding:9px 4px 8px;
    font-size:11.5px;font-weight:600;flex:1;text-align:center}
  aside.side nav a i{font-size:9px;letter-spacing:.1em}
  main{margin-left:0;padding-bottom:62px}   /* 탭바 높이만큼 비운다 */
  .mtop{display:flex}
  .mtop button{display:none}
  .mnav{display:none;position:sticky;top:53px;z-index:69;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .mnav.open{display:block}
  .mnav a{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;font-size:14.5px;color:var(--fg-2)}
  .mnav a.cta{background:var(--accent);color:#fff;text-align:center;margin-top:12px;border:0;border-radius:var(--r);font-weight:600}
  aside.side>div:first-child{display:block;margin:0}
  .ptree,.side nav>.ind{display:none}
  /* 폰: 하단 탭 Products 를 누르면 분류표가 아래에서 올라온다 */
  .psheet{position:fixed;left:0;right:0;bottom:62px;z-index:69;max-height:68vh;overflow-y:auto;margin:0;
    background:var(--bg);border:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0;
    box-shadow:0 -12px 30px rgba(15,21,24,.14);padding:14px 20px 18px}
  .psheet.open{display:flex}
  .psheet .pt>a,.psheet summary>a{padding:12px 0;font-size:15px}
  .psheet summary::after{width:8px;height:8px;margin-right:6px}
  .psheet .pt{border-bottom:1px solid var(--line-soft)}
  .psheet ul{padding-left:14px;margin:0 0 8px}
  .psheet li a{padding:9px 0;font-size:14px}
  .pad{padding:0 20px}
  section{padding:60px 0}
  .hero{height:auto}
  .hero .plate{position:static;max-width:none;box-shadow:none;padding:32px 20px 8px;border-radius:0}
  .shead{grid-template-columns:1fr;gap:18px;margin-bottom:32px}
  .tiles{grid-template-columns:1fr;gap:0}
  .tile .ph{aspect-ratio:16/11}
  .tile .bd{padding:20px 20px 24px}
  .tile h3{font-size:20px}
  .srow{grid-template-columns:1fr;gap:11px}
  .split,.loc,.ct{grid-template-columns:1fr;gap:34px}
  .three{grid-template-columns:1fr}
  .bar .in{grid-template-columns:1fr 1fr}
  .bar .c:nth-child(3n){border-right:1px solid var(--line-soft)}
  .bar .c:nth-child(2n){border-right:0;padding-right:0}
  .fgrid{grid-template-columns:1fr 1fr;gap:30px}
  .g2{grid-template-columns:1fr;gap:0}
}

/* ---------- 제품 페이지 (분류·상세) ---------- */
.phead{padding:56px 0 40px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.crumb{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--muted-2);margin-bottom:16px}
.crumb a{text-decoration:none;color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.phead h1{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:0}
.phead p{margin:16px 0 0;max-width:64ch;font-size:15.5px;line-height:1.75;color:var(--muted)}
.phead .row{margin-top:24px}
.sub{padding:56px 0 0}
.sub h2{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 20px;scroll-margin-top:70px}
.sub h2 small{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;color:var(--muted-2);margin-left:10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line)}
.card{display:flex;flex-direction:column;text-decoration:none;background:var(--bg)}
.card .ph{aspect-ratio:4/3;background:var(--bg-2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .ph img{max-width:100%;max-height:100%;object-fit:contain}
.card .ph span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase}
.card h3{margin:0;padding:16px 18px 18px;font-size:15px;font-weight:600;letter-spacing:-.01em;border-top:1px solid var(--line-soft);transition:color .18s}
.card:hover h3{color:var(--accent)}
.pd{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;padding:48px 0 0;align-items:start}
.body{font-size:15px;line-height:1.75;color:var(--fg-2)}
.body p{margin:0 0 14px}
.body img{height:auto;margin:6px 0 14px;border:1px solid var(--line-soft)}
.tw{overflow-x:auto;margin:6px 0 24px;border:1px solid var(--line)}
.body table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.5}
.body td{border:1px solid var(--line-soft);padding:8px 10px;vertical-align:top}
.body td p{margin:0}
.body tr:first-child td{background:var(--bg-2);font-weight:600}
.pinfo{position:sticky;top:24px;border-top:1px solid var(--line)}
.pinfo .b{padding:18px 0;border-bottom:1px solid var(--line)}
.pinfo dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.pinfo dd{margin:0;font-size:14px;line-height:1.7}
.pinfo ul{list-style:none;margin:0;padding:0}
.pinfo li{padding:3px 0}
.pinfo li a{text-decoration:none;color:var(--fg-2);font-size:13.5px}
.pinfo li a:hover,.pinfo li a[aria-current]{color:var(--accent)}
.pinfo .btn{display:block;text-align:center;margin-top:18px}
.pnav{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding:20px 0;border-top:1px solid var(--line);font-size:14px}
.pnav a{text-decoration:none;color:var(--muted)}
.pnav a:hover{color:var(--accent)}
@media (max-width:1180px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .phead{padding:36px 0 30px}
  .cards{grid-template-columns:1fr 1fr}
  .pd{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px}
  .body table{display:block;overflow-x:auto}
  .pinfo{position:static}
}

/* =========================================================
   INTERACTION LAYER — hero carousel · parallax · reveals
   ========================================================= */
.sprog{position:fixed;top:0;left:var(--side);right:0;height:2px;z-index:90;pointer-events:none;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- 히어로 캐러셀 ---------- */
.hero{height:100vh;height:100svh;min-height:620px;max-height:none;background:#0F1518;isolation:isolate;padding:0}
.hx{position:absolute;inset:-6% 0 0;will-change:transform}
.sl{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s cubic-bezier(.4,0,.2,1)}
.sl.on{opacity:1;z-index:1}
.sl picture,.sl img{display:block;width:100%;height:100%}
.sl video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.sl img{object-fit:cover;object-position:center 55%;transform:scale(1.001)}
.sl.on img{animation:kb 9s cubic-bezier(.2,.6,.3,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.001)}}
.shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,21,24,.38) 0%,rgba(15,21,24,0) 26%,rgba(15,21,24,0) 55%,rgba(15,21,24,.55) 100%)}
.hero .plate{z-index:3;will-change:transform,opacity}
.hero .plate .row .btn{min-height:44px}
.hnav{position:absolute;right:56px;bottom:56px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:16px;color:#fff}
.hcap{display:flex;align-items:baseline;gap:12px;text-decoration:none;color:#fff;font-size:15px;font-weight:600;letter-spacing:-.01em;
  text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hcap i{font-family:'JetBrains Mono',monospace;font-style:normal;font-size:11px;letter-spacing:.14em;opacity:.8}
.hcap em{font-style:normal;transition:transform .25s ease}
.hcap:hover em{transform:translateX(5px)}
.hcap span{display:inline-block;animation:capIn .6s cubic-bezier(.2,.7,.3,1) both}
@keyframes capIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ticks{display:flex;gap:6px}
.tk{appearance:none;border:0;background:none;padding:10px 0;cursor:pointer;width:38px}
.tk b{display:block;height:2px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.tk b::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.tk.done b::after{transform:scaleX(1)}
.tk.on b::after{animation:tick var(--dur,6.5s) linear forwards}
.tk:first-child{--dur:5s}   /* 11/01 장도: 회장님 요청 — 대교 영상 5초 후 바로 제품 */
.hero.paused .tk.on b::after,.hero.off .tk.on b::after{animation-play-state:paused}
@keyframes tick{to{transform:scaleX(1)}}
.tk:focus-visible,.hpause:focus-visible,.hcap:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hpause{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(15,21,24,.25);
  backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.hpause:hover{background:rgba(15,21,24,.5);border-color:#fff}
.hpause svg{width:14px;height:14px;fill:currentColor}
.hpause .pl{display:none}
.hero.paused .hpause .ps{display:none}
.hero.paused .hpause .pl{display:block}

/* ---------- 글자 단위 등장 ---------- */
.wsplit .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.wsplit .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.75,.25,1);transition-delay:calc(var(--i)*55ms)}
.wsplit.in .w>span{transform:none}

/* ---------- 타일: 사진이 걷히며 등장 ---------- */
.tile .ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1);transition-delay:calc(var(--d,0)*110ms)}
.tile .ph img{transform:scale(1.18);transition:transform 1.6s cubic-bezier(.2,.7,.3,1);transition-delay:calc(var(--d,0)*110ms)}
.tile.in .ph{clip-path:inset(0 0 0 0)}
.tile.in .ph img{transform:scale(1)}
.tile.in:hover .ph img,.tile.in.act .ph img{transform:scale(1.06);transition-delay:0s;transition-duration:.6s}
.tile .bd{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease;transition-delay:calc(var(--d,0)*110ms + .35s)}
.tile.in .bd{opacity:1;transform:none}
.tile .cnt span:last-child{transition:transform .25s ease}
.tile:hover .cnt span:last-child{transform:translateX(5px)}

/* ---------- 흐르는 띠 ---------- */
.marq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;margin-top:0;background:var(--bg)}
.mt{display:flex;width:max-content;will-change:transform;white-space:nowrap}
.mt span{font-size:clamp(40px,6.2vw,92px);font-weight:800;letter-spacing:-.035em;line-height:1;padding-right:.45em;
  color:transparent;-webkit-text-stroke:1.2px var(--fg-2)}
.mt span:nth-child(3n+2){color:var(--accent);-webkit-text-stroke:0}
.mt span i{font-style:normal;color:var(--accent);-webkit-text-stroke:0;padding-left:.45em}

/* ---------- 규격 행: 선이 그어지며 등장 ---------- */
.spec .srow{border-bottom:0;position:relative}
.spec .srow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.spec.in .srow::after{transform:scaleX(1)}
.spec.in .srow:nth-child(2)::after{transition-delay:.15s}
.spec.in .srow:nth-child(3)::after{transition-delay:.3s}

/* ---------- 연혁: 스크롤 따라 진행선 ---------- */
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line)}
.tl .bar-fill{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--accent);transform-origin:0 0;transform:scaleY(var(--p,0))}
.tl .r{position:relative;transition:opacity .5s ease}
.tl .r::before{content:"";position:absolute;left:-26px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line2,#C5CED2);transition:background .3s,border-color .3s,transform .3s}
.tl .r.lit::before{background:var(--accent);border-color:var(--accent);transform:scale(1.15)}
.tl .r:not(.lit){opacity:.9}

/* ---------- 회사 사진 패럴랙스 ---------- */
.pxw{overflow:hidden}
.pxw .px{width:100%;aspect-ratio:4/3.3;object-fit:cover;transform:translateY(var(--py,0)) scale(1.14);will-change:transform}

/* ---------- 모바일 ---------- */
@media (max-width:900px){
  .sprog{left:0}
  .hero{height:auto;min-height:0}
  .hx{position:relative;inset:auto;height:max(420px,68svh);overflow:hidden}
  .shade{height:max(420px,68svh);bottom:auto}
  .hero{padding:0}
  .hnav{right:20px;left:20px;bottom:auto;top:calc(max(420px,68svh) - 92px);flex-direction:column;align-items:stretch;gap:6px;padding-right:56px}
  .hcap{font-size:15px;white-space:nowrap;overflow:hidden}
  .hcap span{overflow:hidden;text-overflow:ellipsis}
  .ticks{gap:4px}.tk{flex:1;width:auto}
  .hpause{position:absolute;right:0;bottom:4px;width:44px;height:44px}
  .marq{padding:20px 0}
}
@media (prefers-reduced-motion:reduce){
  .sl{transition:none}.sl.on img{animation:none}
  .rv,.wsplit .w>span,.tile .ph,.tile .ph img,.tile .bd{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .tk.on b::after{animation:none}
  .tl .r:not(.lit){opacity:1}
}

/* ---------- 언어 ---------- */
:lang(ko) body,body:lang(ko){font-family:Amp,'Archivo','Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;word-break:keep-all}
:lang(ko) .hero .plate h1{letter-spacing:-.045em;line-height:1.14}
:lang(ko) .shead h2{letter-spacing:-.04em;line-height:1.2}
.body[lang="en"]{word-break:normal}
.lang{display:inline-flex;margin-bottom:18px;border:1px solid var(--line);border-radius:999px;padding:2px}
.lang a{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.06em;padding:4px 9px;border-radius:999px;
  color:var(--muted-2);text-decoration:none;transition:color .18s,background .18s}
.lang a:hover{color:var(--accent)}
.lang a[aria-current]{background:var(--fg);color:#fff}
.mtop .lang{margin:0}
.phead p.en{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--muted-2);margin-top:12px}
.body h2.orig{font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ---------- 히어로 카피: 박스 없이 사진 위에 (데스크톱) ---------- */
.proof{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:0}
.proof li{font-size:12.5px;line-height:1.45;color:var(--muted);padding:0 18px;border-left:1px solid var(--line)}
.proof li:first-child{padding-left:0;border-left:0}
.proof b{display:block;font-weight:700;color:var(--fg);font-size:13.5px;letter-spacing:-.01em}
@media (min-width:901px){
  .shade{background:
      linear-gradient(90deg,rgba(9,14,17,.78) 0%,rgba(9,14,17,.52) 34%,rgba(9,14,17,.12) 62%,rgba(9,14,17,0) 78%),
      linear-gradient(180deg,rgba(9,14,17,.35) 0%,rgba(9,14,17,0) 22%,rgba(9,14,17,0) 60%,rgba(9,14,17,.6) 100%)}
  .hero .plate{background:none;box-shadow:none;border-radius:0;padding:0;left:64px;bottom:84px;max-width:min(760px,58%);color:#fff}
  .hero .plate .k{color:#8FE0E3;margin-bottom:22px}
  .hero .plate .k::before{content:"";display:inline-block;width:28px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
  .hero .plate h1{font-size:clamp(40px,4.6vw,72px);line-height:1.02;letter-spacing:-.04em;margin-bottom:22px;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.25)}
  .hero .plate p{color:rgba(255,255,255,.84);font-size:16.5px;max-width:56ch;margin-bottom:28px}
  .hero .proof li{color:rgba(255,255,255,.66);border-left-color:rgba(255,255,255,.28)}
  .hero .proof b{color:#fff}
  .hero .btn-s{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(6px)}
  .hero .btn-s:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.14)}
  .hero .btn-p:hover{background:#0B8F96}
  :lang(ko) .hero .plate h1{font-size:clamp(38px,4.3vw,66px);line-height:1.12}
}
@media (min-width:901px){
  .hero .plate{max-width:min(860px,64%)}
  .hero .plate .k,.hero .plate p,.hero .proof li{text-shadow:0 1px 12px rgba(0,0,0,.45)}
}
@media (max-width:900px){
  .proof{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .proof li{padding:0 10px;font-size:11.5px}
  .proof b{font-size:12.5px}
}
/* Hangul in mono labels: JetBrains Mono has no Hangul, so wide tracking + 9-10px reads as scattered dots */
:lang(ko) :is(.k,.cnt,.crumb,.addr dt,.ct-side dt,.f label,.fgrid h5,.pinfo dt){letter-spacing:.02em;font-family:'Pretendard Variable',Pretendard,sans-serif;font-weight:500}
:lang(ko) :is(.shead .k,.hero .plate .k,.bar .k,.side .foot .k){font-size:12px}
/* dark sections — light/dark rhythm down the page */
.dark{--bg:#0B1215;--bg-2:#111B1F;--bg-3:#18252A;--line:#22323A;--line-soft:#1A282E;--fg:#EEF3F4;--fg-2:#CBD5D8;--muted:#95A4AB;--muted-2:#6D7D85;--accent:#3FB8BE;
  background:var(--bg);color:var(--fg)}
.dark.bar{background:var(--bg)}
/* products index — bento jump grid to the seven divisions */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,15vw,220px);gap:10px;margin:48px 0 8px}
.bento a{position:relative;overflow:hidden;border-radius:6px;background:#0B1215;text-decoration:none;color:#fff;isolation:isolate}
.bento img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.bento a::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,14,17,0) 35%,rgba(9,14,17,.72))}
.bento a:hover img,.bento a:focus-visible img{transform:scale(1.06)}
.bento span{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.bento b{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.bento i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;color:rgba(255,255,255,.75);white-space:nowrap}
.bento .b1{grid-column:span 2;grid-row:span 2}
.bento .b1 b{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.03em}
.bento .b4,.bento .b5,.bento .b6{grid-column:span 2}
.bento .b7{grid-column:span 4}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:8px;margin-top:28px}
  .bento .b1{grid-column:span 2;grid-row:span 2}
  .bento .b4,.bento .b5,.bento .b6,.bento .b7{grid-column:span 1}
  .bento b{font-size:15px}
  .bento span{left:12px;right:12px;bottom:10px;flex-direction:column;align-items:flex-start;gap:3px}
}
/* home divisions — all six at once, bento; hover lifts one and dims the rest */
.tiles{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(200px,17vw,280px);gap:10px;padding:0 56px;background:none}
.tile{border-radius:8px;background:#0B1215;color:#fff;isolation:isolate;
  transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .35s cubic-bezier(.2,.7,.3,1),filter .35s ease,box-shadow .35s ease}
.tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.tile:nth-child(2),.tile:nth-child(3){grid-column:span 1}
.tile:nth-child(n+4){grid-column:span 2}
.tile:nth-child(7){grid-column:span 4}
.tile .ph{position:absolute;inset:0;aspect-ratio:auto;z-index:-1;background:#0B1215}
.tile .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(9,14,17,.05) 30%,rgba(9,14,17,.82))}
.tile::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(143,224,227,.22),transparent 60%)}
.tile:hover::before{opacity:1}
.tile .bd{position:relative;z-index:1;margin-top:auto;flex:none;padding:22px 24px;border:0;background:none}
.tile h3{color:#fff;font-size:20px;margin:0}
.tile:nth-child(1) h3{font-size:clamp(28px,2.8vw,42px);letter-spacing:-.03em}
.tile p{color:rgba(255,255,255,.82);max-width:46ch;max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.7,.3,1),opacity .35s ease,margin .45s ease}
.tile:hover p,.tile:focus-visible p,.tile:nth-child(1) p{max-height:7em;opacity:1;margin-top:9px}
.tile .cnt{color:rgba(255,255,255,.7);border-top-color:rgba(255,255,255,.2);margin-top:14px}
.tile:hover h3,.tile.act h3,.tile:hover .cnt,.tile.act .cnt{color:#fff}
.tile .no{z-index:1}
.tiles:hover .tile:not(:hover){filter:saturate(.55) brightness(.72)}
.tile:hover{box-shadow:0 24px 48px -18px rgba(9,14,17,.45);z-index:2}
:lang(ko) .tile:nth-child(1) h3{line-height:1.15}
@media (max-width:900px){
  .tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:8px;padding:0 20px}
  .tile:nth-child(1){grid-column:span 2;grid-row:span 2}
  .tile:nth-child(n+2){grid-column:span 1;grid-row:span 1}
  .tile .bd{padding:14px}
  .tile h3,.tile:nth-child(1) h3{font-size:16px}
  .tile:nth-child(1) h3{font-size:24px}
  .tile p,.tile:nth-child(1) p{display:none}
  .tile .cnt{margin-top:6px;padding-top:6px}
  .tile .no{top:10px;left:10px}
}
.tiles{grid-auto-rows:clamp(180px,14vw,240px)}
.tile .ph::after{transition:background .35s ease}
.tile:hover .ph::after,.tile:focus-visible .ph::after{background:linear-gradient(180deg,rgba(9,14,17,.25) 0%,rgba(9,14,17,.88) 70%)}
@media (max-width:900px){.tiles{grid-auto-rows:150px}}

.pphoto{margin:0 0 28px;background:#f3f5f6;border:1px solid var(--line,#e3e6e8);display:flex;justify-content:center;padding:16px}
.pphoto img{max-width:100%;max-height:420px;height:auto}
/* company page — chairman's message (src/message*.html) */
.msg{padding:72px 0 80px}
.msg .in{max-width:68ch}
.msg .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:22px}
.msg p{margin:0 0 1.1em;font-size:17px;line-height:1.85;color:var(--fg-2)}
.msg p.sign{margin-top:36px;font-size:18px;font-weight:700;color:var(--fg)}
.msg p.sign span{display:block;font-size:13.5px;font-weight:400;color:var(--muted);margin-top:4px}
.comore{margin:40px 0 0;font-size:15px}
.comore a{color:var(--accent);font-weight:600;text-decoration:none}
.comore a:hover{text-decoration:underline}

/* 10/14 회장님 원고 — 인사말 제목, 회사 소개 본문, 긴 히어로 문구 */
.msg h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;letter-spacing:-.02em;line-height:1.35;margin:0 0 28px;text-wrap:balance}
.about{max-width:76ch;margin-top:56px}
.about p{margin:0 0 1em;font-size:16px;line-height:1.85;opacity:.82}
.hero .plate h1.long{font-size:clamp(28px,3vw,44px);line-height:1.18}
:lang(ko) .hero .plate h1.long{font-size:clamp(28px,2.9vw,44px);line-height:1.24}

/* 10/14 회사 소개 페이지 — 배너 · 인사말 2단 · 공급 분야 · 거점 */
.cohero{position:relative;color:#fff;overflow:hidden;background:#0b1114}
.cohero picture,.cohero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cohero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,15,.86) 0%,rgba(6,12,15,.55) 55%,rgba(6,12,15,.25) 100%)}
.cohero .pad{position:relative;z-index:1;padding-top:96px;padding-bottom:88px}
.cohero .crumb{font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:40px}
.cohero .crumb a{color:rgba(255,255,255,.85);text-decoration:none}
.cohero .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#7fd3d6;margin-bottom:16px}
.cohero h1{font-size:clamp(34px,4.4vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1.05;margin:0 0 18px}
.cohero p{margin:0;max-width:40ch;font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:rgba(255,255,255,.88);text-wrap:balance}
.msg2{padding:96px 0}
.msg2 .g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.msg2 .lft{position:sticky;top:40px;display:flex;flex-direction:column;gap:22px}
.msg2 .emb{width:120px;height:120px;padding:14px;border-radius:50%;background:var(--bg-2);border:1px solid var(--line)}
.msg2 .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.msg2 blockquote{margin:0;position:relative;padding-top:38px;font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-.025em;line-height:1.32;text-wrap:balance}
.msg2 blockquote::before{content:"\201C";position:absolute;top:-22px;left:-4px;font-size:96px;line-height:1;color:var(--accent);font-weight:800}
.msg2 .who{border-top:2px solid var(--fg);padding-top:16px;display:flex;flex-direction:column;gap:2px}
.msg2 .who b{font-size:20px;font-weight:800;letter-spacing:.02em}
.msg2 .who span{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.18em;color:var(--muted)}
.msg2 .rt p{margin:0 0 1.15em;font-size:17px;line-height:1.9;color:var(--fg-2)}
.msg2 .rt p:first-child{font-size:20px;line-height:1.7;font-weight:600;color:var(--fg)}
.msg2 .rt p.sign{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:19px;font-weight:800;color:var(--fg)}
.msg2 .rt p.sign span{display:block;font-size:13px;font-weight:400;color:var(--muted);margin-top:4px;letter-spacing:.06em}
.cdiv{padding:0 0 96px}
.cdiv .k,.coff .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.cdiv .strip{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cdiv .strip a{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);text-decoration:none;color:#fff;background:var(--bg-3)}
.cdiv .strip picture,.cdiv .strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cdiv .strip a::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.72))}
.cdiv .strip span{position:absolute;left:14px;right:14px;bottom:14px;z-index:1;font-weight:700;font-size:15px;line-height:1.3}
.cdiv .strip a:hover img{transform:scale(1.06)}
.coff{padding:96px 0}
.coff .offs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);border:1px solid var(--line)}
.coff .o{background:var(--bg);padding:28px 26px 30px}
.coff .ok{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.coff h3{margin:8px 0 12px;font-size:26px;font-weight:800;letter-spacing:-.02em}
.coff p{margin:0;font-size:14px;line-height:1.75;color:var(--fg-2)}
.msg2 .proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:34px 0 38px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.msg2 .proof a{display:flex;flex-direction:column;gap:6px;padding:22px 22px 20px;background:var(--bg);text-decoration:none;color:var(--fg);transition:background .2s}
.msg2 .proof a:hover{background:var(--bg-2)}
.msg2 .proof b{font-size:clamp(28px,2.6vw,38px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent)}
.msg2 .proof span{font-size:14px;line-height:1.5;color:var(--fg-2)}
.msg2 .proof span::after{content:" \2192";color:var(--accent)}
.msg2 .cta2{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px}
#history .tl .t a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(127,211,214,.45)}
#history .tl .t a b{color:#7fd3d6;font-weight:600}
#history .tl .t a:hover{color:#7fd3d6}
@media (max-width:900px){
  .msg2{padding:64px 0}.msg2 .g{grid-template-columns:1fr;gap:40px}.msg2 .lft{position:static}
  .cdiv .strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-16px;padding-right:16px}.cdiv .strip a{flex:0 0 42%;scroll-snap-align:start}
  .coff .offs{grid-template-columns:1fr}
  .cohero .pad{padding-top:72px;padding-bottom:64px}
}


/* 10/31 장도: 부문 페이지 중분류 대표 사진 칸 */
.sgrid{margin-top:48px}
.card h3 small{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:400;color:var(--muted-2);margin-left:8px}
.sback{display:inline-block;margin-bottom:18px;font-size:14px;color:var(--muted);text-decoration:none}
.sback:hover{color:var(--accent)}
/* 10/31 장도: 제품 사진 칸을 사진 크기(145×94)에 맞추고 흰 배경 — 옛 썸네일의 흰 테두리가 칸과 이어지게 */
.card .ph{aspect-ratio:auto;padding:22px 0;background:#fff}
.card .ph img{width:145px;height:auto}
/* 10/31 장도: 흐르는 띠 한글 글꼴 교체 — Pretendard는 외곽선에서 획 겹침이 보임. 영문(Archivo)은 그대로 */
:lang(ko) .mt span{font-family:Amp,'Archivo','Black Han Sans',sans-serif;font-weight:400;letter-spacing:-.01em}
/* 10/31 장도: 회사소개 상단 이미지 높이 축소 */
.cohero .pad{padding-top:52px;padding-bottom:48px}
.cohero .crumb{margin-bottom:24px}
.cohero .k{margin-bottom:12px}
.cohero h1{font-size:clamp(30px,3.4vw,48px);margin-bottom:12px}
.cohero p{font-size:clamp(15px,1.3vw,18px)}
@media (max-width:900px){.cohero .pad{padding-top:40px;padding-bottom:36px}}
/* 10/31 장도: 회사소개 상단 더 축소 + 첫 화면 항구 영상 배경 */
.cohero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%}
.cohero .pad{padding-top:32px;padding-bottom:30px}
.cohero .crumb{margin-bottom:16px}
.cohero h1{font-size:clamp(28px,2.8vw,40px)}
@media (max-width:900px){.cohero .pad{padding-top:28px;padding-bottom:26px}}
/* 10/31 장도(회장님): 제품 칸이 모자란 줄의 빈자리를 회색 대신 흰색 — 선은 칸마다 그림 */
.cards{gap:0;background:none;border:0;padding:0 1px 1px 0}
.card{border:1px solid var(--line);margin:0 -1px -1px 0}
.sgrid[hidden],.sub[hidden]{display:none}
/* 10/31 장도: 인사말 큰 따옴표 장식 제거 */
.msg2 blockquote{padding-top:0}
.msg2 blockquote::before{content:none}
/* 10/31 장도: 전체 제품 페이지 부문 칸 — 옛 홈페이지 사진 원래 크기 */
.dgrid{margin:48px 0 8px}
.dgrid .card .ph img,.sgrid .card .ph img.o{width:170px;max-width:calc(100% - 16px)}
/* 10/31 장도: 제품 상단 섹션 축소 — 모든 제품 페이지 같은 짜임 */
.phead{padding:26px 0 22px}
.phead .crumb{margin-bottom:12px}
.phead h1{font-size:clamp(24px,2.4vw,32px)}
.phead p{margin-top:8px;max-width:none;font-size:14.5px;line-height:1.6}
.phead .row{margin-top:14px}
.phead .row .btn{padding-top:10px;padding-bottom:10px}
@media (max-width:900px){.phead{padding:22px 0 18px}}
/* 10/31 장도: 첫 화면 아래쪽을 버튼 바로 밑까지 당김 */
@media (min-width:901px){
  .hero{height:calc(100svh - 120px);min-height:600px}
  .hero .plate{bottom:48px}
  .hnav{bottom:44px}
}
/* 10/31 장도: 하위 분류·부문 칸 이름을 사진 위로(옛 홈페이지 배치) */
.card h3{order:-1;border-top:0;border-bottom:1px solid var(--line-soft)}   /* 제품 칸도 같은 형식 */
/* 10/31 장도: 칸 이름 줄 — 아주 옅은 청회색 바탕 + 남색 글자(부문·분류·제품 칸 모두) */
.card h3{background:#EEF3F6;color:#1F2F4A}
.card:hover h3{color:var(--accent)}
/* 10/31 장도: 긴 칸 이름이 두 줄이 돼도 같은 줄 칸끼리 이름 줄 높이·사진 위치를 맞춘다 */
.card{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
.card h3{display:flex;align-items:center}

/* 11/1 장도 A안: 폰 하단 탭 아이콘 · 시트 제목줄 · 탭바와 시트 사이 틈 제거 */
.side nav a .ico{display:none}
@media (max-width:900px){
  aside.side nav a i{display:none}
  aside.side nav a .ico{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  aside.side nav a.act{background:#EEF3F6;color:var(--accent)}
  /* 하위 메뉴가 열린 동안엔 연 탭 하나만 불을 켠다 — 스크롤 위치 표시(.on)는 잠시 끈다 */
  aside.side nav:has(a.act) a.on:not(.act),aside.side nav:has(a.act) a.on:not(.act) i{color:var(--fg-2)}
  .psheet{padding-top:0}
  .psheet .sh{display:flex;align-items:center;gap:8px;padding:16px 0 12px;border-bottom:2px solid #1F2F4A;margin-bottom:2px}
  .psheet .sh b{font-size:16px;color:#1F2F4A}
  .psheet .sh span{font-size:12.5px;color:var(--muted)}
  .psheet .sh button{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);padding:0 4px;cursor:pointer}
}

/* 11/1 장도: 폰 제품 시트 — 부문은 굵은 남색(지금 부문만 청록), 펼친 하위는 2열 버튼 */
@media (max-width:900px){
  .psheet .pt>a,.psheet summary>a{font-weight:700;font-size:16px;color:#1F2F4A}
  .psheet details[open]>ul{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:0 0 12px;margin:0}
  .psheet details li a{background:#EEF3F6;border-radius:6px;padding:9px 10px;font-size:13.5px;line-height:1.35;color:#1F2F4A;height:100%}
  .psheet details li a.on{box-shadow:inset 0 0 0 1px var(--accent)}
  .psheet details li:first-child{grid-column:1/-1}
  .psheet details li:first-child a{background:none;padding:2px 0 4px;color:var(--accent);font-weight:600}
}

/* 11/1 장도 B안: 폰 시트의 부문도 2열 칸 — 펼친 부문만 한 줄 전체. 순서는 원본 그대로(dense 금지) */
@media (max-width:900px){
  .psheet.open{display:grid;grid-template-columns:1fr 1fr;column-gap:8px;row-gap:6px;align-content:start;padding-bottom:12px}
  .psheet .sh{grid-column:1/-1;padding:12px 0 8px}
  .psheet .pt{border:0;background:#f3f6f8;border-radius:8px;padding:0 10px;min-width:0}
  .psheet .pt>a,.psheet summary>a{padding:11px 0;font-size:14.5px}
  .psheet details[open]{grid-column:1/-1;background:var(--bg);border:1px solid #d6e0e7}
  /* 오른쪽 칸이 펼쳐지면 왼쪽 짝 칸도 한 줄로 넓혀 빈칸을 없앤다(제목줄이 1번째 자식이라 왼쪽 칸 = 짝수 번째) */
  .psheet .pt:nth-child(even):has(+ details[open]){grid-column:1/-1}
}

/* 11/1 장도: 폰 하단 홈 탭(PC 좌측 메뉴엔 숨김) · 폰 로고에 International Inc. */
.side nav a.home{display:none}
.mlogo .lt{display:flex;flex-direction:column;align-items:center;line-height:1}   /* 11/1 장도: INTERNATIONAL INC.를 RUBBERTECH 가운데로 */
.mlogo .lt span{font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.2em;color:var(--muted);margin-top:3px;margin-right:-.2em;text-transform:uppercase}   /* 끝 자간만큼 당겨 눈으로도 가운데 */
@media (max-width:900px){
  aside.side nav a.home{display:flex}
}