@charset "utf-8";

/* ============================================================
   회사소개 › 비전과 철학
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:250

   모든 치수는 calc(N * var(--u)). N 은 시안(1920) 원값 그대로다.
   --u 는 /gnb/gnb.css 가, 히어로는 /css/page-hero.css 가 맡는다.

   시안은 절대좌표로 그려져 있지만 여기서는 격자와 흐름으로 옮긴다 —
   카드가 늘거나 줄어도 무너지지 않아야 하기 때문이다.
   대신 시안 좌표에서 뽑은 '간격' 을 그대로 쓴다.

   큰 제목과 히어로는 시안보다 한 단 낮췄다. 시안 값을 그대로 옮기면
   표지가 첫 화면을 다 먹어서 정작 봐야 할 내용이 스크롤 밖으로 밀린다.
   줄인 곳마다 시안 원값을 괄호로 남겼다.
   ============================================================ */

html {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
body.page {
  background: var(--color-white);
  color: var(--color-ink);
  overflow-x: clip;
}

.vis-page {
  /* 시안 변수 그대로다. --color #135a9c / --black #222 / --gray #9f9f9f */
  --vis-point: #135a9c;
  --vis-ink:   #222;
  --vis-soft:  #f7f7f7;    /* 카드 바탕 */
  --vis-panel: #f6f6f6;    /* 품질 목표 판 */
  --vis-track: #e2e2e2;    /* 캐러셀 진행바 바탕 (시안 Line 38) */

  --grid-w: 1400;   /* 시안 260~1660 */
  --gutter: 40;

  /* 카드 사이 간격은 시안 어디서나 40 이다 */
  --gap: 40;

  /* 올렸을 때의 세기는 카드 종류가 달라도 같다.
     이미지가 있는 카드만 줌인이 하나 더 붙는다 */
  --lift: 8px;
  --lift-dur: .35s;
  --zoom-dur: .6s;
  --line-dur: .4s;
}

/* ==================== 섹션 공통 ==================== */
.vis-section {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}
/* 시안 섹션 간격은 142~241 로 들쭉날쭉하다. 하나로 맞추고 한 단 좁힌다 */
.vis-section + .vis-section { margin-top: calc(120 * var(--u)); }
.page-hero + .vis-section { margin-top: calc(80 * var(--u)); }
/* 마지막 섹션과 푸터 사이 (시안 230) */
main { padding-bottom: calc(140 * var(--u)); }

.vis-eyebrow {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(25 * var(--u));
  line-height: 1.4;
  letter-spacing: -.03em;
  color: var(--vis-point);
}

.vis-title {
  margin: calc(16 * var(--u)) 0 0;
  font-weight: 600;
  font-size: calc(42 * var(--u));    /* 시안 50 */
  line-height: 1.32;                 /* 시안 65/50 */
  letter-spacing: -.05em;            /* -2.5 / 50 */
  color: #000;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.vis-lead {
  margin: calc(28 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 15px);   /* 시안 25 */
  line-height: 1.5;                            /* 시안 35/25 */
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 가운데 정렬 머리 (품질 정책) */
.vis-head--center { text-align: center; }

/* ==================== 카드 공통 ====================
   종류가 달라도 올렸을 때의 세기는 같다 (요청: 일관성).
     · 8px 떠오르고 그림자가 진해진다        0.35s
     · 아래에서 코발트 선이 왼→오 로 그어진다  0.4s
     · 이미지가 있으면 1.06 배로 줌인          0.6s
   시안에 눌린/올린 상태가 있는 카드(VISION · SECURITY)는 그 색을 우선한다.
*/
.vis-card {
  position: relative;
  overflow: hidden;                  /* 줌인이 카드 밖으로 나가지 않게 */
  border-radius: calc(25 * var(--u));
  background: var(--vis-soft);
  transition: transform var(--lift-dur) ease,
              box-shadow var(--lift-dur) ease,
              background-color var(--lift-dur) ease;
}

/* 아래쪽 코발트 선 — 왼쪽에서 오른쪽으로 그어진다 */
.vis-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(4 * var(--u));
  background: var(--vis-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--line-dur) ease;
  pointer-events: none;
}

.vis-card:hover,
.vis-card:focus-within {
  transform: translateY(calc(var(--lift) * -1));
  box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(17, 20, 24, .16);
}
.vis-card:hover::after,
.vis-card:focus-within::after { transform: scaleX(1); }

/* 제목은 코발트로 (시안에 색이 정해진 카드는 아래에서 덮어쓴다) */
.vis-card__title { transition: color var(--lift-dur) ease; }
.vis-card:hover .vis-card__title,
.vis-card:focus-within .vis-card__title { color: var(--vis-point); }

/* 이미지가 든 카드만 줌인 */
.vis-card__media {
  position: relative;
  overflow: hidden;
  background: #dfe3e8;               /* 파일이 없어도 자리와 바탕색이 남는다 */
}
.vis-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--zoom-dur) ease;
}
.vis-card:hover .vis-card__media img,
.vis-card:focus-within .vis-card__media img { transform: scale(1.06); }

