/* 메인 statement(.state) 모션 — 섹션에 class "kom kom-state" 추가 + .stats 바로 앞에 .kom-deck(실제 납품사례 사진 6장) 블록 추가
   배경을 흰색 → 코아스 코발트 밤하늘(같은 코발트 계열 그라데이션)로 바꾼다. 히어로(어두운 사진) 바로 밑이라 이어서 보인다. */
.state.kom-state { overflow: clip; color: #fff;
  background: radial-gradient(ellipse 70% 70% at 22% 28%, #2346b8 0%, #132c8a 42%, #0a1a55 78%, #07123d 100%); }
.kom-state > .wrap { position: relative; }
.kom-state .eyebrow { color: #a8c2ff; }
.kom-state h2 { color: #fff; position: relative; z-index: 2; }
.kom-state h2 b { color: #b4cbff; }
.kom-state > .wrap > p { color: rgba(228, 236, 255, .78); position: relative; z-index: 2; }
/* 원래 회색 선은 캔버스가 빛으로 다시 그린다 */
.kom-state .stats { border-top-color: transparent; position: relative; z-index: 2; }
.kom-state .stat { border-right-color: transparent !important; border-top-color: transparent !important; position: relative; }
.kom-state .stat b { color: #fff; }
.kom-state .stat b em { color: rgba(214, 228, 255, .72); }
.kom-state .stat span { color: rgba(214, 228, 255, .72); }
.kom-state .kom-num { display: inline-block; }
/* 사이트 규칙 .stat span{display:block;margin-top:14px;font-size:14px} 이 숫자 속 span 에 먹지 않게 */
.kom-state .stat b span { display: inline-block; margin: 0; font-size: inherit; color: inherit; }
.kom-state .stat b .kom-roll { display: inline-flex; }
.kom-state .stat b .kom-strip { display: block; }
.kom-state .stat b .kom-strip span { display: block; }
.kom-state .stat b .kom-sr { position: absolute; }

/* 사진 콜라주: 실제 납품사례 사진(imgs/records) — 레이아웃을 밀지 않게 PC 에서는 절대 위치 */
.kom-deck { position: relative; height: clamp(170px, 46vw, 260px); margin-top: 40px; perspective: 1200px; transform-style: preserve-3d; pointer-events: none; z-index: 1; }
.kom-card { position: absolute; left: var(--x); top: var(--y); width: var(--w); aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px;
  background: #0c1d5c; outline: 1px solid rgba(190, 215, 255, .45); outline-offset: -1px; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, .8), 0 8px 18px rgba(3, 10, 40, .45); }
.kom-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kom-card .kom-sweep { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(225, 236, 255, .6) 50%, transparent 62%) no-repeat; background-size: 250% 100%; }
/* 폰·태블릿: 부채꼴 한 줄 */
.kom-card.c1 { --x: 0%;  --y: 18%; --w: 38%; }
.kom-card.c2 { --x: 12%; --y: 0%;  --w: 38%; }
.kom-card.c3 { --x: 25%; --y: 26%; --w: 40%; }
.kom-card.c4 { --x: 38%; --y: 2%;  --w: 38%; }
.kom-card.c5 { --x: 50%; --y: 24%; --w: 38%; }
.kom-card.c6 { --x: 62%; --y: 4%;  --w: 38%; }
@media (min-width: 1100px) {
  .kom-deck { position: absolute; right: 0; top: -40px; width: 35%; height: 420px; margin: 0; }
  .kom-state .stats { margin-top: clamp(120px, 15vh, 150px); }
  .kom-card.c1 { --x: 6%;  --y: 2%;  --w: 50%; }
  .kom-card.c2 { --x: 50%; --y: 0%;  --w: 48%; }
  .kom-card.c3 { --x: 0%;  --y: 40%; --w: 44%; }
  .kom-card.c4 { --x: 34%; --y: 30%; --w: 60%; }
  .kom-card.c5 { --x: 10%; --y: 63%; --w: 40%; }
  .kom-card.c6 { --x: 56%; --y: 61%; --w: 42%; }
}
/* JS 준비 전 깜빡임 방지 */
html.kom-js .kom-state :is(.eyebrow, h2, .wrap > p, .stat > b, .stat > span) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  html.kom-js .kom-state :is(.eyebrow, h2, .wrap > p, .stat > b, .stat > span) { opacity: 1; }
  .kom-card { opacity: 1; }
  .kom-state .stats { border-top-color: rgba(190, 215, 255, .22); }
  .kom-state .stat:not(:last-child) { border-right-color: rgba(190, 215, 255, .22) !important; }
}