/* ===== Template A Safe: Basic Corporate ===== */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f7fa;
  color: #111827;
}

html {
  scroll-behavior: smooth;
}

#home,
#services,
#projects,
#about,
#contact,
#contact-form {
  scroll-margin-top: 96px;
}

/* Header A */
.header-A {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-A-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-A-logo {
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.header-A-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header-A-nav a {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.header-A-nav a:hover {
  color: #ffffff;
}

/* Header A Dropdown */
.header-A-dropdown {
  position: relative;
}

.header-A-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.header-A-dropdown-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 180px;
  padding: 10px;
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(15,23,42,0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.header-A-dropdown-menu a {
  display: block;
  padding: 11px 12px;
  border-radius: 12px;
  color: #1f2937;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.header-A-dropdown-menu a:hover {
  background: #eff6ff;
  color: #0f62fe;
}

.header-A-dropdown:hover .header-A-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.header-A-cta {
  display: inline-block;
  background: #0f62fe;
  color: #ffffff;
  text-decoration: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.header-A-cta:hover {
  background: #0043ce;
}

.header-A-toggle {
  display: none;
}

.header-A-hamburger {
  display: none;
  margin-left: auto;
  color: #ffffff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

/* Button A */
.button-primary-A {
  display: inline-block;
  background: #0f62fe;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.button-primary-A:hover {
  background: #0043ce;
  transform: translateY(-2px);
}

/* Hero A */
.hero-A {
  background: linear-gradient(135deg, rgba(15,23,42,0.88), rgba(17,24,39,0.82));
  color: #ffffff;
  padding: 100px 20px 80px;
}

.hero-A-container {
  max-width: 1200px;
  margin: 0 auto;
}

.hero-A-label {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
}

.hero-A h1 {
  margin: 0 0 20px;
  font-size: 48px;
  line-height: 1.2;
  max-width: 900px;
}

.hero-A-description {
  margin: 0 0 28px;
  font-size: 18px;
  line-height: 1.7;
  max-width: 760px;
  color: rgba(255,255,255,0.88);
}

/* Section A */
.section-A {
  padding: 60px 20px;
}

.section-A-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Cards A */
.card-basic-A {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card-basic-A h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.card-basic-A p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

.card-basic-B {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card-basic-B img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.card-basic-B-content {
  padding: 20px;
}

.card-basic-B h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.card-basic-B p {
  margin: 0;
  color: #555;
  font-size: 14px;
}

.card-project-A {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.card-project-A img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.card-project-A-content {
  padding: 20px;
}

.card-project-A .project-year-A {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #0f62fe;
  margin-bottom: 6px;
}

.card-project-A h3 {
  margin: 0 0 10px;
  font-size: 20px;
}

.card-project-A .project-location-A {
  margin: 0 0 8px;
  font-size: 14px;
  color: #777;
}

.card-project-A .project-description-A {
  margin: 0;
  font-size: 14px;
  color: #555;
  line-height: 1.6;
}

.card-highlight-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card-highlight-A-label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #bfdbfe;
  margin-bottom: 12px;
}

.card-highlight-A h3 {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.4;
}

.card-highlight-A p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.88);
}

.card-pricing-A {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}

.card-pricing-A-badge {
  display: inline-block;
  background: #0f62fe;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.card-pricing-A h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.card-pricing-A-price {
  margin: 0 0 18px;
  font-size: 32px;
  font-weight: 700;
  color: #111827;
}

.card-pricing-A-features {
  margin: 0;
  padding-left: 18px;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
}

.card-pricing-A .button-primary-A {
  margin-top: 20px;
}

.section-A-container .card-basic-A,
.section-A-container .card-basic-B,
.section-A-container .card-project-A {
  flex: 1 1 calc(50% - 24px);
}

.section-A-container .card-highlight-A {
  flex: 1 1 100%;
}


/* Sales Section Title A */
.sales-section-A-title {
  max-width: 1200px;
  margin: 0 auto 28px;
  padding: 0 20px;
}

.sales-section-A-title p,
.sales-section-A-label {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sales-section-A-title h2 {
  margin: 0;
  color: #111827;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Project Detail A */
.project-detail-A {
  padding: 60px 20px;
  background: #ffffff;
}

.project-detail-A-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.project-detail-A-card {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-detail-A-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}

.project-detail-A-card span {
  color: #0f62fe;
  font-weight: 800;
}

.project-detail-A-card h3 {
  margin: 14px 0 10px;
  color: #111827;
  font-size: 22px;
}

.project-detail-A-card p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

/* CTA Sales A */
.cta-sales-A {
  padding: 60px 20px;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.cta-sales-A-container {
  max-width: 1040px;
  margin: 0 auto;
  text-align: center;
}

.cta-sales-A-label {
  margin: 0 0 12px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cta-sales-A h2 {
  margin: 0 0 16px;
  font-size: 36px;
  line-height: 1.25;
}

.cta-sales-A p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}

.cta-sales-A-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.button-outline-A {
  display: inline-block;
  color: #ffffff;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.2s ease, transform 0.2s ease;
}

.button-outline-A:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* Consulting Guide A */
.consulting-guide-A {
  padding: 60px 20px;
  background: #f5f7fa;
}

.consulting-guide-A-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.consulting-guide-A-text,
.consulting-guide-A-list {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.consulting-guide-A-text h2 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 32px;
  line-height: 1.3;
}

.consulting-guide-A-text p {
  margin: 0;
  color: #4b5563;
  line-height: 1.8;
  word-break: keep-all;
}

.consulting-guide-A-list {
  display: grid;
  gap: 16px;
}

.consulting-guide-A-list div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 14px;
  background: #f8fafc;
}

.consulting-guide-A-list strong {
  color: #0f62fe;
  font-size: 20px;
}

.consulting-guide-A-list span {
  color: #111827;
  font-weight: 700;
  line-height: 1.5;
}


/* Pricing A */
.pricing-A {
  padding: 0 20px 60px;
  background: #f5f7fa;
}

.pricing-A-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.pricing-A-container .card-pricing-A {
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-A-container .card-pricing-A:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

.pricing-A-container .card-pricing-A.is-featured-A {
  border: 2px solid #0f62fe;
  transform: translateY(-6px);
}

/* Contact A */
.contact-A {
  padding: 60px 20px;
  background: #ffffff;
}

.contact-A-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.contact-A-info,
.contact-A-form {
  flex: 1 1 50%;
}

.contact-A-label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0f62fe;
}

.contact-A-info h2 {
  margin: 0 0 16px;
  font-size: 34px;
  line-height: 1.25;
  color: #111827;
}

.contact-A-info p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}

.contact-A-form {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.contact-A-form label {
  display: block;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.contact-A-form input,
.contact-A-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
}

.contact-A-form input:focus,
.contact-A-form textarea:focus {
  outline: none;
  border-color: #0f62fe;
  box-shadow: 0 0 0 3px rgba(15,98,254,0.12);
}

.contact-A-form textarea {
  resize: vertical;
}

.contact-A-form .button-primary-A {
  margin-top: 10px;
}

/* Footer A */
.footer-A {
  background: #0f172a;
  color: rgba(255,255,255,0.88);
  margin-top: 48px;
}

.footer-A-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 20px 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-A-brand,
.footer-A-links,
.footer-A-contact {
  flex: 1 1 240px;
}

.footer-A-brand h3,
.footer-A-links h4,
.footer-A-contact h4 {
  margin: 0 0 16px;
  color: #ffffff;
}

.footer-A-brand p,
.footer-A-contact p {
  margin: 0 0 10px;
  line-height: 1.7;
}

.footer-A-links a {
  display: block;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  margin-bottom: 10px;
}

.footer-A-links a:hover {
  color: #ffffff;
}

.footer-A-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-A-bottom p {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px 22px;
  font-size: 14px;
  color: rgba(255,255,255,0.68);
}

/* Mobile A */
@media (max-width: 768px) {
  .header-A-container {
    flex-wrap: wrap;
    gap: 16px;
  }

  .header-A-hamburger {
    display: block;
  }

  .header-A-nav,
  .header-A-cta {
    display: none;
  }

  .header-A-toggle:checked ~ .header-A-nav {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 8px;
  }

  .header-A-dropdown {
    width: 100%;
  }

  .header-A-dropdown-toggle {
    width: 100%;
  }

  .header-A-dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    margin-top: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    box-shadow: none;
  }

  .header-A-dropdown:hover .header-A-dropdown-menu {
    transform: none;
  }

  .header-A-dropdown-menu a {
    color: rgba(255,255,255,0.86);
    padding: 10px 12px;
  }

  .header-A-dropdown-menu a:hover {
    background: rgba(255,255,255,0.10);
    color: #ffffff;
  }

  .header-A-toggle:checked ~ .header-A-cta {
    display: inline-block;
  }

  .hero-A {
    padding: 70px 20px 60px;
  }

  .hero-A h1 {
    font-size: 32px;
  }

  .hero-A-description {
    font-size: 16px;
  }

  .section-A {
    padding: 40px 16px;
  }

  .section-A-container {
    gap: 20px;
  }

  .section-A-container .card-basic-A,
  .section-A-container .card-basic-B,
  .section-A-container .card-project-A,
  .section-A-container .card-highlight-A {
    flex: 1 1 100%;
  }

  .project-detail-A {
    padding: 50px 16px;
  }

  .project-detail-A-container,
  .consulting-guide-A-container {
    grid-template-columns: 1fr;
  }

  .sales-section-A-title {
    padding: 0;
  }

  .sales-section-A-title h2,
  .cta-sales-A h2,
  .consulting-guide-A-text h2 {
    font-size: 28px;
  }

  .cta-sales-A {
    padding: 50px 16px;
  }

  .cta-sales-A-actions {
    flex-direction: column;
    align-items: center;
  }

  .consulting-guide-A {
    padding: 50px 16px;
  }

  .consulting-guide-A-text,
  .consulting-guide-A-list,
  .project-detail-A-card {
    padding: 22px;
  }

  .contact-A {
    padding: 50px 16px;
  }

  .contact-A-container {
    flex-direction: column;
    gap: 28px;
  }

  .contact-A-info h2 {
    font-size: 28px;
  }

  .contact-A-form {
    width: 100%;
    padding: 22px;
  }

  .footer-A {
    margin-top: 40px;
  }

  .footer-A-container {
    padding: 40px 16px 28px;
    gap: 28px;
  }

  .footer-A-bottom p {
    padding: 16px 16px 20px;
  }
}

@media (max-width: 900px) {
  .pricing-A-container {
    grid-template-columns: 1fr;
  }

  .pricing-A-container .card-pricing-A.is-featured-A {
    transform: none;
  }
}


/* =========================================================
   Header Double Line (D)
   Purpose: B2B corporate header with top info line + menu line
   ========================================================= */

.header-double {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.header-double-top {
  background: #0f172a;
  color: rgba(255,255,255,0.82);
  font-size: 13px;
}

.header-double-top-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.header-double-company strong {
  color: #ffffff;
  margin-right: 10px;
}

.header-double-company span,
.header-double-contact span {
  color: #cbd5e1;
}

.header-double-contact {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.header-double-bottom {
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.header-double-bottom-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-double-logo {
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  text-decoration: none;
}

.header-double-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
}

.header-double-nav a {
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s ease;
}

.header-double-nav a:hover {
  color: #0f62fe;
}

.header-double-cta {
  background: #0f62fe;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.header-double-cta:hover {
  background: #0043ce;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,98,254,0.20);
}

.header-double-toggle {
  display: none;
}

.header-double-hamburger {
  display: none;
  margin-left: auto;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .header-double-top-container {
    flex-direction: column;
    gap: 4px;
  }

  .header-double-bottom-container {
    flex-wrap: wrap;
  }

  .header-double-hamburger {
    display: block;
  }

  .header-double-nav,
  .header-double-cta {
    display: none;
  }

  .header-double-toggle:checked ~ .header-double-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
    padding-top: 8px;
  }

  .header-double-toggle:checked ~ .header-double-cta {
    display: inline-block;
  }
}


/* =========================================================
   Header Center (E)
   Purpose: Center menu header for brand-focused websites
   ========================================================= */

.header-center {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.header-center-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  position: relative;
}

.header-center-logo {
  position: absolute;
  left: 20px;
  font-size: 20px;
  font-weight: 800;
  color: #111827;
  text-decoration: none;
}

.header-center-nav {
  display: flex;
  gap: 28px;
}

.header-center-nav a {
  text-decoration: none;
  color: #374151;
  font-weight: 600;
  transition: color 0.2s ease;
}

.header-center-nav a:hover {
  color: #0f62fe;
}

.header-center-cta {
  position: absolute;
  right: 20px;
  background: #0f62fe;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.header-center-cta:hover {
  background: #0043ce;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,98,254,0.20);
}

.header-center-toggle {
  display: none;
}

.header-center-hamburger {
  display: none;
  font-size: 26px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .header-center-container {
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .header-center-logo {
    position: static;
  }

  .header-center-hamburger {
    display: block;
  }

  .header-center-nav,
  .header-center-cta {
    display: none;
  }

  .header-center-toggle:checked ~ .header-center-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
    padding-top: 8px;
  }

  .header-center-toggle:checked ~ .header-center-cta {
    display: inline-block;
  }
}


/* =========================================================
   Template B Safe: Premium Corporate
   ========================================================= */

/* Header B */
.header-B {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e7eb;
}

.header-B-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-B-logo {
  text-decoration: none;
  color: #0f172a;
  font-size: 22px;
  font-weight: 800;
}

.header-B-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
}

.header-B-nav a {
  text-decoration: none;
  color: #374151;
  font-size: 15px;
  font-weight: 600;
}

.header-B-nav a:hover {
  color: #0f62fe;
}

.header-B-toggle {
  display: none;
}

.header-B-hamburger {
  display: none;
  margin-left: auto;
  font-size: 28px;
  cursor: pointer;
}

/* Buttons B */
.button-primary-B,
.button-secondary-B {
  display: inline-block;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.button-primary-B {
  background: #0f62fe;
  color: #ffffff;
}

.button-primary-B:hover {
  background: #0043ce;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,98,254,0.20);
}

.button-secondary-B {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.35);
}

/* Hero B */
.hero-B {
  min-height: 620px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,58,138,0.82)),
    url('img/hero-sample.jpg');
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

.hero-B-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 20px;
}

.hero-B-label {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero-B h1 {
  max-width: 820px;
  margin: 0 0 24px;
  font-size: 58px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.hero-B p {
  max-width: 720px;
  font-size: 18px;
  line-height: 1.8;
  color: rgba(255,255,255,0.88);
  word-break: keep-all;
}

.hero-B-actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
}

/* Section title B */
.section-title-B {
  max-width: 1200px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

.section-title-B p {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.section-title-B h2 {
  margin: 0;
  font-size: 36px;
  letter-spacing: -0.03em;
}

/* Service B */
.service-B {
  padding: 80px 0;
}

.service-B-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-B-card {
  background: #ffffff;
  border-radius: 26px;
  padding: 32px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.service-B-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,23,42,0.13);
}

.service-B-card span {
  color: #0f62fe;
  font-weight: 800;
}

.service-B-card h3 {
  margin: 16px 0 12px;
  font-size: 22px;
}

.service-B-card p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
  word-break: keep-all;
}

/* Split B */
.split-B {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 90px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
}

.split-B-text,
.split-B-panel {
  border-radius: 26px;
  padding: 38px;
}

.split-B-text {
  background: #0f172a;
  color: #ffffff;
}

.split-B-label {
  color: #bfdbfe;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.split-B-text h2 {
  font-size: 38px;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
}

.split-B-text p {
  color: rgba(255,255,255,0.84);
  line-height: 1.8;
}

.split-B-panel {
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}

.split-B-panel h3 {
  margin-top: 0;
  font-size: 24px;
}

.split-B-panel li {
  margin-bottom: 12px;
  color: #374151;
}

/* Pricing B */
.pricing-B {
  padding: 80px 0;
  background: #ffffff;
}

.pricing-B-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.pricing-B-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 26px;
  padding: 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-B-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.pricing-B-card.featured {
  border: 2px solid #0f62fe;
  background: #ffffff;
}

.badge-B {
  display: inline-block;
  background: #0f62fe;
  color: #ffffff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
}

.price-B {
  font-size: 32px;
  font-weight: 800;
}

.pricing-B-card li {
  margin-bottom: 10px;
  color: #4b5563;
}

/* Contact B */
.contact-B {
  padding: 80px 20px;
}

.contact-B-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
}

.contact-B-label {
  color: #0f62fe;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.contact-B h2 {
  font-size: 38px;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.contact-B p {
  color: #4b5563;
  line-height: 1.7;
}

.contact-B-form {
  background: #ffffff;
  border-radius: 26px;
  padding: 30px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}

.contact-B-form input,
.contact-B-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  font-family: inherit;
  font-size: 15px;
}

/* Footer B */
.footer-B {
  background: #0f172a;
  color: rgba(255,255,255,0.82);
  padding: 36px 20px;
}

.footer-B-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-B strong {
  color: #ffffff;
  font-size: 20px;
}


/* =========================================================
   Template C Complete: Dark Gold Portfolio
   ========================================================= */

/* Header C */
.header-C {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(24,24,24,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,169,77,0.22);
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
}

.header-C-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.header-C-logo {
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  font-weight: 800;
}

.header-C-nav {
  margin-left: auto;
  display: flex;
  gap: 28px;
}

.header-C-nav a {
  color: #d6d0c4;
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.header-C-nav a:hover {
  color: #c9a94d;
}

.header-C-toggle {
  display: none;
}

.header-C-hamburger {
  display: none;
  margin-left: auto;
  color: #ffffff;
  font-size: 28px;
  cursor: pointer;
}

/* Buttons C */
.button-gold-C,
.button-outline-C {
  display: inline-block;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.button-gold-C {
  background: #c9a94d;
  color: #111111;
}

.button-gold-C:hover {
  background: #dfc46b;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(201,169,77,0.20);
}

.button-outline-C {
  border: 1px solid rgba(201,169,77,0.72);
  color: #dfc46b;
  background: transparent;
}

.button-outline-C:hover {
  transform: translateY(-2px);
}

/* Hero C */
.hero-C {
  min-height: 620px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(21,21,21,0.95), rgba(32,32,32,0.78), rgba(32,32,32,0.42)),
    url('img/hero-sample.jpg');
  background-size: cover;
  background-position: center;
}

.hero-C-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px 22px;
}

.hero-C-label,
.section-label-C {
  color: #c9a94d;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.hero-C h1 {
  max-width: 860px;
  margin: 0 0 24px;
  font-size: 60px;
  line-height: 1.08;
  color: #ffffff;
  letter-spacing: -0.03em;
}

.hero-C p {
  max-width: 740px;
  color: #d8d2c6;
  font-size: 18px;
  line-height: 1.8;
  word-break: keep-all;
}

.hero-C-actions {
  margin-top: 32px;
  display: flex;
  gap: 14px;
}

/* Common title C */
.section-C-title {
  max-width: 1240px;
  margin: 0 auto 34px;
  padding: 0 22px;
}

.section-C-title p {
  color: #c9a94d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  margin: 0 0 10px;
}

.section-C-title h2 {
  margin: 0;
  font-size: 40px;
  color: #ffffff;
  letter-spacing: -0.03em;
}

/* Projects C */
.projects-C {
  padding: 90px 0;
  background: #1b1b1b;
}

.projects-C-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
}

.project-C-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(201,169,77,0.25);
  background: #252525;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.project-C-card.large {
  grid-row: span 2;
  min-height: 664px;
}

.project-C-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  opacity: 0.72;
  transition: transform 0.35s ease;
  filter: saturate(1.04) contrast(1.03);
}

.project-C-card:hover img {
  transform: scale(1.05);
}

.project-C-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 32px;
  background: linear-gradient(transparent, rgba(0,0,0,0.88));
}

.project-C-overlay span {
  color: #c9a94d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.project-C-overlay h3 {
  margin: 10px 0;
  color: #ffffff;
  font-size: 28px;
}

.project-C-overlay p {
  color: #ddd6c8;
  line-height: 1.6;
}

/* Services C */
.services-C {
  padding: 90px 0;
  background: #151515;
}

.services-C-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.service-C-card {
  background: #222222;
  border: 1px solid rgba(201,169,77,0.18);
  border-radius: 26px;
  padding: 32px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.service-C-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,0.18);
}

.service-C-card span {
  color: #c9a94d;
  font-weight: 800;
}