/* 카드가 링크가 되면 화살표가 오른쪽으로 밀린다 */
.vis-card__arrow { transition: transform var(--lift-dur) ease; }
.vis-card:hover .vis-card__arrow,
.vis-card:focus-within .vis-card__arrow { transform: translateX(4px); }

/* ==================== 1. VISION ==================== */
/* 시안 2048:417 — 440 × 250 라운드 25 카드 셋 (260 · 740 · 1220) */
.vis-value {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(60 * var(--u));    /* 시안 설명(1243) → 카드(1406) */
}

.vis-value__card {
  min-height: calc(230 * var(--u));   /* 시안 250 */
  padding: calc(58 * var(--u)) calc(55 * var(--u));   /* 시안 60 */
}

.vis-value__head {
  display: flex;
  align-items: baseline;
  gap: calc(16 * var(--u));
  flex-wrap: wrap;
}
.vis-value__name {
  margin: 0;
  font-weight: 600;
  font-size: calc(28 * var(--u));     /* 시안 30 */
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--vis-ink);
}
.vis-value__en {
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: calc(17 * var(--u));
  letter-spacing: -.03em;
  color: var(--vis-point);
  transition: color var(--lift-dur) ease;
}
.vis-value__desc {
  margin: calc(22 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.55;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  overflow-wrap: break-word;
  transition: color var(--lift-dur) ease;
}

/* 시안 2048:437 — 올린 카드는 판 전체가 코발트로 바뀌고 글자가 희어진다 */
.vis-value__card:hover,
.vis-value__card:focus-within { background: var(--vis-point); }
.vis-value__card:hover .vis-card__title,
.vis-value__card:focus-within .vis-card__title,
.vis-value__card:hover .vis-value__en,
.vis-value__card:focus-within .vis-value__en,
.vis-value__card:hover .vis-value__desc,
.vis-value__card:focus-within .vis-value__desc { color: var(--color-white); }
/* 코발트 판 위에서는 코발트 선이 보이지 않는다 */
.vis-value__card::after { background: var(--color-white); }

/* ==================== 2. QUALITY POLICY ==================== */
/* 시안 2048:393 — 680 + 320 + 320, 높이 370 */
/*
  세 장이 폭을 나눠 갖는다. 마우스를 올린 장이 열리고 나머지는 닫힌다.
  시안의 기본 모습(680 : 320 : 320)이 곧 '첫 장이 열린 상태' 다.

  폭은 flex-grow 로 준다. 너비를 직접 바꾸면 셋을 합한 값이 매번 달라져
  오른쪽 끝이 흔들리는데, 비율로 나누면 총 폭이 늘 같다.
*/
.vis-policy {
  display: flex;
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(70 * var(--u));
}
/*
  열림 정도를 --open (0 = 닫힘, 1 = 열림) 하나로 두고
  폭·밝기·이미지·글을 모두 거기서 끌어다 쓴다.
  상태를 정하는 규칙은 아래 넉 줄이 전부다 — 나머지는 계산이다.
*/
.vis-policy__card { --open: 0; }
.vis-policy__card--wide { --open: 1; }                 /* 아무 데도 안 올렸을 때 (시안 기본) */
.vis-policy:hover > .vis-policy__card,
.vis-policy:focus-within > .vis-policy__card { --open: 0; }   /* 줄에 들어오면 일단 모두 닫고 */
.vis-policy > .vis-policy__card:hover,
.vis-policy > .vis-policy__card:focus-within { --open: 1; }   /* 올라간 장만 연다 */

/*
  한 번에 같은 속도로 움직이면 판이 '툭' 벌어지는 느낌이 난다.
  세 가지를 조금씩 다른 시간으로 어긋나게 둔다.
    폭    0.7s   — 가장 크게 움직이니 가장 느리게
    밝기  0.5s   — 폭보다 먼저 자리를 잡아 시선을 끌어 준다
    사진  0.95s  — 폭을 뒤따라오며 천천히 멎는다 (무게감)
*/
.vis-policy__card {
  flex: 0 1 0;
  flex-grow: calc(320 + 360 * var(--open));
  min-width: 0;
  height: calc(340 * var(--u));       /* 시안 370 */
  border-radius: calc(30 * var(--u));
  transition: flex-grow .7s cubic-bezier(.22, .61, .36, 1),
              transform .45s cubic-bezier(.22, .61, .36, 1),
              box-shadow .45s ease;
}

/* 닫힌 장은 한 걸음 물러난다. 열린 장만 제 밝기로 돌아온다 */
.vis-policy__card .vis-card__media img {
  filter: brightness(calc(.8 + .2 * var(--open)));
  /* 좁아지면 사진이 가로로 잘리므로 살짝 키워 둔다. 열리면 제자리로 */
  transform: scale(calc(1.08 - .08 * var(--open)));
  transition: transform .95s cubic-bezier(.22, .61, .36, 1),
              filter .5s ease;
}
/* 이 줄에서는 공통 줌인을 쓰지 않는다 — 위 계산이 대신한다 */
.vis-policy__card:hover .vis-card__media img,
.vis-policy__card:focus-within .vis-card__media img { transform: scale(1); }
.vis-policy__card .vis-card__media { position: absolute; inset: 0; }

/* 글 뒤에 깔리는 어둠 (시안 2048:409 검정 45%). 세 장 모두 글을 가지므로(2026-09 확정 카피)
   열린 장에서만 깔리고 닫힌 장에서는 걷힌다 — 닫힌 장은 brightness 로만 살짝 어둡다 */
.vis-policy__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  opacity: var(--open);
  transition: opacity .5s ease;
}
/* 글은 그 장이 열려 있을 때만 보인다.
   닫히면 폭이 320 이라 두 줄이 뭉개진다 */
