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

    inob-sub.css 에 없는, goldlab.php 전용 컴포넌트만 담는다.
    - .inob-intro-tagline                 : 도입부 브랜드 태그라인
    - .inob-brand-principles              : 브랜드 설계 원칙 평면 레일
    - .inob-gold-types / .inob-gold-type  : G/O/L/D 4타입 인덱스
    - .inob-products                      : 실제 제품 사진 중심의 2열 카탈로그
    - .inob-mb-24 / .inob-mt-32           : 여백 유틸리티
******************************************************************/

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

/* 브랜드 설계 원칙 — 아이콘 카드 대신 짧은 정의 레일 */
#sub-goldlab .inob-brand-principles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    margin: 0;
    border-top: 2px solid var(--inob-green);
    list-style: none;
}
#sub-goldlab .inob-brand-principles li {
    padding: 17px 18px 17px 0;
    border-bottom: 1px solid var(--inob-line);
}
#sub-goldlab .inob-brand-principles li:nth-child(even) {
    padding-right: 0;
    padding-left: 18px;
    border-left: 1px solid var(--inob-line);
}
#sub-goldlab .inob-brand-principles strong,
#sub-goldlab .inob-brand-principles span {
    display: block;
}
#sub-goldlab .inob-brand-principles strong {
    color: var(--inob-green-dk);
    font-family: var(--inob-display);
    font-size: 14px;
    letter-spacing: .02em;
}
#sub-goldlab .inob-brand-principles span {
    margin-top: 5px;
    color: var(--inob-body);
    font-size: 15px;
}

/* ================================================================
   G/O/L/D 4타입 — 그림자·원형 배지를 없앤 평면형 타입 인덱스
   ================================================================ */
#sub-goldlab .inob-gold-types {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 2px solid var(--inob-green);
    border-bottom: 1px solid var(--inob-line);
}
#sub-goldlab .inob-gold-type {
    padding: 26px 24px 24px;
    border-left: 1px solid var(--inob-line);
    background: transparent;
}
#sub-goldlab .inob-gold-type:first-child {
    border-left: 0;
}

#sub-goldlab .inob-gold-letter {
    margin-bottom: 14px;
    color: var(--inob-green);
    font-family: var(--inob-display);
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
}
#sub-goldlab .inob-gold-name {
    margin-bottom: 10px;
    color: var(--inob-ink);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
}
#sub-goldlab .inob-gold-name span {
    display: inline-block;
    margin-left: 6px;
    color: var(--inob-muted);
    font-size: 14px;
    font-weight: 600;
}
#sub-goldlab .inob-gold-type p {
    color: var(--inob-body);
    font-size: 15px;
    line-height: 1.7;
}

/* ================================================================
   제품 카탈로그 — 실제 6종을 균형 잡힌 2열로 확대
   ================================================================ */
#sub-goldlab .inob-products {
    --inob-prod-col: 2;
    gap: 24px;
}
#sub-goldlab .inob-product {
    border-radius: var(--inob-r-sm);
    box-shadow: none;
    transition: border-color .2s ease;
}
#sub-goldlab .inob-product:hover {
    border-color: var(--inob-green);
    box-shadow: none;
    transform: none;
}
#sub-goldlab .inob-product-thumb {
    aspect-ratio: 16 / 10;
    border-bottom: 1px solid var(--inob-line);
    background: #fff;
}

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

/* ================================================================
   반응형
   ================================================================ */
@media (max-width: 1024px) {
    #sub-goldlab .inob-gold-types { grid-template-columns: repeat(2, 1fr); }
    #sub-goldlab .inob-gold-type:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--inob-line);
    }
    #sub-goldlab .inob-gold-type:nth-child(4) {
        border-top: 1px solid var(--inob-line);
    }
}
@media (max-width: 768px) {
    #sub-goldlab .inob-products { --inob-prod-col: 1; }
    #sub-goldlab .inob-product-thumb { aspect-ratio: 4 / 3; }
}
@media (max-width: 480px) {
    #sub-goldlab .inob-brand-principles { grid-template-columns: 1fr; }
    #sub-goldlab .inob-brand-principles li:nth-child(even) {
        padding-left: 0;
        border-left: 0;
    }
    #sub-goldlab .inob-gold-types { grid-template-columns: 1fr; }
    #sub-goldlab .inob-gold-type,
    #sub-goldlab .inob-gold-type:nth-child(3),
    #sub-goldlab .inob-gold-type:nth-child(4) {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 20px 0;
        border-top: 1px solid var(--inob-line);
        border-left: 0;
    }
    #sub-goldlab .inob-gold-type:first-child { border-top: 0; }
    #sub-goldlab .inob-gold-letter {
        grid-row: 1 / span 2;
        margin: 0;
        font-size: 28px;
    }
    #sub-goldlab .inob-gold-name { grid-column: 2; margin-bottom: 4px; }
    #sub-goldlab .inob-gold-type p { grid-column: 2; }
}