@charset "utf-8";
/******************************************************************
    #sub-liftd 전용 스타일

    inob-sub.css 에 없는, liftd.php 전용 컴포넌트만 담는다.
    - .inob-intro-tagline                 : 도입부 브랜드 태그라인 (Balance with Nature)
    - .inob-brand-principles              : 브랜드 원칙을 보여주는 평면형 레일
    - .inob-products                      : 실제 제품 사진 중심의 2열 카탈로그
    - .inob-mb-24 / .inob-mt-32 / .inob-mt-40 : 여백 유틸리티
******************************************************************/

/* ================================================================
   도입부 — 브랜드 태그라인
   ================================================================ */
#sub-liftd .inob-intro-tagline {
    margin-top: 10px;
    color: var(--inob-cyan);
    font-size: 19px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: .02em;
}

/* ================================================================
   브랜드 원칙 — 반복 아이콘 카드를 없애고 한 줄 정의 레일로 정리
   ================================================================ */
#sub-liftd .inob-brand-principles {
    padding: 0;
    margin: 0;
    border-top: 2px solid var(--inob-green);
    list-style: none;
}
#sub-liftd .inob-brand-principles li {
    display: grid;
    grid-template-columns: minmax(140px, .8fr) minmax(0, 1fr);
    gap: 20px;
    align-items: baseline;
    padding: 17px 4px;
    border-bottom: 1px solid var(--inob-line);
}
#sub-liftd .inob-brand-principles strong {
    color: var(--inob-green-dk);
    font-family: var(--inob-display);
    font-size: 15px;
    letter-spacing: .02em;
}
#sub-liftd .inob-brand-principles span {
    color: var(--inob-body);
    font-size: 15.5px;
}

/* ================================================================
   제품 카탈로그 — 4종 실물 이미지를 페이지의 주 시각 앵커로 사용
   ================================================================ */
#sub-liftd .inob-products {
    --inob-prod-col: 2;
    gap: 24px;
}
#sub-liftd .inob-product {
    border-radius: var(--inob-r-sm);
    box-shadow: none;
    transition: border-color .2s ease;
}
#sub-liftd .inob-product:hover {
    border-color: var(--inob-green);
    box-shadow: none;
    transform: none;
}
#sub-liftd .inob-product-thumb {
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--inob-line);
    background: #fff;
}
#sub-liftd .inob-product-thumb img {
    padding: 22px;
}
#sub-liftd .inob-product-body {
    padding: 25px 26px 28px;
}

/* ================================================================
   여백 유틸리티
   ================================================================ */
#sub-liftd .inob-mb-24 { margin-bottom: 24px; }
#sub-liftd .inob-mt-32 { margin-top: 32px; }
#sub-liftd .inob-mt-40 { margin-top: 40px; }

@media (max-width: 768px) {
    #sub-liftd .inob-brand-principles li {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 2px;
    }
    #sub-liftd .inob-products { --inob-prod-col: 1; }
    #sub-liftd .inob-product-thumb { aspect-ratio: 4 / 3; }
}