/* ================================================================
   제품 상세 페이지 CSS — 자이젤코리아 리뉴얼
   적용: product/usg_flex700h_utm.php 등 제품 상세 페이지
   v20260528
================================================================ */

/* ── 색상/공통 변수 ── */
:root {
  --navy:      #0B1C2D;
  --accent:    #0095D6;
  --accent2:   #00b4f0;
  --red:       #ee2d50;
  /* 아래 4개는 테마 전환용 토큰 (AP는 body.ap-theme 에서 노랑 계열로 override) */
  --accent-text: #0095D6;   /* 흰 배경 위 텍스트용 (기본=accent) */
  --accent-on:   #ffffff;   /* accent 배경 위 글자색 */
  --accent-hover: #0095D6;  /* hover 로 꽉 채워지는 배경 */
  --head-color:  #ee2d50;   /* 섹션 제목 색 */
  --head-line:   #fde8eb;   /* 제목 아래 가로선 */
  --white:     #ffffff;
  --gray-bg:   #f4f6f8;
  --gray-line: #e2e6ea;
  --text:      #1a2b3c;
  --text-sub:  #5a7080;
  --radius:    12px;
  --shadow:    0 4px 20px rgba(11,28,45,0.10);
  --tr:        0.22s ease;
}

/* ── 리셋 ── */
*, *::before, *::after { box-sizing: border-box; }
img { display: block; max-width: 100%; }
ul  { padding-left: 1.4em; }
li  { margin-bottom: 2px; }

/* 브레드크럼 sticky 가 동작하려면 body 가 스크롤 영역이 아니어야 함
   → 2026-10-20 부터 사이트 공통(renewal2_mobile.css · head_sub_renewal2.php)에서 처리
     (html 이 세로 스크롤 담당, body 는 overflow visible) — 이 파일에 따로 둘 필요 없음 */

/* ── 브레드크럼 ──
   top = 고정 헤더의 '하단'. 헤더는 공지바(--notice-h) 아래에 떠 있으므로
   헤더 하단 = --notice-h + --header-h. */
.breadcrumb {
  background: var(--white);
  border-bottom: 1px solid var(--gray-line);
  /* 스크롤해도 고정 헤더 바로 아래에 고정 — 오버뷰 하단을 봐도 이동 편함 */
  position: sticky;
  top: calc(var(--notice-h, 40px) + var(--header-h, 90px)); /* 공지바 + 헤더 = 헤더 하단 */
  z-index: 900;
  padding: 12px 24px;
  font-size: 14px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  word-break: keep-all;
}
/* 공지바가 닫히면(body.notice-gone) 헤더가 맨 위로 올라가므로 top도 따라간다 */
body.notice-gone .breadcrumb { top: var(--header-h, 90px); }
.breadcrumb > a { color: var(--text-sub); text-decoration: none; }
.breadcrumb > a:hover { color: var(--accent-text); }
.breadcrumb .bc-sep { margin: 0 6px; }

/* ── 브레드크럼 드롭다운 ── */
.bc-drop {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* 드롭다운 트리거 — 칩(pill) 버튼 스타일로 클릭 가능함을 명확히 표시 */
.bc-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 10px;
  border: 1px solid var(--gray-line);
  border-radius: 20px;
  background: var(--gray-bg);
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  line-height: 1.4;
  white-space: nowrap;
}
.bc-label:hover,
.bc-drop:hover .bc-label {
  background: var(--accent-hover);
  color: var(--accent-on);
  border-color: var(--accent);
}
/* 현재 위치 (마지막 항목) — 강조 테두리 */
.bc-label.bc-current {
  color: var(--navy);
  font-weight: 700;
  background: #e8f4fb;
  border-color: var(--accent);
}
.bc-label.bc-current:hover,
.bc-drop:hover .bc-label.bc-current {
  background: var(--accent-hover);
  color: var(--accent-on);
  cursor: pointer;
}
/* 화살표 아이콘 (Font Awesome chevron) */
.bc-caret {
  font-style: normal;
  font-size: 12px;
  transition: transform 0.2s;
  line-height: 1;
  flex-shrink: 0;
}
.bc-drop:hover .bc-caret,
.bc-drop.open .bc-caret { transform: rotate(180deg); }

/* 드롭다운 메뉴 */
.bc-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 8px;
  background: transparent;
  z-index: 200;
  list-style: none;
  margin: 0;
  min-width: 190px;
}
.bc-menu::before {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.13);
  z-index: -1;
}
/* 제품 목록처럼 넓은 메뉴 */
.bc-menu--wide { min-width: 210px; }
/* 마지막 드롭다운은 오른쪽 정렬 방지용 여지 */
.bc-drop:last-child .bc-menu { left: 0; }

