/* ═══════════════════════════════════════════════
   COMPANY PAGE — company.css
   index.css / common.css 변수 그대로 활용
═══════════════════════════════════════════════ */

/* 메인 컨테이너 */
.cp_main {
  background: var(--mainbg);
}

/* ══════════════════════════════
   공통 섹션 reveal 애니메이션
══════════════════════════════ */
@keyframes cp_fade_up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cp_fade_in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cp_slide_left {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes cp_slide_right {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════
   섹션 1 · WHO WE ARE
══════════════════════════════ */
.cp_who {
  position: relative;
  min-height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--subbg);
}

/* 배경 그라디언트 오버레이 */
.cp_who_bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,194,163,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.cp_who_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(60px, 8vw, 120px) var(--page-pad-x);
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

/* 대형 타이포 블록 */
.cp_who_typo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 0.88;
  user-select: none;
}

/* WHO: outline (로고 N · red) */
.cp_who_w1 {
  font-family: var(--logo_text);
  font-size: clamp(80px, 13vw, 200px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px #f74e38;
  display: block;
  opacity: 0;
}

/* WE: 채움 (로고 V · green) */
.cp_who_w2 {
  font-family: var(--logo_text);
  font-size: clamp(80px, 13vw, 200px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4aac68;
  display: block;
  opacity: 0;
}

/* ARE: 채움 (로고 A · blue) */
.cp_who_w3 {
  font-family: var(--logo_text);
  font-size: clamp(80px, 13vw, 200px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1da1e1;
  display: block;
  opacity: 0;
}

/* 섹션 진입 시 순차 애니메이션 */
.cp_who.cp_in .cp_who_w1 { animation: cp_slide_left  0.9s cubic-bezier(0.22,1,0.36,1) 0s    forwards; }
.cp_who.cp_in .cp_who_w2 { animation: cp_fade_up      0.9s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }
.cp_who.cp_in .cp_who_w3 { animation: cp_slide_right  0.9s cubic-bezier(0.22,1,0.36,1) 0.3s  forwards; }

/* 우측 텍스트 */
.cp_who_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  opacity: 0;
}
.cp_who.cp_in .cp_who_text { animation: cp_fade_up 0.85s ease 0.5s forwards; }

.cp_who_p1 {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 20px);
  color: var(--text1);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

.cp_who_p2 {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--text2);
  line-height: 2;
  letter-spacing: 0.03em;
  border-left: 2px solid #ffb300;
  padding-left: 24px;
}

/* ══════════════════════════════
   섹션 2 · 왜 NOVA SM인가?
══════════════════════════════ */
.cp_why {
  background: var(--mainbg);
  padding: clamp(60px, 8vw, 120px) var(--page-pad-x);
  min-height: 90vh;
  display: flex;
  align-items: center;
}

.cp_why_inner {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: clamp(150px, 14vw, 260px);
}

/* 좌: 제목 블록 */
.cp_why_title_block {
  flex: 0 0 320px;
  display: flex;
  gap: 28px;
  opacity: 0;
}

.cp_why.cp_in .cp_why_title_block { animation: cp_fade_up 0.8s ease 0s forwards; }

/* 노랑 세로 막대 */
.cp_why_bar {
  width: 3px;
  height: 90px;
  background: #ffb300;
}

.cp_why_title {
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* 우: 카드 세로 스택 */
.cp_why_cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 개별 카드: 이미지 좌 + 텍스트 우 */
.cp_why_card {
  display: flex;
  align-items: center;
  gap: 80px;
  opacity: 0;
  transition: transform 0.3s ease;
}
.cp_why_card:hover {
  transform: translateX(6px);
}

/* 스태거 진입 */
.cp_why.cp_in .cp_why_card:nth-child(1) { animation: cp_fade_up 0.7s ease 0.1s forwards; }
.cp_why.cp_in .cp_why_card:nth-child(2) { animation: cp_fade_up 0.7s ease 0.25s forwards; }
.cp_why.cp_in .cp_why_card:nth-child(3) { animation: cp_fade_up 0.7s ease 0.4s forwards; }

/* 카드 이미지 */
.cp_why_card_img {
  flex: 0 0 220px;
  width: 300px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
  /* 이미지 없을 때 플레이스홀더 */
  background-color: #C8BDB0;
  display: block;
}

/* 카드 텍스트 */
.cp_why_card_text {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--text2);
  line-height: 1.9;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════
   섹션 3 · 우리의 강점 (지도)
══════════════════════════════ */
.cp_strength {
  background: var(--subbg);
  padding: clamp(72px, 9vw, 128px) var(--page-pad-x);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.cp_strength_inner {
  display: grid;
  grid-template-columns: minmax(320px, 560px) minmax(0, 1fr);
  grid-template-areas:
    "copy map"
    "caption caption";
  justify-content: space-between;
  align-items: center;
  gap: clamp(28px, 4vw, 56px) clamp(36px, 5vw, 72px);
  width: 100%;
}

.cp_strength_copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 36px;
  opacity: 0;
}
.cp_strength.cp_in .cp_strength_copy { animation: cp_fade_up 0.85s ease 0s forwards; }

.cp_strength_title {
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.cp_strength_desc {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

.cp_strength_divider {
  width: 2px;
  min-height: 96px;
  background: #ffb300;
  flex-shrink: 0;
  margin-top: 6px;
}

.cp_strength_p1 {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 18px);
  color: var(--text1);
  line-height: 2;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cp_strength_p2 {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.25vw, 18px);
  color: var(--text2);
  line-height: 2;
  letter-spacing: 0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cp_map_stage {
  grid-area: map;
  position: relative;
  width: 100%;
  max-width: 680px;
  justify-self: end;
  opacity: 0;
}
.cp_strength.cp_in .cp_map_stage {
  animation: cp_map_wrap_in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

@keyframes cp_map_wrap_in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cp_map_aura {
  position: absolute;
  inset: 4% 2% 10% 10%;
  background:
    radial-gradient(ellipse 55% 48% at 36% 48%, rgba(255, 252, 240, 0.42) 0%, transparent 70%),
    radial-gradient(ellipse 28% 32% at 70% 50%, rgba(184, 168, 140, 0.16) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

.cp_map_wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
}

.cp_map_svg {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: contrast(1.08) brightness(1.1);
}

.cp_range_ring {
  fill: none;
  stroke: var(--border);
  stroke-width: 0.7;
  stroke-opacity: 0;
  stroke-dasharray: 3 10;
}

.cp_strength.cp_in .cp_range_ring {
  animation: cp_range_in 1.4s ease forwards;
}
.cp_range .cp_range_ring:nth-child(1) { animation-delay: 0.55s; }
.cp_range .cp_range_ring:nth-child(2) { animation-delay: 0.7s; }
.cp_range .cp_range_ring:nth-child(3) { animation-delay: 0.85s; }
.cp_range .cp_range_ring:nth-child(4) { animation-delay: 1s; }

@keyframes cp_range_in {
  from { stroke-opacity: 0; }
  to   { stroke-opacity: 0.22; }
}

.cp_hub {
  fill: #fffef8;
  stroke: #d8c7a2;
  stroke-width: 0.8;
}

.cp_hub_glow {
  opacity: 0.9;
}

@keyframes cp_pulse {
  0%   { r: 14; opacity: 0.75; }
  70%  { r: 28; opacity: 0; }
  100% { r: 28; opacity: 0; }
}
.cp_hub_ring {
  fill: none;
  stroke: #f3e6c8;
  stroke-width: 1.4;
  animation: cp_pulse 2.8s ease-out infinite;
}

.cp_city {
  opacity: 0;
}
.cp_strength.cp_in .cp_city {
  animation: cp_city_in 0.6s ease forwards;
}
.cp_city--sm {
  fill: #fffef8;
  opacity: 0;
}
.cp_strength.cp_in .cp_city--sm {
  animation: cp_city_sm_in 0.6s ease forwards;
}

.cp_city_ring {
  fill: none;
  stroke: #d8c7a2;
  stroke-width: 0.9;
  opacity: 0;
}
.cp_strength.cp_in .cp_city_ring {
  animation: cp_city_in 0.7s ease forwards;
}

.cp_cities .cp_city:nth-child(1)  { animation-delay: 0.45s; }
.cp_cities .cp_city:nth-child(2)  { animation-delay: 0.52s; }
.cp_cities .cp_city:nth-child(3)  { animation-delay: 0.58s; }
.cp_cities .cp_city:nth-child(4)  { animation-delay: 0.64s; }
.cp_cities .cp_city:nth-child(5)  { animation-delay: 0.70s; }
.cp_cities .cp_city:nth-child(6)  { animation-delay: 0.76s; }
.cp_cities .cp_city:nth-child(7)  { animation-delay: 0.82s; }
.cp_cities .cp_city:nth-child(8)  { animation-delay: 0.88s; }
.cp_cities .cp_city:nth-child(9)  { animation-delay: 0.94s; }
.cp_cities .cp_city:nth-child(10) { animation-delay: 1.00s; }
.cp_cities .cp_city:nth-child(11) { animation-delay: 1.06s; }

.cp_city_rings .cp_city_ring:nth-child(1) { animation-delay: 0.72s; }
.cp_city_rings .cp_city_ring:nth-child(2) { animation-delay: 0.84s; }
.cp_city_rings .cp_city_ring:nth-child(3) { animation-delay: 0.96s; }
.cp_city_rings .cp_city_ring:nth-child(4) { animation-delay: 1.08s; }
.cp_city_rings .cp_city_ring:nth-child(5) { animation-delay: 1.16s; }

@keyframes cp_city_in {
  from { opacity: 0; }
  to   { opacity: 0.95; }
}
@keyframes cp_city_sm_in {
  from { opacity: 0; }
  to   { opacity: 0.62; }
}

.cp_city_label {
  font-family: var(--logo_text);
  font-weight: 500;
  letter-spacing: 0.18em;
  fill: #5c5346;
  opacity: 0;
}
.cp_city_label--hub {
  font-weight: 600;
  letter-spacing: 0.24em;
  fill: #3d3428;
}
.cp_strength.cp_in .cp_city_label {
  animation: cp_fade_in 0.7s ease forwards;
}
.cp_labels .cp_city_label:nth-child(1) { animation-delay: 1.05s; }
.cp_labels .cp_city_label:nth-child(2) { animation-delay: 1.12s; }
.cp_labels .cp_city_label:nth-child(3) { animation-delay: 1.18s; }
.cp_labels .cp_city_label:nth-child(4) { animation-delay: 1.24s; }
.cp_labels .cp_city_label:nth-child(5) { animation-delay: 1.30s; }
.cp_labels .cp_city_label:nth-child(6) { animation-delay: 1.36s; }
.cp_labels .cp_city_label:nth-child(7) { animation-delay: 1.42s; }

.cp_map_caption {
  grid-area: caption;
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--logo_text);
  font-size: clamp(11px, 1.05vw, 14px);
  font-weight: 500;
  letter-spacing: 0.32em;
  color: var(--border);
  text-align: center;
  opacity: 0;
}
.cp_strength.cp_in .cp_map_caption {
  animation: cp_fade_in 0.8s ease 0.55s forwards;
}

.cp_dokdo_land {
  fill: rgba(237, 230, 219, 0.42);
  stroke: none;
}

.cp_line {
  stroke: url(#cp_arc_grad);
  stroke-width: 1.35;
  fill: none;
  stroke-linecap: round;
  opacity: 0.92;
}

.cp_mover {
  fill: #fff8e8;
  opacity: 0;
}
.cp_strength.cp_in .cp_mover {
  opacity: 0.9;
  transition: opacity 0.5s ease 1.4s;
}

@media (prefers-reduced-motion: reduce) {
  .cp_hub_ring,
  .cp_city,
  .cp_city--sm,
  .cp_city_ring,
  .cp_city_label,
  .cp_range_ring {
    animation: none !important;
    opacity: 0.95 !important;
  }
  .cp_city--sm { opacity: 0.7 !important; }
  .cp_city_label { opacity: 1 !important; }
  .cp_range_ring { stroke-opacity: 0.22 !important; }
  .cp_line { stroke-dashoffset: 0 !important; transition: none !important; }
  .cp_mover { opacity: 0.95; transition: none; }
}

/* ══════════════════════════════
   섹션 4 · 우리가 하는 일
══════════════════════════════ */
.cp_work {
  background: var(--mainbg);
  padding: clamp(60px, 8vw, 120px) var(--page-pad-x);
}

.cp_work_inner {
  display: flex;
  align-items: flex-start;
  gap: 80px;
}

/* 제목 */
.cp_work_title {
  font-family: var(--font-body);
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.25;
  letter-spacing: -0.01em;
  flex: 0 0 260px;
  position: sticky;
  top: 160px;
  opacity: 0;
}
.cp_work.cp_in .cp_work_title { animation: cp_fade_up 0.8s ease 0s forwards; }

/* 서비스 그리드: 2열 */
.cp_work_grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* 개별 서비스 아이템 */
.cp_work_item {
  background: var(--subbg);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cp_work_item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(21,31,52,0.10);
}

/* 7번 아이템: 전체 너비 */
.cp_work_item--wide {
  grid-column: 1 / -1;
}

/* 스태거 진입 */
.cp_work.cp_in .cp_work_item:nth-child(1) { animation: cp_fade_up 0.65s ease 0.05s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(2) { animation: cp_fade_up 0.65s ease 0.12s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(3) { animation: cp_fade_up 0.65s ease 0.19s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(4) { animation: cp_fade_up 0.65s ease 0.26s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(5) { animation: cp_fade_up 0.65s ease 0.33s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(6) { animation: cp_fade_up 0.65s ease 0.40s forwards; }
.cp_work.cp_in .cp_work_item:nth-child(7) { animation: cp_fade_up 0.65s ease 0.47s forwards; }

/* 배경 이미지: 카드 전체 채움 */
.cp_work_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* 이미지 없을 때 플레이스홀더 배경 */
  background-color: #C4C9D8;
}

/* 이미지 위 어두운 그라디언트 오버레이 */
.cp_work_overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  padding: 50px;
}

/* 카드 높이 고정 (이미지 없어도 형태 유지) */
.cp_work_item {
  aspect-ratio: 2 / 1;
}
.cp_work_item--wide {
  aspect-ratio: 4 / 1;
}

.cp_work_name {
  font-family: var(--font-body);
  font-size: clamp(14px, 2vw, 20px);
  color: var(--text1);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════
   섹션 5 · 우리의 이야기
══════════════════════════════ */
.cp_story {
  background: var(--subbg);
  padding: clamp(60px, 8vw, 120px) var(--page-pad-x);
}

.cp_story_inner {
  display: flex;
  align-items: center;
  gap: 80px;
}

.cp_story_text {
  flex: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
}
.cp_story.cp_in .cp_story_text { animation: cp_slide_left 0.85s cubic-bezier(0.22,1,0.36,1) 0s forwards; }

/* "우리의 이야기" 레이블 */
.cp_story_label {
  font-family: var(--logo_text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--border);
  display: block;
  margin-bottom: 24px;
}

.cp_story_title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

.cp_story_desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--text2);
  line-height: 2;
  letter-spacing: 0.02em;
  border-left: 2px solid #ffb300;
  padding-left: 24px;
}

/* ══════════════════════════════
   섹션 6 · OUR SPACE
══════════════════════════════ */
.cp_space {
  background: var(--mainbg);
  padding: clamp(60px, 8vw, 120px) var(--page-pad-x);
}

.cp_space_inner {
  display: flex;
  align-items: center;
  gap: 80px;
}

/* 좌: 이미지 */
.cp_space_img_wrap {
  flex: 1;
  opacity: 0;
}
.cp_space.cp_in .cp_space_img_wrap { animation: cp_slide_left 0.85s cubic-bezier(0.22,1,0.36,1) 0s forwards; }

.cp_space_img {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-color: #B5C4C8;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

/* 우: 텍스트 */
.cp_space_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.cp_space.cp_in .cp_space_text { animation: cp_slide_right 0.85s cubic-bezier(0.22,1,0.36,1) 0.15s forwards; }

/* "Our Space" 레이블 */
.cp_space_label {
  font-family: var(--logo_text);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--border);
  display: block;
  margin-bottom: 24px;
}

.cp_space_title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.45;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}

/* 골드 구분선 */
.cp_space_divider {
  max-width: 600px;
  height: 2px;
  background: var(--border);
  margin-bottom: 28px;
}

.cp_space_desc {
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 16px);
  color: var(--text2);
  line-height: 2;
  letter-spacing: 0.02em;
}

/* ══════════════════════════════
   섹션 7 · 마무리 멘트
   — 에디토리얼 럭셔리 무드
══════════════════════════════ */
.cp_closing {
  position: relative;
  min-height: min(100vh, 900px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(80px, 10vw, 140px) var(--page-pad-x);
  background: linear-gradient(160deg, #EDECE9 0%, #F5F4F2 45%, #E6E4E0 100%);
}

/* ── 배경 분위기 레이어 ── */
.cp_closing_atmo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cp_closing_shadow,
.cp_closing_glow {
  transition: transform 0.12s ease-out;
}

/* 좌측 대각선 빛·그림자 */
.cp_closing_shadow {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -32deg,
    transparent 0px,
    transparent 52px,
    rgba(21, 31, 52, 0.028) 52px,
    rgba(21, 31, 52, 0.028) 54px
  );
  mask-image: linear-gradient(to right, #000 0%, transparent 50%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 50%);
}

/* 우측 은은한 광원 */
.cp_closing_glow {
  position: absolute;
  right: -8%;
  top: 5%;
  width: 58%;
  height: 90%;
  background: radial-gradient(
    ellipse at 55% 45%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.2) 40%,
    transparent 72%
  );
}

/* 우하단 유동적 패브릭 */
.cp_closing_fabric {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: 58%;
  max-width: 900px;
  height: auto;
  opacity: 0.22;
  filter: grayscale(1) brightness(2.2) contrast(0.85);
  transform-origin: right bottom;
  animation: cp_fabric_drift 14s ease-in-out infinite alternate;
}

@keyframes cp_fabric_drift {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  100% { transform: translateY(-18px) scale(1.03) rotate(1.5deg); }
}

/* 반짝이는 먼지 입자 */
.cp_closing_particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

@keyframes cp_sparkle_float {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 0.85; }
  85%  { opacity: 0.4; }
  100% { transform: translate(var(--dx, 0), -80px) scale(0.3); opacity: 0; }
}

.cp_closing_particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
  animation: cp_sparkle_float ease-in-out infinite;
}

/* ── 텍스트 블록 — 중앙 정렬 ── */
.cp_closing_inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.cp_closing_sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.8vw, 22px);
  font-weight: 300;
  color: var(--text1);
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin-bottom: clamp(28px, 4vw, 52px);
  opacity: 0;
  transform: translateY(24px);
}

.cp_closing_title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.8vw, 56px);
  font-weight: 500;
  color: var(--text1);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: clamp(48px, 6vw, 80px);
  opacity: 0;
  transform: translateY(32px);
}

@keyframes cp_closing_reveal {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cp_closing.cp_in .cp_closing_sub   { animation: cp_closing_reveal 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards; }
.cp_closing.cp_in .cp_closing_title { animation: cp_closing_reveal 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.65s forwards; }
.cp_closing.cp_in .cp_closing_cta   { animation: cp_closing_reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.35s forwards; }

/* CTA — 절제된 텍스트 링크 */
.cp_closing_cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.2vw, 15px);
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--text1);
  text-decoration: none;
  border-bottom: 1px solid rgba(21, 31, 52, 0.35);
  padding-bottom: 6px;
  opacity: 0;
  transform: translateY(20px);
  transition: color 0.3s ease, border-color 0.3s ease;
}

