/* SF 마케팅 포털 — 공용 페이지 스타일.
   색·타입·간격 토큰은 Offering DS(_ds/offering-design-system-…/colors_and_type.css)에서 오고,
   이 파일은 세 페이지(index/solutions/resources)가 공유하는 컴포넌트 스타일만 담는다. */

html, body { margin: 0; padding: 0; background: var(--paper); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { font-family: var(--font-body); color: var(--ink-700); word-break: keep-all; text-wrap: pretty; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 640px) { .wrap { padding: 0 24px; } }

/* — 버튼 (DS Button 변형의 CSS 구현) — */
.btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px;
  border-radius: 8px; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none !important;
  transition: background var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-secondary { background: var(--paper-pure); border: 1px solid var(--ink-200); color: var(--ink-900); }
.btn-secondary:hover { border-color: var(--ink-400); }
.btn-strong { background: var(--ink-900); color: var(--paper); }
.btn-strong:hover { background: var(--ink-700); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; }
.slide--inverse .btn-primary { background: var(--accent-deep); color: #fff; }
.slide--inverse .btn-primary:hover { background: #7A1230; }

/* — 헤더 — */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--border); }
/* 좁은 폭 — 내비를 감추지 않는다.
   기존 대응은 `@media (max-width:640px){.site-nav a{display:none}}` 하나뿐이라
   ① 641~805px(브로슈어 CTA가 붙은 페이지는 852px)에서 CTA 버튼이 화면 밖으로 나가고
      전 페이지에 가로 스크롤바가 생겼고, ② ≤640px 에서는 내비 7개가 전부 사라져
      햄버거도 없이 이동 수단이 0 이었다. 게다가 ③ .bar 가 nowrap flex 라
      브랜드·내비가 min-content 까지 짜부라져 ~1100px 이하에서 링크마다 두 줄로
      쪼개지고("솔루션 / v2") 사내전용 배지와 겹쳤다.
   대응(자바스크립트 없이 CSS 만):
     · 항목·브랜드 라벨은 nowrap — 글자 중간에서 쪼개지지 않게
     · .bar 는 항상 flex-wrap:wrap — 한 줄에 못 들어가면 내비가 통째로 아랫줄로
     · 내비 자신도 flex-wrap:wrap — 자기 줄에서도 넘치면 항목 단위로 줄바꿈
   정렬은 .bar 의 justify-content:space-between 에 맡긴다 — 브랜드와 한 줄을 공유하면
   오른쪽으로 밀리고(= 기존 데스크톱 렌더 그대로), 자기 줄로 내려가면 그 줄의 첫 항목이
   되어 왼쪽 정렬된다. 미디어쿼리로 정렬을 바꾸지 않아도 두 상황이 모두 맞는다.
   넓은 폭에서는 한 줄 높이 40px(CTA 버튼) < min-height 46px 이라 컨텐트 박스가 46px,
   세로 패딩 18px 을 더해 64px — 기존 height:64px 과 헤더 높이·항목 위치가 동일하다.
   (min-height 는 content-box 기준. box-sizing:border-box 로 바꾸면 .wrap 의
    max-width:1160px 이 좌우 패딩 96px 을 포함하게 되어 헤더 폭이 줄어든다 — 쓰지 말 것) */
.site-header .bar { min-height: 46px; display: flex; align-items: center; align-content: center;
  justify-content: space-between; flex-wrap: wrap; row-gap: 8px;
  padding-top: 9px; padding-bottom: 9px; }
.brand { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.brand img { height: 18px; display: block; }
.brand .div { width: 1px; height: 16px; background: var(--ink-200); }
.brand .label { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-500);
  white-space: nowrap; }
/* min-width 는 auto(기본) 유지 — 내비가 자기 항목 최대폭 밑으로는 줄지 않아
   항목이 컨테이너를 삐져나오는 일이 없다 */
.site-nav { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; flex: 0 1 auto; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--ink-500); white-space: nowrap; }
.site-nav a[aria-current='page'] { color: var(--accent-ink); }

