/* Research Detail 전용 스타일 */

.research-detail-card { border-radius: 20px; overflow: hidden;}

/* 헤더 영역 (다크 블루 배경) */
.research-detail-card .detail-header {
    background:var(--c_base2); /* 시안의 블루톤 */
    padding: 40px; color: #fff; border-radius:20px;
}
.research-detail-card .detail-header .category {
    display: block; font-size: var(--fs14); opacity: 0.7; letter-spacing: 1px; margin-bottom: 10px;
}
.research-detail-card .detail-header .main-tit {
    font-size: var(--fs30); font-weight: 700; margin-bottom: 5px; color: #fff;
}
.research-detail-card .detail-header .sub-tit {
    font-size: var(--fs18); opacity: 0.8; font-weight: 300;
}


/* 이미지 영역 */
.detail-figure-box-wrap {border: 1px solid var(--border1); border-radius:20px; overflow:hidden; margin-top:32px;}
.detail-figure-box {
    background:var(--bg1); padding: 80px; text-align: center; 
}
.detail-figure-box .img-wrap {
   margin: 0 auto; background:var(--bg1); border-radius: 10px;
}
.detail-figure-box img { width: 100%; height: auto; display: block; mix-blend-mode: multiply;}

/* 이미지 영역을 감싸는 그리드 컨테이너 */
.detail-figure-grid-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC에서 2열 */
    gap: 32px;
    margin-top: 32px;
}

