/* Home 전용 스타일 (인벤토리 §10, §6) — 색상은 전부 var(--color-…)만 사용한다 */

/* 히어로 버튼 행 — 부모 .stack.gap-xl이 위 요소와의 간격을 담당하므로 자체 margin-top은
   없다. 버튼 사이 gap만 소유: 데스크톱 16(--space-sm) / 모바일 12(실측, 토큰 없음) */
.hero__actions {
  display: flex; flex-direction: column; gap: var(--space-sm);
}
@media (min-width: 1024px) {
  .hero__actions { flex-direction: row; }
}
@media (max-width: 1023px) {
  .hero__actions { gap: 12px; }
}

/* Figma 6:9 실측: border-top 1px(데스크톱 전용 — 모바일 69:132엔 없음) +
   pt160(기본 .section과 동일, 오버라이드 불필요) + pb 96(1440)/40(375) */
.statement {
  padding-bottom: clamp(40px, 20.28px + 5.26vw, 96px);
}
@media (min-width: 1024px) {
  .statement { border-top: 1px solid var(--color-border-default); }
}

/* 데스크톱(6:14): pb24 + 보더 + 다음 요소까지 48(container flex gap)
   모바일(69:135): 보더·pb 없음, 다음 카드까지 32 하나로 통합 */
.sw-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border-default);
}
@media (max-width: 1023px) {
  .sw-header {
    padding-bottom: 0;
    margin-bottom: var(--space-lg);
    border-bottom: none;
  }
}
.sw-header__link { font-weight: 700; text-transform: uppercase; color: var(--color-accent-default); }

.project-card { display: flex; flex-direction: column; gap: var(--space-md); }
@media (max-width: 1023px) {
  .project-card { gap: var(--space-sm); }
}
.project-card img {
  width: 100%; height: auto; aspect-ratio: 568 / 355; object-fit: cover;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-default);
}

/* CTA 섹션 — About/Careers도 재사용 (Figma 7:17 실측: border-top 1px 데스크톱 전용 —
   모바일 69:148엔 없음). 상하 패딩은 layout.css .section--emphasis가 담당한다. */
@media (min-width: 1024px) {
  .cta { border-top: 1px solid var(--color-border-default); }
}
/* CTA 내부 stack은 gap-lg를 쓰지만 모바일 실측값이 Statement(28)와 다른 24
   (=--space-md)이므로 layout.css의 블랭킷 .gap-lg 모바일 기본값(28)을 여기서만
   더 구체적인 선택자로 오버라이드한다. */
@media (max-width: 1023px) {
  .cta .gap-lg { gap: var(--space-md); }
}

/* ══════════════════════════════════════════════════════════════════
   About 전용 스타일 (인벤토리 §10, §6) — Figma 15:20(L)/62:147(D)/69:164(모바일L)/
   266:151(모바일D) 직접 재실측. 브리프와 불일치한 값은 Figma를 따랐다(태스크 리포트 참조).
   ══════════════════════════════════════════════════════════════════ */

/* About Hero — Home Hero와 달리 pt64/pb160(데스크톱 비대칭) + border-bottom(데스크톱
   전용). 모바일은 기본 .section과 동일한 56/56, 보더 없음(15:40 실측). */
.about-hero {
  padding-top: clamp(56px, 53.18px + 0.751vw, 64px);
}
@media (min-width: 1024px) {
  .about-hero { border-bottom: 1px solid var(--color-border-default); }
}
/* Label→H1 간격: 모바일 24(69:171 gap-24) / 데스크톱 32(15:40 gap-32) —
   기존 .gap-md/.gap-lg 유틸은 모바일에서 둘 다 28로 수렴하므로 재사용 불가 */
.about-hero__head { display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 1024px) {
  .about-hero__head { gap: var(--space-lg); }
}

/* Studio Intro 그리드 — grid-2col(모바일 32/데스크톱 48)과 gap이 달라(16:27 실측:
   모바일 24 수직 스택 / 데스크톱 96 좌우) 전용 클래스로 분리 */
.intro-grid { display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 1024px) {
  .intro-grid { flex-direction: row; gap: var(--space-3xl); }
}
.intro-grid > * { flex: 1 1 0; min-width: 0; }

.figure img {
  width: 100%; height: auto; aspect-ratio: 568 / 355; object-fit: cover;
  border: 1px solid var(--color-border-default);
}
/* figure 이미지→캡션 간격: 모바일 12(토큰 없음, 실측 16:178 gap-12) / 데스크톱 16(--space-sm) */
.figure figcaption { margin-top: 12px; text-transform: uppercase; }
@media (min-width: 1024px) {
  .figure figcaption { margin-top: var(--space-sm); }
}

/* Studio Images 4장 그리드 — 데스크톱은 행간 32 / 열간 48이 서로 달라(16:33 실측)
   .grid-2col의 균일 gap을 재사용할 수 없다. 모바일은 4장 전부 32 균일 스택. */
.about-images { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 1024px) {
  .about-images {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-xl);
    row-gap: var(--space-lg);
  }
}
/* Studio Images 섹션은 데스크톱에서만 flush-top(Stat Bar 앞 중복 gap 방지, 16:33 실측
   pt-0). 모바일은 pt56(기본 .section과 동일)이라 layout.css의 무조건부
   .section--flush-top을 재사용하면 모바일까지 0이 되어 버린다. */
