/* ============================================================================
   sections/technology.css — sub0201_Technology (221:344 · 1920×12006)
   ----------------------------------------------------------------------------
   리듬: 다크(#132033) 히어로·Philosophy·4 Pillars·Scalability ↔
         라이트(white/#F6F6F6) Pillar 01~04·Validation 교차.
   액센트 이원화: 다크 위 #28C6FF(--df-cyan) / 라이트 위 #006CD2(--df-blue).
   골격: 컨테이너 1600 · 좌우 160 · 섹션 py 120 · 타이틀→콘텐츠 70.
   유동 변환: clamp 손계산(1920 기준 — 주석에 시안값).
   ========================================================================== */
@layer components {

  [data-page="technology"] {
    /* 페이지 전용 보조 토큰 (tokens-sub0201 실측) */
    --t-fs-26: clamp(17px, 1.3542vw, 26px);   /* 카드 타이틀 26 */
    --t-sp-70: clamp(36px, 3.6458vw, 70px);   /* titleToContentGap 70 */
    --t-line-soft:   rgba(34, 34, 34, 0.1);   /* Validation 행 가로선 (221:524) */
    --t-line-strong: rgba(34, 34, 34, 0.2);   /* Key Competencies 세로선 (221:397) */
  }

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

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

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

  .t-body { font-weight: 400; font-size: var(--fs-18); line-height: 1.8; }
  .t-subtitle { font-weight: 400; font-size: var(--fs-30); line-height: 1.8; color: var(--df-blue); }

  .t-card-title { font-weight: 700; font-size: var(--t-fs-26); line-height: 1.6; }
  .t-card-title--cyan { color: var(--df-cyan); }
  .t-card-sub { margin-block-start: var(--sp-30); font-weight: 400; font-size: var(--fs-18); line-height: 1.8; }

  /* 텍스트 상자 스트럿 — 시안 텍스트 프레임의 라인박스 높이를 상자(F2 잉크 대조)로
     복원한다. 페인트 없음 — 장식이 아니다.
     ★ WIRE-RULES B: 잉크 정합용 최소높이는 설계폭(≥1440)에서만 — 아래에선 자연 흐름. */
  .t-tb { display: block; }
  @media (width >= 1440px) {
    .t-tb--2 { min-block-size: 3.2em; }              /* 2줄 × lh1.6 (시안 h84 @26px) */
    .t-tb--h96 { min-block-size: calc(96em / 26); }  /* 시안 h96 (221:516) */
  }

  /* 시안 대응 이미지 래퍼 — fit=cover(F4) */
  .t-fig { overflow: clip; }                    /* 리빌 클립 */
  .t-fig__frame { overflow: clip; }
  .t-fig__crop { display: block; inline-size: 100%; }
  .t-fig--philo .t-fig__crop { aspect-ratio: 1600 / 600; }   /* 221:358 */
  .t-fig--pillar .t-fig__crop { aspect-ratio: 1600 / 700; }  /* 221:393 계열 */
  .t-fig img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* ══ 1. 히어로 (221:347 · 다크 · 헤더 94 아래 py120) ═══════════════════
     시안 노드 "1"(221:347)은 x160 w1600 h344 콘텐츠 박스 → id 는 .fl-wrap 에.
     h344 = 타이틀 224 + pb 120 이므로 하패딩을 wrap 이 가진다(F2). */
  .t-hero {
    /* 고정 헤더(94) + 섹션 상패딩 120 = 시안 y214 */
    padding-block: calc(var(--hd-h) + var(--sp-120)) 0;
  }
  .t-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 650fr) minmax(0, 850fr);  /* 650 / gap 100 / 850 */
    gap: var(--sp-100);
    align-items: stretch;            /* 리드 프레임(221:349)이 열 높이(224)를 받는다 */
    padding-block-end: var(--sp-120);
  }
  .t-hero__twrap {
    position: relative;
    max-inline-size: 100%;
    font-weight: 700; font-size: var(--fs-80); line-height: 1.4; color: var(--df-white);
  }
  .t-hero__title { font: inherit; color: inherit; }
  .t-hero__ln { display: block; }
  @media (width >= 1440px) {
    .t-hero__ln--2 { white-space: nowrap; }
  }
  .t-hero__lead { font-weight: 400; font-size: var(--fs-20); line-height: 1.8; opacity: 0; }
  /* 리드 프레임 221:349 — 시안 y214 h212(열 224 − 12), 텍스트 하단 정렬 */
  .t-hero__leadbox {
    display: flex; align-items: flex-end;
    margin-block-end: var(--sp-12);   /* 시안 하단 정렬 오프셋 12 (438−426) */
  }

  /* ══ 2. Philosophy (221:351 · 다크 · 상단 1px 헤어라인) ════════════════
     시안: 섹션 끝(1685) = 이미지 끝 — 하단 패딩 없음(다음 섹션이 pt120 담당) */
  .t-philo { padding-block-end: 0; }
  .t-rule { display: block; block-size: 1px; inline-size: 100%; background: var(--df-line-w10); }
  .t-philo .t-sec-title { margin-block-start: var(--sp-120); }  /* 헤어라인 → 타이틀 = py120 */
  .t-philo__cols {
    margin-block-start: var(--t-sp-70);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  /* 765 + 70 + 765 */
    gap: var(--t-sp-70);
  }
  .t-fig--philo { margin-block-start: var(--t-sp-70); }

  /* ══ 3. 4 Pillars (221:359 · 다크 · 아이콘 카드 4) ═════════════════════
     시안 노드 "3"(221:359)은 x160 w1600 h734(py120 포함) → id/패딩을 wrap 에(F2). */
  .t-four { padding-block: 0; }
  .t-four > .fl-wrap { padding-block: var(--sp-120); }
  /* 시안 221:360 w555 — 그 안의 h2(221:362)는 시안에서도 w557 로 프레임을 넘는 1줄.
     같은 그림: 상자만 555, 글줄은 개행 없이 밖으로 흐른다(클리핑 없음). */
  .t-four .t-sec-title { inline-size: min(100%, clamp(320px, 28.9063vw, 555px)); }
  @media (width >= 1440px) {                       /* WIRE-RULES B: nowrap 은 설계폭 한정 */
    .t-four .t-sec-title .t-h2 { white-space: nowrap; }
  }
  .t-four__list {
    margin-block-start: var(--t-sp-70);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));  /* 385×4 · gap 20 */
    gap: var(--sp-20);
    align-items: start;              /* 카드 높이 = 콘텐츠(시안 318/286/318/318 상이) */
  }
  /* 시안 자식 순서는 [text, icon](F3 — 스냅샷 좌표계) — DOM 은 그 순서,
     시각 배치는 order 로 아이콘을 위로 되돌린다 */
  .t-four__card { display: flex; flex-direction: column; text-align: center; }
  .t-four__ic {
    order: -1;
    block-size: clamp(56px, 4.6875vw, 90px);           /* 아이콘 h90 */
    margin-inline: auto;
    background-color: transparent;                      /* .ph 플레이스홀더 배경 제거 */
    background-image: none;
  }
  .t-four__ic--1 { aspect-ratio: 89 / 90; }            /* 221:365 */
  .t-four__ic--2 { aspect-ratio: 93 / 90; }            /* 221:370 */
  .t-four__ic--3 { aspect-ratio: 96 / 90; }            /* 221:375 */
  .t-four__ic--4 { aspect-ratio: 89 / 90; }            /* 221:380 */
  .t-four__ic img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .t-four__txt { margin-block-start: var(--sp-50); }   /* iconToTextGap 50 */

  /* ══ 4~7. Pillar 템플릿 (221:384/412/440/465 · white/#F6F6F6 교차) ═════ */
  .t-pillar { padding-block: var(--sp-120); }
  .t-pillar--white { background: var(--df-white); }
  .t-pillar--grey  { background: var(--df-gray-f6); }
  .t-pillar__head {
    display: grid;
    grid-template-columns: minmax(0, 555fr) minmax(0, 945fr);  /* 555 / gap 100 / 945 */
    gap: var(--sp-100);
    align-items: start;
  }
  .t-pillar__right { padding-block-start: var(--sp-50); }  /* 시안 우측 시작 +50 (2589−2539) */
  /* Pillar 03 본문(221:448) — 브라우저 Pretendard 진폭이 시안보다 넓어 945px 에서
     시안(5줄)보다 1줄 더 감긴다. −0.18px(≈−0.01em) 자간으로 시안 줄수 복원(실측).
     WIRE-RULES B: 자간 정합은 설계폭 한정. */
  @media (width >= 1440px) {
    .t-pillar [data-figma-id="221:448"] { letter-spacing: -0.01em; }
  }
  .t-pillar__right .t-body { margin-block-start: var(--sp-50); }  /* 서브타이틀 → 본문 50 */
  .t-fig--pillar { margin-block-start: var(--t-sp-70); }

  /* Key Competencies (h30 + 리스트 · 칸 px50 · 세로선 rgba(34,34,34,.2)) */
  .t-kc { margin-block-start: var(--t-sp-70); }
  .t-kc__h { font-weight: 700; font-size: var(--fs-30); line-height: 1.4; }
  .t-kc__list { margin-block-start: var(--sp-50); display: grid; }
  .t-kc__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }  /* 각 320.2 */
  .t-kc__list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }  /* 각 400.25 */
  .t-kc__item {
    display: flex; flex-direction: column;
    padding-inline: var(--sp-50);
    border-inline-end: 1px solid var(--t-line-strong);
  }
  .t-kc__item:last-child { border-inline-end: 0; }
  .t-kc__num { font-weight: 700; font-size: var(--fs-24); line-height: 1; }
  .t-kc__body {
    margin-block-start: 0;
    padding-block-start: var(--sp-30);
    font-weight: 400; font-size: var(--fs-18); line-height: 1.6;
  }
  /* 칸 높이 — 시안값 240/269/211 (PC 그리드에서만 강제) */
  @media (width >= 1280px) {
    .t-kc__list--h240 .t-kc__item { min-block-size: clamp(150px, 12.5vw, 240px); }
    .t-kc__list--h269 .t-kc__item { min-block-size: clamp(168px, 14.0104vw, 269px); }
    .t-kc__list--h211 .t-kc__item { min-block-size: clamp(132px, 10.9896vw, 211px); }
    .t-kc__body { margin-block-start: var(--sp-100); }  /* PC: 번호→본문 100px */
  }

  /* ══ 8. Scalability (221:493 · 다크 카드 4 · 385×470 이미지) ═══════════
     시안 노드 "8"(221:493)은 x160 w1600 h1158(py120 포함) → id/패딩을 wrap 에(F2). */
  .t-scal { padding-block: 0; }
  .t-scal > .fl-wrap { padding-block: var(--sp-120); }
  .t-scal__list {
    margin-block-start: var(--t-sp-70);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-20);
  }
  .t-scal__card { text-align: center; }
  .t-scal__img { inline-size: 100%; aspect-ratio: 385 / 470; }
  .t-scal__img img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .t-scal__txt { margin-block-start: var(--sp-50); }   /* img → text 50 */

  /* ══ 9. Validation (221:518 · white · 행 3 · 실요소 가로선) ════════════
     시안 "con"(221:519) h726 = py120 포함 → 패딩을 wrap(id 보유)에(F2). */
  .t-vl { padding-block: 0; }
  .t-vl > .fl-wrap { padding-block: var(--sp-120); }
  .t-vl__list { margin-block-start: var(--t-sp-70); display: grid; gap: var(--sp-30); }
  .t-vl__row { position: relative; padding-block: 0 var(--sp-30); }
  .t-vl__row--first { padding-block-start: var(--sp-30); }   /* 1행만 top 라인 + 상패딩 */
  .t-vl__rule {
    position: absolute; inset-inline: 0; block-size: 1px;
    background: var(--t-line-soft);
  }
  .t-vl__rule--top { inset-block-start: 0; }
  .t-vl__rule--btm { inset-block-end: 0; }
  .t-vl__in {
    display: grid;
    grid-template-columns: minmax(0, 50fr) minmax(0, 500fr) minmax(0, 1010fr);  /* 50/500/1010 · gap 20 */
    gap: var(--sp-20);
    align-items: start;
  }
  .t-vl__num { font-weight: 600; font-size: var(--t-fs-26); line-height: 1.6; color: var(--df-blue); }
  .t-vl__title { font-weight: 700; font-size: var(--t-fs-26); line-height: 1.6; color: var(--df-ink); }
  .t-vl__desc {
    font-weight: 400; font-size: var(--fs-18); line-height: 1.8;
    padding-block-start: clamp(3px, 0.2604vw, 5px);    /* 시안 광학 정렬 +5 (11024−11019) */
  }

  /* ══ 맨위로 버튼 (data-invented · scroll-to-top-smooth) ════════════════ */
  .t-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;
  }
  .t-top.is-on {
    --mo: 1;
    visibility: visible; pointer-events: auto;
    transition: opacity .3s var(--ease-out-quart), visibility 0s linear 0s;
  }
  .t-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) {
    .t-four__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-40); }
    .t-scal__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-40); }
    /* 5·4칸 리스트 — 중간 폭 2열(1280↓), 좁은 폭 1열(768↓) */
    .t-kc__list--5,
    .t-kc__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-40); row-gap: var(--sp-40); }
    .t-kc__list--5 .t-kc__item,
    .t-kc__list--4 .t-kc__item {
      border-inline-end: 0;
      border-block-end: 1px solid var(--t-line-strong);
      padding-inline: 0;
      padding-block: var(--sp-20);
    }
  }

  @media (width < 1024px) {
    .t-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); align-items: start; }
    .t-hero__leadbox { margin-block-end: 0; }
    .t-philo__cols { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .t-pillar__head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-30); }
    .t-pillar__right { padding-block-start: 0; }
    .t-vl__in {
      grid-template-columns: minmax(0, auto) minmax(0, 1fr);
      row-gap: var(--sp-12);
    }
    .t-vl__desc { grid-column: 1 / -1; padding-block-start: 0; }
  }

  @media (width < 768px) {
    .t-four__list { grid-template-columns: minmax(0, 1fr); }
    .t-scal__list { grid-template-columns: minmax(0, 1fr); }
    .t-kc__list--5,
    .t-kc__list--4 { grid-template-columns: minmax(0, 1fr); }
  }
}

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