/* /assets/css/home.css — STEP85 메인 전용 (common.css 다음). 기존 공통 선택자 미변경.
   신규: home-wrap, home-hero*, home-section*, home-stat*, home-choice*, home-review*, home-support-panel
*/
:root {
    --home-hero-bg: #f3f8ff;
    --home-mint-bg: #d9fbf1;
    --home-blue-bg: #d8f0ff;
    --home-muted-bg: #f7f9fc;
    --home-accent: #008e7d;
    --home-hero-size: 128px;
    --home-choice-figure-size: 88px;
    --home-review-width: 260px;
    --home-review-max-height: 190px;
    --home-hero-columns: minmax(0, 3fr) minmax(0, 2fr);
    --home-hero-art-display: flex;
    --home-hero-padding: var(--space-7);
    --home-choice-columns: repeat(2, minmax(0, 1fr));
    --home-choice-padding: var(--space-6);
    --home-stat-gap: var(--space-3);
    --home-stat-padding: var(--space-5);
    --home-stat-font: var(--font-title);
    --home-review-basis: var(--home-review-width);
    --home-hero-action-width: auto;
    /* STEP149: 강한 대비를 가진 메인 배너 (크기/색상 변수만 사용) */
    --home-banner-image-width: 34%;
    --home-banner-columns: minmax(0, 1fr) minmax(0, var(--home-banner-image-width));
    --home-banner-art-display: flex;
    --home-banner-padding: var(--space-5);
    --home-banner-gap: var(--space-6);
    --home-banner-copy-gap: var(--space-3);
    --home-banner-title-lines: 2;
    --home-banner-desc-lines: 3;
    --home-banner-surface: linear-gradient(110deg, #0d397e 0%, #185ebd 58%, #287ee5 100%);
    --home-banner-border: #1252a8;
    --home-banner-shadow: 0 12px 26px rgba(17, 70, 147, 0.18);
    --home-banner-title-color: #ffffff;
    --home-banner-description-color: #e2efff;
    --home-banner-tag-background: #ffffff;
    --home-banner-tag-color: #135bbf;
    --home-banner-image-border: rgba(255,255,255,0.65);
    --home-banner-image-shadow: 0 10px 24px rgba(5, 29, 73, 0.28);
    --home-banner-control-color: #4d678e;
    --home-banner-decor-color: rgba(255,255,255,0.07);
    --home-banner-image-radius: var(--radius-card);
    --home-banner-image-border-width: var(--space-1);
    --home-banner-image-height: 194px;
    --home-banner-min-height: 232px;
    --home-banner-mobile-min-height: 160px;
    --home-banner-decoration-size: 255px;
    --home-banner-decoration-offset: -90px;
    --home-banner-tag-padding-inline: var(--space-3);
    --home-banner-tag-height: var(--space-6);
}
.home-wrap { overflow: hidden; }
.home-hero { display: grid; grid-template-columns: var(--home-hero-columns); gap: var(--space-5); padding: var(--home-hero-padding); border: var(--ui-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--home-hero-bg); }
.home-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.home-hero-title { margin: 0; line-height: 1.5; }
.home-hero-copy .ui-page-desc { margin: 0; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-hero-actions > * { width: var(--home-hero-action-width); }
.home-hero-art { display: var(--home-hero-art-display); justify-content: center; align-items: center; flex-direction: column; gap: var(--space-3); border-radius: var(--radius-card); background: var(--surface); }
.home-hero-symbol { font-size: var(--home-hero-size); color: var(--primary); line-height: 1.1; }
.home-hero-art-note { font-size: var(--font-label); color: var(--text-sub); text-align: center; }
.home-section { min-width: 0; }
.home-section-heading { margin-bottom: var(--space-5); }
.home-section-heading .ui-section-title { margin-bottom: var(--space-2); }
.home-section-heading .ui-section-note { margin: 0; }
.home-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--home-stat-gap); }
.home-stat { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: var(--home-stat-padding); gap: var(--space-2); min-width: 0; border: var(--ui-border-width) solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.home-stat-icon { font-size: var(--font-title); }
.home-stat-label { font-size: var(--font-label); color: var(--text-sub); }
.home-stat-count { font-size: var(--home-stat-font); overflow-wrap: anywhere; }
.home-choice-grid { display: grid; grid-template-columns: var(--home-choice-columns); gap: var(--space-4); }
.home-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; padding: var(--home-choice-padding); border-radius: var(--radius-card); overflow: hidden; }
.home-choice-mint { background: var(--home-mint-bg); }
.home-choice-blue { background: var(--home-blue-bg); }
.home-choice-kicker { font-size: var(--font-label); color: var(--text-sub); }
.home-choice-title { margin: 0; font-size: var(--font-section); line-height: 1.5; }
.home-choice-desc { max-width: 92%; font-size: var(--font-label); color: var(--text); line-height: 1.7; margin: 0; }
.home-choice .btn-outline { position: relative; z-index: 1; }
.home-choice-figure { position: absolute; right: var(--space-6); bottom: var(--space-4); color: var(--home-accent); font-size: var(--home-choice-figure-size); line-height: 1; opacity: .3; pointer-events: none; }
.home-review-section { padding: var(--space-5); background: var(--home-muted-bg); border-radius: var(--radius-card); }
.home-review-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); }
.home-review-card { flex: 0 0 var(--home-review-basis); min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--surface); border: var(--ui-border-width) solid var(--line); border-radius: var(--radius-card); scroll-snap-align: start; }
.home-review-meta { font-size: var(--font-caption); color: var(--text-sub); }
.home-review-stars { color: var(--home-accent); font-size: var(--font-section); }
.home-review-content { margin: 0; line-height: 1.7; font-size: var(--font-label); white-space: pre-wrap; overflow-wrap: anywhere; max-height: var(--home-review-max-height); overflow: hidden; }
.home-review-empty { color: var(--text-sub); }
.home-support-panel { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 768px) {
    :root { --home-hero-columns: minmax(0,1fr); --home-hero-art-display: none; }
}
@media (max-width: 520px) {
    :root {
        --home-hero-padding: var(--space-4);
        --home-choice-columns: minmax(0,1fr);
        --home-stat-gap: var(--space-2);
        --home-stat-padding: var(--space-3);
        --home-stat-font: var(--font-section);
        --home-choice-padding: var(--space-4);
        --home-hero-action-width: 100%;
        --home-review-basis: 85%;
    }
}