@media (min-width: 1024px) {
  .about-images-section { padding-top: 0; }
}

/* Stat Bar 섹션 — 데스크톱만 flush-top(16:53 pb-160만 존재, pt 없음). 모바일은
   기본 .section 56/56(69:190 py-56) 그대로 사용. */
@media (min-width: 1024px) {
  .stat-section { padding-top: 0; }
}

/* 스탯박스 — 모바일은 카드 껍데기(배경/보더/셰도우/패딩) 없이 순수 스택(69:190 실측,
   섹션 자체의 bg/elevated 채우기는 §9의 "모바일 잔여 채우기" 아티팩트라 재현하지 않음).
   데스크톱만 Fluent 카드(배경 bg/elevated + 1px border + shadow-card + 패딩64, 16:55 실측). */
.stat-box {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
@media (min-width: 1024px) {
  .stat-box {
    flex-direction: row; gap: var(--space-md);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-default);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-card);
  }
}
.stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
}
/* 라벨→값 gap: 데스크톱 12px(141:128 실측, 토큰 스케일에 12px가 없어 리터럴 사용 —
   --space-sm은 16px이라 오적용했던 리뷰 수정분). 모바일 8(--space-xs, 141:150 실측)은 유지. */
@media (min-width: 1024px) {
  .stat { gap: 12px; }
}
.stat__label {
  font-weight: 500; font-size: clamp(11px, 10.65px + 0.094vw, 12px);
  letter-spacing: clamp(1.5px, 1.324px + 0.047vw, 2px);
  color: var(--color-text-muted);
}
.stat__sep { font-size: 18px; line-height: 1; }
@media (min-width: 1024px) { .stat__sep { font-size: 22px; } }
.stat__sep--desktop { display: none; }
@media (min-width: 1024px) {
  .stat__sep--desktop { display: inline; }
  .stat__sep--mobile  { display: none; }
}

/* Process — 고스트 번호는 .t-ghost(border/default 컬러) 그대로 재사용. 그리드 gap은
   .grid-4col(데스크톱 32)이 아니라 16(--space-sm, 17:33 row-1 실측). 모바일은 라벨
   포함 전부 32 균일 수직 스택(69:216 gap-32), 스텝 내부 gap도 모바일 8/데스크톱 16으로 다르다. */
.process-grid {
  display: flex; flex-direction: column; gap: var(--space-lg);
  margin-top: var(--space-lg);
}
@media (min-width: 1024px) {
  .process-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
    margin-top: var(--space-xl);
  }
}
.process-step { display: flex; flex-direction: column; gap: var(--space-xs); position: relative; }
@media (min-width: 1024px) {
  .process-step { gap: var(--space-sm); }
}
/* 커넥터 — 17:59–17:61(라이트)/117:148–117:150(다크) 데스크톱 전용 16×1px 채움,
   border/default, 고스트 번호(104px) 세로 중앙(52px)에 위치. 모바일 프레임엔 없음. */
@media (min-width: 1024px) {
  .process-step + .process-step::before {
    content: ''; position: absolute; left: -16px;
    top: calc(clamp(64px, 49.92px + 3.756vw, 104px) / 2);
    width: 16px; height: 1px; background: var(--color-border-default);
  }
}
/* 스텝 제목 크기는 base.css의 .t-serif-24--22 모디파이어(HTML에서 직접 적용)가 담당 —
   69:220 "Define" text-22px 실측, 데스크톱 24는 공용 스케일과 동일 */

/* Quote — 상하 보더는 데스크톱 전용(18:35 border-t/border-b, 모바일 69:234엔 보더 없음).
   상하 패딩은 section--emphasis(64→160)가 이미 Home CTA와 동일 곡선이라 재사용. */
@media (min-width: 1024px) {
  .quote { border-top: 1px solid var(--color-border-default);
           border-bottom: 1px solid var(--color-border-default); }
}
/* 인용문→출처 간격: 모바일 16(--space-sm) / 데스크톱 32(--space-lg) — .stack.gap-md(24
   고정)로는 어느 쪽도 맞지 않아 전용 클래스로 분리(18:36/69:234 실측) */