.cp_closing_cta:hover {
  color: var(--gray3);
  border-color: var(--border);
}

.cp_closing_arrow {
  font-size: 14px;
  transition: transform 0.35s ease;
}

.cp_closing_cta:hover .cp_closing_arrow {
  transform: translateX(5px);
}

/* ═══════════════════════════════════
   반응형 미디어쿼리 — company
═══════════════════════════════════ */

/* ── 1024px 이하: 태블릿 가로 ── */
@media (max-width: 1024px) {
  /* WHY 내부 gap 추가 축소 */
  .cp_why_inner { gap: clamp(32px, 4vw, 80px); }
  .cp_why_title_block { flex: 0 0 200px; }

  /* WORK 제목 고정 폭 축소 */
  .cp_work_title { flex: 0 0 200px; }
  .cp_work_inner { gap: 48px; }

  /* STORY / SPACE 좌우 gap 축소 */
  .cp_story_inner { gap: clamp(32px, 4vw, 60px); }
  .cp_space_inner { gap: clamp(32px, 4vw, 60px); }

  .cp_strength_inner {
    grid-template-columns: minmax(300px, 1.05fr) minmax(0, 1fr);
    gap: 40px;
  }
}

/* ── 768px 이하: 태블릿 세로 ── */
@media (max-width: 768px) {
  /* 강점 설명 줄바꿈 제거 */
  .cp_strength_p1 br { display: none; }
  /* WHO: 좌우 → 상하 */
  .cp_who_inner { flex-direction: column; align-items: flex-start; gap: 40px; }

  /* WHY: 좌우 → 상하 */
  .cp_why { min-height: 0; }
  .cp_why_inner { flex-direction: column; gap: 40px; }
  .cp_why_title_block { flex: none; }

  /* STRENGTH: 상하 배치, 지도는 본문 너비에 맞춤 */
  .cp_strength { min-height: 0; overflow: visible; }
  .cp_strength_inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "map"
      "caption";
    justify-content: stretch;
    gap: 36px;
  }
  .cp_strength_copy { gap: 28px; }
  .cp_strength_desc { gap: 20px; }
  .cp_strength_divider { min-height: 40px; }
  .cp_map_stage { max-width: 560px; justify-self: center; width: 100%; }
  .cp_city_label--sm { display: none; }
  .cp_map_caption { text-align: center; letter-spacing: 0.22em; }

  /* WORK: 제목이 그리드 위로 올라오는 구조로 전환 */
  .cp_work_inner { flex-direction: column; gap: 32px; }

  /* sticky 해제 */
  .cp_work_title { flex: none; width: 100%; position: static; }

  /* 그리드: column flex 안에서 너비 명시 — aspect-ratio가 정상 계산되도록 */
  .cp_work_grid { width: 100%; gap: 12px; }

  /* 카드 비율 조정 */
  .cp_work_item { aspect-ratio: 3 / 2; border-radius: 14px; }
  .cp_work_item--wide { aspect-ratio: 5 / 2; }
  .cp_work_overlay { padding: 18px; }

  /* STORY: 왼쪽 정렬 */
  .cp_story_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .cp_story_text {
    width: 100%;
    text-align: left;
  }

  /* SPACE: 상하 배치 — 이미지 먼저, 왼쪽 정렬 */
  .cp_space_inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }
  .cp_space_text,
  .cp_space_img_wrap {
    width: 100%;
    text-align: left;
  }
  .cp_space_divider {
    width: 40%;
    max-width: 200px;
    margin-left: 0;
  }

  /* CLOSING: 높이 축소 */
  .cp_closing {
    min-height: 0;
    padding: 72px var(--page-pad-x) 80px;
  }
  .cp_closing_sub { margin-bottom: 24px; }
  .cp_closing_title { margin-bottom: 40px; }

  /* WHY 카드 이미지 크기 축소 */
  .cp_why_card_img { flex: 0 0 160px; width: 160px; }
}

/* ── 480px 이하: 모바일 ── */
@media (max-width: 480px) {
  /* WHY 카드: 이미지 위 + 텍스트 아래 */
  .cp_why_card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .cp_why_card_img { flex: none; width: 100%; }

  /* WORK 그리드: 2열 → 1열 */
  .cp_work_grid { grid-template-columns: 1fr; gap: 10px; }
  .cp_work_item { aspect-ratio: 16 / 7; border-radius: 12px; }
  .cp_work_item--wide { grid-column: auto; aspect-ratio: 16 / 7; }
  .cp_work_overlay { padding: 14px; }

  /* CLOSING: 높이·여백 축소 */
  .cp_closing {
    min-height: 0;
    padding: 64px var(--page-pad-x) 72px;
  }
  .cp_closing_sub { margin-bottom: 20px; }
  .cp_closing_title { margin-bottom: 36px; }
  .cp_closing_fabric { width: 90%; opacity: 0.15; }
}