@charset "utf-8";

/* ============================================================
   정보센터 › 인재상 · 복리후생
   시안: Figma 3gC6DdCllqkGj4ATOQ8mMI  node 2048:1203

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

   구성
     SPCI 인재상  키워드 카드 셋 (440 × 180) + 설명 판 (1400 × 180)
     인사 원칙    카드 셋 (440 × 440)
     복리후생     카드 여덟 (320 × 390, 네 칸 두 줄)
   ============================================================ */

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

.wel-page {
  --wel-point: #135a9c;      /* 시안 --color */
  --wel-ink:   #222;         /* 시안 --black */
  --wel-soft:  #f8f8f8;      /* 판·카드 바탕 */
  --wel-line:  #d4d4d4;      /* 인재상 카드 테두리 */

  --grid-w: 1400;            /* 시안 260~1660 */
  --gutter: 40;
  --gap: 40;                 /* 시안 카드 간격은 어디서나 40 */
}

.wel-wrap {
  width: min(calc(var(--grid-w) * var(--u)), calc(100% - var(--gutter) * var(--u) * 2));
  margin: 0 auto;
}

/* ==================== 섹션 머리 ==================== */
.wel-sec + .wel-sec { margin-top: calc(150 * var(--u)); }
.sub-tabs + .wel-sec { margin-top: calc(110 * var(--u)); }

.wel-sec__title {
  margin: 0;
  font-weight: 600;
  font-size: calc(42 * var(--u));     /* 시안 50 */
  line-height: 1.3;
  letter-spacing: -.05em;             /* -2.5 / 50 */
  color: #000;
}
/* 시안에서 'SPCI 인재상' 은 영문만 한 단 크다 (55 / 50) */
.wel-sec__title b {
  font-family: "Open Sans", var(--font-base);
  font-weight: 600;
  font-size: 1.1em;
}
/* 시안 Ellipse 65 · 67 — 제목 뒤에 붙는 12 점 */
.wel-sec__title::after {
  content: "";
  display: inline-block;
  width: calc(12 * var(--u));
  height: calc(12 * var(--u));
  margin-left: calc(14 * var(--u));
  border-radius: 50%;
  background: var(--wel-point);
  vertical-align: baseline;
}

.wel-sec__desc {
  margin: calc(22 * 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;
}
/*
  '인사 원칙' 은 설명이 제목 아래가 아니라 오른쪽 옆에 붙는다
  (시안 제목 1912 / 설명 1937 — 같은 줄이다)
*/
.wel-sec__head--inline {
  display: flex;
  align-items: baseline;
  gap: calc(34 * var(--u));
  flex-wrap: wrap;
}
.wel-sec__head--inline .wel-sec__desc { margin-top: 0; }

/* ==================== 1. SPCI 인재상 ====================
   시안 2048:1333 — 440 × 180 카드 셋, 테두리 #d4d4d4.
   시안 2048:1358 이 첫 장의 '켜진' 모습이다: 판 전체가 코발트, 글자는 흰색. */
.wel-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(66 * var(--u));    /* 시안 제목(1164) → 카드(1322) */
}

.wel-key {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(14 * var(--u));           /* 시안 19 (키워드 아래 선이 자리를 조금 먹는다) */
  min-height: calc(180 * var(--u));
  padding: calc(24 * var(--u));
  border: 1px solid var(--wel-line);
  border-radius: calc(20 * var(--u));
  background: var(--color-white);
  overflow: hidden;                   /* 아래 코발트 선이 모서리를 넘지 않게 */
  transition: transform .3s ease, box-shadow .3s ease,
              background-color .3s ease, border-color .3s ease;
}

/* 시안에 없는 것 — 요청받아 더했다. 아래에서 왼→오 로 그어진다 */
.wel-key::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(4 * var(--u));
  background: var(--wel-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease;
}
.wel-key:hover::after,
.wel-key:focus-within::after { transform: scaleX(1); }