.quote__inner { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (min-width: 1024px) {
  .quote__inner { gap: var(--space-lg); }
}

/* Values — 라벨→그리드 간격 데스크톱 64(--space-2xl, 18:39 gap-64)/모바일 32(--space-lg,
   69:237 gap-32). 카드 간격도 데스크톱 48(grid-3col 기본값과 동일)/모바일 32(grid-3col
   기본값 24와 다름) — .grid-3col보다 구체적인 결합 선택자로 오버라이드한다. */
.grid-3col.value-grid { margin-top: var(--space-lg); gap: var(--space-lg); }
@media (min-width: 1024px) {
  .grid-3col.value-grid { margin-top: var(--space-2xl); gap: var(--space-xl); }
}

.value-card {
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: var(--space-xs);
  padding: 0;
}
/* 상단 보더는 데스크톱 전용(18:44-family). 모바일 카드(69:239)는 shadow+bg만 있고
   보더가 없다 — About Hero/Quote/Stat Bar와 동일한 데스크톱 전용 장식 패턴. */
@media (min-width: 1024px) {
  .value-card {
    border-top: 1px solid var(--color-border-default);
    gap: var(--space-md); padding: var(--space-lg);
  }
}
.value-card__index {
  font-weight: 500; font-size: clamp(11px, 10.65px + 0.094vw, 12px); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════════════
   Work 목록 전용 스타일 (인벤토리 §10, §6) — Figma 34:34(L)/83:116(D)/70:116(모바일L)/
   266:232(모바일D) 직접 재실측. 브리프와 불일치한 값은 Figma를 따랐다(태스크 리포트 참조).
   ══════════════════════════════════════════════════════════════════ */

/* Work Hero — pt는 .section--hero와 동일 곡선(56→128)이라 값만 그대로 가져왔지만 pb는
   40→48(35:39/70:123 실측, .section--hero의 40→64는 Careers/Contact 전용이라 공유 불가)
   이라 전용 클래스로 분리. eyebrow→H1→서브 gap도 24(데스크톱)/20(모바일)로 균일한
   전용값(35:39 gap-24 / 70:123 gap-20 실측, 기존 .gap-md·.gap-lg 유틸의 모바일
   수렴값 28과 다름). */
.work-hero {
  padding-top: clamp(56px, 30.65px + 6.76vw, 128px);
  padding-bottom: clamp(40px, 37.18px + 0.751vw, 48px);
}
.work-hero__head { display: flex; flex-direction: column; gap: var(--space-md); }
@media (max-width: 1023px) {
  .work-hero__head { gap: 20px; }
}

/* Work Grid — 데스크톱 pt0(플러시)/pb96(36:39 실측, 기본 160 아님). 모바일 pt16(70:127
   실측, 기본 56 아님)/pb는 기본값(56)과 동일해 오버라이드 불필요. filter-tabs↔grid-2col
   gap도 48(데스크톱)/32(모바일)로 별도 래퍼에서 관리(브리프의 margin-top:var(--space-xl)
   고정값은 모바일에서 오답 — 32여야 하는데 48이 적용됨). */
.work-grid { padding-top: 16px; }
@media (min-width: 1024px) {
  .work-grid { padding-top: 0; padding-bottom: 96px; }
}
.work-grid__body { display: flex; flex-direction: column; gap: var(--space-xl); }
@media (max-width: 1023px) {
  .work-grid__body { gap: var(--space-lg); }
}

/* 필터 탭(36:40/70:128) — 활성 All = fill border/strong + on-accent, 비활성 = 1px
   border/default + text/primary. 패딩 16/8(데스크톱) → 14/8(모바일). h32, radius 0.
   <button>로 구현(js/work-filter.js) — 시각 상태는 이 블록 그대로, 클릭/키보드 시
   .is-active + aria-pressed 토글만 JS에서 담당한다. */
.filter-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.filter-tab {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; padding-inline: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-all);
  color: var(--color-text-primary);
  /* <button>은 브라우저 UA 스타일시트가 letter-spacing:normal을 강제하고
     base.css의 `font: inherit`으로는 복원되지 않는다. 부모 .t-tab의 4%(0.52px,
     인벤토리 §3·§6 "필터 탭 13/4%")를 명시적으로 되살린다. */
  letter-spacing: inherit;
}
@media (max-width: 1023px) { .filter-tab { padding-inline: 14px; } }
.filter-tab.is-active {
  background: var(--color-border-strong);
  border-color: var(--color-border-strong);
  color: var(--color-text-on-accent);
}

/* Work 카드(36:52/70:139) — gap 16(데스크톱)/10(모바일, 36:51 대응 70:139 실측 — 공용
   --space-sm과 다름). 이미지 보더는 사이트 전역 이미지 컨벤션(Home/About 전부 1px
   border/default)과 일치시켰다 — 단, Figma 데스크톱 노드(36:53)엔 보더 클래스가 없고
   모바일 노드(70:140)에만 있어 실측이 갈린다(태스크 리포트에 노드ID로 기록). 카드
   쉐도우는 모바일 project-card(70:139)에 shadow-card가 있으나 filter-tabs·Work Grid
   섹션에도 동일하게 bg/elevated가 번져 있어(§9 "leftover mobile fill" 아티팩트) 카드
   래퍼 레벨 쉐도우도 같은 아티팩트로 판단해 재현하지 않았다. */
.work-card { display: flex; flex-direction: column; gap: var(--space-sm); }
@media (max-width: 1023px) {
  .work-card { gap: 10px; }
}
/* 필터로 숨긴 카드 — display:flex가 [hidden]의 UA display:none을 덮어써 버리므로
   .mobile-nav[hidden] 패턴과 동일하게 명시적으로 override한다. */
.work-card[hidden] { display: none; }
.work-card img {
  width: 100%; height: auto; aspect-ratio: 568 / 355; object-fit: cover;
  border: 1px solid var(--color-border-default);
}

/* Capabilities(38:39/70:149) — 상단 1px 보더(모바일 포함, 데스크톱만 있는 다른 섹션과
   달리 여기는 양쪽 다 실측됨). 패딩 pt96/pb128은 데스크톱 전용(모바일은 기본 56/56과
   동일해 오버라이드 불필요). 라벨→그리드 gap 64(--space-2xl, 데스크톱)/28(모바일,
   기존 유틸에 없는 실측값이라 전용 클래스로 관리 — 브리프의 margin-top:var(--space-xl)
   고정값은 오답, 데스크톱은 48이 아니라 64여야 한다). 모바일 섹션 자체의 bg/elevated·
   shadow-card는 §9 클론 아티팩트로 재현하지 않는다(전역 제약 5). */
.capabilities { border-top: 1px solid var(--color-border-default); }
@media (min-width: 1024px) {
  .capabilities { padding-top: 96px; padding-bottom: 128px; }
}
.capabilities__body { display: flex; flex-direction: column; gap: var(--space-2xl); }
@media (max-width: 1023px) {
  .capabilities__body { gap: 28px; }
}
/* cap-grid(38:41) 데스크톱 gap 32 = .grid-4col 기본값과 동일(오버라이드 불필요).
   모바일 gap 28(70:149 실측)은 .grid-4col의 미검증 기본값(24)과 달라 여기서 교정. */
@media (max-width: 1023px) {
  .cap-grid { gap: 28px; }
}

/* 역량카드(38:42/70:151) — 패딩은 두 지점(모바일 24 균일 / 데스크톱 48·32)만 실측되어
   있고 중간 뷰포트 데이터가 없어 다른 카드형 컴포넌트(value-card·stat-box)와 동일하게
   1024 브레이크포인트에서 전환한다(연속 clamp 아님). gap 16(데스크톱)/12(모바일,
   38:42 gap-16 / 70:151 gap-12 실측 — 브리프의 var(--space-md)=24는 오답). 쉐도우는
   데스크톱 카드(38:42 등)엔 shadow-card가 명시되어 있으나 모바일 카드(70:151)엔 없음
   (모바일 섹션 레벨의 쉐도우는 위 아티팩트와 별개로 취급) — 데스크톱 전용으로 구현.
   2026-08-24: 화살표 행 삭제(Figma 229:130/139/148/157 등). 데스크톱은 콘텐츠가 줄어도
   높이 323 불변(Figma가 고정높이+spacer로 흡수) → height:323px 명시. 모바일은 hug라
   224 → 190으로 자연 축소(별도 CSS 불필요, 실측만 확인). */
.cap-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 1024px) {
  .cap-card {
    padding: 48px 32px;
    gap: var(--space-sm);
    box-shadow: var(--shadow-card);
    height: 323px;
  }
}
/* 아이콘 원(229:124 등) 48×48, stroke border/default 1px. 아이콘 자체 색은 text/secondary
   (raw stroke 실측값이 tokens.css의 text/secondary 값과 일치 — 브리프의 text/primary는 오답),
   22×22(브리프의 20×20 아님) */