.service-C-card h3 {
  color: #ffffff;
  font-size: 24px;
  margin: 16px 0 12px;
}

.service-C-card p {
  color: #d6d0c4;
  line-height: 1.7;
  word-break: keep-all;
}

/* Strength C */
.strength-C {
  max-width: 1240px;
  margin: 0 auto;
  padding: 30px 22px 90px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
}

.strength-C-left,
.strength-C-stats {
  background: #202020;
  border: 1px solid rgba(201,169,77,0.2);
  border-radius: 26px;
  padding: 38px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.strength-C-left h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 40px;
  letter-spacing: -0.03em;
}

.strength-C-left p {
  color: #d6d0c4;
  line-height: 1.8;
}

.strength-C-stats {
  display: grid;
  gap: 22px;
}

.strength-C-stats strong {
  display: block;
  color: #c9a94d;
  font-size: 38px;
  margin-bottom: 6px;
}

.strength-C-stats span {
  color: #ffffff;
  font-weight: 700;
}

/* Pricing C */
.pricing-C {
  padding: 90px 0;
  background: #1b1b1b;
}

.pricing-C-grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.pricing-C-card {
  background: #222222;
  border: 1px solid rgba(201,169,77,0.24);
  border-radius: 26px;
  padding: 32px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.pricing-C-card:hover {
  transform: translateY(-6px);
  border-color: #c9a94d;
}

.pricing-C-card.featured {
  border: 2px solid #c9a94d;
  background: #292516;
}

.badge-C {
  display: inline-block;
  background: #c9a94d;
  color: #111111;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.pricing-C-card h3 {
  color: #ffffff;
  font-size: 24px;
}

.price-C {
  color: #c9a94d;
  font-size: 34px;
  font-weight: 800;
}

.pricing-C-card li {
  margin-bottom: 10px;
  color: #d8d0c2;
}

/* Contact C */
.contact-C {
  padding: 90px 22px;
  background: #151515;
}

.contact-C-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 42px;
}

.contact-C-label {
  color: #c9a94d;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.contact-C h2 {
  color: #ffffff;
  font-size: 42px;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.contact-C p {
  color: #d6d0c4;
  line-height: 1.7;
}

.contact-C-form {
  background: #202020;
  border: 1px solid rgba(201,169,77,0.24);
  border-radius: 26px;
  padding: 30px;
}

.contact-C-form input,
.contact-C-form textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px;
  background: #151515;
  color: #ffffff;
  font-family: inherit;
}

/* Footer C */
.footer-C {
  background: #101010;
  color: #bdb7aa;
  padding: 42px 22px;
  border-top: 1px solid rgba(201,169,77,0.22);
}

.footer-C-container {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

.footer-C strong {
  color: #ffffff;
  font-size: 20px;
}

.copyright-C {
  font-size: 14px;
  color: #8f887b;
}


/* =========================================================
   Responsive: B + C
   ========================================================= */
@media (max-width: 900px) {
  .header-B-container,
  .header-C-container {
    flex-wrap: wrap;
  }

  .header-B-hamburger,
  .header-C-hamburger {
    display: block;
  }

  .header-B-nav,
  .header-B .button-primary-B,
  .header-C-nav,
  .header-C .button-gold-C {
    display: none;
  }

  .header-B-toggle:checked ~ .header-B-nav,
  .header-C-toggle:checked ~ .header-C-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 14px;
  }

  .hero-B h1 {
    font-size: 38px;
  }

  .hero-C h1 {
    font-size: 40px;
  }

  .hero-B-actions,
  .hero-C-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .service-B-grid,
  .pricing-B-grid,
  .split-B,
  .contact-B-container,
  .projects-C-grid,
  .services-C-grid,
  .strength-C,
  .pricing-C-grid,
  .contact-C-container {
    grid-template-columns: 1fr;
  }

  .project-C-card.large {
    grid-row: span 1;
    min-height: 360px;
  }
}


/* =========================================================
   WEBS About Page Add-on
   Purpose: about.html 전용 섹션 스타일
   ========================================================= */
#ceo,
#overview,
#history,
#philosophy,
#organization,
#partners {
  scroll-margin-top: 96px;
}

.about-section-A {
  padding: 64px 20px;
  background: #ffffff;
}

.about-section-A.is-soft-A {
  background: #f5f7fa;
}

.about-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.about-section-title-A {
  margin-bottom: 32px;
}

.about-section-title-A p {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-section-title-A h2 {
  margin: 0;
  font-size: 36px;
  line-height: 1.25;
  color: #111827;
  letter-spacing: -0.02em;
}

.about-section-title-A .about-section-desc-A {
  max-width: 760px;
  margin-top: 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.ceo-message-A {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 28px;
  align-items: stretch;
}

.ceo-profile-A,
.ceo-text-A {
  border-radius: 24px;
  padding: 34px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
}

.ceo-profile-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
}

.ceo-profile-A span {
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.ceo-profile-A h3 {
  margin: 0 0 10px;
  font-size: 30px;
}

.ceo-profile-A p {
  margin: 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.7;
}

.ceo-text-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

.ceo-text-A h2 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.3;
  color: #111827;
}

.ceo-text-A p {
  margin: 0 0 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.85;
  word-break: keep-all;
}

.overview-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.overview-card-A,
.org-card-A,
.partner-card-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.overview-card-A span,
.org-card-A span {
  display: block;
  margin-bottom: 8px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
}

.overview-card-A strong,
.org-card-A strong {
  display: block;
  color: #111827;
  font-size: 18px;
  line-height: 1.45;
}

.overview-card-A p,
.org-card-A p {
  margin: 10px 0 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}

.timeline-A {
  position: relative;
  display: grid;
  gap: 18px;
}

.timeline-A::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: #dbeafe;
}

.timeline-A-item {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: start;
}

.timeline-A-year {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #0f62fe;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}

.timeline-A-content {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.timeline-A-content h3 {
  margin: 0 0 8px;
  color: #111827;
  font-size: 20px;
}

.timeline-A-content p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
  word-break: keep-all;
}

.philosophy-card-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
  border-radius: 26px;
  padding: 44px;
  box-shadow: 0 16px 36px rgba(15,23,42,0.18);
}

