@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
   co4 · 대양글로벌 — 메인 전용 스타일 (index.html 만 읽는다)
   참고사 : 효성 hyosung.com  실측 SPEC = _co\_스펙_co4_hyosung.md
   ────────────────────────────────────────────────────────────────────────
   문법 요약
     · 컨테이너 max-width 없음 · 좌우 여백 5rem(=82@1578 =100@1920)
     · root 가 vw 비례 → 전 치수 rem.  1920 기준 정수 ÷ 20 = rem
     · 대비율 5.0 : 2.875 : 1  (히어로 82.19 / 섹션제목 47.26 / 본문 16.44)
     · 섹션 padding-top 6.25rem(=103) 전 섹션 동일 · bottom 만 8 / 10.9rem
     · 라운드 0 — 예외는 원형 버튼과 pill 버튼뿐
     · 헤더 : 메인 absolute «투명» (sticky 아님)
     · 포인트색은 면이 아니라 막대 · 강조 글자 · 화살표에만
   ★색만 hue 260°(보라) → 120°(초록) 로 옮긴다. 레이아웃 문법은 그대로.
   ★sec02 의 그라데이션은 CSS 가 아니라 배경 JPG 다(띠 방지) — img/sec02-bg.jpg
   ══════════════════════════════════════════════════════════════════════════ */

/* ---------- 토큰 ---------- */
:root{
  --p700:#2E7D32;   /* 주색   : 푸터·큰 색면·강조 글자·화살표 */
  --p800:#215B25;   /* 더 진한 면 */
  --p500:#43A047;   /* 어두운 면 «위» 글자·아이콘 전용 */
  --p050:#EAF2EA;
  --deep:#0B2D14;
  --ink:#1C1C1C; --body:#666666; --mute:#AAAAAA;
  --face1:#F6F6F6; --face2:#F5FAF6;
  --line:rgba(0,0,0,.12);
  --lineW:rgba(255,255,255,.5);

  --pad:5rem;            /* 82.19 @1578 · 100 @1920 */
  --fs-hero:5rem;        /* 82.19 */
  --fs-num:4.375rem;     /* 71.90 */
  --fs-sec:2.875rem;     /* 47.26 */
  --fs-card:2rem;        /* 32.88 */
  --fs-mid:1.75rem;      /* 28.77 */
  --fs-lead:1.5rem;      /* 24.66 */
  --fs-sub:1.25rem;      /* 20.55 */
  --fs-gnb:1.125rem;     /* 18.49 */
  --fs-body:1rem;        /* 16.44 */
  --fs-sm:.875rem;       /* 14.38 */
  --fs-cap:.8125rem;     /* 13.36 */

  --lh-h:1.196;          /* 98.63 / 82.19 · 56.5 / 47.26 */
  --ls-h:-.02em;         /* 한글 제목 — 실측 그대로 */
  --ls-en:-.004em;       /* 영문 디스플레이 — Pretendard 보정분 +.016em */
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ★전 치수가 rem 이고 root 가 vw 에 비례한다(효성 실측 root=16.4375 @1578).
   ★rem→px 일괄 치환 금지 — `.875rem` 이 0.14px 이 된다. */
html{font-size:clamp(14.5px,1.0417vw,20px)}

body.home{
  background:#fff; color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,
    "Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:var(--fs-body); font-weight:400; line-height:1.75; letter-spacing:-.01em;
  overflow-x:hidden;
}
body.home *,body.home *::before,body.home *::after{box-sizing:border-box}
/* ★color:inherit 을 여기 두면 (0,1,2) 라 .hy-mile h4(0,1,1) 를 눌러
     «흰 카드 위 흰 제목»이 된다 — 실제로 Milestones 카드 제목이 안 보였다. */
body.home h1,body.home h2,body.home h3,body.home h4{
  margin:0; letter-spacing:var(--ls-h); line-height:var(--lh-h);
}
/* ★한국어 줄바꿈 — 어절 중간에서 끊기면 실격 */
body.home,body.home h1,body.home h2,body.home h3,body.home h4,
body.home p,body.home li,body.home dt,body.home dd,body.home span,body.home a{
  word-break:keep-all !important; overflow-wrap:break-word;
}
.home img{max-width:100%; height:auto; display:block}
body.home a{color:inherit; text-decoration:none}
body.home ul,body.home ol{margin:0; padding:0; list-style:none}
body.home a:focus-visible,body.home button:focus-visible{
  outline:2px solid var(--p700); outline-offset:3px;
}
.home .skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--p700);color:#fff;padding:12px 20px;font-weight:700}
.home .skip:focus{left:12px;top:12px}