/* hover로 열기 (PC) */
.bc-drop:hover .bc-menu { display: block; }
/* JS 클래스로 열기 (모바일 터치) */
.bc-drop.open  .bc-menu { display: block; }

/* 메뉴 항목 */
.bc-menu li a {
  display: block;
  padding: 7px 16px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.bc-menu li a:hover    { background: var(--gray-bg); color: var(--accent-text); }
.bc-menu li a.bc-on    { color: var(--accent-text); font-weight: 700; }   /* 현재 선택 항목 */

/* 그룹 레이블 (시리즈 구분) — 클릭 불가 안내용 */
.bc-group {
  padding: 8px 16px 3px;
  font-size: 12px;
  font-weight: 600;
  color: #bcc5cc;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-top: 1px solid var(--gray-line);
  list-style: none;
  cursor: default;
  user-select: none;
}
.bc-group:first-child { border-top: none; }

@media (max-width: 767px) {
  .breadcrumb { padding: 10px 14px; }
  .bc-menu { font-size: 12px; }
  /* 화면 끝에서 잘리지 않도록 */
  .bc-drop:last-child .bc-menu { left: auto; right: 0; }
}

/* ── 래퍼 ── */
.prod-wrap {
  /* body가 display:flex(스티키 푸터)라 .prod-wrap이 flex item이 되고,
     margin:0 auto(가로 auto)가 stretch를 해제해 폭이 '내용 max-content'에
     맞춰진다. 그 결과 탭마다 내용 폭이 달라지면 hero·본문 폭까지 흔들린다.
     width:100%로 항상 max-width(1200px)까지 채워 탭과 무관하게 폭을 고정한다. */
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 32px;
  /* 한글 단어가 중간에서 끊기지 않도록 — 어절 단위 줄바꿈 */
  word-break: keep-all;
  overflow-wrap: break-word;
}
.prod-award-strip {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  border-top: 1px solid var(--gray-line);
}
.prod-award-strip img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 인증 로고 스트립 — USG FLEX / USG 시리즈 (ICSA·IPv6·AWS·Azure 등 여러 로고를 한 줄로) */
.prod-cert-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 30px;
}
.prod-cert-strip img {
  height: 56px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 767px) {
  .prod-cert-strip { gap: 18px; }
  .prod-cert-strip img { height: 40px; }
}

/* ══════════════════════════════
   히어로 영역 (갤러리 + 제품 정보)
══════════════════════════════ */
.prod-hero {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 600px 1fr;
  border: 1px solid var(--gray-line);
  overflow: hidden;
}

/* ── 모델명 헤드라인 (시리즈/모델명/부제) ──
   히어로 직속 자식 4개 = .prod-headline / .prod-gallery / .prod-info / .prod-casesites.
   모바일: 한 열로 DOM 순서대로 쌓임 → 제품명 → 이미지 → 요약(정보) → 장비도입사이트.
   데스크톱: 아래 min-width:961 에서 3행 그리드로 배치(이미지 좌측, 모델명·정보 우측, 도입사이트 좌측 하단).
   데스크톱 그리드는 .prod-headline 이 있는 페이지에만 :has() 로 적용해 기존 페이지엔 영향 없음. */
.prod-headline { padding: 36px 36px 0; }

/* ── PC: 히어로 높이 고정 + 3분할 그리드 ── */
@media (min-width: 961px) {
  .prod-hero { height: 600px; }
  .prod-info { overflow: hidden; }
  .prod-features { max-height: none; flex: 1 1 auto; min-height: 0; }
  .prod-btns { flex-shrink: 0; }
  .prod-gallery { overflow: hidden; }
  .prod-main-img { min-height: 0; }

  /* 모델명 헤드라인이 있는 페이지: 갤러리(좌, 2행) | 모델명(우상) + 정보(우) , 도입사이트(좌하) */
  .prod-hero:has(.prod-headline) {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "gallery   headline"
      "gallery   info"
      "casesites info";
  }
  .prod-hero:has(.prod-headline) .prod-gallery   { grid-area: gallery; }
  .prod-hero:has(.prod-headline) .prod-headline  { grid-area: headline; }
  .prod-hero:has(.prod-headline) .prod-info      { grid-area: info; padding-top: 0; }
  .prod-hero:has(.prod-headline) .prod-casesites { grid-area: casesites; border-right: 1px solid var(--gray-line); }

  /* PC: 탭 버튼 폭 130px 통일(가운데 정렬).
     ⚠ width 고정이 아니라 min-width — "Application Diagram" 처럼
        긴 라벨은 폭을 늘려 옆 탭과 겹치지 않게 한다. */
  .prod-tab-btn {
    min-width: 130px;
    width: auto;
    padding-left: 14px;
    padding-right: 14px;
    text-align: center;
  }

  /* PC: 도입사이트 라벨과 첫 로고 사이 여백 확보 */
  .case-strip-label { margin-right: 14px; }
}