@media (max-width: 1000px) { .site-nav { gap: 10px 18px; } }
@media (max-width: 900px)  { .site-nav { gap: 9px 16px; } }
@media (max-width: 640px) {
  /* 줄바꿈으로 높아진 헤더가 sticky 로 화면을 잡아먹지 않게 */
  .site-header { position: static; }
  .site-nav { gap: 8px 14px; }
  .site-nav a { font-size: 13px; }
  .site-nav .btn { height: 34px; padding: 0 14px; font-size: 13px; }
}
@media (max-width: 400px) {
  /* 320px — 브랜드 줄(로고 76.5 + 구분선 + 라벨 82.4 + 사내전용 배지 82.6)이
     간격까지 합쳐 308.6px 이라 272px 안에 못 들어갔다.
     .brand-home 은 gap:inherit 과 margin-left 가 겹쳐 간격이 이중으로 들어가 있다 → 정리.
     그래도 모자라면(대체 글꼴 등) 배지가 아랫줄로 내려가도록 flex-wrap 을 열어 둔다. */
  .brand { gap: 8px; flex: 0 1 auto; flex-wrap: wrap; row-gap: 4px; }
  /* 브랜드 묶음·배지는 줄지 않게 하고(글자 깨짐 방지) 대신 배지가 아랫줄로 내려가게 한다.
     flex 는 줄바꿈을 shrink 보다 먼저 하므로 이 조합이면 결과가 결정적이다. */
  .brand .brand-home, .brand .pill-internal { flex: 0 0 auto; white-space: nowrap; }
  .brand .brand-home > * + * { margin-left: 0; }
  .brand .label { font-size: 12px; }
}

/* — 페이지 헤드 (라이트) — */
.page-head { border-bottom: 1px solid var(--border); }
.page-head .inner { padding: 80px 0 64px; }
.page-head h1 { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); }
.page-head .desc { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-400); max-width: 620px; }
.page-head .desc code { font-family: var(--font-mono); font-size: 14px; color: var(--accent-ink); }

/* — 번호 섹션 — */
.sec { border-bottom: 1px solid var(--border); }
.sec .inner { padding: 88px 0 80px; }
.sec-no { display: flex; align-items: baseline; gap: 16px; }
.sec-no .t-mono { color: var(--ink-300); }
.sec-head h2 { margin: 20px 0 0; font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px);
  font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.sec-head .desc { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--ink-400); max-width: 560px; }

/* — 동영상 배지·유형 태그 — */
.vbadge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px;
  border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.tag-video { background: var(--accent-soft); color: var(--accent-ink); }
.tag-neutral { background: var(--ink-50); color: var(--ink-500); }
.tag-outline { background: var(--paper-pure); color: var(--ink-500); border: 1px solid var(--ink-200); }

/* — 등록 안내 (다크) + 푸터 — */
.contact { background: var(--ink-900); }
.contact .inner { padding: 88px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.contact .t-eyebrow.on-dark { color: var(--accent-on-dark-ink); }
.contact h2 { margin: 0; font-family: var(--font-display); font-size: clamp(32px, 4.5vw, 48px); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.02em; color: var(--paper); max-width: 640px; }  /* balance 는 <br> 수동 줄바꿈과 충돌해 겹침 렌더 사례 — 제거 */
.contact .sub { margin: 24px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-300); max-width: 620px; }
.contact .sub code { font-family: var(--font-mono); font-size: 13.5px; color: var(--accent-on-dark-ink); }
.contact .cta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.footer-bar { border-top: 1px solid rgba(250,250,247,0.14); }
.footer-bar .inner { padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer-bar img { height: 16px; display: block; }
.footer-bar span { font-size: 12px; color: var(--ink-400); }
.footer-bar code { font-family: var(--font-mono); font-size: 11.5px; }

/* 본문 .inner 가 padding 단축 속성으로 .wrap 의 좌우 패딩(48px)을 0 으로 덮어써,
   뷰포트가 1256px(=1160+96) 아래로 내려가면 텍스트가 화면 모서리에 밀착했다
   (2026-08-24 적대 검사 #1). 데스크톱 렌더를 바꾸지 않도록 그 폭 이하에서만 복원. */
@media (max-width: 1256px) {
  .page-head .inner, .sec .inner, .contact .inner, .footer-bar .inner,
  .hero .inner { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 640px) {
  .page-head .inner, .sec .inner, .contact .inner, .footer-bar .inner,
  .hero .inner { padding-left: 24px; padding-right: 24px; }
}

/* 헤더 CTA — .site-nav a(0,1,1)가 .btn-primary(0,1,0)의 흰 글자를 덮어써
   빨강 위 진회색(2.49:1)이 됐다 (적대 검사 #2). 버튼 색을 명시적으로 복원. */
.site-nav a.btn-primary { color: var(--accent-fg); }
.site-nav a.btn-secondary { color: var(--ink-700); }