/* ============================================================
   bubin.css — 법인결산센터 교육소개 페이지 전용 스타일
   (yearend.css와 동일 구조 — yc- 클래스를 공유하되 서로 다른 page_css로
   독립 로드되므로 충돌 없음. 강사 2인 구성에 맞춰 instructor-grid만 다름)
   ============================================================ */

/* ===== PAGE HERO ===== */
.page-hero {
    background: var(--hero-bg, var(--black));
    height: 616px;
    position: relative; overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 25% 60%, rgba(232,97,60,0.1) 0%, transparent 55%);
}
.hero-grid-lines {
    position: absolute; right: 0; top: 0; bottom: 0; width: 45%;
    background: repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(255,255,255,0.025) 59px, rgba(255,255,255,0.025) 60px);
    pointer-events: none; z-index: 1;
}
.hero-grid-lines::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(255,255,255,0.015) 59px, rgba(255,255,255,0.015) 60px);
}
.hero-carousel { position: absolute; inset: 0; }
.hero-slide {
    position: absolute; inset: 0;
    padding-top: 150px;
    display: flex; align-items: center;
    opacity: 0; pointer-events: none;
    transition: opacity 0.8s ease;
}
.hero-slide.active { opacity: 1; pointer-events: auto; }
.hero-slide-bg { position: absolute; inset: 0; background: var(--hero-bg, var(--black)); z-index: 0; }
.page-hero .container {
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    width: 100%; padding-top: 64px; padding-bottom: 64px; gap: 60px;
}
.page-hero-left { max-width: 580px; }
.page-hero-left:has(.hero-image-col) { max-width: none; flex: 1 1 auto; }
.page-hero-label { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.page-hero h1 { font-size: 48px; font-weight: 800; color: var(--hero-text, var(--white)); line-height: 1.25; letter-spacing: -1px; margin-bottom: 20px; }
.page-hero h1 .dot { color: var(--accent); }
.page-hero-desc { font-size: 15px; color: var(--hero-text, rgba(255,255,255,0.72)); font-weight: 340; line-height: 1.85; }
.page-hero-instructor { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 14px; color: var(--hero-text, rgba(255,255,255,0.72)); }
.page-hero-instructor i { color: var(--hero-icon, var(--accent)); font-size: 13px; }
.page-hero-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 18px; }
.page-hero-meta .hero-slide-meta-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--hero-text, rgba(255,255,255,0.72)); }
.page-hero-meta .hero-slide-meta-item i { color: var(--hero-icon, var(--accent)); font-size: 13px; }
.page-hero-price { margin-top: 18px; font-family: 'Poppins', sans-serif; font-size: 30px; font-weight: 700; color: var(--hero-text, var(--white)); }
.page-hero-price small { margin-left: 4px; font-family: 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 340; color: var(--hero-text, rgba(255,255,255,0.72)); }

.hero-cta-row { margin-top: 28px; }
.hero-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 28px;
    background: #B00CDC; color: var(--white);
    font-size: 15px; font-weight: 700;
    text-decoration: none;
    transition: var(--transition-fast);
}
.hero-cta-btn:hover { background: #9B0BC2; }

.page-hero-features { display: flex; flex-direction: column; gap: 12px; min-width: 320px; }
.page-hero-feat {
    display: flex; align-items: center; gap: 18px;
    padding: 18px 24px;
    border: 1px solid rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.4);
    transition: var(--transition-fast);
}
.page-hero-feat:hover { border-color: #B00CDC; background: #B00CDC; }
.page-hero-feat:hover .feat-text strong,
.page-hero-feat:hover .feat-text span { color: #FFFFFF; }
.feat-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 16px; flex-shrink: 0; }
.feat-text strong { display: block; font-size: 14px; font-weight: 600; color: #FFFFFF; margin-bottom: 3px; }
.feat-text span { font-size: 12px; color: #FFFFFF; font-weight: 340; }

.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 10;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.65);
    cursor: pointer; font-size: 16px;
    transition: var(--transition-fast);
}
.hero-arrow#heroPrev { left: 24px; }
.hero-arrow#heroNext { right: 24px; }
.hero-arrow:hover { box-shadow: inset 0 0 0 1px var(--accent); color: var(--white); background: rgba(232,97,60,0.15); }
.hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; align-items: center; }
.hero-dot { width: 6px; height: 6px; padding: 0; border: 0; background: rgba(255,255,255,0.3); cursor: pointer; transition: var(--transition-fast); }
.hero-dot.active { width: 24px; background: var(--accent); }
.hero-progress { position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); z-index: 10; animation: heroProgress 5s linear infinite; }
@keyframes heroProgress { from { width: 0; } to { width: 100%; } }

