/* ==========================================================================
   home.css — 홈(home.html) 전용 스타일
   로드 순서: styles.css → css/home.css(이 파일) → css/header.css
   - home.html 인라인 <style>에서 styles.css와 "다른" 규칙만 옮겨 왔다 (2026-10-01, backlog 13번).
     styles.css와 완전히 같던 규칙은 삭제했으므로 공통 스타일은 styles.css 한 곳에서 고친다.
   - 히어로(1절)는 2026-10-15 피지컬 AI 개편 3단계에서 사진 배경형으로 교체했다
     (_design/physical-ai/hero-preview.html 5·6·8절). styles.css 4절의 .hero* 규칙(격자·글로우·
     2열 그리드)보다 뒤에 로드되므로 여기서 덮어쓴다 — styles.css 쪽 .hero-media · .hv-img · .hv-caption ·
     .hv-badges · .trust-strip 은 이제 홈이 쓰지 않는 죽은 규칙(정리는 별도 결정).
     ⚠ 주석 안에 "별표+슬래시" 문자열을 쓰지 말 것 — 주석이 조기 종료되어 아래 .hero 규칙이 통째로 날아간다(실측).
   - 규칙 순서는 원래 인라인 순서 그대로(같은 파일 내 캐스케이드 보존).
   - 헤더/GNB 규칙은 css/header.css 단일 소유 — 여기에 사본을 넣지 말 것.
   ========================================================================== */

/* ==========================================================================
   1. HERO — 사진 전체폭 cover + 스크림 + 좌측 텍스트
   2026-10-30: 홈 헤더도 다른 페이지처럼 처음부터 남색(css/header.css A절) — 사진은 헤더 아래에서 시작한다.
   예전 투명 헤더용 장치(padding-top·사진 높이에 더한 --header-h, 상단 옅은 띠)는 뺐다.
   min-height 는 640+헤더 → 680 — 헤더가 히어로 밖으로 나간 만큼 줄이되, 넓은 화면(1920)에서 인물 머리 위가 잘리지 않게 40px 여유.
   ========================================================================== */
.hero{
  --scrim:8,14,28;                              /* 사진 위 오버레이 색(rgb 성분) */
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--navy-950); color:var(--white);
  min-height:680px;
  padding:var(--sp-9) 0;
  display:flex; align-items:center;
}
/* styles.css 4절의 격자(::before)·파랑 글로우(::after)는 사진 위에 겹치면 안 된다 → 끈다 */
.hero::before, .hero::after{content:none;}
.hero-bg{position:absolute; inset:0; z-index:-2;}
.hero-bg picture{display:contents;}           /* <picture> 상자 없이 img 만 노출 */
/* 구도(2400×1062): 인물 머리 x 46~62%, HUD x 60~85%, 로봇 팔 x 79~100%.
   2026-10-30: 데스크톱에서 사진 가운데가 보이게 70% → 50%(≤960 은 아래 3절이 따로 지정).
   세로 38% → 22%: 헤더 아래로 히어로가 내려오면서 넓은 화면(1920)에서 인물 머리가 위 끝에 닿아 여유를 만든다. */
.hero-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 22%;}
/* 스크림 2겹(2026-10-30 상단 띠는 헤더 남색화로 삭제):
             ② 사진 전체 고른 어둠 .35(2026-10-30 A안 — 좌→우 그라데이션 대신, 사진이 가운데로 보이게)
             ③ 하단 띠(신뢰 띠와 연결). 글자 그림자(h1·.sub text-shadow)는 그대로. */
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(var(--scrim),.35), rgba(var(--scrim),.35)),
    linear-gradient(180deg, rgba(var(--scrim),0) 78%, rgba(var(--scrim),.55) 100%);
}
.hero .container{position:relative; z-index:1; width:100%;}
.hero-copy{max-width:880px;}                 /* 2026-10-30 설명문 2배에 맞춰 600 → 880 */
.hero h1{
  font-size:var(--fs-display); margin-bottom:var(--sp-5);
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 2px 24px rgba(var(--scrim),.45);
}
.hero h1 .accent{color:var(--brand-400);}
/* 설명문 2026-10-30: 18px → 데스크톱 36px(1440 이상에서 상한). 폭은 글자 크기 기준 23.5em —
   36px 에서 846px 로 1440 기준 3줄(…해석하는 AI. / …엮어 / 명장의 경험을 … 지향합니다.) 유지. */
.hero p.sub{
  font-size:clamp(22px, 2.5vw, 36px); line-height:1.4; color:#FFFFFF; max-width:23.5em; margin-bottom:var(--sp-6);
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 1px 12px rgba(var(--scrim),.5);
}
.hero p.sub .accent{color:var(--brand-400); font-weight:600;}
.hero-ctas{display:flex; gap:var(--sp-4); flex-wrap:wrap;}
/* 버튼 화살표 — styles.css .btn-link .arrow 와 같은 3px 이동 */
.hero .btn .arrow{display:inline-block; transition:transform .15s ease;}
.hero .btn:hover .arrow{transform:translateX(3px);}