.vis-policy__copy {
  position: absolute;
  left: calc(60 * var(--u));
  right: calc(60 * var(--u));
  bottom: calc(60 * var(--u));
  color: var(--color-white);
  /* 열림 정도를 그대로 받는다. 닫힐 때는 아래로 조금 가라앉는다 */
  opacity: var(--open);
  transform: translateY(calc(12px * (1 - var(--open))));
  transition: opacity .4s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
/*
  글은 판이 어느 정도 벌어진 뒤에 들어온다 (0.22s 늦게).
  닫힐 때는 기다리지 않고 곧바로 사라진다 — 좁아진 판에 글이 남아 있으면 뭉개진다.
*/
.vis-policy__card--wide .vis-policy__copy { transition-delay: .22s; }
.vis-policy:hover > .vis-policy__card .vis-policy__copy,
.vis-policy:focus-within > .vis-policy__card .vis-policy__copy { transition-delay: 0s; }
.vis-policy > .vis-policy__card:hover .vis-policy__copy,
.vis-policy > .vis-policy__card:focus-within .vis-policy__copy { transition-delay: .22s; }
/* 01 · 02 · 03 — 확정 카피의 번호. 제목 위에 작게 */
.vis-policy__no {
  margin: 0 0 calc(10 * var(--u));
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(16 * var(--u));
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .7);
}
.vis-policy__name {
  margin: 0;
  font-weight: 700;
  font-size: calc(32 * var(--u));     /* 시안 35 */
  line-height: 1.3;
  letter-spacing: -.05em;
  /* 흰 글씨는 코발트로 바꾸면 오히려 안 보인다. 이 카드만 색을 유지한다 */
  color: var(--color-white);
}
.vis-policy__desc {
  margin: calc(13 * var(--u)) 0 0;    /* 시안 gap 13 */
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--color-white);
  word-break: keep-all;
}
.vis-policy__card:hover .vis-card__title,
.vis-policy__card:focus-within .vis-card__title { color: var(--color-white); }

