/* =========================================================
   한신테크 (cmetal.co.kr) 신규 홈페이지
   레퍼런스: lewisbrass.com  — 치수는 1384px 뷰포트에서 실측한 값
   ========================================================= */

:root{
  --navy:#08172E;        /* 본문 진한 색, 배경 밴드 */
  --navy-2:#15253F;      /* 제목 */
  --copper:#CC7D51;      /* 버튼 */
  --accent:#BD9060;
  --beige:#F1F0EE;       /* 보조 배경 */
  --beige-2:#F7F8F8;     /* 입력창 배경 */
  --text:#222222;
  --muted:rgba(8,23,46,.6);
  --border:#E6E8E9;
  --white:#ffffff;

  --serif:"Noto Serif KR","Nanum Myeongjo",serif;
  --sans:"Pretendard","Noto Sans KR","Malgun Gothic",sans-serif;

  --page:1600px;         /* 레퍼런스는 좌우 64px 여백, 최대폭 제한 거의 없음 */
  --gutter:64px;
  --radius-btn:5px;
  --radius-card:12px;
  --gap-section:50px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16.25px;          /* 레퍼런스 body: 16.25 / 22.75 */
  line-height:1.4;
  color:var(--text);
  background:var(--white);
  word-break:keep-all;
  overflow-wrap:anywhere;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}

.container{max-width:var(--page);margin:0 auto;padding:0 var(--gutter)}
.section{padding:56px 0}
.bg-beige{background:var(--beige)}
.bg-navy{background:var(--navy);color:#fff}

/* ---------- 타이포 (레퍼런스: LM Roman 700) ---------- */
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;color:var(--navy-2);line-height:1.2;letter-spacing:-0.01em}
h1{font-size:60px;line-height:72px}
h2{font-size:43.66px;line-height:52.4px}
h3{font-size:28.5px;line-height:34.2px}
h4{font-size:24px;line-height:28.8px}
.h3{font-size:36px;line-height:43.2px}      /* 레퍼런스 .h3 (36px) */
.bg-navy h1,.bg-navy h2,.bg-navy h3{color:#fff}
.eyebrow{display:block;font-family:var(--sans);font-size:13px;line-height:15.6px;letter-spacing:.1em;color:var(--navy);margin-bottom:16px;text-transform:uppercase}
.lead{font-size:19.25px;line-height:26.95px;color:var(--navy)}   /* body-large */
.muted{color:var(--muted)}
strong{font-weight:700}
p + p{margin-top:19.25px}

/* ---------- 버튼 (48px 높이, 패딩 0 24, 둥글기 5, 16px/700) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:var(--radius-btn);
  background:var(--copper);color:#fff;font-size:16px;font-weight:700;line-height:22.4px;
  transition:background .2s ease;text-align:center;white-space:nowrap
}
.btn:hover{background:var(--navy-2)}
.btn--navy{background:var(--navy-2)}
.btn--navy:hover{background:var(--copper)}
.btn--text{height:auto;padding:0;background:transparent;color:var(--copper);border-radius:0}
.btn--text:hover{background:transparent;color:var(--navy-2);text-decoration:underline;text-underline-offset:4px}
.btn--block{display:flex;width:100%}

/* ---------- 헤더 (126px, 패딩 18px 64px, 로고 205×90) ---------- */
.header{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 rgba(8,23,46,.06)}
.header__inner{display:flex;align-items:center;padding:18px var(--gutter);min-height:126px;gap:32px;max-width:var(--page);margin:0 auto}
.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo__mark{
  width:64px;height:64px;border:2.5px solid var(--navy);border-radius:4px;
  display:grid;place-items:center;font-family:var(--serif);font-weight:700;
  color:var(--navy);font-size:24px;letter-spacing:.02em;background:#fff
}
.logo__text{display:flex;flex-direction:column;line-height:1.05}
.logo__ko{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--navy);letter-spacing:.02em}
.logo__en{font-size:11px;letter-spacing:.3em;color:var(--navy);margin-top:6px;text-transform:uppercase}