/* 등장 모션: 제목 → 설명 → 버튼 순으로 살짝 떠오른다. 움직임 선언은 no-preference 안에만 —
   reduce 사용자는 이 블록이 통째로 적용되지 않아 정적으로 본다(이 파일의 기존 관례). */
@media (prefers-reduced-motion: no-preference){
  .hero-copy > *{animation:heroIn .7s cubic-bezier(.2,.7,.2,1) both;}
  .hero-copy > :nth-child(2){animation-delay:.08s;}
  .hero-copy > :nth-child(3){animation-delay:.16s;}
  @keyframes heroIn{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
}
@media (prefers-reduced-motion: reduce){
  .hero .btn .arrow{transition:none;}
  .hero .btn:hover .arrow{transform:none;}
}

/* ==========================================================================
   2. TRUST BAND — 히어로 하단 신뢰 띠. 로고 없이 문구만, 가운데 구분선 기준으로 모음
   (grid 1fr auto 1fr: 첫 항목 우측 정렬 · 둘째 좌측 정렬)
   ========================================================================== */
.trust-band{background:var(--navy-950); color:var(--white); border-top:1px solid var(--navy-700);}
.trust-band .container{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:var(--sp-7);
  padding-top:var(--sp-5); padding-bottom:var(--sp-5);
}
.tb-item{min-width:0;}
.tb-item:first-child{justify-self:end; text-align:right;}
.tb-item:last-child{justify-self:start; text-align:left;}
.tb-text{display:flex; flex-direction:column; gap:2px; word-break:keep-all; overflow-wrap:anywhere;}
.tb-text strong{font-size:16px; font-weight:700; line-height:1.35; color:var(--white);}
.tb-text small{font-size:13px; line-height:1.4; color:#9AA2B4;}   /* navy-950 위 7.31:1 */
.tb-divider{width:1px; height:40px; background:var(--navy-700);}

/* ==========================================================================
   3. HERO / TRUST BAND 반응형
   ≤960: "사진 위 · 글 아래(단색 네이비)" 스택. 사진 높이에 헤더 높이를 더해 투명 헤더가
         사진 위에 겹친다(좁은 cover 크롭에서 인물·로봇 팔이 글과 겹치지 않게).
   ≤480: 버튼 세로 스택, 신뢰 띠 1열, 사진 4:3.
   ========================================================================== */
@media (max-width:960px){
  .hero{display:block; min-height:0; padding:0;}
  .hero-bg{position:relative; inset:auto; z-index:0; width:100%; height:calc(100vw * 9 / 16);}
  .hero-bg img{object-position:62% 35%;}
  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(var(--scrim),0) 55%, rgba(var(--scrim),.35) 80%, var(--navy-950) 100%);
  }
  .hero .container{padding-top:var(--sp-6); padding-bottom:var(--sp-7);}
  .hero-copy{max-width:640px;}
  .hero h1, .hero p.sub{text-shadow:none;}
  .hero p.sub{font-size:clamp(22px, 3vw, 24px); max-width:none;}   /* 2026-10-30 사진 아래 배치 — 22~24px */
  .trust-band .container{column-gap:var(--sp-5);}
}
@media (max-width:480px){
  .hero-bg{height:calc(100vw * 3 / 4);}
  .hero-bg img{object-position:58% 30%;}
  /* 설명문 "엮어" 뒤 줄바꿈(2026-10-29)은 481px 이상 전용 — 좁은 폭에서는 자연 줄바꿈이 낫다 */
  .hero .br-wide{display:none;}
  /* 버튼 세로 스택. 2026-10-16: 전폭(100%)이던 버튼을 "가장 긴 라벨 폭"으로 맞춘 한 열 그리드로 바꿨다 —
     두 버튼 폭은 같고 왼쪽 정렬, 오른쪽에 플로팅 챗봇 버튼(styles.css 18b, ≤480 에서 52px 원형) 자리가 남는다.
     fit-content(100%)라 라벨이 길어도 컨테이너를 넘지 않는다. */
  .hero-ctas{display:grid; grid-template-columns:fit-content(100%); justify-content:start; row-gap:var(--sp-3);}
  .hero-ctas .btn{width:100%;}
  .trust-band .container{grid-template-columns:1fr; row-gap:var(--sp-4);}
  .tb-divider{width:100%; height:1px;}
  .tb-item:first-child, .tb-item:last-child{justify-self:start; text-align:left;}
}

