@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Pretendard';
}

body{
    background:#f5f5f5;
}

/* 팝업 전체 */
.popup-wrap{

    width:1200px;

    margin:50px auto;

    background:#fff;

    padding:60px;

    border-radius:20px;

    box-shadow:0 0 20px rgba(0,0,0,0.1);
}

/* 상단 */
.top-area{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    /* border-bottom:1px solid #ddd; */

    padding-top:60px;

    padding-bottom:40px;
}

/* 좌측 타이틀 */
.title-area p{

    color:#666;

    font-size:18px;

    margin-bottom:10px;
}

.title-area h2{

    font-size:58px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:8px;
}

/* 우측 정보 */
.info-area{

    display:flex;

    gap:60px;
}

.info-box strong{

    display:block;

    font-size:14px;

    color:#999;

    margin-bottom:10px;
}

.info-box p{

    font-size:16px;
}

/* 탭 메뉴 */
.tab-menu{

    display:flex;

    justify-content:space-between;

    align-items:center;

    list-style:none;

    margin-top:50px;

    border-bottom:1px solid #ddd;
}

.tab-content{
    margin-top:40px;
}

.tab-menu li{

    flex:1;

    text-align:center;

    padding:20px 0;

    cursor:pointer;

    font-size:18px;

    color:#777;
}

.tab-menu li.active{

    color:#000;

    font-weight:bold;

    border-bottom:3px solid #000;
}

.doc-btn-img {
    cursor: pointer;
    transition: opacity 0.2s;
}
.doc-btn-img:hover {
    opacity: 0.9;
}

/* 내용 영역 */
.content-area{

    margin-top:60px;
}

.content-title{

    font-size:32px;

    font-weight:bold;

    margin-bottom:15px;
}

.content-text{

    line-height:1.8;

    color:#555;
 
    font-size:18px;
}

/* 태그 영역 */
.tag-area{

    display:flex;

    gap:15px;

    margin-top:40px;
}

/* 태그 */
.tag{

    display:flex;

    align-items:center;
}

/* 태그 이미지 */
.tag img{

    display:block;

    width:120px;

    height:auto;
}

/* 기대효과 */
.effect-area{

    margin-top:80px;
}

.effect-title{

    font-size:28px;

    font-weight:bold;

    margin-bottom:40px;
}

.effect-list{

    display:flex;

    flex-wrap:wrap;

    gap:40px;

    list-style:none;
}

.effect-item{

    width:30%;

    text-align:left;
}

.effect-item img{

    width:60px;

    height:60px;

    display:block;

    margin-bottom:10px;
}

.effect-item p{

    font-size:16px;

    line-height:1.5;
}

.layer-wrap{
	
	display:none;
	
    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.7);

    z-index:9999;

    overflow-y:auto;
}

/* 닫기 버튼 */
.close-btn{

    position:absolute;

    top:10px;

    right:20px;

    width:52px;

    height:52px;

    border:none;

    border-radius:50%;

    background:#f1f1f1;

    font-size:28px;

    cursor:pointer;

    transition:all 0.2s ease;

    z-index:100;

    display:flex;

    align-items:center;

    justify-content:center;
}

.close-btn:hover{

    background:#e5e5e5;
}

/* 팝업 */
.popup-wrap{

    position:relative;

    overflow:visible;
}

/* 문서 관리 */
.doc-btn-area{
    display:flex;
    gap:12px;
    margin:30px 0;
}

.doc-btn{
    padding:12px 18px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
    border-radius:6px;
    font-size:15px;
    color:#666;
}

.doc-btn.active{
    background:#00bcd4;
    color:#fff;
    border-color:#00bcd4;
}

.doc-layout{
    display:flex;
    gap:40px;
    margin-top:30px;
}

/* 영상 */
.video-area{
    flex:1.2;
}

.video-box{
    background:#000;
    border-radius:12px;
    overflow:hidden;
}

/* 우측 설명 */
.info-box-area{
    flex:0.8;
}

.info-card{
    background:#f7f7f7;
    padding:25px;
    border-radius:10px;
    font-size:15px;
    line-height:1.7;
    color:#444;
}

.step-card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.step-item {
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.step-num {
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-item p {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    font-weight: 500;
}

/* 주요연계기술 */
.tech-area{

    margin-top:50px;

    background:#f5f5f5;

    padding:50px;

    border-radius:6px;
}

.tech-list{

    display:flex;

    flex-wrap:wrap;

    gap:50px 40px;

    list-style:none;
}

.tech-item{

    width:30%;

    display:flex;

    align-items:flex-start;

    gap:20px;
}

/* 숫자 원 */
.tech-num{

    min-width:32px;

    height:32px;

    border-radius:50%;

    background:#222;

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;
}

.tech-text{

    font-size:17px;

    line-height:1.7;

    color:#555;
}