.nav{display:flex;align-items:center;gap:12px}
.nav > li{position:relative}
.nav > li > a{display:flex;align-items:center;height:44px;padding:0 4px;font-size:17.5px;line-height:24.5px;color:var(--text);position:relative}
.nav > li > a::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1.5px;background:var(--navy);transform:scaleX(0);transition:transform .2s}
.nav > li > a:hover::after,.nav > li > a.is-active::after{transform:scaleX(1)}
.nav .sub{
  position:absolute;left:0;top:100%;min-width:230px;background:#fff;border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(8,23,46,.08);padding:12px 0;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all .18s ease
}
.nav > li:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav .sub a{display:block;padding:10px 24px;font-size:17.5px;line-height:24.5px;font-weight:500;color:var(--text)}
.nav .sub a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .sub .sub__title{padding:10px 24px 4px;font-size:13px;letter-spacing:.1em;color:var(--muted)}
.nav > li > a.btn{height:36px;padding:0 16px;font-size:16px;font-weight:700;color:#fff;margin-left:4px;border-radius:var(--radius-btn)}
.nav > li > a.btn::after{display:none}

.header__right{margin-left:auto;display:flex;align-items:center;gap:24px}
.header__tel{font-size:16.25px;color:var(--navy);text-decoration:underline;text-underline-offset:4px;white-space:nowrap}
.burger{display:none;width:44px;height:44px;place-items:center}
.burger span{display:block;width:24px;height:2px;background:var(--navy);margin:3px 0}

/* 모바일 드로어 */
.drawer{position:fixed;inset:0;z-index:100;visibility:hidden}
.drawer.is-open{visibility:visible}
.drawer__bg{position:absolute;inset:0;background:rgba(8,23,46,.5);opacity:0;transition:opacity .2s}
.drawer.is-open .drawer__bg{opacity:1}
.drawer__panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,380px);background:#fff;padding:24px;overflow:auto;transform:translateX(-100%);transition:transform .25s ease}
.drawer.is-open .drawer__panel{transform:none}
.drawer__close{position:absolute;right:16px;top:16px;font-size:28px;color:var(--navy)}
.drawer__panel .logo__mark{width:48px;height:48px;font-size:18px}
.drawer__panel .logo__ko{font-size:24px}
.drawer__panel > ul > li{border-bottom:1px solid var(--border)}
.drawer__panel > ul > li > a{display:block;padding:14px 0;font-size:18px;color:var(--navy);font-weight:600}
.drawer__panel .sub{padding:0 0 10px 12px}
.drawer__panel .sub a{display:block;padding:6px 0;font-size:16px;color:var(--muted)}
.drawer__panel .sub__title{display:none}
.drawer__cta{margin-top:20px;display:grid;gap:10px}

