@charset "utf-8";
/* ============================================================================
   co6 한미푸드 — 메인 전용 스타일  (2026-08-17)
   참고 : 한국앤컴퍼니 hankookandcompany.com  ·  실측 SPEC = _co/_스펙_co6_hankook.md

   이 파일은 «메인(index.html) 전용» 이다. 전 선택자를 body.home 으로 한정한다.
   서브는 css/site.css 맨 끝 body:not(.home) 블록이 담당한다.  (co1 에서 충돌 0건)

   레이아웃 문법 (색·폰트가 아니라 «문법» 을 옮긴다)
     · 컨테이너 1180px «고정» — 폭 1600 과 1280 에서 값이 같아야 한다
     · 히어로 100vh · «글자 0줄»  (원래 히어로 카피는 바로 아래 인트로로 옮겼다)
     · 섹션 padding 84 / 90 / 140  세 개뿐 · 블록 높이 497 · 457 · 424 교대
     · 전폭 사진 띠 ↔ 흰 2단 매거진 을 번갈아 쌓는다
     · 매거진 2단 = 580(사진) : 120(간격) : 480(글)
     · 타일 380 gap20(3열) · 280 gap20(4열) · 350 gap60(3열) · 라운드 «전부 0»
     · 대비율 48 : 40 : 16 = 3.0 : 2.5 : 1
     · 색은 «사진»이 담당한다 — 면(面)은 전부 무채색
   ========================================================================= */

/* ---------------------------------------------------------------- 토큰 */
body.home{
  --hk-ink   : #000000;
  --hk-txt   : #333333;
  --hk-sub   : #666666;
  --hk-mute  : #999999;
  --hk-soft  : #F5F5F5;
  --hk-soft2 : #F4F4F5;
  --hk-line  : #E2E2E2;
  --hk-line2 : #CFCFCF;
  --hk-pt    : #3B3FA8;   /* hue 238° · 흰 배경 8.53:1 — 쓰는 곳 4군데뿐 */

  --hk-wrap  : 1180px;
  --hk-gut   : 24px;

  /* 섹션 밀도 : 이 세 값 밖으로 나가지 않는다 */
  --hk-p1    : 84px;
  --hk-p2    : 90px;
  --hk-p3    : 140px;
}

/* 무채색 사이트다 — 물려받은 빨강 토큰을 먹색으로 덮는다 (면적 0) */
body.home{
  --brand:#111111; --brand-txt:#111111; --brand-dark:#000000;
  --pri:#111111; --pri-d:#000000; --pri-soft:#F5F5F5; --acc:#111111;
  --ink:#000000; --body:#333333; --sub:#666666; --mute:#666666;
  --line:#E2E2E2; --line2:#CFCFCF; --soft:#F5F5F5; --soft2:#FFFFFF; --warm:#FFFFFF;
  --bg2:#F5F5F5; --cw:1180px; --gut:0px; --r:0px; --r-btn:0px; --hd:104px;
}

