/* 코딩페이지 추가건 2025-07-15 */

.padding-top-200 {
    padding-top: 200px;
}

.padding-top-240{padding-top:240px;}
.padding-top-140{padding-top:140px;}
.margin-top-150 { margin-top:150px;}
.margin-top-50 { margin-top:50px;}

.kcpa_bg01 {
	 width: 100%;
    position: relative;
    background-color: #f5e3d7;
    z-index: 9;
    background-image: url("../img/kcpa/kcpa_back.png");
    background-repeat: no-repeat;
    background-position: right -30px top 100px; /* ★ 상단 기준 + 자연스러운 오프셋 */
    background-size: auto;
    overflow: visible;
}

.kcpa_bg01 .container {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}

.kcpa-visual {
	display: flex;
    align-items: center;      /* 세로 가운데 정렬 */
    justify-content: center;  /* 전체를 가운데로 */
    position: relative;
}

.kcpa-title{
	color: #f8786b;
    font-size: 60px;
	font-weight: 600;
}

.kcpa_bubble {
    margin-top: 20px; /* 숫자만 조정하면 됨 */
	margin-left:30px;
}

.kcpa-desc{
	color: #f8786b;
	font-size: 18px;	
	margin-top: 30px;
	margin-bottom: 30px;
}
.kcpa-left {
	flex: 0 0 420px;      /* 텍스트 영역 넓이 (대략) */
    position: relative;
    z-index: 5;
    margin-right: -80px;  /* ★ 사람 쪽으로 겹치게 밀어넣기 */
    text-align: left;
}

.kcpa-right {
   flex: 0 0 895px;   /* ★ 여자+파란원 이미지 실제 너비 */
    position: relative;
    text-align: right;
    z-index: 3;
    flex-shrink: 0;    /* 크기 줄어들지 않게 */
}

/* 사람 이미지 (기본 사진) */
.kcpa_girl {
    display: block;
    width: 708px;      /* 원본 사이즈 유지 */
    max-width: none;   /* bootstrap 영향 제거 */
    height: auto;
    margin-left: auto; /* 오른쪽 끝으로 붙이기 */
}

.kcpa-btn {
    border-radius: 50px!important;
	padding-left: 20px;
	padding-right: 20px;
    border: 0;
    background-color: #f8786b;
    font-size: 16px;
    color: #ffffff;
}

 .kcpa-btn:hover {
        background-color: #ffffff;
		color: #f8786b;
      }

/* 모든 데코 이미지 공통 */
.kcpa_deco {
  position: absolute;
  z-index: 20;  /* 사람 이미지보다 위 */
  pointer-events: none;
	
	 width: auto;      /* 강제 크기 제거 */
    height: auto;     /* 원본 유지 */
    max-width: none;  /* Bootstrap 영향 제거 */
}

/* 풍차 */
.kcpa_03 {
	top: -160px;
	right: 120px;
	opacity: 0;  /* 처음에는 안 보이게 */
  animation: hatDrop 1.2s ease-out 0.8s forwards; 
  /* 1.2초 동안, 0.8초 뒤에 시작, 한 번만 실행(forwards로 마지막 상태 유지) */
}

/* 흰별 */
.kcpa_06 {
	top: 140px;
	right: 180px;
	opacity: 0;  /* 처음에는 안 보이게 */
  animation: starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
}

@keyframes hatDrop {
  0% {
    opacity: 0;
    transform: translateY(-60px); /* 더 위에서 시작 */
  }
  60% {
    opacity: 1;
    transform: translateY(10px);  /* 살짝 튕기는 느낌 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}



/* 전구 */
.kcpa_04 {
	top: 30px;
	right: 400px;
	opacity: 0;  /* 처음에는 안 보이게 */
  animation: starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
}

/* 크기 변화 애니메이션 (작아졌다가 커지는 모션) */
@keyframes bulbBlink {
    0%   { transform: scale(1); }     /* 원래 크기 */
    50%  { transform: scale(0.9); }   /* 살짝 작아짐 */
    100% { transform: scale(1); }     /* 원래 크기로 돌아옴 */
}

.kcpa-plane-orbit {
    position: absolute;
    top: 500px;   /* ★ 아이 중앙에 맞춰 조정해야 하는 값 */
    left: 500px;  /* ★ 이것도 맞춰줘야 함 */
    width: 0;
    height: 0;

       /* 회전 + 투명도 애니메이션 동시 적용 */
    animation: planeOrbit 12s linear infinite,
               planeFadeInOut 12s ease-in-out infinite;
}



/* 비행기 */
.kcpa_05 {	
	transform-origin: center center;
    transform: translateX(420px) rotate(0deg);
    /* 160px = 궤도 반지름 (비행기와 아이 사이 거리) */
}

@keyframes planeOrbit {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* 서서히 나타났다 → 있다가 → 서서히 사라지는 패턴 */
@keyframes planeFadeInOut {
    0% {
        opacity: 0;     /* 완전 투명 */
    }
    20% {
        opacity: 1;     /* 서서히 나타나서 100% */
    }
    70% {
        opacity: 1;     /* 한동안 완전히 보이는 상태 유지 */
    }
    100% {
        opacity: 0;     /* 다시 서서히 사라짐 → 다음 사이클 준비 */
    }
}

/* 별(손가락) */
.kcpa_07 {
	top: 8px;
	right: 570px;
	animation: starFloat 2s ease-in-out infinite,
             starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
}

/* 반짝일 때 크기 변화와 투명도 */
@keyframes starBlink {
  0%   { opacity: 0.4; transform: scale(0.5); } /* 작게 시작 */
  50%  { opacity: 1; transform: scale(1); } /* 크게 확대 */
  100% { opacity: 0.4; transform: scale(0.5); } /* 다시 작아짐 */
}

/* 둥둥 떠다니는 효과 */
@keyframes starFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); } /* 위로 6px 부드럽게 */
  100% { transform: translateY(0); }
}


