/* ── 소개 페이지 전용 스타일 (여백·둥근 형태 중심) ── */
.ka { --ka-ink: #111; --ka-accent: #F96400; --ka-soft: #F5F5F2; --ka-line: rgba(17,17,17,.12); color: var(--ka-ink); }
.ka section { position: relative; }
.ka-eyebrow {
   display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; padding: 6px 14px; border-radius: 999px;
   background: rgba(249,100,0,.1); color: var(--ka-accent); font-size: 13px; font-weight: 700; letter-spacing: .5px;
}
.ka-h2 { margin: 0 0 16px; font-family: var(--title-font); font-size: 36px; font-weight: 700; line-height: 1.3; letter-spacing: -1px; color: var(--ka-ink); }
.ka-lead { margin: 0; font-size: 17px; line-height: 1.85; color: #555; }
.ka-btn {
   display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 999px;
   background: var(--ka-ink); color: #fff; font-size: 15px; font-weight: 700; transition: background .2s, transform .2s;
}
.ka-btn:hover { background: var(--ka-accent); color: #fff; transform: translateY(-2px); }
.ka-btn-ghost { background: transparent; color: var(--ka-ink); box-shadow: inset 0 0 0 1.5px rgba(17,17,17,.25); }
.ka-btn-ghost:hover { background: transparent; color: var(--ka-accent); box-shadow: inset 0 0 0 1.5px var(--ka-accent); }

/* 1. 인트로 */
.ka-intro { padding: 88px 0 72px; overflow: hidden; }
.ka-intro::after {
   content: ""; position: absolute; right: -200px; top: -180px; width: 580px; height: 580px; border-radius: 50%;
   background: radial-gradient(circle, rgba(249,100,0,.13) 0%, rgba(249,100,0,0) 68%); pointer-events: none;
}
.ka-intro .container { position: relative; z-index: 1; }
.ka-intro h1 { margin: 0 0 20px; font-family: var(--title-font); font-size: 54px; font-weight: 700; line-height: 1.18; letter-spacing: -2px; color: var(--ka-ink); }
.ka-intro h1 span { color: var(--ka-accent); }
.ka-intro .ka-lead { max-width: 680px; }

/* 2. 본문 2열 */
.ka-story { padding: 0 0 88px; }
.ka-story-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.ka-story p + p { margin-top: 18px; }

/* 3. 핵심 3가지 */
.ka-points { padding: 80px 0; background: var(--ka-soft); border-radius: 48px; }
.ka-point-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; }
.ka-point-icon {
   display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 50%;
   background: #fff; color: var(--ka-accent); font-size: 19px;
}
.ka-point h3 { margin: 0 0 10px; font-family: var(--title-font); font-size: 20px; font-weight: 700; color: var(--ka-ink); }
.ka-point p { margin: 0; font-size: 15px; line-height: 1.8; color: #555; }

/* 4. 지표 */
.ka-metrics { padding: 96px 0 80px; }
.ka-metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
.ka-metric { padding-top: 22px; border-top: 2px solid var(--ka-ink); }
.ka-metric strong { display: block; font-family: var(--title-font); font-size: 52px; font-weight: 800; line-height: 1.15; letter-spacing: -2px; color: var(--ka-ink); }
.ka-metric strong em { font-size: 18px; font-style: normal; font-weight: 400; letter-spacing: -.3px; color: var(--ka-ink); }
.ka-metric span { display: block; margin-top: 10px; font-size: 15px; line-height: 1.7; color: #555; }
.ka-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 48px 0 0; padding: 0; list-style: none; }
.ka-tags li {
   padding: 10px 18px; border-radius: 999px; border: 1px solid var(--ka-line);
   font-size: 14px; font-weight: 600; color: #444;
}

/* 5. 제품 두 가지 */
.ka-products { padding: 0 0 96px; }
.ka-product {
   display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap;
   padding: 34px 0; border-top: 1px solid var(--ka-line); transition: padding-left .2s;
}
.ka-product:last-of-type { border-bottom: 1px solid var(--ka-line); }
.ka-product:hover { padding-left: 8px; }
.ka-product-name { display: flex; align-items: center; gap: 16px; }
.ka-product-name i { color: var(--ka-accent); font-size: 18px; }
.ka-product h3 { margin: 0; font-family: var(--title-font); font-size: 24px; font-weight: 700; color: var(--ka-ink); }
.ka-product p { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.75; color: #555; }
.ka-product-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ka-ink); white-space: nowrap; }
.ka-product-link:hover { color: var(--ka-accent); }
.ka-product-link i { transition: transform .2s; }
.ka-product:hover .ka-product-link i { transform: translateX(4px); }

/* 6. 회사 + 문의 */
.ka-company { padding: 88px 0; background: var(--ka-ink); color: rgba(255,255,255,.72); border-radius: 48px 48px 0 0; }
.ka-company .ka-h2 { color: #fff; }
.ka-company .ka-lead { color: rgba(255,255,255,.7); }
.ka-company-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; align-items: start; }
.ka-company dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px 20px; margin: 0; font-size: 15px; }
.ka-company dt { color: rgba(255,255,255,.5); font-weight: 500; }
.ka-company dd { margin: 0; color: #fff; font-weight: 600; line-height: 1.6; }
.ka-company dd a { color: inherit; }
.ka-company dd a:hover { color: var(--ka-accent); }
.ka-company .ka-btn { margin-top: 32px; background: var(--ka-accent); }
.ka-company .ka-btn:hover { background: #fff; color: var(--ka-ink); }

@media (max-width: 991px) {
   .ka-intro { padding: 56px 0 48px; }
   .ka-intro h1 { font-size: 36px; letter-spacing: -1px; }
   .ka-h2 { font-size: 28px; }
   .ka-story { padding-bottom: 64px; }
   .ka-story-grid, .ka-company-grid { grid-template-columns: 1fr; gap: 28px; }
   .ka-points { padding: 56px 0; border-radius: 28px; }
   .ka-point-grid, .ka-metric-grid { grid-template-columns: 1fr; gap: 32px; }
   .ka-metrics { padding: 64px 0 56px; }
   .ka-metric strong { font-size: 42px; }
   .ka-products { padding-bottom: 64px; }
   .ka-product { align-items: flex-start; }
   .ka-company { padding: 64px 0; border-radius: 28px 28px 0 0; }
}