@charset "utf-8";
/* ============================================================
 * DuoKeeper : AI 학습프로파일 소개 (ai_profile_info) 전용 스타일
 * 경로 : /css/ai_profile_info.css
 * - ai_health_check(.intro_page.aihealth)와 동일한 intro_page 체계를 사용한다.
 * - 구조/타이포는 sub2.css 의 generic .intro_page 클래스를 그대로 상속하고,
 *   .aihealth 전용이라 상속되지 않는 부분(섹션 배경·아이콘·카드·이미지·
 *   리포트·성장칩·CTA·기본버튼)만 .intro_page.profile 스코프로 정의한다.
 * - 아이콘은 /images/profile_img{item}-{n}.png 를 .img-item 배경으로 사용.
 * - 모든 선택자를 .intro_page.profile 하위로 스코프해 사이트 CSS 와 충돌 방지.
 * ========================================================== */
.intro_page.profile{
  --pf-navy:#12294B; --pf-navy2:#1B3A66;
  --pf-accent:var(--main-color-1);            /* #2F7FD4 (layout.css) */
  --pf-accent-soft:#EAF2FE;
  --pf-soft:#F8FAFC; --pf-line:#E7ECF3; --pf-muted:#8592A6; --max-width: 1080px;
  --pf-shadow:0 clamp(6px,1.6vw,12px) clamp(16px,3.9vw,30px) rgba(18,41,75,.08);
}
.intro_page.profile .smallbox{font-weight: 800;letter-spacing: 1.56px;font-size: clamp(11px, 0.18vw + 10.4px, 13px);line-height: 1.6;}
.intro_page.profile .cont_list h2{font-weight: 500;}
.intro_page.profile .cont_list h2 strong{font-weight: 900;}
.intro_page.profile .sub1box .sub1 small { color: #586471;font-weight: 500;}
.intro_page.profile .item1{
  background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FE 100%);
  padding-top: clamp(50px, 4.46vw + 35.7px, 100px);
  padding-bottom: clamp(100px, 8.93vw + 71.4px, 200px);
}
.intro_page .item1 .sub1box small.pttxt .point_txt{color: var(--main-color-6);padding-right: clamp(6px, 2.08vw, 16px);font-weight: 700;}
/* 섹션 배경 (aihealth item3/item6 의 #F8FAFC 대체) */
.intro_page.profile .cont_list.soft{background:var(--pf-soft);}

/* 기본(primary) 버튼 — generic 에 .btn-p base 가 없어 보완 */
.intro_page.profile .btnlist .btn-p,
.intro_page.profile .item7 button{background:var(--pf-accent);color:#fff;border:1px solid var(--pf-accent);
  box-shadow:0 clamp(6px,1.5vw,12px) clamp(14px,3vw,26px) rgba(47,127,212,.28);font-weight: 600;}
.intro_page.profile .btnlist .btn-p:hover{background:#1a6abf;border-color:#1a6abf;}

/* ---------- Hero · AI 학습 ID 카드(.pf-idcard) + 하단 이미지(:after) ---------- */
/* .sub2 = 세로 스택: [idcard] → ::after(profile_img1.png). ::after 는 flex 마지막 아이템이라 카드 밑에 위치 */
.intro_page.profile .item1 .sub2{display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(16px,4vw,28px);width:100%;max-width:486px;margin:0 auto;}
.intro_page.profile .item1:after{
  background:url('/images/profile_img1.png') no-repeat center/contain;
  right: max(3.9rem, calc(50vw - 59rem));
}
.intro_page.profile .pf-idcard{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--pf-navy) 0%,var(--pf-navy2) 100%);
  border-radius:clamp(14px,3.6vw,22px);padding:clamp(14px,4.68vw,28px);color:#fff;
  box-shadow:0 clamp(12px,3vw,24px) clamp(30px,7.8vw,60px) rgba(18,41,75,.24);}
/* 배경 광채 (기존 ::after → ::before 로 이동, 이미지 자리 확보) */
.intro_page.profile .pf-idcard::before{content:"";position:absolute;right:-60px;top:-60px;width:180px;height:180px;
  border-radius:50%;background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(16, 165, 120, 0.35) 0%, rgba(16, 165, 120, 0) 70%);}
