/* ============================================================
   KLLE 홈페이지 CSS
   base: 16px / 모바일 최대 450px 기준
   ============================================================ */

/* ===== 공통 변수 ===== */
:root {
    --primary    : #203B92;
    --primary-dk : #1560bd;
    --accent     : #f97316;
    --text-dark  : #111827;
    --text-mid   : #374151;
    --text-gray  : #6b7280;
    --text-light : #9ca3af;
    --border     : #f0f0f0;
    --border-md  : #e5e7eb;
    --section-max: 450px;
    --section-px : 1.25rem;
}

/* ===== 섹션 공통 헤더 ===== */
.home-section-header {
    text-align: left;
    margin: 0 auto 1.25rem;
    padding: 0 var(--section-px);
    max-width: var(--section-max);
}
.home-section-title {
    font-size: 1.625rem;
    font-weight: 900;
    color: #1a1a2e;
    margin-bottom: .375rem;
}
.home-section-subtitle {
    font-size: 1.125rem;
    color: #888;
    font-weight: 400;
}

/* ===== 공통: 헤더 + 자세히보기 버튼 ===== */
.home-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    max-width: var(--section-max);
    margin: 0 auto 1.25rem;
    padding: 0 var(--section-px);
}
.home-more-link {
    font-size: .875rem;
    color: var(--text-light);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ===== 메인 슬라이더 ===== */
.home-slider-wrap,
#main-slider { position: relative; width: 100%; overflow: hidden; }
.slider-track { display: flex; transition: transform .4s ease; }
.slider-item { min-width: 100%; }
.slider-item img { width: 100%; display: block; }
.slider-dots {
    position: absolute; bottom: .75rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: .375rem;
}
.slider-dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: rgba(255,255,255,.5); cursor: pointer; transition: all .3s;
}
.slider-dot.active { background: #fff; width: 1.25rem; border-radius: .25rem; }

/* ===== 공지사항 ===== */
.home-notice-wrap {
    height: 2.5rem; overflow: hidden;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; padding: 0 1.25rem;
}
.home-notice-badge {
    font-size: .6875rem; font-weight: 700;
    padding: .125rem .5rem; border-radius: .1875rem; white-space: nowrap; flex-shrink: 0;
}
.home-notice-slider { flex: 1; height: 2.5rem; overflow: hidden; position: relative; }
.home-notice-track { display: flex; flex-direction: column; position: absolute; width: 100%; }
.home-notice-track.animate { animation: noticeSlideUp .4s ease forwards; }
.home-notice-item {
    height: 2.5rem; display: flex; align-items: center; gap: .75rem;
    font-size: .8125rem; color: #333; cursor: pointer; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.home-notice-item:hover { color: var(--primary-dk); }
@keyframes noticeSlideUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-2.5rem); }
}