/* 공통 컨테이너 — ★max-width 없음. 전폭에서 5rem 씩만 뗀다 */
.hy-wrap{width:100%; max-width:none; margin:0; padding:0 var(--pad)}

/* 화살표 */
.hy-ar{width:1.46rem;height:1.46rem;flex:0 0 auto}
.hy-ar-s{width:1.05rem;height:1.05rem}
.hy-ar-h1{width:3.4rem;height:3.4rem;display:inline-block;vertical-align:-.42em;margin-left:.9rem;stroke-width:.9}

/* 하이라인 — 밝은 면 rgba(0,0,0,.12) · 어두운 면 rgba(255,255,255,.5) */
.hy-hline{height:1px;background:var(--line);width:100%}
.hy-hline.on-dark{background:var(--lineW)}

/* 섹션 헤더 한 덩어리 — ★이 모양이 효성이다. 4개 섹션이 전부 같다 */
.hy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;
  padding-bottom:5.7rem}
.hy-t{font-size:var(--fs-sec);line-height:var(--lh-h);font-weight:300;letter-spacing:var(--ls-en);
  color:var(--ink)}
.hy-t .hy-en{font-weight:300;letter-spacing:var(--ls-en);word-spacing:.02em}
.hy-t .hy-t-ko{display:block;margin-top:.55rem;font-size:var(--fs-sub);font-weight:700;
  letter-spacing:var(--ls-h);color:var(--p700)}
