/* =============================================================================
   a안 · 한 섹션 한 정보 (스크롤형, 5~6화면)
   토대: cm-toss.css · min.css 위에 얹는다. 색 · 서체 · 버튼 · 칩 · 사례 카드 · 상담 블록은 min.css 것을 그대로 쓴다.
   여기 있는 것
     1. .va-peek         히어로 실화면(폰 화면 위쪽만, 아래는 흰 바탕으로 사라진다)
     2. .va-row          핵심 장면 행(제목 한 줄 + 칩 + 실캡처 1, 좌우 교대)
     3. .va-stage        실캡처 무대(현장 실사 · 폰 화면 · 웹 화면) + .va-inset(곁들이는 작은 화면)
     4. .va-picks        홈 큰 버튼 4(문제 문장 + 제품 이름 + 실사)
     5. .va-map          홈 도면(구역 탭 + 핀 + 패널). 동작은 v-a.js
   핀 스크롤 · 스크럽 없음. 움직임은 떠오름(0.26초)과 누름뿐이다.
   ============================================================================= */

:root {
  --va-stage-r: 28px;
  --va-row-gap: clamp(40px, 5.2vw, 64px);
  --va-phone-w: 280px;
}

/* ---- 1. 히어로 실화면 --------------------------------------------------------- */
/* .min-shot.min-shot--phone.min-shot--clip 에 붙인다. 긴 폰 화면의 위쪽만 보이고 아래는 흰 바탕으로 사라진다. */
.va-peek {
  border-bottom: 0; border-radius: 28px 28px 0 0;
  -webkit-mask-image: linear-gradient(#000 62%, transparent 98%);
          mask-image: linear-gradient(#000 62%, transparent 98%);
}
.va-peek > video { height: var(--clip, 520px); object-fit: cover; object-position: top; }   /* 실앱 녹화 영상도 같은 식으로 위쪽만 */
.min-hero:has(.va-peek) { padding-bottom: 0; }

/* ---- 2. 핵심 장면 행 ---------------------------------------------------------- */
/* 원고 순서는 언제나 제목 먼저(읽기 순서). 넓은 화면에서 .va-row--flip 이 무대를 왼쪽으로 보낸다. */
.va-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.va-row__text { text-align: center; }
.va-row__text .min-chips { justify-content: center; margin-top: 16px; }
.va-row__text .min-actions { margin-top: 24px; }
@media (min-width: 900px) {
  .va-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: var(--va-row-gap); }
  .va-row--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  .va-row--flip > .va-row__text { order: 2; }
  .va-row__text { text-align: left; }
  .va-row__text .min-chips { justify-content: flex-start; margin-top: 20px; }
  .va-row__text .min-actions { justify-content: flex-start; }
}

/* ---- 3. 실캡처 무대 ----------------------------------------------------------- */
/* 흰 카드 + 위쪽 타원 빛(MSDS 홈 값) + 푸른 기 그림자. 폰 베젤 · 창 틀을 그리지 않는다. */
.va-stage {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 1 / 1;
  border: 1px solid var(--cm-line); border-radius: var(--va-stage-r); box-shadow: var(--cm-shadow-2);
  background: #fff radial-gradient(ellipse at 50% 0%, var(--cm-glow-1), var(--cm-glow-2) 48%, transparent 72%);
}
/* 현장 실사: 무대를 가득 채운다. 주인공 위치는 style="--pos:50% 58%" */
.va-stage--photo { border: 0; }
.va-stage--photo > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* 폰 화면: 가운데 한 장. 높이는 캡처를 따른다. 긴 화면은 .min-shot--clip 으로 위쪽만 */
.va-stage--phone { aspect-ratio: auto; display: grid; place-items: center; padding: 36px 24px; }
.va-stage--phone > .min-shot { width: min(74%, var(--va-phone-w)); margin: 0; border-radius: 22px; }
/* 웹 화면: 왼쪽 위에 붙이고 오른쪽은 무대 끝에서 잘라 보여 준다(글자가 읽히는 크기로).
   캡처 크기를 style="--w:864; --h:582" 로 적는다. --show 는 보여 줄 폭 비율(기본 0.79, 좁은 화면 --show-m 0.66) */
.va-stage--web > .min-shot { position: absolute; left: 7%; top: 9%; right: 0; border-right: 0; border-radius: 14px 0 0 14px; }
.va-stage--web > .min-shot > img {
  width: 100%; height: auto; aspect-ratio: calc(var(--w, 16) * var(--show, 0.79)) / var(--h, 10);
  object-fit: cover; object-position: left top;
}
/* 곁들이는 작은 폰 화면: 무대 오른쪽 아래 */
.va-inset {
  position: absolute; right: 6%; bottom: 6%; width: 36%; margin: 0; overflow: hidden;
  background: #fff; border: 1px solid var(--cm-line-2); border-radius: 18px; box-shadow: var(--cm-shadow-3);
}
.va-inset > img, .va-inset > video { display: block; width: 100%; height: auto; }
@media (max-width: 899px) {
  .va-stage { width: 100%; max-width: 560px; margin-inline: auto; border-radius: var(--cm-r-card); }
  .va-stage--phone { padding: 28px 20px; }
  .va-stage--web > .min-shot > img { aspect-ratio: calc(var(--w, 16) * var(--show-m, 0.66)) / var(--h, 10); }   /* 좁은 화면은 더 잘라서 글자 크기를 지킨다 */
  .va-inset { right: 4%; bottom: 5%; width: 30%; border-radius: 14px; }
}

/* 상담 블록의 빛: 타원을 섹션 안쪽에 두어 위아래 가장자리가 선으로 보이지 않게 한다(a안 한정. 진하기는 스킬 값 그대로) */
.min-cta > .cm-bg--band {
  height: 100%;
  background: radial-gradient(ellipse 60% 55% at 86% 42%, var(--cm-glow-1), var(--cm-glow-2) 44%, transparent 70%);
}
.min-cta > .cm-bg--band .cm-bg__glow { --y: 2%; }

/* ---- 4. 홈 큰 버튼 4 ---------------------------------------------------------- */
/* 문제 문장(원문 그대로) + 제품 이름 칩 + 실사 1장. 카드 전체가 링크다. */
.va-picks {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cm-card-gap);
  margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; text-align: left;
}
.va-picks > li { margin: 0; padding: 0; display: flex; }
.va-pick {
  display: flex; flex-direction: column; width: 100%; overflow: hidden;
  background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-2);
  color: inherit; text-decoration: none;
}
.va-pick__photo { display: block; aspect-ratio: 1 / 1; overflow: hidden; }   /* 원본 그림 4장이 모두 정사각이라 자르지 않고 다 보여 준다(4:3 으로 자르면 안내판 로고와 앱 화면 제목이 잘린다) */
.va-pick__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.va-pick__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px 20px; }
.va-pick__q { margin: 0; color: var(--cm-ink); font: 700 var(--min-fs-h3)/1.4 var(--min-font-title); letter-spacing: -0.02em; text-wrap: balance; }
.va-pick__body .min-chip { margin-top: auto; }
@media (max-width: 1023px) {
  .va-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .va-picks { gap: 12px; }
  .va-pick { border-radius: 20px; }
  .va-pick__body { gap: 10px; padding: 14px 14px 16px; }
  .va-pick__q { font-size: 16px; }
  .va-pick__body .min-chip { min-height: 32px; padding: 0 12px; font-size: 13px; }
}