/* ── 주요 기능 하위 항목 (회색 1열, 소제목) ── */
.prod-features ul li > .ft-main { flex: 1; min-width: 0; }
.prod-features ul li .ft-note { display: block; font-size: 12.5px; color: var(--text); margin-top: 1px; }
.prod-features ul li ul.ft-sub { list-style: none; padding: 4px 0 0; margin: 0; }
.prod-features ul li ul.ft-sub li {
  display: block;
  border: none;
  padding: 1px 0 1px 9px;
  margin: 0;
  font-size: 12px;
  color: var(--text-sub);
  line-height: 1.55;
  position: relative;
}
.prod-features ul li ul.ft-sub li::before {
  content: '-';
  position: absolute;
  left: 0;
  margin: 0;
  color: var(--text-sub);
  font-weight: 400;
}

/* 좌: 이미지 갤러리 */
.prod-gallery {
  background: var(--white);
  border-right: 1px solid var(--gray-line);
  display: flex;
  flex-direction: column;
}
.prod-main-img {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 300px;
  background: var(--white);
  cursor: pointer;
}
.prod-main-img img {
  width: calc(100% - 64px);
  height: 100%;
  object-fit: contain;
  transition: transform var(--tr);
  position: relative;
  z-index: 1;
}
.prod-main-img:hover img { transform: scale(1.03); }

/* 저해상도 Overview 이미지(USG FLEX / USG 시리즈)가 넓은 본문에서 확대돼 흐려지는 것 방지 —
   .prod-compact-img 가 붙은 페이지만 Overview 본문 이미지를 70% 폭으로 축소(원본 해상도에 가깝게) + 가운데 정렬 */
.prod-compact-img .ov-section img { width: 70%; margin: 24px auto; }
/* Azure 인증 이미지(vpn_overview7-1.jpg)는 유독 커서 그 이미지만 추가 축소 */
.prod-compact-img .ov-section img[src*="vpn_overview7-1"] { width: 49%; }
/* 확인된 USG 디바이스 표 이미지(vpn_overview7-2.jpg, USG 시리즈)만 80% 크기로 */
.prod-compact-img .ov-section img[src*="vpn_overview7-2"] { width: 56%; }

/* 갤러리 화살표 */
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #ccc;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  padding: 12px 10px;
  transition: color var(--tr);
  line-height: 1;
}
.gallery-arrow:hover { color: var(--navy); }
.gallery-prev { left: 6px; }
.gallery-next { right: 6px; }

.prod-thumbnails { display: none; }

/* dot 인디케이터 */
.prod-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  background: var(--white);
}
.prod-dots .prod-thumb {
  width: auto; height: auto;
  border: none; border-radius: 0; background: transparent;
  padding: 4px; cursor: pointer;
  box-shadow: none;
}
.prod-dot {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-line);
  transition: background var(--tr), transform var(--tr);
}
.prod-dots .prod-thumb.active .prod-dot {
  background: var(--accent);
  transform: scale(1.3);
}
.prod-dots .prod-thumb:hover .prod-dot { background: var(--accent2); }

/* 우: 제품 정보 */
.prod-info {
  padding: 36px 36px 20px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prod-series-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent-text);
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* 모델명 — .prod-headline(신규 구조)/.prod-info(기존 구조) 양쪽 모두 적용 */
.prod-info h1, .prod-headline h1 {
  font-size: 28px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 6px;
}
.prod-subtitle { font-size: 13px; color: var(--text-sub); margin-bottom: 22px; }

/* 주요 기능 리스트 */
.prod-features {
  flex: 1;
  margin-bottom: 28px;
  max-height: 340px;        /* 내용이 길면 오른쪽 스크롤바 */
  overflow-y: auto;
  padding-right: 8px;
}
/* 스크롤바 디자인 (얇고 은은하게) */
.prod-features::-webkit-scrollbar { width: 6px; }
.prod-features::-webkit-scrollbar-thumb { background: var(--gray-line); border-radius: 3px; }
.prod-features::-webkit-scrollbar-thumb:hover { background: var(--text-sub); }
.prod-features { scrollbar-width: thin; }
.prod-features-title { display: none; }
.prod-features ul { list-style: none; padding: 0; }
.prod-features ul li {
  font-size: 13px;
  color: var(--text);
  padding: 6px 0;
  border-bottom: 1px solid #f0f2f4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}
.prod-features ul li:last-child { border-bottom: none; }
.prod-features ul li::before {
  content: '✓';
  color: var(--accent-text);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 버튼 */
.prod-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-primary {
  flex: 1;
  min-width: 140px;
  background: var(--navy);
  color: var(--white) !important;
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background var(--tr), transform var(--tr);
  display: block;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-on); transform: translateY(-1px); }
.btn-secondary {
  flex: 1;
  min-width: 140px;
  background: transparent;
  color: var(--navy) !important;
  border: 2px solid var(--gray-line);
  padding: 13px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--tr), color var(--tr), transform var(--tr);
  display: block;
}
.btn-secondary:hover { border-color: var(--accent); color: var(--accent-text) !important; transform: translateY(-1px); }

