@charset "utf-8";

/* ============================================================
   [ company.css ] 회사소개 전용 스타일 (공통 속성은 layout.css로 분리)
   ============================================================ */

/* ============================================================
   🚨 [핵심] 서브페이지 섹션 여백(Padding) 컨트롤
   ============================================================ */
/* (참고: 모든 페이지 첫 번째 인트로 구역 패딩은 layout.css의 .sub-intro-common이 대신합니다) */

/* PC: 하단 구역 (약속, 철학 등) */
.greet-promise, .about-philosophy { padding: 120px 0 140px; }

/* PC: 내부 섹션 분리 구역 */
.about-vision { padding: 100px 0; }


/* ============================================================
   [ 1 ] 대표인사말 (greeting.php)
   ============================================================ */
/* ── 1. 비전 인트로 영역 ── */
.greet-intro { position: relative; text-align: center; min-height: 400px; background-image: url('/images/company/greet_bg.png'); background-size: 100% auto; background-position: center bottom; background-repeat: no-repeat; }

.greet-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 80px; }
.greet-img-wrap { position: relative; width: 100%; border-radius: 16px; overflow: hidden; aspect-ratio: 5 / 3; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); }
.greet-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.greet-img-wrap:hover img { transform: scale(1.05); }

/* ── 2. 약속(Promise) 영역 (4단 그리드) ── */
.greet-promise { background: #f4f5f5; }
.greet-promise-header { width: 100%; text-align: center; margin-bottom: 80px; }
.greet-promise-title.scroll-fill-text { display: block; font-family: var(--font-deco), var(--font-kr); font-size: 3.2rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.03em; color: #d0d0d0; margin-bottom: 32px; }
.greet-promise-title.scroll-fill-text span { color: #d0d0d0; transition: color 0.1s ease-out; }
.greet-promise-title.scroll-fill-text span.filled { color: var(--c-darkgreen); }

.greet-promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.greet-promise-item { display: flex; flex-direction: column; align-items: center; }

.promise-img-box { width: 140px; height: 140px; margin-bottom: 30px; display: flex; align-items: center; justify-content: center; }
.promise-img-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.promise-title { font-size: 1.5rem; font-weight: 800; color: #111; margin-bottom: 16px; letter-spacing: -0.02em; }
.promise-title span { display: block; font-family: var(--font-en); font-size: 1rem; color: var(--c-green); margin-top: 4px; }
.promise-desc { font-size: 1rem; line-height: 1.6; color: #555; word-break: keep-all; overflow-wrap: break-word; margin: 0; }


/* ============================================================
   [ 2 ] 회사소개 (about.php)
   ============================================================ */
/* ── 1. 인트로 및 개요 ── */
.about-intro { text-align: center; } /* 텍스트 정렬은 여기서 안전하게 유지합니다 */

.about-overview { position: relative; width: 100%; height: 600px; background-image: url('/images/company/about_overview_bg.png'); background-size: cover; background-position: center; background-attachment: fixed; }
.about-overview-box { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px); width: 480px; padding: 60px 50px; border-top: 4px solid var(--c-green); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }
.about-overview-box dl { margin: 0; }
.about-overview-box dt { font-size: var(--fz-lead); font-weight: 800; color: #111; margin-bottom: 8px; margin-top: 36px; }
.about-overview-box dt:first-child { margin-top: 0; }
.about-overview-box dd { font-size: var(--fz-body); color: #555; margin: 0; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }

/* ── 2. 비전 ── */
.about-title { font-size: var(--fz-title); font-weight: 800; color: var(--c-darkgray); line-height: 1.3; margin-bottom: 60px; letter-spacing: -0.02em; }
.about-vision-inner { display: flex; justify-content: space-between; align-items: stretch; gap: 80px; }
.about-vision-media { flex: 1; background: #000; border-radius: 12px; display: flex; align-items: center; justify-content: center; min-height: 400px; overflow: hidden; position: relative; box-shadow: 0 10px 30px rgba(0,0,0,0.05); } 
.about-vision-list-wrap { flex: 0 0 380px; display: flex; flex-direction: column; justify-content: center; gap: 50px; text-align: right; }
.about-vision-item h4 { font-family: var(--font-en); font-size: var(--fz-sub); font-weight: 800; color: #111; margin: 0 0 12px; line-height: 1.1; letter-spacing: -0.02em; }
.about-vision-item p { font-size: var(--fz-body); color: #666; margin: 0; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }

/* ── 3. 철학 (Core Values - 카드형 복구) ── */
.about-philosophy { background: #f4f5f5; }
.about-phil-header { text-align: center; margin-bottom: 80px; }
.about-phil-header .cp-label { color: #111; font-weight: 600; margin-bottom: 16px; }
.about-phil-header .about-title { font-size: 3rem; font-weight: 800; color: #111; letter-spacing: -0.03em; margin: 0; }

.about-phil-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-phil-card { border: 1px solid #eaeaea; border-radius: 16px; padding: 50px 40px; text-align: left; background: #fff; transition: all 0.3s ease; }
.about-phil-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.08);}

.about-phil-icon-box { font-size: 2.2rem; color: #444; margin-bottom: 30px; transition: color 0.3s ease; }
.about-phil-card:hover .about-phil-icon-box { color: var(--c-green); }

.about-phil-title { font-size: 1.5rem; font-weight: 800; color: #111; margin-bottom: 8px; letter-spacing: -0.02em; }
.about-phil-en { font-family: var(--font-deco); font-size: 1rem; font-weight: 400; color: #aaa; letter-spacing: -0.05em; display: block; margin-bottom: 16px; }
.about-phil-desc { font-size: 1.05rem; line-height: 1.6; color: #666; word-break: keep-all; overflow-wrap: break-word; margin: 0; }

/* ============================================================
   [ 3 ] 회사연혁 (history.php) - 원본 100% 복구!
   ============================================================ */
.hist-timeline-wrap { position: relative; display: flex; flex-direction: column; gap: 160px; padding-bottom: 50px; }

.hist-center-line { position: absolute; top: 0; left: 45%; width: 2px; height: 100%; transform: translateX(-50%); z-index: 10; }
.hist-line-bg { position: absolute; inset: 0; background: #e5e5e5; }
.hist-line-progress { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: var(--c-green); transition: height 0.1s ease-out; }

.hist-year-dot { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; background: #f4f4f4; border: 3px solid #cccccc; border-radius: 50%; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 15; }
.hist-year-dot.active { width: 18px; height: 18px; background: var(--c-green); border-color: var(--c-green); animation: dotBlink 1.5s infinite; }
@keyframes dotBlink { 0% { box-shadow: 0 0 0 0 rgba(135, 203, 108, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(135, 203, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(135, 203, 108, 0); } }

.hist-era { display: flex; align-items: stretch; justify-content: space-between; position: relative; }
.hist-era-left { flex: 0 0 40%; position: relative; }
.hist-era-sticky-box { position: sticky; top: 180px; }
.hist-era-title { font-family: var(--font-en); font-size: 3rem; font-weight: 800; color: var(--c-darkgray); letter-spacing: -0.02em; margin-bottom: 16px; line-height: 1; }
.hist-era-desc { font-size: var(--fz-body); line-height: 1.6; color: var(--c-gray); margin-bottom: 40px; word-break: keep-all; overflow-wrap: break-word; }

.hist-slider-container { position: relative; width: 100%; }
.hist-slider-wrap { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); background: #f0f0f0; }
.hist-slider-track { display: flex; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.hist-slide { flex: 0 0 100%; width: 100%; height: 100%; }
.hist-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hist-slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.hist-dot { width: 8px; height: 8px; border-radius: 50%; background: #dddddd; transition: all 0.3s ease; padding: 0; cursor: pointer; border: none; }
.hist-dot.active { width: 24px; border-radius: 4px; background: var(--c-green); }

.hist-era-right { flex: 0 0 50%; padding-top: 10px; }
.hist-year-group { margin-bottom: 80px; }
.hist-year-title { font-family: var(--font-en); font-size: var(--fz-title); font-weight: 800; color: var(--c-green); margin-bottom: 30px; letter-spacing: -0.01em; }
.hist-month-list li { position: relative; padding: 12px 0 12px 24px; }
.hist-month-list li::before { content: ''; position: absolute; left: 0; top: 22px; width: 6px; height: 6px; background: #ccc; border-radius: 50%; }
.hist-event { margin: 0; font-size: var(--fz-body); line-height: 1.6; color: var(--c-gray); word-break: keep-all; overflow-wrap: break-word; }


/* ============================================================
   [ 4 ] 오시는길 (location.php) - 원본 100% 복구!
   ============================================================ */
.loc-map-section { width: 100%; margin-bottom: 120px; }
.loc-map-section:last-child { margin-bottom: 0; }

.loc-info-wrap { margin-bottom: 40px; }
.loc-main-title { font-family: var(--font-en); font-size: var(--fz-title); font-weight: 800; color: var(--c-darkgray); letter-spacing: -0.02em; margin: 0 0 40px; }
.loc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 20px; }
.loc-info-item { display: flex; flex-direction: column; gap: 12px; }
.loc-info-item.full-width { grid-column: 1 / -1; }
.loc-info-label { font-size: 0.95rem; color: #888888; font-weight: 500; }
.loc-info-text { font-size: 1.2rem; font-weight: 500; color: #222222; margin: 0; display: flex; align-items: center; gap: 8px; }

.loc-btn-copy { color: #999; font-size: 1.1rem; border: none; background: transparent; cursor: pointer; transition: color var(--tr-fast); }
.loc-btn-copy:hover { color: var(--c-darkgray); }
.loc-info-eng { font-family: var(--font-en); font-size: 1.05rem; color: #666666; margin: 4px 0 0; }

.loc-map-frame { width: 100%; height: 600px; background: #e5e5e5; border-radius: 12px; overflow: hidden; }
.loc-map-frame iframe { width: 100% !important; height: 100% !important; border: none !important; display: block; }


/* ============================================================
   📱 모바일 및 태블릿 반응형
   ============================================================ */
/* ── 태블릿 (1024px) ── */
@media(max-width: 1024px) {
  /* 인사말 */
  .greet-promise-grid { grid-template-columns: repeat(2, 1fr); gap: 60px 30px; }
  
  /* 회사소개 */
  .about-vision-inner { flex-direction: column; gap: 50px; }
  .about-vision-media { width: 100%; min-height: 350px; aspect-ratio: 16/9; }
  .about-vision-list-wrap { width: 100%; text-align: left; flex: auto; gap: 40px; } 
  .about-overview-box { width: 400px; padding: 50px 40px; }
}

/* ── 모바일 (768px) ── */
@media(max-width: 768px) {
  /* 공통 섹션 여백 충돌 방지를 위해 하단 구역 패딩만 조절 */
  .greet-promise, .about-philosophy { padding: 80px 0 100px !important; }
  .about-vision { padding: 60px 0 !important; }

  /* 인사말 */
  .greet-promise-header { margin-bottom: 50px; }
  .greet-promise-title.scroll-fill-text { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; padding: 0 10px; }
  .greet-promise-grid { grid-template-columns: 1fr; gap: 50px; }
  .promise-img-box { width: 120px; height: 120px; margin-bottom: 20px; }

  .greet-gallery { grid-template-columns: 1fr; gap: 16px; margin-top: 50px; }
  .greet-img-wrap { aspect-ratio: 4 / 2; }

  /* 회사소개 */
  .about-overview { height: auto; min-height: auto; background-attachment: scroll !important; padding: 10px 0 200px; display: block;}
  .about-overview .sub-inner { display: block; }
  .about-overview-box { width: 100%; padding: 10px 24px; border-radius: 0px; }
  .about-overview-box dt { margin-top: 4px; }
  .about-overview-box dd { line-height: 1.2; }
  
  .about-vision-media { width: 100%; min-height: auto !important; aspect-ratio: 16 / 9; border-radius: 8px; }
  .about-vision-media > div { width: 100% !important; height: 100% !important; }
  
  .about-phil-header { margin-bottom: 50px; }
  .about-phil-header .about-title { font-size: 2rem; }
  
  .about-phil-cards { grid-template-columns: 1fr; gap: 16px; }
  .about-phil-card { padding: 24px 20px; display: flex; align-items: center; gap: 20px; }
  .about-phil-icon-box { margin-bottom: 0; font-size: 2.2rem; flex: 0 0 auto; }
  .about-phil-card > div { display: flex; flex-direction: column; justify-content: center; }
  .about-phil-title { margin-bottom: 4px; font-size: 1.3rem; }
  .about-phil-en { margin-bottom: 8px; font-size: 0.9rem; }

  /* 회사연혁 - 원본 복구! */
  .hist-timeline-wrap { gap: 80px; }
  .hist-center-line { left: 10px; transform: none; }
  .hist-era { flex-direction: column; gap: 40px; padding-left: 32px; }
  .hist-era-left { width: 100%; }
  .hist-era-sticky-box { position: static; }
  .hist-era-desc { margin-bottom: 24px; }
  .hist-era-right { width: 100%; padding-top: 0; }
  .hist-year-group { margin-bottom: 50px; }
  .hist-year-title { margin-bottom: 20px; }
  .hist-month-list li { padding: 12px 0 12px 20px; }

  /* 오시는길 - 원본 복구! */
  .loc-map-section { margin-bottom: 80px; }
  .loc-info-wrap { margin-bottom: 24px; }
  .loc-main-title { font-size: 2.2rem; margin-bottom: 32px; }
  .loc-info-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .loc-info-item { gap: 6px; }
  .loc-info-label { font-size: 0.85rem; }
  .loc-info-text { font-size: 1.05rem; } 
  .loc-info-eng { font-size: 0.95rem; }
  .loc-map-frame { height: 400px; }
}