/* ==========================================================================
   연구24 개인정보처리방침 서브페이지 전용 CSS (레이아웃 & 타이포그래피 보완)
   ========================================================================== */

/* 1. 레이아웃 & 타이포그래피 공통 설정 */
.policy-body-content {
    max-width: 1250px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Noto Sans KR', sans-serif;
    letter-spacing: -0.04em;
}

.policy-section {
    margin-bottom: 2.5rem;
    scroll-margin-top: 10rem;
}

.policy-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--c-dark, #1d2f57);
    margin-bottom: 2.2rem;
    padding-left: 1.2rem;
    border-left: 4px solid var(--c-primary, #1458c7);
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* 2. 제목 앞 아이콘 공통 틀 생성 */
.policy-title[class*="icon-"]::before {
    content: "";
    display: block;
    width: 3.4rem;
    height: 3.4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.policy-text {
    font-size: 1.55rem;
    line-height: 1.9;
    color: #4b5563;
    margin-bottom: 1.8rem;
    word-break: keep-all;
}

/* policy.css 내의 구분선은 상하 여백이 커서 덮어씌움 */
.section-line {
    margin: 5rem 0;
}

/* 2. 리스트 스타일 (들여쓰기 및 행간 조정) */
.policy-sub-list {
    list-style: none;
    padding-left: 1.5rem;
    margin-bottom: 2rem;
}
.policy-sub-list > li {
    position: relative;
    font-size: 1.5rem;
    line-height: 1.85;
    color: #5d6b7c;
    margin-bottom: 1.2rem;
}

/* 3. HTML5 Div Grid 테이블 (좌우 100% 꽉 차도록 패딩 및 속성 강제) */
.policy-grid {
    width: 100%;
    box-sizing: border-box;
    margin: 2.5rem 0;
    font-size: 1.45rem;
    border-top: 1px solid #d8deea;
    border-left: 1px solid #e3e7ef;
    border-right: 1px solid #e3e7ef;
    background-color: #fff;
}

.grid-header, .grid-row {
    display: grid;
    width: 100% !important;
    box-sizing: border-box;
}

.grid-header {
    background-color: var(--bg-light, #f8faff);
    color: var(--c-dark, #1d2f57);
    font-weight: 700;
    border-bottom: 1px solid #cfd7e6;
}

.grid-row {
    border-bottom: 1px solid #e3e7ef;
    color: #475569;
    line-height: 1.6;
}

.grid-cell {
    width: 100%;
    box-sizing: border-box;
    padding: 1.6rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-break: keep-all;
}

/* ==========================================================================
    policy-btn 및 다운로드 이미지 아이콘 깨짐 방지 완벽 보정
   ========================================================================== */

/* 1. 기본 버튼 틀 정렬 보정 */
.policy-btn {
    font-family: inherit;
    letter-spacing: -0.04em;
    border: 1px solid #c4cfdd;
    padding: 0.5rem 1.1rem;
    background-color: #fff;
    color: #475569;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.45rem;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle;
    line-height: 1 !important;
    transition: all 0.15s ease-in-out;
}

/* 2. 다운로드 전용 버튼 속성 보정 */
.policy-btn.download {
    gap: 0.4rem !important;
    padding-right: 1rem !important;
}

/* 3. CSS 가상 요소 다운로드 아이콘 (오타 및 수축 버그 수정본) */
.policy-btn.download::after {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    flex-shrink: 0 !important;
    margin-top: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237a8599' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: background-image 0.15s ease-in-out;
}

/* 4. 마우스 호버 시 효과 */
.policy-btn:hover {
    background-color: #f8faff;
    border-color: var(--c-primary, #1458c7);
    color: var(--c-primary, #1458c7);
}

/* 호버 시 파란색 아이콘 이미지로 변경 */
.policy-btn.download:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231458c7' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3'/%3E%3C/svg%3E") !important;
}

/* 5. 그리드 컬럼 비율 지정 */
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-member-db { grid-template-columns: 1.2fr 2fr 1.3fr 1.5fr 2fr; }
.col-share-3rd { grid-template-columns: 1.5fr 2.5fr 2fr 1fr; }

/* 6. 모바일 반응형 가이드 (768px 이하) */
@media (max-width: 768px) {
    .policy-grid {
        border: none;
        background-color: transparent !important;
    }
    .grid-header {
        display: none;
    }
    .grid-row {
        grid-template-columns: 1fr !important;
        border: 1px solid #e3e7ef;
        border-radius: 12px;
        margin-bottom: 2rem;
        padding: 1.8rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        background-color: #ffffff;
    }
    .grid-cell {
        padding: 0.8rem 0;
        justify-content: flex-start;
        text-align: left;
        display: block;
    }
    .grid-cell::before {
        content: attr(data-label);
        display: block;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--c-dark, #1d2f57);
        margin-bottom: 0.3rem;
    }
}

/* ==========================================================================
   15. 개인정보 처리방침의 변경 - 셀렉트 박스 전용 커스텀 스타일
   ========================================================================== */

/* 셀렉트 박스를 감싸는 레이블(정렬 및 간격 제어) */
.policy-section label {
    display: inline-block;
    margin-top: 1.5rem;
    width: 100%;
    max-width: 36rem;
}

/* 커스텀 셀렉트 박스 본체 */
.policy-section select {
    width: 100%;
    height: 4.4rem;
    padding: 0 4rem 0 1.4rem;
    border: 1px solid #c4cfdd;
    border-radius: 0.6rem;
    background-color: #fff;
    color: var(--c-dark, #1d2f57);
    font-size: 1.45rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.03em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2366748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    background-size: 14px 14px;

    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.15s ease-in-out;
}

.policy-section select::-ms-expand {
    display: none;
}

.policy-section select:hover {
    border-color: #a4b3c6;
    background-color: #fcfdff;
}

.policy-section select:focus {
    outline: none;
    border-color: var(--c-primary, #1458c7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231458c7' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19.5 8.25l-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    box-shadow: 0 0 0 4px rgba(20, 88, 199, 0.08);
}

/* ==========================================================================
   주요 개인정보 처리 표시 (라벨링) & 2단 목차 디자인 (간격 및 링크 인지력 보완)
   ========================================================================== */

/* 1. 전체 외부 래퍼 */
.privacy-summary-wrap {
    border-top: 1px solid #d8deea;
    border-bottom: 1px solid #d8deea;
    background: #ffffff;
    margin-bottom: 5rem;
}

/* 2. 상단 타이틀 영역 */
.privacy-summary-title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 800;
    color: #111827;
    padding: 1.5rem 0;
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
}

/* 3. 3열 2행 아이콘 그리드 (선 삐져나옴 버그 수정 반영) */
.privacy-summary-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 1.5rem 0;
    border-top: 1px solid #e3e7ef;
    border-bottom: 1px solid #e3e7ef;
}

.summary-grid-item {
    background: #ffffff;
    padding: 3rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    border-right: 1px solid #e3e7ef;
    transition: background-color 0.2s ease;
}

.summary-grid-item:hover {
    background: #f9fbff;
}

.summary-grid-item:last-child {
    border-right: none;
}

/* 3. 아이콘 크기 축소 */
.summary-icon {
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-icon svg {
    width: 100%;
    height: 100%;
}

/* 4. 텍스트 크기 축소 (6개가 들어가야 하므로) */
.summary-name {
    font-size: 1.35rem;
    font-weight: 700;
    color: #23324a;
    line-height: 1.4;
    word-break: keep-all;
}

.summary-desc {
    display: block;
    margin-top: 0.6rem;
    font-size: 1.15rem;
    color: #66748b;
    word-break: keep-all;
}

/* ==========================================================================
   4. 2단 레이아웃 목차 (TOC) - 링크 형태 버튼 스타일
   ========================================================================== */
.privacy-toc-box {
    padding: 3.5rem 4rem 4.5rem;
    background: #f8f9fc;
    border-top: 1px solid #ebeef5;
}

.privacy-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 3rem;
    row-gap: 1.4rem;
}

.privacy-toc-list li {
    margin: 0;
    padding: 0;
}

.privacy-toc-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 2rem;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    color: #475569;
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.2s ease-in-out;
}

.privacy-toc-list a::after {
    content: "→";
    font-size: 1.6rem;
    color: #94a3b8;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
}

.privacy-toc-list a:hover {
    color: var(--c-primary, #1458c7);
    border-color: var(--c-primary, #1458c7);
    background-color: #f4f8ff;
    box-shadow: 0 4px 12px rgba(20, 88, 199, 0.06);
}

.privacy-toc-list a:hover::after {
    color: var(--c-primary, #1458c7);
    transform: translateX(5px);
}

/* ==========================================================================
   5. 모바일 반응형 대응 (768px 이하) - 라벨링 선 그리기 재정의 포함
   ========================================================================== */
@media (max-width: 768px) {
    .content-box {
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 15px !important;
    }

    .privacy-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 2.5rem 0;
    }

    .summary-grid-item {
        border-right: 1px solid #e3e7ef !important;
        border-bottom: 1px solid #e3e7ef !important;
        padding: 2.5rem 1rem;
    }

    /* 2열 기준 우측 선 제거 (2, 4, 6번째) */
    .summary-grid-item:nth-child(2n) {
        border-right: none !important;
    }

    /* 2열 기준 마지막 행 선 제거 (5, 6번째) */
    .summary-grid-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .summary-icon {
        width: 6rem;
        height: 6rem;
    }

    .summary-name {
        font-size: 1.4rem;
    }

    .privacy-toc-box {
        padding: 2.5rem 2rem;
    }

    .privacy-toc-list {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }

    .privacy-toc-list a {
        padding: 1.2rem 1.6rem;
        font-size: 1.4rem;
    }


    .policy-modal {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
    }

    .policy-modal .modal-header {
        padding: 1.6rem 1.8rem !important;
    }

    .policy-modal .modal-header h4 {
        font-size: 1.6rem !important;
    }

    .policy-modal:not([open]) {
        display: none;
    }

    .policy-modal[open] {
        display: flex;
        flex-direction: column;
    }

    .policy-modal .modal-body {
        padding: 2rem 1.5rem !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    .privacy-summary-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        margin: 2rem 0;
    }

    .summary-grid-item {
        border-right: 1px solid #e3e7ef !important;
        border-bottom: 1px solid #e3e7ef !important;
        padding: 2rem 1rem !important;
    }

    .summary-grid-item:nth-child(2n) {
        border-right: none !important;
    }

    .summary-grid-item:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    .summary-icon {
        width: 4.5rem !important;
        height: 4.5rem !important;
        margin-bottom: 1rem !important;
    }

    .summary-name {
        font-size: 1.35rem !important;
    }
    .summary-desc {
        font-size: 1.2rem !important;
    }

    /* 목차 부분 */
    .privacy-toc-box {
        padding: 2rem 1.5rem;
    }
    .privacy-toc-list {
        grid-template-columns: 1fr;
        row-gap: 1rem;
    }
    .privacy-toc-list a {
        padding: 1.2rem 1.6rem;
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    .privacy-summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-grid-item {
        padding: 1.5rem 0.5rem !important;
    }
    .summary-icon {
        width: 4rem !important;
        height: 4rem !important;
    }
    .summary-name {
        font-size: 1.25rem !important;
    }

    /* 맨 마지막 항목만 하단 선 제거 */
    .summary-grid-item:last-child {
        border-bottom: none !important;
    }
}

/* ==========================================================================
   3. 각 항목별 SVG 백그라운드 (총 15종)
   ========================================================================== */

/* [1] 개인정보 처리목적 (폴더 + 과녁) */
.policy-title.icon-purpose::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M30 35 L45 35 L50 40 L75 40 L75 70 L30 70 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Ccircle cx='60' cy='55' r='10' stroke='%23f47f24' stroke-width='3' fill='%23fff'/%3E%3Ccircle cx='60' cy='55' r='3' fill='%23f47f24'/%3E%3Cpath d='M60 40 L60 45 M60 65 L60 70 M45 55 L50 55 M70 55 L75 55' stroke='%23f47f24' stroke-width='3'/%3E%3C/svg%3E");
}

/* [2] 처리 및 보유 기간 (폴더 + 시계) */
.policy-title.icon-period::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M25 35 L40 35 L45 40 L70 40 L70 50 M25 35 L25 70 L50 70' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Ccircle cx='65' cy='65' r='14' stroke='%23f47f24' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M65 58 L65 65 L70 65' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* [3] 개인정보의 제3자 제공 (사람 + 외부 전달 화살표) */
.policy-title.icon-provide::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='40' cy='40' r='10' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M25 65 C25 55, 30 52, 40 52 C45 52, 48 54, 52 57' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Ccircle cx='65' cy='45' r='8' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M52 70 C52 62, 58 60, 65 60 C72 60, 78 62, 78 70' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M45 65 L60 65 L55 60 M60 65 L55 70' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* [4] 개인정보처리 위탁 (사람간 교환 화살표) */
.policy-title.icon-entrust::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='35' cy='40' r='9' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M20 65 C20 55, 28 52, 35 52 C40 52, 45 54, 48 58' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Ccircle cx='65' cy='40' r='9' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M52 58 C55 54, 60 52, 65 52 C72 52, 80 55, 80 65' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M35 60 L65 60 M60 55 L65 60 L60 65' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3Cpath d='M65 68 L35 68 M40 63 L35 68 L40 73' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* [5] 정보주체 권리 의무 (사람 + 권리 체크) */
.policy-title.icon-rights::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='40' cy='42' r='12' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M20 75 C20 60, 60 60, 60 75' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M60 50 L68 58 L82 44' stroke='%23f47f24' stroke-width='4' fill='none'/%3E%3C/svg%3E");
}

/* [6] 일반 개인정보 수집 (개인 사람) */
.policy-title.icon-collect::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='50' cy='40' r='14' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M25 75 C25 60, 35 55, 50 55 C65 55, 75 60, 75 75' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3C/svg%3E");
}

/* [7] 개인정보 파기 절차 (문서 + 파기 X 마크) */
.policy-title.icon-destroy::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M35 30 L65 30 L65 70 L35 70 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M42 42 L58 58 M58 42 L42 58' stroke='%23f47f24' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* [8] 개인정보의 안전성 확보 조치 (문서 + 방패) */
.policy-title.icon-secure::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M35 25 L65 25 L65 40 L35 40 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M35 40 L35 75 L65 75 M42 32 L58 32 M42 40 L48 40' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M50 45 L68 50 L68 65 C68 75, 50 82, 50 82 C50 82, 32 75, 32 65 L32 50 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M50 55 L50 68' stroke='%231458c7' stroke-width='3'/%3E%3Ccircle cx='50' cy='71' r='1.5' fill='%231458c7'/%3E%3C/svg%3E");
}

/* [9] 자동 수집 장치 거부 / 쿠키 (눈동자 관찰 + 톱니바퀴) */
.policy-title.icon-cookie::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M25 50 C35 30, 65 30, 75 50 C65 70, 35 70, 25 50' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='9' stroke='%23f47f24' stroke-width='4' fill='none'/%3E%3C/svg%3E");
}

/* [10] 개인정보보호 책임자 (넥타이 맨 관리자) */
.policy-title.icon-manager::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='50' cy='38' r='11' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M28 75 C28 55, 72 55, 72 75' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M50 51 L45 68 L55 68 Z' fill='%23f47f24'/%3E%3C/svg%3E");
}

/* [11] 권익침해 구제방법 (헤드셋/상담 지원) */
.policy-title.icon-relief::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M30 58 C30 38, 70 38, 70 58' stroke='%231458c7' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='28' cy='62' r='5' stroke='%231458c7' stroke-width='4' fill='%23fff'/%3E%3Ccircle cx='72' cy='62' r='5' stroke='%231458c7' stroke-width='4' fill='%23fff'/%3E%3Cpath d='M35 48 Q50 38 65 48' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}

/* [12] 동의 없는 추가 제공 예외 (문서 + 주의 느낌표) */
.policy-title.icon-exception::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M35 25 L65 25 L65 75 L35 75 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M50 38 L50 56' stroke='%23f47f24' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='50' cy='66' r='2.5' fill='%23f47f24'/%3E%3C/svg%3E");
}