/* ---------- 히어로 (537px, 제목 60px) ---------- */
.hero{position:relative;min-height:537px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--navy) center/cover no-repeat}
.hero::before{content:"";position:absolute;inset:0;background:rgba(8,23,46,.5)}
.hero__inner{position:relative;width:100%;max-width:var(--page);padding:60px var(--gutter)}
.hero h1{color:#fff;margin-bottom:16px}
.hero p{font-size:19.25px;line-height:26.95px;margin:0 auto 24px;max-width:900px}

/* ---------- 서브페이지 배너 (326px, 제목 60px 좌측) ---------- */
.banner{position:relative;min-height:326px;display:flex;align-items:center;color:#fff;background:var(--navy) center/cover no-repeat}
.banner::before{content:"";position:absolute;inset:0;background:rgba(8,23,46,.45)}
.banner .container{position:relative;width:100%}
.banner h1{color:#fff}
.banner p{margin-top:10px;font-size:19.25px;line-height:26.95px;opacity:.92}

/* ---------- 이미지+텍스트 ---------- */
.split{display:grid;grid-template-columns:602fr 543fr;gap:96px;align-items:center}
.split--reverse{grid-template-columns:543fr 602fr}
.split__img img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0}
.split__img--round img{border-radius:var(--radius-card)}
.split h2,.split .h3{margin-bottom:36px}
.split p{font-size:19.25px;line-height:26.95px;color:var(--navy)}
.split .btn{margin-top:24px}

/* 환영 섹션: 위 56, 아래 0 (레퍼런스 multirow) */
.welcome{padding:56px 0 0}

/* ---------- 섹션 헤더 ---------- */
.sec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-bottom:20px}
.sec-head p{max-width:1046px;margin-top:20px;font-size:19.25px;line-height:26.95px}
.sec-head .btn{flex:none}
.sec-head--center{flex-direction:column;align-items:center;text-align:center}
.sec-head--center p{margin-left:auto;margin-right:auto}

/* ---------- 제품 슬라이더 (카드 4:3, 간격 20, 제목 16px/600) ---------- */
.products{padding:50px 0 56px}
.slider{position:relative;margin-top:20px}
.slider__track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.slider__track::-webkit-scrollbar{display:none}
.slider__track > *{scroll-snap-align:start}
.slider__nav{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}
.slider__btn{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--beige);color:var(--navy);transition:all .2s}
.slider__btn:hover{background:var(--navy);color:#fff}
.slider__btn svg{width:16px;height:16px}
.slider__dots{display:flex;gap:8px}
.slider__dots i{width:8px;height:8px;border-radius:50%;background:#cfd2d6}
.slider__dots i.is-active{background:var(--navy)}

.pcard{display:block}
.pcard img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;transition:opacity .2s}
.pcard:hover img{opacity:.9}
.pcard h3{font-size:16px;line-height:19.2px;font-weight:600;margin:12px 0 16px}
.pcard p{font-size:14px;line-height:1.4;color:var(--muted);margin-top:-10px}

/* 전체 제품 그리드 (레퍼런스 collections: 정사각 275, 간격 20, 4열) */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.pgrid .pcard img{aspect-ratio:1/1}

/* ---------- 탭 섹션 (슬라이드쇼: 베이지 패널 둥글기 12, 텍스트 1/3 + 이미지 2/3) ---------- */
.tabs-sec{padding:56px 0}
.tabs-sec .tabs-head h2{margin:14px 0 8px}
.tabs-sec .tabs-head p{font-size:16.25px;line-height:22.75px;color:var(--text);margin-bottom:56px}
.tabs-panels{width:100%}
.tabs-panel{display:none;grid-template-columns:470px 1fr;min-height:517px;background:var(--beige);border-radius:var(--radius-card);overflow:hidden}
.tabs-panel.is-active{display:grid}
.tabs-panel__text{padding:64px 40px 64px 96px;display:flex;flex-direction:column;justify-content:flex-start}
.tabs-panel__text h3{font-size:28.5px;line-height:34.2px;color:var(--navy);margin-bottom:12px}
.tabs-panel__text p{font-size:16.25px;line-height:22.75px;color:var(--navy)}
.tabs-panel__text p + p{margin-top:12px}
.tabs-panel__text .btn--text{margin-top:24px;align-self:flex-start}
.tabs-panel__img img{width:100%;height:100%;object-fit:cover;min-height:517px}
.tabs-nav{display:flex;gap:64px;margin:20px auto 0;max-width:var(--page);padding:0 var(--gutter);border-top:1px solid #dcdcdc;position:relative}
.tabs-nav button{width:262px;padding:24px 0 0;font-family:var(--serif);font-size:24px;line-height:28.8px;font-weight:500;color:var(--muted);text-align:center;position:relative}
.tabs-nav button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent}
.tabs-nav button.is-active{font-weight:700;color:var(--navy)}
.tabs-nav button.is-active::before{background:var(--navy)}

/* ---------- 산업분야 밴드 (600px, 제목 67.5px) ---------- */
.band{position:relative;min-height:600px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--navy) center/cover no-repeat}
.band::before{content:"";position:absolute;inset:0;background:rgba(8,23,46,.6)}
.band__inner{position:relative;max-width:880px;padding:60px 20px}
.band h2{color:#fff;font-size:67.5px;line-height:81px;margin-bottom:16px}
.band p{font-size:19.25px;line-height:26.95px;margin-bottom:32px}

/* ---------- 재고 규격 카드 (테스티모니얼 자리: 패딩 40, 간격 24, 둥글기 12) ---------- */
.stock-sec{padding:117px 0 56px}
.stock-sec h2{margin-top:14px}
.stock{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:56px}
.stock__card{background:var(--beige);border-radius:var(--radius-card);padding:40px}
.stock__card h3{font-size:24px;line-height:28.8px;margin-bottom:12px}
.stock__card .spec{font-family:var(--serif);font-size:28.5px;line-height:34.2px;color:var(--copper);margin-bottom:12px}
.stock__card p{font-size:20px;line-height:28px;color:var(--navy)}

/* ---------- 네이비 밴드 (324px: 패딩 64, 제목 36px) ---------- */
.cta{padding:64px 0;text-align:center}
.cta h2{font-size:36px;line-height:43.2px;margin-bottom:24px}
.cta p{max-width:1241px;margin:0 auto 32px;font-size:19.25px;line-height:26.95px}
.cta .contacts{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin:-12px 0 32px;font-size:19.25px}
.cta .contacts b{font-family:var(--serif);font-weight:500;color:var(--accent);margin-right:8px}

/* ---------- 견적 요청 이미지 밴드 (587px, 제목 60px) ---------- */
.quote{position:relative;min-height:587px;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;background:var(--navy) center/cover no-repeat}
.quote::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.3)}
.quote::after{content:"";position:absolute;inset:0;background:rgba(8,23,46,.55)}
.quote__inner{position:relative;z-index:1;max-width:1241px;padding:60px var(--gutter)}
.quote h2{color:#fff;font-size:60px;line-height:72px;margin-bottom:24px}
.quote p{font-size:19.25px;line-height:26.95px;margin-bottom:19.25px}
.quote .btn{margin-top:4px}

/* ---------- 회사소개 (패딩 80, 이미지 593 정사각 둥글기 12, 간격 80) ---------- */
.about-sec{padding:80px 0}
.about-sec .split{grid-template-columns:593fr 529fr;gap:80px;align-items:start}
.about-sec .split__img img{border-radius:var(--radius-card)}
.about-sec h2{margin-bottom:16px}
.features{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;margin-top:40px}
.feature{display:flex;flex-direction:column;gap:12px}
.feature__icon{width:56px;height:56px;background:#fff;border-radius:8px;display:grid;place-items:center;box-shadow:0 4px 14px rgba(8,23,46,.07);color:var(--copper)}
.feature__icon svg{width:24px;height:24px}
.feature h3{font-size:24px;line-height:28.8px}
.feature p{font-size:16.25px;line-height:22.75px;color:var(--navy)}
.about-sec .btn{margin-top:40px}

/* 회사소개 페이지: 4열 특징 (카드 268, 간격 56) */
.features--4{grid-template-columns:repeat(4,1fr);gap:56px;text-align:center;margin-top:0}
.features--4 .feature{align-items:center}
.features--4 .feature__icon{margin-bottom:12px}
.features--4 h3{font-size:28.5px;line-height:34.2px}

/* ---------- 기술자료 카드 (398×373, 이미지 16:9 둥글기 12, 제목 24px) ---------- */
.kc-sec{padding:56px 0 32px}
.kc{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.kc a{display:block;border-radius:var(--radius-card);background:var(--beige);padding-bottom:32px;min-height:373px}
.kc img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-card)}
.kc h3{font-size:24px;line-height:28.8px;margin:32px 32px 0;color:var(--navy)}
.kc p{font-size:16.25px;line-height:22.75px;color:var(--muted);margin:8px 32px 0}
.kc-sec .sec-head p{margin-top:8px;font-size:16.25px;line-height:22.75px;color:var(--text)}
.stock-sec .lead{margin-top:20px;font-size:16.25px;line-height:22.75px;color:var(--text);max-width:860px}

/* ---------- FAQ (폭 1080, 항목 패딩 32 40) ---------- */
.faq-sec{padding:123px 0 56px}
.faq-wrap{max-width:1080px;margin:0 auto;text-align:center}
.faq-wrap h2{margin-top:14px}
.faq-wrap > p{font-size:19.25px;line-height:26.95px;margin-top:43.66px}
.faq{max-width:1080px;margin:56px auto 0;text-align:left}
.faq__item{background:var(--beige);border-radius:var(--radius-card);margin-bottom:16px;overflow:hidden}
.faq__q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:32px 40px;font-size:20px;line-height:28px;font-weight:400;color:var(--navy);text-align:left}
.faq__q i{width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;transition:transform .25s}
.faq__q i svg{width:12px;height:12px}
.faq__item.is-open .faq__q i{transform:rotate(45deg)}
.faq__a{display:none;padding:0 40px 32px;font-size:16.25px;line-height:22.75px;color:var(--navy-2)}
.faq__item.is-open .faq__a{display:block}

