/* skin/diagnostic/style.css - 시험 시스템 CSS 기반 진단 시스템용 스타일 */

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);
/* ---------- 공통 컨테이너 스타일 (클래스명 변경) ---------- */

.diagnostic-list-container, /* exam-list-container -> diagnostic-list-container */
.diagnostic-info-container, /* exam-info-container -> diagnostic-info-container */
.diagnostic-take-container, /* exam-take-container -> diagnostic-take-container */
.diagnostic-result-container { /* result-container -> diagnostic-result-container */
    max-width: 840px;
    margin: 30px auto;
    padding: 35px 40px;
    border: 1px solid #c0c0c0;
    border-radius: 10px;
    font-family: 'NanumSquare', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
    background-color: #fdfdfd;
    font-size: 16px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.06);
}

/* 공통 제목 스타일 (클래스명 변경 고려) */
.diagnostic-list-container h1,
.diagnostic-info-container h1,
.diagnostic-take-container h1.diagnostic-title, /* exam-title -> diagnostic-title */
.diagnostic-result-container h1 {
    font-size: 2.0em;
    margin-bottom: 30px; /* 제목 아래 여백 통일 */
    text-align: center;
    color: #1e1e1e;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.diagnostic-list-container h1 i.fa,
.diagnostic-result-container h1 i.fa { /* 아이콘 스타일은 필요시 유지 */
    margin-right: 12px;
    color: #007bff; /* 진단 컨셉에 맞는 색상 변경 (예: 파란색) */
    opacity: 0.85;
}

/* ---------- diagnostic/list.skin.php 스타일 (기존 exam 스타일 기반) ---------- */

.diagnostic-list-container .diagnostic-list { /* 클래스명 변경 */
    list-style: none;
    padding: 0;
    margin: 0;
}

.diagnostic-list-container .diagnostic-list li { /* 클래스명 변경 */
    display: flex; /* Flexbox 레이아웃 사용 */
    justify-content: space-between;
    align-items: flex-start; /* 위쪽 정렬 */
    margin-bottom: 20px; /* li 간격 조정 */
    padding: 20px 25px; /* 내부 패딩 조정 */
    border: 1px solid #d8d8d8;
    border-radius: 8px; /* li 테두리 둥글게 */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.diagnostic-list-container .diagnostic-list li:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background-color: #f9f9f9;
}

.diagnostic-list-container .diagnostic-info-wrap { /* 클래스명 변경 */
    flex-grow: 1;
    margin-right: 20px; /* 버튼과의 간격 조정 */
}

.diagnostic-list-container .diagnostic-list a { /* 링크 전체 영역 */
    text-decoration: none;
    color: inherit; /* 부모 요소 색상 상속 */
}

.diagnostic-list-container .diagnostic-list .diagnostic-title { /* 클래스명 변경 */
    font-size: 1.4em;
    display: block;
    margin-bottom: 10px;
    color: #0056b3;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
}
.diagnostic-list-container .diagnostic-list a:hover .diagnostic-title {
    color: #007bff; /* 제목 호버 시 색상 변경 */
}

.diagnostic-list-container .diagnostic-meta { /* 필요시 메타 정보 스타일 */
    font-size: 0.95em;
    color: #777;
    margin-bottom: 12px;
}

.diagnostic-list-container .diagnostic-meta span {
    margin-right: 15px;
}

.diagnostic-list-container .diagnostic-description { /* 클래스명 변경 */
    font-size: 1.05em;
    color: #555;
    line-height: 1.6;
    margin-bottom: 10px; /* 설명 아래 여백 추가 */
}

.diagnostic-list-container .diagnostic-action-buttons { /* 클래스명 변경 */
    flex-shrink: 0; /* 버튼 영역 줄어들지 않게 */
    align-self: center; /* 버튼들을 세로 중앙에 배치 */
}

.diagnostic-list-container .no-diagnostic { /* 클래스명 변경 */
    text-align: center;
    padding: 45px 0;
    color: #888;
    font-size: 1.1em;
}


/* ---------- diagnostic/info.skin.php 스타일 (예상) ---------- */

.diagnostic-info-container .diagnostic-info-details {
    margin-top: 25px;
    padding: 25px 30px; /* 패딩 조정 */
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.02);
}

.diagnostic-info-container .diagnostic-info-details dt {
    font-weight: bold;
    color: #495057;
    margin-bottom: 8px;
    font-size: 1.1em; /* dt 크기 조정 */
}