/* ==========================================================================
   4. WHY METADEXTER (2026-10-16 홈 2차) — 흰색에서 아주 옅은 파랑으로 내려가는 밝은 배경,
   왼쪽 제목 블록 / 오른쪽 카드 3장(카드 위 파랑 번호, 카드 안 상단 선 아이콘).
   시안: _design/physical-ai/home-why-approach-ref.png 위쪽. OUR BUSINESS 3카드 자리에 들어갔다.
   색은 styles.css 토큰만 쓴다(옅은 파랑 = --brand-100 을 반투명으로 흰색 위에 얹음).
   칸 비율(2026-10-16 수정): 컨테이너 내부 폭은 1268px 이상에서 1172px로 고정된다. 제목 칸은 설명 1행
   자연폭(Pretendard 18px, 460.8px)을 담아야 하고, 카드 h3 최장 행("로봇은 정해진 동작만", 20px)은 160.1px이다.
   → 5fr/7fr + 칸 사이 40px = 제목 칸 471.7px, 카드 3장 각 206.7px(카드 사이 20px, 좌우 패딩 20px → 내부 166.7px).
   이전 4fr/8fr(374.7px)에서는 h2가 3줄, 설명이 4줄로 꺾였다.
   ========================================================================== */
.why{
  padding:var(--sp-9) 0;
  background-color:var(--white);
  background-image:linear-gradient(180deg, rgba(230,242,255,0) 0%, rgba(230,242,255,.75) 100%);
}
.why-inner{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:40px; row-gap:var(--sp-7); align-items:start;
}
.why-head{min-width:0;}
.why-head .eyebrow{color:var(--brand-600); display:inline-block; margin-bottom:var(--sp-4);}
.why-head h2{
  font-size:var(--fs-h2); color:var(--gray-900); margin-bottom:var(--sp-5);
  word-break:keep-all; overflow-wrap:anywhere;
}
.why-head p{
  font-size:var(--fs-body-lg); line-height:1.7; color:var(--gray-700);
  word-break:keep-all; overflow-wrap:anywhere;
}
.why-cards{
  list-style:none; margin:0; padding:0; min-width:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px;
}
.why-item{display:flex; flex-direction:column; min-width:0;}
.why-num{
  display:block; font-family:var(--font-label); font-weight:600; font-size:15px;
  letter-spacing:.08em; color:var(--brand-600); margin-bottom:var(--sp-3);
}
.why-card{
  flex:1 1 auto;
  background:rgba(255,255,255,.88); border:1px solid rgba(11,94,215,.10); border-radius:var(--radius);
  padding:var(--sp-6) 20px;
  box-shadow:0 12px 32px rgba(11,94,215,.06);
  min-width:0;
}
.why-icon{display:inline-flex; width:40px; height:40px; color:var(--brand-600); margin-bottom:var(--sp-4);}
.why-icon svg{width:100%; height:100%; display:block;}
.why-card h3{
  font-size:20px; line-height:1.35; color:var(--gray-900); margin-bottom:var(--sp-3);
  word-break:keep-all; overflow-wrap:anywhere;
}
.why-card p{
  font-size:15px; line-height:1.7; color:var(--gray-500);
  word-break:keep-all; overflow-wrap:anywhere;
}
@media (prefers-reduced-motion: no-preference){
  .why-card{transition:box-shadow .25s ease, transform .25s ease;}
  .why-item:hover .why-card{box-shadow:0 18px 40px rgba(11,94,215,.12); transform:translateY(-3px);}
}
/* ≥1280: h2·설명을 마크업의 <br> 단위 2줄로 고정한다. 위 비율로 칸이 이미 충분하지만(여유 11px),
   폰트 메트릭이 조금 달라도 한 행이 중간에서 꺾이지 않도록 nowrap 을 보험으로 둔다 — 넘치더라도
   칸 사이 40px 간격이 완충한다. 1025~1279 와 그 아래에서는 자연스럽게 줄바꿈(overflow-wrap:anywhere 유지). */
@media (min-width:1280px){
  .why-head h2, .why-head p{white-space:nowrap;}
}
/* ≤1024: 제목 위 · 카드 아래(1열 그리드), 카드는 3열 유지. ≤880: 카드 1열, 아이콘을 왼쪽에 두는 가로형.
   ≤480: 다시 세로형(아이콘 위). ≤620 에서는 공통 .section 처럼 상하 여백 축소. */
@media (max-width:1024px){
  .why-inner{grid-template-columns:1fr;}
  .why-head{max-width:640px;}
}
@media (max-width:880px){
  .why-cards{grid-template-columns:1fr; gap:var(--sp-4);}
  .why-card{display:grid; grid-template-columns:auto 1fr; column-gap:var(--sp-5); align-items:start;}
  .why-icon{grid-row:1 / span 2; margin-bottom:0;}
  .why-card h3{grid-column:2;}
  .why-card p{grid-column:2;}
}
@media (max-width:620px){
  .why{padding:var(--sp-7) 0;}
}
@media (max-width:480px){
  .why-card{display:block;}
  .why-icon{margin-bottom:var(--sp-4);}
}