.wel-key:hover,
.wel-key:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(19, 90, 156, .22);
  border-color: transparent;
  background: var(--wel-point);
}
/* 코발트 판 위에서는 코발트 선이 보이지 않는다 */
.wel-key:hover::after,
.wel-key:focus-within::after { background: var(--color-white); }

/*
  시안은 키워드 30 / 부제 20 인데, 440 × 180 카드 안에서 두 줄이 가운데 뭉쳐
  카드 면적의 대부분이 빈 채로 남는다 — '덜 채운 상자' 로 읽힌다.
  키워드가 카드를 감당할 크기로 키우고 부제는 한 단 낮춰 위계를 만든다.
  ※ 되돌리려면 키워드 42 → 28, 부제 18 → 20, 아래 ::after 규칙 제거.
*/
.wel-key__word {
  margin: 0;
  font-weight: 700;
  font-size: calc(42 * var(--u));     /* 시안 30 */
  line-height: 1.2;
  letter-spacing: -.04em;
  /* 시안은 쉴 때부터 코발트다. 켜지면 판이 코발트가 되므로 흰색으로 뒤집는다 */
  color: var(--wel-point);
  transition: color .3s ease;
}
/*
  키워드와 부제 사이에 가는 선을 하나 긋는다.
  두 줄이 각자 구역을 갖게 되면서 남는 자리가 '허전함' 이 아니라 '여백' 으로 읽힌다.
  오시는 길 Location 카드가 쓰는 것과 같은 방식이다.
  두께는 1px 로 못 박는다 — --u 로 주면 1440 에서 0.75px 이 되어 흐려진다.
*/
.wel-key__word::after {
  content: "";
  display: block;
  width: calc(48 * var(--u));
  height: 1px;
  margin: calc(16 * var(--u)) auto 0;
  background: var(--wel-point);
  opacity: .35;
  transition: background-color .3s ease, opacity .3s ease;
}
.wel-key:hover .wel-key__word::after,
.wel-key:focus-within .wel-key__word::after {
  background: var(--color-white);
  opacity: .5;
}

.wel-key__sub {
  margin: 0;
  font-weight: 300;
  font-size: max(calc(18 * var(--u)), 14px);   /* 시안 20 */
  letter-spacing: -.03em;
  color: var(--gray);
  transition: color .3s ease;
}
.wel-key:hover .wel-key__word,
.wel-key:focus-within .wel-key__word,
.wel-key:hover .wel-key__sub,
.wel-key:focus-within .wel-key__sub { color: var(--color-white); }

/* 시안 2048:1335 — 카드 아래 설명 판 1400 × 180 */
.wel-keys__note {
  margin-top: calc(30 * var(--u));    /* 시안 1502 → 1532 */
  padding: calc(30 * var(--u)) calc(80 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--wel-soft);
  font-weight: 300;
  font-size: max(calc(23 * var(--u)), 15px);   /* 시안 25 */
  line-height: 1.6;                            /* 시안 40/25 */
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}

/* ==================== 현장 한 장면 ====================
   시안에 없다. '자기개발 · 전문성 · 사회적 책임' 이라는 말 다음에
   그 말을 사는 사람이 나오도록 인재상 끝에 붙였다.

   큰 화면 한 장 + 아래 썸네일 줄.
   썸네일을 누르면 그 사진이 큰 화면으로 올라온다.

   사진을 바꿔 끼우지 않고 넉 장을 겹쳐 두고 투명도만 바꾼다.
   src 를 갈아 끼우면 새로 불러오는 동안 빈 칸이 보이고,
   같은 파일일 때는 load 가 안 걸려 전환이 아예 안 잡힌다.

   사진이 없으면 비율을 지킨 회색 칸이 남아 자리가 무너지지 않는다
   (지도 폴백·브로셔 썸네일이 쓰는 것과 같은 방식이다).
*/
.wel-life { margin-top: calc(60 * var(--u)); }

