/* KR마케팅 홈 v8 — 편집 레이아웃(괘선·비대칭·큰 숫자·실물 우선). 모서리 0, 장식 모션 없음 */

/* 장부 띠 */
.h8-ledger{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.h8-ledger .wrap{padding-top:48px;padding-bottom:0}
.h8-ledger-lead{margin:0 0 32px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;font-weight:600;letter-spacing:-.02em;color:var(--ink);max-width:760px}
.h8-ledger-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--ink)}
.h8-ledger-row>div{padding:18px 20px 20px 20px;border-right:1px solid var(--line);min-width:0}
.h8-ledger-row>div:first-child{padding-left:0}
.h8-ledger-row>div:last-child{border-right:0}
.h8-ledger-row small{display:block;font-size:12.5px;font-weight:600;color:var(--ink3);margin-bottom:10px;letter-spacing:.01em}
.h8-ledger-row b{display:block;font-family:var(--disp);font-size:clamp(28px,2.6vw,38px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.h8-ledger-row b i{font-style:normal;font-size:.42em;font-weight:700;letter-spacing:-.02em;margin-left:4px;color:var(--ink2)}
.h8-ledger-row b.h8-ledger-txt{font-family:inherit;font-size:17px;font-weight:800;letter-spacing:-.02em;line-height:1.35;white-space:normal;padding-top:6px}
.h8-ledger-txt em{display:block;font-style:normal;font-size:13.5px;font-weight:700;color:var(--magenta);margin-top:6px}
.h8-ledger-cl{display:flex;gap:24px;align-items:baseline;padding:18px 0 22px;border-top:1px solid var(--line);font-family:var(--disp);font-size:14px;font-weight:600;color:#9aa2ac;letter-spacing:.01em;overflow:hidden;white-space:nowrap}
.h8-ledger-cl span{font-family:inherit;font-size:12px;color:var(--ink3);flex:none;font-weight:600}

/* 하는 일 — 괘선 색인 행 */
.h8-idx{border-top:2px solid var(--ink);margin-top:56px}
.h8-row{display:grid;grid-template-columns:150px minmax(0,1fr) 380px;gap:0 48px;padding:48px 0;border-bottom:1px solid var(--line);align-items:start}
.h8-row-n span{display:block;font-family:var(--disp);font-size:clamp(36px,3.4vw,48px);font-weight:800;letter-spacing:-.06em;line-height:.9;color:var(--ink)}
.h8-row:nth-child(1) .h8-row-n span{color:var(--teal)}.h8-row:nth-child(2) .h8-row-n span{color:var(--blue)}.h8-row:nth-child(3) .h8-row-n span{color:var(--magenta)}.h8-row:nth-child(4) .h8-row-n span{color:var(--orange)}
.h8-row-n small{display:block;margin-top:14px;font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.h8-row-t h3{margin:0 0 16px;font-size:clamp(24px,2.3vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.2}
.h8-row-t p{margin:0;font-size:16px;line-height:1.7;color:var(--ink2);max-width:560px}
.h8-row-t ul{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;font-size:14px;font-weight:600;color:var(--ink2)}
.h8-row-t ul li{padding-left:14px;position:relative}.h8-row-t ul li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:1px;background:var(--ink)}
.h8-row-t .x-link{display:inline-block;margin-top:22px}
.h8-row-v{min-width:0}
.h8-row-mk{height:320px;overflow:hidden;position:relative;background:var(--soft)}
.h8-row-mk .mk{transform:scale(.6);transform-origin:top center;position:absolute;left:50%;margin-left:-150px;top:16px;box-shadow:none}
.h8-row-mk small,.h8-row-ch small{position:absolute;left:14px;bottom:10px;font-size:12px;font-weight:600;color:var(--ink3);background:rgba(255,255,255,.9);padding:4px 8px}
.h8-row-mk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,var(--soft))}
.h8-row-ch{position:relative;aspect-ratio:16/10;background:#0f1720;overflow:hidden}
.h8-row-ch small{background:rgba(15,23,32,.85);color:#c4cad1}
.h8-stat{background:var(--ink);color:#fff;aspect-ratio:16/10;padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.h8-stat b{font-family:var(--disp);font-size:clamp(44px,4.6vw,68px);font-weight:800;letter-spacing:-.05em;line-height:1;margin-bottom:14px}
.h8-stat b i{font-style:normal;font-size:.4em;margin-left:4px;font-weight:700}
.h8-stat span{font-size:14px;line-height:1.55;color:#c4cad1;max-width:300px}
.h8-stat small{margin-top:14px;font-size:12px;color:#7f8893;font-weight:600}
.h8-vid{margin:0;position:relative;aspect-ratio:16/10;background:#111;overflow:hidden;cursor:pointer}
.h8-vid img{width:100%;height:100%;object-fit:cover;display:block}
.h8-vid .play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;background:var(--magenta)}
.h8-vid .play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 18px;border-color:transparent transparent transparent #fff}
.h8-vid figcaption{position:absolute;left:14px;bottom:10px;font-size:12px;font-weight:600;color:#fff;background:rgba(0,0,0,.6);padding:4px 8px}

/* 광고 상품 띠 */
.h8-arch{padding:120px 0 0;border-top:1px solid var(--line)}
.h8-arch-h{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-bottom:40px}
.h8-arch-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.h8-arch-i{display:block;min-width:0;padding:0 0 18px;border-right:1px solid var(--line);color:inherit;text-decoration:none}
.h8-arch-i:last-child{border-right:0}
.h8-arch-m{height:240px;overflow:hidden;position:relative;background:var(--soft)}
.h8-arch-m .mk{transform:scale(.56);transform-origin:top center;position:absolute;left:50%;margin-left:-150px;top:14px;box-shadow:none}
.h8-arch-m::after{content:"";position:absolute;left:0;right:0;bottom:0;height:50px;background:linear-gradient(transparent,var(--soft))}
.h8-arch-i b{display:block;margin:14px 14px 2px;font-size:15px;font-weight:800;letter-spacing:-.02em}
.h8-arch-i span{display:block;margin:0 14px;font-size:12.5px;font-weight:600;color:var(--ink3)}
.h8-arch-i:hover b{color:var(--magenta)}

/* 대표 사례 */
.h8-feat{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0 48px;border-top:2px solid var(--ink);padding:40px 0;margin:48px 0 40px;border-bottom:1px solid var(--line)}
.h8-feat-ch{position:relative;aspect-ratio:16/9;background:#0f1720}
.h8-feat-t h3{margin:10px 0 14px;font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.2}
.h8-feat-t p{margin:0 0 20px;font-size:15.5px;line-height:1.7;color:var(--ink2)}

@media (max-width:1100px){
  .h8-row{grid-template-columns:110px minmax(0,1fr) 300px;gap:0 28px}
  .h8-ledger-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h8-ledger-row>div{padding:18px 16px 20px 16px}.h8-ledger-row>div:nth-child(3n+1){padding-left:0}
  .h8-ledger-row>div:nth-child(3n){border-right:0}
  .h8-ledger-row>div:nth-child(n+4){border-top:1px solid var(--line)}
  .h8-arch-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .h8-arch-i:nth-child(3n){border-right:0}.h8-arch-i:nth-child(n+4){border-top:1px solid var(--line)}
}
@media (max-width:760px){
  .h8-ledger .wrap{padding-top:44px}
  .h8-ledger-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h8-ledger-row>div{padding:16px 12px 18px 16px}.h8-ledger-row>div:nth-child(3n+1){padding-left:16px}.h8-ledger-row>div:nth-child(2n+1){padding-left:0}
  .h8-ledger-row>div:nth-child(3n){border-right:1px solid var(--line)}
  .h8-ledger-row>div:nth-child(2n){border-right:0;padding-left:16px}
  .h8-ledger-row>div:nth-child(n+3){border-top:1px solid var(--line)}
  .h8-ledger-row b{font-size:30px}
  .h8-ledger-row b.h8-ledger-txt{font-size:15px}
  .h8-ledger-cl{white-space:normal;flex-direction:column;gap:6px;font-size:12.5px}
  .h8-idx{margin-top:36px}
  .h8-row{grid-template-columns:1fr;gap:18px 0;padding:32px 0}
  .h8-row-n{display:flex;align-items:baseline;gap:14px}.h8-row-n small{margin:0}
  .h8-row-t ul{grid-template-columns:1fr}
  .h8-row-v{order:3}
  .h8-row-mk{height:260px}.h8-row-mk .mk{transform:scale(.5)}
  .h8-arch{padding-top:80px}
  .h8-arch-h{flex-direction:column;align-items:flex-start;gap:12px}
  .h8-arch-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .h8-arch-i{border-right:1px solid var(--line)}.h8-arch-i:nth-child(2n){border-right:0}.h8-arch-i:nth-child(n+3){border-top:1px solid var(--line)}
  .h8-arch-m{height:200px}.h8-arch-m .mk{transform:scale(.46)}
  .h8-feat{grid-template-columns:1fr;gap:20px 0;padding:28px 0;margin:32px 0 28px}
}

/* v9.9.33 홈 광고 상품 3×3 */
.h8-arch-9{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:1px;background:var(--line);border:0;border-top:2px solid var(--ink)}
.h8-arch-9 .h8-arch-i{background:#fff;border:0!important;padding-bottom:20px}
.h8-arch-9 .h8-arch-m{height:300px}
.h8-arch-9 .h8-arch-m .mk{transform:scale(.66)}
.h8-arch-9 .h8-arch-i b{margin:16px 20px 2px;font-size:16px}.h8-arch-9 .h8-arch-i span{margin:0 20px}
.h8-arch{padding-bottom:120px}
@media (max-width:640px){.h8-arch-9{grid-template-columns:repeat(2,minmax(0,1fr))!important}.h8-arch-9 .h8-arch-i:nth-child(9){display:none}.h8-arch-9 .h8-arch-m{height:200px}.h8-arch-9 .h8-arch-m .mk{transform:scale(.46)}.h8-arch-9 .h8-arch-i b{margin:12px 12px 2px;font-size:14px}.h8-arch-9 .h8-arch-i span{margin:0 12px}.h8-arch{padding-bottom:80px}}

/* v9.9.33 홈 스튜디오 — 같은 크기 3×2, 설명은 사진 아래 */
.x-studio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px;margin-top:8px}
.x-studio figure{margin:0}
.x-studio img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:#1b2128}
.x-studio figcaption{margin-top:10px;font-size:14px;font-weight:700;color:#c9cfd6}
@media (max-width:640px){.x-studio{grid-template-columns:1fr 1fr;gap:16px 10px}.x-studio figcaption{font-size:13px;margin-top:8px}}