/* ═══════════════════════════════════════════════════════════
   PHASE 3 — phase3.css
   1) BRAND↔SERVICE 토글 (네비 우측, service 진입 유일 경로)
   2) 하단 고정바 전화번호 1899-8478 (골드, tel: 연결)
   3) hero-secondary / company-history 빈 밴드 높이 정리
   4) store 갤러리 글씨 가독성(흰 반투명 레이어 강화)
   · index.html 전용. 변수는 theme-phase2.css 정의 재사용.
   · 가장 마지막 로드 → override.
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   [1] BRAND ↔ SERVICE 토글 (BHC식 세그먼트 스위치)
───────────────────────────────────────── */
.brand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #fff;
  border: 1px solid var(--color-line, #ececec);
  border-radius: 999px;
}
.brand-toggle__opt {
  font-family: var(--font-en, 'Bebas Neue', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--color-text-sub, #555);
  padding: 7px 16px;
  border-radius: 999px;
  line-height: 1;
  transition:
    background var(--transition, 0.25s),
    color var(--transition, 0.25s);
}
.brand-toggle__opt.is-active {
  background: var(--gold);
  color: #1a1a1a;
}
.brand-toggle__opt:not(.is-active):hover {
  color: var(--gold-dark);
}

/* GNB 바 안쪽 좌우 여백 — 로고/메뉴·토글이 화면 끝에 붙지 않게
   (header.css 의 0 9% → 작은 고정 여백으로 override. 좌우 동일) */
.gnb__inner {
  padding: 0 24px;
}

/* 토글은 모바일에서도 노출 (service 진입 유일 경로) */
@media (max-width: 900px) {
  .gnb__right {
    display: flex;
    align-items: center;
    margin-left: auto; /* 로고 좌 / 토글·햄버거 우 */
  }
  .gnb__inner {
    padding: 0 16px; /* 모바일 좌우 여백 */
  }
}
@media (max-width: 480px) {
  .brand-toggle__opt {
    font-size: 0.72rem;
    padding: 7px 11px;
    letter-spacing: 0.5px;
  }
}

/* ─────────────────────────────────────────
   [2] 하단 고정바 — 전화상담 1899-8478 (골드 강조 / tel 연결 / 44px)
───────────────────────────────────────── */
.footer-bar__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  text-decoration: none;
  color: var(--color-text, #1a1a1a);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid var(--color-line, #ececec);
  border-radius: 8px;
  transition: border-color var(--transition, 0.25s);
}
.footer-bar__tel:hover {
  border-color: var(--gold);
}
.footer-bar__tel svg {
  color: var(--gold-dark);
  flex-shrink: 0;
}
.footer-bar__tel-text {
  font-size: 0.92rem;
}
.footer-bar__tel-text strong {
  color: var(--gold-dark);
  font-weight: 900;
  letter-spacing: 0.3px;
}

/* 모바일: 2줄 배치(전화/CTA 한 줄 + SNS 한 줄), 모두 44px 유지 */
@media (max-width: 640px) {
  .footer-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-bar__tel {
    order: 1;
    flex: 1 1 46%;
  }
  .footer-bar__cta {
    order: 2;
    flex: 1 1 46%;
  }
  .footer-bar__sns {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
  }
  /* 고정바가 2줄로 커지므로 본문 하단 여백 확대 */
  body {
    padding-bottom: 120px;
  }
}
@media (max-width: 420px) {
  /* 아주 좁은 화면: '전화상담' 라벨 숨기고 번호만 노출 */
  .footer-bar__tel-label {
    display: none;
  }
}

/* ─────────────────────────────────────────
   [3] 빈 밴드 높이 정리 (사진 제거로 비어버린 100vh 밴드)
       내용은 그대로, 높이만 콘텐츠 기준으로
───────────────────────────────────────── */
.hero-secondary {
  min-height: auto; /* 100vh 해제 — padding-block(80px)으로 높이 결정 */
}
.company-history {
  min-height: auto; /* 100vh 해제 — padding(100px)으로 높이 결정 */
}

/* ─────────────────────────────────────────
   [4] store 갤러리 — 글씨 뒤 흰 반투명 레이어 강화 (항상 읽히게)
───────────────────────────────────────── */
.store__overlay {
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.97) 0%,
    rgba(255, 255, 255, 0.9) 32%,
    rgba(255, 255, 255, 0.5) 62%,
    rgba(255, 255, 255, 0.12) 100%
  );
}
.store__title {
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
}
.store__desc,
.store__sub {
  text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}