/* =========================================================
   pages/about.css — 회사소개(About us) 전용
   (Overview · CEO Message · Group Structure · Value)
   ⚠ 이 파일은 page-about-us.php 담당. 다른 페이지 클래스 정의 금지.
   ========================================================= */

/* ---------- Overview: 특징 2x2 그리드 ---------- */
.ov-grid { margin-top: 64px; border-top: 1px solid #cdcdcd; display: grid; grid-template-columns: 1fr 1fr; }
.ov-item { display: flex; align-items: center; gap: 44px; min-height: 266px; padding: 50px; border-bottom: 1px solid #cdcdcd; transition: background-color .35s var(--e-out); }
.ov-item:nth-child(odd) { border-right: 1px solid #cdcdcd; padding-left: 0; padding-right: 50px; }
.ov-item:nth-child(even) { padding-right: 0; padding-left: 50px; }
.ov-item:hover { background-color: #fafcf5; }
.ov-icon { flex-shrink: 0; width: 90px; height: 90px; color: var(--green); transition: transform .4s var(--e-out); }
.ov-icon svg, .ov-icon img { width: 100%; height: 100%; display: block; object-fit: contain; }
.ov-item:hover .ov-icon { transform: translateY(-3px) scale(1.05); }
.ov-item h3 { font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 10px; line-height: 1.35; letter-spacing: -.65px; }
.ov-item p { font-size: 20px; line-height: 1.5; letter-spacing: -.5px; color: var(--ink); }

/* ---------- CEO Message ---------- */
.ceo-wrap { display: flex; gap: 100px; align-items: flex-start; }
.ceo-photo { flex-shrink: 0; width: 437px; aspect-ratio: 437 / 860; overflow: hidden; border-radius: 4px; }
.ceo-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--e-out); }
.ceo-photo:hover img { transform: scale(1.04); }
.ceo-body { flex: 1; }
.ceo-quote { font-family: var(--font-body); font-weight: 500; font-size: 40px; line-height: 1.25; letter-spacing: -1px; color: var(--ink); margin: 44px 0 30px; }
.ceo-text { font-size: 20px; line-height: 1.5; letter-spacing: -.5px; color: var(--ink); }
.ceo-sign { margin-top: 30px; font-size: 20px; font-weight: 700; letter-spacing: -.5px; color: var(--ink); }

/* ---------- Group Structure — 통이미지(국/영) ---------- */
/* 관계사 구성도 이미지 — 화면 꽉 차는 풀폭(100vw), 제목은 컨테이너 유지 */
.group-img { margin-top: 50px; position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw; }
.group-img img { display: block; width: 100%; max-width: none; height: auto; margin: 0; }
@media (max-width: 768px) { .group-img { margin-top: 32px; } }

/* ---------- Group Structure (관계사 구성도) ---------- */
.org { margin-top: 60px; display: flex; flex-direction: column; align-items: center; }
.org-top {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--green); color: #fff; border-radius: 60px; padding: 24px 56px;
}
.org-top .ot-name { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: .01em; display: flex; align-items: center; gap: 10px; }
.org-top .ot-name img { height: 30px; width: auto; }
.org-top .ot-sub { font-size: 15px; opacity: .95; }
/* 연결선: HAN TECH ─┬─ 4노드. 가로 버스 끝점을 바깥 노드 '중심'에 정확히 맞춤
   (4열 grid, gap 20px → 바깥열 중심 = (100% - 3*20px)/8 지점) */
.org-connect { width: 100%; max-width: 1040px; height: 46px; position: relative; margin: 0 auto; }
.org-connect::before { content: ""; position: absolute; top: 0; bottom: -22px; left: 50%; transform: translateX(-50%); width: 1.5px; background: var(--green); }
.org-children { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; width: 100%; max-width: 1040px; position: relative; }
.org-children::before { /* 가로 버스 */
  content: ""; position: absolute; top: -22px; height: 1.5px; background: var(--green);
  left: calc((100% - 84px) / 8); right: calc((100% - 84px) / 8);
}
.org-node {
  position: relative; border: 1px solid var(--line); background: #fff; border-radius: 16px;
  padding: 46px 20px 40px; min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; transition: border-color .3s var(--e-out), transform .3s var(--e-out), box-shadow .3s var(--e-out);
}
.org-node::before { content: ""; position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 1.5px; height: 22px; background: var(--green); }
.org-node::after { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.org-node:hover { border-color: var(--green); transform: translateY(-4px); box-shadow: 0 16px 30px rgba(0,0,0,.08); }
.org-node .on-icon { display: block; width: 58px; height: 58px; margin: 0 auto 22px; color: var(--green); }
.org-node .on-icon svg, .org-node .on-icon img { width: 100%; height: 100%; object-fit: contain; }
.org-node h4 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
.org-node p { font-size: 14px; color: var(--gray); }

/* ---------- Value 카드 — flex 아코디언(고정 높이로 4개 항상 동일 크기)
   Figma 161-497: 호버 시 카드가 넓어지며 초록 패널 + 설명 노출 ---------- */
.value-cards { margin-top: 44px; display: flex; gap: 20px; }
.value-card {
  position: relative; flex: 1 1 0; min-width: 0; height: 500px; overflow: hidden; border-radius: 0;
  display: flex; flex-direction: column; justify-content: flex-start; padding: 35px; color: #fff;
  transition: flex-grow .55s var(--e-expo);
}
.value-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s var(--e-out); }
/* 기본 어둠 베일 */
.value-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.05) 45%, rgba(0,0,0,.45) 100%); transition: opacity .5s var(--e-out); }
/* 호버 시 초록 패널 */
.value-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--green); opacity: 0; transition: opacity .5s var(--e-out); }
.value-cards:hover .value-card { flex-grow: .8; }
.value-cards:hover .value-card:hover { flex-grow: 2.8; }
.value-card:hover img { transform: scale(1.06); }
.value-card:hover::before { opacity: 1; }
.value-card:hover::after { opacity: 0; }
.value-card .vc-no { position: relative; z-index: 2; font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: -.65px; opacity: .9; }
.value-card .vc-name { position: relative; z-index: 2; margin-top: 10px; font-family: var(--font-head); font-weight: 800; font-size: 36px; line-height: 1.2; letter-spacing: -.9px; }
.value-card .vc-desc {
  position: relative; z-index: 2; margin-top: auto; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.96);
  opacity: 0; transform: translateY(12px); transition: opacity .4s var(--e-out) .1s, transform .4s var(--e-out) .1s;
  pointer-events: none;
}
.value-card:hover .vc-desc { opacity: 1; transform: none; }

