a { text-decoration: none; color: #000; }

/* --- Paperozi 웹폰트 설정 --- */
@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperozi';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* 공통 인터랙션 토큰 */
:root{
  --press-translate: -4px;
  --press-scale: .985;
  --elev-hover: 0 12px 25px rgba(0,0,0,.10);
  --elev-press: 0 20px 35px rgba(0,0,0,.18);
}
/* 모바일 탭 하이라이트 제거 & 선택 방지(눌림 시 텍스트 드래그 방지) */
.selection-card,
.btn-start,
.btn,
.navigation-buttons button,
.btn-diagnose {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  will-change: transform, box-shadow, background-color;
}

/* ------------------------------------- */
/* --- 기본 & 변수 설정 --- */
/* ------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 17px;
}

body {
    font-family: 'Paperozi', 'Noto Sans KR', sans-serif; /* Paperozi 폰트 우선 적용 */
    color: #333;
    line-height: 1.6;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

/* --- 공통 클래스 --- */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* --- 헤더 --- */
.main-header {
    padding: 1rem 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.main-header .logo {
    display: flex;
    align-items: center;
}
.main-header .logo img {

    margin-right: 0.5rem;
}
.main-header .logo span {
    font-weight: 700;
    font-size: 1.2rem;
}


/* --- 히어로 섹션 --- */
.hero {
    background-image:url(../img/hero-illustration.png);
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    min-height:720px; background-position: center;
}
.hero h1 {
    font-size: 4.5rem;
    font-weight: 400;
    margin-top: 3rem;
    margin-bottom: -1rem;
}
.hero h2 {
    font-size: 5.5rem;
    font-weight: 900;
    margin-bottom: 3rem;
}
.hero .button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.hero .button-group .btn {
    margin-bottom: 1rem;
}
.btn {
    display: inline-block;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;

}
.btn-primary {
    background-color: #18498a;
    color: #fff;
}
.btn-primary:hover {
    opacity: 0.9;
}
.btn-secondary {
    background-color: #299cff;
    color: #fff;
    border: 2px solid #a3d5ff;
}
.btn-secondary:hover {
    background-color: #a3d5ff;
    color: #18498a;
}
.hero-illustration {
    /*display: none;  모바일에서는 숨김, 데스크톱에서 표시 */
    background-image:url(../img/hero-illustration.png);
    background-repeat:no-repeat;
}

/* --- 소개 섹션 --- */
.intro {
/* 기존 배경색 유지 */
    background-color: #e5f1ff; 
    
    /* 배경 이미지 경로 복원 */
    background-image: url('../img/sectionBg_1.png'); 
    
    /* [핵심] 배경 반복 없음 */
    background-repeat: no-repeat; 
    
    /* [핵심] 하단 중앙에 고정 (x축: center, y축: bottom) */
    background-position: center bottom; 
    
    /* 가로 너비에 맞춰 꽉 채우기 (높이는 비율대로 자동) */
    background-size: 100% auto; 
    
    /* 내부 여백 (기존 유지) */
    padding: 6rem 0;
    
    /* 겹침 문제 방지 */
    position: relative;
}

@media (max-width: 768px) {
    .intro {
        /* 모바일에서는 배경이 너무 작아지지 않도록 cover 사용 권장 */
        /* 혹은 이미지가 잘려도 된다면 100% auto 유지 */
        background-size: cover; 
        
        padding: 4rem 0; /* 모바일 상하 여백 */
    }
}
.intro-header {
    text-align: center;
    margin-bottom: 4rem;
}
.intro .tag {
    display: inline-block;
    background-color: #18498a;
    color: #fff;
    padding: 0.8rem 3rem;
    border-radius: 60px;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.intro h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color:#0a376a;
}
.intro p {
    max-width: 700px;
    margin: 0 auto 2rem;
    color: #222;
    font-size: 1.1rem;
}
.button-group-inline a {
    margin: 0 0.5rem;
    font-size: 1.3rem;
}

.btn-outline {
    background: #fff;
    border: 2px solid #0a376a;
    color: #0a376a;
    font-weight: 700;
    transition: all 0.4s ease;

}
.btn-outline:hover {
    background-image: linear-gradient(to right, #299cff, #18498a);
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 15px rgba(24, 73, 138, 0.3);
}

.stats-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.stat-card {
    background: #fff;
    width: 210px;
    height: 210px;
    margin: 1rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.07);
    color: #fff;
}
.stat-card:nth-child(1) { background-color: #299cff; }
.stat-card:nth-child(2) { background-color: #26b6d4; }
.stat-card:nth-child(3) { background-color: #18498a; }
.cmp-cell {
    display: block !important;
    white-space: normal !important;
}
.cmp-cell strong {
    display: inline !important;
}
.stat-card strong {
    display: inline;
    font-size: 2rem;
    font-weight: 900;
}

/* --- 정의 섹션 --- */
.definition {
    padding: 6rem 0;
    background: #fff;
}
.definition h4 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 3rem;
}
.definition-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.def-card {
    background: #f4f6fa;
    padding: 2rem;
    border-radius: 15px;
    width: 100%; /* 모바일 기본값 */
    margin-bottom: 2rem; text-align:justify;
}
.def-card h5 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #299cff;
}
.def-card p {
    color: #555;
}

/* --- 특징 섹션 (어두운 배경) --- */
.features-dark {
    background-image: url('../img/sectionBg_2.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    color: #fff;
    padding: 7rem 0;
    position: relative;
}
.features-dark h4 {
    text-align: center;
    font-size: 2.6rem;
    margin-bottom: 0.2rem;
}
.feature-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.feat-card {
    background: rgba(0, 0, 0, 0.2);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    width: 100%;
    margin-bottom: 2rem;
}

.feat-icon {
    margin: 0 auto 1.5rem;
    display: block;
}
.feat-card h6 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}


/* --- 진단 구성 (노트) --- */
.composition-title {
    margin-top: 6rem;
    margin-bottom: 0.5rem;
}
.composition-subtitle {
    margin-bottom: 2rem;
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.subtitle-icon {
    margin-right: 0.5rem;
}

.notebook-content {
    min-height: 730px;
    background-image: url('../img/note1_new.png'); 
    background-position: center;
    background-repeat: no-repeat;
}
.notebook {
    color: #333;
    max-width: 957px;
    margin: 0 auto;
    position: relative;
    min-height: 630px;
}
.notebook-rings {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    z-index: 3;
}

.notebook-rings span {
    width: 30px;
    height: 30px;
    background: #e0e0e0;
    border-radius: 50%;
    border: 5px solid #299cff;
    margin: 0 1.5rem;
}
.notebook-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img/note1.png');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 1;
}
.notebook-content-area {
    position: static;   /* 절대 위치 해제 */
    width: 100%;
    height: auto;       /* 콘텐츠 높이만큼 늘어나게 */
    overflow-y: visible;/* 내부 스크롤 제거 */
}

.notebook-caption {
    margin-top: 1.5rem;
    color: #fff;
    opacity: 0.9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}
.caption-icon {
    margin-right: 0.5rem;
}

/* ==== 노트 영역 하단 여백/패딩 보정 ==== */

/* 노트 전체에 여유 공간 추가 */
.notebook {
    min-height: auto;
     /* 아래 여백 조금 더 */
}
/* 탭 패널 영역에 하단 여백을 넉넉히 */
.custom-panels-wrapper {
    padding: 0 5rem 3.5rem; /* 기존 2.5rem → 3.5rem 정도로 여유 */
}

/* 모바일에서는 더 촘촘하게, 대신 카드가 안 짤리게 */
@media (max-width: 768px) {
    .custom-panels-wrapper {
        padding: 1rem 1.5rem 3rem; /* 하단 3rem 정도 */
    }

    /* 모바일에서 카드끼리도 조금 간격 */
    .diag-block {
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
}

/* --- 노트북 내부 탭 및 콘텐츠 --- */
.custom-tabs-wrapper {
    padding-top: 20px;
    flex-shrink: 0;
}
.custom-tabs-wrapper ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-left: 0;
    margin: 0;
    gap: 1rem;
    flex-wrap: wrap;
}
.custom-tabs-wrapper li {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    border-radius: 48px;
    background-color: #e8ebf9;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}
.custom-tabs-wrapper li:hover {
    background-color: #1e4a95;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.custom-tabs-wrapper li.active {
    background-color: #0097a9;
    color: #fff;
    font-weight: 700;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.custom-panels-wrapper {
    padding: 0rem 5rem 2.5rem;
    position: relative;
}
.custom-tab-panel {
    display: none;
    background: transparent;
    animation: fadeIn 0.5s ease;
}
.custom-tab-panel.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.custom-tab-panel h2 {
    font-size: 1.8rem;
    color: #0a376a;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(10, 55, 106, 0.2);
    display: inline-block;
}
.custom-tab-panel p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    color: #333;
}
.custom-tab-panel ul {
    list-style: none;
    padding-left: 0;
}
.custom-tab-panel li {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    color: #444;
}
    
/* --- 역량 구성도 (diag-) : 캡쳐 레이아웃 --- */
.diag-wrapper {
    background-color: transparent;
    padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.diag-block {
    flex: 1 1 320px;
    max-width: 380px;
    background: #f7f9ff;
    border: 2px solid #c7d6ff;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* 상단 큰 타이틀 박스 */
.diag-header-top {
    padding: 1rem 1.6rem 0.85rem;
    background: linear-gradient(180deg, #edf3ff, #f7f9ff);
    border-bottom: 1px solid #d4e0ff; text-align:center;
}
.diag-header-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: #1e3a8a;
}
.diag-header-desc {
    margin-top: 0.25rem;
    font-size: 0.95rem;
    color: #64748b;
}

/* "핵심 역량" 라벨 */
.diag-core-label {
    padding: 0.7rem 1.6rem 0.5rem;
    font-size: 1rem; text-align:center;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #475569;
    border-bottom: 1px dashed #cbd5f5;
}

/* 리스트 전체 영역 */
.diag-items {
    padding: 0.8rem 1.4rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* 각 핵심역량 행 */
.diag-item {
    display: flex;
    align-items: stretch;
    border-radius: 10px;
    border: 1px solid #d4dbe9;
    background-color: #ffffff;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 왼쪽 번호 박스 */
.diag-num {
    width: 46px;
    background-color: #4b5563;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* 오른쪽 텍스트 영역 */
.diag-label {
    flex: 1;
    padding: 0.55rem 0.95rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
}
.diag-label strong {
    font-size: 0.98rem;
    color: #111827;
}
.diag-subtxt {
    font-size: 0.8rem;
    color: #6b7280;
}

/* hover 효과 */
.diag-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.18);
    transform: translateY(-3px);
}
.diag-item:hover .diag-num {
    background-color: #1e40af;
}
.diag-item:hover .diag-label strong {
    color: #1e40af;
}

/* 좁은 화면 대응 */
@media (max-width: 768px) {
    .diag-block {
        max-width: 100%;
    }
}

.caption-icon {
    margin-right: 0.5rem;
}

/* --- 진행 절차 섹션 --- */
.process {
    padding: 2rem 0;
    background: #eaf0fc;
}
.process .section-header {
    text-align: center;
    margin-bottom: 2rem;
}
.process h4 {
    font-size: 2.7rem;
    margin-bottom: 1.5rem;
    color:#1e4a95;
}

.tag-wrapper {
    text-align: right;
    margin-bottom: 4rem;
}
.tag.orange-tag {
    display: inline-flex;
    align-items: center;
    background: #f58220;
    color: white;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: 700;
}
.tag-icon {
    margin-right: 0.5rem;
}

.process-steps {
    position: relative;
    margin-bottom: 4rem;
    padding: 2rem 0; /* 모바일용 패딩 */
}

.step {
    width: 100%;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;	
}

/* 모바일에서 h6를 원으로 만듭니다 */
.step h6 {
    background-color: #1e4a95;
    color: #fff;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.4rem;
    margin: 0 auto 1rem;
    line-height: 1.3;
}
.step p {
    color: #666;
    padding: 0 1rem; /* 좌우 여백 추가 */
}

/* ▼▼▼▼▼ 여기부터 수정 (Info Boxm) ▼▼▼▼▼ */
.info-boxesm {
    margin-top: 4rem;
    margin-bottom: 3rem;
    display: flex; /* [추가] Flexbox를 사용하여 자식 요소들을 가로로 정렬합니다. */
    gap: 2rem; /* [추가] 두 박스 사이의 간격을 줍니다. */
    flex-wrap: wrap; /* [추가] 화면이 좁아지면 줄바꿈 되도록 설정합니다. */
}
.info-boxm {
    background: #ffffff;
    border-radius: 150px;
    padding: 1.5rem;
    /* margin-bottom: 2rem; [수정] 부모의 gap으로 간격을 제어하므로 이 속성은 제거합니다. */
    display: flex;
    align-items: center;
    flex: 1; /* [추가] 가능한 공간을 균등하게 차지하도록 설정합니다. */
    min-width: 300px; /* [추가] 최소 너비를 지정하여 너무 좁아지는 것을 방지합니다. */
}
/* ▲▲▲▲▲ 여기까지 수정 (Info Boxm) ▲▲▲▲▲ */

.info-boxesm .info-boxm:nth-of-type(1) {
    border: 3px solid #ffb400;
}
.info-boxesm .info-boxm:nth-of-type(2) {
    border: 3px solid #4889fd;
}
.info-iconm {
    width: 60px;
    height: 60px;
    margin-right: 1rem;
}
.info-textm strong {
    display: block;
    font-size: 1.3rem;
    margin-bottom: 0.25rem;
}
.info-textm p {
    margin: 0;
    padding: 0;
    line-height: 1.4;
}

.report-preview {
    padding: 4rem 0;
    background-image: url('../img/sectionBg_3.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.report-card {
    max-width: 750px;
    margin: 0 auto;
    padding: 1.4rem;
}

.report-list {
    list-style: none;
    margin-top: 13rem;
}

.report-list li {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: flex-start;
}
.report-list li:last-child {
    border-bottom: none;
}
.report-list li::before {
    content: '✓ ';
    color: #f58220;
    margin-right: 1rem;
    font-size: 1.5rem;
    line-height: 1.2;
}
.report-list li strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 700;
    color: #d25d00;
    margin-bottom: 0.2rem;
}
.report-list li p {
    font-size: 1rem;
    color: #222;
    line-height: 1.5;
}


/* --- 헤더 --- */
.main-header {
    padding: 1rem 0;
    background: #fff;
    border-bottom: 1px solid #ddd;
    position: fixed;   /* ← 고정 */
    top: 0;            /* ← 화면 맨 위 */
    left: 0;
    width: 100%;       /* ← 전체 폭 유지 */
    z-index: 1000;     /* ← 다른 요소보다 위 */
}

.main-header .logo {
    display: flex;
    align-items: center;
}
.main-header .logo img {
    margin-right: 0.5rem;
}
.composition-lead{
  margin: 0px 0 30px;
 
}

.lead-text{
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  color: #fff; text-align:center;
}


/* ▼▼▼▼▼ 콘텐츠 영역 스타일 ▼▼▼▼▼ */
.content-area1 {
    position: relative;
    padding: 6rem 0;
    background-image: url('../img/sectionBg_5.png'); /* 배경 이미지 */
    background-size: cover;
    background-position: center;
     /*background-attachment: fixed; 배경 고정 효과 */
    text-align: center;
}
.content-area1::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
     /*background-color: rgba(0, 0, 0, 0.5); 반투명 오버레이 */
}
.content-area1 .container {
    position: relative;
    z-index: 2;
}

.intro-text h1 {
    font-size: 3.3rem;
    font-weight: 800;
    margin-bottom: 0.4rem;
    color:#0e3979;
}
.intro-text p {
    font-size: 1.4rem;
    max-width: 600px;
    margin: 0 auto 0.2rem;
}

.diagnosis-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.card {
    padding: 2.5rem 2rem;
    border-radius: 15px;
    flex-basis: 320px; /* 카드의 기본 너비 */
    flex-grow: 1;
    max-width: 350px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
}

.card-youth {
    background: linear-gradient(135deg, #5fb463, #0b95b3);
}
.card-adult {
    background: linear-gradient(135deg, #3b9ff2, #6c71e1);
}
.card-senior {
    background: linear-gradient(135deg, #ffca28, #f57f17);
}

.card-icon {
    width: 120px;
    height: 120px;
    margin-bottom: 1.5rem;
}

.card h3 {
    font-size: 1.7rem;
    margin-bottom: 0.5rem;
    color:#fff;
    line-height: 1.3;
}
.card h3 .age-range {
    font-size: 1.2rem;
    font-weight: 400;
}

.card .subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color:#fff;
}
.card .description {
    flex-grow: 1;
    margin-bottom: 2.5rem;
    color:#fff;
}

.btn-diagnose {
    display: inline-block;
    padding: 0.8rem 2.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-out;
    font-size:1.3rem;
}
.btn-diagnose:hover {
    background-color: #fff;
    color: #333;
}

.btn-diagnose .btn-text {
    display: inline-block;
    transition: transform 0.3s ease-out;
}
.btn-diagnose:hover .btn-text {
    transform: translateX(-12px);
}

.btn-diagnose .arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    opacity: 0;
    transition: right 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-diagnose:hover .arrow {
    right: 18px;
    opacity: 1;
}

.next-button-container {
    margin-top: 4rem;
}
.btn-next {
    display: inline-block;
    padding: 1rem 4rem;
    background-color: #0e3979;
    border: none;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease-out;
    box-shadow: 0 5px 15px rgba(14, 57, 121, 0.4);
}
.btn-next:hover {
    background-color: #1c53a1;
    box-shadow: 0 8px 20px rgba(14, 57, 121, 0.5);
    transform: translateY(-3px);
}
.btn-next .btn-text {
    display: inline-block;
    transition: transform 0.3s ease-out;
}
.btn-next:hover .btn-text {
    transform: translateX(-15px);
}
.btn-next .arrow {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.8rem;
    opacity: 0;
    transition: right 0.3s ease-out, opacity 0.3s ease-out;
}
.btn-next:hover .arrow {
    right: 22px;
    opacity: 1;
}
.content-area2 {
    padding: 5rem 0;
    background-color: #f7f9fc;
    background-image: url('../img/sectionBg_6.png'); /* 배경 이미지 */
}

.section-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.section-intro h2 {
    font-size: 2.8rem;
    font-weight: 800;
    color: #222;
    margin-bottom: 0.5rem;
}

.section-intro p {
    font-size: 1.3rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

.selection-group {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 5rem;
}

.selection-card {
    position: relative;
    background-color: #fff;
    color: #222;
    border: 4px solid transparent;
    border-radius: 18px;
    background-clip: padding-box;
    padding: 2rem;

    width: 100%;
    max-width: 550px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    z-index: 1;
}

.selection-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--border-gradient);
    border-radius: 18px;
    z-index: -1;
}

.selection-card:hover {
    background-color: #f8faff;
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.1);
}

.selection-card::after {
    content: '✔';
    position: absolute;
    top: 50%;
    right: 1.5rem;
    left: auto;
    transform: translateY(-50%);
    font-size: 4rem;
    font-weight: 900;
    background: var(--border-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.selection-card:hover::after {
    opacity: 1;
}

.selection-card.digital    { --border-gradient: linear-gradient(135deg, #ddf2fb, #c3e6f7); }
.selection-card.ai         { --border-gradient: linear-gradient(135deg, #e9feff, #c3f4f7); }
.selection-card.self       { --border-gradient: linear-gradient(135deg, #fff9e9, #f8e9c4); }
.selection-card.knowledge { --border-gradient: linear-gradient(135deg, #fafef0, #eaf6cb); }

.selection-card h3 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.selection-card.digital h3     { color: #188ec4; }
.selection-card.ai h3          { color: #1db8be; }
.selection-card.self h3        { color: #da9d0f; }
.selection-card.knowledge h3 { color: #97c027; }

.selection-card p {
    font-size: 1.2rem;
    color: #555;
}
.selection-card .duration {
    font-size: 0.9rem;
    color: #888;
    margin-top: 0.5rem;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}
.section-title::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: rgba(14, 57, 121, 0.15);
    z-index: -1;
    border-radius: 5px;
}

.info-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    color: #444;
    margin-top: -3rem;
    margin-bottom: 3rem;
}
.info-text .icon {
    width: 24px;
    height: 24px;
}

/* 버튼을 감싸는 컨테이너: 가로 정렬 및 간격 조정 */
.start-button-container {
    display: flex;           /* 버튼을 가로로 배치 */
    justify-content: center; /* 중앙 정렬 */
    gap: 15px;               /* 버튼 사이 간격 */
    margin-top: 3rem;        /* 위쪽 여백 */
}

/* [추가] 이전 버튼 스타일 */
.btn-prev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 3rem;
    background-color: #6c757d; /* 회색 배경 (보조 버튼 색상) */
    border: none;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 이전 버튼 호버 효과 */
.btn-prev:hover {
    background-color: #5a6268; /* 호버 시 조금 더 진한 회색 */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

 
.btn-start {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: #0e3979;
    border: none;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 700;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 5px 15px rgba(14, 57, 121, 0.4);
}
.btn-start:hover {
    background-color: #1c53a1;
    box-shadow: 0 8px 20px rgba(14, 57, 121, 0.5);
    padding-left: 4.5rem;
}
.btn-start .icon {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    opacity: 0;
    transition: all 0.4s ease;
}
.btn-start:hover .icon {
    left: 25px;
    opacity: 1;
}


.content-area3 {
    padding: 5rem 2rem; /* 좌우 패딩 추가 */
    background-color: #d9f1ff;
    background-image: url('../img/sectionBg_6.png'); /* 배경 이미지 */
    background-repeat:no-repeat;
}

.survey-box {
    /* ▼▼▼▼▼ [수정됨] ▼▼▼▼▼ */
    width: 100%; /* 너비를 100%로 설정 */
    max-width: 880px; /* 최대 너비는 유지 */
    /* ▲▲▲▲▲ [수정됨] ▲▲▲▲▲ */
    margin: 0 auto;
    background-color: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ▼▼▼▼▼ 1. [수정] 버튼형 탭 메뉴 스타일 ▼▼▼▼▼ */
.survey-tabs {
    display: flex;
    list-style: none;
    gap: 10px; /* 버튼 사이 간격 */
    margin-bottom: 2.5rem;

    padding-left: 0;
}
.survey-tabs li {
    flex: 1; /* 모든 버튼이 동일한 너비 차지 */
    padding: 0.8rem 1rem;
    cursor: pointer;
    text-align: center;

    font-weight: 600;
    color: #495057; /* 기본 글자색 */
    background-color: #f0f2f5; /* 연한 배경색 (기본 상태) */
    border-radius: 8px; /* 버튼 모서리 둥글게 */
    transition: background-color 0.3s, color 0.3s;
}
.survey-tabs li:hover {
    background-color: #ced4da; /* 오버 시 중간 배경색 */
    color: #212529;
}
.survey-tabs li.active {
    background-color: #0e3979; /* 활성 상태일 때 진한 배경색 */
    color: #ffffff; /* 흰색 글자 */
    font-weight: 700;
}

/* ▼▼▼▼▼ [수정됨] 진행도 & 응원 메시지 스타일 ▼▼▼▼▼ */
.progress-section {
    margin-bottom: 2.5rem;
}
.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.progress-status {
    font-size: 0.95rem;
    color: #555;
    font-weight: 500;
}
.domain-tags {
    display: flex;
    gap: 0.5rem;
}
.domain-tags .tag {
    background-color: #e7f0ff;
    color: #004a99;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 600;
}
.progress-bar-container {
    width: 100%;
    height: 10px;
    background-color: #e9ecef;
    border-radius: 5px;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    background-color: #4dabf7;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}
.cheering-message {
    margin-top: 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: #495057;
    font-weight: 500;
}
/* ▲▲▲▲▲ [수정 완료] ▲▲▲▲▲ */

/* ▼▼▼▼▼ 별도 박스 공통 스타일 및 개별 스타일 ▼▼▼▼▼ */
.form-section {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 1.5rem;
    margin-top: 2rem;
}
.form-section h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: #333;
}

.agreement-summary p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1rem;
}
.agreement-summary .purpose {
    font-size: 0.9rem;
    color: #777;
}
.agreement-summary .purpose a {
    color: #0e3979;
    text-decoration: none;
    font-weight: 600;
}
.agreement-check {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
}
.agreement-check input[type="checkbox"] {
    margin-right: 0.5rem;
    width: 18px;
    height: 18px;
}

/* ▼▼▼▼▼ 폼 요소 스타일 ▼▼▼▼▼ */
.form-group {
    margin-bottom: 1rem;
}
.form-group:last-child {
    margin-bottom: 0;
}
.form-group label {
    font-weight: 600;
    display: block;
    margin-bottom: 0.5rem;
}
.input-group {
    display: flex;
    gap: 1rem;
}
select {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit; /* body의 폰트 상속 */
}

/* ▼▼▼▼▼ [추가] 성별 라벨 버튼 스타일 ▼▼▼▼▼ */
.gender-selector {
    display: flex;
    gap: 10px; /* 버튼 사이 간격 */
}
.gender-selector input[type="radio"] {
    display: none; /* 실제 라디오 버튼 숨기기 */
}
.gender-selector label {
    flex: 1; /* 버튼이 동일한 너비 차지 */
    padding: 0.8rem 1rem;
    cursor: pointer;
    text-align: center;
    font-weight: 600;
    color: #495057;
    background-color: #f0f2f5;
    border-radius: 8px;
    transition: background-color 0.3s, color 0.3s;
    border: 1px solid transparent;
}
.gender-selector label:hover {
    background-color: #ced4da;
    color: #212529;
}
/* 선택된 라디오 버튼에 연결된 라벨의 스타일 */
.gender-selector input[type="radio"]:checked + label {
    background-color: #0e3979;
    color: #ffffff;
    font-weight: 700;
    border-color: #0e3979;
}

/* ▼▼▼▼▼ [추가] 지역 선택 스타일 ▼▼▼▼▼ */
.location-selectors {
    display: flex;
    gap: 1rem;
}
.location-selectors select {
    flex: 1; /* select 박스가 동일한 너비 차지 */
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
}

/* ▼▼▼▼▼ [추가] 관심분야 선택 섹션 스타일 ▼▼▼▼▼ */
.interest-section .interest-header {
    margin-bottom: 1.5rem;
}
.interest-section .interest-header h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}
.interest-section .interest-header p {
    color: #666;
    font-size: 0.95rem;
}

.action-buttons {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.action-buttons button {
    padding: 0.5rem 1rem;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background-color 0.2s, border-color 0.2s;
}
.action-buttons button:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.interest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.checkbox-item:hover {
    border-color: #0e3979;
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 0.75rem;
    accent-color: #0e3979;
}

.checkbox-item label {
    font-weight: 500;
    color: #333;
    cursor: pointer;
    flex: 1;
}

.validation-message {
    color: #e53e3e;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}


/* --- 푸터 --- */
.main-footer {
    background-image: url('../img/sectionBg_4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ccc;
    padding: 3rem 0;
    font-size: 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}
.main-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
}

.main-footer .footer-info {
    margin-bottom: 1.5rem;
}
.main-footer .footer-info:last-child {
    margin-bottom: 0;
}
.main-footer .footer-info strong {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
}
.main-footer .footer-info p {
    margin: 0;
    line-height: 1.6;
}


.content-area4 {
    padding: 5rem 2rem; /* 좌우 패딩 추가 */
    background-color: #d9f1ff;
    background-image: url('../img/sectionBg_6.png'); /* 배경 이미지 */
    background-repeat:no-repeat;
}

.content-area5 {
    padding: 5rem 2rem; /* 좌우 패딩 추가 */
    background-color: #d9f1ff;
    background-image: url('../img/sectionBg_6.png'); /* 배경 이미지 */
    background-repeat:no-repeat;
}
.content-area6 {
    padding: 5rem 1rem;
    background-color: #d9f1ff;
    background-image: url('../img/sectionBg_6.png'); /* 배경 이미지 */
    min-height: calc(100vh - 160px); /* 푸터가 딸려오지 않도록 최소 높이 지정 */
    display: flex;
    align-items: center;
    justify-content: center;
}
        
.content-area7 {
    padding: 9rem 1rem;
    background-color: #d9f1ff;
    background-image: url('../img/sectionBg_7_2.png'), url('../img/sectionBg_7_1.png');
    background-position: right bottom, left top;
    background-repeat: no-repeat, no-repeat;
}    
        
/* --- 결과 페이지 전체 컨테이너 --- */
.result-container {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 2.5rem;
}

.result-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.result-subtitle {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 2rem;
    color: #555;
}

/* 종합 역량 유형 (디지털 소비자) 박스 */
.profile-box {
    border: 1px solid #c7ddff;
    background-color: #f7faff;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2.5rem;
}
.profile-box .title-area { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.profile-box .title { font-size: 1.5rem; font-weight: 700; }
.profile-box .subtitle { font-size: 1rem; color: #6c757d; font-weight: 600; }
.profile-box ul { list-style: none; padding-left: 0; }
.profile-box li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; color: #495057; }
.profile-box li svg { flex-shrink: 0; margin-top: 4px; }

/* AI / 디지털 역량 그리드 */
.competency-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
}

.competency-section { border: 1px solid #e9ecef; border-radius: 8px; padding: 2rem; }
.competency-section .section-title { font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 1.5rem; }
    
.rankings { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; }
.rank-item { display: flex; align-items: center; gap: 0.5rem; }
.rank-item span:first-child { font-size: 0.9rem; font-weight: bold; color: #888; }
.rank-tag { font-size: 0.9rem; font-weight: bold; padding: 0.25rem 0.8rem; border-radius: 15px; color: #fff; }
.rank-tag.green { background-color: #28a745; }
.rank-tag.teal { background-color: #20c997; }

.chart-placeholder {
    width: 100%; max-width: 350px; height: 300px; margin: 0 auto 2rem auto; border: 1px dashed #ced4da;
    display: flex; align-items: center; justify-content: center; color: #adb5bd; font-weight: 600;
    background-color: #f8f9fa; background-image: url('img/graph01.jpg');
    background-size: contain; background-repeat: no-repeat; background-position: center;
}
.digital-chart { background-image: url('img/graph02.jpg'); }

.summary-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.summary-box { background-color: #f8f9fa; border-radius: 8px; padding: 1.5rem; }
.summary-box .title { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.summary-box .topic { font-size: 1.1rem; font-weight: bold; color: #007bff; margin-bottom: 0.75rem; }
.summary-box .description { font-size: 0.9rem; color: #495057; line-height: 1.7; }
.weakness .topic { color: #dc3545; }


/* ▼▼▼▼▼ [수정됨] 역량 정의 테이블 스타일 ▼▼▼▼▼ */
.section-divider {
    border-top: 1px solid #e9ecef;
    margin: 3rem 0;
}

.score-details-grid {
    display: grid;
    grid-template-columns: 1fr; /* 사용 가능한 공간을 모두 차지하는 하나의 열을 생성 */
    gap: 2.5rem;
}
.score-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1.5rem;
}
.score-card .title {
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #333;
    text-align: center;
}

.definition-table {
    width: 100%;
    border-collapse: collapse;
}

.definition-table th, .definition-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
    font-size: 0.9rem;
    vertical-align: middle;
}

.definition-table th {
    font-weight: 700;
    background-color: #f8f9fa;
}
/*.definition-table th:nth-child(1), .definition-table td:nth-child(1) { 
    width: 25%;
    font-weight: 600;
}
.definition-table th:nth-child(2), .definition-table td:nth-child(2) { 
    width: 75%;
}*/
  
 
/* [추가] 움직이는 애니메이션 */
@keyframes floatAnimation {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

.question-box {
    position: relative;
    padding: 2rem;
    background-color: #f3e8ff;
    border-radius: 20px;
    margin-bottom: 3rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border: 2px solid #dcd1e6;

    display: flex;
    align-items: center;
    gap: 1rem;

    /* [추가] 도트 패턴 배경 */
    background-image: radial-gradient(circle at 1px 1px, rgba(0,0,0,0.08) 1px, transparent 0);
    background-size: 20px 20px;

    /* [추가] 애니메이션 적용 */
    animation: floatAnimation 4s ease-in-out infinite;
}

.question-box::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #f3e8ff;
}

.question-box::before {
    content: '';
    position: absolute;
    bottom: -23px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-top: 22px solid #dcd1e6;
    z-index: -1;
}

.question-box .icon {
    flex-shrink: 0;
}

.question-box p {
    font-size: 1.4rem;
    line-height: 1.7;
    text-align: left;
    font-weight: 600;
}

/* ▼▼▼▼▼ 5점 척도 답변 선택 스타일 ▼▼▼▼▼ */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center; /* 중앙 정렬을 위해 추가 */
}
.answer-options input[type="radio"] {
    display: none;
}
.answer-options label {
    display: flex;
    align-items: center;
    width: 60%; /* 데스크톱 너비 */
    padding: 0.75rem 1rem;
    border: none; /* 테두리 제거 */
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    background-color: #868e96; /* 기본 배경색 (어두운 회색) */
    color: #f8f9fa; /* 기본 글자색 (밝은 회색) */
}
/* 항목에 마우스를 올렸을 때 스타일 */
.answer-options label:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
/* 번호가 들어가는 원 스타일 (기본 상태) */
.answer-options .option-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ced4da; /* 밝은 회색 배경 */
    color: #343a40; /* 어두운 회색 글자 */
    font-weight: 700;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: background-color 0.3s, color 0.3s;
}
/* 답변 텍스트 스타일 */
.answer-options .option-text {
    flex-grow: 1;
    text-align: left;
}
/* 선택되었을 때의 스타일 */
.answer-options input[type="radio"]:checked + label {
    background-color: #845dcc; /* 보라색 배경 */
    color: #fff; /* 흰색 글자 */
}
/* 선택되었을 때 번호 원 스타일 */
.answer-options input[type="radio"]:checked + label .option-number {
    background-color: #845dcc; /* 보라색 배경 */
    color: #fff; /* 흰색 글자 */
}

/* ▼▼▼▼▼ 4점 척도 답변 선택 스타일 ▼▼▼▼▼ */
.answer-options2 {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: center; /* 중앙 정렬을 위해 추가 */
}
.answer-options2 input[type="radio"] {
    display: none;
}
.answer-options2 label {
    display: flex;
    align-items: center;
    width: 77%; /* 데스크톱 너비 */
    padding: 0.75rem 1rem;
    border: none; /* 테두리 제거 */
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.3s, transform 0.2s;
    cursor: pointer;
    background-color: #868e96; /* 기본 배경색 (어두운 회색) */
    color: #f8f9fa; /* 기본 글자색 (밝은 회색) */
}

/* 항목에 마우스를 올렸을 때 스타일 */
.answer-options2 label:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* 번호가 들어가는 원 스타일 (기본 상태) */
.answer-options2 .option-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ced4da; /* 밝은 회색 배경 */
    color: #343a40; /* 어두운 회색 글자 */
    font-weight: 700;
    margin-right: 1rem;
    flex-shrink: 0;
    transition: background-color 0.3s, color 0.3s;
}

/* 답변 텍스트 스타일 */
.answer-options2 .option-text {
    flex-grow: 1;
    text-align: left;
}

/* 선택되었을 때의 스타일 */
.answer-options2 input[type="radio"]:checked + label {
    background-color: #845dcc; /* 보라색 배경 */
    color: #fff; /* 흰색 글자 */
}

/* 선택되었을 때 번호 원 스타일 */
.answer-options2 input[type="radio"]:checked + label .option-number {
    background-color: #d6adff; /* 보라색 배경 */
    color: #fff; /* 흰색 글자 */
}


/* ▼▼▼▼▼ 이전/다음 버튼 스타일 (중앙 정렬 수정됨) ▼▼▼▼▼ */
.navigation-buttons {
    display: flex;
    justify-content: center; /* [수정] 중앙 정렬 */
    gap: 1.5rem; /* 버튼 사이 간격 추가 */
    margin-top: 2.5rem;
}
.navigation-buttons button {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.2s;
    flex-grow: 0; /* 중앙 정렬 시 버튼 크기가 늘어나지 않도록 방지 */
}
.navigation-buttons button:hover {
    transform: translateY(-2px);
}
.prev-btn {
    background-color: #e2e8f0;
    color: #334155;
}
.next-btn {

    background-color: #3b82f6;
    color: #fff;
}
        
        
/* ▼▼▼ 폭죽(콘페티) 애니메이션 스타일 ▼▼▼ */
#confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10001; /* 폭죽을 오버레이 위로 올림 */
    overflow: hidden;
}
.confetti {
    position: absolute;
    top: -20px;
    border-radius: 50%;
}
@keyframes confetti-fall {
    from {
        transform: translateY(0) rotateZ(0) rotateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(105vh) rotateZ(720deg) rotateY(720deg);
        opacity: 0;
    }
}

/* ▼▼▼ 축하 메시지 팝업 스타일 (중앙 정렬 수정됨) ▼▼▼ */

/* 팝업 배경 오버레이 (중앙 정렬 담당) */
.milestone-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center; /* 수평 중앙 */
    align-items: center; /* 수직 중앙 */
    z-index: 10000;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}
.milestone-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

/* 마일스톤 팝업 (메시지 자체) */
.milestone-popup {
    background: linear-gradient(135deg, #f7f3e8, #f0e6c5);
    color: #4b4b4b;
    padding: 2rem 3.5rem;
    border-radius: 15px;
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border: 5px solid #ffcc00;
    
    position: relative; 
    z-index: 10002; /* 팝업 메시지는 오버레이보다 높게 설정 */
    
    /* 초기 숨김 상태 */
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
/* 오버레이가 보일 때만 팝업 표시 */
.milestone-overlay.show #milestone-50,
.milestone-overlay.show #milestone-100 {
    display: block;
}
/* 팝업 자체의 show 클래스 (JS에서 제어) */
.milestone-popup.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.milestone-popup #milestone-100 {
    font-size: 3rem;
    color: #0e3979;
    border-color: #0e3979;
}

.milestone-popup .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #ffcc00;
    border-radius: 50%;
    margin: 0 0.5rem;
    opacity: 1;
    animation: pulse 1s infinite alternate; /* 점에 애니메이션 추가 */
}

@keyframes pulse {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.3); opacity: 0.8; }
}

/* ▲▲▲ 축하 메시지 팝업 스타일 (중앙 정렬 수정됨) ▲▲▲ */
        
/* 상단 히어로(일러스트 + 카피) */
.report-hero {

    border: 1px solid #e6eefb;
    background: #f7faff;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: 1.25rem;
}
.report-hero__top {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    align-items: center;
}
.report-hero__illu {
    width: 100%;
    aspect-ratio: 1.4/1;
    background: url('../img/report_hero.png') center/contain no-repeat;
}
.report-hero__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .25rem;
}
.report-hero__title h2 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.report-hero__subtitle {
    font-size: .95rem;
    color: #6b7280;
    margin-bottom: .25rem;
}
.report-hero__bullets {
    margin-top: .5rem;
    font-size: .95rem;
    color: #374151;
}
.report-hero__bullets li { margin-left: 1rem; line-height: 1.5; }

/* 섹션 타이틀 */
.section-headline {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 1.25rem 0 .75rem;
}


/* ▼▼▼▼▼ [수정] AI 기본역량 섹션 스타일 ▼▼▼▼▼ */
.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center;
    border: 1px solid #ccc;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* ===== 점수 테이블 (rank-table) ===== */
.ai-card h3{
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 .75rem;
  color:#0e3979;
}

.ai-card .rank-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.975rem;
}

.ai-card .rank-table thead th{
  padding: .9rem .75rem;
  text-align: left;
  font-weight: 700;
  color:#1f2937;
  background:#f7f9fc;
  border-bottom: 2px solid #e6eaf0;
}

.ai-card .rank-table tbody td{
  padding: .75rem .75rem;
  border-bottom: 1px solid #eef2f7;
  color:#374151;
  vertical-align: middle;
  background:#fff;
}

.ai-card .rank-table tbody tr:hover{
  background:#f8faff;
}

/* 숫자열 정렬 */
.ai-card .rank-table td:nth-child(1),
.ai-card .rank-table td:nth-child(3),
.ai-card .rank-table td:nth-child(4),
.ai-card .rank-table th:nth-child(1),
.ai-card .rank-table th:nth-child(3),
.ai-card .rank-table th:nth-child(4){
  text-align: center;
}

/* 순위 뱃지 */
.badge-order{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 42px;
  height: 28px;
  padding: 0 .6rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  color:#0e3979;
  background: #e7f0ff;
  border: 1px solid #cfe1ff;
}

/* --- 막대(bar) + 전국 평균 점 표시 --- */
/* HTML에서 style="--w:82%; --avg:68%;" 로 넘겨준 값을 사용 */
.bar{
  --h: 14px;
  position: relative;
  display: inline-block;
  width: min(100%, 320px);
  height: var(--h);
  border-radius: 999px;
  background: #edf2f7;                     /* 트랙 */
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
  vertical-align: middle;
  overflow: visible;
}

/* 실제 채워지는 값 */
.bar::before{
  content:"";
  position:absolute;
  inset: 0 auto 0 0;
  width: var(--w,0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#3b82f6,#0e3979);
  box-shadow: 0 1px 4px rgba(14,57,121,.2);
}

/* 점수 숫자 (막대 안, 우측) */
.bar > span{
  position:absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  font-size: .9rem;
  color:#ffffff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  pointer-events: none;
}

/* 전국 평균 점 */
.avg-dot{
  position:absolute;
  left: var(--avg,50%);
  top: 50%;
  transform: translate(-50%,-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background:#f59e0b;                       /* 오렌지 */
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(245,158,11,.25);
}

/* 접근성: 평균점에 스크린리더 숨김 텍스트를 넣고 싶으면 i 태그에 aria-label 사용 */

/* 행 간 구분을 조금 더 또렷하게 */
.ai-card .rank-table tbody tr td:nth-child(3){
  /* 막대가 있는 셀만 살짝 간격 */
  padding-top: .9rem;
  padding-bottom: .9rem;
}

/* 좁은 화면 대응 */
@media (max-width: 640px){
  .ai-card .rank-table{
    font-size: .92rem;
  }
  .bar{
    width: 100%;
    --h: 12px;
  }
  .badge-order{
    min-width: 38px; height: 26px;
    font-size: .83rem;
  }
}

.chart-box {
    border: 1px solid #ccc;
    height: 450px;
    border-radius: 8px;
    text-align:center;
    /*background: #fff url('../img/graph01.jpg') center/contain no-repeat;*/
}


/* 새로운 순위/점수 테이블 스타일 */
.rank-table-new {
    width: 100%;
    border-collapse: collapse;
}

.rank-table-new th, 
.rank-table-new td {
    padding: 0.5rem 0.25rem;
    vertical-align: middle;
}

.rank-table-new thead th {
    font-weight: 600;
    font-size: 1rem;
    color: #333;
    text-align: center;
    padding-bottom: 1.25rem;
}

/* 점수, 전국평균 컬럼에 왼쪽 점선 테두리 추가 */
.rank-table-new th:nth-child(3),
.rank-table-new td:nth-child(3) {
    border-left: 2px dashed #ccc;
}

.rank-table-new th:nth-child(4),
.rank-table-new td:nth-child(4) {
    border-left: 2px dashed #ccc;
}

.rank-table-new .rank {
    font-weight: 600;
    font-style: italic;
    font-size: 1.1rem;
    text-align: center;
    width: 40px;
}

.competency-tag {
    display: inline-block;
    background-color: #e6f7f6;
    padding: 0.6rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    color: #333;
    min-width: 100px;
    text-align: center;
}

.rank-table-new .score {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}
/* ▲▲▲▲▲ [수정] AI 기본역량 섹션 스타일 ▲▲▲▲▲ */


/* 강점/보완 카드 */
.summary-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    margin-top: .2rem;
}
.summary-card {
    border: 1px solid #e6eaf0; border-radius: 8px; background:#fff; padding: .9rem 1rem;
}
.summary-card .label {
    font-size: .95rem; font-weight: 800; margin-bottom: .2rem; color:#111827;
}
.summary-card .topic {
    font-size: 1.05rem; font-weight: 900; margin-bottom: .35rem; color:#0e3979;
}
.summary-card.weak .topic { color:#e11d48; }
.summary-card p { font-size:.95rem; color:#374151; line-height:1.6; }

/* 결과 타이틀 영역 */
.result-title { margin-bottom: .15rem; }
.result-subtitle { margin-bottom: .8rem; }

/* 하단 구분선 여백 조정 */
.section-divider { margin: 1.25rem 0; }
    
/* START: 진단 수준 분류 섹션 스타일 */
.diagnosis-level-section {
    text-align: center;
    padding: 1.0rem 0.5rem;
    margin-top: 2rem;
    background-color: #f8fafc;
    border-top: 1px solid #eef2f7;
    border-bottom: 1px solid #eef2f7;
}
.diagnosis-level-section .level-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1e293b;
}
.level-indicators {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.level-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-basis: 100px;
}
.level-badge {
    display: inline-block;
    padding: 0.5rem 2.5rem;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    font-size: 1.0rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.level-badge.basic { background-color: #f96673; }
.level-badge.lifestyle { background-color: #f58220; }
.level-badge.advanced { background-color: #72b94c; }
.level-score {
    font-size: 0.9rem;
    font-weight: 500;
    color: #334155;
}

.level-badge-sm {
    display: inline-block;
    padding: 0.3rem 1.1rem;
    border-radius: 20px;
    color: #fff;
    font-weight: 500;
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.level-badge-sm.basic { background-color: #f96673; }
.level-badge-sm.lifestyle { background-color: #f58220; }
.level-badge-sm.advanced { background-color: #72b94c; }


/* END: 진단 수준 분류 섹션 스타일 */

/* START: 신규 추천 과정 섹션 스타일 */
.recommendation-section {
    margin-top: 3rem;
}
.recommendation-header {
    margin-bottom: 2rem;
}
.recommendation-header .main-title {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-align:center;
}
.recommendation-header .sub-title {
    font-size: 1.1rem;
    color: #555;
    text-align:center;
}
.recommendation-group {
    margin-bottom: 2.5rem;
}
.recommendation-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
}
.recommendation-group-header .tag {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    font-weight: 600;
}
.recommendation-group-header .description {
    font-size: 1.1rem;
    font-weight: 700;
    color: #444;
}
.recommendation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}
.course-card-new {
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}
.course-card-new .card-tags {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.course-card-new .card-tags .tag {
    padding: 0.2rem 0.8rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}
.course-card-new .tag-subject {
    color: #444;
}
.course-card-new .tag-level {
    background-color: #f0f0f0;
    color: #555;
}
.course-card-new .tag-ai-ethics { background-color: #fff4e0; }
.course-card-new .tag-ai-safety { background-color: #e0f2f1; }
.course-card-new .tag-sme { background-color: #ede7f6; }

.course-card-new .card-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}
.course-card-new .card-description {
    color: #666;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* 내용을 채우고 버튼을 아래로 밀어냄 */
}
.course-card-new .card-meta {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 0.5rem;
}
.course-card-new .card-provider {
    font-size: 0.95rem;
    color: #777;
    margin-bottom: 1.5rem;
}
.course-card-new .card-button {
    display: block;
    width: 100%;
    padding: 0.8rem;
    background-color: #0e3979;
    color: #fff;
    border: none;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 0.3s;
}
.course-card-new .card-button:hover {
    background-color: #1c53a1;
}
  
/* END: 신규 추천 과정 섹션 스타일 */


/* ============================================================
   여기부터: Hover / Active / Checked 상태용 추가 CSS
   ============================================================ */

/* 카드 눌림(마우스/터치 down) */
.selection-card:active{
  transform: translateY(-4px) scale(.985);
  box-shadow: 0 20px 35px rgba(0,0,0,.18);
  filter: saturate(1.03) brightness(1.01);
}

/* 카드에 포커스(키보드 접근) 들어올 때 링 */
.selection-card:focus-within{
  outline: 3px solid rgba(24,73,138,.45);
  outline-offset: 2px;
  border-radius: 16px;
}

/* 라디오 선택 유지 상태 (지원 브라우저에서) */
.selection-card:has(input[type="radio"]:checked){
  background-color:#eef6ff;
  box-shadow: 0 14px 28px rgba(24,73,138,.18);
  transform: translateY(-6px);
}

/* 선택된 카드는 체크 아이콘 항상 표시 */
.selection-card:has(input[type="radio"]:checked)::after{
  opacity: 1;
}

/* 선택 전 Hover 때는 체크 살짝만 */
.selection-card:hover::after{
  opacity:.35;
}

/* 클릭영역 확장: 카드 전체가 라디오 클릭되게 */
.selection-card input[type="radio"]{
  position:absolute; opacity:0; inset:0; cursor:pointer;
}

/* 선택됐을 때 h3 컬러 강조 */
.selection-card.digital:has(input:checked)    h3{ color:#0f78a7; }
.selection-card.ai:has(input:checked)         h3{ color:#079aa0; }
.selection-card.self:has(input:checked)       h3{ color:#b58406; }
.selection-card.knowledge:has(input:checked)  h3{ color:#6aa112; }

/* 버튼류 공통 Active(눌림) 효과 */
.btn-start,
.btn,
.navigation-buttons button,
.btn-diagnose{
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
}

.btn-start:hover,
.btn:hover,
.navigation-buttons button:hover,
.btn-diagnose:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(14,57,121,.35);
}

/* 눌렀을 때 */
.btn-start:active,
.btn:active,
.navigation-buttons button:active,
.btn-diagnose:active{
  transform: translateY(-4px) scale(.985);
  box-shadow: 0 20px 35px rgba(0,0,0,.18);
  filter: brightness(1.02) saturate(1.02);
}

/* 개별 색 변화(기존 컬러 유지 + 액티브만 보강) */
.btn-start:active{ background-color:#164481; }
.prev-btn:active { background-color:#cfd8e3; }
.next-btn:active { background-color:#2563eb; }

/* 키보드 포커스 링 */
.btn-start:focus-visible,
.btn:focus-visible,
.navigation-buttons button:focus-visible,
.btn-diagnose:focus-visible{
  outline: 3px solid rgba(24,73,138,.5);
  outline-offset: 2px;
  border-radius: 10px;
}

/* =========================================================
   Layer Popup (CSS-only, :target 방식)
   - 링크: <a href="#pop-ai1" class="diag-item">AI 이해</a>
   - 팝업: <div id="pop-ai1" class="modal"><div class="modal__box">…</div></div>
   ========================================================= */
.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.7);         /* 검은 배경, 70% */
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.modal:target{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 팝업 박스 */
.modal__box{
  background: #fff;
  width: min(92vw, 720px);
  max-height: 85vh;
  overflow: auto;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  padding: 2rem 2.25rem;
  transform: translateY(10px) scale(.985);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.modal:target .modal__box{
  transform: translateY(0) scale(1);
}

/* 더미 닫기 버튼(X) */
.modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: #111827;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.modal__close:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0,0,0,.14);
}
.modal__close:active{
  transform: translateY(-3px) scale(.98);
}

/* 팝업 내부 타이틀/본문 가이드 (선택) */
.modal__title{
  font-size: 1.35rem;
  font-weight: 800;
  color: #0e3979;
  margin-bottom: .75rem;
}
.modal__title1{
  font-size: 1.2rem;
  font-weight: 500;
  color: #0e3979;
  /*margin-bottom: .15rem;*/
}
.modal__content {
    position: relative;
    padding-bottom: 15px; /* 점선과 내용 간 여백 */
}
 

/* 접근성: 키보드 포커스 링 */
.modal__close:focus-visible{
  outline: 3px solid rgba(14,57,121,.45);
  outline-offset: 2px;
}

/* 작은 화면 최적화 */
@media (max-width: 520px){
  .modal__box{ width: 94vw; padding: 1.5rem 1.25rem; border-radius: 12px; }
  .modal__close{ top: 8px; right: 8px; width: 36px; height: 36px; }
}

/* (선택) diag-item에 링크 커서/효과만 살짝 추가 */
.diag-item{ cursor: pointer; }
.diag-item:active{
  transform: translateY(-2px) scale(.992);
  transition: transform .15s ease;
}




/* --- 반응형 디자인 --- */
@media (min-width: 769px) {
    html {
        font-size: 16px;
    }
    .hero {
        text-align: left;
    }
    .hero .container {
        position: relative;
        z-index: 2;
    }
    .hero .button-group {
        flex-direction: row;
    }
    .hero .button-group .btn {
        margin-bottom: 0;
        margin-right: 1rem;
        font-size: 1.3rem;
    }
    .hero-illustration {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 50%;
        max-width: 600px;
        z-index: 1;
    }
    .def-card, .feat-card {
        width: 32%;
        margin-bottom: 0;
    }

    .process-steps {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        height:366px;
        background-image: url('../img/processBG.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        padding: 11rem 3rem;
    }
    .step {
        width: 30%;
        margin-bottom: 0;display: block;
    }
    .step h6 {
        background-color: transparent;
        color: #333;
        width: auto;
        height: auto;
        border-radius: 0;
        margin-bottom: 0.5rem;
    }
    .step p {
        padding: 0;
    }

    .info-boxes {
        display: flex;
        justify-content: space-between;
    }
    .info-box {
        width: 48%;
        margin-bottom: 0;
    }

    .main-footer .container {
        display: flex;
        justify-content: center;
        gap: 6rem;
        align-items: flex-start;
        text-align: left;
    }

    .main-footer .footer-info {
        margin-bottom: 0;
    }
	
}

@media (max-width: 992px) {
    .diagnosis-cards {
        flex-direction: column;
        align-items: center;
    }
}
        
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
            
    .notebook {
        min-height: auto;
    }

    .notebook-rings, .notebook-background-image {
        display: none;
    }

    .notebook-content-area {
        position: static;
        height: auto;
        overflow-y: visible;
        background-color: #fff;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
            
    .custom-tabs-wrapper {
        padding-top: 2rem;
    }
            
    .custom-panels-wrapper {
        padding: 1rem 1.5rem 1.5rem;
    }
}


		
/* ========== [추가] 모바일 반응형 notebook-content 스타일 ========== */

@media (max-width: 768px) {

    /* 모바일에서는 노트북 링을 숨깁니다. */
    .notebook-rings {
        display: none;
    }

    /* 모바일에서 .notebook-content 스타일을 변경합니다. */
    .notebook-content {
        background-image: none; /* [요청] 배경 이미지 제거 */
        background-color: #fff; /* [요청] 흰색 배경 적용 */
        border-radius: 20px; /* [요청] 모서리 20px 둥글게 */
        min-height: auto; /* 내용에 따라 높이가 자동으로 조절되도록 변경 */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 입체감을 위한 그림자 추가 */
        padding-top: 2rem; /* 탭 상단 여백 확보 */
    }

    /* 모바일에서 탭 상단 여백을 제거하여 흰색 카드 안에 자연스럽게 보이도록 조정합니다. */
    .custom-tabs-wrapper {
        padding-top: 0;
    }
}		

/* =========================================
   1) 고정 헤더 보정 – 본문 상단 여백
   ========================================= */
body {
    padding-top: 80px; /* 헤더 높이 + 여유 */
}

/* =========================================
   2) 태블릿 이하 공통 튜닝 (폰트·여백 축소)
   ========================================= */
@media (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    .hero {
        padding: 5rem 0 4rem;
        min-height: auto;
        background-position: center top;
    }
    .hero h1 {
        font-size: 3rem;
        margin-top: 2.5rem;
        margin-bottom: 0;
    }
    .hero h2 {
        font-size: 3.8rem;
        margin-bottom: 2.5rem;
    }

    .stat-card {
        width: 180px;
        height: 180px;
    }

    .features-dark {
        padding: 5.5rem 0;
    }

    .report-list {
        margin-top: 4rem;
    }
}

/* =========================================
   3) 모바일(≤768px) – 레이아웃 재정돈
   ========================================= */
@media (max-width: 768px) {

    .container {
        padding: 0 1rem;
    }

    /* 헤더/히어로 */
    .main-header .container {
        padding: 0 1rem;
    }

    .hero {
        text-align: center;
        padding: 4.5rem 1rem 3.5rem;
        min-height: auto;
    }
    .hero h1 {
        font-size: 2.1rem;
        margin-top: 2.3rem;
        margin-bottom: 0.2rem;
    }
    .hero h2 {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }
    .hero .button-group {
        flex-direction: column;
        align-items: stretch;
    }
    .hero .button-group .btn {
        width: 100%;
        max-width: 260px;
        margin-right: 0;
        margin-bottom: 0.8rem;
        font-size: 1rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* 인트로 영역 */
    .intro {
        padding: 4rem 0;
    }
    .intro-header {
        margin-bottom: 3rem;
    }
    .intro .tag {
        font-size: 1rem;
        padding: 0.5rem 1.8rem;
    }
    .intro h3 {
        font-size: 1.8rem;
    }
    .intro p {
        font-size: 1rem;
        padding: 0 0.5rem;
    }

    .button-group-inline {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }
    .button-group-inline .btn-outline {
        width: 100%;
        max-width: 280px;
        font-size: 1rem;
    }

    /* 통계 원형 카드 */
    .stats-cards {
        gap: 0.6rem;
    }
    .stat-card {
        width: 160px;
        height: 160px;
        margin: 0.5rem;
    }
    .stat-card strong {
        font-size: 1.6rem;
    }

    /* 정의 카드 */
    .definition {
        padding: 3.5rem 0 4rem;
    }
    .def-card {
        padding: 1.5rem;
    }

    /* 특징 섹션 */
    .features-dark {
        padding: 4.5rem 0;
    }
    .features-dark h4 {
        font-size: 2rem;
    }
    .feat-card {
        padding: 1.8rem 1.5rem;
    }

    /* 진단 구성 (노트) */
    .composition-title {
        margin-top: 3.5rem;
        text-align: center;
    }
    .composition-lead .lead-text {
        font-size: 0.95rem;
        padding: 0 0.5rem;
    }
    .composition-subtitle {
        justify-content: center;
        text-align: center;
        font-size: 0.9rem;
    }

    .notebook {
        max-width: 100%;
        min-height: auto;
    }
    .notebook-content {
        background-image: none;
        background-color: #fff;
        border-radius: 20px;
         min-height: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 1.6rem 1.2rem 2rem;
    }

    .custom-tabs-wrapper {
        padding-top: 0.8rem;
    }
    .custom-panels-wrapper {
        padding: 1rem 0.8rem 1.5rem;
    }

    .diag-wrapper {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.2rem 0;
    }
    .diag-block {
        max-width: 100%;
    }

    /* 진행 절차 */
    .process {
        padding: 4rem 0;
    }
    .process .section-header h4 {
        font-size: 2rem;
    }
    .tag-wrapper {
        text-align: center;
        margin-bottom: 2.5rem;
    }
    .process-steps {
        padding: 0;
        background: none;
    }
    .step h6 {
        width: 120px;
        height: 120px;
        font-size: 1.1rem;
    }

    /* info 박스(둥근 캡슐) */
    .info-boxesm {
        flex-direction: column;
        gap: 1.2rem;
    }
    .info-boxm {
        border-radius: 24px;
    }

    /* 결과 프리뷰 */
    .report-preview {
        padding: 4rem 0 4.5rem;
    }
    .report-card {
        padding: 1.5rem 1rem;
    }
    .report-list {
        margin-top: 10rem;
    }
    .report-list li {
        align-items: flex-start;
        padding: 1.2rem 0.5rem;
    }
    .report-list li strong {
        font-size: 1.3rem;
    }

    /* 모달 팝업 박스 */
    .modal__box {
        width: 92vw;
        padding: 1.5rem 1.25rem;
    }
}

/* =========================================
   4) 작은 모바일(≤480px) – 폰트/카드 더 축소
   ========================================= */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }
    .hero h2 {
        font-size: 2.2rem;
    }

    .stat-card {
        width: 145px;
        height: 145px;
    }

    .custom-tabs-wrapper ul {
        gap: 0.4rem;
    }
    .custom-tabs-wrapper li {
        padding: 0.55rem 0.7rem;
        font-size: 0.9rem;
    }

    .step h6 {
        width: 110px;
        height: 110px;
        font-size: 1rem;
    }

    .btn,
    .btn-outline,
    .btn-start,
    .btn-diagnose {
        font-size: 0.95rem;
    }
}


/* ====== AI 기본역량 카드 짤림 방지용 보정 ====== */
/* 노트 배경 박스에 여유 높이 & 패딩 추가 */
.notebook-content{
    min-height: auto;          /* 고정 높이 해제 */
    padding: 2.5rem 0 4.5rem;  /* 아래로 여유 공간 확보 */
    background-position: center top;
}

/* 패널 감싸는 래퍼도 여유를 조금 더 */
.custom-panels-wrapper{
    padding-bottom: 4.5rem;    /* 기존 값보다 크게 */
}

/* 다이어그램 카드 자체는 overflow 숨기지 않도록(그림자까지 보이게) */
.diag-block{
    overflow: visible;
}


/* AI 기본역량 노트 영역 상단 여백 조금 더 */
.notebook-content{
    padding-top: 40px;        /* 위 여백 추가 */
    padding-bottom: 30px;
    box-sizing: border-box;
}

/* 패널 안쪽 좌우 여백 약간 줄이기 */
.custom-panels-wrapper{
    padding-left: 5rem;
    padding-right: 5rem;
}

/* 역량 카드 묶음 중앙 정렬 */
.diag-wrapper{
    margin: 0 auto;           /* 가로 중앙 */
}

/* ============================================================
   [추가] 모바일 환경 탭 깨짐 방지 반응형 코드
   ============================================================ */
@media (max-width: 768px) {
    .survey-tabs {
        flex-wrap: wrap; /* 탭 메뉴들이 공간이 부족할 경우 다음 줄로 넘어가도록 설정합니다. */
        gap: 8px; /* 모바일 화면에서 탭 사이의 간격을 약간 줄입니다. */
    }

    .survey-tabs li {
        /* 
         * 한 줄에 2개의 탭이 보이도록 너비를 재계산합니다.
         * flex: 1; 속성을 유지하면서 flex-basis로 너비의 기준을 잡아줍니다.
         * calc(50% - 4px)는 전체 너비의 절반에서 gap의 절반 값을 뺀 것입니다.
         */
        flex-basis: calc(50% - 4px); 
        padding: 0.9rem 0.5rem; /* 모바일에서 상하좌우 여백을 조절하여 가독성을 높입니다. */
        font-size: 15px; /* 모바일에 적합하도록 폰트 크기를 약간 줄입니다. */
    }
}

/* ============================================================
   [추가] AI 기본역량 섹션 모바일 깨짐 방지 코드
   ============================================================ */
@media (max-width: 768px) {
    .ai-grid {
        /* 모바일에서는 1열(세로)로 쌓이도록 변경합니다. */
        grid-template-columns: 1fr; 
        gap: 2rem; /* 차트와 순위 테이블 사이의 세로 간격을 줍니다. */
        padding: 1rem; /* 모바일에서 내부 여백을 약간 줄여 공간을 확보합니다. */
    }

    /* 
     * 모바일에서 차트와 테이블이 세로로 쌓일 때, 
     * 테이블의 너비가 너무 좁아보이지 않도록 약간의 스타일을 보정합니다.
     */
    .ai-card .rank-table {
        font-size: 0.95rem; /* 모바일 가독성을 위해 폰트를 살짝 조정합니다. */
    }
}

/* ============================================================
   [추가] 결과 페이지 상단 히어로 섹션 모바일 대응 코드
   ============================================================ */
@media (max-width: 768px) {
    .report-hero__top {
        /* 모바일에서는 1열(세로)로 쌓이도록 변경합니다. */
        grid-template-columns: 1fr;
        gap: 1.5rem; /* 이미지와 텍스트 사이의 세로 간격을 조정합니다. */
        text-align: center; /* 텍스트를 중앙 정렬하여 보기 좋게 만듭니다. */
    }

    .report-hero__illu {
        /* 모바일에서 이미지가 너무 크지 않도록 최대 너비를 설정합니다. */
        max-width: 250px; 
        margin: 0 auto; /* 이미지를 가운데로 정렬합니다. */
    }

    .report-hero__title {
        /* 제목(타이틀)도 중앙에 위치하도록 정렬합니다. */
        justify-content: center;
    }

    .report-hero__bullets {
        text-align: left; /* 리스트 항목은 가독성을 위해 다시 왼쪽 정렬합니다. */
        display: inline-block; /* 블록 요소로 만들어 margin 적용이 용이하게 합니다. */
        margin-top: 1rem;
    }
}

/* ============================================================
   [추가] 역량 정의 테이블 모바일 반응형 스타일
   ============================================================ */
@media (max-width: 768px) {

    /* 1. 기존 테이블 헤더(thead) 숨기기 */
    .definition-table thead {
        display: none;
    }

    /* 2. 테이블 관련 요소들을 block으로 변경하여 유연한 레이아웃 만들기 */
    .definition-table,
    .definition-table tbody,
    .definition-table tr,
    .definition-table td {
        display: block;
        width: 100%;
    }

    /* 3. 각 행(tr)을 카드 모양으로 만들기 */
    .definition-table tr {
        margin-bottom: 1.5rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        overflow: hidden; /* 모서리 둥글게 처리 */
    }
    
    /* 4. 각 셀(td) 스타일 조정 */
    .definition-table td {
        padding: 0.75rem 1rem;
        text-align: left; /* 값을 오른쪽으로 정렬 */
        border-bottom: 1px solid #f1f3f5; /* 셀 사이 구분선 */
        position: relative;
    }
    .definition-table tr td:last-child {
        border-bottom: none; /* 마지막 셀 구분선 제거 */
    }

    /* 5. data-label을 이용해 왼쪽에 레이블(제목) 생성 */
    .definition-table td::before {
        content: attr(data-label); /* data-label 값을 가져와 content로 사용 */
        position: absolute;
        left: 1rem;
        font-weight: 600;
        color: #343a40;
        text-align: left;
    }

    /* 6. "정의" 셀은 내용이 길기 때문에 별도 스타일 적용 */
    .definition-table td[data-label="정의"] {
        padding: 1.5rem 1rem 1rem; /* 위쪽 여백 추가 */
        text-align: left; /* 내용은 왼쪽 정렬 */
        font-size: 0.9rem;
        color: #495057;
        line-height: 1.6;
    }
    /* "정의" 셀에는 가상 레이블이 필요 없으므로 숨김 */
    .definition-table td[data-label="정의"]::before {
        display: none;
    }

    /* 7. "역량" 셀을 카드의 헤더처럼 강조 */
    .definition-table td[data-label="역량"] {
        background-color: #f8f9fa;
        font-size: 1.1rem;
        font-weight: 700;
        text-align: left;
    }
     .definition-table td[data-label="역량"]::before {
        display: none;
    }
}
 /* ============================================================
   [추가] 추천 과정 그리드 모바일 반응형 스타일
   ============================================================ */
@media (max-width: 768px) {
    .recommendation-grid {
        /* 모바일에서는 2열 그리드를 1열로 변경하여 카드들이 세로로 쌓이게 합니다. */
        grid-template-columns: 1fr;
        gap: 1.5rem; /* 카드 사이의 세로 간격을 유지합니다. */
    }

    /* 모바일에서 추천 그룹 제목의 가독성을 높입니다. */
    .recommendation-group-header .description {
        font-size: 1rem;
    }
}

/* 이 코드는 CSS 파일의 맨 아래에 추가해도 괜찮습니다. */

@media (max-width: 768px) {
  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* =========================================================
   [최종] 모바일 레이아웃: 배경 꽉 채우기 + 왼쪽 정렬
   ========================================================= */
@media (max-width: 768px) {

    /* -----------------------------------------------------
       1. 메인 히어로 섹션
    ----------------------------------------------------- */
    .hero {
        /* 모바일 전용 이미지 */
        background-image: url('../img/hero-illustrationM.png') !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important; 

         /* 전체 레이아웃 */
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start !important; /* [변경] 왼쪽 정렬의 시작 */
    }

    /* 텍스트와 버튼이 있는 컨테이너 */
    .hero .container {
        width: 100%;
        display: flex;
        flex-direction: column;
        
        /* [핵심] 왼쪽 정렬 설정 */
        align-items: flex-start !important; 
        text-align: left !important;
        
        /* 왼쪽 여백 추가 (화면에 딱 붙지 않게) */
        padding-left: 1.5rem !important; 
        padding-right: 1.5rem !important;
        padding-bottom: 0 !important;
    }

    /* 타이틀 왼쪽 정렬 */
    .hero h1 {
        font-size: 1.8rem !important;
        margin-top: 0 !important;
        text-align: left !important; /* 왼쪽 정렬 */
        color: #fff !important;
        width: 100%;
    }
    .hero h2 {
        font-size: 2.2rem !important;
        margin-bottom: 2rem !important;
        text-align: left !important; /* 왼쪽 정렬 */
        color: #fff !important;
        word-break: keep-all;
        width: 100%;
        line-height: 1.3 !important;
    }

    /* 버튼 그룹 왼쪽 정렬 */
    .hero .button-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start !important; /* 버튼들을 왼쪽으로 정렬 */
        gap: 12px;
    }
    
    .hero .button-group .btn {
        width: auto !important;
        min-width: 200px;
        max-width: 100%;
        margin: 0 !important; /* 마진 초기화 */
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
    }

    /* -----------------------------------------------------
       2. 역량 진단 박스 (너비 확대 및 한줄 처리 유지)
    ----------------------------------------------------- */
    .custom-panels-wrapper {
        padding: 1rem 0.5rem 2rem !important; 
    }

    .diag-block {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        border-radius: 12px !important;
    }

    .diag-items { 
        padding: 0.8rem 0.5rem 1.4rem !important; 
    }
    
    .diag-item { padding-right: 5px !important; }
    .diag-label { padding: 0.55rem 0.3rem !important; }
    .diag-label strong {
        white-space: nowrap !important;
        letter-spacing: -0.07em !important;
        font-size: 0.9rem !important;
    }
    
    /* 헤더 로고는 중앙 정렬 유지 (원하시면 left로 변경 가능) */
    .main-header .container { display: flex; justify-content: center; }
    .main-header .logo { justify-content: center; width: 100%; }
}

/* =========================================================
   [진행절차 섹션] 반응형 완벽 대응 버전
   - px 대신 vw 단위를 사용하여 화면 크기에 따라 간격도 같이 늘어나게 함
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 배경 설정 */
    .process-steps {
        background-image: url('../img/processBGM.png') !important;
        background-repeat: no-repeat !important;
        background-position: top center !important;
        
        /* 이미지가 화면 너비에 딱 맞게 늘어남 */
        background-size: 100% auto !important; 
        
        /* 높이는 내용물에 따라 자동, 최소 높이만 확보 */
        min-height: 120vh !important; 
        height: auto !important;
        
        /* 첫 번째 원 시작점까지의 기본 여백 (이것도 비율로 설정) */
        padding-top: 2vw !important; 
        
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        
        /* 갭은 없애고 개별 마진으로 제어 */
        gap: 0 !important; 
    }

    /* 2. 각 단계 공통 */
    .step {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 !important;
    }

    /* -------------------------------------------------------
       ★ [핵심] vw 단위로 간격 조절하기 ★
       숫자를 조금씩 바꿔서 원 안에 텍스트를 맞춰주세요.
       (예: 20vw = 화면 너비의 20%만큼 띄움)
       ------------------------------------------------------- */

    /* 1단계: 안내 및 동의 */
    .step:nth-child(1) {
        /* 첫 번째 원의 시작 위치를 맞추세요 */
        margin-top: 32vw !important; 
    }

    /* 2단계: 진단 검사 */
    .step:nth-child(2) {
        /* 첫 번째 글씨 끝에서 두 번째 원까지의 거리 */
        /* 화면이 커지면 이 간격도 같이 커집니다 */
        margin-top: 48vw !important; 
    }

    /* 3단계: 결과 확인 */
    .step:nth-child(3) {
        /* 두 번째 글씨 끝에서 세 번째 원까지의 거리 */
        margin-top: 48vw !important; 
    }

    /* ------------------------------------------------------- */

    /* 3. 타이틀 스타일 */
    .step h6 {
        background-color: transparent !important;
        width: auto !important;
        height: auto !important;
        border-radius: 0 !important;
        margin: 0 0 0.2rem 0 !important; 
        color: #0e3979 !important;
        font-size: 1.5rem !important;
        font-weight: 800 !important;
        display: block !important;
    }

    /* 4. 설명 텍스트 */
    .step p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        color: #444 !important; 
        padding: 0 2rem !important; /* 좌우 여백을 좀 더 줘서 안전하게 */
        word-break: keep-all !important;
        font-weight: 600 !important;
    }
}

/* =========================================================
   [결과 리포트 섹션] 최종 수정 v2
   - 텍스트 위치를 갈색 집게 아래로 확실히 내림
   - 좌우 여백을 줘서 텍스트가 종이 안쪽에 들어오게 함
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 배경 설정 (비율 유지) */
    .report-preview {
        background-image: url('../img/sectionBg_3M.png') !important;
        background-size: 100% auto !important; /* 가로 꽉 채우기 */
        background-position: top center !important;
        background-repeat: no-repeat !important;
        
        /* 배경 이미지가 길기 때문에 충분한 높이 확보 */
        min-height: 70vh !important; 
        height: auto !important;
        padding: 0 !important;
    }

    /* 2. 내용 박스 (종이 영역 안으로 제한) */
    .report-card {
        /* ★중요★ 전체 너비의 78%만 사용하여 좌우 파란 테두리 안쪽으로 들어오게 함 */
        width: 60% !important; 
        margin: 0 auto !important; /* 중앙 정렬 */
        padding: 0 !important;
    }

    /* 3. 리스트 위치 잡기 (집게 부분 피하기) */
    .report-list {
        /* ★중요★ 집게 그림을 피해서 종이 시작 부분까지 내림 
           (화면 너비의 65%만큼 위에서 띄움) */
        margin-top:-15vw !important; 
        padding-top:33vw !important; 
        list-style: none !important;
        padding-bottom: 2rem !important;
    }

    /* 4. 리스트 아이템 스타일 정리 */
    .report-list li {
        /* 위아래 간격 좁힘 */
        padding: 1.2rem 0 !important;
        border-bottom: 1px dashed #ddd !important; /* 점선으로 변경하여 가볍게 */
        display: flex !important;
        flex-direction: column !important; /* 모바일에서는 세로로 쌓이게 */
        align-items: flex-start !important;
    }
    
    /* 마지막 선 제거 */
    .report-list li:last-child {
        border-bottom: none !important;
    }

    /* 체크 아이콘 감추기 (공간 확보 위해)하거나 작게 표시 */
    .report-list li::before {
        content: '✓' !important;
        color: #f58220 !important;
        font-size: 1.2rem !important;
        margin-bottom: 0.3rem !important;
        line-height: 1 !important;
    }

    /* 제목 스타일 (주황색) */
    .report-list li div strong {
        font-size: 1.2rem !important;
        color: #d25d00 !important;
        margin-bottom: 0.4rem !important;
        display: block !important;
        word-break: keep-all !important;
    }
    
    /* 본문 텍스트 스타일 */
    .report-list li div p {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        color: #444 !important;
        margin: 0 !important;
        word-break: keep-all !important;
    }
}

/* =========================================================
   [모바일 상단 여백 제거] 
   - 헤더 아래 흰색 틈 제거
   - 파란 배경 내부의 과도한 여백 축소
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 바디 상단 여백을 모바일 헤더 높이에 맞게 줄임 (흰색 틈 제거) */
    body {
        padding-top: 60px !important; /* 기존 80px에서 축소 */
    }

    /* 2. 콘텐츠 섹션 내부 여백 축소 (텍스트를 위로 올림) */
    .content-area1, 
    .content-area2, 
    .content-area3, 
    .content-area4 {
        /* 상하 여백을 절반으로 줄임 (6rem -> 3rem) */
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* 3. 섹션 내 제목 폰트 크기 및 여백 최적화 */
    .intro-text h1 {
        font-size: 2rem !important; /* 제목 크기 적당히 조절 */
        margin-bottom: 1rem !important;
    }
    
    .intro-text p {
        font-size: 1.1rem !important;
    }
    
    /* 혹시 모를 main 태그 여백 초기화 */
    main {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* =========================================================
   [회원정보 입력 페이지] 모바일 최적화
   1. 파란 배경 및 흰색 박스 여백(Padding) 축소
   2. 생년월일 레이아웃 변경 (년도 1줄 / 월,일 1줄)
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 파란색 배경 영역 상하 여백 확 줄이기 */
    .content-area3 {
        padding-top: 1.5rem !important;    /* 위쪽 여백 축소 */
        padding-bottom: 2rem !important;   /* 아래쪽 여백 축소 */
    }

    /* 2. 흰색 박스(설문 박스) 내부 여백 축소 */
    .survey-box {
        padding: 1.2rem !important;        /* 내부 여백을 2.5rem -> 1.2rem으로 줄임 */
        width: 95% !important;             /* 좌우 너비도 꽉 차게 */
    }

    /* 3. 단계 버튼(① 동의...) 아래 여백 줄이기 */
    .survey-tabs {
        margin-bottom: 1.5rem !important;  /* 버튼과 내용 사이 간격 축소 */
        gap: 5px !important;               /* 버튼 사이 간격도 조금 좁힘 */
    }

    /* 4. 생년월일 레이아웃 변경 (년 / 월,일) */
    /* 주의: 생년월일이 들어있는 .input-group에 적용됩니다 */
    .input-group {
        flex-wrap: wrap !important; /* 줄바꿈 허용 */
        gap: 8px !important;        /* 입력칸 사이 간격 조절 */
    }

    /* 첫 번째 셀렉트 박스 (년도) : 한 줄 꽉 채우기 */
    .input-group select:nth-child(1) {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* 두 번째, 세 번째 셀렉트 박스 (월, 일) : 반반씩 나누기 */
    .input-group select:nth-child(2),
    .input-group select:nth-child(3) {
        /* 전체 너비에서 간격(8px)의 절반인 4px씩을 뺌 */
        width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
    }
}

/* =========================================================
   [전체 페이지 공통] 모바일 좌우 너비 확장 (Full Width)
   - 파란색 배경 영역의 좌우 여백을 없애고
   - 내부 컨텐츠(흰색 박스 등)를 화면 양옆으로 꽉 채움
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 파란 배경 영역들(.content-areaX)의 좌우 패딩 제거 */
    .content-area1, .content-area2, .content-area3,
    .content-area4, .content-area5, .content-area6, .content-area7 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* 상하 여백도 모바일에 맞게 적당히 줄임 */
        padding-top: 3rem !important; 
        padding-bottom: 3rem !important;
    }

    /* 2. 공통 컨테이너(.container)의 좌우 여백을 최소화 */
    /* 기존 2rem(약 32px) -> 1rem(약 16px) 또는 더 작게 */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
    }

    /* 3. 흰색 설문 박스(.survey-box)를 화면 가득 채우기 */
    .survey-box {
        width: 94% !important;
        max-width: 100% !important;
        padding: 1.5rem 1rem !important; /* 내부 여백 조절 */
        margin: 0 auto !important;
        box-shadow: none !important; /* 모바일엔 그림자 굳이 필요없으면 제거(선택사항) */
    }

    /* (추가) 결과 리포트 등의 카드도 꽉 차게 */
    .report-card, .selection-card {
        width: 100% !important;
        max-width: 100% !important;
    }
/* 1. 해당 섹션(.content-area2)의 상단 여백을 늘림 */
 

    /* 2. 타이틀(.section-intro h2) 폰트 크기 축소 */
    .section-intro h2 {
        font-size: 1.8rem !important; /* 기존보다 작게 (약 28px) */
        padding-top: 4.5rem !important;
        margin-bottom: 0.5rem !important;		
        line-height: 1.3 !important;
    }

    /* 설명 텍스트도 비율에 맞춰 살짝 줄임 (선택 사항) */
    .section-intro p {
        font-size: 1.4rem !important;
        padding: 0 1rem !important; /* 좌우 여백 확보 */
    }	
	
.interest-grid {
        /* 기존 repeat(2, 1fr)을 덮어씌워 한 줄에 하나만 배치 */
        grid-template-columns: 1fr !important; 
        
        /* 항목 간 간격 미세 조정 (선택 사항) */
        gap: 0.5rem !important;
    }
	
/* 사이트에서 쓰이는 모든 종류의 콘텐츠 박스 클래스 나열 */
    .result-container, 
    .survey-box, 
    .report-card, 
    .form-section {
        /* 1. 너비를 94%로 강제 설정 (100% 덮어쓰기) */
        width: 94% !important;
        max-width: 94% !important;
        
        /* 2. 화면 중앙 정렬 */
        margin: 0 auto !important;
        
        /* 3. 테두리 둥글게 및 내부 여백 */
        border-radius: 20px !important;
        padding: 2.5rem 1.5rem !important;
        
        /* 박스 크기 계산 방식 고정 */
        box-sizing: border-box !important;
    }		
}

/* =========================================================
   [결과 페이지] 리스트형 변환 (th 한 줄, td 한 줄)
   - 복잡한 카드 디자인 제거
   - "항목명(위) -> 내용(아래)" 순서로 단순 나열
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 테이블 속성 완전 초기화 (블록 요소로 변경) */
    .result-container table, .result-container tbody, 
    .result-container tr, .result-container td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    /* 2. PC용 헤더(맨 윗줄) 숨김 */
    .result-container thead {
        display: none !important;
    }

    /* 3. 각 문제(행)를 구분하는 스타일 */
    .result-container tbody tr {
        background: #fff; 
        border-radius: 12px;       /* 모서리 둥글게 */
        margin-bottom: 30px !important; /* 문제끼리 간격 띄우기 */
        padding: 20px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    /* 4. 각 항목(칸) 스타일 : 위아래 배치 */
    .result-container td {
        display: flex !important;
        flex-direction: column !important; /* ★ 핵심: 위(제목) 아래(내용) 배치 ★ */
        align-items: flex-start !important;
        text-align: left !important;
        
        padding: 10px 0 !important;
        border-bottom: 1px dashed #eee !important; /* 항목 사이 점선 */
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
    }

    /* 마지막 칸은 밑줄 제거 */
    .result-container td:last-child {
        border-bottom: none !important;
    }

    /* 5. 가짜 헤더(제목) 만들기 - ::before 사용 */
    .result-container td::before {
        display: block;
        font-weight: 900;
        font-size: 0.95rem;
        color: #0e3979;      /* 제목 색상 (남색) */
        margin-bottom: 8px;  /* 제목과 내용 사이 간격 */
        background: #f4f6fa; /* 제목 배경색 (연한 회색) */
        padding: 4px 10px;
        border-radius: 4px;
        width: fit-content;  /* 글자 크기만큼만 배경 */
    }

    /* --- [각 항목별 제목 붙이기] --- */

    /* 1번 칸: 번호 */
    .result-container td:nth-of-type(1)::before { content: "번호"; }
    .result-container td:nth-of-type(1) { 
        font-size: 1.2rem; font-weight: bold; !important; margin-bottom: 10px;
    }

    /* 2번 칸: 문항내용 */
    .result-container td:nth-of-type(2)::before { content: "문항 내용"; }
    .result-container td:nth-of-type(2) { 
        font-size: 1.1rem; line-height: 1.5; font-weight: 600;
    }

    /* 3번 칸: 문항보기 */
    .result-container td:nth-of-type(3)::before { content: "보기"; }
    .result-container td:nth-of-type(3) { 
        line-height: 1.8; color: #555; background-color: #f9f9f9; padding: 10px !important; border-radius: 8px; width: 100% !important;
    }

    /* 4번 칸: 나의 답 */
    .result-container td:nth-of-type(4)::before { content: "나의 답"; color: #d63384; }
    .result-container td:nth-of-type(4) { 
        font-weight: bold; color: #d63384; font-size: 1.1rem; 
    }

    /* 5번 칸: 정답 */
    .result-container td:nth-of-type(5)::before { content: "정답"; color: #0d6efd; background: #f0f7ff; }
    .result-container td:nth-of-type(5) { 
        font-weight: bold; color: #0d6efd; font-size: 1.1rem; 
    }

    /* 6번 칸: 결과 */
    .result-container td:nth-of-type(6)::before { content: "채점 결과"; }
    .result-container td:nth-of-type(6) { font-weight: bold; }
}

/* =========================================================
   [진단 방식 선택] 체크 표시(✔) 시인성 개선
   - 연한 그라데이션 제거 -> 진한 남색 단색 변경
   - 그림자 추가로 눈에 확 띄게 수정
   ========================================================= */

/* 1. 체크 아이콘 스타일 재정의 */
.selection-card::after {
    /* 기존의 연한 그라데이션 텍스트 효과 제거 */
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
    
    /* 눈에 잘 띄는 진한 색상으로 변경 (원하는 색으로 수정 가능) */
    color: #0e3979 !important; 
    
    /* 입체감을 줘서 더 잘 보이게 함 */
    text-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    
    /* 크기 및 위치 미세 조정 */
    font-size: 4.5rem !important;
    right: 1.5rem !important;
    
    /* 애니메이션 부드럽게 */
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. 선택되었거나 마우스 올렸을 때 효과 */
.selection-card:hover::after,
.selection-card:has(input:checked)::after {
    opacity: 1 !important;
    
    /* 체크될 때 살짝 튀어오르는 효과 추가 */
    transform: translateY(-50%) scale(1.1) !important; 
}

/* =========================================================
   [모바일 테이블 강제 변환] 
   - 문항 확인 테이블을 모바일에서 '카드 리스트' 형태로 변경
   ========================================================= */
@media (max-width: 768px) {

    /* 1. 테이블의 모든 요소(표, 행, 열)를 블록(박스)으로 강제 변환 */
    .container table, 
    .result-container table,
    .container tbody, 
    .result-container tbody,
    .container tr, 
    .result-container tr,
    .container td, 
    .result-container td {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    /* 2. PC용 제목줄(thead) 숨김 */
    .container thead, 
    .result-container thead {
        display: none !important;
    }

    /* 3. 각 문제(행)를 하나의 '카드 박스'로 디자인 */
    .container tbody tr, 
    .result-container tbody tr {
        background: #fff;
         
        border-radius: 15px;
        margin-bottom: 2rem !important; /* 카드 사이 간격 */
        padding: 1.5rem !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
        position: relative;
    }

    /* 4. 각 항목(칸) 스타일 : 제목(왼쪽) - 내용(오른쪽) 또는 상하 배치 */
    .container td, 
    .result-container td {
        display: flex !important;
        flex-direction: column !important; /* 위(제목) 아래(내용) 배치 */
        align-items: flex-start !important;
        text-align: left !important;
        padding: 10px 0 !important;
        border-bottom: 1px dashed #eee !important;
        border-left: none !important;
        border-right: none !important;
        min-height: auto !important;
    }

    /* 마지막 칸 밑줄 제거 */
    .container td:last-child, 
    .result-container td:last-child {
        border-bottom: none !important;
    }

    /* 5. 가짜 헤더(제목) 자동 생성 (::before 사용) */
    .container td::before, 
    .result-container td::before {
        display: block;
        font-weight: 900;
        font-size: 0.95rem;
        color: #0e3979;
        margin-bottom: 6px;
        background: #f4f6fa;
        padding: 4px 10px;
        border-radius: 4px;
        width: fit-content;
    }

    /* --- [각 항목별 제목(라벨) 붙이기] --- */

    /* 1번 칸: 번호 */
    .container td:nth-of-type(1)::before, 
    .result-container td:nth-of-type(1)::before { content: "문항 번호"; }
    
    .container td:nth-of-type(1), 
    .result-container td:nth-of-type(1) { 
        font-size: 1.3rem; font-weight: 800;   !important; margin-bottom: 10px;
    }

    /* 2번 칸: 문항내용 */
    .container td:nth-of-type(2)::before, 
    .result-container td:nth-of-type(2)::before { content: "문항 내용"; }
    
    .container td:nth-of-type(2), 
    .result-container td:nth-of-type(2) { 
        font-size: 1.1rem; line-height: 1.5; font-weight: 600; color: #333;
    }

    /* 3번 칸: 문항보기 */
    .container td:nth-of-type(3)::before, 
    .result-container td:nth-of-type(3)::before { content: "보기"; }
    
    .container td:nth-of-type(3), 
    .result-container td:nth-of-type(3) { 
        background-color: #f9f9f9; padding: 15px !important; border-radius: 8px; color: #555;
    }

    /* 4번 칸: 나의 답 */
    .container td:nth-of-type(4)::before, 
    .result-container td:nth-of-type(4)::before { content: "나의 답";  color: #d63384; }
    
    .container td:nth-of-type(4), 
    .result-container td:nth-of-type(4) { 
        font-size: 1.1rem; font-weight: 800; color: #d63384;
    }

    /* 5번 칸: 정답 */
    .container td:nth-of-type(5)::before, 
    .result-container td:nth-of-type(5)::before { content: "정답";  color: #0d6efd; }
    
    .container td:nth-of-type(5), 
    .result-container td:nth-of-type(5) { 
        font-size: 1.1rem; font-weight: 800; color: #0d6efd;
    }

    /* 6번 칸: 결과 */
    .container td:nth-of-type(6)::before, 
    .result-container td:nth-of-type(6)::before { content: "결과"; }
    
    .container td:nth-of-type(6), 
    .result-container td:nth-of-type(6) { 
        font-weight: 700; 
    }
}
@media (max-width: 768px){
    .res-score-table td::before {
        display: none !important;
        content: none !important;
    }
}
/* =========================================================
   [진단 방식 선택] 체크 표시(✔) 시인성 개선 (공통)
   ========================================================= */
.selection-card::after {
    background: none !important;
    -webkit-text-fill-color: initial !important;
    text-fill-color: initial !important;
    color: #0e3979 !important; 
    text-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
    font-size: 4.5rem !important;
    right: 1.5rem !important;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.selection-card:hover::after,
.selection-card:has(input:checked)::after {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1.1) !important; 
}

/* =========================================================
   [추가] 결과 페이지 상단 설명 영역 (타이틀 + 체크리스트)
   ========================================================= */

/* 전체 래퍼 */
.ai-basic-description {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 3rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* 설명 박스 (카드) */
.description-box {
    background-color: #f7faff; /* 배경: 연한 블루 */
    border: 1px solid #c7d6ff; /* 테두리 */
    border-radius: 15px;
    padding: 2.2rem 2rem 2rem; /* 상단 여백 조금 더 줌 */
    box-shadow: 0 4px 12px rgba(14, 57, 121, 0.05);
    text-align: center; /* 내부 요소 중앙 정렬 */
    position: relative;
}

/* --- 1. 상단 작은 타이틀 (뱃지 스타일) --- */
.desc-header {
    margin-bottom: 1.5rem; /* 텍스트와 간격 */
}

.desc-title-badge {
    display: inline-block;
    background-color: #e7f0ff; /* 뱃지 배경: 밝은 하늘색 */
    color: #0e3979;            /* 글자색: 진한 남색 */
    font-size: 1.95rem;
    font-weight: 800;          /* 굵게 */
    padding: 0.4rem 1.2rem;
    border-radius: 50px;       /* 둥근 캡슐 모양 */
    border: 1px solid #cce0ff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* --- 2. 체크 아이콘 리스트 --- */
.desc-check-list {
    display: inline-block;     /* 박스 내에서 중앙에 위치하되, 텍스트는 좌측 정렬 */
    text-align: left;
    list-style: none;          /* 기본 점 없애기 */
    padding: 0;
    margin: 0;
    max-width: 100%;
}

.desc-check-list li {
    position: relative;
    padding-left: 1.8rem;      /* 아이콘 공간 확보 */
    margin-bottom: 0.8rem;     /* 항목 간 간격 */
    font-size: 1.15rem;
    line-height: 1.6;
    color: #444;
    word-break: keep-all;
}

.desc-check-list li:last-child {
    margin-bottom: 0;
}

/* V 체크 아이콘 (CSS로 생성) */
.desc-check-list li::before {
    content: '✔';             /* 체크 특수문자 */
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1rem;
    color: #299cff;            /* 체크 아이콘 색상 (밝은 파랑) */
    font-weight: 900;
    line-height: 1.6;          /* 텍스트와 높이 맞춤 */
}

/* 강조 텍스트 */
.desc-check-list li strong {
    color: #0e3979;            /* 진한 남색 */
    font-weight: 700;
}

/* 줄바꿈 제어 */
.pc-break { display: block; }  /* 긴 문장 줄바꿈 */


/* =========================================================
   [반응형] 모바일 (768px 이하)
   ========================================================= */
@media (max-width: 768px) {
    .ai-basic-description {
        margin-bottom: 2rem;
        padding: 0;
    }

    .description-box {
        width: 100% !important;
        border-radius: 12px;
        padding: 1.8rem 1.2rem;
        text-align: left;      /* 모바일에서는 전체 왼쪽 정렬이 자연스러움 */
    }
    
    .desc-header {
        text-align: center;    /* 타이틀은 중앙 유지 */
        margin-bottom: 1.2rem;
    }

    .desc-check-list li {
        font-size: 1rem;       /* 글자 크기 축소 */
        padding-left: 1.5rem;  /* 아이콘 간격 조절 */
    }
    
    .desc-check-list li::before {
        font-size: 1rem;
    }

    .pc-break { display: inline; } /* 모바일에서는 자연스럽게 줄바꿈되도록 해제 */
}

.chart-legend-guide {
    display: flex;
    justify-content: flex-end; /* 오른쪽 정렬 (테이블 숫자와 라인 맞춤) */
    align-items: center;
    gap: 15px;                 /* 아이템 간 간격 */
    margin-top: 15px;          /* 테이블과의 간격 */
    padding-right: 10px;       /* 우측 여백 미세 조정 */
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;                  /* 동그라미와 글자 사이 간격 */
    font-size: 0.9rem;
    font-weight: 600;
    color: #555;
}

/* 동그라미 공통 스타일 */
.l-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    box-sizing: border-box; /* 테두리 포함 크기 계산 */
}

/* 내점수 (파란색) - 이미지 스타일 반영 */
.l-dot.my-score {
    background-color: #3b82f6; /* 내부: 밝은 파랑 */
}

/* 전국 점수 (주황색) - 이미지 스타일 반영 */
.l-dot.avg-score {
    background-color: #f59e0b; /* 내부: 주황색 */
}

/* =========================================================
   [반응형] 모바일 대응
   ========================================================= */
@media (max-width: 768px) {
    .chart-legend-guide {
        justify-content: center; /* 모바일에서는 중앙 정렬 */
        margin-top: 20px;
    }
    
    .l-dot {
        width: 16px;  /* 모바일에서 조금 더 잘 보이게 키움 */
        height: 16px;
    }
    
    .legend-item {
        font-size: 0.95rem;
    }
}

/* =========================================================
   [sub07_2.html 전용] 이미지 스타일 테이블 디자인
   ========================================================= */

/* 1. 컨테이너 박스 (흰색 배경, 그림자) */
.custom-table-design {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 2.5rem 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
    margin-bottom: 2rem;
}

/* 2. 타이틀 영역 (하단 굵은 검은 선) */
.c-table-title-area {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #222; /* 이미지의 굵은 가로선 */
}

.c-table-title-area h4 {
    font-size: 1.5rem;
    font-weight: 800;
    color: #222;
    margin: 0;
}

/* 3. 테이블 기본 스타일 */
.c-table-wrap {
    width: 100%;
    overflow-x: auto; /* 모바일에서 잘림 방지 */
}

.c-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 컬럼 너비 고정 */
}

/* 헤더 스타일 (배경 없이 깔끔하게) */
.c-table thead th {
    padding: 1rem 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    color: #333;
    border-bottom: 1px solid #eee; /* 헤더 아래 연한 선 */
}
/* 텍스트 정렬 */
.c-table thead th:nth-child(1), .c-table thead th:nth-child(2) { text-align: left; padding-left: 10px; }
.c-table thead th:nth-child(3), .c-table thead th:nth-child(4), .c-table thead th:nth-child(5) { text-align: center; }


/* 본문 행 스타일 */
.c-table tbody tr td {
    padding: 1.2rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f3f5; /* 행 구분 연한 선 */
}

/* --- 각 컬럼별 스타일 (이미지 참조) --- */

/* 1) 역량명: 회색빛 도는 검정, 약간 강조 */
.cell-name {
    font-size: 1.05rem;
    font-weight: 600;
    color: #444;
    padding-left: 10px;
}

/* 2) 정의: 짙은 회색, 일반 굵기 */
.cell-def {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
    padding-right: 1rem;
}

/* 3) 내 점수: 파란색(#2962ff 계열), 굵게 */
.cell-score-my {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #2962ff; /* 이미지의 파란색 */
}

/* 4) 전국 평균: 연한 회색 */
.cell-score-avg {
    text-align: center;
    font-size: 1.1rem;
    color: #888;
}

/* 5) 수준 뱃지: 둥근 알약 모양 */
.cell-level {
    text-align: center;
}

.lv-badge {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    min-width: 60px;
}

/* 뱃지 색상 (이미지 매칭) */
.lv-badge.basic {
    background-color: #ff5252; /* 기초: 붉은색/분홍색 계열 */
}
.lv-badge.lifestyle {
    background-color: #ff9800; /* 생활: 주황색 */
}
.lv-badge.advanced {
    background-color: #66bb6a; /* 심화: 연두/초록색 계열 */
}


/* =========================================================
   [반응형] 모바일 (768px 이하)
   ========================================================= */
@media (max-width: 768px) {
    .custom-table-design {
        padding: 1.5rem 1rem; /* 패딩 축소 */
    }
    
    .c-table-title-area h4 {
        font-size: 1.3rem;
    }
    
    /* 테이블 레이아웃 변경 (좁은 화면 대응) */
    .c-table thead { display: none; } /* 모바일 헤더 숨김 */
    
    .c-table, .c-table tbody, .c-table tr, .c-table td {
        display: block;
        width: 100%;
    }
    
    .c-table tbody tr {
        margin-bottom: 1.5rem;
        border: 1px solid #eee;
        border-radius: 12px;
        padding: 1rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    
    .c-table tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px dashed #f1f3f5;
        text-align: right;
    }
    .c-table tbody tr td:last-child { border-bottom: none; }

    /* 모바일용 라벨(가짜 헤더) 추가 */
    .c-table tbody tr td::before {
        content: attr(class); /* 임시 */
        display: block;
        font-weight: 700;
        color: #333;
        font-size: 0.9rem;
    }
    
    /* 각 셀별 라벨 텍스트 지정 */
    .cell-name::before { content: "역량"; }
    .cell-def::before { content: "정의"; margin-bottom: 0.3rem; }
    .cell-score-my::before { content: "내 점수"; color: #2962ff; }
    .cell-score-avg::before { content: "전국 평균"; }
    .cell-level::before { content: "수준"; }

    /* 정의(Definition) 셀은 내용이 기니까 상하 배치 */
    .cell-def {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .col-w-1, .col-w-2, .col-w-3 { width: auto; }
}
/* =========================================================
   [추가] 테이블 하단 진단 수준 범례 (기초/생활/심화)
   ========================================================= */

.table-level-legend {
    display: flex;
    justify-content: flex-end; /* 우측 정렬 */
    align-items: flex-start;
    gap: 20px;                 /* 아이템 간 간격 */
    margin-top: 1.5rem;        /* 테이블과의 간격 */
    padding-right: 10px;       /* 우측 여백 미세 조정 */
}

.legend-item {
    display: flex;
    flex-direction: column;    /* 세로 정렬 (뱃지 위, 점수 아래) */
    align-items: center;       /* 가운데 정렬 */
    gap: 6px;                  /* 뱃지와 텍스트 사이 간격 */
}

/* 범례용 작은 뱃지 스타일 (기존 lv-badge 상속 + 크기 조절) */
.lv-badge.sm-size {
    padding: 0.3rem 1rem;      /* 패딩 축소 */
    font-size: 0.85rem;        /* 글자 크기 축소 */
    min-width: 50px;           /* 최소 너비 축소 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* 그림자 살짝 */
}

/* 점수 텍스트 스타일 */
.l-score {
    font-size: 0.8rem;
    color: #1e293b;            /* 진한 회색 (가독성 확보) */
    font-weight: 700;          /* 굵게 */
    letter-spacing: -0.02em;
}


/* =========================================================
   [반응형] 모바일 (768px 이하)
   ========================================================= */
@media (max-width: 768px) {
    .table-level-legend {
        justify-content: center; /* 모바일에서는 중앙 정렬 */
        margin-top: 2rem;
        gap: 15px;
    }

    .lv-badge.sm-size {
        font-size: 0.8rem;
        padding: 0.25rem 0.8rem;
    }
}
/* =========================================================
   [NEW] 메인 인트로 섹션 (AI·디지털 기본역량 진단이란?)
   - 디자인 컨셉: Soft, Modern, Shadow, Round
   ========================================================= */

/* 전체 래퍼 */
.new-intro-wrapper {
    width: 100%;
    max-width: 1100px; /* 너비 살짝 확장 */
    margin: 0 auto;
    padding: 4rem 0;
    color: #333;
    font-family: 'Paperozi', 'Noto Sans KR', sans-serif;
    text-align: left;
}

/* 1. 메인 헤더 */
.new-main-header {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
}
.new-h3 {
    font-size: 2.6rem;
    color: #111;
    margin-bottom: 1rem;
    font-weight: 900;
    letter-spacing: -0.03em;
}
.new-sub-desc {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #666;
    font-weight: 400;
}

/* 섹션 공통 타이틀 (포인트 디자인 변경) */
.new-h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e3a8a; /* 깊은 남색 */
    margin-bottom: 2rem;
    display: inline-block;
    position: relative;
    z-index: 1;
}
/* 타이틀 밑에 형광펜 효과 */
.new-h4::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 12px;
    background-color: #e0eaff; /* 연한 파랑 형광펜 */
    z-index: -1;
    border-radius: 4px;
}

.new-section {
    margin-bottom: 7rem;
}

/* 2. 알아보기 (Q&A) 그리드 - 카드형 디자인 */
.new-qa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3열 배치 */
    gap: 25px; /* 좌우 간격 */
    align-items: stretch;
}

.new-qa-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 공통 박스 스타일 (테두리, 둥근 모서리) */
.qa-box {
    width: 100%;
    border: 2px solid #3b60a9; /* 이미지의 진한 파란색 테두리 */
    border-radius: 15px;       /* 둥근 모서리 */
    padding: 1.5rem;
    box-sizing: border-box;
    line-height: 1.5;
    word-break: keep-all;
}

/* 질문 박스 (위쪽) */
.qa-box.question {
    background-color: #eef4ff; /* 연한 하늘색 배경 */
    color: #3b60a9;            /* 텍스트 색상 (테두리와 동일) */
    font-weight: 700;          /* 굵은 글씨 */
    font-size: 1.2rem;
    text-align: center;        /* 가운데 정렬 */
    min-height: 100px;         /* 높이 확보 */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(59, 96, 169, 0.1); /* 살짝 그림자 */
}

/* V자 화살표 (연결 부위) - 이미지와 똑같이 구현 */
.qa-arrow-v {
    width: 16px;
    height: 16px;
    border-right: 3px solid #3b60a9;  /* 오른쪽 선 */
    border-bottom: 3px solid #3b60a9; /* 아래쪽 선 */
    transform: rotate(45deg);         /* 45도 회전시켜 V자 만들기 */
    margin: 10px 0;                   /* 위아래 간격 */
    background: transparent;
}

/* 답변 박스 (아래쪽) */
.qa-box.answer {
    background-color: #ffffff; /* 흰색 배경 */
    color: #222;               /* 검정 텍스트 */
    font-size: 1rem;
    text-align: left;          /* 왼쪽 정렬 */
    flex-grow: 1;              /* 높이 채우기 */
    line-height: 1.6;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 답변 내 강조 텍스트 */
.qa-box.answer strong {
    font-weight: 800;
    color: #000;
}

/* ---------------------------------------------------------
   [반응형] 모바일 (768px 이하)
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .new-qa-grid {
        grid-template-columns: 1fr; /* 모바일에서는 1열로 */
        gap: 40px; /* 아이템 간 간격 넓힘 */
    }

    .qa-box.question {
        font-size: 1.1rem;
        min-height: auto;
        padding: 1.2rem;
    }

    .qa-box.answer {
        font-size: 0.95rem;
        padding: 1.2rem;
    }
    
    /* 모바일에서 화살표 간격 미세 조정 */
    .qa-arrow-v {
        margin: 8px 0; 
    }
}


/* 3. 중요성 그리드 - 아이콘 카드 스타일 */
.new-importance-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}
.imp-card {
    background: #fff;
    border-radius: 20px;
    padding: 2.2rem;
    border: 1px solid #f1f5f9; /* 아주 연한 테두리 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.imp-card:hover {
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.12);
    border-color: #bfdbfe;
    transform: translateY(-3px);
}
/* 장식용 배경 원 */
.imp-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(59,130,246,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
}

.imp-card h5 {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1rem;
    color: #1e293b;
    display: flex;
    align-items: center;
}
.imp-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    word-break: keep-all;
}
.imp-card strong {
    color: #0f172a;
    font-weight: 700;
}


.new-compare-table {
    display: grid;
    border-radius: 20px; /* 전체 둥글게 */
    overflow: hidden;
    /* 테두리 대신 부드러운 그림자와 얇은 라인으로 구분 */
    box-shadow: 0 0 0 1px #e2e8f0, 0 10px 30px rgba(0,0,0,0.03);
    background-color: #fff;
}

.cmp-row {
    display: grid;
    /* [라벨 160px] [AI 1fr] [디지털 1fr] */
    grid-template-columns: 160px 1fr 1fr; 
    border-bottom: 1px solid #f1f5f9; /* 가로 줄 */
}
.cmp-row:last-child { border-bottom: none; }

/* 헤더 행 스타일 */
.cmp-row.header-row {
    background-color: #fff;
}

/* 셀 공통 스타일 */
.cmp-cell {
    padding: 1.8rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1.6;
    word-break: keep-all;
    color: #334155;
}

/* --- [1] 좌측 상단 빈 영역 --- */
.cmp-cell.empty {
    background-color: #fff; /* 흰색 배경으로 비워둠 */
    border-right: 1px solid #f1f5f9; /* 오른쪽 라인 유지 */
}

/* --- [2] AI 헤더 (파란색) --- */
.cmp-cell.ai-head {
    background-color: #eff6ff; /* 연한 파랑 배경 */
    border-left: 1px solid #fff;
}
.cmp-cell.ai-head strong { 
    color: #2563eb; font-size: 1.3rem; margin-bottom: 0.3rem; 
}
.cmp-cell.ai-head span { 
    color: #60a5fa; font-size: 0.95rem; font-weight: 600; 
}

/* --- [3] 디지털 헤더 (초록색) --- */
.cmp-cell.dt-head {
    background-color: #f0fdf4; /* 연한 초록 배경 */
    border-left: 1px solid #fff;
}
.cmp-cell.dt-head strong { 
    color: #16a34a; font-size: 1.3rem; margin-bottom: 0.3rem; 
}
.cmp-cell.dt-head span { 
    color: #4ade80; font-size: 0.95rem; font-weight: 600; 
}

/* --- [4] 왼쪽 라벨 (진한 남색) --- */
.cmp-cell.label {
    background-color: #1e293b; /* 이미지와 동일한 다크 네이비 */
    color: #fff;
    font-weight: 700;
    text-align: center;
    align-items: center;
    font-size: 1.1rem;
    border-right: 1px solid #334155; /* 라벨 오른쪽 구분선 */
}


/* =========================================================
   [반응형] 모바일 비교표 최적화 (카드 리스트 변환)
   ========================================================= */
@media (max-width: 768px) {
    .new-compare-table {
        display: block;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 1rem;
    }

    .cmp-row {
        display: flex;
        flex-direction: column;
        margin-bottom: 2rem;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        border: 1px solid #e2e8f0;
    }

    .cmp-row.header-row {
        display: none; /* 헤더 숨김 */
    }

    .cmp-cell {
        width: 100%;
        padding: 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        text-align: left;
        align-items: flex-start;
        display: block;
    }

    .cmp-cell.label {
        background-color: #1e293b;
        color: #fff;
        font-size: 1.25rem;
        padding: 1rem 1.5rem;
        text-align: left;
        border-radius: 0;
        border-right: none;
        display: flex; 
        align-items: center;
    }
    
    .cmp-cell.label br { display: none; }
    .cmp-cell.label br + *::before { content: " "; }

    /* 모바일용 가짜 헤더(배지) */
    .cmp-cell::before {
        display: inline-block;
        font-size: 0.9rem;
        font-weight: 800;
        margin-bottom: 0.6rem;
        padding: 0.3rem 0.8rem;
        border-radius: 6px;
    }

    /* AI 내용 셀 */
    .cmp-row .cmp-cell:nth-child(2) { background-color: #fff; }
    .cmp-row .cmp-cell:nth-child(2)::before {
        content: "AI 기본역량 생성과 확장을 위한 능력";
        color: #2563eb;
        background-color: #eff6ff;
    }

    /* 디지털 내용 셀 */
    .cmp-row .cmp-cell:nth-child(3) { background-color: #fff; }
    .cmp-row .cmp-cell:nth-child(3)::before {
        content: "디지털 기본역량 규칙과 반복을 위한 기반 능력";
        color: #16a34a;
        background-color: #f0fdf4;
    }

    .cmp-row .cmp-cell:last-child { border-bottom: none; }
}

/* =========================================================
   [반응형] 모바일 비교표 최적화 (카드 리스트 변환)
   ========================================================= */
@media (max-width: 768px) {
    /* 테이블 컨테이너 해제 -> 투명하게 */
    .new-compare-table {
        display: block;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 1rem; /* 좌우 여백 확보 */
    }

    /* 각 행을 독립된 '카드'로 만듦 */
    .cmp-row {
        display: flex;
        flex-direction: column; /* 세로 배치 */
        margin-bottom: 2rem;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        border: 1px solid #e2e8f0;
    }

    /* PC용 헤더 행 숨김 */
    .cmp-row.header-row {
        display: none; 
    }

    /* 공통 셀 스타일 재정의 */
    .cmp-cell {
        width: 100%; /* 가로 꽉 채움 */
        padding: 1.5rem;
        border-bottom: 1px solid #f1f5f9;
        text-align: left; /* 왼쪽 정렬 강제 */
        align-items: flex-start; /* 플렉스 아이템 왼쪽 정렬 */
        display: block; /* 블록 요소로 변경하여 자연스러운 줄바꿈 유도 */
    }

    /* --- 1. 라벨(제목) 디자인 변경 --- */
    .cmp-cell.label {
        background-color: #1e3a8a;
        color: #fff;
        font-size: 1.25rem;
        padding: 1rem 1.5rem;
        text-align: left; /* 왼쪽 정렬 */
        border-radius: 0;
        
        /* <br> 태그 무시하고 한 줄 또는 자연스럽게 흐르도록 */
        display: flex; 
        align-items: center;
    }
    
    /* 라벨 안의 br 태그 숨김 처리 (한 문장처럼 보이게) */
    .cmp-cell.label br {
        display: none; 
    }
    /* br 대신 공백 추가 효과 */
    .cmp-cell.label br + *::before {
        content: " ";
    }

    /* --- 2. 가짜 헤더(배지) 추가 --- */
    /* 내용 셀 앞에 'AI' / '디지털' 배지 붙이기 */
    .cmp-cell::before {
        display: inline-block;
        font-size: 0.9rem;
        font-weight: 800;
        margin-bottom: 0.6rem;
        padding: 0.3rem 0.8rem;
        border-radius: 6px;
    }

    /* AI 내용 셀 */
    .cmp-row .cmp-cell:nth-child(2) {
        background-color: #fff; /* 배경 흰색 */
    }
    .cmp-row .cmp-cell:nth-child(2)::before {
        content: "AI 기본역량 생성과 확장을 위한 능력";
        color: #2563eb;
        background-color: #eff6ff;
    }

    /* 디지털 내용 셀 */
    .cmp-row .cmp-cell:nth-child(3) {
        background-color: #fff;
    }
    .cmp-row .cmp-cell:nth-child(3)::before {
        content: "디지털 기본역량 규칙과 반복을 위한 기반 능력";
        color: #16a34a;
        background-color: #f0fdf4;
    }

    /* 마지막 선 제거 */
    .cmp-row .cmp-cell:last-child {
        border-bottom: none;
    }
}

/* 5. 해외 사례 - 리얼 3D 아이콘 & 오렌지 컬러 테마 (반응형 정렬 개선) */
.new-global-section {
    background-color: #fff7ed; /* 아주 연한 오렌지(살구색) 배경 */
    border-radius: 30px;
    padding: 5rem 3rem 4rem;
    position: relative;
    margin-top: 6rem;
    border: none;
    box-shadow: 0 20px 50px rgba(234, 88, 12, 0.05);
}

.global-badge {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%); /* 정중앙 배치 */
    
    background: #ffffff;
    color: #ea580c; /* 진한 오렌지 */
    
    /* PC 패딩: 아이콘 공간(왼쪽)을 넉넉히 확보 */
    padding: 1.2rem 3rem 1.2rem 5.5rem; 
    
    font-weight: 800;
    font-size: 1.35rem;
    border-radius: 60px;
    
    box-shadow: 0 15px 35px rgba(249, 115, 22, 0.2), 0 5px 10px rgba(0,0,0,0.05);
    
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    transition: transform 0.3s ease;
    z-index: 10;
}

.global-badge:hover {
    transform: translateX(-50%) translateY(-5px);
}

/* 3D 아이콘 스타일 */
.badge-icon-3d {
    width: 90px; /* 아이콘 크기 */
    height: auto;
    position: absolute;
    left: -30px; /* 뱃지 왼쪽으로 시원하게 튀어나옴 */
    top: 50%;
    transform: translateY(-50%) rotate(-5deg);
    filter: drop-shadow(0 10px 20px rgba(234, 88, 12, 0.25)); 
    transition: transform 0.3s ease;
}

.global-badge:hover .badge-icon-3d {
    transform: translateY(-55%) rotate(0deg) scale(1.05);
}

.global-desc {
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 3.5rem;
    font-size: 1.2rem;
    color: #5f5f5f;
    font-weight: 500;
    word-break: keep-all;
}

.global-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.global-card {
    background: #fff;
    border-radius: 25px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 0 10px 25px rgba(234, 88, 12, 0.03); 
    transition: all 0.3s ease;
    border: 1px solid #ffedd5;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.global-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(234, 88, 12, 0.1);
    border-color: #fdba74;
}

.gc-title {
    font-size: 1.6rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    color: #222;
}

.gc-sub {
    font-size: 1rem;
    color: #f97316; /* 밝은 오렌지 */
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1.2rem;
    border-bottom: 2px solid #fff7ed; 
    display: inline-block;
    width: 100%;
    line-height: 1.3;
}

.global-card p {
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: left; /* 본문은 왼쪽 정렬 */
    color: #4b5563;
    word-break: keep-all;
    margin: 0;
    width: 100%;
}

.global-card strong {
    color: #c2410c;
    background: linear-gradient(to top, #ffedd5 40%, transparent 40%);
}


/* =========================================================
   [반응형] 모바일 정렬 최적화 (자연스럽게 수정)
   ========================================================= */
@media (max-width: 768px) {
    .new-global-section {
        padding: 4rem 1.5rem 2.5rem; /* 상단 여백 확보 */
        margin: 5rem 1rem 0;
        border-radius: 20px;
    }

    /* 뱃지 모바일 정렬 수정 */
    .global-badge {
        width: auto;
        /* 텍스트가 길어도 자연스럽게 보이도록 패딩 조정 */
        padding: 1rem 2rem 1rem 4.5rem; 
        font-size: 1.1rem;
        top: -30px;
        
        /* [핵심] 아이콘 때문에 치우쳐 보이는 현상 보정 */
        /* 왼쪽 패딩이 크므로, 시각적 중심을 맞추기 위해 약간 왼쪽으로 이동 */
        margin-left: -10px; 
    }

    .badge-icon-3d {
        width: 70px;  /* 모바일 사이즈 */
        left: -15px;  /* 덜 튀어나오게 조정 */
    }

    .global-desc {
        font-size: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 2.5rem;
        padding: 0 0.5rem;
    }

    .global-grid {
        grid-template-columns: 1fr; /* 1열 배치 */
        gap: 20px;
    }

    .global-card {
        padding: 2rem 1.5rem;
        align-items: flex-start; /* 모바일에서는 전체 왼쪽 정렬이 읽기 편함 */
        text-align: left;
    }

    .gc-title {
        font-size: 1.4rem;
        width: 100%;
    }
    
    .gc-sub {
        width: 100%;
        border-bottom-width: 1px;
        margin-bottom: 1.2rem;
        padding-bottom: 1rem;
    }
    
    .global-card p {
        font-size: 1rem;
    }
}

/* =========================================================
   [반응형] 모바일 (768px 이하)
   ========================================================= */
@media (max-width: 768px) {
    .new-intro-wrapper {
        padding: 1rem 0;
        width: 100%;
    }
    
    /* 헤더 */
    .new-main-header {
        margin-bottom: 3rem;
        text-align: left;
        padding: 0 1rem;
    }
    .new-h3 {
        font-size: 2rem;
        line-height: 1.3;
    }
    .pc-only { display: none; }
    
    .new-h4 {
        font-size: 1.4rem;
        margin-left: 1rem; /* 모바일 좌측 여백 */
    }
    

    /* Q&A */
    .new-qa-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 0 1rem;
    }
    .qa-box.question {
        min-height: 80px;
        font-size: 1.15rem;
    }
    .qa-box.answer {
        min-height: auto;
        padding: 1.5rem;
    }

    /* 중요성 */
    .new-importance-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 1rem;
    }
    .imp-card {
        padding: 1.8rem;
    }

    /* 비교표 (테이블 -> 카드형 변환) */
    .new-compare-table {
        display: block;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        padding: 0 1rem;
    }
    .cmp-row {
        display: block;
        margin-bottom: 2rem;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        border: 1px solid #e2e8f0;
    }
    .cmp-row.header-row {
        display: none; /* 헤더 숨김 */
    }
    .cmp-cell {
        padding: 1.2rem 1.5rem;
        border-bottom: 1px solid #f1f5f9;
    }
    
    /* 라벨 디자인 변경 (카드 제목처럼) */
    .cmp-cell.label {
        background-color: #1e3a8a;
        color: #fff;
        font-size: 1.2rem;
        padding: 1rem;
        text-align: left;
        border-radius: 0;
    }
    
    /* 모바일 가짜 라벨 추가 */
    .cmp-cell::before {
        display: block;
        font-size: 0.9rem;
        font-weight: 800;
        margin-bottom: 0.5rem;
        opacity: 0.8;
    }
    /* AI 셀 */
    .cmp-row .cmp-cell:nth-child(2)::before {
        content: "AI 기본역량 생성과 확장을 위한 능력";
        color: #2563eb;
    }
    /* 디지털 셀 */
    .cmp-row .cmp-cell:nth-child(3)::before {
        content: "디지털 기본역량 규칙과 반복을 위한 기반 능력";
        color: #16a34a;
    }
    .cmp-row .cmp-cell:last-child { border-bottom: none; }

    /* 해외 사례 */
    .new-global-section {
        padding: 3.5rem 1rem 2rem;
        border-radius: 20px;
        margin: 4rem 1rem 0; /* 좌우 여백 추가 */
    }
    .global-badge {
        width: 80%;
        font-size: 1.1rem;
        padding: 0.8rem 1rem;
    }
    .global-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}


/* 답변과 버튼을 감싸는 컨테이너 */
.interaction-container {
    display: flex;
    align-items: center;       /* 수직 중앙 정렬 */
    justify-content: center;   /* 수평 중앙 정렬 */
    gap: 20px;                 /* 답변 박스와 버튼 사이 간격 */
    margin-top: 2rem;
    position: relative;
}

/* 답변 영역 너비 확보 (버튼 사이에서 늘어남) */
.interaction-container .answer-options2 {
    flex-grow: 1;
    max-width: 850px; /* 너무 넓어지지 않게 제한 */
    margin: 0 auto;   /* 중앙 정렬 */
}

/* 사이드 버튼 공통 스타일 */
.side-btn {
    border: none;
    border-radius: 8px;       /* 살짝 둥근 모서리 */
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;      /* 텍스트 줄바꿈 방지 */
}

/* [이전] 버튼 스타일 (회색, 작게) */
.side-btn.prev {
    background-color: #e9ecef; /* 연한 회색 */
    color: #495057;            /* 짙은 회색 텍스트 */
    padding: 1rem 1.5rem;      /* 정사각형에 가까운 비율 */
}
.side-btn.prev:hover {
    background-color: #dee2e6;
    transform: translateX(-3px);
}

/* [다음] 버튼 스타일 (파란색, 길게) */
.side-btn.next {
    background-color: #3b82f6; /* 밝은 파란색 */
    color: #ffffff;            /* 흰색 텍스트 */
    padding: 1rem 2.5rem;      /* 가로로 길게 */
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}
.side-btn.next:hover {
    background-color: #2563eb;
    transform: translateX(3px);
    box-shadow: 0 6px 15px rgba(59, 130, 246, 0.4);
}

/* =========================================================
   [모바일 대응]
   - 기존 CSS에 이미 pc_Only / mb_Only가 있다면 생략 가능합니다.
   ========================================================= */
@media screen and (max-width: 1024px) {
    /* 모바일에서는 상단 레이아웃을 세로로 변경하여 버튼 숨김 처리와 연동 */
    .interaction-container {
        display: block; /* 플렉스 해제 */
    }
    
    /* 모바일에서는 답변 박스 너비 100% */
    .interaction-container .answer-options2 {
        max-width: 100%;
    }
}
/* =========================================================
   [수정] PC 좌우 버튼 너비 통일 및 답변 영역 확장
   ========================================================= */

/* 1. 버튼 너비 통일 (이전/다음 크기 같게) */
.side-btn {
    width: 120px;          /* [핵심] 고정 너비 부여 */
    padding: 1rem 0;       /* 좌우 패딩 제거 (너비로 제어) */
    display: inline-flex;  /* 내부 텍스트 정렬을 위해 */
    justify-content: center; 
    align-items: center;
    height: 56px;          /* 높이도 일정하게 고정 (선택사항) */
    box-sizing: border-box;
}

/* 기존의 개별 패딩 제거 (덮어쓰기) */
.side-btn.prev, 
.side-btn.next {
    padding: 0; 
}


/* 2. 항목 선택 너비 확장 */

/* 답변 박스를 감싸는 컨테이너의 최대 너비를 늘림 */
.interaction-container .answer-options2 {
    max-width: 1000px; /* 기존 850px -> 1000px (원하는 만큼 조절) */
    width: 100%;       /* 가로 공간 꽉 채우기 */
}

/* 개별 답변 버튼(라벨)이 박스를 가득 채우도록 수정 */
.answer-options2 label {
    width: 100% !important; /* [핵심] 기존 77% 제한을 풀고 100%로 변경 */
}


/* [부분 수정] 결과 히어로 섹션 스타일 (report-hero-fixed) */

/* 전체 박스 잡기 */
.report-hero-fixed {
    background-color: #fff;
    border: 1px solid #e1e7ef;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 50px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.hero-inner-box {
    display: flex;
    gap: 40px;
    align-items: flex-start; /* 상단 정렬 */
}

/* 1. 왼쪽: 이미지 영역 */
.hero-visual-col {
    flex: 0 0 320px; /* 너비 고정 */
    width: 320px;
    text-align: center;
}

.hero-visual-col .img-wrapper {
    margin-bottom: 20px;
}
.hero-visual-col .img-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hero-visual-col .img-caption-box {
    background: #f8fafc;
    color: #475569;
    padding: 15px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    border: 1px solid #e2e8f0;
}

/* 2. 오른쪽: 텍스트 영역 */
.hero-text-col {
    flex: 1;
    padding-top: 10px;
}

.hero-header {
    margin-bottom: 30px;
}

.badge-result {
    display: inline-block;
    background: #eef2ff;
    color: #4f46e5;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
}

.hero-header .title {
    font-size: 2rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 10px;
    line-height: 1.3;
}

.hero-header .title .highlight {
    color: #2563eb;
}

.hero-header .desc {
    font-size: 1.15rem;
    color: #64748b;
    margin: 0;
}

/* 3. 파란색 체크 박스 */
.potential-check-box {
    background-color: #f0f7ff; /* 아주 연한 파랑 */
    border: 1px solid #bfdbfe; /* 테두리 */
    border-radius: 15px;
    padding: 25px;
    position: relative;
}

.box-title {
    font-size: 1.1rem;
    color: #1e3a8a;
    margin-bottom: 15px;
    font-weight: 600;
}

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

.check-list-styled li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 8px;
    font-size: 1.05rem;
    color: #334155;
    line-height: 1.6;
}
.check-list-styled li:last-child {
    margin-bottom: 0;
}

/* 체크 아이콘 */
.check-list-styled li::before {
    content: '✔';
    position: absolute;
    left: 0;
    top: 0;
    color: #2563eb; /* 파란 체크 */
    font-weight: 900;
    font-size: 1.1rem;
}

/* --- 반응형 (모바일) --- */
@media (max-width: 992px) {
    .report-hero-fixed {
        padding: 25px;
    }
    .hero-inner-box {
        flex-direction: column; /* 세로 배치 */
        align-items: center;
        text-align: center;
    }
    .hero-visual-col {
        width: 100%;
        max-width: 300px;
        margin-bottom: 10px;
    }
    .hero-text-col {
        width: 100%;
        padding-top: 0;
    }
    .hero-header .title {
        font-size: 1.6rem;
    }
    .potential-check-box {
        text-align: left; /* 박스 내부는 왼쪽 정렬 */
    }
}

/* [AI 역량 분석 섹션] 스타일 */

/* 1. 전체 레이아웃 (PC: 좌우 배치) */
.res-analysis-section {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1:1 비율 */
    gap: 30px;
    margin-bottom: 50px;
    align-items: stretch;
}

/* 박스 공통 스타일 */
.res-box {
    background: #fff;
    /* border: 1px solid #e1e7ef;  이미지처럼 깔끔하게 하려면 테두리 제거 혹은 연하게 */
    border-radius: 12px;
    padding: 0; /* 내부 패딩 제거 (필요시 추가) */
    height: 100%;
}

.chart-area {
    border: 1px solid #e1e7ef; /* 차트 쪽만 테두리 */
    padding: 20px;
    border-radius: 16px;
}

.box-subject {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0e3979;
    margin-bottom: 20px;
}

/* 2. 차트 영역 */
.chart-wrapper {
    width: 100%;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chart-legend-mobile { display: none; }

/* 3. 테이블 영역 */
.table-area {
    padding: 10px 0; /* 위아래 여백만 */
}
.res-table-wrap { width: 100%; }

.res-score-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* 칸 너비 고정 */
}

/* 테이블 헤더 */
.res-score-table thead th {
    background: #f8fafc;
    padding: 12px 5px;
    font-size: 0.95rem;
    color: #111;
    font-weight: 800;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    text-align: center;
}

/* 테이블 본문 */
.res-score-table tbody td {
    padding: 14px 5px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
    color: #444;
}

/* 순위 뱃지 (1st, 2nd...) */
.rank-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 800;
    color: #0e3979;
    background: #eef2ff;
    border: 1px solid #bfdbfe;
    min-width: 45px;
}

/* 영역 텍스트 */
.res-score-table td.text-area-name {
    text-align: center; /* 이미지상 가운데 정렬 같음 */
    color: #555;
    font-weight: 500;
    white-space: nowrap; /* 줄바꿈 방지 */
}

/* 막대 그래프 (진단 점수) */
.cell-bar {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.res-bar-track {
    width: 100%;
    height: 10px;
    background: #f1f5f9; /* 회색 트랙 */
    border-radius: 10px;
    position: relative;
    overflow: visible; /* 점이 튀어나와도 보이게 */
}
.res-bar-fill {
    height: 100%;
    background: #2563eb; /* 파란색 채움 */
    border-radius: 10px;
}
.res-bar-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #f59e0b; /* 노란 점 */
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    z-index: 2;
}

/* 점수 텍스트 */
.score-txt { font-weight: 500; }
.score-txt.my { color: #333; }
.score-txt.avg { color: #666; }

/* 하단 범례 */
.res-legend-guide {
    margin-top: 15px;
    text-align: right;
    font-size: 0.85rem;
    color: #666;
    padding-right: 10px;
}
.legend-item { margin-left: 15px; font-weight: 600; display: inline-flex; align-items: center; }
.l-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.l-dot.blue { background: #2563eb; }
.l-dot.yellow { background: #f59e0b; }


/* ========================================================
   [모바일 반응형 수정] 카드형태 제거 -> PC와 동일한 표 유지
   ======================================================== */

@media (max-width: 992px) {
    /* 1. 전체 레이아웃: 차트(위) - 테이블(아래) 세로 배치 */
    .res-analysis-section {
        grid-template-columns: 1fr; /* 1열 */
        gap: 30px;
    }

    /* 2. 차트 영역 스타일 */
    .chart-area {
        border: 1px solid #e1e7ef;
        padding: 15px;
    }
    .chart-wrapper { min-height: auto; }
    
    /* 모바일용 차트 범례 표시 */
    .chart-legend-mobile { 
        display: block; 
        text-align: center; 
        margin-top: 10px; 
        font-size: 0.85rem; 
    }
    .chart-legend-mobile .l-item { margin: 0 5px; }
    .chart-legend-mobile .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
    .chart-legend-mobile .dot.pink { background: rgba(255, 99, 132, 1); } 
    .chart-legend-mobile .dot.blue { background: rgba(54, 162, 235, 1); }

    /* 3. 테이블 영역 스타일 (강제 표 유지) */
    .res-table-wrap {
        overflow-x: auto; /* 화면보다 표가 크면 스크롤 허용 */
    }

    /* ★핵심: 테이블 속성 강제 복구 (display: block 해제)★ */
    .res-score-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important; /* 칸 너비 고정 */
    }
    .res-score-table thead { display: table-header-group !important; }
    .res-score-table tbody { display: table-row-group !important; }
    .res-score-table tr { 
        display: table-row !important; 
        border: none !important; 
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .res-score-table td, 
    .res-score-table th { 
        display: table-cell !important; 
    }

    /* 4. 좁은 화면에 구겨 넣기 위한 스타일 축소 */
    
    /* 헤더 폰트 및 여백 축소 */
    .res-score-table thead th {
        font-size: 11px; /* 글자 크기 축소 */
        padding: 8px 2px; /* 좌우 여백 최소화 */
        letter-spacing: -0.5px; /* 자간 좁히기 */
        white-space: nowrap; /* 줄바꿈 방지 */
    }

    /* 본문 셀 폰트 및 여백 축소 */
    .res-score-table tbody td {
        padding: 8px 1px; /* 좌우 여백 거의 없앰 */
        font-size: 12px;
        height: 40px; /* 높이 고정 */
    }

    /* 순위 뱃지: 아주 작게 */
    .rank-badge {
        font-size: 10px;
        padding: 2px 5px;
        min-width: 30px;
        height: 18px;
        line-height: 14px;
    }

    /* 영역 이름: 너무 길면 줄바꿈 되도록 */
    .res-score-table td.text-area-name {
        font-size: 11px;
        white-space: normal; /* 줄바꿈 허용 */
        line-height: 1.2;
        padding-left: 2px;
        text-align: center;
    }

    /* 바 그래프 높이 축소 */
    .cell-bar {
        padding: 0 4px !important; /* 바 좌우 여백 축소 */
    }
    .res-bar-track { height: 6px; border-radius: 4px; }
    .res-bar-fill { border-radius: 4px; }
    .res-bar-dot { width: 8px; height: 8px; border-width: 1.5px; top: 50%; }

    /* 점수 텍스트 */
    .score-txt { font-size: 11px; font-weight: 700; letter-spacing: -0.5px; }

    /* 이전에 추가했던 가상 요소(Label) 제거 */
    .res-score-table td.col-score.my::before,
    .res-score-table td.col-score.avg::before {
        content: none !important;
        display: none !important;
    }
	
}


/* [모바일 숨김 처리 전용 클래스] */
@media (max-width: 992px) {
    .res-pc-only {
        display: none !important;
    }
}

/* 아주 작은 화면 (폰) 대응 */
@media (max-width: 480px) {
    .res-score-table thead th,
    .res-score-table tbody td {
        padding: 10px 1px; /* 좌우 여백 거의 없앰 */
    }
    .rank-badge { font-size: 0.75rem; }
    .score-txt { font-size: 0.85rem; }
}


/* 모바일 포함 전체 공통 수정 */
.res-score-table td .rank-badge {
    padding: 2px 6px !important; /* 배지 크기 축소 */
    font-size: 0.75rem !important;
}

/* 왼쪽 배지 칸 강제 축소 */
.res-score-table td:first-child {
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
    padding: 4px !important;
}

/* 행 사이의 파란 2px 라인 제거 */
.res-score-table tr {
    border-bottom: none !important;
}

/* 감싸고 있는 파란 테두리 제거 */
.res-score-table,
.res-table-wrap,
.res-table-wrap table {
    border: none !important;
    box-shadow: none !important;
}
/* ========================================================
   [모바일 반응형 수정] 카드형태 제거 -> PC와 동일한 표 유지
   ======================================================== */
@media (max-width: 992px) {

    /* 테이블 전체를 PC처럼 유지 */
    .res-score-table,
    .res-score-table thead,
    .res-score-table tbody,
    .res-score-table tr,
    .res-score-table th,
    .res-score-table td {
        display: table !important;
    }

    /* thead 숨기지 않음(PC 스타일 유지 위해) */
    .res-score-table thead {
        display: table-header-group !important;
    }

    .res-score-table tbody {
        display: table-row-group !important;
    }

    /* tr 기본 설정 */
    .res-score-table tr {
        display: table-row !important;
        border: none !important;      /* ★ 파란 2px 라인 제거 */
        background: transparent !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* td, th 공통 */
    .res-score-table td,
    .res-score-table th {
        
        padding: 10px 8px !important;
        text-align: center !important;
        white-space: normal !important;
        background: #fff !important;
    }

    /* td앞에 붙던 ::before 라벨 제거 */
    .res-score-table td::before {
        display: none !important;
        content: none !important;
    }

    /* 전체 박스 테두리 제거 */
    .res-table-wrap,
    .res-score-table {
        border: none !important;
        box-shadow: none !important;
    }

    /* =======================
       ★ 라니 요청 추가 코드
       모바일에서 “진단점수 칼럼” 가장 넓게 + colgroup 복구
       ======================= */

    /* colgroup 복원 */
    .res-score-table col:nth-child(3) {
        width: 55% !important;   /* ★ 진단점수 칸 가장 넓게 */
    }
    .res-score-table col:nth-child(1) { width: 10% !important; }
    .res-score-table col:nth-child(2) { width: 15% !important; }
    .res-score-table col:nth-child(4) { width: 10% !important; }
    .res-score-table col:nth-child(5) { width: 10% !important; }

    /* table-layout: fixed로 인해 colgroup이 무시되는 문제 해결 */
    .res-score-table {
        table-layout: auto !important; 
    }
}

@media (max-width: 992px){

    /* 테이블 요소에서 block 씹어버리는 퍼블 코드 완전 차단 */
    .res-score-table,
    .res-score-table table,
    .res-score-table thead,
    .res-score-table tbody,
    .res-score-table tr,
    .res-score-table th,
    .res-score-table td {
        display: table !important;
        width: auto !important;
    }

    /* thead/tbody는 표 구조 유지 */
    .res-score-table thead { display: table-header-group !important; }
    .res-score-table tbody { display: table-row-group !important; }

    /* tr은 테이블 행 */
    .res-score-table tr { display: table-row !important; }

    /* td/th는 셀 */
    .res-score-table td,
    .res-score-table th {
        display: table-cell !important;
        vertical-align: middle !important;
    }

    /* td 앞 ::before 라벨 제거 */
    .res-score-table td::before { display:none !important; content:none !important; }

    /* 파란 2px 라인 제거 */
    .res-score-table tr { border-bottom:none !important; }

    /* colgroup 다시 먹이기 */
    .res-score-table { table-layout: auto !important; }
}


@media (max-width: 992px){

    /* 테이블 구조 완전 동일화 */
    .res-score-table,
    .res-score-table table,
    .res-score-table thead,
    .res-score-table tbody,
    .res-score-table tr,
    .res-score-table th,
    .res-score-table td {
        display: table !important;
        width: auto !important;
        table-layout: auto !important;
    }

    /* thead/tbody */
    .res-score-table thead {
        display: table-header-group !important;
    }
    .res-score-table tbody {
        display: table-row-group !important;
    }

    /* 행 */
    .res-score-table tr {
        display: table-row !important;
        border: none !important;
    }

    /* 셀(td/th) 스타일을 PC와 완전히 동일하게 */
    .res-score-table th,
    .res-score-table td {
        display: table-cell !important;
        padding: 12px 12px !important; 
        background: #fff !important;
        vertical-align: middle !important;
        white-space: normal !important;
    }

    /* td 앞 ::before 라벨 완전 제거 */
    .res-score-table td::before {
        content: none !important;
        display: none !important;
    }

    /* 여백/라운드/박스 등 모바일의 잔여 스타일 제거 */
    .res-table-wrap,
    .res-score-table {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* rank badge는 PC처럼 유지 */
    .rank-badge {
        padding: 3px 7px !important;
    }

    /* colgroup 비율 적용 (진단점수 넓게) */
    .res-score-table col:nth-child(3) { width: 55% !important; }
    .res-score-table col:nth-child(1) { width: 10% !important; }
    .res-score-table col:nth-child(2) { width: 15% !important; }
    .res-score-table col:nth-child(4) { width: 10% !important; }
    .res-score-table col:nth-child(5) { width: 10% !important; }
}

/* [모바일 테이블 PC 스타일 복구 및 비율 조정] */
@media (max-width: 992px) {

    /* 1. 테이블 구조 강제 복구 (Block -> Table) */
    .res-score-table,
    .res-score-table thead,
    .res-score-table tbody,
    .res-score-table tr,
    .res-score-table th,
    .res-score-table td {
        display: revert !important; /* 브라우저 기본 테이블 속성으로 복구 */
    }
    
    .res-score-table {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important; /* 컬럼 너비 고정을 위해 필수 */
        border-collapse: collapse !important;
    }

    .res-score-table thead { display: table-header-group !important; }
    .res-score-table tbody { display: table-row-group !important; }
    .res-score-table tr { display: table-row !important; }
    .res-score-table th, .res-score-table td { display: table-cell !important; }

    /* 2. 모바일용 가짜 라벨(::before) 숨기기 */
    .res-score-table td::before {
        display: none !important;
        content: none !important;
    }

    /* 3. 디자인 디테일 조정 (PC 스타일과 유사하게) */
    .res-score-table th {
        background: #f8fafc !important;
        color: #333 !important;
        font-weight: 700 !important;
        padding: 8px 2px !important;
        font-size: 12px !important; /* 모바일이라 폰트 조금 작게 */
        border-bottom: 1px solid #ddd !important;
        border-top: 1px solid #ddd !important;
        white-space: nowrap !important;
    }

    .res-score-table td {
        padding: 8px 2px !important;
        border-bottom: 1px solid #eee !important;
        font-size: 12px !important;
        background: #fff !important;
        text-align: center !important;
        vertical-align: middle !important;
    }
    
    /* 행 간격 등 모바일용 마진/쉐도우 제거 */
    .res-score-table tr {
        margin: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
    }

    /* 4. [핵심] 컬럼 너비 강제 조정 (진단점수 칸 넓게) */
    /* 순서: 1(순위) / 2(영역) / 3(진단점수-그래프) / 4(내점수) / 5(전국) */
    
    .res-score-table th:nth-child(1), .res-score-table td:nth-child(1) { width: 10% !important; }
    .res-score-table th:nth-child(2), .res-score-table td:nth-child(2) { width: 15% !important; }
    
    /* ▼ 진단 점수(그래프) 칸을 가장 넓게 설정 (55%) */
    .res-score-table th:nth-child(3), .res-score-table td:nth-child(3) { width: 55% !important; }
    
    .res-score-table th:nth-child(4), .res-score-table td:nth-child(4) { width: 10% !important; }
    .res-score-table th:nth-child(5), .res-score-table td:nth-child(5) { width: 10% !important; }

    /* 그래프 높이 및 여백 미세 조정 */
    .cell-bar { padding: 0 5px !important; }
    .res-bar-track { height: 8px !important; }
    .res-bar-dot { width: 10px !important; height: 10px !important; top: 50% !important; }
    
    /* 순위 뱃지 크기 */
    .rank-badge { 
        padding: 2px 4px !important; 
        font-size: 10px !important; 
        min-width: auto !important; 
    }
}

/* [모바일] 카드 디자인 최종 수정 (역량명+뱃지 가로배치 / 점수 텍스트 추가) */
@media (max-width: 768px) {

    /* 1. 카드 컨테이너 설정 */
    .custom-table-design .c-table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important; /* 줄바꿈 허용 */
        align-items: center !important; /* 수직 중앙 정렬 */
        
        background: #fff;
        border: 1px solid #e1e7ef;
        border-radius: 20px;
        padding: 24px 20px;
        margin-bottom: 20px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }

    /* td 태그 초기화 */
    .custom-table-design .c-table tbody td {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        display: block !important;
    }
    .custom-table-design .c-table tbody td::before { display: none !important; }

    /* --- [1] 역량명 (AI 이해) --- */
    .cell-name {
        order: 1 !important;
        width: auto !important; /* 내용만큼만 너비 차지 */
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: #1e293b;
        margin-right: 8px !important; /* 뱃지와의 간격 */
        margin-bottom: 0 !important;
    }

    /* --- [2] 수준 뱃지 (생활) - 역량명 바로 옆 --- */
    .cell-level {
        order: 2 !important;
        width: auto !important;
        margin-bottom: 0 !important;
    }
    .lv-badge {
        padding: 4px 10px !important;
        font-size: 0.85rem !important;
        border-radius: 30px !important;
        vertical-align: middle !important;
    }

    /* --- [3] 정의 박스 (중간 - 한 줄 꽉 차게) --- */
    .cell-def {
        order: 3 !important;
        width: 100% !important; /* 강제 줄바꿈 효과 */
        margin-top: 15px !important;
        margin-bottom: 20px !important;
        
        background-color: #f8fafc;
        border: 1px solid #f1f5f9;
        padding: 15px !important;
        border-radius: 12px;
        color: #64748b;
        font-size: 0.95rem !important;
        line-height: 1.5;
        text-align: left;
        word-break: keep-all;
    }

    /* --- [4] 점수 영역 (하단 - 반반 배치) --- */
    .cell-score-my, .cell-score-avg {
        width: 48% !important; /* 좌우로 나란히 배치 (여유공간 4% 남김) */
        display: flex !important;
        flex-direction: column !important; /* [라벨] [점수] 세로 정렬 */
        align-items: center !important;
        justify-content: center !important;
        
        padding: 15px 0 !important;
        border-radius: 12px;
    }

    /* 내 점수 (왼쪽) */
    .cell-score-my {
        order: 4 !important;
        margin-right: 4% !important; /* 오른쪽 여백 */
        background-color: #eff6ff; /* 연한 파랑 */
        border: 1px solid #dbeafe !important;
        color: #2563eb !important;
    }
    
    /* 전국 평균 (오른쪽) */
    .cell-score-avg {
        order: 5 !important;
        background-color: #f8fafc; /* 연한 회색 */
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
    }

    /* ★ 텍스트 라벨 추가 (요청하신 부분) ★ */
    .cell-score-my::before {
        content: "내 점수";
        display: block !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        margin-bottom: 5px !important;
        color: #1e40af; /* 진한 파랑 텍스트 */
    }
    
    .cell-score-avg::before {
        content: "전국 평균";
        display: block !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        margin-bottom: 5px !important;
        color: #64748b; /* 회색 텍스트 */
    }
    
    /* 숫자 크기 강조 */
    .cell-score-my, .cell-score-avg {
        font-size: 1.5rem !important;
        font-weight: 800 !important;
    }
}
/* ==========================================================================
   [긴급 수정] 모바일 역량 카드 디자인 (강제 덮어쓰기 & 박스 크기 최적화)
   ※ 기존의 '문항 번호', '보기' 등을 nth-of-type으로 정밀 타격하여 제거합니다.
   ========================================================================== */

@media (max-width: 768px) {

    /* 1. [강력 초기화] 끈질기게 남아있는 '문항 번호/내용' 라벨 강제 제거 */
    /* 기존 스타일이 nth-of-type을 쓰고 있어서, 똑같이 맞춰서 덮어써야 사라집니다. */
    .result-container .custom-table-design .c-table td:nth-of-type(1)::before,
    .result-container .custom-table-design .c-table td:nth-of-type(2)::before,
    .result-container .custom-table-design .c-table td:nth-of-type(3)::before,
    .result-container .custom-table-design .c-table td:nth-of-type(4)::before,
    .result-container .custom-table-design .c-table td:nth-of-type(5)::before {
        content: none !important;
        display: none !important;
    }

    /* 2. [카드 프레임] 전체 박스 크기 및 그림자 정리 */
    .result-container .custom-table-design .c-table tbody tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        
        background: #fff;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        padding: 24px 20px !important; /* 내부 여백 최적화 */
        margin-bottom: 20px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    }

    /* 3. [셀 초기화] 모든 칸을 깨끗한 상태로 만듦 */
    .result-container .custom-table-design .c-table tbody td {
        display: block !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        width: auto !important;
        min-height: auto !important;
    }

    /* --- [A] 제목: AI 이해 (1번 칸) --- */
    .result-container .custom-table-design .c-table tbody td:nth-child(1) {
        order: 1 !important;
        font-size: 1.45rem !important;
        font-weight: 800 !important;
        color: #1e293b !important;
        margin-right: 8px !important;
        margin-bottom: 4px !important;
    }

    /* --- [B] 뱃지: 생활 (5번 칸) --- */
.result-container .custom-table-design .c-table tbody td:last-child {
        order: 2 !important;            /* 순서는 제목(1번) 바로 다음 */
        width: auto !important;         /* 너비는 내용물만큼만 */

        margin-left: auto !important;   
        
        display: flex !important;       /* 내부 정렬을 위해 */
        justify-content: flex-end !important; /* 오른쪽 정렬 */
        margin-bottom: 4px !important;  /* 아래 간격 미세 조정 */
    }
    .result-container .custom-table-design .c-table tbody td:last-child .lv-badge {
        padding: 4px 10px !important;
        font-size: 0.85rem !important;
        border-radius: 30px !important;
		text-align:center;
    }

    /* --- [C] 설명글 (2번 칸) --- */
    .result-container .custom-table-design .c-table tbody td:nth-child(2) {
        order: 3 !important;
        width: 100% !important;
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        
        /* 박스 디자인 없이 깔끔한 텍스트로 변경 (요청 이미지 반영) */
        background: #f8fafc !important; 
        border: 1px solid #f1f5f9 !important;
        border-radius: 12px;
        padding: 15px !important;
        
        color: #475569 !important;
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
        word-break: keep-all;
    }

    /* --- [D] 점수 박스 맞춤 (3번, 4번 칸) --- */
    /* 내 점수 & 전국 평균 */
    .result-container .custom-table-design .c-table tbody td:nth-child(3),
    .result-container .custom-table-design .c-table tbody td:nth-child(4) {
        width: 48% !important; /* 박스 너비 양옆으로 꽉 차게 */
        height: auto !important;
        
        display: flex !important;
        flex-direction: column !important; /* 라벨 위, 점수 아래 */
        align-items: center !important;
        justify-content: center !important;
        
        padding: 15px 0 !important; /* 위아래 패딩 적당히 */
        border-radius: 12px !important;
    }

    /* 내 점수 박스 (왼쪽) */
    .result-container .custom-table-design .c-table tbody td:nth-child(3) {
        order: 4 !important;
        margin-right: 4% !important; /* 사이 간격 */
        background-color: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        color: #2563eb !important;
        font-size: 1.6rem !important;
        font-weight: 800 !important;
    }

    /* 전국 평균 박스 (오른쪽) */
    .result-container .custom-table-design .c-table tbody td:nth-child(4) {
        order: 5 !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-size: 1.6rem !important;
        font-weight: 800 !important;
    }

    /* ★ 점수 라벨 강제 주입 (기존 '문항 번호' 대신 이거 뜨게 함) ★ */
    .result-container .custom-table-design .c-table tbody td:nth-child(3)::before {
        content: "내 점수" !important;
        display: block !important;
        font-size: 0.9rem !important;
        color: #1e40af !important;
        margin-bottom: 5px !important;
        font-weight: 700 !important;
    }

    .result-container .custom-table-design .c-table tbody td:nth-child(4)::before {
        content: "전국 평균" !important;
        display: block !important;
        font-size: 0.9rem !important;
        color: #64748b !important;
        margin-bottom: 5px !important;
        font-weight: 700 !important;
    }
}

/* [모바일] 점수 박스 2개 높이 고정 (높이 맞춤) */
@media (max-width: 768px) {

    /* 내 점수(3번), 전국 평균(4번) 박스 공통 설정 */
.result-container .custom-table-design .c-table tbody td:nth-child(3),
    .result-container .custom-table-design .c-table tbody td:nth-child(4) {
        width: 48% !important;
        height: 110px !important;  /* 박스 높이 고정 */
        
        display: flex !important;
        flex-direction: column !important; /* 세로 정렬 */
        align-items: center !important;    /* 가로 중앙 정렬 */
        justify-content: center !important;/* 세로 중앙 정렬 (박스 정가운데 배치) */
        
        padding: 0 !important;             /* 불필요한 패딩 제거 */
        border-radius: 12px !important;
        
        /* 텍스트 줄 높이 이슈 제거 */
        line-height: 1 !important; 
    }

    /* 내 점수 박스 색상 */
    .result-container .custom-table-design .c-table tbody td:nth-child(3) {
        order: 4 !important;
        margin-right: 4% !important;
        background-color: #eff6ff !important;
        border: 1px solid #dbeafe !important;
        color: #2563eb !important;
        font-size: 1.8rem !important;      /* 숫자 크기 */
        font-weight: 800 !important;
        padding-top: 5px !important;       /* 시각적 보정 (숫자가 너무 위로 가면 조절) */
    }

    /* 전국 평균 박스 색상 */
    .result-container .custom-table-design .c-table tbody td:nth-child(4) {
        order: 5 !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #64748b !important;
        font-size: 1.8rem !important;
        font-weight: 800 !important;
        padding-top: 5px !important;
    }

    /* ★ 라벨 위치 & 간격 강제 고정 ★ */
    .result-container .custom-table-design .c-table tbody td:nth-child(3)::before {
        content: "내 점수" !important;
        display: block !important;
        font-size: 0.9rem !important;
        color: #1e40af !important;
        font-weight: 700 !important;
        
        /* [핵심] 숫자와의 간격을 일정하게 고정 */
        margin-bottom: 12px !important; 
        line-height: 1 !important;
    }

    .result-container .custom-table-design .c-table tbody td:nth-child(4)::before {
        content: "전국 평균" !important;
        display: block !important;
        font-size: 0.9rem !important;
        color: #64748b !important;
        font-weight: 700 !important;
        
        /* [핵심] 숫자와의 간격을 일정하게 고정 */
        margin-bottom: 12px !important;
        line-height: 1 !important;
    }
}
/* ============================
   AI 정답 비교 테이블 전용 안전 패치
   기존 스타일 절대 안건드림
   ============================ */

/* 테이블 전체 래퍼: 모바일 가로스크롤 전용 */
.ai-answer-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    margin-top: 20px;
    border: 1px solid #e3e6ef;
    border-radius: 10px;
    background: #fff;
}

/* 테이블 구조 */
.ai-answer-table {
    width: 100%;
    min-width: 900px; /* 모바일에서 문항보기까지만 보이고 가로스크롤 */
    border-collapse: collapse;
    font-size: 15px;
    color: #333;
}

/* 헤더 */
.ai-answer-table thead th {
    background: #f5f7fc;
    font-weight: 700;
    padding: 14px 10px;
    border-bottom: 2px solid #d5daea;
    white-space: nowrap;
    text-align: center;
}

/* 셀 */
.ai-answer-table td {
    padding: 14px 12px;
    border-bottom: 1px solid #eceff5;
    vertical-align: top;
    line-height: 1.5;
}

/* 번호 */
.ai-basic-qnum {
    display: inline-block;
    background: #6b7cff;
    color: #fff;
    padding: 4px 9px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 13px;
}

/* 문항내용 컬럼 */
.ai-answer-table td.ai-basic-col-q {
    width: 250px;
    font-weight: 500;
}

/* 문항보기 */
.ai-answer-table td.ai-basic-col-view {
    white-space: normal;
}

/* 나의 답 / 정답 */
.ai-basic-col-my,
.ai-basic-col-ans {
    text-align: center;
    font-weight: 700;
}

/* 결과: 정답/오답 컬러 */
.ai-basic-col-res {
    text-align: center;
    font-weight: 700;
}
.ai-basic-col-res::before {
    content: attr(data-label);
    display: none;
}

.ai-basic-col-res {
    color: #1e3a8a; /* 기본 */
}

/* 정답 */
.ai-basic-col-res.correct {
    color: #0a9600;
}
/* 오답 */
.ai-basic-col-res.wrong {
    color: #c62828;
}

/* 모바일 개선 */
@media (max-width: 768px) {
    .ai-answer-table-wrap {
        border-radius: 8px;
    }
    .ai-answer-table td,
    .ai-answer-table th {
        padding: 10px 8px;
        font-size: 14px;
    }
    .ai-answer-table {
        min-width: 780px; /* 모바일에서 답·정답 전까지만 보이고 스크롤 */
    }
}
/* 정답 비교 테이블이 아래 섹션 레이아웃 침범하는 문제 해결 */
.ai-answer-table-wrap {
    display: block;
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
}

/* 부모의 width 강제 고정 – 뒤 섹션 영향 차단 */
.ai-answer-table-wrap table {
    display: table;
    width: 100%;
    max-width: none;
}

/* 아래 섹션이 테이블 폭 따라가지 않게 강제 차단 */
.ai-basic-main,
.score-details-grid,
.score-card,
.definition-table,
.ai-basic-bottom-title {
    position: relative;
    max-width: 100% !important;
    overflow-x: hidden;
}
/* 첫 번째 문항내용 컬럼 너무 넓어지는 문제 해결 */
.ai-answer-table td.ai-basic-col-q:first-child {
    width: 70px !important;   /* 번호만 있는 칸은 고정 */
    min-width: 70px !important;
    text-align: center;
}

/* 번호칸 안쪽 정렬 개선 (정확히 중앙으로) */
.ai-basic-qnum {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    padding: 4px 10px;
    text-align: center;
}

/* 두 번째 문항내용 칸 = 내용 길이에 맞춰 자동 확장 */
.ai-answer-table td.ai-basic-col-q:nth-child(2) {
    width: auto !important;
    min-width: 180px;
}
/* 바깥 래퍼: 버튼까지 포함, 폭/가로스크롤 담당 */
.ai-basic-table-wrap.ai-answer-table-wrap {
    width: 100%;
    margin-top: 20px;
}

/* 실제 접히는 영역: 테이블만 */
.ai-answer-table-inner {
    max-height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    transition: max-height .35s ease;
}

/* 펼쳤을 때 */
.ai-basic-table-wrap.is-open .ai-answer-table-inner {
    max-height: 2000px;   /* 충분히 크게만 주면 됨 */
    overflow-y: visible;
}

/* 번호 너비 & 중앙 정렬 (이미 쓴 거면 유지) */
.ai-answer-table td.ai-basic-col-q:first-child {
    width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}
.ai-basic-qnum {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 40px;
    padding: 4px 10px;
}
/* 레이더 차트 모바일 깨짐 방지용 공통 패치 */

/* 차트 카드 자체 정렬 */
.res-analysis-section .chart-area .chart-wrapper {
    width: 100%;
    max-width: 380px;   /* 카드 실제 폭 */
    margin: 0 auto;
    padding: 8px 0;
}

/* 차트 내부 요소를 컨테이너에 맞게 축소 */
.chart-wrapper canvas,
.chart-wrapper svg,
.chart-wrapper img,
.chart-wrapper iframe {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
}

/* 혹시 레이더가 절대위치로 튀어나와 있을 경우 안전장치 */
.chart-wrapper {
    position: relative;
    overflow: hidden;
}
/* === 2025 Interest Page 전용 타이틀 === */
.interest-sec-title-2025 {
    width: 100%;
    text-align: center;
    margin: 40px 0 15px;
    font-weight: 700;
    font-size: 20px;
    color: #2463cb;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.interest-sec-title-2025::before,
.interest-sec-title-2025::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #628edb);
}

.interest-sec-title-2025::after {
    background: linear-gradient(to left, transparent, #628edb);
}

/* === 모바일 대응 === */
@media (max-width: 768px) {
    .interest-sec-title-2025 {
        font-size: 16px;
        margin: 30px 0 10px;
        gap: 10px;
    }
    .interest-sec-title-2025::before,
    .interest-sec-title-2025::after {
        flex: 0.8;
    }
}