/* ══════════════════════════════════════════════════════
   보육교사 과정 랜딩 — childcare.css
   블러 배경 · 모노톤 · 넉넉한 간격 · 7개 섹션
   ══════════════════════════════════════════════════════ */

:root{
    --cc-text:#1a1a1a;
    --cc-muted:#555;
    --cc-light:#888;
    --cc-bg:#f5f5f5;
    --cc-surface:#ffffff;
    --cc-blue:#1e3a6e;
    --cc-radius:14px;
    --cc-shadow:0 4px 20px rgba(0,0,0,.08);
}

/* ═══════════════════════════════════════════
   1. HERO — 블러 배경 + 전체 콘텐츠
   ═══════════════════════════════════════════ */
.cc-hero{
    position:relative;
    background-size:cover;
    background-position:center;
    background-color:#444;
    overflow:hidden;
}
.cc-hero__overlay{
    /* position:absolute; */
    inset:0;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,.15);
}
.cc-hero__inner{
    position:relative;
    z-index:1;
    max-width:780px;
    margin:0 auto;
    padding:110px 24px 80px;
    width:100%;
}

/* ── 타이틀 뱃지 (검정 pill) ── */
.cc-hero__head{
    text-align:center;
    margin-bottom:48px;
}
.cc-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    background:#111;
    color:#fff;
    padding:16px 36px;
    border-radius:40px;
    font-size:26px;
    font-weight:800;
    letter-spacing:-.01em;
}
.cc-hero__badge-icon{
    width:32px;height:32px;
    flex-shrink:0;
    color:#fff;
}
.cc-hero__badge-icon svg{width:100%;height:100%}
.cc-hero__title{
    position:absolute;width:1px;height:1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}

/* ═══════════════════════════════════════════
   카드 그리드
   ═══════════════════════════════════════════ */
.cc-cards{display:grid;gap:24px;margin-bottom:32px}
.cc-cards--2col{grid-template-columns:repeat(2,1fr)}

.cc-card{
    background:rgba(255,255,255,.93);
    border-radius:var(--cc-radius);
    padding:36px 30px 30px;
    text-align:center;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
    transition:transform .2s,box-shadow .2s;
}
.cc-card:hover{transform:translateY(-3px);box-shadow:var(--cc-shadow)}

.cc-card__icon{
    width:193px;
    margin:0 auto 18px;
    color:var(--cc-text);
}
.cc-card__icon svg{width:100%;height:100%}
.cc-card__icon img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.cc-card__title{
    font-size:21px;font-weight:800;color:var(--cc-text);
    margin-bottom:12px;
}
.cc-card__desc{
    font-size:16px;font-weight:600;color:var(--cc-text);
    line-height:1.6;margin:0 0 6px;
}
.cc-card__sub{
    font-size:14px;color:var(--cc-muted);
    line-height:1.55;margin:10px;
}
.cc-card__list{
    list-style:none;padding:0;margin:0;
    text-align:left;
}
.cc-card__list li{
    font-size:15px;color:var(--cc-muted);
    padding:6px 0 6px 20px;
    position:relative;line-height:1.6;
}
.cc-card__list li::before{
    content:'';position:absolute;left:0;top:14px;
    width:6px;height:6px;border-radius:50%;
    background:var(--cc-blue);opacity:.5;
}

/* ═══════════════════════════════════════════
   정보 박스 (공통) — 장애영유아, 1급, 비전
   ═══════════════════════════════════════════ */
.cc-info-box{
    background:rgba(255,255,255,.93);
    border-radius:var(--cc-radius);
    padding:40px 36px;
    text-align:center;
    margin-bottom:28px;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
}
.cc-info-box__icon{
    width:44px;height:44px;
    margin:0 auto 12px;
    color:var(--cc-blue);
}
.cc-info-box__icon svg{width:100%;height:100%}
.cc-info-box__title{
    font-size:24px;font-weight:800;color:var(--cc-text);
    margin-bottom:10px;
}
.cc-info-box__sub{
    font-size:16px;color:var(--cc-muted);margin:0 0 22px;
}
.cc-info-box__desc{
    font-size:17px;color:var(--cc-muted);
    line-height:1.75;margin:20px 0 0;
}
.cc-info-box__note{
    font-size:14px;color:var(--cc-light);
    line-height:1.65;margin:20px 0 0;
}

/* ── Pill 뱃지 (파랑) ── */
.cc-pill{
    display:inline-block;
    padding:12px 32px;
    border-radius:30px;
    font-size:19px;font-weight:700;
}
.cc-pill--blue{
    background:var(--cc-blue);
    color:#fff;
}