/* ==========================================================================
   5. OUR APPROACH (2026-10-16 홈 2차) — 진한 남색(히어로와 같은 --navy-950) + 오른쪽 사진, 왼쪽 글,
   아래에 단계 3개(원형 테두리 아이콘 + 라벨 + h3 + 설명, 단계 사이 세로 구분선).
   배경 사진은 HTML이 아니라 여기서 겹쳐 지정한다(서버 재시작 없이 파일만 넣으면 교체되도록):
     위에서부터 ① 좌→우 남색 스크림(+ 하단 띠: 단계 글자 대비용)
               ② /assets/approach-physical-ai.jpg  — 아직 없는 파일. 없으면 이 층은 투명으로 처리되어 ③이 보이고,
                  파일을 넣으면 새로고침만으로 ②가 ③을 덮는다(의도된 404 1건).
               ③ /assets/hero-physical-ai.jpg      — 폴백(히어로와 같은 사진, 오른쪽 기준 cover).
   두 사진이 모두 없어도 background-color 남색 위 흰 글자로 대비가 유지된다.
   ========================================================================== */
.approach{
  --scrim:11,18,32;                               /* navy-950 의 rgb 성분 */
  position:relative; color:var(--white);
  padding:var(--sp-9) 0;
  background-color:var(--navy-950);
  background-image:
    linear-gradient(90deg,
      rgba(var(--scrim),.97) 0%, rgba(var(--scrim),.94) 34%, rgba(var(--scrim),.80) 48%,
      rgba(var(--scrim),.50) 62%, rgba(var(--scrim),.28) 78%, rgba(var(--scrim),.22) 100%),
    linear-gradient(180deg, rgba(var(--scrim),0) 50%, rgba(var(--scrim),.45) 76%, rgba(var(--scrim),.72) 100%),
    url(/assets/approach-physical-ai.jpg),
    url(/assets/hero-physical-ai.jpg);
  background-size:cover, cover, cover, cover;
  background-position:center, center, right center, right center;
  background-repeat:no-repeat;
}
.approach .container{position:relative; z-index:1;}
.approach-copy{max-width:560px; min-width:0;}
.approach .eyebrow{color:var(--white); display:inline-block; margin-bottom:var(--sp-4);}
.approach .eyebrow .accent{color:var(--brand-400);}
.approach h2{
  font-size:var(--fs-h2); color:var(--white); margin-bottom:var(--sp-4);
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 2px 18px rgba(var(--scrim),.5);
}
.approach p.lead{
  font-size:var(--fs-body-lg); line-height:1.7; color:#DCE2EE;    /* navy-950 위 15:1 */
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 1px 12px rgba(var(--scrim),.5);
}
.approach-steps{
  list-style:none; margin:var(--sp-8) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
}
.step{
  min-width:0;
  display:grid; grid-template-columns:56px minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:var(--sp-4); row-gap:var(--sp-3); align-items:center;
  padding-right:var(--sp-5);
}
.step + .step{border-left:1px solid rgba(255,255,255,.22); padding-left:var(--sp-5);}
.step-icon{
  grid-row:1; width:56px; height:56px; border-radius:50%;
  border:1.5px solid rgba(0,167,254,.65); color:var(--brand-400);
  display:grid; place-items:center; background:rgba(var(--scrim),.35);
}
.step-icon svg{width:26px; height:26px; display:block;}
.step-head{grid-column:2; grid-row:1; min-width:0;}
.step-label{
  display:block; font-family:var(--font-label); font-weight:600; font-size:13px;
  letter-spacing:.12em; color:var(--brand-400); margin-bottom:4px;
}
.step h3{font-size:22px; line-height:1.25; color:var(--white); word-break:keep-all;}
.step p{
  grid-column:2; grid-row:2; align-self:start;
  font-size:15px; line-height:1.7; color:#DCE2EE;
  word-break:keep-all; overflow-wrap:anywhere;
  text-shadow:0 1px 10px rgba(var(--scrim),.6);
}
/* ≤1024: 단계 세로 쌓기, 구분선은 가로. 사진은 오른쪽 위 기준으로 두고 스크림을 전체적으로 더 짙게(글이 사진 위로 올라간다). */
@media (max-width:1024px){
  .approach{
    background-image:
      linear-gradient(90deg, rgba(var(--scrim),.96) 0%, rgba(var(--scrim),.88) 45%, rgba(var(--scrim),.62) 100%),
      linear-gradient(180deg, rgba(var(--scrim),.15) 0%, rgba(var(--scrim),.80) 100%),
      url(/assets/approach-physical-ai.jpg),
      url(/assets/hero-physical-ai.jpg);
    background-position:center, center, right top, right top;
  }
  .approach-steps{grid-template-columns:1fr; row-gap:var(--sp-5); margin-top:var(--sp-7);}
  .step{padding-right:0;}
  .step + .step{border-left:0; border-top:1px solid rgba(255,255,255,.22); padding-left:0; padding-top:var(--sp-5);}
}
@media (max-width:620px){
  .approach{padding:var(--sp-7) 0;}
  .step h3{font-size:20px;}
}

