/* 웹폰트는 views/partials/header.php 의 <link> 에서 불러온다 (@import 는 렌더 시작을 한 단계 늦춘다). */

:root {
  --navy-950: #171845;
  --navy-900: #1d1f55;
  --navy-800: #283583;
  --blue-500: #283583;
  --accent: #e8502b;
  --accent-600: #c93f1d;
  --accent-soft: #ffede6;
  --ice-100: #e2e5f0;
  --ice-50: #f4f6fb;
  --ink: #111827;
  --muted: #6b7280;
  --line: #e2e5f0;
  --white: #ffffff;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --page: min(1760px, calc(100vw - clamp(40px, 7.5vw, 144px)));
  --edge: max(20px, calc((100vw - var(--page)) / 2));
  --title-display: clamp(40px, 4.3vw, 58px);
  --title-page: clamp(40px, 4.8vw, 68px);
  --title-section: clamp(30px, 3.2vw, 48px);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* 한국어는 낱말 가운데서 줄을 바꾸지 않는다 ("사무/동", "인/증" 방지). 칸보다 긴 낱말만 넘치지 않게 끊는다. */
html[lang="ko"] body {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--font); font-size: 15px; line-height: 1.65; overflow-wrap: break-word; }
/* 제목은 언어마다 길이가 크게 달라(태국어·영어가 한국어보다 길다) 모바일에서
   마지막 줄에 몇 글자만 남기 쉽다. 줄을 고르게 나눠 그 토막 줄을 막는다. */
h1, h2, h3, h4 { text-wrap: balance; }
/* 문단 마지막 줄에 한두 낱말만 떨어지지 않게 (지원 브라우저만. 줄바꿈 금지 규칙과 부딪치지 않게 개별 속성으로) */
p, li, dd, figcaption { text-wrap-style: pretty; }
a { color: inherit; text-decoration: none; }
:where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; background: #fff; padding: 12px 18px; }
.skip-link:focus { top: 16px; }
.site-header {
  width: var(--page);
  min-height: 108px;
  margin: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 42px;
  border-bottom: 1px solid rgba(255,255,255,.22);
  position: absolute;
  z-index: 10;
  left: 50%;
  transform: translateX(-50%);
  color: var(--white);
}
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 13px; letter-spacing: .05em; }

.brand > span:last-child { display: grid; line-height: 1.15; }
.brand strong { font-size: 14px; }
.brand small { margin-top: 5px; font-size: 8px; letter-spacing: .25em; opacity: .7; }