.cap-card__icon {
  width: 48px; height: 48px; border-radius: 24px;
  border: 1px solid var(--color-border-default);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-secondary);
}
.cap-card__icon svg { width: 22px; height: 22px; }

/* ══════════════════════════════════════════════════════════════════
   Work 상세 공통 스타일(GDS/Samsung) — Figma GDS 40:39(L)/84:116(D)/71:116(모바일L)/
   266:315(모바일D), Samsung 42:44(L)/85:116(D)/71:179(모바일L)/266:382(모바일D) 직접
   재실측. 브리프와 불일치한 값은 Figma를 따랐다(태스크 리포트 참조 — 상단 백링크가
   Figma에 존재하지 않음, 섹션 라벨은 .t-label이 아니라 .t-caption, 본문은 text/secondary가
   아니라 text/primary, 아이템 gap 40 등 다수 편차).
   ══════════════════════════════════════════════════════════════════ */

/* article 본문 컬럼 — container--narrow가 폭(740px)을 담당, 여기는 세로 리듬만 소유.
   상하 패딩 48→96(모바일)/56→96(pb, 40:59 y=96·pb96 / 71:123 pt48·pb56 실측). 아이템
   gap 40은 반응형 아님(40:59~41:76, 71:123~71:174, 42:64~43:79, 71:186~71:238 전 항목
   간격 40으로 균일 실측 — 토큰 스케일에 40이 없어 리터럴 사용) */
.article-body {
  display: flex; flex-direction: column; gap: 40px;
  padding-block: clamp(48px, 31.10px + 4.507vw, 96px) clamp(56px, 41.92px + 3.756vw, 96px);
}

/* 타이틀 블록(키커+H1+[부제]+스탠드퍼스트) — gap 12(모바일)/16(데스크톱, 40:60 gap-16
   vs 71:124 gap-12 실측. GDS·Samsung 공통, 부제 유무와 무관) */
.article-title { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .article-title { gap: var(--space-sm); } }

/* GDS 번호 섹션/INTRODUCTION/OUTCOME 내부 gap — 12 고정(반응형 아님, 41:44·41:47·41:64와
   71:142·71:145·71:162 전부 12로 동일 실측) */
.article-block { display: flex; flex-direction: column; gap: 12px; }

/* Samsung 섹션(캡션 없음, 번호 없음) 전용 — 타이틀 블록과 동일하게 12(모바일)/16(데스크톱)
   반응형(43:52 gap-16 vs 71:211/71:215 gap-12 실측. GDS의 flat-12 섹션과는 다른 컴포넌트) */
.article-block--loose { gap: 12px; }
@media (min-width: 1024px) { .article-block--loose { gap: var(--space-sm); } }

/* 상세 이미지 — 사이트 전역 컨벤션대로 1px 보더(Figma 데스크톱 sec-image 노드엔 보더가
   빠져 있고 모바일 노드에만 있어 실측이 갈리지만, Task 8에서 이미 동일 패턴을 저작
   실수로 판정하고 양쪽 다 유지하기로 했다 — 이번에도 동일 판단 적용). GDS 02(알파
   WebP)만 article-figure--plain으로 보더 제거(양쪽 breakpoint 모두 보더 없음 실측). */
