/* =====================================================================
   AI 학생부 진단 전용 스타일 (root /css/) · .sbx 네임스페이스 스코프
   ===================================================================== */
/* =====================================================================
   AI 학생부 진단 — .sbx 네임스페이스(사이트 전역 CSS와 충돌 방지)
   ===================================================================== */
.sbx{
  --blue:#2F7FD4; --blue-dark:#2F7FD4; --blue-soft:#E6F3FF;
  --green:#2AA570; --green-soft:#EBF8F2;
  --amber:#F2994A; --amber-soft:#FDF0E4;
  --purple:#7C5CFC; --purple-soft:#EEEAFE;
  --ink:#1A2233; --sub:#5A6577; --mut:#8A93A3;
  --line:#E5E9F0; --line-2:#EEF1F6; --card:#FFF; --bg:#F5F7FA;
  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(20,30,55,.05),0 8px 24px rgba(20,30,55,.06);
  color:var(--ink);max-width: 1200px;
}
.sbx *{box-sizing:border-box}
.sbx a{color:inherit;text-decoration:none}
.sbx button{font-family:inherit;cursor:pointer}
/* 헤드 */
.sbx .eyebrow{color: var(--main-color-1);font-weight: 700;font-size: var(--font-size-desc);letter-spacing: .4px;text-align: left;}
.sbx h1.page{font-size:clamp(22px, 1vw + 18.8px, 48px);font-weight:800;letter-spacing:-.6px;margin:clamp(11px,2.73vw,21px) 0 0;font-family: var(--font-style2);text-align: left;}
.sbx .lead{color: var(--sub);margin: 8px 0 0;font-size: var(--font-size-desc);font-weight: 400;text-align: left;}
/* 진행 스텝 */
.sbx .flow{display:flex;margin:clamp(16px, 4.68vw, 32px) 0;}
.sbx .fstep{flex:1;text-align:center;position:relative;padding-top: clamp(25px, 6.51vw, 50px);font-size: var(--font-size-st1);color:var(--mut);font-weight:700}
.sbx .fstep::before{content:attr(data-n);position:absolute;top:0;left:50%;transform:translateX(-50%);line-height: 1;
  width:clamp(20px, 5.2vw, 40px);height:clamp(20px, 5.2vw, 40px);border-radius:50%;background:var(--card);border:2px solid var(--line);
  color:var(--mut);font-size:var(--font-size-st2);font-weight:800;display:grid;place-items:center;z-index:2}