/* ══════════════════════════════
   탭 영역
══════════════════════════════ */
.prod-tabs-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: 20px 0 0;
  border: 1px solid var(--gray-line);
  overflow: hidden;
}

/* 탭 헤더 — 오른쪽 페이드로 스와이프 암시 */
.prod-tab-nav-wrap {
  position: relative;
  background: #fafbfc;
  border-bottom: 1px solid var(--gray-line);
}
.prod-tab-nav-wrap::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, rgba(250,251,252,0.95));
  pointer-events: none;
  z-index: 1;
  display: none;  /* 데스크톱·모바일 모두 미사용 — 모바일은 아래 .tab-scroll-hint 버튼이 페이드+화살표 역할 */
}

/* 탭 스크롤 힌트 — 우측 화살표(모바일 전용).
   페이드 그라데이션을 함께 담아 "더 있음 / 스와이프 가능"을 명확히 표시하고,
   탭하면 다음 탭들로 스크롤된다. 끝까지 스크롤되면 JS가 .is-hidden 으로 숨긴다. */
.tab-scroll-hint { display: none; }
@keyframes tabHintPulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .tab-scroll-hint { animation: none !important; }
}
.prod-tab-nav {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.prod-tab-nav::-webkit-scrollbar { display: none; }

.prod-tab-btn {
  flex-shrink: 0;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--tr), border-color var(--tr), background var(--tr);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  text-decoration: none;
  display: block;
}
.prod-tab-btn:hover  { color: var(--navy); background: rgba(0,149,214,0.04); }
.prod-tab-btn.active { color: var(--navy); border-bottom-color: var(--accent); background: var(--white); }

/* 탭 컨텐츠 */
.prod-tab-content { padding: 36px; display: none; }
.prod-tab-content.active { display: block; }

/* ══════════════════════════════
   Overview 스타일
══════════════════════════════ */
.ov-section { margin-bottom: 64px; }
.ov-section:last-child { margin-bottom: 0; }
.ov-section h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--head-color);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--head-line);
}
.ov-section p { font-size: 14px; line-height: 1.85; color: var(--text); margin-bottom: 10px; }

/* 문단: 양끝맞춤 — 오른쪽 끝을 일렬로 정렬 (UTM·AP 리뉴얼 공통)
   Overview 탭 전체를 대상으로 해 .ov-section 밖의 .ov-two-col / .ov-row 등
   모든 구조의 문단에 동일 적용됨
   · word-break: keep-all → 한글을 어절 단위로만 끊어 단어 중간 분리 방지
   · overflow-wrap        → 아주 긴 영문/URL 만 예외적으로 분리
   · 마지막 줄은 좌측정렬(브라우저 기본)이라 억지로 늘어나지 않음 */
#tab-overview p {
  text-align: justify;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.ov-section p:last-child { margin-bottom: 0; }
.ov-section img { width: 100%; margin-top: 16px; border-radius: 8px; }

/* 2열 레이아웃 */
.ov-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ── Overview: 이미지 ↔ 텍스트 좌우 1행 (모바일에서 세로 스택) ── */
.ov-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 40px;
}
.ov-row .ov-row-img img { width: 100%; height: auto; border-radius: 8px; display: block; }
.ov-row .ov-row-text h3 { font-size: 16px; font-weight: 800; color: var(--head-color); margin-bottom: 12px; }
.ov-row .ov-row-text p  { font-size: 14px; line-height: 1.85; color: var(--text); }
.ov-row--rev .ov-row-img { order: 2; }   /* 이미지 오른쪽 */
@media (max-width: 767px) {
  .ov-row { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .ov-row--rev .ov-row-img { order: 0; }  /* 모바일: 이미지 위 */
}
.ov-two-col .ov-col h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--head-color);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--head-line);
}
.ov-two-col .ov-col p { font-size: 14px; line-height: 1.8; margin-bottom: 10px; }
.ov-two-col .ov-col img { width: 100%; margin-top: 12px; border-radius: 8px; }