/* ==================== 3. 품질 목표 ==================== */
/* 시안 2048:356 — #f6f6f6 판 1400 × 930 라운드 35 */
.vis-goal {
  padding: calc(110 * var(--u)) calc(78 * var(--u)) calc(120 * var(--u));
  border-radius: calc(35 * var(--u));
  background: var(--vis-panel);
}
/* 시안 2048:392 — 제목 뒤에 붙는 10px 점 */
.vis-goal__title::after {
  content: "";
  display: inline-block;
  width: calc(10 * var(--u));
  height: calc(10 * var(--u));
  margin-left: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--vis-point);
  vertical-align: baseline;
}
.vis-goal__lead { color: #848484; }   /* 시안 2048:390 */

.vis-goal__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(64 * var(--u));
}
/* 이 카드는 바탕이 없다 — 이미지와 글만 놓인다 */
.vis-goal__card {
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
/*
  바탕이 없는 카드에 공통 그림자를 그대로 주면,
  이미지와 글을 함께 감싼 각진 사각형이 떠올라 테두리처럼 보인다.
  그림자는 둥근 이미지에만 준다.
*/
.vis-goal__card:hover,
.vis-goal__card:focus-within { box-shadow: none; }
.vis-goal__card .vis-card__media {
  height: calc(230 * var(--u));       /* 시안 250 */
  border-radius: calc(25 * var(--u));
  transition: box-shadow var(--lift-dur) ease;
}
.vis-goal__card:hover .vis-card__media,
.vis-goal__card:focus-within .vis-card__media {
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(17, 20, 24, .18);
}
.vis-goal__card::after { bottom: auto; top: calc(230 * var(--u)); }
.vis-goal__name {
  margin: calc(30 * var(--u)) 0 0;
  font-weight: 600;
  font-size: calc(24 * var(--u));     /* 시안 25 */
  line-height: 1.3;
  letter-spacing: -.05em;
  color: var(--vis-ink);
}
.vis-goal__desc {
  margin: calc(14 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.55;                  /* 시안 30/20 */
  letter-spacing: -.04em;
  color: var(--gray);
  word-break: keep-all;
}

/* ==================== 4. 소방 (캐러셀) ==================== */
/* 시안 2048:323 — 가운데 920 × 450, 좌우로 200 씩 엿보인다 */
.vis-safety__title .is-point { color: var(--vis-point); }
.vis-safety__title .is-mute  { color: var(--gray); }
.vis-safety__title .is-ink   { color: var(--vis-ink); }

.vis-safety__stage {
  margin-top: calc(60 * var(--u));
  /* 화면 끝까지 흐르게 두지 않는다 — 컨테이너 안에서만 넘긴다 */
  overflow: hidden;
}
.vis-safety__track {
  display: flex;
  gap: calc(var(--gap) * var(--u));
  transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}
.vis-safety__slide {
  flex: 0 0 calc(920 * var(--u));
  height: calc(420 * var(--u));        /* 시안 450 */
  border-radius: calc(30 * var(--u));
}
.vis-safety__slide .vis-card__media { position: absolute; inset: 0; }
/* 시안 2048:338 — 아래로 갈수록 어두워진다 (55% 부터 90% 까지) */
.vis-safety__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0) 55%,
    rgba(0, 0, 0, .9) 90%);
}
.vis-safety__copy {
  position: absolute;
  left: calc(50 * var(--u));
  right: calc(50 * var(--u));
  bottom: calc(42 * var(--u));
  color: var(--color-white);
}
.vis-safety__name {
  margin: 0;
  font-weight: 700;
  font-size: calc(24 * var(--u));      /* 시안 25 */
  letter-spacing: -.05em;
  color: var(--color-white);
}
.vis-safety__desc {
  margin: calc(10 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  letter-spacing: -.03em;
  color: var(--color-white);
  word-break: keep-all;
}
.vis-safety__slide:hover .vis-card__title,
.vis-safety__slide:focus-within .vis-card__title { color: var(--color-white); }

/* ---------- 조작 줄 ---------- */
.vis-safety__bar {
  display: flex;
  align-items: center;
  gap: calc(40 * var(--u));
  margin-top: calc(76 * var(--u));
}
.vis-safety__nav {
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vis-safety__nav:disabled { opacity: .25; cursor: default; }
.vis-safety__nav:focus-visible { outline: 2px solid var(--vis-point); outline-offset: 4px; }
/* 시안은 둥근 막대 두 개를 45도로 겹쳐 화살표를 만든다 */
.vis-safety__nav::before {
  content: "";
  display: block;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin: 0 auto;
  border-left: calc(5 * var(--u)) solid var(--vis-ink);
  border-bottom: calc(5 * var(--u)) solid var(--vis-ink);
  border-radius: calc(2 * var(--u));
  transform: rotate(45deg);
}
.vis-safety__nav--next::before { transform: rotate(-135deg); }

/* 시안 Line 38(920 × 3 #e2e2e2) 위에 Line 39(120 × 3 #135a9c) 가 얹힌다 */
.vis-safety__progress {
  position: relative;
  flex: 1 1 auto;
  height: calc(3 * var(--u));
  background: var(--vis-track);
}
.vis-safety__thumb {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--vis-point);
  transition: transform .5s cubic-bezier(.33, 1, .68, 1);
}

/* ==================== 5. SECURITY SYSTEM ==================== */
/* 시안 2048:273 — 440 × 530 라운드 35 카드 셋, 이미지는 카드 아래 150 */
.vis-sec__title {
  font-size: calc(62 * var(--u));      /* 시안 85 */
  line-height: 1.18;                   /* 시안 100/85 */
}
.vis-sec__lead { font-size: max(calc(30 * var(--u)), 15px); }   /* 시안 35 */

/* 표시등(.vis-sec__dots, 시안 2048:316)은 2026-09-11 뺐다 — 동작하지 않는 장식이었다 */

.vis-sec__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(60 * var(--u));
}
.vis-sec__card {
  display: flex;
  flex-direction: column;
  /* 시안은 530 고정이었지만 확정 문구가 짧아 아래가 비었다 → 높이는 글이 정하고, 셋은 그리드가 같은 높이로 맞춘다 (2026-09-11) */
  min-height: 0;
  border-radius: calc(35 * var(--u));
}
/* 아래 150 은 사진 자리다. 글이 그 위로 내려오지 않도록 그만큼 비워 둔다.
   글은 사진 위 남은 공간의 세로 가운데에 놓는다 — 위에 붙여 두면 짧은 글 아래가 비어 보였다 (2026-09-11) */