/* ===== COMMON SECTION ===== */
.yc-section { padding: 90px 0; }
.yc-label { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.yc-label-light { color: var(--accent); }
.yc-title { font-size: 34px; font-weight: 800; color: var(--black); line-height: 1.4; letter-spacing: -0.5px; margin: 0 0 16px; }
.yc-title .dot { color: var(--accent); }
.yc-title-light { color: var(--white); }
.yc-sub { font-size: 15.5px; color: var(--gray-600); line-height: 1.8; max-width: 640px; }
.yc-sub-light { color: rgba(255,255,255,0.72); }

/* ===== WHY ===== */
.yc-why { background: var(--white); }
.yc-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 44px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.yc-why-card { background: var(--white); display: flex; flex-direction: column; padding: 40px 32px 32px; }
.yc-why-body { padding: 0; }
.yc-why-num { font-family: 'Poppins', sans-serif; font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 18px; }
.yc-why-card h4 { font-size: 20px; font-weight: 700; color: var(--black); margin: 0 0 12px; }
.yc-why-card p { font-size: 16.5px; color: var(--gray-600); line-height: 1.8; margin: 0; }
.yc-why-img-wrap { width: 70%; margin: 20px auto 0; aspect-ratio: 1 / 1; overflow: hidden; background: var(--white); }
.yc-why-img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== TRACK (법인결산센터는 "역할별 트랙"이 아니라 "니즈별 과정"이지만 동일 CSS 재사용) ===== */
.yc-track { background: var(--gray-100); }
.yc-track-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.yc-track-card {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--gray-200);
    padding: 32px 30px; position: relative;
    transition: var(--transition-fast);
}
.yc-track-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.yc-track-badge { display: inline-flex; align-items: center; gap: 6px; font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; margin-bottom: 16px; align-self: flex-start; }
.yc-track-card h3 { font-size: 19px; font-weight: 700; color: var(--black); line-height: 1.4; margin: 0 0 14px; }
.yc-track-card h3 strong { color: var(--accent); }
.yc-track-desc { font-size: 14px; color: var(--gray-600); line-height: 1.75; margin: 0 0 20px; }
.yc-track-meta { list-style: none; margin: 0 0 22px; padding: 0; margin-top: auto; }
.yc-track-meta li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--gray-700); margin-bottom: 8px; }
.yc-track-meta li i { color: var(--accent); width: 14px; }
.yc-track-link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--black); text-decoration: none; border-bottom: 1px solid var(--black); padding-bottom: 2px; align-self: flex-start; }
.yc-track-link:hover { color: var(--accent); border-color: var(--accent); }

/* ===== REFUND ===== */
.yc-refund { background: #2E156B; }
.yc-refund-inner { display: flex; justify-content: space-between; align-items: center; gap: 50px; flex-wrap: wrap; }
.yc-refund-text { flex: 1; min-width: 280px; }
.yc-refund-cards { display: flex; gap: 16px; }
.yc-refund-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); padding: 26px 24px; text-align: center; min-width: 150px; }
.yc-refund-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.yc-refund-price { font-size: 13px; color: rgba(255,255,255,0.4); margin-bottom: 4px; }
.yc-refund-price s { text-decoration: line-through; }
.yc-refund-real { font-family: 'Poppins', sans-serif; font-size: 26px; font-weight: 700; color: var(--accent); }
.yc-refund-real small { font-family: 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.6); margin-left: 2px; }
/* FINAL 과정처럼 환급 비대상인 카드 — 금액 강조 대신 회색 안내 텍스트로 구분 */
.yc-refund-real.is-none { font-family: 'Noto Sans KR', sans-serif; font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.45); }