/* ==========================================================================
   6. 파트너 모집 배너 (2026-10-16 홈 3차) — 홈 하단 상담 CTA(.cta-banner, styles.css 12절) 교체.
   시안: _design/physical-ai/home-cta-partner-ref.png. 일출 사진 위에 남색 글자: 왼쪽 제목 / 오른쪽 2칸
   (선 아이콘 + h3 + 부제 + 설명, 칸 사이 세로 구분선) / 2칸 아래 버튼 2개(파랑 채움 · 남색 테두리, 알약형).
   서브 페이지 공통 배너(_layout.html)는 여전히 .cta-banner 를 쓰므로 그 규칙은 건드리지 않는다.
   배경은 HTML이 아니라 여기서 겹쳐 지정한다(파일만 바꾸면 재시작 없이 교체):
     위에서부터 ① 세로 흰 스크림(위·아래 진하게, 가운데 옅게 — 글자는 위쪽 하늘에, 버튼은 지평선 근처에 놓인다)
               ② 가로 흰 스크림(왼쪽 제목 영역을 조금 더 밝게)
               ③ /assets/cta-partner-bg.jpg — 2163×727, 해 x 24% · y 52%, 위는 밝은 하늘, 아래는 도시·짙은 산.
                  데스크톱은 cover 로 가로를 채우면 세로가 남으므로 50% 0%(윗부분: 하늘 + 해 + 지평선)를 보인다.
               ④ 폴백 일출 그라데이션(위 하늘 파랑 → 아래 연한 금빛) — 사진이 없어도 남색 글자 대비가 남는다.
   글자색은 헤더·히어로의 --navy-950, 부제·설명은 남색 계열 회색. 아이콘은 --brand-600 선 아이콘(currentColor).
   ========================================================================== */
.partner-cta{
  position:relative; color:var(--navy-950);
  padding:var(--sp-9) 0 var(--sp-10);
  background-color:#D9E8F5;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.46) 40%, rgba(255,255,255,.32) 68%, rgba(255,255,255,.52) 100%),
    linear-gradient(90deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 42%, rgba(255,255,255,0) 72%),
    url(/assets/cta-partner-bg.jpg),
    linear-gradient(180deg, #7FB6E8 0%, #CFE3F5 48%, #F6E7C7 100%);
  background-size:cover, cover, cover, cover;
  background-position:center, center, 50% 0%, center;
  background-repeat:no-repeat;
}
.partner-cta .container{position:relative; z-index:1;}
/* 제목 칸은 auto(= 제목의 자연 폭, ≥1025 에서 nowrap 2줄) · 2칸은 나머지. 실측(1172px 컨테이너): 제목 32px 일 때
   413px → 2칸 칸당 359px, 설명 칸(아이콘 44+14 뺀) 301px ≥ 설명 최장 행 263px(14px). 5fr/7fr 로는 설명 칸이 244px 라
   설명이 3줄로 꺾였다. 1025~1279 에서는 설명 칸이 263px 아래로 내려가므로 설명을 아이콘 아래 칸 전체 폭(1025 에서 293px)으로
   내려 <br> 2줄을 유지한다(<br> 을 display:none 으로 끄면 원문에 공백이 없어 "있다면,공동"처럼 붙는다 — 실측). */
.partner-inner{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  column-gap:40px; row-gap:var(--sp-6); align-items:start;
}
.partner-cta h2{
  font-size:clamp(26px, 2.3vw, 32px); line-height:1.35; color:var(--navy-950);
  word-break:keep-all; overflow-wrap:anywhere; min-width:0;
}
@media (min-width:1025px){
  .partner-cta h2{white-space:nowrap;}
}
.partner-body{min-width:0;}
.partner-tracks{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
}
.track{
  min-width:0;
  display:grid; grid-template-columns:44px minmax(0,1fr); grid-template-rows:auto auto;
  column-gap:14px; row-gap:12px; align-items:start;
  padding-right:28px;
}
.track + .track{border-left:1px solid rgba(11,18,32,.18); padding-left:28px; padding-right:0;}
.track-icon{grid-row:1; width:44px; height:44px; display:block; color:var(--brand-600);}
.track-icon svg{width:100%; height:100%; display:block;}
.track-head{grid-column:2; grid-row:1; min-width:0; padding-top:2px;}
.track h3{font-size:18px; line-height:1.3; color:var(--navy-950); margin-bottom:4px; word-break:keep-all;}
.track-sub{font-size:15px; font-weight:600; line-height:1.4; color:var(--navy-800); word-break:keep-all; overflow-wrap:anywhere;}
.track-desc{
  grid-column:2; grid-row:2;
  font-size:14px; line-height:1.75; color:#273349;   /* 남색 계열 회색 — 사진 위 구름(밝기 ~L .55) 뒤에서도 7:1 근처 */
  word-break:keep-all; overflow-wrap:anywhere;
}
/* 1025~1279 설명 전체 폭 — 반드시 위 .track-desc 기본 규칙보다 뒤에(같은 특이성, 뒤가 이긴다) */
@media (min-width:1025px) and (max-width:1279px){
  .track-desc{grid-column:1 / -1;}
}
.partner-ctas{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:var(--sp-7);}
.partner-ctas .btn{border-radius:999px; padding:14px 30px;}
.partner-ctas .btn-primary{box-shadow:0 10px 24px rgba(11,94,215,.28);}
.btn-outline-navy{background:rgba(255,255,255,.55); border-color:var(--navy-950); color:var(--navy-950);}
.btn-outline-navy:hover{background:var(--navy-950); color:var(--white);}
.partner-ctas .btn:focus-visible{outline:2px solid var(--brand-600); outline-offset:3px;}
.partner-cta .btn .arrow{display:inline-block; transition:transform .15s ease;}
.partner-cta .btn:hover .arrow{transform:translateX(3px);}
@media (prefers-reduced-motion: reduce){
  .partner-cta .btn .arrow{transition:none;}
  .partner-cta .btn:hover .arrow{transform:none;}
}
/* ≤1024: 제목 위 · 2칸 아래. 사진은 cover 가 세로를 채우게 되므로 가로를 잘라 보인다 — 해(x 24%)가 왼쪽에 남도록
   28% 기준. 글이 사진 중앙(지평선·도시) 위로 내려오므로 스크림을 전체적으로 더 짙게 한다. */
@media (max-width:1024px){
  .partner-cta{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.52) 50%, rgba(255,255,255,.62) 100%),
      linear-gradient(90deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
      url(/assets/cta-partner-bg.jpg),
      linear-gradient(180deg, #7FB6E8 0%, #CFE3F5 48%, #F6E7C7 100%);
    background-position:center, center, 28% 50%, center;
  }
  .partner-inner{grid-template-columns:1fr;}
  .partner-cta h2{max-width:640px;}
}
/* ≤768: 2칸도 세로, 구분선은 가로 */
@media (max-width:768px){
  .partner-tracks{grid-template-columns:1fr; row-gap:var(--sp-5);}
  .track{padding-right:0;}
  .track + .track{border-left:0; border-top:1px solid rgba(11,18,32,.18); padding-left:0; padding-top:var(--sp-5);}
}
@media (max-width:620px){
  .partner-cta{padding:var(--sp-7) 0;}
}
/* ≤480: 설명을 아이콘 아래 전체 폭으로, 버튼은 가장 긴 라벨 폭의 한 열(히어로 .hero-ctas 와 같은 방식 —
   오른쪽에 플로팅 챗봇 버튼(≤480 에서 52px 원형, right/bottom 16px) 자리가 남는다). 스크림은 더 짙게. */
@media (max-width:480px){
  .partner-cta{
    background-image:
      linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.60) 50%, rgba(255,255,255,.70) 100%),
      url(/assets/cta-partner-bg.jpg),
      linear-gradient(180deg, #7FB6E8 0%, #CFE3F5 48%, #F6E7C7 100%);
    background-position:center, 26% 50%, center;
  }
  .track-desc{grid-column:1 / -1;}
  .partner-ctas{display:grid; grid-template-columns:fit-content(100%); justify-content:start; row-gap:var(--sp-3); margin-top:var(--sp-6);}
  .partner-ctas .btn{width:100%;}
}
/* ≤380(360 폰): 제목 첫 행(26px 에서 336px)이 컨테이너 312px 를 넘어 "일," 한 단어가 외톨이 줄로 떨어진다 → 23px(297px)로 2줄 유지 */
@media (max-width:380px){
  .partner-cta h2{font-size:23px;}
}