.vis-sec__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  padding: calc(40 * var(--u)) calc(50 * var(--u)) calc(160 * var(--u));
  transition: padding-bottom var(--lift-dur) ease;
}
/* 올리면 사진이 카드 전체로 퍼져 아래 사진 자리가 필요 없다 → 아래 여백도 위와 같게 해서 글이 카드 한가운데로 온다 (2026-09-11) */
.vis-sec__card:hover .vis-sec__body,
.vis-sec__card:focus-within .vis-sec__body { padding-bottom: calc(40 * var(--u)); }
.vis-sec__en {
  margin: 0;
  font-family: "Open Sans", var(--font-base);
  font-weight: 700;
  font-size: calc(17 * var(--u));
  letter-spacing: -.03em;
  color: var(--vis-point);
  transition: color var(--lift-dur) ease;
}
.vis-sec__name {
  margin: calc(8 * var(--u)) 0 0;
  font-weight: 600;
  font-size: calc(28 * var(--u));      /* 시안 30 */
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--vis-ink);
}
.vis-sec__desc {
  margin: calc(30 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);
  line-height: 1.55;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  transition: color var(--lift-dur) ease;
}
.vis-sec__desc p { margin: 0; }
.vis-sec__desc p + p { margin-top: calc(24 * var(--u)); }

