/* ============================================================
   바로철거 — common.css
   변수 · 리셋 · 공통 타이포 · 헤더 · 푸터 · 버튼 · 유틸
   ============================================================ */

:root {
  /* 브랜드 팔레트 — 블랙 + 웜 그레이 + 시그널 오렌지
     네이비는 밝지도 어둡지도 않은 중간 명도라 흰 글씨·검은 글씨 어느 쪽과도
     대비가 애매했다. 명도 축을 블랙/오프화이트로 끝까지 벌리고,
     색은 오렌지 한 갈래만 남겨 시선이 갈 곳을 하나로 모은다. */
  --color-brand: #F1EFEA;        /* 웜 그레이 — 서피스 */
  --color-brand-dark: #1C1C1E;   /* 차콜 — 반전 섹션 배경 */
  --color-ink: #0E0E10;          /* 블랙 — 본문 · 헤드라인 · 반전 배경 */
  --color-ink-soft: #5E5C57;     /* 보조 텍스트 — 오프화이트 위 6:1 */
  --color-paper: #F7F6F3;        /* 페이지 베이스 */
  --color-white: #FFFFFF;        /* 카드 서피스 */
  /* 강조색 두 갈래 — 밝은 배경에는 accent, 블랙 위에는 accent-soft.
     한 색으로 통일하면 어느 한쪽에서 반드시 대비가 무너진다.
     accent #C2410C on #FFF → 5.2:1 · accent-soft #FF9A4D on #0E0E10 → 9.0:1 */
  --color-accent: #C2410C;       /* CTA · 강조 (밝은 배경) */
  --color-accent-deep: #9A3412;  /* 호버 */
  --color-accent-soft: #FF9A4D;  /* 블랙 위 강조 */
  --color-line: #E3E0D9;         /* 밝은 배경 구분선 */
  --color-line-dark: rgba(247, 246, 243, 0.16); /* 어두운 배경 구분선 */
  --color-ph: #E8E5DE;           /* 이미지 플레이스홀더 */

  --font-sans: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  --container: 1160px;
  --header-h: 72px;
  --gutter: clamp(20px, 4vw, 40px);
  /* 모서리 — 각진 인상을 덜어내되 과하게 둥글지 않은 선 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(10, 10, 11, 0.04), 0 8px 24px rgba(10, 10, 11, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(10, 10, 11, 0.06), 0 14px 34px rgba(10, 10, 11, 0.10);

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- 리셋 ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

[hidden] { display: none !important; }  /* display를 지정한 규칙에 hidden이 무력화되지 않도록 */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }

/* 숫자 — 실적·지표 공통 */
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- 포커스 ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
/* 네이비 위에서는 진한 파랑 링이 배경에 묻는다 — 밝은 쪽으로 바꾼다 */
.on-dark :focus-visible,
.hero :focus-visible,
.page-head :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible { outline-color: var(--color-accent-soft); }

/* ---------- 스킵 링크 ---------- */
.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  padding: 10px 18px;
  background: var(--color-ink); color: #fff; font-weight: 500;
  border-radius: var(--radius-sm);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- 컨테이너 ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- 공통 타이포 ---------- */