/* 통계 4개는 관련 섹션으로 가는 링크다. 전역 a{color:inherit; text-decoration:none}
   덕분에 기본 상태는 기존과 완전히 동일하고, hover/포커스에서만 피드백을 준다.
   숫자·라벨의 폰트/색/레이아웃 규칙은 위 .num/.label 그대로 유지된다. */
a.stat-item{display:block; cursor:pointer;}
a.stat-item .num,
a.stat-item .label{transition:color .25s ease;}
a.stat-item:hover .num{color:var(--white);}
a.stat-item:hover .label{color:var(--white); text-decoration:underline; text-underline-offset:3px;}
a.stat-item:focus-visible{outline:2px solid var(--brand-400); outline-offset:6px; border-radius:8px;}
/* 카드 썸네일 = 영상 포스터(각 mp4에서 추출한 실제 프레임). 파일명은 슬롯 고정이라
   나중에 같은 경로에 파일만 덮어써도 CSS 변경이 필요 없다. */
.case-thumb--v1{background-image:url("../assets/videos/thumbs/case-card-1.jpg");}
.case-thumb--v2{background-image:url("../assets/videos/thumbs/case-card-2.jpg");}
.case-thumb--v3{background-image:url("../assets/videos/thumbs/case-card-3.jpg");}
.case-thumb--v4{background-image:url("../assets/videos/thumbs/case-card-4.jpg");}
/* 클릭하면 모달에서 재생되는 포스터 버튼.
   <video>를 여기 두지 않으므로 최초 로딩 때 영상은 한 바이트도 받지 않는다. */