.article-body img {
  width: 100%; height: auto; display: block; object-fit: cover;
  border: 1px solid var(--color-border-default);
}
.article-figure--plain img { border: 0; }
/* figure 이미지→캡션 간격 — About의 .figure와 동일값(모바일12/데스크톱16)이라 그대로
   재사용하되, 클래스명은 분리한다(.figure는 aspect-ratio:568/355 고정이라 상세 이미지
   740폭 가변 비율과 충돌) */
.article-figure figcaption { margin-top: 12px; }
@media (min-width: 1024px) { .article-figure figcaption { margin-top: var(--space-sm); } }

/* 팩트박스 — bg/elevated + 상하 1px 보더 + shadow-card. 다른 카드형 컴포넌트(스탯박스·
   역량카드 등)는 데스크톱 전용 그림자지만, 팩트박스는 40:65·71:129·42:70·71:192 전부
   shadow 확인되어 모바일도 포함한다. 패딩 28/32(데스크톱)·20/0(모바일). 행 gap 12 고정,
   라벨 열 폭 120(데스크톱)/90(모바일), 라벨↔값 gap 24(데스크톱, --space-md)/12(모바일) */
.factbox {
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  padding: 20px 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 1024px) { .factbox { padding: 28px 32px; } }
.factbox__row { display: flex; gap: 12px; }
@media (min-width: 1024px) { .factbox__row { gap: var(--space-md); } }
.factbox dt { flex: 0 0 90px; text-transform: uppercase; }
@media (min-width: 1024px) { .factbox dt { flex-basis: 120px; } }
.factbox dd { flex: 1; min-width: 0; margin: 0; }

/* 디자인노트 — 상하 1px 보더 + 패딩 24는 데스크톱 전용(41:67·43:71 vs 모바일 71:165·
   71:230엔 보더·패딩 둘 다 없음 — Quote/Value 카드와 동일한 데스크톱 전용 장식 패턴).
   내부 gap 12 고정, 인용문은 .t-serif-26 + .t-serif-26--22 모디파이어(모바일 22 실측) */
.design-note { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) {
  .design-note {
    border-top: 1px solid var(--color-border-default);
    border-bottom: 1px solid var(--color-border-default);
    padding-block: var(--space-md);
  }
}

/* CREDITS — 라벨↔본문 gap 12(모바일)/8(데스크톱, --space-xs. 41:70 gap-8 vs 71:168
   gap-12 실측 — 타이틀 블록과 반대 방향으로 좁아지는 responsive gap). 카피 규칙상 여러
   줄을 <br> 단일 문단으로 쓰므로(Figma는 실제로 8px/12px gap의 개별 텍스트 4개), 문단
   내부 줄 간격을 line-height로 근사한다: 데스크톱 24px 텍스트+8px gap=32 / 모바일 22px
   텍스트+12px gap=34 (d<m 역순 clamp, .t-body-14 패턴과 동일) */
.credits { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .credits { gap: var(--space-xs); } }
.credits-lines { line-height: clamp(32px, 34.70px + -0.188vw, 34px); }

/* 국가/지역 섹션 블록(Rollout 상세 전용) — 제목+본문+매장블록(1~2개) 사이 gap.
   .article-block--loose와 동일 수치(12 모바일/16 데스크톱)라 그 클래스를 그대로 재사용한다
   (Figma 417:215 gap-16, 420:315 gap-12 실측 — Samsung 섹션과 우연히 동일 패턴). */

/* 2열 이미지 페어(Rollout 상세 전용) — 데스크톱 2열 gap 48(Figma 418:177 x=394,
   img폭 346 → 394-346=48 실측, 토큰 스케일에 없어 리터럴), 모바일 1열 스택 gap 12
   (421:187/188 y=0/258, img높이246 → 258-246=12, 기사 컬럼 표준 12 재사용). */
.image-pair { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 1024px) { .image-pair { grid-template-columns: 1fr 1fr; gap: 48px; } }

/* 매장블록(페어+캡션) — 캡션 간격이 두 브레이크포인트 모두 12로 고정(반응형 아님).
   .article-figure figcaption의 12/16 반응형 패턴과 달리 Figma 418:180 gap-12·
   421:186 gap-12로 동일 실측되어 별도 컴포넌트로 분리(대문자 변환 없음 — 418:181
   캡션 텍스트에 uppercase 스타일 없음, 로케이션/날짜 원문 그대로 표기). */
.store-block { display: flex; flex-direction: column; gap: 12px; }
.store-block figcaption { margin: 0; }

/* 커버 이미지+캡션(Retail System·Bracket 상세 전용) — store-block과 동일하게 12 고정
   gap(Figma 426:220 gap-12·426:345 gap-12 실측). 캡션도 uppercase 없음(426:222). */
.cover-block { display: flex; flex-direction: column; gap: 12px; }
.cover-block figcaption { margin: 0; }

/* 백링크 — Figma엔 페이지 최하단에 1개뿐(상단 인스턴스 없음, 40:59/71:123/42:64/71:186의
   첫 자식은 타이틀 블록이다). 데스크톱만 1px border/strong + 패딩 12/24(41:76/43:79
   실측), 모바일은 테두리 없이 pt8만(71:174/71:238 실측). */