.overline {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.on-dark .overline { color: var(--color-accent-soft); }
.section-title {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.section-desc {
  margin-top: 14px;
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--color-ink-soft);
  max-width: 560px;
}
/* 한국어 줄바꿈 — 마지막 줄에 단어 하나만 덩그러니 남지 않도록 줄 길이를 고르게 맞춘다.
   (word-break: keep-all 과 함께 동작 · 미지원 브라우저는 기본 줄바꿈으로 폴백) */
.hero-title, .hero-sub,
.section-title, .section-desc, .page-desc,
.cf-note, .closing-steps p,
.strength p, .scope-item p, .book-card p, .stat-sub,
.process-note, .download-box p, .faq-a, .form-result p {
  text-wrap: balance;
}
/* 문장 단위 줄바꿈 — 문장마다 독립적으로 줄 길이를 맞춘다.
   (한 <p> 안에서 <br>만 쓰면 뒷문장 마지막 줄에 단어가 하나만 남는 경우가 생김) */
.ln { display: block; text-wrap: balance; }

.on-dark .section-title { color: var(--color-paper); }
.on-dark .section-desc { color: rgba(247, 246, 243, 0.66); }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 30px;
  font-size: 16px;
  font-weight: 500;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn-accent {
  background: var(--color-accent);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(194, 65, 12, 0.28);
}
.btn-accent:hover { background: var(--color-accent-deep); color: #fff; }
.btn-ghost-light {
  border: 1px solid rgba(247, 246, 243, 0.4);
  color: var(--color-paper);
}
.btn-ghost-light:hover { border-color: var(--color-paper); background: rgba(247, 246, 243, 0.06); }
.btn-ghost-dark {
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
}
.btn-ghost-dark:hover { background: var(--color-ink); color: var(--color-paper); }
.btn-ink {
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 500;
}
.btn-ink:hover { background: var(--color-brand-dark); }

/* ============================================================
   헤더
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--color-ink);
  border-bottom-color: var(--color-line-dark);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo { display: inline-flex; align-items: center; }
.logo img { width: 168px; height: 30px; object-fit: contain; object-position: left center; }

.gnb { display: flex; align-items: center; gap: 4px; }
.gnb a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
  color: rgba(247, 246, 243, 0.78);
  transition: color 0.2s var(--ease);
}
.gnb a:hover, .gnb a[aria-current="page"] { color: #fff; }

.gnb .header-tel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px 0 18px;
  margin-left: 12px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-accent-soft);
  border-left: 1px solid var(--color-line-dark);
}
.gnb .header-tel:hover { color: #fff; }

/* 햄버거 — 순수 CSS 라인 */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  z-index: 120;
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  width: 22px; height: 2px;
  background: var(--color-paper);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease), top 0.25s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 27px; }
.nav-open .nav-toggle span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ============================================================
   푸터
   ============================================================ */
.site-footer {
  background: var(--color-ink);
  color: rgba(247, 246, 243, 0.55);
  padding: 56px 0 40px;
  font-size: 13.5px;
  line-height: 1.75;
}

/* 상단 — 로고 / 대표번호 + SNS */
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--color-line-dark);
}
.footer-logo img {
  display: block;
  width: 150px; height: 27px;
  object-fit: contain; object-position: left center;
  opacity: 0.9;
}
.footer-contact {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-tel { text-align: right; line-height: 1.3; }
.footer-tel > span { display: block; font-size: 12.5px; letter-spacing: 0.02em; }
.footer-tel strong {
  display: block;
  margin-top: 3px;
  font-size: 26px;
  font-weight: 800;
  color: var(--color-paper);
  letter-spacing: -0.01em;
}
.footer-tel strong a:hover { color: var(--color-accent-soft); }

.footer-sns { display: flex; gap: 8px; }
.footer-sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line-dark);
  border-radius: 50%;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.footer-sns a:hover { border-color: rgba(247, 246, 243, 0.45); background: rgba(247, 246, 243, 0.06); }
.footer-sns img { width: 21px; height: 21px; object-fit: contain; opacity: 0.8; transition: opacity 0.2s var(--ease); }
.footer-sns a:hover img { opacity: 1; }

/* 사업자 정보 — 라벨/값 2열 정렬 */
.footer-info { padding-top: 26px; font-style: normal; }
/* 메일 주소는 눌러서 바로 보낼 수 있는 자리 — 링크임을 드러낸다 */
.footer-info dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(247, 246, 243, 0.35); }
.footer-info dd a:hover { color: var(--color-accent-soft); text-decoration-color: var(--color-accent-soft); }
.footer-info dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 7px;
}
.fi-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.fi-row dt { color: rgba(247, 246, 243, 0.38); font-weight: 400; }
.fi-row dd { color: rgba(247, 246, 243, 0.72); }
.fi-wide { grid-column: 1 / -1; }

