/* ═══════════════════════════════════════════════════════════
   PHASE 4 — phase4.css
   1) 하단바 SNS 3종 브랜드 색
   3) 배경과 안 맞는 폰트색 전부 진하게 (가독성)
   4) 울산·부산·대구 카운터 제거 자리 placeholder
   5) solution 수치카드: 골드 테두리 + 우→좌 stagger 애니메이션
   6) solution 혜택 6개 카드화 (좌 아이콘 placeholder + 우 텍스트)
   7) 푸터 텍스트 진하게 + 잘림 방지
   · index.html 전용, 최후 로드. 변수는 theme-phase2 재사용.
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   [3] 가독성 — 서브 텍스트 전역 한 단계 진하게 (골드는 유지)
───────────────────────────────────────── */
:root {
  --color-text-sub: #3a3a3a; /* phase2 #555 → 진하게 */
}

/* ─────────────────────────────────────────
   [2] 상단 네비 정렬 — 이미 적용됨(로고 좌 / 메뉴·토글 우)
       theme-phase2(.gnb__menu margin-left:auto) + phase3(.gnb__right)
       변경 없이 유지. (확인용 주석)
───────────────────────────────────────── */

/* ─────────────────────────────────────────
   [1] 하단 고정바 SNS 3종 — 각 브랜드 고유색 (44px 유지)
───────────────────────────────────────── */
.footer-bar__sns-btn {
  border: none;
}
.footer-bar__sns-btn--kakao {
  background: #fee500;
  color: #3a1d1d;
}
.footer-bar__sns-btn--insta {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  color: #ffffff;
}
.footer-bar__sns-btn--naver {
  background: #03c75a;
  color: #ffffff;
}
.footer-bar__sns-btn:hover {
  filter: brightness(0.95);
}

/* ─────────────────────────────────────────
   [4] 경상도 지역 카운터 제거 자리 placeholder
───────────────────────────────────────── */
.signature__placeholder {
  max-width: 920px;
  margin: 0 auto;
  padding: 44px 24px;
  border: 1px dashed #d8cda0;
  border-radius: 16px;
  background: #fffdf5;
  color: #8a7a45;
  text-align: center;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

/* ─────────────────────────────────────────
   [5] solution 수치카드 — 골드 테두리 + 한글 라벨 + 우→좌 애니메이션
───────────────────────────────────────── */
.solution__card {
  border: 2px solid var(--gold); /* 노란색(골드) 테두리 */
  border-radius: 12px;
}
.solution__card:hover {
  border-color: var(--gold-dark);
}
/* 라벨이 한글로 바뀌므로 한글 폰트 + 자간 정리 */
.solution__card-label {
  font-family: var(--font-ko);
  letter-spacing: 0;
}

/* 우 → 좌 날아 들어오기 (반복 재생, JS가 .is-flyin 토글) */
html.p4ready .solution__card {
  opacity: 0;
  transform: translateX(64px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
html.p4ready .solution__card.is-flyin {
  opacity: 1;
  transform: translateX(0);
}
/* 카드별 stagger */
.solution__cards .solution__card:nth-child(1) {
  transition-delay: 0.05s;
}
.solution__cards .solution__card:nth-child(2) {
  transition-delay: 0.15s;
}
.solution__cards .solution__card:nth-child(3) {
  transition-delay: 0.25s;
}
.solution__cards .solution__card:nth-child(4) {
  transition-delay: 0.35s;
}

/* ─────────────────────────────────────────
   [6] solution 혜택 6개 — 카드화 (좌 아이콘 placeholder + 우 텍스트)
       이미지·이모지 없이, 연한 배경 flat, 일관 규격
───────────────────────────────────────── */
.solution__benefits {
  gap: 12px;
}
.solution__benefit {
  background: var(--color-bg-tint); /* 연한 배경 */
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 20px 22px;
  align-items: center;
}
.solution__benefit:hover {
  background: #fff8e3;
  transform: none; /* 원본의 translateX hover 제거(카드 정렬 유지) */
}
/* 좌측 아이콘 자리 (비워둠 — TODO) */
.solution__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: 1px dashed #d8cda0;
  border-radius: 10px;
  background: #fffdf5;
}
.solution__benefit-body h4 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-text);
  word-break: keep-all;
}
.solution__benefit-body p {
  font-size: 0.86rem;
  color: var(--color-text-sub);
  line-height: 1.7;
  word-break: keep-all;
}

/* ─────────────────────────────────────────
   [7] 하단 푸터 — 텍스트 진하게 + 전부 노출
───────────────────────────────────────── */
.footer-extended__legal-info p,
.footer-meta p,
.footer-copy {
  color: var(--color-text);
}
.footer-extended__legal-info strong,
.footer-meta strong {
  color: #000000;
}
.footer-legal-links a {
  color: var(--color-text);
}
.footer-legal-links a.is-strong {
  color: var(--gold-dark);
  font-weight: 700;
}
.cert-logo-main-label {
  color: var(--color-text-sub);
}
.footer-extended__legal,
.footer-extended__legal-info {
  overflow: visible; /* 잘림 방지 */
}

/* ─────────────────────────────────────────
   접근성 — 모션 줄이기
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.p4ready .solution__card {
    opacity: 1 !important;
    transform: none !important;
  }
}