html,body{margin:0;padding:0}
body.yj-certificate-home-v032{background:#f5f7f9;color:#172d3d;font-family:Arial,"Noto Sans KR","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased}
body.yj-certificate-home-v032 *{box-sizing:border-box}
body.yj-certificate-home-v032 a{text-decoration:none}

.yj-ch20-brand{background:#fff}
.yj-ch20-brand__inner{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:18px 0 14px}
.yj-ch20-brand__name{font-size:24px;line-height:1.1;font-weight:800;letter-spacing:-1px;color:#172d3d}
.yj-ch20-brand__en{margin-top:8px;font-size:7px;letter-spacing:1.7px;color:#738698}

.yj-ch20-brand__link{display:inline-block;color:inherit;text-decoration:none !important}
.yj-ch20-brand__link:hover .yj-ch20-brand__name,.yj-ch20-brand__link:focus .yj-ch20-brand__name{color:#1772b8}
.yj-ch20-brand__link:focus-visible{outline:2px solid #1772b8;outline-offset:4px}

.yj-ch20-page{width:min(1180px,calc(100% - 32px));margin:28px auto 40px}
.yj-ch20-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);gap:22px;align-items:start}

.yj-ch20-hero{height:355px;position:relative;overflow:hidden;background:#dbe3e9}
.yj-ch20-hero__slides,.yj-ch20-hero__slide{height:100%}
.yj-ch20-hero__slides{position:relative}
.yj-ch20-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.yj-ch20-hero__slide.is-active{opacity:1;pointer-events:auto;z-index:2}
.yj-ch20-hero__image{width:100%;height:100%;display:block;object-fit:cover}
.yj-ch20-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--yj-mask-r),var(--yj-mask-g),var(--yj-mask-b),calc(var(--yj-mask-opacity) * 1)) 0%,rgba(var(--yj-mask-r),var(--yj-mask-g),var(--yj-mask-b),calc(var(--yj-mask-opacity) * .82)) calc(var(--yj-mask-end) * .55),rgba(var(--yj-mask-r),var(--yj-mask-g),var(--yj-mask-b),calc(var(--yj-mask-opacity) * .24)) var(--yj-mask-end),rgba(var(--yj-mask-r),var(--yj-mask-g),var(--yj-mask-b),.02) 100%)}
.yj-ch20-hero__copy{position:absolute;left:48px;top:54px;width:390px;z-index:3}
.yj-ch20-hero__copy>span{font-size:11px;letter-spacing:1px;color:var(--yj-title-color)}
.yj-ch20-hero__copy h1{margin:18px 0 20px;font-size:35px;line-height:1.28;letter-spacing:-1.4px;color:var(--yj-title-color)}
.yj-ch20-hero__copy p{margin:0 0 26px;font-size:15px;line-height:1.75;color:var(--yj-desc-color)}
.yj-ch20-hero__copy>a{display:inline-flex;min-height:41px;align-items:center;border:1px solid var(--yj-button-color);padding:0 19px;color:var(--yj-button-color);font-size:13px;background:rgba(255,255,255,.42)}
.yj-ch20-hero__controls{position:absolute;left:16px;bottom:14px;z-index:6;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(0,0,0,.08)}
.yj-ch20-hero__arrow,.yj-ch20-hero__toggle,.yj-ch20-hero__dot{appearance:none;border:1px solid #cfd8e2;background:#fff;color:#163b68;cursor:pointer}
.yj-ch20-hero__arrow{width:38px;height:38px;border-radius:999px;font-size:25px;line-height:1}
.yj-ch20-hero__toggle{height:38px;border-radius:999px;padding:0 14px;font-size:13px;font-weight:700}
.yj-ch20-hero__dots{display:flex;align-items:center;gap:8px}
.yj-ch20-hero__dot{width:11px;height:11px;border-radius:50%;padding:0;background:#cfd8e2}
.yj-ch20-hero__dot.is-active{background:#163b68;border-color:#163b68}

.yj-ch20-side--top{display:grid;gap:14px}
.yj-ch20-notice,.yj-ch20-quick{background:#fff;border:1px solid #dfe6ec}
.yj-ch20-notice{height:220px;padding:15px 16px 10px}
.yj-ch20-section-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #e8edf1}
.yj-ch20-section-head h2{margin:0;font-size:18px;font-weight:500;letter-spacing:-.5px;color:#183044}
.yj-ch20-section-head>a{font-size:10px;color:#7d8d9b}
.yj-ch20-notice-list a{display:grid;grid-template-columns:30px minmax(0,1fr) 28px;gap:8px;align-items:center;min-height:33px;border-bottom:1px solid #edf1f4;color:#355064}
.yj-ch20-notice-list b{display:inline-flex;align-items:center;justify-content:center;height:18px;border-radius:3px;background:#eef5ff;color:#4180c7;font-size:9px;font-weight:600}
.yj-ch20-notice-list span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}
.yj-ch20-notice-list time{text-align:right;font-size:8px;color:#9aa7b2}

.yj-ch20-quick{height:108px;padding:10px 12px 12px}
.yj-ch20-quick h2{margin:0 0 9px;font-size:13px;font-weight:700;color:#233c50}
.yj-ch20-quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.yj-ch20-quick-grid a{height:62px;border-radius:6px;background:#f6f8fa;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#263d50;font-size:10px;gap:6px}
.yj-ch20-quick-grid a.is-point{background:#fff8e9}
.yj-ch20-quick-grid .ico{font-size:19px;color:#0aa8c8;line-height:1}
.yj-ch20-quick-grid a:nth-child(2) .ico{color:#1264ca}
.yj-ch20-quick-grid a:nth-child(3) .ico{color:#e59800}
.yj-ch20-quick-grid a:nth-child(4) .ico{color:#7853d7}
.yj-ch20-quick-grid strong{font-size:10px;font-weight:500}

.yj-ch20-grid--bottom{margin-top:28px}
.yj-ch20-title-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.yj-ch20-title-row h2{margin:0 0 6px;font-size:27px;line-height:1.1;letter-spacing:-1px;color:#102e43}
.yj-ch20-title-row p{margin:0;font-size:13px;color:#728391}
.yj-ch20-title-row>a{font-size:13px;color:#075b94;font-weight:600}
.yj-ch20-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.yj-ch20-card{min-width:0;background:#fff;border:1px solid #dbe3e8;display:flex;flex-direction:column;height:100%}
.yj-ch20-card__image{display:block;height:166px;overflow:hidden;background:#dce5eb}
.yj-ch20-card__image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .3s ease}
.yj-ch20-card:hover .yj-ch20-card__image img{transform:scale(1.025)}
.yj-ch20-card__body{padding:20px 19px 22px;min-height:245px;display:flex;flex:1;flex-direction:column}
.yj-ch20-card__body>span{align-self:flex-start;background:#eef8fb;color:#0875a3;font-size:10px;padding:6px 9px}
.yj-ch20-card__body h3{margin:14px 0 12px;min-height:54px;font-size:20px;line-height:1.35;letter-spacing:-.5px;color:#132f43;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yj-ch20-card__body p{margin:0;color:#647988;font-size:13px;line-height:1.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.yj-ch20-card__body>a{margin-top:auto;padding-top:22px;font-size:13px;font-weight:600;color:#0066a4}

.yj-ch20-promo{min-height:486px;background:linear-gradient(165deg,#0a5b88 0%,#158eb1 45%,#eef6f8 45.2%,#fff 100%);border:1px solid #dce5ea;overflow:hidden;position:relative}
.yj-ch20-promo__inner{padding:28px 25px;color:#fff;text-align:center}
.yj-ch20-promo__inner>span{font-size:9px;letter-spacing:1.3px;color:#dff6ff}
.yj-ch20-promo__inner h2{margin:12px 0 10px;font-size:29px;line-height:1.22;letter-spacing:-1px}
.yj-ch20-promo__inner>p{margin:0 auto 14px;max-width:260px;font-size:11px;line-height:1.55;color:#eafaff}
.yj-ch20-promo__medal{width:72px;height:72px;margin:18px auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ffc941;color:#fff;font-size:38px;border:7px solid rgba(255,255,255,.8);box-shadow:0 5px 16px rgba(0,0,0,.15)}
.yj-ch20-promo__inner ul{list-style:none;margin:0 -8px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px;color:#183b53}
.yj-ch20-promo__inner li{min-height:66px;padding:10px 5px;background:#fff;border:1px solid #dce7ed;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.yj-ch20-promo__inner li b{font-size:11px;color:#0c6d9b}
.yj-ch20-promo__inner li small{margin-top:5px;font-size:8px;color:#7d8c96}
.yj-ch20-promo__inner>a{display:block;margin-top:20px;color:#0a5d92;font-size:12px;font-weight:700}

.yj-ch20-grid--new{margin-top:28px}
.yj-ch20-newcourses{grid-column:1}
.yj-ch20-new-spacer{grid-column:2;min-height:1px}

@media(max-width:980px){
  .yj-ch20-grid{grid-template-columns:1fr}
  .yj-ch20-side--top{grid-template-columns:1.35fr 1fr}
  .yj-ch20-notice,.yj-ch20-quick{height:auto;min-height:130px}
  .yj-ch20-promo{min-height:360px}
  .yj-ch20-course-grid{grid-template-columns:repeat(3,minmax(200px,1fr));overflow-x:auto;padding-bottom:6px}
}
@media(max-width:720px){
  .yj-ch20-brand__inner,.yj-ch20-page{width:calc(100% - 22px)}
  .yj-ch20-page{margin-top:14px}
  .yj-ch20-hero{height:320px}
  .yj-ch20-hero__copy{left:24px;top:34px;width:76%}
  .yj-ch20-hero__copy h1{font-size:28px}
  .yj-ch20-hero__copy p{font-size:13px}
  .yj-ch20-side--top{grid-template-columns:1fr}
  .yj-ch20-quick{min-height:108px}
  .yj-ch20-title-row{align-items:flex-start;gap:12px}
  .yj-ch20-title-row h2{font-size:23px}
  .yj-ch20-title-row p{font-size:12px}
  .yj-ch20-course-grid{grid-template-columns:1fr;overflow:visible}
  .yj-ch20-card__image{height:210px}
  .yj-ch20-hero__controls{left:12px;right:12px;justify-content:flex-start;flex-wrap:wrap;border-radius:16px}
}
@supports not (background:color-mix(in srgb,#fff 50%,transparent)){
  .yj-ch20-hero__shade{background:linear-gradient(90deg,rgba(238,242,247,.92) 0%,rgba(238,242,247,.72) 34%,rgba(238,242,247,.20) 70%,rgba(238,242,247,.02) 100%)}
}

/* v0.3.3 중앙배너 슬라이더 보정 */
.yj-ci32-hero-slider{position:relative;isolation:isolate}
.yj-ci32-hero-slides{position:relative;width:100%;height:100%}
.yj-ci32-hero-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease, visibility .35s ease}
.yj-ci32-hero-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.yj-ci32-hero-slide .yj-ch20-hero__image{position:absolute;inset:0;width:100%;height:100%}
.yj-ci32-hero-slide .yj-ch20-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,242,247,calc(var(--yj-mask-strength,81) / 100)) 0%,rgba(238,242,247,calc(var(--yj-mask-strength,81) / 100)) 18%,rgba(238,242,247,calc((var(--yj-mask-strength,81) * .80) / 100)) 38%,rgba(238,242,247,0.16) var(--yj-mask-end,55%),rgba(238,242,247,0.03) 100%);background:linear-gradient(90deg,color-mix(in srgb, var(--yj-mask-color,#eef2f7) calc(var(--yj-mask-strength,81) * 1%), transparent) 0%, color-mix(in srgb, var(--yj-mask-color,#eef2f7) calc(var(--yj-mask-strength,81) * .92%), transparent) 20%, color-mix(in srgb, var(--yj-mask-color,#eef2f7) calc(var(--yj-mask-strength,81) * .74%), transparent) 40%, color-mix(in srgb, var(--yj-mask-color,#eef2f7) 18%, transparent) var(--yj-mask-end,55%), transparent 100%)}
.yj-ci32-hero-slide .yj-ch20-hero__copy{z-index:2}
.yj-ci32-hero-slide .yj-ch20-hero__copy h1{color:var(--yj-title-color,#0b3157)}
.yj-ci32-hero-slide .yj-ch20-hero__copy p{color:var(--yj-desc-color,#324e67)}
.yj-ci32-hero-slide .yj-ch20-hero__copy>a{color:var(--yj-button-color,#124a76);border-color:color-mix(in srgb, var(--yj-button-color,#124a76) 62%, white 38%)}
.yj-ci32-hero-slide .yj-ch20-hero__copy>a:hover{background:rgba(255,255,255,.62)}
.yj-ci32-hero-dots{position:absolute;left:28px;bottom:18px;display:flex;align-items:center;gap:8px;z-index:5;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.84);backdrop-filter:blur(4px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.yj-ci32-hero-dot{width:10px;height:10px;border:0;border-radius:50%;padding:0;cursor:pointer;background:#c7d2dc}
.yj-ci32-hero-dot.is-active{background:#0f4c81}
.yj-ci32-hero-dot:focus-visible{outline:2px solid #0f4c81;outline-offset:2px}
@supports not (color: color-mix(in srgb, white 50%, black 50%)){
  .yj-ci32-hero-slide .yj-ch20-hero__shade{background:linear-gradient(90deg,rgba(238,242,247,.88) 0%,rgba(238,242,247,.78) 34%,rgba(238,242,247,.22) 70%,rgba(238,242,247,.04) 100%)}
}
@media(max-width:720px){
  .yj-ci32-hero-dots{left:18px;bottom:14px}
}

/* v0.3.4 마스킹 계산 보정: CSS 내부 곱셈/퍼센트 중복 제거 */
.yj-ci32-hero-slider .yj-ci32-hero-slide .yj-ch20-hero__shade{
  background:linear-gradient(
    90deg,
    rgba(var(--yj-mask-r,238),var(--yj-mask-g,242),var(--yj-mask-b,247),var(--yj-mask-a1,.81)) 0%,
    rgba(var(--yj-mask-r,238),var(--yj-mask-g,242),var(--yj-mask-b,247),var(--yj-mask-a2,.664)) var(--yj-mask-mid,30.3%),
    rgba(var(--yj-mask-r,238),var(--yj-mask-g,242),var(--yj-mask-b,247),var(--yj-mask-a3,.194)) var(--yj-mask-end,55%),
    rgba(var(--yj-mask-r,238),var(--yj-mask-g,242),var(--yj-mask-b,247),.02) 100%
  ) !important;
}

/* v0.3.6 마스킹 고정 보강: 최종 gradient는 템플릿 inline style에서 직접 적용 */
.yj-ci32-hero-slide .yj-ch20-hero__image{z-index:0}
.yj-ci32-hero-slide .yj-ch20-hero__shade{display:block!important;opacity:1!important;visibility:visible!important;pointer-events:none!important;z-index:1!important}
.yj-ci32-hero-slide .yj-ch20-hero__copy{z-index:2!important}