/* ============================================================
   pages.css
   - 페이지별(주로 메인페이지) 전용 예외 스타일
   - 공통 규칙(색상/간격/헤더/버튼/카드 등)은 common.css,
     components.css에 이미 정의되어 있으므로 여기서는 중복하지 않습니다.
   ============================================================ */

/* ============== 메인페이지 전용 섹션 ==============
 * 메인페이지 원본 캡처와 이후 제공된 COMPANY 소개 원문, 히어로용
 * 배경 사진 3장을 근거로 제작했습니다.
 * ================================================================ */

/* 공통: 콘텐츠 준비중/원문 확인 필요 안내 블록
   (원문이 아직 없는 다른 하위 섹션에서 재사용할 수 있습니다) */
.content-pending {
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
}

.content-pending__badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-accent-red);
  border: 1px solid var(--color-accent-red);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4);
  margin-bottom: var(--space-4);
}

.content-pending__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-3);
}

.content-pending__desc {
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ============== 1. 메인 비주얼(배경 사진 3장 슬라이드) ============== */
.main-visual {
  position: relative;
  color: #fff;
  background: var(--color-navy);
  overflow: hidden;
}

/* 배경 사진 슬라이드: 절대 위치 겹침 + opacity 크로스페이드.
   전환은 js/common.js가 .is-active 클래스를 옮기며 담당합니다. */
.main-visual__slides {
  position: absolute;
  inset: 0;
}

.main-visual__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.main-visual__slide.is-active {
  opacity: 1;
}

/* 인물·사물이 잘리지 않는 위치를 확인해 이미지별로 지정했습니다.
   (세 장 모두 center에서 주요 피사체가 자연스럽게 보였습니다) */
.main-visual__slide--1 { background-image: url("../images/hero/main-visual-1.webp"); background-position: center; }
.main-visual__slide--2 { background-image: url("../images/hero/main-visual-2.webp"); background-position: center; }
.main-visual__slide--3 { background-image: url("../images/hero/main-visual-3.webp"); background-position: center; }

/* 사진 위에서 흰 글자가 잘 보이도록 하는 약한 어두운 오버레이.
   가운데(문구가 있는 곳)를 조금 더 어둡게, 가장자리는 사진이 더
   잘 보이도록 옅게 처리했습니다. 사진 자체를 어둡게 편집하지
   않고 오버레이 레이어로만 처리해 세 장 모두에 공통 적용됩니다. */
.main-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(5, 13, 38, 0.5) 0%,
    rgba(5, 13, 38, 0.35) 55%,
    rgba(5, 13, 38, 0.24) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.main-visual__inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-8) var(--space-5);
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 이전/다음 화살표 + 인디케이터 점 */
.main-visual__controls {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}

.main-visual__arrow {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background var(--transition-fast);
}

.main-visual__arrow:hover,
.main-visual__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.15);
}

.main-visual__arrow svg {
  width: 18px;
  height: 18px;
}

.main-visual__dots {
  display: flex;
  gap: var(--space-2);
}

.main-visual__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.main-visual__dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.main-visual__dot:hover,
.main-visual__dot:focus-visible {
  background: rgba(255, 255, 255, 0.8);
}

/* 문구 뒤에 각진 박스를 두지 않고, 가장자리가 보이지 않는
   옅은 방사형 그라데이션만으로 가독성을 보조합니다.
   (사각형 경계가 눈에 띄지 않도록 fade-out 폭을 넓게 잡음) */
