/* Barlow — self-hosted, subset per Google Fonts' original slicing. */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400-vietnamese.3dd62fbb.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400-latin-ext.bac411df.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/barlow-400-latin.7a686e76.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-500-vietnamese.2e907607.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-500-latin-ext.7985f1ab.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/barlow-500-latin.80e7dc56.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600-vietnamese.95da6188.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600-latin-ext.67dfa555.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/barlow-600-latin.488b5809.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700-vietnamese.892f58db.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700-latin-ext.2b0e3243.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/barlow-700-latin.98aa8b5c.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- base ---- */
body { margin:0; background:#ffffff; color:#1d1f20; font-family:"Barlow",system-ui,sans-serif; font-size:16px; line-height:1.6; }
a { color:#1d4470; text-decoration:none; }
a:hover { text-decoration:underline; }
* { box-sizing:border-box; }
.txt-ko { display:none; }
body.lang-ko .txt-en { display:none; }
body.lang-ko .txt-ko { display:inline; }
body.lang-ko .txt-ko.blk { display:block; }

.rfq-field{margin-bottom:12px}.rfq-field label{display:block;font-size:12.5px;font-weight:600;color:#1d1f20;margin-bottom:5px}.rfq-req{color:#d8232a}.rfq-opt{font-weight:400;color:#6b6e71;font-size:11.5px}.rfq-hint{font-size:11.5px;color:#6b6e71;margin-top:4px}.rfq-field input,.rfq-field textarea{width:100%;font:inherit;font-size:14px;color:#1d1f20;background:#fff;border:1px solid #c9ccd0;border-radius:4px;padding:9px 10px}.rfq-field textarea{resize:vertical}.rfq-field input:focus,.rfq-field textarea:focus{outline:2px solid #16375c;outline-offset:1px}.rfq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}#rfq-submit{display:block;width:100%;text-align:center;padding:13px;background:#d8232a;color:#fff;font-weight:600;font-size:16px;border:none;cursor:pointer;margin-top:4px;font-family:inherit}#rfq-submit:disabled{opacity:.6;cursor:default}.rfq-status{font-size:13px;color:#b3261e;margin-top:8px;min-height:1em}.rfq-success{display:none;border:1px solid #cfe3d3;background:#f2f9f3;border-radius:4px;padding:16px;font-size:13.5px;color:#1f4a2a}.rfq-success.show{display:block}.rfq-success strong{display:block;font-size:15px;margin-bottom:4px}html{scroll-behavior:smooth}

/* ---- layout ----
   These rules used to live in style="" attributes on the containers themselves,
   which is why the page had exactly one media query and six unreachable grids.
   With the track definitions here, the breakpoints below can do their job. */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding-top: 56px; padding-bottom: 56px; }

.topbar-inner { padding-top: 8px; padding-bottom: 8px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.site-header-row { padding-top: 16px; padding-bottom: 16px; display: flex; align-items: center; gap: 32px; }
.footer-inner { padding-top: 28px; padding-bottom: 28px; line-height: 1.8; }

.hero-grid { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: center; }
.hero-title { font-size: clamp(27px, 4.4vw, 40px); line-height: 1.2; font-weight: 700; margin: 0 0 18px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 22px 20px; border-right: 1px solid #dcdee0; }
.stat:first-child { padding-left: 0; }
.stat:last-child { padding-right: 0; border-right: none; }
.stat-num { font-size: clamp(24px, 3.2vw, 30px); font-weight: 700; color: #16375c; }
.stat-label { font-size: 13.5px; color: #4a4d50; }

.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.contact-grid { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.makers-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: #dcdee0; border: 1px solid #dcdee0; }
.maker-cell { background: #fff; display: grid; place-items: center; height: 86px; padding: 16px; }
.maker-cell-text { font-size: 14px; color: #6b6e71; text-align: center; }
/* height:auto 가 없으면 <img height> 속성이 박스 높이를 잡아버려 max-height 로만 잘리고,
   로고가 원래 비율로 놓이지 않는다. 2026-08-24 실측. */
.maker-logo { max-width: min(136px, 100%); max-height: 42px; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }

.sec-title { font-size: clamp(22px, 3.4vw, 28px); font-weight: 700; margin: 0 0 6px; color: #16375c; }
.sec-title-invert { color: inherit; margin-bottom: 14px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.certs-table { background: #fff; }
.contact-table { font-size: 15px; }

/* The certifications table cannot reflow below roughly 420px, so it scrolls
   inside its own box instead of pushing the whole page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll .certs-table { min-width: 420px; }

.rfq-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ---- breakpoints ---- */

@media (max-width: 980px) {
  .hero-grid,
  .company-grid,
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .makers-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .wrap { padding: 0 18px; }
  .section,
  .hero-grid,
  .contact-grid { padding-top: 40px; padding-bottom: 40px; }

  .site-header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-nav { margin-left: 0; width: 100%; }

  .makers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .makers-grid * { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
  .maker-cell { height: 76px; padding: 10px; }
  .maker-cell-text { font-size: 12.5px; }
  .maker-logo { max-height: 34px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 16px 16px; border-bottom: 1px solid #dcdee0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(even) { padding-right: 0; border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }

  /* Header CTA and hero panel are full-width targets on a phone. */
  .site-header-row > a:last-child { align-self: stretch; text-align: center; }
}

@media (max-width: 620px) {
  .cards-grid { grid-template-columns: 1fr; }
  .topbar-inner { gap: 6px 14px; }
  .topbar-inner > .sep { display: none; }

  /* Certifications stack into cards. Scrolling the table sideways would leave
     the certificate PDFs — the whole point of the section — off-screen. */
  .table-scroll { overflow: visible; }
  .table-scroll .certs-table { min-width: 0; }
  .certs-table thead { display: none; }
  .certs-table,
  .certs-table tbody,
  .certs-table tr,
  .certs-table td { display: block; width: auto; }
  .certs-table tr { border: 1px solid #dcdee0; margin-bottom: 14px; background: #fff; }
  .certs-table td { border: 0 !important; padding: 10px 14px !important; }
  .certs-table td + td { border-top: 1px solid #eef0f1 !important; display: flex; gap: 12px; align-items: center; }
  .certs-table td + td::before {
    content: attr(data-label);
    flex: 0 0 84px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6b6e71;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  body.lang-ko .certs-table td + td::before { content: attr(data-label-ko); text-transform: none; }
  .rfq-row { grid-template-columns: 1fr; gap: 0; }
  .rfq-row > div { margin-bottom: 12px; }
  .data-table th,
  .data-table td { padding-left: 10px; padding-right: 10px; }
  .contact-table th,
  .contact-table td { padding-left: 0; padding-right: 0; }
}

/* Nothing on this page benefits from a sideways scrollbar. */
body { overflow-wrap: break-word; }
img { max-width: 100%; }

/* ===========================================================
   아래는 2026-08-24 이전까지 index.html 안에 인라인 <style> 로 있던 블록이다.
   제품 카테고리 페이지가 같은 클래스를 쓰기 때문에 공용 스타일시트로 옮겼다.
   =========================================================== */

/* ---- 취급 설비 목록 (실제 반영 시 이 블록은 styles.css로 옮길 것) ---- */
.eq-lede { font-size:14.5px; color:#6b6e71; margin-bottom:14px; }


.eq-band { border:1px solid #dcdee0; background:#fff; margin-bottom:18px; }
.eq-band:last-of-type { margin-bottom:0; }
.eq-head { display:flex; align-items:baseline; gap:14px; padding:11px 16px;
           background:#16375c; color:#fff; font-size:15px; }
.eq-mkname { font-weight:600; }
.eq-sub { font-weight:400; font-size:12.5px; color:#aebdd0; }

.eq-grid { display:grid; grid-template-columns:1fr 1fr; }
.eq-row { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:baseline;
          padding:9px 16px; border-top:1px solid #eceef0; }
.eq-grid > .eq-row:nth-child(even) { border-left:1px solid #eceef0; }
.eq-grid > .eq-row:nth-child(-n+2) { border-top:none; }
.eq-grid > .eq-row:last-child:nth-child(odd) { grid-column:1 / -1; }
.eq-tx { display:grid; grid-template-columns:152px 1fr; gap:14px; align-items:baseline;
         min-width:0; }
.eq-tx b { font-size:13.5px; font-weight:600; color:#1d1f20; }
.eq-tx span { font-size:13.5px; color:#4a4d50; }

.eq-items { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
            gap:0 30px; padding:0 16px 8px; }
.eq-item { padding:8px 0; border-bottom:1px solid #eceef0; font-size:13.5px;
           line-height:1.45; color:#3a3c3e; }
.eq-grp { grid-column:1 / -1; padding:14px 0 4px; font-size:11.5px; font-weight:600;
          letter-spacing:.07em; text-transform:uppercase; color:#8a8d90; }
.eq-grp:first-child { padding-top:8px; }

.eq-note { margin:18px 0 0; font-size:13.5px; color:#4a4d50; }

/* 설비명과 메이커를 나란히 두기엔 칸이 좁아지는 지점. 위아래로 쌓아 오른쪽 빈 공간을 없앤다. */
@media (max-width: 900px) {
  .eq-tx { grid-template-columns:1fr; gap:1px; }
}
/* 2열이 실제로 좁아지는 건 여기부터다. 980px에서 1열로 떨구면 900px대가 텅 빈다. */
@media (max-width: 700px) {
  .eq-grid { grid-template-columns:1fr; }
  .eq-grid > .eq-row:nth-child(even) { border-left:none; }
  .eq-grid > .eq-row:nth-child(2) { border-top:1px solid #eceef0; }
  .eq-grid > .eq-row:first-child { border-top:none; }
}
@media (max-width: 620px) {
  /* 헤더가 3~4줄로 흘러내리지 않게: 1행은 이름+배지, 부제는 그 아래 전체폭. */
  .eq-head { display:grid; grid-template-columns:1fr auto; column-gap:10px; row-gap:3px;
             align-items:baseline; }
  .eq-head .eq-mkname { grid-column:1; grid-row:1; }
  .eq-head .eq-sub { grid-column:1 / -1; }
  .eq-head .eq-mkname .eq-sub { display:inline; }
  .eq-items { grid-template-columns:1fr; }
  .eq-item { padding:7px 0; }
}

/* ---- 카탈로그 다운로드 ---- */
.cat-dl { display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center;
          border:1px solid #dcdee0; background:#f4f5f6; padding:22px 24px; margin-top:22px; }
.cat-cover { background:#fff url(/image/catalogue/cover_en.530bfae1.jpg) center/cover no-repeat;
             border:1px solid #dcdee0; aspect-ratio:640/900; }
body.lang-ko .cat-cover { background-image:url(/image/catalogue/cover_ko.567a6144.jpg); }
.cat-ttl { font-size:19px; font-weight:700; color:#16375c; margin-bottom:6px; }
.cat-desc { margin:0 0 14px; font-size:14px; color:#4a4d50; }
.cat-rows { display:grid; gap:8px; }
.cat-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.cat-lang { min-width:64px; font-size:13.5px; font-weight:600; color:#1d1f20; }
.cat-btn { display:inline-flex; align-items:baseline; gap:7px; padding:9px 16px;
           background:#16375c; color:#fff; font-weight:600; font-size:14.5px; text-decoration:none; }
.cat-btn.alt { background:#fff; color:#16375c; border:1px solid #16375c; }
.cat-btn span { font-weight:400; font-size:12px; opacity:.72; }
.cat-btn:hover { text-decoration:none; }
.cat-cover { display:block; }

/* 메이커 29개는 6·4·3열 어디에도 딱 나눠떨어지지 않는다. 마지막 셀(워드마크)이 남는 칸을
   채우지 않으면 그 자리에 격자 배경(#dcdee0)이 회색 구멍으로 드러난다. */
/* 메이커 30개: 6열·3열은 딱 나눠떨어지고, 4열에서만 마지막 2칸이 남는다 */

@media (max-width: 980px) { .makers-grid > .maker-cell:last-child { grid-column:span 3; } }
@media (max-width: 768px) { .makers-grid > .maker-cell:last-child { grid-column:span 1; } }
@media (max-width: 620px) {
  .cat-dl { grid-template-columns:1fr; gap:16px; padding:18px; }
  .cat-cover { max-width:140px; }
  .cat-lang { flex:0 0 100%; min-width:0; }
  .cat-btn { flex:1 1 auto; justify-content:center; }
}

/* ---- FAQ ---- */
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 44px;
            border-top:1px solid #dcdee0; }
.faq-item { padding:16px 0 18px; border-bottom:1px solid #dcdee0; }
.faq-grid > .faq-item:last-child:nth-child(odd) { grid-column:1 / -1; }
.faq-q { font-size:15.5px; font-weight:600; color:#16375c; margin-bottom:6px; }
.faq-a { font-size:14.5px; line-height:1.65; color:#3a3c3e; max-width:62ch; }
@media (max-width: 760px) { .faq-grid { grid-template-columns:1fr; } }

/* ---- 인증서 썸네일 ---- */
/* .cert-thumb 에 display 를 주면 .txt-ko{display:none} 와 특이도가 같아져 국문판이
   영문 화면에도 새어나온다. 그래서 display 는 건드리지 않는다. */
.cert-thumb { position:relative; }
.cert-thumb img { width:78px; height:106px; object-fit:contain; background:#fff;
                  border:1px solid #dcdee0; vertical-align:middle; }
.cert-thumb:hover img { border-color:#16375c; }
.cert-thumb:focus-visible { outline:2px solid #16375c; outline-offset:2px; }
/* 확대본은 position:fixed 라 표의 overflow 에 잘리지 않는다. */
.cert-zoom { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
             z-index:60; padding:10px; background:#fff; border:1px solid #dcdee0;
             box-shadow:0 18px 48px rgba(0,0,0,.3); pointer-events:none;
             opacity:0; visibility:hidden; }
.cert-thumb:hover .cert-zoom, .cert-thumb:focus-visible .cert-zoom { opacity:1; visibility:visible; }
.cert-zoom img { width:auto; height:min(74vh, 820px); border:none; }
@media (hover: none) { .cert-zoom { display:none; } }

/* ---- 카탈로그 페이지 미리보기 ----
   PDF 링크는 브라우저 설정에 따라 미리보기 대신 다운로드로 떨어진다.
   그래서 페이지를 이미지로 깔아 어떤 환경에서도 내용이 보이게 한다. */
.cat-pw { grid-column:1 / -1; }
.cat-pages { display:flex; gap:8px; overflow-x:auto; padding:16px 0 2px;
             -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.cat-pg { position:relative; flex:0 0 auto; line-height:0; }
.cat-pg img { display:block; width:130px; height:auto; border:1px solid #dcdee0;
              background:#fff; }
.cat-pg:hover img { border-color:#16375c; }
.cat-pg:focus-visible { outline:2px solid #16375c; outline-offset:2px; }
.cat-pg span { position:absolute; left:0; bottom:0; background:rgba(22,55,92,.86);
               color:#fff; font-size:10.5px; line-height:1; padding:3px 6px;
               font-variant-numeric:tabular-nums; }
@media (max-width: 620px) { .cat-pg img { width:104px; } }

/* ===========================================================
   제품 카테고리 페이지 (2026-08-24)

   원칙: 새 디자인 언어를 만들지 않는다. 제목·리드문·표·FAQ·카드·버튼은
   전부 메인 페이지가 이미 쓰는 것(.sec-title .eq-lede .data-table .faq-*
   .cards-grid)을 그대로 쓴다. 아래는 그것만으로 부족한 네 가지뿐이고,
   값도 전부 기존 화면에서 쓰던 수치를 그대로 가져왔다.
   =========================================================== */

/* H1. .sec-title 과 같은 모양이되 한 단계만 크다. */
.page-title { font-size: clamp(24px, 3.9vw, 32px); font-weight: 700; margin: 0 0 6px; color: #16375c; }

/* H3. 값은 .faq-q 와 동일 — 여백만 붙였다. */
.sub-title { font-size: 15.5px; font-weight: 600; color: #16375c; margin: 22px 0 6px; }

/* 본문 문단. 값은 취급품목 카드의 리스트와 동일(14.5px / #3a3c3e). */
.body-p { font-size: 14.5px; line-height: 1.7; color: #3a3c3e; margin: 0 0 14px; max-width: 78ch; }

/* 표. 메인의 회사정보표·인증표가 셀마다 인라인으로 갖고 있던 값을 클래스로 옮긴 것.
   보이는 모양은 그 표들과 같다. */
.spec-table th, .spec-table td { border: 1px solid #dcdee0; padding: 9px 12px; vertical-align: top; text-align: left; }
.spec-table thead th { background: #16375c; color: #fff; font-weight: 600; white-space: nowrap; }
.spec-table tbody th { background: #f4f5f6; font-weight: 600; color: #1d1f20; }
.spec-table caption { caption-side: top; text-align: left; font-size: 13px; color: #6b6e71; padding: 0 0 8px; }

/* 표는 자기 상자 안에서만 가로로 움직인다.
   .table-scroll 을 재사용하면 안 된다 — 620px 이하에서 그 클래스는 overflow:visible 로
   덮여 있어(인증서 표를 카드로 펴려고) 표가 페이지 전체를 옆으로 민다.
   2026-08-24 실측: 375px 에서 scrollWidth 538 > clientWidth 375. */
.spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 빵부스러기 한 줄. */
.crumbs { font-size: 13px; color: #8a8d90; padding-top: 18px; }
.crumbs a { color: #8a8d90; }
.crumbs span.sep { margin: 0 7px; color: #c9ccd0; }

/* 취급품목 카드 맨 아래 링크 한 줄. 카드 하단 회색 줄과 같은 자리·같은 크기다. */
.card-more { display: block; padding: 11px 18px; border-top: 1px solid #dcdee0;
             font-size: 13.5px; font-weight: 600; color: #16375c; }
.card-more:hover { background: #f4f5f6; text-decoration: none; }

@media (max-width: 620px) { .spec-scroll .spec-table { min-width: 520px; } }

/* Scroll scenes: home-only progressive enhancement. Native wheel/touch scrolling. */
.scroll-home { --scene-ease: cubic-bezier(.2,.75,.2,1); }
.hero-scene { position:relative; isolation:isolate; }
.hero-stage { position:relative; overflow:hidden; background:#102842; }
.hero-visual { position:absolute; inset:0; pointer-events:none; }
.hero-visual img { width:100%; height:100%; object-fit:cover; object-position:center 44%; opacity:.46; }
.hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,24,43,.97),rgba(10,31,53,.74) 48%,rgba(10,31,53,.25)),linear-gradient(0deg,#102842,transparent 45%); }
.scroll-home .hero-grid { position:relative; z-index:1; min-height:650px; padding-top:88px; padding-bottom:100px; grid-template-columns:1.4fr 1fr; gap:64px; }
.scroll-home .hero-title { font-size:clamp(34px,3.6vw,52px); line-height:1.23; letter-spacing:-.035em; word-break:keep-all; text-wrap:balance; }
.scene-eyebrow { font-size:14px; font-weight:600; letter-spacing:.16em; margin:0 0 28px; color:#fff; }
.scene-eyebrow span { display:block; font-size:12px; margin-top:10px; color:#b6c8dc; letter-spacing:.12em; }
.scroll-home .hero-grid > div:last-child { border-radius:2px; box-shadow:0 24px 72px #0003; }
.scene-scroll { position:absolute; bottom:28px; left:max(24px,calc((100% - 1132px)/2)); z-index:2; display:flex; gap:18px; align-items:center; color:#d3dde8; font-size:13px; text-decoration:none; }
.scroll-line { display:block; width:56px; height:1px; background:#ffffff40; position:relative; overflow:hidden; }
.scroll-line::after { content:""; position:absolute; inset:0; background:#fff; transform:scaleX(.45); transform-origin:left; }
.scene-stats { position:relative; z-index:2; }
.scroll-home .section { padding-top:88px; padding-bottom:88px; }
.scroll-home section { scroll-margin-top:24px; }
.scroll-home .sec-title { text-wrap:balance; }
.scroll-home .motion-item { transition:opacity .75s var(--scene-ease),transform .85s var(--scene-ease); transition-delay:var(--reveal-delay,0ms); }
.scroll-home .motion-pending { opacity:0; transform:translate3d(0,38px,0); }
.scroll-home .motion-item:focus-within { opacity:1; transform:none; transition:none; }
.scroll-home #stock figure { transition:opacity .75s var(--scene-ease),transform .85s var(--scene-ease); }
.scroll-home #stock figure img { border-radius:3px; }
.scroll-home .page-progress { position:fixed; top:0; left:0; right:0; height:3px; z-index:100; background:#d8232a; transform:scaleX(0); transform-origin:left; pointer-events:none; }
@media(min-width:981px) and (min-height:650px) and (prefers-reduced-motion:no-preference) {
  .scroll-home.motion-ready .hero-scene { height:calc(var(--stage-height,850px) + 40vh); }
  .scroll-home.motion-ready .hero-stage { position:sticky; top:0; }
  .scroll-home.motion-ready .hero-grid { min-height:100svh; }
  .scroll-home.motion-ready .hero-visual img { transform:scale(var(--hero-scale,1)); will-change:transform; }
  .scroll-home.motion-ready .hero-grid { transform:translate3d(0,var(--hero-drift,0px),0); }
  .scroll-home.motion-ready .hero-scene { background:#102842 !important; }
  .scroll-home.motion-ready .scene-stats { margin-top:-32px; border-radius:32px 32px 0 0; box-shadow:0 -20px 60px #0002; }
}
@media(max-width:980px) {
  .scroll-home .hero-grid { grid-template-columns:1fr; min-height:0; gap:32px; padding-top:48px; padding-bottom:80px; }
  .scroll-home .hero-title { font-size:clamp(30px,5.4vw,48px); }
  .hero-visual::after { background:linear-gradient(90deg,rgba(7,24,43,.93),rgba(10,31,53,.7)),linear-gradient(0deg,#102842,transparent); }
  .scroll-home .section { padding-top:56px; padding-bottom:56px; }
  .scene-eyebrow { margin-bottom:22px; }
}
@media(prefers-reduced-motion:reduce) {
  html:has(.scroll-home) { scroll-behavior:auto; }
  .scroll-home .motion-item,.scroll-home #stock figure { opacity:1; transform:none; transition:none; }
  .scroll-home .page-progress { display:none; }
}
@media print {
  .scroll-home .motion-item { opacity:1; transform:none; }
  .hero-visual,.scene-scroll,.page-progress { display:none !important; }
  .scroll-home.motion-ready .hero-scene { height:auto; }
  .scroll-home.motion-ready .hero-stage { position:static; }
}