/* 텍스트+이미지 가로 배치 */
.ov-side {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
  align-items: start;
}
.ov-side-img { border-radius: 8px; overflow: hidden; }
.ov-side-img img { width: 100%; }

/* ══════════════════════════════
   구축 사례 로고 스트립 (버튼 아래)
══════════════════════════════ */
.case-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--gray-line);
  padding-top: 14px;
  margin-top: 16px;
}
.case-strip-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-sub);
  white-space: nowrap;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.case-nav-btn {
  flex-shrink: 0;
  width: 20px;
  height: 48px;
  border: none;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-line);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  transition: color var(--tr);
}
.case-nav-btn:hover { color: var(--navy); }
.case-strip-track-wrap {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 2px 0;
  margin: -2px 0;
}
.case-strip-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 2px;
}
.case-strip-track::-webkit-scrollbar { display: none; }
.case-logo-item {
  flex-shrink: 0;
  width: 80px;
  height: 48px;
  background: var(--white);
  border: 1px solid var(--gray-line);
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.case-logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

@media (max-width: 767px) {
  .case-strip { margin-top: 14px; padding-top: 12px; }
  .case-logo-item { width: 60px; height: 36px; }
}

/* ══════════════════════════════
   Overview 기능 카드 그리드
══════════════════════════════ */
.ov-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 48px;
}
.ov-feat-card {
  background: var(--gray-bg);
  border: 1px solid var(--gray-line);
  border-radius: 12px;
  padding: 24px 20px 20px;
  transition: box-shadow var(--tr), transform var(--tr);
}
.ov-feat-card:hover {
  box-shadow: 0 6px 24px rgba(11,28,45,0.10);
  transform: translateY(-2px);
}
.ov-feat-icon {
  width: 44px;
  height: 44px;
  background: var(--navy);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: #fff;
  font-size: 18px;
}
.ov-feat-card h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.3;
}
.ov-feat-card p {
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.7;
  margin: 0;
}

/* Overview 상세 이미지 섹션 */
.ov-detail { margin-bottom: 48px; }
.ov-detail:last-child { margin-bottom: 0; }
.ov-detail h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--head-color);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--head-line);
}
.ov-detail p { font-size: 14px; line-height: 1.85; color: var(--text); margin-bottom: 12px; }
.ov-detail img { width: 100%; border-radius: 8px; margin-top: 16px; }
.ov-detail-row {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: center;
}
.ov-detail-row img { margin-top: 0; }

@media (max-width: 960px) {
  .ov-feat-grid { grid-template-columns: repeat(2, 1fr); }
  .ov-detail-row { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .ov-feat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ov-feat-card { padding: 16px 14px; }
  .ov-feat-icon { width: 36px; height: 36px; font-size: 15px; margin-bottom: 10px; }
  .ov-feat-card h4 { font-size: 12.5px; }
  .ov-feat-card p { font-size: 11.5px; }
}

/* ══════════════════════════════
   Highlights 스타일
══════════════════════════════ */
.hl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
.hl-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-line);
  border-right: 1px solid var(--gray-line);
}
.hl-item:nth-child(2n) { border-right: none; }
.hl-item:nth-last-child(-n+2) { border-bottom: none; }
.hl-item:last-child:nth-child(odd) { border-bottom: none; border-right: none; grid-column: span 2; }

.hl-icon { width: 52px; height: 52px; flex-shrink: 0; object-fit: contain; }
.hl-text h4 { font-size: 14px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.hl-text p  { font-size: 12.5px; color: var(--text-sub); line-height: 1.6; }

/* ══════════════════════════════
   Highlights — USG FLEX H 시리즈 전용 (보안 서비스 8종 카드)
   아이콘(상단 중앙) + 연녹색 타이틀 바 + 설명. 비H 페이지(.hl-*)와 분리.
══════════════════════════════ */
.hls-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 22px;
  padding: 8px 4px;
}
.hls-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hls-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
}
.hls-title {
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 8px;
  background: #f1f3f5;          /* 연한 회색 타이틀 바 */
  color: var(--navy);
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  border-radius: 4px;
  word-break: keep-all;
}
.hls-desc {
  margin: 0;
  padding: 0 4px;
  font-size: 12.5px;
  color: var(--text-sub);
  line-height: 1.65;
  text-align: center;
  word-break: keep-all;
}
/* 반응형: 데스크톱 4열 → 태블릿 2열 → 모바일 1열 */
@media (max-width: 1024px) { .hls-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } }
@media (max-width: 480px)  { .hls-grid { grid-template-columns: 1fr; } .hls-icon { width: 56px; height: 56px; } }