.main-visual__panel {
  background: radial-gradient(
    ellipse at center,
    rgba(5, 13, 38, 0.32) 0%,
    rgba(5, 13, 38, 0.16) 55%,
    rgba(5, 13, 38, 0) 80%
  );
  padding: var(--space-7);
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.main-visual__title {
  font-size: 2.3rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.main-visual__tagline {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.8;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.main-visual__contact {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.main-visual__contact-label {
  font-size: 1.3rem;
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* 전화번호는 클릭 가능한 버튼임을 알 수 있도록 얇은 테두리는
   유지하되, 배경은 각진 진한 박스 대신 가벼운 반투명으로 조정 */
.main-visual__phone {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 800;
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.main-visual__phone:hover,
.main-visual__phone:focus-visible {
  background: rgba(255, 255, 255, 0.22);
  text-decoration: underline;
}

/* 진한 별도 박스를 제거하고 텍스트로 자연스럽게 표시 (원문 그대로) */
.main-visual__note {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 640px) {
  .main-visual__inner {
    min-height: 320px;
    padding: var(--space-6) var(--space-4);
  }
  .main-visual__panel {
    padding: var(--space-5) var(--space-4);
  }
  .main-visual__title {
    font-size: 1.5rem;
  }
  .main-visual__tagline {
    font-size: 0.92rem;
  }
  .main-visual__contact-label {
    font-size: 1.05rem;
  }
  .main-visual__phone {
    font-size: 1.15rem;
    padding: var(--space-2) var(--space-4);
  }
  .main-visual__note {
    font-size: 0.85rem;
  }
}

/* ============== 2. COMPANY 소개 ============== */
.company-intro {
  padding-block: var(--space-8);
  background: var(--color-bg);
  text-align: center;
}

.company-intro__title {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1a1a1a;
  margin-bottom: var(--space-5);
}

.company-intro__desc {
  max-width: var(--content-narrow-width);
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .company-intro__title {
    font-size: 1.5rem;
  }
  .company-intro__desc {
    font-size: 0.95rem;
  }
  .company-intro__desc br {
    display: none;
  }
}

/* ============== 3. 주요 바로가기 영역 ==============
   원본 메인페이지 중앙의 깨진 이미지 3개(회사소개/인증분야/교육 안내로
   이동하는 바로가기)를 대체하는 카드입니다. 깨진 이미지는 재사용하지
   않고, 사용자가 제공한 사진을 배경으로 사용합니다. 마우스를 올리거나
   키보드로 포커스하면 카드가 위로 떠오르는 느낌으로 움직입니다
   (prefers-reduced-motion 사용자는 common.css의 전역 규칙에 따라
   애니메이션 없이 즉시 상태만 바뀝니다). */
.service-entry {
  padding-block: var(--space-7);
  background: var(--color-bg-alt);
}

/* 모바일: 세로 1열, 데스크톱(700px~): 한 줄 3열 */
.service-entry__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 760px;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .service-entry__list {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
    gap: var(--space-6);
  }
}

/* 카드가 살짝 아래로 눌려 있다가 뜨는 느낌을 주기 위한 여유 공간 */
.service-entry__list {
  padding-block: var(--space-2) var(--space-4);
}

.service-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-navy);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 22px rgba(20, 23, 63, 0.18);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

/* 평소에는 흰색 막을 아주 옅게(투명도 10%) 덮어 사진이 대부분 보이게
   하고, 마우스를 올리거나 키보드로 포커스하면 막이 완전히 걷혀(투명도 0)
   사진이 선명하게 드러납니다(사진 자체의 밝기/색은 편집하지 않음). */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color var(--transition-base);
}

.service-card__title {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: var(--space-4);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  word-break: keep-all;
  /* 사진마다 밝기가 달라도(밝은 건물 사진, 어두운 홀로그램 사진 등)
     글자가 항상 읽히도록 텍스트 자체에 그림자를 겹쳐 대비를 만들고,
     글자 바로 뒤에는 경계선이 없는 부드러운 어두운 원형 배경을 얹습니다
     (사각 박스가 아니라 가장자리가 서서히 사라지는 형태). */
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.65),
    0 2px 10px rgba(0, 0, 0, 0.55);
  background: radial-gradient(ellipse 70% 80% at center, rgba(6, 10, 30, 0.42) 0%, rgba(6, 10, 30, 0.22) 45%, rgba(6, 10, 30, 0) 78%);
}

/* 보트가 물 위로 떠오르듯, 위로 살짝 들리면서 그림자가 커집니다 */
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 22px 36px rgba(20, 23, 63, 0.32);
}

.service-card:hover::before,
.service-card:focus-visible::before {
  background: rgba(255, 255, 255, 0);
}

.service-card--1 { background-image: url("../images/content/service-1.webp"); }
.service-card--2 { background-image: url("../images/content/service-2.webp"); }
.service-card--3 { background-image: url("../images/content/service-3.webp"); }

@media (max-width: 480px) {
  .service-card {
    min-height: 140px;
  }
  .service-card__title {
    font-size: 1.3rem;
  }
}

/* ============== 4·5. 공지사항 / 교육 안내 ============== */
.home-boards {
  padding-block: var(--space-7);
}

.home-boards__grid {
  display: grid;
  grid-template-columns: minmax(220px, 260px) 1fr 1fr;
  gap: var(--space-6);
}

/* 그리드는 기본적으로 각 열의 높이를 가장 큰 열(고객센터)에 맞춰
   똑같이 늘립니다(align-items: stretch). 다만 늘어난 여백이 눈에
   보이려면 열 내부도 세로 flex로 만들어, 안내문 박스(board-slot)가
   남는 높이를 실제로 채우도록 해야 두 게시판의 아래쪽 테두리가
   고객센터의 카카오톡 버튼 하단과 같은 선에 맞춰집니다. */
.home-boards__col {
  display: flex;
  flex-direction: column;
}

.home-boards__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-navy);
}

.home-boards__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--color-navy);
}