/* ---------- 푸터 (베이지, 패딩 64, 로고 240, 제목 13px, 링크 15.5px) ---------- */
.footer{background:var(--beige);padding:64px 0 0;font-size:15.5px;line-height:21.7px;color:var(--navy)}
.footer__grid{display:grid;grid-template-columns:270px 200px 160px 220px;justify-content:start;column-gap:48px}
.footer__about .logo__mark{width:56px;height:56px;font-size:20px}
.footer__about .logo__ko{font-size:28px}
.footer__about p{margin-top:24px;font-size:15.5px;line-height:21.7px;color:var(--navy)}
.footer h4{font-family:var(--sans);font-size:13px;line-height:15.6px;letter-spacing:.1em;color:var(--navy);margin:4px 0 16px;font-weight:400;text-transform:uppercase}
.footer li{padding:6px 0;color:var(--muted)}
.footer li:first-child{padding-top:0}
.footer a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.footer__contact li{color:var(--navy);font-size:16.25px;line-height:22.75px;padding:0 0 10px}
.footer__bottom{border-top:1px solid #dcdcdc;margin-top:64px;padding:28px 0 36px;font-size:13px;color:var(--muted);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- 서브페이지 공통 ---------- */
.intro{text-align:center;padding:95px 0 56px}
.intro p{max-width:1241px;margin:16px auto 0;font-size:16.25px;line-height:22.75px;color:var(--navy)}
.prose p{margin-bottom:16px;font-size:16.25px;line-height:22.75px}
.prose ul{padding-left:20px;list-style:disc;margin:8px 0 16px}
.prose li{margin-bottom:6px}
.prose h3{margin:34px 0 12px;font-size:24px;line-height:28.8px}

/* 산업분야 그리드 (배너 그리드: 398×424, 간격 24, 제목 28.5px, 링크 16px/700) */
.igrid-sec{padding:56px 0 80px}
.igrid-sec h2{text-align:center;margin-bottom:24px}
.igrid-sec > .container > p{text-align:center;max-width:860px;margin:0 auto;font-size:19.25px;line-height:26.95px}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.igrid--2{grid-template-columns:1fr 1fr}
.icard{position:relative;aspect-ratio:398/424;overflow:hidden;display:grid;place-items:center;background:var(--navy) center/cover no-repeat;color:#fff;text-align:center;border-radius:0}
.igrid--2 .icard{aspect-ratio:609/452}
.icard::before{content:"";position:absolute;inset:0;background:rgba(8,23,46,.45);transition:background .2s}
.icard:hover::before{background:rgba(8,23,46,.3)}
.icard > div{position:relative;padding:0 24px}
.icard h3{color:#fff;font-size:28.5px;line-height:34.2px}
.igrid--2 .icard h3{font-size:36px;line-height:43.2px}
.icard p{font-size:16.25px;line-height:22.75px;opacity:.92;margin-top:10px}
.icard span{display:inline-block;margin-top:24px;font-size:16px;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:4px}

/* 연락처 카드 (617×260, 패딩 40, 둥글기 12, 간격 8) */
.contact-sec{padding:56px 0 0}
.contact-sec > .container > .lead{margin-bottom:56px}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px 8px;margin:0 0 44px}
.ccard{background:var(--beige);border-radius:var(--radius-card);padding:40px;text-align:center}
.ccard .feature__icon{margin:0 auto 24px}
.ccard h3{font-size:28.5px;line-height:34.2px;margin-bottom:12px}
.ccard p{font-size:16.25px;line-height:22.75px;color:var(--navy)}
.ccard a{color:var(--copper);text-decoration:underline;text-underline-offset:3px}
.contact-sec h2{margin:43.66px 0}
.contact-sec h2 + p{font-size:19.25px;line-height:26.95px;margin-top:-20px}

/* 폼 (폭 884 중앙, 입력 53px, 둥글기 2, 글자 14px) */
.form{max-width:884px;margin:48px auto 0}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px}
.form input,.form textarea,.form select{width:100%;height:53px;padding:14px 12px;border:1px solid var(--border);border-bottom:1px solid rgba(8,23,46,.4);background:var(--beige-2);border-radius:2px;font-family:inherit;font-size:14px;line-height:22px;color:var(--text)}
.form textarea{height:121px;resize:vertical}
.form input:focus,.form textarea:focus{outline:2px solid var(--navy);outline-offset:-1px}
.form .btn{margin-top:4px}
.form__note{font-size:13px;color:var(--muted);margin-top:12px}

/* 지도 */
.map{margin-top:40px;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border)}
.map iframe{width:100%;height:420px;border:0;display:block}
.addr{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.addr div{background:#fff;padding:24px 28px;border-radius:var(--radius-card);font-size:16.25px;line-height:22.75px;color:var(--navy)}
.addr b{display:block;font-size:13px;letter-spacing:.1em;color:var(--muted);margin-bottom:8px;font-weight:400}

/* 규격표 */
.spec-wrap{overflow-x:auto;margin:18px 0 36px;border:1px solid var(--border);border-radius:6px}
table.spec{width:100%;border-collapse:collapse;font-size:14px;line-height:1.4;min-width:640px;background:#fff}
table.spec th,table.spec td{border:1px solid var(--border);padding:10px 12px;text-align:center;vertical-align:middle;white-space:nowrap}
table.spec th{background:var(--beige);color:var(--navy);font-weight:600}
table.spec td.l{text-align:left;white-space:normal;min-width:220px}
table.spec tbody th{background:var(--beige-2);font-weight:600}
.spec-title{font-family:var(--serif);font-size:24px;line-height:28.8px;font-weight:700;color:var(--navy);margin:40px 0 8px;padding-left:14px;border-left:3px solid var(--copper)}
.spec-note{font-size:13px;color:var(--muted);margin-top:-8px}

/* 제품 상세 상단 */
.pd-top{display:grid;grid-template-columns:593fr 569fr;gap:80px;align-items:center;padding:56px 0 24px}
.pd-top img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-card)}
.pd-top h2{margin-bottom:16px}
.pd-top p{font-size:19.25px;line-height:26.95px;color:var(--navy)}
.pd-top .tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.pd-top .tags span{background:var(--beige);padding:6px 14px;border-radius:30px;font-size:14px;color:var(--navy)}
.pd-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.pd-nav a{padding:8px 16px;border:1px solid var(--border);border-radius:30px;font-size:14px;color:var(--navy)}
.pd-nav a.is-active,.pd-nav a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

/* 회사소개 취급품목 리스트 */
.items{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:40px}
.items li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid #dcdcdc;font-size:16.25px;line-height:22.75px;color:var(--navy)}
.items li b{color:var(--navy);min-width:170px;font-weight:600}

/* 상단 이동 */
.totop{position:fixed;right:24px;bottom:24px;width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;opacity:0;visibility:hidden;transition:all .25s;z-index:40}
.totop.is-show{opacity:1;visibility:visible}
.totop svg{width:16px;height:16px}

/* ---------- 반응형 ---------- */
@media (max-width:1200px){
  :root{--gutter:32px}
  h1{font-size:48px;line-height:1.2}
  h2{font-size:36px;line-height:1.2}
  .band h2{font-size:48px;line-height:1.2}
  .quote h2{font-size:48px;line-height:1.2}
  .nav{gap:6px}
  .nav > li > a{font-size:16px}
  .header__inner{gap:20px}
  .slider__track{grid-auto-columns:calc((100% - 40px)/3)}
  .pgrid{grid-template-columns:repeat(3,1fr)}
  .stock{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr;row-gap:36px}
  .features--4{grid-template-columns:1fr 1fr;gap:40px}
  .split,.split--reverse,.about-sec .split{gap:48px}
  .tabs-panel{grid-template-columns:1fr 1.4fr}
  .tabs-panel__text{padding:40px}
  .tabs-nav{gap:24px}
  .tabs-nav button{width:auto;flex:1;font-size:20px}
}
@media (max-width:860px){
  :root{--gutter:16px}
  body{font-size:16px}
  .section,.products,.tabs-sec,.about-sec,.kc-sec,.igrid-sec{padding:48px 0}
  .stock-sec,.faq-sec{padding:56px 0 48px}
  h1{font-size:38px}
  h2{font-size:30px}
  h3{font-size:24px;line-height:1.25}
  .nav,.header__tel,.header .btn{display:none}
  .burger{display:grid}
  .header__inner{min-height:80px;padding:12px var(--gutter)}
  .logo__mark{width:48px;height:48px;font-size:18px}
  .logo__ko{font-size:24px}
  .hero{min-height:440px}
  .hero p{font-size:17px}
  .banner{min-height:240px}
  .split,.split--reverse,.about-sec .split{grid-template-columns:1fr;gap:28px}
  .split--reverse .split__img{order:-1}
  .split h2,.split .h3{margin-bottom:20px}
  .sec-head{flex-direction:column;align-items:flex-start}
  .slider__track{grid-auto-columns:calc((100% - 16px)/2);gap:16px}
  .pgrid{grid-template-columns:1fr 1fr;gap:16px}
  .tabs-panel{grid-template-columns:1fr;min-height:0}
  .tabs-panel__img img{min-height:240px;max-height:300px}
  .tabs-panel__text{padding:28px 22px}
  .tabs-nav{flex-wrap:wrap;gap:0}
  .tabs-nav button{flex:1 1 50%;padding:16px 6px 0;font-size:17px;line-height:1.3}
  .band{min-height:460px}
  .band h2{font-size:34px}
  .quote{min-height:440px}
  .quote h2{font-size:36px}
  .stock,.kc,.igrid,.addr{grid-template-columns:1fr}
  .stock__card{padding:28px}
  .igrid--2{grid-template-columns:1fr}
  .igrid--2 .icard,.icard{aspect-ratio:16/10}
  .features{grid-template-columns:1fr}
  .features--4{grid-template-columns:1fr;gap:28px}
  .features--4 h3{font-size:24px}
  .cgrid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .pd-top{grid-template-columns:1fr;gap:28px;padding-top:36px}
  .items{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr;row-gap:28px}
  .footer__bottom{margin-top:40px}
  .cta h2{font-size:30px;line-height:1.2}
  .faq__q{padding:22px 24px;font-size:17px;line-height:1.4}
  .faq__a{padding:0 24px 22px}
  .kc h3,.kc p{margin-left:0;margin-right:0}
  .intro{padding:48px 0 32px}
}
@media (max-width:480px){
  .slider__track{grid-auto-columns:88%}
  .pgrid{grid-template-columns:1fr}
}