/* PUB-01B_베리북스란 · 랜딩 — 피그마 사본 2026-09-23 · 프레임 1115:2 그대로
   섹션: S1 Hero(1119:29) · S2 우리가 바꾸고 싶은 독서(1119:42) · S3 Brand Core Value 4가지(1119:253)
         S4 대상별 변화(1119:291) · S5 교육과 기술의 원칙(1119:309) · S6 CTA(1119:321)
   폭 1440 · 좌우 여백 160 · 본문 1120
   그래픽 영역(B · 4장)과 카드 아이콘은 아직 그림이 없어 점선 자리로 둡니다.
   모션: Hero 진입 · 카드 hover · 4가지 전환은 모션 스펙 시트(2026-09-23)를 따릅니다. */

.lb-main { flex: 1 0 auto; background: var(--vb-color-surface-white); }
.lb-container { width: min(1120px, 100% - 32px); margin: 0 auto; }

.lb-eyebrow {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-brand-green-dark, #17633f);
}
.lb-title {
    margin: 8px 0 0;
    font-family: var(--vb-font-brand);
    font-weight: 800;
    color: var(--vb-color-text-title);
    word-break: keep-all;
}
.lb-title--44 { font-size: 44px; line-height: 1.4; letter-spacing: -0.88px; }
.lb-title--34 { font-size: 34px; line-height: 1.5; }
.lb-title--28 { font-size: 28px; line-height: 1.4; letter-spacing: -0.56px; }
.lb-text {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--vb-color-text-secondary);
}

/* 「기관 도입 문의 →」 — 단추가 아니라 글 링크입니다 */
.lb-link {
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    color: var(--vb-color-brand-green-dark, #17633f);
    white-space: pre;
}

/* 그래픽 자리 표시 */
.lb-graphic {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed var(--vb-color-border-strong);
    border-radius: 16px;
    background: var(--vb-color-surface-subtle);
    text-align: center;
}
.lb-graphic__name {
    margin: 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--vb-color-text-title);
}
.lb-graphic__desc {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--vb-color-text-secondary);
}

/* ───────── S1 Hero — 가운데 정렬 · 그라데이션 (1119:29) ───────── */
.lb-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(115.15deg, #fbfdf5 0%, #e8f9e5 41.82%, #ddf7ee 69.09%, #ddefff 90.91%);
}
.lb-hero__inner { width: min(600px, 100% - 32px); }
.lb-hero__title { margin-top: 38px; }
.lb-hero__text {
    width: min(580px, 100%);
    margin: 18px auto 0;
    font-size: 16px;
    line-height: 26px;
    color: var(--vb-color-text-secondary);
}
.lb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 38px;
}

/* ───────── S2 우리가 바꾸고 싶은 독서 (1119:42) ───────── */
.lb-change { padding: 72px 0; background: var(--vb-color-surface-subtle); }
.lb-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
}
.lb-card {
    min-height: 228px;
    padding: 23px;
    border: 1px solid var(--vb-color-border-default);
    border-radius: 16px;
    background: var(--vb-color-surface-white);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.lb-card__icon {
    width: 48px;
    height: 48px;
    border: 1px dashed var(--vb-color-border-strong);
    border-radius: 12px;
    background: var(--vb-color-surface-subtle);
}
.lb-card__icon img { width: 100%; height: 100%; object-fit: contain; }
.lb-card__no {
    margin: 20px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 20px;
    color: var(--vb-color-brand-green-dark, #17633f);
}
.lb-card__title {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--vb-color-text-title);
}
.lb-card__desc { margin-top: 12px; }
/* 카드 hover 는 뺐습니다 — 모션 스펙은 「클릭되는 카드만」인데 이 카드는 링크가 아닙니다 (2026-09-28) */

/* ───────── S3 Brand Core Value · 4가지 (1119:253) ───────── */
.lb-core { padding: 72px 0; background: var(--vb-color-surface-white); }
.lb-core__body {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 60px;
    min-height: 400px;
    margin-top: 28px;
}
.lb-values {
    flex: 0 0 500px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lb-value { border-radius: 12px; }
.lb-value + .lb-value { margin-top: 8px; }
.lb-value__head {
    position: relative;
    display: block;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: none;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    text-align: left;
    color: var(--vb-color-text-secondary);
    cursor: pointer;
}
.lb-value__head::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: transparent;
}
.lb-value__body { display: none; padding: 0 20px 16px; }
.lb-value.is-active { background: var(--vb-color-brand-green-surface); }
.lb-value.is-active .lb-value__head { padding-bottom: 4px; color: var(--vb-color-text-title); }
.lb-value.is-active .lb-value__head::before { background: var(--vb-color-brand-green); }
.lb-value.is-active .lb-value__body { display: block; }
.lb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.lb-tags li {
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--vb-color-surface-subtle);
    font-size: 12px;
    font-weight: 600;
    line-height: 18px;
    color: var(--vb-color-text-secondary);
}
.lb-core__graphic {
    position: relative;
    flex: 0 0 560px;
    height: 360px;
    padding: 0;
}
.lb-core__slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.lb-core__slide.is-active { opacity: 1; }
.lb-core__image { width: 100%; height: 100%; object-fit: contain; border-radius: 16px; }
.lb-core__graphic:has(.lb-core__image) { border: 0; }
/* 인디케이터 — 네 가지 중 지금 어디인지 (1169:63~66) */
.lb-dots {
    display: flex;
    gap: 6px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}