/* ── 승급 경로 (A, B) ── */
.cc-paths{
    display:flex;flex-direction:column;
    gap:14px;text-align:left;
    max-width:540px;margin:0 auto;
}
.cc-path{
    display:flex;align-items:flex-start;gap:14px;
    font-size:16px;color:var(--cc-text);line-height:1.6;
}
.cc-path__label{
    flex-shrink:0;
    width:30px;height:30px;
    border-radius:50%;
    background:var(--cc-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:14px;font-weight:800;
}
.cc-path__text{flex:1;padding-top:3px}

/* ── 비전 아이템 ── */
.cc-vision-items{
    display:flex;align-items:center;justify-content:center;
    gap:18px;margin:28px 0 20px;
}
.cc-vision-items__plus{
    font-size:28px;font-weight:700;color:var(--cc-blue);
}
.cc-vision-item{
    background:rgba(30,58,110,.06);
    border-radius:12px;padding:22px 32px;
    text-align:center;
}
.cc-vision-item__title{
    font-size:18px;font-weight:700;color:var(--cc-text);
    margin-bottom:4px;
}
.cc-vision-item__sub{
    font-size:17px;font-weight:800;color:var(--cc-blue);
}

/* ── 태그 이미지 카드 ── */
.cc-tags{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:18px;margin-top:28px;
}
.cc-tag-card{
    text-align:center;
    background:rgba(255,255,255,.93);
    border-radius:var(--cc-radius);
    padding:18px 14px 20px;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.cc-tag-card__img{
    width:100%;
    aspect-ratio:1;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:14px;
    background:#eee;
}
.cc-tag-card__img img{
    width:100%;height:100%;
    object-fit:cover;display:block;
}
.cc-tag-card__label{
    font-size:15px;font-weight:700;
    color:var(--cc-text);
}

/* ═══════════════════════════════════════════
   비전 & 전망 섹션 — 별도 배경
   ═══════════════════════════════════════════ */
.cc-vision-section{
    position:relative;
    background-size:cover;
    background-position:center;
    background-color:#444;
    overflow:hidden;
}
.cc-vision-section__overlay{
    /* position:absolute; */
    inset:0;
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    background:rgba(0,0,0,.15);
}
.cc-vision-section__inner{
    position:relative;z-index:1;
    max-width:780px;
    margin:0 auto;
    padding:72px 24px;
    width:100%;
    text-align:center;
}
.cc-vision-section__inner>.cc-pill{
    margin-bottom:28px;
}
.cc-vision-section .cc-info-box--vision{
    margin-bottom:0;
}

/* ═══════════════════════════════════════════
   2. 상담 가이드
   ═══════════════════════════════════════════ */
.cc-guide{
    background:var(--cc-bg);
    padding:36px 0 56px;
}
.cc-guide__inner{
    max-width:820px;margin:0 auto;padding:0 20px;
}
.cc-guide__title{
    font-size:26px;font-weight:800;color:var(--cc-text);
    text-align:center;margin:0 0 36px;
}
.cc-guide__steps{
    display:flex;align-items:flex-start;
    justify-content:center;gap:0;
}
.cc-step{
    flex:1;text-align:center;
    max-width:170px;
}
.cc-step__num{
    width:48px;height:48px;
    border-radius:50%;
    background:var(--cc-blue);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:800;
    margin:0 auto 14px;
}
.cc-step__title{
    font-size:16px;font-weight:700;color:var(--cc-text);
    margin-bottom:5px;
}
.cc-step__desc{
    font-size:14px;color:var(--cc-light);
}
.cc-step__arrow{
    display:flex;align-items:center;
    padding-top:12px;
    font-size:22px;color:var(--cc-light);
    flex-shrink:0;
    margin:0 6px;
}

/* ═══════════════════════════════════════════
   4. 수강후기
   ═══════════════════════════════════════════ */
.cc-reviews{
    background:#fff;
}
.cc-reviews__inner{
    max-width:1510px;margin:0 auto;
    padding:72px 20px 80px;
}
.cc-reviews__title{
    font-size:30px;font-weight:800;color:var(--cc-text);
    text-align:center;margin:0 0 44px;
}
.cc-reviews__grid{
    display:grid;grid-template-columns:repeat(5,1fr);
    gap:25px;
}

.cc-review{
    background:var(--cc-bg);
    border-radius:var(--cc-radius);
    overflow:hidden;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.cc-review__img{
    width:100%;height:170px;overflow:hidden;
    background:#eee;
}
.cc-review__img img{
    width:100%;height:100%;object-fit:cover;display:block;
}
.cc-review__body{padding:22px}
.cc-review__stars{
    display:flex;gap:2px;margin-bottom:12px;
}
.cc-review__stars svg{width:18px;height:18px}
.cc-review__name{
    font-size:16px;font-weight:700;color:var(--cc-text);
    margin-bottom:10px;
}
.cc-review__course{
    font-size:14px;font-weight:400;color:var(--cc-light);
    margin-left:6px;
}
.cc-review__text{
    font-size:15px;color:var(--cc-muted);
    line-height:1.7;margin:0;
}

/* ═══════════════════════════════════════════
   반응형
   ═══════════════════════════════════════════ */
@media(max-width:768px){
    .cc-hero__inner{padding:90px 16px 60px}
    .cc-hero__badge{font-size:21px;padding:14px 28px}
    .cc-hero__badge-icon{width:26px;height:26px}
    .cc-hero__head{margin-bottom:36px}

    .cc-cards{gap:16px;margin-bottom:24px}
    .cc-cards--2col{grid-template-columns:1fr}
    .cc-card{padding:30px 24px 26px}
    .cc-card__title{font-size:19px}
    .cc-card__list li{font-size:14px}

    .cc-info-box{padding:32px 24px;margin-bottom:22px}
    .cc-info-box__title{font-size:21px}
    .cc-info-box__desc{font-size:16px}
    .cc-pill{font-size:16px;padding:10px 26px}

    .cc-vision-items{flex-direction:column;gap:12px}
    .cc-vision-items__plus{font-size:22px}
    .cc-vision-item__title{font-size:16px}
    .cc-vision-item__sub{font-size:15px}

    .cc-tags{grid-template-columns:repeat(2,1fr);gap:14px}
    .cc-tag-card{padding:14px 12px 16px}
    .cc-tag-card__label{font-size:14px}

    .cc-vision-section__inner{padding:52px 16px}

    .cc-guide__title{font-size:22px}
    .cc-guide__steps{flex-wrap:wrap;gap:14px}
    .cc-step__arrow{display:none}
    .cc-step__title{font-size:15px}
    .cc-step__desc{font-size:13px}

    .cc-reviews__title{font-size:24px}
    .cc-reviews__grid{grid-template-columns:repeat(2,1fr)}
    .cc-reviews__inner{padding:52px 16px 60px}
    .cc-review__name{font-size:15px}
    .cc-review__text{font-size:14px}
}
/* ═══════════════════════════════════════════
   스크롤 애니메이션
   ═══════════════════════════════════════════ */
@-webkit-keyframes ccFadeUp{
    from{opacity:0;-webkit-transform:translateY(32px);transform:translateY(32px)}
    to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes ccFadeUp{
    from{opacity:0;transform:translateY(32px)}
    to{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes ccFadeIn{
    from{opacity:0;-webkit-transform:scale(.96);transform:scale(.96)}
    to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes ccFadeIn{
    from{opacity:0;transform:scale(.96)}
    to{opacity:1;transform:scale(1)}
}
@-webkit-keyframes ccSlideLeft{
    from{opacity:0;-webkit-transform:translateX(-24px);transform:translateX(-24px)}
    to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes ccSlideLeft{
    from{opacity:0;transform:translateX(-24px)}
    to{opacity:1;transform:translateX(0)}
}
@-webkit-keyframes ccSlideRight{
    from{opacity:0;-webkit-transform:translateX(24px);transform:translateX(24px)}
    to{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes ccSlideRight{
    from{opacity:0;transform:translateX(24px)}
    to{opacity:1;transform:translateX(0)}
}

/* 대기 상태 (JS가 .cc-anim--visible 추가하면 실행) */
[data-animate]{
    opacity:0;
}
[data-animate].cc-anim--visible{
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-timing-function:cubic-bezier(.22,1,.36,1);
    animation-timing-function:cubic-bezier(.22,1,.36,1);
}
[data-animate="fade-up"].cc-anim--visible{
    -webkit-animation-name:ccFadeUp;
    animation-name:ccFadeUp;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
}
[data-animate="fade-in"].cc-anim--visible{
    -webkit-animation-name:ccFadeIn;
    animation-name:ccFadeIn;
    -webkit-animation-duration:.6s;
    animation-duration:.6s;
}
[data-animate="slide-left"].cc-anim--visible{
    -webkit-animation-name:ccSlideLeft;
    animation-name:ccSlideLeft;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
}
[data-animate="slide-right"].cc-anim--visible{
    -webkit-animation-name:ccSlideRight;
    animation-name:ccSlideRight;
    -webkit-animation-duration:.7s;
    animation-duration:.7s;
}

/* 접근성: 모션 감소 설정 시 애니메이션 비활성화 */
@media(prefers-reduced-motion:reduce){
    [data-animate]{opacity:1 !important;-webkit-animation:none !important;animation:none !important}
}

@media(max-width:480px){
    .cc-hero__badge{font-size:19px;padding:12px 24px}
    .cc-card__title{font-size:18px}
    .cc-info-box__title{font-size:20px}
    .cc-paths{gap:12px}
    .cc-path{font-size:14px}
    .cc-step{max-width:140px}
    .cc-tags{gap:12px}
    .cc-tag-card__img{border-radius:10px}
    .cc-tag-card__label{font-size:13px}
    .cc-faq__q{font-size:15px;padding:18px 40px 18px 20px}
    .cc-faq__a{font-size:14px;padding:0 20px 18px}
}

/* ═══════════════════════════════════════════
   sr-only (접근성 숨김 텍스트)
   ═══════════════════════════════════════════ */
.sr-only{
    position:absolute;width:1px;height:1px;
    padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ═══════════════════════════════════════════
   H1 서브타이틀
   ═══════════════════════════════════════════ */
.cc-hero__title-sub{
    display:block;
    font-size:.5em;
    font-weight:500;
    opacity:.85;
    margin-top:8px;
}

/* ═══════════════════════════════════════════
   h2, h3 태그 리셋 (시맨틱 마크업용)
   ═══════════════════════════════════════════ */
/* h2/h3 시맨틱 변환 – 브라우저 기본 margin만 제거, 기존 컴포넌트 스타일 유지 */
h2.cc-info-box__title{margin:0;font-size:22px;font-weight:800;color:var(--cc-text)}
h2.cc-pill{margin:0}
h2.cc-faq__title{margin:0 0 40px}
h2.cc-guide__title{margin:0}
h3.cc-card__title{margin:0 0 12px;font-size:21px;font-weight:800;color:var(--cc-text)}

/* ═══════════════════════════════════════════
   FAQ 섹션
   ═══════════════════════════════════════════ */
.cc-faq{
    padding:80px 24px;
    background:var(--cc-bg, #f5f5f5);
}
.cc-faq__inner{
    max-width:780px;
    margin:0 auto;
}
.cc-faq__title{
    font-size:26px;
    font-weight:800;
    color:var(--cc-text);
    text-align:center;
    margin:0 0 40px;
}
.cc-faq__list{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.cc-faq__item{
    background:var(--cc-surface, #fff);
    border-radius:var(--cc-radius, 14px);
    box-shadow:0 2px 12px rgba(0,0,0,.05);
    overflow:hidden;
}
.cc-faq__q{
    font-size:17px;
    font-weight:700;
    color:var(--cc-text);
    padding:22px 48px 22px 24px;
    cursor:pointer;
    list-style:none;
    position:relative;
    line-height:1.5;
}
.cc-faq__q::-webkit-details-marker{display:none}
.cc-faq__q::marker{display:none;content:''}
.cc-faq__q::after{
    content:'';
    position:absolute;
    right:20px;
    top:50%;
    width:10px;height:10px;
    border-right:2.5px solid var(--cc-muted, #555);
    border-bottom:2.5px solid var(--cc-muted, #555);
    transform:translateY(-65%) rotate(45deg);
    transition:transform .25s ease;
}
details.cc-faq__item[open] .cc-faq__q::after{
    transform:translateY(-35%) rotate(-135deg);
}
.cc-faq__a{
    font-size:15px;
    line-height:1.75;
    color:var(--cc-muted, #555);
    padding:0 24px 22px;
}

/* ═══════════════════════════════════════════
   다른 과정 안내 (내부 링크)
   ═══════════════════════════════════════════ */
.cc-related{
    padding:48px 24px;
    background:var(--cc-surface, #fff);
}
.cc-related__inner{
    max-width:780px;
    margin:0 auto;
}
.cc-related__card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:28px 32px;
    background:linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
    border:1px solid rgba(30,58,110,.1);
    border-radius:var(--cc-radius, 14px);
    text-decoration:none;
    color:inherit;
    transition:transform .2s, box-shadow .2s;
}
.cc-related__card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(30,58,110,.12);
}
.cc-related__label{
    font-size:13px;
    font-weight:600;
    color:var(--cc-blue, #1e3a6e);
    text-transform:uppercase;
    letter-spacing:.5px;
    margin-bottom:6px;
}
.cc-related__title{
    font-size:20px;
    font-weight:800;
    color:var(--cc-text, #1a1a1a);
    margin-bottom:6px;
}
.cc-related__desc{
    font-size:14px;
    color:var(--cc-muted, #555);
    line-height:1.5;
    margin:0;
}
.cc-related__arrow{
    font-size:28px;
    color:var(--cc-blue, #1e3a6e);
    flex-shrink:0;
    transition:transform .2s;
}
.cc-related__card:hover .cc-related__arrow{
    transform:translateX(4px);
}
@media(max-width:480px){
    .cc-related__card{padding:22px 20px;flex-direction:column;text-align:center}
    .cc-related__arrow{display:none}
    .cc-related__title{font-size:18px}
}