/* K-Digital INDEX page styles. ASCII only. Every rule is scoped to .kd-page.kd-index-page.
   Image slots: assets/images/index/*  (missing files fall back to the plain backgrounds below). */
.kd-index-page { --ix-img: "/menu/course-detail/k_digital/assets/images/index"; background: #fff; overflow-x: clip; }
.kd-index-page .container { padding: 0 20px; }
.kd-index-page ul, .kd-index-page ol { margin: 0; padding: 0; list-style: none; }
.kd-index-page em { font-style: normal; color: var(--kd-blue-600); }
.kd-index-page h1, .kd-index-page h2, .kd-index-page h3, .kd-index-page p { margin: 0; }
.kd-index-page button { font-family: inherit; cursor: pointer; }
.kd-index-page .kd-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.kd-index-page [hidden] { display: none !important; }

/* ---------- shared heads ---------- */
.kd-index-page .ix-head { margin-bottom: 40px; }
.kd-index-page .ix-head-center { text-align: center; }
.kd-index-page .ix-h2 { font-size: calc(var(--kd-fs-h2) + 4px); font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; color: var(--kd-text-900); }
.kd-index-page .ix-h2-md { font-size: var(--kd-fs-title-lg); }
.kd-index-page .ix-lead { margin-top: 20px; font-size: var(--kd-fs-body); font-weight: 400; line-height: 1.65; color: var(--kd-text-700); }
.kd-index-page .ix-lead strong { font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-lead-sm { margin-top: 12px; font-size: var(--kd-fs-small); }
.kd-index-page .ix-lead-gray { color: var(--kd-text-500); }
.kd-index-page .ix-eyebrow { margin-bottom: 22px; font-size: var(--kd-fs-small); font-weight: 600; color: var(--kd-blue-600); }
.kd-index-page .ix-eyebrow span { display: inline-flex; align-items: center; gap: 12px; }
.kd-index-page .ix-eyebrow span::before, .kd-index-page .ix-eyebrow span::after { content: ""; width: 34px; height: 2px; background: var(--kd-blue-600); }
.kd-index-page .ix-eyebrow-dash { color: var(--kd-text-700); font-weight: 500; }
.kd-index-page .ix-eyebrow-dash span::before, .kd-index-page .ix-eyebrow-dash span::after { content: none; }
.kd-index-page .ix-eyebrow-dash span::before { content: "\2013"; width: auto; height: auto; background: none; }
.kd-index-page .ix-eyebrow-dash span::after { content: "\2013"; width: auto; height: auto; background: none; }
.kd-index-page .ix-eyebrow-line { color: var(--kd-text-500); }
.kd-index-page .ix-eyebrow-line span::after { content: none; }
.kd-index-page .ix-eyebrow-line span::before { width: 22px; height: 1px; background: var(--kd-text-500); }
.kd-index-page .ix-eyebrow-plain span::before, .kd-index-page .ix-eyebrow-plain span::after { content: none; }
.kd-index-page .ix-pill { display: inline-block; margin-bottom: 20px; padding: 9px 24px; border-radius: 999px; background: #E3ECFD; color: var(--kd-blue-600); font-size: var(--kd-fs-body); font-weight: 700; }
.kd-index-page .ix-pill-sm { padding: 6px 16px; font-size: var(--kd-fs-small); }
.kd-index-page .ix-pill-line { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; background: #fff; border: 1px solid #BFD3F8; font-size: var(--kd-fs-small); font-weight: 600; }
.kd-index-page .ix-img { display: block; background-repeat: no-repeat; background-position: center; background-size: contain; }
.kd-index-page .ix-foot { margin-top: 26px; font-size: 12px; line-height: 1.6; color: var(--kd-text-500); text-align: center; }

/* ---------- 1 hero ---------- */
.kd-index-page .ix-hero { position: relative; min-height: 473px; background: radial-gradient(120% 140% at 80% 20%, #16233a 0%, #080e17 55%, #050A11 100%); color: #fff; overflow: hidden; }
.kd-index-page .ix-hero::before { content: ""; position: absolute; inset: 0; background: url("/menu/course-detail/k_digital/assets/images/index/hero_bg.jpg?v=2026111301") center / cover no-repeat; }
.kd-index-page .ix-hero-inner { position: relative; display: flex; align-items: center; min-height: 473px; }
.kd-index-page .ix-hero-text { position: relative; z-index: 2; max-width: 560px; padding: 40px 0 36px; }
.kd-index-page .ix-hero-eyebrow { display: flex; align-items: center; gap: 12px; font-size: var(--kd-fs-small); font-weight: 600; }
.kd-index-page .ix-hero-eyebrow::before { content: ""; width: 38px; height: 2px; background: var(--kd-blue-600); }
.kd-index-page .ix-hero-title { margin-top: 20px; font-size: var(--kd-fs-h1); font-weight: 500; line-height: 1.32; letter-spacing: -0.03em; color: #fff; }
.kd-index-page .ix-hero-title b { font-weight: 700; }
.kd-index-page .ix-hero-band { position: relative; display: inline-block; margin-top: 8px; margin-left: -14px; padding: 0 14px; font-weight: 700; z-index: 0; }
.kd-index-page .ix-hero-band::before { content: ""; position: absolute; left: 0; right: 28%; top: 4px; bottom: 2px; background: linear-gradient(90deg, #0A54E8, #1C6BFF 70%, rgba(28, 107, 255, 0)); transform: skewX(-14deg); z-index: -1; }
.kd-index-page .ix-hero-desc { margin-top: 28px; font-size: var(--kd-fs-body); font-weight: 400; line-height: 1.7; color: rgba(255, 255, 255, 0.88); }
.kd-index-page .ix-hero-btn { margin-top: 32px; height: 52px; padding: 0 34px; gap: 18px; }
.kd-index-page .ix-hero-visual { position: absolute; right: 0; top: 0; bottom: 0; width: 60%; z-index: 1; pointer-events: none; }
.kd-index-page .ix-hero-stage { position: absolute; inset: 0; background: url("/menu/course-detail/k_digital/assets/images/index/hero_stage.png?v=2026111301") right bottom / contain no-repeat; }

/* ---------- 2 courses ---------- */
.kd-index-page .ix-courses { padding: 36px 0 58px; background: linear-gradient(180deg, #F3F7FE 0%, #EAF1FE 100%); }
.kd-index-page .ix-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 26px; }
.kd-index-page .ix-filter-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 28px; border: 1px solid #E0E8F7; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-size: var(--kd-fs-small); font-weight: 600; box-shadow: 0 4px 12px rgba(15, 40, 122, 0.05); transition: background 0.2s, color 0.2s; }
.kd-index-page .ix-filter-btn i { display: inline-block; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #E3ECFD; color: var(--kd-navy-700); font-style: normal; font-size: 13px; font-weight: 700; line-height: 24px; text-align: center; }
.kd-index-page .ix-filter-btn.is-active { background: var(--kd-navy-700); border-color: var(--kd-navy-700); color: #fff; }
.kd-index-page .ix-filter-btn.is-active i { background: #fff; color: var(--kd-navy-700); }
.kd-index-page .ix-filter-btn:focus-visible, .kd-index-page .ix-card-link:focus-visible { outline: 3px solid var(--kd-cyan-400); outline-offset: 2px; }
.kd-index-page .ix-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 auto; }
.kd-index-page .ix-card { display: flex; flex-direction: column; padding: 8px 8px 0; border-radius: 18px; background: #fff; box-shadow: 0 10px 26px rgba(15, 40, 122, 0.08); border: 1px solid #EDF1FA; transition: transform 0.2s, box-shadow 0.2s; }
.kd-index-page .ix-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(15, 40, 122, 0.14); }
.kd-index-page .ix-card.is-off { display: none; }
.kd-index-page .ix-card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #E9EEF7, #DCE4F1); }
.kd-index-page .ix-card-img { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.kd-index-page .ix-card-no { position: absolute; left: 10px; top: 10px; min-width: 34px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-size: 13px; font-weight: 700; line-height: 26px; text-align: center; box-shadow: 0 2px 6px rgba(15, 40, 122, 0.12); }
.kd-index-page .ix-card-body { display: flex; flex: 1; flex-direction: column; padding: 12px 10px 16px; }
.kd-index-page .ix-card-tags { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; }
.kd-index-page .ix-new { padding: 2px 6px; border-radius: 4px; background: var(--kd-new); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.3; }
.kd-index-page .ix-cat { color: var(--kd-text-700); }
.kd-index-page .ix-card-title { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--kd-text-900); letter-spacing: -0.03em; }
.kd-index-page .ix-card-desc { margin-top: 8px; font-size: 13.5px; font-weight: 400; line-height: 1.55; color: var(--kd-text-500); }
.kd-index-page .ix-card-tags { flex-wrap: wrap; row-gap: 6px; }
.kd-index-page .ix-new-img { display: block; width: 33px; height: 15px; }
.kd-index-page .ix-planned { padding: 2px 8px; border: 1px solid #BFD3F8; border-radius: 999px; background: #fff; color: var(--kd-blue-600); font-size: 11px; font-weight: 700; }
.kd-index-page .ix-card-benefits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kd-index-page .ix-benefit-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 5px; background: #E7EFFF; color: var(--kd-blue-600); font-size: 12px; font-weight: 700; line-height: 1.4; }
.kd-index-page .ix-benefit-chip.is-kit { background: #E5E9F2; color: var(--kd-text-700); }
.kd-index-page .ix-benefit-chip.is-ai { background: #EEF2FA; color: var(--kd-text-500); }
.kd-index-page .ix-card-note { margin-top: 4px; font-size: 12px; color: var(--kd-text-500); }
.kd-index-page .ix-card-link { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 700; color: var(--kd-text-900); text-decoration: none; }
.kd-index-page .ix-card-link .kd-ico { width: 14px; height: 14px; stroke-width: 2.4; }
.kd-index-page .ix-card-link.is-pending { color: var(--kd-text-500); cursor: default; }
.kd-index-page .ix-finder { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1000px; margin: 22px auto 0; padding: 12px 20px 12px 18px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(15, 40, 122, 0.08); }
.kd-index-page .ix-finder-text { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--kd-text-500); }
.kd-index-page .ix-finder-text strong { font-size: var(--kd-fs-body); font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-finder-ico { width: 28px; height: 28px; color: var(--kd-blue-600); fill: var(--kd-blue-600); stroke: none; }
.kd-index-page .ix-finder-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 26px; border-radius: 10px; background: var(--kd-navy-700); color: #fff; font-size: var(--kd-fs-small); font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 8px 18px rgba(15, 40, 122, 0.25); }

/* ---------- 3 benefit ---------- */
.kd-index-page .ix-benefit { padding: 64px 0 60px; background: #F8FAFE; }
.kd-index-page .ix-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1000px; margin: 0 auto 36px; }
.kd-index-page .ix-stat { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; min-height: 116px; padding: 18px 20px 16px; border-radius: 14px; background: #fff; box-shadow: 0 8px 22px rgba(15, 40, 122, 0.07); }
.kd-index-page .ix-stat-ico { grid-column: 1 / -1; width: 26px; height: 26px; margin-bottom: 14px; color: var(--kd-text-900); }
.kd-index-page .ix-stat-l strong { display: block; font-size: var(--kd-fs-body); font-weight: 700; line-height: 1.3; color: var(--kd-text-900); }
.kd-index-page .ix-stat-l span { display: block; margin-top: 4px; font-size: 12px; color: var(--kd-text-500); }
.kd-index-page .ix-stat-v { padding-left: 14px; border-left: 1px solid #DCE3F0; font-size: var(--kd-fs-num); font-weight: 700; color: var(--kd-text-500); line-height: 1.4; white-space: nowrap; }
.kd-index-page .ix-stat.is-active { background: linear-gradient(135deg, #E4EDFF, #F3F7FF); }
.kd-index-page .ix-stat.is-active .ix-stat-ico, .kd-index-page .ix-stat.is-active .ix-stat-v { color: var(--kd-blue-600); }
.kd-index-page .ix-benefit-card { display: grid; grid-template-columns: 5fr 7fr; max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(15, 40, 122, 0.10); }
.kd-index-page .ix-benefit-photo { position: relative; min-height: 300px; background: linear-gradient(135deg, #CBD3E2, #E6EAF2); }
.kd-index-page .ix-benefit-img { position: absolute; inset: 0; background: url("/menu/course-detail/k_digital/assets/images/index/benefit_online.jpg?v=2026111301") center / cover no-repeat; }
.kd-index-page .ix-benefit-badge { position: absolute; left: 24px; bottom: 22px; color: #fff; }
.kd-index-page .ix-benefit-badge b { display: block; font-size: 46px; font-weight: 700; line-height: 1; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }
.kd-index-page .ix-benefit-badge small { font-size: 26px; font-weight: 700; }
.kd-index-page .ix-benefit-badge span { display: inline-block; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-size: 13px; font-weight: 600; }
.kd-index-page .ix-benefit-body { padding: 32px 36px 30px; }
.kd-index-page .ix-benefit-tags { display: flex; align-items: center; gap: 8px; }
.kd-index-page .ix-chip-blue { display: inline-block; padding: 5px 14px; border-radius: 999px; background: var(--kd-blue-600); color: #fff; font-size: 12.5px; font-weight: 700; }
.kd-index-page .ix-chip-gray { display: inline-block; padding: 5px 14px; border-radius: 999px; background: #EEF2FA; color: var(--kd-text-700); font-size: 12.5px; font-weight: 500; }
.kd-index-page .ix-chip-soft { background: #E7EFFF; color: var(--kd-blue-600); font-weight: 600; }
.kd-index-page .ix-benefit-title { margin-top: 18px; font-size: var(--kd-fs-title-lg); font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: var(--kd-text-900); }
.kd-index-page .ix-benefit-desc { margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid #E5E9F2; font-size: var(--kd-fs-body); color: var(--kd-text-700); }
.kd-index-page .ix-benefit-points { display: flex; align-items: center; margin-top: 18px; }
.kd-index-page .ix-benefit-points li { display: flex; flex: 1; align-items: center; gap: 14px; }
.kd-index-page .ix-benefit-points li + li { padding-left: 28px; margin-left: 28px; border-left: 1px solid #DCE3F0; }
.kd-index-page .ix-ico-box { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: #E7EFFF; color: var(--kd-blue-600); font-size: 24px; }
.kd-index-page .ix-benefit-points small { display: block; font-size: 13px; color: var(--kd-text-500); }
.kd-index-page .ix-benefit-points strong { display: block; margin-top: 2px; font-size: var(--kd-fs-h4); font-weight: 700; color: var(--kd-text-900); }

/* ---------- 4 recommend band ---------- */
.kd-index-page .ix-recommend { padding: 38px 0 40px; background: radial-gradient(120% 160% at 0% 0%, #0A5CD0 0%, #0044AF 45%, #003C9E 100%); color: #fff; text-align: center; }
.kd-index-page .ix-rec-title { font-size: var(--kd-fs-title-lg); font-weight: 700; color: #fff; }
.kd-index-page .ix-rec-title span { display: inline-flex; align-items: center; gap: 18px; }
.kd-index-page .ix-rec-title span::before, .kd-index-page .ix-rec-title span::after { content: ""; width: 40px; height: 1px; background: rgba(255, 255, 255, 0.7); }
.kd-index-page .ix-rec-title em { color: #7CE0FF; }
.kd-index-page .ix-rec-list { display: grid; grid-template-columns: repeat(5, 1fr); max-width: 880px; margin: 30px auto 0; }
.kd-index-page .ix-rec-list li { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px 10px; }
.kd-index-page .ix-rec-list li + li { border-left: 1px solid rgba(255, 255, 255, 0.25); }
.kd-index-page .ix-rec-ico { width: 42px; height: 42px; color: #fff; stroke-width: 1.5; }
.kd-index-page .ix-rec-list p { font-size: var(--kd-fs-small); font-weight: 600; line-height: 1.5; color: #fff; }

/* ---------- 5 why / news ---------- */
.kd-index-page .ix-why { padding: 56px 0 44px; background: #fff; }
.kd-index-page .ix-why .container { max-width: 1000px; }
.kd-index-page .ix-why .ix-h2 em { display: inline; }
.kd-index-page .ix-tablet { max-width: 1000px; margin: 8px auto 0; padding: 14px; border-radius: 34px; background: #2A2D33; box-shadow: 0 24px 50px rgba(5, 10, 17, 0.28); }
.kd-index-page .ix-tablet-screen { overflow: hidden; border-radius: 22px; background: #fff; }
.kd-index-page .ix-news-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 18px 28px 0; }
.kd-index-page .ix-news-view { font-size: 13px; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-news-logo { text-align: center; }
.kd-index-page .ix-news-logo b { display: block; font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 900; line-height: 1.1; color: #0B1220; }
.kd-index-page .ix-news-logo b i { color: var(--kd-blue-600); }
.kd-index-page .ix-news-logo span { display: block; margin-top: 4px; padding-top: 4px; font-size: 11.5px; color: var(--kd-text-500); }
.kd-index-page .ix-news-src { justify-self: end; font-size: 14px; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-news-stage { position: relative; margin: 8px 28px 0; padding: 14px 0 0; border-top: 1px solid #0B1220; min-height: 190px; }
.kd-index-page .ix-news-item { display: none; grid-template-columns: 1.1fr 1fr; column-gap: 28px; }
.kd-index-page .ix-news-item.is-active { display: grid; animation: ix-fade 0.35s ease; }
@keyframes ix-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kd-index-page .ix-news-date { grid-column: 1 / -1; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--kd-blue-600); }
.kd-index-page .ix-news-head { font-size: 25px; font-weight: 700; line-height: 1.4; letter-spacing: -0.03em; color: var(--kd-text-900); }
.kd-index-page .ix-news-head span { background: linear-gradient(transparent 82%, #A9C4F7 82%); }
.kd-index-page .ix-news-sum { padding-left: 22px; border-left: 1px solid #C9D3E6; font-size: 12.5px; line-height: 1.65; color: var(--kd-text-700); }
.kd-index-page .ix-news-sum p + p { margin-top: 10px; }
.kd-index-page .ix-news-sum:empty { display: none; }
.kd-index-page .ix-news-item:has(.ix-news-sum:empty) { grid-template-columns: 1fr; }
.kd-index-page .ix-news-ctrl { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 28px 0; padding: 14px 0; border-top: 1px solid #C9D3E6; border-bottom: 1px solid #C9D3E6; }
.kd-index-page .ix-news-nav { display: flex; align-items: center; gap: 10px; }
.kd-index-page .ix-round { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 1px solid #9FB5E6; border-radius: 50%; background: #fff; color: var(--kd-navy-700); font-size: 16px; }
.kd-index-page .ix-news-count { min-width: 56px; text-align: center; font-size: 13px; font-weight: 400; color: var(--kd-text-700); }
.kd-index-page .ix-news-count b { font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-pausebtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #9FB5E6; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-size: 12.5px; font-weight: 600; }
.kd-index-page .ix-news-origin { display: inline-flex; align-items: center; gap: 6px; padding-bottom: 2px; border-bottom: 2px solid var(--kd-blue-600); color: var(--kd-blue-600); font-size: 14px; font-weight: 700; text-decoration: none; }
.kd-index-page .ix-news-origin.is-pending { opacity: 0.55; cursor: default; }
.kd-index-page .ix-news-tick { margin-top: 0; padding: 14px 18px 18px; background: #fff; }
.kd-index-page .ix-tick-hint { display: flex; align-items: center; gap: 8px; margin: 0 6px 10px; font-size: 13px; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-bulb { width: 20px; height: 20px; color: var(--kd-blue-600); }
.kd-index-page .ix-tick-list { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 9px 18px; border-radius: 999px; background: #E9F0FC; }
.kd-index-page .ix-tick-list button { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--kd-text-900); font-size: 11.5px; font-weight: 600; text-align: left; }
.kd-index-page .ix-tick-list button em { color: var(--kd-blue-600); font-style: normal; font-weight: 600; }
.kd-index-page .ix-tick-list button small { color: var(--kd-text-500); font-size: 11.5px; }
.kd-index-page .ix-tick-list button small::before { content: "\00B7"; margin-right: 8px; }
.kd-index-page .ix-tick-list button:hover span, .kd-index-page .ix-tick-list button.is-on span { color: var(--kd-blue-600); text-decoration: underline; }

/* ---------- 6 after completion ---------- */
.kd-index-page .ix-after { padding: 40px 0 60px; background: #F3F7FE; }
.kd-index-page .ix-after-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 980px; margin: 0 auto; }
.kd-index-page .ix-after-card { position: relative; overflow: hidden; min-height: 150px; padding: 24px 26px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px rgba(15, 40, 122, 0.08); border: 1px solid #EDF1FA; }
.kd-index-page .ix-after-text { position: relative; z-index: 1; max-width: 62%; }
.kd-index-page .ix-after-no { font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: var(--kd-text-700); }
.kd-index-page .ix-after-card h3 { margin-top: 12px; font-size: var(--kd-fs-h3); font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: var(--kd-text-900); }
.kd-index-page .ix-after-desc { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--kd-text-500); }
.kd-index-page .ix-after-go { position: absolute; right: 16px; top: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(15, 40, 122, 0.15); color: var(--kd-text-900); font-size: 16px; }
.kd-index-page .ix-after-img { position: absolute; right: 18px; bottom: 14px; width: 36%; height: 70%; background-repeat: no-repeat; background-position: right bottom; background-size: contain; }
.kd-index-page .ix-img-after_certificate { background-image: url("/menu/course-detail/k_digital/assets/images/index/after_certificate.png?v=2026111301"); }
.kd-index-page .ix-img-after_coaching { background-image: url("/menu/course-detail/k_digital/assets/images/index/after_coaching.png?v=2026111301"); }
.kd-index-page .ix-img-after_portfolio { background-image: url("/menu/course-detail/k_digital/assets/images/index/after_portfolio.png?v=2026111301"); }
.kd-index-page .ix-img-after_completion { background-image: url("/menu/course-detail/k_digital/assets/images/index/after_completion.png?v=2026111301"); }
.kd-index-page .ix-after-card.is-blue { background: linear-gradient(135deg, #0A64FF, #0050E6); border-color: transparent; }
.kd-index-page .ix-after-card.is-blue h3, .kd-index-page .ix-after-card.is-blue .ix-after-no { color: #fff; }
.kd-index-page .ix-after-card.is-blue h3 em { color: #fff; }
.kd-index-page .ix-after-card.is-blue .ix-after-desc { color: rgba(255, 255, 255, 0.82); }
.kd-index-page .ix-after-card.is-navy { background: linear-gradient(135deg, #0A3A9E, #082B7A); border-color: transparent; }
.kd-index-page .ix-after-card.is-navy h3, .kd-index-page .ix-after-card.is-navy .ix-after-no { color: #fff; }
.kd-index-page .ix-after-card.is-navy h3 em { color: #4DE3F4; }
.kd-index-page .ix-after-card.is-navy .ix-after-desc { color: rgba(255, 255, 255, 0.8); }

/* ---------- 7 insight ---------- */
.kd-index-page .ix-insight { padding: 60px 0 70px; background: #fff; }
.kd-index-page .ix-insight .container { max-width: 1000px; }
.kd-index-page .ix-insight .ix-eyebrow { color: var(--kd-blue-600); font-weight: 700; margin-bottom: 14px; }
.kd-index-page .ix-h2-dark { font-size: var(--kd-fs-title-lg); }
.kd-index-page .ix-lead-navy { margin-top: 14px; color: var(--kd-navy-700); }
.kd-index-page .ix-insight-panel { padding: 16px 16px 14px; border-radius: 24px; background: linear-gradient(180deg, #EEF1F7, #E3E8F1); }
.kd-index-page .ix-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kd-index-page .ix-chart-card { padding: 18px 16px 14px; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(15, 40, 122, 0.08); min-width: 0; }
.kd-index-page .ix-chart-card h3 { font-size: var(--kd-fs-small); font-weight: 700; line-height: 1.4; color: var(--kd-text-900); }
.kd-index-page .ix-chart-card h3 strong { display: block; margin-top: 2px; font-size: var(--kd-fs-body); font-weight: 700; color: var(--kd-blue-600); }
.kd-index-page .ix-src { margin: 4px 0 10px; font-size: 11px; color: var(--kd-text-500); }
.kd-index-page .ix-chart { display: block; width: 100%; height: auto; }
.kd-index-page .ix-chart .t, .kd-index-page .ix-chart .t2, .kd-index-page .ix-chart .t3 { fill: #555; font-size: 10.5px; }
.kd-index-page .ix-chart .t2 { font-size: 11.5px; fill: #333; }
.kd-index-page .ix-chart .t3 { font-size: 10px; }
.kd-index-page .ix-chart .bar { fill: #D7DCE6; }
.kd-index-page .ix-chart .bar-hi { fill: #1257F5; }
.kd-index-page .ix-chart .ln { stroke: #1257F5; stroke-width: 1.6; fill: none; }
.kd-index-page .ix-chart .dot { fill: #fff; stroke: #1257F5; stroke-width: 2; }
.kd-index-page .ix-chart .lab { fill: #1257F5; font-size: 11px; font-weight: 700; }
.kd-index-page .ix-prog { border: 1px solid #E3E7F0; border-radius: 10px; overflow: hidden; font-size: 11.5px; }
.kd-index-page .ix-prog-h { display: flex; justify-content: space-between; padding: 8px 12px; background: #F4F6FA; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-prog-row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 6px; padding: 7px 12px; border-top: 1px solid #EEF0F6; color: var(--kd-text-700); }
.kd-index-page .ix-prog-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.kd-index-page .ix-prog-bar i { display: block; height: 14px; border-radius: 2px; background: linear-gradient(90deg, #CBD0DB, #9EA7B8); }
.kd-index-page .ix-prog-bar b { font-weight: 600; font-size: 11px; color: var(--kd-text-700); white-space: nowrap; }
.kd-index-page .ix-prog-row.is-last { background: linear-gradient(90deg, #4C8DFF, #0F5BFF); color: #fff; }
.kd-index-page .ix-prog-row.is-last .ix-prog-bar { justify-content: flex-end; }
.kd-index-page .ix-prog-row.is-last .ix-prog-bar i { display: none; }
.kd-index-page .ix-prog-row.is-last .ix-prog-bar b { color: #fff; }
.kd-index-page .ix-prog-row.is-last .ix-prog-y { color: #fff; font-weight: 600; }
.kd-index-page .ix-donut-wrap { display: flex; align-items: center; gap: 10px; }
.kd-index-page .ix-donut { flex: 0 0 52%; width: 52%; height: auto; }
.kd-index-page .ix-donut .pct { font-size: 12px; font-weight: 700; }
.kd-index-page .ix-donut .mid { font-size: 10.5px; font-weight: 700; fill: #111; }
.kd-index-page .ix-legend { display: grid; gap: 7px; flex: 1; min-width: 0; font-size: 11px; color: var(--kd-text-700); }
.kd-index-page .ix-legend li { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.kd-index-page .ix-legend i { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
.kd-index-page .ix-legend b { margin-left: auto; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 12px; padding: 0 8px; }
.kd-index-page .ix-results li { position: relative; padding-top: 12px; text-align: center; }
.kd-index-page .ix-results li::before { content: ""; position: absolute; left: 50%; top: -6px; width: 1px; height: 14px; border-left: 1px dashed #1257F5; }
.kd-index-page .ix-results span { display: block; padding: 10px 14px; border-radius: 999px; background: #0F5BFF; color: #fff; font-size: var(--kd-fs-small); font-weight: 700; box-shadow: 0 6px 14px rgba(15, 91, 255, 0.3); }

/* ---------- 8 credit (dark) ---------- */
.kd-index-page .ix-credit { padding: 58px 0 52px; background: radial-gradient(90% 60% at 20% 0%, #0A1A66 0%, #060E3D 60%, #050B30 100%); color: #fff; }
.kd-index-page .ix-credit .container { max-width: 940px; }
.kd-index-page .ix-credit-chip { display: inline-block; padding: 8px 14px; border-radius: 6px; background: rgba(46, 94, 220, 0.22); border: 1px solid rgba(97, 144, 255, 0.28); font-size: var(--kd-fs-small); color: #fff; }
.kd-index-page .ix-credit-chip b { color: #4DE3F4; font-weight: 700; }
.kd-index-page .ix-h2-light { margin-top: 24px; color: #fff; font-size: var(--kd-fs-title-lg); }
.kd-index-page .ix-h2-light em { position: relative; color: #4DE3F4; }
.kd-index-page .ix-lead-light { margin-top: 16px; color: rgba(255, 255, 255, 0.82); }
.kd-index-page .ix-credit .ix-head { margin-bottom: 40px; }
.kd-index-page .ix-credit-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.kd-index-page .ix-credit-card { position: relative; overflow: hidden; min-height: 270px; padding: 22px 22px 20px; border-radius: 20px; background: linear-gradient(160deg, #FFFFFF, #E7EDFA); color: var(--kd-text-900); }
.kd-index-page .ix-credit-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: #DFE8FC; color: var(--kd-navy-700); font-size: 13px; font-weight: 700; }
.kd-index-page .ix-credit-tag .kd-ico { width: 20px; height: 20px; color: var(--kd-blue-600); }
.kd-index-page .ix-credit-card h3 { margin-top: 20px; font-size: var(--kd-fs-h3); font-weight: 700; letter-spacing: -0.03em; line-height: 1.32; color: var(--kd-text-900); }
.kd-index-page .ix-credit-card > p:not(.ix-credit-tag) { position: relative; z-index: 1; margin-top: 12px; font-size: 14px; line-height: 1.55; color: var(--kd-text-700); }
.kd-index-page .ix-credit-card .ix-img { position: absolute; right: 12px; bottom: 10px; width: 68%; height: 44%; background-position: right bottom; }
.kd-index-page .ix-img-credit_card { background-image: url("/menu/course-detail/k_digital/assets/images/index/credit_card.png?v=2026111301"); }
.kd-index-page .ix-img-credit_laptop { background-image: url("/menu/course-detail/k_digital/assets/images/index/credit_laptop.png?v=2026111301"); }
.kd-index-page .ix-img-credit_coins { background-image: url("/menu/course-detail/k_digital/assets/images/index/credit_coins.png?v=2026111301"); width: 40% !important; height: 46% !important; }
.kd-index-page .ix-credit-card.is-benefit { background: linear-gradient(160deg, #1E5BE0, #0B3BB0); border: 1px solid rgba(120, 170, 255, 0.5); color: #fff; }
.kd-index-page .ix-credit-card.is-benefit .ix-credit-tag { background: #fff; }
.kd-index-page .ix-credit-card.is-benefit h3 { font-size: var(--kd-fs-title-lg); color: #fff; }
.kd-index-page .ix-credit-card.is-benefit h3 em { color: #4DE3F4; }
.kd-index-page .ix-credit-card.is-benefit > p.ix-credit-sub { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.3); font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.kd-index-page .ix-support { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0 22px; margin-top: 44px; padding: 22px 26px 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(20, 44, 130, 0.7), rgba(8, 20, 76, 0.85)); border: 1px solid rgba(120, 150, 255, 0.28); }
.kd-index-page .ix-support-icon { width: 84px; height: 84px; background-image: url("/menu/course-detail/k_digital/assets/images/index/support_megaphone.png?v=2026111301"); }
.kd-index-page .ix-support-text { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.35); }
.kd-index-page .ix-support-text h3 { font-size: var(--kd-fs-h3); font-weight: 700; color: #fff; }
.kd-index-page .ix-support-text h3 em { color: #4DE3F4; }
.kd-index-page .ix-support-text p { margin-top: 6px; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); }
.kd-index-page .ix-support-btns { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.kd-index-page .ix-support-btns a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(60, 86, 170, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.kd-index-page .ix-support-btns a:hover { background: rgba(60, 100, 200, 0.7); transform: translateY(-2px); }
.kd-index-page .ix-sb-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: #DDE8FF; color: var(--kd-blue-600); font-size: 22px; flex: 0 0 auto; }
.kd-index-page .ix-support-btns p { flex: 1; min-width: 0; }
.kd-index-page .ix-support-btns strong { display: block; font-size: var(--kd-fs-body); font-weight: 700; color: #fff; }
.kd-index-page .ix-support-btns small { display: block; margin-top: 3px; font-size: 12px; color: rgba(255, 255, 255, 0.78); }
.kd-index-page .ix-sb-go { width: 22px; height: 22px; color: #fff; }

/* ---------- 9 apply ---------- */
.kd-index-page .ix-apply { padding: 54px 0 70px; background: linear-gradient(180deg, #EEF3FD, #E8EFFC); }
.kd-index-page .ix-h2-md em { display: inline; }
.kd-index-page .ix-ul { position: relative; display: inline-block; }
.kd-index-page .ix-ul::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -6px; height: 8px; border-bottom: 2px solid var(--kd-blue-600); border-radius: 0 0 60% 60% / 0 0 100% 100%; }
.kd-index-page .ix-apply .ix-head { margin-bottom: 26px; }
.kd-index-page .ix-apply-panel { max-width: 760px; margin: 0 auto; padding: 18px 22px 16px; border-radius: 22px; background: #fff; box-shadow: 0 16px 40px rgba(15, 40, 122, 0.12); }
.kd-index-page .ix-apply-top { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #EAEEF6; flex-wrap: wrap; }
.kd-index-page .ix-apply-cardimg { width: 54px; height: 40px; background-image: url("/menu/course-detail/k_digital/assets/images/index/apply_card.png?v=2026111301"); }
.kd-index-page .ix-apply-q strong { display: block; font-size: var(--kd-fs-body); font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-apply-q span { display: block; margin-top: 2px; font-size: 12px; color: var(--kd-text-500); }
.kd-index-page .ix-apply-what { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid #C9D8F7; border-radius: 999px; background: #F5F8FF; font-size: 12px; font-weight: 600; color: var(--kd-navy-700); margin-left: 6px; }
.kd-index-page .ix-apply-what .kd-ico { width: 14px; height: 14px; }
.kd-index-page .ix-toggle { display: inline-flex; margin-left: auto; padding-left: 20px; border-left: 1px solid #DCE3F0; gap: 6px; }
.kd-index-page .ix-toggle button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 108px; height: 36px; padding: 0 16px; border: 1px solid #E3E8F2; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-size: var(--kd-fs-small); font-weight: 700; transition: background 0.2s, color 0.2s; }
.kd-index-page .ix-toggle button[aria-pressed="true"] { background: var(--kd-blue-600); border-color: var(--kd-blue-600); color: #fff; box-shadow: 0 6px 14px rgba(0, 92, 254, 0.3); }
.kd-index-page .ix-toggle .kd-ico { width: 15px; height: 15px; stroke-width: 2.6; }
.kd-index-page .ix-steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); margin: 14px 0 12px; }
.kd-index-page .ix-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 19px; height: 6px; border-radius: 3px; background: #DCE3F0; }
.kd-index-page .ix-steps::after { content: ""; position: absolute; left: 12%; top: 19px; height: 6px; border-radius: 3px; background: var(--kd-blue-600); width: var(--ix-prog, 0%); transition: width 0.35s ease; }
.kd-index-page .ix-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kd-index-page .ix-steps button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid #D5DCEA; border-radius: 50%; background: #fff; color: var(--kd-text-500); font-size: var(--kd-fs-body); font-weight: 700; box-shadow: 0 3px 10px rgba(15, 40, 122, 0.12); }
.kd-index-page .ix-steps span { font-size: var(--kd-fs-small); font-weight: 700; color: var(--kd-text-500); }
.kd-index-page .ix-steps li.is-active button { width: 50px; height: 50px; margin: -3px 0; border-color: transparent; background: linear-gradient(135deg, #1B73FF, #0045D8); color: #fff; box-shadow: 0 8px 18px rgba(0, 92, 254, 0.4); }
.kd-index-page .ix-steps li.is-active span, .kd-index-page .ix-steps li.is-done span { color: var(--kd-blue-600); }
.kd-index-page .ix-steps li.is-done button { border-color: var(--kd-blue-600); color: var(--kd-blue-600); }
.kd-index-page .ix-step-panel { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 120px; padding: 18px 24px; border-radius: 12px; background: #E6EEFC; overflow: hidden; }
.kd-index-page .ix-step-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #CFE0FD; color: var(--kd-blue-600); font-size: 11px; font-weight: 700; }
.kd-index-page .ix-step-text h3 { margin-top: 8px; font-size: var(--kd-fs-title-lg); font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-step-text p:last-child { margin-top: 6px; font-size: var(--kd-fs-small); line-height: 1.55; color: var(--kd-text-700); }
.kd-index-page .ix-step-img { flex: 0 0 42%; align-self: stretch; min-height: 96px; background-position: right center; background-image: url("/menu/course-detail/k_digital/assets/images/index/apply_step_search.png?v=2026111301"); }
.kd-index-page .ix-apply-panel[data-step="2"] .ix-step-img { background-image: url("/menu/course-detail/k_digital/assets/images/index/apply_step_apply.png?v=2026111301"); }
.kd-index-page .ix-apply-panel[data-step="3"] .ix-step-img { background-image: url("/menu/course-detail/k_digital/assets/images/index/apply_step_check.png?v=2026111301"); }
.kd-index-page .ix-apply-call { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #EAEEF6; flex-wrap: wrap; }
.kd-index-page .ix-call-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: #E7EFFF; color: var(--kd-blue-600); font-size: 20px; }
.kd-index-page .ix-apply-call strong { font-size: var(--kd-fs-body); font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-call-sub { padding-left: 12px; border-left: 1px solid #DCE3F0; font-size: 12px; color: var(--kd-text-500); }
.kd-index-page .ix-call-tel { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 8px 20px; border-radius: 12px; background: #E7EFFF; color: var(--kd-blue-600); font-size: var(--kd-fs-h3); font-weight: 700; text-decoration: none; }

/* ---------- 10 FAQ ---------- */
.kd-index-page .ix-faq { padding: 44px 0 56px; background: radial-gradient(100% 120% at 70% 40%, #0A4BC2 0%, #03389E 55%, #022B80 100%); color: #fff; overflow: hidden; }
.kd-index-page .ix-faq::before { content: ""; position: absolute; }
.kd-index-page .ix-faq { position: relative; }
.kd-index-page .ix-faq-bg { position: absolute; inset: 0; }
.kd-index-page .ix-faq-eyebrow { text-align: center; font-size: var(--kd-fs-small); font-weight: 500; color: #fff; }
.kd-index-page .ix-faq-eyebrow span { display: inline-flex; align-items: center; gap: 16px; }
.kd-index-page .ix-faq-eyebrow span::before, .kd-index-page .ix-faq-eyebrow span::after { content: ""; width: 26px; height: 1px; background: rgba(255, 255, 255, 0.8); }
.kd-index-page .ix-faq-stage { position: relative; min-height: 480px; margin-top: 30px; }
.kd-index-page .ix-faq-stage::before { content: ""; position: absolute; inset: -20px 0 0; background: url("/menu/course-detail/k_digital/assets/images/index/faq_bg.jpg?v=2026111301") center / cover no-repeat; opacity: 0.9; pointer-events: none; }
.kd-index-page .ix-faq-center { position: absolute; left: 50%; top: 84px; width: 300px; margin-left: -150px; text-align: center; z-index: 2; }
.kd-index-page .ix-faq-center h2 { font-size: var(--kd-fs-title-lg); font-weight: 700; line-height: 1.32; color: #fff; }
.kd-index-page .ix-faq-center p { margin-top: 16px; font-size: 13px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.kd-index-page .ix-bubbles li { position: absolute; z-index: 3; }
.kd-index-page .ix-bubble button { position: relative; padding: 11px 24px; border: 1px solid rgba(255, 255, 255, 0.85); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: #fff; font-size: var(--kd-fs-body); font-weight: 500; white-space: nowrap; transition: transform 0.2s, background 0.2s; }
.kd-index-page .ix-bubble.is-f button { border-color: transparent; background: #3FC1F7; color: #0A1F55; font-weight: 700; }
.kd-index-page .ix-bubble button::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 9px; margin-left: -6px; background: inherit; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.kd-index-page .ix-bubble.is-o button::after { background: #fff; opacity: 0.85; }
.kd-index-page .ix-bubble button:hover, .kd-index-page .ix-bubble button[aria-expanded="true"] { transform: translateY(-3px); background: #fff; color: var(--kd-navy-700); }
.kd-index-page .ix-bubble button:focus-visible { outline: 3px solid var(--kd-cyan-400); outline-offset: 3px; }
.kd-index-page .ix-bubble.b1 { left: 12%; top: 0; }
.kd-index-page .ix-bubble.b2 { right: 7%; top: 6px; }
.kd-index-page .ix-bubble.b3 { left: 4.5%; top: 95px; }
.kd-index-page .ix-bubble.b4 { left: 3%; top: 248px; }
.kd-index-page .ix-bubble.b5 { left: 8.5%; top: 381px; }
.kd-index-page .ix-bubble.b6 { right: 0; top: 140px; }
.kd-index-page .ix-bubble.b7 { right: 0; top: 290px; }
.kd-index-page .ix-bubble.b8 { right: 14%; top: 406px; }
.kd-index-page .ix-faq-answers { position: absolute; left: 50%; top: 210px; width: min(520px, 90%); transform: translateX(-50%); z-index: 4; }
.kd-index-page .ix-faq-a { padding: 18px 24px; border-radius: 16px; background: #fff; color: var(--kd-text-900); box-shadow: 0 14px 34px rgba(0, 20, 80, 0.4); animation: ix-fade 0.3s ease; }
.kd-index-page .ix-faq-aq { margin-bottom: 8px; font-size: var(--kd-fs-body); font-weight: 700; color: var(--kd-blue-600); }
.kd-index-page .ix-faq-a p:last-child { font-size: var(--kd-fs-small); line-height: 1.65; color: var(--kd-text-700); }

/* ---------- 11 reviews ---------- */
.kd-index-page .ix-review { padding: 52px 0 58px; background: #F8FAFE; }
.kd-index-page .ix-review .container { max-width: 1080px; }
.kd-index-page .ix-review-wrap { position: relative; }
.kd-index-page .ix-review-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 4px 14px; }
.kd-index-page .ix-review-track::-webkit-scrollbar { display: none; }
.kd-index-page .ix-review-card { flex: 0 0 calc((100% - 48px) / 3.5); min-width: 240px; padding: 18px 20px 16px; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(15, 40, 122, 0.07); scroll-snap-align: start; }
.kd-index-page .ix-review-card blockquote { margin: 14px 0 0; font-size: var(--kd-fs-body); font-weight: 700; line-height: 1.55; color: var(--kd-text-900); letter-spacing: -0.03em; }
.kd-index-page .ix-review-src { margin-top: 14px; font-size: 12.5px; color: var(--kd-text-500); }
.kd-index-page .ix-review-who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.kd-index-page .ix-review-who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #E5E9F2; }
.kd-index-page .ix-review-who strong { display: block; font-size: var(--kd-fs-small); font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-review-who small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--kd-blue-600); }
.kd-index-page .ix-review-ctrl { display: flex; justify-content: center; gap: 10px; margin-top: 6px; }

/* ---------- 12 final CTA ---------- */
.kd-index-page .ix-final { position: relative; padding: 70px 0 66px; background: #050B1E url("/menu/course-detail/k_digital/assets/images/index/final_cta_bg.jpg?v=2026111301") center / cover no-repeat; color: #fff; text-align: center; }
.kd-index-page .ix-final-eyebrow { font-size: var(--kd-fs-small); color: #fff; }
.kd-index-page .ix-final-eyebrow span { display: inline-flex; align-items: center; gap: 16px; }
.kd-index-page .ix-final-eyebrow span::before, .kd-index-page .ix-final-eyebrow span::after { content: ""; width: 26px; height: 1px; background: rgba(255, 255, 255, 0.8); }
.kd-index-page .ix-final h2 { margin-top: 22px; font-size: var(--kd-fs-h2); font-weight: 700; line-height: 1.35; letter-spacing: -0.03em; color: #fff; }
.kd-index-page .ix-final-desc { margin-top: 22px; font-size: var(--kd-fs-body); line-height: 1.65; color: rgba(255, 255, 255, 0.88); }
.kd-index-page .ix-final-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 56px; }
.kd-index-page .ix-final-btns .kd-btn { height: 50px; min-width: 184px; }

/* bottom spacing so the sticky CTA never covers the last lines */
.kd-index-page .ix-final { padding-bottom: 90px; }

@media (prefers-reduced-motion: reduce) {
    .kd-index-page * { animation: none !important; transition: none !important; }
}

/* ================= tablet / mobile ================= */
@media (max-width: 1199px) {
    .kd-index-page .ix-hero { min-height: 0; }
    .kd-index-page .ix-hero-inner { flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
    .kd-index-page .ix-hero-text { max-width: none; padding: 40px 0 8px; }
    .kd-index-page .ix-hero-visual { position: relative; width: 100%; height: 280px; }
    .kd-index-page .ix-hero-stage { background-position: center bottom; }
    .kd-index-page .ix-cards { grid-template-columns: repeat(2, 1fr); }
    .kd-index-page .ix-stats { grid-template-columns: repeat(2, 1fr); }
    .kd-index-page .ix-charts { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
    .kd-index-page .ix-results { grid-template-columns: 1fr; max-width: 520px; margin: 12px auto 0; }
    .kd-index-page .ix-credit-cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .kd-index-page .ix-support-btns { grid-template-columns: 1fr; }
    .kd-index-page .ix-review-card { flex-basis: 300px; }
}
@media (max-width: 767px) {
    .kd-index-page .container { padding: 0 16px; }
    .kd-index-page .ix-head { margin-bottom: 28px; }
    .kd-index-page .ix-h2 { font-size: var(--kd-fs-h2); }
    .kd-index-page .ix-h2-md, .kd-index-page .ix-h2-dark, .kd-index-page .ix-h2-light { font-size: var(--kd-fs-title-lg); }
    .kd-index-page .ix-step-img { flex-basis: 90px; min-height: 90px; }
    .kd-index-page .ix-hero-title { font-size: var(--kd-fs-h1); }
    .kd-index-page .ix-hero-band { margin-left: -10px; padding: 0 10px; }
    .kd-index-page .ix-hero-btn { width: 100%; }
    .kd-index-page .ix-hero-visual { height: 220px; }
    .kd-index-page .ix-courses { padding: 30px 0 44px; }
    .kd-index-page .ix-filter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -16px 22px; padding: 2px 16px 8px; scrollbar-width: none; }
    .kd-index-page .ix-filter::-webkit-scrollbar { display: none; }
    .kd-index-page .ix-filter-btn { flex: 0 0 auto; padding: 0 18px; }
    .kd-index-page .ix-cards { grid-template-columns: 1fr; gap: 14px; }
    .kd-index-page .ix-card-thumb { aspect-ratio: 16 / 9; }
    .kd-index-page .ix-finder { flex-direction: column; align-items: stretch; text-align: left; }
    .kd-index-page .ix-finder-btn { justify-content: center; }
    .kd-index-page .ix-benefit { padding: 44px 0 44px; }
    .kd-index-page .ix-stats { gap: 10px; }
    .kd-index-page .ix-stat { padding: 14px 14px 12px; column-gap: 8px; }
    .kd-index-page .ix-stat-v { padding-left: 8px; font-size: var(--kd-fs-h4); }
    .kd-index-page .ix-benefit-card { grid-template-columns: 1fr; }
    .kd-index-page .ix-benefit-photo { min-height: 220px; }
    .kd-index-page .ix-benefit-body { padding: 24px 20px 22px; }
    .kd-index-page .ix-benefit-points { flex-direction: column; align-items: flex-start; gap: 14px; }
    .kd-index-page .ix-benefit-points li + li { margin: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid #DCE3F0; width: 100%; }
    .kd-index-page .ix-rec-list { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
    .kd-index-page .ix-rec-list li:nth-child(odd) { border-left: 0; }
    .kd-index-page .ix-rec-list li:nth-child(5) { grid-column: 1 / -1; border-left: 0; }
    .kd-index-page .ix-rec-title span::before, .kd-index-page .ix-rec-title span::after { width: 18px; }
    .kd-index-page .ix-why { padding: 44px 0 36px; }
    .kd-index-page .ix-tablet { padding: 8px; border-radius: 22px; }
    .kd-index-page .ix-tablet-screen { border-radius: 14px; }
    .kd-index-page .ix-news-top { grid-template-columns: 1fr auto; padding: 14px 14px 0; row-gap: 6px; }
    .kd-index-page .ix-news-logo { grid-column: 1 / -1; grid-row: 1; }
    .kd-index-page .ix-news-logo b { font-size: 22px; }
    .kd-index-page .ix-news-stage { margin: 8px 14px 0; min-height: 0; }
    .kd-index-page .ix-news-item.is-active { grid-template-columns: 1fr; row-gap: 12px; }
    .kd-index-page .ix-news-head { font-size: 19px; }
    .kd-index-page .ix-news-sum { padding: 12px 0 0; border-left: 0; border-top: 1px solid #C9D3E6; }
    .kd-index-page .ix-news-ctrl { flex-direction: column; align-items: flex-start; margin: 12px 14px 0; }
    .kd-index-page .ix-news-nav { flex-wrap: wrap; }
    .kd-index-page .ix-news-tick { padding: 12px 10px 14px; }
    .kd-index-page .ix-tick-list { flex-direction: column; align-items: flex-start; border-radius: 14px; }
    .kd-index-page .ix-tick-list button { flex-wrap: wrap; }
    .kd-index-page .ix-after { padding: 30px 0 44px; }
    .kd-index-page .ix-after-grid { grid-template-columns: 1fr; }
    .kd-index-page .ix-after-text { max-width: 66%; }
    .kd-index-page .ix-insight { padding: 44px 0 50px; }
    .kd-index-page .ix-insight-panel { padding: 12px 10px; }
    .kd-index-page .ix-credit { padding: 44px 0 44px; }
    .kd-index-page .ix-credit-card { min-height: 250px; }
    .kd-index-page .ix-support { grid-template-columns: 1fr; padding: 20px 16px; text-align: left; }
    .kd-index-page .ix-support-icon { width: 64px; height: 64px; margin-bottom: 10px; }
    .kd-index-page .ix-support-text { padding-left: 0; border-left: 0; }
    .kd-index-page .ix-apply { padding: 40px 0 50px; }
    .kd-index-page .ix-apply-panel { padding: 16px 14px; }
    .kd-index-page .ix-apply-top { gap: 10px; }
    .kd-index-page .ix-toggle { width: 100%; margin-left: 0; padding: 12px 0 0; border-left: 0; border-top: 1px solid #EAEEF6; }
    .kd-index-page .ix-toggle button { flex: 1; min-width: 0; }
    .kd-index-page .ix-step-panel { flex-direction: column; align-items: flex-start; padding: 16px; }
    .kd-index-page .ix-step-img { width: 100%; flex-basis: 110px; min-height: 110px; background-position: center; }
    .kd-index-page .ix-call-sub { width: 100%; padding-left: 0; border-left: 0; }
    .kd-index-page .ix-call-tel { width: 100%; margin-left: 0; justify-content: center; }
    .kd-index-page .ix-faq { padding: 36px 0 40px; }
    .kd-index-page .ix-faq-stage { min-height: 0; display: flex; flex-direction: column; }
    .kd-index-page .ix-faq-center { position: static; width: auto; margin: 6px 0 22px; }
    .kd-index-page .ix-bubbles { display: flex; flex-direction: column; align-items: stretch; gap: 10px; position: relative; z-index: 3; }
    .kd-index-page .ix-bubbles li { position: static; }
    .kd-index-page .ix-bubble button { width: 100%; white-space: normal; text-align: left; border-radius: 18px; padding: 13px 18px; }
    .kd-index-page .ix-bubble button::after { display: none; }
    .kd-index-page .ix-faq-answers { position: static; width: auto; margin-top: 14px; transform: none; }
    .kd-index-page .ix-review { padding: 40px 0 44px; }
    .kd-index-page .ix-review-card { flex-basis: 82%; }
    .kd-index-page .ix-final { padding: 52px 0 96px; }
    .kd-index-page .ix-final-btns { margin-top: 36px; flex-direction: column; align-items: stretch; }
}

/* ===== Apply guide: action links, step navigation, card info popover (reference: enterprise page) ===== */
.kd-index-page .ix-apply-whatwrap { position: relative; display: inline-block; margin-left: 6px; }
.kd-index-page .ix-apply-whatwrap .ix-apply-what { margin-left: 0; font-family: inherit; cursor: pointer; }
.kd-index-page .ix-apply-what[aria-expanded="true"] { border-color: var(--kd-blue-600); background: #EAF1FF; }
.kd-index-page .ix-info-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 6; width: 290px; max-width: 80vw; padding: 14px 16px; border: 1px solid #DCE6F8; border-radius: 12px; background: #fff; box-shadow: 0 14px 30px rgba(15, 40, 122, 0.16); text-align: left; }
.kd-index-page .ix-info-pop[hidden] { display: none; }
.kd-index-page .ix-info-pop strong { display: block; font-size: 13px; font-weight: 700; color: var(--kd-text-900); }
.kd-index-page .ix-info-pop p { margin-top: 6px; font-size: 12.5px; line-height: 1.55; color: var(--kd-text-700); }
.kd-index-page .ix-info-pop p.ix-info-note { font-size: 11.5px; color: var(--kd-text-500); }

.kd-index-page .ix-step-text { flex: 1 1 0; min-width: 0; }
.kd-index-page .ix-step-img { flex-basis: 32%; }
.kd-index-page .ix-step-text p[data-ix-stepdesc] { margin-top: 6px; font-size: var(--kd-fs-small); line-height: 1.55; color: var(--kd-text-700); }
.kd-index-page .ix-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kd-index-page .ix-step-action { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 1px solid var(--kd-blue-600); border-radius: 10px; background: var(--kd-blue-600); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: background 0.2s, box-shadow 0.2s; }
.kd-index-page .ix-step-action:hover { background: #0049cc; border-color: #0049cc; box-shadow: 0 6px 14px rgba(0, 92, 254, 0.28); }
.kd-index-page .ix-step-action.is-secondary { border-color: #BFD3F8; background: #fff; color: var(--kd-blue-600); }
.kd-index-page .ix-step-action.is-secondary:hover { background: #F2F7FF; box-shadow: none; }
.kd-index-page .ix-step-action:focus-visible { outline: 3px solid var(--kd-cyan-400); outline-offset: 2px; }
.kd-index-page .ix-step-text p.ix-step-note { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--kd-text-500); }

.kd-index-page .ix-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.kd-index-page .ix-step-nav button { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid #D5DCEA; border-radius: 999px; background: #fff; color: var(--kd-text-900); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.kd-index-page .ix-step-nav button:hover:not(:disabled) { border-color: var(--kd-blue-600); color: var(--kd-blue-600); }
.kd-index-page .ix-step-nav button:disabled { opacity: 0.4; cursor: default; }
.kd-index-page .ix-step-nav .ix-nav-next { margin-left: auto; border-color: var(--kd-blue-600); background: var(--kd-blue-600); color: #fff; }
.kd-index-page .ix-step-nav .ix-nav-next:hover:not(:disabled) { background: #0049cc; border-color: #0049cc; color: #fff; }
.kd-index-page .ix-nav-back::before { content: "\2190"; margin-right: 6px; }
.kd-index-page .ix-nav-next::after { content: "\2192"; margin-left: 6px; }

.kd-index-page .ix-apply-note { max-width: 760px; margin: 16px auto 0; font-size: 12px; line-height: 1.7; color: var(--kd-text-500); text-align: center; }
.kd-index-page .ix-apply-note a { font-weight: 700; color: var(--kd-blue-600); text-decoration: underline; }
.kd-index-page .ix-apply-note a::after { content: "\2197"; margin-left: 3px; }
.kd-index-page .ix-apply-note span { margin-left: 10px; }

@media (max-width: 767px) {
    .kd-index-page .ix-info-pop { left: 0; width: min(290px, 78vw); }
    .kd-index-page .ix-step-actions { flex-direction: column; }
    .kd-index-page .ix-step-action { justify-content: space-between; }
    .kd-index-page .ix-step-img { flex-basis: 110px; }
    .kd-index-page .ix-apply-note span { display: block; margin: 4px 0 0; }
}

/* ===== News viewer: category chip, scrollable summary, headline ticker (reference: enterprise page) ===== */
.kd-index-page .ix-news-view { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kd-index-page .ix-news-cat { padding: 2px 9px; border-radius: 999px; background: #E7EFFF; color: var(--kd-blue-600); font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.5; }
.kd-index-page .ix-news-item.is-updating { animation: ix-fade 0.35s ease; }
.kd-index-page .ix-news-sum { max-height: 168px; overflow-y: auto; scrollbar-width: thin; }
.kd-index-page .ix-news-sum:focus-visible { outline: 3px solid var(--kd-cyan-400); outline-offset: 2px; }
.kd-index-page .ix-news-origin:hover { color: #0049cc; border-bottom-color: #0049cc; }
.kd-index-page .ix-news-origin:focus-visible { outline: 3px solid var(--kd-cyan-400); outline-offset: 3px; }

.kd-index-page .ix-tick-win { overflow: hidden; border-radius: 999px; background: #E9F0FC; }
.kd-index-page .ix-tick-track { display: flex; width: max-content; animation: ix-tick 90s linear infinite; }
.kd-index-page .ix-tick-group { display: flex; flex: none; align-items: center; gap: 30px; padding: 10px 30px 10px 18px; }
.kd-index-page .ix-tick-group button { display: inline-flex; align-items: center; gap: 10px; flex: none; padding: 0; border: 0; background: none; color: var(--kd-text-900); font-family: inherit; font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.kd-index-page .ix-tick-group button em { color: var(--kd-blue-600); font-style: normal; font-weight: 600; }
.kd-index-page .ix-tick-group button small { color: var(--kd-text-500); font-size: 11.5px; }
.kd-index-page .ix-tick-group button small::before { content: "\00B7"; margin-right: 8px; }
.kd-index-page .ix-tick-group button:hover span, .kd-index-page .ix-tick-group button.is-on span { color: var(--kd-blue-600); text-decoration: underline; }
.kd-index-page .ix-tick-group button:focus-visible { outline: 2px solid var(--kd-cyan-400); outline-offset: 3px; border-radius: 4px; }
.kd-index-page .ix-tick-win:hover .ix-tick-track,
.kd-index-page .ix-tick-win:focus-within .ix-tick-track,
.kd-index-page [data-ix-news].is-paused .ix-tick-track { animation-play-state: paused; }
@keyframes ix-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .kd-index-page .ix-tick-track { animation: none; }
    .kd-index-page .ix-tick-win { overflow-x: auto; }
}
@media (max-width: 767px) {
    .kd-index-page .ix-tick-win { border-radius: 14px; }
    .kd-index-page .ix-news-sum { max-height: 150px; }
}

/* ===== TEMPORARILY HIDDEN: ix-benefit ... ix-final (remove this block to show them again) ===== */
.kd-index-page .ix-benefit,
.kd-index-page .ix-recommend,
.kd-index-page .ix-why,
.kd-index-page .ix-after,
.kd-index-page .ix-insight,
.kd-index-page .ix-credit,
.kd-index-page .ix-apply,
.kd-index-page .ix-faq,
.kd-index-page .ix-review,
.kd-index-page .ix-final { display: none; }

/* ===== Responsive refinements (index: hero + course list) ===== */
/* LMS mobile CSS centers images with auto margins, which pushed the NEW mark to the middle of the tag row */
.kd-index-page .ix-new-img { margin: 0; flex: none; }
/* cards: 4 columns from 992px, 2 columns from 480px, 1 column below */
@media (min-width: 992px) and (max-width: 1199px) {
    .kd-index-page .ix-cards { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (min-width: 480px) and (max-width: 767px) {
    .kd-index-page .ix-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .kd-index-page .ix-card-title { font-size: 15px; }
    .kd-index-page .ix-card-desc { font-size: 13px; }
}

/* ===== Hero on tablet / mobile: show the whole product stage ===== */
/* hero_bg.jpg is a 2570x725 banner whose products sit at about 41%-84% of its width. Below 1200px the image is placed
   as a banner at the bottom of the hero, scaled so the whole stage fits the screen, and its top edge fades into the dark hero. */
@media (max-width: 1199px) {
    .kd-index-page .ix-hero::before {
        inset: auto 0 0 0;
        aspect-ratio: 1.96 / 1;
        background-size: 181% auto;
        background-position: 78% bottom;
        -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%);
        mask-image: linear-gradient(180deg, transparent 0, #000 24%);
    }
    .kd-index-page .ix-hero-visual { height: 46vw; }
}
@media (max-width: 767px) {
    .kd-index-page .ix-hero-visual { height: 50vw; }
    .kd-index-page .tabbar-link { font-size: 12px !important; letter-spacing: -0.04em; padding: 0 2px; }
}