.back-link {
  display: inline-flex; align-items: center; align-self: flex-start;
  text-transform: uppercase; color: var(--color-text-primary);
  padding-top: 8px;
}
@media (min-width: 1024px) {
  .back-link {
    border: 1px solid var(--color-border-strong);
    padding: 12px 24px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Careers 전용 스타일 (인벤토리 §10, §6) — Figma 45:49(L)/95:117(D)/72:116(모바일L)/
   266:446(모바일D) 직접 재실측. 브리프와 불일치한 값은 Figma를 따랐다(태스크 리포트 참조 —
   섹션 라벨이 전부 .t-label이 아니라 .t-eyebrow 계열, Organization pt/pb가 96/128,
   CTA가 section--emphasis 대칭 160이 아니라 pt64/pb128 비대칭에 보더 없음 등 다수 편차).
   ══════════════════════════════════════════════════════════════════ */

/* Careers Hero — pt128/pb64(데스크톱, 45:70 실측)은 .section--hero의 40→64 하한과
   달리 모바일도 56(72:123 py-56 균일, section--hero의 40 하한과 다름)이라 전용 클래스로
   분리. 내부 gap도 eyebrow→H1→서브 균일 20(모바일)/24(데스크톱, 45:70/72:123 gap 실측 —
   About 히어로의 head+서브 2단 구성과 달리 3요소가 한 줄기 flex-column) */
.careers-hero {
  padding-block: clamp(56px, 30.65px + 6.76vw, 128px) clamp(56px, 53.18px + 0.751vw, 64px);
}
.careers-hero__body { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .careers-hero__body { gap: var(--space-md); }
}

/* Loop 섹션 — 2026-08-01 개정으로 번호와 "DESIGN DEVELOPMENT LOOP" 라벨이 삭제됨
   (45:74/72:127 실측, 라벨 텍스트 노드 자체가 없다). 유일하게 섹션 자체가 명시적
   bg/primary 채우기를 갖는 인스턴스(§9) — 페이지 배경과 동일 색이라 시각적으로는
   무변화지만 인벤토리 실측을 그대로 재현한다. */
.loop-section { background: var(--color-bg-primary); }

/* Loop 그리드 — About Process와 동일한 4열/gap-16(데스크톱)·세로스택/gap-32(모바일)
   패턴이지만 라벨이 없어 margin-top이 없다(process-grid는 라벨 아래 여백을 소유하지만
   여기는 섹션 자체가 유일한 자식이라 0). */
.loop-grid {
  display: flex; flex-direction: column; gap: var(--space-lg);
}
@media (min-width: 1024px) {
  .loop-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm);
  }
}
.loop-step { display: flex; flex-direction: column; gap: var(--space-xs); }
@media (min-width: 1024px) {
  .loop-step { gap: var(--space-sm); }
}
/* 스텝 제목 크기는 base.css의 .t-serif-24--22 모디파이어(HTML에서 직접 적용)가 담당 —
   About Process와 동일한 22(모바일 하한)→24(데스크톱) 실측(92:123/96:121) */
/* 한글 라벨(기획/설계 · 엔지니어링 등) — 12px 고정(양쪽 breakpoint 동일 실측),
   자간 4%(92:124/96:122 tracking 0.48px). 사이트에 이 조합의 기존 유틸이 없어 전용 클래스 */
.loop-step__label { font-size: 12px; letter-spacing: 0.04em; }

/* Studio Life / Production Center — 데스크톱만 pt96/pb48(46:53/245:112 실측), 모바일은
   기본 .section 56/56(72:144 py-56)과 동일해 오버라이드 불필요. 96=--space-3xl,
   48=--space-xl과 정확히 일치해 토큰으로 치환(리뷰 지적 반영). */
@media (min-width: 1024px) {
  .photos-section { padding-block: var(--space-3xl) var(--space-xl); }
}
/* 사진 2장 그리드 — .grid-2col 모바일 기본값(32, --space-lg)과 달리 28(72:146 실측)이라
   이 페이지 전용으로 좁힌다. 데스크톱은 48(--space-xl)로 이미 일치. figcaption 간격도
   About의 .figure(모바일12/데스크톱16)와 달리 모바일만 10(72:146 gap-10 실측)이라 재정의 */
.careers-photos { gap: 28px; }
@media (min-width: 1024px) {
  .careers-photos { gap: var(--space-xl); }
}
.careers-photos figcaption { margin-top: 10px; }
@media (min-width: 1024px) {
  .careers-photos figcaption { margin-top: var(--space-sm); }
}
/* 사진 비율 — 마크업이 About과 동일한 공용 .figure를 재사용하지만(위 .figure img
   568/355 고정), Careers 4장은 568×380(데스크톱, 46:57/46:60/245:116/245:119)·
   327×218(모바일, 72:147/72:150/245:133/245:136)로 실제 원본(1136×1080 등)도 이 비율과
   일치한다. .figure img를 직접 고치면 About(568×355로 이미 게이트 통과)이 깨지므로
   Careers의 figure에만 붙는 .figure--tall로 스코프한다. 소스 순서에 기대지 않도록
   `.figure.figure--tall`(특이도 0-2-1)로 `.figure img`(0-1-1)보다 항상 더 구체적이게
   만든다 — 위 블록이 파일 뒤로 옮겨져도(리뷰에서 지적된 정렬 취약점) 깨지지 않는다. */
.figure.figure--tall img { aspect-ratio: 568 / 380; }

