.automation-home { background: #fff; overflow: hidden; }
.automation-home__inner { width: 100%; }
.automation-home__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2.8rem; margin-top: 3.2rem; }
.automation-home__tabs button { min-width: 0; padding: 1.5rem 0; border-bottom: 2px solid #aaa; text-align: left; color: #929292; transition: color .2s, border-color .2s; }
.automation-home__tabs button strong { font: 700 1.35rem var(--font-en); }
.automation-home__tabs button span { font: 400 1.1rem var(--font-en); }
.automation-home__tabs button.is-active { border-bottom-color: #1d2b37; color: #1d2b37; }
.automation-home__stage { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 4rem; min-height: 36rem; }
.automation-home__copy { padding: 3rem 0; }
.automation-home__code { color: #1d2b37; font: 800 clamp(4rem, 4.6vw, 6.8rem)/.95 var(--font-en); }
.automation-home__copy h3 { margin-top: 1.2rem; color: #1d2b37; font: 400 clamp(2rem, 2.1vw, 3.4rem)/1.15 var(--font-en); }
.automation-home__copy > p:not(.automation-home__code) { max-width: 58rem; margin-top: 1.2rem; color: #6a6f72; font-size: 1.35rem; line-height: 1.75; }
.automation-home__copy .btn-more { margin-top: 3rem; }
.automation-home__visual { display: grid; place-items: center; min-width: 0; }
.automation-home__visual img { width: 100%; max-height: 36rem; object-fit: contain; }

/* 자동화 상세 전용 골드 — 브랜드 토큰(--color-gold #c69a63)보다 한 단계 연한 시안 실측값이다.
   시안에서 스트랩 밴드 배경 · HIGHLIGHTS 제목이 모두 이 한 색으로 찍혀 있어 한 곳에서 선언한다.
   토큰을 바꾸면 사이트 전체 골드가 같이 움직이므로 여기서만 쓴다. */
.automation-page { --automation-gold: #c19f76; background: #fff; }
.automation-hero { --hero-img: url('/resources/wia/assets/automation/automation-hero.jpg'); min-height: 64rem; display: flex; align-items: flex-end; color: #fff; background: #0c1820; }
.automation-hero::before { background-position: center 48%; }
/* 참조(product-lineup-hero)는 ::after에 고정 %높이(42%) 오버레이를 쓴다 — 사진 대비 텍스트가 짧은 영문
   타이틀이라 문제가 없었다. 여기는 폭이 넓어지면 폰트(vw 기반)도 커지는데, 높이가 짧은 창에서는 밴드의
   실제 픽셀 높이(42% of hero height)가 같이 줄어들어 텍스트 블록 높이를 못 따라가는 경우가 생겼다 —
   eyebrow 윗부분이 밴드 밖(안 어두워진 사진)으로 삐져나와 태블릿과 겹쳐 보였다.
   그래서 어두운 배경을 히어로 전체에 붙이는 대신 텍스트를 감싸는 .automation-hero__copy 자체에 붙인다 —
   이러면 어두운 영역 높이가 곧 "패딩 + 텍스트 실제 렌더 높이"라서 폭·높이가 어떻게 바뀌어도 텍스트보다
   작아지는 경우 자체가 구조적으로 생길 수 없다. */
.automation-hero__copy {
  position: relative; z-index: 1; width: 100%;
  padding: 3.5rem 0 clamp(4rem, 6vw, 8rem);
  /* 그라데이션(페이드) 없음 — 시안은 사진과 어두운 영역이 위쪽에 서서히 밝아지는 구간 없이 한 톤으로
     바로 갈린다. 단일 불투명도로 하드엣지 처리. 구조(텍스트 높이에 배경이 붙는 것)는 그대로 유지. */
  background: rgba(5, 17, 25, .88);
}
/* eyebrow는 <p> 대신 <small> — 같은 파일의 .automation-solution__head small과 같은 태그로 맞췄다.
   전에 <p>를 쓰다가 아래 "본문용" .automation-hero p(max-width:72rem)를 그대로 물려받아
   809px로 눌린 채 "AUTOMATION"/"SOLUTIONS_자동화 솔루션"이 강제로 두 줄이 됐던 문제의 근본 원인이었다.
   display:flex도 .automation-solution__head small과 같은 이유 — <small> 기본값은 inline인데
   inline 요소엔 max-width가 스펙상 아예 적용되지 않는다(그래서 max-width:110rem을 줘도 계속 씹혔다).
   gap으로 자간을 주므로 JS 쪽 텍스트 노드에 공백을 따로 넣을 필요 없다. */
.automation-hero__eyebrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem; max-width: 110rem; color: var(--color-gold); font: 400 clamp(2.7rem, 3vw, 5rem)/1 var(--font-en); letter-spacing: -.02em; }
.automation-hero__eyebrow strong { font-weight: 800; }
.automation-hero__eyebrow-suffix { color: rgba(255,255,255,.85); font-size: 0.5em; font-weight: 400; letter-spacing: 0; white-space: nowrap; }
/* max-width는 참조 패턴(product-lineup-hero h1: 100rem)보다 더 여유를 둔다 — 그쪽은 짧은 영문 타이틀
   ("CNC Turning Center")이라 폭이 남지만, 이쪽 한글 문구("모든 생산 환경에 최적화된 자동화 솔루션")는
   더 길어서 같은 폭이면 줄바꿈 여유가 거의 없다. 폰트 크기도 낮춰 1줄 여유를 더 확보했다. */
/* 참조(product-lineup-hero h1)는 margin-top이 없다 — 그쪽은 h1이 히어로의 유일한 타이틀이라서다.
   여기는 위에 eyebrow가 하나 더 있어 최소한의 간격만 남기고, 폰트도 낮춰
   같은 페이지 안 AWC(h2, 3.2rem) 등 다른 헤딩과의 크기 격차를 줄였다(실측: 1.5배→1.2배대).
   h1/p 간 간격은 시안 실측(eyebrow→h1 간격이 h1→본문 간격의 약 5배)을 따른다 —
   전엔 둘 다 1.8rem이라 세 줄이 등간격으로 떨어져 보여서 "묶음"이 아니라 "따로따로"로 읽혔다.
   지금은 h1+본문이 붙어서 한 덩어리로, eyebrow만 위에서 떨어져 보이게 한다. */
.automation-hero h1 { max-width: 110rem; margin-top: 2.6rem; font-size: clamp(2.2rem, 2.4vw, 4.2rem); line-height: 1.3; }
.automation-hero p { max-width: 72rem; margin-top: .7rem; color: rgba(255,255,255,.8); font-size: clamp(1.35rem, 1.2vw, 1.7rem); line-height: 1.8; }
/* product-lineup-hero__line(product-lineup.css)과 동일한 기법 — 문장을 자기 폭만큼만 차지하는 줄로
   고정한다. 1099px(sitewide 임계값, styles.css의 u-desktop-br과 동일)부터는 inline으로 풀려 자연 개행. */
.automation-line { display: block; width: max-content; max-width: 100%; }
@media (max-width: 1099px) {
  .automation-line { display: inline; width: auto; max-width: none; white-space: normal; }
}
.automation-jump { position: sticky; top: var(--header-h); z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid #ddd; backdrop-filter: blur(12px); }
.automation-jump .container { display: grid; grid-template-columns: repeat(3, 1fr); }
.automation-jump a { padding: 1.8rem 1rem 1.5rem; border-bottom: 3px solid transparent; color: #777; font: 500 1.25rem var(--font-en); text-align: center; }
.automation-jump a:hover, .automation-jump a:focus-visible { color: #1d2b37; border-bottom-color: var(--color-gold); }
.automation-solution { scroll-margin-top: calc(var(--header-h) + 6rem); padding: 6.5rem 0 9rem; border-bottom: 1px solid #dedede; }
.automation-solution:nth-child(even) { background: #fff; }
/* 1.7rem 은 시안 eyebrow 잉크 높이 14.6px(1600px 기준 환산) 대응값 — 전엔 1.25rem 이라 10.5px 로 작았다. */
.automation-solution__head small { display: flex; align-items: baseline; gap: .7rem; color: #1d2b37; font: 400 1.7rem var(--font-en); letter-spacing: .02em; }
.automation-solution__head small strong { font-weight: 800; }
.automation-solution__head small span { color: #8d949b; }
.automation-solution__head h2 { margin-top: 1.1rem; color: var(--color-gold); font: 400 3.2rem/1.15 var(--font-en); letter-spacing: .01em; }
.automation-solution__head h2 strong { font-weight: 800; }
/* 시안 실측 — 골드/베이지 밴드는 배경이 섹션 전체 폭까지 번지고, 텍스트만 container 폭(=제목·하이라이트와 같은 안쪽 정렬)에 맞는다.
   그래서 배경색은 바깥 div(전체폭)에, 좌우 여백은 안쪽 .container 에 맡기고 이 div들은 상하 패딩만 가진다. */
/* font-size 2.8rem 은 시안 스트랩 잉크 높이 28.3px(1600px 기준 환산) 대응값이고,
   결과 밴드 높이 72.8px 가 시안 실측 71.2px 와 맞는다. 전엔 1.8rem 이라 잉크 18px·밴드 56px 로 작았다. */
.automation-solution__strap { margin-top: 2.2rem; background: var(--automation-gold); }
.automation-solution__strap p { margin: 0; padding: 1.25rem 0; color: #fff; font-size: 2.8rem; line-height: 1.45; }
.automation-solution__description { background: #f4f1ed; }
.automation-solution__description p { margin: 0; padding: 2.5rem 0; color: #676b6f; font-size: 1.4rem; line-height: 1.8; }
/* align-items: start — 시안은 하이라이트 목록과 이미지가 같은 높이에서 시작한다(실측).
   center로 두면 목록이 이미지보다 짧을 때 밑으로 처지면서 두 컬럼의 시작점이 어긋난다. */
.automation-solution__body { display: grid; grid-template-columns: minmax(28rem, .82fr) minmax(0, 1.18fr); gap: 5rem; align-items: start; margin-top: 4.2rem; }
/* 2.55rem 은 시안 HIGHLIGHTS 잉크(캡) 높이 21.0px(1600px 기준 환산) 대응값 — 전엔 2rem 이라 16.5px 로 작았다. */
.automation-highlights h3 { color: var(--automation-gold); font: 800 2.55rem var(--font-en); }
/* 시안 실측 — 언더라인은 하이라이트 컬럼 전체 폭이다(시안 484.8px vs 컬럼 484.2px, 1600px 기준 환산).
   전엔 28rem(311px) 고정이라 컬럼의 2/3 에서 끊겼다. 폭이 바뀌어도 컬럼을 따라가도록 100%로 둔다.
   색은 골드가 아니라 검정(#201d1e ≈ 측정치). */
.automation-highlights h3::after { content: ''; display: block; margin-top: 1.5rem; width: 100%; height: 1px; background: #111; }
/* gap/line-height를 넓히고 이미지 max-height를 낮춰 목록-이미지 높이차를 시안 비율(≈16%)에 맞춘다.
   전에는 목록 262px vs 이미지 480px로 차이가 217px(목록의 83%)까지 벌어져 밑에 큰 여백이 생겼었다. */
.automation-highlights ul { display: grid; gap: 1.8rem; margin-top: 3rem; }
.automation-highlights li { color: #333; font-size: 1.45rem; line-height: 1.7; }
/* "+" 색 — 시안 실측은 골드가 아니라 본문과 같은 잉크색(li 텍스트 색 상속) */
.automation-highlights li::before { content: '+'; margin-right: 1rem; color: inherit; font-weight: 800; }
/* drop-shadow는 투명 배경 컷아웃용이었다 — 시안에서 라벨째로 크롭한 이미지는 흰 배경이 꽉 찬
   사각형이라 같은 필터를 걸면 그림자가 사각형 전체 테두리에 껴서 카드처럼 보인다. */
.automation-solution__media img { width: 100%; max-height: 40rem; object-fit: contain; }
.automation-models { margin-top: 5rem; }
.automation-models h3 { font-size: 1.7rem; }
.automation-models ul { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 1.6rem; border-top: 1px solid #999; }
.automation-models li { border-top: 2px solid transparent; margin-top: -1px; }
/* 링크 항목(시리즈 상세 진입) — 디폴트 검정, hover/focus/active 골드. 링크 없는 항목(span)은 정보 표시만 */
.automation-models a, .automation-models span {
  display: block; padding: 1.8rem 1rem; color: #111; font: 700 1.25rem var(--font-en); text-align: center;
  transition: color .2s;
}
.automation-models span { color: #555; }
.automation-models a:hover, .automation-models a:focus-visible, .automation-models a:active {
  color: var(--color-gold);
}
.automation-models li:has(a:hover), .automation-models li:has(a:focus-visible), .automation-models li:has(a:active) {
  border-top-color: var(--color-gold);
}

@media (max-width: 900px) {
  .automation-home__stage, .automation-solution__body { grid-template-columns: 1fr; }
  .automation-home__stage { padding-top: 2rem; }
  .automation-home__visual { order: -1; }
  .automation-home__visual img { max-height: 30rem; }
  .automation-hero { min-height: 60rem; }
  .automation-models ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .automation-home__tabs button span { display: none; }
  .automation-home__tabs button { text-align: center; }
  .automation-jump a { font-size: 1.1rem; }
  .automation-solution { padding: 7rem 0; }
  .automation-solution__head small { font-size: 1.45rem; }
  .automation-solution__head h2 { font-size: 2.4rem; }
  .automation-solution__strap p { font-size: 2.4rem; }
  .automation-solution__description p { padding: 2rem 0; font-size: 1.3rem; }
  .automation-models ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .automation-home__tabs button { transition: none; } }