/* ==========================================================================
   바른하수구 상업·숙박시설 전담 기술센터 (Site 2: 식당 · 자영업 · 펜션 · 캠핑장 전담)
   Theme: 3-Tier Unified Calm Palette
     - Page BG: #F6F5F2 (Warm Stone Off-White) / Alt Section BG: #EFECE6 (Soft Linen Beige)
     - Card/Box BG: #FFFFFF (Pure White) + Border: 1px solid #E2DFD7
     - Accent: #4A5D4E (Sage Olive One-Tone) / Secondary Button: #EFECE6 + #262826 + #D5D1C8
     - Dark Bar (Top Slim Bar & Footer Only): #262927
   Prefix Convention: eng-* / jet-* (100% distinct DOM/CSS structure for Naver SEO)
   ========================================================================== */

:root {
  --eng-bg-page: #F6F5F2;
  --eng-bg-alt: #EFECE6;
  --eng-card-bg: #FFFFFF;
  --eng-border: #E2DFD7;
  --eng-border-strong: #D5D1C8;
  --eng-accent: #4A5D4E;
  --eng-accent-hover: #3B4B3E;
  --eng-accent-soft: #EBF0EC;
  --eng-dark-bar: #262927;
  --eng-text-main: #262826;
  --eng-text-sub: #545854;
  --eng-text-muted: #767B76;
  --eng-radius-sm: 6px;
  --eng-radius-md: 10px;
  --eng-radius-lg: 12px;
  --eng-shadow-sm: 0 2px 8px rgba(38, 40, 38, 0.04);
  --eng-shadow-md: 0 6px 18px rgba(38, 40, 38, 0.07);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body.eng-body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', sans-serif;
  background-color: var(--eng-bg-page);
  color: var(--eng-text-main);
  line-height: 1.65;
  word-break: keep-all;
  padding-bottom: 78px;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.eng-shell {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   1. Top Slim Status Bar (Dark #262927 Allowed Only Here & Footer)
   ========================================================================== */
.eng-topbar {
  background-color: var(--eng-dark-bar);
  color: #E2DFD7;
  font-size: 0.82rem;
  padding: 8px 0;
  border-bottom: 1px solid #363A37;
}

.eng-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 16px;
}

.eng-status-group {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.eng-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.76rem;
}

.eng-status-dot {
  width: 6px;
  height: 6px;
  background-color: #93B29A;
  border-radius: 50%;
  display: inline-block;
}

.eng-topbar-hotline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.eng-topbar-hotline a {
  color: #FFFFFF;
}

/* ==========================================================================
   2. Header & Single-Line Navigation (Strictly 1 Line on Desktop)
   ========================================================================== */
.eng-header {
  background-color: var(--eng-card-bg);
  color: var(--eng-text-main);
  position: sticky;
  top: 0;
  z-index: 950;
  border-bottom: 1px solid var(--eng-border);
  box-shadow: var(--eng-shadow-sm);
}

.eng-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  white-space: nowrap;
  height: 72px;
  gap: 16px;
}

.eng-brand {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  white-space: nowrap;
}

.eng-brand-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--eng-accent);
  text-transform: uppercase;
  line-height: 1.2;
}

.eng-brand-title {
  font-size: 1.22rem;
  font-weight: 900;
  color: var(--eng-text-main);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.eng-brand-title span {
  color: var(--eng-accent);
}

.eng-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 6px;
}

