@charset "utf-8";
/* ============================================================================
   co5 케미엑스 — 메인 전용 «동원그룹 레이아웃 문법»
   기준 : _co\_스펙_co5_dongwon.md (dongwon.com 실측 2026-08-16)
   ─ 컨테이너 없음 · 좌우 30px 고정 · 글자만 vw 비례(기준 1920)
   ─ 히어로 115 : 섹션제목 120(고정) : 본문 21.4  = 5.4 : 5.6 : 1
   ─ 통계 숫자 200px 고정 · 섹션 pt/pb clamp(200,15vw,240) · 섹션 간격 0
   ─ 라운드는 0 아니면 9999(알약) 둘 중 하나. 중간값 금지
   ─ 사진 위 오버레이 rgba(20,17,13,α) «단색» — α 는 사진 밝기 실측값
   이 파일은 index.html 에서만 불린다(body.home). 서브는 site.css 끝 블록.
   ========================================================================== */

:root{
  /* ① vw 비례 (1920 기준 px ÷ 19.2) */
  --t-hero : clamp(32px, 7.292vw, 140px);   /* 140 */
  --t-lead : clamp(28px, 5.729vw, 110px);   /* 110 */
  --t-board: clamp(26px, 5.208vw, 100px);   /* 100 */
  --t-sub  : clamp(23px, 3.750vw,  72px);   /*  72 */
  --t-read : clamp(20px, 3.333vw,  64px);   /*  64 */
  --t-mid  : clamp(19px, 2.500vw,  48px);   /*  48 */
  --t-card : clamp(17px, 1.875vw,  36px);   /*  36 */
  --t-body : clamp(16px, 1.563vw,  30px);   /*  30 */
  --t-body2: clamp(15px, 1.354vw,  26px);   /*  26 */
  --t-cap  : clamp(13px, 1.042vw,  20px);   /*  20 */

  /* ② 고정 px — ★여백은 «고정», 글자는 «비례». 한쪽으로 통일하면 화면이 안 닮는다 */
  --gut : 30px;                              /* 좌우 여백 — 화면이 커져도 30 */
  --sp  : 240px;                             /* 섹션 상·하 여백 (동원 240 @1600) */
  --sp2 : 120px;                             /* 두 번째 리듬 (동원 120·127) */
  --hd  : 120px;                             /* 헤더 높이 */
  --utl : 44px;                              /* 유틸 줄 */

  /* 색 — co5 배정 hue 40° */
  --pri   : #9C6800;   /* 흰 배경 4.78:1 AA */
  --pri-d : #7A5100;
  --ink   : #1B1815;
  --ink2  : #6B655C;
  --dk    : #14110D;
  --pale  : #FBFAF8;   /* ★#F8F7F5 이면 포인트색이 4.46:1 로 AA 미달 → 화소로 재서 올렸다 */
  --ln    : #E3E0DA;
  --ln-dk : #2E2A24;

  /* 실측 오버레이 — 95백분위 휘도로 흰 글자 4.5:1 계산 (감으로 정하지 않는다) */
  --scrim-hero : rgba(20,17,13,.55);  /* hero.jpg        필요 .49 */
  --scrim-jrny : rgba(20,17,13,.64);  /* plant-aerial    필요 .58 */
  --scrim-slit : rgba(20,17,13,.45);  /* energy.jpg      필요 .38 */
  --scrim-cta  : rgba(20,17,13,.66);  /* cta-bg.jpg      필요 .58 */
}

/* ---------------------------------------------------------------- 기본 리셋 */
body{
  font-size:var(--t-body2);
  line-height:1.60;
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--ink);
  background:#fff;
  word-break:keep-all;
}
h1,h2,h3,h4{word-break:keep-all !important;font-weight:700;letter-spacing:-.035em}
p,li,td,th,dd,dt{word-break:keep-all !important}
:focus-visible{outline:3px solid var(--pri);outline-offset:2px}