/* ---------- Value 인트로 문구 (라이브 기준 48px / 500 / 좌측) ---------- */
#value .sec-lead.muted { font-size: 60px; font-weight: 500; line-height: 1.17; color: var(--gray-3); max-width: none; letter-spacing: -1.5px; }
#value .sec-lead.muted b { color: var(--ink); font-weight: 500; }

/* ---------- Certification & Technology (인증서) ---------- */
/* 인증서: 왼쪽 정렬(추후 이미지 추가 대비) */
.cert-grid { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: flex-start; }
.cert-item { margin: 0; text-align: left; }
.cert-item img {
  display: block; width: 340px; max-width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 4px; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  transition: transform .4s var(--e-out), box-shadow .4s var(--e-out);
}
.cert-item img:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.14); }
.cert-item figcaption { margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--gray); }

/* ---------- 반응형 ---------- */
@media (max-width: 1024px) {
  .ceo-wrap { flex-direction: column; gap: 30px; }
  .ceo-photo { width: min(360px, 70%); }
  .ceo-quote { font-size: 30px; }
  .ceo-text { font-size: 18px; }
  #value .sec-lead.muted { font-size: 44px; }
  .value-card { height: 420px; padding: 30px; }
  .value-card .vc-no { font-size: 22px; }
  .value-card .vc-name { font-size: 30px; }
}
@media (max-width: 768px) {
  .cert-item img { width: 280px; }
  #value .sec-lead.muted { font-size: 30px; }
}
@media (max-width: 768px) {
  /* Overview: 1열 */
  .ov-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .ov-item, .ov-item:nth-child(odd), .ov-item:nth-child(even) { padding: 30px 0; border-right: 0; gap: 24px; min-height: 0; }
  .ov-icon { width: 64px; height: 64px; }
  .ov-item h3 { font-size: 20px; }
  .ov-item p { font-size: 16px; }

  /* CEO: 사진 위 / 텍스트 아래 (스택은 1024에서 시작) */
  .ceo-wrap { gap: 26px; }
  .ceo-photo { width: 100%; aspect-ratio: 4 / 3; }
  .ceo-quote { font-size: 24px; margin: 20px 0 22px; }
  .ceo-text { font-size: 16px; line-height: 1.65; }

  /* Group Structure: 큰 초록 pill 축소 */
  .org { margin-top: 40px; }
  .org-top { padding: 18px 34px; border-radius: 40px; max-width: 100%; }
  .org-top .ot-name { font-size: 20px; gap: 8px; }
  .org-top .ot-name img { height: 24px; }
  .org-top .ot-sub { font-size: 14px; }
  /* 연결선/점 숨김 유지, 2열 카드 */
  .org-connect { display: none; }
  .org-children { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
  .org-children::before, .org-node::before, .org-node::after { display: none; }
  .org-node { margin-top: 0; min-height: 170px; padding: 28px 14px 26px; border-radius: 14px; }
  .org-node .on-icon { width: 48px; height: 48px; margin-bottom: 16px; }
  .org-node h4 { font-size: 16px; }
  .org-node p { font-size: 13px; }

  /* 모바일: 호버 불가 → 2열 래핑, 기본 '이미지' 노출(초록 패널 X, 어둠 베일 O) */
  .value-cards { flex-wrap: wrap; gap: 14px; margin-top: 32px; }
  .value-card { flex: 1 1 44%; height: 300px; padding: 26px; }
  .value-cards:hover .value-card, .value-card:hover { flex-grow: 1; }
  .value-card .vc-no { font-size: 18px; }
  .value-card .vc-name { font-size: 26px; white-space: normal; }
  .value-card::before { opacity: 0; }   /* 초록 패널 숨김 → 이미지 보임 */
  .value-card::after { opacity: 1; }     /* 어둠 베일 유지(글자 가독) */
  .value-card:hover img { transform: none; }
  .value-card .vc-desc { display: none; } /* 모바일은 기본카드(이미지+번호+이름)만 */
  .value-card.reveal-img > img { clip-path: none !important; } /* 모바일은 클립 애니 끄고 이미지 즉시 노출(안뜸 방지) */

  /* Certification: 모바일 폭에 맞춤 */
  .cert-grid { margin-top: 32px; gap: 20px; }
}

@media (max-width: 480px) {
  /* Group Structure: pill 추가 축소 + 카드 1열 */
  .org-top { padding: 15px 24px; }
  .org-top .ot-name { font-size: 18px; }
  .org-top .ot-name img { height: 22px; }
  .org-top .ot-sub { font-size: 13px; }
  .org-children { grid-template-columns: 1fr; gap: 12px; }
  .org-node { min-height: 150px; padding: 26px 16px; }

  /* Value: 1열 전폭 카드 (좁은 폭에서 텍스트 가독성 확보) */
  .value-card { flex: 1 1 100%; height: 300px; }
  .value-card .vc-name { font-size: 24px; }

  /* Certification: 이미지 전폭 */
  .cert-item img { width: 100%; }
}

/* 이미지 가로 오버플로우 방지 */
.ceo-photo img, .value-card img, .org-top .ot-name img, .cert-item img { max-width: 100%; }