/* ══════════════════════════════
   Specifications 스타일
══════════════════════════════ */
.spec-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--gray-line);
}
.spec-scroll-hint {
  display: none;   /* 더 이상 사용 안 함 */
}
#zyxel-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 600px;
}
#zyxel-spec th {
  background: var(--navy);
  color: var(--white);
  padding: 10px 14px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
}
#zyxel-spec td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--gray-line);
  vertical-align: middle;
  word-break: keep-all;
}
#zyxel-spec tr:nth-child(even) td { background: #f9fafb; }
#zyxel-spec tr:hover td { background: #f0f6fb; }
.spec-footnote {
  font-size: 11.5px;
  color: var(--text-sub);
  line-height: 1.8;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--gray-bg);
  border-radius: 8px;
}

/* ══════════════════════════════
   Features 스타일
══════════════════════════════ */
.feat-category {
  font-size: 17px;
  font-weight: 800;
  color: var(--head-color);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--head-line);
}
.feat-category:first-child { margin-top: 0; }
.feat-sub {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
  margin: 16px 0 6px;
}
.feat-list { list-style: disc; padding-left: 1.5em; margin-bottom: 0; }
.feat-list li { font-size: 13px; color: var(--text); margin-bottom: 3px; line-height: 1.6; }
.feat-note {
  font-size: 11.5px;
  color: var(--text-sub);
  margin-top: 20px;
  line-height: 1.9;
  font-style: italic;
}

/* ══════════════════════════════
   반응형
══════════════════════════════ */

/* ── 태블릿 (≤960px) ── */
@media (max-width: 960px) {
  /* 한 열로 쌓기 — minmax(0,1fr)로 그리드 트랙이 내용 min-content 때문에
     뷰포트보다 넓어지는(가로 넘침) 현상 방지. 영역 지정도 해제해 DOM 순서대로 쌓이게 한다. */
  .prod-hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  .prod-gallery, .prod-info, .prod-main-img, .prod-dots { min-width: 0; }
  .prod-gallery { border-right: none; border-bottom: 1px solid var(--gray-line); }
  .prod-main-img { min-height: 280px; }
  /* 장비도입사이트: case-strip 자체의 border-top 이 구분선 역할을 하므로,
     데스크톱용 상단 여백(margin-top)만 제거해 정보 영역과 한 줄로 깔끔히 구분되게 한다. */
  .prod-casesites .case-strip { margin-top: 0; }
  .ov-two-col { grid-template-columns: 1fr; gap: 24px; }
  .ov-side { grid-template-columns: 1fr; }
  .ov-side-img { order: -1; }
}

/* ── 모바일 (≤767px) ── */
@media (max-width: 767px) {
  /* 래퍼 */
  .prod-wrap { padding: 0 14px 40px; }

  /* 브레드크럼 */
  .breadcrumb { padding: 10px 14px; font-size: 13px; }

  /* 갤러리 */
  .prod-main-img { min-height: 220px; }
  .prod-thumbnails { gap: 6px; padding: 10px 12px; }
  .prod-thumb { width: 54px; height: 44px; }

  /* 모델명 헤드라인 — 모바일 최상단 */
  .prod-headline { padding: 18px 16px 0; }

  /* 제품 정보 */
  .prod-info { padding: 20px 16px 18px; }
  .prod-series-label { font-size: 12px; margin-bottom: 6px; }
  .prod-info h1, .prod-headline h1 { font-size: 24px; margin-bottom: 5px; }
  .prod-subtitle { font-size: 13.5px; margin-bottom: 16px; }

  /* 주요 기능 리스트 */
  .prod-features { margin-bottom: 20px; }
  .prod-features ul li { font-size: 12px; padding: 5px 0; }

  /* 버튼 — 모바일에서 세로 스택 */
  .prod-btns { flex-direction: column; gap: 8px; }
  .btn-primary,
  .btn-secondary { flex: none; width: 100%; min-width: unset; padding: 12px 16px; font-size: 13px; }

  /* 탭 영역 */
  .prod-tabs-wrap { margin: 14px 0 0; }
  .prod-tab-btn { padding: 12px 16px; font-size: 12px; }
  .prod-tab-content { padding: 18px 14px; }

  /* 탭 스크롤 힌트 — 우측 화살표 버튼(페이드 포함) */
  .tab-scroll-hint {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 46px;
    padding: 0 8px 0 0;
    border: none;
    cursor: pointer;
    z-index: 3;
    color: var(--navy);
    font-size: 13px;
    background: linear-gradient(to right, rgba(250,251,252,0), #fafbfc 55%);
    animation: tabHintPulse 1.6s ease-in-out 3;
  }
  .tab-scroll-hint.is-hidden { display: none; }

  /* Overview */
  .ov-section h3 { font-size: 14px; }
  .ov-section p { font-size: 14px; line-height: 1.75; }

  /* Spec 표 — 모바일 가로스크롤 없이 한 화면에 표시 */
  .spec-scroll-wrap { overflow-x: visible; border: none; }
  #zyxel-spec {
    min-width: unset;
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
    table-layout: fixed;
  }
  #zyxel-spec .col-cat  { width: 16%; }
  #zyxel-spec .col-spec { width: 36%; }
  #zyxel-spec .col-val  { width: 24%; }
  #zyxel-spec th, #zyxel-spec td { padding: 5px 4px; }
  .spec-photo-row { display: none; }
  .spec-footnote { font-size: 10.5px; padding: 10px 12px; }

  /* Highlights — 1열 */
  .hl-grid { grid-template-columns: 1fr; }
  .hl-item { border-right: none; padding: 16px; }
  .hl-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--gray-line); }
  .hl-item:last-child { border-bottom: none; }
  .hl-item:last-child:nth-child(odd) { grid-column: span 1; }
  .hl-icon { width: 40px; height: 40px; }
  .hl-text h4 { font-size: 13px; }
  .hl-text p  { font-size: 12px; }

  /* Features */
  .feat-category { font-size: 15px; margin: 24px 0 12px; }
  .feat-sub { font-size: 12.5px; }
  .feat-list li { font-size: 12px; }
}