/* 노란별 */
.kcpa_08 {
	top: 400px;
	left: 750px;
	width: auto;
    height: auto;
  opacity: 0;  /* 처음에는 안 보이게 */
  animation: starBlink 1.5s ease-in-out infinite;  /* 크기 변하면서 반짝임 */
	
}


/* 아래에서 위로 그려지고 → 멈춘 후 반복 */
@keyframes drawOnlyReverse {

  /* 시작: 완전 감춤 (아래에서 위로 그릴 준비) */
  0% {
    clip-path: inset(0 0 100% 0); /* 아래 빼고 다 가림 */
    transform: translateX(0) rotate(0deg);
  }

  /* 그려지는 중간 구간 (아래 → 중간) */
  20% {
    clip-path: inset(0 0 75% 0);
    transform: translateX(1px) rotate(1deg);
  }

  40% {
    clip-path: inset(0 0 40% 0);
    transform: translateX(-1px) rotate(-1deg);
  }

  /* 완성 */
  60% { 
    clip-path: inset(0 0 0 0);
    transform: translateX(0.5px) rotate(0.5deg);
  }

  /* 완성된 상태 유지 (멈추는 구간) */
  80% {
    clip-path: inset(0 0 0 0);
    transform: translateX(0) rotate(0deg);
  }

  /* 다시 아래에서부터 시작하는 상태로 리셋 */
  100% {
    clip-path: inset(0 0 100% 0);
    transform: translateX(0) rotate(0deg);
  }
}


/* 연필+구름 */
.kcpa_11 {
	top: 800px;
	left: 180px;}



/* 말풍선+별 */
.kcpa_12 {
	top: 180px;
	left: -420px;
	animation: bubbleFloat 1.8s ease-in-out infinite;
    transform-origin: center center;
}

/* 둥둥 움직임 (위아래로 천천히 떠다님) */
@keyframes bubbleFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); } /* 위로 8px 떠오르기 */
    100% { transform: translateY(0); }    /* 다시 원래 위치로 돌아옴 */
}


/* 흰전구 */
.kcpa_13 {
    top: 650px;
    left: 90px;
    position: absolute; /* 이미지의 위치를 절대적으로 설정 */
    animation: bulbBlink1 2.5s ease-in-out infinite; /* 애니메이션 설정 */
    z-index: 1;  /* 다른 요소들보다 위에 표시되도록 */
}

/* 색깔 변환 애니메이션 */
@keyframes bulbBlink1 {
    0%   { filter: brightness(1) sepia(0) saturate(1) hue-rotate(0deg); }   /* 흰색 */
    50%  { filter: brightness(1) sepia(1) saturate(30) hue-rotate(0deg); }  /* 노란색 */
    100% { filter: brightness(1) sepia(0) saturate(1) hue-rotate(0deg); }   /* 흰색 */
}

/* 얼굴 해 */
.kcpa_14 {
	top: 220px;
	left: 570px;
}

@keyframes spin-reverse-fade {
  0% {
    transform: rotate(0deg);
    opacity: 0.4;
  }
  25% {
    transform: rotate(-90deg); /* 시계 반대 방향 */
    opacity: 1;
  }
  50% {
    transform: rotate(-180deg);
    opacity: 0.6;
  }
  75% {
    transform: rotate(-270deg);
    opacity: 1;
  }
  100% {
    transform: rotate(-360deg);
    opacity: 0.4;
  }
}

.spin-reverse-fade {
  animation: spin-reverse-fade 8s linear infinite;
  animation-delay: 1.2s;  /* kcpa_05와 시간차 */
  transform-origin: center center; 
}


/* 손가락 옆 책 */
.kcpa_16 {
	top: -30px;
	left: -90px;
	/* 3가지 애니메이션 동시 실행 */
   animation: floatY 1.0s ease-in-out infinite,
               floatX 2.0s ease-in-out infinite,/* 좌우 흔들림을 더 빠르게 */
               tiltRotate 1.0s ease-in-out infinite;
    transform-origin: center center;
}

/* 위아래 크게 떠다니기 */
@keyframes floatY {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-250px); }  /* 떠오르는 높이 */
    100% { transform: translateY(0); }
}