.case-video{
  border:none; padding:0; width:100%; font:inherit; color:inherit;
  cursor:pointer; -webkit-appearance:none; appearance:none;
}
.case-video .cv-label{position:absolute; left:14px; bottom:11px; z-index:2;}
.case-video .play-ico{
  position:relative; z-index:2;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(11,18,32,.55); border:1.5px solid rgba(255,255,255,.72);
  color:#fff; padding-left:2px;   /* 삼각형 시각 중심 보정 */
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.case-video:hover .play-ico{transform:scale(1.09); background:var(--brand-600); border-color:var(--brand-600);}
.case-video:focus-visible{outline:2px solid var(--brand-400); outline-offset:3px;}
.case-video:focus-visible .play-ico{background:var(--brand-600); border-color:var(--brand-600);}
@media (prefers-reduced-motion: reduce){
  .case-video .play-ico{transition:none;}
  .case-video:hover .play-ico{transform:none;}
}
/* ==========================================================================
   9b. 영상 모달 (CASE HIGHLIGHTS 카드 재생)
   프로젝트에 기존 모달/라이트박스가 없어 새로 만들되, 브랜드 톤(네이비 배경 +
   파랑 포인트)과 기존 버튼/포커스 스타일 컨벤션을 그대로 따른다.
   ========================================================================== */
.vmodal{position:fixed; inset:0; z-index:2000; display:none;}
.vmodal.is-open{display:block;}
.vmodal-backdrop{position:absolute; inset:0; background:rgba(11,18,32,.88); backdrop-filter:blur(3px);}
.vmodal-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1100px, calc(100vw - 40px)); max-height:calc(100vh - 40px);
  display:flex; flex-direction:column;
  background:var(--navy-950); border:1px solid var(--navy-700);
  border-radius:14px; overflow:hidden; box-shadow:0 24px 70px rgba(0,0,0,.55);
}
.vmodal-bar{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  padding:12px 14px 12px 18px; border-bottom:1px solid var(--navy-700); flex:none;
}
.vmodal-title{font-size:15px; font-weight:700; color:var(--white); line-height:1.3;}
.vmodal-actions{display:flex; gap:8px; flex:none;}
.vmodal-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid var(--navy-700); border-radius:9px;
  color:#C8CEDB; transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vmodal-btn:hover{background:var(--brand-600); border-color:var(--brand-600); color:#fff;}
