/**
 * ai_fact_card.css
 *
 * 상품/서비스 페이지 상단 "한눈에 보기" 섹션 — H-1 시안 (매거진 + 좌측 아이콘).
 *
 * 시맨틱: section.ai-fact > h2.ai-fact__title + dl.ai-fact__list > .ai-fact__item(dt+dd)
 *
 * 2026-05-25 v8 — H-1 적용:
 *   - 상단 영문 eyebrow (OVERVIEW) + 큰 한글 헤드라인 — 매거진 톤
 *   - 각 항목 좌측에 네이비 원형 보더 + line-art SVG 아이콘 (CSS만, nth-child 순환)
 *   - 답변(dd)이 라벨(dt)보다 크고 가독성 우선
 *   - KT 네이비 액센트, 화려하지 않고 절제된 일러스트
 */

/* ── 섹션 컨테이너 ───────────────────────────────────────── */
.ai-fact {
    width: 100%;
    max-width: 1280px;
    margin: 48px auto 56px;
    padding: 0 24px;
    box-sizing: border-box;
}

/* ── 타이틀 — 영문 eyebrow + 한글 헤드라인 ──────────────── */
.ai-fact__title {
    margin: 0 0 28px;
    padding: 0;
    font-size: 11px;
    font-weight: 800;
    color: #003087;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.3;
}
.ai-fact__title::before {
    content: 'OVERVIEW';
    display: block;
    margin-bottom: 6px;
}
.ai-fact__title__sub {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.022em;
    text-transform: none;
    line-height: 1.25;
}

/* ── 리스트 — 2열 그리드 ─────────────────────────────── */
.ai-fact__list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 40px;
    row-gap: 26px;
    counter-reset: ai-fact-counter;
}

/* ── 개별 항목 — 좌측 SVG 아이콘 + 우측 라벨/본문 ──────── */
.ai-fact__item {
    counter-increment: ai-fact-counter;
    padding: 0 0 20px 56px;
    border-bottom: 1px solid #f1f5f9;
    position: relative;
    min-height: 56px;
}

/* ── 좌측 아이콘 컨테이너 (CSS only — pseudo-element + SVG bg) ─── */
.ai-fact__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 40px;
    height: 40px;
    border: 1.5px solid #003087;
    border-radius: 50%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-color: #ffffff;
}

/* SVG 아이콘 6종 — nth-child 순환 매핑 (7번째+ 항목은 1번 재사용) */

/* 1. 글로벌/네트워크 — 종류·카테고리 */
.ai-fact__item:nth-child(6n+1)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/></svg>");
}

/* 2. 빌딩/사무실 — 환경 */
.ai-fact__item:nth-child(6n+2)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V7l9-4 9 4v14'/><path d='M9 21V12h6v9M9 16h6M9 19h6'/></svg>");
}

/* 3. 회로/속도계 — 비교·차이 */
.ai-fact__item:nth-child(6n+3)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='6' width='18' height='12' rx='2'/><path d='M7 10v4M12 9v6M17 11v2'/></svg>");
}

/* 4. 차트/그래프 — 사용 케이스 */
.ai-fact__item:nth-child(6n+4)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l5-5 4 4 8-8'/><path d='M15 8h5v5'/></svg>");
}

/* 5. 시계 — 기간 */
.ai-fact__item:nth-child(6n+5)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></svg>");
}

/* 6. 문서 — 약정·계약 */
.ai-fact__item:nth-child(6n)::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23003087' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><path d='M9 8h6M9 12h6M9 16h4'/></svg>");
}

/* ── 라벨 (dt) — 작은 카테고리 ─────────────────────────── */
.ai-fact__q {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.4;
}
.ai-fact__q::before {
    content: counter(ai-fact-counter, decimal-leading-zero) ' · ';
    color: #003087;
}

/* ── 본문 (dd) — 큰 본문 (가독성 우선) ─────────────────── */
.ai-fact__a {
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: #0f172a;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -0.005em;
    word-break: keep-all;
}
.ai-fact__a strong {
    color: #003087;
    font-weight: 700;
}

/* ════════════════════════════════════════════════
   변형 — ai-fact--table (통신 3사 비교 매트릭스 등)
   기본 ai-fact 는 dl 그리드용 → 표 변형은 table 친화로 풀어줌
   ════════════════════════════════════════════════ */
.ai-fact.ai-fact--table .ai-fact__title::before { content: 'COMPARE'; }

