/* ============================================================================
   sections/main.css — index (main_01 · 243:243 · 1920×6821)
   ----------------------------------------------------------------------------
   근거: extract/snapshot-main_01.json 실측. 모든 새 길이값은 clamp/calc 손계산
   (1920 기준 시안값을 주석에 병기). 다른 파일 수정 없음.
   --iu = "시안 1px" (min(100vw,1920)/1920) — 절대배치 환산 전용.
   ========================================================================== */
@layer components {

  body[data-page="home"],
  body[data-page="company"] { --iu: calc(min(100vw, 1920px) / 1920); }

  /* Company: 영상 히어로가 없어 헤더와 첫 라이트 섹션(wwd)이 겹치지 않게 오프셋.
     헤더는 항상 도킹 판(네이비)을 써서 흰 로고·메뉴가 흰 배경 위에서 읽힌다. */
  body[data-page="company"] #df-main {
    padding-block-start: var(--hd-h);
    background: var(--df-white);
  }
  body[data-page="company"] .hd .hd__bar {
    background: rgba(19, 32, 51, 0.9);
    backdrop-filter: blur(8px);
  }

  /* ── 공통: 섹션 아이브로우 (16 Bold · 라이트 #006cd2 / 다크 #28c6ff) ───── */
  .df-eyebrow { font-size: var(--fs-16); font-weight: 700; line-height: 1; color: var(--df-blue); }
  .df-eyebrow--cyan { color: var(--df-cyan); }

  /* ════════════════════════════════════════════════════════════════════════
     1. 히어로 (243:244 · 0,0 1920×1080 · bg image cover + rgba(0,0,0,.3))
     ════════════════════════════════════════════════════════════════════════ */
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: clamp(560px, 56.25vw, 1080px);      /* 시안 1080 */
    max-height: max(560px, 100vh);
    overflow: visible;
    background: var(--df-navy);                      /* 자산 도착 전 안전 배경 */
  }
  .hero__bg { position: absolute; inset: -8% 0; z-index: 0; overflow: clip; } /* parallax-y ±6% 여유분 */
  .hero__swiper,
  .hero__swiper .swiper-wrapper,
  .hero__swiper .swiper-slide {
    inline-size: 100%; block-size: 100%;
  }
  .hero__swiper { position: absolute; inset: 0; }
  .hero__slide { position: relative; overflow: clip; isolation: isolate; }
  .hero__slide-media {
    position: absolute; inset: 0; z-index: 0;
    inline-size: 100%; block-size: 100%; object-fit: cover;
    filter: brightness(0.5);
  }
  .hero__slide-txt {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    row-gap: var(--sp-50);
    text-align: center; color: var(--df-white);
    padding-inline: var(--fl-gutter);
    pointer-events: none;
  }
  /* 수정 전 — 히어로 배경 전체에 딤(텍스트까지 덮음)
  .hero__bg::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--df-dim-30); pointer-events: none;
  }
  */
  /* 수정 전 — 슬라이드 ::after. fade 슬라이드는 opacity로 한 장 합성돼
     z-index가 텍스트를 이기지 못하고 글자까지 어두워짐
  .hero__slide::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--df-dim-30); pointer-events: none;
  }
  */
  .hero .hero__veil { z-index: 3; }
  .hero__title,
  .hero__sub {
    pointer-events: auto;
  }
  .hero__title,
  .hero__sub,
  .hero__logo {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
  }
  .hero__title { font-size: var(--fs-80); font-weight: 700; line-height: 1.3; } /* 243:246 80 Bold */
  .hero__sub   { font-size: var(--fs-30); font-weight: 400; line-height: 1.3; padding-block-end: 0.15em; } /* 243:247 30 Regular — descender clip 방지 */
  .hero__logo {
    display: block;
    inline-size: min(100%, clamp(240px, 33.3333vw, 640px));
    block-size: auto;
    max-inline-size: 100%;
  }
  .hero__ctrl {
    position: sticky;
    z-index: 4;
    inset-block-end: clamp(24px, 3.125vw, 60px);
    flex: 0 0 auto;
    align-self: flex-start;
    margin-inline-start: var(--fl-gutter);
    margin-block-start: auto;
    margin-block-end: clamp(24px, 3.125vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(10px, 1.0417vw, 16px);
    pointer-events: auto;
  }
  .hero__pagination {
    position: static;
    display: flex; align-items: center; gap: clamp(8px, 0.625vw, 10px);
    inline-size: auto;
  }
  .hero__dot {
    inline-size: clamp(8px, 0.5208vw, 10px);
    aspect-ratio: 1;
    border: 0; padding: 0; border-radius: 50%;
    background: rgb(255 255 255 / 35%);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .hero__dot.is-active { background: var(--df-white); transform: scale(1.15); }
  .hero__progress {
    display: block; position: relative; overflow: clip;
    inline-size: clamp(120px, 10.4167vw, 200px); block-size: 2px;
    background: rgb(255 255 255 / 25%);
  }
  .hero__progress-fill {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0;
    block-size: 100%;
    background: var(--df-white);
    transition: none;
    will-change: inline-size;
  }

  .dp_none{
    display: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .hero__title,
    .hero__sub,
    .hero__logo {
      will-change: auto;
    }
  }

  @media (max-width:575.98px){
    .hero{
      max-height: 40vh;
    }
    .hero__title{
      font-size: 30px;
    }
    .hero__sub{
      display: none;
    }
    .dp_none{
      display: block;
    }
  }

  /* ════════════════════════════════════════════════════════════════════════
     2. What We Do (243:248 · y1080 h1137 · 컨테이너 1600 · 상단보더 k10)
        110px 타이틀 2행(2행 파랑·우측정렬) + 본문 700 + 우하단 977×500 절대배치
     ════════════════════════════════════════════════════════════════════════ */
  .wwd { background: var(--df-white); }
  .wwd__in {
    position: relative;
    border-block-start: 1px solid var(--df-line-k10);
    padding-block-start: var(--sp-120);              /* 시안 pt 120 */
    padding-block-end: clamp(120px, 20.8333vw, 400px); /* 시안 pb 400 */
  }
  .wwd__head { display: flex; flex-direction: column; gap: var(--sp-20); }   /* 시안 gap 20 */
  .wwd__title { font-size: var(--fs-110); font-weight: 700; line-height: 1; color: #000; }
  .wwd__line { display: block; max-inline-size: 100%; }
  .wwd__line--1 { text-align: left; inline-size: fit-content; }              /* 243:253 — 시안 hug 폭 1507 */
  .wwd__line--2 { text-align: right; color: var(--df-blue); margin-block-start: var(--sp-20); } /* 243:254 · 시안 행간격 20 */
  /* ko/index — 타이틀·2행 밴드 */
  :lang(ko) .wwd__title { font-size: min(7vw, 125px); }
  :lang(ko) .wwd__line--2 { min-inline-size: 14em; text-align: right; }
  .wwd__body {
    margin-block-start: var(--sp-100);               /* 시안 gap 100 */
    max-inline-size: clamp(320px, 36.4583vw, 700px); /* 시안 700 */
    display: flex; flex-direction: column; align-items: flex-start;
    gap: clamp(32px, 3.6458vw, 70px);                /* 시안 gap 70 */
  }
  .wwd__desc { font-size: var(--fs-20); font-weight: 400; line-height: 1.8; color: #000; } /* 243:256 */
  /* 이미지 977×500 — 컨테이너 우측 끝 정렬, 컨테이너 상단에서 500 (243:249: x783 y1580) */
  .wwd__media { position: absolute; inset-inline-end: 0; top: calc(var(--iu) * 500); inline-size: 61.0625%; margin: 0; } /* 977/1600 */
  .wwd__media .ph { inline-size: 100%; aspect-ratio: 977 / 500; overflow: clip; }
  .wwd__media img { inline-size: 100%; block-size: 100%; object-fit: cover; } /* fit=cover, radius 0 */

  /* ════════════════════════════════════════════════════════════════════════
     3. 산업 캐러셀 (243:261 · y2217 1920×1306 · bg image + rgba(19,32,51,.9))
        카드 3장 800×500: 중앙 정상 · 좌 -15° / 우 +15° · 좌우 화면 밖 오버플로.
        정적 회전은 transform 축약형(P44) — 계약의 rotate:none 초기화와 무관.
     ════════════════════════════════════════════════════════════════════════ */
  .ind {
    position: relative; overflow: clip;
    background: var(--df-navy);
    padding-block: var(--sp-120);                    /* 시안 py 120 */
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-100);                              /* 시안 gap 100 */
  }
  .ind__bg { position: absolute; inset: 0; z-index: 0; }
  .ind__bg .ph, .ind__bg img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ind__bg::after { content: ""; position: absolute; inset: 0; background: var(--df-overlay-ind); } /* rgba(19,32,51,0.9) */
  .ind__head {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-20);
    text-align: center; inline-size: var(--fl-content); margin-inline: auto;
  }
  .ind__title { font-size: var(--fs-50); font-weight: 700; line-height: 1.4; color: var(--df-white); } /* 243:264 */

  .ind__slider { position: relative; z-index: 1; inline-size: 100%; touch-action: pan-y pinch-zoom; }
  .ind__slider:focus-visible { outline: 2px solid var(--df-focus); outline-offset: 4px; }
  .ind__track { position: relative; block-size: calc(var(--iu) * 790); }     /* 시안 행 높이 790.018 */
  .ind__slide {
    position: absolute; top: 0; left: 50%;
    inline-size: calc(var(--iu) * 800);              /* 카드 원본 800×500 */
    aspect-ratio: 800 / 500;
    margin-inline-start: calc(var(--iu) * -400);
    will-change: transform;
  }
  /* 정지 상태(JS 죽어도 시안 그대로): 카드 중심간격 951 · 하강 195 · 좌우 ±15° */
  .ind__slide:nth-child(1) { transform: translate(calc(var(--iu) * -951), calc(var(--iu) * 195)) rotate(-15deg); z-index: 1; transform-origin: 50% 50%; }
  .ind__slide:nth-child(2) { transform: rotate(0deg); z-index: 2; transform-origin: 50% 50%; }
  .ind__slide:nth-child(3) { transform: translate(calc(var(--iu) * 951), calc(var(--iu) * 195)) rotate(15deg); z-index: 1; transform-origin: 50% 50%; }
  .ind__slide .ph { inline-size: 100%; block-size: 100%; overflow: clip; }
  .ind__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .ind__slider.is-dragging { cursor: grabbing; }
  .ind__slider.is-dragging .ind__slide { pointer-events: none; }
  @media (hover: hover) and (pointer: fine) { .ind__slider { cursor: grab; } }

  /* 오버레이 텍스트 — 시안 절대배치 left 655 top 810(섹션 기준) w500 (243:271) */
  .ind__caption {
    position: absolute; z-index: 3;
    inset-inline-start: calc(var(--iu) * 655);
    inset-block-start: calc(var(--iu) * 810);
    inline-size: calc(var(--iu) * 500);
    display: flex; flex-direction: column; align-items: flex-start;
    gap: var(--sp-50);                               /* 시안 gap 50 */
    color: var(--df-white);
  }
  .ind__cap-group { display: flex; flex-direction: column; gap: clamp(6px, 0.5208vw, 10px); } /* 시안 gap 10 */
  .ind__cap-label { font-size: var(--fs-20); font-weight: 600; line-height: 1; color: rgba(255,255,255,0.8); } /* 243:273 */
  .ind__cap-title { font-size: clamp(40px, 4.6875vw, 90px); font-weight: 700; line-height: 1.2; color: rgba(255,255,255,0.8); } /* 243:274 90 Bold */
  .ind__cap-desc  { font-size: var(--fs-20); font-weight: 400; line-height: 1.8; color: var(--df-white); }      /* 243:275 */

  /* 슬라이더 컨트롤 — 시안에 없음(data-invented · 확인요망). 우하단 절대배치 */
  .ind__ctrl {
    position: absolute; z-index: 4;
    inset-inline-end: var(--fl-gutter);
    inset-block-end: clamp(24px, 3.125vw, 60px);
    display: flex; align-items: center; gap: var(--sp-20);
    color: var(--df-white);
  }
  .ind__nav {
    inline-size: clamp(40px, 2.5vw, 48px); aspect-ratio: 1; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35); color: var(--df-white);
    display: grid; place-items: center;
  }
  .ind__nav:hover { border-color: var(--df-cyan); color: var(--df-cyan); }
  .ind__nav::before {
    content: ""; inline-size: 30%; aspect-ratio: 1;
    border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor;
    transform: translateX(15%) rotate(-45deg);
  }
  .ind__nav--next::before { transform: translateX(-15%) rotate(135deg); }
  .ind__progress {
    display: block; position: relative; overflow: clip;
    inline-size: clamp(90px, 7.8125vw, 150px); block-size: 2px;
    background: rgba(255,255,255,0.25);
  }
  .ind__thumb {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: 0;
    background: var(--df-white);
    transition: inline-size 0.45s cubic-bezier(.22, 1, .36, 1);
  }
  .ind__count { font-size: var(--fs-16); font-weight: 300; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

  /* ════════════════════════════════════════════════════════════════════════
     4. Why DeepFusion AI (243:280 · y3523 h758 · #f6f6f6)
        좌 타이틀 600 + 우 2×2 스탯 그리드(pt150 · 셀 440×134 · row100/col50)
     ════════════════════════════════════════════════════════════════════════ */
  .why { background: var(--df-gray-f6); }
  .why__in {
    display: grid;
    grid-template-columns: minmax(0, 600fr) minmax(0, 930fr); /* 시안 600 + 930 */
    column-gap: clamp(32px, 3.6458vw, 70px);         /* 시안 gap 70 */
    row-gap: var(--sp-50);
    padding-block: var(--sp-120);                    /* 시안 py 120 */
  }
  .why__head { display: flex; flex-direction: column; gap: var(--sp-20); align-items: flex-start; align-self: start; } /* 243:282 h246 — 그리드 스트레치 금지 */
  .why__title { font-size: var(--fs-50); font-weight: 700; line-height: 1.4; color: var(--df-ink); } /* 243:284 */
  .why__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-50); row-gap: var(--sp-100);         /* 시안 col 50 / row 100 */
    padding-block-start: clamp(64px, 7.8125vw, 150px);        /* 시안 pt 150 */
    align-content: start;
  }
  .why__label { display: flex; align-items: center; gap: var(--sp-12); }      /* 시안 gap 12 */
  .why__label span:last-child { font-size: var(--fs-20); font-weight: 700; line-height: 1; color: var(--df-ink); }
  .why__ic { inline-size: clamp(18px, 1.25vw, 24px); aspect-ratio: 1; }       /* 시안 24×24 */
  .why__line {
    display: block; block-size: 1px; inline-size: 100%;
    margin-block-start: var(--sp-30);                /* 시안 gap 30 */
    background: #dddddd;   /* Line14~17 스트로크 색 unknown — hidden 변형(243:319) #ddd 추정 · 확인요망 */
  }
  .why__num {
    margin-block-start: var(--sp-30);                /* 시안 gap 30 */
    font-size: var(--fs-50); font-weight: 300; line-height: 1; color: var(--df-ink); /* 50 Light */
    font-variant-numeric: tabular-nums;
  }

  /* ════════════════════════════════════════════════════════════════════════
     5. Partners & Investors (243:331 · y4281 h1036 · #fff)
        셀 296×200 ×5 gap30. 로고 배정은 시안 노드 순서 그대로(HTML 순서 = 근거).
     ════════════════════════════════════════════════════════════════════════ */
  .pt { background: var(--df-white); }
  .pt__in {
    display: flex; flex-direction: column;
    gap: clamp(32px, 3.6458vw, 70px);                /* 시안 gap 70 */
    padding-block: var(--sp-120);                    /* 시안 py 120 */
  }
  .pt__head { display: flex; flex-direction: column; gap: var(--sp-20); }
  .pt__title { font-size: var(--fs-50); font-weight: 700; line-height: 1.4; color: var(--df-ink); } /* 243:335 */
  .pt__block { display: flex; flex-direction: column; gap: var(--sp-20); }    /* 시안 gap 20 */
  .pt__label { font-size: var(--fs-20); font-weight: 700; line-height: 1; color: var(--df-ink); }
  .pt__row {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));          /* 5셀 (약수 5) */
    gap: var(--sp-30);                               /* 시안 gap 30 */
  }
  .pt__cell { aspect-ratio: 296 / 200; display: grid; place-items: center; overflow: clip; } /* 셀 296×200 px70 py40 */
  .pt__ph {
    inline-size: calc(var(--iu) * var(--lw, 156));
    aspect-ratio: var(--ar, 156 / 40);
    opacity: 0.5;
    transition: opacity 0.35s var(--ease-out-quart, ease);
  } /* 기본 opacity .5 */
  .pt__ph--full { opacity: 1; }                      /* BOSCH (243:340) */
  .pt__ph--80 { opacity: 0.8; }                      /* 신용보증기금 (243:361) */
  .pt__ph:hover,
  .pt__ph:focus-within { opacity: 1; }                /* hover 시 컬러+선명(243:342 등) */
  .pt__ph img {
    inline-size: 100%; block-size: 100%; object-fit: contain;
    filter: grayscale(1); opacity: 1;
    transition: filter 0.35s var(--ease-out-quart, ease);
  }
  .pt__ph:hover img,
  .pt__ph:focus-within img { filter: grayscale(0); }

  /* ════════════════════════════════════════════════════════════════════════
     6. Recognition & Milestones (243:362 · y5317 1920×916)
        ★ 확인요망: 시안 오버레이가 알파 없는 #132033 — 배경 이미지가 완전히
        가려진다(코드 출력 그대로 구현). 어두운 반투명 의도였는지 확인 필요.
     ════════════════════════════════════════════════════════════════════════ */
  .rec {
    position: relative; overflow: clip;
    /* 시안 실측: pt 120 · pb 50 (5317+120+176+70+500+50=6233 — "py 120" 표기와
       달리 절대좌표 역산상 하단은 50. 절대좌표를 진실로 삼는다) */
    padding-block: var(--sp-120) clamp(28px, 2.6042vw, 50px);
    color: var(--df-white);
  }
  /* 배경 자산 생략 — 시안 오버레이가 알파 없는 #132033 라 단색이 픽셀 동일(WIRE-RULES A3) */
  .rec__bg { position: absolute; inset: 0; z-index: 0; background: var(--df-navy); }
  .rec__in {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: clamp(32px, 3.6458vw, 70px);                /* 시안 gap 70 */
  }
  .rec__head {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-20); text-align: center;
    min-block-size: calc(var(--iu) * 176);   /* 시안 타이틀 프레임 h 176 (243:364) — 내용 106 + 하단 여백 */
  }
  .rec__title { font-size: var(--fs-50); font-weight: 700; line-height: 1.4; color: var(--df-white); } /* 243:366 */
  .rec__row {
    inline-size: 100%;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);      /* 좌우 1:1 (각 750) */
    column-gap: var(--sp-100); row-gap: var(--sp-50);                          /* 시안 gap 100 */
    align-items: center;
  }
  .rec__txt { display: flex; flex-direction: column; gap: var(--sp-30); }     /* 시안 gap 30 */
  .rec__award { font-size: var(--fs-50); font-weight: 300; line-height: 1; }  /* 243:369 50 Light */
  .rec__desc { font-size: var(--fs-20); font-weight: 400; line-height: 1.8; } /* 243:370 */
  .rec__media { margin: 0; }
  .rec__media .ph { inline-size: 100%; aspect-ratio: 750 / 500; overflow: clip; } /* 243:371 750×500 */
  .rec__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* ── 시안대조(fid) 교정 — 공유 컴포넌트의 이 페이지 실측값 ─────────────── */
  /* 자산 배선 완료 래퍼 — 자리판 색까지 끈다(이미지 뒤에서 칠하는 발명 페인트 금지) */
  body[data-page="home"] .ph.is-loaded,
  body[data-page="company"] .ph.is-loaded { background-color: transparent; }
  /* 버튼 라벨(243:258 · 227:10 등): 시안 lh 1 — 본문 1.5 상속이 잉크 높이를 키운다 */
  .df-btn__t { line-height: 1; }
  /* 푸터(227:32 하위): 시안 opacity 1 — footer.css 의 .85 를 시안값으로 복원 */
  body[data-page="home"] .ft__legal-links a[data-df-dead],
  body[data-page="company"] .ft__legal-links a[data-df-dead] { opacity: 1; }
  /* 푸터 컨테이너(227:3): 시안 flex-col gap 100 — 하단 바 앞 간격 100 (243:372 h588) */
  body[data-page="home"] .to-top,
  body[data-page="company"] .to-top {
    position: fixed; z-index: 90;
    inset-inline-end: clamp(16px, 1.5625vw, 30px);
    inset-block-end: clamp(16px, 1.5625vw, 30px);
    inline-size: clamp(44px, 2.5vw, 48px); aspect-ratio: 1; border-radius: 50%;
    background: rgba(19, 32, 51, 0.85); color: var(--df-white);
    border: 1px solid var(--df-line-w20);
    display: grid; place-items: center;
  }
  .to-top::before {
    content: ""; inline-size: 30%; aspect-ratio: 1;
    border-block-start: 2px solid currentColor; border-inline-start: 2px solid currentColor;
    transform: translateY(18%) rotate(45deg);
  }

  /* ════════════════════════════════════════════════════════════════════════
     반응형 — 1440 / 1280 / 1024 / 768 / 480 만 사용
     ════════════════════════════════════════════════════════════════════════ */
  @media (width < 1280px) {
    /* WWD: 절대배치 이미지 → 본문 아래 정적 흐름 */
    .wwd__in { padding-block-end: var(--sp-120); }
    .wwd__media { position: static; inline-size: 100%; margin-block-start: var(--sp-50); }

    /* 산업: 회전 연출 해제 — 선형 스와이프 트랙(industry-slider.js 모바일 분기) */
    .ind__slider {
      overflow: hidden;
      inline-size: 100%;
      touch-action: pan-y pinch-zoom;
    }
    .ind__track {
      display: flex;
      align-items: stretch;
      inline-size: max-content;
      min-inline-size: 100%;
      block-size: auto;
      gap: clamp(16px, 4vw, 40px);
      padding-inline: var(--fl-gutter);
      will-change: transform;
    }
    .ind__slide {
      position: static;
      flex: 0 0 auto;
      inline-size: min(78vw, 500px);
      margin: 0;
      transform: none;
      z-index: auto;
      aspect-ratio: 800 / 500;
      will-change: auto;
    }
    .ind__slide:nth-child(1),
    .ind__slide:nth-child(2),
    .ind__slide:nth-child(3) {
      transform: none;
      z-index: auto;
    }
    .ind__caption {
      position: static; inline-size: var(--fl-content); margin-inline: auto;
      margin-block-start: var(--sp-40);
    }
    .ind__ctrl { position: static; justify-content: center; margin-block-start: var(--sp-30); }
    .ind__nav { display: none; }                     /* PC 전용 컨트롤 */
  }

  @media (width < 1024px) {
    .why__in { grid-template-columns: minmax(0, 1fr); }
    .why__grid { padding-block-start: var(--sp-40); }
    .rec__row { grid-template-columns: minmax(0, 1fr); }
  }

  @media (width < 768px) {
    .why__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-50); } /* 약수 1 */
    .pt__block { gap: var(--sp-30); }                                           /* 라벨 ↔ 로고 행 */
    .pt__row {
      grid-template-columns: repeat(3, minmax(0, 1fr));                          /* 모바일 3열(243:338 · 243:351) */
      column-gap: clamp(20px, 4vw, 32px);
      row-gap: clamp(32px, 5.5vw, 48px);
    }
    .pt__cell {
      aspect-ratio: auto;
      padding-block: var(--sp-30);
      padding-inline: clamp(6px, 1.5vw, 12px);
      justify-items: center;
    }
    .pt__ph { inline-size: 100%; }
  }

  @media (width < 480px) {
    .ind__slide { inline-size: 86vw; }
  }
}

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