/* =========================================================
   PAGE ONLY : HIGH PASS RESULT SECTION
   이 파일은 해당 과정 폴더에서만 로드됩니다.
========================================================= */
.page-success-rate{
  position:relative;
  overflow:hidden;
  padding:112px 0 132px;
  background:
    radial-gradient(circle at 8% 12%,rgba(255,79,164,.09),transparent 28%),
    radial-gradient(circle at 92% 86%,rgba(90,110,255,.10),transparent 30%),
    linear-gradient(180deg,#fff 0%,#fbf9ff 100%);
}
.page-success-rate::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(119,87,240,.025),transparent);
}
.page-success-rate>.wrap{position:relative;z-index:1}
.page-success-rate__head{max-width:760px;margin-bottom:44px}
.page-success-rate__head .eyebrow{color:var(--accent)}
.page-success-rate__head h2{margin:12px 0 18px;color:#17131d;font-size:2.5rem;line-height:1.04;letter-spacing:-.055em}
.page-success-rate__head h2 em{font-style:normal;background:linear-gradient(100deg,#ff4fa4,#805eff,#35aee4);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-success-rate__head p{max-width:660px;margin:0;color:#746d7a;font-size:1.15rem;line-height:1.8;word-break:keep-all}
.page-success-rate__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.page-success-rate__card{overflow:hidden;border:1px solid #ece7f0;border-radius:22px;background:#fff;box-shadow:0 18px 44px rgba(48,34,68,.06);transition:transform .25s ease,box-shadow .25s ease}
.page-success-rate__card:hover{transform:translateY(-5px);box-shadow:0 24px 58px rgba(48,34,68,.10)}
.page-success-rate__card>a{display:block;height:100%;color:inherit;text-decoration:none}
.page-success-rate__image{position:relative;height:280px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#f8f5fa,#f0eef5)}
.page-success-rate__image img{display:block;width:100%;height:100%;object-fit:contain}
.page-success-rate__image span{position:absolute;left:14px;bottom:14px;padding:7px 10px;border-radius:999px;background:rgba(25,20,31,.88);color:#fff;font-size:11px;font-weight:900;backdrop-filter:blur(8px)}
.page-success-rate__copy{min-height:132px;padding:19px 19px 18px}
.page-success-rate__copy small{display:block;margin-bottom:9px;color:var(--accent);font-size:.85rem;font-weight:900}
.page-success-rate__copy h3{margin:0 0 18px;color:#211c27;font-size:1.15rem;line-height:1.45;letter-spacing:-.035em;word-break:keep-all}
.page-success-rate__copy em{font-style:normal;color:#42394a;font-size:1rem;font-weight:900}
.page-success-rate__more{display:flex;justify-content:center;margin-top:38px}
.page-success-rate__more a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:190px;height:52px;padding:0 24px;border:1px solid #ddd6e8;border-radius:999px;background:#fff;color:#211c27;font-size:1rem;font-weight:900;box-shadow:0 12px 30px rgba(54,35,86,.06);transition:.2s}
.page-success-rate__more a:hover{transform:translateY(-2px);border-color:rgba(119,87,240,.35);box-shadow:0 18px 36px rgba(54,35,86,.10)}
.page-success-rate__more span{color:var(--accent);font-size:18px}


/* =========================================================
   PC ONLY : FIELD EXPERIENCE MORE BUTTON
   모바일/태블릿 반응형은 mobile.css에서 추후 적용
========================================================= */
.course-field-more{display:none}
@media (min-width:1025px){
  .course-field-more{display:flex;justify-content:center;margin-top:34px}
  .course-field-more a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:230px;height:54px;padding:0 28px;border:1px solid #ded8e8;border-radius:999px;background:#fff;color:#211c27;text-decoration:none;font-size:1rem;font-weight:900;box-shadow:0 14px 34px rgba(48,34,68,.07);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
  .course-field-more a:hover{transform:translateY(-3px);border-color:rgba(120,92,244,.42);box-shadow:0 20px 42px rgba(48,34,68,.11)}
  .course-field-more a span{color:var(--accent);font-size:19px}
}


/* =========================================================
   PC ONLY : COURSE REVIEW AUTO SLIDER
   메인(index)과 같은 가로 자동 롤링 수강후기
   태블릿/모바일은 추후 mobile.css에서 별도 적용
========================================================= */
.course-review-section{display:none}
@media (min-width:1025px){
  .course-review-section{display:block;position:relative;overflow:hidden;padding:104px 0 92px;background:radial-gradient(circle at 7% 24%,rgba(255,93,169,.10),transparent 26%),radial-gradient(circle at 94% 10%,rgba(102,112,255,.11),transparent 26%),linear-gradient(115deg,#fbf8ff 0%,#fff 52%,#f6f8ff 100%);border-top:1px solid rgba(75,55,104,.05);border-bottom:1px solid rgba(75,55,104,.06)}
  .course-review-section:after{content:"REAL VOICE";position:absolute;right:3.5%;bottom:-1.25rem;color:rgba(103,76,181,.035);font-size:7rem;font-weight:1000;line-height:1;letter-spacing:-.06em;pointer-events:none}
  .course-review-wrap{position:relative;z-index:1}
  .course-review-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:center}
  .course-review-heading .eyebrow{color:var(--accent)}
  .course-review-heading h2{margin:12px 0 16px;color:#211c29;font-size:2.65rem;font-weight:650;line-height:1.12;letter-spacing:-.055em}
  .course-review-heading h2 em{font-style:normal;background:linear-gradient(100deg,#ff5ca9,var(--accent),#3faee7);-webkit-background-clip:text;background-clip:text;color:transparent}
  .course-review-heading p{margin:0;color:#7c7482;font-size:1rem;line-height:1.75;word-break:keep-all}
  .course-review-marquee{min-width:0;overflow:hidden;position:relative;padding:12px 0 30px;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
  .course-review-track{display:flex;width:max-content;will-change:transform;animation:courseReviewMarquee 28s linear infinite}
  .course-review-set{display:flex;gap:18px;padding-right:18px;flex:none}
  .course-review-card{width:360px;flex:none;overflow:hidden;border:1px solid rgba(89,65,125,.08);border-radius:20px;background:rgba(255,255,255,.78);box-shadow:0 14px 34px rgba(57,39,88,.06);color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease}
  .course-review-card:hover{transform:translateY(-7px);border-color:rgba(127,85,222,.18);background:#fff;box-shadow:0 22px 48px rgba(57,39,88,.12)}
  .course-review-image{height:238px;overflow:hidden;background:#f1eef5}
  .course-review-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
  .course-review-card:hover .course-review-image img{transform:scale(1.035)}
  .course-review-copy{padding:18px 18px 20px}
  .course-review-copy small{display:block;margin-bottom:8px;color:var(--accent);font-size:1rem;font-weight:900;letter-spacing:.03em}
  .course-review-copy h3{min-height:3.15rem;margin:0 0 16px;color:#28212f;font-size:1.15rem;line-height:1.48;letter-spacing:-.035em;word-break:keep-all}
  .course-review-copy span{display:flex;align-items:center;justify-content:space-between;padding-top:13px;border-top:1px solid #eee9f2;color:#62586c;font-size:1rem;font-weight:800}
  .course-review-copy span b{color:var(--accent);font-size:1.05rem}
  .course-review-marquee:hover .course-review-track{animation-play-state:paused}
  .course-review-more{display:flex;justify-content:center;margin-top:26px}
  .course-review-more a{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:220px;height:54px;padding:0 28px;border:1px solid #ded8e8;border-radius:999px;background:#fff;color:#211c27;text-decoration:none;font-size:1rem;font-weight:900;box-shadow:0 14px 34px rgba(48,34,68,.07);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
  .course-review-more a:hover{transform:translateY(-3px);border-color:rgba(120,92,244,.42);box-shadow:0 20px 42px rgba(48,34,68,.11)}
  .course-review-more a span{color:var(--accent);font-size:1.15rem}
  @keyframes courseReviewMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
}


/* =========================================================
   V5.8.1 PC ONLY : REVIEW HEADING ABOVE MARQUEE
   첫번째 합격률 섹션과 동일한 흐름:
   타이틀/설명 → 하단 전체폭 수강후기 슬라이드
========================================================= */
@media (min-width:1025px){
  .course-review-section{
    padding:112px 0 104px;
  }

  .course-review-layout{
    display:block;
  }

  .course-review-heading{
    max-width:760px;
    margin:0 0 38px;
  }

  .course-review-heading h2{
    margin:12px 0 18px;
    font-size:3.5rem;
    font-weight:700;
    line-height:1.04;
    letter-spacing:-.055em;
  }

  .course-review-heading p{
    max-width:660px;
    margin:0;
    font-size:1.15rem;
    line-height:1.8;
  }

  .course-review-marquee{
    width:100%;
    min-width:0;
    padding:4px 0 28px;
  }

  .course-review-more{
    margin-top:20px;
  }
}

/* =========================================================
   HAIR COURSE DETAIL TABS
   PC base styles — Excel 4/5/6/7 curriculum
========================================================= */
.hair-course-detail{
  position:relative;
  overflow:hidden;
  padding:110px 0 120px;
  background:
    radial-gradient(circle at 8% 12%,rgba(79,140,255,.10),transparent 26%),
    radial-gradient(circle at 91% 18%,rgba(124,92,255,.10),transparent 28%),
    linear-gradient(180deg,#fff 0%,#f9fbff 100%);
}
.hair-course-detail::before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  right:-180px;
  bottom:-260px;
  border:1px solid rgba(79,140,255,.10);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(124,92,255,.025),0 0 0 110px rgba(79,140,255,.018);
  pointer-events:none;
}
.hair-course-detail .detail-head{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:72px;
  align-items:end;
  margin-bottom:44px;
}
.hair-course-detail .detail-head .eyebrow{display:block;margin-bottom:14px}
.hair-course-detail .detail-head h2{
  margin:0;
  color:#17131d;
  font-size:3rem;
  line-height:1.02;
  letter-spacing:-.055em;
}
.hair-course-detail .detail-head h2 em{
  display:block;
  margin-top:6px;
  color:transparent;
  background:linear-gradient(90deg,#4f8cff 0%,#7c5cff 55%,#c24dff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  font-style:normal;
}
.hair-course-detail .detail-head p{
  max-width:690px;
  margin:0 0 5px;
  color:#736b7a;
  font-size:1.15rem;
  line-height:1.9;
  letter-spacing:-.025em;
}
.hair-course-tabs{
  position:relative;
  z-index:1;
  border:1px solid rgba(32,22,47,.08);
  border-radius:30px;
  background:rgba(255,255,255,.86);
  box-shadow:0 30px 80px rgba(60,78,130,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.hair-tab-nav{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:10px;
  border-bottom:1px solid rgba(32,22,47,.07);
}
.hair-tab-btn{
  position:relative;
  min-height:74px;
  border:0;
  border-radius:22px;
  background:transparent;
  color:#6e6875;
  font:inherit;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.hair-tab-btn:hover{background:#f7f9ff;color:#211927}
.hair-tab-btn.is-active{
  color:#fff;
  background:linear-gradient(115deg,#4f8cff 0%,#7c5cff 55%,#bd52ef 100%);
  box-shadow:0 14px 30px rgba(90,104,225,.25);
}
.hair-tab-btn strong{
  display:block;
  font-size:1.25rem;
  line-height:1.15;
  letter-spacing:-.035em;
}
.hair-tab-btn small{
  display:block;
  margin-top:7px;
  opacity:.68;
  font-size:.85rem;
  font-weight:800;
  letter-spacing:.09em;
}
.hair-tab-panel{display:none;padding:42px}
.hair-tab-panel.is-active{display:block;animation:hairTabIn .42s ease both}
@keyframes hairTabIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.hair-panel-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:24px;
}
.hair-panel-intro .course-no{
  display:block;
  margin-bottom:8px;
  color:var(--accent);
  font-size:.85rem;
  font-weight:900;
  letter-spacing:.13em;
}
.hair-panel-intro h3{
  margin:0;
  color:#17131d;
  font-size:2.25rem;
  line-height:1.05;
  letter-spacing:-.05em;
}
.hair-course-list{display:grid;gap:10px}
.hair-course-row{
  display:grid;
  grid-template-columns:68px minmax(180px,.82fr) minmax(240px,1.18fr) minmax(240px,1.3fr);
  gap:20px;
  align-items:center;
  min-height:96px;
  padding:18px 22px;
  border:1px solid rgba(37,28,50,.075);
  border-radius:20px;
  background:#fff;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.hair-course-row:hover{
  transform:translateY(-2px);
  border-color:rgba(79,140,255,.20);
  box-shadow:0 15px 34px rgba(60,78,130,.08);
}
.hair-course-row .row-no{
  display:flex;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:#eef4ff;
  color:var(--accent);
  font-size:1rem;
  font-weight:900;
}
.hair-course-row h4{
  margin:0;
  color:#201923;
  font-size:1rem;
  line-height:1.4;
  letter-spacing:-.035em;
}
.hair-course-row p{
  margin:0;
  color:#6f6976;
  font-size:1rem;
  line-height:1.6;
  letter-spacing:-.02em;
}
.hair-course-row .direction{color:#817987}