/* [13] 가명정보 처리 (눈이 가려진 사람 / 익명성) */
.policy-title.icon-pseudonym::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Ccircle cx='50' cy='42' r='13' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M25 75 C25 60, 75 60, 75 75' stroke='%231458c7' stroke-width='3' fill='none'/%3E%3Cpath d='M38 40 L62 40' stroke='%23f47f24' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* [14] 보호수준 평가 결과 (문서 + 돋보기 탐색) */
.policy-title.icon-evaluate::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Cpath d='M30 30 L60 30 L60 70 L30 70 Z' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Ccircle cx='62' cy='52' r='12' stroke='%23f47f24' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M70 60 L80 70' stroke='%23f47f24' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* [15] 처리방침 변경 (달력 + 업데이트 갱신 화살표) */
.policy-title.icon-update::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 10 L90 30 L90 70 L50 90 L10 70 L10 30 Z' stroke='%231458c7' stroke-width='3' fill='%23f8faff'/%3E%3Crect x='32' y='32' width='36' height='36' rx='4' stroke='%231458c7' stroke-width='3' fill='%23fff'/%3E%3Cpath d='M32 45 L68 45' stroke='%231458c7' stroke-width='3'/%3E%3Cpath d='M40 26 L40 36 M60 26 L60 36' stroke='%231458c7' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M42 58 A 7 7 0 1 1 58 58' stroke='%23f47f24' stroke-width='3' fill='none'/%3E%3Cpath d='M58 58 L52 54 M58 58 L63 52' stroke='%23f47f24' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 상단 안내문(login-info-box__text) 첫 글자 들여쓰기 및 문단 간격 */
.policy-info-box-layout .login-info-box__text {
    text-indent: 1.5rem;
    margin-bottom: 1.6rem;
}