.eng-nav-link {
  display: inline-block;
  padding: 9px 13px;
  border-radius: var(--eng-radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--eng-text-sub);
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.eng-nav-link:hover,
.eng-nav-link.is-active {
  background-color: var(--eng-accent-soft);
  color: var(--eng-accent);
}

.eng-header-cta {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

.eng-menu-toggle {
  display: none;
  background: var(--eng-bg-alt);
  color: var(--eng-text-main);
  border: 1px solid var(--eng-border-strong);
  padding: 8px 12px;
  border-radius: var(--eng-radius-sm);
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  cursor: pointer;
}

/* ==========================================================================
   3. Unified Buttons (Primary: #4A5D4E / Secondary: #EFECE6 + #262826 + #D5D1C8)
   ========================================================================== */
.eng-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  border-radius: var(--eng-radius-sm);
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
  border: 1px solid transparent;
  text-align: center;
}

.eng-btn:hover {
  transform: translateY(-1px);
}

/* Main Point Color (#4A5D4E Sage Olive) */
.eng-btn-primary,
.eng-btn-amber,
.eng-btn-dark {
  background-color: var(--eng-accent);
  color: #FFFFFF;
  border-color: var(--eng-accent);
}

.eng-btn-primary:hover,
.eng-btn-amber:hover,
.eng-btn-dark:hover {
  background-color: var(--eng-accent-hover);
  border-color: var(--eng-accent-hover);
}

/* Secondary Button (#EFECE6 BG + #262826 Text + #D5D1C8 Border) */
.eng-btn-secondary,
.eng-btn-outline {
  background-color: var(--eng-bg-alt);
  color: var(--eng-text-main);
  border: 1px solid var(--eng-border-strong);
}

.eng-btn-secondary:hover,
.eng-btn-outline:hover {
  background-color: #E5E1D8;
  border-color: var(--eng-accent);
}

/* ==========================================================================
   4. Split-Screen Hero (Clean & Aligned Left/Right)
   ========================================================================== */
.eng-hero-split {
  background-color: var(--eng-bg-alt);
  padding: 56px 0;
  border-bottom: 1px solid var(--eng-border);
}

.eng-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 32px;
  align-items: stretch;
}

.eng-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eng-kicker {
  display: inline-block;
  align-self: flex-start;
  background: var(--eng-accent-soft);
  color: var(--eng-accent);
  border: 1px solid #C8D6CB;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 14px;
  white-space: nowrap;
}

.eng-hero-title {
  font-size: clamp(1.65rem, 2.5vw, 2.2rem);
  font-weight: 900;
  line-height: 1.34;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
  color: var(--eng-text-main);
}

.eng-hero-title strong {
  color: var(--eng-accent);
}

.eng-hero-lead {
  font-size: 0.98rem;
  color: var(--eng-text-sub);
  margin-bottom: 22px;
  line-height: 1.65;
}

.eng-telemetry-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}

.eng-telemetry-box {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-top: 3px solid var(--eng-accent);
  padding: 14px 12px;
  border-radius: var(--eng-radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.eng-telemetry-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--eng-accent);
  margin-bottom: 3px;
  white-space: nowrap;
}

.eng-telemetry-lbl {
  font-size: 0.8rem;
  color: var(--eng-text-sub);
  white-space: nowrap;
}

.eng-hero-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.eng-hero-actions .eng-btn {
  padding: 14px 18px;
  font-size: 0.96rem;
  width: 100%;
}

.eng-hero-visual {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-md);
  padding: 16px;
  box-shadow: var(--eng-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eng-hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--eng-radius-sm);
  border: 1px solid var(--eng-border);
}

.eng-hero-visual-caption {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--eng-text-muted);
  padding: 2px 4px 0;
  white-space: nowrap;
}

/* ==========================================================================
   5. Section Layout & Strict Heading Alignment
   ========================================================================== */
.eng-section {
  padding: 68px 0;
  background-color: var(--eng-bg-page);
}

.eng-section-alt {
  background-color: var(--eng-bg-alt);
  border-top: 1px solid var(--eng-border);
  border-bottom: 1px solid var(--eng-border);
}

.eng-section-head {
  margin-bottom: 36px;
}

.eng-section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 36px;
}

.eng-section-tag {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--eng-accent);
  background: var(--eng-accent-soft);
  border: 1px solid #C8D6CB;
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.eng-section-title {
  font-size: clamp(1.38rem, 2.1vw, 1.82rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--eng-text-main);
}

.eng-section-desc {
  font-size: 0.96rem;
  color: var(--eng-text-sub);
  max-width: 820px;
}

/* ==========================================================================
   6. Aligned Grid Cards (2-Col, 3-Col, 4-Col)
   ========================================================================== */
.jet-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  align-items: stretch;
}

.jet-card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.jet-card-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.jet-spec-card {
  height: 100%;
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-top: 3px solid var(--eng-accent);
  border-radius: var(--eng-radius-md);
  padding: 24px;
  box-shadow: var(--eng-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.jet-spec-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--eng-shadow-md);
}