.lb-dots li {
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: var(--vb-color-border-default);
    transition: background-color 0.25s ease;
}
.lb-dots li.is-on { background: var(--vb-color-brand-green); }

/* ───────── S4 대상별 변화 — 세로 구분선 3단 (1119:291) ───────── */
.lb-people { padding: 72px 0 76px; background: var(--vb-color-surface-subtle); }
.lb-people__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}
.lb-person { padding-right: 32px; }
.lb-person + .lb-person { padding-left: 32px; border-left: 1px solid var(--vb-color-border-default); }
.lb-person__who { margin: 0; font-size: 13px; line-height: 20px; color: var(--vb-color-brand-green-dark, #17633f); }
.lb-person__title {
    margin: 4px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--vb-color-text-title);
}
.lb-person .lb-text { min-height: 60px; margin-top: 20px; }
.lb-person__link {
    display: inline-block;
    margin-top: 24px;
    font-size: 14px;
    line-height: 20px;
    color: var(--vb-color-brand-green-dark, #17633f);
}

/* ───────── S5 교육과 기술의 원칙 (1119:309) ───────── */
.lb-principle { padding: 72px 0; background: var(--vb-color-surface-white); }
.lb-principle__body {
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 64px;
}
.lb-stats {
    display: flex;
    flex: 0 0 580px;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.lb-stat { flex: 0 0 250px; }
.lb-stat__value {
    margin: 0;
    font-family: var(--vb-font-brand);
    font-size: 34px;
    font-weight: 800;
    line-height: 1.5;
    color: var(--vb-color-text-title);
}
.lb-stat__desc { margin: 4px 0 0; font-size: 13px; line-height: 20px; color: var(--vb-color-text-secondary); }
.lb-points { margin: 0; padding: 0; list-style: none; }
.lb-points li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    line-height: 20px;
    color: var(--vb-color-text-title);
}
.lb-points li + li { margin-top: 14px; }
.lb-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--vb-color-brand-green);
}
.lb-note { margin: 40px 0 0; font-size: 12px; line-height: 18px; color: var(--vb-color-text-secondary); }

/* ───────── S6 CTA (1119:321) ───────── */
.lb-cta { padding: 72px 0; background: var(--vb-color-brand-green-surface); }
.lb-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.lb-cta .lb-text { margin-top: 24px; }
.lb-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; }

@media (max-width: 1199px) {
    .lb-cards, .lb-people__cards { grid-template-columns: 1fr; }
    .lb-person, .lb-person + .lb-person { padding: 0; border-left: 0; }
    .lb-person + .lb-person { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--vb-color-border-default); }
    .lb-core__body, .lb-principle__body { flex-direction: column; gap: 32px; }
    .lb-values, .lb-core__graphic, .lb-stats { flex: 1 1 auto; width: 100%; }
    .lb-stats { flex-wrap: wrap; }
    .lb-cta__inner { flex-direction: column; align-items: flex-start; }
}