@charset "utf-8";
/* ============================================================
   DAEYANG GLOBAL — 공통 스타일시트
   디자인 토큰 근거 : _스펙_co4_samsungcnt.md (samsungcnt.com 실측 2026-08-09)
   주조색 #1428A0 / 카드 radius 8px / 버튼 알약 / 컨테이너 1440px
   ============================================================ */

:root{
  --brand:#1428A0;          /* 원본 .col-prime-blue */
  --brand-hover:#273BBA;
  --brand-soft:#5C69B7;
  --brand-bg:#F2F5FF;
  --ink:#121212;
  --ink-2:#222222;          /* 원본 .tab_area li.__active color */
  --text:#333333;
  --muted:#5A5A5A;          /* 원본 #888888 은 3.5:1 로 AA 미달 → 상향(7.0:1) */
  --caption:#666666;        /* 흰 배경 5.7:1 · 연회색(#F5F5F5) 배경에서도 5.2:1 */
  --line:#E5E5E5;
  --line-2:#EEEEEE;
  --bg:#FFFFFF;
  --bg-2:#F5F5F5;
  --bg-3:#FAFAFA;
  --navy:#132746;           /* 원본 다크 섹션 */

  /* 4개 사업부문 구분색 — 원본 부문색 그대로 (텍스트 금지, 면색·라벨용) */
  --d-metal:#1D7FBF;
  --d-chem:#1C9C9E;
  --d-consumer:#8E1FFF;
  --d-food:#56A311;

  --wrap:1440px;            /* 원본 .section_1440 */
  --wrap-in:1280px;         /* 원본 .section_1366 > 1280 */
  --wrap-wide:1760px;
  --wrap-text:840px;
  --gut:4.1666666667vw;     /* 원본 좌우 거터 */

  --r-card:8px;             /* 원본 0.4444rem @18px */
  --r-sm:4px;
  --r-pill:999px;           /* 원본 2em */

  --pad-sec:160px;
  --pad-sec-lg:180px;
  --ease:cubic-bezier(.23,1,.32,1);
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Spoqa Han Sans Neo",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo","Malgun Gothic","맑은 고딕",sans-serif;
  font-size:16px; line-height:1.75; letter-spacing:0;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--brand); outline-offset:2px;
}
h1,h2,h3,h4,h5{margin:0; font-weight:700; color:var(--ink); letter-spacing:-0.035em; line-height:1.25}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.wrap-in{width:100%; max-width:var(--wrap-in); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--brand); color:#fff; padding:12px 20px; font-weight:700}
.skip:focus{left:12px; top:12px}