/* CTA — Home/About의 .cta(대칭 160, 데스크톱 보더-top)와 달리 Careers는 보더가 없고
   pt64/pb128 비대칭(46:62 실측), 모바일은 64 균일(72:152 py-64, section--emphasis의
   64 하한과 수치는 같지만 별도 클래스로 명시). 버튼 간격은 기존 .hero__actions 재사용
   (16 데스크톱/12 모바일이 그대로 일치, 46:66/72:156 실측). 64=--space-2xl,
   128=--space-4xl과 정확히 일치해 토큰으로 치환(리뷰 지적 반영). */
.careers-cta { padding-block: var(--space-2xl); }
@media (min-width: 1024px) {
  .careers-cta { padding-block: var(--space-2xl) var(--space-4xl); }
}
/* 내부 리듬(H2→서브→버튼) — 46:62 실측 데스크톱 24, 72:152 실측 모바일 20. layout.css의
   블랭킷 .gap-lg(데스크톱 32=--space-lg / 모바일 28)보다 좁다. .cta .gap-lg(24)와
   같은 패턴으로 스코프하되 여긴 모바일도 다르므로 두 브레이크포인트 모두 재정의한다.
   24=--space-md, 20은 토큰 스케일에 없는 실측값이라 리터럴. */
.careers-cta .gap-lg { gap: 20px; }
@media (min-width: 1024px) {
  .careers-cta .gap-lg { gap: var(--space-md); }
}
/* CTA 버튼 폭 — 46:67(HOW WE WORK)=141px, 46:69(CONTACT US)=126px, 텍스트 인셋 24
   양쪽(전역 .btn의 0 32px보다 좁음). 전역 .btn을 건드리면 8페이지 전체가 영향받으므로
   Careers CTA 버튼에만 스코프한다(인벤토리 §6 "Careers CTA 버튼 패딩 12/24"). */
@media (min-width: 1024px) {
  .careers-cta .btn { padding-inline: 24px; }
}
/* CTA 버튼 모바일 자간만 1px(72:158/72:160 실측) — 사이트 전역 .btn 모바일 0.5px과
   다른 유일한 인스턴스라 전역 클래스를 건드리지 않고 이 섹션에만 스코프 */
@media (max-width: 1023px) {
  .careers-cta .btn { letter-spacing: 1px; }
}

/* Organization — pt96/pb128(55:59 실측, Work Capabilities와 동일 값 재사용). 모바일은
   기본 .section 56/56(73:116 py-56)과 동일해 오버라이드 불필요. 96=--space-3xl,
   128=--space-4xl과 정확히 일치해 토큰으로 치환(리뷰 지적 반영). */
@media (min-width: 1024px) {
  .org-section { padding-block: var(--space-3xl) var(--space-4xl); }
}
/* 그리드 — layout.css .grid-org 모바일 gap(24, --space-md)이 Figma 실측(32, --space-lg,
   73:120)과 달라 여기서 교정한다. gap 교정은 반드시 max-width 가드를 둬야 한다 —
   가드 없이 재선언하면 소스 순서상 pages.css가 layout.css를 이겨 데스크톱의 34px까지
   32px로 덮어써 버린다(1차 구현에서 실제로 발생한 회귀, 브라우저 getBoundingClientRect로
   확인 후 수정). margin-top(라벨→그리드)은 모바일 32(73:117→73:120)/데스크톱
   64(55:60→55:63, --space-2xl) — 브리프의 고정 var(--space-xl)=48은 오답. */
.grid-org { margin-top: var(--space-lg); }
@media (max-width: 1023px) {
  .grid-org { gap: var(--space-lg); }
}
@media (min-width: 1024px) {
  .grid-org { margin-top: var(--space-2xl); }
}

/* 조직도 카드 — bg/elevated + 1px 보더 + shadow-card(254:113 등, 데스크톱·모바일 둘 다
   그림자 확인됨 — 카드형 컴포넌트 중 유일하게 모바일도 그림자 포함). 패딩
   24(모바일)→32(데스크톱) clamp. gap은 제목→하위팀 간격: 모바일 8(--space-xs,
   254:153 gap-8)/데스크톱 24(--space-md, 254:117 gap-24) — About Values와 반대로
   모바일이 더 좁다. 데스크톱만 높이 224 고정(모바일은 auto, 254:149 등 h 미고정).
   제목은 전부 <br>로 강제 2줄 처리되어 있어(카드1 포함) flex-column top-align만으로
   4카드의 하위팀 목록 첫 줄이 자연스럽게 정렬된다 — 별도 min-height/grid trick 불필요
   (브리프의 grid-template-rows:auto 1fr 제안과 다른 구현, 실측으로 불필요함을 확인). */
.org-card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 21.18px + 0.75vw, 32px);
  display: flex; flex-direction: column;
  gap: var(--space-xs);
}
/* 하위 팀 목록(.org-card__list) — 코드 리뷰 지적으로 <br>로 이어붙인 문단을 진짜
   <ul>/<li>로 전환(스크린리더가 한 문장으로 읽던 문제 수정). base.css의 전역 리셋
   (ul,ol{margin:0;padding:0;list-style:none}) 만으로 시각적으로 <br> 버전과 완전히
   동일해진다 — li 자체는 브라우저 기본 마진이 없고, list-style:none이라 마커 공간도
   없다. 폰트 크기/줄간격은 ul에 준 .t-body-14가 자식에게 상속되므로 별도 규칙 불필요
   (1440/375, 라이트/다크에서 세 목록의 첫 줄 y가 픽셀 단위로 동일함을 확인). */