.jet-card-top {
  display: flex;
  flex-direction: column;
}

.jet-card-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--eng-accent-soft);
  color: var(--eng-accent);
  margin-bottom: 12px;
  white-space: nowrap;
}

.jet-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--eng-radius-sm);
  border: 1px solid var(--eng-border);
  margin-bottom: 14px;
}

.jet-spec-card h3 {
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 10px;
  color: var(--eng-text-main);
}

.jet-spec-card p {
  font-size: 0.92rem;
  color: var(--eng-text-sub);
  line-height: 1.62;
  margin-bottom: 16px;
}

.jet-card-bottom {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--eng-border);
}

.jet-meta-list {
  font-size: 0.86rem;
}

.jet-meta-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.jet-meta-list li span {
  color: var(--eng-text-muted);
  white-space: nowrap;
}

.jet-meta-list li strong {
  color: var(--eng-accent);
  font-weight: 800;
  text-align: right;
}

/* ==========================================================================
   7. Interactive Business Type Diagnostic Selector (Light & Harmonious)
   ========================================================================== */
.jet-diag-panel {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-lg);
  padding: 28px;
  box-shadow: var(--eng-shadow-sm);
}

.jet-diag-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.jet-diag-tab {
  height: 100%;
  background: var(--eng-bg-page);
  color: var(--eng-text-main);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-sm);
  padding: 14px 16px;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.jet-diag-tab span {
  display: block;
  font-size: 0.74rem;
  color: var(--eng-text-muted);
  margin-bottom: 3px;
}

.jet-diag-tab:hover {
  border-color: var(--eng-accent);
  background: var(--eng-accent-soft);
}

.jet-diag-tab.is-active {
  background: var(--eng-accent);
  border-color: var(--eng-accent);
  color: #FFFFFF;
}

.jet-diag-tab.is-active span {
  color: #D8E4DA;
}

.jet-diag-output {
  background: var(--eng-bg-page);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-md);
  padding: 24px;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 24px;
  align-items: stretch;
}

.jet-diag-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jet-diag-title {
  font-size: 1.18rem;
  font-weight: 900;
  color: var(--eng-accent);
  margin-bottom: 10px;
  line-height: 1.35;
}

.jet-diag-desc {
  color: var(--eng-text-sub);
  margin-bottom: 16px;
  font-size: 0.94rem;
  line-height: 1.65;
}

.jet-diag-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.jet-diag-chip {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  padding: 7px 12px;
  border-radius: 4px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--eng-text-main);
}

.jet-diag-cta-box {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-top: 3px solid var(--eng-accent);
  padding: 20px;
  border-radius: var(--eng-radius-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.jet-diag-cta-title {
  color: var(--eng-accent);
  font-size: 0.96rem;
  font-weight: 800;
}

.jet-diag-cta-desc {
  font-size: 0.85rem;
  color: var(--eng-text-sub);
  line-height: 1.55;
}

.jet-diag-cta-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ==========================================================================
   8. Technical Spec Table & Regional Coverage Table
   ========================================================================== */
.eng-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--eng-radius-md);
  border: 1px solid var(--eng-border);
  box-shadow: var(--eng-shadow-sm);
  background: var(--eng-card-bg);
}

.eng-spec-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
  text-align: left;
}

.eng-spec-table th {
  background-color: var(--eng-accent);
  color: #FFFFFF;
  font-weight: 800;
  padding: 14px 18px;
  font-size: 0.9rem;
}

.eng-spec-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--eng-border);
  font-size: 0.92rem;
  color: var(--eng-text-main);
}

.eng-spec-table tr:last-child td {
  border-bottom: none;
}

.eng-spec-table tr:nth-child(even) td {
  background-color: var(--eng-bg-page);
}

.eng-spec-table td.is-highlight {
  background-color: var(--eng-accent-soft) !important;
  font-weight: 800;
  color: var(--eng-accent);
}

/* ==========================================================================
   9. 4-Step Engineering Timeline (Clean White Cards)
   ========================================================================== */