/* STEP149: 기존 홈 컴포넌트는 유지하고 배너에만 강한 명도 차이를 적용. */
.home-banner-viewport {
    min-width: 0;
}
.home-banner {
    position: relative;
    isolation: isolate;
    grid-template-columns: var(--home-banner-columns);
    align-items: center;
    gap: var(--home-banner-gap);
    min-height: var(--home-banner-min-height);
    padding: var(--home-banner-padding);
    overflow: hidden;
    border-color: var(--home-banner-border);
    background: var(--home-banner-surface);
    box-shadow: var(--home-banner-shadow);
}
.home-banner::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: var(--home-banner-decoration-size);
    height: var(--home-banner-decoration-size);
    border-radius: 50%;
    right: var(--home-banner-decoration-offset);
    top: var(--home-banner-decoration-offset);
    background: var(--home-banner-decor-color);
    pointer-events: none;
}
.home-banner[hidden] {
    display: none;
}
.home-banner .home-hero-copy {
    justify-content: center;
    gap: var(--home-banner-copy-gap);
}
.home-banner .ui-tag-info {
    min-height: var(--home-banner-tag-height);
    padding-inline: var(--home-banner-tag-padding-inline);
    background: var(--home-banner-tag-background);
    border-color: var(--home-banner-tag-background);
    color: var(--home-banner-tag-color);
}
.home-banner .home-hero-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--home-banner-title-lines);
    overflow: hidden;
    word-break: keep-all;
    color: var(--home-banner-title-color);
}
.home-banner .ui-page-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--home-banner-desc-lines);
    overflow: hidden;
    word-break: keep-all;
    color: var(--home-banner-description-color);
}
.home-banner .home-hero-art {
    display: var(--home-banner-art-display);
    height: var(--home-banner-image-height);
    min-height: 0;
    overflow: hidden;
    border: var(--home-banner-image-border-width) solid var(--home-banner-image-border);
    border-radius: var(--home-banner-image-radius);
    box-shadow: var(--home-banner-image-shadow);
}
.home-banner-image {
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center;
}
.home-banner-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--font-label);
    color: var(--home-banner-control-color);
}
@media (max-width: 768px) {
    :root {
        --home-banner-image-height: 168px;
        --home-banner-padding: var(--space-4);
        --home-banner-gap: var(--space-4);
    }
}
@media (max-width: 520px) {
    :root {
        --home-banner-columns: minmax(0, 1fr);
        --home-banner-art-display: none;
        --home-banner-padding: var(--space-4);
        --home-banner-copy-gap: var(--space-3);
        --home-banner-min-height: var(--home-banner-mobile-min-height);
    }
}