@media (min-width: 1024px) {
  .org-card { height: 224px; gap: var(--space-md); }
}

/* ══════════════════════════════════════════════════════════════════
   Contact 전용 스타일 (인벤토리 §7, §10) — Figma 47:54(L)/86:116(D)/73:188(모바일L)/
   266:516(모바일D) 직접 재실측. 인터랙션 폼 없음(§10 "문의 폼 없음") — mailto/tel 링크만.
   ══════════════════════════════════════════════════════════════════ */

/* Hero 상하 패딩은 .section--hero(56→128 / 40→64)가 이미 47:75 실측(pt128/pb64,
   모바일 73:195 py56)과 정확히 일치해 전용 클래스 불필요, 이 클래스는 내부 세로
   리듬만 소유한다. eyebrow→grid 간격: 모바일 20(토큰 스케일에 없는 실측값, 73:195
   gap-20) / 데스크톱 48(--space-xl, 47:75 gap-48) */
.contact-hero__body { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .contact-hero__body { gap: var(--space-xl); }
}

/* intro(H1+서브)/info 2단 그리드 — 모바일은 단일 세로 스택(intro→info-info 간격도
   20, 73:195 균일 gap-20). 데스크톱은 2열(47:77 gap-64 = --space-2xl. 브리프의
   --space-xl(48)은 오답 — 좌 552 + gap64 + 우 568 = 1184 실측). */
.contact-hero__grid { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .contact-hero__grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
  }
}

/* H1→서브 간격 — 모바일 20(73:197~73:198 실측) / 데스크톱 24(--space-md, 47:78
   gap-24. 브리프의 gap-lg(32)는 오답) */
.contact-hero__intro { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .contact-hero__intro { gap: var(--space-md); }
}

/* 정보 4블록 — 데스크톱 32(--space-lg, 47:81 gap-32) / 모바일 20(73:199 gap-20)이나
   서브→정보블록 그룹 앞에만 추가 pt-12가 있어(73:199 실측, 나머지 요소 간
   균일한 20과 다른 유일한 예외) margin-top:12로 보정한다(20+12=32 실측과 무관,
   contact-hero__grid의 20과 합산해 실측 그대로 재현). 데스크톱은 이 여백이 없다
   (47:81이 47:78과 동일한 y=0에서 시작, offset 없음). */
.contact-info { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }
@media (min-width: 1024px) {
  .contact-info { gap: var(--space-lg); margin-top: 0; }
}
.contact-info__item { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 1024px) {
  .contact-info__item { gap: var(--space-xs); }
}
/* 정보 값 줄간격 — 47:84/87/90/93(데스크톱), 73:202/205/208/211(모바일) 전부 23px/15px
   = 150%(인벤토리 §3 "15/150%(Contact)"). 공용 .t-body-15는 160%(base.css)라 Contact
   에서만 좁힌다 — 다른 7페이지의 .t-body-15 사용처는 건드리지 않는다. */
.contact-info .t-body-15 { line-height: 1.5; }
.contact-info a:hover { color: var(--color-accent-hover); }

/* Location — 섹션 상하 패딩은 .section--sm(56→64)이 48:58 실측(py64, 모바일 73:212
   py56)과 정확히 일치. 텍스트 컬럼/사진 2단 구성은 모바일 세로 스택(gap-20,
   48:59~48:61/73:212~73:214 균일 실측) → 데스크톱 그리드. 컬럼 폭은 텍스트
   552(가변) + gap64(--space-2xl) + 사진 568(고정) = 1184 실측(브리프의 560+64+560은
   audit 문서 오기 — Figma 48:59/48:62 폭이 552/568로 다르다) — 우측 컬럼을 사진의
   실제 폭 568px로 고정하고 좌측은 1fr로 나머지를 채운다. items-center로 텍스트를
   사진 높이(360) 중앙에 배치(48:59 y=157, 이미지 y=64, 텍스트 높이174 기준
   (360-174)/2=93=157-64 정확히 일치 — 상단 정렬이 아니라 수직 중앙 정렬이다). */
.contact-location { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .contact-location {
    display: grid; grid-template-columns: 1fr 568px; align-items: center;
    gap: var(--space-2xl);
  }
}
.contact-location__text { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 1024px) {
  .contact-location__text { gap: var(--space-md); }
}

/* 건물 사진 — 568×360(568/355 고정인 공용 .figure와 다른 비율이라 전용 클래스로
   분리). 보더는 양 브레이크포인트 모두 적용한다: Figma는 모바일(73:215)에만 보더가
   있고 데스크톱(48:62)엔 없지만, 이는 Work 카드 이미지에서 이미 판정된 것과 동일한
   저작 누락이다(Task 8 게이트 RULING: ProjectCard 컴포넌트 3:12는 이미지 노드에
   보더를 갖고 있고 인벤토리 §5도 전 이미지 프레임에 1px border/default를 기록).
   .work-card img·.figure img와 동일하게 무조건 적용한다. 쉐도우는 양쪽 다 없음. */
.contact-map { margin: 0; }
.contact-map img {
  width: 100%; height: auto; aspect-ratio: 568 / 360; object-fit: cover;
  border: 1px solid var(--color-border-default);
}