@charset "utf-8";

/* **** Common Reset **** */
*{margin:0;padding:0;list-style:none;font-size:14px;font-weight: 500;font-family: "NotoSansCJKkr", sans-serif;box-sizing: border-box;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5{margin:0;padding:0;word-wrap:break-word;word-break:break-all;}
li,p,span,strong,a{font-size:inherit;color:inherit;font-family:inherit;}

/* 화면 항상 가운데 유지 (PC) */
body, html{width:100%; height:100%;}
body {
    overflow-x:hidden; 
    background: #eceef2; 
    display: flex;          
    align-items: center;    
    justify-content: center; 
}

input,select,img{vertical-align:middle;}
img{border:0;max-width:100%;max-height:100%;}

.council-logo {
    position: relative;
    padding-left: 0; /* 기존 여백 제거 */
}

.council-logo::before,
.council-emblem::before {
    content: "";
    display: inline-block;
    width: 25px;
    height: 25px;
    margin-right: 6px; /* 이미지와 텍스트 간격 */
    background-image: url('../img/emblem.png');
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: middle;
}

table{border-collapse:collapse;width:100%;}
a{display:inline-block;text-decoration:none;}

/* [메인 레이아웃 - 1450px 이상 PC] */
.guide-wrap {
    display: flex;
    max-width: 70%; 
    margin: 0 auto; 
    border-radius: 1.04vw; 
    box-shadow: 0px 0px 0.78vw rgba(0, 0, 0, 0.5);
    background: #fff;
    overflow: hidden;
    width: 100%;
}

.guide-wrap > .img { width: 50%; line-height: 0; }
.guide-wrap > .img img { width: 100%; height: 100%; object-fit: cover; }

.guide-wrap > .rt {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2% 4%;
    text-align: center;
    letter-spacing: -0.05vw;
    background: #f9f9f9;
}

/* [공통] 전구간 텍스트 줄바꿈 방지 */
.guide-wrap > .rt > .title,
.guide-wrap > .rt > .box1 p.p1,
.guide-wrap > .rt > .list-style1 > li,
.guide-wrap > .rt > .btn1 a,
.guide-wrap > .rt > .btn2 a {
    white-space: nowrap !important; 
    word-break: keep-all !important;
}

.guide-wrap > .rt > .title { font-size: 2.1vw; font-weight: 700; color:#000; }
.guide-wrap > .rt > .txt2 { font-size: 1.15vw; margin-top: 1.5em; line-height: 1.5; color:#333; }
.guide-wrap > .rt > .txt3 { font-size: 0.85vw; margin-top: 1em; line-height: 1; color:#333; }

.guide-wrap > .rt > .box1 {
    margin-top: 1.5em;
    background: #edf0f7;
    border: 0.26vw solid #3c5786; 
    border-radius: 1.04vw;
    padding: 1.05vw 0.5vw;
}
.guide-wrap > .rt > .box1 p.p1 { font-size: 1.25vw; font-weight: 700; color:#000; }
.guide-wrap > .rt > .box1 p.p2 { font-size: 0.9vw; margin-top: 0.3vw; color:#666; }

.guide-wrap > .rt > .list-style1 { font-size: 0.9vw; margin-top: 1.5em; text-align: left; display: inline-block; margin-left: auto; margin-right: auto; }
.guide-wrap > .rt > .list-style1 > li { position: relative; padding-left: 1.5em; margin-bottom: 0.4vw; }
.guide-wrap > .rt > .list-style1 > li::before {
    content:""; position: absolute; left: 0.5vw; top: 0.4em; width: 0.6vw; height: 0.6vw;
    background: #325389; border-radius: 50%;
}
/* 3번째 li 가운데 정렬 */
.guide-wrap > .rt > .list-style1 > li:nth-child(3) {
    text-align: center;
    padding-left: 0;
    color: #3c5786;      /* 기존 들여쓰기 제거 */
}

/* 3번째 li의 ※ 기호도 가운데 정렬용으로 변경 */
.guide-wrap > .rt > .list-style1 > li:nth-child(3)::before {
    position: static;     /* absolute 제거 */
    display: inline-block;
    margin-right: 6px;
    content: "※"; 
    background: none;
    width: auto;
    height: auto;
}
/* 버튼 및 아이콘 */
.guide-wrap > .rt > .btn1 { margin-top: 1.8em; }
.guide-wrap > .rt > .btn1 a {
    display: flex; justify-content: center; align-items: center; width: 100%; height: 3.4vw; 
    font-size: 1.15vw; font-weight: 700; background: #2c4c7c; border-radius: 0.5vw; color: #fff;
}
.guide-wrap > .rt > .btn1 a::after {
    content: ""; display: inline-block; width: 1.2vw; height: 1.2vw; margin-left: 0.6vw;
    background: url('../img/guide_img02.png') no-repeat center center; background-size: contain;
}

.guide-wrap > .rt > .btn2 { margin-top: 0.8vw; }
.guide-wrap > .rt > .btn2 a {
    display: flex; justify-content: center; align-items: center; width: 100%; height: 3.4vw;
    font-size: 1.05vw; font-weight: 700; background: #eaeaec; border-radius: 0.5vw;
    border: 1px solid #a1a3a2; color: #161115;
}
.guide-wrap > .rt > .btn2 a::after {
    content: ""; display: inline-block; width: 1.2vw; height: 1.2vw; margin-left: 0.6vw;
    background: url('../img/guide_img03.png') no-repeat center center; background-size: contain;
}

/* [반응형 1] 1450px ~ 801px (삐져나감 방지 정밀 수정) */
@media screen and (max-width: 1450px) {
    body { display: block; } 
    .guide-wrap { max-width: 100%; width: 100%; margin: 0; border-radius: 0; }
    
    .guide-wrap > .rt { padding: 3% 6%; } /* 좌우 여백을 넓혀 텍스트 공간 압축 */
    .guide-wrap > .rt > .title { font-size: 3.1vw; }
    .guide-wrap > .rt > .txt2 { font-size: 1.6vw; }
    
    .guide-wrap > .rt > .box1 { padding: 1.5vw 2vw; } /* 박스 내부 여백 증가 */
    .guide-wrap > .rt > .box1 p.p1 { font-size: 1.8vw; } /* 2.2vw -> 1.9vw로 하향 조정 */
    .guide-wrap > .rt > .box1 p.p2 { font-size: 1.3vw; }
    
    .guide-wrap > .rt > .list-style1 { font-size: 1.3vw; }
    .guide-wrap > .rt > .btn1 a { font-size: 1.7vw; height: 5.5vw; }
    .guide-wrap > .rt > .btn2 a { font-size: 1.5vw; height: 5.5vw; }
}

/* [반응형 2] 800px 이하 (모바일 정밀 수정) */
/* [반응형 2] 800px 이하 : 모바일 레이아웃 최적화 */
@media screen and (max-width: 800px) {
    body { display: block; }
    .guide-wrap { display: block; }
    .guide-wrap > .img { width: 100%; border-radius: 0; }
    
    /* 좌우 패딩을 살짝 늘려 내부 공간 압축 방지 */
    .guide-wrap > .rt { width: 100%; padding: 30px 7%; border-radius: 0; }
    
    /* 제목 크기 조정 */
    .guide-wrap > .rt > .title { font-size: 5vw; } 
    .guide-wrap > .rt > .txt2 { font-size: 3.5vw; }
    
    /* 중단일시 박스: 텍스트가 삐져나가지 않도록 폰트 크기 하향 조절 */
    .guide-wrap > .rt > .box1 { border-width: 2px; padding: 12px 8px; }
    .guide-wrap > .rt > .box1 p.p1 { font-size: 3.8vw !important; letter-spacing: -0.02em; } 
    .guide-wrap > .rt > .box1 p.p2 { font-size: 3.0vw; }
    
    /* 리스트 항목 폰트 조정 */
    .guide-wrap > .rt > .list-style1 { font-size: 3vw; } 
    .guide-wrap > .rt > .list-style1 > li { padding-left: 0.7em; margin-bottom: 8px; }
    
    /* 버튼 및 아이콘 크기 고정: 너무 작게 보이지 않도록 px 병행 사용 */
    .guide-wrap > .rt > .btn1 a, 
    .guide-wrap > .rt > .btn2 a { 
        font-size: 3.8vw; 
        height: 12vw; 
        min-height: 45px; /* 최소 높이 보장 */
        border-radius: 8px; 
    }
    
    /* 아이콘이 너무 작을 경우를 대비해 고정 크기(px)로 변경 */
    .guide-wrap > .rt > .btn1 a::after, 
    .guide-wrap > .rt > .btn2 a::after { 
        width: 14px !important; 
        height: 14px !important; 
        margin-left: 8px; 
    }
}

/* [팝업 박스 핵심 수정] */
.pop-box {
    display: none; 
    position: fixed; /* 화면 고정 */
    top: 50% !important; 
    left: 50% !important; 
    transform: translate(-50%, -50%) !important;
    width: 90% !important; 
    max-width: 1000px;
    max-height: 80vh; 
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.7); 
    padding: 50px 20px 30px;
    overflow-y: auto; 
    z-index: 9999 !important; /* 모든 요소보다 위에 표시 */
}

.pop-box .close { position: absolute; top: 15px; right: 20px; cursor: pointer; }
.pop-box .close img { width: 25px; height: 25px; }

/* 테이블 스타일 */
.table_box table thead tr th { padding: 10px; background: #ebf5ff; color: #09377c; border-bottom: 1px solid #ddd; font-weight: 600; }
.table_box table tbody tr td { padding: 10px; text-align: center; border-bottom: 1px solid #eee; border-right: 1px solid #eee; font-size: 13px; }
.table_box table tbody tr td:last-child { border-right: 0; }