.intro_page.profile .pf-idcard .idtop{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1;}
.intro_page.profile .pf-idcard .idlabel{font-size:var(--font-size-desc);font-weight:700;color:#B9C6DC;letter-spacing:.04em;}
.intro_page.profile .pf-idcard .ring{width:clamp(46px,12vw,56px);height:clamp(46px,12vw,56px);border-radius:50%;
  background:var(--pf-navy);display:grid;place-items:center;position:relative;}
.intro_page.profile .pf-idcard .ring b{position:relative;z-index:1;font-size:var(--font-size-desc);font-weight:800;font-family:var(--font-style2);}
.intro_page.profile .pf-idcard h3{color:#fff;font-size:var(--font-size-h3);margin:clamp(8px,3vw,16px) 0 clamp(8px,3vw,16px);
  position:relative;z-index:1;font-family:var(--font-style2);font-weight:800;}
.intro_page.profile .pf-idcard .level,.intro_page.profile .pf-report .rhead .lv
{display:inline-flex;align-items:center;gap:8px;background: #10A5782E;
  color:#8FE9CB;border: 1px solid #10A57866;padding:4px 12px;border-radius:999px;
  font-size:var(--font-size-base);font-weight:800;position:relative;z-index:1;}
.intro_page.profile .pf-idcard .idrows{margin-top:clamp(12px,3vw,18px);position:relative;z-index:1;}
.intro_page.profile .pf-idcard .idrow{display:flex;justify-content:space-between;padding:clamp(8px,1.9vw,11px) 0;
  border-top:1px solid rgba(255,255,255,.1);font-size:var(--font-size-base);}
.intro_page.profile .pf-idcard .idrow span{color:#AEBCD4;font-weight:600;}
.intro_page.profile .pf-idcard .idrow b{color:#fff;font-weight:700;}
.intro_page.profile .pf-idcard .idrow b.g{color:#54E0B4;}
.intro_page.profile .pf-idcard .idnote{margin-top:clamp(12px,3vw,16px);background:rgba(255,255,255,.08);
  border-radius:12px;padding:clamp(9px,2.2vw,11px) 14px;font-size:var(--font-size-base);color:#CDD8EA;position:relative;z-index:1;line-height:1.5;}
.intro_page.profile .pf-idcard .idnote b{color:#fff;}

/* ---------- 아이콘 (.img-item + profile_imgN 배경) ---------- */
.intro_page.profile .point_box > li .img-item{width:clamp(44px,11vw,64px);height:clamp(44px,11vw,64px);
  display:block;position:relative;flex:none;}
.intro_page.profile .point_box > li .img-item:before{content:'';position:absolute;inset:0;
  background-repeat:no-repeat;background-position:center;background-size:contain;}
/* WHY (item2 · tab4) */
.intro_page.profile .item2 .point_box > li:nth-child(1) .img-item:before{background-image:url('/images/profile_img2-1.png');}
.intro_page.profile .item2 .point_box > li:nth-child(2) .img-item:before{background-image:url('/images/profile_img2-2.png');}
.intro_page.profile .item2 .point_box > li:nth-child(3) .img-item:before{background-image:url('/images/profile_img2-3.png');}
.intro_page.profile .item2 .point_box > li:nth-child(4) .img-item:before{background-image:url('/images/profile_img2-4.png');}
/* GROWTH (item6 · tab3) */
.intro_page.profile .item6 .point_box > li:nth-child(1) .img-item:before{background-image:url('/images/profile_img6-1.png');}
.intro_page.profile .item6 .point_box > li:nth-child(2) .img-item:before{background-image:url('/images/profile_img6-2.png');}
.intro_page.profile .item6 .point_box > li:nth-child(3) .img-item:before{background-image:url('/images/profile_img6-3.png');}
.sub_content .cont_body.intro_page.profile .cont_list.item6 h2,
.sub_content .cont_body.intro_page.profile .cont_list.item7 h2{font-weight: 400;}
.sub_content .cont_body.intro_page.profile .cont_list.item6 small{text-align: left;}
/* ---------- WHY / GROWTH 카 ---------- */
.intro_page .point_box.tab4 > li {
  box-shadow: 0px clamp(5px, 0.77vw, 10px) clamp(15px,3.9vw,30px) 0px #12294B14;
}
/* ---------- WHAT · 7단계 카드 (point_box tab4) ---------- */
.intro_page.profile .pf-num{font-size:var(--font-size-base);font-weight:800;color:var(--pf-accent);letter-spacing:.05em;font-family: var(--font-style2);}
.intro_page.profile .point_box.tab4 > li{box-shadow: none;padding: clamp(11px, 0.89vw + 8.1px, 21px) clamp(11px, 0.98vw + 7.9px, 22px)}
.intro_page.profile .point_box.tab4 > li strong{font-family: var(--font-style2);font-weight: 800;letter-spacing: 0.32px;padding-top: 2px;}
.intro_page.profile .point_box.tab4 > li.result{background:var(--pf-accent-soft);border-color:transparent;}
.intro_page.profile .point_box.tab4 > li.result .pf-num{color:var(--pf-navy);}
.intro_page.profile .point_box.tab4 > li.result small{color:var(--pf-accent);font-weight:700;}
.intro_page.profile .point_box.tab4 > li small{color: #8592A6;font-weight: 400;padding-top: 0;}
/* ---------- PROCESS · kpi_list tab5 accent + 진행 애니메이션 ---------- */
.intro_page.profile .kpi_list.tab5{gap: clamp(8px, 1vw + 4px, 16px);}
.intro_page.profile .kpi_list.tab5 li .circle_num{width: clamp(18px, 1.61vw + 12.9px, 36px);padding-top: clamp(18px, 1.61vw + 12.9px, 36px);background:var(--pf-accent);}
.intro_page.profile .kpi_list.tab5 li:before{background: url("/images/profile_img4.png") no-repeat center / contain; width: clamp(8px, 1vw + 4px, 16px);height: clamp(8px, 1vw + 4px, 16px);left: 100%;top: 50%;transform: translateY(-50%);}
.intro_page.profile .kpi_list.tab5 li:last-child:before{display: none;}
.intro_page.profile .kpi_list.tab5 li .circle_num span{color:#fff;font-size: var(--font-size-desc);font-weight: 800}
.intro_page.profile .kpi_list.tab5 li strong{font-size: var(--font-size-st2);font-weight: 800;font-family: var(--font-style2);}
.intro_page.profile .kpi_list.tab5 li small{font-size: var(--font-size-base);font-weight: 400;}
.intro_page.profile .kpi_list.tab5 li{border: 1px solid #E7ECF3;background: #ffffff;border-radius: var(--border-radius);padding: clamp(11px, 0.98vw + 7.9px, 22px) clamp(9px, 0.71vw + 8.7px, 18px);gap: 5px;}
.intro_page.profile .pf-proc{width: 100%;max-width:560px;margin:clamp(24px,6vw,38px) auto 0;background:#fff;
  border:1px solid var(--pf-line);border-radius:clamp(12px,2.6vw,16px);padding:clamp(16px,4vw,24px);box-shadow:var(--pf-shadow);}
.intro_page.profile .pf-proc .pl{display:flex;justify-content:space-between;align-items:center;
  font-size:var(--font-size-desc);font-weight:600;color:#3F4E66;padding:clamp(6px,1.5vw,9px) 0;}
.intro_page.profile .pf-proc .pl:not(:last-child){border-bottom:1px dashed var(--pf-line);}
.intro_page.profile .pf-proc .bar{flex:0 0 clamp(90px,26vw,120px);height:8px;border-radius:6px;
  background:var(--pf-accent-soft);overflow:hidden;margin-left:14px;}
.intro_page.profile .pf-proc .bar i{display:block;height:100%;width:100%;background:var(--pf-accent);border-radius:6px;}
.intro_page.profile .pf-proc .pl.p88 .bar i{width:88%;}

/* ---------- RESULT · 2컬럼 + 리포트 카드 ---------- */
.intro_page.profile .pf-result{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5.2vw,40px);
  align-items:center;text-align:left;width:100%;}
.intro_page.profile .pf-result .copy h3{font-size:clamp(26px, 6.22vw, 52px);line-height:1.15;margin-bottom:clamp(10px,2.6vw,14px);
  color:var(--pf-navy);font-family:var(--font-style2);font-weight:400;}
.intro_page.profile .pf-result .copy p{color:#586471;font-size:var(--font-size-st2);margin-bottom:clamp(8px, 1.69vw, 13px);line-height:1.33;}
.intro_page.profile .pf-chips{display:flex;flex-wrap:wrap;gap:8px;}
.intro_page.profile .pf-chips span{background:var(--pf-accent-soft);color:var(--pf-accent);font-weight:700;
  font-size:var(--font-size-base);padding:7px 13px;border-radius:999px;}
.intro_page.profile .pf-report{background:#fff;border:1px solid var(--pf-line);border-radius:clamp(14px,3.6vw,22px);
  box-shadow:var(--pf-shadow);overflow:hidden;}
.intro_page.profile .pf-report .rhead{background:var(--pf-navy);color:#fff;padding:clamp(14px,3.6vw,20px) clamp(16px,4.16vw,24px);
  display:flex;justify-content:space-between;align-items:center;}
.intro_page.profile .pf-report .rhead b{font-size:var(--font-size-st2);}
.intro_page.profile .pf-report .rbody{padding:clamp(6px,1.5vw,8px) clamp(16px,4.16vw,24px) clamp(12px,3vw,18px);}
.intro_page.profile .pf-report .rline{display:flex;justify-content:space-between;align-items:center;
  padding:clamp(10px,2.6vw,13px) 0;border-bottom:1px solid var(--pf-line);font-size:var(--font-size-desc);gap:12px;}
.intro_page.profile .pf-report .rline:last-child{border-bottom:0;}
.intro_page.profile .pf-report .rline span{color:var(--pf-muted);font-weight:600;}
.intro_page.profile .pf-report .rline b{color:var(--pf-navy);font-weight:800;text-align:right;}
.intro_page.profile .pf-report .rline b.g{color:var(--pf-accent);}
.intro_page.profile .pf-report .rline .pill{display:inline-block;background:var(--pf-accent-soft);color:var(--pf-accent);
  font-weight:700;font-size:var(--font-size-desc);padding:4px 10px;border-radius:3.2rem;margin-left:6px;}

/* ---------- GROWTH · 메뉴 칩 ---------- */
.intro_page.profile .pf-menu{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(20px,5.2vw,30px);}
.intro_page.profile .pf-menu .m{border:1px solid var(--pf-line);border-radius:999px;padding:clamp(6px,1.5vw,9px) clamp(12px,3.12vw,18px);
  font-size:var(--font-size-base);font-weight:700;color:var(--pf-accent);background:#fff;}

/* ---------- Final CTA (item7) ---------- */
.intro_page.profile .pf-cta{background:linear-gradient(160deg,var(--pf-navy) 0%,var(--pf-navy2) 100%);color:#fff;
  border-radius:clamp(14px,3.6vw,22px);padding:clamp(28px,8vw,56px) clamp(16px,5.2vw,32px);text-align:center;
  position:relative;overflow:hidden;width:100%;}
.intro_page.profile .pf-cta::before{content:"";position:absolute;left:-80px;bottom:-80px;width:260px;height:260px;
  border-radius:50%;background: radial-gradient(70.71% 70.71% at 50% 50%, rgba(16, 165, 120, 0.28) 0%, rgba(16, 165, 120, 0) 70%);}
.intro_page.profile .pf-cta h2{color:#fff;font-size:clamp(22px, 6.25vw, 48px);line-height:1.25;position:relative;z-index:1;font-family:var(--font-style2);}
.intro_page.profile .pf-cta h2 .point_txt{color:#C1E1FF;}
.intro_page.profile .pf-cta p{color:#C4D0E4;margin:clamp(10px,2.6vw,14px) auto clamp(18px,4.6vw,26px);
  position:relative;z-index:1;font-size:var(--font-size-desc);font-weight: 400;}
.intro_page.profile .pf-cta button{padding: clamp(7px, 0.71vw + 4.7px, 15px) clamp(13px, 1.16vw + 9.3px, 26px);font-size: var(--font-size-desc);font-weight: 800;border-radius: 6.2rem}
.intro_page.profile .pf-cta button:hover{background:#EAF2FE;}

/* ---------- reveal 등장 애니메이션 ---------- */
.intro_page.profile .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.intro_page.profile .reveal.in{opacity:1;transform:none;}
.sub_content .cont_body.intro_page.profile .cont_list.item6  .point_box  small {color: #8592A6;}
/* ---------- 반응형 ---------- */
@media(max-width:768px){
  .intro_page.profile .pf-result{grid-template-columns:1fr;gap:clamp(20px,5.2vw,28px);}
  .intro_page.profile .item1 .sub2{max-width:clamp(318px,82.81vw,636px);}
  .intro_page.profile .point_box.tab4,
  .intro_page.profile .point_box.tab3{
    grid-template-columns: repeat(1, 1fr);
  }
  .intro_page.profile .kpi_list.tab5{grid-template-columns: repeat(3, 1fr);}
  .sub_content .cont_body.intro_page.profile .cont_list.item6 small {text-align: center;}
  .sub_content .cont_body.intro_page.profile .cont_list.item6  .point_box  small {text-align: left;}
}
@media(prefers-reduced-motion:reduce){
  .intro_page.profile .reveal{opacity:1;transform:none;transition:none;}
  .intro_page.profile .point_box.tab4 > li:hover,
  .intro_page.profile .point_box.tab3 > li:hover{transform:none;}
}