/* ============================================================
   새솔경영자문센터 | 서브페이지 전용 스타일
   theme/saesol/css/sub.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   서브페이지 헤더
   - saesol.css 의 .hd-logo img 등을 높은 명시도로 덮어쓰므로
     반드시 모바일 미디어쿼리도 동일 명시도로 추가해야 함
   ══════════════════════════════════════════════════════════════ */

/* 스크롤 후 다크 배경 (메인페이지와 동일한 동작) */
#ss-header.is-sub.is-scrolled {
  background      : rgba(10, 15, 10, .96);
  backdrop-filter : blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 로고: saesol.css 와 동일 값 유지 (명시도 확보용) */
#ss-header.is-sub .hd-logo {
  margin-top: 17px;
}
#ss-header.is-sub .hd-logo img {
  width : 263px;
  height: 63px;          /* saesol.css 동기화값 */
}

/* GNB 높이 동일 */
#ss-header.is-sub .hd-gnb {
  height: 102px;
}

/* ── 모바일 반응형 (명시도를 is-sub 수준으로 맞춤) ── */
@media (max-width: 900px) {
  /* PC GNB 숨김, 햄버거 표시 */
  #ss-header.is-sub .hd-gnb       { display: none; }
  #ss-header.is-sub .hd-hamburger { display: flex !important; }

  /* 로고 + 래퍼 */
  #ss-header.is-sub .hd-logo      { margin-top: 4px; }
  #ss-header.is-sub .hd-logo img  { width: 180px; height: auto; }
  #ss-header.is-sub .hd-wrap      { padding: 15px 24px; }
}

@media (max-width: 480px) {
  #ss-header.is-sub .hd-logo img  { width: 144px; }
}

/* ══════════════════════════════════════════════════════════════
   히어로 배너
   ══════════════════════════════════════════════════════════════ */
