/* 홈 스토리 구간: 해 드릴 수 있는 일(그림 카드) · 달라지는 점(전/후) · 분야 고르기(개발/마케팅 입구)
   개발은 파랑, 마케팅은 분홍. 다른 CSS 와 겹치지 않도록 sb- 이름만 쓴다. */
.sb-story {
  --sb-dev: #6ea2ff;
  --sb-dev-soft: rgba(110, 162, 255, 0.16);
  --sb-mk: #ff79b0;
  --sb-mk-soft: rgba(255, 121, 176, 0.16);
  --sb-ok: #3ccf91;
  --sb-no: #ff6b6b;
  --sb-panel: rgba(15, 24, 52, 0.72);
  --sb-edge: rgba(180, 206, 255, 0.14);
  --sb-ink: #eef2fb;
  --sb-dim: #a3aec6;
}

/* ---------- 해 드릴 수 있는 일: 그림 카드 ---------- */
.sb-fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) { .sb-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sb-fit-grid { grid-template-columns: 1fr; } }

.sb-fit {
  --c: var(--sb-dev);
  --c-soft: var(--sb-dev-soft);
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 8px;
  padding: 14px 14px 18px;
  border: 1px solid var(--sb-edge);
  border-radius: 16px;
  background: var(--sb-panel);
  color: var(--sb-ink) !important;
  text-decoration: none !important;
  transition: transform 0.2s, border-color 0.2s;
}
.sb-fit.sb-mk { --c: var(--sb-mk); --c-soft: var(--sb-mk-soft); }
.sb-fit:hover { transform: translateY(-3px); border-color: var(--c); }
.sb-fit:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