/* 좌우로 부드럽게 흔들리기 */
@keyframes floatX {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(50px); }  /* 좌우 흔들림 폭 */
    100% { transform: translateX(0); }
}

/* 살짝 회전(tilt) */
@keyframes tiltRotate {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(8deg); }  /* 살짝 기울어짐 */
    100% { transform: rotate(0deg); }
}




@media (max-width: 768px) {
    .container {
        padding: 0 16px;
    }
	.img-fluid {
    max-width: 100%;
    height: auto;
}
	
}

/* ==========================================
   검사 안내 카드 섹션 (2026-08-26 추가)
========================================== */

.kcpa-card-section {
    padding: 80px 0 100px;
    background-color: #ffffff;
    font-family: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

.kcpa-card-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.kcpa-card-notice {
    text-align: right;
    font-size: 16px;
    color: #666666;
    margin-bottom: 50px;
    font-weight: 500;
}

.kcpa-card-wrapper {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.kcpa-card {
    flex: 1;
    max-width: 560px;
    position: relative;
    border-radius: 40px;
    padding: 80px 40px 50px 45px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* 카드별 배경색 및 테두리 */
.kcpa-card.kcpa-card-blue {
    background-color: #eef6ff;
}

.kcpa-card.kcpa-card-pink {
    background-color: #ffeef2;
}

/* 카드 헤더 공통 */
.kcpa-card .kcpa-card-header {
    position: absolute;
    top: -30px;
    left: 0;
    padding: 18px 45px 18px 35px;
    box-sizing: border-box;
}

.kcpa-card .kcpa-card-header h3 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.5px;
}

/* 카드 헤더 개별 스타일 (둥근 모서리 곡률) */
.kcpa-card.kcpa-card-blue .kcpa-card-header {
    background-color: #478df5;
    border-radius: 35px 35px 35px 0;
}

.kcpa-card.kcpa-card-pink .kcpa-card-header {
    background-color: #e35a8f;
    border-radius: 35px 35px 35px 0;
}

/* 본문 스타일 */
.kcpa-card .kcpa-card-body {
    width: 100%;
}

.kcpa-card .kcpa-card-intro {
    font-size: 18px;
    line-height: 1.65;
    color: #222222;
    margin-bottom: 25px;
    font-weight: 500;
    word-break: keep-all;
}

.kcpa-card .kcpa-card-desc {
    font-size: 16px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 40px;
    font-weight: 400;
    word-break: keep-all;
}

/* 본문 텍스트 강조 색상 */
.kcpa-card.kcpa-card-blue .kcpa-highlight-blue {
    color: #478df5;
    font-weight: 600;
}

.kcpa-card.kcpa-card-pink .kcpa-highlight-pink {
    color: #e35a8f;
    font-weight: 600;
}

/* 체크리스트 스타일 */
.kcpa-card .kcpa-card-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.08);
    padding-top: 30px;
}

.kcpa-card .kcpa-card-info-list li {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 14px;
    color: #333333;
    display: flex;
    align-items: flex-start;
}

.kcpa-card .kcpa-card-info-list li:last-child {
    margin-bottom: 0;
}

/* 체크 아이콘 (주황색/다홍색 테두리+체크 커스텀 SVG) */
.kcpa-card .kcpa-card-info-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f95b54' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.kcpa-card .kcpa-card-info-list .kcpa-info-label {
    color: #f95b54;
    font-weight: 700;
    flex-shrink: 0;
    width: 75px; /* 레이블 너비 고정으로 정렬 */
}

.kcpa-card .kcpa-card-info-list .kcpa-info-colon {
    color: #f95b54;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

.kcpa-card .kcpa-card-info-list .kcpa-info-value {
    color: #444444;
    font-weight: 500;
}

/* PC에서만 줄바꿈 처리 */
.kcpa-pc-only {
    display: inline;
}

/* 반응형 스타일 */
@media (max-width: 1024px) {
    .kcpa-card-wrapper {
        gap: 30px;
        padding: 0 10px;
    }
    
    .kcpa-card {
        padding: 70px 30px 40px 35px;
    }
    
    .kcpa-card .kcpa-card-header h3 {
        font-size: 24px;
    }
    
    .kcpa-card .kcpa-card-intro {
        font-size: 16px;
    }
    
    .kcpa-card .kcpa-card-desc {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .kcpa-card-section {
        padding: 60px 0 80px;
    }
    
    .kcpa-card-notice {
        text-align: center;
        font-size: 14px;
        margin-bottom: 50px;
    }
    
    .kcpa-card-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 60px; /* 세로 배치 시 위쪽 카드와 아래쪽 카드 헤더 겹침 방지 */
    }
    
    .kcpa-card {
        width: 100%;
        max-width: 500px;
        padding: 65px 25px 35px 30px;
    }
    
    .kcpa-card .kcpa-card-header {
        top: -25px;
        padding: 12px 35px 12px 25px;
    }
    
    .kcpa-card .kcpa-card-header h3 {
        font-size: 22px;
    }
    
    .kcpa-pc-only {
        display: none;
    }
}