.eng-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.eng-timeline-step {
  height: 100%;
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-top: 3px solid var(--eng-accent);
  border-radius: var(--eng-radius-md);
  padding: 22px 20px;
  box-shadow: var(--eng-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eng-step-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--eng-accent);
  background: var(--eng-accent-soft);
  padding: 3px 8px;
  border-radius: 4px;
  align-self: flex-start;
  margin-bottom: 10px;
}

.eng-timeline-step h3 {
  font-size: 1.06rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--eng-text-main);
}

.eng-timeline-step p {
  font-size: 0.89rem;
  color: var(--eng-text-sub);
  line-height: 1.6;
}

/* ==========================================================================
   10. Portfolio / Work Case Cards
   ========================================================================== */
.jet-case-card {
  height: 100%;
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-md);
  overflow: hidden;
  box-shadow: var(--eng-shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jet-case-thumb {
  background: #F2EFE9;
  border-bottom: 1px solid var(--eng-border);
}

.jet-case-thumb img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.jet-case-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.jet-case-loc {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--eng-accent);
  background: var(--eng-accent-soft);
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.jet-case-title {
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--eng-text-main);
  line-height: 1.35;
}

.jet-case-desc {
  font-size: 0.9rem;
  color: var(--eng-text-sub);
  line-height: 1.6;
  margin-bottom: 14px;
}

.jet-case-footer {
  padding-top: 12px;
  border-top: 1px solid var(--eng-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--eng-accent);
}

/* ==========================================================================
   11. FAQ Accordion
   ========================================================================== */
.eng-faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eng-faq-item {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-sm);
  overflow: hidden;
}

.eng-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 16px 20px;
  text-align: left;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--eng-text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.eng-faq-q:hover {
  background-color: var(--eng-bg-page);
}

.eng-faq-a {
  display: none;
  padding: 14px 20px 18px;
  font-size: 0.92rem;
  color: var(--eng-text-sub);
  border-top: 1px solid var(--eng-border);
  background-color: var(--eng-bg-page);
}

.eng-faq-item.is-open .eng-faq-a {
  display: block;
}

/* ==========================================================================
   12. Regional Coverage & Consultation Card (Light & Unified)
   ========================================================================== */
.eng-coverage-banner {
  background: var(--eng-card-bg);
  border: 1px solid var(--eng-border);
  border-top: 3px solid var(--eng-accent);
  border-radius: var(--eng-radius-lg);
  padding: 32px;
  box-shadow: var(--eng-shadow-sm);
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 28px;
  align-items: stretch;
}

.eng-coverage-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.eng-coverage-subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.eng-coverage-subbox {
  background: var(--eng-bg-page);
  border: 1px solid var(--eng-border);
  border-left: 3px solid var(--eng-accent);
  padding: 14px;
  border-radius: var(--eng-radius-sm);
  font-size: 0.88rem;
  color: var(--eng-text-sub);
}

.eng-coverage-subbox strong {
  display: block;
  color: var(--eng-text-main);
  font-size: 0.92rem;
  margin-bottom: 4px;
}

.eng-coverage-cta {
  background: var(--eng-bg-page);
  border: 1px solid var(--eng-border);
  border-radius: var(--eng-radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.eng-coverage-phone {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--eng-accent);
  margin: 6px 0 10px;
}

/* ==========================================================================
   13. Footer (Dark #262927) & Bottom Sticky Bar
   ========================================================================== */
.eng-footer {
  background-color: var(--eng-dark-bar);
  color: #B5B8B5;
  padding: 48px 0 36px;
  border-top: 3px solid var(--eng-accent);
  font-size: 0.88rem;
}

.eng-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.85fr 0.85fr;
  gap: 32px;
  margin-bottom: 28px;
}

.eng-footer h4 {
  color: #FFFFFF;
  font-size: 1rem;
  margin-bottom: 12px;
}

.eng-footer-links li {
  margin-bottom: 7px;
}

.eng-footer-links a:hover {
  color: #FFFFFF;
}

.eng-footer-bottom {
  border-top: 1px solid #383C39;
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
}

.eng-action-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--eng-card-bg);
  border-top: 1px solid var(--eng-border-strong);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 999;
  box-shadow: 0 -4px 16px rgba(38, 40, 38, 0.08);
}

