/* ================================================
   사업소개 페이지 CSS  (sub.css 원본 기반)
   .com-page 범위로 격리하여 타 페이지에 영향 없음
================================================ */

.com-page { background: #F5F7FA; }

.com-page ul { list-style: none; }

.com-page h2.sub-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 2rem;
  color: var(--text-dark);
  text-align: center;
}

.com-page section.com1 { margin-top: 0; }
.com-page section.com3 { margin-bottom: 60px; }

.com-page section {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 60px;
  background-color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-card);
}

.com-page section .title { margin-bottom: 20px; }

.com-page section .title h3 {
  position: relative;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-dark);
  padding-left: 1rem;
}

.com-page section .title h3::before {
  content: '';
  display: block;
  width: 4px;
  height: 20px;
  background: linear-gradient(135deg, #4d80f0, #1244cd);
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.com-page section .title p {
  font-size: 0.95rem;
  color: var(--text-sub);
}

.com-page section .content {
  border-top: 1px solid #ececec;
  padding-top: 1.5rem;
}

.com-page section .content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.com-page section .content h4 .iconify {
  font-size: 1.25rem;
  color: var(--primary);
}

.com-page section .content p {
  font-size: 0.95rem;
  color: var(--text-body);
  margin-top: 0.5rem;
}

/* help-box */
.com-page section .help-box {
  margin-top: 1.5rem;
  border: 1px solid var(--blue-border);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  background-color: rgba(29, 78, 216, .08);
}
.com-page section .help-box ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-left: 1rem;
}
.com-page section .help-box ul li {
  font-size: 0.875rem;
  color: var(--text-body);
  position: relative;
}
.com-page section .help-box ul li::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
}

/* com2 box-item */
.com-page section.com2 .content .content-inner {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}
.com-page section.com2 .content .content-inner .box-item {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1rem 1.5rem;
  transition: all 0.3s ease;
}
.com-page section.com2 .content .content-inner .box-item:hover {
  background-color: var(--blue-bg);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}
.com-page section.com2 .content .content-inner .box-item h5 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--text-dark);
  transition: all 0.3s ease;
}
.com-page section.com2 .content .content-inner .box-item:hover h5 {
  color: var(--primary);
}
.com-page section.com2 .content .content-inner .box-item p {
  font-size: 0.875rem;
  color: var(--text-body);
  margin-top: 0.5rem;
}
.com-page section.com2 .content .content-inner .box-item .tag-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.com-page section.com2 .content .content-inner .box-item .tag-wrap span {
  font-size: 0.8rem;
  color: var(--primary);
  border: 1px solid var(--border);
  padding: 0.25rem 0.5rem;
  border-radius: 2rem;
  transition: all 0.3s ease;
}
.com-page section.com2 .content .content-inner .box-item:hover .tag-wrap span {
  background-color: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
}

/* com3 process */
.com-page section.com3 .process-card {
  border: none;
  border-radius: 0;
  background-color: transparent;
  padding: 0;
}
.com-page section.com3 .process-card .card-header {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
}
.com-page section.com3 .process-card .process-grid-body {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 1.5rem;
}

.com-page .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.com-page .card-title .iconify {
  font-size: 1.25rem;
  color: var(--primary);
}
.com-page .process-grid-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* proc dots / arrows */
.com-page .proc-row { display: flex; flex-direction: column; gap: 10px; }
.com-page .proc-dots-line { display: flex; align-items: center; }
.com-page .proc-dot-cell { flex: 1; display: flex; justify-content: center; }
.com-page .proc-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(29, 78, 216, .18);
}
.com-page .proc-arr-cell { flex: 0 0 32px; display: flex; justify-content: center; align-items: center; }
.com-page .proc-arr-cell svg { width: 20px; height: 20px; }
.com-page .proc-labels-line { display: flex; align-items: flex-start; }
.com-page .proc-lbl-cell {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
  line-height: 1.4;
}
.com-page .proc-lbl-spc { flex: 0 0 32px; }

/* Scroll Reveal */
.com-page .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.com-page .reveal.visible { opacity: 1; transform: none; }

/* ── 반응형 ── */
@media (max-width: 1200px) {
  .com-page section { border: none; }
}
@media (max-width: 900px) {
  .com-page section.com2 .content .content-inner { flex-direction: column; }
}
@media (max-width: 780px) {
  .com-page h2.sub-title { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 1rem; }
  .com-page section .title h3 { font-size: 1rem; }
  .com-page section .title p { font-size: 0.875rem; }
  .com-page section .content h4 { font-size: 0.875rem; }
  .com-page section .content p { font-size: 0.8rem; }
  .com-page section .help-box ul li { font-size: 0.75rem; }
  .com-page section.com2 .content .content-inner .box-item h5 { font-size: 0.875rem; }
  .com-page section.com2 .content .content-inner .box-item p { font-size: 0.8rem; }
  .com-page section.com2 .content .content-inner .box-item .tag-wrap span { font-size: 0.75rem; }
  .com-page .proc-dot { width: 36px; height: 36px; font-size: 13px; }
  .com-page .proc-lbl-cell { font-size: 11px; }
  .com-page .proc-arr-cell { flex: 0 0 20px; }
  .com-page .proc-lbl-spc { flex: 0 0 20px; }
}