/* ---- 5. 홈 도면 --------------------------------------------------------------- */
/* 구역 탭(한 줄) + 도면 위 핀 + 패널(실캡처 1 · 한 줄 · 버튼 1). 도면 아래 칩 줄은 없다. */
.va-map { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cm-card-gap); }
.va-seg {
  display: flex; gap: 4px; width: -moz-fit-content; width: fit-content; max-width: 100%; margin-inline: auto; padding: 4px;
  border-radius: var(--cm-r-chip); background: var(--cm-fill);
}
.va-seg__btn {
  -webkit-appearance: none; appearance: none; flex: none; border: 0; cursor: pointer;
  min-height: 40px; padding: 0 16px; border-radius: var(--cm-r-chip); background: transparent;
  color: var(--cm-ink-3); font: 500 15px/1 var(--min-font-body); white-space: nowrap;
  transition: background-color var(--cm-t-fast) ease, color var(--cm-t-fast) ease, transform var(--cm-t-press) var(--cm-ease-out);
  -webkit-tap-highlight-color: transparent;
}
.va-seg__btn[aria-pressed="true"] { background: #fff; color: var(--cm-ink); box-shadow: var(--cm-shadow-1); }
.va-seg__btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .va-seg__btn:not([aria-pressed="true"]):hover { color: var(--cm-ink); } }

.va-map__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cm-card-gap); align-items: stretch; }
.va-map__plane {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-2);
}
.va-map__layer { position: relative; }
.va-map__layer > img { display: block; width: 100%; height: auto; }