.philosophy-card-A p:first-child {
  margin: 0 0 14px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.philosophy-card-A h2 {
  margin: 0 0 18px;
  font-size: 38px;
  line-height: 1.25;
}

.philosophy-card-A p:last-child {
  max-width: 760px;
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}

.org-grid-A {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.partner-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.partner-card-A {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #111827;
  font-weight: 800;
  font-size: 17px;
}

.about-cta-A {
  padding: 62px 20px;
  background: #0f172a;
  color: #ffffff;
  text-align: center;
}

.about-cta-A h2 {
  margin: 0 0 14px;
  font-size: 34px;
  line-height: 1.3;
}

.about-cta-A p {
  max-width: 720px;
  margin: 0 auto 28px;
  color: rgba(255,255,255,0.84);
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

@media (max-width: 900px) {
  .ceo-message-A,
  .overview-grid-A,
  .org-grid-A,
  .partner-grid-A {
    grid-template-columns: 1fr;
  }

  .about-section-A {
    padding: 54px 16px;
  }

  .about-section-title-A h2,
  .ceo-text-A h2,
  .philosophy-card-A h2,
  .about-cta-A h2 {
    font-size: 28px;
  }

  .ceo-profile-A,
  .ceo-text-A,
  .philosophy-card-A {
    padding: 26px;
  }

  .timeline-A-item {
    grid-template-columns: 58px 1fr;
  }

  .timeline-A::before {
    left: 20px;
  }

  .timeline-A-year {
    width: 42px;
    height: 42px;
    font-size: 12px;
  }
}

/* =========================================================
   Business Page A: WEBS Business Area
   ========================================================= */
.business-section-A,
.business-detail-A {
  padding: 62px 20px;
  background: #ffffff;
}

.business-section-A.is-soft-A,
.business-detail-A.is-soft-A {
  background: #f5f7fa;
}

.business-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.business-section-title-A {
  max-width: 860px;
  margin: 0 0 34px;
}

.business-section-title-A p,
.business-label-A {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.business-section-title-A h2 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.business-section-desc-A {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.business-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.business-card-A {
  display: block;
  min-height: 190px;
  padding: 26px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.business-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.business-card-A span {
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
}

.business-card-A h3 {
  margin: 14px 0 10px;
  color: #111827;
  font-size: 21px;
  line-height: 1.35;
}

.business-card-A p {
  margin: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
}

.business-detail-grid-A,
.business-highlight-grid-A {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 32px;
  align-items: stretch;
}

.business-detail-grid-A.reverse-A {
  grid-template-columns: 1.05fr 0.95fr;
}

.business-detail-grid-A.reverse-A .business-detail-text-A {
  order: 2;
}

.business-detail-grid-A.reverse-A .business-feature-panel-A {
  order: 1;
}

.business-detail-text-A,
.business-feature-panel-A,
.business-highlight-A,
.maintenance-card-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 34px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.business-detail-text-A h2,
.business-highlight-A h2 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.business-detail-text-A p,
.business-highlight-A p {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.9;
  word-break: keep-all;
}

.business-feature-panel-A h3 {
  margin: 0 0 18px;
  color: #111827;
  font-size: 24px;
}

.business-feature-panel-A ul {
  margin: 0;
  padding-left: 20px;
  color: #374151;
  line-height: 1.9;
  word-break: keep-all;
}

.business-feature-panel-A li {
  margin-bottom: 8px;
}

.business-highlight-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.business-highlight-A.green-A {
  background: linear-gradient(135deg, #064e3b, #0f766e);
}

.business-highlight-A p:first-child {
  margin: 0 0 12px;
  color: #bfdbfe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.business-highlight-A h2 {
  color: #ffffff;
}

.business-highlight-A p {
  color: rgba(255,255,255,0.88);
}

.business-maintenance-A .business-section-title-A {
  margin-bottom: 30px;
}

.maintenance-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.maintenance-card-A h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 20px;
}

.maintenance-card-A p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

@media (max-width: 1100px) {
  .business-grid-A,
  .maintenance-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .business-section-A,
  .business-detail-A {
    padding: 54px 16px;
  }

  .business-grid-A,
  .maintenance-grid-A,
  .business-detail-grid-A,
  .business-highlight-grid-A,
  .business-detail-grid-A.reverse-A {
    grid-template-columns: 1fr;
  }

  .business-detail-grid-A.reverse-A .business-detail-text-A,
  .business-detail-grid-A.reverse-A .business-feature-panel-A {
    order: initial;
  }

  .business-section-title-A h2,
  .business-detail-text-A h2,
  .business-highlight-A h2 {
    font-size: 28px;
  }

  .business-card-A,
  .business-detail-text-A,
  .business-feature-panel-A,
  .business-highlight-A,
  .maintenance-card-A {
    padding: 24px;
  }
}

@media (max-width: 560px) {
  .business-grid-A,
  .maintenance-grid-A {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Solutions Page A
   ========================================================= */
.solutions-section-A {
  padding: 62px 20px;
  background: #f5f7fa;
}

.solutions-section-A.is-white-A {
  background: #ffffff;
}

.solutions-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.solutions-title-A {
  margin-bottom: 34px;
}

.solutions-title-A p,
.solutions-label-A,
.solutions-highlight-label-A {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.solutions-title-A h2 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.solutions-desc-A {
  max-width: 820px;
  margin-top: 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.solutions-overview-grid-A {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.solutions-overview-card-A {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 26px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.solutions-overview-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.solutions-overview-card-A span {
  color: #0f62fe;
  font-weight: 800;
}

.solutions-overview-card-A h3 {
  margin: 14px 0 10px;
  font-size: 22px;
  color: #111827;
}

.solutions-overview-card-A p {
  margin: 0;
  color: #4b5563;
  line-height: 1.7;
  word-break: keep-all;
}

.solutions-detail-A {
  padding: 68px 20px;
  background: #ffffff;
}

.solutions-detail-A.is-soft-A {
  background: #f8fafc;
}

.solutions-split-A {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 34px;
  align-items: stretch;
}

.solutions-split-A.reverse-A {
  grid-template-columns: 0.95fr 1.05fr;
}

.solutions-text-A,
.solutions-panel-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.07);
}

.solutions-text-A h2 {
  margin: 0 0 16px;
  color: #111827;
  font-size: 34px;
  line-height: 1.25;
}

.solutions-text-A p {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.85;
  word-break: keep-all;
}

.solutions-panel-A {
  background: #0f172a;
  color: #ffffff;
}

.solutions-panel-A.blue-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.solutions-panel-A h3 {
  margin: 0 0 18px;
  font-size: 24px;
}

.solutions-panel-A ul {
  margin: 0;
  padding-left: 20px;
  color: rgba(255,255,255,0.88);
  line-height: 1.9;
}

.solutions-highlight-A {
  padding: 68px 20px;
  color: #ffffff;
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.solutions-highlight-A h2 {
  max-width: 900px;
  margin: 0 0 16px;
  font-size: 38px;
  line-height: 1.25;
}

.solutions-highlight-A p {
  max-width: 860px;
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}

.solutions-highlight-label-A {
  color: #bfdbfe;
}

.solutions-tags-A {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.solutions-tags-A span {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  color: #ffffff;
  font-weight: 700;
}

.solutions-module-grid-A {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.solutions-module-card-A {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.solutions-module-card-A:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.solutions-module-card-A.featured-A {
  background: #ffffff;
  border: 2px solid #0f62fe;
}

.solutions-module-card-A span {
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.solutions-module-card-A h3 {
  margin: 14px 0 12px;
  color: #111827;
  font-size: 24px;
}

.solutions-module-card-A p {
  margin: 0;
  color: #4b5563;
  line-height: 1.8;
  word-break: keep-all;
}

.protocol-A {
  background: #0f172a;
}

.solutions-title-A.light-A p,
.solutions-title-A.light-A h2,
.solutions-title-A.light-A .solutions-desc-A {
  color: #ffffff;
}

.solutions-title-A.light-A .solutions-desc-A {
  color: rgba(255,255,255,0.82);
}

.protocol-grid-A {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.protocol-card-A {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.16);
  color: #ffffff;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 900px) {
  .solutions-overview-grid-A,
  .solutions-module-grid-A,
  .protocol-grid-A,
  .solutions-split-A,
  .solutions-split-A.reverse-A {
    grid-template-columns: 1fr;
  }

  .solutions-section-A,
  .solutions-detail-A,
  .solutions-highlight-A {
    padding: 54px 16px;
  }

  .solutions-title-A h2,
  .solutions-text-A h2,
  .solutions-highlight-A h2 {
    font-size: 28px;
  }

  .solutions-text-A,
  .solutions-panel-A,
  .solutions-module-card-A,
  .solutions-overview-card-A {
    padding: 24px;
  }
}

/* =========================================================
   Projects Page A: WEBS Projects
   ========================================================= */
#featured-projects,
#project-categories,
#railway,
#automation,
#medical,
#bems-projects,
#equipment,
#psd-projects {
  scroll-margin-top: 96px;
}

.projects-section-A,
.projects-table-section-A {
  padding: 64px 20px;
  background: #ffffff;
}

.projects-section-A.is-soft-A,
.projects-table-section-A.is-soft-A {
  background: #f5f7fa;
}

.projects-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.projects-title-A {
  margin-bottom: 34px;
}

.projects-title-A.compact-A {
  margin-bottom: 22px;
}

.projects-title-A p {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.projects-title-A h2 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.projects-desc-A {
  max-width: 820px;
  margin-top: 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.projects-feature-grid-A {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.projects-feature-card-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.projects-feature-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 16px 36px rgba(15,23,42,0.13);
}

.projects-feature-card-A.featured-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.projects-feature-card-A span {
  color: #0f62fe;
  font-weight: 800;
  font-size: 13px;
}

.projects-feature-card-A.featured-A span {
  color: #bfdbfe;
}

.projects-feature-card-A h3 {
  margin: 16px 0 12px;
  color: #111827;
  font-size: 24px;
  line-height: 1.35;
}

.projects-feature-card-A.featured-A h3 {
  color: #ffffff;
}

.projects-feature-card-A p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

.projects-feature-card-A.featured-A p {
  color: rgba(255,255,255,0.86);
}

.projects-category-grid-A {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.projects-category-card-A {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.projects-category-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 30px rgba(15,23,42,0.12);
}

.projects-category-card-A strong {
  display: block;
  color: #111827;
  font-size: 20px;
  margin-bottom: 8px;
}

.projects-category-card-A span {
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.projects-table-wrap-A {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 10px 26px rgba(15,23,42,0.07);
}

.projects-table-A {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  font-size: 14px;
}

.projects-table-A th,
.projects-table-A td {
  padding: 15px 16px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}

.projects-table-A th {
  background: #0f172a;
  color: #ffffff;
  font-weight: 800;
  white-space: nowrap;
}

.projects-table-A td {
  color: #374151;
  word-break: keep-all;
}

.projects-table-A tbody tr:hover {
  background: #f8fafc;
}

.projects-table-A tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .projects-section-A,
  .projects-table-section-A {
    padding: 54px 16px;
  }

  .projects-feature-grid-A,
  .projects-category-grid-A {
    grid-template-columns: 1fr;
  }

  .projects-title-A h2 {
    font-size: 28px;
  }

  .projects-feature-card-A,
  .projects-category-card-A {
    padding: 24px;
  }
}

/* =========================================================
   Certificates Page A: WEBS Certificates
   ========================================================= */
#cert-overview,
#major-certificates,
#business-registrations,
#software-certificates,
#research-certificates,
#certificate-images {
  scroll-margin-top: 96px;
}

.cert-section-A {
  padding: 64px 20px;
  background: #ffffff;
}

.cert-section-A.is-soft-A {
  background: #f5f7fa;
}

.cert-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.cert-title-A {
  margin-bottom: 34px;
}

.cert-title-A p,
.cert-label-A {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert-title-A h2,
.cert-text-A h2 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.cert-desc-A {
  max-width: 820px;
  margin-top: 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.cert-summary-grid-A,
.cert-highlight-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.cert-summary-card-A,
.cert-card-A,
.cert-text-A,
.cert-list-panel-A,
.cert-highlight-A,
.cert-image-placeholder-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.07);
}

.cert-summary-card-A.featured-A,
.cert-highlight-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.cert-highlight-A.green-A {
  background: linear-gradient(135deg, #064e3b, #0f766e);
}

.cert-summary-card-A span,
.cert-card-A span,
.cert-highlight-A p:first-child {
  display: block;
  margin-bottom: 12px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cert-summary-card-A.featured-A span,
.cert-highlight-A p:first-child {
  color: #bfdbfe;
}

.cert-summary-card-A h3,
.cert-card-A h3,
.cert-highlight-A h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 24px;
  line-height: 1.35;
}

.cert-summary-card-A.featured-A h3,
.cert-highlight-A h3 {
  color: #ffffff;
}

.cert-summary-card-A p,
.cert-card-A p,
.cert-text-A p,
.cert-highlight-A p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

.cert-summary-card-A.featured-A p,
.cert-highlight-A p {
  color: rgba(255,255,255,0.86);
}

.cert-card-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.cert-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cert-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.cert-split-A {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.cert-split-A.reverse-A .cert-text-A {
  order: 2;
}

.cert-split-A.reverse-A .cert-list-panel-A {
  order: 1;
}

.cert-list-panel-A {
  background: #0f172a;
  color: #ffffff;
}

.cert-list-panel-A.blue-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
}

.cert-list-panel-A h3 {
  margin: 0 0 18px;
  font-size: 24px;
}

.cert-list-panel-A ul {
  margin: 0;
  padding-left: 20px;
  color: rgba(255,255,255,0.88);
  line-height: 1.9;
}

.cert-list-panel-A li {
  margin-bottom: 8px;
}

.cert-image-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.cert-image-placeholder-A {
  min-height: 180px;
  border: 2px dashed #cbd5e1;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cert-image-placeholder-A strong {
  display: block;
  color: #111827;
  font-size: 18px;
  margin-bottom: 10px;
}

.cert-image-placeholder-A span {
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 1000px) {
  .cert-summary-grid-A,
  .cert-card-grid-A,
  .cert-highlight-grid-A,
  .cert-image-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cert-section-A {
    padding: 54px 16px;
  }

  .cert-split-A,
  .cert-split-A.reverse-A {
    grid-template-columns: 1fr;
  }

  .cert-split-A.reverse-A .cert-text-A,
  .cert-split-A.reverse-A .cert-list-panel-A {
    order: initial;
  }

  .cert-title-A h2,
  .cert-text-A h2 {
    font-size: 28px;
  }

  .cert-summary-card-A,
  .cert-card-A,
  .cert-text-A,
  .cert-list-panel-A,
  .cert-highlight-A,
  .cert-image-placeholder-A {
    padding: 24px;
  }
}

@media (max-width: 600px) {
  .cert-summary-grid-A,
  .cert-card-grid-A,
  .cert-highlight-grid-A,
  .cert-image-grid-A {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Contact Page A: WEBS Contact
   ========================================================= */
#contact-overview,
#contact-form,
#consulting-fields {
  scroll-margin-top: 96px;
}

.contact-page-section-A {
  padding: 64px 20px;
  background: #ffffff;
}

.contact-page-section-A.is-soft-A {
  background: #f5f7fa;
}

.contact-page-container-A {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-page-title-A {
  margin-bottom: 34px;
}

.contact-page-title-A p,
.contact-page-label-A {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-page-title-A h2,
.contact-form-intro-A h2 {
  margin: 0;
  color: #111827;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.contact-page-desc-A,
.contact-form-intro-A p {
  max-width: 820px;
  margin-top: 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.contact-info-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.contact-info-card-A,
.contact-field-card-A,
.contact-form-intro-A,
.contact-form-panel-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.07);
}

.contact-info-card-A.featured-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.contact-info-card-A span,
.contact-field-card-A span {
  display: block;
  margin-bottom: 12px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-info-card-A.featured-A span {
  color: #bfdbfe;
}

.contact-info-card-A h3,
.contact-field-card-A h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 22px;
  line-height: 1.35;
}

.contact-info-card-A.featured-A h3 {
  color: #ffffff;
}

.contact-info-card-A p,
.contact-field-card-A p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

.contact-info-card-A.featured-A p {
  color: rgba(255,255,255,0.86);
}

.contact-layout-A {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 34px;
  align-items: start;
}

.contact-check-list-A {
  display: grid;
  gap: 14px;
  margin-top: 26px;
}

.contact-check-list-A div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: #f8fafc;
}

.contact-check-list-A strong {
  color: #0f62fe;
  font-size: 18px;
}

.contact-check-list-A span {
  color: #111827;
  font-weight: 700;
  line-height: 1.5;
}

.contact-form-panel-A label {
  display: block;
  margin-bottom: 18px;
  color: #374151;
  font-size: 14px;
  font-weight: 700;
}

.contact-form-panel-A input,
.contact-form-panel-A select,
.contact-form-panel-A textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 13px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
}

.contact-form-panel-A input:focus,
.contact-form-panel-A select:focus,
.contact-form-panel-A textarea:focus {
  outline: none;
  border-color: #0f62fe;
  box-shadow: 0 0 0 3px rgba(15,98,254,0.12);
}

.contact-form-panel-A textarea {
  resize: vertical;
}

.contact-field-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.contact-field-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-field-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

@media (max-width: 1000px) {
  .contact-info-grid-A,
  .contact-field-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .contact-page-section-A {
    padding: 54px 16px;
  }

  .contact-layout-A {
    grid-template-columns: 1fr;
  }

  .contact-page-title-A h2,
  .contact-form-intro-A h2 {
    font-size: 28px;
  }

  .contact-info-card-A,
  .contact-field-card-A,
  .contact-form-intro-A,
  .contact-form-panel-A {
    padding: 24px;
  }
}

@media (max-width: 600px) {
  .contact-info-grid-A,
  .contact-field-grid-A {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   Projects Page Upgrade A
   Purpose: projects.html 대표 실적 강화 + 모바일 표 대응
   Added: 2026-05-13
   ========================================================= */

.projects-feature-grid-upgrade-A {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.projects-feature-grid-upgrade-A .projects-feature-card-A {
  min-height: 220px;
}

.projects-feature-card-A h3,
.projects-feature-card-A p {
  word-break: keep-all;
}

.projects-table-wrap-A {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.projects-table-A {
  min-width: 760px;
  border-collapse: collapse;
}

.projects-table-A th {
  white-space: nowrap;
}

.projects-table-A td {
  vertical-align: top;
}

.projects-table-A tbody tr {
  transition: background 0.18s ease;
}

.projects-table-A tbody tr:hover {
  background: #f8fafc;
}

.projects-category-card-A,
.projects-feature-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.projects-category-card-A:hover,
.projects-feature-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

@media (max-width: 1100px) {
  .projects-feature-grid-upgrade-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .projects-feature-grid-upgrade-A {
    grid-template-columns: 1fr;
  }

  .projects-table-wrap-A {
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px;
  }

  .projects-table-A {
    min-width: 820px;
  }
}

/* =========================================================
   Certificates Page Upgrade A
   Purpose: certificates.html 신뢰형 인증/지식재산 섹션 강화
   Added: 2026-05-13
   ========================================================= */

.cert-summary-card-A,
.cert-card-A,
.cert-highlight-A,
.cert-image-placeholder-A,
.cert-list-panel-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cert-summary-card-A:hover,
.cert-card-A:hover,
.cert-highlight-A:hover,
.cert-image-placeholder-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.cert-ip-section-A {
  background: #ffffff;
}

.cert-ip-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.cert-ip-card-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cert-ip-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.cert-ip-card-A.featured-A {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #ffffff;
}

.cert-ip-card-A span {
  display: inline-block;
  margin-bottom: 14px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cert-ip-card-A.featured-A span {
  color: #bfdbfe;
}

.cert-ip-card-A h3 {
  margin: 0 0 14px;
  color: #111827;
  font-size: 22px;
  line-height: 1.35;
  word-break: keep-all;
}

.cert-ip-card-A.featured-A h3 {
  color: #ffffff;
}

.cert-ip-card-A p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.8;
  word-break: keep-all;
}

.cert-ip-card-A.featured-A p {
  color: rgba(255,255,255,0.86);
}

.cert-image-placeholder-A {
  min-height: 170px;
}

.cert-image-placeholder-A strong {
  word-break: keep-all;
}

@media (max-width: 1000px) {
  .cert-ip-grid-A {
    grid-template-columns: 1fr;
  }

  .cert-ip-card-A {
    padding: 24px;
  }
}

/* =========================================================
   Contact Page Upgrade A
   Purpose: contact.html 문의 전환율 개선 + 모바일 폼 보완
   Added: 2026-05-13
   ========================================================= */

.contact-info-card-A,
.contact-field-card-A,
.contact-form-panel-A,
.contact-check-list-A div {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-info-card-A:hover,
.contact-field-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.contact-check-list-A div:hover {
  transform: translateX(4px);
}

.contact-form-panel-A input,
.contact-form-panel-A select,
.contact-form-panel-A textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-form-panel-A input:focus,
.contact-form-panel-A select:focus,
.contact-form-panel-A textarea:focus {
  outline: none;
  border-color: #0f62fe;
  box-shadow: 0 0 0 3px rgba(15,98,254,0.12);
}

.contact-form-panel-A button {
  min-width: 160px;
}

.contact-page-desc-A,
.contact-form-intro-A p,
.contact-field-card-A p {
  word-break: keep-all;
}

@media (max-width: 700px) {
  .contact-form-panel-A button {
    width: 100%;
  }

  .contact-check-list-A div {
    align-items: flex-start;
  }

  .contact-form-panel-A input,
  .contact-form-panel-A select,
  .contact-form-panel-A textarea {
    font-size: 16px;
  }
}

/* =========================================================
   Index Page Upgrade A
   Purpose: index.html 대표 실적 확장 + 메인 카드/CTA 완성도 보완
   Added: 2026-05-13
   ========================================================= */

.index-project-grid-upgrade-A {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.index-project-grid-upgrade-A .project-detail-A-card {
  min-height: 210px;
}

#services .card-basic-A,
#index-certificates .partner-card-A,
#certificates .partner-card-A,
#index-projects .project-detail-A-card,
.index-project-grid-upgrade-A .project-detail-A-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#services .card-basic-A:hover,
#certificates .partner-card-A:hover,
.index-project-grid-upgrade-A .project-detail-A-card:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

#services .card-basic-A {
  border: 1px solid #e5e7eb;
  min-height: 150px;
}

#services .card-basic-A h3,
#services .card-basic-A p,
.index-project-grid-upgrade-A .project-detail-A-card h3,
.index-project-grid-upgrade-A .project-detail-A-card p {
  word-break: keep-all;
}

#certificates .partner-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#certificates .partner-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
  background: #f8fafc;
}

.cta-sales-A h2,
.cta-sales-A p {
  word-break: keep-all;
}

@media (max-width: 1100px) {
  .index-project-grid-upgrade-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .index-project-grid-upgrade-A {
    grid-template-columns: 1fr;
  }

  #services .card-basic-A {
    min-height: auto;
  }
}

/* =========================================================
   Solutions Page Upgrade A
   Purpose: solutions.html 기술 솔루션 카드/프로토콜 영역 완성도 보완
   Added: 2026-05-13
   ========================================================= */

.solutions-overview-grid-upgrade-A .solutions-overview-card-A,
.solutions-module-grid-upgrade-A .solutions-module-card-A {
  min-height: 190px;
}

.solutions-overview-card-A,
.solutions-text-A,
.solutions-panel-A,
.solutions-module-card-A,
.protocol-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.solutions-overview-card-A:hover,
.solutions-text-A:hover,
.solutions-panel-A:hover,
.solutions-module-card-A:hover {
  transform: translateY(-5px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.solutions-overview-card-A h3,
.solutions-overview-card-A p,
.solutions-text-A h2,
.solutions-text-A p,
.solutions-panel-A li,
.solutions-module-card-A h3,
.solutions-module-card-A p,
.solutions-highlight-A h2,
.solutions-highlight-A p {
  word-break: keep-all;
}

.solutions-tags-upgrade-A span {
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.solutions-tags-upgrade-A span:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.36);
}

.protocol-grid-upgrade-A .protocol-card-A:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.36);
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
}

.solutions-module-card-A.featured-A:hover {
  border-color: #0043ce;
}

@media (max-width: 900px) {
  .solutions-overview-grid-upgrade-A .solutions-overview-card-A,
  .solutions-module-grid-upgrade-A .solutions-module-card-A {
    min-height: auto;
  }

  .solutions-tags-upgrade-A {
    gap: 10px;
  }

  .protocol-grid-upgrade-A {
    gap: 12px;
  }
}

/* =========================================================
   Business Page Upgrade A
   Purpose: business.html 사업분야 카드/상세섹션/유지관리 영역 완성도 보완
   Added: 2026-05-13
   ========================================================= */

.business-grid-upgrade-A .business-card-A {
  min-height: 205px;
}

.business-card-A,
.business-detail-text-upgrade-A,
.business-feature-panel-upgrade-A,
.business-highlight-upgrade-A,
.maintenance-grid-upgrade-A .maintenance-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.business-detail-text-upgrade-A:hover,
.business-feature-panel-upgrade-A:hover,
.maintenance-grid-upgrade-A .maintenance-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.business-highlight-upgrade-A:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15,23,42,0.18);
}

.business-card-A h3,
.business-card-A p,
.business-detail-text-upgrade-A h2,
.business-detail-text-upgrade-A p,
.business-feature-panel-upgrade-A h3,
.business-feature-panel-upgrade-A li,
.business-highlight-upgrade-A h2,
.business-highlight-upgrade-A p,
.maintenance-grid-upgrade-A .maintenance-card-A h3,
.maintenance-grid-upgrade-A .maintenance-card-A p {
  word-break: keep-all;
}

.business-feature-panel-upgrade-A li::marker {
  color: #0f62fe;
}

.maintenance-grid-upgrade-A .maintenance-card-A {
  min-height: 150px;
}

.business-highlight-upgrade-A {
  position: relative;
  overflow: hidden;
}

.business-highlight-upgrade-A::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

@media (max-width: 1100px) {
  .business-grid-upgrade-A .business-card-A {
    min-height: 180px;
  }
}

@media (max-width: 900px) {
  .business-grid-upgrade-A .business-card-A,
  .maintenance-grid-upgrade-A .maintenance-card-A {
    min-height: auto;
  }

  .business-detail-text-upgrade-A:hover,
  .business-feature-panel-upgrade-A:hover,
  .business-highlight-upgrade-A:hover,
  .maintenance-grid-upgrade-A .maintenance-card-A:hover {
    transform: none;
  }
}

/* =========================================================
   About Page Upgrade A
   Purpose: about.html 회사소개 신뢰감/가독성/카드 완성도 보완
   Added: 2026-05-13
   ========================================================= */

.ceo-message-upgrade-A .ceo-profile-A,
.ceo-message-upgrade-A .ceo-text-A,
.overview-grid-upgrade-A .overview-card-A,
.timeline-upgrade-A .timeline-A-content,
.org-grid-upgrade-A .org-card-A,
.partner-grid-upgrade-A .partner-card-A {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ceo-message-upgrade-A .ceo-profile-A:hover,
.ceo-message-upgrade-A .ceo-text-A:hover,
.overview-grid-upgrade-A .overview-card-A:hover,
.timeline-upgrade-A .timeline-A-content:hover,
.org-grid-upgrade-A .org-card-A:hover,
.partner-grid-upgrade-A .partner-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.ceo-message-upgrade-A .ceo-profile-A {
  position: relative;
  overflow: hidden;
}

.ceo-message-upgrade-A .ceo-profile-A::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -54px;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.ceo-message-upgrade-A .ceo-text-A p,
.overview-grid-upgrade-A .overview-card-A strong,
.overview-grid-upgrade-A .overview-card-A p,
.timeline-upgrade-A .timeline-A-content h3,
.timeline-upgrade-A .timeline-A-content p,
.org-grid-upgrade-A .org-card-A strong,
.org-grid-upgrade-A .org-card-A p,
.partner-grid-upgrade-A .partner-card-A,
.about-cta-A h2,
.about-cta-A p {
  word-break: keep-all;
}

.overview-grid-upgrade-A .overview-card-A {
  min-height: 150px;
}

.org-grid-upgrade-A .org-card-A {
  min-height: 150px;
}

.partner-grid-upgrade-A .partner-card-A {
  background: #ffffff;
}

.partner-grid-upgrade-A .partner-card-A:hover {
  background: #f8fafc;
  color: #0f62fe;
}

.timeline-upgrade-A .timeline-A-year {
  box-shadow: 0 8px 18px rgba(15,98,254,0.22);
}

.timeline-upgrade-A .timeline-A-item:hover .timeline-A-year {
  background: #0043ce;
}

@media (max-width: 900px) {
  .overview-grid-upgrade-A .overview-card-A,
  .org-grid-upgrade-A .org-card-A {
    min-height: auto;
  }

  .ceo-message-upgrade-A .ceo-profile-A:hover,
  .ceo-message-upgrade-A .ceo-text-A:hover,
  .overview-grid-upgrade-A .overview-card-A:hover,
  .timeline-upgrade-A .timeline-A-content:hover,
  .org-grid-upgrade-A .org-card-A:hover,
  .partner-grid-upgrade-A .partner-card-A:hover {
    transform: none;
  }
}

/* =========================================================
   Global Finish Upgrade A
   Purpose: 전체 Footer/SEO 이후 모바일 및 공통 마감 보완
   Added: 2026-05-13
   ========================================================= */

.hero-A h1,
.hero-A-description,
.about-section-title-A h2,
.about-section-title-A .about-section-desc-A,
.business-section-title-A h2,
.business-section-desc-A,
.solutions-title-A h2,
.solutions-desc-A,
.projects-title-A h2,
.projects-desc-A,
.cert-title-A h2,
.cert-desc-A,
.contact-page-title-A h2,
.contact-page-desc-A,
.footer-A-brand p,
.footer-A-contact p {
  word-break: keep-all;
}

.footer-A-links a {
  transition: color 0.2s ease, transform 0.2s ease;
}

.footer-A-links a:hover {
  transform: translateX(3px);
}

.footer-A-contact p {
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .hero-A {
    padding: 64px 16px 52px;
  }

  .hero-A h1 {
    font-size: 30px;
    line-height: 1.28;
  }

  .hero-A-description {
    font-size: 15.5px;
    line-height: 1.75;
  }

  .button-primary-A,
  .button-outline-A {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .about-cta-A {
    padding: 54px 16px;
  }

  .about-cta-A h2,
  .cta-sales-A h2 {
    font-size: 27px;
    line-height: 1.35;
  }

  .about-cta-A p,
  .cta-sales-A p {
    font-size: 15.5px;
  }

  .footer-A-links a {
    padding: 3px 0;
  }

  .footer-A-contact p {
    font-size: 14px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .button-primary-A:hover,
  .button-outline-A:hover,
  .business-card-A:hover,
  .projects-feature-card-A:hover,
  .projects-category-card-A:hover,
  .cert-card-A:hover,
  .contact-field-card-A:hover,
  .solutions-overview-card-A:hover,
  .solutions-module-card-A:hover,
  .overview-card-A:hover,
  .org-card-A:hover,
  .partner-card-A:hover {
    transform: none;
  }
}

/* =========================================================
   Mobile Menu Overlay Upgrade A
   Purpose: 모바일 메뉴를 페이지 밀림 방식에서 전체 화면 오버레이 방식으로 개선
   Added: 2026-05-13
   ========================================================= */

@media (max-width: 768px) {
  .header-A {
    position: sticky;
    top: 0;
    z-index: 2000;
  }

  .header-A-container {
    position: relative;
    flex-wrap: nowrap;
    min-height: 44px;
  }

  .header-A-logo,
  .header-A-hamburger {
    position: relative;
    z-index: 2202;
  }

  .header-A-hamburger {
    margin-left: auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
  }

  .header-A-toggle:checked ~ .header-A-hamburger {
    background: rgba(255,255,255,0.14);
  }

  .header-A-nav {
    display: none;
  }

  .header-A-toggle:checked ~ .header-A-nav {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    width: auto;
    height: 100vh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 96px 32px 120px;
    box-sizing: border-box;
    background:
      linear-gradient(135deg, rgba(15,23,42,0.98), rgba(30,58,138,0.96));
    overflow-y: auto;
  }

  .header-A-toggle:checked ~ .header-A-nav a {
    width: 100%;
    padding: 15px 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }

  .header-A-toggle:checked ~ .header-A-nav a:hover {
    color: #bfdbfe;
  }

  .header-A-toggle:checked ~ .header-A-cta {
    position: fixed;
    left: 32px;
    right: 32px;
    bottom: 34px;
    z-index: 2201;
    display: block;
    text-align: center;
    padding: 16px 18px;
    border-radius: 14px;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 16px 34px rgba(0,0,0,0.24);
  }
}

/* =========================================================
   Header Contact Duplication Fix A
   Purpose: PC에서는 문의하기 버튼만 유지, 모바일에서는 메뉴 안의 문의만 유지
   Added: 2026-05-13
   ========================================================= */

/* PC: 상단 메뉴의 '문의' 텍스트 링크는 숨기고, 우측 CTA 버튼만 표시 */
@media (min-width: 769px) {
  .header-A-nav a[href="contact.html"] {
    display: none;
  }

  .header-A-cta {
    display: inline-block;
  }
}

/* Mobile: 오버레이 메뉴 안의 '문의'는 유지하고, 별도 '문의하기' 버튼은 숨김 */
@media (max-width: 768px) {
  .header-A-cta,
  .header-A-toggle:checked ~ .header-A-cta {
    display: none !important;
  }

  .header-A-toggle:checked ~ .header-A-nav a[href="contact.html"] {
    display: block;
  }

  .header-A-toggle:checked ~ .header-A-nav {
    padding-bottom: 56px;
  }
}

/* =========================================================
   Contact Direct Card Upgrade A
   Purpose: contact.html 문의 폼을 직접 연락처 카드로 교체
   Added: 2026-05-14
   ========================================================= */

.contact-direct-card-A {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-direct-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.contact-direct-label-A {
  margin: 0 0 10px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-direct-card-A h2 {
  margin: 0;
  color: #111827;
  font-size: 34px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.contact-direct-desc-A {
  margin: 14px 0 24px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.8;
  word-break: keep-all;
}

.contact-direct-list-A {
  display: grid;
  gap: 14px;
}

.contact-direct-list-A div {
  padding: 18px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

.contact-direct-list-A span {
  display: block;
  margin-bottom: 8px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-direct-list-A strong {
  display: block;
  color: #111827;
  font-size: 18px;
  line-height: 1.45;
  word-break: keep-all;
}

.contact-direct-list-A p {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}

.contact-direct-actions-A {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.button-outline-dark-A {
  display: inline-block;
  color: #0f172a;
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.button-outline-dark-A:hover {
  background: #f8fafc;
  border-color: #0f62fe;
  transform: translateY(-2px);
}

@media (max-width: 900px) {
  .contact-direct-card-A {
    padding: 24px;
  }

  .contact-direct-card-A:hover {
    transform: none;
  }

  .contact-direct-card-A h2 {
    font-size: 28px;
  }

  .contact-direct-actions-A {
    flex-direction: column;
  }

  .contact-direct-actions-A .button-primary-A,
  .contact-direct-actions-A .button-outline-dark-A {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* =========================================================
   Real Assets Upgrade A
   Purpose: 실제 연락처/인증서 이미지/회사 사진 반영
   Added: 2026-05-14
   ========================================================= */

.cert-real-image-grid-A { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cert-real-image-card-A { display: block; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 22px; padding: 16px; text-decoration: none; color: #111827; box-shadow: 0 8px 22px rgba(15,23,42,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.cert-real-image-card-A:hover { transform: translateY(-5px); border-color: #0f62fe; box-shadow: 0 14px 32px rgba(15,23,42,0.12); }
.cert-real-image-card-A img { width: 100%; height: 220px; object-fit: contain; display: block; background: #f8fafc; border-radius: 16px; border: 1px solid #eef2f7; }
.cert-real-image-card-A strong { display: block; margin-top: 14px; font-size: 16px; line-height: 1.45; text-align: center; word-break: keep-all; }
.company-photo-grid-A { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.company-photo-card-A { overflow: hidden; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 8px 22px rgba(15,23,42,0.07); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.company-photo-card-A:hover { transform: translateY(-5px); box-shadow: 0 14px 32px rgba(15,23,42,0.12); }
.company-photo-card-A img { width: 100%; height: 240px; object-fit: cover; display: block; }
.company-photo-card-A strong { display: block; padding: 18px 20px; color: #111827; font-size: 17px; }
@media (max-width: 1100px) { .cert-real-image-grid-A { grid-template-columns: repeat(3, minmax(0, 1fr)); } .company-photo-grid-A { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .cert-real-image-grid-A, .company-photo-grid-A { grid-template-columns: 1fr; } .cert-real-image-card-A:hover, .company-photo-card-A:hover { transform: none; } .cert-real-image-card-A img { height: 260px; } .company-photo-card-A img { height: 220px; } }


/* =========================================================
   Certificates Simplified Image Focus A
   Purpose: 인증서 페이지 간략화 + 실제 인증서 이미지 크게 강조
   Added: 2026-05-14
   ========================================================= */

.cert-simple-overview-A { padding-bottom: 48px; }

.cert-simple-badge-grid-A {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.cert-simple-badge-grid-A div {
  padding: 16px 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  color: #111827;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  word-break: keep-all;
}

.cert-feature-image-grid-A {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.cert-feature-image-card-A {
  display: block;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  padding: 18px;
  text-decoration: none;
  color: #111827;
  box-shadow: 0 10px 28px rgba(15,23,42,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.cert-feature-image-card-A:hover {
  transform: translateY(-6px);
  border-color: #0f62fe;
  box-shadow: 0 18px 42px rgba(15,23,42,0.14);
}

.cert-feature-image-card-A img {
  width: 100%;
  height: 360px;
  object-fit: contain;
  display: block;
  background: #f8fafc;
  border: 1px solid #eef2f7;
  border-radius: 18px;
}

.cert-feature-image-card-A strong {
  display: block;
  margin-top: 16px;
  color: #111827;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
  word-break: keep-all;
}

@media (max-width: 1100px) {
  .cert-simple-badge-grid-A { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-feature-image-grid-A { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .cert-simple-badge-grid-A,
  .cert-feature-image-grid-A { grid-template-columns: 1fr; }

  .cert-feature-image-card-A { padding: 14px; }
  .cert-feature-image-card-A:hover { transform: none; }
  .cert-feature-image-card-A img { height: 420px; }
  .cert-feature-image-card-A strong { font-size: 17px; }
}



/* =========================================================
   Index Compact Corporate Upgrade A
   Purpose: 메인 히어로 배경 적용 + 사업/실적/인증 섹션 컴팩트화
   Added: 2026-05-14
   ========================================================= */

.index-hero-visual-A {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,138,0.78)),
    url("img/hero/index-hero.jpg");
  background-size: cover;
  background-position: center;
}

.index-hero-visual-A::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(59,130,246,0.28), transparent 34%),
    linear-gradient(90deg, rgba(15,23,42,0.28), transparent 70%);
  pointer-events: none;
}

.index-hero-visual-A .hero-A-container {
  position: relative;
  z-index: 1;
}

.index-service-compact-A {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.index-service-compact-card-A,
.index-project-compact-card-A,
.index-cert-compact-A a {
  text-decoration: none;
  color: inherit;
}

.index-service-compact-card-A {
  display: block;
  padding: 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.index-service-compact-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.index-service-compact-card-A span,
.index-project-compact-card-A span {
  display: block;
  margin-bottom: 12px;
  color: #0f62fe;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.index-service-compact-card-A strong,
.index-project-compact-card-A strong {
  display: block;
  color: #111827;
  font-size: 20px;
  line-height: 1.35;
  word-break: keep-all;
}

.index-service-compact-card-A em,
.index-project-compact-card-A em {
  display: block;
  margin-top: 10px;
  color: #4b5563;
  font-size: 14px;
  font-style: normal;
  line-height: 1.55;
  word-break: keep-all;
}

.index-project-compact-A {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.index-project-compact-card-A {
  display: block;
  min-height: 150px;
  padding: 24px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.index-project-compact-card-A:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.index-cert-compact-A {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.index-cert-compact-A a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  word-break: keep-all;
}

.index-cert-compact-A a:hover {
  transform: translateY(-4px);
  border-color: #0f62fe;
  color: #0f62fe;
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

@media (max-width: 1100px) {
  .index-service-compact-A,
  .index-project-compact-A,
  .index-cert-compact-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .index-service-compact-A,
  .index-project-compact-A,
  .index-cert-compact-A {
    grid-template-columns: 1fr;
  }

  .index-hero-visual-A {
    background-position: center;
  }

  .index-service-compact-card-A:hover,
  .index-project-compact-card-A:hover,
  .index-cert-compact-A a:hover {
    transform: none;
  }
}



/* =========================================================
   Header Logo + Index Card Premium Upgrade A
   Purpose: 전체 헤더 로고 이미지 적용 + index 카드 디자인 고급화
   Added: 2026-05-14
   ========================================================= */

.header-A-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.header-A-logo img {
  display: block;
  width: auto;
  height: 34px;
  object-fit: contain;
}

.index-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,138,0.78)),
    url("img/hero/index-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* 핵심사업분야: 블루 그라데이션 카드 */
.index-service-compact-card-A {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #10223f, #1e3a8a) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.16) !important;
}

.index-service-compact-card-A::after {
  content: "";
  position: absolute;
  right: -42px;
  top: -42px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}

.index-service-compact-card-A span {
  color: #93c5fd !important;
}

.index-service-compact-card-A strong {
  color: #ffffff !important;
}

.index-service-compact-card-A em {
  color: rgba(255,255,255,0.82) !important;
}

/* 대표 수행 실적: 짙은 네이비 카드 */
.index-project-compact-card-A {
  position: relative;
  overflow: hidden;
  background: #0f172a !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,0.16) !important;
}

.index-project-compact-card-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,98,254,0.18), transparent 60%);
  pointer-events: none;
}

.index-project-compact-card-A span,
.index-project-compact-card-A strong,
.index-project-compact-card-A em {
  position: relative;
  z-index: 1;
}

.index-project-compact-card-A span {
  color: #93c5fd !important;
}

.index-project-compact-card-A strong {
  color: #ffffff !important;
}

.index-project-compact-card-A em {
  color: rgba(255,255,255,0.78) !important;
}

/* 보유 인증 및 등록: certification badge 느낌 */
.index-cert-compact-A a {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
  border: 1px solid #dbeafe !important;
  box-shadow: 0 10px 24px rgba(15,98,254,0.08) !important;
}

.index-cert-compact-A a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 3px;
  border-radius: 999px;
  background: #0f62fe;
}

.index-cert-compact-A a:hover {
  background: linear-gradient(180deg, #eff6ff, #ffffff) !important;
}

@media (max-width: 768px) {
  .header-A-logo img {
    height: 30px;
  }
}



/* =========================================================
   Footer Simple + ControlWebPro Credit A
   Purpose: 전체 푸터 간결화 + Website by ControlWebPro 링크 추가
   Added: 2026-05-14
   ========================================================= */

.footer-simple-A {
  margin-top: 40px;
}

.footer-simple-container-A {
  padding: 34px 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
}

.footer-simple-A .footer-A-brand,
.footer-simple-A .footer-A-contact {
  flex: initial;
}

.footer-simple-A .footer-A-brand h3 {
  margin-bottom: 8px;
}

.footer-simple-A .footer-A-brand p {
  margin: 0;
  color: rgba(255,255,255,0.76);
  word-break: keep-all;
}

.footer-simple-contact-A {
  text-align: right;
}

.footer-simple-contact-A p {
  margin: 0 0 6px;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

.footer-simple-bottom-A {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-simple-bottom-A p {
  max-width: none;
  margin: 0;
  padding: 0;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
}

.footer-credit-A a {
  color: #93c5fd;
  text-decoration: none;
  font-weight: 800;
}

.footer-credit-A a:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  .footer-simple-container-A {
    flex-direction: column;
    padding: 32px 16px 22px;
  }

  .footer-simple-contact-A {
    text-align: left;
  }

  .footer-simple-bottom-A {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 16px 20px;
  }
}



/* =========================================================
   About Visual Premium Upgrade A
   Purpose: 회사소개 히어로/CEO/회사개요/연혁/조직/파트너 디자인 보강
   Added: 2026-05-14
   ========================================================= */

.about-hero-visual-A {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,138,0.74)),
    url("img/hero/about-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

.about-hero-visual-A::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 28%, rgba(59,130,246,0.22), transparent 34%),
    linear-gradient(90deg, rgba(15,23,42,0.28), transparent 70%);
  pointer-events: none;
}

.about-hero-visual-A .hero-A-container {
  position: relative;
  z-index: 1;
}

.ceo-profile-no-photo-A {
  background:
    radial-gradient(circle at 80% 16%, rgba(96,165,250,0.22), transparent 34%),
    linear-gradient(135deg, #0f172a, #1e3a8a) !important;
}

.ceo-profile-no-photo-A::before {
  content: "CEO";
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.ceo-photo-A {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 18px;
  margin-bottom: 22px;
}

.about-overview-premium-A .overview-card-A,
.about-org-premium-A .org-card-A {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid #dbeafe;
}

.about-overview-premium-A .overview-card-A::before,
.about-org-premium-A .org-card-A::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 999px;
  background: #0f62fe;
}

.about-overview-premium-A .overview-card-A:hover,
.about-org-premium-A .org-card-A:hover {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
}

.about-timeline-premium-A .timeline-A-content {
  border-left: 4px solid #0f62fe;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.about-timeline-premium-A .timeline-A-year {
  background: linear-gradient(135deg, #0f62fe, #1e3a8a);
}

.about-partner-premium-A .partner-card-A {
  min-height: 78px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  box-shadow: 0 8px 20px rgba(15,98,254,0.07);
  color: #111827;
}

.about-partner-premium-A .partner-card-A:hover {
  background: #eff6ff;
  color: #0f62fe;
}

.partner-logo-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.partner-logo-card-A {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,98,254,0.07);
}

.partner-logo-card-A img {
  max-width: 100%;
  max-height: 54px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .partner-logo-grid-A {
    grid-template-columns: 1fr;
  }

  .about-overview-premium-A .overview-card-A:hover,
  .about-org-premium-A .org-card-A:hover {
    transform: none;
  }
}



/* =========================================================
   About Image Ready Upgrade A
   Purpose: 회사소개 히어로/CEO 사진/파트너 로고 이미지 교체 구조 확정
   Added: 2026-05-14
   ========================================================= */

/* 교체 위치: img/hero/about-hero.jpg */
.about-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(15,23,42,0.92), rgba(30,58,138,0.74)),
    url("img/hero/about-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

/* CEO 사진 사용 위치: img/company/ceo.jpg */
.ceo-profile-photo-bg-A {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(15,23,42,0.18), rgba(15,23,42,0.86)),
    url("img/company/ceo.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  justify-content: flex-end;
  min-height: 420px;
}

.ceo-profile-photo-bg-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(15,23,42,0.88) 100%);
  pointer-events: none;
}

.ceo-profile-photo-bg-A span,
.ceo-profile-photo-bg-A h3,
.ceo-profile-photo-bg-A p {
  position: relative;
  z-index: 1;
}

.ceo-profile-photo-bg-A::after {
  display: none;
}

/* CEO 사진이 없을 때 기존 고급 카드형 유지 */
.ceo-profile-no-photo-A {
  background:
    radial-gradient(circle at 80% 16%, rgba(96,165,250,0.22), transparent 34%),
    linear-gradient(135deg, #0f172a, #1e3a8a) !important;
}

.ceo-profile-no-photo-A::before {
  content: "CEO";
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

/* 파트너 로고 사용 위치: img/partners/ */
.partner-logo-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.partner-logo-card-A {
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #ffffff;
  border: 1px solid #dbeafe;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(15,98,254,0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.partner-logo-card-A:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15,23,42,0.12);
}

.partner-logo-card-A img {
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  display: block;
}

@media (max-width: 900px) {
  .ceo-profile-photo-bg-A {
    min-height: 360px;
  }

  .partner-logo-grid-A {
    grid-template-columns: 1fr;
  }

  .partner-logo-card-A:hover {
    transform: none;
  }
}



/* =========================================================
   CEO + Partner Logo Enable Upgrade A
   Purpose: CEO 이미지 및 파트너 로고 실제 표시 활성화
   Added: 2026-05-14
   ========================================================= */

.ceo-profile-photo-bg-A {
  min-height: 480px;
}

.partner-logo-card-A {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.partner-logo-card-A img {
  filter: saturate(1.02);
}


/* =========================================================
   Solutions Two Pillar Premium Upgrade A
   Purpose: Tridium Niagara / LG BECON 중심 솔루션 페이지 재구성
   Added: 2026-05-14
   ========================================================= */
.solutions-hero-visual-A{position:relative;overflow:hidden;background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(30,58,138,.76)),url("img/hero/solutions-hero.jpg");background-size:cover;background-position:center}
.solutions-hero-visual-A .hero-A-container{position:relative;z-index:1}
.solution-pillar-grid-A{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.solution-pillar-card-A{position:relative;overflow:hidden;display:block;min-height:300px;padding:36px;border-radius:28px;text-decoration:none;color:#fff;box-shadow:0 18px 42px rgba(15,23,42,.18);transition:transform .22s ease,box-shadow .22s ease}
.solution-pillar-card-A.dark-A{background:linear-gradient(135deg,#0f172a,#1f2937)}
.solution-pillar-card-A.blue-A{background:linear-gradient(135deg,#0f62fe,#1e3a8a)}
.solution-pillar-card-A:hover{transform:translateY(-6px);box-shadow:0 24px 52px rgba(15,23,42,.24)}
.solution-pillar-card-A span{display:block;margin-bottom:18px;color:#bfdbfe;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.solution-pillar-card-A h3{margin:0 0 18px;font-size:30px;line-height:1.25}
.solution-pillar-card-A p{margin:0;color:rgba(255,255,255,.86);font-size:16px;line-height:1.8;word-break:keep-all}
.solution-pillar-card-A em{display:block;margin-top:24px;color:#fff;font-style:normal;font-weight:800;line-height:1.6;word-break:keep-all}
.solution-detail-premium-A{padding:78px 20px;background:#fff}
.solution-detail-premium-A.is-soft-A{background:#f5f7fa}
.solution-detail-header-A{max-width:900px;margin-bottom:34px}
.solution-detail-header-A p{margin:0 0 10px;color:#0f62fe;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.solution-detail-header-A h2{margin:0 0 16px;color:#111827;font-size:38px;line-height:1.25;letter-spacing:-.02em;word-break:keep-all}
.solution-detail-header-A div{color:#4b5563;font-size:16px;line-height:1.85;word-break:keep-all}
.solution-feature-grid-A,.becon-module-grid-A{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.solution-feature-card-A,.becon-module-card-A{background:#fff;border:1px solid #dbeafe;border-radius:24px;padding:30px;box-shadow:0 10px 26px rgba(15,23,42,.08);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.solution-feature-card-A:hover,.becon-module-card-A:hover{transform:translateY(-5px);border-color:#0f62fe;box-shadow:0 18px 42px rgba(15,23,42,.13)}
.solution-feature-card-A span,.becon-module-card-A span{display:block;margin-bottom:14px;color:#0f62fe;font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.solution-feature-card-A h3,.becon-module-card-A h3{margin:0 0 14px;color:#111827;font-size:24px;line-height:1.35;word-break:keep-all}
.solution-feature-card-A p,.becon-module-card-A p,.becon-module-card-A li{color:#4b5563;font-size:15px;line-height:1.8;word-break:keep-all}
.becon-module-card-A ul{margin:18px 0 0;padding-left:20px}
.becon-module-card-A.featured-A{background:linear-gradient(135deg,#0f172a,#1e3a8a);color:#fff}
.becon-module-card-A.featured-A span{color:#bfdbfe}.becon-module-card-A.featured-A h3,.becon-module-card-A.featured-A p,.becon-module-card-A.featured-A li{color:#fff}
.solution-protocol-strip-A{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.solution-protocol-strip-A span{padding:11px 15px;border-radius:999px;background:#eff6ff;border:1px solid #dbeafe;color:#0f62fe;font-weight:800}
.solution-application-A{background:linear-gradient(135deg,#0f172a,#1e3a8a)}
.solution-app-grid-A{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.solution-app-grid-A div{padding:18px;border-radius:18px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#fff;font-weight:800;text-align:center;word-break:keep-all}
@media(max-width:1000px){.solution-feature-grid-A,.becon-module-grid-A,.solution-app-grid-A{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.solution-pillar-grid-A,.solution-feature-grid-A,.becon-module-grid-A,.solution-app-grid-A{grid-template-columns:1fr}.solution-detail-premium-A{padding:56px 16px}.solution-pillar-card-A{min-height:auto;padding:28px}.solution-detail-header-A h2{font-size:29px}.solution-pillar-card-A:hover,.solution-feature-card-A:hover,.becon-module-card-A:hover{transform:none}}


/* =========================================================
   Projects Dropdown + Detail Pages Upgrade A
   Purpose: 주요실적 세부메뉴, 대표 프로젝트 카드, 세부 실적 페이지
   Added: 2026-05-15
   ========================================================= */
.header-A-dropdown{position:relative;display:flex;align-items:center}
.header-A-dropdown-main{display:inline-flex;align-items:center;gap:6px}
.header-A-dropdown-main::after{content:"▾";font-size:10px;opacity:.7}
.header-A-dropdown-menu{position:absolute;top:100%;left:50%;transform:translate(-50%,12px);min-width:220px;padding:10px;background:#fff;border:1px solid rgba(15,23,42,.10);border-radius:16px;box-shadow:0 18px 44px rgba(15,23,42,.18);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;z-index:50}
.header-A-dropdown:hover .header-A-dropdown-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,6px)}
.header-A-dropdown-menu a{display:block;padding:11px 13px;border-radius:10px;color:#1f2937;font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap}
.header-A-dropdown-menu a:hover{background:#eff6ff;color:#0f62fe}
.projects-sub-hero-A{background:linear-gradient(135deg,rgba(15,23,42,.94),rgba(30,58,138,.80)),url("img/hero/index-hero.jpg");background-size:cover;background-position:center}
.project-photo-grid-A{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.project-photo-card-A{overflow:hidden;background:#fff;border:1px solid #dbeafe;border-radius:26px;box-shadow:0 14px 34px rgba(15,23,42,.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.project-photo-card-A:hover{transform:translateY(-6px);border-color:#0f62fe;box-shadow:0 22px 48px rgba(15,23,42,.16)}
.project-photo-card-A img{width:100%;height:210px;object-fit:cover;display:block;background:#e5e7eb}
.project-photo-card-A div{padding:24px}
.project-photo-card-A span{display:block;margin-bottom:10px;color:#0f62fe;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.project-photo-card-A h3{margin:0 0 12px;color:#111827;font-size:22px;line-height:1.35;word-break:keep-all}
.project-photo-card-A p{margin:0;color:#4b5563;font-size:15px;line-height:1.75;word-break:keep-all}
@media(max-width:900px){.header-A-dropdown{display:block}.header-A-dropdown-main::after{content:""}.header-A-dropdown-menu{position:static;transform:none;min-width:0;margin:4px 0 8px 12px;padding:4px;background:transparent;border:0;box-shadow:none;opacity:1;visibility:visible;pointer-events:auto}.header-A-dropdown:hover .header-A-dropdown-menu{transform:none}.header-A-dropdown-menu a{padding:8px 10px;font-size:13px;background:rgba(15,98,254,.06)}.project-photo-grid-A{grid-template-columns:1fr}.project-photo-card-A:hover{transform:none}.project-photo-card-A img{height:220px}}

/* =========================================================
   Header JS Active State A
   Purpose: header.js 적용 페이지의 현재 메뉴 표시
   Added: 2026-05-15
   ========================================================= */
.header-A-nav a.is-active-A,
.header-A-dropdown-main.is-active-A {
  color: #ffffff;
  font-weight: 800;
}

@media (min-width: 769px) {
  .header-A-nav a.is-active-A,
  .header-A-dropdown-main.is-active-A {
    position: relative;
  }

  .header-A-nav a.is-active-A::after,
  .header-A-dropdown-main.is-active-A::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: #f97316;
  }
}

/* =========================================================
   Header Dropdown Stability Fix A
   Purpose: 주요실적 드롭다운 이동 중 사라짐 방지 및 active 화살표 유지
   Added: 2026-05-15
   ========================================================= */
@media (min-width: 901px) {
  .header-A-dropdown {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* 메뉴와 드롭다운 사이의 빈 공간을 hover 영역으로 연결 */
  .header-A-dropdown::before {
    content: "";
    position: absolute;
    left: -24px;
    right: -24px;
    top: 100%;
    height: 18px;
    display: block;
  }

  .header-A-dropdown-menu {
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 6px);
    z-index: 3000;
  }

  .header-A-dropdown:hover .header-A-dropdown-menu,
  .header-A-dropdown:focus-within .header-A-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  /* 주요실적이 active 상태일 때도 화살표는 유지 */
  .header-A-dropdown-main.is-active-A::after {
    content: "▾";
    position: static;
    display: inline-block;
    width: auto;
    height: auto;
    margin-left: 6px;
    background: transparent;
    border-radius: 0;
    opacity: .7;
    font-size: 10px;
  }
}

/* =========================================================
   Header Dropdown Active Text Fix A
   Purpose: 드롭다운 세부메뉴 선택 시 흰색 글씨로 보이지 않는 문제 수정
   Added: 2026-05-15
   ========================================================= */
.header-A-dropdown-menu a.is-active-A {
  color: #0f172a !important;
  background: #eff6ff;
  font-weight: 900;
}

.header-A-dropdown-menu a.is-active-A:hover {
  color: #0f62fe !important;
  background: #dbeafe;
}

@media (min-width: 769px) {
  .header-A-dropdown-menu a.is-active-A::after {
    content: none !important;
  }
}


/* =========================================================
   Business Submenu & Detail Pages A
   Added: 2026-05-15
   ========================================================= */
.business-detail-A .business-detail-A {
  padding: 0;
  background: transparent;
}
.business-detail-A .business-detail-A + .business-detail-A {
  margin-top: 32px;
}
.business-detail-A.is-soft-A {
  border-radius: 28px;
}
.header-A-dropdown-menu a[href^="business-"] {
  min-width: 190px;
}
@media (max-width: 900px) {
  .header-A-dropdown-menu a[href^="business-"] {
    min-width: 0;
  }
}


/* =========================================================
   Solution Submenu & Detail Pages A
   Added: 2026-05-15
   ========================================================= */
.header-A-dropdown-menu a[href^="solution-"] {
  min-width: 210px;
}
@media (max-width: 900px) {
  .header-A-dropdown-menu a[href^="solution-"] {
    min-width: 0;
  }
}


/* =========================================================
   문의·A/S 접수 페이지 보정 CSS
   ========================================================= */
.contact-support-hero-A .button-primary-A {
  margin-top: 22px;
}

.support-type-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 42px;
}

.support-type-card-A {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 28px 24px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06);
}

.support-type-card-A span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef5ff;
  color: #1261d6;
  font-weight: 800;
  margin-bottom: 18px;
}

.support-type-card-A h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #111827;
}

.support-type-card-A p {
  color: #64748b;
  line-height: 1.65;
}

.support-type-card-A.featured-A {
  background: linear-gradient(135deg, #0f172a, #d9480f);
  color: #fff;
}

.support-type-card-A.featured-A h3,
.support-type-card-A.featured-A p {
  color: #fff;
}

.support-type-card-A.featured-A span {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.support-layout-A {
  align-items: flex-start;
}

.support-contact-box-A {
  margin-top: 28px;
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.support-contact-box-A h3 {
  margin-bottom: 12px;
  color: #0f172a;
}

.support-contact-box-A p {
  margin: 6px 0;
  color: #475569;
}

.support-form-card-A {
  background: #fff;
  border-radius: 26px;
  padding: 34px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
  border: 1px solid rgba(15, 23, 42, 0.08);
}

.support-form-row-A {
  margin-bottom: 18px;
}

.support-form-row-A.two-col-A {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.support-form-card-A label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1f2937;
}

.support-form-card-A input,
.support-form-card-A select,
.support-form-card-A textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d7dde8;
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  color: #111827;
  background: #f8fafc;
  box-sizing: border-box;
}

.support-form-card-A textarea {
  resize: vertical;
  min-height: 180px;
}

.support-agree-A {
  display: flex !important;
  gap: 10px;
  align-items: center;
  margin: 12px 0 24px;
  color: #475569 !important;
  font-weight: 500 !important;
}

.support-agree-A input {
  width: auto;
  margin: 0;
}

.support-form-actions-A {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 960px) {
  .support-type-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-form-row-A.two-col-A {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .support-type-grid-A {
    grid-template-columns: 1fr;
  }

  .support-form-card-A {
    padding: 24px 18px;
  }

  .support-form-actions-A {
    flex-direction: column;
  }

  .support-form-actions-A a,
  .support-form-actions-A button {
    width: 100%;
    text-align: center;
  }
}


/* =========================================================
   Mobile Accordion Menu Rebuild
   Purpose: 모바일에서는 1차 메뉴만 먼저 보이고, 세부 메뉴는 클릭 시 펼침
   ========================================================= */
@media (max-width: 768px) {
  body:has(#menu-toggle-A:checked) {
    overflow: hidden;
  }

  .header-A {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #0f172a;
  }

  .header-A-container {
    position: relative;
    min-height: 72px;
    padding: 0 18px;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  .header-A-logo {
    position: relative;
    z-index: 10002;
  }

  .header-A-logo img {
    max-height: 38px;
    width: auto;
  }

  .header-A-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    position: relative;
    z-index: 10002;
    border-radius: 12px;
    background: rgba(255,255,255,0.14);
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
  }

  .header-A-toggle:checked + .header-A-hamburger {
    font-size: 0;
  }

  .header-A-toggle:checked + .header-A-hamburger::before {
    content: "×";
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
  }

  .header-A-nav {
    display: none !important;
  }

  .header-A-toggle:checked ~ .header-A-nav {
    display: flex !important;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    padding: 96px 28px 28px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow-y: auto;
    background: linear-gradient(180deg, #0f172a 0%, #111827 62%, #0b1120 100%);
    z-index: 10000;
  }

  .header-A-nav > a,
  .header-A-dropdown-main {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 0 2px !important;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    color: #ffffff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    text-decoration: none;
  }

  .header-A-nav > a:hover,
  .header-A-dropdown-main:hover {
    color: #ffffff !important;
    background: transparent !important;
  }

  .header-A-dropdown {
    width: 100%;
    position: static !important;
  }

  .header-A-dropdown-main::after {
    content: "+";
    color: #ff6b35;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
  }

  .header-A-dropdown.is-open-A .header-A-dropdown-main::after {
    content: "−";
  }

  .header-A-dropdown-menu {
    display: none !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 18px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
  }

  .header-A-dropdown.is-open-A .header-A-dropdown-menu {
    display: flex !important;
    flex-direction: column;
    gap: 0;
  }

  .header-A-dropdown-menu a {
    display: block !important;
    padding: 13px 0 !important;
    border-radius: 0 !important;
    color: rgba(255,255,255,0.72) !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    white-space: normal !important;
  }

  .header-A-dropdown-menu a:hover,
  .header-A-dropdown-menu a.is-active-A {
    color: #ff6b35 !important;
    background: transparent !important;
  }

  .header-A-cta {
    display: none !important;
  }

  .header-A-toggle:checked ~ .header-A-cta {
    display: none !important;
  }
}

/* =========================================================
   Spacious Layout Balance Upgrade A
   Purpose: 섹션 간/좌우 여백의 휑한 느낌 완화
   Added: 2026-05-16
   ========================================================= */
:root {
  --webs-wide-container-A: 1280px;
  --webs-section-x-A: 28px;
}

.hero-A-container,
.section-A-container,
.sales-section-A-title,
.project-detail-A-container,
.about-container-A,
.business-container-A,
.business-detail-A-container,
.solutions-container-A,
.solution-detail-container-A,
.projects-container-A,
.projects-table-container-A,
.cert-container-A,
.contact-page-container-A,
.cta-sales-A-container,
.footer-A-container,
.header-A-container {
  max-width: var(--webs-wide-container-A);
}

.section-A,
.about-section-A,
.project-detail-A,
.business-section-A,
.business-detail-A,
.solutions-section-A,
.solution-detail-A,
.projects-section-A,
.projects-table-section-A,
.cert-section-A,
.contact-page-section-A {
  position: relative;
  padding-left: var(--webs-section-x-A);
  padding-right: var(--webs-section-x-A);
}

.section-A,
.about-section-A,
.project-detail-A,
.cert-section-A,
.contact-page-section-A {
  padding-top: 72px;
  padding-bottom: 72px;
}

.about-section-A,
.section-A,
.project-detail-A {
  background-image:
    radial-gradient(circle at 8% 18%, rgba(15,98,254,0.045), transparent 28%),
    radial-gradient(circle at 92% 78%, rgba(30,58,138,0.055), transparent 30%);
}

.about-section-A.is-soft-A,
.business-section-A.is-soft-A,
.business-detail-A.is-soft-A,
.projects-section-A.is-soft-A,
.projects-table-section-A.is-soft-A,
.cert-section-A.is-soft-A,
.contact-page-section-A.is-soft-A {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(245,247,250,0.95)),
    radial-gradient(circle at 10% 20%, rgba(15,98,254,0.06), transparent 30%),
    radial-gradient(circle at 90% 72%, rgba(30,58,138,0.06), transparent 28%);
}

.about-section-title-A,
.sales-section-A-title {
  margin-bottom: 38px;
}

.index-service-compact-A,
.index-project-compact-A,
.index-cert-compact-A {
  gap: 24px;
}

.index-service-compact-card-A,
.index-project-compact-card-A {
  min-height: 172px;
  padding: 30px !important;
  border-radius: 22px !important;
}

.index-cert-compact-A a {
  min-height: 86px;
  padding: 18px !important;
  border-radius: 18px !important;
}

.card-basic-A,
.card-basic-B,
.card-project-A,
.card-highlight-A,
.card-pricing-A,
.project-detail-A-card,
.business-card-A,
.solution-card-A,
.cert-card-A,
.contact-info-card-A {
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(15,23,42,0.09);
}

.card-basic-A,
.card-highlight-A,
.project-detail-A-card,
.business-card-A,
.solution-card-A,
.cert-card-A,
.contact-info-card-A {
  padding: 34px;
}

.philosophy-card-A {
  padding: 42px !important;
  border-radius: 24px !important;
  box-shadow: 0 22px 48px rgba(15,23,42,0.16) !important;
}

@media (max-width: 1100px) {
  :root {
    --webs-section-x-A: 22px;
  }

  .section-A,
  .about-section-A,
  .project-detail-A,
  .cert-section-A,
  .contact-page-section-A {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

@media (max-width: 700px) {
  :root {
    --webs-section-x-A: 18px;
  }

  .section-A,
  .about-section-A,
  .project-detail-A,
  .cert-section-A,
  .contact-page-section-A {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .index-service-compact-A,
  .index-project-compact-A,
  .index-cert-compact-A {
    gap: 16px;
  }

  .index-service-compact-card-A,
  .index-project-compact-card-A {
    min-height: auto;
    padding: 24px !important;
  }

  .philosophy-card-A {
    padding: 30px !important;
  }
}

/* =========================================================
   Hero Style Option 2 Unified Upgrade A
   Purpose: 모든 페이지 히어로를 이미지 준비형 프리미엄 다크 톤으로 통일
   Added: 2026-05-16
   Notes: 신규 이미지 생성/삽입 없이 기존 구조와 파일명을 유지합니다.
   ========================================================= */

.hero-A {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 360px;
  padding: 92px 20px 76px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(31, 41, 55, 0.88)) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.hero-A::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.13), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(148, 163, 184, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.08) 58%, rgba(15, 23, 42, 0.30));
  pointer-events: none;
}

.hero-A::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.22;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  pointer-events: none;
}

.hero-A-container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-A-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-A-label::before {
  content: "";
  width: 34px;
  height: 1px;
  background: rgba(226, 232, 240, 0.62);
}

.hero-A h1 {
  max-width: 920px;
  margin: 0 0 20px;
  color: #ffffff;
  font-size: clamp(38px, 4.6vw, 56px);
  line-height: 1.14;
  letter-spacing: -0.04em;
  word-break: keep-all;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.hero-A-description {
  max-width: 760px;
  margin: 0 0 30px;
  color: rgba(241, 245, 249, 0.86);
  font-size: 18px;
  line-height: 1.78;
  word-break: keep-all;
}

.index-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.93), rgba(31, 41, 55, 0.80)),
    url("img/hero/index-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

.about-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.93), rgba(31, 41, 55, 0.80)),
    url("img/hero/about-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

.projects-sub-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.94), rgba(31, 41, 55, 0.82)),
    url("img/hero/index-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

.contact-support-hero-A,
.certificates-hero-A {
  background:
    radial-gradient(circle at 78% 22%, rgba(148, 163, 184, 0.18), transparent 28%),
    linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(31, 41, 55, 0.90)) !important;
}

.hero-A .button-primary-A {
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

@media (max-width: 768px) {
  .hero-A {
    min-height: 300px;
    padding: 72px 18px 58px;
  }

  .hero-A h1 {
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: -0.03em;
  }

  .hero-A-description {
    font-size: 16px;
    line-height: 1.7;
  }

  .hero-A-label {
    font-size: 12px;
    letter-spacing: 0.09em;
  }

  .hero-A-label::before {
    width: 24px;
  }
}

/* ===== Premium Depth Upgrade ===== */
.section-A,
.section-B,
.section-C {
  position: relative;
  overflow: hidden;
}

.section-A:nth-of-type(even),
.section-B:nth-of-type(even),
.section-C:nth-of-type(even) {
  background: linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%);
}

.section-A:nth-of-type(odd),
.section-B:nth-of-type(odd),
.section-C:nth-of-type(odd) {
  background: #ffffff;
}

.section-A::before,
.section-B::before,
.section-C::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15,98,254,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,98,254,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

.section-A-container,
.section-B-container,
.section-C-container {
  position: relative;
  z-index: 1;
}

.card-basic-A,
.card-basic-B,
.card-project-A,
.card-highlight-A {
  position: relative;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  overflow: hidden;
}

.card-basic-A::before,
.card-basic-B::before,
.card-project-A::before,
.card-highlight-A::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,#2563eb,#60a5fa,#93c5fd);
  opacity: 0.9;
}

.card-basic-A::after,
.card-basic-B::after,
.card-project-A::after,
.card-highlight-A::after {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 70%);
  pointer-events: none;
}

.card-basic-A:hover,
.card-basic-B:hover,
.card-project-A:hover,
.card-highlight-A:hover {
  transform: translateY(-8px);
  box-shadow: 0 22px 48px rgba(15,23,42,0.18);
  border-color: rgba(96,165,250,0.35);
}

.sales-section-A-title h2,
.section-title-B h2,
.section-title-C h2 {
  position: relative;
  display: inline-block;
  padding-left: 18px;
  letter-spacing: -0.03em;
}

.sales-section-A-title h2::before,
.section-title-B h2::before,
.section-title-C h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 78%;
  border-radius: 999px;
  background: linear-gradient(180deg,#2563eb,#60a5fa);
}

.hero-A {
  position: relative;
  overflow: hidden;
}

.hero-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(96,165,250,0.18), transparent 34%);
  pointer-events: none;
}

.hero-A::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.35;
  pointer-events: none;
}

.hero-A-container {
  position: relative;
  z-index: 1;
}

.button-primary-A {
  box-shadow: 0 10px 24px rgba(37,99,235,0.32);
}

.button-primary-A:hover {
  box-shadow: 0 16px 32px rgba(37,99,235,0.42);
}

/* =========================================================
   PREMIUM TECH CARD UPGRADE - added by ControlWebPro
   Purpose: Reduce flat white-box feeling with depth, texture, glow and hierarchy
   ========================================================= */
:root {
  --webs-blue-A: #0f62fe;
  --webs-blue-soft-A: rgba(15, 98, 254, 0.12);
  --webs-navy-A: #0f172a;
  --webs-card-border-A: rgba(37, 99, 235, 0.18);
  --webs-card-shadow-A: 0 18px 46px rgba(15, 23, 42, 0.10);
  --webs-card-shadow-hover-A: 0 26px 60px rgba(15, 23, 42, 0.16);
}

.about-section-A,
.cert-section-A {
  position: relative;
  overflow: hidden;
}

.about-section-A::before,
.cert-section-A::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 98, 254, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 98, 254, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 16% 18%, rgba(15, 98, 254, 0.06), transparent 28%),
    radial-gradient(circle at 86% 72%, rgba(30, 64, 175, 0.05), transparent 30%);
  background-size: 44px 44px, 44px 44px, auto, auto;
  opacity: 0.7;
}

.about-section-A.is-soft-A,
.cert-section-A.is-soft-A {
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.about-container-A,
.cert-container-A {
  position: relative;
  z-index: 1;
}

.about-section-title-A,
.cert-title-A {
  position: relative;
  padding-left: 18px;
}

.about-section-title-A::before,
.cert-title-A::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 5px;
  height: 58px;
  border-radius: 999px;
  background: linear-gradient(180deg, #0f62fe, #7dd3fc);
  box-shadow: 0 0 22px rgba(15, 98, 254, 0.32);
}

.overview-card-A,
.org-card-A,
.timeline-A-content,
.partner-logo-card-A,
.company-photo-card-A,
.cert-summary-card-A,
.cert-card-A,
.cert-text-A,
.cert-image-placeholder-A {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--webs-card-border-A);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 255, 0.94));
  box-shadow: var(--webs-card-shadow-A);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background 0.28s ease;
}

.overview-card-A::before,
.org-card-A::before,
.timeline-A-content::before,
.partner-logo-card-A::before,
.company-photo-card-A::before,
.cert-summary-card-A::before,
.cert-card-A::before,
.cert-text-A::before,
.cert-image-placeholder-A::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 0;
  height: 4px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, #0f62fe, #38bdf8, #60a5fa);
  box-shadow: 0 0 24px rgba(15, 98, 254, 0.38);
  z-index: -1;
}

.overview-card-A::after,
.org-card-A::after,
.timeline-A-content::after,
.cert-summary-card-A::after,
.cert-card-A::after,
.cert-text-A::after {
  content: "";
  position: absolute;
  right: -42px;
  bottom: -42px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(15, 98, 254, 0.10), transparent 64%);
  z-index: -2;
}

.overview-card-A:hover,
.org-card-A:hover,
.timeline-A-content:hover,
.partner-logo-card-A:hover,
.company-photo-card-A:hover,
.cert-summary-card-A:hover,
.cert-card-A:hover,
.cert-text-A:hover,
.cert-image-placeholder-A:hover {
  transform: translateY(-7px);
  border-color: rgba(15, 98, 254, 0.38);
  box-shadow: var(--webs-card-shadow-hover-A);
}

.overview-card-A span,
.org-card-A span,
.cert-summary-card-A span,
.cert-card-A span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 26px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(15, 98, 254, 0.08);
  color: #0f62fe;
  letter-spacing: 0.02em;
}

.overview-card-A span::before,
.org-card-A span::before,
.cert-summary-card-A span::before,
.cert-card-A span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f62fe;
  box-shadow: 0 0 12px rgba(15, 98, 254, 0.55);
}

.overview-card-A strong,
.org-card-A strong,
.cert-summary-card-A h3,
.cert-card-A h3,
.timeline-A-content h3 {
  letter-spacing: -0.025em;
}

.timeline-A::before {
  width: 3px;
  background: linear-gradient(180deg, #0f62fe, #93c5fd, rgba(147, 197, 253, 0.15));
  box-shadow: 0 0 18px rgba(15, 98, 254, 0.24);
}

.timeline-A-year {
  background: linear-gradient(135deg, #0f62fe, #1e40af);
  box-shadow:
    0 12px 28px rgba(15, 98, 254, 0.30),
    0 0 0 8px rgba(15, 98, 254, 0.08);
}

.timeline-A-content {
  border-left: 4px solid rgba(15, 98, 254, 0.72);
}

.org-card-A {
  min-height: 184px;
}

.org-card-A span {
  font-size: 12px;
}

.org-card-A strong {
  font-size: 21px;
}

.cert-summary-card-A.featured-A,
.cert-highlight-A,
.cert-list-panel-A,
.cert-list-panel-A.blue-A,
.philosophy-card-A {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(96, 165, 250, 0.28), transparent 32%),
    linear-gradient(135deg, #0b1220 0%, #102a68 55%, #0f62fe 125%);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.24);
}

.cert-summary-card-A.featured-A::after,
.cert-highlight-A::after,
.cert-list-panel-A::after,
.philosophy-card-A::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.9), transparent 78%);
}

.cert-image-placeholder-A {
  border-style: solid;
  min-height: 188px;
}

@media (max-width: 768px) {
  .about-section-title-A,
  .cert-title-A {
    padding-left: 14px;
  }

  .about-section-title-A::before,
  .cert-title-A::before {
    height: 44px;
  }

  .overview-card-A,
  .org-card-A,
  .timeline-A-content,
  .cert-summary-card-A,
  .cert-card-A,
  .cert-text-A,
  .cert-image-placeholder-A {
    border-radius: 20px;
  }

  .overview-card-A:hover,
  .org-card-A:hover,
  .timeline-A-content:hover,
  .cert-summary-card-A:hover,
  .cert-card-A:hover {
    transform: translateY(-4px);
  }
}

/* =========================================================
   Index Solution Summary A
   Purpose: index.html에서 대표수행실적/인증 섹션을 제외하고 솔루션 요약 섹션 추가
========================================================= */
.index-solution-grid-A {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 34px;
}

.index-solution-card-A {
  position: relative;
  display: block;
  min-height: 220px;
  padding: 34px 34px 32px;
  border-radius: 24px;
  text-decoration: none;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,0.22), transparent 34%),
    linear-gradient(135deg, #0f172a, #1e3a8a);
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 44px rgba(15,23,42,0.16);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.index-solution-card-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .28;
  pointer-events: none;
}

.index-solution-card-A::after {
  content: "";
  position: absolute;
  left: 34px;
  right: 34px;
  top: 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0f62fe, #60a5fa, #93c5fd);
  box-shadow: 0 0 18px rgba(96,165,250,.42);
}

.index-solution-card-A span,
.index-solution-card-A h3,
.index-solution-card-A p {
  position: relative;
  z-index: 1;
}

.index-solution-card-A span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 28px;
  border-radius: 999px;
  color: #dbeafe;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 13px;
  font-weight: 900;
}

.index-solution-card-A h3 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.04em;
}

.index-solution-card-A p {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  line-height: 1.75;
}

.index-solution-card-A:hover {
  transform: translateY(-8px);
  border-color: rgba(147,197,253,0.5);
  box-shadow: 0 26px 60px rgba(15,23,42,0.24);
}

@media (max-width: 900px) {
  .index-solution-grid-A {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .index-solution-card-A {
    min-height: auto;
    padding: 28px 24px;
  }

  .index-solution-card-A h3 {
    font-size: 20px;
  }
}

/* =========================================================
   Business Detail Premium Upgrade B
   Purpose: 사업분야 세부메뉴 6개 페이지 전용 업그레이드
   Added: 2026-05-16
========================================================= */
.business-hero-premium-A {
  min-height: 430px;
  background:
    linear-gradient(135deg, rgba(10, 18, 32, 0.96), rgba(30, 41, 59, 0.84)),
    url("img/hero/index-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
}

.business-hero-grid-A {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 44px;
  align-items: center;
}

.business-hero-card-A {
  position: relative;
  padding: 28px 28px 26px;
  border-radius: 26px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 24px 64px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.business-hero-card-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 6%, rgba(96,165,250,.32), transparent 32%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: auto, 24px 24px, 24px 24px;
  opacity: .7;
  pointer-events: none;
}

.business-hero-card-A p,
.business-hero-card-A ul {
  position: relative;
  z-index: 1;
}

.business-hero-card-A p {
  margin: 0 0 16px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
}

.business-hero-card-A ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.business-hero-card-A li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  color: rgba(255,255,255,.90);
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.business-hero-card-A li:last-child { border-bottom: 0; }
.business-hero-card-A li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #60a5fa;
  box-shadow: 0 0 16px rgba(96,165,250,.75);
  flex: 0 0 auto;
}

.business-premium-section-A {
  padding-top: 78px;
  padding-bottom: 80px;
  background:
    radial-gradient(circle at 8% 10%, rgba(59,130,246,.07), transparent 30%),
    radial-gradient(circle at 94% 42%, rgba(15,23,42,.06), transparent 30%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 42%, #f6f9fc 100%);
}

.business-premium-title-A {
  margin-bottom: 42px;
}

.business-premium-block-A {
  padding: 0 !important;
  margin: 28px 0;
  background: transparent !important;
}

.business-premium-grid-A {
  gap: 28px !important;
  align-items: stretch !important;
}

.business-premium-text-A {
  position: relative;
  overflow: hidden;
  min-height: auto;
  border: 1px solid rgba(148,163,184,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.96)) !important;
}

.business-premium-text-A::after {
  content: "";
  position: absolute;
  right: -64px;
  bottom: -64px;
  width: 210px;
  height: 210px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(59,130,246,.13), transparent 64%);
  pointer-events: none;
}

.business-badge-row-A {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

.business-badge-row-A span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(15,98,254,.08);
  color: #1e3a8a;
  font-size: 13px;
  font-weight: 800;
  border: 1px solid rgba(59,130,246,.14);
}

.business-premium-panel-A {
  position: relative;
  min-height: auto;
  padding: 30px 34px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 10%, rgba(96,165,250,.22), transparent 30%),
    linear-gradient(135deg, #0f172a, #1e293b) !important;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 22px 52px rgba(15,23,42,.18) !important;
  overflow: hidden;
}

.business-premium-panel-A::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .28;
  pointer-events: none;
}

.business-panel-top-A,
.business-premium-panel-A ul,
.business-mini-metrics-A {
  position: relative;
  z-index: 1;
}

.business-panel-top-A {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.business-panel-top-A span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #dbeafe;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  font-weight: 900;
}

.business-panel-top-A h3 {
  margin: 0;
  color: #ffffff;
  font-size: 21px;
  letter-spacing: -0.04em;
}

.business-premium-panel-A ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.business-premium-panel-A li {
  position: relative;
  margin: 0;
  padding: 10px 0 10px 20px;
  color: rgba(241,245,249,.88);
  font-size: 15px;
  line-height: 1.62;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.business-premium-panel-A li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 19px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #60a5fa;
}

.business-premium-panel-A li:last-child { border-bottom: 0; }

.business-mini-metrics-A {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 24px;
}

.business-mini-metrics-A div {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
}

.business-mini-metrics-A strong {
  display: block;
  margin-bottom: 5px;
  color: #bfdbfe;
  font-size: 13px;
  letter-spacing: .08em;
}

.business-mini-metrics-A span {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
}

.business-cta-premium-A {
  background:
    radial-gradient(circle at 14% 20%, rgba(96,165,250,.16), transparent 30%),
    linear-gradient(135deg, #111827, #1f2937) !important;
  color: #ffffff;
}

.business-cta-premium-A .business-eyebrow-A {
  margin: 0 0 10px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .13em;
}

.business-cta-premium-A h2,
.business-cta-premium-A p { color: #ffffff; }
.business-cta-premium-A p { color: rgba(255,255,255,.78); }

@media (max-width: 980px) {
  .business-hero-grid-A {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .business-hero-card-A { max-width: 520px; }
}

@media (max-width: 768px) {
  .business-hero-premium-A { min-height: 360px; }
  .business-hero-card-A { display: none; }
  .business-premium-section-A {
    padding-top: 58px;
    padding-bottom: 60px;
  }
  .business-premium-block-A { margin: 18px 0; }
  .business-premium-text-A,
  .business-premium-panel-A {
    min-height: auto;
    padding: 26px !important;
  }
  .business-mini-metrics-A { grid-template-columns: 1fr; }
}


/* =========================================================
   Business Detail System Diagram Area - 2026-05-16
   - 고객용 문구 교정 후 시스템 구성 이미지 삽입 자리 확보
   - 실제 이미지는 img/business/system-*.svg 파일명 그대로 교체
========================================================= */
.business-system-diagram-A {
  margin-top: 34px;
  padding: 34px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f5f8fd 100%);
  border: 1px solid rgba(15, 31, 56, 0.10);
  box-shadow: 0 18px 45px rgba(15, 31, 56, 0.08);
}
.business-system-diagram-head-A {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.business-system-diagram-head-A p {
  width: 100%;
  margin: 0 0 -8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .13em;
  color: #1267ff;
}
.business-system-diagram-head-A h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.25;
  color: #0f1f38;
}
.business-system-diagram-head-A span {
  font-size: 13px;
  font-weight: 700;
  color: #5b6a80;
  background: rgba(18,103,255,.08);
  border: 1px solid rgba(18,103,255,.16);
  padding: 8px 12px;
  border-radius: 999px;
}
.business-system-diagram-card-A {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(15, 31, 56, 0.12);
}
.business-system-diagram-card-A img {
  display: block;
  width: 100%;
  height: auto;
}
.business-system-guide-A {
  margin: 18px 0 0;
  padding-left: 18px;
  color: #4c5c72;
  font-size: 14px;
  line-height: 1.75;
}
.business-system-guide-A li + li { margin-top: 4px; }
@media (max-width: 768px) {
  .business-system-diagram-A { padding: 22px; border-radius: 20px; }
  .business-system-diagram-head-A h3 { font-size: 22px; }
  .business-system-diagram-head-A span { font-size: 12px; }
}


/* =========================================================
   Solution Detail Content + System Diagram Upgrade - 2026-05-16
   - Tridium Niagara / LG BECON 상세 내용 보강
   - 시스템 구성 이미지 삽입 자리 확보
========================================================= */
.solution-intro-upgrade-A {
  background:
    radial-gradient(circle at 88% 0%, rgba(15, 98, 254, .08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}
.solution-value-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}
.solution-value-grid-A div {
  min-height: 130px;
  padding: 24px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 98, 254, .14);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}
.solution-value-grid-A strong {
  display: block;
  margin-bottom: 10px;
  color: #0f1f38;
  font-size: 18px;
  line-height: 1.35;
  word-break: keep-all;
}
.solution-value-grid-A span {
  display: block;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.7;
  word-break: keep-all;
}
.solution-system-diagram-A {
  margin-top: 30px;
  padding: 34px;
  border-radius: 28px;
  background: linear-gradient(135deg, #ffffff 0%, #f6f9ff 100%);
  border: 1px solid rgba(15, 31, 56, .10);
  box-shadow: 0 18px 45px rgba(15, 31, 56, .08);
}
.solution-system-diagram-head-A {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.solution-system-diagram-head-A h3 {
  margin: 0;
  color: #0f1f38;
  font-size: 28px;
  line-height: 1.28;
  word-break: keep-all;
}
.solution-system-diagram-head-A span {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(15, 98, 254, .08);
  border: 1px solid rgba(15, 98, 254, .16);
  color: #31547f;
  font-size: 13px;
  font-weight: 800;
}
.solution-system-diagram-card-A {
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 31, 56, .12);
}
.solution-system-diagram-card-A img {
  display: block;
  width: 100%;
  height: auto;
}
.solution-image-guide-A {
  margin: 18px 0 0;
  padding-left: 18px;
  color: #4c5c72;
  font-size: 14px;
  line-height: 1.75;
  word-break: keep-all;
}
.solution-image-guide-A strong { color: #0f62fe; }
@media(max-width:1000px){
  .solution-value-grid-A { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width:768px){
  .solution-value-grid-A { grid-template-columns: 1fr; }
  .solution-system-diagram-A { padding: 22px; border-radius: 22px; }
  .solution-system-diagram-head-A h3 { font-size: 22px; }
  .solution-system-diagram-head-A span { font-size: 12px; }
}


/* =========================================================
   간단 메모형 A/S 접수 게시판 - 1차 UI/테스트 버전
   ========================================================= */
.memo-board-form-A {
  padding: 34px;
}
.memo-form-head-A {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
}
.memo-form-icon-A {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 98, 254, .10);
  color: #0f62fe;
  font-size: 24px;
  font-weight: 900;
}
.memo-form-head-A h3 {
  margin: 0 0 8px;
  color: #0f1f38;
  font-size: 26px;
  line-height: 1.25;
  word-break: keep-all;
}
.memo-form-head-A p {
  margin: 0;
  color: #526173;
  font-size: 15px;
  line-height: 1.65;
  word-break: keep-all;
}
.support-form-row-A label span {
  color: #0f62fe;
  font-weight: 900;
}
.memo-count-A {
  margin-top: -8px;
  text-align: right;
  color: #6b7280;
  font-size: 13px;
}
.memo-notice-A {
  margin: 16px 0 18px;
  padding-left: 20px;
  color: #526173;
  font-size: 14px;
  line-height: 1.8;
  word-break: keep-all;
}
.memo-actions-A .button-primary-A {
  width: 100%;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.memo-private-A {
  margin: 20px 0 0;
  text-align: center;
  color: #526173;
  font-size: 14px;
  font-weight: 700;
}
.admin-hero-A .hero-A-container {
  max-width: 1040px;
}
.admin-board-head-A {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 26px;
}
.admin-board-head-A h2 {
  margin: 6px 0 10px;
  color: #0f1f38;
  font-size: 34px;
  line-height: 1.25;
}
.admin-board-head-A p {
  margin: 0;
  color: #526173;
  line-height: 1.7;
  word-break: keep-all;
}
.admin-request-board-A {
  display: grid;
  gap: 16px;
}
.admin-request-card-A {
  padding: 24px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 31, 56, .10);
  box-shadow: 0 14px 32px rgba(15, 31, 56, .08);
}
.admin-request-top-A {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-request-top-A span {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(15, 98, 254, .08);
  color: #0f62fe;
  font-size: 12px;
  font-weight: 900;
}
.admin-request-top-A time {
  color: #6b7280;
  font-size: 13px;
}
.admin-request-card-A h3 {
  margin: 0 0 8px;
  color: #0f1f38;
  font-size: 20px;
}
.admin-phone-A {
  margin: 0 0 12px;
  color: #0f62fe;
  font-weight: 800;
}
.admin-message-A {
  margin: 0;
  color: #374151;
  line-height: 1.75;
  white-space: pre-line;
  word-break: keep-all;
}
.admin-empty-A {
  padding: 42px;
  text-align: center;
  border-radius: 22px;
  background: #ffffff;
  border: 1px dashed rgba(15, 31, 56, .22);
  color: #6b7280;
  font-weight: 700;
}
@media(max-width:768px){
  .memo-board-form-A { padding: 24px; }
  .memo-form-head-A { gap: 12px; }
  .memo-form-icon-A { width: 40px; height: 40px; font-size: 20px; }
  .memo-form-head-A h3 { font-size: 22px; }
  .admin-board-head-A { display: block; }
  .admin-board-head-A .button-outline-dark-A { margin-top: 18px; }
  .admin-board-head-A h2 { font-size: 28px; }
}


/* Admin entry link in footer */
.footer-admin-link-A {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .02em;
}
.footer-admin-link-A:hover {
  color: rgba(255,255,255,.78);
  text-decoration: underline;
}

/* A/S admin page polish */
.admin-actions-A {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-login-card-A {
  padding: 26px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15,31,56,.10);
  box-shadow: 0 14px 32px rgba(15,31,56,.08);
  max-width: 720px;
}
.admin-login-card-A h3 {
  margin: 0 0 10px;
  color: #0f1f38;
  font-size: 22px;
}
.admin-login-card-A p {
  margin: 0 0 18px;
  color: #526173;
  line-height: 1.7;
}
.admin-login-form-A {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
.admin-login-form-A label {
  display: grid;
  gap: 8px;
  color: #0f1f38;
  font-weight: 800;
  font-size: 14px;
}
.admin-login-form-A input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(15,31,56,.18);
  font-size: 15px;
  outline: none;
}
.admin-login-form-A input:focus {
  border-color: rgba(15,98,254,.7);
  box-shadow: 0 0 0 4px rgba(15,98,254,.10);
}
.admin-login-message-A {
  margin-top: 12px !important;
  color: #0f62fe !important;
  font-weight: 800;
}
.admin-card-actions-A {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.admin-card-actions-A button {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.admin-card-actions-A button:hover {
  transform: translateY(-1px);
}
.admin-card-actions-A button[data-action="done"] {
  color: #075985;
  background: #e0f2fe;
}
.admin-card-actions-A button[data-action="delete"] {
  color: #991b1b;
  background: #fee2e2;
}
.admin-request-card-A:has(button[data-action="done"]) .admin-request-top-A span {
  white-space: nowrap;
}
@media(max-width:768px){
  .admin-board-head-A {
    align-items: flex-start;
    flex-direction: column;
  }
  .admin-login-form-A {
    grid-template-columns: 1fr;
  }
  .admin-actions-A {
    width: 100%;
  }
  .admin-actions-A a,
  .admin-actions-A button {
    width: 100%;
    justify-content: center;
  }
  .footer-admin-link-A {
    margin-left: 0;
    margin-top: 6px;
  }
}

/* =========================
   Location Section
========================= */

/* 기존 회사소개 섹션과 동일한 about-section-A / about-container-A 구조를 사용합니다. */
.location-section {
  background: #f8fbff;
}

.location-title-A {
  margin-bottom: 30px;
}

.location-content-A {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  width: 100%;
}

.location-info-card-A,
.location-map-card-A {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.location-info-card-A {
  padding: 28px 24px;
}

.location-info-item-A {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px dashed #dbe4f0;
}

.location-info-item-A:first-child {
  padding-top: 0;
}

.location-info-item-A:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.location-icon-A {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #eef5ff;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.location-info-item-A strong {
  display: block;
  margin-bottom: 7px;
  color: #0f172a;
  font-size: 16px;
  font-weight: 800;
}

.location-info-item-A p {
  margin: 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
  word-break: keep-all;
}

.location-map-card-A {
  height: 360px;
}

.location-map-card-A iframe {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
}

@media (max-width: 900px) {
  .location-content-A {
    grid-template-columns: 1fr;
  }

  .location-map-card-A,
  .location-map-card-A iframe {
    height: 320px;
  }
}

@media (max-width: 480px) {
  .location-info-card-A {
    padding: 24px 20px;
  }
}

/* =========================
   Contact A/S Upgrade
========================= */

/* 고객 요청 유형 카드: 단계형 색상 적용 */
.care-card-quote,
.care-card-tech,
.care-card-as,
.care-card-maintenance {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.care-card-quote:hover,
.care-card-tech:hover,
.care-card-as:hover,
.care-card-maintenance:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.14);
}

.care-card-quote {
  background: linear-gradient(145deg, #ffffff 0%, #eff6ff 100%) !important;
  border-color: rgba(37, 99, 235, 0.18) !important;
}

.care-card-tech {
  background: linear-gradient(145deg, #f8fbff 0%, #dbeafe 100%) !important;
  border-color: rgba(37, 99, 235, 0.26) !important;
}

.care-card-maintenance {
  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%) !important;
  border-color: rgba(51, 65, 85, 0.20) !important;
}

.care-card-as {
  background: linear-gradient(145deg, #5b241c 0%, #a93a17 100%) !important;
  color: #ffffff !important;
  border-color: rgba(169, 58, 23, 0.45) !important;
}

.care-card-as h1,
.care-card-as h2,
.care-card-as h3,
.care-card-as h4,
.care-card-as p,
.care-card-as strong,
.care-card-as span {
  color: #ffffff !important;
}

.care-card-quote::before,
.care-card-tech::before,
.care-card-as::before,
.care-card-maintenance::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
}

.care-card-quote::before { background: #93c5fd; }
.care-card-tech::before { background: #3b82f6; }
.care-card-as::before { background: #f97316; }
.care-card-maintenance::before { background: #475569; }

/* 요청사항 / 간단 메모형 A/S 접수 박스 높이 통일 */
.contact-equal-grid {
  align-items: stretch !important;
}

.contact-equal-grid > * {
  height: 100%;
}

.contact-equal-grid .card,
.contact-equal-grid [class*="card"],
.contact-equal-grid [class*="box"],
.contact-equal-grid [class*="panel"] {
  height: 100%;
  box-sizing: border-box;
}

/* 접수 가능 분야 카드 디자인 강화 */
.accept-field-card,
.service-field-card,
.field-card,
[class*="field-card"],
[class*="service-card"],
[class*="scope-card"],
[class*="support-card"] {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.accept-field-card::before,
.service-field-card::before,
.field-card::before,
[class*="field-card"]::before,
[class*="service-card"]::before,
[class*="scope-card"]::before,
[class*="support-card"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
}

.accept-field-card:hover,
.service-field-card:hover,
.field-card:hover,
[class*="field-card"]:hover,
[class*="service-card"]:hover,
[class*="scope-card"]:hover,
[class*="support-card"]:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.24);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.13);
}

[class*="field"] .icon,
[class*="service"] .icon,
[class*="scope"] .icon,
[class*="support"] .icon,
[class*="field"] [class*="icon"],
[class*="service"] [class*="icon"],
[class*="scope"] [class*="icon"],
[class*="support"] [class*="icon"] {
  background: #eef5ff;
  color: #2563eb;
  border-radius: 14px;
}

@media (max-width: 768px) {
  .contact-equal-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   문의·A/S 접수 페이지 - 카드 톤/높이/접수 가능 분야 개선
   Added: 2026-05-17
   Scope: contact.html only
   ========================================================= */

/* 1) 고객 요청 유형 카드: 03번 기존 강조색은 유지하고 01/02/04에 단계별 배경톤 적용 */
.support-type-card-A {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.support-type-card-A::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: rgba(15, 98, 254, .18);
}
.support-type-card-A:nth-child(1) {
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border-color: rgba(217, 72, 15, .12);
}
.support-type-card-A:nth-child(2),
.support-type-card-A:nth-child(4) {
  background: linear-gradient(135deg, #fffaf5 0%, #ffedd5 100%);
  border-color: rgba(217, 72, 15, .18);
}
.support-type-card-A:nth-child(1)::before {
  background: rgba(217, 72, 15, .22);
}
.support-type-card-A:nth-child(2)::before,
.support-type-card-A:nth-child(4)::before {
  background: rgba(217, 72, 15, .36);
}
.support-type-card-A.featured-A {
  background: linear-gradient(135deg, #0f172a, #d9480f);
  border-color: rgba(217, 72, 15, .55);
  box-shadow: 0 24px 54px rgba(127, 29, 29, .22);
}
.support-type-card-A.featured-A::before {
  background: rgba(255, 255, 255, .48);
}
.support-type-card-A:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px rgba(15, 23, 42, .12);
}

/* 2) 요청사항 안내 박스와 A/S 접수 폼 박스 높이 정렬 */
.support-layout-A {
  align-items: stretch;
}
.support-layout-A .contact-form-intro-A,
.support-layout-A .support-form-card-A {
  height: 100%;
  box-sizing: border-box;
}
.support-layout-A .contact-form-intro-A {
  display: flex;
  flex-direction: column;
}
.support-layout-A .support-contact-box-A {
  margin-top: auto;
}

/* 3) 접수 가능 분야 카드 디자인 강화 */
.contact-field-grid-A {
  gap: 22px;
}
.contact-field-card-A {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  padding: 30px 30px 28px;
  border: 1px solid rgba(15, 98, 254, .12);
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 36px rgba(15, 23, 42, .07);
}
.contact-field-card-A::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0f62fe, rgba(15, 98, 254, .18));
}
.contact-field-card-A span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(15, 98, 254, .09);
  color: #0f62fe;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
}
.contact-field-card-A h3 {
  font-size: 21px;
  margin-bottom: 10px;
}
.contact-field-card-A p {
  color: #526173;
  line-height: 1.7;
}
.contact-field-card-A:hover {
  transform: translateY(-6px);
  border-color: rgba(15, 98, 254, .32);
  box-shadow: 0 24px 52px rgba(15, 23, 42, .12);
}

@media (max-width: 1000px) {
  .support-type-card-A,
  .contact-field-card-A {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  .support-layout-A .contact-form-intro-A,
  .support-layout-A .support-form-card-A {
    height: auto;
  }
  .contact-field-card-A {
    padding: 26px 22px;
  }
}


/* =========================================================
   Contact Page Recovery Patch - 2026-05-17
   목적: 카드용 보정 클래스가 히어로/문장에 적용되지 않도록 복구
   ========================================================= */
.contact-support-hero-A {
  background: linear-gradient(135deg, rgba(15,23,42,0.88), rgba(17,24,39,0.82)) !important;
}

.contact-support-hero-A .hero-A-label,
.contact-support-hero-A h1,
.contact-support-hero-A .hero-A-description {
  color: #ffffff !important;
}

.contact-page-title-A .contact-page-desc-A {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.contact-page-title-A .contact-page-desc-A::before {
  display: none !important;
}

/* =========================================================
   HERO HEIGHT TUNING - 2026-05-17
   Scope: hero height only. Background, typography and section styles are not changed.
   ========================================================= */
.hero-A {
  min-height: 300px;
  padding-top: 72px;
  padding-bottom: 56px;
}

@media (max-width: 768px) {
  .hero-A {
    min-height: 250px;
    padding-top: 58px;
    padding-bottom: 44px;
  }
}

/* =========================================================
   Header Dropdown Active Orange Fix A
   Purpose: 세부메뉴 선택 배경을 파란색에서 메인메뉴 선택선과 같은 오렌지 계열로 통일
   Added: 2026-05-17
   Scope: CSS only / header.js 변경 없음
   ========================================================= */
.header-A-dropdown-menu a.is-active-A {
  color: #ffffff !important;
  background: #f97316 !important;
  font-weight: 900;
}

.header-A-dropdown-menu a.is-active-A:hover {
  color: #ffffff !important;
  background: #ea580c !important;
}

@media (min-width: 769px) {
  .header-A-dropdown-menu a.is-active-A::after {
    content: none !important;
  }
}

/* 모바일은 기존 아코디언 구조를 유지하고, 활성 텍스트만 오렌지로 표시 */
@media (max-width: 768px) {
  .header-A-dropdown-menu a.is-active-A {
    color: #ff6b35 !important;
    background: transparent !important;
  }
}

/* =========================================================
   Header Dropdown Text-only Orange Override A
   Purpose: 세부메뉴 hover/active 시 배경은 그대로 두고 글씨만 오렌지로 표시
   Added: 2026-06-03
   Scope: CSS only / header.js 변경 없음
   ========================================================= */
@media (min-width: 769px) {
  .header-A .header-A-dropdown-menu a:hover,
  .header-A .header-A-dropdown-menu a:focus {
    color: #ff8a3d !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .header-A .header-A-dropdown-menu a.is-active-A,
  .header-A .header-A-dropdown-menu a.is-active-A:hover,
  .header-A .header-A-dropdown-menu a.is-active-A:focus {
    color: #ff8a3d !important;
    background: transparent !important;
    box-shadow: none !important;
    font-weight: 900;
  }

  .header-A .header-A-dropdown-menu a.is-active-A::after {
    content: none !important;
  }
}

/* 모바일 아코디언에서도 배경 없이 글씨만 오렌지로 유지 */
@media (max-width: 768px) {
  .header-A .header-A-dropdown-menu a:hover,
  .header-A .header-A-dropdown-menu a:focus,
  .header-A .header-A-dropdown-menu a.is-active-A,
  .header-A .header-A-dropdown-menu a.is-active-A:hover,
  .header-A .header-A-dropdown-menu a.is-active-A:focus {
    color: #ff8a3d !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* =========================================================
   A/S Hero Background Image Ready Upgrade A
   Purpose: 문의·A/S 접수 및 A/S 관리자 히어로 배경 이미지 삽입 준비
   Added: 2026-05-17
   Image paths:
   - img/hero/contact-as-hero.jpg
   - img/hero/admin-as-hero.jpg
   ========================================================= */

.contact-support-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.74)),
    url("img/hero/contact-as-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.admin-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.90), rgba(31, 41, 55, 0.76)),
    url("img/hero/admin-as-hero.jpg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.contact-support-hero-A .hero-A-container,
.admin-hero-A .hero-A-container {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .contact-support-hero-A,
  .admin-hero-A {
    background-position: center !important;
  }
}


/* =========================================================
   Business Detail Hero Image Mapping A
   Purpose: 사업분야 세부페이지별 히어로 배경 이미지 연결
   Added: 2026-05-17
   Image path guide:
   - img/hero/business-automation-hero.jpg
   - img/hero/business-bems-hero.jpg
   - img/hero/business-ai-air-hero.jpg
   - img/hero/business-psd-hero.jpg
   - img/hero/business-diagnosis-hero.jpg
   - img/hero/business-maintenance-hero.jpg
   ========================================================= */

.business-hero-premium-A.business-automation-hero-A,
.business-hero-premium-A.business-bems-hero-A,
.business-hero-premium-A.business-ai-air-hero-A,
.business-hero-premium-A.business-psd-hero-A,
.business-hero-premium-A.business-diagnosis-hero-A,
.business-hero-premium-A.business-maintenance-hero-A {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.business-hero-premium-A.business-automation-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-automation-hero.jpg") !important;
}

.business-hero-premium-A.business-bems-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-bems-hero.jpg") !important;
}

.business-hero-premium-A.business-ai-air-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-ai-air-hero.jpg") !important;
}

.business-hero-premium-A.business-psd-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-psd-hero.jpg") !important;
}

.business-hero-premium-A.business-diagnosis-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-diagnosis-hero.jpg") !important;
}

.business-hero-premium-A.business-maintenance-hero-A {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(31, 41, 55, 0.72)),
    url("img/hero/business-maintenance-hero.jpg") !important;
}


/* =========================================================
   HERO COMMON RESET FINAL A
   Purpose: 전체 히어로 높이/오버레이/이미지 표시 기준 통일
   Added: 2026-05-17
   Rule: .hero-A는 공통 구조, 페이지별 클래스는 이미지 경로만 담당
   ========================================================= */

.hero-A {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  min-height: 320px !important;
  padding: 74px 20px 62px !important;
  color: #ffffff !important;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.hero-A::before,
.index-hero-visual-A::before,
.about-hero-visual-A::before,
.projects-sub-hero-A::before,
.business-hero-premium-A::before,
.solutions-hero-visual-A::before,
.contact-support-hero-A::before,
.admin-hero-A::before,
.certificates-hero-A::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.36), rgba(15, 23, 42, 0.10) 58%, rgba(15, 23, 42, 0.28)) !important;
  pointer-events: none !important;
}

.hero-A::after,
.index-hero-visual-A::after,
.about-hero-visual-A::after,
.projects-sub-hero-A::after,
.business-hero-premium-A::after,
.solutions-hero-visual-A::after,
.contact-support-hero-A::after,
.admin-hero-A::after,
.certificates-hero-A::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.030) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.24 !important;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) !important;
  pointer-events: none !important;
}

.hero-A-container {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}

.hero-A-label {
  color: #cbd5e1 !important;
}

.hero-A h1 {
  color: #ffffff !important;
  text-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
}

.hero-A-description {
  color: rgba(241, 245, 249, 0.86) !important;
}

/* 페이지별 히어로 이미지는 경로만 담당 */
.index-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/index-hero.jpg") !important;
}

.about-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/about-hero.jpg") !important;
}

.projects-sub-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/index-hero.jpg") !important;
}

.solutions-hero-visual-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/solutions-hero.jpg") !important;
}

.contact-support-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/contact-as-hero.jpg") !important;
}

.admin-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/admin-as-hero.jpg") !important;
}

.certificates-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/certificates-hero.jpg") !important;
}

.business-automation-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-automation-hero.jpg") !important;
}

.business-bems-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-bems-hero.jpg") !important;
}

.business-ai-air-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-ai-air-hero.jpg") !important;
}

.business-psd-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-psd-hero.jpg") !important;
}

.business-diagnosis-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-diagnosis-hero.jpg") !important;
}

.business-maintenance-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.90), rgba(31, 41, 55, 0.74)),
    url("img/hero/business-maintenance-hero.jpg") !important;
}

.index-hero-visual-A,
.about-hero-visual-A,
.projects-sub-hero-A,
.business-hero-premium-A,
.business-automation-hero-A,
.business-bems-hero-A,
.business-ai-air-hero-A,
.business-psd-hero-A,
.business-diagnosis-hero-A,
.business-maintenance-hero-A,
.solutions-hero-visual-A,
.contact-support-hero-A,
.admin-hero-A,
.certificates-hero-A {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* 사업분야 세부 히어로는 카드 때문에 구조만 유지하고 높이는 공통 기준으로 통일 */
.business-hero-premium-A {
  min-height: 320px !important;
}

.business-hero-grid-A {
  align-items: center !important;
}

@media (max-width: 768px) {
  .hero-A,
  .business-hero-premium-A {
    min-height: 270px !important;
    padding: 62px 18px 50px !important;
  }

  .hero-A h1 {
    font-size: 32px !important;
    line-height: 1.22 !important;
  }

  .hero-A-description {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }
}

/* =========================================================
   Business Detail Hero Visibility Final A
   Purpose: 사업분야 세부페이지 히어로 이미지 노출 영역 개선
   Added: 2026-05-17
   Notes: 사업분야 세부 히어로에만 적용, 다른 페이지 히어로/섹션/메뉴는 변경하지 않음
   ========================================================= */

.business-hero-premium-A {
  min-height: 360px !important;
}

.business-hero-premium-A.business-automation-hero-A,
.business-hero-premium-A.business-bems-hero-A,
.business-hero-premium-A.business-ai-air-hero-A,
.business-hero-premium-A.business-psd-hero-A,
.business-hero-premium-A.business-diagnosis-hero-A,
.business-hero-premium-A.business-maintenance-hero-A {
  background-size: cover !important;
  background-position: center 38% !important;
  background-repeat: no-repeat !important;
}

.business-hero-premium-A.business-automation-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-automation-hero.jpg") !important;
}

.business-hero-premium-A.business-bems-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-bems-hero.jpg") !important;
}

.business-hero-premium-A.business-ai-air-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-ai-air-hero.jpg") !important;
}

.business-hero-premium-A.business-psd-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-psd-hero.jpg") !important;
}

.business-hero-premium-A.business-diagnosis-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-diagnosis-hero.jpg") !important;
}

.business-hero-premium-A.business-maintenance-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.78), rgba(31, 41, 55, 0.58)),
    url("img/hero/business-maintenance-hero.jpg") !important;
}

.business-hero-premium-A::before {
  background:
    radial-gradient(circle at 76% 24%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0.06) 58%, rgba(15, 23, 42, 0.18)) !important;
}

.business-hero-premium-A::after {
  opacity: 0.16 !important;
}

@media (max-width: 768px) {
  .business-hero-premium-A {
    min-height: 300px !important;
  }

  .business-hero-premium-A.business-automation-hero-A,
  .business-hero-premium-A.business-bems-hero-A,
  .business-hero-premium-A.business-ai-air-hero-A,
  .business-hero-premium-A.business-psd-hero-A,
  .business-hero-premium-A.business-diagnosis-hero-A,
  .business-hero-premium-A.business-maintenance-hero-A {
    background-position: center 40% !important;
  }
}


/* =========================================================
   Business Detail Hero Background Conflict Reset FINAL
   Purpose: 사업분야 세부페이지 히어로 배경 이미지 확대/부분노출 문제 정리
   Added: 2026-05-17
   Scope: business-*.html 세부페이지 히어로만 최종 덮어쓰기
   ========================================================= */

/* 1) 사업분야 세부 히어로는 구조/높이만 담당하고, 이미지 경로는 각 페이지 전용 클래스가 담당 */
.hero-A.business-hero-premium-A {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 380px !important;
  padding: 76px 20px 62px !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

/* 2) 기존 hero-A / projects-sub-hero-A / business-hero-premium-A 중복 배경을 최종적으로 리셋 */
.hero-A.business-hero-premium-A.business-automation-hero-A,
.hero-A.business-hero-premium-A.business-bems-hero-A,
.hero-A.business-hero-premium-A.business-ai-air-hero-A,
.hero-A.business-hero-premium-A.business-psd-hero-A,
.hero-A.business-hero-premium-A.business-diagnosis-hero-A,
.hero-A.business-hero-premium-A.business-maintenance-hero-A {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* 3) 페이지별 전용 이미지만 최종 적용 */
.hero-A.business-hero-premium-A.business-automation-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-automation-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-bems-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-bems-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-ai-air-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-ai-air-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-psd-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-psd-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-diagnosis-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-diagnosis-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-maintenance-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-maintenance-hero.jpg") !important;
}

/* 4) 공통 hero 장식 레이어가 이미지를 과하게 덮거나 확대되어 보이지 않도록 약화 */
.hero-A.business-hero-premium-A::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.28), transparent 54%, rgba(15, 23, 42, 0.22)) !important;
  pointer-events: none !important;
}

.hero-A.business-hero-premium-A::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.14 !important;
  pointer-events: none !important;
}

/* 5) 오른쪽 카드가 배경을 과하게 가리지 않도록 투명도 완화 */
.hero-A.business-hero-premium-A .business-hero-card-A {
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px) !important;
}

/* 6) 모바일은 기존처럼 과도하게 길어지지 않게 유지 */
@media (max-width: 768px) {
  .hero-A.business-hero-premium-A {
    min-height: 320px !important;
    padding: 66px 18px 54px !important;
  }

  .hero-A.business-hero-premium-A.business-automation-hero-A,
  .hero-A.business-hero-premium-A.business-bems-hero-A,
  .hero-A.business-hero-premium-A.business-ai-air-hero-A,
  .hero-A.business-hero-premium-A.business-psd-hero-A,
  .hero-A.business-hero-premium-A.business-diagnosis-hero-A,
  .hero-A.business-hero-premium-A.business-maintenance-hero-A {
    background-position: center center !important;
  }
}

/* =========================================================
   HERO FINAL UNIFIED SYSTEM A
   Purpose: 전체 히어로 배경 표시 방식/어두움/장식 레이어 최종 통일
   Added: 2026-05-17
   Scope: hero-A 계열 전체 + 사업분야 세부 히어로
   Rule: 공통 히어로는 높이/배율/톤을 담당하고, 페이지별 클래스는 이미지 경로만 담당
========================================================= */

/* 1) 모든 hero-A 계열의 기본 표시 기준 통일 */
.hero-A {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  min-height: 360px !important;
  padding: 76px 20px 62px !important;
  color: #ffffff !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18) !important;
}

.hero-A-container {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
}

/* 2) 공통 장식 레이어 통일: 전체 히어로에 동일한 흐림/격자 느낌 */
.hero-A::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 76% 24%, rgba(148, 163, 184, 0.16), transparent 30%),
    linear-gradient(90deg, rgba(15, 23, 42, 0.28), transparent 54%, rgba(15, 23, 42, 0.22)) !important;
  pointer-events: none !important;
}

.hero-A::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.024) 1px, transparent 1px) !important;
  background-size: 42px 42px !important;
  opacity: 0.16 !important;
  pointer-events: none !important;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent) !important;
}

/* 3) 페이지별 히어로: 동일한 overlay 강도 + 각 이미지 경로만 다르게 */
.index-hero-visual-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/index-hero.jpg") !important;
}

.about-hero-visual-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/about-hero.jpg") !important;
}

.projects-sub-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/index-hero.jpg") !important;
}

.solutions-hero-visual-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/solutions-hero.jpg") !important;
}

.contact-support-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/contact-support-hero.jpg") !important;
}

.admin-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/admin-hero.jpg") !important;
}

.certificates-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%) !important;
}

/* 4) 사업분야 세부 히어로: 공통 톤 유지 + 페이지별 이미지만 적용 */
.hero-A.business-hero-premium-A {
  min-height: 380px !important;
  padding: 76px 20px 62px !important;
}

.hero-A.business-hero-premium-A.business-automation-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-automation-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-bems-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-bems-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-ai-air-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-ai-air-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-psd-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-psd-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-diagnosis-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-diagnosis-hero.jpg") !important;
}

.hero-A.business-hero-premium-A.business-maintenance-hero-A {
  background-image:
    linear-gradient(90deg, rgba(10, 18, 32, 0.80) 0%, rgba(10, 18, 32, 0.54) 52%, rgba(10, 18, 32, 0.66) 100%),
    url("img/hero/business-maintenance-hero.jpg") !important;
}

/* 5) 모든 이미지형 히어로에 동일 배율/위치 재확인 */
.index-hero-visual-A,
.about-hero-visual-A,
.projects-sub-hero-A,
.solutions-hero-visual-A,
.contact-support-hero-A,
.admin-hero-A,
.certificates-hero-A,
.hero-A.business-hero-premium-A.business-automation-hero-A,
.hero-A.business-hero-premium-A.business-bems-hero-A,
.hero-A.business-hero-premium-A.business-ai-air-hero-A,
.hero-A.business-hero-premium-A.business-psd-hero-A,
.hero-A.business-hero-premium-A.business-diagnosis-hero-A,
.hero-A.business-hero-premium-A.business-maintenance-hero-A {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* 6) 사업분야 오른쪽 KEY POINT 카드는 유지하되, 전체 히어로 톤과 어울리게 정리 */
.hero-A.business-hero-premium-A .business-hero-card-A {
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px) !important;
}

/* 7) 모바일 히어로 통일 */
@media (max-width: 768px) {
  .hero-A,
  .hero-A.business-hero-premium-A {
    min-height: 320px !important;
    padding: 66px 18px 54px !important;
  }

  .hero-A h1 {
    font-size: 32px !important;
    line-height: 1.22 !important;
  }

  .hero-A-description {
    font-size: 15.5px !important;
    line-height: 1.72 !important;
  }

  .index-hero-visual-A,
  .about-hero-visual-A,
  .projects-sub-hero-A,
  .solutions-hero-visual-A,
  .contact-support-hero-A,
  .admin-hero-A,
  .certificates-hero-A,
  .hero-A.business-hero-premium-A.business-automation-hero-A,
  .hero-A.business-hero-premium-A.business-bems-hero-A,
  .hero-A.business-hero-premium-A.business-ai-air-hero-A,
  .hero-A.business-hero-premium-A.business-psd-hero-A,
  .hero-A.business-hero-premium-A.business-diagnosis-hero-A,
  .hero-A.business-hero-premium-A.business-maintenance-hero-A {
    background-position: center center !important;
  }
}


/* =========================================================
   Solution Hero Image Unified Override A
   Purpose: 솔루션 메인 / Tridium / LG BECON 히어로 이미지를 분리하되
            높이, 배율, 흐림 정도는 전체 히어로 공통 기준으로 통일
   Added: 2026-05-17
   Image paths:
   - img/hero/solutions-hero.jpg
   - img/hero/solution-tridium-hero.jpg
   - img/hero/solution-becon-hero.jpg
========================================================= */

.solutions-hero-visual-A {
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.solution-main-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/solutions-hero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
}

.solution-tridium-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/solution-tridium-hero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
}

.solution-becon-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/solution-becon-hero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
}

.solutions-hero-visual-A .hero-A-container {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 768px) {
  .solution-main-hero-A,
  .solution-tridium-hero-A,
  .solution-becon-hero-A {
    background-position: center center !important;
  }
}


/* =========================================================
   Projects Hero Image Unified Override A
   Purpose: 주요실적 메인 / 세부 실적 페이지별 히어로 이미지를 분리하되
            높이, 배율, 흐림 정도는 전체 히어로 공통 기준으로 통일
   Added: 2026-05-17
   Image paths:
   - img/hero/projects-hero.jpg
   - img/hero/projects-railway-hero.jpg
   - img/hero/projects-automation-hero.jpg
   - img/hero/projects-hospital-hero.jpg
   - img/hero/projects-bems-hero.jpg
   - img/hero/projects-equipment-hero.jpg
========================================================= */

.projects-sub-hero-A {
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.projects-main-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-hero.jpg") !important;
}

.projects-railway-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-railway-hero.jpg") !important;
}

.projects-automation-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-automation-hero.jpg") !important;
}

.projects-hospital-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-hospital-hero.jpg") !important;
}

.projects-bems-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-bems-hero.jpg") !important;
}

.projects-equipment-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/projects-equipment-hero.jpg") !important;
}

.projects-main-hero-A,
.projects-railway-hero-A,
.projects-automation-hero-A,
.projects-hospital-hero-A,
.projects-bems-hero-A,
.projects-equipment-hero-A {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

.projects-sub-hero-A .hero-A-container {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .projects-main-hero-A,
  .projects-railway-hero-A,
  .projects-automation-hero-A,
  .projects-hospital-hero-A,
  .projects-bems-hero-A,
  .projects-equipment-hero-A {
    background-position: center center !important;
  }
}


/* =========================================================
   Contact / Admin Hero Image Ready A
   Purpose: 문의·A/S 접수 및 A/S 접수 관리자 히어로 배경 이미지 적용
   Added: 2026-05-17
   Image paths:
   - img/hero/contact-support-hero.jpg
   - img/hero/admin-as-hero.jpg
========================================================= */

.contact-support-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/contact-support-hero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

.admin-hero-A {
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.88), rgba(31, 41, 55, 0.70)),
    url("img/hero/admin-as-hero.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

.contact-support-hero-A .hero-A-container,
.admin-hero-A .hero-A-container {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 768px) {
  .contact-support-hero-A,
  .admin-hero-A {
    background-position: center center !important;
  }
}

/* =========================================================
   CERTIFICATES HERO IMAGE
   Purpose: 인증서 페이지 히어로 배경 이미지 적용
   Added: 2026-05-17
   Image path: img/hero/certificates-hero.jpg
========================================================= */

.certificates-hero-A {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(17, 24, 39, 0.92), rgba(31, 41, 55, 0.82)),
    url("img/hero/certificates-hero.jpg") center center / cover no-repeat !important;
}

.certificates-hero-A h1,
.certificates-hero-A .hero-A-description,
.certificates-hero-A .hero-A-label {
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.42);
}

@media (max-width: 768px) {
  .certificates-hero-A {
    background-position: center center !important;
  }
}


/* =========================================================
   PROJECTS TABLE ACCORDION
   Purpose: 주요실적 세부페이지의 긴 실적 리스트 접기/펴기
   Added: 2026-05-18
========================================================= */

.projects-table-wrap-A.projects-collapsible-A {
  position: relative;
}

.projects-table-A tr.project-row-extra-A {
  display: none;
}

.projects-table-wrap-A.is-open-A .projects-table-A tr.project-row-extra-A {
  display: table-row;
}

.project-toggle-row-A {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

.project-toggle-btn-A {
  width: min(100%, 420px);
  padding: 15px 22px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: linear-gradient(135deg, #111827, #1f2937);
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.project-toggle-btn-A:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
  background: linear-gradient(135deg, #1f2937, #334155);
}

.project-toggle-btn-A:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.28);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .project-toggle-row-A {
    margin-top: 14px;
  }

  .project-toggle-btn-A {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
  }
}


/* =========================================================
   CEO Message Final Upgrade A
   Purpose: CEO 사진 밝기 개선 + B2B 기업형 CEO 인사말 디자인 적용
   Added: 2026-05-31
   ========================================================= */

.ceo-message-upgrade-A {
  grid-template-columns: 0.92fr 1.08fr;
  gap: 30px;
}

.ceo-message-upgrade-A .ceo-profile-photo-bg-A {
  min-height: 520px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(15,23,42,0.06) 48%, rgba(15,23,42,0.86) 100%),
    url("img/company/ceo.jpg") !important;
  background-size: cover !important;
  background-position: center top !important;
  box-shadow: 0 22px 52px rgba(15,23,42,0.18);
}

.ceo-message-upgrade-A .ceo-profile-photo-bg-A::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, rgba(15,23,42,0.04) 58%, rgba(15,23,42,0.90) 100%);
}