/* 이미지는 카드 아래쪽 150 을 차지한다 (시안 마스크 440 × 150) */
.vis-sec__card .vis-card__media {
  flex: none;
  height: calc(150 * var(--u));
}
/*
  시안 2048:303 — 올리면 이미지가 카드 전체로 퍼지고 검정 65% 가 덮인다.
  높이를 바꾸면 카드가 흔들리므로, 이미지 칸을 카드 전체에 겹쳐 놓고
  평소에는 아래 150 만 보이도록 잘라 둔다.
*/
.vis-sec__card .vis-card__media {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(150 * var(--u));
  transition: height var(--lift-dur) ease;
}
.vis-sec__card:hover .vis-card__media,
.vis-sec__card:focus-within .vis-card__media { height: 100%; }

.vis-sec__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  opacity: 0;
  transition: opacity var(--lift-dur) ease;
}
.vis-sec__card:hover .vis-sec__shade,
.vis-sec__card:focus-within .vis-sec__shade { opacity: 1; }

.vis-sec__card:hover .vis-sec__en,
.vis-sec__card:focus-within .vis-sec__en,
.vis-sec__card:hover .vis-card__title,
.vis-sec__card:focus-within .vis-card__title,
.vis-sec__card:hover .vis-sec__desc,
.vis-sec__card:focus-within .vis-sec__desc { color: var(--color-white); }

/* ==================== 등장 ====================
   섹션 머리가 먼저 뜨고, 이어서 카드가 격자 순서대로 나온다.
   --d 는 그 줄에서 몇 번째인지다 (js/page-vision.js 가 넣는다) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 카드는 살짝 작게 시작해 제자리 크기로 온다 */
.js .vis-card[data-reveal] {
  transform: translateY(28px) scale(.96);
  transition-delay: calc(var(--d, 0) * .1s);
}
.js .vis-card[data-reveal].is-in { transform: none; }
/* 등장이 끝나면 올렸을 때의 움직임이 다시 걸려야 한다 */
.js .vis-card[data-reveal].is-in:hover,
.js .vis-card[data-reveal].is-in:focus-within {
  transform: translateY(calc(var(--lift) * -1));
  transition-delay: 0s;
}