.sub-hero {
  position        : relative;
  background-color: #1a2a1a;
  background-image: linear-gradient(135deg, #111a11 0%, #1e3a1e 100%);
  min-height      : 280px;
  display         : flex;
  align-items     : center;
  overflow        : hidden;
  padding-top     : 110px;   /* 헤더 높이(27+63+여백) 확보 */
}
.sub-hero-overlay {
  position  : absolute; inset: 0;
  background: rgba(0,0,0,.35);
  z-index   : 0;
}
.sub-hero-body {
  position  : relative; z-index: 1;
  width     : 100%; max-width: 1200px;
  margin    : 0 auto;
  padding   : 60px 40px 48px;
}
.sub-hero-eyebrow {
  font-size     : 13px; font-weight: 700;
  color         : #2C6E2C;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom : 12px;
}
.sub-hero-title {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size     : clamp(28px, 4vw, 52px);
  font-weight   : 900; color: #ffffff;
  letter-spacing: -.03em; line-height: 1.2;
  margin-bottom : 20px;
}
.sub-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.45);
}
.sub-breadcrumb a { color: rgba(255,255,255,.55); transition: color .2s; }
.sub-breadcrumb a:hover { color: #ffffff; }
.sub-breadcrumb span   { color: rgba(255,255,255,.45); }

/* ══════════════════════════════════════════════════════════════
   공통 섹션 레이아웃
   ══════════════════════════════════════════════════════════════ */
.sub-section           { padding: 80px 0; background: #ffffff; }
.sub-section--gray     { background: #f4f4f4; }
.sub-section--nopadtop { padding-top: 0; }

.sub-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.sub-section-head { text-align: center; margin-bottom: 56px; }
.sub-eyebrow {
  font-size: 13px; font-weight: 700; color: #2C6E2C;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.sub-section-title {
  font-family   : 'Paperlogy', 'Pretendard', sans-serif;
  font-size     : clamp(24px, 3vw, 42px);
  font-weight   : 900; color: #111111;
  letter-spacing: -.03em; line-height: 1.35; margin-bottom: 16px;
}
.sub-section-title em  { color: #2C6E2C; font-style: normal; }
.sub-section-desc      { font-size: 16px; color: #666; line-height: 1.8; }

/* ══════════════════════════════════════════════════════════════
   회사소개 | 인사말
   ══════════════════════════════════════════════════════════════ */
.sub-greeting {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 72px; align-items: center;
}
.sub-greeting-text .sub-eyebrow        { text-align: left; }
.sub-greeting-text .sub-section-title  { text-align: left; margin-bottom: 24px; }
.sub-body-text { font-size: 16px; color: #444; line-height: 1.9; margin-bottom: 28px; }
.sub-ceo-name  { font-size: 15px; color: #666; font-weight: 500; }
.sub-ceo-name strong { color: #111; font-weight: 700; }
.sub-greeting-img {
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
  aspect-ratio: 3/4;
  background: linear-gradient(135deg, #e8ece8, #d4dcd4);
}
.sub-greeting-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══════════════════════════════════════════════════════════════
   회사소개 | 핵심 가치
   ══════════════════════════════════════════════════════════════ */
.sub-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sub-value-card {
  background: #ffffff; border-radius: 12px; padding: 40px 32px;
  box-shadow: 0 2px 20px rgba(0,0,0,.07);
  transition: transform .25s, box-shadow .25s; text-align: center;
}
.sub-value-card:hover { transform: translateY(-4px); box-shadow: 0 10px 40px rgba(0,0,0,.13); }
.sub-value-num {
  font-family: 'Paperlogy','Pretendard',sans-serif;
  font-size: 13px; font-weight: 700; color: #2C6E2C;
  letter-spacing: .1em; margin-bottom: 16px;
}
.sub-value-icon {
  width: 56px; height: 56px; margin: 0 auto 20px;
  background: #eaf3ea; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.sub-value-icon svg { width: 26px; height: 26px; stroke: #2C6E2C; }
.sub-value-title { font-size: 18px; font-weight: 800; color: #111; margin-bottom: 12px; letter-spacing: -.02em; }
.sub-value-desc  { font-size: 14px; color: #666; line-height: 1.75; }

/* ══════════════════════════════════════════════════════════════
   회사소개 | 주요 실적
   ══════════════════════════════════════════════════════════════ */
.sub-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; border-radius: 12px; overflow: hidden;
}
.sub-stat-card {
  background: #2C6E2C; padding: 40px 28px;
  text-align: center; transition: filter .2s;
}
.sub-stat-card:nth-child(even) { background: #468626; }
.sub-stat-card:hover { filter: brightness(1.1); }
.sub-stat-num {
  font-family: 'Paperlogy','Pretendard',sans-serif;
  font-size: clamp(28px, 3vw, 48px); font-weight: 900;
  color: #ffffff; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 12px;
}
.sub-stat-num span { font-size: .55em; font-weight: 700; }
.sub-stat-label  { font-size: 14px; font-weight: 600; color: rgba(255,255,255,.88); margin-bottom: 8px; line-height: 1.4; }
.sub-stat-period { font-size: 12px; color: rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════════════
   진행과정 | 스텝 리스트
   ══════════════════════════════════════════════════════════════ */
   반응형
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .sub-greeting      { grid-template-columns: 1fr; gap: 40px; }
  .sub-greeting-img  { max-width: 360px; aspect-ratio: 4/3; }
  .sub-value-grid    { grid-template-columns: repeat(2, 1fr); }
  .sub-stats-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .sub-hero          { padding-top: 80px; }  /* 모바일: 헤더 높이 축소 */
}
@media (max-width: 768px) {
  .sub-section       { padding: 56px 0; }
  .sub-container     { padding: 0 20px; }
  .sub-hero-body     { padding: 52px 20px 40px; }
  .sub-value-grid    { grid-template-columns: 1fr; }
  .sub-stats-grid    { grid-template-columns: 1fr; }
@media (max-width: 480px) {
  .sub-hero-title    { font-size: 28px; }