/* ============================================================
   DUOKEEPER · AI 학습프로파일  (/css/ai_profile.css)
   디자인 토큰: duokeeper.com 기준 (primary #2F80ED / green #27AE60)
   위저드 셸 + 8스텝 패널 + 결과카드 스타일
   ============================================================ */
/* prototype tokens
   - duokeeper.com 기준 (primary #2F80ED / green #2AA570)
   - 위치: 진단・설계 메뉴 하위 (AI 건강검진 완료 후 이어지는 온보딩)
   - CI3 이관 시: header/footer 공용 뷰 분리, 각 STEP 패널만 뷰로 치환
     결과 카드 값은 프로파일 테이블 + Gemini 응답에 바인딩
   ============================================================ */
:root{
  --blue:#2F7FD4; --blue-dark:#1E5FBF; --blue-soft:#E6F3FF;
  --green:#2AA570; --green-soft:#E7F6EE;
  --amber:#FBB03B; --amber-soft:#FDF0E4;
  --violet:#6B5DD3; --violet-soft:#F8F7FF;
  --ink:#2A2A2A; --sub:#5A6577; --mut:#575757;
  --line:#E5E9F0; --line-2:#F3F3F3;
  --bg:#F5F7FA; --card:#FFFFFF;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(20,30,55,.05), 0 8px clamp(14px, 1.9vw, 24px) rgba(20,30,55,.06);
  --shadow-lg:0 12px 40px rgba(20,30,55,.14);

}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Malgun Gothic",sans-serif;
  line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%}