.diagnostic-info-container .diagnostic-info-details dd {
    margin-left: 0;
    margin-bottom: 20px; /* dd 간격 조정 */
    color: #6c757d;
    line-height: 1.7; /* 줄 간격 조정 */
    font-size: 1.05em; /* dd 크기 조정 */
}

.diagnostic-start-button { /* 시작 버튼 스타일 */
    display: inline-block;
    padding: 14px 35px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #007bff; /* 테마 색상 */
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

.diagnostic-start-button:hover,
.diagnostic-start-button:focus {
    background-color: #0056b3;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
	color:#fff;
	 text-decoration: none;
	
}

.diagnostic-result-button { /* 시작 버튼 스타일 */
    display: inline-block;
    padding: 14px 35px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #A40002; /* 테마 색상 */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

.diagnostic-result-button:hover,
.diagnostic-result-button:focus {
    background-color: #470001;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
}


 .diagnostic-list-button { /* 시작 버튼 스타일 */
    display: inline-block;
    padding: 14px 35px;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #525252; /* 테마 색상 */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    margin-top: 30px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease;
}

.diagnostic-list-button:hover,
 .diagnostic-list-button:focus {
    background-color: #171717;
    transform: translateY(-2px); /* 살짝 떠오르는 효과 */
	 color:#fff;
	 text-decoration: none;
}

.diagnostic-info-container .cannot-take-msg {
    color: #dc3545;
    font-weight: bold;
    margin-top: 25px;
    text-align: center;
    font-size: 1.1em;
}

.diagnostic-info-container .info-buttons { /* 버튼 영역 공통 클래스 */
     text-align: center;
     margin-top: 35px;
}


/* ---------- diagnostic/take.skin.php 스타일 (예상) ---------- */

.diagnostic-take-container .diagnostic-header { /* 시험 헤더 -> 진단 헤더 */
    padding: 20px 30px; /* 패딩 조정 */
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background-color: #f9f9f9;
    margin-bottom: 35px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.04);
    text-align: center; /* 제목 중앙 정렬 */
}

.diagnostic-take-container h1.diagnostic-title { /* take 페이지 제목 */
     font-size: 1.8em;
     margin: 0; /* 헤더 안에서는 마진 제거 */
}

/* 타이머 스타일은 제거 (진단에는 불필요) */

.diagnostic-take-container .item-counter { /* 문항 진행률 표시 (예시) */
    text-align: right;
    font-size: 0.95em;
    color: #6c757d;
    margin-bottom: 20px;
}

.diagnostic-take-container .question-item { /* 문항 아이템 */
    margin-bottom: 35px;
    padding-bottom: 30px; /* 아래쪽 패딩 추가 */
    border-bottom: 1px solid #eee; /* 구분선 약간 연하게 */
}

.diagnostic-take-container .question-number { /* 문항 번호 */
    font-size: 1.2em;
    font-weight: bold;
    color: #007bff; /* 번호 강조색 */
    margin-bottom: 15px;
}

.diagnostic-take-container .question-content { /* 질문 내용 */
    font-size: 1.15em; /* 질문 크기 약간 확대 */
    margin-bottom: 25px;
    padding: 18px 22px; /* 패딩 조정 */
    background-color: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.02);
    line-height: 1.7; /* 질문 줄 간격 */
}

/* 보기(Option) 리스트 스타일 */
.diagnostic-take-container .question-options ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox 사용하여 보기 나열 (옵션) */
    flex-direction: column; /* 기본 세로 정렬 */
    gap: 10px; /* 보기 간 간격 */
}

.diagnostic-take-container .question-options li {
    font-size: 1.05em; /* 보기 폰트 크기 */
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    background: #fff;
    transition: all 0.15s ease-in-out;
    cursor: pointer; /* 리스트 아이템 전체 클릭 가능하도록 */
}

.diagnostic-take-container .question-options li label {
    display: flex; /* 내부 요소 정렬 위해 flex */
    align-items: center;
    padding: 12px 18px; /* 보기 내부 패딩 */
    cursor: pointer;
    border-radius: 6px;
    border: 2px solid transparent; /* 선택 시 테두리 효과 위해 */
    width: 100%; /* label 너비 100% */
    box-sizing: border-box; /* padding 포함하여 너비 계산 */
}