.ceo-message-upgrade-A .ceo-profile-photo-bg-A span {
  color: #60a5fa;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.ceo-message-upgrade-A .ceo-profile-photo-bg-A h3 {
  font-size: 32px;
  letter-spacing: -0.04em;
}

.ceo-message-upgrade-A .ceo-profile-photo-bg-A p {
  color: rgba(255,255,255,0.90);
  font-size: 16px;
}

.ceo-greeting-premium-A {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 520px;
  padding: 56px 64px !important;
  border-radius: 26px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  border: 1px solid rgba(148,163,184,0.26);
  box-shadow: 0 22px 52px rgba(15,23,42,0.10);
}

.ceo-greeting-premium-A .ceo-quote-mark-A {
  margin-bottom: 16px;
  color: #3b82f6;
  font-size: 76px;
  line-height: 0.72;
  font-weight: 900;
  font-family: Georgia, 'Times New Roman', serif;
}

.ceo-greeting-premium-A h2 {
  margin: 0;
  color: #0f172a;
  font-size: 40px;
  line-height: 1.28;
  letter-spacing: -0.055em;
  font-weight: 900;
}

.ceo-title-line-A {
  width: 64px;
  height: 3px;
  margin: 28px 0 30px;
  border-radius: 999px;
  background: #3b82f6;
}

