/* BASIC css start */
#terms .page-body {width: 100% !important; margin:1px auto 0 !important; }
#terms .new-privercy-contract { max-width: 100vw; width: 70%; margin: 0; padding:0;}
#terms .new-privercy-contract h3 { margin:40px 0 30px;padding-bottom:6px;}
#terms .new-privercy-contract h3 span { color:#0f6efc; }
#terms .new-privercy-contract h3 .check { position:absolute; top:0; right:0; width:70px; }
#terms .new-privercy-contract h3 .check input { width:12px; height:12px; vertical-align:top; }
#terms .new-privercy-contract h3.w-normal { font-weight: normal }
#terms .privercy-contract-tap { height:35px; }
#terms .privercy-contract textarea { 
    width: 100%;       
    box-sizing: border-box; }
#terms .privercy-agree { margin-bottom: 20px; }
#terms .btn-foot {     
    margin-top: 20px;
    max-width: 100vw; /* 위의 텍스트 영역과 동일하게 최대 너비를 제한합니다. */
    width: 70%;
    text-align: center; 
    font-size: 0;
    line-height: 0;
    clear: both; /* 위쪽 float 요소의 영향을 차단합니다. */
}
#terms .btn-foot a,
#terms .btn-foot button,
#terms .btn-foot input { 
    display: inline-block; 
    margin: 0 5px;        
    vertical-align: middle; 
}
#content .tit-page {border:0;}
#terms .line .line_left { float:left; width:20%; height:1px;  background-color:#a8a8a8; }
#terms .line .line_right { float:right; width:80%; height:1px;  background-color:#515050; }

#terms .tbl { 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    border-spacing: 0; 
    border-collapse: collapse; 
    border-top: 1px solid #dadada; 
    border-left: 1px solid #dadada; 
    table-layout: fixed; /* 브라우저 맘대로 칸 크기가 변하는 것을 막고 설정한 비율대로 고정합니다. */
}
#terms .tbl caption { display: none; }

/* 테이블 헤더(제목 줄) 스타일 */
#terms .tbl th { 
    color: #3b3b3b; 
    font-size: 12px; 
    font-weight: bold; 
    background: #f0f0f0; 
    text-align: center; 
}

/* ★ 테이블 공통 속성: 여백과 줄바꿈 최적화 ★ */
#terms .tbl th,
#terms .tbl td { 
    padding: 10px 5px; /* 기존 padding:0 을 수정하여 상하좌우에 여유 공간을 줍니다. */
    margin: 0; 
    border-right: 1px solid #dadada; 
    border-bottom: 1px solid #dadada; 
    letter-spacing: -1px; 
    word-break: keep-all; /* 한국어 단어가 중간에 어색하게 찢어지는 것을 방지합니다. */
    line-height: 1.5; /* 줄간격을 살짝 넓혀 가독성을 높입니다. */
    /* 기존에 있던 height: 32px; 는 삭제했습니다. 내용이 길어 줄바꿈될 때 칸이 자연스럽게 늘어나게 하기 위함입니다. */
}

#terms .new-privercy-contract .tbl td { background: #ffffff; text-align: center; }

/* ★ 각 열(칸)의 너비 비율을 명확하게 지정하여 정돈된 느낌 부여 ★ */
#terms .tbl th:nth-child(1) { width: 30%; } /* 첫 번째 칸: 목적 */
#terms .tbl th:nth-child(2) { width: 40%; } /* 두 번째 칸: 항목 (내용이 가장 많으므로 가장 넓게) */
#terms .tbl th:nth-child(3) { width: 20%; } /* 세 번째 칸: 보유기간 */
#terms .tbl th:nth-child(4) { width: 10%; } /* 네 번째 칸: 동의 (체크박스만 있으므로 좁게) */

/* 테이블 내부 요소 정렬 (기존 코드 유지) */
#terms .tbl td ul,
#terms .tbl td ul li { padding: 0; margin: 0; list-style: none; }
#terms .tbl td ul { width: 70px; margin: 5px auto; text-align: left; }
#terms .tbl td .txt-l { padding: 5px 3px; margin: 0; text-align: left; }
#terms .tbl td .mr15 { margin-right: 15px; }
#content .tit-page { text-align: left; width: auto; font-size: 18px; color: #1e1e1e; padding: 0 0 21px; margin: 0 0 0; }

.tit-page img {
    max-width: 70%; /* 화면이 이미지 원본 크기보다 좁아질 때만 자연스럽게 줄어들도록 설정합니다. */
    width: auto !important; /* 원본 픽셀 크기 이상으로 이미지가 강제로 팽창하는 것을 완벽히 차단합니다. */
    height: auto; /* 너비가 변하더라도 세로 비율이 찌그러지지 않도록 유지합니다. */
}

#terms .line {
    max-width: 100vw;    /* 아래 약관 영역과 동일하게 700px로 맞춥니다. */
    width: 70%;         /* 화면이 700px보다 작아질 경우 자연스럽게 줄어들게 합니다. */
    overflow: hidden;    /* 내부에 float 속성이 적용된 자식 요소들을 안정적으로 감싸기 위한 필수 설정입니다. */
    margin-bottom: 30px; /* 선과 아래쪽 텍스트 사이에 적절한 여백을 줍니다 (원하시는 대로 수치 조절 가능). */
}
/* BASIC css end */