@charset "utf-8";
/* ============================================================
 * DuoKeeper : AI VOD·교재 추천 소개 (ai-vod-book-recommend-intro) 전용 스타일
 * 경로 : /css/ai_vodbook_intro.css
 * - ai_health_check(.intro_page.aihealth)와 동일한 intro_page 체계 사용.
 * - 섹션 헤더(smallbox/subtit/small)는 sub2.css generic 사용, 본 파일은
 *   sub2 에 없는 전용 컴포넌트(compare/flow/guard/json/grades/results/dual/cta)만 정의.
 * - 원본 그린 액센트 → 사이트 블루(--main-color-1)로 통일.
 * - 이미지는 /images/ai_vodbook_img*.png 플레이스홀더(추후 교체).
 * - 모든 선택자를 .intro_page.vodbook 하위로 스코프해 충돌 방지.
 * ========================================================== */
.intro_page.vodbook{
  --vb-navy2:#1C3A66; --max-width: 1100px;
  --vb-accent:var(--main-color-1); --vb-accent-soft:#E6F3FF; --vb-accent-line:#CFE3FA;
  --vb-soft:#F6F8FC; --vb-line:#E6EBF2; --vb-muted:#9FB2CD; --vb-amber:#C98A17;
  --vb-ink:#16233B;
  --vb-radius:clamp(10px,2.6vw,16px); --vb-radius-sm:clamp(8px,2.08vw,12px);
  --vb-shadow:0 clamp(6px,1.6vw,12px) clamp(16px,3.9vw,30px) rgba(18,41,75,.08);
}

/* 섹션 배경(soft) */
.intro_page.vodbook .cont_list.soft{background:var(--vb-soft);}
/* 강조어(.point_txt): 라이트 섹션은 sub2 전역 .point_txt(--main-color-1) 사용, 다크 섹션만 아래에서 밝게 override */
.intro_page.vodbook .smallbox {font-family: var(--font-style);letter-spacing: 1.92px;font-weight: 700;    width: fit-content;}