/* ===== COMPARE TABLE ===== */
.yc-compare { background: var(--white); }
.yc-compare-table-wrap { margin-top: 40px; overflow-x: auto; border: 1px solid var(--gray-200); }
.yc-compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.yc-compare-table th, .yc-compare-table td { padding: 16px 20px; text-align: center; font-size: 16px; border-bottom: 1px solid var(--gray-200); }
.yc-compare-table th { background: var(--black); color: var(--white); font-weight: 600; font-size: 15.5px; }
.yc-compare-table td { color: var(--gray-700); }
.yc-compare-table tr:last-child td { border-bottom: none; }
.yc-compare-label { font-weight: 700; color: var(--black); background: var(--gray-100); text-align: left !important; }

/* ===== INSTRUCTORS (법인결산센터는 강사 3인 — 3열) ===== */
.yc-instructors { background: var(--gray-100); }
.yc-instructor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.yc-instructor-card { background: var(--white); border: 1px solid var(--gray-200); padding: 24px 24px 28px; }
.yc-instructor-photo-wrap { width: 70%; margin: 0 auto 20px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--white); }
.yc-instructor-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.yc-instructor-body { padding: 0; }
.yc-instructor-name { font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 12px; }
.yc-instructor-name span { font-size: 13px; font-weight: 400; color: var(--accent); margin-left: 4px; }
.yc-instructor-desc { font-size: 13.5px; color: var(--gray-600); line-height: 1.8; }

/* ===== BENEFITS ===== */
.yc-benefits { background: var(--white); }
.yc-benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 44px; background: var(--gray-200); border: 1px solid var(--gray-200); }
.yc-benefit-item { background: var(--white); padding: 36px 26px; }
.yc-benefit-icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-size: 18px; margin-bottom: 18px; }
.yc-benefit-item h4 { font-size: 19.5px; font-weight: 700; color: var(--black); margin: 0 0 10px; }
.yc-benefit-item p { font-size: 17px; color: var(--gray-600); line-height: 1.75; margin: 0; }

/* ===== FAQ ===== */
.yc-faq { background: var(--gray-100); }
.yc-faq-list { margin-top: 40px; max-width: 820px; }
.yc-faq-item { background: var(--white); border: 1px solid var(--gray-200); margin-bottom: 10px; }
.yc-faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; background: none; border: none; cursor: pointer;
    font-size: 15px; font-weight: 600; color: var(--black); text-align: left;
}
.yc-faq-q i { color: var(--gray-400); transition: transform 0.25s ease; flex-shrink: 0; margin-left: 16px; }
.yc-faq-item.open .yc-faq-q i { transform: rotate(180deg); color: var(--accent); }
.yc-faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.yc-faq-item.open .yc-faq-a { max-height: 240px; }
.yc-faq-a p { margin: 0; padding: 0 24px 22px; font-size: 14px; color: var(--gray-600); line-height: 1.8; }

/* ===== BOTTOM CTA ===== */
.yc-cta { background: #2E156B; padding: 70px 0; }
.yc-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.yc-cta-inner h2 { font-size: 24px; font-weight: 800; color: var(--white); margin: 0; }
.yc-cta-inner h2 .dot { color: var(--accent); }
.yc-cta-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 30px;
    background: #B00CDC; color: var(--white);
    font-size: 15px; font-weight: 700; text-decoration: none;
    transition: var(--transition-fast); flex-shrink: 0;
}
.yc-cta-btn:hover { background: #9B0BC2; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .page-hero .container { flex-direction: column; align-items: flex-start; padding-top: 170px; }
    .page-hero { height: auto; min-height: 780px; }
    .page-hero-features { width: 100%; min-width: 0; }
    .yc-why-grid, .yc-track-grid { grid-template-columns: 1fr; }
    .yc-benefit-grid, .yc-instructor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
    .yc-section { padding: 60px 0; }
    .yc-title { font-size: 26px; }
    .page-hero h1 { font-size: 32px; }
    .yc-benefit-grid, .yc-instructor-grid { grid-template-columns: 1fr; }
    .yc-refund-inner { flex-direction: column; align-items: flex-start; }
    .yc-refund-cards { width: 100%; flex-wrap: wrap; }
    .yc-refund-card { flex: 1; min-width: 100px; }
    .yc-cta-inner { flex-direction: column; align-items: flex-start; }
}