/* ============================================================================
   sections/about.css — sub0301_About (221:537 · 1920×10944)
   ----------------------------------------------------------------------------
   리듬: 다크(#132033) 히어로·Our Story·Core Values·The Team·Recognition ↔
         라이트(#FFFFFF) Vision/Mission·Milestones·Certificates·Locations 교차.
   액센트 이원화: 다크 위 #28C6FF(--df-cyan) / 라이트 위 #006CD2(--df-blue).
   골격: 컨테이너 1600 · 좌우 160 · 섹션 py 120 · 타이틀→콘텐츠 70.
   유동 변환: clamp 손계산(1920 기준 — 주석에 시안값).
   ========================================================================== */
@layer components {

  [data-page="about"] {
    /* 페이지 전용 보조 토큰 (tokens-sub0301 실측) */
    --ab-fs-26: clamp(17px, 1.3542vw, 26px);    /* VM 라벨·Recognition 타이틀 26 */
    --ab-sp-70: clamp(36px, 3.6458vw, 70px);    /* titleToContentGap 70 */
    --ab-sp-150: clamp(40px, 7.8125vw, 150px);  /* 좌 타이틀 555 ↔ 우 콘텐츠 gap 150 */
    --ab-sp-25: clamp(16px, 1.3021vw, 25px);    /* 팀 카드 gap 25 */
    --ab-sp-10: clamp(6px, 0.5208vw, 10px);     /* Recognition 카드 gap 10 */
    --ab-cert-well: #f8f8fa;                    /* 인증서 웰 bg (221:738) */
    --ab-cert-bd: #dddddd;                      /* 웰·지도 1px 테두리 (221:738/780) */
    --ab-pill-bg: #f5f5f5;                      /* Role 알약 bg (221:784) */
    --ab-pill-bd: #e8e8e8;                      /* Role 알약 border (221:784) */
    --ab-grey-44: #444444;                      /* 인증서 설명문 (221:742) */
  }

  /* ── 공통 조각 ─────────────────────────────────────────────────────────── */
  .ab-light { background: var(--df-white); color: var(--df-ink); }

  .ab-eyebrow { font-weight: 700; font-size: var(--fs-16); line-height: 1; }
  .ab-eyebrow--cyan { color: var(--df-cyan); }
  .ab-eyebrow--blue { color: var(--df-blue); }

  .ab-h2 { margin-block-start: var(--sp-20); font-weight: 700; font-size: var(--fs-50); line-height: 1.4; }
  .ab-h2--ink { color: var(--df-ink); }

  .ab-body { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; }

  /* 시안 고정폭 텍스트 프레임 재현 — 블록 스팬이 프레임 상자(w·h)를 만든다.
     (Figma 텍스트 노드는 고정폭 상자, 브라우저 잉크는 글리프 상자 — 상자를 실요소로) */
  .ab-tf { display: block; }

  /* 다크/라이트 섹션 상단 1px 헤어라인 (221:544 · 221:578 · 221:770) */
  .ab-rule { display: block; block-size: 1px; inline-size: 100%; background: var(--df-line-w10); }
  .ab-rule--ink { background: var(--df-line-k10); }

  /* ══ 1. 히어로 (221:540 · y214 h456 · 다크) ════════════════════════════ */
  .ab-hero {
    /* 고정 헤더(94) + 섹션 상패딩 120 = 시안 y214. 하패딩은 콘텐츠 박스(221:540)가 진다 */
    padding-block: calc(var(--hd-h) + var(--sp-120)) 0;
  }
  .ab-hero__grid {
    padding-block-end: var(--sp-120);                  /* 221:540 h456 = 콘텐츠 336 + 120 */
    display: grid;
    grid-template-columns: minmax(0, 650fr) minmax(0, 850fr);  /* 650 / gap 100 / 850 */
    gap: var(--sp-100);
    align-items: start;
  }
  .ab-hero__twrap {
    position: relative;
    max-inline-size: 100%;
    font-weight: 700; font-size: var(--fs-80); line-height: 1.4; color: var(--df-white);
  }
  .ab-hero__title { font: inherit; color: inherit; max-inline-size: 16.25em; }
  .ab-hero__ln { display: block; }
  .ab-hero__leadbox { padding-block-start: clamp(24px, 7.2917vw, 140px); }
  .ab-hero__lead { font-weight: 400; font-size: var(--fs-20); line-height: 1.8; opacity: 0; }

  /* ══ 2. Our Story (221:544 · y670 h1315 · 다크 · 상단 헤어라인) ════════ */
  .ab-story { padding-block-end: 0; }
  .ab-story__con { padding-block-end: var(--sp-120); }  /* 221:544 h1315 = 헤어라인~이미지 + 120 */
  .ab-story .ab-sec-title { margin-block-start: var(--sp-120); }  /* 헤어라인 → 타이틀 = py120 */
  .ab-story__cols {
    margin-block-start: var(--ab-sp-70);         /* 타이틀 → 본문 70 (897→967) */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 765 + gap 70 + 765 */
    gap: var(--ab-sp-70);
  }
  .ab-story__fig { margin-block-start: var(--ab-sp-70); overflow: clip; }  /* 본문 → 이미지 70 (1095→1165) */
  .ab-story__crop { display: block; inline-size: 100%; aspect-ratio: 1600 / 700; }  /* 221:551 */
  .ab-story__fig img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* ══ 3. Vision / Mission (221:552 · y1985 h1090 · #FFFFFF 풀블리드) ════ */
  .ab-vm { padding-block: var(--sp-120); }
  .ab-vm__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 790 + gap 20 + 790 */
    gap: var(--sp-20);
  }
  .ab-vm__card {
    position: relative; overflow: clip;
    min-block-size: clamp(520px, 44.2708vw, 850px);    /* 카드 h850 */
    padding: var(--sp-50) clamp(32px, 3.6458vw, 70px); /* py50 px70 */
    display: flex; flex-direction: column; justify-content: center;
    gap: var(--sp-100);                                /* 라벨 → 텍스트그룹 gap 100 */
    text-align: center;
    color: var(--df-white);
  }
  .ab-vm__bg { position: absolute; inset: 0; z-index: 0; }
  .ab-vm__bg img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* 카드1(221:554): black 베이스 + 이미지 opacity .3 */
  
  /* 카드2(221:559): 이미지 + rgba(0,0,0,.3) 암막 */
  .ab-vm__label { position: relative; z-index: 1; font-weight: 700; font-size: var(--ab-fs-26); line-height: 1; color: var(--df-cyan); }
  .ab-vm__txt { position: relative; z-index: 1; max-inline-size: clamp(280px, 33.8542vw, 650px); margin-inline: auto; }
  .ab-vm__title { font-weight: 700; font-size: var(--fs-40); line-height: 1.6; }
  /* 타이틀 → 본문 gap 30 (추정 — flex 세로중앙으로 y 확정 불가, notes 특이 7) */
  .ab-vm__desc { margin-block-start: var(--sp-30); }

  /* ══ 4. Core Values (221:564 · y3075 h1116 · 다크 · 이미지 카드 4) ═════ */
  .ab-cv { padding-block: 0; }
  .ab-cv__con { padding-block: var(--sp-120); }        /* 221:564 h1116 = 120+타이틀+70+700+120 */
  .ab-cv__list {
    margin-block-start: var(--ab-sp-70);               /* 타이틀 → 리스트 70 (3301→3371) */
    display: grid;
    grid-template-columns: minmax(0, 600fr) repeat(3, minmax(0, 313fr));  /* 600 + 313.33×3 · gap 20 */
    gap: var(--sp-20);
    --ab-cv-flex-dur: 0.7s;
    --ab-cv-desc-in-delay: 0.52s;                     /* flex 확장 후 설명문 등장 (0.72s → 0.2s 단축) */
    --ab-cv-desc-in-dur: 0.35s;
  }
  .ab-cv__card {
    position: relative; overflow: clip;
    min-block-size: clamp(420px, 36.4583vw, 700px);    /* 카드 h700 */
    padding: var(--sp-50);                             /* p50 */
    display: flex; flex-direction: column; justify-content: space-between;  /* 시안 justify-between */
    color: var(--df-white);
    cursor: default;
  }
  .ab-cv__bg { position: absolute; inset: 0; z-index: 0; }
  .ab-cv__bg img {
    display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
    transform: scale(1); transform-origin: center center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ab-cv__bg::after { content: ""; position: absolute; inset: 0; background: var(--df-dim-20); }  /* 암막 .2 */
  .ab-cv__name { position: relative; z-index: 1; font-weight: 700; font-size: var(--fs-30); line-height: 1; }
  .ab-cv__desc {
    position: relative; z-index: 1;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: none;                                 /* 숨김 = duration 없이 즉시 */
  }
  /* PC — hover 시 첫 카드(600fr)만큼 확장 + 설명문 노출 */
  @media (width >= 1280px) and (hover: hover) {
    .ab-cv__list {
      display: flex;
      align-items: stretch;
    }
    .ab-cv__card {
      flex: 313 1 0;
      min-inline-size: 0;
      transition: flex var(--ab-cv-flex-dur) cubic-bezier(0.16, 1, 0.3, 1);
    }
    .ab-cv__card:first-child { flex: 600 1 0; }
    .ab-cv__card:hover {
      flex: 600 1 0;
      z-index: 1;
    }
    /* 리스트 위에 있을 때만 첫 카드 축소 — 카드 gap 이동 시 깜빡임 방지 */
    .ab-cv__list:hover .ab-cv__card:first-child:not(:hover) { flex: 313 1 0; }
    /* 리스트 밖(기본) — 첫 카드 설명문만 표시 */
    .ab-cv__list:not(:hover) .ab-cv__card:first-child .ab-cv__desc {
      opacity: 1; visibility: visible; transform: translateY(0);
      transition: none;
    }
    /* 리스트 안 + 첫 카드 비호버 — 설명문 숨김(2~4번 왔다갔다 할 때 1번 노출 방지) */
    .ab-cv__list:hover .ab-cv__card:first-child:not(:hover) .ab-cv__desc {
      opacity: 0; visibility: hidden; transform: translateY(12px);
      transition: none;
    }
    .ab-cv__card:hover .ab-cv__desc {
      opacity: 1; visibility: visible; transform: translateY(0);
      transition:
        opacity var(--ab-cv-desc-in-dur) ease var(--ab-cv-desc-in-delay),
        transform var(--ab-cv-desc-in-dur) ease var(--ab-cv-desc-in-delay),
        visibility 0s linear var(--ab-cv-desc-in-delay);
    }
    .ab-cv__card:hover .ab-cv__bg img { transform: scale(1.06); }
  }

  /* ══ 5. The Team (221:578 · y4191 h969 · 다크 · 상단 헤어라인) ═════════ */
  .ab-team { padding-block-end: 0; }
  .ab-team__con { padding-block-end: var(--sp-120); }  /* 221:578 h969 */
  .ab-team__head {
    margin-block-start: var(--sp-120);                 /* 헤어라인 → 타이틀 = py120 */
    display: flex; justify-content: space-between; align-items: center;  /* 통계는 세로중앙 (4327 실측) */
    gap: var(--ab-sp-70);                              /* 타이틀 1182 + 70 + 통계 348 (221:580/583) */
  }
  .ab-team__head .ab-sec-title { flex: 1 1 auto; }     /* 221:580 w1182 = 1600−70−348 */
  .ab-team__stats { display: flex; align-items: center; gap: var(--sp-50); }  /* stat·라인·stat gap 50 */
  .ab-team__stat { text-align: center; }
  .ab-team__num { font-weight: 700; font-size: var(--fs-40); line-height: 1; color: var(--df-cyan); }
  .ab-team__lbl { margin-block-start: var(--sp-20); font-weight: 700; font-size: var(--fs-16); line-height: 1; }
  .ab-team__vline { display: block; inline-size: 1px; block-size: var(--sp-60); background: var(--df-line-w10); }  /* 221:587 60px */
  .ab-team__list {
    margin-block-start: var(--ab-sp-70);               /* 타이틀영역 → 리스트 70 (4418→4488) */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 300×5 · gap 25 */
    gap: var(--ab-sp-25);
    align-items: start;                                /* 시안: 카드 2·4·5 는 h523 으로 들쭉 (notes 특이 8) */
  }
  .ab-team__card { text-align: center; }
  .ab-team__por { inline-size: 100%; aspect-ratio: 300 / 350; overflow: clip; }
  .ab-team__por img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* 포트레이트 뒤 단색 배경 — 인물별 상이 (221:593/602/611/620/629) */
  .ab-team__por--1 { background-color: #84817d; }
  .ab-team__por--2 { background-color: #515152; }
  .ab-team__por--3 { background-color: #494651; }
  .ab-team__por--4 { background-color: #6b7a9a; }
  .ab-team__por--5 { background-color: #a2a1a1; }
  .ab-team__txt { margin-block-start: var(--sp-30); }  /* 포트레이트 → 텍스트 30 (4838→4868 · 221:594) */
  .ab-team__meta { margin-block-start: var(--sp-30); } /* 이름그룹 → 경력그룹 30 (4926→4956 · 221:598) */
  .ab-team__name { font-weight: 700; font-size: var(--fs-30); line-height: 1; }
  .ab-team__role { margin-block-start: var(--ab-sp-10); font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-cyan); }
  .ab-team__exp { font-weight: 400; font-size: var(--fs-16); line-height: 1; color: rgba(255, 255, 255, 0.5); }
  .ab-team__duty { margin-block-start: var(--ab-sp-10); font-weight: 400; font-size: var(--fs-16); line-height: 1.8; }

  /* ══ 6. Milestones (221:637 · y5160 h1212 · #FFFFFF 풀블리드) ══════════ */
  .ab-ms { padding-block: 0; }
  .ab-ms__grid {
    padding-block: var(--sp-120);                      /* 221:638 con h1212 = 120+972+120 */
    display: grid;
    /* 271(타이틀) / 400(건물) / 629(연혁) · gap 150 (431→581 · 981→1131) */
    grid-template-columns: minmax(0, 271fr) minmax(0, 400fr) minmax(0, 629fr);
    gap: var(--ab-sp-150);
    align-items: start;
  }
  /* 시안 "Our History" 는 271 칼럼에서 1줄 hug — 설계폭(≥1440)에서만 nowrap 허용(규칙 5·WIRE-B) */
  @media (width >= 1440px) {
    .ab-ms__grid .ab-h2 { white-space: nowrap; }
  }
  .ab-ms__fig { inline-size: 100%; overflow: clip; }
  .ab-ms__crop { display: block; inline-size: 100%; aspect-ratio: 400 / 600; }  /* 221:642 */
  .ab-ms__fig img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ab-ms__list { display: grid; gap: var(--sp-100); }  /* 연도그룹 gap 100 (5372→5472) */
  .ab-ms__group { display: grid; gap: var(--sp-20); }  /* 연도→행·행간 20 (5320→5340 · 5596→5616) */
  .ab-ms__year { font-weight: 700; font-size: var(--fs-40); line-height: 1; color: var(--df-ink); }
  .ab-ms__row {
    display: grid;
    grid-template-columns: clamp(34px, 2.6042vw, 50px) minmax(0, 1fr);  /* 월 50 + gap 20 + 내용 */
    column-gap: var(--sp-20);
  }
  .ab-ms__row p { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; color: var(--df-ink); }

  /* ══ 7. Recognition (221:676 · y6372 h805 · #132033 명시) ══════════════ */
  .ab-rec { padding-block: 0; background: var(--df-navy); }
  .ab-rec__con { padding-block: var(--sp-120); }       /* 221:677 con h805 = 120+565+120 */
  .ab-rec__list {
    margin-block-start: var(--ab-sp-70);               /* 타이틀 → 리스트 70 (6598→6668) */
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)); /* 등폭 5칸 312.2 · gap 10 */
    gap: var(--ab-sp-10);
  }
  /* DOM 은 텍스트(684 계열) → 아이콘(683 계열) 순(스냅샷 좌표 대조 순서),
     시각 순서는 시안 그대로 아이콘이 위 — order 로만 뒤집는다(페인트·기하 불변) */
  .ab-rec__card { padding-inline: var(--sp-20); display: flex; flex-direction: column; }
  .ab-rec__ic { order: -1; }
  /* 세로 구분선 — 마지막 칸 제외 (221:682~706 stroke) */
  .ab-rec__card:not(:last-child) { border-inline-end: 1px solid var(--df-line-w10); }
  .ab-rec__ic {
    block-size: clamp(52px, 4.1667vw, 80px);           /* 아이콘 h80 */
    margin-inline: auto;
    background-color: transparent;
  }
  .ab-rec__ic--1 { aspect-ratio: 80 / 80; }            /* 221:683 */
  .ab-rec__ic--2 { aspect-ratio: 75 / 80; }            /* 221:691 */
  .ab-rec__ic--3 { aspect-ratio: 77 / 80; }            /* 221:699 */
  .ab-rec__ic--4 { aspect-ratio: 72 / 80; }            /* 221:707 */
  .ab-rec__ic--5 { aspect-ratio: 66 / 80; }            /* 221:715 */
  .ab-rec__ic img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .ab-rec__txt { margin-block-start: var(--sp-30); }   /* 아이콘 → 텍스트 30 (6748→6778 · 221:684) */
  .ab-rec__title {
    min-block-size: 3.2em;                             /* 시안 타이틀 박스 2줄 고정 h84 (26×1.6×2) */
    font-weight: 700; font-size: var(--ab-fs-26); line-height: 1.6; text-align: center;
  }
  .ab-rec__checks { margin-block-start: var(--sp-30); display: grid; gap: var(--sp-20); }  /* 6862→6892 · 항목 gap 20 */
  .ab-rec__chk {
    display: grid;
    grid-template-columns: clamp(18px, 1.25vw, 24px) minmax(0, 1fr);  /* check 24 + gap 6 */
    column-gap: clamp(4px, 0.3125vw, 6px);
    align-items: start;
  }
  .ab-rec__chk .ph { aspect-ratio: 1; background-color: transparent; }
  .ab-rec__chk img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .ab-rec__chk p { font-weight: 400; font-size: var(--fs-16); line-height: 1.8; }

  /* ══ 8a+8b 공통 섹션(221:727 · y7177 h3179 · #FFFFFF) ══════════════════ */
  .ab-cert__con { padding-block: var(--sp-120); }      /* 221:728 con h1510 = 120+1270+120 */
  .ab-cert__grid, .ab-loc__grid {
    display: grid;
    grid-template-columns: minmax(0, 555fr) minmax(0, 895fr);  /* 좌 555 / gap 150 / 우 895 */
    gap: var(--ab-sp-150);
    align-items: start;
  }
  .ab-cert__intro { margin-block-start: var(--sp-20); }  /* h2 → 본문 20 (7473→7493) */
  /* 웹폰트 진폭이 Figma 렌더보다 ~2.7% 넓어 555px 에서 3줄이 4줄로 밀린다(221:732).
     시안의 3줄 줄바꿈을 재현하기 위한 렌더 보정 — 페인트 없음, 설계폭(≥1440)에서만(WIRE-B) */
  @media (width >= 1440px) {
    .ab-cert__intro { inline-size: 102.8%; }
  }
  .ab-cert__groups { display: grid; gap: var(--ab-sp-70); }  /* 그룹1 끝 7897 → 그룹2 7967 = 70 */
  .ab-cert__gtitle { font-weight: 700; font-size: var(--fs-30); line-height: 1; color: var(--df-ink); }
  .ab-cert__cards {
    margin-block-start: var(--sp-30);                  /* h3 → 카드 30 (7327→7357) */
    display: grid;
    gap: var(--sp-20);                                 /* 카드 285 · gap 20 */
    justify-content: start;
  }
  .ab-cert__cards--2 { grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--sp-20)) / 3))); }
  .ab-cert__cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-cert__well {
    inline-size: 100%; aspect-ratio: 285 / 420;        /* 웰 285×420 */
    background: var(--ab-cert-well);
    border: 1px solid var(--ab-cert-bd);
    display: grid; place-items: center;
  }
  .ab-cert__scan {
    inline-size: 70.175%;                              /* 스캔 200/285 */
    aspect-ratio: 200 / 280;
    box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);     /* certShadow (221:739) */
  }
  .ab-cert__scan img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ab-cert__txt { margin-block-start: var(--sp-20); }  /* 웰 → 텍스트 20 (7777→7797 · 221:740) */
  .ab-cert__name { font-weight: 600; font-size: var(--fs-18); line-height: 1.8; text-align: center; color: var(--df-ink); }
  .ab-cert__desc {
    margin-block-start: var(--ab-sp-10);               /* 타이틀 → 설명 10 (7829→7839) */
    font-weight: 400; font-size: var(--fs-16); line-height: 1.8; text-align: center; color: var(--ab-grey-44);
  }

  /* ══ 8b. Locations (221:770 · y8697 h1659 · 화이트 · 상단 헤어라인) ════ */
  .ab-loc__con { padding-block-end: var(--sp-120); }   /* 221:770 con h1659 */
  .ab-loc__grid { margin-block-start: var(--sp-120); } /* 헤어라인 → 타이틀 = py120 */
  .ab-loc__list { display: grid; gap: var(--ab-sp-70); }  /* 지점 gap 70 (9492→9562) */
  .ab-loc__sub { font-weight: 600; font-size: var(--fs-18); line-height: 1; color: var(--df-blue); }
  .ab-loc__name { margin-block-start: var(--ab-sp-10); font-weight: 700; font-size: var(--fs-30); line-height: 1; color: var(--df-ink); }
  .ab-loc__mapwrap {
    margin-block-start: var(--sp-30);
    inline-size: 100%;
    max-inline-size: 100%;
  }
  .ab-loc__map {
    inline-size: 100%;
    max-inline-size: 100%;
    aspect-ratio: 898 / 420;
    block-size: auto;
    border: 1px solid var(--ab-cert-bd);
    overflow: clip;
  }
  .ab-loc__map-frame {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: 100%;
    border: 0;
  }
  .ab-loc__meta { margin-block-start: var(--sp-30); }  /* 지도 → 주소블록 30 (9326→9356 · 221:781) */
  .ab-loc__addr {
    font-weight: 700; font-size: var(--fs-24); line-height: 1.8; color: var(--df-ink);
  }
  .ab-loc__rolerow {
    margin-block-start: var(--ab-sp-10);               /* 주소 → Role 행 10 (9442→9452) */
    display: flex; align-items: center; gap: var(--ab-sp-10);
  }
  .ab-loc__pill {
    display: inline-flex; align-items: center;
    padding: var(--ab-sp-10) var(--sp-20);             /* py10 px20 */
    border-radius: var(--r-pill);                      /* radius 100 (221:784) */
    background: var(--ab-pill-bg);
    border: 1px solid var(--ab-pill-bd);
    font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-ink);
  }
  .ab-loc__roletxt { font-weight: 400; font-size: var(--fs-18); line-height: 1; color: var(--df-ink); }  /* 시안 lh1.0 (221:786) */

  /* ══ 맨위로 버튼 (data-invented · scroll-to-top-smooth) ════════════════ */
  .ab-top {
    position: fixed; z-index: 90;
    inset-block-end: var(--sp-30); inset-inline-end: var(--sp-30);
    inline-size: clamp(44px, 2.6042vw, 50px); aspect-ratio: 1;
    border-radius: 50%;
    background: var(--df-navy-2);
    border: 1px solid var(--df-line-w10);
    display: grid; place-items: center;
    /* 표시는 --mo 로 — motion 레이어의 [data-motion-done]{opacity:var(--mo,1)} 와 합의 */
    --mo: 0;
    opacity: var(--mo);
    visibility: hidden; pointer-events: none;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear .3s;
  }
  .ab-top.is-on {
    --mo: 1;
    visibility: visible; pointer-events: auto;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear 0s;
  }
  .ab-top__ar {
    display: block; inline-size: 30%; aspect-ratio: 1;
    margin-block-start: 18%;
    border-block-start: 2px solid var(--df-white);
    border-inline-start: 2px solid var(--df-white);
    transform: rotate(45deg);                          /* 축약형 — P44 */
  }

  /* ════ 반응형 (허용 브레이크포인트: 1440/1280/1024/768/480) ═════════════ */
  @media (width < 1280px) {
    /* Core Values 4 → 2 (약수) — 폭 균등화 */
    .ab-cv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-cv__card { min-block-size: clamp(360px, 46vw, 560px); }
    .ab-cv__list:not(:hover) .ab-cv__card:first-child .ab-cv__desc {
      opacity: 1; visibility: visible; transform: none;
    }
  }
  @media (width < 1280px) and (hover: hover) {
    .ab-cv__card:hover .ab-cv__desc {
      opacity: 1; visibility: visible; transform: translateY(0);
      transition:
        opacity 0.35s ease 0.12s,
        transform 0.35s ease 0.12s,
        visibility 0s linear 0.12s;
    }
    .ab-cv__list:hover .ab-cv__card:not(:hover) .ab-cv__desc {
      opacity: 0; visibility: hidden; transform: translateY(12px);
      transition: none;
    }
    .ab-cv__card:hover .ab-cv__bg img { transform: scale(1.06); }
  }

  @media (width < 1024px) {
    .ab-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .ab-hero__leadbox { padding-block-start: 0; }
    .ab-story__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .ab-vm__list { grid-template-columns: minmax(0, 1fr); }
    .ab-team__head { flex-direction: column; align-items: flex-start; }
    /* 팀 5칸 → 1칸 (5의 약수) — 카드 자연폭 유지 */
    .ab-team__list { grid-template-columns: minmax(0, 1fr); }
    .ab-team__card { max-inline-size: clamp(280px, 60vw, 360px); margin-inline: auto; inline-size: 100%; }
    .ab-ms__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
    .ab-ms__fig { max-inline-size: clamp(280px, 52.0833vw, 400px); }
    /* Recognition 5칸 → 1칸 (5의 약수) — 세로선을 가로선으로 전환 */
    .ab-rec__list { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .ab-rec__card:not(:last-child) {
      border-inline-end: 0;
      border-block-end: 1px solid var(--df-line-w10);
      padding-block-end: var(--sp-30);
    }
    .ab-rec__card { padding-inline: 0; }
    .ab-rec__title { min-block-size: 0; }
    .ab-cert__grid, .ab-loc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
  }

  @media (width < 768px) {
    /* Core Values 2 → 1 · ISO 3칸 → 1칸 (약수) */
    .ab-cv__list { grid-template-columns: minmax(0, 1fr); }
    .ab-cv__card:first-child .ab-cv__desc,
    .ab-cv__card .ab-cv__desc {
      opacity: 1; visibility: visible; transform: none;
    }
    .ab-cert__cards--3 { grid-template-columns: minmax(0, 1fr); }
    .ab-cert__cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ab-team__stats { gap: var(--sp-30); }
  }

  @media (width < 480px) {
    .ab-cert__cards--2 { grid-template-columns: minmax(0, 1fr); }
    .ab-loc__rolerow { flex-wrap: wrap; }
  }
}

/* 맨위로 버튼은 JS 전용 발명 요소 — JS 없으면 기능이 없으므로 숨긴다(A11Y11) */
html:not(.js-motion) .ab-top { display: none; }