.main-menu { justify-self: center; display: flex; align-items: center; gap: clamp(26px, 3.2vw, 56px); font-size: clamp(17px, 1.25vw, 19px); font-weight: 600; }
.main-menu a { position: relative; }
.main-menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -7px; height: 1px; background: currentColor; transition: right .2s; }
.main-menu a.is-current::after, .main-menu a:hover::after, .main-menu a:focus-visible::after { right: 0; }
.nav-group { position: relative; padding: 38px 0; }
.nav-group > a { display: inline-flex; align-items: center; gap: 8px; }
.nav-chevron { width: 6px; height: 6px; display: inline-block; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.nav-group:hover > a .nav-chevron,
.nav-group:focus-within > a .nav-chevron { transform: translateY(2px) rotate(225deg); }
.submenu {
  min-width: 230px;
  padding: 14px;
  display: none;
  position: absolute;
  top: 96px;
  left: -18px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 45px rgba(15,16,48,.14);
}
.submenu a { padding: 11px 13px; display: block; white-space: nowrap; font-size: 14px; }
.submenu a::after { display: none; }
.submenu a:hover { color: var(--blue-500); background: var(--ice-50); }
.nav-group:hover .submenu, .nav-group:focus-within .submenu { display: block; }
.nav-group.submenu-dismissed .submenu { display: none; }

/* 헤더 오른쪽: SNS 바로가기 + 언어. 헤더 그리드는 3열을 유지한다. */
.header-actions { display: flex; align-items: center; gap: clamp(15px, 1.4vw, 24px); }

.languages { display: flex; gap: 15px; font-size: 18px; font-weight: 600; }
.languages a { opacity: .72; }
.languages a.active { opacity: 1; font-weight: 800; }
.menu-toggle { display: none; }

.hero {
  min-height: 100vh;
  min-height: 100svh;
  padding: 128px var(--edge) 48px;
  display: flex;
  flex-direction: column;
  color: var(--white);
  background: var(--navy-950);
  overflow: hidden;
  position: relative;
}
.hero::before { content: ''; position: absolute; width: 700px; height: 700px; right: -130px; top: -220px; border: 1px solid rgba(199,203,224,.22); border-radius: 50%; box-shadow: 0 0 0 120px rgba(40,53,131,.05), 0 0 0 260px rgba(40,53,131,.035); }

.eyebrow { margin: 0 0 24px; color: var(--blue-500); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; }
.hero .eyebrow { color: #ffa585; }
.hero h1 { margin: 0; letter-spacing: -.035em; font-weight: 500; }
.hero-title-primary,
.hero-title-secondary { display: block; }
.hero-title-primary {
  font-size: clamp(26px, 2vw, 36px);
  line-height: 1.08;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.hero-title-secondary {
  margin-top: 14px;
  font-size: clamp(34px, 2.8vw, 48px);
  line-height: 1.14;
  font-weight: 700;
}
.hero-intro { max-width: 680px; margin: 30px 0 0; color: #c7cbe0; font-size: clamp(15px, 1.05vw, 18px); text-wrap: balance; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 42px; }
.button {
  max-width: 100%;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
}

.button-quiet:hover,
.button-quiet:focus-visible { transform: translateY(-2px); }
/* 링크 화살표는 버튼에 올렸을 때만 살짝 튄다 */
.button-quiet > span { transition: transform .35s cubic-bezier(.22,1,.36,1); }
.button-quiet:hover > span,
.button-quiet:focus-visible > span { transform: translate(3px, -3px); }
.button-quiet { padding: 0 22px; gap: 12px; border: 1px solid rgba(255,255,255,.55); transition: color .2s, background .2s, border-color .2s, transform .35s cubic-bezier(.22,1,.36,1); }
.button-quiet:hover,
.button-quiet:focus-visible { color: var(--navy-950); background: var(--white); border-color: var(--white); }
.media-placeholder { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(145deg, rgba(255,255,255,.1), rgba(255,255,255,.02)); display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; position: relative; overflow: hidden; }
.media-placeholder::before, .media-placeholder::after { content: ''; position: absolute; inset: 50% auto auto 50%; background: rgba(255,255,255,.12); transform: translate(-50%,-50%) rotate(-28deg); }
.media-placeholder::before { width: 1px; height: 150%; }
.media-placeholder::after { width: 150%; height: 1px; }

.media-placeholder span { position: absolute; top: 24px; right: 24px; font-size: 10px; letter-spacing: .18em; }
.media-placeholder p { margin: 0; font-size: 12px; letter-spacing: .18em; }
.media-placeholder small { color: #9ea3c7; }

/* 제품 약속: 공용 인트로 + 카드 4장.
   카드마다 아이콘 타일 · 번호 · 제목 · 설명 · 구분선 · 근거 3줄 순서로 읽힌다. */
.product-proof {
  background: var(--white);
}
.product-proof-inner { padding: clamp(76px, 7vw, 116px) 0 clamp(80px, 7.5vw, 122px); }
.proof-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 28px);
  align-items: stretch;
}
.proof-card {
  min-width: 0;
  padding: clamp(26px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #dcdfee;
  border-top: 3px solid var(--blue-500);
  box-shadow: 0 16px 38px rgba(23,24,69,.09);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .45s ease;
}
.proof-card:hover {
  transform: translateY(-6px);
  border-color: #b3b9dc;
  border-top-color: var(--blue-500);
  box-shadow: 0 28px 60px rgba(23,24,69,.13);
}

.proof-card-number {
  color: #8a90b8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}
.proof-card h3 {
  margin: clamp(26px, 2.4vw, 36px) 0 0;
  color: var(--navy-950);
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.03em;
}
.proof-card > p {
  margin: 12px 0 clamp(24px, 2.2vw, 32px);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
/* 근거 목록은 카드 아래쪽에 붙어 4장의 구분선 위치가 서로 어긋나지 않는다 */
.proof-card-points {
  margin: auto 0 0;
  padding: clamp(20px, 1.8vw, 26px) 0 0;
  list-style: none;
  border-top: 1px solid #dcdfee;
  display: grid;
  gap: 11px;
}
.proof-card-points li {
  padding-left: 18px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  position: relative;
}
.proof-card-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  background: var(--blue-500);
}

.hero::before { animation: hero-halo 8s ease-in-out infinite alternate; }

[data-reveal].motion-ready {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].motion-ready.is-visible { opacity: 1; transform: translateY(0); }

@keyframes hero-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes hero-media-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes hero-halo {
  from { opacity: .62; transform: scale(.96); }
  to { opacity: 1; transform: scale(1.04); }
}

/* 히어로 타이틀 라인 와이프 */
.hero-title-primary,
.hero-title-secondary { animation: fx-line-in .95s cubic-bezier(.22,1,.36,1) both; }
.hero-title-primary { animation-delay: .2s; }
.hero-title-secondary { animation-delay: .34s; }

/* 스크롤 진행 표시 */
.scroll-progress { position: fixed; z-index: 60; left: 0; top: 0; right: 0; height: 2px; pointer-events: none; }
.scroll-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-500), #ff8a65);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* 자식 순차 등장 */
[data-reveal-children].motion-ready { opacity: 1; transform: none; transition: none; }
[data-reveal-children].motion-ready > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1);
}
[data-reveal-children].motion-ready.is-visible > * { opacity: 1; transform: none; }
[data-reveal-children].motion-ready.is-visible > :nth-child(1) { transition-delay: .04s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(2) { transition-delay: .11s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(3) { transition-delay: .18s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(4) { transition-delay: .25s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(5) { transition-delay: .32s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(6) { transition-delay: .39s; }
[data-reveal-children].motion-ready.is-visible > :nth-child(n+7) { transition-delay: .46s; }

/* 제품·품질 카드: 같은 상단 라인 드로잉과 제목 이동을 공유한다 */
.product-card,
.quality-card { position: relative; isolation: isolate; overflow: hidden; }
.product-card::after,
.quality-card::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff8a65, rgba(255,138,101,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.product-card:hover::after,
.product-card:focus-visible::after,
.quality-card:hover::after { transform: scaleX(1); }
.product-card h2,
.product-card h3,
.product-card .card-link,
.quality-card h3 { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.product-card:hover h2,
.product-card:hover h3,
.quality-card:hover h3 { transform: translateX(5px); }
.product-card:hover .card-link b { display: inline-block; animation: fx-arrow 1.1s ease-in-out infinite; }

/* 제품 약속 카드: 올려둔 카드 하나만 상단을 레이저가 빠르게 지나간다 */
.proof-card { position: relative; overflow: hidden; }
.proof-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 34%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff9b7a, #e8502b, #ff9b7a, transparent);
  box-shadow: 0 0 10px rgba(232,80,43,.65);
  transform: translateX(-110%);
  opacity: 0;
  pointer-events: none;
}
.proof-card:hover::after { animation: fx-laser-fast .78s cubic-bezier(.4,0,.2,1); }

@keyframes fx-laser-fast {
  0% { transform: translateX(-110%); opacity: 0; }
  12% { opacity: 1; }
  72% { opacity: 1; }
  100% { transform: translateX(400%); opacity: 0; }
}
@keyframes fx-laser {
  0% { transform: translateX(-110%); opacity: 0; }
  8% { opacity: 1; }
  70% { opacity: 1; }
  85%, 100% { transform: translateX(460%); opacity: 0; }
}

@keyframes fx-grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(72px, 72px, 0); }
}
@keyframes fx-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes fx-line-in {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 105% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -15% 0); }
}
@keyframes fx-arrow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -3px); }
}

.section-shell { width: var(--page); margin: auto; }

.section-heading { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 50px; align-items: start; margin-bottom: 70px; }
.section-heading h2 { margin: 0; font-size: var(--title-section); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; }
.section-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.product-grid { width: 100%; margin-inline: auto; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px, 1.5vw, 24px); }
.product-card { min-width: 0; border: 1px solid var(--line); display: flex; flex-direction: column; background: var(--white); transition: color .25s, background .25s, box-shadow .3s ease; }
.product-card:hover { color: var(--white); background: var(--navy-900); box-shadow: 0 18px 42px rgba(23,24,69,.12); }
.card-number { position: absolute; z-index: 2; top: 18px; left: 18px; padding: 7px 9px; color: var(--white); background: rgba(23,24,69,.82); backdrop-filter: blur(6px); }
.card-number, .card-link { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
/* "제품 보기 ↗" · "자세히 보기 ↗" 는 누르는 곳이라 번호표보다 크게, 한 줄로 */
.card-link { font-size: 12.5px; letter-spacing: .06em; white-space: nowrap; }
.product-card-media { width: 100%; aspect-ratio: 1; margin: 0; overflow: hidden; border-bottom: 1px solid rgba(23,24,69,.14); background: var(--ice-50); }
.product-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.product-card:hover .product-card-media img { transform: scale(1.055); }
.product-card-copy { min-height: 96px; padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 18px; }
.product-card h2,
.product-card h3 { margin: 0; font-size: 17px; font-weight: 500; }
.card-link { align-self: end; color: var(--muted); }
.product-card:hover .card-link { color: #b9cad4; }

.site-footer {
  padding: 84px var(--edge) 64px;
  color: #c7cbe0;
  background: #0f1030;
  display: grid;
  grid-template-columns: 1.25fr 1.25fr 1fr .6fr;
  align-items: start;
  gap: clamp(40px, 4vw, 64px);
  font-size: 15px;
  line-height: 1.85;
}
.footer-brand { justify-self: start; }
.footer-brand small { font-size: 5.5px; }
.site-footer address { font-style: normal; }
.site-footer address strong { color: var(--white); font-size: 16px; font-weight: 600; }
.site-footer > p { grid-column: 1/-1; margin: 30px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.12); color: #8a8fb5; font-size: 13px; }

.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-column h2 { margin: 0 0 20px; color: #ffa585; font-size: 18px; line-height: 1.25; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.footer-contact a, .footer-links a { line-height: 1.65; }
.footer-contact a:hover, .footer-contact a:focus-visible,
.footer-links a:hover, .footer-links a:focus-visible { color: var(--white); }
.footer-contact small { display: block; color: #9ea3c7; font-size: 11px; }
.flash { position: fixed; z-index: 100; left: 50%; top: 16px; transform: translateX(-50%); max-width: min(92vw, 720px); padding: 13px 18px; color: #fff; background: var(--navy-800); box-shadow: 0 10px 35px rgba(0,0,0,.18); font-size: 13px; }
.flash-error { background: #8b2d2d; }
.cookie-banner { position: fixed; z-index: 90; left: 22px; right: 22px; bottom: 22px; max-width: 760px; margin-left: auto; padding: 18px 20px; color: var(--white); background: var(--navy-900); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 20px 60px rgba(0,0,0,.28); align-items: center; gap: 25px; }
.cookie-banner:not([hidden]) { display: flex; }
.cookie-banner p { flex: 1; margin: 0; color: #c4d0d8; font-size: 11px; }.cookie-banner p a { text-decoration: underline; }.cookie-banner > div { display: flex; gap: 8px; }.cookie-banner button { padding: 9px 12px; border: 1px solid rgba(255,255,255,.5); color: #fff; background: transparent; font: inherit; font-size: 10px; cursor: pointer; }.cookie-banner button:first-child { color: var(--navy-950); background: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before,
  .proof-card {
    animation: none;
  }

  /* 1180px 블록이 뒤에 오므로 선택자를 한 단계 높여 이긴다 */
  .site-header .menu-toggle span { transition: none; }

  .proof-card:hover::after,
  .hero-title-primary,
  .hero-title-secondary,
  .product-card:hover .card-link b { animation: none; }
  .hero-title-primary,
  .hero-title-secondary { opacity: 1; transform: none; clip-path: none; }
  [data-reveal-children].motion-ready > * { opacity: 1; transform: none; transition: none; }
  .product-card h2,
  .product-card h3,
  .product-card .card-link,
  .product-card::after,
  .quality-card h3,
  .quality-card::after,
  .proof-card { transition: none; }
  .proof-card:hover { transform: none; }

  .proof-card::after { display: none; }
  .product-card:hover h2,
  .product-card:hover h3,
  .quality-card:hover h3 { transform: none; }
  .button-quiet,
  .button-quiet > span { transition: color .2s, background .2s, border-color .2s; }
  .button-quiet:hover,
  .button-quiet:focus-visible,
  .button-quiet:hover > span,
  .button-quiet:focus-visible > span { transform: none; }

  [data-reveal].motion-ready { opacity: 1; transform: none; transition: none; }
  .product-card-media img { transition: none; }
  .product-card:hover .product-card-media img { transform: none; }

  .quality-card:hover,
  .quality-process li:hover,
  .resource-links a:hover,
  .resource-links a:focus-visible,
  .certificate-card:hover { transform: none; }
  .quality-process li::before { transition: none; }
}

.page-main { padding-top: 109px; }
/* 1180px 이하 헤더는 78px — 배너 없는 페이지(제품 상세 · 뉴스 글)에 헤더 아래 빈 띠가 생기지 않게 */
@media (max-width: 1180px) { .page-main { padding-top: 68px; } }

.page-lead { margin: 0 0 8px; color: var(--muted); font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; text-wrap: balance; }

/* 하위 페이지 공통 상단 배너 — 사진 · 덮개 · 바닥 영문 글자는 파일 끝 2026-09-13 2차 요청 블록 */
.section-index {
  min-height: 292px;
  padding: 62px clamp(24px, 3vw, 72px) 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: var(--white);
  background-color: var(--navy-950);
  text-align: center;
}

.section-index > * { position: relative; z-index: 1; }
.section-index-path {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.8);
  text-shadow: 0 1px 12px rgba(23,24,69,.65);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* 누르는 영역만 위아래로 넓힌다 (배치는 그대로) */
.section-index-path a { padding: 6px; margin: -6px; transition: color .2s ease; }
.section-index-path a { min-height: 44px; display: inline-flex; align-items: center; }
.section-index-path a:hover,
.section-index-path a:focus-visible { color: #ff8a65; }
.section-index-path i {
  width: 4px;
  height: 4px;
  display: block;
  background: rgba(255,255,255,.7);
  transform: rotate(45deg);
}
.section-index-path strong {
  color: var(--white);
  font-weight: 700;
}
.section-index h1 {
  max-width: 24ch;
  margin: 0;
  color: var(--white);
  font-size: clamp(31px, 3.1vw, 44px);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(23,24,69,.55);
}
.section-index .page-lead {
  max-width: 100%;
  margin: 18px auto 0;
  color: rgba(255,255,255,.88);
  font-size: clamp(13px, 1.15vw, 16px);
  text-shadow: 0 1px 14px rgba(23,24,69,.6);
}

.company-story { padding: clamp(70px, 7vw, 95px) 0; }
.ceo-message {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  column-gap: clamp(48px, 6vw, 82px);
}
.ceo-message > .company-section-heading,
.ceo-message-copy,
.ceo-signature { grid-column: 1; }
.ceo-brand-mark {
  grid-column: 2;
  grid-row: 1 / 4;
  align-self: stretch;
  min-height: 420px;
  margin: 0;
  padding: clamp(36px, 4.5vw, 70px);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ice-50);
}
.ceo-brand-mark img {
  width: 100%;
  max-width: 340px;
  height: auto;
  display: block;
}
.ceo-brand-label {
  position: absolute;
  color: var(--navy-950);
  font-size: clamp(10px, .8vw, 12px);
  font-weight: 750;
  line-height: 1;
  letter-spacing: .16em;
}
.ceo-brand-label-top { top: clamp(24px, 2.4vw, 34px); left: clamp(24px, 2.4vw, 34px); }
.ceo-brand-label-bottom { right: clamp(24px, 2.4vw, 34px); bottom: clamp(24px, 2.4vw, 34px); }
.company-section-heading {
  margin-bottom: 42px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--navy-950);
}
.company-section-heading .eyebrow {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--blue-500);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: .16em;
}
.company-section-heading .eyebrow span {
  padding-right: 12px;
  border-right: 1px solid currentColor;
  color: var(--navy-950);
  font-variant-numeric: tabular-nums;
}
.company-section-heading h2 {
  max-width: 24ch;
  margin: 0;
  color: var(--navy-950);
  font-size: clamp(34px, 3.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -.035em;
  font-weight: 550;
}
/* CEO 인사말: 한 줄 슬로건 · 본문 · 서명 모두 왼쪽 정렬 (2026-09-14, 가운데 정렬은 줄 시작이 들쭉날쭉해 읽기 어려웠다).
   슬로건은 데스크톱에서 한 줄, 좁은 화면에서는 두 줄로 고르게 나뉜다. */
.ceo-message .company-section-heading h2 {
  max-width: none;
  font-size: clamp(26px, 2.2vw, 32px);
  text-wrap: balance;
}
.ceo-message-copy { display: grid; gap: 18px; }
.ceo-message-copy p {
  margin: 0;
  color: #4b5070;
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.85;
  text-wrap: pretty;
}
.ceo-signature {
  margin-top: 42px;
  padding-top: 24px;
  display: grid;
  justify-items: start;
  gap: 14px;
  border-top: 1px solid var(--line);
  color: var(--navy-950);
}
.ceo-signature span { font-size: 13.5px; font-weight: 650; letter-spacing: .07em; }
.ceo-signature p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ceo-signature strong { font-size: 19px; font-weight: 650; letter-spacing: .05em; }
.ceo-signature small { color: var(--muted); font-size: 13.5px; }
.history-section, .facilities { padding: clamp(65px, 7vw, 85px) 0; }
.section-heading.compact { grid-template-columns: .7fr 1.8fr; margin-bottom: 45px; }

.history-section > .company-section-heading { width: 100%; margin-inline: auto; }

.facility-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.facility-placeholder { min-height: 380px; color: var(--white); background-color: var(--navy-900); }
.facility-photo {
  min-height: 380px;
  margin: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--navy-900);
}
.facility-photo img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  display: block;
  object-fit: cover;
}
.facility-photo figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 46px 24px 22px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--white);
  background: linear-gradient(180deg, rgba(23,24,69,0) 0%, rgba(23,24,69,.8) 100%);
  font-size: 15px;
}
.facility-photo figcaption span {
  color: #ff8a65;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.location-section { margin-top: 80px; color: var(--navy-950); background: var(--white); }
.location-grid { min-height: 570px; padding-top: 85px; padding-bottom: 85px; display: grid; grid-template-columns: .75fr 1.25fr; gap: 80px; }
.location-grid address { margin-bottom: 35px; color: #4b5070; font-style: normal; }
.location-map {
  min-height: 400px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--ice-50);
}
.location-map iframe { width: 100%; height: 100%; min-height: 400px; display: block; border: 0; }

.product-index { padding: 90px 0 130px; }

.product-detail-hero { min-height: 470px; padding: 28px 0 42px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: center; }
.product-detail-intro { width: 100%; max-width: 520px; justify-self: end; }
.product-detail-photo {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1;
  margin: 0;
  justify-self: start;
  overflow: hidden;
  border: 1px solid rgba(23,24,69,.14);
  background: var(--ice-50);
}
.product-detail-photo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.product-detail-hero h1 { margin: 0; font-size: clamp(28px, 3vw, 44px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; }
.product-detail-intro .page-lead { margin-top: 16px; }
.origin-badge { width: 180px; margin-top: 40px; padding: 14px 16px; display: flex; justify-content: space-between; border: 1px solid var(--navy-900); }.origin-badge span { font-size: 9px; letter-spacing: .15em; }.origin-badge strong { font-size: 12px; }

.facts-section { padding: 70px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.facts-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }.facts-grid div { min-height: 130px; padding: 20px; border-right: 1px solid var(--line); }.facts-grid div:first-child { border-left: 1px solid var(--line); }.facts-grid span, .cert-note span { display: block; margin-bottom: 34px; color: var(--muted); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }.facts-grid strong { font-size: 13px; font-weight: 500; }
.cert-note { margin-top: 24px; padding: 20px; background: var(--ice-50); }.cert-note span { margin: 0 0 6px; }.cert-note p { margin: 0; font-size: 12px; }

.spec-section { padding: 100px 0; }
.spec-section > .section-heading.compact { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 60px; text-align: center; }
.spec-section > .section-heading.compact .eyebrow { margin: 0; }
.table-scroll {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 17px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 12px; }
.spec-section table { margin-inline: auto; }
.spec-section th, .spec-section td { text-align: center; }
th { color: var(--muted); background: var(--ice-50); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
td:first-child { font-weight: 600; }

.quote-band { padding: clamp(50px, 6vw, 65px) 0; color: var(--white); background: var(--navy-900); }.quote-band > div { display: flex; justify-content: space-between; align-items: end; gap: 40px; }.quote-band h2 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.2; font-weight: 500; }

.quality-checks,
.quality-resources { padding: clamp(75px, 8vw, 105px) 0 clamp(85px, 9vw, 120px); }
.quality-section-heading {
  padding-bottom: clamp(30px, 3vw, 42px);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
}
.quality-section-heading h2 {
  max-width: 760px;
  margin: 0;
  font-size: var(--title-section);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 500;
}
.checks-grid {
  margin-top: clamp(32px, 3.4vw, 46px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.5vw, 24px);
}
.quality-card {
  min-width: 0;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.quality-card:hover {
  border-color: var(--navy-900);
  transform: translateY(-5px);
  box-shadow: 7px 9px 0 rgba(23,24,69,.08), 0 20px 38px rgba(23,24,69,.08);
}

.quality-card-copy {
  min-height: 188px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.quality-card h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  font-weight: 500;
}
.quality-card p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
  transition: color .25s;
}
.quality-card:hover p { color: var(--muted); }

.quality-process { padding: clamp(75px, 8vw, 105px) 0 clamp(85px, 9vw, 120px); background: var(--ice-50); }
.quality-process > div { display: grid; gap: clamp(32px, 3.4vw, 46px); }
.quality-process ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.quality-process li { padding: 28px 26px 32px; position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--white); transition: border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.quality-process li::before { content: ''; display: block; width: 34px; height: 2px; margin-bottom: 20px; background: var(--blue-500); transition: width .45s cubic-bezier(.22,1,.36,1), background .25s ease; }
.quality-process li span { display: block; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.quality-process li strong { display: block; margin-top: 12px; font-size: 17px; line-height: 1.3; font-weight: 500; }
.quality-process li p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; transition: color .25s; }
.quality-process li:hover { border-color: var(--navy-900); transform: translateY(-5px); box-shadow: 7px 9px 0 rgba(23,24,69,.08), 0 20px 38px rgba(23,24,69,.07); }
.quality-process li:hover::before { width: 68px; background: var(--navy-900); }
.quality-process li:hover span,
.quality-process li:hover p { color: var(--muted); }
.resource-links { margin-top: clamp(32px, 3.4vw, 46px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.5vw, 24px); }
.resource-links a {
  min-height: 240px;
  padding: 76px 30px 30px; /* 왼쪽 위 번호표(01) 자리를 비워 둔다 */
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; /* 설명 길이가 달라도 두 카드의 제목 높이를 맞춘다 */
  gap: 24px;
  background: var(--white);
  transition: border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.resource-links a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff8a65, rgba(255,138,101,0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.resource-links a:hover,
.resource-links a:focus-visible { border-color: var(--navy-900); transform: translateY(-5px); box-shadow: 7px 9px 0 rgba(23,24,69,.08), 0 20px 38px rgba(23,24,69,.08); }
.resource-links a:hover::after,
.resource-links a:focus-visible::after { transform: scaleX(1); }
.resource-link-copy h3 { margin: 0; color: var(--navy-950); font-size: clamp(24px, 2.5vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.resource-link-copy p { max-width: 44em; margin: 14px 0 0; color: #4b5563; font-size: 15px; line-height: 1.7; transition: color .25s; }
.resource-links a:hover .resource-link-copy p,
.resource-links a:focus-visible .resource-link-copy p { color: var(--muted); }
.resource-links b { align-self: end; font-size: 18px; font-weight: 500; transition: transform .3s ease; }
.resource-links a:hover b,
.resource-links a:focus-visible b { transform: translate(3px, -3px); }

.certificate-index { padding: clamp(75px, 8vw, 105px) 0 clamp(85px, 9vw, 120px); }

.certificate-grid {
  margin-top: clamp(24px, 2.6vw, 36px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 22px);
}
.certificate-card {
  min-width: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: var(--white);
  transition: border-color .25s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.certificate-card:hover {
  border-color: var(--navy-900);
  transform: translateY(-5px);
  box-shadow: 7px 9px 0 rgba(23,24,69,.08), 0 20px 38px rgba(23,24,69,.08);
}

.certificate-card-copy {
  min-height: 154px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.certificate-card h2 { margin: 0; font-size: 16px; line-height: 1.38; font-weight: 500; }
.certificate-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  transition: color .25s;
}
.certificate-card:hover small { color: var(--muted); }

.certificate-footnote {
  margin: clamp(28px, 3vw, 42px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.faq-list { padding: 30px 0 100px; }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { padding: 30px 0; display: grid; grid-template-columns: 80px 1fr 30px; cursor: pointer; list-style: none; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color: var(--muted); font-size: 10px; }.faq-list summary strong { font-size: 20px; font-weight: 500; text-wrap: balance; }.faq-list summary i::before { content:'+'; font-style: normal; }.faq-list details[open] summary i::before { content:'−'; }.simple-cta { margin-bottom: 100px; padding: 45px; display: flex; justify-content: space-between; align-items: center; background: var(--ice-50); }.simple-cta h2 { font-size: 30px; font-weight: 500; }

/* FAQ: 목록과 하단 CTA 를 화면 가운데 좁은 칸으로 모은다. 글자 정렬은 왼쪽 그대로 둔다.
   답변 문단이 80px 들여쓰기 + 최대 820px 이라 칸 폭 900px 과 정확히 맞는다. */
.faq-list,
.faq-list + .simple-cta {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.honeypot { position: absolute; left: -9999px; }

button.button { border: 0; cursor: pointer; }

.legal-page { padding-top: 130px; padding-bottom: 100px; }.legal-page > h1 { font-size: var(--title-page); line-height: 1.1; font-weight: 500; letter-spacing: -.045em; }.legal-page > .page-lead { max-width: 800px; margin: 25px 0 60px; }.legal-page article { max-width: 900px; margin-left: auto; }.legal-page article h2 { margin-top: 42px; font-size: 19px; }.legal-page article p { color: var(--muted); }.legal-page aside { margin-top: 55px; padding: 20px; background: #fff4d8; font-size: 12px; }.error-page { min-height: 75vh; padding-top: 150px; text-align: center; }.error-page > span { font-size: 12px; letter-spacing: .2em; }.error-page h1 { font-size: clamp(34px, 4vw, 46px); font-weight: 500; }

@media (max-width: 1180px) {
  .hero-intro br { display: none; }
  .quality-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ceo-message h2 br, .ceo-message-copy br { display: none; }
  .site-header { width: var(--page); min-height: 68px; gap: 24px; grid-template-columns: 1fr auto auto; }
  /* 햄버거는 DOM 에서 로고 바로 뒤지만 화면에서는 언어 오른쪽, 헤더 맨 끝에 둔다.
     포커스 순서(버튼 → 열린 메뉴 → 언어)는 그대로가 자연스러워 DOM 은 건드리지 않는다. */
  .header-actions { grid-column: 2; grid-row: 1; }
  .menu-toggle {
    width: 42px;
    height: 42px;
    /* 버튼 안쪽 여백만큼 밀어 선 끝을 헤더 경계선 오른쪽 끝에 맞춘다 */
    margin-right: -10px;
    padding: 10px;
    display: grid;
    align-content: center;
    gap: 4px;
    grid-column: 3;
    grid-row: 1;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }
  .menu-toggle span { height: 1px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  /* 열리면 X. 선 두께 1px + 간격 4px = 5px 씩 위아래 선을 가운데로 모아 교차시킨다. */
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  /* 기본 규칙의 justify-self: center 가 남으면 패널이 글자 폭(긴 제품명)만큼 늘어나
     375px 에서 헤더 밖으로 넘치고 가로 스크롤이 생긴다. 헤더 폭에 맞춰 늘린다. */
  .main-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;
    justify-self: stretch;
    padding: 25px;
    background: var(--navy-900);
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100svh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .main-menu.open { display: flex; }
  .nav-group.submenu-dismissed .submenu { display: block; }

  .nav-group { width: 100%; padding: 2px 0; }
  .nav-group > a { padding: 9px 0; font-size: 15px; }
  .submenu { min-width: 0; padding: 5px 0 0 15px; display: block; position: static; color: #b9bddb; background: transparent; border: 0; box-shadow: none; }
  .submenu a { padding: 9px 0; white-space: normal; }
  .submenu a:hover { color: #fff; background: transparent; }

  .proof-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  :root {
    --page: min(100% - 40px, 720px);
    --title-display: clamp(36px, 6vw, 50px);
    --title-page: clamp(34px, 5.5vw, 46px);
    --title-section: clamp(28px, 4.8vw, 36px);
  }
  .hero { padding: 96px 20px 36px; }

  .section-heading, .section-heading.compact { grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; }
  .product-grid,
  .checks-grid { grid-template-columns: repeat(2,1fr); }

  .site-footer { grid-template-columns: 1fr 1fr; padding-left: 20px; padding-right: 20px; }
  .company-story, .product-detail-hero, .location-grid { grid-template-columns: 1fr; gap: 45px; }.ceo-message { grid-template-columns: 1fr; row-gap: 45px; }.ceo-message > .company-section-heading, .ceo-message-copy, .ceo-signature, .ceo-brand-mark { grid-column: 1; }.ceo-brand-mark { grid-row: auto; }.product-detail-hero { min-height:auto; padding:26px 0 42px; }.product-detail-intro, .product-detail-photo { max-width:none; justify-self:stretch; }.facts-grid { grid-auto-flow: row; grid-template-columns: repeat(2,1fr); }.certificate-grid { grid-template-columns: repeat(3,1fr); }

  .section-index { min-height: 252px; padding: 50px 34px 54px; }
  .ceo-brand-mark { min-height: 420px; }

  .page-main { padding-top: 68px; }
}

@media (max-width: 700px) {

  .hero { padding-top: 82px; }

  .hero .eyebrow { margin-bottom: 14px; }
  .hero-title-primary { font-size: clamp(23px, 6vw, 29px); }
  .hero-title-secondary { margin-top: 9px; font-size: clamp(25px, 7.6vw, 36px); }
  /* 부제는 ko 기준 크기라 en·th 는 문장이 길어 두 줄로 넘어간다.
     태국어는 자간을 줄이지 않고, 320px까지 한 줄에 들어가는 크기를 사용한다. */
  html[lang="en"] .hero-title-secondary { font-size: clamp(16px, 5.6vw, 24px); }

  .hero-intro { margin-top: 14px; font-size: 13px; line-height: 1.55; }

}

@media (max-width: 580px) {
  :root {
    --page: calc(100% - 32px);
    --title-display: clamp(34px, 10.5vw, 42px);
    --title-page: clamp(32px, 10vw, 40px);
    --title-section: clamp(26px, 8vw, 34px);
  }
  .brand small { display: none; }

  .site-header { gap: 12px; }
  .header-actions { gap: 8px; }

  .languages { gap: 6px; }
  .hero { padding: 82px 16px 30px; }
  .hero h1 { letter-spacing: -.035em; }
  .hero-intro { margin-top:14px; font-size: 13px; }
  .button { min-height:48px; }
  .product-proof-inner { padding: 60px 0 66px; }

  .proof-card:hover { transform: none; }
  .proof-card > p { margin-bottom: 20px; }
  .proof-card-points { padding-top: 18px; }

  /* 제품 카드는 사진이 주인공이라 폰에서도 2열. 이름은 사진 아래에 두 줄까지 접힌다. */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .product-card { min-height: 0; }
  .product-card-copy {
    min-height: 0;
    padding: 12px 12px 14px;
    flex: 1;
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between;
    gap: 8px;
  }
  .product-card h2,
  .product-card h3 { font-size: 14px; line-height: 1.35; }

  .site-footer { grid-template-columns: 1fr; padding-top:48px; padding-bottom:48px; gap:28px; }
  .cookie-banner:not([hidden]) { left:10px; right:10px; bottom:10px; align-items:stretch; flex-direction:column; }.cookie-banner > div { flex-direction:column; }
  .page-main { padding-top: 68px; }.page-lead { font-size:14px; line-height:1.7; }.company-story { padding:55px 0; gap:38px; }.ceo-brand-mark { min-height:280px; padding:34px; }.ceo-brand-mark img { max-width:240px; }.ceo-message h2 { margin-bottom:28px; font-size:28px; }.ceo-message-copy { gap:15px; }.ceo-message-copy p { font-size:14px; line-height:1.75; }.ceo-signature { margin-top:32px; gap:11px; }.ceo-signature strong { font-size:17px; }.history-section,.facilities { padding:58px 0; }.section-heading.compact { margin-bottom:32px; }.facility-grid, .checks-grid, .resource-links { grid-template-columns:1fr; }.facility-placeholder, .facility-photo, .facility-photo img { min-height:300px; }.location-section { margin-top:45px; }.location-grid { min-height:auto; padding-top:60px; padding-bottom:60px; }.location-grid h2 { font-size:34px; }.location-map, .location-map iframe { min-height:300px; }.product-index { padding:55px 0 80px; }.facts-grid { grid-auto-flow: row; grid-template-columns:1fr; }.product-detail-hero { padding:18px 0 34px; gap:30px; }.product-detail-hero h1 { font-size:27px; }.origin-badge { margin-top:24px; }.facts-section { padding:50px 0; }.spec-section { padding:65px 0; }.quote-band > div,.simple-cta{align-items:flex-start;flex-direction:column}.quote-band h2 { font-size:28px; }.checks-grid { padding:55px 0 75px; }.checks-grid h2 { font-size:18px; }.quality-process { padding:60px 0 70px; }.quality-process h2 { margin-top:0; font-size:32px; }.quality-process ol { grid-template-columns:1fr; }.quality-process li { padding:24px 22px 26px; }.resource-links { padding:70px 0; }.resource-links a { min-height:160px; padding:64px 24px 24px; }.certificate-grid{grid-template-columns:repeat(2,1fr); gap:12px; padding-top:50px}.faq-list { padding-bottom:70px; }.faq-list summary{padding:24px 0; grid-template-columns:32px 1fr 20px}.faq-list summary strong { font-size:17px; }.simple-cta { margin-bottom:70px; padding:32px 24px; }.simple-cta h2 { margin:0; font-size:25px; }.legal-page{padding-top:105px; padding-bottom:80px}.legal-page > .page-lead { margin-bottom:50px; }.legal-page article h2 { font-size:18px; }.error-page { padding-top:120px; }
  .quality-checks,
  .quality-resources { padding:60px 0 70px; }
  .certificate-grid { padding-top: 0; }
  .quality-section-heading { grid-template-columns:36px minmax(0,1fr); gap:12px; }
  .quality-section-heading h2,
  .quality-process h2 { font-size:28px; }
  .checks-grid,
  .resource-links { margin-top:28px; padding:0; }
  .quality-card-copy { min-height:178px; }
  .resource-links a { min-height:210px; }
  .company-section-heading { margin-bottom: 30px; padding-bottom: 20px; }
  .company-section-heading h2,
  .ceo-message .company-section-heading h2,
  .location-grid .company-section-heading h2 { font-size: 30px; }
  .ceo-message .company-section-heading h2 { font-size: 24px; }

  .section-index { min-height: 226px; padding: 42px 26px 46px; }
  .section-index-path { margin-bottom: 18px; gap: 9px; font-size: 9px; }
  .section-index-path i { width: 3px; height: 3px; }
  .section-index h1 { font-size: clamp(26px, 7.4vw, 34px); }
  .section-index .page-lead { margin-top: 14px; font-size: 13.5px; }

  /* ── 폰 2열 카드 ──
     위쪽 한 줄 규칙(.checks-grid·.facility-grid 1열, 사진 min-height 300px)을 덮어쓰므로 이 블록 맨 끝에 둔다.
     사진·자료 카드를 한 줄에 하나씩 쌓지 않고 두 장씩 보여 스크롤 길이를 절반 이하로 줄인다. */
  .product-card .card-number,
  .quality-card .card-number,
  .certificate-card .card-number { top: 8px; left: 8px; padding: 5px 7px; font-size: 9px; }
  .checks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .quality-card-copy { min-height: 0; padding: 12px 12px 14px; }
  .quality-card h3 { font-size: 14.5px; }
  .quality-card p { margin-top: 6px; font-size: 12px; line-height: 1.55; }

  .certificate-grid { gap: 10px; }

  .certificate-card-copy { min-height: 0; padding: 12px 12px 14px; }
  .certificate-card h2 { font-size: 14px; }
  /* 카드 높이를 줄여 남는 공간이 없으니 회사명 줄과 구분선 사이를 직접 띄운다 */
  .certificate-card small { margin-bottom: 12px; }

  .facility-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .facility-placeholder,
  .facility-photo { min-height: 0; aspect-ratio: 1; }
  .facility-photo img { min-height: 0; }
  .facility-photo figcaption { padding: 30px 10px 10px; gap: 6px; font-size: 12px; line-height: 1.35; }
  .facility-photo figcaption span { font-size: 10px; }
}

/* ── 374px 이하 (구형 소형 단말) ────────────────────────────────
   580px 단계의 헤더는 로고 190 + 메뉴 42 + 언어 83 + 간격 24 = 339 를 쓴다.
   375px 에서는 가용 폭 343 으로 겨우 들어가지만 320~360px 에서는 언어 전환이
   헤더 밖으로 밀려난다. 375px 이상은 그대로 두고 그 아래만 한 단계 더 줄인다. */
@media (max-width: 374px) {

  .site-header { gap: 8px; }
  .languages { gap: 4px; font-size: 15px; }
}

/* ── 다국어 모바일 타이포그래피 ────────────────────────────────
   카드의 열 수·사진 비율은 위의 반응형 배치를 따른다.
   글자 확대를 위해 높이를 고정하거나 문장을 숨기지 않는다. */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .hero .hero-intro,
  .section-index .page-lead,
  .page-main .page-lead,
  .ceo-message .ceo-message-copy p {
    font-size: 15px;
    line-height: 1.75;
  }
  .hero .hero-intro { text-wrap: pretty; }

  .hero-title-secondary { line-height: 1.3; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .08em; }
  .product-card :is(h2, h3),
  .quality-card h3,
  .certificate-card h2 {
    font-size: 15px;
    line-height: 1.5;
  }
  .product-card .card-link { font-size: 13px; letter-spacing: .04em; }
  .quality-card p,
  .quality-process li p,
  .resource-link-copy p,
  .certificate-footnote,
  .cert-note p {
    font-size: 15px;
    line-height: 1.7;
  }

  .certificate-card small,
  .section-index-path {
    font-size: 12px;
    line-height: 1.6;
    letter-spacing: .02em;
  }

  .facility-photo figcaption { font-size: 13px; line-height: 1.6; }
  .facility-photo figcaption span { flex: none; }

  .spec-section th { font-size: 12px; letter-spacing: .02em; }
  .spec-section td { font-size: 14px; }
  .facts-grid span,
  .cert-note span { font-size: 12px; letter-spacing: .04em; }
  .facts-grid strong { font-size: 14px; }
  .origin-badge { width: fit-content; max-width: 100%; gap: 16px; flex-wrap: wrap; }
  .origin-badge span { font-size: 11px; letter-spacing: .03em; }
  .origin-badge strong { font-size: 13px; }

  .footer-column h2 { letter-spacing: .05em; }
  .footer-contact > a,
  .footer-links a { display: block; min-height: 44px; padding-block: 8px; overflow-wrap: anywhere; }
  .footer-contact small { font-size: 12px; }
  .cookie-banner p { font-size: 14px; line-height: 1.65; }
  .cookie-banner button { min-height: 44px; font-size: 14px; }
}

@media (max-width: 1180px) {
  .languages a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-group > a,
  .submenu a { min-height: 44px; font-size: 16px; line-height: 1.6; }

  .main-menu { padding-bottom: max(25px, env(safe-area-inset-bottom)); }
  .menu-toggle { width: 44px; height: 44px; }
}

/* ════════════════════════════════════════════════════════════════
   수룡산업 본사 (HQ) — 태국 사이트 레이아웃 위에 얹는 본사 전용 층.
   색: 네이비 #171845 · 로열블루 #283583 · 올품 오렌지 #e8502b (현재 본사 홈페이지 기준)
   글꼴: Pretendard. 로고는 흰색 한 가지라 헤더는 항상 어두운 바탕 위에 둔다.
   ════════════════════════════════════════════════════════════════ */

/* 메뉴를 열어도 폭은 유지하되, 왼쪽에 빈 스크롤바 공간을 만들지 않는다. */
html { scrollbar-gutter: stable; }
body { overflow-x: clip; }
.eyebrow { color: var(--accent); }

.scroll-progress i { background: linear-gradient(90deg, var(--accent), #ff9b7a); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ── 버튼 ── */
.button { cursor: pointer; border: 0; text-decoration: none; }
.button-accent { padding: 0 26px; color: var(--white); background: var(--accent); transition: background .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.button-accent:hover, .button-accent:focus-visible { background: var(--accent-600); transform: translateY(-2px); }
.button-navy { padding: 0 26px; color: var(--white); background: var(--navy-900); transition: background .25s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.button-navy:hover, .button-navy:focus-visible { background: var(--navy-800); transform: translateY(-2px); }
.button-outline { padding: 0 24px; color: var(--navy-900); background: transparent; border: 1px solid var(--navy-900); transition: color .2s, background .2s; }
.button-outline:hover, .button-outline:focus-visible { color: var(--white); background: var(--navy-900); }
.button-small { min-height: 36px; padding: 0 14px; gap: 6px; font-size: 12px; }
.button-danger { padding: 0 14px; color: var(--white); background: #b42318; }
.button-danger:hover, .button-danger:focus-visible { background: #912018; }
.button-danger-outline { color: #b42318; border-color: #b42318; }
.button-block { width: 100%; }
button.button:disabled { opacity: .6; cursor: progress; }
.text-link { min-height: 44px; padding-block: 6px; margin-block: -6px; display: inline-flex; align-items: center; gap: 10px; color: var(--navy-900); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.text-link span { transition: transform .3s ease; }
.text-link:hover span, .text-link:focus-visible span { transform: translateX(4px); }
.badge-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.badge-list li { padding: 6px 12px; border: 1px solid var(--navy-800); color: var(--navy-800); font-size: 12px; font-weight: 700; letter-spacing: .03em; }
.empty-state { margin: 0; padding: 60px 24px; text-align: center; color: var(--muted); background: var(--ice-50); }

/* ── 헤더 ── */
.brand img { width: clamp(204px, 15vw, 262px); height: auto; display: block; }
.site-header-solid { border-bottom-color: rgba(255,255,255,.1); }
.site-header-solid::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: -1px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--navy-950);
}
.site-header-overlay::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  height: 180px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(15,16,48,.72), rgba(15,16,48,0));
  pointer-events: none;
}
.main-menu { gap: clamp(22px, 2.6vw, 48px); font-size: clamp(17.5px, 1.3vw, 20px); font-weight: 700; }
.header-actions { gap: clamp(14px, 1.4vw, 24px); }
.header-call { display: inline-flex; flex: none; align-items: baseline; gap: 8px; white-space: nowrap; padding: 8px 14px; border: 1px solid rgba(255,255,255,.35); font-size: 15px; font-weight: 800; letter-spacing: .02em; transition: background .2s, border-color .2s; }
.header-call span { color: #ffb49c; font-size: 11px; font-weight: 700; }
.header-call:hover, .header-call:focus-visible { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.7); }
/* 언어 전환: 지구 아이콘 + KO | EN */
.languages { align-items: center; gap: 12px; font-size: 17px; font-weight: 700; }
.languages-icon { width: 24px; height: 24px; flex: none; opacity: .9; }
.languages a { padding: 4px; opacity: .6; transition: opacity .2s; }
.languages a + a { position: relative; padding-left: 12px; }
/* 구분선은 글자 높이만큼만 (링크 높이 44px 로 그으면 헤더를 가르는 긴 세로줄이 된다) */
.languages a + a::before { content: ''; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; background: rgba(255,255,255,.35); translate: 0 -50%; }
.languages a:hover, .languages a:focus-visible, .languages a.active { opacity: 1; }
.languages a.active { font-weight: 800; }
.submenu a:hover { color: var(--accent); }
.submenu a[aria-current="page"] { color: var(--accent); font-weight: 700; }
/* 제품 메가 메뉴: 분류별 열에 제품 이름을 모두 보여 준다 */
.mega-products {
  width: min(1180px, 92vw);
  padding: 28px 30px 30px;
  left: 50%;
  transform: translateX(-38%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 26px;
  border-top: 3px solid var(--accent);
}
.nav-group-products:hover .mega-products,
.nav-group-products:focus-within .mega-products { display: grid; }
.nav-group-products.submenu-dismissed .mega-products { display: none; }
.mega-column { min-width: 0; }
.mega-products a.mega-title { padding: 0 0 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--navy-950); font-size: 15px; font-weight: 800; }
.mega-products ul { margin: 0; padding: 0; list-style: none; }
.mega-products li a { padding: 6px 0; white-space: normal; font-size: 13.5px; line-height: 1.45; color: #4b5070; }
.mega-products li a:hover { background: transparent; }

/* ── 홈 히어로: 무음 자동재생 영상 ── */
.hero { padding: 0; justify-content: flex-end; background: var(--navy-950); }
.hero::before { display: none; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
/* 대표 사진은 영상을 틀 수 없을 때만 (site.js 가 .is-static 을 붙인다). 첫 화면은 영상부터. */
.hero-poster { width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.hero.is-static .hero-poster { opacity: 1; }
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-video.is-playing { opacity: 1; }
.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,16,48,.9) 0%, rgba(15,16,48,.62) 42%, rgba(15,16,48,.18) 100%),
    linear-gradient(0deg, rgba(15,16,48,.9) 0%, rgba(15,16,48,0) 38%);
}
.hero-inner { position: relative; z-index: 1; padding-top: 170px; padding-bottom: 42px; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.hero .eyebrow { margin-bottom: 26px; color: #ffa585; font-size: 12px; }
/* h1 의 ch 는 h1 글자 크기 기준이라 큰 span 제목이 단어 중간에서 끊긴다. 폭 제한을 두지 않는다. */
.hero h1 { max-width: none; }
html[lang="ko"] .hero h1 span { overflow-wrap: normal; }
.hero-title-primary { font-size: clamp(46px, 6.4vw, 96px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; text-transform: none; }
.hero-title-secondary { margin-top: 8px; font-size: clamp(34px, 4.4vw, 68px); line-height: 1.1; font-weight: 300; letter-spacing: -.04em; }
.hero-intro { max-width: 620px; margin-top: 28px; color: #dfe2f2; font-size: clamp(15px, 1.15vw, 19px); }
.hero-actions { margin-top: 38px; }
.hero-strengths { position: relative; z-index: 1; margin: 0 auto; padding: 0 0 38px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.22); }
.hero-strengths li { padding: 22px 24px 0 0; display: grid; gap: 4px; }
.hero-strengths li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.22); }
.hero-strengths strong { color: var(--white); font-size: clamp(22px, 2vw, 32px); font-weight: 800; letter-spacing: -.02em; }
.hero-strengths span { color: #c7cbe0; font-size: 14px; }

/* ── 홈: 회사 인사 ── */
.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 clamp(36px, 5vw, 90px);
  align-items: center;
}
.welcome-copy h2 { margin: 0; color: var(--navy-950); font-size: clamp(30px, 3.2vw, 48px); line-height: 1.22; font-weight: 800; letter-spacing: -.04em; }
.welcome-copy > p:not(.section-intro-tag) { margin: 22px 0 30px; color: var(--muted); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; }
.welcome-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ice-50); }
.welcome-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.welcome-stats { grid-column: 1 / -1; margin: clamp(48px, 5vw, 80px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--navy-950); }
.welcome-stats div { padding: 26px 20px 0 0; }
.welcome-stats div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.welcome-stats dt { color: var(--muted); font-size: 14px; font-weight: 600; }
.welcome-stats dd { margin: 6px 0 0; color: var(--navy-950); font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -.03em; }

/* ── 홈: 올품 4가지 기준 (사진 카드 + 레이저 호버) ── */
.product-proof { background: var(--ice-50); }
.proof-card { padding: 0; border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: 0 14px 34px rgba(23,24,69,.07); }
.proof-card:hover { border-color: #c7cbe0; border-top-color: var(--accent); box-shadow: 0 26px 56px rgba(23,24,69,.14); }
.proof-card-media { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy-950); }
.proof-card-media img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .92; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.proof-card:hover .proof-card-media img { transform: scale(1.06); opacity: 1; }
.proof-card-media .proof-card-number { position: absolute; left: 18px; bottom: 14px; color: var(--white); font-size: 34px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 14px rgba(0,0,0,.4); }
.proof-card-body { padding: clamp(22px, 2vw, 30px); display: flex; flex-direction: column; flex: 1; }
.proof-card h3 { margin: 0; font-size: clamp(19px, 1.5vw, 23px); font-weight: 800; }
.proof-card-body > p { margin: 12px 0 clamp(20px, 2vw, 28px); color: var(--muted); font-size: 14px; line-height: 1.7; }
.proof-card-points li::before { background: var(--accent); }

/* 분류 4개 → 한 줄 4칸 (태블릿 2칸, 모바일 2칸 압축) */
.category-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 22px); }
.category-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); transition: background .3s, color .3s, box-shadow .3s; position: relative; overflow: hidden; }
.category-card-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid rgba(23,24,69,.08);
  background: var(--ice-50);
  display: grid;
  place-items: center;
}
.category-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.22,1,.36,1); }
.category-card-media.is-empty { background: linear-gradient(135deg, var(--navy-950), var(--navy-800)); }
.category-card-media.is-empty span { color: rgba(255,255,255,.34); font-size: clamp(26px, 3vw, 44px); font-weight: 800; letter-spacing: .06em; }
/* 카드 높이만큼 늘려 ↗ 화살표가 모든 카드에서 같은 자리(카드 아래)에 오게 */
.category-card-copy { padding: 24px 26px 28px; display: grid; flex: 1; align-content: start; gap: 8px; position: relative; }
.category-card-copy p { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.category-card-copy h3 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.category-card-copy span { color: var(--muted); font-size: 14px; line-height: 1.6; padding-right: 36px; }
.category-card-copy b { position: absolute; right: 24px; bottom: 26px; font-size: 20px; transition: transform .3s ease; }
.category-card:hover, .category-card:focus-visible { color: var(--white); background: var(--navy-950); box-shadow: 0 22px 48px rgba(23,24,69,.18); }
.category-card:hover .category-card-copy span, .category-card:focus-visible .category-card-copy span { color: #c7cbe0; }
.category-card:hover .category-card-media img { transform: scale(1.05); }
.category-card:hover b { transform: translate(3px, -3px); }

/* ── 품질 테스트 영상 (클릭하면 불러오는 유튜브) ── */
.video-section { color: var(--white); background: var(--navy-950); }

.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); }
.video-card h3 { margin: 6px 0 0; color: var(--white); font-size: 19px; font-weight: 700; }
.video-card p:not(.video-card-label) { margin: 10px 0 0; color: #b9bddb; font-size: 14px; line-height: 1.7; }
.video-card-label { margin: 18px 0 0; color: #ffa585; font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.lite-yt { position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; display: block; overflow: hidden; background: #000; cursor: pointer; }
.lite-yt img { width: 100%; height: 100%; display: block; object-fit: cover; opacity: .82; transition: opacity .3s, transform .6s cubic-bezier(.22,1,.36,1); }
.lite-yt:hover img, .lite-yt:focus-visible img { opacity: 1; transform: scale(1.03); }
.lite-yt-play { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .3s ease; }
.lite-yt-play::after { content: ''; position: absolute; top: 50%; left: 54%; border-left: 18px solid var(--white); border-top: 11px solid transparent; border-bottom: 11px solid transparent; transform: translate(-50%, -50%); }
.lite-yt:hover .lite-yt-play { transform: translate(-50%, -50%) scale(1.08); }
.lite-yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; background: #000; }

/* ── 홈: 신제품 ── */
.new-product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(36px, 5vw, 84px); align-items: center; }
.new-product-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ice-50); }
.new-product-media img { width: 100%; height: 100%; object-fit: cover; }
.new-product-copy h2 { margin: 0; color: var(--navy-950); line-height: 1.15; font-weight: 800; letter-spacing: -.04em; }
.new-product-copy > p { margin: 20px 0 22px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.new-product-copy .button { margin-top: 30px; }

/* ── 홈 02: 상담 전화 버튼 ── */

.brand-call { padding: 26px 34px; display: grid; gap: 4px; border: 1px solid rgba(255,255,255,.6); text-align: left; transition: background .25s, color .25s; }
.brand-call span { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.brand-call strong { font-size: clamp(32px, 3vw, 46px); font-weight: 900; letter-spacing: -.02em; }
.brand-call small { color: #dfe2f2; font-size: 13px; }
.brand-call:hover, .brand-call:focus-visible { color: var(--navy-800); background: var(--white); }
.brand-call:hover small, .brand-call:focus-visible small { color: var(--muted); }

/* ── 뉴스 카드 ── */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 26px); }
.home-news .news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.news-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); transition: border-color .25s, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease; }
.news-card:hover, .news-card:focus-visible { border-color: var(--navy-900); transform: translateY(-5px); box-shadow: 0 20px 40px rgba(23,24,69,.1); }
.news-card-media { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--navy-950); display: grid; place-items: center; }
.news-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,1,.36,1); }
.news-card:hover .news-card-media img { transform: scale(1.05); }
.news-card-media.is-empty span { color: rgba(255,255,255,.35); font-size: 13px; font-weight: 800; letter-spacing: .2em; }
.news-card-copy { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12.5px; }
.news-card-meta span, .news-card-meta a { color: var(--accent); font-weight: 700; }
.news-card h3 { margin: 0; color: var(--navy-950); font-size: 18px; line-height: 1.4; font-weight: 700; }
.news-card-summary { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card .card-link { margin-top: auto; padding-top: 8px; }

/* ── 홈: 카탈로그 ── */
.catalog-section { background: var(--ice-50); }
.catalog-band { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(36px, 5vw, 80px); align-items: center; }
.catalog-band-covers { display: flex; justify-content: center; }
.catalog-band-covers img { width: 46%; max-width: 250px; height: auto; aspect-ratio: 1 / 1.414; object-fit: cover; box-shadow: 0 24px 50px rgba(23,24,69,.22); }
.catalog-band-covers img + img { margin-left: -12%; transform: translateY(26px) rotate(4deg); }
.catalog-band-copy h2 { margin: 0; color: var(--navy-950); font-weight: 800; letter-spacing: -.035em; }
.catalog-band-copy > p { margin: 14px 0 26px; color: var(--muted); }
.catalog-band-actions { display: grid; gap: 10px; }
.download-link { padding: 18px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; border: 1px solid var(--line); background: var(--white); transition: border-color .2s, background .2s, color .2s; }
.download-link strong { color: var(--navy-950); font-size: 16px; }
.download-link span { color: var(--muted); font-size: 13px; }
.download-link b { color: var(--accent); font-size: 18px; }
.download-link:hover, .download-link:focus-visible { border-color: var(--navy-900); background: var(--navy-950); }
.download-link:hover strong, .download-link:hover span { color: var(--white); }

/* ── 하위 페이지 배너 · 탭 ── */
.section-index { min-height: 300px; }
.section-index-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.section-index-path a:hover, .section-index-path a:focus-visible { color: #ffa585; }
.page-tabs {
  margin-bottom: 0;
  display: flex;
  gap: clamp(18px, 2.4vw, 40px);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs a { flex: none; padding: 20px 2px 18px; border-bottom: 2px solid transparent; color: var(--muted); font-size: 15px; font-weight: 700; transition: color .2s, border-color .2s; }
.page-tabs a small { margin-left: 4px; color: #9ea3c7; font-size: 12px; }
.page-tabs a:hover, .page-tabs a:focus-visible, .page-tabs a[aria-current="page"] { color: var(--navy-950); border-bottom-color: var(--accent); }

/* ── 제품 목록 ── */
.product-index { padding: clamp(56px, 5vw, 80px) 0 clamp(50px, 5vw, 70px); }
.product-index + .product-index { border-top: 1px solid var(--line); }
.category-heading { margin-bottom: clamp(26px, 2.6vw, 40px); display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.category-heading .eyebrow { margin-bottom: 10px; }
.category-heading h2 { margin: 0; color: var(--navy-950); font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.035em; }
.category-heading div > p:not(.eyebrow) { margin: 10px 0 0; color: var(--muted); }
.product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-card:hover { color: var(--white); background: var(--navy-950); }
.product-card-media.is-empty { display: grid; place-items: center; background: linear-gradient(135deg, #f4f6fb, #e2e5f0); }
.product-card-placeholder { display: grid; justify-items: center; gap: 14px; color: #8a90b8; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-align: center; padding: 0 14px; }
.product-card-placeholder i { width: 54px; height: 54px; border: 1px solid #b3b9dc; border-radius: 50%; position: relative; }
.product-card-placeholder i::after { content: ''; position: absolute; inset: 14px; border: 1px dashed #b3b9dc; border-radius: 50%; }
/* align-items: stretch — 앞쪽(태국 사이트) 규칙의 align-items: end 가 남아 짧은 품번 · 이름이 오른쪽에 붙었다.
   flex: 1 — 카드 높이만큼 늘려 아래 줄(생산지 · 보기)을 같은 줄 카드끼리 카드 바닥에 맞춘다. */
.product-card-copy { min-height: 138px; padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.product-card-code { margin: 0; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.product-card h2, .product-card h3 { font-size: 17px; font-weight: 700; line-height: 1.4; }
/* 생산지 표시 · 보기 링크는 늘 한 줄: 링크가 아래로 떨어지는 카드와 아닌 카드가 섞이면 같은 줄 카드끼리 높이가 어긋난다.
   표시가 길면 표시 안에서 줄을 바꾸고, 둘 다 카드 아래 선에 맞춘다. */
.product-card-foot { margin-top: auto; padding-top: 10px; display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.product-card-foot .origin-chip { min-width: 0; }
.product-card-foot .card-link { flex: none; }
.origin-chip { padding: 3px 8px; font-size: 12px; font-weight: 700; letter-spacing: .01em; }
.origin-korea { color: var(--navy-800); background: #eceef8; }
.origin-thailand { color: #0f766e; background: #e6f4f1; }
.origin-china-oem { color: #4b5563; background: #f1f2f4; }
.product-card:hover .origin-chip { color: var(--white); background: rgba(255,255,255,.14); }

/* ── 제품 상세 ── */
.product-path { padding: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 12.5px; }
.product-path i { width: 4px; height: 4px; background: #b3b9dc; transform: rotate(45deg); }
.product-path a { min-width: 44px; min-height: 44px; padding: 6px; margin: -6px; display: inline-flex; align-items: center; justify-content: center; }
.product-path a:hover { color: var(--accent); }
.product-path strong { color: var(--navy-950); font-weight: 700; }
.product-detail-hero { min-height: 0; padding: 30px 0 70px; }
.product-detail-hero h1 { font-weight: 800; }
.product-badges { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.origin-badge { width: auto; margin: 0; padding: 12px 16px; gap: 14px; align-items: baseline; border-width: 1px; }
.origin-badge span { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.origin-badge strong { font-size: 14px; }
.origin-badge.origin-korea { border-color: var(--navy-800); background: #eceef8; color: var(--navy-800); }
.origin-badge.origin-thailand { border-color: #0f766e; background: #e6f4f1; color: #0f766e; }
.origin-badge.origin-china-oem { border-color: #6b7280; background: #f4f5f7; color: #374151; }
.product-notice { margin-top: 22px; padding: 16px 18px; border-left: 4px solid var(--navy-800); background: var(--ice-50); }
.product-notice.origin-thailand { border-left-color: #0f766e; background: #f0f8f6; }
.product-notice p { margin: 0; color: #373c5c; font-size: 15px; line-height: 1.7; }
.product-notice a { margin-top: 10px; display: inline-flex; gap: 8px; color: var(--navy-800); font-size: 14px; font-weight: 700; }
.product-notice a:hover { color: var(--accent); }
.product-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.product-detail-photo.is-empty { display: grid; place-items: center; align-content: center; gap: 12px; background: linear-gradient(135deg, #f4f6fb, #e2e5f0); }
.product-detail-photo figcaption { color: var(--muted); font-size: 13px; }
.facts-section { padding: 60px 0; display: grid; gap: 34px; }
.facts-title { margin: 0 0 18px; color: var(--navy-950); font-size: 20px; font-weight: 800; }
.facts-group-head { margin-bottom: 18px; }
.facts-group-head .eyebrow { margin-bottom: 8px; }
.facts-group-head h2 { margin: 0; color: var(--navy-950); font-size: clamp(22px, 2vw, 28px); font-weight: 800; }
.facts-group-head p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); }
.facts-grid { margin: 0; display: grid; grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.facts-grid div { min-height: 0; padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-grid div:first-child { border-left: 0; }
.facts-grid dt { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.facts-grid dd { margin: 6px 0 0; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.55; }
.feature-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.feature-list li { padding-left: 18px; position: relative; color: #373c5c; line-height: 1.65; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--accent); }
.cert-note { margin-top: 0; padding: 18px 20px; border-left: 3px solid var(--accent); background: var(--accent-soft); }
.cert-note span { margin: 0 0 6px; color: var(--accent-600); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.cert-note p { font-size: 14px; }
.guide-note { padding: 24px 26px; background: var(--ice-50); border: 1px solid var(--line); }
.guide-note h2 { margin: 0 0 10px; color: var(--navy-950); font-size: 17px; font-weight: 800; }
.guide-note p { margin: 0; color: #4b5070; line-height: 1.8; }
.spec-section { padding: 80px 0; border-top: 1px solid var(--line); }
.spec-section > .section-heading.compact h2 { font-weight: 800; }
.scroll-hint { display: none; margin: 0; color: var(--muted); font-size: 13px; }
.spec-group-title { margin: 56px 0 0; display: flex; align-items: baseline; gap: 12px; color: var(--navy-950); font-size: 24px; font-weight: 800; }
.spec-group-title span { color: var(--accent); font-size: 12px; letter-spacing: .12em; }
.spec-table + .spec-table { margin-top: 48px; }
.spec-group-title + .spec-table { margin-top: 20px; }
.spec-table h3 { margin: 0 0 14px; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--navy-950); font-size: 18px; font-weight: 800; }
.spec-section table { min-width: 640px; }
.spec-section th, .spec-section td { padding: 14px 12px; font-size: 13.5px; text-align: center; }
.spec-section thead th { color: var(--white); background: var(--navy-950); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; text-transform: none; }
.spec-section tbody th { color: var(--navy-950); background: var(--white); font-size: 13.5px; font-weight: 800; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.spec-section tbody tr:nth-child(even) td, .spec-section tbody tr:nth-child(even) th { background: var(--ice-50); }
.spec-section tbody tr:hover td, .spec-section tbody tr:hover th { background: #eceef8; }
.spec-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.quote-band { background: var(--navy-950); }
.quote-band h2 { font-weight: 800; }
.quote-band div > p:not(.eyebrow) { margin: 12px 0 0; color: #c7cbe0; }
.quote-band .eyebrow { color: #ffa585; }
.related-products { padding: clamp(60px, 6vw, 90px) 0 clamp(80px, 8vw, 110px); }

/* ── 회사소개 ── */
.company-story, .history-section, .facilities { scroll-margin-top: 20px; }
.company-section-heading .eyebrow { color: var(--accent); }
.company-section-heading h2 { font-weight: 800; }
/* 윗선 없음: 바로 위 섹션 제목 밑줄과 겹쳐 가로선이 두 줄로 보였다 (2026-09-14) */
.timeline { border-top: 0; }
/* 연도 칸 250px: "2014–2020" 이 44px 글씨에서 약 237px 라 220px 칸을 넘어 오른쪽 글에 붙었다 */
.timeline-year { padding: 34px 0; display: grid; grid-template-columns: minmax(120px, 250px) minmax(0, 1fr); gap: clamp(20px, 3vw, 50px); border-bottom: 1px solid var(--line); }
.timeline-year h3 { margin: 0; color: var(--accent); font-size: clamp(30px, 3vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.timeline-year ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.timeline-year li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.timeline-year time { padding-top: 2px; color: var(--navy-800); font-size: 14px; font-weight: 800; }
.timeline-year strong { display: block; color: var(--navy-950); font-size: 17px; font-weight: 700; line-height: 1.45; }
.timeline-year li span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.site-list { margin: 0 0 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.site-list div { padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--navy-800); background: var(--white); }
.site-list dt { color: var(--navy-950); font-size: 17px; font-weight: 800; }
.site-list dd { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.thai-subsidiary { padding: clamp(70px, 7vw, 110px) 0; color: var(--white); background: var(--navy-950); scroll-margin-top: 20px; }
.thai-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 5vw, 80px); align-items: center; }
.thai-media { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.thai-media img { width: 100%; height: 100%; object-fit: cover; }
.thai-copy .eyebrow { display: flex; gap: 12px; color: #ffa585; font-size: 14px; }
.thai-copy .eyebrow span { padding-right: 12px; border-right: 1px solid currentColor; color: var(--white); }
.thai-copy h2 { margin: 0; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; font-weight: 800; letter-spacing: -.035em; }
.thai-copy > p:not(.eyebrow, .region-tag) { margin: 18px 0 0; color: #dfe2f2; line-height: 1.8; }
.thai-copy .thai-note { padding: 16px 18px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.06); color: var(--white); font-weight: 600; }
.thai-copy dl { margin: 26px 0 30px; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.18); }
.thai-copy dl div { padding: 14px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; border-bottom: 1px solid rgba(255,255,255,.18); }
.thai-copy dt { color: #b9bddb; font-size: 13px; font-weight: 700; }
.thai-copy dd { margin: 0; font-size: 15px; }
.location-section { margin-top: 0; scroll-margin-top: 20px; }
.location-grid address { font-size: 17px; font-weight: 600; color: var(--navy-950); }
.location-contact { margin: 0 0 34px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.location-contact div { padding: 13px 0; display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--line); }
.location-contact dt { color: var(--muted); font-size: 13px; font-weight: 700; }
.location-contact dd { margin: 0; font-weight: 600; }
.location-contact a:hover { color: var(--accent); }
.location-contact a { min-height: 44px; display: inline-flex; align-items: center; margin-block: -8px; }

/* ── 품질 ── */
.quality-principles { padding: clamp(70px, 7vw, 100px) 0 0; }
.quality-section-heading h2 { font-weight: 800; }
.principle-list { margin: 34px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.principle-list li { padding: 30px 28px; border: 1px solid var(--line); border-top: 3px solid var(--navy-800); }
.principle-list span { color: var(--accent); font-size: 13px; font-weight: 800; }
.principle-list strong { display: block; margin-top: 12px; color: var(--navy-950); font-size: 20px; font-weight: 800; }
.principle-list p { margin: 10px 0 0; color: var(--muted); line-height: 1.7; }
.quality-card-icon { width: 60px; height: 60px; margin: 26px 0 0 24px; display: grid; place-items: center; background: #eceef8; }
.quality-card-icon img { width: 32px; height: 32px; }
.quality-card-copy { min-height: 0; padding: 18px 24px 26px; }
.quality-card-number { color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.quality-card h3 { margin-top: 8px; font-size: 19px; font-weight: 800; }
.quality-standard { margin: 40px 0 0; padding: 28px 30px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; color: var(--white); background: var(--navy-950); font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; }
.quality-standard span { color: #ffa585; font-size: 12px; letter-spacing: .16em; }
.quality-process ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quality-process li strong { font-size: 18px; font-weight: 800; }
.quality-process li ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.quality-process li li { padding: 0 0 0 14px; border: 0; background: none; box-shadow: none; transform: none; overflow: visible; color: #4b5070; font-size: 15px; line-height: 1.6; }
.quality-process li li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; margin: 0; background: var(--accent); }
.quality-process li li:hover { transform: none; box-shadow: none; }
.quality-process li li:hover::before { width: 5px; background: var(--accent); }
.quality-evaluation { padding: clamp(70px, 7vw, 100px) 0; }
.evaluation-copy { margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(30px, 4vw, 64px); align-items: start; }
.evaluation-text { display: flex; flex-direction: column; gap: clamp(18px, 1.6vw, 26px); }
.evaluation-copy p { margin: 0; color: #4b5070; line-height: 1.85; }
.evaluation-copy dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.evaluation-copy dl div { padding: 22px; background: var(--ice-50); border: 1px solid var(--line); }
.evaluation-copy dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.evaluation-copy dd { margin: 6px 0 0; color: var(--navy-950); font-size: 26px; font-weight: 900; }
.quality-resources { padding-top: clamp(70px, 7vw, 100px); }

/* ── 카탈로그 · 인증 ── */
.catalog-downloads { padding: clamp(60px, 6vw, 90px) 0 clamp(90px, 9vw, 120px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 36px); }
.catalog-card { padding: clamp(24px, 2.6vw, 40px); display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: clamp(22px, 2.6vw, 40px); align-items: start; border: 1px solid var(--line); }
.catalog-card figure { margin: 0; aspect-ratio: 1 / 1.414; overflow: hidden; box-shadow: 0 18px 40px rgba(23,24,69,.16); }
.catalog-card figure img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card h2 { margin: 0; color: var(--navy-950); font-size: clamp(22px, 2vw, 30px); font-weight: 800; }
.catalog-meta-line { margin: 8px 0 18px; color: var(--muted); font-size: 14px; }
.catalog-card ul { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 8px; }
.catalog-card li { padding-left: 16px; position: relative; color: #4b5070; font-size: 15px; }
.catalog-card li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--accent); }
.certificate-index { padding: clamp(70px, 7vw, 100px) 0 clamp(90px, 9vw, 120px); }
.certificate-grid { margin-top: 30px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.certificate-grid-compact { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.certificate-second { margin-top: clamp(60px, 6vw, 90px); }
.certificate-media { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ice-50); display: grid; place-items: center; padding: 14px; }
.certificate-media img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.certificate-card:hover .certificate-media img { transform: scale(1.03); }
.certificate-media.is-empty { background: linear-gradient(135deg, #f4f6fb, #e2e5f0); }
.certificate-card-copy { min-height: 0; padding: 18px 20px 20px; gap: 8px; }
.certificate-card h3 { margin: 0; color: var(--navy-950); font-size: 16px; font-weight: 800; }
.certificate-card-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.download-chip { margin-top: auto; align-self: flex-start; padding: 8px 12px; color: var(--white); background: var(--navy-900); font-size: 13px; font-weight: 700; }
.download-chip.is-disabled { color: var(--muted); background: var(--ice-50); }
.certificate-footnote { margin-top: 40px; }

/* ── FAQ ── */
.faq-list { padding: 40px 0 80px; }
.faq-list summary strong { color: var(--navy-950); font-weight: 700; }
.faq-list summary span { color: var(--accent); font-size: 12px; font-weight: 800; }
.faq-answer { max-width: 820px; margin: 0 0 35px 80px; }
.faq-answer p { margin: 0; color: #4b5070; font-size: 16px; line-height: 1.85; }
.faq-answer .table-scroll { margin-top: 18px; }
.faq-answer th { color: var(--white); background: var(--navy-950); font-size: 12px; letter-spacing: 0; text-transform: none; }
.faq-answer td { font-size: 13.5px; }
.simple-cta { gap: 30px; }
.simple-cta h2 { margin: 0; color: var(--navy-950); font-weight: 800; }
.simple-cta p { margin: 10px 0 0; color: var(--muted); }

/* ── 뉴스 ── */
.news-index { padding: clamp(50px, 5vw, 80px) 0 clamp(90px, 9vw, 120px); }
.article-head { max-width: 880px; padding: 20px 0 30px; }
.article-head .product-path { padding: 10px 0 30px; }
.article-head h1 { margin: 14px 0 0; color: var(--navy-950); font-size: clamp(30px, 3.6vw, 48px); line-height: 1.22; font-weight: 800; letter-spacing: -.04em; }
.article-head .page-lead { margin-top: 18px; }
.article-hero { max-width: 1080px; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ice-50); }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: 820px; padding: clamp(40px, 5vw, 70px) 0; }
.article-body > * + * { margin-top: 22px; }
.article-body h2 { margin-top: 48px; padding-left: 14px; border-left: 4px solid var(--accent); color: var(--navy-950); font-size: clamp(22px, 2vw, 28px); line-height: 1.35; font-weight: 800; }
.article-body p { color: #373c5c; font-size: 17px; line-height: 1.9; }
.article-lead { color: var(--navy-950) !important; font-size: clamp(18px, 1.6vw, 22px) !important; font-weight: 600; line-height: 1.7 !important; }
.article-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.article-cards article { padding: 22px; border: 1px solid var(--line); border-top: 3px solid var(--navy-800); }
.article-cards span { color: var(--accent); font-size: 12px; font-weight: 800; }
.article-cards h3 { margin: 8px 0 0; color: var(--navy-950); font-size: 18px; font-weight: 800; }
.article-cards p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.article-specs { margin-top: 18px; }
.article-table, .article-image { margin-left: 0; margin-right: 0; }
.article-table th { color: var(--white); background: var(--navy-950); font-size: 12.5px; letter-spacing: 0; text-transform: none; text-align: center; }
.article-table td { text-align: center; font-size: 14px; }
.article-table figcaption, .article-image figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.article-image img { width: 100%; display: block; }
.article-body blockquote { margin: 30px 0; padding: 24px 28px; border-left: 4px solid var(--navy-800); background: var(--ice-50); }
.article-body blockquote p { margin: 0; font-size: 18px; font-weight: 600; }
.article-body blockquote cite { display: block; margin-top: 10px; color: var(--muted); font-style: normal; font-size: 14px; }
.article-product { margin-top: 44px; padding: 18px; display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 18px; align-items: center; border: 1px solid var(--line); transition: border-color .2s, background .2s, color .2s; }
.article-product img { width: 90px; height: 90px; object-fit: cover; }
.article-product small { display: block; color: var(--accent); font-size: 12px; font-weight: 700; }
.article-product strong { display: block; margin-top: 4px; color: var(--navy-950); font-size: 18px; }
.article-product:hover { border-color: var(--navy-950); background: var(--navy-950); }
.article-product:hover strong { color: var(--white); }
.article-nav { max-width: 1080px; margin-bottom: clamp(70px, 7vw, 100px); padding-top: 30px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; border-top: 1px solid var(--line); }
.article-nav a { color: var(--navy-950); font-weight: 700; line-height: 1.5; }
.article-nav small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 600; }
.article-nav-next { text-align: right; }
.article-nav-list { padding: 12px 22px; border: 1px solid var(--navy-950); font-size: 14px; }
.article-nav-list:hover { color: var(--white); background: var(--navy-950); }

/* ── 개인정보처리방침 · 이용약관 ── */
.legal-page { padding-top: 150px; }
.legal-shell { max-width: 980px; }
.legal-page h1 { margin: 0; color: var(--navy-950); font-size: clamp(32px, 3.6vw, 48px); font-weight: 800; letter-spacing: -.04em; }
.legal-page .page-lead { max-width: 820px; margin: 20px 0 8px; }
.legal-effective { margin: 0 0 32px; color: var(--muted); font-size: 13px; }
.legal-toc { margin-bottom: 40px; padding: 22px 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 30px; background: var(--ice-50); }
.legal-toc a { min-height: 44px; display: flex; align-items: center; color: #4b5070; font-size: 14px; }
.legal-toc a:hover { color: var(--accent); }
.legal-page article { max-width: none; margin: 0; }
.legal-page article section { scroll-margin-top: 20px; padding: 26px 0; border-top: 1px solid var(--line); }
.legal-page article h2 { margin: 0 0 12px; color: var(--navy-950); font-size: 19px; font-weight: 800; }
.legal-page article p { margin: 0 0 10px; color: #4b5070; line-height: 1.85; }
.legal-page article ul { margin: 6px 0 12px; padding-left: 20px; color: #4b5070; line-height: 1.85; }
.legal-page article .table-scroll { margin-top: 14px; }
.legal-page article th { color: var(--navy-950); background: var(--ice-50); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.legal-page article td { font-size: 13.5px; white-space: normal; }
.error-page p { color: var(--muted); }
.error-actions { margin-top: 26px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── 푸터 ── */
.site-footer { grid-template-columns: 1fr 1.3fr 1.1fr .9fr; background: #0f1030; }
.footer-top { display: flex; flex-direction: column; gap: 24px; }
/* 로고가 첫 칸(1024~1280px 에서 약 190px)보다 넓어 옆 칸으로 삐져나오지 않게 칸 폭에 맞춘다 */
.site-footer .footer-brand { display: flex; width: min(232px, 100%); }
.footer-brand img { width: 100%; height: auto; display: block; }
.footer-social { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-social a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); color: #dfe2f2; transition: background .2s, border-color .2s, color .2s; }
.footer-social a:hover, .footer-social a:focus-visible { color: var(--white); background: var(--accent); border-color: var(--accent); }
.footer-social svg { width: 20px; height: 20px; }
.footer-column h2 { color: #ffa585; font-size: 14px; letter-spacing: .14em; }
.site-footer address { display: grid; gap: 4px; }
.footer-phone { color: var(--white); font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
.footer-links .footer-privacy { color: var(--white); font-weight: 800; }
.footer-contact a:hover, .footer-links a:hover { color: #ffa585; }
.footer-copy { color: #8a8fb5; }

/* ── 문의게시판 ── */
.board { padding: clamp(48px, 5vw, 70px) 0 clamp(80px, 8vw, 110px); }
.board-narrow { max-width: 900px; }
.board-toolbar { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.board-count { margin: 0; color: var(--muted); font-size: 14px; }
.board-table-wrap { border-top: 2px solid var(--navy-950); }
.board-table th, .board-table td { padding: 16px 12px; text-align: center; white-space: nowrap; font-size: 14px; }
.board-table th { color: var(--navy-950); background: var(--ice-50); font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.board-table td:first-child { font-weight: 400; }
.board-table .col-title { text-align: left; white-space: normal; width: 100%; }
.board-table .col-title a { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.board-table .col-title a:hover .title-text { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.board-table .col-num, .board-table .col-date { color: var(--muted); }
.board-table tbody tr:hover { background: #fafbfd; }
.lock-icon { width: 15px; height: 15px; flex: none; color: #9ea3c7; }
.cat-chip { flex: none; display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.cat-quote { color: #c2410c; background: #ffede6; }
.cat-product { color: var(--navy-800); background: #eceef8; }
.cat-quality { color: #0f766e; background: #e6f4f1; }
.cat-dev { color: #7e22ce; background: #f3e8ff; }
.cat-etc { color: #4b5563; background: #f1f2f4; }
.badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 700; }
.badge-pending { color: #b45309; background: #fff4e5; }
.badge-replied { color: #0f766e; background: #e6f4f1; }
.pagination { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pagination a, .pagination strong { min-width: 38px; height: 38px; padding: 0 8px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 14px; }
.pagination strong { color: var(--white); background: var(--navy-950); border-color: var(--navy-950); }
.pagination a:hover { border-color: var(--navy-950); }
.notice-box { margin-top: 36px; padding: 22px 24px; background: var(--ice-50); }
.notice-box strong { color: var(--navy-950); }
.notice-box ul { margin: 10px 0 0; padding-left: 18px; color: #4b5070; font-size: 15px; line-height: 1.85; }
.board-admin-link { margin: 18px 0 0; text-align: right; font-size: 12px; }
.board-admin-link a { color: #9ea3c7; }
.board-admin-link a { min-height: 44px; padding-inline: 8px; margin-inline: -8px; display: inline-flex; align-items: center; }
.board-card { padding: clamp(24px, 3vw, 38px); border: 1px solid var(--line); background: var(--white); }
.board-card + .board-card { margin-top: 18px; }
.field { display: grid; gap: 8px; margin: 0 0 22px; }
.field > span, .field legend { color: var(--ink); font-size: 14px; font-weight: 700; }
.field em { margin-left: 4px; color: var(--accent); font-style: normal; font-size: 12px; }
.field > span small { margin-left: 4px; color: var(--muted); font-size: 12px; font-weight: 500; }
.field input, .field select, .field textarea, .pw-box input, .filter-bar input, .filter-bar select, .reply-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cfd3e4;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.field textarea { min-height: 220px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus, .pw-box input:focus, .filter-bar input:focus, .filter-bar select:focus, .reply-form textarea:focus {
  border-color: var(--navy-800);
  outline: 2px solid rgba(40,53,131,.14);
  outline-offset: 0;
}
.field [aria-invalid="true"] { border-color: #b42318; background: #fff8f7; }
.field input[type="file"] { padding: 10px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.field-short { max-width: 380px; }
.field-hint { color: var(--muted); font-size: 14px; line-height: 1.6; }
.field-hint.point { color: var(--navy-800); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy-field { padding: 0; border: 0; }
.privacy-field legend { padding: 0; margin-bottom: 8px; }
.privacy-box { max-height: 200px; overflow-y: auto; padding: 16px 18px; background: var(--ice-50); border: 1px solid var(--line); color: #4b5070; font-size: 14px; line-height: 1.75; }
.privacy-box p { margin: 0 0 10px; }
.privacy-box strong { color: var(--navy-950); }
.agree-row { margin-top: 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; cursor: pointer; }
.agree-row input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--navy-800); }
.board-actions { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.board-actions-center { justify-content: center; }
.alert { margin: 0 0 18px; padding: 14px 18px; border-left: 3px solid; font-size: 14px; line-height: 1.6; }
.alert-danger { color: #7a1f16; background: #fdf0ee; border-color: #b42318; }
.alert-success { color: #0b5b53; background: #e6f4f1; border-color: #0f766e; }
.alert-info { color: var(--navy-800); background: #eceef8; border-color: var(--navy-800); }
.done-box { padding: clamp(50px, 6vw, 80px) 24px; text-align: center; background: var(--ice-50); }
.done-icon { width: 60px; height: 60px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--navy-900); font-size: 26px; }
.done-box h2 { margin: 0; color: var(--navy-950); font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; }
.done-box p { margin: 16px 0 28px; color: #4b5070; line-height: 1.85; }
.pw-box { max-width: 480px; margin: 0 auto; padding: clamp(30px, 4vw, 48px); text-align: center; border: 1px solid var(--line); }
.pw-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: var(--navy-800); background: #eceef8; }
.pw-icon svg { width: 26px; height: 26px; }
.pw-box h2 { margin: 0; color: var(--navy-950); font-size: 22px; font-weight: 800; }
.pw-box > p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.pw-box .pw-title { margin: 18px 0; padding: 12px; color: var(--navy-950); background: var(--ice-50); font-weight: 700; }
.pw-box input { text-align: center; }
.inquiry-view header { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.inquiry-view h2 { margin: 12px 0 0; color: var(--navy-950); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35; font-weight: 800; }
.view-meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.view-meta div { display: flex; gap: 8px; align-items: center; }
.view-meta dt { color: var(--muted); }
.view-meta dd { margin: 0; font-weight: 600; }
.view-content { padding: 26px 0; white-space: pre-wrap; word-break: break-word; color: #1f2937; font-size: 16px; line-height: 1.9; }
.view-file { margin: 0; padding: 14px 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: var(--ice-50); font-size: 14px; }
.view-file span { color: var(--muted); font-weight: 700; }
.view-file a { color: var(--navy-800); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.view-file small { color: var(--muted); }
.reply-box { margin-top: 24px; padding: 22px 24px; border-left: 4px solid var(--navy-800); background: #f4f6fb; }
.reply-box h3 { margin: 0 0 10px; color: var(--navy-800); font-size: 15px; font-weight: 800; }
.reply-content { white-space: pre-wrap; word-break: break-word; line-height: 1.85; }
.reply-box time { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }
.board-login { min-height: 76vh; padding: 160px 20px 90px; display: grid; place-items: center; }
.login-box { width: 100%; max-width: 420px; text-align: center; }
.login-box h1 { margin: 0; color: var(--navy-950); font-size: 26px; font-weight: 800; }
.login-box > p { margin: 8px 0 24px; color: var(--muted); font-size: 14px; }
.login-box .board-card { text-align: left; }
.login-back { margin-top: 18px; font-size: 13px; }
.login-back a { color: var(--muted); }
.admin-bar { background: #eceef8; border-bottom: 1px solid var(--line); }
.admin-bar .section-shell { min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; }
.admin-bar strong { color: var(--navy-950); }
.admin-bar nav { display: flex; gap: 18px; }
.admin-bar nav a { color: var(--navy-800); font-weight: 700; }
.admin-bar nav a:hover { color: var(--accent); }
.admin-bar nav form { margin: 0; }
.admin-bar nav button { padding: 0; border: 0; background: none; color: var(--navy-800); font: inherit; font-weight: 700; cursor: pointer; }
.admin-bar nav button:hover, .admin-bar nav button:focus-visible { color: var(--accent); }
.admin-head { margin-bottom: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.admin-head h1 { margin: 0; color: var(--navy-950); font-size: 26px; font-weight: 800; }
.admin-head h1 small { margin-left: 8px; color: var(--muted); font-size: 14px; font-weight: 500; }
.admin-head-actions { display: flex; gap: 8px; }
.filter-bar { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.filter-bar select { width: auto; min-height: 42px; font-size: 14px; }
.filter-bar input { flex: 1; min-width: 220px; width: auto; min-height: 42px; font-size: 14px; }
.admin-table th, .admin-table td { padding: 12px 10px; font-size: 13.5px; text-align: center; }
.admin-table th { color: var(--navy-950); background: var(--ice-50); font-size: 12.5px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.admin-table .col-title { text-align: left; }
.admin-table .col-title a { color: var(--ink); }
.admin-table .col-title a:hover { color: var(--accent); }
.admin-table td .button + .button { margin-left: 4px; }
.chk { width: 17px; height: 17px; accent-color: var(--navy-800); cursor: pointer; }
.detail-table { width: 100%; }
.detail-table th { width: 130px; padding: 12px 14px; color: #4b5070; background: var(--ice-50); font-size: 13px; font-weight: 700; letter-spacing: 0; text-align: left; text-transform: none; vertical-align: top; }
.detail-table td { padding: 12px 16px; font-size: 14px; white-space: normal; vertical-align: top; }
.detail-table td:first-child { font-weight: 400; }
.content-cell { white-space: pre-wrap !important; word-break: break-word; line-height: 1.85; }
.reply-cell { background: #f4f6fb; }
.reply-cell small { display: block; margin-top: 8px; }
.admin-reply-head { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.admin-reply-head h2 { margin: 0; color: var(--navy-800); font-size: 17px; font-weight: 800; }
.reply-form textarea { min-height: 180px; resize: vertical; line-height: 1.7; }

/* ── HQ 반응형 ── */
@media (max-width: 1400px) {
  .header-call span { display: none; }
}
@media (max-width: 1180px) {
  .header-call { display: none; }
  .mega-products { width: auto; padding: 5px 0 0 15px; display: block; transform: none; border-top: 0; }
  .mega-products ul { display: none; }
  .mega-products a.mega-title { padding: 9px 0; margin: 0; border: 0; color: #b9bddb; font-size: 16px; font-weight: 600; }
  .mega-products a.mega-title:hover { color: var(--white); }
  .main-menu { background: var(--navy-950); }
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-news .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certificate-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .certificate-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quality-process ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .hero-inner { padding-top: 130px; }
  .welcome, .new-product, .thai-grid, .catalog-band, .catalog-downloads { grid-template-columns: 1fr; }
  .welcome-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome-stats div:nth-child(3) { padding-left: 0; border-left: 0; }
  .category-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-list, .principle-list { grid-template-columns: 1fr; }
  .timeline-year { grid-template-columns: 1fr; gap: 16px; }
  .evaluation-copy { grid-template-columns: 1fr; }
  .catalog-band-covers { order: -1; }
  .category-heading { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .scroll-hint { display: block; }
  .legal-toc { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hero-strengths { grid-template-columns: 1fr; padding-bottom: 26px; }
  .hero-strengths li, .hero-strengths li + li { padding: 12px 0 0; border-left: 0; display: flex; align-items: baseline; gap: 12px; }
  .hero-strengths strong { font-size: 20px; }
  .hero-strengths span { font-size: 14px; }
  .hero-title-primary { font-size: clamp(42px, 13vw, 60px); }
  .hero-title-secondary { font-size: clamp(30px, 9vw, 42px); }
  html[lang="en"] .hero-title-primary { font-size: clamp(36px, 11vw, 52px); }
  html[lang="en"] .hero-title-secondary { font-size: clamp(24px, 7vw, 34px); }
  .field-row { grid-template-columns: 1fr; }
  .board-table .col-num, .board-table .col-author { display: none; }
  .board-table th, .board-table td { padding: 14px 8px; font-size: 13px; }
  .board-table .col-title a { flex-wrap: wrap; row-gap: 4px; }
  .catalog-card { grid-template-columns: 1fr; }
  .catalog-card figure { max-width: 220px; }
  .article-cards { grid-template-columns: 1fr; }
  .article-nav { grid-template-columns: 1fr; text-align: left; }
  .article-nav-next { text-align: left; }
  .article-nav-list { justify-self: start; }
  .faq-answer { margin: 0 0 30px 32px; }
  .brand-call { justify-self: start; }
}
@media (max-width: 580px) {
  .brand img { width: 176px; }
  .languages { gap: 8px; font-size: 15px; }
  .languages-icon { width: 20px; height: 20px; }
  .languages a + a { padding-left: 8px; }
  .hero-inner { padding-top: 110px; padding-bottom: 26px; }
  .welcome-stats dd { font-size: 26px; }
  .category-cards { gap: 10px; }
  .category-card-copy { padding: 14px 14px 16px; gap: 4px; }
  .category-card-copy p { font-size: 11px; letter-spacing: .06em; }
  .category-card-copy h3 { padding-right: 22px; font-size: 18px; }
  .category-card-copy span { display: none; }
  .category-card-copy b { right: 12px; bottom: 14px; font-size: 16px; }
  .category-card-media.is-empty span { font-size: 18px; }
  .news-grid, .home-news .news-grid { grid-template-columns: 1fr; }
  .certificate-grid, .certificate-grid-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-process ol { grid-template-columns: 1fr; }
  .site-footer { grid-template-columns: 1fr; }
  .board-card { padding: 22px 18px; }
  .board-actions .button { flex: 1 1 auto; }
  .admin-bar .section-shell { flex-direction: column; align-items: flex-start; padding: 10px 0; }
  .thai-copy dl div, .location-contact div { grid-template-columns: 1fr; gap: 4px; }
  .timeline-year li { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-poster { opacity: 1; }
  .category-card-media img, .proof-card-media img, .news-card, .news-card-media img, .lite-yt img { transition: none; }
  .category-card:hover .category-card-media img, .proof-card:hover .proof-card-media img, .news-card:hover, .news-card:hover .news-card-media img { transform: none; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 1차 피드백 — 고정 헤더 · 홈 섹션 위계 · 회사소개 지역 구분
   ════════════════════════════════════════════════════════════════ */
:root { --home-space: clamp(88px, 8.5vw, 136px); --home-title: clamp(30px, 3.3vw, 50px); }

/* ── 헤더 고정: 스크롤해도 따라온다 (site.js 가 .is-scrolled 를 붙인다) ── */
html { scroll-padding-top: 100px; }
.site-header { position: fixed; top: 0; transition: min-height .3s ease, border-color .3s ease; }
.site-header::before { transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.is-scrolled { border-bottom-color: transparent; }
.site-header.is-scrolled::before { top: 0; bottom: 0; height: auto; background: rgba(23,24,69,.97); box-shadow: 0 10px 30px rgba(10,11,40,.25); }
@media (min-width: 1181px) {
  .nav-group { transition: padding .3s ease; }
  .brand img { transition: width .3s ease; }
  .site-header.is-scrolled { min-height: 82px; }
  .site-header.is-scrolled .nav-group { padding: 27px 0; }
  .site-header.is-scrolled .submenu { top: 74px; }
  .site-header.is-scrolled .brand img { width: clamp(186px, 13vw, 226px); }
}

/* ── 홈 섹션 위계: 번호 · 영문 라벨 · 구분선 → 제목 → 설명 ──
   모든 섹션이 같은 머리 모양으로 시작하고, 바탕은 흰색 · 연회색 · 네이비 · 블루가 번갈아 나온다. */
.home-chapter { margin: 0 0 clamp(28px, 3vw, 44px); display: flex; align-items: center; gap: 14px; color: var(--navy-800); font-size: 12px; font-weight: 700; letter-spacing: .18em; line-height: 1.3; text-transform: uppercase; }
.home-chapter b { flex: none; color: var(--accent); font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.home-chapter span { min-width: 0; }
.home-chapter::after { content: ''; flex: 1 1 24px; min-width: 24px; height: 1px; background: currentColor; opacity: .25; }
.home-head { margin-bottom: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 clamp(30px, 5vw, 90px); align-items: end; }
.home-head .home-chapter { grid-column: 1 / -1; }
.home-head h2 { margin: 0; color: var(--navy-950); line-height: 1.2; font-weight: 800; letter-spacing: -.04em; }
.home-head h2, .welcome-copy h2, .new-product-copy h2, .catalog-band-copy h2 { font-size: var(--home-title); }
.home-head-lead, .home-head-side p { margin: 0; color: var(--muted); font-size: clamp(15px, 1.1vw, 17px); line-height: 1.75; }
.home-head-side { display: grid; gap: 16px; justify-items: start; }

.welcome > .home-chapter, .new-product > .home-chapter, .catalog-band > .home-chapter { grid-column: 1 / -1; }
.welcome, .product-proof-inner, .category-showcase, .video-section, .new-product, .home-news, .catalog-section {
  padding-top: var(--home-space);
  padding-bottom: var(--home-space);
}

/* 라벨이 길어져도 섹션 번호(03 · 04)가 두 줄로 쪼개지지 않게 */
.company-section-heading .eyebrow span, .thai-copy .eyebrow span { flex: none; }
.region-tag { margin: 0 0 22px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); color: var(--navy-950); font-size: 13px; font-weight: 800; }
.region-tag b { padding: 4px 8px; color: var(--white); background: var(--navy-800); font-size: 11px; letter-spacing: .12em; }
.region-tag-light { border-color: rgba(255,255,255,.28); color: var(--white); }
.region-tag-light b { background: var(--accent); }
.facilities, .history-section { position: relative; isolation: isolate; }
.facilities::before, .history-section::before { content: 'KOREA'; position: absolute; z-index: -1; right: 0; top: clamp(30px, 4vw, 70px); color: #eef0f7; font-size: clamp(80px, 13vw, 220px); font-weight: 900; line-height: 1; letter-spacing: -.05em; pointer-events: none; }
.thai-subsidiary { position: relative; overflow: hidden; isolation: isolate; }
.thai-subsidiary::after { content: 'THAILAND'; position: absolute; z-index: -1; right: -1vw; bottom: -2.4vw; color: rgba(255,255,255,.05); font-size: clamp(80px, 14vw, 240px); font-weight: 900; line-height: 1; letter-spacing: -.05em; pointer-events: none; }

@media (max-width: 920px) {
  .home-head { grid-template-columns: 1fr; }
  .home-head, .welcome, .new-product, .catalog-band { row-gap: 22px; }
  .home-chapter { margin-bottom: 4px; }
  .catalog-band > .home-chapter { order: -2; }
  .site-list { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  :root { --home-space: 68px; --home-title: 28px; }
  html { scroll-padding-top: 86px; }
  .home-chapter { gap: 10px; font-size: 11px; letter-spacing: .14em; }
  .home-chapter b { font-size: 13px; }
}
@media (max-width: 374px) {
  .languages-icon { display: none; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 2차 피드백 — 하위 페이지 배너 · 전체 화면 커튼 메뉴 · 품질보증시스템
   ════════════════════════════════════════════════════════════════ */

/* ── 하위 페이지: 헤더를 배너 위에 투명하게 얹고, 내리면 색이 생긴다 ── */
.page-main:has(> .section-index:first-child) { padding-top: 0; }
body:has(.page-main > .section-index:first-child) .site-header-solid:not(.is-scrolled):not(.menu-all-open) { border-bottom-color: rgba(255,255,255,.22); }
body:has(.page-main > .section-index:first-child) .site-header-solid:not(.is-scrolled):not(.menu-all-open)::before {
  bottom: auto;
  height: 180px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,0));
}
/* 상단 배너: 크게 · 굵게 · 검은 덮개. 헤더 높이만큼 위 여백을 더 준다. */
.section-index {
  min-height: clamp(460px, 58vh, 600px);
  padding: calc(108px + clamp(40px, 4vw, 70px)) clamp(24px, 3vw, 72px) clamp(64px, 6vw, 96px);
}
.section-index-path { margin-bottom: 26px; color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.section-index-path strong { color: #ffa585; }
.section-index h1 { max-width: 20ch; font-size: clamp(42px, 5.2vw, 78px); line-height: 1.08; font-weight: 800; letter-spacing: -.045em; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.section-index .page-lead { max-width: 46em; margin-top: 22px; color: rgba(255,255,255,.92); font-size: clamp(15px, 1.25vw, 19px); font-weight: 600; text-shadow: 0 1px 14px rgba(0,0,0,.6); }
@media (max-width: 1180px) {
  .section-index { padding-top: calc(68px + 52px); }
}
@media (max-width: 920px) {
  .section-index { min-height: 400px; padding: calc(68px + 44px) 30px 56px; }
}
@media (max-width: 580px) {
  .section-index { min-height: 360px; padding: calc(68px + 36px) 22px 46px; }
  .section-index-path { margin-bottom: 18px; font-size: 10.5px; }
  .section-index h1 { font-size: clamp(32px, 9.6vw, 42px); }
  .section-index .page-lead { margin-top: 14px; font-size: 14.5px; }
}

/* ── 메뉴 버튼 → 전체 화면 커튼 (데스크톱에서도 버튼을 보여 준다) ── */
.menu-toggle { width: 44px; height: 44px; margin-right: -10px; padding: 10px; display: grid; align-content: center; gap: 5px; border: 0; background: transparent; color: inherit; cursor: pointer; position: relative; z-index: 2; }
.menu-toggle span { height: 2px; background: currentColor; transition: transform .3s ease, opacity .2s ease; }
.menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1181px) {
  .site-header { grid-template-columns: auto 1fr auto auto; }
  .menu-toggle { grid-column: 4; grid-row: 1; }
}
@media (max-width: 1400px) {
  .header-call { display: none; }
}
@media (max-width: 1180px) {
  .main-menu, .main-menu.open { display: none; }
}
html.curtain-open { overflow: hidden; }
html.curtain-open .site-header::before { background: transparent; box-shadow: none; }
html.curtain-open .main-menu { visibility: hidden; }
.menu-curtain {
  position: fixed;
  inset: 0;
  z-index: 9;
  padding: clamp(140px, 16vh, 180px) 0 60px;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 10%, rgba(40,53,131,.45), transparent 45%),
    #0b0c22;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s cubic-bezier(.77,0,.18,1), visibility 0s linear .6s;
}
.menu-curtain.is-open { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .6s cubic-bezier(.77,0,.18,1); }
.menu-curtain-inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: clamp(40px, 6vw, 120px); align-items: start; }
.curtain-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 44px clamp(24px, 3vw, 48px); }
.curtain-group { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.menu-curtain.is-open .curtain-group { opacity: 1; transform: none; }
.menu-curtain.is-open .curtain-group:nth-child(1) { transition-delay: .22s; }
.menu-curtain.is-open .curtain-group:nth-child(2) { transition-delay: .28s; }
.menu-curtain.is-open .curtain-group:nth-child(3) { transition-delay: .34s; }
.menu-curtain.is-open .curtain-group:nth-child(4) { transition-delay: .4s; }
.menu-curtain.is-open .curtain-group:nth-child(5) { transition-delay: .46s; }
.curtain-title { margin-bottom: 14px; padding-bottom: 14px; display: block; border-bottom: 1px solid rgba(255,255,255,.18); font-size: clamp(24px, 2.2vw, 32px); font-weight: 800; letter-spacing: -.03em; transition: color .2s; }
.curtain-group ul { margin: 0; padding: 0; list-style: none; }
.curtain-group li a { padding: 7px 0; display: block; color: #b9bddb; font-size: 16px; font-weight: 600; transition: color .2s, transform .25s ease; }
.curtain-title:hover, .curtain-title:focus-visible, .curtain-group li a:hover, .curtain-group li a:focus-visible { color: #ffa585; }
.curtain-group li a:hover { transform: translateX(4px); }
.curtain-aside { padding-left: clamp(24px, 3vw, 48px); display: grid; gap: 34px; border-left: 1px solid rgba(255,255,255,.14); }
.curtain-label { margin: 0 0 12px; color: #ffa585; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
.curtain-contact { display: grid; gap: 6px; color: #b9bddb; font-size: 14px; }
.curtain-contact a:hover { color: var(--white); }
.curtain-phone { color: var(--white); font-size: clamp(30px, 2.6vw, 40px); font-weight: 900; letter-spacing: -.02em; }
.curtain-social { display: grid; gap: 4px; }
.curtain-social a { padding: 6px 0; display: inline-flex; align-items: center; gap: 12px; color: #dfe2f2; font-size: 15px; font-weight: 700; transition: color .2s; }
.curtain-social a:hover, .curtain-social a:focus-visible { color: #ffa585; }
.curtain-social svg { width: 24px; height: 24px; flex: none; }
.curtain-thai { justify-self: start; padding: 12px 18px; border: 1px solid rgba(255,255,255,.35); font-size: 14px; font-weight: 700; transition: background .2s, color .2s; }
.curtain-thai:hover, .curtain-thai:focus-visible { color: var(--navy-950); background: var(--white); }
@media (max-width: 920px) {
  .menu-curtain { padding-top: 110px; }
  .menu-curtain-inner { grid-template-columns: 1fr; }
  .curtain-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .curtain-aside { padding: 30px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.14); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .curtain-thai { grid-column: 1 / -1; }
}
@media (max-width: 580px) {
  .curtain-title { font-size: 21px; margin-bottom: 8px; padding-bottom: 10px; }
  .curtain-group li a { font-size: 15px; padding: 6px 0; }
  .curtain-aside { grid-template-columns: 1fr; gap: 26px; }
  .curtain-phone { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-curtain, .menu-curtain.is-open, .curtain-group { transition: none; }
}

/* ── 품질보증시스템: 검사 문서처럼 — 선으로 나눈 격자 · 검사 코드 · 수치 ── */
.quality-section-heading { margin-bottom: clamp(36px, 4vw, 56px); padding: 0; display: block; border: 0; }
.quality-section-heading .home-chapter { margin-bottom: clamp(18px, 2vw, 26px); }
.quality-section-heading h2 { max-width: none; margin: 0; color: var(--navy-950); font-size: var(--home-title); line-height: 1.2; font-weight: 800; letter-spacing: -.04em; }
.quality-principles { padding: var(--home-space) 0 0; }
.quality-checks, .quality-process, .quality-evaluation, .quality-resources { padding-top: var(--home-space); padding-bottom: var(--home-space); }
/* 01 원칙: 세 단계가 이어지는 흐름 + 핵심 수치 띠 */
.principle-list { margin: 0; gap: 0; border-top: 2px solid var(--navy-950); }
.principle-list li { position: relative; padding: 34px 34px 36px 0; border: 0; }
.principle-list li + li { padding-left: 34px; border-left: 1px solid var(--line); }
.principle-list li + li::before { content: '→'; position: absolute; left: -15px; top: -16px; width: 30px; height: 30px; display: grid; place-items: center; color: var(--white); background: var(--accent); font-size: 14px; font-weight: 800; }
.principle-list span { display: block; color: var(--navy-950); font-size: clamp(36px, 3.4vw, 52px); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.principle-list strong { margin-top: 18px; font-size: clamp(19px, 1.5vw, 22px); }
.principle-list p { font-size: 15px; }
.quality-metrics { margin: clamp(40px, 4vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); color: var(--white); background: var(--navy-950); }
.quality-metrics div { padding: clamp(26px, 2.6vw, 38px) clamp(20px, 2.2vw, 34px); display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; }
.quality-metrics div + div { border-left: 1px solid rgba(255,255,255,.14); }
/* 줄 높이 1.12 = 숫자 굴리기 칸 높이 — 글자 칸(UL · ISO)과 높이가 같아야 아래 라벨이 한 줄로 맞는다 */
.quality-metrics dd { margin: 0; font-size: clamp(34px, 3.4vw, 52px); font-weight: 900; line-height: 1.12; letter-spacing: -.03em; }
.quality-metrics dt { color: #b9bddb; font-size: 14px; font-weight: 600; }
/* 02 검사: 카드 대신 선으로 나눈 검사 매트릭스 (QC 코드 · 주기 표시) */
.quality-checks { background: var(--ice-50); }
.checks-grid { margin-top: 0; gap: 0; border-top: 2px solid var(--navy-950); border-left: 1px solid var(--line); background: var(--white); }
.quality-card { padding: clamp(24px, 2.2vw, 32px); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: none; transition: background .25s ease; }
.quality-card:hover { transform: none; box-shadow: none; border-color: var(--line); background: #fbfcfe; }
.quality-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quality-card-number { color: var(--navy-800); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.quality-card-cycle { padding: 3px 9px; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.quality-card-icon { width: 58px; height: 58px; margin: 24px 0 0; display: grid; place-items: center; border: 1px solid var(--line); background: var(--ice-50); }
.quality-card-copy { min-height: 0; padding: 20px 0 0; }
.quality-card h3 { margin: 0; color: var(--navy-950); font-size: clamp(18px, 1.5vw, 21px); font-weight: 800; }
.quality-card p { margin-top: 10px; font-size: 14px; line-height: 1.7; }
.quality-standard { margin-top: 0; border-top: 0; }
/* 03 생산 방식: 큰 번호 + 선 격자 */
.quality-process ol { gap: 0; border-top: 2px solid var(--navy-950); border-left: 1px solid var(--line); background: var(--white); }
.quality-process ol > li { padding: clamp(26px, 2.4vw, 34px); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quality-process ol > li::before { display: none; }
.quality-process ol > li:hover { transform: none; box-shadow: none; border-color: var(--line); background: #fbfcfe; }
.quality-process ol > li > span { color: #c7cbe0; font-size: clamp(34px, 3vw, 46px); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.quality-process ol > li > strong { margin-top: 16px; color: var(--navy-950); font-size: clamp(18px, 1.4vw, 20px); }
/* 04 내후성 시험: 시험 조건표 */
.evaluation-copy { margin-top: 0; }
.evaluation-text p:first-child { color: var(--navy-950); font-size: clamp(16px, 1.3vw, 19px); font-weight: 600; line-height: 1.7; }
.evaluation-text p + p { padding-top: clamp(18px, 1.6vw, 26px); border-top: 1px solid var(--line); }
.evaluation-copy dl { gap: 0; background: var(--navy-950); }
.evaluation-copy dl div { padding: clamp(24px, 2.4vw, 34px); border: 0; border-bottom: 1px solid rgba(255,255,255,.12); background: transparent; }
.evaluation-copy dl div:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
.evaluation-copy dl div:nth-child(n+3) { border-bottom: 0; }
.evaluation-copy dt { color: #ffa585; letter-spacing: .06em; }
.evaluation-copy dd { margin-top: 10px; color: var(--white); font-size: clamp(26px, 2.6vw, 38px); }
.resource-links { margin-top: 0; }
@media (max-width: 920px) {
  .principle-list li, .principle-list li + li { padding: 28px 0 30px; border-left: 0; border-bottom: 1px solid var(--line); }
  .principle-list li + li::before { left: 0; top: -15px; content: '↓'; }
  .quality-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quality-metrics div:nth-child(3) { border-left: 0; }
  .quality-metrics div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.14); }
}
/* ════════════════════════════════════════════════════════════════
   2026-09-12 3차 피드백 — 튀는 배경색 줄이기 · 큰 글씨 · 약관 페이지 통일
   ════════════════════════════════════════════════════════════════ */
/* 홈 02: 브랜드 소개 + 4가지 기준. 배경색 없이 흐린 ALLPUM 글자 */
.brand-proof { position: relative; overflow: hidden; background: var(--white); }
.brand-proof::before { content: 'ALLPUM'; position: absolute; right: -2vw; top: clamp(30px, 4vw, 70px); color: rgba(23,24,69,.04); font-size: clamp(120px, 18vw, 300px); font-weight: 900; line-height: 1; letter-spacing: -.05em; pointer-events: none; }
.brand-proof .product-proof-inner { position: relative; }
/* 상담 전화: 테두리 상자 대신 둥근 전화 아이콘 + 번호 (2026-09-15, 상자가 조잡해 보인다는 지적) */
.brand-proof .brand-call {
  margin-top: 8px;
  padding: 0;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 2px;
  color: var(--navy-950);
  border: 0;
  background: none;
}
.brand-call-icon {
  grid-row: 1 / 4;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy-950);
  transition: background .25s, transform .35s var(--ease-out);
}
.brand-call-icon svg { width: 25px; height: 25px; }
.brand-proof .brand-call span { grid-column: 2; font-size: 13px; letter-spacing: .08em; }
.brand-proof .brand-call strong { grid-column: 2; font-size: clamp(28px, 2.4vw, 36px); font-weight: 800; line-height: 1.1; transition: color .25s; }
.brand-proof .brand-call small { grid-column: 2; color: #4b5563; font-size: 14px; }
.brand-proof .brand-call:hover, .brand-proof .brand-call:focus-visible { color: var(--navy-950); background: none; }
.brand-proof .brand-call:hover small, .brand-proof .brand-call:focus-visible small { color: #4b5563; }
.brand-proof .brand-call:hover strong, .brand-proof .brand-call:focus-visible strong { color: var(--navy-800); }
.brand-call:hover .brand-call-icon, .brand-call:focus-visible .brand-call-icon { background: var(--accent); transform: rotate(-8deg) scale(1.04); }
@media (prefers-reduced-motion: reduce) { .brand-call-icon { transition: background .25s; } .brand-call:hover .brand-call-icon { transform: none; } }
.proof-subhead { margin: clamp(8px, 1vw, 16px) 0 clamp(24px, 2.6vw, 36px); padding-top: clamp(28px, 3vw, 40px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px 30px; border-top: 1px solid var(--line); }
.proof-subhead h3 { margin: 0; color: var(--navy-950); font-size: clamp(22px, 2vw, 30px); font-weight: 800; letter-spacing: -.03em; }
.proof-subhead p { margin: 0; color: #4b5563; font-size: clamp(16px, 1.2vw, 18px); }

/* 품질 테스트 영상: 네이비 배경 없이 흰 바탕 (홈 · 품질보증시스템 공통) */
.video-section { color: var(--ink); background: var(--white); }
.video-card h3 { color: var(--navy-950); font-size: 20px; font-weight: 800; }
.video-card p:not(.video-card-label) { color: #4b5563; font-size: 15.5px; line-height: 1.75; }
.video-card-label { color: var(--accent); font-size: 12px; }

/* 가독성: 주 사용층이 높은 연령대라 설명 글을 크고 진하게 */
.home-head-lead, .home-head-side p { color: #374151; font-size: clamp(16.5px, 1.3vw, 19px); line-height: 1.8; }
.home-head-side .text-link { font-size: 16px; }
.welcome-copy > p, .new-product-copy > p, .catalog-band-copy > p, .proof-card-body > p { color: #4b5563; }
.proof-card-body > p { font-size: 15px; }
.news-card-meta { font-size: 14px; }
.news-card h3 { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.45; }
.news-card-summary { color: #4b5563; font-size: 15.5px; line-height: 1.75; }

/* 약관 · 개인정보처리방침: 다른 하위 페이지와 같은 배너 아래 본문 */
.legal-page { padding-bottom: clamp(70px, 7vw, 110px); }
.legal-shell { padding-top: clamp(44px, 5vw, 80px); }
/* 예전 약관 전용 제목 규칙(.legal-page h1 네이비)이 배너 제목을 덮지 않게 */
.legal-page .section-index h1 { color: var(--white); }
.legal-page .section-index .page-lead { max-width: 46em; margin: 22px auto 0; }
.legal-effective { margin: 0 0 20px; color: var(--navy-800); font-size: 14px; font-weight: 700; }
.legal-page article p, .legal-page article ul { font-size: 16px; }
.legal-toc a { font-size: 15px; }

@media (max-width: 580px) {
  .checks-grid { gap: 0; }
  .quality-card { padding: 16px 14px 18px; }
  .quality-card-icon { width: 44px; height: 44px; margin-top: 16px; }
  .quality-card-icon img { width: 24px; height: 24px; }
  .quality-card-copy { padding-top: 12px; }
  .quality-card h3 { font-size: 16px; }
  .quality-card p { font-size: 14px; }
  .quality-card-cycle { padding: 2px 6px; font-size: 10px; }
  .quality-metrics div { padding: 22px 16px; }
  .quality-metrics dd { font-size: 30px; }
  .quality-metrics dt { font-size: 13.5px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 4차 — 모션 · 스크롤 효과
   원칙: transform · translate · scale · opacity · clip-path · CSS 변수만 움직인다 (레이아웃을 흔들지 않는다).
   JS 가 없거나 움직임 줄이기면 모든 요소가 처음부터 제자리에 보인다
   (.has-motion · .motion-ready · .is-visible 는 site.js 가 붙인다).
   ════════════════════════════════════════════════════════════════ */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-inout: cubic-bezier(.77,0,.18,1); --header-h: 82px; }
@media (max-width: 1180px) { :root { --header-h: 68px; } }
[data-count] { font-variant-numeric: tabular-nums; }

/* ── 등장 변형: data-reveal="left | right | scale | mask" ── */
[data-reveal="left"].motion-ready { transform: translateX(-44px); }
[data-reveal="right"].motion-ready { transform: translateX(44px); }
[data-reveal="scale"].motion-ready { transform: scale(.92); }
/* 옆에서 밀려 들어오는 요소가 등장 전 화면 밖으로 삐져나와 가로 스크롤이 생기지 않게 */
.location-section { overflow-x: clip; }
/* 사진: 옆으로 걷히는 막 + 살짝 줌 아웃. 시차 사진(--rest-scale)은 그 크기에서 멈춘다. */
[data-reveal="mask"].motion-ready { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.3s var(--ease-inout); }
[data-reveal="mask"].motion-ready.is-visible { clip-path: inset(0); }
[data-reveal="mask"].motion-ready img { scale: calc(var(--rest-scale, 1) + .2); transition: scale 1.9s var(--ease-out), transform .7s var(--ease-out), opacity .4s ease; }
[data-reveal="mask"].motion-ready.is-visible img { scale: var(--rest-scale, 1); }
.has-motion [data-parallax] { --rest-scale: 1.14; scale: var(--rest-scale); will-change: translate; }
/* 차례로 등장하는 카드의 사진은 조금 크게 시작해 제자리로 */
[data-reveal-children].motion-ready > * img { scale: 1.12; transition: scale 1.6s var(--ease-out), transform .7s var(--ease-out), opacity .3s ease; }
[data-reveal-children].motion-ready.is-visible > * img { scale: 1; }

/* 섹션 머리(01 · 라벨 ───): 등장할 때 구분선이 왼쪽에서 그어진다 */
[data-reveal].motion-ready .home-chapter::after { transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-out) .25s; }
[data-reveal].motion-ready.is-visible .home-chapter::after { transform: none; }
/* 굵은 윗선(수치 · 원칙 · 검사 격자): 등장할 때 왼쪽에서 그어진다 */
.welcome-stats, .principle-list, .checks-grid, .quality-process ol { position: relative; }
:is(.welcome-stats, .principle-list, .checks-grid, .quality-process ol).motion-ready { border-top-color: transparent; }
:is(.welcome-stats, .principle-list, .checks-grid, .quality-process ol).motion-ready::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: var(--navy-950);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-inout);
}
:is(.welcome-stats, .principle-list, .checks-grid, .quality-process ol).motion-ready.is-visible::before { transform: none; }

/* ── 홈 첫 화면: 글이 차례로 떠오르고, 내릴수록 영상은 커지고 글은 옅어진다 (--hero-p 0 → 1) ── */
.hero-inner > .eyebrow, .hero-intro, .hero-actions, .hero-strengths li { animation: hero-copy-in .9s var(--ease-out) both; }
.hero-inner > .eyebrow { animation-delay: .05s; }
.hero-intro { animation-delay: .55s; }
.hero-actions { animation-delay: .7s; }
.hero-strengths li:nth-child(1) { animation-delay: .9s; }
.hero-strengths li:nth-child(2) { animation-delay: 1s; }
.hero-strengths li:nth-child(3) { animation-delay: 1.1s; }
/* 4칸이 된 뒤(2026-09-12) 넷째 칸(500+)만 지연이 없어 가장 먼저 튀어나왔다 */
.hero-strengths li:nth-child(4) { animation-delay: 1.2s; }
/* 첫 화면 숫자는 불러오자마자 굴러, 줄이 떠오르는 동안 굴러 끝나 버렸다 → 줄이 뜬 뒤 굴러가게 늦춘다 (태국 사이트와 같음) */
.hero-strengths .odometer-digit > span { transition-delay: calc(var(--order, 0) * 90ms + 1s); }
.hero-strengths { overflow: hidden; }
.hero-strengths::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffa585, transparent);
  animation: fx-laser 6s 1.8s cubic-bezier(.55,0,.45,1) infinite;
}
.has-motion .hero-media { scale: calc(1 + var(--hero-p, 0) * .08); translate: 0 calc(var(--hero-p, 0) * 14%); }
.has-motion :is(.hero-inner, .hero-strengths, .hero-scroll) { opacity: calc(1 - var(--hero-p, 0) * 1.15); translate: 0 calc(var(--hero-p, 0) * -70px); }
/* 오른쪽 여백의 SCROLL 표시: 세로선 위로 빛이 흘러내린다 */
.hero-scroll {
  position: absolute;
  z-index: 1;
  right: max(18px, calc(var(--edge) / 2 - 7px));
  bottom: clamp(140px, 22vh, 230px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.8);
  pointer-events: none;
}
.hero-scroll::before { content: 'SCROLL'; writing-mode: vertical-rl; font-size: 10px; font-weight: 700; letter-spacing: .32em; }
.hero-scroll i { width: 1px; height: 72px; position: relative; overflow: hidden; background: rgba(255,255,255,.28); }
.hero-scroll i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: #ffa585; animation: scroll-cue 2.2s var(--ease-inout) infinite; }
@keyframes scroll-cue { from { transform: translateY(-100%); } to { transform: translateY(250%); } }

/* ── 하위 페이지 배너: 사진이 천천히 줌 아웃 + 스크롤 시차, 제목은 아래에서 떠오른다 ── */
.section-index { isolation: isolate; }
/* 배경 사진은 <img> (views/partials/section-index.php). 덮개는 ::before 한 겹 */
.section-index > .section-index-bg {
  position: absolute;
  z-index: -2;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
  animation: index-zoom 2.8s var(--ease-out) both;
}
.section-index::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.46) 50%, rgba(0,0,0,.78) 100%); pointer-events: none; }
.section-index-path { animation: index-drop 1s var(--ease-out) .05s both; }
.section-index h1 { animation: index-rise 1.1s var(--ease-out) .15s both; }
.section-index .page-lead { animation: index-rise 1.1s var(--ease-out) .35s both; }
@keyframes index-zoom { from { scale: 1.14; } to { scale: 1; } }
@keyframes index-rise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes index-drop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }

/* ── 페이지 안 탭(회사소개 · 제품 전체): 제자리에 두고(따라오지 않음), 보고 있는 섹션의 탭에 밑줄 ── */
.page-tabs a.is-active { color: var(--navy-950); border-bottom-color: var(--accent); }

/* ── 회사 연혁: 스크롤을 따라 차오르는 세로선 + 연도 점 (--timeline 0 → 1) ── */
.timeline { --rail: clamp(30px, 3vw, 44px); position: relative; padding-left: var(--rail); }
.timeline::before, .timeline::after { content: ''; position: absolute; left: 7px; top: 0; width: 2px; }
.timeline::before { bottom: 0; background: var(--line); }
.timeline::after { height: calc(var(--timeline, 1) * 100%); background: linear-gradient(180deg, var(--navy-800), var(--accent)); }
.has-motion .timeline { --timeline: 0; }
.timeline-year { position: relative; }
.timeline-year::before {
  content: '';
  position: absolute;
  z-index: 1;
  left: calc(1px - var(--rail));
  top: calc(34px + clamp(30px, 3vw, 44px) / 2 - 7px);
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--white);
  transition: background .4s ease, border-color .4s ease, scale .5s var(--ease-out);
}
.has-motion .timeline-year:not(.is-passed)::before { border-color: #c7cbe0; background: var(--white); scale: .8; }

/* ── 흐린 배경 글자(ALLPUM · KOREA · THAILAND): 스크롤을 따라 옆으로 흐른다 (--drift -1 → 1) ── */
.brand-proof::before, .facilities::before, .history-section::before, .thai-subsidiary::after { translate: calc(var(--drift, 0) * 6vw) 0; }
/* 02 연혁도 03 국내 사업장(KOREA)과 같은 흐린 큰 글자 (2026-09-14) */
.history-section::before { content: 'HISTORY'; }

/* ── 카드 위 빛: 마우스를 따라 옅은 원형 빛 (--mx · --my) ── */
@media (hover: hover) and (pointer: fine) {
  [data-spotlight]::before {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.16), transparent 62%);
    opacity: 0;
    transition: opacity .4s ease;
  }
  .has-motion [data-spotlight]:hover::before { opacity: 1; }
  /* 카탈로그 표지: 올리면 조금 더 펼쳐진다 */
  .catalog-band:hover .catalog-band-covers img:first-child { transform: rotate(-3deg) translateX(-4%); }
  .catalog-band:hover .catalog-band-covers img + img { transform: translateY(12px) rotate(8deg); }
}

/* ── 영상 재생 버튼: 물결이 번진다 ── */
.lite-yt-play::before { content: ''; position: absolute; inset: 0; border: 2px solid rgba(232,80,43,.85); border-radius: 50%; pointer-events: none; animation: play-ripple 2.4s var(--ease-out) infinite; }
@keyframes play-ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.75); opacity: 0; } }

/* ── 카탈로그 표지: 등장할 때 두 번째 표지가 부채처럼 펼쳐진다 ── */
.catalog-band-covers img { transition: transform .9s var(--ease-out); }
.catalog-band.motion-ready:not(.is-visible) .catalog-band-covers img + img { transform: translate(-30%, 0) rotate(-4deg); }
.download-link b { transition: translate .3s var(--ease-out); }
.download-link:hover b, .download-link:focus-visible b { translate: 0 3px; }

/* ── 버튼: 올리면 빛이 한 번 지나가고, 누르면 살짝 눌린다 ── */
.button-accent, .button-navy { position: relative; overflow: hidden; isolation: isolate; }
.button-accent::after, .button-navy::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  translate: -110% 0;
  transition: translate .75s var(--ease-out);
  pointer-events: none;
}
.button-accent:hover::after, .button-accent:focus-visible::after,
.button-navy:hover::after, .button-navy:focus-visible::after { translate: 110% 0; }
.button:active { scale: .97; }

/* ── 데스크톱 드롭다운: 살짝 떠오르며 열린다 ── */
@media (min-width: 1181px) {
  .nav-group:hover .submenu, .nav-group:focus-within .submenu { animation: submenu-in .3s var(--ease-out) both; }
}
@keyframes submenu-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* ── 자주 묻는 질문: 부드럽게 펼침 + 십자(+)가 빼기(−)로 ── */
.faq-list summary strong { transition: color .2s ease; }
.faq-list summary:hover strong { color: var(--accent); }
.faq-list summary i { position: relative; width: 18px; height: 18px; align-self: center; justify-self: end; }
.faq-list summary i::before, .faq-list summary i::after, .faq-list details[open] summary i::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--navy-950);
  transition: rotate .4s var(--ease-out), background .2s ease;
}
.faq-list summary i::after { rotate: 90deg; }
.faq-list details[open] summary i::after { rotate: 0deg; }
.faq-list details[open] summary i::before, .faq-list details[open] summary i::after { background: var(--accent); }
@supports (interpolate-size: allow-keywords) {
  .faq-list details { interpolate-size: allow-keywords; }
  .faq-list details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
  .faq-list details[open]::details-content { block-size: auto; }
}

/* ── 맨 위로 (--progress 0 → 1 만큼 테두리 원이 찬다) ── */
.to-top {
  position: fixed;
  z-index: 80;
  right: clamp(16px, 2vw, 32px);
  bottom: max(clamp(16px, 2vw, 32px), calc(env(safe-area-inset-bottom) + 12px));
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--white);
  background: var(--navy-950);
  box-shadow: 0 14px 34px rgba(15,16,48,.28);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  transition: opacity .35s ease, translate .45s var(--ease-out), background .2s ease, visibility 0s linear .45s;
}
.to-top.is-shown { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .35s ease, translate .45s var(--ease-out), background .2s ease; }
.to-top:hover, .to-top:focus-visible { background: var(--accent); }
.to-top svg { width: 100%; height: 100%; display: block; fill: none; }
.to-top-track { stroke: rgba(255,255,255,.18); stroke-width: 2; }
.to-top-ring { stroke: #ffa585; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100px; stroke-dashoffset: calc(100px - var(--progress, 0) * 100px); transform: rotate(-90deg); transform-origin: center; }
.to-top:hover .to-top-ring, .to-top:focus-visible .to-top-ring { stroke: var(--white); }
.to-top path { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: translate .3s var(--ease-out); }
.to-top:hover path { translate: 0 -2px; }
/* 쿠키 안내 · 전체 메뉴가 떠 있는 동안은 숨긴다 (겹치지 않게) */
body:has(.cookie-banner:not([hidden])) .to-top, html.curtain-open .to-top { opacity: 0; visibility: hidden; }

/* ── 페이지 이동: 같은 사이트 안에서는 부드럽게 겹쳐 바뀐다 (지원 브라우저만, 헤더는 제자리) ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: .25s ease both vt-out; }
  ::view-transition-new(root) { animation: .5s var(--ease-out) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; translate: 0 16px; } }

@media (max-width: 920px) {
  .hero-scroll { display: none; }
}
@media (max-width: 700px) {
  /* 좁은 화면에서는 옆으로 밀려 들어오지 않고 아래에서 떠오른다 */
  [data-reveal="left"].motion-ready, [data-reveal="right"].motion-ready { transform: translateY(34px); }
  .to-top { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-index > .section-index-bg, .section-index-path, .section-index h1, .section-index .page-lead,
  .hero-inner > .eyebrow, .hero-intro, .hero-actions, .hero-strengths li,
  .nav-group:hover .submenu, .nav-group:focus-within .submenu { animation: none; }
  .hero-scroll, .hero-strengths::before, .lite-yt-play::before, .button-accent::after, .button-navy::after { display: none; }
  .button:active { scale: none; }
  .to-top, .to-top.is-shown { translate: none; transition: none; }
  .faq-list details::details-content, .faq-list summary i::before, .faq-list summary i::after, .catalog-band-covers img { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 5차 — 헤더 높이 · 섹션 머리 크게 · 숫자 굴리기 · 스크롤 장면 · 글자 모션
   (새 모션은 모두 site.js 가 붙이는 클래스 · 변수로만 켜진다 → JS 없음 · 움직임 줄이기면 정지 화면)
   ════════════════════════════════════════════════════════════════ */
/* ── 헤더: 내렸을 때도 얇게 느껴지지 않게 (82 → 96px) ── */
:root { --header-h: 96px; }
@media (max-width: 1180px) { :root { --header-h: 68px; } }
@media (min-width: 1181px) {
  html { scroll-padding-top: 112px; }
  .site-header.is-scrolled { min-height: 96px; }
  /* 헤더 높이 = 메뉴 위아래 여백 × 2 + 글자 줄(31px) → 32px 이면 96px (예전 27px ≈ 86px) */
  .site-header.is-scrolled .nav-group { padding: 32px 0; }
  .site-header.is-scrolled .submenu { top: 84px; }
  .site-header.is-scrolled .brand img { width: clamp(200px, 14.5vw, 246px); }
}

/* ── 섹션 머리(01 · WELCOME): 번호 · 라벨을 키워 위계를 분명히, 등장할 때 번호가 올라오고 라벨 자간이 모인다 ── */
.home-chapter { gap: clamp(14px, 1.2vw, 20px); color: var(--navy-900); font-size: clamp(14px, 1.05vw, 17px); font-weight: 800; letter-spacing: .16em; }
.home-chapter b { font-size: clamp(24px, 2vw, 32px); font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.home-chapter::after { height: 2px; opacity: .16; }
.home-chapter b, .home-chapter span { transition: opacity .8s ease .1s, translate .9s var(--ease-out) .1s, letter-spacing 1.2s var(--ease-out) .1s; }
[data-reveal].motion-ready:not(.is-visible) .home-chapter b { opacity: 0; translate: 0 70%; }
[data-reveal].motion-ready:not(.is-visible) .home-chapter span { opacity: 0; letter-spacing: .5em; }
@media (max-width: 580px) {
  .home-chapter { gap: 12px; font-size: 13px; letter-spacing: .12em; }
  .home-chapter b { font-size: 22px; }
}
/* 긴 라벨이 1열 격자의 최소 폭을 밀어 모바일 화면이 넓어지지 않게 (라벨은 칸이 모자라면 줄을 바꾼다) */
.home-chapter { min-width: 0; max-width: 100%; }
@media (max-width: 920px) {
  .welcome, .new-product, .catalog-band, .thai-grid, .home-head { grid-template-columns: minmax(0, 1fr); }
}

/* ── 숫자 굴리기: 자리마다 0~9 띠가 돌아 제 숫자에 멈춘다 (--target = 10 + 숫자, 앞자리부터 차례로) ── */
.odometer { --odo-h: 1.12em; display: inline-flex; }
.odometer > span { height: var(--odo-h); line-height: var(--odo-h); white-space: pre; }
.odometer-digit { overflow: hidden; }
.odometer-digit > span { display: block; transition: translate 1.2s cubic-bezier(.16,1,.3,1) calc(var(--order, 0) * 90ms); }
.odometer-digit > span > span { display: block; height: var(--odo-h); text-align: center; }
.is-rolling .odometer-digit > span { translate: 0 calc(var(--target, 0) * var(--odo-h) * -1); }
/* .hero-strengths span(설명 글 크기)이 숫자 칸에 번지지 않게 */
.hero-strengths strong span { color: inherit; font-size: inherit; }

/* ── 제목 글자 등장: 단어 · 글자가 아래에서 밀려 올라온다 (--i = 순서) ── */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.split-word > span { display: inline-block; }
.split-ready .split-word > span { translate: 0 115%; transition: translate 1.05s var(--ease-out) calc(min(var(--i, 0), 16) * 50ms + .08s); }
.split-ready.is-visible .split-word > span { translate: 0 0; }
.hero-title-secondary.split-ready .split-word > span { transition-delay: calc(var(--i, 0) * 70ms + .45s); }
.split-ready:is(.hero-title-primary, .hero-title-secondary), .section-index h1.split-ready { animation: none; }
/* 차례 등장 묶음 안의 제목은 통째로 흐려지지 않고 글자만 올라온다 */
[data-reveal-children].motion-ready > .split-ready { opacity: 1; transform: none; }

/* ── 설명 글: 제목 다음에 흐림이 걷히며 떠오른다 ── */
[data-reveal].motion-ready :is(.home-head-side p, .home-head-lead, .welcome-copy > p, .new-product-copy > p, .catalog-band-copy > p, .proof-subhead p) {
  opacity: 0;
  translate: 0 18px;
  filter: blur(6px);
  transition: opacity 1s ease .4s, translate 1s var(--ease-out) .4s, filter 1s ease .4s;
}
[data-reveal].motion-ready.is-visible :is(.home-head-side p, .home-head-lead, .welcome-copy > p, .new-product-copy > p, .catalog-band-copy > p, .proof-subhead p) {
  opacity: 1;
  translate: 0 0;
  filter: none;
}

/* ── 첫 화면 아래 강조 띠: 5칸 (Made in Korea · UL 인증 · 35년 금형 · 25년 사출 · 500+) ── */
.hero-strengths { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hero-strengths li { padding-right: clamp(12px, 1.4vw, 24px); }
.hero-strengths li + li { padding-left: clamp(14px, 1.6vw, 26px); }
@media (max-width: 1180px) {
  .hero-strengths strong { font-size: clamp(19px, 2.3vw, 24px); }
  .hero-strengths span { font-size: 14px; }
}
@media (max-width: 700px) {
  .hero-strengths { grid-template-columns: 1fr; }
  .hero-strengths li, .hero-strengths li + li { padding: 10px 0 0; }
  .hero-strengths strong { font-size: 19px; }
}

/* ── 01 인사: 한 화면 안에 큰 문장 · 인사 · 사진 · 수치. 문장은 스크롤할수록 한 단어씩 진해진다 (--w 0 → 1) ── */
.welcome-statement { grid-column: 1 / -1; margin: 0; color: var(--navy-950); font-size: clamp(28px, 3.7vw, 62px); font-weight: 800; line-height: 1.26; letter-spacing: -.045em; }
.scene-word { opacity: calc(.14 + var(--w, 1) * .86); transition: opacity .12s linear; }
.has-motion .scene-word { --w: 0; }
.welcome-copy h2 { font-size: clamp(22px, 2vw, 32px); line-height: 1.35; }
@media (min-width: 921px) {
  .welcome {
    min-height: 100vh;
    min-height: 100svh;
    padding-top: calc(var(--header-h) + clamp(24px, 4vh, 56px));
    padding-bottom: clamp(32px, 5vh, 64px);
    align-content: start;
    row-gap: clamp(20px, 3.4vh, 44px);
  }
  .welcome > .home-chapter { margin: 0; }
  /* 본사 사진은 큰 문장과 인사 두 행을 채운다 (태국 사이트와 같은 배치). */
  .welcome-statement, .welcome-copy { grid-column: 1; }
  .welcome-media {
    position: relative;
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: stretch;
    aspect-ratio: auto;
    height: auto;
    min-height: clamp(300px, 46vh, 560px);
  }
  .welcome-media img { position: absolute; inset: 0; }
  .welcome-stats { margin-top: 0; }
  /* 화면 높이가 낮은 노트북(720px 등)에서도 한 화면에 들어오도록 문장 · 간격을 높이에 맞춰 줄인다 */
  .welcome-statement { font-size: clamp(28px, min(3.7vw, 5.6vh), 62px); }
  .welcome { padding-top: calc(var(--header-h) + clamp(16px, 3vh, 56px)); row-gap: clamp(16px, 2.8vh, 44px); }
}
@media (min-width: 921px) and (max-height: 820px) {
  .welcome-copy > p { margin: 14px 0 18px; }
  .welcome-stats div { padding-top: 16px; }
  .welcome-stats dd { font-size: clamp(26px, 2.4vw, 36px); }
}

/* 장면 2: 화면에 고정된 채(260vh · 폰 220vh) 스크롤만큼 진행 (--p 0 → 1, site.js data-scene).
   작은 사진 → 화면 가득(--e, p 0~.5), 큰 글씨가 크게 시작해 제자리에 내려앉는다(--t, p .35~.75).
   끊김 방지 ① 멈춰 보이는 구간 없음: 사진은 끝(p 1)까지 천천히 다가오고 글씨도 끝까지 조금씩 올라간다.
   ② 매 프레임 바뀌는 값은 transform · opacity (합성 단계 처리). clip-path 는 사진이 다 열리면(p .5~) 더 바뀌지 않는다.
   모션이 없으면(움직임 줄이기) --p 1 = 완성된 모습. */
.scene-expand { --p: 1; --inset-y: 16%; --inset-x: 24%; position: relative; background: var(--white); }
.has-motion .scene-expand { --p: 0; height: 260vh; }
/* 열 폭을 화면 폭에 고정: 기본 auto 열은 큰 글씨 한 줄 폭(모바일 약 450px)만큼 넓어져 글씨가 오른쪽으로 밀려 잘렸다 */
.scene-stage { position: relative; min-height: min(80vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
.has-motion .scene-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.scene-media {
  --e: min(1, calc(var(--p) / .5));
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--navy-950);
  clip-path: inset(calc((1 - var(--e)) * var(--inset-y)) calc((1 - var(--e)) * var(--inset-x)) round calc((1 - var(--e)) * 28px));
}
.scene-media img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(calc(1.3 - var(--p) * .3)); }
/* 덮개는 옅게(사진이 밝게 보이도록, 2026-09-15) — 글씨는 그림자로 읽히게 한다 */
.scene-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,11,34,.05), rgba(10,11,34,.28) 45%, rgba(10,11,34,.5)); opacity: calc(.3 + var(--e) * .7); }
.scene-caption {
  --t: max(0, min(1, calc((var(--p) - .35) / .4)));
  position: relative;
  z-index: 1;
  padding: 0 var(--edge);
  color: var(--white);
  text-align: center;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 60px + (1 - var(--p)) * 24px));
}
.scene-big { margin: 0; font-size: clamp(54px, 11vw, 200px); font-weight: 900; line-height: .95; letter-spacing: -.05em; transform: scale(calc(1.3 - var(--t) * .3)); text-shadow: 0 2px 6px rgba(0,0,0,.3), 0 6px 40px rgba(0,0,0,.45); }
.scene-sub { margin: clamp(16px, 1.6vw, 26px) 0 0; color: #fff; font-size: clamp(16px, 1.5vw, 22px); font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.45); }
/* 움직이는 층을 미리 따로 올려 두어 글씨 그림자 · 사진을 매 프레임 다시 그리지 않는다 */
.has-motion .scene-media img, .has-motion .scene-big { will-change: transform; }
.has-motion .scene-caption { will-change: transform, opacity; }
.has-motion .scene-media::after { will-change: opacity; }

/* ── 큰 글씨 띠: 두 줄이 스크롤을 따라 반대로 흐른다 (--drift) ── */
.text-marquee { padding: clamp(40px, 5vw, 84px) 0; overflow: hidden; background: var(--white); }
.text-marquee p { width: max-content; margin: 0; display: flex; align-items: center; gap: .36em; font-size: clamp(54px, 9.5vw, 170px); font-weight: 900; line-height: 1.08; letter-spacing: -.04em; white-space: nowrap; }
.text-marquee p:first-child { color: var(--navy-950); translate: calc(-12% + var(--drift, 0) * 10%) 0; }
.text-marquee p:last-child { color: transparent; -webkit-text-stroke: 1.5px var(--navy-800); translate: calc(-30% - var(--drift, 0) * 10%) 0; }
.text-marquee i { width: .26em; height: .26em; flex: none; border-radius: 50%; background: var(--accent); }

@media (max-width: 700px) {
  .has-motion .scene-expand { height: 220vh; }
  .scene-expand { --inset-y: 22%; --inset-x: 10%; }
  .text-marquee p:last-child { -webkit-text-stroke-width: 1px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 6차 — 사진 등장 수정 · 태국 법인 흰 바탕 · CEO 문단 · 모바일 가로 스크롤 줄
   ════════════════════════════════════════════════════════════════ */
/* ── 사진 등장(data-reveal="mask"): 사진 틀을 clip-path 로 0 폭까지 잘라 두면 IntersectionObserver 가
   "보이는 면적 0" 으로 판단해 등장 신호가 오지 않았다 (05 신제품 · 태국 법인 사진이 사라짐).
   → 틀은 자르지 않고, 위에 흰 막을 덮어 두었다가 오른쪽으로 걷어 낸다. ── */
[data-reveal="mask"].motion-ready, [data-reveal="mask"].motion-ready.is-visible { clip-path: none; position: relative; }
[data-reveal="mask"].motion-ready::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--white);
  transform-origin: right;
  transition: transform 1.3s var(--ease-inout);
  pointer-events: none;
}
[data-reveal="mask"].motion-ready.is-visible::after { transform: scaleX(0); }

/* ── 회사소개 04 태국 법인: 네이비 배경을 없애고 흰 바탕 (앞 섹션과는 가는 선으로 구분) ── */
.thai-subsidiary { color: var(--ink); background: var(--white); border-top: 1px solid var(--line); }
.thai-subsidiary::after { color: rgba(23,24,69,.045); }
.thai-copy .eyebrow { color: var(--accent); }
.thai-copy .eyebrow span { color: var(--navy-950); }
.thai-copy h2 { color: var(--navy-950); }
.thai-copy > p:not(.eyebrow, .region-tag) { color: #4b5563; }
.thai-copy > p.thai-note { color: var(--navy-950); background: var(--ice-50); }
.thai-copy > p.region-tag-light { color: var(--navy-950); border-color: var(--line); }
.thai-copy dl { border-top-color: var(--line); }
.thai-copy dl div { border-bottom-color: var(--line); }
.thai-copy dt { color: var(--muted); }
.thai-copy dd { color: var(--ink); }

/* ── CEO 인사말: 문단 사이를 넉넉히, 줄 끝에 한두 글자만 남지 않게 ── */
.ceo-message-copy p { color: #374151; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.9; text-wrap: pretty; }
.ceo-message-copy p + p { margin-top: 1.1em; }

/* ── 모바일 가로 스크롤 줄(data-rail): 세로로 길게 쌓이던 카드 묶음을 옆으로 넘겨 보게 해 페이지 길이를 줄인다.
   다음 카드가 살짝 보여 넘길 수 있음을 알려 주고, 아래 얇은 막대가 위치를 보여 준다 (site.js 가 .rail-progress 를 붙인다).
   `main [data-rail]` 은 .quality-process ol 처럼 요소+클래스로 grid 를 지정한 규칙보다 뒤에서 이기기 위한 선택자. ── */
.rail-progress { display: none; }
@media (max-width: 700px) {
  main [data-rail] {
    --rail-item: 82%;
    display: flex;
    gap: 12px;
    /* 화면 양 끝까지 넓히고, 카드는 본문 여백(--rail-gutter)에 맞춰 멈춘다.
       scroll-padding 의 % 는 줄 자신의 폭 기준이라 calc(50vw - 50%) 가 0 이 되어 첫 카드가 화면 끝에 붙었다 → px 로 준다. */
    --rail-gutter: 20px; /* 581~700px: --page = 100% - 40px */
    width: auto; /* .product-grid 의 width: 100% 가 오른쪽 넓힘을 막지 않게 */
    max-width: none;
    margin-inline: calc(var(--rail-gutter) * -1);
    padding: 6px var(--rail-gutter) 16px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--rail-gutter);
    scrollbar-width: none;
  }
  main [data-rail]::-webkit-scrollbar { display: none; }
  main [data-rail] > * { flex: 0 0 var(--rail-item); min-width: 0; scroll-snap-align: start; }
  main .product-grid[data-rail] { --rail-item: 64%; }
  main .facility-grid[data-rail] { --rail-item: 78%; }
}
@media (max-width: 580px) {
  main [data-rail] { --rail-gutter: 16px; } /* --page = 100% - 32px */
  .rail-progress { display: block; height: 2px; position: relative; overflow: hidden; background: var(--line); }
  .rail-progress i { position: absolute; inset: 0 auto 0 0; width: calc(var(--rail-size, .3) * 100%); background: var(--accent); translate: calc(var(--rail-p, 0) * (1 / var(--rail-size, .3) - 1) * 100%) 0; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 7차 — 첫 화면 가운데 정렬 · 단추 · 강조 띠 4칸 · 인사 수치 3칸 · 수치 천천히 채우기
   ════════════════════════════════════════════════════════════════ */
/* ── 첫 화면: 공장 사진 장면의 "Made in Korea" 처럼 가운데 정렬 · 제목 한 줄. 가운데 글이 잘 읽히게 덮개도 가운데를 어둡게 ── */
.hero-shade {
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(15,16,48,.58), rgba(15,16,48,.18) 72%),
    linear-gradient(180deg, rgba(15,16,48,.55) 0%, rgba(15,16,48,.2) 35%, rgba(15,16,48,.9) 100%);
}
.hero-inner { align-items: center; text-align: center; }
/* ALLPUM CABLE TIE · UL CERTIFIED: 작은 글씨로 묻히지 않게 테두리 있는 표식으로 */
.hero .eyebrow {
  margin-bottom: clamp(22px, 2.4vw, 34px);
  padding: 9px 18px;
  display: inline-flex;
  border: 1px solid rgba(255,165,133,.55);
  background: rgba(232,80,43,.14);
  color: #ffc2ad;
  font-size: clamp(12px, .95vw, 15px);
  font-weight: 800;
  letter-spacing: .24em;
  backdrop-filter: blur(6px);
}
.hero-title-primary { font-size: clamp(44px, 6.2vw, 104px); font-weight: 900; line-height: 1.05; letter-spacing: -.05em; text-shadow: 0 6px 40px rgba(0,0,0,.35); }
html[lang="en"] .hero-title-primary { font-size: clamp(40px, 4.8vw, 76px); }
.hero-intro { margin-inline: auto; font-size: clamp(16px, 1.25vw, 20px); }
.hero-actions { justify-content: center; }
/* 단추 세 개 모두 같은 크기: 제품 보기(주황) · 문의하기 · 카탈로그(반투명 흰 단추 + 테두리) */
.hero .button { min-height: 58px; padding: 0 30px; gap: 12px; font-size: clamp(15px, 1.05vw, 17px); font-weight: 700; }
.hero .button-quiet { color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.72); backdrop-filter: blur(8px); }
.hero .button-quiet:hover, .hero .button-quiet:focus-visible { color: var(--navy-950); background: var(--white); border-color: var(--white); }

/* ── 첫 화면 아래 강조 띠 4칸: Made in Korea · UL 인증 · 35년 금형·사출 · 500+ ── */
.hero-strengths { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 01 인사 수치 3칸(설립 · 35년 · 500+): 등장한 뒤 자리마다 천천히 굴러 채워진다 (한 자리 약 2.4초) ── */
.welcome-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.welcome-stats .odometer-digit > span { transition: translate 2.4s cubic-bezier(.3,.9,.35,1) calc(var(--order, 0) * 180ms + .35s); }

@media (max-width: 920px) {
  /* 예전 4칸용 2열 규칙(3번째 칸 왼쪽 선 제거)을 3칸 한 줄에 맞게 되돌린다 */
  .welcome-stats div + div, .welcome-stats div:nth-child(3) { padding-left: 16px; border-left: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .hero-strengths { grid-template-columns: 1fr; }
  .hero-title-primary { font-size: clamp(40px, 11.5vw, 56px); }
  html[lang="en"] .hero-title-primary { font-size: clamp(34px, 9.6vw, 46px); }
}
@media (max-width: 580px) {
  /* 단추 3개를 한 줄에 억지로 넣으면 "문의하/기" 처럼 낱말이 쪼개졌다.
     제품 보기(주 단추)는 한 줄 가득, 문의하기 · 카탈로그는 아래 줄에 반씩 나눈다. */
  .hero-actions { width: 100%; margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero-actions .button-accent { grid-column: 1 / -1; }
  .hero .button { min-height: 52px; padding: 6px 12px; gap: 8px; font-size: 15px; line-height: 1.3; text-align: center; }
  .welcome-stats dt { font-size: 13px; line-height: 1.4; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-stats .odometer-digit > span { transition: none; }
}

/* ── 01 인사 수치 3칸: 설립 · 금형·사출 · 생산 거점(한국 · 태국). 인증 · 유통망은 첫 화면 강조 띠에 있어 뺐다 (2026-09-13) ── */
.welcome-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.welcome-stats dd { white-space: nowrap; }
/* 라벨이 두 줄이 되는 칸이 있어도 숫자는 같은 높이에 (칸을 세로로 쌓고 숫자를 칸 아래에 붙인다) */
.welcome-stats div { display: flex; flex-direction: column; }
.welcome-stats dd { margin-top: auto; padding-top: 6px; }
@media (max-width: 1180px) {
  .welcome-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: clamp(18px, 2.4vh, 28px); }
  .welcome-stats div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
}
@media (max-width: 580px) {
  .welcome-stats dd { font-size: 22px; letter-spacing: -.03em; }
  .welcome-stats div { padding-right: 8px; }
  .welcome-stats div + div { padding-left: 12px; }
  .welcome-stats div:nth-child(3n+1) { padding-left: 0; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-12 8차 — 데스크톱 전체 메뉴
   헤더 메뉴에 올리거나 누르면(site.js 가 .menu-all-open) 다섯 메뉴의 하위 항목이 각 메뉴 이름 아래 열로 한꺼번에 펼쳐진다.
   흰 바탕(.menu-all-bg)은 가장 긴 열 높이(--all-menu-h)만큼 헤더 아래로 내려온다. 1180px 이하는 기존 전체 화면 커튼.
   ════════════════════════════════════════════════════════════════ */
.menu-all-bg { display: none; }
@media (min-width: 1181px) {
  .menu-all-bg {
    position: absolute;
    z-index: -1;
    top: 100%;
    left: 50%;
    width: 100vw;
    height: calc(var(--all-menu-h, 0px) + 40px);
    display: block;
    background: var(--white);
    border-top: 3px solid var(--accent);
    box-shadow: 0 26px 50px rgba(15,16,48,.16);
    transform: translateX(-50%);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .45s var(--ease-inout), visibility 0s linear .45s;
  }
  .site-header.menu-all-open .menu-all-bg { clip-path: inset(0 0 -60px 0); visibility: visible; transition: clip-path .45s var(--ease-inout); }
  /* 열려 있는 동안은 첫 화면 · 배너 위 투명 헤더도 네이비로 (흰 판과 이어져 보이게) */
  .site-header.menu-all-open { border-bottom-color: transparent; }
  .site-header.menu-all-open::before { top: 0; bottom: 0; height: auto; background: var(--navy-950); box-shadow: none; }
  /* 하위 항목: 각 메뉴 이름 바로 아래 열. 긴 영문 항목은 옆 열을 덮지 않게 줄바꿈 */
  .site-header.menu-all-open .nav-group .submenu {
    display: block;
    top: 100%;
    left: 0;
    width: max-content;
    min-width: 0;
    max-width: 168px;
    padding: 26px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: none;
    animation: menu-all-in .45s var(--ease-out) .08s both;
  }
  .site-header.menu-all-open .nav-group .submenu a,
  .site-header.menu-all-open .nav-group .mega-products a.mega-title {
    margin: 0;
    padding: 8px 0;
    border: 0;
    color: #4b5070;
    background: transparent;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
    white-space: normal;
  }
  .site-header.menu-all-open .nav-group .submenu a:hover,
  .site-header.menu-all-open .nav-group .submenu a:focus-visible { color: var(--accent); background: transparent; }
  .site-header.menu-all-open .nav-group .submenu a[aria-current="page"] { color: var(--accent); font-weight: 800; }
  /* 제품은 제품 이름 전체 대신 분류 4개만 (다른 열과 길이를 맞춘다) */
  .site-header.menu-all-open .mega-products ul { display: none; }
}
/* 메뉴 이름 사이를 넓혀 각 열이 옆 열을 덮지 않을 자리를 만든다 (열 최대 폭은 site.js 가 다음 이름까지 거리로 정한다) */
@media (min-width: 1181px) {
  .main-menu { gap: clamp(40px, 4.2vw, 84px); }
}
@keyframes menu-all-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .menu-all-bg, .site-header.menu-all-open .menu-all-bg { transition: none; }
  .site-header.menu-all-open .nav-group .submenu { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-13 9차 — 레이아웃 정밀 점검 (모바일 구조 · 정렬 · 가독성)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* 큰 문장의 강제 줄바꿈은 데스크톱 줄 길이에 맞춘 것이라 폰에서는 "노하우로," 한 낱말만 한 줄에 남는다 */
  .welcome-statement br { display: none; }
  /* 맨 위로 단추(오른쪽 아래 고정)가 푸터 마지막 줄을 가리지 않게 */
  .site-footer { padding-bottom: 96px; }
}
@media (max-width: 580px) {
  /* 카탈로그 내려받기: 파일 이름과 판 · 쪽수를 두 줄로 ("한국어 카탈로/그" 처럼 쪼개지지 않게) */
  .download-link { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .download-link span { grid-column: 1; grid-row: 2; }
  .download-link b { grid-column: 2; grid-row: 1 / 3; }
  /* 2열 제품 카드(분류 페이지): 좁은 칸에 맞춰 안쪽 여백을 줄인다 */
  .product-card-copy { min-height: 0; padding: 14px 14px 16px; }
}
@media (max-width: 374px) {
  /* 320px: 인사 수치 3칸 중 "UL · ISO" 가 칸을 넘지 않게 */
  .welcome-stats dd { font-size: 19px; }
}
@media (max-width: 1180px) {
  /* 카탈로그 두 권: 좁은 2단에서는 제목 줄 수가 달라 두 카드의 내용 높이가 어긋났다 → 1180px 이하 한 단 */
  .catalog-downloads { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 701px) {
  /* 품질 03 생산 방식: 제목이 두 줄인 칸이 있어도 같은 줄 칸끼리 목록 시작 높이를 맞춘다 (번호 · 제목 · 목록을 부모 격자 줄에 맞춤) */
  .quality-process ol > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
}
@media (max-width: 580px) {
  /* 좁은 제품 카드에서는 "제품 보기" 글자를 빼고 ↗ 만 (카드 전체가 링크다) */
  .product-card .card-link-label { display: none; }
  .category-card-copy p { letter-spacing: .02em; }
}
@media (max-width: 374px) {
  /* 320px 헤더에 로고 · 언어 · 메뉴가 들어가도록 언어 링크 옆 여백은 이 폭에서만 뺀다 */
  .languages a { padding-inline: 0; }
  .languages a + a { padding-left: 8px; }
  .category-card-copy h3 { font-size: 16px; overflow-wrap: anywhere; }
}
/* 푸터 직통번호: 줄 높이는 그대로 두고 누르는 영역만 위아래로 넓힌다 */
.footer-contact span a { display: inline-block; padding-block: 10px; margin-block: -10px; }

/* ════════════════════════════════════════════════════════════════
   2026-09-13 2차 요청 — 회사 03 · 04 머리 · 홈 수치 · 하위 배너 · 문의 목록
   ════════════════════════════════════════════════════════════════ */
/* ── 회사 03 · 04 머리: 지역 표시 → 번호 줄 → 제목 간격을 두 섹션에서 같게.
   04 는 문단 규칙(.thai-copy > p)이 지역 표시의 여백을 18px 0 0 으로 덮어 번호 줄에 붙어 있었다.
   표시를 블록(flex)으로 두어 줄 상자 여백 차이도 없앤다. ── */
.region-tag { display: flex; width: fit-content; max-width: 100%; }
.thai-copy .eyebrow { margin: 0 0 14px; font-weight: 750; }
.thai-copy h2 { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.18; }
@media (max-width: 580px) {
  .thai-copy h2 { font-size: 30px; }
}
/* ── 홈 01 수치: 글자 값(한국 · 태국)은 좁은 폭에서 줄을 바꿀 수 있게, 폰에서는 그 칸을 넓게 ── */
.welcome-stats dd.stat-text { white-space: normal; text-wrap: balance; }
@media (max-width: 580px) {
  .welcome-stats { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.4fr); }
}
/* ── 하위 페이지 배너 제목 아래의 짧은 주황 선 ── */
.section-index-inner::after { content: ''; width: 44px; height: 3px; margin-top: 30px; background: var(--accent); animation: index-rise 1.1s var(--ease-out) .5s both; }
@media (max-width: 580px) {
  .section-index-inner::after { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-index-inner::after { animation: none; }
}

/* ── 2026-09-13 뉴스 본문: 옛 블로그 글을 옮기며 더한 블록 (docs/NEWS-FORMAT.md)
   소제목 h3 · 목록 · 사진 묶음 · 바깥 링크 · 관련 글. 정사각 · 세로 대표 사진은 잘리지 않게 칸 안에 맞춘다. ── */
.article-body > h3 { margin-top: 36px; color: var(--navy-950); font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; font-weight: 800; }
.article-body > h3 + * { margin-top: 12px; }
.article-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.article-list li { position: relative; padding-left: 20px; color: #373c5c; font-size: 17px; line-height: 1.8; }
.article-list li::before { content: ''; position: absolute; left: 3px; top: .78em; width: 6px; height: 6px; background: var(--accent); }
.article-list strong { color: var(--navy-950); font-weight: 750; }
.article-image { text-align: center; }
.article-image img { width: auto; max-width: 100%; height: auto; max-height: min(78vh, 760px); margin-inline: auto; }
.article-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; align-items: start; }
.article-gallery figure { margin: 0; text-align: center; }
.article-gallery img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.article-gallery figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }
.article-hero.is-contain img { object-fit: contain; }
.article-product.is-text { grid-template-columns: minmax(0, 1fr) auto; }
.article-link { margin-top: 30px; }
.article-product + .article-product { margin-top: 12px; }
@media (max-width: 580px) {
  .article-list li { font-size: 15.5px; line-height: 1.75; }
  .article-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-14 3차 요청 — 모바일 첫 화면 단추 · 글자, 로고, 푸터 제목
   ════════════════════════════════════════════════════════════════ */
/* ── 로고: 헤더 로고를 약 10% 키운다 (내렸을 때 조금 줄어드는 비율은 그대로).
   .brand 는 푸터 로고에도 붙어 있어 헤더로 범위를 좁힌다 (푸터 로고는 아래 푸터 규칙). ── */
.site-header .brand img { width: clamp(224px, 16.5vw, 288px); }
@media (min-width: 1181px) {
  .site-header.is-scrolled .brand img { width: clamp(214px, 15.6vw, 262px); }
}
/* 언어 링크(KO · EN)는 로고가 커져도 글자 단위로 꺾이지 않게 한 줄로 */
.languages { flex: none; white-space: nowrap; }
@media (max-width: 580px) {
  /* 폰: 176px 고정 → 폭에 맞춰 최대 206px (375px 에서 195px). 자리를 내려고 언어 앞 지구 아이콘은 뺀다 */
  .site-header .brand img { width: clamp(160px, 52vw, 206px); }
  .languages-icon { display: none; }
}

/* ── 첫 화면(폰 · 태블릿): 단추를 작고 가볍게, 제목 · 소개 · 강조 띠 글자를 한 단계 작게 ── */
@media (max-width: 920px) {
  .hero .button { min-height: 50px; padding: 0 22px; font-size: 15px; }
}
@media (max-width: 580px) {
  .hero .eyebrow { margin-bottom: 18px; padding: 7px 12px; font-size: 11px; letter-spacing: .16em; }
  .hero-title-primary { font-size: clamp(32px, 10vw, 42px); }
  html[lang="en"] .hero-title-primary { font-size: clamp(28px, 8.4vw, 36px); }
  .hero .hero-intro { margin-top: 12px; font-size: 14px; line-height: 1.7; }
  /* 예전: 제품 보기 한 줄 가득 + 두 단추 반씩(52px). 지금: 44px 단추를 가운데에 나란히 두고, 좁으면 다음 줄로.
     낱말은 쪼개지 않는다("문의하/기" 방지). */
  .hero-actions { margin-top: 22px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .hero-actions .button-accent { grid-column: auto; }
  .hero .button { min-height: 44px; padding: 0 14px; gap: 6px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
  .hero-strengths strong { font-size: 17px; }
  .hero-strengths span { font-size: 13px; }
}

/* ── 푸터: 칸 제목(사업장 정보 · 고객센터 · 안내)을 아래 정보(15~16px)보다 크게, 로고도 그에 맞춰 키운다.
   대표번호(26px)는 강조 숫자라 그대로 둔다. ── */
.footer-column h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.3; letter-spacing: .02em; text-transform: none; }
.site-footer .footer-brand { width: min(270px, 100%); }
.site-footer .footer-brand img { width: 100%; }
@media (min-width: 1181px) {
  /* 로고 칸이 좁아(224px) 로고가 커지지 않았다 → 첫 칸을 조금 넓힌다 */
  .site-footer { grid-template-columns: 1.3fr 1.3fr 1.1fr .9fr; }
}
@media (max-width: 700px) {
  .footer-column h2 { margin-bottom: 12px; font-size: 19px; }
  .site-footer .footer-brand { width: min(224px, 100%); }
}

/* ── 가독성 · 간격 정밀 점검 (48개 화면 · 폭 자동 측정: 글자 크기 · 대비 · 줄 간격 · 글 사이 간격) ──
   작은 주황 글씨(라벨 · 번호 · 분류)는 흰 바탕에서 대비가 3.74:1 로 낮았다 → 같은 계열의 진한 주황(--accent-600, 4.99:1).
   큰 글씨 · 단추 · 선 · 배경의 브랜드 주황(--accent)은 그대로 둔다. 회색 설명 글도 한 단계 진하게(4.5:1 미만이던 곳). ── */
:root { --muted: #5f6675; }
.eyebrow, .company-section-heading .eyebrow, .thai-copy .eyebrow,
.product-card-code, .news-card-meta span, .news-card-meta a, .article-cards span, .faq-list summary span,
.video-card-label, .category-card-copy p, .field em, legend em, .article-product small, .brand-proof .brand-call span { color: var(--accent-600); }
.quality-card-cycle { border-color: var(--accent-600); color: var(--accent-600); font-size: 12px; }
.product-card-code { font-size: 12.5px; }
.article-cards span, .faq-list summary span { font-size: 13px; }
.video-card-label { font-size: 12.5px; }
.field em, legend em { font-size: 12.5px; }
.article-product small, .article-nav small { font-size: 13px; }
.badge-list li { font-size: 13px; }
.news-card .card-link { font-size: 13.5px; }
.board-admin-link a, .page-tabs a small { color: var(--muted); }
.section-index-path { font-size: 13px; }
/* 여러 줄이 되는 연도 · 섹션 라벨 · 제품 이름은 줄 사이를 조금 띄운다 */
.timeline-year h3 { line-height: 1.15; }
.timeline-year li span { margin-top: 6px; }
.home-chapter span { line-height: 1.4; }
.product-card-copy h3 { line-height: 1.45; }
.product-detail-intro h1 { line-height: 1.2; }
/* 목록 항목끼리 붙어 있던 곳 (문의 안내 · 개인정보처리방침 · 이용약관) */
.notice-box li + li, .legal-page li + li { margin-top: 6px; }
/* 표 머리글 · 영문 두 줄 제목 · 지역 표시(KR · TH) · 생산지 배지 라벨 */
.spec-section thead th, .article-table th { font-size: 13.5px; }
.quality-process li strong { line-height: 1.4; }
.region-tag b { font-size: 12px; }
.region-tag-light b { background: var(--accent-600); }
.origin-badge span { font-size: 11.5px; }
@media (max-width: 580px) {
  .section-index-path { font-size: 12px; }
  .quality-card-cycle { font-size: 11.5px; }
  .category-card-copy p { font-size: 12px; }
  .product-card .card-number, .quality-card .card-number, .certificate-card .card-number { font-size: 10.5px; }
  .facility-photo figcaption span { font-size: 11.5px; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-14 홈 글밥 압축 · 글씨 크기 정돈 (태국 사이트 홈과 같은 기준)
   앞쪽 폰 · 태블릿 규칙을 덮지 않도록 넓은 화면 값은 폭 조건 안에 둔다.
   ════════════════════════════════════════════════════════════════ */
/* 첫 화면: 1440px 기준 제목 89 → 72px, 표식 14 → 11.5px, 소개 18 → 16px, 단추 58 → 50px, 강조 값 29 → 23px */
@media (min-width: 581px) {
  .hero .eyebrow { padding: 8px 16px; font-size: clamp(11px, .8vw, 12.5px); }
  .hero-intro { max-width: 640px; margin-top: 22px; font-size: clamp(16px, 1.1vw, 17px); }
}
@media (min-width: 701px) {
  .hero-title-primary { font-size: clamp(38px, 5vw, 80px); }
  html[lang="en"] .hero-title-primary { font-size: clamp(32px, 4vw, 62px); }
}
@media (min-width: 921px) {
  .hero-actions { margin-top: 30px; }
  .hero .button { min-height: 50px; padding: 0 24px; gap: 10px; font-size: clamp(14px, .95vw, 15px); }
}
@media (min-width: 1181px) {
  .hero-strengths strong { font-size: clamp(19px, 1.6vw, 26px); line-height: 1.2; }
}
.hero-strengths span { line-height: 1.5; text-wrap: balance; }
/* 강조 띠: 태블릿 · 폰은 한 줄씩 4줄 대신 2×2 칸(값 위 · 설명 아래) */
@media (max-width: 920px) {
  .hero-strengths { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; padding-bottom: 22px; }
  .hero-strengths li, .hero-strengths li + li { padding: 12px 0 0; border-left: 0; display: grid; gap: 2px; }
  /* 폰·태블릿: 강조 띠가 최대 2초 늦게 떠올라 빈 줄처럼 보였고, 스크롤에 맞춰 옅어져 살짝만 움직여도
     사라졌다 나타났다(2026-09-15 사용자 제보) → 단추와 함께 떠오르고, 스크롤로는 옅어지지 않고 그대로 올라간다 */
  .hero-strengths li:nth-child(n) { animation-duration: .6s; animation-delay: .45s; }
  .has-motion .hero-strengths { opacity: 1; translate: none; will-change: auto; }
}

/* 02 4가지 기준 카드: 설명 + 점 3개 → 핵심 한 줄 */
.proof-card-body > p { margin-bottom: 0; color: var(--navy-800); font-weight: 600; }

/* 폰: 제목만으로 뜻이 통하는 보조 문장은 숨긴다 (첫 화면 소개 · 01 인사 설명 · 섹션 머리 설명) */
@media (max-width: 580px) {
  .hero .hero-intro, .welcome-copy > p, .home-head-side > p, .home-head-lead { display: none; }
}


/* 2026-09-14 Codex: 문의 입력 · 키보드 · 좁은 화면 사용성 */
.field, .privacy-field { min-width: 0; }
/* 일반 입력칸의 min-height:50px 가 체크박스에 적용되지 않게 한다. */
.agree-row { min-height: 44px; align-items: center; font-size: 16px; }
.agree-row input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0; }
[data-form-errors], .field input, .field select, .field textarea { scroll-margin-top: 120px; }
.table-scroll:focus-visible, .privacy-box:focus-visible { outline: 2px solid var(--navy-800); outline-offset: 3px; }
.menu-curtain a:focus-visible { outline: 2px solid #ffa585; outline-offset: 4px; }
@media (max-width: 700px) {
  .curtain-group li a, .curtain-social a { min-height: 44px; display: flex; align-items: center; }
  .pagination a, .pagination strong { min-width: 44px; height: 44px; }
  .filter-bar input, .filter-bar select { font-size: 16px; }
  .board-actions .button { flex: 1 1 auto; }
  .board-table .title-text { min-width: 0; overflow-wrap: anywhere; }
}

/* 작은 화면은 날짜를 제목 아래로 옮겨, 상태와 긴 제목을 가로 스크롤 없이 읽는다. */
.board-mobile-date { display: none; }
@media (max-width: 580px) {
  .board-table .col-date { display: none; }
  .board-table .col-title a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
  .board-table .cat-chip { justify-self: start; white-space: normal; }
  .board-table .title-text, .board-mobile-date { grid-column: 1 / -1; }
  .board-table .title-text { font-size: 16px; line-height: 1.6; }
  .board-mobile-date { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
  .board-table .col-status { vertical-align: top; }
}

/* 2026-09-15: 첫 화면 제목과 버튼을 더 간결한 크기로 정돈 */
.hero-title-primary { font-size: clamp(30px, 3.75vw, 60px); line-height: 1.15; }
html[lang="en"] .hero-title-primary { font-size: clamp(28px, 3vw, 48px); }
.hero .hero-intro { margin-top: 18px; font-size: 16px; }
.hero-actions { margin-top: 24px; gap: 10px; }
.hero .button { min-height: 44px; padding: 0 20px; gap: 8px; font-size: 14px; }
@media (max-width: 700px) {
  .hero-title-primary { font-size: clamp(28px, 7.5vw, 38px); }
  html[lang="en"] .hero-title-primary { font-size: clamp(26px, 6.8vw, 34px); }
  .hero-actions { margin-top: 20px; gap: 8px; }
  .hero .button { padding: 0 14px; gap: 6px; }
}

/* 영문 표식은 제목에 가까운 보조 문구로, 내용은 위아래 여백을 맞춰 배치 */
.hero-inner { padding-top: 100px; padding-bottom: 100px; }
.hero .eyebrow {
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  backdrop-filter: none;
}
@media (max-width: 700px) {
  .hero-inner { padding-top: 90px; padding-bottom: 90px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: .1em; }
}


/* 2026-09-15: 태국 법인과 같은 헤더 동작 — 고정 높이, 내리면 즉시 숨김, 올리면 복귀. */
:root { --header-h: 96px; }
@media (max-width: 1180px) { :root { --header-h: 68px; } }
.site-header { transition: border-color .3s ease, color .3s ease, translate .4s ease; }
.site-header.is-hidden {
  translate: 0 calc(-100% - 40px);
  transition: border-color .3s ease, color .3s ease, translate 0s;
}
.site-header.is-hidden:has(:focus-visible) { translate: none; }
.menu-curtain, .menu-curtain.is-open { clip-path: none; transition: none; }
.curtain-group, .menu-curtain.is-open .curtain-group { opacity: 1; transform: none; translate: none; transition: none; }
@media (min-width: 1181px) {
  html { scroll-padding-top: 112px; }
  .site-header, .site-header.is-scrolled { min-height: 96px; }
  .site-header .nav-group, .site-header.is-scrolled .nav-group { padding: 32px 0; transition: none; }
  .site-header .brand img, .site-header.is-scrolled .brand img { width: clamp(224px, 16.5vw, 288px); transition: none; }
  .site-header .submenu, .site-header.is-scrolled .submenu { top: 84px; }
  .site-header.menu-all-open .nav-group .submenu { top: 100%; }
  .menu-all-bg, .site-header.menu-all-open .menu-all-bg { clip-path: none; transition: none; }
  .site-header .nav-group .submenu { animation: none; }
  .site-header.menu-switching, .site-header.menu-switching::before { transition: none; }
  .site-header.hover-paused:not(.menu-all-open) .nav-group:not(:focus-within) .submenu { display: none; }
  .site-header.hover-paused .nav-group:not(:focus-within):hover > a .nav-chevron { transform: translateY(-2px) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-header.is-hidden { transition: none; }
}

/* 2026-09-15: 01 인사는 슬로건·회사명·링크로 간결하게 구성하고, 폰 수치는 가운데 정렬한다. */
.welcome-copy { display: grid; justify-items: start; gap: clamp(18px, 2vw, 30px); }
.home-head-stacked { grid-template-columns: minmax(0, 1fr); }
.home-head-stacked > :is(.home-head-side, .home-head-lead) { margin-top: clamp(18px, 2vw, 26px); }
.home-head-stacked > :is(h2, .home-head-side, .home-head-lead) { width: 100%; justify-self: start; }
.video-section { padding-top: clamp(72px, 7vw, 112px); }
.video-head { margin-bottom: clamp(36px, 4vw, 56px); }
.video-head .home-chapter { margin-bottom: clamp(18px, 2vw, 28px); }
.video-head .home-head-side { gap: 14px; }
@media (max-width: 580px) {
  .welcome-statement { font-size: clamp(27px, 8.2vw, 32px); line-height: 1.28; text-wrap: balance; }
  .welcome-statement br { display: inline; }
  .welcome-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 10px;
  }
  .welcome-stats div, .welcome-stats div + div, .welcome-stats div:nth-child(3n+1) {
    align-items: center;
    padding-right: 8px;
    padding-left: 8px;
    text-align: center;
  }
  .welcome-stats div:first-child { padding-left: 0; }
  .welcome-stats div:last-child { padding-right: 0; }
  .welcome-stats dt { text-wrap: balance; }
  .welcome-stats dd.stat-text { text-wrap: balance; }
}

/* ════════════════════════════════════════════════════════════════
   2026-09-17 제품 찾기 동선 — 홈·제품 검색 · 규격표 첫 열 고정 · 제품 상세 하단 상담 바
   ════════════════════════════════════════════════════════════════ */

/* ── 홈: 웰컴 수치 아래의 품번·제품명 검색. 선과 여백만으로 시선을 잡는 절제된 형태. ── */
.welcome-product-search {
  width: min(100%, 960px);
  min-width: 0;
  margin-inline: auto;
  padding-top: clamp(24px, 2.8vw, 34px);
  grid-column: 1 / -1;
  justify-self: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  position: relative;
}
.welcome-product-search::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0 68px, var(--line) 68px 100%);
}
.welcome-product-search-head {
  grid-column: 1 / -1;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: var(--navy-950);
  cursor: text;
}
.welcome-product-search-head strong {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.welcome-product-search-head span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.welcome-product-search input {
  min-width: 0;
  min-height: 64px;
  padding: 16px 20px;
  border: 1px solid #bcc2d2;
  border-right: 0;
  border-radius: 0;
  color: var(--ink);
  background: var(--white);
  font: inherit;
  font-size: clamp(16px, 1.25vw, 19px);
}
.welcome-product-search input:focus {
  position: relative;
  z-index: 1;
  border-color: var(--navy-800);
  outline: 2px solid rgba(40,53,131,.14);
  outline-offset: 0;
}
.welcome-product-search button {
  min-width: 118px;
  min-height: 64px;
  padding: 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  color: var(--white);
  background: var(--navy-900);
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.welcome-product-search button:hover,
.welcome-product-search button:focus-visible { background: var(--navy-800); }
.welcome-product-search button:focus-visible { outline-color: var(--navy-800); outline-offset: 2px; }
.welcome-product-search svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 700px) {
  .welcome-product-search { width: 100%; padding-top: 20px; }
  .welcome-product-search::before { background: linear-gradient(90deg, var(--accent) 0 48px, var(--line) 48px 100%); }
  .welcome-product-search-head { margin-bottom: 12px; flex-wrap: wrap; gap: 5px 10px; }
  .welcome-product-search-head strong { font-size: 18px; }
  .welcome-product-search-head span { font-size: 13px; }
  .welcome-product-search input { min-height: 56px; padding-inline: 14px; font-size: 16px; }
  .welcome-product-search button { min-width: 92px; min-height: 56px; padding-inline: 16px; font-size: 15px; }
  .welcome-product-search svg { width: 20px; height: 20px; }
}

/* ── 제품 전체: 검색 (제품명 · 품번 + 케이블타이 길이 · 폭). 결과는 품번 줄(상세 표의 그 줄로 이동) · 제품 카드 ── */
.product-search { padding-top: clamp(34px, 4vw, 56px); }
.product-search-form {
  padding: clamp(20px, 2.2vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px clamp(14px, 1.6vw, 24px);
  border: 1px solid var(--line);
  background: var(--ice-50);
}
.product-search-form h2 { grid-column: 1 / -1; margin: 0; color: var(--navy-950); font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; letter-spacing: -.02em; }
.product-search-query, .product-search-sizes label { min-width: 0; display: grid; gap: 8px; }
.product-search-query label, .product-search-sizes label > span { color: var(--ink); font-size: 14px; font-weight: 700; }
.product-search-sizes { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-search-sizes legend { margin-bottom: 8px; padding: 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.product-search-form :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cfd3e4;
  border-radius: 0;
  color: var(--ink);
  background-color: var(--white);
  font: inherit;
  font-size: 16px;
}
.product-search-form :is(input, select):focus { border-color: var(--navy-800); outline: 2px solid rgba(40,53,131,.14); outline-offset: 0; }
.product-search-form .button { min-height: 50px; padding: 0 28px; gap: 8px; font-size: 16px; font-weight: 700; }
.product-search-form .button svg { width: 20px; height: 20px; flex: none; }
.product-search-form .button:focus-visible { outline-color: var(--navy-800); }
.search-results { margin-top: clamp(36px, 4vw, 56px); padding-bottom: clamp(70px, 7vw, 110px); }
.search-results-head { padding-bottom: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; border-bottom: 2px solid var(--navy-950); }
.search-results-head h2 { margin: 0; color: var(--navy-950); font-size: clamp(26px, 2.4vw, 34px); font-weight: 800; letter-spacing: -.03em; }
.search-results-head p { margin: 0; color: #373c5c; font-size: 16px; font-weight: 600; }
.search-results-head .text-link { margin-left: auto; }
.search-block { margin-top: clamp(28px, 3vw, 44px); }
.search-block h3 { margin: 0 0 14px; padding-left: 12px; border-left: 3px solid var(--accent); color: var(--navy-950); font-size: 19px; font-weight: 800; }
.search-block h3 small { margin-left: 6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.search-items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.search-items a {
  min-height: 60px;
  padding: 14px 10px;
  display: grid;
  grid-template-columns: minmax(120px, 220px) minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 4px 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: background .2s;
}
.search-items strong { grid-column: 1; color: var(--navy-950); font-size: 17px; font-weight: 800; }
.search-items span { grid-column: 2; color: #373c5c; font-size: 16px; font-weight: 600; }
.search-items small { grid-column: 3; color: var(--muted); font-size: 14px; white-space: nowrap; }
.search-items b { grid-column: 4; justify-self: end; color: var(--accent); font-size: 18px; transition: transform .3s ease; }
.search-items a:hover, .search-items a:focus-visible { background: var(--ice-50); }
.search-items a:hover b, .search-items a:focus-visible b { transform: translateX(4px); }
.search-items a:focus-visible { outline-color: var(--navy-800); outline-offset: -2px; }
.search-more { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.search-empty { margin-top: clamp(28px, 3vw, 44px); padding: clamp(36px, 4vw, 56px) 24px; display: grid; justify-items: center; gap: 20px; text-align: center; background: var(--ice-50); }
.search-empty p { max-width: 560px; margin: 0; color: #373c5c; font-size: 16px; line-height: 1.75; }
/* 태블릿: 검색어 한 줄, 길이 · 폭 · 검색 단추 한 줄. 폰(480px 이하)은 영문 라벨 "Length (mm)" 이 두 줄로 꺾이고
   값(5.25)이 잘려서 검색 단추를 글자 그대로 전체 폭 한 줄에 둔다. */
@media (max-width: 920px) {
  .product-search-form { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 10px; }
  .product-search-query { grid-column: 1 / -1; }
  .product-search-sizes { gap: 10px; }
  .product-search-form .button { padding: 0 18px; }
}
@media (max-width: 480px) {
  .product-search-form { padding: 18px; grid-template-columns: minmax(0, 1fr); }
  .product-search-form .button { width: 100%; }
}
@media (max-width: 374px) {
  .product-search-form select { padding-inline: 10px; }
}
@media (max-width: 700px) {
  .search-results-head .text-link { margin-left: 0; }
  .search-items a { padding: 14px 4px; grid-template-columns: minmax(0, 1fr) 24px; gap: 3px 12px; }
  .search-items :is(strong, span, small) { grid-column: 1; }
  .search-items span { font-size: 15px; }
  .search-items small { white-space: normal; }
  .search-items b { grid-column: 2; grid-row: 1 / span 3; }
}

/* ── 제품 규격표: 좌우로 밀어도 첫 열(품번 · 규격)은 제자리 ──
   collapse 표에서는 고정 칸의 아래선이 따라오지 않아 separate(간격 0)로 그린다. 고정 열 오른쪽은 늘 옅은 세로선,
   밀기 시작하면(site.js .is-scrolled) 그림자를 더한다. 폰에서는 좁은 표(소포장 3칸 등)를 640px 로 늘려 밀게 하지 않는다. */
.spec-section table { border-collapse: separate; border-spacing: 0; }
.spec-section tr > :first-child { position: sticky; left: 0; z-index: 1; }
.spec-section tbody th { box-shadow: inset -1px 0 0 var(--line); }
.spec-section thead th:first-child { box-shadow: inset -1px 0 0 rgba(255,255,255,.2); }
.spec-section .table-scroll.is-scrolled tr > :first-child::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 12px;
  background: linear-gradient(90deg, rgba(23,24,69,.16), rgba(23,24,69,0));
  pointer-events: none;
}
/* 검색 결과에서 품번을 눌러 오면 그 줄을 옅은 주황으로 표시하고, 위에 표 머리가 조금 보이게 멈춘다 */
.spec-section tbody tr[id] { scroll-margin-top: 18vh; }
.spec-section tbody tr:target > :is(th, td) { background: #fff1ea; }
.spec-section tbody tr:target > th { color: var(--accent-600); box-shadow: inset 3px 0 0 var(--accent), inset -1px 0 0 var(--line); }
@media (max-width: 700px) {
  .spec-section table { min-width: 0; }
}

/* ── 제품 상세 하단 상담 바 (폰 · 태블릿): 첫 화면 문의 단추가 지나간 뒤부터 견적 띠 전까지 (site.js 가 .is-shown) ──
   기본은 숨김: 보임을 기본으로 두면 site.js 가 늦게 실행될 때 첫 화면에 바가 보였다가 내려가며 깜빡였다.
   스크립트가 꺼진 브라우저(scripting: none)만 늘 보이고 푸터 끝이 가리지 않게 여백을 더한다. 쿠키 안내 · 전체 메뉴(z-index 9)가 떠 있으면 숨긴다. */
.product-dock { display: none; }
@media (max-width: 920px) {
  :root { --dock-h: 68px; }
  .product-dock {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid var(--line);
    background: var(--white);
    box-shadow: 0 -12px 30px rgba(23,24,69,.08);
    visibility: hidden;
    translate: 0 calc(100% + 16px);
    transition: translate .35s var(--ease-out), visibility 0s linear .35s;
  }
  .product-dock.is-shown { visibility: visible; translate: none; transition: translate .35s var(--ease-out); }
  .product-dock a { min-height: 52px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 16px; font-weight: 800; line-height: 1.2; }
  .product-dock a:focus-visible { outline-color: var(--navy-800); outline-offset: 2px; }
  .product-dock-call { color: var(--navy-950); border: 1px solid var(--navy-900); background: var(--white); }
  .product-dock-call svg { width: 22px; height: 22px; flex: none; color: var(--accent); }
  .product-dock-call span { display: grid; gap: 1px; text-align: left; }
  .product-dock-call small { color: #4b5070; font-size: 13px; font-weight: 700; letter-spacing: .01em; }
  .product-dock-quote { color: var(--white); background: var(--accent); }
  body:has(.cookie-banner:not([hidden])) .product-dock.is-shown, html.curtain-open .product-dock.is-shown { visibility: hidden; }
  body:has(.product-dock.is-shown) .to-top { bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom)); }
}
@media (max-width: 920px) and (scripting: none) {
  .product-dock { visibility: visible; translate: none; }
  body:has(.product-dock) .site-footer { padding-bottom: calc(var(--dock-h) + 40px); }
}
@media (max-width: 374px) {
  .product-dock a { padding-inline: 8px; gap: 8px; }
  .product-dock-quote span { display: none; }
}
/* 폰을 가로로 눕히면 화면 높이가 375px 안팎이라 머리(68px)와 바가 함께 1/3 을 가렸다 → 바를 낮춘다 (단추는 44px 유지) */
@media (max-width: 920px) and (max-height: 500px) {
  :root { --dock-h: 58px; }
  .product-dock { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .product-dock a { min-height: 44px; }
  .product-dock-call span { display: flex; align-items: baseline; gap: 8px; }
}
@media (max-width: 920px) and (prefers-reduced-motion: no-preference) {
  body:has(.product-dock) .to-top { transition: opacity .35s ease, translate .45s var(--ease-out), background .2s ease, bottom .35s var(--ease-out), visibility 0s linear .45s; }
  body:has(.product-dock) .to-top.is-shown { transition: opacity .35s ease, translate .45s var(--ease-out), background .2s ease, bottom .35s var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) {
  .product-dock, .product-dock.is-shown { transition: none; }
}

/* ── 홈페이지 DB 콘텐츠 관리자 ── */
.cms-admin .board { padding-block: clamp(36px, 6vw, 80px); }
.cms-tabs { margin-bottom: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.cms-tabs a { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; border: 1px solid var(--line); color: var(--navy-800); background: #fff; font-weight: 750; }
.cms-tabs a[aria-current="page"] { border-color: var(--navy-900); color: #fff; background: var(--navy-900); }
.cms-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.cms-layout .board-card { margin: 0; }
.cms-list { padding: 0; position: sticky; top: 118px; max-height: calc(100vh - 140px); overflow: auto; }
.cms-list-head { padding: 20px; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line); }
.cms-list-head h2 { margin: 0; font-size: 18px; }
.cms-list-head span { color: var(--muted); font-size: 13px; }
.cms-new { padding: 16px 20px; border-bottom: 1px solid var(--line); background: #f8f9fc; }
.cms-new label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 750; }
.cms-new div { display: flex; }
.cms-new input { min-width: 0; height: 42px; flex: 1; border: 1px solid var(--line); padding: 0 10px; }
.cms-new button { min-width: 54px; border: 0; color: #fff; background: var(--navy-900); font-weight: 750; cursor: pointer; }
.cms-list ul { margin: 0; padding: 0; list-style: none; }
.cms-list li + li { border-top: 1px solid var(--line); }
.cms-list li a { min-height: 64px; padding: 12px 20px; display: grid; align-content: center; gap: 3px; color: var(--navy-950); }
.cms-list li a:hover, .cms-list li a[aria-current="page"] { background: #f1f3fa; }
.cms-list li a[aria-current="page"] { box-shadow: inset 3px 0 var(--accent); }
.cms-list li span { font-weight: 750; }
.cms-list li small { overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.cms-editor { min-width: 0; }
.cms-empty { min-height: 300px; display: grid; place-content: center; text-align: center; color: var(--muted); }
.cms-empty h2 { margin-bottom: 8px; color: var(--navy-950); }
.cms-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cms-form-grid label { min-width: 0; display: grid; align-content: start; gap: 7px; color: var(--navy-950); font-size: 13px; font-weight: 750; }
.cms-form-grid .span-2 { grid-column: 1 / -1; }
.cms-form-grid :is(input, select, textarea) { width: 100%; border: 1px solid #cfd2e0; border-radius: 0; padding: 11px 12px; color: var(--navy-950); background: #fff; font: inherit; font-weight: 500; }
.cms-form-grid :is(input, select) { min-height: 46px; }
.cms-form-grid textarea { resize: vertical; line-height: 1.65; }
.cms-form-grid .cms-json { tab-size: 2; color: #18203b; background: #f8f9fc; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.cms-form-grid :is(input, select, textarea):focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.cms-save { margin-top: 20px; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); }
.cms-save small { color: var(--muted); }
@media (max-width: 920px) {
  .cms-layout { grid-template-columns: 1fr; }
  .cms-list { position: static; max-height: 360px; }
}
@media (max-width: 580px) {
  .cms-form-grid { grid-template-columns: 1fr; }
  .cms-form-grid .span-2 { grid-column: auto; }
  .cms-save { align-items: stretch; flex-direction: column; }
  .cms-save .button { width: 100%; }
}
/* 콘텐츠 관리: 수정 이력 · 항목 지우기 */
.cms-history { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.cms-history h3 { margin: 0 0 12px; font-size: 15px; }
.cms-history h3 small { margin-left: 8px; color: var(--muted); font-size: 12px; font-weight: 500; }
.cms-history ul { margin: 0; padding: 0; list-style: none; }
.cms-history li { padding: 10px 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cms-history li + li { border-top: 1px solid var(--line); }
.cms-history li span { color: var(--navy-950); font-size: 13px; }
.cms-history button { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); color: var(--navy-900); background: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.cms-history button:hover { border-color: var(--navy-900); background: #f1f3fa; }
.cms-delete { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cms-delete button { min-height: 44px; padding: 0 16px; border: 1px solid #c2453c; color: #c2453c; background: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.cms-delete button:hover { color: #fff; background: #c2453c; }

/* ── 사진 틀 윗쪽 색 비침 방지 (2026-09-21) ──
   뉴스 카드: 사진이 틀 높이를 따르지 않고 원본 비율로 커져(틀 199px · 사진 298px) 확대·이동 중 남색 바탕이 가장자리로 비쳤다.
   사진을 틀에 꽉 붙이고, 바탕은 사진이 있을 때 연한 색으로 둔다 (사진 없는 카드만 남색). */
.news-card-media { position: relative; background: var(--ice-50); }
.news-card-media.is-empty { background: var(--navy-950); }
.news-card-media img { position: absolute; inset: 0; display: block; }