.ceo-greeting-premium-A p {
  margin: 0 0 22px;
  color: #1f2937;
  font-size: 16.5px;
  line-height: 1.95;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.ceo-signature-A {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding-top: 26px;
  border-top: 1px solid #d1d5db;
}

.ceo-signature-A span {
  color: #334155;
  font-size: 16px;
  font-weight: 600;
}

.ceo-signature-A strong {
  color: #111827;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.04em;
  font-family: 'Nanum Pen Script', 'Segoe Script', 'Bradley Hand ITC', cursive;
}

@media (max-width: 900px) {
  .ceo-message-upgrade-A {
    grid-template-columns: 1fr;
  }

  .ceo-message-upgrade-A .ceo-profile-photo-bg-A {
    min-height: 440px;
  }

  .ceo-greeting-premium-A {
    min-height: auto;
    padding: 34px 28px !important;
  }

  .ceo-greeting-premium-A .ceo-quote-mark-A {
    font-size: 58px;
  }

  .ceo-greeting-premium-A h2 {
    font-size: 30px;
  }

  .ceo-greeting-premium-A p {
    font-size: 15.5px;
    line-height: 1.85;
  }

  .ceo-signature-A {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  .ceo-signature-A strong {
    font-size: 30px;
  }
}


/* =========================================================
   MOBILE INFORMATION DIET UPGRADE
   Purpose: 모바일에서 핵심 정보 우선 노출 + 긴 정보 접기/펴기
   Added: 2026-06-04
========================================================= */
.mobile-quick-contact-A {
  display: none;
}

.index-trust-grid-A {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.index-trust-card-A {
  min-height: 150px;
  padding: 26px 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.index-trust-card-A strong {
  display: block;
  margin-bottom: 12px;
  color: #111827;
  font-size: 20px;
  letter-spacing: -0.04em;
}

.index-trust-card-A span {
  display: block;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}

.mobile-more-toggle-A {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.mobile-more-btn-A {
  display: none;
}

.mobile-guide-note-A {
  color: #64748b;
  font-size: 14px;
}

@media (max-width: 900px) {
  .index-trust-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  body {
    padding-bottom: 74px;
  }

  .mobile-quick-contact-A {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1200;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(10px);
  }

  .mobile-quick-contact-A a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    background: rgba(255,255,255,0.10);
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.03em;
  }

  .mobile-quick-contact-A a:nth-child(2) {
    background: #f97316;
  }

  .hero-A {
    padding: 76px 20px 58px;
  }

  .hero-A h1 {
    font-size: 32px;
    line-height: 1.25;
    word-break: keep-all;
  }

  .hero-A-description {
    font-size: 15.5px;
    line-height: 1.75;
  }

  .section-A,
  .about-section-A,
  .projects-section-A,
  .projects-table-section-A,
  .cert-section-A {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .index-trust-grid-A {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .index-trust-card-A {
    min-height: auto;
    padding: 22px 20px;
  }

  .index-service-compact-A,
  .projects-category-grid-A,
  .project-photo-grid-A,
  .cert-feature-image-grid-A {
    gap: 22px;
  }

  .project-photo-card-A img {
    height: 240px;
  }

  .cert-feature-image-grid-A .cert-feature-image-card-A:nth-of-type(n+7) {
    display: none;
  }

  #cert-mobile-toggle-A:checked + .cert-feature-image-grid-A .cert-feature-image-card-A:nth-of-type(n+7) {
    display: block;
  }

  .history-mobile-list-A .timeline-A-item:nth-of-type(n+4) {
    display: none;
  }

  #history-mobile-toggle-A:checked + .history-mobile-list-A .timeline-A-item:nth-of-type(n+4) {
    display: grid;
  }

  .mobile-more-btn-A {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 420px);
    min-height: 48px;
    margin: 24px auto 0;
    padding: 0 20px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
  }

  .mobile-more-btn-A .less-text-A {
    display: none;
  }

  #cert-mobile-toggle-A:checked ~ .cert-mobile-more-btn-A .more-text-A,
  #history-mobile-toggle-A:checked ~ .history-mobile-more-btn-A .more-text-A {
    display: none;
  }

  #cert-mobile-toggle-A:checked ~ .cert-mobile-more-btn-A .less-text-A,
  #history-mobile-toggle-A:checked ~ .history-mobile-more-btn-A .less-text-A {
    display: inline;
  }

  .business-detail-text-A p,
  .business-feature-panel-A li,
  .about-section-desc-A,
  .projects-desc-A,
  .cert-desc-A {
    word-break: keep-all;
  }
}


/* =========================================================
   Mobile History Toggle Fix A
   Purpose: 전체 연혁 보기 후에도 기존 타임라인 grid 디자인 유지
   ========================================================= */
@media (max-width: 768px) {
  #history-mobile-toggle-A:checked + .history-mobile-list-A .timeline-A-item:nth-of-type(n+4) {
    display: grid !important;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
  }
}