/*
  썸네일은 아래가 아니라 오른쪽에 세운다.
  아래에 두면 큰 화면(477) + 썸네일 줄(157) 이 세로로 더해져
  블록 하나가 화면 높이의 3분의 2를 먹는다 — 페이지 히어로와 힘이 겹친다.
  옆으로 옮기면 썸네일이 큰 화면 높이 안에 들어가므로 블록이 그만큼 짧아지고,
  큰 화면은 사진에 맞는 비율(16:9)을 그대로 쓸 수 있다.
*/
.wel-life__gallery {
  display: grid;
  grid-template-columns: 1fr calc(280 * var(--u));
  gap: calc(20 * var(--u));
}

/* ---------- 큰 화면 ---------- */
.wel-life__main {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  background: #dfe3e8;
}

.wel-life__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.wel-life__layer.is-on { opacity: 1; }

.wel-life__photo,
.wel-life__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
    칸마다 보여 줄 자리를 다르게 잡는다 (js 가 넣는다).
      --life-pos   어느 지점을 중심에 둘지
      --life-zoom  얼마나 당겨 볼지
    ※ 지금은 넉 장이 같은 파일이라 zoom 으로 구분한다.
      실제 사진 넉 장이 들어오면 zoom 은 1 로 되돌리면 된다.
  */
  transform: scale(var(--life-zoom, 1));
  transform-origin: var(--life-pos, 50% 50%);
  display: block;
}
/* 영상은 재생이 시작된 뒤에 사진 위로 떠오른다 —
   불러오는 동안 검은 칸이 번쩍이지 않는다 */
.wel-life__video {
  opacity: 0;
  transition: opacity .6s ease;
}
.wel-life.is-playing .wel-life__video { opacity: 1; }

/* ---------- 썸네일 ----------
   큰 화면 높이를 넷이 나눠 갖는다. 그래서 비율을 못 박지 않는다 */
.wel-life__thumbs {
  display: grid;
  /* minmax(0, 1fr) 이어야 한다. 그냥 1fr 이면 최소 높이가 '내용 크기' 라
     안에 든 사진의 실제 높이만큼 줄이 벌어져 큰 화면 아래로 넘친다 */
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: calc(14 * var(--u));
}

.wel-life__thumb {
  position: relative;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  background: #dfe3e8;
  cursor: pointer;
  /* 고른 것이 또렷하고 나머지는 한 걸음 물러난다 */
  opacity: .55;
  transition: opacity .3s ease, transform .3s ease;
}
/*
  사진을 흐름에서 뺀다.
  흐름 안에 두면 단추 높이가 '사진 원래 비율' 로 정해지고,
  그 높이가 최소값이 되어 썸네일 줄이 큰 화면보다 아래로 넘친다.
*/
.wel-life__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--life-zoom, 1));
  transform-origin: var(--life-pos, 50% 50%);
  display: block;
}
.wel-life__thumb:hover { opacity: .85; }
.wel-life__thumb[aria-current="true"] { opacity: 1; }

/* 고른 것에는 코발트 테두리를 안쪽으로 두른다.
   바깥에 두르면 칸 크기가 달라져 줄이 흔들린다 */
.wel-life__thumb[aria-current="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: calc(3 * var(--u)) solid var(--wel-point);
  border-radius: inherit;
  pointer-events: none;
}
.wel-life__thumb:focus-visible {
  outline: 2px solid var(--wel-point);
  outline-offset: calc(3 * var(--u));
}

.wel-life__caption {
  margin: calc(16 * var(--u)) 0 0;
  font-weight: 300;
  font-size: max(calc(18 * var(--u)), 13px);
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}
/* ==================== 2. 인사 원칙 ====================
   시안 2048:1281 — 440 × 440 카드 셋.

   시안은 첫 장만 밝게, 나머지 둘은 어둡게 그려져 있는데
   그건 '한 장이 열려 있는 순간' 을 그린 것이다.
   그래서 셋 다 닫힌 모습(사진 전면 + 검정 65% + 가운데 흰 제목)에서 시작하고,
   마우스를 올린 장만 열린 모습(밝은 판 + 위쪽 사진 띠 + 진한 제목·설명)이 된다.

   열고 닫는 동안 움직이는 것은 셋뿐이다.
     사진 높이   100% → 260      (카드 높이가 정해져 있어 길이끼리 이어진다)
     덮개 투명도 1 → 0
     글 위치     한가운데 → 사진 아래
*/
.wel-rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(70 * var(--u));    /* 시안 제목(1912) → 카드(2069) */
}

