/* =========================================================
   송앤코 — 제품 상세 페이지 전용 스타일 (css/sub.css)
   style.css 뒤에 로드됩니다.
   ========================================================= */

/* ---------- 상세 상단 타이틀 ---------- */
.sub-hero {
  background: var(--navy);
  color: #fff;
  padding: 52px 0 46px;
  position: relative;
  overflow: hidden;
}
.sub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/hero-circuit.jpg");
  background-size: cover;
  background-position: center 40%;
  opacity: .2;
}
.sub-hero .wrap { position: relative; }

.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .92rem;
  color: #a9bacd;
  margin-bottom: 16px;
}
.crumb a { color: #cfdbe8; }
.crumb a:hover { color: var(--gold-light); }
.crumb span[aria-current] { color: var(--gold-light); font-weight: 700; }
.crumb .sep { color: #5a708a; }

.sub-hero h1 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}
.sub-hero .sub-en {
  font-size: .95rem;
  letter-spacing: .16em;
  color: var(--gold-light);
  font-weight: 700;
  text-transform: uppercase;
}
.sub-hero p.lead {
  max-width: 52em;
  margin: 16px 0 0;
  color: #c9d6e4;
  font-size: 1.04rem;
  line-height: 1.8;
}

/* ---------- 2단 레이아웃 ---------- */
.sub-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 46px;
  align-items: start;
  padding: 56px 0 88px;
}