/* ★컨테이너가 «없다» — 화면 좌우 30px 만 띄우고 전부 전폭이다.
   ★site.css 끝의 효성 블록에 `.hero .wrap{width:100%}` (0,2,0) 가 있어
     `.wrap{width:auto}` (0,1,0) 로는 못 이긴다 — 같은 자리를 다시 짚어 준다 */
.wrap{max-width:none;width:auto;margin:0 var(--gut);padding:0}
.hero .wrap,.phero .wrap,.cta .wrap,.ftr .wrap{max-width:none;width:auto;margin:0 var(--gut);padding:0}

/* ---------------------------------------------------------------- 헤더 */
/* fixed · 완전 투명 · 링크는 한 개도 건드리지 않고 «모양만» 바꾼다 */
.util{position:fixed;top:0;left:0;right:0;z-index:1002;height:var(--utl);
  background:transparent;border-bottom:0;transition:color .3s}
.util-in{max-width:none;margin:0;padding:0 var(--gut);height:var(--utl);
  display:flex;align-items:center;justify-content:flex-end;gap:14px}
.util a,.util span{font-size:13px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.78)}
.util .sep{color:rgba(255,255,255,.34)}
.util b{color:#fff;font-weight:700}
.util a:hover{color:#fff;text-decoration:underline}

/* ★height 를 고정하면 모바일에서 .mnav(헤더 안쪽)가 잘린다 → min-height 로 */
.hdr{position:fixed;top:var(--utl);left:0;right:0;z-index:1000;height:auto;min-height:var(--hd);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s ease,border-color .3s ease}
.hdr-in{max-width:none;margin:0;padding:0 var(--gut);height:var(--hd);
  display:flex;align-items:center;gap:0;position:relative}
.logo{flex:0 0 auto}
.logo b{font-size:24px;font-weight:700;letter-spacing:-.04em;color:#fff}
.logo span{font-size:9.5px;font-weight:700;letter-spacing:.26em;color:rgba(255,255,255,.62)}
.hdr nav[aria-label="주 메뉴"]{margin:0 auto}
.gnb{display:flex;gap:clamp(28px,5.6vw,104px);margin:0}
.gnb>li>a{display:block;height:var(--hd);line-height:var(--hd);
  font-size:16px;font-weight:700;letter-spacing:.02em;color:#fff}
.gnb>li>a::after{height:2px;bottom:34px;background:#fff}
.gnb>li>a[aria-current="page"]{color:#fff}
.mega{top:var(--hd);border-top:1px solid var(--ln);box-shadow:0 20px 40px rgba(20,17,13,.10)}
.mega-in{max-width:none;margin:0;padding:44px var(--gut) 52px}
.mega-col h3{font-size:15px;color:var(--pri);letter-spacing:-.03em}
.mega-col a{font-size:15px;color:var(--ink2)}
.mega-col a:hover{color:var(--pri)}
.hdr-util{margin-left:0;gap:12px}
.btn-hd{height:44px;padding:0 26px;border-radius:9999px;background:var(--pri);
  font-size:14px;font-weight:700;letter-spacing:-.02em}
.btn-hd:hover{background:var(--pri-d)}
.burger i{background:#fff}

/* 스크롤하면 흰 판으로 — 흰 섹션 위에서 흰 글자가 사라지는 것을 막는다 */
body.is-scrolled .util{background:#fff}
body.is-scrolled .util a,body.is-scrolled .util span{color:var(--ink2)}
body.is-scrolled .util .sep{color:#C9C3B9}
body.is-scrolled .util b{color:var(--pri)}
body.is-scrolled .hdr{background:#fff;border-bottom-color:var(--ln)}
body.is-scrolled .logo b{color:var(--ink)}
body.is-scrolled .logo span{color:var(--ink2)}
body.is-scrolled .gnb>li>a{color:var(--ink)}
body.is-scrolled .gnb>li>a::after{background:var(--pri)}
body.is-scrolled .burger i{background:var(--ink)}
.mnav{border-top:1px solid var(--ln)}
.mnav h3{color:var(--pri)}

/* ---------------------------------------------------------------- 공통 조판 */
/* ★자간 +0.5em 짜리 작은 굵은 글자 = 이 사이트의 «서명» */
.eyebrow{display:block;margin:0 0 26px;font-size:var(--t-body);line-height:1.6;
  font-weight:700;letter-spacing:.5em;text-transform:none;color:var(--ink)}
.dw-spaced{font-size:var(--t-body);line-height:1.75;font-weight:700;letter-spacing:.5em}

/* ★동원 : 240 은 «사업·미디어» 두 곳만. 나머지는 120·127 — 리듬이 «있다» */
.sec{padding:var(--sp2) 0;background:#fff}
.sec--lg{padding:var(--sp2) 0}
.sec--soft{background:var(--pale)}
.dw-biz{padding:var(--sp) 0 0}
.dw-media{padding:var(--sp) 0}
.sec-head{margin:0 0 60px;max-width:none}
.sec-head--c{text-align:left;margin-left:0;margin-right:0}
/* ★홈 섹션 제목은 «고정 px» — 히어로(115)보다 오히려 크다 */
.sec-h{font-size:120px;line-height:1.14;font-weight:700;letter-spacing:-.045em;color:var(--ink)}
.sec-sub{margin-top:30px;font-size:var(--t-body2);line-height:1.7;color:var(--ink2);max-width:52em}
.prose p{margin-bottom:26px;font-size:var(--t-body2);line-height:1.75;color:var(--ink2)}
.prose strong{font-weight:700;color:var(--ink)}
.dw-point{color:var(--pri)}

/* ---------------------------------------------------------------- 버튼 : 알약 */
.btn{height:62px;min-width:190px;padding:0 34px;border-radius:9999px;
  font-size:14px;font-weight:700;letter-spacing:-.02em;gap:10px}
.btn-p{background:var(--pri);color:#fff}
.btn-p:hover{background:var(--pri-d)}
.btn-o{border:1px solid rgba(255,255,255,.62);color:#fff;background:transparent}
.btn-o:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-g{border:1px solid var(--ln);color:var(--ink);background:#fff}
.btn-g:hover{border-color:var(--pri);color:var(--pri)}
.btn-sm{height:54px;min-width:171px;padding:0 28px;font-size:14px}
.btn svg{width:16px;height:16px}
.more{font-size:var(--t-cap);font-weight:700;color:var(--pri);letter-spacing:-.02em}
.more svg{width:14px;height:14px}

/* ---------------------------------------------------------------- ① 히어로 100vh */
.hero{position:relative;height:100vh;min-height:640px;display:flex;align-items:center;
  overflow:hidden;background:var(--dk)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
/* ★단색 오버레이만. 그라데이션 절대 금지 */
.hero-bg::after{content:'';position:absolute;inset:0;background:var(--scrim-hero)}
.hero-in{position:relative;z-index:2;width:100%;padding:var(--hd) 0 0;color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.86);margin-bottom:34px}
.hero h1{font-size:var(--t-hero);line-height:1.30;font-weight:700;letter-spacing:-.035em;
  max-width:none;color:#fff}
.hero-lead{margin-top:44px;max-width:44em;font-size:var(--t-body);line-height:1.75;
  font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.94)}
.hero-cta{margin-top:52px;display:flex;flex-wrap:wrap;gap:12px}

/* 다크 공고 카드 (동원 «제58기 중간배당 기준일 공고» 자리).
   ★동원은 좌하단이지만 우리 히어로엔 리드문·버튼이 더 있어 겹친다 → 우하단으로 */
.dw-notice{position:absolute;right:var(--gut);bottom:56px;z-index:3;width:min(560px,40vw);
  display:block;padding:34px 36px 30px;background:rgba(20,17,13,.86);color:#fff;
  border-radius:0;transition:background .3s}
.dw-notice:hover{background:var(--dk)}
.dw-notice b{display:block;padding-right:60px;font-size:var(--t-card);font-weight:700;
  letter-spacing:-.035em;line-height:1.4}
.dw-notice i{position:absolute;right:36px;top:36px;width:26px;height:26px;font-style:normal;
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.dw-notice em{display:block;margin-top:44px;font-size:var(--t-cap);font-style:normal;
  line-height:1.6;color:rgba(255,255,255,.80)}
.idcv-stop.on{border-radius:9999px}

/* ---------------------------------------------------------------- ② 저니 100vh */
/* 동원은 230×128 작은 «영상»이 스크롤 따라 전폭으로 커진다.
   우리는 영상 자산이 없어 사진으로 대체하고, 확대만 clip-path 로 재현한다.
   ★지원 안 되는 브라우저는 «최종 상태(전폭)» 로 남는다 — 빈 패널이 지나가지 않는다 */
.dw-journey{position:relative;height:100vh;min-height:620px;overflow:hidden;background:var(--dk)}
.dw-journey-fig{position:absolute;inset:0;margin:0}
.dw-journey-fig img{width:100%;height:100%;object-fit:cover}
.dw-journey-fig::after{content:'';position:absolute;inset:0;background:var(--scrim-jrny)}
.dw-journey-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--gut);color:#fff}
.dw-journey-in .dw-spaced{color:rgba(255,255,255,.86);margin-bottom:34px}
.dw-journey h2{font-size:var(--t-lead);line-height:1.30;font-weight:700;letter-spacing:-.035em}
.dw-journey p.dw-jl{margin-top:40px;max-width:40em;font-size:var(--t-body2);line-height:1.75;
  color:rgba(255,255,255,.88)}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .dw-journey-fig{animation:dwzoom linear both;animation-timeline:view();
      animation-range:entry 4% entry 92%}
    @keyframes dwzoom{from{clip-path:inset(36% 32%)}to{clip-path:inset(0% 0%)}}
  }
}

/* ---------------------------------------------------------------- ③ 다크 «답하다» */
.dw-dark{background:var(--dk);color:#fff;padding:120px 0 64px}
.dw-dark+.dw-dark,.dw-dark+.sec.dw-stat-sec{padding-top:0}
/* 슬릿 사진 띠 — 동원은 영상을 1554×80 가로 띠로 열어 보인다 */
.dw-slit{position:relative;margin:0 12px 96px;height:328px;overflow:hidden}
.dw-slit img{width:100%;height:100%;object-fit:cover}
.dw-slit::after{content:'';position:absolute;inset:0;background:var(--scrim-slit)}
.dw-slit figcaption{position:absolute;left:34px;bottom:28px;z-index:2;color:#fff;
  font-size:var(--t-cap);font-weight:700;letter-spacing:.5em}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .dw-slit{animation:dwslit linear both;animation-timeline:view();
      animation-range:entry 6% entry 88%}
    @keyframes dwslit{from{height:80px}to{height:328px}}
  }
}
.dw-desc{margin:0 var(--gut) 0;font-size:var(--t-body);line-height:1.75;font-weight:700;
  letter-spacing:.16em;color:#fff;max-width:56em}
.dw-dark .eyebrow{color:rgba(255,255,255,.72)}

/* 인포그래픽 : 200px 초대형 숫자 2개 + 사진 */
.dw-info{display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);gap:0;
  align-items:center;margin:127px var(--gut) 0}
.dw-info-fig{margin:0;overflow:hidden}
.dw-info-fig img{width:100%;height:auto;display:block}
.dw-num{display:flex;align-items:flex-start;justify-content:flex-end;gap:20px;
  padding:26px 0}
.dw-num b{font-size:200px;line-height:1;font-weight:700;letter-spacing:-.06em;color:#fff;
  font-variant-numeric:tabular-nums;display:block}
.dw-num i{font-size:64px;font-style:normal;font-weight:700;line-height:1;color:#fff;
  align-self:flex-end;padding-bottom:18px}
/* ★동원 배치 : [사진] … [+26 %] … [라벨은 화면 오른쪽 끝] */
.dw-num-l{flex:0 0 auto;text-align:right;align-self:flex-start;padding-top:14px;
  font-size:var(--t-cap);line-height:1.6;color:rgba(255,255,255,.86);
  width:13em}
.dw-num-l em{display:block;font-style:normal;color:rgba(255,255,255,.58);font-size:.85em}
.dw-num-v{display:flex;align-items:flex-end}

/* 통계 4칸 — 동원 «789 간격 0» 그대로 */
.dw-stat-sec{background:var(--dk);color:#fff;padding:127px 0 var(--sp2)}
.dw-stat-sec .sec-h{color:#fff}
.dw-stat-sec .sec-sub{color:rgba(255,255,255,.66)}
.dw-stat-sec .eyebrow{color:rgba(255,255,255,.72)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:transparent;border:0;border-top:1px solid var(--ln-dk);border-radius:0;overflow:visible}
.stat{background:transparent;padding:56px 40px 56px 0;text-align:left;
  border-bottom:1px solid var(--ln-dk)}
.stat+.stat{border-left:1px solid var(--ln-dk);padding-left:40px}
.stat b{display:block;font-size:clamp(30px,3.6vw,68px);font-weight:700;line-height:1.05;
  letter-spacing:-.05em;color:var(--pri);color:#E9B84A}
.stat span{display:block;margin-top:18px;font-size:var(--t-cap);color:rgba(255,255,255,.72)}

/* ---------------------------------------------------------------- ④ 사업 행 리스트 */
/* ★동원의 인상 : 좌 큰 제목(59px) / 우 사진 984×381 — 37.5% : 62.5% */
.dw-biz .grid.g3{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  border-top:1px solid var(--ln)}
.dw-biz .card-img{display:grid;grid-template-columns:minmax(0,37.5%) minmax(0,62.5%);
  gap:0;align-items:stretch;border:0;border-bottom:1px solid var(--ln);border-radius:0;
  background:#fff;overflow:visible;transition:background .35s}
.dw-biz .card-img:hover{background:var(--pale);transform:none;box-shadow:none;border-color:var(--ln)}
.dw-biz .card-img figure{order:2;aspect-ratio:auto;height:300px;overflow:hidden;margin:0}
.dw-biz .card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.dw-biz .card-img:hover img{transform:scale(1.04)}
.dw-biz .card-img .bd{order:1;padding:44px 56px 44px 0;display:flex;flex-direction:column;
  justify-content:center}
.dw-biz .card-img .tag{order:-1;margin:0 0 18px;padding:0;background:transparent;border-radius:0;
  color:var(--pri);font-size:var(--t-cap);font-weight:700;letter-spacing:.32em}
.dw-biz .card-img h3{font-size:var(--t-sub);line-height:1.2;font-weight:700;
  letter-spacing:-.045em;margin-bottom:20px;color:var(--ink)}
.dw-biz .card-img p{font-size:var(--t-body2);line-height:1.7;color:var(--ink2);max-width:34em}
.dw-biz .card-img .more{margin-top:22px}

/* ---------------------------------------------------------------- ⑤ 스플릿 */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.split-fig{border-radius:0;overflow:hidden;aspect-ratio:auto;height:380px;margin:0}
.split-fig img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:var(--t-sub);line-height:1.22;font-weight:700;letter-spacing:-.045em;
  margin-bottom:34px}
.split .prose{padding-left:0}

/* ---------------------------------------------------------------- ⑥ 표 */
.tbl-wrap{border:0;border-radius:0;border-top:2px solid var(--ink)}
.tbl{min-width:720px;font-size:var(--t-body2)}
.tbl caption{padding:22px 0 0;font-size:var(--t-cap);color:var(--ink2);text-align:left}
.tbl th,.tbl td{padding:20px 24px 20px 0;border-bottom:1px solid var(--ln)}
.tbl thead th{background:transparent;font-size:var(--t-cap);font-weight:700;letter-spacing:.16em;
  color:var(--ink);border-bottom:1px solid var(--ink)}
.tbl tbody th{background:transparent;width:auto;font-size:var(--t-body);letter-spacing:-.035em}
.tbl tbody th a b{font-weight:700}
.tbl tbody tr:hover{background:var(--pale)}
.tbl td{color:var(--ink2)}

/* ---------------------------------------------------------------- ⑦ ESG 카드 767 gap20 */
.dw-esg .grid.g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dw-esg .card{border:0;border-top:1px solid var(--ink);border-radius:0;background:#fff;
  padding:44px 44px 48px 0}
.dw-esg .card:hover{border-color:var(--pri);transform:none;box-shadow:none}
.dw-esg .card .ic{width:56px;height:56px;border-radius:9999px;background:var(--pale);
  margin-bottom:34px}
.dw-esg .card .ic svg{width:26px;height:26px;stroke:var(--pri)}
.dw-esg .card h3{font-size:var(--t-mid);line-height:1.24;letter-spacing:-.045em;margin-bottom:18px}
.dw-esg .card p{font-size:var(--t-body2);line-height:1.7;color:var(--ink2)}
.dw-esg .card .more{margin-top:26px}

/* ---------------------------------------------------------------- ⑧ 미디어 767 gap20 */
.dw-media .grid.g2{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dw-media-fig{margin:0 0 30px;height:250px;overflow:hidden}
.dw-media-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.dw-media-fig:hover img{transform:scale(1.04)}
.dw-media .g2>div>h3{font-size:var(--t-card) !important;font-weight:700;letter-spacing:-.04em;
  margin-bottom:8px !important;padding-bottom:22px;border-bottom:1px solid var(--ink)}
.board li{border-bottom:1px solid var(--ln)}
.board a{gap:24px;padding:28px 0;align-items:flex-start}
.board time{font-size:var(--t-cap);color:var(--ink2);width:auto;order:2;margin-left:auto;
  white-space:nowrap;padding-top:4px}
.board a>div{order:1;flex:1 1 auto;min-width:0}
.board h3{font-size:var(--t-card);line-height:1.4;font-weight:700;letter-spacing:-.04em;
  margin-bottom:10px}
.board a:hover h3{color:var(--pri)}
.board p{font-size:var(--t-body2);line-height:1.7;color:var(--ink2)}

/* ---------------------------------------------------------------- ⑨ 하단 CTA */
.cta{background:var(--dk);border-radius:0}
.cta-bg{opacity:1}
.cta-bg img{width:100%;height:100%;object-fit:cover}
.cta-bg::after{content:'';position:absolute;inset:0;background:var(--scrim-cta)}
.cta-in{max-width:none;margin:0;padding:var(--sp2) var(--gut) 152px;text-align:left}
.cta h2{font-size:var(--t-sub);line-height:1.2;font-weight:700;letter-spacing:-.045em;color:#fff}
.cta p{margin-top:30px;max-width:48em;font-size:var(--t-body2);line-height:1.75;
  color:rgba(255,255,255,.86)}
.cta .hero-cta{justify-content:flex-start;margin-top:52px}

/* ---------------------------------------------------------------- 푸터 */
.ftr{background:#fff;color:var(--ink2);padding:120px 0 0;border-top:1px solid var(--ln)}
.ftr .wrap{max-width:none;width:auto;margin:0 var(--gut)}
.ftr-top{grid-template-columns:1.5fr repeat(4,1fr);gap:40px;padding-bottom:72px;
  border-bottom:1px solid var(--ln)}
.ftr-logo b{font-size:24px;color:var(--ink);letter-spacing:-.04em}
.ftr-logo span{font-size:9.5px;letter-spacing:.26em;color:var(--ink2)}
.ftr-logo p{margin-top:22px;font-size:var(--t-cap);line-height:1.7;color:var(--ink2)}
.ftr-col h3{font-size:var(--t-cap);color:var(--ink);letter-spacing:.06em;margin-bottom:20px}
.ftr-col a{font-size:var(--t-cap);color:var(--ink2);padding:6px 0}
.ftr-col a:hover{color:var(--pri)}
.ftr-mid{padding:34px 0;border-bottom:1px solid var(--ln);gap:12px 32px}
.ftr-mid a{font-size:var(--t-cap);color:var(--ink)}
.ftr-bot{padding:34px 0 56px;font-size:var(--t-cap);color:var(--ink2)}
.ftr-bot .copy{color:var(--ink2)}
/* ★다크 위가 아니라 흰 면이지만, 고지 상자는 «흰 면 + 진한 글자» 규칙을 그대로 지킨다 */
.sample-note{margin-top:26px;padding:22px 26px;border:1px solid var(--ln);border-radius:0;
  background:var(--pale);color:var(--ink);font-size:var(--t-cap);line-height:1.7}
.sample-note b{color:var(--pri)}
.totop{right:30px;bottom:30px;width:56px;height:56px;border-radius:9999px;background:var(--pri)}

/* ---------------------------------------------------------------- 반응형 */
/* ★홈 섹션 제목은 «고정 px» 계단 (동원 : 120@1600 → 84@1280) */
@media (max-width:1439px){
  .sec-h{font-size:84px}
  .dw-num b{font-size:100px}
  .dw-num i{font-size:36px;padding-bottom:10px}
}
@media (max-width:1439px){
  :root{--sp:200px;--sp2:104px}
}
@media (max-width:1239px){
  .sec-h{font-size:64px}
  .gnb{gap:26px}
  .dw-biz .card-img figure{height:280px}
  .split-fig{height:340px}
}
@media (max-width:1023px){
  :root{--hd:70px;--utl:0px;--gut:22px;--sp:112px;--sp2:80px}
  .util{display:none}
  .hdr{top:0}
  .gnb,.btn-hd{display:none}
  .burger{display:flex;margin-left:auto}
  .hdr nav[aria-label="주 메뉴"]{margin:0}
  .hdr-util{margin-left:auto}
  .sec-h{font-size:48px}
  .hero{height:auto;min-height:0;padding:0}
  .hero-in{padding:calc(var(--hd) + 96px) 0 300px}
  .dw-notice{width:auto;right:var(--gut);bottom:40px;padding:26px 24px 22px}
  .dw-notice i{right:24px;top:26px}
  .dw-notice em{margin-top:26px}
  .dw-journey{height:auto;min-height:0}
  .dw-journey-in{padding:120px var(--gut)}
  .dw-slit{height:220px;margin-bottom:64px}
  .dw-info{grid-template-columns:minmax(0,1fr);gap:44px;margin-top:80px}
  .dw-num{justify-content:flex-start;padding:18px 0;flex-wrap:wrap}
  .dw-num b{font-size:88px}
  .dw-num-l{order:-1;text-align:left;width:100%;padding-top:0;padding-bottom:8px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:38px 24px 38px 0}
  .stat+.stat{padding-left:24px}
  .stats .stat:nth-child(odd){border-left:0;padding-left:0}
  .dw-biz .card-img{grid-template-columns:minmax(0,1fr)}
  .dw-biz .card-img figure{order:1;height:260px}
  .dw-biz .card-img .bd{order:2;padding:32px 0 44px}
  .split{grid-template-columns:minmax(0,1fr);gap:32px}
  .split-fig{height:300px}
  .dw-esg .grid.g4,.dw-media .grid.g2{grid-template-columns:minmax(0,1fr)}
  .dw-esg .card{padding:32px 0 36px}
  .dw-media-fig{height:220px}
  .cta-in{padding:96px var(--gut) 104px}
  .ftr{padding:80px 0 0}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
}
@media (max-width:719px){
  :root{--gut:18px;--sp:80px;--sp2:60px}
  .sec-h{font-size:34px}
  .hero-in{padding:calc(var(--hd) + 64px) 0 280px}
  .hero-lead{letter-spacing:.08em}
  .dw-spaced,.dw-desc{letter-spacing:.22em}
  .eyebrow{letter-spacing:.28em;margin-bottom:18px}
  .dw-num b{font-size:64px}
  .dw-num i{font-size:26px}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat,.stat+.stat{border-left:0;padding-left:0}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .hero-cta .btn{width:100%}
  .btn{min-width:0}
  .tbl{min-width:560px}
}
@media (max-width:429px){
  .sec-h{font-size:30px}
  .dw-notice b{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}