ㅣ.sub-agreement-wrap {
    padding-top: 0; /* 여백 축소를 위해 0으로 조정 */
    background-color: #fff;
    min-height: 100vh;
}

/* 상단 헤더 영역 (밝고 깨끗한 디자인) */
.agreement-top {
    padding: 60px 20px 40px; /* 기존 100px -> 60px로 여백 축소 */
    text-align: center;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.agreement-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #111;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
}
.agreement-main-desc {
    font-size: 18px;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* 탭 네비게이션 (중앙 집중형) */
.agreement-tabs-nav {
    border-bottom: 1px solid #eee;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 90px; /* PC 기본 헤더 높이에 강제 고정 */
    z-index: 100;
    transition: top 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}

/* 스크롤 시 헤더 높이 변화에 맞춰 틈 없이 밀착 */
body:has(.header.scrolled) .agreement-tabs-nav {
    top: 60px !important; /* 스크롤된 헤더 높이에 강제 고정 */
}

/* 모바일 대응 (헤더 높이가 다를 경우) */
@media screen and (max-width: 1024px) {
    .agreement-tabs-nav {
        top: 70px; /* 모바일 헤더 높이 */
    }
    body:has(.header.scrolled) .agreement-tabs-nav {
        top: 70px !important; /* 모바일은 스크롤 높이 변화가 없다면 유지 */
    }
}
.tabs-nav-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}
.tabs-list {
    display: flex;
    justify-content: center;
    gap: 60px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.tab-item {
    position: relative;
    display: flex;
    justify-content: center;
}
.tab-item button {
    padding: 25px 0;
    font-size: 18px;
    font-weight: 700;
    color: #999;
    transition: var(--transition);
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: center; /* 버튼 내부 텍스트 중앙 정렬 강제 */
    display: block;
}
.tab-item:hover button {
    color: #111;
}
.tab-item.active button {
    color: var(--point-color);
}
.tab-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--point-color);
}

/* 본문 컨텐츠 영역 (중앙 정렬 및 가독성 최적화) */
.agreement-content-body {
    padding: 80px 20px 120px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 전체 컨텐츠를 가로 중앙으로 강제 배치 */
}
.content-body-inner {
    width: 100%;
    max-width: 860px; /* 텍스트 가독성을 위한 최적 너비 */
    margin: 0 auto;
}

.tab-content {
    display: none;
    width: 100%;
    animation: fadeIn 0.5s ease forwards;
}
.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 약관 타이포그래피 */
.agreement-article {
    font-size: 16px;
    line-height: 1.9;
    color: #444;
    word-break: keep-all;
    text-align: justify; /* 본문은 양방향 정렬로 깔끔하게 */
}
.agreement-article h2 {
    font-size: 32px;
    font-weight: 800;
    color: #111;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid #111;
    text-align: left; /* 제목은 좌측 정렬 */
}
.agreement-article h3 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin: 60px 0 20px;
}
.agreement-article h4 {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 30px 0 15px;
}
.agreement-article p {
    margin-bottom: 20px;
}
.agreement-article strong {
    color: #000;
    font-weight: 700;
}
.agreement-article ul, .agreement-article ol {
    margin-bottom: 25px;
    padding-left: 20px;
}
.agreement-article li {
    margin-bottom: 10px;
}
.agreement-article a {
    color: var(--point-color);
    text-decoration: underline;
}

/* 목차 박스 */
.toc-box {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 30px;
    margin: 40px 0;
}
.toc-box h3 {
    margin-top: 0 !important;
    font-size: 18px !important;
    margin-bottom: 15px !important;
}
.toc-box ol {
    margin-bottom: 0 !important;
    font-size: 15px;
    color: #666;
}

/* 테이블 스타일 */
.agreement-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 30px 0;
    font-size: 14px;
    border-top: 2px solid #111;
}
.agreement-article th, .agreement-article td {
    border: 1px solid #eee;
    padding: 15px;
    text-align: left;
}
.agreement-article th {
    background-color: #fcfcfc;
    font-weight: 700;
    color: #111;
}

/* 준비중 메시지 */
.ready-message {
    text-align: center;
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    align-items: center; /* 가로 중앙 정렬 */
}
.ready-message svg {
    margin-bottom: 30px;
    color: #ddd;
}
.ready-message h2 {
    border-bottom: none !important;
    margin-bottom: 10px !important;
    text-align: center !important; /* 제목 중앙 정렬 강제 */
}
.ready-message p {
    color: #999;
}

/* 하단 날짜 정보 */
.date-info {
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid #eee;
    font-weight: 600;
    color: #888;
    text-align: right;
}

/* 반응형 */
@media screen and (max-width: 1024px) {
    .agreement-top {
        padding: 60px 20px 40px;
    }
    .agreement-main-title {
        font-size: 32px;
    }
    .agreement-main-desc {
        font-size: 15px;
    }
    .tabs-list {
        gap: 30px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs-list::-webkit-scrollbar {
        display: none;
    }
    .tab-item button {
        font-size: 16px;
        white-space: nowrap;
    }
    .agreement-article h2 {
        font-size: 26px;
    }
    .agreement-article h3 {
        font-size: 20px;
    }
}