.sbx .fstep::after{content:"";position:absolute;top:clamp(10px, 2.6vw, 20px);left:-50%;width:100%;height:2px;background:var(--line);z-index:1}
.sbx .fstep:first-child::after{display:none}
.sbx .fstep.done::before{content:'';background:#FBB03B;border-color:#FBB03B;color:#fff;background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18' fill='none'%3E%3Cpath d='M20.8207 0L8.59241 11.3777L3.42096 5.84268L0 9.05776L8.35474 18L24 3.45639L20.8207 0Z' fill='white'/%3E%3C/svg%3E");background-size: clamp(17px,3.25vw,25px) clamp(9px,2.47vw,19px);background-repeat: no-repeat;background-position: center;}
.sbx .fstep.cur::before{background:var(--blue);border-color:var(--blue);color:#fff}
.sbx .fstep.cur{color:var(--blue)}
.sbx .fstep.done{color: #FBB03B;}
/* 패널 */
.sbx .panel{display:none}
.sbx .panel.on{display:block}
.sbx .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);margin-bottom:14px;margin-top:14px;text-align: left;}
.sbx .card .tit_area{
  position: relative;
  padding-left: clamp(40px, 10.41vw, 80px);
}
.sbx .card .tit_area:before{
  content: url("/images/student-record_img1.png");
  width: clamp(32px, 8.33vw, 64px);height: clamp(32px, 8.33vw, 64px);
  display: inline-block;left: 0;    top: 50%;transform: translateY(-50%);
  position: absolute;
}
.sbx .card .tit_area.item2:before{content: url("/images/student-record_img2.png");}
.sbx .card .tit_area.item3:before{content: url("/images/student-record_img3.png");}
.sbx .card h2{font-size:var(--font-size-h3);font-weight:700;margin:0 0 3px;letter-spacing:-.3px;color:#1A2233;font-family: var(--font-style2); }
.sbx .card .csub{color:var(--sub);font-size:var(--font-size-desc);margin:0 0 24px;font-weight: 400}
/* 업로드 */
.sbx .drop{border:2px dashed #BFD3F2;border-radius:var(--radius);background:var(--blue-soft);
  padding:51px 20px;text-align:center;transition:.15s;cursor:pointer}
.sbx .drop:hover,.sbx .drop.hover{background:#DFEBFD;border-color:var(--blue)}
.sbx .drop .ico{width: clamp(32px, 8.33vw, 64px);height: clamp(32px, 8.33vw, 64px); margin: 0 auto;}
.sbx .drop .ico svg{width: 100%;height: 100%;}
.sbx .drop .t{font-weight:800;font-size:var(--font-size-st1);margin-top:8px}
.sbx .drop .s{color:var(--sub);font-size:var(--font-size-desc);margin-top:5px;font-weight: 400;}
.sbx .drop .formats{display:inline-block;margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:5px 14px;font-size:var(--font-size-base);color:var(--mut);font-weight:700}
.sbx .files{margin-top:14px;display:none}
.sbx .files.on{display:block}
.sbx .file{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:11px;padding:12px 14px;background:#fff}
.sbx .file .fi{width:38px;height:38px;border-radius:9px;background:var(--blue-soft);color:var(--blue-dark);display:grid;place-items:center;font-size:17px;flex:none}
.sbx .file .fn{font-weight:700;font-size:14.5px}
.sbx .file .fm{font-size:var(--font-size-base);color:var(--mut)}
.sbx .file .del{margin-left:auto;border:0;background:transparent;color:var(--mut);font-size:18px;padding:4px 8px}
.sbx .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.sbx .field label{display:block;font-size:var(--font-size-desc);font-weight:700;margin-bottom:6px}
.sbx .field select{width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:var(--font-size-desc);background:#fff;outline:none}
.sbx .field select:focus{border-color:var(--blue)}
.sbx .privacy{margin-top:14px;display:flex;gap:9px;align-items:flex-start;font-size:var(--font-size-desc);color:var(--sub);font-weight: 400;
  background:var(--bg);border-radius:10px;padding:12px 14px;}
.sbx .privacy span{padding-top: 0.3rem;}
.sbx .privacy input{margin-top:2px;width:clamp(16px,4.29vw,33px);height:clamp(16px,4.29vw,33px);accent-color:var(--blue);flex:none;border: 1px solid #767676;background: #ffffff;}
.sbx .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.sbx .btn{border:0;border-radius:clamp(40px,10.41vw,80px);padding:clamp(7px,1.69vw,13px) clamp(12px,3.12vw,24px);font-size:var(--font-size-st2);font-weight:700}
.sbx .btn.primary{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(47,128,237,.25)}
.sbx .btn.primary:hover{background:var(--blue-dark)}
.sbx .btn.primary:disabled{background:var(--blue);box-shadow:none;cursor:pointer;}
.sbx .btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--sub)}
.sbx .btn.ghost:hover{border-color:var(--mut);color:var(--ink)}
/* 분석 진행 */
.sbx .analyzing{text-align:center;padding:10px 0 4px}
.sbx .ring{width: 118px;height: 118px;border: 15px solid #E6F3F;border-top-color:var(--blue);border-radius:50%;margin:6px auto 16px;animation:sbx-spin 1s linear infinite}
.sbx .analyzing strong{font-size: var(--font-size-h3);font-weight: 700;font-family: var(--font-style2);}
.sbx .analyzing p{font-size: var(--font-size-desc);font-weight: 400;}
@keyframes sbx-spin{to{transform:rotate(360deg)}}
.sbx .pline{max-width:860px;margin:0 auto;text-align:left;padding-top: 24px;}
.sbx .pl{display: flex;align-items: center;gap: 12px;padding: 10px 12px;border-radius: 10px;color: var(--font-color-2);font-weight: 700;font-size: var(--font-size-st1);margin-bottom: 24px;}
.sbx .pl .dot{width: clamp(16px, 4.29vw, 33px);height: clamp(16px, 4.29vw, 33px);border-radius: 50%;border: 2px solid var(--main-color-1);background: var(--main-color-1);color: #FFFFFF;display: grid;place-items: center;font-size: var(--font-size-st2);font-weight: 700;line-height: 1;flex: none;}
.sbx .pl.active{color:var(--blue);background:var(--blue-soft)}
.sbx .pl.active .dot{border-color:var(--blue);color:var(--blue)}
.sbx .pl.ok{color:var(--ink)}
.sbx .pl.ok .dot{background:var(--green);border-color:var(--green);color:#fff}
/* ===== 결과 ===== */
.sbx .hero{background:linear-gradient(135deg,#1E5FBF,#2F80ED);color:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:14px}
.sbx .hero .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.sbx .hero .top .top_tit {font-size: var(--font-size-st1) !important;font-weight: 600 !important;letter-spacing: -0.3px !important;text-align: left;opacity: 1 !important;}
.sbx .hero .uni-sel{
  background-color: var(--main-color-1);color: #fff;border-radius: 93px;
  padding: clamp(7px, 1vw, 13px) clamp(15px, 3.9vw, 30px) clamp(7px, 1vw, 13px) clamp(10px, 2.6vw, 20px);
  font-weight: 700;font-size: var(--font-size-st2);border: 1px solid #C1E1FF;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M9.99997 12C9.64153 12 9.28313 11.8559 9.00985 11.5684L0.410284 2.51663C-0.136761 1.94083-0.136761 1.00725 0.410284 0.431681C0.957107-0.143894 1.84387-0.143894 2.39096 0.431681L9.99997 8.44122L17.609 0.43196C18.1561-0.143614 19.0427-0.143614 19.5895 0.43196C20.1368 1.00753 20.1368 1.94111 19.5895 2.51691L10.9901 11.5687C10.7167 11.8563 10.3583 12 9.99997 12Z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;background-size: clamp(10px, 2.6vw, 20px) clamp(6px, 0.93vw, 12px);background-position: right 1.1rem center;background-size: 1.9rem;
}
.sbx .hero .uni-sel option{color:#1A2233}
.sbx .hero .score-main{display:flex;align-items:flex-end;gap:16px;margin-top:12px;flex-wrap:wrap}
.sbx .hero .big{font-size:clamp(30px, 4.65vw, 60px);font-weight:700;line-height:1}
.sbx .hero .big small{font-size:var(--font-size-h3);font-weight:700;color:#A8CDF4;padding-left: clamp(15px, 3.9vw, 30px); }
.sbx .hero .raw{background: #619EE7;border-radius: clamp(8px, 1.2vw, 16px);padding: clamp(9px, 2.34vw, 18px) clamp(17px, 4.55vw, 35px);font-family: var(--font-style2);}
.sbx .hero .raw .l{font-size:var(--font-size-desc);color:#C6E2FF;font-weight:700}
.sbx .hero .raw .v{font-size:var(--font-size-h3);font-weight:800;margin-top:5px}
.sbx .hero .grade-badge{display:inline-block;background:#fff;color:var(--blue-dark);font-weight:800;font-size:13px;padding:5px 13px;border-radius:999px;margin-top:2px}
.sbx .hero .hnote{font-size: var(--font-size-st2);font-weight: 600;margin-top: 42px;text-align: left;}
/* 역량 카드 4 */
.sbx .comp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px, 4.68vw, 32px);max-width: 1200px;}
.sbx .comp{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;position:relative}
.sbx .comp .chd{display:flex;align-items:flex-start;gap:clamp(10px, 2.6vw, 20px);}
.sbx .comp .chd span:nth-child(2){display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;}
.sbx .comp .chd span:nth-child(2) br{display: none;}
.sbx .comp .cico{width:clamp(40px, 10.41vw, 80px);height:clamp(40px, 10.41vw, 80px);border-radius:clamp(6px, 2.08vw, 16px);display:grid;place-items:center;font-size:0px;flex:none;color:#fff;}
.sbx .comp .cname{font-weight: 600;font-size: var(--font-size-h3);font-family: var(--font-style2);letter-spacing: -0.3px;}
.sbx .comp .cmax{font-size: var(--font-size-desc);color: var(--font-color-1);font-weight: 600;}
.sbx .comp .cscore{margin-left:auto;font-size:clamp(20px, 2.3vw + 14px, 40px);font-weight:800}
.sbx .comp .bar{height: clamp(24px, 2.7vw, 35px);border-radius: clamp(28px, 3.3vw, 42px);background: #F3F3F3;margin-top: 12px;overflow: hidden;}
.sbx .comp .bar i{display:block;height:100%;border-radius:clamp(28px, 3.3vw, 42px);}
.sbx .comp .why{margin-top: 20px;
  border: 0;
  background: var(--bg);
  border-radius: clamp(8px, 1.2vw, 16px);
  padding: clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);
  font-size: var(--font-size-st2);
  font-weight: 700;
  color: var(--font-color-2);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #E5E9F0;}
.sbx .comp .why:hover{background:#EDF1F7;color:var(--ink)}
.sbx .comp .why .ar{
  display:inline-block;
  width:14px;
  height:10px;
  font-size:0;
  line-height:0;
  vertical-align:middle;
  background-color:var(--blue-dark);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2.67314 0.0011462L25.3259 0.00114521C26.3552 0.00114516 27.2937 0.592908 27.7384 1.52244C27.9113 1.88961 27.9995 2.28353 27.9995 2.67477C27.9995 3.27366 27.7963 3.86899 27.4069 4.35292L16.0805 18.3921C15.5734 19.0213 14.8078 19.3867 13.9995 19.3867C13.1912 19.3867 12.4256 19.0213 11.9185 18.3921L0.592169 4.35203C-0.0548489 3.55083 -0.181401 2.4493 0.260639 1.51977C0.705352 0.592909 1.6429 0.00114624 2.67314 0.0011462Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M2.67314 0.0011462L25.3259 0.00114521C26.3552 0.00114516 27.2937 0.592908 27.7384 1.52244C27.9113 1.88961 27.9995 2.28353 27.9995 2.67477C27.9995 3.27366 27.7963 3.86899 27.4069 4.35292L16.0805 18.3921C15.5734 19.0213 14.8078 19.3867 13.9995 19.3867C13.1912 19.3867 12.4256 19.0213 11.9185 18.3921L0.592169 4.35203C-0.0548489 3.55083 -0.181401 2.4493 0.260639 1.51977C0.705352 0.592909 1.6429 0.00114624 2.67314 0.0011462Z'/%3E%3C/svg%3E") no-repeat center / contain;
  transition:.2s;
}
/* comp accent 별 화살표 색 (:has 로 각 comp 의 accent 감지) */
.sbx .comp:has(.cico.acc-blue) .why .ar{background-color:var(--blue-dark)}
.sbx .comp:has(.cico.acc-green) .why .ar{background-color:var(--green)}
.sbx .comp:has(.cico.acc-amber) .why .ar{background-color:#C77B27}
.sbx .comp:has(.cico.acc-purple) .why .ar{background-color:var(--purple)}
.sbx .comp.open .why .ar{transform:rotate(180deg)}
.sbx .comp .detail{display:none;margin-top:12px;border-top:1px dashed var(--line);padding-top:12px}
.sbx .comp.open .detail{display:block}
.sbx .comp .drow{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-desc);padding:6px 0;border-bottom:1px solid var(--line-2)}
.sbx .comp .drow:last-child{border:0}
.sbx .comp .drow .dl{color:var(--ink)}
.sbx .comp .drow .dv{font-weight:800}
.sbx .comp .drow .dv.plus{color:var(--green)} .sbx .comp .drow .dv.minus{color:#EB5757}
.sbx .comp .dmini{font-size:11.5px;color:var(--mut);margin-left:6px}
@media(max-width:640px){.sbx .comp-grid{grid-template-columns:1fr}}
.acc-blue{background: var(--blue);
  content: '';
  background-image: url(/images/ai_img1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(24px, 6.25vw, 48px) clamp(24px, 6.25vw, 48px);}
.acc-green{background:var(--green);
  content: '';
  background-image: url(/images/ai_img2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(24px, 6.25vw, 48px) clamp(24px, 6.25vw, 48px);}
.acc-amber{background:var(--amber);
  content: '';
  background-image: url(/images/ai_img3.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(24px, 6.25vw, 48px) clamp(24px, 6.25vw, 48px);}
.acc-purple{background:var(--purple);
  content: '';
  background-image: url(/images/ai_img4.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(24px, 6.25vw, 48px) clamp(24px, 6.25vw, 48px);}
.fill-blue{background:var(--blue)} .fill-green{background:var(--green)}
.fill-amber{background:var(--amber)} .fill-purple{background:var(--purple)}
.tx-blue{color:var(--blue-dark)} .tx-green{color:var(--green)}
.tx-amber{color:#C77B27} .tx-purple{color:var(--purple)}
/* 대학별 비교 */
.sbx .uni-bars{margin-top:6px}
.sbx .ub{display:flex;align-items:center;gap:12px;padding:8px 0}
.sbx .ub .un{width: 120px;font-size: var(--font-size-st1);font-weight: 600;}
.sbx .ub .track{flex:1;    height: clamp(24px, 2.7vw, 35px);border-radius: clamp(28px, 3.3vw, 42px);background: #F3F3F3;overflow:hidden;position:relative}
.sbx .ub .track i{display:block;height:100%;background:var(--main-color-1);border-radius:clamp(28px, 3.3vw, 42px);}
.sbx .ub.me .track i{background:#FBB03B;}
.sbx .ub .uv{width:52px;text-align:right;font-size: var(--font-size-st1);font-weight: 600;}
.sbx .ub.me .un::after{content:" ★";color:#FFDC64;}
/* 문장 등급 */
.sbx .sent{border-radius: var(--radius);padding: clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);margin-top: 10px;background: #F8F8F8;border: 1px solid #E5E9F0;box-shadow: var(--shadow);}
.sbx .sent .txt{font-size: var(--font-size-st2);color: var(--font-color-2);font-weight: 600;}
.sbx .sent .meta{display:flex;align-items:center;gap:8px;margin-top:8px}
.sbx .gr{width:clamp(24px, 6.25vw, 48px);height:clamp(24px, 6.25vw, 48px);border-radius:8px;color:#fff;font-weight:700;font-size:var(--font-size-st1);display:grid;place-items:center}
.gA{background:#27AE60}.gB{background:#2F80ED}.gC{background:#F2994A}.gD{background:#EB5757}.gE{background:#98A2B3}
.sbx .sent .gtxt{font-size:var(--font-size-st1);color:var(--font-color-2);font-weight:700}
/* 키워드 칩 */
.sbx .kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.sbx .kw span{background:var(--blue-soft);color:var(--blue-dark);border-radius:999px;padding:clamp(7px, 1vw, 13px) clamp(10px, 2.6vw, 20px);font-size:var(--font-size-st2);font-weight:800}
.sbx .kw span b{color:var(--blue);margin-left:4px}
.sbx .kw span.hot{background:var(--green-soft);color:var(--green)}
/* CTA */
.sbx .cta{background:#F4FAFF;border:1px solid #C1E1FF;border-radius:var(--radius);padding:clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);text-align:center;margin-top:14px;box-shadow: var(--shadow);}
.sbx .cta h3{margin:0;font-size:var(--font-size-h2);font-weight:600;font-family: var(--font-style2);letter-spacing: -1.68px;line-height: 1.81}
.sbx .cta p{color:var(--sub);font-size:var(--font-size-st2);margin:clamp(6px, 0.93vw, 12px) 0;font-weight: 400}
.sbx .cta .row{display:flex;gap:10px;justify-content:center;padding-top:clamp(8px, 1.2vw, 16px);flex-wrap:wrap}
.sbx .xai-tip{
  display: flex;gap: 10px;align-items: flex-start;
  background: #F8F8F8;border: 1px solid #E5E9F0;border-radius:clamp(8px, 1.2vw, 16px);padding: clamp(16px, 4.68vw, 32px) clamp(23px, 6.25vw, 46px);
  font-size: var(--font-size-st2);color: var(--font-color-2);
  margin-bottom: clamp(16px, 4.68vw, 32px);font-weight: 800;box-shadow: 0 clamp(5px, 0.6vw, 8px) clamp(14px, 1.9vw, 24px) 0 #141E370F,  0 1px clamp(1px, 0.15vw, 2px) 0 #141E370D;
}
.sbx .xai-tip span{font-size: var(--font-size-st2) !important;font-weight: 600; padding: 9.5px 0;}
.sbx .xai-tip span:first-child{
  font-size: 0 !important;
  display: inline-block;
  width: clamp(24px, 6.25vw, 48px);
  height: clamp(24px, 6.25vw, 48px);
  background: url('/images/Idea.png') no-repeat center / contain;
  vertical-align: middle;flex-shrink:0;
}
  @media(prefers-reduced-motion:reduce){.sbx *{animation:none!important;transition:none!important}}
/* 토스트 */
.sbx-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:#1A2233;color:#fff;padding:13px 20px;border-radius:12px;font-weight:700;font-size:14px;
  transition:.3s;z-index:9999;pointer-events:none}
.sbx-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:425px){.sbx .form-row{grid-template-columns:1fr}}