/* ── 공통 인포그래픽 콘텐츠 페이지 스타일 (about/vision/brand-story/certificates 등) ── */
.ip { color: #4a423c; }
.ip-wrap { max-width: 1180px; margin: 0 auto; padding-inline: 24px; }
.ip-eyebrow { font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: #c49a6c; margin: 0 0 14px; }
.ip-eyebrow.light { color: #e0865a; }

/* padding-block 으로 세로만 지정 → 같은 요소의 .ip-wrap padding-inline(24px) 유지(좌우 여백 보존) */
.ip-hero { padding-block: clamp(90px, 12vw, 140px) clamp(40px, 6vw, 64px); }
.ip-h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; color: #241f1b; letter-spacing: -.02em; margin: 0; line-height: 1.25; word-break: keep-all; }
.ip-rule { width: 100px; height: 3px; background: #c0532b; margin: 26px 0 32px; }
.ip-statement { font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 700; color: #241f1b; margin: 0 0 22px; word-break: keep-all; line-height: 1.4; }
.ip-statement em { color: #c0532b; font-style: normal; }
.ip-lead { font-size: 1.08rem; line-height: 2; color: #6b615a; max-width: 820px; margin: 0; word-break: keep-all; }

.ip-section { padding-block: clamp(56px, 7vw, 92px); }
.ip-section.warm { background: #f8f3ec; }
.ip-section.dark { background: #241f1b; color: #efe6da; }
.ip-h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; color: #241f1b; margin: 0 0 14px; letter-spacing: -.02em; word-break: keep-all; }
.ip-section.dark .ip-h2 { color: #fff; }
.ip-sub { font-size: 1.02rem; line-height: 1.9; color: #6b615a; max-width: 760px; margin: 0 0 40px; word-break: keep-all; }
.ip-section.dark .ip-sub { color: #cdbfb2; }

/* 아이콘 카드 그리드 */
.ip-cards { display: grid; gap: 20px; }
.ip-cards.c3 { grid-template-columns: repeat(3, 1fr); }
.ip-cards.c2 { grid-template-columns: repeat(2, 1fr); }
.ip-card { background: #fff; border: 1px solid #e8e1d8; padding: 34px 30px; position: relative; overflow: hidden; }
.ip-card::before { content: ''; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #c0532b; opacity: 0; transition: opacity .3s; }
.ip-card:hover::before { opacity: 1; }
.ip-icon { width: 50px; height: 50px; display: grid; place-items: center; background: #241f1b; color: #e0865a; margin-bottom: 22px; }
.ip-icon svg { width: 26px; height: 26px; }
.ip-card h3 { font-size: 1.2rem; font-weight: 700; color: #241f1b; margin: 0 0 10px; }
.ip-card p { font-size: .96rem; line-height: 1.8; color: #6b615a; margin: 0; word-break: keep-all; }
.ip-card .num { display: block; font-size: .8rem; font-weight: 700; color: #9b7b58; letter-spacing: .12em; margin-bottom: 10px; }

/* 타임라인 */
.ip-timeline { position: relative; display: grid; gap: 34px; margin-top: 8px; }
.ip-timeline::before { content: ''; position: absolute; left: 16px; top: 8px; bottom: 8px; width: 2px; background: #e0d6c8; }
.ip-tl { position: relative; padding-left: 56px; }
.ip-tl-year { position: absolute; left: 0; top: -2px; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; background: #c0532b; color: #fff; display: grid; place-items: center; font-size: .74rem; font-weight: 700; }
.ip-tl h3 { font-size: 1.2rem; color: #241f1b; margin: 0 0 8px; font-weight: 700; }
.ip-tl p { color: #6b615a; line-height: 1.85; margin: 0; word-break: keep-all; }

/* 인용/강조 밴드 (dark 섹션 위에) */
.ip-quote { text-align: center; }
.ip-quote p { font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.5; color: #fff; margin: 0 auto; max-width: 900px; word-break: keep-all; }
.ip-quote em { color: #e0865a; font-style: normal; }

/* 이미지 / placeholder */
.ip-photo { width: 100%; overflow: hidden; background: #efe7db; }
.ip-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-ph { border: 2px dashed #d8cbb8; background: #faf6ef; display: grid; place-items: center; text-align: center; color: #ad9e8a; min-height: 240px; padding: 24px; }
.ip-ph span { font-size: .92rem; font-weight: 700; }
.ip-ph small { display: block; margin-top: 6px; font-size: .78rem; color: #c1b39f; }

/* two-col (텍스트 + 이미지) */
.ip-split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* 인증/특허 카드 */
.ip-cert { background: #fff; border: 1px solid #e8e1d8; overflow: hidden; display: flex; flex-direction: column; }
.ip-cert .ip-ph, .ip-cert .ip-photo { aspect-ratio: 4 / 3; min-height: 0; }
.ip-cert-body { padding: 24px 26px 28px; }
.ip-cert-tag { font-size: .74rem; font-weight: 700; letter-spacing: .12em; color: #c0532b; }
.ip-cert-body h3 { font-size: 1.18rem; color: #241f1b; margin: 8px 0 6px; }
.ip-cert-body .issuer { color: #8b7d72; font-size: .9rem; margin: 0; }

/* CTA */
.ip-cta { background: #f8f3ec; text-align: center; }
.ip-cta h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: #241f1b; margin: 0 0 26px; word-break: keep-all; }
.ip-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ip-cta-btns .btn-primary { background: #c0532b; border-color: #c0532b; }
.ip-cta-btns .btn-primary:hover { background: #a5431f; border-color: #a5431f; }
/* 밝은 CTA(.ip-cta) 위의 아웃라인 버튼(.btn-secondary)은 흰색 전제라 안 보였음.
   → 고스트(투명) 느낌은 유지하되 다크 톤으로 가시화. 어두운 배경 CTA는 그대로 둠. */
.ip-cta .btn-secondary { background: transparent; border-color: rgba(36, 31, 27, 0.28); color: #241f1b; }
.ip-cta .btn-secondary:hover { background: rgba(36, 31, 27, 0.06); border-color: rgba(36, 31, 27, 0.5); }

/* reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

@media (max-width: 800px) {
  .ip-cards.c3, .ip-cards.c2 { grid-template-columns: 1fr; }
  .ip-split { grid-template-columns: 1fr; gap: 30px; }
}

/* ═══════════ 전역 오버플로우/여백 하드닝 (PC·모바일 공통) ═══════════ */

/* 0) 줄바꿈 금지 유틸: 절대 쪼개지면 안 되는 단어/구를 <span class="nb">...</span> 로 감싸면
      그 안은 통째로 한 줄에 유지됨 (모든 페이지에서 사용 가능) */
.nb { white-space: nowrap; }

/* 제목/문단 줄바꿈 품질 — 마지막 줄에 한 단어만 남는 어색한 개행(고아) 방지.
   balance: 제목 줄을 고르게 나눔 / pretty: 문단 마지막 줄 고아 방지.
   미지원 브라우저에선 무시(기존 동작 유지) */
h1, h2, h3, h4, h5, h6, .ip-statement, .ip-quote p, .cta-title, .showcase-title { text-wrap: balance; }
p, li, dd, blockquote, figcaption { text-wrap: pretty; }

/* ── 본문 강조 유틸 (전 페이지 공통) ──
   <mark> 마커 하이라이트 / .ip-lead·ip-sub 내 <strong> 볼드 / <em> 오렌지 색상 */
mark { background: linear-gradient(transparent 58%, rgba(224, 134, 90, .45) 0); color: #241f1b; font-weight: 700; padding: 0 1px; }
.ip-lead strong, .ip-sub strong, .ip-card p strong { color: #241f1b; font-weight: 700; }
.ip-lead em, .ip-sub em, .ip-card p em { color: #c0532b; font-style: normal; font-weight: 600; }

/* 1) 가로 스크롤·넘침 원천차단: 뷰포트 밖으로 나가는 것을 잘라냄 */
html, body { overflow-x: clip; max-width: 100%; }

/* 2) 미디어는 절대 부모 박스를 넘지 않음 */
img, video, iframe, canvas, svg, table { max-width: 100%; }
img, video { height: auto; }

/* 3) 긴 영문 단어·URL·이메일·모델명이 박스를 뚫는 것 방지.
      한글은 keep-all(어절 단위)로 자연스럽게, 넘칠 정도로 긴 토큰만 강제 분해.
      → '바깥 박스보다 글씨가 넘치는' 문제를 PC/모바일 모두에서 원천차단 */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, a, span, em, strong, small,
label, button, figcaption, blockquote, th, td, summary {
  overflow-wrap: break-word;
}

/* 4) flex/grid 자식이 콘텐츠 크기 때문에 안 줄어들어 넘치는 현상 차단.
      (min-width:auto 기본값 → 0 으로) 대표적인 오버플로우 원인 제거 */
.ip-split > *, .ip-cards > *, .mg-hero-grid > *, .mg-tech-columns > *,
.space-split-grid > *, .space-card-with-img > *, .section-container > *,
.inq-grid > *, .as-channel-grid > *, .archive-row > * { min-width: 0; }

/* 짧은 번호/라벨이 세로로 쪼개지지 않도록 (flex 안 요소 보호) */
.im-step-n, .promise-n, .hw-n, .stat-suffix, .ab-stat-suffix, .mx-room, .ip-tl-year { white-space: nowrap; }

@media (max-width: 768px) {
  /* 모바일 메뉴에서 견적문의 CTA 정리 */
  .nav-links .nav-cta { display: inline-block; margin: 4px 0; }
}

/* 초협소 화면(≤380px)에서 고정 최소폭 그리드가 트랙을 못 줄여 넘치는 것 방지 */
@media (max-width: 380px) {
  .cert-grid-layout { grid-template-columns: 1fr !important; }
}