/* 박스 안의 가장 마지막 문단은 아래 여백을 없애서 핏을 맞춰줌 */
.policy-info-box-layout .login-info-box__text:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   HTML5 Dialog 기반 모달 팝업 CSS
   ========================================================================== */

/* 1. 모달 팝업창 본체 스타일 */
.policy-modal {
    margin: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    border: none;
    border-radius: 12px;
    padding: 0;
    background: #fff;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* 2. 모달이 떴을 때 뒤에 깔리는 반투명 검은 배경 */
.policy-modal::backdrop {
    background: rgba(17, 24, 39, 0.6);
    backdrop-filter: blur(2px);
}

/* 3. 모달 헤더 (제목과 닫기 버튼) */
.policy-modal .modal-header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 2.5rem;
    background: #f8faff;
    border-bottom: 1px solid #e3e7ef;
    border-radius: 12px 12px 0 0;
    position: relative;
    z-index: 2;
}

.policy-modal .modal-header h4 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--c-dark, #1d2f57);
    margin: 0;
}

/* 4. 닫기 버튼 (X 모양) */
.policy-modal .btn-close {
    flex: 0 0 auto;
    position: relative;
    z-index: 3;
    background: transparent;
    border: none;
    font-size: 2.2rem;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0.5rem;
    transition: color 0.15s ease;
}

