/* =========================================
   약관 컴포넌트 스타일 (Component Scope)
   ========================================= */
.ds_article_wrap {
    --light-box-color: #e6f6f1;
    --text-color: #fabd52;
    --main-color: #fabd52;
    --main_hover-color: #007d52;
    --main-light-color: #dbeaff;
    --main-light-hover-color: #ceebe1;
    --bg-color: #f7f7f8;
    --input-bg-color: #fff;
    --input-login-bg-color: #f4f5f7;
    --search-bg-color: #f7f7f8;
    --table_border: #646a73;

    /* Primary */
    --navy900: #000d7f;
    --navy700: #5d66db;
    --navy500: #a2a8ea;
    --navy300: #d1d3f5;
    --navy200: #e8e9fa;
    --navy100: #eeeffb;

    /* Secondary */
    --org: #ff7826;
    --vlt: #e8e9fa;
    --vlt300: #eeeffb;
    --error: #ff7777;
    --error-bg: #ffe8e8;

    /* Gray */
    --white: #ffffff;
    --black: #000000;
    --gray700: #646a73;
    --gray600: #8f959e;
    --gray500: #a7a7a7;
    --gray400: #d0d3d6;
    --gray300: #dee0e3;
    --gray200: #eff0f1;
    --gray100: #f2f3f5;
    --gray000: #f5f6f7;

    /* Gradation */
    --gdb100: rgb(100, 115, 244);
    --gdl100: linear-gradient(-30deg, rgba(100, 115, 244, 1) 0%, rgba(131, 93, 240, 1) 80%);

    /* point color */
    --ppl600: #5e5ac1;
    --ppl500: #9a87ef;
    --ppl400: #b0a0f5;
    --ppl300: #e6e2fd;

    /* line color*/
    --line-color: #e2e2e2;
    --line-light-color: #92dac2;
    --line-hover-color: #144df4;
    --line-wht: #fff;

    /* border: 1px solid var(--gray300); */
    width: 100%;
    max-width: 1280px;
    margin: 16px auto;
}
.ds_article_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    font-size: 16px;
}

/* [Header & Footer 공통] */
.ds_term_header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 0 16px;
    border: none;
}

.ds_term_title {
    font-size: 24px;
    font-weight: 700;
    color: var(--font_blk);
    text-align: center;
    margin: 0;
}

/* 버전 선택 (selection.js 사용) */
.ds_term_listbox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: 100%;
    padding: 16px;
}
.ds_term_header .listbox_wrap .btn_listbox {
    padding: 8px 30px 8px 12px;
    border: 1px solid var(--gray400);
    border-radius: 4px;
    font-size: 14px;
    color: var(--font_gry);
    background-color: var(--white);
    min-width: 180px;
}

/* 기존 ds_term_version_select 스타일 제거 또는 주석 처리 */
.ds_term_version_select {
    display: none; /* 더 이상 사용하지 않음 */
}

.ds_term_history_wrap {
    /* border: 1px solid red; */
    position: relative;
    border: none;
}
.ds_term_history_wrap .btn_term_history {
    padding: 0.5rem 2rem;
    background-color: var(--gray100);
    border-radius: 8px;
    border: 1px solid var(--gray300);
}
.ds_term_history_wrap .ds_term_history {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    border: 1px solid var(--gray300);
    padding: 4px;
    min-width: 180px;
    text-align: left;
    border-radius: 2px;
    background-color: #fff;
    max-height: 120px;
    overflow-y: auto;
}
.ds_term_history_wrap .ds_term_history[aria-hidden="true"] {
    display: none;
}
.ds_term_history_wrap .ds_term_history[aria-hidden="false"] {
    display: block;
}
.ds_term_history_wrap .ds_term_history li button {
    padding: 8px;
    width: 100%;
    text-align: left;
    border: none;
    background-color: #fff;
}
/* [Body: 스크롤 영역] */
.ds_term_body {
    flex: 1 1 auto;
    /* overflow-y: auto; */
    padding: 40px; /* 내부 여백 넉넉하게 */
    margin-top: 32px;
    border-top: 1px solid var(--gray300);
}
.ds_term_body:focus-visible {
    outline: 2px solid var(--main_color);
    outline-offset: -2px;
}

/* --- [콘텐츠 스타일 상세 정의] --- */