/* 사이드바 */
.sub-side {
  position: sticky;
  top: 104px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.sub-side-head {
  background: var(--navy);
  color: #fff;
  padding: 20px 22px;
}
.sub-side-head small {
  display: block;
  font-size: .76rem;
  letter-spacing: .2em;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 4px;
}
.sub-side-head strong {
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.sub-side ul { border-top: 1px solid var(--line); }
.sub-side li { border-bottom: 1px solid #eeeae2; }
.sub-side li:last-child { border-bottom: 0; }
.sub-side li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 22px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.45;
  transition: background .18s ease, color .18s ease;
}
.sub-side li a::after {
  content: "›";
  font-size: 1.15rem;
  color: #c0b9ab;
  flex: 0 0 auto;
}
.sub-side li a:hover { background: var(--cream); color: var(--gold); }
.sub-side li.is-active a {
  background: var(--gold);
  color: #fff;
  font-weight: 800;
}
.sub-side li.is-active a::after { color: rgba(255, 255, 255, .8); }

.side-call {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  background: #fff;
  padding: 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.side-call h2 {
  font-size: .95rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.side-call .side-tel {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-bottom: 4px;
}
.side-call .side-fax { font-size: .92rem; color: var(--muted); margin: 0 0 6px; }
.side-call .side-mail {
  font-size: .92rem;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-all;
}
.side-call .btn { width: 100%; margin-top: 14px; min-height: 50px; font-size: 1rem; }

/* 본문 */
.sub-content { min-width: 0; }

.intro-box {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  margin-bottom: 34px;
  overflow: hidden; /* 썸네일이 카드 밖으로 넘쳐 글씨를 덮는 것을 원천 차단 */
}
.intro-thumb {
  position: relative;
  z-index: 0;
  width: 132px;
  height: 132px;
  border: 1px solid var(--line);
  background: #fdfcfa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  overflow: hidden;            /* 이미지는 반드시 이 박스 안에만 표시 */
}
/* 퍼센트 높이(100%)는 부모 높이가 확정되지 않으면 해석되지 않아
   이미지가 원본 크기로 튀어나옵니다. max-* 제약으로 바꿔 항상 박스 안에 가둡니다. */
.intro-thumb img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.intro-types {
  position: relative;
  z-index: 1;       /* 글씨는 항상 이미지 위 레이어 */
  min-width: 0;
}
.intro-types h2 {
  position: relative;
  font-size: 1.02rem;
  color: var(--navy);
  margin-bottom: 10px;
  font-weight: 800;
}
.intro-types ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.intro-types li {
  padding: 6px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: .94rem;
  font-weight: 700;
  color: var(--navy-soft);
}

/* 본문 블록 */
.sub-block {
  background: #fff;
  border: 1px solid var(--line);
  padding: 34px 34px 38px;
  margin-bottom: 26px;
  box-shadow: var(--shadow-sm);
}
.sub-block > h2 {
  font-size: 1.22rem;
  color: var(--navy);
  font-weight: 800;
  padding-bottom: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.sub-block > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 52px;
  height: 2px;
  background: var(--gold);
}
.sub-block h3 {
  font-size: 1.06rem;
  color: var(--navy);
  font-weight: 800;
  margin: 0 0 14px;
}
.sub-block p { font-size: 1.02rem; line-height: 1.85; color: #46545f; }

/* 사양 표 */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.spec-table caption {
  text-align: left;
  font-size: .94rem;
  color: var(--muted);
  padding-bottom: 12px;
}
.spec-table thead th {
  background: var(--cream-2);
  color: var(--navy);
  font-weight: 800;
  font-size: .95rem;
  text-align: left;
  padding: 14px 16px;
  border-top: 2px solid var(--navy);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.spec-table tbody th,
.spec-table tbody td {
  padding: 15px 16px;
  border-bottom: 1px solid #eeeae2;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
}
.spec-table tbody th {
  font-weight: 700;
  color: var(--navy);
  background: #fcfaf6;
  white-space: nowrap;
}
.spec-table tbody td { color: #46545f; }
.spec-table tbody tr:hover td,
.spec-table tbody tr:hover th { background: #fdfbf6; }
.spec-table td.vol { font-weight: 700; color: var(--navy); white-space: nowrap; }

/* 표를 좁은 화면에서 가로 스크롤 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 560px; }

/* 항목 목록 */
.check-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 11px;
  font-size: 1.02rem;
  line-height: 1.75;
  color: #46545f;
}
.check-list li:last-child { margin-bottom: 0; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  background: var(--gold);
  border-radius: 50%;
}

/* 안내 문구 */
.note-box {
  padding: 20px 24px;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  font-size: .97rem;
  line-height: 1.8;
  color: var(--muted);
}
.note-box strong { color: var(--navy); }

/* 문의 CTA */
.sub-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 30px;
  align-items: center;
  padding: 30px 34px;
  background: var(--navy);
  color: #fff;
}
.sub-cta h2 {
  font-size: 1.18rem;
  font-weight: 800;
  margin-bottom: 6px;
}
.sub-cta p { margin: 0; color: #c3cfdd; font-size: .99rem; }
.sub-cta .cta-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.sub-cta .btn-gold { min-height: 54px; }

/* 이전 / 다음 품목 */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 26px;
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .18s ease, background .18s ease;
}
.pager a:hover { border-color: var(--gold); background: #fffdf9; }
.pager small { font-size: .86rem; color: var(--muted); font-weight: 700; }
.pager strong { font-size: 1.04rem; color: var(--navy); font-weight: 800; }
.pager .next { text-align: right; align-items: flex-end; }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .sub-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 30px; }
  .sub-side li a { padding: 13px 18px; font-size: .98rem; }
  .sub-block { padding: 28px 26px 30px; }
}

@media (max-width: 900px) {
  .sub-hero { padding: 38px 0 34px; }
  .sub-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding: 34px 0 64px;
  }
  .sub-side { position: static; }
  .sub-side ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .sub-side li { border-right: 1px solid #eeeae2; }
  .sub-side li:nth-child(even) { border-right: 0; }
  .sub-side li a { padding: 13px 16px; font-size: .95rem; }
  .side-call { margin-top: 16px; }
  .pager { grid-template-columns: 1fr; }
  .pager .next { text-align: left; align-items: flex-start; }
}

@media (max-width: 600px) {
  /* 좁은 화면에서는 표를 화면 폭에 맞춰 줄바꿈 (가로 스크롤 최소화) */
  .table-scroll table { min-width: 0; width: 100%; }
  .spec-table { font-size: .92rem; }
  .spec-table caption { font-size: .88rem; }
  .spec-table thead th { padding: 10px 8px; font-size: .88rem; white-space: normal; }
  .spec-table tbody th,
  .spec-table tbody td {
    padding: 11px 8px;
    word-break: keep-all;
  }
  .spec-table tbody th { white-space: normal; }
  .spec-table td.vol { white-space: normal; }
  .intro-box {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .intro-thumb { width: 100%; height: 160px; }
  .sub-block { padding: 24px 20px 26px; }
  .sub-block > h2 { font-size: 1.12rem; }
  .sub-cta { grid-template-columns: 1fr; padding: 26px 22px; }
  .sub-cta .cta-buttons { flex-direction: column; }
  .sub-cta .cta-buttons .btn { width: 100%; }
  .sub-side ul { grid-template-columns: 1fr; }
  .sub-side li { border-right: 0; }
}