.eng-action-dock-inner {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eng-dock-info {
  color: var(--eng-text-main);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
}

.eng-dock-info strong {
  color: var(--eng-accent);
}

.eng-dock-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* ==========================================================================
   14. Responsive Breakpoints (Desktop -> Tablet -> Mobile 360px~430px)
   ========================================================================== */
@media (max-width: 1080px) {
  .eng-hero-grid,
  .jet-diag-output,
  .eng-coverage-banner,
  .eng-footer-grid {
    grid-template-columns: 1fr;
  }
  .jet-card-grid-3,
  .jet-card-grid-4,
  .eng-timeline {
    grid-template-columns: repeat(2, 1fr);
  }
  .jet-diag-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 860px) {
  .eng-topbar {
    display: none;
  }
  .eng-menu-toggle {
    display: inline-block;
  }
  .eng-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--eng-card-bg);
    flex-direction: column;
    align-items: stretch;
    padding: 14px 20px;
    border-bottom: 1px solid var(--eng-border-strong);
    box-shadow: var(--eng-shadow-md);
  }
  .eng-nav.is-open {
    display: flex;
  }
  .eng-nav-link {
    width: 100%;
  }
  .eng-header-cta {
    display: none;
  }
  .eng-section-head-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .eng-dock-info {
    display: none;
  }
  .eng-dock-btns {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .eng-dock-btns .eng-btn {
    width: 100%;
    min-height: 48px;
    padding: 13px 10px;
    font-size: 0.95rem;
  }
}

@media (max-width: 768px) {
  body.eng-body {
    overflow-x: hidden;
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .eng-shell {
    padding: 0 16px;
  }
  .eng-hero-split {
    padding: 36px 0;
  }
  .eng-section {
    padding: 48px 0;
  }
  .eng-section-head,
  .eng-section-head-row {
    margin-bottom: 24px;
  }
  h1, h2, h3,
  .eng-hero-title,
  .eng-section-title,
  .jet-spec-title,
  .jet-spec-card h3,
  .jet-case-title,
  .jet-diag-title,
  .eng-timeline-step h3,
  .eng-faq-q,
  .eng-btn,
  .eng-kicker,
  .jet-card-badge,
  .eng-hero-visual-caption {
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  h1,
  .eng-hero-title {
    font-size: 1.62rem;
    line-height: 1.35;
  }
  h2,
  .eng-section-title {
    font-size: 1.38rem;
    line-height: 1.34;
  }
  h3,
  .jet-spec-title,
  .jet-spec-card h3,
  .jet-case-title,
  .jet-diag-title,
  .eng-timeline-step h3 {
    font-size: 1.12rem;
    line-height: 1.38;
  }
  .jet-spec-card,
  .jet-case-body,
  .eng-timeline-step,
  .jet-diag-panel,
  .jet-diag-output,
  .eng-coverage-banner,
  .eng-coverage-cta {
    padding: 20px;
  }
  .eng-telemetry-strip,
  .jet-card-grid-3,
  .jet-card-grid-2,
  .jet-card-grid-4,
  .eng-timeline,
  .jet-diag-specs,
  .eng-coverage-subgrid,
  .eng-hero-actions {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .jet-diag-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
  }
  .jet-diag-tab {
    padding: 12px;
    font-size: 0.88rem;
    min-height: 60px;
    word-break: keep-all;
  }
  .eng-hero-visual-caption {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .eng-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .eng-action-dock {
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .eng-dock-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .eng-dock-btns .eng-btn {
    width: 100%;
    min-height: 48px;
    padding: 12px 8px;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  h1,
  .eng-hero-title {
    font-size: 1.55rem;
  }
  h2,
  .eng-section-title {
    font-size: 1.3rem;
  }
  h3,
  .jet-spec-title,
  .jet-spec-card h3,
  .jet-case-title,
  .jet-diag-title,
  .eng-timeline-step h3 {
    font-size: 1.08rem;
  }
  .eng-brand-title {
    font-size: 1.08rem;
  }
  .eng-brand-badge {
    font-size: 0.62rem;
  }
  .jet-diag-tabs {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .jet-diag-tab {
    padding: 11px 10px;
    font-size: 0.84rem;
  }
  .jet-meta-list li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .jet-meta-list li strong {
    text-align: left;
  }
  .eng-coverage-phone {
    font-size: 1.48rem;
  }
}