@charset "utf-8";
/******************************************************************
    #sub-lavenir 전용 스타일 — L'AVENIR 브랜드 페이지

    inob-sub.css 에 없는, lavenir.php 전용 요소만 담는다.
    - .inob-intro-tagline    : 도입부 브랜드 태그라인
    - .inob-lav-lineup       : 전 제품 목업 와이드 이미지
    - .inob-lav-points       : 브랜드 요약 3항목 가로 배치
    - .inob-lav-principles   : 브랜드 원칙 3항목 평면형 편집 레이아웃
    - .inob-lav-bottle       : 앰플 목업 세로 이미지
    - .inob-lav-grid/-item   : 용기 유형별 목업 3열 격자
    - .inob-lav-spec         : 제품 기획 정보 (라벨-값 쌍)
    - .inob-mb-24 / .inob-mt-24 / .inob-mt-40 : 여백 유틸리티
******************************************************************/

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

/* ================================================================
   전 제품 목업 — 컨테이너 전폭
   원본(1600px)을 넘겨 늘리지 않는다.
   ================================================================ */
#sub-lavenir .inob-lav-lineup img { max-width: 1600px; margin: 0 auto; }
#sub-lavenir .inob-lav-lineup figcaption { text-align: center; }

/* 브랜드 요약 3항목 — 목업 아래 가로로 편다 */
#sub-lavenir .inob-lav-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 36px;
    margin-top: 40px;
}

/* ================================================================
   브랜드 원칙 — 카드 대신 얇은 선과 타이포그래피로 구분
   ================================================================ */
#sub-lavenir .inob-lav-principles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 2px solid var(--inob-green);
    border-bottom: 1px solid var(--inob-line);
}
#sub-lavenir .inob-lav-principle {
    min-width: 0;
    padding: 28px 34px 30px;
    border-left: 1px solid var(--inob-line);
}
#sub-lavenir .inob-lav-principle:first-child {
    padding-left: 0;
    border-left: 0;
}
#sub-lavenir .inob-lav-principle:last-child {
    padding-right: 0;
}
#sub-lavenir .inob-lav-principle > span {
    display: block;
    margin-bottom: 12px;
    color: var(--inob-green);
    font-family: var(--inob-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
#sub-lavenir .inob-lav-principle h4 {
    margin-bottom: 10px;
    color: var(--inob-ink);
    font-size: 20px;
    font-weight: 700;
}
#sub-lavenir .inob-lav-principle p {
    color: var(--inob-body);
    font-size: 15.5px;
    line-height: 1.75;
}

/* ================================================================
   앰플 목업 — 세로 이미지, 원본(896px) 초과 확대 금지
   ================================================================ */
#sub-lavenir .inob-lav-bottle img { max-width: 480px; margin: 0 auto; }
#sub-lavenir .inob-lav-bottle figcaption { text-align: center; }

/* ================================================================
   용기 유형별 목업 격자
   ================================================================ */
#sub-lavenir .inob-lav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
#sub-lavenir .inob-lav-item img {
    background: #fff;
    box-shadow: var(--inob-sh);
}
#sub-lavenir .inob-lav-item figcaption { margin-top: 16px; text-align: center; }
#sub-lavenir .inob-lav-item figcaption strong {
    display: block;
    color: var(--inob-ink);
    font-size: 17px;
    font-weight: 700;
}
#sub-lavenir .inob-lav-item figcaption span {
    display: block;
    margin-top: 5px;
    color: var(--inob-muted);
    font-size: 14.5px;
}

/* ================================================================
   제품 기획 정보 — 라벨과 값을 한 줄씩
   ================================================================ */
#sub-lavenir .inob-lav-spec {
    display: grid;
    gap: 1px;
    border: 1px solid var(--inob-line);
    border-radius: var(--inob-r);
    background: var(--inob-line);
    overflow: hidden;
}
#sub-lavenir .inob-lav-spec dl {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 14px 20px;
    background: #fff;
}
#sub-lavenir .inob-lav-spec dt {
    flex: 0 0 76px;
    color: var(--inob-muted);
    font-size: 14px;
    font-weight: 700;
}
#sub-lavenir .inob-lav-spec dd {
    color: var(--inob-ink);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.6;
}

/* 아이콘 불릿 안의 소재명 강조 */
#sub-lavenir .inob-list.is-ico strong { color: var(--inob-ink); font-weight: 700; }

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

@media (max-width: 1024px) {
    #sub-lavenir .inob-lav-points { grid-template-columns: 1fr; gap: 10px; margin-top: 32px; }
}
@media (max-width: 768px) {
    #sub-lavenir .inob-intro-tagline { font-size: 17px; }
    #sub-lavenir .inob-lav-principles { grid-template-columns: 1fr; }
    #sub-lavenir .inob-lav-principle,
    #sub-lavenir .inob-lav-principle:first-child,
    #sub-lavenir .inob-lav-principle:last-child {
        padding: 20px 0 22px;
        border-top: 1px solid var(--inob-line);
        border-left: 0;
    }
    #sub-lavenir .inob-lav-principle:first-child { border-top: 0; }
    #sub-lavenir .inob-lav-grid { grid-template-columns: 1fr; gap: 34px; }
    #sub-lavenir .inob-lav-item img { max-width: 420px; margin: 0 auto; }
    #sub-lavenir .inob-lav-spec dl { flex-direction: column; gap: 4px; }
    #sub-lavenir .inob-lav-spec dt { flex: none; }
}