/* ========================================================================
   MSM Ball Screw — Industrial Classic Style
   기반: 02-swspindle-style (올드 톤 강화)
   ======================================================================== */
:root{
  --ink:#1c1f24;
  --ink-2:#2b303b;
  --mute:#777e88;
  --line:#cfd4dc;
  --line-2:#e6e9ee;
  --line-d:#a8b0bc;       /* darker rule */
  --soft:#f1f3f6;
  --soft-2:#e8ecf1;
  --navy:#162a4a;          /* deeper, more classic navy */
  --navy-d:#0d1c33;
  --red:#b71d2e;           /* 짙은 클래식 레드 */
  --red-d:#8d1422;
  --gold:#a78a4a;          /* 포인트(연혁/인증 등) */
  --bg:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{
  font-family:'Pretendard','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink); background:var(--bg);
  font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* ---------- Top utility ---------- */
.utility{background:#1a1d22; color:#9aa1ad; font-size:12px; border-bottom:1px solid #000}
.utility .row{max-width:1280px; margin:0 auto; padding:7px 20px; display:flex; justify-content:space-between}
.utility a{margin-left:14px}
.utility a:hover{color:#fff}

/* ---------- Header ---------- */
.header{border-bottom:2px solid var(--navy); background:#fff}
.header .row{max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; height:90px; gap:36px}
.brand{display:flex; align-items:center; gap:14px; color:var(--navy)}
.brand .mark{
  width:50px; height:50px; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:22px; font-weight:900; letter-spacing:-1px;
}
.header .brand .mark{display:none}
.brand .nm{font-size:24px; font-weight:900; letter-spacing:-1px; color:var(--navy)}
.brand .nm span{color:var(--red)}
.brand small{display:block; font-size:10px; color:#888; font-weight:500; letter-spacing:3px; margin-top:3px}

.topnav{display:flex; gap:0; flex:1}
.topnav a{
  padding:18px 22px; font-weight:700; font-size:15px; color:#3a4150;
  border-bottom:3px solid transparent; position:relative;
}
.topnav a:hover, .topnav a.on{color:var(--red); border-color:var(--red)}
.topnav a + a::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); height:14px; width:1px; background:var(--line-2)}

/* 헤더 우측 전화번호 영역 — 노출 안 함 (utility 영역에 동일 정보 표시) */
.contact-info{display:none}

/* ---------- Sub page hero (얇은 클래식 헤더 띠) ---------- */
.subhero{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-d) 100%);
  color:#fff; padding:50px 0; border-bottom:5px solid var(--gold);
  position:relative; overflow:hidden;
}
.subhero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:30px 30px; opacity:.5;
}
.subhero .row{max-width:1280px; margin:0 auto; padding:0 20px; position:relative; display:flex; align-items:end; justify-content:space-between}
.subhero h1{font-size:34px; font-weight:900; margin:0; letter-spacing:-1px}
.subhero h1 small{display:block; color:var(--gold); font-size:12px; letter-spacing:4px; font-weight:700; margin-bottom:8px}
.subhero .crumb{color:#a7b4c8; font-size:13px}
.subhero .crumb a:hover{color:#fff}

/* ---------- Page layout (좌측 메뉴 + 본문) ---------- */
.page{max-width:1280px; margin:30px auto 80px; padding:0 20px; display:grid; grid-template-columns:240px 1fr; gap:36px}

/* sidebar */
.sidebar{position:sticky; top:14px; align-self:start}
.sb-title{
  background:var(--navy); color:#fff; padding:22px 22px;
  font-size:22px; font-weight:900; letter-spacing:-.5px; position:relative;
}
.sb-title::after{content:""; position:absolute; bottom:0; left:0; width:60px; height:4px; background:var(--gold)}
.sb-title small{display:block; font-size:11px; color:#aab; letter-spacing:3px; font-weight:500; margin-bottom:6px}
.sb-menu{border:1px solid var(--line); border-top:none}
.sb-menu a{
  display:flex; align-items:center; gap:6px; justify-content:space-between;
  padding:13px 22px; border-bottom:1px solid var(--line-2);
  font-weight:600; color:#333; background:#fff;
}
.sb-menu a:last-child{border-bottom:none}
.sb-menu a:hover, .sb-menu a.on{background:var(--soft); color:var(--red); padding-left:26px}
.sb-menu a::after{content:"›"; color:#bbb; font-size:18px}
.sb-menu a.on::after{color:var(--red)}
.sb-menu .new{display:none}
.sb-cta{
  background:var(--soft); border:1px solid var(--line); padding:18px 16px;
  text-align:center; margin-top:14px;
}
.sb-cta h5{margin:0 0 4px; font-size:14px; color:var(--navy)}
.sb-cta p{margin:0 0 12px; font-size:12px; color:#666}
.sb-cta a{display:block; background:var(--red); color:#fff; padding:11px; font-weight:700; font-size:13px}
.sb-cta a:hover{background:var(--red-d)}
.sb-tel{
  background:#fff; border:1px solid var(--line); padding:14px 16px; margin-top:8px; text-align:center;
}
.sb-tel small{display:block; font-size:11px; color:#999; letter-spacing:1px}
.sb-tel b{display:block; font-size:20px; color:var(--navy); margin-top:4px}

/* main content */
main h2.sec-title{
  margin:0 0 16px; padding-bottom:14px; border-bottom:2px solid var(--navy);
  font-size:22px; font-weight:800; color:var(--navy);
}
main h2.sec-title::before{content:"■"; color:var(--red); margin-right:8px; font-size:16px}
main h2.sec-title small{font-size:13px; color:#888; font-weight:500; margin-left:10px; letter-spacing:1px}
main h3.sub-title{
  margin:36px 0 14px; font-size:17px; font-weight:800; color:var(--navy);
  padding-left:10px; border-left:4px solid var(--red);
}

/* hero strip (메인용) */
.hero-bar{
  background:linear-gradient(90deg, var(--navy) 0%, #2c3e60 100%);
  color:#fff; padding:50px 40px; margin-bottom:30px; position:relative; overflow:hidden;
}
.hero-bar::after{
  content:""; position:absolute; top:0; right:0; width:55%; height:100%;
  background:url(../img/hero-lineup.png) center right/contain no-repeat;
  opacity:.55;
}
.hero-bar .ribbon{
  display:inline-block; background:var(--red); color:#fff; padding:4px 14px;
  font-size:11px; font-weight:800; letter-spacing:3px; position:relative;
  margin-bottom:14px;
}
.hero-bar h1{margin:0 0 8px; font-size:34px; font-weight:900; letter-spacing:-1px; position:relative}
.hero-bar h1 .em{color:#ffb14a}
.hero-bar p{margin:0 0 20px; opacity:.92; position:relative; max-width:60%; font-size:14px}
.hero-bar .cta-row{position:relative; display:flex; gap:8px}
.hero-bar .cta-row a{
  padding:11px 22px; background:#fff; color:var(--navy); font-weight:800; font-size:13px;
  border:2px solid #fff;
}
.hero-bar .cta-row a + a{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.hero-bar .cta-row a:hover{background:var(--gold); color:#fff; border-color:var(--gold)}

/* product spec card grid */
.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.spec-card{border:1px solid var(--line); background:#fff}
.spec-card .head{
  display:flex; align-items:center; gap:14px; padding:16px 20px;
  background:linear-gradient(180deg, #fafbfd 0%, var(--soft) 100%);
  border-bottom:1px solid var(--line);
}
.spec-card .badge{
  background:var(--red); color:#fff; padding:4px 10px;
  font-size:11px; font-weight:800; letter-spacing:1px;
}
.spec-card .badge.classic{background:var(--ink-2)}
.spec-card .badge.cert{background:var(--gold)}
/* 본문 카드의 NEW 뱃지(기본 .badge) 숨김 — CLASSIC/CERT 등 추가 클래스가 있는 것은 유지 */
.spec-card .head > .badge:not(.classic):not(.cert){display:none}
.spec-card .head h3{margin:0; font-size:17px; font-weight:800; flex:1; color:var(--navy); letter-spacing:-.3px}
.spec-card .head h3 small{display:block; font-size:11px; color:#888; font-weight:500; letter-spacing:1px}
.spec-card .body{display:grid; grid-template-columns:170px 1fr; gap:0}
.spec-card .body .img{
  padding:24px; background:#fafbfc; display:grid; place-items:center;
  border-right:1px solid var(--line-2);
}
.spec-card .body .img img{max-height:140px; mix-blend-mode:multiply}
.spec-card .body table{width:100%; border-collapse:collapse; font-size:12px}
.spec-card .body th, .spec-card .body td{padding:8px 12px; text-align:left; border-bottom:1px solid var(--line-2)}
.spec-card .body th{color:var(--mute); font-weight:600; width:90px; background:#fafbfc}
.spec-card .body tr:last-child th, .spec-card .body tr:last-child td{border-bottom:none}
.spec-card .foot{display:flex; gap:0; border-top:1px solid var(--line)}
.spec-card .foot a{
  flex:1; padding:11px; text-align:center; font-size:12px; font-weight:700;
  border-right:1px solid var(--line-2); color:#444;
}
.spec-card .foot a:last-child{border:none}
.spec-card .foot a:hover{background:var(--navy); color:#fff}
.spec-card .foot a.pri{background:var(--red); color:#fff}
.spec-card .foot a.pri:hover{background:var(--red-d)}

/* 3 col strips */
.three-col{display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px}
.box{border:1px solid var(--line); background:#fff}
.box-h{
  background:linear-gradient(180deg, #fafbfd 0%, var(--soft) 100%);
  padding:13px 18px; border-bottom:1px solid var(--line);
  font-weight:800; color:var(--navy); display:flex; justify-content:space-between; align-items:center;
}
.box-h .more{font-size:11px; color:#999; font-weight:500}
.box-body{padding:18px}
.box ul{list-style:none; padding:0; margin:0}
.box li{padding:8px 0; font-size:13px; display:flex; justify-content:space-between; gap:10px; border-bottom:1px dotted var(--line-2)}
.box li:last-child{border:none}
.box li small{color:#999; font-size:11px}
.box li .new{background:var(--red); color:#fff; padding:1px 6px; font-size:9px; font-weight:800; margin-left:6px; letter-spacing:.5px}

/* banner */
.banner{
  background:var(--navy); color:#fff; padding:28px 26px;
  display:flex; gap:16px; align-items:center; justify-content:space-between;
  border-top:4px solid var(--gold);
}
.banner h4{margin:0 0 4px; font-size:17px}
.banner p{margin:0; opacity:.85; font-size:13px}
.banner a{background:var(--red); color:#fff; padding:12px 22px; font-weight:800; font-size:13px}
.banner a:hover{background:var(--red-d)}

/* table styles */
.tbl{width:100%; border-collapse:collapse; font-size:13px; background:#fff; border-top:2px solid var(--navy)}
.tbl th{background:var(--soft); padding:12px 14px; text-align:left; font-weight:700; color:var(--navy); border-bottom:1px solid var(--line); letter-spacing:0}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line-2)}
.tbl tr:hover td{background:#fafbfc}
.tbl .badge{padding:2px 9px; font-size:10px; font-weight:800; letter-spacing:1px}
.tbl .b-pdf{background:#fde4e4; color:#9d1418}
.tbl .b-cad{background:#dde7f5; color:#1b3a73}
.tbl .b-stp{background:#dff0e2; color:#1a6d39}
.tbl .b-new{background:var(--red); color:#fff}
.tbl .b-cert{background:#f3e7c8; color:#7a5b1c}
.tbl .dl{color:var(--navy); font-weight:700}
.tbl .dl:hover{color:var(--red)}

/* Form styles */
.frm-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.frm{display:flex; flex-direction:column; gap:4px; margin-bottom:14px}
.frm label{font-size:12px; font-weight:600; color:#555}
.frm label .req{color:var(--red)}
.frm input, .frm select, .frm textarea{
  padding:11px 12px; border:1px solid var(--line); background:#fff;
  font-size:14px; font-family:inherit; color:var(--ink);
}
.frm input:focus, .frm select:focus, .frm textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(22,42,74,.08);
}
.frm textarea{min-height:130px; resize:vertical}
.frm .upl{
  border:2px dashed var(--line-d); padding:24px; text-align:center;
  color:#888; cursor:pointer; background:#fafbfc;
}
.frm .upl:hover{border-color:var(--navy); background:#f4f6fa; color:var(--navy)}
.frm-actions{display:flex; gap:8px; margin-top:12px}
.btn{
  display:inline-flex; align-items:center; gap:6px; padding:13px 26px;
  font-weight:800; font-size:13px; border:none; cursor:pointer; letter-spacing:.5px;
  font-family:inherit;
}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:var(--red-d)}
.btn-navy{background:var(--navy); color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-line{background:#fff; color:var(--navy); border:1px solid var(--line-d)}
.btn-line:hover{background:var(--soft)}

/* timeline (연혁) */
.tl{position:relative; padding-left:30px; border-left:2px solid var(--navy)}
.tl .ev{position:relative; padding:0 0 24px 24px}
.tl .ev::before{
  content:""; position:absolute; left:-31px; top:6px; width:12px; height:12px;
  background:var(--red); border:3px solid #fff; box-shadow:0 0 0 2px var(--red);
}
.tl .ev b{display:block; color:var(--navy); font-size:14px; font-weight:900; letter-spacing:1px}
.tl .ev p{margin:4px 0 0; color:#444; font-size:13px}

/* search bar (서림 참고: 형번 검색) */
.search-row{
  background:#fff; border:2px solid var(--navy);
  display:flex; align-items:center; gap:0; margin-bottom:20px;
}
.search-row label{padding:10px 16px; background:var(--navy); color:#fff; font-size:12px; font-weight:700; letter-spacing:1px}
.search-row select, .search-row input{
  padding:11px 12px; border:none; border-right:1px solid var(--line-2);
  font-size:13px; font-family:inherit; background:#fff;
}
.search-row select{width:140px}
.search-row input{flex:1; outline:none}
.search-row button{
  padding:11px 22px; background:var(--red); color:#fff; border:none;
  font-weight:800; font-size:13px; cursor:pointer; letter-spacing:1px;
}
.search-row button:hover{background:var(--red-d)}

/* dist (대리점) */
.dist-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.dist-region{
  border:1px solid var(--line); background:#fff;
}
.dist-region .dh{
  background:var(--navy); color:#fff; padding:11px 16px; font-weight:800;
  font-size:14px; letter-spacing:2px; border-bottom:2px solid var(--gold);
}
.dist-region ul{list-style:none; padding:14px 16px; margin:0}
.dist-region li{padding:8px 0; border-bottom:1px dotted var(--line-2); font-size:13px; color:#333}
.dist-region li:last-child{border:none}
.dist-region li b{display:block; color:var(--ink)}
.dist-region li small{color:#888; font-size:11px}

/* QUICK QUOTE 탭은 제거 (호환표 메뉴로 대체) */
.float-quote{display:none}

/* TOP 버튼 (우측 하단) */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:99;
  width:48px; height:48px; background:var(--navy); color:#fff;
  display:none; place-items:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  border:none; font-family:inherit; transition:all .2s;
  text-decoration:none;
}
.to-top.show{display:grid}
.to-top:hover{background:var(--red); transform:translateY(-3px)}
.to-top span{font-size:9px; font-weight:800; letter-spacing:1px; display:block; line-height:1}
.to-top span.arr{font-size:14px; margin-bottom:2px}

/* Footer */
footer{background:#0f1419; color:#9aa1ad; padding:40px 0 20px; font-size:12px; border-top:6px solid var(--navy)}
footer .grid{max-width:1280px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
footer h6{color:#fff; font-size:13px; letter-spacing:2px; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid #2a3038}
footer ul{list-style:none; padding:0; margin:0}
footer li{padding:4px 0}
footer .copy{max-width:1280px; margin:30px auto 0; padding:20px 20px 0; border-top:1px solid #2a3038; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}
.fbrand{font-size:22px; font-weight:900; color:#fff; margin-bottom:10px}
.fbrand span{color:var(--red)}
footer .biz{color:#7a818c; font-size:11px; margin-top:8px; line-height:1.7}

/* ==========================================================================
   Responsive (Mobile / Tablet / Wide PC)
   ========================================================================== */

/* ---------- 와이드 PC (1400px+) — 컨테이너 그대로 유지 ---------- */
@media(min-width:1600px){
  .header .row, .utility .row, .page, .subhero .row, footer .grid, footer .copy{max-width:1320px}
}

/* ---------- 태블릿 (980px 이하) ---------- */
@media(max-width:980px){
  .page{grid-template-columns:1fr; gap:20px; margin:20px auto 40px}
  .sidebar{position:static; order:2}
  .spec-grid, .three-col, .frm-grid, footer .grid, .dist-grid{grid-template-columns:1fr}
  .contact-info, .hero-bar::after{display:none}
  .hero-bar h1{font-size:24px}
  .hero-bar p{max-width:none; font-size:13px}
  .header .row{height:auto; padding:12px 20px; flex-wrap:wrap; gap:8px}

  /* 모바일 햄버거 메뉴 */
  .nav-toggle{
    display:block; position:absolute; right:16px; top:50%; transform:translateY(-50%);
    background:none; border:1px solid var(--line); padding:6px 12px; cursor:pointer; font-size:18px; color:var(--navy);
    z-index:60;
  }
  .topnav{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; flex-direction:column; padding:8px 0;
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    z-index:55; box-shadow:0 8px 20px rgba(0,0,0,.1);
  }
  .topnav.open{display:flex}
  .topnav a{padding:14px 20px; border-bottom:1px solid var(--line-2); border-bottom-color:var(--line-2)!important}
  .topnav a:last-child{border-bottom:none}
  .topnav a + a::before{display:none}

  .header{position:relative}
  .brand .nm{font-size:20px}

  /* 페이지 헤더(subhero) */
  .subhero{padding:30px 0; border-bottom-width:3px}
  .subhero .row{flex-direction:column; align-items:flex-start; gap:8px; padding:0 20px}
  .subhero h1{font-size:22px}
  .subhero h1 small{font-size:10px; letter-spacing:2px}

  /* utility 바 — 너무 많은 메뉴 압축 */
  .utility .row{padding:6px 14px; flex-direction:column; gap:2px; text-align:center}
  .utility a{margin:0 6px}

  /* 사이드바 — 접힘식으로 */
  .sb-title{font-size:18px; padding:16px 18px; cursor:pointer; position:relative}
  .sb-title::after{content:"▼"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-size:10px; color:#888; transition:transform .2s}
  .sb-title.collapsed::after{transform:translateY(-50%) rotate(-90deg)}
  .sb-menu, .sb-cta, .sb-tel, .sb-tree{display:block}
  .sidebar.collapsed .sb-menu,
  .sidebar.collapsed .sb-cta,
  .sidebar.collapsed .sb-tel,
  .sidebar.collapsed .sb-tree{display:none}
  .sb-menu a{padding:12px 18px}

  /* 카드 그리드 가독성 */
  .spec-card .body{grid-template-columns:1fr}
  .spec-card .body .img{border-right:none; border-bottom:1px solid var(--line-2); padding:18px}
  .spec-card .body .img img{max-height:120px}
  .spec-card .body table{font-size:12px}

  /* 표 횡스크롤 — 큰 표는 가로 스크롤 */
  .tbl, .compat-tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tbl th, .tbl td, .compat-tbl th, .compat-tbl td{white-space:nowrap}

  /* 검색바 세로 정렬 */
  .search-row{flex-direction:column; align-items:stretch; gap:0; border-width:2px}
  .search-row label{padding:10px 14px; text-align:center}
  .search-row select, .search-row input{width:100%; border-right:none; border-bottom:1px solid var(--line-2)}
  .search-row button{padding:14px; width:100%}

  /* 배너·CTA */
  .banner{flex-direction:column; text-align:center; padding:24px 18px; gap:14px}
  .banner h4{font-size:16px}
  .banner a{align-self:stretch; text-align:center; padding:14px 20px}
  .hero-bar{padding:36px 22px}
  .hero-bar .cta-row{flex-wrap:wrap}
  .hero-bar .cta-row a{padding:10px 16px; font-size:12px}

  /* 푸터 */
  footer{padding:30px 0 20px}
  footer .grid{padding:0 20px; gap:24px}
  footer .copy{flex-direction:column; gap:6px; text-align:center; padding:18px 20px 0}

  /* 회사 개요 / 사양 표 */
  .pd-grid, .pd-top, .pd-summary{grid-template-columns:1fr!important}
  .pd-info h1{font-size:22px}

  /* 폼 */
  .frm-grid, .frm-grid-3{grid-template-columns:1fr}
  .compat-intro{grid-template-columns:1fr}

  /* 대시보드/관리자 표 */
  .stat-grid{grid-template-columns:1fr 1fr; gap:10px}
}

/* ---------- 작은 모바일 (560px 이하) ---------- */
@media(max-width:560px){
  .container, .header .row, .utility .row{padding-left:16px; padding-right:16px}
  .brand .nm{font-size:18px}
  .hero-bar h1{font-size:20px}
  .hero-bar .ribbon{font-size:10px; padding:3px 10px}
  .section-head h2, .sec-title{font-size:18px}
  .stat-grid{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .product-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr}
  .strength-grid{grid-template-columns:1fr}
  .downloads-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .qbar .wrap{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}

  /* TOP 버튼 위치 */
  .to-top{right:14px; bottom:14px; width:42px; height:42px}

  /* 사이드바 메뉴 글씨 */
  .sb-menu a{font-size:13px}

  /* 푸터 회사 정보 가독성 */
  footer .grid{font-size:12px}
}

/* ---------- 햄버거 버튼 (기본은 숨김) ---------- */
.nav-toggle{display:none}