/* 1. Headings (위계 구조) */
/* h1: 헤더의 메인 타이틀에만 사용 (.ds_term_title) */
/* h2: 장(章) - "제 1 장 총칙" */
.ds_term_h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--font_blk);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--font_blk);
}
.ds_term_h2:first-child {
    margin-top: 0;
} /* 첫 요소 상단 여백 제거 */

/* h3: 조(條) - "제 1 조 (목적)" */
.ds_term_h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--font_blk);
    margin: 30px 0 12px;
}

/* h4: 부가 요소 (박스 제목, 하위 개념 등) */
.ds_term_h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--font_blk);
    margin: 12px 0 8px;
    padding: 0;
}

/* 2. Paragraph & Text */
.ds_term_text {
    font-size: 14px;
    color: var(--font_gry);
    margin-bottom: 6px;
    word-break: keep-all;
}
.ds_term_highlight {
    color: var(--error);
    font-weight: 600;
}
.ds_term_underline {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 3. Lists (순서 있는/없는 리스트) */
/* 1뎁스: ① 원 안의 숫자 */
.ds_term_ol {
    list-style: none;
    margin-bottom: 0;
    padding-left: 4px;
}
.ds_term_ol:not(:first-child) {
    margin-top: 8px;
}
.ds_term_ol > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    color: var(--font_gry);
    font-size: 14px;
}
.ds_term_ol > li:nth-of-type(1)::before {
    content: "①";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(2)::before {
    content: "②";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(3)::before {
    content: "③";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(4)::before {
    content: "④";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(5)::before {
    content: "⑤";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(6)::before {
    content: "⑥";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(7)::before {
    content: "⑦";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(8)::before {
    content: "⑧";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(9)::before {
    content: "⑨";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(10)::before {
    content: "⑩";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(11)::before {
    content: "⑪";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(12)::before {
    content: "⑫";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(13)::before {
    content: "⑬";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(14)::before {
    content: "⑭";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(15)::before {
    content: "⑮";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(16)::before {
    content: "⑯";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(17)::before {
    content: "⑰";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(18)::before {
    content: "⑱";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(19)::before {
    content: "⑲";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}
.ds_term_ol > li:nth-of-type(20)::before {
    content: "⑳";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}

/* 2뎁스: 1. 2. 3. 형태 */
.ds_term_ol ol {
    list-style: none;
    counter-reset: term-counter-2;
    margin-top: 8px;
    margin-bottom: 8px;
    padding-left: 4px;
}
.ds_term_ol ol > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 6px;
    color: var(--font_gry);
    font-size: 14px;
}
.ds_term_ol ol > li::before {
    counter-increment: term-counter-2;
    content: counter(term-counter-2) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 600;
    color: var(--font_blk);
}

/* 3뎁스: A. B. C. 형태 */
.ds_term_ol ol ol {
    list-style: none;
    counter-reset: term-counter-3;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-left: 4px;
}
.ds_term_ol ol ol > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 4px;
    color: var(--font_gry);
}
.ds_term_ol ol ol > li::before {
    counter-increment: term-counter-3;
    content: counter(term-counter-3, upper-alpha) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 500;
    color: var(--font_blk);
}

/* 4뎁스: a. b. c. 형태 */
.ds_term_ol ol ol ol {
    list-style: none;
    counter-reset: term-counter-4;
    margin-top: 4px;
    margin-bottom: 4px;
    padding-left: 4px;
}
.ds_term_ol ol ol ol > li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 4px;
    color: var(--font_gry);
}
.ds_term_ol ol ol ol > li::before {
    counter-increment: term-counter-4;
    content: counter(term-counter-4, lower-alpha) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 400;
    color: var(--font_blk);
}

/* 원형 리스트 (•) */
.ds_term_ul {
    /* margin-bottom: 16px; */
    padding-left: 4px;
}
.ds_term_ul:not(:first-child) {
    margin-top: 8px;
}
.ds_term_ul > li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 6px;
    color: var(--font_gry);
    font-size: 14px;
}
.ds_term_ul > li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--gray600);
}

/* 변형: ul 리스트 스타일 없음 (마커 제거) */
/* 사용 예: <ul class="no-marker"> 또는 <ul class="ds_term_ul no-marker"> */

.ds_term_ul.no-marker > li::before,
ul.no-marker > li::before {
    display: none;
}

/* 4. Box Components (박스형 텍스트) */
/* 기본 회색 박스 (설명, 정의 등) */
.ds_term_box_gray {
    background-color: var(--gray100);
    border: 1px solid var(--gray300);
    border-radius: 6px;
    padding: 16px;
    margin: 4px 0 16px;
    font-size: 15px;
    color: var(--font_gry);
}
.ds_term_box_gray .ds_term_h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--font_blk);
}
/* 경고/강조 박스 (주의사항) */
.ds_term_box_alert {
    background-color: var(--error-bg);
    border: 1px solid var(--error);
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0 24px;
    color: var(--font_gry);
}
.ds_term_box_alert .ds_term_h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--error);
}

/* 5. Definition List (용어 정의) */
.ds_term_dl {
    margin-bottom: 24px;
}
.ds_term_dl dt {
    float: left;
    width: 120px;
    font-weight: 700;
    color: var(--font_blu);
    clear: left;
    margin-bottom: 8px;
}
.ds_term_dl dd {
    margin-left: 120px;
    margin-bottom: 8px;
    color: var(--font_gry);
}
/* clearfix */
.ds_term_dl::after {
    content: "";
    display: block;
    clear: both;
}

/* 6. Table (표) */
.ds_term_table_wrapper {
    overflow-x: auto;
    margin: 20px 0;
    border: 1px solid var(--gray300);
    border-radius: 6px;
    max-width: 100%;
}
.ds_term_table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;
    background-color: var(--white);
}
.ds_term_table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.ds_term_table th,
.ds_term_table td {
    padding: 14px 16px;
    border: 1px solid var(--gray300);
    text-align: center;
}
/* wrapper와 겹치는 외곽 테두리 제거 */
.ds_term_table thead tr:first-child th {
    border-top: none;
}
.ds_term_table tbody tr:first-child td {
    border-top: none;
}
.ds_term_table th:first-child,
.ds_term_table td:first-child {
    border-left: none;
}
.ds_term_table th:last-child,
.ds_term_table td:last-child {
    border-right: none;
}
.ds_term_table tbody tr:last-child td {
    border-bottom: none;
}
.ds_term_table th {
    background-color: var(--gray100);
    color: var(--font_blk);
    font-weight: 600;
    white-space: nowrap;
    font-size: 14px;
}
.ds_term_table td {
    color: var(--font_gry);
    font-size: 14px;
}

/* 테이블 정렬 옵션 */
.ds_term_table.align_left th,
.ds_term_table.align_left td {
    text-align: left;
}
.ds_term_table.align_right th,
.ds_term_table.align_right td {
    text-align: right;
}
/* 개별 열 정렬 (th, td에 직접 적용) */
.ds_term_table th.align_left,
.ds_term_table td.align_left {
    text-align: left;
}
.ds_term_table th.align_center,
.ds_term_table td.align_center {
    text-align: center;
}
.ds_term_table th.align_right,
.ds_term_table td.align_right {
    text-align: right;
}

.ds_term_privacy_labeling_wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}
.ds_term_privacy_labeling_wrap figure {
    flex: 1;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    border: 1px solid #62a5e4;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.ds_term_privacy_labeling_wrap figure img {
    width: 64px;
    height: auto;
    margin: 1rem auto 0;
}
.ds_term_privacy_labeling_wrap figure figcaption {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.ds_term_privacy_labeling_wrap figure figcaption strong {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    color: var(--font_blk);
    padding-bottom: 8px;
}
/* 반응형 모바일 처리 */
@media (max-width: 1024px) {
    .ds_term_privacy_labeling_wrap {
        flex-wrap: wrap;
    }
    .ds_term_privacy_labeling_wrap figure {
        min-width: 40%;
    }
}
@media (max-width: 768px) {
    .ds_term_title {
        font-size: 20px;
    }
    .ds_term_body {
        margin-top: 8px;
        padding: 24px 16px;
    }
    .ds_term_history_wrap {
        width: 100%;
    }
    .ds_term_history_wrap .btn_term_history {
        width: 100%;
    }
    .ds_term_history_wrap .ds_term_history {
        max-width: none;
        width: 100%;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
    }
    .ds_term_dl dt {
        float: none;
        width: 100%;
        margin-bottom: 4px;
    }
    .ds_term_dl dd {
        margin-left: 0;
        margin-bottom: 16px;
    }

    .ds_term_table_wrapper {
        border-radius: 4px;
    }
    .ds_term_table {
        min-width: 700px; /* 모바일에서도 최소 너비 유지 */
    }

    .ds_term_privacy_labeling_wrap figure {
        min-width: 100%;
    }
}