.intro_page.vodbook .sub_desc{font-size: var(--font-size-st2);font-weight: 400;line-height: 1.2;color: var(--font-color-2);}
.intro_page.vodbook .tab1bg .sub1box .sub1 .sub_desc{color: #ffffff;padding: 3rem 0;}
.intro_page.vodbook .sub1box .sub1{gap: 1.5rem;}
/* ---------- Hero 이미지 ---------- */
.intro_page.vodbook .item1{
  background: linear-gradient(124.49deg, #2852A0 23.14%, #12294B 55.37%, #16305C 76.86%),
  radial-gradient(46.87% 57.96% at 82% -10%, rgba(16, 165, 120, 0.14) 0%, rgba(16, 165, 120, 0) 60%);

}
.intro_page.vodbook .item1 .sub1box{grid-template-columns: repeat(1, 1fr);}
.intro_page.vodbook .item1:after{
  background: url(/images/ai_vodbook_img1.png) no-repeat center / contain;
  right: max(3.9rem, calc(50vw - 65rem));
  top: 50%;
  transform: translateY(-50%);
  width: clamp(218px, 55.59vw, 427px);
  height: clamp(148px, 37.23vw, 296px);
}
.intro_page.vodbook .item1 h2.bigsize{font-weight: 400}
.intro_page.vodbook .item1 .subtit span{font-size: clamp(20px, 6.22vw, 52px);}
.intro_page.vodbook .item1 .subtit span.point_txt{font-size: inherit;}
.intro_page.vodbook .hero-note{margin-top:clamp(14px,3vw,26px);font-size:var(--font-size-desc);color:var(--vb-muted);
  display:flex;align-items:center;gap:8px;font-weight:400;}
.intro_page.vodbook .hero-note .dot{width:7px;height:7px;border-radius:50%;background:var(--vb-accent);
  box-shadow:0 0 0 4px rgba(47,127,212,.2);flex:none;}
.intro_page.vodbook .item1 .btn-o{background: #ffffff;color: var(--font-color-2);font-size: var(--font-size-desc);font-weight: 400;}
.intro_page.vodbook .item1 .btn-o b{font-size: var(--font-size-st2);font-weight: 600;}
.intro_page.vodbook .item1 .sub1{width: auto;}
/* ---------- 버튼 (btnlist .btn-p/.btn-o 재사용, base 보완) ---------- */
.intro_page.vodbook .btnlist .btn-p{background:var(--vb-accent);color:#fff;border:1px solid var(--vb-accent);
  box-shadow:0 clamp(6px,1.5vw,12px) clamp(14px,3vw,26px) rgba(47,127,212,.28);}
.intro_page.vodbook .btnlist .btn-p:hover{background:#1a6abf;border-color:#1a6abf;}

/* ---------- CONCEPT : 사전등록 vs 실시간 비교 ---------- */
.intro_page.vodbook .compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(28px,5vw,44px);text-align:left;width: 100%;padding: 0 2.4rem;}
.intro_page.vodbook .ccard{border-radius:var(--vb-radius);padding:clamp(18px,4vw,28px);border:1px solid var(--vb-line);background:#fff;    }
.intro_page.vodbook .ccard.bad{background:#FBFBFC;}
.intro_page.vodbook .ccard.good{border-color: #C7EEDE;background: linear-gradient(180deg, #FFFFFF 0%, #F4FCF8 100%);}
.intro_page.vodbook .ctag{font-size:var(--font-size-base);font-weight:700;padding:5px 11px;border-radius:999px;display:inline-block;margin-bottom:16px;}
.intro_page.vodbook .ccard.bad .ctag{background:#F1F4F8;color:#7A879A;}
.intro_page.vodbook .ccard.good .ctag{background:#EAFAF3;color:#10A578;}
.intro_page.vodbook .cctitle{font-size:var(--font-size-st1);font-weight:700;color:var(--font-color-2);margin-bottom:16px;font-family:var(--font-style2);}
.intro_page.vodbook .clist{list-style:none;display:flex;flex-direction:column;gap:12px;padding:0;margin:0;}
.intro_page.vodbook .clist li{display:flex;gap:10px;font-size:var(--font-size-desc);color:var(--font-color-2);align-items:flex-start;font-weight:400;}
.intro_page.vodbook .clist li .mk{flex:0 0 clamp(15px,3.6vw,20px);height:clamp(15px,3.6vw,20px);border-radius:6px;display:grid;place-items:center;font-size:var(--font-size-sm);font-weight:800;margin-top:2px;}
.intro_page.vodbook .ccard.bad .mk{background:#EEF1F5;color:#94A1B3;}
.intro_page.vodbook .ccard.good .mk{background:#10A578;color:#fff;}

/* ---------- HOW IT WORKS : 번호 플로우 ---------- */
.intro_page.vodbook .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:clamp(28px,5vw,44px);text-align:left;    max-width: 1032px;}
.intro_page.vodbook .flow .step{border:1px solid var(--vb-line);border-radius:var(--vb-radius);padding:clamp(16px,4vw,22px) clamp(14px,3.5vw,20px);
  background:#fff;position:relative;transition:transform .18s ease,box-shadow .18s ease;}
.intro_page.vodbook .flow .step:last-child{border-color: var(--vb-accent);background: var(--vb-accent-soft);}
.intro_page.vodbook .flow .step:hover{transform:translateY(-3px);box-shadow:var(--vb-shadow);}
.intro_page.vodbook .flow .step .no{font-size: var(--font-size-desc);
  font-weight: 700;color: var(--vb-accent);letter-spacing: 1.19px;
  display: inline-flex;align-items: center;justify-content: center;
  width: clamp(39px, 7.16vw, 55px);height: clamp(28px, 4.42vw, 34px);
  border-radius: 999px;background: var(--vb-accent-soft);margin-bottom: 14px;}
.intro_page.vodbook .flow .step h4{font-size:var(--font-size-st2);font-weight:700;color:var(--font-color-2);font-family:var(--font-style2);}
.intro_page.vodbook .flow .step p{font-size:var(--font-size-base);color:var(--font-color-1);margin-top:6px;font-weight:400;    white-space: pre-line;}
.intro_page.vodbook .flow-note{margin-top:clamp(18px,4vw,28px);padding:clamp(14px,3vw,18px) clamp(16px,4vw,22px);border-radius:var(--vb-radius);    max-width: 1032px;    width: 100%;
  background:#12294B;color:#FFFFFF;font-size:var(--font-size-desc);display:flex;gap:clamp(6px, 1.56vw, 12px);align-items:center;text-align:left;font-weight:400;}
.intro_page.vodbook .flow-note b{color:#FAE07A;font-weight:700;}
.intro_page.vodbook .flow-note .ic{flex:0 0 22px;color:#C1E1FF;}

/* ---------- ONLY DUOKEEPER : 가드레일 + JSON ---------- */
.intro_page.vodbook .guard{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,44px);align-items:start;text-align:left;}
.intro_page.vodbook .guard-points{display:flex;flex-direction:column;gap:14px;margin-top:16px;max-width: 518px;width: 100%;}
.intro_page.vodbook .gp{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--vb-line);border-radius:var(--vb-radius-sm);padding:clamp(13px,3vw,18px);        }
.intro_page.vodbook .gp > div{display: flex;flex-direction: column;align-items: flex-start;}
.intro_page.vodbook .gp .gi{flex:0 0 clamp(34px,5.2vw,40px);height:clamp(34px,5.2vw,40px);border-radius:11px;background-color:var(--vb-accent-soft);color:var(--vb-accent);
  display:grid;place-items:center;font-size:18px;background-repeat:no-repeat;background-position:center;background-size:80%;}
/* 가드 아이콘 이미지 플레이스홀더(추후 교체) */
.intro_page.vodbook .guard-points .gp:nth-child(1) .gi{background-image:url('/images/ai_vodbook_img3-1.png');}
.intro_page.vodbook .guard-points .gp:nth-child(2) .gi{background-image:url('/images/ai_vodbook_img3-2.png');}
.intro_page.vodbook .guard-points .gp:nth-child(3) .gi{background-image:url('/images/ai_vodbook_img3-3.png');}
.intro_page.vodbook .gp b{display:block;color:var(--font-color-2);font-size:var(--font-size-st2);font-weight:700;margin-bottom:2px;line-height: 1}
.intro_page.vodbook .gp span{font-size:var(--font-size-base);color:var(--font-color-1);line-height: 1.4}
.intro_page.vodbook .json{background:#0E2247;border-radius:var(--vb-radius);padding:clamp(12px,4vw,24px) clamp(15px,5.2vw,30px);color:#CBD8EC;
  font-family:Menlo;font-size:clamp(11px,2.6vw,13px);line-height:1.9;font-weight: 400;letter-spacing: -0.16px;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 50px rgba(14,34,71,.25);overflow-x:auto;}
.intro_page.vodbook .json span{padding-right: 5px;}
.intro_page.vodbook .json .k{padding-left: 5px;}
.intro_page.vodbook .json .k{color:#7FB3FF;} .intro_page.vodbook .json .s{color:#4FDDAB;}
.intro_page.vodbook .json .n{color:#F0A868;} .intro_page.vodbook .json .c{color:#5B7297;font-style:italic;}
.intro_page.vodbook .json-cap{font-size:var(--font-size-base);color:#64748B;margin-top:12px;text-align:center;font-weight: 400}
.intro_page.vodbook .json .json_txt{max-width: 413px;}
/* ---------- TRUST : 신뢰도 등급 ---------- */
.intro_page.vodbook .grades{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(24px,5vw,40px);width: 100%;max-width: 1032px;}
.intro_page.vodbook .grade{border:1px solid var(--vb-line);border-radius:var(--vb-radius);padding:clamp(16px,4vw,22px);background:#fff;text-align:center;}
.intro_page.vodbook .grade .badge{width:clamp(40px,10vw,46px);height:clamp(40px,10vw,46px);border-radius:13px;display:grid;place-items:center;
  font-size:var(--font-size-desc);font-weight:800;margin:0 auto 14px;font-family:var(--font-style2);}
.intro_page.vodbook .g-a .badge{background:var(--vb-accent);color:#fff;}
.intro_page.vodbook .g-b .badge{background:#C1E1FF;color:#0C1F33;}
.intro_page.vodbook .g-c .badge{background:#FDF1DC;color:var(--vb-amber);}
.intro_page.vodbook .g-x .badge{background:#F1F4F8;color:#9AA6B6;}
.intro_page.vodbook .grade h4{font-family: var(--font-style2);font-size:var(--font-size-st2);color:var(--font-color-2);font-weight:700;}
.intro_page.vodbook .grade p{font-size: var(--font-size-base);color: var(--font-color-1);font-weight: 400;margin-top:6px;white-space: pre-line;}
.intro_page.vodbook .split-note{margin-top:clamp(24px,5vw,36px);text-align:center;font-size:var(--font-size-desc);color:var(--font-color-1);font-weight:400;}
.intro_page.vodbook .split-note b{color:var(--font-color-2);font-weight:700;}

/* ---------- RESULT : 추천 카드 미리보기 ---------- */
.sub_content .cont_body.intro_page.vodbook  .cont_list.item6 h2{font-weight: 400;}
.intro_page.vodbook .results{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(28px,5vw,44px);text-align:left;}
.intro_page.vodbook .rgroup h3{font-size:var(--font-size-st1);font-weight:700;color:#12294B;margin-bottom:16px;display:flex;align-items:center;gap:8px;font-family:var(--font-style2);}
.intro_page.vodbook .rgroup h3 .pill{font-size:var(--font-size-desc);font-weight:700;color:#ffffff;background:var(--vb-accent);padding:6px 15px;border-radius:999px;line-height: 1;letter-spacing: 1.92px}
.intro_page.vodbook .rcard{border:1px solid var(--vb-line);border-radius:var(--vb-radius);padding:clamp(16px,4vw,20px);background:#fff;box-shadow:var(--vb-shadow);}
.intro_page.vodbook .rcard .rhead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;}
.intro_page.vodbook .rrank{font-size:var(--font-size-desc);font-weight:800;color:#12294B;background:#EEF2F8;padding:4px 10px;border-radius:999px;}
.intro_page.vodbook .rtags{display:flex;gap:6px;}
.intro_page.vodbook .rt{font-size:var(--font-size-desc);font-weight:700;padding:4px 20px;border-radius:999px;}
.intro_page.vodbook .rt.free{background:#EEF2F8;color:#5A6B82;}
.intro_page.vodbook .rt.paid{background:#FDF1DC;color:var(--vb-amber);}
.intro_page.vodbook .rt.fit{background:var(--vb-accent-soft);color:var(--vb-accent);}
.intro_page.vodbook .rt.gr{background:#12294B;color:#fff;}
.intro_page.vodbook .rcard h5{font-size:var(--font-size-st2);font-weight:700;color:var(--font-color-2);font-family:var(--font-style2);padding-top: 12px;}
.intro_page.vodbook .rmeta{font-size:var(--font-size-base);color:var(--font-color-1);margin:4px 0 12px;}
.intro_page.vodbook .rbar{height:7px;border-radius:999px;background:#EEF2F8;overflow:hidden;margin-bottom:6px;}
.intro_page.vodbook .rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--vb-accent),#5FA8E8);border-radius:999px;}
.intro_page.vodbook .rbar i.w91{width:91%;}
.intro_page.vodbook .rbar i.w89{width:89%;}
.intro_page.vodbook .rbar-lbl{display:flex;justify-content:space-between;font-size:var(--font-size-base);color:var(--font-color-1);margin:12px 0;font-weight: 400;}
.intro_page.vodbook .rwhy{font-size:var(--font-size-desc);color:#3D4A5E;line-height:1.55;padding: 8px 0 7px;font-weight: 400}
.intro_page.vodbook .rcaution{margin-top:10px;font-size:var(--font-size-base);color:var(--vb-amber);background:#FDF6E9;border-radius:10px;padding:8px 11px;font-weight: 600;}
.intro_page.vodbook .rlink{margin-top:20px;display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-desc);font-weight:800;color:var(--vb-accent);}
.intro_page.vodbook .rdate{font-size:var(--font-size-sm);color:#9AA6B6;margin-top:19px;font-weight: 400;}

/* ---------- 2:1 DUAL CARE ---------- */
.intro_page.vodbook .dual{
  background: #12294B;color: #fff;border-radius: clamp(16px, 4vw, 24px);padding: clamp(34px, 8vw, 56px) clamp(22px, 6vw, 48px);
  text-align: center;display: flex;flex-direction: column;align-items: center;gap: 2rem;width: 100%;
}
.sub_content .cont_body.intro_page.vodbook .cont_list h2{font-weight: 400 !important;    letter-spacing: -1.68px;}
.intro_page.vodbook .dual .point_txt{color:#FAE27A;}
.intro_page.vodbook .dual .roles{display:flex;align-items:center;justify-content:center;gap:20px;}
.intro_page.vodbook .dual .role{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:clamp(16px,4vw,22px) clamp(20px,5vw,30px);}
.intro_page.vodbook .dual .role b{display:block;font-size:var(--font-size-st1);font-weight:800;color:#fff;font-family:var(--font-style2);}
.intro_page.vodbook .dual .role p{font-size:var(--font-size-base);color:#B9C8DE;font-weight: 400}
.intro_page.vodbook .dual .role span{width:clamp(44px,11vw,64px);height:clamp(44px,11vw,64px);display: block;margin: 0 auto 11px;}
.intro_page.vodbook .dual .role span svg{width: 100%;height: 100%;}
.intro_page.vodbook .dual .plus{font-size:clamp(18px,4.6vw,26px);color:#FAE27A;font-weight:300;}
.intro_page.vodbook .dual .tagline{margin-top:20px;font-size:var(--font-size-desc);color:#C6D3E6;font-weight: 400}
.intro_page.vodbook .dual .tagline b{color:#fff;}

/* ---------- Final CTA ---------- */
.intro_page.vodbook .final-cta{text-align:center; gap: 0}
.intro_page.vodbook .final-cta .btnlist{padding-top: 3rem}

/* ---------- reveal ---------- */
.intro_page.vodbook .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.intro_page.vodbook .reveal.in{opacity:1;transform:none;}


.intro_page.vodbook  .item4 .guard > div:last-child {margin: auto;}
/* ---------- 반응형 ---------- */
@media (max-width:768px){
  .intro_page.vodbook .compare{grid-template-columns:1fr;}
  .intro_page.vodbook .flow{grid-template-columns:1fr 1fr;}
  .intro_page.vodbook .guard{grid-template-columns:1fr;gap:clamp(24px,6vw,32px);}
  .intro_page.vodbook .grades{grid-template-columns:1fr 1fr; max-width: 494px;}
  .intro_page.vodbook .results{grid-template-columns:1fr;}
  .intro_page.vodbook .dual .role{min-width:0;width:100%;}
  .sub_content .cont_body.intro_page.vodbook .cont_list h2,
  .intro_page.vodbook .sub_desc{
    text-align: center;
  }
  .intro_page.vodbook .guard-points{margin-top: 3rem;        max-width: 580px;}
  .intro_page.vodbook .sub1box .sub1{align-items: center;}
  .intro_page.vodbook .item1 .sub1box .sub1 { align-items: flex-start; }
  .sub_content .cont_body.intro_page.vodbook .cont_list.item1 h2,.intro_page.vodbook .item1 .sub_desc{text-align: left;max-width: none}
  .intro_page.vodbook .item1{padding-bottom: clamp(148px, 37.23vw, 296px);overflow: hidden;}
  .intro_page.vodbook .item1:after{top: 87%;right: 0;left: auto;}
  .intro_page.vodbook .item6 .sub_desc{max-width: 534px;}
  .intro_page.vodbook .dual .roles {flex-direction: column;gap: 0}
}
@media (max-width:520px){
  .intro_page.vodbook .flow{grid-template-columns:1fr;}
  .intro_page.vodbook .grades{grid-template-columns:1fr;}
  .intro_page.vodbook .dual{padding: 20px 15px;}
}
@media (prefers-reduced-motion:reduce){
  .intro_page.vodbook .reveal{opacity:1;transform:none;transition:none;}
}