/* 프로젝트 전용 스타일. Instant 원본 스타일은 main.css에 유지합니다. */
/* 전체 페이지 폰트 */
:root {
  --default-font: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --heading-font: var(--default-font);
  --nav-font: var(--default-font);
}

body,
button,
input,
textarea,
select {
  font-family: var(--default-font);
}

/* Keep only the main section titles at one consistent size. */
.section-heading-title {
  font-size: 36px !important;
  font-weight: 700;
}

/* Match the visible footer company area background. */
#ceo {
  background-color: color-mix(in srgb, var(--background-color), white 5%);
}

/* Match the Portfolio heading style: left aligned title with a gold underline. */
#ceo .portfolio-title {
  text-align: left;
  padding-bottom: 50px;
  margin-bottom: 0;
}

#ceo .portfolio-title h2 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

#ceo .portfolio-title h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 70px;
  height: 4px;
  background: var(--accent-color);
}

#ceo .portfolio-title h2::after {
  display: none;
}

@media (max-width: 991px) {
  #ceo .portfolio-title {
    text-align: center;
  }

  #ceo .portfolio-title h2::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

#ceo .ceo-message-layout {
  --ceo-image-text-gap: 50px;
  /* 데스크톱 사진과 텍스트 사이 간격 */
}

#ceo .ceo-message-image {
  text-align: center;
}

#ceo .ceo-message-image img {
  width: min(100%, 160px);
  aspect-ratio: 1;
  object-fit: cover;
}

@media (min-width: 992px) {
  #ceo .ceo-message-photo-column {
    padding-right: var(--ceo-image-text-gap);
  }

  #ceo .ceo-message-image {
    text-align: right;
  }
}

#ceo .ceo-message-content h3 {
  margin-bottom: 4px;
}

#ceo .ceo-message-content {
  padding-left: 0;
  padding-right: 0;
}

#ceo .ceo-message-content>a {
  display: inline-block;
  margin-bottom: 24px;
}

#ceo .ceo-message-text {
  line-height: 1.65;
  word-break: keep-all;
}

#ceo .ceo-message-text p {
  margin-bottom: 10px;
}

#ceo .ceo-message-text p:last-child {
  margin-bottom: 0;
}

/* Responsive portfolio grid with the existing card design. */
#Portfolio .portfolio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 30px;
}

#Portfolio .portfolio-item {
  min-width: 0;
}

@media (min-width: 576px) {
  #Portfolio .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  #Portfolio .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  #Portfolio .portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

#Portfolio .project-card {
  display: block;
  color: var(--default-color);
  text-decoration: none;
}

#Portfolio .project-card:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: -2px;
}

#Portfolio .project-card .member-image {
  padding: 0;
  aspect-ratio: 1 / 1;
}

#Portfolio .project-card .member-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: var(--surface-color);
}

#Portfolio .project-card .member-image::before {
  display: none;
}

/* Existing CEO message adapted to the footer. */
.footer .footer-logo {
  display: block;
  width: 150px;
  height: auto;
  filter: brightness(0) invert(1);
}

.footer .footer-company-compact {
  text-align: center;
}

.footer .footer-company-compact .logo {
  justify-content: center;
  margin-bottom: 16px;
}

.footer .footer-company-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  padding-top: 0;
  line-height: 1.6;
}

@media (max-width: 575px) {
  .footer .footer-company-details {
    flex-direction: column;
    gap: 4px;
  }
}

.footer .footer-top {
  padding-top: 20px;
  padding-bottom: 20px;
}

.footer .footer-ceo-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

.footer .footer-ceo-photo {
  align-self: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
}

.footer .footer-ceo-profile {
  margin-bottom: 16px;
}

.footer .footer-ceo-profile h5 {
  margin-bottom: 4px;
}

.footer .footer-ceo-message {
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.footer .footer-ceo-message p {
  margin-bottom: 6px;
}

.footer .footer-ceo-message p:last-child {
  margin-bottom: 0;
}

@media (max-width: 575px) {
  .footer .footer-ceo-body {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 16px;
  }

  .footer .footer-ceo-photo {
    width: 64px;
    height: 64px;
  }
}