/* 개별 피규어 박스 스타일 */
.figure-item-box {
    border: 1px solid var(--border1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.detail-figure-box {
    background: var(--bg1);
    padding: 60px 40px; /* 기존보다 패딩 조절 */
    text-align: center;
    flex: 0 0 auto;
}

.detail-figure-box .img-wrap {
    margin: 0 auto;
    border-radius: 10px;
}

.detail-figure-box img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: multiply; /* 흰색 배경 이미지 자연스럽게 처리 */
}

/* 캡션 영역 (카드 하단 일관성 유지) */
.detail-footer {
    padding: 30px 40px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.detail-footer .fig-num { color: var(--c_base2); font-size: var(--fs16); margin-bottom: 10px; font-weight: 500; }
.detail-footer .fig-caption { font-size: var(--fs18); color: var(--c_base2); margin-bottom: 15px; line-height: 1.4; word-break: keep-all; }
.detail-footer .fig-desc { font-size: var(--fs15); color: #666; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; word-break: keep-all; }
.detail-footer .fig-source { font-size: var(--fs13); color: #999; font-style: italic; }




/* 캡션 영역 */
.detail-footer { padding: 40px 60px; background: #fff; border-top: 1px solid var(--border1); }
.detail-footer .fig-num { color: var(--c_base2); font-size: var(--fs16); margin-bottom: 10px; font-weight:300; }
.detail-footer .fig-caption { font-size: var(--fs18); color: var(--c_base2); margin-bottom: 15px; line-height: 1.4; }
.detail-footer .fig-desc { font-size: var(--fs16); color: #666; line-height: 1.7; margin-bottom: 20px; }
.detail-footer .fig-source { font-size: var(--fs14); color: #999; font-style: italic; }

/* Key Findings 스타일 */
.key-findings-wrap { margin-top: 60px; }

/* 섹션 타이틀 (좌측 블루 바 스타일) */
.findings-tit {
    position: relative; padding-left: 15px; margin-bottom: 30px;
    font-size: var(--fs24); font-weight: 700; color: var(--c_base2);
    line-height: 1;
}
.findings-tit::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 4px; height: 18px; background: var(--c_base2); border-radius: 2px;
}

/* 그리드 레이아웃: PC 4열 */
.findings-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* 카드 아이템 스타일 */
.findings-item {
    padding: 40px;
    background: var(--bg1); /* 요청하신 배경색 적용 */
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.findings-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* 카드 내부 텍스트 */
.findings-item .cate {
    display: block; margin-bottom: 6px;
    font-size: var(--fs12); font-weight: 600; color: var(--c_base2);
    letter-spacing: 0.02em;
}
.findings-item .tit {
    margin-bottom: 6px;
    font-size: var(--fs18); font-weight: 700; color: #E86A5E; /* 시안의 코랄 레드 컬러 */
    line-height: 1.3; word-break: keep-all;
}
.findings-item .desc {
    font-size: var(--fs16); color:#555;
    line-height: 1.5; word-break: keep-all;
}

/* Research Areas Wrap */
.research-areas-wrap { margin-top: 60px; }
.areas-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Item Layout */
.areas-item { display: flex; align-items: flex-start; gap: 30px; padding:40px; background: #fff; border: 1px solid var(--border1); border-radius: 20px; transition: all .3s ease; }
.areas-item:hover { border-color: var(--c_base1); box-shadow: 0 15px 30px rgba(0,0,0,0.05); transform: translateY(-5px); }

/* Icon Box */
.areas-item .icon-box { flex-shrink: 0; width:48px; height:48px; display: flex; align-items: center; justify-content: center; background: var(--bg1); border-radius: 12px; }
.areas-item .icon-box img { width: 24px; height: 24px; }

/* Text Content */
.areas-item .txt-box { flex: 1; }
.areas-item .tit { margin-bottom: 8px; font-size: var(--fs18); font-weight: 700; color: var(--c_base2); line-height: 1.3; }
.areas-item .sub { display: block; margin-bottom: 15px; font-size: var(--fs16); font-weight: 300; color: #E86A5E; }
.areas-item .desc { font-size: var(--fs16); color: #555; line-height: 1.6; word-break: keep-all; }

/* Research Process Wrap */
.research-process-wrap { margin-top: 60px; }
.process-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 60px; align-items: center; }

/* Item Layout */
.process-item { position: relative; display: flex; align-items: center; }
.process-item .box { flex: 1; padding:22px; background: #fff; border: 1px solid var(--border1); border-radius: 20px; text-align: center; transition: all .3s ease; }
.process-item:hover .box { border-color: #00A19D; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }

/* Content Details */
.process-item .num { display: block; margin-bottom: 5px; font-size: var(--fs24); font-weight: 700; color: #00A19D; line-height: 1; } /* 시안의 테일그린 컬러 */
.process-item .tit { margin-bottom: 5px; font-size: var(--fs14); font-weight: 700; color: var(--c_base2); }
.process-item .desc { font-size: var(--fs15); color: #777; line-height: 1.4; word-break: keep-all; }

/* Arrow Icon */
.process-item .arrow { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); z-index: 2; width: 20px; }
.process-item .arrow img { width:20px; }

/* 반응형 대응 */
@media (max-width: 1199px) {
    .research-detail-card .detail-header { padding: 30px; }
    .detail-figure-box { padding: 30px; }
    .detail-footer { padding: 30px; }
	
	 .detail-figure-grid-wrap {
        gap: 20px;
    }
    .detail-figure-box { padding: 40px 20px; }
    .detail-footer { padding: 25px 30px; }
	
    .findings-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .findings-item { padding: 30px 25px; }

	.areas-item { padding: 35px 30px; gap: 20px; }
    .areas-item .tit { font-size: var(--fs20); }

	.process-list { grid-template-columns: repeat(2, 1fr); gap: 50px; }
    /* 순서 변경: 1(r1c1) -> 2(r1c2) -> 3(r2c2) -> 4(r2c1) */
    .item3 { order: 4; } .item4 { order: 3; }
    /* 1번 화살표: 오른쪽 유지 */
    .item1 .arrow { right: -35px; top: 50%; rotate: 0deg; }
    /* 2번 화살표: 아래로 (2번에서 3번으로) */
    .item2 .arrow { right: 48%; top: auto; bottom: -25px; transform: translateX(50%); rotate: 90deg; }
    /* 3번 화살표: 왼쪽으로 (3번에서 4번으로) */
    .item3 .arrow { right: auto; left: -35px; top:36%; rotate: 180deg; }
    /* 4번 화살표: 제거 */
    .item4 .arrow { display: none; }
}

@media (max-width: 767px) {
    .research-detail-card .detail-header .main-tit { font-size: var(--fs24); }
	
	
    .detail-figure-box { padding: 15px; }
	.detail-figure-grid-wrap {
        grid-template-columns: 1fr; /* 태블릿/모바일에서 1열 */
    }
    .detail-figure-box img {
        max-width: 500px; /* 너무 커지는 것 방지 */
        margin: 0 auto;
    }
    .detail-footer .fig-caption { font-size: var(--fs16); }
    .detail-footer .fig-desc { font-size: var(--fs14); }
	.detail-figure-box { padding: 30px 15px; }
    .detail-footer .fig-caption { font-size: var(--fs16); }
    .detail-footer .fig-desc { font-size: var(--fs14); }
	
	.key-findings-wrap { margin-top: 40px; }
    .findings-tit { font-size: var(--fs20); }
	.areas-list { grid-template-columns: 1fr; }
    .areas-item { padding: 30px 25px; }
    .research-areas-wrap { margin-top: 40px; }

	.research-process-wrap { margin-top: 40px; }
    .process-item .num { font-size: var(--fs28); }
    .process-item .tit { font-size: var(--fs18); }
}

@media screen and (max-width: 500px) {
    .findings-grid {
        grid-template-columns: 1fr;
    }
    .findings-item { padding: 25px 20px; }
    .findings-item .tit { font-size: var(--fs18); }

	.areas-item { flex-direction: column; gap: 15px; }
    .areas-item .icon-box { width: 50px; height: 50px; }
    .areas-item .tit { font-size: var(--fs18); }
    .areas-item .desc { font-size: var(--fs14); }

	.process-list { grid-template-columns: 1fr; gap: 16px; }
    /* 수직 순서 원복: 1-2-3-4 */
    .item3 { order: 3; } .item4 { order: 4; }
    /* 모든 화살표 아래로 통일 */
    .process-item .arrow { position: relative; right: auto; left: auto; top: auto; bottom: auto; transform: none; margin: 15px auto 0; rotate: 90deg; width: 20px; display: block; }
    .item4 .arrow { display: none; }
    .process-item { flex-direction: column; }
	.process-item .box {width:100%;}
}