:root {
            --bs-primary: #2b4e72; /* 원하는 색상으로 변경 */
	}

	/* Bootstrap 기본 primary 색상을 강제로 변경 */
	.btn-primary {
		background-color: var(--bs-primary) !important;
		border-color: var(--bs-primary) !important;
	}

	.text-primary {
		color: var(--bs-primary) !important;
	}

/* 기본 Bootstrap 클래스를 직접 오버라이드 */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.text-primary {
  color: var(--bs-primary) !important;
}
/*TMR 추가*/
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mt40{margin-top:40px;}
*{
 font-family: 'KoPub Dotum', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  word-break:keep-all !important;
  color:#000;

}

button .btn-sm, .btn-lg{
 font-family: 'KoPub Dotum', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

th, td, label{
 font-family: 'KoPub Dotum', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

.total_line{background-color:#f1f1f1;}
.Qtitle{font-weight:bold;}
.text-purple{color: #8892d6!important;}


.table-colored .table-gray thead th {
	 background-color:#eee;
	 color:#000;
}


.tablesaw-stack td .tablesaw-cell-label,
  .tablesaw-stack th .tablesaw-cell-label {
    display: block;
    padding: 0 .6em 0 0;
    width: 90%;
    display: inline-block;
	text-align:left;
	vertical-align:top;
	float:right;
	font-weight:normal;	
  }

  .bg-gray{background-color:#eee; color:#000;}
  .bg-gray label{color:#000;}

  .border-danger{border:2px solid #a94442;}

@media (max-width:360px){
*{font-size:15px !important;} 
input[type=radio]{width:16px !important; height:16px !important;vertical-align:top;} 
input[type=checkbox]{width:16px !important; height:16px !important;vertical-align:top;}
#question_txt {font-size:16px !important; text-align:left;}
#question_txt > span {font-size:16px !important; text-align:left;}
}
@media (min-width:361px) and (max-width:439px){
*{font-size:15px !important;}
input[type=radio]{width:16px !important; height:16px !important;vertical-align:top;} 
input[type=checkbox]{width:16px !important; height:16px !important;vertical-align:top;}
#question_txt {font-size:16px !important; text-align:left;}
#question_txt > span {font-size:16px !important; text-align:left;}
}
@media (min-width:440px) and (max-width:559px){
*{font-size:15px !important;}
input[type=radio]{width:16px !important; height:16px !important;vertical-align:top;} 
input[type=checkbox]{width:16px !important; height:16px !important;vertical-align:top;}
#question_txt {font-size:16px !important; text-align:left;}
#question_txt > span {font-size:16px !important; text-align:left;}
}
@media (min-width:560px) and (max-width:679px){
*{font-size:16px !important;}
input[type=radio]{width:18px !important; height:18px !important;vertical-align:top;} 
input[type=checkbox]{width:18px !important; height:18px !important;vertical-align:top;}
#question_txt {font-size:17px !important; text-align:left;}
#question_txt > span {font-size:17px !important; text-align:left;}
}
@media (min-width:680px) and (max-width:719px){
*{font-size:17px !important;}
input[type=radio]{width:20px !important; height:20px !important;vertical-align:top;} 
input[type=checkbox]{width:20px !important; height:20px !important;vertical-align:top;}
#question_txt {font-size:19px !important; text-align:left;}
#question_txt > span {font-size:19px !important; text-align:left;}
}
@media (min-width:720px) {
*{font-size:17px !important;}
input[type=radio]{width:20px !important; height:20px !important;vertical-align:top;} 
input[type=checkbox]{width:20px !important; height:20px !important;vertical-align:top;}
#question_txt {font-size:19px !important; text-align:left;}
#question_txt > span {font-size:19px !important; text-align:left;}
}


.table-area {
  position: relative;
  z-index: 0;
  margin-top: 50px;
}

table.responsive-table {
  display: table;
  /* required for table-layout to be used (not normally necessary; included for completeness) */
  table-layout: fixed;
  /* this keeps your columns with fixed with exactly the right width */
  width: 100%;
  /* table must have width set for fixed layout to work as expected */
  height: 100%;
}

table.responsive-table thead {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  line-height: 3em;
  background: #eee;
  table-layout: fixed;
  display: table;
}

table.responsive-table th {
  background: #eee;
}

table.responsive-table td {
  line-height: 2em;
}

table.responsive-table tr > td,
table.responsive-table th {
  text-align: left;
}

/* Th영억 고정 */
/* For appearance */
.sticky-wrap {
	overflow-x: auto;
	overflow-y: hidden;
	position: relative;
	margin: 3em 0;
	width: 100%;
}
.sticky-wrap .sticky-thead,
.sticky-wrap .sticky-col,
.sticky-wrap .sticky-intersect {
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	transition: all .125s ease-in-out;
	z-index: 50;
	width: auto; /* Prevent table from stretching to full size */
}
	.sticky-wrap .sticky-thead {
		box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
		z-index: 100;
		width: 100%; /* Force stretch */
	}
	.sticky-wrap .sticky-intersect {
		opacity: 1;
		z-index: 150;

	}
		.sticky-wrap .sticky-intersect th {
			background-color: #666;
			color: #eee;
		}
.sticky-wrap td,
.sticky-wrap th {
	box-sizing: border-box;
}

/* Not needed for sticky header/column functionality */
td.user-name {
	text-transform: capitalize;
}
.sticky-wrap.overflow-y {
	overflow-y: auto;
	max-height: 50vh;
}
/*
.bg-yellow{background-color:#FFFFD2;}
*/

.bg-yellow{background-color:#E6FFFF;}


.exportExcel
{
   font-family: 'KoPub Dotum', sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
	color: #ffffff !important;
	background-color: #1ea69a;
	border-color: #1ea69a;
	margin:10px 10px;
}

.progr_status{position:fixed;left:0; bottom:0; width:98%; background-color:#eee; color:#000;font-size:14px !important; padding:5px 5px; border:1px solid #acacac;}

/* 글씨 굵게 및 밑줄 스타일 */
.Bd{font-weight:bold;}
.UnBd{font-weight:bold;border-bottom:1px solid #5a5a5a;}
.Un{border-bottom:1px solid #5a5a5a;}

.BlueBd{font-weight:bold;color:#0000FF;}
.UnBlueBd{font-weight:bold;border-bottom:1px solid #0000FF;color:#0000FF;}

.RedBd{font-weight:bold;color:#FF0000;}
.UnRedBd{font-weight:bold;border-bottom:1px solid #0000FF;color:#FF0000;}

th{color:#000;}
td{color:#000;}
.panel{color:#000;}
.table th,td{color:#000;}
.v_mid{vertical-align:middle !important;}
.norBlue{color:blue;}
.norYellow{color:yellow;}

/*.member_con { background:#e4f2fa url('../images/survey_bg.png') center top no-repeat; background-size: cover; position:relative;}*/

.mode_con { background:#e4f2fa url('../images/smartphone.jpg') center top no-repeat; background-size: cover; position:relative;}

.member_con { background:#D5D5D5;}/*e4f2fa*/

/*.member_con {background-image:linear-gradient(to bottom,#D5D5D5 75%, #eee 25%);}*/

.slide_tr{border-top:1px solid #FFCD12 !important;border-bottom:1px solid #FFCD12 !important;background-color:#FFFFC6;}
.slide_tr2{background-color:#eee; padding:10px 10px; margin-top:5px; border:1px solid #aaa;}

.border-primary-color{border:1px solid #A4354B;}

.panel{border-radius:0px !important;}
.panel-heading{border-radius:0px !important;}
.panel-body{border-radius:0px !important;}
.panel-footer{border-radius:0px !important;}
.mobile-body{position:absolute;left:0; top:0; width:100%;}


.bg-y{background-color:#FFFFC6;}
/* E3FFDC,D4F4FA*/

.left_radio{display:table-cell; vertical-align:top;}
input[type=tel]{text-align:center;}
input[type=number]{text-align:center;}

@media (min-width: 1440px) {
      .custom-col {
        flex: 0 0 66.666667%; /* 8개의 열 중에서 2/3만큼의 너비 */
        max-width: 66.666667%;
      }
    }


.input-line{border:1px solid #ccc; border-radius:3px; padding:3px 3px;}
.border-top-weight{ border-top:2px solid #000; }
.text-blue{color:#0100FF;}

.bg-a1{background-color:#CEFBC9 !important;}
.bg-a2{background-color:#D4F4FA !important;}
.bg-a3{background-color:#FAF4C0 !important;}

.btn-bottom{border-radius:0px !important; height:55px;}

.btn-default {
  background-color: #ffffff;
  border-color: rgba(49, 58, 70, 0.2);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
  background-color: rgba(49, 58, 70, 0.07) !important;
  border-color: rgba(49, 58, 70, 0.2) !important;
}

.st-box {
    background: white; 
    border: 1px solid #e0e0e0; 
    border-left: 4px solid #31788F; 
    border-right: 4px solid #31788F; 
    border-radius: 8px;
}

.st-str {
    color: #31788F; 
    font-weight: 600; 
    font-size: 14px;
}

.pt-str {
    color: #1a1a1a; 
    font-size: 140% !important; 
    margin-bottom: 8px; 
    letter-spacing: -0.8px;
}

.dashed-bottom {
    border-bottom: 1px dashed #aaa; 
    margin-top: 8px;
}

.left-menu {
    padding: 0;
  }

  .menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .menu-list li {
    border-bottom: 1px solid #ddd;
  }

  .menu-item {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
  }

  .menu-item:hover,
  .menu-item:focus {
    background-color: rgba(0, 0, 0, 0.03);
    outline: none;
  }

.menu-item.checked {
    color: #FF0000; /* 녹색 */
    font-weight: bold;
    position: relative;
}

.menu-item.checked::before {
    content: "✔ ";
    color: #FF0000;
    position: absolute;
    left: 0px;
}


/****************************************/
:root {
	--primary-navy: #1a3765;
	--accent-blue: #2563eb;
	--bg-light: #f8fafc;
	--border-color: #cbd5e1;
	--text-main: #1e293b;
}


.container-main {
	max-width: 850px;
	margin: 30px auto;
	padding: 15px;
}

.form-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 40px;
	border: 1px solid #e2e8f0;
}

@media (max-width: 576px) {
	.form-card { padding: 25px 15px; }
	.main-title { font-size: 1.6rem !important; }
}

.main-title {
	color: var(--primary-navy);
	font-weight: 700;
	letter-spacing: -1px;
	margin-bottom: 35px;
	text-align: center;
	position: relative;
	font-size: 1.6rem !important;
}

.main-title::after {
	content: '';
	display: block;
	width: 50px;
	height: 4px;
	background-color: var(--accent-blue);
	margin: 12px auto 0 auto;
	border-radius: 2px;
}

.part-header {
	background: var(--primary-navy);
	color: white;
	padding: 14px 20px;
	border-radius: 8px;
	font-weight: 700;
	font-size: 1.15rem;
	margin: 45px 0 20px 0;
	display: flex;
	align-items: center;
	box-shadow: 0 4px 6px rgba(26, 55, 101, 0.15);
}
.part-header:first-of-type { margin-top: 10px; }
.part-header i { margin-right: 12px; font-size: 1.2rem; }

.form-label {
	font-weight: 600;
	color: #334155;
	margin-bottom: 8px;
	font-size: 0.95rem;
}
.form-label .required-dot {
	color: #ef4444;
	margin-left: 4px;
}

.form-control, .form-select {
	border: 1px solid var(--border-color);
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 0.95rem;
	background-color: #f8fafc;
	transition: all 0.25s ease;
}

.form-control:focus, .form-select:focus {
	background-color: #fff;
	border-color: var(--accent-blue);
	box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

.photo-area {
	background: #f1f5f9;
	border: 2px dashed #94a3b8;
	border-radius: 12px;
	height: 250px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.2s ease;
}
.photo-area:hover {
	border-color: var(--accent-blue);
	background: #f8fafc;
}
.photo-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0; left: 0;
	display: none;
}

.sig-container {
    position: relative;
    width: 100%; /* 부모 col-md-12 폭을 가득 채우도록 100% 지정 */
    height: 200px; /* 고정 높이 또는 모바일에 맞춰 가변 */
    border: 1px solid #cbd5e1;
    background-color: #fafbfc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 5px;
}

/* 캔버스를 감싸는 부모 박스 (반드시 relative 여야 합니다) */
.signature-wrapper {
    position: relative;
    width: 100%;
    height: 150px; /* 높이가 0이 되지 않도록 확실하게 지정 */
    border: 1px solid #b8c6d6;
    background-color: #fafbfc;
    overflow: hidden;
}

/* 캔버스 자체 스타일 */
#signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    cursor: crosshair;
    z-index: 10;
    
    /* [가장 중요] 모바일 브라우저의 기본 터치 제스처/스크롤 기능을 강제로 끕니다 */
    touch-action: none !important; 
    
    /* iOS 사파리 돋보기 및 드래그 선택 방지 */
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
}


.sig-buttons {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 10;
}

.validation-warning {
	color: #ef4444;
	font-size: 0.85rem;
	margin-top: 6px;
	display: none;
	align-items: center;
}
.validation-warning i { margin-right: 4px; }

.btn-submit {
	background: var(--primary-navy);
	color: white;
	padding: 16px;
	border-radius: 12px;
	font-weight: 700;
	width: 100%;
	border: none;
	margin-top: 40px;
	font-size: 1.15rem;
	box-shadow: 0 4px 12px rgba(26, 55, 101, 0.2);
	transition: all 0.25s ease;
}
.btn-submit:hover {
	background: #0f2444;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(26, 55, 101, 0.3);
}

.custom-alert {
	position: fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-100px);
	z-index: 1090;
	min-width: 320px;
	max-width: 90%;
	background: #ffffff;
	border-left: 5px solid #ef4444;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	border-radius: 8px;
	padding: 16px 20px;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.custom-alert.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* --- 타임라인 일정 확인용 독자 스타일 (한 줄 유지형) --- */
.sched-card {
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    border-radius: 12px !important;
    overflow: hidden;
}
.sched-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 15px 20px !important;
}
.sched-body {
    background-color: #f8fafc !important;
    padding: 15px !important;
}
.sched-box {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 15px !important;
    height: 100%;
}
/* 타임라인 세로선 */
.sched-timeline {
  
}
/* 타임라인 항목 (한 줄 정렬을 위한 Flex 레이아웃) */
/* --- 타임라인 한 줄 강제 정렬 및 '현장실습' 최적화 스타일 --- */
.sched-item {
    position: relative;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* 양 끝 정렬 */
    width: 100%;
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

/* 왼쪽 정보 영역 (뱃지 + 날짜) */
.sched-info-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0; /* 화면이 좁아져도 좌측 영역 절대 보존 */
}

/* 오른쪽 시간/장소 영역 */
.sched-time {
    font-size: 0.76rem; /* 텍스트 밀림을 방지하기 위한 안전한 폰트 크기 */
    letter-spacing: -0.05em; /* 자간을 미세하게 좁혀 한 줄 밀착도 향상 */
    color: #64748b;
    text-align: right;
    flex-grow: 1; /* 남은 여백을 유연하게 채움 */
    flex-shrink: 1; /* 좁은 디바이스 환경에 맞춰 유연하게 폰트 폭 수축 */
    overflow: hidden;
    text-overflow: ellipsis; /* 극단적으로 좁은 환경 시 깨짐 대신 ... 마감 */
    margin-left: 8px; /* 좌우 공간 안전 확보 */
}


/* --- 최종 제출 하단 CS 안내 스타일 (타이틀 마커 및 써클 아이콘 통합형) --- */
.cs-line-container {
    background-color: transparent !important;
    border-top: 2px solid #1a4888 !important; /* 상단 포인트 블루 라인 */
    border-bottom: 1px solid #e2e8f0 !important; /* 하단 부드러운 그레이 라인 */
    color: #1a4888 !important;
    padding: 20px 10px !important;
    font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.cs-line-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.cs-line-row:last-child {
    margin-bottom: 0;
}

/* 다이아몬드(회전된 사각형) 형태의 타이틀 앞 마커 스타일 정의 */
.cs-line-title {
    font-weight: bold;
    min-width: 95px;
    display: flex;
    align-items: center;
    color: #1a4888 !important;
    flex-shrink: 0;
}

/* 🔵 [핵심] 다이아몬드 마커 아이콘 세부 스타일 */
.cs-line-marker {
    color: #1a4888 !important; /* 진한 블루색 적용 */
    margin-right: 9px; /* 글자와의 간격 미세 조정 */
    font-size: 8px; /* 크기 조정 */
    transform: rotate(45deg); /* 사각형을 45도 회전시켜 다이아몬드 형태로 구현 */
    vertical-align: middle;
}

.cs-line-content-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.cs-line-contact-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* 연락처 써클 아이콘 (이전 단계 유지) */
.cs-line-icon-circle {
    background-color: #ffffff !important;
    color: #1a4888 !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font-size: 11px;
    border: 1px solid #1a4888 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.cs-line-link {
    color: #1a4888 !important;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 14px;
    transition: opacity 0.15s ease-in-out;
}

.cs-line-link:hover {
    opacity: 0.8;
}

.cs-line-agency-text {
    font-size: 13.5px;
    color: #475569;
}

.cs-line-divider {
    color: #cbd5e1;
    margin: 0 10px;
}

/* 모바일 대응 (타이틀 마커 간격 최적화 추가) */
@media (max-width: 768px) {
    .cs-line-container {
        padding: 16px 5px !important;
        font-size: 13px;
        margin-top: 30px !important;
    }
    .cs-line-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 10px;
    }
    .cs-line-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-top: 4px;
    }
    .cs-line-title {
        margin-bottom: 4px;
        width: 100%;
        gap: 2px;
    }
    /* 모바일에서 다이아몬드 마커 위치 미세 조정 */
    .cs-line-marker {
        font-size: 7px;
        margin-right: 7px;
        margin-top: -1px;
    }
    .cs-line-content-group {
        gap: 8px 18px;
        width: 100%;
    }
    .cs-line-agency-text {
        font-size: 12.5px;
    }
}

/* 이미지 모서리 둥글게 처리하여 카드와 연결 */
.container-main img.img-fluid {
	border-radius: 12px 12px 0 0;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* 하단 버튼을 감싸는 박스 디자인 */
.action-card {
	background: #ffffff;
	border: 1px solid #eef2f5;
	border-top: none;
	border-radius: 0 0 12px 12px;
	padding: 35px 25px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.action-card .card-title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #1e293b;
	margin-bottom: 8px;
}

.action-card .card-desc {
	font-size: 0.95rem;
	color: #64748b;
	margin-bottom: 25px;
}

/* --- 공통 버튼 기본 스타일 --- */
.action-card .btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-radius: 10px;
	transition: all 0.25s ease-in-out;
	text-decoration: none;
	border: none;
}
.action-card .btn-text {
	display: flex;
	align-items: center;
	justify-content: center; /* 텍스트와 아이콘 가로 정렬 */
	width: 100%;
}

.action-card .btn-text strong {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.5px;
}

/* Font Awesome 아이콘 미세 조정 */
.action-card .btn-icon {
	font-size: 1.15rem; /* 텍스트 크기와 밸런스 조정 */
	transition: transform 0.25s ease-in-out;
	display: inline-block;
}

/* --- [좌측] 다운로드 버튼 (차분한 Slate 테마) --- */
.btn-download {
	background-color: #f1f5f9;
	color: #475569 !important;
	border: 1px solid #e2e8f0;
}

.btn-download:hover {
	background-color: #e2e8f0;
	color: #1e293b !important;
	transform: translateY(-2px);
}

/* 호버 시 아이콘 아래로 슥 움직이는 효과 */
.btn-download:hover .btn-icon {
	transform: translateY(3px);
}

/* --- [우측] 지원 신청하기 버튼 (Royal Blue 테마) --- */
.btn-apply {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	color: #ffffff !important;
	border: none;
	box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.btn-apply:hover {
	background: linear-gradient(135deg, #1d4ed8, #1e40af);
	box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
	transform: translateY(-2px);
}

/* 호버 시 펜 아이콘이 글을 쓰는 것처럼 살짝 회전하면서 우측으로 움직이는 효과 */
.btn-apply:hover .btn-icon {
	transform: translateX(3px) rotate(15deg);
}

/* 모바일 화면 최적화 */
@media (max-width: 576px) {
	.action-card {
		padding: 25px 15px;
	}
	.action-card .btn {
		padding: 12px 15px;
	}
}


.card-header-top {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 20px;
}

/* 로고를 우측 정렬 */
.logo-wrapper {
	display: flex;
	justify-content: flex-end; 
	width: 100%;
	margin-bottom: 15px;
}

.top-logo {
	height: 28px; /* 로고 높이에 맞게 적절히 조절 */
	width: auto;
	object-fit: contain;
	opacity: 0.85; /* 배경과 자연스럽게 어우러지도록 살짝 투명도 조절 */
}

/* 타이틀 감싸는 영역 */
.title-wrapper {
	width: 100%;
}

/* 타이틀 위 포인트 뱃지 (선택 사항, 필요 없으면 빼셔도 됩니다) */
.survey-badge {
	display: inline-block;
	font-size: 1.5rem !important;
	font-weight: 600;
	color: #3b82f6;
	background: #eff6ff;
	padding: 4px 12px;
	border-radius: 30px;
	margin-bottom: 10px;
}