.home-boards__more {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.home-boards__more:hover,
.home-boards__more:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

.board-slot--notice-home,
.board-slot--education-home {
  flex: 1 1 auto;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.home-board-empty,
.home-board-loading,
.home-board-error {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* ---- 최신글이 채워진 상태 ----
   /공지사항/, /교육안내/ 페이지를 fetch()로 불러와 제목·주소·작성일만
   뽑아 js/common.js가 새로 만든 목록(.home-board-list 이하)입니다.
   KBoard가 실제로 만든 원본 HTML을 그대로 넣는 것이 아니라 이 파일이
   직접 만든 마크업이므로, 아래 class는 모두 이 사이트 안에서만
   쓰이는 이름입니다. 이 두 상자 밖에는 영향이 없습니다.

   기본 .board-slot 규칙(점선 테두리·회색 배경·넉넉한 placeholder
   padding)은 "내용이 채워지기 전" 자리표시용 스타일입니다. 실제
   목록이 채워지면 흰색 카드로 바꾸고, 고객센터 열 높이에 맞춰
   flex로 늘어나지 않도록(flex: none) 고정해 두 게시판의 카드 높이를
   항상 동일하게 만듭니다. 높이는 목록 5줄 기준(행 높이 약 32px×5 +
   카드 padding)으로 고정하며, 글이 5개보다 적어도 카드 높이는
   그대로 유지됩니다(아래쪽이 비어 보일 수 있으나 두 게시판의 높이가
   서로 달라지는 것보다 우선합니다). */
.board-slot--notice-home.board-slot--has-content,
.board-slot--education-home.board-slot--has-content {
  display: block;
  flex: none;
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 198px;
}

.home-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* 한 행 = [불릿(고정 10px)] [제목(남는 공간, 말줄임)] [날짜(내용만큼,
   오른쪽 끝)]. grid는 각 <li>마다 독립적으로 계산되지만, 세 번째
   열이 auto 폭이라도 앞의 두 열(10px + 1fr)이 남는 공간을 모두
   차지하므로 날짜는 항상 카드 오른쪽 끝에 붙어 행마다 같은 위치에
   정렬됩니다. */
.home-board-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  padding-block: 6px;
}

.home-board-item__bullet {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.45;
  justify-self: center;
}

.home-board-item__title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.home-board-item__title:hover,
.home-board-item__title:focus-visible {
  color: var(--color-primary);
}

.home-board-item__date {
  white-space: nowrap;
  text-align: right;
  justify-self: end;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.home-board-item__date--empty {
  /* 날짜를 찾지 못한 게시글: 빈 칸으로 두되 요소 자체는 남겨 행 구조를
     유지합니다(정렬이 흐트러지지 않도록). */
  min-width: 1px;
}

/* ---- 고객센터 열 ----
   문의전화·이메일·카카오톡 버튼은 기존 isoaic.com 홈페이지 하단
   게시판 옆 "고객센터" 박스를 그대로 옮긴 것입니다. 전화번호의
   회색(#888888)·파란색(#356fbe)은 원본 화면에서 실제 픽셀 색상을
   추출한 값이며, 임의로 사이트 기본 색상으로 통일하지 않았습니다. */
.home-boards__col--cc {
  --cc-gray: #888888;
  --cc-blue: #356fbe;
}

.cc-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.cc-hours {
  font-size: 0.92rem;
  color: var(--cc-gray);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.cc-phone a {
  color: inherit;
  text-decoration: none;
}

.cc-phone a:hover,
.cc-phone a:focus-visible {
  text-decoration: underline;
}

.cc-phone--main {
  font-weight: 800;
  margin-bottom: var(--space-1);
  line-height: 1.2;
}

.cc-phone__prefix {
  font-size: 1.5rem;
  color: var(--cc-gray);
}

.cc-phone__num {
  font-size: 1.7rem;
  color: var(--cc-blue);
}

.cc-phone--sub {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cc-gray);
  margin-bottom: var(--space-3);
}

.cc-email {
  font-size: 0.88rem;
  color: var(--cc-gray);
  margin-bottom: var(--space-4);
}

.cc-email a {
  color: inherit;
}

.cc-kakao-link {
  display: inline-block;
  max-width: 200px;
  border-radius: var(--radius-sm);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.cc-kakao-link:hover,
.cc-kakao-link:focus-visible {
  opacity: 0.85;
}

.cc-kakao-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .home-boards__grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .home-boards__col--cc {
    text-align: center;
  }

  .cc-kakao-link {
    margin-inline: auto;
  }

  /* 태블릿 폭까지는 PC와 같은 한 줄(제목 왼쪽·날짜 오른쪽) 구성을
     유지하고, 글자만 살짝 줄여 여유를 둡니다. */
  .home-board-item__title {
    font-size: 0.86rem;
  }

  .home-board-item__date {
    font-size: 0.74rem;
  }
}

@media (max-width: 420px) {
  /* 매우 좁은 화면에서만 제목 아래 오른쪽에 날짜를 배치합니다(제목과
     겹치지 않도록). 불릿은 제목 첫 줄 높이에 맞춰 위쪽에 고정합니다. */
  .home-board-item {
    grid-template-columns: 10px minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 2px;
  }

  .home-board-item__bullet {
    grid-row: 1 / span 2;
    align-self: start;
    margin-top: 6px;
  }

  .home-board-item__title {
    grid-column: 2;
    grid-row: 1;
  }

  .home-board-item__date {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
    justify-self: end;
  }
}