.va-pin {
  -webkit-appearance: none; appearance: none; position: absolute; left: var(--x); top: var(--y); z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: opacity var(--cm-t-fast) ease, transform var(--cm-t-press) var(--cm-ease-out);
}
.va-pin > i {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--cm-ink); box-shadow: 0 2px 8px rgba(23, 92, 211, 0.22);
  font: 700 13px/1 var(--min-font-body); font-style: normal; font-variant-numeric: tabular-nums;
  transition: background-color var(--cm-t-fast) ease, color var(--cm-t-fast) ease, transform var(--cm-t-pop) var(--cm-ease-spring);
}
.va-pin[aria-pressed="true"] { z-index: 3; }
.va-pin[aria-pressed="true"] > i { background: var(--cm-brand); color: #fff; transform: scale(1.14); }
.va-pin[data-dim] { opacity: 0.3; }
.va-pin:active { transform: scale(0.97); }
.va-pin__lab {
  position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%); pointer-events: none;
  padding: 7px 12px; border-radius: var(--cm-r-chip); background: #fff; box-shadow: var(--cm-shadow-3);
  color: var(--cm-ink); font: 500 13px/1 var(--min-font-body); white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity var(--cm-t-fast) ease, visibility 0s linear var(--cm-t-fast);
}
.va-pin[data-edge="l"] .va-pin__lab { left: 8px; transform: none; }
.va-pin[data-edge="r"] .va-pin__lab { left: auto; right: 8px; transform: none; }
.va-pin[data-v="t"] .va-pin__lab { top: auto; bottom: calc(100% - 4px); }
.va-pin[aria-pressed="true"] .va-pin__lab,
.va-pin:focus-visible .va-pin__lab { opacity: 1; visibility: visible; transition: opacity var(--cm-t-fast) ease, visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .va-pin:hover { z-index: 4; }
  .va-pin:hover .va-pin__lab { opacity: 1; visibility: visible; transition: opacity var(--cm-t-fast) ease, visibility 0s; }
  .va-pin:hover > i { transform: scale(1.14); }
}

.va-map__panel {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-2);
}
.va-cap { display: flex; flex-direction: column; height: 100%; margin: 0; }
.va-cap[hidden] { display: none; }
.va-cap__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #fff; }
.va-cap__media > img, .va-cap__media > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 0%); }
.va-cap__media--contain > img { object-fit: contain; object-position: 50% 50%; }
.va-cap > figcaption { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.va-cap > figcaption .cm-btn { width: 100%; margin-top: auto; }
.va-cap > figcaption:only-child { justify-content: center; }   /* 그림이 없는 패널 */
.va-cap > figcaption:only-child .cm-btn { margin-top: 0; }
.va-map[data-ready] .va-cap:not([hidden]) { animation: va-rise var(--cm-t-rise) var(--cm-ease-out) backwards; }
@keyframes va-rise { from { opacity: 0; transform: translateY(10px); } }

@media (min-width: 960px) {
  .va-map__body { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
  /* 패널 높이는 도면을 따른다(핀을 바꿔도 줄이 밀리지 않는다). 그림이 남는 높이를 채운다 */
  .va-map__panel { min-height: 320px; }
  .va-cap { position: absolute; inset: 0; height: auto; }
  .va-cap__media { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
  .va-cap > figcaption { flex: none; }
}
@media (max-width: 959px) {
  .va-pin__lab { display: none; }   /* 좁은 화면은 패널이 이름을 말한다 */
  .va-cap__media { aspect-ratio: 2 / 1; }
  .va-cap > figcaption { padding: 16px; gap: 14px; }
}
/* 좁은 화면: 구역 탭은 두 줄 칩으로, 도면은 옆으로 미는 줄(.min-rail)로. 핀이 눌리는 크기(44px)를 지킨다 */
@media (max-width: 860px) {
  .va-seg { flex-wrap: wrap; justify-content: center; gap: 8px; width: auto; padding: 0; background: transparent; }
  .va-seg__btn { background: var(--cm-fill); color: var(--cm-ink-2); font-size: 14px; }
  .va-seg__btn[aria-pressed="true"] { background: var(--cm-brand-tint); color: var(--cm-brand); box-shadow: none; }
  .va-map__plane.min-rail { gap: 0; padding-bottom: 20px; overflow-y: hidden; scroll-snap-type: none; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .va-map__plane.min-rail > .va-map__layer {
    flex: 0 0 max(640px, 100%); overflow: hidden; scroll-snap-align: none;
    background: #fff; border: 1px solid var(--cm-line); border-radius: var(--cm-r-card); box-shadow: var(--cm-shadow-1);
  }
}

/* ---- 감속 · 대비 설정 ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .va-map[data-ready] .va-cap:not([hidden]) { animation: none; }
  .va-pin, .va-pin > i, .va-pin__lab, .va-seg__btn { transition: none; }
  .va-pin:active, .va-seg__btn:active { transform: none; }
  .va-pin[aria-pressed="true"] > i, .va-pin:hover > i { transform: none; }
}
@media (prefers-contrast: more) {
  .va-stage, .va-pick, .va-map__plane, .va-map__panel, .va-inset { border-color: var(--cm-grey-500); box-shadow: none; }
  .va-stage { background: #fff; }
  .va-pin > i { box-shadow: 0 0 0 2px var(--cm-ink); }
}