.diagnostic-take-container .question-options li:hover,
.diagnostic-take-container .question-options li input[type="radio"]:checked + label { /* 선택된 항목 강조 */
    background-color: #e7f3ff; /* 선택 배경색 */
    border-color: #007bff; /* 선택 테두리색 */
}
/* 체크된 라디오 버튼 자체는 숨김 (label 로 대체) */
.diagnostic-take-container .question-options input[type="radio"] {
    display: none;
}
/* label 안의 텍스트 */
.diagnostic-take-container .question-options li label span {
   flex-grow: 1; /* 텍스트 영역이 남는 공간 차지 */
}


/* 진단 제출 버튼 영역 */
.diagnostic-take-container .diagnostic-submit-area {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.diagnostic-take-container .diagnostic-submit-area .diagnostic-submit-button {
    padding: 12px 28px;
    font-size: 1.1em;
    border-radius: 8px;
    background-color: #28a745; /* 제출 버튼 색상 (예: 녹색) */
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.04);
}
.diagnostic-take-container .diagnostic-submit-area .diagnostic-submit-button:hover,
.diagnostic-take-container .diagnostic-submit-area .diagnostic-submit-button:focus {
    background-color: #218838;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}


/* ---------- diagnostic/result.skin.php 스타일 (예상) ---------- */

.diagnostic-result-container h1 { /* 결과 페이지 제목 */
    margin-bottom: 20px; /* 여백 조정 */
}

.diagnostic-result-container .result-summary { /* 결과 요약 섹션 */
    padding: 25px 30px;
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    background-color: #f0f8ff; /* 결과 요약 배경색 */
    margin-bottom: 35px;
    text-align: center;
}

.diagnostic-result-container .result-summary .final-type { /* 최종 유형 */
    font-size: 1.8em;
    font-weight: bold;
    color: #007bff; /* 강조색 */
    margin-bottom: 5px;
}
.diagnostic-result-container .result-summary .type-name { /* 유형 이름 */
    font-size: 1.3em;
    color: #333;
    margin-bottom: 15px;
}

.diagnostic-result-container .result-chart-area { /* 점수 그래프 영역 */
    margin-bottom: 35px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    /* Chart.js 캔버스 크기 제어는 JS에서 하는 것이 일반적 */
}
.diagnostic-result-container .result-chart-area h2 {
    font-size: 1.4em;
    margin-bottom: 15px;
    text-align: center;
    color: #444;
}

.diagnostic-result-container .result-details { /* 상세 설명 섹션 */
    margin-bottom: 30px;
}

.diagnostic-result-container .result-details h2 { /* 상세 설명 제목 */
    font-size: 1.5em;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff;
    color: #0056b3;
}

.diagnostic-result-container .result-details .type-description,
.diagnostic-result-container .result-details .content-recommendation {
    margin-bottom: 30px;
    line-height: 1.7;
    font-size: 1.05em;
}
.diagnostic-result-container .result-details h3 { /* 추천 콘텐츠 등 소제목 */
     font-size: 1.2em;
     margin-top: 25px;
     margin-bottom: 12px;
     color: #333;
}
.diagnostic-result-container .result-details ul { /* 추천 목록 등 */
     list-style: disc;
     margin-left: 25px;
     padding-left: 0;
}
.diagnostic-result-container .result-details li {
     margin-bottom: 8px;
}


/* 결과 페이지 버튼 */
.diagnostic-result-container .result-buttons {
    text-align: center;
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid #eee;
}

.diagnostic-result-container .result-buttons a,
.diagnostic-result-container .result-buttons button {
    margin: 0 10px;
    padding: 12px 25px; /* 패딩 조정 */
    font-size: 1.05em;
    border-radius: 8px;
    border: 1px solid #ccc; /* 테두리 추가 */
    background-color: #fff;
    color: #555;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.diagnostic-result-container .result-buttons a:hover,
.diagnostic-result-container .result-buttons button:hover,
.diagnostic-result-container .result-buttons a:focus,
.diagnostic-result-container .result-buttons button:focus {
    background-color: #f0f0f0;
    border-color: #bbb;
    color: #333;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.06);
    transform: translateY(-1px);
}


/* ---------- 모바일 화면 대응 (기존 스타일 기반 + 진단용 클래스명) ---------- */

@media (max-width: 768px) {

    /* 공통 컨테이너 */
    .diagnostic-list-container,
    .diagnostic-info-container,
    .diagnostic-take-container,
    .diagnostic-result-container {
        margin: 15px auto;
        padding: 20px 15px; /* 패딩 조정 */
        font-size: 15px; /* 모바일 기본 폰트 */
    }

    /* 공통 제목 */
    .diagnostic-list-container h1,
    .diagnostic-info-container h1,
    .diagnostic-take-container h1.diagnostic-title,
    .diagnostic-result-container h1 {
        font-size: 1.9em; /* 모바일 제목 */
        margin-bottom: 5px;
    }

    /* 목록 페이지 */
    .diagnostic-list-container .diagnostic-list li {
        flex-direction: column; /* 모바일에서는 세로 쌓기 */
        padding: 15px;
        margin-bottom: 15px;
    }
    .diagnostic-list-container .diagnostic-info-wrap {
        margin-right: 0;
        margin-bottom: 15px; /* 버튼과의 간격 */
    }
    .diagnostic-list-container .diagnostic-action-buttons {
        align-self: stretch; /* 버튼 너비 100% 차지하도록 */
        text-align: center;
    }
     .diagnostic-list-container .diagnostic-action-buttons .btn {
         width: 100%; /* 버튼 너비 100% */
         box-sizing: border-box;
         padding: 10px 15px; /* 버튼 패딩 */
         font-size: 1.05em;
     }
    .diagnostic-list-container .diagnostic-list .diagnostic-title {
        font-size: 1.3em; /* 모바일 목록 제목 */
    }
    .diagnostic-list-container .diagnostic-description {
        font-size: 1em; /* 모바일 목록 설명 */
    }

    /* 정보 페이지 */
    .diagnostic-info-container .diagnostic-info-details {
        padding: 20px;
    }
    .diagnostic-info-container .diagnostic-info-details dt { font-size: 1.05em; }
    .diagnostic-info-container .diagnostic-info-details dd { font-size: 1em; margin-bottom: 15px; }
    .diagnostic-info-container .diagnostic-start-button {
        font-size: 1.15em;
        padding: 12px 30px;
        display: block; /* 버튼 블록 요소로 */
        width: 100%;
        box-sizing: border-box;
    }
     .diagnostic-info-container .diagnostic-list-button { /* 목록가기 등 다른 버튼 */
         font-size: 1.15em;
        padding: 12px 30px;
        display: block; /* 버튼 블록 요소로 */
        width: 100%;
        box-sizing: border-box;
         margin-top: 10px;
     }


    /* 진행 페이지 */
     .diagnostic-take-container .diagnostic-header { padding: 15px 20px; margin-bottom: 25px; }
     .diagnostic-take-container h1.diagnostic-title { font-size: 1.4em; }
     .diagnostic-take-container .item-counter { margin-bottom: 15px; }
     .diagnostic-take-container .question-item { padding-bottom: 20px; margin-bottom: 25px; }
     .diagnostic-take-container .question-number { font-size: 1.1em; margin-bottom: 10px; }
     .diagnostic-take-container .question-content { font-size: 1.05em; padding: 15px; margin-bottom: 20px; }
     .diagnostic-take-container .question-options ul { gap: 8px; } /* 보기 간격 */
     .diagnostic-take-container .question-options li { font-size: 1em; }
     .diagnostic-take-container .question-options li label { padding: 10px 15px; }
     .diagnostic-take-container .diagnostic-submit-area .diagnostic-submit-button {
         display: block; width: 100%; box-sizing: border-box; font-size: 1.1em; padding: 12px 20px;
     }

    /* 결과 페이지 */
    .diagnostic-result-container .result-summary { padding: 20px; margin-bottom: 30px; }
    .diagnostic-result-container .result-summary .final-type { font-size: 1.6em; }
    .diagnostic-result-container .result-summary .type-name { font-size: 1.2em; }
    .diagnostic-result-container .result-chart-area { padding: 15px; margin-bottom: 30px; }
    .diagnostic-result-container .result-chart-area h2 { font-size: 1.3em; }
    .diagnostic-result-container .result-details h2 { font-size: 1.4em; }
    .diagnostic-result-container .result-details .type-description,
    .diagnostic-result-container .result-details .content-recommendation { font-size: 1em; }
    .diagnostic-result-container .result-details h3 { font-size: 1.1em; }
    .diagnostic-result-container .result-buttons a,
    .diagnostic-result-container .result-buttons button { display: block; width: 100%; box-sizing: border-box; margin: 10px 0; }

}

/* /skin/diagnostic/style.css - 유형 소개 페이지 디자인 개선 */

/* --- 전체 컨테이너 --- */
.diagnostic-type-introduction-container {
    max-width: 960px; /* 최대 너비 약간 증가 */
    margin: 40px auto; /* 상하 여백 증가 */
    padding: 40px 50px; /* 내부 여백 증가 */
    border: 1px solid #e0e0e0; /* 테두리 연하게 */
    border-radius: 12px; /* 둥글기 약간 증가 */
    font-family: 'NanumSquare', sans-serif;
    line-height: 1.7; /* 기본 줄 간격 조정 */
    color: #495057; /* 기본 텍스트 색상 */
    background-color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07); /* 그림자 약간 강조 */
}

/* --- 페이지 제목 --- */
.diagnostic-type-introduction-container h1 {
    font-size: 2.4em; /* 제목 크기 약간 증가 */
    margin-bottom: 25px;
    text-align: center;
    color: #212529; /* 제목 색상 약간 진하게 */
    font-weight: 700;
    letter-spacing: -0.04em;
}
.diagnostic-type-introduction-container h1 i.fa {
    margin-right: 15px;
    color: #0d6efd; /* 아이콘 색상 (Bootstrap primary) */
    vertical-align: middle; /* 아이콘 세로 정렬 */
    font-size: 0.9em; /* 아이콘 크기 약간 작게 */
}

/* --- 진단 설명 --- */
.diagnostic-type-introduction-container .diagnostic-description {
    text-align: center;
    margin-bottom: 50px; /* 설명 아래 여백 증가 */
    padding: 0 15%; /* 좌우 여백 주어 가운데 정렬 효과 */
    font-size: 1.1em;
    color: #495057;
}

/* --- 유형 목록 그리드 --- */
.type-list-area.type-card-layout {
    display: grid;
    /* 3열 기준, 최소 너비 조정 */
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px; /* 카드 간 간격 증가 */
}

/* --- 개별 유형 카드 --- */
.type-card-item {
    border: 1px solid #dee2e6; /* 테두리 색상 약간 진하게 */
    border-radius: 10px; /* 둥글기 조정 */
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 내부 요소가 넘치지 않도록 */
}
.type-card-item:hover {
    transform: translateY(-6px); /* 호버 시 더 많이 올라오도록 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
}

/* 카드 요약 부분 (클릭 영역) */
.type-card-summary {
    padding: 25px 25px 20px 25px; /* 패딩 조정 */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    /* background: linear-gradient(to bottom, #ffffff, #f8f9fa); */ /* 그라데이션 배경 (선택 사항) */
    border-bottom: 1px solid #f1f3f5; /* 요약과 상세 구분선 */
}
.type-card-item:hover .type-card-summary {
    background-color: #f8f9fa; /* 호버 시 배경색 */
}

.type-card-summary .type-code {
    font-size: 1.8em; /* 코드 크기 증가 */
    font-weight: bold;
    color: #906900; /* 테마 색상 */
    margin-bottom: 8px;
    text-align: center;
    font-family: 'NanumSquare', cursive; /* Monoton 폰트 적용 (만약 로드했다면) */
    letter-spacing: 1px;
}

.type-card-summary .type-name {
    font-size: 1.3em; /* 이름 크기 증가 */
    color: #212529;
    margin-bottom: 18px; /* 이름 아래 여백 증가 */
    text-align: center;
    font-weight: 700; /* 굵게 */
    min-height: 2.6em;
}

.type-card-summary .type-description-summary {
    font-size: 1em; /* 요약 폰트 크기 조정 */
    color: #495057;
    line-height: 1.65;
    margin-bottom: 15px;
    min-height: 65px; /* 최소 높이 조정 */
    text-align: justify; /* 양쪽 정렬 (선택 사항) */
}

.type-card-summary .toggle-indicator {
    text-align: center;
    margin-top: 15px; /* 위쪽 여백 증가 */
    color: #906900;
    font-size: 0.95em;
    font-weight: bold;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.type-card-summary:hover .toggle-indicator {
    opacity: 1;
}
.type-card-summary .toggle-indicator i { margin-right: 5px; }


/* 카드 상세 내용 영역 */
.type-card-detail {
    padding: 25px 25px 25px 25px; /* 패딩 조정 */
    background-color: #f8f9fa; /* 요약 영역 호버 색상과 유사하게 */
    /* display: none; 기본 숨김은 JS에서 처리 */
    border-top: 1px solid #dee2e6; /* 상단 구분선 */
}

.type-card-detail .detail-section {
    margin-bottom: 25px;
}
.type-card-detail .detail-section:last-child {
    margin-bottom: 15px; /* 마지막 섹션 하단 여백 줄임 */
}

.type-card-detail .detail-section h4 {
    font-size: 1.15em; /* 소제목 크기 조정 */
    font-weight: bold;
    margin-bottom: 12px;
    color: #343a40;
    padding-bottom: 5px;
    border-bottom: 1px solid #e0e0e0; /* 소제목 밑줄 */
}
.type-card-detail .detail-section h4 i {
    margin-right: 8px;
    color: #6c757d; /* 아이콘 색상 */
}

.type-card-detail .detail-section div,
.type-card-detail .detail-section p {
    font-size: 1em; /* 본문 폰트 크기 */
    line-height: 1.7;
    color: #495057;
    text-align: justify; /* 양쪽 정렬 (선택 사항) */
}
.type-card-detail .detail-section ul { /* 추천 목록 등 */
     list-style: none; /* 기본 list-style 제거 */
     padding-left: 0;
     margin-top: 10px;
}
.type-card-detail .detail-section li {
     margin-bottom: 8px;
     padding-left: 20px; /* 들여쓰기 */
     position: relative;
}
.type-card-detail .detail-section li::before { /* Font Awesome 아이콘으로 불릿 대체 */
    content: "\f00c"; /* fa-check 아이콘 */
    font-family: FontAwesome;
    position: absolute;
    left: 0;
    top: 2px;
    color: #28a745; /* 녹색 계열 */
    font-size: 0.9em;
}


.type-card-detail .close-detail-btn {
    font-size: 0.9em !important;
    padding: 6px 12px !important; /* 패딩 조정 */
    border-color: #adb5bd !important; /* 테두리 색상 연하게 */
    color: #6c757d !important; /* 글자 색상 */
    background-color: #fff !important; /* 배경 흰색 */
}
.type-card-detail .close-detail-btn:hover {
     background-color: #e9ecef !important; /* 호버 배경색 */
     border-color: #adb5bd !important;
}


/* --- 하단 버튼 영역 --- */
.diagnostic-type-introduction-container .btn-lg {
    padding: 14px 30px; /* 패딩 조정 */
    font-size: 1.15em; /* 폰트 크기 조정 */
    font-weight: bold;
    border-radius: 8px;
    margin: 0 8px; /* 버튼 간 간격 */
    transition: transform 0.1s ease, box-shadow 0.2s ease;
}
.diagnostic-type-introduction-container .btn-lg:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.diagnostic-type-introduction-container .btn-success { /* 진단 시작 버튼 */
    background-color: #198754;
    border-color: #198754;
}
.diagnostic-type-introduction-container .btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}
.diagnostic-type-introduction-container .btn-secondary { /* 다른 진단 보기 버튼 */
     background-color: #6c757d;
     border-color: #6c757d;
     color: white;
}
.diagnostic-type-introduction-container .btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

/* --- 모바일 반응형 (일부 조정) --- */
@media (max-width: 768px) {
    .diagnostic-type-introduction-container {
        padding: 25px 15px; /* 모바일 패딩 */
    }
    .diagnostic-type-introduction-container h1 {
        font-size: 2em; /* 모바일 제목 */
    }
    .diagnostic-type-introduction-container .diagnostic-description {
        padding: 0 5%; /* 모바일 좌우 여백 */
        font-size: 1.05em;
    }
    .type-list-area.type-card-layout {
        grid-template-columns: 1fr; /* 모바일 1열 */
        gap: 20px; /* 카드 간격 */
    }
    .type-card-summary { padding: 20px; }
    .type-card-summary .type-code { font-size: 1.6em; }
    .type-card-summary .type-name { font-size: 1.2em; }
    .type-card-summary .type-description-summary { font-size: 0.95em; }
    .type-card-detail { padding: 20px; }
    .type-card-detail .detail-section h4 { font-size: 1.1em; }
    .type-card-detail .detail-section div,
    .type-card-detail .detail-section p { font-size: 0.95em; }
    .diagnostic-type-introduction-container .btn-lg {
         display: block; /* 모바일 버튼 블록 */
         width: 100%;
         margin: 10px 0;
         padding: 12px 20px;
         font-size: 1.1em;
    }
}

/* --- Input 스타일 --- */
.frm_input, /* 그누보드 기본 클래스 활용 */
textarea.frm_textarea { /* textarea 도 포함 */
    display: block;
    width: 100%;
    padding: 10px 15px; /* 안쪽 여백 */
    font-size: 1em; /* 폰트 크기 */
    line-height: 1.6;
    color: #495057; /* 글자 색 */
    background-color: #fff; /* 배경 흰색 */
    background-clip: padding-box;
    border: 1px solid #ced4da; /* 테두리 색 */
    border-radius: 8px; /* 둥근 모서리 */
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box; /* padding, border 포함하여 너비 계산 */
	padding: 20px;
}
/* input 포커스 시 효과 */
.frm_input:focus,
textarea.frm_textarea:focus {
    color: #212529;
    background-color: #fff;
    border-color: #86b7fe; /* 포커스 시 테두리 색 */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25); /* 포커스 시 그림자 효과 */
}
/* placeholder 스타일 */
.frm_input::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* --- verify_result 페이지 컨테이너 및 폼 --- */
.diagnostic-verify-container {
    max-width: 550px; /* 너비 약간 줄임 */
    margin: 40px auto;
    padding: 35px 40px;
}
.diagnostic-verify-container h2 {
     font-size: 1.8em;
     margin-bottom: 15px;
     text-align: center;
     color: #333;
}
.diagnostic-verify-container p {
     text-align: center;
     font-size: 1.05em;
     color: #555;
     margin-bottom: 30px;
}
.diagnostic-verify-container form label {
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
    color: #495057;
    font-size: 1.05em;
}
.diagnostic-verify-container form .btn-block { /* 버튼 너비 100% */
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
    font-weight: bold;
}

/* --- info 페이지 비회원 폼 --- */
.guest-info-form {
    margin-top: 30px;
    padding: 30px; /* 패딩 조정 */
    border: 1px solid #a0cfff; /* 테두리 색 변경 */
    border-radius: 8px;
    background-color: #f0f8ff; /* 배경색 변경 */
}
.guest-info-form h3 {
    text-align: center;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.4em; /* 제목 크기 */
    color: #0056b3;
}
.guest-info-form p {
    text-align: center;
    font-size: 0.95em;
    color: #495057;
    margin-bottom: 25px;
    line-height: 1.6;
}
.guest-info-form form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 1em;
    color: #343a40;
}
.guest-info-form form .frm_input {
    margin-bottom: 15px; /* input 아래 간격 */

	border-radius: 8px;
	
}
.guest-info-form form small {
    display: block;
    margin-top: -10px; /* input 과 간격 조정 */
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #6c757d;
}
/* 비회원 결과 확인 버튼 영역 */
.guest-info-form div[style*="margin-top: 20px"] {
    text-align: center;
    margin-top: 30px !important; /* 간격 조정 */
    padding-top: 20px !important;
    border-top: 1px dashed #ced4da !important; /* 구분선 */
}
.guest-info-form div[style*="margin-top: 20px"] p {
     margin-bottom: 12px;
     font-size: 1em;
     color: #495057;
}
.guest-info-form div[style*="margin-top: 20px"] .btn-info { /* 결과 확인 버튼 */
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    color: white;
    padding: 8px 15px;
}
.guest-info-form div[style*="margin-top: 20px"] .btn-info:hover {
    background-color: #0aa9c4;
    border-color: #0aa9c4;
}

/* --- 모바일 input 너비 문제 해결 --- */
@media (max-width: 768px) {
    /* input, textarea 너비 100% 적용 및 box-sizing 확인 */
    .frm_input,
    textarea.frm_textarea {
        width: 100%;
        box-sizing: border-box; /* padding, border 포함하여 너비 계산 */
		padding: 10px;
    }
	.guest-info-form form .frm_input {
    margin-bottom: 15px; /* input 아래 간격 */
	padding: 10px;
		border-radius: 8px;
		
}
    /* 특정 컨테이너 내부 패딩 재조정 */
    .diagnostic-verify-container,
    .guest-info-form {
         padding-left: 20px;
         padding-right: 20px;
    }
    .guest-info-form h3 { font-size: 1.3em; }
    .guest-info-form p { font-size: 0.9em; }
    .guest-info-form form label { font-size: 0.95em; }
}