/* ===== 통계 + 상담 문의 ===== */
.home-stats-section { background: #fff; padding: 1.5rem 1rem; overflow: hidden; }

.home-stats-row {
    width: calc(100% - 2rem); max-width: var(--section-max); margin: 0 auto;
    background: #fbfbfb; border-radius: .75rem;
    box-shadow: 4px 4px 10px rgba(0,0,0,.08), -2px -2px 6px rgba(255,255,255,.9),
    inset 0 1px 0 rgba(255,255,255,.8);
    display: flex; justify-content: space-between; padding: 1.25rem 1rem; gap: .5rem;
}
.home-stat-item { flex: 1; text-align: center; }
.home-stat-label { font-size: .75rem; color: #888; margin-bottom: .375rem; font-weight: 400; }
.home-stat-value { font-size: 1.5625rem; font-weight: 900; color: var(--primary); letter-spacing: -.03em; }

/* 상담 문의 박스 */
.home-consult-box { text-align: center; padding: 1.75rem 0 1.25rem; }

.home-consult-title {
    display: flex; align-items: center; justify-content: center;
    gap: .75rem; margin-bottom: 1.5rem;
}
.home-consult-title::before,
.home-consult-title::after { content: ''; display: block; width: 90px; height: 1px; background: #d1d5db; }
.home-consult-title-text-main { font-size: 1.25rem; font-weight: 700; color: #2441a2; white-space: nowrap; }
.home-consult-title-text-sub  { font-size: 1.25rem; font-weight: 400; color: #505257; white-space: nowrap; }

.home-consult-tel { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.home-consult-tel svg { color: var(--text-mid); flex-shrink: 0; }
.home-consult-tel-num {
    font-family: 'Lato', 'Noto Sans KR', sans-serif;
    font-size: 2.5rem; font-weight: 900; color: var(--text-dark); letter-spacing: -.02em;
}

.home-consult-hours { font-size: .6875rem; color: #5c5c5c; line-height: 1.8; margin-bottom: 1.5rem; }
.home-consult-hours a,
.home-consult-hours strong { font-size: .6875rem; color: #5c5c5c; text-decoration: none; }
.home-consult-hours strong { font-weight: 700; text-decoration: underline; }

/* CTA 버튼 */
.home-consult-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.home-consult-btn {
    display: flex; align-items: center; gap: .875rem; width: 220px;
    background: #fff; border: none; border-radius: .75rem; padding: 1rem 1.125rem;
    cursor: pointer; font-family: 'Noto Sans KR', sans-serif; text-align: left;
    box-shadow: 3px 3px 8px rgba(0,0,0,.08), -2px -2px 5px rgba(255,255,255,.9);
    transition: box-shadow .2s;
}
.home-consult-btn:active {
    box-shadow: inset 2px 2px 5px rgba(0,0,0,.08), inset -1px -1px 3px rgba(255,255,255,.9);
}
.home-consult-btn-icon { width: 3rem; height: 3rem; flex-shrink: 0; }
.home-consult-btn-icon img { width: 100%; height: 100%; object-fit: contain; }
.home-consult-btn-texts { display: flex; flex-direction: column; gap: .125rem; }
.home-consult-btn-label-sm { font-size: .625rem;  color: #3B74EC; font-weight: 400; }
.home-consult-btn-label    { font-size: 1rem; font-weight: 700; color: #414141; white-space: nowrap; }

/* ===== 상담 현황 스크롤 ===== */
.home-consult-status { overflow: hidden; background: #fff; padding: 0 1rem 1rem; }
.home-consult-status-wrap { max-width: var(--section-max); max-height: 165px; overflow: hidden; margin: 0 auto; }
.home-consult-status-track {
    display: flex; flex-direction: column;
    animation: consultScrollUp 12s linear infinite;
}
.home-consult-status-track:hover { animation-play-state: paused; }
@keyframes consultScrollUp {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-50%); }
}
.home-consult-status-item {
    display: flex; align-items: center; gap: .75rem;
    padding: .8125rem 1.25rem; border-bottom: 1px solid #f3f4f6;
    font-size: .875rem; background: #fff;
}
.home-consult-status-badge {
    font-size: .6875rem; font-weight: 600; padding: .1875rem .75rem;
    border-radius: 1.25rem; border: 1px solid; flex-shrink: 0;
    min-width: 3rem; text-align: center; background: #fff;
}
.home-consult-status-name    { font-weight: 600; color: var(--text-mid); flex-shrink: 0; min-width: 2.5rem; }
.home-consult-status-divider { color: #d1d5db; flex-shrink: 0; }
.home-consult-status-course  { flex: 1; color: var(--text-gray); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-consult-status-time    { font-weight: 700; color: var(--primary); flex-shrink: 0; font-size: .9375rem; font-family: 'Lato', sans-serif; }

/* ===== 학습자 후기 ===== */
.home-review-section { padding: 3rem 0 2.5rem; overflow: hidden; }
.home-review-carousel { position: relative; height: 380px; perspective: 1000px; }

.home-review-card {
    position: absolute; width: 72%; left: 50%; top: 0;
    border-radius: .75rem; overflow: hidden; background: #fff;
    border: 1px solid var(--border); transition: all .5s ease; cursor: pointer;
}
.home-review-card.center  { transform: translateX(-50%) scale(1)    translateZ(0);    z-index: 3; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.home-review-card.left    { transform: translateX(-85%) scale(.85)  translateZ(-80px); z-index: 2; opacity: .7; }
.home-review-card.right   { transform: translateX(-15%) scale(.85)  translateZ(-80px); z-index: 2; opacity: .7; }
.home-review-card.hidden  { opacity: 0; z-index: 1; pointer-events: none; }

.home-review-card-img-wrap { position: relative; width: 100%; height: 180px; overflow: hidden; }
.home-review-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.home-review-card-badge {
    position: absolute; top: .625rem; left: .625rem;
    font-size: .75rem; font-weight: 700; padding: .1875rem .625rem;
    border-radius: 1.25rem; color: #fff;
}
.home-review-card-body  { padding: .875rem 1rem; }
.home-review-card-rating { font-size: .75rem; margin-bottom: .25rem; display: flex; align-items: center; gap: .25rem; }
.home-review-card-rating span { color: #888; }
.home-review-card-writer  { font-size: .875rem; font-weight: 700; color: #1a1a2e; margin-bottom: .375rem; }
.home-review-card-content {
    font-size: .75rem; color: #666; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.home-review-dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; }
.home-review-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #ddd; cursor: pointer; transition: all .3s; }
.home-review-dot.active { background: var(--primary-dk); width: 1.25rem; border-radius: .25rem; }

/* ===== 우수 담당자 ===== */
.home-teacher-section { padding: 1.5rem 0 2rem; background: #fff; }
.home-teacher-card { border-radius: 1rem; overflow: hidden; background: #e8ecf4; position: relative; max-width: var(--section-max); margin: 0 auto 1rem; }
.home-teacher-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; position: relative; display: block; }
.home-teacher-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.home-teacher-info {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1rem 1.25rem .875rem;
    background: linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 100%);
}
.home-teacher-name      { font-size: 1.5625rem; font-weight: 900; color: #395698; margin-bottom: .3125rem; }
.home-teacher-introduce { font-size: 1.125rem; color: #fff; line-height: 1.5; }
.home-teacher-btns { display: flex; gap: .625rem; max-width: var(--section-max); margin: .875rem auto 0; padding: 0 var(--section-px); }

/* 공통 버튼 (outline / solid) */
.home-teacher-btn-outline,
.home-teacher-btn-solid {
    flex: 1; padding: .75rem 0; border-radius: .5rem;
    font-size: .9375rem; font-weight: 600; cursor: pointer; font-family: 'Noto Sans KR', sans-serif;
}
.home-teacher-btn-outline { background: #fff; border: 1px solid #d1d5db; color: var(--text-mid); }
.home-teacher-btn-solid   { background: #1e3a8a; border: none; color: #fff; }

/* ===== 인기 교육과정 ===== */
.home-product-section { padding: 1.5rem 0 2rem; background: #fff; }
.home-product-header  { display: flex; align-items: flex-end; justify-content: space-between; max-width: var(--section-max); margin: 0 auto 1.25rem; padding: 0 var(--section-px); }
.home-product-more    { font-size: .875rem; color: var(--text-light); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.home-product-card    { max-width: var(--section-max); margin: 0 auto; padding: 0 var(--section-px); }
.home-product-img { width: 100%; aspect-ratio: 4/3; border-radius: .875rem; overflow: hidden; margin-bottom: 1rem; background: var(--border-md); }
.home-product-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-product-name    { font-size: 1.5rem; font-weight: 900; color: var(--text-dark); margin-bottom: .75rem; }
.home-product-tags    { display: flex; flex-wrap: wrap; gap: .375rem; }
.home-product-tag     { font-size: .8125rem; color: var(--text-gray); background: #f3f4f6; border-radius: 1.25rem; padding: .25rem .75rem; }

/* ===== 교육정보 ===== */
.home-eduinfo-section { padding: 1.5rem 0 2rem; background: #fff; }
.home-eduinfo-header  { display: flex; align-items: flex-end; justify-content: space-between; max-width: var(--section-max); margin: 0 auto 1.25rem; padding: 0 var(--section-px); }
.home-eduinfo-more    { font-size: .875rem; color: var(--text-light); cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.home-eduinfo-list    { max-width: var(--section-max); margin: 0 auto; padding: 0 var(--section-px); display: flex; flex-direction: column; gap: .875rem; }

.home-eduinfo-card {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border-radius: .875rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    padding: 1rem; cursor: pointer; transition: box-shadow .2s;
}
.home-eduinfo-card:active { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.home-eduinfo-body    { flex: 1; min-width: 0; }
.home-eduinfo-title {
    font-size: 1rem; font-weight: 700; color: var(--text-dark);
    line-height: 1.4; margin-bottom: .25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.home-eduinfo-subtitle { font-size: .8125rem; color: var(--text-light); margin-bottom: .625rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-eduinfo-author  { display: flex; align-items: center; gap: .375rem; }
.home-eduinfo-avatar  { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #dc2626; flex-shrink: 0; }
.home-eduinfo-writer  { font-size: .8125rem; color: var(--text-gray); }
.home-eduinfo-thumb   { width: 5rem; height: 5rem; border-radius: .625rem; overflow: hidden; flex-shrink: 0; background: var(--border-md); }
.home-eduinfo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ===== 반응형 ===== */