/* ============================================================================= * A01_Home_UI_Style.css * 홈 페이지 고유 스타일 — theme.css 변수만 참조 (하드코딩 금지). * ========================================================================== */ .a01-home { display: flex; flex-direction: column; gap: var(--section-gap); padding-bottom: var(--spacing-64); } /* --- Hero --- */ .a01-hero { /* 라벤더 그라디언트는 흰 표면 아래에만: 히어로 배경으로 사용 */ background: linear-gradient(to bottom, var(--color-mist-violet), var(--color-canvas)); padding: var(--spacing-96) var(--spacing-32); } .a01-hero__inner { max-width: var(--page-max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-24); } .a01-hero__title { font-size: var(--text-heading-lg); line-height: var(--leading-heading-lg); color: var(--color-deep-iris); max-width: 14ch; } .a01-hero__subtitle { font-size: var(--text-body); line-height: var(--leading-body); color: var(--color-slate); max-width: 52ch; margin: 0; } .a01-hero__ctas { display: flex; gap: var(--spacing-16); margin-top: var(--spacing-8); } /* --- 공통 섹션 --- */ .a01-section { max-width: var(--page-max-width); margin: 0 auto; width: 100%; padding: 0 var(--spacing-32); display: flex; flex-direction: column; gap: var(--spacing-24); } .a01-section__title { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); color: var(--color-deep-iris); text-align: center; } /* --- News --- */ .a01-news-list { display: flex; flex-direction: column; gap: var(--spacing-8); } .a01-news-row { display: flex; align-items: center; gap: var(--spacing-16); padding: var(--spacing-16) var(--spacing-24); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-cards); } .a01-news-row__title { flex: 1; color: var(--color-charcoal); font-size: var(--text-body-sm); } .a01-news-row__date { color: var(--color-ash); font-size: var(--text-caption); } /* --- Features --- */ .a01-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); } .a01-feature-card { min-height: 140px; } .a01-feature__desc { margin: 0; color: var(--color-slate); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); } @media (max-width: 900px) { .a01-feature-grid { grid-template-columns: 1fr; } .a01-hero__title { font-size: var(--text-heading); } }