/* ── 탭 페이드 인디케이터: 데스크탑 숨김 ── */
@media (min-width: 768px) {
  .prod-tab-nav-wrap::after { display: none; }
}

/* ══════════════════════════════
   모바일 overflow 완전 차단 (자동 줌-아웃 방지)
   body/html overflow는 renewal2_mobile.css + head_sub_renewal2.php 에서 처리
   여기서는 prod-wrap 내부 요소들이 뷰포트를 초과하지 않도록 방어
══════════════════════════════ */
@media (max-width: 767px) {
  .breadcrumb,
  .prod-wrap {
    max-width: 100vw;
    box-sizing: border-box;
  }
  .prod-wrap,
  .prod-hero,
  .prod-tabs-wrap {
    overflow-x: hidden;
  }
}

/* ══════════════════════════════
   AP(무선) 테마 — 기존 AP 페이지의 노란색 계열로 전환
   UTM 은 아래 .utm-theme(빨강) 사용. body.ap-theme 이 붙은 페이지에만 적용.
   · --accent      막대·밑줄·테두리·점 등 '장식'  → 브랜드 노랑 그대로
   · --accent-text 흰 배경 위 '글자'            → 읽히도록 진한 황금색
   · --accent-on   노란 배경 위 '글자'          → 남색(흰색은 안 보임)
══════════════════════════════ */
/* ⚠ body 가 아니라 '제품 영역 컨테이너'에만 변수를 건다.
   body 에 걸면 전역 헤더·공지바·푸터(renewal2.css 도 var(--accent) 사용)까지
   노랑으로 번진다. 공지바 NEW 배지 등은 사이트 공통이므로 건드리지 않는다. */