/* ---------- 헤더 ---------- */
.hd{position:sticky; top:0; z-index:200; background:#fff; border-bottom:1px solid var(--line)}
.hd-in{display:flex; align-items:center; gap:36px; height:var(--header-h); max-width:var(--wrap-wide); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.logo{display:flex; align-items:center; gap:10px; font-weight:700; font-size:20px; color:var(--brand); letter-spacing:-0.02em; flex:0 0 auto}
.logo .mark{width:28px; height:28px; flex:0 0 auto}
.logo .sub{font-size:11px; color:var(--muted); font-weight:700; letter-spacing:.1em; display:block; line-height:1.2}
.gnb{display:flex; gap:4px; flex:1 1 auto; justify-content:center}
.gnb > li > a{display:block; padding:0 20px; line-height:var(--header-h); font-size:16px; font-weight:700; color:var(--ink-2); position:relative; white-space:nowrap}
.gnb > li > a::after{content:""; position:absolute; left:20px; right:20px; bottom:-1px; height:3px; background:var(--brand); transform:scaleX(0); transition:transform .35s var(--ease)}
.gnb > li > a:hover::after,.gnb > li.on > a::after{transform:scaleX(1)}
.hd-util{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.btn-mini{display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 18px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--ink-2); font-size:13px; font-weight:700}
.btn-mini:hover{border-color:var(--brand); color:var(--brand)}
.btn-mini.pri{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-mini.pri:hover{background:var(--brand-hover); color:#fff}
.lang{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--muted)}
.lang .on{color:var(--brand)}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; align-items:center; justify-content:center; cursor:pointer}

.drawer{display:none; border-top:1px solid var(--line); background:var(--bg-3); padding:20px var(--gut) 32px}
.drawer.open{display:block}
.drawer h3{font-size:12px; color:var(--brand); letter-spacing:.06em; margin:18px 0 6px; font-weight:700}
.drawer a{display:block; padding:7px 0; font-size:15px; color:var(--text)}
.drawer a:hover{color:var(--brand)}
.drawer-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0 24px; max-width:var(--wrap); margin:0 auto}

/* ---------- 히어로 ---------- */
.hero{position:relative; background:var(--navy); color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.38}
.hero-in{position:relative; max-width:var(--wrap); margin:0 auto; padding:112px var(--gut) 104px}
.hero h1{color:#fff; font-size:64px; line-height:1.25}
.hero .lead{margin-top:26px; max-width:var(--wrap-text); font-size:19px; line-height:1.78; color:rgba(255,255,255,.88); letter-spacing:0}
.crumb{display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:rgba(255,255,255,.72); margin-bottom:22px}
.crumb li+li::before{content:"›"; margin-right:8px; opacity:.6}
.hero.plain{background:var(--bg-2); color:var(--ink)}
.hero.plain h1{color:var(--ink)}
.hero.plain .lead{color:var(--text)}
.hero.plain .crumb{color:var(--caption)}

.hero-home .hero-in{padding:170px var(--gut) 152px}
.hero-home h1{font-size:74px; line-height:1.2162}
.hero-home .kicker{display:inline-block; padding:8px 20px; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.4); color:#fff; font-size:13px; font-weight:700; letter-spacing:.06em; margin-bottom:26px}

/* ---------- 섹션 ---------- */
.sec{padding:var(--pad-sec) 0}
.sec.alt{background:var(--bg-2)}
.sec.dark{background:var(--navy); color:rgba(255,255,255,.84)}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec-head{margin-bottom:56px; max-width:var(--wrap-text)}
.sec-head h2{font-size:50px; line-height:1.4}
.sec-head .sub{margin-top:18px; font-size:17px; color:var(--muted); line-height:1.8}
.sec.dark .sec-head .sub{color:rgba(255,255,255,.72)}
.eyebrow{display:block; font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--brand); margin-bottom:14px; text-transform:uppercase}
.sec.dark .eyebrow{color:#8A94CF}
.prose p{margin:0 0 18px; font-size:17px; line-height:1.88; color:var(--text)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:700}

/* 어두운 섹션 안의 모든 텍스트 — WCAG AA 이상 확보 */
.sec.dark .prose p,
.sec.dark .blist li,
.sec.dark .tl-item li,
.sec.dark .step p,
.sec.dark .faq .a,
.sec.dark .form-note{color:rgba(255,255,255,.84)}
.sec.dark .prose strong,
.sec.dark .blist li b,
.sec.dark .quote,
.sec.dark .faq summary{color:#fff}
.sec.dark .quote{border-left-color:#8A94CF}
.sec.dark .tl-item .y{color:#8A94CF}
.sec.dark .blist li{border-bottom-color:rgba(255,255,255,.16)}
.sec.dark .blist li::before{background:#8A94CF}
.sec.dark .step{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.sec.dark .step h3{color:#fff}
.sec.dark .step::before{color:#8A94CF}
.sec.dark .badge{background:transparent; border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.9)}
.sec.dark .tbl-scroll{border-color:rgba(255,255,255,.2)}
.sec.dark .tbl{background:rgba(255,255,255,.04)}
.sec.dark .tbl caption{background:rgba(255,255,255,.07); color:rgba(255,255,255,.8); border-bottom-color:rgba(255,255,255,.2)}
.sec.dark .tbl thead th{background:#1F3763; color:#fff}
.sec.dark .tbl th,.sec.dark .tbl td{color:rgba(255,255,255,.86); border-bottom-color:rgba(255,255,255,.14)}
.sec.dark .tbl tbody th{color:#fff; background:rgba(255,255,255,.06)}
.sec.dark .posts{border-top-color:rgba(255,255,255,.55)}
.sec.dark .post{border-bottom-color:rgba(255,255,255,.14)}
.sec.dark .post .cat{background:rgba(255,255,255,.12); color:#fff}
.sec.dark .post p{color:rgba(255,255,255,.72)}
.sec.dark .post .d{color:rgba(255,255,255,.68)}
.sec.dark .faq{border-top-color:rgba(255,255,255,.55)}
.sec.dark .faq details{border-bottom-color:rgba(255,255,255,.16)}
.sec.dark .faq summary .q,
.sec.dark .faq summary::after{color:#8A94CF; border-color:#8A94CF}
.sec.dark .figure figcaption{color:rgba(255,255,255,.72)}
.sec.dark .tl::before{background:rgba(255,255,255,.22)}
.sec.dark .tl-item::before{background:#8A94CF; border-color:var(--navy)}
.sec.dark .sign{color:rgba(255,255,255,.78)}
.sec.dark .sign b{color:#fff}
.sec.dark .icard{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.sec.dark .icard h3{color:#fff}
.sec.dark .icard p{color:rgba(255,255,255,.72)}
.sec.dark .card .tag{background:rgba(255,255,255,.12); color:#fff}

/* ---------- 카드 ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:38px 32px; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.card:hover{border-color:var(--brand); box-shadow:0 10px 30px rgba(20,40,160,.08)}
.sec.dark .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14)}
.card .ico{width:40px; height:40px; margin-bottom:22px; color:var(--brand)}
.sec.dark .card .ico{color:#8A94CF}
.card h3{font-size:22px; margin-bottom:12px}
.card p{font-size:15px; line-height:1.8; color:var(--muted)}
.sec.dark .card p{color:rgba(255,255,255,.7)}
.card .tag{display:inline-block; margin-bottom:14px; padding:5px 12px; border-radius:var(--r-sm); background:var(--brand-bg); font-size:12px; font-weight:700; color:var(--brand); letter-spacing:.02em}
/* 부문 색 라벨 */
.card.d-metal{border-top:4px solid var(--d-metal)}
.card.d-chem{border-top:4px solid var(--d-chem)}
.card.d-consumer{border-top:4px solid var(--d-consumer)}
.card.d-food{border-top:4px solid var(--d-food)}

.icards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.icards.c2{grid-template-columns:repeat(2,1fr)}
.icard{border-radius:var(--r-card); overflow:hidden; border:1px solid var(--line); background:#fff}
.icard img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease)}
.icard:hover img{transform:scale(1.05)}
.icard .bd{padding:28px 26px 32px}
.icard h3{font-size:20px; margin-bottom:10px}
.icard p{font-size:15px; color:var(--muted); line-height:1.78}

/* ---------- 지표 ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden}
.stat{padding:40px 30px; background:#fff}
.sec.alt .stat{background:#fff}
.sec.dark .stats{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.14)}
.sec.dark .stat{background:var(--navy)}
.stat .n{display:block; font-size:56px; font-weight:700; color:var(--brand); letter-spacing:-0.035em; line-height:1.1}
.sec.dark .stat .n{color:#fff}
.stat .n .u{font-size:20px; margin-left:5px; color:var(--ink-2)}
.sec.dark .stat .n .u{color:rgba(255,255,255,.8)}
.stat .l{display:block; margin-top:12px; font-size:15px; color:var(--muted)}
.sec.dark .stat .l{color:rgba(255,255,255,.7)}

/* ---------- 표 ---------- */
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r-card)}
.tbl{min-width:680px; font-size:15px}
.tbl caption{text-align:left; padding:16px 20px; font-size:14px; color:var(--muted); background:var(--bg-2); border-bottom:1px solid var(--line)}
.tbl th,.tbl td{padding:15px 20px; border-bottom:1px solid var(--line-2); text-align:left; vertical-align:top; line-height:1.7}
.tbl thead th{background:var(--brand); color:#fff; font-weight:700; white-space:nowrap; border-bottom:0}
.tbl tbody th{font-weight:700; color:var(--ink-2); white-space:nowrap; background:var(--bg-3)}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- 목록 ---------- */
.blist li{position:relative; padding:14px 0 14px 24px; border-bottom:1px solid var(--line-2); font-size:16px; line-height:1.8; color:var(--text)}
.blist li::before{content:""; position:absolute; left:0; top:25px; width:8px; height:8px; background:var(--brand); border-radius:var(--r-sm)}
.blist li:last-child{border-bottom:0}
.blist li b{color:var(--ink)}

/* ---------- 단계 ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:st}
.steps.s3{grid-template-columns:repeat(3,1fr)}
.steps.s5{grid-template-columns:repeat(5,1fr)}
.step{position:relative; padding:34px 26px; border-radius:var(--r-card); border:1px solid var(--line); background:#fff; counter-increment:st}
.step::before{content:"STEP " counter(st); display:block; font-size:12px; font-weight:700; color:var(--brand); letter-spacing:.1em; margin-bottom:14px}
.step h3{font-size:19px; margin-bottom:10px}
.step p{font-size:14px; color:var(--muted); line-height:1.78}

/* ---------- 타임라인 ---------- */
.tl{position:relative; padding-left:36px}
.tl::before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:2px; background:var(--line)}
.tl-item{position:relative; padding:0 0 44px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:""; position:absolute; left:-33px; top:10px; width:16px; height:16px; border-radius:50%; background:var(--brand); border:3px solid #fff; box-shadow:0 0 0 1px var(--line)}
.tl-item .y{display:block; font-size:28px; font-weight:700; color:var(--brand); margin-bottom:10px}
.tl-item li{position:relative; padding:5px 0 5px 15px; font-size:16px; color:var(--text); line-height:1.75}
.tl-item li::before{content:""; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:50%; background:#B4B4B4}

/* ---------- FAQ ---------- */
.faq{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; gap:14px; align-items:flex-start; padding:24px 44px 24px 0; font-size:17px; font-weight:700; color:var(--ink); cursor:pointer; position:relative; line-height:1.6; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:33px; width:11px; height:11px; border-right:2px solid var(--brand); border-bottom:2px solid var(--brand); transform:rotate(45deg); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary .q{flex:0 0 auto; color:var(--brand)}
.faq .a{padding:0 0 28px 32px; font-size:16px; color:var(--text); line-height:1.88}

/* ---------- 2단 ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.split.rev > *:first-child{order:2}
.split img{border-radius:var(--r-card); width:100%; aspect-ratio:4/3; object-fit:cover}
.figure{margin:0}
.figure figcaption{margin-top:12px; font-size:14px; color:var(--caption)}

/* ---------- 인용 ---------- */
.quote{border-left:5px solid var(--brand); padding:8px 0 8px 30px; font-size:24px; line-height:1.6; color:var(--ink); font-weight:700; letter-spacing:-0.035em}
.sign{margin-top:28px; font-size:16px; color:var(--muted)}
.sign b{color:var(--ink); font-size:20px; margin-left:8px}

/* ---------- 게시판 ---------- */
.posts{border-top:2px solid var(--ink)}
.post{display:grid; grid-template-columns:120px 1fr 120px; gap:20px; align-items:center; padding:26px 8px; border-bottom:1px solid var(--line-2)}
.post .cat{font-size:12px; font-weight:700; color:var(--brand); background:var(--brand-bg); border-radius:var(--r-sm); padding:6px 12px; text-align:center; letter-spacing:.02em}
.post h3{font-size:19px; line-height:1.5}
.post p{font-size:14px; color:var(--muted); margin-top:6px; line-height:1.7}
.post .d{font-size:14px; color:var(--caption); text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.post:hover h3{color:var(--brand)}

/* ---------- CTA 밴드 ---------- */
.band{background:var(--brand); padding:80px 0}
.band .in{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.band h2{font-size:36px; color:#fff}
.band p{margin-top:12px; font-size:16px; color:rgba(255,255,255,.86)}
.btn{display:inline-flex; align-items:center; gap:9px; height:56px; padding:0 34px; border-radius:var(--r-pill); background:var(--brand); color:#fff; font-size:15px; font-weight:700; border:1px solid var(--brand); cursor:pointer; transition:background .25s var(--ease), color .25s var(--ease)}
.btn:hover{background:var(--brand-hover); border-color:var(--brand-hover); color:#fff}
.btn.line{background:#fff; color:var(--ink-2); border-color:var(--line)}
.btn.line:hover{background:#fff; border-color:var(--brand); color:var(--brand)}
.btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.btn.ghost:hover{background:#fff; color:var(--brand); border-color:#fff}

/* ---------- 폼 ---------- */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld.full{grid-column:1/-1}
.fld label{font-size:14px; font-weight:700; color:var(--ink)}
.fld input,.fld select,.fld textarea{height:56px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:15px; font-family:inherit; color:var(--ink); background:#fff}
.fld textarea{height:170px; padding:15px 16px; line-height:1.7; resize:vertical}
.req{color:#C4162C; margin-left:4px}
.form-note{grid-column:1/-1; font-size:14px; color:var(--caption); line-height:1.8}

/* ---------- 푸터 ---------- */
.ft{background:#101B2E; color:rgba(255,255,255,.62); padding:80px 0 44px; font-size:14px}
.ft-top{display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:40px; max-width:var(--wrap); margin:0 auto; padding-left:var(--gut); padding-right:var(--gut)}
.ft h3{font-size:14px; color:#fff; margin-bottom:16px; letter-spacing:0}
.ft a{color:rgba(255,255,255,.62)}
.ft a:hover{color:#fff}
.ft li{padding:5px 0}
.ft-brand .logo{color:#fff; margin-bottom:18px}
.ft-brand .logo .sub{color:rgba(255,255,255,.6)}
.ft-brand p{font-size:14px; line-height:1.85}
.ft-bot{max-width:var(--wrap); margin:56px auto 0; padding-top:28px; padding-left:var(--gut); padding-right:var(--gut); border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between}
.ft-legal{display:flex; flex-wrap:wrap; gap:8px 22px}
.ft-legal a{font-weight:700; color:rgba(255,255,255,.82)}
.ft-addr{font-size:13px; line-height:1.9; color:rgba(255,255,255,.52)}
.notice{margin:28px auto 0; padding:16px 20px; border:1px dashed rgba(255,255,255,.28); border-radius:var(--r-card); font-size:13px; color:rgba(255,255,255,.74); line-height:1.8; max-width:var(--wrap)}
.notice b{color:#fff}

/* ---------- 사이트맵 ---------- */
.smap{display:grid; grid-template-columns:repeat(4,1fr); gap:38px 28px}
.smap h3{font-size:17px; padding-bottom:12px; border-bottom:2px solid var(--brand); margin-bottom:12px}
.smap a{display:block; padding:7px 0; font-size:15px; color:var(--text); border-bottom:1px solid var(--line-2)}
.smap a:hover{color:var(--brand)}

/* ---------- 유틸 ---------- */
.mt40{margin-top:40px}
.mt56{margin-top:56px}
.center{text-align:center}
.sec-head.center{margin-left:auto; margin-right:auto}
.badge{display:inline-block; padding:6px 14px; border-radius:var(--r-pill); border:1px solid var(--line); font-size:13px; color:var(--ink-2); font-weight:700; margin:0 6px 6px 0; background:#fff}

/* ---------- 반응형 (원본 브레이크포인트 1920/1280/1024/640) ---------- */
@media (max-width:1280px){
  :root{--pad-sec:120px; --pad-sec-lg:140px}
  .hero-home h1{font-size:60px}
  .sec-head h2{font-size:42px}
  .gnb > li > a{padding:0 13px; font-size:15px}
}
@media (max-width:1024px){
  :root{--gut:28px; --pad-sec:92px; --pad-sec-lg:108px}
  .gnb{display:none}
  .nav-toggle{display:flex}
  .hero h1{font-size:44px}
  .hero-home h1{font-size:48px}
  .hero-in{padding:80px var(--gut) 72px}
  .hero-home .hero-in{padding:108px var(--gut) 96px}
  .sec-head h2{font-size:34px}
  .cards,.icards,.stats,.steps,.steps.s5{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr; gap:36px}
  .split.rev > *:first-child{order:0}
  .ft-top{grid-template-columns:repeat(2,1fr); gap:32px}
  .drawer-grid{grid-template-columns:repeat(2,1fr)}
  .smap{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  :root{--gut:20px; --pad-sec:64px; --pad-sec-lg:76px}
  body{font-size:15px}
  .hd-in{gap:12px}
  .hd-util .btn-mini{display:none}   /* 좁은 화면에서는 언어 표시와 전체메뉴 버튼만 남긴다 */
  .logo{font-size:17px}
  .logo .sub{font-size:10px}
  .hero h1{font-size:32px}
  .hero-home h1{font-size:34px}
  .hero .lead{font-size:16px}
  .sec-head h2{font-size:26px}
  .sec-head{margin-bottom:34px}
  .cards,.cards.c4,.icards,.stats,.steps,.steps.s3,.steps.s5,.form,.smap{grid-template-columns:1fr}
  .card{padding:28px 24px}
  .stat{padding:28px 24px}
  .stat .n{font-size:40px}
  .post{grid-template-columns:1fr; gap:8px}
  .post .cat{justify-self:start}
  .post .d{text-align:left}
  .band{padding:56px 0}
  .band h2{font-size:26px}
  .ft-top{grid-template-columns:1fr}
  .drawer-grid{grid-template-columns:1fr}
  .quote{font-size:19px}
  .tl{padding-left:28px}
  .tl-item::before{left:-26px; width:14px; height:14px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- 렌더러 보조 클래스 ---------- */
.split-h3{font-size:28px; margin-bottom:20px}
.hero-btns{margin-top:38px; display:flex; gap:12px; flex-wrap:wrap}
.codecap{font-size:14px; color:var(--caption); margin-bottom:10px}
.note-line{margin-top:24px}
.codebox{background:#0F1A2E; color:#E6ECF5; border-radius:var(--r-card); padding:22px 24px; overflow-x:auto; font-size:14px; line-height:1.85; font-family:"Cascadia Mono",Consolas,"D2Coding",Menlo,monospace}
.sec.dark .split-h3{color:#fff}
.sec.dark .codecap,.sec.dark .note-line{color:rgba(255,255,255,.78)}
@media (max-width:640px){ .split-h3{font-size:22px} }


/* ===== 참고사 문법 v1 — 현대백화점 실측 (2026-08-16) =========================
   컨테이너 1440 · 히어로 96 : 섹션제목 40 : 본문 15 · 섹션패딩 88/96 · 라운드 0px
   주색 #8A6A2F (hue 40 · 흰 배경 AA 통과) · 오버레이는 rgba(0,0,0,.55) 단색
   되돌리려면 이 블록만 지운다. */
:root{
  --pri:#8A6A2F; --pri-d:#6B5224; --pri-soft:#F5F3EE; --acc:#8A6A2F; --focus:#8A6A2F;
  --cw:1440px; --gut:24px; --bd:#dddddd; --bg2:#F5F5F5;
  --r:0px; --r-btn:0px;
  --hero-scrim:rgba(0,0,0,.55);
  --h1-max:96px; --h2-max:40px;
}
.wrap{max-width:var(--cw);padding:0 var(--gut)}

/* LNB 탭바 */
.lnb{position:sticky;top:64px;z-index:50;background:#fff;border-bottom:1px solid #e5e5e5}
.lnb-in{max-width:var(--cw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;
  gap:28px;height:56px;overflow-x:auto;scrollbar-width:none}
.lnb-in::-webkit-scrollbar{display:none}
.lnb .ttl{flex:0 0 auto;font-size:15px;font-weight:700;letter-spacing:-.02em;color:#111;
  padding-right:28px;border-right:1px solid #e5e5e5;white-space:nowrap}
.lnb a{flex:0 0 auto;display:inline-flex;align-items:center;height:56px;font-size:14px;
  font-weight:500;color:#666;white-space:nowrap;border-bottom:2px solid transparent}
.lnb a:hover{color:#111}
.lnb a.on{color:#111;font-weight:700;border-bottom-color:#111}

/* 히어로 : 다크 이미지 + 단색 오버레이 */
.phero.has-img,.hero{min-height:520px;display:flex;align-items:center}
.phero.has-img .wrap,.hero .wrap{padding-top:0;padding-bottom:0;width:100%}
.phero .wrap{padding-top:72px;padding-bottom:72px}
.phero h1,.hero h1{margin-top:16px;font-size:clamp(28px,3.2vw,96px);line-height:1.28;
  font-weight:700;letter-spacing:-.02em}
.phero .hlead,.hero .hlead{margin-top:14px;max-width:44em;font-size:clamp(16px,1.5vw,21px);
  line-height:1.55;font-weight:600;letter-spacing:-.02em}
.phero.has-img .hlead,.hero .hlead{color:rgba(255,255,255,.94)}

/* 섹션 리듬 */
.sec{padding:88px 0 96px}
.sec.alt{background:var(--bg2);padding:88px 0 96px}
.sec.tight{padding:63px 0 69px}
.sec+.sec{border-top:0}

/* 제목 2단계 */
h2{font-size:clamp(22px,2.4vw,40px);line-height:1.4;letter-spacing:-.02em}
.blk>h2,.prose>h2{padding-top:0}
.blk>h2::before,.prose>h2::before{display:none}
.eyebrow{margin:0 0 12px;font-size:18px;line-height:1.2;font-weight:700;letter-spacing:-.02em;
  text-transform:none;color:#111}
.phero .eyebrow,.hero .eyebrow,.sec.dark .eyebrow{color:#fff;opacity:.86;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase}
.lead{margin-top:16px;font-size:15px;line-height:1.8;color:#555}
.prose p{font-size:15px;line-height:1.85;color:#333}

/* 카드 */
.card,.lcard{border-radius:0px;border:1px solid var(--bd);background:#fff;padding:30px 28px}
.card:hover,.lcard:hover{border-color:#111}
.card h3{font-size:18px;line-height:1.2;letter-spacing:-.02em}
.card p{margin-top:12px;font-size:15px;line-height:1.75;color:#555}
.card .meta{margin-top:14px;padding-top:14px;font-size:13px;color:#6F7378}
.card .ic{border-radius:0px;width:50px;height:50px;margin-bottom:16px;background:var(--pri-soft)}
.cards{gap:20px;margin-top:34px}
.gal img,.split-i img,.card.pf .pfi img{border-radius:0px}
.tw{margin-top:30px}
.tw table{border-top:2px solid #111}
.pull{border-top:2px solid #111;padding-top:34px}
.stat .v{font-size:clamp(30px,3.2vw,44px);font-weight:700;color:var(--pri)}

/* 하단 CTA */
.cta{border-radius:0;padding:54px 56px;background:#262A2E}
.cta h2{font-size:clamp(20px,2vw,26px);line-height:1.6;font-weight:700}
.cta p{font-size:15px;line-height:1.8}

@media (max-width:1024px){
  .sec,.sec.alt{padding:60px 0 68px}
  .phero.has-img,.hero{min-height:360px}
  .cta{padding:38px 26px}
}
@media (max-width:720px){
  .sec,.sec.alt{padding:46px 0 52px}
  .lnb-in{gap:20px}.lnb .ttl{padding-right:20px}
}


/* ═══════════════════════════════════════════════════════════════════════════
   ★ 서브 문법 v2 — 참고사 «효성(hyosung.com)» 실측 (2026-08-16)
     근거 : _co\_스펙_co4_hyosung.md  §2 «서브 문법»
     ┌ 상단 «띠»가 아예 없다 — 흰 바탕 + 좌 제목 3.75rem + 우 브레드크럼 «한 줄»
     ├ 글 컨테이너 1175(=1430) @x202(=246) — 메인(전폭 5rem)보다 «좁다»
     ├ 사진 컨테이너 x82(=100) 폭 1414 — «글은 좁게, 사진은 넓게»
     ├ 섹션 padding-top 6.25rem(=103) 전 섹션 동일 · bottom 8rem
     ├ 라운드 0 · 명조 금지 · Pretendard · 포인트색은 막대·강조 글자·밑줄에만
     └ LNB 탭바 = 헤더 아래 sticky · 선택 = 진한 글자 + 2px 초록 밑줄
   ★모든 선택자를 body:not(.home) 으로 한정한다. 하나라도 빠지면 메인이 망가진다.
   ★되돌리려면 이 블록만 지운다.
   ═══════════════════════════════════════════════════════════════════════════ */

/* 전 치수가 rem 이고 root 가 vw 에 비례한다 (효성 실측 root 16.4375px @1578 = 20px @1920).
   ★site.css 본문은 전부 px 로 쓰여 있어 이 선언의 영향을 받지 않는다(실측 rem 0건). */
html{font-size:clamp(14.5px,1.0417vw,20px)}

body:not(.home){
  --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 */
  --gut:12.3rem;     /* 글 컨테이너 202 → 폭 1175 */
  --lh-h:1.196; --ls-h:-.02em; --ls-en:-.004em;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-card:0px; --r-sm:0px;

  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:1rem; font-weight:400; line-height:1.75; letter-spacing:-.01em;
}
/* ★한국어 줄바꿈 — 어절 중간에서 끊기면 실격 */
body:not(.home),body:not(.home) h1,body:not(.home) h2,body:not(.home) h3,body:not(.home) h4,
body:not(.home) p,body:not(.home) li,body:not(.home) th,body:not(.home) td,
body:not(.home) span,body:not(.home) a,body:not(.home) summary,body:not(.home) caption{
  word-break:keep-all !important; overflow-wrap:break-word;
}
body:not(.home) h1,body:not(.home) h2,body:not(.home) h3,body:not(.home) h4{
  letter-spacing:var(--ls-h); line-height:var(--lh-h); font-weight:700; color:var(--ink);
}

/* ---------- 컨테이너 : 글은 좁게 1175, 사진은 넓게 1414 ---------- */
body:not(.home) .wrap,
body:not(.home) .wrap-in{width:100%; max-width:none; margin:0;
  padding-left:var(--gut); padding-right:var(--gut)}
body:not(.home) .sec.full .wrap{padding-left:var(--pad); padding-right:var(--pad)}

/* ---------- 헤더 : 서브는 relative «흰색» (sticky 아님) ---------- */
body:not(.home) .hd{position:relative; top:auto; background:#fff;
  border-bottom:1px solid var(--line); box-shadow:none; z-index:200}
body:not(.home) .hd-in{height:5.6rem; max-width:none; margin:0;
  padding-left:var(--pad); padding-right:var(--pad); gap:0}
body:not(.home) .logo{flex:0 0 auto; gap:.6rem; font-size:1.35rem; font-weight:700;
  letter-spacing:-.01em; color:var(--p700)}
body:not(.home) .logo .mark{width:1.75rem; height:1.75rem}
body:not(.home) .logo .mark rect{fill:var(--p700)}
body:not(.home) .logo .mark path:last-of-type{fill:var(--p500)}
body:not(.home) .logo .sub{font-size:.62rem; letter-spacing:.12em; color:var(--body)}
body:not(.home) .gnb{gap:0; justify-content:center}
body:not(.home) .gnb>li>a{padding:0 1.7rem; line-height:5.6rem; font-size:1.125rem;
  font-weight:400; letter-spacing:-.01em; color:var(--ink)}
body:not(.home) .gnb>li>a::after{left:1.7rem; right:1.7rem; bottom:1.35rem; height:2px;
  background:var(--p700)}
body:not(.home) .gnb>li.on>a{color:var(--p700); font-weight:700}
body:not(.home) .hd-util{gap:1rem}
body:not(.home) .btn-mini{height:2.31rem; padding:0 1.15rem; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  font-size:1rem; font-weight:600}
body:not(.home) .btn-mini:hover{border-color:var(--p700); color:var(--p700)}
body:not(.home) .lang{font-size:.875rem; font-weight:600; color:var(--body)}
body:not(.home) .lang .on{color:var(--p700)}
body:not(.home) .nav-toggle{width:2.6rem; height:2.6rem; border-radius:0; border-color:var(--line)}
body:not(.home) .drawer{background:#fff; border-top:1px solid var(--line);
  padding:1.6rem var(--pad) 2.4rem}
body:not(.home) .drawer-grid{max-width:none; margin:0; gap:0 1.6rem}
body:not(.home) .drawer h3{margin:1.2rem 0 .4rem; font-size:.8125rem; color:var(--p700)}
body:not(.home) .drawer a{padding:.4rem 0; font-size:.875rem; color:var(--body)}
body:not(.home) .drawer a:hover{color:var(--p700)}

/* ---------- LNB 탭바 : 헤더 아래 sticky · 높이 65(=4rem) ---------- */
body:not(.home) .lnb{position:sticky; top:0; z-index:150; background:#fff;
  border-bottom:1px solid var(--line)}
body:not(.home) .lnb:has(a[href$="ir-overview.html"]):has(a[href$="news-press.html"]):has(a[href$="esg-overview.html"]){display:none}
body:not(.home) .lnb-in{max-width:none; margin:0; padding:0 var(--gut); gap:2.2rem; height:4rem}
body:not(.home) .lnb .ttl{font-size:1rem; font-weight:700; color:var(--ink);
  letter-spacing:var(--ls-h); padding-right:2.2rem; border-right:1px solid var(--line)}
body:not(.home) .lnb a{height:4rem; font-size:1rem; font-weight:400; color:var(--body);
  border-bottom:2px solid transparent; letter-spacing:-.01em}
body:not(.home) .lnb a:hover{color:var(--ink)}
body:not(.home) .lnb a.on{color:var(--ink); font-weight:700; border-bottom-color:var(--p700)}

/* ---------- ★상단 «띠»가 없다 : 흰 바탕 · 좌 제목 / 우 브레드크럼 한 줄 ---------- */
body:not(.home) .hero,
body:not(.home) .hero.plain{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline; background:#fff; color:var(--ink);
  min-height:0; padding:2.4rem 0 0; overflow:visible;
}
body:not(.home) .hero-in{display:contents}
body:not(.home) .hero h1{grid-column:1; grid-row:1; margin:0;
  padding-left:var(--gut); padding-right:1.5rem;
  font-size:3.75rem; font-weight:700; line-height:var(--lh-h); letter-spacing:var(--ls-h);
  color:var(--ink)}
/* 효성 실측 브레드크럼은 #AAA(흰 위 2.3:1) 로 AA 미달 → 같은 무채색에서 명도만 낮춘다 */
body:not(.home) .hero .crumb{grid-column:2; grid-row:1; justify-self:end; margin:0;
  padding-right:var(--gut); display:flex; flex-wrap:wrap; gap:.5rem;
  font-size:.875rem; color:#6F6F6F; letter-spacing:-.01em}
body:not(.home) .hero .crumb li+li::before{content:"|"; margin-right:.5rem; opacity:.55}
body:not(.home) .hero .crumb li:last-child{color:var(--ink)}
body:not(.home) .hero .crumb a{color:#6F6F6F}
body:not(.home) .hero .crumb a:hover{color:var(--ink)}
body:not(.home) .hero .lead{grid-column:1/-1; grid-row:2; margin:1.6rem 0 0;
  padding-left:var(--gut); padding-right:var(--gut); max-width:none;
  font-size:1.25rem; font-weight:400; line-height:1.7; letter-spacing:-.01em; color:var(--body)}
/* 제목줄 바로 아래 «전폭 비주얼» — 효성 서브 블록 ① (1414 × ~590) */
body:not(.home) .hero-bg{position:static; grid-column:1/-1; grid-row:3;
  width:calc(100% - var(--pad) * 2); height:35.9rem; object-fit:cover; opacity:1;
  margin:3.2rem var(--pad) 0; max-width:none}

/* ---------- 섹션 리듬 : pt 6.25rem 전 섹션 동일 ---------- */
body:not(.home) .sec{padding:6.25rem 0 8rem; background:#fff}
body:not(.home) .sec.alt{background:var(--face1); padding:6.25rem 0 8rem}
body:not(.home) .sec.tight{padding:4rem 0 5rem}
body:not(.home) .sec.dark{position:relative; background-color:var(--deep);
  background-image:url(../img/cta-bg.jpg); background-size:cover;
  background-position:center; background-attachment:scroll;
  color:rgba(255,255,255,.86); overflow:hidden}
/* 사진 위 오버레이 = rgba 단색. 그라데이션 금지 */
body:not(.home) .sec.dark::before{content:""; position:absolute; inset:0;
  background:rgba(8,26,13,.88); pointer-events:none}
body:not(.home) .sec.dark>*{position:relative; z-index:1}

/* ---------- 섹션 헤더 — 효성의 «한 덩어리» : 제목 → 하이라인 → 내용 ---------- */
body:not(.home) .sec-head{max-width:none; margin-bottom:0; padding-bottom:2.6rem;
  border-bottom:1px solid var(--line)}
body:not(.home) .sec.dark .sec-head{border-bottom-color:var(--lineW)}
body:not(.home) .sec-head+*{margin-top:3.95rem}
body:not(.home) .sec-head h2{font-size:2.625rem; font-weight:700; line-height:var(--lh-h);
  letter-spacing:var(--ls-h); color:var(--ink)}
body:not(.home) .sec.dark .sec-head h2{color:#fff}
body:not(.home) .eyebrow{display:block; margin:0 0 1rem; font-size:.8125rem; font-weight:700;
  letter-spacing:.09em; text-transform:none; color:var(--ink)}
body:not(.home) .eyebrow::before{content:"\25CF"; margin-right:.55em; font-size:.72em;
  vertical-align:.14em; color:var(--p700)}
body:not(.home) .sec.dark .eyebrow{color:#fff}
body:not(.home) .sec.dark .eyebrow::before{color:#fff}
body:not(.home) .sec-head .sub{margin-top:1.1rem; font-size:1.25rem; font-weight:400;
  line-height:1.65; letter-spacing:var(--ls-h); color:var(--body)}
body:not(.home) .sec.dark .sec-head .sub{color:rgba(255,255,255,.86)}

/* ---------- 본문 ---------- */
body:not(.home) .prose p{margin:0 0 1.1rem; font-size:1rem; line-height:1.85; color:var(--body)}
body:not(.home) .prose p:last-child{margin-bottom:0}
body:not(.home) .prose strong{color:var(--ink); font-weight:700}
body:not(.home) .sec.dark .prose p{color:rgba(255,255,255,.86)}
body:not(.home) .sec.dark .prose strong{color:#fff}
body:not(.home) .split-h3{font-size:1.75rem; font-weight:700; margin-bottom:1.2rem;
  letter-spacing:var(--ls-h)}
body:not(.home) .mt40{margin-top:2.4rem}
body:not(.home) .mt56{margin-top:3.4rem}

/* ---------- 카드 : 3열 · gap 21(=1.28rem) · radius 0 ---------- */
body:not(.home) .cards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.28rem; margin-top:0}
body:not(.home) .cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(.home) .cards.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
body:not(.home) .card{border-radius:0; border:1px solid var(--line); background:#fff;
  padding:2rem 1.6rem 1.8rem; box-shadow:none}
body:not(.home) .card:hover{border-color:var(--p700); box-shadow:none}
body:not(.home) .card.d-metal,body:not(.home) .card.d-chem,
body:not(.home) .card.d-consumer,body:not(.home) .card.d-food{border-top-width:2px}
body:not(.home) .card .ico{width:2rem; height:2rem; margin-bottom:1.2rem; color:var(--p700)}
body:not(.home) .card h3{font-size:1.25rem; margin-bottom:.7rem; letter-spacing:var(--ls-h)}
body:not(.home) .card p{font-size:.875rem; line-height:1.75; color:var(--body)}
body:not(.home) .card .tag{margin-bottom:.8rem; padding:0; background:none; border-radius:0;
  font-size:.8125rem; font-weight:700; color:var(--p700); letter-spacing:-.01em}
body:not(.home) .sec.dark .card{background:rgba(255,255,255,.06); border-color:var(--lineW)}
body:not(.home) .sec.dark .card h3{color:#fff}
body:not(.home) .sec.dark .card p{color:rgba(255,255,255,.82)}
body:not(.home) .sec.dark .card .ico{color:#fff}
body:not(.home) .sec.dark .card .tag{color:#fff; background:none}

/* 사진 카드 : 378×378 정사각 · gap 21 · radius 0 */
body:not(.home) .icards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.28rem}
body:not(.home) .icards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
body:not(.home) .icard{border-radius:0; border:0; border-bottom:1px solid var(--line);
  background:transparent; overflow:hidden}
body:not(.home) .icard img{width:100%; aspect-ratio:1/1; object-fit:cover}
body:not(.home) .icard .bd{padding:1.4rem 0 1.6rem}
body:not(.home) .icard h3{font-size:1.25rem; margin-bottom:.6rem}
body:not(.home) .icard p{font-size:.875rem; line-height:1.75; color:var(--body)}
body:not(.home) .sec.dark .icard{background:transparent; border-bottom-color:var(--lineW)}
body:not(.home) .sec.dark .icard h3{color:#fff}
body:not(.home) .sec.dark .icard p{color:rgba(255,255,255,.82)}

/* ---------- 지표 : 라벨 + 큰 숫자 + 1px 선 ---------- */
body:not(.home) .stats{grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.28rem;
  background:none; border:0; border-radius:0; overflow:visible}
body:not(.home) .stat{padding:0 0 1rem; background:none !important;
  border-bottom:1px solid var(--line)}
body:not(.home) .sec.dark .stat{border-bottom-color:var(--lineW)}
body:not(.home) .stat .n{font-size:3rem; font-weight:600; color:var(--ink);
  letter-spacing:-.03em; line-height:1.1; font-variant-numeric:tabular-nums}
body:not(.home) .sec.dark .stat .n{color:#fff}
body:not(.home) .stat .n .u{font-size:1.125rem; font-weight:600; color:var(--body); margin-left:.2rem}
body:not(.home) .sec.dark .stat .n .u{color:rgba(255,255,255,.82)}
body:not(.home) .stat .l{margin-top:.7rem; font-size:.875rem; color:var(--body)}
body:not(.home) .sec.dark .stat .l{color:rgba(255,255,255,.82)}

/* ---------- 표 ---------- */
body:not(.home) .tbl-scroll{border:0; border-radius:0; border-top:2px solid var(--ink)}
body:not(.home) .sec.dark .tbl-scroll{border-top-color:#fff}
body:not(.home) .tbl{font-size:.9375rem}
body:not(.home) .tbl caption{padding:1rem 0; font-size:.8125rem; color:var(--body);
  background:none; border-bottom:1px solid var(--line)}
body:not(.home) .tbl th,body:not(.home) .tbl td{padding:.95rem 1rem; border-bottom:1px solid var(--line)}
body:not(.home) .tbl thead th{background:var(--p700); color:#fff; border-bottom:0}
body:not(.home) .tbl tbody th{background:var(--face1); color:var(--ink)}
body:not(.home) .sec.dark .tbl{background:transparent}
body:not(.home) .sec.dark .tbl caption{background:none; color:rgba(255,255,255,.82);
  border-bottom-color:var(--lineW)}
body:not(.home) .sec.dark .tbl thead th{background:var(--p700); color:#fff}
body:not(.home) .sec.dark .tbl tbody th{background:rgba(255,255,255,.08); color:#fff}
body:not(.home) .sec.dark .tbl th,body:not(.home) .sec.dark .tbl td{
  color:rgba(255,255,255,.88); border-bottom-color:var(--lineW)}

/* ---------- 목록 · 단계 · 연혁 · FAQ · 인용 ---------- */
body:not(.home) .blist li{padding:1rem 0 1rem 1.4rem; font-size:1rem; line-height:1.75;
  border-bottom:1px solid var(--line); color:var(--body)}
body:not(.home) .blist li::before{top:1.75rem; width:6px; height:6px; border-radius:0;
  background:var(--p700)}
body:not(.home) .blist li b{color:var(--ink)}
body:not(.home) .sec.dark .blist li{color:rgba(255,255,255,.86); border-bottom-color:var(--lineW)}
body:not(.home) .sec.dark .blist li b{color:#fff}
body:not(.home) .sec.dark .blist li::before{background:#fff}

body:not(.home) .steps{gap:1.28rem}
body:not(.home) .step{border-radius:0; border:1px solid var(--line); padding:1.8rem 1.5rem;
  background:#fff}
body:not(.home) .step::before{font-size:.8125rem; color:var(--p700); margin-bottom:.9rem}
body:not(.home) .step h3{font-size:1.125rem; margin-bottom:.6rem}
body:not(.home) .step p{font-size:.875rem; color:var(--body); line-height:1.75}
body:not(.home) .sec.dark .step{background:rgba(255,255,255,.06); border-color:var(--lineW)}
body:not(.home) .sec.dark .step::before{color:#fff}

body:not(.home) .tl::before{background:var(--line)}
body:not(.home) .tl-item::before{border-radius:50%; background:var(--p700); border-color:#fff}
body:not(.home) .tl-item .y{font-size:1.5rem; color:var(--p700); font-weight:700}
body:not(.home) .tl-item li{font-size:1rem; color:var(--body)}
body:not(.home) .sec.dark .tl-item .y{color:#fff}
body:not(.home) .sec.dark .tl-item li{color:rgba(255,255,255,.86)}

body:not(.home) .faq{border-top:2px solid var(--ink)}
body:not(.home) .faq details{border-bottom:1px solid var(--line)}
body:not(.home) .faq summary{padding:1.4rem 2.6rem 1.4rem 0; font-size:1.125rem;
  letter-spacing:var(--ls-h)}
body:not(.home) .faq summary::after{border-color:var(--p700)}
body:not(.home) .faq summary .q{color:var(--p700)}
body:not(.home) .faq .a{padding:0 0 1.6rem 1.9rem; font-size:1rem; color:var(--body)}
body:not(.home) .sec.dark .faq{border-top-color:#fff}
body:not(.home) .sec.dark .faq summary .q,body:not(.home) .sec.dark .faq summary::after{
  color:#fff; border-color:#fff}
body:not(.home) .sec.dark .faq .a{color:rgba(255,255,255,.86)}

body:not(.home) .quote{border-left:3px solid var(--p700); padding-left:1.6rem;
  font-size:1.5rem; line-height:1.55; letter-spacing:var(--ls-h)}
body:not(.home) .sec.dark .quote{border-left-color:#fff; color:#fff}
body:not(.home) .sign{font-size:1rem; color:var(--body)}
body:not(.home) .sign b{font-size:1.25rem; color:var(--ink)}
body:not(.home) .sec.dark .sign b{color:#fff}

/* ---------- 2단 · 사진 ---------- */
body:not(.home) .split{gap:3.4rem; align-items:start}
body:not(.home) .split img,body:not(.home) .figure img,
body:not(.home) .gal img{border-radius:0}
body:not(.home) .figure figcaption{margin-top:.8rem; font-size:.8125rem; color:var(--body)}
body:not(.home) .sec.dark .figure figcaption{color:rgba(255,255,255,.78)}

/* ---------- 게시판 ---------- */
body:not(.home) .posts{border-top:1px solid var(--line)}
body:not(.home) .post{grid-template-columns:6.5rem minmax(0,1fr) 7rem; gap:1.6rem;
  padding:1.7rem .2rem; border-bottom:1px solid var(--line)}
body:not(.home) .post .cat{padding:0; background:none; border-radius:0; text-align:left;
  font-size:.8125rem; font-weight:700; color:var(--p700)}
body:not(.home) .post h3{font-size:1.25rem; font-weight:600; line-height:1.45}
body:not(.home) .post p{margin-top:.5rem; font-size:1rem; line-height:1.7; color:var(--body)}
body:not(.home) .post .d{font-size:.875rem; color:var(--body)}
body:not(.home) .post:hover h3{color:var(--p700)}
body:not(.home) .sec.dark .posts{border-top-color:#fff}
body:not(.home) .sec.dark .post{border-bottom-color:var(--lineW)}
body:not(.home) .sec.dark .post .cat{background:none; color:#fff}
body:not(.home) .sec.dark .post p,body:not(.home) .sec.dark .post .d{color:rgba(255,255,255,.82)}

/* ---------- 폼 · 배지 · 버튼 (라운드 0) ---------- */
body:not(.home) .fld input,body:not(.home) .fld select,body:not(.home) .fld textarea{
  border-radius:0; border-color:var(--line); height:3.4rem; font-size:.9375rem}
body:not(.home) .fld textarea{height:10rem}
body:not(.home) .fld label{font-size:.875rem}
body:not(.home) .badge{border-radius:999px; border-color:var(--line); font-size:.8125rem;
  color:var(--ink); padding:.35rem .9rem}
body:not(.home) .btn{border-radius:0; height:3.4rem; padding:0 2rem; font-size:1rem;
  background:var(--p700); border-color:var(--p700); color:#fff}
body:not(.home) .btn:hover{background:var(--p800); border-color:var(--p800)}
body:not(.home) .btn.line{background:#fff; color:var(--ink); border-color:var(--line)}
body:not(.home) .btn.line:hover{border-color:var(--p700); color:var(--p700); background:#fff}
body:not(.home) .btn.ghost{background:transparent; border-color:rgba(255,255,255,.6); color:#fff}
body:not(.home) .btn.ghost:hover{background:#fff; color:var(--p800); border-color:#fff}
body:not(.home) .codebox{border-radius:0; background:var(--deep)}

/* ---------- 하단 CTA 밴드 ---------- */
body:not(.home) .band{background:var(--p700); padding:4rem 0}
body:not(.home) .band .in{max-width:none; margin:0; padding:0 var(--gut)}
body:not(.home) .band h2{font-size:1.75rem; color:#fff; letter-spacing:var(--ls-h)}
body:not(.home) .band p{margin-top:.8rem; font-size:1rem; color:rgba(255,255,255,.95)}

/* ---------- 사이트맵 ---------- */
body:not(.home) .smap{gap:2.4rem 1.6rem}
body:not(.home) .smap h3{font-size:1.125rem; border-bottom:2px solid var(--p700)}
body:not(.home) .smap a{font-size:.9375rem; border-bottom-color:var(--line)}
body:not(.home) .smap a:hover{color:var(--p700)}

/* ---------- 푸터 : 초록 단색 면 ---------- */
body:not(.home) .ft{background:var(--p700); color:rgba(255,255,255,.95);
  padding:4.4rem 0 2.2rem; font-size:.875rem}
body:not(.home) .ft-top{grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:2.4rem;
  max-width:none; margin:0; padding-left:var(--pad); padding-right:var(--pad)}
body:not(.home) .ft h3{margin-bottom:.9rem; font-size:1rem; color:#fff; letter-spacing:-.01em}
body:not(.home) .ft a{color:rgba(255,255,255,.95)}
body:not(.home) .ft a:hover{color:#fff; text-decoration:underline; text-underline-offset:.25em}
body:not(.home) .ft li{padding:.25rem 0}
body:not(.home) .ft-brand .logo{color:#fff; margin-bottom:1rem; font-size:1.25rem}
body:not(.home) .ft-brand .logo .mark{width:1.6rem; height:1.6rem}
body:not(.home) .ft-brand .logo .mark rect{fill:rgba(255,255,255,.2)}
body:not(.home) .ft-brand .logo .mark path:last-of-type{fill:rgba(255,255,255,.6)}
body:not(.home) .ft-brand .logo .sub{font-size:.6rem; color:rgba(255,255,255,.95)}
body:not(.home) .ft-brand p{font-size:.875rem; line-height:1.8}
body:not(.home) .notice{max-width:none; margin:2.4rem 0 0; padding:1rem var(--pad);
  border:0; border-top:1px solid rgba(255,255,255,.28); border-radius:0;
  font-size:.8125rem; line-height:1.8; color:rgba(255,255,255,.95)}
body:not(.home) .notice b{color:#fff}
body:not(.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,.22)}
body:not(.home) .ft-legal a{color:#fff}
body:not(.home) .ft-addr{font-size:.8125rem; color:rgba(255,255,255,.95)}
body:not(.home) .skip{background:var(--p700)}

/* ---------- ★뉴스룸 : 2분할 히어로 (좌 사진 675 / 우 색면 500) ----------
   효성의 «2분할»은 메인이 아니라 뉴스룸 서브에 있다. */
body:not(.home)[data-nav="news"] .hero{grid-template-columns:minmax(0,675fr) minmax(0,500fr)}
body:not(.home)[data-nav="news"] .hero-bg{grid-column:1; grid-row:3; height:26.16rem;
  width:calc(100% - var(--pad)); margin:3.2rem 0 0 var(--pad)}
body:not(.home)[data-nav="news"] .hero .lead{grid-column:2; grid-row:3; align-self:stretch;
  margin:3.2rem var(--pad) 0 0; padding:2.6rem 2.4rem; background:var(--p700); color:#fff;
  font-size:1.375rem; font-weight:600; line-height:1.55; letter-spacing:var(--ls-h);
  display:flex; align-items:center}
body:not(.home)[data-nav="news"] .hero.plain .lead{grid-column:1/-1; grid-row:2;
  margin:1.6rem 0 0; padding-left:var(--gut); padding-right:var(--gut);
  background:none; color:var(--body); display:block; font-size:1.25rem}

/* ---------- 반응형 ---------- */
@media (max-width:1280px){
  body:not(.home){--gut:6.5rem; --pad:3.4rem}
  body:not(.home) .gnb>li>a{padding:0 1.1rem; font-size:1rem}
  body:not(.home) .hero h1{font-size:3rem}
}
@media (max-width:1024px){
  body:not(.home){--gut:2.2rem; --pad:2.2rem}
  body:not(.home) .hd-in{justify-content:space-between}
  body:not(.home) .hero{padding-top:1.8rem}
  body:not(.home) .hero h1{font-size:2.2rem; padding-right:1rem}
  body:not(.home) .hero .crumb{font-size:.8125rem}
  body:not(.home) .hero-bg{height:20rem; margin-top:2.2rem}
  body:not(.home) .hero .lead{font-size:1.0625rem; margin-top:1.1rem}
  body:not(.home) .sec,body:not(.home) .sec.alt{padding:3.4rem 0 4rem}
  body:not(.home) .sec-head h2{font-size:1.75rem}
  body:not(.home) .sec-head .sub{font-size:1.0625rem}
  body:not(.home) .cards,body:not(.home) .cards.c4,
  body:not(.home) .icards,body:not(.home) .stats,body:not(.home) .steps{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.home) .split{grid-template-columns:minmax(0,1fr); gap:2rem}
  body:not(.home) .ft-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  body:not(.home)[data-nav="news"] .hero{grid-template-columns:minmax(0,1fr) auto}
  body:not(.home)[data-nav="news"] .hero-bg{grid-column:1/-1; margin:2.2rem var(--pad) 0}
  body:not(.home)[data-nav="news"] .hero .lead{grid-column:1/-1; margin:0 var(--pad);
    padding:1.6rem 1.4rem; font-size:1rem}
}
@media (max-width:720px){
  body:not(.home){--gut:1.4rem; --pad:1.4rem}
  body:not(.home) .hero h1{font-size:1.8rem}
  body:not(.home) .hero-bg{height:14rem}
  body:not(.home) .cards,body:not(.home) .cards.c4,body:not(.home) .cards.c2,
  body:not(.home) .icards,body:not(.home) .icards.c2,
  body:not(.home) .stats,body:not(.home) .steps,body:not(.home) .steps.s3,
  body:not(.home) .steps.s5,body:not(.home) .form,body:not(.home) .smap{
    grid-template-columns:minmax(0,1fr)}
  body:not(.home) .post{grid-template-columns:minmax(0,1fr); gap:.4rem}
  body:not(.home) .post .d{text-align:left}
  body:not(.home) .ft-top{grid-template-columns:minmax(0,1fr)}
  body:not(.home) .lnb-in{gap:1.4rem; padding:0 var(--gut)}
  body:not(.home) .quote{font-size:1.15rem}
}
@media (max-width:430px){
  body:not(.home){--gut:1.15rem; --pad:1.15rem}
  body:not(.home) .hero{grid-template-columns:minmax(0,1fr)}
  body:not(.home) .hero .crumb{grid-column:1; grid-row:2; justify-self:start;
    padding-left:var(--gut); padding-right:var(--gut); margin-top:.8rem}
  body:not(.home) .hero .lead{grid-row:3}
  body:not(.home) .hero-bg{grid-row:4; height:11rem}
  body:not(.home)[data-nav="news"] .hero-bg{grid-row:4}
  body:not(.home)[data-nav="news"] .hero .lead{grid-row:3}
  body:not(.home) .hero h1{font-size:1.6rem}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★ 서브 문법 v2 — 보정 append (2026-08-17)
     앞 블록을 덮어쓰는 «뒤에 붙인» 규칙만 모았다. 되돌리려면 이 블록만 지운다.
     근거는 전부 «캡처 화소» 실측이다 — CSS 대비 감사기는 글자 알파를 못 읽어 과소보고한다
     (메모리 contrast-audit-blind-spots).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ① 푸터 대비 : 면을 --p700 → --p800 으로 내리고 알파 글자를 순백으로 ──
   화소 실측  #2E7D32 위 흰 글자 3.84~4.75 (14px 본문 기준 4.5 미달)
              #215B25 위 흰 글자 7.96
   효성 원본 푸터 #2E008B 는 휘도 0.029 인데 --p700 은 0.155 로 5배 밝다.
   «hue 만 옮긴다»가 명도까지 같이 옮겨서 푸터만 무너졌던 것 — 같은 hue 안에서
   원본이 맡던 «어두운 대형 색면» 역할로 되돌린 것이다. */
body:not(.home) .ft{background:var(--p800); color:#fff}
body:not(.home) .ft a{color:#fff}
body:not(.home) .ft-brand .logo .sub{color:#fff}
body:not(.home) .ft-brand p{color:#fff}
body:not(.home) .notice{color:#fff; border-top-color:rgba(255,255,255,.34)}
body:not(.home) .ft-bot{border-top-color:rgba(255,255,255,.28)}
body:not(.home) .ft-addr{color:#fff}
/* 하단 CTA 밴드도 같은 이유로 한 단계 내린다 (흰 글자 8:1) */
body:not(.home) .band{background:var(--p800)}
body:not(.home) .band p{color:#fff}

/* ── ② LNB 탭바 : 항목이 6개를 넘으면 잘린 것처럼 보인다 ──
   효성 원본은 항목이 4~6개라 한 줄에 들어간다. 우리 서브는 최대 18개다.
   가로 스크롤은 이미 걸려 있으나 스크롤바를 숨겨 놔서 «잘렸다»로 읽힌다
   → 오른쪽 끝을 mask 로 흐려 «더 있다»를 알린다(색을 칠하는 게 아니라 알파 마스크라
     띠(banding)가 생기지 않는다 · 사진 위 오버레이 규칙과 무관하다). */
body:not(.home) .lnb{position:relative}
body:not(.home) .lnb-in{scroll-behavior:smooth; -webkit-overflow-scrolling:touch}
@supports (mask-image:linear-gradient(#000,#000)){
  body:not(.home) .lnb-in{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 3.4rem),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 3.4rem),transparent 100%)}
  /* 끝까지 밀면 마스크를 걷는다 — 스크롤 끝에서 마지막 항목이 흐려 보이면 안 된다 */
  body:not(.home) .lnb-in:hover,body:not(.home) .lnb-in:focus-within{
    -webkit-mask-image:none; mask-image:none}
}
body:not(.home) .lnb-in{padding-right:3.4rem}

/* ── ③ 표 머리 : 초록 면 위 흰 글자 ──
   thead 는 --p700(5.1:1) 이라 14~15px 헤더 글자가 아슬아슬하다 → --p800(8:1) 로 */
body:not(.home) .tbl thead th{background:var(--p800); color:#fff}
body:not(.home) .sec.dark .tbl thead th{background:var(--p800); color:#fff}

/* ── ④ 어두운 섹션 위 «배지·표·카드는 흰 면 + 진한 글자» (상시 규칙) ──
   .sec.dark 의 카드가 rgba(255,255,255,.06) 반투명 면이라 «다크 위 카드»가 된다. */
body:not(.home) .sec.dark .card,body:not(.home) .sec.dark .step{
  background:#fff; border-color:#fff}
body:not(.home) .sec.dark .card h3,body:not(.home) .sec.dark .step h3{color:var(--ink)}
body:not(.home) .sec.dark .card p,body:not(.home) .sec.dark .step p{color:var(--body)}
body:not(.home) .sec.dark .card .ico{color:var(--p700)}
body:not(.home) .sec.dark .card .tag{color:var(--p700)}
body:not(.home) .sec.dark .step::before{color:var(--p700)}
body:not(.home) .sec.dark .tbl tbody th{background:#fff; color:var(--ink)}
body:not(.home) .badge{background:#fff; color:var(--ink); border-color:var(--line)}
body:not(.home) .sec.dark .badge{background:#fff; color:var(--ink); border-color:#fff}

/* ── ⑤ 어두운 섹션 본문 : 알파 .82~.88 은 한글 얇은 획에서 손실이 크다 ── */
body:not(.home) .sec.dark{color:#fff}
body:not(.home) .sec.dark .prose p,body:not(.home) .sec.dark .sec-head .sub,
body:not(.home) .sec.dark .blist li,body:not(.home) .sec.dark .stat .l,
body:not(.home) .sec.dark .stat .n .u,body:not(.home) .sec.dark .tl-item li,
body:not(.home) .sec.dark .faq .a,body:not(.home) .sec.dark .figure figcaption,
body:not(.home) .sec.dark .icard p,body:not(.home) .sec.dark .post p,
body:not(.home) .sec.dark .post .d,body:not(.home) .sec.dark .tbl th,
body:not(.home) .sec.dark .tbl td,body:not(.home) .sec.dark .tbl caption{color:#fff}

/* ── ⑥ 브레드크럼 «홈»은 링크다 : 밑줄 없는 회색 링크는 눌리는 줄 모른다 ── */
body:not(.home) .hero .crumb a:hover{text-decoration:underline; text-underline-offset:.25em}

/* ── ⑦ 390px : 제목·브레드크럼이 어절 중간에서 끊기면 실격 ── */
@media (max-width:430px){
  body:not(.home) .lnb-in{padding-right:2rem}
  body:not(.home) .hero .crumb{font-size:.78rem}
  body:not(.home) .tbl{font-size:.875rem}
  body:not(.home) .tbl th,body:not(.home) .tbl td{padding:.7rem .6rem}
}

/* ── ⑧ ★«보이지 않는 카드» — 서브 56쪽 전부에 있던 결함 ──
   js/site.js 가 .sec-head/.card/.icard/.stat/.step/.tl-item/.quote 에
   inline 으로 opacity:0 + translateY(18px) 를 박고 IntersectionObserver 로 되돌린다.
   그런데 스크롤을 «즉시 점프»로 건너뛰면(브라우저 스크롤 복원 · 앵커 이동 ·
   캡처/측정 도구) IO 가 한 번도 울리지 않아 카드가 투명한 채로 굳는다.
   실측 : biz-metal.html 의 .cards/.stats 12칸이 전부 opacity 0 이었다.
          (그래서 타일 기하 측정도 «타일 0개»로 나왔다 — 없는 요소로 잡힌 것)
   ★site.js 는 손대지 말라는 지시라 CSS 로 «불투명도만» 되돌린다.
     inline style 은 !important 로만 이길 수 있다.
     translateY 슬라이드는 그대로 둬서 등장 애니메이션 인상은 남긴다
     — IO 가 안 울려도 18px 오프셋은 눈에 띄지 않으므로 «안 보이는 사고»가 안 난다. */
body:not(.home) .sec-head,
body:not(.home) .card,
body:not(.home) .icard,
body:not(.home) .stat,
body:not(.home) .step,
body:not(.home) .tl-item,
body:not(.home) .quote{opacity:1 !important}