.vmodal-btn:focus-visible{outline:2px solid var(--brand-400); outline-offset:2px;}
/* 영상은 열릴 때 JS가 여기에 만들어 넣고, 닫을 때 제거한다 */
.vmodal-stage{background:#000; line-height:0; flex:1 1 auto; min-height:0;}
.vmodal-stage video{display:block; width:100%; height:100%; max-height:calc(100vh - 116px); object-fit:contain; background:#000;}
/* 네이티브 전체화면 중에는 패널이 화면 전체를 채우도록 */
.vmodal-panel:fullscreen{width:100vw; max-height:100vh; height:100vh; border:none; border-radius:0; transform:none; left:0; top:0;}
.vmodal-panel:fullscreen .vmodal-stage video{max-height:calc(100vh - 61px);}
@media (max-width:620px){
  .vmodal-panel{width:calc(100vw - 20px);}
  .vmodal-title{font-size:13.5px;}
}
/* ==========================================================================
   9c. 홈 영상 소개 (2026-10-30, home.html .home-video + #introModal)
   영상만 가운데. 컨테이너 안 최대 960px, 16:9, 모서리는 본문 이미지와 같은 --radius-sm, 그림자 약하게.
   모달은 .vmodal·.vmodal-backdrop·.vmodal-btn(위 9b절)을 그대로 쓰고, 패널·영상 크기만 .imodal* 로 따로 둔다.
   ========================================================================== */
.hv-frame{
  position:relative; max-width:960px; margin:0 auto; aspect-ratio:16/9;
  border-radius:var(--radius-sm); overflow:hidden; background:#000;
  box-shadow:0 6px 22px rgba(11,18,32,.10);
}
.hv-video{display:block; width:100%; height:100%; object-fit:cover; cursor:zoom-in;}
.hv-btn{
  position:absolute; bottom:12px; width:38px; height:38px; display:grid; place-items:center;
  border-radius:50%; border:1px solid rgba(255,255,255,.55); background:rgba(11,18,32,.55); color:#fff; cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.hv-btn:hover{background:var(--brand-600); border-color:var(--brand-600);}
.hv-btn:focus-visible{outline:2px solid var(--brand-400); outline-offset:2px;}
.hv-toggle{left:12px;}
.hv-zoom{right:12px;}
.hv-toggle .hv-ico-play{display:none;}
.hv-frame.is-paused .hv-toggle .hv-ico-play{display:block;}
.hv-frame.is-paused .hv-toggle .hv-ico-pause{display:none;}
/* 자동재생이 끝내 막혔을 때만 보이는 가운데 재생 버튼 */
.hv-bigplay{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; padding-left:3px; cursor:pointer;
  background:rgba(11,18,32,.6); border:1.5px solid rgba(255,255,255,.75); color:#fff;
}
.hv-bigplay[hidden]{display:none;}
.hv-bigplay:hover{background:var(--brand-600); border-color:var(--brand-600);}
.hv-bigplay:focus-visible{outline:2px solid var(--brand-400); outline-offset:3px;}
/* 팝업: 어두운 배경 + 가운데 큰 영상(최대 90vw·90vh, 16:9) */
/* z-index 10050: styles.css .cert-viewer 와 같은 층 — 챗봇 버튼(.chat-fab-wrap 9999)·모바일 GNB(10002) 위. (.vmodal 기본 2000 은 챗봇 버튼 아래) */
.imodal{z-index:10050;}
/* 가운데 정렬은 flex 로 한다 — 패널에 transform 을 걸면 닫기 버튼의 position:fixed 가 패널 기준으로 바뀐다 */
.imodal.is-open{display:flex; align-items:center; justify-content:center;}
.imodal-panel{position:relative; z-index:1; width:min(90vw, calc(90vh * 16 / 9)); aspect-ratio:16/9;}
.imodal-stage{width:100%; height:100%; background:#000; border-radius:var(--radius-sm); overflow:hidden; line-height:0;}
.imodal-stage video{display:block; width:100%; height:100%; object-fit:contain; background:#000;}
.imodal-close{position:fixed; top:16px; right:16px; z-index:1;}
/* 휴대폰(세로 폭 620 이하 또는 가로로 눕혀 높이 500 이하): 화면을 꽉 채운다 */
@media (max-width:620px), (max-height:500px){
  .imodal-panel{width:min(100vw, calc(100vh * 16 / 9));}
  .imodal-stage{border-radius:0;}
  .imodal-close{top:10px; right:10px;}
}
@media (prefers-reduced-motion: reduce){
  .hv-btn{transition:none;}
}
/* 뉴스 카드는 뉴스 페이지의 해당 항목으로 가는 링크다.
   전역 a{color:inherit; text-decoration:none} 덕분에 기본 모습은 기존과 동일하고,
   hover/포커스에서만 피드백을 준다. 카드 텍스트·레이아웃 규칙은 위 그대로 유지. */
a.news-card{display:block; cursor:pointer;}
a.news-card h4{transition:color .25s ease;}
a.news-card:hover{border-bottom-color:var(--brand-600);}
a.news-card:hover h4{color:var(--brand-600); text-decoration:underline; text-underline-offset:3px;}
a.news-card:focus-visible{outline:2px solid var(--brand-600); outline-offset:4px; border-radius:4px;}
/* --- 카드 상단 대표 이미지 / 플레이스홀더 (news-image-spec 1-5) ---------------
   aspect-ratio 를 컨테이너에 걸어 높이를 '카드 폭'만으로 결정한다. 내용물(사진/이모지)과
   무관하게 높이가 같으므로 3열 그리드가 어긋날 수 없다. 이미지 없는 글은 같은 박스에
   카테고리 색 배경 + 이모지를 넣는다 — 별도 높이 보정이 필요 없는 구조.
   t-* 톤 클래스는 styles.css 의 뉴스 게시판용과 같은 값이지만, home.html 은
   styles.css 를 로드하지 않으므로 .nc-thumb 스코프로 한정해 여기 별도 선언한다. */
.nc-thumb{
  aspect-ratio:16/9;
  overflow:hidden;                 /* hover scale 이 카드 밖으로 넘치지 않게 — 여기(박스)에 둔다.
                                      .news-card 에 두면 focus-visible 아웃라인(offset 4px)이 잘린다 */
  border-radius:var(--radius-sm);
  margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gray-100);      /* 톤 클래스가 없을 때의 안전 폴백 */
}
.nc-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.nc-thumb .nc-emoji{font-size:48px; line-height:1; user-select:none;}
/* 카테고리 톤 (styles.css .nr-thumb.t-* 와 동일 값) */
.nc-thumb.t-press{background:var(--brand-600);}
.nc-thumb.t-biz{background:var(--navy-800);}
.nc-thumb.t-partner{background:var(--gray-500);}
.nc-thumb.t-award{background:#C79A2E;}
/* 움직임 선언은 no-preference 안에만 둔다 (이 파일 위쪽 히어로 글로우와 동일 원칙).
   reduce 사용자에게는 이 블록이 통째로 적용되지 않으므로 되돌림 규칙이 불필요하다. */
@media (prefers-reduced-motion: no-preference){
  .nc-thumb img{transition:transform .45s cubic-bezier(.22,.61,.36,1);}
  a.news-card:hover .nc-thumb img{transform:scale(1.03);}
}
/* ==========================================================================
   15. RESPONSIVE (리뷰용 — 핵심 브레이크포인트만 대응)
   ========================================================================== */
@media (max-width: 960px){
  /* 1열 전환 후 카드 폭이 커지면 16:9 띠가 과도하게 높아지는 것을 막는다.
     이미지 카드·플레이스홀더 카드에 같이 적용되므로 높이 일치는 그대로 유지된다. */
  .nc-thumb{max-height:240px;}
}