/* =========================================================
   Mobile Partner Logo Toggle A
   Purpose: PC 5열 유지 + 모바일 2열 + 기본 6개 표시 + 전체보기/접기
   Added: 2026-06-04
   ========================================================= */
.mobile-toggle-input-A {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

#partners .partner-logo-grid-A {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#partners .partner-mobile-more-btn-A {
  display: none;
}

@media (max-width: 768px) {
  #partners .partner-logo-grid-A {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  #partners .partner-logo-card-A {
    min-height: 112px;
    padding: 16px 14px;
  }

  #partners .partner-logo-card-A:nth-of-type(n+7) {
    display: none;
  }

  #partner-mobile-toggle-A:checked + .partner-logo-grid-A .partner-logo-card-A:nth-of-type(n+7) {
    display: flex;
  }

  #partners .partner-mobile-more-btn-A {
    display: flex;
  }

  #partner-mobile-toggle-A:checked ~ .partner-mobile-more-btn-A .more-text-A {
    display: none;
  }

  #partner-mobile-toggle-A:checked ~ .partner-mobile-more-btn-A .less-text-A {
    display: inline;
  }
}

@media (max-width: 360px) {
  #partners .partner-logo-grid-A {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Business Detail Balance Upgrade C
   Purpose: 사업분야 상세 박스 높이 균형 개선 + 기능 목록 3줄형 최적화
   Added: 2026-06-30
========================================================= */
.business-premium-grid-A {
  align-items: stretch !important;
}

.business-premium-text-A,
.business-premium-panel-A {
  min-height: auto !important;
}

.business-premium-text-A {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-premium-panel-A {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.business-premium-panel-A li {
  padding-top: 9px;
  padding-bottom: 9px;
}

.business-mini-metrics-A {
  margin-top: 22px;
}

@media (max-width: 768px) {
  .business-premium-text-A,
  .business-premium-panel-A {
    justify-content: flex-start;
  }
}
/* =========================================================
   B2B CALM COLOR PASS
   Purpose: retain WEBS navy identity while reducing repeated
   high-saturation blue across cards, buttons and soft sections.
   Added: 2026-09-08
========================================================= */
:root {
  --webs-blue-A: #2b5f7d;
  --webs-blue-soft-A: rgba(43, 95, 125, 0.10);
  --webs-navy-A: #132238;
  --webs-card-border-A: rgba(43, 95, 125, 0.16);
}

.button-primary-A {
  background: #2b5f7d !important;
  border-color: #2b5f7d !important;
  box-shadow: 0 10px 24px rgba(19, 34, 56, 0.18) !important;
}

.button-primary-A:hover {
  background: #234f69 !important;
  border-color: #234f69 !important;
  box-shadow: 0 14px 28px rgba(19, 34, 56, 0.24) !important;
}

.about-section-A.is-soft-A,
.cert-section-A.is-soft-A {
  background: linear-gradient(180deg, #f7f9fb 0%, #eef2f5 100%) !important;
}

.section-A:nth-of-type(even),
.section-B:nth-of-type(even),
.section-C:nth-of-type(even) {
  background: linear-gradient(180deg, #f8fafb 0%, #f0f3f6 100%);
}

.section-A::before,
.section-B::before,
.section-C::before,
.about-section-A::before,
.cert-section-A::before {
  opacity: 0.42;
}

.about-section-title-A p,
.cert-title-A p,
.cta-sales-A-label {
  color: #2b5f7d !important;
}

.about-section-title-A::before,
.cert-title-A::before,
.sales-section-A-title h2::before,
.section-title-B h2::before,
.section-title-C h2::before {
  background: #527b91 !important;
  box-shadow: none !important;
}

.philosophy-card-A {
  background:
    radial-gradient(circle at 12% 12%, rgba(124, 160, 181, 0.16), transparent 34%),
    linear-gradient(135deg, #132238 0%, #1e3b52 62%, #2b5f7d 130%) !important;
  box-shadow: 0 20px 44px rgba(19, 34, 56, 0.18) !important;
}

.index-service-compact-card-A {
  background: linear-gradient(145deg, #ffffff 0%, #f3f6f8 100%) !important;
  border: 1px solid rgba(43, 95, 125, 0.16) !important;
  box-shadow: 0 12px 30px rgba(19, 34, 56, 0.08) !important;
}

.index-service-compact-card-A::after {
  background: radial-gradient(circle, rgba(82, 123, 145, 0.10), transparent 68%) !important;
}

.index-service-compact-card-A span {
  color: #527b91 !important;
}

.index-service-compact-card-A strong {
  color: #172331 !important;
}

.index-service-compact-card-A em {
  color: #5b6875 !important;
}

.index-solution-card-A {
  background: linear-gradient(145deg, #ffffff 0%, #eef3f6 100%) !important;
  border: 1px solid rgba(43, 95, 125, 0.18) !important;
  box-shadow: 0 14px 34px rgba(19, 34, 56, 0.10) !important;
}

.index-solution-card-A::before {
  background-image:
    linear-gradient(rgba(43, 95, 125, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 95, 125, 0.035) 1px, transparent 1px) !important;
}

.index-solution-card-A::after {
  background: #527b91 !important;
  box-shadow: none !important;
}

.index-solution-card-A span {
  color: #2b5f7d !important;
  background: rgba(43, 95, 125, 0.08) !important;
  border-color: rgba(43, 95, 125, 0.16) !important;
}

.index-solution-card-A h3 {
  color: #172331 !important;
}

.index-solution-card-A p {
  color: #566473 !important;
}

.index-solution-card-A:hover,
.index-service-compact-card-A:hover {
  border-color: rgba(43, 95, 125, 0.32) !important;
  box-shadow: 0 18px 40px rgba(19, 34, 56, 0.14) !important;
}

.index-trust-card-A {
  border-color: rgba(43, 95, 125, 0.14);
  box-shadow: 0 12px 28px rgba(19, 34, 56, 0.07);
}

.cta-sales-A {
  background: linear-gradient(135deg, #132238 0%, #203c51 100%) !important;
}

@media (max-width: 768px) {
  .mobile-quick-contact-A {
    background: rgba(19, 34, 56, 0.96);
    box-shadow: 0 14px 34px rgba(19, 34, 56, 0.24);
  }

  /* Orange remains reserved for the urgent A/S action. */
  .mobile-quick-contact-A a:nth-child(2) {
    background: #f97316;
  }
}