.ap-theme .breadcrumb,
.ap-theme .prod-wrap,
.ap-theme .prod-award-strip {
  --accent:      #ffc800;
  --accent2:     #ff8900;
  --accent-text: #A97400;
  --accent-on:   #0B1C2D;
  --accent-hover: #fff3d6;  /* hover 채움 — 원색 노랑은 촌스러워 연한 톤 */
  --head-color:  #A97400;   /* 섹션 제목 — 기존 AP 황금색 계열 */
  --head-line:   #ffe9a8;   /* 제목 아래 가로선 — 연노랑 */
}
/* 브레드크럼 '현재 항목' 칩 배경 — 파랑 계열(#e8f4fb) → 노랑 계열 */
.ap-theme .bc-label.bc-current { background: #fff8e1; }

/* ══════════════════════════════
   UTM 테마 — 기존 UTM 페이지의 빨강(#ff2837)을 짙게 조정한 #a00d12
══════════════════════════════ */
.utm-theme .breadcrumb,
.utm-theme .prod-wrap,
.utm-theme .prod-award-strip {
  --accent:      #a00d12;
  --accent2:     #c8161c;
  --accent-text: #a00d12;
  --accent-on:   #3d3d3d;   /* hover 배경 위 글자 — 흰색은 옅은 바탕에서 안 보인다 */
  --accent-hover: #f4eeee;  /* hover 채움 — 분홍기 뺀 웜 그레이 */
  --head-color:  #a00d12;   /* 섹션 제목 */
  --head-line:   #f0dedf;
}
/* 브레드크럼 '현재 항목' 칩 배경 → 아주 옅은 웜 그레이 */
.utm-theme .bc-label.bc-current { background: #f7f1f1; }

/* ══════════════════════════════
   Supported AP (APC) 표 — NXC 컨트롤러 전용
   구조는 본사 AP Controller 지원표 참고 — Series·Model 열을 넓게, 지원 AP 는 세로 나열.
   색·선은 사이트 기존 Specifications(#zyxel-spec) 표를 따른다.
══════════════════════════════ */
.apc-section .apc-lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 16px;
  word-break: keep-all;
}
.apc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 600px;
  color: var(--text);
}
/* 열 폭 — 본사 표처럼 Series·Model 을 넉넉하게 */
.apc-col-series { width: 28%; }
.apc-col-model  { width: 28%; }
.apc-col-ap     { width: 44%; }
.apc-table th {
  background: var(--navy);
  color: var(--white);
  padding: 10px 14px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
}
.apc-table td {
  padding: 14px;
  border-bottom: 1px solid var(--gray-line);
  vertical-align: middle;
  text-align: center;
  color: var(--text);
  word-break: keep-all;
}
/* 열 사이 세로 실선 (rowspan 이 있어 td+td 로는 첫 칸이 빠진다) */
.apc-table .apc-model,
.apc-table .apc-aps { border-left: 1px solid var(--gray-line); }
.apc-table .apc-series { font-weight: 700; }
.apc-table .apc-model  { font-weight: 700; white-space: nowrap; }

/* 지원 AP — 한 줄에 한 모델씩 세로 나열, 시리즈별로 살짝 띄운다 */
.apc-table .apc-aps { text-align: left; padding: 12px 16px; }
.apc-table .apc-ap-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}
.apc-table .apc-ap-list:last-of-type { margin-bottom: 0; }
.apc-table .apc-ap-list li { margin: 0; line-height: 1.85; }
.apc-table .apc-ap-list a {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}
.apc-table .apc-ap-list a:hover { color: var(--accent-text); text-decoration: underline; }
/* 단종 모델 — 회색, 링크 없음 */
.apc-eol { color: var(--text-sub); font-weight: 600; }
.apc-table .apc-legend {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: var(--text-sub);
}
.apc-table .apc-legend .apc-eol { font-weight: 700; }
/* 판매 중이지만 상세 페이지가 없는 모델 — 링크 없는 일반 텍스트 */
.apc-live { color: var(--text); font-weight: 700; }

@media (max-width: 767px) {
  .apc-section .apc-lead { font-size: 13px; }
  .apc-table {
    min-width: unset;
    table-layout: fixed;
    font-size: 10px;
    white-space: normal;
    word-break: break-word;
  }
  .apc-col-series { width: 26%; }
  .apc-col-model  { width: 28%; }
  .apc-table th, .apc-table td { padding: 7px 4px; }
  .apc-table .apc-model { white-space: normal; }
  .apc-table .apc-aps { padding: 8px 6px; }
  .apc-table .apc-ap-list { margin-bottom: 6px; }
  .apc-table .apc-ap-list li { line-height: 1.7; }
  .apc-table .apc-legend { font-size: 9.5px; margin-top: 8px; }
}

/* ── 인증 배지 (Wi-Fi Alliance / 보안기능확인서) — 모델명 영역 우측 상단 ── */
.prod-headline { position: relative; }
.prod-headline .cert-badge { position: absolute; top: 28px; right: 36px; height: auto; display: block; }
@media (max-width: 960px) {
  .prod-headline .cert-badge { top: 20px; right: 20px; }
}

/* 인증 배지 — 좌측 이미지 카드 우측 상단. PC top 36px = .prod-headline 상단 패딩(시리즈 라벨 시작선)과 맞춤 */
.prod-main-img .cert-badge { position: absolute; top: 36px; right: 20px; width: 64px; height: auto; z-index: 3; }
.prod-main-img:hover .cert-badge { transform: none; }
@media (max-width: 960px) { .prod-main-img .cert-badge { top: 14px; right: 14px; width: 52px; } }

/* 보안기능확인서 엠블럼 (assets/inc/badge_security.php) */
.prod-main-img .sec-emblem { width: 133px; }
@media (max-width: 960px) { .prod-main-img .sec-emblem { width: 109px; } }

/* 갤러리 이미지 여백이 적어 다른 제품보다 크게 보이는 페이지용 — 85% 로 축소 (WBE510D) */
.prod-img-sm .prod-main-img img:not(.cert-badge) { width: calc((100% - 64px) * .85); height: 85%; }