/* ==================== 좁은 화면 (≤768) ==================== */
@media (max-width: 768px) {
  .vis-page { --gutter: 16; --gap: 16; }

  .page-hero + .vis-section { margin-top: var(--sp-section); }
  .vis-section + .vis-section { margin-top: var(--sp-section); }
  .vis-eyebrow { font-size: calc(15 * var(--u)); }
  .vis-title   { font-size: calc(26 * var(--u)); line-height: 1.36; margin-top: calc(10 * var(--u)); }
  .vis-lead    { margin-top: calc(14 * var(--u)); font-size: max(calc(15 * var(--u)), 14px); line-height: 1.7; }
  .vis-lead .br-pc { display: none; }   /* PC 줄바꿈은 모바일에서 어색한 자리에 끊긴다 (2026-09-20) */

  /* 한 줄에 한 장씩 쌓는다 */
  .vis-value,
  .vis-policy,
  .vis-goal__list,
  .vis-sec__list {
    grid-template-columns: 1fr;
    margin-top: var(--sp-head);
  }
  .vis-value__card { min-height: 0; padding: calc(22 * var(--u)); }
  .vis-value__name { font-size: calc(20 * var(--u)); }
  .vis-value__en   { font-size: calc(12 * var(--u)); }
  .vis-value__desc { margin-top: calc(10 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }

  /* 열고 닫을 폭이 없다. 세로로 쌓고 모두 '열린' 상태로 둔다 */
  .vis-policy { flex-direction: column; }
  .vis-policy__card,
  .vis-policy__card--wide,
  .vis-policy:hover > .vis-policy__card,
  .vis-policy > .vis-policy__card:hover { --open: 1; flex: none; }

  .vis-policy__card { height: calc(200 * var(--u)); border-radius: calc(16 * var(--u)); }
  .vis-policy__copy { left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(20 * var(--u)); }
  .vis-policy__name { font-size: calc(20 * var(--u)); }
  .vis-policy__desc { font-size: max(calc(14 * var(--u)), 13px); }

  .vis-goal {
    padding: calc(28 * var(--u)) calc(16 * var(--u)) calc(32 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  /* 품질 목표는 넉 장이라 두 칸이 낫다 — 한 칸이면 세로로 너무 길어진다 */
  .vis-goal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vis-goal__card .vis-card__media { height: calc(120 * var(--u)); border-radius: calc(12 * var(--u)); }
  .vis-goal__card::after { top: calc(120 * var(--u)); }
  .vis-goal__name { margin-top: calc(12 * var(--u)); font-size: calc(17 * var(--u)); }
  .vis-goal__desc { margin-top: calc(6 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); }

  .vis-safety__stage { margin-top: var(--sp-head); }
  .vis-safety__slide {
    flex-basis: calc(100% - 40 * var(--u));   /* 옆 장이 살짝 보이게 */
    height: calc(200 * var(--u));
    border-radius: calc(16 * var(--u));
  }
  .vis-safety__copy { left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: calc(16 * var(--u)); }
  .vis-safety__name { font-size: calc(17 * var(--u)); }
  .vis-safety__desc { font-size: max(calc(13 * var(--u)), 12px); }
  .vis-safety__bar { gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u)); }
  .vis-safety__nav { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
  .vis-safety__nav::before {
    width: calc(9 * var(--u)); height: calc(9 * var(--u));
    border-left-width: calc(3 * var(--u)); border-bottom-width: calc(3 * var(--u));
  }

  .vis-sec__title { font-size: calc(28 * var(--u)); line-height: 1.3; }
  .vis-sec__lead  { font-size: max(calc(15 * var(--u)), 14px); }
  .vis-sec__card  { border-radius: calc(16 * var(--u)); }
  .vis-sec__body  { padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(122 * var(--u)); }
  .vis-sec__en    { font-size: calc(12 * var(--u)); }
  .vis-sec__name  { font-size: calc(20 * var(--u)); }
  .vis-sec__desc  { margin-top: calc(14 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  .vis-sec__desc p + p { margin-top: calc(12 * var(--u)); }
  .vis-sec__card .vis-card__media { height: calc(110 * var(--u)); }

  /*
    올렸을 때의 효과는 끈다.
    터치 화면에서는 한 번 누른 카드에 hover 가 눌어붙어 그 상태로 남는다.
    등장 애니메이션만 남긴다.
  */
  .vis-card:hover,
  .vis-card:focus-within {
    transform: none;
    box-shadow: none;
    background: var(--vis-soft);
  }
  .vis-card:hover::after,
  .vis-card:focus-within::after { transform: scaleX(0); }
  .vis-card:hover .vis-card__media img,
  .vis-card:focus-within .vis-card__media img { transform: none; }
  .vis-card:hover .vis-card__title,
  .vis-card:focus-within .vis-card__title { color: var(--vis-ink); }
  .vis-value__card:hover .vis-value__en,
  .vis-value__card:focus-within .vis-value__en,
  .vis-sec__card:hover .vis-sec__en,
  .vis-sec__card:focus-within .vis-sec__en { color: var(--vis-point); }
  .vis-value__card:hover .vis-value__desc,
  .vis-value__card:focus-within .vis-value__desc,
  .vis-sec__card:hover .vis-sec__desc,
  .vis-sec__card:focus-within .vis-sec__desc { color: var(--gray); }
  .vis-sec__card:hover .vis-card__media,
  .vis-sec__card:focus-within .vis-card__media { height: calc(110 * var(--u)); }
  .vis-sec__card:hover .vis-sec__shade,
  .vis-sec__card:focus-within .vis-sec__shade { opacity: 0; }
  .vis-sec__card:hover .vis-sec__body,
  .vis-sec__card:focus-within .vis-sec__body { padding-bottom: calc(122 * var(--u)); }
  .vis-goal__card:hover, .vis-goal__card:focus-within { background: transparent; }
  .vis-policy__card:hover .vis-card__title,
  .vis-policy__card:focus-within .vis-card__title,
  .vis-safety__slide:hover .vis-card__title,
  .vis-safety__slide:focus-within .vis-card__title { color: var(--color-white); }
  .js .vis-card[data-reveal].is-in:hover,
  .js .vis-card[data-reveal].is-in:focus-within { transform: none; }

  /* ============================================================
     대신 '화면 한가운데 온 카드' 가 켜진다

     터치 화면에는 마우스를 올린다는 개념이 없어서, hover 를 그냥 꺼 두면
     스크롤하는 내내 아무 일도 일어나지 않는다.
     시안이 정해 둔 올린 모습(코발트 판 · 사진 전면)을 그대로 쓰되,
     켜는 조건만 '가운데에 왔는가' 로 바꾼다.
     .is-focus 는 js/page-vision.js 가 붙인다.
     ============================================================ */
  .vis-card.is-focus {
    transform: translateY(-4px);
    box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(17, 20, 24, .14);
  }
  .vis-card.is-focus::after { transform: scaleX(1); }
  .vis-card.is-focus .vis-card__media img { transform: scale(1.06); }
  .vis-card.is-focus .vis-card__title { color: var(--vis-point); }

  /* 시안 2048:437 — 판 전체가 코발트로 */
  .vis-value__card.is-focus { background: var(--vis-point); }
  .vis-value__card.is-focus .vis-value__name,
  .vis-value__card.is-focus .vis-value__en,
  .vis-value__card.is-focus .vis-value__desc { color: var(--color-white); }

  /* 시안 2048:303 — 사진이 카드 전체로 퍼지고 어두워진다 */
  .vis-sec__card.is-focus .vis-card__media { height: 100%; }
  .vis-sec__card.is-focus .vis-sec__shade { opacity: 1; }
  .vis-sec__card.is-focus .vis-sec__body { padding-bottom: calc(22 * var(--u)); }   /* 사진이 전면이면 위아래 여백을 같게 */
  .vis-sec__card.is-focus .vis-sec__en,
  .vis-sec__card.is-focus .vis-sec__name,
  .vis-sec__card.is-focus .vis-sec__desc { color: var(--color-white); }

  /* 바탕 없는 카드는 그림자를 둥근 사진에만 (각진 테두리로 보이지 않게) */
  .vis-goal__card.is-focus { box-shadow: none; }
  .vis-goal__card.is-focus .vis-card__media {
    box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) rgba(17, 20, 24, .18);
  }

  /* 흰 글씨 카드는 제목 색을 지킨다 */
  .vis-policy__card.is-focus .vis-card__title,
  .vis-safety__slide.is-focus .vis-card__title { color: var(--color-white); }

  /* 누르는 순간의 반응 — 손끝에 닿았다는 표시 */
  .vis-card:active { transform: scale(.985); transition-duration: .12s; }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  /* 크기 변화와 줌은 없애고 페이드인만 남긴다 */
  .js [data-reveal],
  .js .vis-card[data-reveal] {
    transform: none;
    transition: opacity .5s ease-out;
  }
  .vis-card,
  .vis-card::after,
  .vis-card__media img,
  .vis-safety__track,
  .vis-safety__thumb,
  .vis-sec__card .vis-card__media { transition: none; }
  .vis-card:hover,
  .vis-card:focus-within { transform: none; }
  .vis-card:hover .vis-card__media img,
  .vis-card:focus-within .vis-card__media img { transform: none; }
}

/* 모바일: 마지막 블록 → 푸터 간격을 공통 단계(--sp-section, style.css)로 맞춘다.
   데스크톱 값(시안 기준)을 그대로 두면 좁은 화면에서 푸터 위가 비어 보인다 */
@media (max-width: 768px) {
  main { padding-bottom: var(--sp-section); }
}