body.home{
  font-size:16px; line-height:1.70; font-weight:400; letter-spacing:-.01em;
  color:var(--hk-txt); background:#fff;
  word-break:keep-all;
}
body.home,
body.home main,
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, body.home b, body.home div{
  word-break:keep-all !important;
  overflow-wrap:break-word;
}
body.home :focus-visible{outline:2px solid var(--hk-pt); outline-offset:3px}
body.home .skip{background:#000;color:#fff;border-radius:0}

/* 라운드 «전부 0» — 알약은 CTA 버튼 하나만 허용한다 */
body.home .card, body.home .lcard, body.home .icards, body.home .linkgrid,
body.home .chip, body.home .notice, body.home .btn, body.home .btn-contact,
body.home .gal img, body.home .split-fig img, body.home .card figure img,
body.home input, body.home select, body.home textarea, body.home .sample-note{
  border-radius:0 !important;
}

/* ---------------------------------------------------------------- 컨테이너 */
/* ★고정 px. 1600 과 1280 에서 «같은 숫자»가 나와야 한다 */
body.home .wrap,
body.home .hk-wrap{
  width:var(--hk-wrap);
  max-width:calc(100% - 48px);
  padding:0;
  margin:0 auto;
}
body.home .wrap--narrow{width:900px;max-width:calc(100% - 48px)}
/* 읽는 문단은 900 으로 더 좁힌다 */
body.home .hk-read{width:900px;max-width:100%}

/* ---------------------------------------------------------------- 타이포 */
body.home .hk-t48{
  font-size:48px; line-height:1.10; font-weight:700; letter-spacing:-.035em; color:var(--hk-ink);
}
body.home .hk-t40,
body.home .hk-band-t,
body.home .hk-mag-t{
  font-size:40px; line-height:1.35; font-weight:700; letter-spacing:-.035em; color:var(--hk-ink);
}
body.home .hk-t32{font-size:32px;line-height:1.30;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .hk-eyebrow{
  display:block; font-size:12px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--hk-ink); margin:0 0 18px;
}
body.home .hk-lead{margin-top:16px;font-size:18px;line-height:1.63;font-weight:400;color:var(--hk-sub)}
body.home .hk-sub16{margin-top:14px;font-size:16px;line-height:1.70;color:var(--hk-sub)}

/* 해시태그 칩 — 흰 면 + 1px 검정 테두리 · 12px/700 · radius 0 */
body.home .hk-chips{display:flex;flex-wrap:wrap;gap:8px}
body.home .hk-chip{
  display:inline-flex;align-items:center;height:32px;padding:0 15px;
  background:#fff;border:1px solid var(--hk-ink);color:var(--hk-ink);
  font-size:12px;font-weight:700;letter-spacing:0;line-height:1;white-space:nowrap;
}
body.home .hk-band .hk-chip{background:transparent;border-color:rgba(255,255,255,.85);color:#fff}

/* 화살표 「→」 = 선 하나 + 꺾쇠. 배경 없음 */
body.home .hk-arrow{
  display:inline-block;position:relative;width:46px;height:12px;margin-top:26px;
  color:var(--hk-ink);vertical-align:middle;
}
body.home .hk-arrow::before{content:'';position:absolute;left:0;top:6px;width:46px;height:1px;background:currentColor}
body.home .hk-arrow::after{content:'';position:absolute;right:0;top:1.5px;width:9px;height:9px;
  border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
body.home .hk-band .hk-arrow,
body.home .hk-onphoto .hk-arrow{color:#fff}
body.home a:hover .hk-arrow{color:var(--hk-pt)}          /* ② 포인트색 — 화살표 */
body.home .hk-band a:hover .hk-arrow{color:#fff}          /* ★다크 위에는 포인트색 금지 */

/* ---------------------------------------------------------------- 헤더 */
/* absolute · h104 · 완전 투명 · 보이는 링크 = 로고 + 문의하기 «2개» + 햄버거
   ★HTML 은 한 글자도 안 고친다. GNB 6개와 소분류는 햄버거 오버레이 안에 그대로 산다 */
body.home .hdr{
  position:absolute; top:0; left:0; width:100%; z-index:1300;
  background:transparent; border-bottom:0; box-shadow:none;
}
body.home .hdr-in{position:relative;z-index:1400;
  max-width:none; width:100%; padding:0 32px; height:104px;
  display:flex; align-items:center; gap:30px;
}
body.home .logo b{font-size:22px;font-weight:700;letter-spacing:-.035em;color:#fff}
body.home .logo b i{color:#fff}
body.home .logo span{margin-top:4px;font-size:10.5px;font-weight:500;letter-spacing:.26em;color:#fff}
body.home .gnb-wrap{display:none}
body.home .hdr-util{margin-left:auto;display:flex;align-items:center;gap:26px}
body.home .hdr-util .lang{display:inline-block;font-size:16px;font-weight:500;letter-spacing:0;color:#fff}
body.home .hdr-util .lang b{color:#fff;font-weight:700}
body.home .btn-contact{
  height:auto;padding:0;background:none;border:0;color:#fff;
  font-size:16px;font-weight:500;letter-spacing:-.01em;
}
body.home .btn-contact:hover{background:none;color:#fff;text-decoration:underline;text-underline-offset:5px}
body.home .btn-contact .ico{display:none}
body.home .burger{
  display:flex;width:48px;height:48px;flex-direction:column;justify-content:center;
  align-items:center;gap:6px;position:relative;z-index:2;
}
body.home .burger i{width:26px;height:2px;background:#fff;display:block;
  transition:transform .28s ease,opacity .2s ease}
body.home .burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.home .burger[aria-expanded="true"] i:nth-child(2){opacity:0}
body.home .burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
body.home main{padding-top:0}

/* 햄버거 오버레이 = 전체 메뉴. bg #333 · 타일 6개 «간격 0» · 흰 글자 18px */
body.home .mnav{
  position:fixed; inset:0; z-index:1200; background:#333333;
  border-top:0; max-height:none; overflow-y:auto; display:none;
}
body.home .mnav.on{display:block}
body.home .mnav>ul{
  width:1180px; max-width:calc(100% - 48px); margin:0 auto; padding:148px 0 96px;
  display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:0;
}
body.home .mnav>ul>li{border-left:1px solid rgba(255,255,255,.16);padding:0 0 34px}
body.home .mnav>ul>li:last-child{border-right:1px solid rgba(255,255,255,.16)}
body.home .mnav>ul>li>a{
  display:block;padding:22px 18px 16px;font-size:18px;font-weight:700;letter-spacing:-.02em;
  color:#fff;border-bottom:1px solid rgba(255,255,255,.16);
}
body.home .mnav>ul>li>a:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
body.home .mnav .sub{padding:14px 18px 0}
body.home .mnav .sub a{
  display:block;padding:7px 0;font-size:14px;font-weight:400;letter-spacing:-.02em;
  color:rgba(255,255,255,.72);border-bottom:0;
}
body.home .mnav .sub a:hover{color:#fff}

/* ---------------------------------------------------------------- 히어로 */
/* 정확히 100vh · «글자 0줄» · 배경 사진 3장 교대 + 영상 · 8칸 진행막대 · 스크롤 표시 */
body.home .hero{
  position:relative; height:100vh; min-height:560px; display:block;
  align-items:stretch; overflow:hidden; background:#000; padding:0;
}
body.home .hero-bg{position:absolute;inset:0;z-index:0}
body.home .hk-hs{
  position:absolute;inset:0;display:block;opacity:0;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  animation:hkfade 18s linear infinite;
}
body.home .hk-hs1{background-image:url(../img/hero2.jpg);animation-delay:0s}
body.home .hk-hs2{background-image:url(../img/hero3.jpg);animation-delay:-12s}
body.home .hk-hs3{background-image:url(../img/farm.jpg);animation-delay:-6s}
@keyframes hkfade{0%,32%{opacity:1}36%,96%{opacity:0}100%{opacity:1}}
/* 사진 위 오버레이 = «연한 검정 단색». 그라데이션 금지.
   α .24 는 실측값이다 — hero2 좌상단 평균 휘도 145.5 → 110.6 → 흰 로고 5.06:1 */
body.home .hero-bg::after{
  content:'';position:absolute;inset:0;background:rgba(0,0,0,.52);z-index:2;
}
body.home .hero .idcv{z-index:1}
body.home .hero-in{display:none}   /* 카피는 아래 인트로로 옮겼다 — 히어로에 글자 0줄 */

body.home .hk-prog{
  position:absolute;left:32px;bottom:76px;z-index:4;display:flex;gap:10px;
}
body.home .hk-prog i{
  display:block;width:62px;height:2px;background:rgba(255,255,255,.34);position:relative;overflow:hidden;
}
body.home .hk-prog i::after{
  content:'';position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left;
  animation:hkprog 18s linear infinite;
}
body.home .hk-prog i:nth-child(1)::after{animation-delay:0s}
body.home .hk-prog i:nth-child(2)::after{animation-delay:2.25s}
body.home .hk-prog i:nth-child(3)::after{animation-delay:4.5s}
body.home .hk-prog i:nth-child(4)::after{animation-delay:6.75s}
body.home .hk-prog i:nth-child(5)::after{animation-delay:9s}
body.home .hk-prog i:nth-child(6)::after{animation-delay:11.25s}
body.home .hk-prog i:nth-child(7)::after{animation-delay:13.5s}
body.home .hk-prog i:nth-child(8)::after{animation-delay:15.75s}
@keyframes hkprog{0%{transform:scaleX(0)}12.5%{transform:scaleX(1)}100%{transform:scaleX(1)}}

body.home .hk-scroll{
  position:absolute;left:50%;bottom:34px;z-index:4;width:22px;height:34px;margin-left:-11px;
  border:1px solid rgba(255,255,255,.8);border-radius:999px;
}
body.home .hk-scroll::after{
  content:'';position:absolute;left:50%;top:7px;width:3px;height:3px;margin-left:-1.5px;
  border-radius:50%;background:#fff;animation:hkdot 1.9s ease-in-out infinite;
}
@keyframes hkdot{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(13px);opacity:.25}}
body.home .idcv-stop{border-radius:999px;right:32px;bottom:34px}

@media (prefers-reduced-motion:reduce){
  body.home .hk-hs{animation:none;opacity:0}
  body.home .hk-hs1{opacity:1}
  body.home .hk-prog i::after{animation:none;transform:scaleX(1)}
  body.home .hk-scroll::after{animation:none}
}

/* ---------------------------------------------------------------- 섹션 밀도 */
body.home .hk-sec{padding:var(--hk-p1) 0 var(--hk-p2)}
body.home .hk-sec--soft{background:var(--hk-soft)}
body.home .hk-sec--soft2{background:var(--hk-soft2)}
body.home .hk-sec--last{padding-bottom:var(--hk-p3)}
body.home .sec{padding:var(--hk-p1) 0 var(--hk-p2)}
body.home .sec--tight{padding:var(--hk-p1) 0 var(--hk-p2)}
body.home .sec--soft{background:var(--hk-soft)}
body.home .sec--soft2{background:#fff}
body.home .sec.hk-sec--last{padding-bottom:var(--hk-p3)}   /* 마지막 섹션 pb140 */
body.home .sec-head{margin-bottom:36px;max-width:none}
body.home .sec-head .sec-sub{max-width:900px}
/* 섹션을 새로 만들지 않고 «같은 섹션 안»에 다음 블록을 잇는다 (padding 174px 절약) */
body.home .hk-mt60{margin-top:52px}
body.home .sec-eyebrow{
  display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--hk-ink);margin-bottom:18px;
}
body.home .sec-h{font-size:40px;line-height:1.35;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .sec-sub{margin-top:16px;font-size:16px;line-height:1.70;color:var(--hk-sub);letter-spacing:-.01em}

/* ---------------------------------------------------------------- 인트로 */
body.home .hk-intro{padding:var(--hk-p1) 0 var(--hk-p2);background:#fff}
body.home .hk-intro .hero-eyebrow{
  display:block;margin-top:26px;font-size:12px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hk-ink);
}
body.home .hk-intro h1{
  margin-top:16px;font-size:48px;line-height:1.10;font-weight:700;letter-spacing:-.035em;
  color:var(--hk-ink);max-width:none;
}
body.home .hk-intro .hero-lead{
  margin-top:18px;max-width:900px;font-size:18px;line-height:1.63;font-weight:400;
  color:var(--hk-sub);letter-spacing:-.01em;
}
body.home .hk-intro .hero-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------------------------------------------------------------- 버튼 */
/* 아웃라인 190~266 × 48 · 배경 없음 + 1px 테두리 · radius 0 */
body.home .btn{
  height:48px;padding:0 34px;min-width:190px;justify-content:center;
  font-size:16px;font-weight:700;letter-spacing:-.02em;border-radius:0;
  transition:background .22s ease,color .22s ease,border-color .22s ease;
}
body.home .btn-primary{background:#000;color:#fff;border:1px solid #000}
body.home .btn-primary:hover{background:#fff;color:#000;border-color:#000}
body.home .btn-line{background:#fff;color:#000;border:1px solid #000}
body.home .btn-line:hover{background:#000;color:#fff}
body.home .btn-ghost{background:transparent;color:#000;border:1px solid #000}
body.home .btn-ghost:hover{background:#000;color:#fff}
body.home .hk-onphoto .btn-ghost{color:#fff;border-color:rgba(255,255,255,.85)}
body.home .hk-onphoto .btn-ghost:hover{background:#fff;color:#000;border-color:#fff}
/* ★유일하게 허용하는 알약 — 참고사도 구독 버튼 1개만 radius 26 이다 */
body.home .hk-pill{border-radius:26px !important;height:44px;min-width:150px;padding:0 30px;font-size:14px}

/* ---------------------------------------------------------------- 전폭 사진 띠 */
/* 참고사 : css 배경 2051×646 · skewX ±16.0° 로 잘라 붙인다 */
body.home .hk-band{
  position:relative;overflow:hidden;height:497px;display:flex;align-items:center;
  background:#111;
}
body.home .hk-band--424{height:424px}
body.home .hk-band-a,
body.home .hk-band-b{
  position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;
}
/* ★16.0° 사선 절단 (tan16° = .2867). 높이 497 · 폭 1600 기준 142px = 8.9% */
body.home .hk-band--split .hk-band-b{clip-path:polygon(58% 0,100% 0,100% 100%,49.1% 100%)}
body.home .hk-band--424.hk-band--split .hk-band-b{clip-path:polygon(58% 0,100% 0,100% 100%,50.4% 100%)}
body.home .hk-band::after{
  content:'';position:absolute;inset:0;z-index:1;background:rgba(0,0,0,var(--hk-scrim,.44));
}
/* ★오버레이 α 는 감이 아니라 «사진 밝기 실측»으로 정했다 (16×10 그리드 평균 휘도).
   합성 휘도 L' = L×(1-α) 로 흰 글자 대비 7:1 안팎을 맞춘다.
     rice   좌중 148.9 → .48 → 77.4   ·  greenhouse 119.0 → .48 → 61.9
     line   좌중 146.9 → .44 → 82.3
     jar    좌중 147.7 → .46 → 79.8   ·  bottling  좌중 133.7 → .46 → 72.2
     cta-bg 좌중  80.8 → .32 → 54.9  (원본이 이미 어둡다) */
body.home .hk-band--s32{--hk-scrim:.50}
body.home .hk-band--s44{--hk-scrim:.56}
body.home .hk-band--s46{--hk-scrim:.54}
body.home .hk-band--s48{--hk-scrim:.56}

body.home .hk-bg-rice    {background-image:url(../img/rice.jpg)}
body.home .hk-bg-green   {background-image:url(../img/greenhouse.jpg)}
body.home .hk-bg-line    {background-image:url(../img/line.jpg)}
body.home .hk-bg-jar     {background-image:url(../img/jar.jpg)}
body.home .hk-bg-bottling{background-image:url(../img/bottling.jpg)}
body.home .hk-bg-cta     {background-image:url(../img/cta-bg.jpg)}
body.home .hk-band .wrap,
body.home .hk-band .hk-wrap{position:relative;z-index:2}
body.home .hk-band .hk-eyebrow{color:#fff;opacity:.86}
body.home .hk-band-t{color:#fff}
body.home .hk-band .hk-lead,
body.home .hk-band .hk-sub16{color:rgba(255,255,255,.88)}

/* 띠 위 지표 — 흰 글자 (배지·표가 아니라 큰 숫자라 흰 글자로 간다) */
body.home .hk-band .stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
  border-top:1px solid rgba(255,255,255,.34);margin-top:38px;
}
body.home .hk-band .stats li{
  padding:24px 0 0;border:0;background:none;
}
body.home .hk-band .stats .v{
  display:block;font-size:40px;line-height:1.1;font-weight:700;letter-spacing:-.035em;color:#fff;
  font-variant-numeric:tabular-nums;
}
body.home .hk-band .stats .v small{font-size:16px;font-weight:500;margin-left:5px;letter-spacing:-.02em}
body.home .hk-band .stats .k{display:block;margin-top:10px;font-size:14px;color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------------- 매거진 2단 */
/* 1180 = 580(사진) : 120(간격) : 480(글) */
body.home .hk-mag{
  display:grid;grid-template-columns:580px minmax(0,480px);column-gap:120px;align-items:center;
}
body.home .hk-mag--rev{grid-template-columns:minmax(0,480px) 580px}
body.home .hk-mag--rev .hk-mag-fig{order:2}
body.home .hk-mag-fig{margin:0;overflow:hidden;background:var(--hk-soft)}
body.home .hk-mag-fig img{width:580px;max-width:100%;height:337px;object-fit:cover;display:block;border-radius:0}
body.home .hk-mag--tall .hk-mag-fig img{height:420px}
body.home .hk-mag-body .hk-chips{margin-bottom:20px}
body.home .hk-mag-t{margin:0}
body.home .hk-mag-body p{margin-top:16px;font-size:16px;line-height:1.70;color:var(--hk-sub);letter-spacing:-.01em}

/* 매거진 안 정의목록 (kv) — 무채색 실선 */
body.home .kv{margin-top:26px;border-top:1px solid var(--hk-line2)}
body.home .kv>div{display:flex;gap:20px;padding:12px 0;border-bottom:1px solid var(--hk-line);font-size:16px;line-height:1.70}
body.home .kv dt{width:120px;flex-shrink:0;font-weight:700;color:var(--hk-ink)}
body.home .kv dd{color:var(--hk-sub);flex:1}

body.home .split{display:grid;grid-template-columns:580px minmax(0,480px);column-gap:120px;align-items:center;gap:0 120px}
body.home .split--rev{grid-template-columns:minmax(0,480px) 580px}
body.home .split--rev .split-fig{order:2}
body.home .split-fig{margin:0;overflow:hidden}
body.home .split-fig img{width:580px;max-width:100%;height:337px;aspect-ratio:auto;object-fit:cover;border-radius:0}
body.home .split-body h3{font-size:40px;line-height:1.35;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink);margin-bottom:18px}
body.home .split-body p{font-size:16px;line-height:1.70;color:var(--hk-sub);margin-bottom:12px;letter-spacing:-.01em}

/* ---------------------------------------------------------------- 타일 */
/* 380 gap20 = 1180 (3열) · 280 gap20 = 1180 (4열) · 350 gap60 (3열) */
body.home .cards{display:grid;gap:20px;margin-top:0}
body.home .cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.home .cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
body.home .card{
  background:#fff;border:0;border-radius:0;box-shadow:none;transform:none;
  display:flex;flex-direction:column;overflow:visible;padding:0;
}
body.home .card:hover{box-shadow:none;transform:none;border-color:transparent}
body.home .card figure{margin:0;overflow:hidden;background:var(--hk-soft)}
body.home .card figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0;transition:transform .6s ease}
body.home .card:hover figure img{transform:scale(1.04)}
body.home .card-body{padding:18px 0 0;display:flex;flex-direction:column;flex:1}
body.home .card-tag{
  align-self:flex-start;display:inline-flex;align-items:center;height:26px;padding:0 11px;
  border:1px solid var(--hk-ink);font-size:12px;font-weight:700;letter-spacing:0;
  text-transform:none;color:var(--hk-ink);
}
body.home .card h3{margin-top:14px;font-size:24px;line-height:1.42;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .card p{margin-top:12px;font-size:16px;line-height:1.70;color:var(--hk-sub);flex:1;letter-spacing:-.01em}
body.home .card-list{margin-top:12px;border-top:1px solid var(--hk-line);padding-top:10px}
body.home .card-list li{font-size:14px;color:var(--hk-sub);padding:3px 0 3px 12px;position:relative;line-height:1.7}
body.home .card-list li::before{content:'';position:absolute;left:0;top:14px;width:5px;height:1px;background:var(--hk-ink);border-radius:0}
body.home .card-more{
  margin-top:14px;font-size:14px;font-weight:700;letter-spacing:-.02em;color:var(--hk-ink);
  display:inline-flex;align-items:center;
}
body.home .card:hover .card-more{color:var(--hk-pt)}     /* ② 포인트색 — 링크 호버 */
body.home .card:hover h3{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* 아이콘 3열 350 gap60 */
body.home .icards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:60px;
  background:none;border:0;border-radius:0;overflow:visible;
}
body.home .icard{background:none;padding:0}
body.home .icard .ico{width:52px;height:52px;color:var(--hk-ink);stroke-width:1.2}
body.home .icard h3{margin-top:22px;font-size:24px;line-height:1.33;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .icard p{margin-top:14px;font-size:16px;line-height:1.70;color:var(--hk-sub);letter-spacing:-.01em}

/* 링크 6칸 — 380 gap20 3열 × 2행 */
body.home .linkgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  background:none;border:0;border-radius:0;overflow:visible;
}
body.home .linkgrid a{background:#fff;border:1px solid var(--hk-line2);padding:22px 22px 20px;display:block}
body.home .linkgrid a:hover{background:#fff;border-color:var(--hk-ink)}
body.home .linkgrid b{display:block;font-size:20px;line-height:1.4;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .linkgrid span{display:block;margin-top:10px;font-size:16px;line-height:1.70;color:var(--hk-sub);letter-spacing:-.01em}
body.home .linkgrid a:hover b{color:var(--hk-ink);text-decoration:underline;text-underline-offset:5px}

/* ---------------------------------------------------------------- 소식 카드 */
/* 게시판형 : 380 gap20 · 사진 380×253 · 제목 20/1.6 · new 배지 · 날짜 14 #999 · 화살표 */
/* 280 «간격 20» 4열 = 1180 (참고사 지배구조 10칸과 같은 격자) */
body.home .hk-news{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
body.home .hk-news>li{border:0}
body.home .hk-news .row{display:block;padding:0;border:0;grid-template-columns:none}
body.home .hk-nfig{margin:0 0 20px;overflow:hidden;background:var(--hk-soft)}
body.home .hk-nfig img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;border-radius:0;transition:transform .6s ease}
body.home .hk-news li:hover .hk-nfig img{transform:scale(1.04)}
body.home .hk-news .cat{
  display:inline-flex;align-items:center;height:26px;padding:0 11px;border:1px solid var(--hk-ink);
  font-size:12px;font-weight:700;color:var(--hk-ink);letter-spacing:0;
}
body.home .hk-news .ti{
  display:block;margin-top:14px;font-size:20px;line-height:1.60;font-weight:700;
  letter-spacing:-.035em;color:var(--hk-ink);
}
body.home .hk-news .ti span{
  display:block;margin-top:10px;font-size:14px;font-weight:400;line-height:1.7;
  color:var(--hk-sub);letter-spacing:-.01em;
}
body.home .hk-news .dt{display:block;margin-top:16px;font-size:14px;color:var(--hk-mute);text-align:left;font-variant-numeric:tabular-nums}
/* ③ 포인트색 — new 배지 원형 20px */
body.home .hk-new{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  margin-left:8px;border-radius:50%;background:var(--hk-pt);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:0;vertical-align:2px;
}
body.home .hk-news li:hover .ti{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* ---------------------------------------------------------------- 구독/CTA */
/* 참고사 newsletter : pt84 pb90 · bg #F5F5F5 · 「Subscribe Now」 48px 가운데 */
body.home .cta{
  position:relative;overflow:hidden;background:var(--hk-soft);
  padding:var(--hk-p1) 0 var(--hk-p2);
}
body.home .cta-bg{display:none}
body.home .cta-in{position:relative;z-index:2;padding:0;color:var(--hk-ink);text-align:center}
body.home .cta h2{font-size:48px;line-height:1.10;font-weight:700;letter-spacing:-.035em;color:var(--hk-ink)}
body.home .cta p{margin-top:20px;font-size:16px;line-height:1.70;color:var(--hk-sub);letter-spacing:-.01em}
body.home .cta-btns{margin-top:32px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
body.home .cta .btn-primary{border-radius:26px !important;height:44px;min-width:150px;padding:0 30px;font-size:14px}
body.home .cta .btn-ghost{height:44px;min-width:150px;padding:0 30px;font-size:14px;color:#000;border-color:#000}

/* ---------------------------------------------------------------- 푸터 */
body.home .ftr{background:#000000;color:#9A9A9A;padding:62px 0 36px;font-size:14px}
body.home .ftr-top{grid-template-columns:1.15fr 3fr;gap:48px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.16)}
body.home .ftr-bot{padding-top:24px}
body.home .ftr-logo b{font-size:20px;font-weight:700;letter-spacing:-.035em;color:#fff}
body.home .ftr-logo b i{color:#fff}
body.home .ftr-logo span{margin-top:7px;font-size:10.5px;letter-spacing:.26em;color:#9A9A9A}
body.home .ftr-logo p{margin-top:18px;line-height:1.8;font-size:14px}
body.home .ftr-nav h2{font-size:14px;font-weight:700;color:#fff;margin-bottom:14px;letter-spacing:.06em}
body.home .ftr-nav a{font-size:14px;padding:4px 0}
body.home .ftr-nav a:hover{color:#fff;text-decoration:underline}
body.home .ftr-legal a:hover{color:#fff}
body.home .sample-note{
  margin-top:18px;padding:14px 18px;border:1px solid rgba(255,255,255,.22);border-radius:0;
  font-size:13px;color:#C4C4C4;line-height:1.8;background:rgba(255,255,255,.04);
}
body.home .sample-note b{color:#fff}

/* ---------------------------------------------------------------- 반응형 */
@media (max-width:1220px){
  body.home .hk-mag,
  body.home .hk-mag--rev,
  body.home .split,
  body.home .split--rev{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px}
  body.home .hk-mag-fig img,
  body.home .split-fig img{width:100%;height:320px}
}
@media (max-width:1024px){
  body.home{--hk-p1:64px;--hk-p2:70px;--hk-p3:96px}
  body.home .hdr-in{padding:0 22px;height:84px}
  body.home .hk-intro h1{font-size:38px}
  body.home .cta h2{font-size:38px}
  body.home .sec-h,body.home .hk-t40,body.home .hk-band-t,
  body.home .hk-mag-t,body.home .split-body h3{font-size:30px}
  body.home .hk-band{height:auto;min-height:400px;padding:64px 0}
  body.home .hk-band--424{height:auto;min-height:360px}
  body.home .hk-band--split .hk-band-b{clip-path:none;display:none}
  body.home .hk-mag,body.home .hk-mag--rev,
  body.home .split,body.home .split--rev{grid-template-columns:minmax(0,1fr);row-gap:32px}
  body.home .hk-mag--rev .hk-mag-fig,body.home .split--rev .split-fig{order:0}
  body.home .hk-mag-fig img,body.home .split-fig img{height:300px}
  body.home .cards-3,body.home .cards-4,
  body.home .hk-news,body.home .linkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .icards{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px}
  body.home .mnav>ul{grid-template-columns:repeat(2,minmax(0,1fr));padding:110px 0 70px}
  body.home .mnav>ul>li:last-child{border-right:0}
  body.home .hk-band .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  body.home .ftr-top{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:768px){
  body.home{--hk-p1:52px;--hk-p2:56px;--hk-p3:72px}
  body.home .wrap,body.home .hk-wrap{max-width:calc(100% - 36px)}
  body.home .hk-intro h1{font-size:30px;line-height:1.22}
  body.home .cta h2{font-size:28px;line-height:1.24}
  body.home .sec-h,body.home .hk-t40,body.home .hk-band-t,
  body.home .hk-mag-t,body.home .split-body h3{font-size:25px;line-height:1.34}
  body.home .hk-t32{font-size:22px}
  body.home .hk-intro .hero-lead,body.home .hk-lead{font-size:16px}
  body.home .cards-3,body.home .cards-4,
  body.home .hk-news,body.home .linkgrid,
  body.home .icards{grid-template-columns:minmax(0,1fr)}
  body.home .icards{gap:36px}
  body.home .mnav>ul{grid-template-columns:minmax(0,1fr);padding:96px 0 60px}
  body.home .mnav>ul>li{border-left:0;border-bottom:1px solid rgba(255,255,255,.16)}
  body.home .mnav>ul>li>a{padding:18px 0 12px}
  body.home .mnav .sub{padding:10px 0 0}
  body.home .hk-band .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.home .hk-band .stats .v{font-size:30px}
  body.home .hk-mag-fig img,body.home .split-fig img{height:230px}
  body.home .hk-prog{left:18px;bottom:64px;gap:6px}
  body.home .hk-prog i{width:30px}
  body.home .btn{min-width:0;width:100%}
  body.home .hk-intro .hero-cta,body.home .cta-btns{flex-direction:column;align-items:stretch}
  body.home .kv>div{flex-direction:column;gap:4px}
  body.home .kv dt{width:auto}
}
@media (max-width:430px){
  body.home .hk-intro h1{font-size:26px}
  body.home .cta h2{font-size:25px}
  body.home .hdr-in{padding:0 16px;gap:14px}
  body.home .hdr-util{gap:14px}
  body.home .hdr-util .lang{display:none}
}