.hy-more{display:inline-flex;align-items:center;gap:.7rem;margin-top:.85rem;color:var(--ink);
  font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.hy-more-tx{opacity:0;transform:translateX(.6rem);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.hy-more:hover .hy-more-tx{opacity:1;transform:none}
.hy-more:hover .hy-ar{transform:translateX(.3rem)}
.hy-more .hy-ar{transition:transform .35s var(--ease)}

/* 좌 라벨 / 우 내용 — 효성 Latest News 문법을 전 섹션에 통일 적용 */
.hy-row{display:grid;grid-template-columns:minmax(0,17.5rem) minmax(0,1fr);gap:2rem;
  padding-top:3.95rem}
.hy-label{font-size:var(--fs-cap);font-weight:700;letter-spacing:.09em;color:var(--ink);
  line-height:1.6;text-transform:none}
.hy-label::before{content:"●";margin-right:.55em;font-size:.72em;vertical-align:.14em;color:var(--p700)}
.hy-label-w{color:#fff}
.hy-label-w::before{color:#fff}
.hy-lead{font-size:var(--fs-lead);font-weight:600;line-height:1.5;letter-spacing:var(--ls-h);
  color:var(--ink)}
.hy-sub{margin-top:1rem;font-size:var(--fs-body);line-height:1.75;color:var(--body)}
.hy-note{font-size:var(--fs-body);line-height:1.85;color:var(--body)}
.hy-row-note{padding-top:2.8rem}
.hy-prose-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.hy-prose-2 p:first-child{margin-top:0}
.hy-prose p{margin:1.1rem 0 0;font-size:var(--fs-body);line-height:1.85;color:var(--body)}
.hy-h3{font-size:var(--fs-mid);font-weight:700;letter-spacing:var(--ls-h);line-height:1.35;color:var(--ink)}

/* 등장 (모션 감소 존중은 맨 아래 미디어쿼리) */
.hy-rv{opacity:0;transform:translateY(1.1rem);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.hy-rv.hy-in{opacity:1;transform:none}

/* ══════════════ 헤더 — 메인은 absolute «투명» ══════════════ */
.home .hd{position:absolute;top:0;left:0;right:0;z-index:200;background:transparent;
  border-bottom:0;box-shadow:none}
.home .hd-in{display:flex;align-items:center;gap:0;height:5.6rem;max-width:none;
  margin:0;padding:0 var(--pad)}
.home .logo{display:flex;align-items:center;gap:.6rem;flex:0 0 auto;
  font-size:1.35rem;font-weight:700;letter-spacing:-.01em;color:#fff}
.home .logo .mark{width:1.75rem;height:1.75rem;flex:0 0 auto}
.home .logo .mark rect{fill:rgba(255,255,255,.18)}
.home .logo .mark path:last-of-type{fill:rgba(255,255,255,.6)}
.home .logo .sub{display:block;font-size:.62rem;font-weight:700;letter-spacing:.12em;
  line-height:1.2;color:rgba(255,255,255,.92)}
.home .gnb{display:flex;flex:1 1 auto;justify-content:center;gap:0;min-width:0}
.home .gnb>li>a{display:block;padding:0 1.35rem;line-height:5.6rem;font-size:var(--fs-gnb);
  font-weight:400;letter-spacing:-.01em;color:#fff;white-space:nowrap;position:relative}
.home .gnb>li>a::after{content:"";position:absolute;left:1.35rem;right:1.35rem;bottom:1.4rem;
  height:1px;background:#fff;transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.home .gnb>li>a:hover::after,.home .gnb>li.on>a::after{transform:scaleX(1)}
.home .hd-util{display:flex;align-items:center;gap:.8rem;flex:0 0 auto;padding-left:1rem}
.home .btn-mini{display:inline-flex;align-items:center;height:2.31rem;padding:0 1.15rem;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;background:transparent;
  color:#fff;font-size:var(--fs-body);font-weight:600;letter-spacing:-.01em}
.home .btn-mini:hover{background:#fff;color:var(--p800);border-color:#fff}
.home .lang{display:inline-flex;align-items:center;gap:.4rem;font-size:var(--fs-sm);
  font-weight:600;color:rgba(255,255,255,.92)}
.home .lang .on{color:#fff}
.home .nav-toggle{display:none;width:2.6rem;height:2.6rem;border:1px solid rgba(255,255,255,.5);
  border-radius:0;background:transparent;color:#fff;align-items:center;justify-content:center;cursor:pointer}
.home .nav-toggle svg{width:1.4rem;height:1.4rem}
.home .drawer{display:none;background:#fff;border-top:1px solid var(--line);
  padding:1.6rem var(--pad) 2.4rem}
.home .drawer.open{display:block}
.home .drawer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 1.6rem;
  max-width:none;margin:0}
.home .drawer h3{margin:1.2rem 0 .4rem;font-size:var(--fs-cap);font-weight:700;
  letter-spacing:.06em;color:var(--p700)}
.home .drawer a{display:block;padding:.4rem 0;font-size:var(--fs-sm);color:var(--body)}
.home .drawer a:hover{color:var(--p700)}

/* ══════════════ S1 히어로 — 100vh · 전폭 사진 3장 + parallax ══════════════ */
.hy-hero{position:relative;height:100vh;min-height:38rem;overflow:hidden;background:#0d1a10;
  color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.hy-slides{position:absolute;inset:0}
.hy-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s var(--ease)}
.hy-slide.is-on{opacity:1}
.hy-box{position:absolute;inset:0;overflow:hidden;display:block}
.hy-slides .hy-box img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.2) translateX(3.4vw);transition:transform 8.5s linear}
.hy-slides .hy-slide.is-on .hy-box img{transform:scale(1.2) translateX(-3.4vw)}
/* ★사진 위 오버레이 = rgba(0,0,0,α) «단색». 그라데이션 금지.
   α 는 감이 아니라 사진 밝기 실측으로 계산했다(글자 영역 97% 가 4.5:1 이상) */
.hy-scrim{position:absolute;inset:0;background:rgba(0,0,0,var(--a,.4));display:block}

.hy-hero-in{position:relative;padding:0 var(--pad);margin-bottom:auto;padding-top:26rem}
/* ★13px 짜리 글자에 알파를 먹이면 사진 위에서 바로 4.5:1 아래로 떨어진다.
     히어로 사진 밝기 실측(글자 숨기고 잰 P95) : 헤더띠 .095 / H1 띠 .193 / 리드띠 .089
     → 작은 글자는 전부 «순백 또는 .88 이상»으로 올렸다. */
.hy-kick{display:block;font-size:var(--fs-cap);font-weight:700;letter-spacing:.14em;
  color:#fff}
.hy-h1{margin-top:1.5rem;font-size:var(--fs-hero);line-height:var(--lh-h);font-weight:500;
  letter-spacing:var(--ls-h);color:#fff}
.hy-hero-links{display:flex;gap:2.2rem;margin:2rem 0 0;flex-wrap:wrap}
.hy-hero-links a{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--fs-body);
  font-weight:600;color:#fff;padding-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.45)}
.hy-hero-links a:hover{border-bottom-color:#fff}

.hy-hero-foot{position:relative;padding:0 var(--pad) 2.6rem}
.hy-hero-row{display:flex;align-items:flex-start;justify-content:space-between;gap:3rem;
  padding-top:1.8rem}
.hy-hero-l{display:flex;align-items:flex-start;gap:1.7rem;flex:1 1 auto;min-width:0}
.hy-dots{display:flex;gap:.6rem;flex:0 0 auto;padding-top:.1rem}
.hy-rd{width:2.19rem;height:2.19rem;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.hy-rd svg{width:1.05rem;height:1.05rem}
.hy-rd:hover{background:#fff;color:var(--ink);border-color:#fff}
.hy-hero-lead{margin:0;max-width:42rem;font-size:var(--fs-sub);font-weight:600;line-height:1.6;
  letter-spacing:var(--ls-h);color:#fff}
.hy-hero-news{flex:0 0 auto;display:flex;gap:1.5rem;max-width:34rem}
.hy-nlabel{font-size:var(--fs-cap);font-weight:700;letter-spacing:.12em;color:#fff;padding-top:.2rem}
.hy-hero-news ul{display:grid;gap:.9rem}
.hy-hero-news a{display:grid;grid-template-columns:6.27rem minmax(0,1fr);gap:1rem;align-items:center}
.hy-hero-news a img{width:6.27rem;height:4.01rem;object-fit:cover}
.hy-hero-news b{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.45;
  letter-spacing:var(--ls-h);color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hy-hero-news em{display:block;margin-top:.3rem;font-style:normal;font-size:var(--fs-cap);
  color:rgba(255,255,255,.9)}
.hy-hero-news a:hover b{text-decoration:underline;text-underline-offset:.25em}

/* ══════════════ 섹션 리듬 — pt 6.25rem 전 섹션 동일 ══════════════ */
.hy-sec{padding-top:6.25rem}
.hy-s01{padding-bottom:6rem;background:#fff}
.hy-s03{padding-bottom:0;background:#fff}

/* ══════════════ S2 Business Areas — 5칸 «세로선으로 나눈 칸» ══════════════ */
.hy-cells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.4rem;
  margin-top:3.95rem}
.hy-cell{position:relative;display:flex;flex-direction:column;min-height:24.75rem;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2rem 1.4rem 1.2rem;border-radius:0;background:transparent;
  transition:border-color .3s var(--ease)}
.hy-cell+.hy-cell::before{content:"";position:absolute;left:-.7rem;top:0;bottom:0;width:1px;
  background:var(--line)}
.hy-cell-tag{font-size:var(--fs-cap);font-weight:600;color:var(--body);letter-spacing:-.01em}
.hy-cell-t{margin-top:.4rem;font-size:var(--fs-card);font-weight:700;line-height:1.22;
  letter-spacing:var(--ls-h);color:var(--p700)}
.hy-cell-p{margin:.8rem 0 0;font-size:var(--fs-sm);line-height:1.62;color:var(--body)}
.hy-cell-ar{margin-top:auto;padding-top:1.1rem;color:var(--p700);display:block}
.hy-cell-ar .hy-ar{width:2.19rem;height:2.19rem;transition:transform .35s var(--ease)}
/* ★칸 사진은 «실제 요소» — 가상요소는 렌더 DOM 계수에 잡히지 않는다 */
.hy-cell-shot{display:block;height:7.5rem;margin:1rem -1.4rem -1.2rem;
  background-image:var(--shot);background-size:cover;background-position:center;
  background-repeat:no-repeat;filter:saturate(.92);transition:filter .4s var(--ease)}
.hy-cell:hover{border-top-color:var(--p700);border-bottom-color:var(--p700)}
.hy-cell:hover .hy-cell-ar .hy-ar{transform:translateX(.4rem)}
.hy-cell:hover .hy-cell-shot{filter:saturate(1.15)}

/* ══════════════ S3 핀 섹션 — 배경은 CSS 그라데이션이 아니라 JPG ══════════════ */
.hy-s02{position:relative;padding-bottom:5rem;color:#fff;
  background-color:#143c1e;
  background-image:url(../img/sec02-bg.jpg);
  /* ★100% 100% 로 «늘려» 깐다 — 어느 위치에 어떤 밝기가 오는지 정확히 통제해야
       핀 좌측 리드(흰 글자)가 밝은 띠 위로 올라가는 사고가 안 난다 */
  background-size:100% 100%;background-position:center top;background-repeat:no-repeat}
.hy-s02 .hy-t,.hy-s02 .hy-more,.hy-s02 .hy-lead,.hy-s02 .hy-h3{color:#fff}
.hy-s02 .hy-sub{color:#fff}
.hy-s02 .hy-prose p{color:#fff}
.hy-s02 .hy-label{color:#fff}
.hy-s02 .hy-label::before{color:#fff}
.hy-s02 .hy-note-w{color:#fff}

.hy-gn{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:5rem;padding-top:3.95rem;min-height:27rem;align-items:start}
.hy-gn-l,.hy-gn-r{position:relative;z-index:1}
.hy-gn-l .hy-lead{margin-top:1.1rem}
.hy-gn-r .hy-mtitle{margin-top:.5rem;font-size:var(--fs-sub);font-weight:700;color:#fff;
  letter-spacing:var(--ls-h)}
.hy-metrics{margin:1.8rem 0 0}
.hy-metrics>div{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:.6rem 0 .5rem;border-bottom:1px solid var(--lineW)}
.hy-metrics dt{font-size:var(--fs-body);color:#fff;font-weight:400;
  padding-bottom:.9rem;white-space:nowrap}
.hy-metrics dd{margin:0;font-size:var(--fs-num);font-weight:600;line-height:1.05;color:#fff;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;text-align:right}
.hy-metrics dd i{font-style:normal;font-size:var(--fs-sub);font-weight:600;margin-left:.25rem;
  letter-spacing:var(--ls-h)}
/* ★배경 JPG 위 13px — 화소 실측 3.50 이었다(알파 .72). 순백으로 올려 5.9 확보 */
.hy-mnote{margin:1.1rem 0 0;font-size:var(--fs-cap);color:#fff;text-align:right}

/* 네트워크 도식 = 효성의 «지구본» 자리. 좌하단에 겹쳐 깐다(전폭 블록이 아니다) */
.hy-net{position:absolute;left:-2.4rem;bottom:-2.6rem;width:46rem;height:23rem;
  margin:0;overflow:hidden;z-index:0;pointer-events:none}
/* ★도식 원본이 남색(hue 220°)이다 — 새 파일을 만들지 않고 hue 만 초록으로 옮긴다 */
figure.hy-net img{width:100%;height:auto;margin-top:-7.5rem;
  filter:hue-rotate(-102deg) saturate(1.15) brightness(1.05);
  mix-blend-mode:screen;opacity:.92;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 42%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 46%,#000 42%,transparent 100%)}

.hy-wrap-v{padding-top:3.4rem}
.hy-strip{margin:2.6rem 0 0}
figure.hy-strip img{width:100%;height:16rem;object-fit:cover}
.hy-video{position:relative;width:100%;aspect-ratio:1414/740;overflow:hidden;background:#0d1a10}
.hy-video .hy-vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .9s ease}
.hy-video .idcv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease;pointer-events:none}
.hy-video .idcv.on{opacity:1}
.hy-video.has-video .hy-vposter{opacity:0}
/* 5초 이상 자동 재생되는 움직임에는 멈출 수단이 있어야 한다 (WCAG 2.2.2) */
.idcv-stop{display:none}
.idcv-stop.on{display:inline-flex;align-items:center;gap:.5rem;position:absolute;
  right:1.3rem;bottom:1.2rem;z-index:9;height:2.1rem;padding:0 .9rem;
  border:1px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(0,0,0,.55);
  color:#fff;font:inherit;font-size:var(--fs-cap);font-weight:700;cursor:pointer}
.idcv-stop.on:hover{background:#000;border-color:#fff}
.idcv-stop i{width:.62rem;height:.75rem;flex:0 0 auto;font-style:normal;
  background:linear-gradient(90deg,#fff 0 34%,transparent 34% 66%,#fff 66% 100%)}
.idcv-stop[aria-pressed="true"] i{width:0;height:0;background:none;
  border-left:.68rem solid #fff;border-top:.38rem solid transparent;border-bottom:.38rem solid transparent}

.hy-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,30rem);gap:5rem;
  padding-top:3.95rem}
.hy-blist li{padding:1rem 0;border-bottom:1px solid var(--lineW);font-size:var(--fs-body);
  line-height:1.7;color:#fff}
.hy-blist li:first-child{border-top:1px solid var(--lineW)}
.hy-blist li b{color:#fff;font-weight:700}

/* ---------- 핀(sticky) + 가로 트랙 ---------- */
.hy-pin{position:relative;margin-top:2rem}
.hy-pin-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;padding:3rem 0}
.hy-pin-body{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);gap:3rem;
  padding-top:3.95rem;padding-left:var(--pad);align-items:start}
.hy-pin-l .hy-lead{margin-top:1rem;color:#fff}
.hy-label-2{margin-top:2.4rem}
.hy-track-wrap{overflow:hidden;min-width:0}
.hy-track{display:flex;gap:1.28rem;will-change:transform;transition:none}
.hy-mile{flex:0 0 18.98rem;width:18.98rem;min-height:24.51rem;background:#fff;border-radius:0;
  padding:1.7rem 1.5rem 1.5rem;display:flex;flex-direction:column;
  opacity:0;transform:translateY(2.2rem);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
.hy-mile.is-in{opacity:1;transform:none}   /* ★불투명도로 «퇴장» 시키지 않는다 */
.hy-mile-y{font-size:var(--fs-sub);font-weight:700;color:var(--p700);letter-spacing:-.01em}
.hy-mile h4{margin-top:1.6rem;font-size:var(--fs-sub);font-weight:700;line-height:1.4;
  letter-spacing:var(--ls-h);color:var(--ink)}
.hy-mile-line{display:block;height:1px;background:var(--line);margin:1rem 0 0}
/* ★같은 #666 · 같은 크기인데 여기서만 화소 대비가 4.12 로 떨어진다(칸 카드 .hy-cell-p 는 통과).
     .hy-track 이 will-change:transform + translate3d 로 «합성 레이어»라 서브픽셀 AA 가 꺼지고
     얇은 한글 획이 끝까지 진해지지 않기 때문이다. 계산값(5.74)만 보면 절대 안 보이는 결함이다.
     → 이 문맥에서만 명도를 한 단계 내린다(흰 카드 위 진한 글자 — 다크 위 카드 상시 규칙과도 맞다). */
.hy-mile p{margin:.9rem 0 0;font-size:var(--fs-sm);line-height:1.65;color:#4A4A4A}
.hy-track .hy-mile img{margin-top:auto;margin-left:auto;width:6.93rem;height:4.62rem;object-fit:cover}

/* ══════════════ S4 Newsroom ══════════════ */
.hy-row-news{padding-top:3.95rem}
.hy-news li{border-bottom:1px solid var(--line)}
.hy-news li:first-child{border-top:1px solid var(--line)}
.hy-news a{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 7rem 1.6rem;gap:1.6rem;
  align-items:center;padding:1.25rem .2rem}
.hy-cat{font-size:var(--fs-cap);font-weight:700;color:var(--p700);letter-spacing:-.01em}
.hy-nt b{display:block;font-size:var(--fs-lead);font-weight:600;line-height:1.45;
  letter-spacing:var(--ls-h);color:var(--ink)}
.hy-nt em{display:block;margin-top:.5rem;font-style:normal;font-size:var(--fs-body);
  line-height:1.7;color:var(--body)}
.hy-nd{font-size:var(--fs-sm);color:var(--body);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.hy-news .hy-ar{color:var(--ink);transition:transform .35s var(--ease)}
.hy-news a:hover .hy-ar{transform:translateX(.35rem)}
.hy-news a:hover b{color:var(--p700)}

/* CTA — 전폭 사진 띠 */
.hy-band{position:relative;margin-top:6rem;overflow:hidden;color:#fff;
  display:flex;align-items:center;min-height:15rem;background:#0d1a10}
.hy-band>img.hy-bandimg,.hy-band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hy-band .hy-wrap{position:relative;width:100%}
.hy-band-in{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;
  flex-wrap:wrap;padding:4rem 0}
.hy-band-t{font-size:var(--fs-mid);font-weight:700;line-height:1.35;letter-spacing:var(--ls-h);color:#fff}
.hy-band-p{margin:1rem 0 0;max-width:44rem;font-size:var(--fs-body);line-height:1.75;
  color:rgba(255,255,255,.95)}
.hy-band-cta{margin:0}
.hy-band-cta a{display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-body);
  font-weight:700;color:#fff;padding-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.6)}
.hy-band-cta a:hover{border-bottom-color:#fff}

/* ══════════════ 푸터 — 초록 단색 면 ══════════════
   ★면 색을 --p700 → --p800 으로 내렸다. 근거는 «캡처 화소» 실측이다(CSS 감사기 아님) :
       #2E7D32 위 흰 글자  = 3.84 ~ 4.75  (14px 본문 기준 4.5 미달)
       #215B25 위 흰 글자  = 7.96         (여유 있게 통과)
     효성 원본 푸터 #2E008B 는 휘도 0.029 인데 --p700(#2E7D32)은 0.155 — 5배 밝다.
     «hue 만 옮긴다»가 명도까지 옮겨 버려서 푸터만 대비가 무너졌다. 같은 hue 120° 안에서
     명도만 원본 역할에 맞게 되돌린 것이라 §색 규칙(변수를 목적별로 쪼개지 말 것)에 어긋나지 않는다.
   ★알파 글자(.95)도 전부 순백으로 바꿨다 — 한글 14px 은 획이 얇아 알파가 그대로 손실이 된다. */
.home .ft{background:var(--p800);color:#fff;padding:3.2rem 0 1.8rem;
  font-size:var(--fs-sm)}
.home .ft-top{display:grid;grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:2.4rem;
  max-width:none;margin:0;padding:0 var(--pad)}
.home .ft h3{margin-bottom:.9rem;font-size:var(--fs-body);font-weight:700;color:#fff;letter-spacing:-.01em}
.home .ft a{color:#fff}
.home .ft a:hover{color:#fff;text-decoration:underline;text-underline-offset:.25em}
.home .ft li{padding:.25rem 0}
.home .ft-brand .logo{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  font-size:1.25rem;font-weight:700;color:#fff}
.home .ft-brand .logo .mark{width:1.6rem;height:1.6rem}
.home .ft-brand .logo .mark rect{fill:rgba(255,255,255,.2)}
.home .ft-brand .logo .mark path:last-of-type{fill:rgba(255,255,255,.6)}
.home .ft-brand .logo .sub{display:block;font-size:.6rem;letter-spacing:.12em;
  color:#fff;line-height:1.2}
.home .ft-brand p{font-size:var(--fs-sm);line-height:1.8}
.home .notice{max-width:none;margin:1.6rem 0 0;padding:1rem var(--pad);border:0;border-radius:0;
  border-top:1px solid rgba(255,255,255,.34);font-size:var(--fs-cap);line-height:1.8;
  color:#fff}
.home .notice b{color:#fff}
.home .ft-bot{max-width:none;margin:1.2rem 0 0;padding:1.4rem var(--pad) 0;
  border-top:1px solid rgba(255,255,255,.28);display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;
  align-items:center;justify-content:space-between}
.home .ft-legal{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.home .ft-legal a{font-weight:700;color:#fff}
.home .ft-addr{font-size:var(--fs-cap);line-height:1.9;color:#fff}

/* ══════════════ 반응형 ══════════════ */
@media (max-width:1280px){
  :root{--pad:3.4rem}
  .hy-hero-in{padding-top:22rem}
  .hy-hero-news{max-width:28rem}
  .home .gnb>li>a{padding:0 1.1rem;font-size:1rem}
}
@media (max-width:1024px){
  html{font-size:15px}
  :root{--pad:2.2rem;--fs-hero:3rem;--fs-sec:2.1rem;--fs-num:3rem;--fs-card:1.5rem;
        --fs-mid:1.5rem;--fs-lead:1.25rem;--fs-sub:1.125rem;--fs-body:1rem}
  .home .gnb{display:none}
  .home .nav-toggle{display:flex}
  .home .hd-in{justify-content:space-between}
  .hy-hero{height:auto;min-height:36rem;padding-top:9rem}
  .hy-hero-in{padding-top:2rem;padding-bottom:3rem}
  .hy-ar-h1{width:2.2rem;height:2.2rem}
  .hy-hero-row{flex-direction:column;gap:1.8rem}
  .hy-hero-news{max-width:none;width:100%}
  .hy-head{padding-bottom:3rem;flex-direction:column;gap:1rem}
  .hy-row,.hy-row-news,.hy-row-note{grid-template-columns:minmax(0,1fr);gap:1rem;padding-top:2.2rem}
  .hy-sec{padding-top:3.8rem}
  .hy-s01{padding-bottom:4rem}
  .hy-s02{padding-bottom:4rem}
  .hy-cells{grid-template-columns:minmax(0,1fr);gap:0;margin-top:2.2rem}
  .hy-cell{min-height:0;border-top:0;padding:1.8rem 0 1.4rem}
  .hy-cell:first-child{border-top:1px solid var(--line)}
  .hy-cell+.hy-cell::before{display:none}
  .hy-cell-shot{height:11rem;margin-left:0;margin-right:0}
  .hy-gn,.hy-split{grid-template-columns:minmax(0,1fr);gap:2.4rem}
  /* ★모바일 : 46rem 절대배치 도식이 390px 을 667px 로 밀어냈다(overflow:hidden 이 감춤) */
  .hy-net{position:static;width:100%;height:auto;margin:2.4rem 0 0;overflow:visible}
  /* ★마스크·blend 를 둘 다 끄면 도식의 남색 바탕이 «초록 위 어두운 상자»로 드러난다
       (720px 캡처에서 확인). 데스크톱처럼 지우지 말고 «넓은» 마스크로 가장자리만 녹인다
       — 노드는 프레임의 80% 안에 있어 잘리지 않는다. */
  figure.hy-net img{margin-top:0;mix-blend-mode:screen;opacity:1;
    -webkit-mask-image:radial-gradient(ellipse 84% 82% at 50% 48%,#000 64%,transparent 100%);
    mask-image:radial-gradient(ellipse 84% 82% at 50% 48%,#000 64%,transparent 100%)}
  .hy-wrap-v{padding-top:2.6rem}
  .hy-video{aspect-ratio:16/9}
  .hy-strip{margin-top:2.2rem}
  figure.hy-strip img{height:12rem}
  /* ★핀을 끄고 평범한 세로 스크롤로 되돌린다 */
  .hy-pin{margin-top:3.4rem;height:auto !important}
  .hy-pin-stage{position:static;height:auto;overflow:visible;padding:0}
  .hy-pin-body{grid-template-columns:minmax(0,1fr);padding-left:0;padding-top:2.2rem;gap:2rem}
  .hy-track-wrap{overflow:visible}
  .hy-track{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.28rem;
    transform:none !important}
  .hy-mile{flex:none;width:auto;min-height:0;opacity:1;transform:none}
  .hy-news a{grid-template-columns:minmax(0,1fr);gap:.5rem;padding:1.3rem 0}
  .hy-nd{text-align:left}
  .hy-news .hy-ar{display:none}
  .hy-band{margin-top:3.4rem;min-height:0}
  .hy-band-in{padding:2.6rem 0}
  .home .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home .drawer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  html{font-size:14.5px}
  :root{--pad:1.4rem;--fs-hero:2.2rem;--fs-sec:1.75rem;--fs-num:2.4rem;--fs-lead:1.15rem}
  .hy-hero{min-height:32rem;padding-top:7rem}
  .hy-hero-news a{grid-template-columns:5rem minmax(0,1fr);gap:.7rem}
  .hy-hero-news img{width:5rem;height:3.2rem}
  .hy-track{grid-template-columns:minmax(0,1fr)}
  .hy-metrics>div{flex-wrap:wrap}
  .hy-metrics dt{padding-bottom:0}
  .home .ft-top{grid-template-columns:minmax(0,1fr)}
  .home .drawer-grid{grid-template-columns:minmax(0,1fr)}
  .home .ft-bot{flex-direction:column;align-items:flex-start}
}
@media (max-width:430px){
  :root{--pad:1.15rem;--fs-hero:1.95rem}
  .hy-hero-in{padding-top:1.4rem}
  .hy-band-in{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .hy-rv{opacity:1;transform:none}
  .hy-mile{opacity:1;transform:none}
  .hy-box img{transition:none;transform:scale(1.02)}
  .hy-track-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hy-track{transform:none !important}
  .home *{animation:none !important;transition:none !important}
}