.policy-modal .btn-close:hover {
    color: #d43d3d; /* 마우스 올리면 빨간색으로 경고/닫기 느낌 강조 */
}

/* 5. 모달 안쪽 본문 영역 (스크롤 처리) */
.policy-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 2.5rem;
    overflow-y: auto;
    max-height: none;
}

/* 모달 내부의 그리드 표 간격 조정 (여백 꼬임 방지) */
.policy-modal .policy-grid {
    margin-top: 0;
}

/* ==========================================================================
   본문 텍스트 외부 링크 전용 스타일
   ========================================================================== */
.policy-text-link {
    color: var(--c-primary, #1458c7);
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

/* 마우스를 올렸을 때 살짝 더 진한 파란색으로 변하는 효과 */
.policy-text-link:hover {
    color: #0d3b85;
}

/* ==========================================================================
   개인정보 처리 절차 흐름도 이미지 전용 스타일
   ========================================================================== */
.policy-img-wrap {
    text-align: center;
    margin: 1.5rem 0;
}

.policy-process-img {
    max-width: 100%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #cfd7e6;
    border-radius: 1.2rem;
    padding: 2.4rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

@media (max-width: 768px) {
    .policy-process-img {
        padding: 1.2rem;
        border-radius: 0.8rem;
    }
}

/* ==========================================================================
   소제목 (담당자 안내 등) 강조 스타일
   ========================================================================== */
.policy-sub-title {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--c-dark, #1d2f57);
    background-color: #f1f5f9;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

/* 담당자 안내용 아이콘 (헤드셋 모양) */
.policy-sub-title.icon-contact::before {
    content: "";
    display: block;
    width: 2.2rem;
    height: 2.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231458c7' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-2.896-1.596-5.23-3.93-6.826-6.826l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 모바일 화면 대응 */
@media (max-width: 768px) {
    .policy-sub-title {
        font-size: 1.45rem;
        padding: 0.6rem 1.2rem;
    }
    .policy-sub-title.icon-contact::before {
        width: 1.8rem;
        height: 1.8rem;
    }
}