.wel-rule {
  position: relative;
  aspect-ratio: 1 / 1;                /* 시안 440 × 440 */
  border-radius: calc(20 * var(--u));
  overflow: hidden;
  background: var(--wel-soft);        /* 사진이 줄어든 자리에 드러난다 */
  transition: transform .35s ease, box-shadow .35s ease;
}
.wel-rule:hover,
.wel-rule:focus-within,
.wel-rule.is-open {
  transform: translateY(-8px);
  box-shadow: 0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(17, 20, 24, .16);
}

/* ---------- 사진 ---------- */
.wel-rule__media {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;                       /* 닫혔을 때는 카드를 다 덮는다 */
  overflow: hidden;
  background: #dfe3e8;                /* 파일이 없어도 자리와 색이 남는다 */
  transition: height .45s cubic-bezier(.22, .61, .36, 1);
}
.wel-rule:hover .wel-rule__media,
.wel-rule:focus-within .wel-rule__media,
.wel-rule.is-open .wel-rule__media { height: calc(260 * var(--u)); }

.wel-rule__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .6s ease;
}
.wel-rule:hover .wel-rule__media img,
.wel-rule:focus-within .wel-rule__media img,
.wel-rule.is-open .wel-rule__media img { transform: scale(1.05); }

/* ---------- 덮개 ----------
   시안 2048:1287 · 1303 — 검정 65%. 열리면 걷힌다 */
.wel-rule__shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
}
.wel-rule:hover .wel-rule__shade,
.wel-rule:focus-within .wel-rule__shade,
.wel-rule.is-open .wel-rule__shade { opacity: 0; }

/* ---------- 글 ---------- */
.wel-rule__body {
  position: absolute;
  left: calc(30 * var(--u));
  right: calc(30 * var(--u));
  top: 50%;                           /* 닫혔을 때는 한가운데 */
  transform: translateY(-50%);
  text-align: center;
  transition: top .45s cubic-bezier(.22, .61, .36, 1),
              transform .45s cubic-bezier(.22, .61, .36, 1);
}
.wel-rule:hover .wel-rule__body,
.wel-rule:focus-within .wel-rule__body,
.wel-rule.is-open .wel-rule__body {
  top: calc(301 * var(--u));           /* 시안 2069 → 2370, 사진 띠 아래 */
  transform: translateY(0);
}

.wel-rule__name {
  margin: 0;
  font-weight: 700;
  font-size: calc(28 * var(--u));      /* 시안 30(닫힘) / 27(열림) — 하나로 둔다 */
  line-height: 1.35;
  letter-spacing: -.03em;
  color: var(--color-white);
  word-break: keep-all;
  transition: color .45s ease;
}
.wel-rule:hover .wel-rule__name,
.wel-rule:focus-within .wel-rule__name,
.wel-rule.is-open .wel-rule__name { color: var(--wel-ink); }

/* 설명은 열렸을 때만 나온다. 닫힌 사진 위에서는 읽히지도 않는다 */
.wel-rule__desc {
  margin: calc(16 * var(--u)) 0 0;     /* 시안 2370 → 2419 */
  font-weight: 300;
  font-size: max(calc(20 * var(--u)), 14px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
  opacity: 0;
  transition: opacity .35s ease;
}
/* 판이 어느 정도 열린 뒤에 들어온다 */
.wel-rule:hover .wel-rule__desc,
.wel-rule:focus-within .wel-rule__desc,
.wel-rule.is-open .wel-rule__desc {
  opacity: 1;
  transition-delay: .18s;
}
/* ==================== 3. 복리후생 ====================
   시안 2048:1226 — 320 × 390 카드 여덟, 네 칸 두 줄.
   리프트는 주지 않는다 (인재상보다 가볍게) — 바탕색만 바뀐다. */
.wel-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gap) * var(--u));
  margin-top: calc(70 * var(--u));    /* 시안 설명(2779) → 카드(2908) */
}