.sb-fit-art {
  margin: 0 0 4px;
  aspect-ratio: 16 / 7;
  max-width: 100%;
  border-radius: 12px;
  background: radial-gradient(120% 100% at 50% 0%, var(--c-soft), rgba(8, 15, 36, 0.2) 70%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sb-fit-art svg { width: 62%; height: auto; }
/* 그림 공통 선·면 */
.sb-fit-art .ln, .sb-fit-art .okl, .sb-fit-art .no, .sb-fit-art .cut, .sb-fit-art .wh { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sb-fit-art .ln { stroke: #c8d4ee; stroke-width: 1.8; }
.sb-fit-art .ln.ar { stroke: var(--c); marker-end: none; stroke-dasharray: 3 3; }
.sb-fit-art .fl { fill: #c8d4ee; }
.sb-fit-art .soft { fill: rgba(200, 212, 238, 0.22); }
.sb-fit-art .ac { fill: var(--c); }
.sb-fit-art .bgc { fill: #0d1630; }
.sb-fit-art .ok { fill: var(--sb-ok); }
.sb-fit-art .okf { fill: var(--sb-ok); }
.sb-fit-art .okl { stroke: var(--sb-ok); stroke-width: 2.2; }
.sb-fit-art .no { stroke: var(--sb-no); stroke-width: 2.6; }
.sb-fit-art .cut { stroke: var(--c); stroke-width: 1.4; stroke-dasharray: 3 3; }
.sb-fit-art .wh { stroke: #fff; stroke-width: 2.2; }
.sb-fit-art .wh.fl2 { fill: #fff; stroke: none; }
.sb-fit-art .w3 { stroke-width: 3; }
.sb-fit-art .o5 { opacity: 0.5; }
.sb-fit-art .o7 { opacity: 0.85; }
.sb-fit-art .ig { fill: url(#sb-ig); }
.sb-fit-art .tx { fill: #e7ecf8; font: 700 9px Pretendard, "Noto Sans KR", sans-serif; text-anchor: middle; }
.sb-fit-art .tx.sm { font-size: 7.5px; font-weight: 600; fill: #b9c4dc; }
.sb-fit-art .tx.wt { fill: #fff; }
.sb-fit-art .tx.l { text-anchor: start; fill: var(--c); }

.sb-fit-tag {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--c-soft);
  color: var(--c);
  font-size: 12px;
  font-weight: 800;
}
.sb-fit h3 { margin: 0; font-size: 19px; line-height: 1.35; letter-spacing: -0.02em; text-wrap: balance; }
.sb-fit p { margin: 0; color: #c9d2e6; font-size: 15px; line-height: 1.55; }
.sb-fit p::before { content: "→ "; color: var(--c); font-weight: 800; }
.sb-fit b { align-self: end; padding-top: 6px; color: var(--c); font-size: 13px; }

/* 휴대폰: 그림은 왼쪽 작게, 글은 오른쪽 — 카드 8개가 한 화면에 더 많이 보이게 */
@media (max-width: 560px) {
  .sb-fit {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: 96px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    padding: 12px;
  }
  .sb-fit-art { grid-column: 1; grid-row: 1 / span 4; margin: 0; aspect-ratio: 1; }
  .sb-fit-art svg { width: 100%; }
  .sb-fit-tag, .sb-fit h3, .sb-fit p, .sb-fit b { grid-column: 2; }
  .sb-fit h3 { font-size: 16px; }
  .sb-fit p { font-size: 13px; }
  .sb-fit b { padding-top: 2px; }
}

/* ---------- 달라지는 점: 실제 사례 화면 + 전 / 후 ---------- */
.sb-ba-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 760px) { .sb-ba-list { grid-template-columns: 1fr; } }
.sb-ba {
  --c: var(--sb-dev);
  --c-soft: var(--sb-dev-soft);
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 10px;
  padding: 12px 12px 20px;
  border: 1px solid var(--sb-edge);
  border-radius: 16px;
  background: var(--sb-panel);
}
.sb-ba.sb-mk { --c: var(--sb-mk); --c-soft: var(--sb-mk-soft); }
.sb-ba > :not(.sb-ba-shot) { margin-inline: 8px; }
/* 실제 납품 화면 */
.sb-ba-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8.5;
  max-width: 100%;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 11px;
  background: #0a1128;
  text-decoration: none !important;
}
.sb-ba-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s; }
.sb-ba-shot:hover img { transform: scale(1.03); }
.sb-ba-shot:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.sb-ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 100%; }
.sb-ba-pair img { border-radius: 0; }
.sb-ba-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 14px 10px;
  background: linear-gradient(180deg, transparent, rgba(5, 9, 22, 0.92));
  color: #e9eefb;
  font-size: 13px;
  font-weight: 650;
}
.sb-ba-cap b { flex: none; color: var(--c); }
/* 공공 문서: 화면 대신 '한글 문서 → 사업별 파일' 그림 */
.sb-ba-doc { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100%; background: radial-gradient(90% 90% at 50% 30%, var(--c-soft), transparent 70%); }
.sb-ba-doc .hwp { display: grid; place-items: center; width: 54px; height: 66px; border-radius: 6px; background: linear-gradient(160deg, #4f8dff, #1d4fbf); color: #fff; font-weight: 900; font-size: 13px; box-shadow: 7px 7px 0 rgba(110, 162, 255, 0.35), 14px 14px 0 rgba(110, 162, 255, 0.18); }
.sb-ba-doc .arr { color: var(--c); font-size: 26px; font-weight: 800; }
.sb-ba-doc .files { display: grid; gap: 6px; }
.sb-ba-doc .files i { display: block; width: 92px; height: 12px; border-radius: 4px; background: rgba(200, 212, 238, 0.28); }
.sb-ba-doc .files i:nth-child(3) { background: rgba(240, 165, 0, 0.6); }
.sb-ba-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sb-ba-head b { font-size: 17px; color: var(--sb-ink); }
.sb-ba-head span { padding: 2px 9px; border-radius: 999px; background: var(--c-soft); color: var(--c); font-size: 12px; font-weight: 700; }
.sb-before, .sb-after { display: flex; gap: 10px; margin: 0; font-size: 15px; line-height: 1.55; }
.sb-before { color: var(--sb-dim); }
.sb-after { color: var(--sb-ink); font-weight: 650; }
.sb-before i, .sb-after i {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}
.sb-before i { background: rgba(255, 255, 255, 0.07); color: var(--sb-dim); }
.sb-after i { background: var(--c); color: #fff; }

/* ---------- 개발 / 마케팅: 위아래 두 줄, 글자만 크게 ----------
   평소엔 글자만. 마우스를 올리면 그라데이션 테두리가 생기고 뒤에서 흐린 영상이 돈다.
   개발은 왼쪽 정렬(위), 마케팅은 오른쪽 정렬(아래). */
.sb-entry { padding: 72px 0 104px; }
.sb-entry-rows { display: grid; gap: 14px; }
.sb-row {
  --g: linear-gradient(120deg, #3b7bff, #7fb0ff 45%, #2a5bd7);
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: clamp(26px, 4vw, 44px) clamp(22px, 4vw, 48px);
  border-radius: 24px;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none !important;
}
.sb-row.sb-mk {
  --g: linear-gradient(120deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5);
  justify-items: end;
  text-align: right;
}
/* 그라데이션 테두리: 평소 숨김 */
.sb-row::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 2px;
  border-radius: inherit;
  background: var(--g);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
/* 영상: 글자가 없는 쪽에서만, 선명하게(예전 반반 화면 정도). 평소 숨김.
   개발은 오른쪽, 마케팅은 왼쪽. 글자 쪽으로 갈수록 부드럽게 사라진다. */
.sb-row video {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 56%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.95) brightness(0.8);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.6s ease, transform 1s ease;
}
.sb-row.sb-dev video {
  right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.sb-row.sb-mk video {
  left: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 30%);
}
/* 색 입히기: 개발은 파랑, 마케팅은 분홍 */
.sb-row::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s;
}
.sb-row.sb-dev::after {
  background:
    linear-gradient(90deg, transparent 44%, rgba(40, 100, 255, 0.28) 100%),
    radial-gradient(70% 120% at 85% 50%, rgba(60, 120, 255, 0.22), transparent 70%);
  mix-blend-mode: screen;
}
.sb-row.sb-mk::after {
  background: radial-gradient(70% 120% at 15% 50%, rgba(255, 79, 154, 0.2), transparent 70%);
  mix-blend-mode: screen;
}
.sb-row.sb-dev { --g: linear-gradient(120deg, #feda75, #3b7bff 45%, #2fd08a); }
.sb-row:hover::before, .sb-row:focus-visible::before { opacity: 1; }
.sb-row:hover video, .sb-row:focus-visible video { opacity: 1; transform: scale(1); }
.sb-row:hover::after, .sb-row:focus-visible::after { opacity: 1; }
.sb-row:focus-visible { outline: none; }

.sb-row-kicker { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; }
.sb-dev .sb-row-kicker { color: #8db8ff; }
.sb-mk .sb-row-kicker { color: #ff9cc7; }
.sb-row strong {
  font-size: clamp(64px, 11vw, 150px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -0.055em;
}
.sb-row strong span { display: inline-block; font-size: 0.5em; vertical-align: middle; transition: transform 0.3s; }
.sb-dev:hover strong span { transform: translateX(10px); }
.sb-mk:hover strong span { transform: translateX(-10px); }
.sb-dev strong { background: linear-gradient(90deg, #fff 30%, #8db8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-mk strong { background: linear-gradient(270deg, #fff 30%, #ff9cc7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sb-row.sb-mk strong { letter-spacing: -0.01em; }
.sb-row-sub { color: #c9d2e6; font-size: clamp(15px, 1.6vw, 18px); }

/* 마우스가 없는 휴대폰: 테두리와 영상을 옅게 늘 보여 준다 */
@media (hover: none) {
  .sb-row::before { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-fit, .sb-ba-shot img, .sb-row::before, .sb-row video, .sb-row::after, .sb-row strong span { transition: none; }
}

/* '이렇게 일합니다' 번호: 크게, 왼쪽 정렬 */
.kr-why-grid article > b {
  justify-self: start;
  margin-bottom: 18px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* 소개 아래 움직이는 카드 세 장(개발 페이지 카드와 같은 모양) */
.sb-intro-cards { margin-top: 28px; }
/* 오른쪽 칸 안에 세 장: 칸이 좁아지면 한 줄로 */
.sb-intro-cards .dev-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sb-intro-cards .dev-service { padding: 18px; }
.sb-intro-cards .dev-service-visual { margin: 14px 0 16px; }
@media (max-width: 1100px) { .sb-intro-cards .dev-service-grid { grid-template-columns: 1fr; } }

/* ---------- 소개 아래 카드: 직접 그린 움직이는 화면 ----------
   기존 영상과 같은 톤(남색 바탕·옅은 격자·유리 패널·파란 빛). 8초마다 반복. */
.sb-viz {
  position: relative;
  display: grid;
  place-items: center;
  padding: 10px;
  background:
    linear-gradient(rgba(140, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(140, 180, 255, 0.05) 1px, transparent 1px) 0 0 / 18px 18px,
    radial-gradient(80% 90% at 50% 40%, rgba(70, 120, 255, 0.22), transparent 70%),
    #0a1430;
}
.vz-win {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(160, 195, 255, 0.28);
  background: rgba(14, 26, 58, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 24px rgba(79, 141, 255, 0.18);
  font-family: Pretendard, "Noto Sans KR", sans-serif;
  color: #dbe5fb;
}
.vz-bar { display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-bottom: 1px solid rgba(160, 195, 255, 0.14); font-size: 8px; color: #8ea2c9; }
.vz-bar i { width: 5px; height: 5px; border-radius: 50%; background: #6ea2ff; opacity: 0.7; }
.vz-bar span { margin-left: 6px; padding: 1px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); }
.vz-bar em { margin-left: auto; font-style: normal; font-weight: 700; color: #3ccf91; animation: vz-blink 1.6s infinite; }
@keyframes vz-blink { 50% { opacity: 0.35; } }

/* 1) 쇼핑몰 웹페이지 */
.vz-page { position: relative; flex: 1; overflow: hidden; background: #f4f7fd; color: #1b2640; }
.vz-scroll { animation: vz-scroll 8s ease-in-out infinite; }
@keyframes vz-scroll { 0%, 62% { transform: translateY(0); } 78%, 92% { transform: translateY(-22%); } 100% { transform: translateY(0); } }
.vz-nav { display: flex; align-items: center; gap: 9px; padding: 4px 10px; font-size: 7.5px; color: #55627f; background: #fff; border-bottom: 1px solid #e3e9f5; }
.vz-nav b { margin-right: auto; font-size: 9px; font-weight: 900; color: #1d4fbf; letter-spacing: 0.08em; }
.vz-cart { position: relative; font-style: normal; font-size: 10px; }
.vz-cart sup {
  position: absolute; right: -7px; top: -5px;
  display: inline-flex; flex-direction: column; height: 11px; overflow: hidden;
  min-width: 11px; border-radius: 6px; background: #ff4f6e; color: #fff; font-size: 7px; line-height: 11px; text-align: center;
}
.vz-cart sup i { font-style: normal; animation: vz-cart 8s steps(1) infinite; }
@keyframes vz-cart { 0%, 33% { transform: translateY(0); } 34%, 100% { transform: translateY(-100%); } }
.vz-hero { display: flex; align-items: center; gap: 8px; margin: 5px 10px; padding: 5px 10px; border-radius: 6px; background: linear-gradient(110deg, #1d4fbf, #4f8dff); color: #fff; }
.vz-hero div:first-child { display: grid; gap: 2px; flex: 1; }
.vz-hero small { font-size: 6px; letter-spacing: 0.14em; opacity: 0.8; }
.vz-hero strong { font-size: 9.5px; }
.vz-btn { justify-self: start; margin-top: 3px; padding: 2px 7px; border-radius: 3px; background: #fff; color: #1d4fbf; font-size: 6.5px; font-weight: 800; }
.vz-hero-img { width: 22%; aspect-ratio: 16 / 9; border-radius: 4px; background: radial-gradient(circle at 35% 40%, #ffd99a, #f0a35a 40%, #b5682e 80%); }
.vz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 10px; }
.vz-item { display: grid; grid-template-columns: 1fr auto; gap: 1px 4px; align-items: center; padding: 3px; border-radius: 5px; background: #fff; box-shadow: 0 1px 3px rgba(20, 40, 80, 0.08); font-size: 6.5px; }
.vz-item b { font-size: 7px; color: #1b2640; }
.vz-item .vz-img { grid-column: 1 / -1; }
.vz-item span { grid-column: 1; }
.vz-item b { grid-column: 1; }
.vz-item .vz-add { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.vz-img { aspect-ratio: 16 / 8; border-radius: 3px; }
.vz-img.c1 { background: linear-gradient(160deg, #e9dcc8, #b38b5d); }
.vz-img.c2 { background: linear-gradient(160deg, #d8e6ff, #6f97e8); }
.vz-img.c3 { background: linear-gradient(160deg, #e2f1e6, #74b98a); }
.vz-add { justify-self: start; padding: 1px 6px; border-radius: 3px; background: #e7eeff; color: #1d4fbf; font-style: normal; font-weight: 800; }
.vz-add.hit { animation: vz-hit 8s infinite; }
@keyframes vz-hit { 0%, 31% { background: #e7eeff; color: #1d4fbf; transform: scale(1); } 32% { transform: scale(0.85); } 34%, 100% { background: #1d4fbf; color: #fff; transform: scale(1); } }
.vz-foot { display: grid; gap: 4px; margin: 10px; padding: 8px; border-radius: 5px; background: #1b2640; }
.vz-foot span { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.25); }
.vz-foot span:nth-child(2) { width: 60%; }
.vz-foot span:nth-child(3) { width: 40%; }
.vz-page .vz-toast { position: absolute; right: 8px; top: 30px; }
.vz-cursor { position: absolute; width: 11px; left: 50%; top: 82%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); animation: vz-cursor 8s ease-in-out infinite; }
@keyframes vz-cursor {
  0% { left: 92%; top: 95%; opacity: 0; }
  8% { opacity: 1; }
  30%, 36% { left: 60%; top: 88%; }
  60% { left: 70%; top: 60%; opacity: 1; }
  66%, 100% { left: 70%; top: 60%; opacity: 0; }
}

/* 공통 알림 */
.vz-toast {
  position: absolute;
  padding: 4px 8px;
  border-radius: 5px;
  background: #0f9d6b;
  color: #fff;
  font-size: 7.5px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(15, 157, 107, 0.4);
  opacity: 0;
  animation: vz-toast 8s infinite;
}
.vz-page .vz-toast { animation-name: vz-toast-shop; }
@keyframes vz-toast-shop { 0%, 34% { opacity: 0; transform: translateY(-4px); } 37%, 58% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; } }
@keyframes vz-toast { 0%, 80% { opacity: 0; transform: translateY(4px); } 83%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2) 주문 관리 프로그램 */
.vz-app { position: relative; flex: 1; display: flex; gap: 6px; padding: 6px; overflow: hidden; }
.vz-app aside { display: flex; flex-direction: column; gap: 3px; width: 22%; padding: 5px 4px; border-radius: 5px; background: rgba(255, 255, 255, 0.04); }
.vz-app aside b { padding: 3px 5px; border-radius: 3px; font-size: 7px; font-weight: 600; color: #8ea2c9; }
.vz-app aside b.on { background: #4f8dff; color: #fff; }
.vz-main { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.vz-top { display: flex; align-items: center; gap: 6px; }
.vz-xls { padding: 2px 6px; border-radius: 4px; background: #16a34a; color: #fff; font-size: 6.5px; font-weight: 800; white-space: nowrap; animation: vz-xls 8s infinite; }
@keyframes vz-xls { 0% { opacity: 0; transform: translateX(-30px); } 10%, 100% { opacity: 1; transform: none; } }
.vz-meter { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.vz-meter i { display: block; height: 100%; background: linear-gradient(90deg, #4f8dff, #3ccf91); transform-origin: left; animation: vz-meter 8s infinite; }
@keyframes vz-meter { 0%, 25% { transform: scaleX(0); } 78%, 100% { transform: scaleX(1); } }
.vz-rows { display: grid; gap: 2px; }
.vz-row { display: grid; grid-template-columns: 0.8fr 1.2fr auto; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.05); font-size: 7px; animation: vz-row 8s infinite; }
.vz-row em { display: inline-flex; flex-direction: column; height: 11px; overflow: hidden; font-style: normal; }
.vz-row em i { height: 11px; padding: 0 5px; border-radius: 6px; font-style: normal; font-size: 6.5px; line-height: 11px; font-weight: 800; text-align: center; animation: vz-status 8s steps(1) infinite; }
.vz-row em i:nth-child(1) { background: rgba(255, 255, 255, 0.12); color: #c8d4ee; }
.vz-row em i:nth-child(2) { background: rgba(240, 165, 0, 0.25); color: #ffc65a; }
.vz-row em i:nth-child(3) { background: rgba(60, 207, 145, 0.22); color: #4be3a2; }
@keyframes vz-row { 0%, 12% { opacity: 0; transform: translateY(4px); } 18%, 100% { opacity: 1; transform: none; } }
@keyframes vz-status { 0%, 38% { transform: translateY(0); } 39%, 58% { transform: translateY(-100%); } 59%, 100% { transform: translateY(-200%); } }
.vz-row.r2, .vz-row.r2 em i { animation-delay: 0.25s; }
.vz-row.r3, .vz-row.r3 em i { animation-delay: 0.5s; }
.vz-row.r4, .vz-row.r4 em i { animation-delay: 0.75s; }
.vz-app .vz-toast { right: 10px; bottom: 8px; }

/* 카드 높이 안에서 화면 비율 유지 */
.sb-viz .vz-win { max-height: 100%; }

@media (prefers-reduced-motion: reduce) {
  .sb-viz *, .sb-viz *::before { animation: none !important; }
  .sb-viz .vz-toast { opacity: 1; }
  .vz-cart sup i { transform: translateY(-100%); }
  .vz-row em i { transform: translateY(-200%); }
}

/* 글자가 있는 카드는 거의 불투명하게: 뒤 오로라가 글씨에 비치지 않게 */
/* 홈 카드 바탕은 모두 같은 색·같은 투명도: 뒤 오로라가 살짝만 비친다 */
:root { --sb-card-bg: rgba(12, 21, 46, 0.86); }
.sb-intro-cards .dev-service,
.kr-case,
.kr-why-grid article { background: var(--sb-card-bg) !important; }
.sb-story { --sb-panel: var(--sb-card-bg); }

/* 쇼핑몰 화면: 카드 높이가 낮아 배너를 띠 형태로 줄이고 상품이 첫 화면에 보이게 */
.sb-viz-shop .vz-hero { padding: 3px 8px; margin: 4px 8px; }
.sb-viz-shop .vz-hero div:first-child { display: flex; align-items: center; gap: 6px; }
.sb-viz-shop .vz-hero strong { font-size: 8px; }
.sb-viz-shop .vz-hero small { font-size: 5.5px; }
.sb-viz-shop .vz-btn { margin: 0 0 0 auto; padding: 1px 6px; }
.sb-viz-shop .vz-hero-img { display: none; }
.sb-viz-shop .vz-grid { padding: 0 8px; gap: 5px; }
.vz-app aside b { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.vz-app aside { width: 24%; }

/* 숫자 띠(30건+ 등)가 첫 화면 아래 경계선에 걸치지 않게: 겹쳐 올리던 여백을 없앤다 */
.kr-home .dev-proof { margin-top: 0 !important; }
/* 첫 화면 아래 끝을 부드럽게 흐려서 배경과 맞닿는 가로 경계선이 보이지 않게 */
.kr-home .mk-hero.mk-brand-hero {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
}
/* 숫자 띠 아래 선 없음(개발 페이지 스타일에서 따라온 아래 테두리) */
.kr-home .dev-proof { border-bottom: 0 !important; }

/* 소개 카드 그림: 고정 높이(170px)라 카드가 넓어지면 아래가 잘리고 좁아지면 글자가 쪼개졌다.
   그림 창은 원래 크기(320×170)로 그리고, 칸 폭에 맞춰 통째로 확대·축소한다(home-story.js 가 --vz-s 계산). */
.sb-intro-cards .dev-service-visual { position: relative; height: auto; aspect-ratio: 340 / 190; padding: 0; }
.sb-intro-cards .sb-viz .vz-win {
  position: absolute; left: 0; top: 0;
  width: 320px; height: 170px; max-height: none;
  transform-origin: 0 0;
  transform: translate(calc(10px * var(--vz-s, 1)), calc(10px * var(--vz-s, 1))) scale(var(--vz-s, 1));
}
.sb-intro-cards .dev-service-visual .svc-motion { position: absolute; inset: 0; }
@media (max-width: 1100px) {
  .sb-intro-cards .dev-service-visual { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
}