/* table 변형에서는 .ai-fact__list 의 grid 해제 — table 이 자체적으로 폭 차지 */
.ai-fact.ai-fact--table .ai-fact__list {
    display: block;
    overflow-x: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
}

/* 매트릭스 표 — 매거진/저널 톤 */
.ai-fact__matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 680px;
    line-height: 1.55;
}
.ai-fact__matrix thead {
    background: #003087;
    color: #ffffff;
}
.ai-fact__matrix thead th {
    padding: 13px 16px;
    text-align: center;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: -0.005em;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.ai-fact__matrix thead th:last-child { border-right: 0; }
.ai-fact__matrix thead th:first-child {
    text-align: center;
    background: #001a5e;
    width: 30%;
}

.ai-fact__matrix tbody tr {
    border-bottom: 1px solid #f1f5f9;
}
.ai-fact__matrix tbody tr:last-child { border-bottom: 0; }

.ai-fact__matrix tbody th {
    padding: 12px 16px;
    text-align: center;
    font-weight: 700;
    color: #003087;
    background: #f8fafc;
    font-size: 13px;
    letter-spacing: -0.005em;
    border-right: 1px solid #e2e8f0;
    vertical-align: middle;
}
.ai-fact__matrix tbody td {
    padding: 12px 16px;
    text-align: center;
    color: #334155;
    font-size: 13.5px;
    vertical-align: middle;
    border-right: 1px solid #f1f5f9;
}
.ai-fact__matrix tbody td:last-child { border-right: 0; }
.ai-fact__matrix tbody td strong {
    color: #0f172a;
    font-weight: 700;
}

/* KT 컬럼(2번째) 가벼운 강조 — 1위 부각 */
.ai-fact__matrix tbody td:nth-child(2) {
    background: #f0f9ff;
    color: #0f172a;
    font-weight: 500;
}

@media (max-width: 720px) {
    .ai-fact.ai-fact--table .ai-fact__list { font-size: 12.5px; }
    .ai-fact__matrix { font-size: 12.5px; min-width: 560px; }
    .ai-fact__matrix thead th,
    .ai-fact__matrix tbody th,
    .ai-fact__matrix tbody td { padding: 9px 11px; }
}

/* ════════════════════════════════════════════════
   반응형
   ════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .ai-fact {
        margin: 36px auto 40px;
        padding: 0 16px;
    }
    .ai-fact__title { margin-bottom: 22px; }
    .ai-fact__title__sub { font-size: 19px; }
    .ai-fact__list {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 22px;
    }
    .ai-fact__item {
        padding: 0 0 18px 48px;
        min-height: 50px;
    }
    .ai-fact__item::before {
        width: 34px;
        height: 34px;
        background-size: 17px 17px;
    }
    .ai-fact__a { font-size: 14.5px; }
}

/* ── 상품 페이지 1분 영상 (2026-10-13) — includes/case_video.php page_video_block() · 한눈에 보기 바로 아래 ── */
.pvid { width: 100%; max-width: 1280px; margin: -24px auto 48px; padding: 0 24px; box-sizing: border-box; }
.pvid__inner { max-width: 560px; margin: 0 auto; }
.pvid__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 800; color: #003087; letter-spacing: 0.08em; }
.pvid figure.cd-video { margin: 0; }
.pvid .cd-video__player { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; background: #f3f5fb; border: 2px solid #1e2d7c; border-radius: 6px; }
.pvid .cd-video__cap { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #4a5785; text-align: center; }
.pvid .cd-video__more { display: inline-block; margin-left: 8px; font-weight: 700; color: #1e2d7c; text-decoration: none; white-space: nowrap; }
.pvid .cd-video__more:hover { text-decoration: underline; }
@media (max-width: 768px) { .pvid { margin: -16px auto 36px; padding: 0 16px; } }

/* 영상 위 보이는 제목(2026-10-19) — includes/case_video.php case_video_html 의 .cd-video__ttl */
.pvid .cd-video__ttl, .cd-body figure.cd-video .cd-video__ttl { margin: 0 0 10px; font-size: 17px; font-weight: 800; line-height: 1.45; color: #0d1b4c; text-align: left; word-break: keep-all; }
.pvid .cd-video__tag, .cd-body figure.cd-video .cd-video__tag { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: #1e2d7c; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5; vertical-align: 2px; }
@media (max-width: 768px) { .pvid .cd-video__ttl, .cd-body figure.cd-video .cd-video__ttl { font-size: 16px; } }