.wel-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(390 * var(--u));
  padding: calc(40 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
  border-radius: calc(20 * var(--u));
  background: var(--wel-soft);
  text-align: center;
  transition: background-color .3s ease;
}
/* 올리면 바탕이 한 톤 밝아지며 코발트 기가 돈다 */
.wel-benefit:hover,
.wel-benefit:focus-within { background: #eaf1f8; }

/*
  시안의 그림은 아이콘이 아니라 3D 일러스트(PNG)다.
  색을 바꿀 수 없으므로, 올렸을 때는 살짝 떠오르고 또렷해지는 것으로 대신한다.
  (SVG 아이콘을 받으면 fill: currentColor 로 색을 바꿀 수 있다)
*/
.wel-benefit__icon {
  flex: none;
  width: calc(150 * var(--u));
  height: calc(150 * var(--u));
  object-fit: contain;
  /* 시안이 mix-blend-multiply 로 흰 배경을 지운다.
     카드 바탕이 단색이라 결과가 같고, 겹침 맥락에 좌우되지 않는다 */
  mix-blend-mode: multiply;
  transform: translateY(0);
  transition: transform .3s ease, filter .3s ease;
}
.wel-benefit:hover .wel-benefit__icon,
.wel-benefit:focus-within .wel-benefit__icon {
  transform: translateY(-4px);
  filter: saturate(1.15);
}

.wel-benefit__name {
  margin: calc(24 * var(--u)) 0 0;    /* 시안 그림 아래 → 제목(3137) */
  font-weight: 700;
  font-size: calc(24 * var(--u));     /* 시안 27 */
  line-height: 1.3;
  letter-spacing: -.03em;
  color: var(--wel-ink);
  word-break: keep-all;
  transition: color .3s ease;
}
.wel-benefit:hover .wel-benefit__name,
.wel-benefit:focus-within .wel-benefit__name { color: var(--wel-point); }

.wel-benefit__desc {
  margin: calc(14 * var(--u)) 0 0;    /* 시안 3137 → 3187 */
  font-weight: 300;
  font-size: max(calc(19 * var(--u)), 14px);   /* 시안 20 */
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--gray);
  word-break: keep-all;
}

/* ==================== 등장 ====================
   js/reveal.js 가 화면에 들어온 [data-reveal] 에 .is-in 을 붙인다.
   --d 는 줄에서 몇 번째인지, --step 은 항목당 간격이다 (js/page-welfare.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 .wel-key[data-reveal],
.js .wel-rule[data-reveal],
.js .wel-benefit[data-reveal] {
  transform: translateY(28px) scale(.96);
  transition-delay: calc(var(--d, 0) * var(--step, .15s));
}
.js .wel-key[data-reveal].is-in,
.js .wel-rule[data-reveal].is-in,
.js .wel-benefit[data-reveal].is-in { transform: none; }

/* 등장이 끝나면 올렸을 때의 움직임이 다시 걸려야 한다 */
.js .wel-key[data-reveal].is-in:hover,
.js .wel-key[data-reveal].is-in:focus-within,
.js .wel-rule[data-reveal].is-in:hover,
.js .wel-rule[data-reveal].is-in:focus-within {
  transform: translateY(-8px);
  transition-delay: 0s;
}
.js .wel-benefit[data-reveal].is-in:hover,
.js .wel-benefit[data-reveal].is-in:focus-within {
  transform: none;                    /* 복리후생은 뜨지 않는다 */
  transition-delay: 0s;
}