/* 하단 — 링크 / 카피라이트 */
.footer-bottom {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--color-line-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: rgba(247, 246, 243, 0.75); font-weight: 500; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 12.5px; color: rgba(247, 246, 243, 0.35); }

/* ============================================================
   모바일 하단 고정 바 · 데스크톱 플로팅 전화
   ============================================================ */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  height: calc(60px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-cta-bar a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
}
.mobile-cta-bar .cta-call { background: var(--color-accent); color: #FFFFFF; }
.mobile-cta-bar .cta-kakao { background: var(--color-ink); color: var(--color-paper); }
/* 버튼 내 아이콘 — 팔레트를 따라가는 단색 SVG */
.mobile-cta-bar a .ico,
.floating-call .ico { flex: none; margin-right: 7px; }
.mobile-cta-bar .cta-kakao img { width: 18px; height: 18px; margin-right: 7px; object-fit: contain; flex: none; }
/* 카카오 URL 미설정 시 — 전화 버튼이 전체 폭을 차지 */
.mobile-cta-bar.is-single .cta-call { flex: 1 1 100%; }

/* 모바일 메뉴가 열린 동안 — 배경 스크롤을 잠그고 하단 상담 바를 감춘다 (메뉴에 집중) */
.nav-open { overflow: hidden; }
.nav-open .mobile-cta-bar,
.nav-open .floating-call { display: none; }
/* 배경이 비활성(inert)일 때는 클릭·선택도 막는다 */
[inert] { user-select: none; }

.floating-call {
  position: fixed;
  right: 28px; bottom: 28px;
  z-index: 110;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--color-accent);
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 800;
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 24px rgba(10, 10, 11, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
}
.floating-call.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.floating-call:hover { background: var(--color-accent-deep); color: #fff; }

/* ============================================================
   스크롤 리빌
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.revealed { opacity: 1; transform: none; }

/* ============================================================
   이미지 플레이스홀더 — 실제 사진 교체 전용 자리
   ============================================================ */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ph);
  border: 1px dashed var(--color-line);
  color: var(--color-ink-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
  overflow: hidden;
}
.on-dark .ph {
  background: rgba(247, 246, 243, 0.07);
  border-color: var(--color-line-dark);
  color: rgba(247, 246, 243, 0.45);
}

/* ============================================================
   반응형 — 헤더 · 푸터 · 하단 바
   ============================================================ */
@media (max-width: 960px) {
  .gnb {
    position: fixed;
    inset: 0;
    z-index: 110;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 0 var(--gutter);
    background: var(--color-ink);
    visibility: hidden;
    opacity: 0;
    /* visibility는 트랜지션에 넣지 않는다.
       트랜지션이 진행되지 않는 상황에서도 열림/닫힘 상태가 어긋나지 않아야 한다
       (숨겨진 전체화면 오버레이가 남으면 뒤쪽 페이지 클릭이 막힘). */
    transition: opacity 0.25s var(--ease);
  }
  .nav-open .gnb { visibility: visible; opacity: 1; }
  .gnb a { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; padding: 6px 0; color: var(--color-paper); }
  .gnb .header-tel { margin: 18px 0 0; padding: 0; border: 0; font-size: 20px; }
  .nav-toggle { display: block; }
}

@media (max-width: 767px) {
  body { padding-bottom: 60px; }
  .mobile-cta-bar { display: flex; }
  .floating-call { display: none; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-contact { width: 100%; justify-content: space-between; gap: 16px; }
  .footer-tel { text-align: left; }
  .footer-info dl { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .fi-row { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .site-footer { padding-bottom: 32px; }
}

/* ============================================================
   모션 최소화 존중
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}