/* ---------- 헤더 (공용 뷰 매핑) ---------- */
.util{background:#0F1B33;color:#C7D0E0;font-size:var(--font-size-st2)}
.util .wrap{max-width:1180px;margin:0 auto;padding:7px clamp(10px, 2.6vw, 20px);display:flex;justify-content:flex-end;gap:16px}
.util a{color:#C7D0E0;opacity:.85}
.gnb{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.gnb .wrap{max-width:1180px;margin:0 auto;padding:0 clamp(10px, 2.6vw, 20px);display:flex;align-items:center;height:62px;gap:clamp(14px, 3.38vw, 26px)}
.logo{font-weight:800;font-size:21px;letter-spacing:-.4px;color:var(--ink);display:flex;align-items:center;gap:7px}
.logo b{color:var(--blue)}
.nav{display:flex;gap:clamp(6px, 1.5vw, 22px);font-size:15px;font-weight:600;color:var(--sub)}
.nav a{padding:6px 2px;position:relative}
.nav a.on{color:var(--blue)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:-clamp(10px, 2.6vw, 20px);height:3px;background:var(--blue);border-radius:3px}
.gnb .right{margin-left:auto;display:flex;gap:9px;align-items:center}
.pill{font-size:13.5px;font-weight:700;padding:8px 14px;border-radius:999px}
.pill.ghost{color:var(--sub);border:1px solid var(--line)}
.pill.solid{color:#fff;background:var(--blue)}
@media(max-width:720px){.nav{display:none}.gnb .right .pill.ghost{display:none}}

/* ---------- 브레드크럼 ---------- */
.crumb{max-width:840px;margin:0 auto;padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px) 0;font-size:13px;color:var(--mut);display:flex;gap:7px;align-items:center}
.crumb b{color:var(--sub);font-weight:600}

/* ---------- 마법사 셸 ---------- */
.shell{background: #F8FAFC;padding-top: clamp(40px, 10.41vw, 80px);padding-bottom: clamp(40px, 10.41vw, 80px); width: 100%;}
.wizard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;width: 100%;max-width: 1100px;margin: 0 auto;}

/* 진행 헤더 */
.whead{margin-bottom: clamp(20px, 5.2vw, 40px);}
.whead .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.step-tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--font-size-st2);font-weight:800;letter-spacing:.4px;color:var(--blue);background:var(--blue-soft);padding:6px 11px;border-radius:999px}
.step-count{ font-size: var(--font-size-st2);font-weight: 700;color: var(--font-color-1);margin-left: auto;}
.bar{ height: clamp(7px, 1.08vw, 14px);background: #EDF1EE;border-radius: 999px;margin: clamp(10px, 2.6vw, 20px) 0;overflow: hidden;}
.bar > i{display:block;height:100%;width:0;background: linear-gradient(90deg, #D8584F 0%, #D8584F 4.96%, #E06A62 4.96%, #E06A62 9.92%);border-radius:999px;transition:width .45s cubic-bezier(.2,.7,.2,1)}

/* 패널 */
.panel{display:none;padding:clamp(14px, 3.38vw, 26px)}
.panel.on{display:block;animation:fade .38s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ptitle{font-size: var(--font-size-h3);font-weight: 800;letter-spacing: -.3px;margin-bottom: clamp(10px, 2.6vw, 20px);text-align: left;font-family: var(--font-style2);color: var(--font-color-2);}
.psub{color:var(--font-color-1);font-size:var(--font-size-st2);font-weight:400;margin-bottom: clamp(10px, 2.6vw, 20px);text-align: left;}
.plabel{font-size:var(--font-size-st1);font-weight:700;margin:clamp(20px, 5.2vw, 40px) 0 clamp(10px, 2.6vw, 20px);display:flex;align-items:center;gap:8px}
.plabel .hint{font-weight:500;color:var(--font-color-1);font-size:var(--font-size-desc);}
.pnote{font-size:var(--font-size-base);color:var(--ink);margin:clamp(10px, 2.6vw, 20px) 0 0;line-height:1.55;font-weight: 400;text-align: left;}

/* 선택 칩 */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border: 1px solid #C8C8C8;background:#fff;border-radius:clamp(30px, 4.65vw, 60px);padding:clamp(6px, 0.93vw, 12px) clamp(14px, 3.64vw, 28px);font-size:var(--font-size-st2);font-weight:400;color:var(--font-color-2);transition:.15s;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:#c9d4e6;color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-dark)}
.chip .tick{width:16px;height:16px;border-radius:50%;border:1.6px solid #cdd6e4;display:grid;place-items:center;flex-shrink:0;display: none;}
.chip[aria-pressed="true"] .tick{border-color:var(--blue);background:var(--blue)}
.chip[aria-pressed="true"] .tick::after{content:"";width:5px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-1px)}
.chip.circle .tick{border-radius:50%}
.chip.disabled{opacity:.42;pointer-events:none}

/* 입력 */
.field{display:flex;flex-direction:column;gap:6px}
.input{border:1px solid var(--line);border-radius:11px;padding:clamp(6px, 0.93vw, 12px)  clamp(7px,1.08vw,14px);font-size:var(--font-size-st2);color:var(--ink);width:100%;font-family:inherit}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.input::placeholder{color:#a9b3c4}
.search{position:relative}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--mut)}
.search .input{padding-left:38px}
.suggest{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.tag{font-size:var(--font-size-st2);font-weight:600;color:var(--sub);background:var(--line-2);border-radius:999px;padding:6px 11px}
.tag:hover{background:var(--blue-soft);color:var(--blue-dark)}
.slots{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.slot{display:flex;gap:9px;align-items:center}
.slot .idx{display:grid;place-items:center;flex-shrink:0;    align-items: center;justify-content: center;padding: clamp(6px, 0.93vw, 12px) clamp(14px, 3.64vw, 28px);line-height: 1;border-radius: 8px;background: #2F7FD4;color: #fff;font-weight: 700;font-size: var(--font-size-st1);}

/* 목표 지망 슬롯 (STEP1 · 검색 없이 직접 입력) */
.goal-toggle{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:12px;padding:13px 15px;cursor:pointer;transition:.15s;}
.goal-toggle:hover{border-color:#c9d4e6}
.goal-toggle[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft)}
.goal-toggle .sw{width:clamp(28px, 3.3vw, 42px);height:clamp(14px, 1.9vw, 24px);border-radius:999px;background:#d3dbe8;position:relative;flex-shrink:0;transition:.2s}
.goal-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:clamp(10px, 2.6vw, 20px);height:clamp(10px, 2.6vw, 20px);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.2s}
.goal-toggle[aria-pressed="true"] .sw{background:var(--blue)}
.goal-toggle[aria-pressed="true"] .sw::after{left:clamp(10px, 2.6vw, 20px)}
.goal-toggle .gt-t{font-size:var(--font-size-st2);font-weight:600;color:var(--ink)}
.goal-toggle .gt-s{font-size:var(--font-size-base);color:var(--ink);font-weight:400;margin-top:1px}
.goal-slots{display:flex;flex-direction:column;gap:clamp(10px, 2.6vw, 20px);margin-top:clamp(20px, 5.2vw, 40px);transition:.2s}
.goal-slots.off{opacity:.38;pointer-events:none;filter:grayscale(.5)}
.goal-row{display:grid;grid-template-columns:108px 1.1fr 1fr;gap:9px;align-items:center}
.goal-row .rank{height:44px;border-radius:clamp(5px, 0.77vw, 10px);background:var(--blue);color:#fff;font-size:var(--font-size-st2);font-weight:700;display:grid;place-items:center}
.goal-row:nth-child(2) .rank{background:var(--blue);color:#fff}
.goal-row .input{margin:0}
@media(max-width:768px){
  .goal-row{grid-template-columns:1fr;grid-template-areas:none}
  .goal-row .rank{grid-area:auto;height:clamp(32px, 5.73vw, 44px)}
  .goal-row .g-uni,.goal-row .g-major{grid-area:auto}
}

/* 최근 시험점수 2회차 (STEP2) */
.score2{border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:8px}
.score2 .s2-head{display:grid;grid-template-columns:clamp(100px,18.22vw,140px) 1fr 1fr;background:#F3F3F3;font-size:var(--font-size-st2);font-weight:600;color:var(--font-color-2)}
.score2 .s2-head span{padding:9px clamp(6px, 0.93vw, 12px);border-right: 1px solid #C8C8C8;}
.score2 .s2-head span:first-child{color:var(--font-color-2)}
.score2 .s2-head .prev{color:var(--font-color-2)}
.score2 .s2-head .latest{color:var(--font-color-2);border-right:0;}
.score2 .s2-row{display:grid;grid-template-columns:clamp(100px,18.22vw,140px) 1fr 1fr;border-top:1px solid var(--line);align-items:center}
.score2 .s2-sub{padding:clamp(10px, 2.6vw, 20px) clamp(6px, 0.93vw, 12px);font-size:var(--font-size-st2);font-weight:600;border-right: 1px solid #C8C8C8;}
.score2 .s2-cell{padding:8px;    border-right: 1px solid #C8C8C8;}
.score2 .s2-cell.latest{border-right: 0;}
.score2 .s2-cell .input{padding:clamp(6px, 0.93vw, 12px) clamp(14px, 3.64vw, 28px);font-size:var(--font-size-st2);margin:0;border-radius: clamp(30px, 4.65vw, 60px);}
.score2 .s2-cell .input::placeholder{font-size:inherit;}
.score2 .s2-cell.latest .input{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
@media(max-width:560px){
  .score2 .s2-head,.score2 .s2-row{grid-template-columns:52px 1fr 1fr}
  .score2 .s2-head span,.score2 .s2-cell{padding:7px 6px}
}

/* 현재 사용하는 교재 · 과목별 3권 (STEP3) */
.books{display:flex;flex-direction:column;gap:11px;margin-top:8px}
.book-block{border:1px solid var(--line);border-radius:13px;padding:13px 15px 15px;background:#fff}
.book-block .bb-head{display:flex;align-items:center;gap:8px;margin-bottom:clamp(5px, 0.77vw, 10px)}
.book-block .bb-name{font-size:var(--font-size-st1);font-weight:700}
.book-block .bb-cap{font-size:var(--font-size-desc);font-weight:500;color:var(--font-color-1)}
.book-inputs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.book-inputs .bi-slot{position:relative}
.book-inputs .bi-slot .no{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:var(--font-size-st2);font-weight:700;color:#C8C8C8;pointer-events:none}
.book-inputs .bi-slot .input{border: 1px solid #C8C8C8;background: #fff;border-radius: clamp(30px, 4.65vw, 60px);padding: clamp(6px, 0.93vw, 12px) clamp(14px, 3.64vw, 28px) clamp(6px, 0.93vw, 12px) clamp(20px, 5.2vw, 40px);font-size: var(--font-size-st2);font-weight: 400;color: var(--font-color-2);margin:0}
.book-inputs .bi-slot .input::placeholder{color: #C8C8C8;}
@media(max-width:560px){.book-inputs{grid-template-columns:1fr}}

/* 과목 수준 그리드 */
.subj{display:flex;flex-direction:column;gap:11px}
.subj-row{display:flex;align-items:center;gap:clamp(10px, 2.6vw, 20px);flex-wrap:wrap}
.subj-name{width:56px;font-weight: 700;font-size: var(--font-size-st1);flex-shrink:0}
.levels{display:flex;gap:clamp(10px, 2.6vw, 20px);flex-wrap:wrap}
.lv{border: 1px solid #C8C8C8;border-radius:6rem;padding:clamp(6px, 0.93vw, 12px) clamp(14px, 3.64vw, 28px);font-size:var(--font-size-st2);font-weight:400;color:var(--font-color-2);transition:.15s;letter-spacing: -1.75px;}
.lv[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);color:var(--blue);font-weight: 700;}

/* select 두개 (강점/보완) */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.pair{grid-template-columns:1fr}}
.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;width:100%;border:1px solid var(--line);border-radius:11px;padding:12px 38px 12px 14px;font-size:var(--font-size-desc);font-family:inherit;color:var(--ink);background:#fff}
.sel select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.sel::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border:solid #000;border-width:0 1.8px 1.8px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none}

/* 라디오 그룹 (파트너 설정) */
.rgroup{display:flex;flex-direction:column;gap:clamp(10px, 2.6vw, 20px)}
.rblock .rlab{font-size:var(--font-size-st1);font-weight:700;margin: clamp(20px, 5.2vw, 40px) 0 clamp(10px, 2.6vw, 20px);text-align: left;}

/* 푸터 버튼 */
.wfoot{display:flex;gap:clamp(5px, 0.77vw, 10px);padding:clamp(9px, 2.34vw, 18px) clamp(14px, 3.38vw, 26px) clamp(14px, 1.9vw, 24px);border-top:1px solid var(--line-2)}
.btn{border-radius:12px;padding:15px;font-size:15.5px;font-weight:800;letter-spacing:-.2px;transition:.15s}
.btn-ghost{flex: 0 0 1;border-radius: 11px;padding: 12px 40px;color: var(--font-color-2);border: 1px solid #C8C8C8;background: #fff;font-size: var(--font-size-st2);font-weight: 600;margin-right: auto;}
.btn-ghost:hover{border-color:#c9d4e6;color:var(--ink)}
.btn-primary{flex: 1;color:#fff;background:var(--blue);box-shadow:0 6px 16px rgba(47,128,237,.28);border-radius: 11px;padding: 12px 40px;font-size: var(--font-size-st2);font-weight: 700;font-family: var(--font-style2);}
.btn-primary:hover{background:var(--blue-dark)}
.btn-primary:disabled{background:#b8c6dc;box-shadow:none;cursor:not-allowed}
.btn-primary.btn_olny{width: 100%;}
/* ---------- 인트로 화면 ---------- */
.intro{padding:44px 30px 40px;text-align:center}
.ring{width:150px;height:150px;margin:0 auto clamp(6px, 1.5vw, 22px);position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display: flex;flex-direction: column;align-items: center;justify-content: center}
.ring .pct{font-size:var(--font-size-h3);font-weight:800;letter-spacing:-1px;line-height:1}
.ring .cap{font-size:var(--font-size-sm);color:var(--mut);font-weight:700;margin-top:4px}
.intro h1{font-size:var(--font-size-h3);font-weight:700;letter-spacing:-.6px;margin:6px 0 18px;font-family: var(--font-style2)}
.intro .lead{color:var(--sub);font-size:var(--font-size-desc);max-width:535px;margin:0 auto 11px;line-height:1.65;font-weight: 400}
.intro .time{display:inline-flex;align-items:center;gap:6px;font-size:var(--font-size-desc);font-weight:700;background:var(--blue-soft);padding:7px 13px;border-radius:999px;margin:16px 0 58px}
.intro .time span{color:var(--blue);}
.intro .go{width:100%;max-width:340px;margin:0 auto}
.intro .go button{width: 100%;font-size: var(--font-size-st1);font-weight: 800;font-family: var(--font-style2);}
/* ---------- STEP8 생성 애니메이션 ---------- */
.gen{padding:48px 30px;text-align:center}
.gen .spin{width:150px;height:150px;margin:0 auto 60px;border-radius:50%;border:clamp(10px, 2.6vw, 20px) solid var(--blue-soft);border-top-color:var(--blue);animation:rot 1s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.gen h2{font-size: var(--font-size-h3);font-weight: 700;letter-spacing: -.6px;margin: 6px 0 18px;font-family: var(--font-style2);    text-align: left;}
.gen p{color: var(--sub);font-size: var(--font-size-desc);margin:0 0 30px;font-weight: 400;text-align: left;}
.gtask{margin:0 auto;display:flex;flex-direction:column;gap:15px;text-align:left}
.gtask .t{display:flex;align-items:center;justify-content:space-between;font-size:var(--font-size-st2);font-weight:700;color:var(--font-color-1)}
.gtask .t.done{color:var(--ink)}
.gtask .t.run{color:var(--blue)}
.gtask .gbar{height: clamp(7px, 1.08vw, 14px);background: #EDF1EE;border-radius: 999px;margin: clamp(10px, 2.6vw, 20px) 0;overflow: hidden;}
.gtask .gbar > i{display:block;height:100%;width:0;background:linear-gradient(90deg, #D8584F 0%, #D8584F 4.96%, #E06A62 4.96%, #E06A62 9.92%);border-radius:999px;transition:width .8s ease}
.gtask .check{width:18px;height:18px}

/* ---------- 결과: AI 학습프로파일 ---------- */
.result{display:none;color: #1A2233;}
.result.on{display:block;animation:fade .5s ease;    max-width: 1200px;margin: 0 auto;}
.result-head{text-align:left;padding:6px 0 clamp(10px, 2.6vw, 20px)}
.result-head .eyebrow{font-size:var(--font-size-desc);font-weight:700;letter-spacing:0.4px;color:var(--main-color-1);text-transform:uppercase}
.result-head h1{font-size:clamp(22px, 1vw + 18.8px, 48px);font-weight:800;letter-spacing:-.6px;margin:8px 0 4px;font-family: var(--font-style2);}
.result-head p{color:var(--sub);font-size:var(--font-size-desc);margin:0;font-weight: 400;}

/* ID 카드 (시그니처) */
.idcard{position:relative;border-radius:clamp(10px, 2.6vw, 20px);padding:clamp(14px, 1.9vw, 24px) clamp(14px, 1.9vw, 24px) clamp(6px, 1.5vw, 22px);color:#fff;overflow:hidden;
  background: linear-gradient(93.14deg, #2F7FD4 0.09%, #1A70CB 99.91%);
  box-shadow:var(--shadow-lg);text-align: left;letter-spacing:-.3px;}
.idcard .ic-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2}
.idcard .ic-brand{font-size:var(--font-size-st1);font-weight:600;letter-spacing:-.3px;}
.idcard .ic-id{font-size:clamp(22px,3.41vw,44px);font-weight:800;letter-spacing:-.3px;margin-top:3px;}
.idcard .ic-sub{font-size:var(--font-size-st1);font-weight: 600;margin-top:2px}
.lvbadge{text-align:center;background:#2F7FD4;border:1px solid #C1E1FF;border-radius:clamp(10px, 2.6vw, 20px);padding:clamp(7px, 1vw, 13px) 5%;}
.lvbadge .l1{font-size:var(--font-size-st2);font-weight:600;}
.lvbadge .l2{font-size:clamp(22px,3.41vw,44px);font-weight:800;line-height:1;margin-top:2px}
.idcard .ic-goal{position:  relative;z-index:2;margin-top:clamp(6px, 1.5vw, 22px);padding-top:16px;border-top:1px solid rgba(255,255,255)}
.idcard .ic-goal .g-lab{font-size:var(--font-size-st2);opacity:.5;font-weight:700}
.idcard .ic-goal .g-uni{font-size:var(--font-size-h3);font-weight:800;margin-top:3px}
.idcard .ic-goal .g-major{font-size:var(--font-size-st2);opacity:.85;margin-top:1px}

/* 프로파일 스탯 그리드 */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:11px;margin-top:14px}
.stat{background:#fff;border: 1px solid var(--line);border-radius:var(--border-radius);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px)}
.stat .k{font-size:var(--font-size-st1);font-weight:600;color:var(--mut);display:flex;align-items:center;gap:6px}
.stat .v{font-size:var(--font-size-pt);font-weight:600;letter-spacing:-.3px;margin-top:5px;text-align: left;font-family: var(--font-style2);}
.stat .v small{font-size:var(--font-size-st2);font-weight:600;color:var(--sub)}
.stat.wide{grid-column:1 / -1}
.dot{width:clamp(10px, 2.6vw, 20px);height:clamp(10px, 2.6vw, 20px);border-radius:50%;flex-shrink:0}
.methods{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.method{font-size:var(--font-size-st2);font-weight:700;color:var(--blue);background:var(--blue-soft);border-radius:clamp(30px, 4.65vw, 60px);padding:clamp(6px, 1.5vw, 22px) clamp(14px, 3.64vw, 28px);letter-spacing: -1.75px;line-height: 1;}
.recos{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:11px}
.reco{border: 1px solid #C1E1FF;border-radius:var(--border-radius);padding:clamp(16px, 4.68vw, 32px) clamp(10px, 2.6vw, 20px);display:flex;align-items:center;gap:clamp(10px, 2.6vw, 20px);text-align: left;background: #F4FAFF;}
.reco .ri{width:clamp(40px, 10.41vw, 80px);height:clamp(40px, 10.41vw, 80px);border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.reco .ri svg{width:clamp(22px, 5.72vw, 44px);height: clamp(22px, 5.72vw, 44px);}
.reco .rt{font-size:var(--font-size-st1);color:var(--mut);font-weight:600}
.reco .rn{font-size:var(--font-size-pt);font-weight:600;font-family: var(--font-style2);}
.reco .rn small{font-size:var(--font-size-st1);font-weight:600}
@media(max-width:560px){.recos{grid-template-columns:1fr}}

/* 차별화: 성장 이력 */
.growth{margin-top:clamp(14px, 3.38vw, 26px);text-align: left;}
.sec-lab{font-size:var(--font-size-desc);font-weight:800;letter-spacing:.5px;color:var(--violet);text-transform:uppercase;margin-bottom:4px}
.sec-h{font-size:clamp(22px, 1vw + 18.8px, 48px);font-weight:800;letter-spacing:-.4px;margin:0 0 clamp(8px, 1.2vw, 16px)}
.sec-p{font-size:var(--font-size-desc);color:var(--mut);margin:0 0 clamp(16px, 4.68vw, 32px);}
.timeline{background:#fff;border:1px solid var(--line);border-radius:var(--border-radius);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);}
.tl-row{display:flex;gap:clamp(19px,5.07vw,39px);position:relative;padding-bottom:clamp(16px, 4.68vw, 32px);opacity: .7;}
.tl-row:last-child{padding-bottom:0}
.tl-line{position:absolute;left:clamp(9px, 2.47vw, 19px);top:18px;bottom:-2px;width:1px;background:#C8C8C8;}
.tl-row:last-child .tl-line{display:none}
.tl-dot{width:clamp(20px, 5.2vw, 40px);height:clamp(20px, 5.2vw, 40px);border-radius:50%;border: 1px solid #D9D9D9;flex-shrink:0;margin-top:2px;box-shadow:0 0 0 1.5px var(--line);z-index:2;position: relative;    background: #fff;}
.tl-dot:after{position: absolute;content: '';width: clamp(14px,3.77vw,29px);height: clamp(14px,3.77vw,29px);border-radius:50%;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #C8C8C8;}
.tl-body .tl-date{font-size:var(--font-size-st1);font-weight:600;color:var(--mut)}
.tl-body .tl-txt{font-size:var(--font-size-pt);font-weight:600;margin-top:2px;font-family: var(--font-style2);}
.tl-body .tl-txt b{font-weight:800}
.progress-goal{background:#fff;border:1px solid var(--line);border-radius:var(--border-radius);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);margin-top:12px}
.pg-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:clamp(10px, 2.6vw, 20px)}
.pg-top .pg-t{font-size:clamp(20px, 4.42vw, 34px);font-weight:800}
.pg-top .pg-v{font-size:var(--font-size-h2);font-weight:800;color:var(--blue);letter-spacing:-.5px}
.pg-bar{height:clamp(20px, 4.42vw, 34px);background:var(--line-2);border-radius:999px;overflow:hidden;margin-bottom:clamp(10px, 2.6vw, 20px)}
.pg-bar > i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),#5fd08a);border-radius:999px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pg-scale{display:flex;justify-content:space-between;font-size:var(--font-size-st1);color:var(--mut);margin-top:7px;font-weight:600}
/* result 정적 표기 헬퍼 (인라인 스타일 → 클래스) */
.dot.c-blue{background:var(--blue)}
.dot.c-green{background:var(--green)}
.dot.c-amber{background:var(--amber)}
.dot.c-violet{background:var(--violet)}
.reco .ri.bg-blue{background:var(--blue)}
.reco .ri.bg-green{background:var(--green)}
.tl-dot.c-violet:after{background:var(--violet)}
.tl-dot.c-blue:after{background:var(--blue)}
.result-cta .btn-ghost{flex:1}
.pg-bar.p62 > i{width:62%}

.result-cta{display:flex;gap:clamp(5px, 0.77vw, 10px);margin-top:clamp(14px, 3.38vw, 26px)}
.result-cta .btn-primary{box-shadow:0 6px 16px rgba(47,128,237,.28)}
.result-cta button{font-size: var(--font-size-st1);padding: clamp(11px, 1.7vw, 22px) clamp(20px, 5.2vw, 40px);}

/* 안내 배너 */
.banner{display:flex;gap:clamp(10px, 2.6vw, 20px);align-items:center;background:var(--violet-soft);border: 1px solid #6B5DD3;border-radius:var(--border-radius);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);margin-top:16px}
.banner .bl{flex-shrink:0;width: clamp(32px, 8.33vw, 64px);height: clamp(32px, 8.33vw, 64px);}
.banner .bl svg{width: 100%;height: 100%;display:block;}
.banner .bi{flex-shrink:0;color:var(--violet)}
.banner .bt{font-size:var(--font-size-st2);color:var(--mut);line-height:1.25;text-align: left;}

/* 푸터 */
footer{border-top:1px solid var(--line);background:#fff;margin-top:40px}
footer .wrap{max-width:1180px;margin:0 auto;padding:clamp(14px, 3.38vw, 26px) clamp(10px, 2.6vw, 20px);color:var(--mut);font-size:var(--font-size-st2);line-height:1.8}
footer b{color:var(--sub);font-weight:700}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}
@media (max-width: 768px) {
  .wizard {
    background: inherit;
    border: 0;
  }
  .stats{
    grid-template-columns: repeat(1, 1fr);
  }
}