main { padding-bottom: calc(180 * var(--u)); }

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

  /* 히어로→본문. 히어로 아래 여백·탭 위 여백과 겹쳐 가장 큰 값이 남는다 */
  .wel-wrap { margin-top: var(--sp-block); }
  .wel-sec + .wel-sec { margin-top: var(--sp-section); }
  .sub-tabs + .wel-sec { margin-top: var(--sp-block); }
  .wel-sec__title { font-size: calc(26 * var(--u)); }
  .wel-sec__title::after {
    width: calc(7 * var(--u));
    height: calc(7 * var(--u));
    margin-left: calc(8 * var(--u));
  }
  .wel-sec__desc {
    margin-top: calc(12 * var(--u));
    font-size: max(calc(15 * var(--u)), 14px);
    line-height: 1.7;
  }
  .wel-sec__head--inline { display: block; }
  .wel-sec__head--inline .wel-sec__desc { margin-top: calc(12 * var(--u)); }

  /* 인재상 카드는 한 칸 — 세 칸이면 키워드가 알아볼 수 없게 작아진다 */
  .wel-keys { grid-template-columns: 1fr; margin-top: var(--sp-head); }
  .wel-key { min-height: 0; padding: calc(20 * var(--u)); gap: calc(6 * var(--u)); }
  .wel-key__word { font-size: calc(26 * var(--u)); }
  .wel-key__word::after { width: calc(32 * var(--u)); margin-top: calc(10 * var(--u)); }
  .wel-key__sub { font-size: max(calc(13 * var(--u)), 12px); }
  .wel-keys__note {
    margin-top: calc(14 * var(--u));
    padding: calc(18 * var(--u));
    border-radius: calc(14 * var(--u));
    font-size: max(calc(14 * var(--u)), 13px);
    line-height: 1.75;
  }

  /* 2.2:1 은 좁은 화면에서 155px 짜리 띠가 되어 사람 얼굴이 안 읽힌다 */
  .wel-life { margin-top: var(--sp-block); }
  /* 옆에 세울 폭이 없다. 큰 화면 아래로 내리고 넷을 한 줄로 둔다
     (줄을 접으면 '고르는 줄' 로 안 읽힌다) */
  .wel-life__gallery {
    grid-template-columns: 1fr;
    gap: calc(8 * var(--u));
  }
  .wel-life__main { aspect-ratio: 16 / 10; border-radius: calc(14 * var(--u)); }
  .wel-life__thumbs {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: none;
    gap: calc(8 * var(--u));
  }
  .wel-life__thumb { aspect-ratio: 16 / 10; border-radius: calc(8 * var(--u)); }
  .wel-life__thumb[aria-current="true"]::after { border-width: calc(2 * var(--u)); }
  .wel-life__caption { margin-top: calc(10 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); }

  /* 인사 원칙도 한 칸. 정사각형은 유지한다 */
  .wel-rules { grid-template-columns: 1fr; margin-top: var(--sp-head); }
  .wel-rule { aspect-ratio: 16 / 11; border-radius: calc(14 * var(--u)); }
  .wel-rule__body { left: calc(18 * var(--u)); right: calc(18 * var(--u)); }
  .wel-rule__name { font-size: calc(20 * var(--u)); }
  .wel-rule__desc { margin-top: calc(8 * var(--u)); font-size: max(calc(14 * var(--u)), 13px); }
  /* 열렸을 때 사진 띠 높이와 글 자리 (세로가 짧아 비율로 준다) */
  .wel-rule.is-open .wel-rule__media { height: 56%; }
  .wel-rule.is-open .wel-rule__body { top: 60%; }

  /* 복리후생은 두 칸 */
  .wel-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-head); }
  .wel-benefit {
    min-height: 0;
    padding: calc(20 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
    border-radius: calc(14 * var(--u));
  }
  .wel-benefit__icon { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
  .wel-benefit__name { margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--u)); }
  .wel-benefit__desc { margin-top: calc(6 * var(--u)); font-size: max(calc(13 * var(--u)), 12px); }

  /*
    터치 화면에는 마우스를 올린다는 개념이 없다.
    한 번 누르면 그 상태가 눌어붙으므로 올렸을 때의 효과는 모두 끈다.
    등장 애니메이션만 남긴다.
  */
  .wel-key:hover,
  .wel-key:focus-within {
    transform: none;
    box-shadow: none;
    background: var(--color-white);
    border-color: var(--wel-line);
  }
  .wel-key:hover::after,
  .wel-key:focus-within::after { transform: scaleX(0); }
  .wel-key:hover .wel-key__word,
  .wel-key:focus-within .wel-key__word { color: var(--wel-point); }
  .wel-key:hover .wel-key__sub,
  .wel-key:focus-within .wel-key__sub { color: var(--gray); }
  /*
    터치 화면에는 마우스를 올린다는 개념이 없다.
    hover 로 열리는 길은 막고, 대신 화면 한가운데 온 장이 .is-open 으로 열린다
    (js/page-welfare.js). 그래야 설명을 읽을 방법이 남는다.
  */
  .wel-rule:hover,
  .wel-rule:focus-within { transform: none; box-shadow: none; }
  .wel-rule:hover .wel-rule__media,
  .wel-rule:focus-within .wel-rule__media { height: 100%; }
  .wel-rule:hover .wel-rule__media img,
  .wel-rule:focus-within .wel-rule__media img { transform: none; }
  .wel-rule:hover .wel-rule__shade,
  .wel-rule:focus-within .wel-rule__shade { opacity: 1; }
  .wel-rule:hover .wel-rule__body,
  .wel-rule:focus-within .wel-rule__body { top: 50%; transform: translateY(-50%); }
  .wel-rule:hover .wel-rule__name,
  .wel-rule:focus-within .wel-rule__name { color: var(--color-white); }
  .wel-rule:hover .wel-rule__desc,
  .wel-rule:focus-within .wel-rule__desc { opacity: 0; }

  /* .is-open 은 살아 있어야 하므로 뒤에 다시 켠다 (리프트만 뺀다) */
  .wel-rule.is-open { transform: none; box-shadow: none; }
  .wel-rule.is-open .wel-rule__shade { opacity: 0; }
  .wel-rule.is-open .wel-rule__body { transform: translateY(0); }
  .wel-rule.is-open .wel-rule__name { color: var(--wel-ink); }
  .wel-rule.is-open .wel-rule__desc { opacity: 1; }
  .wel-benefit:hover,
  .wel-benefit:focus-within { background: var(--wel-soft); }
  .wel-benefit:hover .wel-benefit__icon,
  .wel-benefit:focus-within .wel-benefit__icon { transform: none; filter: none; }
  .wel-benefit:hover .wel-benefit__name,
  .wel-benefit:focus-within .wel-benefit__name { color: var(--wel-ink); }
  .js .wel-key[data-reveal].is-in:hover,
  .js .wel-rule[data-reveal].is-in:hover { transform: none; }
}

/* ==================== 모션 최소화 ==================== */
@media (prefers-reduced-motion: reduce) {
  /* 크기 변화와 선 긋기는 없애고 페이드인만 남긴다 */
  .js [data-reveal],
  .js .wel-key[data-reveal],
  .js .wel-rule[data-reveal],
  .js .wel-benefit[data-reveal] {
    transform: none;
    transition: opacity .5s ease-out;
  }
  .wel-key,
  .wel-key::after,
  .wel-rule,
  .wel-rule__media img,
  .wel-benefit,
  .wel-benefit__icon { transition: none; }
  .wel-key::after { display: none; }
  .wel-key:hover,
  .wel-key:focus-within,
  .wel-rule:hover,
  .wel-rule:focus-within { transform: none; }
  .wel-rule:hover .wel-rule__media img,
  .wel-benefit:hover .wel-benefit__icon { transform: none; }
}

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